@ilo-org/react 0.0.1

package/src/components/Pagination/index.ts

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

package/src/components/Profile/Profile.args.ts

@@ -0,0 +1,58 @@
+import { ProfileProps } from "./Profile.props";
+
+const basic: ProfileProps = {
+  avatar: "http://placekitten.com/128/128",
+  className: "storybook",
+  name: "Firstname Lastname",
+};
+
+const hasall: ProfileProps = {
+  avatar: "http://placekitten.com/128/128",
+  className: "storybook",
+  description:
+    "Firstname Lastname is the Senior Media Strategist. He has been with ILO for eight years.",
+  link: {
+    label: "Optional Link",
+    url: "http://www.google.com",
+  },
+  name: "Firstname Lastname",
+  role: "Senior Media Strategist",
+};
+
+const hasdescription: ProfileProps = {
+  avatar: "http://placekitten.com/128/128",
+  className: "storybook",
+  description:
+    "Firstname Lastname is the Senior Media Strategist. He has been with ILO for eight years.",
+  name: "Firstname Lastname",
+};
+
+const haslink: ProfileProps = {
+  avatar: "http://placekitten.com/128/128",
+  className: "storybook",
+  link: {
+    label: "Optional Link",
+    url: "http://www.google.com",
+  },
+  name: "Firstname Lastname",
+};
+
+const hasrole: ProfileProps = {
+  avatar: "http://placekitten.com/128/128",
+  className: "storybook",
+  name: "Firstname Lastname",
+  role: "Senior Media Strategist",
+};
+
+/**
+ * Sample prop definitions for Profiles's enumerable properties (imported in stories and test)
+ */
+const ProfileArgs = {
+  basic,
+  hasall,
+  hasdescription,
+  haslink,
+  hasrole,
+};
+
+export default ProfileArgs;

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

@@ -0,0 +1,43 @@
+interface LinkProps {
+  /**
+   * Specify the label for the the Profile's link
+   */
+  label?: Required<string>;
+
+  /**
+   * Specify the url for the Profile's link
+   */
+  url?: Required<string>;
+}
+
+export interface ProfileProps {
+  /**
+   * Specify an optional avatar to be added to your Profile component. Image *must* be a perfect square. CMS backend should provide a fallback if the avatar is not populated.
+   */
+  avatar?: Required<string>;
+
+  /**
+   * Specify an optional className to be added to your Profile component.
+   */
+  className?: string;
+
+  /**
+   * Specify an optional description to be added to your Profile component.
+   */
+  description?: string;
+
+  /**
+   * Specify an optional link to be added to your Profile component.
+   */
+  link?: LinkProps;
+
+  /**
+   * Specify the name to be added to your Profile component.
+   */
+  name?: Required<string>;
+
+  /**
+   * Specify an optional role to be added to your Profile component.
+   */
+  role?: string;
+}

package/src/components/Profile/Profile.tsx

@@ -0,0 +1,43 @@
+import { FC } from "react";
+import classNames from "classnames";
+import useGlobalSettings from "../../hooks/useGlobalSettings";
+import { ProfileProps } from "./Profile.props";
+
+const Profile: FC<ProfileProps> = ({
+  avatar,
+  className,
+  description,
+  link,
+  name,
+  role,
+}) => {
+  const { prefix } = useGlobalSettings();
+  const baseClass = `${prefix}--profile`;
+  const profileClasses = classNames(className, {
+    [baseClass]: true,
+  });
+
+  return (
+    <figure className={profileClasses}>
+      <img
+        className={`${baseClass}--avatar`}
+        src={avatar}
+        alt={`Avatar for ${name}`}
+      />
+      <figcaption className={`${baseClass}--contents`}>
+        <span className={`${baseClass}--name id`}>{name}</span>
+        {role && <span className={`${baseClass}--role id`}>{role}</span>}
+        {description && (
+          <p className={`${baseClass}--description info`}>{description}</p>
+        )}
+        {link && (
+          <a className={`${baseClass}--link info`} href={link.url}>
+            <span>{link.label}</span>
+          </a>
+        )}
+      </figcaption>
+    </figure>
+  );
+};
+
+export default Profile;

