@ilo-org/react 0.12.0 → 0.13.0

package/lib/cjs/components/Cards/DataCard/DataCard.js

@@ -0,0 +1,27 @@
+'use strict';
+
+var jsxRuntime = require('react/jsx-runtime');
+var classNames = require('classnames');
+var hooks_useGlobalSettings = require('../../../hooks/useGlobalSettings.js');
+var components_Link_Link = require('../../Link/Link.js');
+require('tslib');
+require('react');
+require('../../../GlobalCtx-10114bdd.js');
+
+const DataCard = ({ eyebrow, size = "narrow", image, dataset, columns = "one", }) => {
+    const { prefix } = hooks_useGlobalSettings();
+    const baseClass = `${prefix}--card`;
+    const cardClasses = classNames(baseClass, `${baseClass}__type__data`, {
+        [`${baseClass}__size__${size}`]: size,
+        [`${baseClass}__type__data__columns__${columns}`]: columns,
+    });
+    return (jsxRuntime.jsx("div", Object.assign({ className: cardClasses }, { children: jsxRuntime.jsxs("div", Object.assign({ className: `${baseClass}--wrap` }, { children: [eyebrow && jsxRuntime.jsx("p", Object.assign({ className: `${baseClass}--eyebrow` }, { children: eyebrow })), jsxRuntime.jsxs("div", Object.assign({ className: `${baseClass}--content` }, { 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: eyebrow }) }) }))), dataset &&
+                            dataset.content &&
+                            dataset.content.items &&
+                            dataset.content.items.map((item) => (jsxRuntime.jsxs("div", Object.assign({ className: `${baseClass}--area--content` }, { children: [jsxRuntime.jsx("p", Object.assign({ className: `${baseClass}__type__data--content-label` }, { children: item.label })), jsxRuntime.jsx("p", Object.assign({ className: `${baseClass}__type__data--content-copy` }, { children: item.copy }))] })))), dataset && dataset.files && (jsxRuntime.jsxs("div", Object.assign({ className: `${baseClass}--data--content-files` }, { children: [jsxRuntime.jsx("p", Object.assign({ className: `${baseClass}__type__data--content-label` }, { children: dataset.files.headline })), dataset.files.items &&
+                                    dataset.files.items.map((item) => (jsxRuntime.jsx("a", Object.assign({ className: `${baseClass}--data--file ${prefix}--button ${prefix}--button--primary ${prefix}--button--small`, href: item.url, download: true }, { children: jsxRuntime.jsx("span", Object.assign({ className: "button__label" }, { children: item.label })) }))))] }))), dataset && dataset.cta && (jsxRuntime.jsx("div", Object.assign({ className: `${baseClass}--area--cta` }, { children: jsxRuntime.jsxs("div", Object.assign({ className: `${baseClass}--data--content-cta` }, { children: [jsxRuntime.jsx("p", Object.assign({ className: `${baseClass}__type__data--content-label` }, { children: dataset.cta.headline })), dataset.cta.items &&
+                                        dataset.cta.items.map((item) => (jsxRuntime.jsx("a", Object.assign({ className: `${baseClass}--cta ${prefix}--button ${prefix}--button--medium ${prefix}--button--secondary`, href: item.url }, { children: jsxRuntime.jsx("span", Object.assign({ className: "link__label" }, { children: item.label })) }))))] })) }))), dataset && dataset.links && (jsxRuntime.jsxs("div", Object.assign({ className: `${baseClass}--data--content-links` }, { children: [jsxRuntime.jsx("p", Object.assign({ className: `${baseClass}__type__data--content-label` }, { children: dataset.links.headline })), dataset.links.items &&
+                                    dataset.links.items.map((item) => (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsx(components_Link_Link, Object.assign({ url: item.url }, { children: item.label })), jsxRuntime.jsx("span", { children: "\u00A0\u00A0" })] })))] })))] }))] })) })));
+};
+
+module.exports = DataCard;

package/lib/cjs/components/Cards/DataCard/index.js

@@ -1,27 +1,81 @@
 'use strict';
 
