@ilo-org/react 0.14.0 → 0.15.0

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

@@ -6,7 +6,7 @@ import 'tslib';
 import 'react';
 import '../../../GlobalCtx-7fb23cfa.js';
 
-const FeatureCard = ({ isvideo, eyebrow, title, theme, size = "narrow", date, link, linklist, image, }) => {
+const FeatureCard = ({ isvideo, eyebrow, title, theme, size = "narrow", date, link, linklist, image, titleLevel: TitleElement, }) => {
     const { prefix } = useGlobalSettings();
     const baseClass = `${prefix}--card`;
     const cardClasses = classNames(baseClass, `${baseClass}__type__feature`, {
@@ -16,7 +16,7 @@ const FeatureCard = ({ isvideo, eyebrow, title, theme, size = "narrow", date, li
         [`${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 }))] }))] }))] })));
+    return (jsxs("div", Object.assign({ className: cardClasses }, { children: [link && (jsx("a", Object.assign({ className: `${baseClass}--link`, href: link, title: title }, { children: jsx("span", Object.assign({ className: `${baseClass}--link--text` }, { children: title })) }))), jsxs("div", Object.assign({ className: `${baseClass}--wrap` }, { children: [image && (jsx("div", Object.assign({ className: `${baseClass}--image--wrapper` }, { children: jsx("picture", { children: jsx("img", { className: `${baseClass}--picture`, src: image, alt: title }) }) }))), jsxs("div", Object.assign({ className: `${baseClass}--content` }, { children: [eyebrow && jsx("p", Object.assign({ className: `${baseClass}--eyebrow` }, { children: eyebrow })), title && TitleElement ? (jsx(TitleElement, Object.assign({ className: `${baseClass}--title` }, { children: title }))) : (jsx("p", Object.assign({ className: `${baseClass}--title` }, { children: title }))), 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/MultilinkCard/MultiLinkCard.js

@@ -6,7 +6,7 @@ import 'tslib';
 import 'react';
 import '../../../GlobalCtx-7fb23cfa.js';
 
-const MultilinkCard = ({ isvideo, eyebrow, title, size = "narrow", alignment, intro, link, linklist, image, }) => {
+const MultilinkCard = ({ isvideo, eyebrow, title, size = "standard", alignment, intro, link, linklist, image, titleLevel: TitleElement, }) => {
     const { prefix } = useGlobalSettings();
     const baseClass = `${prefix}--card`;
     const cardClasses = classNames(baseClass, `${baseClass}__type__multilink`, {
@@ -16,7 +16,7 @@ const MultilinkCard = ({ isvideo, eyebrow, title, size = "narrow", alignment, in
         [`${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 }))] }))] }))] })));
