@kaizen/components 1.47.6 → 1.49.0

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

@@ -1,5 +1,7 @@
 import React, { useState } from "react"
 import { Meta, StoryObj } from "@storybook/react"
+import { fn } from "@storybook/test"
+import dummyContent from "../../EditableRichTextContent/_docs/dummyContent.json"
 import { EditorContentArray } from "../../index"
 import { RichTextEditor, RichTextEditorProps } from "../index"
 
@@ -77,9 +79,26 @@ export const Controls: Story = {
       { name: "bold", group: "inline" },
       { name: "italic", group: "inline" },
       { name: "underline", group: "inline" },
-      { name: "orderedList", group: "list" },
-      { name: "bulletList", group: "list" },
-      { name: "link", group: "link" },
+    ],
+  },
+}
+
+export const ControlsWithoutBold: Story = {
+  args: {
+    controls: [
+      { name: "italic", group: "inline" },
+      { name: "underline", group: "inline" },
+    ],
+    defaultValue: [
+      {
+        type: "paragraph",
+        content: [
+          {
+            type: "text",
+            text: "This user text cannot be bolded",
+          },
+        ],
+      },
     ],
   },
 }
@@ -92,7 +111,7 @@ export const DefaultValue: Story = {
         content: [
           {
             type: "text",
-            text: "Some notes I'd like to share",
+            text: "User text goes here",
           },
         ],
       },
@@ -100,6 +119,20 @@ export const DefaultValue: Story = {
   },
 }
 
+export const AllAvailableContent: Story = {
+  args: {
+    defaultValue: dummyContent,
+    controls: [
+      { name: "bold", group: "inline" },
+      { name: "italic", group: "inline" },
+      { name: "underline", group: "inline" },
+      { name: "orderedList", group: "list" },
+      { name: "bulletList", group: "list" },
+      { name: "link", group: "link" },
+    ],
+  },
+}
+
 export const Rows: Story = {
   args: {
     labelText: "1 Row",
@@ -109,13 +142,13 @@ export const Rows: Story = {
 
 export const Description: Story = {
   args: {
-    description: "I am a rich text editor",
+    description: "Description text",
   },
 }
 
 export const Validation: Story = {
   args: {
-    validationMessage: "something went wrong",
+    validationMessage: "Error message",
     status: "error",
   },
 }
@@ -129,10 +162,30 @@ export const MalformedContent: Story = {
           {
             type: "text",
             marks: [{ type: "strong" }],
-            text: "Some notes I'd like to share in bold text:",
+            text: "User text goes here in bold text",
+          },
+        ],
+      },
+    ],
+  },
+}
+
+export const IncorrectDataForControls: Story = {
+  args: {
+    defaultValue: [
+      {
+        type: "paragraph",
+        content: [
+          {
+            type: "text",
+            marks: [{ type: "strong" }],
+            text: "User text goes here in bold text",
           },
         ],
       },
     ],
+    controls: [{ name: "italic", group: "inline" }],
+    dataError: <>Cannot bold text without a bold control</>,
+    onDataError: () => fn(),
   },
 }

package/src/RichTextEditor/_mixins.scss

@@ -11,6 +11,7 @@
   position: relative;
   white-space: pre-wrap;
   box-sizing: content-box;