-var jsxRuntime = require('react/jsx-runtime');
-var classNames = require('classnames');
-var hooks_useGlobalSettings = require('../../../hooks/useGlobalSettings.js');
-var components_Link_Link = require('../../Link/Link.js');
+var components_Cards_DataCard_DataCard = require('./DataCard.js');
+require('react/jsx-runtime');
+require('classnames');
+require('../../../hooks/useGlobalSettings.js');
 require('tslib');
 require('react');
 require('../../../GlobalCtx-10114bdd.js');
+require('../../Link/Link.js');
 
-const DataCard = ({ eyebrow, size = "narrow", image, dataset, columns = "one", }) => {
-    const { prefix } = hooks_useGlobalSettings();
-    const baseClass = `${prefix}--card`;
-    const cardClasses = classNames(baseClass, `${baseClass}__type__data`, {
-        [`${baseClass}__size__${size}`]: size,
-        [`${baseClass}__type__data__columns__${columns}`]: columns,
-    });
-    return (jsxRuntime.jsx("div", Object.assign({ className: cardClasses }, { children: jsxRuntime.jsxs("div", Object.assign({ className: `${baseClass}--wrap` }, { children: [eyebrow && jsxRuntime.jsx("p", Object.assign({ className: `${baseClass}--eyebrow` }, { children: eyebrow })), jsxRuntime.jsxs("div", Object.assign({ className: `${baseClass}--content` }, { 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: eyebrow }) }) }))), dataset &&
-                            dataset.content &&
-                            dataset.content.items &&
-                            dataset.content.items.map((item) => (jsxRuntime.jsxs("div", Object.assign({ className: `${baseClass}--area--content` }, { children: [jsxRuntime.jsx("p", Object.assign({ className: `${baseClass}__type__data--content-label` }, { children: item.label })), jsxRuntime.jsx("p", Object.assign({ className: `${baseClass}__type__data--content-copy` }, { children: item.copy }))] })))), dataset && dataset.files && (jsxRuntime.jsxs("div", Object.assign({ className: `${baseClass}--data--content-files` }, { children: [jsxRuntime.jsx("p", Object.assign({ className: `${baseClass}__type__data--content-label` }, { children: dataset.files.headline })), dataset.files.items &&
-                                    dataset.files.items.map((item) => (jsxRuntime.jsx("a", Object.assign({ className: `${baseClass}--data--file ${prefix}--button ${prefix}--button--primary ${prefix}--button--small`, href: item.url, download: true }, { children: jsxRuntime.jsx("span", Object.assign({ className: "button__label" }, { children: item.label })) }))))] }))), dataset && dataset.cta && (jsxRuntime.jsx("div", Object.assign({ className: `${baseClass}--area--cta` }, { children: jsxRuntime.jsxs("div", Object.assign({ className: `${baseClass}--data--content-cta` }, { children: [jsxRuntime.jsx("p", Object.assign({ className: `${baseClass}__type__data--content-label` }, { children: dataset.cta.headline })), dataset.cta.items &&
-                                        dataset.cta.items.map((item) => (jsxRuntime.jsx("a", Object.assign({ className: `${baseClass}--cta ${prefix}--button ${prefix}--button--medium ${prefix}--button--secondary`, href: item.url }, { children: jsxRuntime.jsx("span", Object.assign({ className: "link__label" }, { children: item.label })) }))))] })) }))), dataset && dataset.links && (jsxRuntime.jsxs("div", Object.assign({ className: `${baseClass}--data--content-links` }, { children: [jsxRuntime.jsx("p", Object.assign({ className: `${baseClass}__type__data--content-label` }, { children: dataset.links.headline })), dataset.links.items &&
-                                    dataset.links.items.map((item) => (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsx(components_Link_Link, Object.assign({ url: item.url }, { children: item.label })), jsxRuntime.jsx("span", { children: "\u00A0\u00A0" })] })))] })))] }))] })) })));
+const DataCardArgs = {
+    size: "wide",
+    eyebrow: "Meeting",
+    image: "/small.jpg",
+    columns: "two",
+    dataset: {
+        content: {
+            items: [
+                {
+                    label: "Date",
+                    copy: "18 March 2023",
+                },
+                {
+                    label: "Event type",
+                    copy: "Technical meeting of experts",
+                },
+            ],
+        },
+        files: {
+            headline: "Files",
+            items: [
+                {
+                    label: "Meeting agenda",
+                    url: "https://www.ilo.org",
+                },
+                {
+                    label: "Briefing notes",
+                    url: "https://www.ilo.org",
+                },
+                {
+                    label: "Practical info",
+                    url: "https://www.ilo.org",
+                },
+            ],
+        },
+        cta: {
+            headline: "Read online",
+            items: [
+                {
+                    label: "HTML Version",
+                    url: "https://www.ilo.org",
+                },
+                {
+                    label: "InfoStories",
+                    url: "https://www.ilo.org/infostories/en-GB",
+                },
+            ],
+        },
+        links: {
+            headline: "Languages",
+            items: [
+                {
+                    label: "English",
+                    url: "https://www.ilo.org",
+                },
+                {
+                    label: "Español",
+                    url: "https://www.ilo.org",
+                },
+                {
+                    label: "Français",
+                    url: "https://www.ilo.org",
+                },
+            ],
+        },
+    },
 };
 
