@ilo-org/react 0.14.0 → 0.15.0

package/src/components/TextInput/TextInput.tsx

@@ -1,71 +0,0 @@
-import React from "react";
-import classNames from "classnames";
-import useGlobalSettings from "../../hooks/useGlobalSettings";
-import { TextInputProps, LabelledTextInputProps } from "./TextInput.props";
-import FormControl, { useFormControl } from "../FormControl/FormControl";
-
-const TextInput = React.forwardRef<HTMLInputElement, TextInputProps>(
-  (
-    {
-      onChange,
-      onBlur,
-      error,
-      id,
-      name,
-      placeholder,
-      required,
-      pattern,
-      disabled = false,
-      type = "text",
-    },
-    ref
-  ) => {
-    const { prefix } = useGlobalSettings();
-    const formControlCtx = useFormControl();
-    const { ariaDescribedBy } = formControlCtx;
-
-    const baseClass = `${prefix}--text-input`;
-
-    const inputClass = classNames(baseClass, {
-      [`${baseClass}__error`]: error,
-    });
-
-    return (
-      <input
-        ref={ref}
-        id={id ? id : name}
-        name={name}
-        onChange={onChange}
-        onBlur={onBlur}
-        disabled={disabled}
-        placeholder={placeholder}
-        required={required}
-        type={type}
-        className={inputClass}
-        pattern={pattern}
-        aria-describedby={ariaDescribedBy}
-      />
-    );
-  }
-);
-
-const LabelledTextInput = React.forwardRef<
-  HTMLInputElement,
-  LabelledTextInputProps
->((props, ref) => {
-  const { style, inputStyle, className, ...rest } = props;
-  const fieldId = props.id ? props.id : props.name;
-
-  return (
-    <FormControl
-      fieldId={fieldId}
-      style={style}
-      className={className}
-      {...rest}
-    >
-      <TextInput ref={ref} style={inputStyle} {...rest} />
-    </FormControl>
-  );
-});
-
-export default LabelledTextInput;

package/src/components/TextInput/index.ts

@@ -1,2 +0,0 @@
-export { default as TextInput } from "./TextInput";
-export * as TextInputArgs from "./TextInput.args";

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

@@ -1,34 +0,0 @@
-import { LabelledTextareaProps, TextareaProps } from "./Textarea.props";
-
-const placeholder =
-  "It was a cold day in April and the clocks were striking thirteen....";
-
-export const basic: LabelledTextareaProps = {
-  id: "textarea",
-  disabled: false,
-  name: "textarea",
-  placeholder,
-  required: false,
-  spellcheck: false,
-  label: "Insert your life story here",
-  labelPlacement: "top" as const,
-  labelSize: "medium" as const,
-  style: { width: "100%" },
-  errorMessage: "This is an error message",
-};
-
-export const haserror: TextareaProps = {
-  ...basic,
-  error: true,
-};
-
-export const disabled: TextareaProps = {
-  ...basic,
-  disabled: true,
-};
-
-export default {
-  basic,
-  haserror,
-  disabled,
-};

package/src/components/Textarea/Textarea.props.ts

@@ -1,45 +0,0 @@
-import { FormFieldProps } from "../../types";
-import { LabelledFormFieldProps } from "../../types";
-export interface TextareaProps extends FormFieldProps<HTMLTextAreaElement> {
-  /**
-   * The Textarea's onChange callback.
-   */
-  onChange?: (e: React.ChangeEvent<HTMLTextAreaElement>) => any;
-
-  /**
-   * Activate automatic spelling correction and processing of text substitutions
-   **/
-  autocorrect?: "on" | "off";
-
-  /**
-   *  The id of the form element the Textarea belongs to if it's not nested inside the form.
-   **/
-  form?: string;
-
-  /**
-   * The Textarea's maxlength
-   */
-  maxlength?: number;
-
-  /**
-   * The Textarea's minlength
-   */
-  minlength?: number;
-
-  /**
-   * Specify an optional className to be added to your Textarea component.
-   */
-  placeholder?: string;
-
-  /**
-   * Specifies whether the textarea is subject to spellchecking by the underlying browser/OS
-   **/
-  spellcheck?: boolean | "default";
-
-  /**
-   *  How the control should wrap the value for submission.
-   **/
-  wrap?: "hard" | "soft" | "off";
-}
-
-export type LabelledTextareaProps = LabelledFormFieldProps<TextareaProps>;

package/src/components/Textarea/Textarea.tsx

