@ilo-org/react 0.14.0 → 0.15.0

package/src/components/NumberPicker/NumberPicker.tsx

@@ -1,88 +0,0 @@
-import React from "react";
-import classNames from "classnames";
-import useGlobalSettings from "../../hooks/useGlobalSettings";
-import FormControl, { useFormControl } from "../FormControl/FormControl";
-import {
-  NumberPickerProps,
-  LabelledNumberPickerProps,
-} from "./NumberPicker.props";
-
-const NumberPicker = React.forwardRef<HTMLInputElement, NumberPickerProps>(
-  (
-    {
-      onChange,
-      onBlur,
-      disabled = false,
-      error,
-      id,
-      name,
-      placeholder,
-      required,
-      max,
-      min,
-      step,
-    },
-    ref
-  ) => {
-    const { prefix } = useGlobalSettings();
-    const formControlCtx = useFormControl();
-    const { ariaDescribedBy } = formControlCtx;
-
-    const inputClass = `${prefix}--input`;
-    const baseClass = `${prefix}--numberpicker`;
-
-    const hasError = !disabled && !!error;
-
-    const numberPickerClasses = classNames(inputClass, baseClass, {
-      error: hasError,
-    });
-
-    const handleChange = (e: React.ChangeEvent<HTMLInputElement>) => {
-      if (onChange) {
-        onChange(e);
-      }
-    };
-
-    return (
-      <input
-        ref={ref}
-        id={id ? id : name}
-        name={name}
-        onChange={handleChange}
-        onBlur={onBlur}
-        disabled={disabled}
-        placeholder={placeholder}
-        required={required}
-        type="number"
-        className={numberPickerClasses}
-        pattern="[0-9]*"
-        inputMode="numeric"
-        aria-describedby={ariaDescribedBy}
-        max={max}
-        min={min}
-        step={step}
-      />
-    );
-  }
-);
-
-const LabelledNumberPicker = React.forwardRef<
-  HTMLInputElement,
-  LabelledNumberPickerProps
->((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}
-    >
-      <NumberPicker ref={ref} style={inputStyle} {...rest} />
-    </FormControl>
-  );
-});
-
-export default LabelledNumberPicker;

package/src/components/NumberPicker/index.ts

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

package/src/components/Pagination/Pagination.args.ts

@@ -1,43 +0,0 @@
-import { PaginationProps } from "./Pagination.props";
-
-const pagination: PaginationProps = {
-  className: "storybook",
-  callback: () => {},
-  currentPage: 1,
-  firstPageUrl: "https://www.google.com?s=first",
-  firstPageTitle: "First",
-  lastPageUrl: "https://www.google.com?s=last",
-  lastPageTitle: "Last",
-  nextPageUrl: "https://www.google.com?s=next",
-  nextPageTitle: "Next",
-  pageCountPreposition: "of",
-  prevPageUrl: "https://www.google.com?s=prev",
-  prevPageTitle: "Prev",
-  totalPages: 8,
-};
-
-const firstDisabled: PaginationProps = {
-  className: "storybook",
-  callback: () => {},
-  currentPage: 0,
-  firstPageUrl: "https://www.google.com?s=first",
-  firstPageTitle: "First",
-  lastPageUrl: "https://www.google.com?s=last",
-  lastPageTitle: "Last",
-  nextPageUrl: "https://www.google.com?s=next",
-  nextPageTitle: "Next",
-  pageCountPreposition: "of",
-  prevPageUrl: "https://www.google.com?s=prev",
-  prevPageTitle: "Prev",
-  totalPages: 1,
-};
-
-/**
- * Sample prop definitions for Pagination's enumerable properties (imported in stories and test)
- */
-const PaginationArgs = {
-  pagination,
-  firstDisabled,
-};
-
-export default PaginationArgs;

package/src/components/Pagination/Pagination.props.ts

@@ -1,66 +0,0 @@
-export interface PaginationProps {
-  /**
-   * Specify the callback of your Button.
-   */
-  callback: (e: React.MouseEvent<Element, MouseEvent>) => any;
-
-  /**
-   * Specify an optional className to be added to your Pagination component.
-   */
-  className?: string;
-
-  /**
-   * current page number that the user is on, zero-indexed
-   */
-  currentPage: number;
-
-  /**
-   * link to the first page
-   */
-  firstPageUrl: string;
-
-  /**
-   * title label for the first page
-   */
-  firstPageTitle: string;
-
-  /**
-   * link to the last page
-   */
-  lastPageUrl: string;
-
-  /**
-   * title label for the last page
-   */
-  lastPageTitle: string;
-
-  /**
-   * linking word for the page counts
-   */
-  pageCountPreposition?: string;
-
-  /**
-   * link the following page
-   */
-  nextPageUrl: string;
-
-  /**
-   * title label for the next page
-   */
-  nextPageTitle: string;
-
-  /**
-   * link of the previous page
-   */
-  prevPageUrl: string;
-
-  /**
-   * title label for the prev page
-   */
-  prevPageTitle: string;
-
-  /**
-   * total number of pages that are available
-   */
-  totalPages: number;
-}

