@ilo-org/react 0.14.0 → 0.15.0

package/src/components/Footer/Footer.props.ts

@@ -1,60 +0,0 @@
-import { LinkGroupProps } from "../LinkList/LinkList.props";
-import { LinkProps } from "../LinkList/LinkList.props";
-import { SocialMediaProps } from "../SocialMedia";
-
-export interface FooterProps {
-  /**
-   * Specify an optional className to be added to your Footer.
-   */
-  className?: string;
-
-  /**
-   * Props for the logo of the Footer
-   */
-  logo?: string;
-
-  /**
-   * Specify the tagline for the Footer
-   */
-  tagline?: string;
-
-  /**
-   * Specify the subtagline for the Footer
-   */
-  subtagline?: string;
-
-  /**
-   * Specify the address for the Footer, in multiple lines
-   */
-  address?: string[];
-
-  /**
-   * Specify the linkgroup for the Footer's links
-   */
-  linkgroup?: Required<Array<LinkGroupProps>>;
-
-  /**
-   * Specify the links to be displayed in this link group
-   */
-  socialmedia?: SocialMediaProps;
-
-  /**
-   * Specify the legal statement for the Footer
-   */
-  subscribe?: LinkProps;
-
-  /**
-   * Specify the legal statement for the Footer
-   */
-  legal?: string;
-
-  /**
-   * Specify the secondary links for the Footer
-   */
-  secondarylinks?: LinkProps[];
-
-  /**
-   * Specify the anchor link for the Footer
-   */
-  anchorlink?: LinkProps;
-}

package/src/components/Footer/Footer.tsx

@@ -1,99 +0,0 @@
-import { FC } from "react";
-import useGlobalSettings from "../../hooks/useGlobalSettings";
-import classnames from "classnames";
-import { FooterProps } from "./Footer.props";
-import { LinkList } from "../LinkList";
-import { Button } from "../Button";
-import { SocialMedia } from "../SocialMedia";
-
-const Footer: FC<FooterProps> = ({
-  className,
-  logo,
-  tagline,
-  subtagline,
-  address,
-  linkgroup,
-  socialmedia,
-  subscribe,
-  legal,
-  secondarylinks,
-  anchorlink,
-}) => {
-  const { prefix } = useGlobalSettings();
-
-  const baseClass = `${prefix}--footer`;
-  const footerClasses = classnames(className, baseClass);
-
-  return (
-    <footer className={footerClasses}>
-      <div className={`${baseClass}--main ${prefix}--container`}>
-        <div className="site--info">
-          <img className={`${baseClass}--logo`} src={logo} alt="ILO Logo" />
-          <h3 className={`${baseClass}--headline`}>{tagline}</h3>
-          <h4 className={`${baseClass}--subhead`}>{subtagline}</h4>
-        </div>
-        {address && (
-          <div className="address">
-            {address.map((line, i) => (
-              <p key={i} className="address--line">
-                {line}
-              </p>
-            ))}
-          </div>
-        )}
-        {linkgroup && (
-          <nav className="links">
-            <LinkList linkgroup={linkgroup} theme="dark"></LinkList>
-          </nav>
-        )}
-        {socialmedia && (
-          <div className="connect">
-            <div className="social--links">
-              <SocialMedia {...socialmedia} theme="dark" />
-            </div>
-          </div>
-        )}
-        {subscribe && (
-          <div className="subscribe">
-            <Button
-              label={subscribe?.label}
-              url={subscribe?.url}
-              type="primary"
-              size="large"
-              target="_blank"
-            ></Button>
-          </div>
-        )}
-      </div>
-      <div className={`${baseClass}--secondary`}>
-        <div className={`${prefix}--container`}>
-          <div className={`${baseClass}--secondary--details`}>
-            <div className="legal">{legal}</div>
-            {secondarylinks && (
-              <nav className="secondarylinks">
-                <ul className="secondarylinks--list">
-                  {secondarylinks.map((link, i) => (
-                    <li className="secondarylinks--list--item">
-                      <a
-                        key={i}
-                        href={link.url}
-                        className="secondarylinks--list--link"
-                      >
-                        {link?.label}
-                      </a>
-                    </li>
-                  ))}
-                </ul>
-              </nav>
-            )}
-          </div>
-          <a href={anchorlink?.url} className="anchorlink">
-            {anchorlink?.label}
-          </a>
-        </div>
-      </div>
-    </footer>
-  );
-};
-
-export default Footer;

