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

package/src/Menu/_docs/examples.tsx

@@ -0,0 +1,42 @@
+import React from "react"
+import { action } from "@storybook/addon-actions"
+import { DuplicateIcon, EditIcon } from "~components/Icon"
+import { MenuItem, MenuList } from "~components/Menu"
+
+export const exampleActionButtonPropsButton = {
+  label: "Edit Survey",
+  onClick: action("clicked"),
+}
+
+export const exampleActionButtonPropsAnchor = {
+  label: "Edit Survey",
+  href: "//example.com",
+}
+
+export const exampleDropdownContentEnabled = (
+  <MenuList>
+    <MenuItem
+      icon={<EditIcon role="presentation" />}
+      label="Menu Item 1"
+      onClick={action("clicked")}
+    />
+    <MenuItem
+      icon={<DuplicateIcon role="presentation" />}
+      label="Menu Item 2"
+    />
+  </MenuList>
+)
+
+export const exampleDropdownContentOneDisabled = (
+  <MenuList>
+    <MenuItem
+      icon={<EditIcon role="presentation" />}
+      label="Menu Item 1"
+      disabled
+    />
+    <MenuItem
+      icon={<DuplicateIcon role="presentation" />}
+      label="Menu Item 2"
+    />
+  </MenuList>
+)

package/src/Menu/index.ts

@@ -0,0 +1,5 @@
+export * from "./Menu"
+export * from "./subcomponents/MenuHeading"
+export * from "./subcomponents/MenuItem"
+export * from "./subcomponents/MenuList"
+export * from "./subcomponents/StatelessMenu"

package/src/Menu/subcomponents/MenuDropdown/MenuDropdown.module.scss

@@ -0,0 +1,28 @@
+@import "~@kaizen/design-tokens/sass/border";
+@import "~@kaizen/design-tokens/sass/color";
+@import "~@kaizen/design-tokens/sass/shadow";
+@import "~@kaizen/design-tokens/sass/spacing";
+
+$menu-container-width: 248px;
+$dropdown-index: 1000;
+
+.menuContainer {
+  z-index: $dropdown-index;
+  box-sizing: border-box;
+  background: $color-white;
+  color: $color-purple-800;
+  border-radius: $border-solid-border-radius;
+  box-shadow: $shadow-large-box-shadow;
+  max-height: 22rem;
+  overflow: auto;
+  padding: $spacing-xs 0;
+  text-align: left;
+
+  [dir="rtl"] & {
+    text-align: right;
+  }
+}
+
+.defaultWidth {
+  width: $menu-container-width;
+}

package/src/Menu/subcomponents/MenuDropdown/MenuDropdown.tsx

