@progressiveui/react 1.22.0

package/src/components/MainNavigation/MainNavigation.tsx

@@ -0,0 +1,174 @@
+import React, { ComponentType, useState } from "react";
+import classNames from "classnames";
+
+import WrapperDefault from "../Wrapper";
+import useSettings from "../../hooks/useSettings";
+import { ScreenSize } from "../../utils";
+import MainNavigationContext from "./MainNavigationContext";
+import MobileButtonDefault, { MobileButtonProps } from "./MobileButton";
+import { WrapperProps } from "../Wrapper/Wrapper";
+import {
+  WfpLogoVerticalEn,
+  WfpLogoStandardBlackEn,
+} from "@progressiveui/icons-react";
+
+/** The Main Navigation is a Horizontal Menu which consists of multiple clickable items placed at the top of the page. The navigation stays unchanged when browswing through the site and is present on every page. The currently selected item is usually highlighted. */
+
+interface MainNavigationProps extends React.ComponentPropsWithRef<"div"> {
+  /**
+   * The Logo can be either a string or a component
+   */
+  logo?: string | React.ReactNode;
+  /**
+   * Specify the max-width on desktop devices (same as \`Wrapper\` component)
+   */
+  pageWidth?: ScreenSize;
+  /**
+   * The replaceable components to be used for the main navigation. MobileButton(prefix, toggleMenu): accepts a React.ReactNode which will be used as the mobile button. Wrapper: accepts a React.ReactNode which will be used as the wrapper.
+   */
+  components?: {
+    Wrapper?: ComponentType<WrapperProps>;
+    MobileButton?: ComponentType<MobileButtonProps>;
+  };
+  /**
+   * Specify the max-width on mobile devices (same as \`Wrapper\` component)
+   */
+  mobilePageWidth?: ScreenSize;
+  /**
+   * A line will be placed above the navigation
+   */
+  line?: boolean;
+  /**
+   * Show a logo ribbon on the left side of the logo
+   */
+  logoRibbon?: "default" | "offShelf" | null;
+
+  /**
+   * Additional className for the `Wrapper`
+   */
+  wrapperClassName?: string;
+  /**
+   * The CSS class name to be placed on the wrapping element.
+   */
+  className?: string;
+  /**
+   * Defines an `id` for the component.
+   */
+  id?: string;
+}
+
+const MainNavigation = ({
+  children,
+  components: componentsOverride = {},
+  className,
+  id,
+  logo,
+  line = false,
+  logoRibbon = "default",
+  mobilePageWidth,
+  pageWidth,
+}: MainNavigationProps) => {
+  const { prefix } = useSettings();
+  const [openMobileMenu, setOpenMobileMenu] = useState<boolean>(false);
+  const [activeMenuItem, setActiveMenuItem] = useState<string | null>(null);
+
+  const onChangeSub = (
+    action: string,
+    i?: string,
+    e?: React.SyntheticEvent
+  ) => {
+    if (e) e.preventDefault();
+
+    if (action === "close") {
+      setActiveMenuItem(null);
+    } else if (action === "toggle") {
+      const newI = activeMenuItem === null || activeMenuItem !== i ? i : null;
+      if (newI !== undefined) setActiveMenuItem(newI);
+    }
+  };
+
+  const toggleMenu = () => {
+    setOpenMobileMenu(!openMobileMenu);
+  };
+
+  // const triggerSubNavigation = () => {
+  //   setActiveMenuItem(undefined);
+  // };
+
+  // const handleClickOutside = () => {
+  //   setActiveMenuItem(undefined);
+  // };
+
+  const wrapperClasses = classNames(
+    `${prefix}--main-navigation`,
+    { [`${prefix}--main-navigation--line`]: line },
+    className
+  );
+
+  const listClasses = classNames(`${prefix}--main-navigation__list`, {
+    [`${prefix}--main-navigation__list--open`]: openMobileMenu,
+  });
+
+  const components = {
+    Wrapper: WrapperDefault,
+    MobileButton: MobileButtonDefault,
+    ...componentsOverride,
+  };
+
+  const Wrapper = components.Wrapper as React.FC<WrapperProps>;
+  const MobileButton = components.MobileButton as React.FC<MobileButtonProps>;
+
+  return (
+    <nav id={id} className={wrapperClasses}>
+      <MainNavigationContext.Provider
+        value={{
+          activeMenuItem,
+          openMobileMenu,
+          toggleMenu,
+          onChangeSub,
+          setOpenMobileMenu,
+        }}
+      >
+        <Wrapper
+          pageWidth={pageWidth}
+          mobilePageWidth={mobilePageWidth}
+          className={`${prefix}--main-navigation__wrapper`}
+        >
+          <div className={`${prefix}--main-navigation__logo-wrapper`}>
+            <MobileButton
+              toggleMenu={toggleMenu}
+              prefix={prefix}
+              openMobileMenu={openMobileMenu}
+            >
+              Menu
+            </MobileButton>
+            <div className={`${prefix}--main-navigation__logo`}>
+              {logoRibbon === "default" ? (
+                <div className={`${prefix}--main-navigation__logo__default`}>
+                  <div
+                    className={`${prefix}--main-navigation__logo__default__ribbon`}
+                  >
+                    <WfpLogoVerticalEn description="WFP" />
+                  </div>
+                  {logo}
+                </div>
+              ) : logoRibbon === "offShelf" ? (
+                <div className={`${prefix}--main-navigation__logo__offShelf`}>
+                  <WfpLogoStandardBlackEn description="WFP" />
+                  {logo}
+                </div>
+              ) : (
+                logo
+              )}
+            </div>
+          </div>
+          <ul className={listClasses}>{children}</ul>
+        </Wrapper>
+      </MainNavigationContext.Provider>
+    </nav>
+  );
+};
+
+MainNavigation.displayName = "MainNavigation";
+
+export default MainNavigation;

