@ilo-org/twig 0.10.3 → 0.10.5

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.
Files changed (6) hide show
  1. package/.turbo/turbo-build:lib.log +2 -2
  2. package/CHANGELOG.md +23 -0
  3. package/package.json +3 -3
  4. package/src/patterns/components/footer/footer.twig +57 -55
  5. package/src/patterns/components/footer/footer.wingsuit.yml +14 -24
  6. package/src/patterns/components/navigation/navigation.twig +8 -5
package/.turbo/turbo-build:lib.log CHANGED
@@ -1,9 +1,9 @@
1
1
 
2
- > @ilo-org/twig@0.10.3 build:lib /home/runner/work/designsystem/designsystem/packages/twig
2
+ > @ilo-org/twig@0.10.5 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.10.3 output /home/runner/work/designsystem/designsystem/packages/twig
7
+ > @ilo-org/twig@0.10.5 output /home/runner/work/designsystem/designsystem/packages/twig
8
8
  > node outputtwigs.js
9
9
 
package/CHANGELOG.md CHANGED
@@ -1,5 +1,28 @@
1
1
  # @ilo-org/twig
2
2
 
3
+ ## 0.10.5
4
+
5
+ ### Patch Changes
6
+
7
+ - ad590b833: Use container class to set max widths and padding for Navigation
8
+ - e575c2973: Fit content in the footer inside a 1300px max-width container
9
+ - Updated dependencies [1e18e0ca9]
10
+ - Updated dependencies [ad590b833]
11
+ - Updated dependencies [6c4ebfeb3]
12
+ - Updated dependencies [e575c2973]
13
+ - Updated dependencies [e575c2973]
14
+ - Updated dependencies [73640499b]
15
+ - @ilo-org/styles@0.10.0
16
+ - @ilo-org/themes@0.5.0
17
+
18
+ ## 0.10.4
19
+
20
+ ### Patch Changes
21
+
22
+ - Updated dependencies [3290283dd]
23
+ - @ilo-org/themes@0.4.0
24
+ - @ilo-org/styles@0.9.2
25
+
3
26
  ## 0.10.3
4
27
 
5
28
  ### Patch Changes
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@ilo-org/twig",
3
- "version": "0.10.3",
3
+ "version": "0.10.5",
4
4
  "license": "Apache-2.0",
5
5
  "description": "Twig components for the ILO's Design System",
6
6
  "main": "",
@@ -25,8 +25,8 @@
25
25
  "@ilo-org/brand-assets": "0.2.0",
26
26
  "@ilo-org/fonts": "0.1.0",
27
27
  "@ilo-org/icons": "0.2.1",
28
- "@ilo-org/styles": "0.9.1",
29
- "@ilo-org/themes": "0.3.0",
28
+ "@ilo-org/styles": "0.10.0",
29
+ "@ilo-org/themes": "0.5.0",
30
30
  "@ilo-org/utils": "0.0.11"
31
31
  },
