KDS-1610 Add new Tag component to KAIO (#3851)

* Add new Tag component to KAIO

* Use Icon instead of svg

* Use TagIcon in stories

* Lint fix

* Fix KAIO-staging name

* Remove FC

* Remove button dep

* Remove placeholder

* Split RTL stories and lint fix

---------

Co-authored-by: jakepitman <jakeseanp@gmail.com>

.changeset/shiny-cups-look.md

@@ -0,0 +1,5 @@
+---
+"@kaizen/components": minor
+---
+
+- Added `Tag` component and stories to KAIO

packages/components/package.json

@@ -79,17 +79,17 @@
     "esbuild": "It appears that 0.19.x breaks the import of rollup-plugin-esbuild"
   },
   "devDependencies": {
-    "@cultureamp/i18n-react-intl": "^2.1.0",
     "@cultureamp/frontend-apis": "^8.0.0",
+    "@cultureamp/i18n-react-intl": "^2.1.0",
     "@kaizen/tailwind": "^1.1.0",
     "@rollup/plugin-alias": "^5.0.0",
     "@rollup/plugin-commonjs": "^25.0.4",
     "@rollup/plugin-image": "^3.0.2",
     "@rollup/plugin-json": "^6.0.0",
     "@rollup/plugin-node-resolve": "^15.2.1",
     "@rollup/plugin-typescript": "^11.1.3",
-    "@types/react-textfit": "^1.1.0",
     "@types/react-dom": "^18.2.7",
+    "@types/react-textfit": "^1.1.0",
     "autoprefixer": "^10.4.15",
     "concat-cli": "^4.0.0",
     "esbuild": "0.18.20",

packages/components/src/__future__/Tag/Tag.tsx

@@ -0,0 +1,60 @@
+import React, { ReactNode, HTMLAttributes } from "react"
+import classNames from "classnames"
+import { OverrideClassName } from "~types/OverrideClassName"
+
+export type TagColors =
+  | "gray"
+  | "blue"
+  | "green"
+  | "yellow"
+  | "orange"
+  | "red"
+  | "purple"
+
+export interface TagProps
+  extends OverrideClassName<HTMLAttributes<HTMLSpanElement>> {
+  children: ReactNode
+  color?: TagColors
+  Icon?: React.ReactElement
+}
+
+export const Tag = ({
+  children,
+  classNameOverride,
+  Icon,
+  color = "gray",
+}: TagProps): JSX.Element => (
+  <span
+    className={classNames(
+      "inline-flex items-center px-8 py-[5px] gap-4 rounded-[28px] font-family-paragraph text-paragraph-sm font-weight-paragraph leading-paragraph-sm whitespace-nowrap",
+      {
+        ["bg-gray-200 text-purple-800"]: color === "gray",
+        ["bg-blue-100 text-blue-700"]: color === "blue",
+        ["bg-green-100 text-green-700"]: color === "green",
+        ["bg-yellow-100 text-yellow-700"]: color === "yellow",
+        ["bg-orange-100 text-orange-700"]: color === "orange",
+        ["bg-red-100 text-red-700"]: color === "red",
+        ["bg-purple-100 text-purple-700"]: color === "purple",
+      },
+      classNameOverride
+    )}
+  >
+    {Icon && (
+      <span
+        className={classNames("inline-flex -my-[1px]", {
+          ["text-blue-500"]: color === "blue",
+          ["text-green-500"]: color === "green",
+          ["text-yellow-500"]: color === "yellow",
+          ["text-orange-500"]: color === "orange",
+          ["text-red-500"]: color === "red",
+          ["text-purple-500"]: color === "purple",
+        })}
+      >
+        {Icon}
+      </span>
+    )}
+    {children}
+  </span>
+)
+
+Tag.displayName = "Tag"

packages/components/src/__future__/Tag/_docs/Tag.stories.tsx

@@ -0,0 +1,94 @@
+import React from "react"
+import { Meta, StoryFn } from "@storybook/react"
+import { TagIcon } from "~components/Icons"
+import { ComponentDocsTemplate } from "~storybook/components/DocsContainer"
+import { StickerSheet } from "~storybook/components/StickerSheet"
+import { Tag } from ".."
+
+export default {
+  tags: ["autodocs"],
+  title: "KAIO-staging/Tag",
+  component: Tag,
+  parameters: {
+    docs: {
+      container: ComponentDocsTemplate,
+    },
+    isInKaio: true,
+    installation: [
+      "yarn add @kaizen/components",
+      "import { Tag } from `@kaizen/components/future`",
+    ],
+    resourceLinks: {
+      sourceCode:
+        "https://github.com/cultureamp/kaizen-design-system/tree/main/packages/components/src/__future__/Tag",
+      figma:
+        "https://www.figma.com/file/hANEprZKom5Br1IBXhE8mr/%F0%9F%A7%AA-Kaizen-Labs?type=design&node-id=28588-183332&mode=design&t=VHZDCTJUpaon8PXg-0",
+    },
+  },
+} satisfies Meta<typeof Tag>
+
+export const Playground: StoryFn<typeof Tag> = args => (
+  <Tag {...args}>My tag</Tag>
+)
+
+type ListProps = {
+  children: React.ReactNode
+}
+const List = ({ children }: ListProps): JSX.Element => (
+  <div className="flex flex-col gap-12 items-start">{children}</div>
+)
+
+const StickerSheetTemplate: StoryFn = () => (
+  <StickerSheet heading="Tag">
+    <StickerSheet.Header headings={["Label Only", "Icon"]} />
+    <StickerSheet.Body>
+      <StickerSheet.Row>
+        <List>
+          <Tag>Gray</Tag>
+          <Tag color="blue">Blue</Tag>
+          <Tag color="green">Green</Tag>
+          <Tag color="yellow">Yellow</Tag>
+          <Tag color="orange">Orange</Tag>
+          <Tag color="red">Red</Tag>
+          <Tag color="purple">Purple</Tag>
+        </List>
+        <List>
+          <Tag Icon={<TagIcon role="presentation" />}>Gray</Tag>
+          <Tag color="blue" Icon={<TagIcon role="presentation" />}>
+            Blue
+          </Tag>
+          <Tag color="green" Icon={<TagIcon role="presentation" />}>
+            Green
+          </Tag>
+          <Tag color="yellow" Icon={<TagIcon role="presentation" />}>
+            Yellow
+          </Tag>
+          <Tag color="orange" Icon={<TagIcon role="presentation" />}>
+            Orange
+          </Tag>
+          <Tag color="red" Icon={<TagIcon role="presentation" />}>
+            Red
+          </Tag>
+          <Tag color="purple" Icon={<TagIcon role="presentation" />}>
+            Purple
+          </Tag>
+        </List>
+      </StickerSheet.Row>
+    </StickerSheet.Body>
+  </StickerSheet>
+)
+
+export const StickerSheetDefault = StickerSheetTemplate.bind({})
+StickerSheetDefault.storyName = "Sticker Sheet (Default)"
+StickerSheetDefault.parameters = {
+  chromatic: { disable: false },
+  controls: { disable: true },
+}
+
+export const StickerSheetRTL = StickerSheetTemplate.bind({})
+StickerSheetRTL.storyName = "Sticker Sheet (RTL)"
+StickerSheetRTL.parameters = {
+  chromatic: { disable: false },
+  controls: { disable: true },
+  textDirection: "rtl",
+}

packages/components/src/__future__/Tag/index.ts

@@ -0,0 +1 @@
+export * from "./Tag"