@ilo-org/react 0.0.18 → 0.1.1

package/src/components/Form/Form.props.ts

@@ -0,0 +1,137 @@
+import { CheckboxProps } from "../Checkbox/Checkbox.props";
+import { DatePickerProps } from "../DatePicker/DatePicker.props";
+import { DropdownProps } from "../Dropdown/Dropdown.props";
+import { FileUploadProps } from "../FileUpload/FileUpload.props";
+import { NumberPickerProps } from "../NumberPicker/NumberPicker.props";
+import { RadioProps } from "../Radio/Radio.props";
+import { TextareaProps } from "../Textarea/Textarea.props";
+import { InputProps } from "../Input/Input.props";
+import { FormGroupProps } from "../FormGroup/FormGroup.props";
+
+export interface InputItem {
+  type: "input";
+  field: InputProps;
+  choicegroupid?: never;
+  legend?: never;
+  grouptooltip?: never;
+  grouperror?: never;
+  grouphelper?: never;
+}
+
+export interface DropdownItem {
+  type: "dropdown";
+  field: DropdownProps;
+  choicegroupid?: never;
+  legend?: never;
+  grouptooltip?: never;
+  grouperror?: never;
+  grouphelper?: never;
+}
+
+export interface CheckboxItem {
+  type: "checkbox";
+  field: CheckboxProps | CheckboxProps[];
+  choicegroupid: string;
+  legend?: string;
+  grouptooltip?: string;
+  grouperror?: string;
+  grouphelper?: string;
+}
+
+export interface RadioItem {
+  type: "radio";
+  field: RadioProps | RadioProps[];
+  choicegroupid: string;
+  legend?: string;
+  grouptooltip?: string;
+  grouperror?: string;
+  grouphelper?: string;
+}
+
+export interface FileUploadItem {
+  type: "file";
+  field: FileUploadProps;
+  choicegroupid?: never;
+  legend?: never;
+  grouptooltip?: never;
+  grouperror?: never;
+  grouphelper?: never;
+}
+
+export interface NumberPickerItem {
+  type: "number";
+  field: NumberPickerProps;
+  choicegroupid?: never;
+  legend?: never;
+  grouptooltip?: never;
+  grouperror?: never;
+  grouphelper?: never;
+}
+
+export interface DatePickerItem {
+  type: "date";
+  field: DatePickerProps;
+  choicegroupid?: never;
+  legend?: never;
+  grouptooltip?: never;
+  grouperror?: never;
+  grouphelper?: never;
+}
+
+export interface TextareaItem {
+  type: "textarea";
+  field: TextareaProps;
+  choicegroupid?: never;
+  legend?: never;
+  grouptooltip?: never;
+  grouperror?: never;
+  grouphelper?: never;
+}
+
+export interface FormGroupItem {
+  type: "formgroup";
+  field: FormGroupProps;
+  choicegroupid?: string;
+  legend?: string;
+  grouptooltip?: string;
+  grouperror?: string;
+  grouphelper?: string;
+}
+
+type FormItem =
+  | InputItem
+  | DropdownItem
+  | CheckboxItem
+  | RadioItem
+  | FileUploadItem
+  | NumberPickerItem
+  | DatePickerItem
+  | TextareaItem
+  | FormGroupItem;
+
+export interface FormProps {
+  /**
+   * The form's action attribute
+   */
+  action: Required<string>;
+
+  /**
+   * Specify an optional className to be added to your Form component.
+   */
+  className?: string;
+
+  /**
+   * The ID of the form
+   */
+  formid: Required<string>;
+
+  /**
+   * The inputs in this form group
+   */
+  items: FormItem[];
+
+  /**
+   * The label for the form's submit button
+   */
+  submitlabel: string;
+}

package/src/components/FormElement/{FormElement.props.d.ts → FormElement.props.ts}

@@ -1,10 +1,17 @@
-import { inputTypes, fieldTypes } from "../../types";
+import { ReactElement } from "react";
+import { InputTypes, FieldTypes } from "../../types";
+import { DropdownProps } from "../Dropdown/Dropdown.props";
+import { InputProps } from "../Input/Input.props";
+import { TextareaProps } from "../Textarea/Textarea.props";
 
 export interface FormElementProps {
   /**
    * Specify the content of your FormElement.
    */
-  children: ReactElement<Input> | ReactElement<Select> | ReactElement<Textarea>;
+  children:
+    | ReactElement<InputProps>
+    | ReactElement<DropdownProps>
+    | ReactElement<TextareaProps>;
 
   /**
    * Specify an optional className to be added to your FormElement component.
@@ -29,12 +36,12 @@ export interface FormElementProps {
   /**
    * The ID of the form element
    */
-  elemid: Required<string>;
+  elemid: string;
 
   /**
    * The fieldset's label
    */
-  label: Required<string>;
+  label?: string;
 
   /**
    * Is this element required?
@@ -49,5 +56,5 @@ export interface FormElementProps {
   /**
    * The type of field
    */
-  type?: inputTypes | fieldTypes;
+  type?: InputTypes | FieldTypes;
 }

