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

DefinitionList story: convert knobs and actions to controls / args (#15185)

Browse Source 
* tabs story changes

* removed knobs and implemented controls

* object to select control typography

* added argtypes only for relevant stories + fixes
This commit is contained in:
Dor Wiser 2022-07-20 21:58:14 +03:00 committed by GitHub
parent 78b32153f5
commit 98fc0060f3
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
1 changed files with 73 additions and 27 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

100
ui/components/ui/definition-list/definition-list.stories.js
View File

@ -1,5 +1,4 @@
import React from 'react'; import React from 'react';
import { object, select } from '@storybook/addon-knobs';
import { import {
COLORS, COLORS,
SIZES, SIZES,
@ -7,11 +6,6 @@ import {
} from '../../../helpers/constants/design-system'; } from '../../../helpers/constants/design-system';
import DefinitionList from './definition-list'; import DefinitionList from './definition-list';
export default {
title: 'Components/UI/DefinitionList',
id: __filename,
};
const basic = { const basic = {
term: term:
'a word or phrase used to describe a thing or to express a concept, especially in a particular kind of language or branch of study.', 'a word or phrase used to describe a thing or to express a concept, especially in a particular kind of language or branch of study.',
@ -34,39 +28,91 @@ const tooltips = {
Ticker: 'The currency symbol of the primary currency for this network', Ticker: 'The currency symbol of the primary currency for this network',
}; };
export const DefaultStory = () => ( export default {
<DefinitionList title: 'Components/UI/DefinitionList',
dictionary={object('dictionary', basic)} id: __filename,
gapSize={select('gapSize', SIZES, SIZES.SM)} argTypes: {
/> dictionary: { control: 'object', name: 'Dictionary' },
gapSize: {
control: 'select',
name: 'Gap Size',
options: Object.values(SIZES),
},
},
args: {
dictionary: basic,
gapSize: SIZES.SM,
},
};
export const DefaultStory = (args) => (
<DefinitionList dictionary={args.dictionary} gapSize={args.gapSize} />
); );
DefaultStory.storyName = 'Default'; DefaultStory.storyName = 'Default';
export const WithTooltips = () => ( export const WithTooltips = (args) => (
<DefinitionList <DefinitionList
dictionary={object('dictionary', advanced)} dictionary={args.dictionary}
tooltips={object('tooltips', tooltips)} tooltips={args.tooltips}
gapSize={select('gapSize', SIZES, SIZES.SM)} gapSize={args.gapSize}
/> />
); );
export const WithTypographyControl = () => ( WithTooltips.args = {
dictionary: advanced,
tooltips,
};
WithTooltips.argTypes = {
tooltips: { control: 'object', name: 'Tooltips' },
};
export const WithTypographyControl = (args) => (
<DefinitionList <DefinitionList
dictionary={object('dictionary', advanced)} dictionary={args.dictionary}
tooltips={object('tooltips', tooltips)} tooltips={args.tooltips}
gapSize={select('gapSize', SIZES, SIZES.SM)} gapSize={args.gapSize}
termTypography={{ termTypography={{
variant: select('termTypography.variant', TYPOGRAPHY, TYPOGRAPHY.H6), variant: args.termTypographyVariant,
color: select('termTypography.color', COLORS, COLORS.TEXT_DEFAULT), color: args.termTypographyColor,
children: <div></div>,
}} }}
definitionTypography={{ definitionTypography={{
variant: select( variant: args.definitionTypographyVariant,
'definitionTypography.variant', color: args.definitionTypographyColor,
TYPOGRAPHY, children: <div></div>,
TYPOGRAPHY.H6,
),
color: select('definitionTypography.color', COLORS, COLORS.TEXT_DEFAULT),
}} }}
/> />
); );
WithTypographyControl.args = {
dictionary: advanced,
termTypographyVariant: TYPOGRAPHY.H6,
termTypographyColor: COLORS.TEXT_DEFAULT,
definitionTypographyVariant: TYPOGRAPHY.H6,
definitionTypographyColor: COLORS.TEXT_DEFAULT,
};
WithTypographyControl.argTypes = {
tooltips,
termTypographyVariant: {
control: 'select',
name: 'Term Variant',
options: Object.values(TYPOGRAPHY),
},
termTypographyColor: {
control: 'select',
name: 'Term Color',
options: Object.values(COLORS),
},
definitionTypographyVariant: {
control: 'select',
name: 'Definition Variant',
options: Object.values(TYPOGRAPHY),
},
definitionTypographyColor: {
control: 'select',
name: 'Definition Color',
options: Object.values(COLORS),
},
};