@ilo-org/react 0.14.0 → 0.14.1

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;

package/src/components/Callout/Callout.props.ts

@@ -1,60 +0,0 @@
-import { CalloutTypes } from "../../types";
-
-interface CTAProps {
-  /**
-   * Specify the label of the CTA
-   */
-  label?: string;
-
-  /**
-   * Specify the url of the CTA
-   */
-  url?: string;
-}
-
-export interface CalloutProps {
-  /**
-   * Specify the settings for an option CTA
-   */
-  cta?: CTAProps;
-
-  /**
-   * Specify an optional className to be added to your RichText.
-   */
-  className?: string;
-
-  /**
-   * Specify the copy
-   */
-  copy?: Required<string>;
-
-  /**
-   * Specify if callout is collapsible
-   */
-  isCollapsible?: boolean;
-
-  /**
-   * Specify if callout is open (only important for collapsible items)
-   */
-  isOpen?: boolean;
-
-  /**
-   * Specify the callout headline
-   */
-  headline?: string;
-
-  /**
-   * Specify the open label
-   */
-  toggleOpenLabel?: string;
-
-  /**
-   * Specify the open label
-   */
-  toggleClosedLabel?: string;
-
-  /**
-   * Describe the type of callout
-   */
-  type?: CalloutTypes;
-}

package/src/components/Callout/Callout.tsx

@@ -1,80 +0,0 @@
-import classNames from "classnames";
-import React, { FC, useEffect, useState } from "react";
-import useGlobalSettings from "../../hooks/useGlobalSettings";
-import { Button } from "../Button";
-import { ButtonProps } from "../Button/Button.props";
-import { CalloutProps } from "./Callout.props";
-
-const Callout: FC<CalloutProps> = ({
-  className,
-  copy,
-  cta,
-  isCollapsible,
-  isOpen = true,
-  toggleOpenLabel = "Less",
-  toggleClosedLabel = "More",
-  headline,
-  type,
-}) => {
-  const { prefix } = useGlobalSettings();
-  const baseClass = `${prefix}--callout`;
-  const [toggleOpen, setToggleOpen] = useState(isOpen);
-  let toggleLabel = toggleOpen ? toggleOpenLabel : toggleClosedLabel;
-
-  useEffect(() => {
-    setToggleOpen(isOpen);
-    toggleLabel = toggleOpen ? toggleOpenLabel : toggleClosedLabel;
-  }, [isOpen]);
-
-  const calloutClasses = classNames(className, {
-    [baseClass]: true,
-    [`${baseClass}--${type}`]: type,
-    [`${baseClass}--open`]: toggleOpen,
-    [`${baseClass}--collapse`]: isCollapsible,
-  });
-
-  const iconClasses = `icon icon--${type}`;
-
-  const ctaprops: ButtonProps = {
-    callback: undefined,
-    className: `${baseClass}--cta`,
-    children: false,
-    label: cta?.label,
-    size: "small",
-    type: "tertiary",
-    url: cta?.url,
-  };
-
-  const handleToggle = (e: React.MouseEvent<Element, MouseEvent>) => {
-    e.preventDefault();
-    toggleLabel = toggleOpen ? toggleOpenLabel : toggleClosedLabel;
-    setToggleOpen(!toggleOpen);
-  };
-
-  return (
-    <div className={calloutClasses}>
-      <div className={`${baseClass}--sidebar`}>
-        <span className={iconClasses}></span>
-      </div>
-      <div className={`${baseClass}--content`}>
-        <div className={`${baseClass}--header`}>
-          <h5 className={`${baseClass}--headline`}>{headline}</h5>
-          {isCollapsible && (
-            <button
-              className={`${baseClass}--toggle`}
-              onClick={handleToggle}
-              type="button"
-            >
-              {toggleLabel}
-              <span className={`${baseClass}--toggle--icon`}></span>
-            </button>
-          )}
-        </div>
-        <p className={`${baseClass}--copy`}>{copy}</p>
-        {cta && <Button {...ctaprops} />}
-      </div>
-    </div>
-  );
-};
-
-export default Callout;

package/src/components/Callout/index.ts

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