@ilo-org/react 0.1.2 → 0.2.1

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";

package/lib/cjs/_commonjsHelpers-9f9f50a8.js

@@ -1,39 +0,0 @@
-'use strict';
-
-var commonjsGlobal = typeof globalThis !== 'undefined' ? globalThis : typeof window !== 'undefined' ? window : typeof global !== 'undefined' ? global : typeof self !== 'undefined' ? self : {};
-
-function getDefaultExportFromCjs (x) {
-	return x && x.__esModule && Object.prototype.hasOwnProperty.call(x, 'default') ? x['default'] : x;
-}
-
-function getAugmentedNamespace(n) {
-  if (n.__esModule) return n;
-  var f = n.default;
-	if (typeof f == "function") {
-		var a = function a () {
-			if (this instanceof a) {
-				var args = [null];
-				args.push.apply(args, arguments);
-				var Ctor = Function.bind.apply(f, args);
-				return new Ctor();
-			}
-			return f.apply(this, arguments);
-		};
-		a.prototype = f.prototype;
-  } else a = {};
-  Object.defineProperty(a, '__esModule', {value: true});
-	Object.keys(n).forEach(function (k) {
-		var d = Object.getOwnPropertyDescriptor(n, k);
-		Object.defineProperty(a, k, d.get ? d : {
-			enumerable: true,
-			get: function () {
-				return n[k];
-			}
-		});
-	});
-	return a;
-}
-
-exports.commonjsGlobal = commonjsGlobal;
-exports.getAugmentedNamespace = getAugmentedNamespace;
-exports.getDefaultExportFromCjs = getDefaultExportFromCjs;