KDS-1744 KAIO migration (chunk 2) (#4014)

* 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 * fix Card stickersheets * import new UserIcon to avatar * fix Icon path * reset any changes from the kaio-migration branch * put back Brand Moment * remove unused deps * update yarn lock * add empty changeset * remove Card * add Brand and ExpertAdvice * move * fix lint * fix missing imports * cleanup + use IconButton * move sticky types * move brand to kaio staging * cleanup * update collapsible structure + EAC stickersheet * fix test path * fix Collapsible path * cleanup --------- Co-authored-by: Cassandra <cassandra.tam@cultureamp.com>
cultureamp · Sep 14, 2023 · 162a413 · 162a413
1 parent 9e820b8
commit 162a413
Show file tree

Hide file tree

Showing 30 changed files with 1,299 additions and 0 deletions.
diff --git a/.changeset/hot-bananas-flash.md b/.changeset/hot-bananas-flash.md
@@ -0,0 +1,2 @@
+---
+---
diff --git a/packages/components/package.json b/packages/components/package.json
@@ -68,6 +68,7 @@
     "@react-types/shared": "^3.19.0",
     "classnames": "^2.3.2",
     "date-fns": "^2.30.0",
+    "react-animate-height": "^3.2.2",
     "react-focus-on": "^3.9.1",
     "react-intl": "^6.4.4",
     "react-popper": "^2.3.0",

diff --git a/packages/components/src/Brand/Brand.module.scss b/packages/components/src/Brand/Brand.module.scss
@@ -0,0 +1,4 @@
+.img {
+  max-inline-size: 100%;
+  display: flex;
+}
diff --git a/packages/components/src/Brand/Brand.tsx b/packages/components/src/Brand/Brand.tsx
@@ -0,0 +1,44 @@
+import React, { HTMLAttributes } from "react"
+import { assetUrl } from "@kaizen/hosted-assets"
+import { OverrideClassName } from "~types/OverrideClassName"
+import styles from "./Brand.module.scss"
+
+export type BrandProps = {
+  variant:
+    | "logo-horizontal"
+    | "logo-vertical"
+    | "enso"
+    | "collective-intelligence"
+  alt: string
+  reversed?: boolean
+} & OverrideClassName<HTMLAttributes<HTMLElement>>
+
+export const Brand = ({
+  variant,
+  alt,
+  reversed = false,
+  classNameOverride,
+  ...restProps
+}: 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>
+  )
+}
+
+Brand.displayName = "Brand"
diff --git a/packages/components/src/Brand/_docs/Brand.mdx b/packages/components/src/Brand/_docs/Brand.mdx
@@ -0,0 +1,33 @@
+import { Canvas, Controls, DocsStory, Meta } from "@storybook/blocks"
+import { ResourceLinks, KaioNotification, Installation } from "~storybook/components"
+import * as BrandStories from "./Brand.stories"
+
+<Meta of={BrandStories} />
+
+# Brand
+
+<ResourceLinks
+  sourceCode="https://github.com/cultureamp/kaizen-design-system/tree/main/packages/components/src/Brand"
+  figma="https://www.figma.com/file/ZRfnoNUXbGZv4eVWLbF4Az/%F0%9F%96%BC%EF%B8%8F-Component-Gallery?type=design&node-id=5-353&mode=design&t=VzrsL0wR4yiimjBa-0"
+  designGuidelines="https://cultureamp.atlassian.net/wiki/spaces/DesignSystem/pages/3065021567/Brand"
+  className="!mb-8"
+/>
+
+<KaioNotification />
+
+<Installation
+  installCommand="yarn add @kaizen/components"
+  importStatement='import { Brand } from "@kaizen/components"'
+/>
+
+## Overview
+
+> “Brand is a promise to your customer, culture is how you deliver on it.”
+> — Didier Elzinga
+
+<Canvas of={BrandStories.Playground} />
+<Controls of={BrandStories.Playground} />
+
+## API
+
+<DocsStory of={BrandStories.Variants} />
diff --git a/packages/components/src/Brand/_docs/Brand.stickersheet.stories.tsx b/packages/components/src/Brand/_docs/Brand.stickersheet.stories.tsx
@@ -0,0 +1,62 @@
+import React from "react"
+import { Meta } from "@storybook/react"
+import {
+  StickerSheet,
+  StickerSheetStory,
+} from "~storybook/components/StickerSheet"
+import { Brand } from "../index"
+
+export default {
+  title: "KAIO-staging/Brand",
+  parameters: {
+    chromatic: { disable: false },
+    controls: { disable: true },
+  },
+} satisfies Meta
+
+const StickerSheetTemplate: StickerSheetStory = {
+  render: ({ isReversed }) => (
+    <StickerSheet isReversed={isReversed}>
+      <StickerSheet.Body>
+        <StickerSheet.Row rowTitle="Logo Horizontal">
+          <Brand
+            alt="Culture Amp"
+            variant="logo-horizontal"
+            reversed={isReversed}
+          />
+        </StickerSheet.Row>
+        <StickerSheet.Row rowTitle="Logo Vertical">
+          <Brand
+            alt="Culture Amp"
+            variant="logo-vertical"
+            reversed={isReversed}
+          />
+        </StickerSheet.Row>
+        <StickerSheet.Row rowTitle="Enso">
+          <Brand alt="Culture Amp" variant="enso" reversed={isReversed} />
+        </StickerSheet.Row>
+        <StickerSheet.Row rowTitle="Collective Intelligence">
+          <div style={{ width: "200px" }}>
+            <Brand
+              alt="Collective Intelligence"
+              variant="collective-intelligence"
+              reversed={isReversed}
+            />
+          </div>
+        </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 },
+}
diff --git a/packages/components/src/Brand/_docs/Brand.stories.tsx b/packages/components/src/Brand/_docs/Brand.stories.tsx
@@ -0,0 +1,31 @@
+import { Meta, StoryObj } from "@storybook/react"
+import { StickerSheetStory } from "~storybook/components/StickerSheet"
+import { Brand } from "../index"
+import { StickerSheetDefault } from "./Brand.stickersheet.stories"
+
+const meta = {
+  title: "KAIO-staging/Brand",
+  component: Brand,
+  args: {
+    variant: "logo-horizontal",
+    alt: "Logo Horizontal",
+  },
+} satisfies Meta<typeof Brand>
+
+export default meta
+
+type Story = StoryObj<typeof meta>
+
+export const Playground: Story = {
+  parameters: {
+    docs: {
+      canvas: {
+        sourceState: "shown",
+      },
+    },
+  },
+}
+
+export const Variants: StickerSheetStory = {
+  ...StickerSheetDefault,
+}
diff --git a/packages/components/src/Brand/index.ts b/packages/components/src/Brand/index.ts
@@ -0,0 +1 @@
+export * from "./Brand"
diff --git a/packages/components/src/Collapsible/Collapsible/Collapsible.module.scss b/packages/components/src/Collapsible/Collapsible/Collapsible.module.scss
@@ -0,0 +1,115 @@
+@import "~@kaizen/design-tokens/sass/border";
+@import "~@kaizen/design-tokens/sass/shadow";
+@import "~@kaizen/design-tokens/sass/color";
+@import "~@kaizen/design-tokens/sass/spacing";
+@import "~@kaizen/design-tokens/sass/animation";
+
+$heading-active-color: $color-gray-200;
+$border-color: rgba($color-gray-600-rgb, 0.2);
+
+.header {
+  display: flex;
+  align-items: center;
+  text-align: left;
+  background-color: $color-white;
+  border: none;
+  transition: background-color $animation-duration-rapid;
+  padding: $spacing-sm $spacing-sm $spacing-sm $spacing-md;
+
+  &:hover {
+    background-color: $heading-active-color;
+  }
+
+  [dir="rtl"] & {
+    text-align: right;
+    padding-left: $spacing-sm;
+    padding-right: $spacing-md;
+  }
+
+  // Round the bottom corners of the header so when the container is open, the
+  // header background is not rounded on the corners and flush with the content beneath.
+  .open {
+    border-bottom-left-radius: 0;
+    border-bottom-right-radius: 0;
+  }
+}
+
+// We need a full border radius on this container element, then have classes
+// beneath to toggle nested borders off and on for different use cases.
+.container {
+  background-color: $color-white;
+  box-shadow: $shadow-small-box-shadow;
+  border-radius: $border-borderless-border-radius;
+}
+
+.single {
+  .header {
+    border-radius: $border-borderless-border-radius;
+  }
+}
+
+.separated {
+  & + .separated {
+    margin-top: calc(#{$spacing-md} * 0.3);
+    margin-right: 0;
+    margin-left: 0;
+  }
+
+  .header {
+    border-radius: $border-borderless-border-radius;
+  }
+}
+
+// When a collapsible group is rendered, we need the first group to have a rounded
+// on top and the last group to have a rounded bottom edge. Then when the last group
+// is open we remove the rounded edge as the content sits beneath and needs to be straight.
+.groupItem {
+  & + .groupItem {
+    border-top: 1px $border-solid-border-style $border-color;
+  }
+
+  &:first-of-type > .header {
+    border-top-left-radius: $border-borderless-border-radius;
+    border-top-right-radius: $border-borderless-border-radius;
+  }
+
+  &:last-of-type > .header:not(.open) {
+    border-bottom-left-radius: $border-borderless-border-radius;
+    border-bottom-right-radius: $border-borderless-border-radius;
+  }
+}
+
+.chevronButton:hover {
+  // hack to get rid of the IconButton hover styling because it clashes with the hover styling on the Collapsible header
+  background-color: transparent !important; /* stylelint-disable-line declaration-no-important */
+}
+
+.title {
+  flex: 1 1 auto;
+}
+
+.defaultVariant {
+  background-color: $heading-active-color;
+}
+
+.clearVariant {
+  border-bottom: 1px $border-solid-border-style $border-color;
+}
+
+.sticky {
+  position: -webkit-sticky; /* stylelint-disable-line value-no-vendor-prefix */
+  position: sticky;
+  z-index: 10;
+}
+
+.section {
+  padding: $spacing-md;
+}
+
+.noPadding {
+  padding: 0;
+}
+
+.hide {
+  display: none;
+}