@ilo-org/react 0.0.1

package/src/components/Notification/Notification.args.ts

@@ -0,0 +1,157 @@
+import { NotificationProps } from "./Notification.props";
+
+const hascta: NotificationProps = {
+  className: "storybook",
+  closelabel: "Close",
+  copy: "Lorem ipsum dolor sit amet, consectetur adipiscing elit.",
+  cta: {
+    label: "Optional CTA",
+    url: "http://www.google.com",
+  },
+  headline: "With CTA",
+  placement: "inline",
+  type: "info",
+  timestamp: {
+    human: "Dec 7, 2022",
+    unix: "1670389200",
+  },
+};
+
+const nocta: NotificationProps = {
+  className: "storybook",
+  closelabel: "Close",
+  copy: "Lorem ipsum dolor sit amet, consectetur adipiscing elit.",
+  headline: "Notification Info",
+  placement: "inline",
+  type: "info",
+  timestamp: {
+    human: "Dec 7, 2022",
+    unix: "1670389200",
+  },
+};
+
+const error: NotificationProps = {
+  className: "storybook",
+  closelabel: "Close",
+  copy: "Lorem ipsum dolor sit amet, consectetur adipiscing elit.",
+  headline: "Notification Error",
+  placement: "inline",
+  type: "error",
+  timestamp: {
+    human: "Dec 7, 2022",
+    unix: "1670389200",
+  },
+};
+
+const success: NotificationProps = {
+  className: "storybook",
+  closelabel: "Close",
+  copy: "Lorem ipsum dolor sit amet, consectetur adipiscing elit.",
+  headline: "Notification Success",
+  placement: "inline",
+  type: "success",
+  timestamp: {
+    human: "Dec 7, 2022",
+    unix: "1670389200",
+  },
+};
+
+const warning: NotificationProps = {
+  className: "storybook",
+  closelabel: "Close",
+  copy: "Lorem ipsum dolor sit amet, consectetur adipiscing elit.",
+  headline: "Notification Warning",
+  placement: "inline",
+  type: "warning",
+  timestamp: {
+    human: "Dec 7, 2022",
+    unix: "1670389200",
+  },
+};
+
+const hasctadialog: NotificationProps = {
+  className: "storybook",
+  closelabel: "Close",
+  copy: "Lorem ipsum dolor sit amet, consectetur adipiscing elit.",
+  cta: {
+    label: "Optional CTA",
+    url: "http://www.google.com",
+  },
+  headline: "Notification With CTA",
+  placement: "dialog",
+  type: "info",
+  timestamp: {
+    human: "Dec 7, 2022",
+    unix: "1670389200",
+  },
+};
+
+const infodialog: NotificationProps = {
+  className: "storybook",
+  closelabel: "Close",
+  copy: "Lorem ipsum dolor sit amet, consectetur adipiscing elit.",
+  headline: "Notification Info",
+  placement: "dialog",
+  type: "info",
+  timestamp: {
+    human: "Dec 7, 2022",
+    unix: "1670389200",
+  },
+};
+
+const errordialog: NotificationProps = {
+  className: "storybook",
+  closelabel: "Close",
+  copy: "Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum.",
+  headline: "Notification Error",
+  placement: "dialog",
+  type: "error",
+  timestamp: {
+    human: "Dec 7, 2022",
+    unix: "1670389200",
+  },
+};
+
+const successdialog: NotificationProps = {
+  className: "storybook",
+  closelabel: "Close",
+  copy: "Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum.",
+  headline: "Notification Success",
+  placement: "dialog",
+  type: "success",
+  timestamp: {
+    human: "Dec 7, 2022",
+    unix: "1670389200",
+  },
+};
+
+const warningdialog: NotificationProps = {
+  className: "storybook",
+  closelabel: "Close",
+  copy: "Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum.",
+  headline: "Notification Warning",
+  placement: "dialog",
+  type: "warning",
+  timestamp: {
+    human: "Dec 7, 2022",
+    unix: "1670389200",
+  },
+};
+
+/**
+ * Sample prop definitions for Notification's enumerable properties (imported in stories and test)
+ */
+const NotificationArgs = {
+  error,
+  errordialog,
+  hascta,
+  hasctadialog,
+  infodialog,
+  nocta,
+  success,
+  successdialog,
+  warning,
+  warningdialog,
+};
+
+export default NotificationArgs;

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

