@ilo-org/react 0.14.0 → 0.15.0

package/src/components/Video/Video.tsx

@@ -1,34 +0,0 @@
-import { forwardRef } from "react";
-import classNames from "classnames";
-import useGlobalSettings from "../../hooks/useGlobalSettings";
-import { VideoProps } from "./Video.props";
-import VideoPlayer from "./VideoPlayer";
-import { VideoPlayerRef } from "./VideoPlayer.props";
-
-const Video = forwardRef<VideoPlayerRef, VideoProps>(
-  ({ className, caption, ...video }, ref) => {
-    const { prefix } = useGlobalSettings();
-    const baseClass = `${prefix}--video`;
-
-    const videoClasses = classNames(className, {
-      [baseClass]: true,
-    });
-
-    const captionClasses = classNames("", {
-      [`${baseClass}--caption`]: true,
-    });
-
-    return (
-      <figure className={videoClasses}>
-        <div className={`${videoClasses}--wrapper`}>
-          {video && <VideoPlayer {...video} ref={ref} />}
-        </div>
-        {caption && (
-          <figcaption className={captionClasses}>{caption}</figcaption>
-        )}
-      </figure>
-    );
-  }
-);
-
-export default Video;

package/src/components/Video/VideoPlayer.props.ts

@@ -1,51 +0,0 @@
-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
-   */
-  fullscreen: string;
-
-  /**
-   * Specify the label for the  play button
-   */
-  play: string;
-
-  /**
-   * Specify the label for the pause button
-   */
-  pause: string;
-
-  /**
-   * Specify the label for the volume button
-   */
-  volume: string;
-}
-
-export interface VideoPlayerProps {
-  src: string;
-
-  /**
-   * Specify an optional className to be added to your Media.
-   */
-  className?: string;
-
-  /**
-   * Specify the strings to be used as labels for the video controls
-   */
-  controls?: VideoPlayerControls;
-
-  /**
-   *  poster image for video
-   */
-  poster?: Poster;
-
-  /**
-   * if YouTube, set to true
-   */
-  youtube?: boolean;
-}

package/src/components/Video/VideoPlayer.tsx

@@ -1,71 +0,0 @@
-import { forwardRef, useEffect, useImperativeHandle, useRef } from "react";
-import "videojs-youtube";
-import { VideoPlayerProps, VideoPlayerRef } from "./VideoPlayer.props";
-import videojs, { ILOVideo } from "video.js";
-
-const video = videojs as unknown as ILOVideo;
-
-const VideoPlayer = forwardRef<VideoPlayerRef, VideoPlayerProps>(
-  ({ src, poster, youtube }, ref) => {
-    const videoNode = useRef<HTMLVideoElement>(null);
-    const player = useRef<videojs.Player>();
-
-    useImperativeHandle(
-      ref,
-      () => ({
-        get player() {
-          return player.current;
-        },
-      }),
-      [player]
-    );
-
-    useEffect(() => {
-      if (videoNode.current) {
-        player.current = video(videoNode.current, {
-          autoplay: false,
-          controls: true,
-          preload: "auto",
-          bigPlayButton: false,
-          poster: poster?.src,
-          controlBar: {
-            descriptionsButton: false,
-            playbackRateMenuButton: false,
-            chaptersButton: false,
-            audioTrackButton: false,
-            pictureInPictureToggle: false,
-            subsCapsButton: false,
-            seekToLive: false,
-            liveDisplay: false,
-          },
-          errorDisplay: false,
-          textTrackSettings: false,
-          resizeManager: false,
-          /**
-           * If youtube is true, it will default to the youtube video
-           */
-          sources: [
-            { type: youtube ? "video/youtube" : undefined, src: src as string },
-          ],
-          dataSetup: {
-            techOrder: ["youtube"],
-          },
-          liveTracker: false,
-        });
-      }
-      return () => {
-        if (player.current) {
-          player.current.dispose();
-        }
-      };
-    }, [poster?.src, src, youtube]);
-
-    return (
-      <div className="ilo--videoplayer">
-        <video ref={videoNode} className="ilo--video--element" />
-      </div>
-    );
-  }
-);
-
-export default VideoPlayer;

