@ilo-org/react 0.2.1 → 0.3.0

package/CHANGELOG.md

@@ -1,5 +1,15 @@
 # @ilo-org/react
 
+## 0.3.0
+
+### Minor Changes
+
+- df509e960: react: added global Navigation component
+
+### Patch Changes
+
+- d55e975ca: Add homepage to package.json
+
 ## 0.2.1
 
 ### Patch Changes

package/lib/cjs/components/Navigation/Navigation.js

@@ -0,0 +1,48 @@
+'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 components_SearchField_SearchField = require('../SearchField/SearchField.js');
+var classNames = require('classnames');
+require('tslib');
+require('../../GlobalCtx-97e4b433.js');
+require('../Input/Input.js');
+require('../Fieldset/Fieldset.js');
+require('../Tooltip/Tooltip.js');
+require('react-dom');
+require('../FormElement/FormElement.js');
+
+const Navigation = ({ logo, mobilelogo, siteurl, tagline, primarynav, subnav, menulabel, menucloselabel, searchlabel, searchfield, languagelabel, languagecontextmenu, }) => {
+    const { prefix } = hooks_useGlobalSettings();
+    const [toggleMenuOpen, setMenuToggleOpen] = require$$0.useState(false);
+    const [toggleSearchOpen, setSearchToggleOpen] = require$$0.useState(false);
+    const [toggleSubnavOpen, setSubnavToggleOpen] = require$$0.useState(false);
+    const [toggleLanguageOpen, setLanguageToggleOpen] = require$$0.useState(false);
+    const baseClass = `${prefix}--header`;
+    const NavigationClasses = classNames(baseClass, {
+        [`${prefix}--mobile--open`]: toggleMenuOpen,
+        [`${prefix}--select--open`]: toggleLanguageOpen,
+        [`${prefix}--search--open`]: toggleSearchOpen,
+        [`${prefix}--subnav--open`]: toggleSubnavOpen,
+    });
+    const handleMenuToggle = () => {
+        setMenuToggleOpen(!toggleMenuOpen);
+    };
+    const handleLanguageToggle = () => {
+        setLanguageToggleOpen(!toggleLanguageOpen);
+    };
+    const handleSearchToggle = () => {
+        setSearchToggleOpen(!toggleSearchOpen);
+    };
+    const handleSubnavToggle = () => {
+        setSubnavToggleOpen(!toggleSubnavOpen);
+    };
+    return (jsxRuntime.jsxs("header", Object.assign({ className: NavigationClasses }, { children: [jsxRuntime.jsx("div", Object.assign({ className: `${baseClass}--utility-bar` }, { children: jsxRuntime.jsx("div", Object.assign({ className: `${prefix}--language-switcher` }, { children: jsxRuntime.jsxs("div", Object.assign({ className: `${prefix}--language-switcher--wrap` }, { children: [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("div", Object.assign({ className: `${baseClass}--logo-bar` }, { children: jsxRuntime.jsxs("div", Object.assign({ className: `${baseClass}--inner` }, { 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.jsxs("p", Object.assign({ className: `${baseClass}--logo-tagline` }, { children: [tagline === null || tagline === void 0 ? void 0 : tagline.tag, jsxRuntime.jsx("span", Object.assign({ className: `${baseClass}--logo-tagline--small` }, { children: tagline === null || tagline === void 0 ? void 0 : tagline.small }))] })), jsxRuntime.jsx("button", Object.assign({ className: `${baseClass}--menu`, onClick: handleMenuToggle }, { children: menulabel }))] })) })), jsxRuntime.jsxs("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: mobilelogo, 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--search` }, { children: jsxRuntime.jsx(components_SearchField_SearchField, { input: searchfield === null || searchfield === void 0 ? void 0 : searchfield.input, action: searchfield === null || searchfield === void 0 ? void 0 : searchfield.action }) })), 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", Object.assign({ className: `${prefix}--mobile--subnav--back`, onClick: handleLanguageToggle, type: "button" }, { children: subnav === null || subnav === void 0 ? void 0 : subnav.mobilebacklabel })), jsxRuntime.jsx("button", Object.assign({ className: `${baseClass}--menu--close`, onClick: handleMenuToggle }, { children: subnav === null || subnav === void 0 ? void 0 : subnav.mobilecloselabel })), 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.jsxs("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))), subnav && (jsxRuntime.jsx("li", Object.assign({ className: `${prefix}--nav--items` }, { children: jsxRuntime.jsx("button", Object.assign({ className: `${prefix}--nav--trigger`, onClick: handleSubnavToggle }, { children: subnav.buttonlabel })) })))] }))] })), jsxRuntime.jsx("div", Object.assign({ className: `${prefix}--search` }, { children: jsxRuntime.jsx("button", Object.assign({ className: `${prefix}--search--button`, type: "button", onClick: handleSearchToggle }, { children: searchlabel })) }))] })), subnav && (jsxRuntime.jsx("nav", Object.assign({ className: `${prefix}--subnav`, "aria-labelledby": "secondary-navigation" }, { children: jsxRuntime.jsxs("div", Object.assign({ className: `${prefix}--subnav--inner` }, { children: [jsxRuntime.jsx("div", Object.assign({ className: `${prefix}--mobile--subnav` }, { children: jsxRuntime.jsxs("div", Object.assign({ className: `${prefix}--mobile--subnav--menu` }, { children: [jsxRuntime.jsx("button", Object.assign({ className: `${prefix}--mobile--subnav--back`, onClick: handleSubnavToggle, type: "button" }, { children: subnav.mobilebacklabel })), jsxRuntime.jsx("button", Object.assign({ className: `${prefix}--header--menu--close`, onClick: handleMenuToggle }, { children: subnav.mobilecloselabel })), jsxRuntime.jsx("h6", Object.assign({ className: `${prefix}--mobile--subnav--label` }, { children: subnav.buttonlabel }))] })) })), jsxRuntime.jsx("h2", Object.assign({ className: `${prefix}--nav--label`, id: "secondary-navigation" }, { children: subnav.navlabel })), jsxRuntime.jsx("ul", Object.assign({ className: `${prefix}--subnav--set` }, { children: (subnav === null || subnav === void 0 ? void 0 : subnav.items) &&
+                                        subnav.items.map((item, index) => (jsxRuntime.jsx("li", Object.assign({ className: `${prefix}--subnav--items` }, { children: jsxRuntime.jsx("a", Object.assign({ href: item.url, className: `${prefix}--subnav--link` }, { children: item.label })) }), index))) }))] })) }))), jsxRuntime.jsx("div", Object.assign({ className: `${prefix}--search-box` }, { children: jsxRuntime.jsx("div", Object.assign({ className: `${prefix}--header--inner` }, { children: jsxRuntime.jsx(components_SearchField_SearchField, { input: searchfield === null || searchfield === void 0 ? void 0 : searchfield.input, action: searchfield === null || searchfield === void 0 ? void 0 : searchfield.action }) })) }))] }))] })));
+};
+
+module.exports = Navigation;

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

