@ilo-org/react 0.0.1

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

@@ -0,0 +1,193 @@
+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.d.ts

@@ -0,0 +1,52 @@
+import { linkListThemes } from "../../types";
+
+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>;
+}
+
+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

@@ -0,0 +1,59 @@
+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}>
+      <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

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

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

@@ -0,0 +1,38 @@
+import { ListProps } from "./List.props";
+
+const unordered: ListProps = {
+  children: "",
+  ordered: "unordered",
+  title: "Unordered List Title",
+};
+
+const unstyled: ListProps = {
+  children: "",
+  ordered: "unstyled",
+  title: "Unstyled List Title",
+};
+
+const ordered: ListProps = {
+  children: "",
+  ordered: "ordered",
+  title: "Ordered List Title",
+};
+
+const horizontal: ListProps = {
+  children: "",
+  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;

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

@@ -0,0 +1,36 @@
+export { default as ListItem } from "./ListItem";
+import { listAlignment, listOrder } from "../../types";
+
+export interface ListProps {
+  /**
+   * Specify the content of your List.
+   */
+  children: ReactElement<ListItem> | Array<ReactElement<ListItem>>;
+
+  /**
+   * Declare ordered, unordered or unstyled
+   */
+  ordered?: listOrder;
+
+  /**
+   * Declare horizontal or default
+   */
+  alignment?: listAlignment;
+
+  /**
+   * Specify an optional title
+   */
+  title?: string;
+
+  /**
+   * Specify an optional className to be added to your accordion.
+   */
+  className?: string;
+}
+
+export interface ListContextProps {
+  activeItems: string[];
+  alignment?: listAlignment;
+  ordered?: listOrder;
+  headingLevel?: headingLevel;
+}

package/src/components/List/List.tsx

@@ -0,0 +1,47 @@
+import { useState, createContext, FC } from "react";
+import classNames from "classnames";
+import useGlobalSettings from "../../hooks/useGlobalSettings";
+import { ListProps, ListContextProps } from "./List.props";
+
+export const ListContext = createContext({} as ListContextProps);
+
+const List: FC<ListProps> = ({
+  children,
+  className,
+  alignment,
+  ordered,
+  title,
+}) => {
+  const { prefix } = useGlobalSettings();
+  const baseClass = `${prefix}--list`;
+  const [activeItems] = useState<string[]>([]);
+
+  const listClasses = classNames(className, {
+    [baseClass]: true,
+    [`${baseClass}--${alignment}`]: alignment,
+    [`${baseClass}--${ordered}`]: true,
+  });
+
+  return (
+    <ListContext.Provider
+      value={{
+        activeItems,
+      }}
+    >
+      {ordered && ordered === "ordered" && (
+        <ol className={listClasses}>
+          {title && <h5 className={`${baseClass}__title`}>{title}</h5>}
+          {children}
+        </ol>
+      )}
+      {ordered && ordered !== "ordered" && (
+        <ul className={listClasses}>
+          {title && <h5 className={`${baseClass}__title`}>{title}</h5>}
+          {children}
+        </ul>
+      )}
+    </ListContext.Provider>
+  );
+};
+
+export default List;

package/src/components/List/ListItem.props.d.ts

@@ -0,0 +1,25 @@
+import { ReactNode } from "react";
+
+export interface ListItemContextProps {
+  /**
+   * The list item's unique id.
+   */
+  id: string;
+}
+
+export interface ListItemProps {
+  /**
+   * Specify the id of the List item.
+   */
+  id: string;
+
+  /**
+   * Specify the content of your Button.
+   */
+  children: ReactNode;
+
+  /**
+   * Specify an optional className to be added to your Button.
+   */
+  className?: string;
+}

package/src/components/List/ListItem.tsx

@@ -0,0 +1,23 @@
+import { FC, createContext } from "react";
+import classNames from "classnames";
+import useGlobalSettings from "../../hooks/useGlobalSettings";
+import { ListItemProps, ListItemContextProps } from "./ListItem.props";
+
+export const ListItemContext = createContext({} as ListItemContextProps);
+
+const ListItem: FC<ListItemProps> = ({ children, id, className, ...rest }) => {
+  const { prefix } = useGlobalSettings();
+  const baseClass = `${prefix}--list__item`;
+  const listItemClasses = classNames(className, {
+    [baseClass]: true,
+  });
+  return (
+    <ListItemContext.Provider value={{ id }}>
+      <li className={listItemClasses} {...rest}>
+        {children}
+      </li>
+    </ListItemContext.Provider>
+  );
+};
+
+export default ListItem;

package/src/components/List/index.ts

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

package/src/components/Loading/Loading.args.ts

@@ -0,0 +1,55 @@
+import { LoadingProps } from "./Loading.props";
+
+const idlelarge: LoadingProps = {
+  className: "storybook",
+  size: "large",
+  status: "idle",
+};
+
+const loadinglarge: LoadingProps = {
+  className: "storybook",
+  message: "Submitting",
+  size: "large",
+  status: "loading",
+};
+
+const loadedlarge: LoadingProps = {
+  className: "storybook",
+  message: "Completed",
+  size: "large",
+  status: "loaded",
+};
+
+const idlesmall: LoadingProps = {
+  className: "storybook",
+  size: "small",
+  status: "idle",
+};
+
+const loadingsmall: LoadingProps = {
+  className: "storybook",
+  message: "Submitting",
+  size: "small",
+  status: "loading",
+};
+
+const loadedsmall: LoadingProps = {
+  className: "storybook",
+  message: "Completed",
+  size: "small",
+  status: "loaded",
+};
+
+/**
+ * Sample prop definitions for Loading's enumerable properties (imported in stories and test)
+ */
+const LoadingArgs = {
+  loadinglarge,
+  idlelarge,
+  loadedlarge,
+  idlesmall,
+  loadingsmall,
+  loadedsmall,
+};
+
+export default LoadingArgs;

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

@@ -0,0 +1,23 @@
+import { loadingStatus, loadingSize } from "../../types";
+
+export interface LoadingProps {
+  /**
+   * Specify an optional className to be added to your empty component.
+   */
+  className?: string;
+
+  /**
+   * Specify the loading message
+   */
+  message?: string;
+
+  /**
+   * Specify the loader's size
+   */
+  size?: Required<loadingSize>;
+
+  /**
+   * Specify the loading status
+   */
+  status?: Required<loadingStatus>;
+}

package/src/components/Loading/Loading.tsx

@@ -0,0 +1,24 @@
+import { FC } from "react";
+import classNames from "classnames";
+import useGlobalSettings from "../../hooks/useGlobalSettings";
+import { LoadingProps } from "./Loading.props";
+
+const Loading: FC<LoadingProps> = ({ className, message, size, status }) => {
+  const { prefix } = useGlobalSettings();
+  const baseClass = `${prefix}--loading`;
+  const loadingClasses = classNames(className, {
+    [baseClass]: true,
+    [`${baseClass}--${size}`]: size,
+    [`${baseClass}--${status}`]: status,
+  });
+
+  return (
+    <div className={loadingClasses} role="alert" aria-live="assertive">
+      {status && message && status !== "idle" && (
+        <p className={`${baseClass}--copy`}>{message}</p>
+      )}
+    </div>
+  );
+};
+
+export default Loading;

package/src/components/Loading/index.ts

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