package/src/components/Pagination/Pagination.tsx

@@ -1,115 +0,0 @@
-import { FC } from "react";
-import classNames from "classnames";
-import useGlobalSettings from "../../hooks/useGlobalSettings";
-import { PaginationProps } from "./Pagination.props";
-
-const Pagination: FC<PaginationProps> = ({
-  className,
-  callback,
-  currentPage,
-  firstPageUrl,
-  firstPageTitle = "First page",
-  lastPageUrl,
-  lastPageTitle = "Last page",
-  nextPageUrl,
-  nextPageTitle = "Next page",
-  pageCountPreposition = "of",
-  prevPageUrl,
-  prevPageTitle = "Previous page",
-  totalPages,
-}) => {
-  const { prefix } = useGlobalSettings();
-
-  const baseClass = `${prefix}--pagination`;
-  const paginationClasses = classNames(className, {
-    [baseClass]: true,
-  });
-
-  const isFirst = currentPage === 0;
-  const isLast = currentPage + 1 === totalPages;
-
-  const firstClasses = classNames(className, {
-    [`${baseClass}--first-page`]: true,
-    [`${baseClass}--link`]: true,
-    [`${baseClass}--disable`]: isFirst,
-  });
-
-  const prevClasses = classNames(className, {
-    [`${baseClass}--prev-page`]: true,
-    [`${baseClass}--link`]: true,
-    [`${baseClass}--disable`]: isFirst,
-  });
-
-  const nextClasses = classNames(className, {
-    [`${baseClass}--next-page`]: true,
-    [`${baseClass}--link`]: true,
-    [`${baseClass}--disable`]: isLast,
-  });
-
-  const lastClasses = classNames(className, {
-    [`${baseClass}--last-page`]: true,
-    [`${baseClass}--link`]: true,
-    [`${baseClass}--disable`]: isLast,
-  });
-
-  /**
-   * On click, if there is a callback, call it
-   */
-  const handleClick = (e: React.MouseEvent<Element, MouseEvent>) => {
-    if (callback) {
-      callback(e);
-    }
-  };
-
-  return (
-    <div className={paginationClasses}>
-      <div className={`${baseClass}--previous-set`}>
-        <a
-          className={firstClasses}
-          onClick={(e) => handleClick(e)}
-          href={firstPageUrl}
-          title={firstPageTitle}
-        >
-          {firstPageTitle}
-        </a>
-
-        <a
-          className={prevClasses}
-          onClick={(e) => handleClick(e)}
-          href={prevPageUrl}
-          title={prevPageTitle}
-        >
-          {prevPageTitle}
-        </a>
-      </div>
-
-      <p className={`${baseClass}--page`}>
-        <span>{currentPage + 1}</span>
-        <span>{pageCountPreposition}</span>
-        <span>{totalPages}</span>
-      </p>
-
-      <div className={`${baseClass}--next-set`}>
-        <a
-          className={nextClasses}
-          onClick={(e) => handleClick(e)}
-          href={nextPageUrl}
-          title={nextPageTitle}
-        >
-          {nextPageTitle}
-        </a>
-
-        <a
-          className={lastClasses}
-          onClick={(e) => handleClick(e)}
-          href={lastPageUrl}
-          title={lastPageTitle}
-        >
-          {lastPageTitle}
-        </a>
-      </div>
-    </div>
-  );
-};
-
-export default Pagination;

package/src/components/Pagination/index.ts

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

package/src/components/Profile/Profile.args.ts

@@ -1,58 +0,0 @@
-import { ProfileProps } from "./Profile.props";
-
-const basic: ProfileProps = {
-  avatar: "/ilo-dg.jpg",
-  className: "storybook",
-  name: "Gilbert F. Houngbo",
-};
-
-const hasall: ProfileProps = {
-  avatar: "/ilo-dg.jpg",
-  className: "storybook",
-  description:
-    "Gilbert F. Houngbo was elected as the ILO’s 11th Director-General by the organization’s Governing Body in March 2022",
-  link: {
-    label: "Learn more",
-    url: "http://www.google.com",
-  },
-  name: "Gilbert F. Houngbo",
-  role: "ILO Director-General",
-};
-
-const hasdescription: ProfileProps = {
-  avatar: "/ilo-dg.jpg",
-  className: "storybook",
-  description:
-    "Gilbert F. Houngbo was elected as the ILO’s 11th Director-General by the organization’s Governing Body in March 2022",
-  name: "Gilbert F. Houngbo",
-};
-
-const haslink: ProfileProps = {
-  avatar: "/ilo-dg.jpg",
-  className: "storybook",
-  link: {
-    label: "Learn more",
-    url: "http://www.google.com",
-  },
-  name: "Gilbert F. Houngbo",
-};
-
-const hasrole: ProfileProps = {
-  avatar: "/ilo-dg.jpg",
-  className: "storybook",
-  name: "Gilbert F. Houngbo",
-  role: "ILO Director-General",
-};
-
-/**
- * Sample prop definitions for Profiles's enumerable properties (imported in stories and test)
- */
-const ProfileArgs = {
-  basic,
-  hasall,
-  hasdescription,
-  haslink,
-  hasrole,
-};
-
-export default ProfileArgs;

