mirror of
https://github.com/kremalicious/metamask-extension.git
synced 2024-11-22 01:47:00 +01:00
Deprecated Icon and ButtonIcon clean up (#19220)
* Updating all deprecated instances of Icon and ButtonIcon * Removing unused deprecated components and scripts
This commit is contained in:
George Marshall
GitHub
parent
6267fa37c9
commit
8437d0491f
@ -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: {},
|
||||
},
|
||||
};
|
||||
|
||||
@ -200,8 +200,6 @@ env:
|
||||
# Also see DEBUG and NODE_DEBUG
|
||||
- METAMASK_DEBUG: false
|
||||
# Modified in <root>/development/build/scripts.js:@setEnvironmentVariables
|
||||
- ICON_NAMES
|
||||
# Modified in <root>/development/build/scripts.js:@setEnvironmentVariables
|
||||
- IN_TEST
|
||||
# Modified in <root>/development/build/scripts.js:@setEnvironmentVariables
|
||||
- METAMASK_ENVIRONMENT
|
||||
|
||||
@ -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,
|
||||
|
||||
@ -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 };
|
||||
@ -32,11 +32,7 @@ module.exports = {
|
||||
// TODO: enable resetMocks
|
||||
// resetMocks: true,
|
||||
restoreMocks: true,
|
||||
setupFiles: [
|
||||
'<rootDir>/test/setup.js',
|
||||
'<rootDir>/test/env.js',
|
||||
'<rootDir>/test/jest/env.js', // jest specific env vars that break mocha tests
|
||||
],
|
||||
setupFiles: ['<rootDir>/test/setup.js', '<rootDir>/test/env.js'],
|
||||
setupFilesAfterEnv: ['<rootDir>/test/jest/setup.js'],
|
||||
testMatch: [
|
||||
'<rootDir>/app/scripts/constants/error-utils.test.js',
|
||||
|
||||
@ -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();
|
||||
@ -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';
|
||||
|
||||
|
||||
@ -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({
|
||||
|
||||
@ -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 (
|
||||
<Box
|
||||
className={classnames('mm-banner-base', className)}
|
||||
display={DISPLAY.FLEX}
|
||||
display={Display.Flex}
|
||||
gap={2}
|
||||
backgroundColor={BackgroundColor.backgroundDefault}
|
||||
borderRadius={BorderRadius.SM}
|
||||
@ -73,7 +72,7 @@ export const BannerBase = ({
|
||||
<ButtonIcon
|
||||
className="mm-banner-base__close-button"
|
||||
marginLeft="auto"
|
||||
iconName={ICON_NAMES.CLOSE}
|
||||
iconName={IconName.Close}
|
||||
size={Size.SM}
|
||||
ariaLabel="Close" // TODO: i18n
|
||||
onClick={onClose}
|
||||
|
||||
@ -1,16 +0,0 @@
|
||||
// Jest Snapshot v1, https://goo.gl/fbAQLP
|
||||
|
||||
exports[`ButtonIcon should render button element correctly 1`] = `
|
||||
<div>
|
||||
<button
|
||||
aria-label="add"
|
||||
class="box mm-button-icon mm-button-icon--size-lg box--display-inline-flex box--flex-direction-row box--justify-content-center box--align-items-center box--color-icon-default box--background-color-transparent box--rounded-lg"
|
||||
data-testid="button-icon"
|
||||
>
|
||||
<span
|
||||
class="box mm-icon mm-icon--size-lg box--display-inline-block box--flex-direction-row box--color-inherit"
|
||||
style="mask-image: url('./images/icons/add-square.svg');"
|
||||
/>
|
||||
</button>
|
||||
</div>
|
||||
`;
|
||||
@ -1,6 +0,0 @@
|
||||
import { Size } from '../../../../helpers/constants/design-system';
|
||||
|
||||
export const BUTTON_ICON_SIZES = {
|
||||
SM: Size.SM,
|
||||
LG: Size.LG,
|
||||
};
|
||||
@ -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 (
|
||||
<Box
|
||||
aria-label={ariaLabel}
|
||||
as={Tag}
|
||||
className={classnames(
|
||||
'mm-button-icon',
|
||||
`mm-button-icon--size-${size}`,
|
||||
{
|
||||
'mm-button-icon--disabled': disabled,
|
||||
},
|
||||
className,
|
||||
)}
|
||||
color={color}
|
||||
disabled={disabled}
|
||||
display={DISPLAY.INLINE_FLEX}
|
||||
justifyContent={JustifyContent.center}
|
||||
alignItems={AlignItems.center}
|
||||
borderRadius={BorderRadius.LG}
|
||||
backgroundColor={BackgroundColor.transparent}
|
||||
href={href}
|
||||
{...props}
|
||||
>
|
||||
<Icon name={iconName} size={size} {...iconProps} />
|
||||
</Box>
|
||||
);
|
||||
};
|
||||
|
||||
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,
|
||||
};
|
||||
@ -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(
|
||||
<ButtonIcon
|
||||
data-testid="button-icon"
|
||||
iconName={ICON_NAMES.ADD_SQUARE}
|
||||
ariaLabel="add"
|
||||
/>,
|
||||
);
|
||||
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(
|
||||
<ButtonIcon
|
||||
as="a"
|
||||
data-testid="button-icon"
|
||||
iconName={ICON_NAMES.ADD_SQUARE}
|
||||
ariaLabel="add"
|
||||
/>,
|
||||
);
|
||||
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(
|
||||
<ButtonIcon
|
||||
href="/metamask"
|
||||
data-testid="button-icon"
|
||||
iconName={ICON_NAMES.ADD_SQUARE}
|
||||
ariaLabel="add"
|
||||
/>,
|
||||
);
|
||||
expect(getByTestId('button-icon')).toHaveClass('mm-button-icon');
|
||||
expect(getByRole('link')).toBeDefined();
|
||||
});
|
||||
|
||||
it('should render with different size classes', () => {
|
||||
const { getByTestId } = render(
|
||||
<>
|
||||
<ButtonIcon
|
||||
iconName={ICON_NAMES.ADD_SQUARE}
|
||||
ariaLabel="add"
|
||||
size={BUTTON_ICON_SIZES.SM}
|
||||
data-testid={BUTTON_ICON_SIZES.SM}
|
||||
/>
|
||||
<ButtonIcon
|
||||
iconName={ICON_NAMES.ADD_SQUARE}
|
||||
ariaLabel="add"
|
||||
size={BUTTON_ICON_SIZES.LG}
|
||||
data-testid={BUTTON_ICON_SIZES.LG}
|
||||
/>
|
||||
</>,
|
||||
);
|
||||
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(
|
||||
<>
|
||||
<ButtonIcon
|
||||
iconName={ICON_NAMES.ADD_SQUARE}
|
||||
ariaLabel="add"
|
||||
color={IconColor.iconDefault}
|
||||
data-testid={IconColor.iconDefault}
|
||||
/>
|
||||
<ButtonIcon
|
||||
iconName={ICON_NAMES.ADD_SQUARE}
|
||||
ariaLabel="add"
|
||||
color={IconColor.errorDefault}
|
||||
data-testid={IconColor.errorDefault}
|
||||
/>
|
||||
</>,
|
||||
);
|
||||
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(
|
||||
<ButtonIcon
|
||||
data-testid="classname"
|
||||
className="mm-button-icon--test"
|
||||
iconName={ICON_NAMES.ADD_SQUARE}
|
||||
ariaLabel="add"
|
||||
/>,
|
||||
);
|
||||
expect(getByTestId('classname')).toHaveClass('mm-button-icon--test');
|
||||
});
|
||||
|
||||
it('should render with different button states', () => {
|
||||
const { getByTestId } = render(
|
||||
<>
|
||||
<ButtonIcon
|
||||
disabled
|
||||
data-testid="disabled"
|
||||
iconName={ICON_NAMES.ADD_SQUARE}
|
||||
ariaLabel="add"
|
||||
/>
|
||||
</>,
|
||||
);
|
||||
|
||||
expect(getByTestId('disabled')).toHaveClass(`mm-button-icon--disabled`);
|
||||
expect(getByTestId('disabled')).toBeDisabled();
|
||||
});
|
||||
it('should render with icon', () => {
|
||||
const { getByTestId } = render(
|
||||
<ButtonIcon
|
||||
data-testid="icon"
|
||||
iconName={ICON_NAMES.ADD_SQUARE}
|
||||
ariaLabel="add"
|
||||
iconProps={{ 'data-testid': 'button-icon' }}
|
||||
/>,
|
||||
);
|
||||
|
||||
expect(getByTestId('button-icon')).toBeDefined();
|
||||
});
|
||||
|
||||
it('should render with aria-label', () => {
|
||||
const { getByLabelText } = render(
|
||||
<ButtonIcon iconName={ICON_NAMES.ADD_SQUARE} ariaLabel="add" />,
|
||||
);
|
||||
|
||||
expect(getByLabelText('add')).toBeDefined();
|
||||
});
|
||||
});
|
||||
@ -1,2 +0,0 @@
|
||||
export { ButtonIcon } from './button-icon';
|
||||
export { BUTTON_ICON_SIZES } from './button-icon.constants';
|
||||
@ -1,11 +0,0 @@
|
||||
// Jest Snapshot v1, https://goo.gl/fbAQLP
|
||||
|
||||
exports[`Icon should render correctly 1`] = `
|
||||
<div>
|
||||
<span
|
||||
class="box mm-icon mm-icon--size-md box--display-inline-block box--flex-direction-row box--color-inherit"
|
||||
data-testid="icon"
|
||||
style="mask-image: url('./images/icons/add-square.svg');"
|
||||
/>
|
||||
</div>
|
||||
`;
|
||||
@ -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,
|
||||
};
|
||||
@ -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 (
|
||||
<Box
|
||||
className={classnames(className, 'mm-icon', `mm-icon--size-${size}`)}
|
||||
as="span"
|
||||
display={DISPLAY.INLINE_BLOCK}
|
||||
color={color}
|
||||
style={{
|
||||
/**
|
||||
* To reduce the possibility of injection attacks
|
||||
* the icon component uses mask-image instead of rendering
|
||||
* the svg directly.
|
||||
*/
|
||||
maskImage: `url('./images/icons/${name}.svg')`,
|
||||
WebkitMaskImage: `url('./images/icons/${name}.svg')`,
|
||||
...style,
|
||||
}}
|
||||
{...props}
|
||||
/>
|
||||
);
|
||||
};
|
||||
|
||||
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,
|
||||
};
|
||||
@ -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(
|
||||
<Icon name={ICON_NAMES.ADD_SQUARE} data-testid="icon" />,
|
||||
);
|
||||
expect(getByTestId('icon')).toBeDefined();
|
||||
expect(container.querySelector('svg')).toBeDefined();
|
||||
expect(container).toMatchSnapshot();
|
||||
});
|
||||
it('should render with a custom class', () => {
|
||||
const { getByTestId } = render(
|
||||
<Icon
|
||||
name={ICON_NAMES.ADD_SQUARE}
|
||||
data-testid="icon"
|
||||
className="test-class"
|
||||
/>,
|
||||
);
|
||||
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(
|
||||
<Icon
|
||||
name={ICON_NAMES.ADD_SQUARE}
|
||||
data-testid="icon"
|
||||
aria-label="test aria label"
|
||||
/>,
|
||||
);
|
||||
expect(getByTestId('icon')).toHaveAttribute(
|
||||
'aria-label',
|
||||
'test aria label',
|
||||
);
|
||||
});
|
||||
it('should render with different icons using mask-image and image urls', () => {
|
||||
const { getByTestId } = render(
|
||||
<>
|
||||
<Icon name={ICON_NAMES.ADD_SQUARE} data-testid="add-square" />
|
||||
<Icon name={ICON_NAMES.BANK} data-testid="bank" />
|
||||
<Icon name={ICON_NAMES.BOOKMARK} data-testid="bookmark" />
|
||||
<Icon name={ICON_NAMES.CALCULATOR} data-testid="calculator" />
|
||||
</>,
|
||||
);
|
||||
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(
|
||||
<>
|
||||
<Icon
|
||||
name={ICON_NAMES.ADD_SQUARE}
|
||||
size={Size.XS}
|
||||
data-testid="icon-xs"
|
||||
/>
|
||||
<Icon
|
||||
name={ICON_NAMES.ADD_SQUARE}
|
||||
size={Size.SM}
|
||||
data-testid="icon-sm"
|
||||
/>
|
||||
<Icon
|
||||
name={ICON_NAMES.ADD_SQUARE}
|
||||
size={Size.MD}
|
||||
data-testid="icon-md"
|
||||
/>
|
||||
<Icon
|
||||
name={ICON_NAMES.ADD_SQUARE}
|
||||
size={Size.LG}
|
||||
data-testid="icon-lg"
|
||||
/>
|
||||
<Icon
|
||||
name={ICON_NAMES.ADD_SQUARE}
|
||||
size={Size.XL}
|
||||
data-testid="icon-xl"
|
||||
/>
|
||||
<Icon
|
||||
name={ICON_NAMES.ADD_SQUARE}
|
||||
size={Size.inherit}
|
||||
data-testid="icon-auto"
|
||||
/>
|
||||
</>,
|
||||
);
|
||||
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(
|
||||
<>
|
||||
<Icon
|
||||
name={ICON_NAMES.ADD_SQUARE}
|
||||
color={IconColor.iconDefault}
|
||||
data-testid="icon-color-default"
|
||||
/>
|
||||
<Icon
|
||||
name={ICON_NAMES.ADD_SQUARE}
|
||||
color={IconColor.iconAlternative}
|
||||
data-testid="icon-color-alternative"
|
||||
/>
|
||||
<Icon
|
||||
name={ICON_NAMES.ADD_SQUARE}
|
||||
color={IconColor.iconMuted}
|
||||
data-testid="icon-color-muted"
|
||||
/>
|
||||
</>,
|
||||
);
|
||||
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',
|
||||
);
|
||||
});
|
||||
});
|
||||
@ -1,2 +0,0 @@
|
||||
export { Icon } from './icon';
|
||||
export { ICON_NAMES, ICON_SIZES } from './icon.constants';
|
||||
@ -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';
|
||||
|
||||
<TextField
|
||||
placeholder="Search"
|
||||
|
||||
@ -1,9 +1,7 @@
|
||||
import React from 'react';
|
||||
import PropTypes from 'prop-types';
|
||||
import classnames from 'classnames';
|
||||
import { ButtonBase } from '../../component-library';
|
||||
// TODO: Replace ICON_NAMES with IconName when ButtonBase/Buttons have been updated
|
||||
import { ICON_NAMES } from '../../component-library/icon/deprecated';
|
||||
import { ButtonBase, IconName } from '../../component-library';
|
||||
import {
|
||||
BackgroundColor,
|
||||
TextVariant,
|
||||
@ -40,7 +38,7 @@ export const AddressCopyButton = ({
|
||||
size={Size.SM}
|
||||
variant={TextVariant.bodySm}
|
||||
color={TextColor.primaryDefault}
|
||||
endIconName={copied ? ICON_NAMES.COPY_SUCCESS : ICON_NAMES.COPY}
|
||||
endIconName={copied ? IconName.CopySuccess : IconName.Copy}
|
||||
className={classnames('multichain-address-copy-button', {
|
||||
'multichain-address-copy-button__address--wrap': wrap,
|
||||
})}
|
||||
|
||||
@ -4,12 +4,10 @@ import { useHistory } from 'react-router-dom';
|
||||
import PropTypes from 'prop-types';
|
||||
import classnames from 'classnames';
|
||||
import Box from '../../ui/box/box';
|
||||
import { ButtonLink } from '../../component-library';
|
||||
// TODO: Replace ICON_NAMES with IconName when ButtonBase/Buttons have been updated
|
||||
import { ICON_NAMES } from '../../component-library/icon/deprecated';
|
||||
import { ButtonLink, IconName } from '../../component-library';
|
||||
import {
|
||||
AlignItems,
|
||||
DISPLAY,
|
||||
Display,
|
||||
Size,
|
||||
} from '../../../helpers/constants/design-system';
|
||||
import { useI18nContext } from '../../../hooks/useI18nContext';
|
||||
@ -44,11 +42,11 @@ export const MultichainImportTokenLink = ({ className, ...props }) => {
|
||||
className={classnames('multichain-import-token-link', className)}
|
||||
{...props}
|
||||
>
|
||||
<Box display={DISPLAY.FLEX} alignItems={AlignItems.center}>
|
||||
<Box display={Display.Flex} alignItems={AlignItems.center}>
|
||||
<ButtonLink
|
||||
size={Size.MD}
|
||||
data-testid="import-token-button"
|
||||
startIconName={ICON_NAMES.ADD}
|
||||
startIconName={IconName.Add}
|
||||
onClick={() => {
|
||||
history.push(IMPORT_TOKEN_ROUTE);
|
||||
trackEvent({
|
||||
@ -67,13 +65,13 @@ export const MultichainImportTokenLink = ({ className, ...props }) => {
|
||||
</ButtonLink>
|
||||
</Box>
|
||||
<Box
|
||||
display={DISPLAY.FLEX}
|
||||
display={Display.Flex}
|
||||
alignItems={AlignItems.center}
|
||||
paddingBottom={4}
|
||||
paddingTop={4}
|
||||
>
|
||||
<ButtonLink
|
||||
startIconName={ICON_NAMES.REFRESH}
|
||||
startIconName={IconName.Refresh}
|
||||
data-testid="refresh-list-button"
|
||||
onClick={() => detectNewTokens()}
|
||||
>
|
||||
|
||||
@ -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'),
|
||||
|
||||
@ -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={<Icon name="add" marginRight={2} />}
|
||||
>
|
||||
{t('onboardingAdvancedPrivacyNetworkButton')}
|
||||
</Button>
|
||||
|
||||
Loading…
Reference in New Issue
Block a user