@ilo-org/react 0.14.1 → 0.15.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.
Files changed (40) hide show
  1. package/lib/cjs/components/Cards/CardGroup/CardGroup.js +7 -4
  2. package/lib/cjs/components/Cards/CardGroup/index.js +9 -8
  3. package/lib/cjs/components/Cards/DetailCard/DetailCard.js +2 -2
  4. package/lib/cjs/components/Cards/FactlistCard/FactListCard.js +2 -2
  5. package/lib/cjs/components/Cards/FeatureCard/FeatureCard.js +2 -2
  6. package/lib/cjs/components/Cards/MultilinkCard/MultiLinkCard.js +2 -2
  7. package/lib/cjs/components/Cards/PromoCard/PromoCard.js +2 -2
  8. package/lib/cjs/components/Cards/StatCard/StatCard.js +2 -2
  9. package/lib/cjs/components/Cards/TextCard/TextCard.js +2 -2
  10. package/lib/cjs/components/LogoGrid/LogoGrid.js +1 -1
  11. package/lib/cjs/components/Navigation/Navigation.js +34 -8
  12. package/lib/cjs/components/SocialMedia/SocialMedia.js +1 -1
  13. package/lib/cjs/hooks/index.js +0 -2
  14. package/lib/esm/components/Cards/CardGroup/CardGroup.js +7 -4
  15. package/lib/esm/components/Cards/CardGroup/index.js +9 -8
  16. package/lib/esm/components/Cards/DetailCard/DetailCard.js +2 -2
  17. package/lib/esm/components/Cards/FactlistCard/FactListCard.js +2 -2
  18. package/lib/esm/components/Cards/FeatureCard/FeatureCard.js +2 -2
  19. package/lib/esm/components/Cards/MultilinkCard/MultiLinkCard.js +2 -2
  20. package/lib/esm/components/Cards/PromoCard/PromoCard.js +2 -2
  21. package/lib/esm/components/Cards/StatCard/StatCard.js +2 -2
  22. package/lib/esm/components/Cards/TextCard/TextCard.js +2 -2
  23. package/lib/esm/components/LogoGrid/LogoGrid.js +1 -1
  24. package/lib/esm/components/Navigation/Navigation.js +35 -9
  25. package/lib/esm/components/SocialMedia/SocialMedia.js +1 -1
  26. package/lib/esm/hooks/index.js +0 -1
  27. package/lib/types/react/src/components/Cards/CardGroup/CardGroup.props.d.ts +28 -2
  28. package/lib/types/react/src/components/Cards/DetailCard/DetailCard.props.d.ts +5 -1
  29. package/lib/types/react/src/components/Cards/FactlistCard/FactListCard.props.d.ts +5 -1
  30. package/lib/types/react/src/components/Cards/FeatureCard/FeatureCard.props.d.ts +5 -1
  31. package/lib/types/react/src/components/Cards/MultilinkCard/MultilinkCard.props.d.ts +5 -1
  32. package/lib/types/react/src/components/Cards/PromoCard/PromoCard.props.d.ts +5 -1
  33. package/lib/types/react/src/components/Cards/StatCard/StatCard.props.d.ts +8 -1
  34. package/lib/types/react/src/components/Cards/TextCard/TextCard.props.d.ts +5 -1
  35. package/lib/types/react/src/hooks/index.d.ts +0 -1
  36. package/lib/types/react/src/types/index.d.ts +1 -0
  37. package/package.json +3 -3
  38. package/lib/cjs/hooks/useVideoPlayer.js +0 -75
  39. package/lib/esm/hooks/useVideoPlayer.js +0 -73
  40. package/lib/types/react/src/hooks/useVideoPlayer.d.ts +0 -12
package/lib/cjs/components/Cards/CardGroup/CardGroup.js CHANGED
@@ -30,12 +30,15 @@ const cardMapper = {
30
30
  factlist: components_Cards_FactlistCard_FactListCard,
31
31
  data: components_Cards_DataCard_DataCard,
32
32
  };
