@ilo-org/react 0.14.0 → 0.15.0

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

@@ -1,69 +0,0 @@
-import { FC } from "react";
-import classnames from "classnames";
-import useGlobalSettings from "../../../hooks/useGlobalSettings";
-import { FeatureCardProps } from "./FeatureCard.props";
-import { LinkList } from "../../LinkList";
-
-const FeatureCard: FC<FeatureCardProps> = ({
-  isvideo,
-  eyebrow,
-  title,
-  theme,
-  size = "narrow",
-  date,
-  link,
-  linklist,
-  image,
-}) => {
-  const { prefix } = useGlobalSettings();
-
-  const baseClass = `${prefix}--card`;
-
-  const cardClasses = classnames(baseClass, `${baseClass}__type__feature`, {
-    [`${baseClass}__action`]: link,
-    [`${baseClass}__size__${size}`]: size,
-    [`${baseClass}__isvideo`]: isvideo,
-    [`${baseClass}__linklist`]: linklist,
-    [`${baseClass}__theme__${theme}`]: theme,
-  });
-
-  return (
-    <div className={cardClasses}>
-      {link && (
-        <a className={`${baseClass}--link`} href={link} title={title}>
-          <span className={`${baseClass}--link--text`}>{title}</span>
-        </a>
-      )}
-      <div className={`${baseClass}--wrap`}>
-        {image && (
-          <div className={`${baseClass}--image--wrapper`}>
-            <picture>
-              <img
-                className={`${baseClass}--picture`}
-                src={image}
-                alt={title}
-              />
-            </picture>
-          </div>
-        )}
-        <div className={`${baseClass}--content`}>
-          {eyebrow && <p className={`${baseClass}--eyebrow`}>{eyebrow}</p>}
-          {title && <h5 className={`${baseClass}--title`}>{title}</h5>}
-          {date && (
-            <time className={`${baseClass}--date`} dateTime={date.unix}>
-              {date.human}
-            </time>
-          )}
-          {linklist && (
-            <LinkList
-              headline={linklist.headline}
-              linkgroup={linklist.linkgroup}
-            />
-          )}
-        </div>
-      </div>
-    </div>
-  );
-};
-
-export default FeatureCard;

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

@@ -1,3 +0,0 @@
-export { default as FeatureCard } from "./FeatureCard";
-export type { FeatureCardProps } from "./FeatureCard.props";
-export { FeatureCardArgs } from "./FeatureCard.args";

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

@@ -1,76 +0,0 @@
-import { FC } from "react";
-import classnames from "classnames";
-import useGlobalSettings from "../../../hooks/useGlobalSettings";
-import { MultilinkCardProps } from "./MultilinkCard.props";
-import { LinkList } from "../../LinkList";
-
-const MultilinkCard: FC<MultilinkCardProps> = ({
-  isvideo,
-  eyebrow,
-  title,
-  size = "narrow",
-  alignment,
-  intro,
-  link,
-  linklist,
-  image,
-}) => {
-  const { prefix } = useGlobalSettings();
-
-  const baseClass = `${prefix}--card`;
-
-  const cardClasses = classnames(baseClass, `${baseClass}__type__multilink`, {
-    [`${baseClass}__align__${alignment}`]: alignment,
-    [`${baseClass}__action`]: link,
-    [`${baseClass}__size__${size}`]: size,
-    [`${baseClass}__isvideo`]: isvideo,
-    [`${baseClass}__linklist`]: linklist,
-  });
-
-  return (
-    <div className={cardClasses}>
-      {link && (
-        <a className={`${baseClass}--link`} href={link} title={title}>
-          <span className={`${baseClass}--link--text`}>{title}</span>
-        </a>
-      )}
-      <div className={`${baseClass}--wrap`}>
-        {image && (
-          <div className={`${baseClass}--image--wrapper`}>
-            <picture>
-              <img
-                className={`${baseClass}--picture`}
-                src={image}
-                alt={title}
-              />
-            </picture>
-          </div>
-        )}
-        <div className={`${baseClass}--content`}>
-          {eyebrow && <p className={`${baseClass}--eyebrow`}>{eyebrow}</p>}
-          {title && <h5 className={`${baseClass}--title`}>{title}</h5>}
-          {image && (
-            <div className={`${baseClass}--image--wrapper`}>
-              <picture>
-                <img
-                  className={`${baseClass}--picture`}
-                  src={image}
-                  alt={title}
-                />
-              </picture>
-            </div>
-          )}
-          {intro && <p className={`${baseClass}--intro`}>{intro}</p>}
-          {linklist && (
-            <LinkList
-              headline={linklist.headline}
-              linkgroup={linklist.linkgroup}
-            />
-          )}
-        </div>
-      </div>
-    </div>
-  );
-};
-
-export default MultilinkCard;

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

