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

Add argTypes for color-indicator (#13659)

Browse Source
This commit is contained in:
Tom McGuire 2022-02-18 08:00:07 -08:00 committed by GitHub
parent 120603e6df
commit d2c292bead
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
1 changed files with 40 additions and 11 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

51
ui/components/ui/color-indicator/color-indicator.stories.js
View File

@ -1,30 +1,59 @@
import React from 'react'; import React from 'react';
import { select } from '@storybook/addon-knobs';
import { COLORS, SIZES } from '../../../helpers/constants/design-system'; import { COLORS, SIZES } from '../../../helpers/constants/design-system';
import ColorIndicator from './color-indicator'; import ColorIndicator from './color-indicator';
export default { export default {
title: 'Components/UI/ColorIndicator', title: 'Components/UI/ColorIndicator',
id: __filename, id: __filename,
argTypes: {
size: {
control: {
type: 'select',
},
options: SIZES,
defaultValue: SIZES.LG,
},
type: {
control: {
type: 'select',
},
options: ColorIndicator.TYPES,
defaultValue: ColorIndicator.TYPES.FILLED,
},
color: {
control: {
type: 'select',
},
options: COLORS,
defaultValue: COLORS.PRIMARY1,
},
borderColor: {
control: {
type: 'select',
},
options: { NONE: undefined, ...COLORS },
defaultValue: undefined,
},
},
}; };
export const DefaultStory = () => ( export const DefaultStory = (args) => (
<ColorIndicator <ColorIndicator
size={select('size', SIZES, SIZES.LG)} size={args.size}
type={select('type', ColorIndicator.TYPES, ColorIndicator.TYPES.FILLED)} type={args.type}
color={select('color', COLORS, COLORS.PRIMARY1)} color={args.color}
borderColor={select('borderColor', { NONE: undefined, ...COLORS })} borderColor={args.borderColor}
/> />
); );
DefaultStory.storyName = 'Default'; DefaultStory.storyName = 'Default';
export const WithIcon = () => ( export const WithIcon = (args) => (
<ColorIndicator <ColorIndicator
size={select('size', SIZES, SIZES.LG)} size={args.size}
type={select('type', ColorIndicator.TYPES, ColorIndicator.TYPES.FILLED)} type={args.type}
color={select('color', COLORS, COLORS.PRIMARY1)} color={args.color}
iconClassName="fa fa-question" iconClassName="fa fa-question"
borderColor={select('borderColor', { NONE: undefined, ...COLORS })} borderColor={args.borderColor}
/> />
); );