@ilo-org/react 0.2.1 → 0.4.0

package/lib/types/react/src/types/index.d.ts

@@ -9,6 +9,7 @@ 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" | "password" | "search" | "tel" | "text" | "url";
+export type Language = "en" | "fr" | "es";
 export type LabelTypes = "default" | "actionable" | "light";
 export type LinkTypes = "light" | "dark" | "footer" | "button";
 export type LinkListThemes = "light" | "dark";
@@ -25,3 +26,8 @@ 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 CardColor = "turquoise" | "green" | "yellow" | "blue";
+export type CardSize = "wide" | "standard" | "narrow";
+export type CardCornerType = "cornercut" | "corner";
+export type CardAlignment = "left" | "right";
+export type CardTypes = "stat" | "multilink" | "graphic" | "graphicpromo" | "feature" | "detail" | "factlist" | "data";

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ilo-org/react",
-  "version": "0.2.1",
+  "version": "0.4.0",
   "description": "React components for the ILO's Design System",
   "keywords": [
     "ui_patterns",
@@ -9,6 +9,7 @@
     "designsystem",
     "components"
   ],
+  "homepage": "https://react.ui.ilo.org",
   "repository": {
     "type": "git",
     "url": "https://github.com/international-labour-organization/designsystem.git",
@@ -74,7 +75,7 @@
     "@ilo-org/brand-assets": "0.1.0",
     "@ilo-org/fonts": "0.1.0",
     "@ilo-org/icons-react": "0.0.18",
-    "@ilo-org/styles": "0.1.19",
+    "@ilo-org/styles": "0.2.0",
     "@ilo-org/themes": "0.1.15",
     "@ilo-org/utils": "0.0.11"
   },
@@ -82,24 +83,24 @@
     "@rollup/plugin-commonjs": "^23.0.2",
     "@rollup/plugin-json": "^5.0.1",
     "@rollup/plugin-node-resolve": "^15.0.1",
-    "@storybook/addon-a11y": "next",
-    "@storybook/addon-actions": "next",
-    "@storybook/addon-docs": "next",
-    "@storybook/addon-essentials": "next",
-    "@storybook/addon-links": "next",
+    "@storybook/addon-a11y": "^7.0.6",
+    "@storybook/addon-actions": "^7.0.6",
+    "@storybook/addon-docs": "^7.0.6",
+    "@storybook/addon-essentials": "^7.0.6",
+    "@storybook/addon-links": "^7.0.6",
     "@storybook/addon-postcss": "^2.0.0",
-    "@storybook/blocks": "next",
-    "@storybook/builder-webpack5": "next",
-    "@storybook/client-api": "next",
-    "@storybook/manager-api": "next",
+    "@storybook/blocks": "^7.0.6",
+    "@storybook/builder-webpack5": "^7.0.6",
+    "@storybook/client-api": "^7.0.6",
+    "@storybook/manager-api": "^7.0.6",
     "@storybook/manager-webpack5": "6.5.15",
-    "@storybook/node-logger": "next",
-    "@storybook/preset-create-react-app": "4.1.2",
+    "@storybook/node-logger": "^7.0.6",
+    "@storybook/preset-create-react-app": "7.0.6",
     "@storybook/preset-scss": "^1.0.3",
-    "@storybook/react": "next",
-    "@storybook/react-webpack5": "next",
-    "@storybook/testing-react": "next",
-    "@storybook/theming": "next",
+    "@storybook/react": "^7.0.6",
+    "@storybook/react-webpack5": "^7.0.6",
+    "@storybook/testing-react": "2.0.0",
+    "@storybook/theming": "^7.0.6",
     "@testing-library/jest-dom": "^5.16.5",
     "@testing-library/react": "^12.1.2",
     "@testing-library/user-event": "^13.5.0",

package/src/components/Accordion/Accordion.args.ts

