@ilo-org/react 0.11.0 → 0.12.0

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

@@ -0,0 +1,36 @@
+import { FC } from "react";
+import classnames from "classnames";
+import useGlobalSettings from "../../../hooks/useGlobalSettings";
+import { StatCardProps } from "../Card.props";
+import { Link } from "../../Link";
+
+const StatCard: FC<StatCardProps> = ({
+  title,
+  color,
+  size = "standard",
+  intro,
+  source,
+}) => {
+  const { prefix } = useGlobalSettings();
+
+  const baseClass = `${prefix}--card`;
+
+  const cardClasses = classnames(baseClass, `${baseClass}__type__stat`, {
+    [`${baseClass}__color__${color}`]: color,
+    [`${baseClass}__size__${size}`]: size,
+  });
+
+  return (
+    <div className={cardClasses}>
+      <div className={`${baseClass}--wrap`}>
+        <div className={`${baseClass}--content`}>
+          {title && <h5 className={`${baseClass}--title`}>{title}</h5>}
+          {intro && <p className={`${baseClass}--intro`}>{intro}</p>}
+          {source && <Link url={source.url}>{source.label}</Link>}
+        </div>
+      </div>
+    </div>
+  );
+};
+
+export default StatCard;

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

@@ -0,0 +1,63 @@
+import { FC } from "react";
+import classnames from "classnames";
+import useGlobalSettings from "../../../hooks/useGlobalSettings";
+import { TextCardProps } from "../Card.props";
+import { Profile } from "../../Profile";
+
+const TextCard: FC<TextCardProps> = ({
+  eyebrow,
+  title,
+  theme,
+  size,
+  date,
+  profile,
+  link,
+}) => {
+  const { prefix } = useGlobalSettings();
+
+  const baseClass = `${prefix}--card`;
+
+  const wrapperClass = classnames(`${baseClass}--wrapper`);
+
+  const cardClasses = classnames(baseClass, `${baseClass}__type__text`, {
+    [`${baseClass}__action`]: link,
+    [`${baseClass}__size__${size}`]: size,
+    [`${baseClass}__theme__${theme}`]: theme,
+  });
+  console.log("heloo");
+  console.log(profile);
+  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>}
+            {date && (
+              <time className={`${baseClass}--date`} dateTime={date.unix}>
+                {date.human}
+              </time>
+            )}
+            {profile && profile.avatar && (
+              <Profile
+                avatar={profile.avatar}
+                description={profile.description}
+                link={profile.link}
+                name={profile.name}
+                role={profile.role}
+                className={`${prefix}--profile--contents--${theme}`}
+              />
+            )}
+          </div>
+        </div>
+      </div>
+    </div>
+  );
+};
+
+export default TextCard;

package/src/components/Cards/index.ts

@@ -0,0 +1,22 @@
+import FeatureCard from "./FeatureCard";
+import DataCard from "./DataCard";
+import DetailCard from "./DetailCard";
+import FactlistCard from "./FactlistCard";
+import MultilinkCard from "./MultilinkCard";
+import PromoCard from "./PromoCard";
+import StatCard from "./StatCard";
+import TextCard from "./TextCard";
+
+export {
+  FeatureCard,
+  DataCard,
+  DetailCard,
+  FactlistCard,
+  MultilinkCard,
+  PromoCard,
+  StatCard,
+  TextCard,
+};
+
+export { default as Card } from "./Card";
+export { default as CardGroup } from "./CardGroup";

package/src/components/LinkList/LinkList.tsx

