@kaizen/components 1.68.5 → 1.68.7

package/src/Popover/Popover.tsx

@@ -1,11 +1,11 @@
-import React, { HTMLAttributes, useMemo, useState } from "react"
-import classnames from "classnames"
-import { usePopper } from "react-popper"
-import { Heading } from "~components/Heading"
-import { Text } from "~components/Text"
-import { Icon } from "~components/__future__/Icon"
-import { OverrideClassName } from "~components/types/OverrideClassName"
-import { Placement, PopoverSize, PopoverVariant } from "./types"
+import React, { HTMLAttributes, useMemo, useState } from 'react'
+import classnames from 'classnames'
+import { usePopper } from 'react-popper'
+import { Heading } from '~components/Heading'
+import { Text } from '~components/Text'
+import { Icon } from '~components/__future__/Icon'
+import { OverrideClassName } from '~components/types/OverrideClassName'
+import { Placement, PopoverSize, PopoverVariant } from './types'
 import {
   mapArrowVariantToClass,
   mapLineVariant,
@@ -13,8 +13,8 @@ import {
   mapVariantToBoxClass,
   mapVariantToIcon,
   mapVariantToIconClass,
-} from "./utils/classMappers"
-import styles from "./Popover.module.scss"
+} from './utils/classMappers'
+import styles from './Popover.module.scss'
 
 export type PopoverProps = {
   children: React.ReactNode
@@ -45,9 +45,9 @@ const arrowHeight = 7
  */
 export const Popover = ({
   children,
-  variant = "default",
-  placement = "top",
-  size = "small",
+  variant = 'default',
+  placement = 'top',
+  size = 'small',
   heading,
   dismissible = false,
   onClose,
@@ -57,76 +57,61 @@ export const Popover = ({
   classNameOverride,
   ...restProps
 }: PopoverProps): JSX.Element => {
-  const [popperElement, setPopperElement] = useState<HTMLDivElement | null>(
-    null
-  )
+  const [popperElement, setPopperElement] = useState<HTMLDivElement | null>(null)
   const [arrowElement, setArrowElement] = useState<HTMLDivElement | null>(null)
-  const { styles: popperStyles, attributes } = usePopper(
-    referenceElement,
-    popperElement,
-    {
-      modifiers: [
-        {
-          name: "arrow",
-          options: {
-            element: arrowElement,
-            // Ensures that the arrow doesn't go too far to the left or right
-            // of the tooltip.
-            padding: arrowWidth / 2 + 10,
-          },
+  const { styles: popperStyles, attributes } = usePopper(referenceElement, popperElement, {
+    modifiers: [
+      {
+        name: 'arrow',
+        options: {
+          element: arrowElement,
+          // Ensures that the arrow doesn't go too far to the left or right
+          // of the tooltip.
+          padding: arrowWidth / 2 + 10,
         },
-        {
-          name: "offset",
-          options: {
-            offset: [0, arrowHeight + 6],
-          },
+      },
+      {
+        name: 'offset',
+        options: {
+          offset: [0, arrowHeight + 6],
         },
-        {
-          name: "preventOverflow",
-          options: {
-            // Makes sure that the popover isn't flush up against the end of the
-            // viewport
-            padding: 8,
-            altAxis: true,
-            altBoundary: true,
-            tetherOffset: 50,
-          },
+      },
+      {
+        name: 'preventOverflow',
+        options: {
+          // Makes sure that the popover isn't flush up against the end of the
+          // viewport
+          padding: 8,
+          altAxis: true,
+          altBoundary: true,
+          tetherOffset: 50,
         },
-        {
-          name: "flip",
-          options: {
-            padding: 8,
-            altBoundary: true,
-            fallbackPlacements: ["left", "top", "bottom", "right"],
-          },
+      },
+      {
+        name: 'flip',
+        options: {
+          padding: 8,
+          altBoundary: true,
+          fallbackPlacements: ['left', 'top', 'bottom', 'right'],
         },
-      ],
-      placement,
-    }
-  )
+      },
+    ],
+    placement,
+  })
 
   return (
     <div
       ref={setPopperElement}
       style={popperStyles.popper}
       {...attributes.popper}
-      className={classnames(
-        styles.root,
-        mapSizeToClass(size),
-        classNameOverride
-      )}
+      className={classnames(styles.root, mapSizeToClass(size), classNameOverride)}
       {...restProps}
     >
       <div className={mapVariantToBoxClass(variant)}>
         {heading && (
           <div className={styles.header}>
-            {variant !== "default" && (
-              <span
-                className={classnames(
-                  styles.icon,
-                  mapVariantToIconClass(variant)
-                )}
-              >
+            {variant !== 'default' && (
+              <span className={classnames(styles.icon, mapVariantToIconClass(variant))}>
                 {customIcon ?? mapVariantToIcon(variant)}
               </span>
             )}
@@ -134,12 +119,7 @@ export const Popover = ({
               {heading}
             </Heading>
             {dismissible && (
-              <button
-                className={styles.close}
-                onClick={onClose}
-                type="button"
-                aria-label="close"
-              >
+              <button className={styles.close} onClick={onClose} type="button" aria-label="close">
                 <Icon name="close" isPresentational isFilled />
               </button>
             )}
@@ -148,30 +128,21 @@ export const Popover = ({
         <Text
           tag="div"
           variant="small"
-          classNameOverride={classnames(
-            styles.container,
-            mapLineVariant(singleLine)
-          )}
+          classNameOverride={classnames(styles.container, mapLineVariant(singleLine))}
         >
           {children}
         </Text>
       </div>
-      <div
-        ref={setArrowElement}
-        style={popperStyles.arrow}
-        className={styles.arrowWrapper}
-      >
-        <div
-          className={classnames(styles.arrow, mapArrowVariantToClass(variant))}
-        />
+      <div ref={setArrowElement} style={popperStyles.arrow} className={styles.arrowWrapper}>
+        <div className={classnames(styles.arrow, mapArrowVariantToClass(variant))} />
       </div>
     </div>
   )
 }
 
-Popover.displayName = "Popover"
+Popover.displayName = 'Popover'
 
-type PopoverPropsWithoutRef = Omit<PopoverProps, "referenceElement">
+type PopoverPropsWithoutRef = Omit<PopoverProps, 'referenceElement'>
 
 /**
  * How to use:
@@ -196,9 +167,7 @@ export const usePopover = (): [
   (element: HTMLElement | null) => void,
   (props: PopoverPropsWithoutRef) => JSX.Element | null,
 ] => {
-  const [referenceElement, setReferenceElement] = useState<HTMLElement | null>(
-    null
-  )
+  const [referenceElement, setReferenceElement] = useState<HTMLElement | null>(null)
 
   // I guess the problem with this pattern, is that every time referenceElement
   // changes, a brand new component is generated, which would be bad for memoization.
@@ -207,10 +176,8 @@ export const usePopover = (): [
   const PopoverWithRef = useMemo(
     // eslint-disable-next-line react/display-name
     () => (props: PopoverPropsWithoutRef) =>
-      referenceElement ? (
-        <Popover {...props} referenceElement={referenceElement} />
-      ) : null,
-    [referenceElement]
+      referenceElement ? <Popover {...props} referenceElement={referenceElement} /> : null,
+    [referenceElement],
   )
 
   return [setReferenceElement, PopoverWithRef]

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

@@ -1,14 +1,11 @@
-import React from "react"
-import { Meta } from "@storybook/react"
-import {
-  StickerSheet,
-  StickerSheetStory,
-} from "~storybook/components/StickerSheet"
-import { PopoverProps, usePopover } from "../index"
-import { popoverPlacements } from "../types"
+import React from 'react'
+import { Meta } from '@storybook/react'
+import { StickerSheet, StickerSheetStory } from '~storybook/components/StickerSheet'
+import { PopoverProps, usePopover } from '../index'
+import { popoverPlacements } from '../types'
 
 export default {
-  title: "Components/Popover",
+  title: 'Components/Popover',
   parameters: {
     chromatic: { disable: false, diffThreshold: 1 },
     controls: { disable: true },
@@ -16,7 +13,7 @@ export default {
 } satisfies Meta
 
 const PopoverWrapper = (
-  props: Omit<PopoverProps, "children" | "referenceElement">
+  props: Omit<PopoverProps, 'children' | 'referenceElement'>,
 ): JSX.Element => {
   const [referenceElementRef, Popover] = usePopover()
 
@@ -31,17 +28,17 @@ const PopoverWrapper = (
 }
 
 const cellStyle = {
-  display: "grid",
-  placeContent: "center",
-  width: "220px",
-  height: "250px",
+  display: 'grid',
+  placeContent: 'center',
+  width: '220px',
+  height: '250px',
 }
 
 const StickerSheetTemplate: StickerSheetStory = {
   render: ({ isReversed }) => (
     <StickerSheet
       isReversed={isReversed}
-      headers={["Default", "Positive", "Informative", "Negative", "Cautionary"]}
+      headers={['Default', 'Positive', 'Informative', 'Negative', 'Cautionary']}
       className="min-w-fit"
     >
       <StickerSheet.Row header="Variants (deprecated)">
@@ -62,7 +59,7 @@ const StickerSheetTemplate: StickerSheetStory = {
         </StickerSheet.Cell>
       </StickerSheet.Row>
 
-      {popoverPlacements.map(placement => (
+      {popoverPlacements.map((placement) => (
         <StickerSheet.Row key={placement} header={placement}>
           <StickerSheet.Cell style={cellStyle}>
             <PopoverWrapper placement={placement} />
@@ -75,13 +72,13 @@ const StickerSheetTemplate: StickerSheetStory = {
 
 export const StickerSheetDefault: StickerSheetStory = {
   ...StickerSheetTemplate,
-  name: "Sticker Sheet (Default)",
+  name: 'Sticker Sheet (Default)',
 }
 
 export const StickerSheetRTL: StickerSheetStory = {
   ...StickerSheetTemplate,
-  name: "Sticker Sheet (RTL)",
+  name: 'Sticker Sheet (RTL)',
   parameters: {
-    textDirection: "rtl",
+    textDirection: 'rtl',
   },
 }

package/src/Popover/_docs/Popover.stories.tsx

@@ -1,9 +1,9 @@
-import React from "react"
-import { Meta, StoryObj } from "@storybook/react"
-import { Popover as PopoverComponent, usePopover } from "../index"
+import React from 'react'
+import { Meta, StoryObj } from '@storybook/react'
+import { Popover as PopoverComponent, usePopover } from '../index'
 
 const meta = {
-  title: "Components/Popover",
+  title: 'Components/Popover',
   component: PopoverComponent,
   args: {
     children: undefined,
@@ -20,21 +20,16 @@ export default meta
 type Story = StoryObj<typeof meta>
 
 const PopoverTemplate: Story = {
-  render: args => {
+  render: (args) => {
     const [referenceElementRef, Popover] = usePopover()
 
     return (
       <div className="text-center relative">
-        <button
-          type="button"
-          className="inline-block mt-112"
-          ref={referenceElementRef}
-        >
+        <button type="button" className="inline-block mt-112" ref={referenceElementRef}>
           Pop
         </button>
         <Popover {...args}>
-          Popover body that explains something useful.{" "}
-          <a href="/">Optional link</a>
+          Popover body that explains something useful. <a href="/">Optional link</a>
         </Popover>
       </div>
     )
@@ -44,7 +39,7 @@ const PopoverTemplate: Story = {
 export const Playground: Story = {
   ...PopoverTemplate,
   decorators: [
-    Story => (
+    (Story) => (
       <div className="h-[300px]">
         <Story />
       </div>

package/src/Popover/index.ts

@@ -1 +1 @@
-export * from "./Popover"
+export * from './Popover'

package/src/Popover/types.ts

@@ -1,21 +1,16 @@
-export type PopoverVariant =
-  | "default"
-  | "informative"
-  | "positive"
-  | "negative"
-  | "cautionary"
+export type PopoverVariant = 'default' | 'informative' | 'positive' | 'negative' | 'cautionary'
 
-export type PopoverSize = "small" | "large"
+export type PopoverSize = 'small' | 'large'
 
 export const popoverPlacements = [
-  "top",
-  "bottom",
-  "top-start",
-  "top-end",
-  "bottom-start",
-  "bottom-end",
-  "left",
-  "right",
+  'top',
+  'bottom',
+  'top-start',
+  'top-end',
+  'bottom-start',
+  'bottom-end',
+  'left',
+  'right',
 ] as const
 
 export type Placement = (typeof popoverPlacements)[number]

package/src/Popover/utils/classMappers.tsx

@@ -1,34 +1,32 @@
-import React from "react"
-import { Icon } from "~components/__future__/Icon"
-import styles from "../Popover.module.scss"
-import { PopoverVariant, PopoverSize } from "../types"
+import React from 'react'
+import { Icon } from '~components/__future__/Icon'
+import styles from '../Popover.module.scss'
+import { PopoverVariant, PopoverSize } from '../types'
 
 export const mapVariantToBoxClass = (variant: PopoverVariant): string => {
   switch (variant) {
-    case "informative":
+    case 'informative':
       return styles.informativeBox
-    case "positive":
+    case 'positive':
       return styles.positiveBox
-    case "negative":
+    case 'negative':
       return styles.negativeBox
-    case "cautionary":
+    case 'cautionary':
       return styles.cautionaryBox
     default:
       return styles.defaultBox
   }
 }
 
-export const mapVariantToIconClass = (
-  variant: PopoverVariant
-): string | undefined => {
+export const mapVariantToIconClass = (variant: PopoverVariant): string | undefined => {
   switch (variant) {
-    case "informative":
+    case 'informative':
       return styles.informativeIcon
-    case "positive":
+    case 'positive':
       return styles.positiveIcon
-    case "negative":
+    case 'negative':
       return styles.negativeIcon
-    case "cautionary":
+    case 'cautionary':
       return styles.cautionaryIcon
     default:
       return undefined
@@ -37,13 +35,13 @@ export const mapVariantToIconClass = (
 
 export const mapVariantToIcon = (variant: PopoverVariant): JSX.Element => {
   switch (variant) {
-    case "informative":
+    case 'informative':
       return <Icon name="info" isPresentational isFilled />
-    case "positive":
+    case 'positive':
       return <Icon name="check_circle" isPresentational isFilled />
-    case "negative":
+    case 'negative':
       return <Icon name="error" isPresentational isFilled />
-    case "cautionary":
+    case 'cautionary':
       return <Icon name="warning" isPresentational isFilled />
     default:
       return <Icon name="info" isPresentational isFilled />
@@ -52,13 +50,13 @@ export const mapVariantToIcon = (variant: PopoverVariant): JSX.Element => {
 
 export const mapArrowVariantToClass = (variant: PopoverVariant): string => {
   switch (variant) {
-    case "informative":
+    case 'informative':
       return styles.informativeArrow
-    case "positive":
+    case 'positive':
       return styles.positiveArrow
-    case "negative":
+    case 'negative':
       return styles.negativeArrow
-    case "cautionary":
+    case 'cautionary':
       return styles.cautionaryArrow
     default:
       return styles.defaultArrow
@@ -67,12 +65,11 @@ export const mapArrowVariantToClass = (variant: PopoverVariant): string => {
 
 export const mapSizeToClass = (size: PopoverSize): string => {
   switch (size) {
-    case "large":
+    case 'large':
       return styles.large
     default:
-      return ""
+      return ''
   }
 }
 
-export const mapLineVariant = (singleLine: boolean): string =>
-  singleLine ? styles.singleLine : ""
+export const mapLineVariant = (singleLine: boolean): string => (singleLine ? styles.singleLine : '')

package/src/ProgressBar/ProgressBar.module.scss

@@ -1,5 +1,5 @@
-@import "~@kaizen/design-tokens/sass/color";
-@import "~@kaizen/design-tokens/sass/spacing";
+@import '~@kaizen/design-tokens/sass/color';
+@import '~@kaizen/design-tokens/sass/spacing';
 
 $height: 10px;
 
@@ -81,14 +81,9 @@ $height: 10px;
 
 .isAnimating {
   &::after {
-    background: linear-gradient(
-      90deg,
-      transparent,
-      var(--color-white) 75%,
-      transparent
-    );
+    background: linear-gradient(90deg, transparent, var(--color-white) 75%, transparent);
     opacity: 25%;
-    content: "";
+    content: '';
     position: absolute;
     top: 0;
     bottom: 0;

package/src/ProgressBar/ProgressBar.spec.tsx

@@ -1,10 +1,10 @@
-import React from "react"
-import { render, screen } from "@testing-library/react"
-import { ProgressBar } from "./ProgressBar"
+import React from 'react'
+import { render, screen } from '@testing-library/react'
+import { ProgressBar } from './ProgressBar'
 
-describe("<ProgressBar />", () => {
-  it("has an accessible progress value expressed as a percentage", () => {
-    const expectedAccessiblePercent: string = "60"
+describe('<ProgressBar />', () => {
+  it('has an accessible progress value expressed as a percentage', () => {
+    const expectedAccessiblePercent: string = '60'
 
     render(
       <ProgressBar
@@ -15,11 +15,11 @@ describe("<ProgressBar />", () => {
         isAnimating={false}
         mood="positive"
         data-testid="id--progress-bar"
-      />
+      />,
     )
-    expect(screen.getByTestId("id--progress-bar")).toHaveAttribute(
-      "aria-valuenow",
-      expectedAccessiblePercent
+    expect(screen.getByTestId('id--progress-bar')).toHaveAttribute(
+      'aria-valuenow',
+      expectedAccessiblePercent,
     )
   })
 })

package/src/ProgressBar/ProgressBar.tsx

@@ -1,16 +1,16 @@
-import React, { HTMLAttributes } from "react"
-import classnames from "classnames"
-import { Heading } from "~components/Heading"
-import { OverrideClassName } from "~components/types/OverrideClassName"
-import { Label } from "./subcomponents/Label"
-import { calculatePercentage } from "./utils/calculatePercentage"
-import styles from "./ProgressBar.module.scss"
+import React, { HTMLAttributes } from 'react'
+import classnames from 'classnames'
+import { Heading } from '~components/Heading'
+import { OverrideClassName } from '~components/types/OverrideClassName'
+import { Label } from './subcomponents/Label'
+import { calculatePercentage } from './utils/calculatePercentage'
+import styles from './ProgressBar.module.scss'
 
 export type ProgressBarMood = {
   /**
    * @deprecated Use `color` prop instead
    */
-  mood: "positive" | "informative" | "negative" | "cautionary"
+  mood: 'positive' | 'informative' | 'negative' | 'cautionary'
   color?: never
 }
 
@@ -26,7 +26,7 @@ export type ProgressBarColor = {
    * - `negative` -> `red`
    * - `positive` -> `green`
    */
-  color: "blue" | "green" | "red" | "yellow"
+  color: 'blue' | 'green' | 'red' | 'yellow'
 }
 
 export type ProgressBarBaseProps = {
@@ -39,10 +39,9 @@ export type ProgressBarBaseProps = {
   subtext?: string
   label?: string
   isReversed: boolean
-} & OverrideClassName<Omit<HTMLAttributes<HTMLDivElement>, "color">>
+} & OverrideClassName<Omit<HTMLAttributes<HTMLDivElement>, 'color'>>
 
-export type ProgressBarProps = ProgressBarBaseProps &
-  (ProgressBarMood | ProgressBarColor)
+export type ProgressBarProps = ProgressBarBaseProps & (ProgressBarMood | ProgressBarColor)
 
 /**
  * {@link https://cultureamp.atlassian.net/wiki/spaces/DesignSystem/pages/3081896891/Progress+Bar Guidance} |
@@ -76,18 +75,14 @@ export const ProgressBar = ({
           className={classnames(
             styles.progress,
             color ? styles[color] : styles[mood],
-            isAnimating && styles.isAnimating
+            isAnimating && styles.isAnimating,
           )}
           style={{ transform: `translateX(-${100 - percentage}%` }}
         />
       </div>
       {subtext && (
         <div className={styles.subtext}>
-          <Heading
-            variant="heading-6"
-            tag="p"
-            color={isReversed ? "white" : "dark"}
-          >
+          <Heading variant="heading-6" tag="p" color={isReversed ? 'white' : 'dark'}>
             {subtext}
           </Heading>
         </div>
@@ -96,4 +91,4 @@ export const ProgressBar = ({
   )
 }
 
-ProgressBar.displayName = "ProgressBar"
+ProgressBar.displayName = 'ProgressBar'