Updating Chip component (#12671)

ui/components/ui/chip/README.mdx

@@ -0,0 +1,15 @@
+import { Story, Canvas, ArgsTable } from '@storybook/addon-docs';
+
+import Chip from '.';
+
+# Chip
+
+Chips are compact elements that represent an input, status, or action.
+
+<Canvas>
+  <Story id="ui-components-ui-chip-chip-stories-js--default-story" />
+</Canvas>
+
+## Component API
+
+<ArgsTable of={Chip} />

ui/components/ui/chip/chip.js

@@ -10,6 +10,7 @@ export default function Chip({
   className,
   children,
   borderColor = COLORS.UI1,
+  backgroundColor,
   label,
   labelProps = {},
   leftIcon,
@@ -32,7 +33,8 @@ export default function Chip({
       className={classnames(className, 'chip', {
         'chip--with-left-icon': Boolean(leftIcon),
         'chip--with-right-icon': Boolean(rightIcon),
-        [`chip--${borderColor}`]: true,
+        [`chip--border-color-${borderColor}`]: true,
+        [`chip--background-color-${backgroundColor}`]: true,
       })}
       role={isInteractive ? 'button' : undefined}
       tabIndex={isInteractive ? 0 : undefined}
@@ -55,17 +57,46 @@ export default function Chip({
 }
 
 Chip.propTypes = {
+  /**
+   * Data test id used for testing of the Chip component
+   */
   dataTestId: PropTypes.string,
+  /**
+   * The border color of the Chip
+   */
   borderColor: PropTypes.oneOf(Object.values(COLORS)),
+  /**
+   * The background color of the Chip component
+   */
+  backgroundColor: PropTypes.oneOf(Object.values(COLORS)),
+  /**
+   * The label of the Chip component has a default typography variant of h6 and is a span html element
+   */
   label: PropTypes.string,
-  children: PropTypes.node,
+  /**
+   * The label props of the component. Most Typography props can be used
+   */
   labelProps: PropTypes.shape({
     ...omit(Typography.propTypes, ['children', 'className']),
   }),
+  /**
+   * Children will replace the label of the Chip component.
+   */
+  children: PropTypes.node,
+  /**
+   * An icon component that can be passed to appear on the left of the label
+   */
   leftIcon: PropTypes.node,
+  /**
+   * An icon component that can be passed to appear on the right of the label
+   */
   rightIcon: PropTypes.node,
+  /**
+   * The className of the Chip
+   */
   className: PropTypes.string,
+  /**
+   * The onClick handler to be passed to the Chip component
+   */
   onClick: PropTypes.func,
-  inputValue: PropTypes.string,
-  setInputValue: PropTypes.func,
 };

ui/components/ui/chip/chip.scss

@@ -18,9 +18,12 @@
   }
 
   @each $variant, $color in design-system.$color-map {
-    &--#{$variant} {
+    &--border-color-#{$variant} {
       border-color: $color;
     }
+    &--background-color-#{$variant} {
+      background-color: $color;
+    }
   }
 
   &--with-left-icon,

ui/components/ui/chip/chip.stories.js

@@ -1,51 +1,111 @@
-/* eslint-disable react/prop-types */
-
 import React, { useState } from 'react';
-import { select, text } from '@storybook/addon-knobs';
+
 import { COLORS, TYPOGRAPHY } from '../../../helpers/constants/design-system';
+
 import ApproveIcon from '../icon/approve-icon.component';
 import Identicon from '../identicon/identicon.component';
 import { ChipWithInput } from './chip-with-input';
+
+import README from './README.mdx';
+
 import Chip from '.';
 
 export default {
-  title: 'Chip',
+  title: 'UI/Chip',
   id: __filename,
+  component: Chip,
+  parameters: {
+    docs: {
+      page: README,
+    },
+  },
+  argTypes: {
+    leftIcon: {
+      control: {
+        type: 'select',
+      },
+      options: ['ApproveIcon'],
+      mapping: {
+        ApproveIcon: <ApproveIcon size={24} color="#4cd964" />,
+      },
+    },
+    rightIcon: {
+      control: {
+        type: 'select',
+      },
+      options: ['Identicon'],
+      mapping: {
+        Identicon: (
+          <Identicon
+            address="0x5CfE73b6021E818B776b421B1c4Db2474086a7e1"
+            diameter={25}
+          />
+        ),
+      },
+    },
+    label: {
+      control: 'text',
+    },
+    labelProps: {
+      color: {
+        control: {
+          type: 'select',
+        },
+        options: Object.values(COLORS),
+      },
+      variant: {
+        color: {
+          control: {
+            type: 'select',
+          },
+          options: Object.values(TYPOGRAPHY),
+        },
+      },
+    },
+    borderColor: {
+      control: {
+        type: 'select',
+      },
+      options: Object.values(COLORS),
+    },
+    backgroundColor: {
+      control: {
+        type: 'select',
+      },
+      options: Object.values(COLORS),
+    },
+    children: {
+      control: 'text',
+    },
+  },
 };
 
-export const Plain = ({
-  leftIcon,
-  rightIcon,
-  label = 'Hello',
-  borderColor = COLORS.UI1,
-  fontColor = COLORS.BLACK,
-}) => (
-  <Chip
-    leftIcon={leftIcon}
-    rightIcon={rightIcon}
-    label={text('label', label)}
-    labelProps={{
-      color: select('color', COLORS, fontColor),
-      variant: select('typography', TYPOGRAPHY, TYPOGRAPHY.H6),
-    }}
-    borderColor={select('borderColor', COLORS, borderColor)}
-  />
-);
+export const DefaultStory = (args) => <Chip {...args} />;
+
+DefaultStory.storyName = 'Default';
+
+DefaultStory.args = {
+  label: 'Chip',
+  borderColor: COLORS.UI3,
+  backgroundColor: COLORS.UI1,
+  labelProps: {
+    color: COLORS.BLACK,
+    variant: TYPOGRAPHY.H6,
+  },
+};
 
 export const WithLeftIcon = () => (
-  <Plain
+  <Chip
     label="Done!"
     borderColor={COLORS.SUCCESS3}
-    fontColor={COLORS.SUCCESS3}
     leftIcon={<ApproveIcon size={24} color="#4cd964" />}
   />
 );
 
 export const WithRightIcon = () => (
-  <Plain
+  <Chip
     label="0x5CfE73b6021E818B776b421B1c4Db2474086a7e1"
     borderColor={COLORS.UI4}
-    fontColor={COLORS.UI4}
     rightIcon={
       <Identicon
         address="0x5CfE73b6021E818B776b421B1c4Db2474086a7e1"
@@ -56,10 +116,9 @@ export const WithRightIcon = () => (
 );
 
 export const WithBothIcons = () => (
-  <Plain
+  <Chip
     label="Account 1"
     borderColor={COLORS.UI4}
-    fontColor={COLORS.UI4}
     rightIcon={
       <svg
         width="10"
@@ -82,13 +141,17 @@ export const WithBothIcons = () => (
     }
   />
 );
-export const WithInput = () => {
-  const [inputValue, setInputValue] = useState('');
+export const WithInput = (args) => {
+  const [inputValue, setInputValue] = useState('Chip with input');
   return (
     <ChipWithInput
+      {...args}
       inputValue={inputValue}
       setInputValue={setInputValue}
-      borderColor={select('borderColor', COLORS, COLORS.UI3)}
     />
   );
 };
+
+WithInput.args = {
+  borderColor: COLORS.UI3,
+};