@kaizen/components 0.0.0-canary-test-exports-20231114054615 → 0.0.0-canary-bundle-size-check-20231115005811

package/src/ClearButton/ClearButton.module.scss

@@ -0,0 +1,62 @@
+@import "~@kaizen/design-tokens/sass/border";
+@import "~@kaizen/design-tokens/sass/color";
+@import "../../styles/utils/button-reset";
+
+.clearButton {
+  @include button-reset;
+
+  position: relative;
+  display: inline-flex;
+
+  &:hover {
+    cursor: pointer;
+  }
+
+  &:focus {
+    outline: none;
+  }
+
+  &:focus-visible {
+    &::after {
+      $focus-ring-offset: -1px;
+
+      content: "";
+      position: absolute;
+      background: transparent;
+      border-width: $border-focus-ring-border-width;
+      border-style: $border-focus-ring-border-style;
+      border-radius: 50%;
+      inset: $focus-ring-offset;
+    }
+  }
+}
+
+.default {
+  color: $color-gray-500;
+
+  &:hover,
+  &:focus-visible {
+    color: $color-purple-800;
+  }
+
+  &:focus-visible {
+    &::after {
+      border-color: $color-blue-500;
+    }
+  }
+}
+
+.reversed {
+  color: rgba($color-white-rgb, 0.8);
+
+  &:hover,
+  &:focus-visible {
+    color: $color-white;
+  }
+
+  &:focus-visible {
+    &::after {
+      border-color: $color-blue-300;
+    }
+  }
+}

package/src/ClearButton/ClearButton.tsx

@@ -0,0 +1,30 @@
+import React, { ButtonHTMLAttributes } from "react"
+import classnames from "classnames"
+import { ClearIcon } from "~components/Icon"
+import { OverrideClassName } from "~types/OverrideClassName"
+import styles from "./ClearButton.module.scss"
+
+export type ClearButtonProps = {
+  isReversed?: boolean
+} & OverrideClassName<Omit<ButtonHTMLAttributes<HTMLButtonElement>, "children">>
+
+export const ClearButton = ({
+  classNameOverride,
+  isReversed = false,
+  ...restProps
+}: ClearButtonProps): JSX.Element => (
+  <button
+    type="button"
+    aria-label="clear"
+    className={classnames(
+      styles.clearButton,
+      isReversed ? styles.reversed : styles.default,
+      classNameOverride
+    )}
+    {...restProps}
+  >
+    <ClearIcon role="presentation" />
+  </button>
+)
+
+ClearButton.displayName = "ClearButton"

package/src/ClearButton/_docs/ClearButton.stickersheet.stories.tsx

@@ -0,0 +1,52 @@
+import React from "react"
+import { Meta } from "@storybook/react"
+import {
+  StickerSheet,
+  StickerSheetStory,
+} from "~storybook/components/StickerSheet"
+import { ClearButton } from "../index"
+
+export default {
+  title: "Components/ClearButton",
+  parameters: {
+    chromatic: { disable: false },
+    controls: { disable: true },
+  },
+} satisfies Meta
+
+const StickerSheetTemplate: StickerSheetStory = {
+  render: ({ isReversed }) => (
+    <StickerSheet isReversed={isReversed}>
+      <StickerSheet.Header headings={["Default", "Hover", "Focus"]} />
+      <StickerSheet.Body>
+        <StickerSheet.Row>
+          <ClearButton isReversed={isReversed} />
+          <ClearButton isReversed={isReversed} data-sb-pseudo-styles="hover" />
+          <ClearButton isReversed={isReversed} data-sb-pseudo-styles="focus" />
+        </StickerSheet.Row>
+      </StickerSheet.Body>
+    </StickerSheet>
+  ),
+  parameters: {
+    pseudo: {
+      hover: '[data-sb-pseudo-styles="hover"]',
+      focus: '[data-sb-pseudo-styles="focus"]',
+      focusVisible: '[data-sb-pseudo-styles="focus"]',
+    },
+  },
+}
+
+export const StickerSheetDefault: StickerSheetStory = {
+  ...StickerSheetTemplate,
+  name: "Sticker Sheet (Default)",
+}
+
+export const StickerSheetReversed: StickerSheetStory = {
+  ...StickerSheetTemplate,
+  name: "Sticker Sheet (Reversed)",
+  parameters: {
+    ...StickerSheetTemplate.parameters,
+    backgrounds: { default: "Purple 700" },
+  },
+  args: { isReversed: true },
+}

package/src/ClearButton/index.ts

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

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

