@navikt/ds-react 0.14.3 → 0.14.7
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/cjs/form/Select.js +1 -1
- package/cjs/form/Switch.js +15 -4
- package/cjs/index.js +1 -0
- package/cjs/link-panel/LinkPanel.js +1 -1
- package/cjs/step-indicator/Step.js +62 -0
- package/cjs/step-indicator/StepIndicator.js +76 -0
- package/cjs/step-indicator/index.js +19 -0
- package/cjs/step-indicator/package.json +6 -0
- package/esm/form/Select.js +1 -1
- package/esm/form/Select.js.map +1 -1
- package/esm/form/Switch.d.ts +4 -0
- package/esm/form/Switch.js +16 -5
- package/esm/form/Switch.js.map +1 -1
- package/esm/index.d.ts +1 -0
- package/esm/index.js +1 -0
- package/esm/index.js.map +1 -1
- package/esm/link-panel/LinkPanel.js +1 -1
- package/esm/link-panel/LinkPanel.js.map +1 -1
- package/esm/step-indicator/Step.d.ts +20 -0
- package/esm/step-indicator/Step.js +39 -0
- package/esm/step-indicator/Step.js.map +1 -0
- package/esm/step-indicator/StepIndicator.d.ts +41 -0
- package/esm/step-indicator/StepIndicator.js +52 -0
- package/esm/step-indicator/StepIndicator.js.map +1 -0
- package/esm/step-indicator/index.d.ts +2 -0
- package/esm/step-indicator/index.js +3 -0
- package/esm/step-indicator/index.js.map +1 -0
- package/package.json +5 -5
- package/src/form/Select.tsx +1 -1
- package/src/form/Switch.tsx +65 -6
- package/src/form/stories/switch.stories.mdx +73 -3
- package/src/form/stories/switch.stories.tsx +27 -1
- package/src/index.ts +1 -0
- package/src/link-panel/LinkPanel.tsx +1 -4
- package/src/step-indicator/Step.tsx +79 -0
- package/src/step-indicator/StepIndicator.tsx +145 -0
- package/src/step-indicator/index.ts +2 -0
- package/src/step-indicator/stories/Example.tsx +23 -0
- package/src/step-indicator/stories/step-indicator.stories.mdx +122 -0
- package/src/step-indicator/stories/step-indicator.stories.tsx +104 -0
|
@@ -0,0 +1,104 @@
|
|
|
1
|
+
import React, { useState } from "react";
|
|
2
|
+
import StepIndicator from "../StepIndicator";
|
|
3
|
+
import { Meta } from "@storybook/react/types-6-0";
|
|
4
|
+
import { Link, HashRouter as Router, useLocation } from "react-router-dom";
|
|
5
|
+
|
|
6
|
+
export default {
|
|
7
|
+
title: "ds-react/step-indicator",
|
|
8
|
+
component: StepIndicator,
|
|
9
|
+
} as Meta;
|
|
10
|
+
|
|
11
|
+
export const All = () => {
|
|
12
|
+
const [activeStep, setActiveStep] = useState(1);
|
|
13
|
+
return (
|
|
14
|
+
<div>
|
|
15
|
+
<StepIndicator activeStep={1} onStepChange={console.log}>
|
|
16
|
+
<StepIndicator.Step>Steg nr 1</StepIndicator.Step>
|
|
17
|
+
<StepIndicator.Step>Laborum velit eu magna esse</StepIndicator.Step>
|
|
18
|
+
<StepIndicator.Step>test</StepIndicator.Step>
|
|
19
|
+
</StepIndicator>
|
|
20
|
+
<br />
|
|
21
|
+
|
|
22
|
+
<StepIndicator activeStep={1} onStepChange={console.log}>
|
|
23
|
+
<StepIndicator.Step href="#" as="a">
|
|
24
|
+
1
|
|
25
|
+
</StepIndicator.Step>
|
|
26
|
+
<StepIndicator.Step href="#" as="a">
|
|
27
|
+
2
|
|
28
|
+
</StepIndicator.Step>
|
|
29
|
+
<StepIndicator.Step href="#" as="a">
|
|
30
|
+
3
|
|
31
|
+
</StepIndicator.Step>
|
|
32
|
+
</StepIndicator>
|
|
33
|
+
<br />
|
|
34
|
+
<StepIndicator activeStep={activeStep} onStepChange={setActiveStep}>
|
|
35
|
+
<StepIndicator.Step disabled>
|
|
36
|
+
Pariatur pariatur adipisicing reprehenderit ad occaecat reprehenderit
|
|
37
|
+
ut dolore.
|
|
38
|
+
</StepIndicator.Step>
|
|
39
|
+
<StepIndicator.Step>Laborum velit eu magna esse</StepIndicator.Step>
|
|
40
|
+
<StepIndicator.Step disabled>
|
|
41
|
+
Cupidatat Lorem do nostrud ut eu.
|
|
42
|
+
</StepIndicator.Step>
|
|
43
|
+
<StepIndicator.Step>test</StepIndicator.Step>
|
|
44
|
+
<StepIndicator.Step>
|
|
45
|
+
Voluptate pariatur ut est voluptate elit officia excepteur laborum.
|
|
46
|
+
</StepIndicator.Step>
|
|
47
|
+
</StepIndicator>
|
|
48
|
+
<br />
|
|
49
|
+
<StepIndicator
|
|
50
|
+
activeStep={activeStep}
|
|
51
|
+
onStepChange={setActiveStep}
|
|
52
|
+
hideLabels
|
|
53
|
+
>
|
|
54
|
+
<StepIndicator.Step>
|
|
55
|
+
Pariatur pariatur adipisicing reprehenderit ad occaecat reprehenderit
|
|
56
|
+
ut dolore.
|
|
57
|
+
</StepIndicator.Step>
|
|
58
|
+
<StepIndicator.Step>Laborum velit eu magna esse</StepIndicator.Step>
|
|
59
|
+
<StepIndicator.Step disabled>
|
|
60
|
+
Cupidatat Lorem do nostrud ut eu.
|
|
61
|
+
</StepIndicator.Step>
|
|
62
|
+
<StepIndicator.Step>test</StepIndicator.Step>
|
|
63
|
+
<StepIndicator.Step>
|
|
64
|
+
Voluptate pariatur ut est voluptate elit officia excepteur laborum.
|
|
65
|
+
</StepIndicator.Step>
|
|
66
|
+
</StepIndicator>
|
|
67
|
+
</div>
|
|
68
|
+
);
|
|
69
|
+
};
|
|
70
|
+
|
|
71
|
+
export const ReactRouter = () => {
|
|
72
|
+
const { pathname } = useLocation();
|
|
73
|
+
|
|
74
|
+
return (
|
|
75
|
+
<StepIndicator
|
|
76
|
+
activeStep={
|
|
77
|
+
{
|
|
78
|
+
"/": 0,
|
|
79
|
+
"/first": 0,
|
|
80
|
+
"/second": 1,
|
|
81
|
+
"/third": 2,
|
|
82
|
+
}[pathname]
|
|
83
|
+
}
|
|
84
|
+
>
|
|
85
|
+
<StepIndicator.Step as={Link} to="/first">
|
|
86
|
+
Steg nr 1
|
|
87
|
+
</StepIndicator.Step>
|
|
88
|
+
<StepIndicator.Step as={Link} to="/second">
|
|
89
|
+
Laborum velit eu magna esse
|
|
90
|
+
</StepIndicator.Step>
|
|
91
|
+
<StepIndicator.Step as={Link} to="/third">
|
|
92
|
+
test
|
|
93
|
+
</StepIndicator.Step>
|
|
94
|
+
</StepIndicator>
|
|
95
|
+
);
|
|
96
|
+
};
|
|
97
|
+
|
|
98
|
+
ReactRouter.decorators = [
|
|
99
|
+
(Story) => (
|
|
100
|
+
<Router>
|
|
101
|
+
<Story />
|
|
102
|
+
</Router>
|
|
103
|
+
),
|
|
104
|
+
];
|