package/src/components/Footer/index.ts

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

package/src/components/Form/Form.args.ts

@@ -1,5 +0,0 @@
-import { FormProps } from "./Form.props";
-
-export const basic: FormProps = {
-  theme: "light",
-};

package/src/components/Form/Form.props.ts

@@ -1,8 +0,0 @@
-export interface FormProps extends React.FormHTMLAttributes<HTMLFormElement> {
-  children?: React.ReactNode;
-
-  /**
-   * The theme of the form. Also sets the theme of the form's children.
-   */
-  theme?: "light" | "dark";
-}

package/src/components/Form/Form.tsx

@@ -1,23 +0,0 @@
-import { forwardRef } from "react";
-import { useGlobalSettings } from "../../hooks";
-import classNames from "classnames";
-import { FormProps } from "./Form.props";
-
-const Form = forwardRef<HTMLFormElement, FormProps>(
-  ({ children, theme = "light", ...props }, ref) => {
-    const { prefix } = useGlobalSettings();
-
-    const baseClass = `${prefix}--form`;
-    const themeClass = `${baseClass}__theme__${theme}`;
-
-    const formClasses = classNames(baseClass, themeClass);
-
-    return (
-      <form ref={ref} className={formClasses} {...props}>
-        {children}
-      </form>
-    );
-  }
-);
-
-export default Form;

package/src/components/Form/index.ts

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

package/src/components/FormControl/FormControl.props.ts

@@ -1,72 +0,0 @@
-import { ReactElement } from "react";
-import { DropdownProps } from "../Dropdown/Dropdown.props";
-import { InputProps } from "../Input/Input.props";
-import { TextareaProps } from "../Textarea";
-import { ToggleProps } from "../Toggle";
-
-export interface FormControlPublicProps {
-  /**
-   * Optional className to add to the FormControl wrapper
-   */
-  className?: string;
-
-  /**
-   * Is the input disabled?
-   */
-  disabled?: boolean;
-
-  /**
-   * Does the input have an error?
-   */
-  error?: boolean;
-
-  /**
-   * The message to display in case of an error
-   */
-  errorMessage?: string;
-
-  /**
-   * Helper text to display with the label
-   */
-  helper?: string;
-
-  /**
-   * The FormControl's label
-   */
-  label: string;
-
-  /**
-   * Where to place the label
-   */
-  labelPlacement?: "top" | "start" | "bottom" | "end";
-
-  /**
-   * The size of your label. Defaults to "medium"
-   */
-  labelSize?: "small" | "medium" | "large";
-
-  /**
-   * Inline styles for the input
-   */
-  style?: React.CSSProperties;
-
-  /**
-   * Optional text to render in a tooltip
-   */
-  tooltip?: string;
-}
-
-export interface FormControlPrivateProps {
-  /**
-   * The id of the underlying input element
-   */
-  fieldId: string;
-
-  children:
-    | ReactElement<ToggleProps>
-    | ReactElement<InputProps>
-    | ReactElement<DropdownProps>
-    | ReactElement<TextareaProps>;
-}
-
-export type FormControlProps = FormControlPublicProps & FormControlPrivateProps;

package/src/components/FormControl/FormControl.tsx