-module.exports = DataCard;
+exports.DataCard = components_Cards_DataCard_DataCard;
+exports.DataCardArgs = DataCardArgs;

package/lib/cjs/components/Cards/DetailCard/DetailCard.js

@@ -0,0 +1,20 @@
+'use strict';
+
+var jsxRuntime = require('react/jsx-runtime');
+var classNames = require('classnames');
+var hooks_useGlobalSettings = require('../../../hooks/useGlobalSettings.js');
+require('tslib');
+require('react');
+require('../../../GlobalCtx-10114bdd.js');
+
+const DetailCard = ({ eyebrow, title, size = "narrow", intro, date, eventdetails, link, image, }) => {
+    const { prefix } = hooks_useGlobalSettings();
+    const baseClass = `${prefix}--card`;
+    const cardClasses = classNames(baseClass, `${baseClass}__type__detail`, {
+        [`${baseClass}__action`]: link,
+        [`${baseClass}__size__${size}`]: size,
+    });
+    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 })))] }))] }))] })));
+};
+
+module.exports = DetailCard;

package/lib/cjs/components/Cards/DetailCard/index.js

@@ -1,20 +1,25 @@
 'use strict';
 
-var jsxRuntime = require('react/jsx-runtime');
-var classNames = require('classnames');
-var hooks_useGlobalSettings = require('../../../hooks/useGlobalSettings.js');
+var components_Cards_DetailCard_DetailCard = require('./DetailCard.js');
+require('react/jsx-runtime');
+require('classnames');
+require('../../../hooks/useGlobalSettings.js');
 require('tslib');
 require('react');
 require('../../../GlobalCtx-10114bdd.js');
 
-const DetailCard = ({ eyebrow, title, size = "narrow", intro, date, eventdetails, link, image, }) => {
-    const { prefix } = hooks_useGlobalSettings();
-    const baseClass = `${prefix}--card`;
-    const cardClasses = classNames(baseClass, `${baseClass}__type__detail`, {
-        [`${baseClass}__action`]: link,
-        [`${baseClass}__size__${size}`]: size,
-    });
-    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 })))] }))] }))] })));
+const DetailCardArgs = {
+    title: "Technical meeting on digitalization in the construction sector",
+    eyebrow: "Meeting",
+    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.",
+    date: {
+        human: "18 March 2023",
+        unix: "1670389200",
+    },
+    image: "/medium.jpg",
+    link: "https:/www.ilo.org",
+    eventdetails: "8:30 - 12:00 CET | Geneva",
 };
 
-module.exports = DetailCard;
+exports.DetailCard = components_Cards_DetailCard_DetailCard;
+exports.DetailCardArgs = DetailCardArgs;

package/lib/cjs/components/Cards/FactlistCard/FactListCard.js

