@developer-overheid-nl/don-register-components 1.3.0 → 1.6.1

package/src/paragraph/styles.module.css

@@ -1,6 +1,6 @@
-.short {
-  --nl-paragraph-font-size: 0.875rem;
-  --nl-paragraph-margin-block-end: 0.5rem;
-  padding-inline-start: 0.25rem;
-  border-inline-start: 1px solid var(--rhc-color-cool-grey-300);
-}
+.short {
+  --nl-paragraph-font-size: 0.875rem;
+  --nl-paragraph-margin-block-end: 0.5rem;
+  padding-inline-start: 0.25rem;
+  border-inline-start: 1px solid var(--rhc-color-cool-grey-300);
+}

package/src/pillBadge/PillBadge.examples.tsx

@@ -1,107 +1,107 @@
-/* Temporary file to showcase PillBadge examples in e.g. Storybook later */
-
-import Block from "../block/Block";
-import PillBadge from "./PillBadge";
-
-export const PillBadgeExamples = () => {
-  return (
-    <Block layout="flex-col">
-      <PillBadge
-        startValue="Kleur"
-        endValue="robijnrood"
-        type="color"
-        color="robijnrood"
-      />
-      <PillBadge startValue="Kleur" endValue="roze" type="color" color="roze" />
-      <PillBadge startValue="Kleur" endValue="rood" type="color" color="rood" />
-      <PillBadge
-        startValue="Kleur"
-        endValue="oranje"
-        type="color"
-        color="oranje"
-      />
-      <PillBadge
-        startValue="Kleur"
-        endValue="donkergeel"
-        type="color"
-        color="donkergeel"
-      />
-      <PillBadge startValue="Kleur" endValue="geel" type="color" color="geel" />
-      <PillBadge
-        startValue="Kleur"
-        endValue="donkergroen"
-        type="color"
-        color="donkergroen"
-      />
-      <PillBadge
-        startValue="Kleur"
-        endValue="groen"
-        type="color"
-        color="groen"
-      />
-      <PillBadge
-        startValue="Kleur"
-        endValue="mosgroen"
-        type="color"
-        color="mosgroen"
-      />
-      <PillBadge
-        startValue="Kleur"
-        endValue="mintgroen"
-        type="color"
-        color="mintgroen"
-      />
-      <PillBadge
-        startValue="Kleur"
-        endValue="donkerblauw"
-        type="color"
-        color="donkerblauw"
-      />
-      <PillBadge
-        startValue="Kleur"
-        endValue="hemelblauw"
-        type="color"
-        color="hemelblauw"
-      />
-      <PillBadge
-        startValue="Kleur"
-        endValue="paars"
-        type="color"
-        color="paars"
-      />
-      <PillBadge
-        startValue="Kleur"
-        endValue="violet"
-        type="color"
-        color="violet"
-      />
-      <PillBadge
-        startValue="Kleur"
-        endValue="lichtblauw"
-        type="color"
-        color="lichtblauw"
-      />
-      <PillBadge
-        startValue="Kleur"
-        endValue="coolgrey"
-        type="color"
-        color="coolgrey"
-      />
-      <PillBadge startValue="Percentage" endValue="76" type="percentage" />
-      <PillBadge
-        startValue="Percentage & Kleur"
-        endValue="42"
-        type="percentage"
-        color="robijnrood"
-      />
-      <PillBadge
-        startValue="Percentage & Kleur"
-        endValue="21"
-        type="percentage"
-        color="rood"
-      />
-    </Block>
-  );
-};
-
-export default PillBadgeExamples;
+/* Temporary file to showcase PillBadge examples in e.g. Storybook later */
+
+import Block from "../block/Block";
+import PillBadge from "./PillBadge";
+
+export const PillBadgeExamples = () => {
+  return (
+    <Block layout="flex-col">
+      <PillBadge
+        startValue="Kleur"
+        endValue="robijnrood"
+        type="color"
+        color="robijnrood"
+      />
+      <PillBadge startValue="Kleur" endValue="roze" type="color" color="roze" />
+      <PillBadge startValue="Kleur" endValue="rood" type="color" color="rood" />
+      <PillBadge
+        startValue="Kleur"
+        endValue="oranje"
+        type="color"
+        color="oranje"
+      />
+      <PillBadge
+        startValue="Kleur"
+        endValue="donkergeel"
+        type="color"
+        color="donkergeel"
+      />
+      <PillBadge startValue="Kleur" endValue="geel" type="color" color="geel" />
+      <PillBadge
+        startValue="Kleur"
+        endValue="donkergroen"
+        type="color"
+        color="donkergroen"
+      />
+      <PillBadge
+        startValue="Kleur"
+        endValue="groen"
+        type="color"
+        color="groen"
+      />
+      <PillBadge
+        startValue="Kleur"
+        endValue="mosgroen"
+        type="color"
+        color="mosgroen"
+      />
+      <PillBadge
+        startValue="Kleur"
+        endValue="mintgroen"
+        type="color"
+        color="mintgroen"
+      />
+      <PillBadge
+        startValue="Kleur"
+        endValue="donkerblauw"
+        type="color"
+        color="donkerblauw"
+      />
+      <PillBadge
+        startValue="Kleur"
+        endValue="hemelblauw"
+        type="color"
+        color="hemelblauw"
+      />
+      <PillBadge
+        startValue="Kleur"
+        endValue="paars"
+        type="color"
+        color="paars"
+      />
+      <PillBadge
+        startValue="Kleur"
+        endValue="violet"
+        type="color"
+        color="violet"
+      />
+      <PillBadge
+        startValue="Kleur"
+        endValue="lichtblauw"
+        type="color"
+        color="lichtblauw"
+      />
+      <PillBadge
+        startValue="Kleur"
+        endValue="coolgrey"
+        type="color"
+        color="coolgrey"
+      />
+      <PillBadge startValue="Percentage" endValue="76" type="percentage" />
+      <PillBadge
+        startValue="Percentage & Kleur"
+        endValue="42"
+        type="percentage"
+        color="robijnrood"
+      />
+      <PillBadge
+        startValue="Percentage & Kleur"
+        endValue="21"
+        type="percentage"
+        color="rood"
+      />
+    </Block>
+  );
+};
+
+export default PillBadgeExamples;

