hr-design-system-handlebars 1.100.1 → 1.100.2
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/CHANGELOG.md +12 -0
- package/dist/assets/index.css +21 -23
- package/dist/views/components/forms/backgroundBox.hbs +3 -0
- package/dist/views/components/forms/fields.hbs +1 -0
- package/dist/views/components/forms/input_single_line.hbs +6 -5
- package/dist/views/components/forms/webform.hbs +5 -16
- package/dist/views_static/components/forms/backgroundBox.hbs +3 -0
- package/dist/views_static/components/forms/fields.hbs +1 -0
- package/dist/views_static/components/forms/input_single_line.hbs +6 -5
- package/dist/views_static/components/forms/webform.hbs +5 -16
- package/package.json +1 -1
- package/src/stories/views/components/forms/backgroundBox.hbs +3 -0
- package/src/stories/views/components/forms/fields.hbs +1 -0
- package/src/stories/views/components/forms/form.stories.js +14 -9
- package/src/stories/views/components/forms/input_single_line.hbs +6 -5
- package/src/stories/views/components/forms/webform.hbs +5 -16
package/CHANGELOG.md
CHANGED
|
@@ -1,3 +1,15 @@
|
|
|
1
|
+
# v1.100.2 (Tue Sep 10 2024)
|
|
2
|
+
|
|
3
|
+
#### 🐛 Bug Fix
|
|
4
|
+
|
|
5
|
+
- Formularrahmen [#1063](https://github.com/mumprod/hr-design-system-handlebars/pull/1063) ([@vascoeduardo](https://github.com/vascoeduardo))
|
|
6
|
+
|
|
7
|
+
#### Authors: 1
|
|
8
|
+
|
|
9
|
+
- Vasco ([@vascoeduardo](https://github.com/vascoeduardo))
|
|
10
|
+
|
|
11
|
+
---
|
|
12
|
+
|
|
1
13
|
# v1.100.1 (Mon Sep 09 2024)
|
|
2
14
|
|
|
3
15
|
#### 🐛 Bug Fix
|
package/dist/assets/index.css
CHANGED
|
@@ -459,7 +459,7 @@ video {
|
|
|
459
459
|
--tw-shadow-colored: 0 0 rgba(0,0,0,0);
|
|
460
460
|
}
|
|
461
461
|
|
|
462
|
-
.ds-link-inset, .ds-link-inset:not(:focus-visible), .ring, .
|
|
462
|
+
.ds-link-inset, .ds-link-inset:not(:focus-visible), .ring, .link-focus-inset, .link-focus, .link-focus-inset-white, .link-focus-white {
|
|
463
463
|
--tw-ring-inset: ;
|
|
464
464
|
--tw-ring-offset-width: 0px;
|
|
465
465
|
--tw-ring-offset-color: #fff;
|
|
@@ -2867,9 +2867,6 @@ article.indexTextDS .indexTextHighlighted .link {
|
|
|
2867
2867
|
.pt-1\.5 {
|
|
2868
2868
|
padding-top: 0.375rem;
|
|
2869
2869
|
}
|
|
2870
|
-
.pt-10 {
|
|
2871
|
-
padding-top: 2.5rem;
|
|
2872
|
-
}
|
|
2873
2870
|
.pt-2 {
|
|
2874
2871
|
padding-top: 0.5rem;
|
|
2875
2872
|
}
|
|
@@ -3306,15 +3303,6 @@ article.indexTextDS .indexTextHighlighted .link {
|
|
|
3306
3303
|
box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), 0 0 rgba(0,0,0,0);
|
|
3307
3304
|
box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow, 0 0 rgba(0,0,0,0));
|
|
3308
3305
|
}
|
|
3309
|
-
.ring-1 {
|
|
3310
|
-
--tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);
|
|
3311
|
-
--tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(1px + var(--tw-ring-offset-width)) var(--tw-ring-color);
|
|
3312
|
-
box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), 0 0 rgba(0,0,0,0);
|
|
3313
|
-
box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow, 0 0 rgba(0,0,0,0));
|
|
3314
|
-
}
|
|
3315
|
-
.ring-gray-900\/5 {
|
|
3316
|
-
--tw-ring-color: rgba(17, 24, 39, 0.05);
|
|
3317
|
-
}
|
|
3318
3306
|
.ring-podcast {
|
|
3319
3307
|
--tw-ring-color: var(--color-podcast);
|
|
3320
3308
|
}
|
|
@@ -3420,7 +3408,7 @@ article.indexTextDS .indexTextHighlighted .link {
|
|
|
3420
3408
|
border-bottom-color: var(--color-secondary-ds);
|
|
3421
3409
|
}
|
|
3422
3410
|
.counter-reset {
|
|
3423
|
-
counter-reset:
|
|
3411
|
+
counter-reset: cnt1725971545380;
|
|
3424
3412
|
}
|
|
3425
3413
|
.hyphens-auto {
|
|
3426
3414
|
-webkit-hyphens: auto;
|
|
@@ -3828,7 +3816,7 @@ article.indexTextDS .indexTextHighlighted .link {
|
|
|
3828
3816
|
--tw-ring-color: rgba(255, 255, 255, 0.5);
|
|
3829
3817
|
}
|
|
3830
3818
|
.-ordered {
|
|
3831
|
-
counter-increment:
|
|
3819
|
+
counter-increment: cnt1725971545380 1;
|
|
3832
3820
|
}
|
|
3833
3821
|
.-ordered::before {
|
|
3834
3822
|
position: absolute;
|
|
@@ -3844,7 +3832,7 @@ article.indexTextDS .indexTextHighlighted .link {
|
|
|
3844
3832
|
letter-spacing: .0125em;
|
|
3845
3833
|
--tw-text-opacity: 1;
|
|
3846
3834
|
color: rgba(0, 0, 0, var(--tw-text-opacity));
|
|
3847
|
-
content: counter(
|
|
3835
|
+
content: counter(cnt1725971545380);
|
|
3848
3836
|
}
|
|
3849
3837
|
/*! ****************************/
|
|
3850
3838
|
/*! DataPolicy stuff */
|
|
@@ -6521,8 +6509,14 @@ ul.restrictedToTwo li:nth-of-type(1n + 2) .timelineBorder {
|
|
|
6521
6509
|
column-gap: 0.5rem;
|
|
6522
6510
|
}
|
|
6523
6511
|
|
|
6524
|
-
.sm\:rounded-
|
|
6525
|
-
border-radius:
|
|
6512
|
+
.sm\:rounded-br-hr {
|
|
6513
|
+
border-bottom-right-radius: 0px;
|
|
6514
|
+
border-bottom-right-radius: var(--border-radius-hr);
|
|
6515
|
+
}
|
|
6516
|
+
|
|
6517
|
+
.sm\:rounded-tl-hr {
|
|
6518
|
+
border-top-left-radius: 0px;
|
|
6519
|
+
border-top-left-radius: var(--border-radius-hr);
|
|
6526
6520
|
}
|
|
6527
6521
|
|
|
6528
6522
|
.sm\:bg-transparent {
|
|
@@ -6553,6 +6547,11 @@ ul.restrictedToTwo li:nth-of-type(1n + 2) .timelineBorder {
|
|
|
6553
6547
|
padding-right: 2.875rem;
|
|
6554
6548
|
}
|
|
6555
6549
|
|
|
6550
|
+
.sm\:px-13 {
|
|
6551
|
+
padding-left: 3.25rem;
|
|
6552
|
+
padding-right: 3.25rem;
|
|
6553
|
+
}
|
|
6554
|
+
|
|
6556
6555
|
.sm\:px-4 {
|
|
6557
6556
|
padding-left: 1rem;
|
|
6558
6557
|
padding-right: 1rem;
|
|
@@ -6573,11 +6572,6 @@ ul.restrictedToTwo li:nth-of-type(1n + 2) .timelineBorder {
|
|
|
6573
6572
|
padding-right: 2.375rem;
|
|
6574
6573
|
}
|
|
6575
6574
|
|
|
6576
|
-
.sm\:py-12 {
|
|
6577
|
-
padding-top: 3rem;
|
|
6578
|
-
padding-bottom: 3rem;
|
|
6579
|
-
}
|
|
6580
|
-
|
|
6581
6575
|
.sm\:py-4 {
|
|
6582
6576
|
padding-top: 1rem;
|
|
6583
6577
|
padding-bottom: 1rem;
|
|
@@ -6611,6 +6605,10 @@ ul.restrictedToTwo li:nth-of-type(1n + 2) .timelineBorder {
|
|
|
6611
6605
|
padding-top: 0px;
|
|
6612
6606
|
}
|
|
6613
6607
|
|
|
6608
|
+
.sm\:pt-12 {
|
|
6609
|
+
padding-top: 3rem;
|
|
6610
|
+
}
|
|
6611
|
+
|
|
6614
6612
|
.sm\:pt-2 {
|
|
6615
6613
|
padding-top: 0.5rem;
|
|
6616
6614
|
}
|
|
@@ -37,8 +37,9 @@
|
|
|
37
37
|
>
|
|
38
38
|
<div class="hidden">
|
|
39
39
|
<div>DEBUGG</div>
|
|
40
|
-
<div x-text="
|
|
41
|
-
<div x-text="
|
|
40
|
+
<div>wasFocused:<span x-text="wasFocused"></span></div>
|
|
41
|
+
<div>valid:<span x-text="valid"></span></div>
|
|
42
|
+
<div>input.length:<span x-text="input{{getRandom}}.length "></span></div>
|
|
42
43
|
</div>
|
|
43
44
|
<label for="input{{getRandom}}" class="absolute left-[16px] top-px translate-y-0 translate-x-0 scale-75 text-gray-500
|
|
44
45
|
|
|
@@ -57,12 +58,12 @@
|
|
|
57
58
|
{{/if}}
|
|
58
59
|
{{/if}}
|
|
59
60
|
</label>
|
|
60
|
-
<div class="flex justify-between
|
|
61
|
+
<div class="flex items-end justify-between h-5 font-heading">
|
|
61
62
|
{{#if _description}}
|
|
62
|
-
<div class="pl-4 text-xs text-gray-500 " {{#if _required}}:class="!valid && wasFocused
|
|
63
|
+
<div class="pl-4 text-xs text-gray-500 min-h- " {{#if _required}}:class="{'hidden': !valid && wasFocused}"{{/if}}>{{_description}}</div>
|
|
63
64
|
{{/if}}
|
|
64
65
|
{{#if _required}}
|
|
65
|
-
<div class="pl-4 text-xs font-bold text-red-700
|
|
66
|
+
<div class="hidden pl-4 text-xs font-bold text-red-700" :class="{'hidden': valid || !wasFocused }" >{{_errorMessage}}</div>
|
|
66
67
|
{{/if}}
|
|
67
68
|
{{#if _maxLength}}
|
|
68
69
|
<div class="px-4 ml-auto text-xs text-gray-500"><span x-text="input{{getRandom}}.length">0</span>/{{_maxLength}}</div>
|
|
@@ -1,20 +1,9 @@
|
|
|
1
1
|
{{~#if (isStorybook)~}}
|
|
2
|
-
|
|
3
|
-
|
|
4
|
-
|
|
5
|
-
|
|
6
|
-
{{
|
|
7
|
-
|
|
8
|
-
{{!-- {{~> modules/forms/controls }}
|
|
9
|
-
|
|
10
|
-
<script type="text/html" class="js-successMessage">
|
|
11
|
-
{{{include "content/webform/components/webform-form-success" }}}
|
|
12
|
-
</script>
|
|
13
|
-
<script type="text/html" class="js-errorMessage">
|
|
14
|
-
{{{include "content/webform/components/webform-form-error" }}}
|
|
15
|
-
</script> --}}
|
|
16
|
-
</div>
|
|
17
|
-
</form>
|
|
2
|
+
{{#>components/forms/backgroundBox }}
|
|
3
|
+
<form class="relative flex flex-col justify-center overflow-hidden group" id="form--{{nextRandom}}" action="{{this.url}}" method="post" enctype="{{if this.isMultipart 'multipart/form-data' 'application/x-www-form-urlencoded'}}" accept-charset="utf-8" >
|
|
4
|
+
{{> components/forms/fields }}
|
|
5
|
+
</form>
|
|
6
|
+
{{/components/forms/backgroundBox }}
|
|
18
7
|
{{~else~}}
|
|
19
8
|
{{> content/webform/components/webform _addClass="print:hidden copytext__clearBox marginTrailer--m"}}
|
|
20
9
|
{{~/if~}}
|
|
@@ -37,8 +37,9 @@
|
|
|
37
37
|
>
|
|
38
38
|
<div class="hidden">
|
|
39
39
|
<div>DEBUGG</div>
|
|
40
|
-
<div x-text="
|
|
41
|
-
<div x-text="
|
|
40
|
+
<div>wasFocused:<span x-text="wasFocused"></span></div>
|
|
41
|
+
<div>valid:<span x-text="valid"></span></div>
|
|
42
|
+
<div>input.length:<span x-text="input{{getRandom}}.length "></span></div>
|
|
42
43
|
</div>
|
|
43
44
|
<label for="input{{getRandom}}" class="absolute left-[16px] top-px translate-y-0 translate-x-0 scale-75 text-gray-500
|
|
44
45
|
|
|
@@ -57,12 +58,12 @@
|
|
|
57
58
|
{{/if}}
|
|
58
59
|
{{/if}}
|
|
59
60
|
</label>
|
|
60
|
-
<div class="flex justify-between
|
|
61
|
+
<div class="flex items-end justify-between h-5 font-heading">
|
|
61
62
|
{{#if _description}}
|
|
62
|
-
<div class="pl-4 text-xs text-gray-500 " {{#if _required}}:class="!valid && wasFocused
|
|
63
|
+
<div class="pl-4 text-xs text-gray-500 min-h- " {{#if _required}}:class="{'hidden': !valid && wasFocused}"{{/if}}>{{_description}}</div>
|
|
63
64
|
{{/if}}
|
|
64
65
|
{{#if _required}}
|
|
65
|
-
<div class="pl-4 text-xs font-bold text-red-700
|
|
66
|
+
<div class="hidden pl-4 text-xs font-bold text-red-700" :class="{'hidden': valid || !wasFocused }" >{{_errorMessage}}</div>
|
|
66
67
|
{{/if}}
|
|
67
68
|
{{#if _maxLength}}
|
|
68
69
|
<div class="px-4 ml-auto text-xs text-gray-500"><span x-text="input{{getRandom}}.length">0</span>/{{_maxLength}}</div>
|
|
@@ -1,20 +1,9 @@
|
|
|
1
1
|
{{~#if (isStorybook)~}}
|
|
2
|
-
|
|
3
|
-
|
|
4
|
-
|
|
5
|
-
|
|
6
|
-
{{
|
|
7
|
-
|
|
8
|
-
{{!-- {{~> modules/forms/controls }}
|
|
9
|
-
|
|
10
|
-
<script type="text/html" class="js-successMessage">
|
|
11
|
-
{{{include "content/webform/components/webform-form-success" }}}
|
|
12
|
-
</script>
|
|
13
|
-
<script type="text/html" class="js-errorMessage">
|
|
14
|
-
{{{include "content/webform/components/webform-form-error" }}}
|
|
15
|
-
</script> --}}
|
|
16
|
-
</div>
|
|
17
|
-
</form>
|
|
2
|
+
{{#>components/forms/backgroundBox }}
|
|
3
|
+
<form class="relative flex flex-col justify-center overflow-hidden group" id="form--{{nextRandom}}" action="{{this.url}}" method="post" enctype="{{if this.isMultipart 'multipart/form-data' 'application/x-www-form-urlencoded'}}" accept-charset="utf-8" >
|
|
4
|
+
{{> components/forms/fields }}
|
|
5
|
+
</form>
|
|
6
|
+
{{/components/forms/backgroundBox }}
|
|
18
7
|
{{~else~}}
|
|
19
8
|
{{> content/webform/components/webform _addClass="print:hidden copytext__clearBox marginTrailer--m"}}
|
|
20
9
|
{{~/if~}}
|
package/package.json
CHANGED
|
@@ -6,7 +6,7 @@
|
|
|
6
6
|
"license": "MIT",
|
|
7
7
|
"main": "dist/index.js",
|
|
8
8
|
"repository": "https://github.com/szuelch/hr-design-system-handlebars",
|
|
9
|
-
"version": "1.100.
|
|
9
|
+
"version": "1.100.2",
|
|
10
10
|
"scripts": {
|
|
11
11
|
"test": "echo \"Error: no test specified\" && exit 1",
|
|
12
12
|
"storybook": "storybook dev -p 6006 public",
|
|
@@ -1,25 +1,30 @@
|
|
|
1
|
-
|
|
1
|
+
|
|
2
2
|
import inputJson from './fixtures/form_input.json'
|
|
3
|
+
const handlebars = require('hrHandlebars')
|
|
3
4
|
|
|
4
|
-
const Template = ({ ...args }) => {
|
|
5
|
-
// You can either use a function to create DOM elements or use a plain html string!
|
|
6
|
-
// return `<span>${topline}</span>`;
|
|
7
|
-
return contentbox({ ...args })
|
|
8
|
-
}
|
|
9
5
|
|
|
10
6
|
export default {
|
|
11
7
|
title: 'Komponenten/Formulare/Input',
|
|
12
8
|
decorators: [
|
|
13
9
|
(Story) => {
|
|
14
|
-
return `<div class="
|
|
15
|
-
<div class="
|
|
10
|
+
return `<div class="grid grid-page">
|
|
11
|
+
<div class="grid bg-white grid-article">
|
|
16
12
|
${Story()}
|
|
17
13
|
</div>
|
|
18
14
|
</div>`
|
|
19
15
|
},
|
|
20
16
|
],
|
|
21
17
|
}
|
|
22
|
-
|
|
18
|
+
const Template = (args) => {
|
|
19
|
+
let hbsTemplate = handlebars.compile(`
|
|
20
|
+
{{#>components/forms/backgroundBox }}
|
|
21
|
+
<form class="relative flex flex-col justify-center overflow-hidden group" id="form--{{nextRandom}}" action="{{this.url}}" method="post" enctype="{{if this.isMultipart 'multipart/form-data' 'application/x-www-form-urlencoded'}}" accept-charset="utf-8" >
|
|
22
|
+
{{> components/forms/fields }}
|
|
23
|
+
</form>
|
|
24
|
+
{{/components/forms/backgroundBox }}
|
|
25
|
+
`)
|
|
26
|
+
return hbsTemplate({ ...args })
|
|
27
|
+
}
|
|
23
28
|
export const Input = {
|
|
24
29
|
render: Template.bind({}),
|
|
25
30
|
name: 'Input - Einzeiliger Text',
|
|
@@ -37,8 +37,9 @@
|
|
|
37
37
|
>
|
|
38
38
|
<div class="hidden">
|
|
39
39
|
<div>DEBUGG</div>
|
|
40
|
-
<div x-text="
|
|
41
|
-
<div x-text="
|
|
40
|
+
<div>wasFocused:<span x-text="wasFocused"></span></div>
|
|
41
|
+
<div>valid:<span x-text="valid"></span></div>
|
|
42
|
+
<div>input.length:<span x-text="input{{getRandom}}.length "></span></div>
|
|
42
43
|
</div>
|
|
43
44
|
<label for="input{{getRandom}}" class="absolute left-[16px] top-px translate-y-0 translate-x-0 scale-75 text-gray-500
|
|
44
45
|
|
|
@@ -57,12 +58,12 @@
|
|
|
57
58
|
{{/if}}
|
|
58
59
|
{{/if}}
|
|
59
60
|
</label>
|
|
60
|
-
<div class="flex justify-between
|
|
61
|
+
<div class="flex items-end justify-between h-5 font-heading">
|
|
61
62
|
{{#if _description}}
|
|
62
|
-
<div class="pl-4 text-xs text-gray-500 " {{#if _required}}:class="!valid && wasFocused
|
|
63
|
+
<div class="pl-4 text-xs text-gray-500 min-h- " {{#if _required}}:class="{'hidden': !valid && wasFocused}"{{/if}}>{{_description}}</div>
|
|
63
64
|
{{/if}}
|
|
64
65
|
{{#if _required}}
|
|
65
|
-
<div class="pl-4 text-xs font-bold text-red-700
|
|
66
|
+
<div class="hidden pl-4 text-xs font-bold text-red-700" :class="{'hidden': valid || !wasFocused }" >{{_errorMessage}}</div>
|
|
66
67
|
{{/if}}
|
|
67
68
|
{{#if _maxLength}}
|
|
68
69
|
<div class="px-4 ml-auto text-xs text-gray-500"><span x-text="input{{getRandom}}.length">0</span>/{{_maxLength}}</div>
|
|
@@ -1,20 +1,9 @@
|
|
|
1
1
|
{{~#if (isStorybook)~}}
|
|
2
|
-
|
|
3
|
-
|
|
4
|
-
|
|
5
|
-
|
|
6
|
-
{{
|
|
7
|
-
|
|
8
|
-
{{!-- {{~> modules/forms/controls }}
|
|
9
|
-
|
|
10
|
-
<script type="text/html" class="js-successMessage">
|
|
11
|
-
{{{include "content/webform/components/webform-form-success" }}}
|
|
12
|
-
</script>
|
|
13
|
-
<script type="text/html" class="js-errorMessage">
|
|
14
|
-
{{{include "content/webform/components/webform-form-error" }}}
|
|
15
|
-
</script> --}}
|
|
16
|
-
</div>
|
|
17
|
-
</form>
|
|
2
|
+
{{#>components/forms/backgroundBox }}
|
|
3
|
+
<form class="relative flex flex-col justify-center overflow-hidden group" id="form--{{nextRandom}}" action="{{this.url}}" method="post" enctype="{{if this.isMultipart 'multipart/form-data' 'application/x-www-form-urlencoded'}}" accept-charset="utf-8" >
|
|
4
|
+
{{> components/forms/fields }}
|
|
5
|
+
</form>
|
|
6
|
+
{{/components/forms/backgroundBox }}
|
|
18
7
|
{{~else~}}
|
|
19
8
|
{{> content/webform/components/webform _addClass="print:hidden copytext__clearBox marginTrailer--m"}}
|
|
20
9
|
{{~/if~}}
|