feat(@aws-amplify/ui-components): Open up slot for sign-in/up footer (#…

…5603) * Add slots for sign-in/up footer * Update snaps and add sign up host * Remove Host until needed * Remove unused improts Co-authored-by: Eric Clemmons <eric@smarterspam.com> Co-authored-by: Ashika <35131273+ashika01@users.noreply.github.com>
aws-amplify · Apr 30, 2020 · 5ebdab7 · 5ebdab7
1 parent b8d2c4d
commit 5ebdab7
Show file tree

Hide file tree

Showing 6 changed files with 140 additions and 77 deletions.
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
@@ -7,18 +7,24 @@ exports[`amplify-sign-in spec: Render logic -> should render a \`sign in\` form
       <amplify-federated-buttons></amplify-federated-buttons>
       <amplify-auth-fields></amplify-auth-fields>
       <div class="sign-in-form-footer" slot="amplify-form-section-footer">
-        <span>
-          No account?
-          <amplify-button data-test="sign-in-create-account-link" variant="anchor">
-            Create account
-          </amplify-button>
-        </span>
-        <amplify-button data-test="sign-in-sign-in-button" type="submit">
-          <amplify-loading-spinner style="display: none;"></amplify-loading-spinner>
-          <span style="display: initial;">
-            Sign In
-          </span>
-        </amplify-button>
+        <slot name="footer">
+          <slot name="secondary-footer-content">
+            <span>
+              No account?
+              <amplify-button data-test="sign-in-create-account-link" variant="anchor">
+                Create account
+              </amplify-button>
+            </span>
+          </slot>
+          <slot name="primary-footer-content">
+            <amplify-button data-test="sign-in-sign-in-button" type="submit">
+              <amplify-loading-spinner style="display: none;"></amplify-loading-spinner>
+              <span style="display: initial;">
+                Sign In
+              </span>
+            </amplify-button>
+          </slot>
+        </slot>
       </div>
     </amplify-form-section>
   </mock:shadow-root>
@@ -32,18 +38,24 @@ exports[`amplify-sign-in spec: amplify-sign-in stories stories withEmptyFederate
       <amplify-federated-buttons></amplify-federated-buttons>
       <amplify-auth-fields></amplify-auth-fields>
       <div class="sign-in-form-footer" slot="amplify-form-section-footer">
-        <span>
-          No account?
-          <amplify-button data-test="sign-in-create-account-link" variant="anchor">
-            Create account
-          </amplify-button>
-        </span>
-        <amplify-button data-test="sign-in-sign-in-button" type="submit">
-          <amplify-loading-spinner style="display: none;"></amplify-loading-spinner>
-          <span style="display: initial;">
-            Sign In
-          </span>
-        </amplify-button>
+        <slot name="footer">
+          <slot name="secondary-footer-content">
+            <span>
+              No account?
+              <amplify-button data-test="sign-in-create-account-link" variant="anchor">
+                Create account
+              </amplify-button>
+            </span>
+          </slot>
+          <slot name="primary-footer-content">
+            <amplify-button data-test="sign-in-sign-in-button" type="submit">
+              <amplify-loading-spinner style="display: none;"></amplify-loading-spinner>
+              <span style="display: initial;">
+                Sign In
+              </span>
+            </amplify-button>
+          </slot>
+        </slot>
       </div>
     </amplify-form-section>
   </mock:shadow-root>
@@ -60,18 +72,24 @@ exports[`amplify-sign-in spec: amplify-sign-in stories stories withFederated 1`]
       </amplify-strike>
       <amplify-auth-fields></amplify-auth-fields>
       <div class="sign-in-form-footer" slot="amplify-form-section-footer">
-        <span>
-          No account?
-          <amplify-button data-test="sign-in-create-account-link" variant="anchor">
-            Create account
-          </amplify-button>
-        </span>
-        <amplify-button data-test="sign-in-sign-in-button" type="submit">
-          <amplify-loading-spinner style="display: none;"></amplify-loading-spinner>
-          <span style="display: initial;">
-            Sign In
-          </span>
-        </amplify-button>
+        <slot name="footer">
+          <slot name="secondary-footer-content">
+            <span>
+              No account?
+              <amplify-button data-test="sign-in-create-account-link" variant="anchor">
+                Create account
+              </amplify-button>
+            </span>
+          </slot>
+          <slot name="primary-footer-content">
+            <amplify-button data-test="sign-in-sign-in-button" type="submit">
+              <amplify-loading-spinner style="display: none;"></amplify-loading-spinner>
+              <span style="display: initial;">
+                Sign In
+              </span>
+            </amplify-button>
+          </slot>
+        </slot>
       </div>
     </amplify-form-section>
   </mock:shadow-root>

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,7 +29,11 @@ import {
 import { SignInAttributes } from './amplify-sign-in-interface';
 
 const logger = new Logger('SignIn');
-
+/**
+ * @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
+ */
 @Component({
   tag: 'amplify-sign-in',
   styleUrl: 'amplify-sign-in.scss',
@@ -265,20 +269,26 @@ export class AmplifySignIn {
 
         <amplify-auth-fields formFields={this.newFormFields} />
         <div slot="amplify-form-section-footer" class="sign-in-form-footer">
-          <span>
-            {I18n.get(Translations.NO_ACCOUNT_TEXT)}{' '}
-            <amplify-button
-              variant="anchor"
-              onClick={() => this.handleAuthStateChange(AuthState.SignUp)}
-              data-test="sign-in-create-account-link"
-            >
-              {I18n.get(Translations.CREATE_ACCOUNT_TEXT)}
-            </amplify-button>
-          </span>
-          <amplify-button type="submit" disabled={this.loading} data-test="sign-in-sign-in-button">
-            <amplify-loading-spinner style={{ display: this.loading ? 'initial' : 'none' }} />
-            <span style={{ display: this.loading ? 'none' : 'initial' }}>{this.submitButtonText}</span>
-          </amplify-button>
+          <slot name="footer">
+            <slot name="secondary-footer-content">
+              <span>
+                {I18n.get(Translations.NO_ACCOUNT_TEXT)}{' '}
+                <amplify-button
+                  variant="anchor"
+                  onClick={() => this.handleAuthStateChange(AuthState.SignUp)}
+                  data-test="sign-in-create-account-link"
+                >
+                  {I18n.get(Translations.CREATE_ACCOUNT_TEXT)}
+                </amplify-button>
+              </span>
+            </slot>
+            <slot name="primary-footer-content">
+              <amplify-button type="submit" disabled={this.loading} data-test="sign-in-sign-in-button">
+                <amplify-loading-spinner style={{ display: this.loading ? 'initial' : 'none' }} />
+                <span style={{ display: this.loading ? 'none' : 'initial' }}>{this.submitButtonText}</span>
+              </amplify-button>
+            </slot>
+          </slot>
         </div>
       </amplify-form-section>
     );

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
@@ -6,18 +6,24 @@ exports[`amplify-sign-up spec: Render logic -> should render a \`sign up\` form
     <amplify-form-section headertext="Create a new account" testdataprefix="sign-up">
       <amplify-auth-fields></amplify-auth-fields>
       <div class="sign-up-form-footer" slot="amplify-form-section-footer">
-        <span>
-          Have an account?
-          <amplify-button data-test="sign-up-sign-in-link" variant="anchor">
-            Sign in
-          </amplify-button>
-        </span>
-        <amplify-button data-test="sign-up-create-account-button" type="submit">
-          <amplify-loading-spinner style="display: none;"></amplify-loading-spinner>
-          <span style="display: initial;">
-            Create Account
-          </span>
-        </amplify-button>
+        <slot name="footer">
+          <slot name="secondary-footer-content">
+            <span>
+              Have an account?
+              <amplify-button data-test="sign-up-sign-in-link" variant="anchor">
+                Sign in
+              </amplify-button>
+            </span>
+          </slot>
+          <slot name="primary-footer-content">
+            <amplify-button data-test="sign-up-create-account-button" type="submit">
+              <amplify-loading-spinner style="display: none;"></amplify-loading-spinner>
+              <span style="display: initial;">
+                Create Account
+              </span>
+            </amplify-button>
+          </slot>
+        </slot>
       </div>
     </amplify-form-section>
   </mock:shadow-root>

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
@@ -21,6 +21,11 @@ import {
 } from '../../common/helpers';
 import { Translations } from '../../common/Translations';
 
+/**
+ * @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
+ */
 @Component({
   tag: 'amplify-sign-up',
   styleUrl: 'amplify-sign-up.scss',
@@ -268,20 +273,26 @@ export class AmplifySignUp {
       <amplify-form-section headerText={this.headerText} handleSubmit={this.handleSubmit} testDataPrefix={'sign-up'}>
         <amplify-auth-fields formFields={this.newFormFields} />
         <div class="sign-up-form-footer" slot="amplify-form-section-footer">
-          <span>
-            {this.haveAccountText}{' '}
-            <amplify-button
-              variant="anchor"
-              onClick={() => this.handleAuthStateChange(AuthState.SignIn)}
-              data-test="sign-up-sign-in-link"
-            >
-              {this.signInText}
-            </amplify-button>
-          </span>
-          <amplify-button type="submit" data-test="sign-up-create-account-button">
-            <amplify-loading-spinner style={{ display: this.loading ? 'initial' : 'none' }} />
-            <span style={{ display: this.loading ? 'none' : 'initial' }}>{this.submitButtonText}</span>
-          </amplify-button>
+          <slot name="footer">
+            <slot name="secondary-footer-content">
+              <span>
+                {this.haveAccountText}{' '}
+                <amplify-button
+                  variant="anchor"
+                  onClick={() => this.handleAuthStateChange(AuthState.SignIn)}
+                  data-test="sign-up-sign-in-link"
+                >
+                  {this.signInText}
+                </amplify-button>
+              </span>
+            </slot>
+            <slot name="primary-footer-content">
+              <amplify-button type="submit" data-test="sign-up-create-account-button">
+                <amplify-loading-spinner style={{ display: this.loading ? 'initial' : 'none' }} />
+                <span style={{ display: this.loading ? 'none' : 'initial' }}>{this.submitButtonText}</span>
+              </amplify-button>
+            </slot>
+          </slot>
         </div>
       </amplify-form-section>
     );

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