@ilo-org/react 0.10.6 → 0.12.0

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

@@ -0,0 +1,307 @@
+import { CardAlignment, ThemeTypes, CardCornerType, CardColor, CardSize, CardTypes } from "../../types";
+import { LinkProps, LinkListProps } from "../LinkList/LinkList.props";
+import { ProfileProps } from "../Profile/Profile.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;
+};
+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">;
+};
+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[];
+};
+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;
+};
+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;
+};
+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;
+};
+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;
+};
+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;
+};
+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: string;
+    /**
+     * Title field for the card
+     */
+    title: 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;
+    /**
+     * Type - Sets the type of card to render.
+       Option keys: feature, text, detail, promo, multilink, data, stat, factlist
+     */
+    type: 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 card that uses this setting are `Promo`.
+     */
+    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 `Text` card
+     */
+    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 `Promo` card.
+     */
+    cta?: LinkProps;
+    /**
+     * The image used in a card. Images should be avoided on `Promo`, `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;
+    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/{Card → Cards}/CardGroup.props.d.ts

@@ -1,4 +1,4 @@
-import { CardProps } from "../Card/Card.props";
+import { CardProps } from "./Card.props";
 import { LinkProps } from "../LinkList/LinkList.props";
 export interface CardGroupProps {
     /**

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

@@ -0,0 +1,11 @@
+import FeatureCard from "./FeatureCard";
+import DataCard from "./DataCard";
+import DetailCard from "./DetailCard";
+import FactlistCard from "./FactlistCard";
+import MultilinkCard from "./MultilinkCard";
+import PromoCard from "./PromoCard";
+import StatCard from "./StatCard";
+import TextCard from "./TextCard";
+export { FeatureCard, DataCard, DetailCard, FactlistCard, MultilinkCard, PromoCard, StatCard, TextCard, };
+export { default as Card } from "./Card";
+export { default as CardGroup } from "./CardGroup";

package/lib/types/react/src/components/Tabs/Tabs.args.d.ts

@@ -0,0 +1,10 @@
+import { TabsProps } from "./Tabs.props";
+/**
+ * Sample prop definitions for Button's enumerable properties (imported in stories and tests).
+ */
+declare const TabsArgs: {
+    tabs: TabsProps;
+    withIcon: TabsProps;
+    fiveItems: TabsProps;
+};
+export default TabsArgs;

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

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

package/lib/types/react/src/components/Tabs/Tabs.props.d.ts

@@ -0,0 +1,12 @@
+import { IconProps } from "../Icon/Icon.props";
+export interface TabsProps {
+    /**
+     * Specify the items inside a tab
+     */
+    items: Required<Array<TabItem>>;
+}
+export interface TabItem {
+    icon?: IconProps;
+    label: Required<string>;
+    content: Required<any>;
+}

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

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

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

@@ -1,4 +1,4 @@
-import { FC } from "react";
 import { VideoProps } from "./Video.props";
-declare const Video: FC<VideoProps>;
+import { VideoPlayerRef } from "./VideoPlayer.props";
+declare const Video: import("react").ForwardRefExoticComponent<VideoProps & import("react").RefAttributes<VideoPlayerRef>>;
 export default Video;

package/lib/types/react/src/components/Video/Video.props.d.ts

@@ -1,51 +1,18 @@
-import { TracksConfig } from "./VideoPlayer.props";
+import { VideoPlayerControls } from "./VideoPlayer.props";
 export interface Poster {
-    url: {
-        src: string;
-    }[];
+    src: string;
     alt: string;
 }
