@progressiveui/react 1.22.0

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

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

@@ -0,0 +1,4 @@
+export { default as MainNavigation } from './MainNavigation';
+export { default as MainNavigationExternal } from './MainNavigationExternal';
+export { default as MainNavigationContext } from './MainNavigationContext';
+export { default as useMainNavigation } from './useMainNavigation';

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

@@ -0,0 +1,74 @@
+/* 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

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

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

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

package/src/components/MdxComponents/MdxComponents.stories.tsx

@@ -0,0 +1,32 @@
+import React from "react";
+import markdown from "./README.mdx";
+import MarkdownContent from "./markdown.mdx";
+
+import { MDXProvider } from "@mdx-js/react";
+import mdxComponents from "./MdxComponentsNew";
+
+export default {
+  title: "Components/Content Related/Mdx components",
+  component: mdxComponents,
+  parameters: {
+    componentSubtitle: "Component",
+    mdx: markdown,
+    introText: `MDX is an authorable format that lets you seamlessly write JSX in your Markdown documents.`,
+
+    docs: {
+      source: {
+        code: `
+import { mdxComponents } from '@progressiveui/react';
+import { MDXProvider } from '@mdx-js/react';
+
+<MDXProvider components={mdxComponents}>{children}</MDXProvider>`,
+      },
+    },
+  },
+};
+
+export const Regular = (args) => (
+  <MDXProvider components={mdxComponents}>
+    <MarkdownContent />
+  </MDXProvider>
+);

package/src/components/MdxComponents/MdxComponentsNew.tsx

@@ -0,0 +1,181 @@
+import Story from '../Story';
+import React from 'react';
+import { List, ListItem } from '../List';
+import { Callout } from '../Notification';
+import Table from '../Table';
+import useSettings from '../../hooks/useSettings';
+import Link from '../Link';
+import Button from '../Button';
+import { Accordion, AccordionItem } from '../Accordion';
+import Text from '../Text';
+
+/** Links are used as navigational elements. They may appear on their own, within a sentence or paragraph, or directly following the content. */
+
+const wrapper = (props) => <Story {...props} />;
+
+const li = (props) => {
+  const kind =
+    typeof props.children === 'string' ? props.children.substring(0, 1) : '';
+
+  if (kind === '✓' || kind === '✗')
+    return (
+      <ListItem kind={kind === '✓' ? 'checkmark' : 'cross'} {...props}>
+        {props.children.substring(1, props.children.length)}
+      </ListItem>
+    );
+
+  return <li {...props}>{props.children}</li>;
+};
+
+const ul = ({ children, ...other }) => {
+  return (
+    <List {...other} kind="bullets">
+      {children}
+    </List>
+  );
+};
+
+const ol = ({ children, ...other }) => {
+  return (
+    <List {...other} kind="ordered">
+      {children}
+    </List>
+  );
+};
+
+const h1 = (props) => {
+  return (
+    <Text kind="h1" {...props}>
+      {props.children}
+    </Text>
+  );
+};
+
+const h2 = (props) => {
+  return (
+    <Text kind="h2" {...props}>
+      {props.children}
+    </Text>
+  );
+};
+
+const h3 = (props) => {
+  return (
+    <Text kind="h3" {...props}>
+      {props.children}
+    </Text>
+  );
+};
+
+const h4 = (props) => {
+  return (
+    <Text kind="h4" {...props}>
+      {props.children}
+    </Text>
+  );
+};
+
+const h5 = (props) => {
+  return (
+    <Text kind="h5" {...props}>
+      {props.children}
+    </Text>
+  );
+};
+
+const p = (props) => {
+  return <p {...props}>{props.children}</p>;
+};
+
+const table = (props) => {
+  return <Table {...props}>{props.children}</Table>;
+};
+
+const a = (props) => {
+  return (
+    <Link inline {...props}>
+      {props.children}
+    </Link>
+  );
+};
+
+const code = (props) => {
+  const settings = useSettings();
+  return (
+    <code className={`${settings.prefix}--story__code`} {...props}>
+      {props.children}
+    </code>
+  );
+};
+
+const pre = (props) => {
+  const settings = useSettings();
+  return (
+    <pre className={`${settings.prefix}--story__pre`} {...props}>
+      {props.children}
+    </pre>
+  );
+};
+
+/*const inlineCode = (props) => {
+  const settings = useSettings();
+  return (
+    <code className={`${settings.prefix}--story__inlinecode`} {...props}>
+      {props.children}
+    </code>
+  );
+};*/
+
+const blockquote = ({ children, ...other }) => {
+  if (Array.isArray(children) && children.length >= 2 && children[0].props)
+    return (
+      <Callout
+        kind="info"
+        {...other}
+        subtitle={children.map((e, i) => {
+          if (i > 0) return e;
+        })}
+        title={children[0].props.children}
+      />
+    );
+  return <Callout kind="info" {...other} subtitle={children} />;
+};
+
+/*const code = ({ children, className, ...other }) => {
+    const language = className && className.split('-');
+    return (
+      <PureSource
+        format={false}
+        dark
+        language={(language && language[1]) || 'plaintext'}
+        code={children as string}
+        {...other}
+      />
+    );
+  };
+  */
+
+// eslint-disable-next-line @typescript-eslint/no-explicit-any
+const mdxComponents: any = {
+  wrapper,
+  h1,
+  h2,
+  h3,
+  h4,
+  h5,
+  p,
+  li,
+  a,
+  ul,
+  ol,
+  code,
+  pre,
+  // inlineCode,
+  table,
+  blockquote,
+  Button,
+  Accordion,
+  AccordionItem,
+};
+
+export default mdxComponents;

package/src/components/MdxComponents/README.mdx

@@ -0,0 +1,22 @@
+## Usage
+
+Markdown is an easy-to-read and easy-to-write syntax for _writing_ for the web. With [MDX](https://mdxjs.com/) you can import components, such as interactive charts or alerts, and embed them within your content.
+This makes writing long-form content easy and standardized.
+
+The `mdxComponents` provide additional components using the UI-Kits default formatting.
+
+#### When to use
+
+Display modern content
+
+#### When not to use
+
+Do not nest multiple Inputs. Each input should only have one label text.
+
+## Related
+
+[Story](?path=/docs/components-story--regular)
+
+[Text](?path=/docs/components-text--regular)
+
+<Button>Button</Button>

package/src/components/MdxComponents/index.ts

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