33
- const CardGroup = ({ cards, cardCount, cta, type }) => {
34
- const Cards = cardMapper[type];
33
+ const CardGroup = ({ cards, titleLevel = "p", cardCount, cta, type, alignment, size, theme, collapsed = false, }) => {
34
+ const Card = cardMapper[type];
35
35
  const { prefix } = hooks_useGlobalSettings();
36
36
  const baseClass = `${prefix}--cardgroup`;
37
- const cardGroupClasses = classNames(baseClass, `${baseClass}__count__${cardCount}`);
38
- return (jsxRuntime.jsxs("div", Object.assign({ className: cardGroupClasses }, { children: [jsxRuntime.jsx("div", Object.assign({ className: `${baseClass}--inner` }, { children: cards && cards.map((card, index) => jsxRuntime.jsx(Cards, Object.assign({}, card), index)) })), cta && (jsxRuntime.jsx("div", Object.assign({ className: `${baseClass}--button-wrap` }, { children: jsxRuntime.jsx("a", Object.assign({ className: `${prefix}--button ${prefix}--button--medium ${prefix}--button--secondary`, href: cta.url }, { children: jsxRuntime.jsx("span", Object.assign({ className: "button__label" }, { children: cta.label })) })) })))] })));
37
+ const cardGroupClasses = classNames(baseClass, `${baseClass}__count__${cardCount}`, {
38
+ [`${baseClass}__collapsed`]: collapsed,
39
+ });
40
+ return (jsxRuntime.jsxs("div", Object.assign({ className: cardGroupClasses }, { children: [jsxRuntime.jsx("div", Object.assign({ className: `${baseClass}--inner` }, { children: cards &&
41
+ cards.map((card, index) => (jsxRuntime.jsx(Card, Object.assign({}, card, { size: size, theme: theme, alignment: alignment, titleLevel: titleLevel }), index))) })), cta && (jsxRuntime.jsx("div", Object.assign({ className: `${baseClass}--button-wrap` }, { children: jsxRuntime.jsx("a", Object.assign({ className: `${prefix}--button ${prefix}--button--medium ${prefix}--button--secondary`, href: cta.url }, { children: jsxRuntime.jsx("span", Object.assign({ className: "button__label" }, { children: cta.label })) })) })))] })));
39
42
  };
40
43
 
41
44
  module.exports = CardGroup;
package/lib/cjs/components/Cards/CardGroup/index.js CHANGED
@@ -90,6 +90,7 @@ const textCardGroup = {
90
90
  ],
91
91
  cardCount: "three",
92
92
  type: "text",
93
+ size: "narrow",
93
94
  cta: {
94
95
  label: "Discover our unique mission",
95
96
  url: "https://www.ilo.org",
@@ -135,6 +136,7 @@ const statCardGroup = {
135
136
  },
136
137
  ],
137
138
  cardCount: "three",
139
+ size: "narrow",
138
140
  type: "stat",
139
141
  cta: {
140
142
  label: "Discover our unique mission",
@@ -262,6 +264,7 @@ const multilinkCardGroup = {
262
264
  ],
263
265
  type: "multilink",
264
266
  cardCount: "three",
267
+ size: "standard",
265
268
  cta: {
266
269
  label: "Discover our unique mission",
267
270
  url: "https://www.ilo.org",
@@ -270,7 +273,6 @@ const multilinkCardGroup = {
270
273
  const promoCardGroup = {
271
274
  cards: [
272
275
  {
273
- size: "standard",
274
276
  title: "ILO welcomes first global agreement on working conditions",
275
277
  eyebrow: "Report",
276
278
  theme: "dark",
@@ -283,7 +285,6 @@ const promoCardGroup = {
283
285
  },
284
286
  },
285
287
  {
286
- size: "standard",
287
288
  title: "Renewable energy jobs hits 12.7 million globally",
288
289
  eyebrow: "High-level meeting",
289
290
  theme: "dark",
@@ -296,7 +297,6 @@ const promoCardGroup = {
296
297
  },
297
298
  },
298
299
  {
299
- size: "standard",
300
300
  title: "ILO welcomes G7 call to make a just transition",
301
301
  eyebrow: "Podcast",
302
302
  theme: "dark",
@@ -309,7 +309,6 @@ const promoCardGroup = {
309
309
  },
310
310
  },
311
311
  {
312
- size: "standard",
313
312
  title: "Telangana and Andhra Pradesh launch pre-departure handbook",
314
313
  eyebrow: "High-level meeting",
315
314
  theme: "dark",
@@ -324,6 +323,7 @@ const promoCardGroup = {
324
323
  ],
325
324
  type: "promo",
326
325
  cardCount: "three",
326
+ size: "standard",
327
327
  cta: {
328
328
  label: "Discover our unique mission",
329
329
  url: "https://www.ilo.org",
@@ -418,6 +418,7 @@ const featureCardGroup = {
418
418
  ],
419
419
  cardCount: "three",
420
420
  type: "feature",
421
+ size: "narrow",
421
422
  cta: {
422
423
  label: "Discover our unique mission",
423
424
  url: "https://www.ilo.org",
@@ -476,6 +477,7 @@ const detailCardGroup = {
476
477
  ],
477
478
  type: "detail",
478
479
  cardCount: "three",
480
+ size: "narrow",
479
481
  cta: {
480
482
  label: "Discover our unique mission",
481
483
  url: "https://www.ilo.org",
@@ -522,6 +524,7 @@ const factListCardGroup = {
522
524
  ],
523
525
  type: "factlist",
524
526
  cardCount: "three",
527
+ size: "narrow",
525
528
  cta: {
526
529
  label: "Discover our unique mission",
527
530
  url: "https://www.ilo.org",
@@ -530,7 +533,7 @@ const factListCardGroup = {
530
533
  const dataCardGroup = {
531
534
  cards: [
532
535
  {
533
- size: "standard",
536
+ size: "narrow",
534
537
  eyebrow: "Press release",
535
538
  image: "/small.jpg",
536
539
  columns: "one",
@@ -593,7 +596,6 @@ const dataCardGroup = {
593
596
  },
594
597
  },
595
598
  {
596
- size: "standard",
597
599
  eyebrow: "Report",
598
600
  image: "/small.jpg",
599
601
  columns: "one",
@@ -652,7 +654,6 @@ const dataCardGroup = {
652
654
  },
653
655
  },
654
656
  {
655
- size: "standard",
656
657
  eyebrow: "Meeting",
657
658
  image: "/small.jpg",
658
659
  columns: "one",
@@ -707,7 +708,6 @@ const dataCardGroup = {
707
708
  },
708
709
  },
709
710
  {
710
- size: "standard",
711
711
  eyebrow: "Meeting",
712
712
  image: "/small.jpg",
713
713
  columns: "one",
@@ -776,6 +776,7 @@ const dataCardGroup = {
776
776
  ],
777
777
  cardCount: "three",
778
778
  type: "data",
779
+ size: "narrow",
779
780
  cta: {
780
781
  label: "Discover our unique mission",
781
782
  url: "https://www.ilo.org",
package/lib/cjs/components/Cards/DetailCard/DetailCard.js CHANGED
@@ -7,14 +7,14 @@ require('tslib');
7
7
  require('react');
8
8
  require('../../../GlobalCtx-10114bdd.js');
9
9
 
10
- const DetailCard = ({ eyebrow, title, size = "narrow", intro, date, eventdetails, link, image, }) => {
10
+ const DetailCard = ({ eyebrow, title, size = "narrow", intro, date, eventdetails, link, image, titleLevel: TitleElement, }) => {
11
11
  const { prefix } = hooks_useGlobalSettings();
12
12
  const baseClass = `${prefix}--card`;
13
13
  const cardClasses = classNames(baseClass, `${baseClass}__type__detail`, {
14
14
  [`${baseClass}__action`]: link,
15
15
  [`${baseClass}__size__${size}`]: size,
16
16
  });
17
- return (jsxRuntime.jsxs("div", Object.assign({ className: cardClasses }, { children: [link && (jsxRuntime.jsx("a", Object.assign({ className: `${baseClass}--link`, href: link, title: title }, { children: jsxRuntime.jsx("span", Object.assign({ className: `${baseClass}--link--text` }, { children: title })) }))), jsxRuntime.jsxs("div", Object.assign({ className: `${baseClass}--wrap` }, { children: [image && (jsxRuntime.jsx("div", Object.assign({ className: `${baseClass}--image--wrapper` }, { children: jsxRuntime.jsx("picture", { children: jsxRuntime.jsx("img", { className: `${baseClass}--picture`, src: image, alt: title }) }) }))), jsxRuntime.jsxs("div", Object.assign({ className: `${baseClass}--content` }, { children: [eyebrow && jsxRuntime.jsx("p", Object.assign({ className: `${baseClass}--eyebrow` }, { children: eyebrow })), title && jsxRuntime.jsx("h5", Object.assign({ className: `${baseClass}--title` }, { children: title })), intro && jsxRuntime.jsx("p", Object.assign({ className: `${baseClass}--intro` }, { children: intro })), date && (jsxRuntime.jsx("time", Object.assign({ className: `${baseClass}--date`, dateTime: date.unix }, { children: date.human }))), eventdetails && (jsxRuntime.jsx("p", Object.assign({ className: `${baseClass}--date-extra` }, { children: eventdetails })))] }))] }))] })));
17
+ return (jsxRuntime.jsxs("div", Object.assign({ className: cardClasses }, { children: [link && (jsxRuntime.jsx("a", Object.assign({ className: `${baseClass}--link`, href: link, title: title }, { children: jsxRuntime.jsx("span", Object.assign({ className: `${baseClass}--link--text` }, { children: title })) }))), jsxRuntime.jsxs("div", Object.assign({ className: `${baseClass}--wrap` }, { children: [image && (jsxRuntime.jsx("div", Object.assign({ className: `${baseClass}--image--wrapper` }, { children: jsxRuntime.jsx("picture", { children: jsxRuntime.jsx("img", { className: `${baseClass}--picture`, src: image, alt: title }) }) }))), jsxRuntime.jsxs("div", Object.assign({ className: `${baseClass}--content` }, { children: [eyebrow && jsxRuntime.jsx("p", Object.assign({ className: `${baseClass}--eyebrow` }, { children: eyebrow })), title && TitleElement ? (jsxRuntime.jsx(TitleElement, Object.assign({ className: `${baseClass}--title` }, { children: title }))) : (jsxRuntime.jsx("p", Object.assign({ className: `${baseClass}--title` }, { children: title }))), intro && jsxRuntime.jsx("p", Object.assign({ className: `${baseClass}--intro` }, { children: intro })), date && (jsxRuntime.jsx("time", Object.assign({ className: `${baseClass}--date`, dateTime: date.unix }, { children: date.human }))), eventdetails && (jsxRuntime.jsx("p", Object.assign({ className: `${baseClass}--date-extra` }, { children: eventdetails })))] }))] }))] })));
18
18
  };
19
19
 
20
20
  module.exports = DetailCard;
package/lib/cjs/components/Cards/FactlistCard/FactListCard.js CHANGED
@@ -9,14 +9,14 @@ require('tslib');
9
9
  require('react');
10
10
  require('../../../GlobalCtx-10114bdd.js');
11
11
 
12
- const FactlistCard = ({ title, theme = "narrow", size, list, }) => {
12
+ const FactlistCard = ({ title, theme, size = "narrow", list, titleLevel: TitleElement, }) => {
13
13
  const { prefix } = hooks_useGlobalSettings();
14
14
  const baseClass = `${prefix}--card`;
15
15
  const cardClasses = classNames(baseClass, `${baseClass}__type__factlist`, {
16
16
  [`${baseClass}__size__${size}`]: size,
17
17
  [`${baseClass}__theme__${theme}`]: theme,
18
18
  });
19
- return (jsxRuntime.jsx("div", Object.assign({ className: cardClasses }, { children: jsxRuntime.jsx("div", Object.assign({ className: `${baseClass}--wrap` }, { children: jsxRuntime.jsxs("div", Object.assign({ className: `${baseClass}--content` }, { children: [title && jsxRuntime.jsx("h5", Object.assign({ className: `${baseClass}--title` }, { children: title })), list && (jsxRuntime.jsx(components_List_List, Object.assign({ alignment: "default", ordered: "unordered" }, { children: list.map((item, index) => (jsxRuntime.jsx(components_List_ListItem, Object.assign({ id: `list${index}` }, { children: jsxRuntime.jsx("p", { children: item }) })))) })))] })) })) })));
19
+ return (jsxRuntime.jsx("div", Object.assign({ className: cardClasses }, { children: jsxRuntime.jsx("div", Object.assign({ className: `${baseClass}--wrap` }, { children: jsxRuntime.jsxs("div", Object.assign({ className: `${baseClass}--content` }, { children: [title && TitleElement ? (jsxRuntime.jsx(TitleElement, Object.assign({ className: `${baseClass}--title` }, { children: title }))) : (jsxRuntime.jsx("p", Object.assign({ className: `${baseClass}--title` }, { children: title }))), list && (jsxRuntime.jsx(components_List_List, Object.assign({ alignment: "default", ordered: "unordered" }, { children: list.map((item, index) => (jsxRuntime.jsx(components_List_ListItem, Object.assign({ id: `list${index}` }, { children: jsxRuntime.jsx("p", { children: item }) })))) })))] })) })) })));
20
20
  };
21
21
 
22
22
  module.exports = FactlistCard;
package/lib/cjs/components/Cards/FeatureCard/FeatureCard.js CHANGED
@@ -8,7 +8,7 @@ require('tslib');
8
8
  require('react');
9
9
  require('../../../GlobalCtx-10114bdd.js');
10
10
 
11
- const FeatureCard = ({ isvideo, eyebrow, title, theme, size = "narrow", date, link, linklist, image, }) => {
11
+ const FeatureCard = ({ isvideo, eyebrow, title, theme, size = "narrow", date, link, linklist, image, titleLevel: TitleElement, }) => {
12
12
  const { prefix } = hooks_useGlobalSettings();
13
13
  const baseClass = `${prefix}--card`;
14
14
  const cardClasses = classNames(baseClass, `${baseClass}__type__feature`, {
@@ -18,7 +18,7 @@ const FeatureCard = ({ isvideo, eyebrow, title, theme, size = "narrow", date, li
18
18
  [`${baseClass}__linklist`]: linklist,
19
19
  [`${baseClass}__theme__${theme}`]: theme,
20
20
  });
21
- return (jsxRuntime.jsxs("div", Object.assign({ className: cardClasses }, { children: [link && (jsxRuntime.jsx("a", Object.assign({ className: `${baseClass}--link`, href: link, title: title }, { children: jsxRuntime.jsx("span", Object.assign({ className: `${baseClass}--link--text` }, { children: title })) }))), jsxRuntime.jsxs("div", Object.assign({ className: `${baseClass}--wrap` }, { children: [image && (jsxRuntime.jsx("div", Object.assign({ className: `${baseClass}--image--wrapper` }, { children: jsxRuntime.jsx("picture", { children: jsxRuntime.jsx("img", { className: `${baseClass}--picture`, src: image, alt: title }) }) }))), jsxRuntime.jsxs("div", Object.assign({ className: `${baseClass}--content` }, { children: [eyebrow && jsxRuntime.jsx("p", Object.assign({ className: `${baseClass}--eyebrow` }, { children: eyebrow })), title && jsxRuntime.jsx("h5", Object.assign({ className: `${baseClass}--title` }, { children: title })), date && (jsxRuntime.jsx("time", Object.assign({ className: `${baseClass}--date`, dateTime: date.unix }, { children: date.human }))), linklist && (jsxRuntime.jsx(components_LinkList_LinkList, { headline: linklist.headline, linkgroup: linklist.linkgroup }))] }))] }))] })));
21
+ return (jsxRuntime.jsxs("div", Object.assign({ className: cardClasses }, { children: [link && (jsxRuntime.jsx("a", Object.assign({ className: `${baseClass}--link`, href: link, title: title }, { children: jsxRuntime.jsx("span", Object.assign({ className: `${baseClass}--link--text` }, { children: title })) }))), jsxRuntime.jsxs("div", Object.assign({ className: `${baseClass}--wrap` }, { children: [image && (jsxRuntime.jsx("div", Object.assign({ className: `${baseClass}--image--wrapper` }, { children: jsxRuntime.jsx("picture", { children: jsxRuntime.jsx("img", { className: `${baseClass}--picture`, src: image, alt: title }) }) }))), jsxRuntime.jsxs("div", Object.assign({ className: `${baseClass}--content` }, { children: [eyebrow && jsxRuntime.jsx("p", Object.assign({ className: `${baseClass}--eyebrow` }, { children: eyebrow })), title && TitleElement ? (jsxRuntime.jsx(TitleElement, Object.assign({ className: `${baseClass}--title` }, { children: title }))) : (jsxRuntime.jsx("p", Object.assign({ className: `${baseClass}--title` }, { children: title }))), date && (jsxRuntime.jsx("time", Object.assign({ className: `${baseClass}--date`, dateTime: date.unix }, { children: date.human }))), linklist && (jsxRuntime.jsx(components_LinkList_LinkList, { headline: linklist.headline, linkgroup: linklist.linkgroup }))] }))] }))] })));
22
22
  };
23
23
 
24
24
  module.exports = FeatureCard;
package/lib/cjs/components/Cards/MultilinkCard/MultiLinkCard.js CHANGED
@@ -8,7 +8,7 @@ require('tslib');
8
8
  require('react');
9
9
  require('../../../GlobalCtx-10114bdd.js');
10
10
 
11
- const MultilinkCard = ({ isvideo, eyebrow, title, size = "narrow", alignment, intro, link, linklist, image, }) => {
11
+ const MultilinkCard = ({ isvideo, eyebrow, title, size = "standard", alignment, intro, link, linklist, image, titleLevel: TitleElement, }) => {
12
12
  const { prefix } = hooks_useGlobalSettings();
13
13
  const baseClass = `${prefix}--card`;
14
14
  const cardClasses = classNames(baseClass, `${baseClass}__type__multilink`, {
@@ -18,7 +18,7 @@ const MultilinkCard = ({ isvideo, eyebrow, title, size = "narrow", alignment, in
18
18
  [`${baseClass}__isvideo`]: isvideo,
19
19
  [`${baseClass}__linklist`]: linklist,
20
20
  });
21
- return (jsxRuntime.jsxs("div", Object.assign({ className: cardClasses }, { children: [link && (jsxRuntime.jsx("a", Object.assign({ className: `${baseClass}--link`, href: link, title: title }, { children: jsxRuntime.jsx("span", Object.assign({ className: `${baseClass}--link--text` }, { children: title })) }))), jsxRuntime.jsxs("div", Object.assign({ className: `${baseClass}--wrap` }, { children: [image && (jsxRuntime.jsx("div", Object.assign({ className: `${baseClass}--image--wrapper` }, { children: jsxRuntime.jsx("picture", { children: jsxRuntime.jsx("img", { className: `${baseClass}--picture`, src: image, alt: title }) }) }))), jsxRuntime.jsxs("div", Object.assign({ className: `${baseClass}--content` }, { children: [eyebrow && jsxRuntime.jsx("p", Object.assign({ className: `${baseClass}--eyebrow` }, { children: eyebrow })), title && jsxRuntime.jsx("h5", Object.assign({ className: `${baseClass}--title` }, { children: title })), image && (jsxRuntime.jsx("div", Object.assign({ className: `${baseClass}--image--wrapper` }, { children: jsxRuntime.jsx("picture", { children: jsxRuntime.jsx("img", { className: `${baseClass}--picture`, src: image, alt: title }) }) }))), intro && jsxRuntime.jsx("p", Object.assign({ className: `${baseClass}--intro` }, { children: intro })), linklist && (jsxRuntime.jsx(components_LinkList_LinkList, { headline: linklist.headline, linkgroup: linklist.linkgroup }))] }))] }))] })));
21
+ return (jsxRuntime.jsxs("div", Object.assign({ className: cardClasses }, { children: [link && (jsxRuntime.jsx("a", Object.assign({ className: `${baseClass}--link`, href: link, title: title }, { children: jsxRuntime.jsx("span", Object.assign({ className: `${baseClass}--link--text` }, { children: title })) }))), jsxRuntime.jsxs("div", Object.assign({ className: `${baseClass}--wrap` }, { children: [image && (jsxRuntime.jsx("div", Object.assign({ className: `${baseClass}--image--wrapper` }, { children: jsxRuntime.jsx("picture", { children: jsxRuntime.jsx("img", { className: `${baseClass}--picture`, src: image, alt: title }) }) }))), jsxRuntime.jsxs("div", Object.assign({ className: `${baseClass}--content` }, { children: [eyebrow && jsxRuntime.jsx("p", Object.assign({ className: `${baseClass}--eyebrow` }, { children: eyebrow })), title && TitleElement ? (jsxRuntime.jsx(TitleElement, Object.assign({ className: `${baseClass}--title` }, { children: title }))) : (jsxRuntime.jsx("p", Object.assign({ className: `${baseClass}--title` }, { children: title }))), image && (jsxRuntime.jsx("div", Object.assign({ className: `${baseClass}--image--wrapper` }, { children: jsxRuntime.jsx("picture", { children: jsxRuntime.jsx("img", { className: `${baseClass}--picture`, src: image, alt: title }) }) }))), intro && jsxRuntime.jsx("p", Object.assign({ className: `${baseClass}--intro` }, { children: intro })), linklist && (jsxRuntime.jsx(components_LinkList_LinkList, { headline: linklist.headline, linkgroup: linklist.linkgroup }))] }))] }))] })));
22
22
  };
23
23
 
24
24
  module.exports = MultilinkCard;
package/lib/cjs/components/Cards/PromoCard/PromoCard.js CHANGED
@@ -7,7 +7,7 @@ require('tslib');
7
7
  require('react');
8
8
  require('../../../GlobalCtx-10114bdd.js');
9
9
 
10
- const PromoCard = ({ eyebrow, title, theme, size = "narrow", cornercut, intro, link, cta, }) => {
10
+ const PromoCard = ({ eyebrow, title, theme, size = "narrow", cornercut, intro, link, cta, titleLevel: TitleElement, }) => {
11
11
  const { prefix } = hooks_useGlobalSettings();
12
12
  const baseClass = `${prefix}--card`;
13
13
  const wrapperClass = classNames(`${baseClass}--wrapper`, `${baseClass}--wrapper__type__promo ${baseClass}--wrapper__type__promo__size__${size}`);
@@ -17,7 +17,7 @@ const PromoCard = ({ eyebrow, title, theme, size = "narrow", cornercut, intro, l
17
17
  [`${baseClass}__size__${size}`]: size,
18
18
  [`${baseClass}__theme__${theme}`]: theme,
19
19
  });
20
- return (jsxRuntime.jsx("div", Object.assign({ className: wrapperClass }, { children: jsxRuntime.jsxs("div", Object.assign({ className: cardClasses }, { children: [link && (jsxRuntime.jsx("a", Object.assign({ className: `${baseClass}--link`, href: link, title: title }, { children: jsxRuntime.jsx("span", Object.assign({ className: `${baseClass}--link--text` }, { children: title })) }))), jsxRuntime.jsx("div", Object.assign({ className: `${baseClass}--wrap` }, { children: jsxRuntime.jsxs("div", Object.assign({ className: `${baseClass}--content` }, { children: [eyebrow && jsxRuntime.jsx("p", Object.assign({ className: `${baseClass}--eyebrow` }, { children: eyebrow })), title && jsxRuntime.jsx("h5", Object.assign({ className: `${baseClass}--title` }, { children: title })), intro && jsxRuntime.jsx("p", Object.assign({ className: `${baseClass}--intro` }, { children: intro })), cta && cta.label && (jsxRuntime.jsx("a", Object.assign({ className: `${baseClass}--cta ${prefix}--button ${prefix}--button--medium ${prefix}--button--primary`, href: cta.url }, { children: jsxRuntime.jsx("span", Object.assign({ className: "link__label" }, { children: cta.label })) })))] })) }))] })) })));
20
+ return (jsxRuntime.jsx("div", Object.assign({ className: wrapperClass }, { children: jsxRuntime.jsxs("div", Object.assign({ className: cardClasses }, { children: [link && (jsxRuntime.jsx("a", Object.assign({ className: `${baseClass}--link`, href: link, title: title }, { children: jsxRuntime.jsx("span", Object.assign({ className: `${baseClass}--link--text` }, { children: title })) }))), jsxRuntime.jsx("div", Object.assign({ className: `${baseClass}--wrap` }, { children: jsxRuntime.jsxs("div", Object.assign({ className: `${baseClass}--content` }, { children: [eyebrow && jsxRuntime.jsx("p", Object.assign({ className: `${baseClass}--eyebrow` }, { children: eyebrow })), title && TitleElement ? (jsxRuntime.jsx(TitleElement, Object.assign({ className: `${baseClass}--title` }, { children: title }))) : (jsxRuntime.jsx("p", Object.assign({ className: `${baseClass}--title` }, { children: title }))), intro && jsxRuntime.jsx("p", Object.assign({ className: `${baseClass}--intro` }, { children: intro })), cta && cta.label && (jsxRuntime.jsx("a", Object.assign({ className: `${baseClass}--cta ${prefix}--button ${prefix}--button--medium ${prefix}--button--primary`, href: cta.url }, { children: jsxRuntime.jsx("span", Object.assign({ className: "link__label" }, { children: cta.label })) })))] })) }))] })) })));
21
21
  };
22
22
 
23
23
  module.exports = PromoCard;
package/lib/cjs/components/Cards/StatCard/StatCard.js CHANGED
@@ -8,14 +8,14 @@ require('tslib');
8
8
  require('react');
9
9
  require('../../../GlobalCtx-10114bdd.js');
10
10
 
11
- const StatCard = ({ title, color, size = "standard", intro, source, }) => {
11
+ const StatCard = ({ title, color, size = "standard", intro, source, titleLevel: TitleElement, }) => {
12
12
  const { prefix } = hooks_useGlobalSettings();
13
13
  const baseClass = `${prefix}--card`;
14
14
  const cardClasses = classNames(baseClass, `${baseClass}__type__stat`, {
15
15
  [`${baseClass}__color__${color}`]: color,
16
16
  [`${baseClass}__size__${size}`]: size,
17
17
  });
18
- return (jsxRuntime.jsx("div", Object.assign({ className: cardClasses }, { children: jsxRuntime.jsx("div", Object.assign({ className: `${baseClass}--wrap` }, { children: jsxRuntime.jsxs("div", Object.assign({ className: `${baseClass}--content` }, { children: [title && jsxRuntime.jsx("h5", Object.assign({ className: `${baseClass}--title` }, { children: title })), intro && jsxRuntime.jsx("p", Object.assign({ className: `${baseClass}--intro` }, { children: intro })), source && jsxRuntime.jsx(components_Link_Link, Object.assign({ url: source.url }, { children: source.label }))] })) })) })));
18
+ return (jsxRuntime.jsx("div", Object.assign({ className: cardClasses }, { children: jsxRuntime.jsx("div", Object.assign({ className: `${baseClass}--wrap` }, { children: jsxRuntime.jsxs("div", Object.assign({ className: `${baseClass}--content` }, { children: [title && TitleElement ? (jsxRuntime.jsx(TitleElement, Object.assign({ className: `${baseClass}--title` }, { children: title }))) : (jsxRuntime.jsx("p", Object.assign({ className: `${baseClass}--title` }, { children: title }))), intro && jsxRuntime.jsx("p", Object.assign({ className: `${baseClass}--intro` }, { children: intro })), source && jsxRuntime.jsx(components_Link_Link, Object.assign({ url: source.url }, { children: source.label }))] })) })) })));
19
19
  };
20
20
 
21
21
  module.exports = StatCard;
package/lib/cjs/components/Cards/TextCard/TextCard.js CHANGED
@@ -8,7 +8,7 @@ require('tslib');
8
8
  require('react');
9
9
  require('../../../GlobalCtx-10114bdd.js');
10
10
 
11
- const TextCard = ({ eyebrow, title, theme, size, date, profile, link, }) => {
11
+ const TextCard = ({ eyebrow, title, theme, size, date, profile, link, titleLevel: TitleElement, }) => {
12
12
  const { prefix } = hooks_useGlobalSettings();
13
13
  const baseClass = `${prefix}--card`;
14
14
  const wrapperClass = classNames(`${baseClass}--wrapper`);
@@ -17,7 +17,7 @@ const TextCard = ({ eyebrow, title, theme, size, date, profile, link, }) => {
17
17
  [`${baseClass}__size__${size}`]: size,
18
18
  [`${baseClass}__theme__${theme}`]: theme,
19
19
  });
20
- return (jsxRuntime.jsx("div", Object.assign({ className: wrapperClass }, { children: jsxRuntime.jsxs("div", Object.assign({ className: cardClasses }, { children: [link && (jsxRuntime.jsx("a", Object.assign({ className: `${baseClass}--link`, href: link, title: title }, { children: jsxRuntime.jsx("span", Object.assign({ className: `${baseClass}--link--text` }, { children: title })) }))), jsxRuntime.jsx("div", Object.assign({ className: `${baseClass}--wrap` }, { children: jsxRuntime.jsxs("div", Object.assign({ className: `${baseClass}--content` }, { children: [eyebrow && jsxRuntime.jsx("p", Object.assign({ className: `${baseClass}--eyebrow` }, { children: eyebrow })), title && jsxRuntime.jsx("h5", Object.assign({ className: `${baseClass}--title` }, { children: title })), date && (jsxRuntime.jsx("time", Object.assign({ className: `${baseClass}--date`, dateTime: date.unix }, { children: date.human }))), profile && profile.avatar && (jsxRuntime.jsx(components_Profile_Profile, { avatar: profile.avatar, description: profile.description, link: profile.link, name: profile.name, role: profile.role, className: `${prefix}--profile__theme__${theme}` }))] })) }))] })) })));
20
+ return (jsxRuntime.jsx("div", Object.assign({ className: wrapperClass }, { children: jsxRuntime.jsxs("div", Object.assign({ className: cardClasses }, { children: [link && (jsxRuntime.jsx("a", Object.assign({ className: `${baseClass}--link`, href: link, title: title }, { children: jsxRuntime.jsx("span", Object.assign({ className: `${baseClass}--link--text` }, { children: title })) }))), jsxRuntime.jsx("div", Object.assign({ className: `${baseClass}--wrap` }, { children: jsxRuntime.jsxs("div", Object.assign({ className: `${baseClass}--content` }, { children: [eyebrow && jsxRuntime.jsx("p", Object.assign({ className: `${baseClass}--eyebrow` }, { children: eyebrow })), title && TitleElement ? (jsxRuntime.jsx(TitleElement, Object.assign({ className: `${baseClass}--title` }, { children: title }))) : (jsxRuntime.jsx("p", Object.assign({ className: `${baseClass}--title` }, { children: title }))), date && (jsxRuntime.jsx("time", Object.assign({ className: `${baseClass}--date`, dateTime: date.unix }, { children: date.human }))), profile && profile.avatar && (jsxRuntime.jsx(components_Profile_Profile, { avatar: profile.avatar, description: profile.description, link: profile.link, name: profile.name, role: profile.role, className: `${prefix}--profile__theme__${theme}` }))] })) }))] })) })));
21
21
  };
22
22
 
23
23
  module.exports = TextCard;
package/lib/cjs/components/LogoGrid/LogoGrid.js CHANGED
@@ -3,8 +3,8 @@
3
3
  var jsxRuntime = require('react/jsx-runtime');
4
4
  var classNames = require('classnames');
5
5
  var hooks_useGlobalSettings = require('../../hooks/useGlobalSettings.js');
6
- require('react');
7
6
  require('tslib');
7
+ require('react');
8
8
  require('../../GlobalCtx-10114bdd.js');
9
9
 
10
10
  const LogoGridItem = ({ url, label, src }) => {
package/lib/cjs/components/Navigation/Navigation.js CHANGED
@@ -20,31 +20,57 @@ const Navigation = ({ logo, mobilelogo, siteurl, tagline, primarynav, subnav, me
20
20
  const { prefix } = hooks_useGlobalSettings();
21
21
  const [toggleMenuOpen, setMenuToggleOpen] = React.useState(false);
22
22
  const [toggleSearchOpen, setSearchToggleOpen] = React.useState(false);
23
+ const [searchTabbable, setSearchTabbable] = React.useState(false);
23
24
  const [toggleSubnavOpen, setSubnavToggleOpen] = React.useState(false);
25
+ const [subnavTabbable, setSubnavTabbable] = React.useState(false);
24
26
  const [toggleLanguageOpen, setLanguageToggleOpen] = React.useState(false);
25
27
  const baseClass = `${prefix}--header`;
26
28
  const NavigationClasses = classNames(baseClass, {
27
29
  [`${prefix}--mobile--open`]: toggleMenuOpen,
28
- [`${prefix}--select--open`]: toggleLanguageOpen,
29
30
  [`${prefix}--search--open`]: toggleSearchOpen,
30
31
  [`${prefix}--subnav--open`]: toggleSubnavOpen,
32
+ [`${prefix}--select--open`]: toggleLanguageOpen,
33
+ [`${prefix}--context--open`]: toggleLanguageOpen,
31
34
  });
32
35
  const handleMenuToggle = () => {
33
36
  setMenuToggleOpen(!toggleMenuOpen);
34
37
  };
35
- const handleLanguageToggle = () => {
38
+ const handleLanguageToggle = React.useCallback(() => {
36
39
  setLanguageToggleOpen(!toggleLanguageOpen);
37
- };
40
+ }, [toggleLanguageOpen]);
38
41
  const handleSearchToggle = () => {
39
- setSearchToggleOpen(!toggleSearchOpen);
42
+ if (toggleSearchOpen) {
43
+ setSearchToggleOpen(false);
44
+ setTimeout(() => setSearchTabbable(false), 225);
45
+ return;
46
+ }
47
+ setSearchTabbable(true);
48
+ setTimeout(() => setSearchToggleOpen(true), 10);
40
49
  };
41
50
  const handleSubnavToggle = () => {
42
- setSubnavToggleOpen(!toggleSubnavOpen);
51
+ if (toggleSubnavOpen) {
52
+ setSubnavToggleOpen(false);
53
+ setTimeout(() => setSubnavTabbable(false), 125);
54
+ return;
55
+ }
56
+ setSubnavTabbable(true);
57
+ setTimeout(() => setSubnavToggleOpen(true), 10);
43
58
  };
44
- return (jsxRuntime.jsxs("header", Object.assign({ className: NavigationClasses }, { children: [jsxRuntime.jsx("div", Object.assign({ className: `${baseClass}--utility-bar` }, { children: jsxRuntime.jsx("div", Object.assign({ className: `${prefix}--language-switcher` }, { children: jsxRuntime.jsxs("div", Object.assign({ className: `${prefix}--language-switcher--wrap` }, { children: [jsxRuntime.jsx("button", Object.assign({ className: `${prefix}--language-switcher--button`, type: "button" }, { children: languagelabel })), jsxRuntime.jsx(components_ContextMenu_ContextMenu, { links: languagecontextmenu === null || languagecontextmenu === void 0 ? void 0 : languagecontextmenu.links })] })) })) })), jsxRuntime.jsx("div", Object.assign({ className: `${baseClass}--logo-bar` }, { children: jsxRuntime.jsxs("div", Object.assign({ className: `${baseClass}--inner ${prefix}--container` }, { children: [jsxRuntime.jsx("a", Object.assign({ href: siteurl, className: `${baseClass}--logo-link` }, { children: jsxRuntime.jsx("img", { className: `${baseClass}--logo`, src: logo, alt: "ILO Logo" }) })), jsxRuntime.jsxs("p", Object.assign({ className: `${baseClass}--logo-tagline` }, { children: [tagline === null || tagline === void 0 ? void 0 : tagline.tag, jsxRuntime.jsx("span", Object.assign({ className: `${baseClass}--logo-tagline--small` }, { children: tagline === null || tagline === void 0 ? void 0 : tagline.small }))] })), jsxRuntime.jsx("button", Object.assign({ className: `${baseClass}--menu`, onClick: handleMenuToggle }, { children: menulabel }))] })) })), jsxRuntime.jsxs("div", Object.assign({ className: `${baseClass}--navigation` }, { children: [jsxRuntime.jsxs("div", Object.assign({ className: `${baseClass}--inner ${prefix}--container` }, { children: [jsxRuntime.jsxs("div", Object.assign({ className: `${prefix}--mobile--nav` }, { children: [jsxRuntime.jsxs("div", Object.assign({ className: `${prefix}--mobile--nav--logo` }, { children: [jsxRuntime.jsx("a", Object.assign({ href: siteurl, className: `${baseClass}--logo-link` }, { children: jsxRuntime.jsx("img", { className: `${baseClass}--logo`, src: mobilelogo, alt: "ILO Logo" }) })), jsxRuntime.jsx("button", Object.assign({ className: `${baseClass}--menu--close`, onClick: handleMenuToggle }, { children: menucloselabel }))] })), jsxRuntime.jsx("div", Object.assign({ className: `${prefix}--mobile--nav--search` }, { children: jsxRuntime.jsx(components_SearchField_SearchField, { input: searchfield === null || searchfield === void 0 ? void 0 : searchfield.input, action: searchfield === null || searchfield === void 0 ? void 0 : searchfield.action }) })), jsxRuntime.jsx("div", Object.assign({ className: `${prefix}--mobile--nav--language--switcher` }, { children: jsxRuntime.jsx("button", Object.assign({ className: `${prefix}--mobile--nav--language--switcher--button`, onClick: handleLanguageToggle, type: "button" }, { children: languagelabel })) })), jsxRuntime.jsx("div", Object.assign({ className: `${prefix}--mobile--nav--language--select` }, { children: jsxRuntime.jsxs("div", Object.assign({ className: `${baseClass}--inner ${prefix}--container` }, { children: [jsxRuntime.jsxs("div", Object.assign({ className: `${prefix}--mobile--subnav--menu` }, { children: [jsxRuntime.jsx("button", Object.assign({ className: `${prefix}--mobile--subnav--back`, onClick: handleLanguageToggle, type: "button" }, { children: subnav === null || subnav === void 0 ? void 0 : subnav.mobilebacklabel })), jsxRuntime.jsx("button", Object.assign({ className: `${baseClass}--menu--close`, onClick: handleMenuToggle }, { children: subnav === null || subnav === void 0 ? void 0 : subnav.mobilecloselabel })), jsxRuntime.jsx("h6", Object.assign({ className: `${prefix}--mobile--subnav--label` }, { children: languagelabel }))] })), jsxRuntime.jsx("ul", Object.assign({ className: `${prefix}--nav--set` }, { children: (languagecontextmenu === null || languagecontextmenu === void 0 ? void 0 : languagecontextmenu.links) &&
59
+ React.useEffect(() => {
60
+ if (window) {
61
+ if (toggleLanguageOpen) {
62
+ window.addEventListener("click", handleLanguageToggle);
63
+ }
64
+ else {
65
+ window.removeEventListener("click", handleLanguageToggle);
66
+ }
67
+ return () => window.removeEventListener("click", handleLanguageToggle);
68
+ }
69
+ }, [toggleLanguageOpen, handleLanguageToggle]);
70
+ return (jsxRuntime.jsxs("header", Object.assign({ className: NavigationClasses }, { children: [jsxRuntime.jsx("div", Object.assign({ className: `${baseClass}--utility-bar` }, { children: jsxRuntime.jsx("div", Object.assign({ className: `${prefix}--language-switcher` }, { children: jsxRuntime.jsxs("div", Object.assign({ className: `${prefix}--language-switcher--wrap` }, { children: [jsxRuntime.jsx("button", Object.assign({ className: `${prefix}--language-switcher--button`, type: "button", onClick: handleLanguageToggle }, { children: languagelabel })), jsxRuntime.jsx(components_ContextMenu_ContextMenu, { links: languagecontextmenu === null || languagecontextmenu === void 0 ? void 0 : languagecontextmenu.links })] })) })) })), jsxRuntime.jsx("div", Object.assign({ className: `${baseClass}--logo-bar` }, { children: jsxRuntime.jsxs("div", Object.assign({ className: `${baseClass}--inner ${prefix}--container` }, { children: [jsxRuntime.jsx("a", Object.assign({ href: siteurl, className: `${baseClass}--logo-link` }, { children: jsxRuntime.jsx("img", { className: `${baseClass}--logo`, src: logo, alt: "ILO Logo" }) })), jsxRuntime.jsxs("p", Object.assign({ className: `${baseClass}--logo-tagline` }, { children: [tagline === null || tagline === void 0 ? void 0 : tagline.tag, jsxRuntime.jsx("span", Object.assign({ className: `${baseClass}--logo-tagline--small` }, { children: tagline === null || tagline === void 0 ? void 0 : tagline.small }))] })), jsxRuntime.jsx("button", Object.assign({ className: `${baseClass}--menu`, onClick: handleMenuToggle }, { children: menulabel }))] })) })), jsxRuntime.jsxs("div", Object.assign({ className: `${baseClass}--navigation` }, { children: [jsxRuntime.jsxs("div", Object.assign({ className: `${baseClass}--inner ${prefix}--container` }, { children: [jsxRuntime.jsxs("div", Object.assign({ className: `${prefix}--mobile--nav` }, { children: [jsxRuntime.jsxs("div", Object.assign({ className: `${prefix}--mobile--nav--logo` }, { children: [jsxRuntime.jsx("a", Object.assign({ href: siteurl, className: `${baseClass}--logo-link` }, { children: jsxRuntime.jsx("img", { className: `${baseClass}--logo`, src: mobilelogo, alt: "ILO Logo" }) })), jsxRuntime.jsx("button", Object.assign({ className: `${baseClass}--menu--close`, onClick: handleMenuToggle }, { children: menucloselabel }))] })), jsxRuntime.jsx("div", Object.assign({ className: `${prefix}--mobile--nav--search` }, { children: jsxRuntime.jsx(components_SearchField_SearchField, { input: searchfield === null || searchfield === void 0 ? void 0 : searchfield.input, action: searchfield === null || searchfield === void 0 ? void 0 : searchfield.action }) })), jsxRuntime.jsx("div", Object.assign({ className: `${prefix}--mobile--nav--language--switcher` }, { children: jsxRuntime.jsx("button", Object.assign({ className: `${prefix}--mobile--nav--language--switcher--button`, onClick: handleLanguageToggle, type: "button" }, { children: languagelabel })) })), jsxRuntime.jsx("div", Object.assign({ className: `${prefix}--mobile--nav--language--select` }, { children: jsxRuntime.jsxs("div", Object.assign({ className: `${baseClass}--inner ${prefix}--container` }, { children: [jsxRuntime.jsxs("div", Object.assign({ className: `${prefix}--mobile--subnav--menu` }, { children: [jsxRuntime.jsx("button", Object.assign({ className: `${prefix}--mobile--subnav--back`, onClick: handleLanguageToggle, type: "button" }, { children: subnav === null || subnav === void 0 ? void 0 : subnav.mobilebacklabel })), jsxRuntime.jsx("button", Object.assign({ className: `${baseClass}--menu--close`, onClick: handleMenuToggle }, { children: subnav === null || subnav === void 0 ? void 0 : subnav.mobilecloselabel })), jsxRuntime.jsx("h6", Object.assign({ className: `${prefix}--mobile--subnav--label` }, { children: languagelabel }))] })), jsxRuntime.jsx("ul", Object.assign({ className: `${prefix}--nav--set` }, { children: (languagecontextmenu === null || languagecontextmenu === void 0 ? void 0 : languagecontextmenu.links) &&
45
71
  languagecontextmenu.links.map((item, index) => (jsxRuntime.jsx("li", Object.assign({ className: `${prefix}--nav--items` }, { children: jsxRuntime.jsx("a", Object.assign({ href: item.url, className: `${prefix}--nav--link ${prefix}--nav--language` }, { children: item.label })) }), index))) }))] })) }))] })), jsxRuntime.jsxs("nav", Object.assign({ className: `${prefix}--nav`, "aria-labelledby": "primary-navigation" }, { children: [jsxRuntime.jsx("h2", Object.assign({ className: `${prefix}--nav--label`, id: "primary-navigation" }, { children: primarynav === null || primarynav === void 0 ? void 0 : primarynav.navlabel })), jsxRuntime.jsxs("ul", Object.assign({ className: `${prefix}--nav--set` }, { children: [(primarynav === null || primarynav === void 0 ? void 0 : primarynav.items) &&
46
- primarynav.items.map((item, index) => (jsxRuntime.jsx("li", Object.assign({ className: `${prefix}--nav--items` }, { children: jsxRuntime.jsx("a", Object.assign({ href: item.url, className: `${prefix}--nav--link` }, { children: item.label })) }), index))), subnav && (jsxRuntime.jsx("li", Object.assign({ className: `${prefix}--nav--items` }, { children: jsxRuntime.jsx("button", Object.assign({ className: `${prefix}--nav--trigger`, onClick: handleSubnavToggle }, { children: subnav.buttonlabel })) })))] }))] })), jsxRuntime.jsx("div", Object.assign({ className: `${prefix}--search` }, { children: jsxRuntime.jsx("button", Object.assign({ className: `${prefix}--search--button`, type: "button", onClick: handleSearchToggle }, { children: searchlabel })) }))] })), subnav && (jsxRuntime.jsx("nav", Object.assign({ className: `${prefix}--subnav`, "aria-labelledby": "secondary-navigation" }, { children: jsxRuntime.jsxs("div", Object.assign({ className: `${prefix}--subnav--inner ${prefix}--container` }, { children: [jsxRuntime.jsx("div", Object.assign({ className: `${prefix}--mobile--subnav` }, { children: jsxRuntime.jsxs("div", Object.assign({ className: `${prefix}--mobile--subnav--menu` }, { children: [jsxRuntime.jsx("button", Object.assign({ className: `${prefix}--mobile--subnav--back`, onClick: handleSubnavToggle, type: "button" }, { children: subnav.mobilebacklabel })), jsxRuntime.jsx("button", Object.assign({ className: `${prefix}--header--menu--close`, onClick: handleMenuToggle }, { children: subnav.mobilecloselabel })), jsxRuntime.jsx("h6", Object.assign({ className: `${prefix}--mobile--subnav--label` }, { children: subnav.buttonlabel }))] })) })), jsxRuntime.jsx("h2", Object.assign({ className: `${prefix}--nav--label`, id: "secondary-navigation" }, { children: subnav.navlabel })), jsxRuntime.jsx("ul", Object.assign({ className: `${prefix}--subnav--set` }, { children: (subnav === null || subnav === void 0 ? void 0 : subnav.items) &&
47
- subnav.items.map((item, index) => (jsxRuntime.jsx("li", Object.assign({ className: `${prefix}--subnav--items` }, { children: jsxRuntime.jsx("a", Object.assign({ href: item.url, className: `${prefix}--subnav--link` }, { children: item.label })) }), index))) }))] })) }))), jsxRuntime.jsx("div", Object.assign({ className: `${prefix}--search-box` }, { children: jsxRuntime.jsx("div", Object.assign({ className: `${prefix}--header--inner ${prefix}--container` }, { children: jsxRuntime.jsx(components_SearchField_SearchField, { input: searchfield === null || searchfield === void 0 ? void 0 : searchfield.input, action: searchfield === null || searchfield === void 0 ? void 0 : searchfield.action }) })) }))] }))] })));
72
+ primarynav.items.map((item, index) => (jsxRuntime.jsx("li", Object.assign({ className: `${prefix}--nav--items` }, { children: jsxRuntime.jsx("a", Object.assign({ href: item.url, className: `${prefix}--nav--link` }, { children: item.label })) }), index))), subnav && (jsxRuntime.jsx("li", Object.assign({ className: `${prefix}--nav--items` }, { children: jsxRuntime.jsx("button", Object.assign({ className: `${prefix}--nav--trigger`, onClick: handleSubnavToggle }, { children: subnav.buttonlabel })) })))] }))] })), jsxRuntime.jsx("div", Object.assign({ className: `${prefix}--search` }, { children: jsxRuntime.jsx("button", Object.assign({ className: `${prefix}--search--button`, type: "button", onClick: handleSearchToggle }, { children: searchlabel })) }))] })), subnav && (jsxRuntime.jsx("nav", Object.assign({ style: { display: subnavTabbable ? "block" : "none" }, className: `${prefix}--subnav`, "aria-labelledby": "secondary-navigation" }, { children: jsxRuntime.jsxs("div", Object.assign({ className: `${prefix}--subnav--inner ${prefix}--container` }, { children: [jsxRuntime.jsx("div", Object.assign({ className: `${prefix}--mobile--subnav` }, { children: jsxRuntime.jsxs("div", Object.assign({ className: `${prefix}--mobile--subnav--menu` }, { children: [jsxRuntime.jsx("button", Object.assign({ className: `${prefix}--mobile--subnav--back`, onClick: handleSubnavToggle, type: "button" }, { children: subnav.mobilebacklabel })), jsxRuntime.jsx("button", Object.assign({ className: `${prefix}--header--menu--close`, onClick: handleMenuToggle }, { children: subnav.mobilecloselabel })), jsxRuntime.jsx("h6", Object.assign({ className: `${prefix}--mobile--subnav--label` }, { children: subnav.buttonlabel }))] })) })), jsxRuntime.jsx("h2", Object.assign({ className: `${prefix}--nav--label`, id: "secondary-navigation" }, { children: subnav.navlabel })), jsxRuntime.jsx("ul", Object.assign({ className: `${prefix}--subnav--set` }, { children: (subnav === null || subnav === void 0 ? void 0 : subnav.items) &&
73
+ subnav.items.map((item, index) => (jsxRuntime.jsx("li", Object.assign({ className: `${prefix}--subnav--items` }, { children: jsxRuntime.jsx("a", Object.assign({ href: item.url, className: `${prefix}--subnav--link` }, { children: item.label })) }), index))) }))] })) }))), jsxRuntime.jsx("div", Object.assign({ style: { display: searchTabbable ? "block" : "none" }, className: `${prefix}--search-box` }, { children: jsxRuntime.jsx("div", Object.assign({ className: `${prefix}--header--inner ${prefix}--container` }, { children: jsxRuntime.jsx(components_SearchField_SearchField, { input: searchfield === null || searchfield === void 0 ? void 0 : searchfield.input, action: searchfield === null || searchfield === void 0 ? void 0 : searchfield.action }) })) }))] }))] })));
48
74
  };
49
75
 
50
76
  module.exports = Navigation;
package/lib/cjs/components/SocialMedia/SocialMedia.js CHANGED
@@ -3,8 +3,8 @@
3
3
  var jsxRuntime = require('react/jsx-runtime');
4
4
  var classNames = require('classnames');
5
5
  var hooks_useGlobalSettings = require('../../hooks/useGlobalSettings.js');
6
- require('react');
7
6
  require('tslib');
7
+ require('react');
8
8
  require('../../GlobalCtx-10114bdd.js');
9
9
 
10
10
  const SocialMedia = ({ className, theme = "light", justify = "start", headline, icons, }) => {
package/lib/cjs/hooks/index.js CHANGED
@@ -1,7 +1,6 @@
1
1
  'use strict';
2
2
 
3
3
  var hooks_useGlobalSettings = require('./useGlobalSettings.js');
4
- var hooks_useVideoPlayer = require('./useVideoPlayer.js');
5
4
  require('tslib');
6
5
  require('react');
7
6
  require('react/jsx-runtime');
@@ -10,4 +9,3 @@ require('../GlobalCtx-10114bdd.js');
10
9
 
11
10
 
12
11
  exports.useGlobalSettings = hooks_useGlobalSettings;
13
- exports.useVideoPlayer = hooks_useVideoPlayer;
package/lib/esm/components/Cards/CardGroup/CardGroup.js CHANGED
@@ -28,12 +28,15 @@ const cardMapper = {
28
28
  factlist: FactlistCard,
29
29
  data: DataCard,
30
30
  };
31
- const CardGroup = ({ cards, cardCount, cta, type }) => {
32
- const Cards = cardMapper[type];
31
+ const CardGroup = ({ cards, titleLevel = "p", cardCount, cta, type, alignment, size, theme, collapsed = false, }) => {
32
+ const Card = cardMapper[type];
33
33
  const { prefix } = useGlobalSettings();
34
34
  const baseClass = `${prefix}--cardgroup`;
35
- const cardGroupClasses = classNames(baseClass, `${baseClass}__count__${cardCount}`);
36
- return (jsxs("div", Object.assign({ className: cardGroupClasses }, { children: [jsx("div", Object.assign({ className: `${baseClass}--inner` }, { children: cards && cards.map((card, index) => jsx(Cards, Object.assign({}, card), index)) })), cta && (jsx("div", Object.assign({ className: `${baseClass}--button-wrap` }, { children: jsx("a", Object.assign({ className: `${prefix}--button ${prefix}--button--medium ${prefix}--button--secondary`, href: cta.url }, { children: jsx("span", Object.assign({ className: "button__label" }, { children: cta.label })) })) })))] })));
35
+ const cardGroupClasses = classNames(baseClass, `${baseClass}__count__${cardCount}`, {
36
+ [`${baseClass}__collapsed`]: collapsed,
37
+ });
38
+ return (jsxs("div", Object.assign({ className: cardGroupClasses }, { children: [jsx("div", Object.assign({ className: `${baseClass}--inner` }, { children: cards &&
39
+ cards.map((card, index) => (jsx(Card, Object.assign({}, card, { size: size, theme: theme, alignment: alignment, titleLevel: titleLevel }), index))) })), cta && (jsx("div", Object.assign({ className: `${baseClass}--button-wrap` }, { children: jsx("a", Object.assign({ className: `${prefix}--button ${prefix}--button--medium ${prefix}--button--secondary`, href: cta.url }, { children: jsx("span", Object.assign({ className: "button__label" }, { children: cta.label })) })) })))] })));
37
40
  };
38
41
 
39
42
  export { CardGroup as default };
package/lib/esm/components/Cards/CardGroup/index.js CHANGED
@@ -88,6 +88,7 @@ const textCardGroup = {
88
88
  ],
89
89
  cardCount: "three",
90
90
  type: "text",
91
+ size: "narrow",
91
92
  cta: {
92
93
  label: "Discover our unique mission",
93
94
  url: "https://www.ilo.org",
@@ -133,6 +134,7 @@ const statCardGroup = {
133
134
  },
134
135
  ],
135
136
  cardCount: "three",
137
+ size: "narrow",
136
138
  type: "stat",
137
139
  cta: {
138
140
  label: "Discover our unique mission",
@@ -260,6 +262,7 @@ const multilinkCardGroup = {
260
262
  ],
261
263
  type: "multilink",
262
264
  cardCount: "three",
265
+ size: "standard",
263
266
  cta: {
264
267
  label: "Discover our unique mission",
265
268
  url: "https://www.ilo.org",
@@ -268,7 +271,6 @@ const multilinkCardGroup = {
268
271
  const promoCardGroup = {
269
272
  cards: [
270
273
  {
271
- size: "standard",
272
274
  title: "ILO welcomes first global agreement on working conditions",
273
275
  eyebrow: "Report",
274
276
  theme: "dark",
@@ -281,7 +283,6 @@ const promoCardGroup = {
281
283
  },
282
284
  },
283
285
  {
284
- size: "standard",
285
286
  title: "Renewable energy jobs hits 12.7 million globally",
286
287
  eyebrow: "High-level meeting",
287
288
  theme: "dark",
@@ -294,7 +295,6 @@ const promoCardGroup = {
294
295
  },
295
296
  },
296
297
  {
297
- size: "standard",
298
298
  title: "ILO welcomes G7 call to make a just transition",
299
299
  eyebrow: "Podcast",
300
300
  theme: "dark",
@@ -307,7 +307,6 @@ const promoCardGroup = {
307
307
  },
308
308
  },
309
309
  {
310
- size: "standard",
311
310
  title: "Telangana and Andhra Pradesh launch pre-departure handbook",
312
311
  eyebrow: "High-level meeting",
313
312
  theme: "dark",
@@ -322,6 +321,7 @@ const promoCardGroup = {
322
321
  ],
323
322
  type: "promo",
324
323
  cardCount: "three",
324
+ size: "standard",
325
325
  cta: {
326
326
  label: "Discover our unique mission",
327
327
  url: "https://www.ilo.org",
@@ -416,6 +416,7 @@ const featureCardGroup = {
416
416
  ],
417
417
  cardCount: "three",
418
418
  type: "feature",
419
+ size: "narrow",
419
420
  cta: {
420
421
  label: "Discover our unique mission",
421
422
  url: "https://www.ilo.org",
@@ -474,6 +475,7 @@ const detailCardGroup = {
474
475
  ],
475
476
  type: "detail",
476
477
  cardCount: "three",
478
+ size: "narrow",
477
479
  cta: {
478
480
  label: "Discover our unique mission",
479
481
  url: "https://www.ilo.org",
@@ -520,6 +522,7 @@ const factListCardGroup = {
520
522
  ],
521
523
  type: "factlist",
522
524
  cardCount: "three",
525
+ size: "narrow",
523
526
  cta: {
524
527
  label: "Discover our unique mission",
525
528
  url: "https://www.ilo.org",
@@ -528,7 +531,7 @@ const factListCardGroup = {
528
531
  const dataCardGroup = {
529
532
  cards: [
530
533
  {
531
- size: "standard",
534
+ size: "narrow",
532
535
  eyebrow: "Press release",
533
536
  image: "/small.jpg",
534
537
  columns: "one",
@@ -591,7 +594,6 @@ const dataCardGroup = {
591
594
  },
592
595
  },
593
596
  {
594
- size: "standard",
595
597
  eyebrow: "Report",
596
598
  image: "/small.jpg",
597
599
  columns: "one",
@@ -650,7 +652,6 @@ const dataCardGroup = {
650
652
  },
651
653
  },
652
654
  {
653
- size: "standard",
654
655
  eyebrow: "Meeting",
655
656
  image: "/small.jpg",
656
657
  columns: "one",
@@ -705,7 +706,6 @@ const dataCardGroup = {
705
706
  },
706
707
  },
707
708
  {
708
- size: "standard",
709
709
  eyebrow: "Meeting",
710
710
  image: "/small.jpg",
711
711
  columns: "one",
@@ -774,6 +774,7 @@ const dataCardGroup = {
774
774
  ],
775
775
  cardCount: "three",
776
776
  type: "data",
777
+ size: "narrow",
777
778
  cta: {
778
779
  label: "Discover our unique mission",
779
780
  url: "https://www.ilo.org",
package/lib/esm/components/Cards/DetailCard/DetailCard.js CHANGED
@@ -5,14 +5,14 @@ import 'tslib';
5
5
  import 'react';
6
6
  import '../../../GlobalCtx-7fb23cfa.js';
7
7
 
8
- const DetailCard = ({ eyebrow, title, size = "narrow", intro, date, eventdetails, link, image, }) => {
8
+ const DetailCard = ({ eyebrow, title, size = "narrow", intro, date, eventdetails, link, image, titleLevel: TitleElement, }) => {
9
9
  const { prefix } = useGlobalSettings();
10
10
  const baseClass = `${prefix}--card`;
11
11
  const cardClasses = classNames(baseClass, `${baseClass}__type__detail`, {
12
12
  [`${baseClass}__action`]: link,
13
13
  [`${baseClass}__size__${size}`]: size,
14
14
  });
15
- return (jsxs("div", Object.assign({ className: cardClasses }, { children: [link && (jsx("a", Object.assign({ className: `${baseClass}--link`, href: link, title: title }, { children: jsx("span", Object.assign({ className: `${baseClass}--link--text` }, { children: title })) }))), jsxs("div", Object.assign({ className: `${baseClass}--wrap` }, { children: [image && (jsx("div", Object.assign({ className: `${baseClass}--image--wrapper` }, { children: jsx("picture", { children: jsx("img", { className: `${baseClass}--picture`, src: image, alt: title }) }) }))), jsxs("div", Object.assign({ className: `${baseClass}--content` }, { children: [eyebrow && jsx("p", Object.assign({ className: `${baseClass}--eyebrow` }, { children: eyebrow })), title && jsx("h5", Object.assign({ className: `${baseClass}--title` }, { children: title })), intro && jsx("p", Object.assign({ className: `${baseClass}--intro` }, { children: intro })), date && (jsx("time", Object.assign({ className: `${baseClass}--date`, dateTime: date.unix }, { children: date.human }))), eventdetails && (jsx("p", Object.assign({ className: `${baseClass}--date-extra` }, { children: eventdetails })))] }))] }))] })));
15
+ return (jsxs("div", Object.assign({ className: cardClasses }, { children: [link && (jsx("a", Object.assign({ className: `${baseClass}--link`, href: link, title: title }, { children: jsx("span", Object.assign({ className: `${baseClass}--link--text` }, { children: title })) }))), jsxs("div", Object.assign({ className: `${baseClass}--wrap` }, { children: [image && (jsx("div", Object.assign({ className: `${baseClass}--image--wrapper` }, { children: jsx("picture", { children: jsx("img", { className: `${baseClass}--picture`, src: image, alt: title }) }) }))), jsxs("div", Object.assign({ className: `${baseClass}--content` }, { children: [eyebrow && jsx("p", Object.assign({ className: `${baseClass}--eyebrow` }, { children: eyebrow })), title && TitleElement ? (jsx(TitleElement, Object.assign({ className: `${baseClass}--title` }, { children: title }))) : (jsx("p", Object.assign({ className: `${baseClass}--title` }, { children: title }))), intro && jsx("p", Object.assign({ className: `${baseClass}--intro` }, { children: intro })), date && (jsx("time", Object.assign({ className: `${baseClass}--date`, dateTime: date.unix }, { children: date.human }))), eventdetails && (jsx("p", Object.assign({ className: `${baseClass}--date-extra` }, { children: eventdetails })))] }))] }))] })));
16
16
  };
17
17
 
18
18
  export { DetailCard as default };
package/lib/esm/components/Cards/FactlistCard/FactListCard.js CHANGED
@@ -7,14 +7,14 @@ import 'tslib';
7
7
  import 'react';
8
8
  import '../../../GlobalCtx-7fb23cfa.js';
9
9
 
10
- const FactlistCard = ({ title, theme = "narrow", size, list, }) => {
10
+ const FactlistCard = ({ title, theme, size = "narrow", list, titleLevel: TitleElement, }) => {
11
11
  const { prefix } = useGlobalSettings();
12
12
  const baseClass = `${prefix}--card`;
13
13
  const cardClasses = classNames(baseClass, `${baseClass}__type__factlist`, {
14
14
  [`${baseClass}__size__${size}`]: size,
15
15
  [`${baseClass}__theme__${theme}`]: theme,
16
16
  });
17
- return (jsx("div", Object.assign({ className: cardClasses }, { children: jsx("div", Object.assign({ className: `${baseClass}--wrap` }, { children: jsxs("div", Object.assign({ className: `${baseClass}--content` }, { children: [title && jsx("h5", Object.assign({ className: `${baseClass}--title` }, { children: title })), list && (jsx(List, Object.assign({ alignment: "default", ordered: "unordered" }, { children: list.map((item, index) => (jsx(ListItem, Object.assign({ id: `list${index}` }, { children: jsx("p", { children: item }) })))) })))] })) })) })));
17
+ return (jsx("div", Object.assign({ className: cardClasses }, { children: jsx("div", Object.assign({ className: `${baseClass}--wrap` }, { children: jsxs("div", Object.assign({ className: `${baseClass}--content` }, { children: [title && TitleElement ? (jsx(TitleElement, Object.assign({ className: `${baseClass}--title` }, { children: title }))) : (jsx("p", Object.assign({ className: `${baseClass}--title` }, { children: title }))), list && (jsx(List, Object.assign({ alignment: "default", ordered: "unordered" }, { children: list.map((item, index) => (jsx(ListItem, Object.assign({ id: `list${index}` }, { children: jsx("p", { children: item }) })))) })))] })) })) })));
18
18
  };
19
19
 
20
20
  export { FactlistCard as default };