@ilo-org/react 0.5.1 → 0.7.0

package/CHANGELOG.md

@@ -1,5 +1,35 @@
 # @ilo-org/react
 
+## 0.7.0
+
+### Minor Changes
+
+- c0648530f: Accordion items can now be made scrollable by passing `scroll: true` to the Accordion Panel component.
+- 0dc9a8538: Add LogoGrid component which shows a list of logos with an optional link
+
+### Patch Changes
+
+- 77517f4dc: Refactor Hero and HeroCard to sync with new implemenation in Twig and Styles packages
+- Updated dependencies [c0648530f]
+- Updated dependencies [0dc9a8538]
+  - @ilo-org/styles@0.6.0
+
+## 0.6.0
+
+### Minor Changes
+
+- 0f45a7aae: Add Social Media component and use in Footer
+
+### Patch Changes
+
+- Updated dependencies [0f45a7aae]
+- Updated dependencies [0f45a7aae]
+- Updated dependencies [0f45a7aae]
+- Updated dependencies [2f6b0e73f]
+  - @ilo-org/themes@0.2.0
+  - @ilo-org/styles@0.5.0
+  - @ilo-org/icons-react@0.0.21
+
 ## 0.5.1
 
 ### Patch Changes

package/lib/cjs/components/Accordion/AccordionPanel.js

@@ -9,15 +9,15 @@ var AccordionCtx = require('../../AccordionCtx-fe08ff45.js');
 require('../../GlobalCtx-97e4b433.js');
 
 const AccordionPanel = (_a) => {
-    var { children, className, timeout = 600 } = _a, rest = tslib.__rest(_a, ["children", "className", "timeout"]);
+    var { children, className, scroll } = _a, rest = tslib.__rest(_a, ["children", "className", "scroll"]);
     const { activeItems } = require$$0.useContext(AccordionCtx.AccordionContext);
     const { id } = require$$0.useContext(AccordionCtx.AccordionItemContext);
     const [panelHeight, setPanelHeight] = require$$0.useState(0);
     const open = activeItems.indexOf(id) > -1;
     const { prefix } = hooks_useGlobalSettings();
     const baseClass = `${prefix}--accordion--panel`;
-    const accordionaPanelClasses = classNames(className, {
-        [baseClass]: true,
+    const accordionaPanelClasses = classNames(className, baseClass, {
+        [`${baseClass}__scroll`]: scroll,
         [`${baseClass}--open`]: open,
     });
     const ref = require$$0.useRef();

package/lib/cjs/components/Footer/Footer.js

@@ -5,6 +5,8 @@ var hooks_useGlobalSettings = require('../../hooks/useGlobalSettings.js');
 var classNames = require('classnames');
 var components_LinkList_LinkList = require('../LinkList/LinkList.js');
 var components_Button_Button = require('../Button/Button.js');
+var components_SocialMedia_SocialMedia = require('../SocialMedia/SocialMedia.js');
+require('../SocialMedia/index.js');
 require('tslib');
 require('react');
 require('../../GlobalCtx-97e4b433.js');
@@ -12,12 +14,11 @@ require('../Link/Link.js');
 require('../Icon/Icon.js');
 require('@ilo-org/icons-react');
 
-const Footer = ({ className, logo, tagline, subtagline, address, linkgroup, socials, subscribe, legal, secondarylinks, anchorlink, }) => {
+const Footer = ({ className, logo, tagline, subtagline, address, linkgroup, socialmedia, subscribe, legal, secondarylinks, anchorlink, }) => {
     const { prefix } = hooks_useGlobalSettings();
     const baseClass = `${prefix}--footer`;
     const footerClasses = classNames(className, baseClass);
-    return (jsxRuntime.jsxs("footer", Object.assign({ className: footerClasses }, { children: [jsxRuntime.jsxs("div", Object.assign({ className: `${baseClass}--main` }, { children: [jsxRuntime.jsxs("div", Object.assign({ className: "site--info" }, { children: [jsxRuntime.jsx("img", { className: `${baseClass}--logo`, src: logo, alt: "ILO Logo" }), jsxRuntime.jsx("h3", Object.assign({ className: `${baseClass}--headline` }, { children: tagline })), jsxRuntime.jsx("h4", Object.assign({ className: `${baseClass}--subhead` }, { children: subtagline }))] })), address && (jsxRuntime.jsx("div", Object.assign({ className: "address" }, { children: address.map((line, i) => (jsxRuntime.jsx("p", Object.assign({ className: "address--line" }, { children: line }), i))) }))), linkgroup && (jsxRuntime.jsx("nav", Object.assign({ className: "links" }, { children: jsxRuntime.jsx(components_LinkList_LinkList, { linkgroup: linkgroup, theme: "dark" }) }))), (socials || subscribe) && (jsxRuntime.jsxs("div", Object.assign({ className: "connect" }, { children: [socials && (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsx("h5", Object.assign({ className: "social--headline" }, { children: socials === null || socials === void 0 ? void 0 : socials.headline })), jsxRuntime.jsx("ul", Object.assign({ className: "social--links" }, { children: socials.links &&
-                                            socials.links.map((link, index) => (jsxRuntime.jsx("li", Object.assign({ className: "social--links--item" }, { children: jsxRuntime.jsx("a", Object.assign({ className: `social--links--link ${link.type}`, href: link.url }, { children: link.type })) }), index))) }))] })), subscribe && (jsxRuntime.jsx(components_Button_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" }))] })))] })), jsxRuntime.jsxs("div", Object.assign({ className: `${baseClass}--secondary` }, { children: [jsxRuntime.jsx("div", Object.assign({ className: "legal" }, { children: legal })), secondarylinks && (jsxRuntime.jsx("nav", Object.assign({ className: "secondarylinks" }, { children: jsxRuntime.jsx("ul", Object.assign({ className: "secondarylinks--list" }, { children: secondarylinks.map((link, i) => (jsxRuntime.jsx("li", Object.assign({ className: "secondarylinks--list--item" }, { children: jsxRuntime.jsx("a", Object.assign({ href: link.url, className: "secondarylinks--list--link" }, { children: link === null || link === void 0 ? void 0 : link.label }), i) })))) })) }))), jsxRuntime.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 (jsxRuntime.jsxs("footer", Object.assign({ className: footerClasses }, { children: [jsxRuntime.jsxs("div", Object.assign({ className: `${baseClass}--main` }, { children: [jsxRuntime.jsxs("div", Object.assign({ className: "site--info" }, { children: [jsxRuntime.jsx("img", { className: `${baseClass}--logo`, src: logo, alt: "ILO Logo" }), jsxRuntime.jsx("h3", Object.assign({ className: `${baseClass}--headline` }, { children: tagline })), jsxRuntime.jsx("h4", Object.assign({ className: `${baseClass}--subhead` }, { children: subtagline }))] })), address && (jsxRuntime.jsx("div", Object.assign({ className: "address" }, { children: address.map((line, i) => (jsxRuntime.jsx("p", Object.assign({ className: "address--line" }, { children: line }), i))) }))), linkgroup && (jsxRuntime.jsx("nav", Object.assign({ className: "links" }, { children: jsxRuntime.jsx(components_LinkList_LinkList, { linkgroup: linkgroup, theme: "dark" }) }))), (socialmedia || subscribe) && (jsxRuntime.jsxs("div", Object.assign({ className: "connect" }, { children: [socialmedia && (jsxRuntime.jsx("div", Object.assign({ className: "social--links" }, { children: jsxRuntime.jsx(components_SocialMedia_SocialMedia, Object.assign({}, socialmedia, { theme: "dark" })) }))), subscribe && (jsxRuntime.jsx(components_Button_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" }))] })))] })), jsxRuntime.jsxs("div", Object.assign({ className: `${baseClass}--secondary` }, { children: [jsxRuntime.jsx("div", Object.assign({ className: "legal" }, { children: legal })), secondarylinks && (jsxRuntime.jsx("nav", Object.assign({ className: "secondarylinks" }, { children: jsxRuntime.jsx("ul", Object.assign({ className: "secondarylinks--list" }, { children: secondarylinks.map((link, i) => (jsxRuntime.jsx("li", Object.assign({ className: "secondarylinks--list--item" }, { children: jsxRuntime.jsx("a", Object.assign({ href: link.url, className: "secondarylinks--list--link" }, { children: link === null || link === void 0 ? void 0 : link.label }), i) })))) })) }))), jsxRuntime.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 }))] }))] })));
 };
 
 module.exports = Footer;

