@coopdigital/react 0.19.5 → 0.19.6

package/src/components/Squircle/Squircle.tsx

@@ -1,16 +1,18 @@
 import type { HTMLAttributes, JSX } from "react"
 
+import clsx from "clsx"
+
 import { bgPropToClass } from "../../../src/utils"
 import { BrandBlue, Green, OfferRed } from "../../types/colors"
 
 export interface SquircleProps extends HTMLAttributes<HTMLDivElement> {
-  /** **(Optional)** Specifies the background color of the Squircle. */
+  /** **(Optional)** Specify the Squircle background color. */
   background?: OfferRed | BrandBlue | Green
-  /** **(Optional)** Represents the content inside the Squircle 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 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"
 }
 
@@ -22,7 +24,7 @@ export const Squircle = ({
   ...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 => {