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>

ui/components/ui/icon/README.mdx

@@ -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} />

ui/components/ui/icon/approve-icon.component.js

@@ -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,
 };
 

ui/components/ui/icon/copy-icon.component.js

@@ -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,
 };
 

ui/components/ui/icon/icon.stories.js

@@ -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 BuyIcon from './overview-buy-icon.component';
-import Interaction from './interaction-icon.component';
+import CopyIcon from './copy-icon.component';
-import Preloader from './preloader';
-import Receive from './receive-icon.component';
-import Send from './send-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 = () => (
+const IconItem = ({ Component }) => {
-  <Copy size={number('size', 40)} color={color('color', '#2F80ED')} />
+  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 = () => (
+DefaultStory.args = {
-  <Send size={number('size', 40)} color={color('color', '#2F80ED')} />
+  width: '17',
-);
+  height: '21',
+  fill: '#2F80ED',
+  size: 40,
+  color: '#2F80ED',
+  severity: 'info',
+  reverseColors: false,
+};
 
-export const receive = () => (
+export const ApproveStory = (args) => <Approve {...args} />;
-  <Receive size={number('size', 40)} color={color('color', '#2F80ED')} />
+ApproveStory.args = {
-);
+  size: 40,
+  color: '#2F80ED',
+};
+ApproveStory.storyName = 'Approve';
 
-export const siteInteraction = () => (
+export const SignStory = (args) => <Sign {...args} />;
-  <Interaction size={number('size', 40)} color={color('color', '#2F80ED')} />
+SignStory.args = {
-);
+  size: 40,
+  color: '#2F80ED',
+};
+SignStory.storyName = 'Sign';
 
-export const approveSpendLimit = () => (
+export const SwapStory = (args) => <Swap {...args} />;
-  <Approve size={number('size', 40)} color={color('color', '#2F80ED')} />
+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 = () => (
+export const ReceiveIconStory = (args) => <ReceiveIcon {...args} />;
-  <PaperAirplane color={color('color', '#2F80ED')} size={number('size', 40)} />
+ReceiveIconStory.args = {
-);
+  size: 40,
+  color: '#2F80ED',
+};
+ReceiveIconStory.storyName = 'ReceiveIcon';
 
-export const info = () => (
+export const InteractionStory = (args) => <Interaction {...args} />;
-  <InfoIcon
+InteractionStory.args = {
-    severity={select('severity', SEVERITIES, SEVERITIES.INFO)}
+  size: 40,
-    size={number('size', 40)}
+  color: '#2F80ED',
-  />
+};
-);
+InteractionStory.storyName = 'Interaction';
 
-export const infoInverted = () => (
+export const InfoIconStory = (args) => <InfoIcon {...args} />;
-  <InfoIconInverted
+InfoIconStory.args = {
-    severity={select('severity', SEVERITIES, SEVERITIES.INFO)}
+  severity: SEVERITIES.INFO,
-    size={number('size', 40)}
+};
-  />
+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';

ui/components/ui/icon/info-icon-inverted.component.js

@@ -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)),
 };

ui/components/ui/icon/info-icon.component.js

@@ -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)),
 };

ui/components/ui/icon/interaction-icon.component.js

@@ -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,
 };
 

ui/components/ui/icon/overview-buy-icon.component.js

@@ -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,
 };

ui/components/ui/icon/overview-send-icon.component.js

@@ -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,
 };

ui/components/ui/icon/paper-airplane-icon.js

@@ -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,
 };

ui/components/ui/icon/receive-icon.component.js

@@ -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,
 };
 

ui/components/ui/icon/send-icon.component.js

@@ -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,
 };
 

ui/components/ui/icon/sign-icon.component.js

@@ -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,
 };

ui/components/ui/icon/sun-check-icon.component.js

@@ -25,5 +25,8 @@ export default function SunCheck({ reverseColors }) {
 }
 
 SunCheck.propTypes = {
+  /**
+   * If true reverses the colors of the SunCheck icon
+   */
   reverseColors: PropTypes.bool,
 };

ui/components/ui/icon/swap-icon-for-list.component.js

@@ -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,
 };
 

ui/components/ui/icon/swap-icon.component.js

@@ -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,
 };