@ilo-org/react 0.0.1

package/src/components/Hero/HeroCard.tsx

@@ -0,0 +1,53 @@
+import { FC } from "react";
+import classNames from "classnames";
+import useGlobalSettings from "../../hooks/useGlobalSettings";
+import { HeroCardProps } from "./HeroCard.props";
+
+const HeroCard: FC<HeroCardProps> = ({
+  className,
+  alignment,
+  datecopy,
+  eyebrow,
+  intro,
+  socials,
+  title,
+  theme = "light",
+  types = "article",
+}) => {
+  const { prefix } = useGlobalSettings();
+
+  const baseClass = `${prefix}--hero-card`;
+  const heroCardClasses = classNames(className, {
+    [baseClass]: true,
+    [`${baseClass}--${alignment}`]: alignment,
+    [`${baseClass}--${theme}`]: theme,
+    [`${baseClass}--${types}`]: types,
+  });
+
+  return (
+    <div className={heroCardClasses}>
+      {eyebrow && <p className={`${baseClass}--eyebrow`}>{eyebrow}</p>}
+      {title && <h2 className={`${baseClass}--title`}>{title}</h2>}
+      {datecopy && <p className={`${baseClass}--datecopy`}>{datecopy}</p>}
+      {intro && <p className={`${baseClass}--intro`}>{intro}</p>}
+      <ul className={`${baseClass}--list`}>
+        {socials &&
+          socials.map((item: any, index: any) => {
+            return (
+              <li className={`${baseClass}--list--item`} key={index}>
+                <a
+                  className={`${baseClass}--link icon icon--${item.icon}`}
+                  href={item.url}
+                  title={item.label}
+                >
+                  {item.label}
+                </a>
+              </li>
+            );
+          })}
+      </ul>
+    </div>
+  );
+};
+
+export default HeroCard;

package/src/components/Hero/index.ts

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

package/src/components/Icon/Icon.args.ts

@@ -0,0 +1,15 @@
+import { IconProps } from "./Icon.props";
+
+const icon: IconProps = {
+  hidden: false,
+  name: "add",
+};
+
+/**
+ * Sample prop definitions for Button's enumerable properties (imported in stories and tests).
+ */
+const IconArgs = {
+  icon,
+};
+
+export default IconArgs;

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

@@ -0,0 +1,16 @@
+export interface IconProps {
+  /**
+   * Specify if this should be hidden from screen readers
+   */
+  hidden: boolean;
+
+  /**
+   * Specify the icon
+   */
+  name?: string;
+
+  /**
+   * Specify the icon's size
+   */
+  size?: integer;
+}

package/src/components/Icon/Icon.tsx

@@ -0,0 +1,25 @@
+import { createElement, FC } from "react";
+import useGlobalSettings from "../../hooks/useGlobalSettings";
+import { IconProps } from "./Icon.props";
+import * as icons from "@ilo-org/icons-react";
+
+const Icon: FC<IconProps> = ({ hidden, name, size }) => {
+  const { prefix } = useGlobalSettings();
+  const baseClass = `${prefix}--icon`;
+  const ariaHidden = hidden ? "hidden" : "";
+  const iconsize = size || 24;
+
+  const icon = name
+    ? createElement(
+        icons[`${name.charAt(0).toUpperCase() + name.slice(1)}${iconsize}`],
+        {
+          "aria-hidden": ariaHidden,
+          className: baseClass,
+        }
+      )
+    : false;
+
+  return <>{icon}</>;
+};
+
+export default Icon;

package/src/components/Icon/index.ts

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

package/src/components/Image/Image.args.ts

@@ -0,0 +1,35 @@
+import { ImageProps } from "./Image.props";
+
+const image: ImageProps = {
+  alt: "My alt text",
+  className: "image",
+  caption: "my image caption",
+  credit: "Photo: copyright 2022 Person S. Name",
+  url: [
+    {
+      breakpoint: 0,
+      src: "https://placekitten.com/400/300",
+    },
+    {
+      breakpoint: 800,
+      src: "https://placekitten.com/800/600",
+    },
+    {
+      breakpoint: 1200,
+      src: "https://placekitten.com/1200/900",
+    },
+    {
+      breakpoint: 1440,
+      src: "https://placekitten.com/1600/1200",
+    },
+  ],
+};
+
+/**
+ * Sample prop definitions for Image's enumerable properties (imported in stories and tests).
+ */
+const imageArgs = {
+  image,
+};
+
+export default imageArgs;

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

