@kaizen/components 2.0.4 → 2.0.6

package/src/RichTextEditor/RichTextEditor/utils/controlmap.tsx

@@ -1,4 +1,5 @@
 import React from 'react'
+import { useIntl } from '@cultureamp/i18n-react-intl'
 import { Icon } from '~components/Icon'
 import { type ToolbarControlTypes, type ToolbarItems } from '../../types'
 import { listIsActive, markIsActive } from '../../utils/commands'
@@ -173,12 +174,15 @@ const filterToolbarControls = (groupedControls: GroupedToolbarControls): Toolbar
   Object.values(groupedControls).filter((controls) => controls.length > 0)
 
 /** Builds an array of object used to map control configuration to rte toolbar buttons */
-export const buildControlMap = (
+export const useControlMap = (
   schema: ProseMirrorModel.Schema,
   editorState: ProseMirrorState.EditorState,
   controls?: ToolbarItems[],
 ): ToolbarControl[][] => {
+  const { formatMessage } = useIntl()
+
   if (!controls) return []
+
   const controlGroupIndex: ControlGroupTypes = createControlGroupIndex(controls)
   const toolbarControls: GroupedToolbarControls = createInitialControls(controlGroupIndex)
   const listNodes = [schema.nodes.bulletList, schema.nodes.orderedList]
@@ -189,7 +193,11 @@ export const buildControlMap = (
     toolbarControls[groupIndex].push({
       isActive: markIsActive(editorState, type),
       action: createToggleMarkCommand(type),
-      label: 'Bold',
+      label: formatMessage({
+        id: 'kz.rte.bold',
+        defaultMessage: 'Bold',
+        description: 'Label for the "Bold" button in a text editor',
+      }),
       icon: <Icon name="format_bold" isPresentational />,
     })
   }
@@ -200,7 +208,11 @@ export const buildControlMap = (
     toolbarControls[groupIndex].push({
       isActive: markIsActive(editorState, type),
       action: createToggleMarkCommand(type),
-      label: 'Italic',
+      label: formatMessage({
+        id: 'kz.rte.italic',
+        defaultMessage: 'Italic',
+        description: 'Label for the "Italic" button in a text editor',
+      }),
       icon: <Icon name="format_italic" isPresentational />,
     })
   }
@@ -211,7 +223,11 @@ export const buildControlMap = (
     toolbarControls[groupIndex].push({
       isActive: markIsActive(editorState, type),
       action: createToggleMarkCommand(type),
-      label: 'Underline',
+      label: formatMessage({
+        id: 'kz.rte.underline',
+        defaultMessage: 'Underline',
+        description: 'Label for the "Underline" button in a text editor',
+      }),
       icon: <Icon name="format_underlined" isPresentational />,
     })
   }
@@ -222,7 +238,11 @@ export const buildControlMap = (
     toolbarControls[groupIndex].push({
       action: createToggleListCommand(type),
       isActive: listIsActive(editorState, type, listNodes),
-      label: 'Bullet List',
+      label: formatMessage({
+        id: 'kz.rte.bullet_list',
+        defaultMessage: 'Bullet list',
+        description: 'Label for the "Bullet list" button in a text editor',
+      }),
       icon: <Icon name="format_list_bulleted" isPresentational shouldMirrorInRTL />,
     })
   }
@@ -233,7 +253,11 @@ export const buildControlMap = (
     toolbarControls[groupIndex].push({
       action: createToggleListCommand(type),
       isActive: listIsActive(editorState, type, listNodes),
-      label: 'Numbered List',
+      label: formatMessage({
+        id: 'kz.rte.numbered_list',
+        defaultMessage: 'Numbered list',
+        description: 'Label for the "Numbered list" button in a text editor',
+      }),
       icon: <Icon name="format_list_numbered" isPresentational shouldMirrorInRTL />,
     })
   }
@@ -246,14 +270,22 @@ export const buildControlMap = (
         action: createLiftListCommand(),
         disabled: liftListIsDisabled(editorState),
         isActive: false,
-        label: 'Decrease indent',
+        label: formatMessage({
+          id: 'kz.rte.decrease_indent',
+          defaultMessage: 'Decrease indent',
+          description: 'Label for the "Decrease indent" button in a text editor',
+        }),
         icon: <Icon name="format_indent_decrease" isPresentational shouldMirrorInRTL />,
       },
       {
         action: createIndentListCommand(),
         disabled: indentListIsDisabled(editorState),
         isActive: false,
-        label: 'Increase indent',
+        label: formatMessage({
+          id: 'kz.rte.increase_indent',
+          defaultMessage: 'Increase indent',
+          description: 'Label for the "Increase indent" button in a text editor',
+        }),
         icon: <Icon name="format_indent_increase" isPresentational shouldMirrorInRTL />,
       },
     )
@@ -266,7 +298,12 @@ export const buildControlMap = (
       action: createToggleMarkCommand(type),
       disabled: editorState.selection.empty,
       isActive: false,
-      label: 'Link',
+      label: formatMessage({
+        id: 'kz.rte.link',
+        defaultMessage: 'Link',
+        description:
+          'Label for the "Link" button in a text editor that allows the creation of hyperlinks in the text',
+      }),
       icon: <Icon name="add_link" isPresentational />,
     })
   }

