@ilo-org/react 0.12.0 → 0.14.0

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

@@ -0,0 +1,25 @@
+import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
+import classNames from 'classnames';
+import useGlobalSettings from '../../../hooks/useGlobalSettings.js';
+import Link from '../../Link/Link.js';
+import 'tslib';
+import 'react';
+import '../../../GlobalCtx-7fb23cfa.js';
+
+const DataCard = ({ eyebrow, size = "narrow", image, dataset, columns = "one", }) => {
+    const { prefix } = useGlobalSettings();
+    const baseClass = `${prefix}--card`;
+    const cardClasses = classNames(baseClass, `${baseClass}__type__data`, {
+        [`${baseClass}__size__${size}`]: size,
+        [`${baseClass}__type__data__columns__${columns}`]: columns,
+    });
+    return (jsx("div", Object.assign({ className: cardClasses }, { children: jsxs("div", Object.assign({ className: `${baseClass}--wrap` }, { children: [eyebrow && jsx("p", Object.assign({ className: `${baseClass}--eyebrow` }, { children: eyebrow })), jsxs("div", Object.assign({ className: `${baseClass}--content` }, { children: [image && (jsx("div", Object.assign({ className: `${baseClass}--image--wrapper` }, { children: jsx("picture", { children: jsx("img", { className: `${baseClass}--picture`, src: image, alt: eyebrow }) }) }))), dataset &&
+                            dataset.content &&
+                            dataset.content.items &&
+                            dataset.content.items.map((item) => (jsxs("div", Object.assign({ className: `${baseClass}--area--content` }, { children: [jsx("p", Object.assign({ className: `${baseClass}__type__data--content-label` }, { children: item.label })), jsx("p", Object.assign({ className: `${baseClass}__type__data--content-copy` }, { children: item.copy }))] })))), dataset && dataset.files && (jsxs("div", Object.assign({ className: `${baseClass}--data--content-files` }, { children: [jsx("p", Object.assign({ className: `${baseClass}__type__data--content-label` }, { children: dataset.files.headline })), dataset.files.items &&
+                                    dataset.files.items.map((item) => (jsx("a", Object.assign({ className: `${baseClass}--data--file ${prefix}--button ${prefix}--button--primary ${prefix}--button--small`, href: item.url, download: true }, { children: jsx("span", Object.assign({ className: "button__label" }, { children: item.label })) }))))] }))), dataset && dataset.cta && (jsx("div", Object.assign({ className: `${baseClass}--area--cta` }, { children: jsxs("div", Object.assign({ className: `${baseClass}--data--content-cta` }, { children: [jsx("p", Object.assign({ className: `${baseClass}__type__data--content-label` }, { children: dataset.cta.headline })), dataset.cta.items &&
+                                        dataset.cta.items.map((item) => (jsx("a", Object.assign({ className: `${baseClass}--cta ${prefix}--button ${prefix}--button--medium ${prefix}--button--secondary`, href: item.url }, { children: jsx("span", Object.assign({ className: "link__label" }, { children: item.label })) }))))] })) }))), dataset && dataset.links && (jsxs("div", Object.assign({ className: `${baseClass}--data--content-links` }, { children: [jsx("p", Object.assign({ className: `${baseClass}__type__data--content-label` }, { children: dataset.links.headline })), dataset.links.items &&
+                                    dataset.links.items.map((item) => (jsxs(Fragment, { children: [jsx(Link, Object.assign({ url: item.url }, { children: item.label })), jsx("span", { children: "\u00A0\u00A0" })] })))] })))] }))] })) })));
+};
+
+export { DataCard as default };

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

@@ -1,25 +1,78 @@
-import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
-import classNames from 'classnames';
-import useGlobalSettings from '../../../hooks/useGlobalSettings.js';
-import Link from '../../Link/Link.js';
+export { default as DataCard } from './DataCard.js';
+import 'react/jsx-runtime';
+import 'classnames';
+import '../../../hooks/useGlobalSettings.js';
 import 'tslib';
 import 'react';
 import '../../../GlobalCtx-7fb23cfa.js';
+import '../../Link/Link.js';
 
