@ilo-org/react 0.6.0 → 0.7.0

package/src/components/Hero/HeroCard.tsx

@@ -1,51 +1,63 @@
 import { FC } from "react";
-import classNames from "classnames";
+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> = ({
-  className,
-  alignment,
-  datecopy,
+  theme = "dark",
+  background = "solid",
+  cornercut = "true",
   eyebrow,
-  intro,
-  socials,
   title,
-  theme = "light",
-  types = "article",
+  url,
+  datecopy,
+  intro,
+  socialmedia,
 }) => {
   const { prefix } = useGlobalSettings();
 
   const baseClass = `${prefix}--hero-card`;
-  const heroCardClasses = classNames(className, {
-    [baseClass]: true,
-    [`${baseClass}--${alignment}`]: alignment,
-    [`${baseClass}--${theme}`]: theme,
-    [`${baseClass}--${types}`]: types,
+  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={`${baseClass}--eyebrow`}>{eyebrow}</p>}
-      {title && <h2 className={`${baseClass}--title`}>{title}</h2>}
-      {datecopy && <p className={`${baseClass}--datecopy`}>{datecopy}</p>}
-      {intro && <p className={`${baseClass}--intro`}>{intro}</p>}
-      <ul className={`${baseClass}--list`}>
-        {socials &&
-          socials.map((item: any, index: any) => {
-            return (
-              <li className={`${baseClass}--list--item`} key={index}>
-                <a
-                  className={`${baseClass}--link icon icon--${item.icon}`}
-                  href={item.url}
-                  title={item.label}
-                >
-                  {item.label}
-                </a>
-              </li>
-            );
-          })}
-      </ul>
+      {eyebrow && <p className={eyebrowClass}>{eyebrow}</p>}
+      <HeroCardTitle baseclass={baseClass} title={title} url={url} />
+      {datecopy && <p className={datecopyClass}>{datecopy}</p>}
+      {intro && <p className={introClass}>{intro}</p>}
+      {socialmedia && <SocialMedia {...socialmedia} theme={theme} />}
     </div>
   );
 };

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

@@ -2,12 +2,12 @@ interface ImageUrl {
   /**
    * Specify the breakpoint at which this image src should be used
    */
-  breakpoint?: number;
+  breakpoint: number;
 
   /**
    * Specify the url of this breakpoint's image src
    */
-  src?: string;
+  src: string;
 }
 
 export interface ImageProps {
@@ -34,5 +34,10 @@ export interface ImageProps {
   /**
    * Specify the image src for the image
    */
-  url?: Required<Array<ImageUrl>>;
+  url: ImageUrl[];
+
+  /**
+   * Value to pass to lading attribute
+   */
+  loading?: "lazy" | "eager";
 }

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

@@ -0,0 +1,50 @@
+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

@@ -0,0 +1,28 @@
+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

@@ -0,0 +1,53 @@
+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

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

package/src/types/index.ts

@@ -1,4 +1,5 @@
 // export type AccordionSize = "small" | "large";
+export type ThemeTypes = "light" | "dark";
 export type ButtonFunctions = "button" | "submit" | "reset";
 export type ButtonTypes = "primary" | "secondary" | "tertiary" | "alert";
 export type CalloutTypes = "info" | "error" | "success" | "warning";
@@ -16,15 +17,6 @@ export type FieldTypes =
   | "file";
 export type FormGroupTypes = "default" | "filter";
 export type HeadingLevel = "h1" | "h2" | "h3" | "h4" | "h5" | "h6";
-export type HeroCardAlignment = "left" | "center" | "right";
-export type HeroCardTypes =
-  | "home"
-  | "publication"
-  | "graphic"
-  | "project"
-  | "article"
-  | "portal";
-export type HeroCardTheme = "dark" | "light";
 export type InputTypes =
   | "email"
   | "hidden"