@conduction/components 2.1.30 → 2.1.32

package/README.md

@@ -4,6 +4,8 @@
 
 - **Version 2.1 (breaking changes from 2.0.x)**
 
+  - 2.1.32: Add inline-padding to container, remove redundant (breaking and unused) components, up React version.
+  - 2.1.31: Removed Den Haag implementations which hold shapeRendering warnings.
   - 2.1.29/2.1.30: Added optional menuPlacement to all select elements.
   - 2.1.28: Fixed PrimaryTopNav dropdown token and added new features for dropdown.
   - 2.1.27: TimeFormat in DatePicker is now consistant with DateFormat.

package/lib/components/card/detailsCard/DetailsCard.js

@@ -1,10 +1,11 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import * as styles from "./DetailsCard.module.css";
+import { Link } from "@utrecht/component-library-react/dist/css-module";
 import clsx from "clsx";
-import { Link } from "@gemeente-denhaag/link";
 import { navigate } from "gatsby";
-import { ArrowRightIcon } from "@gemeente-denhaag/icons";
 import { Tag } from "../../tag/Tag";
+import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
+import { faArrowRight } from "@fortawesome/free-solid-svg-icons";
 export const DetailsCard = ({ title, subHeader, introduction, link, tags, layoutClassName, }) => {
-    return (_jsx("div", { className: clsx(styles.container, [layoutClassName && layoutClassName]), onClick: () => navigate(link.href), children: _jsxs("div", { className: styles.content, children: [_jsxs("div", { children: [_jsx("div", { className: styles.title, children: title }), _jsx("span", { className: styles.subHeader, children: subHeader })] }), tags && (_jsx("div", { className: styles.tags, children: tags.map((tag, idx) => (_jsx(Tag, { label: tag }, idx))) })), _jsx("div", { className: styles.introduction, children: introduction }), _jsx("div", { className: styles.link, children: _jsx(Link, { icon: _jsx(ArrowRightIcon, {}), iconAlign: "start", children: link.label }) })] }) }));
+    return (_jsx("div", { className: clsx(styles.container, [layoutClassName && layoutClassName]), onClick: () => navigate(link.href), children: _jsxs("div", { className: styles.content, children: [_jsxs("div", { children: [_jsx("div", { className: styles.title, children: title }), _jsx("span", { className: styles.subHeader, children: subHeader })] }), tags && (_jsx("div", { className: styles.tags, children: tags.map((tag, idx) => (_jsx(Tag, { label: tag }, idx))) })), _jsx("div", { className: styles.introduction, children: introduction }), _jsx("div", { className: styles.link, children: _jsxs(Link, { onClick: () => navigate(link.href), children: [_jsx(FontAwesomeIcon, { className: styles.icon, icon: faArrowRight }), " ", link.label] }) })] }) }));
 };

package/lib/components/card/detailsCard/DetailsCard.module.css

@@ -1,6 +1,7 @@
 :root {
   --conduction-details-card-border: 1px solid var(--skeleton-color-grey-2);
   --conduction-details-card-introduction-lines-clamp: 3;
+  --conduction-details-card-icon-gap: 8px;
 }
 
 .container {
@@ -49,3 +50,7 @@
   display: flex;
   justify-content: flex-end;
 }
+
+.icon {
+  margin-inline-end: var(--conduction-details-card-icon-gap);
+}

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

@@ -1,8 +1,9 @@
 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/link";
+import { Link } from "@utrecht/component-library-react/dist/css-module";
 import clsx from "clsx";
+import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
+import { faDownload } from "@fortawesome/free-solid-svg-icons";
 export const DownloadCard = ({ icon, label, sizeKb, layoutClassName, downloadLabel, handleClick, }) => {
-    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("div", { onClick: handleClick, children: _jsx(Link, { icon: _jsx(DownloadIcon, {}), iconAlign: "start", children: downloadLabel }) })] }));
+    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)"] })] }), _jsxs(Link, { onClick: handleClick, children: [_jsx(FontAwesomeIcon, { className: styles.icon, icon: faDownload }), " ", downloadLabel] })] }));
 };

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