-const DataCard = ({ eyebrow, size = "narrow", image, dataset, columns = "one", }) => {
-    const { prefix } = useGlobalSettings();
-    const baseClass = `${prefix}--card`;
-    const cardClasses = classNames(baseClass, `${baseClass}__type__data`, {
-        [`${baseClass}__size__${size}`]: size,
-        [`${baseClass}__type__data__columns__${columns}`]: columns,
-    });
-    return (jsx("div", Object.assign({ className: cardClasses }, { children: jsxs("div", Object.assign({ className: `${baseClass}--wrap` }, { children: [eyebrow && jsx("p", Object.assign({ className: `${baseClass}--eyebrow` }, { children: eyebrow })), jsxs("div", Object.assign({ className: `${baseClass}--content` }, { children: [image && (jsx("div", Object.assign({ className: `${baseClass}--image--wrapper` }, { children: jsx("picture", { children: jsx("img", { className: `${baseClass}--picture`, src: image, alt: eyebrow }) }) }))), dataset &&
-                            dataset.content &&
-                            dataset.content.items &&
-                            dataset.content.items.map((item) => (jsxs("div", Object.assign({ className: `${baseClass}--area--content` }, { children: [jsx("p", Object.assign({ className: `${baseClass}__type__data--content-label` }, { children: item.label })), jsx("p", Object.assign({ className: `${baseClass}__type__data--content-copy` }, { children: item.copy }))] })))), dataset && dataset.files && (jsxs("div", Object.assign({ className: `${baseClass}--data--content-files` }, { children: [jsx("p", Object.assign({ className: `${baseClass}__type__data--content-label` }, { children: dataset.files.headline })), dataset.files.items &&
-                                    dataset.files.items.map((item) => (jsx("a", Object.assign({ className: `${baseClass}--data--file ${prefix}--button ${prefix}--button--primary ${prefix}--button--small`, href: item.url, download: true }, { children: jsx("span", Object.assign({ className: "button__label" }, { children: item.label })) }))))] }))), dataset && dataset.cta && (jsx("div", Object.assign({ className: `${baseClass}--area--cta` }, { children: jsxs("div", Object.assign({ className: `${baseClass}--data--content-cta` }, { children: [jsx("p", Object.assign({ className: `${baseClass}__type__data--content-label` }, { children: dataset.cta.headline })), dataset.cta.items &&
-                                        dataset.cta.items.map((item) => (jsx("a", Object.assign({ className: `${baseClass}--cta ${prefix}--button ${prefix}--button--medium ${prefix}--button--secondary`, href: item.url }, { children: jsx("span", Object.assign({ className: "link__label" }, { children: item.label })) }))))] })) }))), dataset && dataset.links && (jsxs("div", Object.assign({ className: `${baseClass}--data--content-links` }, { children: [jsx("p", Object.assign({ className: `${baseClass}__type__data--content-label` }, { children: dataset.links.headline })), dataset.links.items &&
-                                    dataset.links.items.map((item) => (jsxs(Fragment, { children: [jsx(Link, Object.assign({ url: item.url }, { children: item.label })), 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",
+                },
+            ],
+        },
+    },
 };
 
-export { DataCard as default };
+export { DataCardArgs };

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

@@ -0,0 +1,18 @@
+import { jsxs, jsx } from 'react/jsx-runtime';
+import classNames from 'classnames';
+import useGlobalSettings from '../../../hooks/useGlobalSettings.js';
+import 'tslib';
+import 'react';
+import '../../../GlobalCtx-7fb23cfa.js';
+
+const DetailCard = ({ eyebrow, title, size = "narrow", intro, date, eventdetails, link, image, }) => {
+    const { prefix } = useGlobalSettings();
+    const baseClass = `${prefix}--card`;
+    const cardClasses = classNames(baseClass, `${baseClass}__type__detail`, {
+        [`${baseClass}__action`]: link,
+        [`${baseClass}__size__${size}`]: size,
+    });
+    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 })))] }))] }))] })));
+};
+
+export { DetailCard as default };

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

@@ -1,18 +1,22 @@
-import { jsxs, jsx } from 'react/jsx-runtime';
-import classNames from 'classnames';
-import useGlobalSettings from '../../../hooks/useGlobalSettings.js';
+export { default as DetailCard } from './DetailCard.js';
+import 'react/jsx-runtime';
+import 'classnames';
+import '../../../hooks/useGlobalSettings.js';
 import 'tslib';
 import 'react';
 import '../../../GlobalCtx-7fb23cfa.js';
 
-const DetailCard = ({ eyebrow, title, size = "narrow", intro, date, eventdetails, link, image, }) => {
-    const { prefix } = useGlobalSettings();
-    const baseClass = `${prefix}--card`;
-    const cardClasses = classNames(baseClass, `${baseClass}__type__detail`, {
-        [`${baseClass}__action`]: link,
-        [`${baseClass}__size__${size}`]: size,
-    });
-    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 })))] }))] }))] })));
+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",
 };
 
-export { DetailCard as default };
+export { DetailCardArgs };

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

