@purpurds/radio-card-group 3.0.0

package/src/radio-card-group.test.tsx

@@ -0,0 +1,180 @@
+import React from "react";
+import * as matchers from "@testing-library/jest-dom/matchers";
+import { cleanup, fireEvent, render, screen } from "@testing-library/react";
+import { afterEach, describe, expect, it, vi } from "vitest";
+
+import { RadioCardGroup, RadioCardItem } from "./radio-card-group";
+import { RadioCardImage } from "./radio-card-item-image";
+import { Paragraph } from "@purpurds/paragraph";
+
+expect.extend(matchers);
+
+describe("RadioButtonGroup", () => {
+  global.ResizeObserver = vi.fn().mockImplementation(() => ({
+    observe: vi.fn(),
+    unobserve: vi.fn(),
+    disconnect: vi.fn(),
+  }));
+  afterEach(cleanup);
+
+  it("should not render items when no items", () => {
+    render(<RadioCardGroup items={[]} id="test" data-testid="test" />);
+    expect(screen.queryByTestId("test")).not.toBeInTheDocument();
+  });
+
+  it("should render items with different states", () => {
+    const items = [
+      { id: "1", title: "1", value: "1" },
+      { id: "2", title: "2", value: "2", disabled: true },
+      { id: "3", title: "3", value: "3" },
+    ];
+    render(<RadioCardGroup items={items} id="test" data-testid="test" value="1" />);
+    expect(screen.queryByTestId("test-label")).not.toBeInTheDocument();
+    const radioCardItems = screen.getAllByRole("radio");
+
+    expect(radioCardItems).toHaveLength(3);
+    expect(radioCardItems["0"]).toBeChecked();
+    expect(radioCardItems["0"]).not.toBeDisabled();
+
+    expect(radioCardItems["1"]).not.toBeChecked();
+    expect(radioCardItems["1"]).toBeDisabled();
+
+    expect(radioCardItems["2"]).not.toBeChecked();
+    expect(radioCardItems["2"]).not.toBeDisabled();
+  });
+
+  it("should render items with different states in a form", () => {
+    const items = [
+      { id: "1", title: "1", value: "1" },
+      { id: "2", title: "2", value: "2", disabled: true },
+      { id: "3", title: "3", value: "3", required: true },
+    ];
+    render(
+      <form>
+        <RadioCardGroup items={items} id="test" data-testid="test" value="1" />
+      </form>
+    );
+
+    expect(screen.queryByTestId("test-label")).not.toBeInTheDocument();
+    const radioCardItems = screen.getAllByTestId("test-item");
+
+    expect(radioCardItems).toHaveLength(3);
+    expect(radioCardItems["0"].nextElementSibling).toBeChecked();
+    expect(radioCardItems["0"].nextElementSibling).not.toBeDisabled();
+    expect(radioCardItems["0"].nextElementSibling).not.toBeRequired();
+
+    expect(radioCardItems["1"].nextElementSibling).not.toBeChecked();
+    expect(radioCardItems["1"].nextElementSibling).toBeDisabled();
+    expect(radioCardItems["1"].nextElementSibling).not.toBeRequired();
+
+    expect(radioCardItems["2"].nextElementSibling).not.toBeChecked();
+    expect(radioCardItems["2"].nextElementSibling).not.toBeDisabled();
+    expect(radioCardItems["2"].nextElementSibling).toBeRequired();
+  });
+
+  it("should render with label", () => {
+    const items = [
+      { id: "1", title: "1", value: "1" },
+      { id: "2", title: "2", value: "2" },
+    ];
+    render(<RadioCardGroup items={items} id="test" data-testid="test" value="1" label="Label" />);
+
+    expect(screen.queryByTestId("test-label")).toHaveTextContent("Label");
+    expect(screen.getByRole("radiogroup")).toHaveAttribute("aria-labelledby", "test-label");
+    expect(screen.getAllByRole("radio")).toHaveLength(2);
+  });
+
+  it("should only render children that are RadioCardItems", () => {
+    const items = [
+      { id: "1", title: "1", value: "1" },
+      { id: "2", title: "2", value: "2" },
+    ];
+    render(
+      <RadioCardGroup id="test" data-testid="test" value="1" label="Label">
+        <RadioCardImage data-testid="test-radio-item-image" altText="test-alt" src="test-source" />
+        {items.map((item) => (
+          <RadioCardItem data-testid="test-radio-card-item" key={item.id} {...item} />
+        ))}
+        <div data-testid="test-div" />
+        <Paragraph data-testid="test-paragraph">text</Paragraph>
+      </RadioCardGroup>
+    );
+
+    expect(screen.queryByTestId("test-radio-item-image")).not.toBeInTheDocument();
+    expect(screen.queryByTestId("test-div")).not.toBeInTheDocument();
+    expect(screen.queryByTestId("test-paragraph")).not.toBeInTheDocument();
+    expect(screen.getAllByTestId("test-radio-card-item")).toHaveLength(2);
+  });
+
+  it("should render controlled and not emit value change clicking select item", () => {
+    const items = [
+      { id: "1", title: "1", value: "1" },
+      { id: "2", title: "2", value: "2" },
+    ];
+
+    const onValueChangeMock = vi.fn();
+    render(
+      <RadioCardGroup
+        id="test"
+        data-testid="test"
+        value="1"
+        label="Label"
+        onValueChange={onValueChangeMock}
+      >
+        {items.map((item) => (
+          <RadioCardItem data-testid="test-radio-card-item" key={item.id} {...item} />
+        ))}
+      </RadioCardGroup>
+    );
+
+    const radioCardItems = screen.getAllByTestId("test-radio-card-item");
+
+    fireEvent.click(radioCardItems[0]);
+    expect(onValueChangeMock).not.toHaveBeenCalled();
+
+    fireEvent.click(radioCardItems[1]);
+    expect(onValueChangeMock).toHaveBeenCalledWith("2");
+  });
+
+  it("should render uncontrolled", () => {
+    const items = [
+      { id: "1", title: "1", value: "1" },
+      { id: "2", title: "2", value: "2" },
+      { id: "3", title: "3", value: "3" },
+    ];
+
+    render(
+      <RadioCardGroup id="test" data-testid="test" label="Label">
+        {items.map((item) => (
+          <RadioCardItem data-testid="test-radio-card-item" key={item.id} {...item} />
+        ))}
+      </RadioCardGroup>
+    );
+
+    const radioCardItems = screen.getAllByTestId("test-radio-card-item");
+    expect(radioCardItems).toHaveLength(3);
+    radioCardItems.forEach((radioCardItem) =>
+      expect(radioCardItem).toHaveAttribute("data-state", "unchecked")
+    );
+
+    fireEvent.click(radioCardItems[0]);
+    expect(radioCardItems[0]).toHaveAttribute("data-state", "checked");
+    expect(radioCardItems[1]).toHaveAttribute("data-state", "unchecked");
+    expect(radioCardItems[2]).toHaveAttribute("data-state", "unchecked");
+
+    fireEvent.click(radioCardItems[0]);
+    expect(radioCardItems[0]).toHaveAttribute("data-state", "checked");
+    expect(radioCardItems[1]).toHaveAttribute("data-state", "unchecked");
+    expect(radioCardItems[2]).toHaveAttribute("data-state", "unchecked");
+
+    fireEvent.click(radioCardItems[1]);
+    expect(radioCardItems[0]).toHaveAttribute("data-state", "unchecked");
+    expect(radioCardItems[1]).toHaveAttribute("data-state", "checked");
+    expect(radioCardItems[2]).toHaveAttribute("data-state", "unchecked");
+
+    fireEvent.click(radioCardItems[2]);
+    expect(radioCardItems[0]).toHaveAttribute("data-state", "unchecked");
+    expect(radioCardItems[1]).toHaveAttribute("data-state", "unchecked");
+    expect(radioCardItems[2]).toHaveAttribute("data-state", "checked");
+  });
+});

