@ilo-org/react 0.0.1

package/src/components/TableOfContents/TableOfContents.args.ts

@@ -0,0 +1,35 @@
+import { TableOfContentsProps } from "./TableOfContents.props";
+
+const toc: TableOfContentsProps = {
+  items: [
+    {
+      href: "#example",
+      label: "Item One",
+    },
+    {
+      href: "#example",
+      label: "Item Two",
+    },
+    {
+      href: "#example",
+      label: "Item Three",
+    },
+    {
+      href: "#example",
+      label: "Item Four",
+    },
+    {
+      href: "#example",
+      label: "Item Five",
+    },
+  ],
+};
+
+/**
+ * Sample prop definitions for Lists's enumerable properties (imported in stories and test)
+ */
+const TableOfContentsArgs = {
+  toc,
+};
+
+export default TableOfContentsArgs;

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

@@ -0,0 +1,23 @@
+export interface AnchorLink {
+  /**
+   * Specify the label for the anchor link
+   */
+  label?: Required<string>;
+
+  /**
+   * Specify the href for the anchor link
+   */
+  href?: Required<string>;
+}
+
+export interface TableOfContentsProps {
+  /**
+   * Specify an optional className to be added to your accordion.
+   */
+  className?: string;
+
+  /**
+   * Specify the items in the table of contents
+   */
+  items?: Required<Array<AnchorLink>>;
+}

package/src/components/TableOfContents/TableOfContents.tsx

@@ -0,0 +1,32 @@
+import { FC } from "react";
+import classNames from "classnames";
+import useGlobalSettings from "../../hooks/useGlobalSettings";
+import { TableOfContentsProps } from "./TableOfContents.props";
+
+const TableOfContents: FC<TableOfContentsProps> = ({ className, items }) => {
+  const { prefix } = useGlobalSettings();
+  const baseClass = `${prefix}--table-of-contents`;
+
+  const TableOfContentsClasses = classNames(className, {
+    [baseClass]: true,
+  });
+
+  return (
+    <nav className={TableOfContentsClasses}>
+      <ul className={`${baseClass}--list`}>
+        {items &&
+          items.map((item: any, index: any) => {
+            return (
+              <li className={`${baseClass}--list--item`} key={index}>
+                <a className={`${baseClass}--link`} href={item.href}>
+                  {item.label}
+                </a>
+              </li>
+            );
+          })}
+      </ul>
+    </nav>
+  );
+};
+
+export default TableOfContents;

package/src/components/TableOfContents/index.ts

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

package/src/components/Tag/Tag.args.ts

@@ -0,0 +1,15 @@
+import { TagProps } from "./Tag.props";
+
+const tag: TagProps = {
+  children: "",
+  id: "tag1",
+};
+
+/**
+ * Sample prop definitions for Tag's enumerable properties (imported in stories and tests).
+ */
+const TagArgs = {
+  tag,
+};
+
+export default TagArgs;

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

@@ -0,0 +1,34 @@
+import { ReactNode } from "react";
+import { tagTypes } from "../../types";
+
+export interface TagProps {
+  /**
+   * Callback to event;
+   */
+  callback?: function;
+
+  /**
+   * Specify the label for the tag
+   */
+  children: ReactNode;
+
+  /**
+   * The tag's unique id.
+   */
+  id: string;
+
+  /**
+   * Specify an optional className to be added to your Tag.
+   */
+  className?: string;
+
+  /**
+   * Specify a tag type
+   */
+  type?: tagTypes;
+
+  /**
+   * Specify an optional url to be added to your Tag.
+   */
+  url?: string;
+}

package/src/components/Tag/Tag.tsx

