@conveyorhq/arrow-ds 2.0.0-beta.1 → 2.0.0-beta.10

package/src/components/Grid/Grid.story.mdx

@@ -6,6 +6,9 @@ import {
   SourceState,
 } from "@storybook/addon-docs/blocks";
 import { ComponentHeading } from "../../storybook-components";
+import { useDisclosure } from "../../hooks";
+import { Button } from "../Button";
+import { Flex } from "../Flex";
 import { Panel } from "../Panel";
 import { Grid } from "./Grid";
 
@@ -17,10 +20,22 @@ import { Grid } from "./Grid";
   sourcePath="src/components/Grid/Grid.tsx"
 />
 
+`Grid` is just a `Box` with [grid layout](https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Grid_Layout) enabled.
+
+`Grid` also provides a `Grid.Item` child component. `Grid.Item` is not required
+to use with `Grid`. Any child component of a `Grid` becomes a grid item.
+`Grid.Item` just exposes some props to help you place the item within the grid.
+Otherwise, you’ll likely need to apply a `style` prop to your grid items to
+place them on rows or columns. There is an example below.
+
+## Installation
+
 ```jsx
 import { Grid } from "@conveyorhq/arrow-ds";
 ```
 
+## Basic usage
+
 <Preview withSource={SourceState.OPEN}>
   <Story name="Grid">
     <Grid columns={["repeat(2, 1fr)"]} gap="24px">
@@ -34,16 +49,18 @@ import { Grid } from "@conveyorhq/arrow-ds";
   </Story>
 </Preview>
 
-## Props
-
-Both `Grid` and `Grid.Item` extend `BoxProps`.
+## API
 
 ### Grid
 
+Extends `BoxProps`
+
 <Props of={Grid} />
 
 ### Grid.Item
 
+Extends `BoxProps`
+
 <Props of={Grid.Item} />
 
 ## Demos
@@ -117,3 +134,188 @@ convention is to put the names inside square brackets.
     </Grid>
   </Story>
 </Preview>
