@ilo-org/twig 0.11.4 → 0.12.0
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.
|
@@ -1,9 +1,9 @@
|
|
|
1
1
|
|
|
2
|
-
> @ilo-org/twig@0.
|
|
2
|
+
> @ilo-org/twig@0.12.0 build:lib /home/runner/work/designsystem/designsystem/packages/twig
|
|
3
3
|
> node importprefix.js && node importsvgs.js && pnpm output
|
|
4
4
|
|
|
5
5
|
theme prefix added
|
|
6
6
|
|
|
7
|
-
> @ilo-org/twig@0.
|
|
7
|
+
> @ilo-org/twig@0.12.0 output /home/runner/work/designsystem/designsystem/packages/twig
|
|
8
8
|
> node outputtwigs.js
|
|
9
9
|
|
package/CHANGELOG.md
CHANGED
|
@@ -1,5 +1,28 @@
|
|
|
1
1
|
# @ilo-org/twig
|
|
2
2
|
|
|
3
|
+
## 0.12.0
|
|
4
|
+
|
|
5
|
+
### Minor Changes
|
|
6
|
+
|
|
7
|
+
- b7fcf3426: Data Card dataset field takes an optional `cta` argument that renders a list of secondary buttons with possible headline
|
|
8
|
+
|
|
9
|
+
### Patch Changes
|
|
10
|
+
|
|
11
|
+
- Updated dependencies [b7fcf3426]
|
|
12
|
+
- Updated dependencies [27624a076]
|
|
13
|
+
- @ilo-org/styles@0.11.0
|
|
14
|
+
|
|
15
|
+
## 0.11.5
|
|
16
|
+
|
|
17
|
+
### Patch Changes
|
|
18
|
+
|
|
19
|
+
- 1a6d0671f: Align Hero Card content with main body content when `justify` is set to `start` or `offset`
|
|
20
|
+
- Updated dependencies [266671491]
|
|
21
|
+
- Updated dependencies [244fae9db]
|
|
22
|
+
- Updated dependencies [1a6d0671f]
|
|
23
|
+
- Updated dependencies [371faf0fb]
|
|
24
|
+
- @ilo-org/styles@0.10.6
|
|
25
|
+
|
|
3
26
|
## 0.11.4
|
|
4
27
|
|
|
5
28
|
### Patch Changes
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@ilo-org/twig",
|
|
3
|
-
"version": "0.
|
|
3
|
+
"version": "0.12.0",
|
|
4
4
|
"license": "Apache-2.0",
|
|
5
5
|
"description": "Twig components for the ILO's Design System",
|
|
6
6
|
"main": "",
|
|
@@ -25,7 +25,7 @@
|
|
|
25
25
|
"@ilo-org/brand-assets": "0.2.0",
|
|
26
26
|
"@ilo-org/fonts": "0.1.0",
|
|
27
27
|
"@ilo-org/icons": "0.2.1",
|
|
28
|
-
"@ilo-org/styles": "0.
|
|
28
|
+
"@ilo-org/styles": "0.11.0",
|
|
29
29
|
"@ilo-org/themes": "0.6.1",
|
|
30
30
|
"@ilo-org/utils": "0.0.11"
|
|
31
31
|
},
|
|
@@ -1,9 +1,7 @@
|
|
|
1
|
-
{#
|
|
2
|
-
DATA CARD COMPONENT
|
|
3
|
-
#}
|
|
1
|
+
{# card_data.twig #}
|
|
4
2
|
|
|
5
3
|
{% if not columns %}
|
|
6
|
-
|
|
4
|
+
{% set columns = "one" %}
|
|
7
5
|
{% endif %}
|
|
8
6
|
|
|
9
7
|
{# Different layout options to apply depending on if the card has an image
|
|
@@ -12,74 +10,92 @@
|
|
|
12
10
|
links go on one side and the rest of the content goes on the other. Otherwise, flow
|
|
13
11
|
all content normally. #}
|
|
14
12
|
{% if image %}
|
|
15
|
-
|
|
13
|
+
{% set content = "with-image" %}
|
|
16
14
|
{% elseif not image and dataset.links %}
|
|
17
|
-
|
|
15
|
+
{% set content = "no-image-with-links" %}
|
|
18
16
|
{% else %}
|
|
19
|
-
|
|
17
|
+
{% set content = "default" %}
|
|
20
18
|
{% endif %}
|
|
21
19
|
|
|
22
20
|
|
|
23
21
|
<div class="{{prefix}}--card {{prefix}}--card__type__data {{prefix}}--card__size__{{size}} {{prefix}}--card__type__data__columns__{{columns}}">
|
|
24
|
-
|
|
25
|
-
|
|
26
|
-
|
|
27
|
-
|
|
28
|
-
|
|
29
|
-
|
|
30
|
-
|
|
31
|
-
|
|
32
|
-
|
|
33
|
-
|
|
34
|
-
|
|
35
|
-
|
|
36
|
-
|
|
37
|
-
|
|
38
|
-
|
|
39
|
-
|
|
40
|
-
|
|
41
|
-
|
|
42
|
-
|
|
43
|
-
|
|
44
|
-
|
|
45
|
-
|
|
46
|
-
|
|
47
|
-
|
|
48
|
-
|
|
49
|
-
|
|
50
|
-
|
|
51
|
-
|
|
52
|
-
|
|
53
|
-
|
|
54
|
-
|
|
55
|
-
|
|
22
|
+
<div class="{{prefix}}--card--wrap">
|
|
23
|
+
{% if not image and eyebrow %}
|
|
24
|
+
<div class="{{prefix}}--card--eyebrow">{{ eyebrow }}</div>
|
|
25
|
+
{% endif %}
|
|
26
|
+
<div class="{{prefix}}--card--content {{prefix}}--card--content__{{ content }}">
|
|
27
|
+
{% if image %}
|
|
28
|
+
<div class="{{prefix}}--card--area--image">
|
|
29
|
+
{% if eyebrow %}
|
|
30
|
+
<div class="{{prefix}}--card--eyebrow">{{ eyebrow }}</div>
|
|
31
|
+
{% endif %}
|
|
32
|
+
<div class="{{prefix}}--card--image">
|
|
33
|
+
{% include "@components/picture/picture.twig" with { image: image, class: "card" } %}
|
|
34
|
+
</div>
|
|
35
|
+
</div>
|
|
36
|
+
{% endif %}
|
|
37
|
+
{% if dataset.content %}
|
|
38
|
+
{% for item in dataset.content.items %}
|
|
39
|
+
<div class="{{prefix}}--card--area--content">
|
|
40
|
+
{% block content_item %}
|
|
41
|
+
<p class="{{prefix}}--card__type__data--content-label">{{ item.label }}</p>
|
|
42
|
+
<p class="{{prefix}}--card__type__data--content-copy">{{ item.copy }}</p>
|
|
43
|
+
{% endblock %}
|
|
44
|
+
</div>
|
|
45
|
+
{% endfor %}
|
|
46
|
+
{% endif %}
|
|
47
|
+
{% if dataset.files %}
|
|
48
|
+
<div class="{{prefix}}--card--area--files">
|
|
49
|
+
{% block area_files %}
|
|
50
|
+
<div class="{{prefix}}--card__type__data--content-files">
|
|
51
|
+
<p class="{{prefix}}--card__type__data--content-label">{{ dataset.files.headline }}</p>
|
|
52
|
+
{% for item in dataset.files.items %}
|
|
53
|
+
{% include "@components/button/button.twig" with {
|
|
56
54
|
type: "primary",
|
|
57
55
|
size: "small",
|
|
58
56
|
url: item.url,
|
|
59
57
|
label: item.label,
|
|
60
58
|
prefix: prefix
|
|
61
59
|
} only %}
|
|
62
|
-
|
|
63
|
-
|
|
64
|
-
|
|
65
|
-
|
|
66
|
-
|
|
67
|
-
|
|
68
|
-
|
|
69
|
-
|
|
70
|
-
|
|
71
|
-
|
|
72
|
-
|
|
73
|
-
|
|
60
|
+
{% endfor %}
|
|
61
|
+
</div>
|
|
62
|
+
{% endblock %}
|
|
63
|
+
</div>
|
|
64
|
+
{% endif %}
|
|
65
|
+
{% if dataset.cta %}
|
|
66
|
+
<div class="{{prefix}}--card--area--cta">
|
|
67
|
+
{% block area_cta %}
|
|
68
|
+
<div class="{{prefix}}--card__type__data--content-cta">
|
|
69
|
+
<p class="{{prefix}}--card__type__data--content-label">{{ dataset.cta.headline }}</p>
|
|
70
|
+
{% for item in dataset.cta.items %}
|
|
71
|
+
{% include "@components/button/button.twig" with {
|
|
72
|
+
type: "secondary",
|
|
73
|
+
size: "small",
|
|
74
|
+
url: item.url,
|
|
75
|
+
label: item.label,
|
|
76
|
+
prefix: prefix
|
|
77
|
+
} only %}
|
|
78
|
+
{% endfor %}
|
|
79
|
+
</div>
|
|
80
|
+
{% endblock %}
|
|
81
|
+
</div>
|
|
82
|
+
{% endif %}
|
|
83
|
+
{% if dataset.links %}
|
|
84
|
+
<div class="{{prefix}}--card--area--links">
|
|
85
|
+
{% block area_links %}
|
|
86
|
+
<div class="{{prefix}}--card__type__data--content-links">
|
|
87
|
+
<p class="{{prefix}}--card__type__data--content-label">{{ dataset.links.headline }}</p>
|
|
88
|
+
{% for item in dataset.links.items %}
|
|
89
|
+
{% include "@components/link/link.twig" with {
|
|
74
90
|
url: item.url,
|
|
75
91
|
label: item.label,
|
|
76
92
|
prefix: prefix
|
|
77
93
|
} only %}
|
|
78
|
-
|
|
79
|
-
|
|
80
|
-
|
|
81
|
-
|
|
82
|
-
|
|
83
|
-
|
|
84
|
-
|
|
94
|
+
{% endfor %}
|
|
95
|
+
</div>
|
|
96
|
+
{% endblock %}
|
|
97
|
+
</div>
|
|
98
|
+
{% endif %}
|
|
99
|
+
</div>
|
|
100
|
+
</div>
|
|
85
101
|
</div>
|
|
@@ -25,6 +25,13 @@ datacard:
|
|
|
25
25
|
url: "https://www.ilo.org"
|
|
26
26
|
- label: MOBI 2.4 MB
|
|
27
27
|
url: "https://www.ilo.org"
|
|
28
|
+
cta:
|
|
29
|
+
headline: Read online
|
|
30
|
+
items:
|
|
31
|
+
- label: HTML Version
|
|
32
|
+
url: "https://www.ilo.org"
|
|
33
|
+
- label: InfoStories
|
|
34
|
+
url: "https://www.ilo.org/infostories/en-GB"
|
|
28
35
|
links:
|
|
29
36
|
headline: Also available in
|
|
30
37
|
items:
|