@coopdigital/react 0.17.0 → 0.18.0

package/src/components/Icon/SearchIcon.tsx

@@ -1,6 +1,22 @@
-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(),
+    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,22 @@
-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(),
+    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,22 @@
-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(),
+    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,22 @@
-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(),
+    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,22 @@
-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(),
+    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,22 @@
-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(),
+    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,22 @@
-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(),
+    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"