@ilo-org/react 0.14.0 → 0.15.0

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

@@ -1,78 +0,0 @@
-import { LinkProps } from "../../LinkList/LinkList.props";
-import { StatCardProps } from "../StatCard";
-import { MultilinkCardProps } from "../MultilinkCard";
-import { TextCardProps } from "../TextCard";
-import { PromoCardProps } from "../PromoCard";
-import { FeatureCardProps } from "../FeatureCard";
-import { DetailCardProps } from "../DetailCard";
-import { FactlistCardProps } from "../FactlistCard";
-import { DataCardProps } from "../DataCard";
-
-export interface CommonCardGroupProps {
-  /**
-   * Number of cards in the group
-   */
-  cardCount: string;
-
-  /**
-   * A Button to display after all the cards in the group
-   */
-  cta?: LinkProps;
-}
-
-export interface StatCardGroup extends CommonCardGroupProps {
-  /**
-   * Represents different types of card groups:
-   */
-  type: "stat";
-
-  /**
-   * An array of card objects corresponding to the respective card type:
-   */
-  cards: StatCardProps[];
-}
-
-export interface MultilinkCardGroup extends CommonCardGroupProps {
-  type: "multilink";
-  cards: MultilinkCardProps[];
-}
-
-export interface TextCardGroup extends CommonCardGroupProps {
-  type: "text";
-  cards: TextCardProps[];
-}
-
-export interface PromoCardGroup extends CommonCardGroupProps {
-  type: "promo";
-  cards: PromoCardProps[];
-}
-
-export interface FeatureCardGroup extends CommonCardGroupProps {
-  type: "feature";
-  cards: FeatureCardProps[];
-}
-
-export interface DetailCardGroup extends CommonCardGroupProps {
-  type: "detail";
-  cards: DetailCardProps[];
-}
-
-export interface FactlistCardGroup extends CommonCardGroupProps {
-  type: "factlist";
-  cards: FactlistCardProps[];
-}
-
-export interface DataCardGroup extends CommonCardGroupProps {
-  type: "data";
-  cards: DataCardProps[];
-}
-
-export type CardGroupProps =
-  | StatCardGroup
-  | MultilinkCardGroup
-  | TextCardGroup
-  | PromoCardGroup
-  | FeatureCardGroup
-  | DetailCardGroup
-  | FactlistCardGroup
-  | DataCardGroup;

package/src/components/Cards/CardGroup/CardGroup.tsx

@@ -1,54 +0,0 @@
-import { FC } from "react";
-import classnames from "classnames";
-import useGlobalSettings from "../../../hooks/useGlobalSettings";
-import { CardGroupProps } from "./CardGroup.props";
-import { DataCard } from "../DataCard";
-import { DetailCard } from "../DetailCard";
-import { FactlistCard } from "../FactlistCard";
-import { FeatureCard } from "../FeatureCard";
-import { MultilinkCard } from "../MultilinkCard";
-import { PromoCard } from "../PromoCard";
-import { StatCard } from "../StatCard";
-import { TextCard } from "../TextCard";
-
-const cardMapper: Record<string, React.FC> = {
-  stat: StatCard,
-  multilink: MultilinkCard,
-  text: TextCard,
-  promo: PromoCard,
-  feature: FeatureCard,
-  detail: DetailCard,
-  factlist: FactlistCard,
-  data: DataCard,
-};
-
-const CardGroup: FC<CardGroupProps> = ({ cards, cardCount, cta, type }) => {
-  const Cards = cardMapper[type];
-  const { prefix } = useGlobalSettings();
-
-  const baseClass = `${prefix}--cardgroup`;
-  const cardGroupClasses = classnames(
-    baseClass,
-    `${baseClass}__count__${cardCount}`
-  );
-
-  return (
-    <div className={cardGroupClasses}>
-      <div className={`${baseClass}--inner`}>
-        {cards && cards.map((card, index) => <Cards key={index} {...card} />)}
-      </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>
-  );
-};
-
-export default CardGroup;

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

@@ -1,3 +0,0 @@
-export { default as CardGroup } from "./CardGroup";
-export type { CardGroupProps } from "./CardGroup.props";
-export { default as CardGroupArgs } from "./CardGroup.args";

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

@@ -1,69 +0,0 @@
-import { DataCardProps } from ".";
-
-export const DataCardArgs: DataCardProps = {
-  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",
-        },
-      ],
-    },
-  },
-};

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

@@ -1,60 +0,0 @@
-import { CardSize } from "../../../types";
-import { LinkProps } from "../../LinkList/LinkList.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;
-};
-
-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/DataCard/DataCard.tsx

@@ -1,107 +0,0 @@
-import { FC } from "react";
-import classnames from "classnames";
-import useGlobalSettings from "../../../hooks/useGlobalSettings";
-import { DataCardProps } from "./DataCard.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/DataCard/index.tsx

@@ -1,3 +0,0 @@
-export { default as DataCard } from "./DataCard";
-export type { DataCardProps } from "./DataCard.props";
-export { DataCardArgs } from "./DataCard.args";

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

@@ -1,17 +0,0 @@
-import { DetailCardProps } from ".";
-
-export const DetailCardArgs: DetailCardProps = {
-  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",
-};
-
-export default DetailCardArgs;

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

@@ -1,43 +0,0 @@
-import { CardSize, EventDate } from "../../../types";
-
-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">;
-};

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

@@ -1,62 +0,0 @@
-import { FC } from "react";
-import classnames from "classnames";
-import useGlobalSettings from "../../../hooks/useGlobalSettings";
-import { DetailCardProps } from "./DetailCard.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/DetailCard/index.tsx

@@ -1,3 +0,0 @@
-export { default as DetailCard } from "./DetailCard";
-export type { DetailCardProps } from "./DetailCard.props";
-export { DetailCardArgs } from "./DetailCard.args";

package/src/components/Cards/FactlistCard/FactListCard.args.ts

@@ -1,14 +0,0 @@
-import { FactlistCardProps } from ".";
-
-export const FactlistCardArgs: FactlistCardProps = {
-  title:
-    "Economic slowdown likely to force workers to accept lower quality jobs",
-  theme: "light",
-  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.",
-  ],
-};
-
-export default FactlistCardArgs;

package/src/components/Cards/FactlistCard/FactListCard.props.ts

@@ -1,19 +0,0 @@
-import { ThemeTypes, CardSize } from "../../../types";
-
-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[];
-};

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

@@ -1,42 +0,0 @@
-import { FC } from "react";
-import classnames from "classnames";
-import useGlobalSettings from "../../../hooks/useGlobalSettings";
-import { FactlistCardProps } from "./FactListCard.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/FactlistCard/index.tsx

@@ -1,3 +0,0 @@
-export { default as FactlistCard } from "./FactListCard";
-export type { FactlistCardProps } from "./FactListCard.props";
-export { FactlistCardArgs } from "./FactListCard.args";

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

@@ -1,30 +0,0 @@
-import { FeatureCardProps } from ".";
-
-export const FeatureCardArgs: FeatureCardProps = {
-  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",
-          },
-        ],
-      },
-    ],
-  },
-};
-
-export default FeatureCardArgs;

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

@@ -1,38 +0,0 @@
-import { ThemeTypes, CardSize, EventDate } from "../../../types";
-
-import { LinkListProps } from "../../LinkList/LinkList.props";
-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;
-};