@ilo-org/react 0.1.2 → 0.2.0

package/CHANGELOG.md

@@ -1,5 +1,19 @@
 # @ilo-org/react
 
+## 0.2.0
+
+### Minor Changes
+
+- 3a19726f2: Add LocalNav and Footer components
+
+### Patch Changes
+
+- Updated dependencies [2f60e9d92]
+- Updated dependencies [c9413b943]
+  - @ilo-org/styles@0.1.18
+  - @ilo-org/brand-assets@0.1.0
+  - @ilo-org/utils@0.0.11
+
 ## 0.1.2
 
 ### Patch Changes

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

@@ -0,0 +1,23 @@
+'use strict';
+
+var jsxRuntime = require('react/jsx-runtime');
+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');
+require('tslib');
+require('react');
+require('../../GlobalCtx-97e4b433.js');
+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 { 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 }))] }))] })));
+};
+
+module.exports = Footer;

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

@@ -0,0 +1,18 @@
+'use strict';
+
+var components_Footer_Footer = require('./Footer.js');
+require('react/jsx-runtime');
+require('../../hooks/useGlobalSettings.js');
+require('tslib');
+require('react');
+require('../../GlobalCtx-97e4b433.js');
+require('classnames');
+require('../LinkList/LinkList.js');
+require('../Button/Button.js');
+require('../Link/Link.js');
+require('../Icon/Icon.js');
+require('@ilo-org/icons-react');
+
+
+
+exports.Footer = components_Footer_Footer;

package/lib/cjs/components/LocalNav/LocalNav.js