@@ -1,5 +1,7 @@
 :root {
   --conduction-download-card-border: 1px solid var(--skeleton-color-grey-2);
+  --conduction-download-card-icon-gap: 8px;
+  --conduction-download-card-padding: 14px;
 }
 
 .container {
@@ -8,7 +10,7 @@
   justify-content: space-between;
   border: var(--conduction-download-card-border);
   border-radius: var(--skeleton-border-radius-md);
-  padding-inline-end: var(--skeleton-size-sm);
+  padding: var(--conduction-download-card-padding);
 }
 
 .content {
@@ -21,7 +23,5 @@
 }
 
 .icon {
-  padding-inline: var(--skeleton-size-sm);
-  padding-block: var(--skeleton-size-sm);
-  background-color: var(--skeleton-color-grey-1);
+  margin-inline-end: var(--conduction-download-card-icon-gap);
 }

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

@@ -1,9 +1,10 @@
 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/link";
+import { Link } from "@utrecht/component-library-react/dist/css-module";
 import { navigate } from "gatsby";
-import { ArrowRightIcon } from "@gemeente-denhaag/icons";
+import { faArrowRight } from "@fortawesome/free-solid-svg-icons";
+import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
 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 }) })] })] }));
+    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: _jsxs(Link, { onClick: () => navigate(link.href), children: [_jsx(FontAwesomeIcon, { className: styles.icon, icon: faArrowRight }), " ", link.label] }) })] })] }));
 };

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

@@ -3,6 +3,7 @@
   --conduction-image-and-details-card-title-font-weight: bold;
   --conduction-image-and-details-card-introduction-lines-clamp: 3;
   --conduction-image-and-details-card-border: 1px solid var(--skeleton-color-grey-2);
+  --conduction-image-and-details-icon-gap: 8px;
 }
 
 .container {
@@ -61,3 +62,7 @@
   justify-content: flex-end;
   margin-block-start: auto;
 }
+
+.icon {
+  margin-inline-end: var(--conduction-image-and-details-icon-gap);
+}

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

@@ -1,9 +1,12 @@
 :root {
   --conduction-container-max-width: 1024px;
+  --conduction-container-padding-inline: unset;
 }
 
 .container {
   width: 100%;
   margin-inline: auto;
+  box-sizing: border-box;
+  padding-inline: var(--conduction-container-padding-inline);
   max-width: var(--conduction-container-max-width);
 }

package/lib/components/formFields/select/select.d.ts

@@ -1,5 +1,6 @@
 /// <reference types="react" />
 import { Control, FieldValues } from "react-hook-form";