package/lib/cjs/components/Footer/index.js

@@ -12,6 +12,8 @@ require('../Button/Button.js');
 require('../Link/Link.js');
 require('../Icon/Icon.js');
 require('@ilo-org/icons-react');
+require('../SocialMedia/SocialMedia.js');
+require('../SocialMedia/index.js');
 
 
 

package/lib/cjs/components/Hero/Hero.js

@@ -4,22 +4,32 @@ var jsxRuntime = require('react/jsx-runtime');
 var classNames = require('classnames');
 var hooks_useGlobalSettings = require('../../hooks/useGlobalSettings.js');
 var components_Hero_HeroCard = require('./HeroCard.js');
-var components_Image_Image = require('../Image/Image.js');
+var components_Breadcrumb_Breadcrumb = require('../Breadcrumb/Breadcrumb.js');
+var components_Tooltip_Tooltip = require('../Tooltip/Tooltip.js');
 require('tslib');
 require('react');
 require('../../GlobalCtx-97e4b433.js');
-require('../Credit/Credit.js');
+require('../SocialMedia/SocialMedia.js');
+require('../SocialMedia/index.js');
+require('../ContextMenu/ContextMenu.js');
+require('react-dom');
 
-const Hero = ({ className, image, heroCard, theme = "light", types, }) => {
+const HeroImage = ({ url, alt }) => {
     const { prefix } = hooks_useGlobalSettings();
-    const baseClass = `${prefix}--hero`;
-    const heroClasses = classNames(className, {
-        [baseClass]: true,
-        [`${baseClass}--${theme}`]: theme,
-        [`${baseClass}--${types}`]: types,
-        [`${baseClass}--image`]: image,
-    });
-    return (jsxRuntime.jsx(jsxRuntime.Fragment, { children: jsxRuntime.jsxs("div", Object.assign({ className: heroClasses }, { children: [image && jsxRuntime.jsx(components_Image_Image, Object.assign({}, image)), jsxRuntime.jsx(components_Hero_HeroCard, Object.assign({}, heroCard))] })) }));
+    const imageClass = `${prefix}--card--image`;
+    // Sort the urls by breakpoint
+    const sortedUrls = url.sort((a, b) => a.breakpoint - b.breakpoint);
+    const defaultSrc = sortedUrls[sortedUrls.length - 1].src;
+    return (jsxRuntime.jsx("figure", Object.assign({ className: "hero--figure" }, { children: jsxRuntime.jsxs("picture", { children: [sortedUrls.map((img) => (jsxRuntime.jsx("source", { srcSet: img.src, media: `(min-width: ${img.breakpoint}px)` }, img.breakpoint))), jsxRuntime.jsx("img", { className: imageClass, src: defaultSrc, alt: alt })] }) })));
+};
+const Hero = ({ justify = "start", align = "baseline", cardSize = "small", posterSize = "large", image, breadcrumb, heroCard, caption, }) => {
+    const baseClass = "hero";
+    const justifyClass = `${baseClass}__card-justify__${justify}`;
+    const alignClass = `${baseClass}__card-align__${align}`;
+    const cardSizeClass = `${baseClass}__card-size__${cardSize}`;
+    const posterSizeClass = `${baseClass}__poster-size__${posterSize}`;
+    const heroClasses = classNames(baseClass, justifyClass, alignClass, cardSizeClass, posterSizeClass);
+    return (jsxRuntime.jsxs("div", Object.assign({ className: heroClasses }, { children: [image ? jsxRuntime.jsx(HeroImage, Object.assign({}, image)) : jsxRuntime.jsx("div", { className: "hero--figure" }), breadcrumb && (jsxRuntime.jsx("div", Object.assign({ className: "hero--breadcrumbs" }, { children: jsxRuntime.jsx("div", Object.assign({ className: "hero--breadcrumbs--wrapper" }, { children: jsxRuntime.jsx(components_Breadcrumb_Breadcrumb, Object.assign({}, breadcrumb)) })) }))), jsxRuntime.jsx("div", Object.assign({ className: "hero--card" }, { children: jsxRuntime.jsx(components_Hero_HeroCard, Object.assign({}, heroCard)) })), caption && (jsxRuntime.jsx("div", Object.assign({ className: "hero--caption" }, { children: jsxRuntime.jsx("div", Object.assign({ className: "hero--caption--wrapper" }, { children: jsxRuntime.jsx(components_Tooltip_Tooltip, Object.assign({}, caption)) })) })))] })));
 };
 
 module.exports = Hero;

package/lib/cjs/components/Hero/HeroCard.js

@@ -3,23 +3,33 @@
 var jsxRuntime = require('react/jsx-runtime');
 var classNames = require('classnames');
 var hooks_useGlobalSettings = require('../../hooks/useGlobalSettings.js');
+var components_SocialMedia_SocialMedia = require('../SocialMedia/SocialMedia.js');
+require('../SocialMedia/index.js');
 require('tslib');
 require('react');
 require('../../GlobalCtx-97e4b433.js');
 
-const HeroCard = ({ className, alignment, datecopy, eyebrow, intro, socials, title, theme = "light", types = "article", }) => {
+const HeroCardTitle = ({ baseclass, title, url }) => {
+    const titleClass = `${baseclass}--title`;
+    const linkClass = `${baseclass}--title-link`;
+    if (!url) {
+        return jsxRuntime.jsx("h1", Object.assign({ className: titleClass }, { children: title }));
+    }
+    return (jsxRuntime.jsx("a", Object.assign({ className: linkClass, href: url }, { children: jsxRuntime.jsx("h1", Object.assign({ className: titleClass }, { children: title })) })));
+};
+const HeroCard = ({ theme = "dark", background = "solid", cornercut = "true", eyebrow, title, url, datecopy, intro, socialmedia, }) => {
     const { prefix } = hooks_useGlobalSettings();
     const baseClass = `${prefix}--hero-card`;
-    const heroCardClasses = classNames(className, {
-        [baseClass]: true,
-        [`${baseClass}--${alignment}`]: alignment,
-        [`${baseClass}--${theme}`]: theme,
-        [`${baseClass}--${types}`]: types,
+    const themeClass = `${baseClass}__theme__${theme}`;
+    const backgroundClass = `${baseClass}__background__${background}`;
+    const cornercutClass = `${baseClass}__cornercut`;
+    const heroCardClasses = classNames(baseClass, themeClass, backgroundClass, {
+        [cornercutClass]: cornercut,
     });
-    return (jsxRuntime.jsxs("div", Object.assign({ className: heroCardClasses }, { children: [eyebrow && jsxRuntime.jsx("p", Object.assign({ className: `${baseClass}--eyebrow` }, { children: eyebrow })), title && jsxRuntime.jsx("h2", Object.assign({ className: `${baseClass}--title` }, { children: title })), datecopy && jsxRuntime.jsx("p", Object.assign({ className: `${baseClass}--datecopy` }, { children: datecopy })), intro && jsxRuntime.jsx("p", Object.assign({ className: `${baseClass}--intro` }, { children: intro })), jsxRuntime.jsx("ul", Object.assign({ className: `${baseClass}--list` }, { children: socials &&
-                    socials.map((item, index) => {
-                        return (jsxRuntime.jsx("li", Object.assign({ className: `${baseClass}--list--item` }, { children: jsxRuntime.jsx("a", Object.assign({ className: `${baseClass}--link icon icon--${item.icon}`, href: item.url, title: item.label }, { children: item.label })) }), index));
-                    }) }))] })));
+    const eyebrowClass = `${baseClass}--eyebrow`;
+    const datecopyClass = `${baseClass}--datecopy`;
+    const introClass = `${baseClass}--intro`;
+    return (jsxRuntime.jsxs("div", Object.assign({ className: heroCardClasses }, { children: [eyebrow && jsxRuntime.jsx("p", Object.assign({ className: eyebrowClass }, { children: eyebrow })), jsxRuntime.jsx(HeroCardTitle, { baseclass: baseClass, title: title, url: url }), datecopy && jsxRuntime.jsx("p", Object.assign({ className: datecopyClass }, { children: datecopy })), intro && jsxRuntime.jsx("p", Object.assign({ className: introClass }, { children: intro })), socialmedia && jsxRuntime.jsx(components_SocialMedia_SocialMedia, Object.assign({}, socialmedia, { theme: theme }))] })));
 };
 
 module.exports = HeroCard;

package/lib/cjs/components/Hero/index.js

@@ -8,8 +8,12 @@ require('../../hooks/useGlobalSettings.js');
 require('tslib');
 require('react');
 require('../../GlobalCtx-97e4b433.js');
-require('../Image/Image.js');
-require('../Credit/Credit.js');
+require('../Breadcrumb/Breadcrumb.js');
+require('../ContextMenu/ContextMenu.js');
+require('../Tooltip/Tooltip.js');
+require('react-dom');
+require('../SocialMedia/SocialMedia.js');
+require('../SocialMedia/index.js');
 
 
 

package/lib/cjs/components/LogoGrid/LogoGrid.js

@@ -0,0 +1,30 @@
+'use strict';
+
+var jsxRuntime = require('react/jsx-runtime');
+var classNames = require('classnames');
+var hooks_useGlobalSettings = require('../../hooks/useGlobalSettings.js');
+require('react');
+require('tslib');
+require('../../GlobalCtx-97e4b433.js');
+
+const LogoGridItem = ({ url, label, src }) => {
+    const { prefix } = hooks_useGlobalSettings();
+    const itemClass = `${prefix}--logo-grid--item`;
+    const itemLinkClass = `${prefix}--logo-grid--link`;
+    const gridItemClass = classNames(itemClass, {
+        [itemLinkClass]: !!url,
+    });
+    if (!url) {
+        return (jsxRuntime.jsx("div", Object.assign({ className: gridItemClass }, { children: jsxRuntime.jsx("img", { alt: label, src: src }) })));
+    }
+    return (jsxRuntime.jsx("a", Object.assign({ className: gridItemClass, href: url, target: "_blank", rel: "noopener noreferrer" }, { children: jsxRuntime.jsx("img", { alt: label, src: src }) })));
+};
+const LogoGrid = ({ logos, theme = "light" }) => {
+    const { prefix } = hooks_useGlobalSettings();
+    const baseClass = `${prefix}--logo-grid`;
+    const themeClass = `${baseClass}__theme__${theme}`;
+    const logoGridClass = classNames(baseClass, themeClass);
+    return (jsxRuntime.jsx("div", Object.assign({ className: logoGridClass }, { children: jsxRuntime.jsx("div", Object.assign({ className: `${baseClass}--logos` }, { children: logos.map((logo) => (jsxRuntime.jsx(LogoGridItem, Object.assign({}, logo)))) })) })));
+};
+
+module.exports = LogoGrid;

package/lib/cjs/components/LogoGrid/index.js

@@ -0,0 +1,13 @@
+'use strict';
+
+var components_LogoGrid_LogoGrid = require('./LogoGrid.js');
+require('react/jsx-runtime');
+require('classnames');
+require('../../hooks/useGlobalSettings.js');
+require('tslib');
+require('react');
+require('../../GlobalCtx-97e4b433.js');
+
+
+
+exports.LogoGrid = components_LogoGrid_LogoGrid;

package/lib/cjs/components/SocialMedia/SocialMedia.js

@@ -0,0 +1,25 @@
+'use strict';
+
+var jsxRuntime = require('react/jsx-runtime');
+var classNames = require('classnames');
+var hooks_useGlobalSettings = require('../../hooks/useGlobalSettings.js');
+require('react');
+require('tslib');
+require('../../GlobalCtx-97e4b433.js');
+
+const SocialMedia = ({ className, theme = "light", justify = "start", headline, icons, }) => {
+    const { prefix } = hooks_useGlobalSettings();
+    // Classes to be applied to the outer element
+    const baseClass = `${prefix}--social-media`;
+    const themeClass = `${baseClass}__theme__${theme}`;
+    const justifyClass = `${baseClass}__justify__${justify}`;
+    const classes = classNames(baseClass, themeClass, justifyClass, className);
+    // Classes to be applied to inner elements
+    const headlineClass = `${baseClass}--headline`;
+    const listClass = `${baseClass}--list`;
+    const listItemClass = `${listClass}--item`;
+    const iconClass = `${listItemClass}--icon`;
+    return (jsxRuntime.jsxs("div", Object.assign({ className: classes }, { children: [headline && jsxRuntime.jsx("h5", Object.assign({ className: headlineClass }, { children: headline })), jsxRuntime.jsx("ul", Object.assign({ className: listClass }, { children: icons.map((item) => (jsxRuntime.jsx("li", Object.assign({ className: listItemClass }, { children: jsxRuntime.jsx("a", Object.assign({ title: item.label, className: classNames(iconClass, `${iconClass}__${item.icon}`), href: item.url }, { children: item.label })) })))) }))] })));
+};
+
+module.exports = SocialMedia;

package/lib/cjs/components/SocialMedia/index.js

@@ -0,0 +1,57 @@
+'use strict';
+
+var components_SocialMedia_SocialMedia = require('./SocialMedia.js');
+require('react/jsx-runtime');
+require('classnames');
+require('../../hooks/useGlobalSettings.js');
+require('tslib');
+require('react');
+require('../../GlobalCtx-97e4b433.js');
+
+const defaultArgs = {
+    headline: "Follow us on social media",
+    theme: "light",
+    justify: "start",
+    icons: [
+        {
+            icon: "facebook",
+            url: "https://www.facebook.com/ilo.org",
+            label: "Facebook",
+        },
+        {
+            icon: "twitter",
+            url: "https://twitter.com/#!/ilo",
+            label: "Twitter",
+        },
+        {
+            icon: "instagram",
+            url: "https://www.instagram.com/ilo.org/",
+            label: "Instagram",
+        },
+        {
+            icon: "linkedin",
+            url: "https://www.linkedin.com/company/international-labour-organization-ilo",
+            label: "LinkedIn",
+        },
+        {
+            icon: "youtube",
+            url: "https://www.youtube.com/channel/UCQsVmhSa4X-G3lHlUtejzLA",
+            label: "YouTube",
+        },
+        {
+            icon: "tiktok",
+            url: "https://www.tiktok.com/@ilo",
+            label: "TikTok",
+        },
+        {
+            icon: "flickr",
+            url: "https://www.flickr.com/photos/ilopictures/albums",
+            label: "TikTok",
+        },
+    ],
+};
+Object.assign(Object.assign({}, defaultArgs), { theme: "dark" });
+Object.assign(Object.assign({}, defaultArgs), { justify: "center" });
+
+exports.SocialMedia = components_SocialMedia_SocialMedia;
+exports.defaultArgs = defaultArgs;

package/lib/cjs/components/index.js

@@ -38,6 +38,7 @@ var components_Checkbox_Checkbox = require('./Checkbox/Checkbox.js');
 var components_DatePicker_DatePicker = require('./DatePicker/DatePicker.js');
 var components_Form_Form = require('./Form/Form.js');
 var components_Hero_Hero = require('./Hero/Hero.js');
+require('./SocialMedia/index.js');
 var components_LinkList_LinkList = require('./LinkList/LinkList.js');
 var components_Pagination_Pagination = require('./Pagination/Pagination.js');
 var components_SearchField_SearchField = require('./SearchField/SearchField.js');
@@ -68,6 +69,7 @@ require('../css-9c93400b.js');
 require('../utils/transitionEndListener.js');
 require('../utils/triggerBrowserReflow.js');
 require('./Hero/HeroCard.js');
+require('./SocialMedia/SocialMedia.js');
 require('../VideoPlayer-d576de50.js');
 require('../utils/hoursMinutesSeconds.js');
 require('screenfull');

package/lib/cjs/index.js

@@ -38,6 +38,7 @@ var components_Checkbox_Checkbox = require('./components/Checkbox/Checkbox.js');
 var components_DatePicker_DatePicker = require('./components/DatePicker/DatePicker.js');
 var components_Form_Form = require('./components/Form/Form.js');
 var components_Hero_Hero = require('./components/Hero/Hero.js');
+require('./components/SocialMedia/index.js');
 var components_LinkList_LinkList = require('./components/LinkList/LinkList.js');
 var components_Pagination_Pagination = require('./components/Pagination/Pagination.js');
 var components_SearchField_SearchField = require('./components/SearchField/SearchField.js');
@@ -69,6 +70,7 @@ require('./utils/transitionEndListener.js');
 require('./utils/triggerBrowserReflow.js');
 require('@ilo-org/icons-react');
 require('./components/Hero/HeroCard.js');
+require('./components/SocialMedia/SocialMedia.js');
 require('./VideoPlayer-d576de50.js');
 require('./utils/hoursMinutesSeconds.js');
 require('screenfull');

package/lib/esm/components/Accordion/AccordionPanel.js

@@ -7,15 +7,15 @@ import { A as AccordionContext, a as AccordionItemContext } from '../../Accordio
 import '../../GlobalCtx-7fb23cfa.js';
 
 const AccordionPanel = (_a) => {
-    var { children, className, timeout = 600 } = _a, rest = __rest(_a, ["children", "className", "timeout"]);
+    var { children, className, scroll } = _a, rest = __rest(_a, ["children", "className", "scroll"]);
     const { activeItems } = useContext(AccordionContext);
     const { id } = useContext(AccordionItemContext);
     const [panelHeight, setPanelHeight] = useState(0);
     const open = activeItems.indexOf(id) > -1;
     const { prefix } = useGlobalSettings();
     const baseClass = `${prefix}--accordion--panel`;
-    const accordionaPanelClasses = classNames(className, {
-        [baseClass]: true,
+    const accordionaPanelClasses = classNames(className, baseClass, {
+        [`${baseClass}__scroll`]: scroll,
         [`${baseClass}--open`]: open,
     });
     const ref = useRef();

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

@@ -1,8 +1,10 @@
-import { jsxs, jsx, Fragment } from 'react/jsx-runtime';
+import { jsxs, jsx } from 'react/jsx-runtime';
 import useGlobalSettings from '../../hooks/useGlobalSettings.js';
 import classNames from 'classnames';
 import LinkList from '../LinkList/LinkList.js';
 import Button from '../Button/Button.js';
+import SocialMedia from '../SocialMedia/SocialMedia.js';
+import '../SocialMedia/index.js';
 import 'tslib';
 import 'react';
 import '../../GlobalCtx-7fb23cfa.js';
@@ -10,12 +12,11 @@ import '../Link/Link.js';
 import '../Icon/Icon.js';
 import '@ilo-org/icons-react';
 
-const Footer = ({ className, logo, tagline, subtagline, address, linkgroup, socials, subscribe, legal, secondarylinks, anchorlink, }) => {
+const Footer = ({ className, logo, tagline, subtagline, address, linkgroup, socialmedia, subscribe, legal, secondarylinks, anchorlink, }) => {
     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" }) }))), (socials || subscribe) && (jsxs("div", Object.assign({ className: "connect" }, { children: [socials && (jsxs(Fragment, { children: [jsx("h5", Object.assign({ className: "social--headline" }, { children: socials === null || socials === void 0 ? void 0 : socials.headline })), jsx("ul", Object.assign({ className: "social--links" }, { children: socials.links &&
-                                            socials.links.map((link, index) => (jsx("li", Object.assign({ className: "social--links--item" }, { children: jsx("a", Object.assign({ className: `social--links--link ${link.type}`, href: link.url }, { children: link.type })) }), index))) }))] })), 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` }, { 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 }))] }))] })));
 };
 
 export { Footer as default };

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

@@ -10,3 +10,5 @@ import '../Button/Button.js';
 import '../Link/Link.js';
 import '../Icon/Icon.js';
 import '@ilo-org/icons-react';
+import '../SocialMedia/SocialMedia.js';
+import '../SocialMedia/index.js';

package/lib/esm/components/Hero/Hero.js

@@ -1,23 +1,33 @@
-import { jsx, Fragment, jsxs } from 'react/jsx-runtime';
+import { jsxs, jsx } from 'react/jsx-runtime';
 import classNames from 'classnames';
 import useGlobalSettings from '../../hooks/useGlobalSettings.js';
 import HeroCard from './HeroCard.js';
-import Image from '../Image/Image.js';
+import Breadcrumb from '../Breadcrumb/Breadcrumb.js';
+import Tooltip from '../Tooltip/Tooltip.js';
 import 'tslib';
 import 'react';
 import '../../GlobalCtx-7fb23cfa.js';
-import '../Credit/Credit.js';
+import '../SocialMedia/SocialMedia.js';
+import '../SocialMedia/index.js';
+import '../ContextMenu/ContextMenu.js';
+import 'react-dom';
 
-const Hero = ({ className, image, heroCard, theme = "light", types, }) => {
+const HeroImage = ({ url, alt }) => {
     const { prefix } = useGlobalSettings();
-    const baseClass = `${prefix}--hero`;
-    const heroClasses = classNames(className, {
-        [baseClass]: true,
-        [`${baseClass}--${theme}`]: theme,
-        [`${baseClass}--${types}`]: types,
-        [`${baseClass}--image`]: image,
-    });
-    return (jsx(Fragment, { children: jsxs("div", Object.assign({ className: heroClasses }, { children: [image && jsx(Image, Object.assign({}, image)), jsx(HeroCard, Object.assign({}, heroCard))] })) }));
+    const imageClass = `${prefix}--card--image`;
+    // Sort the urls by breakpoint
+    const sortedUrls = url.sort((a, b) => a.breakpoint - b.breakpoint);
+    const defaultSrc = sortedUrls[sortedUrls.length - 1].src;
+    return (jsx("figure", Object.assign({ className: "hero--figure" }, { children: jsxs("picture", { children: [sortedUrls.map((img) => (jsx("source", { srcSet: img.src, media: `(min-width: ${img.breakpoint}px)` }, img.breakpoint))), jsx("img", { className: imageClass, src: defaultSrc, alt: alt })] }) })));
+};
+const Hero = ({ justify = "start", align = "baseline", cardSize = "small", posterSize = "large", image, breadcrumb, heroCard, caption, }) => {
+    const baseClass = "hero";
+    const justifyClass = `${baseClass}__card-justify__${justify}`;
+    const alignClass = `${baseClass}__card-align__${align}`;
+    const cardSizeClass = `${baseClass}__card-size__${cardSize}`;
+    const posterSizeClass = `${baseClass}__poster-size__${posterSize}`;
+    const heroClasses = classNames(baseClass, justifyClass, alignClass, cardSizeClass, posterSizeClass);
+    return (jsxs("div", Object.assign({ className: heroClasses }, { children: [image ? jsx(HeroImage, Object.assign({}, image)) : jsx("div", { className: "hero--figure" }), breadcrumb && (jsx("div", Object.assign({ className: "hero--breadcrumbs" }, { children: jsx("div", Object.assign({ className: "hero--breadcrumbs--wrapper" }, { children: jsx(Breadcrumb, Object.assign({}, breadcrumb)) })) }))), jsx("div", Object.assign({ className: "hero--card" }, { children: jsx(HeroCard, Object.assign({}, heroCard)) })), caption && (jsx("div", Object.assign({ className: "hero--caption" }, { children: jsx("div", Object.assign({ className: "hero--caption--wrapper" }, { children: jsx(Tooltip, Object.assign({}, caption)) })) })))] })));
 };
 
 export { Hero as default };

package/lib/esm/components/Hero/HeroCard.js

@@ -1,23 +1,33 @@
 import { jsxs, jsx } from 'react/jsx-runtime';
 import classNames from 'classnames';
 import useGlobalSettings from '../../hooks/useGlobalSettings.js';
+import SocialMedia from '../SocialMedia/SocialMedia.js';
+import '../SocialMedia/index.js';
 import 'tslib';
 import 'react';
 import '../../GlobalCtx-7fb23cfa.js';
 
-const HeroCard = ({ className, alignment, datecopy, eyebrow, intro, socials, title, theme = "light", types = "article", }) => {
+const HeroCardTitle = ({ baseclass, title, url }) => {
+    const titleClass = `${baseclass}--title`;
+    const linkClass = `${baseclass}--title-link`;
+    if (!url) {
+        return jsx("h1", Object.assign({ className: titleClass }, { children: title }));
+    }
+    return (jsx("a", Object.assign({ className: linkClass, href: url }, { children: jsx("h1", Object.assign({ className: titleClass }, { children: title })) })));
+};
+const HeroCard = ({ theme = "dark", background = "solid", cornercut = "true", eyebrow, title, url, datecopy, intro, socialmedia, }) => {
     const { prefix } = useGlobalSettings();
     const baseClass = `${prefix}--hero-card`;
-    const heroCardClasses = classNames(className, {
-        [baseClass]: true,
-        [`${baseClass}--${alignment}`]: alignment,
-        [`${baseClass}--${theme}`]: theme,
-        [`${baseClass}--${types}`]: types,
+    const themeClass = `${baseClass}__theme__${theme}`;
+    const backgroundClass = `${baseClass}__background__${background}`;
+    const cornercutClass = `${baseClass}__cornercut`;
+    const heroCardClasses = classNames(baseClass, themeClass, backgroundClass, {
+        [cornercutClass]: cornercut,
     });
-    return (jsxs("div", Object.assign({ className: heroCardClasses }, { children: [eyebrow && jsx("p", Object.assign({ className: `${baseClass}--eyebrow` }, { children: eyebrow })), title && jsx("h2", Object.assign({ className: `${baseClass}--title` }, { children: title })), datecopy && jsx("p", Object.assign({ className: `${baseClass}--datecopy` }, { children: datecopy })), intro && jsx("p", Object.assign({ className: `${baseClass}--intro` }, { children: intro })), jsx("ul", Object.assign({ className: `${baseClass}--list` }, { children: socials &&
-                    socials.map((item, index) => {
-                        return (jsx("li", Object.assign({ className: `${baseClass}--list--item` }, { children: jsx("a", Object.assign({ className: `${baseClass}--link icon icon--${item.icon}`, href: item.url, title: item.label }, { children: item.label })) }), index));
-                    }) }))] })));
+    const eyebrowClass = `${baseClass}--eyebrow`;
+    const datecopyClass = `${baseClass}--datecopy`;
+    const introClass = `${baseClass}--intro`;
+    return (jsxs("div", Object.assign({ className: heroCardClasses }, { children: [eyebrow && jsx("p", Object.assign({ className: eyebrowClass }, { children: eyebrow })), jsx(HeroCardTitle, { baseclass: baseClass, title: title, url: url }), datecopy && jsx("p", Object.assign({ className: datecopyClass }, { children: datecopy })), intro && jsx("p", Object.assign({ className: introClass }, { children: intro })), socialmedia && jsx(SocialMedia, Object.assign({}, socialmedia, { theme: theme }))] })));
 };
 
 export { HeroCard as default };

package/lib/esm/components/Hero/index.js

@@ -6,5 +6,9 @@ import '../../hooks/useGlobalSettings.js';
 import 'tslib';
 import 'react';
 import '../../GlobalCtx-7fb23cfa.js';
-import '../Image/Image.js';
-import '../Credit/Credit.js';
+import '../Breadcrumb/Breadcrumb.js';
+import '../ContextMenu/ContextMenu.js';
+import '../Tooltip/Tooltip.js';
+import 'react-dom';
+import '../SocialMedia/SocialMedia.js';
+import '../SocialMedia/index.js';

package/lib/esm/components/LogoGrid/LogoGrid.js

@@ -0,0 +1,28 @@
+import { jsx } from 'react/jsx-runtime';
+import classNames from 'classnames';
+import useGlobalSettings from '../../hooks/useGlobalSettings.js';
+import 'react';
+import 'tslib';
+import '../../GlobalCtx-7fb23cfa.js';
+
+const LogoGridItem = ({ url, label, src }) => {
+    const { prefix } = useGlobalSettings();
+    const itemClass = `${prefix}--logo-grid--item`;
+    const itemLinkClass = `${prefix}--logo-grid--link`;
+    const gridItemClass = classNames(itemClass, {
+        [itemLinkClass]: !!url,
+    });
+    if (!url) {
+        return (jsx("div", Object.assign({ className: gridItemClass }, { children: jsx("img", { alt: label, src: src }) })));
+    }
+    return (jsx("a", Object.assign({ className: gridItemClass, href: url, target: "_blank", rel: "noopener noreferrer" }, { children: jsx("img", { alt: label, src: src }) })));
+};
+const LogoGrid = ({ logos, theme = "light" }) => {
+    const { prefix } = useGlobalSettings();
+    const baseClass = `${prefix}--logo-grid`;
+    const themeClass = `${baseClass}__theme__${theme}`;
+    const logoGridClass = classNames(baseClass, themeClass);
+    return (jsx("div", Object.assign({ className: logoGridClass }, { children: jsx("div", Object.assign({ className: `${baseClass}--logos` }, { children: logos.map((logo) => (jsx(LogoGridItem, Object.assign({}, logo)))) })) })));
+};
+
+export { LogoGrid as default };

package/lib/esm/components/LogoGrid/index.js

@@ -0,0 +1,7 @@
+export { default as LogoGrid } from './LogoGrid.js';
+import 'react/jsx-runtime';
+import 'classnames';
+import '../../hooks/useGlobalSettings.js';
+import 'tslib';
+import 'react';
+import '../../GlobalCtx-7fb23cfa.js';

package/lib/esm/components/SocialMedia/SocialMedia.js

@@ -0,0 +1,23 @@
+import { jsxs, jsx } from 'react/jsx-runtime';
+import classNames from 'classnames';
+import useGlobalSettings from '../../hooks/useGlobalSettings.js';
+import 'react';
+import 'tslib';
+import '../../GlobalCtx-7fb23cfa.js';
+
+const SocialMedia = ({ className, theme = "light", justify = "start", headline, icons, }) => {
+    const { prefix } = useGlobalSettings();
+    // Classes to be applied to the outer element
+    const baseClass = `${prefix}--social-media`;
+    const themeClass = `${baseClass}__theme__${theme}`;
+    const justifyClass = `${baseClass}__justify__${justify}`;
+    const classes = classNames(baseClass, themeClass, justifyClass, className);
+    // Classes to be applied to inner elements
+    const headlineClass = `${baseClass}--headline`;
+    const listClass = `${baseClass}--list`;
+    const listItemClass = `${listClass}--item`;
+    const iconClass = `${listItemClass}--icon`;
+    return (jsxs("div", Object.assign({ className: classes }, { children: [headline && jsx("h5", Object.assign({ className: headlineClass }, { children: headline })), jsx("ul", Object.assign({ className: listClass }, { children: icons.map((item) => (jsx("li", Object.assign({ className: listItemClass }, { children: jsx("a", Object.assign({ title: item.label, className: classNames(iconClass, `${iconClass}__${item.icon}`), href: item.url }, { children: item.label })) })))) }))] })));
+};
+
+export { SocialMedia as default };