@ilo-org/react 0.0.1

package/src/components/FormGroup/FormGroup.tsx

@@ -0,0 +1,73 @@
+import { FC } from "react";
+import classNames from "classnames";
+import useGlobalSettings from "../../hooks/useGlobalSettings";
+import { FormGroupProps } from "./FormGroup.props";
+import { Checkbox } from "../Checkbox";
+import { ChoiceGroup } from "../ChoiceGroup";
+import { DatePicker } from "../DatePicker";
+import { Dropdown } from "../Dropdown";
+import { FileUpload } from "../FileUpload";
+import { Input } from "../Input";
+import { NumberPicker } from "../NumberPicker";
+import { Textarea } from "../Textarea";
+
+const FormGroup: FC<FormGroupProps> = ({
+  className,
+  formgroupid,
+  items,
+  legend,
+  type,
+}) => {
+  const { prefix } = useGlobalSettings();
+  const baseClass = `${prefix}--formgroup`;
+  const formGroupClasses = classNames(className, {
+    [baseClass]: true,
+  });
+
+  return (
+    <fieldset
+      className={`${formGroupClasses} ${type}`}
+      id={formgroupid ? (formgroupid as any) : undefined}
+    >
+      {legend && <legend className={`${baseClass}--legend`}>{legend}</legend>}
+      {items.map((item, i) => {
+        if (item?.type === "input") {
+          return <Input {...(item?.field as any)} key={i} />;
+        }
+        if (item?.type === "dropdown") {
+          return <Dropdown {...(item?.field as any)} key={i} />;
+        }
+        if (item?.type === "checkbox" && Array.isArray(item?.field) === false) {
+          return <Checkbox {...(item?.field as any)} key={i} />;
+        }
+        if (
+          (item?.type === "checkbox" || item?.type === "radio") &&
+          Array.isArray(item?.field)
+        ) {
+          return (
+            <ChoiceGroup
+              items={item?.field as any}
+              legend={item?.legend as any}
+              choicegroupid={item?.choicegroupid as any}
+              key={i}
+            />
+          );
+        }
+        if (item?.type === "file") {
+          return <FileUpload {...(item?.field as any)} key={i} />;
+        }
+        if (item?.type === "date") {
+          return <DatePicker {...(item?.field as any)} key={i} />;
+        }
+        if (item?.type === "number") {
+          return <NumberPicker {...(item?.field as any)} key={i} />;
+        }
+        if (item?.type === "textarea") {
+          return <Textarea {...(item?.field as any)} key={i} />;
+        }
+      })}
+    </fieldset>
+  );
+};
+
+export default FormGroup;

package/src/components/FormGroup/index.ts

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

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

@@ -0,0 +1,15 @@
+import { ReactNode } from "react";
+
+export interface GlobalProviderContextProps {
+  /**
+   * Prefix classname to use across the components.
+   */
+  prefix: string;
+}
+
+export interface GlobalProviderProps extends GlobalProviderContextProps {
+  /**
+   * Specify the content of nested under the global provider.
+   */
+  children: ReactNode;
+}

package/src/components/GlobalProvider/GlobalProvider.tsx

@@ -0,0 +1,27 @@
+import { createContext, FC } from "react";
+import { themeprefix } from "@ilo-org/themes/tokens/theme/base.json";
+import {
+  GlobalProviderProps,
+  GlobalProviderContextProps,
+} from "./GlobalProvider.props";
+
+export const GlobalProviderContext = createContext(
+  {} as GlobalProviderContextProps
+);
+
+const GlobalProvider: FC<GlobalProviderProps> = ({
+  prefix = themeprefix.value,
+  children,
+}) => {
+  return (
+    <GlobalProviderContext.Provider
+      value={{
+        prefix,
+      }}
+    >
+      {children}
+    </GlobalProviderContext.Provider>
+  );
+};
+
+export default GlobalProvider;

package/src/components/GlobalProvider/index.js

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

package/src/components/Heading/Heading.args.ts

