Skip to content

Commit 0778345

Browse files
JaanesenJaanesen
authored
Merge pull request #68 from miljodir/Stepper-component
Stepper component
2 parents 53d986e + 2db2824 commit 0778345

File tree

10 files changed

+547
-22
lines changed

10 files changed

+547
-22
lines changed

‎packages/css/package.json

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
{
22
"name": "@miljodirektoratet/md-css",
3-
"version": "1.0.23",
3+
"version": "1.0.24",
44
"description": "CSS for Miljødirektoratet",
55
"author": "Miljødirektoratet",
66
"main": "./src/index.css",

‎packages/css/src/index.css

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -8,6 +8,7 @@
88
@import './filelist/filelist.css';
99
@import './accordionitem/accordionitem.css';
1010
@import './modal/modal.css';
11+
@import './stepper/stepper.css';
1112
@import './tile/tile.css';
1213
@import './tabs/tabs.css';
1314
@import './loadingSpinner/loadingSpinner.css';

‎packages/css/src/modal/README.md

Lines changed: 15 additions & 20 deletions
Original file line numberDiff line numberDiff line change
@@ -8,37 +8,32 @@ See [Storybook](https://miljodir.github.io/md-components) for examples and more
88

99
```html
1010
<div>
11-
<div class="md-modal__overlay"></div>
12-
<div class="md-modal [md-modal--open, md-modal--error]">
13-
<div
14-
class="md-modal__content"
15-
>
16-
<!--
11+
<div class="md-modal__overlay"></div>
12+
<div class="md-modal [md-modal--open, md-modal--error]">
13+
<div class="md-modal__content">
14+
<!--
1715
This is a wrapper component for handling close when click outside.
1816
Use the react-component, or your own wrapper, just remeber the `md-modal__inner-wrapper` class
1917
-->
20-
<MdClickOutsideWrapper
21-
class="md-modal__inner-wrapper"
22-
>
18+
<MdClickOutsideWrapper class="md-modal__inner-wrapper">
2319
<div class="md-modal__header">
24-
<div>{heading}</div>
25-
<button
26-
class="md-modal__close-button"
27-
>
28-
<MdXIcon class="md-modal__close-button-icon" /> <!-- Icon for close-button, use the react icon from Miljødir, or you own -->
29-
</button>
20+
<div>{heading}</div>
21+
<button class="md-modal__close-button">
22+
<MdXIcon class="md-modal__close-button-icon" />
23+
<!-- Icon for close-button, use the react icon from Miljødir, or you own -->
24+
</button>
3025
</div>
31-
<div class="md-modal__content-inner">
32-
MODAL CONTENT GOES HERE
33-
</div>
34-
</MdClickOutsideWrapper>
35-
</div>
26+
<div class="md-modal__content-inner">MODAL CONTENT GOES HERE</div>
27+
</MdClickOutsideWrapper>
3628
</div>
29+
</div>
3730
</div>
3831
```
3932

4033
## Z-index
34+
4135
This component uses z-index to place itself as the top layer in the viewport. The default z-indexes are:
36+
4237
- `md-modal`: 900
4338
- `md-model__overlay`: 800
4439

‎packages/css/src/stepper/README.md

Lines changed: 36 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,36 @@
1+
# Structure
2+
3+
To use the `Stepper` css in `@miljodirektoratet/md-css` as a standalone, without the accompanying React component, please use the following HTML structure.
4+
5+
Class names in brackets [] are optional-/togglable-/decorator- or state dependant classes.
6+
7+
See [Storybook](https://miljodir.github.io/md-components) for examples and more info.
8+
9+
```html
10+
<div>
11+
<div class="md-stepper__stepper-container">
12+
<div class="md-stepper__stepper-list">
13+
<!-- Start of step -->
14+
<div class="md-stepper__stepper-list-item">
15+
<div class="md-stepper__step-title">
16+
<div class="md-stepper__step-title-badge-outer-border">
17+
<div class="md-stepper__step-title-badge [completed, selected, disabled]">
18+
[<MdCheckIcon width="{18}" />, index+1]
19+
<!-- Icon for checkmark, or the current steps number -->
20+
</div>
21+
</div>
22+
<h4 class="md-stepper__completed">{step-title}</h4>
23+
</div>
24+
<div class="md-stepper__step-content-container">
25+
<div class="md-stepper__step-content-sideline"></div>
26+
<div class="md-stepper__step-content-children [completed, selected, disabled]">
27+
STEP CONTENT GOES HERE
28+
<!-- Choose what to show -->
29+
</div>
30+
</div>
31+
</div>
32+
<!-- End of step, add as many of these as you want -->
33+
</div>
34+
</div>
35+
</div>
36+
```

‎packages/css/src/stepper/stepper.css

Lines changed: 156 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,156 @@
1+
.md-stepper__stepper-container {
2+
padding-top: 40px;
3+
}
4+
5+
.md-stepper__stepper-container .md-stepper__stepper-list {
6+
display: flex;
7+
flex-direction: column;
8+
gap: 32px;
9+
}
10+
11+
.md-stepper__stepper-container .md-stepper__stepper-list .md-stepper__stepper-list-item .md-stepper__step-title {
12+
display: flex;
13+
flex-direction: row;
14+
gap: 16px;
15+
}
16+
.md-stepper__stepper-container .md-stepper__stepper-list .md-stepper__stepper-list-item .md-stepper__step-title h4 {
17+
font-family: 'SofiaPro-Regular' !important;
18+
font-size: 20px;
19+
font-weight: 400;
20+
line-height: 24px;
21+
letter-spacing: 0em;
22+
text-align: left;
23+
margin: 0;
24+
25+
height: 40px;
26+
27+
display: flex;
28+
align-items: center;
29+
}
30+
.md-stepper__stepper-container
31+
.md-stepper__stepper-list
32+
.md-stepper__stepper-list-item
33+
.md-stepper__step-title
34+
h4.md-stepper__disabled {
35+
color: var(--mdGreyColor60);
36+
}
37+
38+
.md-stepper__stepper-container
39+
.md-stepper__stepper-list
40+
.md-stepper__stepper-list-item
41+
.md-stepper__step-title
42+
h4.md-stepper__completed {
43+
color: var(--mdGreyColor80);
44+
}
45+
46+
.md-stepper__stepper-container
47+
.md-stepper__stepper-list
48+
.md-stepper__stepper-list-item
49+
.md-stepper__step-title
50+
.md-stepper__step-title-badge-outer-border {
51+
width: 36px;
52+
height: 36px;
53+
display: flex;
54+
justify-content: center;
55+
align-items: center;
56+
}
57+
.md-stepper__stepper-container
58+
.md-stepper__stepper-list
59+
.md-stepper__stepper-list-item
60+
.md-stepper__step-title
61+
.md-stepper__step-title-badge-outer-border.selected {
62+
border-radius: 50%;
63+
border: 1px solid var(--mdPrimaryColor80);
64+
background-color: var(--mdPrimaryColor20);
65+
}
66+
67+
.md-stepper__stepper-container
68+
.md-stepper__stepper-list
69+
.md-stepper__stepper-list-item
70+
.md-stepper__step-title
71+
.md-stepper__step-title-badge {
72+
border-radius: 50%;
73+
font-family: Open Sans;
74+
font-size: 16px;
75+
font-weight: 600;
76+
line-height: 22px;
77+
letter-spacing: 0em;
78+
text-align: left;
79+
width: 28px;
80+
height: 28px;
81+
display: flex;
82+
justify-content: center;
83+
align-items: center;
84+
}
85+
.md-stepper__stepper-container
86+
.md-stepper__stepper-list
87+
.md-stepper__stepper-list-item
88+
.md-stepper__step-title
89+
.md-stepper__step-title-badge.completed {
90+
background-color: var(--mdPrimaryColor80);
91+
color: white;
92+
}
93+
94+
.md-stepper__stepper-container
95+
.md-stepper__stepper-list
96+
.md-stepper__stepper-list-item
97+
.md-stepper__step-title
98+
.md-stepper__step-title-badge.selected {
99+
background-color: var(--mdPrimaryColor);
100+
color: white;
101+
}
102+
103+
.md-stepper__stepper-container
104+
.md-stepper__stepper-list
105+
.md-stepper__stepper-list-item
106+
.md-stepper__step-title
107+
.md-stepper__step-title-badge.disabled {
108+
background-color: var(--mdGreyColor20);
109+
color: var(--mdGreyColor60);
110+
}
111+
112+
.md-stepper__stepper-container
113+
.md-stepper__stepper-list
114+
.md-stepper__stepper-list-item
115+
.md-stepper__step-content-container {
116+
display: flex;
117+
flex-direction: row;
118+
}
119+
120+
.md-stepper__stepper-container
121+
.md-stepper__stepper-list
122+
.md-stepper__stepper-list-item
123+
.md-stepper__step-content-container
124+
.md-stepper__step-content-sideline {
125+
width: 2px;
126+
height: auto;
127+
background-color: var(--mdPrimaryColor);
128+
margin-left: 17px;
129+
margin-right: 17px;
130+
margin-top: 8px;
131+
}
132+
133+
.md-stepper__stepper-container
134+
.md-stepper__stepper-list
135+
.md-stepper__stepper-list-item
136+
.md-stepper__step-content-container
137+
.md-stepper__step-content-sideline.disabled {
138+
background-color: var(--mdGreyColor20);
139+
}
140+
141+
.md-stepper__stepper-container
142+
.md-stepper__stepper-list
143+
.md-stepper__stepper-list-item
144+
.md-stepper__step-content-container
145+
.md-stepper__step-content-children {
146+
padding-left: 16px;
147+
padding-top: 16px;
148+
min-height: 24px;
149+
}
150+
.md-stepper__stepper-container
151+
.md-stepper__stepper-list
152+
.md-stepper__stepper-list-item
153+
.md-stepper__step-content-container
154+
.md-stepper__step-content-children.completed {
155+
color: var(--mdGreyColor80);
156+
}

‎packages/react/package.json

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
{
22
"name": "@miljodirektoratet/md-react",
3-
"version": "1.0.46",
3+
"version": "1.0.47",
44
"description": "React-komponenter for Miljødirektoratet",
55
"author": "Miljødirektoratet",
66
"main": "./dist/index.js",

‎packages/react/src/index.tsx

Lines changed: 6 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -115,6 +115,8 @@ import MdLoadingSpinner, { MdLoadingSpinnerProps } from './loadingSpinner/MdLoad
115115
import MdAlertMessage, { MdAlertMessageProps } from './messages/MdAlertMessage';
116116
import MdInfoBox, { MdInfoBoxProps } from './messages/MdInfoBox';
117117
import MdModal, { MdModalProps } from './modal/MdModal';
118+
import MdStep, { MdStepProps } from './stepper/MdStep';
119+
import MdStepper, { MdStepperProps } from './stepper/MdStepper';
118120
import MdTab, { MdTabProps } from './tabs/MdTab';
119121
import MdTabTitle, { MdTabTitleProps } from './tabs/MdTabTitle';
120122
import MdTabs, { MdTabsProps } from './tabs/MdTabs';
@@ -280,4 +282,8 @@ export {
280282
MdDataColumnRow,
281283
MdDataColumnRowValue,
282284
MdDataColumnRightAlignedContent,
285+
MdStepper,
286+
MdStep,
287+
MdStepProps,
288+
MdStepperProps,
283289
};

‎packages/react/src/stepper/MdStep.tsx

Lines changed: 13 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,13 @@
1+
import React from 'react';
2+
3+
export interface MdStepProps {
4+
title: string;
5+
children: React.ReactNode;
6+
completedContent?: React.ReactNode;
7+
}
8+
9+
const MdStep: React.FunctionComponent<MdStepProps> = ({ children }: MdStepProps) => {
10+
return <div>{children}</div>;
11+
};
12+
13+
export default MdStep;

0 commit comments

Comments
 (0)