@coopdigital/react 0.17.0 → 0.18.1

package/src/components/Icon/LocationIcon.tsx

@@ -1,6 +1,23 @@
-export const LocationIcon = () => {
+import { type SVGProps, useId } from "react"
+
+interface IconProps extends SVGProps<SVGSVGElement> {
+  alt?: string
+}
+
+export const LocationIcon = ({ alt, className, ...props }: IconProps) => {
+  const id = useId()
+  const componentProps = {
+    "aria-labelledby": alt ? id : undefined,
+    className: `coop-icon ${className ?? ""}`.trim(),
+    "data-icon": "location",
+    fill: "none",
+    role: alt ? "img" : undefined,
+    viewBox: "0 0 32 32",
+    ...props,
+  }
   return (
-    <svg className="coop-icon" fill="none" viewBox="0 0 32 32" xmlns="http://www.w3.org/2000/svg">
+    <svg {...componentProps}>
+      {alt ? <title id={id}>{alt}</title> : null}
       <path
         d="M28 6.3a8 8 0 0 0-4.92-5.1 22.68 22.68 0 0 0-14.56 0A7.39 7.39 0 0 0 3.9 6.3a17.8 17.8 0 0 0-.9 5.9c0 4.1 1.51 12.2 11.74 19.3l.41.3a1.45 1.45 0 0 0 .7.2 1.9 1.9 0 0 0 .7-.2h.1l.5-.3C27.39 24.4 29 16.3 29 12.2a21.5 21.5 0 0 0-1-5.9m-5.53-3.1a6.16 6.16 0 0 1 3.72 3.7 20 20 0 0 1 .8 5.3c0 4.6-2 9.1-5.82 13.2a31 31 0 0 1-4.72 4.1l-.1.1c-.1 0-.1.1-.2.1l-.2.2h-.1c-.1 0-.1-.1-.2-.1a.1.1 0 0 1-.1-.1 37.5 37.5 0 0 1-4.72-4.1C6.91 21.5 4.91 17 4.91 12.3a20.7 20.7 0 0 1 .8-5.3 5.72 5.72 0 0 1 3.61-3.8 21.1 21.1 0 0 1 13.15 0"
         fill="currentColor"

package/src/components/Icon/MailIcon.tsx

@@ -1,6 +1,23 @@
-export const MailIcon = () => {
+import { type SVGProps, useId } from "react"
+
+interface IconProps extends SVGProps<SVGSVGElement> {
+  alt?: string
+}
+
+export const MailIcon = ({ alt, className, ...props }: IconProps) => {
+  const id = useId()
+  const componentProps = {
+    "aria-labelledby": alt ? id : undefined,
+    className: `coop-icon ${className ?? ""}`.trim(),
+    "data-icon": "mail",
+    fill: "none",
+    role: alt ? "img" : undefined,
+    viewBox: "0 0 32 32",
+    ...props,
+  }
   return (
-    <svg className="coop-icon" fill="none" viewBox="0 0 32 32" xmlns="http://www.w3.org/2000/svg">
+    <svg {...componentProps}>
+      {alt ? <title id={id}>{alt}</title> : null}
       <path
         d="M32 25.61V6.39a1.4 1.4 0 0 0 0-.2.6.6 0 0 0-.15-.19s0-.08-.05-.11 0 0-.05 0a1 1 0 0 0-.15-.14 1 1 0 0 0-.16-.11l-.17-.05H.73l-.17.07a.5.5 0 0 0-.16.1 1 1 0 0 0-.15.14s-.08.1-.1.1l-.09.18a1.4 1.4 0 0 0 0 .2V25.6a1.4 1.4 0 0 0 0 .2c0 .07.06.12.09.18a1 1 0 0 0 .05.11 1 1 0 0 0 .24.2.5.5 0 0 0 .09.06 1 1 0 0 0 .42.1H31a1 1 0 0 0 .42-.1.5.5 0 0 0 .09-.06 1 1 0 0 0 .24-.2h.05s0-.07.05-.1a.7.7 0 0 0 .09-.19 1 1 0 0 0 .06-.19M2 8.49 12.06 16 2 23.51Zm14 8L4 7.5h24Zm-2.26.81 1.66 1.24.11.06.1.05a1.1 1.1 0 0 0 .39.09 1.1 1.1 0 0 0 .39-.09l.1-.05.11-.06 1.66-1.24L28 24.5H4Zm6.19-1.3L30 8.49v15Z"
         fill="currentColor"

package/src/components/Icon/MenuIcon.tsx

@@ -1,6 +1,23 @@
-export const MenuIcon = () => {
+import { type SVGProps, useId } from "react"
+
+interface IconProps extends SVGProps<SVGSVGElement> {
+  alt?: string
+}
+
+export const MenuIcon = ({ alt, className, ...props }: IconProps) => {
+  const id = useId()
+  const componentProps = {
+    "aria-labelledby": alt ? id : undefined,
+    className: `coop-icon ${className ?? ""}`.trim(),
+    "data-icon": "menu",
+    fill: "none",
+    role: alt ? "img" : undefined,
+    viewBox: "0 0 32 32",
+    ...props,
+  }
   return (
-    <svg className="coop-icon" fill="none" viewBox="0 0 32 32" xmlns="http://www.w3.org/2000/svg">
+    <svg {...componentProps}>
+      {alt ? <title id={id}>{alt}</title> : null}
       <path
         d="M28 5H4a1 1 0 0 1 0-2h24a1 1 0 0 1 0 2M28 17H4a1 1 0 0 1 0-2h24a1 1 0 0 1 0 2M28 29H4a1 1 0 0 1 0-2h24a1 1 0 0 1 0 2"
         fill="currentColor"

package/src/components/Icon/MessageIcon.tsx

@@ -1,6 +1,23 @@
-export const MessageIcon = () => {
+import { type SVGProps, useId } from "react"
+
+interface IconProps extends SVGProps<SVGSVGElement> {
+  alt?: string
+}
+
+export const MessageIcon = ({ alt, className, ...props }: IconProps) => {
+  const id = useId()
+  const componentProps = {
+    "aria-labelledby": alt ? id : undefined,
+    className: `coop-icon ${className ?? ""}`.trim(),
+    "data-icon": "message",
+    fill: "none",
+    role: alt ? "img" : undefined,
+    viewBox: "0 0 32 32",
+    ...props,
+  }
   return (
-    <svg className="coop-icon" fill="none" viewBox="0 0 32 32" xmlns="http://www.w3.org/2000/svg">
+    <svg {...componentProps}>
+      {alt ? <title id={id}>{alt}</title> : null}
       <path
         d="M30 31a1 1 0 0 1-.75-.34l-7.64-8.6H2a1 1 0 0 1-1-1V2a1 1 0 0 1 1-1h28a1 1 0 0 1 .71.29A1 1 0 0 1 31 2v28a1 1 0 0 1-.65.93.8.8 0 0 1-.35.07M3 20.06h19.06a1 1 0 0 1 .75.33l6.19 7V3H3Z"
         fill="currentColor"

package/src/components/Icon/MinusIcon.tsx

@@ -1,6 +1,23 @@
-export const MinusIcon = () => {
+import { type SVGProps, useId } from "react"
+
+interface IconProps extends SVGProps<SVGSVGElement> {
+  alt?: string
+}
+
+export const MinusIcon = ({ alt, className, ...props }: IconProps) => {
+  const id = useId()
+  const componentProps = {
+    "aria-labelledby": alt ? id : undefined,
+    className: `coop-icon ${className ?? ""}`.trim(),
+    "data-icon": "minus",
+    fill: "none",
+    role: alt ? "img" : undefined,
+    viewBox: "0 0 32 32",
+    ...props,
+  }
   return (
-    <svg className="coop-icon" fill="none" viewBox="0 0 32 32" xmlns="http://www.w3.org/2000/svg">
+    <svg {...componentProps}>
+      {alt ? <title id={id}>{alt}</title> : null}
       <path
         d="M24.7 16.71a1 1 0 0 1-.7.29H8a1 1 0 1 1 0-2h16a1 1 0 0 1 1 1 1 1 0 0 1-.3.71"
         fill="currentColor"

package/src/components/Icon/OpenNewIcon.tsx

@@ -1,6 +1,23 @@
-export const OpenNewIcon = () => {
+import { type SVGProps, useId } from "react"
+
+interface IconProps extends SVGProps<SVGSVGElement> {
+  alt?: string
+}
+
+export const OpenNewIcon = ({ alt, className, ...props }: IconProps) => {
+  const id = useId()
+  const componentProps = {
+    "aria-labelledby": alt ? id : undefined,
+    className: `coop-icon ${className ?? ""}`.trim(),
+    "data-icon": "open-new",
+    fill: "none",
+    role: alt ? "img" : undefined,
+    viewBox: "0 0 32 32",
+    ...props,
+  }
   return (
-    <svg className="coop-icon" fill="none" viewBox="0 0 32 32" xmlns="http://www.w3.org/2000/svg">
+    <svg {...componentProps}>
+      {alt ? <title id={id}>{alt}</title> : null}
       <path
         d="M14.16 18.84a1 1 0 0 1-.71-.29 1 1 0 0 1 0-1.42L30 .59a1 1 0 0 1 1.41 0 1 1 0 0 1 0 1.42L14.87 18.55a1 1 0 0 1-.71.29"
         fill="currentColor"

package/src/components/Icon/PencilIcon.tsx

@@ -1,6 +1,23 @@
-export const PencilIcon = () => {
+import { type SVGProps, useId } from "react"
+
+interface IconProps extends SVGProps<SVGSVGElement> {
+  alt?: string
+}
+
+export const PencilIcon = ({ alt, className, ...props }: IconProps) => {
+  const id = useId()
+  const componentProps = {
+    "aria-labelledby": alt ? id : undefined,
+    className: `coop-icon ${className ?? ""}`.trim(),
+    "data-icon": "pencil",
+    fill: "none",
+    role: alt ? "img" : undefined,
+    viewBox: "0 0 32 32",
+    ...props,
+  }
   return (
-    <svg className="coop-icon" fill="none" viewBox="0 0 32 32" xmlns="http://www.w3.org/2000/svg">
+    <svg {...componentProps}>
+      {alt ? <title id={id}>{alt}</title> : null}
       <path
         d="M31.7 6.12 25.88.3a1 1 0 0 0-1.4 0L1.3 23.47a.86.86 0 0 0-.3.6L0 30.9a1.14 1.14 0 0 0 .3.8.91.91 0 0 0 .7.3h.1l6.82-1a.61.61 0 0 0 .61-.3L31.7 7.52a1 1 0 0 0 0-1.4M7.22 29l-3.57.56L5.08 28a1 1 0 0 0 0-1.42 1 1 0 0 0-1.41.05L2.39 28l.52-3.29 1.91-1.91 4.12 4.52Zm3.14-3.11-4.12-4.54L25.18 2.41l4.41 4.41Z"
         fill="currentColor"

package/src/components/Icon/PhoneIcon.tsx

@@ -1,6 +1,23 @@
-export const PhoneIcon = () => {
+import { type SVGProps, useId } from "react"
+
+interface IconProps extends SVGProps<SVGSVGElement> {
+  alt?: string
+}
+
+export const PhoneIcon = ({ alt, className, ...props }: IconProps) => {
+  const id = useId()
+  const componentProps = {
+    "aria-labelledby": alt ? id : undefined,
+    className: `coop-icon ${className ?? ""}`.trim(),
+    "data-icon": "phone",
+    fill: "none",
+    role: alt ? "img" : undefined,
+    viewBox: "0 0 32 32",
+    ...props,
+  }
   return (
-    <svg className="coop-icon" fill="none" viewBox="0 0 32 32" xmlns="http://www.w3.org/2000/svg">
+    <svg {...componentProps}>
+      {alt ? <title id={id}>{alt}</title> : null}
       <path
         d="M28.88 21.26c-2.26-1.72-5.46-2.84-7-1.42-.51.51-1.65 1.52-5.15-1.42-5.73-5.37-5.47-7.29-4.44-8.42 1.44-1.52.41-4.66-1.34-6.89C8.78.38 6.21-.63 4.14.38a6.53 6.53 0 0 0-4 4.67c-.94 4.66 3.49 10.64 7.3 14.89.72.81 1.45 1.52 2.17 2.33l.41.41C14.45 27 20.53 32 25.58 32a4.4 4.4 0 0 0 1.14-.1 6.64 6.64 0 0 0 5-3.95c.87-2.03-.16-4.56-2.84-6.69m-13.6-1.32c2.06 1.72 5.25 3.75 7.93 1.42.42-.3 2.37 0 4.44 1.52 1.44 1.12 2.78 2.84 2.06 4.12a4.45 4.45 0 0 1-3.4 2.84c-3.3.51-8.77-2.63-14.85-8.71l-.31-.31c-.72-.71-1.44-1.41-2.16-2.23H9C4 13.15 1.57 8.49 2.19 5.45a4.69 4.69 0 0 1 2.88-3.24c1.34-.71 3.09.71 4.13 2.13 1.54 2 1.85 3.95 1.44 4.35-2.89 3 .1 6.89 3.92 10.64"
         fill="currentColor"

package/src/components/Icon/QuestionIcon.tsx

@@ -1,6 +1,23 @@
-export const QuestionIcon = () => {
+import { type SVGProps, useId } from "react"
+
+interface IconProps extends SVGProps<SVGSVGElement> {
+  alt?: string
+}
+
+export const QuestionIcon = ({ alt, className, ...props }: IconProps) => {
+  const id = useId()
+  const componentProps = {
+    "aria-labelledby": alt ? id : undefined,
+    className: `coop-icon ${className ?? ""}`.trim(),
+    "data-icon": "question",
+    fill: "none",
+    role: alt ? "img" : undefined,
+    viewBox: "0 0 32 32",
+    ...props,
+  }
   return (
-    <svg className="coop-icon" fill="none" viewBox="0 0 32 32" xmlns="http://www.w3.org/2000/svg">
+    <svg {...componentProps}>
+      {alt ? <title id={id}>{alt}</title> : null}
       <path
         d="M16 0a16 16 0 1 0 16 16A16 16 0 0 0 16 0m0 30a14 14 0 1 1 14-14 14 14 0 0 1-14 14"
         fill="currentColor"

package/src/components/Icon/ScooterIcon.tsx

@@ -1,6 +1,23 @@
-export const ScooterIcon = () => {
+import { type SVGProps, useId } from "react"
+
+interface IconProps extends SVGProps<SVGSVGElement> {
+  alt?: string
+}
+
+export const ScooterIcon = ({ alt, className, ...props }: IconProps) => {
+  const id = useId()
+  const componentProps = {
+    "aria-labelledby": alt ? id : undefined,
+    className: `coop-icon ${className ?? ""}`.trim(),
+    "data-icon": "scooter",
+    fill: "none",
+    role: alt ? "img" : undefined,
+    viewBox: "0 0 32 32",
+    ...props,
+  }
   return (
-    <svg className="coop-icon" fill="none" viewBox="0 0 32 32" xmlns="http://www.w3.org/2000/svg">
+    <svg {...componentProps}>
+      {alt ? <title id={id}>{alt}</title> : null}
       <g clipPath="url(#a)" clipRule="evenodd" fill="currentColor" fillRule="evenodd">
         <path d="M41.292 18.293a1 1 0 0 1 1.414 0C43.88 19.465 44.6 21.014 44.6 22.8c0 3.452-2.747 6.2-6.2 6.2-3.333 0-6.08-2.622-6.2-5.964a1 1 0 1 1 2-.072 4.19 4.19 0 0 0 4.2 4.036c2.348 0 4.2-1.852 4.2-4.2 0-1.214-.48-2.265-1.307-3.093a1 1 0 0 1 0-1.414M1.1 23a9.28 9.28 0 0 1 9.3-9.3 9.28 9.28 0 0 1 9.3 9.3 1 1 0 0 1-1 1H2.1a1 1 0 0 1-1-1m2.067-1h14.466a7.28 7.28 0 0 0-7.233-6.3A7.28 7.28 0 0 0 3.167 22" />
         <path

package/src/components/Icon/SearchIcon.tsx

@@ -1,6 +1,23 @@
-export const SearchIcon = () => {
+import { type SVGProps, useId } from "react"
+
+interface IconProps extends SVGProps<SVGSVGElement> {
+  alt?: string
+}
+
+export const SearchIcon = ({ alt, className, ...props }: IconProps) => {
+  const id = useId()
+  const componentProps = {
+    "aria-labelledby": alt ? id : undefined,
+    className: `coop-icon ${className ?? ""}`.trim(),
+    "data-icon": "search",
+    fill: "none",
+    role: alt ? "img" : undefined,
+    viewBox: "0 0 32 32",
+    ...props,
+  }
   return (
-    <svg className="coop-icon" fill="none" viewBox="0 0 32 32" xmlns="http://www.w3.org/2000/svg">
+    <svg {...componentProps}>
+      {alt ? <title id={id}>{alt}</title> : null}
       <path
         d="M13.25 25.49a12.25 12.25 0 1 1 12.24-12.24 12.25 12.25 0 0 1-12.24 12.24m0-22.61a10.37 10.37 0 1 0 10.36 10.37A10.38 10.38 0 0 0 13.25 2.88"
         fill="currentColor"

package/src/components/Icon/SettingsIcon.tsx

@@ -1,6 +1,23 @@
-export const SettingsIcon = () => {
+import { type SVGProps, useId } from "react"
+
+interface IconProps extends SVGProps<SVGSVGElement> {
+  alt?: string
+}
+
+export const SettingsIcon = ({ alt, className, ...props }: IconProps) => {
+  const id = useId()
+  const componentProps = {
+    "aria-labelledby": alt ? id : undefined,
+    className: `coop-icon ${className ?? ""}`.trim(),
+    "data-icon": "settings",
+    fill: "none",
+    role: alt ? "img" : undefined,
+    viewBox: "0 0 32 32",
+    ...props,
+  }
   return (
-    <svg className="coop-icon" fill="none" viewBox="0 0 32 32" xmlns="http://www.w3.org/2000/svg">
+    <svg {...componentProps}>
+      {alt ? <title id={id}>{alt}</title> : null}
       <path
         d="M16 2a14 14 0 0 1 2.13.16v3.57l1.34.47a10.2 10.2 0 0 1 3.27 1.89l1.08.91 1.23-.71 1.86-1.08a14 14 0 0 1 2.14 3.69L27.18 12l-1.18.7.26 1.39a10.6 10.6 0 0 1 0 3.8L26 19.28l1.23.71 1.88 1.09a14.2 14.2 0 0 1-2.14 3.69l-1.86-1.08-1.28-.69-1.07.92a10.6 10.6 0 0 1-3.3 1.9l-1.33.47v3.57A14 14 0 0 1 16 30a14 14 0 0 1-2.13-.16v-3.57l-1.34-.47a10.2 10.2 0 0 1-3.27-1.9L8.18 23 7 23.69l-1.91 1.08A14.1 14.1 0 0 1 3 21.08L4.82 20l1.23-.71-.26-1.39a10.6 10.6 0 0 1 0-3.8l.26-1.39L4.82 12 3 10.92a14.5 14.5 0 0 1 2.08-3.69l1.86 1.08L8.16 9l1.08-.9a10.6 10.6 0 0 1 3.3-1.9l1.33-.47V2.16A14 14 0 0 1 16 2m0 21a7 7 0 1 0-7-7 7 7 0 0 0 7 7m0-23a16 16 0 0 0-3.53.39.76.76 0 0 0-.6.75v3.18a12.7 12.7 0 0 0-3.93 2.26L5.2 5a.75.75 0 0 0-.38-.1.77.77 0 0 0-.57.25 15.9 15.9 0 0 0-3.53 6.1.78.78 0 0 0 .35.91l2.75 1.59a12.3 12.3 0 0 0 0 4.52l-2.75 1.58a.79.79 0 0 0-.35.9 16 16 0 0 0 3.53 6.11.8.8 0 0 0 .57.25.7.7 0 0 0 .38-.11L8 25.42a12.3 12.3 0 0 0 3.92 2.26v3.18a.77.77 0 0 0 .61.75A16.2 16.2 0 0 0 16 32a16 16 0 0 0 3.53-.39.76.76 0 0 0 .6-.75v-3.18a12.5 12.5 0 0 0 3.92-2.26L26.8 27a.79.79 0 0 0 1-.15 16 16 0 0 0 3.53-6.11.8.8 0 0 0-.36-.9l-2.75-1.59a12.8 12.8 0 0 0 0-4.53l2.75-1.59a.78.78 0 0 0 .35-.9 16.1 16.1 0 0 0-3.53-6.1.76.76 0 0 0-.57-.26.73.73 0 0 0-.42.13l-2.75 1.57a12.3 12.3 0 0 0-3.92-2.26V1.14a.77.77 0 0 0-.61-.75A16.2 16.2 0 0 0 16 0m0 21a5 5 0 1 1 5-5 5 5 0 0 1-5 5"
         fill="currentColor"

package/src/components/Icon/TickAltIcon.tsx

@@ -1,6 +1,23 @@
-export const TickAltIcon = () => {
+import { type SVGProps, useId } from "react"
+
+interface IconProps extends SVGProps<SVGSVGElement> {
+  alt?: string
+}
+
+export const TickAltIcon = ({ alt, className, ...props }: IconProps) => {
+  const id = useId()
+  const componentProps = {
+    "aria-labelledby": alt ? id : undefined,
+    className: `coop-icon ${className ?? ""}`.trim(),
+    "data-icon": "tick-alt",
+    fill: "none",
+    role: alt ? "img" : undefined,
+    viewBox: "0 0 32 32",
+    ...props,
+  }
   return (
-    <svg className="coop-icon" fill="none" viewBox="0 0 32 32" xmlns="http://www.w3.org/2000/svg">
+    <svg {...componentProps}>
+      {alt ? <title id={id}>{alt}</title> : null}
       <path
         d="M12.7 22a1 1 0 0 1-.71-.29L8.3 18a1 1 0 0 1 0-1.42 1 1 0 0 1 1.41 0l3 3 9.41-9.38a1 1 0 0 1 1.42 0 1 1 0 0 1 0 1.41L13.4 21.69a1 1 0 0 1-.7.31"
         fill="currentColor"

package/src/components/Icon/TickIcon.tsx

@@ -1,6 +1,23 @@
-export const TickIcon = () => {
+import { type SVGProps, useId } from "react"
+
+interface IconProps extends SVGProps<SVGSVGElement> {
+  alt?: string
+}
+
+export const TickIcon = ({ alt, className, ...props }: IconProps) => {
+  const id = useId()
+  const componentProps = {
+    "aria-labelledby": alt ? id : undefined,
+    className: `coop-icon ${className ?? ""}`.trim(),
+    "data-icon": "tick",
+    fill: "none",
+    role: alt ? "img" : undefined,
+    viewBox: "0 0 32 32",
+    ...props,
+  }
   return (
-    <svg className="coop-icon" fill="none" viewBox="0 0 32 32" xmlns="http://www.w3.org/2000/svg">
+    <svg {...componentProps}>
+      {alt ? <title id={id}>{alt}</title> : null}
       <path
         d="M10.41 26a1 1 0 0 1-.71-.3l-6.42-6.59a1 1 0 0 1 1.44-1.39l5.69 5.85L27.28 6.3a1 1 0 1 1 1.44 1.4l-17.59 18a1 1 0 0 1-.72.3"
         fill="currentColor"

package/src/components/Icon/VanIcon.tsx

@@ -1,6 +1,23 @@
-export const VanIcon = () => {
+import { type SVGProps, useId } from "react"
+
+interface IconProps extends SVGProps<SVGSVGElement> {
+  alt?: string
+}
+
+export const VanIcon = ({ alt, className, ...props }: IconProps) => {
+  const id = useId()
+  const componentProps = {
+    "aria-labelledby": alt ? id : undefined,
+    className: `coop-icon ${className ?? ""}`.trim(),
+    "data-icon": "van",
+    fill: "none",
+    role: alt ? "img" : undefined,
+    viewBox: "0 0 32 32",
+    ...props,
+  }
   return (
-    <svg className="coop-icon" fill="none" viewBox="0 0 32 32" xmlns="http://www.w3.org/2000/svg">
+    <svg {...componentProps}>
+      {alt ? <title id={id}>{alt}</title> : null}
       <path
         d="M31.05 3H9.8a1 1 0 0 0-1 1v.2H3.06a1 1 0 0 0-1 .86L.89 12.64a1 1 0 0 0-.89 1v10a1 1 0 0 0 1 1h3a5 5 0 0 0 9.9 0H18a5 5 0 0 0 9.89 0h3.21a1 1 0 0 0 .72-.3 1 1 0 0 0 .18-.72V4a1 1 0 0 0-.95-1M3.91 6.24H8.8v6.38H2.93ZM8.92 27A3 3 0 0 1 6 24.71a2.9 2.9 0 0 1-.12-.83 3.1 3.1 0 0 1 .25-1.22 3 3 0 0 1 5.53 0 3.3 3.3 0 0 1 .24 1.22 3.3 3.3 0 0 1-.11.83A3 3 0 0 1 8.92 27M23 27a3 3 0 0 1-2.89-2.24 2.9 2.9 0 0 1-.12-.83 3.1 3.1 0 0 1 .25-1.22 3 3 0 0 1 5.53 0 3.3 3.3 0 0 1 .23 1.17 3.3 3.3 0 0 1-.11.83A3 3 0 0 1 23 27m4.87-4.29a5 5 0 0 0-9.74 0H13.8a5 5 0 0 0-9.75 0H2v-8h7.8a1 1 0 0 0 1-1V5.05H30v17.61Z"
         fill="currentColor"

package/src/components/Icon/WarningIcon.tsx

@@ -1,6 +1,23 @@
-export const WarningIcon = () => {
+import { type SVGProps, useId } from "react"
+
+interface IconProps extends SVGProps<SVGSVGElement> {
+  alt?: string
+}
+
+export const WarningIcon = ({ alt, className, ...props }: IconProps) => {
+  const id = useId()
+  const componentProps = {
+    "aria-labelledby": alt ? id : undefined,
+    className: `coop-icon ${className ?? ""}`.trim(),
+    "data-icon": "warning",
+    fill: "none",
+    role: alt ? "img" : undefined,
+    viewBox: "0 0 32 32",
+    ...props,
+  }
   return (
-    <svg className="coop-icon" fill="none" viewBox="0 0 32 32" xmlns="http://www.w3.org/2000/svg">
+    <svg {...componentProps}>
+      {alt ? <title id={id}>{alt}</title> : null}
       <path
         d="M2.35 28.08 16.06 4.46l13.71 23.62Zm29.32-.7L17.56 3.07A1.73 1.73 0 0 0 16.06 2a1.94 1.94 0 0 0-1.5 1.1L.35 27.38C-.45 28.77.15 30 1.85 30h28.32a1.6 1.6 0 0 0 1.5-2.62"
         fill="currentColor"

package/src/components/Icon/WriteIcon.tsx

@@ -1,6 +1,23 @@
-export const WriteIcon = () => {
+import { type SVGProps, useId } from "react"
+
+interface IconProps extends SVGProps<SVGSVGElement> {
+  alt?: string
+}
+
+export const WriteIcon = ({ alt, className, ...props }: IconProps) => {
+  const id = useId()
+  const componentProps = {
+    "aria-labelledby": alt ? id : undefined,
+    className: `coop-icon ${className ?? ""}`.trim(),
+    "data-icon": "write",
+    fill: "none",
+    role: alt ? "img" : undefined,
+    viewBox: "0 0 32 32",
+    ...props,
+  }
   return (
-    <svg className="coop-icon" fill="none" viewBox="0 0 32 32" xmlns="http://www.w3.org/2000/svg">
+    <svg {...componentProps}>
+      {alt ? <title id={id}>{alt}</title> : null}
       <path
         d="M19.67 10.13 17.9 11.9H7a1 1 0 0 1 0-2h12a1 1 0 0 1 .67.23M14.9 14.9l-2 2H7a1 1 0 0 1 0-2ZM20 15.9a1 1 0 0 1-1 1h-1.87l2-2a1 1 0 0 1 .82.59.85.85 0 0 1 .05.41M19 21.9H7a1 1 0 0 1 0-2h12a1 1 0 1 1 0 2"
         fill="currentColor"

package/src/components/SearchBox/SearchBox.tsx

@@ -0,0 +1,131 @@
+import React, { HTMLAttributes, useCallback, useId, useState } from "react"
+import { type JSX } from "react"
+
+import { Button, type ButtonProps } from "../Button"
+import { SearchIcon } from "../Icon"
+
+export interface SearchBoxProps extends HTMLAttributes<HTMLInputElement> {
+  /** **(Optional)** Server endpoint to submit the form. Will be ignored if onSubmit is also set. */
+  action?: string
+  /** **(Optional)** Whether or not to enable auto complete on the input field. Default: `off`. */
+  autoComplete?: "off" | "on"
+  /** **(Optional)** Props to forward to the Button element. Use `label` to set Button text. */
+  button?: Pick<ButtonProps, "className" | "loadingText"> & { label?: React.ReactNode }
+  /** **(Optional)** Receives any className to be applied to SearchBox component. */
+  className?: string
+  /** Receives the label to be applied to SearchBox component. */
+  label: string
+  /** **(Optional)** Receives whether label is visible to human or only screen readers. */
+  labelVisible?: boolean
+  /** **(Optional)** Name of the input element, 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. */
+  onSubmit?: React.FormEventHandler<HTMLElement> | undefined
+  /** **(Optional)** Receives any placeholder for SearchBox component. */
+  placeholder?: string
+  /** **(Optional)** Receives any size to be applied to SearchBox component. */
+  size?: string
+  /** **(Optional)** Receives the variant to be applied to SearchBox component. */
+  variant?: "primary" | "secondary" | "ghost"
+}
+
+const defaultButtonProps: SearchBoxProps["button"] = {
+  label: React.createElement(SearchIcon, { alt: "Search", stroke: "currentColor", strokeWidth: 2 }),
+  loadingText: "",
+}
+
+/**
+ * SearchBox component allows a person to enter a word or a phrase to find relevant content.
+ *
+ * The `label` prop is mandatory but not visible by default (it is visible for screen readers). You can make it visible to humans by setting `labelVisible` to true.
+ *
+ * If you are using a single icon with no text for `button.label`, ensure you pass an `alt` property to the icon for accessibility purposes.
+ *
+ * You can provide an `action` to submit input like a normal HTML form, or an `onSubmit` callback to handle submissions client-side.
+ *
+ * **Good to know:** SearchBox requires both `SearchBox` and `Button` css/scss files.
+ *
+ * ```
+ * import "@coopdigital/styles/components/Searchbox.css"
+ * import "@coopdigital/styles/components/Button.css"
+ *
+ * ```
+ */
+export const SearchBox = ({
+  action,
+  "aria-placeholder": ariaPlaceholder,
+  autoCapitalize = "off",
+  autoComplete = "off",
+  button = defaultButtonProps,
+  className,
+  label,
+  labelVisible = false,
+  name = "query",
+  onSubmit,
+  placeholder,
+  size = "md",
+  variant = "primary",
+  ...props
+}: SearchBoxProps): JSX.Element => {
+  const [isPending, setIsPending] = useState(false)
+
+  const handleSubmit = useCallback(
+    async (event: React.FormEvent<HTMLFormElement>) => {
+      event.preventDefault()
+
+      if (isPending || !onSubmit) return
+
+      setIsPending(true)
+
+      try {
+        await Promise.resolve(onSubmit(event))
+      } finally {
+        setIsPending(false)
+      }
+    },
+    [onSubmit, isPending]
+  )
+
+  const id = useId()
+
+  const formProps = {
+    action: action ?? undefined,
+    className: `coop-search-box ${className ?? ""}`.trim(),
+    "data-size": size.length && size !== "md" ? size : undefined,
+    "data-variant": variant.length && variant !== "primary" ? variant : undefined,
+    onSubmit: onSubmit ? handleSubmit : undefined,
+  }
+
+  const buttonProps = {
+    className: button?.className,
+    isLoading: isPending,
+    loadingText: button?.loadingText ?? "",
+    size: size as keyof ButtonProps["size"],
+    variant: variant as keyof ButtonProps["variant"],
+  }
+
+  const inputProps = {
+    "aria-placeholder": placeholder ?? ariaPlaceholder ?? undefined,
+    autoCapitalize,
+    autoComplete,
+    id,
+    name,
+    placeholder,
+    type: "search",
+    ...props,
+  }
+
+  return (
+    <form {...formProps}>
+      <label className={labelVisible ? "" : "sr-only"} htmlFor={id}>
+        {label}
+      </label>
+      <div className="coop-search-box--inner">
+        <input {...inputProps}></input>
+        <Button {...buttonProps}>{button.label}</Button>
+      </div>
+    </form>
+  )
+}
+
+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/index.ts

@@ -6,6 +6,7 @@ export * from "./components/Expandable"
 export * from "./components/Image"
 export * from "./components/Pill"
 export * from "./components/RootSVG"
+export * from "./components/SearchBox"
 export * from "./components/Signpost"
 export * from "./components/SkipNav"
 export * from "./components/Tag"