@coopdigital/react 0.44.0 → 0.46.0

package/src/components/Field/Field.tsx

@@ -1,20 +1,156 @@
-import type { HTMLAttributes, JSX, ReactNode } from "react"
+import type { HTMLAttributes, HTMLProps, JSX } from "react"
 
 import clsx from "clsx"
+import React from "react"
 
-export interface FieldProps extends HTMLAttributes<HTMLDivElement> {
-  /** **(Optional)** Main content inside the component. It can be any valid JSX or string. */
-  children?: string | ReactNode
+import { useId } from "../../hooks/useId"
+import { useSlots } from "../../hooks/useSlots"
+import { Error as BaseError, type ErrorProps } from "../FieldMarkers/Error"
+import { Hint as BaseHint, type HintProps } from "../FieldMarkers/Hint"
+import { Label as BaseLabel, type LabelProps } from "../FieldMarkers/Label"
+
+const componentSlots = {
+  Checkbox: null,
+  Children: null,
+  Control: null,
+  FieldError: null,
+  FieldHint: null,
+  FieldLabel: null,
+  Radio: null,
+  Textarea: null,
+  TextInput: null,
+}
+
+const standardFields = ["Children", "FieldError", "FieldHint", "FieldLabel"]
+const inlineFields = ["Checkbox", "Radio"]
+
+interface FieldProps extends HTMLAttributes<HTMLDivElement> {
+  /** **(Optional)** Specify whether the Field should render inside a box. */
+  boxed?: boolean
+  /** Form elements inside the Field.
+   *
+   * Usually this will be a combination of `Field.Label`, `Field.Hint`, `Field.Error` and an associated control such as `TextInput` or `Checkbox`. */
+  children: React.ReactNode
   /** **(Optional)** Specify additional CSS classes to be applied to the component. */
-  className?: string
+  classname?: string
+  /** **(Optional)** Specify the Field error state. Use this to apply visual styling to the field control. */
+  error?: boolean
+  /** **(Optional)** Specify whether the Field should show the left-hand error bar if it is in an error state. */
+  hideErrorBar?: boolean
 }
 
-export const Field = ({ children, className, ...props }: FieldProps): JSX.Element => {
+const Root = ({
+  boxed = false,
+  children,
+  className,
+  error = false,
+  hideErrorBar = false,
+  ...props
+}: FieldProps) => {
+  const slots = { ...useSlots(componentSlots, children) }
+  const slotsArray = Object.entries(slots)
+
+  const uid = useId()
+
+  const isInlineControl = slotsArray.some((s) => s[1] !== null && inlineFields.includes(s[0]))
+  const hasFieldMarkers = !!(slots.FieldLabel ?? slots.FieldError ?? slots.FieldHint)
+  const [, control] =
+    slotsArray.find((s) => (!standardFields.includes(s[0]) && s[1] !== null ? s : null)) ?? []
+
+  let controlId = uid
+  let controlDisabled = false
+
+  if (control) {
+    if (typeof control === "object" && "props" in control) {
+      const controlProps = control.props as HTMLProps<HTMLElement>
+      controlId = controlProps.id ?? controlId
+      controlDisabled = controlProps.disabled ?? false
+    }
+
+    slots.Control = React.cloneElement(control as React.ReactElement<HTMLInputElement>, {
+      id: controlId,
+    })
+  }
+
+  if (slots.FieldLabel && React.isValidElement(slots.FieldLabel)) {
+    slots.FieldLabel = React.cloneElement(slots.FieldLabel as React.ReactElement<LabelProps>, {
+      htmlFor: (slots.FieldLabel.props as LabelProps).htmlFor ?? controlId,
+    })
+  }
+
   const componentProps = {
-    className: clsx("coop-form-item ", className),
     ...props,
+    "aria-disabled": controlDisabled || undefined,
+    className: clsx("coop-field", isInlineControl && "coop-field-inline", className),
+    "data-boxed": boxed || undefined,
+    "data-error": error || undefined,
+    "data-hide-error": hideErrorBar || undefined,
   }
-  return <div {...componentProps}>{children}</div>
+
+  return (
+    <div {...componentProps}>
+      {!isInlineControl && hasFieldMarkers && (
+        <div className="coop-field-markers">
+          {slots.FieldLabel}
+          {slots.FieldHint}
+          {slots.FieldError}
+        </div>
+      )}
+      {slots.Control && (
+        <div className="coop-field-control">
+          {slots.Control}
+          {isInlineControl && hasFieldMarkers && (
+            <div className="coop-field-markers">
+              {slots.FieldLabel}
+              {slots.FieldHint}
+              {slots.FieldError}
+            </div>
+          )}
+        </div>
+      )}
+      {slots.Children}
+    </div>
+  )
 }
 
+interface ControlProps extends HTMLAttributes<HTMLDivElement> {
+  /** **(Optional)** Elements inside the form control. */
+  children?: string | React.ReactNode
+  /** **(Optional)** Specify additional CSS classes to be applied to the component. */
+  className?: string
+}
+
+export const FieldControl = ({ children, className, ...props }: ControlProps): JSX.Element => {
+  return (
+    <div className={clsx("coop-field-control ", className)} {...props}>
+      {children}
+    </div>
+  )
+}
+
+FieldControl.displayName = "Field.Control"
+
+const FieldLabel = (props: LabelProps) => <BaseLabel {...props} />
+
+FieldLabel.displayName = "Field.Label"
+
+const FieldHint = (props: HintProps) => <BaseHint {...props} />
+
+FieldHint.displayName = "Field.Hint"
+
+const FieldError = (props: ErrorProps) => <BaseError {...props} />
+
+FieldError.displayName = "Field.Error"
+
+export const Field = Object.assign(Root, {
+  Control: FieldControl,
+  Error: FieldError,
+  Hint: FieldHint,
+  Label: FieldLabel,
+})
+
+// Field.Label = FieldLabel
+// Field.Hint = FieldHint
+// Field.Error = FieldError
+
 export default Field

package/src/components/{FieldError/FieldError.tsx → FieldMarkers/Error.tsx}

@@ -2,14 +2,14 @@ import type { HTMLAttributes, JSX, ReactNode } from "react"
 
 import clsx from "clsx"
 
-export interface FieldErrorProps extends HTMLAttributes<HTMLSpanElement> {
-  /** **(Optional)** Main content inside the component. It can be any valid JSX or string. */
+export interface ErrorProps extends HTMLAttributes<HTMLSpanElement> {
+  /** **(Optional)** Error text for the form element. Accepts any valid JSX or string. */
   children?: string | ReactNode
   /** **(Optional)** Specify additional CSS classes to be applied to the component. */
   className?: string
 }
 
-export const FieldError = ({ children, className, ...props }: FieldErrorProps): JSX.Element => {
+export const Error = ({ children, className, ...props }: ErrorProps): JSX.Element => {
   const componentProps = {
     className: clsx("coop-field-error ", className),
     ...props,
@@ -17,4 +17,4 @@ export const FieldError = ({ children, className, ...props }: FieldErrorProps):
   return <span {...componentProps}>{children}</span>
 }
 
-export default FieldError
+export default Error

package/src/components/{FieldHint/FieldHint.tsx → FieldMarkers/Hint.tsx}

@@ -2,18 +2,14 @@ import type { HTMLAttributes, JSX, ReactNode } from "react"
 
 import clsx from "clsx"
 
-export interface FieldHintProps extends HTMLAttributes<HTMLParagraphElement> {
-  /** Main content inside the component. It can be any valid JSX or string. */
-  children: string | ReactNode
+export interface HintProps extends HTMLAttributes<HTMLParagraphElement> {
+  /** **(Optional)** Hint text for the form element. Accepts any valid JSX or string. */
+  children?: string | ReactNode
   /** **(Optional)** Specify additional CSS classes to be applied to the component. */
   className?: string
 }
 
-export const FieldHint = ({
-  children,
-  className,
-  ...props
-}: FieldHintProps): JSX.Element | null => {
+export const Hint = ({ children, className, ...props }: HintProps): JSX.Element | null => {
   const componentProps = {
     className: clsx("coop-field-hint ", className),
     ...props,
@@ -22,4 +18,4 @@ export const FieldHint = ({
   return children ? <div {...componentProps}>{children}</div> : null
 }
 
-export default FieldHint
+export default Hint

package/src/components/FieldMarkers/Label.tsx

@@ -0,0 +1,21 @@
+import clsx from "clsx"
+import { LabelHTMLAttributes } from "react"
+
+export interface LabelProps extends LabelHTMLAttributes<HTMLLabelElement> {
+  /** **(Optional)** Main label for the form element. Accepts any valid JSX or string. */
+  children?: string | React.ReactNode
+  /** **(Optional)** Specify additional CSS classes to be applied to the component. */
+  className?: string
+  /** **(Optional)** Specify whether the label is visible for humans or only for screen readers. */
+  isVisible?: boolean
+}
+
+export const Label = ({ children, className, isVisible = true, ...props }: LabelProps) => {
+  return (
+    <label {...props} className={clsx("coop-field-label", !isVisible && "sr-only", className)}>
+      <span>{children}</span>
+    </label>
+  )
+}
+
+export default Label

package/src/components/FieldMarkers/Legend.tsx

@@ -0,0 +1,28 @@
+import clsx from "clsx"
+import { HTMLAttributes } from "react"
+
+export interface LegendProps extends HTMLAttributes<HTMLLegendElement> {
+  /** **(Optional)** Main legend for the fieldset. Accepts any valid JSX or string. */
+  children?: string | React.ReactNode
+  /** **(Optional)** Specify additional CSS classes to be applied to the component. */
+  className?: string
+  /** **(Optional)** Specify whether the legend should be visible to humans or screen readers. */
+  isVisible?: boolean
+}
+
+export const Legend = ({ children, className, isVisible = true, ...props }: LegendProps) => {
+  const componentProps = {
+    "aria-hidden": true,
+    className: clsx("coop-field-label", !isVisible && "sr-only", className),
+    ...props,
+  }
+
+  return (
+    <>
+      <legend className="sr-only">{children}</legend>
+      {isVisible && <div {...componentProps}>{children}</div>}
+    </>
+  )
+}
+
+export default Legend

package/src/components/Fieldset/Fieldset.tsx

@@ -0,0 +1,98 @@
+import clsx from "clsx"
+import { type FieldsetHTMLAttributes, type JSX } from "react"
+
+import { StandardSizes } from "../../../src/types"
+import { Error as BaseError, type ErrorProps } from "../FieldMarkers/Error"
+import { Hint as BaseHint, type HintProps } from "../FieldMarkers/Hint"
+import { Legend as BaseLegend, type LegendProps } from "../FieldMarkers/Legend"
+
+export interface FieldsetProps extends FieldsetHTMLAttributes<HTMLFieldSetElement> {
+  /** Form elements inside the Fieldset.
+   *
+   * Usually this will be a combination of `Fieldset.Legend` and `Fieldset.Fields`. */
+  children: React.ReactNode
+  /** **(Optional)** Specify additional CSS classes to be applied to the component. */
+  className?: string
+  /** **(Optional)** Specify whether the Fieldset, and all of its descendents, should be disabled. Refer to Experience Library guidance on disabled form controls and accessibility. */
+  disabled?: boolean
+  /** **(Optional)** Specify the Fieldset error state. Use this to apply visual styling to the field control. */
+  error?: boolean
+  /** **(Optional)** Specify whether the Fieldset should show the left-hand error bar if it is in an error state. */
+  hideErrorBar?: boolean
+  /** **(Optional)** Specify the size of the Fieldset and all its descendents. */
+  size?: StandardSizes
+}
+const Root = ({
+  children,
+  className,
+  disabled,
+  error = false,
+  hideErrorBar = false,
+  size = "md",
+  ...props
+}: FieldsetProps): JSX.Element => {
+  const componentProps = {
+    "aria-disabled": disabled,
+    className: clsx("coop-fieldset", className),
+    "data-error": error || undefined,
+    //"data-variant": variant !== "default" ? variant : undefined,
+    "data-hide-error": hideErrorBar || undefined,
+    // "data-orientation": orientation !== "vertical" ? orientation : undefined,
+    "data-size": size.length && size !== "md" ? size : undefined,
+    disabled,
+    ...props,
+  }
+
+  return <fieldset {...componentProps}>{children}</fieldset>
+}
+
+interface FieldsetFieldsProps {
+  /** **(Optional)** Specify whether all descendent Fields should render inside a box. */
+  boxed?: boolean
+  /** **(Optional)** Form elements inside the Fieldset.Fields container. */
+  children?: string | React.ReactNode
+  /** **(Optional)** Specify additional CSS classes to be applied to the component. */
+  className?: string
+  /** **(Optional)** Specify the CheckboxGroup orientation. */
+  orientation?: "horizontal" | "vertical"
+}
+
+export const FieldsetFields = ({
+  boxed = false,
+  children,
+  className,
+  orientation = "vertical",
+  ...props
+}: FieldsetFieldsProps): JSX.Element => {
+  const componentProps = {
+    className: clsx("coop-fieldset-fields", className),
+    "data-boxed": boxed || undefined,
+    "data-orientation": orientation !== "vertical" ? orientation : undefined,
+    ...props,
+  }
+
+  return <div {...componentProps}>{children}</div>
+}
+
+FieldsetFields.displayName = "Fieldset.Fields"
+
+const FieldsetLegend = (props: LegendProps) => <BaseLegend {...props} />
+
+FieldsetLegend.displayName = "Fieldset.Legend"
+
+const FieldsetHint = (props: HintProps) => <BaseHint {...props} />
+
+FieldsetHint.displayName = "Fieldset.Hint"
+
+const FieldsetError = (props: ErrorProps) => <BaseError {...props} />
+
+FieldsetError.displayName = "Fieldset.Error"
+
+export const Fieldset = Object.assign(Root, {
+  Error: FieldsetError,
+  Fields: FieldsetFields,
+  Hint: FieldsetHint,
+  Legend: FieldsetLegend,
+})
+
+export default Fieldset

package/src/components/Fieldset/index.ts

@@ -0,0 +1,5 @@
+import Fieldset from "./Fieldset"
+
+export default Fieldset
+export { Fieldset }
+export * from "./Fieldset"

package/src/components/Pill/Pill.tsx

@@ -4,8 +4,8 @@ import clsx from "clsx"
 import React from "react"
 import { StandardSizes } from "src/types"
 
+import { useSlots } from "../../hooks/useSlots"
 import { hasUserBg } from "../../utils"
-import { getSlots } from "../../utils/slots"
 
 export interface PillProps extends HTMLAttributes<HTMLAnchorElement> {
   /** **(Optional)** Specify a custom element to override default `a` or `span`. */
@@ -43,7 +43,7 @@ export const Pill = ({
 }: PillProps): JSX.Element => {
   let element: PillProps["as"] = href ? "a" : "span"
 
-  const slots = getSlots(componentSlots, children)
+  const slots = useSlots(componentSlots, children)
 
   if (as) {
     element = as

package/src/components/Radio/Radio.tsx

@@ -0,0 +1,47 @@
+import clsx from "clsx"
+import { type InputHTMLAttributes, type JSX, useId } from "react"
+import { StandardSizes } from "src/types"
+
+export interface RadioProps extends Omit<InputHTMLAttributes<HTMLInputElement>, "size" | "type"> {
+  /** **(Optional)** Specify additional CSS classes to be applied to the component. */
+  className?: string
+  /** **(Optional)** Specify whether the Radio should be disabled. Refer to Experience Library guidance on disabled form controls and accessibility.  */
+  disabled?: boolean
+  /** **(Optional)** Specify the Radio error state. */
+  error?: boolean
+  /** **(Optional)** Specify the Radio id. Will be auto-generated if not set. */
+  id?: string
+  /** Specify the Radio name. */
+  name: string
+  /** **(Optional)** Specify the Radio size. */
+  size?: StandardSizes
+}
+
+export const Radio = ({
+  className,
+  disabled,
+  error = false,
+  id,
+  name,
+  size = "md",
+  ...props
+}: RadioProps): JSX.Element => {
+  const internalId = useId()
+
+  id = id ?? internalId
+
+  const componentProps = {
+    className: clsx("coop-radio", className),
+    "data-error": error || undefined,
+    "data-size": size.length && size !== "md" ? size : undefined,
+    disabled,
+    id,
+    name,
+    type: "radio",
+    ...props,
+  }
+  //const formItemProps = { "aria-disabled": disabled ? true : undefined }
+  return <input {...componentProps} />
+}
+
+export default Radio

package/src/components/Radio/index.ts

@@ -0,0 +1,5 @@
+import Radio from "./Radio"
+
+export default Radio
+export { Radio }
+export * from "./Radio"

package/src/components/{SearchBox/SearchBox.tsx → Searchbox/Searchbox.tsx}

@@ -5,13 +5,13 @@ import type { InputHTMLAttributes, JSX } from "react"
 import clsx from "clsx"
 import React, { useCallback, useId, useState } from "react"
 
-import { StandardSizes } from "../../../src/types"
+import { StandardSizes } from "../../types"
 import { Button, type ButtonProps } from "../Button"
-import { FieldLabel } from "../FieldLabel"
+import { Label as FieldLabel } from "../FieldMarkers/Label"
 import { SearchIcon } from "../Icon"
 import TextInput, { TextInputProps } from "../TextInput"
 
-export interface SearchBoxProps
+export interface SearchboxProps
   extends Omit<InputHTMLAttributes<HTMLInputElement>, "size" | "type"> {
   /** **(Optional)** Specify a server endpoint to submit the form. Will be ignored if onSubmit is also set. */
   action?: string
@@ -27,13 +27,13 @@ export interface SearchBoxProps
   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. */
+  /** **(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. */
   onSubmit?: React.FormEventHandler<HTMLElement> | undefined
   /** **(Optional)** Specify the TextInput placeholder text Do not use in place of a form label. */
   placeholder?: string
-  /** **(Optional)** Specify the SearchBox size. */
+  /** **(Optional)** Specify the Searchbox size. */
   size?: StandardSizes
-  /** **(Optional)** Specify the SearchBox variant. */
+  /** **(Optional)** Specify the Searchbox variant. */
   variant?:
     | "green"
     | "blue"
@@ -45,18 +45,19 @@ export interface SearchBoxProps
     | "grey-ghost"
 }
 
-const defaultButtonProps: SearchBoxProps["button"] = {
+const defaultButtonProps: SearchboxProps["button"] = {
   label: React.createElement(SearchIcon, { alt: "Search", stroke: "currentColor", strokeWidth: 2 }),
   loadingText: "",
 }
 
-export const SearchBox = ({
+export const Searchbox = ({
   action,
   "aria-placeholder": ariaPlaceholder,
   autoCapitalize = "off",
   autoComplete = "off",
   button = defaultButtonProps,
   className,
+
   id,
   label,
   labelVisible = false,
@@ -66,7 +67,7 @@ export const SearchBox = ({
   size = "md",
   variant = "green",
   ...props
-}: SearchBoxProps): JSX.Element => {
+}: SearchboxProps): JSX.Element => {
   const [isPending, setIsPending] = useState(false)
   const internalId = useId()
 
@@ -91,8 +92,8 @@ export const SearchBox = ({
 
   const formProps = {
     action: action ?? undefined,
-    className: clsx("coop-search-box", className),
-    //"data-size": size && size !== "md" ? size : undefined,
+    className: clsx("coop-searchbox", className),
+    "data-size": size && size !== "md" ? size : undefined,
     "data-variant": variant.length && variant !== "green" ? variant : undefined,
     onSubmit: onSubmit ? handleSubmit : undefined,
   }
@@ -124,12 +125,13 @@ export const SearchBox = ({
           {label}
         </FieldLabel>
       )}
-      <div className="coop-search-box--inner">
+      <div className="coop-searchbox--inner">
         <TextInput {...inputProps} />
+
         <Button {...buttonProps}>{button.label}</Button>
       </div>
     </form>
   )
 }
 
-export default SearchBox
+export default Searchbox

package/src/components/Searchbox/index.ts

@@ -0,0 +1,5 @@
+import Searchbox from "./Searchbox"
+
+export default Searchbox
+export { Searchbox }
+export * from "./Searchbox"

package/src/components/TextInput/TextInput.tsx

@@ -1,12 +1,9 @@
 import type { InputHTMLAttributes, JSX } from "react"
 
 import clsx from "clsx"
-import { useId } from "react"
 
-import { FormFieldError, StandardSizes } from "../../../src/types"
-import { FieldError } from "../FieldError"
-import { FieldHint } from "../FieldHint"
-import { FieldLabel } from "../FieldLabel"
+import { StandardSizes } from "../../../src/types"
+import { useId } from "../../hooks/useId"
 
 export interface TextInputProps
   extends Omit<InputHTMLAttributes<HTMLInputElement>, "prefix" | "size" | "type"> {
@@ -14,24 +11,10 @@ export interface TextInputProps
   className?: string
   /** **(Optional)** Specify whether the TextInput should be disabled. Refer to Experience Library guidance on disabled form controls and accessibility. */
   disabled?: boolean
-  /** **(Optional)** Specify the TextInput error state.
-   *
-   * This is an instance of `FormFieldError`. You can provide either an object with a `message` key, or a boolean value if you need to render the message independently.
-   */
-  error?: FormFieldError
-  /** **(Optional)** Specify the TextInput hint.
-   *
-   * This text is rendered under the label to provide further guidance for users.
-   */
-  hint?: string
+  /** **(Optional)** Specify the TextInput error state. */
+  error?: boolean
   /** **(Optional)** Specify the TextInput id. Will be auto-generated if not set. */
   id?: string
-  /** **(Optional)** Specify the TextInput label.
-   *
-   * This property is optional in case you need to render your own label, but all form elements *must* provide a label. */
-  label?: string
-  /** **(Optional)** Specify whether the label should be visible to humans or screen readers. */
-  labelVisible?: boolean
   /** Specify the TextInput name. */
   name: string
   /** **(Optional)** Specify the TextInput placeholder text. Do not use in place of a form label. */
@@ -43,7 +26,19 @@ export interface TextInputProps
   /** **(Optional)** Specify the suffix. It can be any valid JSX or string. */
   suffix?: React.ReactNode
   /** **(Optional)** Specify the TextInput type. */
-  type?: "text" | "email" | "number" | "password" | "search" | "tel" | "url"
+  type?:
+    | "text"
+    | "email"
+    | "number"
+    | "password"
+    | "search"
+    | "tel"
+    | "url"
+    | "date"
+    | "datetime-local"
+    | "week"
+    | "month"
+    | "time"
 }
 
 export const TextInput = ({
@@ -51,10 +46,7 @@ export const TextInput = ({
   className,
   disabled,
   error = false,
-  hint,
   id,
-  label,
-  labelVisible = true,
   name,
   placeholder,
   prefix,
@@ -63,39 +55,26 @@ export const TextInput = ({
   type = "text",
   ...props
 }: TextInputProps): JSX.Element => {
-  const internalId = useId()
-
-  id = id ?? internalId
+  const uid = useId(id)
 
   const componentProps = {
     "aria-placeholder": placeholder ?? ariaPlaceholder ?? undefined,
     className: clsx("coop-text-input", className),
-    "data-error": error ? "" : undefined,
+    "data-error": error || undefined,
     "data-size": size.length && size !== "md" ? size : undefined,
     disabled,
-    id,
+    id: uid,
     name,
     placeholder,
     type,
     ...props,
   }
-  const formItemProps = { "aria-disabled": disabled ? true : undefined }
+  //const formItemProps = { "aria-disabled": disabled ? true : undefined }
   return (
-    <div className="coop-form-item" {...formItemProps}>
-      {label && (
-        <FieldLabel htmlFor={id} isVisible={labelVisible}>
-          {label}
-        </FieldLabel>
-      )}
-
-      {hint && <FieldHint>{hint}</FieldHint>}
-
-      {typeof error === "object" && error?.message && <FieldError>{error.message}</FieldError>}
-      <div className="coop-text-input-wrapper">
-        {prefix && <span className="coop-text-input--prefix">{prefix}</span>}
-        <input {...componentProps} />
-        {suffix && <span className="coop-text-input--suffix">{suffix}</span>}
-      </div>
+    <div className="coop-text-input-wrapper">
+      {prefix && <span className="coop-text-input--prefix">{prefix}</span>}
+      <input {...componentProps} />
+      {suffix && <span className="coop-text-input--suffix">{suffix}</span>}
     </div>
   )
 }