@ilo-org/react 0.13.0 → 0.14.0

package/src/components/Cards/CardGroup/CardGroup.args.ts

@@ -3,13 +3,30 @@ import { CardGroupProps } from "./CardGroup.props";
 export const textCardGroup: CardGroupProps = {
   cards: [
     {
-      title: "Why we need greater social justice",
-      eyebrow: "Podcast",
+      title: "ILO welcomes first global agreement on working conditions",
+      eyebrow: "Press release",
       date: {
         human: "20 September 2022",
         unix: "1670389200",
       },
-      theme: "light",
+      theme: "dark",
+      link: "https:/www.ilo.org",
+      profile: {
+        avatar: "/ilo-dg.jpg",
+        description:
+          "Gilbert Houngbo is the Director-General of the International Labour Organization",
+        name: "Gilbert Houngbo",
+        role: "ILO Director-General",
+      },
+    },
+    {
+      title: "Renewable energy jobs hit 12.7 million globally",
+      eyebrow: "Report",
+      date: {
+        human: "21 September 2022",
+        unix: "1670389200",
+      },
+      theme: "dark",
       link: "https:/www.ilo.org",
       profile: {
         avatar: "/ilo-dg.jpg",
@@ -20,13 +37,30 @@ export const textCardGroup: CardGroupProps = {
       },
     },
     {
-      title: "Why we need greater social justice",
+      title: "Can digital technology be an equality machine? ",
       eyebrow: "Podcast",
       date: {
-        human: "20 September 2022",
+        human: "25 September 2022",
         unix: "1670389200",
       },
-      theme: "light",
+      theme: "dark",
+      link: "https:/www.ilo.org",
+      profile: {
+        avatar: "/ilo-dg.jpg",
+        description:
+          "Gilbert Houngbo is the Director-General of the International Labour Organization",
+        name: "Gilbert Houngbo",
+        role: "ILO Director-General",
+      },
+    },
+    {
+      title: "Why we need greater social justice?",
+      eyebrow: "Podcast",
+      date: {
+        human: "31 September 2022",
+        unix: "1670389200",
+      },
+      theme: "dark",
       link: "https:/www.ilo.org",
       profile: {
         avatar: "/ilo-dg.jpg",
@@ -37,7 +71,7 @@ export const textCardGroup: CardGroupProps = {
       },
     },
   ],
-  cardCount: "two",
+  cardCount: "three",
   type: "text",
   cta: {
     label: "Discover our unique mission",
@@ -48,9 +82,9 @@ export const textCardGroup: CardGroupProps = {
 const statCardGroup: CardGroupProps = {
   cards: [
     {
-      title: "Global employment growth down by half in 2023",
+      title: "Can digital technology be an equality machine?",
       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.",
+        "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.",
       color: "turquoise",
       source: {
         label: "World Employment and Social Outlook: Trends 2023",
@@ -58,7 +92,7 @@ const statCardGroup: CardGroupProps = {
       },
     },
     {
-      title: "Global employment growth down by half in 2023",
+      title: "Renewable energy jobs hit 12.7 million globally",
       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",
@@ -68,9 +102,9 @@ const statCardGroup: CardGroupProps = {
       },
     },
     {
-      title: "Global employment growth down by half in 2023",
+      title: "Global employment growth down by half",
       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.",
+        "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.",
       color: "turquoise",
       source: {
         label: "World Employment and Social Outlook: Trends 2023",
@@ -78,7 +112,8 @@ const statCardGroup: CardGroupProps = {
       },
     },
     {
-      title: "Global employment growth down by half in 2023",
+      title:
+        "ILO welcomes first global agreement on working conditions and rights of professional football players",
       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",
@@ -88,7 +123,7 @@ const statCardGroup: CardGroupProps = {
       },
     },
   ],
-  cardCount: "four",
+  cardCount: "three",
   type: "stat",
   cta: {
     label: "Discover our unique mission",
@@ -99,9 +134,8 @@ const statCardGroup: CardGroupProps = {
 const multilinkCardGroup: CardGroupProps = {
   cards: [
     {
-      title:
-        "ILO welcomes G7 call to make a just transition to a green economy happen",
-      eyebrow: "High-level meeting",
+      title: "ILO welcomes first global agreement on working conditions",
+      eyebrow: "Press release",
       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",
@@ -132,6 +166,66 @@ const multilinkCardGroup: CardGroupProps = {
     {
       title:
         "ILO welcomes G7 call to make a just transition to a green economy happen",
+      eyebrow: "Report",
+      intro:
+        "A toxic combination of mutually-reinforcing crises inflation, debt, food and fuel price rises, geopolitical tensions and conflict.",
+      image: "/hero.jpg",
+      alignment: "left",
+      link: "https:/www.ilo.org",
+      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",
+              },
+            ],
+          },
+        ],
+      },
+    },
+    {
+      title: "Telangana and Andhra Pradesh launch pre-departure handbook",
+      eyebrow: "Podcast",
+      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",
+      link: "https:/www.ilo.org",
+      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",
+              },
+            ],
+          },
+        ],
+      },
+    },
+    {
+      title: "Renewable energy jobs hit 12.7 million globally",
       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.",
@@ -162,7 +256,7 @@ const multilinkCardGroup: CardGroupProps = {
     },
   ],
   type: "multilink",
-  cardCount: "two",
+  cardCount: "three",
   cta: {
     label: "Discover our unique mission",
     url: "https://www.ilo.org",
@@ -173,9 +267,8 @@ const promoCardGroup: CardGroupProps = {
   cards: [
     {
       size: "standard",
-      title:
-        "ILO welcomes G7 call to make a just transition to a green economy happen",
-      eyebrow: "High-level meeting",
+      title: "ILO welcomes first global agreement on working conditions",
+      eyebrow: "Report",
       theme: "dark",
       cornercut: true,
       intro:
@@ -188,8 +281,7 @@ const promoCardGroup: CardGroupProps = {
     },
     {
       size: "standard",
-      title:
-        "ILO welcomes G7 call to make a just transition to a green economy happen",
+      title: "Renewable energy jobs hits 12.7 million globally",
       eyebrow: "High-level meeting",
       theme: "dark",
       cornercut: true,
@@ -203,8 +295,21 @@ const promoCardGroup: CardGroupProps = {
     },
     {
       size: "standard",
-      title:
-        "ILO welcomes G7 call to make a just transition to a green economy happen",
+      title: "ILO welcomes G7 call to make a just transition",
+      eyebrow: "Podcast",
+      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",
+      cta: {
+        label: "Read the press release",
+        url: "https://www.ilo.org",
+      },
+    },
+    {
+      size: "standard",
+      title: "Telangana and Andhra Pradesh launch pre-departure handbook",
       eyebrow: "High-level meeting",
       theme: "dark",
       cornercut: true,
@@ -218,7 +323,7 @@ const promoCardGroup: CardGroupProps = {
     },
   ],
   type: "promo",
-  cardCount: "two",
+  cardCount: "three",
   cta: {
     label: "Discover our unique mission",
     url: "https://www.ilo.org",
@@ -231,12 +336,8 @@ const featureCardGroup: CardGroupProps = {
       isvideo: false,
       title:
         "ILO welcomes G7 call to make a just transition to a green economy happen",
-      eyebrow: "High-level meeting",
+      eyebrow: "Press release",
       theme: "dark",
-      date: {
-        human: "18 March 2023",
-        unix: "1670389200",
-      },
       image: "/small.jpg",
       link: "https:/www.ilo.org",
       linklist: {
@@ -255,14 +356,9 @@ const featureCardGroup: CardGroupProps = {
     },
     {
       isvideo: false,
-      title:
-        "ILO welcomes G7 call to make a just transition to a green economy happen",
-      eyebrow: "High-level meeting",
+      title: "Renewable energy jobs hit 12.7 million globally",
+      eyebrow: "Report",
       theme: "dark",
-      date: {
-        human: "18 March 2023",
-        unix: "1670389200",
-      },
       image: "/small.jpg",
       link: "https:/www.ilo.org",
       linklist: {
@@ -282,13 +378,9 @@ const featureCardGroup: CardGroupProps = {
     {
       isvideo: false,
       title:
-        "ILO welcomes G7 call to make a just transition to a green economy happen",
-      eyebrow: "High-level meeting",
+        "Telangana and Andhra Pradesh launch pre-departure handbook for Indians going to the European Union",
+      eyebrow: "Podcast",
       theme: "dark",
-      date: {
-        human: "18 March 2023",
-        unix: "1670389200",
-      },
       image: "/small.jpg",
       link: "https:/www.ilo.org",
       linklist: {
@@ -307,14 +399,9 @@ const featureCardGroup: CardGroupProps = {
     },
     {
       isvideo: false,
-      title:
-        "ILO welcomes G7 call to make a just transition to a green economy happen",
-      eyebrow: "High-level meeting",
+      title: "Can digital technology be an equality machine?",
+      eyebrow: "Podcast",
       theme: "dark",
-      date: {
-        human: "18 March 2023",
-        unix: "1670389200",
-      },
       image: "/small.jpg",
       link: "https:/www.ilo.org",
       linklist: {
@@ -345,6 +432,19 @@ const detailCardGroup: CardGroupProps = {
     {
       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: "12 March 2023",
+        unix: "1670389200",
+      },
+      image: "/medium.jpg",
+      link: "https:/www.ilo.org",
+      eventdetails: "5:30 - 12:00 CET | Geneva",
+    },
+    {
+      title: "Renewable energy jobs hit 12.7 million globally",
+      eyebrow: "Promo",
       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: {
@@ -353,24 +453,37 @@ const detailCardGroup: CardGroupProps = {
       },
       image: "/medium.jpg",
       link: "https:/www.ilo.org",
-      eventdetails: "8:30 - 12:00 CET | Geneva",
+      eventdetails: "7:30 - 12:00 CET | Geneva",
     },
     {
-      title: "Technical meeting on digitalization in the construction sector",
+      title: "Telangana and Andhra Pradesh launch pre-departure handbook",
+      eyebrow: "Report",
+      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: "22 March 2023",
+        unix: "1670389200",
+      },
+      image: "/medium.jpg",
+      link: "https:/www.ilo.org",
+      eventdetails: "10:30 - 12:00 CET | Geneva",
+    },
+    {
+      title: "Can digital technology be an equality machine?",
       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",
+        human: "31 March 2023",
         unix: "1670389200",
       },
       image: "/medium.jpg",
       link: "https:/www.ilo.org",
-      eventdetails: "8:30 - 12:00 CET | Geneva",
+      eventdetails: "11:30 - 12:00 CET | Geneva",
     },
   ],
   type: "detail",
-  cardCount: "two",
+  cardCount: "three",
   cta: {
     label: "Discover our unique mission",
     url: "https://www.ilo.org",
@@ -379,6 +492,15 @@ const detailCardGroup: CardGroupProps = {
 
 const factListCardGroup: CardGroupProps = {
   cards: [
+    {
+      title: "ILO welcomes first global agreement on working conditions",
+      theme: "light",
+      list: [
+        "The current slowdown means that many workers will have to accept lower quality jobs, often at very low pay.",
+        "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.",
+      ],
+    },
     {
       title:
         "Economic slowdown likely to force workers to accept lower quality jobs",
@@ -390,8 +512,16 @@ const factListCardGroup: CardGroupProps = {
       ],
     },
     {
-      title:
-        "Economic slowdown likely to force workers to accept lower quality jobs",
+      title: "Telangana and Andhra Pradesh launch pre-departure handbook",
+      theme: "light",
+      list: [
+        "The current slowdown means that many workers will have to accept lower quality jobs, often at very low pay.",
+        "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.",
+      ],
+    },
+    {
+      title: "Renewable energy jobs hit 12.7 million globally",
       theme: "light",
       list: [
         "Global employment growth will be only 1.0 per cent in 2023, less than half the level in 2022.",
@@ -401,7 +531,7 @@ const factListCardGroup: CardGroupProps = {
     },
   ],
   type: "factlist",
-  cardCount: "two",
+  cardCount: "three",
   cta: {
     label: "Discover our unique mission",
     url: "https://www.ilo.org",
@@ -411,83 +541,16 @@ const factListCardGroup: CardGroupProps = {
 const dataCardGroup: CardGroupProps = {
   cards: [
     {
-      size: "wide",
-      eyebrow: "Meeting",
-      image: "/small.jpg",
-      columns: "two",
-      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",
-            },
-          ],
-        },
-        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: [
-            {
-              label: "English",
-              url: "https://www.ilo.org",
-            },
-            {
-              label: "Español",
-              url: "https://www.ilo.org",
-            },
-            {
-              label: "Français",
-              url: "https://www.ilo.org",
-            },
-          ],
-        },
-      },
-    },
-    {
-      size: "wide",
-      eyebrow: "Meeting",
+      size: "standard",
+      eyebrow: "Press release",
       image: "/small.jpg",
-      columns: "two",
+      columns: "one",
       dataset: {
         content: {
           items: [
             {
               label: "Date",
-              copy: "18 March 2023",
+              copy: "20 March 2023",
             },
             {
               label: "Event type",
@@ -502,10 +565,6 @@ const dataCardGroup: CardGroupProps = {
               label: "Meeting agenda",
               url: "https://www.ilo.org",
             },
-            {
-              label: "Briefing notes",
-              url: "https://www.ilo.org",
-            },
             {
               label: "Practical info",
               url: "https://www.ilo.org",
@@ -545,30 +604,26 @@ const dataCardGroup: CardGroupProps = {
       },
     },
     {
-      size: "wide",
-      eyebrow: "Meeting",
+      size: "standard",
+      eyebrow: "Report",
       image: "/small.jpg",
-      columns: "two",
+      columns: "one",
       dataset: {
         content: {
           items: [
             {
               label: "Date",
-              copy: "18 March 2023",
+              copy: "23 March 2023",
             },
             {
               label: "Event type",
-              copy: "Technical meeting of experts",
+              copy: "Casual meeting",
             },
           ],
         },
         files: {
           headline: "Files",
           items: [
-            {
-              label: "Meeting agenda",
-              url: "https://www.ilo.org",
-            },
             {
               label: "Briefing notes",
               url: "https://www.ilo.org",
@@ -595,10 +650,6 @@ const dataCardGroup: CardGroupProps = {
         links: {
           headline: "Languages",
           items: [
-            {
-              label: "English",
-              url: "https://www.ilo.org",
-            },
             {
               label: "Español",
               url: "https://www.ilo.org",
@@ -612,16 +663,16 @@ const dataCardGroup: CardGroupProps = {
       },
     },
     {
-      size: "wide",
+      size: "standard",
       eyebrow: "Meeting",
       image: "/small.jpg",
-      columns: "two",
+      columns: "one",
       dataset: {
         content: {
           items: [
             {
               label: "Date",
-              copy: "18 March 2023",
+              copy: "24 March 2023",
             },
             {
               label: "Event type",
@@ -632,14 +683,6 @@ const dataCardGroup: CardGroupProps = {
         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",
@@ -670,25 +713,21 @@ const dataCardGroup: CardGroupProps = {
               label: "Español",
               url: "https://www.ilo.org",
             },
-            {
-              label: "Français",
-              url: "https://www.ilo.org",
-            },
           ],
         },
       },
     },
     {
-      size: "wide",
+      size: "standard",
       eyebrow: "Meeting",
       image: "/small.jpg",
-      columns: "two",
+      columns: "one",
       dataset: {
         content: {
           items: [
             {
               label: "Date",
-              copy: "18 March 2023",
+              copy: "29 March 2023",
             },
             {
               label: "Event type",
@@ -746,7 +785,7 @@ const dataCardGroup: CardGroupProps = {
       },
     },
   ],
-  cardCount: "four",
+  cardCount: "three",
   type: "data",
   cta: {
     label: "Discover our unique mission",

package/src/components/Cards/TextCard/TextCard.tsx

@@ -49,7 +49,7 @@ const TextCard: FC<TextCardProps> = ({
                 link={profile.link}
                 name={profile.name}
                 role={profile.role}
-                className={`${prefix}--profile--contents--${theme}`}
+                className={`${prefix}--profile__theme__${theme}`}
               />
             )}
           </div>

package/src/components/List/List.props.ts

@@ -1,5 +1,4 @@
 import { ReactElement } from "react";
-import { HeadingLevel, ListAlignment, ListOrder } from "../../types";
 import { ListItemProps } from "./ListItem.props";
 
 export interface ListProps {
@@ -11,12 +10,12 @@ export interface ListProps {
   /**
    * Declare ordered, unordered or unstyled
    */
-  ordered?: ListOrder;
+  ordered?: "unordered" | "ordered" | "unstyled";
 
   /**
    * Declare horizontal or default
    */
-  alignment?: ListAlignment;
+  alignment?: "default" | "horizontal";
 
   /**
    * Specify an optional title
@@ -28,10 +27,3 @@ export interface ListProps {
    */
   className?: string;
 }
-
-export interface ListContextProps {
-  activeItems: string[];
-  alignment?: ListAlignment;
-  ordered?: ListOrder;
-  headingLevel?: HeadingLevel;
-}