@ilo-org/react 0.11.0 → 0.13.0

package/lib/types/react/src/components/Cards/CardGroup/CardGroup.props.d.ts

@@ -0,0 +1,58 @@
+import { LinkProps } from "../../LinkList/LinkList.props";
+import { StatCardProps } from "../StatCard";
+import { MultilinkCardProps } from "../MultilinkCard";
+import { TextCardProps } from "../TextCard";
+import { PromoCardProps } from "../PromoCard";
+import { FeatureCardProps } from "../FeatureCard";
+import { DetailCardProps } from "../DetailCard";
+import { FactlistCardProps } from "../FactlistCard";
+import { DataCardProps } from "../DataCard";
+export interface CommonCardGroupProps {
+    /**
+     * Number of cards in the group
+     */
+    cardCount: string;
+    /**
+     * A Button to display after all the cards in the group
+     */
+    cta?: LinkProps;
+}
+export interface StatCardGroup extends CommonCardGroupProps {
+    /**
+     * Represents different types of card groups:
+     */
+    type: "stat";
+    /**
+     * An array of card objects corresponding to the respective card type:
+     */
+    cards: StatCardProps[];
+}
+export interface MultilinkCardGroup extends CommonCardGroupProps {
+    type: "multilink";
+    cards: MultilinkCardProps[];
+}
+export interface TextCardGroup extends CommonCardGroupProps {
+    type: "text";
+    cards: TextCardProps[];
+}
+export interface PromoCardGroup extends CommonCardGroupProps {
+    type: "promo";
+    cards: PromoCardProps[];
+}
+export interface FeatureCardGroup extends CommonCardGroupProps {
+    type: "feature";
+    cards: FeatureCardProps[];
+}
+export interface DetailCardGroup extends CommonCardGroupProps {
+    type: "detail";
+    cards: DetailCardProps[];
+}
+export interface FactlistCardGroup extends CommonCardGroupProps {
+    type: "factlist";
+    cards: FactlistCardProps[];
+}
+export interface DataCardGroup extends CommonCardGroupProps {
+    type: "data";
+    cards: DataCardProps[];
+}
+export type CardGroupProps = StatCardGroup | MultilinkCardGroup | TextCardGroup | PromoCardGroup | FeatureCardGroup | DetailCardGroup | FactlistCardGroup | DataCardGroup;

package/lib/types/react/src/components/Cards/CardGroup/index.d.ts

@@ -0,0 +1,3 @@
+export { default as CardGroup } from "./CardGroup";
+export type { CardGroupProps } from "./CardGroup.props";
+export { default as CardGroupArgs } from "./CardGroup.args";

package/lib/types/react/src/components/Cards/DataCard/DataCard.args.d.ts

@@ -0,0 +1,2 @@
+import { DataCardProps } from ".";
+export declare const DataCardArgs: DataCardProps;

package/lib/types/react/src/components/Cards/DataCard/DataCard.d.ts

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

package/lib/types/react/src/components/Cards/DataCard/DataCard.props.d.ts

@@ -0,0 +1,50 @@
+import { CardSize } from "../../../types";
+import { LinkProps } from "../../LinkList/LinkList.props";
+export type DataCardProps = {
+    /**
+     * A line of text that appears as a small heading at the top of the card
+     */
+    eyebrow?: string;
+    /**
+     * How big should the card be
+     */
+    size?: Omit<CardSize, "standard">;
+    /**
+     * The image to show in the card
+     */
+    image?: string;
+    /**
+     * Array of Content (label, copy), Files object (optional headline, array of items with label and url) and Links * * object (optional headline, array of items with label and url)
+     */
+    dataset?: CardDataset;
+    /**
+     * Make the content appear in one or two columns. Only applies when the size is set to `wide` or `fluid`
+     */
+    columns?: string;
+};
+interface CardDataset {
+    content?: DataContent;
+    files?: DataFile;
+    links?: DataLink;
+    cta?: Cta;
+}
+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>;
+}
+interface Cta {
+    headline?: string;
+    items?: Array<LinkProps>;
+}
+export {};

