@kaizen/components 1.34.0 → 1.35.1

package/src/LikertScaleLegacy/LikertScaleLegacy.module.scss

@@ -0,0 +1,369 @@
+@import "~@kaizen/design-tokens/sass/border";
+@import "~@kaizen/design-tokens/sass/color";
+@import "~@kaizen/design-tokens/sass/spacing";
+
+/* stylelint-disable no-descending-specificity */
+@mixin respond-to($media) {
+  @if $media == print {
+    @media only print {
+      @content;
+    }
+  } @else if $media == iphone {
+    @media only screen and (max-width: 767px) {
+      @content;
+    }
+  } @else if $media == ipad {
+    @media only screen and (max-width: 959px) {
+      @content;
+    }
+  }
+}
+
+$block-height: 35px;
+$desktop-rater-width: 220px;
+$desktop-rater-height: 63px;
+
+$first: $color-yellow-300;
+$second: $color-yellow-400;
+$third: $color-orange-400;
+$fourth: $color-orange-500;
+$fifth: $color-red-500;
+
+@mixin pop {
+  -webkit-animation: pop cubic-bezier(0, 0.94, 0.32, 1) 0.7s 1;
+}
+
+@mixin right-likert-item($height) {
+  border-top-right-radius: $height;
+  border-bottom-right-radius: $height;
+}
+
+@mixin left-likert-item($height) {
+  border-top-left-radius: $height;
+  border-bottom-left-radius: $height;
+}
+
+@mixin fill($height) {
+  &:first-child .likertItemFill {
+    @include left-likert-item($height);
+
+    [dir="rtl"] & {
+      border-radius: 0;
+
+      @include right-likert-item($height);
+    }
+
+    &::after {
+      @include left-likert-item($height);
+
+      [dir="rtl"] & {
+        border-radius: 0;
+
+        @include right-likert-item($height);
+      }
+    }
+  }
+
+  &:last-child .likertItemFill {
+    @include right-likert-item($height);
+
+    [dir="rtl"] & {
+      border-radius: 0;
+
+      @include left-likert-item($height);
+    }
+
+    &::after {
+      @include right-likert-item($height);
+
+      [dir="rtl"] & {
+        border-radius: 0;
+
+        @include left-likert-item($height);
+      }
+    }
+  }
+}
+
+@keyframes pop {
+  0% {
+    opacity: 50%;
+    -webkit-transform: scale(1);
+  }
+
+  100% {
+    opacity: 0%;
+    -webkit-transform: scale(1.78);
+  }
+}
+
+.container {
+  width: $desktop-rater-width;
+  position: relative;
+  box-sizing: border-box;
+
+  @include respond-to(iphone) {
+    width: 258px;
+    position: static;
+  }
+
+  &.rated .likertItem.unselected .likertItemFill {
+    transition: background 0.1s;
+  }
+
+  &.reversed.rated .likertItem.unselected .likertItemFill {
+    background-color: transparent;
+    border-color: rgba($color-white-rgb, 0.65);
+  }
+
+  :where(.likertItem4, .likertItem5) .check {
+    color: white;
+  }
+
+  :is(.likertItem4.suggested, .likertItem5.suggested) .check {
+    color: white;
+  }
+}
+
+.likertItem:focus,
+.likertItemFill:focus {
+  outline: none;
+}
+
+.likertItem:focus-visible .likertItemFill {
+  outline-offset: 1px;
+  outline: $color-blue-500 $border-focus-ring-border-style
+    $border-focus-ring-border-width;
+}
+
+.reversed .likertItem:focus-visible .likertItemFill {
+  outline-color: $color-blue-300;
+}
+
+.itemContainer {
+  width: 100%;
+  white-space: nowrap;
+  display: inline-block;
+  height: $block-height + 2px;
+  font-size: 0;
+}
+
+.legend {
+  text-align: center;
+  position: absolute;
+  top: calc(-1 * #{$spacing-md});
+  left: 0;
+  right: 0;
+
+  @include respond-to(iphone) {
+    position: initial;
+    top: 0;
+  }
+}
+
+.likertItem {
+  margin-right: 2px;
+  margin-left: 2px;
+
+  &[dir="rtl"],
+  [dir="rtl"] & {
+    &:first-child {
+      margin-left: 2px;
+    }
+
+    &:last-child {
+      margin-right: 2px;
+    }
+  }
+
+  @include fill($block-height);
+
+  font-size: 1px;
+  line-height: 1;
+  padding: 0;
+  overflow-x: visible;
+  display: inline-block;
+  width: 18.5%; // 5 columns
+  position: relative;
+
+  &:first-child {
+    margin-right: 2px;
+    margin-left: 0;
+  }
+
+  &:last-child {
+    margin-left: 2px;
+    margin-right: 0;
+  }
+
+  // Hack to bridge the gaps between items so mouse always hovers on something
+  &::before,
+  &::after {
+    content: "";
+    position: absolute;
+    top: 0;
+    right: 100%;
+    width: 2px;
+    height: 100%;
+  }
+
+  &::after {
+    right: auto;
+    left: 100%;
+  }
+
+  &.suggested,
+  &.selected {
+    .field1 {
+      background-color: $first;
+
+      &::after {
+        background-color: $first;
+      }
+    }
+
+    .field2 {
+      background-color: $second;
+
+      &::after {
+        background-color: $second;
+      }
+    }
+
+    .field3 {
+      background-color: $third;
+
+      &::after {
+        background-color: $third;
+      }
+    }
+
+    .field4 {
+      background-color: $fourth;
+
+      &::after {
+        background-color: $fourth;
+      }
+    }
+
+    .field5 {
+      background-color: $fifth;
+
+      &::after {
+        background-color: $fifth;
+      }
+    }
+  }
+}
+
+.likertItemFill {
+  transition:
+    background 0.1s,
+    border-color 0.1s;
+  height: $block-height;
+  border: $border-solid-border-width $border-solid-border-style $color-gray-500;
+
+  &:hover {
+    transition:
+      background 0s,
+      border-color 0s;
+  }
+
+  &::after {
+    content: " ";
+    display: block;
+    height: 100%;
+    width: 100%;
+    pointer-events: none;
+  }
+
+  &.pop::after {
+    @include pop;
+  }
+}
+
+.reversed .likertItemFill {
+  border-color: rgba($color-white-rgb, 0.65);
+}
+
+.check {
+  display: block;
+  position: absolute;
+  top: 50%;
+  left: 50%;
+  margin: -10px 0 0 -10px;
+  color: black;
+
+  .likertItem1 & {
+    margin-left: -9px;
+
+    [dir="rtl"] & {
+      margin-left: -11px;
+    }
+  }
+
+  .likertItem5 & {
+    margin-left: -12px;
+
+    [dir="rtl"] & {
+      margin-left: -9px;
+    }
+  }
+}
+
+.hovered :where(.likertItem4, .likertItem5) .check {
+  color: black;
+}
+
+.hovered.reversed .itemContainer > :not(.suggested.likertItem) .check {
+  color: white;
+}
+
+@media only screen and (max-width: 767px) {
+  $block-height: 48px;
+
+  .container {
+    min-width: 258px;
+  }
+
+  .itemContainer {
+    height: $block-height + 2px;
+  }
+
+  .likertItem {
+    @include fill($block-height);
+  }
+
+  .likertItemFill {
+    height: $block-height;
+  }
+}
+
+@media print {
+  .legend {
+    display: none;
+  }
+
+  .container {
+    top: 1em;
+    right: 2em;
+    width: 150px;
+
+    .likertItem {
+      .likertItemFill {
+        height: 25px;
+        background: white;
+        border: 1px solid #d7d8d8;
+      }
+
+      &:first-child,
+      &:last-child {
+        .likertItemFill {
+          background: white;
+          border-width: 2px;
+        }
+      }
+    }
+  }
+}
+/* stylelint-enable no-descending-specificity */

package/src/LikertScaleLegacy/LikertScaleLegacy.spec.tsx

@@ -0,0 +1,63 @@
+import React from "react"
+import { render, screen, waitFor, act } from "@testing-library/react"
+import { LikertScaleLegacy, LikertScaleProps } from "./LikertScaleLegacy"
+import { Scale } from "./types"
+
+const scale: Scale = [
+  {
+    value: -1,
+    label: "Not rated",
+  },
+  {
+    value: 1,
+    label: "Strong Disagree",
+  },
+  {
+    value: 2,
+    label: "Disagree",
+  },
+  {
+    value: 3,
+    label: "Neither agree or disagree",
+  },
+  {
+    value: 4,
+    label: "Agree",
+  },
+  {
+    value: 5,
+    label: "Strongly agree",
+  },
+]
+
+const LikertScaleLegacyWrapper = (
+  props: Partial<LikertScaleProps>
+): JSX.Element => (
+  <LikertScaleLegacy
+    scale={scale}
+    labelId="test__likert-scale"
+    selectedItem={null}
+    onSelect={(): void => undefined}
+    {...props}
+  />
+)
+
+describe("<LikertScaleLegacy />", () => {
+  describe("Keyboard navigation", () => {
+    it("shows the correct legend when using tab to go through the scale", async () => {
+      render(<LikertScaleLegacyWrapper data-testid="ID" />)
+      const scaleSteps = screen.getAllByRole("radio")
+      const legend = screen.getByTestId("ID-legend")
+
+      expect(legend).toHaveTextContent("Not rated")
+
+      act(() => {
+        scaleSteps[2].focus()
+      })
+
+      await waitFor(() => {
+        expect(legend).toHaveTextContent("Neither agree or disagree")
+      })
+    })
+  })
+})

package/src/LikertScaleLegacy/LikertScaleLegacy.tsx

@@ -0,0 +1,202 @@
+import React, { createRef, useState } from "react"
+import classnames from "classnames"
+import { FieldMessage } from "~components/FieldMessage"
+import { CheckIcon } from "~components/Icon"
+import { Text } from "~components/Text"
+import { ScaleValue, Scale, ScaleItem } from "./types"
+import determineSelectionFromKeyPress from "./utils/determineSelectionFromKeyPress"
+import styles from "./LikertScaleLegacy.module.scss"
+
+type ItemRefs = Array<{
+  value: ScaleValue
+  ref: { current: null | HTMLDivElement }
+}>
+
+export type LikertScaleProps = {
+  labelId: string
+  scale: Scale
+  selectedItem: ScaleItem | null
+  /**
+   * @deprecated Please use data-testid instead
+   */
+  automationId?: string
+  "data-testid"?: string
+  reversed?: boolean
+  validationMessage?: string
+  status?: "default" | "error"
+  onSelect: (value: ScaleItem | null) => void
+}
+
+const SelectedItemIcon = (): JSX.Element => (
+  <CheckIcon role="presentation" classNameOverride={styles.check} />
+)
+
+/**
+ * {@link https://cultureamp.atlassian.net/wiki/spaces/DesignSystem/pages/3082060201/Likert+Scale Guidance} |
+ * {@link https://cultureamp.design/?path=/docs/components-likertscalelegacy--docs Storybook}
+ */
+export const LikertScaleLegacy = ({
+  scale,
+  selectedItem,
+  reversed,
+  "data-testid": dataTestId,
+  onSelect,
+  validationMessage,
+  status,
+  labelId,
+}: LikertScaleProps): JSX.Element => {
+  const [hoveredItem, setHoveredItem] = useState<ScaleItem | null>(null)
+  const itemRefs: ItemRefs = scale.map(s => ({
+    value: s.value,
+    ref: createRef<HTMLDivElement>(),
+  }))
+
+  const handleRadioClick = (item: ScaleItem): void => {
+    // Is this a click on the item that is currently selected?
+    const isClickOnSelectedItem = selectedItem?.value === item.value
+
+    // Grab "Not rated" state item from the scale, its value is -1
+    const notYetRated = scale.find(s => s.value === -1) || null
+
+    // Clear or set new selection
+    const newItem = isClickOnSelectedItem ? notYetRated : item
+
+    onSelect(newItem)
+    setHoveredItem(null)
+  }
+
+  /**
+   * Because the radios have been built with divs, we need to add the keyboard functionality manually
+   */
+  const handleKeyDown = (
+    event: React.KeyboardEvent<HTMLDivElement>,
+    focusedItem: ScaleItem
+  ): void => {
+    const newPosition = determineSelectionFromKeyPress(
+      event.keyCode,
+      selectedItem,
+      focusedItem
+    )
+    if (newPosition) {
+      event.preventDefault()
+
+      onSelect(scale.find(s => s.value === newPosition) || null)
+
+      // Update focus
+      const itemRef = itemRefs.find(item => item.value === newPosition)
+      itemRef && itemRef.ref.current && itemRef.ref.current.focus()
+    }
+  }
+
+  const legend = hoveredItem?.label || selectedItem?.label || "Not rated"
+
+  const shouldDisplayValidationMessage =
+    status !== "default" && validationMessage !== undefined
+
+  const validationMessageId = shouldDisplayValidationMessage
+    ? `${labelId}-field-validation-message`
+    : undefined
+
+  const isRated = selectedItem && selectedItem.value > 0
+
+  return (
+    <div
+      className={classnames(
+        styles.container,
+        isRated && styles.rated,
+        reversed && [styles.reversed],
+        hoveredItem !== null && styles.hovered
+      )}
+      aria-labelledby={labelId}
+      role="radiogroup"
+      tabIndex={-1}
+      aria-describedby={validationMessageId}
+      data-testid={dataTestId}
+    >
+      <div
+        className={styles.legend}
+        data-testid={dataTestId && `${dataTestId}-legend`}
+      >
+        <Text variant="small" color={reversed ? "white" : "dark"}>
+          {legend}
+        </Text>
+      </div>
+      <div
+        className={classnames(
+          styles.itemContainer,
+          isRated && styles.rated,
+          reversed && styles.reversed
+        )}
+      >
+        {scale.map((item: ScaleItem) => {
+          if (item.value <= 0) {
+            return
+          }
+
+          const isSelectedItem = selectedItem?.value === item.value
+          const itemRef = itemRefs.find(i => item.value === i.value)
+
+          // Make control tabbable
+          let tabIndex = 0
+          // Unless.. there's an item selected and it's not this one
+          if (
+            selectedItem &&
+            selectedItem.value > 0 &&
+            selectedItem.value !== item.value
+          ) {
+            tabIndex = -1
+          }
+
+          const isSelected =
+            selectedItem && item.value <= selectedItem?.value && !hoveredItem
+          const isSuggested = hoveredItem && hoveredItem.value >= item.value
+          const isUnselected = selectedItem && selectedItem.value < item.value
+
+          return (
+            <div
+              className={classnames(
+                styles.likertItem,
+                styles[`likertItem${item.value}`],
+                isSelected && styles.selected,
+                isSuggested && styles.suggested,
+                isUnselected && styles.unselected
+              )}
+              key={item.value}
+              data-testid={dataTestId && `${dataTestId}-item-${item.value}`}
+              onClick={(): void => handleRadioClick(item)}
+              onMouseEnter={(): void => setHoveredItem(item)}
+              onMouseLeave={(): void => setHoveredItem(null)}
+              onKeyDown={(event): void => handleKeyDown(event, item)}
+              onFocus={(): void => setHoveredItem(item)}
+              onBlur={(): void => setHoveredItem(null)}
+              role="radio"
+              aria-label={item.label}
+              aria-checked={isSelectedItem}
+              aria-posinset={item.value}
+              aria-setsize={5}
+              tabIndex={tabIndex}
+              ref={itemRef && itemRef.ref}
+            >
+              <div
+                className={classnames(
+                  styles.likertItemFill,
+                  styles[`field${item.value}`],
+                  isSelectedItem && styles.pop
+                )}
+              />
+              {isSelectedItem ? <SelectedItemIcon /> : null}
+            </div>
+          )
+        })}
+      </div>
+      {shouldDisplayValidationMessage && (
+        <FieldMessage
+          id={validationMessageId}
+          message={validationMessage}
+          status={status}
+          reversed={reversed}
+        />
+      )}
+    </div>
+  )
+}

package/src/LikertScaleLegacy/_docs/LikertScaleLegacy.mdx

@@ -0,0 +1,28 @@
+import { Canvas, Controls, Meta } from "@storybook/blocks"
+import { ResourceLinks, KaioNotification, Installation } from "~storybook/components"
+import * as LikertScaleLegacyStories from "./LikertScaleLegacy.stories"
+
+<Meta of={LikertScaleLegacyStories} />
+
+# LikertScaleLegacy
+
+<ResourceLinks
+  sourceCode="https://github.com/cultureamp/kaizen-design-system/tree/main/packages/components/src/LikertScaleLegacy"
+  figma="https://www.figma.com/file/ZRfnoNUXbGZv4eVWLbF4Az/%EF%B8%8F%F0%9F%96%BC%EF%B8%8F-Component-Gallery?node-id=9%3A39905&t=P1w10jr2cpPuaayw-1"
+  designGuidelines="https://cultureamp.atlassian.net/wiki/spaces/DesignSystem/pages/3082060201/Likert+Scale"
+  className="!mb-8"
+/>
+
+<KaioNotification />
+
+<Installation
+  installCommand="yarn add @kaizen/components"
+  importStatement='import { LikertScaleLegacy } from "@kaizen/components"'
+/>
+
+## Overview
+
+Likert scale radio buttons let people select one option in a Likert scale ranging from strongly disagree to strongly agree.
+
+<Canvas of={LikertScaleLegacyStories.Playground} />
+<Controls of={LikertScaleLegacyStories.Playground} />