@@ -0,0 +1,67 @@
+import { notificationPlacement, notificationTypes } from "../../types";
+
+interface CTAProps {
+  /**
+   * Specify the label of the CTA
+   */
+  label?: string;
+
+  /**
+   * Specify the url of the CTA
+   */
+  url?: string;
+}
+
+interface TimeStampProps {
+  /**
+   * Specify the human-readable time
+   */
+  human?: string;
+
+  /**
+   * Specify the UNIX timestamp
+   */
+  unix?: string;
+}
+
+export interface NotificationProps {
+  /**
+   * Specify an optional className to be added to your Notification component.
+   */
+  className?: string;
+
+  /**
+   * Specify the label for the close button
+   */
+  closelabel?: Required<string>;
+
+  /**
+   * Specify the copy
+   */
+  copy?: Required<string>;
+
+  /**
+   * Specify the settings for an option CTA
+   */
+  cta?: CTAProps;
+
+  /**
+   * Specify the headline
+   */
+  headline?: Required<string>;
+
+  /**
+   * Specify whether the notification is inline in the DOM or absolutely-positioned at a higher z-index
+   */
+  placement?: Required<notificationPlacement>;
+
+  /**
+   * Specify an optional timestamp
+   */
+  timestamp?: TimeStampProps;
+
+  /**
+   * Specify the icon for the Notification
+   */
+  type?: notificationTypes;
+}

package/src/components/Notification/Notification.tsx

@@ -0,0 +1,78 @@
+import { FC, useState } from "react";
+import classNames from "classnames";
+import useGlobalSettings from "../../hooks/useGlobalSettings";
+import { NotificationProps } from "./Notification.props";
+import { ButtonProps } from "../Button/Button.props";
+import { Button } from "../Button";
+
+const Notification: FC<NotificationProps> = ({
+  className,
+  closelabel,
+  copy,
+  cta,
+  headline,
+  placement,
+  timestamp,
+  type,
+}) => {
+  const { prefix } = useGlobalSettings();
+
+  const [display, setDisplay] = useState(true);
+
+  const baseClass = `${prefix}--notification`;
+  const notificationClasses = classNames(className, {
+    [baseClass]: true,
+    [`${baseClass}--${placement}`]: placement,
+    [`icon icon--${type}`]: type,
+  });
+
+  const ctaprops: ButtonProps = {
+    callback: false,
+    className: `${baseClass}--cta`,
+    children: false,
+    label: cta?.label,
+    size: "small",
+    type: "secondary",
+    url: cta?.url,
+  };
+
+  /**
+   * On click, close
+   */
+  const handleClick = () => {
+    setDisplay(false);
+  };
+
+  return (
+    <>
+      {display && (
+        <div
+          className={notificationClasses}
+          role="status"
+          aria-live="polite"
+          aria-relevant="additions"
+        >
+          <div className={`${baseClass}--content`}>
+            <h2 className={`${baseClass}--headline`}>{headline}</h2>
+            <p className={`${baseClass}--copy`}>{copy}</p>
+            {timestamp && (
+              <time className={`${baseClass}--date`} dateTime={timestamp.unix}>
+                {timestamp.human}
+              </time>
+            )}
+            {cta && <Button {...ctaprops} />}
+          </div>
+          <button
+            className={`${baseClass}--close`}
+            type="button"
+            onClick={() => handleClick()}
+          >
+            <span>{closelabel}</span>
+          </button>
+        </div>
+      )}
+    </>
+  );
+};
+
+export default Notification;

package/src/components/Notification/index.ts

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

package/src/components/NumberPicker/NumberPicker.args.ts

