@coopdigital/react 1.22.2 → 1.22.4

package/src/components/Radio/Radio.tsx

@@ -6,19 +6,19 @@ import { useField } from "@/components/Field/Field.context"
 import { StandardSizes } from "@/types"
 
 export interface RadioProps extends Omit<InputHTMLAttributes<HTMLInputElement>, "size" | "type"> {
-  /** **(Optional)** Specify additional CSS classes to be applied to the component. */
+  /** Specify additional CSS classes. */
   className?: string
-  /** **(Optional)** Specify whether the Radio should be disabled. Refer to Experience Library guidance on disabled form controls and accessibility.  */
+  /** Specify the disabled state. */
   disabled?: boolean
-  /** **(Optional)** Specify the Radio error state. */
+  /** Specify the component error state. */
   error?: boolean
-  /** **(Optional)** Specify the Radio id. Will be auto-generated if not set. */
+  /** Specify the component id. Will be auto-generated if not set. */
   id?: string
-  /** Specify the Radio name. */
+  /** Specify the component name. */
   name: string
-  /** **(Optional)** Specify a custom React ref for this component. */
+  /** Specify a custom React ref for this component. */
   ref?: Ref<HTMLInputElement>
-  /** **(Optional)** Specify the Radio size. */
+  /** Specify the component size. */
   size?: StandardSizes
 }
 

package/src/components/Searchbox/Searchbox.tsx

@@ -16,29 +16,23 @@ import { StandardSizes } from "@/types"
 import { getSlotProp, hasUserBorder } from "@/utils"
 
 export interface SearchboxProps extends FormHTMLAttributes<HTMLFormElement> {
-  /** **(Optional)** Specify a server endpoint to submit the form. Will be ignored if onSubmit is also set. */
+  /** Specify a server endpoint to submit the form. Will be ignored if onSubmit is also set. */
   action?: string
-  /** **(Optional)** Specify props to forward to the Button element. Use `label` to set Button text. */
-  button?: Pick<ButtonProps, "className" | "loadingText"> & { label?: React.ReactNode }
-  /** **(Optional)** Specify additional CSS classes to be applied to the component. */
+  /** Specify additional CSS classes. */
   className?: string
-  /** **(Optional)** Specify the TextInput id. Will be auto-generated if not set. */
+  /** Specify the component id. Will be auto-generated if not set. */
   id?: string
   /** Specify the label displayed above the search field. Hidden by default, but visible to screen readers. */
   label: string
-  /** **(Optional)** Specify whether the label should be visible to humans or screenreaders. */
+  /** Specify whether the label should be visible to humans or screenreaders. */
   labelVisible?: boolean
-  /** **(Optional)** Specify the TextInput name, also used as the URL search parameter. Defaults to `query`. */
-  name?: string
-  /** **(Optional)** Callback to run when the form is submitted. If this is an async function, it will be awaited and the Searchbox will be in a pending state until the promise is resolved. */
+  /** Callback to run when the form is submitted. If this is an async function, it will be awaited and the Searchbox will be in a pending state until the promise is resolved. */
   onSubmit?: React.SubmitEventHandler<HTMLElement> | undefined
-  /** **(Optional)** Specify the TextInput placeholder text Do not use in place of a form label. */
-  placeholder?: string
-  /** **(Optional)** Specify a custom React ref for this component. */
+  /** Specify a custom React ref for this component. */
   ref?: RefObject<HTMLFormElement | null>
-  /** **(Optional)** Specify the Searchbox size. */
+  /** Specify the component size. */
   size?: StandardSizes
-  /** **(Optional)** Specify the Searchbox variant. */
+  /** Specify the component variant. */
   variant?: "solid" | "ghost"
 }
 

package/src/components/Select/Select.tsx

