@progressiveui/react 2.0.3 → 2.0.5

package/src/components/MainNavigation/MainNavigation.tsx

@@ -1,152 +0,0 @@
-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";
-
-/** 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`}>{logo}</div>
-          </div>
-          <ul className={listClasses}>{children}</ul>
-        </Wrapper>
-      </MainNavigationContext.Provider>
-    </nav>
-  );
-};
-
-MainNavigation.displayName = "MainNavigation";
-
-export default MainNavigation;

package/src/components/MainNavigation/MainNavigationContext.ts

@@ -1,34 +0,0 @@
-/* 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/MainNavigationRtl-story.legacy.js

@@ -1,95 +0,0 @@
-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

@@ -1,29 +0,0 @@
-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;

package/src/components/MainNavigation/README.mdx.legacy

@@ -1,173 +0,0 @@
-### Usage
-
-The MainNavigation is used across all applications, it is the starting point of the application and offers the top level navigation items.
-
-import { List, ListItem } from '../List';
-
-#### When to use
-
-- ✓ Internal and external applications
-- ✓ The MainNavigation can be used for both internal and external websites.
-
-#### When not to use
-
-- ✗ External websites (wfp.org, etc.): The header might not be the right solution for external websites. Please consult the #ux-ui channel on Slack.
-- ✗ Do not use WFP's logo inside the MainNavigation.
-
-```js
-import { MainNavigation, MainNavigationItem } from '@progressiveui/react';
-```
-
-### SubNavigation
-
-It can be combined with a Dropdown SubNavigation.
-
-```js
-import {
-  SubNavigation,
-  SubNavigationHeader,
-  SubNavigationTitle,
-  SubNavigationFilter,
-  SubNavigationContent,
-  SubNavigationList,
-  SubNavigationGroup,
-  SubNavigationItem,
-} from '@progressiveui/react';
-```
-
-The maximum number of items is 6 to 8 items depending on the average word length.
-
-### Closing the SubNavigation
-
-#### Using `refs`
-
-From outside (using react-router, etc.) using `refs` a function can be triggered every time a route changes.
-
-##### Using react-router (withRouter)
-
-```js
-import React from 'react';
-import PropTypes from 'prop-types';
-import { withRouter } from 'react-router';
-
-class Parent extends Component {
-  static propTypes = {
-    match: PropTypes.object.isRequired,
-    location: PropTypes.object.isRequired,
-    history: PropTypes.object.isRequired,
-  };
-
-  constructor(props) {
-    super(props);
-    this.child = React.createRef();
-  }
-
-  // Depending on your usecase/performance use getDerivedStateFromProps instead
-  componentDidUpdate(prevProps, prevState) {
-    if (!prevState.locaction && this.props.locaction) {
-      this.closeMenu();
-    }
-  }
-
-  openFirstMenu = () => {
-    this.child.current.onChangeSub('toggle', 0);
-  };
-
-  closeMenu = () => {
-    this.child.current.onChangeSub('close');
-  };
-
-  render() {
-    return (
-      <div>
-        <MainNavigation ref={this.child} />
-        <button onClick={this.openFirstMenu}>Open first menu</button>
-        <button onClick={this.closeMenu}>Close everything</button>
-      </div>
-    );
-  }
-}
-
-const ParentWithRouter = withRouter(Parent);
-```
-
-##### Trigger with external button
-
-```js
-class Parent extends Component {
-  constructor(props) {
-    super(props);
-    this.child = React.createRef();
-  }
-
-  closeMenu = () => {
-    this.child.current.onChangeSub('close');
-  };
-
-  render() {
-    return (
-      <div>
-        <MainNavigation ref={this.child} />
-        <button onClick={this.closeMenu}>Close everything</button>
-      </div>
-    );
-  }
-}
-```
-
-#### Using function inside `children`
-
-From the `children` any change can be manually triggered by a function
-
-```js
- <MainNavigation>
-    {({ onChangeSub }) => {
-      return (
-        <React.Fragment>
-          <MainNavigationItem
-            subNavigation={
-              <div>
-                <Link
-                  onClick={() => onChangeSub('close')}>
-                  Close Demo
-                </Link>
-              </div>
-            }>
-            <User ellipsis title="Max Mustermann" />
-          </MainNavigationItem>
-        </React.Fragment>
-      );
-    }}
-  </MainNavigation>
-));
-```
-
-### SubNavigation for the User
-
-An `User` `MainNavigationItem` consists out of the `User` component and a `SubNavigation`.
-
-```html
-  <MainNavigationItem
-  className="wfp--main-navigation__user"
-  subNavigation={
-    <SubNavigation>
-      <SubNavigationHeader>
-        <SubNavigationTitle>Welcome Max!</SubNavigationTitle>
-        <SubNavigationLink>
-          <Button secondary small>Logout</Button>
-        </SubNavigationLink>
-      </SubNavigationHeader>
-      <SubNavigationContent>
-       {/* Additional content */}
-      </SubNavigationContent>
-    </SubNavigation>
-  }>
-  <User ellipsis title="Max Mustermann" />
-</MainNavigationItem>
-```
-
-### Usage with vanilla Java-Script
-
-Using the `MainNavigation` in applications not using `react.js` requires a custom implementation. An example can be found at [Codesandbox](https://codesandbox.io/s/mainnavigation-vanillajs-en5r4).
-
-[Source code of vanilla.js implementation on GitHub](https://github.com/wfp/ui/blob/master/src/components/MainNavigation/main-navigation.js)

package/src/components/MainNavigation/index.ts

@@ -1,3 +0,0 @@
-export { default as MainNavigation } from "./MainNavigation";
-export { default as MainNavigationContext } from "./MainNavigationContext";
-export { default as useMainNavigation } from "./useMainNavigation";

package/src/components/MainNavigation/main-navigation.js

@@ -1,74 +0,0 @@
-/* Navigation toggle on mobile */
-
-(function () {
-  var hamburger = {
-    navToggle: document.querySelector('.wfp--main-navigation__button'),
-    nav: document.querySelector('.wfp--main-navigation__list'),
-
-    doToggle: function (e) {
-      e.preventDefault();
-      this.nav.classList.toggle('wfp--main-navigation__list--open');
-    },
-  };
-
-  hamburger.navToggle.addEventListener('click', function (e) {
-    hamburger.doToggle(e);
-  });
-})();
-
-/* Mobile Navigation activator */
-
-(function () {
-  var open = false;
-  var documentEvent = document;
-
-  const outsideClickListener = (event) => {
-    const element = document.querySelector('.wfp--main-navigation__sub--open');
-    if (element === null) return;
-    if (!element.contains(event.target)) {
-      subItem.doToggle(event, undefined);
-    }
-  };
-
-  var subItem = {
-    navToggle: document.querySelectorAll(
-      '.wfp--main-navigation__trigger--has-sub'
-    ),
-    nav: document.querySelectorAll('.wfp--main-navigation__item'),
-    sub: document.querySelectorAll('.wfp--main-navigation__sub'),
-
-    doToggle: function (e, b) {
-      e.preventDefault();
-      if (documentEvent !== undefined)
-        documentEvent.removeEventListener('click', outsideClickListener, false);
-
-      for (let d = 0; d < subItem.navToggle.length; d++) {
-        this.navToggle[d].classList.remove(
-          'wfp--main-navigation__trigger--open'
-        );
-        this.nav[d].classList.remove('wfp--main-navigation__item--open');
-        this.sub[d].classList.remove('wfp--main-navigation__sub--open');
-      }
-      if (b !== open && b !== undefined) {
-        this.navToggle[b].classList.toggle(
-          'wfp--main-navigation__trigger--open'
-        );
-        this.nav[b].classList.toggle('wfp--main-navigation__item--open');
-        this.sub[b].classList.toggle('wfp--main-navigation__sub--open');
-        setTimeout(function () {
-          documentEvent.addEventListener('click', outsideClickListener, false);
-        }, 500);
-        open = b;
-      } else {
-        open = false;
-      }
-    },
-  };
-
-  for (var n = 0; n < subItem.navToggle.length; n++) {
-    const u = n;
-    subItem.navToggle[n].addEventListener('click', function (e) {
-      subItem.doToggle(e, u);
-    });
-  }
-})();

package/src/components/MainNavigation/useMainNavigation.tsx

@@ -1,17 +0,0 @@
-import { useContext } from "react";
-
-import MainNavigationContext, {
-  MainNavigationContextType,
-} from "./MainNavigationContext";
-
-/** The useMainNavigation() is a hook to access the current state of the MainNavigation and manipulate it. */
-
-function useMainNavigation(): MainNavigationContextType {
-  const settings = useContext(MainNavigationContext);
-
-  return settings;
-}
-
-useMainNavigation.displayName = "useMainNavigation";
-
-export default useMainNavigation;

package/src/components/MainNavigationItem/MainNavigationItem.tsx

@@ -1,110 +0,0 @@
-import React, { useEffect, useRef, useState } from "react";
-import classNames from "classnames";
-import { Close, ChevronDown } from "@progressiveui/icons-react";
-import useSettings from "../../hooks/useSettings";
-import useMainNavigation from "../MainNavigation/useMainNavigation";
-
-/**
- * MainNavigationItem component for use with MainNavigation. This component is a wrapper for the `a` element.
- */
-interface MainNavigationItemProps extends React.ComponentPropsWithRef<"a"> {
-  /**
-   * If defined the `MainNaviationItem` will have a toggleable
-   * SubNavigation. See the `SubNavigation` component for details on usage
-   */
-  subNavigation?: React.ReactNode;
-  /**
-   * If the subNavigation is open, the subNavigation will be as wide as the content
-   */
-  subNavWideAsContent?: boolean;
-  /**
-   * Specify the kind of the subNavigation
-   */
-  kind?: "fullWidth" | "callout";
-  /**
-   * Specify a callback that will be called when the subNavigation is opened or closed
-   */
-  onChangeSub?: (action: string, id?: number, e?: any) => void;
-  /**
-   * Specify if you want to use the external version of the component
-   */
-  external?: boolean;
-}
-
-const MainNavigationItem = ({
-  className,
-  children,
-  kind,
-  subNavigation,
-  subNavWideAsContent,
-}: MainNavigationItemProps) => {
-  const { prefix } = useSettings();
-
-  const { onChangeSub, activeMenuItem /*menuItem */ } = useMainNavigation();
-
-  // eslint-disable-next-line @typescript-eslint/no-unused-vars
-  const [menuItemId] = useState(Math.random().toString(36));
-
-  const wrapperRef = useRef<HTMLLIElement>(null);
-
-  useEffect(() => {
-    if (menuItemId === activeMenuItem) {
-      document.addEventListener("mousedown", handleClickOutside);
-    } else {
-      document.removeEventListener("mousedown", handleClickOutside);
-    }
-
-    return () => {
-      document.removeEventListener("mousedown", handleClickOutside);
-    };
-  }, [activeMenuItem]);
-
-  const handleClickOutside = (e) => {
-    if (wrapperRef?.current && !wrapperRef.current.contains(e.target)) {
-      onChangeSub("close");
-    }
-  };
-
-  const wrapperClasses = classNames(className, {
-    [`${prefix}--main-navigation__item`]: true,
-    [`${prefix}--main-navigation__item--open`]: menuItemId === activeMenuItem,
-    [`${prefix}--content-width`]: subNavigation && subNavWideAsContent,
-  });
-
-  const triggerClasses = classNames({
-    [`${prefix}--main-navigation__trigger`]: true,
-    [`${prefix}--main-navigation__trigger--has-sub`]: subNavigation,
-    [`${prefix}--main-navigation__trigger--open`]:
-      menuItemId === activeMenuItem,
-  });
-
-  const Icon = menuItemId === activeMenuItem ? Close : ChevronDown;
-
-  const subClasses = classNames({
-    [`${prefix}--main-navigation__sub`]: true,
-    [`${prefix}--main-navigation__sub--${kind}`]: kind,
-    [`${prefix}--main-navigation__sub--open`]: menuItemId === activeMenuItem,
-  });
-
-  return (
-    <li className={wrapperClasses} ref={wrapperRef as React.Ref<HTMLLIElement>}>
-      <div
-        className={triggerClasses}
-        onClick={() => onChangeSub("toggle", menuItemId)}
-      >
-        {children}
-        {subNavigation && (
-          <Icon
-            className={`${prefix}--main-navigation__trigger__icon`}
-            description={
-              menuItemId === activeMenuItem ? "close icon" : "expand icon"
-            }
-          />
-        )}
-      </div>
-      {subNavigation && <div className={subClasses}>{subNavigation}</div>}
-    </li>
-  );
-};
-
-export default MainNavigationItem;

package/src/components/MainNavigationItem/index.ts

@@ -1 +0,0 @@
-export { default } from './MainNavigationItem';