@ilo-org/react 0.10.6 → 0.12.0

package/src/components/{Card → Cards}/Card.args.ts

@@ -1,7 +1,15 @@
-import { CardProps } from "./Card.props";
+import {
+  TextCardProps,
+  StatCardProps,
+  MultilinkCardProps,
+  PromoCardProps,
+  FeatureCardProps,
+  DetailCardProps,
+  FactlistCardProps,
+  DataCardProps,
+} from "./Card.props";
 
-const graphicTextCard: CardProps = {
-  variant: "graphic",
+const textCard: TextCardProps = {
   title: "Why we need greater social justice",
   eyebrow: "Podcast",
   date: {
@@ -10,8 +18,6 @@ const graphicTextCard: CardProps = {
   },
   theme: "light",
   link: "https:/www.ilo.org",
-  intro:
-    "A toxic combination of mutually-reinforcing crises – inflation, debt, food and fuel price rises, geopolitical tensions and conflict, climate change – are threatening to increase poverty, inequality and discrimination worldwide.",
   profile: {
     avatar: "/ilo-dg.jpg",
     description:
@@ -21,10 +27,8 @@ const graphicTextCard: CardProps = {
   },
 };
 
-const statCard: CardProps = {
-  variant: "stat",
+const statCard: StatCardProps = {
   title: "Global employment growth down by half in 2023",
-  eyebrow: "Report",
   intro:
     "The current global economic slowdown is likely to force more workers to accept lower quality, poorly paid jobs which lack job security and social protection, so accentuating inequalities exacerbated by the COVID-19 crisis.",
   color: "turquoise",
@@ -34,8 +38,7 @@ const statCard: CardProps = {
   },
 };
 
-const multilinkCard: CardProps = {
-  variant: "multilink",
+const multilinkCard: MultilinkCardProps = {
   title:
     "ILO welcomes G7 call to make a just transition to a green economy happen",
   eyebrow: "High-level meeting",
@@ -43,10 +46,7 @@ const multilinkCard: CardProps = {
     "At the end of their meeting the G7 Labour Ministers highlighted the urgent need to greater focus on rights and occupational safety and health.",
   image: "/hero.jpg",
   alignment: "left",
-  date: {
-    human: "6 September 2023",
-    unix: "1670389200",
-  },
+  link: "https:/www.ilo.org",
   linklist: {
     headline: "",
     linkgroup: [
@@ -70,13 +70,13 @@ const multilinkCard: CardProps = {
   },
 };
 
-const graphicPromoCard: CardProps = {
-  variant: "graphicpromo",
+const promoCard: PromoCardProps = {
+  size: "standard",
   title:
     "ILO welcomes G7 call to make a just transition to a green economy happen",
   eyebrow: "High-level meeting",
-  theme: "light",
-  cornercut: "cornercut",
+  theme: "dark",
+  cornercut: true,
   intro:
     "At the end of their meeting the G7 Labour Ministers highlighted the urgent need to greater focus on rights and occupational safety and health.",
   link: "https:/www.ilo.org",
@@ -86,8 +86,7 @@ const graphicPromoCard: CardProps = {
   },
 };
 
-const featureCard: CardProps = {
-  variant: "feature",
+const featureCard: FeatureCardProps = {
   isvideo: false,
   title:
     "ILO welcomes G7 call to make a just transition to a green economy happen",
@@ -114,8 +113,7 @@ const featureCard: CardProps = {
   },
 };
 
-const detailCard: CardProps = {
-  variant: "detail",
+const detailCard: DetailCardProps = {
   title: "Technical meeting on digitalization in the construction sector",
   eyebrow: "Meeting",
   intro:
@@ -129,28 +127,22 @@ const detailCard: CardProps = {
   eventdetails: "8:30 - 12:00 CET | Geneva",
 };
 
-const factListCard: CardProps = {
-  variant: "factlist",
+const factListCard: FactlistCardProps = {
   title:
     "Economic slowdown likely to force workers to accept lower quality jobs",
-  eyebrow: "Report",
   theme: "light",
-  cornercut: "cornercut",
-  intro:
-    "A toxic combination of mutually-reinforcing crises – inflation, debt, food and fuel price rises, geopolitical tensions and conflict, climate change – are threatening to increase poverty, inequality and discrimination worldwide.",
-  listitems: [
+  list: [
     "Global employment growth will be only 1.0 per cent in 2023, less than half the level in 2022.",
     "The labour market deterioration is mainly due to emerging geopolitical tensions and the Ukraine conflict.",
     "The current slowdown means that many workers will have to accept lower quality jobs, often at very low pay.",
   ],
 };
 
-const dataCard: CardProps = {
-  variant: "data",
-  title: "Technical meeting on digitalization in the construction sector",
+const dataCard: DataCardProps = {
+  size: "wide",
   eyebrow: "Meeting",
-  eventdetails:
-    "The purpose of the meeting will be to discuss opportunities and challenges for the future of work in the construction industry as a vehicle to ensure a human-centred economic recovery.",
+  image: "/small.jpg",
+  columns: "two",
   dataset: {
     content: {
       items: [
@@ -181,6 +173,19 @@ const dataCard: CardProps = {
         },
       ],
     },
+    cta: {
+      headline: "Read online",
+      items: [
+        {
+          label: "HTML Version",
+          url: "https://www.ilo.org",
+        },
+        {
+          label: "InfoStories",
+          url: "https://www.ilo.org/infostories/en-GB",
+        },
+      ],
+    },
     links: {
       headline: "Languages",
       items: [
@@ -202,10 +207,10 @@ const dataCard: CardProps = {
 };
 
 const CardArgs = {
-  graphicTextCard,
+  textCard,
   statCard,
   multilinkCard,
-  graphicPromoCard,
+  promoCard,
   featureCard,
   detailCard,
   factListCard,

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

@@ -0,0 +1,382 @@
+import {
+  CardAlignment,
+  ThemeTypes,
+  CardCornerType,
+  CardColor,
+  CardSize,
+  CardTypes,
+} from "../../types";
+import { LinkProps, LinkListProps } from "../LinkList/LinkList.props";
+import { ProfileProps } from "../Profile/Profile.props";
+
+export type DataCardProps = {
+  /**
+   * A line of text that appears as a small heading at the top of the card
+   */
+  eyebrow?: string;
+
+  /**
+   * How big should the card be
+   */
+  size?: Omit<CardSize, "standard">;
+
+  /**
+   * The image to show in the card
+   */
+  image?: string;
+
+  /**
+   * Array of Content (label, copy), Files object (optional headline, array of items with label and url) and Links * * object (optional headline, array of items with label and url)
+   */
+  dataset?: CardDataset;
+
+  /**
+   * Make the content appear in one or two columns. Only applies when the size is set to `wide` or `fluid`
+   */
+  columns?: string;
+};
+
+export type DetailCardProps = {
+  /**
+   * A line of text that appears as a small heading above the title of the card
+   */
+  eyebrow?: string;
+
+  /**
+   * The title of the card
+   */
+  title: string;
+
+  /**
+   * Introductory text in the card
+   */
+  intro?: string;
+
+  /**
+   * Specify the event Date, in both human and Unix format.
+   */
+  date?: EventDate;
+
+  /**
+   * Information about an event
+   */
+  eventdetails?: string;
+
+  /**
+   * A URL to link to
+   */
+  link?: string;
+
+  /**
+   * The image to show in the card
+   */
+  image?: string;
+
+  /**
+   * How big should the card be
+   */
+  size?: Omit<CardSize, "standard">;
+};
+
+export type FactlistCardProps = {
+  /**
+   * The title of the card
+   */
+  title: string;
+
+  /**
+   * Will render the card to appear on light or dark backgrounds
+   */
+  theme?: ThemeTypes;
+
+  /**
+   * How big should the card be
+   */
+  size?: Omit<CardSize, "standard">;
+  list?: string[];
+};
+
+export type FeatureCardProps = {
+  isvideo?: boolean;
+
+  /**
+   * A line of text that appears as a small heading above the title of the card
+   */
+  eyebrow?: string;
+
+  /**
+   * The title of the card
+   */
+  title: string;
+
+  /**
+   * Will render the card to appear on light or dark backgrounds
+   */
+  theme?: ThemeTypes;
+
+  /**
+   * How big should the card be
+   */
+  size?: Omit<CardSize, "standard">;
+
+  /**
+   * Specify the event Date, in both human and Unix format.
+   */
+  date?: EventDate;
+  link?: string;
+  linklist?: LinkListProps;
+
+  /**
+   * The image to show in the card
+   */
+  image?: string;
+};
+
+export type MultilinkCardProps = {
+  isvideo?: boolean;
+
+  /**
+   * A line of text that appears as a small heading above the title of the card
+   */
+  eyebrow?: string;
+
+  /**
+   * The title of the card
+   */
+  title: string;
+
+  /**
+   * How big should the card be
+   */
+  size?: CardSize;
+  alignment?: CardAlignment;
+  intro?: string;
+  link?: string;
+  linklist?: LinkListProps;
+
+  /**
+   * The image to show in the card
+   */
+  image?: string;
+};
+
+export type PromoCardProps = {
+  /**
+   * A line of text that appears as a small heading above the title of the card
+   */
+  eyebrow?: string;
+
+  /**
+   * The title of the card
+   */
+  title: string;
+
+  /**
+   * Will render the card to appear on light or dark backgrounds
+   */
+  theme?: ThemeTypes;
+
+  /**
+   * How big should the card be
+   */
+  size?: CardSize;
+
+  /**
+   * Apply an optional corner cut to the top of the card
+   */
+  cornercut?: CardCornerType;
+
+  /**
+   * Introductory text in the card
+   */
+  intro?: string;
+  link?: string;
+  cta?: LinkProps;
+};
+
+export type StatCardProps = {
+  /**
+   * The title of the card
+   */
+  title: string;
+  color?: CardColor;
+
+  /**
+   * How big should the card be
+   */
+  size?: Omit<CardSize, "narrow" | "wide">;
+
+  /**
+   * Introductory text in the card
+   */
+  intro?: string;
+  source?: LinkProps;
+};
+
+export type TextCardProps = {
+  /**
+   * A line of text that appears as a small heading above the title of the card
+   */
+  eyebrow?: string;
+
+  /**
+   * The title of the card
+   */
+  title: string;
+
+  /**
+   * Will render the card to appear on light or dark backgrounds
+   */
+  theme?: ThemeTypes;
+
+  /**
+   * How big should the card be
+   */
+  size?: Omit<CardSize, "standard">;
+
+  /**
+   * Specify the event Date, in both human and Unix format.
+   */
+  date?: EventDate;
+  profile: ProfileProps;
+  link?: string;
+};
+
+export interface CardProps {
+  /**
+   * Specify whether the card should display a video icon (for Feature card). Possible options: true | false
+   */
+  isvideo?: boolean;
+
+  /**
+   * Eyebrow field for the card.
+   */
+  eyebrow: string;
+
+  /**
+   * Title field for the card
+   */
+  title: string;
+
+  /**
+   * Color of the stat cards, options are turquoise | green| yellow| blue. Only used for stat cards.
+   */
+  color?: CardColor;
+
+  /**
+   * The theme type for the card. Theme doesn't apply to these card types: Multilink, Data, Stat and Detail. Possible themes: light | dark.
+   */
+  theme?: ThemeTypes;
+
+  /**
+   * Type - Sets the type of card to render.
+     Option keys: feature, text, detail, promo, multilink, data, stat, factlist
+   */
+  type: CardTypes;
+
+  /**
+   * Size of the cards (usually reduces padding). `Wide` on Multilink and Feature cause a two column structure above a desktop breakpoint. Possible options: Wide | Standard | Narrow.
+   */
+  size?: CardSize;
+
+  /**
+   * Specify whether the card has a cut corner. The only card that uses this setting are `Promo`.
+   */
+  cornercut?: CardCornerType;
+
+  /**
+   * Specify whether a card image is right-aligned or left-aligned for `Multilink` cards. Possible options: left | right.
+   */
+  alignment?: CardAlignment;
+
+  /**
+   * Intro text field for the card
+   */
+  intro?: string;
+
+  /**
+   * Specify the event Date, in both human and Unix format.
+   */
+  date?: EventDate;
+
+  /**
+   * Event details for `Detail` card
+   */
+  eventdetails?: string;
+
+  /**
+   * Profile to embed in the card for `Text` card
+   */
+  profile?: ProfileProps;
+
+  /**
+   * A list of text itmes to be embed in the card, specifically used in `Factlist` card.
+   */
+  listitems?: Array<string>;
+
+  /**
+   * A Link behind a clickable card. Do no use on `Multilink`, `Factlist`, `Data`, or `Stat` cards.
+   */
+  link?: string;
+
+  /**
+   * Props of the LinkList component. Appears at the bottom of `Multilink` or `Feature` card.
+   */
+  linklist?: LinkListProps;
+
+  /**
+   * Items for clickable CTA button, specifically used for `Promo` card.
+   */
+  cta?: LinkProps;
+
+  /**
+   * The image used in a card. Images should be avoided on `Promo`, `Text`, `Factlist`, and `Stat` card.
+   */
+  image?: string;
+
+  /**
+   * Source link for `Stat` cards.
+   */
+  source?: LinkProps;
+
+  /**
+   * Dataset object for the `Data` card. An array of Content (label, copy), Files (optional headline, array of items with label and url), and Links (optional headline, array of items with label and url).
+   */
+  dataset?: CardDataset;
+}
+
+interface EventDate {
+  unix?: string;
+  human?: string;
+}
+
+interface CardDataset {
+  content?: DataContent;
+  files?: DataFile;
+  links?: DataLink;
+  cta?: Cta;
+}
+
+interface DataContent {
+  items?: Array<ContentItem>;
+}
+
+interface ContentItem {
+  label?: string;
+  copy?: string;
+}
+
+interface DataFile {
+  headline?: string;
+  items?: Array<LinkProps>;
+}
+
+interface DataLink {
+  headline?: string;
+  items?: Array<LinkProps>;
+}
+
+interface Cta {
+  headline?: string;
+  items?: Array<LinkProps>;
+}

package/src/components/Cards/Card.tsx

@@ -0,0 +1,36 @@
+import { FC } from "react";
+import { CardProps } from "./Card.props";
+import {
+  DataCard,
+  DetailCard,
+  FactlistCard,
+  FeatureCard,
+  MultilinkCard,
+  PromoCard,
+  StatCard,
+  TextCard,
+} from ".";
+
+type ComponentMap = {
+  [key: string]: FC<any>;
+};
+
+const Card: FC<CardProps> = (props: CardProps) => {
+  const componentMap: ComponentMap = {
+    data: DataCard,
+    detail: DetailCard,
+    factlist: FactlistCard,
+    featurecard: FeatureCard,
+    multilink: MultilinkCard,
+    promo: PromoCard,
+    stat: StatCard,
+    text: TextCard,
+  };
+
+  const { type } = props;
+
+  const SelectedCardComponent = componentMap[type] || FeatureCard;
+  return <SelectedCardComponent {...props} />;
+};
+
+export default Card;