@conduction/components 1.0.2

package/.prettierrc

@@ -0,0 +1,29 @@
+{
+  "overrides": [
+    {
+      "files": ["*.json"],
+      "options": {
+        "parser": "json",
+        "printWidth": 120,
+        "tabWidth": 2
+      }
+    },
+    {
+      "files": ["*.ts", "*.tsx"],
+      "options": {
+        "parser": "typescript",
+        "printWidth": 120,
+        "trailingComma": "all",
+        "tabWidth": 2,
+        "singleQuote": false
+      }
+    },
+    {
+      "files": ["*.css", "*.scss"],
+      "options": {
+        "parser": "css",
+        "tabWidth": 2
+      }
+    }
+  ]
+}

package/README.md

@@ -0,0 +1 @@
+# Conduction Components

package/lib/components/card/HorizontalImageCard/HorizontalImageCard.d.ts

@@ -0,0 +1,13 @@
+import * as React from "react";
+interface HorizontalImageCardProps {
+    iconOrImage: JSX.Element;
+    title: string;
+    link: {
+        label: string;
+        href: string;
+    };
+    layoutClassName?: string;
+    external?: boolean;
+}
+export declare const HorizontalImageCard: React.FC<HorizontalImageCardProps>;
+export {};

package/lib/components/card/HorizontalImageCard/HorizontalImageCard.js

@@ -0,0 +1,9 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import * as styles from "./HorizontalImageCard.module.css";
+import clsx from "clsx";
+import { Link } from "@gemeente-denhaag/components-react";
+import { navigate } from "gatsby";
+import { ExternalLinkIcon, ArrowRightIcon } from "@gemeente-denhaag/icons";
+export const HorizontalImageCard = ({ title, layoutClassName, external, link, iconOrImage, }) => {
+    return (_jsxs("div", { className: clsx(styles.container, [layoutClassName && layoutClassName]), onClick: () => navigate(link.href), children: [_jsx("div", { className: styles.imageOrIconContainer, children: iconOrImage }), _jsxs("div", { className: styles.link, children: [_jsx("div", { className: styles.title, children: title }), _jsx(Link, { icon: external ? _jsx(ExternalLinkIcon, {}) : _jsx(ArrowRightIcon, {}), iconAlign: "start", children: link.label })] })] }));
+};

package/lib/components/card/HorizontalImageCard/HorizontalImageCard.module.css

@@ -0,0 +1,26 @@
+.container {
+  display: flex;
+  align-items: center;
+  cursor: pointer;
+  background-color: var(--denhaag-color-grey-1);
+  border-radius: var(--nlportal-border-radius);
+}
+
+.link {
+  display: flex;
+  flex-direction: column;
+}
+
+.imageOrIconContainer > :first-child {
+  width: var(--conduction-horizontal-image-card-icon-size);
+  height: var(--conduction-horizontal-image-card-icon-size);
+
+  padding-inline-start: var(--nlportal-space-inline-md);
+  padding-inline-end: var(--nlportal-space-inline-md);
+  padding-block-start: var(--nlportal-space-block-md);
+  padding-block-end: var(--nlportal-space-block-md);
+}
+
+.title {
+  font-size: var(--conduction-horizontal-image-card-font-size);
+}

package/lib/components/card/RichContentCard/RichContentCard.d.ts

@@ -0,0 +1,19 @@
+import * as React from "react";
+export interface RichContentCardProps {
+    link: {
+        label: string;
+        href: string;
+    };
+    labelsWithIcon: {
+        label: string;
+        icon: JSX.Element;
+    }[];
+    tags: string[];
+    contentLinks?: {
+        title: string;
+        subTitle: string;
+        href: string;
+    }[];
+    linkIsExternal?: boolean;
+}
+export declare const RichContentCard: React.FC<RichContentCardProps>;

package/lib/components/card/RichContentCard/RichContentCard.js