@@ -0,0 +1,23 @@
+'use strict';
+
+var jsxRuntime = require('react/jsx-runtime');
+var classNames = require('classnames');
+var hooks_useGlobalSettings = require('../../../hooks/useGlobalSettings.js');
+var components_List_List = require('../../List/List.js');
+var components_List_ListItem = require('../../List/ListItem.js');
+require('tslib');
+require('react');
+require('../../../GlobalCtx-10114bdd.js');
+require('../../../ListCtx-14aa546f.js');
+
+const FactlistCard = ({ title, theme = "narrow", size, list, }) => {
+    const { prefix } = hooks_useGlobalSettings();
+    const baseClass = `${prefix}--card`;
+    const cardClasses = classNames(baseClass, `${baseClass}__type__factlist`, {
+        [`${baseClass}__size__${size}`]: size,
+        [`${baseClass}__theme__${theme}`]: theme,
+    });
+    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 }) })))) })))] })) })) })));
+};
+
+module.exports = FactlistCard;

package/lib/cjs/components/Cards/FactlistCard/index.js

@@ -1,23 +1,25 @@
 'use strict';
 
-var jsxRuntime = require('react/jsx-runtime');
-var classNames = require('classnames');
-var hooks_useGlobalSettings = require('../../../hooks/useGlobalSettings.js');
-var components_List_List = require('../../List/List.js');
-var components_List_ListItem = require('../../List/ListItem.js');
+var components_Cards_FactlistCard_FactListCard = require('./FactListCard.js');
+require('react/jsx-runtime');
+require('classnames');
+require('../../../hooks/useGlobalSettings.js');
 require('tslib');
 require('react');
 require('../../../GlobalCtx-10114bdd.js');
+require('../../List/List.js');
 require('../../../ListCtx-14aa546f.js');
+require('../../List/ListItem.js');
 
-const FactlistCard = ({ title, theme = "narrow", size, list, }) => {
-    const { prefix } = hooks_useGlobalSettings();
-    const baseClass = `${prefix}--card`;
-    const cardClasses = classNames(baseClass, `${baseClass}__type__factlist`, {
-        [`${baseClass}__size__${size}`]: size,
-        [`${baseClass}__theme__${theme}`]: theme,
-    });
-    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 }) })))) })))] })) })) })));
+const FactlistCardArgs = {
+    title: "Economic slowdown likely to force workers to accept lower quality jobs",
+    theme: "light",
+    list: [
+        "Global employment growth will be only 1.0 per cent in 2023, less than half the level in 2022.",
+        "The labour market deterioration is mainly due to emerging geopolitical tensions and the Ukraine conflict.",
+        "The current slowdown means that many workers will have to accept lower quality jobs, often at very low pay.",
+    ],
 };
 
-module.exports = FactlistCard;
+exports.FactlistCard = components_Cards_FactlistCard_FactListCard;
+exports.FactlistCardArgs = FactlistCardArgs;

package/lib/cjs/components/Cards/FeatureCard/FeatureCard.js

@@ -0,0 +1,24 @@
+'use strict';
+
+var jsxRuntime = require('react/jsx-runtime');
+var classNames = require('classnames');
+var hooks_useGlobalSettings = require('../../../hooks/useGlobalSettings.js');
+var components_LinkList_LinkList = require('../../LinkList/LinkList.js');
+require('tslib');
+require('react');
+require('../../../GlobalCtx-10114bdd.js');
+
+const FeatureCard = ({ isvideo, eyebrow, title, theme, size = "narrow", date, link, linklist, image, }) => {
+    const { prefix } = hooks_useGlobalSettings();
+    const baseClass = `${prefix}--card`;
+    const cardClasses = classNames(baseClass, `${baseClass}__type__feature`, {
+        [`${baseClass}__action`]: link,
+        [`${baseClass}__size__${size}`]: size,
+        [`${baseClass}__isvideo`]: isvideo,
+        [`${baseClass}__linklist`]: linklist,
+        [`${baseClass}__theme__${theme}`]: theme,
+    });
+    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 }))] }))] }))] })));
+};
+
+module.exports = FeatureCard;

package/lib/cjs/components/Cards/FeatureCard/index.js

@@ -1,24 +1,39 @@
 'use strict';
 
