@ilo-org/react 0.5.1 → 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/components/SocialMedia/SocialMedia.args.ts

@@ -0,0 +1,54 @@
+import { SocialMediaProps } from "./SocialMedia.props";
+
+export const defaultArgs: SocialMediaProps = {
+  headline: "Follow us on social media",
+  theme: "light",
+  justify: "start",
+  icons: [
+    {
+      icon: "facebook",
+      url: "https://www.facebook.com/ilo.org",
+      label: "Facebook",
+    },
+    {
+      icon: "twitter",
+      url: "https://twitter.com/#!/ilo",
+      label: "Twitter",
+    },
+    {
+      icon: "instagram",
+      url: "https://www.instagram.com/ilo.org/",
+      label: "Instagram",
+    },
+    {
+      icon: "linkedin",
+      url: "https://www.linkedin.com/company/international-labour-organization-ilo",
+      label: "LinkedIn",
+    },
+    {
+      icon: "youtube",
+      url: "https://www.youtube.com/channel/UCQsVmhSa4X-G3lHlUtejzLA",
+      label: "YouTube",
+    },
+    {
+      icon: "tiktok",
+      url: "https://www.tiktok.com/@ilo",
+      label: "TikTok",
+    },
+    {
+      icon: "flickr",
+      url: "https://www.flickr.com/photos/ilopictures/albums",
+      label: "TikTok",
+    },
+  ],
+};
+
+export const darkArgs: SocialMediaProps = {
+  ...defaultArgs,
+  theme: "dark",
+};
+
+export const centredArgs: SocialMediaProps = {
+  ...defaultArgs,
+  justify: "center",
+};

package/src/components/SocialMedia/SocialMedia.props.ts

@@ -0,0 +1,45 @@
+import { SocialTypes } from "../../types";
+
+export interface SocialMediaIcons {
+  /**
+   * The name of the icon to display
+   */
+  icon: SocialTypes;
+
+  /**
+   * The url to link to
+   */
+  url: string;
+
+  /**
+   * The alt text of the link
+   */
+  label: string;
+}
+
+export interface SocialMediaProps {
+  /**
+   * An optional headline to display above the icons
+   */
+  headline?: string;
+
+  /**
+   * Specify an optional className to be added to your SocialMedia.
+   */
+  className?: string;
+
+  /**
+   * Specify the theme of the SocialMedia.
+   */
+  theme?: "light" | "dark";
+
+  /**
+   * The justification of the icons
+   */
+  justify?: "start" | "center";
+
+  /**
+   * Specify the icons to display.
+   */
+  icons: SocialMediaIcons[];
+}

package/src/components/SocialMedia/SocialMedia.tsx

@@ -0,0 +1,46 @@
+import classnames from "classnames";
+import { useGlobalSettings } from "../../hooks";
+import { SocialMediaProps } from "./SocialMedia.props";
+
+const SocialMedia: React.FC<SocialMediaProps> = ({
+  className,
+  theme = "light",
+  justify = "start",
+  headline,
+  icons,
+}) => {
+  const { prefix } = useGlobalSettings();
+
+  // Classes to be applied to the outer element
+  const baseClass = `${prefix}--social-media`;
+  const themeClass = `${baseClass}__theme__${theme}`;
+  const justifyClass = `${baseClass}__justify__${justify}`;
+  const classes = classnames(baseClass, themeClass, justifyClass, className);
+
+  // Classes to be applied to inner elements
+  const headlineClass = `${baseClass}--headline`;
+  const listClass = `${baseClass}--list`;
+  const listItemClass = `${listClass}--item`;
+  const iconClass = `${listItemClass}--icon`;
+
+  return (
+    <div className={classes}>
+      {headline && <h5 className={headlineClass}>{headline}</h5>}
+      <ul className={listClass}>
+        {icons.map((item) => (
+          <li className={listItemClass}>
+            <a
+              title={item.label}
+              className={classnames(iconClass, `${iconClass}__${item.icon}`)}
+              href={item.url}
+            >
+              {item.label}
+            </a>
+          </li>
+        ))}
+      </ul>
+    </div>
+  );
+};
+
+export default SocialMedia;

package/src/components/SocialMedia/index.ts

@@ -0,0 +1,3 @@
+export { default as SocialMedia } from "./SocialMedia";
+export type { SocialMediaProps } from "./SocialMedia.props";
+export { defaultArgs } from "./SocialMedia.args";

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"
@@ -49,7 +41,14 @@ export type NotificationTypes = "error" | "info" | "success" | "warning";
 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 SocialTypes =
+  | "facebook"
+  | "twitter"
+  | "instagram"
+  | "linkedin"
+  | "youtube"
+  | "tiktok"
+  | "flickr";
 export type CardColor = "turquoise" | "green" | "yellow" | "blue";
 export type CardSize = "wide" | "standard" | "narrow";
 export type CardCornerType = "cornercut" | "corner";