@@ -19,7 +19,7 @@ const LinkList: FC<LinkListProps> = ({
 
   return (
     <div className={linkListClasses}>
-      <h3 className={`${baseClass}--headline`}>{headline}</h3>
+      {headline && <h3 className={`${baseClass}--headline`}>{headline}</h3>}
       <ul className={`${baseClass}--linkgroups`}>
         {linkgroup &&
           linkgroup.map((linkset, i) => (

package/src/components/index.ts

@@ -41,6 +41,6 @@ export { TableOfContents } from "./TableOfContents";
 export { Footer } from "./Footer";
 export { LocalNav } from "./LocalNav";
 export { Navigation } from "./Navigation";
-export { Card, CardGroup } from "./Card";
+export { Card, CardGroup } from "./Cards";
 export { Breadcrumb } from "./Breadcrumb";
 export { Tabs } from "./Tabs";

package/src/types/index.ts

@@ -53,14 +53,14 @@ export type SocialTypes =
   | "tiktok"
   | "flickr";
 export type CardColor = "turquoise" | "green" | "yellow" | "blue";
-export type CardSize = "wide" | "standard" | "narrow";
-export type CardCornerType = "cornercut" | "corner";
+export type CardSize = "wide" | "standard" | "narrow" | "fluid";
+export type CardCornerType = boolean;
 export type CardAlignment = "left" | "right";
 export type CardTypes =
   | "stat"
   | "multilink"
-  | "graphic"
-  | "graphicpromo"
+  | "text"
+  | "promo"
   | "feature"
   | "detail"
   | "factlist"

package/lib/cjs/components/Card/Card.js

@@ -1,43 +0,0 @@
-'use strict';
-
-var jsxRuntime = require('react/jsx-runtime');
-var classNames = require('classnames');
-var hooks_useGlobalSettings = require('../../hooks/useGlobalSettings.js');
-var components_Link_Link = require('../Link/Link.js');
-var components_List_List = require('../List/List.js');
-var components_List_ListItem = require('../List/ListItem.js');
-var components_LinkList_LinkList = require('../LinkList/LinkList.js');
-var components_Profile_Profile = require('../Profile/Profile.js');
-require('tslib');
-require('react');
-require('../../GlobalCtx-10114bdd.js');
-require('../../ListCtx-14aa546f.js');
-
-const Card = ({ isvideo, eyebrow, title, color, theme, variant, size, cornercut, alignment, intro, date, eventdetails, profile, listitems, link, linklist, cta, image, source, dataset, }) => {
-    const { prefix } = hooks_useGlobalSettings();
-    const baseClass = `${prefix}--card`;
-    const cardClasses = classNames(baseClass, `${baseClass}--${variant}`, `${baseClass}--${color}`, {
-        [`${baseClass}--${cornercut}`]: cornercut,
-        [`${baseClass}--${alignment}`]: alignment,
-        [`${baseClass}--action`]: link,
-        [`${baseClass}--${size}`]: size,
-        [`${baseClass}--isvideo`]: isvideo,
-        [`${baseClass}--linklist`]: linklist,
-        [`${baseClass}--${theme}`]: theme,
-    });
-    return (jsxRuntime.jsxs("div", Object.assign({ className: cardClasses }, { children: [link &&
-                variant != "data" &&
-                variant != "factlist" &&
-                variant != "stat" && (jsxRuntime.jsx("a", Object.assign({ className: `${baseClass}--link`, href: link, title: title }, { children: jsxRuntime.jsx("span", Object.assign({ className: `${baseClass}--link--text` }, { children: title })) }))), jsxRuntime.jsxs("div", Object.assign({ className: `${baseClass}--wrap` }, { children: [image && (jsxRuntime.jsx("div", Object.assign({ className: `${baseClass}--image--wrapper` }, { children: jsxRuntime.jsx("picture", { children: jsxRuntime.jsx("img", { className: `${baseClass}--image`, src: image, alt: title }) }) }))), jsxRuntime.jsxs("div", Object.assign({ className: `${baseClass}--content` }, { children: [eyebrow && jsxRuntime.jsx("p", Object.assign({ className: `${baseClass}--eyebrow` }, { children: eyebrow })), title && jsxRuntime.jsx("h3", Object.assign({ className: `${baseClass}--title` }, { children: title })), (variant == "multilink" || (variant == "data" && image)) && (jsxRuntime.jsx("div", Object.assign({ className: `${baseClass}--image--wrapper` }, { children: jsxRuntime.jsx("picture", { children: jsxRuntime.jsx("img", { className: `${baseClass}--image`, src: image, alt: title }) }) }))), intro && jsxRuntime.jsx("p", Object.assign({ className: `${baseClass}--intro` }, { children: intro })), date &&
-                                variant != "stat" &&
-                                variant != "data" &&
-                                variant != "graphicpromo" &&
-                                variant != "factlist" && (jsxRuntime.jsx("time", Object.assign({ className: `${baseClass}--date`, dateTime: date.unix }, { children: date.human }))), eventdetails && (jsxRuntime.jsx("p", Object.assign({ className: `${baseClass}--event-date` }, { children: eventdetails }))), profile && profile.avatar && (jsxRuntime.jsx(components_Profile_Profile, { avatar: profile.avatar, description: profile.description, link: profile.link, name: profile.name, role: profile.role, className: `${prefix}--profile--contents--${theme}` })), listitems && (jsxRuntime.jsx(components_List_List, Object.assign({ alignment: "default", ordered: "unordered" }, { children: listitems.map((item, index) => (jsxRuntime.jsx(components_List_ListItem, Object.assign({ id: `list${index}` }, { children: jsxRuntime.jsx("p", { children: item }) })))) }))), cta && cta.label && (jsxRuntime.jsx("a", Object.assign({ className: `${baseClass}--cta ${prefix}--button ${prefix}--button--medium ${prefix}--button--primary`, href: cta.url }, { children: jsxRuntime.jsx("span", Object.assign({ className: "link__label" }, { children: cta.label })) }))), source && (jsxRuntime.jsx(components_Link_Link, Object.assign({ theme: theme, url: source.url }, { children: source.label }))), linklist && (jsxRuntime.jsx(components_LinkList_LinkList, { headline: linklist.headline, linkgroup: linklist.linkgroup })), dataset &&
-                                dataset.content &&
-                                dataset.content.items &&
-                                dataset.content.items.map((item) => (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsx("p", Object.assign({ className: `${baseClass}--data--content-label` }, { children: item.label })), jsxRuntime.jsx("p", Object.assign({ className: `${baseClass}--data--content-copy` }, { children: item.copy }))] }))), dataset && dataset.files && (jsxRuntime.jsxs("div", Object.assign({ className: `${baseClass}--data--content-files` }, { children: [jsxRuntime.jsx("p", Object.assign({ className: `${baseClass}--data--content-label` }, { children: dataset.files.headline })), dataset.files.items &&
-                                        dataset.files.items.map((item) => (jsxRuntime.jsx("a", Object.assign({ className: `${baseClass}--data--file ${prefix}--button ${prefix}--button--primary ${prefix}--button--small`, href: item.url, download: true }, { children: jsxRuntime.jsx("span", Object.assign({ className: "button__label" }, { children: item.label })) }))))] }))), dataset && dataset.links && (jsxRuntime.jsxs("div", Object.assign({ className: `${baseClass}--data--content-links` }, { children: [jsxRuntime.jsx("p", Object.assign({ className: `${baseClass}--data--content-label` }, { children: dataset.links.headline })), dataset.links.items &&
-                                        dataset.links.items.map((item) => (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsx(components_Link_Link, Object.assign({ url: item.url }, { children: item.label })), jsxRuntime.jsx("span", { children: "\u00A0\u00A0" })] })))] })))] }))] }))] })));
-};
-
-module.exports = Card;

