@coopdigital/react 1.19.1 → 1.21.0

package/src/components/Image/Image.tsx

@@ -1,10 +1,8 @@
-import type { HTMLAttributes, JSX, Ref } from "react"
+import type { ImgHTMLAttributes, JSX, Ref } from "react"
 
-export interface ImageProps extends HTMLAttributes<HTMLImageElement> {
+export interface ImageProps extends ImgHTMLAttributes<HTMLImageElement> {
   /** Specify text to describe the image. Refer to Experience Library guidelines on writing good alt text. */
   alt: string
-  /** **(Optional)** Specify the image crop mode. */
-  crop?: "square" | "wide" | "none"
   /** **(Optional)** Specify the height of the image. */
   height?: string
   /** **(Optional)** Specify a custom React ref for this component. */
@@ -15,7 +13,15 @@ export interface ImageProps extends HTMLAttributes<HTMLImageElement> {
   width?: string
 }
 
-const getContentfulParams = (src: string, width: string, height: string | undefined) => {
+const getContentfulParams = ({
+  height,
+  src,
+  width,
+}: {
+  height?: string
+  src: string
+  width: string
+}) => {
   const url = !src.startsWith("http") ? new URL("https://" + src) : new URL(src)
   const params = [
     ["fm", "webp"],
@@ -26,7 +32,7 @@ const getContentfulParams = (src: string, width: string, height: string | undefi
   ]
 
   params.forEach(([k, v]) => {
-    if (!url.searchParams.has(k)) url.searchParams.set(k, v)
+    if (k && v && !url.searchParams.has(k)) url.searchParams.set(k, v)
   })
 
   return {
@@ -36,32 +42,19 @@ const getContentfulParams = (src: string, width: string, height: string | undefi
   }
 }
 
-const Image = ({
-  alt,
-  crop,
-  height,
-  ref,
-  src,
-  width = "640",
-  ...props
-}: ImageProps): JSX.Element => {
+const Image = ({ alt, height, ref, src, width = "640", ...props }: ImageProps): JSX.Element => {
   let params = { height, src, width }
 
   if (src.includes("images.ctfassets.net")) {
-    params = getContentfulParams(src, width, height)
+    params = getContentfulParams({ height, src, width })
   }
 
   const dimensions = {
-    "data-crop": crop,
     height: params.height,
     width: params.width,
   }
 
-  return (
-    <picture>
-      <img alt={alt} loading="lazy" src={params.src} {...dimensions} {...props} ref={ref} />
-    </picture>
-  )
+  return <img alt={alt} loading="lazy" src={params.src} {...dimensions} {...props} ref={ref} />
 }
 
 Image.slot = { name: "Image" }

package/src/components/Picture/Picture.tsx

@@ -0,0 +1,36 @@
+import type { HTMLAttributes, JSX, ReactNode, Ref } from "react"
+
+import clsx from "clsx"
+
+export interface PictureProps extends HTMLAttributes<HTMLPictureElement> {
+  /** **(Optional)** Content inside the component. */
+  children?: string | ReactNode
+  /** **(Optional)** Specify additional CSS classes. */
+  className?: string
+  /** **(Optional)** Specify the image crop mode. */
+  crop?: "square" | "wide" | "thin" | "squircle" | "none"
+  /** **(Optional)** Specify a custom React ref for this component. */
+  ref?: Ref<HTMLPictureElement>
+}
+
+export const Picture = ({
+  children,
+  className,
+  crop,
+  ref,
+  ...props
+}: PictureProps): JSX.Element => {
+  const componentProps = {
+    className: clsx("coop-picture", className),
+    "data-crop": crop ?? undefined,
+    ...props,
+  }
+
+  return (
+    <picture {...componentProps} ref={ref}>
+      {children}
+    </picture>
+  )
+}
+
+export default Picture

package/src/components/Picture/index.ts

@@ -0,0 +1,5 @@
+import Picture from "./Picture"
+
+export default Picture
+export { Picture }
+export * from "./Picture"

package/src/components/Signpost/Signpost.tsx

@@ -46,7 +46,7 @@ const Signpost = ({
 
   return (
     <div {...componentProps} ref={ref}>
-      {image && <Image crop="wide" {...image} />}
+      {image && <Image {...image} />}
       {React.createElement(
         element,
         { href },

package/src/components/Squircle/Squircle.tsx

@@ -1,8 +1,10 @@
-import type { HTMLAttributes, JSX, Ref } from "react"
+import type { HTMLAttributes, JSX, Ref, SVGAttributes } from "react"
 
 import clsx from "clsx"
 
-import { hasUserBg } from "@/utils"
+// import { useSlots } from "@/hooks"
+
+// import { hasUserBg } from "@/utils"
 
 export interface SquircleProps extends HTMLAttributes<HTMLDivElement> {
   /** **(Optional)** Main content inside the component. It can be any valid JSX or string. */
@@ -11,30 +13,65 @@ export interface SquircleProps extends HTMLAttributes<HTMLDivElement> {
   className?: string
   /** **(Optional)** Specify a custom React ref for this component. */
   ref?: Ref<HTMLDivElement>
+}
+
+export interface SquircleSvgProps extends SVGAttributes<SVGElement> {
   /** **(Optional)** Specify the Squircle size. */
-  size?: "sm" | "md" | "lg"
+  size?: string | number
 }
 
-const Squircle = ({
-  children,
-  className,
-  ref,
-  size = "md",
-  ...props
-}: SquircleProps): JSX.Element => {
+const Squircle = ({ children, className, ref, ...props }: SquircleProps): JSX.Element => {
   const componentProps = {
-    className: clsx("coop-squircle", !hasUserBg(className) && "bg-offer", className),
-    "data-size": size.length && size !== "md" ? size : undefined,
+    className: clsx("coop-squircle", className),
     ...props,
   }
 
   return (
     <figure {...componentProps} ref={ref}>
-      <figcaption>{children}</figcaption>
+      {children}
     </figure>
   )
 }
 
+// oxlint-disable-next-line perfectionist/sort-objects
+const sizeMap = { sm: "32", md: "64", lg: "96" }
+
+const SquircleSvg = ({ size, ...props }: SquircleSvgProps) => {
+  const safeSize = sizeMap[size as keyof typeof sizeMap] ?? size ?? "64"
+  const dimensions = {
+    height: safeSize,
+    width: safeSize,
+  }
+  return (
+    <svg
+      {...dimensions}
+      {...props}
+      aria-hidden="true"
+      viewBox="0 0 64 64"
+      xmlns="http://www.w3.org/2000/svg"
+    >
+      <path
+        d="M0,32 C0,10.56,10.56,0,32,0 S64,10.56,64,32 S53.44,64,32,64 S0,53.44,0,32"
+        vectorEffect="non-scaling-stroke"
+      />
+    </svg>
+  )
+}
+
+const SquircleText = ({
+  children,
+  className,
+  ...props
+}: HTMLAttributes<HTMLDivElement>): JSX.Element => {
+  const componentProps = {
+    className,
+    ...props,
+  }
+  return <figcaption {...componentProps}>{children}</figcaption>
+}
+
+Squircle.Svg = SquircleSvg
+Squircle.Text = SquircleText
 Squircle.slot = { name: "Squircle" }
 
 export default Squircle

package/src/index.ts

@@ -14,6 +14,7 @@ export * from "./components/Image/Image"
 export * from "./components/LoadingSpinner/LoadingSpinner"
 export * from "./components/Logo/Logo"
 export * from "./components/PasswordInput/PasswordInput"
+export * from "./components/Picture"
 export * from "./components/Pill/Pill"
 export * from "./components/Popover/Popover"
 export * from "./components/Radio/Radio"