@ilo-org/react 0.13.0 → 0.14.1

package/src/components/Input/Input.args.ts

@@ -1,139 +0,0 @@
-import { InputProps } from "./Input.props";
-
-const basic: InputProps = {
-  callback: () => {},
-  disabled: false,
-  error: false,
-  helper: false,
-  label: "Text Field Label",
-  name: "text",
-  placeholder: "Text Field",
-  required: false,
-  type: "text",
-};
-
-const isdisabled: InputProps = {
-  callback: () => {},
-  disabled: true,
-  error: false,
-  helper: "This one has helper text",
-  label: "Disabled Text Field Label",
-  name: "text",
-  placeholder: "Disabled Text Field",
-  required: false,
-  type: "text",
-};
-
-const hashelper: InputProps = {
-  callback: () => {},
-  disabled: false,
-  error: false,
-  helper: "This one has helper text",
-  label: "Text Field Label",
-  name: "text",
-  placeholder: "Helper Text Field",
-  required: false,
-  type: "text",
-};
-
-const haserror: InputProps = {
-  callback: () => {},
-  disabled: false,
-  error: "This one has an error",
-  helper: false,
-  label: "Text Field Label",
-  name: "text",
-  placeholder: "Error Text Field",
-  required: false,
-  type: "text",
-};
-
-const hastooltip: InputProps = {
-  callback: () => {},
-  disabled: false,
-  error: false,
-  helper: false,
-  label: "Text Field Label",
-  name: "text",
-  placeholder: "Tooltip Text Field",
-  required: false,
-  tooltip: "Here is the tooltip",
-  type: "text",
-};
-
-const email: InputProps = {
-  callback: () => {},
-  disabled: false,
-  error: false,
-  helper: false,
-  label: "Email Field Label",
-  name: "email",
-  placeholder: "Email Field",
-  required: false,
-  type: "email",
-};
-
-const hidden: InputProps = {
-  callback: () => {},
-  disabled: false,
-  error: false,
-  helper: false,
-  label: "Hidden Field Label",
-  name: "hidden",
-  required: false,
-  type: "hidden",
-};
-
-const password: InputProps = {
-  callback: () => {},
-  disabled: false,
-  error: false,
-  helper: false,
-  label: "Password Field Label",
-  name: "password",
-  placeholder: "Password Field",
-  required: false,
-  type: "email",
-};
-
-const tel: InputProps = {
-  callback: () => {},
-  disabled: false,
-  error: false,
-  helper: false,
-  label: "Telephone Field Label",
-  name: "tel",
-  placeholder: "Telephone Field",
-  required: false,
-  type: "tel",
-};
-
-const url: InputProps = {
-  callback: () => {},
-  disabled: false,
-  error: false,
-  helper: false,
-  label: "URL Field Label",
-  name: "url",
-  placeholder: "URL Field",
-  required: false,
-  type: "url",
-};
-
-/**
- * Sample prop definitions Input's enumerable properties (imported in stories and test)
- */
-const InputArgs = {
-  basic,
-  isdisabled,
-  hashelper,
-  haserror,
-  hastooltip,
-  email,
-  hidden,
-  password,
-  tel,
-  url,
-};
-
-export default InputArgs;

package/src/components/Input/Input.props.ts

@@ -1,65 +0,0 @@
-import { TextInputTypes } from "../../types";
-
-export interface InputProps {
-  /**
-   * The input's onChange callback.
-   */
-  callback?: (e: React.ChangeEvent<HTMLInputElement>) => any;
-
-  /**
-   * Specify an optional className to be added to your input.
-   */
-  className?: string;
-
-  /**
-   * Is the input disabled?
-   */
-  disabled?: boolean;
-
-  /**
-   * Does the input have an error?
-   */
-  error?: string | false;
-
-  /**
-   * The input's helper text
-   */
-  helper?: string | false;
-
-  /**
-   * The input's id attribute
-   */
-  id?: string;
-
-  /**
-   * Does this input have a label?
-   */
-  label?: string;
-
-  /**
-   * The input's name attribute
-   */
-  name?: Required<string>;
-
-  /**
-   * Specify an optional className to be added to your Input component.
-   */
-  placeholder?: string;
-
-  /**
-   * Specify whether this input is required
-   */
-  required?: boolean;
-
-  /**
-   * Does this Input have a tooltip?
-   */
-  tooltip?: string;
-
-  /**
-   * The input's type.
-   */
-  type: TextInputTypes;
-
-  value: string;
-}

