@ilo-org/react 0.0.1

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

@@ -0,0 +1,353 @@
+import { ButtonProps } from "./Button.props";
+
+const large: ButtonProps = {
+  label: "Large Button",
+  size: "large",
+  target: "_blank",
+  type: "primary",
+  url: "#",
+};
+
+const medium: ButtonProps = {
+  label: "Medium Button",
+  size: "medium",
+  type: "primary",
+  url: "#",
+};
+
+const small: ButtonProps = {
+  label: "Small Button",
+  size: "small",
+  type: "primary",
+  url: "#",
+};
+
+const primary: ButtonProps = {
+  label: "Primary Button",
+  size: "large",
+  type: "primary",
+  url: "",
+};
+
+const secondary: ButtonProps = {
+  label: "Secondary Button",
+  size: "large",
+  type: "secondary",
+  url: "",
+};
+
+const tertiary: ButtonProps = {
+  label: "Tertiary Button",
+  size: "large",
+  type: "tertiary",
+  url: "",
+};
+
+const secondarym: ButtonProps = {
+  label: "Secondary medium",
+  size: "medium",
+  type: "secondary",
+  url: "",
+};
+
+const tertiarym: ButtonProps = {
+  label: "Tertiary Medium",
+  size: "medium",
+  type: "tertiary",
+  url: "",
+};
+
+const secondarysm: ButtonProps = {
+  label: "Secondary Small",
+  size: "small",
+  type: "secondary",
+  url: "",
+};
+
+const tertiarysm: ButtonProps = {
+  label: "Tertiary Small",
+  size: "small",
+  type: "tertiary",
+  url: "",
+};
+
+const alertm: ButtonProps = {
+  label: "Alert Medium",
+  size: "medium",
+  type: "alert",
+  url: "",
+};
+
+const alertsm: ButtonProps = {
+  label: "Alert Small",
+  size: "small",
+  type: "alert",
+  url: "",
+};
+
+const alert: ButtonProps = {
+  label: "Alert Button",
+  size: "large",
+  type: "alert",
+  url: "",
+};
+
+const disabled: ButtonProps = {
+  disabled: true,
+  label: "Disabled Button",
+  size: "large",
+  type: "primary",
+  url: "",
+};
+
+const iconleftlgprimary: ButtonProps = {
+  callback: "",
+  children: "",
+  icon: "close",
+  label: "Icon on left",
+  size: "large",
+  type: "primary",
+  url: "",
+};
+
+const iconleftmprimary: ButtonProps = {
+  icon: "close",
+  label: "Icon on left",
+  size: "medium",
+  type: "primary",
+  url: "",
+};
+
+const iconleftsmprimary: ButtonProps = {
+  icon: "close",
+  label: "Icon on left",
+  size: "small",
+  type: "primary",
+  url: "",
+};
+
+const iconrightlgprimary: ButtonProps = {
+  icon: "close",
+  iconPosition: "right",
+  label: "Icon on right",
+  size: "large",
+  type: "primary",
+  url: "",
+};
+
+const iconrightmprimary: ButtonProps = {
+  icon: "close",
+  iconPosition: "right",
+  label: "Icon on right",
+  size: "medium",
+  type: "primary",
+  url: "",
+};
+
+const iconrightsmprimary: ButtonProps = {
+  icon: "close",
+  iconPosition: "right",
+  label: "Icon on right",
+  size: "small",
+  type: "primary",
+  url: "",
+};
+
+const iconleftlgsecondary: ButtonProps = {
+  icon: "close",
+  label: "Icon on left",
+  size: "large",
+  type: "secondary",
+  url: "",
+};
+
+const iconleftmsecondary: ButtonProps = {
+  icon: "close",
+  label: "Icon on left",
+  size: "medium",
+  type: "secondary",
+  url: "",
+};
+
+const iconleftsmsecondary: ButtonProps = {
+  icon: "close",
+  label: "Icon on left",
+  size: "small",
+  type: "secondary",
+  url: "",
+};
+
+const iconrightlgsecondary: ButtonProps = {
+  icon: "close",
+  iconPosition: "right",
+  label: "Icon on right",
+  size: "large",
+  type: "secondary",
+  url: "",
+};
+
+const iconrightmsecondary: ButtonProps = {
+  icon: "close",
+  iconPosition: "right",
+  label: "Icon on right",
+  size: "medium",
+  type: "secondary",
+  url: "",
+};
+
+const iconrightsmsecondary: ButtonProps = {
+  icon: "close",
+  iconPosition: "right",
+  label: "Icon on right",
+  size: "small",
+  type: "secondary",
+  url: "",
+};
+
+const iconleftlgtertiary: ButtonProps = {
+  icon: "close",
+  label: "Icon on left",
+  size: "large",
+  type: "tertiary",
+  url: "",
+};
+
+const iconleftmtertiary: ButtonProps = {
+  icon: "close",
+  label: "Icon on left",
+  size: "medium",
+  type: "tertiary",
+  url: "",
+};
+
+const iconleftsmtertiary: ButtonProps = {
+  icon: "close",
+  label: "Icon on left",
+  size: "small",
+  type: "tertiary",
+  url: "",
+};
+
+const iconrightlgtertiary: ButtonProps = {
+  icon: "close",
+  iconPosition: "right",
+  label: "Icon on right",
+  size: "large",
+  type: "tertiary",
+  url: "",
+};
+
+const iconrightmtertiary: ButtonProps = {
+  icon: "close",
+  iconPosition: "right",
+  label: "Icon on right",
+  size: "medium",
+  type: "tertiary",
+  url: "",
+};
+
+const iconrightsmtertiary: ButtonProps = {
+  icon: "close",
+  iconPosition: "right",
+  label: "Icon on right",
+  size: "small",
+  type: "tertiary",
+  url: "",
+};
+
+const iconleftlgalert: ButtonProps = {
+  icon: "close",
+  label: "Icon on left",
+  size: "large",
+  type: "alert",
+  url: "",
+};
+
+const iconleftmalert: ButtonProps = {
+  icon: "close",
+  label: "Icon on left",
+  size: "medium",
+  type: "alert",
+  url: "",
+};
+
+const iconleftsmalert: ButtonProps = {
+  icon: "close",
+  label: "Icon on left",
+  size: "small",
+  type: "alert",
+  url: "",
+};
+
+const iconrightlgalert: ButtonProps = {
+  icon: "close",
+  iconPosition: "right",
+  label: "Icon on right",
+  size: "large",
+  type: "alert",
+  url: "",
+};
+
+const iconrightmalert: ButtonProps = {
+  icon: "close",
+  iconPosition: "right",
+  label: "Icon on right",
+  size: "medium",
+  type: "alert",
+  url: "",
+};
+
+const iconrightsmalert: ButtonProps = {
+  icon: "close",
+  iconPosition: "right",
+  label: "Icon on right",
+  size: "small",
+  type: "alert",
+  url: "",
+};
+
+/**
+ * Sample prop definitions for Button's enumerable properties (imported in stories and tests).
+ */
+const ButtonArgs = {
+  large,
+  medium,
+  small,
+  primary,
+  secondary,
+  tertiary,
+  secondarym,
+  tertiarym,
+  secondarysm,
+  tertiarysm,
+  alert,
+  alertm,
+  alertsm,
+  disabled,
+  iconleftlgprimary,
+  iconleftmprimary,
+  iconleftsmprimary,
+  iconrightlgprimary,
+  iconrightmprimary,
+  iconrightsmprimary,
+  iconleftlgsecondary,
+  iconleftmsecondary,
+  iconleftsmsecondary,
+  iconrightlgsecondary,
+  iconrightmsecondary,
+  iconrightsmsecondary,
+  iconleftlgtertiary,
+  iconleftmtertiary,
+  iconleftsmtertiary,
+  iconrightlgtertiary,
+  iconrightmtertiary,
+  iconrightsmtertiary,
+  iconleftlgalert,
+  iconleftmalert,
+  iconleftsmalert,
+  iconrightlgalert,
+  iconrightmalert,
+  iconrightsmalert,
+};
+
+export default ButtonArgs;

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

