@ilo-org/react 0.11.0 → 0.13.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

@@ -0,0 +1,78 @@
+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 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 { 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

@@ -0,0 +1,22 @@
+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 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 { DetailCardArgs };

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

@@ -0,0 +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';
+import 'tslib';
+import 'react';
+import '../../../GlobalCtx-7fb23cfa.js';
+import '../../../ListCtx-da435fdf.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

@@ -0,0 +1,22 @@
+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 '../../List/List.js';
+import '../../../ListCtx-da435fdf.js';
+import '../../List/ListItem.js';
+
+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 { 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

@@ -0,0 +1,36 @@
+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 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 { 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

@@ -0,0 +1,40 @@
+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 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 { 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

@@ -0,0 +1,23 @@
+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 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 { 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

@@ -0,0 +1,20 @@
+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 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 { 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--contents--${theme}` }))] })) }))] })) })));
+};
+
+export { TextCard as default };

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

@@ -0,0 +1,27 @@
+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 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 { TextCardArgs };

package/lib/esm/components/Footer/Footer.js

@@ -16,7 +16,7 @@ const Footer = ({ className, logo, tagline, subtagline, address, linkgroup, soci
     const { prefix } = useGlobalSettings();
     const baseClass = `${prefix}--footer`;
     const footerClasses = classNames(className, baseClass);
-    return (jsxs("footer", Object.assign({ className: footerClasses }, { children: [jsxs("div", Object.assign({ className: `${baseClass}--main` }, { children: [jsxs("div", Object.assign({ className: "site--info" }, { children: [jsx("img", { className: `${baseClass}--logo`, src: logo, alt: "ILO Logo" }), jsx("h3", Object.assign({ className: `${baseClass}--headline` }, { children: tagline })), jsx("h4", Object.assign({ className: `${baseClass}--subhead` }, { children: subtagline }))] })), address && (jsx("div", Object.assign({ className: "address" }, { children: address.map((line, i) => (jsx("p", Object.assign({ className: "address--line" }, { children: line }), i))) }))), linkgroup && (jsx("nav", Object.assign({ className: "links" }, { children: jsx(LinkList, { linkgroup: linkgroup, theme: "dark" }) }))), (socialmedia || subscribe) && (jsxs("div", Object.assign({ className: "connect" }, { children: [socialmedia && (jsx("div", Object.assign({ className: "social--links" }, { children: jsx(SocialMedia, Object.assign({}, socialmedia, { theme: "dark" })) }))), subscribe && (jsx(Button, { label: subscribe === null || subscribe === void 0 ? void 0 : subscribe.label, url: subscribe === null || subscribe === void 0 ? void 0 : subscribe.url, type: "primary", size: "large", target: "_blank" }))] })))] })), jsxs("div", Object.assign({ className: `${baseClass}--secondary` }, { children: [jsx("div", Object.assign({ className: "legal" }, { children: legal })), secondarylinks && (jsx("nav", Object.assign({ className: "secondarylinks" }, { children: jsx("ul", Object.assign({ className: "secondarylinks--list" }, { children: secondarylinks.map((link, i) => (jsx("li", Object.assign({ className: "secondarylinks--list--item" }, { children: jsx("a", Object.assign({ href: link.url, className: "secondarylinks--list--link" }, { children: link === null || link === void 0 ? void 0 : link.label }), i) })))) })) }))), jsx("a", Object.assign({ href: anchorlink === null || anchorlink === void 0 ? void 0 : anchorlink.url, className: "anchorlink" }, { children: anchorlink === null || anchorlink === void 0 ? void 0 : anchorlink.label }))] }))] })));
+    return (jsxs("footer", Object.assign({ className: footerClasses }, { children: [jsxs("div", Object.assign({ className: `${baseClass}--main ${prefix}--container` }, { children: [jsxs("div", Object.assign({ className: "site--info" }, { children: [jsx("img", { className: `${baseClass}--logo`, src: logo, alt: "ILO Logo" }), jsx("h3", Object.assign({ className: `${baseClass}--headline` }, { children: tagline })), jsx("h4", Object.assign({ className: `${baseClass}--subhead` }, { children: subtagline }))] })), address && (jsx("div", Object.assign({ className: "address" }, { children: address.map((line, i) => (jsx("p", Object.assign({ className: "address--line" }, { children: line }), i))) }))), linkgroup && (jsx("nav", Object.assign({ className: "links" }, { children: jsx(LinkList, { linkgroup: linkgroup, theme: "dark" }) }))), socialmedia && (jsx("div", Object.assign({ className: "connect" }, { children: jsx("div", Object.assign({ className: "social--links" }, { children: jsx(SocialMedia, Object.assign({}, socialmedia, { theme: "dark" })) })) }))), subscribe && (jsx("div", Object.assign({ className: "subscribe" }, { children: jsx(Button, { label: subscribe === null || subscribe === void 0 ? void 0 : subscribe.label, url: subscribe === null || subscribe === void 0 ? void 0 : subscribe.url, type: "primary", size: "large", target: "_blank" }) })))] })), jsx("div", Object.assign({ className: `${baseClass}--secondary` }, { children: jsxs("div", Object.assign({ className: `${prefix}--container` }, { children: [jsxs("div", Object.assign({ className: `${baseClass}--secondary--details` }, { children: [jsx("div", Object.assign({ className: "legal" }, { children: legal })), secondarylinks && (jsx("nav", Object.assign({ className: "secondarylinks" }, { children: jsx("ul", Object.assign({ className: "secondarylinks--list" }, { children: secondarylinks.map((link, i) => (jsx("li", Object.assign({ className: "secondarylinks--list--item" }, { children: jsx("a", Object.assign({ href: link.url, className: "secondarylinks--list--link" }, { children: link === null || link === void 0 ? void 0 : link.label }), i) })))) })) })))] })), jsx("a", Object.assign({ href: anchorlink === null || anchorlink === void 0 ? void 0 : anchorlink.url, className: "anchorlink" }, { children: anchorlink === null || anchorlink === void 0 ? void 0 : anchorlink.label }))] })) }))] })));
 };
 
 export { Footer as default };

package/lib/esm/components/LinkList/LinkList.js

@@ -12,7 +12,7 @@ const LinkList = ({ className, headline, linkgroup, theme, }) => {
         [baseClass]: true,
         [`${baseClass + "--" + (theme && theme === "dark" ? theme : "light")}`]: true,
     });
-    return (jsxs("div", Object.assign({ className: linkListClasses }, { children: [jsx("h3", Object.assign({ className: `${baseClass}--headline` }, { children: headline })), jsx("ul", Object.assign({ className: `${baseClass}--linkgroups` }, { children: linkgroup &&
+    return (jsxs("div", Object.assign({ className: linkListClasses }, { children: [headline && jsx("h3", Object.assign({ className: `${baseClass}--headline` }, { children: headline })), jsx("ul", Object.assign({ className: `${baseClass}--linkgroups` }, { children: linkgroup &&
                     linkgroup.map((linkset, i) => (jsxs("li", Object.assign({ className: `${baseClass}--linkgroups-item` }, { children: [linkset.headline && (jsx("h4", Object.assign({ className: `${baseClass}--links--headline` }, { children: linkset.headline }))), jsx("ul", Object.assign({ className: `${baseClass}--links` }, { children: linkset.links &&
                                     linkset.links.map((link, i) => (jsx("li", Object.assign({ className: `${baseClass}--links--item${link.indented ? " indented" : ""}` }, { children: jsx("a", Object.assign({ href: link.url, className: `${baseClass}--link` }, { children: jsx("span", Object.assign({ className: `${baseClass}--label` }, { children: link.label })) })) }), `${baseClass}--links--item-${i}`))) }))] }), `${baseClass}--linkgroups-item-${i}`))) }))] })));
 };

package/lib/esm/components/Navigation/Navigation.js

@@ -39,10 +39,10 @@ const Navigation = ({ logo, mobilelogo, siteurl, tagline, primarynav, subnav, me
     const handleSubnavToggle = () => {
         setSubnavToggleOpen(!toggleSubnavOpen);
     };
-    return (jsxs("header", Object.assign({ className: NavigationClasses }, { children: [jsx("div", Object.assign({ className: `${baseClass}--utility-bar` }, { children: jsx("div", Object.assign({ className: `${prefix}--language-switcher` }, { children: jsxs("div", Object.assign({ className: `${prefix}--language-switcher--wrap` }, { children: [jsx("button", Object.assign({ className: `${prefix}--language-switcher--button`, type: "button" }, { children: languagelabel })), jsx(ContextMenu, { links: languagecontextmenu === null || languagecontextmenu === void 0 ? void 0 : languagecontextmenu.links })] })) })) })), jsx("div", Object.assign({ className: `${baseClass}--logo-bar` }, { children: jsxs("div", Object.assign({ className: `${baseClass}--inner` }, { children: [jsx("a", Object.assign({ href: siteurl, className: `${baseClass}--logo-link` }, { children: jsx("img", { className: `${baseClass}--logo`, src: logo, alt: "ILO Logo" }) })), jsxs("p", Object.assign({ className: `${baseClass}--logo-tagline` }, { children: [tagline === null || tagline === void 0 ? void 0 : tagline.tag, jsx("span", Object.assign({ className: `${baseClass}--logo-tagline--small` }, { children: tagline === null || tagline === void 0 ? void 0 : tagline.small }))] })), jsx("button", Object.assign({ className: `${baseClass}--menu`, onClick: handleMenuToggle }, { children: menulabel }))] })) })), jsxs("div", Object.assign({ className: `${baseClass}--navigation` }, { children: [jsxs("div", Object.assign({ className: `${baseClass}--inner` }, { children: [jsxs("div", Object.assign({ className: `${prefix}--mobile--nav` }, { children: [jsxs("div", Object.assign({ className: `${prefix}--mobile--nav--logo` }, { children: [jsx("a", Object.assign({ href: siteurl, className: `${baseClass}--logo-link` }, { children: jsx("img", { className: `${baseClass}--logo`, src: mobilelogo, alt: "ILO Logo" }) })), jsx("button", Object.assign({ className: `${baseClass}--menu--close`, onClick: handleMenuToggle }, { children: menucloselabel }))] })), jsx("div", Object.assign({ className: `${prefix}--mobile--nav--search` }, { children: jsx(SearchField, { input: searchfield === null || searchfield === void 0 ? void 0 : searchfield.input, action: searchfield === null || searchfield === void 0 ? void 0 : searchfield.action }) })), jsx("div", Object.assign({ className: `${prefix}--mobile--nav--language--switcher` }, { children: jsx("button", Object.assign({ className: `${prefix}--mobile--nav--language--switcher--button`, onClick: handleLanguageToggle, type: "button" }, { children: languagelabel })) })), jsx("div", Object.assign({ className: `${prefix}--mobile--nav--language--select` }, { children: jsxs("div", Object.assign({ className: `${baseClass}--inner` }, { children: [jsxs("div", Object.assign({ className: `${prefix}--mobile--subnav--menu` }, { children: [jsx("button", Object.assign({ className: `${prefix}--mobile--subnav--back`, onClick: handleLanguageToggle, type: "button" }, { children: subnav === null || subnav === void 0 ? void 0 : subnav.mobilebacklabel })), jsx("button", Object.assign({ className: `${baseClass}--menu--close`, onClick: handleMenuToggle }, { children: subnav === null || subnav === void 0 ? void 0 : subnav.mobilecloselabel })), jsx("h6", Object.assign({ className: `${prefix}--mobile--subnav--label` }, { children: languagelabel }))] })), jsx("ul", Object.assign({ className: `${prefix}--nav--set` }, { children: (languagecontextmenu === null || languagecontextmenu === void 0 ? void 0 : languagecontextmenu.links) &&
+    return (jsxs("header", Object.assign({ className: NavigationClasses }, { children: [jsx("div", Object.assign({ className: `${baseClass}--utility-bar` }, { children: jsx("div", Object.assign({ className: `${prefix}--language-switcher` }, { children: jsxs("div", Object.assign({ className: `${prefix}--language-switcher--wrap` }, { children: [jsx("button", Object.assign({ className: `${prefix}--language-switcher--button`, type: "button" }, { children: languagelabel })), jsx(ContextMenu, { links: languagecontextmenu === null || languagecontextmenu === void 0 ? void 0 : languagecontextmenu.links })] })) })) })), jsx("div", Object.assign({ className: `${baseClass}--logo-bar` }, { children: jsxs("div", Object.assign({ className: `${baseClass}--inner ${prefix}--container` }, { children: [jsx("a", Object.assign({ href: siteurl, className: `${baseClass}--logo-link` }, { children: jsx("img", { className: `${baseClass}--logo`, src: logo, alt: "ILO Logo" }) })), jsxs("p", Object.assign({ className: `${baseClass}--logo-tagline` }, { children: [tagline === null || tagline === void 0 ? void 0 : tagline.tag, jsx("span", Object.assign({ className: `${baseClass}--logo-tagline--small` }, { children: tagline === null || tagline === void 0 ? void 0 : tagline.small }))] })), jsx("button", Object.assign({ className: `${baseClass}--menu`, onClick: handleMenuToggle }, { children: menulabel }))] })) })), jsxs("div", Object.assign({ className: `${baseClass}--navigation` }, { children: [jsxs("div", Object.assign({ className: `${baseClass}--inner ${prefix}--container` }, { children: [jsxs("div", Object.assign({ className: `${prefix}--mobile--nav` }, { children: [jsxs("div", Object.assign({ className: `${prefix}--mobile--nav--logo` }, { children: [jsx("a", Object.assign({ href: siteurl, className: `${baseClass}--logo-link` }, { children: jsx("img", { className: `${baseClass}--logo`, src: mobilelogo, alt: "ILO Logo" }) })), jsx("button", Object.assign({ className: `${baseClass}--menu--close`, onClick: handleMenuToggle }, { children: menucloselabel }))] })), jsx("div", Object.assign({ className: `${prefix}--mobile--nav--search` }, { children: jsx(SearchField, { input: searchfield === null || searchfield === void 0 ? void 0 : searchfield.input, action: searchfield === null || searchfield === void 0 ? void 0 : searchfield.action }) })), jsx("div", Object.assign({ className: `${prefix}--mobile--nav--language--switcher` }, { children: jsx("button", Object.assign({ className: `${prefix}--mobile--nav--language--switcher--button`, onClick: handleLanguageToggle, type: "button" }, { children: languagelabel })) })), jsx("div", Object.assign({ className: `${prefix}--mobile--nav--language--select` }, { children: jsxs("div", Object.assign({ className: `${baseClass}--inner ${prefix}--container` }, { children: [jsxs("div", Object.assign({ className: `${prefix}--mobile--subnav--menu` }, { children: [jsx("button", Object.assign({ className: `${prefix}--mobile--subnav--back`, onClick: handleLanguageToggle, type: "button" }, { children: subnav === null || subnav === void 0 ? void 0 : subnav.mobilebacklabel })), jsx("button", Object.assign({ className: `${baseClass}--menu--close`, onClick: handleMenuToggle }, { children: subnav === null || subnav === void 0 ? void 0 : subnav.mobilecloselabel })), jsx("h6", Object.assign({ className: `${prefix}--mobile--subnav--label` }, { children: languagelabel }))] })), jsx("ul", Object.assign({ className: `${prefix}--nav--set` }, { children: (languagecontextmenu === null || languagecontextmenu === void 0 ? void 0 : languagecontextmenu.links) &&
                                                         languagecontextmenu.links.map((item, index) => (jsx("li", Object.assign({ className: `${prefix}--nav--items` }, { children: jsx("a", Object.assign({ href: item.url, className: `${prefix}--nav--link ${prefix}--nav--language` }, { children: item.label })) }), index))) }))] })) }))] })), jsxs("nav", Object.assign({ className: `${prefix}--nav`, "aria-labelledby": "primary-navigation" }, { children: [jsx("h2", Object.assign({ className: `${prefix}--nav--label`, id: "primary-navigation" }, { children: primarynav === null || primarynav === void 0 ? void 0 : primarynav.navlabel })), jsxs("ul", Object.assign({ className: `${prefix}--nav--set` }, { children: [(primarynav === null || primarynav === void 0 ? void 0 : primarynav.items) &&
-                                                primarynav.items.map((item, index) => (jsx("li", Object.assign({ className: `${prefix}--nav--items` }, { children: jsx("a", Object.assign({ href: item.url, className: `${prefix}--nav--link` }, { children: item.label })) }), index))), subnav && (jsx("li", Object.assign({ className: `${prefix}--nav--items` }, { children: jsx("button", Object.assign({ className: `${prefix}--nav--trigger`, onClick: handleSubnavToggle }, { children: subnav.buttonlabel })) })))] }))] })), jsx("div", Object.assign({ className: `${prefix}--search` }, { children: jsx("button", Object.assign({ className: `${prefix}--search--button`, type: "button", onClick: handleSearchToggle }, { children: searchlabel })) }))] })), subnav && (jsx("nav", Object.assign({ className: `${prefix}--subnav`, "aria-labelledby": "secondary-navigation" }, { children: jsxs("div", Object.assign({ className: `${prefix}--subnav--inner` }, { children: [jsx("div", Object.assign({ className: `${prefix}--mobile--subnav` }, { children: jsxs("div", Object.assign({ className: `${prefix}--mobile--subnav--menu` }, { children: [jsx("button", Object.assign({ className: `${prefix}--mobile--subnav--back`, onClick: handleSubnavToggle, type: "button" }, { children: subnav.mobilebacklabel })), jsx("button", Object.assign({ className: `${prefix}--header--menu--close`, onClick: handleMenuToggle }, { children: subnav.mobilecloselabel })), jsx("h6", Object.assign({ className: `${prefix}--mobile--subnav--label` }, { children: subnav.buttonlabel }))] })) })), jsx("h2", Object.assign({ className: `${prefix}--nav--label`, id: "secondary-navigation" }, { children: subnav.navlabel })), jsx("ul", Object.assign({ className: `${prefix}--subnav--set` }, { children: (subnav === null || subnav === void 0 ? void 0 : subnav.items) &&
-                                        subnav.items.map((item, index) => (jsx("li", Object.assign({ className: `${prefix}--subnav--items` }, { children: jsx("a", Object.assign({ href: item.url, className: `${prefix}--subnav--link` }, { children: item.label })) }), index))) }))] })) }))), jsx("div", Object.assign({ className: `${prefix}--search-box` }, { children: jsx("div", Object.assign({ className: `${prefix}--header--inner` }, { children: jsx(SearchField, { input: searchfield === null || searchfield === void 0 ? void 0 : searchfield.input, action: searchfield === null || searchfield === void 0 ? void 0 : searchfield.action }) })) }))] }))] })));
+                                                primarynav.items.map((item, index) => (jsx("li", Object.assign({ className: `${prefix}--nav--items` }, { children: jsx("a", Object.assign({ href: item.url, className: `${prefix}--nav--link` }, { children: item.label })) }), index))), subnav && (jsx("li", Object.assign({ className: `${prefix}--nav--items` }, { children: jsx("button", Object.assign({ className: `${prefix}--nav--trigger`, onClick: handleSubnavToggle }, { children: subnav.buttonlabel })) })))] }))] })), jsx("div", Object.assign({ className: `${prefix}--search` }, { children: jsx("button", Object.assign({ className: `${prefix}--search--button`, type: "button", onClick: handleSearchToggle }, { children: searchlabel })) }))] })), subnav && (jsx("nav", Object.assign({ className: `${prefix}--subnav`, "aria-labelledby": "secondary-navigation" }, { children: jsxs("div", Object.assign({ className: `${prefix}--subnav--inner ${prefix}--container` }, { children: [jsx("div", Object.assign({ className: `${prefix}--mobile--subnav` }, { children: jsxs("div", Object.assign({ className: `${prefix}--mobile--subnav--menu` }, { children: [jsx("button", Object.assign({ className: `${prefix}--mobile--subnav--back`, onClick: handleSubnavToggle, type: "button" }, { children: subnav.mobilebacklabel })), jsx("button", Object.assign({ className: `${prefix}--header--menu--close`, onClick: handleMenuToggle }, { children: subnav.mobilecloselabel })), jsx("h6", Object.assign({ className: `${prefix}--mobile--subnav--label` }, { children: subnav.buttonlabel }))] })) })), jsx("h2", Object.assign({ className: `${prefix}--nav--label`, id: "secondary-navigation" }, { children: subnav.navlabel })), jsx("ul", Object.assign({ className: `${prefix}--subnav--set` }, { children: (subnav === null || subnav === void 0 ? void 0 : subnav.items) &&
+                                        subnav.items.map((item, index) => (jsx("li", Object.assign({ className: `${prefix}--subnav--items` }, { children: jsx("a", Object.assign({ href: item.url, className: `${prefix}--subnav--link` }, { children: item.label })) }), index))) }))] })) }))), jsx("div", Object.assign({ className: `${prefix}--search-box` }, { children: jsx("div", Object.assign({ className: `${prefix}--header--inner ${prefix}--container` }, { children: jsx(SearchField, { input: searchfield === null || searchfield === void 0 ? void 0 : searchfield.input, action: searchfield === null || searchfield === void 0 ? void 0 : searchfield.action }) })) }))] }))] })));
 };
 
 export { Navigation as default };

package/lib/esm/components/Pagination/Pagination.js

@@ -41,7 +41,7 @@ const Pagination = ({ className, callback, currentPage, firstPageUrl, firstPageT
             callback(e);
         }
     };
-    return (jsxs("div", Object.assign({ className: paginationClasses }, { children: [jsxs("div", Object.assign({ className: `${baseClass}--previous-set` }, { children: [jsx("a", Object.assign({ className: firstClasses, onClick: (e) => handleClick(e), href: firstPageUrl, title: firstPageTitle }, { children: firstPageTitle })), jsx("a", Object.assign({ className: prevClasses, onClick: (e) => handleClick(e), href: prevPageUrl, title: prevPageTitle }, { children: prevPageTitle }))] })), jsxs("p", Object.assign({ className: `${baseClass}--page` }, { children: [jsx("span", { children: currentPage + 1 }), " ", pageCountPreposition, " ", jsx("span", { children: totalPages })] })), jsxs("div", Object.assign({ className: `${baseClass}--next-set` }, { children: [jsx("a", Object.assign({ className: nextClasses, onClick: (e) => handleClick(e), href: nextPageUrl, title: nextPageTitle }, { children: nextPageTitle })), jsx("a", Object.assign({ className: lastClasses, onClick: (e) => handleClick(e), href: lastPageUrl, title: lastPageTitle }, { children: lastPageTitle }))] }))] })));
+    return (jsxs("div", Object.assign({ className: paginationClasses }, { children: [jsxs("div", Object.assign({ className: `${baseClass}--previous-set` }, { children: [jsx("a", Object.assign({ className: firstClasses, onClick: (e) => handleClick(e), href: firstPageUrl, title: firstPageTitle }, { children: firstPageTitle })), jsx("a", Object.assign({ className: prevClasses, onClick: (e) => handleClick(e), href: prevPageUrl, title: prevPageTitle }, { children: prevPageTitle }))] })), jsxs("p", Object.assign({ className: `${baseClass}--page` }, { children: [jsx("span", { children: currentPage + 1 }), jsx("span", { children: pageCountPreposition }), jsx("span", { children: totalPages })] })), jsxs("div", Object.assign({ className: `${baseClass}--next-set` }, { children: [jsx("a", Object.assign({ className: nextClasses, onClick: (e) => handleClick(e), href: nextPageUrl, title: nextPageTitle }, { children: nextPageTitle })), jsx("a", Object.assign({ className: lastClasses, onClick: (e) => handleClick(e), href: lastPageUrl, title: lastPageTitle }, { children: lastPageTitle }))] }))] })));
 };
 
 export { Pagination as default };

package/lib/esm/components/index.js

@@ -50,8 +50,7 @@ export { default as TableOfContents } from './TableOfContents/TableOfContents.js
 export { default as Footer } from './Footer/Footer.js';
 export { default as LocalNav } from './LocalNav/LocalNav.js';
 export { default as Navigation } from './Navigation/Navigation.js';
-export { default as Card } from './Card/Card.js';
-export { default as CardGroup } from './Card/CardGroup.js';
+export { default as CardGroup } from './Cards/CardGroup/CardGroup.js';
 export { default as Breadcrumb } from './Breadcrumb/Breadcrumb.js';
 export { default as Tabs } from './Tabs/Tabs.js';
 import '../hooks/useGlobalSettings.js';
@@ -77,4 +76,12 @@ import 'videojs-youtube';
 import 'video.js';
 import '@ilo-org/icons-react';
 import './Logo/Logo.js';
+import './Cards/DataCard/DataCard.js';
+import './Cards/DetailCard/DetailCard.js';
+import './Cards/FactlistCard/FactListCard.js';
 import './List/ListItem.js';
+import './Cards/FeatureCard/FeatureCard.js';
+import './Cards/MultilinkCard/MultiLinkCard.js';
+import './Cards/PromoCard/PromoCard.js';
+import './Cards/StatCard/StatCard.js';
+import './Cards/TextCard/TextCard.js';

package/lib/esm/index.js

@@ -50,8 +50,7 @@ export { default as TableOfContents } from './components/TableOfContents/TableOf
 export { default as Footer } from './components/Footer/Footer.js';
 export { default as LocalNav } from './components/LocalNav/LocalNav.js';
 export { default as Navigation } from './components/Navigation/Navigation.js';
-export { default as Card } from './components/Card/Card.js';
-export { default as CardGroup } from './components/Card/CardGroup.js';
+export { default as CardGroup } from './components/Cards/CardGroup/CardGroup.js';
 export { default as Breadcrumb } from './components/Breadcrumb/Breadcrumb.js';
 export { default as Tabs } from './components/Tabs/Tabs.js';
 import './hooks/useGlobalSettings.js';
@@ -77,4 +76,12 @@ import './components/Video/VideoPlayer.js';
 import 'videojs-youtube';
 import 'video.js';
 import './components/Logo/Logo.js';
+import './components/Cards/DataCard/DataCard.js';
+import './components/Cards/DetailCard/DetailCard.js';
+import './components/Cards/FactlistCard/FactListCard.js';
 import './components/List/ListItem.js';
+import './components/Cards/FeatureCard/FeatureCard.js';
+import './components/Cards/MultilinkCard/MultiLinkCard.js';
+import './components/Cards/PromoCard/PromoCard.js';
+import './components/Cards/StatCard/StatCard.js';
+import './components/Cards/TextCard/TextCard.js';

package/lib/types/react/src/components/Cards/CardGroup/CardGroup.args.d.ts

@@ -0,0 +1,13 @@
+import { CardGroupProps } from "./CardGroup.props";
+export declare const textCardGroup: CardGroupProps;
+declare const CardGroupArgs: {
+    textCardGroup: import("./CardGroup.props").TextCardGroup;
+    statCardGroup: import("./CardGroup.props").StatCardGroup;
+    multilinkCardGroup: import("./CardGroup.props").MultilinkCardGroup;
+    promoCardGroup: import("./CardGroup.props").PromoCardGroup;
+    featureCardGroup: import("./CardGroup.props").FeatureCardGroup;
+    detailCardGroup: import("./CardGroup.props").DetailCardGroup;
+    factListCardGroup: import("./CardGroup.props").FactlistCardGroup;
+    dataCardGroup: import("./CardGroup.props").DataCardGroup;
+};
+export default CardGroupArgs;