mirror of
https://github.com/kremalicious/metamask-extension.git
synced 2024-12-23 01:39:44 +01:00
Add argTypes for color-indicator (#13659)
This commit is contained in:
parent
120603e6df
commit
d2c292bead
@ -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}
|
||||
/>
|
||||
);
|
||||
|
Loading…
Reference in New Issue
Block a user