+
+### Spacing grid items
+
+Use the `gap` property or gap [classnames](https://tailwindcss.com/docs/gap) to
+set space between grid items. Gap can be set vertically, horizontally or both.
+
+You can pass up to two values to gap; the first value being x-axis (row gap) add
+the second value being y-axis (column gap).
+
+Gap will not add space to the beginning or end of the list of grid items.
+
+#### Equal gap on all sides
+
+Use `gap="8px"` or `className="gap-2"`
+
+<Preview withSource={SourceState.OPEN}>
+  <Story name="Grid with equal gap">
+    <Grid columns="repeat(4, 1fr)" gap="8px">
+      {[...Array(12).keys()].map((item) => {
+        return (
+          <Grid.Item key={`grid-item-${item}`}>
+            <Panel className="p-8">Grid item {item + 1}</Panel>
+          </Grid.Item>
+        );
+      })}
+    </Grid>
+  </Story>
+</Preview>
+
+#### Unequal gap on all sides
+
+Use `gap="16px 8px"` or `className="gap-x-4 gap-y-2"`
+
+<Preview withSource={SourceState.OPEN}>
+  <Story name="Grid with unequal gap">
+    <Grid columns="repeat(4, 1fr)" gap="16px 8px">
+      {[...Array(12).keys()].map((item) => {
+        return (
+          <Grid.Item key={`grid-item-${item}`}>
+            <Panel className="p-8">Grid item {item + 1}</Panel>
+          </Grid.Item>
+        );
+      })}
+    </Grid>
+  </Story>
+</Preview>
+
+#### Column gap
+
+Use `gap="0 8px"` or `className="gap-y-2"`
+
+<Preview withSource={SourceState.OPEN}>
+  <Story name="Grid with column gap">
+    <Grid columns="repeat(4, 1fr)" gap="0 8px">
+      {[...Array(12).keys()].map((item) => {
+        return (
+          <Grid.Item key={`grid-item-${item}`}>
+            <Panel className="p-8">Grid item {item + 1}</Panel>
+          </Grid.Item>
+        );
+      })}
+    </Grid>
+  </Story>
+</Preview>
+
+#### Row gap
+
+Use `gap="8px 0"` or `className="gap-x-2"`
+
+<Preview withSource={SourceState.OPEN}>
+  <Story name="Grid with row gap">
+    <Grid columns="repeat(4, 1fr)" gap="8px 0">
+      {[...Array(12).keys()].map((item) => {
+        return (
+          <Grid.Item key={`grid-item-${item}`}>
+            <Panel className="p-8">Grid item {item + 1}</Panel>
+          </Grid.Item>
+        );
+      })}
+    </Grid>
+  </Story>
+</Preview>
+
+### Using Grid.Item
+
+`Grid.Item` provides props to help you place the item within the grid. These
+props are not required nor always necessary to place items on the grid. If you
+have a complex grid layout, you might want to be explicit in setting the row and
+column for each item, otherwise the grid will place the items implicitly. In the
+example below, Grid Item 4 does not define its column or row, but the grid
+places the item in the first available spot on the grid. If we had 5 items and
+one item did not define columns or rows, it would be placed outside of the grid
+that was defined. You can try this below.
+
+When a `column` or `row` value has two numbers divided by `/`, this is
+shorthand for `grid-*-start` and `grid-*-end`.
+
+When using `area`, values that are divided by `/`, this is shorthand for
+`grid-row-start grid-column-start grid-row-end grid-column-end`.
+
+A `grid-*-end` value of `-1` will extend the column full-width or row
+full-height.
+
+<Preview withSource={SourceState.OPEN}>
+  <Story name="Grid.Item">
+    {() => {
+      const { isOpen, onToggle } = useDisclosure();
+      return (
+        <>
+          <Flex className="items-center gap-2 mb-4">
+            <Button onClick={onToggle}>
+              {isOpen ? "Remove" : "Add"} Grid Item 5
+            </Button>
+            {isOpen
+              ? "That is because Grid Item 5 has explictly defined the space that Grid Item 4 implicitly occupies"
+              : "This will push Grid Item 4 outside of the explict grid and create an implicit third row"}
+          </Flex>
+          <Grid columns="1fr 2fr 1fr" rows="repeat(2, 1fr)" gap="8px">
+            <Grid.Item column="1 / 3" row="2 / auto">
+              <Panel className="p-8">Grid item 1</Panel>
+            </Grid.Item>
+            <Grid.Item column="2" row="1">
+              <Panel className="p-8">Grid item 2</Panel>
+            </Grid.Item>
+            <Grid.Item area="1 / 3 / -1 / -1">
+              <Panel className="p-8 h-full">Grid item 3</Panel>
+            </Grid.Item>
+            <Grid.Item>
+              <Panel
+                className={`p-8 ${isOpen ? "bg-red-200" : "bg-green-200"}`}
+              >
+                Grid item 4
+              </Panel>
+            </Grid.Item>
+            {isOpen && (
+              <Grid.Item area="1 / 1 / 2 / 2">
+                <Panel className="p-8 bg-gold-200">Grid item 5</Panel>
+              </Grid.Item>
+            )}
+          </Grid>
+        </>
+      );
+    }}
+  </Story>
+</Preview>
+
+### Opting out of Grid.Item
+
+As stated above, `Grid.Item` is not required. Here’s how you might use
+custom components inside of a grid.
+
+<Preview withSource={SourceState.OPEN}>
+  <Story name="Grid without Grid.Item">
+    <Grid columns="1fr 2fr 1fr" rows="repeat(2, 1fr)" gap="8px">
+      <Panel
+        className="p-8"
+        style={{
+          gridColumn: "3",
+          gridRow: "2 / auto",
+        }}
+      >
+        Grid item 1
+      </Panel>
+      <Panel
+        className="p-8"
+        style={{
+          gridColumn: "2",
+          gridRow: "2",
+        }}
+      >
+        Grid item 2
+      </Panel>
+      <Panel
+        className="p-8"
+        style={{
+          gridColumn: "1",
+          gridRow: "1",
+        }}
+      >
+        Grid item 3
+      </Panel>
+      <Panel className="p-8 h-full">Grid item 4</Panel>
+    </Grid>
+  </Story>
+</Preview>

package/src/components/Grid/Grid.tsx

@@ -1,16 +1,50 @@
 import React, { ForwardRefExoticComponent, forwardRef } from "react";
 import classNames from "classnames";
 import { Box, BoxProps } from "../Box";
+import { bemHOF } from "../../utilities";
+
+const cn = bemHOF("Grid");
 
 interface GridProps extends BoxProps {
-  columns?: string[];
-  rows?: string[];
+  /**
+   * Maps to the
+   * [`grid-template-columns` CSS property](https://developer.mozilla.org/en-US/docs/Web/CSS/grid-template-columns)
+   * which defines the line names and track sizing functions of the grid columns.
+   */
+  columns?: string | string[];
+  /**
+   * Maps to the
+   * [`grid-template-rows` CSS property](https://developer.mozilla.org/en-US/docs/Web/CSS/grid-template-rows)
+   * which defines the line names and track sizing functions of the grid rows.
+   */
+  rows?: string | string[];
+  /**
+   * Sets the gaps (gutters) between rows and columns. It can be a single value
+   * to set both row and column gaps or two values separated by a space to define
+   * separate row and column gaps.
+   */
   gap?: string;
 }
 
 interface GridItemProps extends BoxProps {
+  /**
+   * Specifies a grid item’s size and location within a grid column; internally,
+   * it sets the [`grid-column`](https://developer.mozilla.org/en-US/docs/Web/CSS/grid-column)
+   * CSS property
+   */
   column?: string;
+  /**
+   * Specifies a grid item’s size and location within a grid row; internally,
+   * it sets the [`grid-row`](https://developer.mozilla.org/en-US/docs/Web/CSS/grid-row)
+   * CSS property
+   */
   row?: string;
+  /**
+   * Specifies a grid item’s size and location within a grid; internally,
+   * it sets the [`grid-area`](https://developer.mozilla.org/en-US/docs/Web/CSS/grid-area)
+   * CSS property. `grid-area` is a shorthand property that can set both column
+   * and row in a single value.
+   */
   area?: string;
 }
 
@@ -53,16 +87,21 @@ export const GridItem: ForwardRefExoticComponent<GridItemProps> = forwardRef<
 export const Grid = forwardRef<HTMLDivElement, GridProps>((props, ref) => {
   const { className, style, columns = [], rows = [], gap, ...rest } = props;
 
+  const gridTemplateColumns = Array.isArray(columns)
+    ? columns.join(" ")
+    : columns;
+  const gridTemplateRows = Array.isArray(rows) ? rows.join(" ") : rows;
+
   const styles = {
-    gridTemplateColumns: columns.join(" "),
-    gridTemplateRows: rows.join(" "),
+    gridTemplateColumns,
+    gridTemplateRows,
     gap,
     ...style,
   };
 
   return (
     <Box
-      className={classNames("grid", className)}
+      className={classNames(cn(), className)}
       ref={ref}
       style={styles}
       {...rest}

package/src/components/Grid/index.css

@@ -0,0 +1,3 @@
+.ads-Grid {
+  @apply grid;
+}

package/src/components/Icon/Icon.tsx

@@ -8,12 +8,13 @@ import { faFileAlt } from "@fortawesome/free-regular-svg-icons/faFileAlt";
 import { faQuestionCircle as faQuestionCircleRegular } from "@fortawesome/free-regular-svg-icons/faQuestionCircle";
 import { faUser as faUserRegular } from "@fortawesome/free-regular-svg-icons/faUser";
 import { faCheckCircle as faCheckCircleRegular } from "@fortawesome/free-regular-svg-icons/faCheckCircle";
-import { faTimesCircle } from "@fortawesome/free-regular-svg-icons/faTimesCircle";
+import { faCircle as faCircleRegular } from "@fortawesome/free-regular-svg-icons/faCircle";
+import { faTimesCircle as faTimesCircleRegular } from "@fortawesome/free-regular-svg-icons/faTimesCircle";
 import { faClock } from "@fortawesome/free-regular-svg-icons/faClock";
 import { faKeyboard } from "@fortawesome/free-regular-svg-icons/faKeyboard";
 import { faStar } from "@fortawesome/free-regular-svg-icons/faStar";
-import { faThumbsDown } from "@fortawesome/free-regular-svg-icons/faThumbsDown";
-import { faThumbsUp } from "@fortawesome/free-regular-svg-icons/faThumbsUp";
+import { faThumbsDown as faThumbsDownRegular } from "@fortawesome/free-regular-svg-icons/faThumbsDown";
+import { faThumbsUp as faThumbsUpRegular } from "@fortawesome/free-regular-svg-icons/faThumbsUp";
 
 // fas
 import { faArchive } from "@fortawesome/free-solid-svg-icons/faArchive";
@@ -23,11 +24,17 @@ import { faArrowRight } from "@fortawesome/free-solid-svg-icons/faArrowRight";
 import { faArrowUp } from "@fortawesome/free-solid-svg-icons/faArrowUp";
 import { faBackward } from "@fortawesome/free-solid-svg-icons/faBackward";
 import { faBan } from "@fortawesome/free-solid-svg-icons/faBan";
+import { faBatteryHalf } from "@fortawesome/free-solid-svg-icons/faBatteryHalf";
+import { faBed } from "@fortawesome/free-solid-svg-icons/faBed";
+import { faBell } from "@fortawesome/free-solid-svg-icons/faBell";
 import { faBolt } from "@fortawesome/free-solid-svg-icons/faBolt";
 import { faCalculator } from "@fortawesome/free-solid-svg-icons/faCalculator";
 import { faCalendar } from "@fortawesome/free-solid-svg-icons/faCalendar";
 import { faCaretDown } from "@fortawesome/free-solid-svg-icons/faCaretDown";
+import { faCaretLeft } from "@fortawesome/free-solid-svg-icons/faCaretLeft";
+import { faCaretRight } from "@fortawesome/free-solid-svg-icons/faCaretRight";
 import { faCaretUp } from "@fortawesome/free-solid-svg-icons/faCaretUp";
+import { faChartLine } from "@fortawesome/free-solid-svg-icons/faChartLine";
 import { faCheck } from "@fortawesome/free-solid-svg-icons/faCheck";
 import { faCheckCircle } from "@fortawesome/free-solid-svg-icons/faCheckCircle";
 import { faChevronDown } from "@fortawesome/free-solid-svg-icons/faChevronDown";
@@ -37,13 +44,17 @@ import { faChevronUp } from "@fortawesome/free-solid-svg-icons/faChevronUp";
 import { faCircle } from "@fortawesome/free-solid-svg-icons/faCircle";
 import { faCircleNotch } from "@fortawesome/free-solid-svg-icons/faCircleNotch";
 import { faClipboard } from "@fortawesome/free-solid-svg-icons/faClipboard";
+import { faClock as faClockSolid } from "@fortawesome/free-solid-svg-icons/faClock";
 import { faCog } from "@fortawesome/free-solid-svg-icons/faCog";
 import { faColumns } from "@fortawesome/free-solid-svg-icons/faColumns";
 import { faCommentAlt } from "@fortawesome/free-solid-svg-icons/faCommentAlt";
+import { faCompass } from "@fortawesome/free-solid-svg-icons/faCompass";
 import { faCompress } from "@fortawesome/free-solid-svg-icons/faCompress";
+import { faCrown } from "@fortawesome/free-solid-svg-icons/faCrown";
 import { faEllipsisH } from "@fortawesome/free-solid-svg-icons/faEllipsisH";
 import { faEllipsisV } from "@fortawesome/free-solid-svg-icons/faEllipsisV";
 import { faEnvelope } from "@fortawesome/free-solid-svg-icons/faEnvelope";
+import { faExclamationCircle } from "@fortawesome/free-solid-svg-icons/faExclamationCircle";
 import { faExclamationTriangle } from "@fortawesome/free-solid-svg-icons/faExclamationTriangle";
 import { faExpand } from "@fortawesome/free-solid-svg-icons/faExpand";
 import { faExternalLinkAlt } from "@fortawesome/free-solid-svg-icons/faExternalLinkAlt";
@@ -62,6 +73,7 @@ import { faForward } from "@fortawesome/free-solid-svg-icons/faForward";
 import { faGripLines } from "@fortawesome/free-solid-svg-icons/faGripLines";
 import { faGripLinesVertical } from "@fortawesome/free-solid-svg-icons/faGripLinesVertical";
 import { faHashtag } from "@fortawesome/free-solid-svg-icons/faHashtag";
+import { faHighlighter } from "@fortawesome/free-solid-svg-icons/faHighlighter";
 import { faInfoCircle } from "@fortawesome/free-solid-svg-icons/faInfoCircle";
 import { faKey } from "@fortawesome/free-solid-svg-icons/faKey";
 import { faLayerGroup } from "@fortawesome/free-solid-svg-icons/faLayerGroup";
@@ -72,6 +84,7 @@ import { faLongArrowAltRight } from "@fortawesome/free-solid-svg-icons/faLongArr
 import { faMagic } from "@fortawesome/free-solid-svg-icons/faMagic";
 import { faMapSigns } from "@fortawesome/free-solid-svg-icons/faMapSigns";
 import { faMinus } from "@fortawesome/free-solid-svg-icons/faMinus";
+import { faMousePointer } from "@fortawesome/free-solid-svg-icons/faMousePointer";
 import { faPaperclip } from "@fortawesome/free-solid-svg-icons/faPaperclip";
 import { faPause } from "@fortawesome/free-solid-svg-icons/faPause";
 import { faPen } from "@fortawesome/free-solid-svg-icons/faPen";
@@ -79,10 +92,14 @@ import { faPlay } from "@fortawesome/free-solid-svg-icons/faPlay";
 import { faPlus } from "@fortawesome/free-solid-svg-icons/faPlus";
 import { faPlusCircle } from "@fortawesome/free-solid-svg-icons/faPlusCircle";
 import { faPooStorm } from "@fortawesome/free-solid-svg-icons/faPooStorm";
+import { faQuestion } from "@fortawesome/free-solid-svg-icons/faQuestion";
 import { faQuestionCircle } from "@fortawesome/free-solid-svg-icons/faQuestionCircle";
 import { faScroll } from "@fortawesome/free-solid-svg-icons/faScroll";
 import { faSearch } from "@fortawesome/free-solid-svg-icons/faSearch";
+import { faShareAlt } from "@fortawesome/free-solid-svg-icons/faShareAlt";
 import { faShieldAlt } from "@fortawesome/free-solid-svg-icons/faShieldAlt";
+import { faSignature } from "@fortawesome/free-solid-svg-icons/faSignature";
+import { faSignOutAlt } from "@fortawesome/free-solid-svg-icons/faSignOutAlt";
 import { faSlidersH } from "@fortawesome/free-solid-svg-icons/faSlidersH";
 import { faSort } from "@fortawesome/free-solid-svg-icons/faSort";
 import { faSortDown } from "@fortawesome/free-solid-svg-icons/faSortDown";
@@ -93,17 +110,33 @@ import { faStar as faStarSolid } from "@fortawesome/free-solid-svg-icons/faStar"
 import { faSync } from "@fortawesome/free-solid-svg-icons/faSync";
 import { faTasks } from "@fortawesome/free-solid-svg-icons/faTasks";
 import { faThLarge } from "@fortawesome/free-solid-svg-icons/faThLarge";
+import { faThumbsDown as faThumbsDownSolid } from "@fortawesome/free-solid-svg-icons/faThumbsDown";
+import { faThumbsUp as faThumbsUpSolid } from "@fortawesome/free-solid-svg-icons/faThumbsUp";
 import { faTicketAlt } from "@fortawesome/free-solid-svg-icons/faTicketAlt";
 import { faTimes } from "@fortawesome/free-solid-svg-icons/faTimes";
+import { faTimesCircle as faTimesCircleSolid } from "@fortawesome/free-solid-svg-icons/faTimesCircle";
+import { faTools } from "@fortawesome/free-solid-svg-icons/faTools";
 import { faTrash } from "@fortawesome/free-solid-svg-icons/faTrash";
+import { faUnlock } from "@fortawesome/free-solid-svg-icons/faUnlock";
 import { faUser } from "@fortawesome/free-solid-svg-icons/faUser";
 import { faUserAstronaut } from "@fortawesome/free-solid-svg-icons/faUserAstronaut";
+import { faUserFriends } from "@fortawesome/free-solid-svg-icons/faUserFriends";
 import { faUserPlus } from "@fortawesome/free-solid-svg-icons/faUserPlus";
 import { faUsers } from "@fortawesome/free-solid-svg-icons/faUsers";
-import { faUserFriends } from "@fortawesome/free-solid-svg-icons/faUserFriends";
+import { faUserShield } from "@fortawesome/free-solid-svg-icons/faUserShield";
 
 // Custom icon SVGs
-import { DialogCheck, Scroll, Sparkle, TriangleDown, TriangleUp } from "./svg";
+import {
+  ArrowToBottom,
+  BadgeCheck,
+  CommentAltCheck,
+  DialogCheck,
+  Folders,
+  Scroll,
+  Sparkle,
+  TriangleDown,
+  TriangleUp,
+} from "./svg";
 
 import { StatusContext } from "../../contexts/status";
 import { STATUS_VARIANT } from "../../types";
@@ -120,11 +153,17 @@ library.add(
   faArrowUp,
   faBackward,
   faBan,
+  faBatteryHalf,
+  faBed,
+  faBell,
   faBolt,
   faCalculator,
   faCalendar,
   faCaretDown,
+  faCaretLeft,
+  faCaretRight,
   faCaretUp,
+  faChartLine,
   faCheck,
   faCheckCircle,
   faCheckCircleRegular,
@@ -134,15 +173,20 @@ library.add(
   faChevronUp,
   faCircle,
   faCircleNotch,
+  faCircleRegular,
   faClipboard,
   faClock,
+  faClockSolid,
   faCog,
   faColumns,
   faCommentAlt,
+  faCompass,
   faCompress,
+  faCrown,
   faEllipsisH,
   faEllipsisV,
   faEnvelope,
+  faExclamationCircle,
   faExclamationTriangle,
   faExpand,
   faExternalLinkAlt,
@@ -162,6 +206,7 @@ library.add(
   faGripLines,
   faGripLinesVertical,
   faHashtag,
+  faHighlighter,
   faInfoCircle,
   faKey,
   faKeyboard,
@@ -173,6 +218,7 @@ library.add(
   faMagic,
   faMapSigns,
   faMinus,
+  faMousePointer,
   faPaperclip,
   faPause,
   faPen,
@@ -180,11 +226,15 @@ library.add(
   faPlus,
   faPlusCircle,
   faPooStorm,
+  faQuestion,
   faQuestionCircle,
   faQuestionCircleRegular,
   faScroll,
   faSearch,
+  faShareAlt,
   faShieldAlt,
+  faSignature,
+  faSignOutAlt,
   faSlidersH,
   faSort,
   faSortDown,
@@ -196,22 +246,32 @@ library.add(
   faSync,
   faTasks,
   faThLarge,
-  faThumbsDown,
-  faThumbsUp,
+  faThumbsDownRegular,
+  faThumbsDownSolid,
+  faThumbsUpRegular,
+  faThumbsUpSolid,
   faTicketAlt,
   faTimes,
-  faTimesCircle,
+  faTimesCircleRegular,
+  faTimesCircleSolid,
+  faTools,
   faTrash,
+  faUnlock,
   faUser,
   faUserAstronaut,
+  faUserFriends,
   faUserPlus,
   faUserRegular,
   faUsers,
-  faUserFriends,
+  faUserShield,
 );
 
 export enum CUSTOM_ICON_TYPE {
+  ARROW_TO_BOTTOM = "arrow-to-bottom",
+  BADGE_CHECK = "badge-check",
+  COMMENT_ALT_CHECK = "comment-alt-check",
   DIALOG_CHECK = "dialog-check",
+  FOLDERS = "folders",
   SCROLL = "scroll",
   SPARKLE = "sparkle",
   TRIANGLE_DOWN = "triangle-down",
@@ -223,7 +283,11 @@ type CustomIconPaths = Record<
   (props: SvgProps) => JSX.Element
 >;
 const CustomIcons: CustomIconPaths = {
+  [CUSTOM_ICON_TYPE.ARROW_TO_BOTTOM]: ArrowToBottom,
+  [CUSTOM_ICON_TYPE.BADGE_CHECK]: BadgeCheck,
+  [CUSTOM_ICON_TYPE.COMMENT_ALT_CHECK]: CommentAltCheck,
   [CUSTOM_ICON_TYPE.DIALOG_CHECK]: DialogCheck,
+  [CUSTOM_ICON_TYPE.FOLDERS]: Folders,
   [CUSTOM_ICON_TYPE.SCROLL]: Scroll,
   [CUSTOM_ICON_TYPE.SPARKLE]: Sparkle,
   [CUSTOM_ICON_TYPE.TRIANGLE_DOWN]: TriangleDown,
@@ -238,11 +302,17 @@ export enum ICON_TYPE {
   ARROW_UP = "arrow-up",
   BACKWARD = "backward",
   BAN = "ban",
+  BATTERY_HALF = "battery-half",
+  BED = "bed",
+  BELL = "bell",
   BOLT = "bolt",
   CALENDAR = "calendar",
   CALCULATOR = "calculator",
   CARET_DOWN = "caret-down",
+  CARET_LEFT = "caret-left",
+  CARET_RIGHT = "caret-right",
   CARET_UP = "caret-up",
+  CHART_LINE = "chart-line",
   CHECK = "check",
   CHECK_CIRCLE = "check-circle",
   CHEVRON_DOWN = "chevron-down",
@@ -256,10 +326,13 @@ export enum ICON_TYPE {
   COG = "cog",
   COLUMNS = "columns",
   COMMENT_ALT = "comment-alt",
+  COMPASS = "compass",
   COMPRESS = "compress",
+  CROWN = "crown",
   ELLIPSIS_H = "ellipsis-h",
   ELLIPSIS_V = "ellipsis-v",
   ENVELOPE = "envelope",
+  EXCLAMATION_CIRCLE = "exclamation-circle",
   EXCLAMATION_TRIANGLE = "exclamation-triangle",
   EXPAND = "expand",
   EXTERNAL_LINK_ALT = "external-link-alt",
@@ -278,6 +351,7 @@ export enum ICON_TYPE {
   GRIP_LINES = "grip-lines",
   GRIP_LINES_VERTICAL = "grip-lines-vertical",
   HASHTAG = "hashtag",
+  HIGHLIGHTER = "highlighter",
   INFO_CIRCLE = "info-circle",
   KEY = "key",
   KEYBOARD = "keyboard",
@@ -289,6 +363,7 @@ export enum ICON_TYPE {
   MAGIC = "magic",
   MAP_SIGNS = "map-signs",
   MINUS = "minus",
+  MOUSE_POINTER = "mouse-pointer",
   PAPERCLIP = "paperclip",
   PAUSE = "pause",
   PEN = "pen",
@@ -296,10 +371,14 @@ export enum ICON_TYPE {
   PLUS = "plus",
   PLUS_CIRCLE = "plus-circle",
   POO_STORM = "poo-storm", // Use in storybook examples
+  QUESTION = "question",
   QUESTION_CIRCLE = "question-circle",
   SCROLL = "scroll",
   SEARCH = "search",
+  SHARE_ALT = "share-alt",
   SHIELD_ALT = "shield-alt",
+  SIGN_OUT_ALT = "sign-out-alt",
+  SIGNATURE = "signature",
   SLIDERS_H = "sliders-h",
   SORT = "sort",
   SORT_DOWN = "sort-down",
@@ -315,12 +394,15 @@ export enum ICON_TYPE {
   TH_LARGE = "th-large",
   THUMBS_DOWN = "thumbs-down",
   THUMBS_UP = "thumbs-up",
+  TOOLS = "tools",
   TRASH = "trash",
+  UNLOCK = "unlock",
   USER = "user",
   USER_ASTRONAUT = "user-astronaut",
   USER_PLUS = "user-plus",
   USERS = "users",
   USER_FRIENDS = "user-friends",
+  USER_SHIELD = "user-shield",
 }
 
 export enum ICON_STYLE_PREFIX {
@@ -465,3 +547,5 @@ export const StatusIcon = forwardRef<HTMLSpanElement, StatusIconProps>(
     return <Icon ref={ref} icon={icon} {...rest} />;
   },
 );
+
+export type IconType = ICON_TYPE | CUSTOM_ICON_TYPE;

package/src/components/Icon/svg/ArrowToBottom.tsx

@@ -0,0 +1,17 @@
+import React from "react";
+import { Svg, SvgProps } from "../../Svg";
+
+export const ArrowToBottom = (props: SvgProps) => {
+  return (
+    <Svg width="27" height="32" viewBox="0 0 27 32" fill="none" {...props}>
+      <path
+        d="M1.671 26.82h24.063c0.923 0 1.671 0.748 1.671 1.671v1.838c0 0.923-0.748 1.671-1.671 1.671h-24.063c-0.923 0-1.671-0.748-1.671-1.671v-1.838c0-0.923 0.748-1.671 1.671-1.671z"
+        fill="currentColor"
+      />
+      <path
+        d="M23.047 11.777l1.613 1.609c0.541 0.54 0.541 1.413 0 1.947l-9.853 9.996c-0.541 0.54-1.751 0.54-2.286 0l-9.858-9.996c-0.541-0.54-0.541-1.413 0-1.947l1.613-1.609c0.547-0.546 1.44-0.534 1.975 0.023l4.94 4.832-0.084-15.254c0-0.764 0.616-1.378 1.382-1.378h2.428c0.766 0 1.382 0.615 1.382 1.378v15.254l4.773-4.832c0.536-0.563 1.428-0.574 1.975-0.023z"
+        fill="currentColor"
+      />
+    </Svg>
+  );
+};

package/src/components/Icon/svg/BadgeCheck.tsx

@@ -0,0 +1,13 @@
+import React from "react";
+import { Svg, SvgProps } from "../../Svg";
+
+export const BadgeCheck = (props: SvgProps) => {
+  return (
+    <Svg width="15" height="15" viewBox="0 0 15 15" fill="none" {...props}>
+      <path
+        d="M14.5 7.75C14.5 6.73828 13.8438 5.86328 12.9141 5.50781C13.3242 4.63281 13.1602 3.53906 12.4492 2.80078C11.7109 2.08984 10.6172 1.92578 9.74219 2.33594C9.38672 1.40625 8.51172 0.75 7.5 0.75C6.46094 0.75 5.58594 1.40625 5.23047 2.33594C4.35547 1.92578 3.26172 2.08984 2.55078 2.80078C1.8125 3.53906 1.64844 4.63281 2.05859 5.50781C1.12891 5.86328 0.5 6.73828 0.5 7.75C0.5 8.78906 1.12891 9.66406 2.05859 10.0195C1.64844 10.8945 1.8125 11.9883 2.55078 12.6992C3.26172 13.4375 4.35547 13.6016 5.23047 13.1914C5.58594 14.1211 6.46094 14.75 7.5 14.75C8.51172 14.75 9.38672 14.1211 9.74219 13.1914C10.6445 13.6016 11.7109 13.4375 12.4492 12.6992C13.1602 11.9883 13.3242 10.8945 12.9141 10.0195C13.8438 9.66406 14.5 8.78906 14.5 7.75ZM10.5352 6.54688L6.95312 10.1016C6.81641 10.2383 6.625 10.2109 6.51562 10.1016L4.4375 8.02344C4.32812 7.91406 4.32812 7.72266 4.4375 7.58594L5.14844 6.875C5.28516 6.76562 5.47656 6.76562 5.58594 6.90234L6.73438 8.05078L9.38672 5.42578C9.52344 5.28906 9.71484 5.28906 9.82422 5.42578L10.5352 6.13672C10.6445 6.24609 10.6445 6.4375 10.5352 6.54688Z"
+        fill="currentColor"
+      />
+    </Svg>
+  );
+};