@ilo-org/react 0.14.1 → 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.1",
+  "version": "0.15.0",
   "description": "React components for the ILO's Design System",
   "keywords": [
     "ui_patterns",
@@ -101,7 +101,7 @@
     "@ilo-org/brand-assets": "0.5.1",
     "@ilo-org/fonts": "0.2.1",
     "@ilo-org/icons-react": "0.1.1",
-    "@ilo-org/styles": "0.16.1",
+    "@ilo-org/styles": "1.0.0",
     "@ilo-org/themes": "0.8.1",
     "@ilo-org/utils": "0.1.1"
   },
@@ -155,7 +155,7 @@
     "ts-dedent": "^2.2.0",
     "ts-jest": "^29.1.1",
     "tslib": "^2.3.1",
-    "vite": "^4.5.2",
+    "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"

package/lib/cjs/hooks/useVideoPlayer.js

@@ -1,75 +0,0 @@
-'use strict';
-
-var React = require('react');
-
-const useVideoPlayer = (videoElement) => {
-    const [fullscreen, setFullscreen] = React.useState(false);
-    const [playing, setPlaying] = React.useState(false);
-    const [progress, setProgress] = React.useState(0);
-    const [showvolume, showVolume] = React.useState(false);
-    /**
-     * Fullscreen functionality
-     */
-    const toggleFullscreen = () => {
-        setFullscreen(!fullscreen);
-    };
-    React.useEffect(() => {
-        if (fullscreen) {
-            if (videoElement.requestFullscreen) {
-                videoElement.requestFullscreen();
-            }
-        }
-        else {
-            document.exitFullscreen();
-        }
-    }, [fullscreen, videoElement]);
-    /**
-     * Play/pause functionality
-     */
-    const togglePlay = () => {
-        setPlaying(!playing);
-    };
-    React.useEffect(() => {
-        playing ? videoElement.current.play() : videoElement.current.pause();
-    }, [playing, videoElement]);
-    /**
-     * Progress indicator
-     */
-    const handleOnTimeUpdate = () => {
-        setProgress((videoElement.current.currentTime / videoElement.current.duration) * 100);
-    };
-    /**
-     * Scrub functionality
-     */
-    const handleVideoScrub = (event) => {
-        const scrubValue = Number((event.offsetX * event.target.max) / event.target.offsetWidth);
-        videoElement.current.currentTime =
-            videoElement.current.duration * scrubValue;
-        setProgress(scrubValue);
-    };
-    /**
-     * Show volume slider
-     */
-    const toggleVolumeSlider = () => {
-        showVolume(!showvolume);
-    };
-    /**
-     * Volume change
-     */
-    const handleVolumeChange = (event) => {
-        videoElement.volume = event.target.value;
-    };
-    return {
-        handleOnTimeUpdate,
-        handleVideoScrub,
-        handleVolumeChange,
-        playing,
-        progress,
-        showvolume,
-        toggleFullscreen,
-        togglePlay,
-        toggleVolumeSlider,
-    };
-};
-
-module.exports = useVideoPlayer;

package/lib/esm/hooks/useVideoPlayer.js

@@ -1,73 +0,0 @@
-import { useState, useEffect } from 'react';
-
-const useVideoPlayer = (videoElement) => {
-    const [fullscreen, setFullscreen] = useState(false);
-    const [playing, setPlaying] = useState(false);
-    const [progress, setProgress] = useState(0);
-    const [showvolume, showVolume] = useState(false);
-    /**
-     * Fullscreen functionality
-     */
-    const toggleFullscreen = () => {
-        setFullscreen(!fullscreen);
-    };
-    useEffect(() => {
-        if (fullscreen) {
-            if (videoElement.requestFullscreen) {
-                videoElement.requestFullscreen();
-            }
-        }
-        else {
-            document.exitFullscreen();
-        }
-    }, [fullscreen, videoElement]);
-    /**
-     * Play/pause functionality
-     */
-    const togglePlay = () => {
-        setPlaying(!playing);
-    };
-    useEffect(() => {
-        playing ? videoElement.current.play() : videoElement.current.pause();
-    }, [playing, videoElement]);
-    /**
-     * Progress indicator
-     */
-    const handleOnTimeUpdate = () => {
-        setProgress((videoElement.current.currentTime / videoElement.current.duration) * 100);
-    };
-    /**
-     * Scrub functionality
-     */
-    const handleVideoScrub = (event) => {
-        const scrubValue = Number((event.offsetX * event.target.max) / event.target.offsetWidth);
-        videoElement.current.currentTime =
-            videoElement.current.duration * scrubValue;
-        setProgress(scrubValue);
-    };
-    /**
-     * Show volume slider
-     */
-    const toggleVolumeSlider = () => {
-        showVolume(!showvolume);
-    };
-    /**
-     * Volume change
-     */
-    const handleVolumeChange = (event) => {
-        videoElement.volume = event.target.value;
-    };
-    return {
-        handleOnTimeUpdate,
-        handleVideoScrub,
-        handleVolumeChange,
-        playing,
-        progress,
-        showvolume,
-        toggleFullscreen,
-        togglePlay,
-        toggleVolumeSlider,
-    };
-};
-
-export { useVideoPlayer as default };

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

@@ -1,12 +0,0 @@
-declare const useVideoPlayer: (videoElement: any) => {
-    handleOnTimeUpdate: () => void;
-    handleVideoScrub: (event: any) => void;
-    handleVolumeChange: (event: any) => void;
-    playing: boolean;
-    progress: number;
-    showvolume: boolean;
-    toggleFullscreen: () => void;
-    togglePlay: () => void;
-    toggleVolumeSlider: () => void;
-};
-export default useVideoPlayer;