@ilo-org/twig 0.2.2 → 0.2.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/.turbo/turbo-build.log +14063 -14063
- package/CHANGELOG.md +29 -0
- package/package.json +5 -5
- package/src/patterns/components/callout/callout.twig +3 -3
- package/src/patterns/components/callout/callout.wingsuit.yml +18 -18
- package/src/patterns/components/card/card.twig +5 -5
- package/src/patterns/components/card/card.wingsuit.yml +32 -66
- package/src/patterns/components/hero/hero.twig +7 -1
- package/src/patterns/components/hero/hero.wingsuit.yml +18 -0
- package/src/patterns/components/navigation/navigation.js +193 -16
- package/src/patterns/components/tags/tag.twig +6 -0
- package/src/patterns/components/tags/tags.wingsuit.yml +2 -1
package/CHANGELOG.md
CHANGED
|
@@ -1,5 +1,34 @@
|
|
|
1
1
|
# @ilo-org/twig
|
|
2
2
|
|
|
3
|
+
## 0.2.4
|
|
4
|
+
|
|
5
|
+
### Patch Changes
|
|
6
|
+
|
|
7
|
+
- 48e7a4ada: - Hero: Breadcrumb add in
|
|
8
|
+
- Cards: Video icon for feature and external link option
|
|
9
|
+
- 2bfdfd356: Fixes to Hero, Cards components
|
|
10
|
+
- Updated dependencies [48e7a4ada]
|
|
11
|
+
- Updated dependencies [2bfdfd356]
|
|
12
|
+
- @ilo-org/icons@0.1.9
|
|
13
|
+
- @ilo-org/styles@0.1.9
|
|
14
|
+
- @ilo-org/themes@0.1.9
|
|
15
|
+
- @ilo-org/utils@0.0.5
|
|
16
|
+
|
|
17
|
+
## 0.2.3
|
|
18
|
+
|
|
19
|
+
### Patch Changes
|
|
20
|
+
|
|
21
|
+
- 069cd8eaf: FIxes to cards
|
|
22
|
+
- a76395618: ESC exits out of toggle menus in the nav
|
|
23
|
+
- 8cd74234c: Bugfixes to Tag, Tooltip, Callout, Checkbox, LinkList
|
|
24
|
+
- Updated dependencies [069cd8eaf]
|
|
25
|
+
- Updated dependencies [a76395618]
|
|
26
|
+
- Updated dependencies [8cd74234c]
|
|
27
|
+
- @ilo-org/styles@0.1.8
|
|
28
|
+
- @ilo-org/themes@0.1.8
|
|
29
|
+
- @ilo-org/icons@0.1.8
|
|
30
|
+
- @ilo-org/utils@0.0.4
|
|
31
|
+
|
|
3
32
|
## 0.2.2
|
|
4
33
|
|
|
5
34
|
### Patch Changes
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@ilo-org/twig",
|
|
3
|
-
"version": "0.2.
|
|
3
|
+
"version": "0.2.4",
|
|
4
4
|
"license": "Apache-2.0",
|
|
5
5
|
"description": "Twig components for the ILO's Design System",
|
|
6
6
|
"main": "",
|
|
@@ -21,10 +21,10 @@
|
|
|
21
21
|
],
|
|
22
22
|
"dependencies": {
|
|
23
23
|
"@ilo-org/fonts": "0.0.2",
|
|
24
|
-
"@ilo-org/icons": "0.1.
|
|
25
|
-
"@ilo-org/styles": "0.1.
|
|
26
|
-
"@ilo-org/themes": "0.1.
|
|
27
|
-
"@ilo-org/utils": "0.0.
|
|
24
|
+
"@ilo-org/icons": "0.1.9",
|
|
25
|
+
"@ilo-org/styles": "0.1.9",
|
|
26
|
+
"@ilo-org/themes": "0.1.9",
|
|
27
|
+
"@ilo-org/utils": "0.0.5",
|
|
28
28
|
"@wingsuit-designsystem/preset-scss": "^1.2.3",
|
|
29
29
|
"video.js": "^7.19.2"
|
|
30
30
|
},
|
|
@@ -1,14 +1,14 @@
|
|
|
1
1
|
{#
|
|
2
2
|
CALLOUT COMPONENT
|
|
3
3
|
#}
|
|
4
|
-
<div class="{{prefix}}--callout {{prefix}}--callout--{{alert}} {% if isOpen %} {{prefix}}--callout--open {% endif %} {% if isCollapsible %} {{prefix}}--callout--collapse {% endif %}" data-loadcomponent="Callout" >
|
|
4
|
+
<div class="{{prefix}}--callout {{prefix}}--callout--{{alert}} {% if isCollapsible == "true" and isOpen == "true" %} {{prefix}}--callout--open {% endif %} {% if isCollapsible == "true" %} {{prefix}}--callout--collapse {% endif %}" data-loadcomponent="Callout" >
|
|
5
5
|
<div class="{{prefix}}--callout--sidebar">
|
|
6
6
|
<span class="{{prefix}}--callout--icon icon icon--{{alert}}"></span>
|
|
7
7
|
</div>
|
|
8
8
|
<div class="{{prefix}}--callout--content">
|
|
9
9
|
<div class="{{prefix}}--callout--header">
|
|
10
10
|
<h5 class="{{prefix}}--callout--title">{{ title }}</h5>
|
|
11
|
-
{% if isCollapsible %}
|
|
11
|
+
{% if isCollapsible == "true" %}
|
|
12
12
|
<button class="{{prefix}}--callout--toggle" type="button" data-open="{{ toggleOpenLabel }}" data-closed="{{ toggleClosedLabel }}">
|
|
13
13
|
<span class="{{prefix}}--callout--button-text">{% if isOpen %}{{ toggleOpenLabel }}{% else %}{{ toggleClosedLabel }}{% endif %}</span>
|
|
14
14
|
<span class="{{prefix}}--callout--toggle--icon" role="presentation"></span>
|
|
@@ -27,4 +27,4 @@
|
|
|
27
27
|
</div>
|
|
28
28
|
{% endif %}
|
|
29
29
|
</div>
|
|
30
|
-
</div>
|
|
30
|
+
</div>
|
|
@@ -15,24 +15,6 @@ callout:
|
|
|
15
15
|
description: The callout's content
|
|
16
16
|
preview:
|
|
17
17
|
faker: lorem.word
|
|
18
|
-
isCollapsible:
|
|
19
|
-
type: select
|
|
20
|
-
label: Is Collapsible
|
|
21
|
-
description: Whether or not the callout is collapsible
|
|
22
|
-
required: false
|
|
23
|
-
options:
|
|
24
|
-
true: True
|
|
25
|
-
false: False
|
|
26
|
-
preview: false
|
|
27
|
-
isOpen:
|
|
28
|
-
type: select
|
|
29
|
-
label: Is Open
|
|
30
|
-
description: Whether or not a collapsible callout is open
|
|
31
|
-
required: false
|
|
32
|
-
options:
|
|
33
|
-
true: True
|
|
34
|
-
false: False
|
|
35
|
-
preview: true
|
|
36
18
|
title:
|
|
37
19
|
type: string
|
|
38
20
|
label: Notification Title
|
|
@@ -63,4 +45,22 @@ callout:
|
|
|
63
45
|
success: Success
|
|
64
46
|
warning: Warning
|
|
65
47
|
preview: 'info'
|
|
48
|
+
isCollapsible:
|
|
49
|
+
type: select
|
|
50
|
+
label: Is Collapsible?
|
|
51
|
+
description: Whether or not the callout is collapsible
|
|
52
|
+
required: true
|
|
53
|
+
options:
|
|
54
|
+
true: True
|
|
55
|
+
false: False
|
|
56
|
+
preview: false
|
|
57
|
+
isOpen:
|
|
58
|
+
type: select
|
|
59
|
+
label: Is Open
|
|
60
|
+
description: Whether or not a collapsible callout is open on page load
|
|
61
|
+
required: false
|
|
62
|
+
options:
|
|
63
|
+
true: True
|
|
64
|
+
false: False
|
|
65
|
+
preview: true
|
|
66
66
|
visibility: storybook
|
|
@@ -1,11 +1,11 @@
|
|
|
1
1
|
{#
|
|
2
2
|
CARD COMPONENT
|
|
3
3
|
#}
|
|
4
|
-
<div class="{{prefix}}--card {{prefix}}--card--{{theme}} {{prefix}}--card--{{variant}}{% if cornercut %} {{prefix}}--card--{{cornercut}}{% endif %}{% if color %} {{prefix}}--card--{{color}}{% endif %}{% if alignment %} {{prefix}}--card--{{alignment}}{% endif %}{% if link %} {{prefix}}--card--action{% endif %}{% if type %} {{prefix}}--card--{{type}}{% endif %}{% if size %} {{prefix}}--card--{{size}}{% endif %}">
|
|
4
|
+
<div class="{{prefix}}--card {{prefix}}--card--{{theme}} {{prefix}}--card--{{variant}}{% if cornercut %} {{prefix}}--card--{{cornercut}}{% endif %}{% if color %} {{prefix}}--card--{{color}}{% endif %}{% if alignment %} {{prefix}}--card--{{alignment}}{% endif %}{% if link %} {{prefix}}--card--action{% endif %}{% if type %} {{prefix}}--card--{{type}}{% endif %}{% if size %} {{prefix}}--card--{{size}}{% endif %}{% if isvideo %} {{prefix}}--card--isvideo{% endif %}{% if linklist is defined %} {{prefix}}--card--linklist{% endif %}">
|
|
5
5
|
{% if type == "" %}
|
|
6
6
|
{% set type = variant %}
|
|
7
7
|
{% endif %}
|
|
8
|
-
{% if link %}
|
|
8
|
+
{% if link and type != 'data' and type != 'factlist' and type != 'stat' %}
|
|
9
9
|
<a class="{{prefix}}--card--link" href="{{link}}" title="{{title}}"><span class="{{prefix}}--card--link--text">{{title}}</span></a>
|
|
10
10
|
{% endif %}
|
|
11
11
|
<div class="{{prefix}}--card--wrap">
|
|
@@ -25,7 +25,7 @@
|
|
|
25
25
|
{% if intro %}
|
|
26
26
|
<p class="{{prefix}}--card--intro">{{intro}}</p>
|
|
27
27
|
{% endif %}
|
|
28
|
-
{% if date %}
|
|
28
|
+
{% if date and type != "stat" and type != "data" and type != "graphicpromo" and type != "stat" and type != "factlist" %}
|
|
29
29
|
<time class="{{prefix}}--card--date" datetime="{{date.unix}}">{{date.human}}</time>
|
|
30
30
|
{% endif %}
|
|
31
31
|
{% if eventdetails %}
|
|
@@ -67,7 +67,7 @@
|
|
|
67
67
|
{% include "@components/linklist/linklist.twig" with {
|
|
68
68
|
headline: linklist.headline,
|
|
69
69
|
linkgroup: linklist.linkgroup,
|
|
70
|
-
prefix: prefix
|
|
70
|
+
prefix: prefix
|
|
71
71
|
} only %}
|
|
72
72
|
{% endif %}
|
|
73
73
|
{% if dataset %}
|
|
@@ -92,7 +92,7 @@
|
|
|
92
92
|
{% include "@components/link/link.twig" with {
|
|
93
93
|
url: item.url,
|
|
94
94
|
label: item.label,
|
|
95
|
-
prefix: prefix
|
|
95
|
+
prefix: prefix
|
|
96
96
|
} %} <span> </span>
|
|
97
97
|
{% endfor %}
|
|
98
98
|
</div>
|
|
@@ -8,6 +8,11 @@ card:
|
|
|
8
8
|
label: Title
|
|
9
9
|
description: Title field
|
|
10
10
|
preview: Lorem ipsum
|
|
11
|
+
isvideo:
|
|
12
|
+
type: string
|
|
13
|
+
label: Is a Video
|
|
14
|
+
description: Whether the card should display a video icon
|
|
15
|
+
preview: False
|
|
11
16
|
intro:
|
|
12
17
|
type: string
|
|
13
18
|
label: Intro
|
|
@@ -65,6 +70,11 @@ card:
|
|
|
65
70
|
label: Link List
|
|
66
71
|
description: Multi-link list
|
|
67
72
|
preview:
|
|
73
|
+
externallink:
|
|
74
|
+
type: object
|
|
75
|
+
label: External Link
|
|
76
|
+
description: External link
|
|
77
|
+
preview:
|
|
68
78
|
dataset:
|
|
69
79
|
type: object
|
|
70
80
|
label: Data set
|
|
@@ -119,7 +129,6 @@ card:
|
|
|
119
129
|
description: The graphic Card
|
|
120
130
|
fields:
|
|
121
131
|
title: "Brief title text - ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod"
|
|
122
|
-
intro: ""
|
|
123
132
|
eyebrow: Eyebrow title
|
|
124
133
|
date:
|
|
125
134
|
human: 20 September 2022
|
|
@@ -128,13 +137,11 @@ card:
|
|
|
128
137
|
profile:
|
|
129
138
|
avatar: "https://placekitten.com/128/128"
|
|
130
139
|
description: "Firstname Lastname is the Senior Media Strategist. He has been with ILO for eight years."
|
|
131
|
-
link:
|
|
140
|
+
link:
|
|
132
141
|
- label: "Optional Link"
|
|
133
142
|
url: "https://www.google.com"
|
|
134
143
|
name: "Firstname Lastname"
|
|
135
144
|
role: "Senior Media Strategist"
|
|
136
|
-
cta: ""
|
|
137
|
-
eventdetails: ""
|
|
138
145
|
stat:
|
|
139
146
|
label: Stat Card
|
|
140
147
|
description: The stat Card
|
|
@@ -143,17 +150,8 @@ card:
|
|
|
143
150
|
cornercut: cornercut
|
|
144
151
|
fields:
|
|
145
152
|
title: "Date headline"
|
|
146
|
-
image: ""
|
|
147
153
|
intro: "Data title - Lorem ipsum dolor sit amet consectetur"
|
|
148
|
-
|
|
149
|
-
date:
|
|
150
|
-
human: ""
|
|
151
|
-
unix: 1670389200
|
|
152
|
-
link: ""
|
|
153
|
-
profile: ""
|
|
154
|
-
eventdetails: ""
|
|
155
|
-
cta: ""
|
|
156
|
-
source:
|
|
154
|
+
source:
|
|
157
155
|
label: "Source: lorem ipsum dolor sit amet, 2020"
|
|
158
156
|
url: "https://www.google.com/search?q=stat"
|
|
159
157
|
multilink:
|
|
@@ -165,21 +163,9 @@ card:
|
|
|
165
163
|
title: "Multi-link card - right aligned image, wide option"
|
|
166
164
|
image: "https://placekitten.com/475/267"
|
|
167
165
|
intro: "Lorem ipsum dolor sit amet consectetur adipiscing elit. Lobortis egestas ipsum dolor sit amet consectetur adipiscing elit. Lobortis egestas ipsum dolor sit amet consectetur adipiscing elit. Lobortis egestas lacus."
|
|
168
|
-
eyebrow: ""
|
|
169
|
-
date:
|
|
170
|
-
human: ""
|
|
171
|
-
unix: 1670389200
|
|
172
|
-
link: ""
|
|
173
|
-
profile: ""
|
|
174
|
-
eventdetails: ""
|
|
175
|
-
cta: ""
|
|
176
|
-
source: ""
|
|
177
|
-
dataset: ""
|
|
178
166
|
linklist:
|
|
179
|
-
headline: ""
|
|
180
167
|
linkgroup:
|
|
181
|
-
-
|
|
182
|
-
links:
|
|
168
|
+
- links:
|
|
183
169
|
- label: Link One
|
|
184
170
|
url: 'http://www.google.com'
|
|
185
171
|
- label: Link Two
|
|
@@ -191,32 +177,33 @@ card:
|
|
|
191
177
|
description: The graphic promo Card
|
|
192
178
|
fields:
|
|
193
179
|
title: "Brief title text - ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod"
|
|
194
|
-
image: ""
|
|
195
180
|
intro: "We advance social justice and promote decent work by setting labour standards, developing policies and devising programmes."
|
|
196
|
-
eyebrow: ""
|
|
197
|
-
date:
|
|
198
|
-
human: ""
|
|
199
|
-
unix: 1670389200
|
|
200
181
|
link: "https://www.google.com/search?q=graphic-promo"
|
|
201
|
-
|
|
202
|
-
eventdetails: ""
|
|
203
|
-
cta:
|
|
182
|
+
cta:
|
|
204
183
|
label: "Discover our unique mission"
|
|
205
184
|
url: "https://www.google.com/search?q=button"
|
|
206
185
|
feature:
|
|
207
186
|
label: Feature Card
|
|
208
187
|
description: The Feature Card
|
|
209
188
|
fields:
|
|
189
|
+
isvideo: true
|
|
210
190
|
title: "Vertical info card descriptive headline text"
|
|
211
|
-
intro: ""
|
|
212
191
|
eyebrow: Eyebrow title
|
|
213
192
|
date:
|
|
214
193
|
human: Date
|
|
215
194
|
unix: 1670389200
|
|
216
195
|
link: "https://www.google.com/search?q=graphic"
|
|
217
196
|
image: "https://placekitten.com/412/232"
|
|
218
|
-
|
|
219
|
-
|
|
197
|
+
linklist:
|
|
198
|
+
headline: ""
|
|
199
|
+
linkgroup:
|
|
200
|
+
- headline: ""
|
|
201
|
+
links:
|
|
202
|
+
- label: Link One
|
|
203
|
+
url: 'http://www.google.com'
|
|
204
|
+
# externallink:
|
|
205
|
+
# label: Link One
|
|
206
|
+
# url: 'https://www.google.com'
|
|
220
207
|
detail:
|
|
221
208
|
label: Detail Card
|
|
222
209
|
description: The Detail Card
|
|
@@ -237,22 +224,11 @@ card:
|
|
|
237
224
|
description: The Fact List Card
|
|
238
225
|
fields:
|
|
239
226
|
title: "Title of fast fact list"
|
|
240
|
-
|
|
241
|
-
eyebrow: ""
|
|
242
|
-
date:
|
|
243
|
-
human: ""
|
|
244
|
-
unix: 1670389200
|
|
245
|
-
link: ""
|
|
246
|
-
image: ""
|
|
247
|
-
profile: ""
|
|
248
|
-
eventdetails: ""
|
|
249
|
-
cta: ""
|
|
250
|
-
list:
|
|
251
|
-
title: ""
|
|
227
|
+
list:
|
|
252
228
|
settings:
|
|
253
229
|
- ordered: unordered
|
|
254
230
|
- alignment: default
|
|
255
|
-
items:
|
|
231
|
+
items:
|
|
256
232
|
- content: "Wipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor."
|
|
257
233
|
id: "list1"
|
|
258
234
|
- content: "Nut labore et dolore magna sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua."
|
|
@@ -261,27 +237,17 @@ card:
|
|
|
261
237
|
label: Data Card
|
|
262
238
|
description: The Data Card
|
|
263
239
|
fields:
|
|
264
|
-
title: ""
|
|
265
|
-
image: "https://placekitten.com/205/179"
|
|
266
|
-
intro: ""
|
|
267
240
|
eyebrow: "Event details"
|
|
268
|
-
|
|
269
|
-
|
|
270
|
-
|
|
271
|
-
link: ""
|
|
272
|
-
profile: ""
|
|
273
|
-
eventdetails: ""
|
|
274
|
-
cta: ""
|
|
275
|
-
dataset:
|
|
276
|
-
content:
|
|
277
|
-
items:
|
|
241
|
+
dataset:
|
|
242
|
+
content:
|
|
243
|
+
items:
|
|
278
244
|
- label: Date
|
|
279
245
|
copy: Publication date
|
|
280
246
|
- label: Event type
|
|
281
247
|
copy: Event location
|
|
282
248
|
files:
|
|
283
249
|
headline: Files
|
|
284
|
-
items:
|
|
250
|
+
items:
|
|
285
251
|
- label: File/size MB 1
|
|
286
252
|
url: "https://www.google.com/search?q=file1"
|
|
287
253
|
- label: File/size MB 2
|
|
@@ -290,7 +256,7 @@ card:
|
|
|
290
256
|
url: "https://www.google.com/search?q=file3"
|
|
291
257
|
links:
|
|
292
258
|
headline: Languages
|
|
293
|
-
items:
|
|
259
|
+
items:
|
|
294
260
|
- label: Language link 1
|
|
295
261
|
url: "https://www.google.com/search?q=link"
|
|
296
262
|
- label: Language link 2
|
|
@@ -2,7 +2,13 @@
|
|
|
2
2
|
HERO COMPONENT
|
|
3
3
|
#}
|
|
4
4
|
<div class="{{prefix}}--hero {{prefix}}--hero--{{theme}} {{prefix}}--hero--{{types}} {% if image %}{{prefix}}--hero--image{% endif %}">
|
|
5
|
-
|
|
5
|
+
{% if breadcrumb is defined %}
|
|
6
|
+
{% include "@components/breadcrumb/breadcrumb.twig" with {
|
|
7
|
+
home: breadcrumb.home,
|
|
8
|
+
links: breadcrumb.links,
|
|
9
|
+
prefix: prefix,
|
|
10
|
+
} only %}
|
|
11
|
+
{% endif %}
|
|
6
12
|
{% if not image %}
|
|
7
13
|
{% else %}
|
|
8
14
|
{% include "@components/image/image.twig" with {
|
|
@@ -3,6 +3,24 @@ hero:
|
|
|
3
3
|
label: Hero
|
|
4
4
|
description: The Hero presents an image banner.
|
|
5
5
|
fields:
|
|
6
|
+
breadcrumb:
|
|
7
|
+
label: breadcrumb
|
|
8
|
+
type: object
|
|
9
|
+
preview:
|
|
10
|
+
home:
|
|
11
|
+
label: "Home"
|
|
12
|
+
url: "/"
|
|
13
|
+
links:
|
|
14
|
+
- label: "Link One"
|
|
15
|
+
url: "/linkone"
|
|
16
|
+
- label: "Link Two"
|
|
17
|
+
url: "/linktwo"
|
|
18
|
+
- label: "Link Three"
|
|
19
|
+
url: "/linkthree"
|
|
20
|
+
- label: "Link Four"
|
|
21
|
+
url: "/linkfour"
|
|
22
|
+
- label: "Link Five"
|
|
23
|
+
url: "/linkfive"
|
|
6
24
|
image:
|
|
7
25
|
type: object
|
|
8
26
|
preview:
|