@@ -1,52 +0,0 @@
-import React from "react";
-import classnames from "classnames";
-import useGlobalSettings from "../../hooks/useGlobalSettings";
-import { TextareaProps, LabelledTextareaProps } from "./Textarea.props";
-import FormControl, { useFormControl } from "../FormControl/FormControl";
-
-const Textarea = React.forwardRef<HTMLTextAreaElement, TextareaProps>(
-  ({ error, className, name, id, ...props }, ref) => {
-    const { prefix } = useGlobalSettings();
-    const formControlCtx = useFormControl();
-    const { ariaDescribedBy } = formControlCtx;
-
-    const baseClass = `${prefix}--textarea`;
-    const errorClass = `${baseClass}__error`;
-
-    const textAreaClass = classnames(baseClass, className, {
-      [errorClass]: error,
-    });
-
-    return (
-      <textarea
-        ref={ref}
-        className={textAreaClass}
-        name={name}
-        id={id ? id : name}
-        aria-describedby={ariaDescribedBy}
-        {...props}
-      />
-    );
-  }
-);
-
-const LabelledTextarea = React.forwardRef<
-  HTMLTextAreaElement,
-  LabelledTextareaProps
->((props, ref) => {
-  const { style, inputStyle, className, ...rest } = props;
-  const fieldId = props.id ? props.id : props.name;
-
-  return (
-    <FormControl
-      fieldId={fieldId}
-      style={style}
-      className={className}
-      {...rest}
-    >
-      <Textarea ref={ref} style={inputStyle} {...rest} />
-    </FormControl>
-  );
-});
-
-export default LabelledTextarea;

package/src/components/Textarea/index.ts

@@ -1,3 +0,0 @@
-export { default as Textarea } from "./Textarea";
-export type { TextareaProps } from "./Textarea.props";
-export { default as TextareaArgs } from "./Textarea.args";

package/src/components/Toggle/Toggle.args.ts

@@ -1,62 +0,0 @@
-import { LabelledToggleProps } from "./Toggle.props";
-
-export const Default: LabelledToggleProps = {
-  defaultChecked: false,
-  errorMessage: "Invalid option",
-  name: "my-toggle",
-  size: "medium",
-  label: "Show details",
-  labelPlacement: "end",
-  labelSize: "small",
-};
-
-export const Checked: LabelledToggleProps = {
-  ...Default,
-  defaultChecked: true,
-};
-
-export const Disabled: LabelledToggleProps = {
-  ...Default,
-  disabled: true,
-};
-
-export const Helper: LabelledToggleProps = {
-  ...Default,
-  helper: "This is a helper text",
-};
-
-export const Tooltip: LabelledToggleProps = {
-  ...Helper,
-  tooltip: "This is a tooltip",
-};
-
-export const Error: LabelledToggleProps = {
-  ...Default,
-  error: true,
-};
-
-export const DefaultChecked: LabelledToggleProps = {
-  ...Default,
-  defaultChecked: true,
-};
-
-export const Controlled: LabelledToggleProps = {
-  ...Default,
-  onClick: () => console.log("clicked"),
-  checked: true,
-};
-
-export const Large: LabelledToggleProps = {
-  ...Default,
-  size: "large",
-};
-
-export const Medium: LabelledToggleProps = {
-  ...Default,
-  size: "medium",
-};
-
-export const Small: LabelledToggleProps = {
-  ...Default,
-  size: "small",
-};

package/src/components/Toggle/Toggle.props.ts

@@ -1,27 +0,0 @@
-import { FormFieldProps } from "../../types";
-import { LabelledFormFieldProps } from "../../types";
-
-export interface ToggleProps extends FormFieldProps<HTMLInputElement> {
-  /**
-   * Specify the size of your Toggle. Defaults to "medium".
-   */
-  size?: "large" | "medium" | "small";
-
-  /**
-   * Specify whether your Toggle is checked by default. Defaults to false.
-   *
-   */
-  defaultChecked?: boolean;
-
-  /**
-   * Specify whether your Toggle is checked. Defaults to undefined.
-   */
-  checked?: boolean;
-
-  /**
-   * OnClick handler for the input element.
-   */
-  onClick?: (event: React.MouseEvent<HTMLInputElement>) => any;
-}
-
-export type LabelledToggleProps = LabelledFormFieldProps<ToggleProps>;

package/src/components/Toggle/Toggle.tsx

