@ilo-org/react 0.14.0 → 0.15.0

package/src/components/Dropdown/Dropdown.args.ts

@@ -1,70 +0,0 @@
-import { LabelledDropdownProps } from "./Dropdown.props";
-
-export const options = [
-  { label: "Switzerland", value: "CH" },
-  { label: "Côte d'Ivoire ", value: "CI" },
-  { label: "Thailand", value: "TH" },
-  { label: "United States", value: "US" },
-  { label: "Zimbabwe", value: "ZW" },
-  { label: "Afghanistan", value: "AF" },
-  { label: "Åland Islands", value: "AX" },
-  { label: "Albania", value: "AL" },
-  { label: "Algeria", value: "DZ" },
-  { label: "American Samoa", value: "AS" },
-  { label: "AndorrA", value: "AD" },
-  { label: "Angola", value: "AO" },
-  { label: "Anguilla", value: "AI" },
-  { label: "Antarctica", value: "AQ" },
-  { label: "Antigua and Barbuda", value: "AG" },
-  { label: "Argentina", value: "AR" },
-  { label: "Armenia", value: "AM" },
-  { label: "Aruba", value: "AW" },
-  { label: "Australia", value: "AU" },
-  { label: "Austria", value: "AT" },
-  { label: "Azerbaijan", value: "AZ" },
-];
-
-const basic: LabelledDropdownProps = {
-  label: "Select a country",
-  errorMessage: "Please select a country",
-  autocomplete: "false",
-  className: "storybook",
-  disabled: false,
-  error: false,
-  id: "dropdown",
-  name: "dropdown",
-  options,
-  required: false,
-  value: "option one",
-  style: { width: "100%" },
-};
-
-const haserror: LabelledDropdownProps = {
-  ...basic,
-  error: true,
-};
-
-const hashelper: LabelledDropdownProps = {
-  ...basic,
-  helper: "Please select a country",
-};
-
-const hastooltip: LabelledDropdownProps = {
-  ...basic,
-  tooltip: "Please select a country",
-};
-
-const isdisabled: LabelledDropdownProps = {
-  ...basic,
-  disabled: true,
-};
-
-const DropdownArgs = {
-  basic,
-  haserror,
-  hashelper,
-  hastooltip,
-  isdisabled,
-};
-
-export default DropdownArgs;

package/src/components/Dropdown/Dropdown.props.ts

@@ -1,53 +0,0 @@
-import { FormFieldProps } from "../../types";
-import { LabelledFormFieldProps } from "../../types";
-
-export interface OptionProps {
-  /**
-   * Is this option disabled?
-   */
-  disabled?: boolean;
-
-  /**
-   * The option's label
-   */
-  label: string;
-
-  /**
-   * The option's value
-   */
-  value?: string;
-}
-
-export interface DropdownProps extends FormFieldProps<HTMLSelectElement> {
-  /**
-   * A string providing a hint for a user agent's autocomplete feature.
-   */
-  autocomplete?: string;
-
-  /**
-   * The form element to associate the Dropdown with if it's not nested in a form element.
-   */
-  form?: string;
-
-  /**
-   * Indicates that multiple options can be selected from the list.
-   */
-  multiple?: boolean;
-
-  /**
-   * The Dropdown's options
-   */
-  options?: OptionProps[];
-
-  /**
-   * Number of rows in the list that should be visible at one time. Corresponds to the select element's size attribute.
-   */
-  selectSize?: number;
-
-  /**
-   * The Dropdown's default selection; should match one of the values in `options`
-   */
-  value?: string;
-}
-
-export type LabelledDropdownProps = LabelledFormFieldProps<DropdownProps>;

package/src/components/Dropdown/Dropdown.tsx

