1
0
mirror of https://github.com/kremalicious/metamask-extension.git synced 2024-12-04 23:14:56 +01:00
metamask-extension/ui/components/component-library/text/text.stories.js
2022-10-19 13:09:38 -05:00

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>
);
})}
</>
);