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

package/src/SplitButton/_docs/SplitButton.stories.tsx

@@ -0,0 +1,71 @@
+import { Meta, StoryObj } from "@storybook/react"
+import {
+  exampleActionButtonPropsAnchor,
+  exampleActionButtonPropsButton,
+  exampleDropdownContentEnabled,
+  exampleDropdownContentOneDisabled,
+} from "~components/Menu/_docs/examples"
+import { SplitButton } from "../index"
+
+const meta = {
+  title: "Components/Buttons/SplitButton",
+  component: SplitButton,
+  argTypes: {
+    actionButtonProps: {
+      options: ["Button", "Anchor"],
+      control: {
+        type: "select",
+        labels: {
+          Button: '{ label: "Edit Survey", onClick: action("clicked") }',
+          Anchor: '{ label: "Edit Survey", href: "//example.com" }',
+        },
+      },
+      mapping: {
+        Button: exampleActionButtonPropsButton,
+        Anchor: exampleActionButtonPropsAnchor,
+      },
+    },
+    dropdownContent: {
+      options: [
+        "MenuList - MenuItems enabled",
+        "MenuList - one MenuItem disabled",
+      ],
+      control: { type: "select" },
+      mapping: {
+        "MenuList - MenuItems enabled": exampleDropdownContentEnabled,
+        "MenuList - one MenuItem disabled": exampleDropdownContentOneDisabled,
+      },
+    },
+  },
+  args: {
+    actionButtonProps: exampleActionButtonPropsButton,
+    dropdownContent: exampleDropdownContentEnabled,
+  },
+} satisfies Meta<typeof SplitButton>
+
+export default meta
+
+type Story = StoryObj<typeof meta>
+
+export const Playground: Story = {
+  parameters: {
+    docs: {
+      canvas: {
+        sourceState: "shown",
+      },
+    },
+  },
+}
+
+export const Reversed: Story = {
+  parameters: { backgrounds: { default: "Purple 700" } },
+  args: { isReversed: true },
+}
+
+export const Disabled: Story = {
+  args: { disabled: true },
+}
+
+export const DisabledMenuItem: Story = {
+  args: { dropdownContent: "MenuList - one MenuItem disabled" },
+}

package/src/SplitButton/index.ts

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

package/src/SplitButton/subcomponents/ActionButton/ActionButton.module.scss

@@ -0,0 +1,8 @@
+@import "~@kaizen/design-tokens/sass/border";
+
+.actionButton {
+  border-start-start-radius: $border-solid-border-radius;
+  border-end-start-radius: $border-solid-border-radius;
+  border-start-end-radius: 0;
+  border-end-end-radius: 0;
+}

package/src/SplitButton/subcomponents/ActionButton/ActionButton.tsx

@@ -0,0 +1,18 @@
+import React from "react"
+import classnames from "classnames"
+import { BaseButton, BaseButtonProps } from "../BaseButton"
+import styles from "./ActionButton.module.scss"
+
+export type ActionButtonProps = Omit<BaseButtonProps, "icon">
+
+export const ActionButton = ({
+  classNameOverride,
+  ...restProps
+}: ActionButtonProps): JSX.Element => (
+  <BaseButton
+    classNameOverride={classnames(styles.actionButton, classNameOverride)}
+    {...restProps}
+  />
+)
+
+ActionButton.displayName = "ActionButton"

package/src/SplitButton/subcomponents/ActionButton/index.ts

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

package/src/SplitButton/subcomponents/BaseButton/BaseButton.module.scss

