1
0
mirror of https://github.com/kremalicious/metamask-extension.git synced 2024-12-05 07:24:56 +01:00
metamask-extension/ui/components/component-library/label/label.stories.js
George Marshall cda3e3e4c0
Adding Label component (#16203)
* Adding Label component

* doc fixes

* Adding label wrapping input
2022-11-03 10:09:54 -07:00

113 lines
2.3 KiB
JavaScript

import React, { useState } from 'react';
import {
DISPLAY,
FLEX_DIRECTION,
COLORS,
SIZES,
ALIGN_ITEMS,
} from '../../../helpers/constants/design-system';
import Box from '../../ui/box';
import { Icon, ICON_NAMES } from '../icon';
import { TextFieldBase } from '../text-field-base';
import { Label } from './label';
import README from './README.mdx';
export default {
title: 'Components/ComponentLibrary/Label',
id: __filename,
component: Label,
parameters: {
docs: {
page: README,
},
},
argTypes: {
htmlFor: {
control: 'text',
},
required: {
control: 'boolean',
},
disabled: {
control: 'boolean',
},
children: {
control: 'text',
},
className: {
control: 'text',
},
},
args: {
children: 'Label',
},
};
const Template = (args) => <Label {...args} />;
export const DefaultStory = Template.bind({});
DefaultStory.storyName = 'Default';
export const Children = (args) => (
<Box
display={DISPLAY.INLINE_FLEX}
flexDirection={FLEX_DIRECTION.COLUMN}
gap={2}
>
<Label {...args}>Plain text</Label>
<Label {...args} display={DISPLAY.FLEX} alignItems={ALIGN_ITEMS.FLEX_START}>
Text and icon
<Icon
color={COLORS.ICON_ALTERNATIVE}
name={ICON_NAMES.INFO_FILLED}
size={SIZES.AUTO}
/>
</Label>
<Label
{...args}
display={DISPLAY.INLINE_FLEX}
flexDirection={FLEX_DIRECTION.COLUMN}
alignItems={ALIGN_ITEMS.FLEX_START}
>
Label that wraps an input
{/* TODO: replace with TextField component */}
<TextFieldBase placeholder="Click label to focus" />
</Label>
</Box>
);
export const HtmlFor = (args) => {
const [value, setValue] = useState('');
const handleOnChange = (e) => {
setValue(e.target.value);
};
return (
<Box display={DISPLAY.INLINE_FLEX} flexDirection={FLEX_DIRECTION.COLUMN}>
<Label {...args} />
<TextFieldBase
id="add-network"
value={value}
onChange={handleOnChange}
placeholder="Enter network name"
/>
</Box>
);
};
HtmlFor.args = {
children: 'Network name',
htmlFor: 'add-network',
};
export const Required = Template.bind({});
Required.args = {
required: true,
};
export const Disabled = Template.bind({});
Disabled.args = {
disabled: true,
};