package/src/components/Profile/Profile.props.ts

@@ -1,55 +0,0 @@
-import { ThemeTypes, SizeTypes } from "../../types";
-
-interface LinkProps {
-  /**
-   * Specify the label for the the Profile's link
-   */
-  label?: Required<string>;
-
-  /**
-   * Specify the url for the Profile's link
-   */
-  url?: Required<string>;
-}
-
-export interface ProfileProps {
-  /**
-   * Specify the theme for your profile component.
-   */
-  theme?: ThemeTypes;
-
-  /**
-   * Specify the size for your profile component.
-   */
-  size?: SizeTypes;
-
-  /**
-   * Specify an optional avatar to be added to your Profile component. Image *must* be a perfect square. CMS backend should provide a fallback if the avatar is not populated.
-   */
-  avatar?: Required<string>;
-
-  /**
-   * Specify an optional className to be added to your Profile component.
-   */
-  className?: string;
-
-  /**
-   * Specify an optional description to be added to your Profile component.
-   */
-  description?: string;
-
-  /**
-   * Specify an optional link to be added to your Profile component.
-   */
-  link?: LinkProps;
-
-  /**
-   * Specify the name to be added to your Profile component.
-   */
-  name?: Required<string>;
-
-  /**
-   * Specify an optional role to be added to your Profile component.
-   */
-  role?: string;
-}

package/src/components/Profile/Profile.tsx

@@ -1,51 +0,0 @@
-import { FC } from "react";
-import classNames from "classnames";
-import useGlobalSettings from "../../hooks/useGlobalSettings";
-import { ProfileProps } from "./Profile.props";
-
-const Profile: FC<ProfileProps> = ({
-  avatar,
-  className,
-  description,
-  link,
-  name,
-  role,
-  theme = "light",
-  size = "large",
-}) => {
-  const { prefix } = useGlobalSettings();
-  const baseClass = `${prefix}--profile`;
-  const profileClasses = classNames(className, {
-    [baseClass]: true,
-    [`${baseClass}__theme__${theme}`]: theme,
-    [`${baseClass}__size__${size}`]: size,
-  });
-
-  return (
-    <figure className={profileClasses}>
-      <img
-        className={`${baseClass}--avatar`}
-        src={avatar}
-        alt={`Avatar for ${name}`}
-      />
-      <figcaption>
-        <div className={`${baseClass}--figcaption--content`}>
-          <div className={`${baseClass}--name`}>{name}</div>
-          {role && <div className={`${baseClass}--role`}>{role}</div>}
-        </div>
-      </figcaption>
-      {description && (
-        <p className={`${baseClass}--description`}>{description}</p>
-      )}
-      {link && (
-        <div className={`${baseClass}--link`}>
-          <a href={link.url} target="__blank" rel="noopener noreferrer">
-            <span className={`${baseClass}--link--label`}>{link.label}</span>
-          </a>
-        </div>
-      )}
-    </figure>
-  );
-};
-
-export default Profile;

package/src/components/Profile/index.ts

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

package/src/components/Radio/Radio.args.ts

@@ -1,15 +0,0 @@
-import { RadioProps } from "./Radio.props";
-
-const basic: RadioProps = {
-  className: "Radio",
-  name: "radio",
-};
-
-/**
- * Sample prop definitions Radio's enumerable properties (imported in stories and test)
- */
-const RadioArgs = {
-  basic,
-};
-
-export default RadioArgs;

package/src/components/Radio/Radio.props.ts

@@ -1,6 +0,0 @@
-import { ChoiceFieldProps } from "../../types";
-import { LabelledFormFieldProps } from "../../types";
-
-export type RadioProps = ChoiceFieldProps<HTMLInputElement>;
-
-export type LabelledRadioProps = LabelledFormFieldProps<RadioProps>;

package/src/components/Radio/Radio.tsx

