@ilo-org/react 0.3.0 → 0.4.0

package/src/components/Card/CardGroup.props.ts

@@ -0,0 +1,19 @@
+import { CardProps } from "../Card/Card.props";
+import { LinkProps } from "../LinkList/LinkList.props";
+
+export interface CardGroupProps {
+  /**
+   * An array of card objects
+   */
+  cards?: Required<CardProps>[];
+
+  /**
+   * Number of cards in the group
+   */
+  cardcount: Required<string>;
+
+  /**
+   * A Button to display after all the cards in the group
+   */
+  cta?: LinkProps;
+}

package/src/components/Card/CardGroup.tsx

@@ -0,0 +1,55 @@
+import { FC } from "react";
+import classnames from "classnames";
+import useGlobalSettings from "../../hooks/useGlobalSettings";
+import { CardGroupProps } from "./CardGroup.props";
+import { Card } from "../Card";
+
+const CardGroup: FC<CardGroupProps> = ({ cards, cardcount, cta }) => {
+  const { prefix } = useGlobalSettings();
+
+  const baseClass = `${prefix}--cardgroup`;
+  const cardGroupClasses = classnames(baseClass, `${baseClass}--${cardcount}`);
+
+  return (
+    <div className={cardGroupClasses}>
+      <div className={`${baseClass}--inner`}>
+        {cards &&
+          cards.map((card) => (
+            <Card
+              title={card.title}
+              image={card.image}
+              intro={card.intro}
+              eyebrow={card.eyebrow}
+              date={card.date}
+              dataset={card.dataset}
+              link={card.link}
+              profile={card.profile}
+              cta={card.cta}
+              source={card.source}
+              listitems={card.listitems}
+              linklist={card.linklist}
+              color={card.color}
+              theme={card.theme}
+              cornercut={card.cornercut}
+              alignment={card.alignment}
+              variant={card.variant}
+              size={card.size}
+            />
+          ))}
+
+        {cta && (
+          <div className={`${baseClass}--button-wrap`}>
+            <a
+              className={`${prefix}--button ${prefix}--button--medium ${prefix}--button--secondary`}
+              href={cta.url}
+            >
+              <span className="button__label">{cta.label}</span>
+            </a>
+          </div>
+        )}
+      </div>
+    </div>
+  );
+};
+
+export default CardGroup;

package/src/components/Card/index.ts

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

package/src/components/LocalNav/LocalNav.args.ts

