m/metamask-extension
1
0
Fork 0
mirror of https://github.com/kremalicious/metamask-extension.git synced 2024-10-22 19:26:13 +02:00
Code

Fix dropdown component for new Storybook format (#12816)

Browse Source 
* dropdown

* Updating default props, proptype descriptions and removing required as doesn't do anything

Co-authored-by: georgewrmarshall <george.marshall@consensys.net>
This commit is contained in:
Etienne Dusseault 2021-12-09 04:49:27 +08:00 committed by GitHub
parent 363f81db11
commit c3e7952656
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
3 changed files with 114 additions and 74 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

35
ui/components/ui/dropdown/README.mdx Normal file
View File

@ -0,0 +1,35 @@
import { Story, Canvas, ArgsTable } from '@storybook/addon-docs';
import Dropdown from '.';
# Dropdown
A toggleable menu that allows the user to choose one value from a predefined list
<Canvas>
<Story id="ui-components-ui-dropdown-dropdown-stories-js--default-story" />
</Canvas>
## Component API
<ArgsTable of={Dropdown} />
## Usage
### Options Without Names
<Canvas>
<Story id="ui-components-ui-dropdown-dropdown-stories-js--options-without-names" />
</Canvas>
### Options With Long Names
<Canvas>
<Story id="ui-components-ui-dropdown-dropdown-stories-js--options-with-long-names" />
</Canvas>
### Options With Long Names And Short Width
<Canvas>
<Story id="ui-components-ui-dropdown-dropdown-stories-js--options-with-long-names-and-short-width" />
</Canvas>

33
ui/components/ui/dropdown/dropdown.js
View File

@ -4,10 +4,10 @@ import classnames from 'classnames';
const Dropdown = ({
className,
disabled,
disabled = false,
onChange,
options,
selectedOption,
selectedOption = null,
style,
title,
}) => {
@ -41,26 +41,39 @@ const Dropdown = ({
};
Dropdown.propTypes = {
/**
* Additional css className to add to root of Dropdown component
*/
className: PropTypes.string,
/**
* Disable dropdown by setting to true
*/
disabled: PropTypes.bool,
/**
* Title of the dropdown
*/
title: PropTypes.string,
/**
* On options change handler
*/
onChange: PropTypes.func.isRequired,
/**
* Predefined options for component
*/
options: PropTypes.arrayOf(
PropTypes.exact({
name: PropTypes.string,
value: PropTypes.string.isRequired,
}),
).isRequired,
/**
* Selected options of dropdown
*/
selectedOption: PropTypes.string,
/**
* Add inline style for the component
*/
style: PropTypes.object,
};
Dropdown.defaultProps = {
className: undefined,
disabled: false,
title: undefined,
selectedOption: null,
style: undefined,
};
export default Dropdown;

120
ui/components/ui/dropdown/dropdown.stories.js
View File

@ -1,13 +1,7 @@
import React from 'react';
import { action } from '@storybook/addon-actions';
import { boolean, select, text } from '@storybook/addon-knobs';
import README from './README.mdx';
import Dropdown from '.';
export default {
title: 'Components/UI/Dropdown',
id: __filename,
};
const unnamedOptions = [...Array(10).keys()].map((index) => {
return { value: `option${index}` };
});
@ -23,65 +17,63 @@ const namedOptionsWithVeryLongNames = unnamedOptions.map((option, index) => {
};
});
export const DefaultStory = () => (
<Dropdown
disabled={boolean('Disabled', false)}
title={text('Title', 'Test dropdown name')}
onChange={action('Selection changed')}
options={namedOptions}
required={boolean('Required', false)}
selectedOption={select(
'Selected Option',
namedOptions.map((option) => option.value),
namedOptions[0].value,
)}
/>
);
export default {
title: 'Components/UI/Dropdown',
id: __filename,
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';
export const OptionsWithoutNames = () => (
<Dropdown
disabled={boolean('Disabled', false)}
title={text('Title', 'Test dropdown name')}
onChange={action('Selection changed')}
options={unnamedOptions}
required={boolean('Required', false)}
selectedOption={select(
'Selected Option',
unnamedOptions.map((option) => option.value),
unnamedOptions[0].value,
)}
/>
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} />
);
export const OptionsWithLongNames = () => (
<Dropdown
disabled={boolean('Disabled', false)}
title={text('Title', 'Test dropdown name')}
onChange={action('Selection changed')}
options={namedOptionsWithVeryLongNames}
required={boolean('Required', false)}
selectedOption={select(
'Selected Option',
namedOptionsWithVeryLongNames.map((option) => option.value),
namedOptionsWithVeryLongNames[0].value,
)}
/>
);
export const OptionsWithLongNamesAndShortWidth = () => (
<Dropdown
disabled={boolean('Disabled', false)}
title={text('Title', 'Test dropdown name')}
onChange={action('Selection changed')}
options={namedOptionsWithVeryLongNames}
required={boolean('Required', false)}
selectedOption={select(
'Selected Option',
namedOptionsWithVeryLongNames.map((option) => option.value),
namedOptionsWithVeryLongNames[0].value,
)}
style={{ width: '200px' }}
/>
);
OptionsWithLongNamesAndShortWidth.args = {
disabled: false,
title: 'Test Dropdown Name',
options: namedOptionsWithVeryLongNames,
selectedOption: namedOptionsWithVeryLongNames[0].value,
style: { width: '200px' },
};