@ilo-org/react 0.14.0 → 0.15.0

package/src/components/Logo/Logo.tsx

@@ -1,247 +0,0 @@
-import React, { useEffect, useLayoutEffect, useRef, useState } from "react";
-import { useGlobalSettings } from "../../hooks";
-import { InnerLogoProps, LogoProps } from "./Logo.props";
-import classnames from "classnames";
-
-const isOverflown = ({
-  clientHeight,
-  clientWidth,
-  scrollHeight,
-  scrollWidth,
-}: HTMLElement) => scrollHeight > clientHeight || scrollWidth > clientWidth;
-
-const getFullFontSize = (
-  container: HTMLElement,
-  { maxSize = 600, startingHeight = 9, step = 0.5 }
-) => {
-  let i = startingHeight;
-  let overflow = false;
-
-  while (!overflow && i < maxSize) {
-    container.style.fontSize = `${i}px`;
-    container.style.lineHeight = `${i}px`;
-
-    overflow = isOverflown(container);
-    if (!overflow) {
-      i = i + step;
-    }
-  }
-
-  // Reset styles to the way they were
-  container.style.fontSize = "";
-  container.style.lineHeight = "";
-
-  // Return the ideal font size
-  return i - step;
-};
-
-const BaseLogo: React.FC<InnerLogoProps> = ({
-  baseClass,
-  className,
-  subbrand,
-  alt,
-  src,
-  style: userStyles,
-  size = "fluid",
-  theme = "light",
-  ...props
-}) => {
-  // The logo image element
-  const imageRef = useRef<HTMLImageElement>(null);
-
-  // The lockup container
-  const lockupRef = useRef<HTMLDivElement>(null);
-
-  // The lockup text
-  const lockupTextRef = useRef<HTMLSpanElement>(null);
-
-  // Initial height of the image when it's loaded
-  const initialImageHeight = useRef<null | number>(null);
-
-  // Has the image loaded or not
-  const [imageLoaded, setImageLoaded] = useState(false);
-
-  // Dynamic height of the image
-  const [imageHeight, setImageHeight] = useState(0);
-
-  // Ratio of the font size to the height of the logo image
-  const [fontSizeRatio, setfontSizeRatio] = useState<number>(0);
-
-  // Is the logo visible? Default to true if not a subbrand
-  const [isLogoVisible, setIsLogoVisible] = useState(!subbrand);
-
-  // Resize observer gets the initial height of the image when
-  // it loads and updates the height when it changes in state
-  const observer = useRef(
-    new ResizeObserver((entries) => {
-      const { height } = entries[0].contentRect;
-      if (!initialImageHeight.current) {
-        initialImageHeight.current = height;
-      }
-      setImageHeight(height);
-    })
-  );
-
-  // Make the logo visible for subrand when everything is ready
-  useEffect(() => {
-    if (subbrand && imageLoaded && fontSizeRatio) {
-      setIsLogoVisible(true);
-    }
-  }, [imageLoaded, fontSizeRatio, subbrand]);
-
-  // Set up the Resize observer to watch the image
-  useLayoutEffect(() => {
-    if (imageLoaded && lockupRef.current && imageRef.current) {
-      const imageEl = imageRef.current;
-      observer.current.observe(imageEl);
-      return () => observer.current.unobserve(imageEl);
-    }
-  }, [imageLoaded]);
-
-  // Gets the font size necessary for the lockup text to fill the
-  // the lockup container as much as possible without overflowing.
-  // Then gets the ratio of full font size to image height which will
-  // be used to calculate the font size if the image gets resized
-  useLayoutEffect(() => {
-    setFontSize();
-  }, [imageLoaded, initialImageHeight.current]);
-
-  // Adjust the font size if for some weird reason the subbrand changes
-  // This is mostly just to illustrate how the component works on Storybook
-  useLayoutEffect(() => {
-    setFontSize();
-  }, [subbrand]);
-
-  function setFontSize() {
-    if (
-      lockupRef.current &&
-      lockupTextRef.current &&
-      initialImageHeight.current
-    ) {
-      const fullFontSize = getFullFontSize(lockupRef.current, {
-        maxSize: initialImageHeight.current,
-      });
-      const ratio = fullFontSize / initialImageHeight.current;
-      setfontSizeRatio(ratio);
-    }
-  }
-
-  // Has the image loaded or not
-  function handleImageLoaded() {
-    setImageLoaded(true);
-  }
-
-  // Conditions for different CSS classes
-  const hasSubbrand = !!subbrand;
-  const hasFluidWidth = size === "fluid";
-  const hasFixedWidth = !hasFluidWidth && typeof size === "number";
-
-  // Classes for the outer figure container
-  const subBrandClass = `${baseClass}--sub-brand`;
-  const fluidWidthClass = `${baseClass}--size--fluid`;
-  const visibilityHidden = `${baseClass}--visibility--hidden`;
-
-  // Outer figure classes
-  const classNames = classnames(
-    baseClass,
-    className,
-    `${baseClass}--theme--${theme}`,
-    {
-      [visibilityHidden]: !isLogoVisible,
-      [fluidWidthClass]: hasFluidWidth,
-      [subBrandClass]: hasSubbrand,
-    }
-  );
-
-  // Classes for the image element
-  const noSubBrandImageClass = `${baseClass}--image`;
-  const subBrandImageClass = `${subBrandClass}--image`;
-
-  // Set inline CSS including variables on the outer figure element
-  const getStyle = (): React.CSSProperties => {
-    const conditionalStyles: any = {};
-    // Add CSS vars if this is a sub-brand
-    if (hasSubbrand) {
-      conditionalStyles["--logo-image-height"] = `${imageHeight}px`;
-      conditionalStyles["--logo-font-size"] = `${
-        fontSizeRatio * imageHeight
-      }px`;
-    }
-    // Add fixed width if it has fixed width
-    if (hasFixedWidth) {
-      conditionalStyles.width = `${size}px`;
-    }
-    // User styles may be overriden
-    return { userStyles, ...conditionalStyles };
-  };
-
-  const getImageSrc = () => {
-    if (typeof src === "string") {
-      return src;
-    }
-    return src[theme];
-  };
-
-  return (
-    <figure className={classNames} style={getStyle()}>
-      <img
-        ref={imageRef}
-        alt={alt}
-        src={getImageSrc()}
-        className={classnames({
-          [subBrandImageClass]: hasSubbrand,
-          [noSubBrandImageClass]: !hasSubbrand,
-        })}
-        onLoad={handleImageLoaded}
-        {...props}
-      />
-      {hasSubbrand && (
-        <div ref={lockupRef} className={`${subBrandClass}--lock-up`}>
-          <span className={`${subBrandClass}--lock-up--separator`} />
-          <span ref={lockupTextRef}>{subbrand}</span>
-        </div>
-      )}
-    </figure>
-  );
-};
-
-const Logo: React.FC<LogoProps> = ({
-  className,
-  url,
-  target,
-  style,
-  size,
-  ...props
-}) => {
-  const { prefix } = useGlobalSettings();
-  const baseClass = `${prefix}--logo`;
-  const linkClass = `${baseClass}--link`;
-  const fluidClass = `${baseClass}--size--fluid`;
-
-  if (url) {
-    return (
-      <a
-        href={url}
-        target={target}
-        className={classnames(linkClass, className, {
-          [fluidClass]: size === "fluid",
-        })}
-        style={style}
-      >
-        <BaseLogo {...props} baseClass={baseClass} size={size} />
-      </a>
-    );
-  }
-
-  return (
-    <BaseLogo
-      baseClass={baseClass}
-      className={className}
-      style={style}
-      size={size}
-      {...props}
-    />
-  );
-};
-
-export default Logo;