@@ -0,0 +1,102 @@
+'use strict';
+
+var jsxRuntime = require('react/jsx-runtime');
+var require$$0 = require('react');
+var hooks_useGlobalSettings = require('../../hooks/useGlobalSettings.js');
+var components_ContextMenu_ContextMenu = require('../ContextMenu/ContextMenu.js');
+var classNames = require('classnames');
+require('tslib');
+require('../../GlobalCtx-97e4b433.js');
+
+var brand = {
+	"ilo-blue": {
+		value: "rgba(30, 45, 190, 1)"
+	},
+	"ilo-red": {
+		value: "rgba(250, 60, 75, 1)"
+	},
+	"ilo-dark-blue": {
+		value: "rgba(35, 0, 80, 1)"
+	},
+	"ilo-yellow": {
+		value: "rgba(255, 205, 45, 1)"
+	},
+	"ilo-green": {
+		value: "rgba(140, 225, 100, 1)"
+	},
+	"ilo-purple": {
+		value: "rgba(150, 10, 85, 1)"
+	},
+	"ilo-purple-light": {
+		value: "rgba(116, 96, 145, 1)"
+	},
+	"ilo-turquoise": {
+		value: "rgba(5, 210, 210, 1)"
+	},
+	"ilo-dark-red": {
+		value: "rgba(200, 48, 60, 1)"
+	},
+	"ilo-lighter-blue": {
+		value: "rgba(235, 245, 253, 1)"
+	},
+	"ilo-light-blue": {
+		value: "rgba(235, 245, 253, 1)"
+	},
+	"ilo-grey-light-alternate": {
+		value: "rgba(246, 247, 248, 1)"
+	},
+	"ilo-grey-light": {
+		value: "rgba(237, 240, 242, 1)"
+	},
+	"ilo-grey-ui": {
+		value: "rgba(184, 196, 204, 1)"
+	},
+	"ilo-grey-accessible": {
+		value: "rgba(109, 109, 109, 1)"
+	},
+	"ilo-grey-charcoal": {
+		value: "rgba(45, 45, 45, 1)"
+	},
+	"ilo-black": {
+		value: "rgba(45, 45, 45, 1)"
+	},
+	"ilo-white": {
+		value: "rgba(255, 255, 255, 1)"
+	},
+	"ilo-ramp-blue": {
+		value: "rgba(190, 220, 250, 1)"
+	},
+	"ilo-ramp-red": {
+		value: "rgba(254, 216, 219, 1)"
+	},
+	"ilo-ramp-green": {
+		value: "rgba(232, 249, 224, 1)"
+	},
+	"ilo-ramp-yellow": {
+		value: "rgba(255, 245, 200, 1)"
+	}
+};
+
+const LocalNav = ({ background, logo, siteurl, primarynav, mainlink, menucloselabel, languagelabel, languagecontextmenu, }) => {
+    const { prefix } = hooks_useGlobalSettings();
+    const [toggleMenuOpen, setMenuToggleOpen] = require$$0.useState(false);
+    const [toggleLanguageOpen, setLanguageToggleOpen] = require$$0.useState(false);
+    const baseClass = `${prefix}--header`;
+    const localNavClasses = classNames(baseClass, `${baseClass}--local`, {
+        [`${prefix}--mobile--open`]: toggleMenuOpen,
+        [`${prefix}--select--open`]: toggleLanguageOpen,
+    });
+    const bg = background ? background : brand["ilo-dark-blue"].value;
+    const handleMenuToggle = () => {
+        setMenuToggleOpen(!toggleMenuOpen);
+    };
+    const handleLanguageToggle = () => {
+        setLanguageToggleOpen(!toggleLanguageOpen);
+    };
+    return (jsxRuntime.jsx("header", Object.assign({ className: localNavClasses }, { children: jsxRuntime.jsxs("div", Object.assign({ className: `${baseClass}--utility-bar ${baseClass}--utility-bar--local`, style: { background: bg } }, { children: [jsxRuntime.jsxs("nav", Object.assign({ className: `${prefix}--nav--local` }, { children: [jsxRuntime.jsx("div", Object.assign({ className: `${prefix}--nav--local--logo-wrapper` }, { children: jsxRuntime.jsx("a", Object.assign({ href: siteurl, className: `${prefix}--nav--local--logo-link` }, { children: jsxRuntime.jsx("img", { src: logo, alt: "ILO Logo", className: `${prefix}--nav--local--logo` }) })) })), jsxRuntime.jsx("ul", Object.assign({ className: `${prefix}--nav--local--set` }, { children: (primarynav === null || primarynav === void 0 ? void 0 : primarynav.items) &&
+                                primarynav.items.map((item, index) => (jsxRuntime.jsx("li", Object.assign({ className: `${prefix}--nav--local--item` }, { children: jsxRuntime.jsx("a", Object.assign({ href: item.url, className: `${prefix}--nav--local--link` }, { children: jsxRuntime.jsx("span", { children: item.label }) })) }), index))) }))] })), jsxRuntime.jsx("div", Object.assign({ className: `${prefix}--language-switcher` }, { children: jsxRuntime.jsxs("div", Object.assign({ className: `${prefix}--language-switcher--wrap` }, { children: [mainlink && (jsxRuntime.jsx("span", Object.assign({ className: `${prefix}--language-switcher--link--wrap` }, { children: jsxRuntime.jsx("a", Object.assign({ href: mainlink.url, className: `${prefix}--language-switcher--link` }, { children: mainlink.label })) }))), jsxRuntime.jsx("button", Object.assign({ className: `${prefix}--language-switcher--button`, type: "button" }, { children: languagelabel })), jsxRuntime.jsx(components_ContextMenu_ContextMenu, { links: languagecontextmenu === null || languagecontextmenu === void 0 ? void 0 : languagecontextmenu.links })] })) })), jsxRuntime.jsx("button", Object.assign({ className: `${baseClass}--menu`, onClick: handleMenuToggle }, { children: "Menu" })), jsxRuntime.jsx("div", Object.assign({ className: `${baseClass}--navigation` }, { children: jsxRuntime.jsxs("div", Object.assign({ className: `${baseClass}--inner` }, { children: [jsxRuntime.jsxs("div", Object.assign({ className: `${prefix}--mobile--nav` }, { children: [jsxRuntime.jsxs("div", Object.assign({ className: `${prefix}--mobile--nav--logo` }, { children: [jsxRuntime.jsx("a", Object.assign({ href: siteurl, className: `${baseClass}--logo-link` }, { children: jsxRuntime.jsx("img", { className: `${baseClass}--logo`, src: logo, alt: "ILO Logo" }) })), jsxRuntime.jsx("button", Object.assign({ className: `${baseClass}--menu--close`, onClick: handleMenuToggle }, { children: menucloselabel }))] })), jsxRuntime.jsx("div", Object.assign({ className: `${prefix}--mobile--nav--language--switcher` }, { children: jsxRuntime.jsx("button", Object.assign({ className: `${prefix}--mobile--nav--language--switcher--button`, onClick: handleLanguageToggle, type: "button" }, { children: languagelabel })) })), jsxRuntime.jsx("div", Object.assign({ className: `${prefix}--mobile--nav--language--select` }, { children: jsxRuntime.jsxs("div", Object.assign({ className: `${baseClass}--inner` }, { children: [jsxRuntime.jsxs("div", Object.assign({ className: `${prefix}--mobile--subnav--menu` }, { children: [jsxRuntime.jsx("button", { className: `${prefix}--mobile--subnav--back`, onClick: handleLanguageToggle, type: "button" }), jsxRuntime.jsx("button", Object.assign({ className: `${baseClass}--menu--close`, onClick: handleMenuToggle }, { children: "Close" })), jsxRuntime.jsx("h6", Object.assign({ className: `${prefix}--mobile--subnav--label` }, { children: languagelabel }))] })), jsxRuntime.jsx("ul", Object.assign({ className: `${prefix}--nav--set` }, { children: (languagecontextmenu === null || languagecontextmenu === void 0 ? void 0 : languagecontextmenu.links) &&
+                                                        languagecontextmenu.links.map((item, index) => (jsxRuntime.jsx("li", Object.assign({ className: `${prefix}--nav--items` }, { children: jsxRuntime.jsx("a", Object.assign({ href: item.url, className: `${prefix}--nav--link ${prefix}--nav--language` }, { children: item.label })) }), index))) }))] })) }))] })), jsxRuntime.jsxs("nav", Object.assign({ className: `${prefix}--nav`, "aria-labelledby": "primary-navigation" }, { children: [jsxRuntime.jsx("h2", Object.assign({ className: `${prefix}--nav--label`, id: "primary-navigation" }, { children: primarynav === null || primarynav === void 0 ? void 0 : primarynav.navlabel })), jsxRuntime.jsx("ul", Object.assign({ className: `${prefix}--nav--set` }, { children: (primarynav === null || primarynav === void 0 ? void 0 : primarynav.items) &&
+                                            primarynav.items.map((item, index) => (jsxRuntime.jsx("li", Object.assign({ className: `${prefix}--nav--items` }, { children: jsxRuntime.jsx("a", Object.assign({ href: item.url, className: `${prefix}--nav--link` }, { children: item.label })) }), index))) }))] }))] })) }))] })) })));
+};
+
+module.exports = LocalNav;

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

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

package/lib/cjs/components/index.js

@@ -50,6 +50,8 @@ var components_List_List = require('./List/List.js');
 require('../ListCtx-7db7fe04.js');
 var components_Profile_Profile = require('./Profile/Profile.js');
 var components_TableOfContents_TableOfContents = require('./TableOfContents/TableOfContents.js');
+var components_Footer_Footer = require('./Footer/Footer.js');
+var components_LocalNav_LocalNav = require('./LocalNav/LocalNav.js');
 require('../hooks/useGlobalSettings.js');
 require('../AccordionCtx-fe08ff45.js');
 require('@ilo-org/utils');
@@ -113,3 +115,5 @@ exports.Icon = components_Icon_Icon;
 exports.List = components_List_List;
 exports.Profile = components_Profile_Profile;
 exports.TableOfContents = components_TableOfContents_TableOfContents;
