@ilo-org/react 0.10.5 → 0.11.0

package/lib/types/react/src/components/Tabs/Tabs.args.d.ts

@@ -0,0 +1,10 @@
+import { TabsProps } from "./Tabs.props";
+/**
+ * Sample prop definitions for Button's enumerable properties (imported in stories and tests).
+ */
+declare const TabsArgs: {
+    tabs: TabsProps;
+    withIcon: TabsProps;
+    fiveItems: TabsProps;
+};
+export default TabsArgs;

package/lib/types/react/src/components/Tabs/Tabs.d.ts

@@ -0,0 +1,4 @@
+import { FC } from "react";
+import { TabsProps } from "./Tabs.props";
+declare const Tabs: FC<TabsProps>;
+export default Tabs;

package/lib/types/react/src/components/Tabs/Tabs.props.d.ts

@@ -0,0 +1,12 @@
+import { IconProps } from "../Icon/Icon.props";
+export interface TabsProps {
+    /**
+     * Specify the items inside a tab
+     */
+    items: Required<Array<TabItem>>;
+}
+export interface TabItem {
+    icon?: IconProps;
+    label: Required<string>;
+    content: Required<any>;
+}

package/lib/types/react/src/components/Tabs/index.d.ts

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

package/lib/types/react/src/components/Video/Video.d.ts

@@ -1,4 +1,4 @@
-import { FC } from "react";
 import { VideoProps } from "./Video.props";
-declare const Video: FC<VideoProps>;
+import { VideoPlayerRef } from "./VideoPlayer.props";
+declare const Video: import("react").ForwardRefExoticComponent<VideoProps & import("react").RefAttributes<VideoPlayerRef>>;
 export default Video;

package/lib/types/react/src/components/Video/Video.props.d.ts

@@ -1,51 +1,18 @@
-import { TracksConfig } from "./VideoPlayer.props";
+import { VideoPlayerControls } from "./VideoPlayer.props";
 export interface Poster {
-    url: {
-        src: string;
-    }[];
+    src: string;
     alt: string;
 }
