hr-design-system-handlebars 1.57.7 → 1.57.9

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 (122) hide show
  1. package/.storybook/preview.js +6 -0
  2. package/CHANGELOG.md +25 -0
  3. package/dist/assets/index.css +25 -62
  4. package/{src/stories/views/components/article → dist/views/components/content/copytext}/components/accordion/accordion.hbs +1 -1
  5. package/dist/views/components/content/copytext/components/contentbox/contentbox.hbs +12 -0
  6. package/dist/views/components/content/copytext/components/contentbox/storybook-contentbox.hbs +58 -0
  7. package/dist/views/components/content/copytext/copytext.hbs +2 -2
  8. package/dist/views/components/page/base/page_wrapper.hbs +3 -0
  9. package/dist/{views_static/components/article/components → views/components/page}/podcast/podcast_episode-webview.hbs +1 -1
  10. package/{src/stories/views/components/article/components → dist/views/components/page}/podcast/podcast_episode.hbs +1 -1
  11. package/dist/{views_static/components/article/components → views/components/page}/podcast/podcast_playlist-webview.hbs +1 -1
  12. package/{src/stories/views/components/article/components → dist/views/components/page}/podcast/podcast_playlist.hbs +1 -1
  13. package/dist/views/components/page/story/story_article.hbs +9 -0
  14. package/dist/views/components/page/story/story_main.hbs +20 -0
  15. package/dist/views/components/page/story/story_webview.hbs +7 -0
  16. package/dist/views_static/components/{article → content/copytext}/components/accordion/accordion.hbs +1 -1
  17. package/dist/views_static/components/content/copytext/components/contentbox/contentbox.hbs +12 -0
  18. package/dist/views_static/components/content/copytext/components/contentbox/storybook-contentbox.hbs +58 -0
  19. package/dist/views_static/components/content/copytext/copytext.hbs +2 -2
  20. package/dist/views_static/components/page/base/page_wrapper.hbs +3 -0
  21. package/dist/views_static/components/page/podcast/podcast_episode-webview.hbs +17 -0
  22. package/dist/views_static/components/{article/components → page}/podcast/podcast_episode.hbs +1 -1
  23. package/dist/{views/components/article/components → views_static/components/page}/podcast/podcast_playlist-webview.hbs +1 -1
  24. package/dist/{views/components/article/components → views_static/components/page}/podcast/podcast_playlist.hbs +1 -1
  25. package/dist/views_static/components/page/story/story_article.hbs +9 -0
  26. package/dist/views_static/components/page/story/story_main.hbs +20 -0
  27. package/dist/views_static/components/page/story/story_webview.hbs +7 -0
  28. package/package.json +1 -1
  29. package/src/assets/css/custom-utilities.css +24 -0
  30. package/src/assets/fixtures/content/copytext/components/contentbox/contentbox.json +30 -0
  31. package/src/assets/fixtures/{article/components → page}/podcast/podcast_player_episode.json +1 -1
  32. package/src/assets/fixtures/{article/components → page}/podcast/podcast_player_playlist.json +1 -1
  33. package/{dist/views/components/article → src/stories/views/components/content/copytext}/components/accordion/accordion.hbs +1 -1
  34. package/src/stories/views/components/{article → content/copytext}/components/accordion/accordion.mdx +1 -1
  35. package/src/stories/views/components/{article → content/copytext}/components/accordion/accordion.stories.js +3 -2
  36. package/src/stories/views/components/content/copytext/components/contentbox/contentbox.hbs +12 -0
  37. package/src/stories/views/components/{article → content/copytext}/components/contentbox/contentbox.mdx +1 -1
  38. package/src/stories/views/components/{article → content/copytext}/components/contentbox/contentbox.stories.js +9 -2
  39. package/src/stories/views/components/content/copytext/components/contentbox/fixtures/contentbox.json +1 -0
  40. package/src/stories/views/components/content/copytext/components/contentbox/storybook-contentbox.hbs +58 -0
  41. package/src/stories/views/components/content/copytext/copytext.hbs +2 -2
  42. package/src/stories/views/components/page/base/page_wrapper.hbs +3 -0
  43. package/src/stories/views/components/page/{page.data.js → index/page.data.js} +5 -5
  44. package/src/stories/views/components/page/{page.stories.js → index/page.stories.js} +3 -3
  45. package/src/stories/views/components/page/{page_player.stories.js → index/page_player.stories.js} +2 -2
  46. package/src/stories/views/components/page/podcast/fixtures/podcast_player_episode.json +1 -0
  47. package/src/stories/views/components/page/podcast/fixtures/podcast_player_playlist.json +1 -0
  48. package/src/stories/views/components/page/podcast/podcast_episode-webview.hbs +17 -0
  49. package/{dist/views/components/article/components → src/stories/views/components/page}/podcast/podcast_episode.hbs +1 -1
  50. package/src/stories/views/components/{article/components → page}/podcast/podcast_episode_article.mdx +1 -1
  51. package/src/stories/views/components/{article/components → page}/podcast/podcast_episode_article.stories.js +1 -1
  52. package/src/stories/views/components/{article/components → page}/podcast/podcast_playlist-webview.hbs +1 -1
  53. package/{dist/views_static/components/article/components → src/stories/views/components/page}/podcast/podcast_playlist.hbs +1 -1
  54. package/src/stories/views/components/{article/components → page}/podcast/podcast_playlist_article.mdx +1 -1
  55. package/src/stories/views/components/{article/components → page}/podcast/podcast_playlist_article.stories.js +1 -1
  56. package/src/stories/views/components/page/story/story_article.hbs +9 -0
  57. package/src/stories/views/components/page/story/story_main.hbs +20 -0
  58. package/src/stories/views/components/page/story/story_main.mdx +16 -0
  59. package/src/stories/views/components/page/story/story_main.stories.js +17 -0
  60. package/src/stories/views/components/page/story/story_webview.hbs +7 -0
  61. package/src/stories/views/components/{page → pagination}/page_pagination.data.js +1 -1
  62. package/src/stories/views/components/{page → pagination}/page_pagination.stories.js +1 -1
  63. package/dist/assets/js/components/foo.feature.js +0 -16
  64. package/dist/views/components/Button.hbs +0 -10
  65. package/dist/views/components/article/components/contentbox/contentbox.hbs +0 -12
  66. package/dist/views/components/article/components/contentbox/storybook-contentbox.hbs +0 -15
  67. package/dist/views/components/article/components/podcast/podcast_episode-webview.hbs +0 -17
  68. package/dist/views_static/components/Button.hbs +0 -10
  69. package/dist/views_static/components/article/components/contentbox/contentbox.hbs +0 -12
  70. package/dist/views_static/components/article/components/contentbox/storybook-contentbox.hbs +0 -15
  71. package/src/assets/fixtures/teaser/contentbox.json +0 -44
  72. package/src/stories/Example.mdx +0 -56
  73. package/src/stories/Example.stories.js +0 -57
  74. package/src/stories/example.hbs +0 -10
  75. package/src/stories/views/components/Button.hbs +0 -10
  76. package/src/stories/views/components/Button.js +0 -23
  77. package/src/stories/views/components/Button.mdx +0 -30
  78. package/src/stories/views/components/Button.stories.js +0 -60
  79. package/src/stories/views/components/Button_.stories.js +0 -77
  80. package/src/stories/views/components/article/components/contentbox/contentbox.hbs +0 -12
  81. package/src/stories/views/components/article/components/contentbox/storybook-contentbox.hbs +0 -15
  82. package/src/stories/views/components/article/components/podcast/fixtures/podcast_player_episode.json +0 -1
  83. package/src/stories/views/components/article/components/podcast/fixtures/podcast_player_playlist.json +0 -1
  84. package/src/stories/views/components/article/components/podcast/podcast_episode-webview.hbs +0 -17
  85. package/src/stories/views/components/foo.feature.js +0 -16
  86. package/src/stories/views/components/teaser/fixtures/contentbox.json +0 -1
  87. /package/dist/assets/js/components/{article/components → page}/podcast/podcastChannelRemainingEpisodesLoader.feature.js +0 -0
  88. /package/dist/views/components/{article → content/copytext}/components/accordion/accordion_item.hbs +0 -0
  89. /package/dist/views/components/page/{page.hbs → index/page.hbs} +0 -0
  90. /package/dist/views/components/page/{page_players.hbs → index/page_players.hbs} +0 -0
  91. /package/dist/views/components/{article/components → page}/podcast/components/related-content.ssi.hbs +0 -0
  92. /package/dist/views/components/{article/components → page}/podcast/podcast_episode_article.hbs +0 -0
  93. /package/dist/views/components/{article/components → page}/podcast/podcast_playlist-inline.hbs +0 -0
  94. /package/dist/views/components/{article/components → page}/podcast/podcast_playlist_all_episodes.hbs +0 -0
  95. /package/dist/views/components/{article/components → page}/podcast/podcast_playlist_article.hbs +0 -0
  96. /package/dist/views/components/{page → pagination}/page_pagination.hbs +0 -0
  97. /package/dist/views_static/components/{article → content/copytext}/components/accordion/accordion_item.hbs +0 -0
  98. /package/dist/views_static/components/page/{page.hbs → index/page.hbs} +0 -0
  99. /package/dist/views_static/components/page/{page_players.hbs → index/page_players.hbs} +0 -0
  100. /package/dist/views_static/components/{article/components → page}/podcast/components/related-content.ssi.hbs +0 -0
  101. /package/dist/views_static/components/{article/components → page}/podcast/podcast_episode_article.hbs +0 -0
  102. /package/dist/views_static/components/{article/components → page}/podcast/podcast_playlist-inline.hbs +0 -0
  103. /package/dist/views_static/components/{article/components → page}/podcast/podcast_playlist_all_episodes.hbs +0 -0
  104. /package/dist/views_static/components/{article/components → page}/podcast/podcast_playlist_article.hbs +0 -0
  105. /package/dist/views_static/components/{page → pagination}/page_pagination.hbs +0 -0
  106. /package/src/assets/fixtures/{teaser → content/copytext/components/accordion}/accordion.json +0 -0
  107. /package/src/assets/fixtures/{page → pagination}/page_pagination.json +0 -0
  108. /package/src/stories/views/components/{article → content/copytext}/components/accordion/accordion_item.hbs +0 -0
  109. /package/src/stories/views/components/{teaser → content/copytext/components/accordion}/fixtures/accordion.json +0 -0
  110. /package/src/stories/views/components/page/{page.hbs → index/page.hbs} +0 -0
  111. /package/src/stories/views/components/page/{page.mdx → index/page.mdx} +0 -0
  112. /package/src/stories/views/components/page/{page_player.mdx → index/page_player.mdx} +0 -0
  113. /package/src/stories/views/components/page/{page_players.hbs → index/page_players.hbs} +0 -0
  114. /package/src/stories/views/components/{article/components → page}/podcast/components/related-content.ssi.hbs +0 -0
  115. /package/src/stories/views/components/{article/components → page}/podcast/podcastChannelRemainingEpisodesLoader.feature.js +0 -0
  116. /package/src/stories/views/components/{article/components → page}/podcast/podcast_episode_article.hbs +0 -0
  117. /package/src/stories/views/components/{article/components → page}/podcast/podcast_playlist-inline.hbs +0 -0
  118. /package/src/stories/views/components/{article/components → page}/podcast/podcast_playlist_all_episodes.hbs +0 -0
  119. /package/src/stories/views/components/{article/components → page}/podcast/podcast_playlist_article.hbs +0 -0
  120. /package/src/stories/views/components/{page → pagination}/fixtures/page_pagination.json +0 -0
  121. /package/src/stories/views/components/{page → pagination}/page_pagination.hbs +0 -0
  122. /package/src/stories/views/components/{page → pagination}/page_pagination.mdx +0 -0
