mirror of
https://github.com/kremalicious/metamask-extension.git
synced 2024-12-23 09:52:26 +01:00
c5368c152b
* added storybook test runner * added test runner in ci * updated test for ci and fixed lint error * updated lavamoat policy * updated test command * updated playwright * changed command to storybook;ci * updated command * updated instance for test-storybook * updated playwright * added playwright step * replaced concurrently with start-server-and-test * updated the static storybook directory * replaced first with last * updated lock file * replaced first with last * updated test-storybook with maxworkers * updated .depchechrc * updated yml * removed id from banner base * replaced broken stories with .stories-to-do.js extesnsion * updated token allowance story * removed duplicacies from yarn * fixed lavamoat * removed filename comment * updated links for docs * fixed file extension for stories * updated path for stories.json * updated stories.json path * yarn updated * updated stories * updated yarn * updated wait on
80 lines
1.9 KiB
JavaScript
80 lines
1.9 KiB
JavaScript
import React from 'react';
|
|
import README from './README.mdx';
|
|
import Dropdown from '.';
|
|
|
|
const unnamedOptions = [...Array(10).keys()].map((index) => {
|
|
return { value: `option${index}` };
|
|
});
|
|
|
|
const namedOptions = unnamedOptions.map((option, index) => {
|
|
return { ...option, name: `Option ${index}` };
|
|
});
|
|
|
|
const namedOptionsWithVeryLongNames = unnamedOptions.map((option, index) => {
|
|
return {
|
|
...option,
|
|
name: `Option ${index} with a very${', very'.repeat(index)} long name`,
|
|
};
|
|
});
|
|
|
|
export default {
|
|
title: 'Components/UI/Dropdown',
|
|
|
|
component: Dropdown,
|
|
parameters: {
|
|
docs: {
|
|
page: README,
|
|
},
|
|
},
|
|
argTypes: {
|
|
className: { control: 'text' },
|
|
disabled: { control: 'boolean' },
|
|
title: { control: 'text' },
|
|
onChange: { action: 'onChange' },
|
|
options: { control: 'array' },
|
|
selectedOption: { control: 'text' },
|
|
style: { control: 'object' },
|
|
},
|
|
};
|
|
|
|
export const DefaultStory = (args) => <Dropdown {...args} />;
|
|
|
|
DefaultStory.storyName = 'Default';
|
|
|
|
DefaultStory.args = {
|
|
disabled: false,
|
|
title: 'Test Dropdown Name',
|
|
options: namedOptions,
|
|
selectedOption: namedOptions[0].value,
|
|
};
|
|
|
|
export const OptionsWithoutNames = (args) => <Dropdown {...args} />;
|
|
|
|
OptionsWithoutNames.args = {
|
|
disabled: false,
|
|
title: 'Test Dropdown Name',
|
|
options: unnamedOptions,
|
|
selectedOption: unnamedOptions[0].value,
|
|
};
|
|
|
|
export const OptionsWithLongNames = (args) => <Dropdown {...args} />;
|
|
|
|
OptionsWithLongNames.args = {
|
|
disabled: false,
|
|
title: 'Test Dropdown Name',
|
|
options: namedOptionsWithVeryLongNames,
|
|
selectedOption: namedOptionsWithVeryLongNames[0].value,
|
|
};
|
|
|
|
export const OptionsWithLongNamesAndShortWidth = (args) => (
|
|
<Dropdown {...args} />
|
|
);
|
|
|
|
OptionsWithLongNamesAndShortWidth.args = {
|
|
disabled: false,
|
|
title: 'Test Dropdown Name',
|
|
options: namedOptionsWithVeryLongNames,
|
|
selectedOption: namedOptionsWithVeryLongNames[0].value,
|
|
style: { width: '200px' },
|
|
};
|