@ilo-org/react 0.12.0 → 0.14.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__theme__${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/List/List.props.ts

@@ -1,5 +1,4 @@
 import { ReactElement } from "react";
-import { HeadingLevel, ListAlignment, ListOrder } from "../../types";
 import { ListItemProps } from "./ListItem.props";
 
 export interface ListProps {
@@ -11,12 +10,12 @@ export interface ListProps {
   /**
    * Declare ordered, unordered or unstyled
    */
-  ordered?: ListOrder;
+  ordered?: "unordered" | "ordered" | "unstyled";
 
   /**
    * Declare horizontal or default
    */
-  alignment?: ListAlignment;
+  alignment?: "default" | "horizontal";
 
   /**
    * Specify an optional title
@@ -28,10 +27,3 @@ export interface ListProps {
    */
   className?: string;
 }
-
-export interface ListContextProps {
-  activeItems: string[];
-  alignment?: ListAlignment;
-  ordered?: ListOrder;
-  headingLevel?: HeadingLevel;
-}

package/src/components/List/List.tsx

@@ -1,40 +1,35 @@
 import classNames from "classnames";
-import { FC, useState } from "react";
+import { FC } from "react";
 import useGlobalSettings from "../../hooks/useGlobalSettings";
 import { ListProps } from "./List.props";
-import { ListContext } from "./ListCtx";
 
 const List: FC<ListProps> = ({
   children,
   className,
-  alignment,
-  ordered,
+  alignment = "default",
+  ordered = "unstyled",
   title,
 }) => {
   const { prefix } = useGlobalSettings();
   const baseClass = `${prefix}--list`;
-  const [activeItems] = useState<string[]>([]);
+  const unstyledClass = `${baseClass}__unstyled`;
+  const horizontalClass = `${baseClass}__horizontal`;
+  const titleClass = `${baseClass}--title`;
 
-  const listClasses = classNames(className, {
-    [baseClass]: true,
-    [`${baseClass}--${alignment}`]: alignment,
-    [`${baseClass}--${ordered}`]: true,
+  const listClasses = classNames(className, baseClass, {
+    [unstyledClass]: ordered === "unstyled",
+    [horizontalClass]: alignment === "horizontal",
   });
 
   return (
-    <ListContext.Provider
-      value={{
-        activeItems,
-      }}
-    >
-      <div className={listClasses}>
-        {title && <h5 className={`${baseClass}__title`}>{title}</h5>}
-        {ordered && ordered === "ordered" && <ol>{children}</ol>}
-        {ordered && ordered !== "ordered" && (
-          <ul className={`${baseClass}--${alignment}`}>{children}</ul>
-        )}
-      </div>
-    </ListContext.Provider>
+    <div className={listClasses}>
+      {title && <h2 className={titleClass}>{title}</h2>}
+      {ordered && ordered === "ordered" ? (
+        <ol>{children}</ol>
+      ) : (
+        <ul>{children}</ul>
+      )}
+    </div>
   );
 };
 

package/src/components/List/ListItem.props.ts

@@ -1,12 +1,5 @@
 import { ReactNode } from "react";
 
-export interface ListItemContextProps {
-  /**
-   * The list item's unique id.
-   */
-  id: string;
-}
-
 export interface ListItemProps {
   /**
    * Specify the id of the List item.

package/src/components/List/ListItem.tsx

@@ -1,21 +1,16 @@
 import classNames from "classnames";
 import { FC } from "react";
 import useGlobalSettings from "../../hooks/useGlobalSettings";
-import { ListItemContext } from "./ListCtx";
 import { ListItemProps } from "./ListItem.props";
 
-const ListItem: FC<ListItemProps> = ({ children, id, className, ...rest }) => {
+const ListItem: FC<ListItemProps> = ({ children, className, ...rest }) => {
   const { prefix } = useGlobalSettings();
-  const baseClass = `${prefix}--list__item`;
-  const listItemClasses = classNames(className, {
-    [baseClass]: true,
-  });
+  const baseClass = `${prefix}--list--item`;
+  const listItemClasses = classNames(className, baseClass);
   return (
-    <ListItemContext.Provider value={{ id }}>
-      <li className={listItemClasses} {...rest}>
-        {children}
-      </li>
-    </ListItemContext.Provider>
+    <li className={listItemClasses} {...rest}>
+      {children}
+    </li>
   );
 };