@ilo-org/react 0.14.0 → 0.15.0

package/src/components/List/List.props.ts

@@ -1,29 +0,0 @@
-import { ReactElement } from "react";
-import { ListItemProps } from "./ListItem.props";
-
-export interface ListProps {
-  /**
-   * Specify the content of your List.
-   */
-  children?: ReactElement<ListItemProps> | ReactElement<ListItemProps>[];
-
-  /**
-   * Declare ordered, unordered or unstyled
-   */
-  ordered?: "unordered" | "ordered" | "unstyled";
-
-  /**
-   * Declare horizontal or default
-   */
-  alignment?: "default" | "horizontal";
-
-  /**
-   * Specify an optional title
-   */
-  title?: string;
-
-  /**
-   * Specify an optional className to be added to your accordion.
-   */
-  className?: string;
-}

package/src/components/List/List.tsx

@@ -1,36 +0,0 @@
-import classNames from "classnames";
-import { FC } from "react";
-import useGlobalSettings from "../../hooks/useGlobalSettings";
-import { ListProps } from "./List.props";
-
-const List: FC<ListProps> = ({
-  children,
-  className,
-  alignment = "default",
-  ordered = "unstyled",
-  title,
-}) => {
-  const { prefix } = useGlobalSettings();
-  const baseClass = `${prefix}--list`;
-  const unstyledClass = `${baseClass}__unstyled`;
-  const horizontalClass = `${baseClass}__horizontal`;
-  const titleClass = `${baseClass}--title`;
-
-  const listClasses = classNames(className, baseClass, {
-    [unstyledClass]: ordered === "unstyled",
-    [horizontalClass]: alignment === "horizontal",
-  });
-
-  return (
-    <div className={listClasses}>
-      {title && <h2 className={titleClass}>{title}</h2>}
-      {ordered && ordered === "ordered" ? (
-        <ol>{children}</ol>
-      ) : (
-        <ul>{children}</ul>
-      )}
-    </div>
-  );
-};
-
-export default List;

package/src/components/List/ListItem.props.ts

@@ -1,18 +0,0 @@
-import { ReactNode } from "react";
-
-export interface ListItemProps {
-  /**
-   * Specify the id of the List item.
-   */
-  id: string;
-
-  /**
-   * Specify the content of your Button.
-   */
-  children: ReactNode;
-
-  /**
-   * Specify an optional className to be added to your Button.
-   */
-  className?: string;
-}

package/src/components/List/ListItem.tsx

@@ -1,17 +0,0 @@
-import classNames from "classnames";
-import { FC } from "react";
-import useGlobalSettings from "../../hooks/useGlobalSettings";
-import { ListItemProps } from "./ListItem.props";
-
-const ListItem: FC<ListItemProps> = ({ children, className, ...rest }) => {
-  const { prefix } = useGlobalSettings();
-  const baseClass = `${prefix}--list--item`;
-  const listItemClasses = classNames(className, baseClass);
-  return (
-    <li className={listItemClasses} {...rest}>
-      {children}
-    </li>
-  );
-};
-
-export default ListItem;

package/src/components/List/index.ts

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

package/src/components/Loading/Loading.args.ts

@@ -1,55 +0,0 @@
-import { LoadingProps } from "./Loading.props";
-
-const idlelarge: LoadingProps = {
-  className: "storybook",
-  size: "large",
-  status: "idle",
-};
-
-const loadinglarge: LoadingProps = {
-  className: "storybook",
-  message: "Submitting",
-  size: "large",
-  status: "loading",
-};
-
-const loadedlarge: LoadingProps = {
-  className: "storybook",
-  message: "Completed",
-  size: "large",
-  status: "loaded",
-};
-
-const idlesmall: LoadingProps = {
-  className: "storybook",
-  size: "small",
-  status: "idle",
-};
-
-const loadingsmall: LoadingProps = {
-  className: "storybook",
-  message: "Submitting",
-  size: "small",
-  status: "loading",
-};
-
-const loadedsmall: LoadingProps = {
-  className: "storybook",
-  message: "Completed",
-  size: "small",
-  status: "loaded",
-};
-
-/**
- * Sample prop definitions for Loading's enumerable properties (imported in stories and test)
- */
-const LoadingArgs = {
-  loadinglarge,
-  idlelarge,
-  loadedlarge,
-  idlesmall,
-  loadingsmall,
-  loadedsmall,
-};
-
-export default LoadingArgs;

