Add new ThumbUp and ThumbsDown icon set

.changeset/cuddly-horses-design.md

@@ -0,0 +1,7 @@
+---
+"@kaizen/components": minor
+---
+
+Add new ThumbsUp and ThumbsDown icon set
+- adds new icon set with on and off state
+- adds deprecated doc block on old icon set

packages/components/package.json

@@ -127,6 +127,7 @@
     "serialize-query-params": "^2.0.2",
     "svgo": "^3.2.0",
     "ts-jest": "^29.1.2",
+    "ts-node": "^10.9.2",
     "ts-patch": "^3.1.2",
     "typescript-transform-paths": "^3.4.7"
   },

packages/components/src/Icon/ThumbsDownIcon.tsx

@@ -5,14 +5,15 @@ import React, { useId } from "react"
 import { SVG } from "~components/Icon/subcomponents/SVG"
 import type { IconProps } from "~components/Icon/types"
 
+/** @deprecated Use `<ThumbsDownIconOn/>` or `<ThumbsDownIconOff/>` */
 export const ThumbsDownIcon = (props: IconProps): JSX.Element => {
   const uniqueId = useId()
   const svgContent = (
     <>
       <defs>
         <path
           id={uniqueId}
-          d="M5.91 3.183c-.566 0-1.05.341-1.254.832L2.597 8.821c-.061.156-.095.32-.095.497v1.364c0 .75.613 1.363 1.363 1.363h4.301L7.52 15.16l-.02.218c0 .28.115.539.3.723l.722.716 4.492-4.493c.245-.245.395-.586.395-.96V4.546c0-.75-.613-1.364-1.363-1.364zm8.862 8.18h2.726v-8.18h-2.726z"
+          d="M5.91 3.183c-.566 0-1.05.341-1.254.832L2.597 8.821q-.093.233-.095.497v1.364c0 .75.613 1.363 1.363 1.363h4.301L7.52 15.16l-.02.218c0 .28.115.539.3.723l.722.716 4.492-4.493c.245-.245.395-.586.395-.96V4.546c0-.75-.613-1.364-1.363-1.364zm8.862 8.18h2.726v-8.18h-2.726z"
         />
       </defs>
       <use fill="currentColor" href={`#${uniqueId}`} fillRule="evenodd" />

packages/components/src/Icon/ThumbsDownOffIcon.tsx

@@ -0,0 +1,18 @@
+// This file is autogenerated by wrapSVGs.ts
+// Changes to this file will be overwritten
+
+import React from "react"
+import { SVG } from "~components/Icon/subcomponents/SVG"
+import type { IconProps } from "~components/Icon/types"
+
+export const ThumbsDownOffIcon = (props: IconProps): JSX.Element => {
+  const svgContent = (
+    <>
+      <path
+        fill="currentColor"
+        d="M5.224 3.253h8.766v10L8.461 18.75l-.705-.705a1 1 0 0 1-.215-.344 1.1 1.1 0 0 1-.086-.403v-.211l.885-3.834H2.756q-.594 0-1.05-.456t-.456-1.05V10.4q0-.13.034-.28a3 3 0 0 1 .075-.281l2.388-5.635q.18-.4.6-.676a1.6 1.6 0 0 1 .877-.276m7.516 1.25H5.224a.4.4 0 0 0-.18.048.3.3 0 0 0-.14.16L2.5 10.337v1.41a.25.25 0 0 0 .072.185.25.25 0 0 0 .184.072H9.92L8.875 16.57l3.865-3.849zm1.25 8.75v-1.25h2.677v-7.5H13.99v-1.25h3.927v10z"
+      />
+    </>
+  )
+  return <SVG {...props}>{svgContent}</SVG>
+}

packages/components/src/Icon/ThumbsDownOnIcon.tsx

@@ -0,0 +1,18 @@
+// This file is autogenerated by wrapSVGs.ts
+// Changes to this file will be overwritten
+
+import React from "react"
+import { SVG } from "~components/Icon/subcomponents/SVG"
+import type { IconProps } from "~components/Icon/types"
+
+export const ThumbsDownOnIcon = (props: IconProps): JSX.Element => {
+  const svgContent = (
+    <>
+      <path
+        fill="currentColor"
+        d="M5.224 3.253h8.253v10L7.95 18.75l-.705-.705a1 1 0 0 1-.216-.344 1.1 1.1 0 0 1-.086-.403v-.211l.885-3.834h-5.07q-.595 0-1.051-.456t-.456-1.05V10.4a1.6 1.6 0 0 1 .109-.561l2.388-5.635q.18-.4.6-.676a1.6 1.6 0 0 1 .877-.276m9.503 10v-10h3.19v10z"
+      />
+    </>
+  )
+  return <SVG {...props}>{svgContent}</SVG>
+}

packages/components/src/Icon/ThumbsUpIcon.tsx

@@ -5,14 +5,15 @@ import React, { useId } from "react"
 import { SVG } from "~components/Icon/subcomponents/SVG"
 import type { IconProps } from "~components/Icon/types"
 
+/** @deprecated Use `<ThumbsUpIconOn/>` or `<ThumbsUpIconOff/>` */
 export const ThumbsUpIcon = (props: IconProps): JSX.Element => {
   const uniqueId = useId()
   const svgContent = (
     <>
       <defs>
         <path
           id={uniqueId}
-          d="M5.228 16.817v-8.18H2.502v8.18zm10.907-8.862h-4.301l.647-3.115.02-.218c0-.28-.115-.539-.3-.723l-.722-.716-4.485 4.493a1.333 1.333 0 0 0-.402.96v6.817c0 .75.613 1.364 1.363 1.364h6.135c.566 0 1.05-.341 1.254-.832l2.059-4.806c.061-.156.095-.32.095-.497V9.318c0-.75-.613-1.363-1.363-1.363"
+          d="M5.228 16.817v-8.18H2.502v8.18zm10.907-8.862h-4.301l.647-3.115.02-.218c0-.28-.115-.539-.3-.723l-.722-.716-4.485 4.493a1.33 1.33 0 0 0-.402.96v6.817c0 .75.613 1.364 1.363 1.364h6.135c.566 0 1.05-.341 1.254-.832l2.059-4.806q.093-.233.095-.497V9.318c0-.75-.613-1.363-1.363-1.363"
         />
       </defs>
       <use fill="currentColor" href={`#${uniqueId}`} fillRule="evenodd" />

packages/components/src/Icon/ThumbsUpOffIcon.tsx

@@ -0,0 +1,18 @@
+// This file is autogenerated by wrapSVGs.ts
+// Changes to this file will be overwritten
+
+import React from "react"
+import { SVG } from "~components/Icon/subcomponents/SVG"
+import type { IconProps } from "~components/Icon/types"
+
+export const ThumbsUpOffIcon = (props: IconProps): JSX.Element => {
+  const svgContent = (
+    <>
+      <path
+        fill="currentColor"
+        d="M14.776 17.083H6.01v-10l5.529-5.496.705.705q.13.129.215.344.086.213.086.403v.211l-.885 3.833h5.584q.594 0 1.05.456t.456 1.05v1.347q0 .13-.034.28-.033.15-.075.28l-2.388 5.635q-.18.401-.6.677a1.6 1.6 0 0 1-.877.275m-7.516-1.25h7.516a.4.4 0 0 0 .18-.048.3.3 0 0 0 .14-.16L17.5 10V8.59a.25.25 0 0 0-.072-.184.25.25 0 0 0-.184-.073H10.08l1.045-4.567-3.865 3.85zm-1.25-8.75v1.25H3.333v7.5H6.01v1.25H2.083v-10z"
+      />
+    </>
+  )
+  return <SVG {...props}>{svgContent}</SVG>
+}

packages/components/src/Icon/ThumbsUpOnIcon.tsx

@@ -0,0 +1,18 @@
+// This file is autogenerated by wrapSVGs.ts
+// Changes to this file will be overwritten
+
+import React from "react"
+import { SVG } from "~components/Icon/subcomponents/SVG"
+import type { IconProps } from "~components/Icon/types"
+
+export const ThumbsUpOnIcon = (props: IconProps): JSX.Element => {
+  const svgContent = (
+    <>
+      <path
+        fill="currentColor"
+        d="M14.776 17.083H6.522v-10l5.53-5.496.704.705q.13.129.216.344.086.213.086.403v.211l-.885 3.833h5.07q.595 0 1.051.456t.456 1.05v1.347a1.6 1.6 0 0 1-.109.56l-2.388 5.635q-.18.401-.6.677a1.6 1.6 0 0 1-.877.275m-9.504-10v10H2.083v-10z"
+      />
+    </>
+  )
+  return <SVG {...props}>{svgContent}</SVG>
+}

packages/components/src/Icon/_docs/Icon.stories.tsx

@@ -1,7 +1,7 @@
 import React, { useState } from "react"
 import { Meta, StoryObj } from "@storybook/react"
 import * as ICONS from "~components/Icon"
-import { SearchField } from "~components/SearchField"
+import { Text } from "~components/Text"
 import { Tag } from "~components/__future__/Tag"
 import { AddIcon } from "../index"
 import styles from "./icon.stories.scss"
@@ -63,52 +63,46 @@ const ReferenceButton = ({
     <li key={iconName}>
       <button type="button" className={styles.button} onClick={handleCopy}>
         {copied ? (
-          <Tag color="green" classNameOverride={styles.tag}>
-            Copied!
-          </Tag>
+          <span className={styles.copiedTag}>
+            <Tag color="green" classNameOverride={styles.tag}>
+              Copied!
+            </Tag>
+          </span>
         ) : (
           <>
-            {icon} {iconName}
+            <span className={styles.icon}>{icon}</span>
+            <Text variant="small" tag="span">
+              {iconName}
+            </Text>
           </>
         )}
       </button>
     </li>
   )
 }
 
-export const Reference: Story = {
-  render: () => {
-    const [searchTerm, setSearchTerm] = useState<string>("")
+/**
+ * Deprecated icons will still exist in as a React component but have been removed from the assets folder
+ * This will remove them from the documentation but give us time to remove them in the next major
+ */
+const deprecatedList: string[] = ["ThumbsUpIcon", "ThumbsDownIcon"]
 
-    return (
-      <div className="flex flex-col gap-16">
-        <SearchField
-          labelText="Find icon by name"
-          onChange={event => {
-            setSearchTerm(event.target.value)
-          }}
-        />
-        <ul className={styles.grid}>
-          {Object.keys(ICONS)
-            .filter(iconName => {
-              const term = new RegExp(searchTerm, "i")
-              return iconName.match(term)
+export const Reference: Story = {
+  render: () => (
+    <div className="flex flex-col gap-16">
+      <ul className={styles.grid}>
+        {Object.keys(ICONS)
+          .filter(iconName => !deprecatedList.includes(iconName))
+          .map(iconName => {
+            const icon = ICONS[iconName as keyof typeof ICONS]({
+              role: "presentation",
             })
-            .map(iconName => {
-              const icon = ICONS[iconName as keyof typeof ICONS]({
-                role: "presentation",
-              })
 
-              return (
-                <ReferenceButton
-                  key={iconName}
-                  icon={icon}
-                  iconName={iconName}
-                />
-              )
-            })}
-        </ul>
-      </div>
-    )
-  },
+            return (
+              <ReferenceButton key={iconName} icon={icon} iconName={iconName} />
+            )
+          })}
+      </ul>
+    </div>
+  ),
 }

packages/components/src/Icon/_docs/icon.stories.scss

@@ -2,8 +2,8 @@
 
 .grid {
   display: grid;
-  grid-template-columns: repeat(6, 1fr);
-  grid-template-rows: repeat(6, 1fr);
+  grid-template-columns: repeat(6, 150px);
+  grid-template-rows: min-content;
   grid-gap: var(--spacing-8);
   margin: 0;
   padding: 0;
@@ -13,14 +13,13 @@
 .button {
   @include button-reset;
 
-  display: flex;
+  display: inline-flex;
   flex-direction: column;
   align-items: center;
-  justify-content: center;
-  gap: var(--spacing-16);
-  padding: var(--spacing-8);
-  width: 150px;
-  height: 100px;
+  gap: var(--spacing-8);
+  padding: var(--spacing-16);
+  width: 100%;
+  height: 100%;
   background-color: var(--color-gray-100);
   border-radius: var(--border-solid-border-radius);
   word-break: break-all;
@@ -31,6 +30,14 @@
   }
 }
 
+.copiedTag {
+  margin: auto;
+}
+
+.icon {
+  margin-bottom: var(--spacing-8);
+}
+
 .tag {
   border: 1px solid var(--color-green-500);
 }

packages/components/src/Icon/index.ts

@@ -217,7 +217,11 @@ export * from "./TemplateWhiteIcon"
 export * from "./TextAnalyticsIcon"
 export * from "./TextAnalyticsWhiteIcon"
 export * from "./ThumbsDownIcon"
+export * from "./ThumbsDownOffIcon"
+export * from "./ThumbsDownOnIcon"
 export * from "./ThumbsUpIcon"
+export * from "./ThumbsUpOffIcon"
+export * from "./ThumbsUpOnIcon"
 export * from "./TimeIcon"
 export * from "./TimeWhiteIcon"
 export * from "./TranslationIcon"