package/src/radio-card-group.tsx

@@ -0,0 +1,140 @@
+import React, { Children, cloneElement, ForwardedRef, forwardRef, ReactNode, Ref } from "react";
+import { Heading } from "@purpurds/heading";
+import * as RadixRadioGroup from "@radix-ui/react-radio-group";
+
+import { cx } from "./classnames";
+import { isRadioCardItem, RadioCardItem, RadioCardItemProps } from "./radio-card-item";
+
+export type RadioCardGroupItem = RadioCardItemProps & { ref?: Ref<HTMLDivElement> };
+
+export type RadioCardGroupProps = {
+  /**
+   * To use when no label is given.
+   * */
+  ["aria-label"]?: string;
+  /**
+   * To use with custom label.
+   * */
+  ["aria-labelledby"]?: string;
+  ["data-testid"]?: string;
+  className?: string;
+  /**
+   * The value of the radio card item that should be checked when initially rendered. Use when you do not need to control the state of the radio items.
+   * */
+  defaultValue?: string;
+  /**
+   * When true, prevents the user from interacting with radio card items.
+   * */
+  disabled?: boolean;
+  /**
+   * ID of the radio card group container.
+   * */
+  id: string;
+  /**
+   * The radio card items.
+   * */
+  items?: RadioCardGroupItem[];
+  /**
+   * Renders above the radio card group as a heading
+   * */
+  label?: string;
+  /**
+   * When true, keyboard navigation will loop from last item to first, and vice versa.
+   * */
+  loop?: boolean;
+  /**
+   * The name of the group. Submitted with its owning form as part of a name/value pair.
+   * */
+  name?: string;
+  /**
+   * Event handler called when the value changes.
+   * */
+  onValueChange?: (value: string) => void;
+  /**
+   * Set to stack cards horizontally or vertically. When `horizontal`, the min card width with is 100% when container is sm, and `--purpur-breakpoint-lg` / 4 when the container is md or larger.
+   * */
+  orientation?: "horizontal" | "vertical";
+  /**
+   * The position if the radio in the card items.
+   * */
+  radioPosition?: "right" | "left";
+  /**
+   * When true, indicates that the user must check a radio card item before the owning form can be submitted.
+   * */
+  required?: boolean;
+  /**
+   * The controlled value of the radio card item to check. Should be used in conjunction with onValueChange.
+   * */
+  value?: string;
+  /**
+   * Will only render given RadioCardItems.
+   * */
+  children?: ReactNode;
+};
+
+const rootClassName = "purpur-radio-card-group";
+
+const RadioCardGroupComponent = (
+  {
+    "data-testid": dataTestId,
+    "aria-labelledby": ariaLabelledby,
+    children,
+    className,
+    items,
+    label,
+    loop = true,
+    orientation = "vertical",
+    radioPosition = "right",
+    ...props
+  }: RadioCardGroupProps,
+  ref: ForwardedRef<HTMLDivElement>
+) => {
+  const radioCardItemChildren = Children.toArray(children).filter(isRadioCardItem);
+
+  return (
+    <div className={cx(className, `${rootClassName}__container`)} ref={ref}>
+      {label && (
+        <Heading
+          data-testid={dataTestId ? `${dataTestId}-label` : undefined}
+          id={`${props.id}-label`}
+          tag="h2"
+          variant="subsection-100"
+        >
+          {`${props.required ? "* " : ""}${label}`}
+        </Heading>
+      )}
+      {(!!items?.length || radioCardItemChildren.length) && (
+        <RadixRadioGroup.Root
+          {...props}
+          aria-labelledby={ariaLabelledby || (label ? `${props.id}-label` : undefined)}
+          className={cx(
+            rootClassName,
+            `${rootClassName}--${orientation}`,
+            `${rootClassName}--radio-${radioPosition}`
+          )}
+          data-testid={dataTestId}
+          loop={loop}
+        >
+          {items?.map((item) => (
+            <RadioCardItem
+              key={item.id}
+              {...item}
+              disabled={item.disabled || props.disabled}
+              data-testid={dataTestId ? `${dataTestId}-item` : undefined}
+            />
+          ))}
+          {Children.map(radioCardItemChildren, (child) =>
+            cloneElement(child, { disabled: child.props.disabled || props.disabled })
+          )}
+        </RadixRadioGroup.Root>
+      )}
+    </div>
+  );
+};
+
+export const RadioCardGroup = forwardRef(RadioCardGroupComponent);
+RadioCardGroup.displayName = "RadioCardGroup";
+
+// RadioCardItem must be exported after `RadioCardGroup` for the Storybook controls to be generated from RadioCardGroup props
+export type { RadioCardItemProps } from "./radio-card-item";
+export { RadioCardItem } from "./radio-card-item";

