@ilo-org/react 0.13.0 → 0.14.1

package/src/components/ReadMore/ReadMore.tsx

@@ -1,55 +0,0 @@
-import { FC, useState } from "react";
-import classNames from "classnames";
-import useGlobalSettings from "../../hooks/useGlobalSettings";
-import { ReadMoreProps } from "./ReadMore.props";
-import { RichText } from "../RichText";
-
-const ReadMore: FC<ReadMoreProps> = ({
-  buttonlabel,
-  className,
-  excerpt,
-  fulltext,
-  openatstart,
-  ...rest
-}) => {
-  const { prefix } = useGlobalSettings();
-  const baseClass = `${prefix}--read-more`;
-  const [content, setContent] = useState(openatstart ? fulltext : excerpt);
-  const [isopen, setOpen] = useState(openatstart);
-
-  const readMoreClasses = classNames(className, {
-    [baseClass]: true,
-    [`${baseClass}--open`]: isopen,
-  });
-
-  const readmoreButtonClasses = classNames(className, {
-    [`${baseClass}--button`]: true,
-    [`${baseClass}--button--open`]: isopen,
-  });
-
-  /**
-   * On click, toggle state vars
-   */
-  const handleClick = () => {
-    const nextcontent = content === excerpt ? fulltext : excerpt;
-    setContent(nextcontent);
-    setOpen(!isopen);
-  };
-
-  return (
-    <div className={readMoreClasses}>
-      <RichText content={content} {...rest} />
-      <button
-        className={readmoreButtonClasses}
-        aria-expanded={isopen}
-        onClick={() => handleClick()}
-      >
-        {isopen
-          ? `${buttonlabel && buttonlabel.opened}`
-          : `${buttonlabel && buttonlabel.closed}`}
-      </button>
-    </div>
-  );
-};
-
-export default ReadMore;

package/src/components/ReadMore/index.ts

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

package/src/components/RichText/RichText.props.ts

@@ -1,11 +0,0 @@
-export interface RichTextProps {
-  /**
-   * Specify an optional className to be added to your RichText.
-   */
-  className?: string;
-
-  /**
-   * Specify the html content
-   */
-  content: string;
-}

package/src/components/RichText/RichText.tsx

@@ -1,22 +0,0 @@
-import { FC } from "react";
-import classNames from "classnames";
-import useGlobalSettings from "../../hooks/useGlobalSettings";
-import { RichTextProps } from "./RichText.props";
-
-const RichText: FC<RichTextProps> = ({ className, content }) => {
-  const { prefix } = useGlobalSettings();
-  const baseClass = `${prefix}--richtext`;
-
-  const richTextClasses = classNames(className, {
-    [baseClass]: true,
-  });
-
-  return (
-    <div
-      className={richTextClasses}
-      dangerouslySetInnerHTML={{ __html: content }}
-    />
-  );
-};
-
-export default RichText;

package/src/components/RichText/index.ts

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

package/src/components/RichText/richText.args.ts

@@ -1,38 +0,0 @@
-import { RichTextProps } from "./RichText.props";
-
-const richtext: RichTextProps = {
-  content: `<h2>International Labour Organization</h2>
-
-    <p>The <b>International Labour Organization</b> (<b>ILO</b>) is a <a href='https://www.un.org'>United Nations</a> agency whose mandate is to advance social and economic justice by setting international labour standards. Founded in October 1919 under the League of Nations, it is the first and oldest specialised agency of the UN. The ILO has 187 member states: 186 out of 193 UN member states plus the Cook Islands.</p>
-
-    <p>Whereas also the failure of any nation to adopt humane conditions of labour is an obstacle in the way of other nations which desire to improve the conditions in their own countries.</p>
-
-    <figure><img alt='placeholder image' class='right' src='/ilo-headquarters.jpg'><figcaption>The ILO's headquarters in Geneva, Switzerland. ©Steiner SA</figcaption></figure>
-
-    <h3>ILO Constitution</h3>
-
-    <p>The driving forces for the ILO's creation arose from security, humanitarian, political and economic considerations.</p>
-
-    <blockquote>
-      <p>The fundamental ideas that forged the ILO one hundred and three years ago still underpin the global pledge to leave no one behind.</p>
-      <cite>ILO Director-General Gilbert F. Houngbo</cite>
-    </blockquote>
-
-    Reflecting these ideas, the Preamble of the ILO Constitution states:</p>
-
-    <ol>
-      <li>Whereas universal and lasting peace can be established only if it is based upon social justice;</li>
-      <li>And whereas conditions of labour exist involving such injustice, hardship and privation to large numbers of people as to produce unrest so great that the peace and harmony of the world are imperilled; and an improvement of those conditions is urgently required;</li>
-      <li>Whereas also the failure of any nation to adopt humane conditions of labour is an obstacle in the way of other nations which desire to improve the conditions in their own countries.</li>
-    </ol>
-    `,
-};
-
-/**
- * Sample prop definitions for RichText's enumerable properties (imported in stories and tests).
- */
-const richTextArgs = {
-  richtext,
-};
-
-export default richTextArgs;