@@ -0,0 +1,128 @@
+import React, { useCallback, useEffect, useState } from "react"
+import classnames from "classnames"
+import { usePopper } from "react-popper"
+import styles from "./MenuDropdown.module.scss"
+
+export type MenuDropdownProps = {
+  id?: string
+  hideMenuDropdown: () => void
+  position?: {
+    top: number
+    bottom: number
+    left: number
+    right: number
+  } | null
+  align?: "left" | "right"
+  width?: "default" | "contain"
+  autoHide?: "on" | "outside-click-only" | "off"
+  children: React.ReactNode
+  referenceElement: HTMLElement | null
+}
+
+export const MenuDropdown = ({
+  children,
+  referenceElement,
+  id,
+  hideMenuDropdown,
+  autoHide = "on",
+  align = "left",
+  width = "default",
+}: MenuDropdownProps): JSX.Element => {
+  const [popperElement, setPopperElement] = useState<HTMLDivElement | null>(
+    null
+  )
+  const { styles: popperStyles, attributes } = usePopper(
+    referenceElement,
+    popperElement,
+    {
+      modifiers: [
+        {
+          name: "offset",
+          options: {
+            offset: [0, 6], // value used from the $spacing-xs scss variable,
+          },
+        },
+        {
+          name: "preventOverflow",
+          options: {
+            // Gives some room so the menu shadow doesn't get clipped if near the edge of the viewport.
+            padding: 8,
+          },
+        },
+      ],
+      placement: align === "left" ? "bottom-start" : "bottom-end",
+    }
+  )
+
+  // This callback handler will not run when autoHide === "off"
+  const handleDocumentClickForAutoHide = useCallback(
+    (e: MouseEvent) => {
+      if (
+        popperElement &&
+        e.target instanceof Node &&
+        !popperElement.contains(e.target) &&
+        referenceElement !== e.target &&
+        !referenceElement?.contains(e.target)
+      ) {
+        hideMenuDropdown()
+      }
+    },
+    [popperElement, referenceElement, hideMenuDropdown]
+  )
+
+  const handleDocumentResize = useCallback(() => {
+    hideMenuDropdown()
+  }, [hideMenuDropdown])
+
+  const handleRootClick = (): void => {
+    if (autoHide === "on") {
+      // ie. is not equal to "off" | "outside-click-only"
+      hideMenuDropdown()
+    }
+  }
+
+  useEffect(() => {
+    window.addEventListener("resize", handleDocumentResize, false)
+
+    return () => {
+      window.removeEventListener("resize", handleDocumentResize, false)
+    }
+  }, [handleDocumentResize])
+
+  useEffect(() => {
+    if (autoHide !== "off") {
+      document.addEventListener("click", handleDocumentClickForAutoHide, true)
+    }
+
+    return () => {
+      if (autoHide !== "off") {
+        document.removeEventListener(
+          "click",
+          handleDocumentClickForAutoHide,
+          true
+        )
+      }
+    }
+  }, [autoHide, handleDocumentClickForAutoHide])
+
+  return (
+    // Disabling these because we don't want this to be keyboard focusable.
+    // Esc keypress should be used instead for the same behaviour (hasn't been implemented here yet)
+    // eslint-disable-next-line jsx-a11y/click-events-have-key-events, jsx-a11y/no-static-element-interactions
+    <div
+      id={id}
+      ref={setPopperElement}
+      {...attributes.popper}
+      style={popperStyles.popper}
+      className={classnames(
+        styles.menuContainer,
+        width == "default" && styles.defaultWidth
+      )}
+      onClick={handleRootClick}
+    >
+      {children}
+    </div>
+  )
+}
+
+MenuDropdown.displayName = "MenuDropdown"

package/src/Menu/subcomponents/MenuDropdown/index.ts

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

package/src/Menu/subcomponents/MenuHeading/MenuHeading.module.scss