package/src/components/Logo/index.ts

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

package/src/components/LogoGrid/LogoGrid.args.ts

@@ -1,50 +0,0 @@
-import { LogoGridProps } from "./LogoGrid.props";
-import { logo_en_horizontal_blue_svg } from "@ilo-org/brand-assets";
-
-export const defaultLogoGrid: LogoGridProps = {
-  logos: [
-    {
-      label: "International Labour Organization",
-      src: logo_en_horizontal_blue_svg,
-      url: "https://www.ilo.org/",
-    },
-    {
-      label: "Food and Agriculture Organization",
-      src: "/fao-logo.svg",
-      url: "https://www.fao.org",
-    },
-    {
-      label: "World Health Organization",
-      src: "/who-logo.svg",
-      url: "https://www.who.int/",
-    },
-    {
-      label: "World Food Programme",
-      src: "/wfp-logo.svg",
-      url: "https://www.wfp.org/",
-    },
-
-    {
-      label: "UNICEF",
-      src: "/unicef-logo.png",
-      url: "https://www.unicef.org/",
-    },
-    {
-      label: "UN Refugees",
-      src: "/unhcr-logo.svg",
-      url: "https://www.unhcr.org/",
-    },
-  ],
-};
-
-export const darkLogoGrid: LogoGridProps = {
-  ...defaultLogoGrid,
-  theme: "dark",
-};
-
-export const noLinksGrid: LogoGridProps = {
-  logos: defaultLogoGrid.logos.map(({ label, src }) => ({
-    label,
-    src,
-  })),
-};

