diff --git a/code/addons/interactions/src/examples/AccountFormInteractions/AccountFormInteractions.stories.mdx b/code/addons/interactions/src/examples/AccountFormInteractions/AccountFormInteractions.stories.mdx deleted file mode 100644 index 4c97235008e3..000000000000 --- a/code/addons/interactions/src/examples/AccountFormInteractions/AccountFormInteractions.stories.mdx +++ /dev/null @@ -1,31 +0,0 @@ -import { Meta, Canvas, Story } from '@storybook/addon-docs'; -import { expect } from '@storybook/jest'; -import { within, waitFor, fireEvent, userEvent, screen } from '@storybook/testing-library'; - -import { AccountForm } from './AccountFormInteractions'; - - - -## AccountForm - - - { - await userEvent.type(screen.getByTestId('email'), 'username@email.com'); - await userEvent.type(screen.getByTestId('password1'), 'thepassword'); - await userEvent.click(screen.getByRole('button', { name: /create account/i })); - await expect(args.onSubmit).not.toHaveBeenCalled(); - }} - /> - diff --git a/code/addons/interactions/src/examples/AccountFormInteractions/AccountFormInteractions.stories.tsx b/code/addons/interactions/src/examples/AccountFormInteractions/AccountFormInteractions.stories.tsx deleted file mode 100644 index 34f84115113c..000000000000 --- a/code/addons/interactions/src/examples/AccountFormInteractions/AccountFormInteractions.stories.tsx +++ /dev/null @@ -1,162 +0,0 @@ -/* eslint-disable jest/no-standalone-expect */ -import { Meta, ComponentStoryObj } from '@storybook/react'; -import { expect } from '@storybook/jest'; -import { within, waitFor, fireEvent, userEvent } from '@storybook/testing-library'; - -import { AccountForm } from './AccountFormInteractions'; - -export default { - title: 'Addons/Interactions/Examples/AccountForm', - component: AccountForm, - parameters: { - layout: 'centered', - theme: 'light', - options: { selectedPanel: 'storybook/interactions/panel' }, - }, - argTypes: { - onSubmit: { action: true }, - }, -} as Meta; - -type CSF3Story = ComponentStoryObj; - -export const Standard: CSF3Story = { - args: { passwordVerification: false }, -}; - -export const StandardEmailFilled = { - ...Standard, - play: async ({ canvasElement, step }) => { - const canvas = within(canvasElement); - - await step('Enter email', async () => { - await fireEvent.change(canvas.getByTestId('email'), { - target: { value: 'michael@chromatic.com' }, - }); - }); - }, -}; - -export const StandardEmailFailed = { - ...Standard, - play: async ({ args, canvasElement, step }) => { - const canvas = within(canvasElement); - - await step('Enter email and password', async () => { - await userEvent.type(canvas.getByTestId('email'), 'gert@chromatic'); - await userEvent.type(canvas.getByTestId('password1'), 'supersecret'); - }); - - await step('Submit form', async () => { - await userEvent.click(canvas.getByRole('button', { name: /create account/i })); - }); - - await canvas.findByText('Please enter a correctly formatted email address'); - await expect(args.onSubmit).not.toHaveBeenCalled(); - }, -}; - -export const StandardEmailSuccess = { - ...Standard, - play: async ({ args, canvasElement, step }) => { - const canvas = within(canvasElement); - - await step('Enter email and password', async () => { - await userEvent.type(canvas.getByTestId('email'), 'michael@chromatic.com'); - await userEvent.type(canvas.getByTestId('password1'), 'testpasswordthatwontfail'); - }); - - await step('Submit form', async () => { - await userEvent.click(canvas.getByTestId('submit')); - }); - - await waitFor(async () => { - await expect(args.onSubmit).toHaveBeenCalledTimes(1); - await expect(args.onSubmit).toHaveBeenCalledWith({ - email: 'michael@chromatic.com', - password: 'testpasswordthatwontfail', - }); - }); - }, -}; - -export const StandardPasswordFailed = { - ...Standard, - play: async (context) => { - const canvas = within(context.canvasElement); - await StandardEmailFilled.play(context); - - await context.step('Enter password', async () => { - await userEvent.type(canvas.getByTestId('password1'), 'asdf'); - }); - - await context.step('Submit form', async () => { - await userEvent.click(canvas.getByTestId('submit')); - }); - }, -}; - -export const StandardFailHover = { - ...StandardPasswordFailed, - play: async (context) => { - const canvas = within(context.canvasElement); - await StandardPasswordFailed.play(context); - await waitFor(async () => { - await userEvent.hover(canvas.getByTestId('password-error-info')); - }); - }, -}; - -export const Verification = { - args: { passwordVerification: true }, - argTypes: { onSubmit: { action: 'clicked' } }, -}; - -export const VerificationPassword = { - ...Verification, - play: async (context) => { - const canvas = within(context.canvasElement); - await StandardEmailFilled.play(context); - await context.step('Enter password', async () => { - await userEvent.type(canvas.getByTestId('password1'), 'asdfasdf'); - }); - await context.step('Submit form', async () => { - await userEvent.click(canvas.getByTestId('submit')); - }); - }, -}; - -export const VerificationPasswordMismatch = { - ...Verification, - play: async (context) => { - const canvas = within(context.canvasElement); - await StandardEmailFilled.play(context); - await context.step('Enter passwords', async () => { - await userEvent.type(canvas.getByTestId('password1'), 'asdfasdf'); - await userEvent.type(canvas.getByTestId('password2'), 'asdf1234'); - }); - await context.step('Submit form', async () => { - await userEvent.click(canvas.getByTestId('submit')); - }); - }, -}; - -export const VerificationSuccess = { - ...Verification, - play: async (context) => { - const canvas = within(context.canvasElement); - await StandardEmailFilled.play(context); - - await context.step('Enter passwords', async () => { - await new Promise((resolve) => setTimeout(resolve, 1000)); - await userEvent.type(canvas.getByTestId('password1'), 'helloyou', { delay: 50 }); - await new Promise((resolve) => setTimeout(resolve, 1000)); - await userEvent.type(canvas.getByTestId('password2'), 'helloyou', { delay: 50 }); - }); - - await context.step('Submit form', async () => { - await new Promise((resolve) => setTimeout(resolve, 1000)); - await userEvent.click(canvas.getByTestId('submit')); - }); - }, -}; diff --git a/code/addons/interactions/src/examples/AccountFormInteractions/AccountFormInteractions.tsx b/code/addons/interactions/src/examples/AccountFormInteractions/AccountFormInteractions.tsx deleted file mode 100644 index 1e40d5bacb82..000000000000 --- a/code/addons/interactions/src/examples/AccountFormInteractions/AccountFormInteractions.tsx +++ /dev/null @@ -1,553 +0,0 @@ -/* eslint-disable import/no-extraneous-dependencies */ -import { Icons, WithTooltip } from '@storybook/components'; -import { keyframes, styled } from '@storybook/theming'; -import { - ErrorMessage, - Field as FormikInput, - Form as FormikForm, - Formik, - FormikProps, -} from 'formik'; -import React, { FC, HTMLAttributes, useCallback, useState } from 'react'; - -const errorMap = { - email: { - required: { - normal: 'Please enter your email address', - tooltip: - 'We do require an email address and a password as a minimum in order to be able to create an account for you to log in with', - }, - format: { - normal: 'Please enter a correctly formatted email address', - tooltip: - 'Your email address is formatted incorrectly and is not correct - please double check for misspelling', - }, - }, - password: { - required: { - normal: 'Please enter a password', - tooltip: 'A password is requried to create an account', - }, - length: { - normal: 'Please enter a password of minimum 6 characters', - tooltip: - 'For security reasons we enforce a password length of minimum 6 characters - but have no other requirements', - }, - }, - verifiedPassword: { - required: { - normal: 'Please verify your password', - tooltip: - 'Verification of your password is required to ensure no errors in the spelling of the password', - }, - match: { - normal: 'Your passwords do not match', - tooltip: - 'Your verification password has to match your password to make sure you have not misspelled', - }, - }, -}; - -// https://emailregex.com/ -const email99RegExp = new RegExp( - // eslint-disable-next-line no-useless-escape - /^(([^<>()\[\]\\.,;:\s@"]+(\.[^<>()\[\]\\.,;:\s@"]+)*)|(".+"))@((\[[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}])|(([a-zA-Z\-0-9]+\.)+[a-zA-Z]{2,}))$/ -); - -export interface AccountFormResponse { - success: boolean; -} - -export interface AccountFormValues { - email: string; - password: string; -} - -interface FormValues extends AccountFormValues { - verifiedPassword: string; -} - -interface FormErrors { - email?: string; - emailTooltip?: string; - password?: string; - passwordTooltip?: string; - verifiedPassword?: string; - verifiedPasswordTooltip?: string; -} - -export type AccountFormProps = { - passwordVerification?: boolean; - onSubmit?: (values: AccountFormValues) => void; - onTransactionStart?: (values: AccountFormValues) => void; - onTransactionEnd?: (values: AccountFormResponse) => void; -}; - -export const AccountForm: FC = ({ - passwordVerification, - onSubmit, - onTransactionStart, - onTransactionEnd, -}) => { - const [state, setState] = useState({ - transacting: false, - transactionSuccess: false, - transactionFailure: false, - }); - - const handleFormSubmit = useCallback( - async ({ email, password }: FormValues, { setSubmitting, resetForm }) => { - if (onSubmit) { - onSubmit({ email, password }); - } - - if (onTransactionStart) { - onTransactionStart({ email, password }); - } - - setSubmitting(true); - - setState({ - ...state, - transacting: true, - }); - - await new Promise((r) => setTimeout(r, 2100)); - - const success = Math.random() < 1; - - if (onTransactionEnd) { - onTransactionEnd({ success }); - } - - setSubmitting(false); - resetForm({ values: { email: '', password: '', verifiedPassword: '' } }); - - setState({ - ...state, - transacting: false, - transactionSuccess: success === true, - transactionFailure: success === false, - }); - }, - [setState, onTransactionEnd, onTransactionStart] - ); - - return ( - - - - Storybook icon - - - - - - - - <title>Storybook - - - - - - {!state.transactionSuccess && !state.transactionFailure && ( - Create an account to join the Storybook community - )} - - {state.transactionSuccess && !state.transactionFailure && ( - -

- Everything is perfect. Your account is ready and we should probably get you started! -

-

So why don't you get started then?