package/src/Collapsible/Collapsible/Collapsible.spec.tsx

@@ -0,0 +1,115 @@
+import React from "react"
+import { queryByTestId, render, waitFor } from "@testing-library/react"
+import userEvent from "@testing-library/user-event"
+import { Collapsible } from "./Collapsible"
+
+const user = userEvent.setup()
+
+describe("<Collapsible />", () => {
+  it("includes the 'sticky' class on buttons when the 'sticky' prop is specified", () => {
+    const { getByTestId } = render(
+      <Collapsible id="1" title="First panel" sticky={{ top: "0px" }}>
+        First panel content
+      </Collapsible>
+    )
+
+    const collapsibleContainer = getByTestId("collapsible-header-1")
+
+    expect(collapsibleContainer.classList.contains("sticky")).toBeTruthy()
+  })
+
+  it("toggles the height of the section on click of the button", async () => {
+    const { getByTestId } = render(
+      <Collapsible id="1" open title="First panel">
+        First panel content
+      </Collapsible>
+    )
+
+    const collapsible = getByTestId("collapsible-header-1")
+    const section = getByTestId("collapsible-section-1")
+
+    await user.click(collapsible)
+    await waitFor(() => {
+      expect(section.style.height).toEqual("0px")
+    })
+
+    await user.click(collapsible)
+    await waitFor(() => {
+      expect(section.style.height).toEqual("auto")
+    })
+  })
+
+  it("gives precedence to renderHeader over title", () => {
+    const { container, getByTestId } = render(
+      <Collapsible
+        id="1"
+        open
+        title="Should not be rendered"
+        renderHeader={(): JSX.Element => (
+          <div>This title should be rendered</div>
+        )}
+      >
+        First panel content
+      </Collapsible>
+    )
+
+    const titleText = getByTestId("collapsible-header-1").querySelector("div")
+
+    expect(titleText).toHaveTextContent("This title should be rendered")
+    expect(
+      queryByTestId(container as HTMLElement, "collapsible-button-title-1")
+    ).toBeNull()
+  })
+
+  it("doesn't render section content when lazyLoad is enabled", () => {
+    const { container } = render(
+      <Collapsible id="1" title="Title" lazyLoad>
+        <div data-testid="lazy-load-content">First panel content</div>
+      </Collapsible>
+    )
+
+    expect(
+      queryByTestId(container as HTMLElement, "lazy-load-content")
+    ).toBeNull()
+  })
+
+  it("runs the onToggle callback", async () => {
+    const onToggle = jest.fn()
+
+    const { getByTestId } = render(
+      <Collapsible id="1" open title="First panel" onToggle={onToggle}>
+        First panel content
+      </Collapsible>
+    )
+
+    const collapsible = getByTestId("collapsible-header-1")
+
+    await user.click(collapsible)
+    await waitFor(() => {
+      expect(onToggle).toHaveBeenCalledTimes(1)
+      expect(onToggle).toHaveBeenCalledWith(false, "1")
+    })
+
+    await user.click(collapsible)
+    await waitFor(() => {
+      expect(onToggle).toHaveBeenCalledTimes(2)
+      expect(onToggle).toHaveBeenCalledWith(true, "1")
+    })
+  })
+
+  it("respects controlled mode (stays open after click)", async () => {
+    const { getByTestId } = render(
+      <Collapsible id="1" open title="First panel" controlled>
+        First panel content
+      </Collapsible>
+    )
+
+    const collapsible = getByTestId("collapsible-header-1")
+    const section = getByTestId("collapsible-section-1")
+
+    await user.click(collapsible)
+    await waitFor(() => {
+      expect(section.style.height).toEqual("auto")
+    })
+  })
+})

package/src/Collapsible/Collapsible/Collapsible.tsx

