@kaizen/components 0.0.0-canary-less-gung-ho-20240308011930 → 0.0.0-canary-brand-2-20240318014153

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@kaizen/components",
-  "version": "0.0.0-canary-less-gung-ho-20240308011930",
+  "version": "0.0.0-canary-brand-2-20240318014153",
   "description": "Kaizen component library",
   "author": "Geoffrey Chong <geoff.chong@cultureamp.com>",
   "homepage": "https://cultureamp.design",
@@ -108,10 +108,11 @@
     "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",
-    "@kaizen/design-tokens": "10.3.18",
-    "@kaizen/tailwind": "1.2.4"
+    "@kaizen/tailwind": "1.2.5",
+    "@kaizen/design-tokens": "10.3.19"
   },
   "peerDependencies": {
     "@cultureamp/i18n-react-intl": "^2.5.1",

package/src/Brand/Brand.tsx

@@ -1,3 +1,4 @@
+/* eslint-disable @typescript-eslint/no-unused-vars */
 import React, { HTMLAttributes } from "react"
 import { assetUrl } from "@kaizen/hosted-assets"
 import { OverrideClassName } from "~types/OverrideClassName"
@@ -22,23 +23,25 @@ export const Brand = ({
 }: BrandProps): JSX.Element => {
   const brandTheme = reversed ? "-reversed" : "-default"
 
-  return (
-    <picture className={classNameOverride} {...restProps}>
-      <source
-        srcSet={assetUrl(`brand/${variant}-reversed.svg`)}
-        media="(forced-colors: active) and (prefers-color-scheme: dark)"
-      />
-      <source
-        srcSet={assetUrl(`brand/${variant}-default.svg`)}
-        media="(forced-colors: active) and (prefers-color-scheme: light)"
-      />
-      <img
-        src={assetUrl(`brand/${variant}${brandTheme}.svg`)}
-        alt={alt}
-        className={styles.img}
-      />
-    </picture>
-  )
+  return <div>BrandName</div>
+
+  // return (
+  //   <picture className={classNameOverride} {...restProps}>
+  //     <source
+  //       srcSet={assetUrl(`brand/${variant}-reversed.svg`)}
+  //       media="(forced-colors: active) and (prefers-color-scheme: dark)"
+  //     />
+  //     <source
+  //       srcSet={assetUrl(`brand/${variant}-default.svg`)}
+  //       media="(forced-colors: active) and (prefers-color-scheme: light)"
+  //     />
+  //     <img
+  //       src={assetUrl(`brand/${variant}${brandTheme}.svg`)}
+  //       alt={alt}
+  //       className={styles.img}
+  //     />
+  //   </picture>
+  // )
 }
 
 Brand.displayName = "Brand"

package/src/Icon/ThumbsDownIcon.tsx

@@ -5,6 +5,7 @@ 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 = (
@@ -12,7 +13,7 @@ export const ThumbsDownIcon = (props: IconProps): JSX.Element => {
       <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" />

package/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>
+}

package/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>
+}

package/src/Icon/ThumbsUpIcon.tsx

@@ -5,6 +5,7 @@ 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 = (
@@ -12,7 +13,7 @@ export const ThumbsUpIcon = (props: IconProps): JSX.Element => {
       <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" />

package/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>
+}

package/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>
+}

package/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,12 +63,17 @@ 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>
@@ -76,39 +81,28 @@ const ReferenceButton = ({
   )
 }
 
-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>
+  ),
 }

package/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);
 }

package/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"

package/src/KaizenProvider/KaizenProvider.tsx

@@ -1,8 +1,8 @@
-import React from "react"
-// import { ToastNotificationsList } from "~components/Notification"
-// import { ToastNotificationProvider } from "~components/Notification/ToastNotification/context/ToastNotificationContext"
+import React, { useEffect, useState } from "react"
+import { ToastNotificationsList } from "~components/Notification"
+import { ToastNotificationProvider } from "~components/Notification/ToastNotification/context/ToastNotificationContext"
 import { FontDefinitions } from "./subcomponents/FontDefinitions"
