@conduction/components 2.2.26 → 2.2.27

package/lib/components/htmlParser/parser/tableRow/getTableRow.module.css

@@ -1,29 +0,0 @@
-.tableRow:nth-child(odd) {
-  background-color: var(--utrecht-table-row-alternate-odd-background-color);
-  color: var(--utrecht-table-row-alternate-odd-color);
-}
-
-.tableRow:nth-child(odd):hover {
-  background-color: var(--utrecht-table-row-hover-background-color);
-  color: var(--utrecht-table-row-hover-color);
-}
-
-.tableRow:nth-child(even) {
-  background-color: var(--utrecht-table-row-alternate-even-background-color);
-  color: var(--utrecht-table-row-alternate-even-color);
-}
-
-.tableRow:nth-child(even):hover {
-  background-color: var(--utrecht-table-row-hover-background-color);
-  color: var(--utrecht-table-row-hover-color);
-}
-
-.tableRow:nth-child(even) {
-  background-color: var(--utrecht-table-row-alternate-even-background-color);
-  color: var(--utrecht-table-row-alternate-even-color);
-}
-
-.tableRow:nth-child(even):hover {
-  background-color: var(--utrecht-table-row-hover-background-color);
-  color: var(--utrecht-table-row-hover-color);
-}

package/lib/components/htmlParser/parser/useHtmlParser.d.ts

@@ -1,5 +0,0 @@
-export declare const useHtmlParser: (location: string, directoriesJson: string) => {
-    options: {
-        replace: ({ attribs, parent, children, name }: any) => import("react/jsx-runtime").JSX.Element | undefined;
-    };
-};

package/lib/components/htmlParser/parser/useHtmlParser.js

@@ -1,78 +0,0 @@
-import { attributesToProps } from "html-react-parser";
-import { getHeader } from "./header/getHeader";
-import { getAnchor } from "./anchor/getAnchor";
-import { getListItem } from "./listItem/getListItem";
-import { getImage } from "./image/getImage";
-import { getList } from "./list/getList";
-import { getParagraph } from "./paragraph/getParagraph";
-import { getBlockquote } from "./getBlockquote/getBlockquote";
-import { getTable } from "./table/getTable";
-import { getTableRow } from "./tableRow/getTableRow";
-import { getTableHeader } from "./tableHeader/getTableHeader";
-import { getTableHeaderCell } from "./tableHeaderCell/getTableHeaderCell";
-import { getTableBody } from "./tableBody/getTableBody";
-import { getTableCell } from "./tableCell/getTableCell";
-import { getCode } from "./code/getCode";
-import { getAlert } from "./alert/getAlert";
-import { useGitHubDirectories } from "../useGitHubDirectories";
-import { getSvg } from "./svg/getSvg";
-export const useHtmlParser = (location, directoriesJson) => {
-    const { directories } = useGitHubDirectories(directoriesJson);
-    const options = {
-        replace: ({ attribs, parent, children, name }) => {
-            if (!attribs) {
-                return;
-            }
-            const props = attributesToProps(attribs);
-            if (attribs && (name === "h1" || name === "h2" || name === "h3" || name === "h4")) {
-                return getHeader(name, props, children, options);
-            }
-            if (attribs && name === "p") {
-                return getParagraph(props, children, options);
-            }
-            if (attribs && name === "a") {
-                return getAnchor(props, children, options, directories, location);
-            }
-            if (attribs && (name === "ol" || name === "ul")) {
-                return getList(name, props, children, options);
-            }
-            if (attribs && name === "li") {
-                return getListItem(props, parent, children, options);
-            }
-            if (attribs && name === "img") {
-                return getImage(props);
-            }
-            if (attribs && name === "blockquote") {
-                return getBlockquote(children, options);
-            }
-            if (attribs && name === "div" && attribs.class?.includes("markdown-alert")) {
-                return getAlert(children, options, attribs.class);
-            }
-            if (attribs && name === "table") {
-                return getTable(props, children, options);
-            }
-            if (attribs && name === "tr") {
-                return getTableRow(props, children, options);
-            }
-            if (attribs && name === "thead") {
-                return getTableHeader(props, children, options);
-            }
-            if (attribs && name === "th") {
-                return getTableHeaderCell(props, children, options);
-            }
-            if (attribs && name === "tbody") {
-                return getTableBody(props, children, options);
-            }
-            if (attribs && name === "td") {
-                return getTableCell(props, children, options);
-            }
-            if (attribs && name === "svg") {
-                return getSvg(props, children, options);
-            }
-            if (attribs && (name === "code" || name === "pre")) {
-                return getCode(name, props, children, options);
-            }
-        },
-    };
-    return { options };
-};