@@ -0,0 +1,160 @@
+import React, { HTMLAttributes, useId, useState } from "react"
+import classnames from "classnames"
+import AnimateHeight from "react-animate-height"
+import { IconButton } from "~components/Button"
+import { Heading } from "~components/Heading"
+import { ChevronUpIcon, ChevronDownIcon } from "~components/Icon"
+import { OverrideClassName } from "~types/OverrideClassName"
+import { Sticky } from "../types"
+import styles from "./Collapsible.module.scss"
+
+export type CollapsibleProps = {
+  children: JSX.Element | JSX.Element[] | string
+  title: string
+  renderHeader?: (title: string) => JSX.Element | JSX.Element[]
+  open?: boolean
+  group?: boolean
+  separated?: boolean
+  sticky?: Sticky
+  noSectionPadding?: boolean
+  onToggle?: (open: boolean, id: string) => void
+  /**
+   * By default, the header will change background colour when open. When the variant
+   * is set to 'clear', it will not have a background but a border-bottom will appear
+   * to separate the heading from the content.
+   */
+  variant?: "default" | "clear"
+  /**
+   * Will avoid rendering the content until required (especially important when you
+   * have queries inside sections).
+   * Removes animation.
+   */
+  lazyLoad?: boolean
+  /**
+   * Disables internal `open` state, allowing it to be controlled in the usage.
+   */
+  controlled?: boolean
+} & OverrideClassName<HTMLAttributes<HTMLDivElement>>
+
+export const Collapsible = ({
+  children,
+  title,
+  renderHeader,
+  open,
+  group,
+  separated,
+  sticky,
+  noSectionPadding,
+  onToggle,
+  variant,
+  lazyLoad,
+  controlled,
+  classNameOverride,
+  id: propsId,
+  ...restProps
+}: CollapsibleProps): JSX.Element => {
+  const [stateIsOpen, setIsOpen] = useState<boolean>(open ?? false)
+  const getOpen = (): boolean | undefined => (controlled ? open : stateIsOpen)
+
+  const id = propsId ?? useId()
+
+  const handleSectionToggle = (): void => {
+    const newIsOpen = !getOpen()
+    if (!controlled) setIsOpen(newIsOpen)
+    onToggle?.(newIsOpen, id)
+  }
+
+  const handleButtonPress = (event: React.MouseEvent): void => {
+    event.stopPropagation()
+    handleSectionToggle()
+  }
+
+  const buttonId = `${id}-button`
+  const sectionId = `${id}-section`
+  const isOpen = getOpen()
+  const isContainer = !group || separated
+
+  return (
+    <div
+      id={id}
+      className={classnames(
+        classNameOverride,
+        isContainer && styles.container,
+        group && !separated && styles.groupItem,
+        separated && styles.separated,
+        isOpen && styles.open,
+        !group && styles.single
+      )}
+      data-testid={`collapsible-container-${id}`}
+      {...restProps} // `title` is missing because it is used for the header; requires breaking change to fix
+    >
+      {/* Disabling these a11y linting errors because there is an IconButton that mitigates these concerns. The onClick here is just an additional layer. */}
+      {/* eslint-disable-next-line jsx-a11y/click-events-have-key-events,
+      jsx-a11y/no-static-element-interactions */}
+      <div
+        className={classnames(
+          styles.header,
+          isOpen && styles.open,
+          sticky && styles.sticky,
+          isOpen && variant === "default" && styles.defaultVariant,
+          isOpen && variant === "clear" && styles.clearVariant
+        )}
+        style={sticky && { top: sticky.top }}
+        onClick={handleSectionToggle}
+        data-testid={`collapsible-header-${id}`}
+      >
+        {renderHeader !== undefined ? (
+          renderHeader(title)
+        ) : (
+          <div
+            className={styles.title}
+            data-testid={`collapsible-button-title-${id}`}
+          >
+            <Heading variant="heading-4" tag="span">
+              {title}
+            </Heading>
+          </div>
+        )}
+        <div>
+          <IconButton
+            label={title}
+            icon={
+              isOpen ? (
+                <ChevronUpIcon role="presentation" />
+              ) : (
+                <ChevronDownIcon role="presentation" />
+              )
+            }
+            type="button"
+            aria-expanded={isOpen}
+            aria-controls={sectionId}
+            data-testid={`collapsible-button-${id}`}
+            id={buttonId}
+            onClick={handleButtonPress}
+            classNameOverride={styles.chevronButton}
+          />
+        </div>
+      </div>
+      {(!lazyLoad || isOpen) && (
+        <AnimateHeight
+          height={isOpen ? "auto" : 0}
+          data-testid={`collapsible-section-${id}`}
+        >
+          <div
+            id={sectionId}
+            className={classnames(
+              styles.section,
+              noSectionPadding && styles.noPadding
+            )}
+            role="region"
+            aria-labelledby={buttonId}
+          >
+            {children}
+          </div>
+        </AnimateHeight>
+      )}
+    </div>
+  )
+}
+
+Collapsible.displayName = "Collapsible"

package/src/Collapsible/Collapsible/_docs/Collapsible.mdx

