feat(BOOK-768): Added UspCard component with stories and implemented it in blocks

Approved-by: Bianca Widstam
2026-01-28 07:47:15 +00:00
parent 22b0f71c16
commit 0d357a116b
10 changed files with 222 additions and 34 deletions
--- a/packages/design-system/lib/components/UspCard/UspCard.stories.tsx
+++ b/packages/design-system/lib/components/UspCard/UspCard.stories.tsx
@@ -0,0 +1,132 @@
+import type { Meta, StoryObj } from "@storybook/nextjs-vite"
+
+import { RTETypeEnum } from "../JsonToHtml/types/rte/enums"
+import type { RTENode } from "../JsonToHtml/types/rte/node"
+import { UspCard } from "./UspCard"
+import { USP_ICON_NAMES } from "./utils"
+
+const DEFAULT_ARGS = {
+  nodes: [
+    {
+      uid: "paragraph",
+      attrs: { type: "asset" },
+      type: RTETypeEnum.p,
+      children: [
+        {
+          text: "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur vitae neque non ipsum efficitur hendrerit at ut nulla.",
+        },
+      ],
+    },
+  ] satisfies RTENode[],
+  embeds: [],
+}
+
+const meta: Meta<typeof UspCard> = {
+  title: "Core Components/Cards/UspCard",
+  parameters: {
+    docs: {
+      description: {
+        component:
+          "The card itself does not have a maximum width, but it will adapt to the width of its container. The card should be used together with other usp cards. It is recommended to use the UspCard inside a grid or a container with a set maximum width for best results.",
+      },
+    },
+  },
+  component: UspCard,
+  argTypes: {
+    iconName: {
+      control: "select",
+      options: USP_ICON_NAMES,
+      table: {
+        type: {
+          summary: USP_ICON_NAMES.join(" | "),
+        },
+        defaultValue: { summary: "Snowflake" },
+      },
+    },
+    embeds: {
+      control: "object",
+      description:
+        "The embeds used by the JsonToHtml component to render rich text content. This data comes from the RTE field in the CMS.",
+      table: {
+        type: { summary: "Node<Embeds>[]" },
+      },
+    },
+    nodes: {
+      control: "object",
+      description:
+        "The nodes used by the JsonToHtml component to render rich text content. This data comes from the RTE field in the CMS.",
+      table: {
+        type: { summary: "RTENode[]" },
+      },
+    },
+  },
+  args: { ...DEFAULT_ARGS },
+  decorators: [
+    (Story, context) => {
+      const showMultipleStyles = ["multiple cards", "different icons"].some(
+        (substring) => context.name.toLowerCase().includes(substring)
+      )
+      if (showMultipleStyles) {
+        return <Story />
+      }
+
+      return (
+        <div style={{ maxWidth: "400px" }}>
+          <Story />
+        </div>
+      )
+    },
+  ],
+}
+
+export default meta
+
+type Story = StoryObj<typeof UspCard>
+
+export const Default: Story = {
+  args: {
+    ...meta.args,
+  },
+}
+
+export const MultipleCards: Story = {
+  args: {
+    ...meta.args,
+  },
+  render: (args) => (
+    <div
+      style={{
+        display: "grid",
+        gridTemplateColumns: "repeat(3, 1fr)",
+        gap: "16px",
+        width: "min(800px, 100%)",
+        margin: "0 auto",
+      }}
+    >
+      <UspCard {...args} />
+      <UspCard {...args} />
+      <UspCard {...args} />
+    </div>
+  ),
+}
+
+export const DifferentIcons: Story = {
+  args: {
+    ...meta.args,
+  },
+  render: (args) => (
+    <div
+      style={{
+        display: "grid",
+        gridTemplateColumns: "repeat(3, 1fr)",
+        gap: "16px",
+        width: "min(800px, 100%)",
+        margin: "0 auto",
+      }}
+    >
+      <UspCard {...args} iconName={USP_ICON_NAMES[0]} />
+      <UspCard {...args} iconName={USP_ICON_NAMES[1]} />
+      <UspCard {...args} iconName={USP_ICON_NAMES[2]} />
+    </div>
+  ),
+}