package/src/components/MainNavigation/MainNavigationContext.ts

@@ -0,0 +1,34 @@
+/* eslint-disable @typescript-eslint/no-empty-function */
+import React from "react";
+
+export interface MainNavigationContextType {
+  /**
+   * Callback when the user clicks on a sub menu item
+   */
+  onChangeSub: (action: string, i?: string, e?: any) => void;
+  /**
+   * The active menu item
+   */
+  activeMenuItem?: string | null;
+  /**
+   * Whether the mobile menu is open
+   */
+  openMobileMenu: boolean;
+  /**
+   * Toggle the mobile menu
+   */
+  toggleMenu: () => void;
+  /**
+   * Set the mobile menu to open or closed
+   */
+  setOpenMobileMenu: (open: boolean) => void;
+}
+
+const MainNavigationContext = React.createContext<MainNavigationContextType>({
+  onChangeSub: (e) => e,
+  activeMenuItem: null,
+  openMobileMenu: false,
+  toggleMenu: () => {},
+  setOpenMobileMenu: () => {},
+});
+export default MainNavigationContext;

package/src/components/MainNavigation/MainNavigationExternal.tsx

@@ -0,0 +1,338 @@
+import React from "react";
+import { useEffect, useRef } from "react";
+import { WfpLogoVerticalEn } from "@progressiveui/icons-react";
+import { ChevronDown, ChevronUp } from "@progressiveui/icons-react";
+
+import Button from "../Button";
+import User from "../User";
+import Wrapper from "../Wrapper";
+import PropTypes from "prop-types";
+import { useTogglable } from "../../hooks";
+import useSettings from "../../hooks/useSettings";
+
+const LanguageExternal = ({ children, primaryLanguage }) => {
+  const { prefix } = useSettings();
+  const ref = useRef<HTMLInputElement>(null);
+  const languageTogglable = useTogglable();
+
+  useEffect(() => {
+    const checkIfClickedOutside = (e) => {
+      // If the menu is open and the clicked target is not within the menu,
+      // then close the menu
+      if (
+        languageTogglable.isOpen &&
+        ref.current &&
+        !ref.current.contains(e.target)
+      ) {
+        languageTogglable.close();
+      }
+    };
+    document.addEventListener("mousedown", checkIfClickedOutside);
+    return () => {
+      // Cleanup the event listener
+      document.removeEventListener("mousedown", checkIfClickedOutside);
+    };
+  }, [languageTogglable.isOpen]);
+
+  return (
+    <div className={`${prefix}--language-ext`} ref={ref}>
+      <div
+        className={`${prefix}--language-ext__trigger`}
+        role="presentation"
+        onClick={() =>
+          languageTogglable.isOpen
+            ? languageTogglable.close()
+            : languageTogglable.open()
+        }
+      >
+        <span>{primaryLanguage}</span>
+        {languageTogglable.isOpen ? <ChevronUp /> : <ChevronDown />}
+      </div>
+      <ul
+        className={`${prefix}--language-ext__dropdown ${
+          languageTogglable.isOpen
+            ? `${prefix}--language-ext__dropdown--is-shown`
+            : ""
+        }`}
+      >
+        {children}
+      </ul>
+    </div>
+  );
+};
+
+const UserExternal = ({ username, children, userImage }) => {
+  const { prefix } = useSettings();
+
+  const ref = useRef<HTMLInputElement>(null);
+  const userTogglable = useTogglable();
+
+  useEffect(() => {
+    const checkIfClickedOutside = (e) => {
+      // If the menu is open and the clicked target is not within the menu,
+      // then close the menu
+      if (
+        userTogglable.isOpen &&
+        ref?.current &&
+        !ref.current.contains(e.target)
+      ) {
+        userTogglable.close();
+      }
+    };
+    document.addEventListener("mousedown", checkIfClickedOutside);
+    return () => {
+      // Cleanup the event listener
+      document.removeEventListener("mousedown", checkIfClickedOutside);
+    };
+  }, [userTogglable.isOpen]);
+
+  return (
+    <div className={`${prefix}--user-ext`} ref={ref}>
+      <div
+        className={`${prefix}--user-ext__trigger`}
+        role="presentation"
+        onClick={() =>
+          userTogglable.isOpen ? userTogglable.close() : userTogglable.open()
+        }
+      >
+        <User alt="User avatar" name={username} image={userImage} />
+        {userTogglable.isOpen ? <ChevronUp /> : <ChevronDown />}
+      </div>
+      <ul
+        className={`${prefix}--user-ext__dropdown ${
+          userTogglable.isOpen ? `${prefix}--user-ext__dropdown--is-shown` : ""
+        }`}
+      >
+        {children}
+      </ul>
+    </div>
+  );
+};
+
+interface MainNavigationExternalProps {
+  /**
+   * The name of your product can be applied to this prop
+   */
+  productName?: string;
+
+  /**
+   * The CSS class name to be placed on the wrapping element.
+   */
+  className?: string;
+
+  /**
+   * List of laguages your site support
+   */
+  languageList?: React.ReactNode;
+
+  /**
+   * The name of signed in user can be applied to this prop
+   */
+  username?: string;
+
+  /**
+   * The image of signed in user can be applied to this prop
+   */
+  userImage?: string;
+
+  /**
+   * The dropdown details of user can be applied to this prop
+   */
+  userDetails?: React.ReactNode;
+
+  /**
+   * This prop accepts the first language your website is in. Default: English
+   */
+  primaryLanguage?: string;
+  components?: any;
+  children?: React.ReactNode;
+  pageWidth?:
+    | "sm"
+    | "md"
+    | "lg"
+    | "full"
+    | "xs"
+    | "narrow"
+    | "narrower"
+    | "narrowest";
+}
+
+const MainNavigationExternal = ({
+  productName,
+  primaryLanguage,
+  languageList,
+  username,
+  pageWidth = "full",
+  components = {},
+  userImage,
+  userDetails,
+  children,
+}: MainNavigationExternalProps) => {
+  const { prefix } = useSettings();
+  const ref = useRef<HTMLDivElement | null>(null);
+  const navTogglable = useTogglable();
+
+  useEffect(() => {
+    const checkIfClickedOutside = (e) => {
+      // If the menu is open and the clicked target is not within the menu,
+      // then close the menu
+      if (
+        navTogglable.isOpen &&
+        ref.current &&
+        !ref.current.contains(e.target)
+      ) {
+        navTogglable.close();
+      }
+    };
+    document.addEventListener("mousedown", checkIfClickedOutside);
+    return () => {
+      // Cleanup the event listener
+      document.removeEventListener("mousedown", checkIfClickedOutside);
+    };
+  }, [navTogglable.isOpen]);
+
+  const defaultComponents = {
+    LanguageExternal,
+    UserExternal,
+  };
+
+  const c = { ...defaultComponents, ...components };
+
+  return (
+    <header className={`${prefix}--main-navigation-ext`}>
+      <Wrapper
+        pageWidth={pageWidth}
+        className={`${prefix}--main-navigation-ext__wrapper`}
+      >
+        <div className={`${prefix}--main-navigation-ext__branding`}>
+          <div className={`${prefix}--main-navigation-ext__wfp-logo`}>
+            <WfpLogoVerticalEn
+              className={`${prefix}--main-navigation-ext__wfp-logo-svg`}
+              alt="WFP"
+              width="100%"
+            />
+          </div>
+          <div className={`${prefix}--main-navigation-ext__product-name`}>
+            {productName}
+          </div>
+        </div>
+        <div className={`${prefix}--main-navigation-ext__main`}>
+          <div className={`${prefix}--main-navigation-ext__settings`}>
+            <c.LanguageExternal primaryLanguage={primaryLanguage}>
+              {languageList}
+            </c.LanguageExternal>
+            <c.UserExternal username={username} userImage={userImage}>
+              {userDetails}
+            </c.UserExternal>
+          </div>
+          <div className={`${prefix}--main-navigation-ext__nav`} ref={ref}>
+            <div
+              className={`${prefix}--main-navigation-ext__mobile-menu-button`}
+            >
+              <Button
+                kind="secondary"
+                small
+                onClick={() =>
+                  navTogglable.isOpen
+                    ? navTogglable.close()
+                    : navTogglable.open()
+                }
+              >
+                Menu
+              </Button>
+            </div>
+            <div
+              className={`${prefix}--main-navigation-ext__nav-wrapper
+            ${navTogglable.isOpen ? "wfp--main-navigation-ext--is-shown" : ""}`}
+            >
+              {/* This nav can include both links and buttons */}
+              <nav
+                className={`${prefix}--main-navigation-ext__site-nav ${
+                  navTogglable.isOpen
+                    ? "wfp--main-navigation-ext--is-shown"
+                    : ""
+                }`}
+              >
+                <ul className={`${prefix}--main-navigation-ext__site-nav-list`}>
+                  {children}
+                  <div
+                    className={`${prefix}--main-navigation-ext__mobile-settings`}
+                  >
+                    <li className={`${prefix}--main-navigation-ext__site-link`}>
+                      <LanguageExternal primaryLanguage={primaryLanguage}>
+                        {languageList}
+                      </LanguageExternal>
+                    </li>
+                    <li className={`${prefix}--main-navigation-ext__site-link`}>
+                      <UserExternal username={username} userImage={userImage}>
+                        {userDetails}
+                      </UserExternal>
+                    </li>
+                  </div>
+                </ul>
+              </nav>
+              {/* To show if the user is a guest */}
+              {/* <nav className={`${prefix}--main-navigation-ext__auth`}>
+                <ul className={`${prefix}--main-navigation-ext__auth-list`}>
+                  <li className={`${prefix}--main-navigation-ext__auth-action`}>
+                    <Button kind="accent" small>
+                      Register
+                    </Button>
+                  </li>
+                  <li className={`${prefix}--main-navigation-ext__auth-action`}>
+                    <Button kind="primary" small>
+                      Sign in
+                    </Button>
+                  </li>
+                </ul>
+              </nav> */}
+            </div>
+          </div>
+        </div>
+      </Wrapper>
+    </header>
+  );
+};
+
+MainNavigationExternal.propTypes = {
+  /**
+   * The name of your product can be applied to this prop
+   */
+  productName: PropTypes.node,
+
+  /**
+   * The CSS class name to be placed on the wrapping element.
+   */
+  className: PropTypes.string,
+
+  /**
+   * List of laguages your site support
+   */
+  languageList: PropTypes.node,
+
+  /**
+   * The name of signed in user can be applied to this prop
+   */
+  username: PropTypes.node,
+
+  /**
+   * The image of signed in user can be applied to this prop
+   */
+  userImage: PropTypes.string,
+
+  /**
+   * The dropdown details of user can be applied to this prop
+   */
+  userDetails: PropTypes.node,
+
+  /**
+   * This prop accepts the first language your website is in. Default: English
+   */
+  primaryLanguage: PropTypes.string,
+};
+
+MainNavigationExternal.defaultProps = {
+  primaryLanguage: "English",
+};
+
+export default MainNavigationExternal;

