@ilo-org/react 0.14.0 → 0.15.0

package/src/components/Navigation/Navigation.tsx

@@ -1,246 +0,0 @@
-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 ${prefix}--container`}>
-          <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 ${prefix}--container`}>
-          <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 ${prefix}--container`}>
-                <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 ${prefix}--container`}>
-              <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 ${prefix}--container`}>
-            <SearchField
-              input={searchfield?.input}
-              action={searchfield?.action}
-            ></SearchField>
-          </div>
-        </div>
-      </div>
-    </header>
-  );
-};
-
-export default Navigation;

package/src/components/Navigation/index.ts

@@ -1 +0,0 @@
-export { default as Navigation } from "./Navigation";

package/src/components/Notification/Notification.args.ts

@@ -1,157 +0,0 @@
-import { NotificationProps } from "./Notification.props";
-
-const hascta: NotificationProps = {
-  className: "storybook",
-  closelabel: "Close",
-  copy: "Lorem ipsum dolor sit amet, consectetur adipiscing elit.",
-  cta: {
-    label: "Optional CTA",
-    url: "http://www.google.com",
-  },
-  headline: "With CTA",
-  placement: "inline",
-  type: "info",
-  timestamp: {
-    human: "Dec 7, 2022",
-    unix: "1670389200",
-  },
-};
-
-const nocta: NotificationProps = {
-  className: "storybook",
-  closelabel: "Close",
-  copy: "Lorem ipsum dolor sit amet, consectetur adipiscing elit.",
-  headline: "Notification Info",
-  placement: "inline",
-  type: "info",
-  timestamp: {
-    human: "Dec 7, 2022",
-    unix: "1670389200",
-  },
-};
-
-const error: NotificationProps = {
-  className: "storybook",
-  closelabel: "Close",
-  copy: "Lorem ipsum dolor sit amet, consectetur adipiscing elit.",
-  headline: "Notification Error",
-  placement: "inline",
-  type: "error",
-  timestamp: {
-    human: "Dec 7, 2022",
-    unix: "1670389200",
-  },
-};
-
-const success: NotificationProps = {
-  className: "storybook",
-  closelabel: "Close",
-  copy: "Lorem ipsum dolor sit amet, consectetur adipiscing elit.",
-  headline: "Notification Success",
-  placement: "inline",
-  type: "success",
-  timestamp: {
-    human: "Dec 7, 2022",
-    unix: "1670389200",
-  },
-};
-
-const warning: NotificationProps = {
-  className: "storybook",
-  closelabel: "Close",
-  copy: "Lorem ipsum dolor sit amet, consectetur adipiscing elit.",
-  headline: "Notification Warning",
-  placement: "inline",
-  type: "warning",
-  timestamp: {
-    human: "Dec 7, 2022",
-    unix: "1670389200",
-  },
-};
-
-const hasctadialog: NotificationProps = {
-  className: "storybook",
-  closelabel: "Close",
-  copy: "Lorem ipsum dolor sit amet, consectetur adipiscing elit.",
-  cta: {
-    label: "Optional CTA",
-    url: "http://www.google.com",
-  },
-  headline: "Notification With CTA",
-  placement: "dialog",
-  type: "info",
-  timestamp: {
-    human: "Dec 7, 2022",
-    unix: "1670389200",
-  },
-};
-
-const infodialog: NotificationProps = {
-  className: "storybook",
-  closelabel: "Close",
-  copy: "Lorem ipsum dolor sit amet, consectetur adipiscing elit.",
-  headline: "Notification Info",
-  placement: "dialog",
-  type: "info",
-  timestamp: {
-    human: "Dec 7, 2022",
-    unix: "1670389200",
-  },
-};
-
-const errordialog: NotificationProps = {
-  className: "storybook",
-  closelabel: "Close",
-  copy: "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.",
-  headline: "Notification Error",
-  placement: "dialog",
-  type: "error",
-  timestamp: {
-    human: "Dec 7, 2022",
-    unix: "1670389200",
-  },
-};
-
-const successdialog: NotificationProps = {
-  className: "storybook",
-  closelabel: "Close",
-  copy: "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.",
-  headline: "Notification Success",
-  placement: "dialog",
-  type: "success",
-  timestamp: {
-    human: "Dec 7, 2022",
-    unix: "1670389200",
-  },
-};
-
-const warningdialog: NotificationProps = {
-  className: "storybook",
-  closelabel: "Close",
-  copy: "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.",
-  headline: "Notification Warning",
-  placement: "dialog",
-  type: "warning",
-  timestamp: {
-    human: "Dec 7, 2022",
-    unix: "1670389200",
-  },
-};
-
-/**
- * Sample prop definitions for Notification's enumerable properties (imported in stories and test)
- */
-const NotificationArgs = {
-  error,
-  errordialog,
-  hascta,
-  hasctadialog,
-  infodialog,
-  nocta,
-  success,
-  successdialog,
-  warning,
-  warningdialog,
-};
-
-export default NotificationArgs;

package/src/components/Notification/Notification.props.ts

@@ -1,67 +0,0 @@
-import { NotificationPlacement, NotificationTypes } from "../../types";
-
-interface CTAProps {
-  /**
-   * Specify the label of the CTA
-   */
-  label?: string;
-
-  /**
-   * Specify the url of the CTA
-   */
-  url?: string;
-}
-
-interface TimeStampProps {
-  /**
-   * Specify the human-readable time
-   */
-  human?: string;
-
-  /**
-   * Specify the UNIX timestamp
-   */
-  unix?: string;
-}
-
-export interface NotificationProps {
-  /**
-   * Specify an optional className to be added to your Notification component.
-   */
-  className?: string;
-
-  /**
-   * Specify the label for the close button
-   */
-  closelabel?: Required<string>;
-
-  /**
-   * Specify the copy
-   */
-  copy?: Required<string>;
-
-  /**
-   * Specify the settings for an option CTA
-   */
-  cta?: CTAProps;
-
-  /**
-   * Specify the headline
-   */
-  headline?: Required<string>;
-
-  /**
-   * Specify whether the notification is inline in the DOM or absolutely-positioned at a higher z-index
-   */
-  placement?: Required<NotificationPlacement>;
-
-  /**
-   * Specify an optional timestamp
-   */
-  timestamp?: TimeStampProps;
-
-  /**
-   * Specify the icon for the Notification
-   */
-  type?: NotificationTypes;
-}

package/src/components/Notification/Notification.tsx

@@ -1,78 +0,0 @@
-import { FC, useState } from "react";
-import classNames from "classnames";
-import useGlobalSettings from "../../hooks/useGlobalSettings";
-import { NotificationProps } from "./Notification.props";
-import { ButtonProps } from "../Button/Button.props";
-import { Button } from "../Button";
-
-const Notification: FC<NotificationProps> = ({
-  className,
-  closelabel,
-  copy,
-  cta,
-  headline,
-  placement,
-  timestamp,
-  type,
-}) => {
-  const { prefix } = useGlobalSettings();
-
-  const [display, setDisplay] = useState(true);
-
-  const baseClass = `${prefix}--notification`;
-  const notificationClasses = classNames(className, {
-    [baseClass]: true,
-    [`${baseClass}--${placement}`]: placement,
-    [`icon icon--${type}`]: type,
-  });
-
-  const ctaprops: ButtonProps = {
-    callback: () => {},
-    className: `${baseClass}--cta`,
-    children: false,
-    label: cta?.label,
-    size: "small",
-    type: "secondary",
-    url: cta?.url,
-  };
-
-  /**
-   * On click, close
-   */
-  const handleClick = () => {
-    setDisplay(false);
-  };
-
-  return (
-    <>
-      {display && (
-        <div
-          className={notificationClasses}
-          role="status"
-          aria-live="polite"
-          aria-relevant="additions"
-        >
-          <div className={`${baseClass}--content`}>
-            <h2 className={`${baseClass}--headline`}>{headline}</h2>
-            <p className={`${baseClass}--copy`}>{copy}</p>
-            {timestamp && (
-              <time className={`${baseClass}--date`} dateTime={timestamp.unix}>
-                {timestamp.human}
-              </time>
-            )}
-            {cta && <Button {...ctaprops} />}
-          </div>
-          <button
-            className={`${baseClass}--close`}
-            type="button"
-            onClick={() => handleClick()}
-          >
-            <span>{closelabel}</span>
-          </button>
-        </div>
-      )}
-    </>
-  );
-};
-
-export default Notification;

package/src/components/Notification/index.ts

@@ -1 +0,0 @@
-export { default as Notification } from "./Notification";

package/src/components/NumberPicker/NumberPicker.args.ts

@@ -1,50 +0,0 @@
-import { LabelledNumberPickerProps } from "./NumberPicker.props";
-
-const basic: LabelledNumberPickerProps = {
-  label: "How many items would you like?",
-  id: "numberpicker",
-  disabled: false,
-  error: false,
-  name: "text",
-  placeholder: "Select a number",
-  required: false,
-};
-
-const hashelper: LabelledNumberPickerProps = {
-  label: "How many items would you like?",
-  id: "numberpicker",
-  disabled: false,
-  error: false,
-  name: "text",
-  placeholder: "Select a number",
-  required: false,
-};
-
-const haserror: LabelledNumberPickerProps = {
-  label: "How many items would you like?",
-  id: "numberpicker",
-  disabled: false,
-  error: true,
-  name: "text",
-  placeholder: "Select a number",
-  required: false,
-};
-
-const hastooltip: LabelledNumberPickerProps = {
-  label: "How many items would you like?",
-  id: "numberpicker",
-  disabled: false,
-  error: false,
-  name: "text",
-  placeholder: "Select a number",
-  required: false,
-};
-
-const NumberPickerArgs = {
-  basic,
-  hashelper,
-  haserror,
-  hastooltip,
-};
-
-export default NumberPickerArgs;

package/src/components/NumberPicker/NumberPicker.props.ts

@@ -1,26 +0,0 @@
-import { FormFieldProps } from "../../types";
-import { LabelledFormFieldProps } from "../../types";
-export interface NumberPickerProps extends FormFieldProps<HTMLInputElement> {
-  /**
-   * The placeholder text when the input is empty.
-   */
-  placeholder?: string;
-
-  /**
-   * The minimum value of the input.
-   */
-  min?: number;
-
-  /**
-   * The maximum value of the input.
-   * */
-  max?: number;
-
-  /**
-   * The step value of the input.
-   * */
-  step?: number;
-}
-
-export type LabelledNumberPickerProps =
-  LabelledFormFieldProps<NumberPickerProps>;