@@ -0,0 +1,45 @@
+import { Canvas, Controls, DocsStory, Meta } from "@storybook/blocks"
+import { ResourceLinks, KaioNotification, Installation } from "~storybook/components"
+import * as CollapsibleStories from "./Collapsible.stories"
+
+<Meta of={CollapsibleStories} />
+
+# Collapsible
+
+<ResourceLinks
+  sourceCode="https://github.com/cultureamp/kaizen-design-system/tree/main/packages/components/src/Collapsible"
+  figma="https://www.figma.com/file/ZRfnoNUXbGZv4eVWLbF4Az/%EF%B8%8F%F0%9F%96%BC%EF%B8%8F-Component-Gallery?node-id=6%3A5001&t=P1w10jr2cpPuaayw-1"
+  designGuidelines="https://cultureamp.atlassian.net/wiki/spaces/DesignSystem/pages/3082094383/Collapsible"
+  className="!mb-8"
+/>
+
+<KaioNotification />
+
+<Installation
+  installCommand="yarn add @kaizen/components"
+  importStatement='import { Collapsible } from "@kaizen/components"'
+/>
+
+## Overview
+
+Collapsibles are used to collapse and expand content inline on a page. This lets users progressively disclose information as desired.
+
+<Canvas of={CollapsibleStories.Playground} />
+<Controls of={CollapsibleStories.Playground} />
+
+## API
+
+<DocsStory of={CollapsibleStories.NoPadding} />
+
+<DocsStory of={CollapsibleStories.Clear} />
+
+<DocsStory of={CollapsibleStories.CustomHeader} />
+
+<DocsStory of={CollapsibleStories.Sticky} sourceState="shown" />
+
+### Controlled
+
+Control the open state using a `useState` (or similar) by setting the `controlled` prop to `true`
+and defining the `open` and `onToggle` props.
+
+<Canvas of={CollapsibleStories.Controlled} />

package/src/Collapsible/Collapsible/_docs/Collapsible.stickersheet.stories.tsx

@@ -0,0 +1,72 @@
+import React from "react"
+import { Meta } from "@storybook/react"
+import { Heading } from "~components/Heading"
+import {
+  StickerSheet,
+  StickerSheetStory,
+} from "~storybook/components/StickerSheet"
+import { Collapsible, CollapsibleProps } from "../index"
+
+export default {
+  title: "Components/Collapsibles/Collapsible",
+  parameters: {
+    chromatic: { disable: false },
+    controls: { disable: true },
+  },
+} satisfies Meta
+
+const CollapsibleWrapped = (
+  args: Omit<CollapsibleProps, "children">
+): JSX.Element => (
+  <Collapsible open {...args}>
+    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus ac
+    scelerisque sem, vel ultricies justo. Donec eu porttitor ante, nec gravida
+    orci. Nulla facilisi. Cras varius erat id fermentum mattis. Mauris bibendum
+    vestibulum erat, quis blandit metus viverra sit amet. Vivamus pretium vitae
+    turpis ut condimentum. Sed vulputate magna nisl, in cursus urna hendrerit
+    et. Aenean semper, est non feugiat sodales, nisl ligula aliquet lorem, sit
+    amet scelerisque arcu quam a sapien. Donec in viverra urna.
+  </Collapsible>
+)
+
+const StickerSheetTemplate: StickerSheetStory = {
+  render: () => (
+    <StickerSheet>
+      <StickerSheet.Body>
+        <StickerSheet.Row rowTitle="Default">
+          <CollapsibleWrapped title="Collapsible" />
+        </StickerSheet.Row>
+        <StickerSheet.Row rowTitle="noSectionPadding">
+          <CollapsibleWrapped title="No Padding" noSectionPadding />
+        </StickerSheet.Row>
+        <StickerSheet.Row rowTitle="lazyLoad">
+          <CollapsibleWrapped title="Lazy load" lazyLoad />
+        </StickerSheet.Row>
+        <StickerSheet.Row rowTitle="clear">
+          <CollapsibleWrapped title="Clear" variant="clear" />
+        </StickerSheet.Row>
+        <StickerSheet.Row rowTitle="custom heading">
+          <CollapsibleWrapped
+            title="Custom header"
+            renderHeader={title => (
+              <Heading variant="heading-4" tag="span">
+                {title}
+              </Heading>
+            )}
+          />
+        </StickerSheet.Row>
+      </StickerSheet.Body>
+    </StickerSheet>
+  ),
+}
+
+export const StickerSheetDefault: StickerSheetStory = {
+  ...StickerSheetTemplate,
+  name: "Sticker Sheet (Default)",
+}
+
+export const StickerSheetRTL: StickerSheetStory = {
+  ...StickerSheetTemplate,
+  name: "Sticker Sheet (RTL)",
+  parameters: { textDirection: "rtl" },
+}