@@ -0,0 +1,20 @@
+'use strict';
+
+var components_Navigation_Navigation = require('./Navigation.js');
+require('react/jsx-runtime');
+require('react');
+require('../../hooks/useGlobalSettings.js');
+require('tslib');
+require('../../GlobalCtx-97e4b433.js');
+require('../ContextMenu/ContextMenu.js');
+require('classnames');
+require('../SearchField/SearchField.js');
+require('../Input/Input.js');
+require('../Fieldset/Fieldset.js');
+require('../Tooltip/Tooltip.js');
+require('react-dom');
+require('../FormElement/FormElement.js');
+
+
+
+exports.Navigation = components_Navigation_Navigation;

package/lib/cjs/components/index.js

@@ -52,6 +52,7 @@ 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');
+var components_Navigation_Navigation = require('./Navigation/Navigation.js');
 require('../hooks/useGlobalSettings.js');
 require('../AccordionCtx-fe08ff45.js');
 require('@ilo-org/utils');
@@ -115,3 +116,4 @@ exports.Profile = components_Profile_Profile;
 exports.TableOfContents = components_TableOfContents_TableOfContents;
 exports.Footer = components_Footer_Footer;
 exports.LocalNav = components_LocalNav_LocalNav;
+exports.Navigation = components_Navigation_Navigation;

package/lib/cjs/index.js

@@ -52,6 +52,7 @@ 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');
+var components_Navigation_Navigation = require('./components/Navigation/Navigation.js');
 require('./hooks/useGlobalSettings.js');
 require('./AccordionCtx-fe08ff45.js');
 require('@ilo-org/utils');