@@ -0,0 +1,38 @@
+interface ImageUrl {
+  /**
+   * Specify the breakpoint at which this image src should be used
+   */
+  breakpoint?: number;
+
+  /**
+   * Specify the url of this breakpoint's image src
+   */
+  src?: string;
+}
+
+export interface ImageProps {
+  /**
+   * Specify the alt for the image
+   */
+  alt?: Required<string>;
+
+  /**
+   * Specify the caption for the image/video
+   */
+  caption?: string;
+
+  /**
+   * Specify an optional className to be added to your Media.
+   */
+  className?: string;
+
+  /**
+   * Specify the credit for the image/video
+   */
+  credit?: Required<string>;
+
+  /**
+   * Specify the image src for the image
+   */
+  url?: Required<Array<ImageUrl>>;
+}

package/src/components/Image/Image.tsx

@@ -0,0 +1,51 @@
+import { FC } from "react";
+import classNames from "classnames";
+import useGlobalSettings from "../../hooks/useGlobalSettings";
+import { ImageProps } from "./Image.props";
+import { Credit } from "../Credit";
+
+const Image: FC<ImageProps> = ({ alt, caption, className, credit, url }) => {
+  const { prefix } = useGlobalSettings();
+  const baseClass = `${prefix}--image`;
+
+  const imageClasses = classNames(className, {
+    [baseClass]: true,
+  });
+
+  const imgClasses = classNames("", {
+    [`${baseClass}--img`]: true,
+  });
+
+  const captionClasses = classNames("", {
+    [`${baseClass}--caption`]: true,
+  });
+
+  return (
+    <figure className={imageClasses}>
+      <div className={`${imageClasses}--wrapper`}>
+        <picture className={imgClasses}>
+          {url &&
+            url
+              .sort(
+                (a: any, b: any) =>
+                  parseFloat(a.breakpoint) - parseFloat(b.breakpoint)
+              )
+              .slice(1)
+              .reverse()
+              .map((item: any, index: any) => (
+                <source
+                  srcSet={item.src}
+                  media={`(min-width: ${item.breakpoint}px)`}
+                  key={index}
+                />
+              ))}
+          {url && <img src={url[0].src} alt={alt} />}
+        </picture>
+        {credit && <Credit credit={credit} />}
+      </div>
+      {caption && <figcaption className={captionClasses}>{caption}</figcaption>}
+    </figure>
+  );
+};
+
+export default Image;

package/src/components/Image/index.ts

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

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

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

@@ -0,0 +1,63 @@
+import { inputTypes } from "../../types";
+
+export interface InputProps {
+  /**
+   * 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 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: Required<inputTypes>;
+}

package/src/components/Input/Input.tsx

@@ -0,0 +1,63 @@
+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,
+  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 legend={false} fieldsetid={false}>
+      <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}
+          className={InputClasses}
+        />
+      </FormElement>
+    </Fieldset>
+  );
+};
+
+export default Input;

package/src/components/Input/index.ts

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

package/src/components/Link/Link.args.ts

@@ -0,0 +1,36 @@
+import { LinkProps } from "./Link.props";
+
+const light: LinkProps = {
+  children: "",
+  label: "",
+  target: "",
+  theme: "light",
+  url: "",
+};
+
+const dark: LinkProps = {
+  children: "",
+  label: "",
+  target: "",
+  theme: "dark",
+  url: "",
+};
+
+const footer: LinkProps = {
+  children: "",
+  label: "",
+  target: "",
+  theme: "footer",
+  url: "",
+};
+
+/**
+ * Sample prop definitions for Link's enumerable properties (imported in stories and tests).
+ */
+const LinkArgs = {
+  light,
+  dark,
+  footer,
+};
+
+export default LinkArgs;

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

@@ -0,0 +1,34 @@
+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?: html;
+
+  /**
+   * 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;
+}

package/src/components/Link/Link.tsx

@@ -0,0 +1,49 @@
+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,
+  ...rest
+}) => {
+  const { prefix } = useGlobalSettings();
+  const baseClass =
+    typeof className !== "undefined" && className.includes("button")
+      ? ""
+      : `${prefix}--link`;
+
+  const linkClasses = classNames(className, {
+    [baseClass]: true,
+    [`${baseClass}--${theme}`]: theme,
+  });
+
+  function createMarkup() {
+    return { __html: label };
+  }
+
+  return (
+    <a
+      className={linkClasses}
+      href={url}
+      target={target}
+      rel={target ? "noopener noreferrer" : ""}
+      {...rest}
+    >
+      {label && (
+        <span
+          className="link__label"
+          dangerouslySetInnerHTML={createMarkup()}
+        ></span>
+      )}
+      {children}
+    </a>
+  );
+};
+
+export default Link;

package/src/components/Link/index.ts

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