mirror of
https://github.com/kremalicious/metamask-extension.git
synced 2024-12-23 01:39:44 +01:00
Fix icon component for new Storybook format (#12887)
* icon * removed unused var * Updating proptype comments and adding missing stories Co-authored-by: georgewrmarshall <george.marshall@consensys.net>
This commit is contained in:
Etienne Dusseault
GitHub
parent
61935835a0
commit
09ba8d689e
141
ui/components/ui/icon/README.mdx
Normal file
141
ui/components/ui/icon/README.mdx
Normal file
@ -0,0 +1,141 @@
|
||||
import { Story, Canvas, ArgsTable } from '@storybook/addon-docs';
|
||||
|
||||
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.
|
||||
|
||||
## 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} />
|
||||
@ -28,8 +28,17 @@ Approve.defaultProps = {
|
||||
};
|
||||
|
||||
Approve.propTypes = {
|
||||
/**
|
||||
* Additional className
|
||||
*/
|
||||
className: PropTypes.string,
|
||||
/**
|
||||
* Size of the icon should adhere to 8px grid. e.g: 8, 16, 24, 32, 40
|
||||
*/
|
||||
size: PropTypes.number.isRequired,
|
||||
/**
|
||||
* Color of the icon should be a valid design system color and is required
|
||||
*/
|
||||
color: PropTypes.string.isRequired,
|
||||
};
|
||||
|
||||
|
||||
@ -24,8 +24,17 @@ Copy.defaultProps = {
|
||||
};
|
||||
|
||||
Copy.propTypes = {
|
||||
/**
|
||||
* Additional className
|
||||
*/
|
||||
className: PropTypes.string,
|
||||
/**
|
||||
* Size of the icon should adhere to 8px grid. e.g: 8, 16, 24, 32, 40
|
||||
*/
|
||||
size: PropTypes.number.isRequired,
|
||||
/**
|
||||
* Color of the icon should be a valid design system color and is required
|
||||
*/
|
||||
color: PropTypes.string.isRequired,
|
||||
};
|
||||
|
||||
|
||||
@ -1,56 +1,241 @@
|
||||
import PropTypes from 'prop-types';
|
||||
import React from 'react';
|
||||
import { color, number, select } from '@storybook/addon-knobs';
|
||||
import { SEVERITIES } from '../../../helpers/constants/design-system';
|
||||
import Card from '../card';
|
||||
import Typography from '../typography';
|
||||
import Box from '../box';
|
||||
|
||||
import README from './README.mdx';
|
||||
|
||||
import Approve from './approve-icon.component';
|
||||
import Copy from './copy-icon.component';
|
||||
import Interaction from './interaction-icon.component';
|
||||
import Preloader from './preloader';
|
||||
import Receive from './receive-icon.component';
|
||||
import Send from './send-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';
|
||||
|
||||
export default {
|
||||
title: 'Components/UI/Icon',
|
||||
id: __filename,
|
||||
parameters: {
|
||||
docs: {
|
||||
page: README,
|
||||
},
|
||||
},
|
||||
};
|
||||
|
||||
export const copy = () => (
|
||||
<Copy size={number('size', 40)} color={color('color', '#2F80ED')} />
|
||||
const IconItem = ({ Component }) => {
|
||||
return (
|
||||
<Card display="flex" flexDirection="column" textAlign="center">
|
||||
<Box marginBottom={2}>{Component}</Box>
|
||||
<code>{`${Component.type.__docgenInfo.displayName}`}</code>
|
||||
</Card>
|
||||
);
|
||||
};
|
||||
|
||||
IconItem.propTypes = {
|
||||
Component: PropTypes.node,
|
||||
};
|
||||
|
||||
export const DefaultStory = (args) => (
|
||||
<div>
|
||||
<Typography variant="h2" boxProps={{ marginBottom: 4 }}>
|
||||
Icons
|
||||
</Typography>
|
||||
<Box marginBottom={4}>
|
||||
<Typography variant="h4" boxProps={{ marginBottom: 2 }}>
|
||||
Circle Icons
|
||||
</Typography>
|
||||
<div
|
||||
style={{
|
||||
display: 'grid',
|
||||
gridGap: '16px',
|
||||
gridTemplateColumns: 'repeat(auto-fill, 176px)',
|
||||
}}
|
||||
>
|
||||
<IconItem Component={<Approve {...args} />} />
|
||||
<IconItem Component={<Sign {...args} />} />
|
||||
<IconItem Component={<Swap {...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} />} />
|
||||
</div>
|
||||
</Box>
|
||||
</div>
|
||||
);
|
||||
|
||||
export const send = () => (
|
||||
<Send size={number('size', 40)} color={color('color', '#2F80ED')} />
|
||||
);
|
||||
DefaultStory.args = {
|
||||
width: '17',
|
||||
height: '21',
|
||||
fill: '#2F80ED',
|
||||
size: 40,
|
||||
color: '#2F80ED',
|
||||
severity: 'info',
|
||||
reverseColors: false,
|
||||
};
|
||||
|
||||
export const receive = () => (
|
||||
<Receive size={number('size', 40)} color={color('color', '#2F80ED')} />
|
||||
);
|
||||
export const ApproveStory = (args) => <Approve {...args} />;
|
||||
ApproveStory.args = {
|
||||
size: 40,
|
||||
color: '#2F80ED',
|
||||
};
|
||||
ApproveStory.storyName = 'Approve';
|
||||
|
||||
export const siteInteraction = () => (
|
||||
<Interaction size={number('size', 40)} color={color('color', '#2F80ED')} />
|
||||
);
|
||||
export const SignStory = (args) => <Sign {...args} />;
|
||||
SignStory.args = {
|
||||
size: 40,
|
||||
color: '#2F80ED',
|
||||
};
|
||||
SignStory.storyName = 'Sign';
|
||||
|
||||
export const approveSpendLimit = () => (
|
||||
<Approve size={number('size', 40)} color={color('color', '#2F80ED')} />
|
||||
);
|
||||
export const SwapStory = (args) => <Swap {...args} />;
|
||||
SwapStory.args = {
|
||||
size: 40,
|
||||
color: '#2F80ED',
|
||||
};
|
||||
SwapStory.storyName = 'Swap';
|
||||
|
||||
export const preloader = () => <Preloader size={number('size', 40)} />;
|
||||
export const SendIconStory = (args) => <SendIcon {...args} />;
|
||||
SendIconStory.args = {
|
||||
size: 40,
|
||||
color: '#2F80ED',
|
||||
};
|
||||
SendIconStory.storyName = 'SendIcon';
|
||||
|
||||
export const PaperAirplane = () => (
|
||||
<PaperAirplane color={color('color', '#2F80ED')} size={number('size', 40)} />
|
||||
);
|
||||
export const ReceiveIconStory = (args) => <ReceiveIcon {...args} />;
|
||||
ReceiveIconStory.args = {
|
||||
size: 40,
|
||||
color: '#2F80ED',
|
||||
};
|
||||
ReceiveIconStory.storyName = 'ReceiveIcon';
|
||||
|
||||
export const info = () => (
|
||||
<InfoIcon
|
||||
severity={select('severity', SEVERITIES, SEVERITIES.INFO)}
|
||||
size={number('size', 40)}
|
||||
/>
|
||||
);
|
||||
export const InteractionStory = (args) => <Interaction {...args} />;
|
||||
InteractionStory.args = {
|
||||
size: 40,
|
||||
color: '#2F80ED',
|
||||
};
|
||||
InteractionStory.storyName = 'Interaction';
|
||||
|
||||
export const infoInverted = () => (
|
||||
<InfoIconInverted
|
||||
severity={select('severity', SEVERITIES, SEVERITIES.INFO)}
|
||||
size={number('size', 40)}
|
||||
/>
|
||||
);
|
||||
export const InfoIconStory = (args) => <InfoIcon {...args} />;
|
||||
InfoIconStory.args = {
|
||||
severity: SEVERITIES.INFO,
|
||||
};
|
||||
InfoIconStory.argTypes = {
|
||||
severity: {
|
||||
control: 'select',
|
||||
options: ['warning', 'info', 'danger', 'success'],
|
||||
},
|
||||
};
|
||||
InfoIconStory.storyName = 'InfoIcon';
|
||||
|
||||
export const InfoIconInvertedStory = (args) => <InfoIconInverted {...args} />;
|
||||
InfoIconInvertedStory.args = {
|
||||
severity: SEVERITIES.INFO,
|
||||
};
|
||||
InfoIconInvertedStory.argTypes = {
|
||||
severity: {
|
||||
control: 'select',
|
||||
options: ['warning', 'info', 'danger', 'success'],
|
||||
},
|
||||
};
|
||||
InfoIconInvertedStory.storyName = 'InfoIconInverted';
|
||||
|
||||
export const SunCheckStory = (args) => <SunCheck {...args} />;
|
||||
SunCheckStory.args = {
|
||||
reverseColors: false,
|
||||
};
|
||||
SunCheckStory.argTypes = {
|
||||
reverseColors: {
|
||||
control: 'boolean',
|
||||
},
|
||||
};
|
||||
SunCheckStory.storyName = 'SunCheck';
|
||||
|
||||
export const BuyIconStory = (args) => <BuyIcon {...args} />;
|
||||
BuyIconStory.args = {
|
||||
width: '17',
|
||||
height: '21',
|
||||
fill: '#2F80ED',
|
||||
};
|
||||
BuyIconStory.storyName = 'BuyIcon';
|
||||
|
||||
export const SwapIconStory = (args) => <SwapIcon {...args} />;
|
||||
SwapIconStory.args = {
|
||||
width: '17',
|
||||
height: '21',
|
||||
fill: '#2F80ED',
|
||||
};
|
||||
SwapIconStory.storyName = 'SwapIcon';
|
||||
|
||||
export const SendSwapIconStory = (args) => <SwapIconComponent {...args} />;
|
||||
SendSwapIconStory.args = {
|
||||
width: '17',
|
||||
height: '17',
|
||||
color: '#2F80ED',
|
||||
};
|
||||
SendSwapIconStory.storyName = 'Send/SwapIcon';
|
||||
|
||||
export const PaperAirplaneStory = (args) => <PaperAirplane {...args} />;
|
||||
PaperAirplaneStory.args = {
|
||||
size: 40,
|
||||
color: '#2F80ED',
|
||||
};
|
||||
PaperAirplaneStory.storyName = 'PaperAirplane';
|
||||
|
||||
export const CopyIconStory = (args) => <CopyIcon {...args} />;
|
||||
CopyIconStory.args = {
|
||||
size: 40,
|
||||
color: '#2F80ED',
|
||||
};
|
||||
CopyIconStory.storyName = 'CopyIcon';
|
||||
|
||||
export const PreloaderStory = (args) => <Preloader {...args} />;
|
||||
PreloaderStory.args = {
|
||||
size: 40,
|
||||
};
|
||||
PreloaderStory.storyName = 'Preloader';
|
||||
|
||||
@ -25,5 +25,8 @@ export default function InfoIconInverted({ severity }) {
|
||||
}
|
||||
|
||||
InfoIconInverted.propTypes = {
|
||||
/**
|
||||
* Severity can be 1 of 4 states:'danger', 'warning', 'info' or 'success'
|
||||
*/
|
||||
severity: PropTypes.oneOf(Object.values(SEVERITIES)),
|
||||
};
|
||||
|
||||
@ -24,5 +24,8 @@ export default function InfoIcon({ severity }) {
|
||||
}
|
||||
|
||||
InfoIcon.propTypes = {
|
||||
/**
|
||||
* Severity can be 1 of 4 states:'danger', 'warning', 'info' or 'success'
|
||||
*/
|
||||
severity: PropTypes.oneOf(Object.values(SEVERITIES)),
|
||||
};
|
||||
|
||||
@ -28,8 +28,17 @@ Interaction.defaultProps = {
|
||||
};
|
||||
|
||||
Interaction.propTypes = {
|
||||
/**
|
||||
* Additional className
|
||||
*/
|
||||
className: PropTypes.string,
|
||||
/**
|
||||
* Size of the icon should adhere to 8px grid. e.g: 8, 16, 24, 32, 40
|
||||
*/
|
||||
size: PropTypes.number.isRequired,
|
||||
/**
|
||||
* Color of the icon should be a valid design system color and is required
|
||||
*/
|
||||
color: PropTypes.string.isRequired,
|
||||
};
|
||||
|
||||
|
||||
@ -31,7 +31,16 @@ export default function BuyIcon({
|
||||
}
|
||||
|
||||
BuyIcon.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,
|
||||
};
|
||||
|
||||
@ -23,7 +23,16 @@ export default function SwapIcon({
|
||||
}
|
||||
|
||||
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,
|
||||
};
|
||||
|
||||
@ -26,7 +26,16 @@ PaperAirplane.defaultProps = {
|
||||
};
|
||||
|
||||
PaperAirplane.propTypes = {
|
||||
/**
|
||||
* Additional className
|
||||
*/
|
||||
className: PropTypes.string,
|
||||
/**
|
||||
* Size of the icon should adhere to 8px grid. e.g: 8, 16, 24, 32, 40 and is required
|
||||
*/
|
||||
size: PropTypes.number.isRequired,
|
||||
/**
|
||||
* Color of the icon should be a valid design system color
|
||||
*/
|
||||
color: PropTypes.string,
|
||||
};
|
||||
|
||||
@ -31,8 +31,17 @@ Receive.defaultProps = {
|
||||
};
|
||||
|
||||
Receive.propTypes = {
|
||||
/**
|
||||
* Additional className
|
||||
*/
|
||||
className: PropTypes.string,
|
||||
/**
|
||||
* Size of the icon should adhere to 8px grid. e.g: 8, 16, 24, 32, 40 and is required
|
||||
*/
|
||||
size: PropTypes.number.isRequired,
|
||||
/**
|
||||
* Color of the icon should be a valid design system color and is required
|
||||
*/
|
||||
color: PropTypes.string.isRequired,
|
||||
};
|
||||
|
||||
|
||||
@ -23,8 +23,17 @@ Send.defaultProps = {
|
||||
};
|
||||
|
||||
Send.propTypes = {
|
||||
/**
|
||||
* Additional className
|
||||
*/
|
||||
className: PropTypes.string,
|
||||
/**
|
||||
* Size of the icon should adhere to 8px grid. e.g: 8, 16, 24, 32, 40 and is required
|
||||
*/
|
||||
size: PropTypes.number.isRequired,
|
||||
/**
|
||||
* Color of the icon should be a valid design system color and is required
|
||||
*/
|
||||
color: PropTypes.string.isRequired,
|
||||
};
|
||||
|
||||
|
||||
@ -28,7 +28,16 @@ export default function Sign({ className, size, color }) {
|
||||
}
|
||||
|
||||
Sign.propTypes = {
|
||||
/**
|
||||
* Additional className
|
||||
*/
|
||||
className: PropTypes.string,
|
||||
/**
|
||||
* Size of the icon should adhere to 8px grid. e.g: 8, 16, 24, 32, 40 and is required
|
||||
*/
|
||||
size: PropTypes.number.isRequired,
|
||||
/**
|
||||
* Color of the icon should be a valid design system color and is required
|
||||
*/
|
||||
color: PropTypes.string.isRequired,
|
||||
};
|
||||
|
||||
@ -25,5 +25,8 @@ export default function SunCheck({ reverseColors }) {
|
||||
}
|
||||
|
||||
SunCheck.propTypes = {
|
||||
/**
|
||||
* If true reverses the colors of the SunCheck icon
|
||||
*/
|
||||
reverseColors: PropTypes.bool,
|
||||
};
|
||||
|
||||
@ -28,8 +28,17 @@ Swap.defaultProps = {
|
||||
};
|
||||
|
||||
Swap.propTypes = {
|
||||
/**
|
||||
* Additional className
|
||||
*/
|
||||
className: PropTypes.string,
|
||||
/**
|
||||
* Size of the icon should adhere to 8px grid. e.g: 8, 16, 24, 32, 40 and is required
|
||||
*/
|
||||
size: PropTypes.number.isRequired,
|
||||
/**
|
||||
* Color of the icon should be a valid design system color and is required
|
||||
*/
|
||||
color: PropTypes.string.isRequired,
|
||||
};
|
||||
|
||||
|
||||
@ -25,7 +25,16 @@ export default function SwapIcon({
|
||||
}
|
||||
|
||||
SwapIcon.propTypes = {
|
||||
/**
|
||||
* Width of the icon
|
||||
*/
|
||||
width: PropTypes.string,
|
||||
/**
|
||||
* Height of the icon
|
||||
*/
|
||||
height: PropTypes.string,
|
||||
/**
|
||||
* Color of the icon should be a valid design system color
|
||||
*/
|
||||
color: PropTypes.string,
|
||||
};
|
||||
|
||||
Loading…
Reference in New Issue
Block a user