m/metamask-extension
1
0
Fork 0
mirror of https://github.com/kremalicious/metamask-extension.git synced 2024-12-23 09:52:26 +01:00
Code

fix broken stories and readme from TS update (#17703)

Browse Source
This commit is contained in:
Garrett Bear 2023-02-14 09:33:04 -08:00 committed by GitHub
parent 3814616c7a
commit ec870cebc6
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
34 changed files with 195 additions and 180 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

6
ui/components/component-library/avatar-account/README.mdx
View File

@ -26,7 +26,7 @@ component props
Use the `size` prop and the `Size` object from `./ui/helpers/constants/design-system.js` to change the size of `AvatarAccount` Use the `size` prop and the `Size` object from `./ui/helpers/constants/design-system.js` to change the size of `AvatarAccount`
Optional: `AVATAR_ACCOUNT_SIZES` from `./ui/components/component-library` object can be used instead of `SIZES` Optional: `AVATAR_ACCOUNT_SIZES` from `./ui/components/component-library` object can be used instead of `Size`
Possible sizes include: Possible sizes include:
@ -36,10 +36,10 @@ Possible sizes include:
- `Size.LG` 40px - `Size.LG` 40px
- `Size.XL` 48px - `Size.XL` 48px
Defaults to `SIZES.MD` Defaults to `Size.MD`
<Canvas> <Canvas>
<Story id="components-componentlibrary-avataraccount--size" /> <Story id="components-componentlibrary-avataraccount--size-story" />
</Canvas> </Canvas>
```jsx ```jsx

4
ui/components/component-library/avatar-base/avatar-base.js
View File

@ -44,12 +44,12 @@ AvatarBase.propTypes = {
children: PropTypes.node, children: PropTypes.node,
/** /**
* The background color of the AvatarBase * The background color of the AvatarBase
* Defaults to COLORS.BACKGROUND_ALTERNATIVE * Defaults to Color.backgroundAlternative
*/ */
backgroundColor: Box.propTypes.backgroundColor, backgroundColor: Box.propTypes.backgroundColor,
/** /**
* The background color of the AvatarBase * The background color of the AvatarBase
* Defaults to COLORS.BORDER_DEFAULT * Defaults to Color.borderDefault
*/ */
borderColor: Box.propTypes.borderColor, borderColor: Box.propTypes.borderColor,
/** /**

4
ui/components/component-library/avatar-favicon/README.mdx
View File

@ -37,10 +37,10 @@ Possible sizes include:
- `Size.LG` 40px - `Size.LG` 40px
- `Size.XL` 48px - `Size.XL` 48px
Defaults to `SIZES.MD` Defaults to `Size.MD`
<Canvas> <Canvas>
<Story id="components-componentlibrary-avatarfavicon--size" /> <Story id="components-componentlibrary-avatarfavicon--size-story" />
</Canvas> </Canvas>
```jsx ```jsx

2
ui/components/component-library/avatar-favicon/avatar-favicon.js
View File

@ -71,7 +71,7 @@ AvatarFavicon.propTypes = {
size: PropTypes.oneOf(Object.values(AVATAR_FAVICON_SIZES)), size: PropTypes.oneOf(Object.values(AVATAR_FAVICON_SIZES)),
/** /**
* The border color of the AvatarFavicon * The border color of the AvatarFavicon
* Defaults to COLORS.TRANSPARENT * Defaults to Color.transparent
*/ */
borderColor: Box.propTypes.borderColor, borderColor: Box.propTypes.borderColor,
/** /**

4
ui/components/component-library/avatar-favicon/avatar-favicon.stories.js
View File

@ -28,6 +28,9 @@ export default {
src: { src: {
control: 'text', control: 'text',
}, },
name: {
control: 'text',
},
borderColor: { borderColor: {
options: Object.values(BorderColor), options: Object.values(BorderColor),
control: 'select', control: 'select',
@ -36,6 +39,7 @@ export default {
args: { args: {
src: 'https://uniswap.org/favicon.ico', src: 'https://uniswap.org/favicon.ico',
size: Size.MD, size: Size.MD,
name: 'Uniswap',
}, },
}; };

6
ui/components/component-library/avatar-icon/README.mdx
View File

@ -24,7 +24,7 @@ component props
### Size ### Size
Use the `size` prop and the `SIZES` object from `./ui/helpers/constants/design-system.js` to change the size of `AvatarIcon` Use the `size` prop and the `Size` object from `./ui/helpers/constants/design-system.js` to change the size of `AvatarIcon`
Optional: `AVATAR_ICON_SIZES` from `./ui/components/component-library` object can be used instead of `Size` Optional: `AVATAR_ICON_SIZES` from `./ui/components/component-library` object can be used instead of `Size`
@ -36,10 +36,10 @@ Possible sizes include:
- `Size.LG` 40px - `Size.LG` 40px
- `Size.XL` 48px - `Size.XL` 48px
Defaults to `SIZES.MD` Defaults to `Size.MD`
<Canvas> <Canvas>
<Story id="components-componentlibrary-avataricon--size" /> <Story id="components-componentlibrary-avataricon--size-story" />
</Canvas> </Canvas>
```jsx ```jsx

2
ui/components/component-library/avatar-icon/avatar-icon.stories.js
View File

@ -106,7 +106,7 @@ export const SizeStory = (args) => (
); );
SizeStory.storyName = 'Size'; SizeStory.storyName = 'Size';
Size.args = { SizeStory.args = {
iconName: ICON_NAMES.CONFIRMATION, iconName: ICON_NAMES.CONFIRMATION,
}; };

2
ui/components/component-library/avatar-network/README.mdx
View File

@ -31,7 +31,7 @@ Possible sizes include:
Defaults to `md` Defaults to `md`
<Canvas> <Canvas>
<Story id="components-componentlibrary-avatarnetwork--size" /> <Story id="components-componentlibrary-avatarnetwork--size-story" />
</Canvas> </Canvas>
```jsx ```jsx

2
ui/components/component-library/avatar-token/README.mdx
View File

@ -31,7 +31,7 @@ Possible sizes include:
Defaults to `md` Defaults to `md`
<Canvas> <Canvas>
<Story id="components-componentlibrary-avatartoken--size" /> <Story id="components-componentlibrary-avatartoken--size-story" />
</Canvas> </Canvas>
```jsx ```jsx

6
ui/components/component-library/avatar-token/avatar-token.js
View File

@ -100,17 +100,17 @@ AvatarToken.propTypes = {
size: PropTypes.oneOf(Object.values(AVATAR_TOKEN_SIZES)), size: PropTypes.oneOf(Object.values(AVATAR_TOKEN_SIZES)),
/** /**
* The background color of the AvatarToken * The background color of the AvatarToken
* Defaults to COLORS.BACKGROUND_ALTERNATIVE * Defaults to Color.backgroundAlternative
*/ */
backgroundColor: Box.propTypes.backgroundColor, backgroundColor: Box.propTypes.backgroundColor,
/** /**
* The background color of the AvatarToken * The background color of the AvatarToken
* Defaults to COLORS.BORDER_DEFAULT * Defaults to Color.borderDefault
*/ */
borderColor: Box.propTypes.borderColor, borderColor: Box.propTypes.borderColor,
/** /**
* The color of the text inside the AvatarToken * The color of the text inside the AvatarToken
* Defaults to COLORS.TEXT_DEFAULT * Defaults to Color.textDefault
*/ */
color: Box.propTypes.color, color: Box.propTypes.color,
/** /**

8
ui/components/component-library/avatar-with-badge/README.mdx
View File

@ -31,7 +31,7 @@ import { AvatarWithBadge } from '../ui/component-library';
badgePosition={AVATAR_WITH_BADGE_POSTIONS.BOTTOM} badgePosition={AVATAR_WITH_BADGE_POSTIONS.BOTTOM}
badge={ badge={
<AvatarNetwork <AvatarNetwork
size={SIZES.XS} size={Size.XS}
name="Arbitrum One" name="Arbitrum One"
src="./images/arbitrum.svg" src="./images/arbitrum.svg"
/> />
@ -39,7 +39,7 @@ import { AvatarWithBadge } from '../ui/component-library';
> >
<AvatarAccount <AvatarAccount
address="0x5CfE73b6021E818B776b421B1c4Db2474086a7e1" address="0x5CfE73b6021E818B776b421B1c4Db2474086a7e1"
size={SIZES.MD} size={Size.MD}
type={TYPES.JAZZICON} type={TYPES.JAZZICON}
/> />
</AvatarWithBadge> </AvatarWithBadge>
@ -48,7 +48,7 @@ import { AvatarWithBadge } from '../ui/component-library';
badgePosition={AVATAR_WITH_BADGE_POSTIONS.TOP} badgePosition={AVATAR_WITH_BADGE_POSTIONS.TOP}
badge={ badge={
<AvatarNetwork <AvatarNetwork
size={SIZES.XS} size={Size.XS}
name="Arbitrum One" name="Arbitrum One"
src="./images/arbitrum.svg" src="./images/arbitrum.svg"
/> />
@ -56,7 +56,7 @@ import { AvatarWithBadge } from '../ui/component-library';
> >
<AvatarAccount <AvatarAccount
address="0x5CfE73b6021E818B776b421B1c4Db2474086a7e1" address="0x5CfE73b6021E818B776b421B1c4Db2474086a7e1"
size={SIZES.MD} size={Size.MD}
type={TYPES.JAZZICON} type={TYPES.JAZZICON}
/> />
</AvatarWithBadge> </AvatarWithBadge>

2
ui/components/component-library/banner-alert/README.mdx
View File

@ -14,7 +14,7 @@ import { BannerBase } from '..';
The `BannerAlert` accepts all props below as well as all [Box](/docs/components-ui-box--default-story#props) component props The `BannerAlert` accepts all props below as well as all [Box](/docs/components-ui-box--default-story#props) component props
<ArgsTable of={Banner} /> <ArgsTable of={BannerAlert} />
The `BannerAlert` accepts all `BannerBase` component props below The `BannerAlert` accepts all `BannerBase` component props below

2
ui/components/component-library/banner-alert/banner-alert.js
View File

@ -90,7 +90,7 @@ BannerAlert.propTypes = {
*/ */
severity: PropTypes.oneOf(Object.values(BANNER_ALERT_SEVERITIES)), severity: PropTypes.oneOf(Object.values(BANNER_ALERT_SEVERITIES)),
/** /**
* Banner accepts all the props from BannerBase * BannerAlert accepts all the props from BannerBase
*/ */
...BannerBase.propTypes, ...BannerBase.propTypes,
}; };

