@ilo-org/react 0.11.0 → 0.13.0

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

package/src/components/Card/Card.tsx

@@ -1,183 +0,0 @@
-import { FC } from "react";
-import classnames from "classnames";
-import useGlobalSettings from "../../hooks/useGlobalSettings";
-import { CardProps } from "./Card.props";
-import { Link } from "../Link";
-import { List, ListItem } from "../List";
-import { LinkList } from "../LinkList";
-import { Profile } from "../Profile";
-
-const Card: FC<CardProps> = ({
-  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 (
-    <div className={cardClasses}>
-      {link &&
-        variant != "data" &&
-        variant != "factlist" &&
-        variant != "stat" && (
-          <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}--image`} src={image} alt={title} />
-            </picture>
-          </div>
-        )}
-        <div className={`${baseClass}--content`}>
-          {eyebrow && <p className={`${baseClass}--eyebrow`}>{eyebrow}</p>}
-          {title && <h3 className={`${baseClass}--title`}>{title}</h3>}
-          {(variant == "multilink" || (variant == "data" && image)) && (
-            <div className={`${baseClass}--image--wrapper`}>
-              <picture>
-                <img
-                  className={`${baseClass}--image`}
-                  src={image}
-                  alt={title}
-                />
-              </picture>
-            </div>
-          )}
-          {intro && <p className={`${baseClass}--intro`}>{intro}</p>}
-          {date &&
-            variant != "stat" &&
-            variant != "data" &&
-            variant != "graphicpromo" &&
-            variant != "factlist" && (
-              <time className={`${baseClass}--date`} dateTime={date.unix}>
-                {date.human}
-              </time>
-            )}
-          {eventdetails && (
-            <p className={`${baseClass}--event-date`}>{eventdetails}</p>
-          )}
-          {profile && profile.avatar && (
-            <Profile
-              avatar={profile.avatar}
-              description={profile.description}
-              link={profile.link}
-              name={profile.name}
-              role={profile.role}
-              className={`${prefix}--profile--contents--${theme}`}
-            />
-          )}
-          {listitems && (
-            <List alignment="default" ordered="unordered">
-              {listitems.map((item, index) => (
-                <ListItem id={`list${index}`}>
-                  <p>{item}</p>
-                </ListItem>
-              ))}
-            </List>
-          )}
-          {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>
-          )}
-          {source && (
-            <Link theme={theme} url={source.url}>
-              {source.label}
-            </Link>
-          )}
-          {linklist && (
-            <LinkList
-              headline={linklist.headline}
-              linkgroup={linklist.linkgroup}
-            />
-          )}
-          {dataset &&
-            dataset.content &&
-            dataset.content.items &&
-            dataset.content.items.map((item) => (
-              <>
-                <p className={`${baseClass}--data--content-label`}>
-                  {item.label}
-                </p>
-                <p className={`${baseClass}--data--content-copy`}>
-                  {item.copy}
-                </p>
-              </>
-            ))}
-          {dataset && dataset.files && (
-            <div className={`${baseClass}--data--content-files`}>
-              <p className={`${baseClass}--data--content-label`}>
-                {dataset.files.headline}
-              </p>
-              {dataset.files.items &&
-                dataset.files.items.map((item) => (
-                  <a
-                    className={`${baseClass}--data--file ${prefix}--button ${prefix}--button--primary ${prefix}--button--small`}
-                    href={item.url}
-                    download
-                  >
-                    <span className="button__label">{item.label}</span>
-                  </a>
-                ))}
-            </div>
-          )}
-          {dataset && dataset.links && (
-            <div className={`${baseClass}--data--content-links`}>
-              <p className={`${baseClass}--data--content-label`}>
-                {dataset.links.headline}
-              </p>
-              {dataset.links.items &&
-                dataset.links.items.map((item) => (
-                  <>
-                    <Link url={item.url}>{item.label}</Link>
-                    <span>&nbsp;&nbsp;</span>
-                  </>
-                ))}
-            </div>
-          )}
-        </div>
-      </div>
-    </div>
-  );
-};
-
-export default Card;

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

@@ -1,19 +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/src/components/Card/CardGroup.tsx

@@ -1,55 +0,0 @@
-import { FC } from "react";
-import classnames from "classnames";
-import useGlobalSettings from "../../hooks/useGlobalSettings";
-import { CardGroupProps } from "./CardGroup.props";
-import { Card } from "../Card";
-
-const CardGroup: FC<CardGroupProps> = ({ cards, cardcount, cta }) => {
-  const { prefix } = useGlobalSettings();
-
-  const baseClass = `${prefix}--cardgroup`;
-  const cardGroupClasses = classnames(baseClass, `${baseClass}--${cardcount}`);
-
-  return (
-    <div className={cardGroupClasses}>
-      <div className={`${baseClass}--inner`}>
-        {cards &&
-          cards.map((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 && (
-          <div className={`${baseClass}--button-wrap`}>
-            <a
-              className={`${prefix}--button ${prefix}--button--medium ${prefix}--button--secondary`}
-              href={cta.url}
-            >
-              <span className="button__label">{cta.label}</span>
-            </a>
-          </div>
-        )}
-      </div>
-    </div>
-  );
-};
-
-export default CardGroup;

package/src/components/Card/index.ts

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