+    return (jsxs("div", Object.assign({ className: cardClasses }, { children: [link && (jsx("a", Object.assign({ className: `${baseClass}--link`, href: link, title: title }, { children: jsx("span", Object.assign({ className: `${baseClass}--link--text` }, { children: title })) }))), jsxs("div", Object.assign({ className: `${baseClass}--wrap` }, { children: [image && (jsx("div", Object.assign({ className: `${baseClass}--image--wrapper` }, { children: jsx("picture", { children: jsx("img", { className: `${baseClass}--picture`, src: image, alt: title }) }) }))), jsxs("div", Object.assign({ className: `${baseClass}--content` }, { children: [eyebrow && jsx("p", Object.assign({ className: `${baseClass}--eyebrow` }, { children: eyebrow })), title && TitleElement ? (jsx(TitleElement, Object.assign({ className: `${baseClass}--title` }, { children: title }))) : (jsx("p", Object.assign({ className: `${baseClass}--title` }, { children: title }))), 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/PromoCard/PromoCard.js

@@ -5,7 +5,7 @@ import 'tslib';
 import 'react';
 import '../../../GlobalCtx-7fb23cfa.js';
 
-const PromoCard = ({ eyebrow, title, theme, size = "narrow", cornercut, intro, link, cta, }) => {
+const PromoCard = ({ eyebrow, title, theme, size = "narrow", cornercut, intro, link, cta, titleLevel: TitleElement, }) => {
     const { prefix } = useGlobalSettings();
     const baseClass = `${prefix}--card`;
     const wrapperClass = classNames(`${baseClass}--wrapper`, `${baseClass}--wrapper__type__promo ${baseClass}--wrapper__type__promo__size__${size}`);
@@ -15,7 +15,7 @@ const PromoCard = ({ eyebrow, title, theme, size = "narrow", cornercut, intro, l
         [`${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 })) })))] })) }))] })) })));
+    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 && TitleElement ? (jsx(TitleElement, Object.assign({ className: `${baseClass}--title` }, { children: title }))) : (jsx("p", Object.assign({ className: `${baseClass}--title` }, { children: title }))), intro && jsx("p", Object.assign({ className: `${baseClass}--intro` }, { children: intro })), 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/StatCard/StatCard.js

@@ -6,14 +6,14 @@ import 'tslib';
 import 'react';
 import '../../../GlobalCtx-7fb23cfa.js';
 
-const StatCard = ({ title, color, size = "standard", intro, source, }) => {
+const StatCard = ({ title, color, size = "standard", intro, source, titleLevel: TitleElement, }) => {
     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 }))] })) })) })));
+    return (jsx("div", Object.assign({ className: cardClasses }, { children: jsx("div", Object.assign({ className: `${baseClass}--wrap` }, { children: jsxs("div", Object.assign({ className: `${baseClass}--content` }, { children: [title && TitleElement ? (jsx(TitleElement, Object.assign({ className: `${baseClass}--title` }, { children: title }))) : (jsx("p", Object.assign({ className: `${baseClass}--title` }, { children: title }))), 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/TextCard/TextCard.js

@@ -6,7 +6,7 @@ import 'tslib';
 import 'react';
 import '../../../GlobalCtx-7fb23cfa.js';
 
-const TextCard = ({ eyebrow, title, theme, size, date, profile, link, }) => {
+const TextCard = ({ eyebrow, title, theme, size, date, profile, link, titleLevel: TitleElement, }) => {
     const { prefix } = useGlobalSettings();
     const baseClass = `${prefix}--card`;
     const wrapperClass = classNames(`${baseClass}--wrapper`);
@@ -15,7 +15,7 @@ const TextCard = ({ eyebrow, title, theme, size, date, profile, 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}` }))] })) }))] })) })));
+    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 && TitleElement ? (jsx(TitleElement, Object.assign({ className: `${baseClass}--title` }, { children: title }))) : (jsx("p", 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/LogoGrid/LogoGrid.js

@@ -1,8 +1,8 @@
 import { jsx } from 'react/jsx-runtime';
 import classNames from 'classnames';
 import useGlobalSettings from '../../hooks/useGlobalSettings.js';
-import 'react';
 import 'tslib';
+import 'react';
 import '../../GlobalCtx-7fb23cfa.js';
 
 const LogoGridItem = ({ url, label, src }) => {

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

@@ -1,5 +1,5 @@
 import { jsxs, jsx } from 'react/jsx-runtime';
-import { useState } from 'react';
+import { useState, useCallback, useEffect } from 'react';
 import useGlobalSettings from '../../hooks/useGlobalSettings.js';
 import ContextMenu from '../ContextMenu/ContextMenu.js';
 import SearchField from '../SearchField/SearchField.js';
@@ -18,31 +18,57 @@ const Navigation = ({ logo, mobilelogo, siteurl, tagline, primarynav, subnav, me
     const { prefix } = useGlobalSettings();
     const [toggleMenuOpen, setMenuToggleOpen] = useState(false);
     const [toggleSearchOpen, setSearchToggleOpen] = useState(false);
+    const [searchTabbable, setSearchTabbable] = useState(false);
     const [toggleSubnavOpen, setSubnavToggleOpen] = useState(false);
+    const [subnavTabbable, setSubnavTabbable] = useState(false);
     const [toggleLanguageOpen, setLanguageToggleOpen] = useState(false);
     const baseClass = `${prefix}--header`;
     const NavigationClasses = classNames(baseClass, {
         [`${prefix}--mobile--open`]: toggleMenuOpen,
-        [`${prefix}--select--open`]: toggleLanguageOpen,
         [`${prefix}--search--open`]: toggleSearchOpen,
         [`${prefix}--subnav--open`]: toggleSubnavOpen,
+        [`${prefix}--select--open`]: toggleLanguageOpen,
+        [`${prefix}--context--open`]: toggleLanguageOpen,
     });
     const handleMenuToggle = () => {
         setMenuToggleOpen(!toggleMenuOpen);
     };
-    const handleLanguageToggle = () => {
+    const handleLanguageToggle = useCallback(() => {
         setLanguageToggleOpen(!toggleLanguageOpen);
-    };
+    }, [toggleLanguageOpen]);
     const handleSearchToggle = () => {
-        setSearchToggleOpen(!toggleSearchOpen);
+        if (toggleSearchOpen) {
+            setSearchToggleOpen(false);
+            setTimeout(() => setSearchTabbable(false), 225);
+            return;
+        }
+        setSearchTabbable(true);
+        setTimeout(() => setSearchToggleOpen(true), 10);
     };
     const handleSubnavToggle = () => {
-        setSubnavToggleOpen(!toggleSubnavOpen);
+        if (toggleSubnavOpen) {
+            setSubnavToggleOpen(false);
+            setTimeout(() => setSubnavTabbable(false), 125);
+            return;
+        }
+        setSubnavTabbable(true);
+        setTimeout(() => setSubnavToggleOpen(true), 10);
     };
-    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) &&
+    useEffect(() => {
+        if (window) {
+            if (toggleLanguageOpen) {
+                window.addEventListener("click", handleLanguageToggle);
+            }
+            else {
+                window.removeEventListener("click", handleLanguageToggle);
+            }
+            return () => window.removeEventListener("click", handleLanguageToggle);
+        }
+    }, [toggleLanguageOpen, handleLanguageToggle]);
+    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", onClick: handleLanguageToggle }, { 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 ${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 }) })) }))] }))] })));
+                                                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({ style: { display: subnavTabbable ? "block" : "none" }, 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({ style: { display: searchTabbable ? "block" : "none" }, 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/SocialMedia/SocialMedia.js

@@ -1,8 +1,8 @@
 import { jsxs, jsx } from 'react/jsx-runtime';
 import classNames from 'classnames';
 import useGlobalSettings from '../../hooks/useGlobalSettings.js';
-import 'react';
 import 'tslib';
+import 'react';
 import '../../GlobalCtx-7fb23cfa.js';
 
 const SocialMedia = ({ className, theme = "light", justify = "start", headline, icons, }) => {

package/lib/esm/hooks/index.js

@@ -1,5 +1,4 @@
 export { default as useGlobalSettings } from './useGlobalSettings.js';
-export { default as useVideoPlayer } from './useVideoPlayer.js';
 import 'tslib';
 import 'react';
 import 'react/jsx-runtime';

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

@@ -7,15 +7,40 @@ import { FeatureCardProps } from "../FeatureCard";
 import { DetailCardProps } from "../DetailCard";
 import { FactlistCardProps } from "../FactlistCard";
 import { DataCardProps } from "../DataCard";
+import { HeadingTypes, CardSize, ThemeTypes, CardAlignment } from "../../../types";
 export interface CommonCardGroupProps {
     /**
-     * Number of cards in the group
+     *Collapsed - Optionally collapses margins between the cards.
+     *Option keys: true, false
+     */
+    collapsed?: boolean;
+    /**
+     *Number of cards in the group
      */
     cardCount: string;
     /**
-     * A Button to display after all the cards in the group
+     *Size - Sets the layout of the cards in the group. See the Card component for more info on this setting, which has different effects on the different types of cards.
+     *Option keys: standard, narrow, wide, fluid
+     */
+    size: CardSize;
+    /**
+     *Alignment - Positions the image to the right or to the left of the content when the card is displayed in a wide or fluid size. Has no effect if the card is displayed in a standard or narrow size. Only used by `Multilink Card`.
+     *Option keys: left, right
+     */
+    alignment?: CardAlignment;
+    /**
+     *Set the title level for all the cards in the group
+     */
+    titleLevel?: HeadingTypes;
+    /**
+     *A Button to display after all the cards in the group
      */
     cta?: LinkProps;
+    /**
+     *Theme - Sets all of the cards to appear as either light or dark. Used by all card groups except for Multilink Card, Data Card and Stat Card.
+     *Option keys: dark, light
+     */
+    theme?: ThemeTypes;
 }
 export interface StatCardGroup extends CommonCardGroupProps {
     /**
@@ -53,6 +78,7 @@ export interface FactlistCardGroup extends CommonCardGroupProps {
 }
 export interface DataCardGroup extends CommonCardGroupProps {
     type: "data";
+    titleLevel?: never;
     cards: DataCardProps[];
 }
 export type CardGroupProps = StatCardGroup | MultilinkCardGroup | TextCardGroup | PromoCardGroup | FeatureCardGroup | DetailCardGroup | FactlistCardGroup | DataCardGroup;

package/lib/types/react/src/components/Cards/DetailCard/DetailCard.props.d.ts

@@ -1,4 +1,4 @@
-import { CardSize, EventDate } from "../../../types";
+import { CardSize, EventDate, HeadingTypes } from "../../../types";
 export type DetailCardProps = {
     /**
      * A line of text that appears as a small heading above the title of the card
@@ -8,6 +8,10 @@ export type DetailCardProps = {
      * The title of the card
      */
     title: string;
+    /**
+     * HTML element used for the title
+     */
+    titleLevel?: HeadingTypes;
     /**
      * Introductory text in the card
      */

package/lib/types/react/src/components/Cards/FactlistCard/FactListCard.props.d.ts

@@ -1,9 +1,13 @@
-import { ThemeTypes, CardSize } from "../../../types";
+import { ThemeTypes, CardSize, HeadingTypes } from "../../../types";
 export type FactlistCardProps = {
     /**
      * The title of the card
      */
     title: string;
+    /**
+     * HTML element used for the title
+     */
+    titleLevel?: HeadingTypes;
     /**
      * Will render the card to appear on light or dark backgrounds
      */

package/lib/types/react/src/components/Cards/FeatureCard/FeatureCard.props.d.ts

@@ -1,4 +1,4 @@
-import { ThemeTypes, CardSize, EventDate } from "../../../types";
+import { ThemeTypes, CardSize, EventDate, HeadingTypes } from "../../../types";
 import { LinkListProps } from "../../LinkList/LinkList.props";
 export type FeatureCardProps = {
     isvideo?: boolean;
@@ -10,6 +10,10 @@ export type FeatureCardProps = {
      * The title of the card
      */
     title: string;
+    /**
+     * HTML element used for the title
+     */
+    titleLevel?: HeadingTypes;
     /**
      * Will render the card to appear on light or dark backgrounds
      */

package/lib/types/react/src/components/Cards/MultilinkCard/MultilinkCard.props.d.ts

@@ -1,4 +1,4 @@
-import { CardAlignment, CardSize } from "../../../types";
+import { CardAlignment, CardSize, HeadingTypes } from "../../../types";
 import { LinkListProps } from "../../LinkList/LinkList.props";
 export type MultilinkCardProps = {
     isvideo?: boolean;
@@ -10,6 +10,10 @@ export type MultilinkCardProps = {
      * The title of the card
      */
     title: string;
+    /**
+     * HTML element used for the title
+     */
+    titleLevel?: HeadingTypes;
     /**
      * How big should the card be
      */

package/lib/types/react/src/components/Cards/PromoCard/PromoCard.props.d.ts

@@ -1,4 +1,4 @@
-import { ThemeTypes, CardCornerType, CardSize } from "../../../types";
+import { ThemeTypes, CardCornerType, CardSize, HeadingTypes } from "../../../types";
 import { LinkProps } from "../../LinkList/LinkList.props";
 export type PromoCardProps = {
     /**
@@ -9,6 +9,10 @@ export type PromoCardProps = {
      * The title of the card
      */
     title: string;
+    /**
+     * HTML element used for the title
+     */
+    titleLevel?: HeadingTypes;
     /**
      * Will render the card to appear on light or dark backgrounds
      */

package/lib/types/react/src/components/Cards/StatCard/StatCard.props.d.ts

@@ -1,10 +1,17 @@
-import { CardColor, CardSize } from "../../../types";
+import { CardColor, CardSize, HeadingTypes } from "../../../types";
 import { LinkProps } from "../../LinkList/LinkList.props";
 export type StatCardProps = {
     /**
      * The title of the card
      */
     title: string;
+    /**
+     * HTML element used for the title
+     */
+    titleLevel?: HeadingTypes;
+    /**
+     * Background color of stat card
+     */
     color?: CardColor;
     /**
      * How big should the card be

package/lib/types/react/src/components/Cards/TextCard/TextCard.props.d.ts

@@ -1,4 +1,4 @@
-import { ThemeTypes, CardSize, EventDate } from "../../../types";
+import { ThemeTypes, CardSize, EventDate, HeadingTypes } from "../../../types";
 import { ProfileProps } from "../../Profile/Profile.props";
 export type TextCardProps = {
     /**
@@ -9,6 +9,10 @@ export type TextCardProps = {
      * The title of the card
      */
     title: string;
+    /**
+     * HTML element used for the title
+     */
+    titleLevel?: HeadingTypes;
     /**
      * Will render the card to appear on light or dark backgrounds
      */

package/lib/types/react/src/hooks/index.d.ts

@@ -1,2 +1 @@
 export { default as useGlobalSettings } from "./useGlobalSettings";
-export { default as useVideoPlayer } from "./useVideoPlayer";

package/lib/types/react/src/types/index.d.ts

@@ -29,6 +29,7 @@ export type CardSize = "wide" | "standard" | "narrow" | "fluid";
 export type CardCornerType = boolean;
 export type CardAlignment = "left" | "right";
 export type CardTypes = "stat" | "multilink" | "text" | "promo" | "feature" | "detail" | "factlist" | "data";
+export type HeadingTypes = "p" | "h1" | "h2" | "h3" | "h4" | "h5" | "h6";
 export type EventDate = {
     unix?: string;
     human?: string;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ilo-org/react",
-  "version": "0.14.0",
+  "version": "0.15.0",
   "description": "React components for the ILO's Design System",
   "keywords": [
     "ui_patterns",
@@ -9,6 +9,9 @@
     "designsystem",
     "components"
   ],
+  "files": [
+    "lib/**/*"
+  ],
   "contributors": [
     {
       "name": "Justin Smith",
@@ -95,12 +98,12 @@
     "react-transition-group": "^4.4.1",
     "video.js": "^7.21.2",
     "videojs-youtube": "^3.0.1",
-    "@ilo-org/brand-assets": "0.5.0",
-    "@ilo-org/fonts": "0.2.0",
-    "@ilo-org/icons-react": "0.1.0",
-    "@ilo-org/styles": "0.16.0",
-    "@ilo-org/themes": "0.8.0",
-    "@ilo-org/utils": "0.1.0"
+    "@ilo-org/brand-assets": "0.5.1",
+    "@ilo-org/fonts": "0.2.1",
+    "@ilo-org/icons-react": "0.1.1",
+    "@ilo-org/styles": "1.0.0",
+    "@ilo-org/themes": "0.8.1",
+    "@ilo-org/utils": "0.1.1"
   },
   "devDependencies": {
     "@rollup/plugin-commonjs": "^23.0.2",
@@ -152,10 +155,10 @@
     "ts-dedent": "^2.2.0",
     "ts-jest": "^29.1.1",
     "tslib": "^2.3.1",
-    "vite": "^4.5.2",
-    "@ilo-org/eslint-config": "0.2.0",
-    "@ilo-org/prettier-config": "0.1.0",
-    "@ilo-org/typescript-config": "0.1.0"
+    "vite": "^4.5.3",
+    "@ilo-org/eslint-config": "0.2.1",
+    "@ilo-org/prettier-config": "0.1.1",
+    "@ilo-org/typescript-config": "0.1.1"
   },
   "peerDependencies": {
     "react": ">16",

package/.eslintrc.cjs

@@ -1,39 +0,0 @@
-/**
- * Package-level eslint config extends the global config and applies
- * customizations relative to the local project. In this example we
- * are lintinting both js and ts files, so we combine two configs
- * and set the TypeScript settings as an override
- */
-module.exports = {
-  /* =============== */
-  /* Global Settings */
-  /* =============== */
-  root: true,
-  extends: ["@ilo-org/eslint-config"],
-  // Extend the default config and add any specific settings for this project
-  ignorePatterns: [
-    "storybook-static/",
-    "node_modules/",
-    "lib/",
-    "src/stories/",
-    //@TODO: Remove this once type errors in tests and args files are fixed
-    "src/__tests__",
-    "src/components/**/*.args.ts",
-  ],
-
-  overrides: [
-    /* =================== */
-    /* TypeScript Settings */
-    /* =================== */
-    {
-      // Which files the override will apply to relative to the package root
-      files: ["**/*.{ts,tsx}"],
-      extends: ["@ilo-org/eslint-config/typescript"],
-      // The typescript parser options for this package, which will be different
-      // from other packages
-      parserOptions: {
-        project: ["./tsconfig.json"],
-      },
-    },
-  ],
-};

package/.storybook/main.ts

@@ -1,41 +0,0 @@
-export const core = {
-  disableTelemetry: true,
-  builder: "@storybook/builder-vite",
-};
-
-export const framework = {
-  name: "@storybook/react-vite",
-};
-
-export const stories = [
-  "../src/stories/**/*.mdx",
-  "../src/stories/**/*.stories.@(js|jsx|ts|tsx)",
-];
-
-export const docs = {
-  defaultName: "Overview",
-  autodocs: "tag",
-};
-
-export const staticDirs = [
-  "../public",
-  { from: "../node_modules/@ilo-org/fonts/font-css", to: "/fonts" },
-];
-
-export const addons = [
-  "@storybook/addon-links",
-  "@storybook/addon-essentials",
-  "@storybook/addon-a11y",
-  "@storybook/addon-styling",
-  "storybook-addon-rtl-direction",
-];
-
-export const typescript = {
-  reactDocgen: "react-docgen-typescript",
-  reactDocgenTypescriptOptions: {
-    compilerOptions: {
-      allowSyntheticDefaultImports: true,
-      esModuleInterop: true,
-    },
-  },
-};