package/src/components/LogoGrid/LogoGrid.props.ts

@@ -1,28 +0,0 @@
-export interface LogoGridItemProps {
-  /**
-   * The label of the logo
-   */
-  label: string;
-
-  /**
-   * The image src of the logo
-   */
-  src: string | URL;
-
-  /**
-   * The link of the logo
-   */
-  url?: string;
-}
-
-export interface LogoGridProps {
-  /**
-   * The logos to display
-   */
-  logos: LogoGridItemProps[];
-
-  /**
-   * The theme of the logo grid
-   */
-  theme?: "dark" | "light";
-}

package/src/components/LogoGrid/LogoGrid.tsx

@@ -1,53 +0,0 @@
-import React from "react";
-import classnames from "classnames";
-import { useGlobalSettings } from "../../hooks";
-import { LogoGridProps, LogoGridItemProps } from "./LogoGrid.props";
-
-const LogoGridItem: React.FC<LogoGridItemProps> = ({ url, label, src }) => {
-  const { prefix } = useGlobalSettings();
-
-  const itemClass = `${prefix}--logo-grid--item`;
-  const itemLinkClass = `${prefix}--logo-grid--link`;
-
-  const gridItemClass = classnames(itemClass, {
-    [itemLinkClass]: !!url,
-  });
-
-  if (!url) {
-    return (
-      <div className={gridItemClass}>
-        <img alt={label} src={src as string} />
-      </div>
-    );
-  }
-  return (
-    <a
-      className={gridItemClass}
-      href={url}
-      target="_blank"
-      rel="noopener noreferrer"
-    >
-      <img alt={label} src={src as string} />
-    </a>
-  );
-};
-
-const LogoGrid: React.FC<LogoGridProps> = ({ logos, theme = "light" }) => {
-  const { prefix } = useGlobalSettings();
-
-  const baseClass = `${prefix}--logo-grid`;
-  const themeClass = `${baseClass}__theme__${theme}`;
-  const logoGridClass = classnames(baseClass, themeClass);
-
-  return (
-    <div className={logoGridClass}>
-      <div className={`${baseClass}--logos`}>
-        {logos.map((logo) => (
-          <LogoGridItem {...logo} />
-        ))}
-      </div>
-    </div>
-  );
-};
-
-export default LogoGrid;

package/src/components/LogoGrid/index.ts

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

package/src/components/Navigation/Navigation.args.ts

