Merge pull request #68 from miljodir/Stepper-component

Stepper component
miljodir · Jan 11, 2024 · 0778345 · 0778345
2 parents 53d986e + 2db2824
commit 0778345
Show file tree

Hide file tree

Showing 10 changed files with 547 additions and 22 deletions.
diff --git a/packages/css/package.json b/packages/css/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@miljodirektoratet/md-css",
-  "version": "1.0.23",
+  "version": "1.0.24",
   "description": "CSS for Miljødirektoratet",
   "author": "Miljødirektoratet",
   "main": "./src/index.css",

diff --git a/packages/css/src/index.css b/packages/css/src/index.css
@@ -8,6 +8,7 @@
 @import './filelist/filelist.css';
 @import './accordionitem/accordionitem.css';
 @import './modal/modal.css';
+@import './stepper/stepper.css';
 @import './tile/tile.css';
 @import './tabs/tabs.css';
 @import './loadingSpinner/loadingSpinner.css';

diff --git a/packages/css/src/modal/README.md b/packages/css/src/modal/README.md
@@ -8,37 +8,32 @@ See [Storybook](https://miljodir.github.io/md-components) for examples and more
 
 ```html
 <div>
-    <div class="md-modal__overlay"></div>
-    <div class="md-modal [md-modal--open, md-modal--error]">
-    <div
-        class="md-modal__content"
-    >
-        <!--
+  <div class="md-modal__overlay"></div>
+  <div class="md-modal [md-modal--open, md-modal--error]">
+    <div class="md-modal__content">
+      <!--
             This is a wrapper component for handling close when click outside.
             Use the react-component, or your own wrapper, just remeber the `md-modal__inner-wrapper` class
         -->
-        <MdClickOutsideWrapper
-            class="md-modal__inner-wrapper"
-        >
+      <MdClickOutsideWrapper class="md-modal__inner-wrapper">
         <div class="md-modal__header">
-            <div>{heading}</div>
-            <button
-                class="md-modal__close-button"
-            >
-                <MdXIcon class="md-modal__close-button-icon" /> <!-- Icon for close-button, use the react icon from Miljødir, or you own -->
-            </button>
+          <div>{heading}</div>
+          <button class="md-modal__close-button">
+            <MdXIcon class="md-modal__close-button-icon" />
+            <!-- Icon for close-button, use the react icon from Miljødir, or you own -->
+          </button>
         </div>
-        <div class="md-modal__content-inner">
-            MODAL CONTENT GOES HERE
-        </div>
-        </MdClickOutsideWrapper>
-    </div>
+        <div class="md-modal__content-inner">MODAL CONTENT GOES HERE</div>
+      </MdClickOutsideWrapper>
     </div>
+  </div>
 </div>
 ```
 
 ## Z-index
+
 This component uses z-index to place itself as the top layer in the viewport. The default z-indexes are:
+
 - `md-modal`: 900
 - `md-model__overlay`: 800
 

diff --git a/packages/css/src/stepper/README.md b/packages/css/src/stepper/README.md
@@ -0,0 +1,36 @@
+# Structure
+
+To use the `Stepper` css in `@miljodirektoratet/md-css` as a standalone, without the accompanying React component, please use the following HTML structure.
+
+Class names in brackets [] are optional-/togglable-/decorator- or state dependant classes.
+
+See [Storybook](https://miljodir.github.io/md-components) for examples and more info.
+
+```html
+<div>
+  <div class="md-stepper__stepper-container">
+    <div class="md-stepper__stepper-list">
+      <!--  Start of step -->
+      <div class="md-stepper__stepper-list-item">
+        <div class="md-stepper__step-title">
+          <div class="md-stepper__step-title-badge-outer-border">
+            <div class="md-stepper__step-title-badge [completed, selected, disabled]">
+              [<MdCheckIcon width="{18}" />, index+1]
+              <!-- Icon for checkmark, or the current steps number -->
+            </div>
+          </div>
+          <h4 class="md-stepper__completed">{step-title}</h4>
+        </div>
+        <div class="md-stepper__step-content-container">
+          <div class="md-stepper__step-content-sideline"></div>
+          <div class="md-stepper__step-content-children [completed, selected, disabled]">
+            STEP CONTENT GOES HERE
+            <!-- Choose what to show -->
+          </div>
+        </div>
+      </div>
+      <!--  End of step, add as many of these as you want -->
+    </div>
+  </div>
+</div>
+```
diff --git a/packages/css/src/stepper/stepper.css b/packages/css/src/stepper/stepper.css
@@ -0,0 +1,156 @@
+.md-stepper__stepper-container {
+    padding-top: 40px;
+}
+
+.md-stepper__stepper-container .md-stepper__stepper-list {
+    display: flex;
+    flex-direction: column;
+    gap: 32px;
+}
+
+.md-stepper__stepper-container .md-stepper__stepper-list .md-stepper__stepper-list-item .md-stepper__step-title {
+    display: flex;
+    flex-direction: row;
+    gap: 16px;
+}
+.md-stepper__stepper-container .md-stepper__stepper-list .md-stepper__stepper-list-item .md-stepper__step-title h4 {
+    font-family: 'SofiaPro-Regular' !important;
+    font-size: 20px;
+    font-weight: 400;
+    line-height: 24px;
+    letter-spacing: 0em;
+    text-align: left;
+    margin: 0;
+
+    height: 40px;
+
+    display: flex;
+    align-items: center;
+}
+.md-stepper__stepper-container
+    .md-stepper__stepper-list
+    .md-stepper__stepper-list-item
+    .md-stepper__step-title
+    h4.md-stepper__disabled {
+    color: var(--mdGreyColor60);
+}
+
+.md-stepper__stepper-container
+    .md-stepper__stepper-list
+    .md-stepper__stepper-list-item
+    .md-stepper__step-title
+    h4.md-stepper__completed {
+    color: var(--mdGreyColor80);
+}
+
+.md-stepper__stepper-container
+    .md-stepper__stepper-list
+    .md-stepper__stepper-list-item
+    .md-stepper__step-title
+    .md-stepper__step-title-badge-outer-border {
+    width: 36px;
+    height: 36px;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+}
+.md-stepper__stepper-container
+    .md-stepper__stepper-list
+    .md-stepper__stepper-list-item
+    .md-stepper__step-title
+    .md-stepper__step-title-badge-outer-border.selected {
+    border-radius: 50%;
+    border: 1px solid var(--mdPrimaryColor80);
+    background-color: var(--mdPrimaryColor20);
+}
+
+.md-stepper__stepper-container
+    .md-stepper__stepper-list
+    .md-stepper__stepper-list-item
+    .md-stepper__step-title
+    .md-stepper__step-title-badge {
+    border-radius: 50%;
+    font-family: Open Sans;
+    font-size: 16px;
+    font-weight: 600;
+    line-height: 22px;
+    letter-spacing: 0em;
+    text-align: left;
+    width: 28px;
+    height: 28px;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+}
+.md-stepper__stepper-container
+    .md-stepper__stepper-list
+    .md-stepper__stepper-list-item
+    .md-stepper__step-title
+    .md-stepper__step-title-badge.completed {
+    background-color: var(--mdPrimaryColor80);
+    color: white;
+}
+
+.md-stepper__stepper-container
+    .md-stepper__stepper-list
+    .md-stepper__stepper-list-item
+    .md-stepper__step-title
+    .md-stepper__step-title-badge.selected {
+    background-color: var(--mdPrimaryColor);
+    color: white;
+}
+
+.md-stepper__stepper-container
+    .md-stepper__stepper-list
+    .md-stepper__stepper-list-item
+    .md-stepper__step-title
+    .md-stepper__step-title-badge.disabled {
+    background-color: var(--mdGreyColor20);
+    color: var(--mdGreyColor60);
+}
+
+.md-stepper__stepper-container
+    .md-stepper__stepper-list
+    .md-stepper__stepper-list-item
+    .md-stepper__step-content-container {
+    display: flex;
+    flex-direction: row;
+}
+
+.md-stepper__stepper-container
+    .md-stepper__stepper-list
+    .md-stepper__stepper-list-item
+    .md-stepper__step-content-container
+    .md-stepper__step-content-sideline {
+    width: 2px;
+    height: auto;
+    background-color: var(--mdPrimaryColor);
+    margin-left: 17px;
+    margin-right: 17px;
+    margin-top: 8px;
+}
+
+.md-stepper__stepper-container
+    .md-stepper__stepper-list
+    .md-stepper__stepper-list-item
+    .md-stepper__step-content-container
+    .md-stepper__step-content-sideline.disabled {
+    background-color: var(--mdGreyColor20);
+}
+
+.md-stepper__stepper-container
+    .md-stepper__stepper-list
+    .md-stepper__stepper-list-item
+    .md-stepper__step-content-container
+    .md-stepper__step-content-children {
+    padding-left: 16px;
+    padding-top: 16px;
+    min-height: 24px;
+}
+.md-stepper__stepper-container
+    .md-stepper__stepper-list
+    .md-stepper__stepper-list-item
+    .md-stepper__step-content-container
+    .md-stepper__step-content-children.completed {
+    color: var(--mdGreyColor80);
+}
diff --git a/packages/react/package.json b/packages/react/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@miljodirektoratet/md-react",
-  "version": "1.0.46",
+  "version": "1.0.47",
   "description": "React-komponenter for Miljødirektoratet",
   "author": "Miljødirektoratet",
   "main": "./dist/index.js",

diff --git a/packages/react/src/index.tsx b/packages/react/src/index.tsx
@@ -115,6 +115,8 @@ import MdLoadingSpinner, { MdLoadingSpinnerProps } from './loadingSpinner/MdLoad
 import MdAlertMessage, { MdAlertMessageProps } from './messages/MdAlertMessage';
 import MdInfoBox, { MdInfoBoxProps } from './messages/MdInfoBox';
 import MdModal, { MdModalProps } from './modal/MdModal';
+import MdStep, { MdStepProps } from './stepper/MdStep';
+import MdStepper, { MdStepperProps } from './stepper/MdStepper';
 import MdTab, { MdTabProps } from './tabs/MdTab';
 import MdTabTitle, { MdTabTitleProps } from './tabs/MdTabTitle';
 import MdTabs, { MdTabsProps } from './tabs/MdTabs';
@@ -280,4 +282,8 @@ export {
   MdDataColumnRow,
   MdDataColumnRowValue,
   MdDataColumnRightAlignedContent,
+  MdStepper,
+  MdStep,
+  MdStepProps,
+  MdStepperProps,
 };
diff --git a/packages/react/src/stepper/MdStep.tsx b/packages/react/src/stepper/MdStep.tsx
@@ -0,0 +1,13 @@
+import React from 'react';
+
+export interface MdStepProps {
+  title: string;
+  children: React.ReactNode;
+  completedContent?: React.ReactNode;
+}
+
+const MdStep: React.FunctionComponent<MdStepProps> = ({ children }: MdStepProps) => {
+  return <div>{children}</div>;
+};
+
+export default MdStep;