diff --git a/.storybook/main.js b/.storybook/main.js index 0b6f3a62b..9a7c342c7 100644 --- a/.storybook/main.js +++ b/.storybook/main.js @@ -1,39 +1,42 @@ const path = require('path'); -const { - ProvidePlugin -} = require('webpack'); +const { ProvidePlugin } = require('webpack'); const CopyWebpackPlugin = require('copy-webpack-plugin'); -const { - generateIconNames -} = require('../development/generate-icon-names'); module.exports = { core: { - disableTelemetry: true + disableTelemetry: true, }, features: { - buildStoriesJson: true + buildStoriesJson: true, }, - stories: ['../ui/**/*.stories.js', '../ui/**/*.stories.tsx', '../ui/**/*.stories.mdx', './*.stories.mdx'], - addons: ['@storybook/addon-essentials', '@storybook/addon-actions', '@storybook/addon-a11y', '@storybook/addon-knobs', './i18n-party-addon/register.js', 'storybook-dark-mode', '@whitespace/storybook-addon-html', '@storybook/addon-mdx-gfm'], + stories: [ + '../ui/**/*.stories.js', + '../ui/**/*.stories.tsx', + '../ui/**/*.stories.mdx', + './*.stories.mdx', + ], + addons: [ + '@storybook/addon-essentials', + '@storybook/addon-actions', + '@storybook/addon-a11y', + '@storybook/addon-knobs', + './i18n-party-addon/register.js', + 'storybook-dark-mode', + '@whitespace/storybook-addon-html', + '@storybook/addon-mdx-gfm', + ], staticDirs: ['../app', './images'], // Uses babel.config.js settings and prevents "Missing class properties transform" error - babel: async options => ({ - overrides: options.overrides + babel: async (options) => ({ + overrides: options.overrides, }), - // Sets env variables https://storybook.js.org/docs/react/configure/environment-variables/ - env: async config => { - return { - ...config, - // Creates the icon names environment variable for the component-library/icon/icon.js component - ICON_NAMES: generateIconNames() - }; - }, - webpackFinal: async config => { + webpackFinal: async (config) => { config.context = process.cwd(); config.node = { - __filename: true + __filename: true, }; - config.resolve.alias['webextension-polyfill'] = require.resolve('../ui/__mocks__/webextension-polyfill.js'); + config.resolve.alias['webextension-polyfill'] = require.resolve( + '../ui/__mocks__/webextension-polyfill.js', + ); config.resolve.fallback = { child_process: false, constants: false, @@ -45,44 +48,61 @@ module.exports = { path: false, stream: require.resolve('stream-browserify'), zlib: false, - _stream_transform: require.resolve('readable-stream/lib/_stream_transform.js'), + _stream_transform: require.resolve( + 'readable-stream/lib/_stream_transform.js', + ), }; config.module.strictExportPresence = true; config.module.rules.push({ test: /\.scss$/, - use: ['style-loader', { - loader: 'css-loader', - options: { - import: false, - url: false - } - }, { - loader: 'sass-loader', - options: { - sourceMap: true, - implementation: require('sass'), - sassOptions: { - includePaths: ['ui/css/'] - } - } - }] + use: [ + 'style-loader', + { + loader: 'css-loader', + options: { + import: false, + url: false, + }, + }, + { + loader: 'sass-loader', + options: { + sourceMap: true, + implementation: require('sass'), + sassOptions: { + includePaths: ['ui/css/'], + }, + }, + }, + ], }); - config.plugins.push(new CopyWebpackPlugin({ - patterns: [{ - from: path.join('node_modules', '@fortawesome', 'fontawesome-free', 'webfonts'), - to: path.join('fonts', 'fontawesome') - }] - })); - config.plugins.push(new ProvidePlugin({ - Buffer: ['buffer', 'Buffer'] - })); + config.plugins.push( + new CopyWebpackPlugin({ + patterns: [ + { + from: path.join( + 'node_modules', + '@fortawesome', + 'fontawesome-free', + 'webfonts', + ), + to: path.join('fonts', 'fontawesome'), + }, + ], + }), + ); + config.plugins.push( + new ProvidePlugin({ + Buffer: ['buffer', 'Buffer'], + }), + ); return config; }, docs: { - autodocs: true + autodocs: true, }, framework: { name: '@storybook/react-webpack5', - options: {} - } + options: {}, + }, }; diff --git a/builds.yml b/builds.yml index 942fa55a2..950e5249e 100644 --- a/builds.yml +++ b/builds.yml @@ -200,8 +200,6 @@ env: # Also see DEBUG and NODE_DEBUG - METAMASK_DEBUG: false # Modified in /development/build/scripts.js:@setEnvironmentVariables - - ICON_NAMES - # Modified in /development/build/scripts.js:@setEnvironmentVariables - IN_TEST # Modified in /development/build/scripts.js:@setEnvironmentVariables - METAMASK_ENVIRONMENT diff --git a/development/build/scripts.js b/development/build/scripts.js index 8f65f863c..e1a8275b6 100644 --- a/development/build/scripts.js +++ b/development/build/scripts.js @@ -33,7 +33,6 @@ const bifyModuleGroups = require('bify-module-groups'); const phishingWarningManifest = require('@metamask/phishing-warning/package.json'); const { streamFlatMap } = require('../stream-flat-map'); -const { generateIconNames } = require('../generate-icon-names'); const { BUILD_TARGETS, ENVIRONMENT } = require('./constants'); const { getConfig } = require('./config'); const { @@ -1182,10 +1181,8 @@ async function setEnvironmentVariables({ }) { const devMode = isDevBuild(buildTarget); const testing = isTestBuild(buildTarget); - const iconNames = await generateIconNames(); variables.set({ - ICON_NAMES: iconNames, IN_TEST: testing, INFURA_PROJECT_ID: getInfuraProjectId({ buildType, diff --git a/development/generate-icon-names.js b/development/generate-icon-names.js deleted file mode 100644 index 9ac8d108d..000000000 --- a/development/generate-icon-names.js +++ /dev/null @@ -1,42 +0,0 @@ -/** - * Generate icon names - * - * Reads all the icon svg files in app/images/icons - * and returns an object of icon name key value pairs - * stored in the environment variable ICON_NAMES - * Used with the Icon component in ./ui/components/component-library/icon/icon.js - */ -const fs = require('fs'); -const path = require('path'); - -const SVG_ICONS_FOLDER = './app/images/icons'; -const ASSET_EXT = '.svg'; - -const getIconNameKebabCase = (fileName) => path.basename(fileName, ASSET_EXT); - -const getIconNameInSnakeCase = (fileName) => - path.basename(fileName, ASSET_EXT).replace(/-/gu, '_').toUpperCase(); - -const generateIconNames = () => { - const iconNames = {}; - - const svgIconsFolderPath = path.join(__dirname, `../${SVG_ICONS_FOLDER}`); - - const fileList = fs.readdirSync(svgIconsFolderPath); - - const svgIconsFileList = fileList.filter( - (fileName) => path.extname(fileName) === ASSET_EXT, - ); - - svgIconsFileList.forEach( - (fileName) => - (iconNames[getIconNameInSnakeCase(fileName)] = - getIconNameKebabCase(fileName)), - ); - - const iconNamesStringified = JSON.stringify(iconNames); - - return iconNamesStringified; -}; - -module.exports = { generateIconNames }; diff --git a/jest.config.js b/jest.config.js index a3813632b..35c9f342c 100644 --- a/jest.config.js +++ b/jest.config.js @@ -32,11 +32,7 @@ module.exports = { // TODO: enable resetMocks // resetMocks: true, restoreMocks: true, - setupFiles: [ - '/test/setup.js', - '/test/env.js', - '/test/jest/env.js', // jest specific env vars that break mocha tests - ], + setupFiles: ['/test/setup.js', '/test/env.js'], setupFilesAfterEnv: ['/test/jest/setup.js'], testMatch: [ '/app/scripts/constants/error-utils.test.js', diff --git a/test/jest/env.js b/test/jest/env.js deleted file mode 100644 index c272b9839..000000000 --- a/test/jest/env.js +++ /dev/null @@ -1,9 +0,0 @@ -// jest specific env vars that break mocha tests -import { generateIconNames } from '../../development/generate-icon-names'; - -/** - * Used for testing components that use the Icon component - * 'ui/components/component-library/icon/icon.js' - */ - -process.env.ICON_NAMES = generateIconNames(); diff --git a/ui/components/app/dropdowns/network-dropdown.js b/ui/components/app/dropdowns/network-dropdown.js index 1fa626fc6..a1d4e8fe0 100644 --- a/ui/components/app/dropdowns/network-dropdown.js +++ b/ui/components/app/dropdowns/network-dropdown.js @@ -33,8 +33,8 @@ import { ADD_POPULAR_CUSTOM_NETWORK, ADVANCED_ROUTE, } from '../../../helpers/constants/routes'; -import { ButtonIcon } from '../../component-library/button-icon/deprecated'; -import { Icon, IconName, IconSize } from '../../component-library'; + +import { Icon, IconName, IconSize, ButtonIcon } from '../../component-library'; import { Dropdown, DropdownMenuItem } from './dropdown'; diff --git a/ui/components/app/wallet-overview/token-overview.js b/ui/components/app/wallet-overview/token-overview.js index fff89e457..af2a3232e 100644 --- a/ui/components/app/wallet-overview/token-overview.js +++ b/ui/components/app/wallet-overview/token-overview.js @@ -37,10 +37,14 @@ import { import { AssetType } from '../../../../shared/constants/transaction'; import useRamps from '../../../hooks/experiences/useRamps'; -import { ButtonIcon, Icon, IconName } from '../../component-library'; +import { + ButtonIcon, + ButtonIconSize, + Icon, + IconName, +} from '../../component-library'; import { IconColor } from '../../../helpers/constants/design-system'; -import { BUTTON_ICON_SIZES } from '../../component-library/button-icon/deprecated'; import { getPortfolioUrl } from '../../../helpers/utils/portfolio'; import WalletOverview from './wallet-overview'; @@ -95,7 +99,7 @@ const TokenOverview = ({ className, token }) => { color={IconColor.primaryDefault} iconName={IconName.Diagram} ariaLabel={t('portfolio')} - size={BUTTON_ICON_SIZES.LG} + size={ButtonIconSize.Lg} onClick={() => { const portfolioUrl = getPortfolioUrl('', 'ext', metaMetricsId); global.platform.openTab({ diff --git a/ui/components/component-library/banner-base/banner-base.js b/ui/components/component-library/banner-base/banner-base.js index fa4d39464..adb28f82d 100644 --- a/ui/components/component-library/banner-base/banner-base.js +++ b/ui/components/component-library/banner-base/banner-base.js @@ -1,20 +1,19 @@ import React from 'react'; import PropTypes from 'prop-types'; import classnames from 'classnames'; -import { ButtonIcon } from '../button-icon/deprecated'; -import { ButtonLink, Text } from '..'; -import { ICON_NAMES } from '../icon/deprecated'; - -import Box from '../../ui/box'; import { BackgroundColor, BorderRadius, - DISPLAY, + Display, Size, TextVariant, } from '../../../helpers/constants/design-system'; +import Box from '../../ui/box'; + +import { ButtonLink, Text, IconName, ButtonIcon } from '..'; + export const BannerBase = ({ className, title, @@ -33,7 +32,7 @@ export const BannerBase = ({ return ( - - -`; diff --git a/ui/components/component-library/button-icon/deprecated/button-icon.constants.js b/ui/components/component-library/button-icon/deprecated/button-icon.constants.js deleted file mode 100644 index de770633f..000000000 --- a/ui/components/component-library/button-icon/deprecated/button-icon.constants.js +++ /dev/null @@ -1,6 +0,0 @@ -import { Size } from '../../../../helpers/constants/design-system'; - -export const BUTTON_ICON_SIZES = { - SM: Size.SM, - LG: Size.LG, -}; diff --git a/ui/components/component-library/button-icon/deprecated/button-icon.js b/ui/components/component-library/button-icon/deprecated/button-icon.js deleted file mode 100644 index bf3ecc9e8..000000000 --- a/ui/components/component-library/button-icon/deprecated/button-icon.js +++ /dev/null @@ -1,103 +0,0 @@ -import React from 'react'; -import PropTypes from 'prop-types'; -import classnames from 'classnames'; - -import { - AlignItems, - BackgroundColor, - BorderRadius, - DISPLAY, - IconColor, - JustifyContent, - Size, -} from '../../../../helpers/constants/design-system'; - -import Box from '../../../ui/box'; -import { Icon, ICON_NAMES } from '../../icon/deprecated'; - -import { BUTTON_ICON_SIZES } from './button-icon.constants'; - -export const ButtonIcon = ({ - ariaLabel, - as = 'button', - className, - color = IconColor.iconDefault, - href, - size = Size.LG, - iconName, - disabled, - iconProps, - ...props -}) => { - const Tag = href ? 'a' : as; - return ( - - - - ); -}; - -ButtonIcon.propTypes = { - /** - * String that adds an accessible name for ButtonIcon - */ - ariaLabel: PropTypes.string.isRequired, - /** - * The polymorphic `as` prop allows you to change the root HTML element of the Button component between `button` and `a` tag - */ - as: PropTypes.string, - /** - * An additional className to apply to the ButtonIcon. - */ - className: PropTypes.string, - /** - * The color of the ButtonIcon component should use the IconColor object from - * ./ui/helpers/constants/design-system.js - */ - color: PropTypes.oneOf(Object.values(IconColor)), - /** - * Boolean to disable button - */ - disabled: PropTypes.bool, - /** - * When an `href` prop is passed, ButtonIcon will automatically change the root element to be an `a` (anchor) tag - */ - href: PropTypes.string, - /** - * The name of the icon to display. Should be one of IconName - */ - iconName: PropTypes.oneOf(Object.values(ICON_NAMES)).isRequired, - /** - * iconProps accepts all the props from Icon - */ - iconProps: PropTypes.object, - /** - * The size of the ButtonIcon. - * Possible values could be 'Size.SM' 24px, 'Size.LG' 32px, - */ - size: PropTypes.oneOf(Object.values(BUTTON_ICON_SIZES)), - /** - * ButtonIcon accepts all the props from Box - */ - ...Box.propTypes, -}; diff --git a/ui/components/component-library/button-icon/deprecated/button-icon.test.js b/ui/components/component-library/button-icon/deprecated/button-icon.test.js deleted file mode 100644 index d5ee5b88b..000000000 --- a/ui/components/component-library/button-icon/deprecated/button-icon.test.js +++ /dev/null @@ -1,147 +0,0 @@ -/* eslint-disable jest/require-top-level-describe */ -import { render } from '@testing-library/react'; -import React from 'react'; -import { IconColor } from '../../../../helpers/constants/design-system'; -import { ICON_NAMES } from '../../icon/deprecated'; -import { BUTTON_ICON_SIZES } from './button-icon.constants'; -import { ButtonIcon } from './button-icon'; - -describe('ButtonIcon', () => { - it('should render button element correctly', () => { - const { getByTestId, container } = render( - , - ); - expect(container.querySelector('button')).toBeDefined(); - expect(getByTestId('button-icon')).toHaveClass('mm-button-icon'); - expect(container).toMatchSnapshot(); - }); - - it('should render anchor element correctly', () => { - const { getByTestId, container } = render( - , - ); - expect(getByTestId('button-icon')).toHaveClass('mm-button-icon'); - const anchor = container.getElementsByTagName('a').length; - expect(anchor).toBe(1); - }); - - it('should render anchor element correctly using href', () => { - const { getByTestId, getByRole } = render( - , - ); - expect(getByTestId('button-icon')).toHaveClass('mm-button-icon'); - expect(getByRole('link')).toBeDefined(); - }); - - it('should render with different size classes', () => { - const { getByTestId } = render( - <> - - - , - ); - expect(getByTestId(BUTTON_ICON_SIZES.SM)).toHaveClass( - `mm-button-icon--size-${BUTTON_ICON_SIZES.SM}`, - ); - expect(getByTestId(BUTTON_ICON_SIZES.LG)).toHaveClass( - `mm-button-icon--size-${BUTTON_ICON_SIZES.LG}`, - ); - }); - - it('should render with different colors', () => { - const { getByTestId } = render( - <> - - - , - ); - expect(getByTestId(IconColor.iconDefault)).toHaveClass( - `box--color-${IconColor.iconDefault}`, - ); - expect(getByTestId(IconColor.errorDefault)).toHaveClass( - `box--color-${IconColor.errorDefault}`, - ); - }); - - it('should render with added classname', () => { - const { getByTestId } = render( - , - ); - expect(getByTestId('classname')).toHaveClass('mm-button-icon--test'); - }); - - it('should render with different button states', () => { - const { getByTestId } = render( - <> - - , - ); - - expect(getByTestId('disabled')).toHaveClass(`mm-button-icon--disabled`); - expect(getByTestId('disabled')).toBeDisabled(); - }); - it('should render with icon', () => { - const { getByTestId } = render( - , - ); - - expect(getByTestId('button-icon')).toBeDefined(); - }); - - it('should render with aria-label', () => { - const { getByLabelText } = render( - , - ); - - expect(getByLabelText('add')).toBeDefined(); - }); -}); diff --git a/ui/components/component-library/button-icon/deprecated/index.js b/ui/components/component-library/button-icon/deprecated/index.js deleted file mode 100644 index c9d51bb07..000000000 --- a/ui/components/component-library/button-icon/deprecated/index.js +++ /dev/null @@ -1,2 +0,0 @@ -export { ButtonIcon } from './button-icon'; -export { BUTTON_ICON_SIZES } from './button-icon.constants'; diff --git a/ui/components/component-library/icon/deprecated/__snapshots__/icon.test.js.snap b/ui/components/component-library/icon/deprecated/__snapshots__/icon.test.js.snap deleted file mode 100644 index a99ac6393..000000000 --- a/ui/components/component-library/icon/deprecated/__snapshots__/icon.test.js.snap +++ /dev/null @@ -1,11 +0,0 @@ -// Jest Snapshot v1, https://goo.gl/fbAQLP - -exports[`Icon should render correctly 1`] = ` -
- -
-`; diff --git a/ui/components/component-library/icon/deprecated/icon.constants.js b/ui/components/component-library/icon/deprecated/icon.constants.js deleted file mode 100644 index 6899c77be..000000000 --- a/ui/components/component-library/icon/deprecated/icon.constants.js +++ /dev/null @@ -1,23 +0,0 @@ -import { Size } from '../../../../helpers/constants/design-system'; - -/** - * @deprecated `ICON_NAMES` has been deprecated in favour of the `IconName` enum - * - * import { Icon, IconName } from '../../component-library'; - */ -/* eslint-disable prefer-destructuring*/ // process.env is not a standard JavaScript object, so we are not able to use object destructuring -export const ICON_NAMES = JSON.parse(process.env.ICON_NAMES); - -/** - * @deprecated `ICON_SIZES` has been deprecated in favour of the `IconSize` enum - * - * import { Icon, IconSize, IconName } from '../../component-library'; - */ -export const ICON_SIZES = { - XS: Size.XS, - SM: Size.SM, - MD: Size.MD, - LG: Size.LG, - XL: Size.XL, - AUTO: Size.inherit, -}; diff --git a/ui/components/component-library/icon/deprecated/icon.js b/ui/components/component-library/icon/deprecated/icon.js deleted file mode 100644 index d5d465c8a..000000000 --- a/ui/components/component-library/icon/deprecated/icon.js +++ /dev/null @@ -1,81 +0,0 @@ -import React from 'react'; -import PropTypes from 'prop-types'; -import classnames from 'classnames'; - -import Box from '../../../ui/box/box'; - -import { - Size, - IconColor, - DISPLAY, -} from '../../../../helpers/constants/design-system'; - -import { ICON_SIZES, ICON_NAMES } from './icon.constants'; - -/** - * @deprecated This is the javascript version of `Icon` which has been deprecated in favour of the TypeScript version of the same name. - * - * To use the TS version update the imports and enums as follows: - * - * `import { Icon, IconSize, IconName } from '../../component-library'`; - */ - -export const Icon = ({ - name, - size = Size.MD, - color = IconColor.inherit, - className, - style, - ...props -}) => { - return ( - - ); -}; - -Icon.propTypes = { - /** - * The name of the icon to display. Should be one of ICON_NAMES - */ - name: PropTypes.oneOf(Object.values(ICON_NAMES)).isRequired, - /** - * The size of the Icon. - * Possible values could be SIZES.XS (12px), SIZES.SM (16px), SIZES.MD (20px), SIZES.LG (24px), SIZES.XL (32px), - * Default value is SIZES.MD (20px). - */ - size: PropTypes.oneOf(Object.values(ICON_SIZES)), - /** - * The color of the icon. - * Defaults to IconColor.inherit. - */ - color: PropTypes.oneOf(Object.values(IconColor)), - /** - * An additional className to apply to the icon. - */ - className: PropTypes.string, - /** - * Addition style properties to apply to the icon. - * The Icon component uses inline styles to apply the icon's mask-image so be wary of overriding - */ - style: PropTypes.object, - /** - * Icon accepts all the props from Box - */ - ...Box.propTypes, -}; diff --git a/ui/components/component-library/icon/deprecated/icon.test.js b/ui/components/component-library/icon/deprecated/icon.test.js deleted file mode 100644 index 854c69bb0..000000000 --- a/ui/components/component-library/icon/deprecated/icon.test.js +++ /dev/null @@ -1,141 +0,0 @@ -/* eslint-disable jest/require-top-level-describe */ -import { render } from '@testing-library/react'; -import React from 'react'; -import { Size, IconColor } from '../../../../helpers/constants/design-system'; -import { ICON_NAMES } from './icon.constants'; -import { Icon } from './icon'; - -describe('Icon', () => { - it('should render correctly', () => { - const { getByTestId, container } = render( - , - ); - expect(getByTestId('icon')).toBeDefined(); - expect(container.querySelector('svg')).toBeDefined(); - expect(container).toMatchSnapshot(); - }); - it('should render with a custom class', () => { - const { getByTestId } = render( - , - ); - expect(getByTestId('icon')).toHaveClass('test-class'); - }); - it('should render with an aria-label attribute', () => { - /** - * We aren't specifically adding an ariaLabel prop because in most cases - * the icon should be decorative or be accompanied by text. Also if the icon - * is to be used as a button in most cases ButtonIcon should be used. However - * we should test if it's possible to pass an aria-label attribute to the - * root html element. - */ - const { getByTestId } = render( - , - ); - expect(getByTestId('icon')).toHaveAttribute( - 'aria-label', - 'test aria label', - ); - }); - it('should render with different icons using mask-image and image urls', () => { - const { getByTestId } = render( - <> - - - - - , - ); - expect(window.getComputedStyle(getByTestId('add-square')).maskImage).toBe( - `url('./images/icons/add-square.svg')`, - ); - expect(window.getComputedStyle(getByTestId('bank')).maskImage).toBe( - `url('./images/icons/bank.svg')`, - ); - expect(window.getComputedStyle(getByTestId('bookmark')).maskImage).toBe( - `url('./images/icons/bookmark.svg')`, - ); - expect(window.getComputedStyle(getByTestId('calculator')).maskImage).toBe( - `url('./images/icons/calculator.svg')`, - ); - }); - it('should render with different size classes', () => { - const { getByTestId } = render( - <> - - - - - - - , - ); - expect(getByTestId('icon-xs')).toHaveClass('mm-icon--size-xs'); - expect(getByTestId('icon-sm')).toHaveClass('mm-icon--size-sm'); - expect(getByTestId('icon-md')).toHaveClass('mm-icon--size-md'); - expect(getByTestId('icon-lg')).toHaveClass('mm-icon--size-lg'); - expect(getByTestId('icon-xl')).toHaveClass('mm-icon--size-xl'); - expect(getByTestId('icon-auto')).toHaveClass('mm-icon--size-inherit'); - }); - it('should render with icon colors', () => { - const { getByTestId } = render( - <> - - - - , - ); - expect(getByTestId('icon-color-default')).toHaveClass( - 'box--color-icon-default', - ); - expect(getByTestId('icon-color-alternative')).toHaveClass( - 'box--color-icon-alternative', - ); - expect(getByTestId('icon-color-muted')).toHaveClass( - 'box--color-icon-muted', - ); - }); -}); diff --git a/ui/components/component-library/icon/deprecated/index.js b/ui/components/component-library/icon/deprecated/index.js deleted file mode 100644 index 270538ceb..000000000 --- a/ui/components/component-library/icon/deprecated/index.js +++ /dev/null @@ -1,2 +0,0 @@ -export { Icon } from './icon'; -export { ICON_NAMES, ICON_SIZES } from './icon.constants'; diff --git a/ui/components/component-library/text-field/README.mdx b/ui/components/component-library/text-field/README.mdx index 62a4c0c5d..dd090dc9e 100644 --- a/ui/components/component-library/text-field/README.mdx +++ b/ui/components/component-library/text-field/README.mdx @@ -90,8 +90,7 @@ Use the `startAccessory` and `endAccessory` props to add components such as icon ```jsx import { Color, IconColor, SIZES, DISPLAY } from '../../../helpers/constants/design-system'; -import { ButtonIcon } from '../../component-library/button-icon/deprecated'; -import { TextField, Icon, IconName } from '../../component-library'; +import { TextField, Icon, IconName, ButtonIcon } from '../../component-library'; { className={classnames('multichain-import-token-link', className)} {...props} > - + { history.push(IMPORT_TOKEN_ROUTE); trackEvent({ @@ -67,13 +65,13 @@ export const MultichainImportTokenLink = ({ className, ...props }) => { detectNewTokens()} > diff --git a/ui/helpers/constants/settings.js b/ui/helpers/constants/settings.js index f7297238f..788d54117 100644 --- a/ui/helpers/constants/settings.js +++ b/ui/helpers/constants/settings.js @@ -1,5 +1,4 @@ import { IconName } from '../../components/component-library'; -import { ICON_NAMES } from '../../components/component-library/icon/deprecated'; import { ALERTS_ROUTE, ADVANCED_ROUTE, @@ -20,21 +19,21 @@ export const SETTINGS_CONSTANTS = [ sectionMessage: (t) => t('currencyConversion'), descriptionMessage: (t) => t('currencyConversion'), route: `${GENERAL_ROUTE}#currency-conversion`, - iconName: ICON_NAMES.SETTING, + iconName: IconName.Setting, }, { tabMessage: (t) => t('general'), sectionMessage: (t) => t('primaryCurrencySetting'), descriptionMessage: (t) => t('primaryCurrencySettingDescription'), route: `${GENERAL_ROUTE}#primary-currency`, - iconName: ICON_NAMES.SETTING, + iconName: IconName.Setting, }, { tabMessage: (t) => t('general'), sectionMessage: (t) => t('currentLanguage'), descriptionMessage: (t) => t('currentLanguage'), route: `${GENERAL_ROUTE}#current-language`, - iconName: ICON_NAMES.SETTING, + iconName: IconName.Setting, }, { tabMessage: (t) => t('general'), @@ -48,14 +47,14 @@ export const SETTINGS_CONSTANTS = [ sectionMessage: (t) => t('accountIdenticon'), descriptionMessage: (t) => t('accountIdenticon'), route: `${GENERAL_ROUTE}#account-identicon`, - iconName: ICON_NAMES.SETTING, + iconName: IconName.Setting, }, { tabMessage: (t) => t('general'), sectionMessage: (t) => t('hideZeroBalanceTokens'), descriptionMessage: (t) => t('hideZeroBalanceTokens'), route: `${GENERAL_ROUTE}#zero-balancetokens`, - iconName: ICON_NAMES.SETTING, + iconName: IconName.Setting, }, { tabMessage: (t) => t('advanced'), @@ -132,7 +131,7 @@ export const SETTINGS_CONSTANTS = [ sectionMessage: (t) => t('contacts'), descriptionMessage: (t) => t('contacts'), route: CONTACT_LIST_ROUTE, - iconName: ICON_NAMES.BOOK, + iconName: IconName.Book, }, ///: BEGIN:ONLY_INCLUDE_IN(snaps) { @@ -140,7 +139,7 @@ export const SETTINGS_CONSTANTS = [ sectionMessage: (t) => t('snaps'), descriptionMessage: (t) => t('snaps'), route: SNAPS_LIST_ROUTE, - iconName: ICON_NAMES.SNAPS, + iconName: IconName.Snaps, }, ///: END:ONLY_INCLUDE_IN { @@ -211,7 +210,7 @@ export const SETTINGS_CONSTANTS = [ sectionMessage: (t) => t('alertSettingsUnconnectedAccount'), descriptionMessage: (t) => t('alertSettingsUnconnectedAccount'), route: `${ALERTS_ROUTE}#unconnected-account`, - iconName: ICON_NAMES.NOTIFICATION, + iconName: IconName.Notification, }, { tabMessage: (t) => t('alerts'), diff --git a/ui/pages/onboarding-flow/privacy-settings/privacy-settings.js b/ui/pages/onboarding-flow/privacy-settings/privacy-settings.js index 733f0ee5d..61da1e42c 100644 --- a/ui/pages/onboarding-flow/privacy-settings/privacy-settings.js +++ b/ui/pages/onboarding-flow/privacy-settings/privacy-settings.js @@ -26,7 +26,6 @@ import { } from '../../../store/actions'; import { ONBOARDING_PIN_EXTENSION_ROUTE } from '../../../helpers/constants/routes'; import { TextField } from '../../../components/component-library'; -import { Icon } from '../../../components/component-library/icon/deprecated'; import NetworkDropdown from '../../../components/app/dropdowns/network-dropdown'; import NetworkDisplay from '../../../components/app/network-display/network-display'; import { @@ -232,7 +231,6 @@ export default function PrivacySettings() { e.preventDefault(); dispatch(showModal({ name: 'ONBOARDING_ADD_NETWORK' })); }} - icon={} > {t('onboardingAdvancedPrivacyNetworkButton')}