mirror of
https://github.com/kremalicious/metamask-extension.git
synced 2024-12-05 23:44:56 +01:00
cda3e3e4c0
* Adding Label component * doc fixes * Adding label wrapping input
113 lines
2.3 KiB
JavaScript
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,
|
|
};
|