@@ -1,95 +0,0 @@
-import React, { forwardRef, useState } from "react";
-import classNames from "classnames";
-import { useGlobalSettings } from "../../hooks";
-import { DropdownProps, LabelledDropdownProps } from "./Dropdown.props";
-import FormControl, { useFormControl } from "../FormControl/FormControl";
-
-const Dropdown = forwardRef<HTMLSelectElement, DropdownProps>((props, ref) => {
-  const {
-    autocomplete,
-    onChange,
-    onBlur,
-    disabled = false,
-    error,
-    id,
-    name,
-    options,
-    required,
-    value,
-    form,
-    multiple,
-    selectSize,
-  } = props;
-
-  const { prefix } = useGlobalSettings();
-  const formControlCtx = useFormControl();
-  const { ariaDescribedBy } = formControlCtx;
-
-  const baseClass = `${prefix}--dropdown`;
-
-  const dropdownClasses = classNames(baseClass, {
-    [`error`]: error,
-  });
-
-  const [currentvalue, setValue] = useState(value);
-
-  const handleChange = (e: React.ChangeEvent<HTMLSelectElement>) => {
-    setValue(e.target.value);
-    if (onChange) {
-      onChange(e);
-    }
-  };
-
-  return (
-    <div className={`${baseClass}--wrapper`}>
-      <select
-        ref={ref}
-        id={id ? id : name}
-        autoComplete={autocomplete}
-        name={name}
-        required={required}
-        onChange={handleChange}
-        onBlur={onBlur}
-        disabled={disabled}
-        className={dropdownClasses}
-        value={currentvalue}
-        form={form}
-        multiple={multiple}
-        size={selectSize}
-        aria-describedby={ariaDescribedBy}
-      >
-        {options &&
-          options.map((option, i) => (
-            <option
-              disabled={option.disabled}
-              label={option.label}
-              value={option.value}
-              key={`${baseClass}--option--${i}`}
-            >
-              {option.label}
-            </option>
-          ))}
-      </select>
-    </div>
-  );
-});
-
-const LabelledDropdown = forwardRef<HTMLSelectElement, LabelledDropdownProps>(
-  (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}
-      >
-        <Dropdown ref={ref} style={inputStyle} {...rest} />
-      </FormControl>
-    );
-  }
-);
-
-export default LabelledDropdown;

package/src/components/Dropdown/index.ts

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

package/src/components/Empty/Empty.props.ts

@@ -1,13 +0,0 @@
-import React from "react";
-
-export interface EmptyProps {
-  /**
-   * Specify an optional className to be added to your empty component.
-   */
-  className?: string;
-
-  /**
-   * Inline styles to be applied
-   */
-  style?: React.CSSProperties;
-}

package/src/components/Empty/Empty.tsx

@@ -1,16 +0,0 @@
-import { FC } from "react";
-import classNames from "classnames";
-import useGlobalSettings from "../../hooks/useGlobalSettings";
-import { EmptyProps } from "./Empty.props";
-
-const Empty: FC<EmptyProps> = ({ className, style }) => {
-  const { prefix } = useGlobalSettings();
-  const baseClass = `${prefix}--empty`;
-  const emptyClasses = classNames(className, {
-    [baseClass]: true,
-  });
-
-  return <div style={style} className={emptyClasses}></div>;
-};
-
-export default Empty;

package/src/components/Empty/index.ts

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

package/src/components/Fieldset/Fieldset.props.ts

@@ -1,33 +0,0 @@
-import { HTMLProps } from "react";
-
-export interface FieldsetProps extends HTMLProps<HTMLFieldSetElement> {
-  /**
-   * Optional helper text for the fieldset
-   */
-  helper?: string;
-
-  /**
-   * Optional error text for the fieldset
-   */
-  errorMessage?: string;
-
-  /**
-   * Optional tooltip text for the fieldset
-   */
-  tooltip?: string;
-
-  /**
-   * The fieldset's legend
-   */
-  legend?: string;
-
-  /**
-   * The direction of the Fieldset's children
-   */
-  direction?: "row" | "column" | "row-reverse" | "column-reverse";
-
-  /**
-   * How the Fieldset children will wrap
-   */
-  wrap?: "reverse" | "nowrap" | "wrap" | "wrap-reverse";
-}

package/src/components/Fieldset/Fieldset.tsx

