@conduction/components 2.1.31 → 2.1.32

package/README.md

@@ -4,6 +4,7 @@
 
 - **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.

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/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.31",
+  "version": "2.1.32",
   "description": "React (Gatsby) components used within the Conduction Skeleton Application (and its implementations)",
   "main": "lib/index.js",
   "scripts": {
@@ -28,6 +28,7 @@
     "@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",
@@ -39,7 +40,7 @@
     "@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",
@@ -47,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/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/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>
-  );
-};