package/src/components/Profile/index.ts

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

package/src/components/Radio/Radio.args.ts

@@ -0,0 +1,22 @@
+import { RadioProps } from "./Radio.props";
+
+const basic: RadioProps = {
+  callback: "",
+  disabled: false,
+  error: false,
+  helper: false,
+  label: "Radio Field Label",
+  name: "radio",
+  required: false,
+  type: "radio",
+  value: "radio",
+};
+
+/**
+ * Sample prop definitions Radio's enumerable properties (imported in stories and test)
+ */
+const RadioArgs = {
+  basic,
+};
+
+export default RadioArgs;

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

@@ -0,0 +1,61 @@
+export interface RadioProps {
+  /**
+   * The Radio's onChange callback.
+   */
+  callback: function;
+
+  /**
+   * Specify an optional className to be added to your Radio.
+   */
+  className?: string;
+
+  /**
+   * Is the Radio disabled?
+   */
+  disabled?: boolean;
+
+  /**
+   * Does the Radio have an error?
+   */
+  error?: string | false;
+
+  /**
+   * The Radio's helper text
+   */
+  helper: string | false;
+
+  /**
+   * The Radio's id attribute
+   */
+  id?: string;
+
+  /**
+   * Does this Radio have a label?
+   */
+  label: string;
+
+  /**
+   * The Radio's name attribute
+   */
+  name?: Required<string>;
+
+  /**
+   * Specify whether this Radio is required
+   */
+  required?: boolean;
+
+  /**
+   * Does this Radio have a tooltip?
+   */
+  tooltip?: string;
+
+  /**
+   * The Radio's value attribute
+   */
+  value?: Required<string>;
+
+  /**
+   * The input's type.
+   */
+  type?: "radio";
+}

package/src/components/Radio/Radio.tsx

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

package/src/components/Radio/index.ts

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

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

@@ -0,0 +1,38 @@
+export interface ReadMoreButtonLabelProps {
+  /**
+   * Specify the label for the closed state of the "Read More" button
+   */
+  closed?: Required<string>;
+
+  /**
+   * Specify the label for the opened state of the "Read More" button
+   */
+  opened?: Required<string>;
+}
+
+export interface ReadMoreProps {
+  /**
+   * Specify labels for the "Read More" button.
+   */
+  buttonlabel?: Required<ReadMoreButtonLabelProps>;
+
+  /**
+   * Specify an optional className to be added to your Button.
+   */
+  className?: string;
+
+  /**
+   * Specify the excerpt text
+   */
+  excerpt?: html;
+
+  /**
+   * Specify the complete text
+   */
+  fulltext?: html;
+
+  /**
+   * Specify the open/closed state on component load
+   */
+  openatstart?: boolean;
+}

package/src/components/ReadMore/ReadMore.tsx

@@ -0,0 +1,55 @@
+import { FC, useState } from "react";
+import classNames from "classnames";
+import useGlobalSettings from "../../hooks/useGlobalSettings";
+import { ReadMoreProps } from "./ReadMore.props";
+import { RichText } from "../RichText";
+
+const ReadMore: FC<ReadMoreProps> = ({
+  buttonlabel,
+  className,
+  excerpt,
+  fulltext,
+  openatstart,
+  ...rest
+}) => {
+  const { prefix } = useGlobalSettings();
+  const baseClass = `${prefix}--read-more`;
+  const [content, setContent] = useState(openatstart ? fulltext : excerpt);
+  const [isopen, setOpen] = useState(openatstart);
+
+  const readMoreClasses = classNames(className, {
+    [baseClass]: true,
+    [`${baseClass}--open`]: isopen,
+  });
+
+  const readmoreButtonClasses = classNames(className, {
+    [`${baseClass}--button`]: true,
+    [`${baseClass}--button--open`]: isopen,
+  });
+
+  /**
+   * On click, toggle state vars
+   */
+  const handleClick = () => {
+    const nextcontent = content === excerpt ? fulltext : excerpt;
+    setContent(nextcontent);
+    setOpen(!isopen);
+  };
+
+  return (
+    <div className={readMoreClasses}>
+      <RichText content={content} {...rest} />
+      <button
+        className={readmoreButtonClasses}
+        aria-expanded={isopen}
+        onClick={() => handleClick()}
+      >
+        {isopen
+          ? `${buttonlabel && buttonlabel.opened}`
+          : `${buttonlabel && buttonlabel.closed}`}
+      </button>
+    </div>
+  );
+};
+
+export default ReadMore;

