@kaizen/components 1.81.0 → 2.0.0

package/src/IconV1/index.ts

@@ -0,0 +1,246 @@
+// This file is autogenerated by wrapSVGs.ts
+// Changes to this file will be overwritten
+
+export * from './AcademyIcon'
+export * from './ActionOffIcon'
+export * from './ActionOffWhiteIcon'
+export * from './ActionOnIcon'
+export * from './AddIcon'
+export * from './AddLinkIcon'
+export * from './AddWhiteIcon'
+export * from './AiIcon'
+export * from './ArchivedIcon'
+export * from './ArchivedWhiteIcon'
+export * from './ArrowBackwardIcon'
+export * from './ArrowDownIcon'
+export * from './ArrowForwardIcon'
+export * from './ArrowLeftIcon'
+export * from './ArrowRightIcon'
+export * from './ArrowUpIcon'
+export * from './AssignmentIcon'
+export * from './BlankIcon'
+export * from './BoldIcon'
+export * from './BookmarkOffIcon'
+export * from './BookmarkOnIcon'
+export * from './BranchingIcon'
+export * from './BullettedListIcon'
+export * from './CaMonogramIcon'
+export * from './CameraIcon'
+export * from './CautionIcon'
+export * from './CautionWhiteIcon'
+export * from './CheckIcon'
+export * from './ChevronDownIcon'
+export * from './ChevronLeftIcon'
+export * from './ChevronRightIcon'
+export * from './ChevronUpIcon'
+export * from './ClearIcon'
+export * from './ClearWhiteIcon'
+export * from './CloseIcon'
+export * from './ClosedIcon'
+export * from './ClosedWhiteIcon'
+export * from './CommentAddIcon'
+export * from './CommentAddWhiteIcon'
+export * from './CommentBankIcon'
+export * from './CommentDisabledIcon'
+export * from './CommentDisabledWhiteIcon'
+export * from './CommentIcon'
+export * from './CommentWhiteIcon'
+export * from './CommunicationsIcon'
+export * from './CompetencyLibraryIcon'
+export * from './ConfigureIcon'
+export * from './ConnectIcon'
+export * from './ConnectLineIcon'
+export * from './CustomIcon'
+export * from './DashboardIcon'
+export * from './DateEndIcon'
+export * from './DateEndWhiteIcon'
+export * from './DateRangeIcon'
+export * from './DateRangeWhiteIcon'
+export * from './DateStartIcon'
+export * from './DateStartWhiteIcon'
+export * from './DecreaseIndentIcon'
+export * from './DeltaBareIcon'
+export * from './DeltaBareWhiteIcon'
+export * from './DeltaFlatIcon'
+export * from './DeltaIcon'
+export * from './DeltaNegativeIcon'
+export * from './DeltaPositiveIcon'
+export * from './DeltaWhiteIcon'
+export * from './DemographicsIcon'
+export * from './DepartmentIcon'
+export * from './DraftIcon'
+export * from './DraftWhiteIcon'
+export * from './DragIcon'
+export * from './DuplicateIcon'
+export * from './EditIcon'
+export * from './EffectivenessIcon'
+export * from './EllipsisIcon'
+export * from './EmailIcon'
+export * from './EmptyIcon'
+export * from './EmptyWhiteIcon'
+export * from './EndIcon'
+export * from './EngagementIcon'
+export * from './EngagementWhiteIcon'
+export * from './EqualIcon'
+export * from './EqualWhiteIcon'
+export * from './ExclamationIcon'
+export * from './ExclamationOctagonIcon'
+export * from './ExclamationOctagonWhiteIcon'
+export * from './ExclamationWhiteIcon'
+export * from './ExperienceIcon'
+export * from './ExportIcon'
+export * from './ExportWhiteIcon'
+export * from './ExternalLinkIcon'
+export * from './FaceDissatisfiedIcon'
+export * from './FaceDissatisfiedWhiteIcon'
+export * from './FaceNeutralIcon'
+export * from './FaceNeutralWhiteIcon'
+export * from './FaceSatisfiedIcon'
+export * from './FaceSatisfiedWhiteIcon'
+export * from './FaceVeryDissatisfiedIcon'
+export * from './FaceVeryDissatisfiedWhiteIcon'
+export * from './FaceVerySatisfiedIcon'
+export * from './FaceVerySatisfiedWhiteIcon'
+export * from './FactorsIcon'
+export * from './FavoriteOffIcon'
+export * from './FavoriteOnIcon'
+export * from './FeedbackClassifyIcon'
+export * from './FeedbackClassifyWhiteIcon'
+export * from './FeedbackCompletedIcon'
+export * from './FeedbackCompletedWhiteIcon'
+export * from './FeedbackReportIcon'
+export * from './FeedbackReportWhiteIcon'
+export * from './FeedbackReviewIcon'
+export * from './FeedbackReviewWhiteIcon'
+export * from './FeedbackShareIcon'
+export * from './FeedbackShareWhiteIcon'
+export * from './FileIcon'
+export * from './FileWhiteIcon'
+export * from './FilterIcon'
+export * from './FlagOffIcon'
+export * from './FlagOffWhiteIcon'
+export * from './FlagOnIcon'
+export * from './FullIcon'
+export * from './GridViewIcon'
+export * from './GuidanceIcon'
+export * from './HamburgerIcon'
+export * from './HeatmapIcon'
+export * from './HeatmapWhiteIcon'
+export * from './HierarchyIcon'
+export * from './HomeIcon'
+export * from './ImportIcon'
+export * from './ImportWhiteIcon'
+export * from './IncreaseIndentIcon'
+export * from './IndicatorActiveIcon'
+export * from './IndicatorInactiveIcon'
+export * from './InformationIcon'
+export * from './InformationWhiteIcon'
+export * from './InsightIcon'
+export * from './InsightsIcon'
+export * from './InvisibleIcon'
+export * from './ItalicsIcon'
+export * from './KebabIcon'
+export * from './KioskIcon'
+export * from './KioskWhiteIcon'
+export * from './LaunchIcon'
+export * from './LaunchWhiteIcon'
+export * from './LeaderboardIcon'
+export * from './ListViewIcon'
+export * from './LiveIcon'
+export * from './LockIcon'
+export * from './LockWhiteIcon'
+export * from './LogOutIcon'
+export * from './MaximizeIcon'
+export * from './MeatballsIcon'
+export * from './MinimizeIcon'
+export * from './MinusIcon'
+export * from './NavigatorIcon'
+export * from './NotificationIcon'
+export * from './NumberedListIcon'
+export * from './NumberedListRtlIcon'
+export * from './OpenIcon'
+export * from './OpenWhiteIcon'
+export * from './OrganizationIcon'
+export * from './ParticipationIcon'
+export * from './ParticipationWhiteIcon'
+export * from './PauseIcon'
+export * from './PauseWhiteIcon'
+export * from './PercentageIcon'
+export * from './PermissionsIcon'
+export * from './PersonIcon'
+export * from './PhotoUploadIcon'
+export * from './PowerIcon'
+export * from './PrintIcon'
+export * from './PrintWhiteIcon'
+export * from './ProcessManagerIcon'
+export * from './PromotionIcon'
+export * from './PromotionWhiteIcon'
+export * from './QuestionIcon'
+export * from './QuestionWhiteIcon'
+export * from './QuestionsIcon'
+export * from './RedoIcon'
+export * from './RefreshIcon'
+export * from './RemoveLinkIcon'
+export * from './RepeatsIcon'
+export * from './ReportIcon'
+export * from './ReportSharingIcon'
+export * from './RestoreIcon'
+export * from './SaveIcon'
+export * from './SearchIcon'
+export * from './SearchWhiteIcon'
+export * from './SecurityTipIcon'
+export * from './SendIcon'
+export * from './SendRtlIcon'
+export * from './SettingsIcon'
+export * from './SettingsWhiteIcon'
+export * from './ShareIcon'
+export * from './SkipIcon'
+export * from './SkipWhiteIcon'
+export * from './SortAscendingIcon'
+export * from './SortDescendingIcon'
+export * from './SpinnerIcon'
+export * from './StarOffIcon'
+export * from './StarOnIcon'
+export * from './StartIcon'
+export * from './SubtractIcon'
+export * from './SubtractWhiteIcon'
+export * from './SuccessIcon'
+export * from './SuccessWhiteIcon'
+export * from './SupportIcon'
+export * from './SurveysIcon'
+export * from './SurveysWhiteIcon'
+export * from './SyncIcon'
+export * from './TagIcon'
+export * from './TasksIcon'
+export * from './TasksWhiteIcon'
+export * from './TemplateIcon'
+export * from './TemplateWhiteIcon'
+export * from './TextAnalyticsIcon'
+export * from './TextAnalyticsWhiteIcon'
+export * from './ThumbsDownIcon'
+export * from './ThumbsDownOffIcon'
+export * from './ThumbsDownOnIcon'
+export * from './ThumbsUpIcon'
+export * from './ThumbsUpOffIcon'
+export * from './ThumbsUpOnIcon'
+export * from './TimeIcon'
+export * from './TimeWhiteIcon'
+export * from './TranslationIcon'
+export * from './TrashIcon'
+export * from './UnattributedIcon'
+export * from './UnattributedWhiteIcon'
+export * from './UnderlineIcon'
+export * from './UndoIcon'
+export * from './UserAddIcon'
+export * from './UserDeleteIcon'
+export * from './UserExitIcon'
+export * from './UserIcon'
+export * from './UserSelectIcon'
+export * from './UserSettingsIcon'
+export * from './UserUpdateIcon'
+export * from './UsersIcon'
+export * from './VisibleIcon'
+export * from './WritingIcon'
+export * from './ZoomInIcon'
+export * from './ZoomOutIcon'
+export * from './types'