@@ -0,0 +1,20 @@
+import { jsx, jsxs } from 'react/jsx-runtime';
+import classNames from 'classnames';
+import useGlobalSettings from '../../../hooks/useGlobalSettings.js';
+import List from '../../List/List.js';
+import ListItem from '../../List/ListItem.js';
+import 'tslib';
+import 'react';
+import '../../../GlobalCtx-7fb23cfa.js';
+
+const FactlistCard = ({ title, theme = "narrow", size, list, }) => {
+    const { prefix } = useGlobalSettings();
+    const baseClass = `${prefix}--card`;
+    const cardClasses = classNames(baseClass, `${baseClass}__type__factlist`, {
+        [`${baseClass}__size__${size}`]: size,
+        [`${baseClass}__theme__${theme}`]: theme,
+    });
+    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 }) })))) })))] })) })) })));
+};
+
+export { FactlistCard as default };

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

@@ -1,21 +1,21 @@
-import { jsx, jsxs } from 'react/jsx-runtime';
-import classNames from 'classnames';
-import useGlobalSettings from '../../../hooks/useGlobalSettings.js';
-import List from '../../List/List.js';
-import ListItem from '../../List/ListItem.js';
+export { default as FactlistCard } from './FactListCard.js';
+import 'react/jsx-runtime';
+import 'classnames';
+import '../../../hooks/useGlobalSettings.js';
 import 'tslib';
 import 'react';
 import '../../../GlobalCtx-7fb23cfa.js';
-import '../../../ListCtx-da435fdf.js';
+import '../../List/List.js';
+import '../../List/ListItem.js';
 
-const FactlistCard = ({ title, theme = "narrow", size, list, }) => {
-    const { prefix } = useGlobalSettings();
-    const baseClass = `${prefix}--card`;
-    const cardClasses = classNames(baseClass, `${baseClass}__type__factlist`, {
-        [`${baseClass}__size__${size}`]: size,
-        [`${baseClass}__theme__${theme}`]: theme,
-    });
-    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 }) })))) })))] })) })) })));
+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.",
+    ],
 };
 
-export { FactlistCard as default };
+export { FactlistCardArgs };

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

@@ -0,0 +1,22 @@
+import { jsxs, jsx } from 'react/jsx-runtime';
+import classNames from 'classnames';
+import useGlobalSettings from '../../../hooks/useGlobalSettings.js';
+import LinkList from '../../LinkList/LinkList.js';
+import 'tslib';
+import 'react';
+import '../../../GlobalCtx-7fb23cfa.js';
+
+const FeatureCard = ({ isvideo, eyebrow, title, theme, size = "narrow", date, link, linklist, image, }) => {
+    const { prefix } = 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 (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 })), date && (jsx("time", Object.assign({ className: `${baseClass}--date`, dateTime: date.unix }, { children: date.human }))), linklist && (jsx(LinkList, { headline: linklist.headline, linkgroup: linklist.linkgroup }))] }))] }))] })));
+};
+
+export { FeatureCard as default };

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

@@ -1,22 +1,36 @@
-import { jsxs, jsx } from 'react/jsx-runtime';
-import classNames from 'classnames';
-import useGlobalSettings from '../../../hooks/useGlobalSettings.js';
-import LinkList from '../../LinkList/LinkList.js';
+export { default as FeatureCard } from './FeatureCard.js';
+import 'react/jsx-runtime';
+import 'classnames';
+import '../../../hooks/useGlobalSettings.js';
 import 'tslib';
 import 'react';
 import '../../../GlobalCtx-7fb23cfa.js';
+import '../../LinkList/LinkList.js';
 
-const FeatureCard = ({ isvideo, eyebrow, title, theme, size = "narrow", date, link, linklist, image, }) => {
-    const { prefix } = 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 (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 })), date && (jsx("time", Object.assign({ className: `${baseClass}--date`, dateTime: date.unix }, { children: date.human }))), linklist && (jsx(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",
+                    },
+                ],
+            },
+        ],
+    },
 };
 
-export { FeatureCard as default };
+export { FeatureCardArgs };

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