package/src/radio-card-item-image.tsx

@@ -0,0 +1,53 @@
+import React from "react";
+import { useState } from "react";
+import { Skeleton } from "@purpurds/skeleton";
+
+import { cx } from "./classnames";
+
+export type RadioCardImageProps = {
+  ["data-testid"]?: string;
+  altText: string;
+  loading?: "lazy" | "eager";
+  noPlaceholder?: boolean;
+  src: string;
+};
+
+const rootClassName = "purpur-radio-card-group__item-image";
+
+export const isRadioCardItemImageProps = (
+  imageProps?: RadioCardImageProps | unknown
+): imageProps is RadioCardImageProps =>
+  !!(imageProps as RadioCardImageProps)?.src && !!(imageProps as RadioCardImageProps).altText;
+
+export const RadioCardImage = ({
+  src,
+  altText,
+  noPlaceholder,
+  loading = "lazy",
+  ["data-testid"]: dataTestid,
+}: RadioCardImageProps) => {
+  const [isLoaded, setIsLoaded] = useState(false);
+  const onLoad = () => setIsLoaded(true);
+
+  const imageClassName = cx(rootClassName, {
+    [`${rootClassName}--loaded`]: isLoaded,
+  });
+
+  const placeholderClassName = cx(`${rootClassName}-placeholder`, {
+    [`${rootClassName}-placeholder--loaded`]: isLoaded,
+  });
+
+  return (
+    <>
+      <img
+        data-testid={dataTestid}
+        className={imageClassName}
+        src={src}
+        alt={altText}
+        loading={loading}
+        onLoad={onLoad}
+      />
+      {!noPlaceholder && <Skeleton className={placeholderClassName} />}
+    </>
+  );
+};