32
32
  "devDependencies": {
package/src/patterns/components/footer/footer.twig CHANGED
@@ -1,61 +1,63 @@
1
- {#
2
- FOOTER COMPONENT
3
- #}
1
+ {# footer.twig #}
4
2
  <footer class="{{prefix}}--footer">
5
- <div class="{{prefix}}--footer--main">
6
- <div class="site--info">
7
- <img class="{{prefix}}--footer--logo" src="{{logo.url}}" alt="{{logo.alt}}" />
8
- <h3 class="{{prefix}}--footer--headline">{{tagline}}</h3>
9
- <h4 class="{{prefix}}--footer--subhead">{{subtagline}}</h4>
10
- </div>
11
- {% if address %}
12
- <div class="address">
13
- {% for line in address %}
14
- <p class="address--line">{{line}}</p>
15
- {% endfor %}
16
- </div>
17
- {% endif %}
18
- {% if linkgroup %}
19
- <nav class="links">
20
- {% include '@components/linklist/linklist.twig' with {linkgroup: linkgroup, theme: 'dark'} %}
21
- </nav>
22
- {% endif %}
23
- {% if social or subscribe %}
24
- <div class="connect">
25
- {% if socialmedia %}
26
- <div class="social--links">
27
- {% include '@components/socialmedia/socialmedia.twig' with {
3
+ <div class="{{prefix}}--footer--main {{prefix}}--container">
4
+ <div class="site--info">
5
+ <img class="{{prefix}}--footer--logo" src="{{logo.url}}" alt="{{logo.alt}}"/>
6
+ <h3 class="{{prefix}}--footer--headline">{{tagline}}</h3>
7
+ <h4 class="{{prefix}}--footer--subhead">{{subtagline}}</h4>
8
+ </div>
9
+ {% if address %}
10
+ <div class="address">
11
+ {% for line in address %}
12
+ <p class="address--line">{{line}}</p>
13
+ {% endfor %}
14
+ </div>
15
+ {% endif %}
16
+ {% if linkgroup %}
17
+ <nav class="links">
18
+ {% include '@components/linklist/linklist.twig' with {linkgroup: linkgroup, theme: 'dark'} %}
19
+ </nav>
20
+ {% endif %}
21
+ {% if socialmedia %}
22
+ <div class="connect">
23
+ <div class="social--links">
24
+ {% include '@components/socialmedia/socialmedia.twig' with {
28
25
  theme: "dark",
29
26
  headline: socialmedia.headline,
30
27
  icons: socialmedia.icons,
31
28
  } %}
32
- </div>
33
- {% endif %}
34
- {% if subscribe %}
35
- {% include '@components/button/button.twig' with {label: subscribe.label, url: subscribe.url, type: 'primary', size: 'large', target: '_blank'} %}
36
- {% endif %}
37
- </div>
38
- {% endif %}
39
- </div>
40
- <div class="{{prefix}}--footer--secondary">
41
- {% if legal %}
42
- <div class="legal">
43
- {{legal}}
44
- </div>
45
- {% endif %}
46
- {% if secondarylinks %}
47
- <nav class="secondarylinks">
48
- <ul class="secondarylinks--list">
49
- {% for link in secondarylinks %}
50
- <li class="secondarylinks--list--item">
51
- <a href="{{link.url}}" class="secondarylinks--list--link">{{link.label}}</a>
52
- </li>
53
- {% endfor %}
54
- </ul>
55
- </nav>
56
- {% endif %}
57
- {% if anchorlink %}
58
- <a href="{{anchorlink.href}}" class="anchorlink">{{anchorlink.label}}</a>
59
- {% endif %}
60
- </div>
29
+ </div>
30
+ </div>
31
+ {% endif %}
32
+ {% if subscribe %}
33
+ <div class="subscribe">
34
+ {% include '@components/button/button.twig' with {label: subscribe.label, url: subscribe.url, type: 'primary', size: 'large', target: '_blank'} %}
35
+ </div>
36
+ {% endif %}
37
+ </div>
38
+ <div class="{{prefix}}--footer--secondary">
39
+ <div class="{{prefix}}--container">
40
+ <div class="{{prefix}}--footer--secondary--details">
41
+ {% if legal %}
42
+ <div class="legal">
43
+ {{legal}}
44
+ </div>
45
+ {% endif %}
46
+ {% if secondarylinks %}
47
+ <nav class="secondarylinks">
48
+ <ul class="secondarylinks--list">
49
+ {% for link in secondarylinks %}
50
+ <li class="secondarylinks--list--item">
51
+ <a href="{{link.url}}" class="secondarylinks--list--link">{{link.label}}</a>
52
+ </li>
53
+ {% endfor %}
54
+ </ul>
55
+ </nav>
56
+ </div>
57
+ {% endif %}
58
+ {% if anchorlink %}
59
+ <a href="{{anchorlink.href}}" class="anchorlink">{{anchorlink.label}}</a>
60
+ {% endif %}
61
+ </div>
62
+ </div>
61
63
  </footer>
package/src/patterns/components/footer/footer.wingsuit.yml CHANGED
@@ -37,24 +37,18 @@ footer:
37
37
  description: "up to six links"
38
38
  preview:
39
39
  - links:
40
- - label: "Link One"
41
- url: "http://www.google.com"
42
- - label: "Link Two"
43
- url: "http://www.google.com"
44
- - label: "Link Three"
45
- url: "http://www.google.com"
46
- - label: "Link Four"
47
- url: "http://www.google.com"
48
- - label: "Link Five"
49
- url: "http://www.google.com"
50
- - label: "Link Six"
51
- url: "http://www.google.com"
40
+ - label: "Contact us"
41
+ url: "https://www.ilo.org"
42
+ - label: "Contact us"
43
+ url: "https://www.ilo.org"
44
+ - label: "Contact us"
45
+ url: "https://www.ilo.org"
52
46
  socialmedia:
53
47
  type: object
54
48
  label: social
55
49
  description: "Links to social media"
56
50
  preview:
57
- headline: "Connect with the ILO"
51
+ headline: "Stay informed"
58
52
  icons:
59
53
  - icon: "twitter"
60
54
  label: "Twitter"
@@ -82,8 +76,8 @@ footer:
82
76
  label: subscribe
83
77
  description: "a link to a subscribe form"
84
78
  preview:
85
- label: "Subscribe"
86
- url: "http://www.google.com"
79
+ label: "Subscribe for updates"
80
+ url: "https://www.ilo.org"
87
81
  legal:
88
82
  type: string
89
83
  label: legal
@@ -94,23 +88,19 @@ footer:
94
88
  label: secondarylinks
95
89
  description: "up to six links"
96
90
  preview:
97
- - label: "Link One"
91
+ - label: "Rights and permissions"
98
92
  url: "http://www.cnn.com"
99
- - label: "Link Two"
93
+ - label: "Privacy policy"
100
94
  url: "http://www.bing.com"
101
- - label: "Link Three"
95
+ - label: "Fraud alert"
102
96
  url: "http://www.yahoo.com"
103
- - label: "Link Four"
97
+ - label: "Disclaimer"
104
98
  url: "http://www.askjeeves.com"
105
- - label: "Link Five"
106
- url: "http://www.duckduckgo.com"
107
- - label: "Link Six"
108
- url: "http://www.aol.com"
109
99
  anchorlink:
110
100
  type: object
111
101
  label: anchorlink
112
102
  description: "an anchor href and label for navigating to another section on the page"
113
103
  preview:
114
- label: "Back to Top"
104
+ label: "Back to top"
115
105
  href: "#anchor"
116
106
  visibility: storybook
package/src/patterns/components/navigation/navigation.twig CHANGED
@@ -1,6 +1,8 @@
1
1
  {#
2
2
  NAVIGATION COMPONENT
3
3
  #}
4
+
5
+
4
6
  <header class="{{prefix}}--header" data-loadcomponent="Navigation" data-prefix="{{prefix}}">
5
7
  <div class="{{prefix}}--header--utility-bar">
6
8
  <div class="{{prefix}}--language-switcher">
@@ -20,7 +22,7 @@
20
22
  </div>
21
23
  <!-- /.{{prefix}}--header--utility-bar -->
22
24
  <div class="{{prefix}}--header--logo-bar">
23
- <div class="{{prefix}}--header--inner">
25
+ <div class="{{prefix}}--header--inner {{ prefix }}--container">
24
26
  <a href="{{siteurl}}" class="{{prefix}}--header--logo-link">
25
27
  <img class="{{prefix}}--header--logo" src="{{logo.image}}" alt="{{logo.alt}}">
26
28
  </a>
@@ -32,9 +34,10 @@
32
34
  </div>
33
35
  <!-- /.{{prefix}}--header--inner -->
34
36
  </div>
37
+
35
38
  <!-- /.{{prefix}}--header--logo-bar -->
36
39
  <div class="{{prefix}}--header--navigation">
37
- <div class="{{prefix}}--header--inner">
40
+ <div class="{{prefix}}--header--inner {{ prefix }}--container">
38
41
  <div class="{{prefix}}--mobile--nav">
39
42
  <div class="{{prefix}}--mobile--nav--logo">
40
43
  <a href="{{siteurl}}" class="{{prefix}}--header--logo-link">
@@ -68,7 +71,7 @@
68
71
  </div>
69
72
  <!-- /.{{prefix}}--mobile--nav--language--switcher -->
70
73
  <div class="{{prefix}}--mobile--nav--language--select">
71
- <div class="{{prefix}}--header--inner">
74
+ <div class="{{prefix}}--header--inner {{ prefix }}--container">
72
75
  <div class="{{prefix}}--mobile--subnav--menu">
73
76
  <button class="{{prefix}}--mobile--subnav--back" type="button">{{subnav.mobilebacklabel}}</button>
74
77
  <button class="{{prefix}}--header--menu--close">{{subnav.mobilecloselabel}}</button>
@@ -109,7 +112,7 @@
109
112
  <!-- /.{{prefix}}--header--inner -->
110
113
  {% if subnav %}
111
114
  <nav class="{{prefix}}--subnav" aria-labelledby="secondary-navigation">
112
- <div class="{{prefix}}--subnav--inner">
115
+ <div class="{{prefix}}--subnav--inner {{ prefix }}--container">
113
116
  <div class="{{prefix}}--mobile--subnav">
114
117
  <div class="{{prefix}}--mobile--subnav--menu">
115
118
  <button class="{{prefix}}--mobile--subnav--back" type="button">{{subnav.mobilebacklabel}}</button>
@@ -133,7 +136,7 @@
133
136
  {% endif %}
134
137
 
135
138
  <div class="{{prefix}}--search-box">
136
- <div class="{{prefix}}--header--inner">
139
+ <div class="{{prefix}}--header--inner {{ prefix }}--container">
137
140
  {% include '@components/form/form.twig' with {
138
141
  attributes: {
139
142
  action: searchfield.action,