@@ -1,113 +0,0 @@
-import { NavigationProps } from "./Navigation.props";
-import ilo_logo_white from "@ilo-org/brand-assets/logo_en_horizontal_white.svg";
-import ilo_logo_blue from "@ilo-org/brand-assets/logo_en_horizontal_blue.svg";
-
-const basic: NavigationProps = {
-  logo: ilo_logo_white,
-  mobilelogo: ilo_logo_blue,
-  siteurl: "https://www.ilo.org/",
-  tagline: {
-    tag: "Advancing social justice, promoting decent work",
-    small: "ILO is a specialized agency of the United Nations",
-  },
-  primarynav: {
-    navlabel: "Primary Navigation",
-    mobilecloselabel: "Close",
-    items: [
-      {
-        label: "Topics",
-        url: "https://www.ilo.org",
-      },
-      {
-        label: "Countries",
-        url: "https://www.ilo.org",
-      },
-      {
-        label: "Standards",
-        url: "https://www.ilo.org",
-      },
-      {
-        label: "Statistics",
-        url: "https://www.ilo.org",
-      },
-      {
-        label: "About",
-        url: "https://www.ilo.org",
-      },
-    ],
-  },
-  subnav: {
-    navlabel: "Secondary Navigation",
-    buttonlabel: "More",
-    mobilecloselabel: "Close",
-    mobilebacklabel: "Menu Home",
-    items: [
-      {
-        label: "News",
-        url: "https://www.ilo.org",
-      },
-      {
-        label: "Meeting & Events",
-        url: "https://www.ilo.org",
-      },
-      {
-        label: "Publications",
-        url: "https://www.ilo.org",
-      },
-      {
-        label: "Projects",
-        url: "https://www.ilo.org",
-      },
-      {
-        label: "Partners",
-        url: "https://www.ilo.org",
-      },
-      {
-        label: "Industries & Sectors",
-        url: "https://www.ilo.org",
-      },
-      {
-        label: "About the ILO",
-        url: "https://www.ilo.org",
-      },
-    ],
-  },
-  languagelabel: "English",
-  menulabel: "Menu",
-  menucloselabel: "Close",
-  languagecontextmenu: {
-    links: [
-      {
-        label: "Français",
-        url: "https://www.ilo.org",
-      },
-      {
-        label: "Español",
-        url: "https://www.ilo.org",
-      },
-      {
-        label: "中文",
-        url: "https://www.ilo.org",
-      },
-      {
-        label: "Русский",
-        url: "https://www.ilo.org",
-      },
-    ],
-  },
-  searchlabel: "Search",
-  searchfield: {
-    action: "https://www.ilo.org",
-    input: {
-      label: "",
-      helper: "",
-      name: "text",
-      placeholder: "Search Field",
-      type: "text",
-    },
-  },
-};
-
-const NavigationArgs = { basic };
-
-export default NavigationArgs;

package/src/components/Navigation/Navigation.props.ts

@@ -1,120 +0,0 @@
-import { LinkProps, ContextMenuProps } from "../ContextMenu/ContextMenu.props";
-import { SearchFieldProps } from "../SearchField/SearchField.props";
-
-export interface NavigationProps {
-  /**
-   * Props for the logo of the Navigation
-   */
-  logo?: Required<string>;
-
-  /**
-   * Props for the mobile logo of the Navigation
-   */
-  mobilelogo?: Required<string>;
-
-  /**
-   * Props for the home url of the Navigation
-   */
-  siteurl?: Required<string>;
-
-  /**
-   * Specify the tagline for the Navigation
-   */
-  tagline?: Required<TaglineProps>;
-
-  /**
-   * Specify the primary items for the Navigation
-   */
-  primarynav?: Required<PrimaryNavProps>;
-
-  /**
-   * Specify the secondary items for the Navigation
-   */
-  subnav?: Required<SubNavProps>;
-
-  /**
-   * Specify the tagline for the Navigation
-   */
-  searchlabel?: string;
-
-  /**
-   * Specify the searchfield props for the Navigation
-   */
-  searchfield?: SearchFieldProps;
-
-  /**
-   * Specify the menu label for the Navigation
-   */
-  menulabel?: string;
-
-  /**
-   * Specify the menu close label for the Navigation
-   */
-  menucloselabel?: string;
-
-  /**
-   * Specify the language label for the Navigation
-   */
-  languagelabel?: string;
-
-  /**
-   * Specify the language context menu for the Navigation
-   */
-  languagecontextmenu?: ContextMenuProps;
-}
-
-interface PrimaryNavProps {
-  /**
-   * Specify the label for Navigation
-   */
-  navlabel?: Required<string>;
-
-  /**
-   * Specify the close label for mobile Navigation
-   */
-  mobilecloselabel?: Required<string>;
-
-  /**
-   * Specify the links
-   */
-  items?: Required<Array<LinkProps>>;
-}
-
-interface SubNavProps {
-  /**
-   * Specify the label for sub Navigation
-   */
-  navlabel?: Required<string>;
-
-  /**
-   * Specify the button label for sub Navigation
-   */
-  buttonlabel?: Required<string>;
-
-  /**
-   * Specify the close label for mobile sub Navigation
-   */
-  mobilecloselabel?: Required<string>;
-
-  /**
-   * Specify the back label for mobile sub Navigation
-   */
-  mobilebacklabel?: Required<string>;
-
-  /**
-   * Specify the subnav links
-   */
-  items?: Required<Array<LinkProps>>;
-}
-
-interface TaglineProps {
-  /**
-   * Specify the main tagline text
-   */
-  tag?: Required<string>;
-
-  /**
-   * Specify the small tagline text
-   */
-  small?: Required<string>;
-}