@ilo-org/twig 1.4.0 → 1.6.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/button/button.component.yml +7 -2
- package/dist/components/button/button.twig +25 -10
- package/dist/components/button/button.wingsuit.yml +7 -2
- package/dist/components/card_detail/card_detail.component.yml +10 -7
- package/dist/components/card_detail/card_detail.twig +11 -6
- package/dist/components/card_detail/card_detail.wingsuit.yml +10 -7
- package/dist/components/card_feature/card_feature.twig +16 -5
- package/dist/components/card_multilink/card_multilink.twig +1 -1
- package/dist/components/card_promo/card_promo.twig +1 -1
- package/dist/components/card_score/card_score.component.yml +102 -0
- package/dist/components/card_score/card_score.twig +71 -0
- package/dist/components/card_score/card_score.wingsuit.yml +102 -0
- package/dist/components/card_text/card_text.component.yml +1 -2
- package/dist/components/card_text/card_text.twig +3 -7
- package/dist/components/card_text/card_text.wingsuit.yml +1 -2
- package/dist/components/icon/icon.behavior.js +1 -1
- package/dist/components/icon/icon.twig +1 -1
- package/dist/components/languagetoggle/languagetoggle.behavior.js +8 -0
- package/dist/components/languagetoggle/languagetoggle.component.yml +43 -0
- package/dist/components/languagetoggle/languagetoggle.twig +22 -0
- package/dist/components/languagetoggle/languagetoggle.wingsuit.yml +43 -0
- package/dist/components/profile/profile.component.yml +10 -0
- package/dist/components/profile/profile.twig +29 -17
- package/dist/components/profile/profile.wingsuit.yml +10 -0
- package/dist/components/status/status.component.yml +33 -0
- package/dist/components/status/status.twig +8 -0
- package/dist/components/status/status.wingsuit.yml +33 -0
- package/dist/components/tag/tag.component.yml +56 -0
- package/dist/components/tag/tag.twig +35 -0
- package/dist/components/tag/tag.wingsuit.yml +56 -0
- package/dist/components/tags/tags.component.yml +21 -13
- package/dist/components/tags/tags.twig +12 -7
- package/dist/components/tags/tags.wingsuit.yml +21 -13
- package/dist/styles/components/button.css +1 -1
- package/dist/styles/components/card.css +1 -1
- package/dist/styles/components/datacard.css +1 -1
- package/dist/styles/components/detailcard.css +1 -1
- package/dist/styles/components/featurecard.css +1 -1
- package/dist/styles/components/languagetoggle.css +1 -1
- package/dist/styles/components/multilinkcard.css +1 -1
- package/dist/styles/components/profile.css +1 -1
- package/dist/styles/components/scorecard.css +1 -0
- package/dist/styles/components/status.css +1 -0
- package/dist/styles/components/tag.css +1 -1
- package/dist/styles/components/textcard.css +1 -1
- package/dist/styles/components/video.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 +4 -4
- package/dist/components/tags/tag.behavior.js +0 -10
- package/dist/components/tags/tag.component.yml +0 -38
- package/dist/components/tags/tag.twig +0 -30
- package/dist/components/tags/tag.wingsuit.yml +0 -38
|
@@ -0,0 +1,43 @@
|
|
|
1
|
+
languagetoggle:
|
|
2
|
+
namespace: Components/Navigation
|
|
3
|
+
use: "@components/languagetoggle/languagetoggle.twig"
|
|
4
|
+
label: Language Toggle
|
|
5
|
+
description: The Language Toggle allows users to switch between different language versions of a website.
|
|
6
|
+
fields:
|
|
7
|
+
language:
|
|
8
|
+
label: Language
|
|
9
|
+
type: string
|
|
10
|
+
description: The current language selected
|
|
11
|
+
preview: English
|
|
12
|
+
links:
|
|
13
|
+
type: object
|
|
14
|
+
label: Links
|
|
15
|
+
description: The context menu item items.
|
|
16
|
+
preview:
|
|
17
|
+
- label: English
|
|
18
|
+
url: "http://www.ilo.org"
|
|
19
|
+
- label: français
|
|
20
|
+
url: "http://www.ilo.org/fr"
|
|
21
|
+
- label: español
|
|
22
|
+
url: "http://www.ilo.org/es"
|
|
23
|
+
- label: italiano
|
|
24
|
+
url: "http://www.ilo.org/it"
|
|
25
|
+
settings:
|
|
26
|
+
hideicon:
|
|
27
|
+
type: boolean
|
|
28
|
+
label: Hide Icon
|
|
29
|
+
description: Hides the icon
|
|
30
|
+
required: false
|
|
31
|
+
preview: false
|
|
32
|
+
default: false
|
|
33
|
+
theme:
|
|
34
|
+
type: select
|
|
35
|
+
label: Theme
|
|
36
|
+
description: Sets the Language Card to appear as either light or dark.
|
|
37
|
+
preview: "dark"
|
|
38
|
+
default: "light"
|
|
39
|
+
required: false
|
|
40
|
+
options:
|
|
41
|
+
dark: Dark
|
|
42
|
+
light: Light
|
|
43
|
+
visibility: storybook
|
|
@@ -0,0 +1,22 @@
|
|
|
1
|
+
{# language-toggle.twig #}
|
|
2
|
+
|
|
3
|
+
{% set hideicon = hideicon|default(false) %}
|
|
4
|
+
{% set theme = theme|default("light") %}
|
|
5
|
+
|
|
6
|
+
<div class="{{ prefix }}--language-toggle {{ prefix }}--language-toggle__theme__{{ theme }}" data-prefix="ilo" data-loadcomponent="LanguageToggle">
|
|
7
|
+
<button class="{{ prefix }}--language-toggle--container" aria-expanded="false" aria-controls="ilo--language-toggle--context-menu">
|
|
8
|
+
{% if not hideicon %}
|
|
9
|
+
<span class="{{ prefix }}--language-toggle--icon"></span>
|
|
10
|
+
{% endif %}
|
|
11
|
+
<span class="{{ prefix }}--language-toggle--action">{{ language }}</span>
|
|
12
|
+
<span class="{{ prefix }}--language-toggle--arrow"></span>
|
|
13
|
+
</button>
|
|
14
|
+
<div role="menu" class="{{ prefix }}--language-toggle--context-menu" id="ilo--language-toggle--context-menu" hidden>
|
|
15
|
+
{% if links %}
|
|
16
|
+
{% include "@components/contextmenu/contextmenu.twig" with {
|
|
17
|
+
links: links,
|
|
18
|
+
prefix: prefix,
|
|
19
|
+
} only %}
|
|
20
|
+
{% endif %}
|
|
21
|
+
</div>
|
|
22
|
+
</div>
|
|
@@ -0,0 +1,43 @@
|
|
|
1
|
+
languagetoggle:
|
|
2
|
+
namespace: Components/Navigation
|
|
3
|
+
use: "@components/languagetoggle/languagetoggle.twig"
|
|
4
|
+
label: Language Toggle
|
|
5
|
+
description: The Language Toggle allows users to switch between different language versions of a website.
|
|
6
|
+
fields:
|
|
7
|
+
language:
|
|
8
|
+
label: Language
|
|
9
|
+
type: string
|
|
10
|
+
description: The current language selected
|
|
11
|
+
preview: English
|
|
12
|
+
links:
|
|
13
|
+
type: object
|
|
14
|
+
label: Links
|
|
15
|
+
description: The context menu item items.
|
|
16
|
+
preview:
|
|
17
|
+
- label: English
|
|
18
|
+
url: "http://www.ilo.org"
|
|
19
|
+
- label: français
|
|
20
|
+
url: "http://www.ilo.org/fr"
|
|
21
|
+
- label: español
|
|
22
|
+
url: "http://www.ilo.org/es"
|
|
23
|
+
- label: italiano
|
|
24
|
+
url: "http://www.ilo.org/it"
|
|
25
|
+
settings:
|
|
26
|
+
hideicon:
|
|
27
|
+
type: boolean
|
|
28
|
+
label: Hide Icon
|
|
29
|
+
description: Hides the icon
|
|
30
|
+
required: false
|
|
31
|
+
preview: false
|
|
32
|
+
default: false
|
|
33
|
+
theme:
|
|
34
|
+
type: select
|
|
35
|
+
label: Theme
|
|
36
|
+
description: Sets the Language Card to appear as either light or dark.
|
|
37
|
+
preview: "dark"
|
|
38
|
+
default: "light"
|
|
39
|
+
required: false
|
|
40
|
+
options:
|
|
41
|
+
dark: Dark
|
|
42
|
+
light: Light
|
|
43
|
+
visibility: storybook
|
|
@@ -43,4 +43,14 @@ profile:
|
|
|
43
43
|
light: Light
|
|
44
44
|
dark: Dark
|
|
45
45
|
preview: "light"
|
|
46
|
+
size:
|
|
47
|
+
type: select
|
|
48
|
+
label: Size
|
|
49
|
+
description: The size of the profile
|
|
50
|
+
required: false
|
|
51
|
+
preview: "large"
|
|
52
|
+
options:
|
|
53
|
+
small: Small
|
|
54
|
+
large: Large
|
|
55
|
+
|
|
46
56
|
visibility: storybook
|
|
@@ -5,22 +5,34 @@
|
|
|
5
5
|
{% if avatar %}
|
|
6
6
|
<img class="ilo--profile--avatar" src="{{avatar}}" alt="{{alt|default(defaultAlt)}}">
|
|
7
7
|
{% endif %}
|
|
8
|
-
|
|
9
|
-
|
|
10
|
-
|
|
11
|
-
|
|
12
|
-
|
|
8
|
+
{% if size == "small" %}
|
|
9
|
+
<figcaption class="ilo--profile--figcaption--content">
|
|
10
|
+
<div class="ilo--profile--name">{{name}}</div>
|
|
11
|
+
</figcaption>
|
|
12
|
+
{% endif %}
|
|
13
|
+
{% if size == "large" %}
|
|
14
|
+
<figcaption>
|
|
15
|
+
<div class="ilo--profile--figcaption--content">
|
|
16
|
+
<div class="ilo--profile--name">{{name}}</div>
|
|
17
|
+
{% if role %}
|
|
18
|
+
<div class="ilo--profile--role">{{role}}</div>
|
|
19
|
+
{% endif %}
|
|
20
|
+
</div>
|
|
21
|
+
</figcaption>
|
|
22
|
+
{% if description %}
|
|
23
|
+
<p class="ilo--profile--description">{{description}}</p>
|
|
13
24
|
{% endif %}
|
|
14
|
-
|
|
15
|
-
|
|
16
|
-
|
|
17
|
-
|
|
18
|
-
|
|
19
|
-
|
|
20
|
-
|
|
21
|
-
|
|
22
|
-
|
|
23
|
-
|
|
24
|
-
|
|
25
|
-
|
|
25
|
+
{% if link and link.url and link.label %}
|
|
26
|
+
<div class="ilo--profile--link">
|
|
27
|
+
<a href={{link.url}} target="__blank" rel="noopener noreferrer">
|
|
28
|
+
<span class="ilo--profile--link--label">{{link.label}}</span>
|
|
29
|
+
{% include "@components/icon/icon.twig" with {
|
|
30
|
+
name: "chevron_right",
|
|
31
|
+
size: 24,
|
|
32
|
+
prefix: prefix
|
|
33
|
+
} %}
|
|
34
|
+
</a>
|
|
35
|
+
</div>
|
|
36
|
+
{% endif %}
|
|
37
|
+
{% endif %}
|
|
26
38
|
</figure>
|
|
@@ -43,4 +43,14 @@ profile:
|
|
|
43
43
|
light: Light
|
|
44
44
|
dark: Dark
|
|
45
45
|
preview: "light"
|
|
46
|
+
size:
|
|
47
|
+
type: select
|
|
48
|
+
label: Size
|
|
49
|
+
description: The size of the profile
|
|
50
|
+
required: false
|
|
51
|
+
preview: "large"
|
|
52
|
+
options:
|
|
53
|
+
small: Small
|
|
54
|
+
large: Large
|
|
55
|
+
|
|
46
56
|
visibility: storybook
|
|
@@ -0,0 +1,33 @@
|
|
|
1
|
+
status:
|
|
2
|
+
namespace: Components/User Interface
|
|
3
|
+
use: "@components/status/status.twig"
|
|
4
|
+
label: Status
|
|
5
|
+
description: A component for showing the status of an event or changing item of content.
|
|
6
|
+
fields:
|
|
7
|
+
content:
|
|
8
|
+
type: string
|
|
9
|
+
label: Content
|
|
10
|
+
description: The text content of the tag.
|
|
11
|
+
preview: Event status
|
|
12
|
+
required: true
|
|
13
|
+
elementId:
|
|
14
|
+
type: string
|
|
15
|
+
label: ElementId
|
|
16
|
+
description: An `id` attribute that will be passed directly to the underlying HTML element.
|
|
17
|
+
preview: active
|
|
18
|
+
required: false
|
|
19
|
+
settings:
|
|
20
|
+
statusType:
|
|
21
|
+
type: select
|
|
22
|
+
label: StatusType
|
|
23
|
+
description: The type of status to display
|
|
24
|
+
required: false
|
|
25
|
+
default: active
|
|
26
|
+
options:
|
|
27
|
+
active: Active
|
|
28
|
+
info: Info
|
|
29
|
+
alert: Alert
|
|
30
|
+
subtle: Subtle Alert
|
|
31
|
+
inactive: Inactive
|
|
32
|
+
preview: "active"
|
|
33
|
+
visibility: storybook
|
|
@@ -0,0 +1,33 @@
|
|
|
1
|
+
status:
|
|
2
|
+
namespace: Components/User Interface
|
|
3
|
+
use: "@components/status/status.twig"
|
|
4
|
+
label: Status
|
|
5
|
+
description: A component for showing the status of an event or changing item of content.
|
|
6
|
+
fields:
|
|
7
|
+
content:
|
|
8
|
+
type: string
|
|
9
|
+
label: Content
|
|
10
|
+
description: The text content of the tag.
|
|
11
|
+
preview: Event status
|
|
12
|
+
required: true
|
|
13
|
+
elementId:
|
|
14
|
+
type: string
|
|
15
|
+
label: ElementId
|
|
16
|
+
description: An `id` attribute that will be passed directly to the underlying HTML element.
|
|
17
|
+
preview: active
|
|
18
|
+
required: false
|
|
19
|
+
settings:
|
|
20
|
+
statusType:
|
|
21
|
+
type: select
|
|
22
|
+
label: StatusType
|
|
23
|
+
description: The type of status to display
|
|
24
|
+
required: false
|
|
25
|
+
default: active
|
|
26
|
+
options:
|
|
27
|
+
active: Active
|
|
28
|
+
info: Info
|
|
29
|
+
alert: Alert
|
|
30
|
+
subtle: Subtle Alert
|
|
31
|
+
inactive: Inactive
|
|
32
|
+
preview: "active"
|
|
33
|
+
visibility: storybook
|
|
@@ -0,0 +1,56 @@
|
|
|
1
|
+
tag:
|
|
2
|
+
namespace: Components/User Interface
|
|
3
|
+
use: "@components/tag/tag.twig"
|
|
4
|
+
label: Tag
|
|
5
|
+
description: A tag component that can function as a button, an anchor link, or a static display label.
|
|
6
|
+
fields:
|
|
7
|
+
content:
|
|
8
|
+
type: string
|
|
9
|
+
label: Content
|
|
10
|
+
description: The text content of the tag.
|
|
11
|
+
preview: Child labour
|
|
12
|
+
required: true
|
|
13
|
+
elementId:
|
|
14
|
+
type: string
|
|
15
|
+
label: ElementId
|
|
16
|
+
description: An `id` attribute that will be passed directly to the underlying HTML element.
|
|
17
|
+
preview: child-labour
|
|
18
|
+
required: false
|
|
19
|
+
url:
|
|
20
|
+
type: string
|
|
21
|
+
label: URL
|
|
22
|
+
description: The tag's url reference
|
|
23
|
+
preview: https://www.ilo.org/
|
|
24
|
+
required: false
|
|
25
|
+
settings:
|
|
26
|
+
showIcon:
|
|
27
|
+
type: boolean
|
|
28
|
+
label: showicon
|
|
29
|
+
description: Optionally shows a `close` icon. Useful if the icon is removed by clicking on it. The position of the icon is set by the `rtl` attribute of the parent or page.
|
|
30
|
+
preview: false
|
|
31
|
+
required: false
|
|
32
|
+
disabled:
|
|
33
|
+
type: boolean
|
|
34
|
+
label: Disabled
|
|
35
|
+
description: Whether the tag should appear as being enabled or disabled.
|
|
36
|
+
preview: false
|
|
37
|
+
default: false
|
|
38
|
+
defaultActive:
|
|
39
|
+
type: boolean
|
|
40
|
+
label: Default Active
|
|
41
|
+
description: DEPRECATED. This setting should not be used. Sets the tag to be enabled by default. Is overriden by the `disabled` field.
|
|
42
|
+
preview: true
|
|
43
|
+
default: false
|
|
44
|
+
tagType:
|
|
45
|
+
type: select
|
|
46
|
+
label: TagType
|
|
47
|
+
description: The type of tag. Anchor and button have potential user interactions where display is static.
|
|
48
|
+
required: false
|
|
49
|
+
default: display
|
|
50
|
+
options:
|
|
51
|
+
anchor: Anchor
|
|
52
|
+
button: Button
|
|
53
|
+
display: Display
|
|
54
|
+
reset: Reset
|
|
55
|
+
preview: "display"
|
|
56
|
+
visibility: storybook
|
|
@@ -0,0 +1,35 @@
|
|
|
1
|
+
{# tag.twig #}
|
|
2
|
+
|
|
3
|
+
{# Default active will be deprecated in future versions and should not be used #}
|
|
4
|
+
{% set defaultActive = defaultActive|default(true) %}
|
|
5
|
+
{% set tagType = tagType|default("display") %}
|
|
6
|
+
{% set disabled = (disabled is not defined and defaultActive) ? false : disabled|default(false) %}
|
|
7
|
+
{% set enabledClass = disabled ? "disabled" : "enabled" %}
|
|
8
|
+
{% set showIcon = showIcon|default(false) %}
|
|
9
|
+
|
|
10
|
+
{% set icon %}
|
|
11
|
+
{% if showIcon %}
|
|
12
|
+
{% include "@components/icon/icon.twig" with {
|
|
13
|
+
"name": "Close",
|
|
14
|
+
"size": "20",
|
|
15
|
+
"color": "var(--ilo-color-blue-dark)"
|
|
16
|
+
} %}
|
|
17
|
+
{% endif %}
|
|
18
|
+
{% endset %}
|
|
19
|
+
|
|
20
|
+
{% if tagType == "button" or tagType == "reset" %}
|
|
21
|
+
<button class="ilo--tag ilo--tag__{{enabledClass}} ilo--tag__type__{{tagType}}" id="{{ elementId }}" {% if disabled %}disabled{% endif %}>
|
|
22
|
+
{{content}}
|
|
23
|
+
{{ icon }}
|
|
24
|
+
</button>
|
|
25
|
+
{% elseif tagType == "anchor" %}
|
|
26
|
+
<a class="ilo--tag ilo--tag__{{enabledClass}} ilo--tag__type__anchor" id="{{ elementId }}" href="{{ url }}" {% if disabled %}disabled{% endif %}>
|
|
27
|
+
{{content}}
|
|
28
|
+
{{ icon }}
|
|
29
|
+
</a>
|
|
30
|
+
{% elseif tagType == "display" %}
|
|
31
|
+
<span class="ilo--tag ilo--tag__{{enabledClass}} ilo--tag__type__display" id="{{ elementId }}">
|
|
32
|
+
{{content}}
|
|
33
|
+
{{ icon }}
|
|
34
|
+
</span>
|
|
35
|
+
{% endif %}
|
|
@@ -0,0 +1,56 @@
|
|
|
1
|
+
tag:
|
|
2
|
+
namespace: Components/User Interface
|
|
3
|
+
use: "@components/tag/tag.twig"
|
|
4
|
+
label: Tag
|
|
5
|
+
description: A tag component that can function as a button, an anchor link, or a static display label.
|
|
6
|
+
fields:
|
|
7
|
+
content:
|
|
8
|
+
type: string
|
|
9
|
+
label: Content
|
|
10
|
+
description: The text content of the tag.
|
|
11
|
+
preview: Child labour
|
|
12
|
+
required: true
|
|
13
|
+
elementId:
|
|
14
|
+
type: string
|
|
15
|
+
label: ElementId
|
|
16
|
+
description: An `id` attribute that will be passed directly to the underlying HTML element.
|
|
17
|
+
preview: child-labour
|
|
18
|
+
required: false
|
|
19
|
+
url:
|
|
20
|
+
type: string
|
|
21
|
+
label: URL
|
|
22
|
+
description: The tag's url reference
|
|
23
|
+
preview: https://www.ilo.org/
|
|
24
|
+
required: false
|
|
25
|
+
settings:
|
|
26
|
+
showIcon:
|
|
27
|
+
type: boolean
|
|
28
|
+
label: showicon
|
|
29
|
+
description: Optionally shows a `close` icon. Useful if the icon is removed by clicking on it. The position of the icon is set by the `rtl` attribute of the parent or page.
|
|
30
|
+
preview: false
|
|
31
|
+
required: false
|
|
32
|
+
disabled:
|
|
33
|
+
type: boolean
|
|
34
|
+
label: Disabled
|
|
35
|
+
description: Whether the tag should appear as being enabled or disabled.
|
|
36
|
+
preview: false
|
|
37
|
+
default: false
|
|
38
|
+
defaultActive:
|
|
39
|
+
type: boolean
|
|
40
|
+
label: Default Active
|
|
41
|
+
description: DEPRECATED. This setting should not be used. Sets the tag to be enabled by default. Is overriden by the `disabled` field.
|
|
42
|
+
preview: true
|
|
43
|
+
default: false
|
|
44
|
+
tagType:
|
|
45
|
+
type: select
|
|
46
|
+
label: TagType
|
|
47
|
+
description: The type of tag. Anchor and button have potential user interactions where display is static.
|
|
48
|
+
required: false
|
|
49
|
+
default: display
|
|
50
|
+
options:
|
|
51
|
+
anchor: Anchor
|
|
52
|
+
button: Button
|
|
53
|
+
display: Display
|
|
54
|
+
reset: Reset
|
|
55
|
+
preview: "display"
|
|
56
|
+
visibility: storybook
|
|
@@ -2,7 +2,7 @@ tags:
|
|
|
2
2
|
namespace: Components/User Interface
|
|
3
3
|
use: "@components/tags/tags.twig"
|
|
4
4
|
label: Tags
|
|
5
|
-
description: A group of tags
|
|
5
|
+
description: A group of tags that can function as buttons, anchor links, or static display labels.
|
|
6
6
|
fields:
|
|
7
7
|
items:
|
|
8
8
|
type: object
|
|
@@ -10,23 +10,30 @@ tags:
|
|
|
10
10
|
description: An array of tag data to implement a Tag component
|
|
11
11
|
required: true
|
|
12
12
|
preview:
|
|
13
|
-
- content:
|
|
13
|
+
- content: Apprenticeships
|
|
14
14
|
elementId: tag1
|
|
15
|
-
|
|
16
|
-
|
|
17
|
-
- content:
|
|
15
|
+
url: https://www.ilo.org/
|
|
16
|
+
disabled: false
|
|
17
|
+
- content: Artificial Intelligence
|
|
18
18
|
elementId: tag2
|
|
19
|
-
|
|
20
|
-
|
|
21
|
-
- content:
|
|
19
|
+
url: https://www.ilo.org/
|
|
20
|
+
disabled: false
|
|
21
|
+
- content: Care economy
|
|
22
22
|
elementId: tag3
|
|
23
|
-
|
|
23
|
+
disabled: false
|
|
24
|
+
- content: Child labour
|
|
25
|
+
elementId: tag4
|
|
26
|
+
disabled: true
|
|
27
|
+
- content: Cooperatives
|
|
28
|
+
elementId: tag4
|
|
29
|
+
disabled: true
|
|
24
30
|
settings:
|
|
25
|
-
|
|
31
|
+
showIcon:
|
|
26
32
|
type: boolean
|
|
27
|
-
label:
|
|
28
|
-
description:
|
|
29
|
-
preview:
|
|
33
|
+
label: showicon
|
|
34
|
+
description: Optionally shows a `close` icon. Useful if the icon is removed by clicking on it. The position of the icon is set by the `rtl` attribute of the parent or page.
|
|
35
|
+
preview: false
|
|
36
|
+
default: false
|
|
30
37
|
required: false
|
|
31
38
|
tagType:
|
|
32
39
|
type: select
|
|
@@ -38,5 +45,6 @@ tags:
|
|
|
38
45
|
display: Display
|
|
39
46
|
reset: Reset
|
|
40
47
|
preview: display
|
|
48
|
+
default: display
|
|
41
49
|
required: true
|
|
42
50
|
visibility: storybook
|
|
@@ -1,15 +1,20 @@
|
|
|
1
|
-
{#
|
|
2
|
-
|
|
3
|
-
|
|
4
|
-
|
|
1
|
+
{# tags.twig #}
|
|
2
|
+
{% set tagType = tagType|default("display") %}
|
|
3
|
+
{% set showIcon = showIcon|default(false) %}
|
|
4
|
+
|
|
5
|
+
<ul class="ilo--tags"">
|
|
5
6
|
{% for item in items %}
|
|
6
|
-
|
|
7
|
+
<li class="ilo--tag--item">
|
|
8
|
+
{% include "@components/tag/tag.twig" with {
|
|
7
9
|
content: item.content,
|
|
8
|
-
|
|
9
|
-
id: item.elementId,
|
|
10
|
+
elementId: item.elementId,
|
|
10
11
|
prefix: prefix,
|
|
11
12
|
tagType: tagType,
|
|
13
|
+
showIcon: showIcon,
|
|
12
14
|
url: item.url|default(null),
|
|
15
|
+
defaultActive: item.defaultActive,
|
|
16
|
+
disabled: item.disabled
|
|
13
17
|
} only %}
|
|
14
18
|
{% endfor %}
|
|
19
|
+
</li>
|
|
15
20
|
</ul>
|
|
@@ -2,7 +2,7 @@ tags:
|
|
|
2
2
|
namespace: Components/User Interface
|
|
3
3
|
use: "@components/tags/tags.twig"
|
|
4
4
|
label: Tags
|
|
5
|
-
description: A group of tags
|
|
5
|
+
description: A group of tags that can function as buttons, anchor links, or static display labels.
|
|
6
6
|
fields:
|
|
7
7
|
items:
|
|
8
8
|
type: object
|
|
@@ -10,23 +10,30 @@ tags:
|
|
|
10
10
|
description: An array of tag data to implement a Tag component
|
|
11
11
|
required: true
|
|
12
12
|
preview:
|
|
13
|
-
- content:
|
|
13
|
+
- content: Apprenticeships
|
|
14
14
|
elementId: tag1
|
|
15
|
-
|
|
16
|
-
|
|
17
|
-
- content:
|
|
15
|
+
url: https://www.ilo.org/
|
|
16
|
+
disabled: false
|
|
17
|
+
- content: Artificial Intelligence
|
|
18
18
|
elementId: tag2
|
|
19
|
-
|
|
20
|
-
|
|
21
|
-
- content:
|
|
19
|
+
url: https://www.ilo.org/
|
|
20
|
+
disabled: false
|
|
21
|
+
- content: Care economy
|
|
22
22
|
elementId: tag3
|
|
23
|
-
|
|
23
|
+
disabled: false
|
|
24
|
+
- content: Child labour
|
|
25
|
+
elementId: tag4
|
|
26
|
+
disabled: true
|
|
27
|
+
- content: Cooperatives
|
|
28
|
+
elementId: tag4
|
|
29
|
+
disabled: true
|
|
24
30
|
settings:
|
|
25
|
-
|
|
31
|
+
showIcon:
|
|
26
32
|
type: boolean
|
|
27
|
-
label:
|
|
28
|
-
description:
|
|
29
|
-
preview:
|
|
33
|
+
label: showicon
|
|
34
|
+
description: Optionally shows a `close` icon. Useful if the icon is removed by clicking on it. The position of the icon is set by the `rtl` attribute of the parent or page.
|
|
35
|
+
preview: false
|
|
36
|
+
default: false
|
|
30
37
|
required: false
|
|
31
38
|
tagType:
|
|
32
39
|
type: select
|
|
@@ -38,5 +45,6 @@ tags:
|
|
|
38
45
|
display: Display
|
|
39
46
|
reset: Reset
|
|
40
47
|
preview: display
|
|
48
|
+
default: display
|
|
41
49
|
required: true
|
|
42
50
|
visibility: storybook
|
|
@@ -1 +1 @@
|
|
|
1
|
-
@keyframes emptygradient{0%{opacity:1}to{opacity:0}}@keyframes spin{to{-moz-transform:rotate(1turn);-webkit-transform:rotate(1turn);transform:rotate(1turn)}}.ilo--button{--ilo-button-label-weight:700;--ilo-button-labels-actionable-color:var(--ilo-color-blue-dark);--ilo-button-labels-active-color:var(--ilo-color-blue-light);--ilo-button-labels-alert-color:var(--ilo-color-white);--ilo-button-labels-hover-color:var(--ilo-color-blue);border-radius:var(--ilo-border-md);display:inline-
|
|
1
|
+
@keyframes emptygradient{0%{opacity:1}to{opacity:0}}@keyframes spin{to{-moz-transform:rotate(1turn);-webkit-transform:rotate(1turn);transform:rotate(1turn)}}.ilo--button{--ilo-button-label-weight:700;--ilo-button-labels-actionable-color:var(--ilo-color-blue-dark);--ilo-button-labels-active-color:var(--ilo-color-blue-light);--ilo-button-labels-alert-color:var(--ilo-color-white);--ilo-button-labels-hover-color:var(--ilo-color-blue);align-items:center;border-radius:var(--ilo-border-md);display:inline-flex;font-family:var(--ilo-fonts-display);font-weight:var(--ilo-button-label-weight);gap:calc(var(--ilo-spacing-base)*2);justify-content:center;text-decoration:none}.ilo--button [class*=__label]{white-space:nowrap}.ilo--button--icon{position:relative}.ilo--button--icon .ilo--icon{bottom:.1071811361rem;position:relative}.ilo--button--icon--position__right{flex-direction:row-reverse}.ilo--button--icon--only{padding:unset!important}.ilo--button--icon--only .ilo--icon{bottom:0!important}.ilo--button--icon--only .button__label{border:0;height:1px;margin:-1px;padding:0;position:absolute;width:1px;clip:rect(0 0 0 0);overflow:hidden}.ilo--button__large{font-size:18.66px;height:2.7867095391rem;letter-spacing:-.02em;line-height:120%;padding:calc(var(--ilo-spacing-base)*3) calc(var(--ilo-spacing-base)*6)}.ilo--button__large.ilo--button--icon--only{width:2.7867095391rem}.ilo--button__medium{font-size:16px;height:2.3579849946rem;letter-spacing:-.02em;line-height:120%;padding:calc(var(--ilo-spacing-base)*2) calc(var(--ilo-spacing-base)*5)}.ilo--button__medium.ilo--button--icon--only{width:2.3579849946rem}.ilo--button__small{font-size:14.93px;height:1.7148981779rem;letter-spacing:-.02em;line-height:120%;padding:calc(var(--ilo-spacing-base)*1) calc(var(--ilo-spacing-base)*4)}.ilo--button__small.ilo--button--icon--only{width:1.7148981779rem}.ilo--button__small .ilo--icon{bottom:.0535905681rem}.ilo--button__primary{background-color:var(--ilo-color-yellow);border:var(--ilo-border-md) var(--ilo-color-yellow) solid}.ilo--button__primary,.ilo--button__secondary{color:var(--ilo-button-labels-actionable-color)}.ilo--button__secondary{background-color:var(--ilo-color-background-default);border:var(--ilo-border-md) var(--ilo-color-borders-default) solid}.ilo--button__secondary:hover{background-color:var(--ilo-color-background-hover);border:var(--ilo-border-md) var(--ilo-color-borders-hover) solid}.ilo--button__secondary:active{background-color:var(--ilo-color-background-active);border:var(--ilo-border-md) var(--ilo-color-borders-active) solid;box-shadow:none;color:var(--ilo-button-labels-active-color)}.ilo--button__tertiary{background-color:var(--ilo-color-background-highlight);border:var(--ilo-border-md) var(--ilo-color-background-highlight) solid;color:var(--ilo-button-labels-actionable-color)}.ilo--button__alert{background-color:var(--ilo-color-red-dark);border:var(--ilo-border-md) var(--ilo-color-red-dark) solid;color:var(--ilo-button-labels-alert-color)}.ilo--button__alert:hover{background-color:var(--ilo-color-background-hover);border:var(--ilo-border-md) var(--ilo-color-borders-hover) solid;color:var(--ilo-button-labels-hover-color)}.ilo--button__alert:focus{background-color:var(--ilo-color-background-focus);border:var(--ilo-border-md) var(--ilo-color-borders-focus) solid;color:var(--ilo-button-labels-focus-color);outline:0}.ilo--button__alert:active{background-color:var(--ilo-color-background-active);border:var(--ilo-border-md) var(--ilo-color-borders-active) solid;box-shadow:none;color:var(--ilo-button-labels-active-color)}.ilo--button:focus{background-color:var(--ilo-color-background-focus);border:var(--ilo-border-md) var(--ilo-color-borders-focus) solid;box-shadow:4px 4px 0 1px var(--ilo-color-borders-focus) inset,-4px -4px 0 1px var(--ilo-color-borders-focus) inset;color:var(--ilo-button-labels-focus-color);outline:0;transition-duration:.15s;transition-property:color,background-color,border-color;transition-timing-function:ease-out}.ilo--button:focus.ilo--small{box-shadow:3px 3px 0 1px var(--ilo-color-borders-focus) inset,-3px -3px 0 1px var(--ilo-color-borders-focus) inset}.ilo--button:hover{background-color:var(--ilo-color-background-hover);border:var(--ilo-border-md) var(--ilo-color-borders-hover) solid;color:var(--ilo-button-labels-hover-color);cursor:pointer}.ilo--button:active,.ilo--button:hover{box-shadow:none;transition-duration:.15s;transition-property:color,background-color,border-color;transition-timing-function:ease-out}.ilo--button:active{background-color:var(--ilo-color-background-active);border:var(--ilo-border-md) var(--ilo-color-borders-active) solid;color:var(--ilo-button-labels-active-color)}.ilo--button:disabled{opacity:.45;pointer-events:none}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
@keyframes emptygradient{0%{opacity:1}to{opacity:0}}@keyframes spin{to{-moz-transform:rotate(1turn);-webkit-transform:rotate(1turn);transform:rotate(1turn)}}.ilo--card{background-color:var(--ilo-color-white);box-sizing:border-box;flex:1 1 var(--max-width);max-width:var(--max-width);position:relative}.ilo--card *{transition-duration:.15s
|
|
1
|
+
@keyframes emptygradient{0%{opacity:1}to{opacity:0}}@keyframes spin{to{-moz-transform:rotate(1turn);-webkit-transform:rotate(1turn);transform:rotate(1turn)}}.ilo--card{background-color:var(--ilo-color-white);box-sizing:border-box;flex:1 1 var(--max-width);max-width:var(--max-width);position:relative;transition-property:border-bottom,filter;transition-timing-function:ease-out}.ilo--card,.ilo--card *{transition-duration:.15s}.ilo--card *{transition-property:color,background-color,border-color,opacity,fill,filter;transition-timing-function:ease-out}.ilo--card:has(.ilo--card--link:hover,.ilo--card--link:focus,.ilo--card--link:focus-within){filter:drop-shadow(0 -4px 16px rgba(30,45,190,.05)) drop-shadow(0 10px 20px rgba(30,45,190,.08)) drop-shadow(0 4px 8px rgba(30,45,190,.05)) drop-shadow(0 .8px 1.6px rgba(30,45,190,.04))}.ilo--card:has(.ilo--card--link:hover,.ilo--card--link:focus,.ilo--card--link:focus-within) .ilo--card--image--wrapper:before{opacity:.4}.ilo--card:has(.ilo--card--link:hover,.ilo--card--link:focus,.ilo--card--link:focus-within) .ilo--card--picture{filter:saturate(0)}.ilo--card--wrap{height:100%}.ilo--card--wrapper{max-width:var(--max-width);transition-duration:.15s;transition-property:color,background-color,border-color,opacity,fill,filter;transition-timing-function:ease-out}.ilo--card--wrapper:has(.ilo--card--link:hover,.ilo--card--link:focus,.ilo--card--link:focus-within){filter:drop-shadow(0 -4px 16px rgba(30,45,190,.05)) drop-shadow(0 10px 20px rgba(30,45,190,.08)) drop-shadow(0 4px 8px rgba(30,45,190,.05)) drop-shadow(0 .8px 1.6px rgba(30,45,190,.04))}.ilo--card--image--wrapper{position:relative}.ilo--card--image--wrapper:before{background-color:var(--ilo-color-blue);content:"";opacity:0;transition-duration:.15s;transition-property:opacity;transition-timing-function:ease-out;z-index:1}.ilo--card--image--wrapper:before,.ilo--card--link{height:100%;left:0;position:absolute;top:0;width:100%}.ilo--card--link{background:0 0;color:transparent;text-decoration:none;z-index:2}.ilo--card--link--text{border:0;height:1px;margin:-1px;padding:0;position:absolute;width:1px;clip:rect(0 0 0 0);overflow:hidden}.ilo--card--eyebrow{color:var(--ilo-color-purple);font-family:var(--ilo-fonts-copy);font-size:var(--ilo-font-size-sm);font-weight:var(--ilo-font-weight-regular);letter-spacing:var(--ilo-letter-spacing-md);line-height:var(--ilo-line-height-xlg);margin-bottom:calc(var(--ilo-spacing-base)*4)}.ilo--card--title{color:var(--ilo-color-dark-blue);font-family:var(--ilo-fonts-display);font-size:var(--ilo-font-size-lg);font-weight:var(--ilo-font-weight-bold);letter-spacing:var(--ilo-letter-spacing-sm);line-height:var(--ilo-line-height-lg);margin-bottom:calc(var(--ilo-spacing-base)*6)}.ilo--card--intro{color:var(--ilo-color-gray-charcoal);font-size:var(--ilo-font-size-lg);line-height:var(--ilo-line-height-2xlg)}.ilo--card--date,.ilo--card--intro{font-family:var(--ilo-fonts-copy);font-weight:var(--ilo-font-weight-regular);letter-spacing:var(--ilo-letter-spacing-md)}.ilo--card--date{color:var(--ilo-gray-accessible);font-size:var(--ilo-font-size-sm);line-height:var(--ilo-line-height-xlg);margin-bottom:calc(var(--ilo-spacing-base)*6)}.ilo--card--content--item,.ilo--card--event-date{font-family:var(--ilo-fonts-copy);font-size:var(--ilo-font-size-sm);font-weight:var(--ilo-font-weight-regular);letter-spacing:var(--ilo-letter-spacing-md);line-height:var(--ilo-line-height-xlg)}.ilo--card--cta{position:relative;z-index:2}.ilo--card__theme__light{background:var(--ilo-color-white);border-bottom:.1607717042rem solid var(--ilo-color-gray-base)}.ilo--card__theme__soft{background:var(--ilo-color-blue-lighter)}.ilo--card__theme__light:has(.ilo--card--link:hover,.ilo--card--link:focus,.ilo--card--link:focus-within),.ilo--card__theme__soft:has(.ilo--card--link:hover,.ilo--card--link:focus,.ilo--card--link:focus-within){border-bottom:.1607717042rem solid var(--ilo-color-blue)}.ilo--card__theme__light:has(.ilo--card--link:hover,.ilo--card--link:focus,.ilo--card--link:focus-within) .ilo--card--content--item,.ilo--card__theme__light:has(.ilo--card--link:hover,.ilo--card--link:focus,.ilo--card--link:focus-within) .ilo--card--date,.ilo--card__theme__light:has(.ilo--card--link:hover,.ilo--card--link:focus,.ilo--card--link:focus-within) .ilo--card--date-extra,.ilo--card__theme__light:has(.ilo--card--link:hover,.ilo--card--link:focus,.ilo--card--link:focus-within) .ilo--card--eyebrow,.ilo--card__theme__light:has(.ilo--card--link:hover,.ilo--card--link:focus,.ilo--card--link:focus-within) .ilo--card--intro,.ilo--card__theme__light:has(.ilo--card--link:hover,.ilo--card--link:focus,.ilo--card--link:focus-within) .ilo--card--title,.ilo--card__theme__light:has(.ilo--card--link:hover,.ilo--card--link:focus,.ilo--card--link:focus-within) .ilo--profile,.ilo--card__theme__soft:has(.ilo--card--link:hover,.ilo--card--link:focus,.ilo--card--link:focus-within) .ilo--card--content--item,.ilo--card__theme__soft:has(.ilo--card--link:hover,.ilo--card--link:focus,.ilo--card--link:focus-within) .ilo--card--date,.ilo--card__theme__soft:has(.ilo--card--link:hover,.ilo--card--link:focus,.ilo--card--link:focus-within) .ilo--card--date-extra,.ilo--card__theme__soft:has(.ilo--card--link:hover,.ilo--card--link:focus,.ilo--card--link:focus-within) .ilo--card--eyebrow,.ilo--card__theme__soft:has(.ilo--card--link:hover,.ilo--card--link:focus,.ilo--card--link:focus-within) .ilo--card--intro,.ilo--card__theme__soft:has(.ilo--card--link:hover,.ilo--card--link:focus,.ilo--card--link:focus-within) .ilo--card--title,.ilo--card__theme__soft:has(.ilo--card--link:hover,.ilo--card--link:focus,.ilo--card--link:focus-within) .ilo--profile{color:var(--ilo-color-blue)}.ilo--card__theme__light:has(.ilo--card--link:hover,.ilo--card--link:focus,.ilo--card--link:focus-within) .ilo--card--content--item .ilo--icon,.ilo--card__theme__light:has(.ilo--card--link:hover,.ilo--card--link:focus,.ilo--card--link:focus-within) .ilo--card--date .ilo--icon,.ilo--card__theme__light:has(.ilo--card--link:hover,.ilo--card--link:focus,.ilo--card--link:focus-within) .ilo--card--date-extra .ilo--icon,.ilo--card__theme__light:has(.ilo--card--link:hover,.ilo--card--link:focus,.ilo--card--link:focus-within) .ilo--card--eyebrow .ilo--icon,.ilo--card__theme__light:has(.ilo--card--link:hover,.ilo--card--link:focus,.ilo--card--link:focus-within) .ilo--card--intro .ilo--icon,.ilo--card__theme__light:has(.ilo--card--link:hover,.ilo--card--link:focus,.ilo--card--link:focus-within) .ilo--card--title .ilo--icon,.ilo--card__theme__light:has(.ilo--card--link:hover,.ilo--card--link:focus,.ilo--card--link:focus-within) .ilo--profile .ilo--icon,.ilo--card__theme__soft:has(.ilo--card--link:hover,.ilo--card--link:focus,.ilo--card--link:focus-within) .ilo--card--content--item .ilo--icon,.ilo--card__theme__soft:has(.ilo--card--link:hover,.ilo--card--link:focus,.ilo--card--link:focus-within) .ilo--card--date .ilo--icon,.ilo--card__theme__soft:has(.ilo--card--link:hover,.ilo--card--link:focus,.ilo--card--link:focus-within) .ilo--card--date-extra .ilo--icon,.ilo--card__theme__soft:has(.ilo--card--link:hover,.ilo--card--link:focus,.ilo--card--link:focus-within) .ilo--card--eyebrow .ilo--icon,.ilo--card__theme__soft:has(.ilo--card--link:hover,.ilo--card--link:focus,.ilo--card--link:focus-within) .ilo--card--intro .ilo--icon,.ilo--card__theme__soft:has(.ilo--card--link:hover,.ilo--card--link:focus,.ilo--card--link:focus-within) .ilo--card--title .ilo--icon,.ilo--card__theme__soft:has(.ilo--card--link:hover,.ilo--card--link:focus,.ilo--card--link:focus-within) .ilo--profile .ilo--icon{fill:var(--ilo-color-blue)}.ilo--card__theme__dark{background:var(--ilo-color-blue-dark);border-bottom:.1607717042rem solid var(--ilo-color-red)}.ilo--card__theme__dark:has(.ilo--card--link:hover,.ilo--card--link:focus,.ilo--card--link:focus-within){border-bottom:.1607717042rem solid var(--ilo-color-white)}.ilo--card__theme__dark .ilo--card--title{color:var(--ilo-color-white)}.ilo--card__theme__dark .ilo--card--content--item,.ilo--card__theme__dark .ilo--card--date,.ilo--card__theme__dark .ilo--card--eyebrow,.ilo--card__theme__dark .ilo--card--intro{color:var(--ilo-color-gray-light)}.ilo--card__theme__dark .ilo--card--content--item .ilo--icon{fill:var(--ilo-color-gray-light)}.ilo--card__size__fluid{--max-width:100%!important}.ilo--card__isvideo .ilo--card--image--wrapper{position:relative}.ilo--card__isvideo .ilo--card--image--wrapper:after,.ilo--card__isvideo .ilo--card--image--wrapper:before{background-position:50%;background-repeat:no-repeat;background-size:18px 20px;content:"";display:block;height:40px;left:0;position:absolute;top:0;width:40px;z-index:1}.ilo--card__isvideo .ilo--card--image--wrapper:before{background-color:var(--ilo-color-gray-charcoal)}.ilo--card__isvideo .ilo--card--image--wrapper:after{background-color:var(--ilo-color-gray-light);mask-image:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='currentColor' viewBox='0 0 24 24'%3E%3Cpath d='M17 12 9 6v12z'/%3E%3C/svg%3E");-webkit-mask-image:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='currentColor' viewBox='0 0 24 24'%3E%3Cpath d='M17 12 9 6v12z'/%3E%3C/svg%3E");mask-repeat:no-repeat;-webkit-mask-repeat:no-repeat}
|