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
|
@@ -1,5 +1,5 @@
|
|
|
1
1
|
import { resetComponents } from '@storybook/components'
|
|
2
|
-
import { userEvent, within } from '@storybook/
|
|
2
|
+
import { userEvent, within } from '@storybook/test'
|
|
3
3
|
import subscribeButtonJson from 'components/teaser/fixtures/teaser_podcast.json'
|
|
4
4
|
|
|
5
5
|
import subscribeButton from 'components/podcast/components/podcast_subscribe_button.hbs'
|
|
@@ -47,10 +47,10 @@ export const SubscribeButtonOpen = {
|
|
|
47
47
|
|
|
48
48
|
args: subscribeButtonJson.logicItem.includeModel.podcastChannel,
|
|
49
49
|
play: async ({ canvasElement }) => {
|
|
50
|
-
const canvas = within(canvasElement)
|
|
50
|
+
const canvas = within(canvasElement)
|
|
51
51
|
|
|
52
|
-
const button = canvas.getByRole('button')
|
|
52
|
+
const button = canvas.getByRole('button')
|
|
53
53
|
|
|
54
|
-
await userEvent.click(button)
|
|
54
|
+
await userEvent.click(button)
|
|
55
55
|
},
|
|
56
56
|
}
|
|
@@ -10,13 +10,13 @@ import JsonDataHR3 from './fixtures/site_header_mit_submenu_as_flyout_no_sticky.
|
|
|
10
10
|
const Template = (args, { globals: { theme } }) => {
|
|
11
11
|
// You can either use a function to create DOM elements or use a plain html string!
|
|
12
12
|
// return `<div>${label}</div>`;
|
|
13
|
-
let brand = undefined !== theme ? theme : 'hessenschau'
|
|
13
|
+
let brand = undefined !== theme ? theme : 'hessenschau'
|
|
14
14
|
return navigation({ brand, ...args })
|
|
15
15
|
}
|
|
16
16
|
const TemplateHr3 = (args, { globals: { theme } }) => {
|
|
17
17
|
// You can either use a function to create DOM elements or use a plain html string!
|
|
18
18
|
// return `<div>${label}</div>`;
|
|
19
|
-
let brand = undefined !== theme ? theme : 'hr3'
|
|
19
|
+
let brand = undefined !== theme ? theme : 'hr3'
|
|
20
20
|
return navigation({ brand, ...args })
|
|
21
21
|
}
|
|
22
22
|
|
|
@@ -33,7 +33,6 @@ export default {
|
|
|
33
33
|
|
|
34
34
|
docs: {
|
|
35
35
|
inlineStories: false,
|
|
36
|
-
|
|
37
36
|
},
|
|
38
37
|
|
|
39
38
|
viewport: {
|
|
@@ -12,8 +12,7 @@ const Template_mobile = ({ ...args }) => {
|
|
|
12
12
|
}
|
|
13
13
|
export default {
|
|
14
14
|
title: 'Komponenten/Social Sharing',
|
|
15
|
-
|
|
16
|
-
}
|
|
15
|
+
}
|
|
17
16
|
|
|
18
17
|
export const Default = {
|
|
19
18
|
render: Template_horizontal.bind({}),
|
|
@@ -22,7 +21,7 @@ export const Default = {
|
|
|
22
21
|
parameters: {
|
|
23
22
|
chromatic: {
|
|
24
23
|
viewports: [360, 1024],
|
|
25
|
-
}
|
|
24
|
+
},
|
|
26
25
|
},
|
|
27
26
|
}
|
|
28
27
|
export const Mobile = {
|
|
@@ -33,7 +32,7 @@ export const Mobile = {
|
|
|
33
32
|
layout: 'fullscreen',
|
|
34
33
|
chromatic: {
|
|
35
34
|
viewports: [360, 1024],
|
|
36
|
-
}
|
|
35
|
+
},
|
|
37
36
|
},
|
|
38
37
|
decorators: [
|
|
39
38
|
(Story) => {
|
|
@@ -42,4 +41,4 @@ export const Mobile = {
|
|
|
42
41
|
</div>`
|
|
43
42
|
},
|
|
44
43
|
],
|
|
45
|
-
}
|
|
44
|
+
}
|
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
import {
|
|
1
|
+
import { ArgTypes, Meta, Story, Canvas } from '@storybook/blocks'
|
|
2
2
|
import * as TeaserBylineStories from './teaser_byline.stories'
|
|
3
3
|
|
|
4
4
|
<Meta of={TeaserBylineStories} />
|
|
@@ -94,4 +94,4 @@ Die Byline-Komponente wird in handlebars wie folgt eingebaut:
|
|
|
94
94
|
<Story of={TeaserBylineStories.CommentsOnly} />
|
|
95
95
|
</Canvas>
|
|
96
96
|
|
|
97
|
-
<
|
|
97
|
+
<ArgTypes story="default" />
|
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
import {
|
|
1
|
+
import { ArgTypes, Meta, Story, Canvas } from '@storybook/blocks'
|
|
2
2
|
import * as TeaserFeaturedContentStories from './teaser_featured_content.stories'
|
|
3
3
|
|
|
4
4
|
<Meta of={TeaserFeaturedContentStories} />
|
|
@@ -22,4 +22,4 @@ Die Zeilenteaser-Komponente wird in handlebars wie folgt eingebaut:
|
|
|
22
22
|
<Story of={TeaserFeaturedContentStories.Default} />
|
|
23
23
|
</Canvas>
|
|
24
24
|
|
|
25
|
-
<
|
|
25
|
+
<ArgTypes story="default" />
|
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
import {
|
|
1
|
+
import { ArgTypes, Meta, Story, Canvas } from '@storybook/blocks'
|
|
2
2
|
import * as TeaserHeadingStories from './teaser_heading.stories'
|
|
3
3
|
|
|
4
4
|
<Meta of={TeaserHeadingStories} />
|
|
@@ -75,7 +75,7 @@ Durchgereichte Parameter:
|
|
|
75
75
|
<Story of={TeaserHeadingStories.SerifHero} />
|
|
76
76
|
</Canvas>
|
|
77
77
|
|
|
78
|
-
<
|
|
78
|
+
<ArgTypes story="Serif Hero" />
|
|
79
79
|
|
|
80
80
|
## Teaser-Heading Serif 50%
|
|
81
81
|
|
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
import {
|
|
1
|
+
import { ArgTypes, Meta, Story, Canvas } from '@storybook/blocks'
|
|
2
2
|
import * as TeaserTitleStories from './teaser_title.stories'
|
|
3
3
|
|
|
4
4
|
<Meta of={TeaserTitleStories} />
|
|
@@ -24,7 +24,7 @@ Die Titel-Komponente inkludiert folgende Komponenten:
|
|
|
24
24
|
|
|
25
25
|
Die Titel-Komponente benötigt folgende Parameter:
|
|
26
26
|
|
|
27
|
-
<
|
|
27
|
+
<ArgTypes story="Titel Serif - Hero" />
|
|
28
28
|
|
|
29
29
|
## Verwendung
|
|
30
30
|
|
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
import {
|
|
1
|
+
import { ArgTypes, Meta, Story, Canvas } from '@storybook/blocks'
|
|
2
2
|
import * as TeaserToplineStories from './teaser_topline.stories'
|
|
3
3
|
|
|
4
4
|
<Meta of={TeaserToplineStories} />
|
|
@@ -13,7 +13,7 @@ In der Topline-Komponente wird die Dachzeile des Artikels dargestellt.
|
|
|
13
13
|
|
|
14
14
|
Die Topline-Komponente benötigt folgende Parameter:
|
|
15
15
|
|
|
16
|
-
<
|
|
16
|
+
<ArgTypes story="default" />
|
|
17
17
|
|
|
18
18
|
## Verwendung
|
|
19
19
|
|
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
import {
|
|
1
|
+
import { ArgTypes, Meta, Story, Canvas } from '@storybook/blocks'
|
|
2
2
|
import * as GroupStories from './group.stories'
|
|
3
3
|
|
|
4
4
|
<Meta of={GroupStories} />
|
|
@@ -16,4 +16,4 @@ Ein toller Einleitungstext für unsere `Teaser Gruppen` Komponente:
|
|
|
16
16
|
<Story of={GroupStories.$100GruppeMitRelatedContent} />
|
|
17
17
|
</Canvas>
|
|
18
18
|
|
|
19
|
-
<
|
|
19
|
+
<ArgTypes story="main" />
|
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
import {
|
|
1
|
+
import { ArgTypes, Meta, Story, Canvas, Preview } from '@storybook/blocks'
|
|
2
2
|
import * as TeaserAlternativAvStories from './teaser_alternativ_av.stories'
|
|
3
3
|
|
|
4
4
|
<Meta of={TeaserAlternativAvStories} />
|
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
import {
|
|
1
|
+
import { ArgTypes, Meta, Story, Canvas, Preview } from '@storybook/blocks'
|
|
2
2
|
import * as TeaserIndextextStories from './teaser_indextext.stories'
|
|
3
3
|
|
|
4
4
|
<Meta of={TeaserIndextextStories} />
|
|
@@ -32,4 +32,4 @@ Die Indextext-Teaser-Komponente wird in handlebars wie folgt eingebaut:
|
|
|
32
32
|
<Story of={TeaserIndextextStories.TextMitHintergrund50} />
|
|
33
33
|
</Canvas>
|
|
34
34
|
|
|
35
|
-
<
|
|
35
|
+
<ArgTypes story="Text mit Hintergrund 100" />
|
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
import {
|
|
1
|
+
import { ArgTypes, Meta, Story, Canvas, Preview } from '@storybook/blocks'
|
|
2
2
|
import * as TeaserPosterStories from './teaser_poster.stories'
|
|
3
3
|
|
|
4
4
|
<Meta of={TeaserPosterStories} />
|
|
@@ -92,4 +92,4 @@ Die Poster-Teaser-Komponente wird in handlebars wie folgt eingebaut:
|
|
|
92
92
|
<Story of={TeaserPosterStories.Poster33MitLabel} />
|
|
93
93
|
</Canvas>
|
|
94
94
|
|
|
95
|
-
<
|
|
95
|
+
<ArgTypes story="Poster 50" />
|
|
@@ -6,7 +6,7 @@ import teaserHeroSerif from './fixtures/teaser_standard_hero_serif.json'
|
|
|
6
6
|
import teaser100Serif from './fixtures/teaser_standard_100_serif.json'
|
|
7
7
|
import teaser50Serif from './fixtures/teaser_standard_50_serif.json'
|
|
8
8
|
import teaser50SerifWithoutTeaserImage from './fixtures/teaser_standard_without_teaserimage_50_serif.json'
|
|
9
|
-
import teaser50SerifFeaturedContent from'./fixtures/teaser_standard_50_serif_featured_content'
|
|
9
|
+
import teaser50SerifFeaturedContent from './fixtures/teaser_standard_50_serif_featured_content'
|
|
10
10
|
import teaser33Serif from './fixtures/teaser_standard_33_serif.json'
|
|
11
11
|
import teaser25Serif from './fixtures/teaser_standard_25_serif.json'
|
|
12
12
|
import teaser25SerifWithoutTeaserimage from './fixtures/teaser_standard_without_teaserimage_25_serif.json'
|