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

Updating icon imports to TS version in component-library folder (#18449)

Browse Source
This commit is contained in:
George Marshall 2023-04-05 09:11:10 -07:00 committed by GitHub
parent 94292fadc9
commit 4ce605f514
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
45 changed files with 259 additions and 277 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -10,7 +10,7 @@ import {
import Box from '../../ui/box/box'; import Box from '../../ui/box/box';
import { Icon, ICON_NAMES } from '../icon/deprecated'; import { Icon, IconName } from '..';
import README from './README.mdx'; import README from './README.mdx';
import { AvatarBase } from './avatar-base'; import { AvatarBase } from './avatar-base';
import { AVATAR_BASE_SIZES } from './avatar-base.constants'; import { AVATAR_BASE_SIZES } from './avatar-base.constants';
@ -124,7 +124,7 @@ export const Children = (args) => (
backgroundColor={BackgroundColor.infoMuted} backgroundColor={BackgroundColor.infoMuted}
borderColor={BorderColor.infoMuted} borderColor={BorderColor.infoMuted}
> >
<Icon name={ICON_NAMES.USER} color={Color.infoDefault} /> <Icon name={IconName.User} color={Color.infoDefault} />
</AvatarBase> </AvatarBase>
</Box> </Box>
); );

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

@ -3,7 +3,7 @@ import PropTypes from 'prop-types';
import classnames from 'classnames'; import classnames from 'classnames';
import { AvatarBase } from '../avatar-base'; import { AvatarBase } from '../avatar-base';
import Box from '../../ui/box/box'; import Box from '../../ui/box/box';
import { ICON_NAMES, Icon } from '../icon/deprecated'; import { IconName, Icon } from '../icon';
import { import {
BorderColor, BorderColor,
Size, Size,
@ -43,7 +43,7 @@ export const AvatarFavicon = ({
/> />
) : ( ) : (
<Icon <Icon
name={ICON_NAMES.GLOBAL} name={IconName.Global}
color={IconColor.iconDefault} color={IconColor.iconDefault}
size={size} size={size}
{...fallbackIconProps} {...fallbackIconProps}
@ -65,7 +65,7 @@ AvatarFavicon.propTypes = {
/** /**
* Props for the fallback icon. All Icon props can be used * Props for the fallback icon. All Icon props can be used
*/ */
fallbackIconProps: PropTypes.shape(Icon.PropTypes), fallbackIconProps: PropTypes.object,
/** /**
* The size of the AvatarFavicon * The size of the AvatarFavicon
* Possible values could be 'Size.XS' 16px, 'Size.SM' 24px, 'Size.MD' 32px, 'Size.LG' 40px, 'Size.XL' 48px * Possible values could be 'Size.XS' 16px, 'Size.SM' 24px, 'Size.MD' 32px, 'Size.LG' 40px, 'Size.XL' 48px

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

@ -44,7 +44,7 @@ Defaults to `Size.MD`
```jsx ```jsx
import { Size } from '../../../helpers/constants/design-system'; import { Size } from '../../../helpers/constants/design-system';
import { AvatarIcon, ICON_NAMES } from '../ui/component-library'; import { AvatarIcon, IconName } from '../ui/component-library';
<AvatarIcon {...args} size={Size.XS} /> <AvatarIcon {...args} size={Size.XS} />
<AvatarIcon {...args} size={Size.SM} /> <AvatarIcon {...args} size={Size.SM} />
@ -55,22 +55,22 @@ import { AvatarIcon, ICON_NAMES } from '../ui/component-library';
### Icon Name<span style={{ color: 'red' }}>\*</span> ### Icon Name<span style={{ color: 'red' }}>\*</span>
Use the required `iconName` prop with `ICON_NAMES` object from `./ui/components/component-library` to select icon Use the required `iconName` prop with `IconName` enum from `./ui/components/component-library` to select icon
Use the [IconSearch](/story/components-componentlibrary-icon--default-story) story to find the icon you want to use. Use the [IconSearch](/story/components-componentlibrary-icon--default-story) story to find the icon you want to use.
<Canvas> <Canvas>
<Story id="components-componentlibrary-avataricon--icon-name" /> <Story id="components-componentlibrary-avataricon--icon-name-story" />
</Canvas> </Canvas>
```jsx ```jsx
import { AvatarIcon, ICON_NAMES } from '../ui/component-library'; import { AvatarIcon, IconName } from '../ui/component-library';
<AvatarIcon iconName={ICON_NAMES.SWAP_HORIZONTAL} /> <AvatarIcon iconName={IconName.SwapHorizontal} />
<AvatarIcon iconName={ICON_NAMES.CONFIRMATION} /> <AvatarIcon iconName={IconName.Confirmation} />
<AvatarIcon iconName={ICON_NAMES.INFO} /> <AvatarIcon iconName={IconName.Info} />
<AvatarIcon iconName={ICON_NAMES.WARNING} /> <AvatarIcon iconName={IconName.Warning} />
<AvatarIcon iconName={ICON_NAMES.DANGER} /> <AvatarIcon iconName={IconName.Danger} />
``` ```
### Color and Background Color ### Color and Background Color

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

@ -14,7 +14,7 @@ import {
import Box from '../../ui/box/box'; import Box from '../../ui/box/box';
import { Icon, ICON_NAMES } from '../icon/deprecated'; import { IconName, Icon } from '../icon';
import { AvatarBase } from '../avatar-base'; import { AvatarBase } from '../avatar-base';
import { AVATAR_ICON_SIZES } from './avatar-icon.constants'; import { AVATAR_ICON_SIZES } from './avatar-icon.constants';
@ -27,8 +27,7 @@ export const AvatarIcon = ({
iconProps, iconProps,
iconName, iconName,
...props ...props
}) => { }) => (
return (
<AvatarBase <AvatarBase
size={size} size={size}
display={DISPLAY.FLEX} display={DISPLAY.FLEX}
@ -47,19 +46,18 @@ export const AvatarIcon = ({
{...iconProps} {...iconProps}
/> />
</AvatarBase> </AvatarBase>
); );
};
AvatarIcon.propTypes = { AvatarIcon.propTypes = {
/** /**
* *
* The name of the icon to display. Should be one of ICON_NAMES * The name of the icon to display. Should be one of IconName
*/ */
iconName: PropTypes.oneOf(Object.values(ICON_NAMES)).isRequired, iconName: PropTypes.oneOf(Object.values(IconName)).isRequired,
/** /**
* Props for the icon inside AvatarIcon. All Icon props can be used * Props for the icon inside AvatarIcon. All Icon props can be used
*/ */
iconProps: PropTypes.shape(Icon.PropTypes), iconProps: PropTypes.object,
/** /**
* The size of the AvatarIcon * The size of the AvatarIcon
* Possible values could be 'SIZES.XS' 16px, 'SIZES.SM' 24px, 'SIZES.MD' 32px, 'SIZES.LG' 40px, 'SIZES.XL' 48px * Possible values could be 'SIZES.XS' 16px, 'SIZES.SM' 24px, 'SIZES.MD' 32px, 'SIZES.LG' 40px, 'SIZES.XL' 48px

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

@ -10,7 +10,7 @@ import {
import Box from '../../ui/box/box'; import Box from '../../ui/box/box';
import { ICON_NAMES } from '../icon/deprecated'; import { IconName } from '..';
import README from './README.mdx'; import README from './README.mdx';
import { AvatarIcon, AVATAR_ICON_SIZES } from '.'; import { AvatarIcon, AVATAR_ICON_SIZES } from '.';
@ -35,7 +35,6 @@ const marginSizeControlOptions = [
export default { export default {
title: 'Components/ComponentLibrary/AvatarIcon', title: 'Components/ComponentLibrary/AvatarIcon',
component: AvatarIcon, component: AvatarIcon,
parameters: { parameters: {
docs: { docs: {
@ -44,7 +43,7 @@ export default {
}, },
argTypes: { argTypes: {
iconName: { iconName: {
options: Object.values(ICON_NAMES), options: Object.values(IconName),
control: 'select', control: 'select',
}, },
size: { size: {
@ -89,7 +88,7 @@ export default {
}; };
const Template = (args) => { const Template = (args) => {
return <AvatarIcon iconName={ICON_NAMES.SWAP_HORIZONTAL} {...args} />; return <AvatarIcon iconName={IconName.SwapHorizontal} {...args} />;
}; };
export const DefaultStory = Template.bind({}); export const DefaultStory = Template.bind({});
@ -107,80 +106,82 @@ export const SizeStory = (args) => (
SizeStory.storyName = 'Size'; SizeStory.storyName = 'Size';
SizeStory.args = { SizeStory.args = {
iconName: ICON_NAMES.CONFIRMATION, iconName: IconName.Confirmation,
}; };
export const IconName = (args) => ( export const IconNameStory = (args) => (
<Box display={DISPLAY.FLEX} gap={1}> <Box display={DISPLAY.FLEX} gap={1}>
<AvatarIcon <AvatarIcon
color={IconColor.primaryDefault} color={IconColor.primaryDefault}
backgroundColor={BackgroundColor.primaryMuted} backgroundColor={BackgroundColor.primaryMuted}
iconName={ICON_NAMES.SWAP_HORIZONTAL} iconName={IconName.SwapHorizontal}
{...args} {...args}
/> />
<AvatarIcon <AvatarIcon
color={IconColor.successDefault} color={IconColor.successDefault}
backgroundColor={BackgroundColor.successMuted} backgroundColor={BackgroundColor.successMuted}
iconName={ICON_NAMES.CONFIRMATION} iconName={IconName.Confirmation}
{...args} {...args}
/> />
<AvatarIcon <AvatarIcon
color={IconColor.infoDefault} color={IconColor.infoDefault}
backgroundColor={BackgroundColor.infoMuted} backgroundColor={BackgroundColor.infoMuted}
iconName={ICON_NAMES.INFO} iconName={IconName.Info}
{...args} {...args}
/> />
<AvatarIcon <AvatarIcon
color={IconColor.warningDefault} color={IconColor.warningDefault}
backgroundColor={BackgroundColor.warningMuted} backgroundColor={BackgroundColor.warningMuted}
iconName={ICON_NAMES.WARNING} iconName={IconName.Warning}
{...args} {...args}
/> />
<AvatarIcon <AvatarIcon
color={IconColor.errorDefault} color={IconColor.errorDefault}
backgroundColor={BackgroundColor.errorMuted} backgroundColor={BackgroundColor.errorMuted}
iconName={ICON_NAMES.DANGER} iconName={IconName.Danger}
{...args} {...args}
/> />
</Box> </Box>
); );
IconNameStory.storyName = 'Icon Name';
export const ColorAndBackgroundColor = (args) => ( export const ColorAndBackgroundColor = (args) => (
<Box display={DISPLAY.FLEX} gap={1}> <Box display={DISPLAY.FLEX} gap={1}>
<AvatarIcon <AvatarIcon
color={IconColor.primaryDefault} color={IconColor.primaryDefault}
backgroundColor={BackgroundColor.primaryMuted} backgroundColor={BackgroundColor.primaryMuted}
iconName={ICON_NAMES.SWAP_HORIZONTAL} iconName={IconName.SwapHorizontal}
{...args} {...args}
/> />
<AvatarIcon <AvatarIcon
color={IconColor.primaryInverse} color={IconColor.primaryInverse}
backgroundColor={BackgroundColor.primaryDefault} backgroundColor={BackgroundColor.primaryDefault}
iconName={ICON_NAMES.SWAP_HORIZONTAL} iconName={IconName.SwapHorizontal}
{...args} {...args}
/> />
<AvatarIcon <AvatarIcon
color={IconColor.successDefault} color={IconColor.successDefault}
backgroundColor={BackgroundColor.successMuted} backgroundColor={BackgroundColor.successMuted}
iconName={ICON_NAMES.CONFIRMATION} iconName={IconName.Confirmation}
{...args} {...args}
/> />
<AvatarIcon <AvatarIcon
color={IconColor.infoDefault} color={IconColor.infoDefault}
backgroundColor={BackgroundColor.infoMuted} backgroundColor={BackgroundColor.infoMuted}
iconName={ICON_NAMES.INFO} iconName={IconName.Info}
{...args} {...args}
/> />
<AvatarIcon <AvatarIcon
color={IconColor.warningDefault} color={IconColor.warningDefault}
backgroundColor={BackgroundColor.warningMuted} backgroundColor={BackgroundColor.warningMuted}
iconName={ICON_NAMES.WARNING} iconName={IconName.Warning}
{...args} {...args}
/> />
<AvatarIcon <AvatarIcon
color={IconColor.errorDefault} color={IconColor.errorDefault}
backgroundColor={BackgroundColor.errorMuted} backgroundColor={BackgroundColor.errorMuted}
iconName={ICON_NAMES.DANGER} iconName={IconName.Danger}
{...args} {...args}
/> />
</Box> </Box>

20
ui/components/component-library/avatar-icon/avatar-icon.test.js
View File

@ -2,7 +2,7 @@
import { render } from '@testing-library/react'; import { render } from '@testing-library/react';
import React from 'react'; import React from 'react';
import { ICON_NAMES } from '../icon/deprecated'; import { IconName } from '..';
import { import {
BackgroundColor, BackgroundColor,
IconColor, IconColor,
@ -13,7 +13,7 @@ describe('AvatarIcon', () => {
it('should render correctly', () => { it('should render correctly', () => {
const { getByTestId, container } = render( const { getByTestId, container } = render(
<AvatarIcon <AvatarIcon
iconName={ICON_NAMES.SWAP_HORIZONTAL} iconName={IconName.SwapHorizontal}
data-testid="avatar-icon" data-testid="avatar-icon"
/>, />,
); );
@ -25,27 +25,27 @@ describe('AvatarIcon', () => {
const { getByTestId } = render( const { getByTestId } = render(
<> <>
<AvatarIcon <AvatarIcon
iconName={ICON_NAMES.SWAP_HORIZONTAL} iconName={IconName.SwapHorizontal}
size={AVATAR_ICON_SIZES.XS} size={AVATAR_ICON_SIZES.XS}
data-testid={AVATAR_ICON_SIZES.XS} data-testid={AVATAR_ICON_SIZES.XS}
/> />
<AvatarIcon <AvatarIcon
iconName={ICON_NAMES.SWAP_HORIZONTAL} iconName={IconName.SwapHorizontal}
size={AVATAR_ICON_SIZES.SM} size={AVATAR_ICON_SIZES.SM}
data-testid={AVATAR_ICON_SIZES.SM} data-testid={AVATAR_ICON_SIZES.SM}
/> />
<AvatarIcon <AvatarIcon
iconName={ICON_NAMES.SWAP_HORIZONTAL} iconName={IconName.SwapHorizontal}
size={AVATAR_ICON_SIZES.MD} size={AVATAR_ICON_SIZES.MD}
data-testid={AVATAR_ICON_SIZES.MD} data-testid={AVATAR_ICON_SIZES.MD}
/> />
<AvatarIcon <AvatarIcon
iconName={ICON_NAMES.SWAP_HORIZONTAL} iconName={IconName.SwapHorizontal}
size={AVATAR_ICON_SIZES.LG} size={AVATAR_ICON_SIZES.LG}
data-testid={AVATAR_ICON_SIZES.LG} data-testid={AVATAR_ICON_SIZES.LG}
/> />
<AvatarIcon <AvatarIcon
iconName={ICON_NAMES.SWAP_HORIZONTAL} iconName={IconName.SwapHorizontal}
size={AVATAR_ICON_SIZES.XL} size={AVATAR_ICON_SIZES.XL}
data-testid={AVATAR_ICON_SIZES.XL} data-testid={AVATAR_ICON_SIZES.XL}
/> />
@ -71,7 +71,7 @@ describe('AvatarIcon', () => {
it('should render with added classname', () => { it('should render with added classname', () => {
const { getByTestId } = render( const { getByTestId } = render(
<AvatarIcon <AvatarIcon
iconName={ICON_NAMES.SWAP_HORIZONTAL} iconName={IconName.SwapHorizontal}
className="mm-avatar-icon--test" className="mm-avatar-icon--test"
data-testid="classname" data-testid="classname"
/>, />,
@ -82,7 +82,7 @@ describe('AvatarIcon', () => {
it('should render with icon', () => { it('should render with icon', () => {
const { getByTestId } = render( const { getByTestId } = render(
<AvatarIcon <AvatarIcon
iconName={ICON_NAMES.SWAP_HORIZONTAL} iconName={IconName.SwapHorizontal}
iconProps={{ 'data-testid': 'avatar-icon' }} iconProps={{ 'data-testid': 'avatar-icon' }}
/>, />,
); );
@ -93,7 +93,7 @@ describe('AvatarIcon', () => {
it('should render with success color icon and background color', () => { it('should render with success color icon and background color', () => {
const { getByTestId } = render( const { getByTestId } = render(
<AvatarIcon <AvatarIcon
iconName={ICON_NAMES.SWAP_HORIZONTAL} iconName={IconName.SwapHorizontal}
color={IconColor.successDefault} color={IconColor.successDefault}
backgroundColor={BackgroundColor.successMuted} backgroundColor={BackgroundColor.successMuted}
data-testid="success" data-testid="success"

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

@ -118,13 +118,13 @@ Use the `actionButtonLabel` prop to pass text, `actionButtonOnClick` prop to pas
</Canvas> </Canvas>
```jsx ```jsx
import { BannerAlert, ICON_NAMES } from '../../component-library'; import { BannerAlert, IconName } from '../../component-library';
<BannerAlert <BannerAlert
title="Action prop demo" title="Action prop demo"
actionButtonLabel="Action" actionButtonLabel="Action"
actionButtonProps={{ actionButtonProps={{
endIconName: ICON_NAMES.ARROW_2_RIGHT, endIconName: IconName.Arrow2Right,
}} }}
actionButtonOnClick={() => console.log('ButtonLink actionButtonOnClick demo')} actionButtonOnClick={() => console.log('ButtonLink actionButtonOnClick demo')}
> >

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

@ -2,14 +2,12 @@ import React from 'react';
import PropTypes from 'prop-types'; import PropTypes from 'prop-types';
import classnames from 'classnames'; import classnames from 'classnames';
import { Icon, ICON_NAMES } from '../icon/deprecated'; import { BannerBase, Icon, IconName, IconSize } from '..';
import { BannerBase } from '..';
import { import {
BackgroundColor, BackgroundColor,
IconColor, IconColor,
SEVERITIES, SEVERITIES,
Size,
} from '../../../helpers/constants/design-system'; } from '../../../helpers/constants/design-system';
import { BANNER_ALERT_SEVERITIES } from './banner-alert.constants'; import { BANNER_ALERT_SEVERITIES } from './banner-alert.constants';
@ -23,23 +21,23 @@ export const BannerAlert = ({
switch (severity) { switch (severity) {
case SEVERITIES.DANGER: case SEVERITIES.DANGER:
return { return {
name: ICON_NAMES.DANGER, name: IconName.Danger,
color: IconColor.errorDefault, color: IconColor.errorDefault,
}; };
case SEVERITIES.WARNING: case SEVERITIES.WARNING:
return { return {
name: ICON_NAMES.WARNING, name: IconName.Warning,
color: IconColor.warningDefault, color: IconColor.warningDefault,
}; };
case SEVERITIES.SUCCESS: case SEVERITIES.SUCCESS:
return { return {
name: ICON_NAMES.CONFIRMATION, name: IconName.Confirmation,
color: IconColor.successDefault, color: IconColor.successDefault,
}; };
// Defaults to SEVERITIES.INFO // Defaults to SEVERITIES.INFO
default: default:
return { return {
name: ICON_NAMES.INFO, name: IconName.Info,
color: IconColor.primaryDefault, color: IconColor.primaryDefault,
}; };
} }
@ -61,7 +59,7 @@ export const BannerAlert = ({
return ( return (
<BannerBase <BannerBase
startAccessory={<Icon size={Size.LG} {...severityIcon()} />} startAccessory={<Icon size={IconSize.Lg} {...severityIcon()} />}
backgroundColor={severityBackground()} backgroundColor={severityBackground()}
paddingLeft={2} paddingLeft={2}
className={classnames( className={classnames(

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

@ -7,8 +7,7 @@ import {
Size, Size,
} from '../../../helpers/constants/design-system'; } from '../../../helpers/constants/design-system';
import Box from '../../ui/box/box'; import Box from '../../ui/box/box';
import { ButtonLink, ButtonPrimary } from '..'; import { ButtonLink, ButtonPrimary, IconName } from '..';
import { ICON_NAMES } from '../icon/deprecated';
import README from './README.mdx'; import README from './README.mdx';
import { BannerAlert, BANNER_ALERT_SEVERITIES } from '.'; import { BannerAlert, BANNER_ALERT_SEVERITIES } from '.';
@ -165,7 +164,7 @@ ActionButton.args = {
actionButtonLabel: 'Action', actionButtonLabel: 'Action',
actionButtonOnClick: () => console.log('ButtonLink actionButtonOnClick demo'), actionButtonOnClick: () => console.log('ButtonLink actionButtonOnClick demo'),
actionButtonProps: { actionButtonProps: {
endIconName: ICON_NAMES.ARROW_2_RIGHT, endIconName: IconName.Arrow2Right,
}, },
children: children:
'Use actionButtonLabel for action text, actionButtonOnClick for the onClick handler, and actionButtonProps to pass any ButtonLink prop types such as iconName', 'Use actionButtonLabel for action text, actionButtonOnClick for the onClick handler, and actionButtonProps to pass any ButtonLink prop types such as iconName',

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

@ -81,13 +81,13 @@ Use the `actionButtonLabel` prop to pass text, `actionButtonOnClick` prop to pas
</Canvas> </Canvas>
```jsx ```jsx
import { BannerBase, ICON_NAMES } from '../../component-library'; import { BannerBase, IconName } from '../../component-library';
<BannerBase <BannerBase
title="Action prop demo" title="Action prop demo"
actionButtonLabel="Action" actionButtonLabel="Action"
actionButtonProps={{ actionButtonProps={{
endIconName: ICON_NAMES.ARROW_2_RIGHT, endIconName: IconName.Arrow2Right,
}} }}
actionButtonOnClick={() => console.log('ButtonLink actionButtonOnClick demo')} actionButtonOnClick={() => console.log('ButtonLink actionButtonOnClick demo')}
> >
@ -129,11 +129,11 @@ Use the `startAccessory` prop to add components such as icons or fox image to th
```jsx ```jsx
import { Size } from '../../../helpers/constants/design-system'; import { Size } from '../../../helpers/constants/design-system';
import { BannerBase } from '../../component-library'; import { BannerBase } from '../../component-library';
import { Icon, ICON_NAMES } from '../../component-library/icon/deprecated'; import { Icon, IconName } from '../../component-library';
<BannerBase <BannerBase
title="Start accessory demo" title="Start accessory demo"
startAccessory={<Icon name={ICON_NAMES.INFO} size={Size.LG} />} startAccessory={<Icon name={IconName.Info} size={IconSize.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>;

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

@ -2,7 +2,7 @@ import React from 'react';
import PropTypes from 'prop-types'; import PropTypes from 'prop-types';
import classnames from 'classnames'; import classnames from 'classnames';
import { ButtonIcon, ButtonLink, Text } from '..'; import { ButtonIcon, ButtonLink, Text } from '..';
import { ICON_NAMES } from '../icon/deprecated'; import { IconName } from '../icon';
import Box from '../../ui/box'; import Box from '../../ui/box';
@ -72,7 +72,7 @@ export const BannerBase = ({
<ButtonIcon <ButtonIcon
className="mm-banner-base__close-button" className="mm-banner-base__close-button"
marginLeft="auto" marginLeft="auto"
iconName={ICON_NAMES.CLOSE} iconName={IconName.Close}
size={Size.SM} size={Size.SM}
ariaLabel="Close" // TODO: i18n ariaLabel="Close" // TODO: i18n
onClick={onClose} onClick={onClose}

9
ui/components/component-library/banner-base/banner-base.stories.js
View File

@ -1,8 +1,7 @@
import React from 'react'; import React from 'react';
import { useState } from '@storybook/addons'; import { useState } from '@storybook/addons';
import { Size } from '../../../helpers/constants/design-system'; import { Size } from '../../../helpers/constants/design-system';
import { ButtonLink, ButtonPrimary } from '..'; import { ButtonLink, ButtonPrimary, Icon, IconName, IconSize } from '..';
import { Icon, ICON_NAMES } from '../icon/deprecated';
import { BannerBase } from './banner-base'; import { BannerBase } from './banner-base';
import README from './README.mdx'; import README from './README.mdx';
@ -96,7 +95,7 @@ DefaultStory.args = {
title: 'Title is sentence case no period', title: 'Title is sentence case no period',
children: "Description shouldn't repeat title. 1-3 lines.", children: "Description shouldn't repeat title. 1-3 lines.",
actionButtonLabel: 'Action', actionButtonLabel: 'Action',
startAccessory: <Icon name={ICON_NAMES.INFO} size={Size.LG} />, startAccessory: <Icon name={IconName.Info} size={IconSize.Lg} />,
}; };
DefaultStory.storyName = 'Default'; DefaultStory.storyName = 'Default';
@ -144,7 +143,7 @@ ActionButton.args = {
actionButtonLabel: 'Action', actionButtonLabel: 'Action',
actionButtonOnClick: () => console.log('ButtonLink actionButtonOnClick demo'), actionButtonOnClick: () => console.log('ButtonLink actionButtonOnClick demo'),
actionButtonProps: { actionButtonProps: {
endIconName: ICON_NAMES.ARROW_2_RIGHT, endIconName: IconName.Arrow2Right,
}, },
children: children:
'Use actionButtonLabel for action text, actionButtonOnClick for the onClick handler, and actionButtonProps to pass any ButtonLink prop types such as iconName', 'Use actionButtonLabel for action text, actionButtonOnClick for the onClick handler, and actionButtonProps to pass any ButtonLink prop types such as iconName',
@ -182,5 +181,5 @@ StartAccessory.args = {
title: 'Start accessory demo', title: 'Start accessory demo',
children: children:
'The info icon on the left is passed through the startAccessory prop', 'The info icon on the left is passed through the startAccessory prop',
startAccessory: <Icon name={ICON_NAMES.INFO} size={Size.LG} />, startAccessory: <Icon name={IconName.Info} size={IconSize.Lg} />,
}; };

6
ui/components/component-library/banner-base/banner-base.test.js
View File

@ -4,7 +4,7 @@ import React from 'react';
import { renderWithUserEvent } from '../../../../test/lib/render-helpers'; import { renderWithUserEvent } from '../../../../test/lib/render-helpers';
import { Icon, ICON_NAMES } from '../icon/deprecated'; import { Icon, IconName } from '..';
import { BannerBase } from './banner-base'; import { BannerBase } from './banner-base';
describe('BannerBase', () => { describe('BannerBase', () => {
@ -58,7 +58,7 @@ describe('BannerBase', () => {
title="Action prop demo" title="Action prop demo"
actionButtonLabel="Action" actionButtonLabel="Action"
actionButtonProps={{ actionButtonProps={{
endIconName: ICON_NAMES.ARROW_2_RIGHT, endIconName: IconName.Arrow2Right,
'data-testid': 'action', 'data-testid': 'action',
className: 'mm-banner-base__action', className: 'mm-banner-base__action',
}} }}
@ -78,7 +78,7 @@ describe('BannerBase', () => {
const { getByTestId } = render( const { getByTestId } = render(
<BannerBase <BannerBase
startAccessory={ startAccessory={
<Icon data-testid="start-accessory" name={ICON_NAMES.ADD_SQUARE} /> <Icon data-testid="start-accessory" name={IconName.AddSquare} />
} }
/>, />,
); );

6
ui/components/component-library/banner-tip/README.mdx
View File

@ -107,13 +107,13 @@ Use the `actionButtonLabel` prop to pass text, `actionButtonOnClick` prop to pas
</Canvas> </Canvas>
```jsx ```jsx
import { BannerTip, ICON_NAMES } from '../../component-library'; import { BannerTip, IconName } from '../../component-library';
<BannerTip <BannerTip
title="Action prop demo" title="Action prop demo"
actionButtonLabel="Action" actionButtonLabel="Action"
actionButtonProps={{ actionButtonProps={{
icon: ICON_NAMES.ARROW_2_RIGHT, // TODO: change to iconName icon: IconName.Arrow2Right, // TODO: change to iconName
iconPositionRight: true, iconPositionRight: true,
}} }}
actionButtonOnClick={() => console.log('ButtonLink actionButtonOnClick demo')} actionButtonOnClick={() => console.log('ButtonLink actionButtonOnClick demo')}
@ -157,7 +157,7 @@ Use the `startAccessory` prop to pass a ReactNode to the start of the `BannerTip
import { BannerTip } from '../../component-library'; import { BannerTip } from '../../component-library';
<BannerTip <BannerTip
startAccessory={<Icon name={ICON_NAMES.MESSAGES} />} startAccessory={<Icon name={IconName.Messages} />}
title="StartAccessory" title="StartAccessory"
> >
This is a demo of startAccessory override. This is a demo of startAccessory override.

7
ui/components/component-library/banner-tip/banner-tip.stories.js
View File

@ -5,8 +5,7 @@ import {
Size, Size,
} from '../../../helpers/constants/design-system'; } from '../../../helpers/constants/design-system';
import Box from '../../ui/box/box'; import Box from '../../ui/box/box';
import { Icon, ICON_NAMES } from '../icon/deprecated'; import { ButtonLink, ButtonPrimary, Icon, IconName } from '..';
import { ButtonLink, ButtonPrimary } from '..';
import README from './README.mdx'; import README from './README.mdx';
import { BannerTip, BannerTipLogoType } from '.'; import { BannerTip, BannerTipLogoType } from '.';
@ -141,7 +140,7 @@ ActionButton.args = {
actionButtonLabel: 'Action', actionButtonLabel: 'Action',
actionButtonOnClick: () => console.log('ButtonLink actionButtonOnClick demo'), actionButtonOnClick: () => console.log('ButtonLink actionButtonOnClick demo'),
actionButtonProps: { actionButtonProps: {
iconName: ICON_NAMES.ARROW_2_RIGHT, iconName: IconName.Arrow2Right,
iconPositionRight: true, iconPositionRight: true,
}, },
children: children:
@ -176,7 +175,7 @@ export const StartAccessory = (args) => {
return ( return (
<BannerTip <BannerTip
{...args} {...args}
startAccessory={<Icon name={ICON_NAMES.MESSAGES} />} startAccessory={<Icon name={IconName.Messages} />}
title="StartAccessory" title="StartAccessory"
onClose={() => console.log('close button clicked')} onClose={() => console.log('close button clicked')}
> >

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

@ -144,7 +144,7 @@ import { ButtonBase } from '../../component-library';
### Icon Name ### Icon Name
Use the `startIconName` and/or `endIconName` prop with the `ICON_NAMES` object from `./ui/components/component-library` to select icon. Use the `startIconName` and/or `endIconName` prop with the `IconName` enum from `./ui/components/component-library` to select icon.
<Canvas> <Canvas>
<Story id="components-componentlibrary-buttonbase--start-icon-name" /> <Story id="components-componentlibrary-buttonbase--start-icon-name" />
@ -152,9 +152,9 @@ Use the `startIconName` and/or `endIconName` prop with the `ICON_NAMES` object f
```jsx ```jsx
import { ButtonBase } from '../../component-library'; import { ButtonBase } from '../../component-library';
import { ICON_NAMES } from '../icon'; import { IconName } from '../icon';
<ButtonBase startIconName={ICON_NAMES.ADD_SQUARE}>Button</ButtonBase>; <ButtonBase startIconName={IconName.AddSquare}>Button</ButtonBase>;
``` ```
<Canvas> <Canvas>
@ -163,9 +163,9 @@ import { ICON_NAMES } from '../icon';
```jsx ```jsx
import { ButtonBase } from '../../component-library'; import { ButtonBase } from '../../component-library';
import { ICON_NAMES } from '../icon'; import { IconName } from '../icon';
<ButtonBase endIconName={ICON_NAMES.ARROW_2_RIGHT}>Button</ButtonBase>; <ButtonBase endIconName={IconName.Arrow2Right}>Button</ButtonBase>;
``` ```
### RTL ### RTL
@ -177,18 +177,18 @@ For RTL language support use the `textDirection` prop.
</Canvas> </Canvas>
```jsx ```jsx
import { ButtonBase, ICON_NAMES, TextDirection } from '../../component-library'; import { ButtonBase, IconName, TextDirection } from '../../component-library';
<> <>
<ButtonBase <ButtonBase
startIconName={ICON_NAMES.ADD_SQUARE} startIconName={IconName.AddSquare}
endIconName={ICON_NAMES.ARROW_2_RIGHT} endIconName={IconName.Arrow2Right}
> >
Button Demo Button Demo
</ButtonBase> </ButtonBase>
<ButtonBase <ButtonBase
startIconName={ICON_NAMES.ADD_SQUARE} startIconName={IconName.AddSquare}
endIconName={ICON_NAMES.ARROW_2_RIGHT} endIconName={IconName.Arrow2Right}
textDirection={TextDirection.RightToLeft} textDirection={TextDirection.RightToLeft}
> >
Button Demo Button Demo

25
ui/components/component-library/button-base/button-base.js
View File

@ -3,7 +3,7 @@ import PropTypes from 'prop-types';
import classnames from 'classnames'; import classnames from 'classnames';
import Box from '../../ui/box'; import Box from '../../ui/box';
import { Icon, ICON_NAMES } from '../icon/deprecated'; import { IconName, Icon, IconSize } from '../icon';
import { Text } from '../text'; import { Text } from '../text';
import { import {
@ -12,7 +12,6 @@ import {
JustifyContent, JustifyContent,
TextColor, TextColor,
TextVariant, TextVariant,
Size,
BorderRadius, BorderRadius,
BackgroundColor, BackgroundColor,
IconColor, IconColor,
@ -75,7 +74,7 @@ export const ButtonBase = ({
{startIconName && ( {startIconName && (
<Icon <Icon
name={startIconName} name={startIconName}
size={Size.SM} size={IconSize.Sm}
marginInlineEnd={1} marginInlineEnd={1}
{...startIconProps} {...startIconProps}
color={loading ? IconColor.transparent : startIconProps?.color} color={loading ? IconColor.transparent : startIconProps?.color}
@ -102,7 +101,7 @@ export const ButtonBase = ({
{endIconName && ( {endIconName && (
<Icon <Icon
name={endIconName} name={endIconName}
size={Size.SM} size={IconSize.Sm}
marginInlineStart={1} marginInlineStart={1}
{...endIconProps} {...endIconProps}
color={loading ? IconColor.transparent : endIconProps?.color} color={loading ? IconColor.transparent : endIconProps?.color}
@ -111,9 +110,9 @@ export const ButtonBase = ({
{loading && ( {loading && (
<Icon <Icon
className="mm-button-base__icon-loading" className="mm-button-base__icon-loading"
name={ICON_NAMES.LOADING} name={IconName.Loading}
color={color} color={color}
size={Size.MD} size={IconSize.Md}
{...iconLoadingProps} {...iconLoadingProps}
/> />
)} )}
@ -160,26 +159,26 @@ ButtonBase.propTypes = {
externalLink: PropTypes.bool, externalLink: PropTypes.bool,
/** /**
* Add icon to start (left side) of button text passing icon name * Add icon to start (left side) of button text passing icon name
* The name of the icon to display. Should be one of ICON_NAMES * The name of the icon to display. Should be one of IconName
*/ */
startIconName: PropTypes.oneOf(Object.values(ICON_NAMES)), startIconName: PropTypes.oneOf(Object.values(IconName)),
/** /**
* iconProps accepts all the props from Icon * iconProps accepts all the props from Icon
*/ */
startIconProps: PropTypes.shape(Icon.PropTypes), startIconProps: PropTypes.object,
/** /**
* Add icon to end (right side) of button text passing icon name * Add icon to end (right side) of button text passing icon name
* The name of the icon to display. Should be one of ICON_NAMES * The name of the icon to display. Should be one of IconName
*/ */
endIconName: PropTypes.oneOf(Object.values(ICON_NAMES)), endIconName: PropTypes.oneOf(Object.values(IconName)),
/** /**
* iconProps accepts all the props from Icon * iconProps accepts all the props from Icon
*/ */
endIconProps: PropTypes.shape(Icon.PropTypes), endIconProps: PropTypes.object,
/** /**
* iconLoadingProps accepts all the props from Icon * iconLoadingProps accepts all the props from Icon
*/ */
iconLoadingProps: PropTypes.shape(Icon.PropTypes), iconLoadingProps: PropTypes.object,
/** /**
* Boolean to show loading spinner in button * Boolean to show loading spinner in button
*/ */

20
ui/components/component-library/button-base/button-base.stories.js
View File

@ -7,8 +7,8 @@ import {
Size, Size,
} from '../../../helpers/constants/design-system'; } from '../../../helpers/constants/design-system';
import Box from '../../ui/box/box'; import Box from '../../ui/box/box';
import { TextDirection } from '..'; import { TextDirection, IconName } from '..';
import { ICON_NAMES } from '../icon/deprecated';
import { BUTTON_BASE_SIZES } from './button-base.constants'; import { BUTTON_BASE_SIZES } from './button-base.constants';
import { ButtonBase } from './button-base'; import { ButtonBase } from './button-base';
import README from './README.mdx'; import README from './README.mdx';
@ -59,11 +59,11 @@ export default {
}, },
startIconName: { startIconName: {
control: 'select', control: 'select',
options: Object.values(ICON_NAMES), options: Object.values(IconName),
}, },
endIconName: { endIconName: {
control: 'select', control: 'select',
options: Object.values(ICON_NAMES), options: Object.values(IconName),
}, },
loading: { loading: {
control: 'boolean', control: 'boolean',
@ -177,13 +177,13 @@ Loading.args = {
}; };
export const StartIconName = (args) => ( export const StartIconName = (args) => (
<ButtonBase {...args} startIconName={ICON_NAMES.ADD_SQUARE}> <ButtonBase {...args} startIconName={IconName.AddSquare}>
Button Button
</ButtonBase> </ButtonBase>
); );
export const EndIconName = (args) => ( export const EndIconName = (args) => (
<ButtonBase {...args} endIconName={ICON_NAMES.ARROW_2_RIGHT}> <ButtonBase {...args} endIconName={IconName.Arrow2Right}>
Button Button
</ButtonBase> </ButtonBase>
); );
@ -192,15 +192,15 @@ export const Rtl = (args) => (
<Box display={DISPLAY.FLEX} flexDirection={FLEX_DIRECTION.COLUMN} gap={2}> <Box display={DISPLAY.FLEX} flexDirection={FLEX_DIRECTION.COLUMN} gap={2}>
<ButtonBase <ButtonBase
{...args} {...args}
startIconName={ICON_NAMES.ADD_SQUARE} startIconName={IconName.AddSquare}
endIconName={ICON_NAMES.ARROW_2_RIGHT} endIconName={IconName.Arrow2Right}
> >
Button Demo Button Demo
</ButtonBase> </ButtonBase>
<ButtonBase <ButtonBase
{...args} {...args}
startIconName={ICON_NAMES.ADD_SQUARE} startIconName={IconName.AddSquare}
endIconName={ICON_NAMES.ARROW_2_RIGHT} endIconName={IconName.Arrow2Right}
textDirection={TextDirection.RightToLeft} textDirection={TextDirection.RightToLeft}
> >
Button Demo Button Demo

6
ui/components/component-library/button-base/button-base.test.js
View File

@ -1,7 +1,7 @@
/* eslint-disable jest/require-top-level-describe */ /* eslint-disable jest/require-top-level-describe */
import { render } from '@testing-library/react'; import { render } from '@testing-library/react';
import React from 'react'; import React from 'react';
import { ICON_NAMES } from '../icon/deprecated'; import { IconName } from '..';
import { BUTTON_BASE_SIZES } from './button-base.constants'; import { BUTTON_BASE_SIZES } from './button-base.constants';
import { ButtonBase } from './button-base'; import { ButtonBase } from './button-base';
@ -125,9 +125,9 @@ describe('ButtonBase', () => {
const { getByTestId } = render( const { getByTestId } = render(
<ButtonBase <ButtonBase
data-testid="icon" data-testid="icon"
startIconName={ICON_NAMES.ADD_SQUARE} startIconName={IconName.AddSquare}
startIconProps={{ 'data-testid': 'start-button-icon' }} startIconProps={{ 'data-testid': 'start-button-icon' }}
endIconName={ICON_NAMES.ADD_SQUARE} endIconName={IconName.AddSquare}
endIconProps={{ 'data-testid': 'end-button-icon' }} endIconProps={{ 'data-testid': 'end-button-icon' }}
/>, />,
); );

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

@ -17,19 +17,19 @@ The `ButtonIcon` accepts all props below as well as all [Box](/docs/components-u
### Icon Name<span style={{ color: 'red' }}>\*</span> ### Icon Name<span style={{ color: 'red' }}>\*</span>
Use the required `iconName` prop with `ICON_NAMES` object from `./ui/components/component-library/icon` to select icon. Use the required `iconName` prop with `IconName` enum from `./ui/components/component-library` to select icon.
Use the [IconSearch](/story/components-componentlibrary-icon--default-story) story to find the icon you want to use. Use the [IconSearch](/story/components-componentlibrary-icon--default-story) story to find the icon you want to use.
<Canvas> <Canvas>
<Story id="components-componentlibrary-buttonicon--icon-name" /> <Story id="components-componentlibrary-buttonicon--icon-name-story" />
</Canvas> </Canvas>
```jsx ```jsx
import { ButtonIcon } from '../ui/component-library'; import { ButtonIcon } from '../ui/component-library';
import { ICON_NAMES } from '../icon'; import { IconName } from '../icon';
<ButtonIcon iconName={ICON_NAMES.CLOSE} ariaLabel="Close" />; <ButtonIcon iconName={IconName.Close} ariaLabel="Close" />;
``` ```
### Size ### Size
@ -52,8 +52,8 @@ Possible sizes include:
import { Size } from '../../../helpers/constants/design-system'; import { Size } from '../../../helpers/constants/design-system';
import { ButtonIcon } from '../ui/component-library'; import { ButtonIcon } from '../ui/component-library';
<ButtonIcon size={Size.SM} iconName={ICON_NAMES.CLOSE} ariaLabel="Close"/> <ButtonIcon size={Size.SM} iconName={IconName.Close} ariaLabel="Close"/>
<ButtonIcon size={Size.LG} iconName={ICON_NAMES.CLOSE} ariaLabel="Close"/> <ButtonIcon size={Size.LG} iconName={IconName.Close} ariaLabel="Close"/>
``` ```
### Aria Label ### Aria Label
@ -65,12 +65,12 @@ Use the `ariaLabel` prop to set the name of the ButtonIcon for proper accessibil
</Canvas> </Canvas>
```jsx ```jsx
import { ButtonIcon, ICON_NAMES } from '../ui/component-library'; import { ButtonIcon, IconName } from '../ui/component-library';
import { Color } from '../../../helpers/constants/design-system'; import { Color } from '../../../helpers/constants/design-system';
<ButtonIcon as="button" iconName={ICON_NAMES.CLOSE} ariaLabel="Close"/> <ButtonIcon as="button" iconName={IconName.Close} ariaLabel="Close"/>
<ButtonIcon as="a" href="https://metamask.io/" target="_blank" iconName={ICON_NAMES.EXPORT} color={Color.primaryDefault} ariaLabel="Visit MetaMask.io"/> <ButtonIcon as="a" href="https://metamask.io/" target="_blank" iconName={IconName.Export} color={Color.primaryDefault} ariaLabel="Visit MetaMask.io"/>
``` ```
### As ### As
@ -87,12 +87,12 @@ Button `as` options:
</Canvas> </Canvas>
```jsx ```jsx
import { ButtonIcon, ICON_NAMES } from '../ui/component-library'; import { ButtonIcon, IconName } from '../ui/component-library';
import { Color } from '../../../helpers/constants/design-system'; import { Color } from '../../../helpers/constants/design-system';
<ButtonIcon as="button" iconName={ICON_NAMES.CLOSE} ariaLabel="Close"/> <ButtonIcon as="button" iconName={IconName.Close} ariaLabel="Close"/>
<ButtonIcon as="a" href="https://metamask.io/" target="_blank" iconName={ICON_NAMES.EXPORT} color={Color.primaryDefault} ariaLabel="Visit MetaMask.io"/> <ButtonIcon as="a" href="https://metamask.io/" target="_blank" iconName={IconName.Export} color={Color.primaryDefault} ariaLabel="Visit MetaMask.io"/>
``` ```
### Href ### Href
@ -104,13 +104,13 @@ When an `href` prop is passed it will change the element to an anchor(`a`) tag.
</Canvas> </Canvas>
```jsx ```jsx
import { ButtonIcon, ICON_NAMES } from '../ui/component-library'; import { ButtonIcon, IconName } from '../ui/component-library';
import { Color } from '../../../helpers/constants/design-system'; 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={IconName.Export}
color={Color.primaryDefault} color={Color.primaryDefault}
ariaLabel="Visit MetaMask.io" ariaLabel="Visit MetaMask.io"
/>; />;
@ -125,11 +125,11 @@ Use the `color` prop and the `Color` object to change the color of the `ButtonIc
</Canvas> </Canvas>
```jsx ```jsx
import { ButtonIcon, ICON_NAMES } from '../ui/component-library'; import { ButtonIcon, IconName } from '../ui/component-library';
import { Color } from '../../../helpers/constants/design-system'; import { Color } from '../../../helpers/constants/design-system';
<ButtonIcon <ButtonIcon
iconName={ICON_NAMES.EXPORT} iconName={IconName.Export}
color={Color.primaryDefault} color={Color.primaryDefault}
ariaLabel="Visit MetaMask.io" ariaLabel="Visit MetaMask.io"
/>; />;
@ -146,5 +146,5 @@ Use the boolean `disabled` prop to disable button
```jsx ```jsx
import { ButtonIcon } from '../ui/component-library'; import { ButtonIcon } from '../ui/component-library';
<ButtonIcon iconName={ICON_NAMES.CLOSE} disabled ariaLabel="Close" />; <ButtonIcon iconName={IconName.Close} disabled ariaLabel="Close" />;
``` ```

6
ui/components/component-library/button-icon/button-icon.js
View File

@ -13,7 +13,7 @@ import {
} from '../../../helpers/constants/design-system'; } from '../../../helpers/constants/design-system';
import Box from '../../ui/box'; import Box from '../../ui/box';
import { Icon, ICON_NAMES } from '../icon/deprecated'; import { Icon, IconName } from '../icon';
import { BUTTON_ICON_SIZES } from './button-icon.constants'; import { BUTTON_ICON_SIZES } from './button-icon.constants';
@ -84,9 +84,9 @@ ButtonIcon.propTypes = {
*/ */
href: PropTypes.string, href: PropTypes.string,
/** /**
* The name of the icon to display. Should be one of ICON_NAMES * The name of the icon to display. Should be one of IconName
*/ */
iconName: PropTypes.oneOf(Object.values(ICON_NAMES)).isRequired, iconName: PropTypes.oneOf(Object.values(IconName)).isRequired,
/** /**
* iconProps accepts all the props from Icon * iconProps accepts all the props from Icon
*/ */

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

@ -7,7 +7,7 @@ import {
Size, Size,
} from '../../../helpers/constants/design-system'; } from '../../../helpers/constants/design-system';
import Box from '../../ui/box/box'; import Box from '../../ui/box/box';
import { ICON_NAMES } from '../icon/deprecated'; import { IconName } from '..';
import { BUTTON_ICON_SIZES } from './button-icon.constants'; import { BUTTON_ICON_SIZES } from './button-icon.constants';
import { ButtonIcon } from './button-icon'; import { ButtonIcon } from './button-icon';
import README from './README.mdx'; import README from './README.mdx';
@ -62,7 +62,7 @@ export default {
}, },
iconName: { iconName: {
control: 'select', control: 'select',
options: Object.values(ICON_NAMES), options: Object.values(IconName),
}, },
size: { size: {
control: 'select', control: 'select',
@ -94,19 +94,21 @@ export default {
export const DefaultStory = (args) => <ButtonIcon {...args} />; export const DefaultStory = (args) => <ButtonIcon {...args} />;
DefaultStory.args = { DefaultStory.args = {
iconName: ICON_NAMES.CLOSE, iconName: IconName.Close,
ariaLabel: 'Close', ariaLabel: 'Close',
}; };
DefaultStory.storyName = 'Default'; DefaultStory.storyName = 'Default';
export const IconName = (args) => <ButtonIcon {...args} />; export const IconNameStory = (args) => <ButtonIcon {...args} />;
IconName.args = { IconNameStory.args = {
iconName: ICON_NAMES.CLOSE, iconName: IconName.Close,
ariaLabel: 'Close', ariaLabel: 'Close',
}; };
IconNameStory.storyName = 'IconName';
export const SizeStory = (args) => ( export const SizeStory = (args) => (
<Box <Box
display={DISPLAY.FLEX} display={DISPLAY.FLEX}
@ -117,14 +119,14 @@ export const SizeStory = (args) => (
<ButtonIcon <ButtonIcon
{...args} {...args}
size={Size.SM} size={Size.SM}
iconName={ICON_NAMES.CLOSE} iconName={IconName.Close}
ariaLabel="Close" ariaLabel="Close"
/> />
<ButtonIcon <ButtonIcon
{...args} {...args}
size={Size.LG} size={Size.LG}
color={Color.primaryDefault} color={Color.primaryDefault}
iconName={ICON_NAMES.CLOSE} iconName={IconName.Close}
ariaLabel="Close" ariaLabel="Close"
/> />
</Box> </Box>
@ -136,7 +138,7 @@ export const AriaLabel = (args) => (
<> <>
<ButtonIcon <ButtonIcon
as="button" as="button"
iconName={ICON_NAMES.CLOSE} iconName={IconName.Close}
ariaLabel="Close" ariaLabel="Close"
{...args} {...args}
/> />
@ -145,7 +147,7 @@ export const AriaLabel = (args) => (
href="https://metamask.io/" href="https://metamask.io/"
target="_blank" target="_blank"
color={Color.primaryDefault} color={Color.primaryDefault}
iconName={ICON_NAMES.EXPORT} iconName={IconName.Export}
ariaLabel="Visit MetaMask.io" ariaLabel="Visit MetaMask.io"
{...args} {...args}
/> />
@ -154,20 +156,20 @@ export const AriaLabel = (args) => (
export const As = (args) => ( export const As = (args) => (
<Box display={DISPLAY.FLEX} flexDirection={FLEX_DIRECTION.ROW} gap={2}> <Box display={DISPLAY.FLEX} flexDirection={FLEX_DIRECTION.ROW} gap={2}>
<ButtonIcon {...args} iconName={ICON_NAMES.CLOSE} ariaLabel="close" /> <ButtonIcon {...args} iconName={IconName.Close} ariaLabel="close" />
<ButtonIcon <ButtonIcon
as="a" as="a"
href="#" href="#"
{...args} {...args}
color={Color.primaryDefault} color={Color.primaryDefault}
iconName={ICON_NAMES.EXPORT} iconName={IconName.Export}
ariaLabel="demo" ariaLabel="demo"
/> />
</Box> </Box>
); );
export const Href = (args) => ( export const Href = (args) => (
<ButtonIcon iconName={ICON_NAMES.EXPORT} {...args} target="_blank" /> <ButtonIcon iconName={IconName.Export} {...args} target="_blank" />
); );
Href.args = { Href.args = {
@ -177,7 +179,7 @@ Href.args = {
}; };
export const ColorStory = (args) => ( export const ColorStory = (args) => (
<ButtonIcon {...args} iconName={ICON_NAMES.CLOSE} ariaLabel="close" /> <ButtonIcon {...args} iconName={IconName.Close} ariaLabel="close" />
); );
ColorStory.storyName = 'Color'; ColorStory.storyName = 'Color';
@ -186,7 +188,7 @@ ColorStory.args = {
}; };
export const Disabled = (args) => ( export const Disabled = (args) => (
<ButtonIcon {...args} iconName={ICON_NAMES.CLOSE} ariaLabel="close" /> <ButtonIcon {...args} iconName={IconName.Close} ariaLabel="close" />
); );
Disabled.args = { Disabled.args = {

24
ui/components/component-library/button-icon/button-icon.test.js
View File

@ -2,7 +2,7 @@
import { render } from '@testing-library/react'; import { render } from '@testing-library/react';
import React from 'react'; import React from 'react';
import { IconColor } from '../../../helpers/constants/design-system'; import { IconColor } from '../../../helpers/constants/design-system';
import { ICON_NAMES } from '../icon/deprecated'; import { IconName } from '..';
import { BUTTON_ICON_SIZES } from './button-icon.constants'; import { BUTTON_ICON_SIZES } from './button-icon.constants';
import { ButtonIcon } from './button-icon'; import { ButtonIcon } from './button-icon';
@ -11,7 +11,7 @@ describe('ButtonIcon', () => {
const { getByTestId, container } = render( const { getByTestId, container } = render(
<ButtonIcon <ButtonIcon
data-testid="button-icon" data-testid="button-icon"
iconName={ICON_NAMES.ADD_SQUARE} iconName={IconName.AddSquare}
ariaLabel="add" ariaLabel="add"
/>, />,
); );
@ -25,7 +25,7 @@ describe('ButtonIcon', () => {
<ButtonIcon <ButtonIcon
as="a" as="a"
data-testid="button-icon" data-testid="button-icon"
iconName={ICON_NAMES.ADD_SQUARE} iconName={IconName.AddSquare}
ariaLabel="add" ariaLabel="add"
/>, />,
); );
@ -39,7 +39,7 @@ describe('ButtonIcon', () => {
<ButtonIcon <ButtonIcon
href="/metamask" href="/metamask"
data-testid="button-icon" data-testid="button-icon"
iconName={ICON_NAMES.ADD_SQUARE} iconName={IconName.AddSquare}
ariaLabel="add" ariaLabel="add"
/>, />,
); );
@ -51,13 +51,13 @@ describe('ButtonIcon', () => {
const { getByTestId } = render( const { getByTestId } = render(
<> <>
<ButtonIcon <ButtonIcon
iconName={ICON_NAMES.ADD_SQUARE} iconName={IconName.AddSquare}
ariaLabel="add" ariaLabel="add"
size={BUTTON_ICON_SIZES.SM} size={BUTTON_ICON_SIZES.SM}
data-testid={BUTTON_ICON_SIZES.SM} data-testid={BUTTON_ICON_SIZES.SM}
/> />
<ButtonIcon <ButtonIcon
iconName={ICON_NAMES.ADD_SQUARE} iconName={IconName.AddSquare}
ariaLabel="add" ariaLabel="add"
size={BUTTON_ICON_SIZES.LG} size={BUTTON_ICON_SIZES.LG}
data-testid={BUTTON_ICON_SIZES.LG} data-testid={BUTTON_ICON_SIZES.LG}
@ -76,13 +76,13 @@ describe('ButtonIcon', () => {
const { getByTestId } = render( const { getByTestId } = render(
<> <>
<ButtonIcon <ButtonIcon
iconName={ICON_NAMES.ADD_SQUARE} iconName={IconName.AddSquare}
ariaLabel="add" ariaLabel="add"
color={IconColor.iconDefault} color={IconColor.iconDefault}
data-testid={IconColor.iconDefault} data-testid={IconColor.iconDefault}
/> />
<ButtonIcon <ButtonIcon
iconName={ICON_NAMES.ADD_SQUARE} iconName={IconName.AddSquare}
ariaLabel="add" ariaLabel="add"
color={IconColor.errorDefault} color={IconColor.errorDefault}
data-testid={IconColor.errorDefault} data-testid={IconColor.errorDefault}
@ -102,7 +102,7 @@ describe('ButtonIcon', () => {
<ButtonIcon <ButtonIcon
data-testid="classname" data-testid="classname"
className="mm-button-icon--test" className="mm-button-icon--test"
iconName={ICON_NAMES.ADD_SQUARE} iconName={IconName.AddSquare}
ariaLabel="add" ariaLabel="add"
/>, />,
); );
@ -115,7 +115,7 @@ describe('ButtonIcon', () => {
<ButtonIcon <ButtonIcon
disabled disabled
data-testid="disabled" data-testid="disabled"
iconName={ICON_NAMES.ADD_SQUARE} iconName={IconName.AddSquare}
ariaLabel="add" ariaLabel="add"
/> />
</>, </>,
@ -128,7 +128,7 @@ describe('ButtonIcon', () => {
const { getByTestId } = render( const { getByTestId } = render(
<ButtonIcon <ButtonIcon
data-testid="icon" data-testid="icon"
iconName={ICON_NAMES.ADD_SQUARE} iconName={IconName.AddSquare}
ariaLabel="add" ariaLabel="add"
iconProps={{ 'data-testid': 'button-icon' }} iconProps={{ 'data-testid': 'button-icon' }}
/>, />,
@ -139,7 +139,7 @@ describe('ButtonIcon', () => {
it('should render with aria-label', () => { it('should render with aria-label', () => {
const { getByLabelText } = render( const { getByLabelText } = render(
<ButtonIcon iconName={ICON_NAMES.ADD_SQUARE} ariaLabel="add" />, <ButtonIcon iconName={IconName.AddSquare} ariaLabel="add" />,
); );
expect(getByLabelText('add')).toBeDefined(); expect(getByLabelText('add')).toBeDefined();

6
ui/components/component-library/button-link/button-link.stories.js
View File

@ -9,7 +9,7 @@ import {
TextColor, TextColor,
} from '../../../helpers/constants/design-system'; } from '../../../helpers/constants/design-system';
import Box from '../../ui/box/box'; import Box from '../../ui/box/box';
import { ICON_NAMES } from '../icon/deprecated'; import { IconName } from '..';
import { Text } from '../text'; import { Text } from '../text';
import { ButtonLink } from './button-link'; import { ButtonLink } from './button-link';
import { BUTTON_LINK_SIZES } from './button-link.constants'; import { BUTTON_LINK_SIZES } from './button-link.constants';
@ -73,12 +73,12 @@ export default {
}, },
startIconName: { startIconName: {
control: 'select', control: 'select',
options: Object.values(ICON_NAMES), options: Object.values(IconName),
table: { category: 'button base props' }, table: { category: 'button base props' },
}, },
endIconName: { endIconName: {
control: 'select', control: 'select',
options: Object.values(ICON_NAMES), options: Object.values(IconName),
table: { category: 'button base props' }, table: { category: 'button base props' },
}, },
startIconProps: { startIconProps: {

4
ui/components/component-library/button-link/button-link.test.js
View File

@ -2,7 +2,7 @@
import { render } from '@testing-library/react'; import { render } from '@testing-library/react';
import React from 'react'; import React from 'react';
import { Size } from '../../../helpers/constants/design-system'; import { Size } from '../../../helpers/constants/design-system';
import { ICON_NAMES } from '../icon/deprecated'; import { IconName } from '..';
import { ButtonLink } from './button-link'; import { ButtonLink } from './button-link';
import { BUTTON_LINK_SIZES } from './button-link.constants'; import { BUTTON_LINK_SIZES } from './button-link.constants';
@ -82,7 +82,7 @@ describe('ButtonLink', () => {
}); });
it('should render with icon', () => { it('should render with icon', () => {
const { container } = render( const { container } = render(
<ButtonLink data-testid="icon" startIconName={ICON_NAMES.ADD_SQUARE} />, <ButtonLink data-testid="icon" startIconName={IconName.AddSquare} />,
); );
const icons = container.getElementsByClassName('mm-icon').length; const icons = container.getElementsByClassName('mm-icon').length;

6
ui/components/component-library/button-primary/button-primary.stories.js
View File

@ -5,7 +5,7 @@ import {
Size, Size,
} from '../../../helpers/constants/design-system'; } from '../../../helpers/constants/design-system';
import Box from '../../ui/box/box'; import Box from '../../ui/box/box';
import { ICON_NAMES } from '../icon/deprecated'; import { IconName } from '..';
import { ButtonPrimary } from './button-primary'; import { ButtonPrimary } from './button-primary';
import README from './README.mdx'; import README from './README.mdx';
@ -63,12 +63,12 @@ export default {
}, },
startIconName: { startIconName: {
control: 'select', control: 'select',
options: Object.values(ICON_NAMES), options: Object.values(IconName),
table: { category: 'button base props' }, table: { category: 'button base props' },
}, },
endIconName: { endIconName: {
control: 'select', control: 'select',
options: Object.values(ICON_NAMES), options: Object.values(IconName),
table: { category: 'button base props' }, table: { category: 'button base props' },
}, },
startIconProps: { startIconProps: {

7
ui/components/component-library/button-primary/button-primary.test.js
View File

@ -1,7 +1,7 @@
/* eslint-disable jest/require-top-level-describe */ /* eslint-disable jest/require-top-level-describe */
import { render } from '@testing-library/react'; import { render } from '@testing-library/react';
import React from 'react'; import React from 'react';
import { ICON_NAMES } from '../icon/deprecated'; import { IconName } from '..';
import { ButtonPrimary } from './button-primary'; import { ButtonPrimary } from './button-primary';
import { BUTTON_PRIMARY_SIZES } from './button-primary.constants'; import { BUTTON_PRIMARY_SIZES } from './button-primary.constants';
@ -90,10 +90,7 @@ describe('ButtonPrimary', () => {
}); });
it('should render with icon', () => { it('should render with icon', () => {
const { container } = render( const { container } = render(
<ButtonPrimary <ButtonPrimary data-testid="icon" startIconName={IconName.AddSquare} />,
data-testid="icon"
startIconName={ICON_NAMES.ADD_SQUARE}
/>,
); );
const icons = container.getElementsByClassName('mm-icon').length; const icons = container.getElementsByClassName('mm-icon').length;

6
ui/components/component-library/button-secondary/button-secondary.stories.js
View File

@ -5,7 +5,7 @@ import {
Size, Size,
} from '../../../helpers/constants/design-system'; } from '../../../helpers/constants/design-system';
import Box from '../../ui/box/box'; import Box from '../../ui/box/box';
import { ICON_NAMES } from '../icon/deprecated'; import { IconName } from '..';
import { ButtonSecondary } from './button-secondary'; import { ButtonSecondary } from './button-secondary';
import { BUTTON_SECONDARY_SIZES } from './button-secondary.constants'; import { BUTTON_SECONDARY_SIZES } from './button-secondary.constants';
import README from './README.mdx'; import README from './README.mdx';
@ -62,12 +62,12 @@ export default {
}, },
startIconName: { startIconName: {
control: 'select', control: 'select',
options: Object.values(ICON_NAMES), options: Object.values(IconName),
table: { category: 'button base props' }, table: { category: 'button base props' },
}, },
endIconName: { endIconName: {
control: 'select', control: 'select',
options: Object.values(ICON_NAMES), options: Object.values(IconName),
table: { category: 'button base props' }, table: { category: 'button base props' },
}, },
startIconProps: { startIconProps: {

7
ui/components/component-library/button-secondary/button-secondary.test.js
View File

@ -1,7 +1,7 @@
/* eslint-disable jest/require-top-level-describe */ /* eslint-disable jest/require-top-level-describe */
import { render } from '@testing-library/react'; import { render } from '@testing-library/react';
import React from 'react'; import React from 'react';
import { ICON_NAMES } from '../icon/deprecated'; import { IconName } from '..';
import { ButtonSecondary } from './button-secondary'; import { ButtonSecondary } from './button-secondary';
import { BUTTON_SECONDARY_SIZES } from './button-secondary.constants'; import { BUTTON_SECONDARY_SIZES } from './button-secondary.constants';
@ -94,10 +94,7 @@ describe('ButtonSecondary', () => {
}); });
it('should render with icon', () => { it('should render with icon', () => {
const { container } = render( const { container } = render(
<ButtonSecondary <ButtonSecondary data-testid="icon" startIconName={IconName.AddSquare} />,
data-testid="icon"
startIconName={ICON_NAMES.ADD_SQUARE}
/>,
); );
const icons = container.getElementsByClassName('mm-icon').length; const icons = container.getElementsByClassName('mm-icon').length;

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

@ -175,7 +175,7 @@ import { Button } from '../ui/component-library';
### Icon Name ### Icon Name
Use the `startIconName` and/or `endIconName` prop and the `ICON_NAMES` object from `./ui/components/component-library/icon` to select icon. Use the `startIconName` and/or `endIconName` prop and the `IconName` enum from `./ui/components/component-library/icon` to select icon.
Use the [IconSearch](/story/components-componentlibrary-icon--default-story) story to find the icon you want to use. Use the [IconSearch](/story/components-componentlibrary-icon--default-story) story to find the icon you want to use.
@ -185,9 +185,9 @@ Use the [IconSearch](/story/components-componentlibrary-icon--default-story) sto
```jsx ```jsx
import { Button } from '../ui/component-library'; import { Button } from '../ui/component-library';
import { ICON_NAMES } from '../icon'; import { IconName } from '../icon';
<Button startIconName={ICON_NAMES.ADD_SQUARE}>Button</Button>; <Button startIconName={IconName.AddSquare}>Button</Button>;
``` ```
<Canvas> <Canvas>
@ -196,7 +196,7 @@ import { ICON_NAMES } from '../icon';
```jsx ```jsx
import { Button } from '../ui/component-library'; import { Button } from '../ui/component-library';
import { ICON_NAMES } from '../icon'; import { IconName } from '../icon';
<Button endIconName={ICON_NAMES.ARROW_2_RIGHT}>Button</Button>; <Button endIconName={IconName.Arrow2Right}>Button</Button>;
``` ```

10
ui/components/component-library/button/button.stories.js
View File

@ -6,7 +6,7 @@ import {
Size, Size,
TextVariant, TextVariant,
} from '../../../helpers/constants/design-system'; } from '../../../helpers/constants/design-system';
import { ICON_NAMES } from '../icon/deprecated'; import { IconName } from '..';
import { BUTTON_LINK_SIZES } from '../button-link/button-link.constants'; import { BUTTON_LINK_SIZES } from '../button-link/button-link.constants';
import Box from '../../ui/box/box'; import Box from '../../ui/box/box';
import { Text } from '../text'; import { Text } from '../text';
@ -66,11 +66,11 @@ export default {
}, },
startIconName: { startIconName: {
control: 'select', control: 'select',
options: Object.values(ICON_NAMES), options: Object.values(IconName),
}, },
endIconName: { endIconName: {
control: 'select', control: 'select',
options: Object.values(ICON_NAMES), options: Object.values(IconName),
}, },
startIconProps: { startIconProps: {
control: 'object', control: 'object',
@ -214,13 +214,13 @@ Loading.args = {
}; };
export const StartIconName = (args) => ( export const StartIconName = (args) => (
<Button {...args} startIconName={ICON_NAMES.ADD_SQUARE}> <Button {...args} startIconName={IconName.AddSquare}>
Button Button
</Button> </Button>
); );
export const EndIconName = (args) => ( export const EndIconName = (args) => (
<Button {...args} endIconName={ICON_NAMES.ARROW_2_RIGHT}> <Button {...args} endIconName={IconName.Arrow2Right}>
Button Button
</Button> </Button>
); );

4
ui/components/component-library/button/button.test.js
View File

@ -1,7 +1,7 @@
/* eslint-disable jest/require-top-level-describe */ /* eslint-disable jest/require-top-level-describe */
import { render } from '@testing-library/react'; import { render } from '@testing-library/react';
import React from 'react'; import React from 'react';
import { ICON_NAMES } from '../icon/deprecated'; import { IconName } from '..';
import { BUTTON_SIZES, BUTTON_TYPES } from './button.constants'; import { BUTTON_SIZES, BUTTON_TYPES } from './button.constants';
import { Button } from './button'; import { Button } from './button';
@ -134,7 +134,7 @@ describe('Button', () => {
const { getByTestId } = render( const { getByTestId } = render(
<Button <Button
data-testid="icon" data-testid="icon"
startIconName={ICON_NAMES.ADD_SQUARE} startIconName={IconName.AddSquare}
startIconProps={{ 'data-testid': 'start-button-icon' }} startIconProps={{ 'data-testid': 'start-button-icon' }}
> >
Button Button

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

@ -99,7 +99,7 @@ import {
ButtonPrimary, ButtonPrimary,
ButtonSecondary, ButtonSecondary,
FormTextField, FormTextField,
ICON_NAMES, IconName,
Text, Text,
} from '../../component-library'; } from '../../component-library';
@ -229,7 +229,7 @@ return (
<ButtonPrimary type="submit">Submit</ButtonPrimary> <ButtonPrimary type="submit">Submit</ButtonPrimary>
</Box> </Box>
</Box> </Box>
<ButtonSecondary icon={ICON_NAMES.CLOSE} onClick={handleClearForm} danger> <ButtonSecondary icon={IconName.Close} onClick={handleClearForm} danger>
Clear form Clear form
</ButtonSecondary> </ButtonSecondary>
{submitted === FORM_STATE.SUCCESS && ( {submitted === FORM_STATE.SUCCESS && (
@ -264,7 +264,7 @@ import {
import Box from '../../ui/box/box'; import Box from '../../ui/box/box';
import { Icon, ICON_NAMES } from '../icon/deprecated' import { Icon, IconName } from '..'
import { import {
ButtonLink, ButtonLink,
FormTextField, FormTextField,
@ -293,8 +293,8 @@ import {
Custom spending cap Custom spending cap
</Label> </Label>
<Icon <Icon
name={ICON_NAMES.INFO} name={IconName.Info}
size={Size.SM} size={IconSize.Sm}
marginLeft={1} marginLeft={1}
color={IconColor.iconAlternative} color={IconColor.iconAlternative}
/> />

11
ui/components/component-library/form-text-field/form-text-field.stories.js
View File

@ -2,7 +2,6 @@ import React, { useState, useEffect } from 'react';
import { useArgs } from '@storybook/client-api'; import { useArgs } from '@storybook/client-api';
import { import {
Size,
DISPLAY, DISPLAY,
AlignItems, AlignItems,
TextVariant, TextVariant,
@ -12,7 +11,6 @@ import {
} from '../../../helpers/constants/design-system'; } from '../../../helpers/constants/design-system';
import Box from '../../ui/box/box'; import Box from '../../ui/box/box';
import { Icon, ICON_NAMES } from '../icon/deprecated';
import { import {
ButtonLink, ButtonLink,
ButtonPrimary, ButtonPrimary,
@ -22,6 +20,9 @@ import {
Text, Text,
TEXT_FIELD_SIZES, TEXT_FIELD_SIZES,
TEXT_FIELD_TYPES, TEXT_FIELD_TYPES,
Icon,
IconName,
IconSize,
} from '..'; } from '..';
import { FormTextField } from './form-text-field'; import { FormTextField } from './form-text-field';
@ -372,7 +373,7 @@ export const FormExample = () => {
<ButtonPrimary type="submit">Submit</ButtonPrimary> <ButtonPrimary type="submit">Submit</ButtonPrimary>
</Box> </Box>
</Box> </Box>
<ButtonSecondary icon={ICON_NAMES.CLOSE} onClick={handleClearForm} danger> <ButtonSecondary icon={IconName.Close} onClick={handleClearForm} danger>
Clear form Clear form
</ButtonSecondary> </ButtonSecondary>
{submitted === FORM_STATE.SUCCESS && ( {submitted === FORM_STATE.SUCCESS && (
@ -405,8 +406,8 @@ export const CustomLabelOrHelpText = () => (
import the Label component separately */} import the Label component separately */}
<Label htmlFor="custom-spending-cap">Custom spending cap</Label> <Label htmlFor="custom-spending-cap">Custom spending cap</Label>
<Icon <Icon
name={ICON_NAMES.INFO} name={IconName.Info}
size={Size.SM} size={IconSize.Sm}
marginLeft={1} marginLeft={1}
color={IconColor.iconAlternative} color={IconColor.iconAlternative}
/> />

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

@ -28,8 +28,7 @@ The `HelpText` accepts all props below as well as all [Box](/docs/components-ui-
```jsx ```jsx
import { Size, IconColor } from '../../../helpers/constants/design-system'; import { Size, IconColor } from '../../../helpers/constants/design-system';
import { Icon, ICON_NAMES } from '../../icon/deprecated'; import { HelpText, Icon, IconName, IconSize } from '../../component-library';
import { HelpText } from '../../component-library';
<HelpText>Plain text</HelpText> // renders as <p>Plain text</p> <HelpText>Plain text</HelpText> // renders as <p>Plain text</p>
<HelpText> <HelpText>
@ -37,8 +36,8 @@ import { HelpText } from '../../component-library';
<Icon <Icon
marginLeft={1} marginLeft={1}
color={IconColor.iconAlternative} color={IconColor.iconAlternative}
name={ICON_NAMES.WARNING} name={IconName.Warning}
size={Size.inherit} size={IconSize.Inherit}
/> />
</HelpText> // renders as <div><span>Text and icon</span> <div style={{background: icon/warning.svg}} /></div> </HelpText> // renders as <div><span>Text and icon</span> <div style={{background: icon/warning.svg}} /></div>
``` ```

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

@ -4,13 +4,12 @@ import {
FLEX_DIRECTION, FLEX_DIRECTION,
IconColor, IconColor,
TextColor, TextColor,
Size,
SEVERITIES, SEVERITIES,
} from '../../../helpers/constants/design-system'; } from '../../../helpers/constants/design-system';
import Box from '../../ui/box'; import Box from '../../ui/box';
import { Icon, ICON_NAMES } from '../icon/deprecated'; import { Icon, IconName, IconSize } from '..';
import { HelpText } from './help-text'; import { HelpText } from './help-text';
@ -59,8 +58,8 @@ export const Children = (args) => (
<Icon <Icon
marginLeft={1} marginLeft={1}
color={IconColor.iconAlternative} color={IconColor.iconAlternative}
name={ICON_NAMES.WARNING} name={IconName.Warning}
size={Size.inherit} size={IconSize.Inherit}
as="span" as="span"
/> />
</HelpText> </HelpText>

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

@ -2,7 +2,7 @@
import { render } from '@testing-library/react'; import { render } from '@testing-library/react';
import React from 'react'; import React from 'react';
import { Color, SEVERITIES } from '../../../helpers/constants/design-system'; import { Color, SEVERITIES } from '../../../helpers/constants/design-system';
import { Icon, ICON_NAMES } from '../icon/deprecated'; import { Icon, IconName } from '..';
import { HelpText } from './help-text'; import { HelpText } from './help-text';
@ -25,8 +25,7 @@ describe('HelpText', () => {
it('should render with react nodes inside the HelpText', () => { it('should render with react nodes inside the HelpText', () => {
const { getByText, getByTestId } = render( const { getByText, getByTestId } = render(
<HelpText> <HelpText>
help text{' '} help text <Icon name={IconName.Warning} data-testid="icon" as="span" />
<Icon name={ICON_NAMES.WARNING} data-testid="icon" as="span" />
</HelpText>, </HelpText>,
); );
expect(getByText('help text')).toBeDefined(); expect(getByText('help text')).toBeDefined();
@ -67,7 +66,7 @@ describe('HelpText', () => {
<> <>
<HelpText>help text as p</HelpText> <HelpText>help text as p</HelpText>
<HelpText data-testid="help-text-div"> <HelpText data-testid="help-text-div">
<span>help text as div</span> <Icon name={ICON_NAMES.WARNING} /> <span>help text as div</span> <Icon name={IconName.Warning} />
</HelpText> </HelpText>
</>, </>,
); );

7
ui/components/component-library/label/README.mdx
View File

@ -32,16 +32,15 @@ The `children` of the label can be text or a react node
```jsx ```jsx
import { DISPLAY, AlignItems, FLEX_DIRECTION, Size, IconColor } from '../../../helpers/constants/design-system'; import { DISPLAY, AlignItems, FLEX_DIRECTION, Size, IconColor } from '../../../helpers/constants/design-system';
import { Icon, ICON_NAMES } from '../../component-library/icon/deprecated'; import { Label, TextField, Icon, IconName, IconSize } from '../../component-library';
import { Label, TextField } from '../../component-library';
<Label>Plain text</Label> <Label>Plain text</Label>
<Label display={DISPLAY.FLEX} alignItems={AlignItems.flexStart}> <Label display={DISPLAY.FLEX} alignItems={AlignItems.flexStart}>
Text and icon Text and icon
<Icon <Icon
color={IconColor.iconAlternative} color={IconColor.iconAlternative}
name={ICON_NAMES.INFO} name={IconName.Info}
size={Size.inherit} size={IconSize.Inherit}
/> />
</Label> </Label>
<Label <Label

8
ui/components/component-library/label/label.stories.js
View File

@ -2,15 +2,13 @@ import React, { useState } from 'react';
import { import {
DISPLAY, DISPLAY,
FLEX_DIRECTION, FLEX_DIRECTION,
Size,
AlignItems, AlignItems,
IconColor, IconColor,
} from '../../../helpers/constants/design-system'; } from '../../../helpers/constants/design-system';
import Box from '../../ui/box'; import Box from '../../ui/box';
import { Icon, ICON_NAMES } from '../icon/deprecated'; import { TextField, Icon, IconName, IconSize } from '..';
import { TextField } from '..';
import { Label } from './label'; import { Label } from './label';
@ -57,8 +55,8 @@ export const Children = (args) => (
Text and icon Text and icon
<Icon <Icon
color={IconColor.iconAlternative} color={IconColor.iconAlternative}
name={ICON_NAMES.INFO} name={IconName.Info}
size={Size.inherit} size={IconSize.Inherit}
/> />
</Label> </Label>
<Label <Label

4
ui/components/component-library/label/label.test.js
View File

@ -1,7 +1,7 @@
/* eslint-disable jest/require-top-level-describe */ /* eslint-disable jest/require-top-level-describe */
import { fireEvent, render } from '@testing-library/react'; import { fireEvent, render } from '@testing-library/react';
import React from 'react'; import React from 'react';
import { Icon, ICON_NAMES } from '../icon/deprecated'; import { Icon, IconName } from '..';
import { TextField } from '../text-field'; import { TextField } from '../text-field';
import { Label } from './label'; import { Label } from './label';
@ -21,7 +21,7 @@ describe('label', () => {
const { getByText, getByTestId } = render( const { getByText, getByTestId } = render(
<Label> <Label>
label label
<Icon name={ICON_NAMES.INFO} data-testid="icon" /> <Icon name={IconName.Info} data-testid="icon" />
</Label>, </Label>,
); );
expect(getByText('label')).toBeDefined(); expect(getByText('label')).toBeDefined();

8
ui/components/component-library/picker-network/picker-network.js
View File

@ -2,7 +2,7 @@ import React from 'react';
import PropTypes from 'prop-types'; import PropTypes from 'prop-types';
import classnames from 'classnames'; import classnames from 'classnames';
import { AvatarNetwork } from '../avatar-network'; import { AvatarNetwork } from '../avatar-network';
import { Icon, ICON_NAMES } from '../icon/deprecated'; import { IconName, Icon, IconSize } from '../icon';
import { Text } from '../text'; import { Text } from '../text';
import Box from '../../ui/box'; import Box from '../../ui/box';
import { import {
@ -48,9 +48,9 @@ export const PickerNetwork = ({
</Text> </Text>
<Icon <Icon
className="mm-picker-network__arrow-down-icon" className="mm-picker-network__arrow-down-icon"
name={ICON_NAMES.ARROW_DOWN} name={IconName.ArrowDown}
color={IconColor.iconDefault} color={IconColor.iconDefault}
size={Size.XS} size={IconSize.Xs}
{...iconProps} {...iconProps}
/> />
</Box> </Box>
@ -73,7 +73,7 @@ PickerNetwork.propTypes = {
/** /**
* It accepts all the props from Icon * It accepts all the props from Icon
*/ */
iconProps: PropTypes.shape(Icon.PropTypes), iconProps: PropTypes.object,
/** /**
* The text content of the PickerNetwork component * The text content of the PickerNetwork component
*/ */

10
ui/components/component-library/tag-url/tag-url.js
View File

@ -13,9 +13,7 @@ import {
Size, Size,
TextVariant, TextVariant,
} from '../../../helpers/constants/design-system'; } from '../../../helpers/constants/design-system';
import { AvatarFavicon } from '../avatar-favicon'; import { AvatarFavicon, ButtonLink, IconName, Icon, IconSize } from '..';
import { ButtonLink } from '../button-link';
import { Icon, ICON_NAMES } from '../icon/deprecated';
export const TagUrl = ({ export const TagUrl = ({
label, label,
@ -47,9 +45,9 @@ export const TagUrl = ({
{showLockIcon && ( {showLockIcon && (
<Icon <Icon
className="mm-tag-url__lock-icon" className="mm-tag-url__lock-icon"
name={ICON_NAMES.LOCK} name={IconName.Lock}
color={IconColor.iconAlternative} color={IconColor.iconAlternative}
size={Size.SM} size={IconSize.Sm}
aria-label="https://" aria-label="https://"
role="img" role="img"
{...lockIconProps} {...lockIconProps}
@ -91,7 +89,7 @@ TagUrl.propTypes = {
/** /**
* It accepts all the props from Icon * It accepts all the props from Icon
*/ */
lockIconProps: PropTypes.shape(Icon.PropTypes), lockIconProps: PropTypes.object,
/** /**
* The text content of the TagUrl component * The text content of the TagUrl component
*/ */

7
ui/components/component-library/text-field-search/text-field-search.js
View File

@ -4,8 +4,7 @@ import classnames from 'classnames';
import { Size } from '../../../helpers/constants/design-system'; import { Size } from '../../../helpers/constants/design-system';
import { ButtonIcon } from '../button-icon'; import { ButtonIcon, Icon, IconName, IconSize } from '..';
import { Icon, ICON_NAMES } from '../icon/deprecated';
import { TextField, TEXT_FIELD_TYPES } from '../text-field'; import { TextField, TEXT_FIELD_TYPES } from '../text-field';
export const TextFieldSearch = ({ export const TextFieldSearch = ({
@ -30,7 +29,7 @@ export const TextFieldSearch = ({
<ButtonIcon <ButtonIcon
className="mm-text-field__button-clear" className="mm-text-field__button-clear"
ariaLabel="Clear" // TODO: i18n ariaLabel="Clear" // TODO: i18n
iconName={ICON_NAMES.CLOSE} iconName={IconName.Close}
size={Size.SM} size={Size.SM}
onClick={clearButtonOnClick} onClick={clearButtonOnClick}
{...clearButtonProps} {...clearButtonProps}
@ -41,7 +40,7 @@ export const TextFieldSearch = ({
endAccessory endAccessory
) )
} }
startAccessory={<Icon name={ICON_NAMES.SEARCH} size={Size.SM} />} startAccessory={<Icon name={IconName.Search} size={IconSize.Sm} />}
inputProps={{ inputProps={{
marginRight: showClearButton ? 6 : 0, marginRight: showClearButton ? 6 : 0,
...inputProps, ...inputProps,

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

@ -90,7 +90,7 @@ Use the `startAccessory` and `endAccessory` props to add components such as icon
```jsx ```jsx
import { Color, IconColor, SIZES, DISPLAY } from '../../../helpers/constants/design-system'; import { Color, IconColor, SIZES, DISPLAY } from '../../../helpers/constants/design-system';
import { Icon, ICON_NAMES } from '../../component-library/deprecated' import { Icon, IconName } from '../../component-library/deprecated'
import { ButtonIcon, TextField } from '../../component-library'; import { ButtonIcon, TextField } from '../../component-library';
<TextField <TextField
@ -98,7 +98,7 @@ import { ButtonIcon, TextField } from '../../component-library';
startAccessory={ startAccessory={
<Icon <Icon
color={IconColor.iconAlternative} color={IconColor.iconAlternative}
name={ICON_NAMES.SEARCH} name={IconName.Search}
/> />
} }
/> />
@ -107,7 +107,7 @@ import { ButtonIcon, TextField } from '../../component-library';
placeholder="Public address (0x), or ENS" placeholder="Public address (0x), or ENS"
endAccessory={ endAccessory={
<ButtonIcon <ButtonIcon
iconName={ICON_NAMES.SCAN_BARCODE} iconName={IconName.ScanBarcode}
ariaLabel="Scan QR code" ariaLabel="Scan QR code"
iconProps={{ color: IconColor.primaryDefault }} iconProps={{ color: IconColor.primaryDefault }}
/> />
@ -129,7 +129,7 @@ import { ButtonIcon, TextField } from '../../component-library';
endAccessory={ endAccessory={
isAddressValid && ( isAddressValid && (
<Icon <Icon
name={ICON_NAMES.CHECK} name={IconName.Check}
color={IconColor.successDefault} color={IconColor.successDefault}
/> />
) )
@ -206,7 +206,7 @@ To function fully the custom component should accept the following props:
</Canvas> </Canvas>
```jsx ```jsx
import { TextField, Icon, ICON_NAMES } from '../../component-library'; import { TextField, Icon, IconName } from '../../component-library';
// 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>;
@ -216,7 +216,7 @@ const TextFieldCustomInput = (args) => (
size={SIZES.LG} size={SIZES.LG}
InputComponent={CustomInputComponent} InputComponent={CustomInputComponent}
startAccessory={ startAccessory={
<Icon color={IconColor.iconAlternative} name={ICON_NAMES.WALLET} /> <Icon color={IconColor.iconAlternative} name={IconName.Wallet} />
} }
/> />
); );

17
ui/components/component-library/text-field/text-field.stories.js
View File

@ -21,10 +21,11 @@ import {
Button, Button,
ButtonIcon, ButtonIcon,
Text, Text,
IconName,
Icon,
IconSize,
} from '..'; } from '..';
import { ICON_NAMES, Icon } from '../icon/deprecated';
import { TEXT_FIELD_SIZES, TEXT_FIELD_TYPES } from './text-field.constants'; import { TEXT_FIELD_SIZES, TEXT_FIELD_TYPES } from './text-field.constants';
import { TextField } from './text-field'; import { TextField } from './text-field';
@ -240,7 +241,7 @@ export const StartAccessoryEndAccessory = (args) => {
name="search" name="search"
onChange={handleOnChange} onChange={handleOnChange}
startAccessory={ startAccessory={
<Icon color={IconColor.iconAlternative} name={ICON_NAMES.SEARCH} /> <Icon color={IconColor.iconAlternative} name={IconName.Search} />
} }
/> />
<TextField <TextField
@ -251,7 +252,7 @@ export const StartAccessoryEndAccessory = (args) => {
onChange={handleOnChange} onChange={handleOnChange}
endAccessory={ endAccessory={
<ButtonIcon <ButtonIcon
iconName={ICON_NAMES.SCAN_BARCODE} iconName={IconName.ScanBarcode}
ariaLabel="Scan QR code" ariaLabel="Scan QR code"
iconProps={{ color: IconColor.primaryDefault }} iconProps={{ color: IconColor.primaryDefault }}
/> />
@ -281,9 +282,9 @@ export const StartAccessoryEndAccessory = (args) => {
/> />
<Text>ETH</Text> <Text>ETH</Text>
<Icon <Icon
name={ICON_NAMES.ARROW_DOWN} name={IconName.ArrowDown}
color={IconColor.iconDefault} color={IconColor.iconDefault}
size={Size.SM} size={IconSize.Sm}
/> />
</Box> </Box>
} }
@ -314,7 +315,7 @@ export const StartAccessoryEndAccessory = (args) => {
} }
endAccessory={ endAccessory={
value.accountAddress.length === 42 && ( value.accountAddress.length === 42 && (
<Icon name={ICON_NAMES.CHECK} color={IconColor.successDefault} /> <Icon name={IconName.Check} color={IconColor.successDefault} />
) )
} }
/> />
@ -464,7 +465,7 @@ export const InputComponent = (args) => (
size={Size.LG} size={Size.LG}
InputComponent={CustomInputComponent} InputComponent={CustomInputComponent}
startAccessory={ startAccessory={
<Icon color={IconColor.iconAlternative} name={ICON_NAMES.WALLET} /> <Icon color={IconColor.iconAlternative} name={IconName.Wallet} />
} }
/> />
); );