-var jsxRuntime = require('react/jsx-runtime');
-var classNames = require('classnames');
-var hooks_useGlobalSettings = require('../../../hooks/useGlobalSettings.js');
-var components_LinkList_LinkList = require('../../LinkList/LinkList.js');
+var components_Cards_FeatureCard_FeatureCard = require('./FeatureCard.js');
+require('react/jsx-runtime');
+require('classnames');
+require('../../../hooks/useGlobalSettings.js');
 require('tslib');
 require('react');
 require('../../../GlobalCtx-10114bdd.js');
+require('../../LinkList/LinkList.js');
 
-const FeatureCard = ({ isvideo, eyebrow, title, theme, size = "narrow", date, link, linklist, image, }) => {
-    const { prefix } = hooks_useGlobalSettings();
-    const baseClass = `${prefix}--card`;
-    const cardClasses = classNames(baseClass, `${baseClass}__type__feature`, {
-        [`${baseClass}__action`]: link,
-        [`${baseClass}__size__${size}`]: size,
-        [`${baseClass}__isvideo`]: isvideo,
-        [`${baseClass}__linklist`]: linklist,
-        [`${baseClass}__theme__${theme}`]: theme,
-    });
-    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 }))] }))] }))] })));
+const FeatureCardArgs = {
+    isvideo: false,
+    title: "ILO welcomes G7 call to make a just transition to a green economy happen",
+    eyebrow: "High-level meeting",
+    theme: "light",
+    date: {
+        human: "18 March 2023",
+        unix: "1670389200",
+    },
+    image: "/hero.jpg",
+    link: "https:/www.ilo.org",
+    linklist: {
+        headline: "",
+        linkgroup: [
+            {
+                links: [
+                    {
+                        label: "Read the press release",
+                        url: "http://www.google.com",
+                    },
+                ],
+            },
+        ],
+    },
 };
 
-module.exports = FeatureCard;
+exports.FeatureCard = components_Cards_FeatureCard_FeatureCard;
+exports.FeatureCardArgs = FeatureCardArgs;

package/lib/cjs/components/Cards/MultilinkCard/MultiLinkCard.js

@@ -0,0 +1,24 @@
+'use strict';
+
+var jsxRuntime = require('react/jsx-runtime');
+var classNames = require('classnames');
+var hooks_useGlobalSettings = require('../../../hooks/useGlobalSettings.js');
+var components_LinkList_LinkList = require('../../LinkList/LinkList.js');
+require('tslib');
+require('react');
+require('../../../GlobalCtx-10114bdd.js');
+
+const MultilinkCard = ({ isvideo, eyebrow, title, size = "narrow", alignment, intro, link, linklist, image, }) => {
+    const { prefix } = hooks_useGlobalSettings();
+    const baseClass = `${prefix}--card`;
+    const cardClasses = classNames(baseClass, `${baseClass}__type__multilink`, {
+        [`${baseClass}__align__${alignment}`]: alignment,
+        [`${baseClass}__action`]: link,
+        [`${baseClass}__size__${size}`]: size,
+        [`${baseClass}__isvideo`]: isvideo,
+        [`${baseClass}__linklist`]: linklist,
+    });
+    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 }))] }))] }))] })));
+};
+
+module.exports = MultilinkCard;

package/lib/cjs/components/Cards/MultilinkCard/index.js

@@ -1,24 +1,43 @@
 'use strict';
 
-var jsxRuntime = require('react/jsx-runtime');
-var classNames = require('classnames');
-var hooks_useGlobalSettings = require('../../../hooks/useGlobalSettings.js');
-var components_LinkList_LinkList = require('../../LinkList/LinkList.js');
+var components_Cards_MultilinkCard_MultiLinkCard = require('./MultiLinkCard.js');
+require('react/jsx-runtime');
+require('classnames');
+require('../../../hooks/useGlobalSettings.js');
 require('tslib');
 require('react');
 require('../../../GlobalCtx-10114bdd.js');
+require('../../LinkList/LinkList.js');
 
