@purpurds/radio-card-group 5.11.0 → 5.11.1

package/dist/radio-card-item-image.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"radio-card-item-image.d.ts","sourceRoot":"","sources":["../src/radio-card-item-image.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAM1B,MAAM,MAAM,mBAAmB,GAAG;IAChC,CAAC,aAAa,CAAC,CAAC,EAAE,MAAM,CAAC;IACzB,OAAO,EAAE,MAAM,CAAC;IAChB,OAAO,CAAC,EAAE,MAAM,GAAG,OAAO,CAAC;IAC3B,aAAa,CAAC,EAAE,OAAO,CAAC;IACxB,GAAG,EAAE,MAAM,CAAC;CACb,CAAC;AAIF,eAAO,MAAM,yBAAyB,gBACvB,mBAAmB,GAAG,OAAO,sCAEiD,CAAC;AAE9F,eAAO,MAAM,cAAc,2EAMxB,mBAAmB,sBAyBrB,CAAC"}
+{"version":3,"file":"radio-card-item-image.d.ts","sourceRoot":"","sources":["../src/radio-card-item-image.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAM1B,MAAM,MAAM,mBAAmB,GAAG;IAChC,CAAC,aAAa,CAAC,CAAC,EAAE,MAAM,CAAC;IACzB,OAAO,EAAE,MAAM,CAAC;IAChB,OAAO,CAAC,EAAE,MAAM,GAAG,OAAO,CAAC;IAC3B,aAAa,CAAC,EAAE,OAAO,CAAC;IACxB,GAAG,EAAE,MAAM,CAAC;CACb,CAAC;AAIF,eAAO,MAAM,yBAAyB,gBACvB,mBAAmB,GAAG,OAAO,KACzC,UAAU,IAAI,mBAC4E,CAAC;AAE9F,eAAO,MAAM,cAAc,2EAMxB,mBAAmB,sBAyBrB,CAAC"}

package/dist/radio-card-item.d.ts

@@ -9,16 +9,36 @@ type NonNullCustomElement = ((props: {
 }) => NonNullable<ReactNode>) | NonNullable<ReactNode>;
 export type RadioCardItemProps = {
     ["data-testid"]?: string;
+    /**
+     * `string | ReactNode | (props: { disabled?: boolean }) => ReactNode`
+     */
     body?: string | CustomElement;
     children?: ReactNode;
     disabled?: boolean;
     id: string;
+    /**
+     * The radio image.
+     *
+        union = {
+          "data-testid"?: string | undefined;
+          altText: string;
+          loading?: "lazy" | "eager" | undefined;
+          noPlaceholder?: boolean | undefined;
+          src: string;
+        } |
+        ((props: {
+          disabled?: boolean;
+        }) => ReactNode) | React.ReactNode
+     * */
     image?: RadioCardImageProps | CustomElement;
     required?: boolean;
-    title: string | NonNullCustomElement;
     value: string;
+    /**
+     * `union = string | Omit<ReactNode, "undefined" | "null">`
+     */
+    title: string | NonNullCustomElement;
 };
 export declare const RadioCardItem: React.ForwardRefExoticComponent<RadioCardItemProps & React.RefAttributes<HTMLDivElement>>;
-export declare const isRadioCardItem: (child: ReactElement | Iterable<ReactNode> | ReactPortal | string | number | boolean | null | undefined) => child is React.ReactElement<RadioCardItemProps, string | React.JSXElementConstructor<any>>;
+export declare const isRadioCardItem: (child: ReactElement | Iterable<ReactNode> | ReactPortal | string | number | boolean | null | undefined) => child is ReactElement<RadioCardItemProps>;
 export {};
 //# sourceMappingURL=radio-card-item.d.ts.map

package/dist/radio-card-item.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"radio-card-item.d.ts","sourceRoot":"","sources":["../src/radio-card-item.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,EAIZ,YAAY,EACZ,SAAS,EACT,WAAW,EACZ,MAAM,OAAO,CAAC;AAKf,OAAO,EAGL,mBAAmB,EACpB,MAAM,yBAAyB,CAAC;AAIjC,KAAK,aAAa,GAAG,CAAC,CAAC,KAAK,EAAE;IAAE,QAAQ,CAAC,EAAE,OAAO,CAAA;CAAE,KAAK,SAAS,CAAC,GAAG,SAAS,CAAC;AAChF,KAAK,oBAAoB,GACrB,CAAC,CAAC,KAAK,EAAE;IAAE,QAAQ,CAAC,EAAE,OAAO,CAAA;CAAE,KAAK,WAAW,CAAC,SAAS,CAAC,CAAC,GAC3D,WAAW,CAAC,SAAS,CAAC,CAAC;AAE3B,MAAM,MAAM,kBAAkB,GAAG;IAC/B,CAAC,aAAa,CAAC,CAAC,EAAE,MAAM,CAAC;IACzB,IAAI,CAAC,EAAE,MAAM,GAAG,aAAa,CAAC;IAC9B,QAAQ,CAAC,EAAE,SAAS,CAAC;IACrB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,EAAE,EAAE,MAAM,CAAC;IACX,KAAK,CAAC,EAAE,mBAAmB,GAAG,aAAa,CAAC;IAC5C,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,KAAK,EAAE,MAAM,GAAG,oBAAoB,CAAC;IACrC,KAAK,EAAE,MAAM,CAAC;CACf,CAAC;AA+EF,eAAO,MAAM,aAAa,2FAAqC,CAAC;AAGhE,eAAO,MAAM,eAAe,UAEtB,YAAY,GACZ,SAAS,SAAS,CAAC,GACnB,WAAW,GACX,MAAM,GACN,MAAM,GACN,OAAO,GACP,IAAI,GACJ,SAAS,+FAE6D,CAAC"}
+{"version":3,"file":"radio-card-item.d.ts","sourceRoot":"","sources":["../src/radio-card-item.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,EAIZ,YAAY,EACZ,SAAS,EACT,WAAW,EACZ,MAAM,OAAO,CAAC;AAKf,OAAO,EAGL,mBAAmB,EACpB,MAAM,yBAAyB,CAAC;AAIjC,KAAK,aAAa,GAAG,CAAC,CAAC,KAAK,EAAE;IAAE,QAAQ,CAAC,EAAE,OAAO,CAAA;CAAE,KAAK,SAAS,CAAC,GAAG,SAAS,CAAC;AAChF,KAAK,oBAAoB,GACrB,CAAC,CAAC,KAAK,EAAE;IAAE,QAAQ,CAAC,EAAE,OAAO,CAAA;CAAE,KAAK,WAAW,CAAC,SAAS,CAAC,CAAC,GAC3D,WAAW,CAAC,SAAS,CAAC,CAAC;AAE3B,MAAM,MAAM,kBAAkB,GAAG;IAC/B,CAAC,aAAa,CAAC,CAAC,EAAE,MAAM,CAAC;IAEzB;;OAEG;IACH,IAAI,CAAC,EAAE,MAAM,GAAG,aAAa,CAAC;IAC9B,QAAQ,CAAC,EAAE,SAAS,CAAC;IACrB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,EAAE,EAAE,MAAM,CAAC;IACX;;;;;;;;;;;;;SAaK;IACL,KAAK,CAAC,EAAE,mBAAmB,GAAG,aAAa,CAAC;IAC5C,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,KAAK,EAAE,MAAM,CAAC;IACd;;OAEG;IACH,KAAK,EAAE,MAAM,GAAG,oBAAoB,CAAC;CACtC,CAAC;AAmFF,eAAO,MAAM,aAAa,2FAAqC,CAAC;AAGhE,eAAO,MAAM,eAAe,UAEtB,YAAY,GACZ,QAAQ,CAAC,SAAS,CAAC,GACnB,WAAW,GACX,MAAM,GACN,MAAM,GACN,OAAO,GACP,IAAI,GACJ,SAAS,KACZ,KAAK,IAAI,YAAY,CAAC,kBAAkB,CACiC,CAAC"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@purpurds/radio-card-group",
-  "version": "5.11.0",
+  "version": "5.11.1",
   "license": "AGPL-3.0-only",
   "main": "./dist/radio-card-group.cjs.js",
   "types": "./dist/radio-card-group.d.ts",
@@ -16,39 +16,39 @@
   "dependencies": {
     "@radix-ui/react-radio-group": "~1.1.3",
     "classnames": "~2.5.0",
-    "@purpurds/heading": "5.11.0",
-    "@purpurds/tokens": "5.11.0",
-    "@purpurds/paragraph": "5.11.0",
-    "@purpurds/skeleton": "5.11.0"
+    "@purpurds/heading": "5.11.1",
+    "@purpurds/skeleton": "5.11.1",
+    "@purpurds/paragraph": "5.11.1",
+    "@purpurds/tokens": "5.11.1"
   },
   "devDependencies": {
     "@rushstack/eslint-patch": "~1.10.0",
-    "@storybook/blocks": "~7.6.0",
-    "@storybook/react": "~7.6.0",
+    "@storybook/preview-api": "^8.2.6",
+    "@storybook/react": "^8.2.6",
     "@telia/base-rig": "~8.2.0",
     "@telia/react-rig": "~3.2.0",
     "@testing-library/dom": "~9.3.3",
     "@testing-library/jest-dom": "~6.4.0",
     "@testing-library/react": "~14.3.0",
     "@types/node": "20.12.12",
-    "@types/react-dom": "~18.3.0",
-    "@types/react": "~18.3.0",
+    "@types/react-dom": "^18.3.0",
+    "@types/react": "^18.3.3",
     "eslint-plugin-testing-library": "~6.2.0",
-    "eslint": "~8.57.0",
+    "eslint": "^8.57.0",
     "jsdom": "~22.1.0",
     "lint-staged": "~10.5.3",
     "prettier": "~2.8.8",
-    "react-dom": "~18.3.0",
-    "react": "~18.3.0",
-    "typescript": "~5.4.2",
-    "vite": "~5.2.2",
+    "react-dom": "^18.3.1",
+    "react": "^18.3.1",
+    "storybook": "^8.2.6",
+    "typescript": "^5.5.4",
+    "vite": "5.3.4",
     "vitest": "~1.5.0",
-    "@storybook/client-api": "~7.6.0",
+    "@purpurds/badge": "5.11.1",
+    "@purpurds/button": "5.11.1",
     "@purpurds/component-rig": "1.0.0",
-    "@purpurds/grid": "5.11.0",
-    "@purpurds/button": "5.11.0",
-    "@purpurds/text-field": "5.11.0",
-    "@purpurds/badge": "5.11.0"
+    "@purpurds/grid": "5.11.1",
+    "@purpurds/text-field": "5.11.1"
   },
   "scripts": {
     "build:dev": "vite",

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

@@ -2,7 +2,7 @@ import React from "react";
 import { Badge } from "@purpurds/badge";
 import { Grid } from "@purpurds/grid";
 import { Paragraph } from "@purpurds/paragraph";
-import { useArgs } from "@storybook/client-api";
+import { useArgs } from "@storybook/preview-api";
 import type { Meta, StoryObj } from "@storybook/react";
 
 import "@purpurds/badge/styles";
@@ -11,12 +11,55 @@ import "@purpurds/heading/styles";
 import "@purpurds/paragraph/styles";
 import "@purpurds/skeleton/styles";
 import imageFile from "../static/story-image.png";
-import { RadioCardGroup, RadioCardGroupItem, RadioCardItem } from "./radio-card-group";
+import {
+  ORIENTATION,
+  RADIO_POSITION,
+  RadioCardGroup,
+  RadioCardGroupItem,
+  RadioCardItem,
+} from "./radio-card-group";
 
-const meta: Meta<typeof RadioCardGroup> = {
+const decorators: Story["decorators"] = [
+  (Story, { args }) => (
+    <Grid colsLg={args.orientation === "horizontal" ? 1 : 2}>
+      <Story />
+    </Grid>
+  ),
+];
+
+const meta = {
   title: "Inputs/RadioCardGroup",
   component: RadioCardGroup,
-};
+  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",
+    },
+  },
+  subcomponents: {
+    // eslint-disable-next-line @typescript-eslint/ban-ts-comment
+    //@ts-ignore
+    RadioCardGroupItem: RadioCardItem,
+  },
+  decorators,
+  argTypes: {
+    orientation: {
+      table: {
+        type: {
+          summary: ORIENTATION.map((x) => `"${x}"`).join(" | "),
+        },
+      },
+    },
+    radioPosition: {
+      table: {
+        type: {
+          summary: RADIO_POSITION.map((x) => `"${x}"`).join(" | "),
+        },
+      },
+    },
+  },
+} satisfies Meta<typeof RadioCardGroup>;
 
 export default meta;
 type Story = StoryObj<typeof RadioCardGroup>;
@@ -29,14 +72,6 @@ const items: RadioCardGroupItem[] = Array.from(Array(4).keys()).map((key) => ({
   value: `item-${key + 1}`,
 }));
 
-const decorators: Story["decorators"] = [
-  (Story, { args }) => (
-    <Grid colsLg={args.orientation === "horizontal" ? 1 : 2}>
-      <Story />
-    </Grid>
-  ),
-];
-
 export const Controlled: Story = {
   args: {
     items,
@@ -44,16 +79,6 @@ export const Controlled: Story = {
     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) => {
@@ -72,16 +97,6 @@ export const Uncontrolled: Story = {
     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[] = [
@@ -138,16 +153,6 @@ export const ItemsAsChildren: Story = {
     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) => {

package/src/radio-card-group.tsx

@@ -6,6 +6,8 @@ import { cx } from "./classnames";
 import { isRadioCardItem, RadioCardItem, RadioCardItemProps } from "./radio-card-item";
 
 export type RadioCardGroupItem = RadioCardItemProps & { ref?: Ref<HTMLDivElement> };
+export const ORIENTATION = ["horizontal", "vertical"] as const;
+export const RADIO_POSITION = ["right", "left"] as const;
 
 export type RadioCardGroupProps = {
   /**
@@ -53,11 +55,11 @@ export type RadioCardGroupProps = {
   /**
    * 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";
+  orientation?: (typeof ORIENTATION)[number];
   /**
    * The position if the radio in the card items.
    * */
-  radioPosition?: "right" | "left";
+  radioPosition?: (typeof RADIO_POSITION)[number];
   /**
    * When true, indicates that the user must check a radio card item before the owning form can be submitted.
    * */

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

@@ -42,7 +42,7 @@ describe("RadioButtonGroup", () => {
           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" />}
+          image={<img alt="" data-testid="custom-image" />}
         />
       </RadixRadioGroup.RadioGroup>
     );

package/src/radio-card-item.tsx

@@ -25,14 +25,35 @@ type NonNullCustomElement =
 
 export type RadioCardItemProps = {
   ["data-testid"]?: string;
+
+  /**
+   * `string | ReactNode | (props: { disabled?: boolean }) => ReactNode`
+   */
   body?: string | CustomElement;
   children?: ReactNode;
   disabled?: boolean;
   id: string;
+  /**
+   * The radio image.
+   * 
+      union = {
+        "data-testid"?: string | undefined;
+        altText: string;
+        loading?: "lazy" | "eager" | undefined;
+        noPlaceholder?: boolean | undefined;
+        src: string;
+      } | 
+      ((props: {
+        disabled?: boolean;
+      }) => ReactNode) | React.ReactNode
+   * */
   image?: RadioCardImageProps | CustomElement;
   required?: boolean;
-  title: string | NonNullCustomElement;
   value: string;
+  /**
+   * `union = string | Omit<ReactNode, "undefined" | "null">`
+   */
+  title: string | NonNullCustomElement;
 };
 
 const renderCustomElement = (
@@ -40,7 +61,10 @@ const renderCustomElement = (
   { disabled }: Pick<RadioCardItemProps, "disabled">
 ) => (typeof element === "function" ? element({ disabled }) : element);
 
-const RadioCardItemComponent = (props: RadioCardItemProps, ref: ForwardedRef<HTMLDivElement>) => {
+const RadioCardItemComponent = (
+  { title, ...propsx }: RadioCardItemProps,
+  ref: ForwardedRef<HTMLDivElement>
+) => {
   const {
     ["data-testid"]: dataTestid,
     body,
@@ -49,9 +73,10 @@ const RadioCardItemComponent = (props: RadioCardItemProps, ref: ForwardedRef<HTM
     id,
     image,
     required,
-    title,
     value,
-  } = props;
+  } = propsx;
+
+  const props = { title, ...propsx };
 
   return (
     <div className={cx(`${rootClassName}-container`)} ref={ref}>

package/readme.mdx

@@ -1,178 +0,0 @@
-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/purpur": "^x.y.z"`
-
-In MyApp.tsx
-
-or
-
-```tsx
-import "@purpurds/purpur/styles";
-```
-
-### Examples
-
-In MyComponent.tsx
-
-#### Controlled
-
-```tsx
-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
-
-```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>
-  );
-};
-```