package/src/components/Input/Input.tsx

@@ -1,65 +0,0 @@
-import { FC } from "react";
-import classNames from "classnames";
-import useGlobalSettings from "../../hooks/useGlobalSettings";
-import { InputProps } from "./Input.props";
-import { Fieldset } from "../Fieldset";
-import { FormElement } from "../FormElement";
-
-const Input: FC<InputProps> = ({
-  callback,
-  disabled = false,
-  error,
-  helper,
-  id,
-  label,
-  name,
-  placeholder,
-  required,
-  tooltip,
-  value,
-  type = "text",
-}) => {
-  const { prefix } = useGlobalSettings();
-  const baseClass = `${prefix}--input`;
-
-  const InputClasses = classNames("", {
-    [baseClass]: true,
-    [`error`]: error,
-  });
-
-  /**
-   * On change, if there is a callback, call it
-   */
-  const handleChange = (e: React.ChangeEvent<HTMLInputElement>) => {
-    if (callback) {
-      callback(e);
-    }
-  };
-
-  return (
-    <Fieldset>
-      <FormElement
-        elemid={name as any}
-        label={label as any}
-        helper={helper as any}
-        error={error as any}
-        required={required as any}
-        tooltip={tooltip}
-      >
-        <input
-          id={id ? id : name}
-          name={name}
-          onChange={handleChange}
-          disabled={disabled}
-          placeholder={placeholder}
-          required={required as any}
-          type={type}
-          value={value}
-          className={InputClasses}
-        />
-      </FormElement>
-    </Fieldset>
-  );
-};
-
-export default Input;

package/src/components/Input/index.ts

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

package/src/components/Link/Link.props.ts

@@ -1,39 +0,0 @@
-import { ReactNode } from "react";
-import { LinkTypes } from "../../types";
-
-export interface LinkProps {
-  /**
-   * Specify the content of your Link.
-   */
-  children: ReactNode;
-
-  /**
-   * Specify the label for the link
-   */
-  label?: string;
-
-  /**
-   * Specify the url for the link's href
-   */
-  url?: string;
-
-  /**
-   * Specify the target for the link
-   */
-  target?: string;
-
-  /**
-   * Specify an optional className to be added to your Link.
-   */
-  theme?: LinkTypes;
-
-  /**
-   * Specify an optional className to be added to your Link.
-   */
-  className?: string;
-
-  /**
-   * Inline styles to be applied to the rendered element
-   */
-  style?: React.CSSProperties;
-}

package/src/components/Link/Link.tsx

@@ -1,42 +0,0 @@
-import { FC } from "react";
-import classNames from "classnames";
-import useGlobalSettings from "../../hooks/useGlobalSettings";
-import { LinkProps } from "./Link.props";
-
-const Link: FC<LinkProps> = ({
-  children,
-  className,
-  label,
-  target,
-  theme = "light",
-  url,
-  style,
-  ...rest
-}) => {
-  const { prefix } = useGlobalSettings();
-  const baseClass =
-    typeof className !== "undefined" && className.includes("button")
-      ? ""
-      : `${prefix}--link`;
-
-  const linkClasses = classNames(className, {
-    [baseClass]: true,
-    [`${baseClass}--${theme}`]: theme,
-  });
-
-  return (
-    <a
-      className={linkClasses}
-      href={url}
-      target={target}
-      rel={target ? "noopener noreferrer" : ""}
-      style={style}
-      {...rest}
-    >
-      {label && <span className="link__label">{label}</span>}
-      {children}
-    </a>
-  );
-};
-
-export default Link;

package/src/components/Link/index.ts

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

package/src/components/LinkList/LinkList.args.ts

