@coopdigital/react 0.26.0 → 0.28.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
@@ -1,3 +1,5 @@
1
+
2
+ "use client";
1
3
  import { jsxs, Fragment, jsx } from 'react/jsx-runtime';
2
4
  import { clsx } from '../../node_modules/clsx/dist/clsx.js';
3
5
  import React, { useState, useCallback } from 'react';
@@ -1,12 +1,12 @@
1
1
  import type { AnchorHTMLAttributes, ForwardRefExoticComponent, HTMLAttributes, JSX } from "react";
2
2
  import React from "react";
3
- import { Lights, Tints } from "../../types/colors";
3
+ import { Lights, Tints, White } from "../../types/colors";
4
4
  import { ImageProps } from "../Image";
5
5
  export interface CardProps extends HTMLAttributes<HTMLDivElement> {
6
6
  /** **(Optional)** Specify a custom element to override default `a`. */
7
7
  as?: React.FC<AnchorHTMLAttributes<HTMLElement>> | ForwardRefExoticComponent<any> | string;
8
8
  /** **(Optional)** Specify the Card background color. */
9
- background?: Tints;
9
+ background?: Tints | White;
10
10
  /** **(Optional)** Specify text to display inside the badge. */
11
11
  badge?: React.ReactNode;
12
12
  /** **(Optional)** Specify badge position relative to top right corner. */
@@ -18,7 +18,7 @@ function getCardLinkElement(as, href) {
18
18
  },
19
19
  };
20
20
  }
21
- const Card = ({ as, background, badge, badgePosition = "inset", chevron = false, children, className, heading, headingLevel = "h3", href, image, imagePosition = "left", label = "", labelBackground, layout = "vertical", ...props }) => {
21
+ const Card = ({ as, background = "white", badge, badgePosition = "inset", chevron = false, children, className, heading, headingLevel = "h3", href, image, imagePosition = "left", label = "", labelBackground, layout = "vertical", ...props }) => {
22
22
  const linkElement = getCardLinkElement(as, href);
23
23
  const imageProps = {
24
24
  crop: "wide",
@@ -1,3 +1,5 @@
1
+
2
+ "use client";
1
3
  import { jsxs, jsx } from 'react/jsx-runtime';
2
4
  import { clsx } from '../../node_modules/clsx/dist/clsx.js';
3
5
  import React, { useState, useCallback, useId } from 'react';
package/package.json CHANGED
@@ -1,7 +1,7 @@
1
1
  {
2
2
  "name": "@coopdigital/react",
3
3
  "type": "module",
4
- "version": "0.26.0",
4
+ "version": "0.28.0",
5
5
  "private": false,
6
6
  "publishConfig": {
7
7
  "access": "public"
@@ -80,7 +80,7 @@
80
80
  "storybook": "$storybook"
81
81
  },
82
82
  "dependencies": {
83
- "@coopdigital/styles": "^0.24.1"
83
+ "@coopdigital/styles": "^0.25.0"
84
84
  },
85
- "gitHead": "895c35934772904ad9ed5d9418dc8d94d240067d"
85
+ "gitHead": "46bc148fcc12e44b09e70aae10aa05345b1b247a"
86
86
  }
@@ -4,7 +4,7 @@ import clsx from "clsx"
4
4
  import React from "react"
5
5
 
6
6
  import { bgPropToClass } from "../../../src/utils"
7
- import { Lights, Tints } from "../../types/colors"
7
+ import { Lights, Tints, White } from "../../types/colors"
8
8
  import { ChevronRightIcon } from "../Icon"
9
9
  import { Image, ImageProps } from "../Image"
10
10
 
@@ -14,7 +14,7 @@ export interface CardProps extends HTMLAttributes<HTMLDivElement> {
14
14
  // eslint-disable-next-line @typescript-eslint/no-explicit-any
15
15
  as?: React.FC<AnchorHTMLAttributes<HTMLElement>> | ForwardRefExoticComponent<any> | string
16
16
  /** **(Optional)** Specify the Card background color. */
17
- background?: Tints
17
+ background?: Tints | White
18
18
  /** **(Optional)** Specify text to display inside the badge. */
19
19
  badge?: React.ReactNode
20
20
  /** **(Optional)** Specify badge position relative to top right corner. */
@@ -61,7 +61,7 @@ function getCardLinkElement(as: CardProps["as"], href?: string) {
61
61
 
62
62
  export const Card = ({
63
63
  as,
64
- background,
64
+ background = "white",
65
65
  badge,
66
66
  badgePosition = "inset",
67
67
  chevron = false,