@@ -0,0 +1,99 @@
+import { useContext, FC } from "react";
+import classNames from "classnames";
+import useGlobalSettings from "../../hooks/useGlobalSettings";
+import { TagProps } from "./Tag.props";
+import { TagSetContext } from "./TagSet";
+import { Icon } from "../Icon";
+
+const Tag: FC<TagProps> = ({
+  className,
+  children,
+  id,
+  url,
+  type,
+  callback,
+  ...rest
+}) => {
+  const { prefix } = useGlobalSettings();
+  const { activeItems, setActiveItems, getUpdatedItems, allowMultipleActive } =
+    useContext(TagSetContext);
+  const active = activeItems.indexOf(id) > -1;
+
+  const baseClass = `${prefix}--tag`;
+  const itemClass = `${prefix}--tag-set__item`;
+  const stringType = type as string;
+  const tagClasses = classNames(className, {
+    [baseClass]: true,
+    [`${baseClass}--active`]: active,
+    [`${baseClass}--${type}`]: type,
+    [`icon icon__position--right`]: true,
+  });
+
+  let visible = active;
+
+  /**
+   * On click, get id of clicked item, and set that item in state to 'active', all others to 'closed'
+   */
+  const handleClick = (e: React.MouseEvent<HTMLButtonElement>) => {
+    setActiveItems(
+      getUpdatedItems({ id, itemStatuses: activeItems, allowMultipleActive })
+    );
+    visible = false;
+    if (callback) {
+      callback(e);
+    }
+  };
+
+  // @ts-ignore
+  const renderButton = () => {
+    let button;
+
+    if (visible) {
+      button = (
+        <li className={itemClass}>
+          <button
+            type="button"
+            className={tagClasses}
+            onClick={(e) => handleClick(e)}
+            id={id}
+            {...rest}
+          >
+            {children}
+            <Icon name="close" hidden={true} />
+          </button>
+        </li>
+      );
+    }
+
+    return button;
+  };
+
+  return (
+    <>
+      {stringType === "button" ? (
+        <>{renderButton()}</>
+      ) : (
+        <li className={itemClass}>
+          {type === "anchor" && (
+            <a
+              className={tagClasses}
+              href={active ? url : ""}
+              id={id}
+              {...rest}
+            >
+              {children}
+            </a>
+          )}
+
+          {type === "display" && (
+            <span className={tagClasses} id={id} {...rest}>
+              {children}
+            </span>
+          )}
+        </li>
+      )}
+    </>
+  );
+};
+
+export default Tag;

package/src/components/Tag/TagSet.args.ts

@@ -0,0 +1,39 @@
+import { TagSetProps } from "./TagSet.props";
+
+const tag: TagSetProps = {
+  allowMultipleActive: true,
+  onButtonClick: (e) => {
+    console.log(e.target);
+  },
+  children: "",
+  defaultTagActive: ["tag1", "tag2"],
+};
+
+const buttonTag: TagSetProps = {
+  allowMultipleActive: true,
+  onButtonClick: (e) => {
+    console.log(e.target);
+  },
+  children: "",
+  defaultTagActive: [
+    "tag1",
+    "tag2",
+    "tag3",
+    "tag4",
+    "tag5",
+    "tag6",
+    "tag7",
+    "tag8",
+    "tag9",
+  ],
+};
+
+/**
+ * Sample prop definitions for TagSet's enumerable properties (imported in stories and tests).
+ */
+const TagSetArgs = {
+  buttonTag,
+  tag,
+};
+
+export default TagSetArgs;

package/src/components/Tag/TagSet.props.d.ts

@@ -0,0 +1,36 @@
+export { default as TagSet } from "./TagSet";
+
+export interface TagSetProps {
+  /**
+   * Allow multiple tags to be active at once
+   */
+  allowMultipleActive?: boolean;
+
+  /**
+   * Callback to onButtonClick event;
+   */
+  onButtonClick?: (e: MouseEvent<HTMLButtonElement>, i: any) => void;
+
+  /**
+   * Specify the content of your Tag.
+   */
+  children: ReactElement<TagSet> | Array<ReactElement<TagSet>>;
+
+  /**
+   * Specify an optional className to be added to your accordion.
+   */
+  className?: string;
+
+  /**
+   * Default Tags that are active
+   */
+  defaultTagActive?: string[];
+}
+
+export interface TagSetContextProps {
+  activeItems: string[];
+  getUpdatedItems: getUpdatedItems;
+  setActiveItems: Dispatch<SetStateAction<string[]>>;
+  allowMultipleActive: boolean;
+  onButtonClick?: (e: MouseEvent<HTMLButtonElement>, i: any) => void;
+}

package/src/components/Tag/TagSet.tsx