@@ -1,102 +0,0 @@
-import React, { useEffect } from "react";
-import classNames from "classnames";
-import { useGlobalSettings } from "../../hooks";
-import { LabelledRadioProps, RadioProps } from "./Radio.props";
-import { useFieldsetError } from "../Fieldset/Fieldset";
-import FormControl, { useFormControl } from "../FormControl/FormControl";
-import usePrevious from "../../hooks/usePrevious";
-
-const Radio = React.forwardRef<HTMLInputElement, RadioProps>(
-  (
-    {
-      onChange,
-      onBlur,
-      disabled = false,
-      error,
-      id,
-      name,
-      required,
-      checked,
-      defaultChecked = false,
-      value,
-    },
-    ref
-  ) => {
-    const { prefix } = useGlobalSettings();
-    const { setHasError } = useFieldsetError();
-    const formControlCtx = useFormControl();
-    const prevError = usePrevious(error);
-
-    useEffect(() => {
-      if (error !== prevError) {
-        setHasError(!!error);
-      }
-    }, [error, prevError, setHasError]);
-
-    const { ariaDescribedBy } = formControlCtx;
-
-    const handleChange = (e: React.ChangeEvent<HTMLInputElement>) => {
-      console.log(e.target.value);
-      if (onChange) {
-        onChange(e);
-      }
-    };
-
-    const baseClass = `${prefix}--radio`;
-    const controlClass = `${baseClass}--control`;
-    const errorClass = `${baseClass}__error`;
-
-    const RadioClasses = classNames(baseClass, {
-      [errorClass]: error,
-    });
-
-    return (
-      <div className={RadioClasses}>
-        <input
-          ref={ref}
-          id={id ? id : name}
-          name={name}
-          onChange={handleChange}
-          onBlur={onBlur}
-          disabled={disabled}
-          required={required}
-          type="radio"
-          defaultChecked={defaultChecked}
-          aria-describedby={ariaDescribedBy}
-          checked={checked}
-          value={value}
-        />
-        <span className={controlClass}></span>
-      </div>
-    );
-  }
-);
-
-const LabelledRadio = React.forwardRef<HTMLInputElement, LabelledRadioProps>(
-  (props, ref) => {
-    const {
-      style,
-      inputStyle,
-      className,
-      labelPlacement = "end",
-      labelSize = "small",
-      ...rest
-    } = props;
-    const fieldId = props.id ? props.id : props.name;
-
-    return (
-      <FormControl
-        fieldId={fieldId}
-        style={style}
-        className={className}
-        labelPlacement={labelPlacement}
-        labelSize={labelSize}
-        {...rest}
-      >
-        <Radio ref={ref} style={inputStyle} {...rest} />
-      </FormControl>
-    );
-  }
-);
-
-export default LabelledRadio;

package/src/components/Radio/index.ts

@@ -1,2 +0,0 @@
-export { default as Radio } from "./Radio";
-export { default as RadioArgs } from "./Radio.args";

package/src/components/ReadMore/ReadMore.args.ts

@@ -1,23 +0,0 @@
-import { ReadMoreProps } from "./ReadMore.props";
-
-const fulltext = `<p>Underlying the ILO’s work is the importance of cooperation between governments and employers’ and workers’ organizations in fostering social and economic progress. The ILO aims to ensure that it serves the needs of working women and men by bringing together governments, employers and workers to set labour standards, develop policies and devise programmes.</p>
-
-<p>The very structure of the ILO, where workers and employers together have an equal voice with governments in its deliberations, shows social dialogue in action. It ensures that the views of the social partners are closely reflected in ILO labour standards, policies and programmes.</p>
-
-<p>The ILO encourages this tripartism within its constituents - employers , workers  and member States , by promoting a social dialogue between trade unions and employers in formulating, and where appropriate, implementing national policy on social, economic, and many other issues.</p>`;
-
-const excerpt = fulltext.split("\n\n")[0];
-
-const base: ReadMoreProps = {
-  buttonlabel: {
-    closed: "Read More",
-    opened: "Close",
-  },
-  excerpt,
-  fulltext,
-  openatstart: false,
-};
-
-const open = { ...base, openatstart: true };
-
-export default { base, open };

package/src/components/ReadMore/ReadMore.props.ts

@@ -1,38 +0,0 @@
-export interface ReadMoreButtonLabelProps {
-  /**
-   * Specify the label for the closed state of the "Read More" button
-   */
-  closed?: Required<string>;
-
-  /**
-   * Specify the label for the opened state of the "Read More" button
-   */
-  opened?: Required<string>;
-}
-
-export interface ReadMoreProps {
-  /**
-   * Specify labels for the "Read More" button.
-   */
-  buttonlabel?: Required<ReadMoreButtonLabelProps>;
-
-  /**
-   * Specify an optional className to be added to your Button.
-   */
-  className?: string;
-
-  /**
-   * Specify the excerpt text
-   */
-  excerpt: string;
-
-  /**
-   * Specify the complete text
-   */
-  fulltext: string;
-
-  /**
-   * Specify the open/closed state on component load
-   */
-  openatstart?: boolean;
-}