package/src/pillBadge/PillBadge.stories.tsx

@@ -0,0 +1,257 @@
+import type { Meta, StoryObj } from "@storybook/react-vite";
+import Block from "../block/Block";
+import PillBadge from "./PillBadge";
+
+/**
+ * PillBadge toont een start- en eindwaarde naast elkaar in een pil-vorm,
+ * bijvoorbeeld een status met kleur of een percentage.
+ */
+const meta = {
+  title: "Components/PillBadge",
+  component: PillBadge,
+  tags: ["autodocs", "custom"],
+  // args: {
+  //   type: 'color',
+  // },
+  argTypes: {
+    startValue: {
+      control: "text",
+    },
+    endValue: {
+      control: "text",
+    },
+    color: {
+      control: { type: "select" },
+      table: {
+        defaultValue: {
+          detail:
+            "deze kleur is niet los te kiezen, werkt goed met percentages",
+        },
+      },
+      options: [
+        "robijnrood",
+        "roze",
+        "rood",
+        "oranje",
+        "donkergeel",
+        "geel",
+        "donkergroen",
+        "groen",
+        "mosgroen",
+        "mintgroen",
+        "donkerblauw",
+        "hemelblauw",
+        "paars",
+        "violet",
+        "lichtblauw",
+        "coolgrey",
+        "grijs",
+        "grey",
+      ],
+    },
+  },
+  decorators: [
+    (Story) => (
+      <Block layout="flex-col">
+        <Story />
+      </Block>
+    ),
+  ],
+  parameters: {
+    a11y: {
+      config: {
+        checks: [
+          {
+            id: "color-contrast",
+            options: {
+              ignorePseudo: true,
+            },
+          },
+        ],
+      },
+    },
+  },
+} satisfies Meta<typeof PillBadge>;
+
+export default meta;
+
+type Story = StoryObj<typeof meta>;
+
+const colorExamples = [
+  {
+    startValue: "Kleur",
+    endValue: "robijnrood",
+    type: "color" as const,
+    color: "robijnrood",
+  },
+  {
+    startValue: "Kleur",
+    endValue: "roze",
+    type: "color" as const,
+    color: "roze",
+  },
+  {
+    startValue: "Kleur",
+    endValue: "rood",
+    type: "color" as const,
+    color: "rood",
+  },
+  {
+    startValue: "Kleur",
+    endValue: "oranje",
+    type: "color" as const,
+    color: "oranje",
+  },
+  {
+    startValue: "Kleur",
+    endValue: "donkergeel",
+    type: "color" as const,
+    color: "donkergeel",
+  },
+  {
+    startValue: "Kleur",
+    endValue: "geel",
+    type: "color" as const,
+    color: "geel",
+  },
+  {
+    startValue: "Kleur",
+    endValue: "donkergroen",
+    type: "color" as const,
+    color: "donkergroen",
+  },
+  {
+    startValue: "Kleur",
+    endValue: "groen",
+    type: "color" as const,
+    color: "groen",
+  },
+  {
+    startValue: "Kleur",
+    endValue: "mosgroen",
+    type: "color" as const,
+    color: "mosgroen",
+  },
+  {
+    startValue: "Kleur",
+    endValue: "mintgroen",
+    type: "color" as const,
+    color: "mintgroen",
+  },
+  {
+    startValue: "Kleur",
+    endValue: "donkerblauw",
+    type: "color" as const,
+    color: "donkerblauw",
+  },
+  {
+    startValue: "Kleur",
+    endValue: "hemelblauw",
+    type: "color" as const,
+    color: "hemelblauw",
+  },
+  {
+    startValue: "Kleur",
+    endValue: "paars",
+    type: "color" as const,
+    color: "paars",
+  },
+  {
+    startValue: "Kleur",
+    endValue: "violet",
+    type: "color" as const,
+    color: "violet",
+  },
+  {
+    startValue: "Kleur",
+    endValue: "lichtblauw",
+    type: "color" as const,
+    color: "lichtblauw",
+  },
+  {
+    startValue: "Kleur",
+    endValue: "coolgrey",
+    type: "color" as const,
+    color: "coolgrey",
+  },
+];
+
+const percentageExamples = [
+  { startValue: "Percentage", endValue: "76", type: "percentage" as const },
+  {
+    startValue: "Percentage & Kleur",
+    endValue: "42",
+    type: "percentage" as const,
+    color: "robijnrood",
+  },
+  {
+    startValue: "Percentage & Kleur",
+    endValue: "21",
+    type: "percentage" as const,
+    color: "rood",
+  },
+];
+
+export const Default: Story = {
+  args: {
+    startValue: "startValue",
+    endValue: "endValue",
+  },
+};
+
+export const ColorExamples: Story = {
+  args: {
+    startValue: "",
+    endValue: "",
+  },
+  render: () => (
+    <>
+      {colorExamples.map((example) => (
+        <PillBadge
+          key={`${example.startValue}-${example.endValue}`}
+          {...example}
+        />
+      ))}
+    </>
+  ),
+};
+
+export const PercentageExamples: Story = {
+  args: {
+    startValue: "",
+    endValue: "",
+  },
+  render: () => (
+    <>
+      {percentageExamples.map((example) => (
+        <PillBadge
+          key={`${example.startValue}-${example.endValue}`}
+          {...example}
+        />
+      ))}
+    </>
+  ),
+};
+
+export const AllExamples: Story = {
+  args: {
+    startValue: "",
+    endValue: "",
+  },
+  render: () => (
+    <>
+      {colorExamples.map((example) => (
+        <PillBadge
+          key={`color-${example.startValue}-${example.endValue}`}
+          {...example}
+        />
+      ))}
+      {percentageExamples.map((example) => (
+        <PillBadge
+          key={`percentage-${example.startValue}-${example.endValue}`}
+          {...example}
+        />
+      ))}
+    </>
+  ),
+};