package/src/components/Loading/Loading.props.ts

@@ -1,23 +0,0 @@
-import { LoadingStatus, LoadingSize } from "../../types";
-
-export interface LoadingProps {
-  /**
-   * Specify an optional className to be added to your empty component.
-   */
-  className?: string;
-
-  /**
-   * Specify the loading message
-   */
-  message?: string;
-
-  /**
-   * Specify the loader's size
-   */
-  size?: Required<LoadingSize>;
-
-  /**
-   * Specify the loading status
-   */
-  status?: Required<LoadingStatus>;
-}

package/src/components/Loading/Loading.tsx

@@ -1,24 +0,0 @@
-import { FC } from "react";
-import classNames from "classnames";
-import useGlobalSettings from "../../hooks/useGlobalSettings";
-import { LoadingProps } from "./Loading.props";
-
-const Loading: FC<LoadingProps> = ({ className, message, size, status }) => {
-  const { prefix } = useGlobalSettings();
-  const baseClass = `${prefix}--loading`;
-  const loadingClasses = classNames(className, {
-    [baseClass]: true,
-    [`${baseClass}--${size}`]: size,
-    [`${baseClass}--${status}`]: status,
-  });
-
-  return (
-    <div className={loadingClasses} role="alert" aria-live="assertive">
-      {status && message && status !== "idle" && (
-        <p className={`${baseClass}--copy`}>{message}</p>
-      )}
-    </div>
-  );
-};
-
-export default Loading;

package/src/components/Loading/index.ts

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

package/src/components/LocalNav/LocalNav.args.ts

@@ -1,64 +0,0 @@
-import { LocalNavProps } from "./LocalNav.props";
-import ilo_logo_white from "@ilo-org/brand-assets/logo_en_horizontal_white.svg";
-
-const basic: LocalNavProps = {
-  background: "#960A55",
-  logo: {
-    src: ilo_logo_white,
-    alt: "ILO Voices Logo",
-    subbrand: "Voices",
-    theme: "dark",
-  },
-  primarynav: {
-    navlabel: "Primary Nav Menu",
-    mobilecloselabel: "Close",
-    items: [
-      {
-        label: "Menu Item 1",
-        url: "https://www.ilo.org",
-      },
-      {
-        label: "Menu Item 2",
-        url: "https://www.ilo.org",
-      },
-      {
-        label: "Menu Item 3",
-        url: "https://www.ilo.org",
-      },
-      {
-        label: "Menu Item 4",
-        url: "https://www.ilo.org",
-      },
-    ],
-  },
-  mainlink: {
-    label: "Go to main website",
-    url: "https://www.ilo.org",
-  },
-  languagelabel: "English",
-  menucloselabel: "Close",
-  languagecontextmenu: {
-    links: [
-      {
-        label: "Français",
-        url: "https://www.ilo.org",
-      },
-      {
-        label: "Español",
-        url: "https://www.ilo.org",
-      },
-      {
-        label: "中文",
-        url: "https://www.ilo.org",
-      },
-      {
-        label: "Русский",
-        url: "https://www.ilo.org",
-      },
-    ],
-  },
-};
-
-const LocalNavArgs = { basic };
-
-export default LocalNavArgs;

package/src/components/LocalNav/LocalNav.props.ts