@@ -1,85 +0,0 @@
-import { Ref, forwardRef } from "react";
-import { ToggleProps } from "./Toggle.props";
-import { LabelledToggleProps } from "./Toggle.props";
-import { useGlobalSettings } from "../../hooks";
-import classnames from "classnames";
-import FormControl, { useFormControl } from "../FormControl/FormControl";
-
-const Toggle = forwardRef<HTMLInputElement, ToggleProps>(
-  (
-    {
-      size = "medium",
-      error = false,
-      disabled = false,
-      defaultChecked = false,
-      required = false,
-      id,
-      name,
-      onChange,
-      onBlur,
-      onClick,
-      checked,
-      className,
-    },
-    ref
-  ) => {
-    const { prefix } = useGlobalSettings();
-    const formControlCtx = useFormControl();
-    const { ariaDescribedBy } = formControlCtx;
-
-    const hasError = !disabled && !!error;
-
-    const baseClass = `${prefix}--input--toggle`;
-    const sliderClass = `${baseClass}--slider`;
-
-    const toggleClass = classnames(
-      baseClass,
-      className,
-      `${baseClass}__size__${size}`,
-      [
-        { [`${baseClass}__error`]: hasError },
-        { [`${baseClass}__disabled`]: disabled },
-      ]
-    );
-
-    return (
-      <div className={toggleClass}>
-        <input
-          ref={ref} // Forwarded ref applied here
-          checked={checked}
-          disabled={disabled}
-          defaultChecked={defaultChecked}
-          name={name}
-          id={id ? id : name}
-          type="checkbox"
-          role="switch"
-          required={required}
-          onChange={onChange}
-          onBlur={onBlur}
-          onClick={onClick}
-          aria-describedby={ariaDescribedBy}
-        />
-        <span className={sliderClass} />
-      </div>
-    );
-  }
-);
-
-const LabelledToggle = forwardRef(
-  (props: LabelledToggleProps, ref: Ref<HTMLInputElement>) => {
-    const fieldId = props.id ? props.id : props.name;
-    const { style, inputStyle, className, ...rest } = props;
-    return (
-      <FormControl
-        fieldId={fieldId}
-        style={style}
-        className={className}
-        {...rest}
-      >
-        <Toggle ref={ref} style={inputStyle} {...rest} />
-      </FormControl>
-    );
-  }
-);
-
-export default LabelledToggle;

package/src/components/Toggle/index.ts

@@ -1,3 +0,0 @@
-export { default as Toggle } from "./Toggle";
-export type { ToggleProps } from "./Toggle.props";
-export * as ToggleArgs from "./Toggle.args";

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

@@ -1,39 +0,0 @@
-import { TooltipProps } from "./Tooltip.props";
-
-const light: TooltipProps = {
-  label: "This is a light tooltip",
-  theme: "light", // "light" | "dark" ;
-  isVisible: false,
-};
-
-const lighticon: TooltipProps = {
-  icon: true,
-  label: "This is a light tooltip",
-  theme: "light", // "light" | "dark" ;
-  isVisible: false,
-};
-
-const dark: TooltipProps = {
-  label: "This is a dark tooltip",
-  theme: "dark", // "light" | "dark" ;
-  isVisible: false,
-};
-
-const darkicon: TooltipProps = {
-  icon: true,
-  label: "This is a tooltip for an icon",
-  iconTheme: "dark", // "light" | "dark" ;
-  isVisible: false,
-};
-
-/**
- * Sample prop definitions for Tooltip's enumerable properties (imported in stories and tests).
- */
-const tooltipArgs = {
-  light,
-  lighticon,
-  dark,
-  darkicon,
-};
-
-export default tooltipArgs;

package/src/components/Tooltip/Tooltip.props.ts

@@ -1,38 +0,0 @@
-import { TooltipThemes, TooltipIconThemes } from "../../types";
-
-export interface TooltipProps {
-  /**
-   * Specify an optional className to be added to your Tooltip.
-   */
-  className?: string;
-
-  /**
-   * Should the tooltip appear on hover of an info icon?
-   */
-  icon?: boolean;
-
-  /**
-   * Set the id of the tooltip
-   */
-  id?: string;
-
-  /**
-   * Set the label for the tooltip
-   */
-  label?: Required<string>;
-
-  /**
-   * Set whether the tooltip is visible or not
-   */
-  isVisible?: boolean;
-
-  /**
-   * Describe the theme of the tooltip
-   */
-  theme?: Required<TooltipThemes>;
-
-  /**
-   * Describe the background theme of the tooltip
-   */
-  iconTheme?: Required<TooltipIconThemes>;
-}

package/src/components/Tooltip/Tooltip.tsx

