@ilo-org/react 0.14.0 → 0.15.0

package/src/components/Accordion/Accordion.tsx

@@ -1,62 +0,0 @@
-import { getUpdatedItems } from "@ilo-org/utils";
-import classNames from "classnames";
-import { Children, FC, ReactElement, useEffect, useState } from "react";
-import useGlobalSettings from "../../hooks/useGlobalSettings";
-import { checkArrayDuplicates } from "../../utils/checkArrayDuplicates";
-import { AccordionProps } from "./Accordion.props";
-import { AccordionContext } from "./AccordionCtx";
-
-const Accordion: FC<AccordionProps> = ({
-  children,
-  allowMultipleExpanded = false,
-  onButtonClick,
-  defaultAccordionsExpanded = [],
-  className,
-}) => {
-  const { prefix } = useGlobalSettings();
-  const baseClass = `${prefix}--accordion`;
-  const [activeItems, setActiveItems] = useState<string[]>([]);
-
-  const accordionClasses = classNames(className, {
-    [baseClass]: true,
-  });
-
-  const defaultAccordionsExpandedString = JSON.stringify(
-    defaultAccordionsExpanded
-  );
-
-  useEffect(() => {
-    const expandedOnLoad = allowMultipleExpanded
-      ? defaultAccordionsExpanded
-      : defaultAccordionsExpanded.length > 0
-      ? [defaultAccordionsExpanded[0]]
-      : defaultAccordionsExpanded;
-    setActiveItems(expandedOnLoad);
-  }, [defaultAccordionsExpandedString, allowMultipleExpanded]); //eslint-disable-line react-hooks/exhaustive-deps
-
-  if (children) {
-    const ids: string[] = [];
-    Children.forEach(children, (child: ReactElement) => {
-      ids.push(child.props.id);
-    });
-    if (checkArrayDuplicates(ids)) {
-      console.warn("Warning: Accordion items must have unique ids.");
-    }
-  }
-
-  return (
-    <AccordionContext.Provider
-      value={{
-        activeItems,
-        setActiveItems,
-        getUpdatedItems,
-        allowMultipleExpanded,
-        onButtonClick,
-      }}
-    >
-      <ul className={accordionClasses}>{children}</ul>
-    </AccordionContext.Provider>
-  );
-};
-
-export default Accordion;

package/src/components/Accordion/AccordionButton.props.ts

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

package/src/components/Accordion/AccordionButton.tsx

@@ -1,58 +0,0 @@
-import classNames from "classnames";
-import { FC, MouseEvent, useContext } from "react";
-import useGlobalSettings from "../../hooks/useGlobalSettings";
-import { default as AccordionButtonProps } from "./AccordionButton.props";
-import { AccordionContext, AccordionItemContext } from "./AccordionCtx";
-
-const AccordionButton: FC<AccordionButtonProps> = ({
-  children,
-  className,
-  ...rest
-}) => {
-  const { prefix } = useGlobalSettings();
-  const baseClass = `${prefix}--accordion--button`;
-
-  const {
-    activeItems,
-    setActiveItems,
-    getUpdatedItems,
-    allowMultipleExpanded,
-    onButtonClick,
-  } = useContext(AccordionContext);
-  const { id } = useContext(AccordionItemContext);
-  const open = activeItems.indexOf(id) > -1;
-
-  const accordionButtonClasses = classNames(className, {
-    [baseClass]: true,
-  });
-
-  /**
-   * On click, get id of clicked item, and set that item in state to 'open', all others to 'closed'
-   */
-  const handleClick = (e: MouseEvent<HTMLButtonElement>, id: string) => {
-    setActiveItems(
-      getUpdatedItems({ id, itemStatuses: activeItems, allowMultipleExpanded })
-    );
-    if (onButtonClick) {
-      onButtonClick(e, id);
-    }
-    e.currentTarget.blur();
-  };
-
-  return (
-    <div className={`${prefix}--h3`}>
-      <button
-        className={accordionButtonClasses}
-        aria-expanded={open}
-        onClick={(e) => handleClick(e, id)}
-        aria-controls={`panel-${id}`}
-        id={`button-${id}`}
-        {...rest}
-      >
-        {children}
-      </button>
-    </div>
-  );
-};
-
-export default AccordionButton;