package/src/components/Video/index.ts

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

package/src/components/index.ts

@@ -1,46 +0,0 @@
-export {
-  Accordion,
-  AccordionButton,
-  AccordionItem,
-  AccordionPanel,
-} from "./Accordion";
-export { Form } from "./Form";
-export { Collapse } from "./Collapse";
-export { Empty } from "./Empty";
-export { Image } from "./Image";
-export { Loading } from "./Loading";
-export { Radio } from "./Radio";
-export { Tag } from "./Tag";
-export { Button } from "./Button";
-export { ContextMenu } from "./ContextMenu";
-export { Fieldset } from "./Fieldset";
-export { GlobalProvider } from "./GlobalProvider";
-export { Notification } from "./Notification";
-export { ReadMore } from "./ReadMore";
-export { Textarea } from "./Textarea";
-export { Callout } from "./Callout";
-export { Credit } from "./Credit";
-export { FileUpload } from "./FileUpload";
-export { Heading } from "./Heading";
-export { Link } from "./Link";
-export { NumberPicker } from "./NumberPicker";
-export { RichText } from "./RichText";
-export { Tooltip } from "./Tooltip";
-export { Checkbox } from "./Checkbox";
-export { DatePicker } from "./DatePicker";
-export { Hero } from "./Hero";
-export { LinkList } from "./LinkList";
-export { Pagination } from "./Pagination";
-export { SearchField } from "./SearchField";
-export { Video } from "./Video";
-export { Dropdown } from "./Dropdown";
-export { Icon } from "./Icon";
-export { List } from "./List";
-export { Profile } from "./Profile";
-export { TableOfContents } from "./TableOfContents";
-export { Footer } from "./Footer";
-export { LocalNav } from "./LocalNav";
-export { Navigation } from "./Navigation";
-export { CardGroup } from "./Cards/CardGroup";
-export { Breadcrumb } from "./Breadcrumb";
-export { Tabs } from "./Tabs";

package/src/declarations.d.ts

@@ -1,36 +0,0 @@
-import videojs from "video.js";
-
-declare module "*.svg" {
-  const content: string;
-  export default content;
-}
-
-declare module "*.png" {
-  const content: string;
-  export default content;
-}
-
-declare module "*.jpg" {
-  const content: string;
-  export default content;
-}
-
-declare module "video.js" {
-  interface VideoJsPlayerOptionsAugmentation extends videojs.PlayerOptions {
-    liveTracker: boolean;
-    textTrackSettings: boolean;
-    errorDisplay: boolean;
-    resizeManager: boolean;
-    dataSetup: {
-      techOrder: string[];
-    };
-  }
-
-  type ILOVideo = (
-    id: string | HTMLVideoElement,
-    options: VideoJsPlayerOptionsAugmentation,
-    ready?: () => void
-  ) => videojs.Player;
-}
-
-declare module "videojs-youtube" {}

package/src/hooks/index.ts

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

package/src/hooks/useGlobalSettings.ts

@@ -1,13 +0,0 @@
-import { useContext } from "react";
-import { GlobalProviderContext } from "../components/GlobalProvider";
-
-const useGlobalSettings = () => {
-  const { prefix, ...rest } = useContext(GlobalProviderContext);
-
-  return {
-    prefix,
-    ...rest,
-  };
-};
-
-export default useGlobalSettings;

package/src/hooks/usePrevious.ts

@@ -1,15 +0,0 @@
-import { useEffect, useRef } from "react";
-
-// This code was shamelessly borrowed from the blog post
-// "How to access previous props or state with React Hooks" by
-// Ohans Emmanuel, published on LogRocket May 11, 2023
-// https://blog.logrocket.com/accessing-previous-props-state-react-hooks/
-
-export function usePrevious<T>(value: T) {
-  const ref = useRef<T>();
-  useEffect(() => {
-    ref.current = value; //assign the value of ref to the argument
-  }, [value]); //this code will run when the value of 'value' changes
-  return ref.current; //in the end, return the current ref value.
-}
-export default usePrevious;

