@ilo-org/twig 1.3.4 → 1.4.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/dist/components/blockquote/blockquote.component.yml +17 -0
- package/dist/components/blockquote/blockquote.twig +6 -0
- package/dist/components/blockquote/blockquote.wingsuit.yml +17 -0
- package/dist/components/card/card.component.yml +0 -2
- package/dist/components/card/card.wingsuit.yml +0 -2
- package/dist/components/card_data/card_data.component.yml +1 -1
- package/dist/components/card_data/card_data.twig +6 -0
- package/dist/components/card_data/card_data.wingsuit.yml +1 -1
- package/dist/components/card_feature/card_feature.component.yml +1 -1
- package/dist/components/card_feature/card_feature.twig +1 -0
- package/dist/components/card_feature/card_feature.wingsuit.yml +1 -1
- package/dist/components/card_multilink/card_multilink.component.yml +13 -4
- package/dist/components/card_multilink/card_multilink.twig +18 -13
- package/dist/components/card_multilink/card_multilink.wingsuit.yml +13 -4
- package/dist/components/icon/icon.behavior.js +565 -520
- package/dist/components/socialmedia/socialmedia.component.yml +10 -0
- package/dist/components/socialmedia/socialmedia.wingsuit.yml +10 -0
- package/dist/styles/components/blockquote.css +1 -0
- package/dist/styles/components/card.css +1 -1
- package/dist/styles/components/datacard.css +1 -1
- package/dist/styles/components/featurecard.css +1 -1
- package/dist/styles/components/languagetoggle.css +1 -0
- package/dist/styles/components/list.css +1 -1
- package/dist/styles/components/multilinkcard.css +1 -1
- package/dist/styles/components/richtext.css +1 -1
- package/dist/styles/components/socialmedia.css +1 -1
- package/dist/styles/global.css +1 -1
- package/dist/styles/global.css.map +1 -1
- package/dist/styles/index.css +2 -2
- package/dist/styles/index.css.map +1 -1
- package/dist/styles/monorepo.css +2 -2
- package/dist/styles/monorepo.css.map +1 -1
- package/package.json +7 -6
|
@@ -0,0 +1,17 @@
|
|
|
1
|
+
blockquote:
|
|
2
|
+
namespace: Components/Content
|
|
3
|
+
use: "@components/blockquote/blockquote.twig"
|
|
4
|
+
label: Blockquote
|
|
5
|
+
description: The Blockquote component is used to display quoted text with proper attribution, helping to highlight references and citations effectively.
|
|
6
|
+
fields:
|
|
7
|
+
quote:
|
|
8
|
+
type: string
|
|
9
|
+
label: Quote
|
|
10
|
+
description: The main quoted text content.
|
|
11
|
+
preview: "The fundamental ideas that forged the ILO one hundred and three years ago still underpin the global pledge to leave no one behind."
|
|
12
|
+
cite:
|
|
13
|
+
type: string
|
|
14
|
+
label: Citation
|
|
15
|
+
description: The source or author of the quote.
|
|
16
|
+
preview: ILO Director-General Gilbert F. Houngbo
|
|
17
|
+
visibility: storybook
|
|
@@ -0,0 +1,17 @@
|
|
|
1
|
+
blockquote:
|
|
2
|
+
namespace: Components/Content
|
|
3
|
+
use: "@components/blockquote/blockquote.twig"
|
|
4
|
+
label: Blockquote
|
|
5
|
+
description: The Blockquote component is used to display quoted text with proper attribution, helping to highlight references and citations effectively.
|
|
6
|
+
fields:
|
|
7
|
+
quote:
|
|
8
|
+
type: string
|
|
9
|
+
label: Quote
|
|
10
|
+
description: The main quoted text content.
|
|
11
|
+
preview: "The fundamental ideas that forged the ILO one hundred and three years ago still underpin the global pledge to leave no one behind."
|
|
12
|
+
cite:
|
|
13
|
+
type: string
|
|
14
|
+
label: Citation
|
|
15
|
+
description: The source or author of the quote.
|
|
16
|
+
preview: ILO Director-General Gilbert F. Houngbo
|
|
17
|
+
visibility: storybook
|
|
@@ -90,7 +90,7 @@ datacard:
|
|
|
90
90
|
columns:
|
|
91
91
|
type: select
|
|
92
92
|
label: Columns
|
|
93
|
-
description: Displays the data in one or two columns. If not set, the card will appear as `one`.
|
|
93
|
+
description: Displays the data in one or two columns. If not set, the card will appear as `one`. Only applies when size is set to `wide` or `fluid`.
|
|
94
94
|
required: false
|
|
95
95
|
preview: one
|
|
96
96
|
options:
|
|
@@ -1,9 +1,15 @@
|
|
|
1
1
|
{# card_data.twig #}
|
|
2
2
|
|
|
3
|
+
{# Defaults to one column #}
|
|
3
4
|
{% if not columns %}
|
|
4
5
|
{% set columns = "one" %}
|
|
5
6
|
{% endif %}
|
|
6
7
|
|
|
8
|
+
{# size overrides column if it's set to 'narrow' #}
|
|
9
|
+
{% if size == "narrow" %}
|
|
10
|
+
{% set columns = "one" %}
|
|
11
|
+
{% endif %}
|
|
12
|
+
|
|
7
13
|
{# Different layout options to apply depending on if the card has an image
|
|
8
14
|
or if it has links. If it has two columns with image, then image goes on one side
|
|
9
15
|
and content goes on the other. If it has two columns witout image but links, then
|
|
@@ -90,7 +90,7 @@ datacard:
|
|
|
90
90
|
columns:
|
|
91
91
|
type: select
|
|
92
92
|
label: Columns
|
|
93
|
-
description: Displays the data in one or two columns. If not set, the card will appear as `one`.
|
|
93
|
+
description: Displays the data in one or two columns. If not set, the card will appear as `one`. Only applies when size is set to `wide` or `fluid`.
|
|
94
94
|
required: false
|
|
95
95
|
preview: one
|
|
96
96
|
options:
|
|
@@ -26,13 +26,13 @@ multilinkcard:
|
|
|
26
26
|
loading: "lazy"
|
|
27
27
|
url:
|
|
28
28
|
- breakpoint: "(min-width: 0px)"
|
|
29
|
-
src: "
|
|
29
|
+
src: "images/16x9.jpg"
|
|
30
30
|
- breakpoint: "(min-width: 800px)"
|
|
31
|
-
src: "
|
|
31
|
+
src: "images/16x9.jpg"
|
|
32
32
|
- breakpoint: "(min-width: 1200px)"
|
|
33
|
-
src: "
|
|
33
|
+
src: "images/16x9.jpg"
|
|
34
34
|
- breakpoint: "(min-width: 1440px)"
|
|
35
|
-
src: "
|
|
35
|
+
src: "images/16x9.jpg"
|
|
36
36
|
intro:
|
|
37
37
|
type: string
|
|
38
38
|
label: Intro
|
|
@@ -86,6 +86,15 @@ multilinkcard:
|
|
|
86
86
|
narrow: narrow
|
|
87
87
|
wide: wide
|
|
88
88
|
fluid: fluid
|
|
89
|
+
theme:
|
|
90
|
+
type: select
|
|
91
|
+
label: Theme
|
|
92
|
+
description: Sets the theme of the card, either `light` or `soft`. Defaults to `light`.
|
|
93
|
+
required: false
|
|
94
|
+
preview: "light"
|
|
95
|
+
options:
|
|
96
|
+
light: light
|
|
97
|
+
soft: soft
|
|
89
98
|
titleLevel:
|
|
90
99
|
type: select
|
|
91
100
|
label: Title Element
|
|
@@ -1,6 +1,11 @@
|
|
|
1
1
|
{# card_multilink.twig #}
|
|
2
2
|
|
|
3
|
-
|
|
3
|
+
{# Theme defaults to light #}
|
|
4
|
+
{% if not theme %}
|
|
5
|
+
{% set theme = "light" %}
|
|
6
|
+
{% endif %}
|
|
7
|
+
|
|
8
|
+
<div class="ilo--card ilo--card__theme__{{theme}} ilo--card__type__multilink {% if link|length > 0 %} ilo--card__action {% endif %} ilo--card__size__{{size}} {% if isvideo|boolval %} ilo--card__isvideo {% endif %} {% if linklist %} ilo--card__linklist {% endif %} {% if size == "wide" or size == "fluid" %} ilo--card__align__{{alignment}} {% endif %} {% if not image %} ilo--card--no-image {% endif %}">
|
|
4
9
|
{% if link|length > 0 %}
|
|
5
10
|
<a class="ilo--card--link" href="{{link}}" title="{{title}}">
|
|
6
11
|
<span class="ilo--card--link--text">{{title}}</span>
|
|
@@ -8,14 +13,14 @@
|
|
|
8
13
|
{% endif %}
|
|
9
14
|
<div class="ilo--card--wrap">
|
|
10
15
|
{% if image %}
|
|
11
|
-
|
|
12
|
-
|
|
13
|
-
|
|
14
|
-
|
|
15
|
-
|
|
16
|
-
|
|
16
|
+
<div class="ilo--card--image--wrapper">
|
|
17
|
+
{% include "@components/picture/picture.twig" with {
|
|
18
|
+
image: image,
|
|
19
|
+
class: "card"
|
|
20
|
+
}
|
|
21
|
+
%}
|
|
17
22
|
</div>
|
|
18
|
-
|
|
23
|
+
{% endif %}
|
|
19
24
|
<div class="ilo--card--content">
|
|
20
25
|
{% if eyebrow %}
|
|
21
26
|
<p class="ilo--card--eyebrow">{{eyebrow}}</p>
|
|
@@ -26,10 +31,10 @@
|
|
|
26
31
|
{% if image %}
|
|
27
32
|
<div class="ilo--card--image--wrapper">
|
|
28
33
|
{% include "@components/picture/picture.twig" with {
|
|
29
|
-
|
|
30
|
-
|
|
31
|
-
|
|
32
|
-
|
|
34
|
+
image: image,
|
|
35
|
+
class: "card"
|
|
36
|
+
}
|
|
37
|
+
%}
|
|
33
38
|
</div>
|
|
34
39
|
{% endif %}
|
|
35
40
|
{% if intro %}
|
|
@@ -39,7 +44,7 @@
|
|
|
39
44
|
{% include "@components/linklist/linklist.twig" with {
|
|
40
45
|
headline: linklist.headline,
|
|
41
46
|
linkgroup: linklist.linkgroup,
|
|
42
|
-
prefix: prefix
|
|
47
|
+
prefix: prefix,
|
|
43
48
|
} only %}
|
|
44
49
|
{% endif %}
|
|
45
50
|
</div>
|
|
@@ -26,13 +26,13 @@ multilinkcard:
|
|
|
26
26
|
loading: "lazy"
|
|
27
27
|
url:
|
|
28
28
|
- breakpoint: "(min-width: 0px)"
|
|
29
|
-
src: "
|
|
29
|
+
src: "images/16x9.jpg"
|
|
30
30
|
- breakpoint: "(min-width: 800px)"
|
|
31
|
-
src: "
|
|
31
|
+
src: "images/16x9.jpg"
|
|
32
32
|
- breakpoint: "(min-width: 1200px)"
|
|
33
|
-
src: "
|
|
33
|
+
src: "images/16x9.jpg"
|
|
34
34
|
- breakpoint: "(min-width: 1440px)"
|
|
35
|
-
src: "
|
|
35
|
+
src: "images/16x9.jpg"
|
|
36
36
|
intro:
|
|
37
37
|
type: string
|
|
38
38
|
label: Intro
|
|
@@ -86,6 +86,15 @@ multilinkcard:
|
|
|
86
86
|
narrow: narrow
|
|
87
87
|
wide: wide
|
|
88
88
|
fluid: fluid
|
|
89
|
+
theme:
|
|
90
|
+
type: select
|
|
91
|
+
label: Theme
|
|
92
|
+
description: Sets the theme of the card, either `light` or `soft`. Defaults to `light`.
|
|
93
|
+
required: false
|
|
94
|
+
preview: "light"
|
|
95
|
+
options:
|
|
96
|
+
light: light
|
|
97
|
+
soft: soft
|
|
89
98
|
titleLevel:
|
|
90
99
|
type: select
|
|
91
100
|
label: Title Element
|