@coopdigital/react 0.15.0 → 0.17.0

package/src/components/Icon/WriteIcon.tsx

@@ -0,0 +1,22 @@
+export const WriteIcon = () => {
+  return (
+    <svg className="coop-icon" fill="none" viewBox="0 0 32 32" xmlns="http://www.w3.org/2000/svg">
+      <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"
+      />
+      <path
+        d="M24.08 10v20h-22V6h21.73l1.54-1.54a1.9 1.9 0 0 0-1-.44H2.07a2 2 0 0 0-2 2V30a2 2 0 0 0 2 2h22a2 2 0 0 0 2-2V8Z"
+        fill="currentColor"
+      />
+      <path
+        d="M30.62 3.41 28.5 1.29a1 1 0 0 0-1.42 0L22.38 6l-3.9 3.9-5 5-1.33 1.33a1 1 0 0 0-.27.48v.19l-.6 2.57a.8.8 0 0 0 0 .43 1 1 0 0 0 1.19.77l2.74-.67a.64.64 0 0 0 .29-.13.6.6 0 0 0 .19-.14l2.85-2.86 1.4-1.39L30.62 4.82a1 1 0 0 0 0-1.41M15 19.06l-2.75.63.62-2.75 6.82-6.81L23.81 6l1.54-1.54L27.79 2l2.13 2.12Z"
+        fill="currentColor"
+      />
+      <path
+        d="M31.33 2.7 29.21.58a2.06 2.06 0 0 0-2.83 0L11.44 15.52a2.1 2.1 0 0 0-.54 1l-.09.41-.54 2.34a2.18 2.18 0 0 0 .54 1.87 2 2 0 0 0 1.4.58 1.8 1.8 0 0 0 .46-.05l2.75-.67a2.1 2.1 0 0 0 1-.54L31.33 5.53a2 2 0 0 0 0-2.83M15 19.06l-2.75.63.62-2.75 6.82-6.81L23.81 6l1.54-1.54L27.79 2l2.13 2.12Z"
+        fill="currentColor"
+      />
+    </svg>
+  )
+}

package/src/components/Icon/index.tsx

@@ -0,0 +1,39 @@
+export { AddIcon } from "./AddIcon"
+export { ArrowDownIcon } from "./ArrowDownIcon"
+export { ArrowLeftIcon } from "./ArrowLeftIcon"
+export { ArrowRightIcon } from "./ArrowRightIcon"
+export { ArrowUpIcon } from "./ArrowUpIcon"
+export { AvatarAltIcon } from "./AvatarAltIcon"
+export { AvatarIcon } from "./AvatarIcon"
+export { BasketIcon } from "./BasketIcon"
+export { CalendarIcon } from "./CalendarIcon"
+export { ChevronDownIcon } from "./ChevronDownIcon"
+export { ChevronLeftIcon } from "./ChevronLeftIcon"
+export { ChevronRightIcon } from "./ChevronRightIcon"
+export { ChevronUpIcon } from "./ChevronUpIcon"
+export { ClockIcon } from "./ClockIcon"
+export { CloseAltIcon } from "./CloseAltIcon"
+export { CloseIcon } from "./CloseIcon"
+export { CoopCardIcon } from "./CoopCardIcon"
+export { CoopIcon } from "./CoopIcon"
+export { CoopLocationIcon } from "./CoopLocationIcon"
+export { DownloadIcon } from "./DownloadIcon"
+export { HomeIcon } from "./HomeIcon"
+export { InformationIcon } from "./InformationIcon"
+export { LocationIcon } from "./LocationIcon"
+export { MailIcon } from "./MailIcon"
+export { MenuIcon } from "./MenuIcon"
+export { MessageIcon } from "./MessageIcon"
+export { MinusIcon } from "./MinusIcon"
+export { OpenNewIcon } from "./OpenNewIcon"
+export { PencilIcon } from "./PencilIcon"
+export { PhoneIcon } from "./PhoneIcon"
+export { QuestionIcon } from "./QuestionIcon"
+export { ScooterIcon } from "./ScooterIcon"
+export { SearchIcon } from "./SearchIcon"
+export { SettingsIcon } from "./SettingsIcon"
+export { TickAltIcon } from "./TickAltIcon"
+export { TickIcon } from "./TickIcon"
+export { VanIcon } from "./VanIcon"
+export { WarningIcon } from "./WarningIcon"
+export { WriteIcon } from "./WriteIcon"

package/src/components/Pill/Pill.tsx

