@coopdigital/react 0.19.4 → 0.19.6

package/src/components/SkipNav/SkipNav.tsx

@@ -1,32 +1,32 @@
 import type { HTMLAttributes, JSX } from "react"
 
+import clsx from "clsx"
+
 interface SkipNavLink {
   href: string
   label: string
 }
 
 export interface SkipNavProps extends HTMLAttributes<HTMLDivElement> {
-  /** **(Optional)** Receives any className to be applied to Skip Nav component. */
+  /** **(Optional)** Specify additional CSS classes to be applied to the component. */
   className?: string
-  /** **(Optional)** Specifies if the component is visible straight away or only when pressing 'Tab'. */
+  /** **(Optional)** Specify whether the SkipNav is visible immediately or only when tabbing. Useful for testing purposes only. */
   isVisible?: boolean
-  /** **(Optional)** Specifies the links that are going to be shown on the Skip Nav.
-   * It is an `array` of items and each item should have `href` and `label` information.
-   *
-   * Defaults to a single link anchored to `#main` */
+  /** **(Optional)** Specify links to show in the SkipNav.
+   * Each item needs a `href` and `label`. Defaults to a single link anchored to `#main`. */
   links?: SkipNavLink[]
 }
 
 const defaultLinks = [{ href: "#main", label: "Skip to main content" }]
 
 export const SkipNav = ({
-  className = "",
+  className,
   isVisible = false,
   links = defaultLinks,
   ...props
 }: SkipNavProps): JSX.Element => {
   const componentProps = {
-    className: `coop-skip-nav ${className}`,
+    className: clsx("coop-skip-nav", className),
     ...props,
   }
   const navLinks = links.length > 0 ? links : defaultLinks

package/src/components/Squircle/Squircle.tsx

@@ -1,28 +1,30 @@
 import type { HTMLAttributes, JSX } from "react"
 
+import clsx from "clsx"
+
 import { bgPropToClass } from "../../../src/utils"
-import { CoopBlue, Green, OffersRed } from "../../types/colors"
+import { BrandBlue, Green, OfferRed } from "../../types/colors"
 
 export interface SquircleProps extends HTMLAttributes<HTMLDivElement> {
-  /** **(Optional)** Specifies the background color of the Squircle. */
-  background?: OffersRed | CoopBlue | Green
-  /** **(Optional)** Represents the content inside the Squircle component. It can be any valid JSX or string. */
+  /** **(Optional)** Specify the Squircle background color. */
+  background?: OfferRed | BrandBlue | Green
+  /** **(Optional)** Main content inside the component. It can be any valid JSX or string. */
   children?: React.ReactNode
-  /** **(Optional)** Receives any className to be applied to Squircle component. */
+  /** **(Optional)** Specify additional CSS classes to be applied to the component. */
   className?: string
-  /** **(Optional)** Specifies what should be the Squircle size */
+  /** **(Optional)** Specify the Squircle size. */
   size?: "sm" | "md" | "lg"
 }
 
 export const Squircle = ({
-  background = "offers-red",
+  background = "offer-red",
   children,
   className,
   size = "lg",
   ...props
 }: SquircleProps): JSX.Element => {
   const componentProps = {
-    className: `coop-squircle ${bgPropToClass(background, className)} ${className ?? ""}`,
+    className: clsx("coop-squircle", bgPropToClass(background, className), className),
     "data-size": size.length && size !== "lg" ? size : undefined,
     ...props,
   }

package/src/components/Tag/Tag.tsx

@@ -8,16 +8,16 @@ import type { Black, Darks, Greys, Lights, Tints, White } from "../../types/colo
 import { bgPropToClass } from "../../../src/utils"
 
 export interface TagProps extends HTMLAttributes<HTMLAnchorElement> {
-  /** **(Optional)** Specifies the custom element to override default `a` or `span`. */
+  /** **(Optional)** Specify a 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
-  /** **(Optional)** Specifies the Tag background color from the available options. */
+  /** **(Optional)** Specify the Tag background color. */
   background?: Lights | Darks | Tints | Greys | White | Black
-  /** **(Optional)** Represents the content inside the Tag component. It can be any valid JSX or string. */
+  /** **(Optional)** Main content inside the component. It can be any valid JSX or string. */
   children?: React.ReactNode
-  /** **(Optional)** Receives any className to be applied to Tag component. */
+  /** **(Optional)** Specify additional CSS classes to be applied to the component. */
   className?: string
-  /** **(Optional)** Specifies the URL that the Tag component will link to when clicked. */
+  /** **(Optional)** Specify the URL that the Tag component will link to when clicked. */
   href?: string
 }
 
@@ -25,7 +25,7 @@ export const Tag = ({
   as,
   background = "tint-grey",
   children,
-  className = "",
+  className,
   href,
   ...props
 }: TagProps): JSX.Element => {

package/src/types/colors.ts

@@ -35,7 +35,7 @@ export type Greys = "dark-grey" | "mid-dark-grey" | "mid-grey" | "mid-light-grey
 export type White = "white"
 export type Black = "black"
 export type None = "none"
-export type CoopBlue = "coop-blue"
-export type OffersRed = "offers-red"
+export type BrandBlue = "brand-blue"
+export type OfferRed = "offer-red"
 export type Green = "green"
 export type Blue = "blue"