package/src/components/SearchField/SearchField.args.ts

@@ -1,73 +0,0 @@
-import { SearchFieldProps } from "./SearchField.props";
-
-const searchfield: SearchFieldProps = {
-  callback: () => {},
-  input: {
-    callback: () => {},
-    disabled: false,
-    name: "search",
-    placeholder: "Search Field",
-    type: "search",
-    value: "",
-  },
-};
-
-const searchfielderror: SearchFieldProps = {
-  callback: () => {},
-  input: {
-    callback: () => {},
-    disabled: false,
-    error: "Error message",
-    name: "search",
-    placeholder: "Search Field",
-    type: "search",
-    value: "",
-  },
-};
-
-const searchfielddisabled: SearchFieldProps = {
-  callback: () => {},
-  input: {
-    callback: () => {},
-    disabled: true,
-    name: "search",
-    placeholder: "Search Field",
-    type: "search",
-    value: "",
-  },
-};
-
-const searchfieldlabel: SearchFieldProps = {
-  callback: () => {},
-  input: {
-    label: "Search Field",
-    name: "search",
-    placeholder: "Search Field",
-    type: "search",
-    value: "",
-  },
-};
-
-const searchfieldhelper: SearchFieldProps = {
-  callback: () => {},
-  input: {
-    helper: "Search Field Helper text",
-    name: "search",
-    placeholder: "Search Field",
-    type: "search",
-    value: "",
-  },
-};
-
-/**
- * Sample prop definitions for SearchField's enumerable properties (imported in stories and test)
- */
-const SearchFieldArgs = {
-  searchfield,
-  searchfielderror,
-  searchfielddisabled,
-  searchfieldlabel,
-  searchfieldhelper,
-};
-
-export default SearchFieldArgs;

package/src/components/SearchField/SearchField.props.ts

@@ -1,35 +0,0 @@
-import { InputProps } from "../Input/Input.props";
-
-export interface ButtonProps {
-  /**
-   * The button's label.
-   */
-  label: Required<string>;
-}
-
-export interface SearchFieldProps {
-  /**
-   * Specify the action attribute for the search form
-   */
-  action?: string;
-
-  /**
-   * Specify the properties of the submit button
-   */
-  button?: Required<ButtonProps>;
-
-  /**
-   * The search field submit button's click function.
-   */
-  callback?: (e: React.MouseEvent<HTMLInputElement, MouseEvent>) => any;
-
-  /**
-   * Specify an optional className to be added to your Button.
-   */
-  className?: string;
-
-  /**
-   * Specify the properties of the search field input
-   */
-  input?: InputProps;
-}

package/src/components/SearchField/SearchField.tsx