@@ -14,43 +14,43 @@ import { useField } from "@/components/Field/Field.context"
 import { StandardSizes } from "@/types"
 
 export interface SelectProps extends Omit<SelectHTMLAttributes<HTMLSelectElement>, "size"> {
-  /** **(Optional)** Options inside the Select. This should be a set of `Select.Option` or `Select.OptionGroup` components.  */
+  /** Content inside the component.
+   *
+   *  This should be a set of `<Select.Option>` or `<Select.OptionGroup>`. */
   children?: ReactNode
-  /** **(Optional)** Specify additional CSS classes to be applied to the component. */
+  /** Specify additional CSS classes. */
   className?: string
-  /** **(Optional)** Specify whether the Select should be disabled. Refer to Experience Library guidance on disabled form controls and accessibility. */
+  /** Specify whether the Select should be disabled. */
   disabled?: boolean
-  /** **(Optional)** Specify the Select error state. */
+  /** Specify the Select error state. */
   error?: boolean
-  /** **(Optional)** Specify the wrapper behaviour. When true, width is fit-content, otherwise it expands to 100%.
+  /** Specify the wrapper behaviour. When true, width is fit-content, otherwise it expands to 100%.
    *
    * Default: false
    */
   fit?: boolean
-  /** **(Optional)** Specify the Select id. Will be auto-generated if not set. */
+  /** Specify the component id. Will be auto-generated if not set. */
   id?: string
   /** Specify the Select name. */
   name: string
-  /** **(Optional)** Specify a custom React ref for this component. */
+  /** Specify a custom React ref for this component. */
   ref?: Ref<HTMLSelectElement>
-  /** **(Optional)** Specify the Select size. */
+  /** Specify the component size. */
   size?: StandardSizes
 }
 
 interface SelectOptionGroupProps extends OptgroupHTMLAttributes<HTMLOptGroupElement> {
-  /** **(Optional)** Main content inside the Select option. It can be any valid JSX or string. */
+  /** Content inside the component.  */
   children?: ReactNode
   /** Specify the Select option group label. */
   label: string
 }
 
 interface SelectOptionProps extends OptionHTMLAttributes<HTMLOptionElement> {
-  /** **(Optional)** Main content inside the Select option. It can be any valid JSX or string. */
+  /** Content inside the component.  */
   children?: ReactNode
-  /** **(Optional)** Specify additional CSS classes to be applied to the Select option. */
+  /** Specify additional CSS classes. */
   className?: string
-  /** Value of Select option. */
-  value: string
 }
 
 const Select = ({

package/src/components/Signpost/Signpost.tsx

@@ -7,20 +7,23 @@ import { ChevronRightIcon } from "@/components/icons"
 import { Image, ImageProps } from "@/components/Image"
 
 export interface SignpostProps extends HTMLAttributes<HTMLDivElement> {
-  /** **(Optional)** Specify a custom element to override default `a`. */
+  /** Specify a custom element for the component.
+   *
+   * Default: `<a>`.
+   */
   // oxlint-disable-next-line typescript/no-explicit-any
   as?: React.FC<any> | ForwardRefExoticComponent<any> | string
-  /** Main content inside the component. It can be any valid JSX or string. */
-  children: React.ReactNode
-  /** **(Optional)** Specify additional CSS classes to be applied to the component. */
+  /** Content inside the component. */
+  children?: React.ReactNode
+  /** Specify additional CSS classes. */
   className?: string
-  /** **(Optional)** Specify the level of the Signpost heading. */
+  /** Specify the level of the Signpost heading. */
   headingLevel?: "h2" | "h3" | "h4" | "h5" | "h6"
   /** Specify the URL that the Signpost component will link to when clicked. */
   href?: string
-  /** **(Optional)** Specify properties of the Signpost Image. */
+  /** Specify properties of the Signpost Image. */
   image?: ImageProps
-  /** **(Optional)** Specify a custom React ref for this component. */
+  /** Specify a custom React ref for this component. */
   ref?: Ref<HTMLDivElement>
 }
 

package/src/components/SkipNav/SkipNav.tsx

@@ -8,14 +8,15 @@ interface SkipNavLink {
 }
 
 export interface SkipNavProps extends HTMLAttributes<HTMLDivElement> {
-  /** **(Optional)** Specify additional CSS classes to be applied to the component. */
+  /** Specify additional CSS classes. */
   className?: string
-  /** **(Optional)** Specify whether the SkipNav is visible immediately or only when tabbing. Useful for testing purposes only. */
+  /** Specify whether the component is visible immediately or only when tabbing. Useful for testing purposes only. */
   isVisible?: boolean
-  /** **(Optional)** Specify links to show in the SkipNav.
-   * Each item needs a `href` and `label`. Defaults to a single link anchored to `#main`. */
+  /** Specify links to show in the component. Each item needs a `href` and `label`.
+   *
+   * Default: A single link anchored to `#main`. */
   links?: SkipNavLink[]
-  /** **(Optional)** Specify a custom React ref for this component. */
+  /** Specify a custom React ref for this component. */
   ref?: Ref<HTMLDivElement>
 }
 

package/src/components/Squircle/Squircle.tsx

@@ -3,16 +3,18 @@ import type { HTMLAttributes, JSX, Ref, SVGAttributes } from "react"
 import clsx from "clsx"
 
 export interface SquircleProps extends HTMLAttributes<HTMLDivElement> {
-  /** **(Optional)** Main content inside the component. It can be any valid JSX or string. */
+  /** Content inside the component.
+   *
+   * This should be a set of `<Squircle.Svg>` and `<Squircle.Text>`. */
   children?: React.ReactNode
-  /** **(Optional)** Specify additional CSS classes to be applied to the component. */
+  /** Specify additional CSS classes. */
   className?: string
-  /** **(Optional)** Specify a custom React ref for this component. */
+  /** Specify a custom React ref for this component. */
   ref?: Ref<HTMLDivElement>
 }
 
 export interface SquircleSvgProps extends SVGAttributes<SVGElement> {
-  /** **(Optional)** Specify the Squircle size. */
+  /** Specify the component size. */
   size?: string | number
 }
 

package/src/components/Tag/Tag.tsx

@@ -6,18 +6,21 @@ import React from "react"
 import { hasUserBg } from "@/utils"
 
 export interface TagProps extends HTMLAttributes<HTMLAnchorElement> {
-  /** **(Optional)** Specify a custom element to override default `a` or `span`. */
+  /** Specify a custom element for the component.
+   *
+   * Default: `<span>` or `<a>`.
+   */
   // oxlint-disable-next-line typescript/no-explicit-any
   as?: React.FC<any> | ForwardRefExoticComponent<any> | string
-  /** **(Optional)** Main content inside the component. It can be any valid JSX or string. */
+  /** Content inside the component. */
   children?: React.ReactNode
-  /** **(Optional)** Specify additional CSS classes to be applied to the component. */
+  /** Specify additional CSS classes. */
   className?: string
-  /** **(Optional)** Specify the URL that the Tag component will link to when clicked. */
+  /** Specify the target URL. */
   href?: string
-  /** **(Optional)** Specify a custom React ref for this component. */
+  /** Specify a custom React ref for this component. */
   ref?: Ref<HTMLElement>
-  /** **(Optional)** Specify the Tag size. */
+  /** Specify the component size. */
   size?: "sm" | "md"
 }
 

package/src/components/TextInput/TextInput.tsx

@@ -10,36 +10,36 @@ export interface TextInputProps extends Omit<
   InputHTMLAttributes<HTMLInputElement>,
   "prefix" | "size" | "type"
 > {
-  /** **(Optional)** Specify additional CSS classes to be applied to the component. */
+  /** Specify additional CSS classes. */
   className?: string
-  /** **(Optional)** Specify whether the TextInput should be disabled. Refer to Experience Library guidance on disabled form controls and accessibility. */
+  /** Specify the disabled state. */
   disabled?: boolean
-  /** **(Optional)** Specify the TextInput error state. */
+  /** Specify the component error state. */
   error?: boolean
-  /** **(Optional)** Specify the wrapper behaviour. When true, width is fit-content, otherwise it expands to 100%.
+  /** Specify the wrapper behaviour. When true, width is fit-content, otherwise it expands to 100%.
    *
    * Default: false
    */
   fit?: boolean
-  /** **(Optional)** Specify the TextInput id. Will be auto-generated if not set. */
+  /** Specify the component id. Will be auto-generated if not set. */
   id?: string
-  /** Specify the TextInput name. */
+  /** Specify the component name. */
   name: string
-  /** **(Optional)** Specify the TextInput placeholder text. Do not use in place of a form label. */
+  /** Specify placeholder text. Do not use in place of a form label. */
   placeholder?: string
-  /** **(Optional)** Specify the prefix. It can be any valid JSX or string. */
+  /** Specify the prefix. */
   prefix?: React.ReactNode
-  /** **(Optional)** Specify whether the prefix should be rendered inside the input. */
+  /** Specify whether the prefix should be rendered inside the input. */
   prefixInline?: boolean
-  /** **(Optional)** Specify a custom React ref for this component. */
+  /** Specify a custom React ref for this component. */
   ref?: Ref<HTMLInputElement>
-  /** **(Optional)** Specify the TextInput size. */
+  /** Specify the component size. */
   size?: StandardSizes
-  /** **(Optional)** Specify the suffix. It can be any valid JSX or string. */
+  /** Specify the suffix. */
   suffix?: React.ReactNode
-  /** **(Optional)** Specify whether the suffix should be rendered inside the input. */
+  /** Specify whether the suffix should be rendered inside the input. */
   suffixInline?: boolean
-  /** **(Optional)** Specify the TextInput type. */
+  /** Specify the underlying input type. */
   type?:
     | "text"
     | "email"
@@ -56,7 +56,7 @@ export interface TextInputProps extends Omit<
 }
 
 const TextInput = ({
-  "aria-placeholder": ariaPlaceholder,
+  // "aria-placeholder": ariaPlaceholder,
   className,
   disabled,
   error = false,
@@ -76,7 +76,7 @@ const TextInput = ({
   const field = useField()
 
   const componentProps = {
-    "aria-placeholder": placeholder ?? ariaPlaceholder ?? undefined,
+    // "aria-placeholder": placeholder ?? ariaPlaceholder ?? undefined,
     className: clsx("coop-text-input", className),
     "data-error": error || undefined,
     "data-fit": fit || undefined,

package/src/components/Textarea/Textarea.tsx

@@ -16,44 +16,48 @@ const charCountMessage = (remaining: number) => {
 }
 
 export interface TextareaProps extends TextareaHTMLAttributes<HTMLTextAreaElement> {
-  /** **(Optional)** Specify additional CSS classes to be applied to the component. */
+  /** Specify additional CSS classes. */
   className?: string
-  /** Specify the number of columns (characters per row) in the Textarea. Defaults to `30`. */
+  /** Specify the number of columns (characters per row) in the Textarea.
+   *
+   * Default: `30`.
+   */
   cols?: number
-  /** **(Optional)** Specify whether to show the character counter underneath the Textarea. */
+  /** Specify whether to show the character counter underneath the Textarea. */
   counter?: boolean
-  /** **(Optional)** Specify whether the Textarea should allow more characters than its `maxLength` value.
+  /** Specify whether the Textarea should allow more characters than its `maxLength` value.
    *
-   * Defaults to `false`, meaning users can enter more characters than the maximum but will be warned if they go over the limit.
+   * Default: `false`. Users can enter more characters than the maximum but will be warned if they go over the limit.
    */
   cutoff?: boolean
-  /** **(Optional)** Specify whether the Textarea should be disabled. Refer to Experience Library guidance on disabled form controls and accessibility.  */
+  /** Specify the disabled state.  */
   disabled?: boolean
-  /** **(Optional)** Specify the Textarea error state */
+  /** Specify the component error state */
   error?: boolean
-  /** **(Optional)** Specify the wrapper behaviour. When true, width is fit-content, otherwise it expands to 100%.
+  /** Specify the wrapper behaviour. When true, width is fit-content, otherwise it expands to 100%.
    *
-   * Default: false
+   * Default: `false`
    */
   fit?: boolean
-  /** **(Optional)** Specify the Textarea id. Will be auto-generated if not set. */
+  /** Specify the component id. Will be auto-generated if not set. */
   id?: string
-  /** **(Optional)** Specify the Textarea maxLength. This is the maximum number of characters users can enter. */
-  maxLength?: number
-  /** Specify the Textarea name. */
+  /** Specify the component name. */
   name: string
-  /** **(Optional)** Specify the Textarea placeholder text. Do not use in place of a form label. */
+  /** Specify placeholder text. Do not use in place of a form label. */
   placeholder?: string
-  /** **(Optional)** Specify a custom React ref for this component. */
+  /** Specify a custom React ref for this component. */
   ref?: Ref<HTMLTextAreaElement>
-  /** **(Optional)** Specify the number of rows (lines of text) in the Textarea. Defaults to `4`. */
+  /** Specify the number of rows (lines of text) in the Textarea.
+   *
+   * Default: `4`.
+   */
   rows?: number
-  /** **(Optional)** Specify the Textarea size. */
+  /** Specify the component size. */
   size?: StandardSizes
 }
 
 const Textarea = ({
-  "aria-placeholder": ariaPlaceholder,
+  // "aria-placeholder": ariaPlaceholder,
   className,
   cols = 30,
   counter = false,
@@ -74,7 +78,7 @@ const Textarea = ({
   const field = useField()
 
   const componentProps = {
-    "aria-placeholder": placeholder ?? ariaPlaceholder ?? undefined,
+    // "aria-placeholder": placeholder ?? ariaPlaceholder ?? undefined,
     className: clsx("coop-textarea", className),
     cols,
     "data-error": error ?? undefined,

package/src/components/ValidationSummary/ValidationSummary.tsx

@@ -14,40 +14,45 @@ import {
 import { useSlots } from "@/hooks/useSlots"
 
 export interface ValidationSummaryProps extends HTMLAttributes<HTMLDivElement> {
-  /** **(Optional)** Specify if the summary should be focused and the parent form scrolled into view if there are errors.
+  /** Specify if the summary should be focused and the parent form scrolled into view if there are errors.
    *
-   * Default: true
+   * Default: `true`
    */
   autoScroll?: boolean
-  /** **(Optional)** This should be a set of `ValidationSummary.Heading`, `ValidationSummary.Prompt` and `ValidationSummary.Errors` components. */
+  /** Content inside the component.
+   *
+   * This should be a set of `<ValidationSummary.Heading>`, `<ValidationSummary.Prompt>` and `<ValidationSummary.Errors>`. */
   children?: ReactNode
-  /** **(Optional)** Specify additional CSS classes to be applied to the component. */
+  /** Specify additional CSS classes. */
   className?: string
-  /** **(Optional)** Specify if the summary should always render regardless of error state. Use this if you want to control the logic in your own code.
+  /** Specify if the summary should always render regardless of error state. Use this if you want to control the logic in your own code.
    *
-   * Default: false
+   * Default: `false`
    */
   forceMount?: boolean
-  /** **(Optional)** Specify a custom React ref for this component. */
+  /** Specify a custom React ref for this component. */
   ref?: Ref<HTMLDivElement>
 }
 
 interface ValidationSummaryHeadingProps extends HTMLAttributes<HTMLDivElement> {
-  /** **(Optional)** Specify a custom element to use instead of `h2`. */
+  /** Specify a custom element for the component.
+   *
+   * Default: `<h2>`.
+   */
   as?: "h2" | "h3" | "h4" | "h5" | "h6"
-  /** **(Optional)** Content inside the Heading.
+  /** Content inside the component.
    *
-   * Defaults to `There's a problem`.
+   * Default: `There's a problem`.
    */
   children?: React.ReactNode
-  /** **(Optional)** Specify additional CSS classes to be applied to the Heading. */
+  /** Specify additional CSS classes. */
   className?: string
 }
 
 interface ValidationSummaryPromptProps extends HTMLAttributes<HTMLDivElement> {
-  /** **(Optional)** Content inside the Prompt.
+  /** Content inside the component.
    *
-   * Defaults to `Check the form. You must:`.
+   * Default: `Check the form. You must:`.
    */
   children?: React.ReactNode
 }
@@ -62,7 +67,7 @@ interface FieldError {
 }
 
 interface ValidationSummaryErrorsProps extends HTMLAttributes<HTMLDivElement> {
-  /** **(Optional)** Content inside the Errors. */
+  /** Specify the validation error array. Refer to the FieldError type for the shape.. */
   errors?: Record<string, FieldError>
 }