@conduction/components 2.0.33 → 2.0.34

package/src/components/denhaag-wrappers/breadcrumbs/Breadcrumbs.tsx

@@ -1,89 +1,89 @@
-/**
- * This is a wrapper element based on https://nl-design-system.github.io/denhaag/?path=/docs/css-navigation-breadcrumb--default-story
- *
- * IMPORTANT: DO NOT MAKE CHANGES TO THIS FILE, AS ALL CHANGES WILL BE LOST UPON PACKAGE IMPLEMENTATION
- *
- * Note: we do not use css modules here due to this component being a wrapper
- */
-
-import { Link } from "gatsby";
-import * as React from "react";
-import "./Breadcrumbs.css";
-
-interface BreadcrumbsProps {
-  crumbs: {
-    pathname: string;
-    crumbLabel: string;
-  }[];
-}
-
-export const Breadcrumbs: React.FC<BreadcrumbsProps> = ({ crumbs }) => {
-  return (
-    <nav aria-label="Breadcrumb" className="denhaag-breadcrumb">
-      <ol className="denhaag-breadcrumb__list" itemScope itemType="https://schema.org/BreadcrumbList">
-        {crumbs.map((crumb, idx) => {
-          if (crumbs.length !== idx + 1) {
-            return <CrumbItem key={idx} {...crumb} {...{ idx }} />;
-          }
-
-          return <LastCrumbItem key={idx} {...crumb} {...{ idx }} />;
-        })}
-      </ol>
-    </nav>
-  );
-};
-
-interface CrumbItemProps {
-  pathname: string;
-  crumbLabel: string;
-  idx: number;
-}
-
-const CrumbItem: React.FC<CrumbItemProps> = ({ pathname, crumbLabel, idx }) => (
-  <li className="denhaag-breadcrumb__item" itemProp="itemListElement" itemScope itemType="https://schema.org/ListItem">
-    <Link className="denhaag-breadcrumb__link" to={pathname} itemProp="item">
-      <span className="denhaag-breadcrumb__text" itemProp="name">
-        {crumbLabel}
-      </span>
-      <svg
-        aria-hidden="true"
-        className="denhaag-icon"
-        fill="none"
-        focusable="false"
-        height="1em"
-        shape-rendering="auto"
-        viewBox="0 0 24 24"
-        width="1em"
-        xmlns="http://www.w3.org/2000/svg"
-      >
-        <path
-          d="M9.293 18.707a1 1 0 010-1.414L14.586 12 9.293 6.707a1 1 0 011.414-1.414l6 6a1 1 0 010 1.414l-6 6a1 1 0 01-1.414 0z"
-          fill="currentColor"
-        />
-      </svg>
-      <meta content={idx.toString()} itemProp="position" />
-    </Link>
-  </li>
-);
-
-const LastCrumbItem: React.FC<CrumbItemProps> = ({ pathname, crumbLabel, idx }) => (
-  <li
-    aria-current="page"
-    className="denhaag-breadcrumb__item"
-    itemProp="itemListElement"
-    itemScope
-    itemType="https://schema.org/ListItem"
-  >
-    <Link
-      aria-current="page"
-      className="denhaag-breadcrumb__link denhaag-breadcrumb__link--current"
-      to={pathname}
-      itemProp="item"
-    >
-      <span className="denhaag-breadcrumb__text" itemProp="name">
-        {crumbLabel}
-      </span>
-      <meta content={idx.toString()} itemProp="position" />
-    </Link>
-  </li>
-);
+/**
+ * This is a wrapper element based on https://nl-design-system.github.io/denhaag/?path=/docs/css-navigation-breadcrumb--default-story
+ *
+ * IMPORTANT: DO NOT MAKE CHANGES TO THIS FILE, AS ALL CHANGES WILL BE LOST UPON PACKAGE IMPLEMENTATION
+ *
+ * Note: we do not use css modules here due to this component being a wrapper
+ */
+
+import { Link } from "gatsby";
+import * as React from "react";
+import "./Breadcrumbs.css";
+
+interface BreadcrumbsProps {
+  crumbs: {
+    pathname: string;
+    crumbLabel: string;
+  }[];
+}
+
+export const Breadcrumbs: React.FC<BreadcrumbsProps> = ({ crumbs }) => {
+  return (
+    <nav aria-label="Breadcrumb" className="denhaag-breadcrumb">
+      <ol className="denhaag-breadcrumb__list" itemScope itemType="https://schema.org/BreadcrumbList">
+        {crumbs.map((crumb, idx) => {
+          if (crumbs.length !== idx + 1) {
+            return <CrumbItem key={idx} {...crumb} {...{ idx }} />;
+          }
+
+          return <LastCrumbItem key={idx} {...crumb} {...{ idx }} />;
+        })}
+      </ol>
+    </nav>
+  );
+};
+
+interface CrumbItemProps {
+  pathname: string;
+  crumbLabel: string;
+  idx: number;
+}
+
+const CrumbItem: React.FC<CrumbItemProps> = ({ pathname, crumbLabel, idx }) => (
+  <li className="denhaag-breadcrumb__item" itemProp="itemListElement" itemScope itemType="https://schema.org/ListItem">
+    <Link className="denhaag-breadcrumb__link" to={pathname} itemProp="item">
+      <span className="denhaag-breadcrumb__text" itemProp="name">
+        {crumbLabel}
+      </span>
+      <svg
+        aria-hidden="true"
+        className="denhaag-icon"
+        fill="none"
+        focusable="false"
+        height="1em"
+        shape-rendering="auto"
+        viewBox="0 0 24 24"
+        width="1em"
+        xmlns="http://www.w3.org/2000/svg"
+      >
+        <path
+          d="M9.293 18.707a1 1 0 010-1.414L14.586 12 9.293 6.707a1 1 0 011.414-1.414l6 6a1 1 0 010 1.414l-6 6a1 1 0 01-1.414 0z"
+          fill="currentColor"
+        />
+      </svg>
+      <meta content={idx.toString()} itemProp="position" />
+    </Link>
+  </li>
+);
+
+const LastCrumbItem: React.FC<CrumbItemProps> = ({ pathname, crumbLabel, idx }) => (
+  <li
+    aria-current="page"
+    className="denhaag-breadcrumb__item"
+    itemProp="itemListElement"
+    itemScope
+    itemType="https://schema.org/ListItem"
+  >
+    <Link
+      aria-current="page"
+      className="denhaag-breadcrumb__link denhaag-breadcrumb__link--current"
+      to={pathname}
+      itemProp="item"
+    >
+      <span className="denhaag-breadcrumb__text" itemProp="name">
+        {crumbLabel}
+      </span>
+      <meta content={idx.toString()} itemProp="position" />
+    </Link>
+  </li>
+);