package/src/radio-card-item.test.tsx

@@ -0,0 +1,70 @@
+import React from "react";
+import * as RadixRadioGroup from "@radix-ui/react-radio-group";
+import * as matchers from "@testing-library/jest-dom/matchers";
+import { cleanup, render, screen } from "@testing-library/react";
+import { afterEach, describe, expect, it } from "vitest";
+
+import { RadioCardItem } from "./radio-card-group";
+
+expect.extend(matchers);
+
+describe("RadioButtonGroup", () => {
+  afterEach(cleanup);
+
+  it("should render with given props", () => {
+    render(
+      <RadixRadioGroup.RadioGroup>
+        <RadioCardItem
+          id="test"
+          data-testid="test"
+          value="test-value"
+          title="Test title"
+          body="Test body"
+          image={{ src: "test-src", altText: "test alt text" }}
+        />
+      </RadixRadioGroup.RadioGroup>
+    );
+
+    expect(screen.getByTestId("test")).toHaveAttribute("id", "test");
+    expect(screen.getByTestId("test")).toHaveValue("test-value");
+    expect(screen.getByTestId("test-title")).toHaveTextContent("Test title");
+    expect(screen.getByTestId("test-body")).toHaveTextContent("Test body");
+    expect(screen.getByTestId("test-image")).toHaveAttribute("src", "test-src");
+    expect(screen.getByTestId("test-image")).toHaveAttribute("alt", "test alt text");
+  });
+
+  it("should render with given custom props", () => {
+    render(
+      <RadixRadioGroup.RadioGroup>
+        <RadioCardItem
+          id="test"
+          data-testid="test"
+          value="test-value"
+          title={<div data-testid="custom-title">Custom title</div>}
+          body={<div data-testid="custom-body">Custom body</div>}
+          image={<img data-testid="custom-image" />}
+        />
+      </RadixRadioGroup.RadioGroup>
+    );
+
+    expect(screen.getByTestId("test")).toHaveAttribute("id", "test");
+    expect(screen.getByTestId("test")).toHaveValue("test-value");
+    expect(screen.getByTestId("custom-title")).toHaveTextContent("Custom title");
+    expect(screen.getByTestId("custom-body")).toHaveTextContent("Custom body");
+    expect(screen.getByTestId("custom-image")).toBeInTheDocument();
+  });
+
+  it("should optional props when not given", () => {
+    render(
+      <RadixRadioGroup.RadioGroup>
+        <RadioCardItem id="test" data-testid="test" value="test-value" title="Test title" />
+      </RadixRadioGroup.RadioGroup>
+    );
+
+    expect(screen.getByTestId("test")).toHaveAttribute("id", "test");
+    expect(screen.getByTestId("test")).toHaveValue("test-value");
+    expect(screen.getByTestId("test-title")).toHaveTextContent("Test title");
+    expect(screen.queryByTestId("test-body")).not.toBeInTheDocument();
+    expect(screen.queryByTestId("test-image")).not.toBeInTheDocument();
+  });
+});