@@ -115,3 +116,4 @@ exports.Profile = components_Profile_Profile;
 exports.TableOfContents = components_TableOfContents_TableOfContents;
 exports.Footer = components_Footer_Footer;
 exports.LocalNav = components_LocalNav_LocalNav;
+exports.Navigation = components_Navigation_Navigation;

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

@@ -0,0 +1,46 @@
+import { jsxs, jsx } from 'react/jsx-runtime';
+import { useState } from 'react';
+import useGlobalSettings from '../../hooks/useGlobalSettings.js';
+import ContextMenu from '../ContextMenu/ContextMenu.js';
+import SearchField from '../SearchField/SearchField.js';
+import classNames from 'classnames';
+import 'tslib';
+import '../../GlobalCtx-7fb23cfa.js';
+import '../Input/Input.js';
+import '../Fieldset/Fieldset.js';
+import '../Tooltip/Tooltip.js';
+import 'react-dom';
+import '../FormElement/FormElement.js';
+
+const Navigation = ({ logo, mobilelogo, siteurl, tagline, primarynav, subnav, menulabel, menucloselabel, searchlabel, searchfield, languagelabel, languagecontextmenu, }) => {
+    const { prefix } = useGlobalSettings();
+    const [toggleMenuOpen, setMenuToggleOpen] = useState(false);
+    const [toggleSearchOpen, setSearchToggleOpen] = useState(false);
+    const [toggleSubnavOpen, setSubnavToggleOpen] = useState(false);
+    const [toggleLanguageOpen, setLanguageToggleOpen] = useState(false);
+    const baseClass = `${prefix}--header`;
+    const NavigationClasses = classNames(baseClass, {
+        [`${prefix}--mobile--open`]: toggleMenuOpen,
+        [`${prefix}--select--open`]: toggleLanguageOpen,
+        [`${prefix}--search--open`]: toggleSearchOpen,
+        [`${prefix}--subnav--open`]: toggleSubnavOpen,
+    });
+    const handleMenuToggle = () => {
+        setMenuToggleOpen(!toggleMenuOpen);
+    };
+    const handleLanguageToggle = () => {
+        setLanguageToggleOpen(!toggleLanguageOpen);
+    };
+    const handleSearchToggle = () => {
+        setSearchToggleOpen(!toggleSearchOpen);
+    };
+    const handleSubnavToggle = () => {
+        setSubnavToggleOpen(!toggleSubnavOpen);
+    };
+    return (jsxs("header", Object.assign({ className: NavigationClasses }, { children: [jsx("div", Object.assign({ className: `${baseClass}--utility-bar` }, { children: jsx("div", Object.assign({ className: `${prefix}--language-switcher` }, { children: jsxs("div", Object.assign({ className: `${prefix}--language-switcher--wrap` }, { children: [jsx("button", Object.assign({ className: `${prefix}--language-switcher--button`, type: "button" }, { children: languagelabel })), jsx(ContextMenu, { links: languagecontextmenu === null || languagecontextmenu === void 0 ? void 0 : languagecontextmenu.links })] })) })) })), jsx("div", Object.assign({ className: `${baseClass}--logo-bar` }, { children: jsxs("div", Object.assign({ className: `${baseClass}--inner` }, { children: [jsx("a", Object.assign({ href: siteurl, className: `${baseClass}--logo-link` }, { children: jsx("img", { className: `${baseClass}--logo`, src: logo, alt: "ILO Logo" }) })), jsxs("p", Object.assign({ className: `${baseClass}--logo-tagline` }, { children: [tagline === null || tagline === void 0 ? void 0 : tagline.tag, jsx("span", Object.assign({ className: `${baseClass}--logo-tagline--small` }, { children: tagline === null || tagline === void 0 ? void 0 : tagline.small }))] })), jsx("button", Object.assign({ className: `${baseClass}--menu`, onClick: handleMenuToggle }, { children: menulabel }))] })) })), jsxs("div", Object.assign({ className: `${baseClass}--navigation` }, { children: [jsxs("div", Object.assign({ className: `${baseClass}--inner` }, { children: [jsxs("div", Object.assign({ className: `${prefix}--mobile--nav` }, { children: [jsxs("div", Object.assign({ className: `${prefix}--mobile--nav--logo` }, { children: [jsx("a", Object.assign({ href: siteurl, className: `${baseClass}--logo-link` }, { children: jsx("img", { className: `${baseClass}--logo`, src: mobilelogo, alt: "ILO Logo" }) })), jsx("button", Object.assign({ className: `${baseClass}--menu--close`, onClick: handleMenuToggle }, { children: menucloselabel }))] })), jsx("div", Object.assign({ className: `${prefix}--mobile--nav--search` }, { children: jsx(SearchField, { input: searchfield === null || searchfield === void 0 ? void 0 : searchfield.input, action: searchfield === null || searchfield === void 0 ? void 0 : searchfield.action }) })), jsx("div", Object.assign({ className: `${prefix}--mobile--nav--language--switcher` }, { children: jsx("button", Object.assign({ className: `${prefix}--mobile--nav--language--switcher--button`, onClick: handleLanguageToggle, type: "button" }, { children: languagelabel })) })), jsx("div", Object.assign({ className: `${prefix}--mobile--nav--language--select` }, { children: jsxs("div", Object.assign({ className: `${baseClass}--inner` }, { children: [jsxs("div", Object.assign({ className: `${prefix}--mobile--subnav--menu` }, { children: [jsx("button", Object.assign({ className: `${prefix}--mobile--subnav--back`, onClick: handleLanguageToggle, type: "button" }, { children: subnav === null || subnav === void 0 ? void 0 : subnav.mobilebacklabel })), jsx("button", Object.assign({ className: `${baseClass}--menu--close`, onClick: handleMenuToggle }, { children: subnav === null || subnav === void 0 ? void 0 : subnav.mobilecloselabel })), jsx("h6", Object.assign({ className: `${prefix}--mobile--subnav--label` }, { children: languagelabel }))] })), jsx("ul", Object.assign({ className: `${prefix}--nav--set` }, { children: (languagecontextmenu === null || languagecontextmenu === void 0 ? void 0 : languagecontextmenu.links) &&
+                                                        languagecontextmenu.links.map((item, index) => (jsx("li", Object.assign({ className: `${prefix}--nav--items` }, { children: jsx("a", Object.assign({ href: item.url, className: `${prefix}--nav--link ${prefix}--nav--language` }, { children: item.label })) }), index))) }))] })) }))] })), jsxs("nav", Object.assign({ className: `${prefix}--nav`, "aria-labelledby": "primary-navigation" }, { children: [jsx("h2", Object.assign({ className: `${prefix}--nav--label`, id: "primary-navigation" }, { children: primarynav === null || primarynav === void 0 ? void 0 : primarynav.navlabel })), jsxs("ul", Object.assign({ className: `${prefix}--nav--set` }, { children: [(primarynav === null || primarynav === void 0 ? void 0 : primarynav.items) &&
+                                                primarynav.items.map((item, index) => (jsx("li", Object.assign({ className: `${prefix}--nav--items` }, { children: jsx("a", Object.assign({ href: item.url, className: `${prefix}--nav--link` }, { children: item.label })) }), index))), subnav && (jsx("li", Object.assign({ className: `${prefix}--nav--items` }, { children: jsx("button", Object.assign({ className: `${prefix}--nav--trigger`, onClick: handleSubnavToggle }, { children: subnav.buttonlabel })) })))] }))] })), jsx("div", Object.assign({ className: `${prefix}--search` }, { children: jsx("button", Object.assign({ className: `${prefix}--search--button`, type: "button", onClick: handleSearchToggle }, { children: searchlabel })) }))] })), subnav && (jsx("nav", Object.assign({ className: `${prefix}--subnav`, "aria-labelledby": "secondary-navigation" }, { children: jsxs("div", Object.assign({ className: `${prefix}--subnav--inner` }, { children: [jsx("div", Object.assign({ className: `${prefix}--mobile--subnav` }, { children: jsxs("div", Object.assign({ className: `${prefix}--mobile--subnav--menu` }, { children: [jsx("button", Object.assign({ className: `${prefix}--mobile--subnav--back`, onClick: handleSubnavToggle, type: "button" }, { children: subnav.mobilebacklabel })), jsx("button", Object.assign({ className: `${prefix}--header--menu--close`, onClick: handleMenuToggle }, { children: subnav.mobilecloselabel })), jsx("h6", Object.assign({ className: `${prefix}--mobile--subnav--label` }, { children: subnav.buttonlabel }))] })) })), jsx("h2", Object.assign({ className: `${prefix}--nav--label`, id: "secondary-navigation" }, { children: subnav.navlabel })), jsx("ul", Object.assign({ className: `${prefix}--subnav--set` }, { children: (subnav === null || subnav === void 0 ? void 0 : subnav.items) &&
+                                        subnav.items.map((item, index) => (jsx("li", Object.assign({ className: `${prefix}--subnav--items` }, { children: jsx("a", Object.assign({ href: item.url, className: `${prefix}--subnav--link` }, { children: item.label })) }), index))) }))] })) }))), jsx("div", Object.assign({ className: `${prefix}--search-box` }, { children: jsx("div", Object.assign({ className: `${prefix}--header--inner` }, { children: jsx(SearchField, { input: searchfield === null || searchfield === void 0 ? void 0 : searchfield.input, action: searchfield === null || searchfield === void 0 ? void 0 : searchfield.action }) })) }))] }))] })));
+};
+
+export { Navigation as default };

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