@@ -0,0 +1,17 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Divider, Link } from "@gemeente-denhaag/components-react";
+import { navigate } from "gatsby";
+import * as styles from "./RichContentCard.module.css";
+import { ExternalLinkIcon, ArrowRightIcon } from "@gemeente-denhaag/icons";
+export const RichContentCard = ({ link, labelsWithIcon, tags, contentLinks, linkIsExternal, }) => {
+    return (_jsxs("div", { className: styles.container, children: [_jsx("div", { className: styles.link, onClick: () => navigate(link.href), children: _jsx(Link, { icon: linkIsExternal ? _jsx(ExternalLinkIcon, {}) : _jsx(ArrowRightIcon, {}), iconAlign: "start", children: link.label }) }), _jsx("div", { className: styles.labelsWithIcon, children: labelsWithIcon.map(({ label, icon }) => (_jsx(LabelWithIcon, { ...{ label, icon } }))) }), _jsx("div", { className: styles.tags, children: tags.map((tag) => (_jsx(Tag, { ...{ tag } }))) }), contentLinks && (_jsxs("div", { className: styles.contentLinks, children: [_jsx(Divider, {}), contentLinks.map(({ title, subTitle, href }) => (_jsx(ContentLink, { ...{ title, subTitle, href } })))] }))] }));
+};
+const LabelWithIcon = ({ label, icon }) => {
+    return (_jsxs("div", { className: styles.labelWithIcon, children: [_jsx("span", { className: styles.labelWithIcon_icon, children: icon }), _jsx("span", { className: styles.labelWithIcon_label, children: label })] }));
+};
+const Tag = ({ tag }) => {
+    return _jsx("span", { className: styles.tag, children: tag });
+};
+const ContentLink = ({ title, subTitle, href }) => {
+    return (_jsxs(Link, { className: styles.contentLink, children: [_jsxs("div", { className: styles.contentLink_content, children: [_jsx("span", { className: styles.contentLink_title, children: title }), _jsx("span", { className: styles.contentLink_subTitle, children: subTitle })] }), _jsx("div", { children: _jsx(ArrowRightIcon, {}) })] }));
+};

package/lib/components/card/RichContentCard/RichContentCard.module.css

@@ -0,0 +1,100 @@
+.container {
+  display: flex;
+  flex-direction: column;
+  border: var(--nlportal-document-border, 1px solid);
+  border-radius: var(--nlportal-border-radius);
+
+  padding-inline-start: var(--nlportal-space-inline-md);
+  padding-inline-end: var(--nlportal-space-inline-md);
+  padding-block-start: var(--nlportal-space-block-md);
+  padding-block-end: var(--nlportal-space-block-xl);
+}
+
+.container > *:not(.link):not(:last-child) {
+  margin-block-end: var(--nlportal-space-block-md);
+}
+
+.link {
+  margin-block-end: var(--nlportal-space-block-xs);
+}
+
+.link > :first-child {
+  display: flex;
+}
+
+.labelsWithIcon {
+  display: flex;
+  flex-wrap: wrap;
+}
+
+.labelsWithIcon > *:not(:last-child) {
+  margin-inline-end: var(--nlportal-space-block-md);
+}
+
+.tags > *:not(:last-child) {
+  margin-inline-end: var(--nlportal-space-inline-md);
+}
+
+.contentLinks > *:not(:last-child):not(hr) {
+  margin-block-end: var(--nlportal-space-block-xs);
+}
+
+/* Component: LabelWithIcon */
+.labelWithIcon {
+  display: flex;
+  align-items: center;
+  color: var(--denhaag-color-grey-3);
+}
+
+.labelWithIcon > .labelWithIcon_icon > svg {
+  height: var(--conduction-rich-card-label-with-icon-icon-size);
+  width: var(--conduction-rich-card-label-with-icon-icon-size);
+  margin-inline-end: var(--nlportal-space-inline-xs);
+}
+
+.labelWithIcon > .labelWithIcon_label {
+  font-size: var(--conduction-rich-card-label-with-icon-label-size);
+}
+
+/* Component: Tag */
+.tag {
+  font-size: var(--conduction-tag-font-size);
+  background-color: var(--denhaag-color-grey-1);
+  border-radius: var(--nlportal-document-border-radius);
+  padding-inline-start: var(--nlportal-space-inline-xs);
+  padding-inline-end: var(--nlportal-space-inline-xs);
+  padding-block-start: var(--nlportal-space-block-xs);
+  padding-block-end: var(--nlportal-space-block-xs);
+}
+
+/* Content Link */
+.contentLink {
+  display: flex;
+  padding-block-start: var(--nlportal-space-block-xs);
+  padding-block-end: var(--nlportal-space-block-xs);
+  text-decoration: none !important;
+}
+
+.contentLink > span {
+  width: 100%;
+  display: flex;
+  justify-content: space-between;
+}
+
+.contentLink:hover {
+  cursor: pointer;
+}
+
+.contentLink_content {
+  display: flex;
+  flex-direction: column;
+}
+
+.contentLink_title {
+  font-size: var(--conduction-content-link-font-size);
+}
+
+.contentLink_subTitle {
+  font-size: var(--conduction-content-link-font-size);
+  color: var(--denhaag-color-grey-3);
+}

