add chip component (#10199)

ui/app/components/ui/chip/chip.js

@@ -0,0 +1,55 @@
+import React from 'react'
+import PropTypes from 'prop-types'
+import classnames from 'classnames'
+import { omit } from 'lodash'
+import Typography from '../typography'
+import { COLORS } from '../../../helpers/constants/design-system'
+
+export default function Chip({
+  className,
+  children,
+  borderColor = COLORS.UI1,
+  label,
+  labelProps = {},
+  leftIcon,
+  rightIcon,
+  onClick,
+}) {
+  return (
+    <div
+      onClick={onClick}
+      className={classnames(className, 'chip', {
+        'chip--with-left-icon': Boolean(leftIcon),
+        'chip--with-right-icon': Boolean(rightIcon),
+        [`chip--${borderColor}`]: true,
+      })}
+      role="button"
+      tabIndex={0}
+    >
+      {leftIcon && <div className="chip__left-icon">{leftIcon}</div>}
+      {children ?? (
+        <Typography
+          className="chip__label"
+          variant="h6"
+          tag="span"
+          color="UI4"
+          {...labelProps}
+        >
+          {label}
+        </Typography>
+      )}
+      {rightIcon && <div className="chip__right-icon">{rightIcon}</div>}
+    </div>
+  )
+}
+
+Chip.propTypes = {
+  borderColor: PropTypes.oneOf(Object.values(COLORS)),
+  label: PropTypes.string,
+  children: PropTypes.node,
+  labelProps: PropTypes.shape(omit(Typography.propTypes, ['className'])),
+  leftIcon: PropTypes.node,
+  rightIcon: PropTypes.node,
+  className: PropTypes.string,
+  onClick: PropTypes.func,
+}

ui/app/components/ui/chip/chip.scss

@@ -0,0 +1,48 @@
+@use "design-system";
+
+.chip {
+  $self: &;
+
+  border-radius: 100px;
+  border: 1px solid design-system.$ui-1;
+  padding: 8px 16px;
+  margin: 0 4px;
+  display: flex;
+  align-items: center;
+  width: max-content;
+
+  &__left-icon,
+  &__right-icon {
+    display: flex;
+    align-items: center;
+  }
+
+  @each $variant, $color in design-system.$color-map {
+    &--#{$variant} {
+      border-color: $color;
+    }
+  }
+
+  &--with-left-icon,
+  &--with-right-icon {
+    padding-top: 4px;
+    padding-bottom: 4px;
+  }
+
+  &--with-left-icon {
+    padding-left: 4px;
+
+    #{$self}__label {
+      margin-left: 8px;
+    }
+  }
+
+
+
+  &--with-right-icon {
+    padding-right: 4px;
+    #{$self}__label {
+      margin-right: 8px;
+    }
+  }
+}

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

@@ -0,0 +1,82 @@
+/* eslint-disable react/prop-types */
+
+import React 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 Chip from '.'
+
+export default {
+  title: 'Chip',
+}
+
+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 WithLeftIcon = () => (
+  <Plain
+    label="Done!"
+    borderColor={COLORS.SUCCESS3}
+    fontColor={COLORS.SUCCESS3}
+    leftIcon={<ApproveIcon size={24} color="#4cd964" />}
+  />
+)
+
+export const WithRightIcon = () => (
+  <Plain
+    label="0x5CfE73b6021E818B776b421B1c4Db2474086a7e1"
+    borderColor={COLORS.UI4}
+    fontColor={COLORS.UI4}
+    rightIcon={
+      <Identicon
+        address="0x5CfE73b6021E818B776b421B1c4Db2474086a7e1"
+        diameter={25}
+      />
+    }
+  />
+)
+
+export const WithBothIcons = () => (
+  <Plain
+    label="Account 1"
+    borderColor={COLORS.UI4}
+    fontColor={COLORS.UI4}
+    rightIcon={
+      <svg
+        width="10"
+        height="6"
+        viewBox="0 0 10 6"
+        fill="none"
+        xmlns="http://www.w3.org/2000/svg"
+      >
+        <path
+          d="M9.45759 0.857142C9.45759 0.785714 9.42188 0.705357 9.3683 0.651785L8.92188 0.205357C8.8683 0.151785 8.78795 0.116071 8.71652 0.116071C8.64509 0.116071 8.56473 0.151785 8.51116 0.205357L5.00223 3.71429L1.4933 0.205357C1.43973 0.151785 1.35938 0.116071 1.28795 0.116071C1.20759 0.116071 1.13616 0.151785 1.08259 0.205357L0.636161 0.651785C0.582589 0.705357 0.546875 0.785714 0.546875 0.857142C0.546875 0.928571 0.582589 1.00893 0.636161 1.0625L4.79688 5.22321C4.85045 5.27679 4.9308 5.3125 5.00223 5.3125C5.07366 5.3125 5.15402 5.27679 5.20759 5.22321L9.3683 1.0625C9.42188 1.00893 9.45759 0.928571 9.45759 0.857142Z"
+          fill="#24292E"
+        />
+      </svg>
+    }
+    leftIcon={
+      <Identicon
+        address="0x5CfE73b6021E818B776b421B1c4Db2474086a7e1"
+        diameter={25}
+      />
+    }
+  />
+)

ui/app/components/ui/chip/index.js

@@ -0,0 +1 @@
+export { default } from './chip'

ui/app/components/ui/ui-components.scss

@@ -7,6 +7,7 @@
 @import 'button/buttons';
 @import 'card/index';
 @import 'check-box/index';
+@import 'chip/chip';
 @import 'circle-icon/index';
 @import 'currency-display/index';
 @import 'currency-input/index';

ui/app/css/design-system/colors.scss

@@ -136,4 +136,5 @@ $color-map: (
   'kovan': $kovan,
   'rinkeby': $rinkeby,
   'goerli': $goerli,
+  'transparent': transparent,
 );

ui/app/helpers/constants/design-system.js

@@ -25,6 +25,7 @@ export const COLORS = {
   KOVAN: 'kovan',
   RINKEBY: 'rinkeby',
   GOERLI: 'goerli',
+  TRANSPARENT: 'transparent',
 }
 
 export const TYPOGRAPHY = {