mirror of
https://github.com/kremalicious/metamask-extension.git
synced 2024-11-22 09:57:02 +01:00
Updating account and network icons (#13947)
This commit is contained in:
George Marshall
GitHub
parent
0ab9a39c7d
commit
524ddcfaf4
@ -1,3 +0,0 @@
|
||||
<svg height="13" width="16" xmlns="http://www.w3.org/2000/svg">
|
||||
<path d="M5.2 9.571L1.714 6.014l-1.428 1.4L5.2 12.43l10.514-10.73L14.286.3z" fill="#fff"/>
|
||||
</svg>
|
||||
|
Before Width: | Height: | Size: 166 B |
@ -1,4 +0,0 @@
|
||||
<svg height="288" width="288" xmlns="http://www.w3.org/2000/svg">
|
||||
<path d="M-1-1h582v402H-1z" fill="none"/>
|
||||
<path d="M122 25l15-21c4-5 10-5 14 0l16 22c4 5 2 10-5 10h-12v118c0 3 3 3 5 1l25-25c4-4 6-10 6-16V90c-7 0-12-5-12-12V66c0-6 5-12 12-12h12c7 0 12 5 12 12v12c0 7-5 12-12 12v24c0 10-3 18-10 25l-31 31c-4 4-7 6-7 16v49c12 3 21 13 21 26 0 15-12 27-27 27s-27-12-27-27c0-13 9-23 21-26v-13c0-10-3-13-7-17l-31-31c-6-6-10-14-10-24v-25c-7-2-12-9-12-17 0-10 8-18 18-18s18 8 18 18c0 8-5 15-12 17v25c0 7 3 12 7 16l25 25c2 2 4 2 4-1V36h-12c-7 0-9-5-4-11z" fill="#fff"/>
|
||||
</svg>
|
||||
|
Before Width: | Height: | Size: 576 B |
@ -1,6 +0,0 @@
|
||||
<svg height="15" width="15" xmlns="http://www.w3.org/2000/svg">
|
||||
<g fill="none" fill-rule="evenodd">
|
||||
<path d="M0 13.172h14.49v1.084H0zM6.586 0H7.67v10.538H6.586z" fill="#fff"/>
|
||||
<path d="M2.634 6.586l4.61 3.952 4.61-3.952" stroke="#fff"/>
|
||||
</g>
|
||||
</svg>
|
||||
|
Before Width: | Height: | Size: 273 B |
@ -1,6 +0,0 @@
|
||||
<svg height="16" width="16" xmlns="http://www.w3.org/2000/svg">
|
||||
<g fill="#fff" fill-rule="evenodd">
|
||||
<path d="M7.385 0h1.23v16h-1.23z"/>
|
||||
<path d="M0 8.615v-1.23h16v1.23z"/>
|
||||
</g>
|
||||
</svg>
|
||||
|
Before Width: | Height: | Size: 208 B |
@ -1,6 +0,0 @@
|
||||
<svg height="20" width="20" xmlns="http://www.w3.org/2000/svg">
|
||||
<mask id="a" fill="#fff">
|
||||
<path d="M20 10v10H0V0h20z" fill-rule="evenodd"/>
|
||||
</mask>
|
||||
<path d="M10 13.66a3.66 3.66 0 110-7.32 3.66 3.66 0 010 7.32zm9.157-1.849a.804.804 0 00.772-.672S20 10.62 20 10s-.071-1.138-.071-1.138a.805.805 0 00-.772-.673h-1.929c-.374 0-.762-.238-.863-.529-.1-.292-.238-1.225.026-1.489l1.364-1.364a.76.76 0 00.045-1.002L16.195 2.2a.76.76 0 00-1.002.045L13.829 3.61c-.264.264-.704.371-.977.237-.274-.134-1.04-.7-1.04-1.073V.843a.803.803 0 00-.673-.77S10.619 0 10 0c-.618 0-1.138.072-1.138.072a.803.803 0 00-.673.771v1.93c0 .373-.238.762-.529.862s-1.225.238-1.489-.026L4.807 2.245A.76.76 0 003.805 2.2L2.2 3.805a.76.76 0 00.045 1.002l1.364 1.364c.264.264.371.704.237.977-.135.274-.7 1.041-1.073 1.041H.843a.804.804 0 00-.771.673S0 9.382 0 10s.072 1.14.072 1.14c.051.37.398.671.771.671h1.93c.373 0 .762.24.862.53s.239 1.223-.026 1.488l-1.363 1.364a.76.76 0 00-.046 1.002L3.805 17.8a.76.76 0 001.002-.045l1.364-1.365c.264-.263.704-.37.977-.236.274.134 1.041.7 1.041 1.073v1.93c0 .373.303.721.673.772 0 0 .52.071 1.138.071.619 0 1.139-.07 1.139-.07a.806.806 0 00.673-.773v-1.93c0-.374.238-.76.529-.862s1.224-.238 1.488.025l1.364 1.365a.762.762 0 001.002.045l1.605-1.605a.76.76 0 00-.045-1.002l-1.364-1.364c-.264-.264-.37-.704-.237-.978.134-.273.7-1.04 1.074-1.04z" fill="#b3b3b3" fill-rule="evenodd" mask="url(#a)"/>
|
||||
</svg>
|
||||
|
Before Width: | Height: | Size: 1.4 KiB |
@ -1,3 +0,0 @@
|
||||
<svg width="19" height="14" viewBox="0 0 19 14" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<path d="M14 5C14 2.25 11.0625 0 7.5 0C3.90625 0 1 2.25 1 5C1 6.09375 1.4375 7.0625 2.1875 7.875C1.75 8.84375 1.0625 9.59375 1.0625 9.59375C1 9.65625 0.96875 9.78125 1 9.875C1.0625 9.96875 1.125 10 1.25 10C2.375 10 3.3125 9.625 4 9.21875C5 9.71875 6.21875 10 7.5 10C11.0625 10 14 7.78125 14 5ZM17.8125 11.875C18.5312 11.0625 19 10.0938 19 9C19 6.9375 17.3125 5.125 14.9375 4.375C14.9688 4.59375 15 4.8125 15 5C15 8.3125 11.625 11 7.5 11C7.15625 11 6.8125 11 6.5 10.9688C7.46875 12.75 9.78125 14 12.5 14C13.7812 14 14.9688 13.7188 15.9688 13.2188C16.6562 13.625 17.5938 14 18.75 14C18.8438 14 18.9375 13.9688 18.9688 13.875C19 13.7812 19 13.6562 18.9062 13.5938C18.9062 13.5938 18.2188 12.8438 17.8125 11.875Z" fill="white"/>
|
||||
</svg>
|
||||
|
Before Width: | Height: | Size: 827 B |
@ -25,6 +25,13 @@ import {
|
||||
} from '../../../helpers/constants/routes';
|
||||
import TextField from '../../ui/text-field';
|
||||
import SearchIcon from '../../ui/search-icon';
|
||||
import IconCheck from '../../ui/icon/icon-check';
|
||||
import IconSpeechBubbles from '../../ui/icon/icon-speech-bubbles';
|
||||
import IconConnect from '../../ui/icon/icon-connect';
|
||||
import IconCog from '../../ui/icon/icon-cog';
|
||||
import IconPlus from '../../ui/icon/icon-plus';
|
||||
import IconImport from '../../ui/icon/icon-import';
|
||||
|
||||
import Button from '../../ui/button';
|
||||
import KeyRingLabel from './keyring-label';
|
||||
|
||||
@ -202,7 +209,7 @@ export default class AccountMenu extends Component {
|
||||
>
|
||||
<div className="account-menu__check-mark">
|
||||
{isSelected ? (
|
||||
<div className="account-menu__check-mark-icon" />
|
||||
<IconCheck color="var(--color-success-default)" />
|
||||
) : null}
|
||||
</div>
|
||||
<Identicon address={identity.address} diameter={24} />
|
||||
@ -344,13 +351,7 @@ export default class AccountMenu extends Component {
|
||||
});
|
||||
history.push(NEW_ACCOUNT_ROUTE);
|
||||
}}
|
||||
icon={
|
||||
<img
|
||||
className="account-menu__item-icon"
|
||||
src="images/plus-btn-white.svg"
|
||||
alt={t('createAccount')}
|
||||
/>
|
||||
}
|
||||
icon={<IconPlus />}
|
||||
text={t('createAccount')}
|
||||
/>
|
||||
<AccountMenuItem
|
||||
@ -365,13 +366,7 @@ export default class AccountMenu extends Component {
|
||||
});
|
||||
history.push(IMPORT_ACCOUNT_ROUTE);
|
||||
}}
|
||||
icon={
|
||||
<img
|
||||
className="account-menu__item-icon"
|
||||
src="images/import-account.svg"
|
||||
alt={t('importAccount')}
|
||||
/>
|
||||
}
|
||||
icon={<IconImport ariaLabel={t('importAccount')} />}
|
||||
text={t('importAccount')}
|
||||
/>
|
||||
<AccountMenuItem
|
||||
@ -390,13 +385,7 @@ export default class AccountMenu extends Component {
|
||||
history.push(CONNECT_HARDWARE_ROUTE);
|
||||
}
|
||||
}}
|
||||
icon={
|
||||
<img
|
||||
className="account-menu__item-icon"
|
||||
src="images/connect-icon.svg"
|
||||
alt={t('connectHardwareWallet')}
|
||||
/>
|
||||
}
|
||||
icon={<IconConnect ariaLabel={t('connectHardwareWallet')} />}
|
||||
text={t('connectHardwareWallet')}
|
||||
/>
|
||||
<div className="account-menu__divider" />
|
||||
@ -404,7 +393,7 @@ export default class AccountMenu extends Component {
|
||||
onClick={() => {
|
||||
global.platform.openTab({ url: supportLink });
|
||||
}}
|
||||
icon={<img src="images/support.svg" alt={supportText} />}
|
||||
icon={<IconSpeechBubbles ariaLabel={supportText} />}
|
||||
text={supportText}
|
||||
/>
|
||||
|
||||
@ -420,12 +409,7 @@ export default class AccountMenu extends Component {
|
||||
},
|
||||
});
|
||||
}}
|
||||
icon={
|
||||
<img
|
||||
className="account-menu__item-icon"
|
||||
src="images/settings.svg"
|
||||
/>
|
||||
}
|
||||
icon={<IconCog ariaLabel={t('settings')} />}
|
||||
text={t('settings')}
|
||||
/>
|
||||
</div>
|
||||
|
||||
@ -51,9 +51,8 @@
|
||||
}
|
||||
|
||||
&__icon {
|
||||
height: 16px;
|
||||
width: 16px;
|
||||
margin-right: 14px;
|
||||
margin-right: 8px;
|
||||
display: flex;
|
||||
}
|
||||
|
||||
&__text {
|
||||
@ -116,11 +115,6 @@
|
||||
}
|
||||
}
|
||||
|
||||
&__item-icon {
|
||||
width: 16px;
|
||||
height: 16px;
|
||||
}
|
||||
|
||||
&__accounts-container {
|
||||
display: flex;
|
||||
position: relative;
|
||||
@ -202,21 +196,10 @@
|
||||
}
|
||||
|
||||
&__check-mark {
|
||||
width: 14px;
|
||||
margin-right: 12px;
|
||||
margin-right: 8px;
|
||||
flex: 0 0 auto;
|
||||
}
|
||||
|
||||
&__check-mark-icon {
|
||||
background-image: url("/images/check-white.svg");
|
||||
height: 18px;
|
||||
width: 18px;
|
||||
background-repeat: no-repeat;
|
||||
background-position: center;
|
||||
background-size: contain;
|
||||
margin: 3px 0;
|
||||
}
|
||||
|
||||
.identicon {
|
||||
margin: 0 12px 0 0;
|
||||
flex: 0 0 auto;
|
||||
|
||||
@ -21,6 +21,8 @@ import {
|
||||
ADD_NETWORK_ROUTE,
|
||||
ADVANCED_ROUTE,
|
||||
} from '../../../helpers/constants/routes';
|
||||
import IconCheck from '../../ui/icon/icon-check';
|
||||
|
||||
import { Dropdown, DropdownMenuItem } from './dropdown';
|
||||
|
||||
// classes from nodes of the toggle element.
|
||||
@ -185,7 +187,7 @@ class NetworkDropdown extends Component {
|
||||
}}
|
||||
>
|
||||
{isCurrentRpcTarget ? (
|
||||
<i className="fa fa-check" />
|
||||
<IconCheck color="var(--color-success-default)" />
|
||||
) : (
|
||||
<div className="network-check__transparent">✓</div>
|
||||
)}
|
||||
@ -257,7 +259,7 @@ class NetworkDropdown extends Component {
|
||||
style={DROP_DOWN_MENU_ITEM_STYLE}
|
||||
>
|
||||
{providerType === network ? (
|
||||
<i className="fa fa-check" />
|
||||
<IconCheck color="var(--color-success-default)" />
|
||||
) : (
|
||||
<div className="network-check__transparent">✓</div>
|
||||
)}
|
||||
|
||||
@ -1,5 +1,6 @@
|
||||
import { Story, Canvas, ArgsTable } from '@storybook/addon-docs';
|
||||
|
||||
import IconCaretLeft from './icon-caret-left.js';
|
||||
import Approve from './approve-icon.component';
|
||||
import BuyIcon from './overview-buy-icon.component';
|
||||
import CopyIcon from './copy-icon.component';
|
||||
@ -22,6 +23,63 @@ A range of SVG icon components
|
||||
|
||||
> 💡 A lot of the our icons have different props and are not consistent we will need to work on fixing this.
|
||||
|
||||
## Component API
|
||||
|
||||
<ArgsTable of={IconCaretLeft} />
|
||||
|
||||
## Usage
|
||||
|
||||
The following describes the props and example usage for this component.
|
||||
|
||||
### Size
|
||||
|
||||
Use the `size` prop to change the size of the icon it should adhere to an `8px` grid e.g. `16px`, `24px`, `32px`
|
||||
|
||||
<Canvas>
|
||||
<Story id="ui-components-ui-icon-icon-stories-js--size" />
|
||||
</Canvas>
|
||||
|
||||
### Color
|
||||
|
||||
Use the `color` prop to change the color of the icon. `color` accepts any css value. Should use the valid design token css variables
|
||||
|
||||
<Canvas>
|
||||
<Story id="ui-components-ui-icon-icon-stories-js--color" />
|
||||
</Canvas>
|
||||
|
||||
### AriaLabel
|
||||
|
||||
Use the `ariaLabel` prop with icons intended to be used without text. e.g. back buttons or icons that should provide extra information to screen readers
|
||||
|
||||
<Canvas>
|
||||
<Story id="ui-components-ui-icon-icon-stories-js--aria-label" />
|
||||
</Canvas>
|
||||
|
||||
Will render the html
|
||||
|
||||
```html
|
||||
<svg
|
||||
width="24"
|
||||
height="24"
|
||||
fill="currentColor"
|
||||
aria-label="back"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
viewBox="0 0 512 512"
|
||||
>
|
||||
<path
|
||||
d="m335 113c8 8 8 22 0 30l-113 113 113 113c8 8 8 22 0 30-8 8-22 8-30 0l-128-128c-8-8-8-22 0-30l128-128c8-8 22-8 30 0z"
|
||||
></path>
|
||||
</svg>
|
||||
```
|
||||
|
||||
### ClassName
|
||||
|
||||
Use the `className` prop to add an additional class to the icon. This additional class is recommend to be used with layout of positioning css
|
||||
|
||||
# DEPRECATED ICONS
|
||||
|
||||
> The icons below use many different prop combinations and should be updated to the above api
|
||||
|
||||
## Approve
|
||||
|
||||
<Canvas>
|
||||
|
||||
42
ui/components/ui/icon/icon-check.js
Normal file
42
ui/components/ui/icon/icon-check.js
Normal file
@ -0,0 +1,42 @@
|
||||
import React from 'react';
|
||||
import PropTypes from 'prop-types';
|
||||
|
||||
const IconCheck = ({
|
||||
size = 24,
|
||||
color = 'currentColor',
|
||||
ariaLabel,
|
||||
className,
|
||||
}) => (
|
||||
<svg
|
||||
width={size}
|
||||
height={size}
|
||||
fill={color}
|
||||
className={className}
|
||||
aria-label={ariaLabel}
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
viewBox="0 0 512 512"
|
||||
>
|
||||
<path d="m420 134c9 9 9 22 0 30l-213 214c-8 8-22 8-30 0l-85-86c-9-8-9-21 0-30 8-8 21-8 30 0l70 70 198-198c9-8 22-8 30 0z" />
|
||||
</svg>
|
||||
);
|
||||
|
||||
IconCheck.propTypes = {
|
||||
/**
|
||||
* The size of the Icon follows an 8px grid 2 = 16px, 3 = 24px etc
|
||||
*/
|
||||
size: PropTypes.number,
|
||||
/**
|
||||
* The color of the icon accepts design token css variables
|
||||
*/
|
||||
color: PropTypes.string,
|
||||
/**
|
||||
* An additional className to assign the Icon
|
||||
*/
|
||||
className: PropTypes.string,
|
||||
/**
|
||||
* The aria-label of the icon for accessibility purposes
|
||||
*/
|
||||
ariaLabel: PropTypes.string,
|
||||
};
|
||||
|
||||
export default IconCheck;
|
||||
42
ui/components/ui/icon/icon-cog.js
Normal file
42
ui/components/ui/icon/icon-cog.js
Normal file
@ -0,0 +1,42 @@
|
||||
import React from 'react';
|
||||
import PropTypes from 'prop-types';
|
||||
|
||||
const IconCog = ({
|
||||
size = 24,
|
||||
color = 'currentColor',
|
||||
ariaLabel,
|
||||
className,
|
||||
}) => (
|
||||
<svg
|
||||
width={size}
|
||||
height={size}
|
||||
fill={color}
|
||||
className={className}
|
||||
aria-label={ariaLabel}
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
viewBox="0 0 512 512"
|
||||
>
|
||||
<path d="m256 326c-9 0-18-2-27-5-8-4-16-9-23-15-6-7-11-15-15-23-3-9-5-18-5-27 0-9 2-18 5-27 4-8 9-16 15-23 7-6 15-11 23-15 9-3 18-5 27-5 19 0 37 7 50 20 13 13 20 31 20 50 0 19-7 37-20 50-13 13-31 20-50 20z m176-35c3 0 7-2 10-4 2-2 4-6 5-9 0 0 1-10 1-22 0-12-1-22-1-22-1-3-3-7-5-9-3-2-7-4-10-4l-37 0c-7 0-15-4-17-10-2-6-4-23 1-29l26-26c2-2 4-6 4-9 0-4-1-7-3-10l-31-31c-3-2-6-3-10-3-3 0-7 2-9 4l-26 26c-6 5-14 7-19 5-6-3-20-14-20-21l0-37c0-3-2-7-4-10-2-2-6-4-9-5 0 0-10-1-22-1-12 0-22 1-22 1-3 1-7 3-9 5-2 3-4 7-4 10l0 37c0 7-4 15-10 17-6 2-23 4-29-1l-26-26c-2-2-6-4-9-4-4 0-7 1-10 3l-31 31c-2 3-3 6-3 10 0 3 2 7 4 9l26 26c5 6 7 14 5 19-3 6-14 20-21 20l-37 0c-3 0-7 2-10 4-2 2-4 6-5 9 0 0-1 10-1 22 0 12 1 22 1 22 1 7 8 13 15 13l37 0c7 0 15 4 17 10 2 6 4 23-1 29l-26 26c-2 2-4 6-4 9 0 4 1 7 3 10l31 31c3 2 6 3 10 3 3 0 7-2 9-4l26-26c6-5 14-7 19-5 6 3 20 14 20 21l0 37c0 7 6 14 13 15 0 0 10 1 22 1 12 0 22-1 22-1 3-1 7-3 9-5 2-3 4-7 4-10l0-37c0-7 4-15 10-17 6-2 23-4 29 1l26 26c2 2 6 4 9 4 4 0 7-1 10-3l31-31c2-3 3-6 3-10 0-3-2-7-4-9l-26-26c-5-6-7-14-5-19 3-6 14-20 21-20z" />
|
||||
</svg>
|
||||
);
|
||||
|
||||
IconCog.propTypes = {
|
||||
/**
|
||||
* The size of the Icon follows an 8px grid 2 = 16px, 3 = 24px etc
|
||||
*/
|
||||
size: PropTypes.number,
|
||||
/**
|
||||
* The color of the icon accepts design token css variables
|
||||
*/
|
||||
color: PropTypes.string,
|
||||
/**
|
||||
* An additional className to assign the Icon
|
||||
*/
|
||||
className: PropTypes.string,
|
||||
/**
|
||||
* The aria-label of the icon for accessibility purposes
|
||||
*/
|
||||
ariaLabel: PropTypes.string,
|
||||
};
|
||||
|
||||
export default IconCog;
|
||||
42
ui/components/ui/icon/icon-connect.js
Normal file
42
ui/components/ui/icon/icon-connect.js
Normal file
@ -0,0 +1,42 @@
|
||||
import React from 'react';
|
||||
import PropTypes from 'prop-types';
|
||||
|
||||
const IconConnect = ({
|
||||
size = 24,
|
||||
color = 'currentColor',
|
||||
ariaLabel,
|
||||
className,
|
||||
}) => (
|
||||
<svg
|
||||
width={size}
|
||||
height={size}
|
||||
fill={color}
|
||||
className={className}
|
||||
aria-label={ariaLabel}
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
viewBox="0 0 512 512"
|
||||
>
|
||||
<path d="m213 79l22-31c6-7 15-7 21 0l23 33c6 7 3 15-7 15l-18 0 0 175c0 4 4 4 7 1l37-37c6-6 8-15 8-24l0-35c-10 0-17-8-17-18l0-18c0-9 7-18 17-18l18 0c10 0 17 8 17 18l0 18c0 10-7 18-17 18l0 35c0 15-4 27-15 37l-45 46c-6 6-10 9-10 24l0 73c18 4 31 19 31 38 0 23-18 40-40 40-21 0-39-17-39-40 0-19 13-34 31-38l0-20c0-14-5-19-11-25l-45-46c-8-9-14-20-14-35l0-37c-10-3-18-14-18-26 0-14 12-26 27-26 14 0 26 12 26 26 0 12-8 23-18 26l0 37c0 10 5 18 10 23l37 38c3 2 6 2 6-2l0-228-18 0c-10 0-13-8-6-17z" />
|
||||
</svg>
|
||||
);
|
||||
|
||||
IconConnect.propTypes = {
|
||||
/**
|
||||
* The size of the Icon follows an 8px grid 2 = 16px, 3 = 24px etc
|
||||
*/
|
||||
size: PropTypes.number,
|
||||
/**
|
||||
* The color of the icon accepts design token css variables
|
||||
*/
|
||||
color: PropTypes.string,
|
||||
/**
|
||||
* An additional className to assign the Icon
|
||||
*/
|
||||
className: PropTypes.string,
|
||||
/**
|
||||
* The aria-label of the icon for accessibility purposes
|
||||
*/
|
||||
ariaLabel: PropTypes.string,
|
||||
};
|
||||
|
||||
export default IconConnect;
|
||||
42
ui/components/ui/icon/icon-import.js
Normal file
42
ui/components/ui/icon/icon-import.js
Normal file
@ -0,0 +1,42 @@
|
||||
import React from 'react';
|
||||
import PropTypes from 'prop-types';
|
||||
|
||||
const IconImport = ({
|
||||
size = 24,
|
||||
color = 'currentColor',
|
||||
ariaLabel,
|
||||
className,
|
||||
}) => (
|
||||
<svg
|
||||
width={size}
|
||||
height={size}
|
||||
fill={color}
|
||||
className={className}
|
||||
aria-label={ariaLabel}
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
viewBox="0 0 512 512"
|
||||
>
|
||||
<path d="m256 85c12 0 21 10 21 22l0 183 71-70c8-9 21-9 30 0 8 8 8 21 0 30l-107 106 0 1c-4 3-9 6-15 6l0 0c-3 0-6-1-8-2-3-1-5-3-7-5l-107-106c-8-9-8-22 0-30 9-9 22-9 30 0l71 70 0-183c0-12 9-22 21-22z m-149 299c-12 0-22 10-22 21 0 12 10 22 22 22l298 0c12 0 22-10 22-22 0-11-10-21-22-21z" />
|
||||
</svg>
|
||||
);
|
||||
|
||||
IconImport.propTypes = {
|
||||
/**
|
||||
* The size of the Icon follows an 8px grid 2 = 16px, 3 = 24px etc
|
||||
*/
|
||||
size: PropTypes.number,
|
||||
/**
|
||||
* The color of the icon accepts design token css variables
|
||||
*/
|
||||
color: PropTypes.string,
|
||||
/**
|
||||
* An additional className to assign the Icon
|
||||
*/
|
||||
className: PropTypes.string,
|
||||
/**
|
||||
* The aria-label of the icon for accessibility purposes
|
||||
*/
|
||||
ariaLabel: PropTypes.string,
|
||||
};
|
||||
|
||||
export default IconImport;
|
||||
42
ui/components/ui/icon/icon-plus.js
Normal file
42
ui/components/ui/icon/icon-plus.js
Normal file
@ -0,0 +1,42 @@
|
||||
import React from 'react';
|
||||
import PropTypes from 'prop-types';
|
||||
|
||||
const IconPlus = ({
|
||||
size = 24,
|
||||
color = 'currentColor',
|
||||
ariaLabel,
|
||||
className,
|
||||
}) => (
|
||||
<svg
|
||||
width={size}
|
||||
height={size}
|
||||
fill={color}
|
||||
className={className}
|
||||
aria-label={ariaLabel}
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
viewBox="0 0 512 512"
|
||||
>
|
||||
<path d="m277 107c0-12-9-22-21-22-12 0-21 10-21 22l0 128-128 0c-12 0-22 9-22 21 0 12 10 21 22 21l128 0 0 128c0 12 9 22 21 22 12 0 21-10 21-22l0-128 128 0c12 0 22-9 22-21 0-12-10-21-22-21l-128 0z" />
|
||||
</svg>
|
||||
);
|
||||
|
||||
IconPlus.propTypes = {
|
||||
/**
|
||||
* The size of the Icon follows an 8px grid 2 = 16px, 3 = 24px etc
|
||||
*/
|
||||
size: PropTypes.number,
|
||||
/**
|
||||
* The color of the icon accepts design token css variables
|
||||
*/
|
||||
color: PropTypes.string,
|
||||
/**
|
||||
* An additional className to assign the Icon
|
||||
*/
|
||||
className: PropTypes.string,
|
||||
/**
|
||||
* The aria-label of the icon for accessibility purposes
|
||||
*/
|
||||
ariaLabel: PropTypes.string,
|
||||
};
|
||||
|
||||
export default IconPlus;
|
||||
42
ui/components/ui/icon/icon-speech-bubbles.js
Normal file
42
ui/components/ui/icon/icon-speech-bubbles.js
Normal file
@ -0,0 +1,42 @@
|
||||
import React from 'react';
|
||||
import PropTypes from 'prop-types';
|
||||
|
||||
const IconSpeechBubbles = ({
|
||||
size = 24,
|
||||
color = 'currentColor',
|
||||
ariaLabel,
|
||||
className,
|
||||
}) => (
|
||||
<svg
|
||||
width={size}
|
||||
height={size}
|
||||
fill={color}
|
||||
className={className}
|
||||
aria-label={ariaLabel}
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
viewBox="0 0 512 512"
|
||||
>
|
||||
<path d="m357 221c0-63-66-114-146-114-81 0-146 51-146 114 0 25 10 47 27 66-10 22-25 39-25 39-2 1-3 4-2 6 2 3 3 3 6 3 25 0 46-8 61-18 23 12 50 18 79 18 80 0 146-50 146-114z m86 157c16-18 26-41 26-66 0-47-38-88-91-105 1 5 2 10 2 14 0 76-76 137-169 137-8 0-15 0-22-1 21 41 73 70 134 70 29 0 56-7 78-18 16 9 37 18 63 18 2 0 4-1 5-3 0-2 0-5-2-7 0 0-15-17-24-39z" />
|
||||
</svg>
|
||||
);
|
||||
|
||||
IconSpeechBubbles.propTypes = {
|
||||
/**
|
||||
* The size of the Icon follows an 8px grid 2 = 16px, 3 = 24px etc
|
||||
*/
|
||||
size: PropTypes.number,
|
||||
/**
|
||||
* The color of the icon accepts design token css variables
|
||||
*/
|
||||
color: PropTypes.string,
|
||||
/**
|
||||
* An additional className to assign the Icon
|
||||
*/
|
||||
className: PropTypes.string,
|
||||
/**
|
||||
* The aria-label of the icon for accessibility purposes
|
||||
*/
|
||||
ariaLabel: PropTypes.string,
|
||||
};
|
||||
|
||||
export default IconSpeechBubbles;
|
||||
@ -1,6 +1,10 @@
|
||||
import PropTypes from 'prop-types';
|
||||
import React from 'react';
|
||||
import { COLORS, SEVERITIES } from '../../../helpers/constants/design-system';
|
||||
import {
|
||||
COLORS,
|
||||
SEVERITIES,
|
||||
TYPOGRAPHY,
|
||||
} from '../../../helpers/constants/design-system';
|
||||
import Card from '../card';
|
||||
import Typography from '../typography';
|
||||
import Box from '../box';
|
||||
@ -26,6 +30,24 @@ import IconCaretLeft from './icon-caret-left';
|
||||
import IconCaretRight from './icon-caret-right';
|
||||
import IconCaretDown from './icon-caret-down';
|
||||
import IconCaretUp from './icon-caret-up';
|
||||
import IconCheck from './icon-check';
|
||||
import IconCog from './icon-cog';
|
||||
import IconConnect from './icon-connect';
|
||||
import IconImport from './icon-import';
|
||||
import IconSpeechBubbles from './icon-speech-bubbles';
|
||||
import IconPlus from './icon-plus';
|
||||
|
||||
const validColors = [
|
||||
'var(--color-icon-default)',
|
||||
'var(--color-icon-muted)',
|
||||
'var(--color-overlay-inverse)',
|
||||
'var(--color-primary-default)',
|
||||
'var(--color-secondary-default)',
|
||||
'var(--color-error-default)',
|
||||
'var(--color-warning-default)',
|
||||
'var(--color-success-default)',
|
||||
'var(--color-info-default)',
|
||||
];
|
||||
|
||||
export default {
|
||||
title: 'Components/UI/Icon',
|
||||
@ -35,6 +57,22 @@ export default {
|
||||
page: README,
|
||||
},
|
||||
},
|
||||
argTypes: {
|
||||
size: {
|
||||
control: 'select',
|
||||
options: [16, 24, 32, 40],
|
||||
},
|
||||
color: {
|
||||
control: 'select',
|
||||
options: validColors,
|
||||
},
|
||||
ariaLabel: {
|
||||
control: 'text',
|
||||
},
|
||||
className: {
|
||||
control: 'text',
|
||||
},
|
||||
},
|
||||
};
|
||||
|
||||
const IconItem = ({ Component }) => {
|
||||
@ -57,13 +95,41 @@ IconItem.propTypes = {
|
||||
|
||||
export const DefaultStory = (args) => (
|
||||
<div>
|
||||
<Typography variant="h2" boxProps={{ marginBottom: 4 }}>
|
||||
<Typography variant={TYPOGRAPHY.H2} boxProps={{ marginBottom: 4 }}>
|
||||
Icons
|
||||
</Typography>
|
||||
<Typography variant={TYPOGRAPHY.Paragraph} boxProps={{ marginBottom: 4 }}>
|
||||
If you are creating a new icon please use the ./icon-caret-left.js as the
|
||||
template
|
||||
</Typography>
|
||||
<Box marginBottom={4}>
|
||||
<div
|
||||
style={{
|
||||
display: 'grid',
|
||||
gridGap: '16px',
|
||||
gridTemplateColumns: 'repeat(auto-fill, 176px)',
|
||||
}}
|
||||
>
|
||||
<IconItem Component={<IconCaretLeft {...args} />} />
|
||||
<IconItem Component={<IconCaretRight {...args} />} />
|
||||
<IconItem Component={<IconCaretDown {...args} />} />
|
||||
<IconItem Component={<IconCaretUp {...args} />} />
|
||||
<IconItem Component={<IconCheck {...args} />} />
|
||||
<IconItem Component={<IconPlus {...args} />} />
|
||||
<IconItem Component={<IconImport {...args} />} />
|
||||
<IconItem Component={<IconConnect {...args} />} />
|
||||
<IconItem Component={<IconSpeechBubbles {...args} />} />
|
||||
<IconItem Component={<IconCog {...args} />} />
|
||||
</div>
|
||||
</Box>
|
||||
<Typography
|
||||
variant={TYPOGRAPHY.H2}
|
||||
color={COLORS.ERROR_DEFAULT}
|
||||
boxProps={{ marginBottom: 4 }}
|
||||
>
|
||||
DEPRECATED
|
||||
</Typography>
|
||||
<Box marginBottom={4}>
|
||||
<Typography variant="h4" boxProps={{ marginBottom: 2 }}>
|
||||
Circle Icons
|
||||
</Typography>
|
||||
<div
|
||||
style={{
|
||||
display: 'grid',
|
||||
@ -77,46 +143,16 @@ export const DefaultStory = (args) => (
|
||||
<IconItem Component={<SendIcon {...args} />} />
|
||||
<IconItem Component={<ReceiveIcon {...args} />} />
|
||||
<IconItem Component={<Interaction {...args} />} />
|
||||
</div>
|
||||
</Box>
|
||||
<Box marginBottom={4}>
|
||||
<Typography variant="h4" boxProps={{ marginBottom: 2 }}>
|
||||
Invertible Icons
|
||||
</Typography>
|
||||
<div
|
||||
style={{
|
||||
display: 'grid',
|
||||
gridGap: '16px',
|
||||
gridTemplateColumns: 'repeat(auto-fill, 176px)',
|
||||
}}
|
||||
>
|
||||
<IconItem Component={<InfoIcon {...args} />} />
|
||||
<IconItem Component={<InfoIconInverted {...args} />} />
|
||||
<IconItem Component={<SunCheck {...args} />} />
|
||||
<IconItem Component={<SunCheck {...args} reverseColors />} />
|
||||
</div>
|
||||
</Box>
|
||||
<Box marginBottom={4}>
|
||||
<Typography variant="h4" boxProps={{ marginBottom: 2 }}>
|
||||
Other Icons
|
||||
</Typography>
|
||||
<div
|
||||
style={{
|
||||
display: 'grid',
|
||||
gridGap: '16px',
|
||||
gridTemplateColumns: 'repeat(auto-fill, 176px)',
|
||||
}}
|
||||
>
|
||||
<IconItem Component={<BuyIcon {...args} />} />
|
||||
<IconItem Component={<SwapIcon {...args} />} />
|
||||
<IconItem Component={<SwapIconComponent {...args} />} />
|
||||
<IconItem Component={<PaperAirplane {...args} />} />
|
||||
<IconItem Component={<CopyIcon {...args} />} />
|
||||
<IconItem Component={<Preloader {...args} />} />
|
||||
<IconItem Component={<IconCaretLeft {...args} />} />
|
||||
<IconItem Component={<IconCaretRight {...args} />} />
|
||||
<IconItem Component={<IconCaretDown {...args} />} />
|
||||
<IconItem Component={<IconCaretUp {...args} />} />
|
||||
</div>
|
||||
</Box>
|
||||
</div>
|
||||
@ -132,6 +168,32 @@ DefaultStory.args = {
|
||||
reverseColors: false,
|
||||
};
|
||||
|
||||
export const Size = (args) => (
|
||||
<div>
|
||||
<IconCaretLeft size={16 || args.size} />
|
||||
<IconCaretLeft size={24 || args.size} />
|
||||
<IconCaretLeft size={32 || args.size} />
|
||||
</div>
|
||||
);
|
||||
|
||||
Size.args = {
|
||||
size: null,
|
||||
};
|
||||
|
||||
export const Color = (args) => (
|
||||
<>
|
||||
{Object.values(validColors).map((color) => (
|
||||
<IconCaretLeft {...args} color={args.color || color} key={color} />
|
||||
))}
|
||||
</>
|
||||
);
|
||||
|
||||
export const AriaLabel = (args) => <IconCaretLeft {...args} />;
|
||||
|
||||
AriaLabel.args = {
|
||||
ariaLabel: 'back',
|
||||
};
|
||||
|
||||
export const ApproveStory = (args) => <Approve {...args} />;
|
||||
ApproveStory.args = {
|
||||
size: 40,
|
||||
|
||||
@ -58,7 +58,7 @@
|
||||
right: 2px;
|
||||
|
||||
.color-indicator {
|
||||
margin: 0 14px;
|
||||
margin: 0 14px 0 4px;
|
||||
}
|
||||
|
||||
@media screen and (min-width: $break-large) {
|
||||
@ -82,16 +82,9 @@
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
.network-check,
|
||||
.network-check__transparent {
|
||||
color: var(--white);
|
||||
margin-left: 7px;
|
||||
}
|
||||
|
||||
.network-check__transparent {
|
||||
opacity: 0;
|
||||
width: 16px;
|
||||
margin: 0;
|
||||
width: 24px;
|
||||
}
|
||||
|
||||
.menu-icon-circle,
|
||||
|
||||
Loading…
Reference in New Issue
Block a user