KAIO migration (chunk 3) (#4019)

* Add Avatar * add changeset * fix lint + comment * add AvatarGroup * Add Badge * Update Avatar meta data * Update packages/components/src/Avatar/Avatar.tsx Co-authored-by: Cassandra <cassandra.tam@cultureamp.com> * update commented code * update commented code * Update Avatar docs meta * update AvatarGroup docs meta * update AvatarGroup docs meta * fix conflict in BadgeProps types * fix lint * update Badge docs meta * update BrandMoment stories * silence axe color-contrast errors * Update packages/components/src/Badge/Badge.tsx Co-authored-by: Cassandra <cassandra.tam@cultureamp.com> * Update packages/components/src/Badge/Badge.tsx Co-authored-by: Cassandra <cassandra.tam@cultureamp.com> * clean up tests * send brand moment to chromatic * update comments * add Card * add Collapsible * fixed tests * wip CollapsibleGroup * fix Collapsible stories * add tests * add tests * Update packages/components/src/Badge/Badge.tsx Co-authored-by: Cassandra <cassandra.tam@cultureamp.com> * update interfaces to type * coming soon * fix AvatarGroup stickersheet * convert stories to use StoryObj * add Expert Advice + Brand * moving Brand + ExpertAdviceCollapsible to new chunk * move Brand + Expandable collapse * add Divider * fix Card stickersheets * remove Brand ExpertAdvice * reset * reset * reset * add empty changeset * add empty state * move docs to staging * update example * remove useless test * remove comments * ignore contrast on stickersheets * moving docs * fix type/lint errors * fix lint * Update packages/components/src/Card/Card.tsx Co-authored-by: Cassandra <cassandra.tam@cultureamp.com> * cleanup * cleanup * cleanup * delete useless tests * remove unused * remove unused * Update packages/components/src/Card/Card.tsx Co-authored-by: Cassandra <cassandra.tam@cultureamp.com> * Update packages/components/src/Divider/Divider.module.scss Co-authored-by: Cassandra <cassandra.tam@cultureamp.com> --------- Co-authored-by: Cassandra <cassandra.tam@cultureamp.com>
cultureamp · Sep 11, 2023 · 9b3cebf · 9b3cebf
1 parent d1b1a1e
commit 9b3cebf
Show file tree

Hide file tree

Showing 27 changed files with 1,098 additions and 0 deletions.
diff --git a/.changeset/flat-mirrors-fail.md b/.changeset/flat-mirrors-fail.md
@@ -0,0 +1,2 @@
+---
+---
diff --git a/packages/components/src/Card/Card.module.scss b/packages/components/src/Card/Card.module.scss
@@ -0,0 +1,38 @@
+@import "~@kaizen/design-tokens/sass/shadow";
+@import "~@kaizen/design-tokens/sass/border";
+@import "~@kaizen/design-tokens/sass/color";
+
+.wrapper {
+  color: $color-purple-800;
+  background-color: $color-white;
+  border-radius: $border-borderless-border-radius;
+  box-shadow: $shadow-small-box-shadow;
+}
+
+.informative {
+  background-color: $color-blue-100;
+}
+
+.positive {
+  background-color: $color-green-100;
+}
+
+.cautionary {
+  background-color: $color-yellow-100;
+}
+
+.destructive {
+  background-color: $color-red-100;
+}
+
+.assertive {
+  background-color: $color-orange-100;
+}
+
+.highlight {
+  background-color: $color-purple-100;
+}
+
+.elevated {
+  box-shadow: $shadow-large-box-shadow;
+}
diff --git a/packages/components/src/Card/Card.tsx b/packages/components/src/Card/Card.tsx
@@ -0,0 +1,59 @@
+import React, { HTMLAttributes } from "react"
+import classnames from "classnames"
+import { OverrideClassName } from "~types/OverrideClassName"
+import styles from "./Card.module.scss"
+
+export type CardVariants =
+  | "default"
+  | "informative"
+  | "positive"
+  | "cautionary"
+  | "destructive"
+  | "assertive"
+  | "highlight"
+
+export type CardProps = OverrideClassName<HTMLAttributes<HTMLElement>> & {
+  children?: React.ReactNode
+  /**
+   * HTML elements that are allowed on Card.
+   */
+  tag?: "div" | "article" | "header" | "main" | "section" | "li"
+  /**
+   * determines the card background colour on the card. It should match to the type of content being conveyed.
+   */
+  variant?: CardVariants
+  /**
+   * Adds a larger box shadow to to the card container.
+   */
+  isElevated?: boolean
+}
+
+/**
+ * {@link https://cultureamp.atlassian.net/wiki/spaces/DesignSystem/pages/3082094938/Card Guidance} |
+ * {@link https://cultureamp.design/?path=/story/components-card--docs Storybook}
+ */
+export const Card = ({
+  children,
+  tag = "div",
+  variant = "default",
+  isElevated = false,
+  classNameOverride,
+  ...props
+}: CardProps): JSX.Element => {
+  const Tag = tag
+  return (
+    <Tag
+      className={classnames(
+        styles.wrapper,
+        styles[variant],
+        classNameOverride,
+        isElevated && styles.elevated
+      )}
+      {...props}
+    >
+      {children}
+    </Tag>
+  )
+}
+
+Card.displayName = "Card"
diff --git a/packages/components/src/Card/_docs/Card.mdx b/packages/components/src/Card/_docs/Card.mdx
@@ -0,0 +1,32 @@
+import { Canvas, Controls, DocsStory, Meta } from "@storybook/blocks"
+import { ResourceLinks, KaioNotification, Installation } from "~storybook/components"
+import * as CardStories from "./Card.stories"
+
+<Meta of={CardStories} />
+
+# Card
+
+<ResourceLinks
+  sourceCode="https://github.com/cultureamp/kaizen-design-system/tree/main/packages/components/src/Card"
+  className="!mb-8"
+/>
+
+<KaioNotification />
+
+<Installation
+  installCommand="yarn add @kaizen/components"
+  importStatement='import { Card } from "@kaizen/components"'
+/>
+
+## Overview
+
+The `Card` component is a flexible container used to wrap primary content. It has several variants (moods) to assist in displaying information to a user. In the UI toolkit you will find the `Card` component is referred to as `Container`.
+
+<Canvas of={CardStories.Playground} />
+<Controls of={CardStories.Playground} />
+
+## API
+
+<DocsStory of={CardStories.Variants} />
+
+<DocsStory of={CardStories.Elevation} />
diff --git a/packages/components/src/Card/_docs/Card.stickersheet.stories.tsx b/packages/components/src/Card/_docs/Card.stickersheet.stories.tsx
@@ -0,0 +1,77 @@
+import React from "react"
+import { Meta } from "@storybook/react"
+import {
+  StickerSheet,
+  StickerSheetStory,
+} from "~storybook/components/StickerSheet"
+import { Card, CardProps } from "../index"
+
+export default {
+  title: "KAIO-staging/Card",
+  parameters: {
+    chromatic: { disable: false },
+    controls: { disable: true },
+  },
+} satisfies Meta
+
+const CardWrapper = (args: CardProps): JSX.Element => (
+  <Card {...args}>
+    Lorem ipsum dolor sit amet, consectetur adipiscing elit.
+  </Card>
+)
+
+const StickerSheetTemplate: StickerSheetStory = {
+  render: ({ isReversed }) => (
+    <StickerSheet isReversed={isReversed}>
+      <StickerSheet.Header
+        headings={[
+          "Base",
+          "Informative",
+          "Positive",
+          "Cautionary",
+          "Destructive",
+          "Assertive",
+          "Highlight",
+        ]}
+      />
+      <StickerSheet.Body>
+        <StickerSheet.Row>
+          <CardWrapper variant="default" />
+          <CardWrapper variant="informative" />
+          <CardWrapper variant="positive" />
+          <CardWrapper variant="cautionary" />
+          <CardWrapper variant="destructive" />
+          <CardWrapper variant="assertive" />
+          <CardWrapper variant="highlight" />
+        </StickerSheet.Row>
+        <StickerSheet.Row>
+          <CardWrapper variant="default" isElevated />
+          <CardWrapper variant="informative" isElevated />
+          <CardWrapper variant="positive" isElevated />
+          <CardWrapper variant="cautionary" isElevated />
+          <CardWrapper variant="destructive" isElevated />
+          <CardWrapper variant="assertive" isElevated />
+          <CardWrapper variant="highlight" isElevated />
+        </StickerSheet.Row>
+      </StickerSheet.Body>
+    </StickerSheet>
+  ),
+}
+
+export const StickerSheetDefault: StickerSheetStory = {
+  ...StickerSheetTemplate,
+  name: "Sticker Sheet (Default)",
+}
+
+export const StickerSheetReversed: StickerSheetStory = {
+  ...StickerSheetTemplate,
+  name: "Sticker Sheet (Reversed)",
+  parameters: { backgrounds: { default: "Purple 700" } },
+  args: { isReversed: true },
+}
+
+export const StickerSheetRTL: StickerSheetStory = {
+  ...StickerSheetTemplate,
+  name: "Sticker Sheet (RTL)",
+  parameters: { textDirection: "rtl" },
+}
diff --git a/packages/components/src/Card/_docs/Card.stories.tsx b/packages/components/src/Card/_docs/Card.stories.tsx
@@ -0,0 +1,66 @@
+import React from "react"
+import { Meta, StoryObj } from "@storybook/react"
+import { Card } from "../index"
+
+const meta = {
+  title: "KAIO-staging/Card",
+  component: Card,
+  args: {
+    children: "This is a default container",
+  },
+} satisfies Meta<typeof Card>
+
+export default meta
+
+type Story = StoryObj<typeof meta>
+
+export const Playground: Story = {
+  parameters: {
+    docs: {
+      canvas: {
+        sourceState: "shown",
+      },
+    },
+  },
+}
+
+export const Variants: Story = {
+  render: () => (
+    <ul className="flex list-none gap-16">
+      <li>
+        <Card variant="default">Default</Card>
+      </li>
+      <li>
+        <Card variant="informative">Informative</Card>
+      </li>
+      <li>
+        <Card variant="positive">Positive</Card>
+      </li>
+      <li>
+        <Card variant="cautionary">Cautionary</Card>
+      </li>
+      <li>
+        <Card variant="destructive">Destructive</Card>
+      </li>
+      <li>
+        <Card variant="assertive">Assertive</Card>
+      </li>
+      <li>
+        <Card variant="highlight">Highlight</Card>
+      </li>
+    </ul>
+  ),
+}
+
+export const Elevation: Story = {
+  render: () => (
+    <ul className="flex list-none gap-16">
+      <li>
+        <Card>Default</Card>
+      </li>
+      <li>
+        <Card isElevated>isElevated</Card>
+      </li>
+    </ul>
+  ),
+}
diff --git a/packages/components/src/Card/index.ts b/packages/components/src/Card/index.ts
@@ -0,0 +1 @@
+export * from "./Card"
diff --git a/packages/components/src/Divider/Divider.module.scss b/packages/components/src/Divider/Divider.module.scss
@@ -0,0 +1,37 @@
+@import "~@kaizen/design-tokens/sass/border";
+@import "~@kaizen/design-tokens/sass/color";
+
+// Use different tokens with different opacities across the Zen and Heart themes, by assuming that when Zen is applied there won't be any CSS variables declared.
+
+$dt-content-border-color: rgba($color-gray-600-rgb, 0.1);
+
+.wrapper {
+  width: 100%;
+  border: 0;
+  margin: 0;
+  border-radius: $border-solid-border-radius;
+  // This is here to protect against a global style in a consumer.
+  // https://github.com/cultureamp/murmur/blob/master/app/assets/stylesheets/legacy/modules/_body.scss
+  visibility: visible;
+}
+
+.content {
+  border-top: 1px solid;
+  border-color: $dt-content-border-color;
+}
+
+.canvas {
+  border-top: 1px solid;
+  border-bottom: 1px solid;
+  border-color: rgba($color-gray-600-rgb, 0.1);
+}
+
+.reversed {
+  border-color: rgba($color-white-rgb, 0.1);
+}
+
+.menuSeparator {
+  @extend .content; /* stylelint-disable-line scss/at-extend-no-missing-placeholder */
+
+  margin: 5px 0;
+}
diff --git a/packages/components/src/Divider/Divider.tsx b/packages/components/src/Divider/Divider.tsx
@@ -0,0 +1,33 @@
+import React, { HTMLAttributes } from "react"
+import classnames from "classnames"
+import { OverrideClassName } from "~types/OverrideClassName"
+import styles from "./Divider.module.scss"
+
+export type DividerProps = {
+  variant: "content" | "canvas" | "menuSeparator"
+  isReversed?: boolean
+} & OverrideClassName<HTMLAttributes<HTMLDivElement>>
+
+/**
+ * {@link https://cultureamp.atlassian.net/wiki/spaces/DesignSystem/pages/3082061035/Divider Guidance} |
+ * {@link https://cultureamp.design/?path=/docs/components-divider--docs Storybook}
+ */
+export const Divider = ({
+  variant,
+  isReversed = false,
+  classNameOverride,
+  ...props
+}: DividerProps): JSX.Element => (
+  <hr
+    aria-hidden="true"
+    className={classnames(
+      styles.wrapper,
+      classNameOverride,
+      isReversed && styles.reversed,
+      styles[variant]
+    )}
+    {...props}
+  />
+)
+
+Divider.displayName = "Divider"
diff --git a/packages/components/src/Divider/_docs/Divider.mdx b/packages/components/src/Divider/_docs/Divider.mdx
@@ -0,0 +1,32 @@
+import { Canvas, Controls, DocsStory, Meta } from "@storybook/blocks"
+import { ResourceLinks, KaioNotification, Installation } from "~storybook/components"
+import * as DividerStories from "./Divider.stories"
+
+<Meta of={DividerStories} />
+
+# Divider
+
+<ResourceLinks
+  sourceCode="https://github.com/cultureamp/kaizen-design-system/tree/main/packages/components/src/Divider"
+  figma="https://www.figma.com/file/ZRfnoNUXbGZv4eVWLbF4Az/%EF%B8%8F%F0%9F%96%BC%EF%B8%8F-Component-Gallery?node-id=6%3A18248&t=P1w10jr2cpPuaayw-1"
+  designGuidelines="https://cultureamp.atlassian.net/wiki/spaces/DesignSystem/pages/3082061035/Divider"
+  className="!mb-8"
+/>
+
+<KaioNotification />
+
+<Installation
+  installCommand="yarn add @kaizen/components"
+  importStatement='import { Divider } from "@kaizen/components"'
+/>
+
+## Overview
+
+Dividers are thin lines that group content in lists and layouts, or separate blocks of content.
+
+<Canvas of={DividerStories.Playground} />
+<Controls of={DividerStories.Playground} />
+
+## Examples
+
+<DocsStory of={DividerStories.ContentGroup} />