Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

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

Merged
merged 12 commits into from Apr 30, 2020
Merged

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

Show file tree
Hide file tree
Changes from 5 commits
Commits
Show all changes
12 commits
Select commit Hold shift + click to select a range
1912703
Add slots for sign-in/up footer
jordanranz Apr 28, 2020
20689de
Update snaps and add sign up host
jordanranz Apr 28, 2020
47001d8
Merge branch 'master' into more-slots
jordanranz Apr 28, 2020
5e9732e
Merge branch 'master' into more-slots
ericclemmons Apr 28, 2020
2900349
Merge branch 'master' into more-slots
ashika01 Apr 28, 2020
4378536
Merge branch 'master' into more-slots
ashika01 Apr 28, 2020
80eac4c
Remove Host until needed
jordanranz Apr 29, 2020
35d09a9
Merge branch 'more-slots' of github.com:jordanranz/amplify-js into mo…
jordanranz Apr 29, 2020
9e2dce0
Remove unused improts
jordanranz Apr 29, 2020
ec74ab2
Merge branch 'master' into more-slots
jordanranz Apr 29, 2020
fb0854b
Merge branch 'master' into more-slots
ashika01 Apr 30, 2020
992a367
Merge branch 'master' into more-slots
jordanranz Apr 30, 2020
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Jump to
Jump to file
Failed to load files.
Diff view
Diff view
90 changes: 54 additions & 36 deletions ...y-ui-components/src/components/amplify-sign-in/__snapshots__/amplify-sign-in.spec.ts.snap
View file
Open in desktop
Expand Up @@ -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>
Expand All @@ -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>
Expand All @@ -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>
Expand Down
58 changes: 35 additions & 23 deletions packages/amplify-ui-components/src/components/amplify-sign-in/amplify-sign-in.tsx
View file
Open in desktop
@@ -1,6 +1,6 @@
import { Auth } from '@aws-amplify/auth';
import { I18n, Logger, isEmpty } from '@aws-amplify/core';
import { Component, Prop, State, h } from '@stencil/core';
import { Component, Prop, State, Host, h } from '@stencil/core';
import {
FormFieldTypes,
PhoneNumberInterface,
Expand Down Expand Up @@ -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',
Expand Down Expand Up @@ -261,29 +265,37 @@ export class AmplifySignIn {

render() {
return (
<amplify-form-section headerText={this.headerText} handleSubmit={this.handleSubmit} testDataPrefix={'sign-in'}>
<amplify-federated-buttons handleAuthStateChange={this.handleAuthStateChange} federated={this.federated} />
<Host>
jordanranz marked this conversation as resolved.
Show resolved Hide resolved
<amplify-form-section headerText={this.headerText} handleSubmit={this.handleSubmit} testDataPrefix={'sign-in'}>
<amplify-federated-buttons handleAuthStateChange={this.handleAuthStateChange} federated={this.federated} />

{!isEmpty(this.federated) && <amplify-strike>or</amplify-strike>}
{!isEmpty(this.federated) && <amplify-strike>or</amplify-strike>}

<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>
</div>
</amplify-form-section>
<amplify-auth-fields formFields={this.newFormFields} />
<div slot="amplify-form-section-footer" class="sign-in-form-footer">
<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>
</Host>
);
}
}
9 changes: 9 additions & 0 deletions packages/amplify-ui-components/src/components/amplify-sign-in/readme.md
View file
Open in desktop

Some generated files are not rendered by default. Learn more about how customized files appear on GitHub.

30 changes: 18 additions & 12 deletions ...y-ui-components/src/components/amplify-sign-up/__snapshots__/amplify-sign-up.spec.ts.snap
View file
Open in desktop
Expand Up @@ -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>
Expand Down
53 changes: 33 additions & 20 deletions packages/amplify-ui-components/src/components/amplify-sign-up/amplify-sign-up.tsx
View file
Open in desktop
@@ -1,6 +1,6 @@
import { I18n } from '@aws-amplify/core';
import { Auth } from '@aws-amplify/auth';
import { Component, Prop, h, State } from '@stencil/core';
import { Component, Prop, h, State, Host } from '@stencil/core';
import {
FormFieldTypes,
PhoneNumberInterface,
Expand All @@ -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',
Expand Down Expand Up @@ -268,25 +273,33 @@ export class AmplifySignUp {

render() {
return (
<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>
</div>
</amplify-form-section>
<Host>
<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">
<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>
</Host>
);
}
}
9 changes: 9 additions & 0 deletions packages/amplify-ui-components/src/components/amplify-sign-up/readme.md
View file
Open in desktop

Some generated files are not rendered by default. Learn more about how customized files appear on GitHub.