@@ -1,10 +0,0 @@
1
- <button
2
- class='js-load btn
3
- {{inline-switch size '["sm","lg","xl"]' '["btn--sm","btn--lg","btn--xl","btn--md"]'}}
4
- {{inline-switch type '["secondary"]' '["btn--secondary","btn--primary"]'}}'
5
- >
6
- {{label}}
7
- </button>
8
- <div class='js-load outer' data-hr-foo='{"test":"bar"}'>
9
- <div class='inner'></div>
10
- </div>
@@ -1,12 +0,0 @@
1
- <div class="border-y border-gray-boulder overflow-auto contentbox-box mt-13 mb-5 sm480:pb-7.5 pb-5 sm:px-0 px-5.5 {{#unless this.showFullSize.isTrue}} mt-7.5 mb-6 mr-0 sm:mr-6 md:w-6/12 float-left{{/unless}}">
2
- {{~> components/base/a11y/hiddenText _locaTag="story_infobox_intro_sr" ~}}
3
- {{#if this.title}}
4
- <h3 class="mt-6 -mb-1 text-lg font-normal contentbox-title font-headingSerif dark:text-text-dark">{{this.title}}</h3>
5
- {{/if}}
6
- {{#if (isStorybook)}}
7
- {{> components/article/components/contentbox/storybook-contentbox }}
8
- {{else}}
9
- {{> modules/story/copytext-contentbox ~}}
10
- {{/if}}
11
- {{~> components/base/a11y/hiddenText _locaTag="story_infobox_outro_sr" ~}}
12
- </div>
@@ -1,15 +0,0 @@
1
- {{#each this.copytextParagraph }}
2
- {{#if this.isParagraph}}
3
- {{#each this.text.split}}
4
- {{#if this.isText}}
5
- <p class="my-5 text-base sm480:text-lg">{{{this.text}}}</p>
6
- {{/if}}
7
- {{#if this.isUl}}
8
- <ul class="my-5 ml-5 text-base list-disc sm480:text-lg">{{{this.text}}}</ul>
9
- {{/if}}
10
- {{#if this.isOl}}
11
- <ol class="mt-5 ml-5 text-base list-decimal sm480:text-lg">{{{this.text}}}</ol>
12
- {{/if}}
13
- {{/each}}
14
- {{/if}}
15
- {{/each}}
@@ -1,17 +0,0 @@
1
- {{~#partial "staticHeader"~}}
2
- <link rel="preconnect" href="//mp3podcasthr-a.akamaihd.net/">
3
- {{~/partial~}}
4
-
5
- {{~#partial "body" ~}}
6
- <div class="o-wrapper u-content-background">
7
- {{> components/article/components/podcast/podcast_episode_article _webview=true}}
8
-
9
- {{{ this.relatedContentSsi }}}
10
- </div>
11
- <script type="application/ld+json">
12
- {{{this.structuredData}}}
13
-
14
- </script>
15
- {{~/partial~}}
16
-
17
- {{~> modules/page/base _webview=true ~}}
@@ -1,10 +0,0 @@
1
- <button
2
- class='js-load btn
3
- {{inline-switch size '["sm","lg","xl"]' '["btn--sm","btn--lg","btn--xl","btn--md"]'}}
4
- {{inline-switch type '["secondary"]' '["btn--secondary","btn--primary"]'}}'
5
- >
6
- {{label}}
7
- </button>
8
- <div class='js-load outer' data-hr-foo='{"test":"bar"}'>
9
- <div class='inner'></div>
10
- </div>
@@ -1,12 +0,0 @@
1
- <div class="border-y border-gray-boulder overflow-auto contentbox-box mt-13 mb-5 sm480:pb-7.5 pb-5 sm:px-0 px-5.5 {{#unless this.showFullSize.isTrue}} mt-7.5 mb-6 mr-0 sm:mr-6 md:w-6/12 float-left{{/unless}}">
2
- {{~> components/base/a11y/hiddenText _locaTag="story_infobox_intro_sr" ~}}
3
- {{#if this.title}}
4
- <h3 class="mt-6 -mb-1 text-lg font-normal contentbox-title font-headingSerif dark:text-text-dark">{{this.title}}</h3>
5
- {{/if}}
6
- {{#if (isStorybook)}}
7
- {{> components/article/components/contentbox/storybook-contentbox }}
8
- {{else}}
9
- {{> modules/story/copytext-contentbox ~}}
10
- {{/if}}
11
- {{~> components/base/a11y/hiddenText _locaTag="story_infobox_outro_sr" ~}}
12
- </div>
@@ -1,15 +0,0 @@
1
- {{#each this.copytextParagraph }}
2
- {{#if this.isParagraph}}
3
- {{#each this.text.split}}
4
- {{#if this.isText}}
5
- <p class="my-5 text-base sm480:text-lg">{{{this.text}}}</p>
6
- {{/if}}
7
- {{#if this.isUl}}
8
- <ul class="my-5 ml-5 text-base list-disc sm480:text-lg">{{{this.text}}}</ul>
9
- {{/if}}
10
- {{#if this.isOl}}
11
- <ol class="mt-5 ml-5 text-base list-decimal sm480:text-lg">{{{this.text}}}</ol>
12
- {{/if}}
13
- {{/each}}
14
- {{/if}}
15
- {{/each}}
@@ -1,44 +0,0 @@
1
- {
2
- "copytext": {
3
- "title": "ContentBox Titel",
4
- "showFullSize":{
5
- "isTrue": true
6
- },
7
- "copytextParagraph": [
8
- {
9
- "paragraphBoxItem": {
10
- "isImage": true,
11
- "Image": {
12
- "@->jsoninclude": "teaser/teaser_images.inc.json",
13
- "@->contentpath": "teaser_standard",
14
- "@->replaceToken": [
15
- {
16
- "@->token": "image",
17
- "@->value": "hasebe-kane-102"
18
- }
19
- ]
20
- }
21
- }
22
- },
23
- {
24
- "isParagraph": true,
25
- "text": {
26
- "split": [
27
- {
28
- "isText": true,
29
- "text": "Auch gibt es niemanden, der den Schmerz an sich liebt, sucht oder wünscht, nur, weil er Schmerz ist, es sei denn, es kommt zu zufälligen Umständen, in denen Mühen und Schmerz ihm große Freude bereiten können. Um ein triviales Beispiel zu nehmen, wer von uns unterzieht sich je anstrengender körperlicher Betätigung, außer um Vorteile daraus zu ziehen?"
30
- },
31
- {
32
- "isUl": true,
33
- "text": "<li>Auch gibt es niemanden,</li><li>der den Schmerz an sich liebt</li>"
34
- },
35
- {
36
- "isOl": true,
37
- "text": "<li>Auch gibt es niemanden,</li><li>der den Schmerz an sich liebt</li>"
38
- }
39
- ]
40
- }
41
- }
42
- ]
43
- }
44
- }
@@ -1,56 +0,0 @@
1
- import { ArgsTable, Meta, Story, Canvas } from '@storybook/blocks'
2
- import * as ExampleStories from './Example.stories';
3
-
4
- import example from './example.hbs'
5
-
6
- <Meta of={ExampleStories} />
7
-
8
- export const Template = ({ label, ...args }) => {
9
- // You can either use a function to create DOM elements or use a plain html string!
10
- // return `<div>${label}</div>`;
11
- return example({ label, ...args })
12
- }
13
-
14
- # Name der Komponente
15
-
16
- ## Beschreibung/Abstract
17
-
18
- Kurzer Beschreibungstext der die Komponente erklärt -> Penis
19
-
20
- <Canvas withToolbar>
21
- <Story of={ExampleStories.Primary} />
22
- </Canvas>
23
-
24
- ## Props
25
-
26
- Beschreibung der wichtigsten parameter, die für die Komponente benötigt werden
27
-
28
- <ArgsTable story="Primary" />
29
-
30
- ## Usage/Verwendung
31
-
32
- ggf. Beschreibung wann und wie die Komponente eingesetzt wird in handlebars
33
-
34
- ```html
35
- {{> components/teaser/components/teaser_heading fontVariant=this.headingFontVariant
36
- headlineTag=this.headlineTag label=this.label readMore=this.link.readMoreText.readMoreScreenreader
37
- size=this.teaserSize title=this.title topline=this.topline }}
38
- ```
39
-
40
- ## Dos/Doents
41
-
42
- <ComponentRules
43
- rules={[
44
- {
45
- positive: {
46
- component: <div>Get started</div>,
47
- description:
48
- 'Use 1 or 2 words, no longer than 4 words, with fewer than 20 characters including spaces.',
49
- },
50
- negative: {
51
- component: <div>Get started and enjoy discount!</div>,
52
- description: 'Don’t use punctuation marks such as periods or exclamation points.',
53
- },
54
- },
55
- ]}
56
- />
@@ -1,57 +0,0 @@
1
- import example from './example.hbs'
2
-
3
- const Template = ({ label, ...args }) => {
4
- // You can either use a function to create DOM elements or use a plain html string!
5
- // return `<div>${label}</div>`;
6
- return example({ label, ...args })
7
- }
8
-
9
- export default {
10
- title: 'Grundlegendes/Template/Beispiel-Story',
11
-
12
- argTypes: {
13
- label: {
14
- control: 'text',
15
- description: 'Button text',
16
- },
17
-
18
- size: {
19
- control: {
20
- type: 'select',
21
- options: ['sm', 'md', 'lg', 'xl'],
22
- },
23
-
24
- description: 'Größe des Buttons',
25
-
26
- table: {
27
- defaultValue: {
28
- summary: 'md',
29
- },
30
- },
31
- },
32
-
33
- type: {
34
- description: 'Typ des Buttons',
35
-
36
- control: {
37
- type: 'select',
38
- options: ['primary', 'secondary'],
39
- },
40
-
41
- table: {
42
- defaultValue: {
43
- summary: 'primary',
44
- },
45
- },
46
- },
47
- },
48
- }
49
-
50
- export const Primary = {
51
- render: Template.bind({}),
52
- name: 'Primary',
53
-
54
- args: {
55
- label: 'Button',
56
- },
57
- }
@@ -1,10 +0,0 @@
1
- <button
2
- class='js-load btn
3
- {{inline-switch size '["sm","lg","xl"]' '["btn--sm","btn--lg","btn--xl","btn--md"]'}}
4
- {{inline-switch type '["secondary"]' '["btn--secondary","btn--primary"]'}}'
5
- >
6
- {{label}}
7
- </button>
8
- <div class='js-load outer' data-hr-foo='{"test":"bar"}'>
9
- <div class='inner'> </div>
10
- </div>
@@ -1,10 +0,0 @@
1
- <button
2
- class='js-load btn
3
- {{inline-switch size '["sm","lg","xl"]' '["btn--sm","btn--lg","btn--xl","btn--md"]'}}
4
- {{inline-switch type '["secondary"]' '["btn--secondary","btn--primary"]'}}'
5
- >
6
- {{label}}
7
- </button>
8
- <div class='js-load outer' data-hr-foo='{"test":"bar"}'>
9
- <div class='inner'></div>
10
- </div>
@@ -1,23 +0,0 @@
1
- export const createButton = ({
2
- primary = false,
3
- size = "medium",
4
- backgroundColor,
5
- label,
6
- onClick,
7
- }) => {
8
- const btn = document.createElement("button");
9
- btn.type = "button";
10
- btn.innerText = label;
11
- btn.addEventListener("click", onClick);
12
-
13
- const mode = primary
14
- ? "storybook-button--primary"
15
- : "storybook-button--secondary";
16
- btn.className = ["storybook-button", `storybook-button--${size}`, mode].join(
17
- " "
18
- );
19
-
20
- btn.style.backgroundColor = backgroundColor;
21
-
22
- return btn;
23
- };
@@ -1,30 +0,0 @@
1
- import { ArgsTable, Meta, Story, Canvas } from '@storybook/blocks'
2
- import * as ButtonStories from './Button_.stories';
3
-
4
- import button from './Button.hbs'
5
-
6
- <Meta of={ButtonStories} />
7
-
8
- export const Template = ({ label, ...args }) => {
9
- // You can either use a function to create DOM elements or use a plain html string!
10
- // return `<div>${label}</div>`;
11
- return button({ label, ...args })
12
- }
13
-
14
- # Button
15
-
16
- Let's define a story for our `Button` component:
17
-
18
- <Canvas>
19
- <Story of={ButtonStories.Primary} />
20
- </Canvas>
21
-
22
- <ArgsTable story="Primary" />
23
-
24
- ## Button Secondary
25
-
26
- <Canvas>
27
- <Story of={ButtonStories.Secondary} />
28
- </Canvas>
29
-
30
- ## Test
@@ -1,60 +0,0 @@
1
- import button from "./Button.hbs";
2
- const colors = require("../../../../tailwind.config");
3
-
4
- export default {
5
- title: "Komponenten-Beispiele/Button",
6
- argTypes: {
7
- label: { control: "text" },
8
- size: {
9
- control: { type: "select", options: ["sm", "ms", "lg", "xl"] },
10
- },
11
- type: { control: { type: "select", options: ["primary", "secondary"] } },
12
- onClick: { action: "onClick" },
13
- },
14
- };
15
-
16
- const Template = ({ label, ...args }) => {
17
- // You can either use a function to create DOM elements or use a plain html string!
18
- // return `<div>${label}</div>`;
19
- console.log(colors);
20
- return button({ label, ...args });
21
- };
22
-
23
- export const Primary = Template.bind({});
24
- Primary.args = {
25
- label: "Button",
26
- };
27
-
28
- Primary.parameters = {
29
- docs: {
30
- source: {
31
- code: `
32
- <Button class="storybook-button storybook-button--primary">Button</button>
33
- `,
34
- },
35
- },
36
- };
37
-
38
- export const Secondary = Template.bind({});
39
- Secondary.args = {
40
- type: "secondary",
41
- label: "Button",
42
- };
43
-
44
- export const XLarge = Template.bind({});
45
- XLarge.args = {
46
- size: "xl",
47
- label: "Button",
48
- };
49
-
50
- export const Large = Template.bind({});
51
- Large.args = {
52
- size: "lg",
53
- label: "Button",
54
- };
55
-
56
- export const Small = Template.bind({});
57
- Small.args = {
58
- size: "sm",
59
- label: "Button",
60
- };
@@ -1,77 +0,0 @@
1
- import button from './Button.hbs'
2
-
3
- const Template = ({ label, ...args }) => {
4
- // You can either use a function to create DOM elements or use a plain html string!
5
- // return `<div>${label}</div>`;
6
- return button({ label, ...args })
7
- }
8
-
9
- export default {
10
- title: 'Komponenten-Beispiele/MDX-Button',
11
-
12
- argTypes: {
13
- label: {
14
- control: 'text',
15
- description: 'Button text',
16
- },
17
-
18
- size: {
19
- control: {
20
- type: 'select',
21
- options: ['sm', 'md', 'lg', 'xl'],
22
- },
23
-
24
- description: 'Größe des Buttons',
25
-
26
- table: {
27
- defaultValue: {
28
- summary: 'md',
29
- },
30
- },
31
- },
32
-
33
- type: {
34
- description: 'Typ des Buttons',
35
-
36
- control: {
37
- type: 'select',
38
- options: ['primary', 'secondary'],
39
- },
40
-
41
- table: {
42
- defaultValue: {
43
- summary: 'primary',
44
- },
45
- },
46
- },
47
- },
48
- }
49
-
50
- export const Primary = {
51
- render: Template.bind({}),
52
- name: 'Primary',
53
-
54
- args: {
55
- label: 'Button',
56
- },
57
- }
58
-
59
- export const Secondary = {
60
- render: Template.bind({}),
61
- name: 'Secondary',
62
-
63
- parameters: {
64
- docs: {
65
- source: {
66
- code: `
67
- <Button class="storybook-button storybook-button--secondary">Button</button>
68
- `,
69
- },
70
- },
71
- },
72
-
73
- args: {
74
- label: 'Button',
75
- type: 'secondary',
76
- },
77
- }
@@ -1,12 +0,0 @@
1
- <div class="border-y border-gray-boulder overflow-auto contentbox-box mt-13 mb-5 sm480:pb-7.5 pb-5 sm:px-0 px-5.5 {{#unless this.showFullSize.isTrue}} mt-7.5 mb-6 mr-0 sm:mr-6 md:w-6/12 float-left{{/unless}}">
2
- {{~> components/base/a11y/hiddenText _locaTag="story_infobox_intro_sr" ~}}
3
- {{#if this.title}}
4
- <h3 class="mt-6 -mb-1 text-lg font-normal contentbox-title font-headingSerif dark:text-text-dark">{{this.title}}</h3>
5
- {{/if}}
6
- {{#if (isStorybook)}}
7
- {{> components/article/components/contentbox/storybook-contentbox }}
8
- {{else}}
9
- {{> modules/story/copytext-contentbox ~}}
10
- {{/if}}
11
- {{~> components/base/a11y/hiddenText _locaTag="story_infobox_outro_sr" ~}}
12
- </div>
@@ -1,15 +0,0 @@
1
- {{#each this.copytextParagraph }}
2
- {{#if this.isParagraph}}
3
- {{#each this.text.split}}
4
- {{#if this.isText}}
5
- <p class="my-5 text-base sm480:text-lg">{{{this.text}}}</p>
6
- {{/if}}
7
- {{#if this.isUl}}
8
- <ul class="my-5 ml-5 text-base list-disc sm480:text-lg">{{{this.text}}}</ul>
9
- {{/if}}
10
- {{#if this.isOl}}
11
- <ol class="mt-5 ml-5 text-base list-decimal sm480:text-lg">{{{this.text}}}</ol>
12
- {{/if}}
13
- {{/each}}
14
- {{/if}}
15
- {{/each}}
@@ -1 +0,0 @@
1
- {"isSsi":true,"logicItem":{"includePath":"components/article/components/podcast/podcast_player_episode","includeModel":{"byline":"Byline","title":"Legal Kiffen: Cannabis-Gesetz sorgt für Kritik","topline":"","headingFontVariant":"serif","extendedTitle":"","teaserType":"standard","teaserSize":"100","realTeaserSize":"100","isMobile1to1":false,"hasDwellTime":true,"isSingleChannel":false,"backLinkUrl":"#","topictags":{"topic1":{"url":"#","title":"topictag1"},"topic2":{"url":"#","title":"topictag2"},"topic3":{"url":"#","title":"topictag mit extrem langem namen"},"topic4":{"url":"#","title":"topic tag schnack"},"topic5":{"url":"#","title":"topictag2Taggigtop"}},"geotag":{"GeoTag1":{"url":"#","title":"geotag1"},"GeoTag2":{"url":"#","title":"geotag mit extrem langem namen"},"GeoTag3":{"url":"#","title":"Far out"},"GeoTag4":{"url":"#","title":"Stuttgart"},"GeoTag5":{"url":"#","title":"FFM"}},"socialSharing":{"twitterLink":"#","whatsappLink":"#","facebookLink":"#","mailtoLink":"#"},"airdateDate":{"htmlDateTime":"2022-10-31T19:30+0200","htmlDate":"31.10.2022","date":"31.10.22","time":"19:30","dateSeparatorTime":"31.10.22, 19:30"},"teaseritem":{"copyrightWithLinks":"","responsiveImage":{"asPicture":false,"asImage":true,"fallback":"images/heiner-goebbels-102_v-1to1__medium.jpg","sources":[{"sizes":"300px","srcset":"images/heiner-goebbels-102_v-1to1__small.jpg 380w, images/heiner-goebbels-102_v-1to1__medium.jpg 480w, images/heiner-goebbels-102_v-1to1.jpg 720w, images/heiner-goebbels-102_v-1to1__large.jpg 960w"}]}},"duration":"14:35","hasByline":true,"teaserInfo":{"showTeaserInfo":true,"showTeaserInfoSection":true,"showTeaserInfoChannel":false,"showTeaserInfoAll":false,"showTeaserInfoDate":false,"showTeaserInfoDateTime":true,"showTeaserInfoProgramRef":false},"podcastChannel":{"title":"hr2 Doppelkopf","url":"#ChannelURL","podcastHoster":[{"podcastHosterUrl":"https://podcasts.apple.com/podcast/hr2-doppelkopf/id212822590","podcastHosterName":"ITunes"},{"podcastHosterUrl":"https://podcast.hr.de/hr2_doppelkopf/podcast.xml","podcastHosterName":"RSS"},{"podcastHosterUrl":"https://podcasts.google.com/feed/aHR0cHM6Ly9wb2RjYXN0LmhyLmRlL2hyMl9kb3BwZWxrb3BmL3BvZGNhc3QueG1s?hl=de","podcastHosterName":"Google Podcasts"},{"podcastHosterUrl":"https://www.ardaudiothek.de/episode/hr2-doppelkopf/ich-hoere-bei-jedem-geraeusch-gleich-die-tonhoehe-oder-komponist-und-theatermacher-heiner-goebbels-erneuert-das-musiktheater/hr2-kultur/12056783/","podcastHosterName":"ARD Audiothek"}]},"audioUrl":"https://mp3podcasthr-a.akamaihd.net/mp3/podcast/der_tag_in_hessen/der_tag_in_hessen_20230816_98732247.mp3","podcastDownloadUrl":"https://mp3podcasthr-a.akamaihd.net/mp3/podcast/der_tag_in_hessen/der_tag_in_hessen_20230816_98732247.mp3","teaserImage":{"copyrightWithLinks":"","responsiveImage":{"asPicture":false,"asImage":true,"fallback":"images/heiner-goebbels-102_v-1to1__medium.jpg","sources":[{"sizes":"300px","srcset":"images/heiner-goebbels-102_v-1to1__small.jpg 380w, images/heiner-goebbels-102_v-1to1__medium.jpg 480w, images/heiner-goebbels-102_v-1to1.jpg 720w, images/heiner-goebbels-102_v-1to1__large.jpg 960w"}]}},"mediaMetadata":{"agf":{"title":"hr-fernsehen_Hessischer Rundfunk_Ein aufgewecktes Kerlchen_06.10.2022 04:40","livestream":"no","type":"content","airdate":"06.10.2022 04:40","program":"hr-fernsehen","nol_c18":"p18,N","uurl":"/mp3/podcast/hr4_polizeireport/hr4_polizeireport_20221006_95936793.mp3","nol_c7":"p7,/mp3/podcast/hr4_polizeireport/hr4_polizeireport_20221006_95936793.mp3","nol_c8":"p8,131","nol_c9":"p9,Hessischer Rundfunk_Ein aufgewecktes Kerlchen_06.10.2022 04:40","nol_c10":"p10,hr-fernsehen","nol_c12":"p12,Content","assetid":"hr4_polizeireport_95936793","nol_c2":"p2,N","nol_c5":"p5,hr4","length":"131","nol_c20":"p20,GFKLinkID"},"ati":{"pageName":"Ein aufgewecktes Kerlchen","secondLevelId":"2","documentName":"podcast-episode-108850","documentType":"hr-nt:podcastEpisode","documentDate":"2022-10-06T06:46:25+02:00","chapter":"podcast::polizeireport","mediaLabel":"Ein aufgewecktes Kerlchen","mediaTheme1":"hr4","mediaTheme2":"podcast::polizeireport","atiSiteId":"578129","atiTrackingHost":"https://logs1407"},"piano":{"av_content_id":"podcast-episode-108850","av_content":"Ein aufgewecktes Kerlchen","av_content_type":"Audio","av_content_duration":131000,"av_broadcasting_type":"OnDemand","av_content_level1":"hr4","av_content_level2":"podcast","av_content_level3":"polizeireport","hr_document_type":"hr-nt:podcastEpisode","site_level2_id":"2"}},"documentSection":"Kultur","displayTeaserBodyAsImageOverlay":false,"hasMediaButtons":false,"dontLazyload":true,"isStandardTeaser":false,"isHeroTeaser":false,"isMediaTeaser":false,"isGuide":false,"isProgram":false,"isEvent":false,"isTicker":false,"isAudio":true,"isVideo":false,"isPodcastEpisode":true,"isExtOrBrandLink":false,"isAuthor":true,"copyright":"Copyright Text","audioAuthor":"Anna Magel","hasStatus":false,"hasTeaserItem":false,"allowAVConsumption":true,"displayEpgInfos":false,"aspectRatio":"ar--teaserTop","hideGeotag":false,"hideEditableByline":true,"doTracking":true,"trackingForArdMediatheksLink":false,"showMediatheksLink":false,"showAirdate":true,"showProfileInfoAsByline":true,"obsolet_brandOfTeaser":"hessenschau","headlineTag":"h2","icon":"ortsmarke","imageVariant":"topteaser","hideShortText":false,"shorttext":"Cannabis soll legal werden - dafür hat die Bundesregierung jetzt einen Gesetzentwurf auf den Weg gebracht. Doch in Hessen sind nicht alle dafür. Und: Tierischer Nachwuchs im Frankfurter Zoo.","hideBylineAndShorttext":false,"sophoraId":"podcast-episode-122848","profiles":"Von Alf Haubitz und Alice Merton","teaserLead":{"isPodcast":true,"toModel":{"audioElement":{"isPodcast":true,"ardPlayerConfig":{"playerConfig":{"generic":{"isAutoplay":true,"imageTemplateConfig":{"size":[{"minWidth":0,"value":"480/270"},{"minWidth":480,"value":"640/360"},{"minWidth":640,"value":"960/540"},{"minWidth":960,"value":"1920/1080"}]}},"web":{"baseUrl":"http://localhost:8080/site/hessenschau/assets_2.85.0/vendor/ardplayer/","isForcedAutoplay":true,"isForcedVideoView":true},"pluginData":{"trackingAti@all":{"site":"551103","config":{"getCollectDomainSSL":"logs1406.xiti.com","secure":true},"page":{"name":"muslim_fashion__mehr_als_ein_kopftuch__podcast:audio:audioPlay","level2":"4","chapter1":"Audio-Start","chapter2":"OnDemand","customVars":{"site":{"1":"podcast-episode-43976","2":"hr-nt:podcastEpisode","5":"202203230802"}}},"richMedia":{"mediaType":"audio","playerId":"4076","mediaLevel2":"4","mediaLabel":"muslim_fashion__mehr_als_ein_kopftuch__podcast:audioPlay","mediaTheme1":"OnDemand","duration":"3040","broadcastMode":"clip"}}}},"mediaCollection":{"streams":[{"kind":"main","isAudioOnly":true,"media":[{"url":"https://mp3podcasthr-a.akamaihd.net/mp3/podcast/derTag/derTag_20190320_81142988.mp3","mimeType":"audio/mp3","audios":[{"kind":"standard","languageCode":"de"}]}]}],"meta":{"durationSeconds":3040,"images":[{"kind":"preview","url":"https://picsum.photos/id/101/{size}"}],"title":"Muslim Fashion. Mehr als ein Kopftuch.","synopsis":"Wo immer die Ausstellung \"Contemporary Muslim Fashion“ ins Museum kommt, entfacht sie heftige Diskussionen. Nachdem die Schau in San Francisco für Furore sorgte, wird sie demnächst im Frankfurter Museum für Angewandte Kunst als erste Station in Europa gezeigt. Die \"Modest Fashion“, die dezente Mode, so das Schlagwort für die verhüllende, aber keineswegs unsichtbar machende Mode, spaltet das feministische Lager: Ist sie eine Momentaufnahme aktueller muslimischer Kleidungsstile aus aller Welt oder Werbung für die weibliche Verschleierung? In jedem Fall zeigt die Ausstellung, dass die Verhüllung des weiblichen Körpers und der Frisur nicht nur trist, sondern auch schön sein kann - und für manche Trägerinnen befreiend. Und sie ist durchaus politisch, diskutiert gesetzliche Kleiderordnungen und die Frage politischer Symbolik. Inzwischen wollen auch westliche Firmen von der Vielfalt muslimischer Mode profitieren. Sie haben die Konsumentinnen im Nahen Osten und Südostasien als kaufkräftige Klientel entdeckt. Dort ist ein riesiger Markt zu erschließen. Nicht selten wagen sie sich damit an die Grenzen religiöser und gesellschaftlicher Akzeptanz. Kann Mode solche Grenzen überwinden? "},"pluginData":{},"geoBlocked":false},"playerId":"4076","type":"audioOndemand","cssUrl":"./vendor/ardplayer/ardplayer-hr-6.3.11.79310671.css","jsUrl":"./vendor/ardplayer/ardplayer-hr-6.3.11.c442fe17.js","isAutoplay":true,"teaserSize":"50","realTeaserSize":"50"},"ardPlayerJsonConfig":{"playerConfig":{"generic":{"isAutoplay":true,"imageTemplateConfig":{"size":[{"minWidth":0,"value":"480/270"},{"minWidth":480,"value":"640/360"},{"minWidth":640,"value":"960/540"},{"minWidth":960,"value":"1920/1080"}]}},"web":{"baseUrl":"http://localhost:8080/site/hessenschau/assets_2.85.0/vendor/ardplayer/","isForcedAutoplay":true,"isForcedVideoView":true},"pluginData":{"trackingAti@all":{"site":"551103","config":{"getCollectDomainSSL":"logs1406.xiti.com","secure":true},"page":{"name":"muslim_fashion__mehr_als_ein_kopftuch__podcast:audio:audioPlay","level2":"4","chapter1":"Audio-Start","chapter2":"OnDemand","customVars":{"site":{"1":"podcast-episode-43976","2":"hr-nt:podcastEpisode","5":"202203230802"}}},"richMedia":{"mediaType":"audio","playerId":"4076","mediaLevel2":"4","mediaLabel":"muslim_fashion__mehr_als_ein_kopftuch__podcast:audioPlay","mediaTheme1":"OnDemand","duration":"3040","broadcastMode":"clip"}}}},"mediaCollection":{"streams":[{"kind":"main","isAudioOnly":true,"media":[{"url":"https://mp3podcasthr-a.akamaihd.net/mp3/podcast/derTag/derTag_20190320_81142988.mp3","mimeType":"audio/mp3","audios":[{"kind":"standard","languageCode":"de"}]}]}],"meta":{"durationSeconds":3040,"images":[{"kind":"preview","url":"https://picsum.photos/id/101/{size}"}],"title":"Muslim Fashion. Mehr als ein Kopftuch.","synopsis":"Wo immer die Ausstellung \"Contemporary Muslim Fashion“ ins Museum kommt, entfacht sie heftige Diskussionen. Nachdem die Schau in San Francisco für Furore sorgte, wird sie demnächst im Frankfurter Museum für Angewandte Kunst als erste Station in Europa gezeigt. Die \"Modest Fashion“, die dezente Mode, so das Schlagwort für die verhüllende, aber keineswegs unsichtbar machende Mode, spaltet das feministische Lager: Ist sie eine Momentaufnahme aktueller muslimischer Kleidungsstile aus aller Welt oder Werbung für die weibliche Verschleierung? In jedem Fall zeigt die Ausstellung, dass die Verhüllung des weiblichen Körpers und der Frisur nicht nur trist, sondern auch schön sein kann - und für manche Trägerinnen befreiend. Und sie ist durchaus politisch, diskutiert gesetzliche Kleiderordnungen und die Frage politischer Symbolik. Inzwischen wollen auch westliche Firmen von der Vielfalt muslimischer Mode profitieren. Sie haben die Konsumentinnen im Nahen Osten und Südostasien als kaufkräftige Klientel entdeckt. Dort ist ein riesiger Markt zu erschließen. Nicht selten wagen sie sich damit an die Grenzen religiöser und gesellschaftlicher Akzeptanz. Kann Mode solche Grenzen überwinden? "},"pluginData":{},"geoBlocked":false},"playerId":"4076","type":"audioOndemand","cssUrl":"./vendor/ardplayer/ardplayer-hr-6.3.11.79310671.css","jsUrl":"./vendor/ardplayer/ardplayer-hr-6.3.11.c442fe17.js","isAutoplay":true,"teaserSize":"50","realTeaserSize":"50"}}}},"link":{"url":"/teaser1","webviewUrl":"/teaser1#webview","isTargetBlank":false,"hasIcon":false,"iconName":"iconName","readMoreText":{"readMoreScreenreader":"Zum Artikel","readMore":"mehr","readMoreLong":"read More Long"}},"label":{"type":"podcast","loca":"label_podcast","byline":{"bylineSsi":"53:13 min","bylineText":""}}}}}