package/src/components/MainNavigation/MainNavigationRtl-story.legacy.js

@@ -0,0 +1,95 @@
+import React from 'react';
+import { storiesOf } from '@storybook/react';
+import { action } from '@storybook/addon-actions';
+
+import MainNavigation from '.';
+import MainNavigationItem from '../MainNavigationItem';
+
+import Search from '../Search';
+import Link from '../Link';
+import User from '../User';
+
+storiesOf('Components|MainNavigation')
+  .addDecorator((story) => <div style={{ direction: 'rtl' }}>{story()}</div>)
+  .add(
+    'Right to left',
+    /*`
+        The MainNavigation is used across all applications, it is the starting point of the application and offers the top level navigation items.
+      `,*/
+    () => (
+      <MainNavigation logo="WFP UI">
+        <MainNavigationItem
+          subNavigation={
+            <div>
+              <h3>Hello World</h3>
+              <p>
+                Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed
+                diam nonumy eirmod tempor invidunt ut labore et dolore magna
+                aliquyam erat, sed diam voluptua. At vero eos et accusam et
+                justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea
+                takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum
+                dolor sit amet, consetetur sadipscing elitr, sed diam nonumy
+                eirmod tempor invidunt ut labore et dolore magna aliquyam erat,
+                sed diam voluptua. At vero eos et accusam et justo duo dolores
+                et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus
+                est Lorem ipsum dolor sit amet.
+              </p>
+            </div>
+          }>
+          <Link href="http://communities.wfp.org" target="_blank">
+            التاريخ
+          </Link>
+        </MainNavigationItem>
+        <MainNavigationItem
+          subNavigation={
+            <div>
+              <h3>أحكم</h3>
+            </div>
+          }>
+          <Link href="http://manuals.wfp.org" target="_blank">
+            ذات
+          </Link>
+        </MainNavigationItem>
+        <MainNavigationItem>
+          <Link href="https://go.docs.wfp.org" target="_blank">
+            وحتى
+          </Link>
+        </MainNavigationItem>
+        <MainNavigationItem>
+          <Link href="http://opweb.wfp.org" target="_blank">
+            ألمانيا
+          </Link>
+        </MainNavigationItem>
+        <MainNavigationItem>
+          <Search
+            small
+            id="search-2"
+            labelText="بحث"
+            placeholder="بحث"
+            onChange={action('onChange')}
+          />
+        </MainNavigationItem>
+        <MainNavigationItem
+          className="wfp--main-navigation__user"
+          subNavigation={
+            <div>
+              <h3>Hello World</h3>
+              <p>
+                Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed
+                diam nonumy eirmod tempor invidunt ut labore et dolore magna
+                aliquyam erat, sed diam voluptua. At vero eos et accusam et
+                justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea
+                takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum
+                dolor sit amet, consetetur sadipscing elitr, sed diam nonumy
+                eirmod tempor invidunt ut labore et dolore magna aliquyam erat,
+                sed diam voluptua. At vero eos et accusam et justo duo dolores
+                et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus
+                est Lorem ipsum dolor sit amet.
+              </p>
+            </div>
+          }>
+          <User title="والنفيس" />
+        </MainNavigationItem>
+      </MainNavigation>
+    )
+  );

package/src/components/MainNavigation/MobileButton.tsx

@@ -0,0 +1,29 @@
+import React, { PropsWithChildren } from 'react';
+import Button from '../Button';
+
+export type MobileButtonProps = PropsWithChildren<{
+  /**
+   * Status of the mobile menu
+   */
+  openMobileMenu?: boolean;
+  /**
+   * Prefix for the component CSS class
+   */
+  prefix?: string;
+  /**
+   * Toggle the Menu
+   */
+  toggleMenu?: () => void;
+}>;
+
+const MobileButton: React.FC<MobileButtonProps> = ({ toggleMenu, prefix }) => {
+  return (
+    <Button
+      className={`${prefix}--main-navigation__button`}
+      onClick={toggleMenu}>
+      Menu
+    </Button>
+  );
+};
+
+export default MobileButton;