@@ -3,8 +3,6 @@ import type { AnchorHTMLAttributes, ForwardRefExoticComponent, HTMLAttributes, J
 import React from "react"
 
 export interface PillProps extends HTMLAttributes<HTMLAnchorElement> {
-  /** **(Optional)** Specifies a custom aria-label. */
-  ariaLabel?: string
   /** **(Optional)** Specifies the custom element to override default `a` or `span`. */
   // eslint-disable-next-line @typescript-eslint/no-explicit-any
   as?: React.FC<AnchorHTMLAttributes<HTMLElement>> | ForwardRefExoticComponent<any> | string
@@ -28,7 +26,6 @@ export interface PillProps extends HTMLAttributes<HTMLAnchorElement> {
  * The Pill component is a small, sligtly rounded label used to link and highlight information such as categories or articles. It can be customised with different content and styles to suit various use cases.
  */
 export const Pill = ({
-  ariaLabel,
   as,
   badge,
   badgeColor = "red",
@@ -46,7 +43,6 @@ export const Pill = ({
   }
 
   const componentProps = {
-    "aria-label": ariaLabel,
     className: `coop-pill ${className}`,
     "data-badge": badge?.length ? badge : undefined,
     "data-badge-color": badgeColor,

package/src/components/RootSVG/RootSVG.tsx

@@ -1,4 +1,4 @@
-export default function RootSVG() {
+export const RootSVG = () => {
   return (
     <svg height="0" width="0" xmlns="http://www.w3.org/2000/svg">
       <defs>
@@ -9,3 +9,5 @@ export default function RootSVG() {
     </svg>
   )
 }
+
+export default RootSVG

package/src/components/Signpost/Signpost.tsx

@@ -1,15 +1,17 @@
-import type { AnchorHTMLAttributes, ForwardRefExoticComponent, JSX } from "react"
+import type { AnchorHTMLAttributes, ForwardRefExoticComponent, HTMLAttributes, JSX } from "react"
 
 import React from "react"
 
 import { Image, ImageProps } from "../Image"
 
-export interface SignpostProps {
+export interface SignpostProps extends HTMLAttributes<HTMLDivElement> {
   /** **(Optional)** Specifies the custom element to override default `a` */
   // eslint-disable-next-line @typescript-eslint/no-explicit-any
   as?: React.FC<AnchorHTMLAttributes<HTMLElement>> | ForwardRefExoticComponent<any> | string
   /** Represents the heading inside the Signpost component. It can be any valid JSX or string. */
   children: React.ReactNode
+  /** **(Optional)** Receives any className to be applied to Signpost component. */
+  className?: string
   /** **(Optional)** Specifies the heading level of the signpost's heading. */
   headingLevel?: "h2" | "h3" | "h4" | "h5" | "h6"
   /** Specifies the URL that the Signpost component will link to when clicked. */
@@ -25,17 +27,24 @@ export interface SignpostProps {
 export const Signpost = ({
   as,
   children,
+  className = "",
   headingLevel = "h3",
   href,
   image,
+  ...props
 }: SignpostProps): JSX.Element => {
   let element: SignpostProps["as"] = "a"
   if (as) {
     element = as
   }
 
+  const componentProps = {
+    className: `coop-signpost ${className}`,
+    ...props,
+  }
+
   return (
-    <div className="coop-signpost">
+    <div {...componentProps}>
       {image && <Image crop="wide" {...image} />}
       {React.createElement(
         element,

package/src/components/SkipNav/SkipNav.tsx

@@ -1,13 +1,11 @@
-import type { AnchorHTMLAttributes, JSX } from "react"
+import type { HTMLAttributes, JSX } from "react"
 
 interface SkipNavLink {
   href: string
   label: string
 }
 
-export interface SkipNavProps extends AnchorHTMLAttributes<HTMLAnchorElement> {
-  /** **(Optional)** Specifies a custom aria-label. */
-  ariaLabel?: string
+export interface SkipNavProps extends HTMLAttributes<HTMLDivElement> {
   /** **(Optional)** Receives any className to be applied to Skip Nav component. */
   className?: string
   /** **(Optional)** Specifies if the component is visible straight away or only when pressing 'Tab'. */
@@ -39,19 +37,21 @@ const defaultLinks = [{ href: "#main", label: "Skip to main content" }]
  * - If the user tabs through the skip navigation without selecting an option the Co‑op logo should be the next element that has the focus ring applied.
  */
 export const SkipNav = ({
-  ariaLabel = "",
   className = "",
   isVisible = false,
   links = defaultLinks,
   ...props
 }: SkipNavProps): JSX.Element => {
+  const componentProps = {
+    className: `coop-skip-nav ${className}`,
+    ...props,
+  }
   const navLinks = links.length > 0 ? links : defaultLinks
   return (
-    <nav aria-label={ariaLabel} className="coop-skip-nav" {...props}>
+    <nav {...componentProps}>
       <ul>
         {navLinks.map((link) => {
           const linkProps = {
-            className: `${className}`,
             "data-visible": isVisible,
             href: link.href,
             label: link.label,