package/src/components/denhaag-wrappers/pagination/Pagination.css

@@ -1,120 +1,120 @@
-.denhaag-pagination {
-  --denhaag-pagination-align: center;
-
-  align-items: center;
-  display: flex;
-  flex-direction: row;
-  justify-content: var(--denhaag-pagination-align);
-}
-
-@media (min-width: 640px) {
-  .denhaag-pagination,
-  .denhaag-pagination--start {
-    --denhaag-pagination-align: flex-start;
-  }
-
-  .denhaag-pagination--center {
-    --denhaag-pagination-align: center;
-  }
-
-  .denhaag-pagination--end {
-    --denhaag-pagination-align: end;
-  }
-}
-
-.denhaag-pagination__links {
-  display: flex;
-  flex-direction: row;
-}
-
-.denhaag-pagination__link {
-  aspect-ratio: 1 / 1;
-  align-items: center;
-  background-color: var(--denhaag-pagination-background-color, transparent);
-  border: 0;
-  border-radius: var(
-    --denhaag-pagination-border-radius,
-    var(--denhaag-border-radius)
-  );
-  color: var(--denhaag-pagination-color, var(--denhaag-pagination-link-color));
-  display: flex;
-  height: var(--denhaag-pagination-size);
-  justify-content: center;
-  line-height: 1.5;
-  position: relative;
-  text-align: center;
-  text-decoration: none;
-  width: var(--denhaag-pagination-size);
-  font-style: normal;
-  font-weight: var(--denhaag-pagination-font-weight);
-  font-size: var(--denhaag-pagination-font-size);
-}
-
-.denhaag-pagination__link:hover,
-.denhaag-pagination__link--hover {
-  --denhaag-pagination-color: var(--denhaag-pagination-link-hover-color);
-  cursor: pointer;
-}
-
-.denhaag-pagination__link:focus,
-.denhaag-pagination__link--focus {
-  outline: var(--denhaag-link-focus-outline);
-  border-radius: 0;
-}
-
-.denhaag-pagination__link:disabled,
-.denhaag-pagination__link--disabled {
-  --denhaag-pagination-color: var(--denhaag-pagination-link-disabled-color);
-
-  pointer-events: none;
-}
-
-.denhaag-pagination__link--arrow {
-  --denhaag-pagination-size: var(--denhaag-pagination-arrow-size);
-  --denhaag-pagination-font-size: var(--denhaag-pagination-arrow-font-size);
-}
-
-[dir="rtl"] .denhaag-pagination__link--arrow {
-  transform: scaleX(-1);
-}
-
-.denhaag-pagination__link + .denhaag-pagination__links,
-.denhaag-pagination__links + .denhaag-pagination__link {
-  margin-inline-start: var(--denhaag-pagination-margin-inline, 10px);
-}
-
-.denhaag-pagination__link:not(:first-child):not(:last-child):not(.denhaag-pagination__link--current):not([rel]) {
-  overflow: hidden;
-  pointer-events: none;
-  text-indent: calc(var(--denhaag-pagination-size) * 2);
-}
-
-.denhaag-pagination__link:not(:first-child):not(:last-child):not(.denhaag-pagination__link--current):not([rel])::before {
-  content: "...";
-  left: calc(50% - 7px);
-  line-height: 0;
-  position: absolute;
-  text-indent: 0;
-  vertical-align: baseline;
-}
-
-.denhaag-pagination__link--current {
-  --denhaag-pagination-color: var(--denhaag-pagination-link-current-color);
-  --denhaag-pagination-font-weight: var(
-    --denhaag-pagination-link-current-font-weight
-  );
-}
-
-.denhaag-pagination__link--current.denhaag-pagination__link:disabled,
-.denhaag-pagination__link--current.denhaag-pagination__link--disabled {
-  --denhaag-pagination-color: var(
-    --denhaag-pagination-link-current-disabled-color
-  );
-  --denhaag-pagination-background-color: var(
-    --denhaag-pagination-link-current-disabled-background-color
-  );
-}
-
-.denhaag-pagination .denhaag-icon {
-  font-size: inherit;
-}
+.denhaag-pagination {
+  --denhaag-pagination-align: center;
+
+  align-items: center;
+  display: flex;
+  flex-direction: row;
+  justify-content: var(--denhaag-pagination-align);
+}
+
+@media (min-width: 640px) {
+  .denhaag-pagination,
+  .denhaag-pagination--start {
+    --denhaag-pagination-align: flex-start;
+  }
+
+  .denhaag-pagination--center {
+    --denhaag-pagination-align: center;
+  }
+
+  .denhaag-pagination--end {
+    --denhaag-pagination-align: end;
+  }
+}
+
+.denhaag-pagination__links {
+  display: flex;
+  flex-direction: row;
+}
+
+.denhaag-pagination__link {
+  aspect-ratio: 1 / 1;
+  align-items: center;
+  background-color: var(--denhaag-pagination-background-color, transparent);
+  border: 0;
+  border-radius: var(
+    --denhaag-pagination-border-radius,
+    var(--denhaag-border-radius)
+  );
+  color: var(--denhaag-pagination-color, var(--denhaag-pagination-link-color));
+  display: flex;
+  height: var(--denhaag-pagination-size);
+  justify-content: center;
+  line-height: 1.5;
+  position: relative;
+  text-align: center;
+  text-decoration: none;
+  width: var(--denhaag-pagination-size);
+  font-style: normal;
+  font-weight: var(--denhaag-pagination-font-weight);
+  font-size: var(--denhaag-pagination-font-size);
+}
+
+.denhaag-pagination__link:hover,
+.denhaag-pagination__link--hover {
+  --denhaag-pagination-color: var(--denhaag-pagination-link-hover-color);
+  cursor: pointer;
+}
+
+.denhaag-pagination__link:focus,
+.denhaag-pagination__link--focus {
+  outline: var(--denhaag-link-focus-outline);
+  border-radius: 0;
+}
+
+.denhaag-pagination__link:disabled,
+.denhaag-pagination__link--disabled {
+  --denhaag-pagination-color: var(--denhaag-pagination-link-disabled-color);
+
+  pointer-events: none;
+}
+
+.denhaag-pagination__link--arrow {
+  --denhaag-pagination-size: var(--denhaag-pagination-arrow-size);
+  --denhaag-pagination-font-size: var(--denhaag-pagination-arrow-font-size);
+}
+
+[dir="rtl"] .denhaag-pagination__link--arrow {
+  transform: scaleX(-1);
+}
+
+.denhaag-pagination__link + .denhaag-pagination__links,
+.denhaag-pagination__links + .denhaag-pagination__link {
+  margin-inline-start: var(--denhaag-pagination-margin-inline, 10px);
+}
+
+.denhaag-pagination__link:not(:first-child):not(:last-child):not(.denhaag-pagination__link--current):not([rel]) {
+  overflow: hidden;
+  pointer-events: none;
+  text-indent: calc(var(--denhaag-pagination-size) * 2);
+}
+
+.denhaag-pagination__link:not(:first-child):not(:last-child):not(.denhaag-pagination__link--current):not([rel])::before {
+  content: "...";
+  left: calc(50% - 7px);
+  line-height: 0;
+  position: absolute;
+  text-indent: 0;
+  vertical-align: baseline;
+}
+
+.denhaag-pagination__link--current {
+  --denhaag-pagination-color: var(--denhaag-pagination-link-current-color);
+  --denhaag-pagination-font-weight: var(
+    --denhaag-pagination-link-current-font-weight
+  );
+}
+
+.denhaag-pagination__link--current.denhaag-pagination__link:disabled,
+.denhaag-pagination__link--current.denhaag-pagination__link--disabled {
+  --denhaag-pagination-color: var(
+    --denhaag-pagination-link-current-disabled-color
+  );
+  --denhaag-pagination-background-color: var(
+    --denhaag-pagination-link-current-disabled-background-color
+  );
+}
+
+.denhaag-pagination .denhaag-icon {
+  font-size: inherit;
+}

