@ilo-org/react 0.3.0 → 0.4.1

package/lib/esm/components/Video/index.js

@@ -5,7 +5,7 @@ import '../../hooks/useGlobalSettings.js';
 import 'tslib';
 import 'react';
 import '../../GlobalCtx-7fb23cfa.js';
-import '../../VideoPlayer-62e0ce79.js';
+import '../../VideoPlayer-719076c4.js';
 import '../../index-8ebb2cc1.js';
 import 'react-dom';
 import '../../utils/hoursMinutesSeconds.js';

package/lib/esm/components/index.js

@@ -51,6 +51,8 @@ export { default as TableOfContents } from './TableOfContents/TableOfContents.js
 export { default as Footer } from './Footer/Footer.js';
 export { default as LocalNav } from './LocalNav/LocalNav.js';
 export { default as Navigation } from './Navigation/Navigation.js';
+export { default as Card } from './Card/Card.js';
+export { default as CardGroup } from './Card/CardGroup.js';
 import '../hooks/useGlobalSettings.js';
 import '../AccordionCtx-8c051900.js';
 import '@ilo-org/utils';
@@ -63,7 +65,9 @@ import '../css-7414f50b.js';
 import '../utils/transitionEndListener.js';
 import '../utils/triggerBrowserReflow.js';
 import './Hero/HeroCard.js';
-import '../VideoPlayer-62e0ce79.js';
+import '../VideoPlayer-719076c4.js';
 import '../utils/hoursMinutesSeconds.js';
 import 'screenfull';
 import '@ilo-org/icons-react';
+import './Logo/Logo.js';
+import './List/ListItem.js';

package/lib/esm/index.js

@@ -51,6 +51,8 @@ export { default as TableOfContents } from './components/TableOfContents/TableOf
 export { default as Footer } from './components/Footer/Footer.js';
 export { default as LocalNav } from './components/LocalNav/LocalNav.js';
 export { default as Navigation } from './components/Navigation/Navigation.js';
+export { default as Card } from './components/Card/Card.js';
+export { default as CardGroup } from './components/Card/CardGroup.js';
 import './hooks/useGlobalSettings.js';
 import './AccordionCtx-8c051900.js';
 import '@ilo-org/utils';
@@ -63,7 +65,9 @@ import './css-7414f50b.js';
 import './utils/transitionEndListener.js';
 import './utils/triggerBrowserReflow.js';
 import './components/Hero/HeroCard.js';
-import './VideoPlayer-62e0ce79.js';
+import './VideoPlayer-719076c4.js';
 import './utils/hoursMinutesSeconds.js';
 import 'screenfull';
 import '@ilo-org/icons-react';
+import './components/Logo/Logo.js';
+import './components/List/ListItem.js';

package/lib/types/react/src/components/Card/Card.d.ts

@@ -0,0 +1,4 @@
+import { FC } from "react";
+import { CardProps } from "./Card.props";
+declare const Card: FC<CardProps>;
+export default Card;

package/lib/types/react/src/components/Card/Card.props.d.ts

@@ -0,0 +1,110 @@
+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>;
+}
+export {};

package/lib/types/react/src/components/Card/CardGroup.d.ts

@@ -0,0 +1,4 @@
+import { FC } from "react";
+import { CardGroupProps } from "./CardGroup.props";
+declare const CardGroup: FC<CardGroupProps>;
+export default CardGroup;

package/lib/types/react/src/components/Card/CardGroup.props.d.ts

@@ -0,0 +1,16 @@
+import { CardProps } from "../Card/Card.props";
+import { LinkProps } from "../LinkList/LinkList.props";
+export interface CardGroupProps {
+    /**
+     * An array of card objects
+     */
+    cards?: Required<CardProps>[];
+    /**
+     * Number of cards in the group
+     */
+    cardcount: Required<string>;
+    /**
+     * A Button to display after all the cards in the group
+     */
+    cta?: LinkProps;
+}

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

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

package/lib/types/react/src/components/LocalNav/LocalNav.props.d.ts

@@ -1,21 +1,18 @@
 import { LinkProps, ContextMenuProps } from "../ContextMenu/ContextMenu.props";
+import { LogoProps } from "../Logo/Logo.props";
 export interface LocalNavProps {
     /**
      * Props for the background colour of the LocalNav
      */
     background?: string;
     /**
-     * Props for the logo of the LocalNav
+     * Props for the Logo component of the LocalNav
      */
-    logo?: Required<string>;
-    /**
-     * Props for the home url of the LocalNav
-     */
-    siteurl?: Required<string>;
+    logo: LogoProps;
     /**
      * Specify the primary items for the LocalNav
      */
-    primarynav?: Required<PrimaryNavProps>;
+    primarynav?: PrimaryNavProps;
     /**
      * Specify the main link for the LocalNav
      */

package/lib/types/react/src/components/Logo/Logo.d.ts

@@ -0,0 +1,4 @@
+import React from "react";
+import { LogoProps } from "./Logo.props";
+declare const Logo: React.FC<LogoProps>;
+export default Logo;

package/lib/types/react/src/components/Logo/Logo.props.d.ts

@@ -0,0 +1,55 @@
+type LogoSrc = string | {
+    /**
+     * The url of the logo to use with light theme
+     */
+    light: string;
+    /**
+     * The url of the logo to use with dark theme
+     */
+    dark: string;
+};
+export interface LogoProps {
+    /**
+     * The location of the image file
+     */
+    src: LogoSrc;
+    /**
+     * Alt text for the logo
+     */
+    alt: string;
+    /**
+     * The name of the sub-brand if there is one
+     */
+    subbrand?: string;
+    /**
+     * The width of the logo or 'fluid' width
+     */
+    size?: number | "fluid";
+    /**
+     * Styles to be applied to the outermost element
+     */
+    style?: React.CSSProperties;
+    /**
+     * Optional className to be passed to the outermost element of the component
+     */
+    className?: string;
+    /**
+     * Optional destination if the logo is a link
+     */
+    url?: string;
+    /**
+     * Optional target if the logo is a link
+     */
+    target?: "_blank" | "_self" | "_parent" | "_top";
+    /**
+     * Theme of the logo component
+     */
+    theme?: "light" | "dark";
+}
+export interface InnerLogoProps extends LogoProps {
+    /**
+     * The base class of the logo component
+     */
+    baseClass: string;
+}
+export {};

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

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

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

@@ -40,3 +40,4 @@ export { TableOfContents } from "./TableOfContents";
 export { Footer } from "./Footer";
 export { LocalNav } from "./LocalNav";
 export { Navigation } from "./Navigation";
+export { Card, CardGroup } from "./Card";

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.3.0",
+  "version": "0.4.1",
   "description": "React components for the ILO's Design System",
   "keywords": [
     "ui_patterns",
@@ -75,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.1",
     "@ilo-org/themes": "0.1.15",
     "@ilo-org/utils": "0.0.11"
   },
@@ -83,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;