@ilo-org/twig 0.8.2 → 0.9.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.
Files changed (10) hide show
  1. package/.turbo/turbo-build:lib.log +2 -2
  2. package/CHANGELOG.md +22 -0
  3. package/images/publication.jpg +0 -0
  4. package/package.json +3 -3
  5. package/src/patterns/components/card/card.wingsuit.yml +25 -16
  6. package/src/patterns/components/card_data/card_data.twig +73 -37
  7. package/src/patterns/components/card_data/card_data.wingsuit.yml +78 -19
  8. package/src/patterns/components/cardgroup/cardgroup.twig +1 -1
  9. package/src/patterns/components/cardgroup/cardgroup.wingsuit.yml +65 -10
  10. package/src/patterns/components/picture/picture.twig +2 -2
package/.turbo/turbo-build:lib.log CHANGED
@@ -1,9 +1,9 @@
1
1
 
2
- > @ilo-org/twig@0.8.2 build:lib /home/runner/work/designsystem/designsystem/packages/twig
2
+ > @ilo-org/twig@0.9.1 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.8.2 output /home/runner/work/designsystem/designsystem/packages/twig
7
+ > @ilo-org/twig@0.9.1 output /home/runner/work/designsystem/designsystem/packages/twig
8
8
  > node outputtwigs.js
9
9
 
package/CHANGELOG.md CHANGED
@@ -1,5 +1,27 @@
1
1
  # @ilo-org/twig
2
2
 
3
+ ## 0.9.1
4
+
5
+ ### Patch Changes
6
+
7
+ - 76e3c3efa: build(deps-dev): bump lodash from 4.17.20 to 4.17.21
8
+ - b90ff5984: Add `size` prop back to Card Group so that it can be used to set layout options.
9
+ - Updated dependencies [5887810c3]
10
+ - @ilo-org/styles@0.8.1
11
+
12
+ ## 0.9.0
13
+
14
+ ### Minor Changes
15
+
16
+ - 9edcc451f: Add 2-column layout for Data Cards. `columns` setting allows users to choose preferred layout option.
17
+
18
+ ### Patch Changes
19
+
20
+ - 289d2f3f6: Fix response images not working when only one breakpoint url is provided
21
+ - Updated dependencies [9edcc451f]
22
+ - Updated dependencies [9edcc451f]
23
+ - @ilo-org/styles@0.8.0
24
+
3
25
  ## 0.8.2
4
26
 
5
27
  ### Patch Changes
package/images/publication.jpg ADDED
Binary file
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@ilo-org/twig",
3
- "version": "0.8.2",
3
+ "version": "0.9.1",
4
4
  "license": "Apache-2.0",
5
5
  "description": "Twig components for the ILO's Design System",
6
6
  "main": "",
@@ -25,7 +25,7 @@
25
25
  "@ilo-org/brand-assets": "0.1.0",
26
26
  "@ilo-org/fonts": "0.1.0",
27
27
  "@ilo-org/icons": "0.2.1",
28
- "@ilo-org/styles": "0.7.2",
28
+ "@ilo-org/styles": "0.8.1",
29
29
  "@ilo-org/themes": "0.2.0",
30
30
  "@ilo-org/utils": "0.0.11"
31
31
  },
@@ -55,7 +55,7 @@
55
55
  "fs-extra": "^8.1.0",
56
56
  "glob": "^7.2.3",
57
57
  "jquery-once": "^2.2.3",
58
- "lodash": "^4.17.20",
58
+ "lodash": "^4.17.21",
59
59
  "mini-css-extract-plugin": "^1.6.2",
60
60
  "optimize-css-assets-webpack-plugin": "^5.0.8",
61
61
  "postcss": "^8.4.21",
package/src/patterns/components/card/card.wingsuit.yml CHANGED
@@ -13,33 +13,31 @@ card:
13
13
  url: "https://www.ilo.org/"
14
14
  dataset:
15
15
  type: object