@@ -1,83 +0,0 @@
-import { FC, useState } from "react";
-import classNames from "classnames";
-import useGlobalSettings from "../../hooks/useGlobalSettings";
-import { SearchFieldProps } from "./SearchField.props";
-import { Input } from "../Input";
-import { Icon } from "../Icon";
-
-const SearchField: FC<SearchFieldProps> = ({
-  action,
-  callback,
-  className,
-  input,
-}) => {
-  const [searchValue, setSearchValue] = useState("");
-
-  const { prefix } = useGlobalSettings();
-  const baseClass = `${prefix}--searchfield`;
-  const buttonClass = `${baseClass}--button`;
-  const clearButtonClass = `${baseClass}--clear-button ${
-    searchValue.trim() !== "" && "show"
-  }`;
-  const fieldSetClass = `${prefix}--fieldset`;
-
-  const SearchFieldClasses = classNames(className, {
-    [baseClass]: true,
-    [`haslabel`]: input?.label,
-  });
-
-  const handleClick: React.MouseEventHandler<HTMLInputElement> = (e) => {
-    if (callback) {
-      callback(e);
-    }
-  };
-
-  // handle click for clear button in search
-  const handleClearButtonClick: React.MouseEventHandler<
-    HTMLInputElement
-  > = () => {
-    setSearchValue("");
-  };
-
-  // Update search value on input
-  const onKeyPress: React.ChangeEventHandler<HTMLInputElement> = (e) => {
-    setSearchValue(e.target.value);
-  };
-
-  const inputHasType = !!input?.type;
-
-  if (!inputHasType) {
-    throw new Error("SearchField: Input must have type prop");
-  }
-
-  return inputHasType ? (
-    <form className={SearchFieldClasses} action={action}>
-      <div className={fieldSetClass}>
-        <Input
-          id={input?.id}
-          name={input?.name}
-          disabled={input?.disabled}
-          callback={onKeyPress}
-          error={input?.error}
-          helper={input?.helper}
-          label={input?.label}
-          placeholder={input?.placeholder}
-          type={input?.type}
-          value={searchValue}
-          className={`${prefix}--input`}
-        />
-        <span onClick={handleClearButtonClick} className={clearButtonClass}>
-          <Icon name="close" hidden={true} />
-        </span>
-      </div>
-      <input
-        className={buttonClass}
-        disabled={input?.disabled}
-        type="submit"
-        onClick={handleClick}
-      />
-    </form>
-  ) : null;
-};
-
-export default SearchField;

package/src/components/SearchField/index.ts

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

package/src/components/SocialMedia/SocialMedia.args.ts

@@ -1,54 +0,0 @@
-import { SocialMediaProps } from "./SocialMedia.props";
-
-export const defaultArgs: SocialMediaProps = {
-  headline: "Follow us on social media",
-  theme: "light",
-  justify: "start",
-  icons: [
-    {
-      icon: "facebook",
-      url: "https://www.facebook.com/ilo.org",
-      label: "Facebook",
-    },
-    {
-      icon: "twitter",
-      url: "https://twitter.com/#!/ilo",
-      label: "Twitter",
-    },
-    {
-      icon: "instagram",
-      url: "https://www.instagram.com/ilo.org/",
-      label: "Instagram",
-    },
-    {
-      icon: "linkedin",
-      url: "https://www.linkedin.com/company/international-labour-organization-ilo",
-      label: "LinkedIn",
-    },
-    {
-      icon: "youtube",
-      url: "https://www.youtube.com/channel/UCQsVmhSa4X-G3lHlUtejzLA",
-      label: "YouTube",
-    },
-    {
-      icon: "tiktok",
-      url: "https://www.tiktok.com/@ilo",
-      label: "TikTok",
-    },
-    {
-      icon: "flickr",
-      url: "https://www.flickr.com/photos/ilopictures/albums",
-      label: "TikTok",
-    },
-  ],
-};
-
-export const darkArgs: SocialMediaProps = {
-  ...defaultArgs,
-  theme: "dark",
-};
-
-export const centredArgs: SocialMediaProps = {
-  ...defaultArgs,
-  justify: "center",
-};

package/src/components/SocialMedia/SocialMedia.props.ts

@@ -1,45 +0,0 @@
-import { SocialTypes } from "../../types";
-
-export interface SocialMediaIcons {
-  /**
-   * The name of the icon to display
-   */
-  icon: SocialTypes;
-
-  /**
-   * The url to link to
-   */
-  url: string;
-
-  /**
-   * The alt text of the link
-   */
-  label: string;
-}
-
-export interface SocialMediaProps {
-  /**
-   * An optional headline to display above the icons
-   */
-  headline?: string;
-
-  /**
-   * Specify an optional className to be added to your SocialMedia.
-   */
-  className?: string;
-
-  /**
-   * Specify the theme of the SocialMedia.
-   */
-  theme?: "light" | "dark";
-
-  /**
-   * The justification of the icons
-   */
-  justify?: "start" | "center";
-
-  /**
-   * Specify the icons to display.
-   */
-  icons: SocialMediaIcons[];
-}