@@ -0,0 +1,11 @@
+@import "~@kaizen/design-tokens/sass/color";
+@import "~@kaizen/design-tokens/sass/spacing";
+
+$gutter: calc(#{$spacing-md} * 1 / 6);
+
+.heading {
+  padding: 10px $spacing-sm 5px;
+  color: $color-purple-800;
+  margin: 0 $gutter;
+  display: block;
+}

package/src/Menu/subcomponents/MenuHeading/MenuHeading.tsx

@@ -0,0 +1,24 @@
+import React from "react"
+import classnames from "classnames"
+import { Heading, HeadingProps } from "~components/Heading"
+import styles from "./MenuHeading.module.scss"
+
+export type MenuHeadingProps = {
+  children: React.ReactNode
+} & Partial<HeadingProps>
+
+export const MenuHeading = ({
+  id,
+  classNameOverride,
+  ...restProps
+}: MenuHeadingProps): JSX.Element => (
+  <Heading
+    id={id}
+    variant="heading-6"
+    tag="span"
+    classNameOverride={classnames(styles.heading, classNameOverride)}
+    {...restProps}
+  />
+)
+
+MenuHeading.displayName = "MenuHeading"

package/src/Menu/subcomponents/MenuHeading/index.ts

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

package/src/Menu/subcomponents/MenuItem/MenuItem.module.scss

@@ -0,0 +1,106 @@
+@import "~@kaizen/design-tokens/sass/color";
+@import "~@kaizen/design-tokens/sass/spacing";
+@import "~@kaizen/design-tokens/sass/typography";
+
+.menuListItem {
+  display: flex;
+}
+
+/* stylelint-disable no-descending-specificity */
+.menuItem {
+  display: flex;
+  align-items: center;
+  flex: 1 1 auto;
+  box-sizing: border-box;
+  background: none;
+  border: 2px transparent solid;
+  text-align: left;
+  padding: 6px calc(#{$spacing-sm} - 2px);
+  margin: 0 $spacing-xs;
+  min-height: calc(1.75 * #{$spacing-md});
+  border-radius: 4px;
+  font-family: $typography-paragraph-body-font-family;
+  font-weight: $typography-paragraph-body-font-weight;
+  font-size: $typography-paragraph-body-font-size;
+  line-height: $typography-paragraph-body-line-height;
+  letter-spacing: $typography-paragraph-body-letter-spacing;
+  text-decoration: none;
+  color: $color-purple-800;
+
+  &:hover {
+    text-decoration: none;
+  }
+
+  &:not(.menuItem--disabled):hover,
+  &:focus {
+    background: $color-blue-100;
+    color: $color-blue-500;
+
+    .menuItem__Icon {
+      color: $color-blue-500;
+    }
+
+    &.menuItem--destructive {
+      background: $color-red-100;
+      color: $color-red-600;
+
+      .menuItem__Icon {
+        color: $color-red-600;
+      }
+    }
+  }
+
+  &:focus {
+    outline: none;
+  }
+
+  &:focus-visible {
+    border-color: $color-blue-500;
+  }
+
+  [dir="rtl"] & {
+    text-align: right;
+  }
+}
+
+.menuItem--disabled {
+  color: rgba($color-purple-800-rgb, 0.3);
+
+  .menuItem__Icon {
+    color: rgba($color-purple-800-rgb, 0.3);
+  }
+}
+
+.menuItem--active {
+  color: $color-blue-500;
+  font-weight: $typography-paragraph-bold-font-weight;
+}
+
+.menuItem--destructive {
+  color: $color-red-600;
+
+  .menuItem__Icon {
+    color: $color-red-600;
+  }
+}
+
+.menuItem--destructive.menuItem--disabled {
+  color: rgba($color-red-600-rgb, 0.3);
+
+  .menuItem__Icon {
+    color: rgba($color-red-600-rgb, 0.3);
+  }
+}
+
+.menuItem__Label {
+  flex-grow: 1;
+}
+
+.menuItem__Icon {
+  margin-inline-end: calc(#{$spacing-md} / 3);
+  display: flex;
+  align-self: flex-start;
+  transform: translateY(0.2em);
+  color: rgba($color-purple-800-rgb, 0.75);
+}
+/* stylelint-enable no-descending-specificity */

package/src/Menu/subcomponents/MenuItem/MenuItem.tsx

@@ -0,0 +1,98 @@
+import React from "react"
+import classnames from "classnames"
+import styles from "./MenuItem.module.scss"
+
+export type MenuItemProps = {
+  label: string
+  href?: string
+  // Only applicable if href is supplied above
+  target?: string
+  onClick?: (e: React.MouseEvent<HTMLButtonElement>) => void
+  icon?: JSX.Element
+  destructive?: boolean
+  disabled?: boolean
+  /**
+   * @deprecated use data-testid
+   */
+  automationId?: string
+  /**
+   * Not recommended - this was added for use in exceptional cases like the navigation bar, which needs
+   * to highlight which page the user is currently on. By design, Menus don't have active items,
+   * because they are supposed to be a bunch of links/actions.
+   */
+  isActive?: boolean
+  "data-testid"?: string
+}
+
+export const MenuItem = ({
+  label,
+  icon,
+  destructive,
+  disabled,
+  onClick,
+  href,
+  target,
+  isActive,
+  "data-testid": dataTestId,
+}: MenuItemProps): JSX.Element => {
+  const wrappedLabel = <span className={styles.menuItem__Label}>{label}</span>
+  const iconNode = icon && <span className={styles.menuItem__Icon}>{icon}</span>
+
+  const className = classnames(
+    styles.menuItem,
+    destructive && styles["menuItem--destructive"],
+    disabled && styles["menuItem--disabled"],
+    isActive && styles["menuItem--active"]
+  )
+
+  if (disabled) {
+    return (
+      <li className={styles.menuListItem}>
+        <button
+          type="button"
+          disabled={true}
+          className={className}
+          data-testid={dataTestId}
+        >
+          {iconNode}
+          {wrappedLabel}
+        </button>
+      </li>
+    )
+  }
+
+  if (href) {
+    return (
+      <li className={styles.menuListItem}>
+        <a
+          href={href}
+          className={className}
+          target={target}
+          // this tells screenreaders that this link represents the current page
+          // (only intended for use in things like a nav with dropdowns)
+          aria-current={isActive ? "page" : undefined}
+          data-testid={dataTestId}
+        >
+          {iconNode}
+          {wrappedLabel}
+        </a>
+      </li>
+    )
+  }
+
+  return (
+    <li className={styles.menuListItem}>
+      <button
+        type="button"
+        onClick={onClick}
+        className={className}
+        data-testid={dataTestId}
+      >
+        {iconNode}
+        {wrappedLabel}
+      </button>
+    </li>
+  )
+}
+
+MenuItem.displayName = "MenuItem"

package/src/Menu/subcomponents/MenuItem/index.ts

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

package/src/Menu/subcomponents/MenuList/MenuList.module.scss

@@ -0,0 +1,18 @@
+@import "~@kaizen/design-tokens/sass/border";
+
+.menuSection {
+  list-style: none;
+  padding: 0;
+  margin: 0;
+
+  &:not(:last-of-type) {
+    &::after {
+      width: 100%;
+      height: 1px;
+      background-color: $border-solid-border-color;
+      content: "";
+      display: block;
+      margin: 5px 0;
+    }
+  }
+}

package/src/Menu/subcomponents/MenuList/MenuList.spec.tsx

@@ -0,0 +1,44 @@
+import React from "react"
+import { render, screen } from "@testing-library/react"
+import { MenuHeading } from "../MenuHeading"
+import { MenuItem } from "../MenuItem"
+import { MenuList } from "./MenuList"
+
+describe("MenuList", () => {
+  describe("With a heading", () => {
+    it("gives the list an accessible name of the section heading text", () => {
+      render(
+        <MenuList heading={<MenuHeading>A menu section</MenuHeading>}>
+          <MenuItem label="Item one" />
+        </MenuList>
+      )
+      expect(
+        screen.getByRole("list", { name: "A menu section" })
+      ).toBeInTheDocument()
+    })
+
+    it("applies custom heading props", () => {
+      render(
+        <MenuList heading={<MenuHeading tag="h2">A menu section</MenuHeading>}>
+          <MenuItem label="Item one" />
+        </MenuList>
+      )
+      expect(
+        screen.getByRole("heading", { name: "A menu section", level: 2 })
+      ).toBeInTheDocument()
+    })
+  })
+
+  it("still links ids correctly when a heading id provided", () => {
+    render(
+      <MenuList
+        heading={<MenuHeading id="custom-id">A menu section</MenuHeading>}
+      >
+        <MenuItem label="Item one" />
+      </MenuList>
+    )
+    expect(
+      screen.getByRole("list", { name: "A menu section" })
+    ).toBeInTheDocument()
+  })
+})

package/src/Menu/subcomponents/MenuList/MenuList.tsx

@@ -0,0 +1,29 @@
+import React, { HTMLAttributes, cloneElement, useId } from "react"
+import { OverrideClassName } from "~types/OverrideClassName"
+import styles from "./MenuList.module.scss"
+
+export type MenuListProps = {
+  heading?: JSX.Element
+  children: React.ReactNode
+} & OverrideClassName<HTMLAttributes<HTMLUListElement>>
+
+export const MenuList = (props: MenuListProps): JSX.Element => {
+  const { heading, children, ...restProps } = props
+  const reactId = useId()
+  const listHeadingID = heading?.props.id ?? reactId
+
+  return (
+    <>
+      {heading && cloneElement(heading, { id: listHeadingID })}
+      <ul
+        className={styles.menuSection}
+        aria-labelledby={heading ? listHeadingID : undefined}
+        {...restProps}
+      >
+        {children}
+      </ul>
+    </>
+  )
+}
+
+MenuList.displayName = "MenuList"

package/src/Menu/subcomponents/MenuList/index.ts

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

package/src/Menu/subcomponents/StatelessMenu/StatelessMenu.module.scss

@@ -0,0 +1,3 @@
+.buttonWrapper {
+  display: inline-block;
+}

package/src/Menu/subcomponents/StatelessMenu/StatelessMenu.tsx

@@ -0,0 +1,126 @@
+import React, { useEffect, useState, SyntheticEvent, useRef } from "react"
+import ReactDOM from "react-dom"
+import { MenuDropdown } from "../MenuDropdown"
+import styles from "./StatelessMenu.module.scss"
+
+export type StatelessMenuProps = {
+  /**
+   * Whether the menu is to be used on the left or right
+   * side of the viewport. If left, the left of the dropdown
+   * is aligned to the left of the button (and vice versa)
+   * @default "left"
+   */
+  align?: "left" | "right"
+
+  /**
+   * The width of the dropdown.
+   * "default": a fixed width of 248px
+   * "contain": contain the children's width (will be same width as children)
+   * @default "default"
+   */
+  dropdownWidth?: "default" | "contain"
+  /**
+   * @deprecated use data-testid instead
+   */
+  automationId?: string
+  "data-testid"?: string
+  dropdownId?: string
+  /**
+   * Determines when the menu should automatically hide.
+   * @default: "on"
+   */
+  autoHide?: "on" | "outside-click-only" | "off"
+  /**
+   * The content to appear inside the dropdown when it is open
+   */
+  children: React.ReactNode
+  /**
+   * Render the tooltip inside a react portal, given the CSS selector.
+   * This is typically used for instances where the menu is a descendant of an
+   * `overflow: scroll` or `overflow: hidden` element.
+   */
+  portalSelector?: string
+  isMenuVisible: boolean
+  toggleMenuDropdown: () => void
+  hideMenuDropdown: () => void
+  renderButton: (args: {
+    onClick: (e: any) => void
+    onMouseDown: (e: any) => void
+    "aria-haspopup": boolean
+    "aria-expanded": boolean
+  }) => React.ReactElement
+  onClick?: (event: SyntheticEvent) => void
+}
+
+export const StatelessMenu = ({
+  align = "left",
+  dropdownWidth = "default",
+  autoHide = "on",
+  "data-testid": dataTestId,
+  dropdownId,
+  children,
+  portalSelector,
+  isMenuVisible,
+  toggleMenuDropdown,
+  hideMenuDropdown,
+  renderButton,
+  onClick,
+}: StatelessMenuProps): JSX.Element => {
+  const [referenceElement, setReferenceElement] =
+    useState<HTMLSpanElement | null>(null)
+  const portalSelectorElementRef = useRef<Element | null>(null)
+
+  const menuButton = renderButton({
+    onClick: (e: React.MouseEvent<Element, MouseEvent>) => {
+      e.preventDefault()
+      e.stopPropagation()
+      toggleMenuDropdown()
+    },
+    onMouseDown: (e: React.MouseEvent<Element, MouseEvent>) =>
+      e.preventDefault(),
+    "aria-haspopup": true,
+    "aria-expanded": isMenuVisible,
+  })
+
+  useEffect(() => {
+    portalSelectorElementRef.current = portalSelector
+      ? document.querySelector(portalSelector)
+      : null
+  }, [portalSelector])
+
+  useEffect(() => {
+    if (portalSelector && !portalSelectorElementRef.current) {
+      // eslint-disable-next-line no-console
+      console.warn(
+        "The portal could not be created using the selector: " + portalSelector
+      )
+    }
+  }, [portalSelectorElementRef, portalSelector])
+
+  const menu = isMenuVisible ? (
+    <MenuDropdown
+      referenceElement={referenceElement}
+      align={align}
+      hideMenuDropdown={hideMenuDropdown}
+      width={dropdownWidth}
+      id={dropdownId}
+      autoHide={autoHide}
+    >
+      {children}
+    </MenuDropdown>
+  ) : null
+
+  return (
+    // eslint-disable-next-line jsx-a11y/click-events-have-key-events, jsx-a11y/no-static-element-interactions
+    <div data-testid={dataTestId} onClick={onClick}>
+      <div className={styles.buttonWrapper} ref={setReferenceElement}>
+        {menuButton}
+      </div>
+      {portalSelector && portalSelectorElementRef.current
+        ? ReactDOM.createPortal(menu, portalSelectorElementRef.current)
+        : menu}
+    </div>
+  )
+}
+
+StatelessMenu.displayName = "StatelessMenu"

package/src/Menu/subcomponents/StatelessMenu/index.ts

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