-interface VideoPlayerControls {
-    /**
-     * Specify the label for the fullscreen button
-     */
-    fullscreen?: Required<string>;
-    /**
-     * Specify the label for the  play button
-     */
-    play?: Required<string>;
-    /**
-     * Specify the label for the pause button
-     */
-    pause?: Required<string>;
-    /**
-     * Specify the label for the volume button
-     */
-    volume?: Required<string>;
-}
-interface Video {
+export interface VideoProps {
+    src: string;
     /**
      * Specify the strings to be used as labels for the video controls
      */
-    controls?: Required<VideoPlayerControls | false>;
-    /**
-     * if self-hosted, specify the url of this video
-     */
-    src?: string | null;
-    /**
-     * if there are closed-caption tracks,
-     */
-    tracks?: TracksConfig[];
+    controls?: VideoPlayerControls;
     /**
      * if YouTube, set to true
      */
     youtube?: boolean;
-}
-export interface VideoProps {
-    /**
-     * Specify the alt for the image
-     */
-    alt: string;
     /**
      * Specify the caption for the image/video
      */
@@ -58,9 +25,4 @@ export interface VideoProps {
      * Specify the image src for the image
      */
     poster?: Poster;
-    /**
-     * Specify whether there is a video being shown
-     */
-    video: Video;
 }
-export {};

package/lib/types/react/src/components/Video/VideoPlayer.d.ts

@@ -1,4 +1,4 @@
-import { FC } from "react";
-import { VideoPlayerProps } from "./VideoPlayer.props";
-declare const VideoPlayer: FC<VideoPlayerProps>;
+import "videojs-youtube";
+import { VideoPlayerProps, VideoPlayerRef } from "./VideoPlayer.props";
+declare const VideoPlayer: import("react").ForwardRefExoticComponent<VideoPlayerProps & import("react").RefAttributes<VideoPlayerRef>>;
 export default VideoPlayer;

package/lib/types/react/src/components/Video/VideoPlayer.props.d.ts

@@ -1,4 +1,8 @@
 import { Poster } from "./Video.props";
+import videojs from "video.js";
+export interface VideoPlayerRef {
+    player: videojs.Player | undefined;
+}
 export interface VideoPlayerControls {
     /**
      * Specify the label for the fullscreen button
@@ -17,25 +21,8 @@ export interface VideoPlayerControls {
      */
     volume: string;
 }
-export interface TracksConfig {
-    /**
-     * is this the default track?
-     */
-    default?: boolean;
-    /**
-     * What kind of track is it?
-     */
-    kind?: string;
-    /**
-     * url for the track
-     */
-    src?: string;
-    /**
-     * language of the track
-     */
-    srcLang?: string;
-}
 export interface VideoPlayerProps {
+    src: string;
     /**
      * Specify an optional className to be added to your Media.
      */
@@ -43,23 +30,11 @@ export interface VideoPlayerProps {
     /**
      * Specify the strings to be used as labels for the video controls
      */
-    controls?: Required<VideoPlayerControls | false>;
-    /**
-     * Specify whether a video is to be shown
-     */
-    hasvideo?: Required<boolean>;
+    controls?: VideoPlayerControls;
     /**
      *  poster image for video
      */
     poster?: Poster;
-    /**
-     * if self-hosted, specify the url of this video
-     */
-    src?: string | null;
-    /**
-     * if there are closed-caption tracks,
-     */
-    tracks?: Required<Array<TracksConfig>> | null;
     /**
      * if YouTube, set to true
      */

package/lib/types/react/src/components/index.d.ts

@@ -38,3 +38,4 @@ export { LocalNav } from "./LocalNav";
 export { Navigation } from "./Navigation";
 export { Card, CardGroup } from "./Card";
 export { Breadcrumb } from "./Breadcrumb";
+export { Tabs } from "./Tabs";

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ilo-org/react",
-  "version": "0.10.5",
+  "version": "0.11.0",
   "description": "React components for the ILO's Design System",
   "keywords": [
     "ui_patterns",
@@ -72,13 +72,14 @@
     "classnames": "^2.3.1",
     "dom-helpers": "^5.2.1",
     "nanoid": "^3.3.6",
-    "react-player": "2.10.1",
     "react-transition-group": "^4.4.1",
+    "video.js": "^7.21.2",
+    "videojs-youtube": "^3.0.1",
     "@ilo-org/brand-assets": "0.4.0",
     "@ilo-org/fonts": "0.1.2",
     "@ilo-org/icons-react": "0.0.21",
-    "@ilo-org/styles": "0.13.3",
-    "@ilo-org/themes": "0.7.1",
+    "@ilo-org/styles": "0.14.1",
+    "@ilo-org/themes": "0.7.2",
     "@ilo-org/utils": "0.0.11"
   },
   "devDependencies": {
@@ -107,6 +108,7 @@
     "@types/node": "^17.0.45",
     "@types/react": "^17.0.11",
     "@types/react-dom": "^17.0.20",
+    "@types/video.js": "7",
     "http-server": "^14.1.0",
     "identity-obj-proxy": "^3.0.0",
     "jest-environment-jsdom": "27.5.1",

package/src/components/Input/Input.props.ts

@@ -60,4 +60,6 @@ export interface InputProps {
    * The input's type.
    */
   type: TextInputTypes;
+
+  value: string;
 }

package/src/components/Input/Input.tsx

@@ -16,6 +16,7 @@ const Input: FC<InputProps> = ({
   placeholder,
   required,
   tooltip,
+  value,
   type = "text",
 }) => {
   const { prefix } = useGlobalSettings();
@@ -53,6 +54,7 @@ const Input: FC<InputProps> = ({
           placeholder={placeholder}
           required={required as any}
           type={type}
+          value={value}
           className={InputClasses}
         />
       </FormElement>

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

@@ -8,6 +8,7 @@ const searchfield: SearchFieldProps = {
     name: "search",
     placeholder: "Search Field",
     type: "search",
+    value: "",
   },
 };
 
@@ -20,6 +21,7 @@ const searchfielderror: SearchFieldProps = {
     name: "search",
     placeholder: "Search Field",
     type: "search",
+    value: "",
   },
 };
 
@@ -31,6 +33,7 @@ const searchfielddisabled: SearchFieldProps = {
     name: "search",
     placeholder: "Search Field",
     type: "search",
+    value: "",
   },
 };
 
@@ -41,6 +44,7 @@ const searchfieldlabel: SearchFieldProps = {
     name: "search",
     placeholder: "Search Field",
     type: "search",
+    value: "",
   },
 };
 
@@ -51,6 +55,7 @@ const searchfieldhelper: SearchFieldProps = {
     name: "search",
     placeholder: "Search Field",
     type: "search",
+    value: "",
   },
 };
 

package/src/components/SearchField/SearchField.tsx

@@ -1,8 +1,9 @@
-import { FC } from "react";
+import { FC, useState } from "react";
 import classNames from "classnames";
 import useGlobalSettings from "../../hooks/useGlobalSettings";
 import { SearchFieldProps } from "./SearchField.props";
 import { Input } from "../Input";
+import { Icon } from "../Icon";
 
 const SearchField: FC<SearchFieldProps> = ({
   action,
@@ -10,24 +11,39 @@ const SearchField: FC<SearchFieldProps> = ({
   className,
   input,
 }) => {
+  const [searchValue, setSearchValue] = useState("");
+
   const { prefix } = useGlobalSettings();
   const baseClass = `${prefix}--searchfield`;
   const buttonClass = `${baseClass}--button`;
+  const clearButtonClass = `${baseClass}--clear-button ${
+    searchValue.trim() !== "" && "show"
+  }`;
+  const fieldSetClass = `${prefix}--fieldset`;
 
   const SearchFieldClasses = classNames(className, {
     [baseClass]: true,
     [`haslabel`]: input?.label,
   });
 
-  /**
-   * On click, if there is a callback, call it
-   */
   const handleClick: React.MouseEventHandler<HTMLInputElement> = (e) => {
     if (callback) {
       callback(e);
     }
   };
 
+  // handle click for clear button in search
+  const handleClearButtonClick: React.MouseEventHandler<
+    HTMLInputElement
+  > = () => {
+    setSearchValue("");
+  };
+
+  // Update search value on input
+  const onKeyPress: React.ChangeEventHandler<HTMLInputElement> = (e) => {
+    setSearchValue(e.target.value);
+  };
+
   const inputHasType = !!input?.type;
 
   if (!inputHasType) {
@@ -36,18 +52,24 @@ const SearchField: FC<SearchFieldProps> = ({
 
   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}
-        className={`${prefix}--input`}
-      />
+      <div className={fieldSetClass}>
+        <Input
+          id={input?.id}
+          name={input?.name}
+          disabled={input?.disabled}
+          callback={onKeyPress}
+          error={input?.error}
+          helper={input?.helper}
+          label={input?.label}
+          placeholder={input?.placeholder}
+          type={input?.type}
+          value={searchValue}
+          className={`${prefix}--input`}
+        />
+        <span onClick={handleClearButtonClick} className={clearButtonClass}>
+          <Icon name="close" hidden={true} />
+        </span>
+      </div>
       <input
         className={buttonClass}
         disabled={input?.disabled}

package/src/components/Tabs/Tabs.args.tsx

@@ -0,0 +1,201 @@
+import { RichText } from "../RichText";
+import { Image } from "../Image";
+import { TabsProps } from "./Tabs.props";
+
+const tabs: TabsProps = {
+  items: [
+    {
+      label:
+        "Tab Label With A Really Really Lenghty Title Even Though We Do Not Recommend Such A Lengthy Title",
+      content: (
+        <Image
+          alt="My alt text"
+          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: "/small.jpg" },
+            { breakpoint: 800, src: "/medium.jpg" },
+            { breakpoint: 1200, src: "/large.jpg" },
+            { breakpoint: 1440, src: "/large.jpg" },
+          ]}
+        />
+      ),
+    },
+    {
+      label: "Tab Label 2",
+      content: (
+        <RichText content="<h2>International Labour Organization</h2> <p>The <b>International Labour Organization</b> (<b>ILO</b>) is a <a href='https://www.un.org'>United Nations</a> agency whose mandate is to advance social and economic justice by setting international labour standards. Founded in October 1919 under the League of Nations, it is the first and oldest specialised agency of the UN. The ILO has 187 member states: 186 out of 193 UN member states plus the Cook Islands.</p> <p>Whereas also the failure of any nation to adopt humane conditions of labour is an obstacle in the way of other nations which desire to improve the conditions in their own countries.</p> <figure><img alt='placeholder image' class='right' src='/ilo-headquarters.jpg'><figcaption>The ILO's headquarters in Geneva, Switzerland. ©Steiner SA</figcaption></figure> <h3>ILO Constitution</h3> <p>The driving forces for the ILO's creation arose from security, humanitarian, political and economic considerations.</p> <blockquote> <p>The fundamental ideas that forged the ILO one hundred and three years ago still underpin the global pledge to leave no one behind.</p> <cite>ILO Director-General Gilbert F. Houngbo</cite> </blockquote> Reflecting these ideas, the Preamble of the ILO Constitution states:</p> <ol> <li>Whereas universal and lasting peace can be established only if it is based upon social justice;</li> <li>And whereas conditions of labour exist involving such injustice, hardship and privation to large numbers of people as to produce unrest so great that the peace and harmony of the world are imperilled; and an improvement of those conditions is urgently required;</li> <li>Whereas also the failure of any nation to adopt humane conditions of labour is an obstacle in the way of other nations which desire to improve the conditions in their own countries.</li> </ol>" />
+      ),
+    },
+  ],
+};
+
+const withIcon: TabsProps = {
+  items: [
+    {
+      icon: {
+        hidden: false,
+        name: "info",
+      },
+      label:
+        "Tab Label With A Really Really Lenghty Title Even Though We Do Not Recommend Such A Lengthy Title",
+      content: (
+        <Image
+          alt="My alt text"
+          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: "/small.jpg" },
+            { breakpoint: 800, src: "/medium.jpg" },
+            { breakpoint: 1200, src: "/large.jpg" },
+            { breakpoint: 1440, src: "/large.jpg" },
+          ]}
+        />
+      ),
+    },
+    {
+      icon: {
+        hidden: false,
+        name: "info",
+      },
+      label: "Tab Label 2",
+      content: (
+        <RichText content="<h2>International Labour Organization</h2> <p>The <b>International Labour Organization</b> (<b>ILO</b>) is a <a href='https://www.un.org'>United Nations</a> agency whose mandate is to advance social and economic justice by setting international labour standards. Founded in October 1919 under the League of Nations, it is the first and oldest specialised agency of the UN. The ILO has 187 member states: 186 out of 193 UN member states plus the Cook Islands.</p> <p>Whereas also the failure of any nation to adopt humane conditions of labour is an obstacle in the way of other nations which desire to improve the conditions in their own countries.</p> <figure><img alt='placeholder image' class='right' src='/ilo-headquarters.jpg'><figcaption>The ILO's headquarters in Geneva, Switzerland. ©Steiner SA</figcaption></figure> <h3>ILO Constitution</h3> <p>The driving forces for the ILO's creation arose from security, humanitarian, political and economic considerations.</p> <blockquote> <p>The fundamental ideas that forged the ILO one hundred and three years ago still underpin the global pledge to leave no one behind.</p> <cite>ILO Director-General Gilbert F. Houngbo</cite> </blockquote> Reflecting these ideas, the Preamble of the ILO Constitution states:</p> <ol> <li>Whereas universal and lasting peace can be established only if it is based upon social justice;</li> <li>And whereas conditions of labour exist involving such injustice, hardship and privation to large numbers of people as to produce unrest so great that the peace and harmony of the world are imperilled; and an improvement of those conditions is urgently required;</li> <li>Whereas also the failure of any nation to adopt humane conditions of labour is an obstacle in the way of other nations which desire to improve the conditions in their own countries.</li> </ol>" />
+      ),
+    },
+  ],
+};
+
+const fiveItems: TabsProps = {
+  items: [
+    {
+      label: "Tab One",
+      content: (
+        <RichText content="<h2>International Labour Organization</h2> <p>The <b>International Labour Organization</b> (<b>ILO</b>) is a <a href='https://www.un.org'>United Nations</a> agency whose mandate is to advance social and economic justice by setting international labour standards. Founded in October 1919 under the League of Nations, it is the first and oldest specialised agency of the UN. The ILO has 187 member states: 186 out of 193 UN member states plus the Cook Islands.</p> <p>Whereas also the failure of any nation to adopt humane conditions of labour is an obstacle in the way of other nations which desire to improve the conditions in their own countries.</p> <figure><img alt='placeholder image' class='right' src='/ilo-headquarters.jpg'><figcaption>The ILO's headquarters in Geneva, Switzerland. ©Steiner SA</figcaption></figure> <h3>ILO Constitution</h3> <p>The driving forces for the ILO's creation arose from security, humanitarian, political and economic considerations.</p> <blockquote> <p>The fundamental ideas that forged the ILO one hundred and three years ago still underpin the global pledge to leave no one behind.</p> <cite>ILO Director-General Gilbert F. Houngbo</cite> </blockquote> Reflecting these ideas, the Preamble of the ILO Constitution states:</p> <ol> <li>Whereas universal and lasting peace can be established only if it is based upon social justice;</li> <li>And whereas conditions of labour exist involving such injustice, hardship and privation to large numbers of people as to produce unrest so great that the peace and harmony of the world are imperilled; and an improvement of those conditions is urgently required;</li> <li>Whereas also the failure of any nation to adopt humane conditions of labour is an obstacle in the way of other nations which desire to improve the conditions in their own countries.</li> </ol>" />
+      ),
+    },
+    {
+      label: "Tab Two",
+      content: (
+        <Image
+          alt="My alt text"
+          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://place-hold.it/400x300?text=Tab Two Image",
+            },
+            {
+              breakpoint: 800,
+              src: "https://place-hold.it/800x600?text=Tab Two Image",
+            },
+            {
+              breakpoint: 1200,
+              src: "https://place-hold.it/1200x900?text=Tab Two Image",
+            },
+            {
+              breakpoint: 1440,
+              src: "https://place-hold.it/1600x1200?text=Tab Two Image",
+            },
+          ]}
+        />
+      ),
+    },
+    {
+      label: "Tab Three",
+      content: (
+        <Image
+          alt="My alt text"
+          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://place-hold.it/400x300?text=Tab Three Image",
+            },
+            {
+              breakpoint: 800,
+              src: "https://place-hold.it/800x600?text=Tab Three Image",
+            },
+            {
+              breakpoint: 1200,
+              src: "https://place-hold.it/1200x900?text=Tab Three Image",
+            },
+            {
+              breakpoint: 1440,
+              src: "https://place-hold.it/1600x1200?text=Tab Three Image",
+            },
+          ]}
+        />
+      ),
+    },
+    {
+      label: "Tab Four Has A Really Lenghthy Title Which Might Get Truncated",
+      content: (
+        <Image
+          alt="My alt text"
+          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://place-hold.it/400x300?text=Tab Four Image",
+            },
+            {
+              breakpoint: 800,
+              src: "https://place-hold.it/800x600?text=Tab Four Image",
+            },
+            {
+              breakpoint: 1200,
+              src: "https://place-hold.it/1200x900?text=Tab Four Image",
+            },
+            {
+              breakpoint: 1440,
+              src: "https://place-hold.it/1600x1200?text=Tab Four Image",
+            },
+          ]}
+        />
+      ),
+    },
+    {
+      label: "Tab Five",
+      content: (
+        <Image
+          alt="My alt text"
+          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://place-hold.it/400x300?text=Tab Five Image",
+            },
+            {
+              breakpoint: 800,
+              src: "https://place-hold.it/800x600?text=Tab Five Image",
+            },
+            {
+              breakpoint: 1200,
+              src: "https://place-hold.it/1200x900?text=Tab Five Image",
+            },
+            {
+              breakpoint: 1440,
+              src: "https://place-hold.it/1600x1200?text=Tab Five Image",
+            },
+          ]}
+        />
+      ),
+    },
+  ],
+};
+
+/**
+ * Sample prop definitions for Button's enumerable properties (imported in stories and tests).
+ */
+const TabsArgs = {
+  tabs,
+  withIcon,
+  fiveItems,
+};
+
+export default TabsArgs;