+exports.Footer = components_Footer_Footer;
+exports.LocalNav = components_LocalNav_LocalNav;

package/lib/cjs/index.js

@@ -50,6 +50,8 @@ var components_List_List = require('./components/List/List.js');
 require('./ListCtx-7db7fe04.js');
 var components_Profile_Profile = require('./components/Profile/Profile.js');
 var components_TableOfContents_TableOfContents = require('./components/TableOfContents/TableOfContents.js');
+var components_Footer_Footer = require('./components/Footer/Footer.js');
+var components_LocalNav_LocalNav = require('./components/LocalNav/LocalNav.js');
 require('./hooks/useGlobalSettings.js');
 require('./AccordionCtx-fe08ff45.js');
 require('@ilo-org/utils');
@@ -113,3 +115,5 @@ exports.Icon = components_Icon_Icon;
 exports.List = components_List_List;
 exports.Profile = components_Profile_Profile;
 exports.TableOfContents = components_TableOfContents_TableOfContents;
+exports.Footer = components_Footer_Footer;
+exports.LocalNav = components_LocalNav_LocalNav;

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

@@ -0,0 +1,21 @@
+import { jsxs, jsx, Fragment } 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 'tslib';
+import 'react';
+import '../../GlobalCtx-7fb23cfa.js';
+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 { 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 }))] }))] })));
+};
+
+export { Footer as default };

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

@@ -0,0 +1,12 @@
+export { default as Footer } from './Footer.js';
+import 'react/jsx-runtime';
+import '../../hooks/useGlobalSettings.js';
+import 'tslib';
+import 'react';
+import '../../GlobalCtx-7fb23cfa.js';
+import 'classnames';
+import '../LinkList/LinkList.js';
+import '../Button/Button.js';
+import '../Link/Link.js';
+import '../Icon/Icon.js';
+import '@ilo-org/icons-react';

package/lib/esm/components/LocalNav/LocalNav.js