package/lib/cjs/components/Card/CardGroup.js

@@ -1,25 +0,0 @@
-'use strict';
-
-var components_Card_Card = require('./Card.js');
-var jsxRuntime = require('react/jsx-runtime');
-var classNames = require('classnames');
-var hooks_useGlobalSettings = require('../../hooks/useGlobalSettings.js');
-require('../Link/Link.js');
-require('tslib');
-require('../List/List.js');
-require('react');
-require('../../ListCtx-14aa546f.js');
-require('../../GlobalCtx-10114bdd.js');
-require('../List/ListItem.js');
-require('../LinkList/LinkList.js');
-require('../Profile/Profile.js');
-
-const CardGroup = ({ cards, cardcount, cta }) => {
-    const { prefix } = hooks_useGlobalSettings();
-    const baseClass = `${prefix}--cardgroup`;
-    const cardGroupClasses = classNames(baseClass, `${baseClass}--${cardcount}`);
-    return (jsxRuntime.jsx("div", Object.assign({ className: cardGroupClasses }, { children: jsxRuntime.jsxs("div", Object.assign({ className: `${baseClass}--inner` }, { children: [cards &&
-                    cards.map((card) => (jsxRuntime.jsx(components_Card_Card, { title: card.title, image: card.image, intro: card.intro, eyebrow: card.eyebrow, date: card.date, dataset: card.dataset, link: card.link, profile: card.profile, cta: card.cta, source: card.source, listitems: card.listitems, linklist: card.linklist, color: card.color, theme: card.theme, cornercut: card.cornercut, alignment: card.alignment, variant: card.variant, size: card.size }))), cta && (jsxRuntime.jsx("div", Object.assign({ className: `${baseClass}--button-wrap` }, { children: jsxRuntime.jsx("a", Object.assign({ className: `${prefix}--button ${prefix}--button--medium ${prefix}--button--secondary`, href: cta.url }, { children: jsxRuntime.jsx("span", Object.assign({ className: "button__label" }, { children: cta.label })) })) })))] })) })));
-};
-
-module.exports = CardGroup;