package/src/components/ReadMore/index.ts

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

package/src/components/ReadMore/readMore.args.ts

@@ -0,0 +1,35 @@
+import { ReadMoreProps } from "./ReadMore.props";
+
+const closedatstart: ReadMoreProps = {
+  buttonlabel: {
+    closed: "Read More",
+    opened: "Close",
+  },
+  excerpt:
+    "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.",
+  fulltext:
+    "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.",
+  openatstart: false,
+};
+
+const openedatstart: ReadMoreProps = {
+  buttonlabel: {
+    closed: "Read More",
+    opened: "Close",
+  },
+  excerpt:
+    "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.",
+  fulltext:
+    "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.",
+  openatstart: true,
+};
+
+/**
+ * Sample prop definitions for ReadMore's enumerable properties (imported in stories and tests).
+ */
+const ReadMoreArgs = {
+  openedatstart,
+  closedatstart,
+};
+
+export default ReadMoreArgs;

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

@@ -0,0 +1,11 @@
+export interface RichTextProps {
+  /**
+   * Specify an optional className to be added to your RichText.
+   */
+  className?: string;
+
+  /**
+   * Specify the html content
+   */
+  content?: html;
+}

package/src/components/RichText/RichText.tsx

@@ -0,0 +1,22 @@
+import { FC } from "react";
+import classNames from "classnames";
+import useGlobalSettings from "../../hooks/useGlobalSettings";
+import { RichTextProps } from "./RichText.props";
+
+const RichText: FC<RichTextProps> = ({ className, content }) => {
+  const { prefix } = useGlobalSettings();
+  const baseClass = `${prefix}--richtext`;
+
+  const richTextClasses = classNames(className, {
+    [baseClass]: true,
+  });
+
+  return (
+    <div
+      className={richTextClasses}
+      dangerouslySetInnerHTML={{ __html: content }}
+    />
+  );
+};
+
+export default RichText;

package/src/components/RichText/index.ts

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

package/src/components/RichText/richText.args.ts