package/lib/components/card/downloadCard/DownloadCard.d.ts

@@ -0,0 +1,9 @@
+import * as React from "react";
+interface DownloadCardProps {
+    icon: JSX.Element;
+    label: string;
+    sizeKb: string;
+    layoutClassName?: string;
+}
+export declare const DownloadCard: React.FC<DownloadCardProps>;
+export {};

package/lib/components/card/downloadCard/DownloadCard.js

@@ -0,0 +1,10 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import * as styles from "./DownloadCard.module.css";
+import { DownloadIcon } from "@gemeente-denhaag/icons";
+import { Link } from "@gemeente-denhaag/components-react";
+import clsx from "clsx";
+import { useTranslation } from "react-i18next";
+export const DownloadCard = ({ icon, label, sizeKb, layoutClassName }) => {
+    const { t } = useTranslation();
+    return (_jsxs("div", { className: clsx(styles.container, [layoutClassName && layoutClassName]), children: [_jsxs("div", { className: styles.content, children: [_jsx("div", { className: styles.icon, children: icon }), _jsxs("div", { children: [label, " (", sizeKb, "kb)"] })] }), _jsx(Link, { icon: _jsx(DownloadIcon, {}), iconAlign: "start", children: t("Download") })] }));
+};

package/lib/components/card/downloadCard/DownloadCard.module.css

@@ -0,0 +1,23 @@
+.container {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  border: var(--nlportal-document-border, 1px solid);
+  border-radius: var(--nlportal-document-border-radius);
+  padding-inline-end: var(--nlportal-space-inline-md);
+}
+
+.content {
+  display: flex;
+  align-items: center;
+}
+
+.content > *:not(:last-child) {
+  margin-inline-end: var(--nlportal-space-inline-md);
+}
+
+.icon {
+  padding-inline: var(--nlportal-space-inline-md);
+  padding-block: var(--nlportal-space-block-md);
+  background-color: var(--nlportal-document-icon-background-color);
+}

package/lib/components/card/imageAndDetailsCard/ImageAndDetailsCard.d.ts

@@ -0,0 +1,14 @@
+import * as React from "react";
+interface ImageAndDetailsCardProps {
+    title: string;
+    image: JSX.Element;
+    introduction: string;
+    link: {
+        href: string;
+        label: string;
+    };
+    subHeader?: string;
+    layoutClassName?: string;
+}
+export declare const ImageAndDetailsCard: React.FC<ImageAndDetailsCardProps>;
+export {};

package/lib/components/card/imageAndDetailsCard/ImageAndDetailsCard.js

@@ -0,0 +1,9 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import * as styles from "./ImageAndDetailsCard.module.css";
+import clsx from "clsx";
+import { Link } from "@gemeente-denhaag/components-react";
+import { navigate } from "gatsby";
+import { ArrowRightIcon } from "@gemeente-denhaag/icons";
+export const ImageAndDetailsCard = ({ image, title, subHeader, introduction, link, layoutClassName, }) => {
+    return (_jsxs("div", { className: clsx(styles.container, [layoutClassName && layoutClassName]), onClick: () => navigate(link.href), children: [_jsx("div", { className: styles.image, children: image }), _jsxs("div", { className: styles.content, children: [_jsxs("div", { children: [_jsx("div", { className: styles.title, children: title }), _jsx("span", { className: styles.subHeader, children: subHeader })] }), _jsx("div", { className: styles.introduction, children: introduction }), _jsx("div", { className: styles.link, children: _jsx(Link, { icon: _jsx(ArrowRightIcon, {}), iconAlign: "start", children: link.label }) })] })] }));
+};