package/lib/types/react/src/components/Cards/DataCard/index.d.ts

@@ -0,0 +1,3 @@
+export { default as DataCard } from "./DataCard";
+export type { DataCardProps } from "./DataCard.props";
+export { DataCardArgs } from "./DataCard.args";

package/lib/types/react/src/components/Cards/DetailCard/DetailCard.args.d.ts

@@ -0,0 +1,3 @@
+import { DetailCardProps } from ".";
+export declare const DetailCardArgs: DetailCardProps;
+export default DetailCardArgs;

package/lib/types/react/src/components/Cards/DetailCard/DetailCard.d.ts

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

package/lib/types/react/src/components/Cards/DetailCard/DetailCard.props.d.ts

@@ -0,0 +1,35 @@
+import { CardSize, EventDate } from "../../../types";
+export type DetailCardProps = {
+    /**
+     * 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;
+    /**
+     * Introductory text in the card
+     */
+    intro?: string;
+    /**
+     * Specify the event Date, in both human and Unix format.
+     */
+    date?: EventDate;
+    /**
+     * Information about an event
+     */
+    eventdetails?: string;
+    /**
+     * A URL to link to
+     */
+    link?: string;
+    /**
+     * The image to show in the card
+     */
+    image?: string;
+    /**
+     * How big should the card be
+     */
+    size?: Omit<CardSize, "standard">;
+};

package/lib/types/react/src/components/Cards/DetailCard/index.d.ts

@@ -0,0 +1,3 @@
+export { default as DetailCard } from "./DetailCard";
+export type { DetailCardProps } from "./DetailCard.props";
+export { DetailCardArgs } from "./DetailCard.args";

package/lib/types/react/src/components/Cards/FactlistCard/FactListCard.args.d.ts

@@ -0,0 +1,3 @@
+import { FactlistCardProps } from ".";
+export declare const FactlistCardArgs: FactlistCardProps;
+export default FactlistCardArgs;

package/lib/types/react/src/components/Cards/FactlistCard/FactListCard.d.ts

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

package/lib/types/react/src/components/Cards/FactlistCard/FactListCard.props.d.ts

@@ -0,0 +1,16 @@
+import { ThemeTypes, CardSize } from "../../../types";
+export type FactlistCardProps = {
+    /**
+     * 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">;
+    list?: string[];
+};

package/lib/types/react/src/components/Cards/FactlistCard/index.d.ts

@@ -0,0 +1,3 @@
+export { default as FactlistCard } from "./FactListCard";
+export type { FactlistCardProps } from "./FactListCard.props";
+export { FactlistCardArgs } from "./FactListCard.args";

package/lib/types/react/src/components/Cards/FeatureCard/FeatureCard.args.d.ts

@@ -0,0 +1,3 @@
+import { FeatureCardProps } from ".";
+export declare const FeatureCardArgs: FeatureCardProps;
+export default FeatureCardArgs;

package/lib/types/react/src/components/Cards/FeatureCard/FeatureCard.d.ts

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

package/lib/types/react/src/components/Cards/FeatureCard/FeatureCard.props.d.ts

@@ -0,0 +1,31 @@
+import { ThemeTypes, CardSize, EventDate } from "../../../types";
+import { LinkListProps } from "../../LinkList/LinkList.props";
+export type FeatureCardProps = {
+    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;
+    /**
+     * 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;
+    link?: string;
+    linklist?: LinkListProps;
+    /**
+     * The image to show in the card
+     */
+    image?: string;
+};

package/lib/types/react/src/components/Cards/FeatureCard/index.d.ts

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

package/lib/types/react/src/components/Cards/MultilinkCard/MultiLinkCard.d.ts

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

package/lib/types/react/src/components/Cards/MultilinkCard/MultilinkCard.args.d.ts

