@ilo-org/react 0.12.0 → 0.13.0

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

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

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

@@ -0,0 +1,14 @@
+import { StatCardProps } from ".";
+
+export const StatCardArgs: StatCardProps = {
+  title: "Global employment growth down by half in 2023",
+  intro:
+    "The current global economic slowdown is likely to force more workers to accept lower quality, poorly paid jobs which lack job security and social protection, so accentuating inequalities exacerbated by the COVID-19 crisis.",
+  color: "turquoise",
+  source: {
+    label: "World Employment and Social Outlook: Trends 2023",
+    url: "https://www.ilo.org",
+  },
+};
+
+export default StatCardArgs;

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

@@ -0,0 +1,21 @@
+import { CardColor, CardSize } from "../../../types";
+import { LinkProps } from "../../LinkList/LinkList.props";
+
+export type StatCardProps = {
+  /**
+   * The title of the card
+   */
+  title: string;
+  color?: CardColor;
+
+  /**
+   * How big should the card be
+   */
+  size?: Omit<CardSize, "narrow" | "wide">;
+
+  /**
+   * Introductory text in the card
+   */
+  intro?: string;
+  source?: LinkProps;
+};

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

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

@@ -1,36 +1,3 @@
-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;
+export { default as StatCard } from "./StatCard";
+export type { StatCardProps } from "./StatCard.props";
+export { StatCardArgs } from "./StatCard.args";

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

@@ -0,0 +1,21 @@
+import { TextCardProps } from ".";
+
+export const TextCardArgs: TextCardProps = {
+  title: "Why we need greater social justice",
+  eyebrow: "Podcast",
+  date: {
+    human: "20 September 2022",
+    unix: "1670389200",
+  },
+  theme: "light",
+  link: "https:/www.ilo.org",
+  profile: {
+    avatar: "/ilo-dg.jpg",
+    description:
+      "Gilbert Houngbo is the Director-General of the International Labour Organization",
+    name: "Gilbert Houngbo",
+    role: "ILO Director-General",
+  },
+};
+
+export default TextCardArgs;

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

@@ -0,0 +1,32 @@
+import { ThemeTypes, CardSize, EventDate } from "../../../types";
+
+import { ProfileProps } from "../../Profile/Profile.props";
+
+export type TextCardProps = {
+  /**
+   * 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;
+  profile: ProfileProps;
+  link?: string;
+};

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

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

@@ -1,63 +1,3 @@
-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;
+export { default as TextCard } from "./TextCard";
+export type { TextCardProps } from "./TextCard.props";
+export { TextCardArgs } from "./TextCard.args";

package/src/components/Footer/Footer.args.ts

@@ -17,27 +17,15 @@ const basic: FooterProps = {
     {
       links: [
         {
-          label: "Link One",
+          label: "Contact us",
           url: "https://www.ilo.org",
         },
         {
-          label: "Link Two",
+          label: "Contact us",
           url: "https://www.ilo.org",
         },
         {
-          label: "Link Three",
-          url: "https://www.ilo.org",
-        },
-        {
-          label: "Link Four",
-          url: "https://www.ilo.org",
-        },
-        {
-          label: "Link Five",
-          url: "https://www.ilo.org",
-        },
-        {
-          label: "Link Six",
+          label: "Contact us",
           url: "https://www.ilo.org",
         },
       ],
@@ -45,7 +33,7 @@ const basic: FooterProps = {
   ],
   socialmedia: socialMediaArgs,
   subscribe: {
-    label: "Subscribe",
+    label: "Subscribe for updates",
     url: "https://www.ilo.org",
   },
   legal: "© 1996-2023 International Labour Organization (ILO)",

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

package/src/types/index.ts

@@ -65,6 +65,12 @@ export type CardTypes =
   | "detail"
   | "factlist"
   | "data";
+
+export type EventDate = {
+  unix?: string;
+  human?: string;
+};
+
 export interface FormFieldProps<T> {
   /**
    * The input's onChange callback.

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

@@ -1,40 +0,0 @@
-'use strict';
-
-var jsxRuntime = require('react/jsx-runtime');
-var components_Cards_FeatureCard_index = require('./FeatureCard/index.js');
-var components_Cards_DataCard_index = require('./DataCard/index.js');
-var components_Cards_DetailCard_index = require('./DetailCard/index.js');
-var components_Cards_FactlistCard_index = require('./FactlistCard/index.js');
-var components_Cards_MultilinkCard_index = require('./MultilinkCard/index.js');
-var components_Cards_PromoCard_index = require('./PromoCard/index.js');
-var components_Cards_StatCard_index = require('./StatCard/index.js');
-var components_Cards_TextCard_index = require('./TextCard/index.js');
-require('classnames');
-require('tslib');
-require('react');
-require('../../GlobalCtx-10114bdd.js');
-require('../../hooks/useGlobalSettings.js');
-require('../LinkList/LinkList.js');
-require('../Link/Link.js');
-require('../List/List.js');
-require('../../ListCtx-14aa546f.js');
-require('../List/ListItem.js');
-require('../Profile/Profile.js');
-
-const Card = (props) => {
-    const componentMap = {
-        data: components_Cards_DataCard_index,
-        detail: components_Cards_DetailCard_index,
-        factlist: components_Cards_FactlistCard_index,
-        featurecard: components_Cards_FeatureCard_index,
-        multilink: components_Cards_MultilinkCard_index,
-        promo: components_Cards_PromoCard_index,
-        stat: components_Cards_StatCard_index,
-        text: components_Cards_TextCard_index,
-    };
-    const { type } = props;
-    const SelectedCardComponent = componentMap[type] || components_Cards_FeatureCard_index;
-    return jsxRuntime.jsx(SelectedCardComponent, Object.assign({}, props));
-};
-
-module.exports = Card;

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

@@ -1,33 +0,0 @@
-'use strict';
-
-require('./FeatureCard/index.js');
-require('./DataCard/index.js');
-require('./DetailCard/index.js');
-require('./FactlistCard/index.js');
-require('./MultilinkCard/index.js');
-require('./PromoCard/index.js');
-require('./StatCard/index.js');
-require('./TextCard/index.js');
-var components_Cards_Card = require('./Card.js');
-var jsxRuntime = require('react/jsx-runtime');
-var classNames = require('classnames');
-var hooks_useGlobalSettings = require('../../hooks/useGlobalSettings.js');
-require('tslib');
-require('react');
-require('../../ListCtx-14aa546f.js');
-require('../LinkList/LinkList.js');
-require('../../GlobalCtx-10114bdd.js');
-require('../Link/Link.js');
-require('../List/List.js');
-require('../List/ListItem.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.jsxs("div", Object.assign({ className: cardGroupClasses }, { children: [jsxRuntime.jsx("div", Object.assign({ className: `${baseClass}--inner` }, { children: cards &&
-                    cards.map((card) => (jsxRuntime.jsx(components_Cards_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, type: card.type, 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;