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 { object, select } from '@storybook/addon-knobs';
import {
COLORS,
SIZES,
@ -7,11 +6,6 @@ import {
} from '../../../helpers/constants/design-system';
import DefinitionList from './definition-list';
export default {
title: 'Components/UI/DefinitionList',
id: __filename,
};
const basic = {
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.',
@ -34,39 +28,91 @@ const tooltips = {
Ticker: 'The currency symbol of the primary currency for this network',
};
export const DefaultStory = () => (
<DefinitionList
dictionary={object('dictionary', basic)}
gapSize={select('gapSize', SIZES, SIZES.SM)}
/>
export default {
title: 'Components/UI/DefinitionList',
id: __filename,
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';
export const WithTooltips = () => (
export const WithTooltips = (args) => (
<DefinitionList
dictionary={object('dictionary', advanced)}
tooltips={object('tooltips', tooltips)}
gapSize={select('gapSize', SIZES, SIZES.SM)}
dictionary={args.dictionary}
tooltips={args.tooltips}
gapSize={args.gapSize}
/>
);
export const WithTypographyControl = () => (
WithTooltips.args = {
dictionary: advanced,
tooltips,
};
WithTooltips.argTypes = {
tooltips: { control: 'object', name: 'Tooltips' },
};
export const WithTypographyControl = (args) => (
<DefinitionList
dictionary={object('dictionary', advanced)}
tooltips={object('tooltips', tooltips)}
gapSize={select('gapSize', SIZES, SIZES.SM)}
dictionary={args.dictionary}
tooltips={args.tooltips}
gapSize={args.gapSize}
termTypography={{
variant: select('termTypography.variant', TYPOGRAPHY, TYPOGRAPHY.H6),
color: select('termTypography.color', COLORS, COLORS.TEXT_DEFAULT),
variant: args.termTypographyVariant,
color: args.termTypographyColor,
children: <div></div>,
}}
definitionTypography={{
variant: select(
'definitionTypography.variant',
TYPOGRAPHY,
TYPOGRAPHY.H6,
),
color: select('definitionTypography.color', COLORS, COLORS.TEXT_DEFAULT),
variant: args.definitionTypographyVariant,
color: args.definitionTypographyColor,
children: <div></div>,
}}
/>
);
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),
},
};