@purpurds/radio-card-group v5.24.1

import { Meta, ArgTypes, Primary, Subtitle } from "@storybook/blocks";

import * as RadioCardGroupStories from "./src/radio-card-group.stories"; import packageInfo from "./package.json";

RadioCardGroup

Version {packageInfo.version}

Showcase

Properties

Installation

Via NPM

Add the dependency to your consumer app like "@purpurds/purpur": "^x.y.z"

In MyApp.tsx

or

import "@purpurds/purpur/styles";

Examples

In MyComponent.tsx

Controlled

import { RadioCardGroup } from "@purpurds/purpur";

export const MyComponent = ({ dataSet }: Props) => {
  const [selectedItem, setSelectedItem] = useState();
  const items = dataSet.map((itemData) => ({
    id: itemData.id,
    image: { src: itemData.imageSrc, altText: itemData.imageAltText },
    title: itemData.name,
    body: itemData.description,
    value: itemData.id,
  }));

  const onValueChange = (value?: string) => {
    const itemToSelect = items.find((item) => item.value === value);
    setSelectedItem(itemToSelect.value);
  };

  return (
    <div>
      <RadioCardGroup
        {...someProps}
        items={items}
        value={selectedItem}
        onValueChange={onValueChange}
      />
    </div>
  );
};

With items as children

import { RadioCardGroup } from "@purpurds/radio-card-group";

export const MyComponent = ({ dataSet }: Props) => {
  const [selectedItem, setSelectedItem] = useState();

  const onValueChange = (value?: string) => {
    const itemToSelect = dataSet.find((itemData) => itemData.id === value);
    setSelectedItem(itemToSelect.id);
  };

  return (
    <RadioCardGroup
      id="example"
      lable="Items as children"
      value={selectedItem}
      onValueChange={onValueChange}
    >
      {dataSet.map((itemData) => (
        <RadioCardItem
          key={itemData.id}
          id={itemData.id}
          image={{ src: itemData.imageSrc, altText: itemData.imageAltText }}
          title={itemData.name}
          body={itemData.description}
          value={itemData.id}
        />
      ))}
      <div>This div will no be rendered since its no a RadioCardItem</div>
    </RadioCardGroup>
  );
};

Uncontrolled

import { RadioCardGroup } from "@purpurds/radio-card-group";

export const MyComponent = ({ dataSet }: Props) => {
  const items = dataSet.map((itemData) => ({
    id: itemData.id,
    image: { src: itemData.imageSrc, altText: itemData.imageAltText },
    title: itemData.name,
    body: itemData.description,
    value: itemData.id,
  }));

  return (
    <div>
      <RadioCardGroup {...someProps} items={items} />
    </div>
  );
};

With custom title, body and image

import { RadioCardGroup } from "@purpurds/radio-card-group";
import { Badge } from "@purpurds/badge";
import { IconPebble } from "@purpurds/icon";
import { Paragraph } from "@purpurds/paragraph";

export const MyComponent = ({ dataSet }: Props) => {
  const items = dataSet.map((itemData) => ({
    id: itemData.id,
    image: (
      <div styles={{ display: "flex", justifyContent: "center", alignItems: "center" }}>
        <IconPebble />
      </div>
    ),
    title: ({ disabled }) => (
      <div style={{ display: "flex", gap: "var(--purpur-spacing-150)" }}>
        <Paragraph disabled={disabled} variant="paragraph-100">
          <b>Custom title</b>
        </Paragraph>
        <Badge variant="attention">Nice price!</Badge>
      </div>
    ),
    body: ({ disabled }) => (
      <Paragraph disabled={disabled} variant="paragraph-100">
        <span
          style={{
            textDecoration: "line-through",
            color: "var(--purpur-color-gray-400)",
            marginRight: "var(--purpur-spacing-50)",
          }}
        >
          {itemdata.ordinaryPrice} kr/mån
        </span>
        <span style={{ fontWeight: "var(--purpur-typography-weight-medium)" }}>
          {itemdata.price} kr/mån
        </span>
      </Paragraph>
    ),,
    value: itemData.id,
  }));

  return (
    <div>
      <RadioCardGroup {...someProps} items={items} />
    </div>
  );
};