@coopdigital/react 0.52.3 → 0.54.0

package/src/components/Searchbox/Searchbox.tsx

@@ -1,22 +1,20 @@
 "use client"
 
-import type { InputHTMLAttributes, JSX, Ref } from "react"
+import type { FormHTMLAttributes, JSX, Ref } from "react"
 
 import clsx from "clsx"
 import React, { useCallback, useState } from "react"
 
 import { useId } from "../../hooks/useId"
+import { useSlots } from "../../hooks/useSlots"
 import { StandardSizes } from "../../types"
+import { hasUserBorder } from "../../utils"
 import { Button, type ButtonProps } from "../Button"
 import Field from "../Field"
-import { Label as FieldLabel } from "../FieldMarkers/Label"
-import { SearchIcon } from "../Icon"
+import { SearchIcon } from "../icons"
 import TextInput, { TextInputProps } from "../TextInput"
 
-export interface SearchboxProps extends Omit<
-  InputHTMLAttributes<HTMLInputElement>,
-  "size" | "type"
-> {
+export interface SearchboxProps extends FormHTMLAttributes<HTMLFormElement> {
   /** **(Optional)** 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. */
@@ -40,46 +38,40 @@ export interface SearchboxProps extends Omit<
   /** **(Optional)** Specify the Searchbox size. */
   size?: StandardSizes
   /** **(Optional)** Specify the Searchbox variant. */
-  variant?:
-    | "green"
-    | "blue"
-    | "white"
-    | "grey"
-    | "green-ghost"
-    | "blue-ghost"
-    | "white-ghost"
-    | "grey-ghost"
+  variant?: "solid" | "ghost"
 }
 
-const defaultButtonProps: SearchboxProps["button"] = {
-  label: React.createElement(SearchIcon, { alt: "Search", stroke: "currentColor", strokeWidth: 2 }),
-  loadingText: "",
+const componentSlots = {
+  SearchboxButton: null,
+  SearchboxInput: null,
 }
 
+const defaultButtonText = React.createElement(SearchIcon, {
+  alt: "Search",
+  stroke: "currentColor",
+  strokeWidth: 2,
+})
+
 export const Searchbox = ({
   action,
-  "aria-placeholder": ariaPlaceholder,
-  autoCapitalize = "off",
-  autoComplete = "off",
-  button = defaultButtonProps,
+  children,
   className,
-
   id,
   label,
   labelVisible = false,
-  name = "query",
   onSubmit,
-  placeholder,
   ref,
   size = "md",
-  variant = "green",
+  variant = "solid",
   ...props
 }: SearchboxProps): JSX.Element => {
+  const slots = useSlots(componentSlots, children)
+
   const [isPending, setIsPending] = useState(false)
   const uid = useId(id)
 
   const handleSubmit = useCallback(
-    async (event: React.FormEvent<HTMLFormElement>) => {
+    async (event: React.SubmitEvent<HTMLFormElement>) => {
       event.preventDefault()
 
       if (isPending || !onSubmit) return
@@ -95,51 +87,69 @@ export const Searchbox = ({
     [onSubmit, isPending]
   )
 
+  let borderClass = ""
+  if (!hasUserBorder(className)) {
+    borderClass = variant === "ghost" ? "border-teal" : "border-grey"
+  }
+
   const formProps = {
     action: action ?? undefined,
-    className: clsx("coop-searchbox", className),
+    className: clsx("coop-searchbox", borderClass, className),
     "data-size": size && size !== "md" ? size : undefined,
-    "data-variant": variant.length && variant !== "green" ? variant : undefined,
-    id: uid,
+    "data-variant": variant.length && variant !== "solid" ? variant : undefined,
+    id: uid + "-form",
     onSubmit: onSubmit ? handleSubmit : undefined,
+    ...props,
   }
 
-  const buttonProps: ButtonProps = {
-    className: button?.className,
-    isLoading: isPending,
-    loadingText: button?.loadingText ?? "",
-    size,
-    variant,
-  }
+  slots.SearchboxButton = React.cloneElement(
+    slots.SearchboxButton as React.ReactElement<ButtonProps>,
+    {
+      isLoading: isPending,
+      size,
+    }
+  )
 
-  const inputProps: TextInputProps = {
-    "aria-placeholder": placeholder ?? ariaPlaceholder ?? undefined,
-    autoCapitalize,
-    autoComplete,
-    id: uid + "--input",
-    name,
-    placeholder,
-    size,
-    type: "search",
-    ...props,
-  }
+  slots.SearchboxInput = React.cloneElement(
+    slots.SearchboxInput as React.ReactElement<TextInputProps>,
+    {
+      autoCapitalize: "off",
+      id: uid,
+      size,
+    }
+  )
 
   const labelProps = {
-    htmlFor: uid + "--input",
+    htmlFor: uid,
     isVisible: labelVisible,
   }
 
   return (
     <form {...formProps} ref={ref}>
-      {label && <FieldLabel {...labelProps}>{label}</FieldLabel>}
-      <div className="coop-searchbox--inner">
-        <Field>
-          <TextInput {...inputProps} />
-        </Field>
-        <Button {...buttonProps}>{button.label}</Button>
+      {label && <Field.Label {...labelProps}>{label}</Field.Label>}
+      <div className={clsx("coop-searchbox--inner")}>
+        <Field>{slots.SearchboxInput}</Field>
+        {slots.SearchboxButton}
       </div>
     </form>
   )
 }
 
+const SearchboxButton = ({ children, ...props }: ButtonProps) => {
+  const buttonProps = {
+    children: children ?? defaultButtonText,
+    ...props,
+  }
+
+  return <Button {...buttonProps} />
+}
+
+const SearchboxInput = (props: TextInputProps) => <TextInput {...props} />
+
+Searchbox.Button = SearchboxButton
+Searchbox.Input = SearchboxInput
+
+SearchboxButton.config = { name: "SearchboxButton" }
+SearchboxInput.config = { isField: true, name: "SearchboxInput" }
+
 export default Searchbox

package/src/components/Select/Select.tsx

@@ -80,8 +80,6 @@ const SelectOptionGroup = ({ children, ...props }: SelectOptionGroupProps): JSX.
   return <optgroup {...props}>{children}</optgroup>
 }
 
-SelectOptionGroup.displayName = "Select.OptionGroup"
-
 const SelectOption = ({ children, className, ...props }: SelectOptionProps): JSX.Element => {
   return (
     <option className={clsx("coop-select--option", className)} {...props}>
@@ -90,7 +88,8 @@ const SelectOption = ({ children, className, ...props }: SelectOptionProps): JSX
   )
 }
 
-SelectOption.displayName = "Select.Option"
+SelectOption.config = { name: "SelectOption" }
+SelectOptionGroup.config = { name: "SelectOptionGroup" }
 
 Select.OptionGroup = SelectOptionGroup
 Select.Option = SelectOption

package/src/components/Signpost/Signpost.tsx

@@ -3,7 +3,7 @@ import type { ForwardRefExoticComponent, HTMLAttributes, JSX, Ref } from "react"
 import clsx from "clsx"
 import React from "react"
 
-import { ChevronRightIcon } from "../Icon"
+import { ChevronRightIcon } from "../icons"
 import { Image, ImageProps } from "../Image"
 
 export interface SignpostProps extends HTMLAttributes<HTMLDivElement> {

package/src/components/Squircle/Squircle.tsx

@@ -22,7 +22,7 @@ export const Squircle = ({
   ...props
 }: SquircleProps): JSX.Element => {
   const componentProps = {
-    className: clsx("coop-squircle", !hasUserBg(className) && "bg-offer-red", className),
+    className: clsx("coop-squircle", !hasUserBg(className) && "bg-offer", className),
     "data-size": size.length && size !== "lg" ? size : undefined,
     ...props,
   }

package/src/hooks/useSlots.ts

@@ -1,4 +1,5 @@
 import React from "react"
+import { ReactNodeWithConfig } from "src/types"
 
 type Slots<T> = Record<keyof T, React.ReactNode>
 
@@ -6,10 +7,17 @@ export function isKey<T extends object>(x: T, k: PropertyKey): k is keyof T {
   return k in x
 }
 
-export function getSlotName(node: React.ReactNode): string | false {
-  return React.isValidElement(node) && node.type && typeof node.type !== "string"
-    ? node.type.name
-    : false
+export function getSlotName(node: ReactNodeWithConfig): string | false {
+  if (
+    React.isValidElement(node) &&
+    node.type &&
+    typeof node.type !== "string" &&
+    typeof node.type !== "symbol"
+  ) {
+    return node.type?.config?.name ?? node.type.name
+  }
+
+  return false
 }
 
 export function useSlots<T>(

package/src/types/colors.ts

@@ -30,12 +30,10 @@ export type Lights =
   | "light-purple"
   | "light-red"
 
-export type Greys = "dark-grey" | "mid-dark-grey" | "mid-grey" | "mid-light-grey" | "light-grey"
-
 export type White = "white"
 export type Black = "black"
 export type None = "none"
 export type BrandBlue = "brand-blue"
-export type OfferRed = "offer-red"
+export type OfferRed = "offer"
 export type Green = "green"
 export type Blue = "blue"

package/src/types/index.ts

@@ -15,4 +15,5 @@ export interface ComponentConfig {
   fieldSuffix?: string
   isField?: boolean
   isInline?: boolean
+  name?: string
 }

package/src/utils/index.ts

@@ -5,6 +5,10 @@ export const hasUserBg = (userClasses?: string) => {
   return typeof userClasses === "string" && userClasses?.includes("bg-") ? true : false
 }
 
+export const hasUserBorder = (userClasses?: string) => {
+  return typeof userClasses === "string" && userClasses?.includes("border-") ? true : false
+}
+
 export const bgClassToColor = (userClasses: string) => {
   return /bg-([^\s]+)/.exec(userClasses)?.[1] ?? null