package/lib/components/card/imageAndDetailsCard/ImageAndDetailsCard.module.css

@@ -0,0 +1,54 @@
+.container {
+  cursor: pointer;
+  overflow: hidden;
+  border-radius: var(--nlportal-document-border-radius);
+}
+
+.image {
+  height: var(--conduction-image-and-details-card-image-height);
+}
+
+.image > :first-child {
+  width: 100%;
+  height: 100%;
+  object-fit: cover;
+}
+
+.content {
+  display: flex;
+  flex-direction: column;
+  padding-inline-start: var(--nlportal-space-inline-lg);
+  padding-inline-end: var(--nlportal-space-inline-lg);
+  padding-block-start: var(--nlportal-space-block-lg);
+  padding-block-end: var(--nlportal-space-block-lg);
+  border: var(--nlportal-document-border, 1px solid);
+}
+
+.content > *:not(:last-child) {
+  margin-block-end: var(--nlportal-space-block-md);
+}
+
+.title {
+  font-size: var(--denhaag-typography-scale-xl-font-size);
+  font-weight: var(--conduction-image-and-details-card-title-font-weight);
+}
+
+.subHeader {
+  color: var(--denhaag-color-grey-3);
+  font-size: var(--denhaag-typography-scale-s-font-size);
+}
+
+.introduction {
+  overflow: hidden;
+  text-overflow: ellipsis;
+  display: -webkit-box;
+  -webkit-line-clamp: var(
+    --conduction-image-and-details-card-introduction-lines-clamp
+  );
+  -webkit-box-orient: vertical;
+}
+
+.link {
+  display: flex;
+  justify-content: flex-end;
+}

package/lib/components/card/index.d.ts

@@ -0,0 +1,5 @@
+import { DownloadCard } from "./downloadCard/DownloadCard";
+import { HorizontalImageCard } from "./HorizontalImageCard/HorizontalImageCard";
+import { ImageAndDetailsCard } from "./imageAndDetailsCard/ImageAndDetailsCard";
+import { RichContentCard } from "./RichContentCard/RichContentCard";
+export { DownloadCard, HorizontalImageCard, ImageAndDetailsCard, RichContentCard };

package/lib/components/card/index.js

@@ -0,0 +1,5 @@
+import { DownloadCard } from "./downloadCard/DownloadCard";
+import { HorizontalImageCard } from "./HorizontalImageCard/HorizontalImageCard";
+import { ImageAndDetailsCard } from "./imageAndDetailsCard/ImageAndDetailsCard";
+import { RichContentCard } from "./RichContentCard/RichContentCard";
+export { DownloadCard, HorizontalImageCard, ImageAndDetailsCard, RichContentCard };

package/lib/components/casesTable/CasesTable.d.ts

@@ -0,0 +1,6 @@
+import * as React from "react";
+interface CasesTableProps {
+    cases: any[];
+}
+export declare const CasesTable: React.FC<CasesTableProps>;
+export {};

package/lib/components/casesTable/CasesTable.js

@@ -0,0 +1,11 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import * as styles from "./CasesTable.module.css";
+import { Link } from "@gemeente-denhaag/components-react";
+import { Table, TableBody, TableCell, TableHeader, TableRow } from "@gemeente-denhaag/table";
+import { useTranslation } from "react-i18next";
+import { ArrowRightIcon } from "@gemeente-denhaag/icons";
+import { navigate } from "gatsby";
+export const CasesTable = ({ cases }) => {
+    const { t } = useTranslation();
+    return (_jsx(Table, { children: _jsxs(TableBody, { children: [_jsxs(TableRow, { children: [_jsx(TableHeader, { children: t("Title") }), _jsx(TableHeader, { children: t("Status") }), _jsx(TableHeader, { children: t("Date") }), _jsx(TableHeader, {})] }), cases.map((_case) => (_jsxs(TableRow, { className: styles.contentRow, children: [_jsx(TableCell, { children: _case.omschrijving }), _jsx(TableCell, { children: _case.status }), _jsx(TableCell, { children: _case.startdatum }), _jsx(TableCell, { onClick: () => navigate(`/my-cases/${_case.id}`), children: _jsx(Link, { icon: _jsx(ArrowRightIcon, {}), iconAlign: "start", children: t("View case") }) })] }, _case.id)))] }) }));
+};