@@ -0,0 +1,46 @@
+import { HeadingProps } from "./Heading.props";
+
+const heading1: HeadingProps = {
+  children: "Heading 1",
+  level: "h1",
+  type: "actionable",
+};
+
+const heading2: HeadingProps = {
+  children: "Heading 2",
+  level: "h2",
+};
+
+const heading3: HeadingProps = {
+  children: "Heading 3",
+  level: "h3",
+};
+
+const heading4: HeadingProps = {
+  children: "Heading 4",
+  level: "h4",
+};
+
+const heading5: HeadingProps = {
+  children: "Heading 5",
+  level: "h5",
+};
+
+const heading6: HeadingProps = {
+  children: "Heading 6",
+  level: "h6",
+};
+
+/**
+ * Sample prop definitions for Headings's enumerable properties (imported in stories and test)
+ */
+const HeadingArgs = {
+  heading1,
+  heading2,
+  heading3,
+  heading4,
+  heading5,
+  heading6,
+};
+
+export default HeadingArgs;

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

@@ -0,0 +1,24 @@
+import { ReactNode } from "react";
+import { headingLevel, labelTypes } from "../../types";
+
+export interface HeadingProps {
+  /**
+   * Specify the content of your heading.
+   */
+  children: ReactNode;
+
+  /**
+   * Specify the heading level the heading. Default level is h3.
+   */
+  level?: headingLevel;
+
+  /**
+   * Specify an optional className to be added to your heading.
+   */
+  className?: string;
+
+  /**
+   * Specify an optional color of Heading.
+   */
+  type?: labelTypes;
+}

package/src/components/Heading/Heading.tsx

@@ -0,0 +1,28 @@
+import { FC } from "react";
+import classNames from "classnames";
+import useGlobalSettings from "../../hooks/useGlobalSettings";
+import { HeadingProps } from "./Heading.props";
+
+const Heading: FC<HeadingProps> = ({
+  level = "h3",
+  children,
+  className,
+  type,
+  ...rest
+}) => {
+  const { prefix } = useGlobalSettings();
+  const UseHeading = level;
+  const baseClass = `${prefix}--${level}`;
+  const headingClasses = classNames(className, {
+    [baseClass]: true,
+    [`${baseClass}--${type}`]: type,
+  });
+
+  return (
+    <UseHeading className={headingClasses} {...rest}>
+      {children}
+    </UseHeading>
+  );
+};
+
+export default Heading;

package/src/components/Heading/index.ts

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

package/src/components/Hero/Hero.args.ts

