@ilo-org/react 0.12.0 → 0.14.0

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

@@ -0,0 +1,19 @@
+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

@@ -0,0 +1,42 @@
+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,42 +1,3 @@
-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;
+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

@@ -0,0 +1,30 @@
+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

@@ -0,0 +1,38 @@
+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;
+};

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

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

@@ -1,69 +1,3 @@
-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;
+export { default as FeatureCard } from "./FeatureCard";
+export type { FeatureCardProps } from "./FeatureCard.props";
+export { FeatureCardArgs } from "./FeatureCard.args";

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

@@ -0,0 +1,76 @@
+import { FC } from "react";
+import classnames from "classnames";
+import useGlobalSettings from "../../../hooks/useGlobalSettings";
+import { MultilinkCardProps } from "./MultilinkCard.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/MultilinkCard/MultilinkCard.args.ts

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

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

@@ -0,0 +1,30 @@
+import { CardAlignment, CardSize } from "../../../types";
+import { LinkListProps } from "../../LinkList/LinkList.props";
+
+export type MultilinkCardProps = {
+  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;
+
+  /**
+   * How big should the card be
+   */
+  size?: CardSize;
+  alignment?: CardAlignment;
+  intro?: string;
+  link?: string;
+  linklist?: LinkListProps;
+
+  /**
+   * The image to show in the card
+   */
+  image?: string;
+};

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

@@ -1,76 +1,3 @@
-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;
+export { default as MultilinkCard } from "./MultiLinkCard";
+export type { MultilinkCardProps } from "./MultilinkCard.props";
+export { MultilinkCardArgs } from "./MultilinkCard.args";

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

@@ -0,0 +1,19 @@
+import { PromoCardProps } from ".";
+
+export const PromoCardArgs: PromoCardProps = {
+  size: "standard",
+  title:
+    "ILO welcomes G7 call to make a just transition to a green economy happen",
+  eyebrow: "High-level meeting",
+  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",
+  },
+};
+
+export default PromoCardArgs;

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

@@ -0,0 +1,36 @@
+import { ThemeTypes, CardCornerType, CardSize } from "../../../types";
+import { LinkProps } from "../../LinkList/LinkList.props";
+
+export type PromoCardProps = {
+  /**
+   * 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?: CardSize;
+
+  /**
+   * Apply an optional corner cut to the top of the card
+   */
+  cornercut?: CardCornerType;
+
+  /**
+   * Introductory text in the card
+   */
+  intro?: string;
+  link?: string;
+  cta?: LinkProps;
+};

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

@@ -0,0 +1,60 @@
+import { FC } from "react";
+import classnames from "classnames";
+import useGlobalSettings from "../../../hooks/useGlobalSettings";
+import { PromoCardProps } from "./PromoCard.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;