package/src/components/Tabs/Tabs.props.ts

@@ -0,0 +1,13 @@
+import { IconProps } from "../Icon/Icon.props";
+export interface TabsProps {
+  /**
+   * Specify the items inside a tab
+   */
+  items: Required<Array<TabItem>>;
+}
+
+export interface TabItem {
+  icon?: IconProps;
+  label: Required<string>;
+  content: Required<any>;
+}

package/src/components/Tabs/Tabs.tsx

@@ -0,0 +1,60 @@
+import { FC, SetStateAction, useState } from "react";
+import useGlobalSettings from "../../hooks/useGlobalSettings";
+import classnames from "classnames";
+import { TabsProps } from "./Tabs.props";
+import { Icon } from "../Icon";
+
+const Tabs: FC<TabsProps> = ({ items }) => {
+  const [activeTab, setActiveTab] = useState(0);
+
+  const handleTabClick = (
+    index: SetStateAction<number>,
+    e: React.MouseEvent<HTMLElement>
+  ) => {
+    setActiveTab(index);
+    e.preventDefault();
+  };
+
+  const { prefix } = useGlobalSettings();
+
+  const baseClass = `${prefix}--tabs`;
+  const tabsClasses = classnames(baseClass);
+
+  return (
+    <div className={`${tabsClasses} tabs--js`}>
+      <ul className={`${baseClass}--selection`} role="tablist">
+        {items.map((tab, index) => (
+          <li
+            key={`#tab--${index}`}
+            role="tab"
+            className={`${baseClass}--selection--item ${
+              activeTab === index ? "active" : ""
+            }`}
+            onClick={(e) => handleTabClick(index, e)}
+          >
+            <a
+              href={`#tab--${index}`}
+              className={`${baseClass}--selection--button${
+                tab.icon ? " icon" : ""
+              }`}
+              role="tab"
+              aria-controls={`tab--${index}`}
+              aria-selected={index === activeTab ? true : false}
+              title={tab.label}
+            >
+              <span className={`${baseClass}--selection--label`}>
+                {tab.label}
+              </span>
+              {tab.icon && (
+                <Icon name={tab.icon.name} hidden={tab.icon.hidden} />
+              )}
+            </a>
+          </li>
+        ))}
+      </ul>
+      <div className={`${baseClass}--content`}>{items[activeTab].content}</div>
+    </div>
+  );
+};
+
+export default Tabs;

package/src/components/Tabs/index.ts

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