diff --git a/ui/components/component-library/avatar-account/README.mdx b/ui/components/component-library/avatar-account/README.mdx index cfea1c258..096c842ba 100644 --- a/ui/components/component-library/avatar-account/README.mdx +++ b/ui/components/component-library/avatar-account/README.mdx @@ -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` -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: @@ -36,10 +36,10 @@ Possible sizes include: - `Size.LG` 40px - `Size.XL` 48px -Defaults to `SIZES.MD` +Defaults to `Size.MD` - + ```jsx diff --git a/ui/components/component-library/avatar-base/avatar-base.js b/ui/components/component-library/avatar-base/avatar-base.js index c7891b440..cbaf77792 100644 --- a/ui/components/component-library/avatar-base/avatar-base.js +++ b/ui/components/component-library/avatar-base/avatar-base.js @@ -44,12 +44,12 @@ AvatarBase.propTypes = { children: PropTypes.node, /** * The background color of the AvatarBase - * Defaults to COLORS.BACKGROUND_ALTERNATIVE + * Defaults to Color.backgroundAlternative */ backgroundColor: Box.propTypes.backgroundColor, /** * The background color of the AvatarBase - * Defaults to COLORS.BORDER_DEFAULT + * Defaults to Color.borderDefault */ borderColor: Box.propTypes.borderColor, /** diff --git a/ui/components/component-library/avatar-favicon/README.mdx b/ui/components/component-library/avatar-favicon/README.mdx index c2bdb2fe5..55e74a823 100644 --- a/ui/components/component-library/avatar-favicon/README.mdx +++ b/ui/components/component-library/avatar-favicon/README.mdx @@ -37,10 +37,10 @@ Possible sizes include: - `Size.LG` 40px - `Size.XL` 48px -Defaults to `SIZES.MD` +Defaults to `Size.MD` - + ```jsx diff --git a/ui/components/component-library/avatar-favicon/avatar-favicon.js b/ui/components/component-library/avatar-favicon/avatar-favicon.js index 0d1fc1a14..1cd1d144b 100644 --- a/ui/components/component-library/avatar-favicon/avatar-favicon.js +++ b/ui/components/component-library/avatar-favicon/avatar-favicon.js @@ -71,7 +71,7 @@ AvatarFavicon.propTypes = { size: PropTypes.oneOf(Object.values(AVATAR_FAVICON_SIZES)), /** * The border color of the AvatarFavicon - * Defaults to COLORS.TRANSPARENT + * Defaults to Color.transparent */ borderColor: Box.propTypes.borderColor, /** diff --git a/ui/components/component-library/avatar-favicon/avatar-favicon.stories.js b/ui/components/component-library/avatar-favicon/avatar-favicon.stories.js index ddc2c32ff..8b68a25cf 100644 --- a/ui/components/component-library/avatar-favicon/avatar-favicon.stories.js +++ b/ui/components/component-library/avatar-favicon/avatar-favicon.stories.js @@ -28,6 +28,9 @@ export default { src: { control: 'text', }, + name: { + control: 'text', + }, borderColor: { options: Object.values(BorderColor), control: 'select', @@ -36,6 +39,7 @@ export default { args: { src: 'https://uniswap.org/favicon.ico', size: Size.MD, + name: 'Uniswap', }, }; diff --git a/ui/components/component-library/avatar-icon/README.mdx b/ui/components/component-library/avatar-icon/README.mdx index be23a6db2..0e7b61e29 100644 --- a/ui/components/component-library/avatar-icon/README.mdx +++ b/ui/components/component-library/avatar-icon/README.mdx @@ -24,7 +24,7 @@ component props ### 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` @@ -36,10 +36,10 @@ Possible sizes include: - `Size.LG` 40px - `Size.XL` 48px -Defaults to `SIZES.MD` +Defaults to `Size.MD` - + ```jsx diff --git a/ui/components/component-library/avatar-icon/avatar-icon.stories.js b/ui/components/component-library/avatar-icon/avatar-icon.stories.js index 53fca2450..ba5c276a9 100644 --- a/ui/components/component-library/avatar-icon/avatar-icon.stories.js +++ b/ui/components/component-library/avatar-icon/avatar-icon.stories.js @@ -106,7 +106,7 @@ export const SizeStory = (args) => ( ); SizeStory.storyName = 'Size'; -Size.args = { +SizeStory.args = { iconName: ICON_NAMES.CONFIRMATION, }; diff --git a/ui/components/component-library/avatar-network/README.mdx b/ui/components/component-library/avatar-network/README.mdx index 15bab198e..92ad2e0e9 100644 --- a/ui/components/component-library/avatar-network/README.mdx +++ b/ui/components/component-library/avatar-network/README.mdx @@ -31,7 +31,7 @@ Possible sizes include: Defaults to `md` - + ```jsx diff --git a/ui/components/component-library/avatar-token/README.mdx b/ui/components/component-library/avatar-token/README.mdx index 5b58853db..63e7e5b14 100644 --- a/ui/components/component-library/avatar-token/README.mdx +++ b/ui/components/component-library/avatar-token/README.mdx @@ -31,7 +31,7 @@ Possible sizes include: Defaults to `md` - + ```jsx diff --git a/ui/components/component-library/avatar-token/avatar-token.js b/ui/components/component-library/avatar-token/avatar-token.js index c65aeb1b1..ef970c2f5 100644 --- a/ui/components/component-library/avatar-token/avatar-token.js +++ b/ui/components/component-library/avatar-token/avatar-token.js @@ -100,17 +100,17 @@ AvatarToken.propTypes = { size: PropTypes.oneOf(Object.values(AVATAR_TOKEN_SIZES)), /** * The background color of the AvatarToken - * Defaults to COLORS.BACKGROUND_ALTERNATIVE + * Defaults to Color.backgroundAlternative */ backgroundColor: Box.propTypes.backgroundColor, /** * The background color of the AvatarToken - * Defaults to COLORS.BORDER_DEFAULT + * Defaults to Color.borderDefault */ borderColor: Box.propTypes.borderColor, /** * The color of the text inside the AvatarToken - * Defaults to COLORS.TEXT_DEFAULT + * Defaults to Color.textDefault */ color: Box.propTypes.color, /** diff --git a/ui/components/component-library/avatar-with-badge/README.mdx b/ui/components/component-library/avatar-with-badge/README.mdx index 2bb2d4c52..1587ddb5b 100644 --- a/ui/components/component-library/avatar-with-badge/README.mdx +++ b/ui/components/component-library/avatar-with-badge/README.mdx @@ -31,7 +31,7 @@ import { AvatarWithBadge } from '../ui/component-library'; badgePosition={AVATAR_WITH_BADGE_POSTIONS.BOTTOM} badge={ @@ -39,7 +39,7 @@ import { AvatarWithBadge } from '../ui/component-library'; > @@ -48,7 +48,7 @@ import { AvatarWithBadge } from '../ui/component-library'; badgePosition={AVATAR_WITH_BADGE_POSTIONS.TOP} badge={ @@ -56,7 +56,7 @@ import { AvatarWithBadge } from '../ui/component-library'; > diff --git a/ui/components/component-library/banner-alert/README.mdx b/ui/components/component-library/banner-alert/README.mdx index b709c6195..275b66aa1 100644 --- a/ui/components/component-library/banner-alert/README.mdx +++ b/ui/components/component-library/banner-alert/README.mdx @@ -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 `BannerBase` component props below diff --git a/ui/components/component-library/banner-alert/banner-alert.js b/ui/components/component-library/banner-alert/banner-alert.js index a98528b3f..656685046 100644 --- a/ui/components/component-library/banner-alert/banner-alert.js +++ b/ui/components/component-library/banner-alert/banner-alert.js @@ -90,7 +90,7 @@ BannerAlert.propTypes = { */ severity: PropTypes.oneOf(Object.values(BANNER_ALERT_SEVERITIES)), /** - * Banner accepts all the props from BannerBase + * BannerAlert accepts all the props from BannerBase */ ...BannerBase.propTypes, }; diff --git a/ui/components/component-library/banner-base/README.mdx b/ui/components/component-library/banner-base/README.mdx index 269b9b552..356842e0c 100644 --- a/ui/components/component-library/banner-base/README.mdx +++ b/ui/components/component-library/banner-base/README.mdx @@ -128,12 +128,12 @@ Use the `startAccessory` prop to add components such as icons or fox image to th ```jsx -import { SIZES } from '../../../helpers/constants/design-system'; +import { Size } from '../../../helpers/constants/design-system'; import { BannerBase, Icon, ICON_NAMES } from '../../component-library'; } + startAccessory={} > The info icon on the left is passed through the startAccessory prop ; diff --git a/ui/components/component-library/button-base/README.mdx b/ui/components/component-library/button-base/README.mdx index fc016a37d..2501b7d15 100644 --- a/ui/components/component-library/button-base/README.mdx +++ b/ui/components/component-library/button-base/README.mdx @@ -19,19 +19,19 @@ The `ButtonBase` accepts all props below as well as all [Box](/docs/components-u ### Size -Use the `size` prop and the `SIZES` object from `./ui/helpers/constants/design-system.js` -to change the size of `ButtonBase`. Defaults to `SIZES.MD` +Use the `size` prop and the `Size` object from `./ui/helpers/constants/design-system.js` +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: -- `SIZES.SM` 32px -- `SIZES.MD` 40px -- `SIZES.LG` 48px +- `Size.SM` 32px +- `Size.MD` 40px +- `Size.LG` 48px - + ```jsx diff --git a/ui/components/component-library/button-icon/README.mdx b/ui/components/component-library/button-icon/README.mdx index fba8c4ecf..c41f088ae 100644 --- a/ui/components/component-library/button-icon/README.mdx +++ b/ui/components/component-library/button-icon/README.mdx @@ -34,10 +34,10 @@ import { ICON_NAMES } from '../icon'; ### Size -Use the `size` prop and the `SIZES` object from `./ui/helpers/constants/design-system.js` -to change the size of `ButtonIcon`. Defaults to `SIZES.SM` +Use the `size` prop and the `Size` object from `./ui/helpers/constants/design-system.js` +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: @@ -45,7 +45,7 @@ Possible sizes include: - `Size.LG` 32px - + ```jsx @@ -65,11 +65,12 @@ Use the `ariaLabel` prop to set the name of the ButtonIcon for proper accessibil ```jsx -import { ButtonIcon } from '../ui/component-library'; +import { ButtonIcon, ICON_NAMES } from '../ui/component-library'; +import { Color } from '../../../helpers/constants/design-system'; - + ``` ### As @@ -86,11 +87,12 @@ Button `as` options: ```jsx -import { ButtonIcon } from '../ui/component-library'; +import { ButtonIcon, ICON_NAMES } from '../ui/component-library'; +import { Color } from '../../../helpers/constants/design-system'; - + ``` ### Href @@ -102,31 +104,33 @@ When an `href` prop is passed it will change the element to an anchor(`a`) tag. ```jsx -import { ButtonIcon } from '../ui/component-library'; +import { ButtonIcon, ICON_NAMES } from '../ui/component-library'; +import { Color } from '../../../helpers/constants/design-system'; ; ``` ### 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`. - + ```jsx -import { ButtonIcon } from '../ui/component-library'; +import { ButtonIcon, ICON_NAMES } from '../ui/component-library'; +import { Color } from '../../../helpers/constants/design-system'; ; ``` diff --git a/ui/components/component-library/button-link/README.mdx b/ui/components/component-library/button-link/README.mdx index 1ea3bccab..4e88326e2 100644 --- a/ui/components/component-library/button-link/README.mdx +++ b/ui/components/component-library/button-link/README.mdx @@ -23,9 +23,9 @@ The `ButtonLink` accepts all [ButtonBase](/docs/components-componentlibrary-butt ### 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: @@ -36,7 +36,7 @@ Possible sizes include: - `Size.inherit` inherits the font-size of the parent element. Used for inline links in paragraphs. - + ```jsx @@ -57,18 +57,18 @@ import { ButtonLink, Text, TextVariant } from '../../component-library'; - Inherits the font-size of the parent element. Learn more + Inherits the font-size of the parent element. Learn more - Inherits the font-size of the parent element. Learn more + Inherits the font-size of the parent element. Learn more - Inherits the font-size of the parent element. Learn more + Inherits the font-size of the parent element. Learn more Inherits the font-size of the parent element and example with textProps override for a success color. - Learn more + Learn more ``` @@ -103,7 +103,7 @@ import { ButtonLink } from '../../component-library'; ### 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%. @@ -115,16 +115,16 @@ import { ButtonLink } from '../../component-library'; Auto (default) - + Small - + Medium - + Large - + Large block ``` diff --git a/ui/components/component-library/button-primary/README.mdx b/ui/components/component-library/button-primary/README.mdx index 277e8ca90..fc64b8b37 100644 --- a/ui/components/component-library/button-primary/README.mdx +++ b/ui/components/component-library/button-primary/README.mdx @@ -18,18 +18,18 @@ The `ButtonPrimary` accepts all props below as well as all [Box](/docs/component ### 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: -- `SIZES.SM` 32px -- `SIZES.MD` 40px -- `SIZES.LG` 48px +- `Size.SM` 32px +- `Size.MD` 40px +- `Size.LG` 48px - + ```jsx diff --git a/ui/components/component-library/button-secondary/README.mdx b/ui/components/component-library/button-secondary/README.mdx index bf8124201..177cde8d0 100644 --- a/ui/components/component-library/button-secondary/README.mdx +++ b/ui/components/component-library/button-secondary/README.mdx @@ -18,18 +18,18 @@ The `ButtonSecondary` accepts all props below as well as all [Box](/docs/compone ### 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: -- `SIZES.SM` 32px -- `SIZES.MD` 40px -- `SIZES.LG` 48px +- `Size.SM` 32px +- `Size.MD` 40px +- `Size.LG` 48px - + ```jsx diff --git a/ui/components/component-library/button/README.mdx b/ui/components/component-library/button/README.mdx index 34a829036..d5fe067e8 100644 --- a/ui/components/component-library/button/README.mdx +++ b/ui/components/component-library/button/README.mdx @@ -49,30 +49,30 @@ import { Button, BUTTON_TYPES } from '../ui/component-library/button'; ### 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: - `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.MD` 40px - `Size.LG` 48px - + ```jsx -import { SIZES } from '../../../helpers/constants/design-system'; +import { Size } from '../../../helpers/constants/design-system'; import { Button } from '../ui/component-library'; -