package/src/components/Accordion/AccordionCtx.ts

@@ -1,9 +0,0 @@
-import { createContext } from "react";
-import { AccordionContextProps } from "./Accordion.props";
-import { AccordionItemContextProps } from "./AccordionItem.props";
-
-export const AccordionContext = createContext({} as AccordionContextProps);
-
-export const AccordionItemContext = createContext(
-  {} as AccordionItemContextProps
-);

package/src/components/Accordion/AccordionItem.props.ts

@@ -1,25 +0,0 @@
-import { ReactNode } from "react";
-
-export interface AccordionItemContextProps {
-  /**
-   * The accordion item's unique id.
-   */
-  id: string;
-}
-
-export interface AccordionItemProps {
-  /**
-   * Specify the id of the accordion 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/Accordion/AccordionItem.tsx

@@ -1,27 +0,0 @@
-import classNames from "classnames";
-import { FC } from "react";
-import useGlobalSettings from "../../hooks/useGlobalSettings";
-import { AccordionItemContext } from "./AccordionCtx";
-import { AccordionItemProps } from "./AccordionItem.props";
-
-const AccordionItem: FC<AccordionItemProps> = ({
-  children,
-  id,
-  className,
-  ...rest
-}) => {
-  const { prefix } = useGlobalSettings();
-  const baseClass = `${prefix}--accordion--item`;
-  const accordionItemClasses = classNames(className, {
-    [baseClass]: true,
-  });
-  return (
-    <AccordionItemContext.Provider value={{ id }}>
-      <li className={accordionItemClasses} {...rest}>
-        {children}
-      </li>
-    </AccordionItemContext.Provider>
-  );
-};
-
-export default AccordionItem;

package/src/components/Accordion/AccordionPanel.props.ts

@@ -1,25 +0,0 @@
-import { ReactNode } from "react";
-
-export default interface AccordionPanelProps {
-  /**
-   * Specify the content of your Button.
-   */
-  children: ReactNode;
-
-  /**
-   * Specify an optional className to be added to your Button.
-   */
-  className?: string;
-
-  /**
-   * Duration of the collapse animation in milliseconds, to ensure that
-   * finishing callbacks are fired even if the original browser transition end
-   * events are canceled
-   */
-  timeout?: number;
-
-  /**
-   * Allows the AccordionPanel to be scrollable by default
-   */
-  scroll?: boolean;
-}

package/src/components/Accordion/AccordionPanel.tsx

@@ -1,46 +0,0 @@
-import classNames from "classnames";
-import { FC, useContext, useLayoutEffect, useRef, useState } from "react";
-import useGlobalSettings from "../../hooks/useGlobalSettings";
-import { AccordionContext, AccordionItemContext } from "./AccordionCtx";
-import { default as AccordionPanelProps } from "./AccordionPanel.props";
-
-const AccordionPanel: FC<AccordionPanelProps> = ({
-  children,
-  className,
-  scroll,
-  ...rest
-}) => {
-  const { activeItems } = useContext(AccordionContext);
-  const { id } = useContext(AccordionItemContext);
-  const [panelHeight, setPanelHeight] = useState(0);
-  const open = activeItems.indexOf(id) > -1;
-  const { prefix } = useGlobalSettings();
-  const baseClass = `${prefix}--accordion--panel`;
-
-  const accordionaPanelClasses = classNames(className, baseClass, {
-    [`${baseClass}__scroll`]: scroll,
-    [`${baseClass}--open`]: open,
-  });
-
-  const ref = useRef<HTMLInputElement>();
-
-  useLayoutEffect(() => {
-    ref.current && setPanelHeight(ref.current.scrollHeight);
-  });
-
-  return (
-    <div
-      className={accordionaPanelClasses}
-      id={`panel-${id}`}
-      aria-labelledby={`button-${id}`}
-      role="region"
-      ref={ref as any}
-      style={{ ["--height" as any]: `${panelHeight}px` }}
-      {...rest}
-    >
-      <div className={`${prefix}--accordion--innerpanel`}>{children}</div>
-    </div>
-  );
-};
-
-export default AccordionPanel;

