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

UX: Icons: Remove unused overview icons (#17671)

Browse Source 
* UX: Icons: Remove unused overview icons

* Add args
This commit is contained in:
David Walsh 2023-02-22 11:13:48 -06:00 committed by GitHub
parent 8c863ec960
commit f57d10d857
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
4 changed files with 8 additions and 68 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

6
.storybook/2.DOCUMENTATION.stories.mdx
View File

@ -48,7 +48,7 @@ The example below displays the `Button` component and it explains how we should
import React from 'react';
import BuyIcon from '../icon/overview-buy-icon.component';
import IconTokenSearch from '../icon/icon-token-search';
// The mdx file to document props and usage
import README from './README.mdx';
@ -92,9 +92,9 @@ export default {
control: {
type: 'select',
},
options: ['BuyIcon'],
options: ['IconTokenSearch'],
mapping: {
BuyIcon: <BuyIcon />,
IconTokenSearch: <IconTokenSearch />,
},
},
},

11
ui/components/ui/button/button.stories.js
View File

@ -1,6 +1,6 @@
import React from 'react';
import BuyIcon from '../icon/overview-buy-icon.component';
import IconTokenSearch from '../icon/icon-token-search';
import README from './README.mdx';
import Button from '.';
@ -36,9 +36,9 @@ export default {
control: {
type: 'select',
},
options: ['BuyIcon'],
options: ['IconTokenSearch'],
mapping: {
BuyIcon: <BuyIcon />,
IconTokenSearch: <IconTokenSearch />,
},
},
submit: { control: 'boolean' },
@ -132,11 +132,10 @@ TypeInline.args = {
};
export const Icon = (args) => <Button {...args}>{args.children}</Button>;
Icon.args = {
type: 'primary',
icon: <BuyIcon />,
children: 'Buy',
icon: <IconTokenSearch />,
children: 'Search',
};
export const Submit = (args) => (

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

@ -146,22 +146,6 @@ Use the `className` prop to add an additional class to the icon. This additional
<ArgsTable of={SunCheck} />
## BuyIcon
<Canvas>
<Story id="components-ui-icon--buy-icon-story" />
</Canvas>
<ArgsTable of={BuyIcon} />
## SwapIcon
<Canvas>
<Story id="components-ui-icon--swap-icon-story" />
</Canvas>
<ArgsTable of={SwapIcon} />
## Send/SwapIcon
<Canvas>

43
ui/components/ui/icon/overview-send-icon.component.js
View File

@ -1,43 +0,0 @@
import React from 'react';
import PropTypes from 'prop-types';
/**
* @deprecated This has been deprecated in favour of the `<Icon />` component in ./ui/components/component-library/icon/icon.js
* See storybook documentation for Icon here https://metamask.github.io/metamask-storybook/?path=/docs/components-componentlibrary-icon--default-story#icon
*/
export default function SwapIcon({
width = '15',
height = '15',
fill = 'white',
}) {
return (
<svg
width={width}
height={height}
viewBox={`0 0 ${width} ${height}`}
fill="none"
xmlns="http://www.w3.org/2000/svg"
>
<path
d="M13.6827 0.889329C13.6458 0.890495 13.609 0.893722 13.5725 0.898996H7.76263C7.40564 0.893947 7.07358 1.08151 6.89361 1.38986C6.71364 1.69821 6.71364 2.07958 6.89361 2.38793C7.07358 2.69628 7.40564 2.88384 7.76263 2.87879H11.3124L1.12335 13.0678C0.864749 13.3161 0.760577 13.6848 0.851011 14.0315C0.941446 14.3786 1.21235 14.6495 1.55926 14.7399C1.90616 14.8303 2.27485 14.7262 2.52313 14.4676L12.7121 4.27857V7.82829C12.7071 8.18528 12.8946 8.51734 13.203 8.69731C13.5113 8.87728 13.8927 8.87728 14.2011 8.69731C14.5094 8.51734 14.697 8.18528 14.6919 7.82829V2.01457C14.7318 1.7261 14.6427 1.43469 14.4483 1.2179C14.2538 1.00111 13.9738 0.880924 13.6827 0.889329Z"
fill={fill}
/>
</svg>
);
}
SwapIcon.propTypes = {
/**
* Width of the icon
*/
width: PropTypes.string,
/**
* Height of the icon
*/
height: PropTypes.string,
/**
* Fill of the icon should be a valid design system color
*/
fill: PropTypes.string,
};