-const MultilinkCard = ({ isvideo, eyebrow, title, size = "narrow", alignment, intro, link, linklist, image, }) => {
-    const { prefix } = hooks_useGlobalSettings();
-    const baseClass = `${prefix}--card`;
-    const cardClasses = classNames(baseClass, `${baseClass}__type__multilink`, {
-        [`${baseClass}__align__${alignment}`]: alignment,
-        [`${baseClass}__action`]: link,
-        [`${baseClass}__size__${size}`]: size,
-        [`${baseClass}__isvideo`]: isvideo,
-        [`${baseClass}__linklist`]: linklist,
-    });
-    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 }))] }))] }))] })));
+const MultilinkCardArgs = {
+    title: "ILO welcomes G7 call to make a just transition to a green economy happen",
+    eyebrow: "High-level meeting",
+    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.",
+    image: "/hero.jpg",
+    alignment: "left",
+    link: "https:/www.ilo.org",
+    linklist: {
+        headline: "",
+        linkgroup: [
+            {
+                links: [
+                    {
+                        label: "Read the press release",
+                        url: "https://www.ilo.org",
+                    },
+                    {
+                        label: "See the statement",
+                        url: "https://www.ilo.org",
+                    },
+                    {
+                        label: "Remarks to G7 Openening Session",
+                        url: "https://www.ilo.org",
+                    },
+                ],
+            },
+        ],
+    },
 };
 
-module.exports = MultilinkCard;
+exports.MultilinkCard = components_Cards_MultilinkCard_MultiLinkCard;
+exports.MultilinkCardArgs = MultilinkCardArgs;

package/lib/cjs/components/Cards/PromoCard/PromoCard.js

@@ -0,0 +1,23 @@
+'use strict';
+
+var jsxRuntime = require('react/jsx-runtime');
+var classNames = require('classnames');
+var hooks_useGlobalSettings = require('../../../hooks/useGlobalSettings.js');
+require('tslib');
+require('react');
+require('../../../GlobalCtx-10114bdd.js');
+
+const PromoCard = ({ eyebrow, title, theme, size = "narrow", cornercut, intro, link, cta, }) => {
+    const { prefix } = hooks_useGlobalSettings();
+    const baseClass = `${prefix}--card`;
+    const wrapperClass = classNames(`${baseClass}--wrapper`, `${baseClass}--wrapper__type__promo ${baseClass}--wrapper__type__promo__size__${size}`);
+    const cardClasses = classNames(baseClass, `${baseClass}__type__promo`, {
+        [`${baseClass}__cornercut`]: cornercut,
+        [`${baseClass}__action`]: link,
+        [`${baseClass}__size__${size}`]: size,
+        [`${baseClass}__theme__${theme}`]: theme,
+    });
+    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 })) })))] })) }))] })) })));
+};
+
+module.exports = PromoCard;

package/lib/cjs/components/Cards/PromoCard/index.js

@@ -1,23 +1,26 @@
 'use strict';
 
-var jsxRuntime = require('react/jsx-runtime');
-var classNames = require('classnames');
-var hooks_useGlobalSettings = require('../../../hooks/useGlobalSettings.js');
+var components_Cards_PromoCard_PromoCard = require('./PromoCard.js');
+require('react/jsx-runtime');
+require('classnames');
+require('../../../hooks/useGlobalSettings.js');
 require('tslib');
 require('react');
 require('../../../GlobalCtx-10114bdd.js');
 
-const PromoCard = ({ eyebrow, title, theme, size = "narrow", cornercut, intro, link, cta, }) => {
-    const { prefix } = hooks_useGlobalSettings();
-    const baseClass = `${prefix}--card`;
-    const wrapperClass = classNames(`${baseClass}--wrapper`, `${baseClass}--wrapper__type__promo ${baseClass}--wrapper__type__promo__size__${size}`);
-    const cardClasses = classNames(baseClass, `${baseClass}__type__promo`, {
-        [`${baseClass}__cornercut`]: cornercut,
-        [`${baseClass}__action`]: link,
-        [`${baseClass}__size__${size}`]: size,
-        [`${baseClass}__theme__${theme}`]: theme,
-    });
-    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 })) })))] })) }))] })) })));
+const PromoCardArgs = {
+    size: "standard",
+    title: "ILO welcomes G7 call to make a just transition to a green economy happen",
+    eyebrow: "High-level meeting",
+    theme: "dark",
+    cornercut: true,
+    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.",
+    link: "https:/www.ilo.org",
+    cta: {
+        label: "Read the press release",
+        url: "https://www.ilo.org",
+    },
 };
 