@@ -1,169 +0,0 @@
-import classnames from "classnames";
-import { nanoid } from "nanoid";
-import {
-  FC,
-  createContext,
-  useContext,
-  useEffect,
-  useMemo,
-  useState,
-} from "react";
-import { useGlobalSettings } from "../../hooks";
-import { Tooltip } from "../Tooltip";
-import { FormControlProps } from "./FormControl.props";
-
-interface AllyFields {
-  tooltip?: string;
-  helper?: string;
-  errorMessage?: string;
-}
-
-interface AllyFieldsIds {
-  tooltipId?: string;
-  helperId?: string;
-  errorId?: string;
-}
-
-export interface FormControlContextProps {
-  ariaDescribedBy?: string;
-}
-
-// Calculates unique IDs for the internal accessibility elements
-// TODO: When we upgrade to React 8, this should use useId instead
-function getA11yFields(
-  baseClass = "",
-  { tooltip, helper, errorMessage }: AllyFields = {}
-) {
-  return {
-    tooltipId: tooltip && `${baseClass}--tooltip--${nanoid()}`,
-    helperId: helper && `${baseClass}--helper--${nanoid()}`,
-    errorId: errorMessage && `${baseClass}--error--${nanoid()}`,
-  };
-}
-
-// Calculates the aria-describedby attribute value based on whether or not there's an error
-function getAriaDescribedBy(getAllyFields: AllyFieldsIds, hasError?: boolean) {
-  const { tooltipId, helperId, errorId } = getAllyFields;
-
-  const ariaDescribedBy = classnames(tooltipId, {
-    [`${helperId}`]: !hasError,
-    [`${errorId}`]: hasError,
-  });
-
-  // For some reason, classnames seems to return "undefined" as a string sometimes
-  if (!ariaDescribedBy || ariaDescribedBy === "undefined") {
-    return undefined;
-  }
-  return ariaDescribedBy;
-}
-
-// The context passed down to form elements wrapped by the form control
-export const FormControlContext: React.Context<FormControlContextProps> =
-  createContext({});
-
-// Hook to get the context value
-export const useFormControl = () => useContext(FormControlContext);
-
-const FormControl: FC<FormControlProps> = ({
-  children,
-  className,
-  label,
-  helper,
-  errorMessage,
-  tooltip,
-  style,
-  error,
-  disabled,
-  fieldId,
-  labelSize = "medium",
-  labelPlacement = "top",
-}) => {
-  const { prefix } = useGlobalSettings();
-
-  // Classes applied to the outer container
-  const baseClass = `${prefix}--form-control`;
-
-  // The ids of the tooltip, helper, and error only get calculated on first render
-  const a11yFields = useMemo(
-    () => getA11yFields(baseClass, { helper, errorMessage, tooltip }),
-    [baseClass, helper, errorMessage, tooltip]
-  );
-
-  // The ids of the tooltip, helper, and error
-  const { tooltipId, helperId, errorId } = a11yFields;
-
-  // The aria-describedby attribute value
-  const [ariaDescribedBy, setAriaDescribedBy] = useState<string | undefined>(
-    undefined
-  );
-
-  // Update the aria-describedby attribute value when the error changes
-  useEffect(() => {
-    setAriaDescribedBy(
-      getAriaDescribedBy({ tooltipId, helperId, errorId }, error)
-    );
-  }, [tooltipId, helperId, errorId, error]);
-
-  // The context passed down to form elements wrapped by the form control
-  const contextValue: FormControlContextProps = {
-    ariaDescribedBy,
-  };
-
-  // Classes applied to the outer container
-  const errorClass = `${baseClass}__error`;
-  const disabledClass = `${baseClass}__disabled`;
-  const labelPlacementClass = `${baseClass}__label-placement__${labelPlacement}`;
-
-  const formControlClass = classnames(
-    baseClass,
-    className,
-    labelPlacementClass,
-    [{ [errorClass]: error }, { [disabledClass]: disabled }]
-  );
-
-  // Classes applies to the label
-  const labelBaseClass = `${baseClass}--label`;
-  const labelSizeClass = `${labelBaseClass}__size__${labelSize}`;
-  const labelClass = classnames(labelBaseClass, labelSizeClass);
-
-  // Helper class
-  const helperClass = `${baseClass}--helper`;
-
-  // Show the error message if there is an error and an error message
-  const showError = !!error && !!errorMessage;
-
-  // Show the helper text if there is no error and a helper text
-  const showHelper = !showError && !!helper;
-
-  return (
-    <FormControlContext.Provider value={contextValue}>
-      <div className={formControlClass} style={style}>
-        <span className={labelClass}>
-          <label htmlFor={fieldId}>{label}</label>
-          {tooltip && (
-            <Tooltip
-              id={tooltipId}
-              className={`${baseClass}--legend--tooltip`}
-              icon={true}
-              label={tooltip}
-              theme={"dark"}
-            />
-          )}
-        </span>
-        {children}
-        {showHelper && (
-          <span id={helperId} className={helperClass}>
-            {helper}
-          </span>
-        )}
-        {showError && (
-          <span id={errorId} className={helperClass} aria-live="assertive">
-            {errorMessage}
-          </span>
-        )}
-      </div>
-    </FormControlContext.Provider>
-  );
-};
-
-export default FormControl;

