@kaizen/components 1.48.0 → 1.49.1

package/src/DatePicker/DatePicker.tsx

@@ -16,6 +16,7 @@ import {
   setFocusInCalendar,
 } from "~components/Calendar"
 import { CalendarPopover } from "~components/Calendar/CalendarPopover"
+import { VisuallyHidden } from "~components/VisuallyHidden"
 import {
   DateInputField,
   DateInputFieldProps,
@@ -305,17 +306,25 @@ export const DatePicker = ({
       </div>
 
       {isOpen && (
-        <CalendarPopover referenceElement={containerRef.current}>
-          <CalendarSingle
-            id={calendarId}
-            selected={selectedDay}
-            defaultMonth={defaultMonth}
-            weekStartsOn={weekStartsOn}
-            disabled={disabledDays}
-            locale={locale}
-            onDayClick={handleCalendarDayChange}
-            onMount={handleCalendarMount}
-          />
+        <CalendarPopover
+          referenceElement={containerRef.current}
+          aria-labelledby={`${id}-calendar-label ${id}-input-label`}
+        >
+          <>
+            <VisuallyHidden id={`${id}-calendar-label`}>
+              Select date from calendar for:
+            </VisuallyHidden>
+            <CalendarSingle
+              id={calendarId}
+              selected={selectedDay}
+              defaultMonth={defaultMonth}
+              weekStartsOn={weekStartsOn}
+              disabled={disabledDays}
+              locale={locale}
+              onDayClick={handleCalendarDayChange}
+              onMount={handleCalendarMount}
+            />
+          </>
         </CalendarPopover>
       )}
     </FocusOn>

package/src/DateRangePicker/DateRangePicker.tsx

@@ -15,6 +15,7 @@ import {
 } from "~components/Calendar/LegacyCalendarRange"
 import { DateStartIcon } from "~components/Icon"
 import { Label } from "~components/Label"
+import { VisuallyHidden } from "~components/VisuallyHidden"
 import styles from "./DateRangePicker.module.scss"
 
 export type DateRangePickerProps = {
@@ -146,7 +147,12 @@ export const DateRangePicker = ({
   return (
     <div>
       <div ref={containerRef} className={classNameOverride}>
-        <Label disabled={isDisabled} htmlFor={id} labelText={labelText} />
+        <Label
+          id={`${id}-input-label`}
+          disabled={isDisabled}
+          htmlFor={id}
+          labelText={labelText}
+        />
         <button
           type="button"
           id={id}
@@ -178,7 +184,13 @@ export const DateRangePicker = ({
           onEscapeKey={handleOpenClose}
           enabled={isOpen}
         >
-          <CalendarPopover referenceElement={containerRef.current}>
+          <CalendarPopover
+            referenceElement={containerRef.current}
+            aria-labelledby={`${id}-calendar-label ${id}-input-label`}
+          >
+            <VisuallyHidden id={`${id}-calendar-label`}>
+              Select dates from calendar for:
+            </VisuallyHidden>
             <LegacyCalendarRange
               selectedRange={selectedDateRange}
               defaultMonth={defaultMonth}

package/src/DateRangePicker/_docs/DateRangePicker.mdx

@@ -1,4 +1,4 @@
-import { Canvas, Controls, Meta } from "@storybook/blocks"
+import { Canvas, DocsStory, Controls, Meta } from "@storybook/blocks"
 import { ResourceLinks, KAIOInstallation } from "~storybook/components"
 import * as DateRangePickerStories from "./DateRangePicker.stories"
 
@@ -28,3 +28,7 @@ Date range picker form field.
 ## Responsive behaviour
 
 As both the `DatePicker` and `DateRangePicker` use the `CalendarPopover` component under the hood, they share the same responsive behaviour. You can read more on this [here](/docs/components-date-controls-datepicker--docs#responsive-behaviour).
+
+<DocsStory of={DateRangePickerStories.AboveIfAvailable} />
+<DocsStory of={DateRangePickerStories.LimitedViewportHeight} />
+<DocsStory of={DateRangePickerStories.FullViewportHeight} />

package/src/DateRangePicker/_docs/DateRangePicker.stories.tsx

@@ -1,6 +1,6 @@
 import React, { useEffect, useState } from "react"
 import { Meta, StoryObj } from "@storybook/react"
-import { fn } from "@storybook/test"
+import { userEvent, within, expect, fn } from "@storybook/test"
 import { DateRange } from "react-day-picker"
 import { DateRangePicker, formatDateRangeValue } from "../index"
 
@@ -20,8 +20,8 @@ type Story = StoryObj<typeof meta>
 const DateRangePickerTemplate: Story = {
   render: args => {
     const [selectedDateRange, setSelectedDateRange] = useState<DateRange>({
-      from: undefined,
-      to: undefined,
+      from: args?.selectedDateRange?.from,
+      to: args?.selectedDateRange?.to,
     })
     const [value, setValue] = useState(args.value)
 
@@ -58,3 +58,99 @@ export const Playground: Story = {
     },
   },
 }
+
+const selectedDateRange = {
+  from: new Date(2022, 2, 6),
+  to: new Date(2022, 2, 15),
+}
+
+export const AboveIfAvailable: Story = {
+  ...DateRangePickerTemplate,
+  name: "Limited viewport autoplacement above",
+  args: {
+    labelText: "Calendar with space above",
+    selectedDateRange,
+  },
+  parameters: {
+    viewport: {
+      viewports: {
+        LimitedViewportAutoPlace: {
+          name: "Limited vertical space",
+          styles: {
+            width: "1024px",
+            height: "500px",
+          },
+        },
+      },
+      defaultViewport: "LimitedViewportAutoPlace",
+    },
+  },
+  decorators: [
+    Story => (
+      <div className="mt-[350px]">
+        <Story />
+      </div>
+    ),
+  ],
+  play: async ({ canvasElement }) => {
+    const canvas = within(canvasElement)
+    await userEvent.click(canvas.getByRole("button", { name: /Change date:/ }))
+    await expect(canvas.getByRole("dialog")).toBeInTheDocument()
+  },
+}
+
+export const LimitedViewportHeight: Story = {
+  ...DateRangePickerTemplate,
+  name: "Limited viewport height",
+  args: {
+    labelText: "Calendar with reduced space below",
+    selectedDateRange,
+  },
+  parameters: {
+    viewport: {
+      viewports: {
+        LimitedViewportHeight: {
+          name: "Limited vertical space",
+          styles: {
+            width: "1024px",
+            height: "300px",
+          },
+        },
+      },
+      defaultViewport: "LimitedViewportHeight",
+    },
+  },
+  decorators: [
+    Story => (
+      <div className="mb-[150px]">
+        <Story />
+      </div>
+    ),
+  ],
+  play: async ({ canvasElement }) => {
+    const canvas = within(canvasElement)
+    await userEvent.click(canvas.getByRole("button", { name: /Change date:/ }))
+    await expect(canvas.getByRole("dialog")).toBeInTheDocument()
+  },
+}
+
+export const FullViewportHeight: Story = {
+  ...DateRangePickerTemplate,
+  name: "Full viewport height",
+  args: {
+    labelText: "Calendar with full space below",
+    selectedDateRange,
+  },
+  decorators: [
+    Story => (
+      <div className="mb-[350px]">
+        <Story />
+      </div>
+    ),
+  ],
+  play: async ({ canvasElement }) => {
+    const canvas = within(canvasElement)
+    await userEvent.click(canvas.getByRole("button", { name: /Change date:/ }))
+    await expect(canvas.getByRole("dialog")).toBeInTheDocument()
+  },
+}

package/src/EmptyState/EmptyState.tsx

@@ -84,10 +84,7 @@ export const EmptyState = ({
             classNameOverride={styles.illustration}
           />
         ) : (
-          <IllustrationComponent
-            alt={illustrationType}
-            classNameOverride={styles.illustration}
-          />
+          <IllustrationComponent classNameOverride={styles.illustration} />
         )}
       </div>
       <div className={styles.textSide}>

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

@@ -25,21 +25,11 @@ const FieldGroupTemplate = ({
   <div>
     <FieldGroup inline={inline} classNameOverride="mr-6">
       <Label htmlFor={`id--field-${id}`}>Email</Label>
-      <input
-        className="border border-gray-500"
-        placeholder="Native text input..."
-        type="text"
-        id="id--field-2"
-      />
+      <input className="border border-gray-500" type="text" id="id--field-2" />
     </FieldGroup>
     <FieldGroup inline={inline}>
       <Label htmlFor={`id--field-${id}`}>Username</Label>
-      <input
-        className="border border-gray-500"
-        placeholder="Native text input..."
-        type="text"
-        id="id--field-2"
-      />
+      <input className="border border-gray-500" type="text" id="id--field-2" />
     </FieldGroup>
   </div>
 )

package/src/FieldGroup/_docs/FieldGroup.stories.tsx

@@ -12,7 +12,6 @@ const meta = {
         <Label htmlFor="id--field-1">Email</Label>
         <input
           className="ms-6 border border-gray-500"
-          placeholder="Native text input..."
           type="text"
           id="id--field-1"
         />
@@ -42,16 +41,14 @@ export const Inline: Story = {
         <Label htmlFor="id--field-1">Email</Label>
         <input
           className="ms-6 border border-gray-500"
-          placeholder="Native text input..."
           type="text"
-          id="id--field-2"
+          id="id--field-1"
         />
       </FieldGroup>
       <FieldGroup inline>
-        <Label htmlFor="id--field-1">Username</Label>
+        <Label htmlFor="id--field-2">Username</Label>
         <input
           className="ms-6 border border-gray-500"
-          placeholder="Native text input..."
           type="text"
           id="id--field-2"
         />
@@ -67,16 +64,14 @@ export const Default: Story = {
         <Label htmlFor="id--field-1">Email</Label>
         <input
           className="ms-6 border border-gray-500"
-          placeholder="Native text input..."
           type="text"
-          id="id--field-2"
+          id="id--field-1"
         />
       </FieldGroup>
       <FieldGroup>
-        <Label htmlFor="id--field-1">Username</Label>
+        <Label htmlFor="id--field-2">Username</Label>
         <input
           className="ms-6 border border-gray-500"
-          placeholder="Native text input..."
           type="text"
           id="id--field-2"
         />

package/src/Input/Input/Input.tsx

@@ -14,6 +14,11 @@ export type InputProps = {
   endIconAdornment?: React.ReactNode
   reversed?: boolean
   type?: InputType
+  /**
+   * @deprecated Use of placeholder text goes against our a11y standards.
+   * Use the `labelText` prop to provide a concise name, and the `description` prop for any help text.
+   */
+  placeholder?: string
 } & OverrideClassName<InputHTMLAttributes<HTMLInputElement>>
 
 export const Input = ({

package/src/Input/InputSearch/InputSearch.spec.tsx

@@ -12,10 +12,12 @@ const defaultInputProps = {
   onChange: jest.fn(),
 }
 
-const renderInput = (props?: InputSearchProps): ReturnType<typeof render> => {
+const renderInput = (
+  props?: Omit<InputSearchProps, "id">
+): ReturnType<typeof render> => {
   const mergedInputProps = { ...defaultInputProps, ...props }
 
-  return render(<InputSearch {...mergedInputProps} />)
+  return render(<InputSearch {...mergedInputProps} data-testid="someInputId" />)
 }
 
 describe("<InputSearch />", () => {
@@ -28,9 +30,10 @@ describe("<InputSearch />", () => {
   })
 
   it("should call the `onChange` event when text value is updated", async () => {
-    const placeholder = "someInputPlaceholder"
-    const utils = renderInput({ value: "", placeholder, id: "someInputId" })
-    const input = utils.getByPlaceholderText(placeholder)
+    const utils = renderInput({
+      value: "",
+    })
+    const input = utils.getByTestId("someInputId")
 
     await user.type(input, "Hello")
     await waitFor(() => {
@@ -39,12 +42,12 @@ describe("<InputSearch />", () => {
   })
 
   it("should render a disabled inside of input", () => {
-    const { container } = renderInput({ disabled: true, id: "someInputId" })
+    const { container } = renderInput({ disabled: true })
     expect(container.querySelector("[disabled]")).toBeTruthy()
   })
 
   it("should render a reversed input", () => {
-    const { container } = renderInput({ reversed: true, id: "someInputId" })
+    const { container } = renderInput({ reversed: true })
     expect(container.querySelector(".reversed")).toBeTruthy()
   })
 })

package/src/Notification/ToastNotification/ToastNotificationsList/ToastNotificationsList.module.scss

@@ -12,7 +12,7 @@
   right: $spacing-md;
   top: 0;
   bottom: 0;
-  z-index: 1030;
+  z-index: 1100;
   max-width: 100%;
   pointer-events: none;
 

package/src/RichTextEditor/EditableRichTextContent/EditableRichTextContent.module.scss

@@ -2,25 +2,43 @@
 @import "~@kaizen/design-tokens/sass/border";
 @import "~@kaizen/design-tokens/sass/color";
 @import "~@kaizen/design-tokens/sass/spacing";
+@import "~@kaizen/design-tokens/sass/typography";
+
+.editorLabel {
+  margin-bottom: $spacing-6;
+  display: inline-block;
+}
 
 .editableContainer :global(.ProseMirror) {
-  padding: $spacing-sm;
+  padding: calc($spacing-12 - $border-solid-border-width);
   position: relative;
   border-radius: $border-solid-border-radius;
-  border: $border-focus-ring-border-width $border-focus-ring-border-style
-    transparent;
+  border: $border-solid-border-width $border-solid-border-style $color-gray-500;
   transition:
     background-color $animation-duration-immediate,
     border-color $animation-duration-immediate;
-  background-color: $color-gray-200;
+  background-color: $color-white;
+  min-height: $typography-paragraph-body-line-height;
 }
 
 .editableContainer:hover :global(.ProseMirror) {
   background-color: $color-gray-200;
-  border-color: $color-blue-500;
 }
 
 .editableContainer .hiddenButton:focus-within + * > :global(.ProseMirror) {
-  border: $border-focus-ring-border-width $border-focus-ring-border-style
-    $color-blue-500;
+  background-color: $color-gray-200;
+
+  &::before {
+    $focus-ring-offset: calc((#{$border-focus-ring-border-width} * 2) + 1px);
+
+    pointer-events: none;
+    content: "";
+    position: absolute;
+    background: transparent;
+    border: $border-focus-ring-border-width $border-focus-ring-border-style
+      $color-blue-500;
+    border-radius: 10px;
+    inset: calc(-1 * #{$focus-ring-offset});
+    z-index: 1;
+  }
 }

package/src/RichTextEditor/EditableRichTextContent/EditableRichTextContent.tsx

@@ -37,7 +37,9 @@ export const EditableRichTextContent = ({
   ...restProps
 }: EditableRichTextContentProps): JSX.Element => (
   <>
-    {!isLabelHidden && <Label labelText={labelText} />}
+    {!isLabelHidden && (
+      <Label classNameOverride={styles.editorLabel} labelText={labelText} />
+    )}
     {/* Disabling these a11y linting errors because there is a <button> that mitigates these concerns. The onClick here is just an additional layer. */}
     {/* eslint-disable-next-line jsx-a11y/no-static-element-interactions, jsx-a11y/click-events-have-key-events */}
     <div

package/src/RichTextEditor/EditableRichTextContent/_docs/EditableRichTextContent.mdx

@@ -1,5 +1,5 @@
 import { Canvas, Controls, Meta } from "@storybook/blocks"
-import { ResourceLinks, KAIOInstallation, LinkTo } from "~storybook/components"
+import { ResourceLinks, KAIOInstallation } from "~storybook/components"
 import * as EditableRichTextContentStories from "./EditableRichTextContent.stories"
 
 <Meta of={EditableRichTextContentStories} />
@@ -15,15 +15,17 @@ import * as EditableRichTextContentStories from "./EditableRichTextContent.stori
 
 ## Overview
 
-To render the contents of your <LinkTo pageId="components-richtexteditor">RichTextEditor</LinkTo> using the same structure for both components.
+To render the contents of your [RichTextEditor](/docs/components-richtexteditor-richtexteditor--docs) using the same structure for both components.
 
 <Canvas of={EditableRichTextContentStories.Playground} />
 <Controls of={EditableRichTextContentStories.Playground} />
 
 ## Usage
 
-The general idea is to use this component in combination with the <LinkTo pageId="components-richtexteditor">RichTextEditor</LinkTo> to toggle between a read only state
-and an editable state.
+The `EditableRichTextContent` indicates interactivity similar to a `text` or `textarea` input and should be used in combination with the [RichTextEditor](/docs/components-richtexteditor-richtexteditor--docs) to toggle between inactive and editable states.
+
+This differs from the [RichTextContent](/docs/components-richtexteditor-richtextcontent--docs) component, which is used to render `RichTextEditor` content as read-only text.
+
 
 ```tsx
 const [editMode, setEditMode] = useState<boolean>(false);

package/src/RichTextEditor/EditableRichTextContent/_docs/EditableRichTextContent.stickersheet.stories.tsx

@@ -0,0 +1,98 @@
+import React from "react"
+import { action } from "@storybook/addon-actions"
+import { Meta } from "@storybook/react"
+import {
+  StickerSheet,
+  StickerSheetStory,
+} from "~storybook/components/StickerSheet"
+import { EditableRichTextContent } from "../index"
+import defaultContent from "./defaultContent.json"
+
+const meta = {
+  title: "Components/RichTextEditor/EditableRichTextContent",
+  component: EditableRichTextContent,
+} satisfies Meta<typeof EditableRichTextContent>
+
+export default meta
+
+const StickerSheetTemplate: StickerSheetStory = {
+  render: () => (
+    <div>
+      <StickerSheet className="" heading="Pseudo states">
+        <StickerSheet.Body>
+          <StickerSheet.Row rowTitle="Default">
+            <StickerSheet.Cell className=" w-1/2">
+              <EditableRichTextContent
+                onClick={action("Toggle RTE")}
+                content={[]}
+                labelText="Label"
+              />
+            </StickerSheet.Cell>
+            <StickerSheet.Cell className=" w-1/2">
+              <EditableRichTextContent
+                onClick={action("Toggle RTE")}
+                content={defaultContent}
+                labelText="Label"
+              />
+            </StickerSheet.Cell>
+          </StickerSheet.Row>
+          <StickerSheet.Row rowTitle="Hover">
+            <StickerSheet.Cell className=" w-1/2">
+              <EditableRichTextContent
+                onClick={action("Toggle RTE")}
+                data-sb-pseudo-styles="hover"
+                content={[]}
+                labelText="Label"
+              />
+            </StickerSheet.Cell>
+            <StickerSheet.Cell className=" w-1/2">
+              <EditableRichTextContent
+                onClick={action("Toggle RTE")}
+                data-sb-pseudo-styles="hover"
+                content={defaultContent}
+                labelText="Label"
+              />
+            </StickerSheet.Cell>
+          </StickerSheet.Row>
+          <StickerSheet.Row rowTitle="Focus">
+            <StickerSheet.Cell className=" w-1/2">
+              <EditableRichTextContent
+                onClick={action("Toggle RTE")}
+                data-sb-pseudo-styles="focusWithin"
+                content={[]}
+                labelText="Label"
+              />
+            </StickerSheet.Cell>
+            <StickerSheet.Cell className=" w-1/2">
+              <EditableRichTextContent
+                onClick={action("Toggle RTE")}
+                data-sb-pseudo-styles="focusWithin"
+                content={defaultContent}
+                labelText="Label"
+              />
+            </StickerSheet.Cell>
+          </StickerSheet.Row>
+        </StickerSheet.Body>
+      </StickerSheet>
+    </div>
+  ),
+  parameters: {
+    pseudo: {
+      hover: ['[data-sb-pseudo-styles="hover"]'],
+      focusWithin: [
+        '[data-sb-pseudo-styles="focusWithin"] > [class^="VisuallyHidden"]',
+      ],
+    },
+  },
+}
+
+export const StickerSheetDefault: StickerSheetStory = {
+  ...StickerSheetTemplate,
+  name: "Sticker Sheet (Default)",
+}
+
+export const StickerSheetRTL: StickerSheetStory = {
+  ...StickerSheetTemplate,
+  name: "Sticker Sheet (RTL)",
+  parameters: { textDirection: "rtl" },
+}

package/src/RichTextEditor/EditableRichTextContent/_docs/EditableRichTextContent.stories.tsx

@@ -8,14 +8,14 @@ import {
   RichTextEditorProps,
 } from "../../index"
 import { EditableRichTextContent } from "../index"
-import dummyContent from "./dummyContent.json"
+import defaultContent from "./defaultContent.json"
 
 const meta = {
   title: "Components/RichTextEditor/EditableRichTextContent",
   component: EditableRichTextContent,
   args: {
-    content: dummyContent,
-    labelText: "Editable rich text content",
+    content: [],
+    labelText: "Label",
     onClick: fn(),
   },
   argTypes: {
@@ -32,7 +32,7 @@ const EditableRichTextContentTemplate: Story = {
   render: props => {
     const [editMode, setEditMode] = useState<boolean>(false)
     const [readRteData, setReadRTEData] = useState<EditorContentArray>(
-      props.content || dummyContent
+      props.content
     )
     const [editRteData, setEditRTEData] = useState<EditorContentArray>([])
 
@@ -65,7 +65,7 @@ const EditableRichTextContentTemplate: Story = {
             defaultValue={editRteData}
             onChange={handleOnChange}
           />
-          <div className="flex justify-end mt-8">
+          <div className="flex justify-end mt-12 gap-8">
             <Button label="Cancel" secondary onClick={handleCancel} />
             <Button label="Save" primary onClick={handleSave} />
           </div>
@@ -81,6 +81,9 @@ const EditableRichTextContentTemplate: Story = {
       />
     )
   },
+  args: {
+    content: defaultContent,
+  },
 }
 
 export const Playground: Story = {

package/src/RichTextEditor/EditableRichTextContent/_docs/defaultContent.json

@@ -0,0 +1,11 @@
+[
+  {
+    "type": "paragraph",
+    "content": [
+      {
+        "type": "text",
+        "text": "User text goes here"
+      }
+    ]
+  }
+]