@ilo-org/react 0.2.1 → 0.4.0

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,5 @@ export { Profile } from "./Profile";
 export { TableOfContents } from "./TableOfContents";
 export { Footer } from "./Footer";
 export { LocalNav } from "./LocalNav";
+export { Navigation } from "./Navigation";
+export { Card, CardGroup } from "./Card";

package/src/types/index.ts

@@ -33,6 +33,7 @@ export type InputTypes =
   | "tel"
   | "text"
   | "url";
+export type Language = "en" | "fr" | "es";
 export type LabelTypes = "default" | "actionable" | "light";
 export type LinkTypes = "light" | "dark" | "footer" | "button";
 export type LinkListThemes = "light" | "dark";
@@ -49,3 +50,16 @@ 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";
+export type CardColor = "turquoise" | "green" | "yellow" | "blue";
+export type CardSize = "wide" | "standard" | "narrow";
+export type CardCornerType = "cornercut" | "corner";
+export type CardAlignment = "left" | "right";
+export type CardTypes =
+  | "stat"
+  | "multilink"
+  | "graphic"
+  | "graphicpromo"
+  | "feature"
+  | "detail"
+  | "factlist"
+  | "data";