package/lib/components/htmlParser/useGitHubDirectories.d.ts

@@ -1,10 +0,0 @@
-export declare type TGitHubDirectory = {
-    name: string;
-    location: string;
-};
-export declare const useGitHubDirectories: (test: string) => {
-    directories: TGitHubDirectory[];
-    getSlugFromName: (name: string) => string;
-    getDirectoryReadMeLocation: (pageSlug: string) => string;
-    getDetailMdLocation: (pageSlug: string, detailPageSlug: string) => string;
-};

package/lib/components/htmlParser/useGitHubDirectories.js

@@ -1,31 +0,0 @@
-import * as React from "react";
-export const useGitHubDirectories = (test) => {
-    const [directories, setDirectories] = React.useState([]);
-    React.useEffect(() => {
-        const gitHubDirectoryPathsString = test;
-        if (!gitHubDirectoryPathsString)
-            return;
-        try {
-            const directories = JSON.parse(gitHubDirectoryPathsString);
-            setDirectories(directories);
-        }
-        catch {
-            console.warn("Something went wrong parsing the GitHub directories.");
-        }
-    }, []);
-    const getSlugFromName = (name) => name.replace(" ", "-");
-    const getNameFromSlug = (slug) => slug.replace("-", " "); // internal function
-    const getDirectoryReadMeLocation = (pageSlug) => {
-        const directory = directories.find((directory) => directory.name === getNameFromSlug(pageSlug));
-        if (!directory)
-            return "";
-        return `${directory.location}/README.md`;
-    };
-    const getDetailMdLocation = (pageSlug, detailPageSlug) => {
-        const directory = directories.find((directory) => directory.name === getNameFromSlug(pageSlug));
-        if (!directory)
-            return "";
-        return `${directory.location}/${getNameFromSlug(detailPageSlug)}.md`;
-    };
-    return { directories, getSlugFromName, getDirectoryReadMeLocation, getDetailMdLocation };
-};

package/lib/components/imageDivider/imageDivider.module.css

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

package/lib/components/jumbotron/Jumbotron.module.css

@@ -1,88 +0,0 @@
-.wrapper {
-  padding-block-start: 72px;
-  padding-block-end: 72px;
-  width: auto !important;
-}
-
-.backgroundImageWrapper {
-  background-size: cover;
-  background-position: 48% 39%;
-  max-width: 100%;
-  padding: 5rem 0 10rem;
-}
-
-.rightImageWrapper {
-  padding-block: 48px;
-  background-color: var(--utrecht-page-header-background-color) !important;
-}
-
-.imageRightContainer {
-  display: flex;
-  margin: auto;
-  justify-content: space-between;
-  gap: var(--utrecht-space-inline-xl);
-  align-items: center;
-}
-
-.headerSearchForm > *:not(:last-child) {
-  margin-block-end: 32px;
-}
-
-.headerSearchForm > .subHeading2 {
-  width: 100%;
-  max-width: 800px;
-  margin-block-end: 48px;
-}
-
-.card {
-  width: fit-content;
-  padding-inline-start: 48px;
-  padding-inline-end: 48px;
-  padding-block-start: 40px;
-  padding-block-end: 40px;
-  border-bottom: var(--conduction-card-wrapper-border-width) var(--conduction-card-wrapper-border-style) var(--conduction-card-wrapper-border-color);
-}
-
-.card:hover {
-  background-color: var(--conduction-card-wrapper-background-color);
-  cursor: default;
-  border-bottom: var(--conduction-card-wrapper-border-width) var(--conduction-card-wrapper-border-style) var(--conduction-card-wrapper-border-color);
-}
-
-.cardTitle,
-.cardAndImageTitle {
-  border-block-end: var(--conduction-card-wrapper-header-border-block-end);
-  color: var(--conduction-card-header-title-color, var(--conduction-card-wrapper-color)) !important;
-}
-
-.cardAndImageTitle {
-  width: max-content;
-}
-
-.cardSubTitle,
-.subTitle {
-  position: relative;
-  font-style: italic;
-  display: block;
-  margin-block-end: var(--utrecht-space-block-md);
-  font-size: var(--utrecht-document-font-size);
-}
-
-.cardDescription {
-  color: var(--conduction-card-wrapper-color) !important;
-}
-
-.image {
-  width: 50% !important;
-  object-fit: contain;
-}
-
-.title,
-.description,
-.subTitle {
-  color: var(--utrecht-page-header-color) !important;
-}
-
-.titleSingle {
-  margin-block-end: var(--utrecht-space-block-2xs);
-}

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

