@ilo-org/react 0.11.0 → 0.12.0

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

@@ -1,9 +1,9 @@
 import { CardGroupProps } from "./CardGroup.props";
 
-const graphicCardGroup: CardGroupProps = {
+const textCardGroup: CardGroupProps = {
   cards: [
     {
-      variant: "graphic",
+      type: "text",
       title: "Why we need greater social justice",
       eyebrow: "Podcast",
       date: {
@@ -45,7 +45,7 @@ const graphicCardGroup: CardGroupProps = {
 const statCardGroup: CardGroupProps = {
   cards: [
     {
-      variant: "stat",
+      type: "stat",
       title: "Global employment growth down by half in 2023",
       eyebrow: "Report",
       intro:
@@ -71,7 +71,7 @@ const statCardGroup: CardGroupProps = {
       date: {},
     },
     {
-      variant: "stat",
+      type: "stat",
       title: "Global employment growth down by half in 2023",
       eyebrow: "Report",
       intro:
@@ -97,7 +97,7 @@ const statCardGroup: CardGroupProps = {
       date: {},
     },
     {
-      variant: "stat",
+      type: "stat",
       title: "Global employment growth down by half in 2023",
       eyebrow: "Report",
       intro:
@@ -123,7 +123,7 @@ const statCardGroup: CardGroupProps = {
       date: {},
     },
     {
-      variant: "stat",
+      type: "stat",
       title: "Global employment growth down by half in 2023",
       eyebrow: "Report",
       intro:
@@ -159,7 +159,7 @@ const statCardGroup: CardGroupProps = {
 const multilinkCardGroup: CardGroupProps = {
   cards: [
     {
-      variant: "multilink",
+      type: "multilink",
       title:
         "ILO welcomes G7 call to make a just transition to a green economy happen",
       eyebrow: "High-level meeting",
@@ -206,7 +206,7 @@ const multilinkCardGroup: CardGroupProps = {
       link: "",
     },
     {
-      variant: "multilink",
+      type: "multilink",
       title:
         "ILO welcomes G7 call to make a just transition to a green economy happen",
       eyebrow: "High-level meeting",
@@ -260,10 +260,10 @@ const multilinkCardGroup: CardGroupProps = {
   },
 };
 
-const graphicPromoCardGroup: CardGroupProps = {
+const promoCardGroup: CardGroupProps = {
   cards: [
     {
-      variant: "graphicpromo",
+      type: "promo",
       title:
         "ILO welcomes G7 call to make a just transition to a green economy happen",
       eyebrow: "High-level meeting",
@@ -290,7 +290,7 @@ const graphicPromoCardGroup: CardGroupProps = {
       date: {},
     },
     {
-      variant: "graphicpromo",
+      type: "promo",
       title:
         "ILO welcomes G7 call to make a just transition to a green economy happen",
       eyebrow: "High-level meeting",
@@ -317,7 +317,7 @@ const graphicPromoCardGroup: CardGroupProps = {
       date: {},
     },
     {
-      variant: "graphicpromo",
+      type: "promo",
       title:
         "ILO welcomes G7 call to make a just transition to a green economy happen",
       eyebrow: "High-level meeting",
@@ -354,7 +354,7 @@ const graphicPromoCardGroup: CardGroupProps = {
 const featureCardGroup: CardGroupProps = {
   cards: [
     {
-      variant: "feature",
+      type: "feature",
       isvideo: false,
       title:
         "ILO welcomes G7 call to make a just transition to a green economy happen",
@@ -392,7 +392,7 @@ const featureCardGroup: CardGroupProps = {
       source: {},
     },
     {
-      variant: "feature",
+      type: "feature",
       isvideo: true,
       title:
         "ILO welcomes G7 call to make a just transition to a green economy happen",
@@ -430,7 +430,7 @@ const featureCardGroup: CardGroupProps = {
       source: {},
     },
     {
-      variant: "feature",
+      type: "feature",
       isvideo: false,
       title:
         "ILO welcomes G7 call to make a just transition to a green economy happen",
@@ -468,7 +468,7 @@ const featureCardGroup: CardGroupProps = {
       source: {},
     },
     {
-      variant: "feature",
+      type: "feature",
       isvideo: false,
       title:
         "ILO welcomes G7 call to make a just transition to a green economy happen",
@@ -516,7 +516,7 @@ const featureCardGroup: CardGroupProps = {
 const detailCardGroup: CardGroupProps = {
   cards: [
     {
-      variant: "detail",
+      type: "detail",
       title: "Technical meeting on digitalization in the construction sector",
       eyebrow: "Meeting",
       intro:
@@ -542,7 +542,7 @@ const detailCardGroup: CardGroupProps = {
       source: {},
     },
     {
-      variant: "detail",
+      type: "detail",
       title: "Technical meeting on digitalization in the construction sector",
       eyebrow: "Meeting",
       intro:
@@ -578,7 +578,7 @@ const detailCardGroup: CardGroupProps = {
 const factListCardGroup: CardGroupProps = {
   cards: [
     {
-      variant: "factlist",
+      type: "factlist",
       title:
         "Economic slowdown likely to force workers to accept lower quality jobs",
       eyebrow: "Report",
@@ -606,7 +606,7 @@ const factListCardGroup: CardGroupProps = {
       image: "",
     },
     {
-      variant: "factlist",
+      type: "factlist",
       title:
         "Economic slowdown likely to force workers to accept lower quality jobs",
       eyebrow: "Report",
@@ -644,7 +644,7 @@ const factListCardGroup: CardGroupProps = {
 const dataCardGroup: CardGroupProps = {
   cards: [
     {
-      variant: "data",
+      type: "data",
       title: "Technical meeting on digitalization in the construction sector",
       eyebrow: "Meeting",
       eventdetails:
@@ -714,7 +714,7 @@ const dataCardGroup: CardGroupProps = {
       image: "",
     },
     {
-      variant: "data",
+      type: "data",
       title: "Technical meeting on digitalization in the construction sector",
       eyebrow: "Meeting",
       eventdetails:
@@ -784,7 +784,7 @@ const dataCardGroup: CardGroupProps = {
       image: "",
     },
     {
-      variant: "data",
+      type: "data",
       title: "Technical meeting on digitalization in the construction sector",
       eyebrow: "Meeting",
       eventdetails:
@@ -854,7 +854,7 @@ const dataCardGroup: CardGroupProps = {
       image: "",
     },
     {
-      variant: "data",
+      type: "data",
       title: "Technical meeting on digitalization in the construction sector",
       eyebrow: "Meeting",
       eventdetails:
@@ -932,10 +932,10 @@ const dataCardGroup: CardGroupProps = {
 };
 
 const CardGroupArgs = {
-  graphicCardGroup,
+  textCardGroup,
   statCardGroup,
   multilinkCardGroup,
-  graphicPromoCardGroup,
+  promoCardGroup,
   featureCardGroup,
   detailCardGroup,
   factListCardGroup,

package/src/components/{Card → Cards}/CardGroup.props.ts

@@ -1,4 +1,4 @@
-import { CardProps } from "../Card/Card.props";
+import { CardProps } from "./Card.props";
 import { LinkProps } from "../LinkList/LinkList.props";
 
 export interface CardGroupProps {

package/src/components/{Card → Cards}/CardGroup.tsx

@@ -2,7 +2,7 @@ import { FC } from "react";
 import classnames from "classnames";
 import useGlobalSettings from "../../hooks/useGlobalSettings";
 import { CardGroupProps } from "./CardGroup.props";
-import { Card } from "../Card";
+import { Card } from ".";
 
 const CardGroup: FC<CardGroupProps> = ({ cards, cardcount, cta }) => {
   const { prefix } = useGlobalSettings();
@@ -32,22 +32,21 @@ const CardGroup: FC<CardGroupProps> = ({ cards, cardcount, cta }) => {
               theme={card.theme}
               cornercut={card.cornercut}
               alignment={card.alignment}
-              variant={card.variant}
+              type={card.type}
               size={card.size}
             />
           ))}
-
-        {cta && (
-          <div className={`${baseClass}--button-wrap`}>
-            <a
-              className={`${prefix}--button ${prefix}--button--medium ${prefix}--button--secondary`}
-              href={cta.url}
-            >
-              <span className="button__label">{cta.label}</span>
-            </a>
-          </div>
-        )}
       </div>
+      {cta && (
+        <div className={`${baseClass}--button-wrap`}>
+          <a
+            className={`${prefix}--button ${prefix}--button--medium ${prefix}--button--secondary`}
+            href={cta.url}
+          >
+            <span className="button__label">{cta.label}</span>
+          </a>
+        </div>
+      )}
     </div>
   );
 };

package/src/components/Cards/DataCard/index.tsx

@@ -0,0 +1,107 @@
+import { FC } from "react";
+import classnames from "classnames";
+import useGlobalSettings from "../../../hooks/useGlobalSettings";
+import { DataCardProps } from "../Card.props";
+import { Link } from "../../Link";
+
+const DataCard: FC<DataCardProps> = ({
+  eyebrow,
+  size = "narrow",
+  image,
+  dataset,
+  columns = "one",
+}) => {
+  const { prefix } = useGlobalSettings();
+
+  const baseClass = `${prefix}--card`;
+
+  const cardClasses = classnames(baseClass, `${baseClass}__type__data`, {
+    [`${baseClass}__size__${size}`]: size,
+    [`${baseClass}__type__data__columns__${columns}`]: columns,
+  });
+
+  return (
+    <div className={cardClasses}>
+      <div className={`${baseClass}--wrap`}>
+        {eyebrow && <p className={`${baseClass}--eyebrow`}>{eyebrow}</p>}
+        <div className={`${baseClass}--content`}>
+          {image && (
+            <div className={`${baseClass}--image--wrapper`}>
+              <picture>
+                <img
+                  className={`${baseClass}--picture`}
+                  src={image}
+                  alt={eyebrow}
+                />
+              </picture>
+            </div>
+          )}
+          {dataset &&
+            dataset.content &&
+            dataset.content.items &&
+            dataset.content.items.map((item) => (
+              <div className={`${baseClass}--area--content`}>
+                <p className={`${baseClass}__type__data--content-label`}>
+                  {item.label}
+                </p>
+                <p className={`${baseClass}__type__data--content-copy`}>
+                  {item.copy}
+                </p>
+              </div>
+            ))}
+          {dataset && dataset.files && (
+            <div className={`${baseClass}--data--content-files`}>
+              <p className={`${baseClass}__type__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.cta && (
+            <div className={`${baseClass}--area--cta`}>
+              <div className={`${baseClass}--data--content-cta`}>
+                <p className={`${baseClass}__type__data--content-label`}>
+                  {dataset.cta.headline}
+                </p>
+                {dataset.cta.items &&
+                  dataset.cta.items.map((item) => (
+                    <a
+                      className={`${baseClass}--cta ${prefix}--button ${prefix}--button--medium ${prefix}--button--secondary`}
+                      href={item.url}
+                    >
+                      <span className="link__label">{item.label}</span>
+                    </a>
+                  ))}
+              </div>
+            </div>
+          )}
+          {dataset && dataset.links && (
+            <div className={`${baseClass}--data--content-links`}>
+              <p className={`${baseClass}__type__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 DataCard;

package/src/components/Cards/DetailCard/index.tsx

@@ -0,0 +1,62 @@
+import { FC } from "react";
+import classnames from "classnames";
+import useGlobalSettings from "../../../hooks/useGlobalSettings";
+import { DetailCardProps } from "../Card.props";
+
+const DetailCard: FC<DetailCardProps> = ({
+  eyebrow,
+  title,
+  size = "narrow",
+  intro,
+  date,
+  eventdetails,
+  link,
+  image,
+}) => {
+  const { prefix } = useGlobalSettings();
+
+  const baseClass = `${prefix}--card`;
+
+  const cardClasses = classnames(baseClass, `${baseClass}__type__detail`, {
+    [`${baseClass}__action`]: link,
+    [`${baseClass}__size__${size}`]: size,
+  });
+
+  return (
+    <div className={cardClasses}>
+      {link && (
+        <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}--picture`}
+                src={image}
+                alt={title}
+              />
+            </picture>
+          </div>
+        )}
+        <div className={`${baseClass}--content`}>
+          {eyebrow && <p className={`${baseClass}--eyebrow`}>{eyebrow}</p>}
+          {title && <h5 className={`${baseClass}--title`}>{title}</h5>}
+          {intro && <p className={`${baseClass}--intro`}>{intro}</p>}
+          {date && (
+            <time className={`${baseClass}--date`} dateTime={date.unix}>
+              {date.human}
+            </time>
+          )}
+          {eventdetails && (
+            <p className={`${baseClass}--date-extra`}>{eventdetails}</p>
+          )}
+        </div>
+      </div>
+    </div>
+  );
+};
+
+export default DetailCard;

package/src/components/Cards/FactlistCard/index.tsx

@@ -0,0 +1,42 @@
+import { FC } from "react";
+import classnames from "classnames";
+import useGlobalSettings from "../../../hooks/useGlobalSettings";
+import { FactlistCardProps } from "../Card.props";
+import { List, ListItem } from "../../List";
+
+const FactlistCard: FC<FactlistCardProps> = ({
+  title,
+  theme = "narrow",
+  size,
+  list,
+}) => {
+  const { prefix } = useGlobalSettings();
+
+  const baseClass = `${prefix}--card`;
+
+  const cardClasses = classnames(baseClass, `${baseClass}__type__factlist`, {
+    [`${baseClass}__size__${size}`]: size,
+    [`${baseClass}__theme__${theme}`]: theme,
+  });
+
+  return (
+    <div className={cardClasses}>
+      <div className={`${baseClass}--wrap`}>
+        <div className={`${baseClass}--content`}>
+          {title && <h5 className={`${baseClass}--title`}>{title}</h5>}
+          {list && (
+            <List alignment="default" ordered="unordered">
+              {list.map((item, index) => (
+                <ListItem id={`list${index}`}>
+                  <p>{item}</p>
+                </ListItem>
+              ))}
+            </List>
+          )}
+        </div>
+      </div>
+    </div>
+  );
+};
+
+export default FactlistCard;

package/src/components/Cards/FeatureCard/index.tsx

@@ -0,0 +1,69 @@
+import { FC } from "react";
+import classnames from "classnames";
+import useGlobalSettings from "../../../hooks/useGlobalSettings";
+import { FeatureCardProps } from "../Card.props";
+import { LinkList } from "../../LinkList";
+
+const FeatureCard: FC<FeatureCardProps> = ({
+  isvideo,
+  eyebrow,
+  title,
+  theme,
+  size = "narrow",
+  date,
+  link,
+  linklist,
+  image,
+}) => {
+  const { prefix } = useGlobalSettings();
+
+  const baseClass = `${prefix}--card`;
+
+  const cardClasses = classnames(baseClass, `${baseClass}__type__feature`, {
+    [`${baseClass}__action`]: link,
+    [`${baseClass}__size__${size}`]: size,
+    [`${baseClass}__isvideo`]: isvideo,
+    [`${baseClass}__linklist`]: linklist,
+    [`${baseClass}__theme__${theme}`]: theme,
+  });
+
+  return (
+    <div className={cardClasses}>
+      {link && (
+        <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}--picture`}
+                src={image}
+                alt={title}
+              />
+            </picture>
+          </div>
+        )}
+        <div className={`${baseClass}--content`}>
+          {eyebrow && <p className={`${baseClass}--eyebrow`}>{eyebrow}</p>}
+          {title && <h5 className={`${baseClass}--title`}>{title}</h5>}
+          {date && (
+            <time className={`${baseClass}--date`} dateTime={date.unix}>
+              {date.human}
+            </time>
+          )}
+          {linklist && (
+            <LinkList
+              headline={linklist.headline}
+              linkgroup={linklist.linkgroup}
+            />
+          )}
+        </div>
+      </div>
+    </div>
+  );
+};
+
+export default FeatureCard;

package/src/components/Cards/MultilinkCard/index.tsx

@@ -0,0 +1,76 @@
+import { FC } from "react";
+import classnames from "classnames";
+import useGlobalSettings from "../../../hooks/useGlobalSettings";
+import { MultilinkCardProps } from "../Card.props";
+import { LinkList } from "../../LinkList";
+
+const MultilinkCard: FC<MultilinkCardProps> = ({
+  isvideo,
+  eyebrow,
+  title,
+  size = "narrow",
+  alignment,
+  intro,
+  link,
+  linklist,
+  image,
+}) => {
+  const { prefix } = useGlobalSettings();
+
+  const baseClass = `${prefix}--card`;
+
+  const cardClasses = classnames(baseClass, `${baseClass}__type__multilink`, {
+    [`${baseClass}__align__${alignment}`]: alignment,
+    [`${baseClass}__action`]: link,
+    [`${baseClass}__size__${size}`]: size,
+    [`${baseClass}__isvideo`]: isvideo,
+    [`${baseClass}__linklist`]: linklist,
+  });
+
+  return (
+    <div className={cardClasses}>
+      {link && (
+        <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}--picture`}
+                src={image}
+                alt={title}
+              />
+            </picture>
+          </div>
+        )}
+        <div className={`${baseClass}--content`}>
+          {eyebrow && <p className={`${baseClass}--eyebrow`}>{eyebrow}</p>}
+          {title && <h5 className={`${baseClass}--title`}>{title}</h5>}
+          {image && (
+            <div className={`${baseClass}--image--wrapper`}>
+              <picture>
+                <img
+                  className={`${baseClass}--picture`}
+                  src={image}
+                  alt={title}
+                />
+              </picture>
+            </div>
+          )}
+          {intro && <p className={`${baseClass}--intro`}>{intro}</p>}
+          {linklist && (
+            <LinkList
+              headline={linklist.headline}
+              linkgroup={linklist.linkgroup}
+            />
+          )}
+        </div>
+      </div>
+    </div>
+  );
+};
+
+export default MultilinkCard;

package/src/components/Cards/PromoCard/index.tsx

@@ -0,0 +1,60 @@
+import { FC } from "react";
+import classnames from "classnames";
+import useGlobalSettings from "../../../hooks/useGlobalSettings";
+import { PromoCardProps } from "../Card.props";
+
+const PromoCard: FC<PromoCardProps> = ({
+  eyebrow,
+  title,
+  theme,
+  size = "narrow",
+  cornercut,
+  intro,
+  link,
+  cta,
+}) => {
+  const { prefix } = useGlobalSettings();
+
+  const baseClass = `${prefix}--card`;
+
+  const wrapperClass = classnames(
+    `${baseClass}--wrapper`,
+    `${baseClass}--wrapper__type__promo ${baseClass}--wrapper__type__promo__size__${size}`
+  );
+
+  const cardClasses = classnames(baseClass, `${baseClass}__type__promo`, {
+    [`${baseClass}__cornercut`]: cornercut,
+    [`${baseClass}__action`]: link,
+    [`${baseClass}__size__${size}`]: size,
+    [`${baseClass}__theme__${theme}`]: theme,
+  });
+
+  return (
+    <div className={wrapperClass}>
+      <div className={cardClasses}>
+        {link && (
+          <a className={`${baseClass}--link`} href={link} title={title}>
+            <span className={`${baseClass}--link--text`}>{title}</span>
+          </a>
+        )}
+        <div className={`${baseClass}--wrap`}>
+          <div className={`${baseClass}--content`}>
+            {eyebrow && <p className={`${baseClass}--eyebrow`}>{eyebrow}</p>}
+            {title && <h5 className={`${baseClass}--title`}>{title}</h5>}
+            {intro && <p className={`${baseClass}--intro`}>{intro}</p>}
+            {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>
+            )}
+          </div>
+        </div>
+      </div>
+    </div>
+  );
+};
+
+export default PromoCard;