@coopdigital/react 1.19.1 → 1.20.0

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/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"