@@ -1,31 +0,0 @@
-:root {
-  --conduction-logo-header-inline-size: 220px;
-  --conduction-logo-header-block-size: 40px;
-  --conduction-logo-header-background-image: url("https://conduction.nl/wp-content/uploads/2021/07/cropped-conductionlogo-1.png");
-
-  --conduction-logo-footer-inline-size: 330px;
-  --conduction-logo-footer-block-size: 60px;
-  --conduction-logo-footer-background-image: url("https://conduction.nl/wp-content/uploads/2021/07/cropped-conductionlogo-1.png");
-}
-
-.container {
-  background-size: contain;
-  background-position: center;
-  background-repeat: no-repeat;
-}
-
-.container.header {
-  inline-size: var(--conduction-logo-header-inline-size);
-  block-size: var(--conduction-logo-header-block-size);
-  background-image: var(--conduction-logo-header-background-image);
-}
-
-.container.footer {
-  inline-size: var(--conduction-logo-footer-inline-size);
-  block-size: var(--conduction-logo-footer-block-size);
-  background-image: var(--conduction-logo-footer-background-image);
-}
-
-.container.clickable:hover {
-  cursor: pointer;
-}

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

@@ -1,29 +0,0 @@
-: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/lib/components/notificationPopUp/NotificationPopUp.module.css

@@ -1,70 +0,0 @@
-:root {
-  --conduction-notification-pop-up-box-shadow: 0px 0px 6px 6px rgb(0 0 0 / 15%);
-  --conduction-notification-pop-up-border: 1px solid var(--skeleton-color-grey-2);
-}
-
-:export {
-  animationDuration: 200ms;
-}
-
-.modal {
-  animation-fill-mode: both;
-  background: var(--skeleton-color-grey-1);
-  padding-inline-start: var(--skeleton-size-lg);
-  padding-inline-end: var(--skeleton-size-lg);
-  padding-block-start: var(--skeleton-size-lg);
-  padding-block-end: var(--skeleton-size-lg);
-  border-radius: var(--skeleton-border-radius-md);
-  box-shadow: var(--conduction-notification-pop-up-box-shadow);
-}
-
-.modal > *:not(:last-child) {
-  margin-block-end: var(--skeleton-size-md);
-}
-
-.buttons {
-  display: flex;
-  justify-content: flex-end;
-  align-items: center;
-}
-
-.buttons > *:not(:last-child) {
-  margin-inline-end: var(--skeleton-size-md);
-}
-
-.button {
-  display: flex;
-  gap: 8px;
-}
-
-.visible {
-  animation-name: fadeInBottom;
-}
-
-.link > * {
-  margin-inline-end: 8px;
-}
-
-@keyframes fadeInBottom {
-  from {
-    opacity: 0;
-    transform: translateY(50%);
-  }
-  to {
-    opacity: 1;
-  }
-}
-
-.modal:not(.visible) {
-  animation-name: fadeOutBottom;
-}
-
-@keyframes fadeOutBottom {
-  from {
-    opacity: 1;
-  }
-  to {
-    opacity: 0;
-    transform: translateY(50%);
-  }
-}

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

@@ -1,12 +0,0 @@
-: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/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/components/tableWrapper/TableWrapper.d.ts

@@ -1,4 +0,0 @@
-import React from "react";
-export declare const TableWrapper: React.FC<{
-    children: React.ReactNode;
-}>;

package/lib/components/tableWrapper/TableWrapper.js

