1
0
mirror of https://github.com/kremalicious/metamask-extension.git synced 2024-12-05 23:44:56 +01:00
metamask-extension/ui/components/component-library/text-field-base/text-field-base.stories.js
George Marshall 67e0b60dcf
Update TextFieldBase to include InputComponent prop (#16422)
* Update TextFieldBase to include InputComponent

* Updating docs

* Adding test

* Update to docs

* Lint fixes

* Small doc fixe to remove some unneded spaces
2022-11-09 16:33:20 -08:00

466 lines
9.9 KiB
JavaScript

import React, { useState, useRef } from 'react';
import {
SIZES,
DISPLAY,
COLORS,
FLEX_DIRECTION,
ALIGN_ITEMS,
TEXT,
} from '../../../helpers/constants/design-system';
import Box from '../../ui/box/box';
import { Icon, ICON_NAMES } from '../icon';
import { AvatarToken } from '../avatar-token';
import { AvatarAccount } from '../avatar-account';
import { Text } from '../text';
import {
TEXT_FIELD_BASE_SIZES,
TEXT_FIELD_BASE_TYPES,
} from './text-field-base.constants';
import { TextFieldBase } from './text-field-base';
import README from './README.mdx';
const marginSizeControlOptions = [
undefined,
0,
1,
2,
3,
4,
5,
6,
7,
8,
9,
10,
11,
12,
'auto',
];
export default {
title: 'Components/ComponentLibrary/TextFieldBase',
id: __filename,
component: TextFieldBase,
parameters: {
docs: {
page: README,
},
},
argTypes: {
autoComplete: {
control: 'boolean',
},
autoFocus: {
control: 'boolean',
},
className: {
control: 'text',
},
defaultValue: {
control: 'text',
},
disabled: {
control: 'boolean',
},
error: {
control: 'boolean',
},
id: {
control: 'text',
},
inputProps: {
control: 'object',
},
leftAccessory: {
control: 'text',
},
maxLength: {
control: 'number',
},
name: {
control: 'text',
},
onBlur: {
action: 'onBlur',
},
onChange: {
action: 'onChange',
},
onClick: {
action: 'onClick',
},
onFocus: {
action: 'onFocus',
},
placeholder: {
control: 'text',
},
readOnly: {
control: 'boolean',
},
required: {
control: 'boolean',
},
rightAccessory: {
control: 'text',
},
size: {
control: 'select',
options: Object.values(TEXT_FIELD_BASE_SIZES),
},
type: {
control: 'select',
options: Object.values(TEXT_FIELD_BASE_TYPES),
},
value: {
control: 'text',
},
marginTop: {
options: marginSizeControlOptions,
control: 'select',
table: { category: 'box props' },
},
marginRight: {
options: marginSizeControlOptions,
control: 'select',
table: { category: 'box props' },
},
marginBottom: {
options: marginSizeControlOptions,
control: 'select',
table: { category: 'box props' },
},
marginLeft: {
options: marginSizeControlOptions,
control: 'select',
table: { category: 'box props' },
},
},
args: {
placeholder: 'Placeholder...',
},
};
const Template = (args) => <TextFieldBase {...args} />;
export const DefaultStory = Template.bind({});
DefaultStory.storyName = 'Default';
export const Size = (args) => {
return (
<Box
display={DISPLAY.INLINE_FLEX}
flexDirection={FLEX_DIRECTION.COLUMN}
gap={4}
>
<TextFieldBase
{...args}
placeholder="SIZES.SM (height: 32px)"
size={SIZES.SM}
/>
<TextFieldBase
{...args}
placeholder="SIZES.MD (height: 40px)"
size={SIZES.MD}
/>
<TextFieldBase
{...args}
placeholder="SIZES.LG (height: 48px)"
size={SIZES.LG}
/>
</Box>
);
};
export const Type = (args) => (
<Box
display={DISPLAY.INLINE_FLEX}
flexDirection={FLEX_DIRECTION.COLUMN}
gap={4}
>
<TextFieldBase {...args} placeholder="Default" />
<TextFieldBase
{...args}
type={TEXT_FIELD_BASE_TYPES.PASSWORD}
placeholder="Password"
/>
<TextFieldBase
{...args}
type={TEXT_FIELD_BASE_TYPES.NUMBER}
placeholder="Number"
/>
</Box>
);
export const Truncate = Template.bind({});
Truncate.args = {
placeholder: 'Truncate',
value: 'Truncated text when truncate and width is set',
truncate: true,
style: { width: 240 },
};
export const LeftAccessoryRightAccessory = (args) => {
const [value, setValue] = useState({
search: '',
address: '',
amount: 1,
accountAddress: '0x514910771af9ca656af840dff83e8264ecf986ca',
});
const handleOnChange = (e) => {
setValue({ ...value, [e.target.name]: e.target.value });
};
const handleTokenPrice = (tokenAmount, priceUSD) => {
return tokenAmount * priceUSD;
};
return (
<Box
display={DISPLAY.INLINE_FLEX}
flexDirection={FLEX_DIRECTION.COLUMN}
gap={4}
>
<TextFieldBase
{...args}
placeholder="Search"
value={value.search}
name="search"
onChange={handleOnChange}
showClear
leftAccessory={
<Icon
color={COLORS.ICON_ALTERNATIVE}
name={ICON_NAMES.SEARCH_FILLED}
/>
}
/>
<TextFieldBase
{...args}
placeholder="Public address (0x), or ENS"
value={value.address}
name="address"
onChange={handleOnChange}
rightAccessory={
<Box
as="button"
display={DISPLAY.FLEX}
style={{ padding: 0 }}
backgroundColor={COLORS.TRANSPARENT}
>
<Icon
color={COLORS.PRIMARY_DEFAULT}
name={ICON_NAMES.SCAN_BARCODE_FILLED}
/>
</Box>
}
/>
<TextFieldBase
{...args}
placeholder="Enter amount"
value={value.amount}
name="amount"
onChange={handleOnChange}
type="number"
truncate
leftAccessory={
<Box
as="button"
style={{ padding: 0 }}
backgroundColor={COLORS.TRANSPARENT}
gap={1}
display={DISPLAY.FLEX}
alignItems={ALIGN_ITEMS.CENTER}
>
<AvatarToken
tokenName="ast"
tokenImageUrl="./AST.png"
size={SIZES.SM}
/>
<Text>AST</Text>
<Icon
name={ICON_NAMES.ARROW_DOWN}
color={COLORS.ICON_DEFAULT}
size={SIZES.SM}
/>
</Box>
}
rightAccessory={
<Text variant={TEXT.BODY_SM} color={COLORS.TEXT_ALTERNATIVE}>
= ${handleTokenPrice(value.amount, 0.11)}
</Text>
}
/>
<TextFieldBase
{...args}
placeholder="Public address (0x), or ENS"
value={value.accountAddress}
name="accountAddress"
onChange={handleOnChange}
truncate
leftAccessory={
value.accountAddress && (
<AvatarAccount size={SIZES.SM} address={value.accountAddress} />
)
}
rightAccessory={
value.accountAddress.length === 42 && (
<Icon
name={ICON_NAMES.CHECK_OUTLINE}
color={COLORS.SUCCESS_DEFAULT}
/>
)
}
/>
</Box>
);
};
export const InputRef = (args) => {
const inputRef = useRef(null);
const [value, setValue] = useState('');
const handleOnClick = () => {
inputRef.current.focus();
};
const handleOnChange = (e) => {
setValue(e.target.value);
};
return (
<>
<TextFieldBase
{...args}
inputRef={inputRef}
value={value}
onChange={handleOnChange}
/>
<Box
as="button"
backgroundColor={COLORS.BACKGROUND_ALTERNATIVE}
color={COLORS.TEXT_DEFAULT}
borderColor={COLORS.BORDER_DEFAULT}
borderRadius={SIZES.XL}
marginLeft={1}
paddingLeft={2}
paddingRight={2}
onClick={handleOnClick}
>
Edit
</Box>
</>
);
};
const CustomInputComponent = ({
as,
autoComplete,
autoFocus,
defaultValue,
disabled,
focused,
id,
maxLength,
name,
onBlur,
onChange,
onFocus,
padding,
paddingLeft,
paddingRight,
placeholder,
readOnly,
ref,
required,
value,
variant,
type,
className,
'aria-invalid': ariaInvalid,
...props
}) => {
return (
<Box
display={DISPLAY.FLEX}
flexDirection={FLEX_DIRECTION.COLUMN}
{...{ padding, paddingLeft, paddingRight, ...props }}
>
<Box display={DISPLAY.INLINE_FLEX}>
<Text
style={{ padding: 0 }}
aria-invalid={ariaInvalid}
{...{
as,
className,
autoComplete,
autoFocus,
defaultValue,
disabled,
focused,
id,
maxLength,
name,
onBlur,
onChange,
onFocus,
placeholder,
readOnly,
ref,
required,
value,
variant,
type,
}}
/>
<Text variant={TEXT.BODY_XS} color={COLORS.TEXT_ALTERNATIVE}>
GoerliETH
</Text>
</Box>
<Text variant={TEXT.BODY_XS}>No conversion rate available</Text>
</Box>
);
};
CustomInputComponent.propTypes = { ...TextFieldBase.propTypes };
export const InputComponent = (args) => (
<TextFieldBase
{...args}
placeholder="0"
type="number"
size={SIZES.LG}
InputComponent={CustomInputComponent}
leftAccessory={
<Icon color={COLORS.ICON_ALTERNATIVE} name={ICON_NAMES.WALLET_FILLED} />
}
/>
);
export const AutoComplete = Template.bind({});
AutoComplete.args = {
autoComplete: true,
type: 'password',
placeholder: 'Enter password',
};
export const AutoFocus = Template.bind({});
AutoFocus.args = { autoFocus: true };
export const DefaultValue = Template.bind({});
DefaultValue.args = { defaultValue: 'Default value' };
export const Disabled = Template.bind({});
Disabled.args = { disabled: true };
export const ErrorStory = Template.bind({});
ErrorStory.args = { error: true };
ErrorStory.storyName = 'Error';
export const MaxLength = Template.bind({});
MaxLength.args = { maxLength: 10, placeholder: 'Max length 10' };
export const ReadOnly = Template.bind({});
ReadOnly.args = { readOnly: true, value: 'Read only' };
export const Required = Template.bind({});
Required.args = { required: true, placeholder: 'Required' };