@ilo-org/react 0.14.0 → 0.15.0

package/src/components/Hero/Hero.args.ts

@@ -1,136 +0,0 @@
-import { HeroProps } from "./Hero.props";
-import { defaultArgs } from "../SocialMedia";
-import { HeroCardProps } from "./HeroCard.props";
-import { ImageProps } from "../Image/Image.props";
-import { BreadcrumbProps } from "../Breadcrumb/Breadcrumb.props";
-
-const lightArticleCard: HeroCardProps = {
-  title: "Does Artificial Intelligence threaten decent work?",
-  datecopy: "17 July 2023",
-  eyebrow: "Future of Work Podcast",
-  intro:
-    "The world of work has always been shaped by technology, but the new generation of Artificial Intelligence (AI) has raised fears that it could destroy tens of millions of jobs, and undermine progress towards decent work and greater social justice.",
-  socialmedia: {
-    icons: defaultArgs.icons.slice(0, 3),
-  },
-  theme: "light",
-};
-
-const darkPortalCard: HeroCardProps = {
-  title: "Child labour",
-  eyebrow: "ILO Topics",
-  socialmedia: {
-    icons: defaultArgs.icons.slice(0, 3),
-  },
-};
-
-const lightPortalCard: HeroCardProps = {
-  ...darkPortalCard,
-  theme: "light",
-};
-
-const homepageCard: HeroCardProps = {
-  eyebrow: lightArticleCard.eyebrow,
-  title: lightArticleCard.title,
-  url: "https://www.ilo.org",
-  background: "semi-transparent",
-};
-
-const transparentHomepageCard: HeroCardProps = {
-  ...homepageCard,
-  background: "transparent",
-};
-
-const heroImage: ImageProps = {
-  alt: "Alt tag",
-  className: "storybook",
-  url: [
-    {
-      breakpoint: 0,
-      src: "/hero.jpg",
-    },
-    {
-      breakpoint: 768,
-      src: "/hero.jpg",
-    },
-  ],
-};
-
-const heroBreadCrumb: BreadcrumbProps = {
-  home: {
-    indented: false,
-    label: "Home",
-    url: "/",
-  },
-  links: [
-    {
-      label: "Link One",
-      url: "https://www.ilo.org/",
-    },
-    {
-      label: "Link Two",
-      url: "https://www.ilo.org/",
-    },
-    {
-      label: "Link Three",
-      url: "https://www.ilo.org/",
-    },
-    {
-      label: "Link Four",
-      url: "https://www.ilo.org/",
-    },
-  ],
-};
-
-const standard = {
-  image: heroImage,
-  breadcrumb: heroBreadCrumb,
-  heroCard: darkPortalCard,
-};
-
-export const darkPortal: HeroProps = standard;
-
-export const lightPortal: HeroProps = {
-  ...standard,
-  heroCard: lightPortalCard,
-};
-
-export const semiTransparent: HeroProps = {
-  ...standard,
-  align: "center",
-  heroCard: homepageCard,
-};
-
-export const transparent: HeroProps = {
-  ...standard,
-  align: "center",
-  heroCard: transparentHomepageCard,
-};
-
-export const offset: HeroProps = {
-  ...standard,
-  align: "baseline",
-  justify: "offset",
-};
-
-export const center: HeroProps = {
-  ...standard,
-  align: "baseline",
-  justify: "center",
-};
-
-export const centerBottom: HeroProps = {
-  ...standard,
-  cardSize: "xlarge",
-  align: "bottom",
-  justify: "center",
-  heroCard: lightArticleCard,
-};
-
-export const noPoster: HeroProps = {
-  cardSize: "xlarge",
-  align: "bottom",
-  justify: "center",
-  posterSize: "small",
-  heroCard: lightArticleCard,
-};

package/src/components/Hero/Hero.props.ts