@@ -1,30 +0,0 @@
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import React, { useState, useEffect } from "react";
-import * as styles from "./TableWrapper.module.css";
-import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
-import { faChevronLeft, faChevronRight } from "@fortawesome/free-solid-svg-icons";
-export const TableWrapper = ({ children }) => {
-    const [canScrollRight, setCanScrollRight] = useState(false);
-    const [canScrollLeft, setCanScrollLeft] = useState(false);
-    const wrapperRef = React.useRef(null);
-    const handleScroll = () => {
-        if (wrapperRef.current) {
-            setCanScrollLeft(wrapperRef.current.scrollLeft > 0);
-            setCanScrollRight(wrapperRef.current.scrollWidth - wrapperRef.current.scrollLeft > wrapperRef.current.clientWidth);
-        }
-    };
-    const handleScrollRight = () => {
-        if (wrapperRef.current)
-            wrapperRef.current.scrollTo({ left: wrapperRef.current.scrollWidth, behavior: "smooth" });
-    };
-    const handleScrollLeft = () => {
-        if (wrapperRef.current)
-            wrapperRef.current.scrollTo({ left: 0, behavior: "smooth" });
-    };
-    useEffect(() => {
-        if (wrapperRef.current) {
-            setCanScrollRight(wrapperRef.current.scrollWidth > wrapperRef.current.clientWidth); // initiate scroll
-        }
-    }, []);
-    return (_jsx("div", { className: styles.container, children: _jsxs("div", { onScroll: handleScroll, ref: wrapperRef, className: styles.wrapper, children: [canScrollLeft && (_jsx("div", { onClick: handleScrollLeft, className: styles.scrollLeftButton, children: _jsx("div", { className: styles.scrollButton, children: _jsx(FontAwesomeIcon, { icon: faChevronLeft }) }) })), children, canScrollRight && (_jsx("div", { onClick: handleScrollRight, className: styles.scrollRightButton, children: _jsx("div", { className: styles.scrollButton, children: _jsx(FontAwesomeIcon, { icon: faChevronRight }) }) }))] }) }));
-};

package/lib/components/tableWrapper/TableWrapper.module.css

@@ -1,67 +0,0 @@
-:root {
-  --conduction-table-wrapper-scroll-button-background-color: #ffffff;
-  --conduction-table-wrapper-scroll-button-color: #000000;
-  --conduction-table-wrapper-scroll-button-padding-inline-start: 14px;
-  --conduction-table-wrapper-scroll-button-padding-inline-end: 14px;
-  /* --conduction-table-wrapper-scroll-button-padding-block-start: 10px; */
-  /* --conduction-table-wrapper-scroll-button-padding-block-end: 10px; */
-  /* --conduction-table-wrapper-scroll-button-border-color: 1px; */
-  /* --conduction-table-wrapper-scroll-button-border-color: solid; */
-  /* --conduction-table-wrapper-scroll-button-border-color: #000000; */
-
-  --conduction-table-wrapper-scroll-button-hover-background-color: #ffffff;
-  --conduction-table-wrapper-scroll-button-hover-color: #4376fc;
-}
-.container {
-  position: relative;
-}
-
-.wrapper,
-.wrapperTouchscreen {
-  overflow-x: scroll;
-}
-
-.scrollRightButton,
-.scrollLeftButton {
-  top: 0%;
-  position: absolute;
-  display: flex;
-  height: 100%;
-  background-color: var(--conduction-table-wrapper-scroll-button-background-color);
-  color: var(--conduction-table-wrapper-scroll-button-color);
-  padding-inline-start: var(--conduction-table-wrapper-scroll-button-padding-inline-start);
-  padding-inline-end: var(--conduction-table-wrapper-scroll-button-padding-inline-end);
-  padding-block-start: var(--conduction-table-wrapper-scroll-button-padding-block-start);
-  padding-block-end: var(--conduction-table-wrapper-scroll-button-padding-block-end);
-  border-width: var(--conduction-table-wrapper-scroll-button-border-width);
-  border-style: var(--conduction-table-wrapper-scroll-button-border-style);
-  border-color: var(--conduction-table-wrapper-scroll-button-border-color);
-}
-
-.scrollLeftButton:hover,
-.scrollRightButton:hover {
-  background-color: var(--conduction-table-wrapper-scroll-button-hover-background-color);
-  color: var(--conduction-table-wrapper-scroll-button-hover-color);
-  cursor: pointer;
-}
-
-.scrollRightButton {
-  right: 0;
-}
-
-.scrollLeftButton {
-  left: 0;
-}
-
-.scrollButton {
-  align-self: center;
-}
-
-/* Hide scrollbar */
-.wrapper::-webkit-scrollbar {
-  display: none;
-}
-.wrapper {
-  -ms-overflow-style: none;
-  scrollbar-width: none;
-}