@coopdigital/react 0.9.0 → 0.10.0

package/dist/components/Card/Card.d.ts

@@ -31,5 +31,8 @@ export interface CardProps extends HTMLAttributes<HTMLDivElement> {
     /** Specifies the title of the Card */
     title: string;
 }
+/**
+ * A Card lets you highlight and link to more in-depth content on another page. The component typically includes a title, image, and an optional description.
+ */
 export declare const Card: ({ as, background, badge, badgePosition, chevron, children, headingLevel, href, image, imagePosition, label, labelBackground, layout, title, ...props }: CardProps) => JSX.Element;
 export default Card;

package/dist/components/Card/Card.js

@@ -15,12 +15,15 @@ function getCardLinkElement(as, href) {
         },
     };
 }
+/**
+ * A Card lets you highlight and link to more in-depth content on another page. The component typically includes a title, image, and an optional description.
+ */
 const Card = (_a) => {
     var { as, background, badge, badgePosition = "inset", chevron = false, children, headingLevel = "h3", href, image, imagePosition = "left", label = "", labelBackground, layout = "vertical", title } = _a, props = __rest(_a, ["as", "background", "badge", "badgePosition", "chevron", "children", "headingLevel", "href", "image", "imagePosition", "label", "labelBackground", "layout", "title"]);
     const linkElement = getCardLinkElement(as, href);
     const imageProps = Object.assign({ crop: "wide" }, image);
-    const componentProps = Object.assign({ className: "coop-card", "data-background": background, "data-badge-pos": badgePosition, "data-image-pos": imagePosition, "data-label-background": labelBackground, "data-layout": layout }, props);
-    return (jsxs("article", Object.assign({}, componentProps, { children: [image && jsx(Image, Object.assign({}, imageProps)), badge && jsx("div", { className: "coop-card--badge", children: badge }), jsxs("div", { className: "coop-card--inner", children: [jsxs("div", { className: "coop-card--content", children: [label && (jsx("p", { className: "coop-card--label", children: jsx("span", { children: label }) })), React.createElement(linkElement.element, linkElement.props, React.createElement(headingLevel, {}, title)), children] }), chevron && (jsx("span", { "aria-hidden": "true", className: "coop-card--icon", role: "presentation", children: jsx("svg", { viewBox: "0 0 16 29", children: jsx("path", { d: "M2 28.1a1.6 1.6 0 0 1-1.2-2.7l11-10.9-11-11A1.6 1.6 0 1 1 3 1.5l12 12a1.6 1.6 0 0 1 0 2.2l-12 12c-.3.4-.7.5-1 .5z" }) }) }))] })] })));
+    const componentProps = Object.assign({ className: "coop-card", "data-badge-pos": badgePosition, "data-bg": background, "data-image-pos": imagePosition, "data-label-bg": labelBackground, "data-layout": layout }, props);
+    return (jsxs("article", Object.assign({}, componentProps, { children: [image && jsx(Image, Object.assign({}, imageProps)), badge && jsx("div", { className: "coop-card--badge", children: badge }), jsxs("div", { className: "coop-card--inner", children: [jsxs("div", { className: "coop-card--content", children: [label && jsx("span", { className: "coop-card--label", children: label }), React.createElement(linkElement.element, linkElement.props, React.createElement(headingLevel, {}, title)), children] }), chevron && (jsx("span", { "aria-hidden": "true", className: "coop-card--icon", role: "presentation", children: jsx("svg", { viewBox: "0 0 16 29", children: jsx("path", { d: "M2 28.1a1.6 1.6 0 0 1-1.2-2.7l11-10.9-11-11A1.6 1.6 0 1 1 3 1.5l12 12a1.6 1.6 0 0 1 0 2.2l-12 12c-.3.4-.7.5-1 .5z" }) }) }))] })] })));
 };
 
 export { Card, Card as default };

package/dist/components/Image/Image.d.ts

@@ -11,5 +11,8 @@ export interface ImageProps {
     /** **(Optional)** Specifies width of the Image */
     width?: string;
 }
+/**
+ * A wrapper around the image HTML tag, to help implement best practices like lazy loading, and assist with cropping and sizing images.
+ */
 export declare const Image: ({ alt, crop, height, src, width }: ImageProps) => JSX.Element;
 export default Image;

package/dist/components/Image/Image.js