package/lib/components/casesTable/CasesTable.module.css

@@ -0,0 +1,4 @@
+.contentRow > :last-child {
+  display: flex;
+  justify-content: flex-end;
+}

package/lib/components/container/Container.d.ts

@@ -0,0 +1,2 @@
+import * as React from "react";
+export declare const Container: React.FC;

package/lib/components/container/Container.js

@@ -0,0 +1,3 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import * as styles from "./Container.module.css";
+export const Container = ({ children }) => _jsx("div", { className: styles.container, children: children });

package/lib/components/container/Container.module.css

@@ -0,0 +1,5 @@
+.container {
+  width: 100%;
+  margin-inline: auto;
+  max-width: var(--nlportal-max-page-width);
+}

package/lib/components/denhaag-wrappers/breadcrumbs/Breadcrumbs.css

@@ -0,0 +1,222 @@
+.denhaag-breadcrumb {
+  --denhaag-breadcrumb-chevron-display: none;
+  --denhaag-breadcrumb-link-background-color: transparent;
+  --denhaag-breadcrumb-link-icon-content: "";
+  --denhaag-breadcrumb-link-pointer-events: bounding-box;
+  --denhaag-breadcrumb-item-display: none;
+
+  background-color: var(--denhaag-breadcrumb-background-color, transparent);
+  color: var(--denhaag-breadcrumb-color, inherit);
+  padding-block-end: var(--denhaag-breadcrumb-padding-block);
+  padding-block-start: var(--denhaag-breadcrumb-padding-block);
+  padding-inline-end: var(--denhaag-breadcrumb-padding-inline);
+  padding-inline-start: var(--denhaag-breadcrumb-padding-inline);
+}
+
+.denhaag-breadcrumb__list {
+  block-size: 100%;
+  display: flex;
+  margin-block-end: 0;
+  margin-block-start: 0;
+  margin-inline-end: auto;
+  margin-inline-start: auto;
+  max-width: var(--denhaag-breadcrumb-list-max-width, 100%);
+}
+
+ol.denhaag-breadcrumb__list {
+  list-style: none;
+  padding-inline-start: 0;
+}
+
+.denhaag-breadcrumb__item {
+  align-items: center;
+  display: var(--denhaag-breadcrumb-item-display);
+}
+
+.denhaag-breadcrumb__item:nth-last-child(2) {
+  --denhaag-breadcrumb-item-display: flex;
+}
+
+.denhaag-breadcrumb__item:nth-last-child(2)
+  > .denhaag-breadcrumb__link::before {
+  background: var(--denhaag-breadcrumb-link-color);
+  clip-path: path(
+    "M6.756 12.0899C6.43057 12.4153 5.90293 12.4153 5.57749 12.0899L0.577491 7.0899C0.421212 6.93362 0.333414 6.72166 0.333414 6.50065C0.333414 6.27964 0.421212 6.06767 0.577491 5.91139L5.57749 0.911394C5.90293 0.585957 6.43057 0.585957 6.756 0.911394C7.08144 1.23683 7.08144 1.76447 6.756 2.08991L3.17859 5.66732L12.8334 5.66732C13.2937 5.66732 13.6667 6.04041 13.6667 6.50065C13.6667 6.96089 13.2937 7.33398 12.8334 7.33398L3.17859 7.33398L6.756 10.9114C7.08144 11.2368 7.08144 11.7645 6.756 12.0899Z"
+  );
+  content: var(--denhaag-breadcrumb-link-icon-content);
+  height: var(
+    --denhaag-breadcrumb-link-icon-height,
+    var(--denhaag-breadcrumb-link-icon-width)
+  );
+  margin-inline-end: var(
+    --denhaag-breadcrumb-link-icon-margin-inline,
+    var(--denhaag-breadcrumb-link-icon-width)
+  );
+  width: var(--denhaag-breadcrumb-link-icon-width);
+}
+
+.denhaag-breadcrumb__item:not(:first-child):not(:nth-last-child(2)):not(:last-child) {
+  --denhaag-breadcrumb-link-background-color: var(
+    --denhaag-breadcrumb-dots-background-color,
+    inherit
+  );
+}
+
+.denhaag-breadcrumb__item:not(:first-child):not(:nth-last-child(2)):not(:last-child):hover {
+  --denhaag-breadcrumb-link-background-color: var(
+    --denhaag-breadcrumb-dots-hover-background-color,
+    inherit
+  );
+}
+
+.denhaag-breadcrumb__link {
+  align-items: center;
+  color: var(--denhaag-breadcrumb-link-color, inherit);
+  display: flex;
+  padding-block-start: var(--denhaag-breadcrumb-spacing, 8px);
+  padding-block-end: var(--denhaag-breadcrumb-spacing, 8px);
+  padding-inline-start: var(--denhaag-breadcrumb-spacing, 8px);
+  padding-inline-end: var(--denhaag-breadcrumb-spacing, 8px);
+  pointer-events: var(--denhaag-breadcrumb-link-pointer-events);
+  position: relative;
+}
+
+.denhaag-breadcrumb__link:hover,
+.denhaag-breadcrumb__link--hover {
+  --denhaag-breadcrumb-link-color: var(
+    --denhaag-breadcrumb-link-hover-color,
+    inherit
+  );
+}
+
+.denhaag-breadcrumb__link:focus,
+.denhaag-breadcrumb__link--focus {
+  --denhaag-breadcrumb-link-color: var(
+    --denhaag-breadcrumb-link-focus-color,
+    inherit
+  );
+
+  outline: var(
+    --denhaag-breadcrumb-link-focus-outline,
+    var(--denhaag-link-focus-outline)
+  );
+}
+
+.denhaag-breadcrumb__link--current,
+.denhaag-breadcrumb__link.denhaag-link--current,
+.denhaag-breadcrumb__item:last-child > .denhaag-breadcrumb__link {
+  --denhaag-breadcrumb-link-color: var(
+    --denhaag-breadcrumb-current-color,
+    var(--denhaag-breadcrumb-color, inherit)
+  );
+
+  text-decoration: none;
+}
+
+.denhaag-breadcrumb__link:not(.denhaag-breadcrumb__link--current):not(.denhaag-breadcrumb__link.denhaag-link--current):not(:last-child
+    > .denhaag-breadcrumb__link)
+  > :first-child {
+  pointer-events: bounding-box;
+}
+
+/* SVG for the separator */
+.denhaag-breadcrumb__link > .denhaag-icon + .denhaag-icon,
+.denhaag-breadcrumb__link > .denhaag-breadcrumb__text + .denhaag-icon {
+  color: initial;
+  font-size: inherit;
+  display: var(--denhaag-breadcrumb-chevron-display);
+  margin-inline-start: var(--denhaag-breadcrumb-spacing, 8px);
+  margin-inline-end: calc(-1 * var(--denhaag-breadcrumb-spacing, 8px));
+}
+
+[dir="rtl"]
+  .denhaag-breadcrumb__link
+  > .denhaag-breadcrumb__text
+  + .denhaag-icon,
+[dir="rtl"]
+  .denhaag-breadcrumb__item:nth-last-child(2)
+  > .denhaag-breadcrumb__link::before {
+  transform: scaleX(-1);
+}
+
+.denhaag-breadcrumb__text {
+  background-color: var(--denhaag-breadcrumb-link-background-color);
+  overflow: hidden;
+  position: relative;
+  text-overflow: ellipsis;
+}
+
+.denhaag-breadcrumb__item:not(:first-child):not(:nth-last-child(2)):not(:last-child)
+  .denhaag-breadcrumb__text {
+  aspect-ratio: 24/16;
+  border-radius: var(
+    --denhaag-breadcrumb-dots-border-radius,
+    var(--denhaag-border-radius)
+  );
+  max-width: calc(var(--denhaag-breadcrumb-spacing, 8px) * 3);
+  text-indent: calc(var(--denhaag-breadcrumb-spacing, 8px) * 3);
+}
+
+.denhaag-breadcrumb__item:not(:first-child):not(:nth-last-child(2)):not(:last-child)
+  .denhaag-breadcrumb__text::before {
+  color: var(--denhaag-breadcrumb-dots-color, inherit);
+  content: "...";
+  left: calc(50% - 7px);
+  line-height: 0;
+  position: absolute;
+  text-indent: 0;
+  top: calc(50% - 5px);
+  vertical-align: baseline;
+}
+
+@media (min-width: 481px) {
+  .denhaag-breadcrumb {
+    --denhaag-breadcrumb-chevron-display: inline-block;
+    --denhaag-breadcrumb-link-icon-content: unset;
+    --denhaag-breadcrumb-link-pointer-events: none;
+    --denhaag-breadcrumb-padding-block: var(
+      --denhaag-breadcrumb-padding-block-md
+    );
+  }
+
+  .denhaag-breadcrumb__item:not(:nth-last-child(2)) {
+    --denhaag-breadcrumb-item-display: flex;
+  }
+}
+
+@media (min-width: 1124px) {
+  .denhaag-breadcrumb {
+    --denhaag-breadcrumb-padding-inline: 0;
+  }
+}
+
+:root {
+  --denhaag-breadcrumb-link-hover-color: var(--denhaag-color-blue-4);
+  --denhaag-breadcrumb-link-focus-color: var(--denhaag-color-blue-4);
+  --denhaag-breadcrumb-link-color: var(--denhaag-color-blue-3);
+  --denhaag-breadcrumb-dots-hover-background-color: var(--denhaag-color-grey-2);
+  --denhaag-breadcrumb-dots-color: var(--denhaag-color-grey-3);
+  --denhaag-breadcrumb-dots-border-radius: var(--denhaag-border-radius);
+  --denhaag-breadcrumb-dots-background-color: var(--denhaag-color-grey-1);
+  --denhaag-breadcrumb-current-color: var(--denhaag-color-grey-4);
+  --denhaag-breadcrumb-spacing: var(--denhaag-space-inline-xs);
+  --denhaag-breadcrumb-color: var(--denhaag-color-grey-4);
+  --denhaag-breadcrumb-background-color: var(--denhaag-color-warmgrey-1);
+  --denhaag-breadcrumb-link-focus-outline: var(--denhaag-focus-border);
+  --utrecht-breadcrumb-item-padding-inline-start: 14px;
+  --utrecht-breadcrumb-item-padding-inline-end: 14px;
+  --utrecht-breadcrumb-divider-inline-size: 24px;
+  --utrecht-breadcrumb-divider-content: ›;
+  --denhaag-breadcrumb-list-max-width: 67.5rem;
+  --denhaag-breadcrumb-link-icon-margin-inline: 0.75rem;
+  --denhaag-breadcrumb-link-icon-width: 0.875rem;
+  --denhaag-breadcrumb-link-icon-height: 0.875rem;
+  --denhaag-breadcrumb-padding-inline: 0.75rem;
+  --denhaag-breadcrumb-padding-block-md: 0.75rem;
+  --denhaag-breadcrumb-padding-block: 1rem;
+  --utrecht-breadcrumb-link-focus-color: var(--denhaag-color-blue-3);
+  --utrecht-breadcrumb-link-color: var(--denhaag-color-blue-4);
+  --utrecht-breadcrumb-font-size: var(
+    --denhaag-typography-scale-base-font-size
+  );
+}

package/lib/components/denhaag-wrappers/breadcrumbs/Breadcrumbs.d.ts

@@ -0,0 +1,17 @@
+/**
+ * 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 * as React from "react";
+import "./Breadcrumbs.css";
+interface BreadcrumbsProps {
+    crumbs: {
+        pathname: string;
+        crumbLabel: string;
+    }[];
+}
+export declare const Breadcrumbs: React.FC<BreadcrumbsProps>;
+export {};