@@ -0,0 +1,74 @@
+import { ReactNode } from "react";
+import { buttonFunctions, buttonTypes } from "../../types";
+
+export interface ButtonProps {
+  /**
+   * Specify the callback of your Button.
+   */
+  callback?: function;
+
+  /**
+   * Specify the content of your Button.
+   */
+  children?: ReactNode;
+
+  /**
+   * Specify an optional className to be added to your Button.
+   */
+  className?: 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;
+}

package/src/components/Button/Button.tsx

@@ -0,0 +1,67 @@
+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,
+}) => {
+  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,
+    [`icon--only`]: 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}>
+          {icon && <Icon name={icon} hidden={true} />}
+        </Link>
+      ) : (
+        <button
+          className={ButtonClasses}
+          onClick={(e) => handleClick(e)}
+          disabled={disabled}
+          type={kind}
+          aria-haspopup={opensmodal ? `dialog` : false}
+        >
+          {label && <span className="button__label">{label}</span>}
+          {icon && <Icon name={icon} hidden={true} />}
+        </button>
+      )}
+    </>
+  );
+};
+
+export default Button;

package/src/components/Button/index.ts

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

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

@@ -0,0 +1,64 @@
+import { CalloutProps } from "./Callout.props";
+
+const hascta: CalloutProps = {
+  className: "storybook",
+  copy: "Lorem ipsum dolor sit amet, consectetur adipiscing elit.",
+  cta: {
+    label: "Optional CTA",
+    url: "http://www.google.com",
+  },
+  headline: "With CTA",
+  isCollapsible: true,
+  isOpen: false,
+  toggleOpenLabel: "Open",
+  toggleClosedLabel: "Closed",
+  type: "info",
+};
+
+const infoCallout: CalloutProps = {
+  copy: "Lorem ipsum dolor sit amet, consectetur adipiscing elit.",
+  isCollapsible: false,
+  headline: "Notification Title",
+  type: "info",
+};
+
+const errorCallout: CalloutProps = {
+  cta: {
+    label: "Optional CTA",
+    url: "http://www.google.com",
+  },
+  copy: "Lorem ipsum dolor sit amet, consectetur adipiscing elit.",
+  isCollapsible: true,
+  isOpen: false,
+  headline: "Notification Title",
+  toggleOpenLabel: "Open",
+  toggleClosedLabel: "Closed",
+  type: "error",
+};
+
+const successCallout: CalloutProps = {
+  copy: "Lorem ipsum dolor sit amet, consectetur adipiscing elit.",
+  isCollapsible: false,
+  headline: "Notification Title",
+  type: "success",
+};
+
+const warningCallout: CalloutProps = {
+  copy: "Lorem ipsum dolor sit amet, consectetur adipiscing elit.",
+  isCollapsible: false,
+  headline: "Notification Title",
+  type: "warning",
+};
+
+/**
+ * Sample prop definitions for Callout's enumerable properties (imported in stories and tests).
+ */
+const CalloutArgs = {
+  hascta,
+  infoCallout,
+  errorCallout,
+  warningCallout,
+  successCallout,
+};
+
+export default CalloutArgs;

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

@@ -0,0 +1,61 @@
+import { ReactNode } from "react";
+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

@@ -0,0 +1,80 @@
+import React, { useState, useEffect, FC } from "react";
+import classNames from "classnames";
+import useGlobalSettings from "../../hooks/useGlobalSettings";
+import { CalloutProps } from "./Callout.props";
+import { ButtonProps } from "../Button/Button.props";
+import { Button } from "../Button";
+
+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: false,
+    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

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