-module.exports = PromoCard;
+exports.PromoCard = components_Cards_PromoCard_PromoCard;
+exports.PromoCardArgs = PromoCardArgs;

package/lib/cjs/components/Cards/StatCard/StatCard.js

@@ -0,0 +1,21 @@
+'use strict';
+
+var jsxRuntime = require('react/jsx-runtime');
+var classNames = require('classnames');
+var hooks_useGlobalSettings = require('../../../hooks/useGlobalSettings.js');
+var components_Link_Link = require('../../Link/Link.js');
+require('tslib');
+require('react');
+require('../../../GlobalCtx-10114bdd.js');
+
+const StatCard = ({ title, color, size = "standard", intro, source, }) => {
+    const { prefix } = hooks_useGlobalSettings();
+    const baseClass = `${prefix}--card`;
+    const cardClasses = classNames(baseClass, `${baseClass}__type__stat`, {
+        [`${baseClass}__color__${color}`]: color,
+        [`${baseClass}__size__${size}`]: size,
+    });
+    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 }))] })) })) })));
+};
+
+module.exports = StatCard;

package/lib/cjs/components/Cards/StatCard/index.js

@@ -1,21 +1,23 @@
 'use strict';
 
-var jsxRuntime = require('react/jsx-runtime');
-var classNames = require('classnames');
-var hooks_useGlobalSettings = require('../../../hooks/useGlobalSettings.js');
-var components_Link_Link = require('../../Link/Link.js');
+var components_Cards_StatCard_StatCard = require('./StatCard.js');
+require('react/jsx-runtime');
+require('classnames');
+require('../../../hooks/useGlobalSettings.js');
 require('tslib');
 require('react');
 require('../../../GlobalCtx-10114bdd.js');
+require('../../Link/Link.js');
 
-const StatCard = ({ title, color, size = "standard", intro, source, }) => {
-    const { prefix } = hooks_useGlobalSettings();
-    const baseClass = `${prefix}--card`;
-    const cardClasses = classNames(baseClass, `${baseClass}__type__stat`, {
-        [`${baseClass}__color__${color}`]: color,
-        [`${baseClass}__size__${size}`]: size,
-    });
-    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 }))] })) })) })));
+const StatCardArgs = {
+    title: "Global employment growth down by half in 2023",
+    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.",
+    color: "turquoise",
+    source: {
+        label: "World Employment and Social Outlook: Trends 2023",
+        url: "https://www.ilo.org",
+    },
 };
 
-module.exports = StatCard;
+exports.StatCard = components_Cards_StatCard_StatCard;
+exports.StatCardArgs = StatCardArgs;

package/lib/cjs/components/Cards/TextCard/TextCard.js

@@ -0,0 +1,23 @@
+'use strict';
+
+var jsxRuntime = require('react/jsx-runtime');
+var classNames = require('classnames');
+var hooks_useGlobalSettings = require('../../../hooks/useGlobalSettings.js');
+var components_Profile_Profile = require('../../Profile/Profile.js');
+require('tslib');
+require('react');
+require('../../../GlobalCtx-10114bdd.js');
+
+const TextCard = ({ eyebrow, title, theme, size, date, profile, link, }) => {
+    const { prefix } = hooks_useGlobalSettings();
+    const baseClass = `${prefix}--card`;
+    const wrapperClass = classNames(`${baseClass}--wrapper`);
+    const cardClasses = classNames(baseClass, `${baseClass}__type__text`, {
+        [`${baseClass}__action`]: link,
+        [`${baseClass}__size__${size}`]: size,
+        [`${baseClass}__theme__${theme}`]: theme,
+    });
+    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--contents--${theme}` }))] })) }))] })) })));
+};
+
+module.exports = TextCard;