hr-design-system-handlebars 0.42.7 β 0.42.8
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/CHANGELOG.md +13 -0
- package/dist/assets/index.css +15 -0
- package/dist/views/components/Teaser/Teaser-standard.hbs +2 -4
- package/dist/views/components/Teaser/teaserText.hbs +1 -0
- package/package.json +1 -1
- package/src/stories/views/components/Teaser/Teaser-standard.hbs +2 -4
- package/src/stories/views/components/Teaser/data/teaser_standard_lg_serif.json +1 -1
- package/src/stories/views/components/Teaser/data/teaser_standard_md_serif.json +1 -1
- package/src/stories/views/components/Teaser/data/teaser_standard_sm_serif.json +1 -1
- package/src/stories/views/components/Teaser/data/teaser_standard_xl_serif.json +1 -1
- package/src/stories/views/components/Teaser/teaserText.hbs +1 -0
- package/src/stories/views/components/Teaser/teaserText.stories.mdx +57 -0
package/CHANGELOG.md
CHANGED
|
@@ -1,3 +1,16 @@
|
|
|
1
|
+
# v0.42.8 (Tue Apr 19 2022)
|
|
2
|
+
|
|
3
|
+
#### π Bug Fix
|
|
4
|
+
|
|
5
|
+
- add teaserText-component [#217](https://github.com/mumprod/hr-design-system-handlebars/pull/217) (zouhair1 [@selbaciri](https://github.com/selbaciri))
|
|
6
|
+
|
|
7
|
+
#### Authors: 2
|
|
8
|
+
|
|
9
|
+
- Saad El Baciri ([@selbaciri](https://github.com/selbaciri))
|
|
10
|
+
- selbaciri (zouhair1)
|
|
11
|
+
|
|
12
|
+
---
|
|
13
|
+
|
|
1
14
|
# v0.42.7 (Tue Apr 19 2022)
|
|
2
15
|
|
|
3
16
|
#### π Bug Fix
|
package/dist/assets/index.css
CHANGED
|
@@ -1584,6 +1584,9 @@ Ensure the default browser behavior of the `hidden` attribute.
|
|
|
1584
1584
|
.mt-0 {
|
|
1585
1585
|
margin-top: 0px;
|
|
1586
1586
|
}
|
|
1587
|
+
.mt-5 {
|
|
1588
|
+
margin-top: 1.25rem;
|
|
1589
|
+
}
|
|
1587
1590
|
.mr-4 {
|
|
1588
1591
|
margin-right: 1rem;
|
|
1589
1592
|
}
|
|
@@ -2753,11 +2756,20 @@ Ensure the default browser behavior of the `hidden` attribute.
|
|
|
2753
2756
|
padding-left: 0px;
|
|
2754
2757
|
}
|
|
2755
2758
|
|
|
2759
|
+
.md\:text-base {
|
|
2760
|
+
font-size: 1rem;
|
|
2761
|
+
line-height: 1.5rem;
|
|
2762
|
+
}
|
|
2763
|
+
|
|
2756
2764
|
.md\:text-4xl {
|
|
2757
2765
|
font-size: 2.125rem;
|
|
2758
2766
|
line-height: 2.25rem;
|
|
2759
2767
|
}
|
|
2760
2768
|
|
|
2769
|
+
.md\:leading-4 {
|
|
2770
|
+
line-height: 1rem;
|
|
2771
|
+
}
|
|
2772
|
+
|
|
2761
2773
|
.md\:drop-shadow-md {
|
|
2762
2774
|
--tw-drop-shadow: drop-shadow(0 5px 3px rgba(0, 0, 0, 0.07));
|
|
2763
2775
|
-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);
|
|
@@ -3032,6 +3044,9 @@ Ensure the default browser behavior of the `hidden` attribute.
|
|
|
3032
3044
|
.lg\:pl-1 {
|
|
3033
3045
|
padding-left: 0.25rem;
|
|
3034
3046
|
}
|
|
3047
|
+
.lg\:leading-5 {
|
|
3048
|
+
line-height: 1.25rem;
|
|
3049
|
+
}
|
|
3035
3050
|
.lg\:leading-8 {
|
|
3036
3051
|
line-height: 2rem;
|
|
3037
3052
|
}
|
|
@@ -9,10 +9,8 @@
|
|
|
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
|
-
|
|
13
|
-
|
|
14
|
-
{{> components/Teaser/Byline}}
|
|
15
|
-
|
|
12
|
+
{{> components/Teaser/teaserText text=shorttext size=teasersize hero=isHeroTeaser font=(inline-switch isHeroTeaser '[true]' '["md:text-base md:leading-4 lg:leading-5"]') }}
|
|
13
|
+
{{> components/Teaser/Byline}}
|
|
16
14
|
</section>
|
|
17
15
|
</div>
|
|
18
16
|
</article>
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
<span class="{{inline-switch size '["xxl","sm"]' '["","hidden","hidden md:block"]'}} text-sm leading-4 {{font}} mt-5 font-copy">{{text}}</span>
|
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.
|
|
9
|
+
"version": "0.42.8",
|
|
10
10
|
"scripts": {
|
|
11
11
|
"test": "echo \"Error: no test specified\" && exit 1",
|
|
12
12
|
"storybook": "start-storybook -p 6006 public",
|
|
@@ -9,10 +9,8 @@
|
|
|
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
|
-
|
|
13
|
-
|
|
14
|
-
{{> components/Teaser/Byline}}
|
|
15
|
-
|
|
12
|
+
{{> components/Teaser/teaserText text=shorttext size=teasersize hero=isHeroTeaser font=(inline-switch isHeroTeaser '[true]' '["md:text-base md:leading-4 lg:leading-5"]') }}
|
|
13
|
+
{{> components/Teaser/Byline}}
|
|
16
14
|
</section>
|
|
17
15
|
</div>
|
|
18
16
|
</article>
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
<span class="{{inline-switch size '["xxl","sm"]' '["","hidden","hidden md:block"]'}} text-sm leading-4 {{font}} mt-5 font-copy">{{text}}</span>
|
|
@@ -0,0 +1,57 @@
|
|
|
1
|
+
import { ArgsTable, Meta, Story, Preview } from "@storybook/addon-docs";
|
|
2
|
+
|
|
3
|
+
import teaserTextComponent from "./teaserText.hbs";
|
|
4
|
+
|
|
5
|
+
<Meta
|
|
6
|
+
title="Komponenten/Teaser/Komponenten/teaserText"
|
|
7
|
+
argTypes={{
|
|
8
|
+
text: {
|
|
9
|
+
control: "text",
|
|
10
|
+
description: "teaserText",
|
|
11
|
+
},
|
|
12
|
+
size: {
|
|
13
|
+
options: ["xl", "lg", "md", "sm"],
|
|
14
|
+
control: { type: "inline-radio" },
|
|
15
|
+
},
|
|
16
|
+
font : {
|
|
17
|
+
table: {
|
|
18
|
+
disable: true
|
|
19
|
+
}
|
|
20
|
+
},
|
|
21
|
+
}}
|
|
22
|
+
/>
|
|
23
|
+
|
|
24
|
+
export const Template = ({ text, ...args }) => {
|
|
25
|
+
return teaserTextComponent({ text, ...args });
|
|
26
|
+
};
|
|
27
|
+
|
|
28
|
+
# teaserText
|
|
29
|
+
|
|
30
|
+
Beispiele fΓΌr die teaserText-Komponente:
|
|
31
|
+
|
|
32
|
+
<Preview withToolbar>
|
|
33
|
+
<Story
|
|
34
|
+
name="Teasertext"
|
|
35
|
+
args={{
|
|
36
|
+
text: "Dies ist der Teasertext eines normalen Teasers",
|
|
37
|
+
size: "xl",
|
|
38
|
+
}}
|
|
39
|
+
>
|
|
40
|
+
{Template.bind({})}
|
|
41
|
+
</Story>
|
|
42
|
+
<Story
|
|
43
|
+
name="Teasertext Hero-Teaser"
|
|
44
|
+
args={{
|
|
45
|
+
text: "Dies ist der Teasertext eines Hero-Teasers",
|
|
46
|
+
size: "xxl",
|
|
47
|
+
font: "md:text-base md:leading-4 lg:leading-5",
|
|
48
|
+
}}
|
|
49
|
+
parameters={{
|
|
50
|
+
controls: {
|
|
51
|
+
exclude: ['size']
|
|
52
|
+
}
|
|
53
|
+
}}
|
|
54
|
+
>
|
|
55
|
+
{Template.bind({})}
|
|
56
|
+
</Story>
|
|
57
|
+
</Preview>
|