@ilo-org/twig 1.8.0 → 1.8.1
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/logo/logo.component.yml +34 -0
- package/dist/components/logo/logo.twig +27 -0
- package/dist/components/logo/logo.wingsuit.yml +34 -0
- package/dist/components/nav/nav.component.yml +3 -0
- package/dist/components/nav/nav.wingsuit.yml +3 -0
- package/dist/components/nav/nav_compact.twig +8 -1
- package/dist/components/nav/nav_complex.twig +16 -2
- package/dist/styles/global.css.map +1 -1
- package/dist/styles/index.css.map +1 -1
- package/dist/styles/monorepo.css.map +1 -1
- package/package.json +3 -3
|
@@ -0,0 +1,34 @@
|
|
|
1
|
+
logo:
|
|
2
|
+
namespace: Components/Logo
|
|
3
|
+
use: "@components/logo/logo.twig"
|
|
4
|
+
label: Logo
|
|
5
|
+
description: A logo component that can optionally be wrapped in a link
|
|
6
|
+
fields:
|
|
7
|
+
src:
|
|
8
|
+
type: string
|
|
9
|
+
label: Image Source
|
|
10
|
+
description: The source URL of the logo image
|
|
11
|
+
preview: "images/logo_en_horizontal_blue_dark.svg"
|
|
12
|
+
alt:
|
|
13
|
+
type: string
|
|
14
|
+
label: Alt Text
|
|
15
|
+
description: Alternative text for the logo image
|
|
16
|
+
preview: "ILO Logo"
|
|
17
|
+
link:
|
|
18
|
+
type: object
|
|
19
|
+
label: Link
|
|
20
|
+
description: Optional link configuration for the logo
|
|
21
|
+
preview:
|
|
22
|
+
href: "https://www.ilo.org"
|
|
23
|
+
label: "ILO Live Homepage"
|
|
24
|
+
className:
|
|
25
|
+
type: string
|
|
26
|
+
label: Wrapper Class
|
|
27
|
+
description: CSS class for the logo wrapper element
|
|
28
|
+
preview: "ilo--logo"
|
|
29
|
+
imgClassName:
|
|
30
|
+
type: string
|
|
31
|
+
label: Image Class
|
|
32
|
+
description: CSS class for the logo image element
|
|
33
|
+
preview: "ilo--logo__img"
|
|
34
|
+
visibility: storybook
|
|
@@ -0,0 +1,27 @@
|
|
|
1
|
+
{# logo.twig #}
|
|
2
|
+
|
|
3
|
+
{% set prefix = prefix|default('ilo') %}
|
|
4
|
+
{% set base_class = className|default('ilo' ~ '--logo') %}
|
|
5
|
+
{% set img_class = imgClassName|default(base_class ~ '__img') %}
|
|
6
|
+
|
|
7
|
+
{% if link and link.href %}
|
|
8
|
+
<a
|
|
9
|
+
href="{{ link.href }}"
|
|
10
|
+
class="{{ base_class }} {{ base_class }}--link"
|
|
11
|
+
{% if link.label %}
|
|
12
|
+
aria-label="{{ link.label }}"
|
|
13
|
+
{% endif %}
|
|
14
|
+
>
|
|
15
|
+
<img
|
|
16
|
+
class="{{ img_class }}"
|
|
17
|
+
src="{{ src }}"
|
|
18
|
+
alt="{{ alt }}"
|
|
19
|
+
>
|
|
20
|
+
</a>
|
|
21
|
+
{% else %}
|
|
22
|
+
<img
|
|
23
|
+
class="{{ base_class }} {{ img_class }}"
|
|
24
|
+
src="{{ src }}"
|
|
25
|
+
alt="{{ alt }}"
|
|
26
|
+
>
|
|
27
|
+
{% endif %}
|
|
@@ -0,0 +1,34 @@
|
|
|
1
|
+
logo:
|
|
2
|
+
namespace: Components/Logo
|
|
3
|
+
use: "@components/logo/logo.twig"
|
|
4
|
+
label: Logo
|
|
5
|
+
description: A logo component that can optionally be wrapped in a link
|
|
6
|
+
fields:
|
|
7
|
+
src:
|
|
8
|
+
type: string
|
|
9
|
+
label: Image Source
|
|
10
|
+
description: The source URL of the logo image
|
|
11
|
+
preview: "images/logo_en_horizontal_blue_dark.svg"
|
|
12
|
+
alt:
|
|
13
|
+
type: string
|
|
14
|
+
label: Alt Text
|
|
15
|
+
description: Alternative text for the logo image
|
|
16
|
+
preview: "ILO Logo"
|
|
17
|
+
link:
|
|
18
|
+
type: object
|
|
19
|
+
label: Link
|
|
20
|
+
description: Optional link configuration for the logo
|
|
21
|
+
preview:
|
|
22
|
+
href: "https://www.ilo.org"
|
|
23
|
+
label: "ILO Live Homepage"
|
|
24
|
+
className:
|
|
25
|
+
type: string
|
|
26
|
+
label: Wrapper Class
|
|
27
|
+
description: CSS class for the logo wrapper element
|
|
28
|
+
preview: "ilo--logo"
|
|
29
|
+
imgClassName:
|
|
30
|
+
type: string
|
|
31
|
+
label: Image Class
|
|
32
|
+
description: CSS class for the logo image element
|
|
33
|
+
preview: "ilo--logo__img"
|
|
34
|
+
visibility: storybook
|
|
@@ -15,6 +15,9 @@ nav:
|
|
|
15
15
|
mobile: "images/ilo-live-logo-en-light.png"
|
|
16
16
|
drawer: "images/ilo-live-logo-en-dark.png"
|
|
17
17
|
alt: "ILO Logo"
|
|
18
|
+
link:
|
|
19
|
+
href: "https://live.ilo.org"
|
|
20
|
+
label: "ILO Live Homepage"
|
|
18
21
|
tag:
|
|
19
22
|
main: "Advancing social justice, promoting decent work"
|
|
20
23
|
sub: "ILO is a specialized agency of the United Nations"
|
|
@@ -15,6 +15,9 @@ nav:
|
|
|
15
15
|
mobile: "images/ilo-live-logo-en-light.png"
|
|
16
16
|
drawer: "images/ilo-live-logo-en-dark.png"
|
|
17
17
|
alt: "ILO Logo"
|
|
18
|
+
link:
|
|
19
|
+
href: "https://live.ilo.org"
|
|
20
|
+
label: "ILO Live Homepage"
|
|
18
21
|
tag:
|
|
19
22
|
main: "Advancing social justice, promoting decent work"
|
|
20
23
|
sub: "ILO is a specialized agency of the United Nations"
|
|
@@ -13,7 +13,14 @@
|
|
|
13
13
|
tabindex="0"
|
|
14
14
|
>
|
|
15
15
|
<div class="{{ base_class }}__branding-logo">
|
|
16
|
-
|
|
16
|
+
{% include "@components/logo/logo.twig" with {
|
|
17
|
+
src: branding.logo.mobile,
|
|
18
|
+
alt: branding.logo.alt,
|
|
19
|
+
link: branding.logo.link,
|
|
20
|
+
className: base_class ~ '__branding-logo',
|
|
21
|
+
imgClassName: base_class ~ '__branding-logo-img',
|
|
22
|
+
prefix: prefix
|
|
23
|
+
} %}
|
|
17
24
|
</div>
|
|
18
25
|
</div>
|
|
19
26
|
|
|
@@ -35,7 +35,14 @@
|
|
|
35
35
|
tabindex="0"
|
|
36
36
|
aria-label="Branding"
|
|
37
37
|
>
|
|
38
|
-
|
|
38
|
+
{% include "@components/logo/logo.twig" with {
|
|
39
|
+
src: branding.logo.main,
|
|
40
|
+
alt: branding.logo.alt,
|
|
41
|
+
link: branding.logo.link,
|
|
42
|
+
className: base_class ~ '__branding-main__logo',
|
|
43
|
+
imgClassName: base_class ~ '__branding-main__logo-img',
|
|
44
|
+
prefix: prefix
|
|
45
|
+
} %}
|
|
39
46
|
</div>
|
|
40
47
|
</div>
|
|
41
48
|
<div class="{{ base_class }}__branding-tag">
|
|
@@ -56,7 +63,14 @@
|
|
|
56
63
|
tabindex="0"
|
|
57
64
|
aria-label="Branding"
|
|
58
65
|
>
|
|
59
|
-
|
|
66
|
+
{% include "@components/logo/logo.twig" with {
|
|
67
|
+
src: branding.logo.mobile,
|
|
68
|
+
alt: branding.logo.alt,
|
|
69
|
+
link: branding.logo.link,
|
|
70
|
+
className: base_class ~ '__nav-mobile__logo',
|
|
71
|
+
imgClassName: base_class ~ '__nav-mobile__logo-img',
|
|
72
|
+
prefix: prefix
|
|
73
|
+
} %}
|
|
60
74
|
</div>
|
|
61
75
|
</div>
|
|
62
76
|
|