@@ -20,6 +20,9 @@ const getContentfulParams = (src, width, height) => {
         width: (_b = url.searchParams.get("w")) !== null && _b !== void 0 ? _b : width,
     };
 };
+/**
+ * A wrapper around the image HTML tag, to help implement best practices like lazy loading, and assist with cropping and sizing images.
+ */
 const Image = ({ alt, crop, height, src, width = "640" }) => {
     let params = { height, src, width };
     if (src.includes("images.ctfassets.net")) {

package/dist/components/Pill/Pill.d.ts

@@ -20,5 +20,8 @@ export interface PillProps {
     /** **(Optional)** Specifies what should be the Pill size. */
     size?: "sm" | "md" | "lg" | "xl";
 }
+/**
+ * The Pill component is a small, 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 declare const Pill: ({ ariaLabel, as, badge, badgeColor, children, className, href, pillColor, size, }: PillProps) => JSX.Element;
 export default Pill;

package/dist/components/Pill/Pill.js

@@ -1,5 +1,8 @@
 import React from 'react';
 
+/**
+ * The Pill component is a small, 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.
+ */
 const Pill = ({ ariaLabel, as, badge, badgeColor = "red", children, className = "", href, pillColor = "blue", size = "md", }) => {
     let element = href ? "a" : "span";
     if (as) {

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@coopdigital/react",
   "type": "module",
-  "version": "0.9.0",
+  "version": "0.10.0",
   "private": false,
   "publishConfig": {
     "access": "public"
@@ -44,7 +44,7 @@
   "description": "",
   "devDependencies": {
     "@axe-core/playwright": "^4.10.1",
-    "@coopdigital/styles": "^0.9.0",
+    "@coopdigital/styles": "^0.10.0",
     "@playwright/test": "^1.51.1",
     "@storybook/addon-a11y": "^8.6.11",
     "@storybook/addon-essentials": "^8.6.11",
@@ -67,5 +67,5 @@
     "react": "^19.0.0",
     "react-dom": "^19.0.0"
   },
-  "gitHead": "1c68d0c54618e299a4e5d7a89bf43ff17841a3e0"
+  "gitHead": "a5c63ef95571bbc32cf93d44b561f7050866dbce"
 }

package/src/components/Card/Card.tsx

@@ -33,7 +33,6 @@ export interface CardProps extends HTMLAttributes<HTMLDivElement> {
   labelBackground?: "yellow" | "green" | "pink" | "purple" | "orange" | "red" | "lilac" | "blue"
   /** **(Optional)** Specifies the layout of the Card */
   layout?: "vertical" | "horizontal"
-
   /** Specifies the title of the Card */
   title: string
 }
@@ -53,6 +52,9 @@ function getCardLinkElement(as: CardProps["as"], href?: string) {
   }
 }
 
+/**
+ * A Card lets you highlight and link to more in-depth content on another page. The component typically includes a title, image, and an optional description.
+ */
 export const Card = ({
   as,
   background,
@@ -79,10 +81,10 @@ export const Card = ({
 
   const componentProps = {
     className: "coop-card",
-    "data-background": background,
     "data-badge-pos": badgePosition,
+    "data-bg": background,
     "data-image-pos": imagePosition,
-    "data-label-background": labelBackground,
+    "data-label-bg": labelBackground,
     "data-layout": layout,
     ...props,
   }
@@ -93,11 +95,7 @@ export const Card = ({
       {badge && <div className="coop-card--badge">{badge}</div>}
       <div className="coop-card--inner">
         <div className="coop-card--content">
-          {label && (
-            <p className="coop-card--label">
-              <span>{label}</span>
-            </p>
-          )}
+          {label && <span className="coop-card--label">{label}</span>}
           {React.createElement(
             linkElement.element,
             linkElement.props,

package/src/components/Image/Image.tsx

@@ -34,6 +34,9 @@ const getContentfulParams = (src: string, width: string, height: string | undefi
   }
 }
 
+/**
+ * A wrapper around the image HTML tag, to help implement best practices like lazy loading, and assist with cropping and sizing images.
+ */
 export const Image = ({ alt, crop, height, src, width = "640" }: ImageProps): JSX.Element => {
   let params = { height, src, width }
 

package/src/components/Pill/Pill.tsx

@@ -24,6 +24,9 @@ export interface PillProps {
   size?: "sm" | "md" | "lg" | "xl"
 }
 
+/**
+ * The Pill component is a small, 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,