hr-design-system-handlebars 0.47.3 → 0.47.4
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 +12 -0
- package/package.json +1 -1
- package/src/stories/Example.stories.mdx +98 -0
- package/src/stories/example.hbs +8 -0
package/CHANGELOG.md
CHANGED
|
@@ -1,3 +1,15 @@
|
|
|
1
|
+
# v0.47.4 (Thu Jun 02 2022)
|
|
2
|
+
|
|
3
|
+
#### 🐛 Bug Fix
|
|
4
|
+
|
|
5
|
+
- - example story [#238](https://github.com/mumprod/hr-design-system-handlebars/pull/238) ([@vascoeduardo](https://github.com/vascoeduardo))
|
|
6
|
+
|
|
7
|
+
#### Authors: 1
|
|
8
|
+
|
|
9
|
+
- Vasco ([@vascoeduardo](https://github.com/vascoeduardo))
|
|
10
|
+
|
|
11
|
+
---
|
|
12
|
+
|
|
1
13
|
# v0.47.3 (Mon May 30 2022)
|
|
2
14
|
|
|
3
15
|
#### 🐛 Bug Fix
|
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.
|
|
9
|
+
"version": "0.47.4",
|
|
10
10
|
"scripts": {
|
|
11
11
|
"test": "echo \"Error: no test specified\" && exit 1",
|
|
12
12
|
"storybook": "start-storybook -p 6006 public",
|
|
@@ -0,0 +1,98 @@
|
|
|
1
|
+
import { ArgsTable, Meta, Story, Canvas, Preview } from '@storybook/addon-docs'
|
|
2
|
+
import { resetComponents } from '@storybook/components'
|
|
3
|
+
import icon from './views/components/base/image/icon.hbs'
|
|
4
|
+
import { Prism as SyntaxHighlighter } from 'react-syntax-highlighter';
|
|
5
|
+
|
|
6
|
+
|
|
7
|
+
import example from "./example.hbs";
|
|
8
|
+
|
|
9
|
+
<Meta
|
|
10
|
+
title="Grundlegendes/Template/Beispiel-Story"
|
|
11
|
+
argTypes={{
|
|
12
|
+
label: {
|
|
13
|
+
control: "text",
|
|
14
|
+
description: "Button text",
|
|
15
|
+
},
|
|
16
|
+
size: {
|
|
17
|
+
control: { type: "select", options: ["sm", "md", "lg", "xl"] },
|
|
18
|
+
description: "Größe des Buttons",
|
|
19
|
+
table: {
|
|
20
|
+
defaultValue: {
|
|
21
|
+
summary: "md",
|
|
22
|
+
},
|
|
23
|
+
},
|
|
24
|
+
},
|
|
25
|
+
type: {
|
|
26
|
+
description: "Typ des Buttons",
|
|
27
|
+
control: {
|
|
28
|
+
type: "select",
|
|
29
|
+
options: ["primary", "secondary"],
|
|
30
|
+
},
|
|
31
|
+
table: {
|
|
32
|
+
defaultValue: {
|
|
33
|
+
summary: "primary",
|
|
34
|
+
},
|
|
35
|
+
},
|
|
36
|
+
},
|
|
37
|
+
}}
|
|
38
|
+
/>
|
|
39
|
+
|
|
40
|
+
export const Template = ({ label, ...args }) => {
|
|
41
|
+
// You can either use a function to create DOM elements or use a plain html string!
|
|
42
|
+
// return `<div>${label}</div>`;
|
|
43
|
+
return example({ label, ...args });
|
|
44
|
+
};
|
|
45
|
+
|
|
46
|
+
# Name der Komponente
|
|
47
|
+
|
|
48
|
+
## Beschreibung/Abstract
|
|
49
|
+
|
|
50
|
+
Kurzer Beschreibungstext der die Komponente erklärt -> Penis
|
|
51
|
+
|
|
52
|
+
<Preview withToolbar>
|
|
53
|
+
<Story
|
|
54
|
+
name="Primary"
|
|
55
|
+
args={{
|
|
56
|
+
label: "Button",
|
|
57
|
+
}}
|
|
58
|
+
>
|
|
59
|
+
{Template.bind({})}
|
|
60
|
+
</Story>
|
|
61
|
+
</Preview>
|
|
62
|
+
|
|
63
|
+
## Props
|
|
64
|
+
|
|
65
|
+
Beschreibung der wichtigsten parameter, die für die Komponente benötigt werden
|
|
66
|
+
|
|
67
|
+
<ArgsTable story="Primary" />
|
|
68
|
+
|
|
69
|
+
## Usage/Verwendung
|
|
70
|
+
|
|
71
|
+
ggf. Beschreibung wann und wie die Komponente eingesetzt wird in handlebars
|
|
72
|
+
|
|
73
|
+
```html
|
|
74
|
+
{{> components/teaser/components/teaser_heading
|
|
75
|
+
fontVariant=this.headingFontVariant
|
|
76
|
+
headlineTag=this.headlineTag
|
|
77
|
+
label=this.label
|
|
78
|
+
readMore=this.link.readMoreText.readMoreScreenreader
|
|
79
|
+
size=this.teaserSize
|
|
80
|
+
title=this.title
|
|
81
|
+
topline=this.topline }}
|
|
82
|
+
```
|
|
83
|
+
|
|
84
|
+
## Dos/Doents
|
|
85
|
+
<ComponentRules
|
|
86
|
+
rules={[
|
|
87
|
+
{
|
|
88
|
+
positive: {
|
|
89
|
+
component:<div>Get started</div>,
|
|
90
|
+
description:"Use 1 or 2 words, no longer than 4 words, with fewer than 20 characters including spaces."
|
|
91
|
+
},
|
|
92
|
+
negative: {
|
|
93
|
+
component:<div>Get started and enjoy discount!</div>,
|
|
94
|
+
description:"Don’t use punctuation marks such as periods or exclamation points."
|
|
95
|
+
}
|
|
96
|
+
}
|
|
97
|
+
]}
|
|
98
|
+
/>
|
|
@@ -0,0 +1,8 @@
|
|
|
1
|
+
<button class="js-load btn {{inline-switch size '["sm","lg","xl"]' '["btn--sm","btn--lg","btn--xl","btn--md"]'}} {{inline-switch type '["secondary"]' '["btn--secondary","btn--primary"]'}}" >
|
|
2
|
+
{{label}}
|
|
3
|
+
</button>
|
|
4
|
+
<div class="js-load outer" data-new-hr-foo='{"test":"bar"}'>
|
|
5
|
+
<div class="inner"></div>
|
|
6
|
+
</div>
|
|
7
|
+
|
|
8
|
+
|