package/src/components/denhaag-wrappers/pagination/Pagination.tsx

@@ -1,112 +1,112 @@
-import clsx from "clsx";
-import * as React from "react";
-import "./Pagination.css";
-
-interface PaginationProps {
-  pages: number;
-  currentPage: number;
-  setPage: (page: number) => any;
-}
-
-export const Pagination: React.FC<PaginationProps> = ({ pages, currentPage, setPage }) => {
-  return (
-    <nav className="denhaag-pagination">
-      <PreviousButton previousPage={currentPage > 1 ? currentPage - 1 : undefined} {...{ setPage }} />
-
-      <span className="denhaag-pagination__links" role="group">
-        {Array.from({ length: pages }, (_, i) => i + 1).map((page, idx) => (
-          <Link key={idx} {...{ page }} current={page === currentPage} {...{ setPage }} />
-        ))}
-      </span>
-
-      <NextButton nextPage={currentPage < pages ? currentPage + 1 : undefined} {...{ setPage }} />
-    </nav>
-  );
-};
-
-interface LinkProps {
-  page: number;
-  setPage: (page: number) => any;
-  current?: boolean;
-}
-
-const Link: React.FC<LinkProps> = ({ page, current, setPage }) => {
-  return (
-    <a
-      aria-current={current && "page"}
-      aria-label={`Page ${page}`}
-      className={clsx("denhaag-pagination__link", current && "denhaag-pagination__link--current")}
-      onClick={() => setPage(page)}
-    >
-      {page}
-    </a>
-  );
-};
-
-interface PreviousButtonProps {
-  setPage: (page: number) => any;
-  previousPage?: number;
-}
-
-const PreviousButton: React.FC<PreviousButtonProps> = ({ previousPage, setPage }) => {
-  return (
-    <a
-      aria-label="Previous page"
-      className={clsx(
-        "denhaag-pagination__link denhaag-pagination__link--arrow",
-        !previousPage && "denhaag-pagination__link--disabled",
-      )}
-      onClick={() => previousPage && setPage(previousPage)}
-      rel="prev"
-    >
-      <svg
-        aria-hidden="true"
-        className="denhaag-icon"
-        fill="none"
-        height="1em"
-        viewBox="0 0 7 12"
-        width="1em"
-        xmlns="http://www.w3.org/2000/svg"
-      >
-        <path
-          d="M4.9921 10.8143C5.36382 11.1914 5.97222 11.1914 6.34393 10.8143C6.7079 10.4451 6.70822 9.8521 6.34466 9.48248L3.36315 6.45123C2.98039 6.06209 2.98039 5.43791 3.36315 5.04877L6.34466 2.01752C6.70822 1.6479 6.7079 1.05492 6.34394 0.685696C5.97222 0.308599 5.36382 0.308599 4.9921 0.685695L0.692003 5.04799C0.308224 5.43732 0.308224 6.06268 0.692003 6.45201L4.9921 10.8143Z"
-          fill="currentColor"
-        />
-      </svg>
-    </a>
-  );
-};
-
-interface NextButtonProps {
-  setPage: (page: number) => any;
-  nextPage?: number;
-}
-
-const NextButton: React.FC<NextButtonProps> = ({ nextPage, setPage }) => {
-  return (
-    <a
-      aria-label="Next page"
-      className={clsx(
-        "denhaag-pagination__link denhaag-pagination__link--arrow",
-        !nextPage && "denhaag-pagination__link--disabled",
-      )}
-      onClick={() => nextPage && setPage(nextPage)}
-      rel="next"
-    >
-      <svg
-        aria-hidden="true"
-        className="denhaag-icon"
-        fill="none"
-        height="1em"
-        viewBox="0 0 7 12"
-        width="1em"
-        xmlns="http://www.w3.org/2000/svg"
-      >
-        <path
-          d="M2.0079 1.1857C1.63618 0.8086 1.02778 0.8086 0.656065 1.18569V1.18569C0.292103 1.55492 0.291779 2.1479 0.655339 2.51752L3.63685 5.54877C4.01961 5.93791 4.01961 6.56209 3.63686 6.95123L0.655339 9.98248C0.291779 10.3521 0.292102 10.9451 0.656065 11.3143V11.3143C1.02778 11.6914 1.63618 11.6914 2.0079 11.3143L6.308 6.95201C6.69178 6.56268 6.69178 5.93732 6.308 5.54799L2.0079 1.1857Z"
-          fill="currentColor"
-        />
-      </svg>
-    </a>
-  );
-};
+import clsx from "clsx";
+import * as React from "react";
+import "./Pagination.css";
+
+interface PaginationProps {
+  pages: number;
+  currentPage: number;
+  setPage: (page: number) => any;
+}
+
+export const Pagination: React.FC<PaginationProps> = ({ pages, currentPage, setPage }) => {
+  return (
+    <nav className="denhaag-pagination">
+      <PreviousButton previousPage={currentPage > 1 ? currentPage - 1 : undefined} {...{ setPage }} />
+
+      <span className="denhaag-pagination__links" role="group">
+        {Array.from({ length: pages }, (_, i) => i + 1).map((page, idx) => (
+          <Link key={idx} {...{ page }} current={page === currentPage} {...{ setPage }} />
+        ))}
+      </span>
+
+      <NextButton nextPage={currentPage < pages ? currentPage + 1 : undefined} {...{ setPage }} />
+    </nav>
+  );
+};
+
+interface LinkProps {
+  page: number;
+  setPage: (page: number) => any;
+  current?: boolean;
+}
+
+const Link: React.FC<LinkProps> = ({ page, current, setPage }) => {
+  return (
+    <a
+      aria-current={current && "page"}
+      aria-label={`Page ${page}`}
+      className={clsx("denhaag-pagination__link", current && "denhaag-pagination__link--current")}
+      onClick={() => setPage(page)}
+    >
+      {page}
+    </a>
+  );
+};
+
+interface PreviousButtonProps {
+  setPage: (page: number) => any;
+  previousPage?: number;
+}
+
+const PreviousButton: React.FC<PreviousButtonProps> = ({ previousPage, setPage }) => {
+  return (
+    <a
+      aria-label="Previous page"
+      className={clsx(
+        "denhaag-pagination__link denhaag-pagination__link--arrow",
+        !previousPage && "denhaag-pagination__link--disabled",
+      )}
+      onClick={() => previousPage && setPage(previousPage)}
+      rel="prev"
+    >
+      <svg
+        aria-hidden="true"
+        className="denhaag-icon"
+        fill="none"
+        height="1em"
+        viewBox="0 0 7 12"
+        width="1em"
+        xmlns="http://www.w3.org/2000/svg"
+      >
+        <path
+          d="M4.9921 10.8143C5.36382 11.1914 5.97222 11.1914 6.34393 10.8143C6.7079 10.4451 6.70822 9.8521 6.34466 9.48248L3.36315 6.45123C2.98039 6.06209 2.98039 5.43791 3.36315 5.04877L6.34466 2.01752C6.70822 1.6479 6.7079 1.05492 6.34394 0.685696C5.97222 0.308599 5.36382 0.308599 4.9921 0.685695L0.692003 5.04799C0.308224 5.43732 0.308224 6.06268 0.692003 6.45201L4.9921 10.8143Z"
+          fill="currentColor"
+        />
+      </svg>
+    </a>
+  );
+};
+
+interface NextButtonProps {
+  setPage: (page: number) => any;
+  nextPage?: number;
+}
+
+const NextButton: React.FC<NextButtonProps> = ({ nextPage, setPage }) => {
+  return (
+    <a
+      aria-label="Next page"
+      className={clsx(
+        "denhaag-pagination__link denhaag-pagination__link--arrow",
+        !nextPage && "denhaag-pagination__link--disabled",
+      )}
+      onClick={() => nextPage && setPage(nextPage)}
+      rel="next"
+    >
+      <svg
+        aria-hidden="true"
+        className="denhaag-icon"
+        fill="none"
+        height="1em"
+        viewBox="0 0 7 12"
+        width="1em"
+        xmlns="http://www.w3.org/2000/svg"
+      >
+        <path
+          d="M2.0079 1.1857C1.63618 0.8086 1.02778 0.8086 0.656065 1.18569V1.18569C0.292103 1.55492 0.291779 2.1479 0.655339 2.51752L3.63685 5.54877C4.01961 5.93791 4.01961 6.56209 3.63686 6.95123L0.655339 9.98248C0.291779 10.3521 0.292102 10.9451 0.656065 11.3143V11.3143C1.02778 11.6914 1.63618 11.6914 2.0079 11.3143L6.308 6.95201C6.69178 6.56268 6.69178 5.93732 6.308 5.54799L2.0079 1.1857Z"
+          fill="currentColor"
+        />
+      </svg>
+    </a>
+  );
+};