@@ -0,0 +1,100 @@
+import { jsx, jsxs } from 'react/jsx-runtime';
+import { useState } from 'react';
+import useGlobalSettings from '../../hooks/useGlobalSettings.js';
+import ContextMenu from '../ContextMenu/ContextMenu.js';
+import classNames from 'classnames';
+import 'tslib';
+import '../../GlobalCtx-7fb23cfa.js';
+
+var brand = {
+	"ilo-blue": {
+		value: "rgba(30, 45, 190, 1)"
+	},
+	"ilo-red": {
+		value: "rgba(250, 60, 75, 1)"
+	},
+	"ilo-dark-blue": {
+		value: "rgba(35, 0, 80, 1)"
+	},
+	"ilo-yellow": {
+		value: "rgba(255, 205, 45, 1)"
+	},
+	"ilo-green": {
+		value: "rgba(140, 225, 100, 1)"
+	},
+	"ilo-purple": {
+		value: "rgba(150, 10, 85, 1)"
+	},
+	"ilo-purple-light": {
+		value: "rgba(116, 96, 145, 1)"
+	},
+	"ilo-turquoise": {
+		value: "rgba(5, 210, 210, 1)"
+	},
+	"ilo-dark-red": {
+		value: "rgba(200, 48, 60, 1)"
+	},
+	"ilo-lighter-blue": {
+		value: "rgba(235, 245, 253, 1)"
+	},
+	"ilo-light-blue": {
+		value: "rgba(235, 245, 253, 1)"
+	},
+	"ilo-grey-light-alternate": {
+		value: "rgba(246, 247, 248, 1)"
+	},
+	"ilo-grey-light": {
+		value: "rgba(237, 240, 242, 1)"
+	},
+	"ilo-grey-ui": {
+		value: "rgba(184, 196, 204, 1)"
+	},
+	"ilo-grey-accessible": {
+		value: "rgba(109, 109, 109, 1)"
+	},
+	"ilo-grey-charcoal": {
+		value: "rgba(45, 45, 45, 1)"
+	},
+	"ilo-black": {
+		value: "rgba(45, 45, 45, 1)"
+	},
+	"ilo-white": {
+		value: "rgba(255, 255, 255, 1)"
+	},
+	"ilo-ramp-blue": {
+		value: "rgba(190, 220, 250, 1)"
+	},
+	"ilo-ramp-red": {
+		value: "rgba(254, 216, 219, 1)"
+	},
+	"ilo-ramp-green": {
+		value: "rgba(232, 249, 224, 1)"
+	},
+	"ilo-ramp-yellow": {
+		value: "rgba(255, 245, 200, 1)"
+	}
+};
+
+const LocalNav = ({ background, logo, siteurl, primarynav, mainlink, menucloselabel, languagelabel, languagecontextmenu, }) => {
+    const { prefix } = useGlobalSettings();
+    const [toggleMenuOpen, setMenuToggleOpen] = useState(false);
+    const [toggleLanguageOpen, setLanguageToggleOpen] = useState(false);
+    const baseClass = `${prefix}--header`;
+    const localNavClasses = classNames(baseClass, `${baseClass}--local`, {
+        [`${prefix}--mobile--open`]: toggleMenuOpen,
+        [`${prefix}--select--open`]: toggleLanguageOpen,
+    });
+    const bg = background ? background : brand["ilo-dark-blue"].value;
+    const handleMenuToggle = () => {
+        setMenuToggleOpen(!toggleMenuOpen);
+    };
+    const handleLanguageToggle = () => {
+        setLanguageToggleOpen(!toggleLanguageOpen);
+    };
+    return (jsx("header", Object.assign({ className: localNavClasses }, { children: jsxs("div", Object.assign({ className: `${baseClass}--utility-bar ${baseClass}--utility-bar--local`, style: { background: bg } }, { children: [jsxs("nav", Object.assign({ className: `${prefix}--nav--local` }, { children: [jsx("div", Object.assign({ className: `${prefix}--nav--local--logo-wrapper` }, { children: jsx("a", Object.assign({ href: siteurl, className: `${prefix}--nav--local--logo-link` }, { children: jsx("img", { src: logo, alt: "ILO Logo", className: `${prefix}--nav--local--logo` }) })) })), jsx("ul", Object.assign({ className: `${prefix}--nav--local--set` }, { children: (primarynav === null || primarynav === void 0 ? void 0 : primarynav.items) &&
+                                primarynav.items.map((item, index) => (jsx("li", Object.assign({ className: `${prefix}--nav--local--item` }, { children: jsx("a", Object.assign({ href: item.url, className: `${prefix}--nav--local--link` }, { children: jsx("span", { children: item.label }) })) }), index))) }))] })), jsx("div", Object.assign({ className: `${prefix}--language-switcher` }, { children: jsxs("div", Object.assign({ className: `${prefix}--language-switcher--wrap` }, { children: [mainlink && (jsx("span", Object.assign({ className: `${prefix}--language-switcher--link--wrap` }, { children: jsx("a", Object.assign({ href: mainlink.url, className: `${prefix}--language-switcher--link` }, { children: mainlink.label })) }))), 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("button", Object.assign({ className: `${baseClass}--menu`, onClick: handleMenuToggle }, { children: "Menu" })), jsx("div", Object.assign({ className: `${baseClass}--navigation` }, { children: jsxs("div", Object.assign({ className: `${baseClass}--inner` }, { children: [jsxs("div", Object.assign({ className: `${prefix}--mobile--nav` }, { children: [jsxs("div", Object.assign({ className: `${prefix}--mobile--nav--logo` }, { children: [jsx("a", Object.assign({ href: siteurl, className: `${baseClass}--logo-link` }, { children: jsx("img", { className: `${baseClass}--logo`, src: logo, alt: "ILO Logo" }) })), jsx("button", Object.assign({ className: `${baseClass}--menu--close`, onClick: handleMenuToggle }, { children: menucloselabel }))] })), jsx("div", Object.assign({ className: `${prefix}--mobile--nav--language--switcher` }, { children: jsx("button", Object.assign({ className: `${prefix}--mobile--nav--language--switcher--button`, onClick: handleLanguageToggle, type: "button" }, { children: languagelabel })) })), jsx("div", Object.assign({ className: `${prefix}--mobile--nav--language--select` }, { children: jsxs("div", Object.assign({ className: `${baseClass}--inner` }, { children: [jsxs("div", Object.assign({ className: `${prefix}--mobile--subnav--menu` }, { children: [jsx("button", { className: `${prefix}--mobile--subnav--back`, onClick: handleLanguageToggle, type: "button" }), jsx("button", Object.assign({ className: `${baseClass}--menu--close`, onClick: handleMenuToggle }, { children: "Close" })), 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 })), jsx("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))) }))] }))] })) }))] })) })));
+};
+
+export { LocalNav as default };

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

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

package/lib/esm/components/index.js

@@ -48,6 +48,8 @@ export { default as List } from './List/List.js';
 import '../ListCtx-da435fdf.js';
 export { default as Profile } from './Profile/Profile.js';
 export { default as TableOfContents } from './TableOfContents/TableOfContents.js';
+export { default as Footer } from './Footer/Footer.js';
+export { default as LocalNav } from './LocalNav/LocalNav.js';
 import '../hooks/useGlobalSettings.js';
 import '../AccordionCtx-8c051900.js';
 import '@ilo-org/utils';

package/lib/esm/index.js

@@ -48,6 +48,8 @@ export { default as List } from './components/List/List.js';
 import './ListCtx-da435fdf.js';
 export { default as Profile } from './components/Profile/Profile.js';
 export { default as TableOfContents } from './components/TableOfContents/TableOfContents.js';
+export { default as Footer } from './components/Footer/Footer.js';
+export { default as LocalNav } from './components/LocalNav/LocalNav.js';
 import './hooks/useGlobalSettings.js';
 import './AccordionCtx-8c051900.js';
 import '@ilo-org/utils';

package/lib/types/react/src/components/ContextMenu/ContextMenu.props.d.ts

@@ -1,4 +1,4 @@
-interface LinkProps {
+export interface LinkProps {
     /**
      * Specify whether this link marks the end of a section
      */
@@ -22,4 +22,3 @@ export interface ContextMenuProps {
      */
     links?: Required<Array<LinkProps>>;
 }
-export {};

package/lib/types/react/src/components/Footer/Footer.d.ts

@@ -0,0 +1,4 @@
+import { FC } from "react";
+import { FooterProps } from "./Footer.props";
+declare const Footer: FC<FooterProps>;
+export default Footer;

package/lib/types/react/src/components/Footer/Footer.props.d.ts

@@ -0,0 +1,70 @@
+import { LinkGroupProps } from "../LinkList/LinkList.props";
+import { LinkProps } from "../LinkList/LinkList.props";
+import { SocialTypes } from "../../types";
+export interface FooterProps {
+    /**
+     * Specify an optional className to be added to your Footer.
+     */
+    className?: string;
+    /**
+     * Props for the logo of the Footer
+     */
+    logo?: string;
+    /**
+     * Specify the tagline for the Footer
+     */
+    tagline?: string;
+    /**
+     * Specify the subtagline for the Footer
+     */
+    subtagline?: string;
+    /**
+     * Specify the address for the Footer, in multiple lines
+     */
+    address?: string[];
+    /**
+     * Specify the linkgroup for the Footer's links
+     */
+    linkgroup?: Required<Array<LinkGroupProps>>;
+    /**
+     * Specify the links to be displayed in this link group
+     */
+    socials?: FooterSocialProps;
+    /**
+     * Specify the legal statement for the Footer
+     */
+    subscribe?: LinkProps;
+    /**
+     * Specify the legal statement for the Footer
+     */
+    legal?: string;
+    /**
+     * Specify the secondary links for the Footer
+     */
+    secondarylinks?: LinkProps[];
+    /**
+     * Specify the anchor link for the Footer
+     */
+    anchorlink?: LinkProps;
+}
+interface FooterSocialProps {
+    /**
+     * Specify the headline for social links
+     */
+    headline?: Required<string>;
+    /**
+     * Specify the social links
+     */
+    links?: Required<SocialLinkProps>[];
+}
+interface SocialLinkProps {
+    /**
+     * Specify the type for social link
+     */
+    type?: Required<SocialTypes>;
+    /**
+     * Specify the url for social link
+     */
+    url?: Required<string>;
+}
+export {};

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

@@ -0,0 +1 @@
+export { default as Footer } from "./Footer";

package/lib/types/react/src/components/LinkList/LinkList.props.d.ts

@@ -1,5 +1,5 @@
 import { LinkListThemes } from "../../types";
-interface LinkProps {
+export interface LinkProps {
     /**
      * Specify if this link should indent and have a triangle icon
      */
@@ -13,7 +13,7 @@ interface LinkProps {
      */
     url?: Required<string>;
 }
-interface LinkGroupProps {
+export interface LinkGroupProps {
     /**
      * Specify an optional headline for this link group
      */
@@ -41,4 +41,3 @@ export interface LinkListProps {
      */
     theme?: Required<LinkListThemes>;
 }
-export {};

package/lib/types/react/src/components/LocalNav/LocalNav.d.ts

@@ -0,0 +1,4 @@
+import { FC } from "react";
+import { LocalNavProps } from "./LocalNav.props";
+declare const LocalNav: FC<LocalNavProps>;
+export default LocalNav;

package/lib/types/react/src/components/LocalNav/LocalNav.props.d.ts

@@ -0,0 +1,50 @@
+import { LinkProps, ContextMenuProps } from "../ContextMenu/ContextMenu.props";
+export interface LocalNavProps {
+    /**
+     * Props for the background colour of the LocalNav
+     */
+    background?: string;
+    /**
+     * Props for the logo of the LocalNav
+     */
+    logo?: Required<string>;
+    /**
+     * Props for the home url of the LocalNav
+     */
+    siteurl?: Required<string>;
+    /**
+     * Specify the primary items for the LocalNav
+     */
+    primarynav?: Required<PrimaryNavProps>;
+    /**
+     * Specify the main link for the LocalNav
+     */
+    mainlink?: LinkProps;
+    /**
+     * Specify the menu close label for the LocalNav
+     */
+    menucloselabel?: string;
+    /**
+     * Specify the language label for the LocalNav
+     */
+    languagelabel?: string;
+    /**
+     * Specify the language context menu for the LocalNav
+     */
+    languagecontextmenu?: ContextMenuProps;
+}
+interface PrimaryNavProps {
+    /**
+     * Specify the label for local nav
+     */
+    navlabel?: Required<string>;
+    /**
+     * Specify the close label for mobile local nav
+     */
+    mobilecloselabel?: Required<string>;
+    /**
+     * Specify the social links
+     */
+    items?: Required<Array<LinkProps>>;
+}
+export {};

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

@@ -0,0 +1 @@
+export { default as LocalNav } from "./LocalNav";

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

@@ -37,3 +37,5 @@ export { Icon } from "./Icon";
 export { List } from "./List";
 export { Profile } from "./Profile";
 export { TableOfContents } from "./TableOfContents";
+export { Footer } from "./Footer";
+export { LocalNav } from "./LocalNav";

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

@@ -24,3 +24,4 @@ export type NotificationTypes = "error" | "info" | "success" | "warning";
 export type PositionTypes = "top" | "bottom" | "left" | "right";
 export type SizeTypes = "small" | "medium" | "large";
 export type TagTypes = "anchor" | "display" | "button";
+export type SocialTypes = "instagram" | "facebook" | "twitter" | "youtube";

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ilo-org/react",
-  "version": "0.1.2",
+  "version": "0.2.0",
   "description": "React components for the ILO's Design System",
   "keywords": [
     "ui_patterns",
@@ -74,7 +74,7 @@
     "@ilo-org/brand-assets": "0.1.0",
     "@ilo-org/fonts": "0.1.0",
     "@ilo-org/icons-react": "0.0.18",
-    "@ilo-org/styles": "0.1.17",
+    "@ilo-org/styles": "0.1.18",
     "@ilo-org/themes": "0.1.15",
     "@ilo-org/utils": "0.0.11"
   },
@@ -134,8 +134,8 @@
     "tslib": "^2.3.1",
     "typescript": "4.9.3",
     "webpack": "^5.68.0",
-    "@ilo-org/eslint-config": "0.0.2",
-    "@ilo-org/prettier-config": "0.0.1",
+    "@ilo-org/eslint-config": "0.0.3",
+    "@ilo-org/prettier-config": "0.0.2",
     "@ilo-org/typescript-config": "0.0.1"
   },
   "peerDependencies": {

package/src/components/ContextMenu/ContextMenu.props.ts

@@ -1,4 +1,4 @@
-interface LinkProps {
+export interface LinkProps {
   /**
    * Specify whether this link marks the end of a section
    */

package/src/components/Footer/Footer.args.ts

@@ -0,0 +1,105 @@
+import { FooterProps } from "./Footer.props";
+import ilo_logo_white from "@ilo-org/brand-assets/logo_en_horizontal_white.svg";
+
+const basic: FooterProps = {
+  className: "footer",
+  logo: ilo_logo_white,
+  tagline: "Advancing social justice, promoting decent work",
+  subtagline: "ILO is a specialized agency of the United Nations",
+  address: [
+    "International Labour Organization",
+    "4 route des Morillons",
+    "CH-1211 Genève 22",
+    "Switzerland",
+  ],
+  linkgroup: [
+    {
+      links: [
+        {
+          label: "Link One",
+          url: "https://www.ilo.org",
+        },
+        {
+          label: "Link Two",
+          url: "https://www.ilo.org",
+        },
+        {
+          label: "Link Three",
+          url: "https://www.ilo.org",
+        },
+        {
+          label: "Link Four",
+          url: "https://www.ilo.org",
+        },
+        {
+          label: "Link Five",
+          url: "https://www.ilo.org",
+        },
+        {
+          label: "Link Six",
+          url: "https://www.ilo.org",
+        },
+      ],
+    },
+  ],
+  socials: {
+    headline: "Social Links Headline",
+    links: [
+      {
+        type: "instagram",
+        url: "https://www.instagram.com/iloinfo/",
+      },
+      {
+        type: "facebook",
+        url: "https://www.facebook.com/ILO.ORG/",
+      },
+      {
+        type: "twitter",
+        url: "https://twitter.com/ILO/",
+      },
+      {
+        type: "youtube",
+        url: "https://youtube.com/@ILO/featured/",
+      },
+    ],
+  },
+  subscribe: {
+    label: "Subscribe",
+    url: "https://www.ilo.org",
+  },
+  legal: "© 1996-2023 International Labour Organization (ILO)",
+  secondarylinks: [
+    {
+      label: "Link One",
+      url: "https://www.ilo.org",
+    },
+    {
+      label: "Link Two",
+      url: "https://www.ilo.org",
+    },
+    {
+      label: "Link Three",
+      url: "https://www.ilo.org",
+    },
+    {
+      label: "Link Four",
+      url: "https://www.ilo.org",
+    },
+    {
+      label: "Link Five",
+      url: "https://www.ilo.org",
+    },
+    {
+      label: "Link Six",
+      url: "https://www.ilo.org",
+    },
+  ],
+  anchorlink: {
+    label: "Back to Top",
+    url: "#anchor",
+  },
+};
+
+const FooterArgs = { basic };
+
+export default FooterArgs;

package/src/components/Footer/Footer.props.ts

@@ -0,0 +1,84 @@
+import { LinkGroupProps } from "../LinkList/LinkList.props";
+import { LinkProps } from "../LinkList/LinkList.props";
+import { SocialTypes } from "../../types";
+
+export interface FooterProps {
+  /**
+   * Specify an optional className to be added to your Footer.
+   */
+  className?: string;
+
+  /**
+   * Props for the logo of the Footer
+   */
+  logo?: string;
+
+  /**
+   * Specify the tagline for the Footer
+   */
+  tagline?: string;
+
+  /**
+   * Specify the subtagline for the Footer
+   */
+  subtagline?: string;
+
+  /**
+   * Specify the address for the Footer, in multiple lines
+   */
+  address?: string[];
+
+  /**
+   * Specify the linkgroup for the Footer's links
+   */
+  linkgroup?: Required<Array<LinkGroupProps>>;
+
+  /**
+   * Specify the links to be displayed in this link group
+   */
+  socials?: FooterSocialProps;
+
+  /**
+   * Specify the legal statement for the Footer
+   */
+  subscribe?: LinkProps;
+
+  /**
+   * Specify the legal statement for the Footer
+   */
+  legal?: string;
+
+  /**
+   * Specify the secondary links for the Footer
+   */
+  secondarylinks?: LinkProps[];
+
+  /**
+   * Specify the anchor link for the Footer
+   */
+  anchorlink?: LinkProps;
+}
+
+interface FooterSocialProps {
+  /**
+   * Specify the headline for social links
+   */
+  headline?: Required<string>;
+
+  /**
+   * Specify the social links
+   */
+  links?: Required<SocialLinkProps>[];
+}
+
+interface SocialLinkProps {
+  /**
+   * Specify the type for social link
+   */
+  type?: Required<SocialTypes>;
+
+  /**
+   * Specify the url for social link
+   */
+  url?: Required<string>;
+}

package/src/components/Footer/Footer.tsx

@@ -0,0 +1,107 @@
+import { FC } from "react";
+import useGlobalSettings from "../../hooks/useGlobalSettings";
+import classnames from "classnames";
+import { FooterProps } from "./Footer.props";
+import { LinkList } from "../LinkList";
+import { Button } from "../Button";
+
+const Footer: FC<FooterProps> = ({
+  className,
+  logo,
+  tagline,
+  subtagline,
+  address,
+  linkgroup,
+  socials,
+  subscribe,
+  legal,
+  secondarylinks,
+  anchorlink,
+}) => {
+  const { prefix } = useGlobalSettings();
+
+  const baseClass = `${prefix}--footer`;
+  const footerClasses = classnames(className, baseClass);
+
+  return (
+    <footer className={footerClasses}>
+      <div className={`${baseClass}--main`}>
+        <div className="site--info">
+          <img className={`${baseClass}--logo`} src={logo} alt="ILO Logo" />
+          <h3 className={`${baseClass}--headline`}>{tagline}</h3>
+          <h4 className={`${baseClass}--subhead`}>{subtagline}</h4>
+        </div>
+        {address && (
+          <div className="address">
+            {address.map((line, i) => (
+              <p key={i} className="address--line">
+                {line}
+              </p>
+            ))}
+          </div>
+        )}
+        {linkgroup && (
+          <nav className="links">
+            <LinkList linkgroup={linkgroup} theme="dark"></LinkList>
+          </nav>
+        )}
+        {(socials || subscribe) && (
+          <div className="connect">
+            {socials && (
+              <>
+                <h5 className="social--headline">{socials?.headline}</h5>
+                <ul className="social--links">
+                  {socials.links &&
+                    socials.links.map((link, index) => (
+                      <li className="social--links--item" key={index}>
+                        <a
+                          className={`social--links--link ${link.type}`}
+                          href={link.url}
+                        >
+                          {link.type}
+                        </a>
+                      </li>
+                    ))}
+                </ul>
+              </>
+            )}
+            {subscribe && (
+              <Button
+                label={subscribe?.label}
+                url={subscribe?.url}
+                type="primary"
+                size="large"
+                target="_blank"
+              ></Button>
+            )}
+          </div>
+        )}
+      </div>
+      <div className={`${baseClass}--secondary`}>
+        <div className="legal">{legal}</div>
+        {secondarylinks && (
+          <nav className="secondarylinks">
+            <ul className="secondarylinks--list">
+              {secondarylinks.map((link, i) => (
+                <li className="secondarylinks--list--item">
+                  <a
+                    key={i}
+                    href={link.url}
+                    className="secondarylinks--list--link"
+                  >
+                    {link?.label}
+                  </a>
+                </li>
+              ))}
+            </ul>
+          </nav>
+        )}
+        <a href={anchorlink?.url} className="anchorlink">
+          {anchorlink?.label}
+        </a>
+      </div>
+    </footer>
+  );
+};
+
+export default Footer;

package/src/components/Footer/index.ts

@@ -0,0 +1 @@
+export { default as Footer } from "./Footer";

package/src/components/LinkList/LinkList.props.ts

@@ -1,6 +1,6 @@
 import { LinkListThemes } from "../../types";
 
-interface LinkProps {
+export interface LinkProps {
   /**
    * Specify if this link should indent and have a triangle icon
    */
@@ -17,7 +17,7 @@ interface LinkProps {
   url?: Required<string>;
 }
 
-interface LinkGroupProps {
+export interface LinkGroupProps {
   /**
    * Specify an optional headline for this link group
    */

package/src/components/LocalNav/LocalNav.args.ts

@@ -0,0 +1,64 @@
+import { LocalNavProps } from "./LocalNav.props";
+import ilo_logo_white from "@ilo-org/brand-assets/logo_en_horizontal_white.svg";
+
+const basic: LocalNavProps = {
+  background: "#960A55",
+  logo: ilo_logo_white,
+  siteurl: "https://www.ilo.org/",
+  primarynav: {
+    navlabel: "Primary Nav Menu",
+    mobilecloselabel: "Close",
+    items: [
+      {
+        label: "Menu Item 1",
+        url: "https://www.ilo.org",
+      },
+      {
+        label: "Menu Item 2",
+        url: "https://www.ilo.org",
+      },
+      {
+        label: "Menu Item 3",
+        url: "https://www.ilo.org",
+      },
+      {
+        label: "Menu Item 4",
+        url: "https://www.ilo.org",
+      },
+      {
+        label: "Menu Item 5",
+        url: "https://www.ilo.org",
+      },
+    ],
+  },
+  mainlink: {
+    label: "Go to main website",
+    url: "https://www.ilo.org",
+  },
+  languagelabel: "English",
+  menucloselabel: "Close",
+  languagecontextmenu: {
+    links: [
+      {
+        label: "Français",
+        url: "https://www.ilo.org",
+      },
+      {
+        label: "Español",
+        url: "https://www.ilo.org",
+      },
+      {
+        label: "中文",
+        url: "https://www.ilo.org",
+      },
+      {
+        label: "Русский",
+        url: "https://www.ilo.org",
+      },
+    ],
+  },
+};
+
+const LocalNavArgs = { basic };
+
+export default LocalNavArgs;

package/src/components/LocalNav/LocalNav.props.ts

@@ -0,0 +1,60 @@
+import { LinkProps, ContextMenuProps } from "../ContextMenu/ContextMenu.props";
+
+export interface LocalNavProps {
+  /**
+   * Props for the background colour of the LocalNav
+   */
+  background?: string;
+
+  /**
+   * Props for the logo of the LocalNav
+   */
+  logo?: Required<string>;
+
+  /**
+   * Props for the home url of the LocalNav
+   */
+  siteurl?: Required<string>;
+
+  /**
+   * Specify the primary items for the LocalNav
+   */
+  primarynav?: Required<PrimaryNavProps>;
+
+  /**
+   * Specify the main link for the LocalNav
+   */
+  mainlink?: LinkProps;
+
+  /**
+   * Specify the menu close label for the LocalNav
+   */
+  menucloselabel?: string;
+
+  /**
+   * Specify the language label for the LocalNav
+   */
+  languagelabel?: string;
+
+  /**
+   * Specify the language context menu for the LocalNav
+   */
+  languagecontextmenu?: ContextMenuProps;
+}
+
+interface PrimaryNavProps {
+  /**
+   * Specify the label for local nav
+   */
+  navlabel?: Required<string>;
+
+  /**
+   * Specify the close label for mobile local nav
+   */
+  mobilecloselabel?: Required<string>;
+
+  /**
+   * Specify the social links
+   */
+  items?: Required<Array<LinkProps>>;
+}

package/src/components/LocalNav/LocalNav.tsx

@@ -0,0 +1,175 @@
+import { FC, useState } from "react";
+import useGlobalSettings from "../../hooks/useGlobalSettings";
+import { ContextMenu } from "../ContextMenu";
+import { LocalNavProps } from "./LocalNav.props";
+import { brand } from "@ilo-org/themes/tokens/brand/base.json";
+import classnames from "classnames";
+
+const LocalNav: FC<LocalNavProps> = ({
+  background,
+  logo,
+  siteurl,
+  primarynav,
+  mainlink,
+  menucloselabel,
+  languagelabel,
+  languagecontextmenu,
+}) => {
+  const { prefix } = useGlobalSettings();
+
+  const [toggleMenuOpen, setMenuToggleOpen] = useState(false);
+  const [toggleLanguageOpen, setLanguageToggleOpen] = useState(false);
+
+  const baseClass = `${prefix}--header`;
+  const localNavClasses = classnames(baseClass, `${baseClass}--local`, {
+    [`${prefix}--mobile--open`]: toggleMenuOpen,
+    [`${prefix}--select--open`]: toggleLanguageOpen,
+  });
+  const bg = background ? background : brand["ilo-dark-blue"].value;
+
+  const handleMenuToggle = () => {
+    setMenuToggleOpen(!toggleMenuOpen);
+  };
+
+  const handleLanguageToggle = () => {
+    setLanguageToggleOpen(!toggleLanguageOpen);
+  };
+
+  return (
+    <header className={localNavClasses}>
+      <div
+        className={`${baseClass}--utility-bar ${baseClass}--utility-bar--local`}
+        style={{ background: bg }}
+      >
+        <nav className={`${prefix}--nav--local`}>
+          <div className={`${prefix}--nav--local--logo-wrapper`}>
+            <a href={siteurl} className={`${prefix}--nav--local--logo-link`}>
+              <img
+                src={logo}
+                alt="ILO Logo"
+                className={`${prefix}--nav--local--logo`}
+              />
+            </a>
+          </div>
+          <ul className={`${prefix}--nav--local--set`}>
+            {primarynav?.items &&
+              primarynav.items.map((item, index) => (
+                <li className={`${prefix}--nav--local--item`} key={index}>
+                  <a href={item.url} className={`${prefix}--nav--local--link`}>
+                    <span>{item.label}</span>
+                  </a>
+                </li>
+              ))}
+          </ul>
+        </nav>
+        <div className={`${prefix}--language-switcher`}>
+          <div className={`${prefix}--language-switcher--wrap`}>
+            {mainlink && (
+              <span className={`${prefix}--language-switcher--link--wrap`}>
+                <a
+                  href={mainlink.url}
+                  className={`${prefix}--language-switcher--link`}
+                >
+                  {mainlink.label}
+                </a>
+              </span>
+            )}
+            <button
+              className={`${prefix}--language-switcher--button`}
+              type="button"
+            >
+              {languagelabel}
+            </button>
+            <ContextMenu links={languagecontextmenu?.links}></ContextMenu>
+          </div>
+        </div>
+        <button className={`${baseClass}--menu`} onClick={handleMenuToggle}>
+          Menu
+        </button>
+        <div className={`${baseClass}--navigation`}>
+          <div className={`${baseClass}--inner`}>
+            <div className={`${prefix}--mobile--nav`}>
+              <div className={`${prefix}--mobile--nav--logo`}>
+                <a href={siteurl} className={`${baseClass}--logo-link`}>
+                  <img
+                    className={`${baseClass}--logo`}
+                    src={logo}
+                    alt="ILO Logo"
+                  />
+                </a>
+                <button
+                  className={`${baseClass}--menu--close`}
+                  onClick={handleMenuToggle}
+                >
+                  {menucloselabel}
+                </button>
+              </div>
+              <div className={`${prefix}--mobile--nav--language--switcher`}>
+                <button
+                  className={`${prefix}--mobile--nav--language--switcher--button`}
+                  onClick={handleLanguageToggle}
+                  type="button"
+                >
+                  {languagelabel}
+                </button>
+              </div>
+              <div className={`${prefix}--mobile--nav--language--select`}>
+                <div className={`${baseClass}--inner`}>
+                  <div className={`${prefix}--mobile--subnav--menu`}>
+                    <button
+                      className={`${prefix}--mobile--subnav--back`}
+                      onClick={handleLanguageToggle}
+                      type="button"
+                    ></button>
+                    <button
+                      className={`${baseClass}--menu--close`}
+                      onClick={handleMenuToggle}
+                    >
+                      Close
+                    </button>
+                    <h6 className={`${prefix}--mobile--subnav--label`}>
+                      {languagelabel}
+                    </h6>
+                  </div>
+                  <ul className={`${prefix}--nav--set`}>
+                    {languagecontextmenu?.links &&
+                      languagecontextmenu.links.map((item, index) => (
+                        <li className={`${prefix}--nav--items`} key={index}>
+                          <a
+                            href={item.url}
+                            className={`${prefix}--nav--link ${prefix}--nav--language`}
+                          >
+                            {item.label}
+                          </a>
+                        </li>
+                      ))}
+                  </ul>
+                </div>
+              </div>
+            </div>
+            <nav
+              className={`${prefix}--nav`}
+              aria-labelledby="primary-navigation"
+            >
+              <h2 className={`${prefix}--nav--label`} id="primary-navigation">
+                {primarynav?.navlabel}
+              </h2>
+              <ul className={`${prefix}--nav--set`}>
+                {primarynav?.items &&
+                  primarynav.items.map((item, index) => (
+                    <li className={`${prefix}--nav--items`} key={index}>
+                      <a href={item.url} className={`${prefix}--nav--link`}>
+                        {item.label}
+                      </a>
+                    </li>
+                  ))}
+              </ul>
+            </nav>
+          </div>
+        </div>
+      </div>
+    </header>
+  );
+};
+
+export default LocalNav;

package/src/components/LocalNav/index.ts

@@ -0,0 +1 @@
+export { default as LocalNav } from "./LocalNav";

package/src/components/index.ts

@@ -42,3 +42,5 @@ export { Icon } from "./Icon";
 export { List } from "./List";
 export { Profile } from "./Profile";
 export { TableOfContents } from "./TableOfContents";
+export { Footer } from "./Footer";
+export { LocalNav } from "./LocalNav";

package/src/types/index.ts

@@ -48,3 +48,4 @@ export type NotificationTypes = "error" | "info" | "success" | "warning";
 export type PositionTypes = "top" | "bottom" | "left" | "right";
 export type SizeTypes = "small" | "medium" | "large";
 export type TagTypes = "anchor" | "display" | "button";
+export type SocialTypes = "instagram" | "facebook" | "twitter" | "youtube";