+import { MenuPlacement } from "react-select";
 import { IReactHookFormProps } from "../types";
 interface ISelectProps {
     control: Control<FieldValues, any>;
@@ -13,7 +14,7 @@ interface ISelectProps {
     disabled?: boolean;
     isClearable?: boolean;
     hideErrorMessage?: boolean;
-    menuPlacement?: "auto" | "bottom" | "top";
+    menuPlacement?: MenuPlacement;
 }
 export declare const SelectMultiple: ({ id, name, options, errors, control, validation, defaultValue, disabled, hideErrorMessage, menuPlacement, }: ISelectProps & IReactHookFormProps) => JSX.Element;
 export declare const SelectCreate: ({ id, name, options, errors, control, validation, defaultValue, disabled, hideErrorMessage, menuPlacement, }: ISelectProps & IReactHookFormProps) => JSX.Element;

package/lib/index.d.ts

@@ -8,7 +8,6 @@ import { ImageDivider } from "./components/imageDivider/ImageDivider";
 import { AuthenticatedLogo, UnauthenticatedLogo } from "./components/logo/Logo";
 import { MetaIcon } from "./components/metaIcon/MetaIcon";
 import { PrivateRoute } from "./components/privateRoute/PrivateRoute";
-import { StatusSteps } from "./components/statusSteps/StatusSteps";
 import { PrimaryTopNav, SecondaryTopNav } from "./components/topNav";
 import { Tag } from "./components/tag/Tag";
 declare const NotificationPopUp: {
@@ -24,4 +23,4 @@ import { Pagination } from "./components/denhaag-wrappers/pagination/Pagination"
 import { BadgeCounter } from "./components/badgeCounter/BadgeCounter";
 import { CodeBlock } from "./components/codeBlock/CodeBlock";
 import { ToolTip } from "./components/toolTip/ToolTip";
-export { InputRadio, DownloadCard, HorizontalImageCard, ImageAndDetailsCard, RichContentCard, DetailsCard, InfoCard, Container, Breadcrumbs, EditableTableRow, InputText, InputPassword, InputEmail, InputDate, InputNumber, InputFile, Textarea, InputCheckbox, SelectMultiple, SelectSingle, ImageDivider, AuthenticatedLogo, UnauthenticatedLogo, MetaIcon, PrivateRoute, StatusSteps, PrimaryTopNav, SecondaryTopNav, Tag, NotificationPopUp, QuoteWrapper, Pagination, BadgeCounter, CodeBlock, ToolTip, };
+export { InputRadio, DownloadCard, HorizontalImageCard, ImageAndDetailsCard, RichContentCard, DetailsCard, InfoCard, Container, Breadcrumbs, EditableTableRow, InputText, InputPassword, InputEmail, InputDate, InputNumber, InputFile, Textarea, InputCheckbox, SelectMultiple, SelectSingle, ImageDivider, AuthenticatedLogo, UnauthenticatedLogo, MetaIcon, PrivateRoute, PrimaryTopNav, SecondaryTopNav, Tag, NotificationPopUp, QuoteWrapper, Pagination, BadgeCounter, CodeBlock, ToolTip, };

package/lib/index.js

@@ -7,7 +7,6 @@ import { ImageDivider } from "./components/imageDivider/ImageDivider";
 import { AuthenticatedLogo, UnauthenticatedLogo } from "./components/logo/Logo";
 import { MetaIcon } from "./components/metaIcon/MetaIcon";
 import { PrivateRoute } from "./components/privateRoute/PrivateRoute";
-import { StatusSteps } from "./components/statusSteps/StatusSteps";
 import { PrimaryTopNav, SecondaryTopNav } from "./components/topNav";
 import { Tag } from "./components/tag/Tag";
 import { NotificationPopUpController, NotificationPopUp as _NotificationPopUp, } from "./components/notificationPopUp/NotificationPopUp";
@@ -17,4 +16,4 @@ import { Pagination } from "./components/denhaag-wrappers/pagination/Pagination"
 import { BadgeCounter } from "./components/badgeCounter/BadgeCounter";
 import { CodeBlock } from "./components/codeBlock/CodeBlock";
 import { ToolTip } from "./components/toolTip/ToolTip";
-export { InputRadio, DownloadCard, HorizontalImageCard, ImageAndDetailsCard, RichContentCard, DetailsCard, InfoCard, Container, Breadcrumbs, EditableTableRow, InputText, InputPassword, InputEmail, InputDate, InputNumber, InputFile, Textarea, InputCheckbox, SelectMultiple, SelectSingle, ImageDivider, AuthenticatedLogo, UnauthenticatedLogo, MetaIcon, PrivateRoute, StatusSteps, PrimaryTopNav, SecondaryTopNav, Tag, NotificationPopUp, QuoteWrapper, Pagination, BadgeCounter, CodeBlock, ToolTip, };
+export { InputRadio, DownloadCard, HorizontalImageCard, ImageAndDetailsCard, RichContentCard, DetailsCard, InfoCard, Container, Breadcrumbs, EditableTableRow, InputText, InputPassword, InputEmail, InputDate, InputNumber, InputFile, Textarea, InputCheckbox, SelectMultiple, SelectSingle, ImageDivider, AuthenticatedLogo, UnauthenticatedLogo, MetaIcon, PrivateRoute, PrimaryTopNav, SecondaryTopNav, Tag, NotificationPopUp, QuoteWrapper, Pagination, BadgeCounter, CodeBlock, ToolTip, };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@conduction/components",
-  "version": "2.1.30",
+  "version": "2.1.32",
   "description": "React (Gatsby) components used within the Conduction Skeleton Application (and its implementations)",
   "main": "lib/index.js",
   "scripts": {
@@ -24,21 +24,23 @@
     "@fortawesome/free-solid-svg-icons": "^6.2.0",
     "@fortawesome/react-fontawesome": "^0.2.0",
     "@gemeente-denhaag/button": "0.2.3-alpha.205",
-    "@gemeente-denhaag/link": "0.2.3-alpha.205",
-    "@gemeente-denhaag/divider": "0.2.3-alpha.205",
-    "@gemeente-denhaag/textfield": "0.2.3-alpha.205",
-    "@gemeente-denhaag/typography": "0.2.3-alpha.205",
-    "@gemeente-denhaag/stylesprovider": "0.1.1-alpha.222",
     "@gemeente-denhaag/design-tokens-components": "0.2.3-alpha.222",
+    "@gemeente-denhaag/divider": "0.2.3-alpha.205",
     "@gemeente-denhaag/form-field": "0.1.1-alpha.98",
     "@gemeente-denhaag/formcontrollabel": "0.2.3-alpha.222",
+    "@gemeente-denhaag/icons": "^0.2.3-alpha.317",
+    "@gemeente-denhaag/link": "0.2.3-alpha.205",
     "@gemeente-denhaag/process-steps": "0.1.0-alpha.51",
     "@gemeente-denhaag/sidenav": "0.1.0-alpha.40",
+    "@gemeente-denhaag/stylesprovider": "0.1.1-alpha.222",
     "@gemeente-denhaag/table": "0.1.1-alpha.123",
     "@gemeente-denhaag/textarea": "0.1.1-alpha.95",
+    "@gemeente-denhaag/textfield": "0.2.3-alpha.205",
+    "@gemeente-denhaag/typography": "0.2.3-alpha.205",
+    "@utrecht/component-library-react": "^1.0.0-alpha.319",
     "clsx": "^1.1.1",
     "gatsby": "^4.11.1",
-    "react": "^17.0.1",
+    "react": "^18.2.0",
     "react-datepicker": "^4.10.0",
     "react-hook-form": "7.29.0",
     "react-select": "5.3.2",
@@ -46,9 +48,9 @@
   },
   "devDependencies": {
     "@types/node": "^17.0.23",
-    "@types/react": "^17.0.43",
+    "@types/react": "^18.2.0",
     "@types/react-datepicker": "^4.8.0",
-    "@types/react-dom": "^17.0.14",
+    "@types/react-dom": "^18.2.0",
     "rimraf": "^4.4.0",
     "tsc-hooks": "^1.1.1",
     "typescript": "^4.6.3"

package/src/components/card/detailsCard/DetailsCard.module.css

@@ -1,6 +1,7 @@
 :root {
   --conduction-details-card-border: 1px solid var(--skeleton-color-grey-2);
   --conduction-details-card-introduction-lines-clamp: 3;
+  --conduction-details-card-icon-gap: 8px;
 }
 
 .container {
@@ -49,3 +50,7 @@
   display: flex;
   justify-content: flex-end;
 }
+
+.icon {
+  margin-inline-end: var(--conduction-details-card-icon-gap);
+}

package/src/components/card/detailsCard/DetailsCard.tsx

@@ -1,10 +1,11 @@
 import * as React from "react";
 import * as styles from "./DetailsCard.module.css";
+import { Link } from "@utrecht/component-library-react/dist/css-module";
 import clsx from "clsx";
-import { Link } from "@gemeente-denhaag/link";
 import { navigate } from "gatsby";
-import { ArrowRightIcon } from "@gemeente-denhaag/icons";
 import { Tag } from "../../tag/Tag";
+import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
+import { faArrowRight } from "@fortawesome/free-solid-svg-icons";
 
 interface DetailsCardProps {
   title: string;
@@ -46,8 +47,8 @@ export const DetailsCard = ({
         <div className={styles.introduction}>{introduction}</div>
 
         <div className={styles.link}>
-          <Link icon={<ArrowRightIcon />} iconAlign="start">
-            {link.label}
+          <Link onClick={() => navigate(link.href)}>
+            <FontAwesomeIcon className={styles.icon} icon={faArrowRight} /> {link.label}
           </Link>
         </div>
       </div>

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

@@ -1,5 +1,7 @@
 :root {
   --conduction-download-card-border: 1px solid var(--skeleton-color-grey-2);
+  --conduction-download-card-icon-gap: 8px;
+  --conduction-download-card-padding: 14px;
 }
 
 .container {
@@ -8,7 +10,7 @@
   justify-content: space-between;
   border: var(--conduction-download-card-border);
   border-radius: var(--skeleton-border-radius-md);
-  padding-inline-end: var(--skeleton-size-sm);
+  padding: var(--conduction-download-card-padding);
 }
 
 .content {
@@ -21,7 +23,5 @@
 }
 
 .icon {
-  padding-inline: var(--skeleton-size-sm);
-  padding-block: var(--skeleton-size-sm);
-  background-color: var(--skeleton-color-grey-1);
+  margin-inline-end: var(--conduction-download-card-icon-gap);
 }

package/src/components/card/downloadCard/DownloadCard.tsx

@@ -1,8 +1,9 @@
 import * as React from "react";
 import * as styles from "./DownloadCard.module.css";
-import { DownloadIcon } from "@gemeente-denhaag/icons";
-import { Link } from "@gemeente-denhaag/link";
+import { Link } from "@utrecht/component-library-react/dist/css-module";
 import clsx from "clsx";
+import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
+import { faDownload } from "@fortawesome/free-solid-svg-icons";
 
 interface DownloadCardProps {
   icon: JSX.Element;
@@ -30,11 +31,10 @@ export const DownloadCard = ({
           {label} ({sizeKb}kb)
         </div>
       </div>
-      <div onClick={handleClick}>
-        <Link icon={<DownloadIcon />} iconAlign="start">
-          {downloadLabel}
-        </Link>
-      </div>
+
+      <Link onClick={handleClick}>
+        <FontAwesomeIcon className={styles.icon} icon={faDownload} /> {downloadLabel}
+      </Link>
     </div>
   );
 };

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

@@ -3,6 +3,7 @@
   --conduction-image-and-details-card-title-font-weight: bold;
   --conduction-image-and-details-card-introduction-lines-clamp: 3;
   --conduction-image-and-details-card-border: 1px solid var(--skeleton-color-grey-2);
+  --conduction-image-and-details-icon-gap: 8px;
 }
 
 .container {
@@ -61,3 +62,7 @@
   justify-content: flex-end;
   margin-block-start: auto;
 }
+
+.icon {
+  margin-inline-end: var(--conduction-image-and-details-icon-gap);
+}

package/src/components/card/imageAndDetailsCard/ImageAndDetailsCard.tsx

@@ -1,9 +1,10 @@
 import * as React from "react";
 import * as styles from "./ImageAndDetailsCard.module.css";
 import clsx from "clsx";
-import { Link } from "@gemeente-denhaag/link";
+import { Link } from "@utrecht/component-library-react/dist/css-module";
 import { navigate } from "gatsby";
-import { ArrowRightIcon } from "@gemeente-denhaag/icons";
+import { faArrowRight } from "@fortawesome/free-solid-svg-icons";
+import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
 
 interface ImageAndDetailsCardProps {
   title: string;
@@ -39,8 +40,8 @@ export const ImageAndDetailsCard = ({
         <div className={styles.introduction}>{introduction}</div>
 
         <div className={styles.link}>
-          <Link icon={<ArrowRightIcon />} iconAlign="start">
-            {link.label}
+          <Link onClick={() => navigate(link.href)}>
+            <FontAwesomeIcon className={styles.icon} icon={faArrowRight} /> {link.label}
           </Link>
         </div>
       </div>

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

@@ -1,9 +1,12 @@
 :root {
   --conduction-container-max-width: 1024px;
+  --conduction-container-padding-inline: unset;
 }
 
 .container {
   width: 100%;
   margin-inline: auto;
+  box-sizing: border-box;
+  padding-inline: var(--conduction-container-padding-inline);
   max-width: var(--conduction-container-max-width);
 }

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

@@ -1,7 +1,7 @@
 import * as React from "react";
 import * as styles from "./select.module.css";
 import { Control, Controller, FieldValues } from "react-hook-form";
-import ReactSelect from "react-select";
+import ReactSelect, { MenuPlacement } from "react-select";
 import CreatableSelect from "react-select/creatable";
 import { IReactHookFormProps } from "../types";
 import clsx from "clsx";
@@ -16,7 +16,7 @@ interface ISelectProps {
   disabled?: boolean;
   isClearable?: boolean;
   hideErrorMessage?: boolean;
-  menuPlacement?: "auto" | "bottom" | "top";
+  menuPlacement?: MenuPlacement;
 }
 
 export const SelectMultiple = ({

package/src/index.ts

@@ -26,7 +26,6 @@ import { ImageDivider } from "./components/imageDivider/ImageDivider";
 import { AuthenticatedLogo, UnauthenticatedLogo } from "./components/logo/Logo";
 import { MetaIcon } from "./components/metaIcon/MetaIcon";
 import { PrivateRoute } from "./components/privateRoute/PrivateRoute";
-import { StatusSteps } from "./components/statusSteps/StatusSteps";
 import { PrimaryTopNav, SecondaryTopNav } from "./components/topNav";
 import { Tag } from "./components/tag/Tag";
 import {
@@ -66,7 +65,6 @@ export {
   UnauthenticatedLogo,
   MetaIcon,
   PrivateRoute,
-  StatusSteps,
   PrimaryTopNav,
   SecondaryTopNav,
   Tag,

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/src/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/src/components/statusSteps/StatusSteps.tsx

@@ -1,54 +0,0 @@
-import * as React from "react";
-import {
-  Step,
-  StepExpandedIcon,
-  StepHeader,
-  StepHeading,
-  StepList,
-  StepMarker,
-  StepSection,
-  SubStep,
-  SubStepHeading,
-  SubStepList,
-  SubStepMarker,
-} from "@gemeente-denhaag/process-steps";
-
-interface IStatusStep {
-  title: string;
-  checked?: boolean;
-  current?: boolean;
-  expanded?: boolean;
-  subSteps?: string[];
-}
-
-interface StatusStepsProps {
-  steps: IStatusStep[];
-}
-
-export const StatusSteps = ({ steps }: StatusStepsProps): JSX.Element => {
-  return (
-    <StepList>
-      {steps.map(({ title, checked, current, expanded, subSteps }, idx) => (
-        <Step key={idx} {...{ checked, current, expanded }}>
-          <StepSection>
-            <StepHeader>
-              <StepMarker>{idx + 1}</StepMarker>
-              <StepHeading>{title}</StepHeading>
-              {subSteps && <StepExpandedIcon />}
-            </StepHeader>
-          </StepSection>
-          {subSteps && (
-            <SubStepList>
-              {subSteps.map((subStep: string) => (
-                <SubStep key={idx}>
-                  <SubStepMarker />
-                  <SubStepHeading>{subStep}</SubStepHeading>
-                </SubStep>
-              ))}
-            </SubStepList>
-          )}
-        </Step>
-      ))}
-    </StepList>
-  );
-};