@@ -0,0 +1,14 @@
+export { default as Navigation } from './Navigation.js';
+import 'react/jsx-runtime';
+import 'react';
+import '../../hooks/useGlobalSettings.js';
+import 'tslib';
+import '../../GlobalCtx-7fb23cfa.js';
+import '../ContextMenu/ContextMenu.js';
+import 'classnames';
+import '../SearchField/SearchField.js';
+import '../Input/Input.js';
+import '../Fieldset/Fieldset.js';
+import '../Tooltip/Tooltip.js';
+import 'react-dom';
+import '../FormElement/FormElement.js';

package/lib/esm/components/index.js

@@ -50,6 +50,7 @@ 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';
+export { default as Navigation } from './Navigation/Navigation.js';
 import '../hooks/useGlobalSettings.js';
 import '../AccordionCtx-8c051900.js';
 import '@ilo-org/utils';

package/lib/esm/index.js

@@ -50,6 +50,7 @@ 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';
+export { default as Navigation } from './components/Navigation/Navigation.js';
 import './hooks/useGlobalSettings.js';
 import './AccordionCtx-8c051900.js';
 import '@ilo-org/utils';

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

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

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

@@ -0,0 +1,99 @@
+import { LinkProps, ContextMenuProps } from "../ContextMenu/ContextMenu.props";
+import { SearchFieldProps } from "../SearchField/SearchField.props";
+export interface NavigationProps {
+    /**
+     * Props for the logo of the Navigation
+     */
+    logo?: Required<string>;
+    /**
+     * Props for the mobile logo of the Navigation
+     */
+    mobilelogo?: Required<string>;
+    /**
+     * Props for the home url of the Navigation
+     */
+    siteurl?: Required<string>;
+    /**
+     * Specify the tagline for the Navigation
+     */
+    tagline?: Required<TaglineProps>;
+    /**
+     * Specify the primary items for the Navigation
+     */
+    primarynav?: Required<PrimaryNavProps>;
+    /**
+     * Specify the secondary items for the Navigation
+     */
+    subnav?: Required<SubNavProps>;
+    /**
+     * Specify the tagline for the Navigation
+     */
+    searchlabel?: string;
+    /**
+     * Specify the searchfield props for the Navigation
+     */
+    searchfield?: SearchFieldProps;
+    /**
+     * Specify the menu label for the Navigation
+     */
+    menulabel?: string;
+    /**
+     * Specify the menu close label for the Navigation
+     */
+    menucloselabel?: string;
+    /**
+     * Specify the language label for the Navigation
+     */
+    languagelabel?: string;
+    /**
+     * Specify the language context menu for the Navigation
+     */
+    languagecontextmenu?: ContextMenuProps;
+}
+interface PrimaryNavProps {
+    /**
+     * Specify the label for Navigation
+     */
+    navlabel?: Required<string>;
+    /**
+     * Specify the close label for mobile Navigation
+     */
+    mobilecloselabel?: Required<string>;
+    /**
+     * Specify the links
+     */
+    items?: Required<Array<LinkProps>>;
+}
+interface SubNavProps {
+    /**
+     * Specify the label for sub Navigation
+     */
+    navlabel?: Required<string>;
+    /**
+     * Specify the button label for sub Navigation
+     */
+    buttonlabel?: Required<string>;
+    /**
+     * Specify the close label for mobile sub Navigation
+     */
+    mobilecloselabel?: Required<string>;
+    /**
+     * Specify the back label for mobile sub Navigation
+     */
+    mobilebacklabel?: Required<string>;
+    /**
+     * Specify the subnav links
+     */
+    items?: Required<Array<LinkProps>>;
+}
+interface TaglineProps {
+    /**
+     * Specify the main tagline text
+     */
+    tag?: Required<string>;
+    /**
+     * Specify the small tagline text
+     */
+    small?: Required<string>;
+}
+export {};

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

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

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