@@ -1,96 +0,0 @@
-import { FC, createContext, useContext, useState } from "react";
-import classNames from "classnames";
-import useGlobalSettings from "../../hooks/useGlobalSettings";
-import { FieldsetProps } from "./Fieldset.props";
-import { Tooltip } from "../Tooltip";
-
-type FieldsetContextType = {
-  hasError: boolean;
-  setHasError: (value: boolean) => void;
-};
-
-// Create a new context for the error state
-export const FieldsetErrorContext = createContext<FieldsetContextType>({
-  hasError: false,
-  setHasError: (value) => value,
-});
-
-// Custom hook to access the error state from the context
-export const useFieldsetError = () => useContext(FieldsetErrorContext);
-
-const Fieldset: FC<FieldsetProps> = ({
-  children,
-  className,
-  legend,
-  helper,
-  tooltip,
-  errorMessage,
-  disabled = false,
-  wrap = "nowrap",
-  direction = "column",
-  ...props
-}) => {
-  const { prefix } = useGlobalSettings();
-
-  const [hasError, setHasError] = useState(false);
-
-  const baseClass = `${prefix}--fieldset`;
-  const wrapClass = `${baseClass}--wrap__${wrap}`;
-  const directionClass = `${baseClass}--direction__${direction}`;
-  const helperClass = `${baseClass}--helper`;
-  const errorClass = `${baseClass}__error`;
-  const disabledClass = `${baseClass}__disabled`;
-
-  const fieldsetClasses = classNames(
-    className,
-    baseClass,
-    wrapClass,
-    directionClass,
-    {
-      [disabledClass]: disabled,
-    }
-  );
-
-  const helperClasses = classNames(helperClass, {
-    [errorClass]: hasError,
-  });
-
-  const contextValue = {
-    hasError,
-    setHasError,
-  };
-
-  const showHelper = !!helper || hasError;
-
-  const helperMessage = hasError ? errorMessage : helper;
-
-  return (
-    <fieldset className={fieldsetClasses} {...props}>
-      {legend || helper ? (
-        <div className={`${baseClass}--legend-wrapper`}>
-          {legend && (
-            <legend className={`${baseClass}--legend`}>
-              {legend}
-              {tooltip && (
-                <Tooltip
-                  className={`${baseClass}--legend--tooltip`}
-                  icon={true}
-                  label={tooltip}
-                  theme={"dark"}
-                ></Tooltip>
-              )}
-            </legend>
-          )}
-          {showHelper && <span className={helperClasses}>{helperMessage}</span>}
-        </div>
-      ) : null}
-      <div className={`${baseClass}--elements`}>
-        <FieldsetErrorContext.Provider value={contextValue}>
-          {children}
-        </FieldsetErrorContext.Provider>
-      </div>
-    </fieldset>
-  );
-};
-
-export default Fieldset;

package/src/components/Fieldset/index.ts

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

package/src/components/FileUpload/FileUpload.args.ts

@@ -1,60 +0,0 @@
-import { FileUploadProps, LabelledFileUploadProps } from "./FileUpload.props";
-
-const basic: LabelledFileUploadProps = {
-  label: "Upload your file",
-  id: "fileupload",
-  disabled: false,
-  error: false,
-  multiple: true,
-  name: "fileupload",
-  placeholder: "Select files",
-  required: false,
-};
-
-const hashelper: LabelledFileUploadProps = {
-  label: "Upload your file",
-  id: "fileupload",
-  disabled: false,
-  error: false,
-  multiple: true,
-  name: "fileupload",
-  placeholder: "Select files",
-  required: false,
-};
-
-const haserror: LabelledFileUploadProps = {
-  label: "Upload your file",
-  id: "fileupload",
-  disabled: false,
-  error: true,
-  multiple: true,
-  name: "fileupload",
-  placeholder: "Select files",
-  required: false,
-};
-
-const hastooltip: LabelledFileUploadProps = {
-  label: "Upload your file",
-  id: "fileupload",
-  disabled: false,
-  error: false,
-  multiple: true,
-  name: "fileupload",
-  placeholder: "Select files",
-  required: false,
-};
-
-const disabled: FileUploadProps = { ...basic, disabled: true };
-
-/**
- * Sample prop definitions FileUpload's enumerable properties (imported in stories and test)
- */
-const FileUploadArgs = {
-  basic,
-  hashelper,
-  haserror,
-  hastooltip,
-  disabled,
-};
-
-export default FileUploadArgs;

package/src/components/FileUpload/FileUpload.props.ts

@@ -1,21 +0,0 @@
-import { FormFieldProps } from "../../types";
-import { LabelledFormFieldProps } from "../../types";
-
-export interface FileUploadProps extends FormFieldProps<HTMLInputElement> {
-  /**
-   * The placeholder for the input
-   */
-  placeholder?: string;
-
-  /**
-   * The accept attribute for the input
-   */
-  accept?: string;
-
-  /**
-   * Can the user upload more than one file?
-   */
-  multiple?: boolean;
-}
-
-export type LabelledFileUploadProps = LabelledFormFieldProps<FileUploadProps>;

package/src/components/FileUpload/FileUpload.tsx