package/src/hooks/useVideoPlayer.ts

@@ -1,85 +0,0 @@
-import { useState, useEffect } from "react";
-
-const useVideoPlayer = (videoElement: any) => {
-  const [fullscreen, setFullscreen] = useState(false);
-  const [playing, setPlaying] = useState(false);
-  const [progress, setProgress] = useState(0);
-  const [showvolume, showVolume] = useState(false);
-
-  /**
-   * Fullscreen functionality
-   */
-  const toggleFullscreen = () => {
-    setFullscreen(!fullscreen);
-  };
-
-  useEffect(() => {
-    if (fullscreen) {
-      if (videoElement.requestFullscreen) {
-        videoElement.requestFullscreen();
-      }
-    } else {
-      document.exitFullscreen();
-    }
-  }, [fullscreen, videoElement]);
-
-  /**
-   * Play/pause functionality
-   */
-  const togglePlay = () => {
-    setPlaying(!playing);
-  };
-
-  useEffect(() => {
-    playing ? videoElement.current.play() : videoElement.current.pause();
-  }, [playing, videoElement]);
-
-  /**
-   * Progress indicator
-   */
-  const handleOnTimeUpdate = () => {
-    setProgress(
-      (videoElement.current.currentTime / videoElement.current.duration) * 100
-    );
-  };
-
-  /**
-   * Scrub functionality
-   */
-  const handleVideoScrub = (event: any) => {
-    const scrubValue = Number(
-      (event.offsetX * event.target.max) / event.target.offsetWidth
-    );
-    videoElement.current.currentTime =
-      videoElement.current.duration * scrubValue;
-    setProgress(scrubValue);
-  };
-
-  /**
-   * Show volume slider
-   */
-  const toggleVolumeSlider = () => {
-    showVolume(!showvolume);
-  };
-
-  /**
-   * Volume change
-   */
-  const handleVolumeChange = (event: any) => {
-    videoElement.volume = event.target.value;
-  };
-
-  return {
-    handleOnTimeUpdate,
-    handleVideoScrub,
-    handleVolumeChange,
-    playing,
-    progress,
-    showvolume,
-    toggleFullscreen,
-    togglePlay,
-    toggleVolumeSlider,
-  };
-};
-
-export default useVideoPlayer;

package/src/index.ts

@@ -1 +0,0 @@
-export * from "./components";

package/src/setup.ts

@@ -1,6 +0,0 @@
-import "@testing-library/jest-dom";
-import "@testing-library/jest-dom/extend-expect";
-import { setProjectAnnotations } from "@storybook/react";
-import * as globalStorybookConfig from "../.storybook/preview";
-
-setProjectAnnotations(globalStorybookConfig);

package/src/stories/Accordion/Accordion.stories.tsx