@@ -1,56 +0,0 @@
-import { LinkProps, ContextMenuProps } from "../ContextMenu/ContextMenu.props";
-import { LogoProps } from "../Logo/Logo.props";
-
-export interface LocalNavProps {
-  /**
-   * Props for the background colour of the LocalNav
-   */
-  background?: string;
-
-  /**
-   * Props for the Logo component of the LocalNav
-   */
-  logo: LogoProps;
-
-  /**
-   * Specify the primary items for the LocalNav
-   */
-  primarynav?: PrimaryNavProps;
-
-  /**
-   * Specify the main link for the LocalNav
-   */
-  mainlink?: LinkProps;
-
-  /**
-   * Specify the menu close label for the LocalNav
-   */
-  menucloselabel?: string;
-
-  /**
-   * Specify the language label for the LocalNav
-   */
-  languagelabel?: string;
-
-  /**
-   * Specify the language context menu for the LocalNav
-   */
-  languagecontextmenu?: ContextMenuProps;
-}
-
-interface PrimaryNavProps {
-  /**
-   * Specify the label for local nav
-   */
-  navlabel?: Required<string>;
-
-  /**
-   * Specify the close label for mobile local nav
-   */
-  mobilecloselabel?: Required<string>;
-
-  /**
-   * Specify the social links
-   */
-  items?: Required<Array<LinkProps>>;
-}

package/src/components/LocalNav/LocalNav.tsx

@@ -1,181 +0,0 @@
-import { FC, useState } from "react";
-import useGlobalSettings from "../../hooks/useGlobalSettings";
-import { ContextMenu } from "../ContextMenu";
-import { LocalNavProps } from "./LocalNav.props";
-import { brand } from "@ilo-org/themes/tokens/brand/base.json";
-import classnames from "classnames";
-import { Logo } from "../Logo";
-
-const DEFAULT_LOGO_SIZE = 280;
-
-const LocalNav: FC<LocalNavProps> = ({
-  background,
-  logo,
-  primarynav,
-  mainlink,
-  menucloselabel,
-  languagelabel,
-  languagecontextmenu,
-}) => {
-  const { prefix } = useGlobalSettings();
-
-  const [toggleMenuOpen, setMenuToggleOpen] = useState(false);
-  const [toggleLanguageOpen, setLanguageToggleOpen] = useState(false);
-
-  const baseClass = `${prefix}--header`;
-  const localNavClasses = classnames(baseClass, `${baseClass}--local`, {
-    [`${prefix}--mobile--open`]: toggleMenuOpen,
-    [`${prefix}--select--open`]: toggleLanguageOpen,
-  });
-  const bg = background ? background : brand["ilo-dark-blue"].value;
-
-  const handleMenuToggle = () => {
-    setMenuToggleOpen(!toggleMenuOpen);
-  };
-
-  const handleLanguageToggle = () => {
-    setLanguageToggleOpen(!toggleLanguageOpen);
-  };
-
-  return (
-    <header className={localNavClasses}>
-      <div
-        className={`${baseClass}--utility-bar ${baseClass}--utility-bar--local`}
-        style={{ background: bg }}
-      >
-        <nav className={`${prefix}--nav--local`}>
-          <div className={`${prefix}--nav--local--logo-wrapper`}>
-            <Logo
-              url={logo.url}
-              src={logo.src}
-              alt={logo.alt}
-              className={`${prefix}--nav--local--logo`}
-              subbrand={logo.subbrand}
-              theme={logo.theme}
-              size={logo.size || DEFAULT_LOGO_SIZE}
-            />
-          </div>
-          <ul className={`${prefix}--nav--local--set`}>
-            {primarynav?.items &&
-              primarynav.items.map((item, index) => (
-                <li className={`${prefix}--nav--local--item`} key={index}>
-                  <a href={item.url} className={`${prefix}--nav--local--link`}>
-                    <span>{item.label}</span>
-                  </a>
-                </li>
-              ))}
-          </ul>
-        </nav>
-        <div className={`${prefix}--language-switcher`}>
-          <div className={`${prefix}--language-switcher--wrap`}>
-            {mainlink && (
-              <span className={`${prefix}--language-switcher--link--wrap`}>
-                <a
-                  href={mainlink.url}
-                  className={`${prefix}--language-switcher--link`}
-                >
-                  {mainlink.label}
-                </a>
-              </span>
-            )}
-            <button
-              className={`${prefix}--language-switcher--button`}
-              type="button"
-            >
-              {languagelabel}
-            </button>
-            <ContextMenu links={languagecontextmenu?.links}></ContextMenu>
-          </div>
-        </div>
-        <button className={`${baseClass}--menu`} onClick={handleMenuToggle}>
-          Menu
-        </button>
-        <div className={`${baseClass}--navigation`}>
-          <div className={`${baseClass}--inner`}>
-            <div className={`${prefix}--mobile--nav`}>
-              <div className={`${prefix}--mobile--nav--logo`}>
-                <Logo
-                  url={logo.url}
-                  src={logo.src}
-                  alt={logo.alt}
-                  className={`${prefix}--nav--local--logo`}
-                  subbrand={logo.subbrand}
-                  theme={logo.theme}
-                  size={logo.size || DEFAULT_LOGO_SIZE}
-                />
-                <button
-                  className={`${baseClass}--menu--close`}
-                  onClick={handleMenuToggle}
-                >
-                  {menucloselabel}
-                </button>
-              </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"
-                    ></button>
-                    <button
-                      className={`${baseClass}--menu--close`}
-                      onClick={handleMenuToggle}
-                    >
-                      Close
-                    </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>
-                  ))}
-              </ul>
-            </nav>
-          </div>
-        </div>
-      </div>
-    </header>
-  );
-};
-
-export default LocalNav;