package/src/pillBadge/PillBadge.tsx

@@ -1,51 +1,60 @@
-import clsx from "clsx";
-import type { PropsWithChildren } from "react";
-import styles from "./styles.module.css";
-
-export interface PillBadgeProps {
-  className?: string;
-  startValue: string | number | null | undefined;
-  endValue: string | number | null | undefined;
-  caption?: string;
-  type?: "color" | "percentage";
-  color?: string; // todo: enum
-}
-
-const PillBadge = (props: PropsWithChildren<PillBadgeProps>) => {
-  const {
-    className,
-    startValue,
-    endValue,
-    caption,
-    type = "color",
-    color,
-    children,
-    ...restProps
-  } = props;
-
-  return (
-    <figure
-      className={clsx(styles["pill-badge-figure"], className)}
-      {...restProps}
-    >
-      <div
-        className={clsx(
-          styles["pill-badge"],
-          type === "percentage" && styles["pill-badge--type-percentage"],
-        )}
-        data-percentage={type === "percentage" ? endValue : undefined}
-        data-color={color}
-      >
-        <span className={styles["pill-badge__start"]}>{startValue || "■"}</span>
-        <span className={styles["pill-badge__end"]}>
-          {endValue || "-"}
-          {type === "percentage" ? "%" : ""}
-        </span>
-      </div>
-      {children}
-      {caption && <figcaption>{caption}</figcaption>}
-    </figure>
-  );
-};
-
-export default PillBadge;
+import clsx from "clsx";
+import type { PropsWithChildren } from "react";
+import styles from "./styles.module.css";
+
+export interface PillBadgeProps {
+  className?: string;
+  /** Text on the start-side of the pill */
+  startValue: string | number | null | undefined;
+  /** Text on the end-side of the pill */
+  endValue: string | number | null | undefined;
+  /** Figure Caption text */
+  caption?: string;
+  /** Type of Pill badge
+   * @default color
+   */
+  type?: "color" | "percentage";
+  /** Color of the end-side of the pill
+   * @default lichtgroen
+   */
+  color?: string; // todo: enum
+}
+
+const PillBadge = (props: PropsWithChildren<PillBadgeProps>) => {
+  const {
+    className,
+    startValue,
+    endValue,
+    caption,
+    type = "color",
+    color,
+    children,
+    ...restProps
+  } = props;
+
+  return (
+    <figure
+      className={clsx(styles["pill-badge-figure"], className)}
+      {...restProps}
+    >
+      <div
+        className={clsx(
+          styles["pill-badge"],
+          type === "percentage" && styles["pill-badge--type-percentage"],
+        )}
+        data-percentage={type === "percentage" ? endValue : undefined}
+        data-color={color}
+      >
+        <span className={styles["pill-badge__start"]}>{startValue || "■"}</span>
+        <span className={styles["pill-badge__end"]}>
+          {endValue || "-"}
+          {type === "percentage" ? "%" : ""}
+        </span>
+      </div>
+      {children}
+      {caption && <figcaption>{caption}</figcaption>}
+    </figure>
+  );
+};
+
+export default PillBadge;