m/metamask-extension
1
0
Fork 0
mirror of https://github.com/kremalicious/metamask-extension.git synced 2024-12-22 17:33:23 +01:00
Code

Fix radio-group component to for new Storybook format (#12900)

Browse Source 
* radio-group

* tweak proptype descs
This commit is contained in:
Etienne Dusseault 2021-12-08 01:36:16 +08:00 committed by GitHub
parent 311ea021f3
commit d5b85c0e54
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
3 changed files with 55 additions and 15 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

15
ui/components/ui/radio-group/README.mdx Normal file
View File

@ -0,0 +1,15 @@
import { Story, Canvas, ArgsTable } from '@storybook/addon-docs';
import RadioGroup from '.';
# Radio Group
A multiple-exclusion scope for a set of radio buttons.
<Canvas>
<Story id="ui-components-ui-radio-group-radio-group-stories-js--default-story" />
</Canvas>
## Component API
<ArgsTable of={RadioGroup} />

12
ui/components/ui/radio-group/radio-group.component.js
View File

@ -85,9 +85,21 @@ export default function RadioGroup({ options, name, selectedValue, onChange }) {
}
RadioGroup.propTypes = {
/**
* Predefined options for radio group
*/
options: PropTypes.array,
/**
* Show selected value
*/
selectedValue: PropTypes.string,
/**
* Show name as label
*/
name: PropTypes.string,
/**
* Handler for onChange
*/
onChange: PropTypes.func,
};

43
ui/components/ui/radio-group/radio-group.stories.js
View File

@ -1,30 +1,43 @@
import React from 'react';
import { GAS_RECOMMENDATIONS } from '../../../../shared/constants/gas';
import README from './README.mdx';
import RadioGroup from '.';
export default {
title: 'Components/UI/RadioGroup',
id: __filename,
component: RadioGroup,
parameters: {
docs: {
page: README,
},
},
argTypes: {
options: { control: 'array' },
selectedValue: { control: 'text' },
name: { control: 'text' },
onChange: { action: 'onChange' },
},
};
export const DefaultStory = () => {
export const DefaultStory = (args) => {
return (
<div className="radio-group" style={{ minWidth: '600px' }}>
<RadioGroup
name="gas-recommendation"
options={[
{ value: GAS_RECOMMENDATIONS.LOW, label: 'Low', recommended: false },
{
value: GAS_RECOMMENDATIONS.MEDIUM,
label: 'Medium',
recommended: false,
},
{ value: GAS_RECOMMENDATIONS.HIGH, label: 'High', recommended: true },
]}
selectedValue={GAS_RECOMMENDATIONS.HIGH}
/>
<RadioGroup {...args} />
</div>
);
};
DefaultStory.storyName = 'Default';
DefaultStory.args = {
name: 'gas-recommendation',
options: [
{ value: GAS_RECOMMENDATIONS.LOW, label: 'Low', recommended: false },
{
value: GAS_RECOMMENDATIONS.MEDIUM,
label: 'Medium',
recommended: false,
},
{ value: GAS_RECOMMENDATIONS.HIGH, label: 'High', recommended: true },
],
selectedValue: GAS_RECOMMENDATIONS.HIGH,
};