metamask-extension/ui/components/app/srp-input/srp-input.stories.js

import React from 'react';
import SrpInput from '.';

export default {
  title: 'Components/App/SrpInput',
  id: __filename,
  component: SrpInput,
  argTypes: {
    onChange: { action: 'changed' },
  },
};

const Template = (args) => {
  return <SrpInput {...args} />;
};

export const DefaultStory = Template.bind({});

DefaultStory.storyName = 'Default';
Refactor: Extract SRP input from create vault component (#13720) This is a pure refactor that extracts the SRP input from the `CreateNewVault` component. This is intended to make future changes to the SRP input easier, and to reduce duplication between the old and new onboarding flows. Extensive unit tests have been added for the new SRP input component. A new test library was added (`@testing-library/user-event`) for simulating user events with components rendered using the `@testing-library` library. A new helper method has been added (`renderWithLocalization`) for rendering components using `@testing-library` with just our localization contexts added as a wrapper. The localization contexts were already added by the `renderWithProviders` helper function, but there is no need for a Redux provider in these unit tests. 2022-02-23 21:30:26 +01:00			`import React from 'react';`
			`import SrpInput from '.';`

			`export default {`
			`title: 'Components/App/SrpInput',`
			`id: __filename,`
Split SRP input by word (#14016) * Initial implementation of new SrpInput component This new version of the SrpInput component uses a separate field for each word of the SRP. Only one field can be revealed at a time, making it less likely that it gets accidentally revealed to somebody. * Fix copy mistakes * Move container div from 'create vault' to 'srp-input', and setup grid layout * Increase size of title * Remove hard-coded width in Storybook to allow testing different viewport sizes * Improve layout * Improve margins * Update dropdown text * Expand SRP input section * Remove unused localized messages * Update dropdown option names in unit tests * Replace checkbox with show/hide toggle * Remove unused localized message * Fix 'data-testid' prop name * Fix e2e test imports using paste * Use 'ActionableMessage' component for error message * Convert error popover to actionable message * Add tip about pasting the SRP * Remove invalid prop The "info" style of `ActionableMessage` is the default, so no type is required. * Use more readable test convenience methods The method `toBeInTheDocument()` is now used over `not.toBeNull()` to improve the readability of tests. Likewise, the convenience method `.clear` is now used to clear fields rather than manually entering the key combination to clear a field. * Fix misspelled word 2022-03-21 20:09:26 +01:00			`component: SrpInput,`
Refactor: Extract SRP input from create vault component (#13720) This is a pure refactor that extracts the SRP input from the `CreateNewVault` component. This is intended to make future changes to the SRP input easier, and to reduce duplication between the old and new onboarding flows. Extensive unit tests have been added for the new SRP input component. A new test library was added (`@testing-library/user-event`) for simulating user events with components rendered using the `@testing-library` library. A new helper method has been added (`renderWithLocalization`) for rendering components using `@testing-library` with just our localization contexts added as a wrapper. The localization contexts were already added by the `renderWithProviders` helper function, but there is no need for a Redux provider in these unit tests. 2022-02-23 21:30:26 +01:00			`argTypes: {`
			`onChange: { action: 'changed' },`
			`},`
			`};`

			`const Template = (args) => {`
Split SRP input by word (#14016) * Initial implementation of new SrpInput component This new version of the SrpInput component uses a separate field for each word of the SRP. Only one field can be revealed at a time, making it less likely that it gets accidentally revealed to somebody. * Fix copy mistakes * Move container div from 'create vault' to 'srp-input', and setup grid layout * Increase size of title * Remove hard-coded width in Storybook to allow testing different viewport sizes * Improve layout * Improve margins * Update dropdown text * Expand SRP input section * Remove unused localized messages * Update dropdown option names in unit tests * Replace checkbox with show/hide toggle * Remove unused localized message * Fix 'data-testid' prop name * Fix e2e test imports using paste * Use 'ActionableMessage' component for error message * Convert error popover to actionable message * Add tip about pasting the SRP * Remove invalid prop The "info" style of `ActionableMessage` is the default, so no type is required. * Use more readable test convenience methods The method `toBeInTheDocument()` is now used over `not.toBeNull()` to improve the readability of tests. Likewise, the convenience method `.clear` is now used to clear fields rather than manually entering the key combination to clear a field. * Fix misspelled word 2022-03-21 20:09:26 +01:00			`return <SrpInput {...args} />;`
Refactor: Extract SRP input from create vault component (#13720) This is a pure refactor that extracts the SRP input from the `CreateNewVault` component. This is intended to make future changes to the SRP input easier, and to reduce duplication between the old and new onboarding flows. Extensive unit tests have been added for the new SRP input component. A new test library was added (`@testing-library/user-event`) for simulating user events with components rendered using the `@testing-library` library. A new helper method has been added (`renderWithLocalization`) for rendering components using `@testing-library` with just our localization contexts added as a wrapper. The localization contexts were already added by the `renderWithProviders` helper function, but there is no need for a Redux provider in these unit tests. 2022-02-23 21:30:26 +01:00			`};`

			`export const DefaultStory = Template.bind({});`

			`DefaultStory.storyName = 'Default';`