4
ui/components/component-library/banner-base/README.mdx
View File

@ -128,12 +128,12 @@ Use the `startAccessory` prop to add components such as icons or fox image to th
</Canvas> </Canvas>
```jsx ```jsx
import { SIZES } from '../../../helpers/constants/design-system'; import { Size } from '../../../helpers/constants/design-system';
import { BannerBase, Icon, ICON_NAMES } from '../../component-library'; import { BannerBase, Icon, ICON_NAMES } from '../../component-library';
<BannerBase <BannerBase
title="Start accessory demo" title="Start accessory demo"
startAccessory={<Icon name={ICON_NAMES.INFO} size={SIZES.LG} />} startAccessory={<Icon name={ICON_NAMES.INFO} size={Size.LG} />}
> >
The info icon on the left is passed through the startAccessory prop The info icon on the left is passed through the startAccessory prop
</BannerBase>; </BannerBase>;

14
ui/components/component-library/button-base/README.mdx
View File

@ -19,19 +19,19 @@ The `ButtonBase` accepts all props below as well as all [Box](/docs/components-u
### Size ### Size
Use the `size` prop and the `SIZES` object from `./ui/helpers/constants/design-system.js` Use the `size` prop and the `Size` object from `./ui/helpers/constants/design-system.js`
to change the size of `ButtonBase`. Defaults to `SIZES.MD` to change the size of `ButtonBase`. Defaults to `Size.MD`
Optional: `BUTTON_BASE_SIZES` from `./button-base` object can be used instead of `SIZES`. Optional: `BUTTON_BASE_SIZES` from `./button-base` object can be used instead of `Size`.
Possible sizes include: Possible sizes include:
- `SIZES.SM` 32px - `Size.SM` 32px
- `SIZES.MD` 40px - `Size.MD` 40px
- `SIZES.LG` 48px - `Size.LG` 48px
<Canvas> <Canvas>
<Story id="components-componentlibrary-buttonbase--size" /> <Story id="components-componentlibrary-buttonbase--size-story" />
</Canvas> </Canvas>
```jsx ```jsx

32
ui/components/component-library/button-icon/README.mdx
View File

@ -34,10 +34,10 @@ import { ICON_NAMES } from '../icon';
### Size ### Size
Use the `size` prop and the `SIZES` object from `./ui/helpers/constants/design-system.js` Use the `size` prop and the `Size` object from `./ui/helpers/constants/design-system.js`
to change the size of `ButtonIcon`. Defaults to `SIZES.SM` to change the size of `ButtonIcon`. Defaults to `Size.SM`
Optional: `BUTTON_ICON_SIZES` from `./button-icon` object can be used instead of `SIZES`. Optional: `BUTTON_ICON_SIZES` from `./button-icon` object can be used instead of `Size`.
Possible sizes include: Possible sizes include:
@ -45,7 +45,7 @@ Possible sizes include:
- `Size.LG` 32px - `Size.LG` 32px
<Canvas> <Canvas>
<Story id="components-componentlibrary-buttonicon--size" /> <Story id="components-componentlibrary-buttonicon--size-story" />
</Canvas> </Canvas>
```jsx ```jsx
@ -65,11 +65,12 @@ Use the `ariaLabel` prop to set the name of the ButtonIcon for proper accessibil
</Canvas> </Canvas>
```jsx ```jsx
import { ButtonIcon } from '../ui/component-library'; import { ButtonIcon, ICON_NAMES } from '../ui/component-library';
import { Color } from '../../../helpers/constants/design-system';
<ButtonIcon as="button" iconName={ICON_NAMES.CLOSE} ariaLabel="Close"/> <ButtonIcon as="button" iconName={ICON_NAMES.CLOSE} ariaLabel="Close"/>
<ButtonIcon as="a" href="https://metamask.io/" target="_blank" iconName={ICON_NAMES.EXPORT} color={COLORS.PRIMARY_DEFAULT} ariaLabel="Visit MetaMask.io"/> <ButtonIcon as="a" href="https://metamask.io/" target="_blank" iconName={ICON_NAMES.EXPORT} color={Color.primaryDefault} ariaLabel="Visit MetaMask.io"/>
``` ```
### As ### As
@ -86,11 +87,12 @@ Button `as` options:
</Canvas> </Canvas>
```jsx ```jsx
import { ButtonIcon } from '../ui/component-library'; import { ButtonIcon, ICON_NAMES } from '../ui/component-library';
import { Color } from '../../../helpers/constants/design-system';
<ButtonIcon as="button" iconName={ICON_NAMES.CLOSE} ariaLabel="Close"/> <ButtonIcon as="button" iconName={ICON_NAMES.CLOSE} ariaLabel="Close"/>
<ButtonIcon as="a" href="https://metamask.io/" target="_blank" iconName={ICON_NAMES.EXPORT} color={COLORS.PRIMARY_DEFAULT} ariaLabel="Visit MetaMask.io"/> <ButtonIcon as="a" href="https://metamask.io/" target="_blank" iconName={ICON_NAMES.EXPORT} color={Color.primaryDefault} ariaLabel="Visit MetaMask.io"/>
``` ```
### Href ### Href
@ -102,31 +104,33 @@ When an `href` prop is passed it will change the element to an anchor(`a`) tag.
</Canvas> </Canvas>
```jsx ```jsx
import { ButtonIcon } from '../ui/component-library'; import { ButtonIcon, ICON_NAMES } from '../ui/component-library';
import { Color } from '../../../helpers/constants/design-system';
<ButtonIcon <ButtonIcon
href="https://metamask.io/" href="https://metamask.io/"
target="_blank" target="_blank"
iconName={ICON_NAMES.EXPORT} iconName={ICON_NAMES.EXPORT}
color={COLORS.PRIMARY_DEFAULT} color={Color.primaryDefault}
ariaLabel="Visit MetaMask.io" ariaLabel="Visit MetaMask.io"
/>; />;
``` ```
### Color ### Color
Use the `color` prop and the `COLORS` object to change the color of the `ButtonIcon`. Defaults to `COLORS.ICON_DEFAULT`. Use the `color` prop and the `Color` object to change the color of the `ButtonIcon`. Defaults to `Color.iconDefault`.
<Canvas> <Canvas>
<Story id="components-componentlibrary-buttonicon--color" /> <Story id="components-componentlibrary-buttonicon--color-story" />
</Canvas> </Canvas>
```jsx ```jsx
import { ButtonIcon } from '../ui/component-library'; import { ButtonIcon, ICON_NAMES } from '../ui/component-library';
import { Color } from '../../../helpers/constants/design-system';
<ButtonIcon <ButtonIcon
iconName={ICON_NAMES.EXPORT} iconName={ICON_NAMES.EXPORT}
color={COLORS.PRIMARY_DEFAULT} color={Color.primaryDefault}
ariaLabel="Visit MetaMask.io" ariaLabel="Visit MetaMask.io"
/>; />;
``` ```

24
ui/components/component-library/button-link/README.mdx
View File

@ -23,9 +23,9 @@ The `ButtonLink` accepts all [ButtonBase](/docs/components-componentlibrary-butt
### Size ### Size
Use the `size` prop and the `Size` object from `./ui/helpers/constants/design-system.js` to change the size of `ButtonLink`. Defaults to `SIZES.AUTO`. Use the `size` prop and the `Size` object from `./ui/helpers/constants/design-system.js` to change the size of `ButtonLink`. Defaults to `Size.auto`.
Optional: `BUTTON_LINK_SIZES` from `../../component-library` object can be used instead of `SIZES` Optional: `BUTTON_LINK_SIZES` from `../../component-library` object can be used instead of `Size`
Possible sizes include: Possible sizes include:
@ -36,7 +36,7 @@ Possible sizes include:
- `Size.inherit` inherits the font-size of the parent element. Used for inline links in paragraphs. - `Size.inherit` inherits the font-size of the parent element. Used for inline links in paragraphs.
<Canvas> <Canvas>
<Story id="components-componentlibrary-buttonlink--size" /> <Story id="components-componentlibrary-buttonlink--size-story" />
</Canvas> </Canvas>
```jsx ```jsx
@ -57,18 +57,18 @@ import { ButtonLink, Text, TextVariant } from '../../component-library';
</ButtonLink> </ButtonLink>
<Text variant={TextVariant.bodyLgMedium}> <Text variant={TextVariant.bodyLgMedium}>
Inherits the font-size of the parent element. <ButtonLink size={SIZES.INHERIT}>Learn more</ButtonLink> Inherits the font-size of the parent element. <ButtonLink size={Size.inherit}>Learn more</ButtonLink>
</Text> </Text>
<Text variant={TextVariant.bodyMd}> <Text variant={TextVariant.bodyMd}>
Inherits the font-size of the parent element. <ButtonLink size={SIZES.INHERIT}>Learn more</ButtonLink> Inherits the font-size of the parent element. <ButtonLink size={Size.inherit}>Learn more</ButtonLink>
</Text> </Text>
<Text variant={TextVariant.bodySm}> <Text variant={TextVariant.bodySm}>
Inherits the font-size of the parent element. <ButtonLink size={SIZES.INHERIT}>Learn more</ButtonLink> Inherits the font-size of the parent element. <ButtonLink size={Size.inherit}>Learn more</ButtonLink>
</Text> </Text>
<Text variant={TextVariant.bodyXs}> <Text variant={TextVariant.bodyXs}>
Inherits the font-size of the parent element and example with textProps override for a success color. Inherits the font-size of the parent element and example with textProps override for a success color.
<ButtonLink size={Size.INHERIT}>Learn more</ButtonLink> <ButtonLink size={Size.inherit}>Learn more</ButtonLink>
</Text> </Text>
``` ```
@ -103,7 +103,7 @@ import { ButtonLink } from '../../component-library';
### Hit area ### Hit area
The default hit area for `ButtonLink` is the width of the text and height based on the `size` prop which is set to `SIZES.AUTO` by default. There may be times when you want to increase the hit area of the `ButtonLink`. To do this you can use the `Box` props `paddingLeft` and `paddingRight`. Or alternatively you can use the `block` prop which sets the width to 100%. The default hit area for `ButtonLink` is the width of the text and height based on the `size` prop which is set to `Size.auto` by default. There may be times when you want to increase the hit area of the `ButtonLink`. To do this you can use the `Box` props `paddingLeft` and `paddingRight`. Or alternatively you can use the `block` prop which sets the width to 100%.
<Canvas> <Canvas>
<Story id="components-componentlibrary-buttonlink--hit-area" /> <Story id="components-componentlibrary-buttonlink--hit-area" />
@ -115,16 +115,16 @@ import { ButtonLink } from '../../component-library';
<ButtonLink paddingLeft={4} paddingRight={4}> <ButtonLink paddingLeft={4} paddingRight={4}>
Auto (default) Auto (default)
</ButtonLink> </ButtonLink>
<ButtonLink size={SIZES.SM} paddingLeft={4} paddingRight={4}> <ButtonLink size={Size.SM} paddingLeft={4} paddingRight={4}>
Small Small
</ButtonLink> </ButtonLink>
<ButtonLink size={SIZES.MD} paddingLeft={4} paddingRight={4}> <ButtonLink size={Size.MD} paddingLeft={4} paddingRight={4}>
Medium Medium
</ButtonLink> </ButtonLink>
<ButtonLink size={SIZES.LG} paddingLeft={4} paddingRight={4}> <ButtonLink size={Size.LG} paddingLeft={4} paddingRight={4}>
Large Large
</ButtonLink> </ButtonLink>
<ButtonLink size={SIZES.LG} block> <ButtonLink size={Size.LG} block>
Large block Large block
</ButtonLink> </ButtonLink>
``` ```

12
ui/components/component-library/button-primary/README.mdx
View File

@ -18,18 +18,18 @@ The `ButtonPrimary` accepts all props below as well as all [Box](/docs/component
### Size ### Size
Use the `size` prop and the `SIZES` object from `./ui/helpers/constants/design-system.js` to change the size of `ButtonPrimary`. Defaults to `SIZES.MD` Use the `size` prop and the `Size` object from `./ui/helpers/constants/design-system.js` to change the size of `ButtonPrimary`. Defaults to `Size.MD`
Optional: `BUTTON_SIZES` from `./button-base` object can be used instead of `SIZES`. Optional: `BUTTON_SIZES` from `./button-base` object can be used instead of `Size`.
Possible sizes include: Possible sizes include:
- `SIZES.SM` 32px - `Size.SM` 32px
- `SIZES.MD` 40px - `Size.MD` 40px
- `SIZES.LG` 48px - `Size.LG` 48px
<Canvas> <Canvas>
<Story id="components-componentlibrary-buttonprimary--size" /> <Story id="components-componentlibrary-buttonprimary--size-story" />
</Canvas> </Canvas>
```jsx ```jsx

12
ui/components/component-library/button-secondary/README.mdx
View File

@ -18,18 +18,18 @@ The `ButtonSecondary` accepts all props below as well as all [Box](/docs/compone
### Size ### Size
Use the `size` prop and the `SIZES` object from `./ui/helpers/constants/design-system.js` to change the size of `ButtonSecondary`. Defaults to `SIZES.MD` Use the `size` prop and the `Size` object from `./ui/helpers/constants/design-system.js` to change the size of `ButtonSecondary`. Defaults to `Size.MD`
Optional: `BUTTON_SIZES` from `./button-base` object can be used instead of `SIZES`. Optional: `BUTTON_SIZES` from `./button-base` object can be used instead of `Size`.
Possible sizes include: Possible sizes include:
- `SIZES.SM` 32px - `Size.SM` 32px
- `SIZES.MD` 40px - `Size.MD` 40px
- `SIZES.LG` 48px - `Size.LG` 48px
<Canvas> <Canvas>
<Story id="components-componentlibrary-buttonsecondary--size" /> <Story id="components-componentlibrary-buttonsecondary--size-story" />
</Canvas> </Canvas>
```jsx ```jsx

18
ui/components/component-library/button/README.mdx
View File

@ -49,30 +49,30 @@ import { Button, BUTTON_TYPES } from '../ui/component-library/button';
### Size ### Size
Use the `size` prop and the `Size` object from `./ui/helpers/constants/design-system.js` to change the size of `Button`. Defaults to `SIZES.MD` Use the `size` prop and the `Size` object from `./ui/helpers/constants/design-system.js` to change the size of `Button`. Defaults to `Size.MD`
Optional: `BUTTON_SIZES` from `./button` object can be used instead of `SIZES`. Optional: `BUTTON_SIZES` from `./button` object can be used instead of `Size`.
Possible sizes include: Possible sizes include:
- `Size.inherit` inherits the font-size of the parent element. For [ButtonLink](/docs/components-componentlibrary-buttonlink--default-story) uses only - `Size.inherit` inherits the font-size of the parent element. For [ButtonLink](/docs/components-componentlibrary-buttonlink--default-story) uses only
- `Size.auti` inherits auto height, but keeps the same button font-size. For [ButtonLink](/docs/components-componentlibrary-buttonlink--default-story) uses only - `Size.auto` inherits auto height, but keeps the same button font-size. For [ButtonLink](/docs/components-componentlibrary-buttonlink--default-story) uses only
- `Size.SM` 32px - `Size.SM` 32px
- `Size.MD` 40px - `Size.MD` 40px
- `Size.LG` 48px - `Size.LG` 48px
<Canvas> <Canvas>
<Story id="components-componentlibrary-button--size" /> <Story id="components-componentlibrary-button--size-story" />
</Canvas> </Canvas>
```jsx ```jsx
import { SIZES } from '../../../helpers/constants/design-system'; import { Size } from '../../../helpers/constants/design-system';
import { Button } from '../ui/component-library'; import { Button } from '../ui/component-library';
<Button size={SIZES.INHERIT} /> <Button size={Size.inherit} />
<Button size={SIZES.SM} /> <Button size={Size.SM} />
<Button size={SIZES.MD} /> <Button size={Size.MD} />
<Button size={SIZES.LG} /> <Button size={Size.LG} />
``` ```
### Danger ### Danger

4
ui/components/component-library/help-text/README.mdx
View File

@ -62,10 +62,10 @@ import { HelpText } from '../../component-library';
### Color ### Color
It may be useful to change the color of the `HelpText`. Use the `color` prop and the `COLORS` object to change the color of the `HelpText`. Defaults to `COLORS.TEXT_DEFAULT`. It may be useful to change the color of the `HelpText`. Use the `color` prop and the `Color` object to change the color of the `HelpText`. Defaults to `Color.textDefault`.
<Canvas> <Canvas>
<Story id="components-componentlibrary-helptext--color" /> <Story id="components-componentlibrary-helptext--color-story" />
</Canvas> </Canvas>
```jsx ```jsx

2
ui/components/component-library/help-text/help-text.js
View File

@ -36,7 +36,7 @@ HelpText.propTypes = {
error: PropTypes.bool, error: PropTypes.bool,
/** /**
* The color of the HelpText will be overridden if error is true * The color of the HelpText will be overridden if error is true
* Defaults to COLORS.TEXT_DEFAULT * Defaults to Color.textDefault
*/ */
color: PropTypes.oneOf(Object.values(TextColor)), color: PropTypes.oneOf(Object.values(TextColor)),
/** /**

20
ui/components/component-library/icon/README.mdx
View File

@ -38,19 +38,19 @@ import { Icon, ICON_NAMES } from '../../component-library';
### Size ### Size
Use the `size` prop and the `SIZES` object from `./ui/helpers/constants/design-system.js` to change the size of `Icon`. Defaults to `SIZES.SM` Use the `size` prop and the `Size` object from `./ui/helpers/constants/design-system.js` to change the size of `Icon`. Defaults to `Size.SM`
Possible sizes include: Possible sizes include:
- `SIZES.XS` 12px - `Size.XS` 12px
- `SIZES.SM` 16px - `Size.SM` 16px
- `SIZES.MD` 20px - `Size.MD` 20px
- `SIZES.LG` 24px - `Size.LG` 24px
- `SIZES.XL` 32px - `Size.XL` 32px
- `SIZES.INHERIT` inherits the font-size from parent element. This is useful for inline icons in text. - `Size.inherit` inherits the font-size from parent element. This is useful for inline icons in text.
<Canvas> <Canvas>
<Story id="components-componentlibrary-icon--size" /> <Story id="components-componentlibrary-icon--size-story" />
</Canvas> </Canvas>
```jsx ```jsx
@ -70,10 +70,10 @@ import { Icon, ICON_NAMES } from '../../component-library';
### Color ### Color
Use the `color` prop and the `COLORS` object from `./ui/helpers/constants/design-system.js` to change the color of `Icon`. Defaults to `COLORS.INHERIT` which will use the text color of the parent element. This is useful for inline icons. Use the `color` prop and the `Color` object from `./ui/helpers/constants/design-system.js` to change the color of `Icon`. Defaults to `Color.inherit` which will use the text color of the parent element. This is useful for inline icons.
<Canvas> <Canvas>
<Story id="components-componentlibrary-icon--color" /> <Story id="components-componentlibrary-icon--color-story" />
</Canvas> </Canvas>
```jsx ```jsx

1
ui/components/component-library/icon/icon.stories.js
View File

@ -253,7 +253,6 @@ export const SizeStory = (args) => (
gap={1} gap={1}
marginBottom={4} marginBottom={4}
> >
<Icon {...args} size={Size.XXS} />
<Icon {...args} size={Size.XS} /> <Icon {...args} size={Size.XS} />
<Icon {...args} size={Size.SM} /> <Icon {...args} size={Size.SM} />
<Icon {...args} size={Size.MD} /> <Icon {...args} size={Size.MD} />

15
ui/components/component-library/text-field-base/README.mdx
View File

@ -31,7 +31,7 @@ Possible sizes include:
Defaults to `md` Defaults to `md`
<Canvas> <Canvas>
<Story id="components-componentlibrary-textfieldbase--size" /> <Story id="components-componentlibrary-textfieldbase--size-story" />
</Canvas> </Canvas>
```jsx ```jsx
@ -91,14 +91,14 @@ Use the `leftAccessory` and `rightAccessory` props to add components such as ico
</Canvas> </Canvas>
```jsx ```jsx
import { COLORS, SIZES, DISPLAY } from '../../../helpers/constants/design-system'; import { Color, DISPLAY } from '../../../helpers/constants/design-system';
import { ButtonIcon, Icon, ICON_NAMES, TextFieldBase } from '../../component-library'; import { ButtonIcon, Icon, ICON_NAMES, TextFieldBase } from '../../component-library';
<TextFieldBase <TextFieldBase
placeholder="Search" placeholder="Search"
leftAccessory={ leftAccessory={
<Icon <Icon
color={COLORS.ICON_ALTERNATIVE} color={Color.iconAlternative}
name={ICON_NAMES.SEARCH} name={ICON_NAMES.SEARCH}
/> />
} }
@ -110,7 +110,7 @@ import { ButtonIcon, Icon, ICON_NAMES, TextFieldBase } from '../../component-lib
<ButtonIcon <ButtonIcon
iconName={ICON_NAMES.SCAN_BARCODE} iconName={ICON_NAMES.SCAN_BARCODE}
ariaLabel="Scan QR code" ariaLabel="Scan QR code"
iconProps={{ color: COLORS.PRIMARY_DEFAULT }} iconProps={{ color: Color.primaryDefault }}
/> />
} }
/> />
@ -131,7 +131,7 @@ import { ButtonIcon, Icon, ICON_NAMES, TextFieldBase } from '../../component-lib
isAddressValid && ( isAddressValid && (
<Icon <Icon
name={ICON_NAMES.CHECK} name={ICON_NAMES.CHECK}
color={COLORS.SUCCESS_DEFAULT} color={Color.successDefault}
/> />
) )
} }
@ -208,16 +208,17 @@ To function fully the custom component should accept the following props:
```jsx ```jsx
import { TextFieldBase, Icon, ICON_NAMES } from '../../component-library'; import { TextFieldBase, Icon, ICON_NAMES } from '../../component-library';
import { Size } from '../../../helpers/constants/design-system';
// should map the props to the custom input component // should map the props to the custom input component
const CustomInputComponent = () => <div>{/* Custom input component */}</div>; const CustomInputComponent = () => <div>{/* Custom input component */}</div>;
const TextFieldCustomInput = (args) => ( const TextFieldCustomInput = (args) => (
<TextFieldBase <TextFieldBase
size={SIZES.LG} size={Size.LG}
InputComponent={CustomInputComponent} InputComponent={CustomInputComponent}
leftAccessory={ leftAccessory={
<Icon color={COLORS.ICON_ALTERNATIVE} name={ICON_NAMES.WALLET} /> <Icon color={Color.iconAlternative} name={ICON_NAMES.WALLET} />
} }
/> />
); );

10
ui/components/component-library/text-field-search/README.mdx
View File

@ -71,11 +71,7 @@ Use the `clearButtonProps` to access other props of the clear button.
```jsx ```jsx
import React, { useState } from 'react'; import React, { useState } from 'react';
import { import { Color, BorderRadius } from '../../../helpers/constants/design-system';
SIZES,
COLORS,
BORDER_RADIUS,
} from '../../../helpers/constants/design-system';
import { TextFieldSearch } from '../../component-library'; import { TextFieldSearch } from '../../component-library';
@ -94,8 +90,8 @@ const handleOnClear = () => {
onChange={handleOnChange} onChange={handleOnChange}
clearButtonOnClick={handleOnClear} clearButtonOnClick={handleOnClear}
clearButtonProps={{ clearButtonProps={{
backgroundColor: COLORS.BACKGROUND_ALTERNATIVE, backgroundColor: Color.backgroundAlternative,
borderRadius: BORDER_RADIUS.XS, borderRadius: BorderRadius.XS,
'data-testid': 'clear-button', 'data-testid': 'clear-button',
}} }}
/>; />;

10
ui/components/component-library/text-field/README.mdx
View File

@ -67,11 +67,7 @@ Use the `clearButtonProps` to access other props of the clear button.
```jsx ```jsx
import React, { useState } from 'react'; import React, { useState } from 'react';
import { import { Color, BorderRadius } from '../../../helpers/constants/design-system';
SIZES,
COLORS,
BORDER_RADIUS,
} from '../../../helpers/constants/design-system';
import { TextField } from '../../component-library'; import { TextField } from '../../component-library';
@ -92,8 +88,8 @@ const handleOnClear = () => {
showClearButton showClearButton
clearButtonOnClick={handleOnClear} clearButtonOnClick={handleOnClear}
clearButtonProps={{ clearButtonProps={{
backgroundColor: COLORS.BACKGROUND_ALTERNATIVE, backgroundColor: Color.backgroundAlternative,
borderRadius: BORDER_RADIUS.XS, borderRadius: BorderRadius.XS,
'data-testid': 'clear-button', 'data-testid': 'clear-button',
}} }}
/>; />;

118
ui/components/ui/box/README.mdx
View File

@ -14,43 +14,43 @@ Box is a utility component that can be used for layout or as a base for other UI
## Props ## Props
| Name | Description | Default | | Name | Description | Default |
| --------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ------------------ | | ------------------ | ------------------------------------------------------------------------------------------------------------------------- | ------- |
| children | The children of the Box component. If `function` type will render the child as the Box node instead of a child of the Box | - | | children | The children of the Box component. If `function` type will render the child as the Box node instead of a child of the Box | - |
| className | Additional className of the Box component | - | | className | Additional className of the Box component | - |
| margin | 0, 1, 2, 4, 6, 8, 9, 10, 12, 'auto' or array of values [1, 2, 'auto'] for responsive props | - | | margin | 0, 1, 2, 4, 6, 8, 9, 10, 12, 'auto' or array of values [1, 2, 'auto'] for responsive props | - |
| marginTop | 0, 1, 2, 4, 6, 8, 9, 10, 12, 'auto' or array of values for responsive props | - | | marginTop | 0, 1, 2, 4, 6, 8, 9, 10, 12, 'auto' or array of values for responsive props | - |
| marginBottom | 0, 1, 2, 4, 6, 8, 9, 10, 12, 'auto' or array of values for responsive props | - | | marginBottom | 0, 1, 2, 4, 6, 8, 9, 10, 12, 'auto' or array of values for responsive props | - |
| marginRight | 0, 1, 2, 4, 6, 8, 9, 10, 12, 'auto' or array of values for responsive props | - | | marginRight | 0, 1, 2, 4, 6, 8, 9, 10, 12, 'auto' or array of values for responsive props | - |
| marginLeft | 0, 1, 2, 4, 6, 8, 9, 10, 12, 'auto' or array of values for responsive props | - | | marginLeft | 0, 1, 2, 4, 6, 8, 9, 10, 12, 'auto' or array of values for responsive props | - |
| marginInline | 0, 1, 2, 4, 6, 8, 9, 10, 12, 'auto' or array of values for responsive props | - | | marginInline | 0, 1, 2, 4, 6, 8, 9, 10, 12, 'auto' or array of values for responsive props | - |
| marginInlineStart| 0, 1, 2, 4, 6, 8, 9, 10, 12, 'auto' or array of values for responsive props | - | | marginInlineStart | 0, 1, 2, 4, 6, 8, 9, 10, 12, 'auto' or array of values for responsive props | - |
| marginInlineEnd | 0, 1, 2, 4, 6, 8, 9, 10, 12, 'auto' or array of values for responsive props | - | | marginInlineEnd | 0, 1, 2, 4, 6, 8, 9, 10, 12, 'auto' or array of values for responsive props | - |
| padding | 0, 1, 2, 4, 6, 8, 9, 10, 12 or array of numbers [1, 2] for responsive props | - | | padding | 0, 1, 2, 4, 6, 8, 9, 10, 12 or array of numbers [1, 2] for responsive props | - |
| paddingTop | 0, 1, 2, 4, 6, 8, 9, 10, 12 or array of numbers [1, 2] for responsive props | - | | paddingTop | 0, 1, 2, 4, 6, 8, 9, 10, 12 or array of numbers [1, 2] for responsive props | - |
| paddingBottom | 0, 1, 2, 4, 6, 8, 9, 10, 12 or array of numbers [1, 2] for responsive props | - | | paddingBottom | 0, 1, 2, 4, 6, 8, 9, 10, 12 or array of numbers [1, 2] for responsive props | - |
| paddingRight | 0, 1, 2, 4, 6, 8, 9, 10, 12 or array of numbers [1, 2] for responsive props | - | | paddingRight | 0, 1, 2, 4, 6, 8, 9, 10, 12 or array of numbers [1, 2] for responsive props | - |
| paddingLeft | 0, 1, 2, 4, 6, 8, 9, 10, 12 or array of numbers [1, 2] for responsive props | - | | paddingLeft | 0, 1, 2, 4, 6, 8, 9, 10, 12 or array of numbers [1, 2] for responsive props | - |
| paddingInline | 0, 1, 2, 4, 6, 8, 9, 10, 12 or array of numbers [1, 2] for responsive props | - | | paddingInline | 0, 1, 2, 4, 6, 8, 9, 10, 12 or array of numbers [1, 2] for responsive props | - |
| paddingInlineStart | 0, 1, 2, 4, 6, 8, 9, 10, 12 or array of numbers [1, 2] for responsive props | - | | paddingInlineStart | 0, 1, 2, 4, 6, 8, 9, 10, 12 or array of numbers [1, 2] for responsive props | - |
| paddingInlineEnd | 0, 1, 2, 4, 6, 8, 9, 10, 12 or array of numbers [1, 2] for responsive props | - | | paddingInlineEnd | 0, 1, 2, 4, 6, 8, 9, 10, 12 or array of numbers [1, 2] for responsive props | - |
| display | DISPLAY values or array of DISPLAY values for responsive props from [../ui/helpers/constants/design-system.js](https://github.com/MetaMask/metamask-extension/blob/develop/ui/helpers/constants/design-system.js) | - | | display | DISPLAY values or array of DISPLAY values for responsive props from [../ui/helpers/constants/design-system.js](https://github.com/MetaMask/metamask-extension/blob/develop/ui/helpers/constants/design-system.js) | - |
| flexDirection | FLEX_DIRECTION values or array of FLEX_DIRECTION values for responsive props from [../ui/helpers/constants/design-system.js](https://github.com/MetaMask/metamask-extension/blob/develop/ui/helpers/constants/design-system.js) | FLEX_DIRECTION.ROW | | flexDirection | FLEX_DIRECTION values or array of FLEX_DIRECTION values for responsive props from [../ui/helpers/constants/design-system.js](https://github.com/MetaMask/metamask-extension/blob/develop/ui/helpers/constants/design-system.js) | FLEX_DIRECTION.ROW |
| flexWrap | FLEX_WRAP values or array of FLEX_WRAP values for responsive props from [../ui/helpers/constants/design-system.js](https://github.com/MetaMask/metamask-extension/blob/develop/ui/helpers/constants/design-system.js) | - | | flexWrap | FLEX_WRAP values or array of FLEX_WRAP values for responsive props from [../ui/helpers/constants/design-system.js](https://github.com/MetaMask/metamask-extension/blob/develop/ui/helpers/constants/design-system.js) | - |
| alignItems | ALIGN_ITEMS values or array of ALIGN_ITEMS values for responsive props from [../ui/helpers/constants/design-system.js](https://github.com/MetaMask/metamask-extension/blob/develop/ui/helpers/constants/design-system.js) | - | | alignItems | AlignItems values or array of AlignItems values for responsive props from [../ui/helpers/constants/design-system.js](https://github.com/MetaMask/metamask-extension/blob/develop/ui/helpers/constants/design-system.js) | - |
| justifyContent | JUSTIFY_CONTENT values or array of JUSTIFY_CONTENT values from [../ui/helpers/constants/design-system.js](https://github.com/MetaMask/metamask-extension/blob/develop/ui/helpers/constants/design-system.js) | - | | justifyContent | JustifyContent values or array of JustifyContent values from [../ui/helpers/constants/design-system.js](https://github.com/MetaMask/metamask-extension/blob/develop/ui/helpers/constants/design-system.js) | - |
| gap | 0, 1, 2, 4, 6, 8, 9, 10, 12 or array of numbers [1, 2] for responsive props | - | | gap | 0, 1, 2, 4, 6, 8, 9, 10, 12 or array of numbers [1, 2] for responsive props | - |
| textAlign | TEXT_ALIGN values or array of TEXT_ALIGN values for responsive props from [../ui/helpers/constants/design-system.js](https://github.com/MetaMask/metamask-extension/blob/develop/ui/helpers/constants/design-system.js) | - | | textAlign | TEXT_ALIGN values or array of TEXT_ALIGN values for responsive props from [../ui/helpers/constants/design-system.js](https://github.com/MetaMask/metamask-extension/blob/develop/ui/helpers/constants/design-system.js) | - |
| width | BLOCK_SIZES values or array of BLOCK_SIZES values for responsive props from [../ui/helpers/constants/design-system.js](https://github.com/MetaMask/metamask-extension/blob/develop/ui/helpers/constants/design-system.js) | - | | width | BLOCK_SIZES values or array of BLOCK_SIZES values for responsive props from [../ui/helpers/constants/design-system.js](https://github.com/MetaMask/metamask-extension/blob/develop/ui/helpers/constants/design-system.js) | - |
| height | BLOCK_SIZES values or array of BLOCK_SIZES values for responsive props [../ui/helpers/constants/design-system.js](https://github.com/MetaMask/metamask-extension/blob/develop/ui/helpers/constants/design-system.js) | - | | height | BLOCK_SIZES values or array of BLOCK_SIZES values for responsive props [../ui/helpers/constants/design-system.js](https://github.com/MetaMask/metamask-extension/blob/develop/ui/helpers/constants/design-system.js) | - |
| color | Color values or array of Color values for responsive props [../ui/helpers/constants/design-system.js](https://github.com/MetaMask/metamask-extension/blob/develop/ui/helpers/constants/design-system.js) | - | | color | Color values or array of Color values for responsive props [../ui/helpers/constants/design-system.js](https://github.com/MetaMask/metamask-extension/blob/develop/ui/helpers/constants/design-system.js) | - |
| backgroundColor | BackgroundColor values or array of BackgroundColor values for responsive props from [../ui/helpers/constants/design-system.js](https://github.com/MetaMask/metamask-extension/blob/develop/ui/helpers/constants/design-system.js) | - | | backgroundColor | BackgroundColor values or array of BackgroundColor values for responsive props from [../ui/helpers/constants/design-system.js](https://github.com/MetaMask/metamask-extension/blob/develop/ui/helpers/constants/design-system.js) | - |
| borderColor | BorderColor values or array of BorderColor values for responsive props from [../ui/helpers/constants/design-system.js](https://github.com/MetaMask/metamask-extension/blob/develop/ui/helpers/constants/design-system.js) | - | | borderColor | BorderColor values or array of BorderColor values for responsive props from [../ui/helpers/constants/design-system.js](https://github.com/MetaMask/metamask-extension/blob/develop/ui/helpers/constants/design-system.js) | - |
| borderWidth | 0, 1, 2, 4, 6, 8, 9, 10, 12 or array of numbers [1, 2] for responsive props | - | | borderWidth | 0, 1, 2, 4, 6, 8, 9, 10, 12 or array of numbers [1, 2] for responsive props | - |
| borderRadius | BORDER_RADIUS values or array of BORDER_RADIUS values for responsive props from [../ui/helpers/constants/design-system.js](https://github.com/MetaMask/metamask-extension/blob/develop/ui/helpers/constants/design-system.js) | - | | borderRadius | BorderRadius values or array of BorderRadius values for responsive props from [../ui/helpers/constants/design-system.js](https://github.com/MetaMask/metamask-extension/blob/develop/ui/helpers/constants/design-system.js) | - |
| borderStyle | BORDER_STYLE values or array of BORDER_STYLE values for responsive props from [../ui/helpers/constants/design-system.js](https://github.com/MetaMask/metamask-extension/blob/develop/ui/helpers/constants/design-system.js) | - | | borderStyle | BORDER_STYLE values or array of BORDER_STYLE values for responsive props from [../ui/helpers/constants/design-system.js](https://github.com/MetaMask/metamask-extension/blob/develop/ui/helpers/constants/design-system.js) | - |
| as | The polymorphic `as` prop allows you to change the root HTML element of the Box component. Defaults to 'div' | 'div' | | as | The polymorphic `as` prop allows you to change the root HTML element of the Box component. Defaults to 'div' | 'div' |
## Usage ## Usage
@ -145,13 +145,13 @@ import Box from '../ui/box';
### Color ### Color
The `color` prop can be used to set the color of the content in Box component. The `color` prop accepts [responsive props](#responsive-props) in the form of array props. Defaults to `COLORS.TEXT_DEFAULT` The `color` prop can be used to set the color of the content in Box component. The `color` prop accepts [responsive props](#responsive-props) in the form of array props. Defaults to `Color.textDefault`.
<Canvas> <Canvas>
<Story id="components-ui-box--color" /> <Story id="components-ui-box--color-story" />
</Canvas> </Canvas>
Example of importing `COLORS` object with `Box` component Example of importing `TextColor` object with `Box` component
```jsx ```jsx
import { TextColor } from '../../../helpers/constants/design-system'; import { TextColor } from '../../../helpers/constants/design-system';
@ -162,54 +162,65 @@ import Box from '../ui/box';
### Background Color ### Background Color
Use the `backgroundColor` prop along with the `COLORS` object from `ui/helpers/constants/design-system.js` to change background color. The `backgroundColor` prop accepts [responsive props](#responsive-props) in the form of array props. Use the `backgroundColor` prop along with the `Color` or `BackgroundColor` object from `ui/helpers/constants/design-system.js` to change background color. The `backgroundColor` prop accepts [responsive props](#responsive-props) in the form of array props.
<Canvas> <Canvas>
<Story id="components-ui-box--background-color" /> <Story id="components-ui-box--background-color-story" />
</Canvas> </Canvas>
Example of importing `COLORS` object with `Box` component Example of importing `BackgroundColor` object with `Box` component
```jsx ```jsx
import { BackgroundColor, TextColor } from '../../../helpers/constants/design-system'; import {
BackgroundColor,
TextColor,
} from '../../../helpers/constants/design-system';
import Box from '../ui/box'; import Box from '../ui/box';
<Box backgroundColor={BackgroundColor.backgroundDefault}> <Box backgroundColor={BackgroundColor.backgroundDefault}>
<Typography color={TextColor.textDefault}>COLORS.BACKGROUND_DEFAULT</Typography> <Typography color={TextColor.textDefault}>
BackgroundColor.backgroundDefault
</Typography>
</Box>; </Box>;
``` ```
### Border Color ### Border Color
Use the `borderColor` prop along with the `COLORS` object from `ui/helpers/constants/design-system.js` to change border color. The `borderColor` prop accepts [responsive props](#responsive-props) in the form of array props. Use the `borderColor` prop along with the `Color` or `BorderColor` object from `ui/helpers/constants/design-system.js` to change border color. The `borderColor` prop accepts [responsive props](#responsive-props) in the form of array props.
<Canvas> <Canvas>
<Story id="components-ui-box--border-color" /> <Story id="components-ui-box--border-color-story" />
</Canvas> </Canvas>
Example of importing `BorderColor` object with `Box` component Example of importing `BorderColor` object with `Box` component
```jsx ```jsx
import { BackgroundColor, BorderColor, TextColor } from '../../../helpers/constants/design-system'; import {
BackgroundColor,
BorderColor,
TextColor,
} from '../../../helpers/constants/design-system';
import Box from '../ui/box'; import Box from '../ui/box';
<Box <Box
backgroundColor={BackgroundColor.backgroundDefault} backgroundColor={BackgroundColor.backgroundDefault}
borderColor={BorderColor.borderDefault} borderColor={BorderColor.borderDefault}
> >
<Typography color={TextColor.textDefault}>COLORS.BORDER_DEFAULT</Typography> <Typography color={TextColor.textDefault}>
BorderColor.borderDefault
</Typography>
</Box>; </Box>;
``` ```
### Border Radius ### Border Radius
Use the `borderRadius` prop along with the `BORDER_RADIUS` object from `ui/helpers/constants/design-system.js` to change border radius. The `borderRadius` prop accepts [responsive props](#responsive-props) in the form of array props. Use the `borderRadius` prop along with the `BorderRadius` object from `ui/helpers/constants/design-system.js` to change border radius. The `borderRadius` prop accepts [responsive props](#responsive-props) in the form of array props.
<Canvas> <Canvas>
<Story id="components-ui-box--border-radius" /> <Story id="components-ui-box--border-radius-story" />
</Canvas> </Canvas>
Example of importing `BORDER_RADIUS` object with `Box` component Example of importing `BorderRadius` object with `Box` component
```jsx ```jsx
import { BorderRadius } from '../../../helpers/constants/design-system'; import { BorderRadius } from '../../../helpers/constants/design-system';
@ -251,7 +262,10 @@ The box component provides a responsive props api in the form of array props. Ar
</Canvas> </Canvas>
```jsx ```jsx
import { BorderColor, BackgroundColor } from '../../../helpers/constants/design-system'; import {
BorderColor,
BackgroundColor,
} from '../../../helpers/constants/design-system';
import Box from '../ui/box'; import Box from '../ui/box';
<Box <Box

6
ui/components/ui/box/box.stories.js
View File

@ -522,7 +522,7 @@ export const BorderColorStory = () => {
</Box> </Box>
<Box <Box
padding={3} padding={3}
backgroundColor={BackgroundColor.successDefault} backgroundColor={BackgroundColor.successMuted}
borderColor={BorderColor.successDefault} borderColor={BorderColor.successDefault}
borderWidth={2} borderWidth={2}
marginBottom={1} marginBottom={1}
@ -546,7 +546,7 @@ export const BorderColorStory = () => {
}; };
BorderColorStory.storyName = 'BorderColor'; BorderColorStory.storyName = 'BorderColor';
export const BorderRadiusStories = () => { export const BorderRadiusStory = () => {
return ( return (
<> <>
<Box <Box
@ -634,7 +634,7 @@ export const BorderRadiusStories = () => {
</> </>
); );
}; };
BorderRadiusStories.storyName = 'BorderRadius'; BorderRadiusStory.storyName = 'BorderRadius';
export const ResponsiveProps = () => { export const ResponsiveProps = () => {
return ( return (

4
ui/components/ui/card/README.mdx
View File

@ -27,7 +27,7 @@ The Card component has a set of default props that should meet most card use cas
That being said all props can be overwritten if necessary. That being said all props can be overwritten if necessary.
```jsx ```jsx
import { COLORS } from '../../../helpers/constants/design-system'; import { Color } from '../../../helpers/constants/design-system';
// To remove the border // To remove the border
<Card border={false} /> <Card border={false} />
@ -38,5 +38,5 @@ import { COLORS } from '../../../helpers/constants/design-system';
// All padding related props of the Box component will work // All padding related props of the Box component will work
// To change the background color // To change the background color
<Card backgroundColor={COLORS.BACKGROUND_ALTERNATIVE} /> <Card backgroundColor={Color.backgroundAlternative} />
``` ```

2
ui/components/ui/card/card.js
View File

@ -49,7 +49,7 @@ Card.propTypes = {
padding: Box.propTypes.padding, padding: Box.propTypes.padding,
/** /**
* The background color of the card * The background color of the card
* Defaults to COLORS.BACKGROUND_DEFAULT * Defaults to Color.backgroundDefault
*/ */
backgroundColor: Box.propTypes.backgroundColor, backgroundColor: Box.propTypes.backgroundColor,
/** /**

2
ui/components/ui/icon/README.mdx
View File

@ -31,7 +31,7 @@ The following describes the props and example usage for this component.
Use the `size` prop to change the size of the icon it should adhere to an `8px` grid e.g. `16px`, `24px`, `32px` Use the `size` prop to change the size of the icon it should adhere to an `8px` grid e.g. `16px`, `24px`, `32px`
<Canvas> <Canvas>
<Story id="components-ui-icon--size" /> <Story id="components-ui-icon--size-story" />
</Canvas> </Canvas>
### Color ### Color

12
ui/components/ui/typography/README.mdx
View File

@ -72,7 +72,7 @@ Use the `color` prop and the `COLOR` object from `./ui/helpers/constants/design-
```jsx ```jsx
// If importing from ui/components/app/[YOUR_COMPONENT]/ directory // If importing from ui/components/app/[YOUR_COMPONENT]/ directory
import Typography from '../../ui/typography'; import Typography from '../../ui/typography';
import { TextColor, Colors, BackgroundColor } from '../../../helpers/constants/design-system'; import { TextColor, Color, BackgroundColor } from '../../../helpers/constants/design-system';
<Typography color={TextColor.textDefault}> <Typography color={TextColor.textDefault}>
text-default text-default
@ -83,7 +83,7 @@ import { TextColor, Colors, BackgroundColor } from '../../../helpers/constants/d
<Typography color={TextColor.textMuted}> <Typography color={TextColor.textMuted}>
text-muted text-muted
</Typography> </Typography>
<Typography color={Colors.overlayInverse} boxProps={{backgroundColor:{BackgroundColor.overlayDefault}}}> <Typography color={Color.overlayInverse} boxProps={{backgroundColor:{BackgroundColor.overlayDefault}}}>
overlay-inverse overlay-inverse
</Typography> </Typography>
<Typography color={TextColor.primaryDefault}> <Typography color={TextColor.primaryDefault}>
@ -308,16 +308,16 @@ Use the `boxProps` prop object to pass any valid [Box](/?path=/story/components-
```jsx ```jsx
// If importing from ui/components/app/[YOUR_COMPONENT]/ directory // If importing from ui/components/app/[YOUR_COMPONENT]/ directory
import Typography from '../../ui/typography'; import Typography from '../../ui/typography';
import { COLORS } from '../../../helpers/constants/design-system'; import { Color } from '../../../helpers/constants/design-system';
<Typography <Typography
boxProps={{ boxProps={{
backgroundColor: COLORS.INFO_MUTED, backgroundColor: Color.infoMuted,
borderColor: COLORS.INFO_DEFAULT, borderColor: Color.infoDefault,
padding: 4, padding: 4,
borderRadius: 4, borderRadius: 4,
}} }}
color={COLORS.TEXT_DEFAULT} color={Color.textDefault}
> >
This uses the boxProps prop This uses the boxProps prop
</Typography>; </Typography>;

3
ui/components/ui/typography/typography.js
View File

@ -23,6 +23,7 @@ export const ValidColors = [
Color.errorDefault, Color.errorDefault,
Color.errorInverse, Color.errorInverse,
Color.successDefault, Color.successDefault,
Color.successInverse,
Color.sepoliaInverse, Color.sepoliaInverse,
Color.warningDefault, Color.warningDefault,
Color.warningInverse, Color.warningInverse,
@ -30,7 +31,7 @@ export const ValidColors = [
Color.infoInverse, Color.infoInverse,
Color.goerli, Color.goerli,
Color.sepolia, Color.sepolia,
Color.goerli, Color.goerliInverse,
Color.sepoliaInverse, Color.sepoliaInverse,
]; ];