@@ -12,8 +12,5 @@ const large: AccordionProps = {
 /**
  * Sample prop definitions for Accordions's enumerable properties (imported in stories and tests).
  */
-const AccordionArgs = {
-  large,
-};
 
-export default AccordionArgs;
+export { large };

package/src/components/Card/Card.args.ts

@@ -0,0 +1,215 @@
+import { CardProps } from "./Card.props";
+
+const graphicTextCard: CardProps = {
+  variant: "graphic",
+  title: "Why we need greater social justice",
+  eyebrow: "Podcast",
+  date: {
+    human: "20 September 2022",
+    unix: "1670389200",
+  },
+  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:
+      "Gilbert Houngbo is the Director-General of the International Labour Organization",
+    name: "Gilbert Houngbo",
+    role: "ILO Director-General",
+  },
+};
+
+const statCard: CardProps = {
+  variant: "stat",
+  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",
+  source: {
+    label: "World Employment and Social Outlook: Trends 2023",
+    url: "https://www.ilo.org",
+  },
+};
+
+const multilinkCard: CardProps = {
+  variant: "multilink",
+  title:
+    "ILO welcomes G7 call to make a just transition to a green economy happen",
+  eyebrow: "High-level meeting",
+  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.",
+  image: "/hero.jpg",
+  alignment: "left",
+  date: {
+    human: "6 September 2023",
+    unix: "1670389200",
+  },
+  linklist: {
+    headline: "",
+    linkgroup: [
+      {
+        links: [
+          {
+            label: "Read the press release",
+            url: "https://www.ilo.org",
+          },
+          {
+            label: "See the statement",
+            url: "https://www.ilo.org",
+          },
+          {
+            label: "Remarks to G7 Openening Session",
+            url: "https://www.ilo.org",
+          },
+        ],
+      },
+    ],
+  },
+};
+
+const graphicPromoCard: CardProps = {
+  variant: "graphicpromo",
+  title:
+    "ILO welcomes G7 call to make a just transition to a green economy happen",
+  eyebrow: "High-level meeting",
+  theme: "light",
+  cornercut: "cornercut",
+  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",
+  cta: {
+    label: "Read the press release",
+    url: "https://www.ilo.org",
+  },
+};
+
+const featureCard: CardProps = {
+  variant: "feature",
+  isvideo: false,
+  title:
+    "ILO welcomes G7 call to make a just transition to a green economy happen",
+  eyebrow: "High-level meeting",
+  theme: "light",
+  date: {
+    human: "18 March 2023",
+    unix: "1670389200",
+  },
+  image: "/hero.jpg",
+  link: "https:/www.ilo.org",
+  linklist: {
+    headline: "",
+    linkgroup: [
+      {
+        links: [
+          {
+            label: "Read the press release",
+            url: "http://www.google.com",
+          },
+        ],
+      },
+    ],
+  },
+};
+
+const detailCard: CardProps = {
+  variant: "detail",
+  title: "Technical meeting on digitalization in the construction sector",
+  eyebrow: "Meeting",
+  intro:
+    "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.",
+  date: {
+    human: "18 March 2023",
+    unix: "1670389200",
+  },
+  image: "/medium.jpg",
+  link: "https:/www.ilo.org",
+  eventdetails: "8:30 - 12:00 CET | Geneva",
+};
+
+const factListCard: CardProps = {
+  variant: "factlist",
+  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: [
+    "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",
+  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.",
+  dataset: {
+    content: {
+      items: [
+        {
+          label: "Date",
+          copy: "18 March 2023",
+        },
+        {
+          label: "Event type",
+          copy: "Technical meeting of experts",
+        },
+      ],
+    },
+    files: {
+      headline: "Files",
+      items: [
+        {
+          label: "Meeting agenda",
+          url: "https://www.ilo.org",
+        },
+        {
+          label: "Briefing notes",
+          url: "https://www.ilo.org",
+        },
+        {
+          label: "Practical info",
+          url: "https://www.ilo.org",
+        },
+      ],
+    },
+    links: {
+      headline: "Languages",
+      items: [
+        {
+          label: "English",
+          url: "https://www.ilo.org",
+        },
+        {
+          label: "Español",
+          url: "https://www.ilo.org",
+        },
+        {
+          label: "Français",
+          url: "https://www.ilo.org",
+        },
+      ],
+    },
+  },
+};
+
+const CardArgs = {
+  graphicTextCard,
+  statCard,
+  multilinkCard,
+  graphicPromoCard,
+  featureCard,
+  detailCard,
+  factListCard,
+  dataCard,
+};
+
+export default CardArgs;

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

@@ -0,0 +1,142 @@
+import {
+  CardAlignment,
+  HeroCardTheme,
+  CardCornerType,
+  CardColor,
+  CardSize,
+  CardTypes,
+} from "../../types";
+import { LinkProps, LinkListProps } from "../LinkList/LinkList.props";
+import { ProfileProps } from "../Profile/Profile.props";
+
+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: Required<string>;
+
+  /**
+   * Title field for the card
+   */
+  title: Required<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?: HeroCardTheme;
+
+  /**
+   * Different variations of card: Graphic | Stat | Graphic Promo | Multilink | Feature | Detail | Fact List | Data.
+   */
+  variant: Required<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 cards that use this setting are `Graphic Promo` and `Factlist`. Possible options: cornercut | corner.
+   */
+  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 `Graphic Text`
+   */
+  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 `Graphic Promo` card.
+   */
+  cta?: LinkProps;
+
+  /**
+   * The image used in a card. Images should be avoided on `Graphic Promo`, `Graphic 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;
+}
+
+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>;
+}

package/src/components/Card/Card.tsx

@@ -0,0 +1,183 @@
+import { FC } from "react";
+import classnames from "classnames";
+import useGlobalSettings from "../../hooks/useGlobalSettings";
+import { CardProps } from "./Card.props";
+import { Link } from "../Link";
+import { List, ListItem } from "../List";
+import { LinkList } from "../LinkList";
+import { Profile } from "../Profile";
+
+const Card: FC<CardProps> = ({
+  isvideo,
+  eyebrow,
+  title,
+  color,
+  theme,
+  variant,
+  size,
+  cornercut,
+  alignment,
+  intro,
+  date,
+  eventdetails,
+  profile,
+  listitems,
+  link,
+  linklist,
+  cta,
+  image,
+  source,
+  dataset,
+}) => {
+  const { prefix } = useGlobalSettings();
+
+  const baseClass = `${prefix}--card`;
+  const cardClasses = classnames(
+    baseClass,
+    `${baseClass}--${variant}`,
+    `${baseClass}--${color}`,
+    {
+      [`${baseClass}--${cornercut}`]: cornercut,
+      [`${baseClass}--${alignment}`]: alignment,
+      [`${baseClass}--action`]: link,
+      [`${baseClass}--${size}`]: size,
+      [`${baseClass}--isvideo`]: isvideo,
+      [`${baseClass}--linklist`]: linklist,
+      [`${baseClass}--${theme}`]: theme,
+    }
+  );
+
+  return (
+    <div className={cardClasses}>
+      {link &&
+        variant != "data" &&
+        variant != "factlist" &&
+        variant != "stat" && (
+          <a className={`${baseClass}--link`} href={link} title={title}>
+            <span className={`${baseClass}--link--text`}>{title}</span>
+          </a>
+        )}
+      <div className={`${baseClass}--wrap`}>
+        {image && (
+          <div className={`${baseClass}--image--wrapper`}>
+            <picture>
+              <img className={`${baseClass}--image`} src={image} alt={title} />
+            </picture>
+          </div>
+        )}
+        <div className={`${baseClass}--content`}>
+          {eyebrow && <p className={`${baseClass}--eyebrow`}>{eyebrow}</p>}
+          {title && <h5 className={`${baseClass}--title`}>{title}</h5>}
+          {(variant == "multilink" || (variant == "data" && image)) && (
+            <div className={`${baseClass}--image--wrapper`}>
+              <picture>
+                <img
+                  className={`${baseClass}--image`}
+                  src={image}
+                  alt={title}
+                />
+              </picture>
+            </div>
+          )}
+          {intro && <p className={`${baseClass}--intro`}>{intro}</p>}
+          {date &&
+            variant != "stat" &&
+            variant != "data" &&
+            variant != "graphicpromo" &&
+            variant != "factlist" && (
+              <time className={`${baseClass}--date`} dateTime={date.unix}>
+                {date.human}
+              </time>
+            )}
+          {eventdetails && (
+            <p className={`${baseClass}--event-date`}>{eventdetails}</p>
+          )}
+          {profile && profile.avatar && (
+            <Profile
+              avatar={profile.avatar}
+              description={profile.description}
+              link={profile.link}
+              name={profile.name}
+              role={profile.role}
+              className={`${prefix}--profile--contents--${theme}`}
+            />
+          )}
+          {listitems && (
+            <List alignment="default" ordered="unordered">
+              {listitems.map((item, index) => (
+                <ListItem id={`list${index}`}>
+                  <p>{item}</p>
+                </ListItem>
+              ))}
+            </List>
+          )}
+          {cta && cta.label && (
+            <a
+              className={`${baseClass}--cta ${prefix}--button ${prefix}--button--medium ${prefix}--button--primary`}
+              href={cta.url}
+            >
+              <span className="link__label">{cta.label}</span>
+            </a>
+          )}
+          {source && (
+            <Link theme={theme} url={source.url}>
+              {source.label}
+            </Link>
+          )}
+          {linklist && (
+            <LinkList
+              headline={linklist.headline}
+              linkgroup={linklist.linkgroup}
+            />
+          )}
+          {dataset &&
+            dataset.content &&
+            dataset.content.items &&
+            dataset.content.items.map((item) => (
+              <>
+                <p className={`${baseClass}--data--content-label`}>
+                  {item.label}
+                </p>
+                <p className={`${baseClass}--data--content-copy`}>
+                  {item.copy}
+                </p>
+              </>
+            ))}
+          {dataset && dataset.files && (
+            <div className={`${baseClass}--data--content-files`}>
+              <p className={`${baseClass}--data--content-label`}>
+                {dataset.files.headline}
+              </p>
+              {dataset.files.items &&
+                dataset.files.items.map((item) => (
+                  <a
+                    className={`${baseClass}--data--file ${prefix}--button ${prefix}--button--primary ${prefix}--button--small`}
+                    href={item.url}
+                    download
+                  >
+                    <span className="button__label">{item.label}</span>
+                  </a>
+                ))}
+            </div>
+          )}
+          {dataset && dataset.links && (
+            <div className={`${baseClass}--data--content-links`}>
+              <p className={`${baseClass}--data--content-label`}>
+                {dataset.links.headline}
+              </p>
+              {dataset.links.items &&
+                dataset.links.items.map((item) => (
+                  <>
+                    <Link url={item.url}>{item.label}</Link>
+                    <span>&nbsp;&nbsp;</span>
+                  </>
+                ))}
+            </div>
+          )}
+        </div>
+      </div>
+    </div>
+  );
+};
+
+export default Card;