@@ -0,0 +1,296 @@
+import { HeroProps } from "./Hero.props";
+
+const articleCenteredHero: HeroProps = {
+  className: "storybook",
+  image: {
+    alt: "Alt tag",
+    className: "storybook",
+    url: [
+      {
+        breakpoint: 0,
+        src: "https://placekitten.com/1920/800",
+      },
+      {
+        breakpoint: 768,
+        src: "https://placekitten.com/1920/800",
+      },
+    ],
+  },
+  heroCard: {
+    alignment: "center",
+    datecopy: "11 February 2021",
+    eyebrow: "Eyebrow Title",
+    intro:
+      "Brief intro text - ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.",
+    socials: [
+      {
+        label: "Facebook",
+        url: "https://www.facebook.com/",
+        icon: "facebook",
+      },
+    ],
+    title:
+      "This is an centered aligned article headline that is more than two lines long",
+    theme: "light",
+    types: "article",
+  },
+  theme: "light",
+  types: "article",
+};
+
+const articleHero: HeroProps = {
+  className: "storybook",
+  image: {
+    alt: "Alt tag",
+    className: "storybook",
+    url: [
+      {
+        breakpoint: 0,
+        src: "https://placekitten.com/1920/800",
+      },
+      {
+        breakpoint: 768,
+        src: "https://placekitten.com/1920/800",
+      },
+    ],
+  },
+  heroCard: {
+    alignment: "left",
+    datecopy: "11 February 2021",
+    eyebrow: "Eyebrow Title",
+    intro:
+      "Brief intro text - ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.",
+    socials: [
+      {
+        label: "Facebook",
+        url: "https://www.facebook.com/",
+        icon: "facebook",
+      },
+    ],
+    title:
+      "This is an left aligned article headline that is more than two lines long",
+    theme: "light",
+    types: "article",
+  },
+  theme: "light",
+  types: "article",
+};
+
+const articleNoImageHero: HeroProps = {
+  className: "storybook",
+  heroCard: {
+    alignment: "center",
+    datecopy: "11 February 2021",
+    eyebrow: "Eyebrow Title",
+    intro:
+      "Brief intro text - ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.",
+    socials: [
+      {
+        label: "Facebook",
+        url: "https://www.facebook.com/",
+        icon: "facebook",
+      },
+    ],
+    title:
+      "This is an center aligned article headline that is more than two lines long",
+    theme: "light",
+    types: "article",
+  },
+  theme: "light",
+  types: "article",
+};
+
+const homeHero: HeroProps = {
+  className: "storybook",
+  image: {
+    alt: "Alt tag",
+    className: "storybook",
+    url: [
+      {
+        breakpoint: 0,
+        src: "https://placekitten.com/1920/800",
+      },
+      {
+        breakpoint: 768,
+        src: "https://placekitten.com/1920/800",
+      },
+    ],
+  },
+  heroCard: {
+    alignment: "left",
+    eyebrow: "Eyebrow Title",
+    title:
+      "ILO welcomes G7 call to make a just transition to a green economy happen",
+    theme: "dark",
+    types: "home",
+  },
+  theme: "dark",
+  types: "home",
+};
+
+const portalHero: HeroProps = {
+  className: "storybook",
+  image: {
+    alt: "Alt tag",
+    className: "storybook",
+    url: [
+      {
+        breakpoint: 0,
+        src: "https://placekitten.com/1920/800",
+      },
+      {
+        breakpoint: 768,
+        src: "https://placekitten.com/1920/800",
+      },
+    ],
+  },
+  heroCard: {
+    alignment: "left",
+    eyebrow: "Eyebrow Title",
+    socials: [
+      {
+        label: "Facebook",
+        url: "https://www.facebook.com/",
+        icon: "facebook",
+      },
+      {
+        label: "Linkedin",
+        url: "https://www.linkedin.com/",
+        icon: "linkedin",
+      },
+    ],
+    title: "This is a page title",
+    theme: "dark",
+    types: "portal",
+  },
+  theme: "dark",
+  types: "portal",
+};
+
+const projectHero: HeroProps = {
+  className: "storybook",
+  image: {
+    alt: "Alt tag",
+    className: "storybook",
+    url: [
+      {
+        breakpoint: 0,
+        src: "https://placekitten.com/1920/800",
+      },
+      {
+        breakpoint: 768,
+        src: "https://placekitten.com/1920/800",
+      },
+    ],
+  },
+  heroCard: {
+    alignment: "center",
+    eyebrow: "Eyebrow Title",
+    datecopy: "Date | Duration",
+    intro:
+      "Brief intro text - ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.",
+    socials: [
+      {
+        label: "Facebook",
+        url: "https://www.facebook.com/",
+        icon: "facebook",
+      },
+    ],
+    title: "This is a page title",
+    theme: "dark",
+    types: "project",
+  },
+  theme: "dark",
+  types: "project",
+};
+
+const graphicHero: HeroProps = {
+  className: "storybook",
+  image: {
+    alt: "Alt tag",
+    className: "storybook",
+    url: [
+      {
+        breakpoint: 0,
+        src: "https://placekitten.com/1920/800",
+      },
+      {
+        breakpoint: 768,
+        src: "https://placekitten.com/1920/800",
+      },
+    ],
+  },
+  heroCard: {
+    alignment: "center",
+    eyebrow: "Eyebrow Title",
+    datecopy: "Date | Duration",
+    intro:
+      "Brief intro text - ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.",
+    socials: [
+      {
+        label: "Facebook",
+        url: "https://www.facebook.com/",
+        icon: "facebook",
+      },
+    ],
+    title: "This is a centered graphic article headline that is two lines long",
+    theme: "light",
+    types: "graphic",
+  },
+  theme: "light",
+  types: "graphic",
+};
+
+const publicationHero: HeroProps = {
+  className: "storybook",
+  image: {
+    alt: "Alt tag",
+    caption: "This is a caption",
+    className: "storybook",
+    credit: "Credit Here",
+    url: [
+      {
+        breakpoint: 0,
+        src: "https://placekitten.com/1920/800",
+      },
+      {
+        breakpoint: 768,
+        src: "https://placekitten.com/1920/800",
+      },
+    ],
+  },
+  heroCard: {
+    alignment: "left",
+    eyebrow: "Eyebrow Title",
+    datecopy: "Date | Duration",
+    intro:
+      "Brief intro text - ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.",
+    socials: [
+      {
+        label: "Facebook",
+        url: "https://www.facebook.com/",
+        icon: "facebook",
+      },
+    ],
+    title: "This is a page title",
+    theme: "light",
+    types: "publication",
+  },
+  theme: "light",
+  types: "publication",
+};
+/**
+ * Sample prop definitions for Hero's enumerable properties (imported in stories and test)
+ */
+const HeroArgs = {
+  articleHero,
+  articleCenteredHero,
+  articleNoImageHero,
+  homeHero,
+  graphicHero,
+  projectHero,
+  portalHero,
+  publicationHero,
+};
+
+export default HeroArgs;

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

