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

Remove unused CircleIcon and AlertCircleIcon components (#14057)

Browse Source
This commit is contained in:
David Walsh 2022-03-21 08:31:32 -05:00 committed by GitHub
parent 95ecd56689
commit 579714b7f6
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
11 changed files with 0 additions and 232 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -1,25 +0,0 @@
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>

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

@ -1,27 +0,0 @@
import React, { Component } from 'react';
import PropTypes from 'prop-types';
import CircleIcon from '../circle-icon';
const typeConfig = {
danger: {
circleClass: 'alert-circle-icon--danger',
iconSource: 'images/icons/red-triangle-exclaim.svg',
},
warning: {
circleClass: 'alert-circle-icon--warning',
iconSource: 'images/icons/yellow-bell.svg',
},
};
export default class AlertCircleIcon extends Component {
static propTypes = {
/**
* giving different alert icon for the component
*/
type: PropTypes.oneOf(Object.keys(typeConfig)).isRequired,
};
render() {
return <CircleIcon {...typeConfig[this.props.type]} />;
}
}

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

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

1
ui/components/ui/alert-circle-icon/index.js
View File

@ -1 +0,0 @@
export { default } from './alert-circle-icon.component';

13
ui/components/ui/alert-circle-icon/index.scss
View File

@ -1,13 +0,0 @@
.alert-circle-icon {
&--danger {
border-color: var(--accent-red);
color: var(--accent-red);
background: var(--Red-000);
}
&--warning {
border-color: var(--accent-yellow);
color: var(--accent-yellow);
background: var(--Yellow-000);
}
}

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

@ -1,16 +0,0 @@
import { Story, Canvas, ArgsTable } from '@storybook/addon-docs';
import CircleIcon from '.';
# Circle Icon
Add circle border to the image component
<Canvas>
<Story id="ui-components-ui-circle-icon-circle-icon-stories-js--default-story" />
</Canvas>
## Component API
<ArgsTable of={CircleIcon} />

60
ui/components/ui/circle-icon/circle-icon.component.js
View File

@ -1,60 +0,0 @@
import React, { PureComponent } from 'react';
import PropTypes from 'prop-types';
export default class CircleIcon extends PureComponent {
static propTypes = {
/**
* add size (px) for the image container
*/
size: PropTypes.string,
/**
* add css classname for the component based on the parent css
*/
circleClass: PropTypes.string,
/**
* image source path
*/
iconSource: PropTypes.string.isRequired,
/**
* add size (px) for the image
*/
iconSize: PropTypes.string,
};
static defaultProps = {
size: '56px',
iconSize: '18px',
circleClass: '',
};
render() {
const { size, circleClass, iconSize, iconSource } = this.props;
return (
<div
className="circle-icon__container"
style={{
height: size,
width: size,
}}
>
<div
className={`circle-icon__border circle-icon__circle ${circleClass}`}
style={{
height: size,
width: size,
}}
/>
<img
src={iconSource}
className="circle-icon__icon"
style={{
height: iconSize,
width: iconSize,
}}
alt=""
/>
</div>
);
}
}

37
ui/components/ui/circle-icon/circle-icon.stories.js
View File

@ -1,37 +0,0 @@
import React from 'react';
import README from './README.mdx';
import CircleIcon from './circle-icon.component';
export default {
title: 'Components/UI/CircleIcon',
id: __filename,
component: CircleIcon,
parameters: {
docs: {
page: README,
},
},
argTypes: {
size: { control: 'text' },
circleClass: { control: 'text' },
iconSource: { control: 'text' },
iconSize: { control: 'text' },
},
};
export const DefaultStory = (args) => (
<CircleIcon
border="1px solid"
borderColor="black"
background="white"
iconSize={args.iconSize}
iconSource={args.iconSource}
/>
);
DefaultStory.storyName = 'Default';
DefaultStory.args = {
iconSize: '42px',
iconSource: 'images/eth_logo.svg',
};

1
ui/components/ui/circle-icon/index.js
View File

@ -1 +0,0 @@
export { default } from './circle-icon.component';

23
ui/components/ui/circle-icon/index.scss
View File

@ -1,23 +0,0 @@
.circle-icon {
&__container {
position: relative;
display: flex;
justify-content: center;
align-items: center;
}
&__border {
border-radius: 50%;
position: absolute;
}
&__circle {
border: 1px solid;
border-color: var(--black);
background: var(--white);
}
&__icon {
position: relative;
}
}

2
ui/components/ui/ui-components.scss
View File

@ -2,7 +2,6 @@
@import 'account-mismatch-warning/index';
@import 'account-list/index';
@import 'actionable-message/index';
@import 'alert-circle-icon/index';
@import 'alert/index';
@import 'box/box';
@import 'breadcrumbs/index';
@ -11,7 +10,6 @@
@import 'callout/callout';
@import 'check-box/index';
@import 'chip/chip';
@import 'circle-icon/index';
@import 'color-indicator/color-indicator';
@import 'confusable/index';
@import 'currency-display/index';