@progressive-development/pd-wizard 0.1.58 → 0.1.59
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/.storybook/main.js +12 -2
- package/.storybook/preview-head.html +35 -0
- package/.storybook/preview.js +14 -0
- package/package.json +23 -14
- package/src/PdSteps.js +0 -1
- package/src/PdWizard.js +111 -165
- package/{stories → src/stories}/index.stories.js +1 -1
- package/{stories → src/stories}/steps.stories.js +1 -1
- package/src/stories/wizard.stories.js +151 -0
- package/.storybook/server.mjs +0 -8
- package/stories/wizard.stories.js +0 -46
package/.storybook/main.js
CHANGED
|
@@ -1,3 +1,13 @@
|
|
|
1
|
-
|
|
2
|
-
|
|
1
|
+
/** @type { import('@storybook/web-components-vite').StorybookConfig } */
|
|
2
|
+
const config = {
|
|
3
|
+
stories: ['../src/**/*.mdx', '../src/**/*.stories.@(js|jsx|mjs|ts|tsx)'],
|
|
4
|
+
addons: ['@storybook/addon-links', '@storybook/addon-essentials'],
|
|
5
|
+
framework: {
|
|
6
|
+
name: '@storybook/web-components-vite',
|
|
7
|
+
options: {},
|
|
8
|
+
},
|
|
9
|
+
docs: {
|
|
10
|
+
autodocs: 'tag',
|
|
11
|
+
},
|
|
3
12
|
};
|
|
13
|
+
export default config;
|
|
@@ -0,0 +1,35 @@
|
|
|
1
|
+
|
|
2
|
+
<!-- .storybook/preview-head.html -->
|
|
3
|
+
|
|
4
|
+
<!-- Pull in static files served from your Static directory or the internet -->
|
|
5
|
+
<!-- Example: `main.js|ts` is configured with staticDirs: ['../public'] and your font is located in the `fonts` directory inside your `public` directory -->
|
|
6
|
+
<link rel="preconnect" href="https://fonts.gstatic.com">
|
|
7
|
+
<link href="https://fonts.googleapis.com/css2?family=Montserrat:wght@300;400&family=Oswald:wght@700&display=swap" rel="stylesheet">
|
|
8
|
+
|
|
9
|
+
<script>
|
|
10
|
+
// Redux assumes `process.env.NODE_ENV` exists in the ES module build.
|
|
11
|
+
// https://github.com/reactjs/redux/issues/2907
|
|
12
|
+
window.process = { env: { NODE_ENV: 'dev' } };
|
|
13
|
+
</script>
|
|
14
|
+
|
|
15
|
+
<style>
|
|
16
|
+
|
|
17
|
+
html,
|
|
18
|
+
body {
|
|
19
|
+
padding: 0;
|
|
20
|
+
margin: 0;
|
|
21
|
+
min-height: 100%;
|
|
22
|
+
height: 100%; /* !!! works only with both, height/min-height */
|
|
23
|
+
}
|
|
24
|
+
|
|
25
|
+
/* storybook internal, sets root to 100% height => only then wizard flex grow works here in story book #root, in older version*/
|
|
26
|
+
#root-inner, #storybook-root {
|
|
27
|
+
height: 100%;
|
|
28
|
+
}
|
|
29
|
+
|
|
30
|
+
/* storybook internal, sets padding to 0 */
|
|
31
|
+
.sb-show-main.sb-main-padded {
|
|
32
|
+
padding: 0;
|
|
33
|
+
}
|
|
34
|
+
|
|
35
|
+
</style>
|
|
@@ -0,0 +1,14 @@
|
|
|
1
|
+
/** @type { import('@storybook/web-components').Preview } */
|
|
2
|
+
const preview = {
|
|
3
|
+
parameters: {
|
|
4
|
+
actions: { argTypesRegex: '^on[A-Z].*' },
|
|
5
|
+
controls: {
|
|
6
|
+
matchers: {
|
|
7
|
+
color: /(background|color)$/i,
|
|
8
|
+
date: /Date$/i,
|
|
9
|
+
},
|
|
10
|
+
},
|
|
11
|
+
},
|
|
12
|
+
};
|
|
13
|
+
|
|
14
|
+
export default preview;
|
package/package.json
CHANGED
|
@@ -14,7 +14,7 @@
|
|
|
14
14
|
"order",
|
|
15
15
|
"steps"
|
|
16
16
|
],
|
|
17
|
-
"version": "0.1.
|
|
17
|
+
"version": "0.1.59",
|
|
18
18
|
"main": "index.js",
|
|
19
19
|
"module": "index.js",
|
|
20
20
|
"scripts": {
|
|
@@ -24,37 +24,46 @@
|
|
|
24
24
|
"format": "eslint --ext .js,.html . --fix --ignore-path .gitignore && prettier \"**/*.js\" --write --ignore-path .gitignore",
|
|
25
25
|
"test": "web-test-runner --coverage",
|
|
26
26
|
"test:watch": "web-test-runner --watch",
|
|
27
|
-
"storybook": "npm run analyze -- --exclude dist && web-dev-server -c .storybook/server.mjs",
|
|
28
|
-
"storybook:build": "npm run analyze -- --exclude dist && build-storybook",
|
|
29
27
|
"localizeExtract": "lit-localize extract",
|
|
30
|
-
"localizeBuild": "lit-localize build"
|
|
28
|
+
"localizeBuild": "lit-localize build",
|
|
29
|
+
"storybook": "storybook dev -p 6006",
|
|
30
|
+
"build-storybook": "storybook build"
|
|
31
31
|
},
|
|
32
32
|
"dependencies": {
|
|
33
|
-
"@lit/localize": "^0.11.
|
|
33
|
+
"@lit/localize": "^0.11.4",
|
|
34
34
|
"@progressive-development/pd-forms": "^0.2.8",
|
|
35
35
|
"@progressive-development/pd-icon": "^0.1.20",
|
|
36
36
|
"@progressive-development/pd-shared-styles": "0.1.1",
|
|
37
|
-
"lit": "^2.
|
|
37
|
+
"lit": "^2.8.0"
|
|
38
38
|
},
|
|
39
39
|
"devDependencies": {
|
|
40
40
|
"@custom-elements-manifest/analyzer": "^0.4.17",
|
|
41
|
-
"@lit/localize-tools": "^0.6.
|
|
41
|
+
"@lit/localize-tools": "^0.6.10",
|
|
42
42
|
"@open-wc/eslint-config": "^4.3.0",
|
|
43
|
-
"@open-wc/testing": "
|
|
44
|
-
"@
|
|
45
|
-
"@
|
|
46
|
-
"@
|
|
43
|
+
"@open-wc/testing": "^3.2.2",
|
|
44
|
+
"@storybook/addon-essentials": "^7.6.4",
|
|
45
|
+
"@storybook/addon-links": "^7.6.4",
|
|
46
|
+
"@storybook/blocks": "^7.6.4",
|
|
47
|
+
"@storybook/web-components": "^7.6.4",
|
|
48
|
+
"@storybook/web-components-vite": "^7.6.4",
|
|
49
|
+
"@web/dev-server": "^0.1.38",
|
|
50
|
+
"@web/test-runner": "^0.13.31",
|
|
47
51
|
"eslint": "^7.32.0",
|
|
48
|
-
"eslint-config-prettier": "^8.
|
|
52
|
+
"eslint-config-prettier": "^8.10.0",
|
|
53
|
+
"eslint-plugin-storybook": "^0.6.15",
|
|
49
54
|
"husky": "^4.3.8",
|
|
50
55
|
"lint-staged": "^10.5.4",
|
|
51
|
-
"prettier": "^2.
|
|
56
|
+
"prettier": "^2.8.8",
|
|
57
|
+
"react": "^18.2.0",
|
|
58
|
+
"react-dom": "^18.2.0",
|
|
59
|
+
"storybook": "^7.6.4"
|
|
52
60
|
},
|
|
53
61
|
"customElements": "custom-elements.json",
|
|
54
62
|
"eslintConfig": {
|
|
55
63
|
"extends": [
|
|
56
64
|
"@open-wc",
|
|
57
|
-
"prettier"
|
|
65
|
+
"prettier",
|
|
66
|
+
"plugin:storybook/recommended"
|
|
58
67
|
]
|
|
59
68
|
},
|
|
60
69
|
"prettier": {
|
package/src/PdSteps.js
CHANGED
package/src/PdWizard.js
CHANGED
|
@@ -53,94 +53,13 @@ export class PdWizard extends LitElement {
|
|
|
53
53
|
--my-header-font-color: var(--pd-wizard-header-font-col, var(--pd-default-bg-col));
|
|
54
54
|
--my-header-bg-col: var(--pd-wizard-header-bg-col, var(--pd-default-col));
|
|
55
55
|
|
|
56
|
-
display: block;
|
|
57
|
-
/*min-height: 100%;*/
|
|
58
|
-
height: 100%;
|
|
59
|
-
}
|
|
60
|
-
|
|
61
|
-
:host(.small-size) .layout-container {
|
|
62
|
-
gap: 0px;
|
|
63
|
-
grid-template-areas:
|
|
64
|
-
'header header header'
|
|
65
|
-
'. content .'
|
|
66
|
-
'. footer .';
|
|
67
|
-
}
|
|
68
|
-
|
|
69
|
-
:host(.top-rounded) .wiz-title {
|
|
70
|
-
border-top-left-radius: var(--pd-wizard-top-borderradius, 5px);
|
|
71
|
-
border-top-right-radius: var(--pd-wizard-top-borderradius, 5px);
|
|
72
|
-
}
|
|
73
|
-
|
|
74
|
-
:host(.bottom-rounded) .wiz-buttons {
|
|
75
|
-
border-bottom-left-radius: var(--pd-wizard-bottom-borderradius, 5px);
|
|
76
|
-
border-bottom-right-radius: var(--pd-wizard-bottom-borderradius, 5px);
|
|
77
|
-
}
|
|
78
|
-
|
|
79
|
-
/* Layout Grid for the Wizard Component
|
|
80
|
-
Wird hier für die "Text-Bildschirmgröße" verwendet, umstellen/gleichziehen => verschiedene Implementierungen, die Flex Variante (ticomi-web) scheint am schlankesten...
|
|
81
|
-
*/
|
|
82
|
-
.layout-container {
|
|
83
|
-
/*min-height: 100%;*/
|
|
84
|
-
height: 100%;
|
|
85
|
-
display: grid;
|
|
86
|
-
align-content: var(--pd-wizard-align-content, space-between);
|
|
87
|
-
justify-content: var(--pd-wizard-justify-content, space-between);
|
|
88
|
-
grid-template-columns: minmax(10px, auto) minmax(300px, 1000px) minmax(
|
|
89
|
-
5px,
|
|
90
|
-
auto
|
|
91
|
-
);
|
|
92
|
-
grid-template-rows: auto 1fr auto;
|
|
93
|
-
/*grid-template-rows: auto minmax(30em, 1fr) 4.166rem; /* ToDo wie 100% hoch????* für content, damit footer unten ist?*/
|
|
94
|
-
gap: 0px;
|
|
95
|
-
grid-template-areas:
|
|
96
|
-
'header header header'
|
|
97
|
-
'content content content'
|
|
98
|
-
'footer footer footer';
|
|
99
|
-
}
|
|
100
|
-
|
|
101
|
-
/* Grid Area positions for layout container above */
|
|
102
|
-
.wiz-header {
|
|
103
|
-
grid-area: header;
|
|
104
|
-
}
|
|
105
|
-
.wiz-content {
|
|
106
|
-
grid-area: content;
|
|
107
56
|
display: flex;
|
|
108
|
-
|
|
57
|
+
flex-direction: column;
|
|
109
58
|
height: 100%;
|
|
110
|
-
background-color: var(--pd-wizard-content-bg-col, var(--pd-default-bg-col));
|
|
111
59
|
}
|
|
112
60
|
|
|
113
|
-
|
|
114
|
-
|
|
115
|
-
.wiz-content-inner {
|
|
116
|
-
min-height: 200px;
|
|
117
|
-
background-color: var(--pd-wizard-content-inner-bg-col, var(--pd-default-bg-col));
|
|
118
|
-
max-width: 96%;
|
|
119
|
-
min-width: 850px;
|
|
120
|
-
}
|
|
121
|
-
|
|
122
|
-
:host(.full-inner) .wiz-content-inner {
|
|
123
|
-
width: 100%;
|
|
124
|
-
max-width: 100%;
|
|
125
|
-
}
|
|
126
|
-
|
|
127
|
-
.wiz-buttons {
|
|
128
|
-
grid-area: footer;
|
|
129
|
-
display: flex;
|
|
130
|
-
/*padding-left: 50px;
|
|
131
|
-
padding-right: 50px;*/
|
|
132
|
-
justify-content: var(--pd-wizard-justify-buttons, space-around);
|
|
133
|
-
align-items: center;
|
|
134
|
-
|
|
135
|
-
height: 80px;
|
|
136
|
-
/*background-color: var(--pd-wizard-footer-bg-col, red);*/
|
|
137
|
-
background: linear-gradient(to top,
|
|
138
|
-
var(--pd-wizard-buttons-bg-col1, var(--pd-default-light-col)) 0%,
|
|
139
|
-
var(--pd-wizard-buttons-bg-col2, var(--pd-default-disabled-light-col)) 100%);
|
|
140
|
-
}
|
|
141
|
-
|
|
142
|
-
.wiz-breadcrumbs {
|
|
143
|
-
--pd-steps-bg-col: var(--pd-wizard-steps-bg-col, var(--pd-default-light-col));
|
|
61
|
+
.wiz-header {
|
|
62
|
+
flex-grow: 0;
|
|
144
63
|
}
|
|
145
64
|
|
|
146
65
|
.wiz-title {
|
|
@@ -152,6 +71,11 @@ export class PdWizard extends LitElement {
|
|
|
152
71
|
color: var(--my-header-font-color);
|
|
153
72
|
}
|
|
154
73
|
|
|
74
|
+
:host(.top-rounded) .wiz-title {
|
|
75
|
+
border-top-left-radius: var(--pd-wizard-top-borderradius, 5px);
|
|
76
|
+
border-top-right-radius: var(--pd-wizard-top-borderradius, 5px);
|
|
77
|
+
}
|
|
78
|
+
|
|
155
79
|
.title {
|
|
156
80
|
font-family: var(--pd-default-font-title-family);
|
|
157
81
|
font-size: var(--pd-wizard-header-font-size, 2em);
|
|
@@ -159,7 +83,7 @@ export class PdWizard extends LitElement {
|
|
|
159
83
|
line-height: var(--my-height);
|
|
160
84
|
}
|
|
161
85
|
|
|
162
|
-
/* The Close
|
|
86
|
+
/* The Close Icon */
|
|
163
87
|
.close {
|
|
164
88
|
position: absolute;
|
|
165
89
|
top: 6px;
|
|
@@ -183,29 +107,47 @@ export class PdWizard extends LitElement {
|
|
|
183
107
|
.close:focus {
|
|
184
108
|
color: var(--pd-default-hover-col);
|
|
185
109
|
--pd-icon-stroke-col: var(--pd-default-hover-col);
|
|
110
|
+
}
|
|
111
|
+
|
|
112
|
+
.wiz-breadcrumbs {
|
|
113
|
+
--pd-steps-bg-col: var(--pd-wizard-steps-bg-col, var(--pd-default-light-col));
|
|
186
114
|
}
|
|
115
|
+
|
|
116
|
+
.wiz-content {
|
|
117
|
+
display: flex;
|
|
118
|
+
justify-content: var(--pd-wizard-justify-content, center);
|
|
119
|
+
flex-grow: 1;
|
|
120
|
+
height: 100%;
|
|
187
121
|
|
|
188
|
-
|
|
189
|
-
|
|
190
|
-
|
|
191
|
-
}
|
|
122
|
+
background-color: var(--pd-wizard-content-bg-col, var(--pd-default-bg-col));
|
|
123
|
+
padding: var(--pd-wizard-content-padding, 1em);
|
|
124
|
+
overflow-y: var(--pd-wizard-content-scroll, auto);
|
|
192
125
|
}
|
|
193
126
|
|
|
194
|
-
|
|
195
|
-
|
|
196
|
-
:
|
|
197
|
-
|
|
198
|
-
}
|
|
127
|
+
.wiz-content-inner {
|
|
128
|
+
background-color: var(--pd-wizard-content-inner-bg-col, var(--pd-default-bg-col));
|
|
129
|
+
max-width: var(--pd-wizard-content-max-width, 1024px);
|
|
130
|
+
}
|
|
199
131
|
|
|
200
|
-
|
|
201
|
-
|
|
202
|
-
|
|
132
|
+
.wiz-buttons {
|
|
133
|
+
display: flex;
|
|
134
|
+
justify-content: var(--pd-wizard-justify-buttons, space-around);
|
|
135
|
+
flex-grow: 0;
|
|
136
|
+
padding: 1em;
|
|
203
137
|
|
|
204
|
-
|
|
205
|
-
|
|
206
|
-
|
|
207
|
-
|
|
138
|
+
background: linear-gradient(to top,
|
|
139
|
+
var(--pd-wizard-buttons-bg-col1, var(--pd-default-light-col)) 0%,
|
|
140
|
+
var(--pd-wizard-buttons-bg-col2, var(--pd-default-disabled-light-col)) 100%);
|
|
141
|
+
}
|
|
208
142
|
|
|
143
|
+
:host(.bottom-rounded) .wiz-buttons {
|
|
144
|
+
border-bottom-left-radius: var(--pd-wizard-bottom-borderradius, 5px);
|
|
145
|
+
border-bottom-right-radius: var(--pd-wizard-bottom-borderradius, 5px);
|
|
146
|
+
}
|
|
147
|
+
|
|
148
|
+
|
|
149
|
+
/* Size Elements for small width */
|
|
150
|
+
@media (max-width: 700px) {
|
|
209
151
|
.close {
|
|
210
152
|
font-size: 0.7rem;
|
|
211
153
|
--pd-icon-size: 1.2rem;
|
|
@@ -234,76 +176,80 @@ export class PdWizard extends LitElement {
|
|
|
234
176
|
|
|
235
177
|
render() {
|
|
236
178
|
if (this.wizardSteps && this.wizardSteps.length > 0) {
|
|
237
|
-
return html`
|
|
238
|
-
|
|
239
|
-
|
|
240
|
-
|
|
241
|
-
|
|
242
|
-
|
|
243
|
-
|
|
244
|
-
|
|
245
|
-
|
|
246
|
-
|
|
247
|
-
|
|
248
|
-
|
|
249
|
-
|
|
250
|
-
|
|
251
|
-
</div>
|
|
252
|
-
<div class="wiz-breadcrumbs">
|
|
253
|
-
<pd-steps
|
|
254
|
-
.steps="${this.wizardSteps}"
|
|
255
|
-
currentStepNr="${this.currentNumber}"
|
|
256
|
-
></pd-steps>
|
|
179
|
+
return html`
|
|
180
|
+
|
|
181
|
+
<div class="wiz-header">
|
|
182
|
+
|
|
183
|
+
<div class="wiz-title">
|
|
184
|
+
<slot name="slotLogo"></slot>
|
|
185
|
+
<span class="title"
|
|
186
|
+
>${this.currentNumber >= 1 && this.wizardSteps
|
|
187
|
+
? this.wizardSteps[this.currentNumber - 1].title
|
|
188
|
+
: 'No-Title'}</span
|
|
189
|
+
>
|
|
190
|
+
<div class="close" @click="${this._closeWizard}">
|
|
191
|
+
<span>Close</span>
|
|
192
|
+
<pd-icon icon="${CLOSEICON}"></pd-icon>
|
|
257
193
|
</div>
|
|
258
194
|
</div>
|
|
259
195
|
|
|
260
|
-
<div class="wiz-
|
|
261
|
-
<
|
|
262
|
-
|
|
263
|
-
|
|
264
|
-
|
|
265
|
-
<div style="${this.currentNumber === 2 ? '' : 'display:none'}">
|
|
266
|
-
<slot name="step-2"></slot>
|
|
267
|
-
</div>
|
|
268
|
-
<div style="${this.currentNumber === 3 ? '' : 'display:none'}">
|
|
269
|
-
<slot name="step-3"></slot>
|
|
270
|
-
</div>
|
|
271
|
-
<div style="${this.currentNumber === 4 ? '' : 'display:none'}">
|
|
272
|
-
<slot name="step-4"></slot>
|
|
273
|
-
</div>
|
|
274
|
-
<div style="${this.currentNumber === 5 ? '' : 'display:none'}">
|
|
275
|
-
<slot name="step-5"></slot>
|
|
276
|
-
</div>
|
|
277
|
-
</div>
|
|
196
|
+
<div class="wiz-breadcrumbs">
|
|
197
|
+
<pd-steps
|
|
198
|
+
.steps="${this.wizardSteps}"
|
|
199
|
+
currentStepNr="${this.currentNumber}"
|
|
200
|
+
></pd-steps>
|
|
278
201
|
</div>
|
|
202
|
+
|
|
203
|
+
</div>
|
|
279
204
|
|
|
280
|
-
|
|
281
|
-
|
|
282
|
-
|
|
283
|
-
|
|
284
|
-
|
|
285
|
-
|
|
286
|
-
|
|
287
|
-
|
|
288
|
-
|
|
289
|
-
|
|
290
|
-
|
|
291
|
-
|
|
292
|
-
|
|
293
|
-
|
|
294
|
-
|
|
295
|
-
|
|
296
|
-
|
|
297
|
-
|
|
298
|
-
? html`<pd-button
|
|
299
|
-
primary
|
|
300
|
-
@button-clicked="${this._submit}"
|
|
301
|
-
text="${msg('Absenden', {desc: '#pd.wizard.submit#'})}"
|
|
302
|
-
></pd-button>`
|
|
303
|
-
: ''}
|
|
304
|
-
`
|
|
305
|
-
: ''}
|
|
205
|
+
<div class="wiz-content">
|
|
206
|
+
|
|
207
|
+
<div class="wiz-content-inner">
|
|
208
|
+
<div style="${this.currentNumber === 1 ? '' : 'display:none'}">
|
|
209
|
+
<slot name="step-1"></slot>
|
|
210
|
+
</div>
|
|
211
|
+
<div style="${this.currentNumber === 2 ? '' : 'display:none'}">
|
|
212
|
+
<slot name="step-2"></slot>
|
|
213
|
+
</div>
|
|
214
|
+
<div style="${this.currentNumber === 3 ? '' : 'display:none'}">
|
|
215
|
+
<slot name="step-3"></slot>
|
|
216
|
+
</div>
|
|
217
|
+
<div style="${this.currentNumber === 4 ? '' : 'display:none'}">
|
|
218
|
+
<slot name="step-4"></slot>
|
|
219
|
+
</div>
|
|
220
|
+
<div style="${this.currentNumber === 5 ? '' : 'display:none'}">
|
|
221
|
+
<slot name="step-5"></slot>
|
|
222
|
+
</div>
|
|
306
223
|
</div>
|
|
224
|
+
|
|
225
|
+
</div>
|
|
226
|
+
|
|
227
|
+
<div class="wiz-buttons">
|
|
228
|
+
${this.currentNumber >= 1 && this.wizardSteps
|
|
229
|
+
? html`
|
|
230
|
+
<pd-button
|
|
231
|
+
@button-clicked="${this._previousStep}"
|
|
232
|
+
text="${msg('Zurück', {desc: '#pd.wizard.back#'})}"
|
|
233
|
+
style="visibility: ${this.currentNumber === 1
|
|
234
|
+
? 'hidden'
|
|
235
|
+
: 'visible'};"
|
|
236
|
+
></pd-button>
|
|
237
|
+
${this.currentNumber !== this.wizardSteps.length &&
|
|
238
|
+
this.wizardSteps[this.currentNumber - 1].next !== false
|
|
239
|
+
? html`<pd-button
|
|
240
|
+
@button-clicked="${this._nextStep}"
|
|
241
|
+
text="${msg('Weiter', {desc: '#pd.wizard.next#'})}"
|
|
242
|
+
></pd-button>`
|
|
243
|
+
: ''}
|
|
244
|
+
${this.currentNumber === this.wizardSteps.length
|
|
245
|
+
? html`<pd-button
|
|
246
|
+
primary
|
|
247
|
+
@button-clicked="${this._submit}"
|
|
248
|
+
text="${msg('Absenden', {desc: '#pd.wizard.submit#'})}"
|
|
249
|
+
></pd-button>`
|
|
250
|
+
: ''}
|
|
251
|
+
`
|
|
252
|
+
: ''}
|
|
307
253
|
</div>
|
|
308
254
|
`;
|
|
309
255
|
}
|
|
@@ -0,0 +1,151 @@
|
|
|
1
|
+
import { html } from 'lit';
|
|
2
|
+
import '../../pd-wizard.js';
|
|
3
|
+
|
|
4
|
+
export default {
|
|
5
|
+
title: 'PdWizard/Wizard',
|
|
6
|
+
component: 'pd-wizard',
|
|
7
|
+
argTypes: {},
|
|
8
|
+
};
|
|
9
|
+
|
|
10
|
+
function WizardTemplate({ wizardSteps, currentNumber }) {
|
|
11
|
+
|
|
12
|
+
let currentNr = currentNumber;
|
|
13
|
+
|
|
14
|
+
return html`
|
|
15
|
+
<pd-wizard
|
|
16
|
+
id="wizardId"
|
|
17
|
+
.wizardSteps="${wizardSteps}"
|
|
18
|
+
class="small-size_"
|
|
19
|
+
currentNumber="${currentNr}"
|
|
20
|
+
@previous-step="${() => {currentNr -= 1; console.log("Hier hin");}}"
|
|
21
|
+
@next-step="${() => {currentNr -= 1; console.log("Hier hin");}}"
|
|
22
|
+
>
|
|
23
|
+
<div slot="step-1">
|
|
24
|
+
<h2>Das ist ein Titel 1</h2>
|
|
25
|
+
<p>Hier steht etwtwas Text. In der Regel aber kommt direkt eine Form.</p>
|
|
26
|
+
</div>
|
|
27
|
+
<div slot="step-2">
|
|
28
|
+
<h2>Das ist ein Titel 2</h2>
|
|
29
|
+
<p>Hier steht etwtwas Text. In der Regel aber kommt direkt eine Form. Das ist jetzt ein löanger Text um zu gucken wie es so aussieht. er sollte schön umbrechen und mittig das ganze platzieren.</p>
|
|
30
|
+
<h2>Das ist ein Titel 2</h2>
|
|
31
|
+
<p>Hier steht etwtwas Text. In der Regel aber kommt direkt eine Form. Das ist jetzt ein löanger Text um zu gucken wie es so aussieht. er sollte schön umbrechen und mittig das ganze platzieren.</p>
|
|
32
|
+
<h2>Das ist ein Titel 2</h2>
|
|
33
|
+
<p>Hier steht etwtwas Text. In der Regel aber kommt direkt eine Form. Das ist jetzt ein löanger Text um zu gucken wie es so aussieht. er sollte schön umbrechen und mittig das ganze platzieren.</p>
|
|
34
|
+
<h2>Das ist ein Titel 2</h2>
|
|
35
|
+
<p>Hier steht etwtwas Text. In der Regel aber kommt direkt eine Form. Das ist jetzt ein löanger Text um zu gucken wie es so aussieht. er sollte schön umbrechen und mittig das ganze platzieren.</p>
|
|
36
|
+
<h2>Das ist ein Titel 2</h2>
|
|
37
|
+
<p>Hier steht etwtwas Text. In der Regel aber kommt direkt eine Form. Das ist jetzt ein löanger Text um zu gucken wie es so aussieht. er sollte schön umbrechen und mittig das ganze platzieren.</p>
|
|
38
|
+
<h2>Das ist ein Titel 2</h2>
|
|
39
|
+
<p>Hier steht etwtwas Text. In der Regel aber kommt direkt eine Form. Das ist jetzt ein löanger Text um zu gucken wie es so aussieht. er sollte schön umbrechen und mittig das ganze platzieren.</p>
|
|
40
|
+
<h2>Das ist ein Titel 2</h2>
|
|
41
|
+
<p>Hier steht etwtwas Text. In der Regel aber kommt direkt eine Form. Das ist jetzt ein löanger Text um zu gucken wie es so aussieht. er sollte schön umbrechen und mittig das ganze platzieren.</p>
|
|
42
|
+
<h2>Das ist ein Titel 2</h2>
|
|
43
|
+
<p>Hier steht etwtwas Text. In der Regel aber kommt direkt eine Form. Das ist jetzt ein löanger Text um zu gucken wie es so aussieht. er sollte schön umbrechen und mittig das ganze platzieren.</p>
|
|
44
|
+
</div>
|
|
45
|
+
<div slot="step-3">Test 3</div>
|
|
46
|
+
<div slot="step-4">Test 4</div>
|
|
47
|
+
</pd-wizard>
|
|
48
|
+
`;
|
|
49
|
+
}
|
|
50
|
+
|
|
51
|
+
function WizardPanelTemplate({ wizardSteps, currentNumber }) {
|
|
52
|
+
|
|
53
|
+
let currentNr = currentNumber;
|
|
54
|
+
|
|
55
|
+
return html`
|
|
56
|
+
|
|
57
|
+
<style>
|
|
58
|
+
:host {
|
|
59
|
+
display: block;
|
|
60
|
+
}
|
|
61
|
+
|
|
62
|
+
/* The Modal (background) */
|
|
63
|
+
.modal {
|
|
64
|
+
position: fixed; /* Stay in place */
|
|
65
|
+
left: 0;
|
|
66
|
+
top: 0;
|
|
67
|
+
z-index: 100; /* Sit on top */
|
|
68
|
+
|
|
69
|
+
display: flex;
|
|
70
|
+
align-items: center;
|
|
71
|
+
justify-content: center;
|
|
72
|
+
|
|
73
|
+
width: 100%; /* Full width */
|
|
74
|
+
height: 100%; /* Full height */
|
|
75
|
+
overflow: auto;
|
|
76
|
+
/* RGBA Wert muss hier verwendet werden #AFC1D2 to rgba for opacity */
|
|
77
|
+
background-color: var(--pd-popup-modal-bg-rgba, rgba(175, 193, 210, 0.8));
|
|
78
|
+
}
|
|
79
|
+
|
|
80
|
+
.content {
|
|
81
|
+
background-color: var(--pd-loading-state-bg-col, #edf7fd);
|
|
82
|
+
border: 2px solid var(--pd-loading-state-bg-col, var(--pd-default-col, #067394));
|
|
83
|
+
z-index: 101; /* Sit on top */
|
|
84
|
+
|
|
85
|
+
height: 90%;
|
|
86
|
+
margin: 1em;
|
|
87
|
+
}
|
|
88
|
+
</style>
|
|
89
|
+
|
|
90
|
+
<div id="modalId" class="modal">
|
|
91
|
+
<div class="content">
|
|
92
|
+
|
|
93
|
+
<pd-wizard
|
|
94
|
+
id="wizardId"
|
|
95
|
+
.wizardSteps="${wizardSteps}"
|
|
96
|
+
currentNumber="${currentNr}"
|
|
97
|
+
@previous-step="${() => {currentNr -= 1; console.log("Hier hin");}}"
|
|
98
|
+
@next-step="${() => {currentNr -= 1; console.log("Hier hin");}}"
|
|
99
|
+
>
|
|
100
|
+
<div slot="step-1">
|
|
101
|
+
<h2>Das ist ein Titel 1</h2>
|
|
102
|
+
<p>Hier steht etwtwas Text. In der Regel aber kommt direkt eine Form.</p>
|
|
103
|
+
</div>
|
|
104
|
+
<div slot="step-2">
|
|
105
|
+
<h2>Das ist ein Titel 2</h2>
|
|
106
|
+
<p>Hier steht etwtwas Text. In der Regel aber kommt direkt eine Form. Das ist jetzt ein löanger Text um zu gucken wie es so aussieht. er sollte schön umbrechen und mittig das ganze platzieren.</p>
|
|
107
|
+
<h2>Das ist ein Titel 2</h2>
|
|
108
|
+
<p>Hier steht etwtwas Text. In der Regel aber kommt direkt eine Form. Das ist jetzt ein löanger Text um zu gucken wie es so aussieht. er sollte schön umbrechen und mittig das ganze platzieren.</p>
|
|
109
|
+
<h2>Das ist ein Titel 2</h2>
|
|
110
|
+
<p>Hier steht etwtwas Text. In der Regel aber kommt direkt eine Form. Das ist jetzt ein löanger Text um zu gucken wie es so aussieht. er sollte schön umbrechen und mittig das ganze platzieren.</p>
|
|
111
|
+
<h2>Das ist ein Titel 2</h2>
|
|
112
|
+
<p>Hier steht etwtwas Text. In der Regel aber kommt direkt eine Form. Das ist jetzt ein löanger Text um zu gucken wie es so aussieht. er sollte schön umbrechen und mittig das ganze platzieren.</p>
|
|
113
|
+
<h2>Das ist ein Titel 2</h2>
|
|
114
|
+
<p>Hier steht etwtwas Text. In der Regel aber kommt direkt eine Form. Das ist jetzt ein löanger Text um zu gucken wie es so aussieht. er sollte schön umbrechen und mittig das ganze platzieren.</p>
|
|
115
|
+
<h2>Das ist ein Titel 2</h2>
|
|
116
|
+
<p>Hier steht etwtwas Text. In der Regel aber kommt direkt eine Form. Das ist jetzt ein löanger Text um zu gucken wie es so aussieht. er sollte schön umbrechen und mittig das ganze platzieren.</p>
|
|
117
|
+
<h2>Das ist ein Titel 2</h2>
|
|
118
|
+
<p>Hier steht etwtwas Text. In der Regel aber kommt direkt eine Form. Das ist jetzt ein löanger Text um zu gucken wie es so aussieht. er sollte schön umbrechen und mittig das ganze platzieren.</p>
|
|
119
|
+
<h2>Das ist ein Titel 2</h2>
|
|
120
|
+
<p>Hier steht etwtwas Text. In der Regel aber kommt direkt eine Form. Das ist jetzt ein löanger Text um zu gucken wie es so aussieht. er sollte schön umbrechen und mittig das ganze platzieren.</p>
|
|
121
|
+
</div>
|
|
122
|
+
<div slot="step-3">Test 3</div>
|
|
123
|
+
<div slot="step-4">Test 4</div>
|
|
124
|
+
</pd-wizard>
|
|
125
|
+
|
|
126
|
+
</div>
|
|
127
|
+
</div>
|
|
128
|
+
`;
|
|
129
|
+
}
|
|
130
|
+
|
|
131
|
+
export const Wizard = WizardTemplate.bind({});
|
|
132
|
+
Wizard.args = {
|
|
133
|
+
wizardSteps: [
|
|
134
|
+
{ title: 'Step 1', name: 'Step 1' },
|
|
135
|
+
{ title: 'Maintenance Bronze', name: 'Step 2' },
|
|
136
|
+
{ title: 'Step 3', name: 'Step 3' },
|
|
137
|
+
{ title: 'Step 4', name: 'Step 4' },
|
|
138
|
+
],
|
|
139
|
+
currentNumber: 2,
|
|
140
|
+
};
|
|
141
|
+
|
|
142
|
+
export const WizardPanel = WizardPanelTemplate.bind({});
|
|
143
|
+
WizardPanel.args = {
|
|
144
|
+
wizardSteps: [
|
|
145
|
+
{ title: 'Step 1', name: 'Step 1' },
|
|
146
|
+
{ title: 'Maintenance Bronze', name: 'Step 2' },
|
|
147
|
+
{ title: 'Step 3', name: 'Step 3' },
|
|
148
|
+
{ title: 'Step 4', name: 'Step 4' },
|
|
149
|
+
],
|
|
150
|
+
currentNumber: 2,
|
|
151
|
+
};
|
package/.storybook/server.mjs
DELETED
|
@@ -1,8 +0,0 @@
|
|
|
1
|
-
import { storybookPlugin } from '@web/dev-server-storybook';
|
|
2
|
-
import baseConfig from '../web-dev-server.config.mjs';
|
|
3
|
-
|
|
4
|
-
export default /** @type {import('@web/dev-server').DevServerConfig} */ ({
|
|
5
|
-
...baseConfig,
|
|
6
|
-
open: '/',
|
|
7
|
-
plugins: [storybookPlugin({ type: 'web-components' }), ...baseConfig.plugins],
|
|
8
|
-
});
|
|
@@ -1,46 +0,0 @@
|
|
|
1
|
-
import { html } from 'lit';
|
|
2
|
-
import '../pd-wizard.js';
|
|
3
|
-
|
|
4
|
-
export default {
|
|
5
|
-
title: 'PdWizard/Wizard',
|
|
6
|
-
component: 'pd-wizard',
|
|
7
|
-
argTypes: {},
|
|
8
|
-
};
|
|
9
|
-
|
|
10
|
-
function WizardTemplate({ wizardSteps, currentNumber }) {
|
|
11
|
-
|
|
12
|
-
let currentNr = currentNumber;
|
|
13
|
-
|
|
14
|
-
return html`
|
|
15
|
-
<pd-wizard
|
|
16
|
-
id="wizardId"
|
|
17
|
-
.wizardSteps="${wizardSteps}"
|
|
18
|
-
class="small-size_"
|
|
19
|
-
currentNumber="${currentNr}"
|
|
20
|
-
@previous-step="${() => {currentNr -= 1; console.log("Hier hin");}}"
|
|
21
|
-
@next-step="${() => {currentNr -= 1; console.log("Hier hin");}}"
|
|
22
|
-
>
|
|
23
|
-
<div slot="step-1">
|
|
24
|
-
<h2>Das ist ein Titel 1</h2>
|
|
25
|
-
<p>Hier steht etwtwas Text. In der Regel aber kommt direkt eine Form.</p>
|
|
26
|
-
</div>
|
|
27
|
-
<div slot="step-2">
|
|
28
|
-
<h2>Das ist ein Titel 2</h2>
|
|
29
|
-
<p>Hier steht etwtwas Text. In der Regel aber kommt direkt eine Form. Das ist jetzt ein löanger Text um zu gucken wie es so aussieht. er sollte schön umbrechen und mittig das ganze platzieren.</p>
|
|
30
|
-
</div>
|
|
31
|
-
<div slot="step-3">Test 3</div>
|
|
32
|
-
<div slot="step-4">Test 4</div>
|
|
33
|
-
</pd-wizard>
|
|
34
|
-
`;
|
|
35
|
-
}
|
|
36
|
-
|
|
37
|
-
export const Wizard = WizardTemplate.bind({});
|
|
38
|
-
Wizard.args = {
|
|
39
|
-
wizardSteps: [
|
|
40
|
-
{ title: 'Step 1', name: 'Step 1' },
|
|
41
|
-
{ title: 'Maintenance Bronze', name: 'Step 2' },
|
|
42
|
-
{ title: 'Step 3', name: 'Step 3' },
|
|
43
|
-
{ title: 'Step 4', name: 'Step 4' },
|
|
44
|
-
],
|
|
45
|
-
currentNumber: 2,
|
|
46
|
-
};
|