(@aws-amplify/ui-components): Add form section sub title slot (aws-am…

…plify#6326) * Add form section description slot * Update snapshots * Styling cleanup * Update snaps * Remove unused code * Remove duplicate css width * Clean up CSS and add slot documentation * Update snap * Update slot documentation and css * Update amplify-sign-in.scss * Use sub instead of 2 Co-authored-by: Ashika <[email protected]> Co-authored-by: Sam Martinez <[email protected]>
abdielou · Jul 28, 2020 · 3642e6a · 3642e6a
1 parent a913383
commit 3642e6a
Show file tree

Hide file tree

Showing 14 changed files with 75 additions and 13 deletions.
diff --git a/...ges/amplify-ui-components/src/components/amplify-authenticator/amplify-authenticator.scss b/...ges/amplify-ui-components/src/components/amplify-authenticator/amplify-authenticator.scss
@@ -1,5 +1,7 @@
 :host {
   --background-color: var(--amplify-background-color);
+  --width: 28.75rem;
+  --min-width: 20rem;
   -webkit-font-smoothing: antialiased;
   -moz-osx-font-smoothing: grayscale;
 }
diff --git a/...nents/src/components/amplify-form-section/__snapshots__/amplify-form-section.spec.ts.snap b/...nents/src/components/amplify-form-section/__snapshots__/amplify-form-section.spec.ts.snap
@@ -8,7 +8,10 @@ exports[`amplify-form-section spec: Render logic -> should render a form section
         <div>
           <slot name="amplify-form-section-header">
             <div class="form-section-header">
-              <h3 data-test="form-section-header-section"></h3>
+              <h3 class="header" data-test="form-section-header-section"></h3>
+              <div class="subtitle">
+                <slot name="subtitle"></slot>
+              </div>
             </div>
           </slot>
         </div>
@@ -38,7 +41,10 @@ exports[`amplify-form-section spec: Render logic -> should render a form section
         <div>
           <slot name="amplify-form-section-header">
             <div class="form-section-header">
-              <h3 data-test="form-section-header-section"></h3>
+              <h3 class="header" data-test="form-section-header-section"></h3>
+              <div class="subtitle">
+                <slot name="subtitle"></slot>
+              </div>
             </div>
           </slot>
         </div>
@@ -68,7 +74,10 @@ exports[`amplify-form-section spec: Render logic -> should render form section 1
         <div>
           <slot name="amplify-form-section-header">
             <div class="form-section-header">
-              <h3 data-test="form-section-header-section"></h3>
+              <h3 class="header" data-test="form-section-header-section"></h3>
+              <div class="subtitle">
+                <slot name="subtitle"></slot>
+              </div>
             </div>
           </slot>
         </div>

diff --git a/packages/amplify-ui-components/src/components/amplify-form-section/amplify-form-section.scss b/packages/amplify-ui-components/src/components/amplify-form-section/amplify-form-section.scss
@@ -1,17 +1,27 @@
 :host {
   --header-color: var(--amplify-secondary-color);
-  --header-size: var(--amplify-text-md);
+  --header-size: var(--amplify-text-md-sub);
+  --subtitle-size: var(--amplify-grey);
+  --subtitle-color: var(--amplify-grey);
   --footer-color: var(--amplify-grey);
   --footer-size: var(--amplify-text-sm);
   --font-family: var(--amplify-font-family);
   --font-weight: var(--amplify-font-weight);
 }
 
 .form-section-header {
-  color: var(--header-color);
-  margin-bottom: 24px;
-  font-size: var(--header-size);
-  font-weight: 700;
+  .header {
+    color: var(--header-color);
+    font-size: var(--header-size);
+    font-weight: 700;
+    margin-bottom: 0.75rem;
+  }
+  .subtitle {
+    font-weight: 400;
+    font-size: var(--amplify-text-sm);
+    color: var(--subtitle-color);
+  }
+  margin: 1rem 0 1.5rem 0;
 }
 
 .form-section-footer {

diff --git a/packages/amplify-ui-components/src/components/amplify-form-section/amplify-form-section.tsx b/packages/amplify-ui-components/src/components/amplify-form-section/amplify-form-section.tsx
@@ -32,10 +32,16 @@ export class AmplifyFormSection {
           <div>
             <slot name="amplify-form-section-header">
               <div class="form-section-header">
-                <h3 data-test={this.testDataPrefix + '-header-section'}>{this.headerText}</h3>
+                <h3 class="header" data-test={this.testDataPrefix + '-header-section'}>
+                  {this.headerText}
+                </h3>
+                <div class="subtitle">
+                  <slot name="subtitle"></slot>
+                </div>
               </div>
             </slot>
           </div>
+
           <slot />
           <div>
             <slot name="amplify-form-section-footer">

diff --git a/packages/amplify-ui-components/src/components/amplify-section/amplify-section.scss b/packages/amplify-ui-components/src/components/amplify-section/amplify-section.scss
@@ -1,5 +1,6 @@
 :host {
   --font-family: var(--amplify-font-family);
+  --background-color: var(--amplify-background-color);
 }
 
 .section {
@@ -15,10 +16,9 @@
   font-family: var(--font-family);
 
   width: 100%;
-  min-width: 320px;
+  min-width: var(--min-width);
 
   @include md {
-    width: auto;
-    min-width: 460px;
+    width: var(--width);
   }
 }
diff --git a/...y-ui-components/src/components/amplify-sign-in/__snapshots__/amplify-sign-in.spec.ts.snap b/...y-ui-components/src/components/amplify-sign-in/__snapshots__/amplify-sign-in.spec.ts.snap
@@ -4,6 +4,9 @@ exports[`amplify-sign-in spec: Render logic -> should render a \`sign in\` form
 <amplify-sign-in>
   <mock:shadow-root>
     <amplify-form-section headertext="Sign in to your account" testdataprefix="sign-in">
+      <div slot="subtitle">
+        <slot name="header-subtitle"></slot>
+      </div>
       <amplify-federated-buttons></amplify-federated-buttons>
       <amplify-auth-fields></amplify-auth-fields>
       <div class="sign-in-form-footer" slot="amplify-form-section-footer">
@@ -34,6 +37,9 @@ exports[`amplify-sign-in spec: amplify-sign-in stories stories withEmptyFederate
 <amplify-sign-in>
   <mock:shadow-root>
     <amplify-form-section headertext="Sign in to your account" testdataprefix="sign-in">
+      <div slot="subtitle">
+        <slot name="header-subtitle"></slot>
+      </div>
       <amplify-federated-buttons></amplify-federated-buttons>
       <amplify-auth-fields></amplify-auth-fields>
       <div class="sign-in-form-footer" slot="amplify-form-section-footer">
@@ -64,6 +70,9 @@ exports[`amplify-sign-in spec: amplify-sign-in stories stories withFederated 1`]
 <amplify-sign-in>
   <mock:shadow-root>
     <amplify-form-section headertext="Sign in to your account" testdataprefix="sign-in">
+      <div slot="subtitle">
+        <slot name="header-subtitle"></slot>
+      </div>
       <amplify-federated-buttons></amplify-federated-buttons>
       <amplify-strike>
         or

diff --git a/packages/amplify-ui-components/src/components/amplify-sign-in/amplify-sign-in.scss b/packages/amplify-ui-components/src/components/amplify-sign-in/amplify-sign-in.scss
@@ -10,7 +10,10 @@
   font-size: var(--footer-size);
   color: var(--footer-color);
   font-weight: (--font-weight);
-  margin-bottom: 10px;
+
+  amplify-button {
+    margin-bottom: 0.625rem;
+  }
 
   display: flex;
   flex-direction: column-reverse;
@@ -22,6 +25,9 @@
     flex-direction: row;
     justify-content: space-between;
     align-items: baseline;
+    amplify-button {
+      margin-bottom: 0;
+    }
   }
 
   * + * {

diff --git a/packages/amplify-ui-components/src/components/amplify-sign-in/amplify-sign-in.tsx b/packages/amplify-ui-components/src/components/amplify-sign-in/amplify-sign-in.tsx
@@ -29,6 +29,7 @@ import { SignInAttributes } from './amplify-sign-in-interface';
 
 const logger = new Logger('SignIn');
 /**
+ * @slot header-subtitle - Subtitle content placed below header text
  * @slot footer - Content is place in the footer of the component
  * @slot primary-footer-content - Content placed on the right side of the footer
  * @slot secondary-footer-content - Content placed on the left side of the footer
@@ -313,6 +314,9 @@ export class AmplifySignIn {
         handleSubmit={this.handleSubmit}
         testDataPrefix={'sign-in'}
       >
+        <div slot="subtitle">
+          <slot name="header-subtitle"></slot>
+        </div>
         <amplify-federated-buttons handleAuthStateChange={this.handleAuthStateChange} federated={this.federated} />
 
         {!isEmpty(this.federated) && <amplify-strike>or</amplify-strike>}

diff --git a/packages/amplify-ui-components/src/components/amplify-sign-in/readme.md b/packages/amplify-ui-components/src/components/amplify-sign-in/readme.md
diff --git a/...y-ui-components/src/components/amplify-sign-up/__snapshots__/amplify-sign-up.spec.ts.snap b/...y-ui-components/src/components/amplify-sign-up/__snapshots__/amplify-sign-up.spec.ts.snap
@@ -4,6 +4,9 @@ exports[`amplify-sign-up spec: Render logic -> should render a \`sign up\` form
 <amplify-sign-up>
   <mock:shadow-root>
     <amplify-form-section headertext="Create a new account" testdataprefix="sign-up">
+      <div slot="subtitle">
+        <slot name="header-subtitle"></slot>
+      </div>
       <amplify-auth-fields></amplify-auth-fields>
       <div class="sign-up-form-footer" slot="amplify-form-section-footer">
         <slot name="footer">

diff --git a/packages/amplify-ui-components/src/components/amplify-sign-up/amplify-sign-up.scss b/packages/amplify-ui-components/src/components/amplify-sign-up/amplify-sign-up.scss
@@ -15,12 +15,18 @@
   flex-direction: column-reverse;
   align-items: center;
   justify-content: space-around;
+  amplify-button {
+    margin-bottom: 0.625rem;
+  }
 
   @include md {
     display: flex;
     flex-direction: row;
     justify-content: space-between;
     align-items: baseline;
+    amplify-button {
+      margin-bottom: 0;
+    }
   }
 
   * + * {

diff --git a/packages/amplify-ui-components/src/components/amplify-sign-up/amplify-sign-up.tsx b/packages/amplify-ui-components/src/components/amplify-sign-up/amplify-sign-up.tsx
@@ -20,6 +20,7 @@ import {
 import { Translations } from '../../common/Translations';
 
 /**
+ * @slot header-subtitle - Subtitle content placed below header text
  * @slot footer - Content is place in the footer of the component
  * @slot primary-footer-content - Content placed on the right side of the footer
  * @slot secondary-footer-content - Content placed on the left side of the footer
@@ -306,6 +307,9 @@ export class AmplifySignUp {
         handleSubmit={this.handleSubmit}
         testDataPrefix={'sign-up'}
       >
+        <div slot="subtitle">
+          <slot name="header-subtitle"></slot>
+        </div>
         <amplify-auth-fields formFields={this.newFormFields} />
         <div class="sign-up-form-footer" slot="amplify-form-section-footer">
           <slot name="footer">

diff --git a/packages/amplify-ui-components/src/components/amplify-sign-up/readme.md b/packages/amplify-ui-components/src/components/amplify-sign-up/readme.md
diff --git a/packages/amplify-ui-components/src/global/theme.ts b/packages/amplify-ui-components/src/global/theme.ts
@@ -26,6 +26,7 @@ if (browserOrNode().isBrowser) {
       --amplify-text-xs: 0.81rem;
       --amplify-text-sm: 0.875rem;
       --amplify-text-md: 1rem;
+      --amplify-text-md-sub: 1.15rem;
       --amplify-text-lg: 1.5rem;
       --amplify-text-xl: 2rem;
       --amplify-text-xxl: 2.5rem;