@@ -1,116 +0,0 @@
-import React, { useState } from "react";
-import classNames from "classnames";
-import useGlobalSettings from "../../hooks/useGlobalSettings";
-import FormControl, { useFormControl } from "../FormControl/FormControl";
-import { FileUploadProps, LabelledFileUploadProps } from "./FileUpload.props";
-
-function formatBytes(bytes: number, decimals = 2) {
-  if (!+bytes) return "0 Bytes";
-
-  const k = 1024;
-  const dm = decimals < 0 ? 0 : decimals;
-  const sizes = ["Bytes", "KB", "MB", "GB", "TB", "PB", "EB", "ZB", "YB"];
-
-  const i = Math.floor(Math.log(bytes) / Math.log(k));
-
-  return `${parseFloat((bytes / Math.pow(k, i)).toFixed(dm))} ${sizes[i]}`;
-}
-
-const FileUpload = React.forwardRef<HTMLInputElement, FileUploadProps>(
-  (
-    {
-      onChange,
-      onBlur,
-      disabled = false,
-      error,
-      id,
-      multiple,
-      name,
-      placeholder,
-      required,
-      accept,
-    },
-    ref
-  ) => {
-    const { prefix } = useGlobalSettings();
-    const formControlCtx = useFormControl();
-    const { ariaDescribedBy } = formControlCtx;
-
-    const baseClass = `${prefix}--file-upload`;
-    const fileUploadClasses = classNames(baseClass, {
-      [`error`]: error,
-    });
-    const inputClass = `${baseClass}--input`;
-
-    const [uploadfiles, setUploadFiles] = useState<null | FileList>(null);
-
-    const handleChange = (e: React.ChangeEvent<HTMLInputElement>) => {
-      const files = e.target.files;
-      setUploadFiles(files);
-
-      if (onChange) {
-        onChange(e);
-      }
-    };
-
-    const inputId = id ? id : name;
-
-    return (
-      <>
-        <div className={fileUploadClasses}>
-          <label className={inputClass}>
-            {placeholder}
-            <input
-              ref={ref}
-              id={inputId}
-              name={name}
-              accept={accept}
-              onChange={handleChange}
-              onBlur={onBlur}
-              disabled={disabled}
-              multiple={multiple}
-              placeholder={placeholder}
-              required={required as any}
-              type="file"
-              data-label={placeholder}
-              aria-describedby={ariaDescribedBy}
-            />
-          </label>
-        </div>
-        {uploadfiles && uploadfiles.length > 0 && (
-          <ul className={`${baseClass}--list`}>
-            {[...uploadfiles].map((file, i) => (
-              <li
-                className={`${baseClass}--list-item`}
-                key={`${baseClass}--list-item-${i}`}
-              >
-                {`${file.name} (${formatBytes(file.size)})`}
-              </li>
-            ))}
-          </ul>
-        )}
-      </>
-    );
-  }
-);
-
-const LabelledFileUpload = React.forwardRef<
-  HTMLInputElement,
-  LabelledFileUploadProps
->((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}
-    >
-      <FileUpload ref={ref} style={inputStyle} {...rest} />
-    </FormControl>
-  );
-});
-
-export default LabelledFileUpload;

package/src/components/FileUpload/index.ts

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

package/src/components/Footer/Footer.args.ts

@@ -1,74 +0,0 @@
-import { FooterProps } from "./Footer.props";
-import ilo_logo_white from "@ilo-org/brand-assets/logo_en_horizontal_white.svg";
-import { darkArgs as socialMediaArgs } from "../SocialMedia/SocialMedia.args";
-
-const basic: FooterProps = {
-  className: "footer",
-  logo: ilo_logo_white,
-  tagline: "Advancing social justice, promoting decent work",
-  subtagline: "ILO is a specialized agency of the United Nations",
-  address: [
-    "International Labour Organization",
-    "4 route des Morillons",
-    "CH-1211 Genève 22",
-    "Switzerland",
-  ],
-  linkgroup: [
-    {
-      links: [
-        {
-          label: "Contact us",
-          url: "https://www.ilo.org",
-        },
-        {
-          label: "Contact us",
-          url: "https://www.ilo.org",
-        },
-        {
-          label: "Contact us",
-          url: "https://www.ilo.org",
-        },
-      ],
-    },
-  ],
-  socialmedia: socialMediaArgs,
-  subscribe: {
-    label: "Subscribe for updates",
-    url: "https://www.ilo.org",
-  },
-  legal: "© 1996-2023 International Labour Organization (ILO)",
-  secondarylinks: [
-    {
-      label: "Link One",
-      url: "https://www.ilo.org",
-    },
-    {
-      label: "Link Two",
-      url: "https://www.ilo.org",
-    },
-    {
-      label: "Link Three",
-      url: "https://www.ilo.org",
-    },
-    {
-      label: "Link Four",
-      url: "https://www.ilo.org",
-    },
-    {
-      label: "Link Five",
-      url: "https://www.ilo.org",
-    },
-    {
-      label: "Link Six",
-      url: "https://www.ilo.org",
-    },
-  ],
-  anchorlink: {
-    label: "Back to Top",
-    url: "#anchor",
-  },
-};
-
-const FooterArgs = { basic };
-
-export default FooterArgs;