@@ -1,193 +0,0 @@
-import { LinkListProps } from "./LinkList.props";
-
-const basic: LinkListProps = {
-  headline: "Link List Headline",
-  linkgroup: [
-    {
-      links: [
-        {
-          label: "Link One",
-          url: "http://www.google.com",
-        },
-        {
-          label: "Link Two",
-          url: "http://www.google.com",
-        },
-        {
-          label: "Link Three",
-          url: "http://www.google.com",
-        },
-        {
-          label: "Link Four",
-          url: "http://www.google.com",
-        },
-        {
-          label: "Link Five Is Much Longer",
-          url: "http://www.google.com",
-        },
-      ],
-    },
-  ],
-};
-
-const withindented: LinkListProps = {
-  headline: "Link List Headline",
-  linkgroup: [
-    {
-      links: [
-        {
-          label: "Link One",
-          url: "http://www.google.com",
-        },
-        {
-          indented: true,
-          label: "Link Two",
-          url: "http://www.google.com",
-        },
-        {
-          indented: true,
-          label: "Link Three",
-          url: "http://www.google.com",
-        },
-        {
-          indented: true,
-          label: "Link Four",
-          url: "http://www.google.com",
-        },
-        {
-          label: "Link Five Is Much Longer",
-          url: "http://www.google.com",
-        },
-      ],
-    },
-  ],
-};
-
-const withsections: LinkListProps = {
-  headline: "Link List Headline",
-  linkgroup: [
-    {
-      headline: "Section Headline",
-      links: [
-        {
-          label: "Link One",
-          url: "http://www.google.com",
-        },
-        {
-          label: "Link Two",
-          url: "http://www.google.com",
-        },
-        {
-          label: "Link Three",
-          url: "http://www.google.com",
-        },
-        {
-          label: "Link Four",
-          url: "http://www.google.com",
-        },
-        {
-          label: "Link Five Is Much Longer",
-          url: "http://www.google.com",
-        },
-      ],
-    },
-    {
-      headline: "Section 2 Headline",
-      links: [
-        {
-          label: "Section 2 Link One",
-          url: "http://www.google.com",
-        },
-        {
-          label: "Section 2 Link Two",
-          url: "http://www.google.com",
-        },
-        {
-          label: "Section 2 Link Three",
-          url: "http://www.google.com",
-        },
-        {
-          label: "Section 2 Link Four",
-          url: "http://www.google.com",
-        },
-        {
-          label: "Section 2 Link Five",
-          url: "http://www.google.com",
-        },
-      ],
-    },
-  ],
-};
-
-const withsectionsindented: LinkListProps = {
-  headline: "Link List Headline",
-  linkgroup: [
-    {
-      headline: "Section Headline",
-      links: [
-        {
-          indented: true,
-          label: "Link One",
-          url: "http://www.google.com",
-        },
-        {
-          label: "Link Two",
-          url: "http://www.google.com",
-        },
-        {
-          label: "Link Three",
-          url: "http://www.google.com",
-        },
-        {
-          label: "Link Four",
-          url: "http://www.google.com",
-        },
-        {
-          indented: true,
-          label: "Link Five Is Much Longer",
-          url: "http://www.google.com",
-        },
-      ],
-    },
-    {
-      headline: "Section 2 Headline",
-      links: [
-        {
-          label: "Section 2 Link One",
-          url: "http://www.google.com",
-        },
-        {
-          indented: true,
-          label: "Section 2 Link Two",
-          url: "http://www.google.com",
-        },
-        {
-          indented: true,
-          label: "Section 2 Link Three",
-          url: "http://www.google.com",
-        },
-        {
-          indented: true,
-          label: "Section 2 Link Four",
-          url: "http://www.google.com",
-        },
-        {
-          label: "Section 2 Link Five",
-          url: "http://www.google.com",
-        },
-      ],
-    },
-  ],
-};
-
-/**
- * Sample prop definitions for LinkLists's enumerable properties (imported in stories and test)
- */
-const LinkListArgs = {
-  basic,
-  withindented,
-  withsections,
-  withsectionsindented,
-};
-
-export default LinkListArgs;