@@ -1,62 +0,0 @@
-import { ThemeTypes } from "../../types";
-import { BreadcrumbProps } from "../Breadcrumb/Breadcrumb.props";
-import { ImageProps } from "../Image/Image.props";
-import { TooltipProps } from "../Tooltip/Tooltip.props";
-import { HeroCardProps } from "./HeroCard.props";
-
-export interface HeroProps {
-  /**
-   * Vertical alignment of the hero card
-   */
-  align?: "center" | "bottom" | "baseline";
-
-  /**
-   * Props to pass to the breadcrumb if there is one
-   */
-  breadcrumb?: BreadcrumbProps;
-
-  /**
-   * Caption to render in the hero card
-   */
-  caption?: TooltipProps;
-
-  /**
-   * Size the of hero card
-   */
-  cardSize?: "small" | "medium" | "large" | "xlarge" | "xxlarge";
-
-  /**
-   * Specify an optional className to be added to your Hero component.
-   */
-  className?: string;
-
-  /**
-   * Props for the image for the hero
-   */
-  image?: ImageProps;
-
-  /**
-   * How to justify the hero card
-   */
-  justify?: "start" | "center" | "offset";
-
-  /**
-   * Props for the card for the hero
-   */
-  heroCard: HeroCardProps;
-
-  /**
-   * Color of the gap space between bottom of the hero image and bottom of the card
-   */
-  gap?: "white" | "transparent" | "dark" | "light";
-
-  /**
-   * The size of the poster image
-   */
-  posterSize?: "small" | "medium" | "large" | "xlarge";
-
-  /**
-   * Theme for the card
-   */
-  theme?: ThemeTypes;
-}

package/src/components/Hero/Hero.tsx

@@ -1,94 +0,0 @@
-import { FC } from "react";
-import classnames from "classnames";
-import useGlobalSettings from "../../hooks/useGlobalSettings";
-import { HeroProps } from "./Hero.props";
-import HeroCard from "./HeroCard";
-import { ImageProps } from "../Image/Image.props";
-import { Breadcrumb } from "../Breadcrumb";
-import { Tooltip } from "../Tooltip";
-
-const HeroImage: FC<ImageProps> = ({ url, alt }) => {
-  const { prefix } = useGlobalSettings();
-
-  const imageClass = `${prefix}--card--image`;
-
-  // Sort the urls by breakpoint
-  const sortedUrls = url.sort((a, b) => a.breakpoint - b.breakpoint);
-
-  const defaultSrc = sortedUrls[sortedUrls.length - 1].src;
-
-  return (
-    <figure className="hero--image">
-      <picture>
-        {sortedUrls.map((img) => (
-          <source
-            srcSet={img.src}
-            media={`(min-width: ${img.breakpoint}px)`}
-            key={img.breakpoint}
-          />
-        ))}
-        <img className={imageClass} src={defaultSrc} alt={alt} />
-      </picture>
-    </figure>
-  );
-};
-
-const Hero: FC<HeroProps> = ({
-  justify = "start",
-  align = "baseline",
-  cardSize = "small",
-  posterSize = "large",
-  theme = "dark",
-  image,
-  breadcrumb,
-  heroCard,
-  caption,
-  gap,
-}) => {
-  const baseClass = "hero";
-  const justifyClass = `${baseClass}__card-justify__${justify}`;
-  const alignClass = `${baseClass}__card-align__${align}`;
-  const cardSizeClass = `${baseClass}__card-size__${cardSize}`;
-  const posterSizeClass = `${baseClass}__poster-size__${posterSize}`;
-  const themeClass = `${baseClass}__card-theme__${theme}`;
-  const gapClass = `${baseClass}__gap__${gap}`;
-
-  const heroClasses = classnames(
-    baseClass,
-    justifyClass,
-    alignClass,
-    cardSizeClass,
-    posterSizeClass,
-    themeClass,
-    { [gapClass]: !!gap }
-  );
-  return (
-    <div className={heroClasses}>
-      <div className="hero--background">
-        {image && <HeroImage {...image} />}
-      </div>
-      {breadcrumb && (
-        <>
-          <div className="hero--breadcrumbs">
-            <div className="hero--breadcrumbs--wrapper">
-              <Breadcrumb {...breadcrumb} />
-            </div>
-          </div>
-        </>
-      )}
-      <div className="hero--card-offset"></div>
-      <div className="hero--card">
-        <HeroCard {...heroCard} />
-      </div>
-      {caption && (
-        <div className="hero--caption">
-          <div className="hero--caption--wrapper">
-            <Tooltip {...caption} />
-          </div>
-        </div>
-      )}
-    </div>
-  );
-};
-
-export default Hero;

package/src/components/Hero/HeroCard.props.ts