@@ -0,0 +1,71 @@
+import {
+  useState,
+  useEffect,
+  createContext,
+  FC,
+  ReactElement,
+  Children,
+} from "react";
+import classNames from "classnames";
+import useGlobalSettings from "../../hooks/useGlobalSettings";
+import { TagSetContextProps, TagSetProps } from "./TagSet.props";
+import { getUpdatedItems } from "@ilo-org/utils";
+import { checkArrayDuplicates } from "../../utils/checkArrayDuplicates";
+
+export const TagSetContext = createContext({} as TagSetContextProps);
+
+const TagSet: FC<TagSetProps> = ({
+  className,
+  children,
+  onButtonClick,
+  defaultTagActive = [],
+  allowMultipleActive = true,
+  ...rest
+}) => {
+  const { prefix } = useGlobalSettings();
+  const baseClass = `${prefix}--tag-set`;
+  const [activeItems, setActiveItems] = useState<string[]>([]);
+
+  const defaultTagActiveString = JSON.stringify(defaultTagActive);
+
+  useEffect(() => {
+    const tagOnLoad = allowMultipleActive
+      ? defaultTagActive
+      : defaultTagActive.length > 0
+      ? [defaultTagActive[0]]
+      : defaultTagActive;
+    setActiveItems(tagOnLoad);
+  }, [defaultTagActiveString, allowMultipleActive]); //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: Tags must have unique ids.");
+    }
+  }
+
+  const tagClasses = classNames(className, {
+    [baseClass]: true,
+  });
+
+  return (
+    <TagSetContext.Provider
+      value={{
+        activeItems,
+        setActiveItems,
+        getUpdatedItems,
+        allowMultipleActive,
+        onButtonClick,
+      }}
+    >
+      <ul className={tagClasses} {...rest}>
+        {children}
+      </ul>
+    </TagSetContext.Provider>
+  );
+};
+
+export default TagSet;

package/src/components/Tag/index.ts

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

package/src/components/Textarea/Textarea.args.ts

@@ -0,0 +1,62 @@
+import { TextareaProps } from "./Textarea.props";
+
+const basic: TextareaProps = {
+  callback: "",
+  disabled: false,
+  error: false,
+  helper: false,
+  label: "Textarea",
+  name: "textarea",
+  placeholder: "Textarea",
+  required: false,
+  spellcheck: false,
+};
+
+const hashelper: TextareaProps = {
+  callback: "",
+  disabled: false,
+  error: false,
+  helper: "This one has helper text",
+  label: "Textarea",
+  name: "textarea",
+  placeholder: "Textarea",
+  required: false,
+  spellcheck: false,
+};
+
+const haserror: TextareaProps = {
+  callback: "",
+  disabled: false,
+  error: "This one has an error",
+  helper: false,
+  label: "Textarea",
+  name: "textarea",
+  placeholder: "Textarea",
+  required: false,
+  spellcheck: false,
+};
+
+const hastooltip: TextareaProps = {
+  callback: "",
+  disabled: false,
+  error: false,
+  helper: false,
+  label: "Textarea",
+  name: "textarea",
+  placeholder: "Textarea",
+  required: false,
+  spellcheck: false,
+  tooltip: "This is the tooltip",
+};
+
+/**
+ * Sample prop definitions Textarea's enumerable properties (imported in stories and test)
+ */
+const TextareaArgs = {
+  basic,
+  hashelper,
+  haserror,
+  hastooltip,
+};
+
+export default TextareaArgs;

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

@@ -0,0 +1,71 @@
+export interface TextareaProps {
+  /**
+   * The Textarea's onChange callback.
+   */
+  callback: function;
+
+  /**
+   * Specify an optional className to be added to your Textarea.
+   */
+  className?: string;
+
+  /**
+   * Is the Textarea disabled?
+   */
+  disabled?: boolean;
+
+  /**
+   * Does the Textarea have an error?
+   */
+  error?: string | false;
+
+  /**
+   * The Textarea's helper text
+   */
+  helper: string | false;
+
+  /**
+   * The Textarea's id attribute
+   */
+  id?: string;
+
+  /**
+   * Does this Textarea have a label?
+   */
+  label: string;
+
+  /**
+   * The Textarea's maxlength
+   */
+  maxlength?: number;
+
+  /**
+   * The Textarea's minlength
+   */
+  minlength?: number;
+
+  /**
+   * The Textarea's name attribute
+   */
+  name?: Required<string>;
+
+  /**
+   * Specify an optional className to be added to your Textarea component.
+   */
+  placeholder?: string;
+
+  /**
+   * Specify whether this Textarea is required
+   */
+  required?: boolean;
+
+  /**
+   * Specify whether this Textarea employs browser-based spellcheck
+   */
+  spellcheck?: boolean;
+
+  /**
+   * Does this Textarea have a tooltip?
+   */
+  tooltip?: string;
+}

