hr-design-system-handlebars 0.42.3 → 0.42.6

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 (14) hide show
  1. package/CHANGELOG.md +36 -0
  2. package/dist/assets/index.css +118 -46
  3. package/dist/views/components/Page/Page.hbs +22 -127
  4. package/dist/views/components/Teaser/Teaser-standard.hbs +3 -3
  5. package/package.json +1 -1
  6. package/src/assets/tailwind.css +45 -1
  7. package/src/stories/views/components/Page/Page.hbs +22 -127
  8. package/src/stories/views/components/Page/Page.stories.mdx +15 -6
  9. package/src/stories/views/components/Teaser/Teaser-standard.hbs +3 -3
  10. package/src/stories/views/components/Teaser/data/teaser_standard_sm_serif.json +2 -2
  11. package/tailwind.config.js +2 -1
  12. package/dist/views/components/Teaser/Teaser.hbs +0 -32
  13. package/src/stories/views/components/Teaser/Teaser.hbs +0 -32
  14. package/src/stories/views/components/Teaser/Teaser.stories.mdx.old +0 -156
package/CHANGELOG.md CHANGED
@@ -1,3 +1,39 @@
1
+ # v0.42.6 (Wed Apr 13 2022)
2
+
3
+ #### 🐛 Bug Fix
4
+
5
+ - - added aspect ratio classes with fallback to tailwind.css [#215](https://github.com/mumprod/hr-design-system-handlebars/pull/215) ([@vascoeduardo](https://github.com/vascoeduardo))
6
+
7
+ #### Authors: 1
8
+
9
+ - Vasco ([@vascoeduardo](https://github.com/vascoeduardo))
10
+
11
+ ---
12
+
13
+ # v0.42.5 (Wed Apr 13 2022)
14
+
15
+ #### 🐛 Bug Fix
16
+
17
+ - Page story update use new teaser now [#214](https://github.com/mumprod/hr-design-system-handlebars/pull/214) ([@vascoeduardo](https://github.com/vascoeduardo))
18
+
19
+ #### Authors: 1
20
+
21
+ - Vasco ([@vascoeduardo](https://github.com/vascoeduardo))
22
+
23
+ ---
24
+
25
+ # v0.42.4 (Tue Apr 12 2022)
26
+
27
+ #### 🐛 Bug Fix
28
+
29
+ - responsiveImage 2.1 [#213](https://github.com/mumprod/hr-design-system-handlebars/pull/213) ([@vascoeduardo](https://github.com/vascoeduardo))
30
+
31
+ #### Authors: 1
32
+
33
+ - Vasco ([@vascoeduardo](https://github.com/vascoeduardo))
34
+
35
+ ---
36
+
1
37
  # v0.42.3 (Tue Apr 12 2022)
2
38
 
3
39
  #### 🐛 Bug Fix
package/dist/assets/index.css CHANGED
@@ -788,7 +788,7 @@ Ensure the default browser behavior of the `hidden` attribute.
788
788
  .grid-page {
789
789
  grid-template-columns:
790
790
  [full-start] minmax(1rem, 1fr)
791
- [main-start] minmax(0, 64rem) [main-end]
791
+ [main-start] minmax(0, 63rem) [main-end]
792
792
  minmax(1rem, 1fr) [full-end];
793
793
  }
794
794
 
@@ -796,6 +796,54 @@ Ensure the default browser behavior of the `hidden` attribute.
796
796
  grid-column: full;
797
797
  }
798
798
 
799
+ /*! ****************************/
800
+
801
+ /*! Aspect Ratio with fallback */
802
+
803
+ /*! ****************************/
804
+
805
+ .ar-16-9 {
806
+ aspect-ratio: 16 / 9
807
+ }
808
+
809
+ @supports not (aspect-ratio: 16 / 9) {
810
+ .ar-16-9::before {
811
+ float: left;
812
+ padding-top: 56.25%;
813
+ content: '';
814
+ }
815
+
816
+ .ar-16-19::after {
817
+ display: block;
818
+ content: '';
819
+ clear: both;
820
+ }
821
+ }
822
+
823
+ .ar-1-1 {
824
+ aspect-ratio: 1 / 1
825
+ }
826
+
827
+ @supports not (aspect-ratio: 1 / 1) {
828
+ .ar-1-1::before {
829
+ float: left;
830
+ padding-top: 100%;
831
+ content: '';
832
+ }
833
+
834
+ .ar-1-1::after {
835
+ display: block;
836
+ content: '';
837
+ clear: both;
838
+ }
839
+ }
840
+
841
+ /*! ********************************/
842
+
843
+ /*! Aspect Ratio with fallback end */
844
+
845
+ /*! ********************************/
846
+
799
847
  .headline--barrier {
800
848
  display: -webkit-box;
801
849
  display: -ms-flexbox;
@@ -1411,7 +1459,7 @@ Ensure the default browser behavior of the `hidden` attribute.
1411
1459
  padding-top: 0.75rem;
1412
1460
  padding-bottom: 0.75rem;
1413
1461
  font-size: 1.125rem;
1414
- line-height: 1.75rem;
1462
+ line-height: 1.5rem;
1415
1463
  }
1416
1464
  .sr-only {
1417
1465
  position: absolute;
@@ -1514,15 +1562,6 @@ Ensure the default browser behavior of the `hidden` attribute.
1514
1562
  .-mt-10 {
1515
1563
  margin-top: -2.5rem;
1516
1564
  }
1517
- .mb-4 {
1518
- margin-bottom: 1rem;
1519
- }
1520
- .mt-4 {
1521
- margin-top: 1rem;
1522
- }
1523
- .mt-1 {
1524
- margin-top: 0.25rem;
1525
- }
1526
1565
  .mt-0\.5 {
1527
1566
  margin-top: 0.125rem;
1528
1567
  }
@@ -1689,13 +1728,13 @@ Ensure the default browser behavior of the `hidden` attribute.
1689
1728
  -ms-flex-negative: 0;
1690
1729
  flex-shrink: 0;
1691
1730
  }
1692
- .basis-1\/3 {
1693
- -ms-flex-preferred-size: 33.333333%;
1694
- flex-basis: 33.333333%;
1731
+ .basis-2\/5 {
1732
+ -ms-flex-preferred-size: 40%;
1733
+ flex-basis: 40%;
1695
1734
  }
1696
- .basis-2\/3 {
1697
- -ms-flex-preferred-size: 66.666667%;
1698
- flex-basis: 66.666667%;
1735
+ .basis-3\/5 {
1736
+ -ms-flex-preferred-size: 60%;
1737
+ flex-basis: 60%;
1699
1738
  }
1700
1739
  .-translate-x-1\/2 {
1701
1740
  --tw-translate-x: -50%;
@@ -2154,7 +2193,7 @@ Ensure the default browser behavior of the `hidden` attribute.
2154
2193
  }
2155
2194
  .text-lg {
2156
2195
  font-size: 1.125rem;
2157
- line-height: 1.75rem;
2196
+ line-height: 1.5rem;
2158
2197
  }
2159
2198
  .text-xl {
2160
2199
  font-size: 1.25rem;
@@ -2216,14 +2255,6 @@ Ensure the default browser behavior of the `hidden` attribute.
2216
2255
  --tw-text-opacity: 1;
2217
2256
  color: rgba(96, 96, 96, var(--tw-text-opacity));
2218
2257
  }
2219
- .text-indigo-500 {
2220
- --tw-text-opacity: 1;
2221
- color: rgba(99, 102, 241, var(--tw-text-opacity));
2222
- }
2223
- .text-gray-500 {
2224
- --tw-text-opacity: 1;
2225
- color: rgba(107, 114, 128, var(--tw-text-opacity));
2226
- }
2227
2258
  .text-toplineColor {
2228
2259
  color: #006dc1;
2229
2260
  color: var(--color-topline);
@@ -2231,10 +2262,6 @@ Ensure the default browser behavior of the `hidden` attribute.
2231
2262
  .text-opacity-50 {
2232
2263
  --tw-text-opacity: 0.5;
2233
2264
  }
2234
- .no-underline {
2235
- -webkit-text-decoration-line: none;
2236
- text-decoration-line: none;
2237
- }
2238
2265
  .placeholder-blue-congress::-webkit-input-placeholder {
2239
2266
  --tw-placeholder-opacity: 1;
2240
2267
  color: rgba(0, 82, 147, var(--tw-placeholder-opacity));
@@ -2426,9 +2453,6 @@ Ensure the default browser behavior of the `hidden` attribute.
2426
2453
  transition: transform 150ms ease-in-out 0s;
2427
2454
  transition: transform 150ms ease-in-out 0s, -webkit-transform 150ms ease-in-out 0s;
2428
2455
  }
2429
- .first\:ml-0:first-child {
2430
- margin-left: 0px;
2431
- }
2432
2456
  .first\:border-t:first-child {
2433
2457
  border-top-width: 1px;
2434
2458
  }
@@ -2438,9 +2462,6 @@ Ensure the default browser behavior of the `hidden` attribute.
2438
2462
  .first\:font-bold:first-child {
2439
2463
  font-weight: 700;
2440
2464
  }
2441
- .last\:mr-0:last-child {
2442
- margin-right: 0px;
2443
- }
2444
2465
  .last\:border-b-0:last-child {
2445
2466
  border-bottom-width: 0px;
2446
2467
  }
@@ -2505,165 +2526,216 @@ Ensure the default browser behavior of the `hidden` attribute.
2505
2526
  }
2506
2527
  }
2507
2528
  @media (min-width: 768px) {
2529
+ .md\:ar-16-9 {
2530
+ aspect-ratio: 16 / 9
2531
+ }
2532
+
2533
+ @supports not (aspect-ratio: 16 / 9) {
2534
+ .md\:ar-16-9::before {
2535
+ float: left;
2536
+ padding-top: 56.25%;
2537
+ content: '';
2538
+ }
2539
+
2540
+ .ar-16-19::after {
2541
+ display: block;
2542
+ content: '';
2543
+ clear: both;
2544
+ }
2545
+ }
2546
+
2508
2547
  .md\:static {
2509
2548
  position: static;
2510
2549
  }
2550
+
2511
2551
  .md\:top-auto {
2512
2552
  top: auto;
2513
2553
  }
2554
+
2514
2555
  .md\:left-auto {
2515
2556
  left: auto;
2516
2557
  }
2558
+
2517
2559
  .md\:top-12 {
2518
2560
  top: 3rem;
2519
2561
  }
2562
+
2520
2563
  .md\:left-0 {
2521
2564
  left: 0px;
2522
2565
  }
2566
+
2523
2567
  .md\:z-101 {
2524
2568
  z-index: 101;
2525
2569
  }
2570
+
2526
2571
  .md\:order-2 {
2527
2572
  -webkit-box-ordinal-group: 3;
2528
2573
  -ms-flex-order: 2;
2529
2574
  order: 2;
2530
2575
  }
2576
+
2531
2577
  .md\:order-4 {
2532
2578
  -webkit-box-ordinal-group: 5;
2533
2579
  -ms-flex-order: 4;
2534
2580
  order: 4;
2535
2581
  }
2582
+
2536
2583
  .md\:col-span-8 {
2537
2584
  grid-column: span 8 / span 8;
2538
2585
  }
2586
+
2539
2587
  .md\:col-span-6 {
2540
2588
  grid-column: span 6 / span 6;
2541
2589
  }
2590
+
2542
2591
  .md\:col-span-4 {
2543
2592
  grid-column: span 4 / span 4;
2544
2593
  }
2594
+
2545
2595
  .md\:col-span-3 {
2546
2596
  grid-column: span 3 / span 3;
2547
2597
  }
2548
- .md\:mx-2 {
2549
- margin-left: 0.5rem;
2550
- margin-right: 0.5rem;
2551
- }
2598
+
2552
2599
  .md\:mt-0 {
2553
2600
  margin-top: 0px;
2554
2601
  }
2602
+
2555
2603
  .md\:-mt-40 {
2556
2604
  margin-top: -10rem;
2557
2605
  }
2558
- .md\:mt-8 {
2559
- margin-top: 2rem;
2560
- }
2561
- .md\:mb-0 {
2562
- margin-bottom: 0px;
2563
- }
2606
+
2564
2607
  .md\:block {
2565
2608
  display: block;
2566
2609
  }
2610
+
2567
2611
  .md\:flex {
2568
2612
  display: -webkit-box;
2569
2613
  display: -ms-flexbox;
2570
2614
  display: flex;
2571
2615
  }
2616
+
2572
2617
  .md\:hidden {
2573
2618
  display: none;
2574
2619
  }
2620
+
2575
2621
  .md\:h-header-md {
2576
2622
  height: 5.5625rem;
2577
2623
  }
2624
+
2578
2625
  .md\:h-12 {
2579
2626
  height: 3rem;
2580
2627
  }
2628
+
2581
2629
  .md\:h-7 {
2582
2630
  height: 1.75rem;
2583
2631
  }
2632
+
2584
2633
  .md\:h-full {
2585
2634
  height: 100%;
2586
2635
  }
2636
+
2587
2637
  .md\:h-8 {
2588
2638
  height: 2rem;
2589
2639
  }
2640
+
2590
2641
  .md\:w-1\/2 {
2591
2642
  width: 50%;
2592
2643
  }
2644
+
2593
2645
  .md\:w-40 {
2594
2646
  width: 10rem;
2595
2647
  }
2648
+
2596
2649
  .md\:w-80 {
2597
2650
  width: 20rem;
2598
2651
  }
2652
+
2599
2653
  .md\:w-auto {
2600
2654
  width: auto;
2601
2655
  }
2656
+
2602
2657
  .md\:w-8 {
2603
2658
  width: 2rem;
2604
2659
  }
2660
+
2605
2661
  .md\:max-w-1\/2 {
2606
2662
  max-width: 50%;
2607
2663
  }
2664
+
2608
2665
  .md\:flex-auto {
2609
2666
  -webkit-box-flex: 1;
2610
2667
  -ms-flex: 1 1 auto;
2611
2668
  flex: 1 1 auto;
2612
2669
  }
2670
+
2613
2671
  .md\:flex-col {
2614
2672
  -webkit-box-orient: vertical;
2615
2673
  -webkit-box-direction: normal;
2616
2674
  -ms-flex-direction: column;
2617
2675
  flex-direction: column;
2618
2676
  }
2677
+
2619
2678
  .md\:justify-end {
2620
2679
  -webkit-box-pack: end;
2621
2680
  -ms-flex-pack: end;
2622
2681
  justify-content: flex-end;
2623
2682
  }
2683
+
2624
2684
  .md\:rounded-none {
2625
2685
  border-radius: 0px;
2626
2686
  }
2687
+
2627
2688
  .md\:border-0 {
2628
2689
  border-width: 0px;
2629
2690
  }
2691
+
2630
2692
  .md\:border-r {
2631
2693
  border-right-width: 1px;
2632
2694
  }
2695
+
2633
2696
  .md\:border-l {
2634
2697
  border-left-width: 1px;
2635
2698
  }
2699
+
2636
2700
  .md\:border-white {
2637
2701
  --tw-border-opacity: 1;
2638
2702
  border-color: rgba(255, 255, 255, var(--tw-border-opacity));
2639
2703
  }
2704
+
2640
2705
  .md\:px-0 {
2641
2706
  padding-left: 0px;
2642
2707
  padding-right: 0px;
2643
2708
  }
2709
+
2644
2710
  .md\:px-5 {
2645
2711
  padding-left: 1.25rem;
2646
2712
  padding-right: 1.25rem;
2647
2713
  }
2714
+
2648
2715
  .md\:px-4 {
2649
2716
  padding-left: 1rem;
2650
2717
  padding-right: 1rem;
2651
2718
  }
2719
+
2652
2720
  .md\:pt-4 {
2653
2721
  padding-top: 1rem;
2654
2722
  }
2723
+
2655
2724
  .md\:pl-0 {
2656
2725
  padding-left: 0px;
2657
2726
  }
2727
+
2658
2728
  .md\:text-4xl {
2659
2729
  font-size: 2.125rem;
2660
2730
  line-height: 2.25rem;
2661
2731
  }
2732
+
2662
2733
  .md\:drop-shadow-md {
2663
2734
  --tw-drop-shadow: drop-shadow(0 5px 3px rgba(0, 0, 0, 0.07));
2664
2735
  -webkit-filter: var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow);
2665
2736
  filter: var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow);
2666
2737
  }
2738
+
2667
2739
  .md\:filter {
2668
2740
  -webkit-filter: var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow);
2669
2741
  filter: var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow);
package/dist/views/components/Page/Page.hbs CHANGED
@@ -28,137 +28,32 @@
28
28
  id="content"
29
29
  class="flex items-center justify-center"
30
30
  >
31
- <div class="container px-3.5 md:px-5 lg:px-10">
32
- <div class="md:mt-8">
33
- {{> components/Teaser/Teaser
34
- variant="Serif"
35
- teaserSize="xxl"
36
- topline="So plant Glasner bei der Eintracht"
37
- headline="Silvas Erbe wird auf mehrere Schultern verteilt"
38
- teaserText="Nach dem Abgang von André Silva und dem Zugang von Santos Borré hat Trainer Oliver Glasner Einblicke in seine Offensivideen für Eintracht Frankfurt gegeben. Er plant mit den Flanken von Filip Kostic und spricht ein Sonderlob für einen Youngster aus."
39
- author="Stephan Reich"
40
- }}
31
+ <div class="grid grid-page">
32
+ <div class="grid grid-cols-12 py-6 col-full gap-x-6 gap-y-6 sm:px-8 sm:col-main">
33
+ {{> components/Teaser/Teaser-standard }}
41
34
  </div>
42
- <div class="md:mt-8">
43
- {{> components/Teaser/Teaser
44
- variant="Serif"
45
- teaserSize="lg"
46
- topline="So plant Glasner bei der Eintracht"
47
- headline="Silvas Erbe wird auf mehrere Schultern verteilt"
48
- teaserText="Nach dem Abgang von André Silva und dem Zugang von Santos Borré hat Trainer Oliver Glasner Einblicke in seine Offensivideen für Eintracht Frankfurt gegeben. Er plant mit den Flanken von Filip Kostic und spricht ein Sonderlob für einen Youngster aus."
49
- author="Stephan Reich"
50
- }}
51
-
52
- {{> components/Teaser/Teaser
53
- variant="Serif"
54
- teaserSize="lg"
55
- topline="So plant Glasner bei der Eintracht"
56
- headline="Silvas Erbe wird auf mehrere Schultern verteilt"
57
- teaserText="Nach dem Abgang von André Silva und dem Zugang von Santos Borré hat Trainer Oliver Glasner Einblicke in seine Offensivideen für Eintracht Frankfurt gegeben. Er plant mit den Flanken von Filip Kostic und spricht ein Sonderlob für einen Youngster aus."
58
- author="Stephan Reich"
59
- }}
60
- </div>
61
- <div class="md:mt-8">
62
- {{> components/Teaser/Teaser
63
- variant="Serif"
64
- teaserSize="md"
65
- topline="So plant Glasner bei der Eintracht"
66
- headline="Silvas Erbe wird auf mehrere Schultern verteilt"
67
- teaserText="Nach dem Abgang von André Silva und dem Zugang von Santos Borré hat Trainer Oliver Glasner Einblicke in seine Offensivideen für Eintracht Frankfurt gegeben. Er plant mit den Flanken von Filip Kostic und spricht ein Sonderlob für einen Youngster aus."
68
- author="Stephan Reich"
69
- }}
70
-
71
- {{> components/Teaser/Teaser
72
- variant="Serif"
73
- teaserSize="md"
74
- topline="So plant Glasner bei der Eintracht"
75
- headline="Silvas Erbe wird auf mehrere Schultern verteilt"
76
- teaserText="Nach dem Abgang von André Silva und dem Zugang von Santos Borré hat Trainer Oliver Glasner Einblicke in seine Offensivideen für Eintracht Frankfurt gegeben. Er plant mit den Flanken von Filip Kostic und spricht ein Sonderlob für einen Youngster aus."
77
- author="Stephan Reich"
78
- }}
79
-
80
- {{> components/Teaser/Teaser
81
- variant="Serif"
82
- teaserSize="md"
83
- topline="So plant Glasner bei der Eintracht"
84
- headline="Silvas Erbe wird auf mehrere Schultern verteilt"
85
- teaserText="Nach dem Abgang von André Silva und dem Zugang von Santos Borré hat Trainer Oliver Glasner Einblicke in seine Offensivideen für Eintracht Frankfurt gegeben. Er plant mit den Flanken von Filip Kostic und spricht ein Sonderlob für einen Youngster aus."
86
- author="Stephan Reich"
87
- }}
35
+ <div class="grid grid-cols-12 py-6 col-full gap-x-6 gap-y-6 sm:px-8 sm:col-main">
36
+ {{> components/Teaser/Teaser-standard teasersize="lg"}}
37
+ {{> components/Teaser/Teaser-standard teasersize="lg"}}
88
38
  </div>
89
- <div class="md:mt-8">
90
- {{> components/Teaser/Teaser
91
- variant="Serif"
92
- teaserSize="lg"
93
- topline="So plant Glasner bei der Eintracht"
94
- headline="Silvas Erbe wird auf mehrere Schultern verteilt"
95
- teaserText="Nach dem Abgang von André Silva und dem Zugang von Santos Borré hat Trainer Oliver Glasner Einblicke in seine Offensivideen für Eintracht Frankfurt gegeben. Er plant mit den Flanken von Filip Kostic und spricht ein Sonderlob für einen Youngster aus."
96
- author="Stephan Reich"
97
- }}
98
-
99
- {{> components/Teaser/Teaser
100
- variant="Serif"
101
- teaserSize="lg"
102
- topline="So plant Glasner bei der Eintracht"
103
- headline="Silvas Erbe wird auf mehrere Schultern verteilt"
104
- teaserText="Nach dem Abgang von André Silva und dem Zugang von Santos Borré hat Trainer Oliver Glasner Einblicke in seine Offensivideen für Eintracht Frankfurt gegeben. Er plant mit den Flanken von Filip Kostic und spricht ein Sonderlob für einen Youngster aus."
105
- author="Stephan Reich"
106
- }}
39
+ <div class="grid grid-cols-12 py-6 col-full gap-x-6 gap-y-6 sm:px-8 sm:col-main">
40
+ {{> components/Teaser/Teaser-standard teasersize="md"}}
41
+ {{> components/Teaser/Teaser-standard teasersize="md"}}
42
+ {{> components/Teaser/Teaser-standard teasersize="md"}}
107
43
  </div>
108
- <div class="md:mt-8">
109
- {{> components/Teaser/Teaser
110
- variant="Serif"
111
- teaserSize="lg"
112
- topline="So plant Glasner bei der Eintracht"
113
- headline="Silvas Erbe wird auf mehrere Schultern verteilt"
114
- teaserText="Nach dem Abgang von André Silva und dem Zugang von Santos Borré hat Trainer Oliver Glasner Einblicke in seine Offensivideen für Eintracht Frankfurt gegeben. Er plant mit den Flanken von Filip Kostic und spricht ein Sonderlob für einen Youngster aus."
115
- author="Stephan Reich"
116
- }}
117
-
118
- {{> components/Teaser/Teaser
119
- variant="Serif"
120
- teaserSize="lg"
121
- topline="So plant Glasner bei der Eintracht"
122
- headline="Silvas Erbe wird auf mehrere Schultern verteilt"
123
- teaserText="Nach dem Abgang von André Silva und dem Zugang von Santos Borré hat Trainer Oliver Glasner Einblicke in seine Offensivideen für Eintracht Frankfurt gegeben. Er plant mit den Flanken von Filip Kostic und spricht ein Sonderlob für einen Youngster aus."
124
- author="Stephan Reich"
125
- }}
44
+ <div class="grid grid-cols-12 py-6 col-full gap-x-6 gap-y-6 sm:px-8 sm:col-main">
45
+ {{> components/Teaser/Teaser-standard teasersize="lg"}}
46
+ {{> components/Teaser/Teaser-standard teasersize="lg"}}
47
+ </div>
48
+ <div class="grid grid-cols-12 py-6 col-full gap-x-6 gap-y-6 sm:px-8 sm:col-main">
49
+ {{> components/Teaser/Teaser-standard teasersize="sm"}}
50
+ {{> components/Teaser/Teaser-standard teasersize="sm"}}
51
+ {{> components/Teaser/Teaser-standard teasersize="sm"}}
52
+ {{> components/Teaser/Teaser-standard teasersize="sm"}}
126
53
  </div>
127
- <div class="md:mt-8">
128
- {{> components/Teaser/Teaser
129
- variant="Serif"
130
- teaserSize="sm"
131
- topline="So plant Glasner bei der Eintracht"
132
- headline="Silvas Erbe wird auf mehrere Schultern verteilt"
133
- teaserText="Nach dem Abgang von André Silva und dem Zugang von Santos Borré hat Trainer Oliver Glasner Einblicke in seine Offensivideen für Eintracht Frankfurt gegeben. Er plant mit den Flanken von Filip Kostic und spricht ein Sonderlob für einen Youngster aus."
134
- author="Stephan Reich"
135
- }}
136
-
137
- {{> components/Teaser/Teaser
138
- variant="Serif"
139
- teaserSize="sm"
140
- topline="So plant Glasner bei der Eintracht"
141
- headline="Silvas Erbe wird auf mehrere Schultern verteilt"
142
- teaserText="Nach dem Abgang von André Silva und dem Zugang von Santos Borré hat Trainer Oliver Glasner Einblicke in seine Offensivideen für Eintracht Frankfurt gegeben. Er plant mit den Flanken von Filip Kostic und spricht ein Sonderlob für einen Youngster aus."
143
- author="Stephan Reich"
144
- }}
145
-
146
- {{> components/Teaser/Teaser
147
- variant="Serif"
148
- teaserSize="sm"
149
- topline="So plant Glasner bei der Eintracht"
150
- headline="Silvas Erbe wird auf mehrere Schultern verteilt"
151
- teaserText="Nach dem Abgang von André Silva und dem Zugang von Santos Borré hat Trainer Oliver Glasner Einblicke in seine Offensivideen für Eintracht Frankfurt gegeben. Er plant mit den Flanken von Filip Kostic und spricht ein Sonderlob für einen Youngster aus."
152
- author="Stephan Reich"
153
- }}
154
- {{> components/Teaser/Teaser
155
- variant="Serif"
156
- teaserSize="sm"
157
- topline="So plant Glasner bei der Eintracht"
158
- headline="Silvas Erbe wird auf mehrere Schultern verteilt"
159
- teaserText="Nach dem Abgang von André Silva und dem Zugang von Santos Borré hat Trainer Oliver Glasner Einblicke in seine Offensivideen für Eintracht Frankfurt gegeben. Er plant mit den Flanken von Filip Kostic und spricht ein Sonderlob für einen Youngster aus."
160
- author="Stephan Reich"
161
- }}
54
+ <div class="grid grid-cols-12 py-6 col-full gap-x-6 gap-y-6 sm:px-8 sm:col-main">
55
+ {{> components/Teaser/Teaser-standard teasersize="lg"}}
56
+ {{> components/Teaser/Teaser-standard teasersize="lg"}}
162
57
  </div>
163
58
 
164
59
  </div>
package/dist/views/components/Teaser/Teaser-standard.hbs CHANGED
@@ -1,15 +1,15 @@
1
1
  <article class="col-span-12 flex gap-y-4 gap-x-5 {{inline-switch teasersize '["sm","md","lg"]' '["px-5 md:px-0 md:col-span-3 flex-row md:flex-col","md:col-span-4 flex-col","md:col-span-6 flex-col","flex-col"]'}} ">
2
- <figure class="{{inline-switch teasersize '["sm"]' '["basis-1/3 md:flex-full"]'}} ">
2
+ <figure class="{{inline-switch teasersize '["sm"]' '["basis-2/5 md:flex-full ar-1-1 md:ar-16-9", "ar-16-9"]'}} ">
3
3
  {{#>components/base/link _cssClasses="" _isAriaHidden=true _doTracking=(if this.doTracking 'true') _clickLabelPrefix1=this.realTeasersize _clickLabelPrefix2="mediaLink" }}
4
4
  {{~> components/base/image/responsiveImage this.content.teaserImage _type=this.content.teasertype _variant=this.content.imageVariant _noDelay=../_noDelay _addClassImg="ar__content mediaPlayerLoader__mediaplayerArea" ~}}
5
5
  {{/components/base/link}}
6
6
  </figure>
7
- <div class="{{inline-switch teasersize '["sm"]' '["basis-2/3 md:flex-full"]'}} ">
7
+ <div class="{{inline-switch teasersize '["sm"]' '["basis-3/5 md:flex-full"]'}} ">
8
8
  <header class="md:px-0 {{inline-switch teasersize '["sm"]' '["","px-5"]'}}">
9
9
  {{> components/Teaser/Teaser-Heading headlineTag="h2" size=teasersize font=(inline-switch serifHeading '[true, false]' '["font-headingSerif","font-heading font-bold"]') headline=title topline=topline}}
10
10
  </header>
11
11
  <section class="md:px-0 {{inline-switch teasersize '["sm"]' '["","px-5"]'}}">
12
- <div class="hidden mt-2 text-base font-copy md:block">{{shorttext}}</div>
12
+ <div class="{{inline-switch teasersize '["xxl"]' '["","hidden md:block"]'}} mt-2 text-base font-copy">{{shorttext}}</div>
13
13
  {{#if profiles}}
14
14
  {{> components/Teaser/Byline text=profiles}}
15
15
  {{/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": "0.42.3",
9
+ "version": "0.42.6",
10
10
  "scripts": {
11
11
  "test": "echo \"Error: no test specified\" && exit 1",
12
12
  "storybook": "start-storybook -p 6006 public",
package/src/assets/tailwind.css CHANGED
@@ -394,7 +394,7 @@
394
394
  .grid-page {
395
395
  grid-template-columns:
396
396
  [full-start] minmax(1rem, 1fr)
397
- [main-start] minmax(0, 64rem) [main-end]
397
+ [main-start] minmax(0, 63rem) [main-end]
398
398
  minmax(1rem, 1fr) [full-end];
399
399
  }
400
400
 
@@ -411,6 +411,50 @@
411
411
  grid-column: main;
412
412
  }
413
413
  }
414
+ /*! ****************************/
415
+ /*! Aspect Ratio with fallback */
416
+ /*! ****************************/
417
+ .ar-16-9 {
418
+ aspect-ratio: 16 / 9
419
+ }
420
+
421
+ @supports not (aspect-ratio: 16 / 9) {
422
+ .ar-16-9::before {
423
+ float: left;
424
+ padding-top: 56.25%;
425
+ content: '';
426
+ }
427
+
428
+ .ar-16-19::after {
429
+ display: block;
430
+ content: '';
431
+ clear: both;
432
+ }
433
+ }
434
+
435
+ .ar-1-1 {
436
+ aspect-ratio: 1 / 1
437
+ }
438
+
439
+ @supports not (aspect-ratio: 1 / 1) {
440
+ .ar-1-1::before {
441
+ float: left;
442
+ padding-top: 100%;
443
+ content: '';
444
+ }
445
+
446
+ .ar-1-1::after {
447
+ display: block;
448
+ content: '';
449
+ clear: both;
450
+ }
451
+ }
452
+
453
+
454
+ /*! ********************************/
455
+ /*! Aspect Ratio with fallback end */
456
+ /*! ********************************/
457
+
414
458
  .headline--barrier {
415
459
  display: flex;
416
460
  width: 100%;
package/src/stories/views/components/Page/Page.hbs CHANGED
@@ -28,137 +28,32 @@
28
28
  id="content"
29
29
  class="flex items-center justify-center"
30
30
  >
31
- <div class="container px-3.5 md:px-5 lg:px-10">
32
- <div class="md:mt-8">
33
- {{> components/Teaser/Teaser
34
- variant="Serif"
35
- teaserSize="xxl"
36
- topline="So plant Glasner bei der Eintracht"
37
- headline="Silvas Erbe wird auf mehrere Schultern verteilt"
38
- teaserText="Nach dem Abgang von André Silva und dem Zugang von Santos Borré hat Trainer Oliver Glasner Einblicke in seine Offensivideen für Eintracht Frankfurt gegeben. Er plant mit den Flanken von Filip Kostic und spricht ein Sonderlob für einen Youngster aus."
39
- author="Stephan Reich"
40
- }}
31
+ <div class="grid grid-page">
32
+ <div class="grid grid-cols-12 py-6 col-full gap-x-6 gap-y-6 sm:px-8 sm:col-main">
33
+ {{> components/Teaser/Teaser-standard }}
41
34
  </div>
42
- <div class="md:mt-8">
43
- {{> components/Teaser/Teaser
44
- variant="Serif"
45
- teaserSize="lg"
46
- topline="So plant Glasner bei der Eintracht"
47
- headline="Silvas Erbe wird auf mehrere Schultern verteilt"
48
- teaserText="Nach dem Abgang von André Silva und dem Zugang von Santos Borré hat Trainer Oliver Glasner Einblicke in seine Offensivideen für Eintracht Frankfurt gegeben. Er plant mit den Flanken von Filip Kostic und spricht ein Sonderlob für einen Youngster aus."
49
- author="Stephan Reich"
50
- }}
51
-
52
- {{> components/Teaser/Teaser
53
- variant="Serif"
54
- teaserSize="lg"
55
- topline="So plant Glasner bei der Eintracht"
56
- headline="Silvas Erbe wird auf mehrere Schultern verteilt"
57
- teaserText="Nach dem Abgang von André Silva und dem Zugang von Santos Borré hat Trainer Oliver Glasner Einblicke in seine Offensivideen für Eintracht Frankfurt gegeben. Er plant mit den Flanken von Filip Kostic und spricht ein Sonderlob für einen Youngster aus."
58
- author="Stephan Reich"
59
- }}
60
- </div>
61
- <div class="md:mt-8">
62
- {{> components/Teaser/Teaser
63
- variant="Serif"
64
- teaserSize="md"
65
- topline="So plant Glasner bei der Eintracht"
66
- headline="Silvas Erbe wird auf mehrere Schultern verteilt"
67
- teaserText="Nach dem Abgang von André Silva und dem Zugang von Santos Borré hat Trainer Oliver Glasner Einblicke in seine Offensivideen für Eintracht Frankfurt gegeben. Er plant mit den Flanken von Filip Kostic und spricht ein Sonderlob für einen Youngster aus."
68
- author="Stephan Reich"
69
- }}
70
-
71
- {{> components/Teaser/Teaser
72
- variant="Serif"
73
- teaserSize="md"
74
- topline="So plant Glasner bei der Eintracht"
75
- headline="Silvas Erbe wird auf mehrere Schultern verteilt"
76
- teaserText="Nach dem Abgang von André Silva und dem Zugang von Santos Borré hat Trainer Oliver Glasner Einblicke in seine Offensivideen für Eintracht Frankfurt gegeben. Er plant mit den Flanken von Filip Kostic und spricht ein Sonderlob für einen Youngster aus."
77
- author="Stephan Reich"
78
- }}
79
-
80
- {{> components/Teaser/Teaser
81
- variant="Serif"
82
- teaserSize="md"
83
- topline="So plant Glasner bei der Eintracht"
84
- headline="Silvas Erbe wird auf mehrere Schultern verteilt"
85
- teaserText="Nach dem Abgang von André Silva und dem Zugang von Santos Borré hat Trainer Oliver Glasner Einblicke in seine Offensivideen für Eintracht Frankfurt gegeben. Er plant mit den Flanken von Filip Kostic und spricht ein Sonderlob für einen Youngster aus."
86
- author="Stephan Reich"
87
- }}
35
+ <div class="grid grid-cols-12 py-6 col-full gap-x-6 gap-y-6 sm:px-8 sm:col-main">
36
+ {{> components/Teaser/Teaser-standard teasersize="lg"}}
37
+ {{> components/Teaser/Teaser-standard teasersize="lg"}}
88
38
  </div>
89
- <div class="md:mt-8">
90
- {{> components/Teaser/Teaser
91
- variant="Serif"
92
- teaserSize="lg"
93
- topline="So plant Glasner bei der Eintracht"
94
- headline="Silvas Erbe wird auf mehrere Schultern verteilt"
95
- teaserText="Nach dem Abgang von André Silva und dem Zugang von Santos Borré hat Trainer Oliver Glasner Einblicke in seine Offensivideen für Eintracht Frankfurt gegeben. Er plant mit den Flanken von Filip Kostic und spricht ein Sonderlob für einen Youngster aus."
96
- author="Stephan Reich"
97
- }}
98
-
99
- {{> components/Teaser/Teaser
100
- variant="Serif"
101
- teaserSize="lg"
102
- topline="So plant Glasner bei der Eintracht"
103
- headline="Silvas Erbe wird auf mehrere Schultern verteilt"
104
- teaserText="Nach dem Abgang von André Silva und dem Zugang von Santos Borré hat Trainer Oliver Glasner Einblicke in seine Offensivideen für Eintracht Frankfurt gegeben. Er plant mit den Flanken von Filip Kostic und spricht ein Sonderlob für einen Youngster aus."
105
- author="Stephan Reich"
106
- }}
39
+ <div class="grid grid-cols-12 py-6 col-full gap-x-6 gap-y-6 sm:px-8 sm:col-main">
40
+ {{> components/Teaser/Teaser-standard teasersize="md"}}
41
+ {{> components/Teaser/Teaser-standard teasersize="md"}}
42
+ {{> components/Teaser/Teaser-standard teasersize="md"}}
107
43
  </div>
108
- <div class="md:mt-8">
109
- {{> components/Teaser/Teaser
110
- variant="Serif"
111
- teaserSize="lg"
112
- topline="So plant Glasner bei der Eintracht"
113
- headline="Silvas Erbe wird auf mehrere Schultern verteilt"
114
- teaserText="Nach dem Abgang von André Silva und dem Zugang von Santos Borré hat Trainer Oliver Glasner Einblicke in seine Offensivideen für Eintracht Frankfurt gegeben. Er plant mit den Flanken von Filip Kostic und spricht ein Sonderlob für einen Youngster aus."
115
- author="Stephan Reich"
116
- }}
117
-
118
- {{> components/Teaser/Teaser
119
- variant="Serif"
120
- teaserSize="lg"
121
- topline="So plant Glasner bei der Eintracht"
122
- headline="Silvas Erbe wird auf mehrere Schultern verteilt"
123
- teaserText="Nach dem Abgang von André Silva und dem Zugang von Santos Borré hat Trainer Oliver Glasner Einblicke in seine Offensivideen für Eintracht Frankfurt gegeben. Er plant mit den Flanken von Filip Kostic und spricht ein Sonderlob für einen Youngster aus."
124
- author="Stephan Reich"
125
- }}
44
+ <div class="grid grid-cols-12 py-6 col-full gap-x-6 gap-y-6 sm:px-8 sm:col-main">
45
+ {{> components/Teaser/Teaser-standard teasersize="lg"}}
46
+ {{> components/Teaser/Teaser-standard teasersize="lg"}}
47
+ </div>
48
+ <div class="grid grid-cols-12 py-6 col-full gap-x-6 gap-y-6 sm:px-8 sm:col-main">
49
+ {{> components/Teaser/Teaser-standard teasersize="sm"}}
50
+ {{> components/Teaser/Teaser-standard teasersize="sm"}}
51
+ {{> components/Teaser/Teaser-standard teasersize="sm"}}
52
+ {{> components/Teaser/Teaser-standard teasersize="sm"}}
126
53
  </div>
127
- <div class="md:mt-8">
128
- {{> components/Teaser/Teaser
129
- variant="Serif"
130
- teaserSize="sm"
131
- topline="So plant Glasner bei der Eintracht"
132
- headline="Silvas Erbe wird auf mehrere Schultern verteilt"
133
- teaserText="Nach dem Abgang von André Silva und dem Zugang von Santos Borré hat Trainer Oliver Glasner Einblicke in seine Offensivideen für Eintracht Frankfurt gegeben. Er plant mit den Flanken von Filip Kostic und spricht ein Sonderlob für einen Youngster aus."
134
- author="Stephan Reich"
135
- }}
136
-
137
- {{> components/Teaser/Teaser
138
- variant="Serif"
139
- teaserSize="sm"
140
- topline="So plant Glasner bei der Eintracht"
141
- headline="Silvas Erbe wird auf mehrere Schultern verteilt"
142
- teaserText="Nach dem Abgang von André Silva und dem Zugang von Santos Borré hat Trainer Oliver Glasner Einblicke in seine Offensivideen für Eintracht Frankfurt gegeben. Er plant mit den Flanken von Filip Kostic und spricht ein Sonderlob für einen Youngster aus."
143
- author="Stephan Reich"
144
- }}
145
-
146
- {{> components/Teaser/Teaser
147
- variant="Serif"
148
- teaserSize="sm"
149
- topline="So plant Glasner bei der Eintracht"
150
- headline="Silvas Erbe wird auf mehrere Schultern verteilt"
151
- teaserText="Nach dem Abgang von André Silva und dem Zugang von Santos Borré hat Trainer Oliver Glasner Einblicke in seine Offensivideen für Eintracht Frankfurt gegeben. Er plant mit den Flanken von Filip Kostic und spricht ein Sonderlob für einen Youngster aus."
152
- author="Stephan Reich"
153
- }}
154
- {{> components/Teaser/Teaser
155
- variant="Serif"
156
- teaserSize="sm"
157
- topline="So plant Glasner bei der Eintracht"
158
- headline="Silvas Erbe wird auf mehrere Schultern verteilt"
159
- teaserText="Nach dem Abgang von André Silva und dem Zugang von Santos Borré hat Trainer Oliver Glasner Einblicke in seine Offensivideen für Eintracht Frankfurt gegeben. Er plant mit den Flanken von Filip Kostic und spricht ein Sonderlob für einen Youngster aus."
160
- author="Stephan Reich"
161
- }}
54
+ <div class="grid grid-cols-12 py-6 col-full gap-x-6 gap-y-6 sm:px-8 sm:col-main">
55
+ {{> components/Teaser/Teaser-standard teasersize="lg"}}
56
+ {{> components/Teaser/Teaser-standard teasersize="lg"}}
162
57
  </div>
163
58
 
164
59
  </div>
package/src/stories/views/components/Page/Page.stories.mdx CHANGED
@@ -1,15 +1,24 @@
1
1
  import { ArgsTable, Meta, Story, Canvas, Preview } from '@storybook/addon-docs'
2
-
2
+ import 'core-js/actual/structured-clone';
3
3
  import page from './Page.hbs'
4
4
  import NavigationData from '../Header/navigation.json'
5
5
  import NavigationData2 from '../Header/navigation2.json'
6
6
  import NavigationData3 from '../Header/navigation3.json'
7
7
  import NavigationData4 from '../Header/navigation4.json'
8
+ import hero_teaser from '../Teaser/data/teaser_standard_xxl_serif.json'
9
+ const NavigationDataWithTeaser = structuredClone(Object.assign({}, NavigationData, hero_teaser))
10
+ const NavigationDataWithTeaser2 = structuredClone(Object.assign({}, NavigationData2, hero_teaser))
11
+ const NavigationDataWithTeaser3 = structuredClone(Object.assign({}, NavigationData3, hero_teaser))
12
+ const NavigationDataWithTeaser4 = structuredClone(Object.assign({}, NavigationData4, hero_teaser))
8
13
 
9
14
  <Meta
10
15
  title="Komponenten/Page/Page"
11
16
  argTypes={{}}
12
- parameters={{ chromatic: { viewports: [360, 768, 1024] } }}
17
+ parameters={{
18
+ chromatic: {
19
+ viewports: [360, 768, 1024]
20
+ },
21
+ layout: 'fullscreen' }}
13
22
  />
14
23
 
15
24
  export const Template = (args, { globals: { customConditionalToolbar } }) => {
@@ -23,16 +32,16 @@ export const Template = (args, { globals: { customConditionalToolbar } }) => {
23
32
  # Page
24
33
 
25
34
  <Preview withToolbar>
26
- <Story name="Default" args={NavigationData}>
35
+ <Story name="Default" args={NavigationDataWithTeaser}>
27
36
  {Template.bind({})}
28
37
  </Story>
29
- <Story name="With Unwetter" args={NavigationData2}>
38
+ <Story name="With Unwetter" args={NavigationDataWithTeaser2}>
30
39
  {Template.bind({})}
31
40
  </Story>
32
- <Story name="With subnav open" args={NavigationData3}>
41
+ <Story name="With subnav open" args={NavigationDataWithTeaser3}>
33
42
  {Template.bind({})}
34
43
  </Story>
35
- <Story name="With subnav open and Service Nav Item active" args={NavigationData4}>
44
+ <Story name="With subnav open and Service Nav Item active" args={NavigationDataWithTeaser4}>
36
45
  {Template.bind({})}
37
46
  </Story>
38
47
  </Preview>
package/src/stories/views/components/Teaser/Teaser-standard.hbs CHANGED
@@ -1,15 +1,15 @@
1
1
  <article class="col-span-12 flex gap-y-4 gap-x-5 {{inline-switch teasersize '["sm","md","lg"]' '["px-5 md:px-0 md:col-span-3 flex-row md:flex-col","md:col-span-4 flex-col","md:col-span-6 flex-col","flex-col"]'}} ">
2
- <figure class="{{inline-switch teasersize '["sm"]' '["basis-1/3 md:flex-full"]'}} ">
2
+ <figure class="{{inline-switch teasersize '["sm"]' '["basis-2/5 md:flex-full ar-1-1 md:ar-16-9", "ar-16-9"]'}} ">
3
3
  {{#>components/base/link _cssClasses="" _isAriaHidden=true _doTracking=(if this.doTracking 'true') _clickLabelPrefix1=this.realTeasersize _clickLabelPrefix2="mediaLink" }}
4
4
  {{~> components/base/image/responsiveImage this.content.teaserImage _type=this.content.teasertype _variant=this.content.imageVariant _noDelay=../_noDelay _addClassImg="ar__content mediaPlayerLoader__mediaplayerArea" ~}}
5
5
  {{/components/base/link}}
6
6
  </figure>
7
- <div class="{{inline-switch teasersize '["sm"]' '["basis-2/3 md:flex-full"]'}} ">
7
+ <div class="{{inline-switch teasersize '["sm"]' '["basis-3/5 md:flex-full"]'}} ">
8
8
  <header class="md:px-0 {{inline-switch teasersize '["sm"]' '["","px-5"]'}}">
9
9
  {{> components/Teaser/Teaser-Heading headlineTag="h2" size=teasersize font=(inline-switch serifHeading '[true, false]' '["font-headingSerif","font-heading font-bold"]') headline=title topline=topline}}
10
10
  </header>
11
11
  <section class="md:px-0 {{inline-switch teasersize '["sm"]' '["","px-5"]'}}">
12
- <div class="hidden mt-2 text-base font-copy md:block">{{shorttext}}</div>
12
+ <div class="{{inline-switch teasersize '["xxl"]' '["","hidden md:block"]'}} mt-2 text-base font-copy">{{shorttext}}</div>
13
13
  {{#if profiles}}
14
14
  {{> components/Teaser/Byline text=profiles}}
15
15
  {{/if}}
package/src/stories/views/components/Teaser/data/teaser_standard_sm_serif.json CHANGED
@@ -116,12 +116,12 @@
116
116
  {
117
117
  "media": "all and (min-width: 43.750em) and (max-width: 63.938em)",
118
118
  "sizes": "100vw",
119
- "srcset": "https://picsum.photos/id/188/320/140 320w, https://picsum.photos/id/188/480/210 480w, https://picsum.photos/id/188/992/434 992w, https://picsum.photos/id/188/1920/840 1920w"
119
+ "srcset": "https://picsum.photos/id/188/320/180 320w, https://picsum.photos/id/188/480/270 480w, https://picsum.photos/id/188/640/360 640w, https://picsum.photos/id/188/960/540 960w"
120
120
  },
121
121
  {
122
122
  "media": "all and (min-width: 64em)",
123
123
  "sizes": "960px",
124
- "srcset": "https://picsum.photos/id/188/320/140 320w, https://picsum.photos/id/188/480/210 480w, https://picsum.photos/id/188/992/434 992w, https://picsum.photos/id/188/1920/840 1920w"
124
+ "srcset": "https://picsum.photos/id/188/320/180 320w, https://picsum.photos/id/188/480/270 480w, https://picsum.photos/id/188/640/360 640w, https://picsum.photos/id/188/960/540 960w"
125
125
  }
126
126
  ]
127
127
  }
package/tailwind.config.js CHANGED
@@ -37,7 +37,8 @@ module.exports = {
37
37
  },
38
38
 
39
39
  extend: {
40
- fontSize: {
40
+ fontSize: {
41
+ 'lg':['1.125rem', '1.5rem'],
41
42
  '2xl':['1.375rem', '2rem'],
42
43
  '4xl':['2.125rem', '2.25rem'],
43
44
  },
package/dist/views/components/Teaser/Teaser.hbs DELETED
@@ -1,32 +0,0 @@
1
-
2
- <div class="{{inline-switch teaserSize '["sm","md","lg","xl","xxl"]' '["col-span-12 md:col-span-3","col-span-12 md:col-span-4","col-span-12 md:col-span-6","col-span-12","col-span-12"]'}} md:mx-2 first:ml-0 last:mr-0 mb-4 md:mb-0">
3
- <img sizes="(min-width: 43.75em) and (max-width: 63.063em) calc(50vw - 40px),(min-width: 63.125em) 461px, calc(100vw-20px)"
4
- loading="lazy"
5
- data-srcset="https://www.hessenschau.de/panorama/corona-coronavirus-sujet-102~_t-1583235764383_v-16to9__small.jpg 320w,
6
- https://www.hessenschau.de/panorama/corona-coronavirus-sujet-102~_t-1583235764383_v-16to9__medium.jpg 480w,
7
- https://www.hessenschau.de/panorama/corona-coronavirus-sujet-102~_t-1583235764383_v-16to9__medium__extended.jpg 640w,
8
- https://www.hessenschau.de/panorama/corona-coronavirus-sujet-102~_t-1583235764383_v-16to9.jpg 960w,
9
- https://www.hessenschau.de/panorama/corona-coronavirus-sujet-102~_t-1583235764383_v-16to9__retina.jpg 1920w"
10
- src="data:image/gif;base64,R0lGODlhAQABAIAAAP///wAAACH5BAEAAAAALAAAAAABAAEAAAICRAEAOw=="
11
- alt="Corona Coronavirus Sujet"
12
- class="w-full"
13
- srcset="https://www.hessenschau.de/panorama/corona-coronavirus-sujet-102~_t-1583235764383_v-16to9__small.jpg 320w,
14
- https://www.hessenschau.de/panorama/corona-coronavirus-sujet-102~_t-1583235764383_v-16to9__medium.jpg 480w,
15
- https://www.hessenschau.de/panorama/corona-coronavirus-sujet-102~_t-1583235764383_v-16to9__medium__extended.jpg 640w,
16
- https://www.hessenschau.de/panorama/corona-coronavirus-sujet-102~_t-1583235764383_v-16to9.jpg 960w,
17
- https://www.hessenschau.de/panorama/corona-coronavirus-sujet-102~_t-1583235764383_v-16to9__retina.jpg 1920w">
18
-
19
- {{#if labelType}}
20
- <div class="mt-4">
21
- {{> components/Label type=labelType text=labelText}}
22
- </div>
23
- {{> components/Teaser/Teaser-Heading headlineTag="h2" size=teaserSize font=(inline-switch variant '["Serif", "Sans Serf"]' '["headingSerif","heading"]') headline=headline topline=""}}
24
- {{else}}
25
- {{> components/Teaser/Teaser-Heading headlineTag="h2" size=teaserSize font=(inline-switch variant '["Serif", "Sans Serif"]' '["headingSerif","heading"]') headline=headline topline=topline}}
26
- {{/if}}
27
-
28
- <div class="mt-2 text-base font-copy">{{teaserText}} <a class="text-indigo-500" href="#">[<span class="no-underline hover:underline">mehr</span>]</a></div>
29
- {{#if author}}
30
- <div class="mt-1 text-sm text-gray-500 font-headingSerif">Von {{author}}</div>
31
- {{/if}}
32
- </div>
package/src/stories/views/components/Teaser/Teaser.hbs DELETED
@@ -1,32 +0,0 @@
1
-
2
- <div class="{{inline-switch teaserSize '["sm","md","lg","xl","xxl"]' '["col-span-12 md:col-span-3","col-span-12 md:col-span-4","col-span-12 md:col-span-6","col-span-12","col-span-12"]'}} md:mx-2 first:ml-0 last:mr-0 mb-4 md:mb-0">
3
- <img sizes="(min-width: 43.75em) and (max-width: 63.063em) calc(50vw - 40px),(min-width: 63.125em) 461px, calc(100vw-20px)"
4
- loading="lazy"
5
- data-srcset="https://www.hessenschau.de/panorama/corona-coronavirus-sujet-102~_t-1583235764383_v-16to9__small.jpg 320w,
6
- https://www.hessenschau.de/panorama/corona-coronavirus-sujet-102~_t-1583235764383_v-16to9__medium.jpg 480w,
7
- https://www.hessenschau.de/panorama/corona-coronavirus-sujet-102~_t-1583235764383_v-16to9__medium__extended.jpg 640w,
8
- https://www.hessenschau.de/panorama/corona-coronavirus-sujet-102~_t-1583235764383_v-16to9.jpg 960w,
9
- https://www.hessenschau.de/panorama/corona-coronavirus-sujet-102~_t-1583235764383_v-16to9__retina.jpg 1920w"
10
- src="data:image/gif;base64,R0lGODlhAQABAIAAAP///wAAACH5BAEAAAAALAAAAAABAAEAAAICRAEAOw=="
11
- alt="Corona Coronavirus Sujet"
12
- class="w-full"
13
- srcset="https://www.hessenschau.de/panorama/corona-coronavirus-sujet-102~_t-1583235764383_v-16to9__small.jpg 320w,
14
- https://www.hessenschau.de/panorama/corona-coronavirus-sujet-102~_t-1583235764383_v-16to9__medium.jpg 480w,
15
- https://www.hessenschau.de/panorama/corona-coronavirus-sujet-102~_t-1583235764383_v-16to9__medium__extended.jpg 640w,
16
- https://www.hessenschau.de/panorama/corona-coronavirus-sujet-102~_t-1583235764383_v-16to9.jpg 960w,
17
- https://www.hessenschau.de/panorama/corona-coronavirus-sujet-102~_t-1583235764383_v-16to9__retina.jpg 1920w">
18
-
19
- {{#if labelType}}
20
- <div class="mt-4">
21
- {{> components/Label type=labelType text=labelText}}
22
- </div>
23
- {{> components/Teaser/Teaser-Heading headlineTag="h2" size=teaserSize font=(inline-switch variant '["Serif", "Sans Serf"]' '["headingSerif","heading"]') headline=headline topline=""}}
24
- {{else}}
25
- {{> components/Teaser/Teaser-Heading headlineTag="h2" size=teaserSize font=(inline-switch variant '["Serif", "Sans Serif"]' '["headingSerif","heading"]') headline=headline topline=topline}}
26
- {{/if}}
27
-
28
- <div class="mt-2 text-base font-copy">{{teaserText}} <a class="text-indigo-500" href="#">[<span class="no-underline hover:underline">mehr</span>]</a></div>
29
- {{#if author}}
30
- <div class="mt-1 text-sm text-gray-500 font-headingSerif">Von {{author}}</div>
31
- {{/if}}
32
- </div>
package/src/stories/views/components/Teaser/Teaser.stories.mdx.old DELETED
@@ -1,156 +0,0 @@
1
- import { ArgsTable, Meta, Story, Canvas, Preview } from '@storybook/addon-docs'
2
-
3
- import teaser from './Teaser-default.hbs'
4
- import JsonData from './teaser_article.json'
5
-
6
- <Meta
7
- title="Komponenten/Teaser/Standard"
8
- argTypes={{
9
- variant: {
10
- options: ['Serif', 'Sans Serif'],
11
- control: { type: 'inline-radio' },
12
- },
13
- teaserSize: {
14
- control: {
15
- type: 'select',
16
- options: ['xxl','xl', 'lg', 'md', 'sm'],
17
- },
18
- description: 'Teaser Größe',
19
- table: {
20
- defaultValue: {
21
- summary: 'xl',
22
- },
23
- },
24
- },
25
- labelType: {
26
- options: ['', 'ticker', 'event', 'pm'],
27
- control: {
28
- type: 'select',
29
- labels: { ticker: 'Ticker', event: 'Event', pm: 'Pressemitteilung' },
30
- },
31
- description: 'Label',
32
- },
33
- labelText: {
34
- control: 'text',
35
- description: 'Label Text',
36
- },
37
- topline: {
38
- control: 'text',
39
- description: 'Topline Text',
40
- },
41
- headline: {
42
- control: 'text',
43
- description: 'Headline Text',
44
- },
45
- teaserText: {
46
- control: 'text',
47
- description: 'Teaser Text',
48
- },
49
- author: {
50
- control: 'text',
51
- description: 'Autor',
52
- },
53
- }}
54
- decorators={[
55
- (Story) => {
56
- return `<div class="grid grid-page"><div class="grid grid-cols-12 py-6 col-full gap-x-6 gap-y-6 sm:px-8 sm:col-main">
57
- ${Story()}
58
- </div></div>`
59
- },
60
- ]}
61
- />
62
-
63
- export const Template = ({ variant, ...args }) => {
64
- // You can either use a function to create DOM elements or use a plain html string!
65
- // return `<div>${label}</div>`;
66
- return teaser({ variant, ...args })
67
- }
68
-
69
- # Button
70
-
71
- Ein toller Einleitungstext für unsere `Teaser` Komponente:
72
-
73
- <Preview withToolbar>
74
- <Story
75
- name="Standard Hero"
76
- args={{
77
- variant: 'Serif',
78
- teaserSize: 'xxl',
79
- topline: 'So plant Glasner bei der Eintracht',
80
- headline: 'Silvas Erbe wird auf mehrere Schultern verteilt',
81
- teaserText:
82
- 'Nach dem Abgang von André Silva und dem Zugang von Santos Borré hat Trainer Oliver Glasner Einblicke in seine Offensivideen für Eintracht Frankfurt gegeben. Er plant mit den Flanken von Filip Kostic und spricht ein Sonderlob für einen Youngster aus.',
83
- author: 'Stephan Reich',
84
- }}
85
- >
86
- {Template.bind({})}
87
- </Story>
88
- </Preview>
89
-
90
- <Preview withToolbar>
91
- <Story
92
- name="Standard xl"
93
- args={{
94
- variant: 'Serif',
95
- teaserSize: 'xl',
96
- topline: 'So plant Glasner bei der Eintracht',
97
- headline: 'Silvas Erbe wird auf mehrere Schultern verteilt',
98
- teaserText:
99
- 'Nach dem Abgang von André Silva und dem Zugang von Santos Borré hat Trainer Oliver Glasner Einblicke in seine Offensivideen für Eintracht Frankfurt gegeben. Er plant mit den Flanken von Filip Kostic und spricht ein Sonderlob für einen Youngster aus.',
100
- author: 'Stephan Reich',
101
- }}
102
- >
103
- {Template.bind({})}
104
- </Story>
105
- </Preview>
106
-
107
- <Preview withToolbar>
108
- <Story
109
- name="Standard lg"
110
- args={{
111
- variant: 'Serif',
112
- teaserSize: 'lg',
113
- topline: 'So plant Glasner bei der Eintracht',
114
- headline: 'Silvas Erbe wird auf mehrere Schultern verteilt',
115
- teaserText:
116
- 'Nach dem Abgang von André Silva und dem Zugang von Santos Borré hat Trainer Oliver Glasner Einblicke in seine Offensivideen für Eintracht Frankfurt gegeben. Er plant mit den Flanken von Filip Kostic und spricht ein Sonderlob für einen Youngster aus.',
117
- author: 'Stephan Reich',
118
- }}
119
- >
120
- {Template.bind({})}
121
- </Story>
122
- </Preview>
123
-
124
- <Preview withToolbar>
125
- <Story
126
- name="Standard md"
127
- args={{
128
- variant: 'Serif',
129
- teaserSize: 'md',
130
- topline: 'So plant Glasner bei der Eintracht',
131
- headline: 'Silvas Erbe wird auf mehrere Schultern verteilt',
132
- teaserText:
133
- 'Nach dem Abgang von André Silva und dem Zugang von Santos Borré hat Trainer Oliver Glasner Einblicke in seine Offensivideen für Eintracht Frankfurt gegeben. Er plant mit den Flanken von Filip Kostic und spricht ein Sonderlob für einen Youngster aus.',
134
- author: 'Stephan Reich',
135
- }}
136
- >
137
- {Template.bind({})}
138
- </Story>
139
- </Preview>
140
-
141
- <Preview withToolbar>
142
- <Story
143
- name="Standard sm"
144
- args={{
145
- variant: 'Serif',
146
- teaserSize: 'sm',
147
- topline: 'So plant Glasner bei der Eintracht',
148
- headline: 'Silvas Erbe wird auf mehrere Schultern verteilt',
149
- teaserText:
150
- 'Nach dem Abgang von André Silva und dem Zugang von Santos Borré hat Trainer Oliver Glasner Einblicke in seine Offensivideen für Eintracht Frankfurt gegeben. Er plant mit den Flanken von Filip Kostic und spricht ein Sonderlob für einen Youngster aus.',
151
- author: 'Stephan Reich',
152
- }}
153
- >
154
- {Template.bind({})}
155
- </Story>
156
- </Preview>