package/src/components/Accordion/index.ts

@@ -1,4 +0,0 @@
-export { default as AccordionButton } from "./AccordionButton";
-export { default as AccordionPanel } from "./AccordionPanel";
-export { default as AccordionItem } from "./AccordionItem";
-export { default as Accordion } from "./Accordion";

package/src/components/Breadcrumb/Breadcrumb.args.ts

@@ -1,61 +0,0 @@
-import { BreadcrumbProps } from "./Breadcrumb.props";
-
-const basic: BreadcrumbProps = {
-  home: {
-    indented: false,
-    label: "Home",
-    url: "/",
-  },
-  links: [
-    {
-      label: "Link One",
-      url: "https://www.ilo.org/",
-    },
-    {
-      label: "Link Two",
-      url: "https://www.ilo.org/",
-    },
-    {
-      label: "Link Three",
-      url: "https://www.ilo.org/",
-    },
-    {
-      label: "Link Four",
-      url: "https://www.ilo.org/",
-    },
-  ],
-};
-
-const fiveLinks: BreadcrumbProps = {
-  home: {
-    indented: false,
-    label: "Home",
-    url: "/",
-  },
-  links: [
-    {
-      label: "Link One",
-      url: "https://www.ilo.org/",
-    },
-    {
-      label: "Link Two",
-      url: "https://www.ilo.org/",
-    },
-    {
-      label: "Link Three",
-      url: "https://www.ilo.org/",
-    },
-    {
-      label: "Link Four",
-      url: "https://www.ilo.org/",
-    },
-    {
-      label: "Link Five",
-      url: "https://www.ilo.org/",
-    },
-  ],
-};
-
-const BreadcrumbArgs = { basic, fiveLinks };
-
-export default BreadcrumbArgs;

package/src/components/Breadcrumb/Breadcrumb.props.ts

@@ -1,13 +0,0 @@
-import { LinkProps } from "../LinkList/LinkList.props";
-
-export interface BreadcrumbProps {
-  /**
-   * Specify the HOME link in the Breadcrumb
-   */
-  home: Required<LinkProps>;
-
-  /**
-   * Specify the links to be displayed in the Breadcrumb
-   */
-  links: Required<Array<LinkProps>>;
-}

package/src/components/Breadcrumb/Breadcrumb.tsx

