hr-design-system-handlebars 0.117.13 → 0.118.0

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.
Files changed (23) hide show
  1. package/CHANGELOG.md +24 -0
  2. package/dist/assets/index.css +225 -197
  3. package/dist/assets/vendor/js/header.alpine.js +0 -257
  4. package/dist/views/components/content_nav/content_nav.hbs +5 -6
  5. package/dist/views/components/content_nav/content_nav_container.hbs +1 -3
  6. package/dist/views/components/content_nav/content_nav_dropdown.hbs +20 -18
  7. package/dist/views/components/content_nav/content_nav_item.hbs +9 -5
  8. package/dist/views/components/content_nav/content_nav_list.hbs +1 -2
  9. package/dist/views/components/teaser/cluster/teaser_cluster_byline.hbs +25 -25
  10. package/dist/views/components/teaser/content_nav/teaser_content_nav.hbs +2 -5
  11. package/package.json +1 -1
  12. package/src/assets/css/custom-components.css +119 -1
  13. package/src/assets/vendor/js/header.alpine.js +0 -257
  14. package/src/stories/views/components/content_nav/content_nav.hbs +5 -6
  15. package/src/stories/views/components/content_nav/content_nav_container.hbs +1 -3
  16. package/src/stories/views/components/content_nav/content_nav_dropdown.hbs +20 -18
  17. package/src/stories/views/components/content_nav/content_nav_item.hbs +9 -5
  18. package/src/stories/views/components/content_nav/content_nav_list.hbs +1 -2
  19. package/src/stories/views/components/teaser/cluster/teaser_cluster_byline.hbs +25 -25
  20. package/src/stories/views/components/teaser/content_nav/teaser_content_nav.hbs +2 -5
  21. package/src/stories/views/components/teaser/content_nav/teaser_content_nav.stories.mdx +8 -1
  22. package/dist/assets/vendor/js/content_nav.alpine.js +0 -261
  23. package/src/assets/vendor/js/content_nav.alpine.js +0 -261
