@ilo-org/twig 0.8.2 → 0.9.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.
- package/.turbo/turbo-build:lib.log +2 -2
- package/CHANGELOG.md +13 -0
- package/images/publication.jpg +0 -0
- package/package.json +2 -2
- package/src/patterns/components/card/card.wingsuit.yml +25 -16
- package/src/patterns/components/card_data/card_data.twig +73 -37
- package/src/patterns/components/card_data/card_data.wingsuit.yml +78 -19
- package/src/patterns/components/picture/picture.twig +2 -2
|
@@ -1,9 +1,9 @@
|
|
|
1
1
|
|
|
2
|
-
> @ilo-org/twig@0.
|
|
2
|
+
> @ilo-org/twig@0.9.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.9.0 output /home/runner/work/designsystem/designsystem/packages/twig
|
|
8
8
|
> node outputtwigs.js
|
|
9
9
|
|
package/CHANGELOG.md
CHANGED
|
@@ -1,5 +1,18 @@
|
|
|
1
1
|
# @ilo-org/twig
|
|
2
2
|
|
|
3
|
+
## 0.9.0
|
|
4
|
+
|
|
5
|
+
### Minor Changes
|
|
6
|
+
|
|
7
|
+
- 9edcc451f: Add 2-column layout for Data Cards. `columns` setting allows users to choose preferred layout option.
|
|
8
|
+
|
|
9
|
+
### Patch Changes
|
|
10
|
+
|
|
11
|
+
- 289d2f3f6: Fix response images not working when only one breakpoint url is provided
|
|
12
|
+
- Updated dependencies [9edcc451f]
|
|
13
|
+
- Updated dependencies [9edcc451f]
|
|
14
|
+
- @ilo-org/styles@0.8.0
|
|
15
|
+
|
|
3
16
|
## 0.8.2
|
|
4
17
|
|
|
5
18
|
### Patch Changes
|
|
Binary file
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@ilo-org/twig",
|
|
3
|
-
"version": "0.
|
|
3
|
+
"version": "0.9.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.1.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.8.0",
|
|
29
29
|
"@ilo-org/themes": "0.2.0",
|
|
30
30
|
"@ilo-org/utils": "0.0.11"
|
|
31
31
|
},
|
|
@@ -13,33 +13,31 @@ card:
|
|
|
13
13
|
url: "https://www.ilo.org/"
|
|
14
14
|
dataset:
|
|
15
15
|
type: object
|
|
16
|
-
label: Dataset
|
|
17
|
-
description:
|
|
16
|
+
label: Dataset object
|
|
17
|
+
description: Array of Content (label, copy), Files object (optional headline, array of items with label and url) and Links object (optional headline, array of items with label and url). Only used by `Data Card`.
|
|
18
18
|
preview:
|
|
19
19
|
content:
|
|
20
20
|
items:
|
|
21
|
-
- label: Date
|
|
21
|
+
- label: Date of publication
|
|
22
22
|
copy: 17 March 2022
|
|
23
|
-
- label: Event type
|
|
24
|
-
copy: Technical meeting of experts
|
|
25
23
|
files:
|
|
26
|
-
headline: Files
|
|
24
|
+
headline: Files for download
|
|
27
25
|
items:
|
|
28
|
-
- label:
|
|
26
|
+
- label: PDF 3.2 MB
|
|
29
27
|
url: "https://www.ilo.org"
|
|
30
|
-
- label:
|
|
28
|
+
- label: EPUB 5.8 MB
|
|
31
29
|
url: "https://www.ilo.org"
|
|
32
|
-
- label:
|
|
30
|
+
- label: MOBI 2.4 MB
|
|
33
31
|
url: "https://www.ilo.org"
|
|
34
32
|
links:
|
|
35
|
-
headline:
|
|
33
|
+
headline: Also available in
|
|
36
34
|
items:
|
|
37
|
-
|
|
38
|
-
|
|
39
|
-
|
|
40
|
-
|
|
41
|
-
|
|
42
|
-
|
|
35
|
+
- label: English
|
|
36
|
+
url: "https://www.ilo.org/search?q=link"
|
|
37
|
+
- label: Español
|
|
38
|
+
url: "https://www.ilo.org/search?q=hyperlink"
|
|
39
|
+
- label: Français
|
|
40
|
+
url: "https://www.ilo.org/search?q=url"
|
|
43
41
|
date:
|
|
44
42
|
type: object
|
|
45
43
|
label: Date
|
|
@@ -135,6 +133,14 @@ card:
|
|
|
135
133
|
yellow: yellow
|
|
136
134
|
blue: blue
|
|
137
135
|
preview: "blue"
|
|
136
|
+
columns:
|
|
137
|
+
type: select
|
|
138
|
+
label: columns
|
|
139
|
+
description: Displays the data in one or two columns when the size is set to `wide` or `fluid`. If not set, the card will appear as `one`. Only used by `Data Card`.
|
|
140
|
+
options:
|
|
141
|
+
one: one
|
|
142
|
+
two: two
|
|
143
|
+
preview: "one"
|
|
138
144
|
cornercut:
|
|
139
145
|
type: select
|
|
140
146
|
label: cornercut
|
|
@@ -212,6 +218,9 @@ card:
|
|
|
212
218
|
label: Data Card
|
|
213
219
|
settings:
|
|
214
220
|
type: data
|
|
221
|
+
fields:
|
|
222
|
+
eyebrow: Flagship report
|
|
223
|
+
image:
|
|
215
224
|
stat:
|
|
216
225
|
label: Stat Card
|
|
217
226
|
settings:
|
|
@@ -1,48 +1,84 @@
|
|
|
1
1
|
{#
|
|
2
2
|
DATA CARD COMPONENT
|
|
3
3
|
#}
|
|
4
|
-
|
|
4
|
+
|
|
5
|
+
{% if not columns %}
|
|
6
|
+
{% set columns = "one" %}
|
|
7
|
+
{% endif %}
|
|
8
|
+
|
|
9
|
+
{# Different layout options to apply depending on if the card has an image
|
|
10
|
+
or if it has links. If it has two columns with image, then image goes on one side
|
|
11
|
+
and content goes on the other. If it has two columns witout image but links, then
|
|
12
|
+
links go on one side and the rest of the content goes on the other. Otherwise, flow
|
|
13
|
+
all content normally. #}
|
|
14
|
+
{% if image %}
|
|
15
|
+
{% set content = "with-image" %}
|
|
16
|
+
{% elseif not image and dataset.links %}
|
|
17
|
+
{% set content = "no-image-with-links" %}
|
|
18
|
+
{% else %}
|
|
19
|
+
{% set content = "default" %}
|
|
20
|
+
{% endif %}
|
|
21
|
+
|
|
22
|
+
|
|
23
|
+
<div class="{{prefix}}--card {{prefix}}--card__type__data {{prefix}}--card__size__{{size}} {{prefix}}--card__type__data__columns__{{columns}}">
|
|
5
24
|
<div class="{{prefix}}--card--wrap">
|
|
6
|
-
|
|
7
|
-
{
|
|
8
|
-
|
|
9
|
-
|
|
25
|
+
{% if not image and eyebrow %}
|
|
26
|
+
<div class="{{prefix}}--card--eyebrow">{{ eyebrow }}</div>
|
|
27
|
+
{% endif %}
|
|
28
|
+
<div class="{{prefix}}--card--content {{prefix}}--card--content__{{ content }}">
|
|
10
29
|
{% if image %}
|
|
11
|
-
|
|
12
|
-
{%
|
|
13
|
-
|
|
14
|
-
|
|
15
|
-
|
|
16
|
-
|
|
30
|
+
<div class="{{prefix}}--card--area--image">
|
|
31
|
+
{% if eyebrow %}
|
|
32
|
+
<div class="{{prefix}}--card--eyebrow">{{ eyebrow }}</div>
|
|
33
|
+
{% endif %}
|
|
34
|
+
<div class="{{prefix}}--card--image">
|
|
35
|
+
{% include "@components/picture/picture.twig" with { image: image, class: "card" } %}
|
|
17
36
|
</div>
|
|
37
|
+
</div>
|
|
18
38
|
{% endif %}
|
|
19
|
-
{% if dataset %}
|
|
20
|
-
{%
|
|
21
|
-
{
|
|
22
|
-
|
|
23
|
-
|
|
24
|
-
|
|
25
|
-
|
|
26
|
-
{% if dataset.files %}
|
|
27
|
-
<div class="{{prefix}}--card__type__data--content-files">
|
|
28
|
-
<p class="{{prefix}}--card__type__data--content-label">{{ dataset.files.headline }}</p>
|
|
29
|
-
{% for item in dataset.files.items %}
|
|
30
|
-
<a class="{{prefix}}--card__type__data--file {{prefix}}--button {{prefix}}--button--primary {{prefix}}--button--small" href="{{item.url}}"><span class="button__label" download>{{ item.label }}</span></a>
|
|
31
|
-
{% endfor %}
|
|
32
|
-
</div>
|
|
33
|
-
{% endif %}
|
|
34
|
-
{% if dataset.links %}
|
|
35
|
-
<div class="{{prefix}}--card__type__data--content-links">
|
|
36
|
-
<p class="{{prefix}}--card__type__data--content-label">{{ dataset.links.headline }}</p>
|
|
37
|
-
{% for item in dataset.links.items %}
|
|
38
|
-
{% include "@components/link/link.twig" with {
|
|
39
|
-
url: item.url,
|
|
40
|
-
label: item.label,
|
|
41
|
-
prefix: prefix
|
|
42
|
-
} %} <span> </span>
|
|
43
|
-
{% endfor %}
|
|
39
|
+
{% if dataset.content %}
|
|
40
|
+
{% for item in dataset.content.items %}
|
|
41
|
+
<div class="{{prefix}}--card--area--content">
|
|
42
|
+
{% block content_item %}
|
|
43
|
+
<p class="{{prefix}}--card__type__data--content-label">{{ item.label }}</p>
|
|
44
|
+
<p class="{{prefix}}--card__type__data--content-copy">{{ item.copy }}</p>
|
|
45
|
+
{% endblock %}
|
|
44
46
|
</div>
|
|
45
|
-
{%
|
|
47
|
+
{% endfor %}
|
|
48
|
+
{% endif %}
|
|
49
|
+
{% if dataset.files %}
|
|
50
|
+
<div class="{{prefix}}--card--area--files">
|
|
51
|
+
{% block area_files %}
|
|
52
|
+
<div class="{{prefix}}--card__type__data--content-files">
|
|
53
|
+
<p class="{{prefix}}--card__type__data--content-label">{{ dataset.files.headline }}</p>
|
|
54
|
+
{% for item in dataset.files.items %}
|
|
55
|
+
{% include "@components/button/button.twig" with {
|
|
56
|
+
type: "primary",
|
|
57
|
+
size: "small",
|
|
58
|
+
url: item.url,
|
|
59
|
+
label: item.label,
|
|
60
|
+
prefix: prefix
|
|
61
|
+
} only %}
|
|
62
|
+
{% endfor %}
|
|
63
|
+
</div>
|
|
64
|
+
{% endblock %}
|
|
65
|
+
</div>
|
|
66
|
+
{% endif %}
|
|
67
|
+
{% if dataset.links %}
|
|
68
|
+
<div class="{{prefix}}--card--area--links">
|
|
69
|
+
{% block area_links %}
|
|
70
|
+
<div class="{{prefix}}--card__type__data--content-links">
|
|
71
|
+
<p class="{{prefix}}--card__type__data--content-label">{{ dataset.links.headline }}</p>
|
|
72
|
+
{% for item in dataset.links.items %}
|
|
73
|
+
{% include "@components/link/link.twig" with {
|
|
74
|
+
url: item.url,
|
|
75
|
+
label: item.label,
|
|
76
|
+
prefix: prefix
|
|
77
|
+
} only %}
|
|
78
|
+
{% endfor %}
|
|
79
|
+
</div>
|
|
80
|
+
{% endblock %}
|
|
81
|
+
</div>
|
|
46
82
|
{% endif %}
|
|
47
83
|
</div>
|
|
48
84
|
</div>
|
|
@@ -11,33 +11,51 @@ datacard:
|
|
|
11
11
|
preview:
|
|
12
12
|
content:
|
|
13
13
|
items:
|
|
14
|
-
- label: Date
|
|
14
|
+
- label: Date of publication
|
|
15
15
|
copy: 17 March 2022
|
|
16
|
-
- label:
|
|
17
|
-
copy:
|
|
16
|
+
- label: Published by
|
|
17
|
+
copy: "ILO Department of Research"
|
|
18
18
|
files:
|
|
19
|
-
headline: Files
|
|
19
|
+
headline: Files for download
|
|
20
20
|
items:
|
|
21
|
-
- label:
|
|
21
|
+
- label: PDF 3.2 MB
|
|
22
22
|
url: "https://www.ilo.org"
|
|
23
|
-
- label:
|
|
23
|
+
- label: EPUB 5.8 MB
|
|
24
24
|
url: "https://www.ilo.org"
|
|
25
|
-
- label:
|
|
25
|
+
- label: MOBI 2.4 MB
|
|
26
26
|
url: "https://www.ilo.org"
|
|
27
27
|
links:
|
|
28
|
-
headline:
|
|
28
|
+
headline: Also available in
|
|
29
29
|
items:
|
|
30
30
|
- label: English
|
|
31
31
|
url: "https://www.ilo.org/search?q=link"
|
|
32
32
|
- label: Español
|
|
33
33
|
url: "https://www.ilo.org/search?q=hyperlink"
|
|
34
|
+
- label: Dansk
|
|
35
|
+
url: "https://www.ilo.org/search?q=url"
|
|
36
|
+
- label: Deutsch
|
|
37
|
+
url: "https://www.ilo.org/search?q=url"
|
|
34
38
|
- label: Français
|
|
35
39
|
url: "https://www.ilo.org/search?q=url"
|
|
40
|
+
- label: Italiano
|
|
41
|
+
url: "https://www.ilo.org/search?q=url"
|
|
42
|
+
- label: Português
|
|
43
|
+
url: "https://www.ilo.org/search?q=url"
|
|
44
|
+
- label: Русский
|
|
45
|
+
url: "https://www.ilo.org/search?q=url"
|
|
46
|
+
- label: 中文
|
|
47
|
+
url: "https://www.ilo.org/search?q=url"
|
|
48
|
+
- label: العربية
|
|
49
|
+
url: "https://www.ilo.org/search?q=url"
|
|
50
|
+
- label: Ελληνικά
|
|
51
|
+
url: "https://www.ilo.org/search?q=url"
|
|
52
|
+
- label: Nederlands
|
|
53
|
+
url: "https://www.ilo.org/search?q=url"
|
|
36
54
|
eyebrow:
|
|
37
55
|
type: string
|
|
38
56
|
label: Eyebrow
|
|
39
57
|
description: Eyebrow copy
|
|
40
|
-
preview:
|
|
58
|
+
preview: Flagship report
|
|
41
59
|
image:
|
|
42
60
|
type: object
|
|
43
61
|
label: Image
|
|
@@ -46,26 +64,67 @@ datacard:
|
|
|
46
64
|
alt: "Image alt text"
|
|
47
65
|
loading: "lazy"
|
|
48
66
|
url:
|
|
49
|
-
|
|
50
|
-
|
|
51
|
-
- breakpoint: "(min-width: 800px)"
|
|
52
|
-
src: "/images/medium.jpg"
|
|
53
|
-
- breakpoint: "(min-width: 1200px)"
|
|
54
|
-
src: "/images/large.jpg"
|
|
55
|
-
- breakpoint: "(min-width: 1440px)"
|
|
56
|
-
src: "/images/large.jpg"
|
|
67
|
+
- breakpoint: "(min-width: 0px)"
|
|
68
|
+
src: "/images/publication.jpg"
|
|
57
69
|
settings:
|
|
58
70
|
size:
|
|
59
71
|
type: select
|
|
60
72
|
label: size
|
|
61
73
|
description: Sets the size of the card. If not set, the card will appear as `narrow`.
|
|
62
74
|
required: false
|
|
63
|
-
preview:
|
|
75
|
+
preview: narrow
|
|
64
76
|
options:
|
|
65
77
|
narrow: narrow
|
|
66
78
|
wide: wide
|
|
67
79
|
fluid: fluid
|
|
68
|
-
|
|
80
|
+
columns:
|
|
81
|
+
type: select
|
|
82
|
+
label: Columns
|
|
83
|
+
description: Displays the data in one or two columns. If not set, the card will appear as `one`.
|
|
84
|
+
required: false
|
|
85
|
+
preview: one
|
|
86
|
+
options:
|
|
87
|
+
one: one
|
|
88
|
+
two: two
|
|
89
|
+
variants:
|
|
90
|
+
default:
|
|
91
|
+
label: Default
|
|
92
|
+
no_image:
|
|
93
|
+
label: No image
|
|
94
|
+
fields:
|
|
95
|
+
image: false
|
|
96
|
+
two_columns:
|
|
97
|
+
label: Two columns
|
|
98
|
+
settings:
|
|
99
|
+
columns: two
|
|
100
|
+
size: wide
|
|
101
|
+
two_columns_no_image:
|
|
102
|
+
label: Two columns without image
|
|
103
|
+
settings:
|
|
104
|
+
columns: two
|
|
105
|
+
size: wide
|
|
106
|
+
fields:
|
|
107
|
+
image: false
|
|
108
|
+
two_columns_no_links:
|
|
109
|
+
label: Two columns without image or links
|
|
110
|
+
settings:
|
|
111
|
+
columns: two
|
|
112
|
+
size: wide
|
|
113
|
+
fields:
|
|
114
|
+
image: false
|
|
115
|
+
dataset:
|
|
116
|
+
content:
|
|
117
|
+
items:
|
|
118
|
+
- label: Date of publication
|
|
119
|
+
copy: 5 June 2023
|
|
120
|
+
files:
|
|
121
|
+
headline: Files for download
|
|
122
|
+
items:
|
|
123
|
+
- label: PDF 3.2 MB
|
|
124
|
+
url: "https://www.ilo.org"
|
|
125
|
+
- label: EPUB 5.8 MB
|
|
126
|
+
url: "https://www.ilo.org"
|
|
127
|
+
links: false
|
|
69
128
|
|
|
70
129
|
|
|
71
130
|
|
|
@@ -4,7 +4,7 @@
|
|
|
4
4
|
{% if image.url is iterable %}
|
|
5
5
|
<picture>
|
|
6
6
|
{% for img in image.url|reverse %}
|
|
7
|
-
{% if loop.last == false
|
|
7
|
+
{% if loop.length == 1 or loop.last == false %}
|
|
8
8
|
{% if img.breakpoint matches '/^\\d+$/' %}
|
|
9
9
|
<source srcset="{{img.src}}" media="(min-width: {{img.breakpoint}}px)">
|
|
10
10
|
{% else %}
|
|
@@ -12,7 +12,7 @@
|
|
|
12
12
|
{% endif %}
|
|
13
13
|
{% endif %}
|
|
14
14
|
{% endfor %}
|
|
15
|
-
<img class="{{prefix}}--{{class}}--picture" src="{{image|reverse|last.src}}" alt="{{image.alt}}" {% if image.loading %} loading="{{ image.loading }}" {% endif %}>
|
|
15
|
+
<img class="{{prefix}}--{{class}}--picture" src="{{image.url|reverse|last.src}}" alt="{{image.alt}}" {% if image.loading %} loading="{{ image.loading }}" {% endif %}>
|
|
16
16
|
</picture>
|
|
17
17
|
{% else %}
|
|
18
18
|
<picture>
|