+  color: $color-purple-800;
 
   > p {
     margin: 0 0 $spacing-16;

package/src/RichTextEditor/utils/plugins/LinkManager/components/LinkModal/LinkModal.module.scss

@@ -0,0 +1,5 @@
+.validationErrorMessage {
+  ul {
+    margin-bottom: 0;
+  }
+}

package/src/RichTextEditor/utils/plugins/LinkManager/components/LinkModal/LinkModal.spec.stories.tsx

@@ -0,0 +1,37 @@
+import { Meta, StoryObj } from "@storybook/react"
+import { userEvent, waitFor, fn, expect } from "@storybook/test"
+import { LinkModal } from "./LinkModal"
+
+const meta = {
+  title: "Components/RichTextEditor/Subcomponents/LinkModal/Tests",
+  component: LinkModal,
+  args: {
+    onSubmit: fn(),
+    onDismiss: fn(),
+    onAfterLeave: fn(),
+    isOpen: true,
+  },
+} satisfies Meta<typeof LinkModal>
+
+export default meta
+
+type Story = StoryObj<typeof meta>
+
+export const InvalidLink: Story = {
+  parameters: {
+    chromatic: { disable: false },
+  },
+  args: {
+    defaultHref: "google.com",
+  },
+  play: async () => {
+    await new Promise(resolve => setTimeout(resolve, 500))
+    await userEvent.keyboard("{Tab}{Enter}")
+
+    await waitFor(() => {
+      expect(document.activeElement).toHaveAccessibleDescription(
+        /Empty or invalid link\. Links must start with http or https/
+      )
+    })
+  },
+}

package/src/RichTextEditor/utils/plugins/LinkManager/components/LinkModal/LinkModal.stories.tsx

@@ -0,0 +1,33 @@
+import { Meta, StoryObj } from "@storybook/react"
+import { fn } from "@storybook/test"
+import { LinkModal } from "./LinkModal"
+
+const meta = {
+  title: "Components/RichTextEditor/Subcomponents/LinkModal",
+  component: LinkModal,
+  args: {
+    onSubmit: fn(),
+    onDismiss: fn(),
+    onAfterLeave: fn(),
+    isOpen: true,
+  },
+} satisfies Meta<typeof LinkModal>
+
+export default meta
+
+type Story = StoryObj<typeof meta>
+
+export const AddLink: Story = {
+  parameters: {
+    chromatic: { disable: false },
+  },
+}
+
+export const EditLink: Story = {
+  parameters: {
+    chromatic: { disable: false },
+  },
+  args: {
+    defaultHref: "http://google.com",
+  },
+}

package/src/RichTextEditor/utils/plugins/LinkManager/components/LinkModal/LinkModal.tsx

@@ -2,6 +2,7 @@ import React, { useRef, useState } from "react"
 import { InputEditModal } from "~components/Modal"
 import { TextField } from "~components/TextField"
 import { ValidationResponse, validateLink } from "../../validation"
+import styles from "./LinkModal.module.scss"
 
 type LinkModalProps = {
   onSubmit: (href: string) => void
@@ -51,8 +52,15 @@ export const LinkModal = ({
         type="text"
         defaultValue={href ?? ""}
         labelText="Link URL"
+        description="Must start with http:// or https://"
         inputRef={inputRef}
-        validationMessage={validationStatus.message}
+        validationMessage={
+          validationStatus?.message && (
+            <div className={styles.validationErrorMessage}>
+              {validationStatus.message}
+            </div>
+          )
+        }
         status={validationStatus.status}
         onChange={(e: React.ChangeEvent<HTMLInputElement>) => {
           setHref(e.target.value)

package/src/RichTextEditor/utils/plugins/LinkManager/{validation.ts → validation.tsx}

@@ -1,3 +1,5 @@
+import React from "react"
+
 export type ValidationResponse = {
   status: "success" | "error" | "default"
   message?: React.ReactNode
@@ -9,7 +11,15 @@ export const validateLink = (href: string): ValidationResponse => {
   if (!isValidLink) {
     return {
       status: "error",
-      message: "Please enter a valid URL",
+      message: (
+        <>
+          Empty or invalid link. Links must start with http or https, e.g:
+          <ul>
+            <li>https://google.com</li>
+            <li>http://www.google.com</li>
+          </ul>
+        </>
+      ),
     }
   }
 

package/src/Select/Select.tsx

@@ -35,6 +35,11 @@ export type SelectProps = {
    * @default false
    */
   fullWidth?: boolean
+  /**
+   * @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
 } & ReactSelectProps<any, boolean>
 
 /**
@@ -53,6 +58,7 @@ export const Select = React.forwardRef<any, SelectProps>(
       fullWidth: propsFullWidth,
       className: propsClassName,
       isDisabled,
+      placeholder,
       ...props
     },
     ref
@@ -92,6 +98,7 @@ export const Select = React.forwardRef<any, SelectProps>(
           {...props}
           ref={ref}
           aria-labelledby={labelId}
+          placeholder={placeholder || ""}
           components={{
             Control,
             Placeholder,
@@ -126,12 +133,13 @@ interface AsyncProps
 
 export const AsyncSelect = React.forwardRef(
   (
-    { className: propsClassName, ...props }: AsyncProps,
+    { className: propsClassName, placeholder, ...props }: AsyncProps,
     ref: React.Ref<any>
   ) => (
     <Async
       {...props}
       ref={ref}
+      placeholder={placeholder || ""}
       components={{
         Control,
         Placeholder,

package/src/Select/_docs/Select.stories.tsx

@@ -96,7 +96,4 @@ export const Async: Story = {
       </>
     )
   },
-  args: {
-    placeholder: "Placeholder",
-  },
 }

package/src/TextArea/TextArea.tsx

@@ -13,6 +13,11 @@ export type TextAreaProps = {
   status?: "default" | "error" | "caution"
   autogrow?: boolean
   reversed?: boolean
+  /**
+   * @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<TextareaHTMLAttributes<HTMLTextAreaElement>>
 
 export const TextArea = ({

package/src/__future__/Select/Select.tsx

@@ -71,6 +71,11 @@ export type SelectProps<Option extends SelectOption = SelectOption> = {
    * Creates a portal for the Popover to the matching element id
    */
   portalContainerId?: string
+  /**
+   * @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<Omit<AriaSelectProps<Option>, OmittedAriaSelectProps>>
 
 /**
@@ -91,7 +96,7 @@ export const Select = <Option extends SelectOption = SelectOption>({
   classNameOverride,
   selectedKey,
   description,
-  placeholder,
+  placeholder = "",
   isDisabled,
   portalContainerId,
   ...restProps

package/src/__future__/Select/_docs/Select.stickersheet.stories.tsx

@@ -35,7 +35,6 @@ const StickerSheetTemplate: StickerSheetStory = {
               <Select
                 label="Label"
                 items={singleMockItems}
-                placeholder="Placeholder"
                 isReversed={isReversed}
               />
             </StickerSheet.Cell>
@@ -69,28 +68,24 @@ const StickerSheetTemplate: StickerSheetStory = {
             <Select
               label="Label"
               items={singleMockItems}
-              placeholder="Placeholder"
               isReversed={isReversed}
               data-sb-pseudo-styles="hover"
             />
             <Select
               label="Label"
               items={singleMockItems}
-              placeholder="Placeholder"
               isReversed={isReversed}
               data-sb-pseudo-styles="active"
             />
             <Select
               label="Label"
               items={singleMockItems}
-              placeholder="Placeholder"
               isReversed={isReversed}
               data-sb-pseudo-styles="focus"
             />
             <Select
               label="Label"
               items={singleMockItems}
-              placeholder="Placeholder"
               isDisabled
               isReversed={isReversed}
             />
@@ -104,7 +99,6 @@ const StickerSheetTemplate: StickerSheetStory = {
             <Select
               label="Full width"
               items={singleMockItems}
-              placeholder="Placeholder"
               isFullWidth
               isReversed={isReversed}
             />
@@ -115,7 +109,6 @@ const StickerSheetTemplate: StickerSheetStory = {
                 label="Custom Width (50%)"
                 items={singleMockItems}
                 isFullWidth
-                placeholder="Placeholder"
                 isReversed={isReversed}
               />
             </div>
@@ -129,7 +122,6 @@ const StickerSheetTemplate: StickerSheetStory = {
             <Select
               label="Error"
               items={singleMockItems}
-              placeholder="Placeholder"
               description="This is a description"
               status="error"
               validationMessage="This is an error"
@@ -138,7 +130,6 @@ const StickerSheetTemplate: StickerSheetStory = {
             <Select
               label="Caution"
               items={singleMockItems}
-              placeholder="Placeholder"
               description="This is a description"
               status="caution"
               validationMessage="This is an error"

package/src/__future__/Select/subcomponents/SelectToggle/SelectToggle.tsx

@@ -13,6 +13,10 @@ export type SelectToggleProps = {
   /** Props for the element representing the selected value. */
   valueProps: DOMAttributes<FocusableElement>
   isOpen?: boolean
+  /**
+   * @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
   /** Updates the styling of the validation. */
   status?: "error" | "caution"

package/dist/cjs/__build-tools/styleInject.cjs

@@ -1,29 +0,0 @@
-'use strict';
-
-// Auto-generated by package-bundler
-// Forked from https://github.com/egoist/style-inject
-function styleInject(css, {
-  insertAt
-} = {}) {
-  if (!css || typeof document === "undefined") return;
-  const head = document.head || document.getElementsByTagName("head")[0];
-  const style = document.createElement("style");
-  style.type = "text/css";
-  if (insertAt === "top") {
-    if (head.firstChild) {
-      head.insertBefore(style, head.firstChild);
-    } else {
-      head.appendChild(style);
-    }
-  } else {
-    head.appendChild(style);
-  }
-  // @ts-ignore
-  if (style.styleSheet) {
-    // @ts-ignore
-    style.styleSheet.cssText = css;
-  } else {
-    style.appendChild(document.createTextNode(css));
-  }
-}
-exports.styleInject = styleInject;

package/dist/esm/__build-tools/styleInject.mjs

@@ -1,27 +0,0 @@
-// Auto-generated by package-bundler
-// Forked from https://github.com/egoist/style-inject
-function styleInject(css, {
-  insertAt
-} = {}) {
-  if (!css || typeof document === "undefined") return;
-  const head = document.head || document.getElementsByTagName("head")[0];
-  const style = document.createElement("style");
-  style.type = "text/css";
-  if (insertAt === "top") {
-    if (head.firstChild) {
-      head.insertBefore(style, head.firstChild);
-    } else {
-      head.appendChild(style);
-    }
-  } else {
-    head.appendChild(style);
-  }
-  // @ts-ignore
-  if (style.styleSheet) {
-    // @ts-ignore
-    style.styleSheet.cssText = css;
-  } else {
-    style.appendChild(document.createTextNode(css));
-  }
-}
-export { styleInject };