m/metamask-extension
1
0
Fork 0
mirror of https://github.com/kremalicious/metamask-extension.git synced 2024-12-23 09:52:26 +01:00
Code

alert-circle-icon (#12651)

Browse Source
This commit is contained in:
Etienne Dusseault 2021-11-22 19:40:33 -06:00 committed by GitHub
parent d296c517db
commit 8ce0eff047
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
3 changed files with 49 additions and 3 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

25
ui/components/ui/alert-circle-icon/README.mdx Normal file
View File

@ -0,0 +1,25 @@
import { Story, Canvas, ArgsTable } from '@storybook/addon-docs';
import AlertCircleIcon from '.';
# Alert Circle Icon
<Canvas>
<Story id="ui-components-ui-alert-circle-icon-alert-circle-icon-stories-js--default-story" />
</Canvas>
## Component API
<ArgsTable of={AlertCircleIcon} />
## Usage
The following describes the props and example usage for this component.
### Warning
Render warning alert icon
<Canvas>
<Story id="ui-components-ui-alert-circle-icon-alert-circle-icon-stories-js--warning" />
</Canvas>

3
ui/components/ui/alert-circle-icon/alert-circle-icon.component.js
View File

@ -15,6 +15,9 @@ const typeConfig = {
export default class AlertCircleIcon extends Component {
static propTypes = {
/**
* giving different alert icon for the component
*/
type: PropTypes.oneOf(Object.keys(typeConfig)).isRequired,
};

24
ui/components/ui/alert-circle-icon/alert-circle-icon.stories.js
View File

@ -1,11 +1,29 @@
import React from 'react';
import README from './README.mdx';
import AlertCircleIcon from './alert-circle-icon.component';
export default {
title: 'AlertCircleIcon',
title: 'Components/UI/Alert Circle Icon',
id: __filename,
component: AlertCircleIcon,
parameters: {
docs: {
page: README,
},
},
argTypes: {
type: { options: ['warning', 'danger'], control: { type: 'select' } },
},
};
export const dangerCircleIcon = () => <AlertCircleIcon type="danger" />;
export const DefaultStory = (args) => <AlertCircleIcon type={args.type} />;
DefaultStory.storyName = 'Default';
export const warningCircleIcon = () => <AlertCircleIcon type="warning" />;
DefaultStory.args = {
type: 'danger',
};
export const Warning = (args) => <AlertCircleIcon type={args.type} />;
Warning.args = {
type: 'warning',
};