@@ -1,145 +0,0 @@
-import { Meta, StoryObj } from "@storybook/react";
-import {
-  Title,
-  Subtitle,
-  Description,
-  Primary,
-  ArgTypes,
-  Stories,
-} from "@storybook/blocks";
-import {
-  Accordion,
-  AccordionButton,
-  AccordionPanel,
-  AccordionItem,
-} from "../../components/Accordion";
-import { AccordionProps } from "../../components/Accordion/Accordion.props";
-import { large } from "../../components/Accordion/Accordion.args";
-
-/**
- * Accordion Story
- *
- */
-const AccordionMeta: Meta<typeof Accordion> = {
-  title: "Components/Content/Accordion",
-  component: Accordion,
-  tags: ["autodocs"],
-  subcomponents: {
-    AccordionItem,
-    AccordionButton,
-    AccordionPanel,
-  },
-  parameters: {
-    docs: {
-      page: () => (
-        <>
-          <Subtitle />
-          <Title />
-          <Description>
-            The accordion component allows the user to show and hide sections of
-            related content on a page. Click the accordions below to
-            expand/collapse the accordion content.
-          </Description>
-          <Primary />
-          <Stories title="Examples"></Stories>
-          <ArgTypes />
-        </>
-      ),
-    },
-  },
-};
-
-export default AccordionMeta;
-
-//@TODO: We should just use the list component for this
-
-const DefaultAccordion = (args: AccordionProps) => (
-  <Accordion {...args}>
-    <AccordionItem id="l1">
-      <AccordionButton>Topics</AccordionButton>
-      <AccordionPanel>
-        <div style={{ padding: "20px" }}>
-          <ul className="ilo--list--unordered">
-            <li>Employment Promotion and Job Creation</li>
-            <li>Social Protection</li>
-            <li>International Labour Standards</li>
-            <li>Social Dialogue and Tripartism</li>
-          </ul>
-        </div>
-      </AccordionPanel>
-    </AccordionItem>
-    <AccordionItem id="l2">
-      <AccordionButton>Sectors</AccordionButton>
-      <AccordionPanel>
-        <div style={{ padding: "20px" }}>
-          <ul className="ilo--list--unordered">
-            <li>Agriculture, Forestry, and Fishing</li>
-            <li>Construction</li>
-            <li>Manufacturing</li>
-            <li>Transport and Storage</li>
-            <li>Wholesale and Retail Trade</li>
-            <li>Information and Communication</li>
-          </ul>
-        </div>
-      </AccordionPanel>
-    </AccordionItem>
-  </Accordion>
-);
-
-const Default: StoryObj<typeof DefaultAccordion> = {
-  name: "Default",
-  args: large,
-  render: (args) => <DefaultAccordion {...args} />,
-};
-
-const Scrollable: StoryObj<typeof DefaultAccordion> = {
-  name: "Scrollable",
-  args: large,
-  render: (args) => (
-    <Accordion {...args}>
-      <AccordionItem id="l1">
-        <AccordionButton>Topics</AccordionButton>
-        <AccordionPanel scroll>
-          <div style={{ padding: "20px" }}>
-            <ul className="ilo--list--unordered">
-              <li>Employment Promotion and Job Creation</li>
-              <li>Social Protection</li>
-              <li>International Labour Standards</li>
-              <li>Social Dialogue and Tripartism</li>
-              <li>Occupational Safety and Health</li>
-              <li>Labor Migration</li>
-              <li>Child Labour and Forced Labour Elimination</li>
-              <li>Gender Equality and Non-Discrimination</li>
-              <li>Decent Work</li>
-              <li>Wages and Working Hours</li>
-              <li>Social Security</li>
-              <li>Green Jobs</li>
-            </ul>
-          </div>
-        </AccordionPanel>
-      </AccordionItem>
-      <AccordionItem id="l2">
-        <AccordionButton>Sectors</AccordionButton>
-        <AccordionPanel scroll>
-          <div style={{ padding: "20px" }}>
-            <ul className="ilo--list--unordered">
-              <li>Agriculture, Forestry, and Fishing</li>
-              <li>Construction</li>
-              <li>Manufacturing</li>
-              <li>Transport and Storage</li>
-              <li>Wholesale and Retail Trade</li>
-              <li>Information and Communication</li>
-              <li>Finance and Insurance</li>
-              <li>Health and Social Work</li>
-              <li>Educational Services</li>
-              <li>Public Administration and Defense</li>
-              <li>Other Services</li>
-            </ul>
-          </div>
-        </AccordionPanel>
-      </AccordionItem>
-    </Accordion>
-  ),
-};
-
-export { Default, Scrollable };

package/src/stories/Breadcrumb/Breadcrumb.mdx

@@ -1,17 +0,0 @@
-import { Meta, Story, Canvas, ArgsTable, Unstyled } from "@storybook/blocks";
-import * as BreadcrumbStories from "./Breadcrumb.stories.tsx";
-import { Breadcrumb } from "../../components";
-
-<Meta title="Breadcrumb" of={BreadcrumbStories} />
-
-# Breadcrumb
-
-A component for displaying links in a "breadcrumb" style.
-
-<Canvas>
-  <Story of={BreadcrumbStories.BasicBreadcrumb} />
-</Canvas>
-
-## Default Props
-
-<ArgsTable of={Breadcrumb} />