package/src/RichTextEditor/utils/commands/fixtures/data.json

@@ -81,7 +81,7 @@
           "content": [
             {
               "type": "paragraph",
-              "content": [{ "type": "text", "text": "Bullet List Item Node" }]
+              "content": [{ "type": "text", "text": "Bullet list Item Node" }]
             }
           ]
         }

package/src/RichTextEditor/utils/commands/listIsActive.spec.ts

@@ -20,7 +20,7 @@ describe('listIsActive()', () => {
     })
     let currentState = testEditorStateWitList
 
-    dispatchTransaction(simulateSelectionByText('Bullet List Item Node'))
+    dispatchTransaction(simulateSelectionByText('Bullet list Item Node'))
     dispatchTransaction((editorState: EditorState) => {
       currentState = editorState
       return true
@@ -40,7 +40,7 @@ describe('listIsActive()', () => {
     })
     let currentState = testEditorStateWitList
 
-    dispatchTransaction(simulateSelectionByText('Bullet List Item Node'))
+    dispatchTransaction(simulateSelectionByText('Bullet list Item Node'))
     dispatchTransaction((editorState: EditorState) => {
       currentState = editorState
       return true

package/src/SingleSelect/SingleSelect.tsx

@@ -81,6 +81,8 @@ export type SingleSelectProps<Option extends SingleSelectOption = SingleSelectOp
 } & OverrideClassName<Omit<AriaSelectProps<Option>, OmittedAriaSelectProps>>
 
 /**
+ * @deprecated SingleSelect is deprecated in v3 and will be replaced in v4.
+ *
  * {@link https://cultureamp.atlassian.net/wiki/spaces/DesignSystem/pages/3081896474/Select Guidance} |
  * {@link https://cultureamp.design/?path=/docs/components-select--docs Storybook}
  */

package/src/SingleSelect/_docs/SingleSelect--api-specification.mdx

@@ -1,11 +1,13 @@
 import { Canvas, Meta, Controls, ArgTypes, DocsStory } from '@storybook/blocks'
-import { ResourceLinks, KAIOInstallation, LinkTo } from '~storybook/components'
+import { ResourceLinks, KAIOInstallation, LinkTo, ReplacementNotice } from '~storybook/components'
 import * as SingleSelectStories from './SingleSelect.stories'
 
-<Meta title="Components/SingleSelect/API Specification" />
+<Meta title="Components/SingleSelect (Deprecated)/API Specification" />
 
 # SingleSelect
 
+<ReplacementNotice isFuture={true} />
+
 <ResourceLinks
   sourceCode="https://github.com/cultureamp/kaizen-design-system/tree/main/packages/components/src/SingleSelect"
   figma="https://www.figma.com/file/ZRfnoNUXbGZv4eVWLbF4Az/%F0%9F%96%BC%EF%B8%8F-Component-Gallery?node-id=9%3A37837&mode=dev"

package/src/SingleSelect/_docs/SingleSelect--usage-guidelines.mdx

@@ -1,11 +1,19 @@
 import { Canvas, DocsStory, Meta, Controls } from '@storybook/blocks'
-import { ResourceLinks, KAIOInstallation, DosAndDonts, DoOrDont } from '~storybook/components'
+import {
+  ResourceLinks,
+  KAIOInstallation,
+  DosAndDonts,
+  DoOrDont,
+  ReplacementNotice,
+} from '~storybook/components'
 import * as SingleSelectStories from './SingleSelect.stories'
 
-<Meta title="Components/SingleSelect/Usage Guidelines" />
+<Meta title="Components/SingleSelect (Deprecated)/Usage Guidelines" />
 
 # SingleSelect
 
+<ReplacementNotice isFuture={true} />
+
 <ResourceLinks
   sourceCode="https://github.com/cultureamp/kaizen-design-system/tree/main/packages/components/src/SingleSelect"
   figma="https://www.figma.com/file/ZRfnoNUXbGZv4eVWLbF4Az/%F0%9F%96%BC%EF%B8%8F-Component-Gallery?node-id=9%3A37837&mode=dev"

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

@@ -14,7 +14,7 @@ import {
 const IS_CHROMATIC = isChromatic()
 
 export default {
-  title: 'Components/SingleSelect',
+  title: 'Components/SingleSelect (Deprecated)',
   parameters: {
     chromatic: { disable: false },
     controls: { disable: true },

package/src/SingleSelect/_docs/SingleSelect.stories.tsx

@@ -10,7 +10,7 @@ import { type SingleSelectOption } from '../types'
 import { groupedMockItems, mixedMockItemsDisabled, singleMockItems } from './mockData'
 
 const meta = {
-  title: 'Components/SingleSelect',
+  title: 'Components/SingleSelect (Deprecated)',
   component: SingleSelect,
   argTypes: {
     items: {

package/src/Tile/InformationTile/InformationTile.tsx

@@ -4,6 +4,8 @@ import { GenericTile, type GenericTileProps } from '../subcomponents/GenericTile
 export type InformationTileProps = GenericTileProps
 
 /**
+ * @deprecated InformationTile is deprecated in v3 and will be removed in v4.
+ *
  * {@link https://cultureamp.atlassian.net/wiki/spaces/DesignSystem/pages/3079077889/Tile#InformationTile%3A Guidance} |
  * {@link https://cultureamp.design/?path=/docs/components-tiles-informationtile--docs Storybook}
  */

package/src/Tile/InformationTile/_docs/InformationTile.mdx

@@ -1,11 +1,13 @@
 import { Canvas, Controls, Meta } from '@storybook/blocks'
-import { ResourceLinks, KAIOInstallation } from '~storybook/components'
+import { ResourceLinks, KAIOInstallation, RemovalNotice } from '~storybook/components'
 import * as InformationTileStories from './InformationTile.stories'
 
 <Meta of={InformationTileStories} />
 
 # InformationTile
 
+<RemovalNotice />
+
 <ResourceLinks
   sourceCode="https://github.com/cultureamp/kaizen-design-system/tree/main/packages/components/src/Tile/InformationTile"
   figma="https://www.figma.com/file/ZRfnoNUXbGZv4eVWLbF4Az/%EF%B8%8F%F0%9F%96%BC%EF%B8%8F-Component-Gallery?node-id=9%3A37846&t=QliptwSIGF2YVAnx-1"

package/src/Tile/InformationTile/_docs/InformationTile.stickersheet.stories.tsx

@@ -4,7 +4,7 @@ import { StickerSheet, type StickerSheetStory } from '~storybook/components/Stic
 import { InformationTile, type InformationTileProps } from '../index'
 
 export default {
-  title: 'Components/Tiles/InformationTile',
+  title: 'Components/Tiles/InformationTile (Deprecated)',
   parameters: {
     chromatic: { disable: false },
     controls: { disable: true },

package/src/Tile/InformationTile/_docs/InformationTile.stories.tsx

@@ -3,7 +3,7 @@ import { type Meta, type StoryObj } from '@storybook/react'
 import { InformationTile } from '../index'
 
 const meta = {
-  title: 'Components/Tiles/InformationTile',
+  title: 'Components/Tiles/InformationTile (Deprecated)',
   component: InformationTile,
   args: {
     title: 'Title',

package/src/Tile/MultiActionTile/MultiActionTile.tsx

@@ -20,6 +20,8 @@ const renderActions = (primaryAction: TileAction, secondaryAction?: TileAction):
 )
 
 /**
+ * @deprecated MultiActionTile is deprecated in v3 and will be removed in v4.
+ *
  * {@link https://cultureamp.atlassian.net/wiki/spaces/DesignSystem/pages/3079077889/Tile#MultiActionTile.1 Guidance} |
  * {@link https://cultureamp.design/?path=/docs/components-tiles-multiactiontile--docs Storybook}
  */

package/src/Tile/MultiActionTile/_docs/MultiActionTile.mdx

@@ -1,11 +1,13 @@
 import { Canvas, Controls, Meta } from '@storybook/blocks'
-import { ResourceLinks, KAIOInstallation } from '~storybook/components'
+import { ResourceLinks, KAIOInstallation, RemovalNotice } from '~storybook/components'
 import * as MultiActionTileStories from './MultiActionTile.stories'
 
 <Meta of={MultiActionTileStories} />
 
 # MultiActionTile
 
+<RemovalNotice />
+
 <ResourceLinks
   sourceCode="https://github.com/cultureamp/kaizen-design-system/tree/main/packages/components/src/Tile/MultiActionTile"
   figma="https://www.figma.com/file/ZRfnoNUXbGZv4eVWLbF4Az/%EF%B8%8F%F0%9F%96%BC%EF%B8%8F-Component-Gallery?node-id=9%3A37846&t=QliptwSIGF2YVAnx-1"

package/src/Tile/MultiActionTile/_docs/MultiActionTile.stickersheet.stories.tsx

@@ -4,7 +4,7 @@ import { StickerSheet, type StickerSheetStory } from '~storybook/components/Stic
 import { MultiActionTile, type MultiActionTileProps } from '../index'
 
 export default {
-  title: 'Components/Tiles/MultiActionTile',
+  title: 'Components/Tiles/MultiActionTile (Deprecated)',
   parameters: {
     chromatic: { disable: false },
     controls: { disable: true },

package/src/Tile/MultiActionTile/_docs/MultiActionTile.stories.tsx

@@ -3,7 +3,7 @@ import { type Meta, type StoryObj } from '@storybook/react'
 import { MultiActionTile } from '../index'
 
 const meta = {
-  title: 'Components/Tiles/MultiActionTile',
+  title: 'Components/Tiles/MultiActionTile (Deprecated)',
   component: MultiActionTile,
   args: {
     title: 'Title',

package/src/Tile/TileGrid/TileGrid.tsx

@@ -14,6 +14,8 @@ export interface TileGridProps extends OverrideClassName<HTMLAttributes<HTMLULis
 }
 
 /**
+ * @deprecated TileGrid is deprecated in v3 and will be removed in v4.
+ *
  * {@link https://cultureamp.atlassian.net/wiki/spaces/DesignSystem/pages/3079077889/Tile#TileGrid Guidance} |
  * {@link https://cultureamp.design/storybook/?path=/docs/components-tiles-tilegrid--docs Storybook}
  */

package/src/Tile/TileGrid/_docs/TileGrid.mdx

@@ -1,11 +1,13 @@
 import { Canvas, Controls, Meta } from '@storybook/blocks'
-import { ResourceLinks, KAIOInstallation } from '~storybook/components'
+import { ResourceLinks, KAIOInstallation, RemovalNotice } from '~storybook/components'
 import * as TileGridStories from './TileGrid.stories'
 
 <Meta of={TileGridStories} />
 
 # TileGrid
 
+<RemovalNotice />
+
 <ResourceLinks
   sourceCode="https://github.com/cultureamp/kaizen-design-system/tree/main/packages/components/src/Tile/TileGrid"
   designGuidelines="https://cultureamp.atlassian.net/wiki/spaces/DesignSystem/pages/3079077889/Tile#TileGrid"

package/src/Tile/TileGrid/_docs/TileGrid.stickersheet.stories.tsx

@@ -5,7 +5,7 @@ import { StickerSheet, type StickerSheetStory } from '~storybook/components/Stic
 import { TileGrid } from '../index'
 
 export default {
-  title: 'Components/Tiles/TileGrid',
+  title: 'Components/Tiles/TileGrid (Deprecated)',
   parameters: {
     chromatic: { disable: false },
     controls: { disable: true },

package/src/Tile/TileGrid/_docs/TileGrid.stories.tsx

@@ -5,7 +5,7 @@ import { InformationTile } from '~components/Tile'
 import { TileGrid } from '../index'
 
 const meta = {
-  title: 'Components/Tiles/TileGrid',
+  title: 'Components/Tiles/TileGrid (Deprecated)',
   component: TileGrid,
   args: {
     children: (

package/src/__alpha__/SingleSelect/subcomponents/ListItem/ListItem.module.css

@@ -1,8 +1,4 @@
 @layer kz-components {
-  ul {
-    padding-inline-start: 0;
-  }
-
   .listItem {
     font-family: var(--typography-paragraph-body-font-family);
     font-weight: var(--typography-paragraph-body-font-weight);