@developer-overheid-nl/don-register-components 1.3.1 → 1.6.2

package/src/overlay/Overlay.stories.tsx

@@ -0,0 +1,38 @@
+import type { Meta, StoryObj } from "@storybook/react-vite";
+import Overlay from "./Overlay";
+
+/**
+ * Overlay dekt zijn omliggende content af zolang `active` waar is,
+ * bijvoorbeeld tijdens het laden van een formulieractie. Vereist een
+ * `position: relative` ouderelement.
+ */
+const meta = {
+  title: "Components/Overlay",
+  component: Overlay,
+  tags: ["autodocs", "custom"],
+  args: {
+    active: true,
+  },
+  decorators: [
+    (Story) => (
+      <div style={{ position: "relative", maxWidth: "20rem" }}>
+        <p>
+          Deze inhoud wordt afgedekt terwijl er bijvoorbeeld op een
+          formulieractie wordt gewacht.
+        </p>
+        <Story />
+      </div>
+    ),
+  ],
+} satisfies Meta<typeof Overlay>;
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+export const Active: Story = {};
+
+export const Inactive: Story = {
+  args: {
+    active: false,
+  },
+};

package/src/overlay/Overlay.tsx

@@ -1,18 +1,18 @@
-import clsx from "clsx";
-import styles from "./styles.module.css";
-
-const Overlay = ({
-  children,
-  active,
-}: {
-  children?: React.ReactNode;
-  active: boolean;
-}) => {
-  return (
-    <div className={clsx(styles.overlay, active && styles.active)}>
-      {children}
-    </div>
-  );
-};
-
-export default Overlay;
+import clsx from "clsx";
+import styles from "./styles.module.css";
+
+const Overlay = ({
+  children,
+  active,
+}: {
+  children?: React.ReactNode;
+  active: boolean;
+}) => {
+  return (
+    <div className={clsx(styles.overlay, active && styles.active)}>
+      {children}
+    </div>
+  );
+};
+
+export default Overlay;

package/src/overlay/styles.module.css

@@ -1,15 +1,15 @@
-.overlay {
-  display: none;
-
-  &.active {
-    position: absolute;
-    top: 0;
-    left: -1px;
-    z-index: 999;
-    display: block;
-    width: 100%;
-    height: 100%;
-    background-color: rgba(255, 255, 255, 0.25);
-    backdrop-filter: blur(1px);
-  }
-}
+.overlay {
+  display: none;
+
+  &.active {
+    position: absolute;
+    top: 0;
+    left: -1px;
+    z-index: 999;
+    display: block;
+    width: 100%;
+    height: 100%;
+    background-color: rgba(255, 255, 255, 0.25);
+    backdrop-filter: blur(1px);
+  }
+}

package/src/pagination/Pagination.stories.tsx

@@ -0,0 +1,91 @@
+import type { Meta, StoryObj } from "@storybook/react-vite";
+import Pagination from "./Pagination";
+
+/**
+ * Pagination toont een reeks paginalinks, met optionele eerste/vorige/
+ * volgende/laatste-links en ellipsissen. De props komen doorgaans uit de
+ * `getPagination`-helper in `packages/layouts`.
+ */
+const meta = {
+  title: "Components/Pagination",
+  component: Pagination,
+  tags: ["autodocs", "custom"],
+} satisfies Meta<typeof Pagination>;
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+export const Default: Story = {
+  name: "Middelste pagina (met ellipsis)",
+  args: {
+    links: [
+      { href: "/apis/pagina/3", label: 3, current: false },
+      { href: "/apis/pagina/4", label: 4, current: false },
+      { href: "/apis/pagina/5", label: 5, current: true, range: [81, 100] },
+      { href: "/apis/pagina/6", label: 6, current: false },
+      { href: "/apis/pagina/7", label: 7, current: false },
+    ],
+    first: { href: "/apis/pagina/1", label: 1 },
+    prev: { href: "/apis/pagina/4", label: 4 },
+    ellipsisBefore: true,
+    ellipsisAfter: true,
+    next: { href: "/apis/pagina/6", label: 6 },
+    last: { href: "/apis/pagina/10", label: 10 },
+  },
+};
+
+export const FirstPage: Story = {
+  name: "Eerste pagina",
+  args: {
+    links: [
+      { href: "/apis/pagina/1", label: 1, current: true, range: [1, 20] },
+      { href: "/apis/pagina/2", label: 2, current: false },
+      { href: "/apis/pagina/3", label: 3, current: false },
+    ],
+    first: false,
+    prev: false,
+    ellipsisBefore: false,
+    next: { href: "/apis/pagina/2", label: 2 },
+    last: { href: "/apis/pagina/10", label: 10 },
+    ellipsisAfter: true,
+  },
+};
+
+export const LastPage: Story = {
+  name: "Laatste pagina",
+  args: {
+    links: [
+      { href: "/apis/pagina/8", label: 8, current: false },
+      { href: "/apis/pagina/9", label: 9, current: false },
+      {
+        href: "/apis/pagina/10",
+        label: 10,
+        current: true,
+        range: [181, 200],
+      },
+    ],
+    first: { href: "/apis/pagina/1", label: 1 },
+    prev: { href: "/apis/pagina/9", label: 9 },
+    ellipsisBefore: true,
+    next: false,
+    last: false,
+    ellipsisAfter: false,
+  },
+};
+
+export const FewPages: Story = {
+  name: "Weinig pagina's (geen ellipsis)",
+  args: {
+    links: [
+      { href: "/apis/pagina/1", label: 1, current: false },
+      { href: "/apis/pagina/2", label: 2, current: true, range: [21, 40] },
+      { href: "/apis/pagina/3", label: 3, current: false },
+    ],
+    prev: { href: "/apis/pagina/1", label: 1 },
+    next: { href: "/apis/pagina/3", label: 3 },
+    first: false,
+    last: false,
+    ellipsisBefore: false,
+    ellipsisAfter: false,
+  },
+};