@@ -1,54 +0,0 @@
-import { ThemeTypes } from "../../types";
-import { SocialMediaProps } from "../SocialMedia";
-
-export interface HeroCardProps {
-  /**
-   * Specify whether the background should be solid, transparent or semi-transparent
-   */
-  background?: "solid" | "transparent" | "semi-transparent";
-
-  /**
-   * Specify an optional className to be added to your Hero component.
-   */
-  className?: string;
-
-  /**
-   * Whether the card should have a cornercut or not
-   */
-  cornercut?: boolean;
-
-  /**
-   * date copy for the hero card
-   */
-  datecopy?: string;
-
-  /**
-   * eyebrow copy for the hero card
-   */
-  eyebrow?: string;
-
-  /**
-   * body copy for the hero card
-   */
-  intro?: string;
-
-  /**
-   * Specify the links to be displayed in this link group
-   */
-  socialmedia?: SocialMediaProps;
-
-  /**
-   * Title for the page
-   */
-  title: string;
-
-  /**
-   * Theme for the card
-   */
-  theme?: ThemeTypes;
-
-  /**
-   * The link of the card's title if it has one
-   */
-  url?: string;
-}

package/src/components/Hero/HeroCard.tsx

@@ -1,65 +0,0 @@
-import { FC } from "react";
-import classnames from "classnames";
-import useGlobalSettings from "../../hooks/useGlobalSettings";
-import { HeroCardProps } from "./HeroCard.props";
-import { SocialMedia } from "../SocialMedia";
-
-interface HeroCardTitleProps {
-  baseclass: string;
-  title: string;
-  url?: string;
-}
-
-const HeroCardTitle: FC<HeroCardTitleProps> = ({ baseclass, title, url }) => {
-  const titleClass = `${baseclass}--title`;
-  const linkClass = `${baseclass}--title-link`;
-
-  if (!url) {
-    return <h1 className={titleClass}>{title}</h1>;
-  }
-
-  return (
-    <a className={linkClass} href={url}>
-      <h1 className={titleClass}>{title}</h1>
-    </a>
-  );
-};
-
-const HeroCard: FC<HeroCardProps> = ({
-  theme = "dark",
-  background = "solid",
-  cornercut = "true",
-  eyebrow,
-  title,
-  url,
-  datecopy,
-  intro,
-  socialmedia,
-}) => {
-  const { prefix } = useGlobalSettings();
-
-  const baseClass = `${prefix}--hero-card`;
-  const themeClass = `${baseClass}__theme__${theme}`;
-  const backgroundClass = `${baseClass}__background__${background}`;
-  const cornercutClass = `${baseClass}__cornercut`;
-
-  const heroCardClasses = classnames(baseClass, themeClass, backgroundClass, {
-    [cornercutClass]: cornercut,
-  });
-
-  const eyebrowClass = `${baseClass}--eyebrow`;
-  const datecopyClass = `${baseClass}--datecopy`;
-  const introClass = `${baseClass}--intro`;
-
-  return (
-    <div className={heroCardClasses}>
-      {eyebrow && <p className={eyebrowClass}>{eyebrow}</p>}
-      <HeroCardTitle baseclass={baseClass} title={title} url={url} />
-      {intro && <p className={introClass}>{intro}</p>}
-      {datecopy && <p className={datecopyClass}>{datecopy}</p>}
-      {socialmedia && <SocialMedia {...socialmedia} theme={theme} />}
-    </div>
-  );
-};
-
-export default HeroCard;

package/src/components/Hero/index.ts

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

package/src/components/Icon/Icon.args.ts

@@ -1,15 +0,0 @@
-import { IconProps } from "./Icon.props";
-
-const icon: IconProps = {
-  hidden: false,
-  name: "add",
-};
-
-/**
- * Sample prop definitions for Button's enumerable properties (imported in stories and tests).
- */
-const IconArgs = {
-  icon,
-};
-
-export default IconArgs;

package/src/components/Icon/Icon.props.ts

@@ -1,16 +0,0 @@
-export interface IconProps {
-  /**
-   * Specify if this should be hidden from screen readers
-   */
-  hidden: boolean;
-
-  /**
-   * Specify the icon
-   */
-  name?: string;
-
-  /**
-   * Specify the icon's size
-   */
-  size?: number;
-}

package/src/components/Icon/Icon.tsx