@@ -0,0 +1,15 @@
+import { RichTextProps } from "./RichText.props";
+
+const richtext: RichTextProps = {
+  content:
+    "<h1>Apollo 11</h1><p><strong>Apollo 11</strong> was the spaceflight that landed the first humans, Americans <a href='http://en.wikipedia.org/wiki/Neil_Armstrong'>Neil Armstrong</a> and <a href='http://en.wikipedia.org/wiki/Buzz_Aldrin'>Buzz Aldrin</a>, on the Moon on July 20, 1969, at 20:18 UTC. Armstrong became the first to step onto the lunar surface 6 hours later on July 21 at 02:56 UTC.</p><p>Armstrong spent about <s>three and a half</s> two and a half hours outside the spacecraft, Aldrin slightly less; and together they collected 47.5 pounds (21.5&nbsp;kg) of lunar material for return to Earth. A third member of the mission, <a href='http://en.wikipedia.org/wiki/Michael_Collins_(astronaut)'>Michael Collins</a>, piloted the <a href='http://en.wikipedia.org/wiki/Apollo_Command/Service_Module'>command</a> spacecraft alone in lunar orbit until Armstrong and Aldrin returned to it for the trip back to Earth. <figure><img alt='placeholder image' class='right' src='https://place-hold.it/400x300?text=Placeholder Image'><figcaption>The caption for this image</figcaption></figure></p><h2>Broadcasting and <em>quotes</em> <a id='quotes' name='quotes'></a></h2><p>Broadcast on live TV to a world-wide audience, Armstrong stepped onto the lunar surface and described the event as:</p><blockquote><p>One small step for [a] man, one giant leap for mankind</p><cite>Neil Armstrong</cite></blockquote><h2>Technical details <a id='tech-details' name='tech-details'></a></h2><p>Launched by a <strong>Saturn V</strong> rocket from <a href='http://en.wikipedia.org/wiki/Kennedy_Space_Center'>Kennedy Space Center</a> in Merritt Island, Florida on July 16, Apollo 11 was the fifth manned mission of <a href='http://en.wikipedia.org/wiki/NASA'>NASA</a>&#39;s Apollo program. The Apollo spacecraft had three parts:</p><ol><li><strong>Command Module</strong> with a cabin for the three astronauts which was the only part which landed back on Earth</li><li><strong>Service Module</strong> which supported the Command Module with propulsion, electrical power, oxygen and water</li><li><strong>Lunar Module</strong> for landing on the Moon.</li></ol><p>After being sent to the Moon by the Saturn V&#39;s upper stage, the astronauts separated the spacecraft from it and travelled for three days until they entered into lunar orbit. Armstrong and Aldrin then moved into the Lunar Module and landed in the <a href='http://en.wikipedia.org/wiki/Mare_Tranquillitatis'>Sea of Tranquility</a>. They stayed a total of about 21 and a half hours on the lunar surface. After lifting off in the upper part of the Lunar Module and rejoining Collins in the Command Module, they returned to Earth and landed in the <a href='http://en.wikipedia.org/wiki/Pacific_Ocean'>Pacific Ocean</a> on July 24.</p><hr><p><small>Source: <a href='http://en.wikipedia.org/wiki/Apollo_11'>Wikipedia.org</a></small></p><h2>H2 Headline</h2><p>At vero eos et accusamus et iusto odio dignissimos ducimus qui blanditiis praesentium voluptatum deleniti atque corrupti quos dolores et quas molestias excepturi sint occaecati cupiditate non provident, similique sunt in culpa qui officia deserunt mollitia animi, id est laborum et dolorum fuga.</p><h3>H3 Headline</h3><p>At vero eos et accusamus et iusto odio dignissimos ducimus qui blanditiis praesentium voluptatum deleniti atque corrupti quos dolores et quas molestias excepturi sint occaecati cupiditate non provident, similique sunt in culpa qui officia deserunt mollitia animi, id est laborum et dolorum fuga.</p><h4>H4 Headline</h4><p>At vero eos et accusamus et iusto odio dignissimos ducimus qui blanditiis praesentium voluptatum deleniti atque corrupti quos dolores et quas molestias excepturi sint occaecati cupiditate non provident, similique sunt in culpa qui officia deserunt mollitia animi, id est laborum et dolorum fuga.</p><h5>H5 Headline</h5><p>At vero eos et accusamus et iusto odio dignissimos ducimus qui blanditiis praesentium voluptatum deleniti atque corrupti quos dolores et quas molestias excepturi sint occaecati cupiditate non provident, similique sunt in culpa qui officia deserunt mollitia animi, id est laborum et dolorum fuga.</p><h6>H6 Headline</h6><p>At vero eos et accusamus et iusto odio dignissimos ducimus qui blanditiis praesentium voluptatum deleniti atque corrupti quos dolores et quas molestias excepturi sint occaecati cupiditate non provident, similique sunt in culpa qui officia deserunt mollitia animi, id est laborum et dolorum fuga.</p>",
+};
+
+/**
+ * Sample prop definitions for RichText's enumerable properties (imported in stories and tests).
+ */
+const richTextArgs = {
+  richtext,
+};
+
+export default richTextArgs;

package/src/components/SearchField/SearchField.args.ts