- { - setState({ - transacting: false, - transactionSuccess: false, - transactionFailure: false, - }); - }} - > - Go back - - - )} - {state.transactionFailure && !state.transactionSuccess && ( - -

What a mess, this API is not working

-

- Someone should probably have a stern talking to about this, but it won't be me - coz - I'm gonna head out into the nice weather -

- { - setState({ - transacting: false, - transactionSuccess: false, - transactionFailure: false, - }); - }} - > - Go back - - - )} - {!state.transactionSuccess && !state.transactionFailure && ( - { - const errors: FormErrors = {}; - - if (!email) { - errors.email = errorMap.email.required.normal; - errors.emailTooltip = errorMap.email.required.tooltip; - } else { - const validEmail = email.match(email99RegExp); - - if (validEmail === null) { - errors.email = errorMap.email.format.normal; - errors.emailTooltip = errorMap.email.format.tooltip; - } - } - - if (!password) { - errors.password = errorMap.password.required.normal; - errors.passwordTooltip = errorMap.password.required.tooltip; - } else if (password.length < 6) { - errors.password = errorMap.password.length.normal; - errors.passwordTooltip = errorMap.password.length.tooltip; - } - - if (passwordVerification && !verifiedPassword) { - errors.verifiedPassword = errorMap.verifiedPassword.required.normal; - errors.verifiedPasswordTooltip = errorMap.verifiedPassword.required.tooltip; - } else if (passwordVerification && password !== verifiedPassword) { - errors.verifiedPassword = errorMap.verifiedPassword.match.normal; - errors.verifiedPasswordTooltip = errorMap.verifiedPassword.match.tooltip; - } - - return errors; - }} - > - {({ errors: _errors, isSubmitting, dirty }: FormikProps) => { - const errors = _errors as FormErrors; - - return ( -
- - - - {({ field }: { field: HTMLAttributes }) => ( - <> - - {errors.email && ( - {errors.emailTooltip}} - > - - - - - - )} - - )} - - - - - - {({ field }: { field: HTMLAttributes }) => ( - - )} - - {errors.password && ( - {errors.passwordTooltip}}> - - - - - - )} - - {passwordVerification && ( - - - - {({ field }: { field: HTMLAttributes }) => ( - - )} - - {errors.verifiedPassword && ( - {errors.verifiedPasswordTooltip}} - > - - - - - - )} - - )} - - - Create Account - - - Reset - - -
- ); - }} - - )} - - - ); -}; - -const Wrapper = styled.section(({ theme }) => ({ - fontFamily: theme.typography.fonts.base, - display: 'flex', - flexDirection: 'column', - alignItems: 'center', - width: 450, - padding: 32, - backgroundColor: theme.background.content, - borderRadius: 7, -})); - -const Brand = styled.div({ - display: 'flex', - alignItems: 'center', - justifyContent: 'center', -}); - -const Title = styled.svg({ - height: 40, - zIndex: 1, - left: -32, - position: 'relative', -}); - -const logoAnimation = keyframes({ - '0': { - transform: 'rotateY(0deg)', - transformOrigin: '50% 5% 0', - }, - '100%': { - transform: 'rotateY(360deg)', - transformOrigin: '50% 5% 0', - }, -}); - -interface LogoProps { - transacting: boolean; -} - -const Logo = styled.svg( - ({ transacting }) => - transacting && { - animation: `${logoAnimation} 1250ms both infinite`, - }, - { height: 40, zIndex: 10, marginLeft: 32 } -); - -const Introduction = styled.p({ - marginTop: 20, - textAlign: 'center', -}); - -const Content = styled.div({ - display: 'flex', - alignItems: 'flex-start', - justifyContent: 'center', - width: 350, - minHeight: 189, - marginTop: 8, -}); - -const Presentation = styled.div({ - textAlign: 'center', -}); - -const Form = styled(FormikForm)({ - width: '100%', - alignSelf: 'flex-start', - '&[aria-disabled="true"]': { - opacity: 0.6, - }, -}); - -const FieldWrapper = styled.div({ - display: 'flex', - flexDirection: 'column', - justifyContent: 'stretch', - marginBottom: 10, -}); - -const Label = styled.label({ - fontSize: 13, - fontWeight: 500, - marginBottom: 6, -}); - -const Input = styled.input(({ theme }) => ({ - fontSize: 14, - color: theme.color.defaultText, - padding: '10px 15px', - borderRadius: 4, - appearance: 'none', - outline: 'none', - border: '0 none', - boxShadow: 'rgb(0 0 0 / 10%) 0px 0px 0px 1px inset', - '&:focus': { - boxShadow: 'rgb(30 167 253) 0px 0px 0px 1px inset', - }, - '&:active': { - boxShadow: 'rgb(30 167 253) 0px 0px 0px 1px inset', - }, - '&[aria-invalid="true"]': { - boxShadow: 'rgb(255 68 0) 0px 0px 0px 1px inset', - }, -})); - -const ErrorWrapper = styled.div({ - display: 'flex', - alignItems: 'flex-start', - fontSize: 11, - marginTop: 6, - cursor: 'help', -}); - -const ErrorIcon = styled(Icons)(({ theme }) => ({ - fill: theme.color.defaultText, - opacity: 0.8, - marginRight: 6, - marginLeft: 2, - marginTop: 4, -})); - -const ErrorTooltip = styled.div(({ theme }) => ({ - fontFamily: theme.typography.fonts.base, - fontSize: 13, - padding: 8, - maxWidth: 350, -})); - -const Actions = styled.div({ - alignSelf: 'stretch', - display: 'flex', - justifyContent: 'space-between', - marginTop: 24, -}); - -const Error = styled(ErrorMessage)({}); - -interface ButtonProps { - dirty?: boolean; -} - -const Button = styled.button({ - backgroundColor: 'transparent', - border: '0 none', - outline: 'none', - appearance: 'none', - fontWeight: 500, - fontSize: 12, - flexBasis: '50%', - cursor: 'pointer', - padding: '11px 16px', - borderRadius: 4, - textTransform: 'uppercase', - '&:focus': { - textDecoration: 'underline', - fontWeight: 700, - }, - '&:active': { - textDecoration: 'underline', - fontWeight: 700, - }, - '&[aria-disabled="true"]': { - cursor: 'default', - }, -}); - -const Submit = styled(Button)(({ theme, dirty }) => ({ - marginRight: 8, - backgroundColor: theme.color.secondary, - color: theme.color.inverseText, - opacity: dirty ? 1 : 0.6, - boxShadow: 'rgb(30 167 253 / 10%) 0 0 0 1px inset', -})); - -const Reset = styled(Button)(({ theme }) => ({ - marginLeft: 8, - boxShadow: 'rgb(30 167 253) 0 0 0 1px inset', - color: theme.color.secondary, -})); diff --git a/code/addons/interactions/src/examples/Examples.stories.tsx b/code/addons/interactions/src/examples/Examples.stories.tsx deleted file mode 100644 index d16c086e61ee..000000000000 --- a/code/addons/interactions/src/examples/Examples.stories.tsx +++ /dev/null @@ -1,126 +0,0 @@ -/* eslint-disable jest/no-standalone-expect */ -import { Story, Meta } from '@storybook/react'; -import { expect } from '@storybook/jest'; -import { within, waitFor, userEvent, waitForElementToBeRemoved } from '@storybook/testing-library'; -import React from 'react'; - -export default { - title: 'Addons/Interactions/Examples', - parameters: { - layout: 'centered', - theme: 'light', - options: { selectedPanel: 'storybook/interactions/panel' }, - }, - argTypes: { - onSubmit: { action: true }, - }, -} as Meta; - -export const Assertions: Story = ({ onSubmit }) => ( - -); -Assertions.play = async ({ args, canvasElement }) => { - await userEvent.click(within(canvasElement).getByRole('button')); - await expect(args.onSubmit).toHaveBeenCalledWith(expect.stringMatching(/([A-Z])\w+/gi)); - await expect([{ name: 'John', age: 42 }]).toEqual( - expect.arrayContaining([ - expect.objectContaining({ name: 'John' }), - expect.objectContaining({ age: 42 }), - ]) - ); -}; - -export const FindBy: Story = () => { - const [isLoading, setIsLoading] = React.useState(true); - React.useEffect(() => { - setTimeout(() => setIsLoading(false), 500); - }, []); - return isLoading ?
Loading...
: ; -}; -FindBy.play = async ({ canvasElement }) => { - const canvas = within(canvasElement); - await canvas.findByRole('button'); - await expect(true).toBe(true); -}; - -export const WaitFor: Story = ({ onSubmit }) => ( - -); -WaitFor.play = async ({ args, canvasElement }) => { - await userEvent.click(await within(canvasElement).findByText('Click')); - await waitFor(async () => { - await expect(args.onSubmit).toHaveBeenCalledWith(expect.stringMatching(/([A-Z])\w+/gi)); - await expect(true).toBe(true); - }); -}; - -export const WaitForElementToBeRemoved: Story = () => { - const [isLoading, setIsLoading] = React.useState(true); - React.useEffect(() => { - setTimeout(() => setIsLoading(false), 1500); - }, []); - return isLoading ?
Loading...
: ; -}; -WaitForElementToBeRemoved.play = async ({ canvasElement }) => { - const canvas = within(canvasElement); - await waitForElementToBeRemoved(await canvas.findByText('Loading...'), { timeout: 2000 }); - const button = await canvas.findByText('Loaded!'); - await expect(button).not.toBeNull(); -}; - -export const WithLoaders: Story = ({ onSubmit }, { loaded: { todo } }) => { - return ( - - ); -}; -WithLoaders.loaders = [ - async () => { - // long fake timeout - await new Promise((resolve) => setTimeout(resolve, 2000)); - - return { - todo: { - userId: 1, - id: 1, - title: 'delectus aut autem', - completed: false, - }, - }; - }, -]; -WithLoaders.play = async ({ args, canvasElement }) => { - const canvas = within(canvasElement); - const todoItem = await canvas.findByText('Todo: delectus aut autem'); - await userEvent.click(todoItem); - await expect(args.onSubmit).toHaveBeenCalledWith('delectus aut autem'); -}; - -export const WithSteps: Story = ({ onSubmit }) => ( - -); -WithSteps.play = async ({ args, canvasElement, step }) => { - await step('Click button', async () => { - await userEvent.click(within(canvasElement).getByRole('button')); - - await step('Verify submit', async () => { - await expect(args.onSubmit).toHaveBeenCalledWith(expect.stringMatching(/([A-Z])\w+/gi)); - }); - - await step('Verify result', async () => { - await expect([{ name: 'John', age: 42 }]).toEqual( - expect.arrayContaining([ - expect.objectContaining({ name: 'John' }), - expect.objectContaining({ age: 42 }), - ]) - ); - }); - }); -}; diff --git a/code/addons/interactions/template/stories/basics.stories.ts b/code/addons/interactions/template/stories/basics.stories.ts new file mode 100644 index 000000000000..8633beb95512 --- /dev/null +++ b/code/addons/interactions/template/stories/basics.stories.ts @@ -0,0 +1,89 @@ +/* eslint-disable jest/no-standalone-expect */ +import globalThis from 'global'; +import { + within, + waitFor, + fireEvent, + userEvent, + waitForElementToBeRemoved, +} from '@storybook/testing-library'; +import { expect } from '@storybook/jest'; + +export default { + component: globalThis.Components.Form, + argTypes: { + onSuccess: { type: 'function' }, + }, +}; + +export const Type = { + play: async ({ canvasElement }) => { + const canvas = within(canvasElement); + await userEvent.type(canvas.getByTestId('value'), 'test'); + }, +}; + +export const Step = { + play: async ({ step }) => { + await step('Enter value', Type.play); + }, +}; + +export const Callback = { + play: async ({ args, canvasElement, step }) => { + const canvas = within(canvasElement); + await step('Enter value', Type.play); + + await step('Submit', async () => { + await fireEvent.click(canvas.getByRole('button')); + }); + + await expect(args.onSuccess).toHaveBeenCalled(); + }, +}; + +// NOTE: of course you can use `findByText()` to implicitly waitFor, but we want +// an explicit test here +export const SyncWaitFor = { + play: async ({ canvasElement, step }) => { + const canvas = within(canvasElement); + await step('Setup', Callback.play); + await waitFor(() => canvas.getByText('Completed!!')); + }, +}; + +export const AsyncWaitFor = { + play: async ({ canvasElement, step }) => { + const canvas = within(canvasElement); + await step('Setup', Callback.play); + await waitFor(async () => canvas.getByText('Completed!!')); + }, +}; + +export const WaitForElementToBeRemoved = { + play: async ({ canvasElement, step }) => { + const canvas = within(canvasElement); + await step('Setup', SyncWaitFor.play); + await waitForElementToBeRemoved(() => canvas.queryByText('Completed!!'), { + timeout: 2000, + }); + }, +}; + +export const WithLoaders = { + loaders: [async () => new Promise((resolve) => setTimeout(resolve, 2000))], + play: async ({ step }) => { + await step('Setup', Callback.play); + }, +}; + +export const Validation = { + play: async (context) => { + const { args, canvasElement, step } = context; + const canvas = within(canvasElement); + + await step('Submit', async () => fireEvent.click(canvas.getByRole('button'))); + + await expect(args.onSuccess).not.toHaveBeenCalled(); + }, +}; diff --git a/code/cypress/integration/navigation.spec.ts b/code/cypress/integration/navigation.spec.ts index cb8e1d13768f..0db350ececee 100644 --- a/code/cypress/integration/navigation.spec.ts +++ b/code/cypress/integration/navigation.spec.ts @@ -25,11 +25,11 @@ describe('Navigation', () => { }); describe('Routing', () => { - it('should navigate to story addons-a11y-basebutton--default', () => { - visit('official-storybook'); + it('should navigate to sibling story sibling', () => { + visit('official-storybook/?path=/story/basics-actionbar--single-item'); - cy.get('#addons-controls--basic').click({ force: true }); - cy.url().should('include', 'path=/story/addons-controls--basic'); + cy.get('#basics-actionbar--many-items').click({ force: true }); + cy.url().should('include', 'path=/story/basics-actionbar--many-items'); }); it('should directly visit a certain story and render correctly', () => { diff --git a/code/examples/cra-ts-essentials/src/stories/testing-react/components/AccountForm.test.tsx b/code/examples/cra-ts-essentials/src/stories/testing-react/components/AccountForm.test.tsx deleted file mode 100644 index 4dd5f7bef315..000000000000 --- a/code/examples/cra-ts-essentials/src/stories/testing-react/components/AccountForm.test.tsx +++ /dev/null @@ -1,23 +0,0 @@ -import React from 'react'; -import { render, screen } from '@testing-library/react'; - -import { composeStories, composeStory } from '@storybook/react'; - -import * as stories from './AccountForm.stories'; - -const { Standard } = composeStories(stories); - -test('renders form', async () => { - await render(); - expect(screen.getByTestId('email')).not.toBe(null); -}); - -test('fills input from play function', async () => { - const StandardEmailFilled = composeStory(stories.StandardEmailFilled, stories.default); - const { container } = await render(); - - await StandardEmailFilled.play({ canvasElement: container }); - - const emailInput = screen.getByTestId('email') as HTMLInputElement; - expect(emailInput.value).toBe('michael@chromatic.com'); -}); diff --git a/code/examples/official-storybook/package.json b/code/examples/official-storybook/package.json index b320d4e0d91a..ad2b13cb5ee0 100644 --- a/code/examples/official-storybook/package.json +++ b/code/examples/official-storybook/package.json @@ -10,6 +10,9 @@ "storybook": "cross-env STORYBOOK_DISPLAY_WARNING=true DISPLAY_WARNING=true storybook dev -p 9011 -c ./ --no-manager-cache", "storyshots-puppeteer": "storybook build && yarn run do-storyshots-puppeteer" }, + "dependencies": { + "formik": "^2.2.9" + }, "devDependencies": { "@emotion/jest": "^11.10.0", "@pmmmwh/react-refresh-webpack-plugin": "^0.5.5", diff --git a/code/examples/cra-ts-essentials/src/stories/testing-react/components/AccountForm.stories.tsx b/code/examples/official-storybook/stories/addon-interactions/AccountForm.stories.tsx similarity index 98% rename from code/examples/cra-ts-essentials/src/stories/testing-react/components/AccountForm.stories.tsx rename to code/examples/official-storybook/stories/addon-interactions/AccountForm.stories.tsx index 7ecfa715fd25..04a715a86206 100644 --- a/code/examples/cra-ts-essentials/src/stories/testing-react/components/AccountForm.stories.tsx +++ b/code/examples/official-storybook/stories/addon-interactions/AccountForm.stories.tsx @@ -6,7 +6,7 @@ import { userEvent, within } from '@storybook/testing-library'; import { AccountForm, AccountFormProps } from './AccountForm'; export default { - title: 'CSF3/AccountForm', + title: 'Addons/Interactions/AccountForm', component: AccountForm, parameters: { layout: 'centered', diff --git a/code/examples/cra-ts-essentials/src/stories/testing-react/components/AccountForm.tsx b/code/examples/official-storybook/stories/addon-interactions/AccountForm.tsx similarity index 100% rename from code/examples/cra-ts-essentials/src/stories/testing-react/components/AccountForm.tsx rename to code/examples/official-storybook/stories/addon-interactions/AccountForm.tsx diff --git a/code/examples/react-ts/src/AccountForm.stories.tsx b/code/examples/react-ts/src/AccountForm.stories.tsx deleted file mode 100644 index 1a4806881f06..000000000000 --- a/code/examples/react-ts/src/AccountForm.stories.tsx +++ /dev/null @@ -1,109 +0,0 @@ -/* eslint-disable @typescript-eslint/no-non-null-assertion */ -/* eslint-disable storybook/await-interactions */ -/* eslint-disable storybook/use-storybook-testing-library */ -// @TODO: use addon-interactions and remove the rule disable above -import React from 'react'; -import { ComponentStoryObj, ComponentMeta } from '@storybook/react'; -import { screen } from '@testing-library/react'; -import userEvent from '@testing-library/user-event'; -import { AccountForm, AccountFormProps } from './AccountForm'; - -export default { - // Title not needed due to CSF3 auto-title - // title: 'Demo/AccountForm', - component: AccountForm, - parameters: { - layout: 'centered', - }, -} as ComponentMeta; - -// export const Standard = (args: any) => ; -// Standard.args = { passwordVerification: false }; -// Standard.play = () => userEvent.type(screen.getByTestId('email'), 'michael@chromatic.com'); - -type Story = ComponentStoryObj; - -export const Standard: Story = { - // render: (args: AccountFormProps) => , - args: { passwordVerification: false }, -}; - -export const StandardEmailFilled: Story = { - ...Standard, - play: () => userEvent.type(screen.getByTestId('email'), 'michael@chromatic.com'), -}; - -export const StandardEmailFailed: Story = { - ...Standard, - play: async () => { - await userEvent.type(screen.getByTestId('email'), 'michael@chromatic.com.com@com'); - await userEvent.type(screen.getByTestId('password1'), 'testpasswordthatwontfail'); - await userEvent.click(screen.getByTestId('submit')); - }, -}; - -export const StandardPasswordFailed: Story = { - ...Standard, - play: async (context) => { - await StandardEmailFilled.play!(context); - await userEvent.type(screen.getByTestId('password1'), 'asdf'); - await userEvent.click(screen.getByTestId('submit')); - }, -}; - -export const StandardFailHover: Story = { - ...StandardPasswordFailed, - play: async (context) => { - await StandardPasswordFailed.play!(context); - await sleep(100); - await userEvent.hover(screen.getByTestId('password-error-info')); - }, -}; - -export const Verification: Story = { - args: { passwordVerification: true }, -}; - -export const VerificationPasssword1: Story = { - ...Verification, - play: async (context) => { - await StandardEmailFilled.play!(context); - await userEvent.type(screen.getByTestId('password1'), 'asdfasdf'); - await userEvent.click(screen.getByTestId('submit')); - }, -}; - -export const VerificationPasswordMismatch: Story = { - ...Verification, - play: async (context) => { - await StandardEmailFilled.play!(context); - await userEvent.type(screen.getByTestId('password1'), 'asdfasdf'); - await userEvent.type(screen.getByTestId('password2'), 'asdf1234'); - await userEvent.click(screen.getByTestId('submit')); - }, -}; - -const sleep = (ms: number) => new Promise((r) => setTimeout(r, ms)); - -export const VerificationSuccess: Story = { - ...Verification, - play: async (context) => { - await StandardEmailFilled.play!(context); - await sleep(1000); - await userEvent.type(screen.getByTestId('password1'), 'asdfasdf', { delay: 50 }); - await sleep(1000); - await userEvent.type(screen.getByTestId('password2'), 'asdfasdf', { delay: 50 }); - await sleep(1000); - await userEvent.click(screen.getByTestId('submit')); - }, -}; - -export const StandardWithRenderFunction: Story = { - ...Standard, - render: (args: AccountFormProps) => ( -
-

This uses a custom render

- -
- ), -}; diff --git a/code/examples/react-ts/src/AccountForm.tsx b/code/examples/react-ts/src/AccountForm.tsx deleted file mode 100644 index 7872ce2e44d6..000000000000 --- a/code/examples/react-ts/src/AccountForm.tsx +++ /dev/null @@ -1,552 +0,0 @@ -import { keyframes, styled } from '@storybook/theming'; -import { - ErrorMessage, - Field as FormikInput, - Form as FormikForm, - Formik, - FormikProps, -} from 'formik'; -import React, { FC, HTMLAttributes, useCallback, useState } from 'react'; -import { Icons, WithTooltip } from '@storybook/components'; - -const errorMap = { - email: { - required: { - normal: 'Please enter your email address', - tooltip: - 'We do require an email address and a password as a minimum in order to be able to create an account for you to log in with', - }, - format: { - normal: 'Please enter a correctly formatted email address', - tooltip: - 'Your email address is formatted incorrectly and is not correct - please double check for misspelling', - }, - }, - password: { - required: { - normal: 'Please enter a password', - tooltip: 'A password is required to create an account', - }, - length: { - normal: 'Please enter a password of minimum 6 characters', - tooltip: - 'For security reasons we enforce a password length of minimum 6 characters - but have no other requirements', - }, - }, - verifiedPassword: { - required: { - normal: 'Please verify your password', - tooltip: - 'Verification of your password is required to ensure no errors in the spelling of the password', - }, - match: { - normal: 'Your passwords do not match', - tooltip: - 'Your verification password has to match your password to make sure you have not misspelled', - }, - }, -}; - -// https://emailregex.com/ -const email99RegExp = new RegExp( - // eslint-disable-next-line no-useless-escape - /^(([^<>()\[\]\\.,;:\s@"]+(\.[^<>()\[\]\\.,;:\s@"]+)*)|(".+"))@((\[[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}])|(([a-zA-Z\-0-9]+\.)+[a-zA-Z]{2,}))$/ -); - -export interface AccountFormResponse { - success: boolean; -} - -export interface AccountFormValues { - email: string; - password: string; -} - -interface FormValues extends AccountFormValues { - verifiedPassword: string; -} - -interface FormErrors { - email?: string; - emailTooltip?: string; - password?: string; - passwordTooltip?: string; - verifiedPassword?: string; - verifiedPasswordTooltip?: string; -} - -export type AccountFormProps = { - passwordVerification?: boolean; - onSubmit?: (values: AccountFormValues) => void; - onTransactionStart?: (values: AccountFormValues) => void; - onTransactionEnd?: (values: AccountFormResponse) => void; -}; - -export const AccountForm: FC = ({ - passwordVerification, - onSubmit, - onTransactionStart, - onTransactionEnd, -}) => { - const [state, setState] = useState({ - transacting: false, - transactionSuccess: false, - transactionFailure: false, - }); - - const handleFormSubmit = useCallback( - async ({ email, password }: FormValues, { setSubmitting, resetForm }) => { - if (onSubmit) { - onSubmit({ email, password }); - } - - if (onTransactionStart) { - onTransactionStart({ email, password }); - } - - setSubmitting(true); - - setState({ - ...state, - transacting: true, - }); - - await new Promise((r) => setTimeout(r, 2100)); - - const success = Math.random() < 1; - - if (onTransactionEnd) { - onTransactionEnd({ success }); - } - - setSubmitting(false); - resetForm({ values: { email: '', password: '', verifiedPassword: '' } }); - - setState({ - ...state, - transacting: false, - transactionSuccess: success === true, - transactionFailure: success === false, - }); - }, - [setState, onTransactionEnd, onTransactionStart] - ); - - return ( - - - - Storybook icon - - - - - - - - <title>Storybook - - - - - - {!state.transactionSuccess && !state.transactionFailure && ( - Create an account to join the Storybook community - )} - - {state.transactionSuccess && !state.transactionFailure && ( - -