@@ -1,82 +0,0 @@
-import { FC, useState, useEffect } from "react";
-import useGlobalSettings from "../../hooks/useGlobalSettings";
-import classnames from "classnames";
-import { BreadcrumbProps } from "./Breadcrumb.props";
-import { ContextMenu } from "../ContextMenu";
-
-const Breadcrumb: FC<BreadcrumbProps> = ({ home, links }) => {
-  const { prefix } = useGlobalSettings();
-
-  const [showContextMenu, enableContextMenu] = useState(false);
-  const [toggleMenuOpen, setContextMenuToggleOpen] = useState(false);
-
-  const handleScreenResize = () => {
-    enableContextMenu(window.innerWidth <= 1024); // turn on context menu when screen is resized to a smaller size
-  };
-
-  useEffect(() => {
-    window.addEventListener("resize", handleScreenResize);
-    handleScreenResize();
-
-    return () => {
-      window.removeEventListener("resize", handleScreenResize);
-    };
-  }, []);
-
-  const handleContextMenuToggle = () => {
-    setContextMenuToggleOpen(!toggleMenuOpen);
-  };
-
-  const showContext = links.length > 4 || showContextMenu ? true : false;
-
-  const baseClass = `${prefix}--breadcrumb`;
-  const BreadcrumbClasses = classnames(baseClass);
-
-  const lastLink = links[links.length - 1];
-  const menuLinks = links.slice(0, -1);
-
-  return (
-    <nav
-      className={`${BreadcrumbClasses} ${showContext ? " contextmenu" : ""}`}
-    >
-      <ol className={`${baseClass}--items`}>
-        <li className={`${baseClass}--item home`}>
-          <a className={`${baseClass}--link`} href={home.url}>
-            <span className={`${baseClass}--link--label`}>{home.label}</span>
-          </a>
-        </li>
-        <li
-          className={`${baseClass}--item--context`}
-          onClick={handleContextMenuToggle}
-        >
-          <ul
-            className={`${baseClass}--items context--menu ${
-              toggleMenuOpen ? " open" : ""
-            }`}
-          >
-            {showContext && <ContextMenu links={menuLinks}></ContextMenu>}
-            {!showContext &&
-              menuLinks.map((link, index) => (
-                <li className={`${baseClass}--item`} key={index}>
-                  <a href={link.url} className={`${baseClass}--link`}>
-                    <span className={`${baseClass}--link--label`}>
-                      {link.label}
-                    </span>
-                  </a>
-                </li>
-              ))}
-          </ul>
-        </li>
-        <li className={`${baseClass}--item final`}>
-          <a className={`${baseClass}--link`} href={lastLink.url}>
-            <span className={`${baseClass}--link--label`}>
-              {lastLink.label}
-            </span>
-          </a>
-        </li>
-      </ol>
-    </nav>
-  );
-};
-
-export default Breadcrumb;

package/src/components/Breadcrumb/index.ts

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

package/src/components/Button/Button.args.ts

@@ -1,35 +0,0 @@
-import { ButtonProps } from "./Button.props";
-
-const primary: ButtonProps = {
-  type: "primary",
-  label: "Primary",
-  size: "medium",
-  name: "primary",
-};
-const secondary: ButtonProps = {
-  type: "secondary",
-  label: "Secondary",
-  name: "secondary",
-};
-const tertiary: ButtonProps = {
-  type: "tertiary",
-  label: "Tertiary",
-  name: "tertiary",
-};
-const alert: ButtonProps = { type: "alert", label: "Alert", name: "alert" };
-const icon: ButtonProps = { type: "primary", label: "Icon", icon: "close" };
-const disabled: ButtonProps = {
-  type: "primary",
-  label: "Disabled",
-  disabled: true,
-};
-const link: ButtonProps = {
-  type: "primary",
-  icon: "arrowright",
-  iconPosition: "right",
-  label: "Visit ilo.org",
-  url: "https://www.ilo.org",
-  target: "__blank",
-};
-
-export default { primary, secondary, tertiary, alert, icon, disabled, link };

package/src/components/Button/Button.props.ts

@@ -1,89 +0,0 @@
-import React, { ReactNode } from "react";
-import {
-  ButtonFunctions,
-  ButtonTypes,
-  PositionTypes,
-  SizeTypes,
-} from "../../types";
-
-export interface ButtonProps {
-  /**
-   * Specify the callback of your Button.
-   */
-  callback?: (e: React.MouseEvent<Element, MouseEvent>) => any;
-
-  /**
-   * Specify the content of your Button.
-   */
-  children?: ReactNode;
-
-  /**
-   * Specify an optional className to be added to your Button.
-   */
-  className?: string;
-
-  /**
-   * Specify the name for the Button.
-   */
-  name?: string;
-
-  /**
-   * Specify whether or not the button is disabled.
-   */
-  disabled?: boolean;
-
-  /**
-   * Specify the icon for the Button
-   */
-  icon?: string;
-
-  /**
-   * Specify the icon for the Button
-   */
-  iconPosition?: PositionTypes;
-
-  /**
-   * Does this button display an icon only?
-   */
-  icononly?: boolean;
-
-  /**
-   * Specify which function the button performs
-   */
-  kind?: ButtonFunctions;
-
-  /**
-   * Specify the label for the Button
-   */
-  label?: string;
-
-  /**
-   * Does this button open a modal?
-   */
-  opensmodal?: boolean;
-
-  /**
-   * Specify an optional className to be added to your Button.
-   */
-  size?: SizeTypes;
-
-  /**
-   * Specify the target for when Button is really a link
-   */
-  target?: string;
-
-  /**
-   * Specify an optional className to be added to your Button.
-   */
-  type?: ButtonTypes;
-
-  /**
-   * Specify the url for the Button's href
-   */
-  url?: string;
-
-  /**
-   * Inline styles to be applied to the rendered element
-   */
-  style?: React.CSSProperties;
-}