-interface VideoPlayerControls {
-    /**
-     * Specify the label for the fullscreen button
-     */
-    fullscreen?: Required<string>;
-    /**
-     * Specify the label for the  play button
-     */
-    play?: Required<string>;
-    /**
-     * Specify the label for the pause button
-     */
-    pause?: Required<string>;
-    /**
-     * Specify the label for the volume button
-     */
-    volume?: Required<string>;
-}
-interface Video {
+export interface VideoProps {
+    src: string;
     /**
      * Specify the strings to be used as labels for the video controls
      */
-    controls?: Required<VideoPlayerControls | false>;
-    /**
-     * if self-hosted, specify the url of this video
-     */
-    src?: string | null;
-    /**
-     * if there are closed-caption tracks,
-     */
-    tracks?: TracksConfig[];
+    controls?: VideoPlayerControls;
     /**
      * if YouTube, set to true
      */
     youtube?: boolean;
-}
-export interface VideoProps {
-    /**
-     * Specify the alt for the image
-     */
-    alt: string;
     /**
      * Specify the caption for the image/video
      */
@@ -58,9 +25,4 @@ export interface VideoProps {
      * Specify the image src for the image
      */
     poster?: Poster;
-    /**
-     * Specify whether there is a video being shown
-     */
-    video: Video;
 }
-export {};

package/lib/types/react/src/components/Video/VideoPlayer.d.ts

@@ -1,4 +1,4 @@
-import { FC } from "react";
-import { VideoPlayerProps } from "./VideoPlayer.props";
-declare const VideoPlayer: FC<VideoPlayerProps>;
+import "videojs-youtube";
+import { VideoPlayerProps, VideoPlayerRef } from "./VideoPlayer.props";
+declare const VideoPlayer: import("react").ForwardRefExoticComponent<VideoPlayerProps & import("react").RefAttributes<VideoPlayerRef>>;
 export default VideoPlayer;

package/lib/types/react/src/components/Video/VideoPlayer.props.d.ts

@@ -1,4 +1,8 @@
 import { Poster } from "./Video.props";
+import videojs from "video.js";
+export interface VideoPlayerRef {
+    player: videojs.Player | undefined;
+}
 export interface VideoPlayerControls {
     /**
      * Specify the label for the fullscreen button
@@ -17,25 +21,8 @@ export interface VideoPlayerControls {
      */
     volume: string;
 }
-export interface TracksConfig {
-    /**
-     * is this the default track?
-     */
-    default?: boolean;
-    /**
-     * What kind of track is it?
-     */
-    kind?: string;
-    /**
-     * url for the track
-     */
-    src?: string;
-    /**
-     * language of the track
-     */
-    srcLang?: string;
-}
 export interface VideoPlayerProps {
+    src: string;
     /**
      * Specify an optional className to be added to your Media.
      */
@@ -43,23 +30,11 @@ export interface VideoPlayerProps {
     /**
      * Specify the strings to be used as labels for the video controls
      */
-    controls?: Required<VideoPlayerControls | false>;
-    /**
-     * Specify whether a video is to be shown
-     */
-    hasvideo?: Required<boolean>;
+    controls?: VideoPlayerControls;
     /**
      *  poster image for video
      */
     poster?: Poster;
-    /**
-     * if self-hosted, specify the url of this video
-     */
-    src?: string | null;
-    /**
-     * if there are closed-caption tracks,
-     */
-    tracks?: Required<Array<TracksConfig>> | null;
     /**
      * if YouTube, set to true
      */

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

@@ -36,5 +36,6 @@ export { TableOfContents } from "./TableOfContents";
 export { Footer } from "./Footer";
 export { LocalNav } from "./LocalNav";
 export { Navigation } from "./Navigation";
-export { Card, CardGroup } from "./Card";
+export { Card, CardGroup } from "./Cards";
 export { Breadcrumb } from "./Breadcrumb";
+export { Tabs } from "./Tabs";

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

@@ -27,10 +27,10 @@ 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 interface FormFieldProps<T> {
     /**
      * The input's onChange callback.

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ilo-org/react",
-  "version": "0.10.6",
+  "version": "0.12.0",
   "description": "React components for the ILO's Design System",
   "keywords": [
     "ui_patterns",
@@ -72,13 +72,14 @@
     "classnames": "^2.3.1",
     "dom-helpers": "^5.2.1",
     "nanoid": "^3.3.6",
-    "react-player": "2.10.1",
     "react-transition-group": "^4.4.1",
+    "video.js": "^7.21.2",
+    "videojs-youtube": "^3.0.1",
     "@ilo-org/brand-assets": "0.4.0",
-    "@ilo-org/icons-react": "0.0.21",
     "@ilo-org/fonts": "0.1.2",
-    "@ilo-org/styles": "0.14.0",
-    "@ilo-org/themes": "0.7.1",
+    "@ilo-org/styles": "0.14.2",
+    "@ilo-org/icons-react": "0.0.21",
+    "@ilo-org/themes": "0.7.2",
     "@ilo-org/utils": "0.0.11"
   },
   "devDependencies": {
@@ -107,6 +108,7 @@
     "@types/node": "^17.0.45",
     "@types/react": "^17.0.11",
     "@types/react-dom": "^17.0.20",
+    "@types/video.js": "7",
     "http-server": "^14.1.0",
     "identity-obj-proxy": "^3.0.0",
     "jest-environment-jsdom": "27.5.1",
@@ -132,8 +134,8 @@
     "tslib": "^2.3.1",
     "vite": "^4.5.2",
     "@ilo-org/eslint-config": "0.1.0",
-    "@ilo-org/typescript-config": "0.0.1",
-    "@ilo-org/prettier-config": "0.0.2"
+    "@ilo-org/prettier-config": "0.0.2",
+    "@ilo-org/typescript-config": "0.0.1"
   },
   "peerDependencies": {
     "react": ">16",