mirror of
https://github.com/kremalicious/metamask-extension.git
synced 2024-12-04 23:14:56 +01:00
276 lines
6.0 KiB
JavaScript
276 lines
6.0 KiB
JavaScript
import React from 'react';
|
|
import {
|
|
COLORS,
|
|
DISPLAY,
|
|
BACKGROUND_COLORS,
|
|
BORDER_COLORS,
|
|
FONT_WEIGHT,
|
|
FONT_STYLE,
|
|
TEXT_COLORS,
|
|
TEXT_ALIGN,
|
|
TEXT,
|
|
OVERFLOW_WRAP,
|
|
TEXT_TRANSFORM,
|
|
FRACTIONS,
|
|
} from '../../../helpers/constants/design-system';
|
|
|
|
import Box from '../../ui/box';
|
|
import { ValidTags, Text } from './text';
|
|
|
|
import README from './README.mdx';
|
|
|
|
const sizeKnobOptions = [0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12];
|
|
const marginSizeKnobOptions = [...sizeKnobOptions, 'auto'];
|
|
|
|
export default {
|
|
title: 'Components/ComponentLibrary/Text',
|
|
id: __filename,
|
|
parameters: {
|
|
docs: {
|
|
page: README,
|
|
},
|
|
},
|
|
argTypes: {
|
|
variant: {
|
|
control: { type: 'select' },
|
|
options: Object.values(TEXT),
|
|
},
|
|
color: {
|
|
control: { type: 'select' },
|
|
options: Object.values(TEXT_COLORS),
|
|
},
|
|
fontWeight: {
|
|
control: { type: 'select' },
|
|
options: Object.values(FONT_WEIGHT),
|
|
},
|
|
fontStyle: {
|
|
control: { type: 'select' },
|
|
options: Object.values(FONT_STYLE),
|
|
},
|
|
textTransform: {
|
|
control: { type: 'select' },
|
|
options: Object.values(TEXT_TRANSFORM),
|
|
},
|
|
align: {
|
|
control: { type: 'select' },
|
|
options: Object.values(TEXT_ALIGN),
|
|
},
|
|
overflowWrap: {
|
|
control: { type: 'select' },
|
|
options: Object.values(OVERFLOW_WRAP),
|
|
},
|
|
ellipsis: {
|
|
control: { type: 'boolean' },
|
|
},
|
|
as: {
|
|
control: { type: 'select' },
|
|
options: ValidTags,
|
|
},
|
|
className: {
|
|
control: { type: 'text' },
|
|
},
|
|
children: {
|
|
control: { type: 'text' },
|
|
},
|
|
display: {
|
|
options: Object.values(DISPLAY),
|
|
control: 'select',
|
|
table: { category: 'box props' },
|
|
},
|
|
backgroundColor: {
|
|
options: Object.values(BACKGROUND_COLORS),
|
|
control: 'select',
|
|
table: { category: 'box props' },
|
|
},
|
|
borderColor: {
|
|
options: Object.values(BORDER_COLORS),
|
|
control: 'select',
|
|
table: { category: 'box props' },
|
|
},
|
|
padding: {
|
|
options: sizeKnobOptions,
|
|
control: 'select',
|
|
table: { category: 'box props' },
|
|
},
|
|
margin: {
|
|
options: marginSizeKnobOptions,
|
|
control: 'select',
|
|
table: { category: 'box props' },
|
|
},
|
|
marginTop: {
|
|
options: marginSizeKnobOptions,
|
|
control: 'select',
|
|
table: { category: 'box props' },
|
|
},
|
|
marginRight: {
|
|
options: marginSizeKnobOptions,
|
|
control: 'select',
|
|
table: { category: 'box props' },
|
|
},
|
|
marginBottom: {
|
|
options: marginSizeKnobOptions,
|
|
control: 'select',
|
|
table: { category: 'box props' },
|
|
},
|
|
marginLeft: {
|
|
options: marginSizeKnobOptions,
|
|
control: 'select',
|
|
table: { category: 'box props' },
|
|
},
|
|
},
|
|
};
|
|
|
|
function renderBackgroundColor(color) {
|
|
let bgColor;
|
|
switch (color) {
|
|
case COLORS.OVERLAY_INVERSE:
|
|
bgColor = COLORS.OVERLAY_DEFAULT;
|
|
break;
|
|
case COLORS.PRIMARY_INVERSE:
|
|
bgColor = COLORS.PRIMARY_DEFAULT;
|
|
break;
|
|
case COLORS.ERROR_INVERSE:
|
|
bgColor = COLORS.ERROR_DEFAULT;
|
|
break;
|
|
case COLORS.WARNING_INVERSE:
|
|
bgColor = COLORS.WARNING_DEFAULT;
|
|
break;
|
|
case COLORS.SUCCESS_INVERSE:
|
|
bgColor = COLORS.SUCCESS_DEFAULT;
|
|
break;
|
|
case COLORS.INFO_INVERSE:
|
|
bgColor = COLORS.INFO_DEFAULT;
|
|
break;
|
|
default:
|
|
bgColor = null;
|
|
break;
|
|
}
|
|
|
|
return bgColor;
|
|
}
|
|
|
|
export const DefaultStory = (args) => <Text {...args}>{args.children}</Text>;
|
|
|
|
DefaultStory.storyName = 'Default';
|
|
|
|
DefaultStory.args = {
|
|
children: 'The quick orange fox jumped over the lazy dog.',
|
|
};
|
|
|
|
export const Variant = (args) => (
|
|
<>
|
|
{Object.values(TEXT).map((variant) => (
|
|
<Text {...args} variant={variant} key={variant}>
|
|
{args.children || variant}
|
|
</Text>
|
|
))}
|
|
</>
|
|
);
|
|
|
|
export const Color = (args) => {
|
|
// Index of last valid color in TEXT_COLORS array
|
|
return (
|
|
<>
|
|
{Object.values(TEXT_COLORS).map((color) => {
|
|
return (
|
|
<Text
|
|
{...args}
|
|
backgroundColor={renderBackgroundColor(color)}
|
|
color={color}
|
|
key={color}
|
|
>
|
|
{color}
|
|
</Text>
|
|
);
|
|
})}
|
|
</>
|
|
);
|
|
};
|
|
|
|
export const FontWeight = (args) => (
|
|
<>
|
|
{Object.values(FONT_WEIGHT).map((weight) => (
|
|
<Text {...args} fontWeight={weight} key={weight}>
|
|
{weight}
|
|
</Text>
|
|
))}
|
|
</>
|
|
);
|
|
|
|
export const FontStyle = (args) => (
|
|
<>
|
|
{Object.values(FONT_STYLE).map((style) => (
|
|
<Text {...args} fontStyle={style} key={style}>
|
|
{style}
|
|
</Text>
|
|
))}
|
|
</>
|
|
);
|
|
|
|
export const TextTransform = (args) => (
|
|
<>
|
|
{Object.values(TEXT_TRANSFORM).map((transform) => (
|
|
<Text {...args} textTransform={transform} key={transform}>
|
|
{transform}
|
|
</Text>
|
|
))}
|
|
</>
|
|
);
|
|
|
|
export const TextAlign = (args) => (
|
|
<>
|
|
{Object.values(TEXT_ALIGN).map((align) => (
|
|
<Text {...args} textAlign={align} key={align}>
|
|
{align}
|
|
</Text>
|
|
))}
|
|
</>
|
|
);
|
|
|
|
export const OverflowWrap = (args) => (
|
|
<Box
|
|
borderColor={COLORS.WARNING_DEFAULT}
|
|
display={DISPLAY.BLOCK}
|
|
width={FRACTIONS.ONE_THIRD}
|
|
>
|
|
<Text {...args} overflowWrap={OVERFLOW_WRAP.NORMAL}>
|
|
{OVERFLOW_WRAP.NORMAL}: 0x39013f961c378f02c2b82a6e1d31e9812786fd9d
|
|
</Text>
|
|
<Text {...args} overflowWrap={OVERFLOW_WRAP.BREAK_WORD}>
|
|
{OVERFLOW_WRAP.BREAK_WORD}: 0x39013f961c378f02c2b82a6e1d31e9812786fd9d
|
|
</Text>
|
|
</Box>
|
|
);
|
|
|
|
export const Ellipsis = (args) => (
|
|
<Box
|
|
borderColor={COLORS.PRIMARY_DEFAULT}
|
|
display={DISPLAY.BLOCK}
|
|
width={FRACTIONS.ONE_THIRD}
|
|
>
|
|
<Text {...args} ellipsis>
|
|
Ellipsis: 0x39013f961c378f02c2b82a6e1d31e9812786fd9d
|
|
</Text>
|
|
<Text {...args}>
|
|
No Ellipsis: 0x39013f961c378f02c2b82a6e1d31e9812786fd9d
|
|
</Text>
|
|
</Box>
|
|
);
|
|
|
|
export const As = (args) => (
|
|
<>
|
|
{ValidTags.map((tag) => {
|
|
if (tag === 'input') {
|
|
return <Text key={tag} {...args} as={tag} placeholder={tag} />;
|
|
}
|
|
return (
|
|
<div key={tag}>
|
|
<Text {...args} as={tag}>
|
|
{tag}
|
|
</Text>
|
|
</div>
|
|
);
|
|
})}
|
|
</>
|
|
);
|