package/src/components/LinkList/LinkList.props.ts

@@ -1,52 +0,0 @@
-import { LinkListThemes } from "../../types";
-
-export interface LinkProps {
-  /**
-   * Specify if this link should indent and have a triangle icon
-   */
-  indented?: boolean;
-
-  /**
-   * Specify the label for this link
-   */
-  label?: Required<string>;
-
-  /**
-   * Specify the url for this link
-   */
-  url?: Required<string>;
-}
-
-export interface LinkGroupProps {
-  /**
-   * Specify an optional headline for this link group
-   */
-  headline?: string;
-
-  /**
-   * Specify the links to be displayed in this link group
-   */
-  links?: Required<Array<LinkProps>>;
-}
-
-export interface LinkListProps {
-  /**
-   * Specify an optional className to be added to your Link List component.
-   */
-  className?: string;
-
-  /**
-   * Specify a headline for the the Link List
-   */
-  headline?: Required<string>;
-
-  /**
-   * Specify the links to be displayed in the Link List
-   */
-  linkgroup?: Required<Array<LinkGroupProps>>;
-
-  /**
-   * Specify the theme for the Link List
-   */
-  theme?: Required<LinkListThemes>;
-}

package/src/components/LinkList/LinkList.tsx

@@ -1,59 +0,0 @@
-import { FC } from "react";
-import classNames from "classnames";
-import useGlobalSettings from "../../hooks/useGlobalSettings";
-import { LinkListProps } from "./LinkList.props";
-
-const LinkList: FC<LinkListProps> = ({
-  className,
-  headline,
-  linkgroup,
-  theme,
-}) => {
-  const { prefix } = useGlobalSettings();
-  const baseClass = `${prefix}--link-list`;
-  const linkListClasses = classNames(className, {
-    [baseClass]: true,
-    [`${baseClass + "--" + (theme && theme === "dark" ? theme : "light")}`]:
-      true,
-  });
-
-  return (
-    <div className={linkListClasses}>
-      {headline && <h3 className={`${baseClass}--headline`}>{headline}</h3>}
-      <ul className={`${baseClass}--linkgroups`}>
-        {linkgroup &&
-          linkgroup.map((linkset, i) => (
-            <li
-              className={`${baseClass}--linkgroups-item`}
-              key={`${baseClass}--linkgroups-item-${i}`}
-            >
-              {linkset.headline && (
-                <h4 className={`${baseClass}--links--headline`}>
-                  {linkset.headline}
-                </h4>
-              )}
-              <ul className={`${baseClass}--links`}>
-                {linkset.links &&
-                  linkset.links.map((link, i) => (
-                    <li
-                      className={`${baseClass}--links--item${
-                        link.indented ? " indented" : ""
-                      }`}
-                      key={`${baseClass}--links--item-${i}`}
-                    >
-                      <a href={link.url} className={`${baseClass}--link`}>
-                        <span className={`${baseClass}--label`}>
-                          {link.label}
-                        </span>
-                      </a>
-                    </li>
-                  ))}
-              </ul>
-            </li>
-          ))}
-      </ul>
-    </div>
-  );
-};
-
-export default LinkList;

package/src/components/LinkList/index.ts

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

package/src/components/List/List.args.ts

@@ -1,34 +0,0 @@
-import { ListProps } from "./List.props";
-
-const unordered: ListProps = {
-  ordered: "unordered",
-  title: "Unordered List Title",
-};
-
-const unstyled: ListProps = {
-  ordered: "unstyled",
-  title: "Unstyled List Title",
-};
-
-const ordered: ListProps = {
-  ordered: "ordered",
-  title: "Ordered List Title",
-};
-
-const horizontal: ListProps = {
-  alignment: "horizontal",
-  ordered: "unordered",
-  title: "Horizontal List Title",
-};
-
-/**
- * Sample prop definitions for Lists's enumerable properties (imported in stories and test)
- */
-const ListArgs = {
-  horizontal,
-  ordered,
-  unstyled,
-  unordered,
-};
-
-export default ListArgs;