@@ -0,0 +1,85 @@
+@import "~@kaizen/design-tokens/sass/border";
+@import "~@kaizen/design-tokens/sass/color";
+@import "~@kaizen/design-tokens/sass/spacing";
+@import "~@kaizen/design-tokens/sass/typography";
+
+.baseButton {
+  border-width: $border-solid-border-width;
+  border-style: $border-solid-border-style;
+  padding: calc(#{$spacing-sm} - #{$border-borderless-border-width})
+    calc(#{$spacing-md} - #{$border-borderless-border-width});
+  font-family: $typography-button-primary-font-family;
+  font-weight: $typography-button-primary-font-weight;
+  letter-spacing: $typography-button-primary-letter-spacing;
+  font-size: $typography-button-primary-font-size;
+  line-height: $typography-button-primary-line-height;
+  text-decoration: unset;
+  cursor: default;
+  white-space: nowrap;
+
+  &:hover,
+  &:active {
+    z-index: 2;
+    text-decoration: unset; // override Murmur global styles :(
+  }
+
+  &:active {
+    transform: translateY(1px);
+  }
+
+  &:focus {
+    outline: none;
+  }
+
+  &:focus-visible {
+    z-index: 3;
+    outline-width: $border-solid-border-width;
+    outline-style: $border-solid-border-style;
+    outline-offset: 1px;
+  }
+
+  &:disabled {
+    pointer-events: none;
+    opacity: 30%;
+  }
+}
+
+.default {
+  $default-text-color: $color-purple-800;
+
+  background-color: $color-white;
+  border-color: $color-gray-500;
+  color: $default-text-color;
+
+  &:hover,
+  &:active,
+  &:focus-visible {
+    background-color: $color-gray-200;
+    border-color: $color-gray-600;
+    color: $default-text-color; // override Murmur global styles :(
+  }
+
+  &:focus-visible {
+    outline-color: $color-blue-500;
+  }
+}
+
+.isReversed {
+  $reversed-text-color: $color-white;
+
+  background-color: transparent;
+  border-color: rgba($color-white-rgb, 0.65);
+  color: $reversed-text-color;
+
+  &:hover,
+  &:active,
+  &:focus-visible {
+    background-color: rgba($color-white-rgb, 0.1);
+    border-color: $color-white;
+    color: $reversed-text-color; // override Murmur global styles :(
+  }
+
+  &:focus-visible {
+    outline-color: $color-blue-300;
+  }
+}

package/src/SplitButton/subcomponents/BaseButton/BaseButton.spec.tsx

@@ -0,0 +1,40 @@
+import React from "react"
+import { render, screen } from "@testing-library/react"
+import { BaseButton, BaseButtonProps } from "./BaseButton"
+
+const BUTTON_LABEL = "Button text"
+
+const BaseButtonWrapper = (
+  customProps?: Partial<BaseButtonProps>
+): JSX.Element => <BaseButton label={BUTTON_LABEL} {...customProps} />
+
+describe("<BaseButton />", () => {
+  it("renders button as default", () => {
+    render(<BaseButtonWrapper />)
+    expect(
+      screen.getByText(BUTTON_LABEL, { selector: "button" })
+    ).toBeInTheDocument()
+  })
+
+  it("renders anchor when href is defined", () => {
+    render(<BaseButtonWrapper href="" />)
+    expect(
+      screen.getByText(BUTTON_LABEL, { selector: "a" })
+    ).toBeInTheDocument()
+  })
+
+  it("renders button when href is defined and disabled", () => {
+    render(<BaseButtonWrapper href="" disabled />)
+    expect(
+      screen.getByText(BUTTON_LABEL, { selector: "button" })
+    ).toBeInTheDocument()
+  })
+
+  it("renders icon when provided, and converts label to aria-label", () => {
+    render(<BaseButtonWrapper icon={<svg />} />)
+    const button = screen.getByRole("button", { name: BUTTON_LABEL })
+    expect(button.getAttribute("aria-label")).toBe(BUTTON_LABEL)
+    expect(button.childElementCount).toBe(1)
+    expect(button.firstChild?.nodeName).toEqual("svg")
+  })
+})

package/src/SplitButton/subcomponents/BaseButton/BaseButton.tsx

@@ -0,0 +1,61 @@
+import React, { AnchorHTMLAttributes, ButtonHTMLAttributes } from "react"
+import classnames from "classnames"
+import { OverrideClassName } from "~types/OverrideClassName"
+import styles from "./BaseButton.module.scss"
+
+type AnchorAttributes = AnchorHTMLAttributes<HTMLAnchorElement>
+type ButtonAttributes = ButtonHTMLAttributes<HTMLButtonElement>
+type AnchorButtonAttributes = AnchorAttributes & ButtonAttributes
+
+const isAnchor = (attributes: AnchorButtonAttributes): boolean =>
+  !attributes.disabled && attributes.href !== undefined
+
+export type BaseButtonProps = {
+  label: string
+  icon?: React.SVGAttributes<SVGSymbolElement>
+  isReversed?: boolean
+} & OverrideClassName<AnchorButtonAttributes>
+
+export const BaseButton = ({
+  label,
+  icon,
+  isReversed,
+  classNameOverride,
+  ...attributes
+}: BaseButtonProps): JSX.Element => {
+  const className = classnames(
+    styles.baseButton,
+    classNameOverride,
+    isReversed ? styles.isReversed : styles.default
+  )
+
+  const contentProps = icon
+    ? {
+        children: <>{icon}</>,
+        "aria-label": label,
+      }
+    : { children: label }
+
+  const { children, ...restContentProps } = contentProps
+
+  if (isAnchor(attributes)) {
+    return (
+      <a className={className} {...restContentProps} {...attributes}>
+        {children}
+      </a>
+    )
+  }
+
+  return (
+    <button
+      type="button"
+      className={className}
+      {...restContentProps}
+      {...attributes}
+    >
+      {children}
+    </button>
+  )
+}
+
+BaseButton.displayName = "BaseButton"

package/src/SplitButton/subcomponents/BaseButton/index.ts

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

package/src/SplitButton/subcomponents/DropdownButton/DropdownButton.module.scss

@@ -0,0 +1,23 @@
+@import "~@kaizen/design-tokens/sass/border";
+@import "~@kaizen/design-tokens/sass/spacing";
+
+.dropdownButton {
+  display: inline-flex;
+  position: relative;
+  inset-inline-start: calc(-1 * #{$border-solid-border-width});
+  margin-inline-start: $border-solid-border-width;
+  padding: $spacing-12;
+  border-start-start-radius: 0;
+  border-end-start-radius: 0;
+  border-start-end-radius: $border-solid-border-radius;
+  border-end-end-radius: $border-solid-border-radius;
+  border-inline-start-width: 0;
+
+  &:hover,
+  &:active,
+  &:focus-visible {
+    inset-inline-start: calc(-1 * #{$border-solid-border-width});
+    margin-inline-start: unset;
+    border-inline-start-width: $border-solid-border-width;
+  }
+}

package/src/SplitButton/subcomponents/DropdownButton/DropdownButton.spec.tsx

@@ -0,0 +1,22 @@
+import React from "react"
+import { render, screen } from "@testing-library/react"
+import { DropdownButton, DropdownButtonProps } from "./DropdownButton"
+
+const DropdownButtonWrapper = (
+  props?: Partial<DropdownButtonProps>
+): JSX.Element => <DropdownButton {...props} />
+
+describe("<DropdownButton />", () => {
+  it("renders icon with default aria-label", () => {
+    render(<DropdownButtonWrapper />)
+    const button = screen.getByRole("button", { name: "Open menu" })
+    expect(button.getAttribute("aria-label")).toBe("Open menu")
+    expect(button.firstChild?.nodeName).toEqual("svg")
+  })
+
+  it("renders custom aria-label", () => {
+    render(<DropdownButtonWrapper aria-label="Custom aria label" />)
+    const button = screen.getByRole("button", { name: "Custom aria label" })
+    expect(button.getAttribute("aria-label")).toBe("Custom aria label")
+  })
+})

package/src/SplitButton/subcomponents/DropdownButton/DropdownButton.tsx

@@ -0,0 +1,22 @@
+import React from "react"
+import classnames from "classnames"
+import { ChevronDownIcon } from "~components/Icon"
+import { BaseButton, BaseButtonProps } from "../BaseButton"
+import styles from "./DropdownButton.module.scss"
+
+export type DropdownButtonProps = Omit<BaseButtonProps, "label" | "icon">
+
+export const DropdownButton = ({
+  classNameOverride,
+  "aria-label": ariaLabel,
+  ...restProps
+}: DropdownButtonProps): JSX.Element => (
+  <BaseButton
+    label={ariaLabel || "Open menu"}
+    icon={<ChevronDownIcon role="presentation" />}
+    classNameOverride={classnames(styles.dropdownButton, classNameOverride)}
+    {...restProps}
+  />
+)
+
+DropdownButton.displayName = "DropdownButton"

package/src/SplitButton/subcomponents/DropdownButton/index.ts

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

package/src/Table/Table.module.scss

@@ -0,0 +1,245 @@
+@import "~@kaizen/design-tokens/sass/shadow";
+@import "~@kaizen/design-tokens/sass/border";
+@import "~@kaizen/design-tokens/sass/animation";
+@import "~@kaizen/design-tokens/sass/spacing";
+@import "~@kaizen/design-tokens/sass/color";
+
+// Taken from design-tokens/sass/shadow
+// we need control of the x and y offset in this component
+$box-shadow-color-sm: rgba(53, 55, 74, 0.09);
+$row-height: 60px;
+$row-height-data-variant: 48px;
+
+@mixin anchor-reset {
+  text-decoration: none;
+  color: $color-purple-800;
+  display: block;
+
+  &:hover,
+  &:active,
+  &:focus {
+    text-decoration: none;
+  }
+
+  &.headerRowCellButtonReversed {
+    color: $color-white;
+  }
+}
+
+// Special Table-only button reset
+@mixin button-reset {
+  appearance: none;
+  background: transparent;
+  border: none;
+  font: inherit;
+  margin: 0;
+  padding: 0;
+  transition: none; // override Murmur global styles :(
+}
+
+.container {
+  width: 100%;
+  margin-bottom: $spacing-sm;
+}
+
+.headerRowCell {
+  display: flex;
+  align-items: stretch;
+  text-align: start;
+  justify-content: flex-start;
+  // The 8px usually makes the height of the header cell 40px
+  padding: 8px $spacing-md;
+  // This is required as so the tooltip will display directly above the header cell
+  position: relative;
+}
+
+.headerRowCellNoWrap {
+  .headerRowCellLabel {
+    text-overflow: ellipsis;
+    overflow: hidden;
+    white-space: nowrap;
+  }
+}
+
+.headerRowCellAlignCenter {
+  justify-content: center;
+  text-align: center;
+}
+
+.headerRowCellAlignEnd {
+  justify-content: flex-end;
+  text-align: end;
+}
+
+.headerRowCellCheckbox {
+  margin-inline-end: 10px;
+}
+
+// The .headerRowCell wrapper is required to increase the specificity, as so
+// we can override the `Tooltip` component's styling.
+.headerRowCell .headerRowCellTooltip {
+  display: flex;
+  align-items: stretch;
+}
+
+// overflow has to be set at this level as well as on the heading for some reason ¯\_(ツ)_/¯
+.headerRowCell.headerRowCellNoWrap .headerRowCellTooltip {
+  overflow: hidden;
+}
+
+.headerRowCellButton {
+  @include button-reset;
+  @include anchor-reset;
+}
+
+.headerRowCellButton,
+.headerRowCellNoButton {
+  display: flex;
+  align-items: stretch;
+  width: 100%;
+  // Ensures that the 100% doesn't go outside of the `headerRowCell` width
+  box-sizing: border-box;
+}
+
+.headerRowCellLabelAndIcons {
+  display: flex;
+  align-items: center;
+  flex: 1 1 100%;
+  width: 100%;
+}
+
+.headerRowCellTooltipIcon {
+  color: $color-blue-500;
+  margin-inline-end: $spacing-xs;
+}
+
+.headerRowCellIcon {
+  color: rgba($color-purple-800-rgb, 0.7);
+  height: 20px;
+
+  .headerRowCellActive & {
+    color: $color-purple-800;
+  }
+}
+
+.card {
+  @include button-reset;
+
+  background: $color-white;
+  border: solid 1px rgba($color-purple-700-rgb, 0.1);
+  transition:
+    box-shadow $animation-duration-rapid,
+    border-color $animation-duration-rapid,
+    margin $animation-duration-rapid,
+    padding $animation-duration-rapid,
+    width $animation-duration-rapid;
+
+  // This is an optical hack to stop the card shadow from overlapping over
+  // the proceeding cards
+  box-shadow: 0 4px 6px rgba(53, 55, 74, 0.04);
+
+  // These css properties are required for when the rows are anchor elements
+  @include anchor-reset;
+
+  &:not(:first-child) {
+    margin-top: -1px;
+  }
+
+  &:last-child {
+    border-bottom-left-radius: $border-solid-border-radius;
+    border-bottom-right-radius: $border-solid-border-radius;
+  }
+
+  &:hover {
+    will-change: box-shadow, border-color, margin, padding, width;
+  }
+
+  &.well {
+    margin-top: $spacing-sm;
+  }
+}
+
+// target the first child card when there is a heading present
+[role="rowgroup"] + .card {
+  border-top-left-radius: $border-solid-border-radius;
+  border-top-right-radius: $border-solid-border-radius;
+  box-shadow: $shadow-small-box-shadow;
+}
+
+.card:first-child {
+  border-top-left-radius: $border-solid-border-radius;
+  border-top-right-radius: $border-solid-border-radius;
+  box-shadow: $shadow-small-box-shadow;
+}
+
+.row {
+  display: flex;
+}
+
+.well {
+  border-color: $border-borderless-border-color;
+  box-shadow: none;
+  border-radius: $border-solid-border-radius;
+  background-color: $color-gray-300;
+  margin-bottom: $spacing-sm;
+}
+
+.popout {
+  box-shadow: $shadow-large-box-shadow;
+}
+
+.expanded {
+  position: relative;
+  z-index: 1;
+  margin-left: calc(#{$spacing-sm} * -1);
+  margin-right: calc(#{$spacing-sm} * -1);
+  padding-left: $spacing-sm;
+  padding-right: $spacing-sm;
+}
+
+.hasHoverState {
+  width: 100%;
+  text-align: left;
+  cursor: pointer;
+
+  &.expanded {
+    width: calc(100% + #{$spacing-md});
+  }
+
+  &:focus,
+  &:hover {
+    background-color: $color-gray-100;
+  }
+}
+
+.rowCell {
+  // These css properties are required for when the cells are anchor elements
+  @include anchor-reset;
+
+  min-height: $row-height;
+  padding: 0 $spacing-md;
+  display: flex;
+  align-items: center;
+
+  .defaultSpacing & {
+    padding: $spacing-sm $spacing-md;
+  }
+
+  .dataVariant & {
+    min-height: $row-height-data-variant;
+  }
+}
+
+.rowCellAlignCenter {
+  justify-content: center;
+  text-align: center;
+}
+
+.rowCellAlignEnd {
+  justify-content: flex-end;
+  text-align: right;
+}
+
+.whiteText {
+  color: $color-white;
+}

package/src/Table/Table.spec.tsx

@@ -0,0 +1,70 @@
+import React from "react"
+import { render } from "@testing-library/react"
+import {
+  TableCard,
+  TableContainer,
+  TableHeader,
+  TableHeaderRowCell,
+  TableRow,
+  TableRowCell,
+} from "./Table"
+
+// eslint-disable-next-line @typescript-eslint/no-shadow
+enum TestId {
+  tableContainer = "table-container",
+  tableHeader = "table-header",
+  tableHeaderRow = "table-header-row",
+  tableHeaderRowCell = "table-header-row-cell",
+  tableCard = "table-card",
+  tableRow = "table-row",
+  tableRowCell = "table-row-cell",
+}
+
+/**
+ * Simple Wrapper with absolute bare basics.
+ * Although we use data-automation-id in practice,
+ * I have opted with data-testid for quick validation.
+ * I will leave it up to team DS if they want to
+ * change the config if they wish.
+ *
+ * @see https://testing-library.com/docs/dom-testing-library/api-helpers#custom-queries
+ */
+const Wrapper = (): JSX.Element => (
+  <TableContainer data-testid={TestId.tableContainer}>
+    <TableHeader data-testid={TestId.tableHeader}>
+      <TableRow data-testid={TestId.tableHeaderRow}>
+        <TableHeaderRowCell
+          checkable={true}
+          checkedStatus="on"
+          onCheck={(): void => undefined}
+          onClick={(): void => undefined}
+          labelText="Resource name"
+          width={12 / 12}
+          data-testid={TestId.tableHeaderRowCell}
+        />
+      </TableRow>
+    </TableHeader>
+    <TableCard
+      data-testid={TestId.tableCard}
+      onClick={(): void => alert("clicked!")}
+    >
+      <TableRow data-testid={TestId.tableRow}>
+        <TableRowCell width={12 / 12} data-testid={TestId.tableRowCell}>
+          <div></div>
+        </TableRowCell>
+      </TableRow>
+    </TableCard>
+  </TableContainer>
+)
+
+describe("<Table />", () => {
+  describe("Custom HTML props", () => {
+    for (const [key, value] of Object.entries(TestId)) {
+      it(`${key} accepts custom data-* attributes`, () => {
+        const { getByTestId } = render(<Wrapper />)
+
+        expect(getByTestId(value)).toBeTruthy()
+      })
+    }
+  })
+})