package/src/components/LocalNav/index.ts

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

package/src/components/Logo/Logo.args.ts

@@ -1,45 +0,0 @@
-import { LogoProps } from "./Logo.props";
-import en_blue from "@ilo-org/brand-assets/logo_en_horizontal_blue.svg";
-import en_white from "@ilo-org/brand-assets/logo_en_horizontal_white.svg";
-
-export const basic: LogoProps = {
-  src: en_blue,
-  url: "https://www.ilo.org",
-  alt: "International Labour Organization",
-  size: 400,
-  target: "_blank",
-};
-
-export const withTheme: LogoProps = {
-  ...basic,
-  theme: "light",
-  src: {
-    light: en_blue,
-    dark: en_white,
-  },
-};
-
-export const withSubBrand: LogoProps = {
-  ...withTheme,
-  subbrand: "Voices",
-  url: "https://voices.ilo.org",
-};
-
-export const withDarkTheme: LogoProps = {
-  ...withSubBrand,
-  subbrand: "Voices",
-  theme: "dark",
-  url: "https://live.ilo.org",
-};
-
-export const withLongSubbrand: LogoProps = {
-  ...withTheme,
-  subbrand: "Digital Design System",
-};
-
-export const fluidWidth: LogoProps = {
-  ...withDarkTheme,
-  url: "https://live.ilo.org",
-  size: "fluid",
-  subbrand: "Live",
-};

package/src/components/Logo/Logo.props.ts

@@ -1,67 +0,0 @@
-type LogoSrc =
-  | string
-  | {
-      /**
-       * The url of the logo to use with light theme
-       */
-      light: string;
-
-      /**
-       * The url of the logo to use with dark theme
-       */
-      dark: string;
-    };
-
-export interface LogoProps {
-  /**
-   * The location of the image file
-   */
-  src: LogoSrc;
-
-  /**
-   * Alt text for the logo
-   */
-  alt: string;
-
-  /**
-   * The name of the sub-brand if there is one
-   */
-  subbrand?: string;
-
-  /**
-   * The width of the logo or 'fluid' width
-   */
-  size?: number | "fluid";
-
-  /**
-   * Styles to be applied to the outermost element
-   */
-  style?: React.CSSProperties;
-
-  /**
-   * Optional className to be passed to the outermost element of the component
-   */
-  className?: string;
-
-  /**
-   * Optional destination if the logo is a link
-   */
-  url?: string;
-
-  /**
-   * Optional target if the logo is a link
-   */
-  target?: "_blank" | "_self" | "_parent" | "_top";
-
-  /**
-   * Theme of the logo component
-   */
-  theme?: "light" | "dark";
-}
-
-export interface InnerLogoProps extends LogoProps {
-  /**
-   * The base class of the logo component
-   */
-  baseClass: string;
-}