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

Box story: convert knobs to controls (#13274)

Browse Source 
Co-authored-by: caogu <sunlon1987@gmail.com>
This commit is contained in:
6201 2022-01-18 05:50:27 +08:00 committed by GitHub
parent cb815a91ad
commit 371da2eb83
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
1 changed files with 136 additions and 87 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

223
ui/components/ui/box/box.stories.js
View File

@ -1,4 +1,3 @@
import { number, select } from '@storybook/addon-knobs';
import React from 'react'; import React from 'react';
import { import {
ALIGN_ITEMS, ALIGN_ITEMS,
@ -11,96 +10,146 @@ import {
} from '../../../helpers/constants/design-system'; } from '../../../helpers/constants/design-system';
import Box from './box'; import Box from './box';
export default {
title: 'Components/UI/Box',
id: __filename,
};
const sizeKnobOptions = [undefined, 0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12]; const sizeKnobOptions = [undefined, 0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12];
const marginSizeKnobOptions = [...sizeKnobOptions, 'auto']; const marginSizeKnobOptions = [...sizeKnobOptions, 'auto'];
export const DefaultStory = () => { export default {
const items = []; title: 'Components/UI/Box',
const size = number( id: __filename,
'size', component: Box,
100, argTypes: {
{ range: true, min: 50, max: 500, step: 10 }, size: {
'children', control: { type: 'range', min: 50, max: 500, step: 10 },
); table: { category: 'children' },
for (let $i = 0; $i < number('items', 1, {}, 'children'); $i++) { defaultValue: 100,
items.push(<img width={size} height={size} src="./images/eth_logo.svg" />); },
items: {
control: 'number',
table: { category: 'children' },
defaultValue: 1,
},
display: {
options: DISPLAY,
control: 'select',
defaultValue: DISPLAY.BLOCK,
table: { category: 'display' },
},
width: {
options: BLOCK_SIZES,
control: 'select',
defaultValue: BLOCK_SIZES.HALF,
table: { category: 'display' },
},
height: {
options: BLOCK_SIZES,
control: 'select',
defaultValue: BLOCK_SIZES.HALF,
table: { category: 'display' },
},
justifyContent: {
options: JUSTIFY_CONTENT,
control: 'select',
defaultValue: JUSTIFY_CONTENT.FLEX_START,
table: { category: 'display' },
},
alignItems: {
options: ALIGN_ITEMS,
control: 'select',
defaultValue: ALIGN_ITEMS.FLEX_START,
table: { category: 'display' },
},
textAlign: {
options: TEXT_ALIGN,
control: 'select',
defaultValue: TEXT_ALIGN.LEFT,
table: { category: 'left' },
},
margin: {
options: marginSizeKnobOptions,
control: 'select',
table: { category: 'margin' },
},
marginTop: {
options: marginSizeKnobOptions,
control: 'select',
table: { category: 'margin' },
},
marginRight: {
options: marginSizeKnobOptions,
control: 'select',
table: { category: 'margin' },
},
marginBottom: {
options: marginSizeKnobOptions,
control: 'select',
table: { category: 'margin' },
},
marginLeft: {
options: marginSizeKnobOptions,
control: 'select',
table: { category: 'margin' },
},
padding: {
options: sizeKnobOptions,
control: 'select',
table: { category: 'padding' },
},
paddingTop: {
options: sizeKnobOptions,
control: 'select',
table: { category: 'padding' },
},
paddingRight: {
options: sizeKnobOptions,
control: 'select',
table: { category: 'padding' },
},
paddingBottom: {
options: sizeKnobOptions,
control: 'select',
table: { category: 'padding' },
},
paddingLeft: {
options: sizeKnobOptions,
control: 'select',
table: { category: 'padding' },
},
borderStyle: {
options: BORDER_STYLE,
control: 'select',
defaultValue: BORDER_STYLE.DASHED,
table: { category: 'border' },
},
borderWidth: {
options: sizeKnobOptions,
control: 'number',
defaultValue: 1,
table: { category: 'border' },
},
borderColor: {
options: COLORS,
control: 'select',
defaultValue: COLORS.BLACK,
table: { category: 'border' },
},
backgroundColor: {
options: COLORS,
defaultValue: COLORS.WHITE,
control: 'select',
table: { category: 'background' },
},
},
};
export const DefaultStory = (args) => {
const { items, size, ...rest } = args;
const children = [];
for (let $i = 0; $i < items; $i++) {
children.push(
<img width={size} height={size} src="./images/eth_logo.svg" />,
);
} }
return ( return <Box {...rest}>{children}</Box>;
<Box
display={select('display', DISPLAY, DISPLAY.BLOCK, 'display')}
width={select('width', BLOCK_SIZES, BLOCK_SIZES.HALF, 'display')}
height={select('height', BLOCK_SIZES, BLOCK_SIZES.HALF, 'display')}
justifyContent={select(
'justifyContent',
JUSTIFY_CONTENT,
undefined,
'display',
)}
textAlign={select('textAlign', TEXT_ALIGN, undefined, 'left')}
alignItems={select('alignItems', ALIGN_ITEMS, undefined, 'display')}
margin={select('margin', marginSizeKnobOptions, undefined, 'margin')}
marginTop={select(
'marginTop',
marginSizeKnobOptions,
undefined,
'margin',
)}
marginRight={select(
'marginRight',
marginSizeKnobOptions,
undefined,
'margin',
)}
marginBottom={select(
'marginBottom',
marginSizeKnobOptions,
undefined,
'margin',
)}
marginLeft={select(
'marginLeft',
marginSizeKnobOptions,
undefined,
'margin',
)}
padding={select('padding', sizeKnobOptions, undefined, 'padding')}
paddingTop={select('paddingTop', sizeKnobOptions, undefined, 'padding')}
paddingRight={select(
'paddingRight',
sizeKnobOptions,
undefined,
'padding',
)}
paddingBottom={select(
'paddingBottom',
sizeKnobOptions,
undefined,
'padding',
)}
paddingLeft={select('paddingLeft', sizeKnobOptions, undefined, 'padding')}
borderStyle={select(
'borderStyle',
BORDER_STYLE,
BORDER_STYLE.DASHED,
'border',
)}
borderWidth={number('borderWidth', 1, sizeKnobOptions, 'border')}
borderColor={select('borderColor', COLORS, COLORS.BLACK, 'border')}
backgroundColor={select(
'backgroundColor',
COLORS,
COLORS.WHITE,
'background',
)}
>
{items}
</Box>
);
}; };
DefaultStory.storyName = 'Default'; DefaultStory.storyName = 'Default';