Add Chip

packages/react-components/src/Chip/chip.story.tsx

@@ -0,0 +1,20 @@
+import * as React from 'react';
+import { Chip } from './index';
+
+export const Playground = (args: any) => (
+  <Chip
+    {...args}
+  />
+);
+
+Playground.args = {
+  children: 'Hello',
+};
+
+export default {
+  title: 'Components/Chip',
+  component: Chip,
+  argTypes: {
+    children: { control: 'text' },
+  },
+};

packages/react-components/src/Chip/chip.tsx

@@ -0,0 +1,149 @@
+import * as React from 'react';
+import { css, cx } from '../styles';
+import { Typography } from '../Typography';
+import { CheckmarkIcon } from '../icons';
+
+type BaseProps = {
+  /**
+   * The content of the component.
+   */
+  children: React.ReactNode;
+  /**
+   * If `true`, the chip will be disabled.
+   */
+  disabled?: boolean;
+  /**
+   * The variant to use.
+   */
+  variant?: ('choice' | 'filter');
+  /**
+   * If `true`, the chip will be selected.
+   */
+  selected: boolean;
+  /**
+   * The className of the component.
+   */
+  className?: string;
+  dataTestId?: string;
+};
+
+type ChipProps = BaseProps & React.ButtonHTMLAttributes<HTMLButtonElement>;
+
+const stylesBase = () => css({
+  label: 'Chip',
+  display: 'inline-flex',
+  alignItems: 'center',
+  fontFamily: 'inherit',
+  outline: 'none',
+  boxSizing: 'border-box',
+  borderStyle: 'solid',
+  borderWidth: '1px',
+  borderColor: 'var(--pv-color-gray-6)',
+  borderRadius: '15px',
+  padding: '0 10px',
+  height: '30px',
+  backgroundColor: 'transparent',
+  color: 'var(--pv-color-gray-9)',
+  transition: 'background-color 200ms, color 200ms, border-color 200ms',
+  margin: '0 5px',
+  '&:disabled': {
+    cursor: 'not-allowed',
+    color: 'var(--pv-color-gray-7)',
+    borderColor: 'var(--pv-color-gray-4)',
+    backgroundColor: 'transparent',
+  },
+});
+
+const stylesEffects = () => css({
+  label: 'effects',
+  cursor: 'pointer',
+  '&:not(:disabled)': {
+    '&:hover': {
+      backgroundColor: 'var(--pv-color-gray-3)',
+      color: 'var(--pv-color-gray-9)',
+    },
+    '&:focus': {
+      backgroundColor: 'var(--pv-color-gray-5)',
+      color: 'var(--pv-color-black)',
+      borderColor: 'var(--pv-color-gray-9)',
+    },
+    '&:active': {
+      backgroundColor: 'var(--pv-color-gray-4)',
+      color: 'var(--pv-color-gray-9)',
+      borderColor: 'var(--pv-color-gray-9)',
+    },
+  },
+});
+
+const stylesChoiceSelected = () => css({
+  label: 'choice-selected',
+  backgroundColor: 'var(--pv-color-secondary-tint-5)',
+  color: 'var(--pv-color-secondary)',
+  borderColor: 'var(--pv-color-secondary-tint-3)',
+});
+
+const stylesFilterSelected = () => css({
+  label: 'filter-selected',
+  backgroundColor: 'var(--pv-color-gray-4)',
+  color: 'var(--pv-color-black)',
+  borderColor: 'var(--pv-color-gray-7)',
+});
+
+const stylesIcon = () => css({
+  label: 'Chip-icon',
+  marginRight: '10px',
+  display: 'flex',
+  alignItems: 'center',
+});
+
+export const Chip = React.forwardRef<HTMLButtonElement, ChipProps>((props, ref) => {
+  const {
+    children,
+    className,
+    dataTestId,
+    disabled,
+    variant,
+    selected,
+    tabIndex,
+    ...other
+  } = props;
+  const isChoice = variant === 'choice';
+
+  const Icon = selected && !isChoice && (
+    <div className={cx(stylesIcon())}>
+      <CheckmarkIcon />
+    </div>
+  );
+
+  return (
+    <button
+      {...other}
+      disabled={disabled}
+      ref={ref}
+      type="button"
+      className={cx({
+        [stylesBase()]: true,
+        [stylesChoiceSelected()]: selected && isChoice,
+        [stylesFilterSelected()]: selected && !isChoice,
+        [stylesEffects()]: !selected || !isChoice,
+        [className]: !!className,
+      })}
+      tabIndex={selected && isChoice ? -1 : tabIndex}
+      data-testid={dataTestId}
+    >
+      {Icon}
+      <Typography
+        variant="b3"
+      >
+        {children}
+      </Typography>
+    </button>
+  );
+});
+
+Chip.displayName = 'Chip';
+
+Chip.defaultProps = {
+  disabled: false,
+  variant: 'choice',
+};

packages/react-components/src/Chip/index.ts

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

packages/react-components/src/icons/checkmark_icon.tsx

@@ -0,0 +1,18 @@
+import React from 'react';
+
+type IconProps = React.HTMLAttributes<HTMLOrSVGElement>;
+
+export const CheckmarkIcon: React.FC<IconProps> = (props) => (
+  <svg
+    {...props}
+    xmlns="http://www.w3.org/2000/svg"
+    fill="none"
+    viewBox="0 0 20 20"
+    width="20px"
+  >
+    <path
+      fill="currentColor"
+      d="M3.6 9.7l4.9 4.6c.4.4 1 .4 1.4 0l5.9-7v-.6l-.4-.3a.4.4 0 00-.6 0L9.1 13 4.5 8.8a.4.4 0 00-.6 0l-.3.3c-.2.2-.2.5 0 .6z"
+    />
+  </svg>
+);

packages/react-components/src/icons/index.ts

@@ -0,0 +1 @@
+export { CheckmarkIcon } from './checkmark_icon';

packages/react-components/src/index.ts

@@ -1,6 +1,7 @@
 export * from './Avatar';
 export * from './Box';
 export * from './Button';
+export * from './Chip';
 export * from './Collapse';
 export * from './Drawer';
 export * from './Fab';