feat: pagination

nl-design-system · Aug 6, 2021 · 7c749ba · 7c749ba
1 parent f0b166d
commit 7c749ba
Show file tree

Hide file tree

Showing 12 changed files with 783 additions and 0 deletions.
diff --git a/components/pagination/README.md b/components/pagination/README.md
@@ -0,0 +1 @@
+# Pagination navigation
diff --git a/components/pagination/bem.scss b/components/pagination/bem.scss
@@ -0,0 +1,112 @@
+/**
+ * @license EUPL-1.2
+ * Copyright (c) 2021 Robbert Broersma
+ */
+
+@import "../focus/bem";
+
+.utrecht-pagination {
+  font-size: var(--utrecht-pagination-font-size, var(--utrecht-document-font-family));
+  font-family: var(--utrecht-pagination-font-family, var(--utrecht-document-font-family));
+}
+
+.utrecht-pagination--distanced {
+  margin-block-start: var(--utrecht-pagination-margin-block-start);
+  margin-block-end: var(--utrecht-pagination-margin-block-end);
+}
+
+.utrecht-pagination__relative-link {
+  background-color: var(--utrecht-pagination-relative-link-background-color);
+  border-color: var(--utrecht-pagination-relative-link-border-color);
+  border-radius: var(--utrecht-pagination-relative-link-border-radius);
+  border-style: solid;
+  border-width: var(--utrecht-pagination-relative-link-border-width, 0);
+  color: var(--utrecht-pagination-relative-link-color);
+  display: inline-block;
+  font-weight: var(--utrecht-pagination-relative-link-font-weight);
+  padding-block-end: var(--utrecht-pagination-relative-link-padding-block-end);
+  padding-block-start: var(--utrecht-pagination-relative-link-padding-block-start);
+  padding-inline-end: var(--utrecht-pagination-relative-link-padding-inline-end);
+  padding-inline-start: var(--utrecht-pagination-relative-link-padding-inline-start);
+  text-decoration: var(--utrecht-pagination-relative-link-text-decoration);
+  text-transform: var(--utrecht-pagination-relative-link-text-transform);
+}
+
+.utrecht-pagination__relative-link--next {
+  margin-inline-start: var(--utrecht-pagination-relative-link-distanced-margin-inline-start);
+}
+
+.utrecht-pagination__relative-link--prev {
+  margin-inline-end: var(--utrecht-pagination-relative-link-distanced-margin-inline-end);
+}
+
+.utrecht-pagination__relative-link--disabled {
+  color: var(--utrecht-pagination-relative-link-disabled-color, var(--utrecht-pagination-relative-link-color));
+  background-color: var(
+    --utrecht-pagination-relative-link-disabled-background-color,
+    var(--utrecht-pagination-relative-link-background-color)
+  );
+}
+
+.utrecht-pagination__relative-link--focus,
+.utrecht-pagination__relative-link:focus {
+  @include utrecht-focus;
+}
+
+.utrecht-pagination__relative-link--hover,
+.utrecht-pagination__relative-link:hover {
+  color: var(--utrecht-pagination-relative-link-hover-color, var(--utrecht-pagination-relative-link-color));
+  background-color: var(
+    --utrecht-pagination-relative-link-hover-background-color,
+    var(--utrecht-pagination-relative-link-background-color)
+  );
+  border-color: var(
+    --utrecht-pagination-relative-link-hover-border-color,
+    var(--utrecht-pagination-relative-link-border-color)
+  );
+}
+
+.utrecht-pagination__page-link {
+  display: inline-block;
+  color: var(--utrecht-pagination-page-link-color);
+  background-color: var(--utrecht-pagination-page-link-background-color);
+  border-style: solid;
+  border-radius: var(--utrecht-pagination-page-link-border-radius);
+  border-width: var(--utrecht-pagination-page-link-border-width);
+  border-color: var(--utrecht-pagination-page-link-border-color, 0);
+  padding-inline-start: var(--utrecht-pagination-page-link-padding-inline-start);
+  padding-inline-end: var(--utrecht-pagination-page-link-padding-inline-end);
+  padding-block-start: var(--utrecht-pagination-page-link-padding-block-start);
+  padding-block-end: var(--utrecht-pagination-page-link-padding-block-end);
+  font-weight: var(--utrecht-pagination-page-link-font-weight);
+  text-decoration: var(--utrecht-pagination-page-link-text-decoration);
+}
+
+.utrecht-pagination__page-link--current {
+  color: var(--utrecht-pagination-page-link-current-color);
+  background-color: var(--utrecht-pagination-page-link-current-background-color);
+  border-color: var(--utrecht-pagination-page-link-current-border-color);
+}
+
+.utrecht-pagination__page-link--distanced,
+.utrecht-pagination__page-link ~ .utrecht-pagination__page-link {
+  margin-inline-start: var(--utrecht-pagination-page-link-distanced-margin-inline-start);
+}
+
+.utrecht-pagination__page-link--hover,
+.utrecht-pagination__page-link:hover {
+  color: var(--utrecht-pagination-page-link-hover-color, var(--utrecht-pagination-page-link-color));
+  background-color: var(
+    --utrecht-pagination-page-link-hover-background-color,
+    var(--utrecht-pagination-page-link-background-color)
+  );
+  border-color: var(
+    --utrecht-pagination-page-link-hover-border-color,
+    var(--utrecht-pagination-page-link-border-color)
+  );
+}
+
+.utrecht-pagination__page-link--focus,
+.utrecht-pagination__page-link:focus {
+  @include utrecht-focus;
+}
diff --git a/components/pagination/bem.stories.mdx b/components/pagination/bem.stories.mdx
@@ -0,0 +1,139 @@
+<!--
+@license EUPL-1.2
+Copyright (c) 2021 Robbert Broersma
+-->
+
+import { Meta, Story, Canvas, ArgsTable } from "@storybook/addon-docs";
+import clsx from "clsx";
+import "./bem.scss";
+import README from "./README.md";
+
+export const LinkTemplate = ({ disabled = false, href = "", rel = null, textContent = "", title = "" }) =>
+  `<${disabled ? "span" : "a"} href="${href}" class="${clsx(
+    "utrecht-pagination__relative-link",
+    disabled && "utrecht-pagination__relative-link--disabled",
+    rel === "next" && "utrecht-pagination__relative-link--next",
+    rel === "prev" && "utrecht-pagination__relative-link--prev"
+  )}"${rel ? ` rel="${rel}"` : ""}${title ? ` aria-label="${title}"` : ""}>${textContent}</${disabled ? "span" : "a"}>`;
+
+export const ItemTemplate = ({ current = false, href = "", rel = null, textContent = "" }) =>
+  `<a class="${clsx(
+    "utrecht-pagination__page-link",
+    current && "utrecht-pagination__page-link--current"
+  )}" href="${href}"${current ? ' aria-current="true"' : ""}${rel ? ` rel="${rel}"` : ""}>${textContent}</a>`;
+
+export const Template = ({ currentIndex = -1, distanced = false, links = [], next = null, prev = null }) =>
+  `<nav class="${clsx(
+    "utrecht-pagination",
+    distanced && "utrecht-pagination--distanced"
+  )}"><span class="utrecht-pagination__before">${
+    prev ? LinkTemplate({ ...prev, rel: "prev", textContent: "Vorige" }) : ""
+  }</span><span role="group" class="utrecht-pagination__pages">${links
+    .sort((a, b) => (a.index === b.index ? 0 : a.index > b.index ? 1 : -1))
+    .map((link, arrayIndex) => {
+      const index = typeof link.index === "number" ? link.index : arrayIndex;
+      return {
+        index,
+        current: typeof currentIndex === "number" && index === currentIndex,
+        rel:
+          typeof currentIndex === "number"
+            ? index === currentIndex + 1
+              ? "next"
+              : index === currentIndex - 1
+              ? "prev"
+              : null
+            : null,
+        textContent: link.index || index,
+        ...link,
+      };
+    })
+    .map((link) => ItemTemplate(link))
+    .join("")}</span><span class="utrecht-pagination__before">${
+    next ? LinkTemplate({ ...next, rel: "next", textContent: "Volgende" }) : ""
+  }</span></nav>`;
+
+<Meta
+  title="Components/Pagination navigation"
+  argTypes={{
+    currentIndex: {
+      description: "Current index",
+      type: "number",
+    },
+    distanced: {
+      description: "Distance the element from adjacent content",
+      control: "boolean",
+    },
+    links: {
+      description: "Items",
+      type: "array",
+    },
+    prev: {
+      description: "Previous link",
+      type: "object",
+    },
+    next: {
+      description: "Next link",
+      type: "object",
+    },
+  }}
+  parameters={{
+    docs: {
+      transformSource: (_src, { args }) => Template(args),
+    },
+    status: {
+      type: "WORK IN PROGRESS",
+    },
+    notes: {
+      UX: README,
+    },
+  }}
+/>
+
+# Pagination navigation
+
+<Canvas>
+  <Story
+    name="Pagination navigation"
+    args={{
+      currentIndex: 3,
+      distanced: true,
+      links: [
+        {
+          href: "./1",
+          index: 1,
+          title: "Resultaat 1 tot 10",
+        },
+        {
+          href: "./2",
+          index: 2,
+          title: "Resultaat 11 tot 20",
+        },
+        {
+          href: "./3",
+          index: 3,
+          title: "Resultaat 21 tot 30",
+        },
+        {
+          href: "./4",
+          index: 4,
+          title: "Resultaat 31 tot 40",
+        },
+        {
+          href: "./5",
+          index: 5,
+          title: "Resultaat 41 tot 50",
+        },
+      ],
+      next: {
+        href: "./2",
+      },
+      prev: {
+        disabled: true,
+      },
+    }}
+  >
+    {Template.bind({})}
+  </Story>
+</Canvas>
+
+<ArgsTable story="Pagination navigation" />
diff --git a/components/pagination/block.style-dictionary.json b/components/pagination/block.style-dictionary.json
@@ -0,0 +1,30 @@
+{
+  "utrecht": {
+    "pagination": {
+      "font-size": {
+        "css": {
+          "syntax": "<length>",
+          "inherits": true
+        }
+      },
+      "font-family": {
+        "css": {
+          "syntax": "*",
+          "inherits": true
+        }
+      },
+      "margin-block-start": {
+        "css": {
+          "syntax": "<length>",
+          "inherits": true
+        }
+      },
+      "margin-block-end": {
+        "css": {
+          "syntax": "<length>",
+          "inherits": true
+        }
+      }
+    }
+  }
+}
diff --git a/components/pagination/element-modifier.style-dictionary.json b/components/pagination/element-modifier.style-dictionary.json
@@ -0,0 +1,92 @@
+{
+  "utrecht": {
+    "pagination": {
+      "page-link": {
+        "current": {
+          "background-color": {
+            "css": {
+              "syntax": "<color>",
+              "inherits": true
+            }
+          },
+          "border-color": {
+            "css": {
+              "syntax": "<color>",
+              "inherits": true
+            }
+          },
+          "color": {
+            "css": {
+              "syntax": "<color>",
+              "inherits": true
+            }
+          }
+        },
+        "distanced": {
+          "margin-inline-start": {
+            "css": {
+              "syntax": "<length>",
+              "inherits": true
+            }
+          }
+        },
+        "hover": {
+          "background-color": {
+            "css": {
+              "syntax": "<color>",
+              "inherits": true
+            }
+          },
+          "border-color": {
+            "css": {
+              "syntax": "<color>",
+              "inherits": true
+            }
+          },
+          "color": {
+            "css": {
+              "syntax": "<color>",
+              "inherits": true
+            }
+          }
+        }
+      }
+    },
+    "relative-link": {
+      "distanced": {
+        "margin-inline-end": {
+          "css": {
+            "syntax": "<length>",
+            "inherits": true
+          }
+        },
+        "margin-inline-start": {
+          "css": {
+            "syntax": "<length>",
+            "inherits": true
+          }
+        }
+      },
+      "hover": {
+        "background-color": {
+          "css": {
+            "syntax": "<color>",
+            "inherits": true
+          }
+        },
+        "border-color": {
+          "css": {
+            "syntax": "<color>",
+            "inherits": true
+          }
+        },
+        "color": {
+          "css": {
+            "syntax": "<color>",
+            "inherits": true
+          }
+        }
+      }
+    }
+  }
+}