package/lib/cjs/components/Card/index.js

@@ -1,21 +0,0 @@
-'use strict';
-
-var components_Card_Card = require('./Card.js');
-var components_Card_CardGroup = require('./CardGroup.js');
-require('react/jsx-runtime');
-require('classnames');
-require('../../hooks/useGlobalSettings.js');
-require('tslib');
-require('react');
-require('../../GlobalCtx-10114bdd.js');
-require('../Link/Link.js');
-require('../List/List.js');
-require('../../ListCtx-14aa546f.js');
-require('../List/ListItem.js');
-require('../LinkList/LinkList.js');
-require('../Profile/Profile.js');
-
-
-
-exports.Card = components_Card_Card;
-exports.CardGroup = components_Card_CardGroup;

package/lib/esm/components/Card/Card.js

@@ -1,41 +0,0 @@
-import { jsxs, jsx, Fragment } from 'react/jsx-runtime';
-import classNames from 'classnames';
-import useGlobalSettings from '../../hooks/useGlobalSettings.js';
-import Link from '../Link/Link.js';
-import List from '../List/List.js';
-import ListItem from '../List/ListItem.js';
-import LinkList from '../LinkList/LinkList.js';
-import Profile from '../Profile/Profile.js';
-import 'tslib';
-import 'react';
-import '../../GlobalCtx-7fb23cfa.js';
-import '../../ListCtx-da435fdf.js';
-
-const Card = ({ isvideo, eyebrow, title, color, theme, variant, size, cornercut, alignment, intro, date, eventdetails, profile, listitems, link, linklist, cta, image, source, dataset, }) => {
-    const { prefix } = useGlobalSettings();
-    const baseClass = `${prefix}--card`;
-    const cardClasses = classNames(baseClass, `${baseClass}--${variant}`, `${baseClass}--${color}`, {
-        [`${baseClass}--${cornercut}`]: cornercut,
-        [`${baseClass}--${alignment}`]: alignment,
-        [`${baseClass}--action`]: link,
-        [`${baseClass}--${size}`]: size,
-        [`${baseClass}--isvideo`]: isvideo,
-        [`${baseClass}--linklist`]: linklist,
-        [`${baseClass}--${theme}`]: theme,
-    });
-    return (jsxs("div", Object.assign({ className: cardClasses }, { children: [link &&
-                variant != "data" &&
-                variant != "factlist" &&
-                variant != "stat" && (jsx("a", Object.assign({ className: `${baseClass}--link`, href: link, title: title }, { children: jsx("span", Object.assign({ className: `${baseClass}--link--text` }, { children: title })) }))), jsxs("div", Object.assign({ className: `${baseClass}--wrap` }, { children: [image && (jsx("div", Object.assign({ className: `${baseClass}--image--wrapper` }, { children: jsx("picture", { children: jsx("img", { className: `${baseClass}--image`, src: image, alt: title }) }) }))), jsxs("div", Object.assign({ className: `${baseClass}--content` }, { children: [eyebrow && jsx("p", Object.assign({ className: `${baseClass}--eyebrow` }, { children: eyebrow })), title && jsx("h3", Object.assign({ className: `${baseClass}--title` }, { children: title })), (variant == "multilink" || (variant == "data" && image)) && (jsx("div", Object.assign({ className: `${baseClass}--image--wrapper` }, { children: jsx("picture", { children: jsx("img", { className: `${baseClass}--image`, src: image, alt: title }) }) }))), intro && jsx("p", Object.assign({ className: `${baseClass}--intro` }, { children: intro })), date &&
-                                variant != "stat" &&
-                                variant != "data" &&
-                                variant != "graphicpromo" &&
-                                variant != "factlist" && (jsx("time", Object.assign({ className: `${baseClass}--date`, dateTime: date.unix }, { children: date.human }))), eventdetails && (jsx("p", Object.assign({ className: `${baseClass}--event-date` }, { children: eventdetails }))), profile && profile.avatar && (jsx(Profile, { avatar: profile.avatar, description: profile.description, link: profile.link, name: profile.name, role: profile.role, className: `${prefix}--profile--contents--${theme}` })), listitems && (jsx(List, Object.assign({ alignment: "default", ordered: "unordered" }, { children: listitems.map((item, index) => (jsx(ListItem, Object.assign({ id: `list${index}` }, { children: jsx("p", { children: item }) })))) }))), cta && cta.label && (jsx("a", Object.assign({ className: `${baseClass}--cta ${prefix}--button ${prefix}--button--medium ${prefix}--button--primary`, href: cta.url }, { children: jsx("span", Object.assign({ className: "link__label" }, { children: cta.label })) }))), source && (jsx(Link, Object.assign({ theme: theme, url: source.url }, { children: source.label }))), linklist && (jsx(LinkList, { headline: linklist.headline, linkgroup: linklist.linkgroup })), dataset &&
-                                dataset.content &&
-                                dataset.content.items &&
-                                dataset.content.items.map((item) => (jsxs(Fragment, { children: [jsx("p", Object.assign({ className: `${baseClass}--data--content-label` }, { children: item.label })), jsx("p", Object.assign({ className: `${baseClass}--data--content-copy` }, { children: item.copy }))] }))), dataset && dataset.files && (jsxs("div", Object.assign({ className: `${baseClass}--data--content-files` }, { children: [jsx("p", Object.assign({ className: `${baseClass}--data--content-label` }, { children: dataset.files.headline })), dataset.files.items &&
-                                        dataset.files.items.map((item) => (jsx("a", Object.assign({ className: `${baseClass}--data--file ${prefix}--button ${prefix}--button--primary ${prefix}--button--small`, href: item.url, download: true }, { children: jsx("span", Object.assign({ className: "button__label" }, { children: item.label })) }))))] }))), dataset && dataset.links && (jsxs("div", Object.assign({ className: `${baseClass}--data--content-links` }, { children: [jsx("p", Object.assign({ className: `${baseClass}--data--content-label` }, { children: dataset.links.headline })), dataset.links.items &&
-                                        dataset.links.items.map((item) => (jsxs(Fragment, { children: [jsx(Link, Object.assign({ url: item.url }, { children: item.label })), jsx("span", { children: "\u00A0\u00A0" })] })))] })))] }))] }))] })));
-};
-
-export { Card as default };

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

@@ -1,14 +0,0 @@
-export { default as Card } from './Card.js';
-export { default as CardGroup } from './CardGroup.js';
-import 'react/jsx-runtime';
-import 'classnames';
-import '../../hooks/useGlobalSettings.js';
-import 'tslib';
-import 'react';
-import '../../GlobalCtx-7fb23cfa.js';
-import '../Link/Link.js';
-import '../List/List.js';
-import '../../ListCtx-da435fdf.js';
-import '../List/ListItem.js';
-import '../LinkList/LinkList.js';
-import '../Profile/Profile.js';

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

@@ -1,110 +0,0 @@
-import { CardAlignment, ThemeTypes, 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?: ThemeTypes;
-    /**
-     * 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/index.d.ts

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

package/src/components/Card/Card.props.ts

@@ -1,142 +0,0 @@
-import {
-  CardAlignment,
-  ThemeTypes,
-  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?: ThemeTypes;
-
-  /**
-   * 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>;
-}