@@ -1,119 +0,0 @@
-import React, { FC, useState, useRef } from "react";
-import classNames from "classnames";
-import useGlobalSettings from "../../hooks/useGlobalSettings";
-import { TooltipProps } from "./Tooltip.props";
-import { createPopper, Instance as PopperInstance } from "@popperjs/core";
-
-const Tooltip: FC<TooltipProps> = ({
-  className,
-  children,
-  icon,
-  label,
-  iconTheme,
-  theme,
-  id,
-}) => {
-  const { prefix } = useGlobalSettings();
-  const baseClass = `${prefix}--tooltip`;
-  const [isVisible, setIsVisible] = useState<boolean>(false);
-  const tooltipRef = useRef<HTMLDivElement>(null);
-  const popperInstanceRef = useRef<PopperInstance | null>(null);
-
-  const isLongTooltip = () => {
-    const tooltipText = (
-      tooltipRef.current?.textContent ||
-      tooltipRef.current?.innerText ||
-      ""
-    ).trim();
-    return tooltipText.length > 50;
-  };
-
-  const tooltipClasses = classNames(className, {
-    [baseClass]: true,
-    [`${baseClass}--${theme}`]: theme,
-    [`${baseClass}--visible`]: isVisible,
-    [`${baseClass}--long`]: isLongTooltip(),
-  });
-
-  const tooltipArrowClasses = classNames(
-    `${baseClass}--arrow`,
-    `${baseClass}--arrow--placement-negative`
-  );
-
-  const iconClasses = classNames(className, `${baseClass}--wrapper`, {
-    [`${baseClass}--wrapper__icon ${baseClass}--wrapper__icon__theme__${theme}`]:
-      icon,
-    [`${baseClass}--wrapper__icon__theme__${theme}`]: iconTheme,
-  });
-
-  const handleOnMouseOver: React.MouseEventHandler<HTMLDivElement> = (e) => {
-    const target = e.currentTarget;
-    if (target && tooltipRef.current) {
-      const popperInstance = createPopper(target, tooltipRef.current, {
-        placement: "top",
-        modifiers: [
-          {
-            name: "offset",
-            options: {
-              offset: [0, 12], // Adjust offset as needed
-            },
-          },
-          {
-            name: "flip",
-            enabled: true,
-          },
-          {
-            name: "preventOverflow",
-            enabled: true,
-          },
-        ],
-      });
-
-      popperInstanceRef.current = popperInstance;
-
-      setIsVisible(true);
-    }
-  };
-
-  const handleOnMouseOut = () => {
-    if (popperInstanceRef.current) {
-      popperInstanceRef.current.destroy();
-    }
-    setIsVisible(false);
-  };
-
-  const handleOnFocus: React.FocusEventHandler<HTMLDivElement> = (e) => {
-    handleOnMouseOver(e as unknown as React.MouseEvent<HTMLDivElement>);
-  };
-
-  return (
-    <div
-      className={iconClasses}
-      onMouseOver={handleOnMouseOver}
-      onFocus={handleOnFocus}
-      onMouseOut={handleOnMouseOut}
-      onBlur={handleOnMouseOut}
-      id={id}
-    >
-      {!icon && <>{children}</>}
-      <span
-        className={tooltipClasses}
-        ref={tooltipRef}
-        data-id={id}
-        id="tooltip"
-        role="tooltip"
-        aria-hidden={!isVisible}
-      >
-        <span
-          data-popper-arrow
-          className={tooltipArrowClasses}
-          data-placement="negative"
-          role="presentation"
-        />
-        {label}
-      </span>
-    </div>
-  );
-};
-
-export default Tooltip;

package/src/components/Tooltip/index.ts

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

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

@@ -1,47 +0,0 @@
-import { VideoProps } from "./Video.props";
-
-const videofile: VideoProps = {
-  className: "image",
-  caption:
-    "The ILO brings together governments, employers and workers to set labour standards and promote decent work.",
-  poster: {
-    src: "/media-file-poster.jpg",
-    alt: "The ILO logo on a blue background",
-  },
-  controls: {
-    fullscreen: "Fullscreen",
-    play: "Play",
-    pause: "Pause",
-    volume: "Volume",
-  },
-  src: "/video-example.mp4",
-  youtube: false,
-};
-
-const videoyt: VideoProps = {
-  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",
-  poster: {
-    src: "/youtube-video-poster.avif",
-    alt: "An smiling woman with gray hair holds a bowl full of corn in front of her home.",
-  },
-  controls: {
-    fullscreen: "Fullscreen",
-    play: "Play",
-    pause: "Pause",
-    volume: "Volume",
-  },
-  src: "https://youtu.be/X72_A4_6zjU",
-  youtube: true,
-};
-
-/**
- * Sample prop definitions for Video's enumerable properties (imported in stories and tests).
- */
-const videoArgs = {
-  videofile,
-  videoyt,
-};
-
-export default videoArgs;

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

@@ -1,35 +0,0 @@
-import { VideoPlayerControls } from "./VideoPlayer.props";
-
-export interface Poster {
-  src: string;
-  alt: string;
-}
-
-export interface VideoProps {
-  src: string;
-
-  /**
-   * Specify the strings to be used as labels for the video controls
-   */
-  controls?: VideoPlayerControls;
-
-  /**
-   * if YouTube, set to true
-   */
-  youtube?: boolean;
-
-  /**
-   * Specify the caption for the image/video
-   */
-  caption?: string;
-
-  /**
-   * Specify an optional className to be added to your Media.
-   */
-  className?: string;
-
-  /**
-   * Specify the image src for the image
-   */
-  poster?: Poster;
-}