package/src/components/FormElement/FormElement.tsx

@@ -1,24 +1,17 @@
 import { FC } from "react";
 import { FormElementProps } from "./FormElement.props";
 
+// TODO: What is the point of this component?
 const FormElement: FC<FormElementProps> = ({
   children,
-  // @ts-ignore
-  className,
-  // @ts-ignore
-  error,
-  // @ts-ignore
-  elemid,
-  // @ts-ignore
-  helper,
-  // @ts-ignore
-  label,
-  // @ts-ignore
-  required,
-  // @ts-ignore
-  tooltip,
-  // @ts-ignore
-  type,
+  // className,
+  // error,
+  // elemid,
+  // helper,
+  // label,
+  // required,
+  // tooltip,
+  // type,
 }) => {
   return <>{children}</>;
 };

package/src/components/FormGroup/FormGroup.args.ts

@@ -38,8 +38,9 @@ const basic: FormGroupProps = {
       type: "dropdown",
     },
     {
-      field: { ...CheckboxArgs.basic },
+      field: CheckboxArgs.basic,
       type: "checkbox",
+      choicegroupid: "id",
     },
     {
       choicegroupid: "multiplecheckboxes",

package/src/components/FormGroup/FormGroup.props.ts

@@ -0,0 +1,102 @@
+import { FormGroupTypes } from "../../types";
+import { CheckboxProps } from "../Checkbox/Checkbox.props";
+import { DatePickerProps } from "../DatePicker/DatePicker.props";
+import { DropdownProps } from "../Dropdown/Dropdown.props";
+import { FileUploadProps } from "../FileUpload/FileUpload.props";
+import { InputProps } from "../Input/Input.props";
+import { NumberPickerProps } from "../NumberPicker/NumberPicker.props";
+import { RadioProps } from "../Radio/Radio.props";
+import { TextareaProps } from "../Textarea/Textarea.props";
+
+export interface InputItem {
+  type: "input";
+  field: InputProps;
+  choicegroupid?: never;
+  legend?: never;
+}
+
+export interface DropdownItem {
+  type: "dropdown";
+  field: DropdownProps;
+  choicegroupid?: never;
+  legend?: never;
+}
+
+export interface CheckboxItem {
+  type: "checkbox";
+  field: CheckboxProps | CheckboxProps[];
+  choicegroupid: string;
+  legend?: string;
+}
+
+export interface RadioItem {
+  type: "radio";
+  field: RadioProps | RadioProps[];
+  choicegroupid: string;
+  legend?: string;
+}
+
+export interface FileUploadItem {
+  type: "file";
+  field: FileUploadProps;
+  choicegroupid?: never;
+  legend?: never;
+}
+
+export interface NumberPickerItem {
+  type: "number";
+  field: NumberPickerProps;
+  choicegroupid?: never;
+  legend?: never;
+}
+
+export interface DatePickerItem {
+  type: "date";
+  field: DatePickerProps;
+  choicegroupid?: never;
+  legend?: never;
+}
+
+export interface TextareaItem {
+  type: "textarea";
+  field: TextareaProps;
+  choicegroupid?: never;
+  legend?: never;
+}
+
+type FormGroupItem =
+  | InputItem
+  | DropdownItem
+  | CheckboxItem
+  | RadioItem
+  | FileUploadItem
+  | NumberPickerItem
+  | DatePickerItem
+  | TextareaItem;
+
+export interface FormGroupProps {
+  /**
+   * Specify an optional className to be added to your FormGroup component.
+   */
+  className?: string;
+
+  /**
+   * The ID of the FormGroup
+   */
+  formgroupid: string | boolean;
+
+  /**
+   * The inputs in this form group
+   */
+  items: FormGroupItem[];
+
+  /**
+   * The FormGroups's legend
+   */
+  legend: string | false;
+
+  /**
+   * This Form Groups's type
+   */
+  type: FormGroupTypes;
+}

package/src/components/GlobalProvider/GlobalCtx.ts

@@ -0,0 +1,6 @@
+import { createContext } from "react";
+import { GlobalProviderContextProps } from "./GlobalProvider.props";
+
+export const GlobalProviderContext = createContext({
+  prefix: "ilo",
+} as GlobalProviderContextProps);

package/src/components/GlobalProvider/{GlobalProvider.props.d.ts → GlobalProvider.props.ts}

@@ -4,7 +4,7 @@ export interface GlobalProviderContextProps {
   /**
    * Prefix classname to use across the components.
    */
-  prefix: string;
+  prefix?: string;
 }
 
 export interface GlobalProviderProps extends GlobalProviderContextProps {

package/src/components/GlobalProvider/GlobalProvider.tsx

@@ -1,13 +1,7 @@
-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
-);
+import { FC } from "react";
+import { GlobalProviderContext } from "./GlobalCtx";
+import { GlobalProviderProps } from "./GlobalProvider.props";
 
 const GlobalProvider: FC<GlobalProviderProps> = ({
   prefix = themeprefix.value,

package/src/components/GlobalProvider/index.ts

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

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

@@ -1,33 +1,36 @@
 import { HeadingProps } from "./Heading.props";
 
+const text =
+  "The ILO brings together governments, employers and workers to set labour standards and promote decent work";
+
 const heading1: HeadingProps = {
-  children: "Heading 1",
+  children: text,
   level: "h1",
   type: "actionable",
 };
 
 const heading2: HeadingProps = {
-  children: "Heading 2",
+  children: text,
   level: "h2",
 };
 
 const heading3: HeadingProps = {
-  children: "Heading 3",
+  children: text,
   level: "h3",
 };
 
 const heading4: HeadingProps = {
-  children: "Heading 4",
+  children: text,
   level: "h4",
 };
 
 const heading5: HeadingProps = {
-  children: "Heading 5",
+  children: text,
   level: "h5",
 };
 
 const heading6: HeadingProps = {
-  children: "Heading 6",
+  children: text,
   level: "h6",
 };
 

package/src/components/Heading/{Heading.props.d.ts → Heading.props.ts}

@@ -1,5 +1,5 @@
 import { ReactNode } from "react";
-import { headingLevel, labelTypes } from "../../types";
+import { HeadingLevel, LabelTypes } from "../../types";
 
 export interface HeadingProps {
   /**
@@ -10,7 +10,7 @@ export interface HeadingProps {
   /**
    * Specify the heading level the heading. Default level is h3.
    */
-  level?: headingLevel;
+  level?: HeadingLevel;
 
   /**
    * Specify an optional className to be added to your heading.
@@ -20,5 +20,5 @@ export interface HeadingProps {
   /**
    * Specify an optional color of Heading.
    */
-  type?: labelTypes;
+  type?: LabelTypes;
 }

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

@@ -8,11 +8,11 @@ const articleCenteredHero: HeroProps = {
     url: [
       {
         breakpoint: 0,
-        src: "https://placekitten.com/1920/800",
+        src: "/hero.jpg",
       },
       {
         breakpoint: 768,
-        src: "https://placekitten.com/1920/800",
+        src: "/hero.jpg",
       },
     ],
   },
@@ -46,11 +46,11 @@ const articleHero: HeroProps = {
     url: [
       {
         breakpoint: 0,
-        src: "https://placekitten.com/1920/800",
+        src: "/hero.jpg",
       },
       {
         breakpoint: 768,
-        src: "https://placekitten.com/1920/800",
+        src: "/hero.jpg",
       },
     ],
   },
@@ -108,11 +108,11 @@ const homeHero: HeroProps = {
     url: [
       {
         breakpoint: 0,
-        src: "https://placekitten.com/1920/800",
+        src: "/hero.jpg",
       },
       {
         breakpoint: 768,
-        src: "https://placekitten.com/1920/800",
+        src: "/hero.jpg",
       },
     ],
   },
@@ -136,11 +136,11 @@ const portalHero: HeroProps = {
     url: [
       {
         breakpoint: 0,
-        src: "https://placekitten.com/1920/800",
+        src: "/hero.jpg",
       },
       {
         breakpoint: 768,
-        src: "https://placekitten.com/1920/800",
+        src: "/hero.jpg",
       },
     ],
   },
@@ -175,11 +175,11 @@ const projectHero: HeroProps = {
     url: [
       {
         breakpoint: 0,
-        src: "https://placekitten.com/1920/800",
+        src: "/hero.jpg",
       },
       {
         breakpoint: 768,
-        src: "https://placekitten.com/1920/800",
+        src: "/hero.jpg",
       },
     ],
   },
@@ -212,11 +212,11 @@ const graphicHero: HeroProps = {
     url: [
       {
         breakpoint: 0,
-        src: "https://placekitten.com/1920/800",
+        src: "/hero.jpg",
       },
       {
         breakpoint: 768,
-        src: "https://placekitten.com/1920/800",
+        src: "/hero.jpg",
       },
     ],
   },
@@ -249,11 +249,11 @@ const publicationHero: HeroProps = {
     url: [
       {
         breakpoint: 0,
-        src: "https://placekitten.com/1920/800",
+        src: "/hero.jpg",
       },
       {
         breakpoint: 768,
-        src: "https://placekitten.com/1920/800",
+        src: "/hero.jpg",
       },
     ],
   },

package/src/components/Hero/{Hero.props.d.ts → Hero.props.ts}

@@ -1,5 +1,6 @@
-import { HeroCard } from "../HeroCard.props";
-import { heroCardAlignment, heroCardTypes, heroCardTheme } from "../../types";
+import { HeroCardTheme, HeroCardTypes } from "../../types";
+import { ImageProps } from "../Image/Image.props";
+import { HeroCardProps } from "./HeroCard.props";
 
 export interface HeroProps {
   /**
@@ -10,20 +11,20 @@ export interface HeroProps {
   /**
    * Props for the image for the hero
    */
-  image?: Required<ImageProps>;
+  image?: ImageProps;
 
   /**
    * Props for the card for the hero
    */
-  heroCard?: ReactDOM<HeroCardProps>;
+  heroCard?: HeroCardProps;
 
   /**
    * Theme for the card
    */
-  theme?: heroCardTheme;
+  theme?: HeroCardTheme;
 
   /**
    * Type of hero for the card
    */
-  types?: heroCardTypes;
+  types?: HeroCardTypes;
 }

package/src/components/Hero/Hero.tsx

@@ -2,7 +2,7 @@ import { FC } from "react";
 import classNames from "classnames";
 import useGlobalSettings from "../../hooks/useGlobalSettings";
 import { HeroProps } from "./Hero.props";
-import { HeroCard } from "../Hero";
+import HeroCard from "./HeroCard";
 import { Image } from "../Image";
 
 const Hero: FC<HeroProps> = ({

package/src/components/Hero/{HeroCard.props.d.ts → HeroCard.props.ts}

@@ -1,10 +1,10 @@
-import { heroCardAlignment, heroCardTypes, heroCardTheme } from "../../types";
+import { HeroCardAlignment, HeroCardTypes, HeroCardTheme } from "../../types";
 
 export interface HeroCardProps {
   /**
    * Theme for the card
    */
-  alignment?: heroCardAlignment;
+  alignment?: HeroCardAlignment;
 
   /**
    * Specify an optional className to be added to your Hero component.
@@ -29,22 +29,22 @@ export interface HeroCardProps {
   /**
    * Specify the links to be displayed in this link group
    */
-  socials?: Required<Array<SocialProps>>;
+  socials?: SocialProps[];
 
   /**
    * Title for the page
    */
-  title: string;
+  title?: string;
 
   /**
    * Theme for the card
    */
-  theme?: heroCardTheme;
+  theme?: HeroCardTheme;
 
   /**
    * Type of hero for the card
    */
-  types?: heroCardTypes;
+  types?: HeroCardTypes;
 }
 
 interface SocialProps {

package/src/components/Icon/{Icon.props.d.ts → Icon.props.ts}

@@ -12,5 +12,5 @@ export interface IconProps {
   /**
    * Specify the icon's size
    */
-  size?: integer;
+  size?: number;
 }

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

@@ -1,35 +1,29 @@
 import { ImageProps } from "./Image.props";
 
-const image: ImageProps = {
-  alt: "My alt text",
+const imageArgs: ImageProps = {
+  alt: "Two women wearing yellow hard hats and neon safety jackets look directly at the viewer",
   className: "image",
-  caption: "my image caption",
-  credit: "Photo: copyright 2022 Person S. Name",
+  caption:
+    "Women construction workers in Nepal build roads and bridges as part of a National Rural Transport Programme co-sponsored by the ILO.",
+  credit: "© Marcel Crozet/ILO",
   url: [
     {
       breakpoint: 0,
-      src: "https://placekitten.com/400/300",
+      src: "/small.jpg",
     },
     {
       breakpoint: 800,
-      src: "https://placekitten.com/800/600",
+      src: "/medium.jpg",
     },
     {
       breakpoint: 1200,
-      src: "https://placekitten.com/1200/900",
+      src: "/medium.jpg",
     },
     {
       breakpoint: 1440,
-      src: "https://placekitten.com/1600/1200",
+      src: "/large.jpg",
     },
   ],
 };
 
-/**
- * Sample prop definitions for Image's enumerable properties (imported in stories and tests).
- */
-const imageArgs = {
-  image,
-};
-
 export default imageArgs;