@@ -39,3 +39,4 @@ export { Profile } from "./Profile";
 export { TableOfContents } from "./TableOfContents";
 export { Footer } from "./Footer";
 export { LocalNav } from "./LocalNav";
+export { Navigation } from "./Navigation";

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ilo-org/react",
-  "version": "0.2.1",
+  "version": "0.3.0",
   "description": "React components for the ILO's Design System",
   "keywords": [
     "ui_patterns",
@@ -9,6 +9,7 @@
     "designsystem",
     "components"
   ],
+  "homepage": "https://react.ui.ilo.org",
   "repository": {
     "type": "git",
     "url": "https://github.com/international-labour-organization/designsystem.git",

package/src/components/Navigation/Navigation.args.ts

@@ -0,0 +1,112 @@
+import { NavigationProps } from "./Navigation.props";
+import ilo_logo_white from "@ilo-org/brand-assets/logo_en_horizontal_white.svg";
+
+const basic: NavigationProps = {
+  logo: ilo_logo_white,
+  mobilelogo: ilo_logo_white,
+  siteurl: "https://www.ilo.org/",
+  tagline: {
+    tag: "Advancing social justice, promoting decent work",
+    small: "ILO is a specialized agency of the United Nations",
+  },
+  primarynav: {
+    navlabel: "Primary Navigation",
+    mobilecloselabel: "Close",
+    items: [
+      {
+        label: "Topics",
+        url: "https://www.ilo.org",
+      },
+      {
+        label: "Countries",
+        url: "https://www.ilo.org",
+      },
+      {
+        label: "Standards",
+        url: "https://www.ilo.org",
+      },
+      {
+        label: "Statistics",
+        url: "https://www.ilo.org",
+      },
+      {
+        label: "About",
+        url: "https://www.ilo.org",
+      },
+    ],
+  },
+  subnav: {
+    navlabel: "Secondary Navigation",
+    buttonlabel: "More",
+    mobilecloselabel: "Close",
+    mobilebacklabel: "Menu Home",
+    items: [
+      {
+        label: "News",
+        url: "https://www.ilo.org",
+      },
+      {
+        label: "Meeting & Events",
+        url: "https://www.ilo.org",
+      },
+      {
+        label: "Publications",
+        url: "https://www.ilo.org",
+      },
+      {
+        label: "Projects",
+        url: "https://www.ilo.org",
+      },
+      {
+        label: "Partners",
+        url: "https://www.ilo.org",
+      },
+      {
+        label: "Industries & Sectors",
+        url: "https://www.ilo.org",
+      },
+      {
+        label: "About the ILO",
+        url: "https://www.ilo.org",
+      },
+    ],
+  },
+  languagelabel: "English",
+  menulabel: "Menu",
+  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",
+      },
+    ],
+  },
+  searchlabel: "Search",
+  searchfield: {
+    action: "https://www.ilo.org",
+    input: {
+      label: "",
+      helper: "",
+      name: "text",
+      placeholder: "Search Field",
+      type: "text",
+    },
+  },
+};
+
+const NavigationArgs = { basic };
+
+export default NavigationArgs;

