mirror of
https://github.com/kremalicious/metamask-extension.git
synced 2024-12-02 14:15:06 +01:00
200 lines
4.4 KiB
Plaintext
200 lines
4.4 KiB
Plaintext
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';
|
|
import InfoIcon from './info-icon.component';
|
|
import InfoIconInverted from './info-icon-inverted.component';
|
|
import Interaction from './interaction-icon.component';
|
|
import PaperAirplane from './paper-airplane-icon';
|
|
import Preloader from './preloader';
|
|
import ReceiveIcon from './receive-icon.component';
|
|
import SendIcon from './send-icon.component';
|
|
import Sign from './sign-icon.component';
|
|
import SunCheck from './sun-check-icon.component';
|
|
import Swap from './swap-icon-for-list.component';
|
|
import SwapIcon from './overview-send-icon.component';
|
|
import SwapIconComponent from './swap-icon.component';
|
|
|
|
# Icon
|
|
|
|
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>
|
|
<Story id="ui-components-ui-icon-icon-stories-js--approve-story" />
|
|
</Canvas>
|
|
|
|
<ArgsTable of={Approve} />
|
|
|
|
## Sign
|
|
|
|
<Canvas>
|
|
<Story id="ui-components-ui-icon-icon-stories-js--sign-story" />
|
|
</Canvas>
|
|
|
|
<ArgsTable of={Sign} />
|
|
|
|
## Swap
|
|
|
|
<Canvas>
|
|
<Story id="ui-components-ui-icon-icon-stories-js--swap-story" />
|
|
</Canvas>
|
|
|
|
<ArgsTable of={Swap} />
|
|
|
|
## SendIcon
|
|
|
|
<Canvas>
|
|
<Story id="ui-components-ui-icon-icon-stories-js--send-icon-story" />
|
|
</Canvas>
|
|
|
|
<ArgsTable of={SendIcon} />
|
|
|
|
## ReceiveIcon
|
|
|
|
<Canvas>
|
|
<Story id="ui-components-ui-icon-icon-stories-js--receive-icon-story" />
|
|
</Canvas>
|
|
|
|
<ArgsTable of={ReceiveIcon} />
|
|
|
|
## Interaction
|
|
|
|
<Canvas>
|
|
<Story id="ui-components-ui-icon-icon-stories-js--interaction-story" />
|
|
</Canvas>
|
|
|
|
<ArgsTable of={Interaction} />
|
|
|
|
## InfoIcon
|
|
|
|
<Canvas>
|
|
<Story id="ui-components-ui-icon-icon-stories-js--info-icon-story" />
|
|
</Canvas>
|
|
|
|
<ArgsTable of={InfoIcon} />
|
|
|
|
## InfoIconInverted
|
|
|
|
<Canvas>
|
|
<Story id="ui-components-ui-icon-icon-stories-js--info-icon-inverted-story" />
|
|
</Canvas>
|
|
|
|
<ArgsTable of={InfoIconInverted} />
|
|
|
|
## SunCheck
|
|
|
|
<Canvas>
|
|
<Story id="ui-components-ui-icon-icon-stories-js--sun-check-story" />
|
|
</Canvas>
|
|
|
|
<ArgsTable of={SunCheck} />
|
|
|
|
## BuyIcon
|
|
|
|
<Canvas>
|
|
<Story id="ui-components-ui-icon-icon-stories-js--buy-icon-story" />
|
|
</Canvas>
|
|
|
|
<ArgsTable of={BuyIcon} />
|
|
|
|
## SwapIcon
|
|
|
|
<Canvas>
|
|
<Story id="ui-components-ui-icon-icon-stories-js--swap-icon-story" />
|
|
</Canvas>
|
|
|
|
<ArgsTable of={SwapIcon} />
|
|
|
|
## Send/SwapIcon
|
|
|
|
<Canvas>
|
|
<Story id="ui-components-ui-icon-icon-stories-js--send-swap-icon-story" />
|
|
</Canvas>
|
|
|
|
<ArgsTable of={SwapIconComponent} />
|
|
|
|
## PaperAirplane
|
|
|
|
<Canvas>
|
|
<Story id="ui-components-ui-icon-icon-stories-js--paper-airplane-story" />
|
|
</Canvas>
|
|
|
|
## CopyIcon
|
|
|
|
<Canvas>
|
|
<Story id="ui-components-ui-icon-icon-stories-js--copy-icon-story" />
|
|
</Canvas>
|
|
|
|
<ArgsTable of={CopyIcon} />
|
|
|
|
## Preloader
|
|
|
|
<Canvas>
|
|
<Story id="ui-components-ui-icon-icon-stories-js--preloader-story" />
|
|
</Canvas>
|
|
|
|
<ArgsTable of={Preloader} />
|