@conduction/components 2.1.31 → 2.1.33

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

@@ -1,84 +1,84 @@
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-/**
- * 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 "./Breadcrumbs.css";
-export const Breadcrumbs = ({ crumbs }) => {
-  return _jsx("nav", {
-    "aria-label": "Breadcrumb",
-    className: "denhaag-breadcrumb",
-    children: _jsx("ol", {
-      className: "denhaag-breadcrumb__list",
-      itemScope: true,
-      itemType: "https://schema.org/BreadcrumbList",
-      children: crumbs.map((crumb, idx) => {
-        if (crumbs.length !== idx + 1) {
-          return _jsx(CrumbItem, { ...crumb, ...{ idx } }, idx);
-        }
-        return _jsx(LastCrumbItem, { ...crumb, ...{ idx } }, idx);
-      }),
-    }),
-  });
-};
-const CrumbItem = ({ pathname, crumbLabel, idx }) =>
-  _jsx("li", {
-    className: "denhaag-breadcrumb__item",
-    itemProp: "itemListElement",
-    itemScope: true,
-    itemType: "https://schema.org/ListItem",
-    children: _jsxs(Link, {
-      className: "denhaag-breadcrumb__link",
-      to: pathname,
-      itemProp: "item",
-      children: [
-        _jsx("span", {
-          className: "denhaag-breadcrumb__text",
-          itemProp: "name",
-          children: crumbLabel,
-        }),
-        _jsx("svg", {
-          "aria-hidden": "true",
-          className: "denhaag-icon",
-          fill: "none",
-          focusable: "false",
-          height: "1em",
-          shapeRendering: "auto",
-          viewBox: "0 0 24 24",
-          width: "1em",
-          xmlns: "http://www.w3.org/2000/svg",
-          children: _jsx("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",
-          }),
-        }),
-        _jsx("meta", { content: idx.toString(), itemProp: "position" }),
-      ],
-    }),
-  });
-const LastCrumbItem = ({ pathname, crumbLabel, idx }) =>
-  _jsx("li", {
-    "aria-current": "page",
-    className: "denhaag-breadcrumb__item",
-    itemProp: "itemListElement",
-    itemScope: true,
-    itemType: "https://schema.org/ListItem",
-    children: _jsxs(Link, {
-      "aria-current": "page",
-      className: "denhaag-breadcrumb__link denhaag-breadcrumb__link--current",
-      to: pathname,
-      itemProp: "item",
-      children: [
-        _jsx("span", {
-          className: "denhaag-breadcrumb__text",
-          itemProp: "name",
-          children: crumbLabel,
-        }),
-        _jsx("meta", { content: idx.toString(), itemProp: "position" }),
-      ],
-    }),
-  });
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+/**
+ * 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 "./Breadcrumbs.css";
+export const Breadcrumbs = ({ crumbs }) => {
+  return _jsx("nav", {
+    "aria-label": "Breadcrumb",
+    className: "denhaag-breadcrumb",
+    children: _jsx("ol", {
+      className: "denhaag-breadcrumb__list",
+      itemScope: true,
+      itemType: "https://schema.org/BreadcrumbList",
+      children: crumbs.map((crumb, idx) => {
+        if (crumbs.length !== idx + 1) {
+          return _jsx(CrumbItem, { ...crumb, ...{ idx } }, idx);
+        }
+        return _jsx(LastCrumbItem, { ...crumb, ...{ idx } }, idx);
+      }),
+    }),
+  });
+};
+const CrumbItem = ({ pathname, crumbLabel, idx }) =>
+  _jsx("li", {
+    className: "denhaag-breadcrumb__item",
+    itemProp: "itemListElement",
+    itemScope: true,
+    itemType: "https://schema.org/ListItem",
+    children: _jsxs(Link, {
+      className: "denhaag-breadcrumb__link",
+      to: pathname,
+      itemProp: "item",
+      children: [
+        _jsx("span", {
+          className: "denhaag-breadcrumb__text",
+          itemProp: "name",
+          children: crumbLabel,
+        }),
+        _jsx("svg", {
+          "aria-hidden": "true",
+          className: "denhaag-icon",
+          fill: "none",
+          focusable: "false",
+          height: "1em",
+          shapeRendering: "auto",
+          viewBox: "0 0 24 24",
+          width: "1em",
+          xmlns: "http://www.w3.org/2000/svg",
+          children: _jsx("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",
+          }),
+        }),
+        _jsx("meta", { content: idx.toString(), itemProp: "position" }),
+      ],
+    }),
+  });
+const LastCrumbItem = ({ pathname, crumbLabel, idx }) =>
+  _jsx("li", {
+    "aria-current": "page",
+    className: "denhaag-breadcrumb__item",
+    itemProp: "itemListElement",
+    itemScope: true,
+    itemType: "https://schema.org/ListItem",
+    children: _jsxs(Link, {
+      "aria-current": "page",
+      className: "denhaag-breadcrumb__link denhaag-breadcrumb__link--current",
+      to: pathname,
+      itemProp: "item",
+      children: [
+        _jsx("span", {
+          className: "denhaag-breadcrumb__text",
+          itemProp: "name",
+          children: crumbLabel,
+        }),
+        _jsx("meta", { content: idx.toString(), itemProp: "position" }),
+      ],
+    }),
+  });

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/editableTableRow/EditableTableRow.module.css

@@ -1,25 +1,25 @@
-.th {
-  width: 35%;
-}
-
-.cancel {
-  color: var(--skeleton-color-grey-3) !important;
-}
-
-.editButtonsContainer {
-  display: flex;
-  margin-block-start: var(--skeleton-size-xs);
-}
-
-.editButtonsContainer > *:not(:last-child) {
-  margin-inline-end: var(--skeleton-size-md);
-}
-
-.submit {
-  all: unset;
-}
-
-.editButton {
-  display: flex;
-  justify-content: flex-end;
-}
+.th {
+  width: 35%;
+}
+
+.cancel {
+  color: var(--skeleton-color-grey-3) !important;
+}
+
+.editButtonsContainer {
+  display: flex;
+  margin-block-start: var(--skeleton-size-xs);
+}
+
+.editButtonsContainer > *:not(:last-child) {
+  margin-inline-end: var(--skeleton-size-md);
+}
+
+.submit {
+  all: unset;
+}
+
+.editButton {
+  display: flex;
+  justify-content: flex-end;
+}

package/src/components/formFields/checkbox/Checkbox.module.css

@@ -1,7 +1,7 @@
-.container {
-  user-select: none;
-}
-
-.container:hover {
-  cursor: pointer;
-}
+.container {
+  user-select: none;
+}
+
+.container:hover {
+  cursor: pointer;
+}

package/src/components/formFields/date/Date.module.css

@@ -1,12 +1,12 @@
-.container {
-  display: flex;
-}
-
-.calendar {
-  display: flex;
-}
-
-.calendar > div::before,
-.calendar > div::after {
-  display: none;
-}
+.container {
+  display: flex;
+}
+
+.calendar {
+  display: flex;
+}
+
+.calendar > div::before,
+.calendar > div::after {
+  display: none;
+}

package/src/components/formFields/index.js

@@ -1,4 +1,4 @@
-import { InputText, InputPassword, InputEmail, InputDate, InputNumber } from "./input";
-import { Textarea } from "./textarea";
-import { InputCheckbox } from "./checkbox";
-export { InputText, InputPassword, InputEmail, InputDate, InputNumber, InputCheckbox, Textarea };
+import { InputText, InputPassword, InputEmail, InputDate, InputNumber } from "./input";
+import { Textarea } from "./textarea";
+import { InputCheckbox } from "./checkbox";
+export { InputText, InputPassword, InputEmail, InputDate, InputNumber, InputCheckbox, Textarea };

package/src/components/formFields/select/select.module.css

@@ -1,38 +1,38 @@
-:root {
-  --conduction-input-select-border: 1px solid var(--skeleton-color-grey-3);
-  --conduction-input-select-border-focus: 2px dashed var(--skeleton-color-grey-5);
-}
-
-.select > div {
-  background-color: var(--skeleton-color-white);
-  border: var(--conduction-input-select-border);
-  border-radius: var(--skeleton-border-radius-md);
-  box-sizing: border-box;
-  padding-block-start: var(--skeleton-size-xs);
-  padding-block-end: var(--skeleton-size-xs);
-}
-
-.select.error > div {
-  border-color: var(
-    --utrecht-textbox-invalid-border-color,
-    var(--utrecht-form-input-invalid-border-color, var(--utrecht-textbox-border-color, var(--utrecht-form-input-border-color)))
-  );
-}
-
-.select .select > div:focus-within {
-  outline: none;
-  box-shadow: none;
-}
-
-.select > div:focus-within::after {
-  content: "";
-  display: block;
-  position: absolute;
-  pointer-events: none;
-  bottom: calc(var(--skeleton-size-2xs) * -1);
-  left: calc(var(--skeleton-size-2xs) * -1);
-  right: calc(var(--skeleton-size-2xs) * -1);
-  top: calc(var(--skeleton-size-2xs) * -1);
-  border: var(--conduction-input-select-border-focus);
-  border-radius: var(--skeleton-border-radius-md);
-}
+:root {
+  --conduction-input-select-border: 1px solid var(--skeleton-color-grey-3);
+  --conduction-input-select-border-focus: 2px dashed var(--skeleton-color-grey-5);
+}
+
+.select > div {
+  background-color: var(--skeleton-color-white);
+  border: var(--conduction-input-select-border);
+  border-radius: var(--skeleton-border-radius-md);
+  box-sizing: border-box;
+  padding-block-start: var(--skeleton-size-xs);
+  padding-block-end: var(--skeleton-size-xs);
+}
+
+.select.error > div {
+  border-color: var(
+    --utrecht-textbox-invalid-border-color,
+    var(--utrecht-form-input-invalid-border-color, var(--utrecht-textbox-border-color, var(--utrecht-form-input-border-color)))
+  );
+}
+
+.select .select > div:focus-within {
+  outline: none;
+  box-shadow: none;
+}
+
+.select > div:focus-within::after {
+  content: "";
+  display: block;
+  position: absolute;
+  pointer-events: none;
+  bottom: calc(var(--skeleton-size-2xs) * -1);
+  left: calc(var(--skeleton-size-2xs) * -1);
+  right: calc(var(--skeleton-size-2xs) * -1);
+  top: calc(var(--skeleton-size-2xs) * -1);
+  border: var(--conduction-input-select-border-focus);
+  border-radius: var(--skeleton-border-radius-md);
+}

package/src/components/formFields/select/select.tsx

@@ -17,6 +17,7 @@ interface ISelectProps {
   isClearable?: boolean;
   hideErrorMessage?: boolean;
   menuPlacement?: MenuPlacement;
+  placeholder?: string;
 }
 
 export const SelectMultiple = ({
@@ -30,6 +31,7 @@ export const SelectMultiple = ({
   disabled,
   hideErrorMessage,
   menuPlacement,
+  placeholder,
 }: ISelectProps & IReactHookFormProps): JSX.Element => {
   return (
     <Controller
@@ -48,7 +50,7 @@ export const SelectMultiple = ({
               menuPortalTarget={document.body}
               menuPlacement={menuPlacement}
               styles={{ menuPortal: (base) => ({ ...base, zIndex: 100 }) }}
-              placeholder={disabled ? "Disabled..." : "Select one or more options..."}
+              placeholder={disabled ? "Disabled..." : placeholder ?? "Select one or more options..."}
             />
             {errors[name] && !hideErrorMessage && <ErrorMessage message={errors[name].message} />}
           </>
@@ -69,6 +71,7 @@ export const SelectCreate = ({
   disabled,
   hideErrorMessage,
   menuPlacement,
+  placeholder,
 }: ISelectProps & IReactHookFormProps): JSX.Element => {
   return (
     <Controller
@@ -80,7 +83,7 @@ export const SelectCreate = ({
             <CreatableSelect
               inputId={id}
               value={value ?? ""}
-              placeholder={disabled ? "Disabled..." : "Select or create one or multiple options..."}
+              placeholder={disabled ? "Disabled..." : placeholder ?? "Select one or more options..."}
               className={clsx(styles.select, errors[name] && styles.error)}
               isMulti
               isDisabled={disabled}
@@ -109,6 +112,7 @@ export const SelectSingle = ({
   disabled,
   hideErrorMessage,
   menuPlacement,
+  placeholder,
 }: ISelectProps & IReactHookFormProps): JSX.Element => {
   return (
     <Controller
@@ -126,7 +130,7 @@ export const SelectSingle = ({
               menuPortalTarget={document.body}
               menuPlacement={menuPlacement}
               styles={{ menuPortal: (base) => ({ ...base, zIndex: 100 }) }}
-              placeholder={disabled ? "Disabled..." : "Select an option..."}
+              placeholder={disabled ? "Disabled..." : placeholder ?? "Select one or more options..."}
             />
             {errors[name] && !hideErrorMessage && <ErrorMessage message={errors[name].message} />}
           </>

package/src/components/formFields/textarea.js

@@ -1,3 +1,3 @@
-import { jsx as _jsx } from "react/jsx-runtime";
-import { TextArea } from "@gemeente-denhaag/textarea";
-export const Textarea = ({ name, validation, register, errors }) => (_jsx(TextArea, { ...register(name, { ...validation }), invalid: errors[name] }));
+import { jsx as _jsx } from "react/jsx-runtime";
+import { TextArea } from "@gemeente-denhaag/textarea";
+export const Textarea = ({ name, validation, register, errors }) => (_jsx(TextArea, { ...register(name, { ...validation }), invalid: errors[name] }));

package/src/components/formFields/types.js

@@ -1 +1 @@
-export {};
+export {};

package/src/components/imageDivider/ImageDivider.js

@@ -1,6 +1,6 @@
-import { jsx as _jsx } from "react/jsx-runtime";
-import clsx from "clsx";
-import * as styles from "./imageDivider.module.css";
-export const ImageDivider = ({ image, layoutClassName }) => {
-    return _jsx("img", { src: image, className: clsx(styles.divider, layoutClassName) });
-};
+import { jsx as _jsx } from "react/jsx-runtime";
+import clsx from "clsx";
+import * as styles from "./imageDivider.module.css";
+export const ImageDivider = ({ image, layoutClassName }) => {
+    return _jsx("img", { src: image, className: clsx(styles.divider, layoutClassName) });
+};