hr-design-system-handlebars 1.83.12 → 1.84.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.
- package/.storybook/main.js +29 -19
- package/.storybook/manager.js +1 -1
- package/.storybook/preview.js +4 -3
- package/CHANGELOG.md +12 -0
- package/build-storybook.log +34 -2446
- package/chromatic.config.json +5 -0
- package/dist/assets/index.css +3 -3
- package/package.json +138 -136
- package/src/stories/basics/Fixtures.mdx +1 -1
- package/src/stories/basics/conventions-and-datastructure.mdx +4 -12
- package/src/stories/views/components/banner/header.stories.js +4 -5
- package/src/stories/views/components/banner/structure_nav/structureNav.stories.js +3 -4
- package/src/stories/views/components/base/link.mdx +2 -2
- package/src/stories/views/components/button/button.mdx +2 -2
- package/src/stories/views/components/button/button.stories.js +4 -5
- package/src/stories/views/components/button/components/button_icon.mdx +2 -2
- package/src/stories/views/components/button/components/button_label.mdx +2 -2
- package/src/stories/views/components/button/link_button.mdx +2 -2
- package/src/stories/views/components/button/link_button.stories.js +3 -4
- package/src/stories/views/components/content/content_footer/content_footer.mdx +2 -2
- package/src/stories/views/components/content/content_footer/content_footer.stories.js +1 -1
- package/src/stories/views/components/content/copytext/components/accordion/accordion.mdx +2 -2
- package/src/stories/views/components/content/copytext/components/contentbox/contentbox.mdx +2 -2
- package/src/stories/views/components/content/copytext/copytext.mdx +2 -2
- package/src/stories/views/components/content/copytext/copytext.stories.js +2 -2
- package/src/stories/views/components/content/social_media_links/social_media_links.mdx +1 -1
- package/src/stories/views/components/content/social_media_links/social_media_links.stories.js +2 -4
- package/src/stories/views/components/event/calendar/event_calendar_components.mdx +1 -1
- package/src/stories/views/components/externalService/external_service.mdx +1 -1
- package/src/stories/views/components/externalService/external_service.stories.js +10 -13
- package/src/stories/views/components/footer/page_footer.mdx +1 -1
- package/src/stories/views/components/footer/page_footer.stories.js +4 -6
- package/src/stories/views/components/geoTag/geoTag.mdx +1 -1
- package/src/stories/views/components/grid/grid.mdx +2 -2
- package/src/stories/views/components/horizontal_scroll_container/horizontal_scroll_container.stories.js +1 -1
- package/src/stories/views/components/label/label.mdx +1 -1
- package/src/stories/views/components/mediaplayer/mediaplayer.mdx +2 -2
- package/src/stories/views/components/mediaplayer/mediaplayer.stories.js +16 -14
- package/src/stories/views/components/mediaplayer/mediaplayer_button.mdx +2 -2
- package/src/stories/views/components/modal/modal.mdx +2 -2
- package/src/stories/views/components/modal/modal.stories.js +10 -10
- package/src/stories/views/components/navigation/breadcrumb/breadcrumb.mdx +2 -2
- package/src/stories/views/components/page/components/appendix.mdx +2 -2
- package/src/stories/views/components/page/components/metadatabox.mdx +2 -2
- package/src/stories/views/components/page/components/metadatabox.stories.js +2 -3
- package/src/stories/views/components/page/index/page.mdx +2 -2
- package/src/stories/views/components/page/index/page.stories.js +8 -8
- package/src/stories/views/components/page/index/page_offline.stories.js +2 -2
- package/src/stories/views/components/page/index/page_player.mdx +2 -2
- package/src/stories/views/components/page/podcast/podcast_episode_article.mdx +1 -1
- package/src/stories/views/components/page/podcast/podcast_episode_article.stories.js +1 -1
- package/src/stories/views/components/page/podcast/podcast_playlist_article.mdx +1 -1
- package/src/stories/views/components/page/podcast/podcast_playlist_article.stories.js +1 -1
- package/src/stories/views/components/page/story/story_main.mdx +1 -1
- package/src/stories/views/components/page/story/story_main.stories.js +6 -6
- package/src/stories/views/components/pagination/page_pagination.mdx +1 -1
- package/src/stories/views/components/pagination/page_pagination.stories.js +1 -2
- package/src/stories/views/components/podcast/podcast_subscribe_button.mdx +1 -1
- package/src/stories/views/components/podcast/podcast_subscribe_button.stories.js +4 -4
- package/src/stories/views/components/site_header/header.mdx +1 -1
- package/src/stories/views/components/site_header/header.stories.js +2 -3
- package/src/stories/views/components/social_sharing/social_sharing.mdx +1 -1
- package/src/stories/views/components/social_sharing/social_sharing.stories.js +4 -5
- package/src/stories/views/components/teaser/cluster/teaser_cluster.mdx +1 -1
- package/src/stories/views/components/teaser/components/teaser_byline.mdx +2 -2
- package/src/stories/views/components/teaser/components/teaser_featured_content.mdx +2 -2
- package/src/stories/views/components/teaser/components/teaser_featured_content.stories.js +1 -1
- package/src/stories/views/components/teaser/components/teaser_heading.mdx +2 -2
- package/src/stories/views/components/teaser/components/teaser_text.mdx +1 -1
- package/src/stories/views/components/teaser/components/teaser_title.mdx +2 -2
- package/src/stories/views/components/teaser/components/teaser_topline.mdx +2 -2
- package/src/stories/views/components/teaser/content_nav/teaser_content_nav.mdx +1 -1
- package/src/stories/views/components/teaser/group_teaser/group.mdx +2 -2
- package/src/stories/views/components/teaser/podcast/podcast.mdx +1 -1
- package/src/stories/views/components/teaser/podcast/podcast.stories.js +0 -1
- package/src/stories/views/components/teaser/tabbox/teaser_tabbox.mdx +1 -1
- package/src/stories/views/components/teaser/tabbox/teaser_tabbox.stories.js +1 -1
- package/src/stories/views/components/teaser/teaser_alternativ.mdx +1 -1
- package/src/stories/views/components/teaser/teaser_alternativ_av.mdx +1 -1
- package/src/stories/views/components/teaser/teaser_event_calendar.mdx +1 -1
- package/src/stories/views/components/teaser/teaser_indextext.mdx +2 -2
- package/src/stories/views/components/teaser/teaser_logic/teaser_logic.mdx +1 -1
- package/src/stories/views/components/teaser/teaser_poster.mdx +2 -2
- package/src/stories/views/components/teaser/teaser_stage.mdx +1 -1
- package/src/stories/views/components/teaser/teaser_standard.mdx +1 -1
- package/src/stories/views/components/teaser/teaser_standard.stories.js +1 -1
- package/src/stories/views/components/teaser/teaser_standard_av.mdx +1 -1
- package/src/stories/views/components/teaser/teaser_standard_event.mdx +1 -1
- package/src/stories/views/components/teaser/ticker/teaser_ticker_alternativ.mdx +1 -1
- package/src/stories/views/components/teaser/ticker/teaser_ticker_alternativ.stories.js +0 -1
- package/src/stories/views/components/teaser/ticker/teaser_ticker_standard.mdx +1 -1
- package/src/stories/views/components/teaser/ticker/teaser_ticker_standard.stories.js +1 -1
- package/src/stories/views/components/teaser/ticker/teaser_ticker_timeline.mdx +1 -1
- package/src/stories/views/components/teaser/ticker/teaser_ticker_timeline.stories.js +2 -2
package/dist/assets/index.css
CHANGED
|
@@ -3322,7 +3322,7 @@ article.indexTextDS .indexTextHighlighted .link {
|
|
|
3322
3322
|
border-bottom-color: var(--color-secondary-ds);
|
|
3323
3323
|
}
|
|
3324
3324
|
.counter-reset {
|
|
3325
|
-
counter-reset:
|
|
3325
|
+
counter-reset: cnt1721909350986;
|
|
3326
3326
|
}
|
|
3327
3327
|
.hyphens-auto {
|
|
3328
3328
|
-webkit-hyphens: auto;
|
|
@@ -3730,7 +3730,7 @@ article.indexTextDS .indexTextHighlighted .link {
|
|
|
3730
3730
|
--tw-ring-color: rgba(255, 255, 255, 0.5);
|
|
3731
3731
|
}
|
|
3732
3732
|
.-ordered {
|
|
3733
|
-
counter-increment:
|
|
3733
|
+
counter-increment: cnt1721909350986 1;
|
|
3734
3734
|
}
|
|
3735
3735
|
.-ordered::before {
|
|
3736
3736
|
position: absolute;
|
|
@@ -3746,7 +3746,7 @@ article.indexTextDS .indexTextHighlighted .link {
|
|
|
3746
3746
|
letter-spacing: .0125em;
|
|
3747
3747
|
--tw-text-opacity: 1;
|
|
3748
3748
|
color: rgba(0, 0, 0, var(--tw-text-opacity));
|
|
3749
|
-
content: counter(
|
|
3749
|
+
content: counter(cnt1721909350986);
|
|
3750
3750
|
}
|
|
3751
3751
|
/*! ****************************/
|
|
3752
3752
|
/*! DataPolicy stuff */
|
package/package.json
CHANGED
|
@@ -1,138 +1,140 @@
|
|
|
1
1
|
{
|
|
2
|
-
|
|
3
|
-
|
|
4
|
-
|
|
5
|
-
|
|
6
|
-
|
|
7
|
-
|
|
8
|
-
|
|
9
|
-
|
|
10
|
-
|
|
11
|
-
|
|
12
|
-
|
|
13
|
-
|
|
14
|
-
|
|
15
|
-
|
|
16
|
-
|
|
17
|
-
|
|
18
|
-
|
|
19
|
-
|
|
20
|
-
|
|
21
|
-
|
|
22
|
-
|
|
23
|
-
|
|
24
|
-
|
|
25
|
-
|
|
26
|
-
|
|
27
|
-
|
|
28
|
-
|
|
29
|
-
|
|
30
|
-
|
|
31
|
-
|
|
32
|
-
|
|
33
|
-
|
|
34
|
-
|
|
35
|
-
|
|
36
|
-
|
|
37
|
-
|
|
38
|
-
|
|
39
|
-
|
|
40
|
-
|
|
41
|
-
|
|
42
|
-
|
|
43
|
-
|
|
44
|
-
|
|
45
|
-
|
|
46
|
-
|
|
47
|
-
|
|
48
|
-
|
|
49
|
-
|
|
50
|
-
|
|
51
|
-
|
|
52
|
-
|
|
53
|
-
|
|
54
|
-
|
|
55
|
-
|
|
56
|
-
|
|
57
|
-
|
|
58
|
-
|
|
59
|
-
|
|
60
|
-
|
|
61
|
-
|
|
62
|
-
|
|
63
|
-
|
|
64
|
-
|
|
65
|
-
|
|
66
|
-
|
|
67
|
-
|
|
68
|
-
|
|
69
|
-
|
|
70
|
-
|
|
71
|
-
|
|
72
|
-
|
|
73
|
-
|
|
74
|
-
|
|
75
|
-
|
|
76
|
-
|
|
77
|
-
|
|
78
|
-
|
|
79
|
-
|
|
80
|
-
|
|
81
|
-
|
|
82
|
-
|
|
83
|
-
|
|
84
|
-
|
|
85
|
-
|
|
86
|
-
|
|
87
|
-
|
|
88
|
-
|
|
89
|
-
|
|
90
|
-
|
|
91
|
-
|
|
92
|
-
|
|
93
|
-
|
|
94
|
-
|
|
95
|
-
|
|
96
|
-
|
|
97
|
-
|
|
98
|
-
|
|
99
|
-
|
|
100
|
-
|
|
101
|
-
|
|
102
|
-
|
|
103
|
-
|
|
104
|
-
|
|
105
|
-
|
|
106
|
-
|
|
107
|
-
|
|
108
|
-
|
|
109
|
-
|
|
110
|
-
|
|
111
|
-
|
|
112
|
-
"
|
|
113
|
-
|
|
114
|
-
|
|
115
|
-
|
|
116
|
-
|
|
117
|
-
|
|
118
|
-
|
|
119
|
-
|
|
120
|
-
|
|
121
|
-
|
|
122
|
-
|
|
123
|
-
|
|
124
|
-
|
|
125
|
-
"
|
|
126
|
-
|
|
127
|
-
|
|
128
|
-
|
|
129
|
-
|
|
130
|
-
|
|
131
|
-
|
|
132
|
-
|
|
133
|
-
"
|
|
134
|
-
|
|
135
|
-
|
|
136
|
-
|
|
137
|
-
|
|
2
|
+
"name": "hr-design-system-handlebars",
|
|
3
|
+
"description": "Web component library of Hessischer Rundfunk",
|
|
4
|
+
"author": "Hessischer Rundfunk <technikteam@hr.de>",
|
|
5
|
+
"private": false,
|
|
6
|
+
"license": "MIT",
|
|
7
|
+
"main": "dist/index.js",
|
|
8
|
+
"repository": "https://github.com/szuelch/hr-design-system-handlebars",
|
|
9
|
+
"version": "1.84.0",
|
|
10
|
+
"scripts": {
|
|
11
|
+
"test": "echo \"Error: no test specified\" && exit 1",
|
|
12
|
+
"storybook": "storybook dev -p 6006 public",
|
|
13
|
+
"build-storybook": "storybook build",
|
|
14
|
+
"build-storybook-with-tailwind": "npm run build:tailwind && npm run build-storybook",
|
|
15
|
+
"build-storybook-docs": "storybook build --docs",
|
|
16
|
+
"build-storybook-docs-with-tailwind": "npm run build:tailwind && npm run build-storybook-docs",
|
|
17
|
+
"build:tailwind": "postcss src/assets/tailwind.css -o dist/assets/index.css",
|
|
18
|
+
"build": "yarn clean && yarn build:tailwind && node ./build/scripts/build.js && yarn preparePartialsForDelivery",
|
|
19
|
+
"chromatic": "npx chromatic --project-token 84f1628f224a",
|
|
20
|
+
"clean": "rimraf dist",
|
|
21
|
+
"release": "npx auto shipit --base-branch=main",
|
|
22
|
+
"optimize-assets": "gulp",
|
|
23
|
+
"optimize-svgs": "gulp optimizeSvgs",
|
|
24
|
+
"parseJson": "gulp parseJson",
|
|
25
|
+
"partialsToJs": "gulp convertPartialsToJs",
|
|
26
|
+
"saveLogoFilesToFolder": "gulp saveLogoFilesToFolder",
|
|
27
|
+
"preparePartialsForDelivery": "gulp preparePartialsForDelivery",
|
|
28
|
+
"create-modernizr-config": "gulp createModernizrConfig",
|
|
29
|
+
"merge-locatags": "gulp mergeLocatags",
|
|
30
|
+
"prepare": "yarn build",
|
|
31
|
+
"test-storybook": "test-storybook"
|
|
32
|
+
},
|
|
33
|
+
"browserslist": [
|
|
34
|
+
"last 2 versions",
|
|
35
|
+
"not dead",
|
|
36
|
+
"Firefox ESR",
|
|
37
|
+
"iOS >= 10",
|
|
38
|
+
"Safari >= 10",
|
|
39
|
+
"> 2.5% in DE"
|
|
40
|
+
],
|
|
41
|
+
"keywords": [],
|
|
42
|
+
"devDependencies": {
|
|
43
|
+
"@babel/cli": "^7.13.16",
|
|
44
|
+
"@babel/core": "^7.12.10",
|
|
45
|
+
"@babel/preset-env": "^7.21.4",
|
|
46
|
+
"@chromatic-com/storybook": "1",
|
|
47
|
+
"@storybook/addon-a11y": "^8.2.6",
|
|
48
|
+
"@storybook/addon-actions": "^8.2.6",
|
|
49
|
+
"@storybook/addon-console": "^3.0.0",
|
|
50
|
+
"@storybook/addon-essentials": "^8.2.6",
|
|
51
|
+
"@storybook/addon-interactions": "^8.2.6",
|
|
52
|
+
"@storybook/addon-links": "^8.2.6",
|
|
53
|
+
"@storybook/addon-styling-webpack": "1.0.0",
|
|
54
|
+
"@storybook/addon-themes": "^8.2.6",
|
|
55
|
+
"@storybook/addon-webpack5-compiler-babel": "3.0.3",
|
|
56
|
+
"@storybook/addon-webpack5-compiler-swc": "1.0.4",
|
|
57
|
+
"@storybook/blocks": "^8.2.6",
|
|
58
|
+
"@storybook/html": "^8.2.6",
|
|
59
|
+
"@storybook/html-webpack5": "^8.2.6",
|
|
60
|
+
"@storybook/test": "^8.2.6",
|
|
61
|
+
"@storybook/test-runner": "^0.19.1",
|
|
62
|
+
"@storybook/theming": "^8.2.6",
|
|
63
|
+
"auto": "^11.0.5",
|
|
64
|
+
"autoprefixer": "^10.4.2",
|
|
65
|
+
"babel-loader": "^8.2.2",
|
|
66
|
+
"chromatic": "^10.9.5",
|
|
67
|
+
"copyfiles": "^2.4.1",
|
|
68
|
+
"core-js-pure": "^3.30.1",
|
|
69
|
+
"cross-env": "^7.0.3",
|
|
70
|
+
"css-loader": "^7.1.2",
|
|
71
|
+
"fancy-log": "^2.0.0",
|
|
72
|
+
"file-loader": "^6.2.0",
|
|
73
|
+
"glob": "^7.1.7",
|
|
74
|
+
"gulp": "^4.0.2",
|
|
75
|
+
"gulp-cheerio": "^1.0.0",
|
|
76
|
+
"gulp-cli": "^2.3.0",
|
|
77
|
+
"gulp-concat": "^2.6.1",
|
|
78
|
+
"gulp-debug": "^4.0.0",
|
|
79
|
+
"gulp-file-cache": "^0.0.1",
|
|
80
|
+
"gulp-filter": "^7.0.0",
|
|
81
|
+
"gulp-html-to-js": "^0.0.7",
|
|
82
|
+
"gulp-json-transform": "^0.4.8",
|
|
83
|
+
"gulp-merge-json": "^2.1.2",
|
|
84
|
+
"gulp-modernizr": "^4.0.3",
|
|
85
|
+
"gulp-rename": "^2.0.0",
|
|
86
|
+
"gulp-replace": "^1.1.4",
|
|
87
|
+
"gulp-svgmin": "^4.0.1",
|
|
88
|
+
"gulp-svgstore": "^8.0.0",
|
|
89
|
+
"handlebars": "^4.7.6",
|
|
90
|
+
"handlebars-loader": "^1.7.1",
|
|
91
|
+
"merge-stream": "^2.0.0",
|
|
92
|
+
"node-json-minify": "^3.0.0",
|
|
93
|
+
"path": "^0.12.7",
|
|
94
|
+
"postcss": "^8.4.5",
|
|
95
|
+
"postcss-cli": "^8.3.1",
|
|
96
|
+
"postcss-import": "^14.1.0",
|
|
97
|
+
"postcss-loader": "^4.2.0",
|
|
98
|
+
"postcss-nested": "^6.0.1",
|
|
99
|
+
"postcss-preset-env": "^7.3.1",
|
|
100
|
+
"prettier": "^2.2.1",
|
|
101
|
+
"raw-loader": "^4.0.2",
|
|
102
|
+
"remark-gfm": "^3.0.1",
|
|
103
|
+
"rimraf": "^3.0.2",
|
|
104
|
+
"storybook": "^8.2.6",
|
|
105
|
+
"storybook-conditional-toolbar-selector": "^1.0.3",
|
|
106
|
+
"style-loader": "^4.0.0",
|
|
107
|
+
"tailwindcss": "^3.0.23",
|
|
108
|
+
"tailwindcss-hyphens": "^0.1.0",
|
|
109
|
+
"tailwindcss-important": "^1.0.0",
|
|
110
|
+
"typescript": "^5.0.4",
|
|
111
|
+
"underscore": "^1.13.2",
|
|
112
|
+
"zepto-modules": "^1.0.1"
|
|
113
|
+
},
|
|
114
|
+
"dependencies": {
|
|
115
|
+
"@alpine-collective/toolkit": "^1.0.0",
|
|
116
|
+
"@alpinejs/anchor": "^3.13.3",
|
|
117
|
+
"@alpinejs/collapse": "^3.8.1",
|
|
118
|
+
"@alpinejs/intersect": "^3.13.3",
|
|
119
|
+
"@tailwindcss/line-clamp": "^0.4.2",
|
|
120
|
+
"a11y-dialog": "^8.0.4",
|
|
121
|
+
"alpinejs": "^3.8.1",
|
|
122
|
+
"async-alpine": "^1.0.0",
|
|
123
|
+
"checkcss": "^2.0.9",
|
|
124
|
+
"dialog-polyfill": "^0.5.6",
|
|
125
|
+
"tailwindcss-counter": "^1.1.3"
|
|
126
|
+
},
|
|
127
|
+
"prettier": {
|
|
128
|
+
"tabWidth": 4,
|
|
129
|
+
"quoteProps": "consistent",
|
|
130
|
+
"semi": false,
|
|
131
|
+
"singleQuote": true,
|
|
132
|
+
"endOfLine": "lf",
|
|
133
|
+
"printWidth": 100
|
|
134
|
+
},
|
|
135
|
+
"browser": {
|
|
136
|
+
"fs": false,
|
|
137
|
+
"path": false,
|
|
138
|
+
"os": false
|
|
139
|
+
}
|
|
138
140
|
}
|
|
@@ -460,7 +460,7 @@ stehen danach als Javascript-Objekt zur Verfügung. Um sie in einer Story zu nut
|
|
|
460
460
|
werden. Das folgende Beispiel soll dies verdeutlichen.
|
|
461
461
|
|
|
462
462
|
```javascript
|
|
463
|
-
import {
|
|
463
|
+
import { Meta, Story, Canvas, Preview } from '@storybook/addon-docs'
|
|
464
464
|
import xxlTeaserSerifWithLabel from './fixtures/teaser_standard_xxl_serif_label.json'
|
|
465
465
|
import xxlTeaserSerifWithComments from './fixtures/teaser_standard_xxl_serif_comments.json'
|
|
466
466
|
import xxlTeaserSerif from './fixtures/teaser_standard_xxl_serif.json'
|
|
@@ -21,9 +21,7 @@ Dieses Kapitel richtet sich vor allem an die Entwickler des Designsystems. Es er
|
|
|
21
21
|
|
|
22
22
|
## Aufbau der Datenstruktur des Designsystems
|
|
23
23
|
|
|
24
|
-
|
|
25
|
-
<pre>
|
|
26
|
-
{`
|
|
24
|
+
```
|
|
27
25
|
.github/
|
|
28
26
|
|——— workflows/
|
|
29
27
|
.storybook/
|
|
@@ -50,9 +48,7 @@ package.json
|
|
|
50
48
|
postcss.config.js
|
|
51
49
|
README.md
|
|
52
50
|
tailwind.config.js
|
|
53
|
-
|
|
54
|
-
</pre>
|
|
55
|
-
</Canvas>
|
|
51
|
+
```
|
|
56
52
|
|
|
57
53
|
Im folgenden werden kurz die Ordner, deren Inhalte und andere für das Designsystem wichtige Dateien beschrieben
|
|
58
54
|
|
|
@@ -83,9 +79,7 @@ In den Ordner `dist` werden bei einem Release verschiedene Dateien (u.a. die Tem
|
|
|
83
79
|
|
|
84
80
|
### src
|
|
85
81
|
|
|
86
|
-
|
|
87
|
-
<pre>
|
|
88
|
-
{`
|
|
82
|
+
```
|
|
89
83
|
src/
|
|
90
84
|
|——— assets/
|
|
91
85
|
| |——— brand/
|
|
@@ -99,9 +93,7 @@ src/
|
|
|
99
93
|
| | |——— base/
|
|
100
94
|
| | |——— components/
|
|
101
95
|
| | |——— pages/
|
|
102
|
-
|
|
103
|
-
</pre>
|
|
104
|
-
</Canvas>
|
|
96
|
+
```
|
|
105
97
|
|
|
106
98
|
Der `src` Ordner enthält die Unterordner `assets` sowie `stories`. Im Ordner `assets` finden sich die Folgenden Ordner und Dateien
|
|
107
99
|
|
|
@@ -4,7 +4,7 @@ import bannerData from './fixtures/banner.json'
|
|
|
4
4
|
const TemplateHeader = (args, { globals: { theme } }) => {
|
|
5
5
|
// You can either use a function to create DOM elements or use a plain html string!
|
|
6
6
|
// return `<div>${label}</div>`;
|
|
7
|
-
let brand = undefined !== theme ? theme : 'hessenschau'
|
|
7
|
+
let brand = undefined !== theme ? theme : 'hessenschau'
|
|
8
8
|
return header({ brand, ...args })
|
|
9
9
|
}
|
|
10
10
|
|
|
@@ -30,7 +30,6 @@ export const Seitenfooter = {
|
|
|
30
30
|
args: {
|
|
31
31
|
...bannerData,
|
|
32
32
|
_currentPageUrl: '#currentPage',
|
|
33
|
-
_currentPageTitle:
|
|
34
|
-
}
|
|
35
|
-
|
|
36
|
-
}
|
|
33
|
+
_currentPageTitle: 'Der hr3 Nachmittag',
|
|
34
|
+
},
|
|
35
|
+
}
|
|
@@ -4,7 +4,7 @@ import structureNavData from '../fixtures/structureNav.json'
|
|
|
4
4
|
const TemplateStructureNav = (args, { globals: { theme } }) => {
|
|
5
5
|
// You can either use a function to create DOM elements or use a plain html string!
|
|
6
6
|
// return `<div>${label}</div>`;
|
|
7
|
-
let brand = undefined !== theme ? theme : 'hessenschau'
|
|
7
|
+
let brand = undefined !== theme ? theme : 'hessenschau'
|
|
8
8
|
return structureNav({ brand, ...args })
|
|
9
9
|
}
|
|
10
10
|
|
|
@@ -27,6 +27,5 @@ export default {
|
|
|
27
27
|
export const Seitenfooter = {
|
|
28
28
|
render: TemplateStructureNav.bind({}),
|
|
29
29
|
name: 'StructureNav',
|
|
30
|
-
args: structureNavData
|
|
31
|
-
|
|
32
|
-
}
|
|
30
|
+
args: structureNavData,
|
|
31
|
+
}
|
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
import {
|
|
1
|
+
import { ArgTypes, Meta, Story, Canvas } from '@storybook/blocks'
|
|
2
2
|
import * as LinkStories from './link.stories'
|
|
3
3
|
|
|
4
4
|
<Meta of={LinkStories} />
|
|
@@ -21,7 +21,7 @@ Sobald es einen standardisierten Text-Link oder etwas ähnliches gibt kann und s
|
|
|
21
21
|
|
|
22
22
|
## Eigenschaften
|
|
23
23
|
|
|
24
|
-
<
|
|
24
|
+
<ArgTypes story="Spielplatz" />
|
|
25
25
|
|
|
26
26
|
## Verwendung
|
|
27
27
|
|
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
import {
|
|
1
|
+
import { ArgTypes, Meta, Story, Canvas } from '@storybook/blocks'
|
|
2
2
|
import * as ButtonStories from './button.stories'
|
|
3
3
|
|
|
4
4
|
<Meta of={ButtonStories} />
|
|
@@ -30,7 +30,7 @@ Alle Inhalte des Buttons, wie das [Label](?path=/docs/komponenten-buttons-kompon
|
|
|
30
30
|
|
|
31
31
|
## Eigenschaften
|
|
32
32
|
|
|
33
|
-
<
|
|
33
|
+
<ArgTypes story="Spielplatz" />
|
|
34
34
|
|
|
35
35
|
## Varianten
|
|
36
36
|
|
|
@@ -408,7 +408,7 @@ export const ButtonPrimaryDisabled = {
|
|
|
408
408
|
args: {
|
|
409
409
|
_size: 'lg',
|
|
410
410
|
_label: 'Primary',
|
|
411
|
-
_disabled
|
|
411
|
+
_disabled: true,
|
|
412
412
|
},
|
|
413
413
|
}
|
|
414
414
|
|
|
@@ -430,7 +430,7 @@ export const ButtonSecondaryDisabled = {
|
|
|
430
430
|
_size: 'lg',
|
|
431
431
|
_label: 'Secondary',
|
|
432
432
|
_variant: 'secondary',
|
|
433
|
-
_disabled
|
|
433
|
+
_disabled: true,
|
|
434
434
|
},
|
|
435
435
|
}
|
|
436
436
|
|
|
@@ -452,7 +452,7 @@ export const ButtonTertiaryDisabled = {
|
|
|
452
452
|
_size: 'lg',
|
|
453
453
|
_label: 'Tertiary',
|
|
454
454
|
_variant: 'tertiary',
|
|
455
|
-
_disabled
|
|
455
|
+
_disabled: true,
|
|
456
456
|
},
|
|
457
457
|
}
|
|
458
458
|
|
|
@@ -477,7 +477,6 @@ export const ButtonIconRechts = {
|
|
|
477
477
|
},
|
|
478
478
|
}
|
|
479
479
|
|
|
480
|
-
|
|
481
480
|
export const ButtonIconLinks = {
|
|
482
481
|
render: buttonWithLabelAndIconLeftTemplate.bind({}),
|
|
483
482
|
name: 'Button - Icon links',
|
|
@@ -574,4 +573,4 @@ export const ButtonTertiaryAufFarbigemHintergrund = {
|
|
|
574
573
|
_variant: 'tertiary',
|
|
575
574
|
_onBackground: true,
|
|
576
575
|
},
|
|
577
|
-
}
|
|
576
|
+
}
|
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
import {
|
|
1
|
+
import { ArgTypes, Meta, Story, Canvas } from '@storybook/blocks'
|
|
2
2
|
import * as ButtonIconStories from './button_icon.stories'
|
|
3
3
|
|
|
4
4
|
<Meta of={ButtonIconStories} />
|
|
@@ -10,7 +10,7 @@ ausschließlich als Subkomponente der Button-Komponente eingebunden werden.
|
|
|
10
10
|
|
|
11
11
|
## Eigenschaften
|
|
12
12
|
|
|
13
|
-
<
|
|
13
|
+
<ArgTypes story="Icon" />
|
|
14
14
|
|
|
15
15
|
## Verwendung
|
|
16
16
|
|
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
import {
|
|
1
|
+
import { ArgTypes, Meta, Story, Canvas } from '@storybook/blocks'
|
|
2
2
|
import * as ButtonLabelStories from './button_label.stories'
|
|
3
3
|
|
|
4
4
|
<Meta of={ButtonLabelStories} />
|
|
@@ -10,7 +10,7 @@ ausschließlich als Subkomponente der Button-Komponente eingebunden werden.
|
|
|
10
10
|
|
|
11
11
|
## Eigenschaften
|
|
12
12
|
|
|
13
|
-
<
|
|
13
|
+
<ArgTypes story="Label" />
|
|
14
14
|
|
|
15
15
|
## Verwendung
|
|
16
16
|
|
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
import {
|
|
1
|
+
import { ArgTypes, Meta, Story, Canvas } from '@storybook/blocks'
|
|
2
2
|
import * as LinkButtonStories from './link_button.stories'
|
|
3
3
|
|
|
4
4
|
<Meta of={LinkButtonStories} />
|
|
@@ -28,7 +28,7 @@ Alle Inhalte des Buttons, wie das [Label](?path=/docs/komponenten-buttons-kompon
|
|
|
28
28
|
|
|
29
29
|
## Eigenschaften
|
|
30
30
|
|
|
31
|
-
<
|
|
31
|
+
<ArgTypes story="Spielplatz" />
|
|
32
32
|
|
|
33
33
|
## Varianten
|
|
34
34
|
|
|
@@ -349,7 +349,7 @@ export const ButtonPrimaryDisabled = {
|
|
|
349
349
|
args: {
|
|
350
350
|
_size: 'lg',
|
|
351
351
|
_label: 'Primary',
|
|
352
|
-
_disabled: true
|
|
352
|
+
_disabled: true,
|
|
353
353
|
},
|
|
354
354
|
}
|
|
355
355
|
|
|
@@ -371,7 +371,7 @@ export const ButtonSecondaryDisabled = {
|
|
|
371
371
|
_size: 'lg',
|
|
372
372
|
_label: 'Secondary',
|
|
373
373
|
_variant: 'secondary',
|
|
374
|
-
_disabled: true
|
|
374
|
+
_disabled: true,
|
|
375
375
|
},
|
|
376
376
|
}
|
|
377
377
|
|
|
@@ -393,11 +393,10 @@ export const ButtonTertiaryDisabled = {
|
|
|
393
393
|
_size: 'lg',
|
|
394
394
|
_label: 'Tertiary',
|
|
395
395
|
_variant: 'tertiary',
|
|
396
|
-
_disabled: true
|
|
396
|
+
_disabled: true,
|
|
397
397
|
},
|
|
398
398
|
}
|
|
399
399
|
|
|
400
|
-
|
|
401
400
|
export const ButtonIconRechts = {
|
|
402
401
|
render: buttonWithLabelAndIconRightTemplate.bind({}),
|
|
403
402
|
name: 'Button - Icon rechts',
|
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
import {
|
|
1
|
+
import { ArgTypes, Meta, Story, Canvas } from '@storybook/blocks'
|
|
2
2
|
import * as ContentFooterStories from './content_footer.stories'
|
|
3
3
|
|
|
4
4
|
<Meta of={ContentFooterStories} />
|
|
@@ -26,4 +26,4 @@ Die Content-Footer-Komponente wird in handlebars wie folgt eingebaut:
|
|
|
26
26
|
<Story of={ContentFooterStories.Default} />
|
|
27
27
|
</Canvas>
|
|
28
28
|
|
|
29
|
-
<
|
|
29
|
+
<ArgTypes story="default" />
|
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
import {
|
|
1
|
+
import { ArgTypes, Meta, Story, Canvas } from '@storybook/blocks'
|
|
2
2
|
import * as AccordionStories from './accordion.stories'
|
|
3
3
|
|
|
4
4
|
<Meta of={AccordionStories} />
|
|
@@ -11,7 +11,7 @@ import * as AccordionStories from './accordion.stories'
|
|
|
11
11
|
## Parameter
|
|
12
12
|
|
|
13
13
|
|
|
14
|
-
<
|
|
14
|
+
<ArgTypes story="default" />
|
|
15
15
|
|
|
16
16
|
## Verwendung
|
|
17
17
|
|
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
import {
|
|
1
|
+
import { ArgTypes, Meta, Story, Canvas } from '@storybook/blocks'
|
|
2
2
|
import * as contentboxStories from './contentbox.stories'
|
|
3
3
|
|
|
4
4
|
<Meta of={contentboxStories} />
|
|
@@ -11,7 +11,7 @@ import * as contentboxStories from './contentbox.stories'
|
|
|
11
11
|
## Parameter
|
|
12
12
|
|
|
13
13
|
|
|
14
|
-
<
|
|
14
|
+
<ArgTypes story="default" />
|
|
15
15
|
|
|
16
16
|
## Verwendung
|
|
17
17
|
|
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
import {
|
|
1
|
+
import { ArgTypes, Meta, Story, Canvas } from '@storybook/blocks'
|
|
2
2
|
import * as CopytextStories from './copytext.stories'
|
|
3
3
|
|
|
4
4
|
<Meta of={CopytextStories} />
|
|
@@ -22,4 +22,4 @@ Die Copytext-Komponente wird in handlebars wie folgt eingebaut:
|
|
|
22
22
|
<Story of={CopytextStories.Default} />
|
|
23
23
|
</Canvas>
|
|
24
24
|
|
|
25
|
-
<
|
|
25
|
+
<ArgTypes story="default" />
|