package/src/components/FormControl/index.ts

@@ -1,2 +0,0 @@
-export { default as FormControl } from "./FormControl";
-export type { FormControlProps } from "./FormControl.props";

package/src/components/FormElement/FormElement.props.ts

@@ -1,60 +0,0 @@
-import { ReactElement } from "react";
-import { TextInputTypes, FieldTypes } from "../../types";
-import { DropdownProps } from "../Dropdown/Dropdown.props";
-import { InputProps } from "../Input/Input.props";
-import { TextareaProps } from "../Textarea/Textarea.props";
-
-export interface FormElementProps {
-  /**
-   * Specify the content of your FormElement.
-   */
-  children:
-    | ReactElement<InputProps>
-    | ReactElement<DropdownProps>
-    | ReactElement<TextareaProps>;
-
-  /**
-   * Specify an optional className to be added to your FormElement component.
-   */
-  className?: string;
-
-  /**
-   * Is the field disabled?
-   */
-  disabled?: boolean;
-
-  /**
-   * The fieldset's error message
-   */
-  error: string | false;
-
-  /**
-   * The fieldset's helper text
-   */
-  helper: string;
-
-  /**
-   * The ID of the form element
-   */
-  elemid: string;
-
-  /**
-   * The fieldset's label
-   */
-  label?: string;
-
-  /**
-   * Is this element required?
-   */
-  required: boolean;
-
-  /**
-   * Does this fieldset have a tooltip?
-   */
-  tooltip?: string;
-
-  /**
-   * The type of field
-   */
-  type?: TextInputTypes | FieldTypes;
-}

package/src/components/FormElement/FormElement.tsx

@@ -1,19 +0,0 @@
-import { FC } from "react";
-import { FormElementProps } from "./FormElement.props";
-
-// TODO: What is the point of this component?
-const FormElement: FC<FormElementProps> = ({
-  children,
-  // className,
-  // error,
-  // elemid,
-  // helper,
-  // label,
-  // required,
-  // tooltip,
-  // type,
-}) => {
-  return <>{children}</>;
-};
-
-export default FormElement;

package/src/components/FormElement/index.ts

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

package/src/components/GlobalProvider/GlobalCtx.ts

@@ -1,6 +0,0 @@
-import { createContext } from "react";
-import { GlobalProviderContextProps } from "./GlobalProvider.props";
-
-export const GlobalProviderContext = createContext({
-  prefix: "ilo",
-} as GlobalProviderContextProps);

package/src/components/GlobalProvider/GlobalProvider.props.ts