@@ -0,0 +1,58 @@
+import { NumberPickerProps } from "./NumberPicker.props";
+
+const basic: NumberPickerProps = {
+  callback: "",
+  disabled: false,
+  error: false,
+  helper: false,
+  label: "Number Picker Field Label",
+  name: "text",
+  placeholder: "Number Picker Field",
+  required: false,
+};
+
+const hashelper: NumberPickerProps = {
+  callback: "",
+  disabled: false,
+  error: false,
+  helper: "Here is the helper text",
+  label: "Number Picker Field Label",
+  name: "text",
+  placeholder: "Number Picker Field",
+  required: false,
+};
+
+const haserror: NumberPickerProps = {
+  callback: "",
+  disabled: false,
+  error: "This one has an error",
+  helper: false,
+  label: "Number Picker Field Label",
+  name: "text",
+  placeholder: "Number Picker Field",
+  required: false,
+};
+
+const hastooltip: NumberPickerProps = {
+  callback: "",
+  disabled: false,
+  error: false,
+  helper: false,
+  label: "Number Picker Field Label",
+  name: "text",
+  placeholder: "Number Picker Field",
+  required: false,
+  tooltip: "This is the tooltip",
+};
+
+/**
+ * Sample prop definitions NumberPicker's enumerable properties (imported in stories and test)
+ */
+const NumberPickerArgs = {
+  basic,
+  hashelper,
+  haserror,
+  hastooltip,
+};
+
+export default NumberPickerArgs;

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

@@ -0,0 +1,56 @@
+export interface NumberPickerProps {
+  /**
+   * The input's onChange callback.
+   */
+  callback: function;
+
+  /**
+   * 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 NumberPicker component.
+   */
+  placeholder?: string;
+
+  /**
+   * Specify whether this input is required
+   */
+  required?: boolean;
+
+  /**
+   * Does this NumberPicker have a tooltip?
+   */
+  tooltip?: string;
+}

package/src/components/NumberPicker/NumberPicker.tsx

@@ -0,0 +1,65 @@
+import { FC } from "react";
+import classNames from "classnames";
+import useGlobalSettings from "../../hooks/useGlobalSettings";
+import { NumberPickerProps } from "./NumberPicker.props";
+import { Fieldset } from "../Fieldset";
+import { FormElement } from "../FormElement";
+
+const NumberPicker: FC<NumberPickerProps> = ({
+  callback,
+  disabled = false,
+  error,
+  helper,
+  id,
+  label,
+  name,
+  placeholder,
+  required,
+  tooltip,
+}) => {
+  const { prefix } = useGlobalSettings();
+  const baseClass = `${prefix}--numberpicker`;
+
+  const NumberPickerClasses = 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 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}
+        type={"text"}
+      >
+        <input
+          id={id ? id : name}
+          name={name}
+          onChange={handleChange}
+          disabled={disabled}
+          placeholder={placeholder}
+          required={required as any}
+          type={"text"}
+          className={`${NumberPickerClasses} ${prefix}--input`}
+          pattern="[0-9]*"
+          inputMode="numeric"
+        />
+      </FormElement>
+    </Fieldset>
+  );
+};
+
+export default NumberPicker;

package/src/components/NumberPicker/index.ts

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

package/src/components/Pagination/Pagination.args.ts

@@ -0,0 +1,43 @@
+import { PaginationProps } from "./Pagination.props";
+
+const pagination: PaginationProps = {
+  className: "storybook",
+  callback: "",
+  currentPage: 1,
+  firstPageUrl: "https://www.google.com?s=first",
+  firstPageTitle: "First",
+  lastPageUrl: "https://www.google.com?s=last",
+  lastPageTitle: "Last",
+  nextPageUrl: "https://www.google.com?s=next",
+  nextPageTitle: "Next",
+  pageCountPreposition: "of",
+  prevPageUrl: "https://www.google.com?s=prev",
+  prevPageTitle: "Prev",
+  totalPages: 8,
+};
+
+const firstDisabled: PaginationProps = {
+  className: "storybook",
+  callback: "",
+  currentPage: 0,
+  firstPageUrl: "https://www.google.com?s=first",
+  firstPageTitle: "First",
+  lastPageUrl: "https://www.google.com?s=last",
+  lastPageTitle: "Last",
+  nextPageUrl: "https://www.google.com?s=next",
+  nextPageTitle: "Next",
+  pageCountPreposition: "of",
+  prevPageUrl: "https://www.google.com?s=prev",
+  prevPageTitle: "Prev",
+  totalPages: 1,
+};
+
+/**
+ * Sample prop definitions for Pagination's enumerable properties (imported in stories and test)
+ */
+const PaginationArgs = {
+  pagination,
+  firstDisabled,
+};
+
+export default PaginationArgs;

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

