@conveyorhq/arrow-ds 2.0.0-beta.5 → 2.0.0-beta.9

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 { faCircle as faCircleRegular } from "@fortawesome/free-regular-svg-icons/faCircle";
 import { faTimesCircle } 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,15 @@ 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 { 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 +42,16 @@ 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 { 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";
@@ -72,6 +80,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 +88,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 { faSignOutAlt } from "@fortawesome/free-solid-svg-icons/faSignOutAlt";
+import { faSignature } from "@fortawesome/free-solid-svg-icons/faSignature";
 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,9 +106,12 @@ 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 { 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 { faUserPlus } from "@fortawesome/free-solid-svg-icons/faUserPlus";
@@ -103,7 +119,15 @@ import { faUsers } from "@fortawesome/free-solid-svg-icons/faUsers";
 import { faUserFriends } from "@fortawesome/free-solid-svg-icons/faUserFriends";
 
 // Custom icon SVGs
-import { DialogCheck, Scroll, Sparkle, TriangleDown, TriangleUp } from "./svg";
+import {
+  ArrowToBottom,
+  CommentAltCheck,
+  DialogCheck,
+  Scroll,
+  Sparkle,
+  TriangleDown,
+  TriangleUp,
+} from "./svg";
 
 import { StatusContext } from "../../contexts/status";
 import { STATUS_VARIANT } from "../../types";
@@ -120,11 +144,15 @@ library.add(
   faArrowUp,
   faBackward,
   faBan,
+  faBatteryHalf,
+  faBed,
+  faBell,
   faBolt,
   faCalculator,
   faCalendar,
   faCaretDown,
   faCaretUp,
+  faChartLine,
   faCheck,
   faCheckCircle,
   faCheckCircleRegular,
@@ -134,15 +162,19 @@ library.add(
   faChevronUp,
   faCircle,
   faCircleNotch,
+  faCircleRegular,
   faClipboard,
   faClock,
+  faClockSolid,
   faCog,
   faColumns,
   faCommentAlt,
   faCompress,
+  faCrown,
   faEllipsisH,
   faEllipsisV,
   faEnvelope,
+  faExclamationCircle,
   faExclamationTriangle,
   faExpand,
   faExternalLinkAlt,
@@ -173,6 +205,7 @@ library.add(
   faMagic,
   faMapSigns,
   faMinus,
+  faMousePointer,
   faPaperclip,
   faPause,
   faPen,
@@ -180,11 +213,15 @@ library.add(
   faPlus,
   faPlusCircle,
   faPooStorm,
+  faQuestion,
   faQuestionCircle,
   faQuestionCircleRegular,
   faScroll,
   faSearch,
+  faShareAlt,
   faShieldAlt,
+  faSignOutAlt,
+  faSignature,
   faSlidersH,
   faSort,
   faSortDown,
@@ -196,12 +233,15 @@ library.add(
   faSync,
   faTasks,
   faThLarge,
-  faThumbsDown,
-  faThumbsUp,
+  faThumbsDownRegular,
+  faThumbsDownSolid,
+  faThumbsUpRegular,
+  faThumbsUpSolid,
   faTicketAlt,
   faTimes,
   faTimesCircle,
   faTrash,
+  faUnlock,
   faUser,
   faUserAstronaut,
   faUserPlus,
@@ -211,6 +251,8 @@ library.add(
 );
 
 export enum CUSTOM_ICON_TYPE {
+  ARROW_TO_BOTTOM = "arrow-to-bottom",
+  COMMENT_ALT_CHECK = "comment-alt-check",
   DIALOG_CHECK = "dialog-check",
   SCROLL = "scroll",
   SPARKLE = "sparkle",
@@ -223,6 +265,8 @@ type CustomIconPaths = Record<
   (props: SvgProps) => JSX.Element
 >;
 const CustomIcons: CustomIconPaths = {
+  [CUSTOM_ICON_TYPE.ARROW_TO_BOTTOM]: ArrowToBottom,
+  [CUSTOM_ICON_TYPE.COMMENT_ALT_CHECK]: CommentAltCheck,
   [CUSTOM_ICON_TYPE.DIALOG_CHECK]: DialogCheck,
   [CUSTOM_ICON_TYPE.SCROLL]: Scroll,
   [CUSTOM_ICON_TYPE.SPARKLE]: Sparkle,
@@ -238,11 +282,15 @@ 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_UP = "caret-up",
+  CHART_LINE = "chart-line",
   CHECK = "check",
   CHECK_CIRCLE = "check-circle",
   CHEVRON_DOWN = "chevron-down",
@@ -257,9 +305,11 @@ export enum ICON_TYPE {
   COLUMNS = "columns",
   COMMENT_ALT = "comment-alt",
   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",
@@ -289,6 +339,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 +347,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",
@@ -316,6 +371,7 @@ export enum ICON_TYPE {
   THUMBS_DOWN = "thumbs-down",
   THUMBS_UP = "thumbs-up",
   TRASH = "trash",
+  UNLOCK = "unlock",
   USER = "user",
   USER_ASTRONAUT = "user-astronaut",
   USER_PLUS = "user-plus",
@@ -465,3 +521,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/CommentAltCheck.tsx

@@ -0,0 +1,13 @@
+import React from "react";
+import { Svg, SvgProps } from "../../Svg";
+
+export const CommentAltCheck = (props: SvgProps) => {
+  return (
+    <Svg width="30" height="32" viewBox="0 0 30 32" fill="none" {...props}>
+      <path
+        d="M26.133 1.067h-22.4c-2.1 0-3.733 1.692-3.733 3.733v16.8c0 2.1 1.633 3.733 3.733 3.733h5.6v4.9c0 0.583 0.642 0.933 1.108 0.583l7.292-5.483h8.4c2.042 0 3.733-1.633 3.733-3.733v-16.8c0-2.042-1.692-3.733-3.733-3.733zM21.583 10.633l-7.642 7.583c-0.292 0.292-0.7 0.292-0.933 0l-4.433-4.433c-0.233-0.233-0.233-0.642 0-0.933l1.517-1.517c0.292-0.233 0.7-0.233 0.933 0.058l2.45 2.45 5.658-5.6c0.292-0.292 0.7-0.292 0.933 0l1.517 1.517c0.233 0.233 0.233 0.642 0 0.875z"
+        fill="currentColor"
+      />
+    </Svg>
+  );
+};

package/src/components/Icon/svg/index.ts

@@ -1,3 +1,5 @@
+export * from "./ArrowToBottom";
+export * from "./CommentAltCheck";
 export * from "./DialogCheck";
 export * from "./Scroll";
 export * from "./Sparkle";