package/src/components/Button/Button.tsx

@@ -1,77 +0,0 @@
-import { FC } from "react";
-import classNames from "classnames";
-import useGlobalSettings from "../../hooks/useGlobalSettings";
-import { ButtonProps } from "./Button.props";
-import { Link } from "../Link";
-import { Icon } from "../Icon";
-
-const Button: FC<ButtonProps> = ({
-  callback,
-  className,
-  disabled = false,
-  icon,
-  icononly,
-  iconPosition,
-  kind = "button",
-  label,
-  opensmodal,
-  size = "large",
-  target = "",
-  type = "primary",
-  url,
-  style,
-  name,
-}) => {
-  const { prefix } = useGlobalSettings();
-  const baseClass = `${prefix}--button`;
-  const hasURL = !!url;
-  const icoPos = iconPosition || "left";
-
-  const ButtonClasses = classNames(className, {
-    [baseClass]: true,
-    [`${baseClass}--${size}`]: size,
-    [`${baseClass}--${type}`]: type,
-    [`icon icon__position--${icoPos}`]: icon && !icononly,
-    [`icon icon--only`]: icon && icononly,
-  });
-
-  /**
-   * On click, if there is a callback, call it
-   */
-  const handleClick = (e: React.MouseEvent<Element, MouseEvent>) => {
-    if (callback) {
-      callback(e);
-    }
-  };
-
-  return (
-    <>
-      {hasURL ? (
-        <Link
-          className={ButtonClasses}
-          target={target}
-          url={url}
-          label={label}
-          style={style}
-        >
-          {icon && <Icon name={icon} hidden={true} />}
-        </Link>
-      ) : (
-        <button
-          className={ButtonClasses}
-          onClick={(e) => handleClick(e)}
-          disabled={disabled}
-          type={kind}
-          aria-haspopup={opensmodal ? `dialog` : false}
-          style={style}
-          name={name}
-        >
-          {label && <span className="button__label">{label}</span>}
-          {icon && <Icon name={icon} hidden={true} />}
-        </button>
-      )}
-    </>
-  );
-};
-
-export default Button;

package/src/components/Button/index.ts

@@ -1,2 +0,0 @@
-export { default as Button } from "./Button";
-export { default as buttonArgs } from "./Button.args";

package/src/components/Callout/Callout.args.ts

@@ -1,38 +0,0 @@
-import { CalloutProps } from "./Callout.props";
-
-const baseArgs: CalloutProps = {
-  copy: "Lorem ipsum dolor sit amet, consectetur adipiscing elit.",
-  isCollapsible: false,
-  headline: "Info Callout",
-  type: "info",
-};
-
-const success: CalloutProps = {
-  ...baseArgs,
-  type: "success",
-  headline: "Success Callout",
-};
-
-const warning: CalloutProps = {
-  ...baseArgs,
-  type: "warning",
-  headline: "Warning Callout",
-};
-
-const error: CalloutProps = {
-  ...baseArgs,
-  cta: {
-    label: "Optional CTA",
-    url: "http://www.google.com",
-  },
-  isCollapsible: true,
-  isOpen: false,
-  headline: "Error Callout (Collapsible)",
-  toggleOpenLabel: "Open",
-  toggleClosedLabel: "Closed",
-  type: "error",
-};
-
-const CalloutArgs = { baseArgs, success, warning, error };
-
-export default CalloutArgs;