@ilo-org/react 0.11.0 → 0.13.0

package/src/components/Footer/Footer.tsx

@@ -26,7 +26,7 @@ const Footer: FC<FooterProps> = ({
 
   return (
     <footer className={footerClasses}>
-      <div className={`${baseClass}--main`}>
+      <div className={`${baseClass}--main ${prefix}--container`}>
         <div className="site--info">
           <img className={`${baseClass}--logo`} src={logo} alt="ILO Logo" />
           <h3 className={`${baseClass}--headline`}>{tagline}</h3>
@@ -46,47 +46,51 @@ const Footer: FC<FooterProps> = ({
             <LinkList linkgroup={linkgroup} theme="dark"></LinkList>
           </nav>
         )}
-        {(socialmedia || subscribe) && (
+        {socialmedia && (
           <div className="connect">
-            {socialmedia && (
-              <div className="social--links">
-                <SocialMedia {...socialmedia} theme="dark" />
-              </div>
-            )}
-            {subscribe && (
-              <Button
-                label={subscribe?.label}
-                url={subscribe?.url}
-                type="primary"
-                size="large"
-                target="_blank"
-              ></Button>
-            )}
+            <div className="social--links">
+              <SocialMedia {...socialmedia} theme="dark" />
+            </div>
+          </div>
+        )}
+        {subscribe && (
+          <div className="subscribe">
+            <Button
+              label={subscribe?.label}
+              url={subscribe?.url}
+              type="primary"
+              size="large"
+              target="_blank"
+            ></Button>
           </div>
         )}
       </div>
       <div className={`${baseClass}--secondary`}>
-        <div className="legal">{legal}</div>
-        {secondarylinks && (
-          <nav className="secondarylinks">
-            <ul className="secondarylinks--list">
-              {secondarylinks.map((link, i) => (
-                <li className="secondarylinks--list--item">
-                  <a
-                    key={i}
-                    href={link.url}
-                    className="secondarylinks--list--link"
-                  >
-                    {link?.label}
-                  </a>
-                </li>
-              ))}
-            </ul>
-          </nav>
-        )}
-        <a href={anchorlink?.url} className="anchorlink">
-          {anchorlink?.label}
-        </a>
+        <div className={`${prefix}--container`}>
+          <div className={`${baseClass}--secondary--details`}>
+            <div className="legal">{legal}</div>
+            {secondarylinks && (
+              <nav className="secondarylinks">
+                <ul className="secondarylinks--list">
+                  {secondarylinks.map((link, i) => (
+                    <li className="secondarylinks--list--item">
+                      <a
+                        key={i}
+                        href={link.url}
+                        className="secondarylinks--list--link"
+                      >
+                        {link?.label}
+                      </a>
+                    </li>
+                  ))}
+                </ul>
+              </nav>
+            )}
+          </div>
+          <a href={anchorlink?.url} className="anchorlink">
+            {anchorlink?.label}
+          </a>
+        </div>
       </div>
     </footer>
   );

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/Navigation/Navigation.tsx

@@ -66,7 +66,7 @@ const Navigation: FC<NavigationProps> = ({
         </div>
       </div>
       <div className={`${baseClass}--logo-bar`}>
-        <div className={`${baseClass}--inner`}>
+        <div className={`${baseClass}--inner ${prefix}--container`}>
           <a href={siteurl} className={`${baseClass}--logo-link`}>
             <img className={`${baseClass}--logo`} src={logo} alt="ILO Logo" />
           </a>
@@ -82,7 +82,7 @@ const Navigation: FC<NavigationProps> = ({
         </div>
       </div>
       <div className={`${baseClass}--navigation`}>
-        <div className={`${baseClass}--inner`}>
+        <div className={`${baseClass}--inner ${prefix}--container`}>
           <div className={`${prefix}--mobile--nav`}>
             <div className={`${prefix}--mobile--nav--logo`}>
               <a href={siteurl} className={`${baseClass}--logo-link`}>
@@ -115,7 +115,7 @@ const Navigation: FC<NavigationProps> = ({
               </button>
             </div>
             <div className={`${prefix}--mobile--nav--language--select`}>
-              <div className={`${baseClass}--inner`}>
+              <div className={`${baseClass}--inner ${prefix}--container`}>
                 <div className={`${prefix}--mobile--subnav--menu`}>
                   <button
                     className={`${prefix}--mobile--subnav--back`}
@@ -193,7 +193,7 @@ const Navigation: FC<NavigationProps> = ({
             className={`${prefix}--subnav`}
             aria-labelledby="secondary-navigation"
           >
-            <div className={`${prefix}--subnav--inner`}>
+            <div className={`${prefix}--subnav--inner ${prefix}--container`}>
               <div className={`${prefix}--mobile--subnav`}>
                 <div className={`${prefix}--mobile--subnav--menu`}>
                   <button
@@ -231,7 +231,7 @@ const Navigation: FC<NavigationProps> = ({
           </nav>
         )}
         <div className={`${prefix}--search-box`}>
-          <div className={`${prefix}--header--inner`}>
+          <div className={`${prefix}--header--inner ${prefix}--container`}>
             <SearchField
               input={searchfield?.input}
               action={searchfield?.action}

package/src/components/Pagination/Pagination.tsx

@@ -84,7 +84,8 @@ const Pagination: FC<PaginationProps> = ({
       </div>
 
       <p className={`${baseClass}--page`}>
-        <span>{currentPage + 1}</span> {pageCountPreposition}{" "}
+        <span>{currentPage + 1}</span>
+        <span>{pageCountPreposition}</span>
         <span>{totalPages}</span>
       </p>
 

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 { CardGroup } from "./Cards/CardGroup";
 export { Breadcrumb } from "./Breadcrumb";
 export { Tabs } from "./Tabs";

package/src/types/index.ts

@@ -53,18 +53,24 @@ 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"
   | "data";
+
+export type EventDate = {
+  unix?: string;
+  human?: string;
+};
+
 export interface FormFieldProps<T> {
   /**
    * The input's onChange callback.

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/CardGroup.js

@@ -1,23 +0,0 @@
-import Card from './Card.js';
-import { jsx, jsxs } from 'react/jsx-runtime';
-import classNames from 'classnames';
-import useGlobalSettings from '../../hooks/useGlobalSettings.js';
-import '../Link/Link.js';
-import 'tslib';
-import '../List/List.js';
-import 'react';
-import '../../ListCtx-da435fdf.js';
-import '../../GlobalCtx-7fb23cfa.js';
-import '../List/ListItem.js';
-import '../LinkList/LinkList.js';
-import '../Profile/Profile.js';
-
-const CardGroup = ({ cards, cardcount, cta }) => {
-    const { prefix } = useGlobalSettings();
-    const baseClass = `${prefix}--cardgroup`;
-    const cardGroupClasses = classNames(baseClass, `${baseClass}--${cardcount}`);
-    return (jsx("div", Object.assign({ className: cardGroupClasses }, { children: jsxs("div", Object.assign({ className: `${baseClass}--inner` }, { children: [cards &&
-                    cards.map((card) => (jsx(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 && (jsx("div", Object.assign({ className: `${baseClass}--button-wrap` }, { children: jsx("a", Object.assign({ className: `${prefix}--button ${prefix}--button--medium ${prefix}--button--secondary`, href: cta.url }, { children: jsx("span", Object.assign({ className: "button__label" }, { children: cta.label })) })) })))] })) })));
-};
-
-export { CardGroup 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.d.ts

@@ -1,4 +0,0 @@
-import { FC } from "react";
-import { CardProps } from "./Card.props";
-declare const Card: FC<CardProps>;
-export default Card;

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/CardGroup.props.d.ts

@@ -1,16 +0,0 @@
-import { CardProps } from "../Card/Card.props";
-import { LinkProps } from "../LinkList/LinkList.props";
-export interface CardGroupProps {
-    /**
-     * An array of card objects
-     */
-    cards?: Required<CardProps>[];
-    /**
-     * Number of cards in the group
-     */
-    cardcount: Required<string>;
-    /**
-     * A Button to display after all the cards in the group
-     */
-    cta?: LinkProps;
-}

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";