@@ -1,15 +0,0 @@
-import { ReactNode } from "react";
-
-export interface GlobalProviderContextProps {
-  /**
-   * Prefix classname to use across the components.
-   */
-  prefix?: string;
-}
-
-export interface GlobalProviderProps extends GlobalProviderContextProps {
-  /**
-   * Specify the content of nested under the global provider.
-   */
-  children: ReactNode;
-}

package/src/components/GlobalProvider/GlobalProvider.tsx

@@ -1,21 +0,0 @@
-import { themeprefix } from "@ilo-org/themes/tokens/theme/base.json";
-import { FC } from "react";
-import { GlobalProviderContext } from "./GlobalCtx";
-import { GlobalProviderProps } from "./GlobalProvider.props";
-
-const GlobalProvider: FC<GlobalProviderProps> = ({
-  prefix = themeprefix.value,
-  children,
-}) => {
-  return (
-    <GlobalProviderContext.Provider
-      value={{
-        prefix,
-      }}
-    >
-      {children}
-    </GlobalProviderContext.Provider>
-  );
-};
-
-export default GlobalProvider;

package/src/components/GlobalProvider/index.ts

@@ -1,2 +0,0 @@
-export { default as GlobalProvider } from "./GlobalProvider";
-export { GlobalProviderContext } from "./GlobalCtx";

package/src/components/Heading/Heading.args.ts

@@ -1,49 +0,0 @@
-import { HeadingProps } from "./Heading.props";
-
-const text =
-  "The ILO brings together governments, employers and workers to set labour standards and promote decent work";
-
-const heading1: HeadingProps = {
-  children: text,
-  level: "h1",
-  type: "actionable",
-};
-
-const heading2: HeadingProps = {
-  children: text,
-  level: "h2",
-};
-
-const heading3: HeadingProps = {
-  children: text,
-  level: "h3",
-};
-
-const heading4: HeadingProps = {
-  children: text,
-  level: "h4",
-};
-
-const heading5: HeadingProps = {
-  children: text,
-  level: "h5",
-};
-
-const heading6: HeadingProps = {
-  children: text,
-  level: "h6",
-};
-
-/**
- * Sample prop definitions for Headings's enumerable properties (imported in stories and test)
- */
-const HeadingArgs = {
-  heading1,
-  heading2,
-  heading3,
-  heading4,
-  heading5,
-  heading6,
-};
-
-export default HeadingArgs;

package/src/components/Heading/Heading.props.ts

@@ -1,24 +0,0 @@
-import { ReactNode } from "react";
-import { HeadingLevel, LabelTypes } from "../../types";
-
-export interface HeadingProps {
-  /**
-   * Specify the content of your heading.
-   */
-  children: ReactNode;
-
-  /**
-   * Specify the heading level the heading. Default level is h3.
-   */
-  level?: HeadingLevel;
-
-  /**
-   * Specify an optional className to be added to your heading.
-   */
-  className?: string;
-
-  /**
-   * Specify an optional color of Heading.
-   */
-  type?: LabelTypes;
-}

package/src/components/Heading/Heading.tsx

@@ -1,28 +0,0 @@
-import { FC } from "react";
-import classNames from "classnames";
-import useGlobalSettings from "../../hooks/useGlobalSettings";
-import { HeadingProps } from "./Heading.props";
-
-const Heading: FC<HeadingProps> = ({
-  level = "h3",
-  children,
-  className,
-  type,
-  ...rest
-}) => {
-  const { prefix } = useGlobalSettings();
-  const UseHeading = level;
-  const baseClass = `${prefix}--${level}`;
-  const headingClasses = classNames(className, {
-    [baseClass]: true,
-    [`${baseClass}--${type}`]: type,
-  });
-
-  return (
-    <UseHeading className={headingClasses} {...rest}>
-      {children}
-    </UseHeading>
-  );
-};
-
-export default Heading;

package/src/components/Heading/index.ts

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