-// import { OptionalIntlProvider } from "./subcomponents/OptionalIntlProvider"
+import { OptionalIntlProvider } from "./subcomponents/OptionalIntlProvider"
 
 export type KaizenProviderProps = {
   children: React.ReactNode
@@ -12,30 +12,30 @@ export type KaizenProviderProps = {
 export const KaizenProvider = ({
   children,
   locale = "en",
-}: KaizenProviderProps): JSX.Element =>
-  // const [documentIsAvailable, setDocumentIsAvailable] = useState<boolean>(false)
-  // const [notificationsList, setNotificationsList] = useState<JSX.Element>()
+}: KaizenProviderProps): JSX.Element => {
+  const [documentIsAvailable, setDocumentIsAvailable] = useState<boolean>(false)
+  const [notificationsList, setNotificationsList] = useState<JSX.Element>()
 
-  // useEffect(() => {
-  //   // SSR does not have a document, which is required for ToastNotificationsList.
-  //   // Await document render before rendering the component.
-  //   if (document !== undefined) {
-  //     setNotificationsList(<ToastNotificationsList />)
-  //     setDocumentIsAvailable(true)
-  //   }
-  // }, [documentIsAvailable])
+  useEffect(() => {
+    // SSR does not have a document, which is required for ToastNotificationsList.
+    // Await document render before rendering the component.
+    if (document !== undefined) {
+      setNotificationsList(<ToastNotificationsList />)
+      setDocumentIsAvailable(true)
+    }
+  }, [documentIsAvailable])
 
-   (
-    // <OptionalIntlProvider locale={locale}>
+  return (
+    <OptionalIntlProvider locale={locale}>
       <>
-        {/* <ToastNotificationProvider> */}
-          {/* {notificationsList} */}
+        <ToastNotificationProvider>
+          {notificationsList}
           {children}
-        {/* </ToastNotificationProvider> */}
+        </ToastNotificationProvider>
         <FontDefinitions />
       </>
-    // </OptionalIntlProvider>
+    </OptionalIntlProvider>
   )
-
+}
 
 KaizenProvider.displayName = "KaizenProvider"

package/src/Tag/Tag.tsx

@@ -1,6 +1,16 @@
 import React from "react"
-import { AvatarProps } from "~components/Avatar"
+import classnames from "classnames"
+import { Avatar, AvatarProps } from "~components/Avatar"
+import {
+  CautionIcon,
+  ClearIcon,
+  ExclamationIcon,
+  InformationIcon,
+  LiveIcon,
+  SuccessIcon,
+} from "~components/Icon"
 import { TagVariants } from "./types"
+import styles from "./Tag.module.scss"
 
 export type TagWithAvatarProps = Omit<DefaultTagProps, "variant"> & {
   variant: "profile"
@@ -23,9 +33,155 @@ export interface DefaultTagProps {
 
 export type TagProps = DefaultTagProps | TagWithAvatarProps
 
+const isJSXElement = (
+  imageElementOrAvatarProps: JSX.Element | AvatarProps
+): imageElementOrAvatarProps is JSX.Element =>
+  "props" in imageElementOrAvatarProps
+
+const renderAvatar = (
+  imageElementOrAvatarProps: JSX.Element | AvatarProps
+): JSX.Element =>
+  isJSXElement(imageElementOrAvatarProps) ? (
+    <>{imageElementOrAvatarProps}</>
+  ) : (
+    <Avatar {...imageElementOrAvatarProps} size="small" />
+  )
+
+/**
+ * {@link https://cultureamp.atlassian.net/wiki/spaces/DesignSystem/pages/3081928978/Tags Guidance} |
+ * {@link https://cultureamp.design/?path=/docs/components-tag--docs Storybook}
+ */
 export const Tag = (props: TagProps): JSX.Element => {
-  const { variant = "default" } = props
-  return <div>Testing Tag component {variant}</div>
+  const {
+    children,
+    variant = "default",
+    size = "medium",
+    inline = false,
+    dismissible = false,
+    onDismiss,
+    onMouseDown,
+    onMouseLeave,
+    truncateWidth,
+  } = props
+
+  const isTruncated = truncateWidth && truncateWidth > 0
+  const canShowIcon = size === "medium"
+  return (
+    <div
+      className={classnames(
+        styles.root,
+        styles[variant],
+        variant === "profile" && styles.default,
+        styles[size],
+        inline && styles.inline,
+        dismissible && styles.dismissible
+      )}
+    >
+      <div className={styles.layoutContainer}>
+        <>
+          {canShowIcon &&
+            ((): JSX.Element | void => {
+              switch (props.variant) {
+                case "validationPositive":
+                  return (
+                    <span className={styles.validationIcon}>
+                      <SuccessIcon role="presentation" />
+                    </span>
+                  )
+                case "validationNegative":
+                  return (
+                    <span className={styles.validationIcon}>
+                      <ExclamationIcon role="presentation" />
+                    </span>
+                  )
+                case "validationCautionary":
+                  return (
+                    <span className={styles.validationIcon}>
+                      <CautionIcon role="presentation" />
+                    </span>
+                  )
+                case "validationInformative":
+                  return (
+                    <span className={styles.validationIcon}>
+                      <InformationIcon role="presentation" />
+                    </span>
+                  )
+                case "profile":
+                  return (
+                    <span className={styles.profile}>
+                      {props.avatar && renderAvatar(props.avatar)}
+                    </span>
+                  )
+                default:
+                  return
+              }
+            })()}
+          <span
+            className={classnames(
+              styles.textContent,
+              isTruncated && styles.truncate
+            )}
+            style={{
+              maxWidth: isTruncated ? truncateWidth : undefined,
+            }}
+          >
+            {children}
+          </span>
+          {dismissible && (
+            <>
+              <button
+                type="button"
+                className={styles.dismissButton}
+                onClick={onDismiss}
+                onMouseDown={onMouseDown}
+                onMouseLeave={onMouseLeave}
+              >
+                <div className={styles.iconWrapper}>
+                  <ClearIcon inheritSize role="img" aria-label="Dismiss" />
+                </div>
+              </button>
+            </>
+          )}
+          {variant === "statusLive" && (
+            <span className={styles.liveIcon}>
+              <LiveIcon
+                role="presentation"
+                classNameOverride={styles.liveIcon_base}
+                width="16"
+                height="16"
+                viewBox="0 0 16 16"
+                fill="none"
+              />
+              <LiveIcon
+                role="presentation"
+                classNameOverride={styles.liveIcon_1}
+                width="16"
+                height="16"
+                viewBox="0 0 16 16"
+                fill="none"
+              />
+              <LiveIcon
+                role="presentation"
+                classNameOverride={styles.liveIcon_2}
+                width="16"
+                height="16"
+                viewBox="0 0 16 16"
+                fill="none"
+              />
+              <LiveIcon
+                role="presentation"
+                classNameOverride={styles.liveIcon_3}
+                width="16"
+                height="16"
+                viewBox="0 0 16 16"
+                fill="none"
+              />
+            </span>
+          )}
+        </>
+      </div>
+    </div>
+  )
 }
 
 Tag.displayName = "Tag"

package/src/index.ts

@@ -57,6 +57,7 @@ export * from "./TimeField"
 export * from "./TitleBlockZen"
 export * from "./ToggleSwitch"
 export * from "./Tooltip"
+export * from "./utils"
 export * from "./VisuallyHidden"
 export * from "./Well"
 export * from "./Workflow"

package/src/utils/index.ts

@@ -0,0 +1,2 @@
+// Not all utils are exported because most are intended for internal use only
+export * from "./useMediaQueries"

package/dist/cjs/Brand/Brand.module.scss.cjs

@@ -1,7 +0,0 @@
-'use strict';
-
-var styles = {
-  "img": "Brand-module_img__uWvra"
-};
-module.exports = styles;
-//# sourceMappingURL=Brand.module.scss.cjs.map

package/dist/cjs/Brand/Brand.module.scss.cjs.map

@@ -1 +0,0 @@
-{"version":3,"file":"Brand.module.scss.cjs","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;"}

package/dist/esm/Brand/Brand.module.scss.mjs

@@ -1,5 +0,0 @@
-var styles = {
-  "img": "Brand-module_img__uWvra"
-};
-export { styles as default };
-//# sourceMappingURL=Brand.module.scss.mjs.map

package/dist/esm/Brand/Brand.module.scss.mjs.map

@@ -1 +0,0 @@
-{"version":3,"file":"Brand.module.scss.mjs","sources":[],"sourcesContent":[],"names":[],"mappings":";;;"}