package/src/components/Textarea/Textarea.tsx

@@ -0,0 +1,67 @@
+import { FC } from "react";
+import classNames from "classnames";
+import useGlobalSettings from "../../hooks/useGlobalSettings";
+import { TextareaProps } from "./Textarea.props";
+import { Fieldset } from "../Fieldset";
+import { FormElement } from "../FormElement";
+
+const Textarea: FC<TextareaProps> = ({
+  callback,
+  disabled = false,
+  error,
+  helper,
+  id,
+  label,
+  maxlength,
+  minlength,
+  name,
+  placeholder,
+  required,
+  spellcheck,
+  tooltip,
+}) => {
+  const { prefix } = useGlobalSettings();
+  const baseClass = `${prefix}--textarea`;
+
+  const TextareaClasses = classNames("", {
+    [baseClass]: true,
+    [`error`]: error,
+  });
+
+  /**
+   * On change, if there is a callback, call it
+   */
+  const handleChange = (e: React.ChangeEvent<HTMLTextAreaElement>) => {
+    if (callback) {
+      callback(e);
+    }
+  };
+
+  return (
+    <Fieldset legend={false} fieldsetid={false}>
+      <FormElement
+        elemid={name as any}
+        label={label}
+        helper={helper as any}
+        error={error as any}
+        required={required as any}
+        tooltip={tooltip}
+      >
+        <textarea
+          id={id}
+          name={name}
+          onChange={handleChange}
+          disabled={disabled}
+          placeholder={placeholder}
+          required={required as any}
+          className={TextareaClasses}
+          maxLength={maxlength}
+          minLength={minlength}
+          spellCheck={spellcheck}
+        />
+      </FormElement>
+    </Fieldset>
+  );
+};
+
+export default Textarea;

package/src/components/Textarea/index.ts

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

package/src/components/Tooltip/Tooltip.args.ts

@@ -0,0 +1,43 @@
+import { TooltipProps } from "./Tooltip.props";
+
+const light: TooltipProps = {
+  children: "<button>test<button>",
+  label: "This is a tooltip",
+  theme: "light", // "light" | "dark" ;
+  isVisible: false,
+};
+
+const lighticon: TooltipProps = {
+  children: "<button>test<button>",
+  icon: true,
+  label: "This is a tooltip",
+  theme: "light", // "light" | "dark" ;
+  isVisible: false,
+};
+
+const dark: TooltipProps = {
+  children: "<button>test<button>",
+  label: "This is a tooltip",
+  theme: "dark", // "light" | "dark" ;
+  isVisible: false,
+};
+
+const darkicon: TooltipProps = {
+  children: "<button>test<button>",
+  icon: true,
+  label: "This is a tooltip",
+  theme: "dark", // "light" | "dark" ;
+  isVisible: false,
+};
+
+/**
+ * Sample prop definitions for Tooltip's enumerable properties (imported in stories and tests).
+ */
+const tooltipArgs = {
+  light,
+  lighticon,
+  dark,
+  darkicon,
+};
+
+export default tooltipArgs;

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

@@ -0,0 +1,48 @@
+import { tooltipAlignment, tooltipPlacement, tooltipThemes } from "../../types";
+
+export interface TooltipProps {
+  /**
+   * Specify the content of your Tooltip.
+   */
+  children?: ReactNode;
+
+  /**
+   * Specify an optional className to be added to your Tooltip.
+   */
+  className?: string;
+
+  /**
+   * Should the tooltip appear on hover of an info icon?
+   */
+  icon?: boolean;
+
+  /**
+   * Set the label for the tooltip
+   */
+  label?: Required<string>;
+
+  /**
+   * Set whether the tooltip is visible or not
+   */
+  isVisible?: boolean;
+
+  /**
+   * Callback fired onMouseOver
+   */
+  onMouseOver?: function;
+
+  /**
+   * Callback fired onMouseOut
+   */
+  onMouseOut?: function;
+
+  /**
+   * Describe the theme of the tooltip
+   */
+  theme?: Required<tooltipThemes>;
+
+  /**
+   * Set a width for the tooltip
+   */
+  width?: string;
+}