package/src/radio-card-item.tsx

@@ -0,0 +1,129 @@
+import React, {
+  ForwardedRef,
+  forwardRef,
+  isValidElement,
+  ReactElement,
+  ReactNode,
+  ReactPortal,
+} from "react";
+import { Paragraph } from "@purpurds/paragraph";
+import * as RadixRadioGroup from "@radix-ui/react-radio-group";
+
+import { cx } from "./classnames";
+import {
+  isRadioCardItemImageProps,
+  RadioCardImage,
+  RadioCardImageProps,
+} from "./radio-card-item-image";
+
+const rootClassName = "purpur-radio-card-group__item";
+
+type CustomElement = ((props: { disabled?: boolean }) => ReactNode) | ReactNode;
+type NonNullCustomElement =
+  | ((props: { disabled?: boolean }) => NonNullable<ReactNode>)
+  | NonNullable<ReactNode>;
+
+export type RadioCardItemProps = {
+  ["data-testid"]?: string;
+  body?: string | CustomElement;
+  children?: ReactNode;
+  disabled?: boolean;
+  id: string;
+  image?: RadioCardImageProps | CustomElement;
+  required?: boolean;
+  title: string | NonNullCustomElement;
+  value: string;
+};
+
+const renderCustomElement = (
+  element: CustomElement | NonNullCustomElement,
+  { disabled }: Pick<RadioCardItemProps, "disabled">
+) => (typeof element === "function" ? element({ disabled }) : element);
+
+const RadioCardItemComponent = (props: RadioCardItemProps, ref: ForwardedRef<HTMLDivElement>) => {
+  const {
+    ["data-testid"]: dataTestid,
+    body,
+    children,
+    disabled,
+    id,
+    image,
+    required,
+    title,
+    value,
+  } = props;
+
+  return (
+    <div className={cx(`${rootClassName}-container`)} ref={ref}>
+      <RadixRadioGroup.Item
+        className={cx(rootClassName)}
+        data-testid={dataTestid}
+        disabled={disabled}
+        id={id}
+        required={required}
+        value={value}
+      >
+        {image && (
+          <span className={cx(`${rootClassName}-image-container`)}>
+            {isRadioCardItemImageProps(image) ? (
+              <RadioCardImage {...image} data-testid={dataTestid && `${dataTestid}-image`} />
+            ) : (
+              renderCustomElement(image, props)
+            )}
+          </span>
+        )}
+        <span className={cx(`${rootClassName}-content`)}>
+          <span className={cx(`${rootClassName}-top-container`)}>
+            {typeof title === "string" ? (
+              <Paragraph
+                className={cx(`${rootClassName}-title`)}
+                data-testid={dataTestid && `${dataTestid}-title`}
+                variant="paragraph-100"
+                disabled={disabled}
+              >
+                {title}
+              </Paragraph>
+            ) : (
+              renderCustomElement(title, props)
+            )}
+            <span className={cx(`${rootClassName}-radio`)}>
+              <RadixRadioGroup.Indicator className={cx(`${rootClassName}-indicator`)} />
+            </span>
+          </span>
+          {body && (
+            <span className={cx(`${rootClassName}-bottom-container`)}>
+              {typeof body === "string" ? (
+                <Paragraph
+                  data-testid={dataTestid && `${dataTestid}-body`}
+                  variant="paragraph-100"
+                  disabled={disabled}
+                >
+                  {body}
+                </Paragraph>
+              ) : (
+                renderCustomElement(body, props)
+              )}
+            </span>
+          )}
+        </span>
+      </RadixRadioGroup.Item>
+      {children}
+    </div>
+  );
+};
+
+export const RadioCardItem = forwardRef(RadioCardItemComponent);
+RadioCardItem.displayName = "RadioCardItem";
+
+export const isRadioCardItem = (
+  child:
+    | ReactElement
+    | Iterable<ReactNode>
+    | ReactPortal
+    | string
+    | number
+    | boolean
+    | null
+    | undefined
+): child is ReactElement<RadioCardItemProps> =>
+  isValidElement<RadioCardItemProps>(child) && child?.type === RadioCardItem;