package/src/IconV1/types.ts

@@ -0,0 +1,3 @@
+import type { BaseSVGProps } from './subcomponents/SVG'
+
+export type IconProps = BaseSVGProps

package/src/Illustration/subcomponents/VideoPlayer/VideoPlayer.tsx

@@ -1,6 +1,6 @@
 import React, { useEffect, useRef } from 'react'
 import classnames from 'classnames'
-import { IconButton } from '~components/Button'
+import { IconButton } from '~components/ButtonV1'
 import { assetUrl } from '~components/utils/hostedAssets'
 import { canPlayWebm } from '../../utils/canPlayWebm'
 import { usePausePlay } from '../../utils/usePausePlay'

package/src/Illustration/utils/usePausePlay.tsx

@@ -1,5 +1,5 @@
 import React, { useState, type RefObject } from 'react'
-import { Icon } from '~components/__next__/Icon'
+import { Icon } from '~components/Icon'
 
 export type usePausePlayHook = {
   toggle: () => void

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

@@ -1,6 +1,6 @@
 import React from 'react'
 import { type Meta } from '@storybook/react'
-import { Icon } from '~components/__next__/Icon'
+import { Icon } from '~components/Icon'
 import { StickerSheet, type StickerSheetStory } from '~storybook/components/StickerSheet'
 import { Input, type InputProps } from '../index'
 import { InputStatus, InputTypes } from '../types'

package/src/Input/Input/_docs/Input.stories.tsx

@@ -1,6 +1,6 @@
 import React from 'react'
 import { type Meta, type StoryObj } from '@storybook/react'
-import { Icon } from '~components/__next__/Icon'
+import { Icon } from '~components/Icon'
 import { Input } from '../index'
 
 const meta = {

package/src/Input/InputSearch/InputSearch.tsx

@@ -2,8 +2,8 @@ import React, { useRef, type InputHTMLAttributes } from 'react'
 import { useIntl } from '@cultureamp/i18n-react-intl'
 import classnames from 'classnames'
 import { ClearButton } from '~components/ClearButton'
+import { Icon } from '~components/Icon'
 import { LoadingSpinner } from '~components/Loading'
-import { Icon } from '~components/__next__/Icon'
 import { type OverrideClassName } from '~components/types/OverrideClassName'
 import styles from './InputSearch.module.scss'
 

package/src/KaizenProvider/_docs/KaizenProvider.mdx

@@ -24,7 +24,7 @@ import { KaizenProvider } from '@kaizen/components'
 
 ### Internationalization support
 
-- [Internationalization in Kaizen](/story/components-kaizen-provider-internationalization-in-kaizen--docs)
+- [Internationalization in Kaizen](/docs/components-kaizenprovider-internationalization-in-kaizen--docs)
 
 ## Migrating to KaizenProvider v1.0
 

package/src/LikertScale/LikertScale.spec.tsx

@@ -0,0 +1,62 @@
+import React, { act } from 'react'
+import { render, screen, waitFor } from '@testing-library/react'
+import { LikertScale, type LikertScaleProps } from './LikertScale'
+import { type 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 LikertScaleWrapper = (props: Partial<LikertScaleProps>): JSX.Element => (
+  <LikertScale
+    scale={scale}
+    labelId="test__likert-scale"
+    selectedItem={null}
+    onSelect={(): void => undefined}
+    isRequired
+    {...props}
+  />
+)
+
+describe('<LikertScale />', () => {
+  describe('Keyboard navigation', () => {
+    it('shows the correct legend when using tab to go through the scale', async () => {
+      render(<LikertScaleWrapper 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/LikertScale/LikertScale.tsx

@@ -0,0 +1,198 @@
+import React, { createRef, useState } from 'react'
+import classnames from 'classnames'
+import { FieldMessage } from '~components/FieldMessage'
+import { Icon } from '~components/Icon'
+import { Text } from '~components/Text'
+import { type ColorSchema, type Scale, type ScaleItem, type ScaleValue } from './types'
+import determineSelectionFromKeyPress from './utils/determineSelectionFromKeyPress'
+import styles from './LikertScale.module.scss'
+
+type ItemRefs = {
+  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
+  'colorSchema'?: ColorSchema | 'classical'
+  'validationMessage'?: string
+  'status'?: 'default' | 'error'
+  /**
+   * Sets aria-required value on radiogroup for assistive technologies. Validation must still be handled.
+   */
+  'isRequired'?: boolean
+  'onSelect': (value: ScaleItem | null) => void
+}
+
+const SelectedItemIcon = (): JSX.Element => (
+  <Icon name="check" isPresentational className={styles.check} />
+)
+
+/**
+ * {@link https://cultureamp.atlassian.net/wiki/spaces/DesignSystem/pages/3082060201/Likert+Scale Guidance} |
+ * {@link https://cultureamp.design/?path=/docs/components-likertscale--docs Storybook}
+ */
+export const LikertScale = ({
+  scale,
+  selectedItem,
+  reversed,
+  colorSchema = 'classical',
+  'data-testid': dataTestId,
+  onSelect,
+  validationMessage,
+  status,
+  labelId,
+  isRequired,
+}: 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?.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={isRequired ? `${labelId}` : labelId}
+      role="radiogroup"
+      tabIndex={-1}
+      aria-describedby={validationMessageId}
+      data-testid={dataTestId}
+      aria-required={isRequired}
+    >
+      <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,
+                colorSchema == 'blue' ? styles.blueColorSchema : styles.classicalColorSchema,
+                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?.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/LikertScale/_docs/LikertScale.mdx

@@ -0,0 +1,30 @@
+import { Canvas, Controls, Meta } from '@storybook/blocks'
+import { ResourceLinks, KAIOInstallation, RenameNotice } from '~storybook/components'
+import * as LikertScale from './LikertScale.stories'
+
+<Meta of={LikertScale} />
+
+# LikertScale
+
+<ResourceLinks
+  sourceCode="https://github.com/cultureamp/kaizen-design-system/tree/main/packages/components/src/LikertScale"
+  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"
+/>
+
+<KAIOInstallation exportNames="LikertScale" />
+
+## Overview
+
+Likert scale radio buttons let people select one option in a Likert scale ranging from strongly disagree to strongly agree.
+
+<Canvas of={LikertScale.Playground} />
+<Controls of={LikertScale.Playground} />
+
+## API
+
+### isRequired
+
+Sets aria-required value on radiogroup for assistive technologies. An accessible label must be provided and validation must still be handled within implementations.
+
+<Canvas of={LikertScale.IsRequired} />