package/src/components/Navigation/Navigation.props.ts

@@ -0,0 +1,120 @@
+import { LinkProps, ContextMenuProps } from "../ContextMenu/ContextMenu.props";
+import { SearchFieldProps } from "../SearchField/SearchField.props";
+
+export interface NavigationProps {
+  /**
+   * Props for the logo of the Navigation
+   */
+  logo?: Required<string>;
+
+  /**
+   * Props for the mobile logo of the Navigation
+   */
+  mobilelogo?: Required<string>;
+
+  /**
+   * Props for the home url of the Navigation
+   */
+  siteurl?: Required<string>;
+
+  /**
+   * Specify the tagline for the Navigation
+   */
+  tagline?: Required<TaglineProps>;
+
+  /**
+   * Specify the primary items for the Navigation
+   */
+  primarynav?: Required<PrimaryNavProps>;
+
+  /**
+   * Specify the secondary items for the Navigation
+   */
+  subnav?: Required<SubNavProps>;
+
+  /**
+   * Specify the tagline for the Navigation
+   */
+  searchlabel?: string;
+
+  /**
+   * Specify the searchfield props for the Navigation
+   */
+  searchfield?: SearchFieldProps;
+
+  /**
+   * Specify the menu label for the Navigation
+   */
+  menulabel?: string;
+
+  /**
+   * Specify the menu close label for the Navigation
+   */
+  menucloselabel?: string;
+
+  /**
+   * Specify the language label for the Navigation
+   */
+  languagelabel?: string;
+
+  /**
+   * Specify the language context menu for the Navigation
+   */
+  languagecontextmenu?: ContextMenuProps;
+}
+
+interface PrimaryNavProps {
+  /**
+   * Specify the label for Navigation
+   */
+  navlabel?: Required<string>;
+
+  /**
+   * Specify the close label for mobile Navigation
+   */
+  mobilecloselabel?: Required<string>;
+
+  /**
+   * Specify the links
+   */
+  items?: Required<Array<LinkProps>>;
+}
+
+interface SubNavProps {
+  /**
+   * Specify the label for sub Navigation
+   */
+  navlabel?: Required<string>;
+
+  /**
+   * Specify the button label for sub Navigation
+   */
+  buttonlabel?: Required<string>;
+
+  /**
+   * Specify the close label for mobile sub Navigation
+   */
+  mobilecloselabel?: Required<string>;
+
+  /**
+   * Specify the back label for mobile sub Navigation
+   */
+  mobilebacklabel?: Required<string>;
+
+  /**
+   * Specify the subnav links
+   */
+  items?: Required<Array<LinkProps>>;
+}
+
+interface TaglineProps {
+  /**
+   * Specify the main tagline text
+   */
+  tag?: Required<string>;
+
+  /**
+   * Specify the small tagline text
+   */
+  small?: Required<string>;
+}