@@ -1,33 +0,0 @@
-import { MultilinkCardProps } from ".";
-
-export const MultilinkCardArgs: MultilinkCardProps = {
-  title:
-    "ILO welcomes G7 call to make a just transition to a green economy happen",
-  eyebrow: "High-level meeting",
-  intro:
-    "At the end of their meeting the G7 Labour Ministers highlighted the urgent need to greater focus on rights and occupational safety and health.",
-  image: "/hero.jpg",
-  alignment: "left",
-  link: "https:/www.ilo.org",
-  linklist: {
-    headline: "",
-    linkgroup: [
-      {
-        links: [
-          {
-            label: "Read the press release",
-            url: "https://www.ilo.org",
-          },
-          {
-            label: "See the statement",
-            url: "https://www.ilo.org",
-          },
-          {
-            label: "Remarks to G7 Openening Session",
-            url: "https://www.ilo.org",
-          },
-        ],
-      },
-    ],
-  },
-};

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

@@ -1,30 +0,0 @@
-import { CardAlignment, CardSize } from "../../../types";
-import { LinkListProps } from "../../LinkList/LinkList.props";
-
-export type MultilinkCardProps = {
-  isvideo?: boolean;
-
-  /**
-   * A line of text that appears as a small heading above the title of the card
-   */
-  eyebrow?: string;
-
-  /**
-   * The title of the card
-   */
-  title: string;
-
-  /**
-   * How big should the card be
-   */
-  size?: CardSize;
-  alignment?: CardAlignment;
-  intro?: string;
-  link?: string;
-  linklist?: LinkListProps;
-
-  /**
-   * The image to show in the card
-   */
-  image?: string;
-};

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

@@ -1,3 +0,0 @@
-export { default as MultilinkCard } from "./MultiLinkCard";
-export type { MultilinkCardProps } from "./MultilinkCard.props";
-export { MultilinkCardArgs } from "./MultilinkCard.args";

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

@@ -1,19 +0,0 @@
-import { PromoCardProps } from ".";
-
-export const PromoCardArgs: PromoCardProps = {
-  size: "standard",
-  title:
-    "ILO welcomes G7 call to make a just transition to a green economy happen",
-  eyebrow: "High-level meeting",
-  theme: "dark",
-  cornercut: true,
-  intro:
-    "At the end of their meeting the G7 Labour Ministers highlighted the urgent need to greater focus on rights and occupational safety and health.",
-  link: "https:/www.ilo.org",
-  cta: {
-    label: "Read the press release",
-    url: "https://www.ilo.org",
-  },
-};
-
-export default PromoCardArgs;

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

@@ -1,36 +0,0 @@
-import { ThemeTypes, CardCornerType, CardSize } from "../../../types";
-import { LinkProps } from "../../LinkList/LinkList.props";
-
-export type PromoCardProps = {
-  /**
-   * A line of text that appears as a small heading above the title of the card
-   */
-  eyebrow?: string;
-
-  /**
-   * The title of the card
-   */
-  title: string;
-
-  /**
-   * Will render the card to appear on light or dark backgrounds
-   */
-  theme?: ThemeTypes;
-
-  /**
-   * How big should the card be
-   */
-  size?: CardSize;
-
-  /**
-   * Apply an optional corner cut to the top of the card
-   */
-  cornercut?: CardCornerType;
-
-  /**
-   * Introductory text in the card
-   */
-  intro?: string;
-  link?: string;
-  cta?: LinkProps;
-};

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

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

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

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

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

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

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

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

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

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

package/src/components/Checkbox/Checkbox.args.ts

@@ -1,42 +0,0 @@
-import { LabelledCheckboxProps } from "./Checkbox.props";
-
-const NUMBER_CHECKBOXES = 3;
-
-const basic: LabelledCheckboxProps = {
-  label: "Checkbox",
-  className: "checkbox",
-  name: "checkbox",
-};
-
-const basicCheckBoxes = Array(NUMBER_CHECKBOXES).map((_, i) => ({
-  ...basic,
-  id: `checkbox-${i}`,
-}));
-
-const checked: LabelledCheckboxProps = {
-  ...basic,
-  defaultChecked: true,
-};
-
-const error: LabelledCheckboxProps = {
-  ...basic,
-  error: true,
-};
-
-const errorCheckBoxes = Array(NUMBER_CHECKBOXES).map((_, i) => ({
-  ...error,
-  id: `checkbox-${i}`,
-}));
-
-/**
- * Sample prop definitions Checkbox's enumerable properties (imported in stories and test)
- */
-const CheckboxArgs = {
-  basic,
-  basicCheckBoxes,
-  errorCheckBoxes,
-  checked,
-  error,
-};
-
-export default CheckboxArgs;

package/src/components/Checkbox/Checkbox.props.ts

@@ -1,5 +0,0 @@
-import { ChoiceFieldProps } from "../../types";
-import { LabelledFormFieldProps } from "../../types";
-export type CheckboxProps = ChoiceFieldProps<HTMLInputElement>;
-
-export type LabelledCheckboxProps = LabelledFormFieldProps<CheckboxProps>;