16
- label: Dataset
17
- description: Only used by the `Data Card`. Object that renders the different groups of content.
16
+ label: Dataset object
17
+ description: Array of Content (label, copy), Files object (optional headline, array of items with label and url) and Links object (optional headline, array of items with label and url). Only used by `Data Card`.
18
18
  preview:
19
19
  content:
20
20
  items:
21
- - label: Date
21
+ - label: Date of publication
22
22
  copy: 17 March 2022
23
- - label: Event type
24
- copy: Technical meeting of experts
25
23
  files:
26
- headline: Files
24
+ headline: Files for download
27
25
  items:
28
- - label: Meeting agenda
26
+ - label: PDF 3.2 MB
29
27
  url: "https://www.ilo.org"
30
- - label: Briefing notes
28
+ - label: EPUB 5.8 MB
31
29
  url: "https://www.ilo.org"
32
- - label: Practical info
30
+ - label: MOBI 2.4 MB
33
31
  url: "https://www.ilo.org"
34
32
  links:
35
- headline: Languages
33
+ headline: Also available in
36
34
  items:
37
- - label: English
38
- url: "https://www.ilo.org/search?q=link"
39
- - label: Español
40
- url: "https://www.ilo.org/search?q=hyperlink"
41
- - label: Français
42
- url: "https://www.ilo.org/search?q=url"
35
+ - label: English
36
+ url: "https://www.ilo.org/search?q=link"
37
+ - label: Español
38
+ url: "https://www.ilo.org/search?q=hyperlink"
39
+ - label: Français
40
+ url: "https://www.ilo.org/search?q=url"
43
41
  date:
44
42
  type: object
45
43
  label: Date
@@ -135,6 +133,14 @@ card:
135
133
  yellow: yellow
136
134
  blue: blue
137
135
  preview: "blue"
136
+ columns:
137
+ type: select
138
+ label: columns
139
+ description: Displays the data in one or two columns when the size is set to `wide` or `fluid`. If not set, the card will appear as `one`. Only used by `Data Card`.
140
+ options:
141
+ one: one
142
+ two: two
143
+ preview: "one"
138
144
  cornercut:
139
145
  type: select
140
146
  label: cornercut
@@ -212,6 +218,9 @@ card:
212
218
  label: Data Card
213
219
  settings:
214
220
  type: data
221
+ fields:
222
+ eyebrow: Flagship report
223
+ image:
215
224
  stat:
216
225
  label: Stat Card
217
226
  settings:
package/src/patterns/components/card_data/card_data.twig CHANGED
@@ -1,48 +1,84 @@
1
1
  {#
2
2
  DATA CARD COMPONENT
3
3
  #}
4
- <div class="{{prefix}}--card {{prefix}}--card__type__data {{prefix}}--card__size__{{size}}">
4
+
5
+ {% if not columns %}
6
+ {% set columns = "one" %}
7
+ {% endif %}
8
+
9
+ {# Different layout options to apply depending on if the card has an image
10
+ or if it has links. If it has two columns with image, then image goes on one side
11
+ and content goes on the other. If it has two columns witout image but links, then
12
+ links go on one side and the rest of the content goes on the other. Otherwise, flow
13
+ all content normally. #}
14
+ {% if image %}
15
+ {% set content = "with-image" %}
16
+ {% elseif not image and dataset.links %}
17
+ {% set content = "no-image-with-links" %}
18
+ {% else %}
19
+ {% set content = "default" %}
20
+ {% endif %}
21
+
22
+
23
+ <div class="{{prefix}}--card {{prefix}}--card__type__data {{prefix}}--card__size__{{size}} {{prefix}}--card__type__data__columns__{{columns}}">
5
24
  <div class="{{prefix}}--card--wrap">
6
- <div class="{{prefix}}--card--content">
7
- {% if eyebrow %}
8
- <p class="{{prefix}}--card--eyebrow">{{eyebrow}}</p>
9
- {% endif %}
25
+ {% if not image and eyebrow %}
26
+ <div class="{{prefix}}--card--eyebrow">{{ eyebrow }}</div>
27
+ {% endif %}
28
+ <div class="{{prefix}}--card--content {{prefix}}--card--content__{{ content }}">
10
29
  {% if image %}
11
- <div class="{{prefix}}--card--image--wrapper">
12
- {% include "@components/picture/picture.twig" with {
13
- image: image,
14
- class: "card"
15
- }
16
- %}
30
+ <div class="{{prefix}}--card--area--image">
31
+ {% if eyebrow %}
32
+ <div class="{{prefix}}--card--eyebrow">{{ eyebrow }}</div>
33
+ {% endif %}
34
+ <div class="{{prefix}}--card--image">
35
+ {% include "@components/picture/picture.twig" with { image: image, class: "card" } %}
17
36
  </div>
37
+ </div>
18
38
  {% endif %}
19
- {% if dataset %}
20
- {% if dataset.content %}
21
- {% for item in dataset.content.items %}
22
- <p class="{{prefix}}--card__type__data--content-label">{{ item.label }}</p>
23
- <p class="{{prefix}}--card__type__data--content-copy">{{ item.copy }}</p>
24
- {% endfor %}
25
- {% endif %}
26
- {% if dataset.files %}
27
- <div class="{{prefix}}--card__type__data--content-files">
28
- <p class="{{prefix}}--card__type__data--content-label">{{ dataset.files.headline }}</p>
29
- {% for item in dataset.files.items %}
30
- <a class="{{prefix}}--card__type__data--file {{prefix}}--button {{prefix}}--button--primary {{prefix}}--button--small" href="{{item.url}}"><span class="button__label" download>{{ item.label }}</span></a>
31
- {% endfor %}
32
- </div>
33
- {% endif %}
34
- {% if dataset.links %}
35
- <div class="{{prefix}}--card__type__data--content-links">
36
- <p class="{{prefix}}--card__type__data--content-label">{{ dataset.links.headline }}</p>
37
- {% for item in dataset.links.items %}
38
- {% include "@components/link/link.twig" with {
39
- url: item.url,
40
- label: item.label,
41
- prefix: prefix
42
- } %} <span>&nbsp;</span>
43
- {% endfor %}
39
+ {% if dataset.content %}
40
+ {% for item in dataset.content.items %}
41
+ <div class="{{prefix}}--card--area--content">
42
+ {% block content_item %}
43
+ <p class="{{prefix}}--card__type__data--content-label">{{ item.label }}</p>
44
+ <p class="{{prefix}}--card__type__data--content-copy">{{ item.copy }}</p>
45
+ {% endblock %}
44
46
  </div>
45
- {% endif %}
47
+ {% endfor %}
48
+ {% endif %}
49
+ {% if dataset.files %}
50
+ <div class="{{prefix}}--card--area--files">
51
+ {% block area_files %}
52
+ <div class="{{prefix}}--card__type__data--content-files">
53
+ <p class="{{prefix}}--card__type__data--content-label">{{ dataset.files.headline }}</p>
54
+ {% for item in dataset.files.items %}
55
+ {% include "@components/button/button.twig" with {
56
+ type: "primary",
57
+ size: "small",
58
+ url: item.url,
59
+ label: item.label,
60
+ prefix: prefix
61
+ } only %}
62
+ {% endfor %}
63
+ </div>
64
+ {% endblock %}
65
+ </div>
66
+ {% endif %}
67
+ {% if dataset.links %}
68
+ <div class="{{prefix}}--card--area--links">
69
+ {% block area_links %}
70
+ <div class="{{prefix}}--card__type__data--content-links">
71
+ <p class="{{prefix}}--card__type__data--content-label">{{ dataset.links.headline }}</p>
72
+ {% for item in dataset.links.items %}
73
+ {% include "@components/link/link.twig" with {
74
+ url: item.url,
75
+ label: item.label,
76
+ prefix: prefix
77
+ } only %}
78
+ {% endfor %}
79
+ </div>
80
+ {% endblock %}
81
+ </div>
46
82
  {% endif %}
47
83
  </div>
48
84
  </div>
package/src/patterns/components/card_data/card_data.wingsuit.yml CHANGED
@@ -11,33 +11,51 @@ datacard:
11
11
  preview:
12
12
  content:
13
13
  items:
14
- - label: Date
14
+ - label: Date of publication
15
15
  copy: 17 March 2022
16
- - label: Event type
17
- copy: Technical meeting of experts
16
+ - label: Published by
17
+ copy: "ILO Department of Research"
18
18
  files:
19
- headline: Files
19
+ headline: Files for download
20
20
  items:
21
- - label: Meeting agenda
21
+ - label: PDF 3.2 MB
22
22
  url: "https://www.ilo.org"
23
- - label: Briefing notes
23
+ - label: EPUB 5.8 MB
24
24
  url: "https://www.ilo.org"
25
- - label: Practical info
25
+ - label: MOBI 2.4 MB
26
26
  url: "https://www.ilo.org"
27
27
  links:
28
- headline: Languages
28
+ headline: Also available in
29
29
  items:
30
30
  - label: English
31
31
  url: "https://www.ilo.org/search?q=link"
32
32
  - label: Español
33
33
  url: "https://www.ilo.org/search?q=hyperlink"
34
+ - label: Dansk
35
+ url: "https://www.ilo.org/search?q=url"
36
+ - label: Deutsch
37
+ url: "https://www.ilo.org/search?q=url"
34
38
  - label: Français
35
39
  url: "https://www.ilo.org/search?q=url"
40
+ - label: Italiano
41
+ url: "https://www.ilo.org/search?q=url"
42
+ - label: Português
43
+ url: "https://www.ilo.org/search?q=url"
44
+ - label: Русский
45
+ url: "https://www.ilo.org/search?q=url"
46
+ - label: 中文
47
+ url: "https://www.ilo.org/search?q=url"
48
+ - label: العربية
49
+ url: "https://www.ilo.org/search?q=url"
50
+ - label: Ελληνικά
51
+ url: "https://www.ilo.org/search?q=url"
52
+ - label: Nederlands
53
+ url: "https://www.ilo.org/search?q=url"
36
54
  eyebrow:
37
55
  type: string
38
56
  label: Eyebrow
39
57
  description: Eyebrow copy
40
- preview: "Podcast"
58
+ preview: Flagship report
41
59
  image:
42
60
  type: object
43
61
  label: Image
@@ -46,26 +64,67 @@ datacard:
46
64
  alt: "Image alt text"
47
65
  loading: "lazy"
48
66
  url:
49
- - breakpoint: "(min-width: 0px)"
50
- src: "/images/small.jpg"
51
- - breakpoint: "(min-width: 800px)"
52
- src: "/images/medium.jpg"
53
- - breakpoint: "(min-width: 1200px)"
54
- src: "/images/large.jpg"
55
- - breakpoint: "(min-width: 1440px)"
56
- src: "/images/large.jpg"
67
+ - breakpoint: "(min-width: 0px)"
68
+ src: "/images/publication.jpg"
57
69
  settings:
58
70
  size:
59
71
  type: select
60
72
  label: size
61
73
  description: Sets the size of the card. If not set, the card will appear as `narrow`.
62
74
  required: false
63
- preview: "narrow"
75
+ preview: narrow
64
76
  options:
65
77
  narrow: narrow
66
78
  wide: wide
67
79
  fluid: fluid
68
-
80
+ columns:
81
+ type: select
82
+ label: Columns
83
+ description: Displays the data in one or two columns. If not set, the card will appear as `one`.
84
+ required: false
85
+ preview: one
86
+ options:
87
+ one: one
88
+ two: two
89
+ variants:
90
+ default:
91
+ label: Default
92
+ no_image:
93
+ label: No image
94
+ fields:
95
+ image: false
96
+ two_columns:
97
+ label: Two columns
98
+ settings:
99
+ columns: two
100
+ size: wide
101
+ two_columns_no_image:
102
+ label: Two columns without image
103
+ settings:
104
+ columns: two
105
+ size: wide
106
+ fields:
107
+ image: false
108
+ two_columns_no_links:
109
+ label: Two columns without image or links
110
+ settings:
111
+ columns: two
112
+ size: wide
113
+ fields:
114
+ image: false
115
+ dataset:
116
+ content:
117
+ items:
118
+ - label: Date of publication
119
+ copy: 5 June 2023
120
+ files:
121
+ headline: Files for download
122
+ items:
123
+ - label: PDF 3.2 MB
124
+ url: "https://www.ilo.org"
125
+ - label: EPUB 5.8 MB
126
+ url: "https://www.ilo.org"
127
+ links: false
69
128
 
70
129
 
71
130
 
package/src/patterns/components/cardgroup/cardgroup.twig CHANGED
@@ -6,7 +6,7 @@
6
6
  {% for card in group %}
7
7
  <div class="{{prefix}}--cardgroup--card">
8
8
  {% include "@components/card/card.twig" with {
9
- size: "fluid",
9
+ size: size,
10
10
  theme: theme,
11
11
  type: type,
12
12
  cta: card.cta,
package/src/patterns/components/cardgroup/cardgroup.wingsuit.yml CHANGED
@@ -16,7 +16,7 @@ cardgroup:
16
16
  cardcount:
17
17
  type: select
18
18
  label: collapsed
19
- description: Number of cards to show in a row, also determines the width of the cards as a function of how many there need to be. As a result, passing `size` to the individual cards has no effect since the card group manages the size of the cards.
19
+ description: Number of cards to show in a row, also determines the width of the cards as a function of how many there need to be. This will override the width set in the `size` setting.
20
20
  required: false
21
21
  preview: "three"
22
22
  options:
@@ -34,6 +34,17 @@ cardgroup:
34
34
  start: start
35
35
  center: center
36
36
  between: between
37
+ size:
38
+ type: select
39
+ label: Size
40
+ description: Sets the layout of the cards in the group. See the `Card` component for more info on this setting, which has different effects on the different types of cards.
41
+ required: false
42
+ preview: "standard"
43
+ options:
44
+ standard: standard
45
+ narrow: narrow
46
+ wide: wide
47
+ fluid: fluid
37
48
  theme:
38
49
  type: select
39
50
  label: Theme
@@ -61,40 +72,84 @@ cardgroup:
61
72
  group:
62
73
  type: object
63
74
  label: Group of cards
64
- description: "The group of cards. Each card can be one of the following types: multilink, feature, detail, graphicpromo, stat, graphic, factlist, data. All fields are passed to cards except for size, which is managed by the card group."
75
+ description: "The group of cards. Each card can be one of the following types: multilink, feature, detail, graphicpromo, stat, graphic, factlist, data."
65
76
  preview:
66
- - type: text
67
- eyebrow: "Podcast"
77
+ - eyebrow: "Podcast"
68
78
  title: "Can digital technology be an equality machine?"
69
79
  link: "https://www.ilo.org/"
70
80
  cta:
71
81
  label: "Read the press release"
72
82
  url: "https://www.ilo.org/global/about-the-ilo/newsroom/news/WCMS_846303/lang--en/index.htm"
73
83
  theme: dark
74
- - type: text
75
- eyebrow: "Podcast"
84
+ image:
85
+ alt: "Image alt text"
86
+ loading: "lazy"
87
+ url:
88
+ - breakpoint: "(min-width: 0px)"
89
+ src: "/images/small.jpg"
90
+ - breakpoint: "(min-width: 800px)"
91
+ src: "/images/medium.jpg"
92
+ - breakpoint: "(min-width: 1200px)"
93
+ src: "/images/large.jpg"
94
+ - breakpoint: "(min-width: 1440px)"
95
+ src: "/images/large.jpg"
96
+ - eyebrow: "Podcast"
76
97
  title: "Can digital technology be an equality machine?"
77
98
  link: "https://www.ilo.org/"
78
99
  cta:
79
100
  label: "Read the press release"
80
101
  url: "https://www.ilo.org/global/about-the-ilo/newsroom/news/WCMS_846303/lang--en/index.htm"
81
102
  theme: dark
82
- - type: text
83
- eyebrow: "Podcast"
103
+ image:
104
+ alt: "Image alt text"
105
+ loading: "lazy"
106
+ url:
107
+ - breakpoint: "(min-width: 0px)"
108
+ src: "/images/small.jpg"
109
+ - breakpoint: "(min-width: 800px)"
110
+ src: "/images/medium.jpg"
111
+ - breakpoint: "(min-width: 1200px)"
112
+ src: "/images/large.jpg"
113
+ - breakpoint: "(min-width: 1440px)"
114
+ src: "/images/large.jpg"
115
+ - eyebrow: "Podcast"
84
116
  title: "Can digital technology be an equality machine?"
85
117
  link: "https://www.ilo.org/"
86
118
  cta:
87
119
  label: "Read the press release"
88
120
  url: "https://www.ilo.org/global/about-the-ilo/newsroom/news/WCMS_846303/lang--en/index.htm"
89
121
  theme: dark
90
- - type: text
91
- eyebrow: "Podcast"
122
+ image:
123
+ alt: "Image alt text"
124
+ loading: "lazy"
125
+ url:
126
+ - breakpoint: "(min-width: 0px)"
127
+ src: "/images/small.jpg"
128
+ - breakpoint: "(min-width: 800px)"
129
+ src: "/images/medium.jpg"
130
+ - breakpoint: "(min-width: 1200px)"
131
+ src: "/images/large.jpg"
132
+ - breakpoint: "(min-width: 1440px)"
133
+ src: "/images/large.jpg"
134
+ - eyebrow: "Podcast"
92
135
  title: "Can digital technology be an equality machine?"
93
136
  link: "https://www.ilo.org/"
94
137
  cta:
95
138
  label: "Read the press release"
96
139
  url: "https://www.ilo.org/global/about-the-ilo/newsroom/news/WCMS_846303/lang--en/index.htm"
97
140
  theme: dark
141
+ image:
142
+ alt: "Image alt text"
143
+ loading: "lazy"
144
+ url:
145
+ - breakpoint: "(min-width: 0px)"
146
+ src: "/images/small.jpg"
147
+ - breakpoint: "(min-width: 800px)"
148
+ src: "/images/medium.jpg"
149
+ - breakpoint: "(min-width: 1200px)"
150
+ src: "/images/large.jpg"
151
+ - breakpoint: "(min-width: 1440px)"
152
+ src: "/images/large.jpg"
98
153
  cta:
99
154
  type: object
100
155
  label: CTA
package/src/patterns/components/picture/picture.twig CHANGED
@@ -4,7 +4,7 @@
4
4
  {% if image.url is iterable %}
5
5
  <picture>
6
6
  {% for img in image.url|reverse %}
7
- {% if loop.last == false %}
7
+ {% if loop.length == 1 or loop.last == false %}
8
8
  {% if img.breakpoint matches '/^\\d+$/' %}
9
9
  <source srcset="{{img.src}}" media="(min-width: {{img.breakpoint}}px)">
10
10
  {% else %}
@@ -12,7 +12,7 @@
12
12
  {% endif %}
13
13
  {% endif %}
14
14
  {% endfor %}
15
- <img class="{{prefix}}--{{class}}--picture" src="{{image|reverse|last.src}}" alt="{{image.alt}}" {% if image.loading %} loading="{{ image.loading }}" {% endif %}>
15
+ <img class="{{prefix}}--{{class}}--picture" src="{{image.url|reverse|last.src}}" alt="{{image.alt}}" {% if image.loading %} loading="{{ image.loading }}" {% endif %}>
16
16
  </picture>
17
17
  {% else %}
18
18
  <picture>