package/src/components/Navigation/Navigation.tsx

@@ -0,0 +1,246 @@
+import { FC, useState } from "react";
+import useGlobalSettings from "../../hooks/useGlobalSettings";
+import { ContextMenu } from "../ContextMenu";
+import { SearchField } from "../SearchField";
+import { NavigationProps } from "./Navigation.props";
+import classnames from "classnames";
+
+const Navigation: FC<NavigationProps> = ({
+  logo,
+  mobilelogo,
+  siteurl,
+  tagline,
+  primarynav,
+  subnav,
+  menulabel,
+  menucloselabel,
+  searchlabel,
+  searchfield,
+  languagelabel,
+  languagecontextmenu,
+}) => {
+  const { prefix } = useGlobalSettings();
+
+  const [toggleMenuOpen, setMenuToggleOpen] = useState(false);
+  const [toggleSearchOpen, setSearchToggleOpen] = useState(false);
+  const [toggleSubnavOpen, setSubnavToggleOpen] = useState(false);
+  const [toggleLanguageOpen, setLanguageToggleOpen] = useState(false);
+
+  const baseClass = `${prefix}--header`;
+  const NavigationClasses = classnames(baseClass, {
+    [`${prefix}--mobile--open`]: toggleMenuOpen,
+    [`${prefix}--select--open`]: toggleLanguageOpen,
+    [`${prefix}--search--open`]: toggleSearchOpen,
+    [`${prefix}--subnav--open`]: toggleSubnavOpen,
+  });
+
+  const handleMenuToggle = () => {
+    setMenuToggleOpen(!toggleMenuOpen);
+  };
+
+  const handleLanguageToggle = () => {
+    setLanguageToggleOpen(!toggleLanguageOpen);
+  };
+
+  const handleSearchToggle = () => {
+    setSearchToggleOpen(!toggleSearchOpen);
+  };
+
+  const handleSubnavToggle = () => {
+    setSubnavToggleOpen(!toggleSubnavOpen);
+  };
+
+  return (
+    <header className={NavigationClasses}>
+      <div className={`${baseClass}--utility-bar`}>
+        <div className={`${prefix}--language-switcher`}>
+          <div className={`${prefix}--language-switcher--wrap`}>
+            <button
+              className={`${prefix}--language-switcher--button`}
+              type="button"
+            >
+              {languagelabel}
+            </button>
+            <ContextMenu links={languagecontextmenu?.links}></ContextMenu>
+          </div>
+        </div>
+      </div>
+      <div className={`${baseClass}--logo-bar`}>
+        <div className={`${baseClass}--inner`}>
+          <a href={siteurl} className={`${baseClass}--logo-link`}>
+            <img className={`${baseClass}--logo`} src={logo} alt="ILO Logo" />
+          </a>
+          <p className={`${baseClass}--logo-tagline`}>
+            {tagline?.tag}
+            <span className={`${baseClass}--logo-tagline--small`}>
+              {tagline?.small}
+            </span>
+          </p>
+          <button className={`${baseClass}--menu`} onClick={handleMenuToggle}>
+            {menulabel}
+          </button>
+        </div>
+      </div>
+      <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={mobilelogo}
+                  alt="ILO Logo"
+                />
+              </a>
+              <button
+                className={`${baseClass}--menu--close`}
+                onClick={handleMenuToggle}
+              >
+                {menucloselabel}
+              </button>
+            </div>
+            <div className={`${prefix}--mobile--nav--search`}>
+              <SearchField
+                input={searchfield?.input}
+                action={searchfield?.action}
+              ></SearchField>
+            </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"
+                  >
+                    {subnav?.mobilebacklabel}
+                  </button>
+                  <button
+                    className={`${baseClass}--menu--close`}
+                    onClick={handleMenuToggle}
+                  >
+                    {subnav?.mobilecloselabel}
+                  </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>
+                ))}
+              {subnav && (
+                <li className={`${prefix}--nav--items`}>
+                  <button
+                    className={`${prefix}--nav--trigger`}
+                    onClick={handleSubnavToggle}
+                  >
+                    {subnav.buttonlabel}
+                  </button>
+                </li>
+              )}
+            </ul>
+          </nav>
+          <div className={`${prefix}--search`}>
+            <button
+              className={`${prefix}--search--button`}
+              type="button"
+              onClick={handleSearchToggle}
+            >
+              {searchlabel}
+            </button>
+          </div>
+        </div>
+        {subnav && (
+          <nav
+            className={`${prefix}--subnav`}
+            aria-labelledby="secondary-navigation"
+          >
+            <div className={`${prefix}--subnav--inner`}>
+              <div className={`${prefix}--mobile--subnav`}>
+                <div className={`${prefix}--mobile--subnav--menu`}>
+                  <button
+                    className={`${prefix}--mobile--subnav--back`}
+                    onClick={handleSubnavToggle}
+                    type="button"
+                  >
+                    {subnav.mobilebacklabel}
+                  </button>
+                  <button
+                    className={`${prefix}--header--menu--close`}
+                    onClick={handleMenuToggle}
+                  >
+                    {subnav.mobilecloselabel}
+                  </button>
+                  <h6 className={`${prefix}--mobile--subnav--label`}>
+                    {subnav.buttonlabel}
+                  </h6>
+                </div>
+              </div>
+              <h2 className={`${prefix}--nav--label`} id="secondary-navigation">
+                {subnav.navlabel}
+              </h2>
+              <ul className={`${prefix}--subnav--set`}>
+                {subnav?.items &&
+                  subnav.items.map((item, index) => (
+                    <li className={`${prefix}--subnav--items`} key={index}>
+                      <a href={item.url} className={`${prefix}--subnav--link`}>
+                        {item.label}
+                      </a>
+                    </li>
+                  ))}
+              </ul>
+            </div>
+          </nav>
+        )}
+        <div className={`${prefix}--search-box`}>
+          <div className={`${prefix}--header--inner`}>
+            <SearchField
+              input={searchfield?.input}
+              action={searchfield?.action}
+            ></SearchField>
+          </div>
+        </div>
+      </div>
+    </header>
+  );
+};
+
+export default Navigation;

package/src/components/Navigation/index.ts

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

package/src/components/index.ts

@@ -44,3 +44,4 @@ export { Profile } from "./Profile";
 export { TableOfContents } from "./TableOfContents";
 export { Footer } from "./Footer";
 export { LocalNav } from "./LocalNav";
+export { Navigation } from "./Navigation";