@@ -0,0 +1,2 @@
+import { MultilinkCardProps } from ".";
+export declare const MultilinkCardArgs: MultilinkCardProps;

package/lib/types/react/src/components/Cards/MultilinkCard/MultilinkCard.props.d.ts

@@ -0,0 +1,25 @@
+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/lib/types/react/src/components/Cards/MultilinkCard/index.d.ts

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

package/lib/types/react/src/components/Cards/PromoCard/PromoCard.args.d.ts

@@ -0,0 +1,3 @@
+import { PromoCardProps } from ".";
+export declare const PromoCardArgs: PromoCardProps;
+export default PromoCardArgs;

package/lib/types/react/src/components/Cards/PromoCard/PromoCard.d.ts

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

package/lib/types/react/src/components/Cards/PromoCard/PromoCard.props.d.ts

@@ -0,0 +1,30 @@
+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/lib/types/react/src/components/Cards/PromoCard/index.d.ts

@@ -0,0 +1,3 @@
+export { default as PromoCard } from "./PromoCard";
+export type { PromoCardProps } from "./PromoCard.props";
+export { PromoCardArgs } from "./PromoCard.args";

package/lib/types/react/src/components/Cards/StatCard/StatCard.args.d.ts

@@ -0,0 +1,3 @@
+import { StatCardProps } from ".";
+export declare const StatCardArgs: StatCardProps;
+export default StatCardArgs;

package/lib/types/react/src/components/Cards/StatCard/StatCard.d.ts

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

package/lib/types/react/src/components/Cards/StatCard/StatCard.props.d.ts

@@ -0,0 +1,18 @@
+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/lib/types/react/src/components/Cards/StatCard/index.d.ts

@@ -0,0 +1,3 @@
+export { default as StatCard } from "./StatCard";
+export type { StatCardProps } from "./StatCard.props";
+export { StatCardArgs } from "./StatCard.args";

package/lib/types/react/src/components/Cards/TextCard/TextCard.args.d.ts

@@ -0,0 +1,3 @@
+import { TextCardProps } from ".";
+export declare const TextCardArgs: TextCardProps;
+export default TextCardArgs;

package/lib/types/react/src/components/Cards/TextCard/TextCard.d.ts

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

package/lib/types/react/src/components/Cards/TextCard/TextCard.props.d.ts

@@ -0,0 +1,26 @@
+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/lib/types/react/src/components/Cards/TextCard/index.d.ts

@@ -0,0 +1,3 @@
+export { default as TextCard } from "./TextCard";
+export type { TextCardProps } from "./TextCard.props";
+export { TextCardArgs } from "./TextCard.args";

package/lib/types/react/src/components/index.d.ts

@@ -36,6 +36,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/lib/types/react/src/types/index.d.ts

@@ -27,10 +27,14 @@ export type SizeTypes = "small" | "medium" | "large";
 export type TagTypes = "anchor" | "display" | "button";
 export type SocialTypes = "facebook" | "twitter" | "instagram" | "linkedin" | "youtube" | "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" | "feature" | "detail" | "factlist" | "data";
+export type CardTypes = "stat" | "multilink" | "text" | "promo" | "feature" | "detail" | "factlist" | "data";
+export type EventDate = {
+    unix?: string;
+    human?: string;
+};
 export interface FormFieldProps<T> {
     /**
      * The input's onChange callback.

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ilo-org/react",
-  "version": "0.11.0",
+  "version": "0.13.0",
   "description": "React components for the ILO's Design System",
   "keywords": [
     "ui_patterns",
@@ -78,7 +78,7 @@
     "@ilo-org/brand-assets": "0.4.0",
     "@ilo-org/fonts": "0.1.2",
     "@ilo-org/icons-react": "0.0.21",
-    "@ilo-org/styles": "0.14.1",
+    "@ilo-org/styles": "0.15.0",
     "@ilo-org/themes": "0.7.2",
     "@ilo-org/utils": "0.0.11"
   },