hr-design-system-handlebars 1.5.12 → 1.5.14

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 (13) hide show
  1. package/CHANGELOG.md +25 -0
  2. package/dist/assets/index.css +18 -8
  3. package/dist/assets/js/components/mediaplayer/ardPlayerLoader.subfeature.js +2 -3
  4. package/dist/views/components/page/page_players.hbs +40 -0
  5. package/dist/views/components/teaser/group_teaser/group_teaser.hbs +1 -1
  6. package/package.json +1 -1
  7. package/src/assets/css/custom-components.css +8 -4
  8. package/src/assets/fixtures/page/page.json +8 -0
  9. package/src/stories/views/components/mediaplayer/ardPlayerLoader.subfeature.js +2 -3
  10. package/src/stories/views/components/page/page.stories.mdx +10 -0
  11. package/src/stories/views/components/page/page_player.stories.mdx +34 -0
  12. package/src/stories/views/components/page/page_players.hbs +40 -0
  13. package/src/stories/views/components/teaser/group_teaser/group_teaser.hbs +1 -1
package/CHANGELOG.md CHANGED
@@ -1,3 +1,28 @@
1
+ # v1.5.14 (Mon Feb 27 2023)
2
+
3
+ #### ⚠️ Pushed to `main`
4
+
5
+ - Merge branch 'main' of https://github.com/mumprod/hr-design-system-handlebars into main ([@Paul-Atreidis](https://github.com/Paul-Atreidis))
6
+ - DPE-2134 + creating player test-site storybook ([@Paul-Atreidis](https://github.com/Paul-Atreidis))
7
+
8
+ #### Authors: 1
9
+
10
+ - [@Paul-Atreidis](https://github.com/Paul-Atreidis)
11
+
12
+ ---
13
+
14
+ # v1.5.13 (Mon Feb 27 2023)
15
+
16
+ #### 🐛 Bug Fix
17
+
18
+ - headline-barrier: line always centered to first line of headline [#573](https://github.com/mumprod/hr-design-system-handlebars/pull/573) ([@hanswurstsalat](https://github.com/hanswurstsalat))
19
+
20
+ #### Authors: 1
21
+
22
+ - Geraldo ([@hanswurstsalat](https://github.com/hanswurstsalat))
23
+
24
+ ---
25
+
1
26
  # v1.5.12 (Thu Feb 23 2023)
2
27
 
3
28
  #### 🐛 Bug Fix
package/dist/assets/index.css CHANGED
@@ -541,17 +541,27 @@ video {
541
541
  .headline-barrier {
542
542
  display: grid;
543
543
  grid-template-columns: minmax(20px, 1fr) auto minmax(20px, 1fr);
544
- align-items: center;
544
+ align-items: self-start;
545
545
  text-align: center;
546
546
  grid-gap: 10px;
547
547
  width: 100%;
548
548
  }
549
549
  .headline-barrier:before,
550
550
  .headline-barrier:after {
551
-
552
- border-top: 1px solid;
553
- content: '';
554
- }
551
+ border-bottom: 1px solid;
552
+ content: '';
553
+ padding-top: 0.875rem}
554
+ @media (min-width: 768px) {
555
+
556
+ .headline-barrier:before,
557
+ .headline-barrier:after {
558
+ padding-top: 1.25rem;
559
+ }
560
+ }
561
+ .justifyLine.headline-barrier:before,
562
+ .justifyLine.headline-barrier:after {
563
+ padding-top: 0.875rem;
564
+ }
555
565
  /* PODCAST SEEK SLIDER*/
556
566
  .seek_slider::-webkit-slider-thumb {
557
567
  -webkit-appearance: none;
@@ -2657,7 +2667,7 @@ video {
2657
2667
  transition-timing-function: cubic-bezier(0.4, 0, 1, 1);
2658
2668
  }
2659
2669
  .counter-reset {
2660
- counter-reset: cnt1677149358673;
2670
+ counter-reset: cnt1677515825983;
2661
2671
  }
2662
2672
  .line-clamp-4 {
2663
2673
  overflow: hidden;
@@ -2891,7 +2901,7 @@ video {
2891
2901
  --tw-ring-color: rgba(255, 255, 255, 0.5);
2892
2902
  }
2893
2903
  .-ordered {
2894
- counter-increment: cnt1677149358673 1;
2904
+ counter-increment: cnt1677515825983 1;
2895
2905
  }
2896
2906
  .-ordered::before {
2897
2907
  position: absolute;
@@ -2907,7 +2917,7 @@ video {
2907
2917
  letter-spacing: .0125em;
2908
2918
  --tw-text-opacity: 1;
2909
2919
  color: rgba(0, 0, 0, var(--tw-text-opacity));
2910
- content: counter(cnt1677149358673);
2920
+ content: counter(cnt1677515825983);
2911
2921
  }
2912
2922
  /*! ****************************/
2913
2923
  /*! text-shadow */
package/dist/assets/js/components/mediaplayer/ardPlayerLoader.subfeature.js CHANGED
@@ -44,7 +44,6 @@ const ArdPlayerLoader = function (options, rootElement) {
44
44
  resolve()
45
45
  }
46
46
  link.href = url
47
-
48
47
  const headScript = document.querySelector('script')
49
48
  headScript.parentNode.insertBefore(link, headScript)
50
49
  resolve('Style wurde neu geladen')
@@ -90,7 +89,6 @@ const ArdPlayerLoader = function (options, rootElement) {
90
89
  if (typeof geotag != 'undefined') {
91
90
  geotag.classList.add('hide')
92
91
  }
93
-
94
92
  fireEvent('hr:global:stopOtherAVs', 'ardplayer', true)
95
93
  })
96
94
 
@@ -104,7 +102,8 @@ const ArdPlayerLoader = function (options, rootElement) {
104
102
  if (event.detail != 'ardplayer') {
105
103
  player.pause()
106
104
  }
107
- })
105
+ }, window)
106
+
108
107
 
109
108
  listen('player_closed', function (event) {
110
109
  let playerIdFromConfig = parseInt(playerId)
package/dist/views/components/page/page_players.hbs ADDED
@@ -0,0 +1,40 @@
1
+ <!DOCTYPE html>
2
+ <html
3
+ class="no-js no-js-burgerMenu preload noMicroInteraction"
4
+ data-theme="hessenschau"
5
+ lang="de"
6
+ >
7
+ <head>
8
+
9
+ <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/>
10
+ <meta http-equiv="X-UA-Compatible" content="IE=Edge"/>
11
+ <title>hessenschau.de | Nachrichten aus Hessen</title>
12
+ <meta name="application-name" content="hessenschau.de" />
13
+ <meta name="copyright" content="Hessischer Rundfunk, Frankfurt, Germany" />
14
+ <meta name="author" content="hessenschau.de, Frankfurt, Germany" />
15
+ <meta name="publisher" content="hessenschau.de" />
16
+ <meta name="language" content="Deutsch" />
17
+
18
+ </head>
19
+
20
+ <body itemscope itemtype="http://schema.org/WebPage">
21
+ <div class="js-pageSwap">
22
+ <main
23
+ onclick="void(0)"
24
+ role="main"
25
+ id="content"
26
+ class="flex items-center justify-center"
27
+ >
28
+ <div class="grid grid-page">
29
+ <div class="{{> components/grid/grid_group_wrapper_classes }}">
30
+ <section class="grid items-start content-start grid-cols-12 col-span-12 bg-white gap-x-6 gap-y-6 ">
31
+ {{> components/teaser/teaser_standard this.teaser_standard_50_audio.logicItem.includeModel}}
32
+ {{> components/teaser/podcast/podcast this.teaser_podcast_50.logicItem.includeModel}}
33
+ </section>
34
+ </div>
35
+ </div>
36
+ </main>
37
+
38
+ </div>
39
+ </body>
40
+ </html>
package/dist/views/components/teaser/group_teaser/group_teaser.hbs CHANGED
@@ -1,7 +1,7 @@
1
1
  {{#if this.hasGroupItems}}
2
2
  {{#>components/grid/grid_group _backgroundColor=this.backgroundColor }}
3
3
  {{~#if this.hasGroupTitle}}
4
- <{{if this.headlineTag this.headlineTag "h2"}} class="text-2xl {{#unless this.isRelatedContent}} md:text-4xl{{/unless}} col-span-full py-0 font-title {{#if this.backgroundColor}} text-center{{else}} headline-barrier{{/if}}">
4
+ <{{if this.headlineTag this.headlineTag "h2"}} class="text-2xl {{#unless this.isRelatedContent}} md:text-4xl{{else}} justifyLine{{/unless}} col-span-full py-0 font-title {{#if this.backgroundColor}} text-center{{else}} headline-barrier{{/if}}">
5
5
  {{~#if this.hasLink}}<a class="no-underline hover:underline decoration-1 md:decoration-2 text-link" href="{{this.link.url}}">{{/if~}}
6
6
  {{this.groupTitle}}
7
7
  {{~#if this.hasLink}}</a>{{/if~}}
package/package.json CHANGED
@@ -6,7 +6,7 @@
6
6
  "license": "MIT",
7
7
  "main": "dist/index.js",
8
8
  "repository": "https://github.com/szuelch/hr-design-system-handlebars",
9
- "version": "1.5.12",
9
+ "version": "1.5.14",
10
10
  "scripts": {
11
11
  "test": "echo \"Error: no test specified\" && exit 1",
12
12
  "storybook": "start-storybook -p 6006 public",
package/src/assets/css/custom-components.css CHANGED
@@ -34,16 +34,20 @@
34
34
  .headline-barrier {
35
35
  display: grid;
36
36
  grid-template-columns: minmax(20px, 1fr) auto minmax(20px, 1fr);
37
- align-items: center;
37
+ align-items: self-start;
38
38
  text-align: center;
39
39
  grid-gap: 10px;
40
40
  width: 100%;
41
41
  }
42
42
  .headline-barrier:before,
43
43
  .headline-barrier:after {
44
-
45
- border-top: 1px solid;
46
- content: '';
44
+ border-bottom: 1px solid;
45
+ content: '';
46
+ @apply pt-3.5 md:pt-5
47
+ }
48
+ .justifyLine.headline-barrier:before,
49
+ .justifyLine.headline-barrier:after {
50
+ @apply pt-3.5
47
51
  }
48
52
 
49
53
  /* PODCAST SEEK SLIDER*/
package/src/assets/fixtures/page/page.json ADDED
@@ -0,0 +1,8 @@
1
+ {
2
+ "teaser_standard_50_audio":{
3
+ "@->jsoninclude": "teaser/teaser_standard_50_serif_audio.json"
4
+ },
5
+ "teaser_podcast_50":{
6
+ "@->jsoninclude": "teaser/teaser_podcast_50.json"
7
+ }
8
+ }
package/src/stories/views/components/mediaplayer/ardPlayerLoader.subfeature.js CHANGED
@@ -44,7 +44,6 @@ const ArdPlayerLoader = function (options, rootElement) {
44
44
  resolve()
45
45
  }
46
46
  link.href = url
47
-
48
47
  const headScript = document.querySelector('script')
49
48
  headScript.parentNode.insertBefore(link, headScript)
50
49
  resolve('Style wurde neu geladen')
@@ -90,7 +89,6 @@ const ArdPlayerLoader = function (options, rootElement) {
90
89
  if (typeof geotag != 'undefined') {
91
90
  geotag.classList.add('hide')
92
91
  }
93
-
94
92
  fireEvent('hr:global:stopOtherAVs', 'ardplayer', true)
95
93
  })
96
94
 
@@ -104,7 +102,8 @@ const ArdPlayerLoader = function (options, rootElement) {
104
102
  if (event.detail != 'ardplayer') {
105
103
  player.pause()
106
104
  }
107
- })
105
+ }, window)
106
+
108
107
 
109
108
  listen('player_closed', function (event) {
110
109
  let playerIdFromConfig = parseInt(playerId)
package/src/stories/views/components/page/page.stories.mdx CHANGED
@@ -7,6 +7,7 @@ import NavigationData3 from '../site_header/fixtures/site_header_mit_submenu.jso
7
7
  //import NavigationData4 from '../site_header/fixtures/site_header_mit_submenu_service_selected.json'
8
8
 
9
9
  import hero_teaser from '../teaser/fixtures/teaser_standard_hero_serif.json'
10
+ import audio_player_teaser from '../teaser/fixtures/teaser_standard_50_serif_audio.json'
10
11
  const NavigationDataWithTeaser = structuredClone(
11
12
  Object.assign({}, NavigationData, hero_teaser.logicItem.includeModel)
12
13
  )
@@ -16,6 +17,9 @@ const NavigationDataWithTeaser2 = structuredClone(
16
17
  const NavigationDataWithTeaser3 = structuredClone(
17
18
  Object.assign({}, NavigationData3, hero_teaser.logicItem.includeModel)
18
19
  )
20
+ const NavigationDataWithPlayer = structuredClone(
21
+ Object.assign({}, NavigationData, audio_player_teaser.logicItem.includeModel, hero_teaser.logicItem.includeModel)
22
+ )
19
23
 
20
24
  <Meta
21
25
  title="Komponenten/Page/Page"
@@ -57,4 +61,10 @@ export const Template = (args, { globals: { customConditionalToolbar } }) => {
57
61
  </Story>
58
62
  </Canvas>
59
63
 
64
+ <Canvas>
65
+ <Story name="Player-Interaktion" args={NavigationDataWithPlayer}>
66
+ {Template.bind({})}
67
+ </Story>
68
+ </Canvas>
69
+
60
70
  <ArgsTable story="Default" />
package/src/stories/views/components/page/page_player.stories.mdx ADDED
@@ -0,0 +1,34 @@
1
+ import { ArgsTable, Meta, Story, Canvas, Preview } from '@storybook/addon-docs'
2
+ import 'core-js/actual/structured-clone'
3
+ import page from './page_players.hbs'
4
+ import AudioDataMixed from '../page/fixtures/page.json'
5
+
6
+ <Meta
7
+ title="Komponenten/Page/Page"
8
+ argTypes={{}}
9
+ parameters={{
10
+ chromatic: {
11
+ viewports: [360, 768, 1024]
12
+ },
13
+ layout: 'fullscreen',
14
+ docs: { inlineStories : false, iframeHeight: 400 }
15
+ }}
16
+ />
17
+
18
+ export const Template = (args, { globals: { customConditionalToolbar } }) => {
19
+ // You can either use a function to create DOM elements or use a plain html string!
20
+ // return `<div>${label}</div>`;
21
+ let brand = undefined !== customConditionalToolbar ? customConditionalToolbar['brands'] : 'hessenschau'
22
+ return page({brand,...args})
23
+ }
24
+
25
+
26
+ # Page
27
+
28
+ <Canvas>
29
+ <Story name="Player-Interaktion" args={AudioDataMixed}>
30
+ {Template.bind({})}
31
+ </Story>
32
+ </Canvas>
33
+
34
+ <ArgsTable story="Default" />
package/src/stories/views/components/page/page_players.hbs ADDED
@@ -0,0 +1,40 @@
1
+ <!DOCTYPE html>
2
+ <html
3
+ class="no-js no-js-burgerMenu preload noMicroInteraction"
4
+ data-theme="hessenschau"
5
+ lang="de"
6
+ >
7
+ <head>
8
+
9
+ <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/>
10
+ <meta http-equiv="X-UA-Compatible" content="IE=Edge"/>
11
+ <title>hessenschau.de | Nachrichten aus Hessen</title>
12
+ <meta name="application-name" content="hessenschau.de" />
13
+ <meta name="copyright" content="Hessischer Rundfunk, Frankfurt, Germany" />
14
+ <meta name="author" content="hessenschau.de, Frankfurt, Germany" />
15
+ <meta name="publisher" content="hessenschau.de" />
16
+ <meta name="language" content="Deutsch" />
17
+
18
+ </head>
19
+
20
+ <body itemscope itemtype="http://schema.org/WebPage">
21
+ <div class="js-pageSwap">
22
+ <main
23
+ onclick="void(0)"
24
+ role="main"
25
+ id="content"
26
+ class="flex items-center justify-center"
27
+ >
28
+ <div class="grid grid-page">
29
+ <div class="{{> components/grid/grid_group_wrapper_classes }}">
30
+ <section class="grid items-start content-start grid-cols-12 col-span-12 bg-white gap-x-6 gap-y-6 ">
31
+ {{> components/teaser/teaser_standard this.teaser_standard_50_audio.logicItem.includeModel}}
32
+ {{> components/teaser/podcast/podcast this.teaser_podcast_50.logicItem.includeModel}}
33
+ </section>
34
+ </div>
35
+ </div>
36
+ </main>
37
+
38
+ </div>
39
+ </body>
40
+ </html>
package/src/stories/views/components/teaser/group_teaser/group_teaser.hbs CHANGED
@@ -1,7 +1,7 @@
1
1
  {{#if this.hasGroupItems}}
2
2
  {{#>components/grid/grid_group _backgroundColor=this.backgroundColor }}
3
3
  {{~#if this.hasGroupTitle}}
4
- <{{if this.headlineTag this.headlineTag "h2"}} class="text-2xl {{#unless this.isRelatedContent}} md:text-4xl{{/unless}} col-span-full py-0 font-title {{#if this.backgroundColor}} text-center{{else}} headline-barrier{{/if}}">
4
+ <{{if this.headlineTag this.headlineTag "h2"}} class="text-2xl {{#unless this.isRelatedContent}} md:text-4xl{{else}} justifyLine{{/unless}} col-span-full py-0 font-title {{#if this.backgroundColor}} text-center{{else}} headline-barrier{{/if}}">
5
5
  {{~#if this.hasLink}}<a class="no-underline hover:underline decoration-1 md:decoration-2 text-link" href="{{this.link.url}}">{{/if~}}
6
6
  {{this.groupTitle}}
7
7
  {{~#if this.hasLink}}</a>{{/if~}}