package/src/components/SocialMedia/SocialMedia.tsx

@@ -1,46 +0,0 @@
-import classnames from "classnames";
-import { useGlobalSettings } from "../../hooks";
-import { SocialMediaProps } from "./SocialMedia.props";
-
-const SocialMedia: React.FC<SocialMediaProps> = ({
-  className,
-  theme = "light",
-  justify = "start",
-  headline,
-  icons,
-}) => {
-  const { prefix } = useGlobalSettings();
-
-  // Classes to be applied to the outer element
-  const baseClass = `${prefix}--social-media`;
-  const themeClass = `${baseClass}__theme__${theme}`;
-  const justifyClass = `${baseClass}__justify__${justify}`;
-  const classes = classnames(baseClass, themeClass, justifyClass, className);
-
-  // Classes to be applied to inner elements
-  const headlineClass = `${baseClass}--headline`;
-  const listClass = `${baseClass}--list`;
-  const listItemClass = `${listClass}--item`;
-  const iconClass = `${listItemClass}--icon`;
-
-  return (
-    <div className={classes}>
-      {headline && <h5 className={headlineClass}>{headline}</h5>}
-      <ul className={listClass}>
-        {icons.map((item) => (
-          <li className={listItemClass}>
-            <a
-              title={item.label}
-              className={classnames(iconClass, `${iconClass}__${item.icon}`)}
-              href={item.url}
-            >
-              {item.label}
-            </a>
-          </li>
-        ))}
-      </ul>
-    </div>
-  );
-};
-
-export default SocialMedia;

package/src/components/SocialMedia/index.ts

@@ -1,3 +0,0 @@
-export { default as SocialMedia } from "./SocialMedia";
-export type { SocialMediaProps } from "./SocialMedia.props";
-export { defaultArgs } from "./SocialMedia.args";

package/src/components/TableOfContents/TableOfContents.args.ts

@@ -1,35 +0,0 @@
-import { TableOfContentsProps } from "./TableOfContents.props";
-
-const toc: TableOfContentsProps = {
-  items: [
-    {
-      href: "#example",
-      label: "Item One",
-    },
-    {
-      href: "#example",
-      label: "Item Two",
-    },
-    {
-      href: "#example",
-      label: "Item Three",
-    },
-    {
-      href: "#example",
-      label: "Item Four",
-    },
-    {
-      href: "#example",
-      label: "Item Five",
-    },
-  ],
-};
-
-/**
- * Sample prop definitions for Lists's enumerable properties (imported in stories and test)
- */
-const TableOfContentsArgs = {
-  toc,
-};
-
-export default TableOfContentsArgs;

package/src/components/TableOfContents/TableOfContents.props.ts

@@ -1,23 +0,0 @@
-export interface AnchorLink {
-  /**
-   * Specify the label for the anchor link
-   */
-  label?: Required<string>;
-
-  /**
-   * Specify the href for the anchor link
-   */
-  href?: Required<string>;
-}
-
-export interface TableOfContentsProps {
-  /**
-   * Specify an optional className to be added to your accordion.
-   */
-  className?: string;
-
-  /**
-   * Specify the items in the table of contents
-   */
-  items?: Required<Array<AnchorLink>>;
-}

package/src/components/TableOfContents/TableOfContents.tsx

@@ -1,32 +0,0 @@
-import { FC } from "react";
-import classNames from "classnames";
-import useGlobalSettings from "../../hooks/useGlobalSettings";
-import { TableOfContentsProps } from "./TableOfContents.props";
-
-const TableOfContents: FC<TableOfContentsProps> = ({ className, items }) => {
-  const { prefix } = useGlobalSettings();
-  const baseClass = `${prefix}--table-of-contents`;
-
-  const TableOfContentsClasses = classNames(className, {
-    [baseClass]: true,
-  });
-
-  return (
-    <nav className={TableOfContentsClasses}>
-      <ul className={`${baseClass}--list`}>
-        {items &&
-          items.map((item: any, index: any) => {
-            return (
-              <li className={`${baseClass}--list--item`} key={index}>
-                <a className={`${baseClass}--link`} href={item.href}>
-                  {item.label}
-                </a>
-              </li>
-            );
-          })}
-      </ul>
-    </nav>
-  );
-};
-
-export default TableOfContents;

package/src/components/TableOfContents/index.ts

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