@ilo-org/react 0.13.0 → 0.14.1

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";