@@ -0,0 +1,66 @@
+export interface PaginationProps {
+  /**
+   * Specify the callback of your Button.
+   */
+  callback: function;
+
+  /**
+   * Specify an optional className to be added to your Pagination component.
+   */
+  className?: string;
+
+  /**
+   * current page number that the user is on, zero-indexed
+   */
+  currentPage: number;
+
+  /**
+   * link to the first page
+   */
+  firstPageUrl: string;
+
+  /**
+   * title label for the first page
+   */
+  firstPageTitle: string;
+
+  /**
+   * link to the last page
+   */
+  lastPageUrl: string;
+
+  /**
+   * title label for the last page
+   */
+  lastPageTitle: string;
+
+  /**
+   * linking word for the page counts
+   */
+  pageCountPreposition?: string;
+
+  /**
+   * link the following page
+   */
+  nextPageUrl: string;
+
+  /**
+   * title label for the next page
+   */
+  nextPageTitle: string;
+
+  /**
+   * link of the previous page
+   */
+  prevPageUrl: string;
+
+  /**
+   * title label for the prev page
+   */
+  prevPageTitle: string;
+
+  /**
+   * total number of pages that are available
+   */
+  totalPages: number;
+}

package/src/components/Pagination/Pagination.tsx

@@ -0,0 +1,114 @@
+import { FC } from "react";
+import classNames from "classnames";
+import useGlobalSettings from "../../hooks/useGlobalSettings";
+import { PaginationProps } from "./Pagination.props";
+
+const Pagination: FC<PaginationProps> = ({
+  className,
+  callback,
+  currentPage,
+  firstPageUrl,
+  firstPageTitle = "First page",
+  lastPageUrl,
+  lastPageTitle = "Last page",
+  nextPageUrl,
+  nextPageTitle = "Next page",
+  pageCountPreposition = "of",
+  prevPageUrl,
+  prevPageTitle = "Previous page",
+  totalPages,
+}) => {
+  const { prefix } = useGlobalSettings();
+
+  const baseClass = `${prefix}--pagination`;
+  const paginationClasses = classNames(className, {
+    [baseClass]: true,
+  });
+
+  const isFirst = currentPage === 0;
+  const isLast = currentPage + 1 === totalPages;
+
+  const firstClasses = classNames(className, {
+    [`${baseClass}--first-page`]: true,
+    [`${baseClass}--link`]: true,
+    [`${baseClass}--disable`]: isFirst,
+  });
+
+  const prevClasses = classNames(className, {
+    [`${baseClass}--prev-page`]: true,
+    [`${baseClass}--link`]: true,
+    [`${baseClass}--disable`]: isFirst,
+  });
+
+  const nextClasses = classNames(className, {
+    [`${baseClass}--next-page`]: true,
+    [`${baseClass}--link`]: true,
+    [`${baseClass}--disable`]: isLast,
+  });
+
+  const lastClasses = classNames(className, {
+    [`${baseClass}--last-page`]: true,
+    [`${baseClass}--link`]: true,
+    [`${baseClass}--disable`]: isLast,
+  });
+
+  /**
+   * On click, if there is a callback, call it
+   */
+  const handleClick = (e: React.MouseEvent<Element, MouseEvent>) => {
+    if (callback) {
+      callback(e);
+    }
+  };
+
+  return (
+    <div className={paginationClasses}>
+      <div className={`${baseClass}--previous-set`}>
+        <a
+          className={firstClasses}
+          onClick={(e) => handleClick(e)}
+          href={firstPageUrl}
+          title={firstPageTitle}
+        >
+          {firstPageTitle}
+        </a>
+
+        <a
+          className={prevClasses}
+          onClick={(e) => handleClick(e)}
+          href={prevPageUrl}
+          title={prevPageTitle}
+        >
+          {prevPageTitle}
+        </a>
+      </div>
+
+      <p className={`${baseClass}--page`}>
+        <span>{currentPage + 1}</span> {pageCountPreposition}{" "}
+        <span>{totalPages}</span>
+      </p>
+
+      <div className={`${baseClass}--next-set`}>
+        <a
+          className={nextClasses}
+          onClick={(e) => handleClick(e)}
+          href={nextPageUrl}
+          title={nextPageTitle}
+        >
+          {nextPageTitle}
+        </a>
+
+        <a
+          className={lastClasses}
+          onClick={(e) => handleClick(e)}
+          href={lastPageUrl}
+          title={lastPageTitle}
+        >
+          {lastPageTitle}
+        </a>
+      </div>
+    </div>
+  );
+};
+
+export default Pagination;