@conduction/components 2.2.16 → 2.2.18

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

@@ -11,7 +11,7 @@ interface ISelectProps {
   control: Control<FieldValues, any>;
   options: { label: string; value: string }[];
   name: string;
-  ariaLabel?: string;
+  ariaLabel: string;
   id?: string;
   defaultValue?: any;
   disabled?: boolean;
@@ -23,10 +23,24 @@ interface ISelectProps {
 
 const selectStyles: StylesConfig = {
   menuPortal: (base) => ({ ...base, zIndex: 100 }),
-  option: (base) => ({
+  option: (base, state) => ({
     ...base,
     fontFamily: `var(--conduction-input-select-list-option-font-family, ${base.fontFamily})`,
-    backgroundColor: `var(--conduction-input-select-list-option-background-color, ${base.backgroundColor}) `,
+    backgroundColor: [
+      state.isFocused
+        ? `var(--conduction-input-select-list-option-focus-background-color, ${base.backgroundColor})`
+        : state.isSelected
+        ? `var(--conduction-input-select-list-option-selected-background-color, ${base.backgroundColor})`
+        : `var(--conduction-input-select-list-option-background-color, ${base.backgroundColor})`,
+    ],
+
+    color: [
+      state.isFocused
+        ? `var(--conduction-input-select-list-option-focus-color, ${base.color})`
+        : state.isSelected
+        ? `var(--conduction-input-select-list-option-selected-color, ${base.color})`
+        : `var(--conduction-input-select-list-option-color, ${base.color})`,
+    ],
 
     "&:hover": {
       backgroundColor: `var(--conduction-input-select-list-option-hover-background-color, ${base.backgroundColor})`,
@@ -41,24 +55,16 @@ const selectStyles: StylesConfig = {
   }),
 };
 
-const selectMultiStyles: StylesConfig = {
-  menuPortal: (base) => ({ ...base, zIndex: 100 }),
-  option: (base) => ({
-    ...base,
-    fontFamily: `var(--conduction-input-select-list-option-font-family, ${base.fontFamily})`,
-    backgroundColor: `var(--conduction-input-select-list-option-background-color, ${base.backgroundColor}) `,
+const setAttributes = (): void => {
+  const setRoleToPresentation = (selector: string, role: string) => {
+    document.querySelectorAll(selector).forEach((element) => {
+      if (element.getAttribute("role") !== "presentation") element.setAttribute("role", role);
+    });
+  };
 
-    "&:hover": {
-      backgroundColor: `var(--conduction-input-select-list-option-hover-background-color, ${base.backgroundColor})`,
-      color: `var(--conduction-input-select-list-option-hover-color, ${base.color})`,
-      fontFamily: `var(--conduction-input-select-list-option-hover-font-family, var(--conduction-input-select-list-option-font-family, ${base.fontFamily}))`,
-    },
-  }),
-  placeholder: (base) => ({
-    ...base,
-    fontFamily: `var(--conduction-input-select-placeholder-font-family, var(--utrecht-form-input-placeholder-font-family, ${base.fontFamily}))`,
-    color: `var(--conduction-input-select-placeholder-color, var(--utrecht-form-input-placeholder-color, ${base.color}) )`,
-  }),
+  setRoleToPresentation('[id*="live-region"]', "presentation");
+  setRoleToPresentation('[class*="indicatorSeparator"]', "separator");
+  setRoleToPresentation('[class*="a11yText"]', "presentation");
 };
 
 export const SelectMultiple = ({
@@ -76,21 +82,7 @@ export const SelectMultiple = ({
   ariaLabel,
 }: ISelectProps & IReactHookFormProps): JSX.Element => {
   React.useEffect(() => {
-    document.querySelectorAll('[id*="live-region"]').forEach((element: any) => {
-      if (element?.role !== "presentation") {
-        element.setAttribute("role", "presentation");
-      }
-    });
-    document.querySelectorAll('[class*="indicatorSeparator"]').forEach((element: any) => {
-      if (element.role !== "presentation") {
-        element.setAttribute("role", "presentation");
-      }
-    });
-    document.querySelectorAll('[class*="a11yText"]').forEach((element: any) => {
-      if (element.role !== "presentation") {
-        element.setAttribute("role", "presentation");
-      }
-    });
+    setAttributes();
   }, []);
   return (
     <Controller
@@ -135,21 +127,7 @@ export const SelectCreate = ({
   ariaLabel,
 }: ISelectProps & IReactHookFormProps): JSX.Element => {
   React.useEffect(() => {
-    document.querySelectorAll('[id*="live-region"]').forEach((element: any) => {
-      if (element.role !== "presentation") {
-        element.setAttribute("role", "presentation");
-      }
-    });
-    document.querySelectorAll('[class*="indicatorSeparator"]').forEach((element: any) => {
-      if (element.role !== "presentation") {
-        element.setAttribute("role", "presentation");
-      }
-    });
-    document.querySelectorAll('[class*="a11yText"]').forEach((element: any) => {
-      if (element.role !== "presentation") {
-        element.setAttribute("role", "presentation");
-      }
-    });
+    setAttributes();
   }, []);
   return (
     <Controller
@@ -195,21 +173,7 @@ export const SelectSingle = ({
   ariaLabel,
 }: ISelectProps & IReactHookFormProps): JSX.Element => {
   React.useEffect(() => {
-    document.querySelectorAll('[id*="live-region"]').forEach((element: any) => {
-      if (element.role !== "presentation") {
-        element.setAttribute("role", "presentation");
-      }
-    });
-    document.querySelectorAll('[class*="indicatorSeparator"]').forEach((element: any) => {
-      if (element.role !== "presentation") {
-        element.setAttribute("role", "presentation");
-      }
-    });
-    document.querySelectorAll('[class*="a11yText"]').forEach((element: any) => {
-      if (element.role !== "presentation") {
-        element.setAttribute("role", "presentation");
-      }
-    });
+    setAttributes();
   }, []);
   return (
     <Controller

package/src/components/formFields/textarea.tsx

@@ -4,7 +4,7 @@ import { Textarea as UtrechtTextarea } from "@utrecht/component-library-react/di
 
 export interface ITextAreaProps {
   name: string;
-  ariaLabel?: string;
+  ariaLabel: string;
   disabled?: boolean;
   defaultValue?: string;
   hideErrorMessage?: boolean;

package/src/components/horizontalOverflowWrapper/HorizontalOverflowWrapper.module.css

@@ -0,0 +1,41 @@
+:root {
+  --conduction-horizontal-overflow-wrapper-background-color: unset;
+  --conduction-horizontal-overflow-wrapper-buttons-top: 12px;
+
+  --conduction-horizontal-overflow-wrapper-margin-inline-start: 8px;
+  --conduction-horizontal-overflow-wrapper-margin-inline-end: 8px;
+  --conduction-horizontal-overflow-wrapper-margin-block-start: 8px;
+  --conduction-horizontal-overflow-wrapper-margin-block-end: 8px;
+}
+
+.container {
+  position: relative;
+  background-color: var(--conduction-horizontal-overflow-wrapper-background-color);
+}
+
+.wrapper {
+  overflow-x: scroll;
+}
+
+.scrollButton {
+  position: sticky;
+  top: var(--conduction-horizontal-overflow-wrapper-buttons-top);
+
+  margin-inline-start: var(--conduction-horizontal-overflow-wrapper-margin-inline-start);
+  margin-inline-end: var(--conduction-horizontal-overflow-wrapper-margin-inline-end);
+  margin-block-start: var(--conduction-horizontal-overflow-wrapper-margin-block-start);
+  margin-block-end: var(--conduction-horizontal-overflow-wrapper-margin-block-end);
+}
+
+.scrollButton.right {
+  left: 100%;
+}
+
+/* Hide scrollbar */
+.wrapper::-webkit-scrollbar {
+  display: none;
+}
+.wrapper {
+  -ms-overflow-style: none;
+  scrollbar-width: none;
+}

package/src/components/horizontalOverflowWrapper/HorizontalOverflowWrapper.tsx

@@ -0,0 +1,80 @@
+import * as React from "react";
+import * as styles from "./HorizontalOverflowWrapper.module.css";
+import clsx from "clsx";
+import { Button } from "@utrecht/component-library-react/dist/css-module";
+import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
+import { faChevronLeft, faChevronRight } from "@fortawesome/free-solid-svg-icons";
+
+interface HorizontalOverflowWrapperProps {
+  children: React.ReactNode;
+  ariaLabels: {
+    scrollRightButton: string;
+    scrollLeftButton: string;
+  };
+}
+
+export const HorizontalOverflowWrapper: React.FC<HorizontalOverflowWrapperProps> = ({ children, ariaLabels }) => {
+  const [canScrollRight, setCanScrollRight] = React.useState<boolean>(false);
+  const [canScrollLeft, setCanScrollLeft] = React.useState<boolean>(false);
+
+  const wrapperRef = React.useRef<HTMLDivElement | null>(null);
+
+  const scrollRight = (): void => {
+    wrapperRef.current?.scrollTo({
+      left: wrapperRef.current.scrollLeft + wrapperRef.current.clientWidth * 0.9,
+      behavior: "smooth",
+    });
+  };
+
+  const scrollLeft = (): void => {
+    wrapperRef.current?.scrollTo({
+      left: wrapperRef.current.scrollLeft - wrapperRef.current.clientWidth * 0.9,
+      behavior: "smooth",
+    });
+  };
+
+  React.useEffect(() => {
+    checkScrollDirections(); // initiate available scroll directions
+
+    window.addEventListener("resize", checkScrollDirections);
+
+    return () => window.removeEventListener("resize", checkScrollDirections);
+  }, []);
+
+  const checkScrollDirections = (): void => {
+    if (!wrapperRef.current) return;
+
+    setCanScrollRight(wrapperRef.current.scrollLeft + wrapperRef.current.clientWidth < wrapperRef.current.scrollWidth);
+    setCanScrollLeft(wrapperRef.current.scrollLeft > 0);
+  };
+
+  return (
+    <div className={styles.container}>
+      {canScrollLeft && (
+        <Button
+          className={clsx(styles.scrollButton, styles.left)}
+          onClick={scrollLeft}
+          appearance="secondary-action-button"
+          aria-label={ariaLabels.scrollLeftButton}
+        >
+          <FontAwesomeIcon icon={faChevronLeft} />
+        </Button>
+      )}
+
+      {canScrollRight && (
+        <Button
+          className={clsx(styles.scrollButton, styles.right)}
+          onClick={scrollRight}
+          appearance="secondary-action-button"
+          aria-label={ariaLabels.scrollRightButton}
+        >
+          <FontAwesomeIcon icon={faChevronRight} />
+        </Button>
+      )}
+
+      <div ref={wrapperRef} className={styles.wrapper} onScroll={checkScrollDirections}>
+        {children}
+      </div>
+    </div>
+  );
+};

package/src/components/imageDivider/imageDivider.module.css

@@ -1,5 +1,5 @@
-.divider {
-  display: block;
-  object-fit: cover;
-  width: 100%;
-}
+.divider {
+  display: block;
+  object-fit: cover;
+  width: 100%;
+}

package/src/components/logo/Logo.module.css

@@ -1,15 +1,15 @@
-.logoContainer {
-  height: 100%;
-}
-
-.logo {
-  background-size: 100% 100%;
-}
-
-.authenticatedLogo {
-  background-image: var(--conduction-authenticated-logo-background);
-}
-
-.unauthenticatedLogo {
-  background-image: var(--conduction-unauthenticated-logo-background);
-}
+.logoContainer {
+  height: 100%;
+}
+
+.logo {
+  background-size: 100% 100%;
+}
+
+.authenticatedLogo {
+  background-image: var(--conduction-authenticated-logo-background);
+}
+
+.unauthenticatedLogo {
+  background-image: var(--conduction-unauthenticated-logo-background);
+}

package/src/components/metaIcon/MetaIcon.module.css

@@ -1,29 +1,29 @@
-:root {
-  --conduction-meta-icon-icon-size: var(--skeleton-size-lg);
-  --conduction-meta-icon-icon-color: var(--skeleton-color-secondary-4);
-}
-
-.container {
-  display: flex;
-  align-items: center;
-  flex-direction: column;
-}
-
-.container > *:not(:last-child) {
-  margin-block-end: var(--skeleton-size-xs);
-}
-
-.icon {
-  color: var(--conduction-meta-icon-icon-color);
-  height: var(--conduction-meta-icon-icon-size);
-  width: var(--conduction-meta-icon-icon-size);
-}
-
-.icon > svg {
-  height: 100%;
-  width: 100%;
-}
-
-.value {
-  font-weight: var(--skeleton-font-weight-bold);
-}
+:root {
+  --conduction-meta-icon-icon-size: var(--skeleton-size-lg);
+  --conduction-meta-icon-icon-color: var(--skeleton-color-secondary-4);
+}
+
+.container {
+  display: flex;
+  align-items: center;
+  flex-direction: column;
+}
+
+.container > *:not(:last-child) {
+  margin-block-end: var(--skeleton-size-xs);
+}
+
+.icon {
+  color: var(--conduction-meta-icon-icon-color);
+  height: var(--conduction-meta-icon-icon-size);
+  width: var(--conduction-meta-icon-icon-size);
+}
+
+.icon > svg {
+  height: 100%;
+  width: 100%;
+}
+
+.value {
+  font-weight: var(--skeleton-font-weight-bold);
+}

package/src/components/quoteWrapper/QuoteWrapper.module.css

@@ -1,12 +1,12 @@
-:root {
-  --conduction-quote-wrapper-border-width: var(--skeleton-size-sm);
-  --conduction-quote-wrapper-border-color: var(--skeleton-color-grey-1);
-  --conduction-quote-wrapper-padding-inline: var(--skeleton-size-lg);
-}
-
-.container {
-  border-left-width: var(--conduction-quote-wrapper-border-width);
-  border-left-style: solid;
-  border-left-color: var(--conduction-quote-wrapper-border-color);
-  padding-inline-start: var(--conduction-quote-wrapper-padding-inline);
-}
+:root {
+  --conduction-quote-wrapper-border-width: var(--skeleton-size-sm);
+  --conduction-quote-wrapper-border-color: var(--skeleton-color-grey-1);
+  --conduction-quote-wrapper-padding-inline: var(--skeleton-size-lg);
+}
+
+.container {
+  border-left-width: var(--conduction-quote-wrapper-border-width);
+  border-left-style: solid;
+  border-left-color: var(--conduction-quote-wrapper-border-color);
+  padding-inline-start: var(--conduction-quote-wrapper-padding-inline);
+}

package/src/components/tabs/Tabs.tsx

@@ -41,11 +41,19 @@ export const TabList: ReactTabsFunctionComponent<TabListProps> = ({ children, ..
   };
 
   const handleScrollRight = () => {
-    if (wrapperRef.current) wrapperRef.current.scrollTo({ left: wrapperRef.current.scrollWidth, behavior: "smooth" });
+    if (wrapperRef.current)
+      wrapperRef.current.scrollTo({
+        left: wrapperRef.current.scrollLeft + wrapperRef.current.clientWidth * 0.9,
+        behavior: "smooth",
+      });
   };
 
   const handleScrollLeft = () => {
-    if (wrapperRef.current) wrapperRef.current.scrollTo({ left: 0, behavior: "smooth" });
+    if (wrapperRef.current)
+      wrapperRef.current.scrollTo({
+        left: wrapperRef.current.scrollLeft - wrapperRef.current.clientWidth * 0.9,
+        behavior: "smooth",
+      });
   };
 
   React.useEffect(() => {

package/src/components/tag/Tag.module.css

@@ -1,44 +1,44 @@
-:root {
-  --conduction-tag-font-size: var(--skeleton-font-size-sm);
-  --conduction-tag-color: var(--skeleton-black);
-  --conduction-tag-background-color: var(--skeleton-color-grey-1);
-  --conduction-tag-border-radius: var(--skeleton-border-radius-md);
-  --conduction-tag-padding: var(--skeleton-size-xs);
-  --conduction-tag-icon-margin-inline-end: var(--skeleton-size-2xs);
-  --conduction-tag-remove-background-color: #ffbdad;
-  --conduction-tag-remove-text-color: #e44f2a;
-}
-
-.tag {
-  display: inline-block;
-  width: fit-content;
-  font-size: var(--conduction-tag-font-size);
-  color: var(--conduction-tag-color);
-  background-color: var(--conduction-tag-background-color);
-  padding-inline-start: var(--conduction-tag-padding);
-  padding-inline-end: var(--conduction-tag-padding);
-  padding-block-start: var(--conduction-tag-padding);
-  padding-block-end: var(--conduction-tag-padding);
-}
-
-.tag > *:not(:last-child) {
-  margin-inline-end: var(--conduction-tag-icon-margin-inline-end);
-}
-
-.clickable :hover {
-  cursor: pointer;
-}
-
-.remove {
-  padding-inline-end: 4px;
-}
-
-.tagContainer {
-  display: flex;
-}
-
-.removeTag:hover {
-  cursor: pointer;
-  background-color: var(--conduction-tag-remove-background-color);
-  color: var(--conduction-tag-remove-text-color);
-}
+:root {
+  --conduction-tag-font-size: var(--skeleton-font-size-sm);
+  --conduction-tag-color: var(--skeleton-black);
+  --conduction-tag-background-color: var(--skeleton-color-grey-1);
+  --conduction-tag-border-radius: var(--skeleton-border-radius-md);
+  --conduction-tag-padding: var(--skeleton-size-xs);
+  --conduction-tag-icon-margin-inline-end: var(--skeleton-size-2xs);
+  --conduction-tag-remove-background-color: #ffbdad;
+  --conduction-tag-remove-text-color: #e44f2a;
+}
+
+.tag {
+  display: inline-block;
+  width: fit-content;
+  font-size: var(--conduction-tag-font-size);
+  color: var(--conduction-tag-color);
+  background-color: var(--conduction-tag-background-color);
+  padding-inline-start: var(--conduction-tag-padding);
+  padding-inline-end: var(--conduction-tag-padding);
+  padding-block-start: var(--conduction-tag-padding);
+  padding-block-end: var(--conduction-tag-padding);
+}
+
+.tag > *:not(:last-child) {
+  margin-inline-end: var(--conduction-tag-icon-margin-inline-end);
+}
+
+.clickable :hover {
+  cursor: pointer;
+}
+
+.remove {
+  padding-inline-end: 4px;
+}
+
+.tagContainer {
+  display: flex;
+}
+
+.removeTag:hover {
+  cursor: pointer;
+  background-color: var(--conduction-tag-remove-background-color);
+  color: var(--conduction-tag-remove-text-color);
+}

package/src/components/topNav/index.ts

@@ -1,4 +1,4 @@
-import { PrimaryTopNav } from "./primaryTopNav/PrimaryTopNav";
-import { SecondaryTopNav } from "./secondaryTopNav/SecondaryTopNav";
-
-export { PrimaryTopNav, SecondaryTopNav };
+import { PrimaryTopNav } from "./primaryTopNav/PrimaryTopNav";
+import { SecondaryTopNav } from "./secondaryTopNav/SecondaryTopNav";
+
+export { PrimaryTopNav, SecondaryTopNav };

package/src/custom.d.ts

@@ -1,4 +1,4 @@
-declare module "*.svg";
-declare module "*.jpg";
-declare module "*.png";
-declare module "*.module.css";
+declare module "*.svg";
+declare module "*.jpg";
+declare module "*.png";
+declare module "*.module.css";

package/src/index.ts

@@ -40,7 +40,7 @@ import { CodeBlock } from "./components/codeBlock/CodeBlock";
 import { ToolTip } from "./components/toolTip/ToolTip";
 import { Pagination } from "./components/Pagination/Pagination";
 import { Tabs, TabList, Tab, TabPanel } from "./components/tabs/Tabs";
-import { TableWrapper } from "./components/tableWrapper/TableWrapper";
+import { HorizontalOverflowWrapper } from "./components/horizontalOverflowWrapper/HorizontalOverflowWrapper";
 
 export {
   DownloadCard,
@@ -82,5 +82,5 @@ export {
   TabList,
   Tab,
   TabPanel,
-  TableWrapper,
+  HorizontalOverflowWrapper,
 };

package/tsconfig.json

@@ -3,10 +3,7 @@
     "declaration": true,
     "outDir": "./lib",
     "target": "esnext",
-    "lib": [
-      "dom",
-      "esnext"
-    ],
+    "lib": ["dom", "esnext"],
     "jsx": "react-jsx",
     "module": "esnext",
     "moduleResolution": "node",
@@ -15,15 +12,7 @@
     "strict": true,
     "skipLibCheck": true
   },
-  "hooks": [
-    "copy-files"
-  ],
-  "include": [
-    "src",
-    "src/**/*.css"
-  ],
-  "exclude": [
-    "node_modules",
-    "**/__tests__/*"
-  ]
-}
+  "hooks": ["copy-files"],
+  "include": ["src", "src/**/*.css"],
+  "exclude": ["node_modules", "**/__tests__/*"]
+}

package/lib/components/statusSteps/StatusSteps.d.ts

@@ -1,13 +0,0 @@
-/// <reference types="react" />
-interface IStatusStep {
-    title: string;
-    checked?: boolean;
-    current?: boolean;
-    expanded?: boolean;
-    subSteps?: string[];
-}
-interface StatusStepsProps {
-    steps: IStatusStep[];
-}
-export declare const StatusSteps: ({ steps }: StatusStepsProps) => JSX.Element;
-export {};

package/lib/components/statusSteps/StatusSteps.js

@@ -1,5 +0,0 @@
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { Step, StepExpandedIcon, StepHeader, StepHeading, StepList, StepMarker, StepSection, SubStep, SubStepHeading, SubStepList, SubStepMarker, } from "@gemeente-denhaag/process-steps";
-export const StatusSteps = ({ steps }) => {
-    return (_jsx(StepList, { children: steps.map(({ title, checked, current, expanded, subSteps }, idx) => (_jsxs(Step, { ...{ checked, current, expanded }, children: [_jsx(StepSection, { children: _jsxs(StepHeader, { children: [_jsx(StepMarker, { children: idx + 1 }), _jsx(StepHeading, { children: title }), subSteps && _jsx(StepExpandedIcon, {})] }) }), subSteps && (_jsx(SubStepList, { children: subSteps.map((subStep) => (_jsxs(SubStep, { children: [_jsx(SubStepMarker, {}), _jsx(SubStepHeading, { children: subStep })] }, idx))) }))] }, idx))) }));
-};

package/lib/custom.d copy.d.ts

@@ -1,5 +0,0 @@
-declare module "*.svg";
-declare module "*.jpg";
-declare module "*.png";
-declare module "*.module.css";
-declare module "@utrecht/component-library-react/dist/css-module";

package/lib/custom.d copy.js

@@ -1 +0,0 @@
-"use strict";