@purpurds/radio-card-group
v4.3.0
Published
import { Meta, ArgTypes, Primary, Subtitle } from "@storybook/blocks";
Downloads
2,067
Readme
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>
);
};