@@ -1,25 +0,0 @@
-import { createElement, FC } from "react";
-import useGlobalSettings from "../../hooks/useGlobalSettings";
-import { IconProps } from "./Icon.props";
-import * as icons from "@ilo-org/icons-react";
-
-const Icon: FC<IconProps> = ({ hidden, name, size }) => {
-  const { prefix } = useGlobalSettings();
-  const baseClass = `${prefix}--icon`;
-  const ariaHidden = hidden ? "hidden" : "";
-  const iconsize = size || 24;
-
-  const icon = name
-    ? createElement(
-        icons[`${name.charAt(0).toUpperCase() + name.slice(1)}${iconsize}`],
-        {
-          "aria-hidden": ariaHidden,
-          className: baseClass,
-        }
-      )
-    : false;
-
-  return <>{icon}</>;
-};
-
-export default Icon;

package/src/components/Icon/index.ts

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

package/src/components/Image/Image.args.ts

@@ -1,29 +0,0 @@
-import { ImageProps } from "./Image.props";
-
-const imageArgs: ImageProps = {
-  alt: "Two women wearing yellow hard hats and neon safety jackets look directly at the viewer",
-  className: "image",
-  caption:
-    "Women construction workers in Nepal build roads and bridges as part of a National Rural Transport Programme co-sponsored by the ILO.",
-  credit: "© Marcel Crozet/ILO",
-  url: [
-    {
-      breakpoint: 0,
-      src: "/small.jpg",
-    },
-    {
-      breakpoint: 800,
-      src: "/medium.jpg",
-    },
-    {
-      breakpoint: 1200,
-      src: "/medium.jpg",
-    },
-    {
-      breakpoint: 1440,
-      src: "/large.jpg",
-    },
-  ],
-};
-
-export default imageArgs;

package/src/components/Image/Image.props.ts

@@ -1,43 +0,0 @@
-interface ImageUrl {
-  /**
-   * Specify the breakpoint at which this image src should be used
-   */
-  breakpoint: number;
-
-  /**
-   * Specify the url of this breakpoint's image src
-   */
-  src: string;
-}
-
-export interface ImageProps {
-  /**
-   * Specify the alt for the image
-   */
-  alt?: Required<string>;
-
-  /**
-   * Specify the caption for the image/video
-   */
-  caption?: string;
-
-  /**
-   * Specify an optional className to be added to your Media.
-   */
-  className?: string;
-
-  /**
-   * Specify the credit for the image/video
-   */
-  credit?: Required<string>;
-
-  /**
-   * Specify the image src for the image
-   */
-  url: ImageUrl[];
-
-  /**
-   * Value to pass to lading attribute
-   */
-  loading?: "lazy" | "eager";
-}

package/src/components/Image/Image.tsx

@@ -1,51 +0,0 @@
-import { FC } from "react";
-import classNames from "classnames";
-import useGlobalSettings from "../../hooks/useGlobalSettings";
-import { ImageProps } from "./Image.props";
-import { Credit } from "../Credit";
-
-const Image: FC<ImageProps> = ({ alt, caption, className, credit, url }) => {
-  const { prefix } = useGlobalSettings();
-  const baseClass = `${prefix}--image`;
-
-  const imageClasses = classNames(className, {
-    [baseClass]: true,
-  });
-
-  const imgClasses = classNames("", {
-    [`${baseClass}--img`]: true,
-  });
-
-  const captionClasses = classNames("", {
-    [`${baseClass}--caption`]: true,
-  });
-
-  return (
-    <figure className={imageClasses}>
-      <div className={`${imageClasses}--wrapper`}>
-        <picture className={imgClasses}>
-          {url &&
-            url
-              .sort(
-                (a: any, b: any) =>
-                  parseFloat(a.breakpoint) - parseFloat(b.breakpoint)
-              )
-              .slice(1)
-              .reverse()
-              .map((item: any, index: any) => (
-                <source
-                  srcSet={item.src}
-                  media={`(min-width: ${item.breakpoint}px)`}
-                  key={index}
-                />
-              ))}
-          {url && <img src={url[0].src} alt={alt} />}
-        </picture>
-        {credit && <Credit credit={credit} />}
-      </div>
-      {caption && <figcaption className={captionClasses}>{caption}</figcaption>}
-    </figure>
-  );
-};
-
-export default Image;

package/src/components/Image/index.ts

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