hr-design-system-handlebars 0.47.6 → 0.47.7

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 (11) hide show
  1. package/CHANGELOG.md +12 -0
  2. package/dist/assets/index.css +7 -4
  3. package/dist/views/components/teaser/components/teaser_text.hbs +3 -3
  4. package/dist/views/components/teaser/components/teaser_topline.hbs +1 -1
  5. package/dist/views/components/teaser/teaser_standard.hbs +1 -1
  6. package/package.json +1 -1
  7. package/src/stories/Typography.stories.mdx +7 -7
  8. package/src/stories/views/components/teaser/components/teaser_text.hbs +3 -3
  9. package/src/stories/views/components/teaser/components/teaser_topline.hbs +1 -1
  10. package/src/stories/views/components/teaser/teaser_standard.hbs +1 -1
  11. package/tailwind.config.js +3 -2
package/CHANGELOG.md CHANGED
@@ -1,3 +1,15 @@
1
+ # v0.47.7 (Mon Jun 13 2022)
2
+
3
+ #### 🐛 Bug Fix
4
+
5
+ - - adjusted teaserText size and Teaser Title Sizes [#242](https://github.com/mumprod/hr-design-system-handlebars/pull/242) ([@vascoeduardo](https://github.com/vascoeduardo))
6
+
7
+ #### Authors: 1
8
+
9
+ - Vasco ([@vascoeduardo](https://github.com/vascoeduardo))
10
+
11
+ ---
12
+
1
13
  # v0.47.6 (Wed Jun 08 2022)
2
14
 
3
15
  #### 🐛 Bug Fix
package/dist/assets/index.css CHANGED
@@ -1451,7 +1451,7 @@ Ensure the default browser behavior of the `hidden` attribute.
1451
1451
  padding-top: 0.75rem;
1452
1452
  padding-bottom: 0.75rem;
1453
1453
  font-size: 1rem;
1454
- line-height: 1.25rem;
1454
+ line-height: 1.375rem;
1455
1455
  }
1456
1456
  .btn--xl {
1457
1457
  padding-left: 1.5rem;
@@ -1896,6 +1896,9 @@ Ensure the default browser behavior of the `hidden` attribute.
1896
1896
  -moz-column-gap: 1rem;
1897
1897
  column-gap: 1rem;
1898
1898
  }
1899
+ .gap-y-3 {
1900
+ row-gap: 0.75rem;
1901
+ }
1899
1902
  .divide-y > :not([hidden]) ~ :not([hidden]) {
1900
1903
  --tw-divide-y-reverse: 0;
1901
1904
  border-top-width: calc(1px * calc(1 - var(--tw-divide-y-reverse)));
@@ -2253,7 +2256,7 @@ Ensure the default browser behavior of the `hidden` attribute.
2253
2256
  }
2254
2257
  .text-base {
2255
2258
  font-size: 1rem;
2256
- line-height: 1.25rem;
2259
+ line-height: 1.375rem;
2257
2260
  }
2258
2261
  .text-lg {
2259
2262
  font-size: 1.125rem;
@@ -2261,7 +2264,7 @@ Ensure the default browser behavior of the `hidden` attribute.
2261
2264
  }
2262
2265
  .text-xl {
2263
2266
  font-size: 1.25rem;
2264
- line-height: 1.75rem;
2267
+ line-height: 1.675rem;
2265
2268
  }
2266
2269
  .text-2xl {
2267
2270
  font-size: 1.375rem;
@@ -2817,7 +2820,7 @@ Ensure the default browser behavior of the `hidden` attribute.
2817
2820
 
2818
2821
  .md\:text-base {
2819
2822
  font-size: 1rem;
2820
- line-height: 1.25rem;
2823
+ line-height: 1.375rem;
2821
2824
  }
2822
2825
 
2823
2826
  .md\:text-4xl {
package/dist/views/components/teaser/components/teaser_text.hbs CHANGED
@@ -1,8 +1,8 @@
1
1
  <span
2
2
  class='{{inline-switch
3
3
  size
4
- '["hero","100","25"]'
5
- '["block md:text-base","hidden md:block md:text-base","hidden","hidden md:block"]'
4
+ '["hero","25"]'
5
+ '["block","hidden","hidden md:block"]'
6
6
  }}
7
- text-sm mt-3 font-copy'
7
+ text-base mt-3 font-copy'
8
8
  >{{text}}</span>
package/dist/views/components/teaser/components/teaser_topline.hbs CHANGED
@@ -1,5 +1,5 @@
1
1
  <span
2
- class="leading-5.5 pt-px block text-base {{inline-switch isPosterTeaser '[true]' '["text-white","text-toplineColor"]'}} font-heading"
2
+ class="pt-px block text-base {{inline-switch isPosterTeaser '[true]' '["text-white","text-toplineColor"]'}} font-heading"
3
3
  aria-label="{{readMore}}: {{text}}"
4
4
  >
5
5
  {{text}}
package/dist/views/components/teaser/teaser_standard.hbs CHANGED
@@ -1,4 +1,4 @@
1
- <article class="col-span-12 flex gap-y-5 gap-x-4 {{inline-switch this.teaserSize '["25","33","50"]' '["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"]'}} ">
1
+ <article class="col-span-12 flex gap-y-3 gap-x-4 {{inline-switch this.teaserSize '["25","33","50"]' '["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
2
  <figure class="{{inline-switch this.teaserSize '["25"]' '["basis-2/5 md:flex-full ar-1-1 md:ar-16-9", "ar-16-9"]'}} ">
3
3
  {{#>components/base/link isAriaHidden=true doTracking=(if this.doTracking 'true') clickLabelPrefix1=this.teaserSize clickLabelPrefix2="mediaLink" }}
4
4
  {{~> components/base/image/responsive_image this.teaserImage type=this.teasertype variant=this.imageVariant noDelay=../noDelay addClassImg="" ~}}
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.47.6",
9
+ "version": "0.47.7",
10
10
  "scripts": {
11
11
  "test": "echo \"Error: no test specified\" && exit 1",
12
12
  "storybook": "start-storybook -p 6006 public",
package/src/stories/Typography.stories.mdx CHANGED
@@ -18,9 +18,9 @@ Zur Auszeichnung von Fließtexten stehen die folgenden Utility Klassen zur verf
18
18
  | `font-copy` | `font-family: DIN, sans-serif` | | Setzt die Eigenschaft `font-family` |
19
19
  | `text-xs` | `font-size: 0.75rem` <br /> `line-height: 1rem` | `12px`<br />`16px` | Setzt die Eigenschaften `font-size` und `line-height` |
20
20
  | `text-sm` | `font-size: 0.875rem` <br /> `line-height: 1.88rem` | `14px`<br />`19px` | Setzt die Eigenschaften `font-size` und `line-height` |
21
- | `text-base` | `font-size: 1rem` <br /> `line-height: 1.25rem` | `16px`<br />`20px` | Setzt die Eigenschaften `font-size` und `line-height` |
22
- | `text-lg` | `font-size: 1.125rem` <br /> `line-height: 1.75rem` | `18px`<br />`28px` | Setzt die Eigenschaften `font-size` und `line-height` |
23
- | `text-xl` | `font-size: 1.25rem` <br /> `line-height: 1.75rem` | `20px`<br />`28px` | Setzt die Eigenschaften `font-size` und `line-height` |
21
+ | `text-base` | `font-size: 1rem` <br /> `line-height: 1.375rem` | `16px`<br />`22px` | Setzt die Eigenschaften `font-size` und `line-height` |
22
+ | `text-lg` | `font-size: 1.125rem` <br /> `line-height: 1.75rem` | `18px`<br />`24px` | Setzt die Eigenschaften `font-size` und `line-height` |
23
+ | `text-xl` | `font-size: 1.25rem` <br /> `line-height: 1.75rem` | `20px`<br />`26px` | Setzt die Eigenschaften `font-size` und `line-height` |
24
24
 
25
25
  ### Verwendung
26
26
 
@@ -90,11 +90,11 @@ Zur Auszeichnung von Überschriften stehen die folgenden Utility Klassen zur ver
90
90
  | :------------------ | :-------------------------------------------------- | ------------------ | :---------------------------------------------------- |
91
91
  | `font-headingSerif` | `font-family: RobotoSlab, serif` | | Setzt die Eigenschaft `font-family` |
92
92
  | `font-heading` | `font-family: RobotoCond, sans-serif` | | Setzt die Eigenschaft `font-family` |
93
- | `text-lg` | `font-size: 1.125rem` <br /> `line-height: 1.75rem` | `18px`<br />`28px` | Setzt die Eigenschaften `font-size` und `line-height` |
94
- | `text-xl` | `font-size: 1.25rem` <br /> `line-height: 1.75rem` | `20px`<br />`28px` | Setzt die Eigenschaften `font-size` und `line-height` |
95
- | `text-2xl` | `font-size: 1.375rem` <br /> `line-height: 2rem` | `22px`<br />`32px` | Setzt die Eigenschaften `font-size` und `line-height` |
93
+ | `text-lg` | `font-size: 1.125rem` <br /> `line-height: 1.5rem` | `18px`<br />`24px` | Setzt die Eigenschaften `font-size` und `line-height` |
94
+ | `text-xl` | `font-size: 1.25rem` <br /> `line-height: 1.675rem` | `20px`<br />`26px` | Setzt die Eigenschaften `font-size` und `line-height` |
95
+ | `text-2xl` | `font-size: 1.375rem` <br /> `line-height: 1.75rem` | `22px`<br />`28px` | Setzt die Eigenschaften `font-size` und `line-height` |
96
96
  | `text-3xl` | `font-size: 1.875rem` <br /> `line-height: 2.25rem` | `30px`<br />`36px` | Setzt die Eigenschaften `font-size` und `line-height` |
97
- | `text-4xl` | `font-size: 2.125rem` <br /> `line-height: 2.25rem` | `34px`<br />`36px` | Setzt die Eigenschaften `font-size` und `line-height` |
97
+ | `text-4xl` | `font-size: 2.125rem` <br /> `line-height: 2.375rem`| `34px`<br />`38px` | Setzt die Eigenschaften `font-size` und `line-height` |
98
98
 
99
99
  ### Verwendung RobotoSlab
100
100
 
package/src/stories/views/components/teaser/components/teaser_text.hbs CHANGED
@@ -1,8 +1,8 @@
1
1
  <span
2
2
  class='{{inline-switch
3
3
  size
4
- '["hero","100","25"]'
5
- '["block md:text-base","hidden md:block md:text-base","hidden","hidden md:block"]'
4
+ '["hero","25"]'
5
+ '["block","hidden","hidden md:block"]'
6
6
  }}
7
- text-sm mt-3 font-copy'
7
+ text-base mt-3 font-copy'
8
8
  >{{text}}</span>
package/src/stories/views/components/teaser/components/teaser_topline.hbs CHANGED
@@ -1,5 +1,5 @@
1
1
  <span
2
- class="leading-5.5 pt-px block text-base {{inline-switch isPosterTeaser '[true]' '["text-white","text-toplineColor"]'}} font-heading"
2
+ class="pt-px block text-base {{inline-switch isPosterTeaser '[true]' '["text-white","text-toplineColor"]'}} font-heading"
3
3
  aria-label="{{readMore}}: {{text}}"
4
4
  >
5
5
  {{text}}
package/src/stories/views/components/teaser/teaser_standard.hbs CHANGED
@@ -1,4 +1,4 @@
1
- <article class="col-span-12 flex gap-y-5 gap-x-4 {{inline-switch this.teaserSize '["25","33","50"]' '["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"]'}} ">
1
+ <article class="col-span-12 flex gap-y-3 gap-x-4 {{inline-switch this.teaserSize '["25","33","50"]' '["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
2
  <figure class="{{inline-switch this.teaserSize '["25"]' '["basis-2/5 md:flex-full ar-1-1 md:ar-16-9", "ar-16-9"]'}} ">
3
3
  {{#>components/base/link isAriaHidden=true doTracking=(if this.doTracking 'true') clickLabelPrefix1=this.teaserSize clickLabelPrefix2="mediaLink" }}
4
4
  {{~> components/base/image/responsive_image this.teaserImage type=this.teasertype variant=this.imageVariant noDelay=../noDelay addClassImg="" ~}}
package/tailwind.config.js CHANGED
@@ -40,8 +40,9 @@ module.exports = {
40
40
  fontSize: {
41
41
  'xs':['0.75rem', '1.063rem'],
42
42
  'sm':['0.875rem', '1.188rem'],
43
- 'base':['1rem', '1.25rem'],
44
- 'lg':['1.125rem', '1.5rem'],
43
+ 'base':['1rem', '1.375rem'],
44
+ 'lg':['1.125rem', '1.5rem'],
45
+ 'xl':['1.25rem', '1.675rem'],
45
46
  '2xl':['1.375rem', '1.75rem'],
46
47
  '4xl':['2.125rem', '2.375rem'],
47
48
  },