@ilo-org/twig 0.2.13 → 0.2.14

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.
@@ -1,8 +1,9 @@
1
1
 
2
- > @ilo-org/twig@0.2.13 build:lib /home/runner/work/designsystem/designsystem/packages/twig
3
- > pnpm output
2
+ > @ilo-org/twig@0.2.14 build:lib /home/runner/work/designsystem/designsystem/packages/twig
3
+ > node importprefix.js; node importsvgs.js; pnpm output
4
4
 
5
+ theme prefix added
5
6
 
6
- > @ilo-org/twig@0.2.13 output /home/runner/work/designsystem/designsystem/packages/twig
7
+ > @ilo-org/twig@0.2.14 output /home/runner/work/designsystem/designsystem/packages/twig
7
8
  > node outputtwigs.js
8
9
 
package/CHANGELOG.md CHANGED
@@ -1,5 +1,12 @@
1
1
  # @ilo-org/twig
2
2
 
3
+ ## 0.2.14
4
+
5
+ ### Patch Changes
6
+
7
+ - Updated dependencies [1405b9cbf]
8
+ - @ilo-org/styles@0.1.19
9
+
3
10
  ## 0.2.13
4
11
 
5
12
  ### Patch Changes
@@ -0,0 +1 @@
1
+ prefix: ilo
@@ -14,6 +14,7 @@ module.exports = {
14
14
  from: "../../node_modules/@ilo-org/brand-assets/dist/assets/",
15
15
  to: "/brand-assets",
16
16
  },
17
+ { from: "../../node_modules/@ilo-org/fonts/font-css", to: "/fonts" },
17
18
  ],