package/src/stories/Breadcrumb/Breadcrumb.stories.tsx

@@ -1,20 +0,0 @@
-import { Meta, StoryObj } from "@storybook/react";
-import { Breadcrumb } from "../../components/Breadcrumb";
-import BreadcrumbArgs from "../../components/Breadcrumb/Breadcrumb.args";
-
-const BreadcrumbMeta: Meta<typeof Breadcrumb> = {
-  title: "Components/Navigation/Breadcrumb",
-  component: Breadcrumb,
-};
-
-export default BreadcrumbMeta;
-
-export const BasicBreadcrumb: StoryObj<typeof Breadcrumb> = {
-  args: BreadcrumbArgs.basic,
-  name: "Basic",
-};
-
-export const FiveLinksBreadcrumb: StoryObj<typeof Breadcrumb> = {
-  args: BreadcrumbArgs.fiveLinks,
-  name: "Five Links",
-};

package/src/stories/Button/Button.mdx

@@ -1,94 +0,0 @@
-import { Meta, Story, Canvas, ArgsTable, Unstyled } from "@storybook/blocks";
-import * as ButtonStories from "./Button.stories.tsx";
-import { Button, GlobalProvider } from "../../components";
-
-<Meta title="Button" of={ButtonStories} />
-
-# Button
-
-Buttons allow users to take actions like submitting a form or opening a modal window. They can also be used as links that will navigate users to different pages.
-
-<Canvas>
-  <Story of={ButtonStories.PrimaryBtn} />
-  <Story of={ButtonStories.SecondaryBtn} />
-  <Story of={ButtonStories.TertiaryBtn} />
-  <Story of={ButtonStories.AlertBtn} />
-  <Story of={ButtonStories.IconBtn} />
-  <Story of={ButtonStories.DisabledBtn} />
-</Canvas>
-
-## Button sizes
-
-Buttons come in three sizes: `large`, `medium` and `small`. The default size is `large`.
-
-<div style={{ margin: "0 0 40px" }}>
-  <Button
-    type="primary"
-    size="large"
-    label="Large"
-    style={{
-      marginRight: "1rem",
-      display: "table-cell",
-      verticalAlign: "bottom",
-    }}
-  />
-  <Button
-    type="primary"
-    size="medium"
-    label="Medium"
-    style={{
-      marginRight: "1rem",
-      display: "table-cell",
-      verticalAlign: "bottom",
-    }}
-  />
-  <Button
-    type="primary"
-    size="small"
-    label="Small"
-    style={{
-      marginRight: "1rem",
-      display: "table-cell",
-      verticalAlign: "bottom",
-    }}
-  />
-</div>
-
-## Buttons with icons
-
-Buttons can have icons. See the [complete list](https://github.com/international-labour-organization/designsystem/blob/develop/packages/icons/icons.yml) of icons available. By changing the props you can set the icon to use, and set its position in the button. Additonally, you can set the `icononly` prop to `true` if you want the button's label to be visually hidden.
-
-<div style={{ display: "flex", flexFlow: "row", margin: "0 0 40px" }}>
-  <Button
-    type="secondary"
-    icon="add"
-    label="Icon left"
-    style={{ marginRight: "1rem" }}
-  />
-  <Button
-    type="secondary"
-    icon="add"
-    iconPosition="right"
-    label="Icon right"
-    style={{ marginRight: "1rem" }}
-  />
-  <Button
-    type="secondary"
-    icon="add"
-    label="Icon Only"
-    icononly
-    style={{ marginRight: "1rem" }}
-  />
-</div>
-
-## Buttons as links
-
-Populating the `url` prop with a valid url and/or an anchor to an id in the current document (e.g. `#my-id`) will result in the same design being displayed, but "under the hood," in the html, an `<a>` element will be used, allowing link functionality. When this is populated, the `target` prop is also read. Populating this, sets the `target` attribute of the anchor tag, which opens the link url in a new tab or window.
-
-<Canvas>
-  <Story of={ButtonStories.LinkBtn} />
-</Canvas>
-
-## Default Props
-
-<ArgsTable of={Button} />