@@ -0,0 +1,22 @@
+import { jsxs, jsx } from 'react/jsx-runtime';
+import classNames from 'classnames';
+import useGlobalSettings from '../../../hooks/useGlobalSettings.js';
+import LinkList from '../../LinkList/LinkList.js';
+import 'tslib';
+import 'react';
+import '../../../GlobalCtx-7fb23cfa.js';
+
+const MultilinkCard = ({ isvideo, eyebrow, title, size = "narrow", alignment, intro, link, linklist, image, }) => {
+    const { prefix } = 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 (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 })), image && (jsx("div", Object.assign({ className: `${baseClass}--image--wrapper` }, { children: jsx("picture", { children: jsx("img", { className: `${baseClass}--picture`, src: image, alt: title }) }) }))), intro && jsx("p", Object.assign({ className: `${baseClass}--intro` }, { children: intro })), linklist && (jsx(LinkList, { headline: linklist.headline, linkgroup: linklist.linkgroup }))] }))] }))] })));
+};
+
+export { MultilinkCard as default };

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

@@ -1,22 +1,40 @@
-import { jsxs, jsx } from 'react/jsx-runtime';
-import classNames from 'classnames';
-import useGlobalSettings from '../../../hooks/useGlobalSettings.js';
-import LinkList from '../../LinkList/LinkList.js';
+export { default as MultilinkCard } from './MultiLinkCard.js';
+import 'react/jsx-runtime';
+import 'classnames';
+import '../../../hooks/useGlobalSettings.js';
 import 'tslib';
 import 'react';
 import '../../../GlobalCtx-7fb23cfa.js';
+import '../../LinkList/LinkList.js';
 
-const MultilinkCard = ({ isvideo, eyebrow, title, size = "narrow", alignment, intro, link, linklist, image, }) => {
-    const { prefix } = 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 (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 })), image && (jsx("div", Object.assign({ className: `${baseClass}--image--wrapper` }, { children: jsx("picture", { children: jsx("img", { className: `${baseClass}--picture`, src: image, alt: title }) }) }))), intro && jsx("p", Object.assign({ className: `${baseClass}--intro` }, { children: intro })), linklist && (jsx(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",
+                    },
+                ],
+            },
+        ],
+    },
 };
 
-export { MultilinkCard as default };
+export { MultilinkCardArgs };

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

@@ -0,0 +1,21 @@
+import { jsx, jsxs } from 'react/jsx-runtime';
+import classNames from 'classnames';
+import useGlobalSettings from '../../../hooks/useGlobalSettings.js';
+import 'tslib';
+import 'react';
+import '../../../GlobalCtx-7fb23cfa.js';
+
+const PromoCard = ({ eyebrow, title, theme, size = "narrow", cornercut, intro, link, cta, }) => {
+    const { prefix } = 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 (jsx("div", Object.assign({ className: wrapperClass }, { children: 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 })) }))), jsx("div", Object.assign({ className: `${baseClass}--wrap` }, { children: 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 })), cta && cta.label && (jsx("a", Object.assign({ className: `${baseClass}--cta ${prefix}--button ${prefix}--button--medium ${prefix}--button--primary`, href: cta.url }, { children: jsx("span", Object.assign({ className: "link__label" }, { children: cta.label })) })))] })) }))] })) })));
+};
+
+export { PromoCard as default };

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

@@ -1,21 +1,23 @@
-import { jsx, jsxs } from 'react/jsx-runtime';
-import classNames from 'classnames';
-import useGlobalSettings from '../../../hooks/useGlobalSettings.js';
+export { default as PromoCard } from './PromoCard.js';
+import 'react/jsx-runtime';
+import 'classnames';
+import '../../../hooks/useGlobalSettings.js';
 import 'tslib';
 import 'react';
 import '../../../GlobalCtx-7fb23cfa.js';
 
-const PromoCard = ({ eyebrow, title, theme, size = "narrow", cornercut, intro, link, cta, }) => {
-    const { prefix } = 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 (jsx("div", Object.assign({ className: wrapperClass }, { children: 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 })) }))), jsx("div", Object.assign({ className: `${baseClass}--wrap` }, { children: 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 })), cta && cta.label && (jsx("a", Object.assign({ className: `${baseClass}--cta ${prefix}--button ${prefix}--button--medium ${prefix}--button--primary`, href: cta.url }, { children: 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",
+    },
 };
 
-export { PromoCard as default };
+export { PromoCardArgs };

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

@@ -0,0 +1,19 @@
+import { jsx, jsxs } from 'react/jsx-runtime';
+import classNames from 'classnames';
+import useGlobalSettings from '../../../hooks/useGlobalSettings.js';
+import Link from '../../Link/Link.js';
+import 'tslib';
+import 'react';
+import '../../../GlobalCtx-7fb23cfa.js';
+
+const StatCard = ({ title, color, size = "standard", intro, source, }) => {
+    const { prefix } = useGlobalSettings();
+    const baseClass = `${prefix}--card`;
+    const cardClasses = classNames(baseClass, `${baseClass}__type__stat`, {
+        [`${baseClass}__color__${color}`]: color,
+        [`${baseClass}__size__${size}`]: size,
+    });
+    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 })), intro && jsx("p", Object.assign({ className: `${baseClass}--intro` }, { children: intro })), source && jsx(Link, Object.assign({ url: source.url }, { children: source.label }))] })) })) })));
+};
+
+export { StatCard as default };

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

