feat: process steps component

nl-design-system · May 3, 2022 · 1f693cd · 1f693cd
1 parent f8bf4de
commit 1f693cd
Show file tree

Hide file tree

Showing 8 changed files with 583 additions and 4 deletions.
diff --git a/.stylelintrc.json b/.stylelintrc.json
@@ -11,8 +11,8 @@
     "scss/percent-placeholder-pattern": "^(example|utrecht)-[a-z0-9-]+$",
     "scss/operator-no-newline-after": null,
     "scss/at-extend-no-missing-placeholder": null,
-    "custom-property-pattern": "^(example|utrecht)-[a-z0-9-]+$",
-    "selector-class-pattern": "^(example|utrecht)-[a-z0-9_-]+$",
+    "custom-property-pattern": "^(example|denhaag|utrecht)-[a-z0-9-]+$",
+    "selector-class-pattern": "^(example|denhaag|utrecht)-[a-z0-9_-]+$",
     "keyframes-name-pattern": "^(example|utrecht)-[a-z0-9-]+$",
     "at-rule-no-unknown": null,
     "block-no-empty": [true],

diff --git a/components/process-steps/README.md b/components/process-steps/README.md
@@ -0,0 +1,21 @@
+<!-- @license CC0-1.0 -->
+
+# Process Steps
+
+Deze component is gebaseerd op de white-label component die bij Gemeente Den Haag is ontwikkeld. Als je een verandering wilt doorvoeren in bijvoorbeeld de CSS, dan kun je terecht in de [Git repository van Den Haag](https://github.com/nl-design-system/denhaag) met hun NL Design System componenten.
+
+Gemeente Utrecht heeft de design tokens aangepast op de eigen huisstijl.
+
+## BEM anatomie
+
+BEM block: `.denhaag-process-steps`
+
+BEM elementen:
+
+- _Step list_: `.denhaag-process-steps` (root of component)
+- _Step_ (1 of meerdere): `.denhaag-process-steps__step`
+- _Step header_: `.denhaag-process-steps__header`
+- _Step marker_: `.denhaag-process-steps__marker`
+- _Sub step list_: `.denhaag-process-steps__sub-step-list`
+- _Sub step_ (1 of meerdere): `.denhaag-process-steps__sub-step`
+- _Sub step marker_: `.denhaag-process-steps__sub-step-marker`
diff --git a/components/process-steps/react.jsx b/components/process-steps/react.jsx
@@ -0,0 +1,96 @@
+import {
+  Step,
+  StepExpandedIcon,
+  StepHeader,
+  StepHeading,
+  StepList,
+  StepMarker,
+  StepSection,
+  SubStep,
+  SubStepHeading,
+  SubStepList,
+  SubStepMarker,
+} from '@gemeente-denhaag/process-steps';
+import React from 'react';
+
+export const CheckedIcon = () => (
+  <svg
+    xmlns="http://www.w3.org/2000/svg"
+    width="1em"
+    height="1em"
+    viewBox="0 0 24 24"
+    className="denhaag-icon"
+    focusable="false"
+    aria-hidden="true"
+    shapeRendering="auto"
+  >
+    <path
+      d="M20.664 5.253a1 1 0 01.083 1.411l-10.666 12a1 1 0 01-1.495 0l-5.333-6a1 1 0 011.494-1.328l4.586 5.159 9.92-11.16a1 1 0 011.411-.082z"
+      stroke="currentColor"
+      strokeWidth="1.75"
+    ></path>
+  </svg>
+);
+
+export const ProcessSteps = () => (
+  <StepList>
+    <Step checked expanded>
+      <StepSection>
+        <StepHeader>
+          <StepMarker>
+            <div>1</div>
+          </StepMarker>
+          <StepHeading>Deelname aan geluidsonderzoek</StepHeading>
+          <StepExpandedIcon />
+        </StepHeader>
+      </StepSection>
+      <SubStepList>
+        <SubStep>
+          <SubStepMarker />
+          <SubStepHeading>Aanmelding ontvangen</SubStepHeading>
+        </SubStep>
+      </SubStepList>
+    </Step>
+    <Step current expanded>
+      <StepSection>
+        <StepHeader>
+          <StepMarker>
+            <div>2</div>
+          </StepMarker>
+          <StepHeading>Onderzoek naar geluidsoverlast</StepHeading>
+          <StepExpandedIcon />
+        </StepHeader>
+      </StepSection>
+      <SubStepList>
+        <SubStep>
+          <SubStepMarker />
+          <SubStepHeading>Afspraak meten geluidsoverlast gemaakt</SubStepHeading>
+        </SubStep>
+        <SubStep>
+          <SubStepMarker />
+          <SubStepHeading>Geluidsoverlast gemeten</SubStepHeading>
+        </SubStep>
+        <SubStep>
+          <SubStepMarker />
+          <SubStepHeading>Onderzoek resultaten verwerkt</SubStepHeading>
+        </SubStep>
+      </SubStepList>
+    </Step>
+    <Step>
+      <StepSection>
+        <StepHeader>
+          <StepMarker>3</StepMarker>
+          <StepHeading>Uitvoeren van maatregelen</StepHeading>
+        </StepHeader>
+      </StepSection>
+    </Step>
+    <Step>
+      <StepSection>
+        <StepHeader>
+          <StepMarker>4</StepMarker>
+          <StepHeading>Maatregelen zijn uitgevoerd</StepHeading>
+        </StepHeader>
+      </StepSection>
+    </Step>
+  </StepList>
+);
diff --git a/components/process-steps/react.stories.mdx b/components/process-steps/react.stories.mdx
@@ -0,0 +1,29 @@
+<!-- @license CC0-1.0 -->
+
+import { ArgsTable, Canvas, Meta, Story } from "@storybook/addon-docs";
+import { ProcessSteps } from "./react.jsx";
+import "@gemeente-denhaag/process-steps/index.css";
+
+export const Template = (args) => <ProcessSteps {...args} />;
+
+<Meta
+  title="React Component/Process Steps"
+  argTypes={{}}
+  parameters={{
+    status: {
+      type: "WORK IN PROGRESS",
+    },
+  }}
+/>
+
+# Process steps
+
+<ProcessSteps />
+
+<Canvas>
+  <Story name="Process steps" args={{}}>
+    {Template.bind({})}
+  </Story>
+</Canvas>
+
+<ArgsTable story="Process steps" />
diff --git a/components/process-steps/readme.stories.mdx b/components/process-steps/readme.stories.mdx
@@ -0,0 +1,19 @@
+<!-- @license CC0-1.0 -->
+
+import { Description, Meta } from "@storybook/addon-docs";
+import { ComponentTokensSection } from "../../documentation/components/ComponentTokensSection";
+import tokens from "../../proprietary/design-tokens/dist/index.json";
+import document from "./README.md";
+import tokensDefinition from "./tokens.json";
+
+<Meta title="CSS Component/Process Steps/README" />
+
+<Description>{document}</Description>
+
+## Design Tokens
+
+<ComponentTokensSection
+  tokens={tokens}
+  definition={tokensDefinition}
+  component="denhaag-process-steps"
+></ComponentTokensSection>