- Everything is perfect. Your account is ready and we should probably get you started! -

-

So why don't you get started then?

- { - setState({ - transacting: false, - transactionSuccess: false, - transactionFailure: false, - }); - }} - > - Go back - - - )} - {state.transactionFailure && !state.transactionSuccess && ( - -

What a mess, this API is not working

-

- Someone should probably have a stern talking to about this, but it won't be me - coz - I'm gonna head out into the nice weather -

- { - setState({ - transacting: false, - transactionSuccess: false, - transactionFailure: false, - }); - }} - > - Go back - - - )} - {!state.transactionSuccess && !state.transactionFailure && ( - { - const errors: FormErrors = {}; - - if (!email) { - errors.email = errorMap.email.required.normal; - errors.emailTooltip = errorMap.email.required.tooltip; - } else { - const validEmail = email.match(email99RegExp); - - if (validEmail === null) { - errors.email = errorMap.email.format.normal; - errors.emailTooltip = errorMap.email.format.tooltip; - } - } - - if (!password) { - errors.password = errorMap.password.required.normal; - errors.passwordTooltip = errorMap.password.required.tooltip; - } else if (password.length < 6) { - errors.password = errorMap.password.length.normal; - errors.passwordTooltip = errorMap.password.length.tooltip; - } - - if (passwordVerification && !verifiedPassword) { - errors.verifiedPassword = errorMap.verifiedPassword.required.normal; - errors.verifiedPasswordTooltip = errorMap.verifiedPassword.required.tooltip; - } else if (passwordVerification && password !== verifiedPassword) { - errors.verifiedPassword = errorMap.verifiedPassword.match.normal; - errors.verifiedPasswordTooltip = errorMap.verifiedPassword.match.tooltip; - } - - return errors; - }} - > - {({ errors: _errors, isSubmitting, dirty }: FormikProps) => { - const errors = _errors as FormErrors; - - return ( -
- - - - {({ field }: { field: HTMLAttributes }) => ( - <> - - {errors.email && ( - {errors.emailTooltip}} - > - - - - - - )} - - )} - - - - - - {({ field }: { field: HTMLAttributes }) => ( - - )} - - {errors.password && ( - {errors.passwordTooltip}}> - - - - - - )} - - {passwordVerification && ( - - - - {({ field }: { field: HTMLAttributes }) => ( - - )} - - {errors.verifiedPassword && ( - {errors.verifiedPasswordTooltip}} - > - - - - - - )} - - )} - - - Create Account - - - Reset - - -
- ); - }} - - )} - - - ); -}; - -const Wrapper = styled.section(({ theme }) => ({ - fontFamily: theme.typography.fonts.base, - display: 'flex', - flexDirection: 'column', - alignItems: 'center', - width: 450, - padding: 32, - backgroundColor: theme.background.content, - borderRadius: 7, -})); - -const Brand = styled.div({ - display: 'flex', - alignItems: 'center', - justifyContent: 'center', -}); - -const Title = styled.svg({ - height: 40, - zIndex: 1, - left: -32, - position: 'relative', -}); - -const logoAnimation = keyframes({ - '0': { - transform: 'rotateY(0deg)', - transformOrigin: '50% 5% 0', - }, - '100%': { - transform: 'rotateY(360deg)', - transformOrigin: '50% 5% 0', - }, -}); - -interface LogoProps { - transacting: boolean; -} - -const Logo = styled.svg( - ({ transacting }) => - transacting && { - animation: `${logoAnimation} 1250ms both infinite`, - }, - { height: 40, zIndex: 10, marginLeft: 32 } -); - -const Introduction = styled.p({ - marginTop: 20, - textAlign: 'center', -}); - -const Content = styled.div({ - display: 'flex', - alignItems: 'flex-start', - justifyContent: 'center', - width: 350, - minHeight: 189, - marginTop: 8, -}); - -const Presentation = styled.div({ - textAlign: 'center', -}); - -const Form = styled(FormikForm)({ - width: '100%', - alignSelf: 'flex-start', - '&[aria-disabled="true"]': { - opacity: 0.6, - }, -}); - -const FieldWrapper = styled.div({ - display: 'flex', - flexDirection: 'column', - justifyContent: 'stretch', - marginBottom: 10, -}); - -const Label = styled.label({ - fontSize: 13, - fontWeight: 500, - marginBottom: 6, -}); - -const Input = styled.input(({ theme }) => ({ - fontSize: 14, - color: theme.color.defaultText, - padding: '10px 15px', - borderRadius: 4, - appearance: 'none', - outline: 'none', - border: '0 none', - boxShadow: 'rgb(0 0 0 / 10%) 0px 0px 0px 1px inset', - '&:focus': { - boxShadow: 'rgb(30 167 253) 0px 0px 0px 1px inset', - }, - '&:active': { - boxShadow: 'rgb(30 167 253) 0px 0px 0px 1px inset', - }, - '&[aria-invalid="true"]': { - boxShadow: 'rgb(255 68 0) 0px 0px 0px 1px inset', - }, -})); - -const ErrorWrapper = styled.div({ - display: 'flex', - alignItems: 'flex-start', - fontSize: 11, - marginTop: 6, - cursor: 'help', -}); - -const ErrorIcon = styled(Icons)(({ theme }) => ({ - fill: theme.color.defaultText, - opacity: 0.8, - marginRight: 6, - marginLeft: 2, - marginTop: 1, -})); - -const ErrorTooltip = styled.div(({ theme }) => ({ - fontFamily: theme.typography.fonts.base, - fontSize: 13, - padding: 8, - maxWidth: 350, -})); - -const Actions = styled.div({ - alignSelf: 'stretch', - display: 'flex', - justifyContent: 'space-between', - marginTop: 24, -}); - -const Error = styled(ErrorMessage)({}); - -interface ButtonProps { - dirty?: boolean; -} - -const Button = styled.button({ - backgroundColor: 'transparent', - border: '0 none', - outline: 'none', - appearance: 'none', - fontWeight: 500, - fontSize: 12, - flexBasis: '50%', - cursor: 'pointer', - padding: '11px 16px', - borderRadius: 4, - textTransform: 'uppercase', - '&:focus': { - textDecoration: 'underline', - fontWeight: 700, - }, - '&:active': { - textDecoration: 'underline', - fontWeight: 700, - }, - '&[aria-disabled="true"]': { - cursor: 'default', - }, -}); - -const Submit = styled(Button)(({ theme, dirty }) => ({ - marginRight: 8, - backgroundColor: theme.color.secondary, - color: theme.color.inverseText, - opacity: dirty ? 1 : 0.6, - boxShadow: 'rgb(30 167 253 / 10%) 0 0 0 1px inset', -})); - -const Reset = styled(Button)(({ theme }) => ({ - marginLeft: 8, - boxShadow: 'rgb(30 167 253) 0 0 0 1px inset', - color: theme.color.secondary, -})); diff --git a/code/examples/react-ts/src/__snapshots__/storyshots.test.ts.snap b/code/examples/react-ts/src/__snapshots__/storyshots.test.ts.snap index fbd5d981a4b7..59c6462ebae9 100644 --- a/code/examples/react-ts/src/__snapshots__/storyshots.test.ts.snap +++ b/code/examples/react-ts/src/__snapshots__/storyshots.test.ts.snap @@ -172,3803 +172,6 @@ exports[`Storyshots Custom Prefix/CustomTitle Basic 1`] = ` `; -exports[`Storyshots Demo/AccountForm Standard 1`] = ` -.emotion-0 { - font-family: "Nunito Sans",-apple-system,".SFNSText-Regular","San Francisco",BlinkMacSystemFont,"Segoe UI","Helvetica Neue",Helvetica,Arial,sans-serif; - display: -webkit-box; - display: -webkit-flex; - display: -ms-flexbox; - display: flex; - -webkit-flex-direction: column; - -ms-flex-direction: column; - flex-direction: column; - -webkit-align-items: center; - -webkit-box-align: center; - -ms-flex-align: center; - align-items: center; - width: 450px; - padding: 32px; - background-color: #FFFFFF; - border-radius: 7px; -} - -.emotion-1 { - display: -webkit-box; - display: -webkit-flex; - display: -ms-flexbox; - display: flex; - -webkit-align-items: center; - -webkit-box-align: center; - -ms-flex-align: center; - align-items: center; - -webkit-box-pack: center; - -ms-flex-pack: center; - -webkit-justify-content: center; - justify-content: center; -} - -.emotion-2 { - height: 40px; - z-index: 10; - margin-left: 32px; -} - -.emotion-3 { - height: 40px; - z-index: 1; - left: -32px; - position: relative; -} - -.emotion-4 { - margin-top: 20px; - text-align: center; -} - -.emotion-5 { - display: -webkit-box; - display: -webkit-flex; - display: -ms-flexbox; - display: flex; - -webkit-align-items: flex-start; - -webkit-box-align: flex-start; - -ms-flex-align: flex-start; - align-items: flex-start; - -webkit-box-pack: center; - -ms-flex-pack: center; - -webkit-justify-content: center; - justify-content: center; - width: 350px; - min-height: 189px; - margin-top: 8px; -} - -.emotion-6 { - width: 100%; - -webkit-align-self: flex-start; - -ms-flex-item-align: flex-start; - align-self: flex-start; -} - -.emotion-6[aria-disabled="true"] { - opacity: 0.6; -} - -.emotion-7 { - display: -webkit-box; - display: -webkit-flex; - display: -ms-flexbox; - display: flex; - -webkit-flex-direction: column; - -ms-flex-direction: column; - flex-direction: column; - -webkit-box-pack: stretch; - -ms-flex-pack: stretch; - -webkit-justify-content: stretch; - justify-content: stretch; - margin-bottom: 10px; -} - -.emotion-8 { - font-size: 13px; - font-weight: 500; - margin-bottom: 6px; -} - -.emotion-9 { - font-size: 14px; - color: #333333; - padding: 10px 15px; - border-radius: 4px; - -webkit-appearance: none; - -moz-appearance: none; - -ms-appearance: none; - appearance: none; - outline: none; - border: 0 none; - box-shadow: rgb(0 0 0 / 10%) 0px 0px 0px 1px inset; -} - -.emotion-9:focus { - box-shadow: rgb(30 167 253) 0px 0px 0px 1px inset; -} - -.emotion-9:active { - box-shadow: rgb(30 167 253) 0px 0px 0px 1px inset; -} - -.emotion-9[aria-invalid="true"] { - box-shadow: rgb(255 68 0) 0px 0px 0px 1px inset; -} - -.emotion-13 { - -webkit-align-self: stretch; - -ms-flex-item-align: stretch; - align-self: stretch; - display: -webkit-box; - display: -webkit-flex; - display: -ms-flexbox; - display: flex; - -webkit-box-pack: justify; - -webkit-justify-content: space-between; - justify-content: space-between; - margin-top: 24px; -} - -.emotion-14 { - background-color: transparent; - border: 0 none; - outline: none; - -webkit-appearance: none; - -moz-appearance: none; - -ms-appearance: none; - appearance: none; - font-weight: 500; - font-size: 12px; - -webkit-flex-basis: 50%; - -ms-flex-preferred-size: 50%; - flex-basis: 50%; - cursor: pointer; - padding: 11px 16px; - border-radius: 4px; - text-transform: uppercase; - margin-right: 8px; - background-color: #1EA7FD; - color: #FFFFFF; - opacity: 0.6; - box-shadow: rgb(30 167 253 / 10%) 0 0 0 1px inset; -} - -.emotion-14:focus { - -webkit-text-decoration: underline; - text-decoration: underline; - font-weight: 700; -} - -.emotion-14:active { - -webkit-text-decoration: underline; - text-decoration: underline; - font-weight: 700; -} - -.emotion-14[aria-disabled="true"] { - cursor: default; -} - -.emotion-15 { - background-color: transparent; - border: 0 none; - outline: none; - -webkit-appearance: none; - -moz-appearance: none; - -ms-appearance: none; - appearance: none; - font-weight: 500; - font-size: 12px; - -webkit-flex-basis: 50%; - -ms-flex-preferred-size: 50%; - flex-basis: 50%; - cursor: pointer; - padding: 11px 16px; - border-radius: 4px; - text-transform: uppercase; - margin-left: 8px; - box-shadow: rgb(30 167 253) 0 0 0 1px inset; - color: #1EA7FD; -} - -.emotion-15:focus { - -webkit-text-decoration: underline; - text-decoration: underline; - font-weight: 700; -} - -.emotion-15:active { - -webkit-text-decoration: underline; - text-decoration: underline; - font-weight: 700; -} - -.emotion-15[aria-disabled="true"] { - cursor: default; -} - -
-
- - - Storybook icon - - - - - - - - - - Storybook - - - - - -
-

- Create an account to join the Storybook community -

-
-
-
- - -
-
- - -
-
- - -
-
-
-
-`; - -exports[`Storyshots Demo/AccountForm Standard Email Failed 1`] = ` -.emotion-0 { - font-family: "Nunito Sans",-apple-system,".SFNSText-Regular","San Francisco",BlinkMacSystemFont,"Segoe UI","Helvetica Neue",Helvetica,Arial,sans-serif; - display: -webkit-box; - display: -webkit-flex; - display: -ms-flexbox; - display: flex; - -webkit-flex-direction: column; - -ms-flex-direction: column; - flex-direction: column; - -webkit-align-items: center; - -webkit-box-align: center; - -ms-flex-align: center; - align-items: center; - width: 450px; - padding: 32px; - background-color: #FFFFFF; - border-radius: 7px; -} - -.emotion-1 { - display: -webkit-box; - display: -webkit-flex; - display: -ms-flexbox; - display: flex; - -webkit-align-items: center; - -webkit-box-align: center; - -ms-flex-align: center; - align-items: center; - -webkit-box-pack: center; - -ms-flex-pack: center; - -webkit-justify-content: center; - justify-content: center; -} - -.emotion-2 { - height: 40px; - z-index: 10; - margin-left: 32px; -} - -.emotion-3 { - height: 40px; - z-index: 1; - left: -32px; - position: relative; -} - -.emotion-4 { - margin-top: 20px; - text-align: center; -} - -.emotion-5 { - display: -webkit-box; - display: -webkit-flex; - display: -ms-flexbox; - display: flex; - -webkit-align-items: flex-start; - -webkit-box-align: flex-start; - -ms-flex-align: flex-start; - align-items: flex-start; - -webkit-box-pack: center; - -ms-flex-pack: center; - -webkit-justify-content: center; - justify-content: center; - width: 350px; - min-height: 189px; - margin-top: 8px; -} - -.emotion-6 { - width: 100%; - -webkit-align-self: flex-start; - -ms-flex-item-align: flex-start; - align-self: flex-start; -} - -.emotion-6[aria-disabled="true"] { - opacity: 0.6; -} - -.emotion-7 { - display: -webkit-box; - display: -webkit-flex; - display: -ms-flexbox; - display: flex; - -webkit-flex-direction: column; - -ms-flex-direction: column; - flex-direction: column; - -webkit-box-pack: stretch; - -ms-flex-pack: stretch; - -webkit-justify-content: stretch; - justify-content: stretch; - margin-bottom: 10px; -} - -.emotion-8 { - font-size: 13px; - font-weight: 500; - margin-bottom: 6px; -} - -.emotion-9 { - font-size: 14px; - color: #333333; - padding: 10px 15px; - border-radius: 4px; - -webkit-appearance: none; - -moz-appearance: none; - -ms-appearance: none; - appearance: none; - outline: none; - border: 0 none; - box-shadow: rgb(0 0 0 / 10%) 0px 0px 0px 1px inset; -} - -.emotion-9:focus { - box-shadow: rgb(30 167 253) 0px 0px 0px 1px inset; -} - -.emotion-9:active { - box-shadow: rgb(30 167 253) 0px 0px 0px 1px inset; -} - -.emotion-9[aria-invalid="true"] { - box-shadow: rgb(255 68 0) 0px 0px 0px 1px inset; -} - -.emotion-13 { - -webkit-align-self: stretch; - -ms-flex-item-align: stretch; - align-self: stretch; - display: -webkit-box; - display: -webkit-flex; - display: -ms-flexbox; - display: flex; - -webkit-box-pack: justify; - -webkit-justify-content: space-between; - justify-content: space-between; - margin-top: 24px; -} - -.emotion-14 { - background-color: transparent; - border: 0 none; - outline: none; - -webkit-appearance: none; - -moz-appearance: none; - -ms-appearance: none; - appearance: none; - font-weight: 500; - font-size: 12px; - -webkit-flex-basis: 50%; - -ms-flex-preferred-size: 50%; - flex-basis: 50%; - cursor: pointer; - padding: 11px 16px; - border-radius: 4px; - text-transform: uppercase; - margin-right: 8px; - background-color: #1EA7FD; - color: #FFFFFF; - opacity: 0.6; - box-shadow: rgb(30 167 253 / 10%) 0 0 0 1px inset; -} - -.emotion-14:focus { - -webkit-text-decoration: underline; - text-decoration: underline; - font-weight: 700; -} - -.emotion-14:active { - -webkit-text-decoration: underline; - text-decoration: underline; - font-weight: 700; -} - -.emotion-14[aria-disabled="true"] { - cursor: default; -} - -.emotion-15 { - background-color: transparent; - border: 0 none; - outline: none; - -webkit-appearance: none; - -moz-appearance: none; - -ms-appearance: none; - appearance: none; - font-weight: 500; - font-size: 12px; - -webkit-flex-basis: 50%; - -ms-flex-preferred-size: 50%; - flex-basis: 50%; - cursor: pointer; - padding: 11px 16px; - border-radius: 4px; - text-transform: uppercase; - margin-left: 8px; - box-shadow: rgb(30 167 253) 0 0 0 1px inset; - color: #1EA7FD; -} - -.emotion-15:focus { - -webkit-text-decoration: underline; - text-decoration: underline; - font-weight: 700; -} - -.emotion-15:active { - -webkit-text-decoration: underline; - text-decoration: underline; - font-weight: 700; -} - -.emotion-15[aria-disabled="true"] { - cursor: default; -} - -
-
- - - Storybook icon - - - - - - - - - - Storybook - - - - - -
-

- Create an account to join the Storybook community -

-
-
-
- - -
-
- - -
-
- - -
-
-
-
-`; - -exports[`Storyshots Demo/AccountForm Standard Email Filled 1`] = ` -.emotion-0 { - font-family: "Nunito Sans",-apple-system,".SFNSText-Regular","San Francisco",BlinkMacSystemFont,"Segoe UI","Helvetica Neue",Helvetica,Arial,sans-serif; - display: -webkit-box; - display: -webkit-flex; - display: -ms-flexbox; - display: flex; - -webkit-flex-direction: column; - -ms-flex-direction: column; - flex-direction: column; - -webkit-align-items: center; - -webkit-box-align: center; - -ms-flex-align: center; - align-items: center; - width: 450px; - padding: 32px; - background-color: #FFFFFF; - border-radius: 7px; -} - -.emotion-1 { - display: -webkit-box; - display: -webkit-flex; - display: -ms-flexbox; - display: flex; - -webkit-align-items: center; - -webkit-box-align: center; - -ms-flex-align: center; - align-items: center; - -webkit-box-pack: center; - -ms-flex-pack: center; - -webkit-justify-content: center; - justify-content: center; -} - -.emotion-2 { - height: 40px; - z-index: 10; - margin-left: 32px; -} - -.emotion-3 { - height: 40px; - z-index: 1; - left: -32px; - position: relative; -} - -.emotion-4 { - margin-top: 20px; - text-align: center; -} - -.emotion-5 { - display: -webkit-box; - display: -webkit-flex; - display: -ms-flexbox; - display: flex; - -webkit-align-items: flex-start; - -webkit-box-align: flex-start; - -ms-flex-align: flex-start; - align-items: flex-start; - -webkit-box-pack: center; - -ms-flex-pack: center; - -webkit-justify-content: center; - justify-content: center; - width: 350px; - min-height: 189px; - margin-top: 8px; -} - -.emotion-6 { - width: 100%; - -webkit-align-self: flex-start; - -ms-flex-item-align: flex-start; - align-self: flex-start; -} - -.emotion-6[aria-disabled="true"] { - opacity: 0.6; -} - -.emotion-7 { - display: -webkit-box; - display: -webkit-flex; - display: -ms-flexbox; - display: flex; - -webkit-flex-direction: column; - -ms-flex-direction: column; - flex-direction: column; - -webkit-box-pack: stretch; - -ms-flex-pack: stretch; - -webkit-justify-content: stretch; - justify-content: stretch; - margin-bottom: 10px; -} - -.emotion-8 { - font-size: 13px; - font-weight: 500; - margin-bottom: 6px; -} - -.emotion-9 { - font-size: 14px; - color: #333333; - padding: 10px 15px; - border-radius: 4px; - -webkit-appearance: none; - -moz-appearance: none; - -ms-appearance: none; - appearance: none; - outline: none; - border: 0 none; - box-shadow: rgb(0 0 0 / 10%) 0px 0px 0px 1px inset; -} - -.emotion-9:focus { - box-shadow: rgb(30 167 253) 0px 0px 0px 1px inset; -} - -.emotion-9:active { - box-shadow: rgb(30 167 253) 0px 0px 0px 1px inset; -} - -.emotion-9[aria-invalid="true"] { - box-shadow: rgb(255 68 0) 0px 0px 0px 1px inset; -} - -.emotion-13 { - -webkit-align-self: stretch; - -ms-flex-item-align: stretch; - align-self: stretch; - display: -webkit-box; - display: -webkit-flex; - display: -ms-flexbox; - display: flex; - -webkit-box-pack: justify; - -webkit-justify-content: space-between; - justify-content: space-between; - margin-top: 24px; -} - -.emotion-14 { - background-color: transparent; - border: 0 none; - outline: none; - -webkit-appearance: none; - -moz-appearance: none; - -ms-appearance: none; - appearance: none; - font-weight: 500; - font-size: 12px; - -webkit-flex-basis: 50%; - -ms-flex-preferred-size: 50%; - flex-basis: 50%; - cursor: pointer; - padding: 11px 16px; - border-radius: 4px; - text-transform: uppercase; - margin-right: 8px; - background-color: #1EA7FD; - color: #FFFFFF; - opacity: 0.6; - box-shadow: rgb(30 167 253 / 10%) 0 0 0 1px inset; -} - -.emotion-14:focus { - -webkit-text-decoration: underline; - text-decoration: underline; - font-weight: 700; -} - -.emotion-14:active { - -webkit-text-decoration: underline; - text-decoration: underline; - font-weight: 700; -} - -.emotion-14[aria-disabled="true"] { - cursor: default; -} - -.emotion-15 { - background-color: transparent; - border: 0 none; - outline: none; - -webkit-appearance: none; - -moz-appearance: none; - -ms-appearance: none; - appearance: none; - font-weight: 500; - font-size: 12px; - -webkit-flex-basis: 50%; - -ms-flex-preferred-size: 50%; - flex-basis: 50%; - cursor: pointer; - padding: 11px 16px; - border-radius: 4px; - text-transform: uppercase; - margin-left: 8px; - box-shadow: rgb(30 167 253) 0 0 0 1px inset; - color: #1EA7FD; -} - -.emotion-15:focus { - -webkit-text-decoration: underline; - text-decoration: underline; - font-weight: 700; -} - -.emotion-15:active { - -webkit-text-decoration: underline; - text-decoration: underline; - font-weight: 700; -} - -.emotion-15[aria-disabled="true"] { - cursor: default; -} - -
-
- - - Storybook icon - - - - - - - - - - Storybook - - - - - -
-

- Create an account to join the Storybook community -

-
-
-
- - -
-
- - -
-
- - -
-
-
-
-`; - -exports[`Storyshots Demo/AccountForm Standard Fail Hover 1`] = ` -.emotion-0 { - font-family: "Nunito Sans",-apple-system,".SFNSText-Regular","San Francisco",BlinkMacSystemFont,"Segoe UI","Helvetica Neue",Helvetica,Arial,sans-serif; - display: -webkit-box; - display: -webkit-flex; - display: -ms-flexbox; - display: flex; - -webkit-flex-direction: column; - -ms-flex-direction: column; - flex-direction: column; - -webkit-align-items: center; - -webkit-box-align: center; - -ms-flex-align: center; - align-items: center; - width: 450px; - padding: 32px; - background-color: #FFFFFF; - border-radius: 7px; -} - -.emotion-1 { - display: -webkit-box; - display: -webkit-flex; - display: -ms-flexbox; - display: flex; - -webkit-align-items: center; - -webkit-box-align: center; - -ms-flex-align: center; - align-items: center; - -webkit-box-pack: center; - -ms-flex-pack: center; - -webkit-justify-content: center; - justify-content: center; -} - -.emotion-2 { - height: 40px; - z-index: 10; - margin-left: 32px; -} - -.emotion-3 { - height: 40px; - z-index: 1; - left: -32px; - position: relative; -} - -.emotion-4 { - margin-top: 20px; - text-align: center; -} - -.emotion-5 { - display: -webkit-box; - display: -webkit-flex; - display: -ms-flexbox; - display: flex; - -webkit-align-items: flex-start; - -webkit-box-align: flex-start; - -ms-flex-align: flex-start; - align-items: flex-start; - -webkit-box-pack: center; - -ms-flex-pack: center; - -webkit-justify-content: center; - justify-content: center; - width: 350px; - min-height: 189px; - margin-top: 8px; -} - -.emotion-6 { - width: 100%; - -webkit-align-self: flex-start; - -ms-flex-item-align: flex-start; - align-self: flex-start; -} - -.emotion-6[aria-disabled="true"] { - opacity: 0.6; -} - -.emotion-7 { - display: -webkit-box; - display: -webkit-flex; - display: -ms-flexbox; - display: flex; - -webkit-flex-direction: column; - -ms-flex-direction: column; - flex-direction: column; - -webkit-box-pack: stretch; - -ms-flex-pack: stretch; - -webkit-justify-content: stretch; - justify-content: stretch; - margin-bottom: 10px; -} - -.emotion-8 { - font-size: 13px; - font-weight: 500; - margin-bottom: 6px; -} - -.emotion-9 { - font-size: 14px; - color: #333333; - padding: 10px 15px; - border-radius: 4px; - -webkit-appearance: none; - -moz-appearance: none; - -ms-appearance: none; - appearance: none; - outline: none; - border: 0 none; - box-shadow: rgb(0 0 0 / 10%) 0px 0px 0px 1px inset; -} - -.emotion-9:focus { - box-shadow: rgb(30 167 253) 0px 0px 0px 1px inset; -} - -.emotion-9:active { - box-shadow: rgb(30 167 253) 0px 0px 0px 1px inset; -} - -.emotion-9[aria-invalid="true"] { - box-shadow: rgb(255 68 0) 0px 0px 0px 1px inset; -} - -.emotion-13 { - -webkit-align-self: stretch; - -ms-flex-item-align: stretch; - align-self: stretch; - display: -webkit-box; - display: -webkit-flex; - display: -ms-flexbox; - display: flex; - -webkit-box-pack: justify; - -webkit-justify-content: space-between; - justify-content: space-between; - margin-top: 24px; -} - -.emotion-14 { - background-color: transparent; - border: 0 none; - outline: none; - -webkit-appearance: none; - -moz-appearance: none; - -ms-appearance: none; - appearance: none; - font-weight: 500; - font-size: 12px; - -webkit-flex-basis: 50%; - -ms-flex-preferred-size: 50%; - flex-basis: 50%; - cursor: pointer; - padding: 11px 16px; - border-radius: 4px; - text-transform: uppercase; - margin-right: 8px; - background-color: #1EA7FD; - color: #FFFFFF; - opacity: 0.6; - box-shadow: rgb(30 167 253 / 10%) 0 0 0 1px inset; -} - -.emotion-14:focus { - -webkit-text-decoration: underline; - text-decoration: underline; - font-weight: 700; -} - -.emotion-14:active { - -webkit-text-decoration: underline; - text-decoration: underline; - font-weight: 700; -} - -.emotion-14[aria-disabled="true"] { - cursor: default; -} - -.emotion-15 { - background-color: transparent; - border: 0 none; - outline: none; - -webkit-appearance: none; - -moz-appearance: none; - -ms-appearance: none; - appearance: none; - font-weight: 500; - font-size: 12px; - -webkit-flex-basis: 50%; - -ms-flex-preferred-size: 50%; - flex-basis: 50%; - cursor: pointer; - padding: 11px 16px; - border-radius: 4px; - text-transform: uppercase; - margin-left: 8px; - box-shadow: rgb(30 167 253) 0 0 0 1px inset; - color: #1EA7FD; -} - -.emotion-15:focus { - -webkit-text-decoration: underline; - text-decoration: underline; - font-weight: 700; -} - -.emotion-15:active { - -webkit-text-decoration: underline; - text-decoration: underline; - font-weight: 700; -} - -.emotion-15[aria-disabled="true"] { - cursor: default; -} - -
-
- - - Storybook icon - - - - - - - - - - Storybook - - - - - -
-

- Create an account to join the Storybook community -

-
-
-
- - -
-
- - -
-
- - -
-
-
-
-`; - -exports[`Storyshots Demo/AccountForm Standard Password Failed 1`] = ` -.emotion-0 { - font-family: "Nunito Sans",-apple-system,".SFNSText-Regular","San Francisco",BlinkMacSystemFont,"Segoe UI","Helvetica Neue",Helvetica,Arial,sans-serif; - display: -webkit-box; - display: -webkit-flex; - display: -ms-flexbox; - display: flex; - -webkit-flex-direction: column; - -ms-flex-direction: column; - flex-direction: column; - -webkit-align-items: center; - -webkit-box-align: center; - -ms-flex-align: center; - align-items: center; - width: 450px; - padding: 32px; - background-color: #FFFFFF; - border-radius: 7px; -} - -.emotion-1 { - display: -webkit-box; - display: -webkit-flex; - display: -ms-flexbox; - display: flex; - -webkit-align-items: center; - -webkit-box-align: center; - -ms-flex-align: center; - align-items: center; - -webkit-box-pack: center; - -ms-flex-pack: center; - -webkit-justify-content: center; - justify-content: center; -} - -.emotion-2 { - height: 40px; - z-index: 10; - margin-left: 32px; -} - -.emotion-3 { - height: 40px; - z-index: 1; - left: -32px; - position: relative; -} - -.emotion-4 { - margin-top: 20px; - text-align: center; -} - -.emotion-5 { - display: -webkit-box; - display: -webkit-flex; - display: -ms-flexbox; - display: flex; - -webkit-align-items: flex-start; - -webkit-box-align: flex-start; - -ms-flex-align: flex-start; - align-items: flex-start; - -webkit-box-pack: center; - -ms-flex-pack: center; - -webkit-justify-content: center; - justify-content: center; - width: 350px; - min-height: 189px; - margin-top: 8px; -} - -.emotion-6 { - width: 100%; - -webkit-align-self: flex-start; - -ms-flex-item-align: flex-start; - align-self: flex-start; -} - -.emotion-6[aria-disabled="true"] { - opacity: 0.6; -} - -.emotion-7 { - display: -webkit-box; - display: -webkit-flex; - display: -ms-flexbox; - display: flex; - -webkit-flex-direction: column; - -ms-flex-direction: column; - flex-direction: column; - -webkit-box-pack: stretch; - -ms-flex-pack: stretch; - -webkit-justify-content: stretch; - justify-content: stretch; - margin-bottom: 10px; -} - -.emotion-8 { - font-size: 13px; - font-weight: 500; - margin-bottom: 6px; -} - -.emotion-9 { - font-size: 14px; - color: #333333; - padding: 10px 15px; - border-radius: 4px; - -webkit-appearance: none; - -moz-appearance: none; - -ms-appearance: none; - appearance: none; - outline: none; - border: 0 none; - box-shadow: rgb(0 0 0 / 10%) 0px 0px 0px 1px inset; -} - -.emotion-9:focus { - box-shadow: rgb(30 167 253) 0px 0px 0px 1px inset; -} - -.emotion-9:active { - box-shadow: rgb(30 167 253) 0px 0px 0px 1px inset; -} - -.emotion-9[aria-invalid="true"] { - box-shadow: rgb(255 68 0) 0px 0px 0px 1px inset; -} - -.emotion-13 { - -webkit-align-self: stretch; - -ms-flex-item-align: stretch; - align-self: stretch; - display: -webkit-box; - display: -webkit-flex; - display: -ms-flexbox; - display: flex; - -webkit-box-pack: justify; - -webkit-justify-content: space-between; - justify-content: space-between; - margin-top: 24px; -} - -.emotion-14 { - background-color: transparent; - border: 0 none; - outline: none; - -webkit-appearance: none; - -moz-appearance: none; - -ms-appearance: none; - appearance: none; - font-weight: 500; - font-size: 12px; - -webkit-flex-basis: 50%; - -ms-flex-preferred-size: 50%; - flex-basis: 50%; - cursor: pointer; - padding: 11px 16px; - border-radius: 4px; - text-transform: uppercase; - margin-right: 8px; - background-color: #1EA7FD; - color: #FFFFFF; - opacity: 0.6; - box-shadow: rgb(30 167 253 / 10%) 0 0 0 1px inset; -} - -.emotion-14:focus { - -webkit-text-decoration: underline; - text-decoration: underline; - font-weight: 700; -} - -.emotion-14:active { - -webkit-text-decoration: underline; - text-decoration: underline; - font-weight: 700; -} - -.emotion-14[aria-disabled="true"] { - cursor: default; -} - -.emotion-15 { - background-color: transparent; - border: 0 none; - outline: none; - -webkit-appearance: none; - -moz-appearance: none; - -ms-appearance: none; - appearance: none; - font-weight: 500; - font-size: 12px; - -webkit-flex-basis: 50%; - -ms-flex-preferred-size: 50%; - flex-basis: 50%; - cursor: pointer; - padding: 11px 16px; - border-radius: 4px; - text-transform: uppercase; - margin-left: 8px; - box-shadow: rgb(30 167 253) 0 0 0 1px inset; - color: #1EA7FD; -} - -.emotion-15:focus { - -webkit-text-decoration: underline; - text-decoration: underline; - font-weight: 700; -} - -.emotion-15:active { - -webkit-text-decoration: underline; - text-decoration: underline; - font-weight: 700; -} - -.emotion-15[aria-disabled="true"] { - cursor: default; -} - -
-
- - - Storybook icon - - - - - - - - - - Storybook - - - - - -
-

- Create an account to join the Storybook community -

-
-
-
- - -
-
- - -
-
- - -
-
-
-
-`; - -exports[`Storyshots Demo/AccountForm Standard With Render Function 1`] = ` -.emotion-0 { - font-family: "Nunito Sans",-apple-system,".SFNSText-Regular","San Francisco",BlinkMacSystemFont,"Segoe UI","Helvetica Neue",Helvetica,Arial,sans-serif; - display: -webkit-box; - display: -webkit-flex; - display: -ms-flexbox; - display: flex; - -webkit-flex-direction: column; - -ms-flex-direction: column; - flex-direction: column; - -webkit-align-items: center; - -webkit-box-align: center; - -ms-flex-align: center; - align-items: center; - width: 450px; - padding: 32px; - background-color: #FFFFFF; - border-radius: 7px; -} - -.emotion-1 { - display: -webkit-box; - display: -webkit-flex; - display: -ms-flexbox; - display: flex; - -webkit-align-items: center; - -webkit-box-align: center; - -ms-flex-align: center; - align-items: center; - -webkit-box-pack: center; - -ms-flex-pack: center; - -webkit-justify-content: center; - justify-content: center; -} - -.emotion-2 { - height: 40px; - z-index: 10; - margin-left: 32px; -} - -.emotion-3 { - height: 40px; - z-index: 1; - left: -32px; - position: relative; -} - -.emotion-4 { - margin-top: 20px; - text-align: center; -} - -.emotion-5 { - display: -webkit-box; - display: -webkit-flex; - display: -ms-flexbox; - display: flex; - -webkit-align-items: flex-start; - -webkit-box-align: flex-start; - -ms-flex-align: flex-start; - align-items: flex-start; - -webkit-box-pack: center; - -ms-flex-pack: center; - -webkit-justify-content: center; - justify-content: center; - width: 350px; - min-height: 189px; - margin-top: 8px; -} - -.emotion-6 { - width: 100%; - -webkit-align-self: flex-start; - -ms-flex-item-align: flex-start; - align-self: flex-start; -} - -.emotion-6[aria-disabled="true"] { - opacity: 0.6; -} - -.emotion-7 { - display: -webkit-box; - display: -webkit-flex; - display: -ms-flexbox; - display: flex; - -webkit-flex-direction: column; - -ms-flex-direction: column; - flex-direction: column; - -webkit-box-pack: stretch; - -ms-flex-pack: stretch; - -webkit-justify-content: stretch; - justify-content: stretch; - margin-bottom: 10px; -} - -.emotion-8 { - font-size: 13px; - font-weight: 500; - margin-bottom: 6px; -} - -.emotion-9 { - font-size: 14px; - color: #333333; - padding: 10px 15px; - border-radius: 4px; - -webkit-appearance: none; - -moz-appearance: none; - -ms-appearance: none; - appearance: none; - outline: none; - border: 0 none; - box-shadow: rgb(0 0 0 / 10%) 0px 0px 0px 1px inset; -} - -.emotion-9:focus { - box-shadow: rgb(30 167 253) 0px 0px 0px 1px inset; -} - -.emotion-9:active { - box-shadow: rgb(30 167 253) 0px 0px 0px 1px inset; -} - -.emotion-9[aria-invalid="true"] { - box-shadow: rgb(255 68 0) 0px 0px 0px 1px inset; -} - -.emotion-13 { - -webkit-align-self: stretch; - -ms-flex-item-align: stretch; - align-self: stretch; - display: -webkit-box; - display: -webkit-flex; - display: -ms-flexbox; - display: flex; - -webkit-box-pack: justify; - -webkit-justify-content: space-between; - justify-content: space-between; - margin-top: 24px; -} - -.emotion-14 { - background-color: transparent; - border: 0 none; - outline: none; - -webkit-appearance: none; - -moz-appearance: none; - -ms-appearance: none; - appearance: none; - font-weight: 500; - font-size: 12px; - -webkit-flex-basis: 50%; - -ms-flex-preferred-size: 50%; - flex-basis: 50%; - cursor: pointer; - padding: 11px 16px; - border-radius: 4px; - text-transform: uppercase; - margin-right: 8px; - background-color: #1EA7FD; - color: #FFFFFF; - opacity: 0.6; - box-shadow: rgb(30 167 253 / 10%) 0 0 0 1px inset; -} - -.emotion-14:focus { - -webkit-text-decoration: underline; - text-decoration: underline; - font-weight: 700; -} - -.emotion-14:active { - -webkit-text-decoration: underline; - text-decoration: underline; - font-weight: 700; -} - -.emotion-14[aria-disabled="true"] { - cursor: default; -} - -.emotion-15 { - background-color: transparent; - border: 0 none; - outline: none; - -webkit-appearance: none; - -moz-appearance: none; - -ms-appearance: none; - appearance: none; - font-weight: 500; - font-size: 12px; - -webkit-flex-basis: 50%; - -ms-flex-preferred-size: 50%; - flex-basis: 50%; - cursor: pointer; - padding: 11px 16px; - border-radius: 4px; - text-transform: uppercase; - margin-left: 8px; - box-shadow: rgb(30 167 253) 0 0 0 1px inset; - color: #1EA7FD; -} - -.emotion-15:focus { - -webkit-text-decoration: underline; - text-decoration: underline; - font-weight: 700; -} - -.emotion-15:active { - -webkit-text-decoration: underline; - text-decoration: underline; - font-weight: 700; -} - -.emotion-15[aria-disabled="true"] { - cursor: default; -} - -
-

- This uses a custom render -

-
-
- - - Storybook icon - - - - - - - - - - Storybook - - - - - -
-

- Create an account to join the Storybook community -

-
-
-
- - -
-
- - -
-
- - -
-
-
-
-
-`; - -exports[`Storyshots Demo/AccountForm Verification 1`] = ` -.emotion-0 { - font-family: "Nunito Sans",-apple-system,".SFNSText-Regular","San Francisco",BlinkMacSystemFont,"Segoe UI","Helvetica Neue",Helvetica,Arial,sans-serif; - display: -webkit-box; - display: -webkit-flex; - display: -ms-flexbox; - display: flex; - -webkit-flex-direction: column; - -ms-flex-direction: column; - flex-direction: column; - -webkit-align-items: center; - -webkit-box-align: center; - -ms-flex-align: center; - align-items: center; - width: 450px; - padding: 32px; - background-color: #FFFFFF; - border-radius: 7px; -} - -.emotion-1 { - display: -webkit-box; - display: -webkit-flex; - display: -ms-flexbox; - display: flex; - -webkit-align-items: center; - -webkit-box-align: center; - -ms-flex-align: center; - align-items: center; - -webkit-box-pack: center; - -ms-flex-pack: center; - -webkit-justify-content: center; - justify-content: center; -} - -.emotion-2 { - height: 40px; - z-index: 10; - margin-left: 32px; -} - -.emotion-3 { - height: 40px; - z-index: 1; - left: -32px; - position: relative; -} - -.emotion-4 { - margin-top: 20px; - text-align: center; -} - -.emotion-5 { - display: -webkit-box; - display: -webkit-flex; - display: -ms-flexbox; - display: flex; - -webkit-align-items: flex-start; - -webkit-box-align: flex-start; - -ms-flex-align: flex-start; - align-items: flex-start; - -webkit-box-pack: center; - -ms-flex-pack: center; - -webkit-justify-content: center; - justify-content: center; - width: 350px; - min-height: 189px; - margin-top: 8px; -} - -.emotion-6 { - width: 100%; - -webkit-align-self: flex-start; - -ms-flex-item-align: flex-start; - align-self: flex-start; -} - -.emotion-6[aria-disabled="true"] { - opacity: 0.6; -} - -.emotion-7 { - display: -webkit-box; - display: -webkit-flex; - display: -ms-flexbox; - display: flex; - -webkit-flex-direction: column; - -ms-flex-direction: column; - flex-direction: column; - -webkit-box-pack: stretch; - -ms-flex-pack: stretch; - -webkit-justify-content: stretch; - justify-content: stretch; - margin-bottom: 10px; -} - -.emotion-8 { - font-size: 13px; - font-weight: 500; - margin-bottom: 6px; -} - -.emotion-9 { - font-size: 14px; - color: #333333; - padding: 10px 15px; - border-radius: 4px; - -webkit-appearance: none; - -moz-appearance: none; - -ms-appearance: none; - appearance: none; - outline: none; - border: 0 none; - box-shadow: rgb(0 0 0 / 10%) 0px 0px 0px 1px inset; -} - -.emotion-9:focus { - box-shadow: rgb(30 167 253) 0px 0px 0px 1px inset; -} - -.emotion-9:active { - box-shadow: rgb(30 167 253) 0px 0px 0px 1px inset; -} - -.emotion-9[aria-invalid="true"] { - box-shadow: rgb(255 68 0) 0px 0px 0px 1px inset; -} - -.emotion-16 { - -webkit-align-self: stretch; - -ms-flex-item-align: stretch; - align-self: stretch; - display: -webkit-box; - display: -webkit-flex; - display: -ms-flexbox; - display: flex; - -webkit-box-pack: justify; - -webkit-justify-content: space-between; - justify-content: space-between; - margin-top: 24px; -} - -.emotion-17 { - background-color: transparent; - border: 0 none; - outline: none; - -webkit-appearance: none; - -moz-appearance: none; - -ms-appearance: none; - appearance: none; - font-weight: 500; - font-size: 12px; - -webkit-flex-basis: 50%; - -ms-flex-preferred-size: 50%; - flex-basis: 50%; - cursor: pointer; - padding: 11px 16px; - border-radius: 4px; - text-transform: uppercase; - margin-right: 8px; - background-color: #1EA7FD; - color: #FFFFFF; - opacity: 0.6; - box-shadow: rgb(30 167 253 / 10%) 0 0 0 1px inset; -} - -.emotion-17:focus { - -webkit-text-decoration: underline; - text-decoration: underline; - font-weight: 700; -} - -.emotion-17:active { - -webkit-text-decoration: underline; - text-decoration: underline; - font-weight: 700; -} - -.emotion-17[aria-disabled="true"] { - cursor: default; -} - -.emotion-18 { - background-color: transparent; - border: 0 none; - outline: none; - -webkit-appearance: none; - -moz-appearance: none; - -ms-appearance: none; - appearance: none; - font-weight: 500; - font-size: 12px; - -webkit-flex-basis: 50%; - -ms-flex-preferred-size: 50%; - flex-basis: 50%; - cursor: pointer; - padding: 11px 16px; - border-radius: 4px; - text-transform: uppercase; - margin-left: 8px; - box-shadow: rgb(30 167 253) 0 0 0 1px inset; - color: #1EA7FD; -} - -.emotion-18:focus { - -webkit-text-decoration: underline; - text-decoration: underline; - font-weight: 700; -} - -.emotion-18:active { - -webkit-text-decoration: underline; - text-decoration: underline; - font-weight: 700; -} - -.emotion-18[aria-disabled="true"] { - cursor: default; -} - -
-
- - - Storybook icon - - - - - - - - - - Storybook - - - - - -
-

- Create an account to join the Storybook community -

-
-
-
- - -
-
- - -
-
- - -
-
- - -
-
-
-
-`; - -exports[`Storyshots Demo/AccountForm Verification Passsword 1 1`] = ` -.emotion-0 { - font-family: "Nunito Sans",-apple-system,".SFNSText-Regular","San Francisco",BlinkMacSystemFont,"Segoe UI","Helvetica Neue",Helvetica,Arial,sans-serif; - display: -webkit-box; - display: -webkit-flex; - display: -ms-flexbox; - display: flex; - -webkit-flex-direction: column; - -ms-flex-direction: column; - flex-direction: column; - -webkit-align-items: center; - -webkit-box-align: center; - -ms-flex-align: center; - align-items: center; - width: 450px; - padding: 32px; - background-color: #FFFFFF; - border-radius: 7px; -} - -.emotion-1 { - display: -webkit-box; - display: -webkit-flex; - display: -ms-flexbox; - display: flex; - -webkit-align-items: center; - -webkit-box-align: center; - -ms-flex-align: center; - align-items: center; - -webkit-box-pack: center; - -ms-flex-pack: center; - -webkit-justify-content: center; - justify-content: center; -} - -.emotion-2 { - height: 40px; - z-index: 10; - margin-left: 32px; -} - -.emotion-3 { - height: 40px; - z-index: 1; - left: -32px; - position: relative; -} - -.emotion-4 { - margin-top: 20px; - text-align: center; -} - -.emotion-5 { - display: -webkit-box; - display: -webkit-flex; - display: -ms-flexbox; - display: flex; - -webkit-align-items: flex-start; - -webkit-box-align: flex-start; - -ms-flex-align: flex-start; - align-items: flex-start; - -webkit-box-pack: center; - -ms-flex-pack: center; - -webkit-justify-content: center; - justify-content: center; - width: 350px; - min-height: 189px; - margin-top: 8px; -} - -.emotion-6 { - width: 100%; - -webkit-align-self: flex-start; - -ms-flex-item-align: flex-start; - align-self: flex-start; -} - -.emotion-6[aria-disabled="true"] { - opacity: 0.6; -} - -.emotion-7 { - display: -webkit-box; - display: -webkit-flex; - display: -ms-flexbox; - display: flex; - -webkit-flex-direction: column; - -ms-flex-direction: column; - flex-direction: column; - -webkit-box-pack: stretch; - -ms-flex-pack: stretch; - -webkit-justify-content: stretch; - justify-content: stretch; - margin-bottom: 10px; -} - -.emotion-8 { - font-size: 13px; - font-weight: 500; - margin-bottom: 6px; -} - -.emotion-9 { - font-size: 14px; - color: #333333; - padding: 10px 15px; - border-radius: 4px; - -webkit-appearance: none; - -moz-appearance: none; - -ms-appearance: none; - appearance: none; - outline: none; - border: 0 none; - box-shadow: rgb(0 0 0 / 10%) 0px 0px 0px 1px inset; -} - -.emotion-9:focus { - box-shadow: rgb(30 167 253) 0px 0px 0px 1px inset; -} - -.emotion-9:active { - box-shadow: rgb(30 167 253) 0px 0px 0px 1px inset; -} - -.emotion-9[aria-invalid="true"] { - box-shadow: rgb(255 68 0) 0px 0px 0px 1px inset; -} - -.emotion-16 { - -webkit-align-self: stretch; - -ms-flex-item-align: stretch; - align-self: stretch; - display: -webkit-box; - display: -webkit-flex; - display: -ms-flexbox; - display: flex; - -webkit-box-pack: justify; - -webkit-justify-content: space-between; - justify-content: space-between; - margin-top: 24px; -} - -.emotion-17 { - background-color: transparent; - border: 0 none; - outline: none; - -webkit-appearance: none; - -moz-appearance: none; - -ms-appearance: none; - appearance: none; - font-weight: 500; - font-size: 12px; - -webkit-flex-basis: 50%; - -ms-flex-preferred-size: 50%; - flex-basis: 50%; - cursor: pointer; - padding: 11px 16px; - border-radius: 4px; - text-transform: uppercase; - margin-right: 8px; - background-color: #1EA7FD; - color: #FFFFFF; - opacity: 0.6; - box-shadow: rgb(30 167 253 / 10%) 0 0 0 1px inset; -} - -.emotion-17:focus { - -webkit-text-decoration: underline; - text-decoration: underline; - font-weight: 700; -} - -.emotion-17:active { - -webkit-text-decoration: underline; - text-decoration: underline; - font-weight: 700; -} - -.emotion-17[aria-disabled="true"] { - cursor: default; -} - -.emotion-18 { - background-color: transparent; - border: 0 none; - outline: none; - -webkit-appearance: none; - -moz-appearance: none; - -ms-appearance: none; - appearance: none; - font-weight: 500; - font-size: 12px; - -webkit-flex-basis: 50%; - -ms-flex-preferred-size: 50%; - flex-basis: 50%; - cursor: pointer; - padding: 11px 16px; - border-radius: 4px; - text-transform: uppercase; - margin-left: 8px; - box-shadow: rgb(30 167 253) 0 0 0 1px inset; - color: #1EA7FD; -} - -.emotion-18:focus { - -webkit-text-decoration: underline; - text-decoration: underline; - font-weight: 700; -} - -.emotion-18:active { - -webkit-text-decoration: underline; - text-decoration: underline; - font-weight: 700; -} - -.emotion-18[aria-disabled="true"] { - cursor: default; -} - -
-
- - - Storybook icon - - - - - - - - - - Storybook - - - - - -
-

- Create an account to join the Storybook community -

-
-
-
- - -
-
- - -
-
- - -
-
- - -
-
-
-
-`; - -exports[`Storyshots Demo/AccountForm Verification Password Mismatch 1`] = ` -.emotion-0 { - font-family: "Nunito Sans",-apple-system,".SFNSText-Regular","San Francisco",BlinkMacSystemFont,"Segoe UI","Helvetica Neue",Helvetica,Arial,sans-serif; - display: -webkit-box; - display: -webkit-flex; - display: -ms-flexbox; - display: flex; - -webkit-flex-direction: column; - -ms-flex-direction: column; - flex-direction: column; - -webkit-align-items: center; - -webkit-box-align: center; - -ms-flex-align: center; - align-items: center; - width: 450px; - padding: 32px; - background-color: #FFFFFF; - border-radius: 7px; -} - -.emotion-1 { - display: -webkit-box; - display: -webkit-flex; - display: -ms-flexbox; - display: flex; - -webkit-align-items: center; - -webkit-box-align: center; - -ms-flex-align: center; - align-items: center; - -webkit-box-pack: center; - -ms-flex-pack: center; - -webkit-justify-content: center; - justify-content: center; -} - -.emotion-2 { - height: 40px; - z-index: 10; - margin-left: 32px; -} - -.emotion-3 { - height: 40px; - z-index: 1; - left: -32px; - position: relative; -} - -.emotion-4 { - margin-top: 20px; - text-align: center; -} - -.emotion-5 { - display: -webkit-box; - display: -webkit-flex; - display: -ms-flexbox; - display: flex; - -webkit-align-items: flex-start; - -webkit-box-align: flex-start; - -ms-flex-align: flex-start; - align-items: flex-start; - -webkit-box-pack: center; - -ms-flex-pack: center; - -webkit-justify-content: center; - justify-content: center; - width: 350px; - min-height: 189px; - margin-top: 8px; -} - -.emotion-6 { - width: 100%; - -webkit-align-self: flex-start; - -ms-flex-item-align: flex-start; - align-self: flex-start; -} - -.emotion-6[aria-disabled="true"] { - opacity: 0.6; -} - -.emotion-7 { - display: -webkit-box; - display: -webkit-flex; - display: -ms-flexbox; - display: flex; - -webkit-flex-direction: column; - -ms-flex-direction: column; - flex-direction: column; - -webkit-box-pack: stretch; - -ms-flex-pack: stretch; - -webkit-justify-content: stretch; - justify-content: stretch; - margin-bottom: 10px; -} - -.emotion-8 { - font-size: 13px; - font-weight: 500; - margin-bottom: 6px; -} - -.emotion-9 { - font-size: 14px; - color: #333333; - padding: 10px 15px; - border-radius: 4px; - -webkit-appearance: none; - -moz-appearance: none; - -ms-appearance: none; - appearance: none; - outline: none; - border: 0 none; - box-shadow: rgb(0 0 0 / 10%) 0px 0px 0px 1px inset; -} - -.emotion-9:focus { - box-shadow: rgb(30 167 253) 0px 0px 0px 1px inset; -} - -.emotion-9:active { - box-shadow: rgb(30 167 253) 0px 0px 0px 1px inset; -} - -.emotion-9[aria-invalid="true"] { - box-shadow: rgb(255 68 0) 0px 0px 0px 1px inset; -} - -.emotion-16 { - -webkit-align-self: stretch; - -ms-flex-item-align: stretch; - align-self: stretch; - display: -webkit-box; - display: -webkit-flex; - display: -ms-flexbox; - display: flex; - -webkit-box-pack: justify; - -webkit-justify-content: space-between; - justify-content: space-between; - margin-top: 24px; -} - -.emotion-17 { - background-color: transparent; - border: 0 none; - outline: none; - -webkit-appearance: none; - -moz-appearance: none; - -ms-appearance: none; - appearance: none; - font-weight: 500; - font-size: 12px; - -webkit-flex-basis: 50%; - -ms-flex-preferred-size: 50%; - flex-basis: 50%; - cursor: pointer; - padding: 11px 16px; - border-radius: 4px; - text-transform: uppercase; - margin-right: 8px; - background-color: #1EA7FD; - color: #FFFFFF; - opacity: 0.6; - box-shadow: rgb(30 167 253 / 10%) 0 0 0 1px inset; -} - -.emotion-17:focus { - -webkit-text-decoration: underline; - text-decoration: underline; - font-weight: 700; -} - -.emotion-17:active { - -webkit-text-decoration: underline; - text-decoration: underline; - font-weight: 700; -} - -.emotion-17[aria-disabled="true"] { - cursor: default; -} - -.emotion-18 { - background-color: transparent; - border: 0 none; - outline: none; - -webkit-appearance: none; - -moz-appearance: none; - -ms-appearance: none; - appearance: none; - font-weight: 500; - font-size: 12px; - -webkit-flex-basis: 50%; - -ms-flex-preferred-size: 50%; - flex-basis: 50%; - cursor: pointer; - padding: 11px 16px; - border-radius: 4px; - text-transform: uppercase; - margin-left: 8px; - box-shadow: rgb(30 167 253) 0 0 0 1px inset; - color: #1EA7FD; -} - -.emotion-18:focus { - -webkit-text-decoration: underline; - text-decoration: underline; - font-weight: 700; -} - -.emotion-18:active { - -webkit-text-decoration: underline; - text-decoration: underline; - font-weight: 700; -} - -.emotion-18[aria-disabled="true"] { - cursor: default; -} - -
-
- - - Storybook icon - - - - - - - - - - Storybook - - - - - -
-

- Create an account to join the Storybook community -

-
-
-
- - -
-
- - -
-
- - -
-
- - -
-
-
-
-`; - -exports[`Storyshots Demo/AccountForm Verification Success 1`] = ` -.emotion-0 { - font-family: "Nunito Sans",-apple-system,".SFNSText-Regular","San Francisco",BlinkMacSystemFont,"Segoe UI","Helvetica Neue",Helvetica,Arial,sans-serif; - display: -webkit-box; - display: -webkit-flex; - display: -ms-flexbox; - display: flex; - -webkit-flex-direction: column; - -ms-flex-direction: column; - flex-direction: column; - -webkit-align-items: center; - -webkit-box-align: center; - -ms-flex-align: center; - align-items: center; - width: 450px; - padding: 32px; - background-color: #FFFFFF; - border-radius: 7px; -} - -.emotion-1 { - display: -webkit-box; - display: -webkit-flex; - display: -ms-flexbox; - display: flex; - -webkit-align-items: center; - -webkit-box-align: center; - -ms-flex-align: center; - align-items: center; - -webkit-box-pack: center; - -ms-flex-pack: center; - -webkit-justify-content: center; - justify-content: center; -} - -.emotion-2 { - height: 40px; - z-index: 10; - margin-left: 32px; -} - -.emotion-3 { - height: 40px; - z-index: 1; - left: -32px; - position: relative; -} - -.emotion-4 { - margin-top: 20px; - text-align: center; -} - -.emotion-5 { - display: -webkit-box; - display: -webkit-flex; - display: -ms-flexbox; - display: flex; - -webkit-align-items: flex-start; - -webkit-box-align: flex-start; - -ms-flex-align: flex-start; - align-items: flex-start; - -webkit-box-pack: center; - -ms-flex-pack: center; - -webkit-justify-content: center; - justify-content: center; - width: 350px; - min-height: 189px; - margin-top: 8px; -} - -.emotion-6 { - width: 100%; - -webkit-align-self: flex-start; - -ms-flex-item-align: flex-start; - align-self: flex-start; -} - -.emotion-6[aria-disabled="true"] { - opacity: 0.6; -} - -.emotion-7 { - display: -webkit-box; - display: -webkit-flex; - display: -ms-flexbox; - display: flex; - -webkit-flex-direction: column; - -ms-flex-direction: column; - flex-direction: column; - -webkit-box-pack: stretch; - -ms-flex-pack: stretch; - -webkit-justify-content: stretch; - justify-content: stretch; - margin-bottom: 10px; -} - -.emotion-8 { - font-size: 13px; - font-weight: 500; - margin-bottom: 6px; -} - -.emotion-9 { - font-size: 14px; - color: #333333; - padding: 10px 15px; - border-radius: 4px; - -webkit-appearance: none; - -moz-appearance: none; - -ms-appearance: none; - appearance: none; - outline: none; - border: 0 none; - box-shadow: rgb(0 0 0 / 10%) 0px 0px 0px 1px inset; -} - -.emotion-9:focus { - box-shadow: rgb(30 167 253) 0px 0px 0px 1px inset; -} - -.emotion-9:active { - box-shadow: rgb(30 167 253) 0px 0px 0px 1px inset; -} - -.emotion-9[aria-invalid="true"] { - box-shadow: rgb(255 68 0) 0px 0px 0px 1px inset; -} - -.emotion-16 { - -webkit-align-self: stretch; - -ms-flex-item-align: stretch; - align-self: stretch; - display: -webkit-box; - display: -webkit-flex; - display: -ms-flexbox; - display: flex; - -webkit-box-pack: justify; - -webkit-justify-content: space-between; - justify-content: space-between; - margin-top: 24px; -} - -.emotion-17 { - background-color: transparent; - border: 0 none; - outline: none; - -webkit-appearance: none; - -moz-appearance: none; - -ms-appearance: none; - appearance: none; - font-weight: 500; - font-size: 12px; - -webkit-flex-basis: 50%; - -ms-flex-preferred-size: 50%; - flex-basis: 50%; - cursor: pointer; - padding: 11px 16px; - border-radius: 4px; - text-transform: uppercase; - margin-right: 8px; - background-color: #1EA7FD; - color: #FFFFFF; - opacity: 0.6; - box-shadow: rgb(30 167 253 / 10%) 0 0 0 1px inset; -} - -.emotion-17:focus { - -webkit-text-decoration: underline; - text-decoration: underline; - font-weight: 700; -} - -.emotion-17:active { - -webkit-text-decoration: underline; - text-decoration: underline; - font-weight: 700; -} - -.emotion-17[aria-disabled="true"] { - cursor: default; -} - -.emotion-18 { - background-color: transparent; - border: 0 none; - outline: none; - -webkit-appearance: none; - -moz-appearance: none; - -ms-appearance: none; - appearance: none; - font-weight: 500; - font-size: 12px; - -webkit-flex-basis: 50%; - -ms-flex-preferred-size: 50%; - flex-basis: 50%; - cursor: pointer; - padding: 11px 16px; - border-radius: 4px; - text-transform: uppercase; - margin-left: 8px; - box-shadow: rgb(30 167 253) 0 0 0 1px inset; - color: #1EA7FD; -} - -.emotion-18:focus { - -webkit-text-decoration: underline; - text-decoration: underline; - font-weight: 700; -} - -.emotion-18:active { - -webkit-text-decoration: underline; - text-decoration: underline; - font-weight: 700; -} - -.emotion-18[aria-disabled="true"] { - cursor: default; -} - -
-
- - - Storybook icon - - - - - - - - - - Storybook - - - - - -
-

- Create an account to join the Storybook community -

-
-
-
- - -
-
- - -
-
- - -
-
- - -
-
-
-
-`; - exports[`Storyshots Demo/Examples / Button Basic 1`] = ` + {complete &&

Completed!!

} + + ); +}; + +Form.propTypes = { + onSuccess: PropTypes.func.isRequired, +}; diff --git a/code/renderers/react/template/components/index.js b/code/renderers/react/template/components/index.js index 4f1579fddddd..2f9e0f79a14d 100644 --- a/code/renderers/react/template/components/index.js +++ b/code/renderers/react/template/components/index.js @@ -2,6 +2,7 @@ import globalThis from 'global'; import { Button } from './Button.jsx'; import { Pre } from './Pre.jsx'; +import { Form } from './Form.jsx'; import { Html } from './Html.jsx'; -globalThis.Components = { Button, Html, Pre }; +globalThis.Components = { Button, Pre, Form, Html }; diff --git a/code/renderers/svelte/template/components/Form.svelte b/code/renderers/svelte/template/components/Form.svelte new file mode 100644 index 000000000000..467c31d4974b --- /dev/null +++ b/code/renderers/svelte/template/components/Form.svelte @@ -0,0 +1,33 @@ + + +
+ + + {#if complete}

Completed!!

{/if} +
diff --git a/code/renderers/svelte/template/components/index.js b/code/renderers/svelte/template/components/index.js index cd72160c2659..1dd45137a0d7 100644 --- a/code/renderers/svelte/template/components/index.js +++ b/code/renderers/svelte/template/components/index.js @@ -1,7 +1,8 @@ import globalThis from 'global'; import Button from './Button.svelte'; -import Html from './Html.svelte'; import Pre from './Pre.svelte'; +import Form from './Form.svelte'; +import Html from './Html.svelte'; -globalThis.Components = { Button, Html, Pre }; +globalThis.Components = { Button, Pre, Form, Html }; diff --git a/code/renderers/vue3/template/components/Form.vue b/code/renderers/vue3/template/components/Form.vue new file mode 100644 index 000000000000..fc46f159e337 --- /dev/null +++ b/code/renderers/vue3/template/components/Form.vue @@ -0,0 +1,44 @@ + + + diff --git a/code/renderers/vue3/template/components/index.js b/code/renderers/vue3/template/components/index.js index cff22be00427..1aef69a6655a 100644 --- a/code/renderers/vue3/template/components/index.js +++ b/code/renderers/vue3/template/components/index.js @@ -1,7 +1,8 @@ import globalThis from 'global'; import Button from './Button.vue'; -import Html from './Html.vue'; import Pre from './Pre.vue'; +import Form from './Form.vue'; +import Html from './Html.vue'; -globalThis.Components = { Button, Html, Pre }; +globalThis.Components = { Button, Pre, Form, Html }; diff --git a/code/yarn.lock b/code/yarn.lock index b0d4218fee01..0132c4e4a7ea 100644 --- a/code/yarn.lock +++ b/code/yarn.lock @@ -33761,6 +33761,7 @@ __metadata: eventemitter3: ^4.0.7 express: ^4.17.1 format-json: ^1.0.3 + formik: ^2.2.9 global: ^4.4.0 lodash: ^4.17.21 paths.macro: ^3.0.1