hr-design-system-handlebars 1.83.12 → 1.85.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 +24 -0
- package/build-storybook.log +34 -2446
- package/chromatic.config.json +5 -0
- package/dist/assets/index.css +3 -3
- package/dist/views/components/content/copytext/components/media/media_figure_byline.hbs +1 -1
- package/dist/views_static/components/content/copytext/components/media/media_figure_byline.hbs +1 -1
- package/package.json +138 -136
- package/src/assets/fixtures/content/copytext/copytext_media_components.json +1 -0
- package/src/assets/fixtures/content/copytext/copytext_video.json +1 -0
- 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/components/media/media_figure_byline.hbs +1 -1
- 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/copytext/fixtures/copytext_media_components.json +1 -1
- package/src/stories/views/components/content/copytext/fixtures/copytext_video.json +1 -1
- 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,4 +1,4 @@
|
|
|
1
|
-
import {
|
|
1
|
+
import { ArgTypes, Meta, Story, Canvas, Preview } from '@storybook/blocks'
|
|
2
2
|
import * as PageStories from './page.stories'
|
|
3
3
|
|
|
4
4
|
<Meta of={PageStories} />
|
|
@@ -97,4 +97,4 @@ Teaser-Typ variieren.
|
|
|
97
97
|
|
|
98
98
|
|
|
99
99
|
|
|
100
|
-
<
|
|
100
|
+
<ArgTypes story="Default" />
|
|
@@ -7,7 +7,7 @@ import {
|
|
|
7
7
|
NavigationDataWithTeaser2,
|
|
8
8
|
NavigationDataWithTeaser3,
|
|
9
9
|
NavigationDataWithTeaser4,
|
|
10
|
-
NavigationDataWithBreadcrumb
|
|
10
|
+
NavigationDataWithBreadcrumb,
|
|
11
11
|
} from './page.data.js'
|
|
12
12
|
|
|
13
13
|
import { NavigationDataWithMixedContent } from '../../pagination/page_pagination.data.js'
|
|
@@ -15,21 +15,21 @@ import { NavigationDataWithMixedContent } from '../../pagination/page_pagination
|
|
|
15
15
|
const Template = (args, { globals: { theme } }) => {
|
|
16
16
|
// You can either use a function to create DOM elements or use a plain html string!
|
|
17
17
|
// return `<div>${label}</div>`;
|
|
18
|
-
let brand = undefined !== theme ? theme : 'hessenschau'
|
|
18
|
+
let brand = undefined !== theme ? theme : 'hessenschau'
|
|
19
19
|
return page({ brand, ...args })
|
|
20
20
|
}
|
|
21
21
|
|
|
22
22
|
const Template2 = (args, { globals: { theme } }) => {
|
|
23
23
|
// You can either use a function to create DOM elements or use a plain html string!
|
|
24
24
|
// return `<div>${label}</div>`;
|
|
25
|
-
let brand = undefined !== theme ? theme : 'hessenschau'
|
|
25
|
+
let brand = undefined !== theme ? theme : 'hessenschau'
|
|
26
26
|
return page_pagination({ brand, ...args })
|
|
27
27
|
}
|
|
28
28
|
|
|
29
29
|
const Template3 = (args, { globals: { theme } }) => {
|
|
30
30
|
// You can either use a function to create DOM elements or use a plain html string!
|
|
31
31
|
// return `<div>${label}</div>`;
|
|
32
|
-
let brand = undefined !== theme ? theme : 'hessenschau'
|
|
32
|
+
let brand = undefined !== theme ? theme : 'hessenschau'
|
|
33
33
|
return page_article({ brand, ...args })
|
|
34
34
|
}
|
|
35
35
|
export default {
|
|
@@ -40,7 +40,7 @@ export default {
|
|
|
40
40
|
chromatic: {
|
|
41
41
|
viewports: [360, 768, 1024],
|
|
42
42
|
diffThreshold: 0.3,
|
|
43
|
-
delay: 2000,
|
|
43
|
+
delay: 2000,
|
|
44
44
|
},
|
|
45
45
|
|
|
46
46
|
layout: 'fullscreen',
|
|
@@ -87,6 +87,6 @@ export const MitArtikel = {
|
|
|
87
87
|
name: 'Mit Artikel',
|
|
88
88
|
args: NavigationDataWithBreadcrumb,
|
|
89
89
|
parameters: {
|
|
90
|
-
chromatic: { delay: 2000 }
|
|
91
|
-
}
|
|
92
|
-
}
|
|
90
|
+
chromatic: { delay: 2000 },
|
|
91
|
+
},
|
|
92
|
+
}
|
|
@@ -3,7 +3,7 @@ import page from './page_offline.hbs'
|
|
|
3
3
|
const Template = (args, { globals: { theme } }) => {
|
|
4
4
|
// You can either use a function to create DOM elements or use a plain html string!
|
|
5
5
|
// return `<div>${label}</div>`;
|
|
6
|
-
let brand = undefined !== theme ? theme : 'hessenschau'
|
|
6
|
+
let brand = undefined !== theme ? theme : 'hessenschau'
|
|
7
7
|
return page({ brand, ...args })
|
|
8
8
|
}
|
|
9
9
|
|
|
@@ -29,4 +29,4 @@ export const Default = {
|
|
|
29
29
|
render: Template.bind({}),
|
|
30
30
|
name: 'Offline Page',
|
|
31
31
|
args: {},
|
|
32
|
-
}
|
|
32
|
+
}
|
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
import {
|
|
1
|
+
import { ArgTypes, Meta, Story, Canvas, Preview } from '@storybook/blocks'
|
|
2
2
|
import * as PagePlayerStories from './page_player.stories'
|
|
3
3
|
|
|
4
4
|
<Meta of={PagePlayerStories} />
|
|
@@ -18,4 +18,4 @@ components/teaser/podcast/podcast this.teaser_podcast_50.logicItem.includeModel}
|
|
|
18
18
|
<Story of={PagePlayerStories.PlayerInteraktion} />
|
|
19
19
|
</Canvas>
|
|
20
20
|
|
|
21
|
-
<
|
|
21
|
+
<ArgTypes story="Default" />
|
|
@@ -21,7 +21,7 @@ export const Default = {
|
|
|
21
21
|
args: data_story,
|
|
22
22
|
parameters: {
|
|
23
23
|
layout: 'fullscreen',
|
|
24
|
-
}
|
|
24
|
+
},
|
|
25
25
|
}
|
|
26
26
|
export const Webview = {
|
|
27
27
|
render: Template.bind({}),
|
|
@@ -40,7 +40,7 @@ export const WithSquareImage = {
|
|
|
40
40
|
args: data_story_with_square_image,
|
|
41
41
|
parameters: {
|
|
42
42
|
layout: 'fullscreen',
|
|
43
|
-
}
|
|
43
|
+
},
|
|
44
44
|
}
|
|
45
45
|
|
|
46
46
|
export const WithLabel = {
|
|
@@ -49,8 +49,8 @@ export const WithLabel = {
|
|
|
49
49
|
args: data_story_with_label,
|
|
50
50
|
parameters: {
|
|
51
51
|
layout: 'fullscreen',
|
|
52
|
-
chromatic: { delay: 1000 }
|
|
53
|
-
}
|
|
52
|
+
chromatic: { delay: 1000 },
|
|
53
|
+
},
|
|
54
54
|
}
|
|
55
55
|
|
|
56
56
|
export const WithVideo = {
|
|
@@ -59,7 +59,7 @@ export const WithVideo = {
|
|
|
59
59
|
args: data_story_with_video,
|
|
60
60
|
parameters: {
|
|
61
61
|
layout: 'fullscreen',
|
|
62
|
-
}
|
|
62
|
+
},
|
|
63
63
|
}
|
|
64
64
|
|
|
65
65
|
|
|
@@ -70,7 +70,7 @@ export const WithLivestream = {
|
|
|
70
70
|
args: data_story_with_livestream,
|
|
71
71
|
parameters: {
|
|
72
72
|
layout: 'fullscreen',
|
|
73
|
-
}
|
|
73
|
+
},
|
|
74
74
|
}
|
|
75
75
|
|
|
76
76
|
export const WithAudio = {
|
|
@@ -76,7 +76,7 @@ const TemplateMoreThanThreeLast = (args, { globals: { customConditionalToolbar }
|
|
|
76
76
|
undefined !== customConditionalToolbar ? customConditionalToolbar['brands'] : 'hessenschau'
|
|
77
77
|
return page({ brand, ...args })
|
|
78
78
|
}
|
|
79
|
-
const TemplateOnlyTwo= (args, { globals: { customConditionalToolbar } }) => {
|
|
79
|
+
const TemplateOnlyTwo = (args, { globals: { customConditionalToolbar } }) => {
|
|
80
80
|
// You can either use a function to create DOM elements or use a plain html string!
|
|
81
81
|
// return `<div>${label}</div>`;
|
|
82
82
|
args['onlyThreePages'] = false
|
|
@@ -104,7 +104,6 @@ const TemplateOnlyThree = (args, { globals: { customConditionalToolbar } }) => {
|
|
|
104
104
|
return page({ brand, ...args })
|
|
105
105
|
}
|
|
106
106
|
|
|
107
|
-
|
|
108
107
|
export default {
|
|
109
108
|
title: 'Komponenten/Pagination',
|
|
110
109
|
argTypes: {},
|
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
import {
|
|
1
|
+
import { ArgTypes, Meta, Story, Canvas, Preview } from '@storybook/blocks'
|
|
2
2
|
import { resetComponents } from '@storybook/components'
|
|
3
3
|
import * as PodcastSubscribeButtonStories from './podcast_subscribe_button.stories'
|
|
4
4
|
|
|
@@ -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'
|