@ilo-org/react 0.0.18 → 0.1.1

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

@@ -1,9 +1,9 @@
 import { SearchFieldProps } from "./SearchField.props";
 
 const searchfield: SearchFieldProps = {
-  callback: "",
+  callback: () => {},
   input: {
-    callback: "",
+    callback: () => {},
     disabled: false,
     name: "search",
     placeholder: "Search Field",
@@ -12,9 +12,9 @@ const searchfield: SearchFieldProps = {
 };
 
 const searchfielderror: SearchFieldProps = {
-  callback: "",
+  callback: () => {},
   input: {
-    callback: "",
+    callback: () => {},
     disabled: false,
     error: "Error message",
     name: "search",
@@ -24,9 +24,9 @@ const searchfielderror: SearchFieldProps = {
 };
 
 const searchfielddisabled: SearchFieldProps = {
-  callback: "",
+  callback: () => {},
   input: {
-    callback: "",
+    callback: () => {},
     disabled: true,
     name: "search",
     placeholder: "Search Field",
@@ -35,7 +35,7 @@ const searchfielddisabled: SearchFieldProps = {
 };
 
 const searchfieldlabel: SearchFieldProps = {
-  callback: "",
+  callback: () => {},
   input: {
     label: "Search Field",
     name: "search",
@@ -45,7 +45,7 @@ const searchfieldlabel: SearchFieldProps = {
 };
 
 const searchfieldhelper: SearchFieldProps = {
-  callback: "",
+  callback: () => {},
   input: {
     helper: "Search Field Helper text",
     name: "search",

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

@@ -1,4 +1,4 @@
-import { InputProps } from "../Input.props";
+import { InputProps } from "../Input/Input.props";
 
 export interface ButtonProps {
   /**
@@ -21,7 +21,7 @@ export interface SearchFieldProps {
   /**
    * The search field submit button's click function.
    */
-  callback: function;
+  callback?: (e: React.MouseEvent<HTMLInputElement, MouseEvent>) => any;
 
   /**
    * Specify an optional className to be added to your Button.
@@ -31,5 +31,5 @@ export interface SearchFieldProps {
   /**
    * Specify the properties of the search field input
    */
-  input?: Required<InputProps>;
+  input?: InputProps;
 }

package/src/components/SearchField/SearchField.tsx

@@ -16,39 +16,46 @@ const SearchField: FC<SearchFieldProps> = ({
 
   const SearchFieldClasses = classNames(className, {
     [baseClass]: true,
-    [`haslabel`]: input.label,
+    [`haslabel`]: input?.label,
   });
 
   /**
    * On click, if there is a callback, call it
    */
-  const handleSubmit = (e: React.SyntheticEvent) => {
+  const handleClick: React.MouseEventHandler<HTMLInputElement> = (e) => {
     if (callback) {
       callback(e);
     }
   };
 
-  return (
-    <form
-      className={SearchFieldClasses}
-      action={action}
-      onSubmit={(e) => handleSubmit(e)}
-    >
+  const inputHasType = !!input?.type;
+
+  if (!inputHasType) {
+    throw new Error("SearchField: Input must have type prop");
+  }
+
+  return inputHasType ? (
+    <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}
+        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" />
+      <input
+        className={buttonClass}
+        disabled={input?.disabled}
+        type="submit"
+        onClick={handleClick}
+      />
     </form>
-  );
+  ) : null;
 };
 
 export default SearchField;

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

@@ -1,16 +1,16 @@
 import { ReactNode } from "react";
-import { tagTypes } from "../../types";
+import { TagTypes } from "../../types";
 
 export interface TagProps {
   /**
    * Callback to event;
    */
-  callback?: function;
+  callback?: (e: React.MouseEvent<HTMLButtonElement>) => any;
 
   /**
    * Specify the label for the tag
    */
-  children: ReactNode;
+  children?: ReactNode;
 
   /**
    * The tag's unique id.
@@ -25,7 +25,7 @@ export interface TagProps {
   /**
    * Specify a tag type
    */
-  type?: tagTypes;
+  type?: TagTypes;
 
   /**
    * Specify an optional url to be added to your Tag.

package/src/components/Tag/Tag.tsx

@@ -2,8 +2,9 @@ import { useContext, FC } from "react";
 import classNames from "classnames";
 import useGlobalSettings from "../../hooks/useGlobalSettings";
 import { TagProps } from "./Tag.props";
-import { TagSetContext } from "./TagSet";
 import { Icon } from "../Icon";
+import { getUpdatedItems } from "@ilo-org/utils";
+import { TagSetContext } from "./TagCtx";
 
 const Tag: FC<TagProps> = ({
   className,
@@ -15,7 +16,7 @@ const Tag: FC<TagProps> = ({
   ...rest
 }) => {
   const { prefix } = useGlobalSettings();
-  const { activeItems, setActiveItems, getUpdatedItems, allowMultipleActive } =
+  const { activeItems, setActiveItems, allowMultipleActive } =
     useContext(TagSetContext);
   const active = activeItems.indexOf(id) > -1;
 
@@ -36,7 +37,11 @@ const Tag: FC<TagProps> = ({
    */
   const handleClick = (e: React.MouseEvent<HTMLButtonElement>) => {
     setActiveItems(
-      getUpdatedItems({ id, itemStatuses: activeItems, allowMultipleActive })
+      getUpdatedItems({
+        id,
+        itemStatuses: activeItems,
+        allowMultipleExpanded: allowMultipleActive,
+      })
     );
     visible = false;
     if (callback) {

package/src/components/Tag/TagCtx.ts

@@ -0,0 +1,4 @@
+import { createContext } from "react";
+import { TagSetContextProps } from "./TagSet.props";
+
+export const TagSetContext = createContext({} as TagSetContextProps);

package/src/components/Tag/TagSet.args.ts

@@ -5,7 +5,6 @@ const tag: TagSetProps = {
   onButtonClick: (e) => {
     console.log(e.target);
   },
-  children: "",
   defaultTagActive: ["tag1", "tag2"],
 };
 
@@ -14,7 +13,6 @@ const buttonTag: TagSetProps = {
   onButtonClick: (e) => {
     console.log(e.target);
   },
-  children: "",
   defaultTagActive: [
     "tag1",
     "tag2",

package/src/components/Tag/{TagSet.props.d.ts → TagSet.props.ts}

@@ -1,3 +1,5 @@
+import { Dispatch, ReactElement, SetStateAction } from "react";
+
 export { default as TagSet } from "./TagSet";
 
 export interface TagSetProps {
@@ -9,12 +11,12 @@ export interface TagSetProps {
   /**
    * Callback to onButtonClick event;
    */
-  onButtonClick?: (e: MouseEvent<HTMLButtonElement>, i: any) => void;
+  onButtonClick?: (e: React.MouseEvent<HTMLButtonElement>, i: number) => any;
 
   /**
    * Specify the content of your Tag.
    */
-  children: ReactElement<TagSet> | Array<ReactElement<TagSet>>;
+  children?: ReactElement<TagSetProps> | ReactElement<TagSetProps>[];
 
   /**
    * Specify an optional className to be added to your accordion.
@@ -29,8 +31,7 @@ export interface TagSetProps {
 
 export interface TagSetContextProps {
   activeItems: string[];
-  getUpdatedItems: getUpdatedItems;
   setActiveItems: Dispatch<SetStateAction<string[]>>;
   allowMultipleActive: boolean;
-  onButtonClick?: (e: MouseEvent<HTMLButtonElement>, i: any) => void;
+  onButtonClick?: (e: React.MouseEvent<HTMLButtonElement>, i: number) => void;
 }

package/src/components/Tag/TagSet.tsx

@@ -1,18 +1,9 @@
-import {
-  useState,
-  useEffect,
-  createContext,
-  FC,
-  ReactElement,
-  Children,
-} from "react";
 import classNames from "classnames";
+import { Children, FC, ReactElement, useEffect, useState } from "react";
 import useGlobalSettings from "../../hooks/useGlobalSettings";
-import { TagSetContextProps, TagSetProps } from "./TagSet.props";
-import { getUpdatedItems } from "@ilo-org/utils";
 import { checkArrayDuplicates } from "../../utils/checkArrayDuplicates";
-
-export const TagSetContext = createContext({} as TagSetContextProps);
+import { TagSetContext } from "./TagCtx";
+import { TagSetProps } from "./TagSet.props";
 
 const TagSet: FC<TagSetProps> = ({
   className,
@@ -56,7 +47,6 @@ const TagSet: FC<TagSetProps> = ({
       value={{
         activeItems,
         setActiveItems,
-        getUpdatedItems,
         allowMultipleActive,
         onButtonClick,
       }}

package/src/components/Textarea/Textarea.args.ts

@@ -1,10 +1,7 @@
 import { TextareaProps } from "./Textarea.props";
 
 const basic: TextareaProps = {
-  callback: "",
   disabled: false,
-  error: false,
-  helper: false,
   label: "Textarea",
   name: "textarea",
   placeholder: "Textarea",
@@ -13,9 +10,7 @@ const basic: TextareaProps = {
 };
 
 const hashelper: TextareaProps = {
-  callback: "",
   disabled: false,
-  error: false,
   helper: "This one has helper text",
   label: "Textarea",
   name: "textarea",
@@ -25,10 +20,8 @@ const hashelper: TextareaProps = {
 };
 
 const haserror: TextareaProps = {
-  callback: "",
   disabled: false,
   error: "This one has an error",
-  helper: false,
   label: "Textarea",
   name: "textarea",
   placeholder: "Textarea",
@@ -37,10 +30,7 @@ const haserror: TextareaProps = {
 };
 
 const hastooltip: TextareaProps = {
-  callback: "",
   disabled: false,
-  error: false,
-  helper: false,
   label: "Textarea",
   name: "textarea",
   placeholder: "Textarea",

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

@@ -2,7 +2,7 @@ export interface TextareaProps {
   /**
    * The Textarea's onChange callback.
    */
-  callback: function;
+  callback?: (e: React.ChangeEvent<HTMLTextAreaElement>) => any;
 
   /**
    * Specify an optional className to be added to your Textarea.
@@ -17,12 +17,12 @@ export interface TextareaProps {
   /**
    * Does the Textarea have an error?
    */
-  error?: string | false;
+  error?: string;
 
   /**
    * The Textarea's helper text
    */
-  helper: string | false;
+  helper?: string;
 
   /**
    * The Textarea's id attribute
@@ -68,4 +68,6 @@ export interface TextareaProps {
    * Does this Textarea have a tooltip?
    */
   tooltip?: string;
+
+  type?: never;
 }

package/src/components/Textarea/Textarea.tsx

@@ -38,7 +38,7 @@ const Textarea: FC<TextareaProps> = ({
   };
 
   return (
-    <Fieldset legend={false} fieldsetid={false}>
+    <Fieldset>
       <FormElement
         elemid={name as any}
         label={label}

package/src/components/Tooltip/Tooltip.args.ts

@@ -1,31 +1,27 @@
 import { TooltipProps } from "./Tooltip.props";
 
 const light: TooltipProps = {
-  children: "<button>test<button>",
-  label: "This is a tooltip",
+  label: "This is a light tooltip",
   theme: "light", // "light" | "dark" ;
   isVisible: false,
 };
 
 const lighticon: TooltipProps = {
-  children: "<button>test<button>",
   icon: true,
-  label: "This is a tooltip",
+  label: "This is a light tooltip",
   theme: "light", // "light" | "dark" ;
   isVisible: false,
 };
 
 const dark: TooltipProps = {
-  children: "<button>test<button>",
-  label: "This is a tooltip",
+  label: "This is a dark tooltip",
   theme: "dark", // "light" | "dark" ;
   isVisible: false,
 };
 
 const darkicon: TooltipProps = {
-  children: "<button>test<button>",
   icon: true,
-  label: "This is a tooltip",
+  label: "This is a tooltip for an icon",
   theme: "dark", // "light" | "dark" ;
   isVisible: false,
 };

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

@@ -1,11 +1,6 @@
-import { tooltipAlignment, tooltipPlacement, tooltipThemes } from "../../types";
+import { TooltipThemes } from "../../types";
 
 export interface TooltipProps {
-  /**
-   * Specify the content of your Tooltip.
-   */
-  children?: ReactNode;
-
   /**
    * Specify an optional className to be added to your Tooltip.
    */
@@ -29,17 +24,17 @@ export interface TooltipProps {
   /**
    * Callback fired onMouseOver
    */
-  onMouseOver?: function;
+  onMouseOver?: (e: React.MouseEventHandler<HTMLDivElement>) => any;
 
   /**
    * Callback fired onMouseOut
    */
-  onMouseOut?: function;
+  onMouseOut?: (e: React.MouseEventHandler<HTMLDivElement>) => any;
 
   /**
    * Describe the theme of the tooltip
    */
-  theme?: Required<tooltipThemes>;
+  theme?: Required<TooltipThemes>;
 
   /**
    * Set a width for the tooltip

package/src/components/Tooltip/Tooltip.tsx

@@ -35,11 +35,12 @@ const Tooltip: FC<TooltipProps> = ({
     [`${baseClass}--arrow--placement-${arrowPlacement}`]: arrowPlacement,
   });
 
-  const handleOnMouseOver = (e: any) => {
+  const handleOnMouseOver: React.MouseEventHandler<HTMLDivElement> &
+    React.FocusEventHandler<HTMLDivElement> = (e) => {
     // get hovered element reference
     const target = e.currentTarget;
 
-    if (target != null) {
+    if (target) {
       const rect = target.getBoundingClientRect();
       setIsVisible(true);
       postMouseOver(rect);

package/src/components/Video/Video.args.ts

@@ -1,27 +1,14 @@
 import { VideoProps } from "./Video.props";
 
 const videofile: VideoProps = {
-  alt: "My alt text",
+  alt: "The ILO logo on a blue background",
   className: "image",
-  caption: "my video caption",
-  url: [
-    {
-      breakpoint: 0,
-      src: "https://placekitten.com/g/400/300",
-    },
-    {
-      breakpoint: 800,
-      src: "https://placekitten.com/g/800/600",
-    },
-    {
-      breakpoint: 1200,
-      src: "https://placekitten.com/g/1200/900",
-    },
-    {
-      breakpoint: 1440,
-      src: "https://placekitten.com/g/1600/1200",
-    },
-  ],
+  caption:
+    "The ILO brings together governments, employers and workers to set labour standards and promote decent work.",
+  poster: {
+    url: [{ src: "/media-file-poster.jpg" }],
+    alt: "",
+  },
   video: {
     controls: {
       fullscreen: "Fullscreen",
@@ -29,34 +16,20 @@ const videofile: VideoProps = {
       pause: "Pause",
       volume: "Volume",
     },
-    src: "https://interactive-examples.mdn.mozilla.net/media/cc0-videos/flower.mp4",
-    tracks: null,
+    src: "/video-example.mp4",
     youtube: false,
   },
 };
 
 const videoyt: VideoProps = {
-  alt: "My alt text",
-  caption: "my video caption",
+  alt: "An smiling woman with gray hair holds a bowl full of corn in front of her home.",
+  caption:
+    "Indigenous entrepreneur Celestina Ábalos runs a tourism business in the UNESCO World Heritage site of Quebrada de Humahuaca in northern Argentina. ©ILO/Ivar Velasquez",
   className: "image",
-  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",
-    },
-  ],
+  poster: {
+    url: [{ src: "/youtube-video-poster.avif" }],
+    alt: "",
+  },
   video: {
     controls: {
       fullscreen: "Fullscreen",
@@ -64,8 +37,7 @@ const videoyt: VideoProps = {
       pause: "Pause",
       volume: "Volume",
     },
-    src: "https://youtu.be/ombTwldE3Kw",
-    tracks: null,
+    src: "https://youtu.be/X72_A4_6zjU",
     youtube: true,
   },
 };

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

@@ -1,13 +1,8 @@
-interface ImageUrl {
-  /**
-   * Specify the breakpoint at which this image src should be used
-   */
-  breakpoint?: number;
+import { TracksConfig } from "./VideoPlayer.props";
 
-  /**
-   * Specify the url of this breakpoint's image src
-   */
-  src?: string;
+export interface Poster {
+  url: { src: string }[];
+  alt: string;
 }
 
 interface VideoPlayerControls {
@@ -46,7 +41,7 @@ interface Video {
   /**
    * if there are closed-caption tracks,
    */
-  tracks?: Required<Array<TracksConfig>> | null;
+  tracks?: TracksConfig[];
 
   /**
    * if YouTube, set to true
@@ -58,7 +53,7 @@ export interface VideoProps {
   /**
    * Specify the alt for the image
    */
-  alt?: Required<string>;
+  alt: String;
 
   /**
    * Specify the caption for the image/video
@@ -73,10 +68,10 @@ export interface VideoProps {
   /**
    * Specify the image src for the image
    */
-  url?: Required<ImgageUrl>;
+  poster?: Poster;
 
   /**
    * Specify whether there is a video being shown
    */
-  video?: Required<Video>;
+  video: Video;
 }

package/src/components/Video/Video.tsx

@@ -4,7 +4,7 @@ import useGlobalSettings from "../../hooks/useGlobalSettings";
 import { VideoProps } from "./Video.props";
 import VideoPlayer from "./VideoPlayer";
 
-const Video: FC<VideoProps> = ({ alt, className, caption, url, video }) => {
+const Video: FC<VideoProps> = ({ className, caption, poster, video }) => {
   const { prefix } = useGlobalSettings();
   const baseClass = `${prefix}--video`;
 
@@ -19,7 +19,7 @@ const Video: FC<VideoProps> = ({ alt, className, caption, url, video }) => {
   return (
     <figure className={videoClasses}>
       <div className={`${videoClasses}--wrapper`}>
-        {video && <VideoPlayer {...video} poster={{ url: url, alt: alt }} />}
+        {video && <VideoPlayer {...video} poster={poster} />}
       </div>
       {caption && <figcaption className={captionClasses}>{caption}</figcaption>}
     </figure>

package/src/components/Video/{VideoPlayer.props.d.ts → VideoPlayer.props.ts}

@@ -1,23 +1,25 @@
+import { Poster } from "./Video.props";
+
 export interface VideoPlayerControls {
   /**
    * Specify the label for the fullscreen button
    */
-  fullscreen?: Required<string>;
+  fullscreen: string;
 
   /**
    * Specify the label for the  play button
    */
-  play?: Required<string>;
+  play: string;
 
   /**
    * Specify the label for the pause button
    */
-  pause?: Required<string>;
+  pause: string;
 
   /**
    * Specify the label for the volume button
    */
-  volume?: Required<string>;
+  volume: string;
 }
 
 export interface TracksConfig {
@@ -61,7 +63,7 @@ export interface VideoPlayerProps {
   /**
    *  poster image for video
    */
-  poster?: Required<Array>;
+  poster?: Poster;
 
   /**
    * if self-hosted, specify the url of this video

package/src/components/Video/VideoPlayer.tsx

@@ -188,7 +188,7 @@ const VideoPlayer: FC<VideoPlayerProps> = ({
         onEnded={handleEnded}
       />
       <picture className={`${baseClass}--poster ${showposter ? "show" : ""}`}>
-        {poster.url &&
+        {poster?.url &&
           poster.url
             .sort(
               (a: any, b: any) =>
@@ -203,7 +203,7 @@ const VideoPlayer: FC<VideoPlayerProps> = ({
                 key={index}
               />
             ))}
-        <img src={poster.url[0].src} alt={poster.alt} />
+        <img src={poster?.url[0]?.src} alt={poster?.alt} />
       </picture>
       <div className={`${controlsClasses} ${showposter ? "notplayed" : ""}`}>
         <label