@@ -3,8 +3,12 @@ import ilo_logo_white from "@ilo-org/brand-assets/logo_en_horizontal_white.svg";
 
 const basic: LocalNavProps = {
   background: "#960A55",
-  logo: ilo_logo_white,
-  siteurl: "https://www.ilo.org/",
+  logo: {
+    src: ilo_logo_white,
+    alt: "ILO Voices Logo",
+    subbrand: "Voices",
+    theme: "dark",
+  },
   primarynav: {
     navlabel: "Primary Nav Menu",
     mobilecloselabel: "Close",
@@ -25,10 +29,6 @@ const basic: LocalNavProps = {
         label: "Menu Item 4",
         url: "https://www.ilo.org",
       },
-      {
-        label: "Menu Item 5",
-        url: "https://www.ilo.org",
-      },
     ],
   },
   mainlink: {

package/src/components/LocalNav/LocalNav.props.ts

@@ -1,4 +1,5 @@
 import { LinkProps, ContextMenuProps } from "../ContextMenu/ContextMenu.props";
+import { LogoProps } from "../Logo/Logo.props";
 
 export interface LocalNavProps {
   /**
@@ -7,19 +8,14 @@ export interface LocalNavProps {
   background?: string;
 
   /**
-   * Props for the logo of the LocalNav
+   * Props for the Logo component of the LocalNav
    */
-  logo?: Required<string>;
-
-  /**
-   * Props for the home url of the LocalNav
-   */
-  siteurl?: Required<string>;
+  logo: LogoProps;
 
   /**
    * Specify the primary items for the LocalNav
    */
-  primarynav?: Required<PrimaryNavProps>;
+  primarynav?: PrimaryNavProps;
 
   /**
    * Specify the main link for the LocalNav

package/src/components/LocalNav/LocalNav.tsx

@@ -4,11 +4,13 @@ import { ContextMenu } from "../ContextMenu";
 import { LocalNavProps } from "./LocalNav.props";
 import { brand } from "@ilo-org/themes/tokens/brand/base.json";
 import classnames from "classnames";
+import { Logo } from "../Logo";
+
+const DEFAULT_LOGO_SIZE = 280;
 
 const LocalNav: FC<LocalNavProps> = ({
   background,
   logo,
-  siteurl,
   primarynav,
   mainlink,
   menucloselabel,
@@ -43,13 +45,15 @@ const LocalNav: FC<LocalNavProps> = ({
       >
         <nav className={`${prefix}--nav--local`}>
           <div className={`${prefix}--nav--local--logo-wrapper`}>
-            <a href={siteurl} className={`${prefix}--nav--local--logo-link`}>
-              <img
-                src={logo}
-                alt="ILO Logo"
-                className={`${prefix}--nav--local--logo`}
-              />
-            </a>
+            <Logo
+              url={logo.url}
+              src={logo.src}
+              alt={logo.alt}
+              className={`${prefix}--nav--local--logo`}
+              subbrand={logo.subbrand}
+              theme={logo.theme}
+              size={logo.size || DEFAULT_LOGO_SIZE}
+            />
           </div>
           <ul className={`${prefix}--nav--local--set`}>
             {primarynav?.items &&
@@ -90,13 +94,15 @@ const LocalNav: FC<LocalNavProps> = ({
           <div className={`${baseClass}--inner`}>
             <div className={`${prefix}--mobile--nav`}>
               <div className={`${prefix}--mobile--nav--logo`}>
-                <a href={siteurl} className={`${baseClass}--logo-link`}>
-                  <img
-                    className={`${baseClass}--logo`}
-                    src={logo}
-                    alt="ILO Logo"
-                  />
-                </a>
+                <Logo
+                  url={logo.url}
+                  src={logo.src}
+                  alt={logo.alt}
+                  className={`${prefix}--nav--local--logo`}
+                  subbrand={logo.subbrand}
+                  theme={logo.theme}
+                  size={logo.size || DEFAULT_LOGO_SIZE}
+                />
                 <button
                   className={`${baseClass}--menu--close`}
                   onClick={handleMenuToggle}

package/src/components/Logo/Logo.args.ts

@@ -0,0 +1,45 @@
+import { LogoProps } from "./Logo.props";
+import en_blue from "@ilo-org/brand-assets/logo_en_horizontal_blue.svg";
+import en_white from "@ilo-org/brand-assets/logo_en_horizontal_white.svg";
+
+export const basic: LogoProps = {
+  src: en_blue,
+  url: "https://www.ilo.org",
+  alt: "International Labour Organization",
+  size: 400,
+  target: "_blank",
+};
+
+export const withTheme: LogoProps = {
+  ...basic,
+  theme: "light",
+  src: {
+    light: en_blue,
+    dark: en_white,
+  },
+};
+
+export const withSubBrand: LogoProps = {
+  ...withTheme,
+  subbrand: "Voices",
+  url: "https://voices.ilo.org",
+};
+
+export const withDarkTheme: LogoProps = {
+  ...withSubBrand,
+  subbrand: "Voices",
+  theme: "dark",
+  url: "https://live.ilo.org",
+};
+
+export const withLongSubbrand: LogoProps = {
+  ...withTheme,
+  subbrand: "Digital Design System",
+};
+
+export const fluidWidth: LogoProps = {
+  ...withDarkTheme,
+  url: "https://live.ilo.org",
+  size: "fluid",
+  subbrand: "Live",
+};

package/src/components/Logo/Logo.props.ts

@@ -0,0 +1,67 @@
+type LogoSrc =
+  | string
+  | {
+      /**
+       * The url of the logo to use with light theme
+       */
+      light: string;
+
+      /**
+       * The url of the logo to use with dark theme
+       */
+      dark: string;
+    };
+
+export interface LogoProps {
+  /**
+   * The location of the image file
+   */
+  src: LogoSrc;
+
+  /**
+   * Alt text for the logo
+   */
+  alt: string;
+
+  /**
+   * The name of the sub-brand if there is one
+   */
+  subbrand?: string;
+
+  /**
+   * The width of the logo or 'fluid' width
+   */
+  size?: number | "fluid";
+
+  /**
+   * Styles to be applied to the outermost element
+   */
+  style?: React.CSSProperties;
+
+  /**
+   * Optional className to be passed to the outermost element of the component
+   */
+  className?: string;
+
+  /**
+   * Optional destination if the logo is a link
+   */
+  url?: string;
+
+  /**
+   * Optional target if the logo is a link
+   */
+  target?: "_blank" | "_self" | "_parent" | "_top";
+
+  /**
+   * Theme of the logo component
+   */
+  theme?: "light" | "dark";
+}
+
+export interface InnerLogoProps extends LogoProps {
+  /**
+   * The base class of the logo component
+   */
+  baseClass: string;
+}

package/src/components/Logo/Logo.tsx

@@ -0,0 +1,247 @@
+import React, { useEffect, 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);
+
+  // 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);
+
+  // Initial height of the image when it's loaded
+  const initialImageHeight = useRef<null | number>(null);
+
+  // 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
+  useEffect(() => {
+    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
+  useEffect(() => {
+    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
+  useEffect(() => {
+    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

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

package/src/components/index.ts

@@ -45,3 +45,4 @@ export { TableOfContents } from "./TableOfContents";
 export { Footer } from "./Footer";
 export { LocalNav } from "./LocalNav";
 export { Navigation } from "./Navigation";
+export { Card, CardGroup } from "./Card";

package/src/types/index.ts

@@ -33,6 +33,7 @@ export type InputTypes =
   | "tel"
   | "text"
   | "url";
+export type Language = "en" | "fr" | "es";
 export type LabelTypes = "default" | "actionable" | "light";
 export type LinkTypes = "light" | "dark" | "footer" | "button";
 export type LinkListThemes = "light" | "dark";
@@ -49,3 +50,16 @@ export type PositionTypes = "top" | "bottom" | "left" | "right";
 export type SizeTypes = "small" | "medium" | "large";
 export type TagTypes = "anchor" | "display" | "button";
 export type SocialTypes = "instagram" | "facebook" | "twitter" | "youtube";
+export type CardColor = "turquoise" | "green" | "yellow" | "blue";
+export type CardSize = "wide" | "standard" | "narrow";
+export type CardCornerType = "cornercut" | "corner";
+export type CardAlignment = "left" | "right";
+export type CardTypes =
+  | "stat"
+  | "multilink"
+  | "graphic"
+  | "graphicpromo"
+  | "feature"
+  | "detail"
+  | "factlist"
+  | "data";