m/metamask-extension
1
0
Fork 0
mirror of https://github.com/kremalicious/metamask-extension.git synced 2024-11-22 09:57:02 +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 { select } from '@storybook/addon-knobs';
import { COLORS, SIZES } from '../../../helpers/constants/design-system';
import ColorIndicator from './color-indicator';
export default {
title: 'Components/UI/ColorIndicator',
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
size={select('size', SIZES, SIZES.LG)}
type={select('type', ColorIndicator.TYPES, ColorIndicator.TYPES.FILLED)}
color={select('color', COLORS, COLORS.PRIMARY1)}
borderColor={select('borderColor', { NONE: undefined, ...COLORS })}
size={args.size}
type={args.type}
color={args.color}
borderColor={args.borderColor}
/>
);
DefaultStory.storyName = 'Default';
export const WithIcon = () => (
export const WithIcon = (args) => (
<ColorIndicator
size={select('size', SIZES, SIZES.LG)}
type={select('type', ColorIndicator.TYPES, ColorIndicator.TYPES.FILLED)}
color={select('color', COLORS, COLORS.PRIMARY1)}
size={args.size}
type={args.type}
color={args.color}
iconClassName="fa fa-question"
borderColor={select('borderColor', { NONE: undefined, ...COLORS })}
borderColor={args.borderColor}
/>
);