18
19
  webpackFinal: (config) => {
19
20
  const final = wingsuitCore.getAppPack(
@@ -1,2 +1,64 @@
1
1
  <!-- .storybook/manager-head.html -->
2
- <link rel="icon" type="image/x-icon" href="images/favicon.ico" />
2
+ <style>
3
+ @import url("/fonts/fonts-google.css");
4
+ @import url("https://fonts.googleapis.com/css2?family=Fira+Code&display=swap");
5
+ </style>
6
+
7
+ <link
8
+ rel="icon"
9
+ type="image/x-icon"
10
+ href="https://www.ilo.org/wcmsp5/ilo/global/images/templates/favicons/favicon.ico"
11
+ />
12
+
13
+ <style>
14
+ :root {
15
+ --ilo-white: #fff;
16
+ --ilo-dark-blue: #230050;
17
+ --ilo-light-blue: #ffcd2d;
18
+ --ilo-turquoise: #05d2d2;
19
+ --ilo-purple: #960a55;
20
+ --ilo-light-blue: rgba(235, 245, 253, 1);
21
+ }
22
+
23
+ body {
24
+ font-family: "Noto Sans", sans-serif;
25
+ }
26
+
27
+ a[id*="overview"] > svg {
28
+ color: var(--ilo-purple);
29
+ font-family: "Overpass", sans-serif;
30
+ }
31
+
32
+ a:not[id*="overview"] > svg {
33
+ color: var(--ilo-turquoise);
34
+ }
35
+
36
+ /* Remount component */
37
+ button[title="Remount component"]:hover,
38
+ button[title="Zoom in"]:hover,
39
+ button[title="Zoom out"]:hover,
40
+ button[title="Reset zoom"]:hover,
41
+ button[title="Change the background of the preview"]:hover,
42
+ button[title="Apply a grid to the preview"]:hover,
43
+ button[title="Change the size of the preview"]:hover,
44
+ button[title="Enable measure"]:hover,
45
+ button[title="Apply outlines to the preview"]:hover,
46
+ button[title="Vision simulator"]:hover,
47
+ button[title="Go full screen [F]"]:hover,
48
+ a[title="Open canvas in new tab"]:hover,
49
+ button[title="Copy canvas link"]:hover {
50
+ color: var(--ilo-dark-blue);
51
+ background-color: var(--ilo-light-blue);
52
+ }
53
+
54
+ button.sto-1qova3h,
55
+ button.sto-4f61h0,
56
+ button[title="Rotate viewport"]:hover {
57
+ color: var(--ilo-light-blue);
58
+ }
59
+
60
+ button.tabbutton:active,
61
+ button.tabbutton:focus {
62
+ border-bottom-color: var(--ilo-light-blue);
63
+ }
64
+ </style>
@@ -8,66 +8,45 @@ import LinkTo from "@storybook/addon-links/react";
8
8
  parameters={{ viewMode: "docs", previewTabs: { canvas: { hidden: true } } }}
9
9
  />
10
10
 
11
- ### Current Project Status: _Proof of Concept_
11
+ # ILO Design System
12
12
 
13
- Browse example stories now by navigating to them in the sidebar.
14
- View their code in the `src/stories` directory to learn how they work.
13
+ ## Twig Component Library
15
14
 
16
- <div style={{ paddingTop: "40px", color: "inherit" }}>
17
- <h2
18
- style={{
19
- fontFamily: "Overpass",
20
- fontSize: "56.95px",
21
- fontWeight: "700",
22
- marginBottom: "40px",
23
- border: "none",
24
- }}
25
- >
26
- ILO Design System
27
- </h2>
28
- <h3
29
- style={{
30
- fontFamily: "Overpass",
31
- fontSize: "45.56px",
32
- fontWeight: "700",
33
- marginBottom: "40px",
34
- }}
35
- >
36
- Twig Component Library 0.2.3
37
- </h3>
15
+ <div>
38
16
  <a
39
17
  class="ilo--button ilo--button--large ilo--button--primary optionalclass"
40
18
  href="/docs/introduction--page"
41
19
  target="true"
42
20
  rel="noopener noreferrer"
43
- style={{ color: "inherit", marginRight: "20px" }}
21
+ style={{ margin: "1rem 20px 0 0" }}
44
22
  >
45
23
  <span class="link__label">Get started</span>
46
24
  </a>
47
25
  <a
48
- class="ilo--button ilo--button--large ilo--button--primary optionalclass"
49
- href="https://github.com/international-labour-organization/designsystem"
26
+ class="ilo--button ilo--button--large ilo--button--tertiary optionalclass"
27
+ href="https://brand.ilo.org"
50
28
  target="true"
51
29
  rel="noopener noreferrer"
52
- style={{ color: "inherit", marginRight: "20px" }}
30
+ style={{ margin: "1rem 20px 0 0" }}
53
31
  >
54
- <span class="link__label">Follow on Github</span>
32
+ <span class="link__label">Design Docs</span>
55
33
  </a>
56
34
  <a
57
- class="ilo--button ilo--button--large ilo--button--primary optionalclass"
58
- href="https://brand.ilo.org"
35
+ class="ilo--button ilo--button--large ilo--button--tertiary optionalclass"
36
+ href="https://github.com/international-labour-organization/designsystem"
59
37
  target="true"
60
38
  rel="noopener noreferrer"
61
- style={{ color: "inherit", marginRight: "20px" }}
39
+ style={{ margin: "1rem 20px 0 0" }}
62
40
  >
63
- <span class="link__label">See Design Docs</span>
41
+ <span class="link__label">Follow on Github</span>
64
42
  </a>
43
+
65
44
  <a
66
- class="ilo--button ilo--button--large ilo--button--primary optionalclass"
67
- href="https://ilo-ui-react.netlify.app"
45
+ class="ilo--button ilo--button--large ilo--button--tertiary optionalclass"
46
+ href="https://react.ui.ilo.org"
68
47
  target="true"
69
48
  rel="noopener noreferrer"
70
- style={{ color: "inherit", marginRight: "20px" }}
49
+ style={{ margin: "1rem 0 0" }}
71
50
  >
72
51
  <span class="link__label">ILO Design System for React</span>
73
52
  </a>
@@ -1 +1,25 @@
1
+ @import "@ilo-org/themes/build/scss/tokens";
1
2
  @import "@ilo-org/styles/scss/monorepo";
3
+
4
+ h1,
5
+ h2,
6
+ h3,
7
+ h4,
8
+ h5 {
9
+ font-family: "Overpass", sans-serif !important;
10
+ }
11
+
12
+ button[title="Zoom in"]:hover,
13
+ button[title="Zoom out"]:hover,
14
+ button[title="Reset zoom"]:hover {
15
+ color: $brand-ilo-dark-blue;
16
+ background-color: $brand-ilo-light-blue;
17
+ }
18
+
19
+ a[class*="ilo--button"] {
20
+ color: $brand-ilo-dark-blue;
21
+
22
+ &:hover {
23
+ color: $brand-ilo-blue;
24
+ }
25
+ }
@@ -1,11 +1,46 @@
1
1
  // .storybook/YourTheme.js
2
2
 
3
3
  import { create } from "@storybook/theming";
4
+ import ilo_logo from "@ilo-org/brand-assets/dist/assets/logo_en_horizontal_blue.svg";
5
+ import brandColors from "@ilo-org/themes/tokens/brand/base.json";
6
+
7
+ const { brand } = brandColors;
4
8
 
5
9
  export default create({
6
10
  base: "light",
7
- brandTitle: "ILO UI Kit",
11
+ brandTitle: "ILO Design System for Twig",
8
12
  brandUrl: "https://www.ilo.org/",
9
- brandImage:
10
- "https://www.ilo.org/wcmsp5/ilo/global/images/templates/favicons/apple-touch-icon-precomposed.png",
13
+ brandImage: ilo_logo,
14
+ brandTarget: "_self",
15
+
16
+ colorPrimary: brand["ilo-dark-blue"].value,
17
+ colorSecondary: brand["ilo-blue"].value,
18
+
19
+ // UI
20
+ appBg: brand["ilo-lighter-blue"].value,
21
+ appContentBg: brand["ilo-white"].value,
22
+ appBorderColor: brand["ilo-grey-ui"].value,
23
+ appBorderRadius: 0,
24
+
25
+ fontBase: "'Noto Sans', sans-serif",
26
+ fontCode: "'Fira Code', monospace",
27
+
28
+ // Text colors
29
+ textColor: brand["ilo-dark-blue"].value,
30
+ textInverseColor: brand["ilo-white"].value,
31
+ textMutedColor: brand["ilo-grey-accessible"].value,
32
+
33
+ // Toolbar default and active colors
34
+ barTextColor: brand["ilo-white"].value,
35
+ barSelectedColor: brand["ilo-yellow"].value,
36
+ barBg: brand["ilo-dark-blue"].value,
37
+
38
+ buttonBg: brand["ilo-white"].value,
39
+ buttonBorder: brand["ilo-grey-ui"].value,
40
+ booleanBg: brand["ilo-lighter-blue"].value,
41
+ booleanSelectedBg: brand["ilo-white"].value,
42
+ inputBg: brand["ilo-lighter-blue"].value,
43
+ inputBorder: brand["ilo-grey-ui"].value,
44
+ inputTextColor: brand["ilo-dark-blue"].value,
45
+ inputBorderRadius: 3,
11
46
  });
Binary file
Binary file
Binary file
Binary file
Binary file
Binary file
Binary file
Binary file
Binary file
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@ilo-org/twig",
3
- "version": "0.2.13",
3
+ "version": "0.2.14",
4
4
  "license": "Apache-2.0",
5
5
  "description": "Twig components for the ILO's Design System",
6
6
  "main": "",
@@ -24,7 +24,7 @@
24
24
  "@ilo-org/brand-assets": "0.1.0",
25
25
  "@ilo-org/fonts": "0.1.0",
26
26
  "@ilo-org/icons": "0.1.16",
27
- "@ilo-org/styles": "0.1.18",
27
+ "@ilo-org/styles": "0.1.19",
28
28
  "@ilo-org/themes": "0.1.15",
29
29
  "@ilo-org/utils": "0.0.11"
30
30
  },
@@ -79,7 +79,7 @@
79
79
  "scripts": {
80
80
  "storybook": "node importprefix.js; node importsvgs.js; start-storybook --config-dir apps/storybook",
81
81
  "build:docs": "node importprefix.js; node importsvgs.js; build-storybook --config-dir apps/storybook -o ./storybook-static",
82
- "build:lib": "pnpm output",
82
+ "build:lib": "node importprefix.js; node importsvgs.js; pnpm output",
83
83
  "build": "pnpm build:lib",
84
84
  "lint:js": "eslint . --ext .js,.jsx",
85
85
  "lint:css": "stylelint '**/*.css'",
@@ -1,7 +1,7 @@
1
1
  card:
2
2
  use: "@components/card/card.twig"
3
3
  label: Card
4
- description: The Card presents an image banner.
4
+ description: Cards display prominent content of a page layout, with information and actions about a single subject, they typically contain a link to a new page or downloadable content.
5
5
  fields:
6
6
  title:
7
7
  type: string
@@ -12,7 +12,7 @@ card:
12
12
  type: string
13
13
  label: Intro
14
14
  description: Intro copy text
15
- preview: "Brief intro text - ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua."
15
+ preview: "A toxic combination of mutually-reinforcing crises inflation, debt, food and fuel price rises, geopolitical tensions and conflict, climate change are threatening to increase poverty, inequality and discrimination worldwide."
16
16
  eyebrow:
17
17
  type: string
18
18
  label: Eyebrow
@@ -44,7 +44,7 @@ card:
44
44
  type: string
45
45
  label: Link
46
46
  description: Link for clickable cards. Do no use on `Multilink`, `Factlist`, `Data`, or `Stat` cards.
47
- preview: "https://www.google.com/"
47
+ preview: "https://www.ilo.org/"
48
48
  cta:
49
49
  type: object
50
50
  label: CTA
@@ -128,21 +128,21 @@ card:
128
128
  label: Graphic Text Card
129
129
  description: The graphic Card
130
130
  fields:
131
- title: "Brief title text - ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod"
132
- eyebrow: Eyebrow title
131
+ title: "Why we need greater social justice"
132
+ eyebrow: Podcast
133
133
  date:
134
134
  human: 20 September 2022
135
135
  unix: 1670389200
136
136
  image: ""
137
- link: "https://www.google.com/search?q=graphic"
137
+ link: "https:/www.ilo.org"
138
138
  profile:
139
- avatar: "https://placekitten.com/128/128"
140
- description: "Firstname Lastname is the Senior Media Strategist. He has been with ILO for eight years."
139
+ avatar: "/images/ilo-dg.jpg"
140
+ description: "Gilbert Houngbo is the Director-General of the International Labour Organization"
141
141
  link:
142
142
  - label: "Optional Link"
143
- url: "https://www.google.com"
144
- name: "Firstname Lastname"
145
- role: "Senior Media Strategist"
143
+ url: "https://www.ilo.org"
144
+ name: "Gilbert Houngbo"
145
+ role: "ILO Director-General"
146
146
  stat:
147
147
  label: Stat Card
148
148
  description: The stat Card
@@ -150,116 +150,124 @@ card:
150
150
  theme: light
151
151
  cornercut: cornercut
152
152
  fields:
153
- title: "Date headline"
154
- intro: "Data title - Lorem ipsum dolor sit amet consectetur"
153
+ eyebrow: "Report"
154
+ title: "Global employment growth down by half in 2023"
155
+ intro: The current global economic slowdown is likely to force more workers to accept lower quality, poorly paid jobs which lack job security and social protection, so accentuating inequalities exacerbated by the COVID-19 crisis.
155
156
  source:
156
- label: "Source: lorem ipsum dolor sit amet, 2020"
157
- url: "https://www.google.com/search?q=stat"
157
+ label: "World Employment and Social Outlook: Trends 2023"
158
+ url: "https://www.ilo.org/global/research/global-reports/weso/WCMS_865332/lang--en/index.htm"
158
159
  multilink:
159
160
  label: Multilink Card
160
161
  description: The multilink Card
161
162
  settings:
162
163
  theme: light
163
164
  fields:
164
- title: "Multi-link card - right aligned image, wide option"
165
- image: "https://placekitten.com/475/267"
166
- intro: "Lorem ipsum dolor sit amet consectetur adipiscing elit. Lobortis egestas ipsum dolor sit amet consectetur adipiscing elit. Lobortis egestas ipsum dolor sit amet consectetur adipiscing elit. Lobortis egestas lacus."
165
+ eyebrow: High-level meeting
166
+ title: "ILO welcomes G7 call to make a just transition to a green economy happen"
167
+ image: "/images/hero.jpg"
168
+ intro: "At the end of their meeting the G7 Labour Ministers highlighted the urgent need to greater focus on rights and occupational safety and health."
167
169
  linklist:
168
170
  linkgroup:
169
171
  - links:
170
- - label: Link One
171
- url: "http://www.google.com"
172
- - label: Link Two
173
- url: "http://www.google.com"
174
- - label: Link Three
175
- url: "http://www.google.com"
172
+ - label: Read the press release
173
+ url: "https://www.ilo.org"
174
+ - label: See the statement
175
+ url: "https://www.ilo.org"
176
+ - label: Remarks to G7 Openening Session
177
+ url: "https://www.ilo.org"
176
178
  graphicpromo:
177
179
  label: Graphic Promo Card
178
180
  description: The graphic promo Card
179
181
  fields:
180
- title: "Brief title text - ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod"
181
- intro: "We advance social justice and promote decent work by setting labour standards, developing policies and devising programmes."
182
- link: "https://www.google.com/search?q=graphic-promo"
182
+ eyebrow: High-level meetings
183
+ title: "ILO welcomes G7 call to make a just transition to a green economy happen"
184
+ intro: "At the end of their meeting the G7 Labour Ministers highlighted the urgent need to greater focus on rights and occupational safety and health."
185
+ link: "https://www.ilo.org"
183
186
  cta:
184
- label: "Discover our unique mission"
185
- url: "https://www.google.com/search?q=button"
187
+ label: "Read the press release"
188
+ url: "https://www.ilo.org"
186
189
  feature:
187
190
  label: Feature Card
188
191
  description: The Feature Card
189
192
  fields:
190
- title: "Vertical info card descriptive headline text"
191
- eyebrow: Eyebrow title
193
+ title: "ILO welcomes G7 call to make a just transition to a green economy happen"
194
+ eyebrow: High-level meeting
192
195
  date:
193
- human: Date
196
+ human: 17 March 2022
194
197
  unix: 1670389200
195
- link: "https://www.google.com/search?q=graphic"
196
- image: "https://placekitten.com/412/232"
198
+ link: "https://www.ilo.org/search?q=graphic"
199
+ image: "/images/hero.jpg"
197
200
  linklist:
198
201
  headline: ""
199
202
  linkgroup:
200
203
  - headline: ""
201
204
  links:
202
- - label: Link One
203
- url: "http://www.google.com"
205
+ - label: Read the press release
206
+ url: "https://www.ilo.org"
204
207
  detail:
205
208
  label: Detail Card
206
209
  description: The Detail Card
207
210
  fields:
208
- title: "Horizontal info card descriptive headline text"
209
- intro: "This ILO flagship report details the effects of the COVID-19 crisis on the world of work. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum eu auctor tusrpis, this is 200 characters."
210
- eyebrow: Eyebrow title
211
+ title: "Technical meeting on digitalization in the construction sector"
212
+ intro: "The purpose of the meeting will be to discuss opportunities and challenges for the future of work in the construction industry as a vehicle to ensure a human-centred economic recovery."
213
+ eyebrow: Meeting
211
214
  date:
212
- human: 00 month 0000
215
+ human: 17 March 2022
213
216
  unix: 1670389200
214
- link: "https://www.google.com/search?q=detail"
215
- image: "https://www.ilo.org/wcmsp5/groups/public/---dgreports/---dcomm/documents/image/wcms_856513.jpg"
217
+ link: "https://www.ilo.org"
218
+ image: "/images/medium.jpg"
216
219
  profile:
217
- eventdetails: "8 - 9 February 2022, 8:30 - 12:00 CET | Egypt"
220
+ eventdetails: "8:30 - 12:00 CET | Geneva"
218
221
  factlist:
219
222
  label: Fact List Card
220
223
  description: The Fact List Card
221
224
  fields:
222
- title: "Title of fast fact list"
225
+ eyebrow: Report
226
+ title: "Economic slowdown likely to force workers to accept lower quality jobs"
223
227
  image: ""
224
228
  list:
225
229
  settings:
226
230
  - ordered: unordered
227
231
  - alignment: default
228
232
  items:
229
- - content: "Wipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor."
233
+ - content: "Global employment growth will be only 1.0 per cent in 2023, less than half the level in 2022."
230
234
  id: "list1"
231
- - content: "Nut labore et dolore magna sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua."
235
+ - content: "The labour market deterioration is mainly due to emerging geopolitical tensions and the Ukraine conflict."
232
236
  id: "list2"
237
+ - content: "The current slowdown means that many workers will have to accept lower quality jobs, often at very low pay."
238
+ id: "list3"
233
239
  data:
234
240
  label: Data Card
235
241
  description: The Data Card
236
242
  fields:
237
- eyebrow: "Event details"
243
+ title: Technical meeting on digitalization in the construction sector
244
+ eyebrow: "Meeting"
245
+ intro: The purpose of the meeting will be to discuss opportunities and challenges for the future of work in the construction industry as a vehicle to ensure a human-centred economic recovery.
238
246
  dataset:
239
247
  content:
240
248
  items:
241
249
  - label: Date
242
- copy: Publication date
250
+ copy: 17 March 2022
243
251
  - label: Event type
244
- copy: Event location
252
+ copy: Technical meeting of experts
245
253
  files:
246
254
  headline: Files
247
255
  items:
248
- - label: File/size MB 1
249
- url: "https://www.google.com/search?q=file1"
250
- - label: File/size MB 2
251
- url: "https://www.google.com/search?q=file2"
252
- - label: File/size MB 3
253
- url: "https://www.google.com/search?q=file3"
256
+ - label: Meeting agenda
257
+ url: "https://www.ilo.org"
258
+ - label: Briefing notes
259
+ url: "https://www.ilo.org"
260
+ - label: Practical info
261
+ url: "https://www.ilo.org"
254
262
  links:
255
263
  headline: Languages
256
264
  items:
257
- - label: Language link 1
258
- url: "https://www.google.com/search?q=link"
259
- - label: Language link 2
260
- url: "https://www.google.com/search?q=hyperlink"
261
- - label: Language link 3
262
- url: "https://www.google.com/search?q=url"
265
+ - label: English
266
+ url: "https://www.ilo.org/search?q=link"
267
+ - label: Español
268
+ url: "https://www.ilo.org/search?q=hyperlink"
269
+ - label: Français
270
+ url: "https://www.ilo.org/search?q=url"
263
271
  settings:
264
272
  theme: light
265
273
  visibility: storybook
@@ -14,7 +14,7 @@ cardgroup:
14
14
  description: Button to display after the cards in the group
15
15
  preview:
16
16
  label: "Discover our unique mission"
17
- url: "https://www.google.com/search?q=button"
17
+ url: "https://www.ilo.org"
18
18
  variants:
19
19
  multilink:
20
20
  label: Multilink
@@ -22,7 +22,7 @@ cardgroup:
22
22
  fields:
23
23
  group:
24
24
  - title: "Multi-link card - first"
25
- image: "https://placekitten.com/475/267"
25
+ image: "/images/hero.jpg"
26
26
  intro: "Lorem ipsum dolor sit amet consectetur adipiscing elit. Lobortis egestas ipsum dolor sit amet consectetur adipiscing elit. Lobortis egestas ipsum dolor sit amet consectetur adipiscing elit. Lobortis egestas lacus."
27
27
  eyebrow: ""
28
28
  date: ""
@@ -44,7 +44,7 @@ cardgroup:
44
44
  - label: Link Three
45
45
  url: "http://www.google.com"
46
46
  - title: "Multi-link card second - right aligned image, wide option"
47
- image: "https://placekitten.com/475/267"
47
+ image: "/images/medium.jpg"
48
48
  intro: "Lorem ipsum dolor sit amet consectetur adipiscing elit. Lobortis egestas ipsum dolor sit amet consectetur adipiscing elit. Lobortis egestas ipsum dolor sit amet consectetur adipiscing elit. Lobortis egestas lacus."
49
49
  eyebrow: ""
50
50
  date: ""
@@ -65,7 +65,7 @@ cardgroup:
65
65
  - label: Link Three
66
66
  url: "http://www.google.com"
67
67
  - title: "Multi-link card - right aligned image, wide option"
68
- image: "https://placekitten.com/475/267"
68
+ image: "/images/ilo-headquarters.jpg"
69
69
  intro: "Lorem ipsum dolor sit amet consectetur adipiscing elit. Lobortis egestas ipsum dolor sit amet consectetur adipiscing elit. Lobortis egestas ipsum dolor sit amet consectetur adipiscing elit. Lobortis egestas lacus."
70
70
  eyebrow: ""
71
71
  date: ""
@@ -93,13 +93,13 @@ cardgroup:
93
93
  fields:
94
94
  group:
95
95
  - title: "Vertical info card descriptive headline text"
96
- image: "https://placekitten.com/475/267"
96
+ image: "/images/small.jpg"
97
97
  intro: ""
98
98
  eyebrow: "Eyebrow title"
99
99
  date:
100
100
  human: "Date"
101
101
  unix: 1670389200
102
- link: "https://www.google.com/search?q=feature"
102
+ link: "https://www.ilo.org?q=feature"
103
103
  profile: ""
104
104
  eventdetails: ""
105
105
  cta: ""
@@ -108,13 +108,13 @@ cardgroup:
108
108
  dataset: ""
109
109
  color: ""
110
110
  - title: "Vertical info card descriptive headline text"
111
- image: "https://placekitten.com/475/267"
111
+ image: "/images/hero.jpg"
112
112
  intro: ""
113
113
  eyebrow: "Eyebrow title"
114
114
  date:
115
115
  human: "Date"
116
116
  unix: 1670389200
117
- link: "https://www.google.com/search?q=feature"
117
+ link: "https://www.ilo.org?q=feature"
118
118
  profile: ""
119
119
  eventdetails: ""
120
120
  cta: ""
@@ -123,13 +123,13 @@ cardgroup:
123
123
  dataset: ""
124
124
  color: ""
125
125
  - title: "Vertical info card descriptive headline text Vertical info card descriptive headline text Vertical info card descriptive headline text"
126
- image: "https://placekitten.com/475/267"
126
+ image: "images/ilo-headquarters.jpg"
127
127
  intro: ""
128
128
  eyebrow: "Eyebrow title"
129
129
  date:
130
130
  human: "Date"
131
131
  unix: 1670389200
132
- link: "https://www.google.com/search?q=feature"
132
+ link: "https://www.ilo.org?q=feature"
133
133
  profile: ""
134
134
  eventdetails: ""
135
135
  cta: ""
@@ -138,13 +138,13 @@ cardgroup:
138
138
  dataset: ""
139
139
  color: ""
140
140
  - title: "Vertical info card descriptive headline text"
141
- image: "https://placekitten.com/475/267"
141
+ image: "/images/youtube-video-poster.avif"
142
142
  intro: ""
143
143
  eyebrow: "Eyebrow title"
144
144
  date:
145
145
  human: "Date"
146
146
  unix: 1670389200
147
- link: "https://www.google.com/search?q=feature"
147
+ link: "https://www.ilo.org?q=feature"
148
148
  profile: ""
149
149
  eventdetails: ""
150
150
  cta: ""
@@ -160,13 +160,13 @@ cardgroup:
160
160
  fields:
161
161
  group:
162
162
  - title: "Horizontal info card descriptive headline text"
163
- image: "https://placekitten.com/196/296"
163
+ image: "/images/ilo-headquarters.jpg"
164
164
  intro: "This ILO flagship report details the effects of the COVID-19 crisis on the world of work. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum eu auctor tusrpis, this is 200 characters."
165
165
  eyebrow: "Eyebrow title"
166
166
  date:
167
167
  human: "00 month 0000"
168
168
  unix: 1670389200
169
- link: "https://www.google.com/search?q=detail"
169
+ link: "https://www.ilo.org?q=detail"
170
170
  profile: ""
171
171
  eventdetails: "8 - 9 February 2022, 8:30 - 12:00 CET | Egypt"
172
172
  cta: ""
@@ -176,13 +176,13 @@ cardgroup:
176
176
  dataset: ""
177
177
  color: ""
178
178
  - title: "Horizontal info card descriptive headline text"
179
- image: "https://www.ilo.org/wcmsp5/groups/public/---dgreports/---dcomm/documents/image/wcms_856513.jpg"
179
+ image: "/images/small.jpg"
180
180
  intro: "This ILO flagship report details the effects of the COVID-19 crisis on the world of work. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum eu auctor tusrpis, this is 200 characters."
181
181
  eyebrow: "Eyebrow title"
182
182
  date:
183
183
  human: "00 month 0000"
184
184
  unix: 1670389200
185
- link: "https://www.google.com/search?q=detail"
185
+ link: "https://www.ilo.org?q=detail"
186
186
  profile: ""
187
187
  eventdetails: "8 - 9 February 2022, 8:30 - 12:00 CET | Egypt"
188
188
  cta: ""
@@ -204,12 +204,12 @@ cardgroup:
204
204
  intro: "We advance social justice and promote decent work by setting labour standards, developing policies and devising programmes."
205
205
  eyebrow: ""
206
206
  date: ""
207
- link: "https://www.google.com/search?q=graphic-promo"
207
+ link: "https://www.ilo.org"
208
208
  profile: ""
209
209
  eventdetails: ""
210
210
  cta:
211
211
  label: "Discover our unique mission"
212
- url: "https://www.google.com/search?q=button"
212
+ url: "https://www.ilo.org?q=button"
213
213
  source: ""
214
214
  linklist: ""
215
215
  list: ""
@@ -233,7 +233,7 @@ cardgroup:
233
233
  list: ""
234
234
  source:
235
235
  label: "Source: lorem ipsum dolor sit amet, 2020"
236
- url: "https://www.google.com/search?q=stat"
236
+ url: "https://www.ilo.org?q=stat"
237
237
  color: blue
238
238
  - title: "Date headline"
239
239
  image: ""
@@ -247,7 +247,7 @@ cardgroup:
247
247
  list: ""
248
248
  source:
249
249
  label: "Source: lorem ipsum dolor sit amet, 2020"
250
- url: "https://www.google.com/search?q=stat"
250
+ url: "https://www.ilo.org?q=stat"
251
251
  color: green
252
252
  - title: "Date headline"
253
253
  image: ""
@@ -261,7 +261,7 @@ cardgroup:
261
261
  list: ""
262
262
  source:
263
263
  label: "Source: lorem ipsum dolor sit amet, 2020"
264
- url: "https://www.google.com/search?q=stat"
264
+ url: "https://www.ilo.org?q=stat"
265
265
  color: yellow
266
266
  - title: "Date headline"
267
267
  image: ""
@@ -275,7 +275,7 @@ cardgroup:
275
275
  list: ""
276
276
  source:
277
277
  label: "Source: lorem ipsum dolor sit amet, 2020"
278
- url: "https://www.google.com/search?q=stat"
278
+ url: "https://www.ilo.org?q=stat"
279
279
  color: turquoise
280
280
  settings:
281
281
  type: stat
@@ -292,7 +292,7 @@ cardgroup:
292
292
  date:
293
293
  human: "date"
294
294
  unix: 1670389200
295
- link: "https://www.google.com/search?q=graphic"
295
+ link: "https://www.ilo.org?q=graphic"
296
296
  profile: ""
297
297
  eventdetails: ""
298
298
  cta: ""
@@ -334,7 +334,7 @@ cardgroup:
334
334
  fields:
335
335
  group:
336
336
  - title: ""
337
- image: "https://placekitten.com/205/179"
337
+ image: "/images/small.jpg"
338
338
  intro: ""
339
339
  eyebrow: "Event details"
340
340
  date: ""
@@ -353,20 +353,20 @@ cardgroup:
353
353
  headline: Files
354
354
  items:
355
355
  - label: File/size MB 1
356
- url: "https://www.google.com/search?q=file1"
356
+ url: "https://www.ilo.org?q=file1"
357
357
  - label: File/size MB 2
358
- url: "https://www.google.com/search?q=file2"
358
+ url: "https://www.ilo.org?q=file2"
359
359
  - label: File/size MB 3
360
- url: "https://www.google.com/search?q=file3"
360
+ url: "https://www.ilo.org?q=file3"
361
361
  links:
362
362
  headline: Languages
363
363
  items:
364
364
  - label: Language link 1
365
- url: "https://www.google.com/search?q=link"
365
+ url: "https://www.ilo.org?q=link"
366
366
  - label: Language link 2
367
- url: "https://www.google.com/search?q=hyperlink"
367
+ url: "https://www.ilo.org?q=hyperlink"
368
368
  - label: Language link 3
369
- url: "https://www.google.com/search?q=url"
369
+ url: "https://www.ilo.org?q=url"
370
370
  settings:
371
371
  type: data
372
372
  theme: light
@@ -28,9 +28,9 @@ hero:
28
28
  alt: Lorem ipsum
29
29
  url:
30
30
  - breakpoint: 0
31
- src: "https://placekitten.com/1920/800"
31
+ src: "/images/hero.jpg"
32
32
  - breakpoint: 768
33
- src: "https://placekitten.com/1920/800"
33
+ src: "/images/hero.jpg"
34
34
  herocard:
35
35
  label: Part of the hero that displays text on top of image (or if no image on a background color). There are light and dark versions and all text parts are optional.
36
36
  type: object
@@ -41,10 +41,10 @@ hero:
41
41
  intro: "Brief intro text - ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua."
42
42
  socials:
43
43
  - label: "Facebook"
44
- url: "https://www.facebook.com/"
44
+ url: "https://www.facebook.com/ilo.org"
45
45
  icon: "facebook"
46
46
  - label: "Linkedin"
47
- url: "https://www.linkedin.com/"
47
+ url: "https://www.linkedin.com/company/international-labour-organization-ilo"
48
48
  icon: "linkedin"
49
49
  title: "This is an left aligned article headline that is more than two lines long"
50
50
  variants:
@@ -13,12 +13,12 @@ image:
13
13
  type: string
14
14
  label: Caption
15
15
  description: string
16
- preview: "my image caption"
16
+ preview: "Women construction workers in Nepal build roads and bridges as part of a National Rural Transport Programme co-sponsored by the ILO."
17
17
  credit:
18
18
  type: string
19
19
  label: Credit
20
20
  description: string
21
- preview: "Photo: copyright 2022 Person S. Name"
21
+ preview: "© Marcel Crozet/ILO"
22
22
  required: true
23
23
  url:
24
24
  type: object
@@ -27,13 +27,13 @@ image:
27
27
  required: true
28
28
  preview:
29
29
  - breakpoint: 0
30
- src: "https://place-hold.it/400x300?text=SmallBreakpointImage"
30
+ src: "/images/small.jpg"
31
31
  - breakpoint: 800
32
- src: "https://place-hold.it/800x600?text=MediumBreakpointImage"
32
+ src: "/images/medium.jpg"
33
33
  - breakpoint: 1200
34
- src: "https://place-hold.it/1200x900?text=LargeBreakpointImage"
34
+ src: "/images/large.jpg"
35
35
  - breakpoint: 1440
36
- src: "https://place-hold.it/1600x1200?text=LargestBreakpointImage"
36
+ src: "/images/large.jpg"
37
37
  settings:
38
38
  ishero:
39
39
  type: select
@@ -9,7 +9,7 @@ navigation:
9
9
  description: Logo for the nav
10
10
  required: true
11
11
  preview:
12
- image: "https://placekitten.com/g/155/56"
12
+ image: "/brand-assets/logo_en_horizontal_white.svg"
13
13
  alt: Logo
14
14
  mobilelogo:
15
15
  type: object
@@ -17,7 +17,7 @@ navigation:
17
17
  description: Logo for the nav
18
18
  required: true
19
19
  preview:
20
- image: "https://placekitten.com/111/40"
20
+ image: "/brand-assets/logo_en_horizontal_white.svg"
21
21
  alt: Logo
22
22
  siteurl:
23
23
  type: string
@@ -50,15 +50,15 @@ navigation:
50
50
  navlabel: Primary Navigation
51
51
  mobilecloselabel: Close
52
52
  items:
53
- - link: "https://www.google.com/search?q=topics"
53
+ - link: "https://www.ilo.org"
54
54
  label: Topics
55
- - link: "https://www.google.com/search?q=countries"
55
+ - link: "https://www.ilo.org"
56
56
  label: Countries
57
- - link: "https://www.google.com/search?q=standards"
57
+ - link: "https://www.ilo.org"
58
58
  label: Standards
59
- - link: "https://www.google.com/search?q=statistics"
59
+ - link: "https://www.ilo.org"
60
60
  label: Statistics
61
- - link: "https://www.google.com/search?q=about"
61
+ - link: "https://www.ilo.org"
62
62
  label: About
63
63
  subnav:
64
64
  type: object
@@ -70,19 +70,19 @@ navigation:
70
70
  mobilecloselabel: Close
71
71
  mobilebacklabel: Menu Home
72
72
  items:
73
- - link: "https://www.google.com/search?q=News"
73
+ - link: "https://www.ilo.org"
74
74
  label: News
75
- - link: "https://www.google.com/search?q=meeting+events"
75
+ - link: "https://www.ilo.org"
76
76
  label: "Meeting & Events"
77
- - link: "https://www.google.com/search?q=publications"
77
+ - link: "https://www.ilo.org"
78
78
  label: Publications
79
- - link: "https://www.google.com/search?q=projects"
79
+ - link: "https://www.ilo.org"
80
80
  label: Projects
81
- - link: "https://www.google.com/search?q=partners"
81
+ - link: "https://www.ilo.org"
82
82
  label: Partners
83
- - link: "https://www.google.com/search?q=Industries+Sectors"
83
+ - link: "https://www.ilo.org"
84
84
  label: "Industries & Sectors"
85
- - link: "https://www.google.com/search?q=About+the+ilo"
85
+ - link: "https://www.ilo.org"
86
86
  label: "About the ILO"
87
87
  searchlabel:
88
88
  type: string
@@ -113,14 +113,14 @@ navigation:
113
113
  preview:
114
114
  links:
115
115
  - label: Link One
116
- url: "http://www.google.com"
116
+ url: "https://www.ilo.org"
117
117
  - label: Link Two
118
- url: "http://www.google.com"
118
+ url: "https://www.ilo.org"
119
119
  - endsection: "true"
120
120
  label: Link Three Ends A Section
121
- url: "http://www.google.com"
121
+ url: "https://www.ilo.org"
122
122
  - label: Link Four
123
- url: "http://www.google.com"
123
+ url: "https://www.ilo.org"
124
124
  - label: Link Five Is Slightly Longer
125
- url: "http://www.google.com"
125
+ url: "https://www.ilo.org"
126
126
  visibility: storybook
@@ -8,28 +8,28 @@ profile:
8
8
  label: Avatar
9
9
  description: The avatar for the profile
10
10
  required: true
11
- preview: "http://placekitten.com/128/128"
11
+ preview: "/images/ilo-dg.jpg"
12
12
  description:
13
13
  type: string
14
14
  label: Description
15
15
  description: An optional plain-text description (e.g. a short bio)
16
- preview: "Firstname Lastname is the Senior Media Strategist. He has been with ILO for eight years."
16
+ preview: "Gilbert F. Houngbo was elected as the ILO’s 11th Director-General by the organization’s Governing Body in March 2022."
17
17
  link:
18
18
  type: object
19
19
  label: Link
20
20
  description: An optional url and label for a link associated with the profile
21
21
  preview:
22
- label: "Optional Link"
23
- url: "http://www.google.com"
22
+ label: "Learn more"
23
+ url: "https://www.ilo.org"
24
24
  name:
25
25
  type: string
26
26
  label: Name
27
27
  description: The name of the person associated with the profile
28
- preview: "Firstname Lastname"
28
+ preview: "Gilbert F. Houngbo"
29
29
  required: true
30
30
  role:
31
31
  type: string
32
32
  label: Role
33
33
  description: An optional plain-text field indicating the person's role in the organization
34
- preview: "Senior Media Strategist"
34
+ preview: "ILO Director-General"
35
35
  visibility: storybook
@@ -15,13 +15,13 @@ readmore:
15
15
  type: string
16
16
  label: Excerpt
17
17
  description: HTML content
18
- preview: "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum."
18
+ preview: "<p>Underlying the ILO’s work is the importance of cooperation between governments and employers’ and workers’ organizations in fostering social and economic progress. The ILO aims to ensure that it serves the needs of working women and men by bringing together governments, employers and workers to set labour standards, develop policies and devise programmes.</p>"
19
19
  required: true
20
20
  fulltext:
21
21
  type: string
22
22
  label: Full Text
23
23
  description: HTML content
24
- preview: "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum."
24
+ preview: "<p>Underlying the ILO’s work is the importance of cooperation between governments and employers’ and workers’ organizations in fostering social and economic progress. The ILO aims to ensure that it serves the needs of working women and men by bringing together governments, employers and workers to set labour standards, develop policies and devise programmes.</p> <p>The very structure of the ILO, where workers and employers together have an equal voice with governments in its deliberations, shows social dialogue in action. It ensures that the views of the social partners are closely reflected in ILO labour standards, policies and programmes.</p> <p>The ILO encourages this tripartism within its constituents - employers , workers and member States , by promoting a social dialogue between trade unions and employers in formulating, and where appropriate, implementing national policy on social, economic, and many other issues.</p>."
25
25
  required: true
26
26
  settings:
27
27
  openatstart:
@@ -7,6 +7,6 @@ richtext:
7
7
  type: string
8
8
  label: Content
9
9
  description: HTML content
10
- preview: "<h1>Apollo 11</h1><p><strong>Apollo 11</strong> was the spaceflight that landed the first humans, Americans <a href='http://en.wikipedia.org/wiki/Neil_Armstrong'>Neil Armstrong</a> and <a href='http://en.wikipedia.org/wiki/Buzz_Aldrin'>Buzz Aldrin</a>, on the Moon on July 20, 1969, at 20:18 UTC. Armstrong became the first to step onto the lunar surface 6 hours later on July 21 at 02:56 UTC.</p><p>Armstrong spent about <s>three and a half</s> two and a half hours outside the spacecraft, Aldrin slightly less; and together they collected 47.5 pounds (21.5&nbsp;kg) of lunar material for return to Earth. A third member of the mission, <a href='http://en.wikipedia.org/wiki/Michael_Collins_(astronaut)'>Michael Collins</a>, piloted the <a href='http://en.wikipedia.org/wiki/Apollo_Command/Service_Module'>command</a> spacecraft alone in lunar orbit until Armstrong and Aldrin returned to it for the trip back to Earth. <figure><img alt='placeholder image' class='right' src='https://place-hold.it/400x300?text=Placeholder Image'><figcaption>The caption for this image</figcaption></figure></p><h2>Broadcasting and <em>quotes</em> <a id='quotes' name='quotes'></a></h2><p>Broadcast on live TV to a world-wide audience, Armstrong stepped onto the lunar surface and described the event as:</p><blockquote><p>One small step for [a] man, one giant leap for mankind</p><cite>Neil Armstrong</cite></blockquote><h2>Technical details <a id='tech-details' name='tech-details'></a></h2><p>Launched by a <strong>Saturn V</strong> rocket from <a href='http://en.wikipedia.org/wiki/Kennedy_Space_Center'>Kennedy Space Center</a> in Merritt Island, Florida on July 16, Apollo 11 was the fifth manned mission of <a href='http://en.wikipedia.org/wiki/NASA'>NASA</a>&#39;s Apollo program. The Apollo spacecraft had three parts:</p><ol><li><strong>Command Module</strong> with a cabin for the three astronauts which was the only part which landed back on Earth</li><li><strong>Service Module</strong> which supported the Command Module with propulsion, electrical power, oxygen and water</li><li><strong>Lunar Module</strong> for landing on the Moon.</li></ol><p>After being sent to the Moon by the Saturn V&#39;s upper stage, the astronauts separated the spacecraft from it and travelled for three days until they entered into lunar orbit. Armstrong and Aldrin then moved into the Lunar Module and landed in the <a href='http://en.wikipedia.org/wiki/Mare_Tranquillitatis'>Sea of Tranquility</a>. They stayed a total of about 21 and a half hours on the lunar surface. After lifting off in the upper part of the Lunar Module and rejoining Collins in the Command Module, they returned to Earth and landed in the <a href='http://en.wikipedia.org/wiki/Pacific_Ocean'>Pacific Ocean</a> on July 24.</p><hr><p><small>Source: <a href='http://en.wikipedia.org/wiki/Apollo_11'>Wikipedia.org</a></small></p>"
10
+ preview: "<h2>International Labour Organization</h2> <p>The <b>International Labour Organization</b> (<b>ILO</b>) is a <a href='https://www.un.org'>United Nations</a> agency whose mandate is to advance social and economic justice by setting international labour standards. Founded in October 1919 under the League of Nations, it is the first and oldest specialised agency of the UN. The ILO has 187 member states: 186 out of 193 UN member states plus the Cook Islands.</p> <p>Whereas also the failure of any nation to adopt humane conditions of labour is an obstacle in the way of other nations which desire to improve the conditions in their own countries.</p> <figure><img alt='placeholder image' class='right' src='/images/ilo-headquarters.jpg'><figcaption>The ILO's headquarters in Geneva, Switzerland. ©Steiner SA</figcaption></figure> <h3>ILO Constitution</h3> <p>The driving forces for the ILO's creation arose from security, humanitarian, political and economic considerations.</p> <blockquote> <p>The fundamental ideas that forged the ILO one hundred and three years ago still underpin the global pledge to leave no one behind.</p> <cite>ILO Director-General Gilbert F. Houngbo</cite> </blockquote> Reflecting these ideas, the Preamble of the ILO Constitution states:</p> <ol> <li>Whereas universal and lasting peace can be established only if it is based upon social justice;</li> <li>And whereas conditions of labour exist involving such injustice, hardship and privation to large numbers of people as to produce unrest so great that the peace and harmony of the world are imperilled; and an improvement of those conditions is urgently required;</li> <li>Whereas also the failure of any nation to adopt humane conditions of labour is an obstacle in the way of other nations which desire to improve the conditions in their own countries.</li> </ol>"
11
11
  required: true
12
12
  visibility: storybook
@@ -12,21 +12,21 @@ tabs:
12
12
  component: "image"
13
13
  componentdata:
14
14
  alt: "My alt text"
15
- caption: "my image caption"
16
- credit: "Photo: copyright 2022 Person S. Name"
15
+ caption: "Women construction workers in Nepal build roads and bridges as part of a National Rural Transport Programme co-sponsored by the ILO."
16
+ credit: "© Marcel Crozet/ILO"
17
17
  url:
18
18
  - breakpoint: 0
19
- src: "https://place-hold.it/400x300?text=SmallBreakpointImage"
19
+ src: "/images/small.jpg"
20
20
  - breakpoint: 800
21
- src: "https://place-hold.it/800x600?text=MediumBreakpointImage"
21
+ src: "/images/medium.jpg"
22
22
  - breakpoint: 1200
23
- src: "https://place-hold.it/1200x900?text=LargeBreakpointImage"
23
+ src: "/images/large.jpg"
24
24
  - breakpoint: 1440
25
- src: "https://place-hold.it/1600x1200?text=LargestBreakpointImage"
25
+ src: "/images/large.jpg"
26
26
  - label: "Tab Label 2"
27
27
  component: "richtext"
28
28
  componentdata:
29
- content: "<h1>Apollo 11</h1><p><strong>Apollo 11</strong> was the spaceflight that landed the first humans, Americans <a href='http://en.wikipedia.org/wiki/Neil_Armstrong'>Neil Armstrong</a> and <a href='http://en.wikipedia.org/wiki/Buzz_Aldrin'>Buzz Aldrin</a>, on the Moon on July 20, 1969, at 20:18 UTC. Armstrong became the first to step onto the lunar surface 6 hours later on July 21 at 02:56 UTC.</p><p>Armstrong spent about <s>three and a half</s> two and a half hours outside the spacecraft, Aldrin slightly less; and together they collected 47.5 pounds (21.5&nbsp;kg) of lunar material for return to Earth. A third member of the mission, <a href='http://en.wikipedia.org/wiki/Michael_Collins_(astronaut)'>Michael Collins</a>, piloted the <a href='http://en.wikipedia.org/wiki/Apollo_Command/Service_Module'>command</a> spacecraft alone in lunar orbit until Armstrong and Aldrin returned to it for the trip back to Earth. <figure><img alt='placeholder image' class='right' src='https://place-hold.it/400x300?text=Placeholder Image'><figcaption>The caption for this image</figcaption></figure></p><h2>Broadcasting and <em>quotes</em> <a id='quotes' name='quotes'></a></h2><p>Broadcast on live TV to a world-wide audience, Armstrong stepped onto the lunar surface and described the event as:</p><blockquote><p>One small step for [a] man, one giant leap for mankind</p><cite>Neil Armstrong</cite></blockquote><h2>Technical details <a id='tech-details' name='tech-details'></a></h2><p>Launched by a <strong>Saturn V</strong> rocket from <a href='http://en.wikipedia.org/wiki/Kennedy_Space_Center'>Kennedy Space Center</a> in Merritt Island, Florida on July 16, Apollo 11 was the fifth manned mission of <a href='http://en.wikipedia.org/wiki/NASA'>NASA</a>&#39;s Apollo program. The Apollo spacecraft had three parts:</p><ol><li><strong>Command Module</strong> with a cabin for the three astronauts which was the only part which landed back on Earth</li><li><strong>Service Module</strong> which supported the Command Module with propulsion, electrical power, oxygen and water</li><li><strong>Lunar Module</strong> for landing on the Moon.</li></ol><p>After being sent to the Moon by the Saturn V&#39;s upper stage, the astronauts separated the spacecraft from it and travelled for three days until they entered into lunar orbit. Armstrong and Aldrin then moved into the Lunar Module and landed in the <a href='http://en.wikipedia.org/wiki/Mare_Tranquillitatis'>Sea of Tranquility</a>. They stayed a total of about 21 and a half hours on the lunar surface. After lifting off in the upper part of the Lunar Module and rejoining Collins in the Command Module, they returned to Earth and landed in the <a href='http://en.wikipedia.org/wiki/Pacific_Ocean'>Pacific Ocean</a> on July 24.</p><hr><p><small>Source: <a href='http://en.wikipedia.org/wiki/Apollo_11'>Wikipedia.org</a></small></p>"
29
+ content: "<h2>International Labour Organization</h2> <p>The <b>International Labour Organization</b> (<b>ILO</b>) is a <a href='https://www.un.org'>United Nations</a> agency whose mandate is to advance social and economic justice by setting international labour standards. Founded in October 1919 under the League of Nations, it is the first and oldest specialised agency of the UN. The ILO has 187 member states: 186 out of 193 UN member states plus the Cook Islands.</p> <p>Whereas also the failure of any nation to adopt humane conditions of labour is an obstacle in the way of other nations which desire to improve the conditions in their own countries.</p> <figure><img alt='placeholder image' class='right' src='/images/ilo-headquarters.jpg'><figcaption>The ILO's headquarters in Geneva, Switzerland. ©Steiner SA</figcaption></figure> <h3>ILO Constitution</h3> <p>The driving forces for the ILO's creation arose from security, humanitarian, political and economic considerations.</p> <blockquote> <p>The fundamental ideas that forged the ILO one hundred and three years ago still underpin the global pledge to leave no one behind.</p> <cite>ILO Director-General Gilbert F. Houngbo</cite> </blockquote> Reflecting these ideas, the Preamble of the ILO Constitution states:</p> <ol> <li>Whereas universal and lasting peace can be established only if it is based upon social justice;</li> <li>And whereas conditions of labour exist involving such injustice, hardship and privation to large numbers of people as to produce unrest so great that the peace and harmony of the world are imperilled; and an improvement of those conditions is urgently required;</li> <li>Whereas also the failure of any nation to adopt humane conditions of labour is an obstacle in the way of other nations which desire to improve the conditions in their own countries.</li> </ol>"
30
30
  required: true
31
31
  variants:
32
32
  default:
@@ -8,12 +8,12 @@ video:
8
8
  label: Alt
9
9
  description: alt text for the image
10
10
  required: true
11
- preview: "My alt text"
11
+ preview: "The ILO logo animates into view"
12
12
  caption:
13
13
  type: string
14
14
  label: Caption
15
15
  description: string
16
- preview: "my image caption"
16
+ preview: "The ILO brings together governments, employers and workers to set labour standards and promote decent work."
17
17
  url:
18
18
  type: object
19
19
  label: URL
@@ -21,13 +21,13 @@ video:
21
21
  required: true
22
22
  preview:
23
23
  - breakpoint: 0
24
- src: "https://place-hold.it/400x300?text=SmallBreakpointImage"
24
+ src: "/images/media-file-poster.jpg"
25
25
  - breakpoint: 800
26
- src: "https://place-hold.it/800x600?text=MediumBreakpointImage"
26
+ src: "/images/media-file-poster.jpg"
27
27
  - breakpoint: 1200
28
- src: "https://place-hold.it/1200x900?text=LargeBreakpointImage"
28
+ src: "/images/media-file-poster.jpg"
29
29
  - breakpoint: 1440
30
- src: "https://place-hold.it/1600x1200?text=LargestBreakpointImage"
30
+ src: "/images/media-file-poster.jpg"
31
31
  video:
32
32
  type: object
33
33
  label: Video
@@ -39,6 +39,6 @@ video:
39
39
  play: "Play"
40
40
  pause: "Pause"
41
41
  volume: "Volume"
42
- src: "https://interactive-examples.mdn.mozilla.net/media/cc0-videos/flower.mp4"
42
+ src: "/images/video-example.mp4"
43
43
  tracks: null
44
44
  visibility: storybook