@purpurds/radio-card-group 3.0.0

package/readme.mdx

@@ -0,0 +1,188 @@
+import { Meta, ArgTypes, Primary, Subtitle } from "@storybook/blocks";
+
+import * as RadioCardGroupStories from "./src/radio-card-group.stories";
+import packageInfo from "./package.json";
+
+<Meta name="Docs" title="Components/RadioCardGroup" of={RadioCardGroupStories} />
+
+# RadioCardGroup
+
+<Subtitle>Version {packageInfo.version}</Subtitle>
+
+### Showcase
+
+<Primary />
+
+### Properties
+
+<ArgTypes />
+
+### Installation
+
+#### Via NPM
+
+Add the dependency to your consumer app like `"@purpurds/radio-card-group": "x.y.z"`
+
+#### From outside the monorepo (build-time)
+
+To install this package, you need to setup access to the artifactory. [Click here to go to the guide on how to do that](https://github.com/telia-company/jfrog-documentation/blob/main/doc/JFrog/JFrog_Onboarding.md#getting-access-to-artifactory-and-other-jfrog-applications).
+
+---
+
+In MyApp.tsx
+
+```tsx
+import "@purpurds/tokens/index.css";
+```
+
+or
+
+```tsx
+import "@purpurds/radio-card-group/styles";
+```
+
+### Examples
+
+In MyComponent.tsx
+
+#### Controlled
+
+```tsx
+import { RadioCardGroup } from "@purpurds/radio-card-group";
+
+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
+
+```tsx
+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
+
+```tsx
+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
+
+```tsx
+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>
+  );
+};
+```

package/src/classnames.ts

@@ -0,0 +1,4 @@
+import c from "classnames/bind";
+
+import styles from "./radio-card-group.module.scss";
+export const cx = c.bind(styles);

package/src/global.d.ts

@@ -0,0 +1,6 @@
+declare module "*.scss" {
+  const styles: { [className: string]: string };
+  export default styles;
+}
+
+declare module "*.png";

package/src/radio-card-group.module.scss

@@ -0,0 +1,257 @@
+@import "@purpurds/tokens/breakpoint/variables";
+
+$target-area-size: calc(var(--purpur-spacing-400) + var(--purpur-spacing-150));
+$radio-size: var(--purpur-spacing-300);
+$radio-target-area-padding: calc(calc($target-area-size - $radio-size) / 2);
+
+@mixin border($color, $width) {
+  box-shadow: $color 0px 0px 0px $width inset;
+}
+
+.purpur-radio-card-group {
+  $root: &;
+  width: 100%;
+  gap: var(--purpur-spacing-200);
+
+  &--vertical {
+    display: flex;
+    flex-direction: column;
+  }
+
+  &--horizontal {
+    display: grid;
+    grid-template-columns: 1fr;
+
+    @container (min-width: #{$purpur-breakpoint-md}) {
+      grid-template-columns: repeat(auto-fill, minmax(calc(var(--purpur-breakpoint-lg) / 4), 1fr));
+    }
+  }
+
+  &--radio-left {
+    & #{$root}__item {
+      flex-direction: row-reverse;
+    }
+
+    & #{$root}__item-bottom-container {
+      padding-left: calc($radio-size + var(--purpur-spacing-150));
+    }
+
+    & #{$root}__item-top-container {
+      flex-direction: row-reverse;
+      justify-content: flex-end;
+    }
+  }
+
+  &[data-orientation="horizontal"] {
+    flex-direction: row;
+    flex-wrap: wrap;
+
+    &:not([dir="rtl"]) {
+      gap: var(--purpur-spacing-150);
+    }
+  }
+
+  &__container {
+    display: flex;
+    flex-direction: column;
+    gap: var(--purpur-spacing-150);
+    align-items: flex-start;
+    container: purpur-radio-card-group / inline-size;
+  }
+
+  &__item-container {
+    display: flex;
+    flex-direction: column;
+    position: relative;
+    background-color: var(--purpur-color-background-primary);
+    border-radius: var(--purpur-border-radius-md);
+  }
+
+  &__item {
+    all: unset;
+    height: 100%;
+    width: 100%;
+    display: flex;
+    box-sizing: border-box;
+    border-radius: var(--purpur-border-radius-md);
+    cursor: pointer;
+    overflow: hidden;
+
+    &::after {
+      content: "";
+      pointer-events: none;
+      position: absolute;
+      inset: 0;
+      border-radius: var(--purpur-border-radius-md);
+      transition: box-shadow var(--purpur-motion-duration-150) ease;
+      @include border(var(--purpur-color-border-interactive-subtle), var(--purpur-border-width-xs));
+    }
+
+    &:disabled {
+      background-color: var(--purpur-color-background-interactive-disabled);
+
+      &::after {
+        @include border(var(--purpur-color-border-medium), var(--purpur-border-width-xs));
+      }
+
+      &[data-state="checked"] {
+        &::after {
+          @include border(var(--purpur-color-border-medium), var(--purpur-border-width-sm));
+        }
+      }
+
+      & #{$root}__item-radio {
+        background-color: var(--purpur-color-background-interactive-disabled);
+
+        cursor: default;
+        @include border(
+          var(--purpur-color-background-interactive-disabled),
+          var(--purpur-border-width-xs)
+        );
+      }
+    }
+
+    &:active:not(:disabled) {
+      &::after {
+        @include border(
+          var(--purpur-color-border-interactive-subtle-hover),
+          var(--purpur-border-width-xs)
+        );
+      }
+
+      & #{$root}__item-radio {
+        @include border(
+          var(--purpur-color-border-interactive-subtle-hover),
+          var(--purpur-border-width-xs)
+        );
+      }
+    }
+
+    &:not([data-state="checked"]):not(:disabled):not(:active):hover {
+      &::after {
+        @include border(
+          var(--purpur-color-border-interactive-subtle-hover),
+          var(--purpur-border-width-sm)
+        );
+      }
+
+      & #{$root}__item-radio {
+        @include border(
+          var(--purpur-color-border-interactive-subtle-hover),
+          var(--purpur-border-width-sm)
+        );
+      }
+    }
+
+    &[data-state="checked"]:not(:disabled) {
+      &,
+      &:hover,
+      &:active {
+        cursor: default;
+
+        &::after {
+          @include border(
+            var(--purpur-color-border-interactive-primary),
+            var(--purpur-border-width-sm)
+          );
+        }
+
+        & #{$root}__item-radio {
+          cursor: default;
+          @include border(
+            var(--purpur-color-border-interactive-primary),
+            var(--purpur-border-width-xs)
+          );
+        }
+      }
+    }
+
+    &:focus-visible::after {
+      outline: var(--purpur-border-width-sm) solid var(--purpur-color-border-interactive-focus);
+      outline-offset: var(--purpur-spacing-25);
+    }
+  }
+
+  &__item-content {
+    display: flex;
+    flex-direction: column;
+    gap: var(--purpur-spacing-50);
+    width: 100%;
+    padding: var(--purpur-spacing-200);
+  }
+
+  &__item-top-container {
+    display: flex;
+    justify-content: space-between;
+    gap: var(--purpur-spacing-150);
+    width: 100%;
+  }
+
+  &__item-title {
+    font-weight: var(--purpur-typography-weight-bold);
+  }
+
+  &__item-bottom-container {
+    display: flex;
+    flex-direction: column;
+  }
+
+  &__item-radio {
+    width: $radio-size;
+    height: $radio-size;
+    display: flex;
+    flex-shrink: 0;
+    align-items: center;
+    justify-content: center;
+    cursor: pointer;
+    box-sizing: border-box;
+    border-radius: var(--purpur-border-radius-full);
+    transition: box-shadow var(--purpur-motion-duration-150) ease;
+    @include border(var(--purpur-color-border-interactive-subtle), var(--purpur-border-width-xs));
+  }
+
+  &__item-indicator {
+    background-color: var(--purpur-color-background-primary);
+    width: var(--purpur-spacing-200);
+    height: var(--purpur-spacing-200);
+    border-radius: var(--purpur-border-radius-full);
+    background-color: var(--purpur-color-background-interactive-primary);
+
+    &[data-disabled] {
+      background-color: var(--purpur-color-text-weak);
+    }
+  }
+
+  &__item-image-container {
+    width: var(--purpur-spacing-1000);
+    overflow: hidden;
+    flex-shrink: 0;
+    position: relative;
+  }
+
+  &__item-image {
+    width: 100%;
+    height: 100%;
+    object-fit: cover;
+    opacity: 0;
+    transition: opacity var(--purpur-motion-duration-300);
+
+    &--loaded {
+      opacity: 1;
+    }
+  }
+
+  &__item-image-placeholder {
+    position: absolute !important;
+    inset: 0;
+    transition: opacity var(--purpur-motion-duration-300);
+
+    &--loaded {
+      opacity: 0 !important;
+    }
+  }
+
+  &__item-children {
+    padding: 0 var(--purpur-spacing-200) var(--purpur-spacing-200);
+  }
+}

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

@@ -0,0 +1,172 @@
+import type { Meta, StoryObj } from "@storybook/react";
+import imageFile from "../static/story-image.png";
+import { useArgs } from "@storybook/client-api";
+
+import { RadioCardGroup, RadioCardGroupItem, RadioCardItem } from "./radio-card-group";
+import React from "react";
+import { Badge } from "@purpurds/badge";
+import { Paragraph } from "@purpurds/paragraph";
+import { Grid } from "@purpurds/grid";
+
+import "@purpurds/badge/styles";
+import "@purpurds/grid/styles";
+import "@purpurds/heading/styles";
+import "@purpurds/paragraph/styles";
+import "@purpurds/skeleton/styles";
+
+const meta: Meta<typeof RadioCardGroup> = {
+  title: "Inputs/RadioCardGroup",
+  component: RadioCardGroup,
+};
+
+export default meta;
+type Story = StoryObj<typeof RadioCardGroup>;
+
+const items: RadioCardGroupItem[] = Array.from(Array(4).keys()).map((key) => ({
+  id: `${key + 1}`,
+  image: { src: imageFile, altText: "Example image" },
+  title: `Card title ${key + 1}`,
+  body: `Body ${key + 1}`,
+  value: `item-${key + 1}`,
+}));
+
+const decorators: Story["decorators"] = [
+  (Story, { args }) => (
+    <Grid>
+      <Grid.Row>
+        <Grid.Col width={12} widthMd={12} widthLg={args.orientation === "horizontal" ? 12 : 6}>
+          <Story />
+        </Grid.Col>
+      </Grid.Row>
+    </Grid>
+  ),
+];
+
+export const Controlled: Story = {
+  args: {
+    items,
+    label: "Controlled Radio card group",
+    id: "radio-card-story",
+    value: items[0].value,
+  },
+  parameters: {
+    design: [
+      {
+        name: "RadioCardGroup",
+        type: "figma",
+        url: "https://www.figma.com/file/XEaIIFskrrxIBHMZDkIuIg/Purpur-DS---Component-library-%26-guidelines?type=design&node-id=36624-5815",
+      },
+    ],
+  },
+  decorators,
+  render: ({ ...args }) => {
+    const [{ value }, updateArgs] = useArgs(); // eslint-disable-line react-hooks/rules-of-hooks
+    const onValueChange = (value: string) => {
+      args.onValueChange?.(value);
+      updateArgs({ value });
+    };
+
+    return <RadioCardGroup {...args} value={value} onValueChange={onValueChange} />;
+  },
+};
+
+export const Uncontrolled: Story = {
+  args: {
+    items,
+    label: "Uncontrolled radio card group label",
+    id: "radio-card-story",
+    defaultValue: items[0].value,
+  },
+  parameters: {
+    design: [
+      {
+        name: "RadioCardGroup",
+        type: "figma",
+        url: "https://www.figma.com/file/XEaIIFskrrxIBHMZDkIuIg/Purpur-DS---Component-library-%26-guidelines?type=design&node-id=36624-5815",
+      },
+    ],
+  },
+  decorators,
+};
+
+const itemsAsChildren: RadioCardGroupItem[] = [
+  {
+    id: "1",
+    image: { src: imageFile, altText: "Example image" },
+    title: "With image",
+    body: "A medium long body",
+    value: "item-1",
+  },
+  {
+    id: "2",
+    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: "14 599 kr",
+    value: "item-2",
+  },
+  {
+    id: "3",
+    title: "Item with custom body",
+    body: ({ disabled }) => (
+      <Paragraph disabled={disabled} variant="paragraph-100">
+        <span
+          style={{
+            textDecoration: "line-through",
+            color: "var(--purpur-color-gray-400)",
+            marginRight: "var(--purpur-spacing-50)",
+          }}
+        >
+          499 kr/mån
+        </span>
+        <span style={{ fontWeight: "var(--purpur-typography-weight-medium)" }}>199 kr/mån</span>
+      </Paragraph>
+    ),
+    value: "item-3",
+  },
+  {
+    id: "4",
+    title: "Item with more text content overall, too see how it looks.",
+    body: "Lorem ipsum dolor sit amet consectetur adipisicing elit. Saepe rem nostrum, perferendis cupiditate officia dignissimos dicta beatae nesciunt.",
+    value: "item-4",
+  },
+];
+
+export const ItemsAsChildren: Story = {
+  args: {
+    label: "Cards passed as children",
+    id: "radio-card-story",
+    defaultValue: items[0].value,
+  },
+  parameters: {
+    design: [
+      {
+        name: "RadioCardGroup",
+        type: "figma",
+        url: "https://www.figma.com/file/XEaIIFskrrxIBHMZDkIuIg/Purpur-DS---Component-library-%26-guidelines?type=design&node-id=36624-5815",
+      },
+    ],
+  },
+  decorators,
+  render: ({ ...args }) => {
+    const [{ value }, updateArgs] = useArgs(); // eslint-disable-line react-hooks/rules-of-hooks
+    const onValueChange = (value: string) => {
+      args.onValueChange?.(value);
+      updateArgs({ value });
+    };
+
+    return (
+      <RadioCardGroup {...args} value={value} onValueChange={onValueChange}>
+        {itemsAsChildren.map((item) => (
+          <RadioCardItem key={item.id} {...item} />
+        ))}
+        <div>This div will no be rendered since its no a RadioCardItem</div>
+      </RadioCardGroup>
+    );
+  },
+};