package/dist/assets/vendor/js/content_nav.alpine.js DELETED
@@ -1,261 +0,0 @@
1
- export default function contentNavigationHandler(id) {
2
- return {
3
- open: false,
4
- contentNavDropdownIsOpen: false,
5
-
6
- shouldDropdownBeShown(teasersize, isDropdown, isMixed) {
7
- if (isDropdown) {
8
- return true
9
- }
10
-
11
- if (isMixed) {
12
- if (teasersize === 100 || teasersize === 66 || teasersize === 50) {
13
- if (this.$screen('lg')) return false
14
- if (this.$screen('md')) return false
15
- if (this.$screen('xs')) return true
16
- } else if (teasersize === 33 || teasersize === 25) {
17
- return true
18
- }
19
- }
20
- },
21
-
22
- shouldContentBeShown(teasersize, isDropdown, isMixed) {
23
- if (isDropdown) {
24
- return this.contentNavDropdownIsOpen
25
- }
26
- if (isMixed) {
27
- if (teasersize === 100 || teasersize === 66 || teasersize === 50) {
28
- if (this.$screen('lg')) return true
29
- if (this.$screen('md')) return true
30
- if (this.$screen('xs')) return this.contentNavDropdownIsOpen
31
- } else if (teasersize === 33 || teasersize === 25) {
32
- return this.contentNavDropdownIsOpen
33
- }
34
- }
35
-
36
- return false
37
- },
38
- chooseListItemStyles(teasersize, isList, isMixed, isDropdown, isFlow) {
39
- let classes = []
40
- console.log(`teasersize:${teasersize}`)
41
-
42
- switch (teasersize) {
43
- case 100:
44
- classes.push('w-full', 'md:w-fit')
45
- isList
46
- ? classes.push('border', 'hover:no-underline')
47
- : isMixed
48
- ? classes.push(
49
- '!w-full',
50
- 'md:!w-fit',
51
- '!mb-0',
52
- 'mx-2',
53
- 'md:!mb-2',
54
- 'md:mr-2',
55
- 'border-l-0',
56
- 'border-r-0',
57
- 'border-t-0',
58
- 'border-b',
59
- 'last:border-b-0',
60
- 'md:!border',
61
- 'md:border-content-nav',
62
- 'border-gray-400',
63
- 'hover:underline',
64
- 'hover:text-content-nav',
65
- 'hover:!bg-white',
66
- 'hover:!fill-content-nav',
67
- 'md:hover:no-underline',
68
- 'md:hover:text-white',
69
- 'md:hover:!bg-content-nav',
70
- 'md:hover:!fill-white'
71
- )
72
- : isDropdown
73
- ? classes.push(
74
- '!w-full',
75
- 'ml-0',
76
- 'md:!w-full',
77
- 'md:mb-0',
78
- 'md:!mr-0',
79
- 'border-gray-400',
80
- 'border-l-0',
81
- 'border-r-0',
82
- 'border-t-0',
83
- 'border-b',
84
- 'last:border-b-0',
85
- 'hover:underline',
86
- 'hover:text-content-nav',
87
- 'hover:!bg-white',
88
- 'hover:!fill-content-nav'
89
- )
90
- : isFlow
91
- ? classes.push('!w-fit', 'border', 'hover:no-underline')
92
- : ''
93
- break
94
- case 66:
95
- classes.push('w-fit')
96
- isList == true
97
- ? classes.push('border', 'mb-2', 'mr-2', 'md:!mr-2', 'hover:no-underline')
98
- : isMixed
99
- ? classes.push(
100
- '!w-full',
101
- 'md:!w-fit',
102
- '!mb-0',
103
- 'md:!mb-2',
104
- 'md:mr-2',
105
- 'border-l-0',
106
- 'border-r-0',
107
- 'border-t-0',
108
- 'border-b',
109
- 'last:border-b-0',
110
- 'md:!border',
111
- 'hover:text-content-nav',
112
- 'hover:!fill-content-nav',
113
- 'hover:!bg-white',
114
- 'md:hover:!bg-content-nav',
115
- 'md:hover:!text-white',
116
- 'md:hover:no-underline',
117
- 'md:hover:!fill-white'
118
- )
119
- : isDropdown
120
- ? classes.push(
121
- '!w-full',
122
- 'md:!w-full',
123
- 'md:mb-0',
124
- 'md:!mr-0',
125
- 'border-l-0',
126
- 'border-r-0',
127
- 'border-t-0',
128
- 'border-b',
129
- 'last:border-b-0',
130
- 'hover:underline',
131
- 'hover:text-content-nav',
132
- 'hover:!bg-white',
133
- 'hover:!fill-content-nav'
134
- )
135
- : isFlow
136
- ? classes.push('!w-fit', 'border', 'hover:no-underline')
137
- : ''
138
- break
139
- case 50:
140
- classes.push('w-full')
141
- isList
142
- ? classes.push('border', 'hover:no-underline')
143
- : isMixed
144
- ? classes.push(
145
- '!w-full',
146
- 'border',
147
- 'md:mb-2',
148
- 'last:mb-0',
149
- 'border-gray-400',
150
- 'border-l-0',
151
- 'border-r-0',
152
- 'border-t-0',
153
- 'md:border',
154
- 'md:border-content-nav',
155
- 'hover:underline',
156
- 'hover:!bg-white',
157
- 'hover:text-content-nav',
158
- 'hover:fill-content-nav',
159
- 'md:hover:!bg-content-nav',
160
- 'md:hover:!text-white',
161
- 'md:hover:fill-white',
162
- 'md:hover:no-underline'
163
- )
164
- : isDropdown
165
- ? classes.push(
166
- '!w-full',
167
- 'md:!w-full',
168
- 'md:mb-0',
169
- 'md:!mr-0',
170
- 'border-l-0',
171
- 'border-r-0',
172
- 'border-t-0',
173
- 'border-b',
174
- 'last:border-b-0',
175
- 'border-gray-400',
176
- 'hover:underline',
177
- 'hover:!text-content-nav',
178
- 'hover:!bg-white',
179
- 'hover:!fill-content-nav'
180
- )
181
- : isFlow
182
- ? classes.push('!w-fit', 'border', 'hover:no-underline')
183
- : ''
184
- break
185
- case 33:
186
- classes.push('w-full')
187
- isList
188
- ? classes.push('border', 'hover:no-underline')
189
- : isMixed
190
- ? classes.push(
191
- '!w-full',
192
- '!mb-0',
193
- 'border-b',
194
- 'last:border-b-0',
195
- 'hover:!bg-white',
196
- 'hover:underline',
197
- 'hover:text-content-nav',
198
- 'hover:!fill-content-nav'
199
- )
200
- : isDropdown
201
- ? classes.push(
202
- '!w-full',
203
- 'md:!w-full',
204
- 'md:mb-0',
205
- 'md:!mr-0',
206
- 'border-l-0',
207
- 'border-r-0',
208
- 'border-t-0',
209
- 'border-b',
210
- 'last:border-b-0',
211
- 'hover:underline',
212
- 'hover:!text-content-nav',
213
- 'hover:!bg-white',
214
- 'hover:!fill-content-nav'
215
- )
216
- : isFlow
217
- ? classes.push('!w-fit', '!mr-2', 'border', 'mb-2', 'hover:no-underline')
218
- : ''
219
- break
220
- case 25:
221
- classes.push('w-full')
222
- isList
223
- ? classes.push('border', 'hover:no-underline')
224
- : isMixed
225
- ? classes.push(
226
- '!w-full',
227
- '!mb-0',
228
- 'border-b',
229
- 'last:border-b-0',
230
- 'hover:!bg-white',
231
- 'hover:underline',
232
- 'hover:!text-content-nav',
233
- 'hover:!fill-content-nav'
234
- )
235
- : isDropdown
236
- ? classes.push(
237
- '!w-full',
238
- 'md:!w-full',
239
- 'md:mb-0',
240
- 'md:!mr-0',
241
- 'border-l-0',
242
- 'border-r-0',
243
- 'border-t-0',
244
- 'border-b',
245
- 'last:border-b-0',
246
- 'hover:underline',
247
- 'hover:text-content-nav',
248
- 'hover:!bg-white',
249
- 'hover:!fill-content-nav'
250
- )
251
- : isFlow
252
- ? classes.push('!w-fit', '!mr-2', 'border', 'mb-2', 'hover:no-underline')
253
- : ''
254
- break
255
- }
256
- for (let i = 0; i < classes.length; i++) {
257
- this.$el.classList.add(classes[i])
258
- }
259
- },
260
- }
261
- }
package/src/assets/vendor/js/content_nav.alpine.js DELETED
@@ -1,261 +0,0 @@
1
- export default function contentNavigationHandler(id) {
2
- return {
3
- open: false,
4
- contentNavDropdownIsOpen: false,
5
-
6
- shouldDropdownBeShown(teasersize, isDropdown, isMixed) {
7
- if (isDropdown) {
8
- return true
9
- }
10
-
11
- if (isMixed) {
12
- if (teasersize === 100 || teasersize === 66 || teasersize === 50) {
13
- if (this.$screen('lg')) return false
14
- if (this.$screen('md')) return false
15
- if (this.$screen('xs')) return true
16
- } else if (teasersize === 33 || teasersize === 25) {
17
- return true
18
- }
19
- }
20
- },
21
-
22
- shouldContentBeShown(teasersize, isDropdown, isMixed) {
23
- if (isDropdown) {
24
- return this.contentNavDropdownIsOpen
25
- }
26
- if (isMixed) {
27
- if (teasersize === 100 || teasersize === 66 || teasersize === 50) {
28
- if (this.$screen('lg')) return true
29
- if (this.$screen('md')) return true
30
- if (this.$screen('xs')) return this.contentNavDropdownIsOpen
31
- } else if (teasersize === 33 || teasersize === 25) {
32
- return this.contentNavDropdownIsOpen
33
- }
34
- }
35
-
36
- return false
37
- },
38
- chooseListItemStyles(teasersize, isList, isMixed, isDropdown, isFlow) {
39
- let classes = []
40
- console.log(`teasersize:${teasersize}`)
41
-
42
- switch (teasersize) {
43
- case 100:
44
- classes.push('w-full', 'md:w-fit')
45
- isList
46
- ? classes.push('border', 'hover:no-underline')
47
- : isMixed
48
- ? classes.push(
49
- '!w-full',
50
- 'md:!w-fit',
51
- '!mb-0',
52
- 'mx-2',
53
- 'md:!mb-2',
54
- 'md:mr-2',
55
- 'border-l-0',
56
- 'border-r-0',
57
- 'border-t-0',
58
- 'border-b',
59
- 'last:border-b-0',
60
- 'md:!border',
61
- 'md:border-content-nav',
62
- 'border-gray-400',
63
- 'hover:underline',
64
- 'hover:text-content-nav',
65
- 'hover:!bg-white',
66
- 'hover:!fill-content-nav',
67
- 'md:hover:no-underline',
68
- 'md:hover:text-white',
69
- 'md:hover:!bg-content-nav',
70
- 'md:hover:!fill-white'
71
- )
72
- : isDropdown
73
- ? classes.push(
74
- '!w-full',
75
- 'ml-0',
76
- 'md:!w-full',
77
- 'md:mb-0',
78
- 'md:!mr-0',
79
- 'border-gray-400',
80
- 'border-l-0',
81
- 'border-r-0',
82
- 'border-t-0',
83
- 'border-b',
84
- 'last:border-b-0',
85
- 'hover:underline',
86
- 'hover:text-content-nav',
87
- 'hover:!bg-white',
88
- 'hover:!fill-content-nav'
89
- )
90
- : isFlow
91
- ? classes.push('!w-fit', 'border', 'hover:no-underline')
92
- : ''
93
- break
94
- case 66:
95
- classes.push('w-fit')
96
- isList == true
97
- ? classes.push('border', 'mb-2', 'mr-2', 'md:!mr-2', 'hover:no-underline')
98
- : isMixed
99
- ? classes.push(
100
- '!w-full',
101
- 'md:!w-fit',
102
- '!mb-0',
103
- 'md:!mb-2',
104
- 'md:mr-2',
105
- 'border-l-0',
106
- 'border-r-0',
107
- 'border-t-0',
108
- 'border-b',
109
- 'last:border-b-0',
110
- 'md:!border',
111
- 'hover:text-content-nav',
112
- 'hover:!fill-content-nav',
113
- 'hover:!bg-white',
114
- 'md:hover:!bg-content-nav',
115
- 'md:hover:!text-white',
116
- 'md:hover:no-underline',
117
- 'md:hover:!fill-white'
118
- )
119
- : isDropdown
120
- ? classes.push(
121
- '!w-full',
122
- 'md:!w-full',
123
- 'md:mb-0',
124
- 'md:!mr-0',
125
- 'border-l-0',
126
- 'border-r-0',
127
- 'border-t-0',
128
- 'border-b',
129
- 'last:border-b-0',
130
- 'hover:underline',
131
- 'hover:text-content-nav',
132
- 'hover:!bg-white',
133
- 'hover:!fill-content-nav'
134
- )
135
- : isFlow
136
- ? classes.push('!w-fit', 'border', 'hover:no-underline')
137
- : ''
138
- break
139
- case 50:
140
- classes.push('w-full')
141
- isList
142
- ? classes.push('border', 'hover:no-underline')
143
- : isMixed
144
- ? classes.push(
145
- '!w-full',
146
- 'border',
147
- 'md:mb-2',
148
- 'last:mb-0',
149
- 'border-gray-400',
150
- 'border-l-0',
151
- 'border-r-0',
152
- 'border-t-0',
153
- 'md:border',
154
- 'md:border-content-nav',
155
- 'hover:underline',
156
- 'hover:!bg-white',
157
- 'hover:text-content-nav',
158
- 'hover:fill-content-nav',
159
- 'md:hover:!bg-content-nav',
160
- 'md:hover:!text-white',
161
- 'md:hover:fill-white',
162
- 'md:hover:no-underline'
163
- )
164
- : isDropdown
165
- ? classes.push(
166
- '!w-full',
167
- 'md:!w-full',
168
- 'md:mb-0',
169
- 'md:!mr-0',
170
- 'border-l-0',
171
- 'border-r-0',
172
- 'border-t-0',
173
- 'border-b',
174
- 'last:border-b-0',
175
- 'border-gray-400',
176
- 'hover:underline',
177
- 'hover:!text-content-nav',
178
- 'hover:!bg-white',
179
- 'hover:!fill-content-nav'
180
- )
181
- : isFlow
182
- ? classes.push('!w-fit', 'border', 'hover:no-underline')
183
- : ''
184
- break
185
- case 33:
186
- classes.push('w-full')
187
- isList
188
- ? classes.push('border', 'hover:no-underline')
189
- : isMixed
190
- ? classes.push(
191
- '!w-full',
192
- '!mb-0',
193
- 'border-b',
194
- 'last:border-b-0',
195
- 'hover:!bg-white',
196
- 'hover:underline',
197
- 'hover:text-content-nav',
198
- 'hover:!fill-content-nav'
199
- )
200
- : isDropdown
201
- ? classes.push(
202
- '!w-full',
203
- 'md:!w-full',
204
- 'md:mb-0',
205
- 'md:!mr-0',
206
- 'border-l-0',
207
- 'border-r-0',
208
- 'border-t-0',
209
- 'border-b',
210
- 'last:border-b-0',
211
- 'hover:underline',
212
- 'hover:!text-content-nav',
213
- 'hover:!bg-white',
214
- 'hover:!fill-content-nav'
215
- )
216
- : isFlow
217
- ? classes.push('!w-fit', '!mr-2', 'border', 'mb-2', 'hover:no-underline')
218
- : ''
219
- break
220
- case 25:
221
- classes.push('w-full')
222
- isList
223
- ? classes.push('border', 'hover:no-underline')
224
- : isMixed
225
- ? classes.push(
226
- '!w-full',
227
- '!mb-0',
228
- 'border-b',
229
- 'last:border-b-0',
230
- 'hover:!bg-white',
231
- 'hover:underline',
232
- 'hover:!text-content-nav',
233
- 'hover:!fill-content-nav'
234
- )
235
- : isDropdown
236
- ? classes.push(
237
- '!w-full',
238
- 'md:!w-full',
239
- 'md:mb-0',
240
- 'md:!mr-0',
241
- 'border-l-0',
242
- 'border-r-0',
243
- 'border-t-0',
244
- 'border-b',
245
- 'last:border-b-0',
246
- 'hover:underline',
247
- 'hover:text-content-nav',
248
- 'hover:!bg-white',
249
- 'hover:!fill-content-nav'
250
- )
251
- : isFlow
252
- ? classes.push('!w-fit', '!mr-2', 'border', 'mb-2', 'hover:no-underline')
253
- : ''
254
- break
255
- }
256
- for (let i = 0; i < classes.length; i++) {
257
- this.$el.classList.add(classes[i])
258
- }
259
- },
260
- }
261
- }