@@ -0,0 +1,73 @@
+import { SearchFieldProps } from "./SearchField.props";
+
+const searchfield: SearchFieldProps = {
+  action: "",
+  callback: "",
+  input: {
+    callback: "",
+    disabled: false,
+    name: "search",
+    placeholder: "Search Field",
+    type: "search",
+  },
+};
+
+const searchfielderror: SearchFieldProps = {
+  action: "",
+  callback: "",
+  input: {
+    callback: "",
+    disabled: false,
+    error: "Error message",
+    name: "search",
+    placeholder: "Search Field",
+    type: "search",
+  },
+};
+
+const searchfielddisabled: SearchFieldProps = {
+  action: "",
+  callback: "",
+  input: {
+    callback: "",
+    disabled: true,
+    name: "search",
+    placeholder: "Search Field",
+    type: "search",
+  },
+};
+
+const searchfieldlabel: SearchFieldProps = {
+  action: "",
+  callback: "",
+  input: {
+    label: "Search Field",
+    name: "search",
+    placeholder: "Search Field",
+    type: "search",
+  },
+};
+
+const searchfieldhelper: SearchFieldProps = {
+  action: "",
+  callback: "",
+  input: {
+    helper: "Search Field Helper text",
+    name: "search",
+    placeholder: "Search Field",
+    type: "search",
+  },
+};
+
+/**
+ * Sample prop definitions for SearchField's enumerable properties (imported in stories and test)
+ */
+const SearchFieldArgs = {
+  searchfield,
+  searchfielderror,
+  searchfielddisabled,
+  searchfieldlabel,
+  searchfieldhelper,
+};
+
+export default SearchFieldArgs;

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

@@ -0,0 +1,35 @@
+import { InputProps } from "../Input.props";
+
+export interface ButtonProps {
+  /**
+   * The button's label.
+   */
+  label: Required<string>;
+}
+
+export interface SearchFieldProps {
+  /**
+   * Specify the action attribute for the search form
+   */
+  action?: Required<string>;
+
+  /**
+   * Specify the properties of the submit button
+   */
+  button?: Required<ButtonProps>;
+
+  /**
+   * The search field submit button's click function.
+   */
+  callback: function;
+
+  /**
+   * Specify an optional className to be added to your Button.
+   */
+  className?: string;
+
+  /**
+   * Specify the properties of the search field input
+   */
+  input?: Required<InputProps>;
+}

package/src/components/SearchField/SearchField.tsx

@@ -0,0 +1,55 @@
+import { FC } from "react";
+import classNames from "classnames";
+import useGlobalSettings from "../../hooks/useGlobalSettings";
+import { SearchFieldProps } from "./SearchField.props";
+import { Input } from "../Input";
+
+const SearchField: FC<SearchFieldProps> = ({
+  action,
+  callback,
+  className,
+  input,
+}) => {
+  const { prefix } = useGlobalSettings();
+  const baseClass = `${prefix}--searchfield`;
+  const buttonClass = `${baseClass}--button`;
+
+  const SearchFieldClasses = classNames(className, {
+    [baseClass]: true,
+    [`haslabel`]: input.label,
+  });
+
+  /**
+   * On click, if there is a callback, call it
+   */
+  const handleClick = (e: React.MouseEvent<Element, MouseEvent>) => {
+    if (callback) {
+      callback(e);
+    }
+  };
+
+  return (
+    <form className={SearchFieldClasses} action={action}>
+      <Input
+        id={input.id}
+        name={input.name}
+        disabled={input.disabled}
+        callback={input.callback}
+        error={input.error}
+        helper={input.helper}
+        label={input.label}
+        placeholder={input.placeholder}
+        type={input.type}
+        className={`${prefix}--input`}
+      />
+      <input
+        className={buttonClass}
+        disabled={input.disabled}
+        type="submit"
+        onClick={(e) => handleClick(e)}
+      />
+    </form>
+  );
+};
+
+export default SearchField;

package/src/components/SearchField/index.ts

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