@@ -0,0 +1,29 @@
+import { HeroCard } from "../HeroCard.props";
+import { heroCardAlignment, heroCardTypes, heroCardTheme } from "../../types";
+
+export interface HeroProps {
+  /**
+   * Specify an optional className to be added to your Hero component.
+   */
+  className?: string;
+
+  /**
+   * Props for the image for the hero
+   */
+  image?: Required<ImageProps>;
+
+  /**
+   * Props for the card for the hero
+   */
+  heroCard?: ReactDOM<HeroCardProps>;
+
+  /**
+   * Theme for the card
+   */
+  theme?: heroCardTheme;
+
+  /**
+   * Type of hero for the card
+   */
+  types?: heroCardTypes;
+}

package/src/components/Hero/Hero.tsx

@@ -0,0 +1,35 @@
+import { FC } from "react";
+import classNames from "classnames";
+import useGlobalSettings from "../../hooks/useGlobalSettings";
+import { HeroProps } from "./Hero.props";
+import { HeroCard } from "../Hero";
+import { Image } from "../Image";
+
+const Hero: FC<HeroProps> = ({
+  className,
+  image,
+  heroCard,
+  theme = "light",
+  types,
+}) => {
+  const { prefix } = useGlobalSettings();
+
+  const baseClass = `${prefix}--hero`;
+  const heroClasses = classNames(className, {
+    [baseClass]: true,
+    [`${baseClass}--${theme}`]: theme,
+    [`${baseClass}--${types}`]: types,
+    [`${baseClass}--image`]: image,
+  });
+
+  return (
+    <>
+      <div className={heroClasses}>
+        {image && <Image {...image} />}
+        <HeroCard {...heroCard} />
+      </div>
+    </>
+  );
+};
+
+export default Hero;

package/src/components/Hero/HeroCard.props.d.ts

@@ -0,0 +1,65 @@
+import { heroCardAlignment, heroCardTypes, heroCardTheme } from "../../types";
+
+export interface HeroCardProps {
+  /**
+   * Theme for the card
+   */
+  alignment?: heroCardAlignment;
+
+  /**
+   * Specify an optional className to be added to your Hero component.
+   */
+  className?: string;
+
+  /**
+   * date copy for the hero card
+   */
+  datecopy?: string;
+
+  /**
+   * eyebrow copy for the hero card
+   */
+  eyebrow?: string;
+
+  /**
+   * body copy for the hero card
+   */
+  intro?: string;
+
+  /**
+   * Specify the links to be displayed in this link group
+   */
+  socials?: Required<Array<SocialProps>>;
+
+  /**
+   * Title for the page
+   */
+  title: string;
+
+  /**
+   * Theme for the card
+   */
+  theme?: heroCardTheme;
+
+  /**
+   * Type of hero for the card
+   */
+  types?: heroCardTypes;
+}
+
+interface SocialProps {
+  /**
+   * Specify the label for this link
+   */
+  label?: Required<string>;
+
+  /**
+   * Specify the url for this link
+   */
+  url?: Required<string>;
+
+  /**
+   * Specify the icon for this link
+   */
+  icon?: Required<string>;
+}