@ilo-org/react 0.6.0 → 0.7.0

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

@@ -1,294 +1,108 @@
 import { HeroProps } from "./Hero.props";
+import { defaultArgs } from "../SocialMedia";
+import { HeroCardProps } from "./HeroCard.props";
+import { ImageProps } from "../Image/Image.props";
 
-const articleCenteredHero: HeroProps = {
-  className: "storybook",
-  image: {
-    alt: "Alt tag",
-    className: "storybook",
-    url: [
-      {
-        breakpoint: 0,
-        src: "/hero.jpg",
-      },
-      {
-        breakpoint: 768,
-        src: "/hero.jpg",
-      },
-    ],
-  },
-  heroCard: {
-    alignment: "center",
-    datecopy: "11 February 2021",
-    eyebrow: "Eyebrow Title",
-    intro:
-      "Brief intro text - ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.",
-    socials: [
-      {
-        label: "Facebook",
-        url: "https://www.facebook.com/",
-        icon: "facebook",
-      },
-    ],
-    title:
-      "This is an centered aligned article headline that is more than two lines long",
-    theme: "light",
-    types: "article",
+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",
-  types: "article",
 };
 
-const articleHero: HeroProps = {
-  className: "storybook",
-  image: {
-    alt: "Alt tag",
-    className: "storybook",
-    url: [
-      {
-        breakpoint: 0,
-        src: "/hero.jpg",
-      },
-      {
-        breakpoint: 768,
-        src: "/hero.jpg",
-      },
-    ],
+const darkPortalCard: HeroCardProps = {
+  title: "Child labour",
+  eyebrow: "ILO Topics",
+  socialmedia: {
+    icons: defaultArgs.icons.slice(0, 3),
   },
-  heroCard: {
-    alignment: "left",
-    datecopy: "11 February 2021",
-    eyebrow: "Eyebrow Title",
-    intro:
-      "Brief intro text - ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.",
-    socials: [
-      {
-        label: "Facebook",
-        url: "https://www.facebook.com/",
-        icon: "facebook",
-      },
-    ],
-    title:
-      "This is an left aligned article headline that is more than two lines long",
-    theme: "light",
-    types: "article",
-  },
-  theme: "light",
-  types: "article",
 };
 
-const articleNoImageHero: HeroProps = {
-  className: "storybook",
-  heroCard: {
-    alignment: "center",
-    datecopy: "11 February 2021",
-    eyebrow: "Eyebrow Title",
-    intro:
-      "Brief intro text - ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.",
-    socials: [
-      {
-        label: "Facebook",
-        url: "https://www.facebook.com/",
-        icon: "facebook",
-      },
-    ],
-    title:
-      "This is an center aligned article headline that is more than two lines long",
-    theme: "light",
-    types: "article",
-  },
+const lightPortalCard: HeroCardProps = {
+  ...darkPortalCard,
   theme: "light",
-  types: "article",
 };
 
-const homeHero: HeroProps = {
-  className: "storybook",
-  image: {
-    alt: "Alt tag",
-    className: "storybook",
-    url: [
-      {
-        breakpoint: 0,
-        src: "/hero.jpg",
-      },
-      {
-        breakpoint: 768,
-        src: "/hero.jpg",
-      },
-    ],
-  },
-  heroCard: {
-    alignment: "left",
-    eyebrow: "Eyebrow Title",
-    title:
-      "ILO welcomes G7 call to make a just transition to a green economy happen",
-    theme: "dark",
-    types: "home",
-  },
-  theme: "dark",
-  types: "home",
+const homepageCard: HeroCardProps = {
+  eyebrow: lightArticleCard.eyebrow,
+  title: lightArticleCard.title,
+  url: "https://www.ilo.org",
+  background: "semi-transparent",
 };
 
-const portalHero: HeroProps = {
-  className: "storybook",
-  image: {
-    alt: "Alt tag",
-    className: "storybook",
-    url: [
-      {
-        breakpoint: 0,
-        src: "/hero.jpg",
-      },
-      {
-        breakpoint: 768,
-        src: "/hero.jpg",
-      },
-    ],
-  },
-  heroCard: {
-    alignment: "left",
-    eyebrow: "Eyebrow Title",
-    socials: [
-      {
-        label: "Facebook",
-        url: "https://www.facebook.com/",
-        icon: "facebook",
-      },
-      {
-        label: "Linkedin",
-        url: "https://www.linkedin.com/",
-        icon: "linkedin",
-      },
-    ],
-    title: "This is a page title",
-    theme: "dark",
-    types: "portal",
-  },
-  theme: "dark",
-  types: "portal",
+const transparentHomepageCard: HeroCardProps = {
+  ...homepageCard,
+  background: "transparent",
 };
 
-const projectHero: HeroProps = {
+const heroImage: ImageProps = {
+  alt: "Alt tag",
   className: "storybook",
-  image: {
-    alt: "Alt tag",
-    className: "storybook",
-    url: [
-      {
-        breakpoint: 0,
-        src: "/hero.jpg",
-      },
-      {
-        breakpoint: 768,
-        src: "/hero.jpg",
-      },
-    ],
-  },
-  heroCard: {
-    alignment: "center",
-    eyebrow: "Eyebrow Title",
-    datecopy: "Date | Duration",
-    intro:
-      "Brief intro text - ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.",
-    socials: [
-      {
-        label: "Facebook",
-        url: "https://www.facebook.com/",
-        icon: "facebook",
-      },
-    ],
-    title: "This is a page title",
-    theme: "dark",
-    types: "project",
-  },
-  theme: "dark",
-  types: "project",
+  url: [
+    {
+      breakpoint: 0,
+      src: "/hero.jpg",
+    },
+    {
+      breakpoint: 768,
+      src: "/hero.jpg",
+    },
+  ],
 };
 
-const graphicHero: HeroProps = {
-  className: "storybook",
-  image: {
-    alt: "Alt tag",
-    className: "storybook",
-    url: [
-      {
-        breakpoint: 0,
-        src: "/hero.jpg",
-      },
-      {
-        breakpoint: 768,
-        src: "/hero.jpg",
-      },
-    ],
-  },
-  heroCard: {
-    alignment: "center",
-    eyebrow: "Eyebrow Title",
-    datecopy: "Date | Duration",
-    intro:
-      "Brief intro text - ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.",
-    socials: [
-      {
-        label: "Facebook",
-        url: "https://www.facebook.com/",
-        icon: "facebook",
-      },
-    ],
-    title: "This is a centered graphic article headline that is two lines long",
-    theme: "light",
-    types: "graphic",
-  },
-  theme: "light",
-  types: "graphic",
+const standard = {
+  image: heroImage,
+  heroCard: darkPortalCard,
 };
 
-const publicationHero: HeroProps = {
-  className: "storybook",
-  image: {
-    alt: "Alt tag",
-    className: "storybook",
-    url: [
-      {
-        breakpoint: 0,
-        src: "/hero.jpg",
-      },
-      {
-        breakpoint: 768,
-        src: "/hero.jpg",
-      },
-    ],
-  },
-  heroCard: {
-    alignment: "left",
-    eyebrow: "Eyebrow Title",
-    datecopy: "Date | Duration",
-    intro:
-      "Brief intro text - ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.",
-    socials: [
-      {
-        label: "Facebook",
-        url: "https://www.facebook.com/",
-        icon: "facebook",
-      },
-    ],
-    title: "This is a page title",
-    theme: "light",
-    types: "publication",
-  },
-  theme: "light",
-  types: "publication",
+export const darkPortal: HeroProps = standard;
+
+export const lightPortal: HeroProps = {
+  ...standard,
+  heroCard: lightPortalCard,
 };
-/**
- * Sample prop definitions for Hero's enumerable properties (imported in stories and test)
- */
-const HeroArgs = {
-  articleHero,
-  articleCenteredHero,
-  articleNoImageHero,
-  homeHero,
-  graphicHero,
-  projectHero,
-  portalHero,
-  publicationHero,
+
+export const semiTransparent: HeroProps = {
+  ...standard,
+  align: "center",
+  heroCard: homepageCard,
 };
 
-export default HeroArgs;
+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,8 +1,30 @@
-import { HeroCardTheme, HeroCardTypes } from "../../types";
+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.
    */
@@ -13,18 +35,23 @@ export interface HeroProps {
    */
   image?: ImageProps;
 
+  /**
+   * How to justify the hero card
+   */
+  justify?: "start" | "center" | "offset";
+
   /**
    * Props for the card for the hero
    */
-  heroCard?: HeroCardProps;
+  heroCard: HeroCardProps;
 
   /**
-   * Theme for the card
+   * The size of the poster image
    */
-  theme?: HeroCardTheme;
+  posterSize?: "small" | "medium" | "large" | "xlarge";
 
   /**
-   * Type of hero for the card
+   * Theme for the card
    */
-  types?: HeroCardTypes;
+  theme?: ThemeTypes;
 }

package/src/components/Hero/Hero.tsx

@@ -1,34 +1,82 @@
 import { FC } from "react";
-import classNames from "classnames";
+import classnames from "classnames";
 import useGlobalSettings from "../../hooks/useGlobalSettings";
 import { HeroProps } from "./Hero.props";
 import HeroCard from "./HeroCard";
-import { Image } from "../Image";
+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--figure">
+      <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> = ({
-  className,
+  justify = "start",
+  align = "baseline",
+  cardSize = "small",
+  posterSize = "large",
   image,
+  breadcrumb,
   heroCard,
-  theme = "light",
-  types,
+  caption,
 }) => {
-  const { prefix } = useGlobalSettings();
-
-  const baseClass = `${prefix}--hero`;
-  const heroClasses = classNames(className, {
-    [baseClass]: true,
-    [`${baseClass}--${theme}`]: theme,
-    [`${baseClass}--${types}`]: types,
-    [`${baseClass}--image`]: image,
-  });
+  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 heroClasses = classnames(
+    baseClass,
+    justifyClass,
+    alignClass,
+    cardSizeClass,
+    posterSizeClass
+  );
 
   return (
-    <>
-      <div className={heroClasses}>
-        {image && <Image {...image} />}
+    <div className={heroClasses}>
+      {image ? <HeroImage {...image} /> : <div className="hero--figure" />}
+      {breadcrumb && (
+        <div className="hero--breadcrumbs">
+          <div className="hero--breadcrumbs--wrapper">
+            <Breadcrumb {...breadcrumb} />
+          </div>
+        </div>
+      )}
+      <div className="hero--card">
         <HeroCard {...heroCard} />
       </div>
-    </>
+      {caption && (
+        <div className="hero--caption">
+          <div className="hero--caption--wrapper">
+            <Tooltip {...caption} />
+          </div>
+        </div>
+      )}
+    </div>
   );
 };
 

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

@@ -1,16 +1,22 @@
-import { HeroCardAlignment, HeroCardTypes, HeroCardTheme } from "../../types";
+import { ThemeTypes } from "../../types";
+import { SocialMediaProps } from "../SocialMedia";
 
 export interface HeroCardProps {
   /**
-   * Theme for the card
+   * Specify whether the background should be solid, transparent or semi-transparent
    */
-  alignment?: HeroCardAlignment;
+  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
    */
@@ -29,37 +35,20 @@ export interface HeroCardProps {
   /**
    * Specify the links to be displayed in this link group
    */
-  socials?: SocialProps[];
+  socialmedia?: SocialMediaProps;
 
   /**
    * Title for the page
    */
-  title?: string;
+  title: string;
 
   /**
    * Theme for the card
    */
-  theme?: HeroCardTheme;
-
-  /**
-   * Type of hero for the card
-   */
-  types?: HeroCardTypes;
-}
-
-interface SocialProps {
-  /**
-   * Specify the label for this link
-   */
-  label?: Required<string>;
-
-  /**
-   * Specify the url for this link
-   */
-  url?: Required<string>;
+  theme?: ThemeTypes;
 
   /**
-   * Specify the icon for this link
+   * The link of the card's title if it has one
    */
-  icon?: Required<string>;
+  url?: string;
 }