@ilo-org/react 0.14.1 → 0.16.0

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

@@ -7,15 +7,40 @@ import { FeatureCardProps } from "../FeatureCard";
 import { DetailCardProps } from "../DetailCard";
 import { FactlistCardProps } from "../FactlistCard";
 import { DataCardProps } from "../DataCard";
+import { HeadingTypes, CardSize, ThemeTypes, CardAlignment } from "../../../types";
 export interface CommonCardGroupProps {
     /**
-     * Number of cards in the group
+     *Collapsed - Optionally collapses margins between the cards.
+     *Option keys: true, false
+     */
+    collapsed?: boolean;
+    /**
+     *Number of cards in the group
      */
     cardCount: string;
     /**
-     * A Button to display after all the cards in the group
+     *Size - Sets the layout of the cards in the group. See the Card component for more info on this setting, which has different effects on the different types of cards.
+     *Option keys: standard, narrow, wide, fluid
+     */
+    size: CardSize;
+    /**
+     *Alignment - Positions the image to the right or to the left of the content when the card is displayed in a wide or fluid size. Has no effect if the card is displayed in a standard or narrow size. Only used by `Multilink Card`.
+     *Option keys: left, right
+     */
+    alignment?: CardAlignment;
+    /**
+     *Set the title level for all the cards in the group
+     */
+    titleLevel?: HeadingTypes;
+    /**
+     *A Button to display after all the cards in the group
      */
     cta?: LinkProps;
+    /**
+     *Theme - Sets all of the cards to appear as either light or dark. Used by all card groups except for Multilink Card, Data Card and Stat Card.
+     *Option keys: dark, light
+     */
+    theme?: ThemeTypes;
 }
 export interface StatCardGroup extends CommonCardGroupProps {
     /**
@@ -53,6 +78,7 @@ export interface FactlistCardGroup extends CommonCardGroupProps {
 }
 export interface DataCardGroup extends CommonCardGroupProps {
     type: "data";
+    titleLevel?: never;
     cards: DataCardProps[];
 }
 export type CardGroupProps = StatCardGroup | MultilinkCardGroup | TextCardGroup | PromoCardGroup | FeatureCardGroup | DetailCardGroup | FactlistCardGroup | DataCardGroup;

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

@@ -1,4 +1,4 @@
-import { CardSize, EventDate } from "../../../types";
+import { CardSize, EventDate, HeadingTypes } from "../../../types";
 export type DetailCardProps = {
     /**
      * A line of text that appears as a small heading above the title of the card
@@ -8,6 +8,10 @@ export type DetailCardProps = {
      * The title of the card
      */
     title: string;
+    /**
+     * HTML element used for the title
+     */
+    titleLevel?: HeadingTypes;
     /**
      * Introductory text in the card
      */

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

@@ -1,9 +1,13 @@
-import { ThemeTypes, CardSize } from "../../../types";
+import { ThemeTypes, CardSize, HeadingTypes } from "../../../types";
 export type FactlistCardProps = {
     /**
      * The title of the card
      */
     title: string;
+    /**
+     * HTML element used for the title
+     */
+    titleLevel?: HeadingTypes;
     /**
      * Will render the card to appear on light or dark backgrounds
      */

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

@@ -1,4 +1,4 @@
-import { ThemeTypes, CardSize, EventDate } from "../../../types";
+import { ThemeTypes, CardSize, EventDate, HeadingTypes } from "../../../types";
 import { LinkListProps } from "../../LinkList/LinkList.props";
 export type FeatureCardProps = {
     isvideo?: boolean;
@@ -10,6 +10,10 @@ export type FeatureCardProps = {
      * The title of the card
      */
     title: string;
+    /**
+     * HTML element used for the title
+     */
+    titleLevel?: HeadingTypes;
     /**
      * Will render the card to appear on light or dark backgrounds
      */

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

@@ -1,4 +1,4 @@
-import { CardAlignment, CardSize } from "../../../types";
+import { CardAlignment, CardSize, HeadingTypes } from "../../../types";
 import { LinkListProps } from "../../LinkList/LinkList.props";
 export type MultilinkCardProps = {
     isvideo?: boolean;
@@ -10,6 +10,10 @@ export type MultilinkCardProps = {
      * The title of the card
      */
     title: string;
+    /**
+     * HTML element used for the title
+     */
+    titleLevel?: HeadingTypes;
     /**
      * How big should the card be
      */

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

@@ -1,4 +1,4 @@
-import { ThemeTypes, CardCornerType, CardSize } from "../../../types";
+import { ThemeTypes, CardCornerType, CardSize, HeadingTypes } from "../../../types";
 import { LinkProps } from "../../LinkList/LinkList.props";
 export type PromoCardProps = {
     /**
@@ -9,6 +9,10 @@ export type PromoCardProps = {
      * The title of the card
      */
     title: string;
+    /**
+     * HTML element used for the title
+     */
+    titleLevel?: HeadingTypes;
     /**
      * Will render the card to appear on light or dark backgrounds
      */

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

@@ -1,10 +1,17 @@
-import { CardColor, CardSize } from "../../../types";
+import { CardColor, CardSize, HeadingTypes } from "../../../types";
 import { LinkProps } from "../../LinkList/LinkList.props";
 export type StatCardProps = {
     /**
      * The title of the card
      */
     title: string;
+    /**
+     * HTML element used for the title
+     */
+    titleLevel?: HeadingTypes;
+    /**
+     * Background color of stat card
+     */
     color?: CardColor;
     /**
      * How big should the card be

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

@@ -1,4 +1,4 @@
-import { ThemeTypes, CardSize, EventDate } from "../../../types";
+import { ThemeTypes, CardSize, EventDate, HeadingTypes } from "../../../types";
 import { ProfileProps } from "../../Profile/Profile.props";
 export type TextCardProps = {
     /**
@@ -9,6 +9,10 @@ export type TextCardProps = {
      * The title of the card
      */
     title: string;
+    /**
+     * HTML element used for the title
+     */
+    titleLevel?: HeadingTypes;
     /**
      * Will render the card to appear on light or dark backgrounds
      */

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

@@ -1,2 +1 @@
 export { default as useGlobalSettings } from "./useGlobalSettings";
-export { default as useVideoPlayer } from "./useVideoPlayer";

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

@@ -29,6 +29,7 @@ export type CardSize = "wide" | "standard" | "narrow" | "fluid";
 export type CardCornerType = boolean;
 export type CardAlignment = "left" | "right";
 export type CardTypes = "stat" | "multilink" | "text" | "promo" | "feature" | "detail" | "factlist" | "data";
+export type HeadingTypes = "p" | "h1" | "h2" | "h3" | "h4" | "h5" | "h6";
 export type EventDate = {
     unix?: string;
     human?: string;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ilo-org/react",
-  "version": "0.14.1",
+  "version": "0.16.0",
   "description": "React components for the ILO's Design System",
   "keywords": [
     "ui_patterns",
@@ -54,7 +54,8 @@
       "import": "./lib/esm/hooks/*.js",
       "require": "./lib/cjs/hooks/*.js",
       "types": "./lib/types/react/src/hooks/index.d.ts"
-    }
+    },
+    "./styles/": "./lib/styles/"
   },
   "typesVersions": {
     "*": {
@@ -101,7 +102,7 @@
     "@ilo-org/brand-assets": "0.5.1",
     "@ilo-org/fonts": "0.2.1",
     "@ilo-org/icons-react": "0.1.1",
-    "@ilo-org/styles": "0.16.1",
+    "@ilo-org/styles": "1.0.1",
     "@ilo-org/themes": "0.8.1",
     "@ilo-org/utils": "0.1.1"
   },
@@ -132,6 +133,7 @@
     "@types/react": "^17.0.11",
     "@types/react-dom": "^17.0.20",
     "@types/video.js": "7.3.57",
+    "glob": "^10.3.10",
     "http-server": "^14.1.0",
     "identity-obj-proxy": "^3.0.0",
     "jest-environment-jsdom": "27.5.1",
@@ -155,7 +157,7 @@
     "ts-dedent": "^2.2.0",
     "ts-jest": "^29.1.1",
     "tslib": "^2.3.1",
-    "vite": "^4.5.2",
+    "vite": "^4.5.3",
     "@ilo-org/eslint-config": "0.2.1",
     "@ilo-org/prettier-config": "0.1.1",
     "@ilo-org/typescript-config": "0.1.1"
@@ -169,7 +171,7 @@
   },
   "scripts": {
     "build": "pnpm build:lib",
-    "build:lib": "rollup -c",
+    "build:lib": "rollup -c && npm run copy:styles",
     "build:docs": "storybook build",
     "check": "tsc --noEmit --p tsconfig.build.json",
     "dev:lib": "rollup --config --configDevelop -w",
@@ -179,6 +181,7 @@
     "lint:fix": "eslint . --fix",
     "storybook": "storybook dev -p 6006",
     "storybook:static": "http-server ./storybook-static",
+    "copy:styles": "node copystyles.js",
     "test": "NODE_OPTIONS=--experimental-vm-modules SKIP_PREFLIGHT_CHECK=true react-scripts test --watchAll=false --setupFilesAfterEnv ./src/setup.ts"
   }
 }

package/lib/cjs/hooks/useVideoPlayer.js

@@ -1,75 +0,0 @@
-'use strict';
-
-var React = require('react');
-
-const useVideoPlayer = (videoElement) => {
-    const [fullscreen, setFullscreen] = React.useState(false);
-    const [playing, setPlaying] = React.useState(false);
-    const [progress, setProgress] = React.useState(0);
-    const [showvolume, showVolume] = React.useState(false);
-    /**
-     * Fullscreen functionality
-     */
-    const toggleFullscreen = () => {
-        setFullscreen(!fullscreen);
-    };
-    React.useEffect(() => {
-        if (fullscreen) {
-            if (videoElement.requestFullscreen) {
-                videoElement.requestFullscreen();
-            }
-        }
-        else {
-            document.exitFullscreen();
-        }
-    }, [fullscreen, videoElement]);
-    /**
-     * Play/pause functionality
-     */
-    const togglePlay = () => {
-        setPlaying(!playing);
-    };
-    React.useEffect(() => {
-        playing ? videoElement.current.play() : videoElement.current.pause();
-    }, [playing, videoElement]);
-    /**
-     * Progress indicator
-     */
-    const handleOnTimeUpdate = () => {
-        setProgress((videoElement.current.currentTime / videoElement.current.duration) * 100);
-    };
-    /**
-     * Scrub functionality
-     */
-    const handleVideoScrub = (event) => {
-        const scrubValue = Number((event.offsetX * event.target.max) / event.target.offsetWidth);
-        videoElement.current.currentTime =
-            videoElement.current.duration * scrubValue;
-        setProgress(scrubValue);
-    };
-    /**
-     * Show volume slider
-     */
-    const toggleVolumeSlider = () => {
-        showVolume(!showvolume);
-    };
-    /**
-     * Volume change
-     */
-    const handleVolumeChange = (event) => {
-        videoElement.volume = event.target.value;
-    };
-    return {
-        handleOnTimeUpdate,
-        handleVideoScrub,
-        handleVolumeChange,
-        playing,
-        progress,
-        showvolume,
-        toggleFullscreen,
-        togglePlay,
-        toggleVolumeSlider,
-    };
-};
-
-module.exports = useVideoPlayer;

package/lib/esm/hooks/useVideoPlayer.js

@@ -1,73 +0,0 @@
-import { useState, useEffect } from 'react';
-
-const useVideoPlayer = (videoElement) => {
-    const [fullscreen, setFullscreen] = useState(false);
-    const [playing, setPlaying] = useState(false);
-    const [progress, setProgress] = useState(0);
-    const [showvolume, showVolume] = useState(false);
-    /**
-     * Fullscreen functionality
-     */
-    const toggleFullscreen = () => {
-        setFullscreen(!fullscreen);
-    };
-    useEffect(() => {
-        if (fullscreen) {
-            if (videoElement.requestFullscreen) {
-                videoElement.requestFullscreen();
-            }
-        }
-        else {
-            document.exitFullscreen();
-        }
-    }, [fullscreen, videoElement]);
-    /**
-     * Play/pause functionality
-     */
-    const togglePlay = () => {
-        setPlaying(!playing);
-    };
-    useEffect(() => {
-        playing ? videoElement.current.play() : videoElement.current.pause();
-    }, [playing, videoElement]);
-    /**
-     * Progress indicator
-     */
-    const handleOnTimeUpdate = () => {
-        setProgress((videoElement.current.currentTime / videoElement.current.duration) * 100);
-    };
-    /**
-     * Scrub functionality
-     */
-    const handleVideoScrub = (event) => {
-        const scrubValue = Number((event.offsetX * event.target.max) / event.target.offsetWidth);
-        videoElement.current.currentTime =
-            videoElement.current.duration * scrubValue;
-        setProgress(scrubValue);
-    };
-    /**
-     * Show volume slider
-     */
-    const toggleVolumeSlider = () => {
-        showVolume(!showvolume);
-    };
-    /**
-     * Volume change
-     */
-    const handleVolumeChange = (event) => {
-        videoElement.volume = event.target.value;
-    };
-    return {
-        handleOnTimeUpdate,
-        handleVideoScrub,
-        handleVolumeChange,
-        playing,
-        progress,
-        showvolume,
-        toggleFullscreen,
-        togglePlay,
-        toggleVolumeSlider,
-    };
-};
-
-export { useVideoPlayer as default };

package/lib/types/react/src/hooks/useVideoPlayer.d.ts

@@ -1,12 +0,0 @@
-declare const useVideoPlayer: (videoElement: any) => {
-    handleOnTimeUpdate: () => void;
-    handleVideoScrub: (event: any) => void;
-    handleVolumeChange: (event: any) => void;
-    playing: boolean;
-    progress: number;
-    showvolume: boolean;
-    toggleFullscreen: () => void;
-    togglePlay: () => void;
-    toggleVolumeSlider: () => void;
-};
-export default useVideoPlayer;