@@ -1,19 +1,20 @@
-import { jsx, jsxs } from 'react/jsx-runtime';
-import classNames from 'classnames';
-import useGlobalSettings from '../../../hooks/useGlobalSettings.js';
-import Link from '../../Link/Link.js';
+export { default as StatCard } from './StatCard.js';
+import 'react/jsx-runtime';
+import 'classnames';
+import '../../../hooks/useGlobalSettings.js';
 import 'tslib';
 import 'react';
 import '../../../GlobalCtx-7fb23cfa.js';
+import '../../Link/Link.js';
 
-const StatCard = ({ title, color, size = "standard", intro, source, }) => {
-    const { prefix } = useGlobalSettings();
-    const baseClass = `${prefix}--card`;
-    const cardClasses = classNames(baseClass, `${baseClass}__type__stat`, {
-        [`${baseClass}__color__${color}`]: color,
-        [`${baseClass}__size__${size}`]: size,
-    });
-    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 })), intro && jsx("p", Object.assign({ className: `${baseClass}--intro` }, { children: intro })), source && jsx(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",
+    },
 };
 
-export { StatCard as default };
+export { StatCardArgs };

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

@@ -0,0 +1,21 @@
+import { jsx, jsxs } from 'react/jsx-runtime';
+import classNames from 'classnames';
+import useGlobalSettings from '../../../hooks/useGlobalSettings.js';
+import Profile from '../../Profile/Profile.js';
+import 'tslib';
+import 'react';
+import '../../../GlobalCtx-7fb23cfa.js';
+
+const TextCard = ({ eyebrow, title, theme, size, date, profile, link, }) => {
+    const { prefix } = 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 (jsx("div", Object.assign({ className: wrapperClass }, { children: 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 })) }))), jsx("div", Object.assign({ className: `${baseClass}--wrap` }, { children: 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 })), date && (jsx("time", Object.assign({ className: `${baseClass}--date`, dateTime: date.unix }, { children: date.human }))), profile && profile.avatar && (jsx(Profile, { avatar: profile.avatar, description: profile.description, link: profile.link, name: profile.name, role: profile.role, className: `${prefix}--profile__theme__${theme}` }))] })) }))] })) })));
+};
+
+export { TextCard as default };

package/lib/esm/components/Cards/TextCard/index.js

@@ -1,23 +1,27 @@
-import { jsx, jsxs } from 'react/jsx-runtime';
-import classNames from 'classnames';
-import useGlobalSettings from '../../../hooks/useGlobalSettings.js';
-import Profile from '../../Profile/Profile.js';
+export { default as TextCard } from './TextCard.js';
+import 'react/jsx-runtime';
+import 'classnames';
+import '../../../hooks/useGlobalSettings.js';
 import 'tslib';
 import 'react';
 import '../../../GlobalCtx-7fb23cfa.js';
+import '../../Profile/Profile.js';
 
-const TextCard = ({ eyebrow, title, theme, size, date, profile, link, }) => {
-    const { prefix } = 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,
-    });
-    console.log("heloo");
-    console.log(profile);
-    return (jsx("div", Object.assign({ className: wrapperClass }, { children: 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 })) }))), jsx("div", Object.assign({ className: `${baseClass}--wrap` }, { children: 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 })), date && (jsx("time", Object.assign({ className: `${baseClass}--date`, dateTime: date.unix }, { children: date.human }))), profile && profile.avatar && (jsx(Profile, { avatar: profile.avatar, description: profile.description, link: profile.link, name: profile.name, role: profile.role, className: `${prefix}--profile--contents--${theme}` }))] })) }))] })) })));
+const TextCardArgs = {
+    title: "Why we need greater social justice",
+    eyebrow: "Podcast",
+    date: {
+        human: "20 September 2022",
+        unix: "1670389200",
+    },
+    theme: "light",
+    link: "https:/www.ilo.org",
+    profile: {
+        avatar: "/ilo-dg.jpg",
+        description: "Gilbert Houngbo is the Director-General of the International Labour Organization",
+        name: "Gilbert Houngbo",
+        role: "ILO Director-General",
+    },
 };
 
-export { TextCard as default };
+export { TextCardArgs };