@ilo-org/react 0.2.1 → 0.4.0

package/lib/esm/components/Logo/Logo.js

@@ -0,0 +1,151 @@
+import { __rest } from 'tslib';
+import { jsx, jsxs } from 'react/jsx-runtime';
+import { useRef, useState, useEffect } from 'react';
+import useGlobalSettings from '../../hooks/useGlobalSettings.js';
+import classNames from 'classnames';
+import '../../GlobalCtx-7fb23cfa.js';
+
+const isOverflown = ({ clientHeight, clientWidth, scrollHeight, scrollWidth, }) => scrollHeight > clientHeight || scrollWidth > clientWidth;
+const getFullFontSize = (container, { maxSize = 600, startingHeight = 9, step = 0.5 }) => {
+    let i = startingHeight;
+    let overflow = false;
+    while (!overflow && i < maxSize) {
+        container.style.fontSize = `${i}px`;
+        container.style.lineHeight = `${i}px`;
+        overflow = isOverflown(container);
+        if (!overflow) {
+            i = i + step;
+        }
+    }
+    // Reset styles to the way they were
+    container.style.fontSize = "";
+    container.style.lineHeight = "";
+    // Return the ideal font size
+    return i - step;
+};
+const BaseLogo = (_a) => {
+    var { baseClass, className, subbrand, alt, src, style: userStyles, size = "fluid", theme = "light" } = _a, props = __rest(_a, ["baseClass", "className", "subbrand", "alt", "src", "style", "size", "theme"]);
+    // The logo image element
+    const imageRef = useRef(null);
+    // The lockup container
+    const lockupRef = useRef(null);
+    // The lockup text
+    const lockupTextRef = useRef(null);
+    // Has the image loaded or not
+    const [imageLoaded, setImageLoaded] = useState(false);
+    // Dynamic height of the image
+    const [imageHeight, setImageHeight] = useState(0);
+    // Ratio of the font size to the height of the logo image
+    const [fontSizeRatio, setfontSizeRatio] = useState(0);
+    // Is the logo visible? Default to true if not a subbrand
+    const [isLogoVisible, setIsLogoVisible] = useState(!subbrand);
+    // Initial height of the image when it's loaded
+    const initialImageHeight = useRef(null);
+    // Resize observer gets the initial height of the image when
+    // it loads and updates the height when it changes in state
+    const observer = useRef(new ResizeObserver((entries) => {
+        const { height } = entries[0].contentRect;
+        if (!initialImageHeight.current) {
+            initialImageHeight.current = height;
+        }
+        setImageHeight(height);
+    }));
+    // Make the logo visible for subrand when everything is ready
+    useEffect(() => {
+        if (subbrand && imageLoaded && fontSizeRatio) {
+            setIsLogoVisible(true);
+        }
+    }, [imageLoaded, fontSizeRatio, subbrand]);
+    // Set up the Resize observer to watch the image
+    useEffect(() => {
+        if (imageLoaded && lockupRef.current && imageRef.current) {
+            const imageEl = imageRef.current;
+            observer.current.observe(imageEl);
+            return () => observer.current.unobserve(imageEl);
+        }
+    }, [imageLoaded]);
+    // Gets the font size necessary for the lockup text to fill the
+    // the lockup container as much as possible without overflowing.
+    // Then gets the ratio of full font size to image height which will
+    // be used to calculate the font size if the image gets resized
+    useEffect(() => {
+        setFontSize();
+    }, [imageLoaded, initialImageHeight.current]);
+    // Adjust the font size if for some weird reason the subbrand changes
+    // This is mostly just to illustrate how the component works on Storybook
+    useEffect(() => {
+        setFontSize();
+    }, [subbrand]);
+    function setFontSize() {
+        if (lockupRef.current &&
+            lockupTextRef.current &&
+            initialImageHeight.current) {
+            const fullFontSize = getFullFontSize(lockupRef.current, {
+                maxSize: initialImageHeight.current,
+            });
+            const ratio = fullFontSize / initialImageHeight.current;
+            setfontSizeRatio(ratio);
+        }
+    }
+    // Has the image loaded or not
+    function handleImageLoaded() {
+        setImageLoaded(true);
+    }
+    // Conditions for different CSS classes
+    const hasSubbrand = !!subbrand;
+    const hasFluidWidth = size === "fluid";
+    const hasFixedWidth = !hasFluidWidth && typeof size === "number";
+    // Classes for the outer figure container
+    const subBrandClass = `${baseClass}--sub-brand`;
+    const fluidWidthClass = `${baseClass}--size--fluid`;
+    const visibilityHidden = `${baseClass}--visibility--hidden`;
+    // Outer figure classes
+    const classNames$1 = classNames(baseClass, className, `${baseClass}--theme--${theme}`, {
+        [visibilityHidden]: !isLogoVisible,
+        [fluidWidthClass]: hasFluidWidth,
+        [subBrandClass]: hasSubbrand,
+    });
+    // Classes for the image element
+    const noSubBrandImageClass = `${baseClass}--image`;
+    const subBrandImageClass = `${subBrandClass}--image`;
+    // Set inline CSS including variables on the outer figure element
+    const getStyle = () => {
+        const conditionalStyles = {};
+        // Add CSS vars if this is a sub-brand
+        if (hasSubbrand) {
+            conditionalStyles["--logo-image-height"] = `${imageHeight}px`;
+            conditionalStyles["--logo-font-size"] = `${fontSizeRatio * imageHeight}px`;
+        }
+        // Add fixed width if it has fixed width
+        if (hasFixedWidth) {
+            conditionalStyles.width = `${size}px`;
+        }
+        // User styles may be overriden
+        return Object.assign({ userStyles }, conditionalStyles);
+    };
+    const getImageSrc = () => {
+        if (typeof src === "string") {
+            return src;
+        }
+        return src[theme];
+    };
+    return (jsxs("figure", Object.assign({ className: classNames$1, style: getStyle() }, { children: [jsx("img", Object.assign({ ref: imageRef, alt: alt, src: getImageSrc(), className: classNames({
+                    [subBrandImageClass]: hasSubbrand,
+                    [noSubBrandImageClass]: !hasSubbrand,
+                }), onLoad: handleImageLoaded }, props)), hasSubbrand && (jsxs("div", Object.assign({ ref: lockupRef, className: `${subBrandClass}--lock-up` }, { children: [jsx("span", { className: `${subBrandClass}--lock-up--separator` }), jsx("span", Object.assign({ ref: lockupTextRef }, { children: subbrand }))] })))] })));
+};
+const Logo = (_a) => {
+    var { className, url, target, style, size } = _a, props = __rest(_a, ["className", "url", "target", "style", "size"]);
+    const { prefix } = useGlobalSettings();
+    const baseClass = `${prefix}--logo`;
+    const linkClass = `${baseClass}--link`;
+    const fluidClass = `${baseClass}--size--fluid`;
+    if (url) {
+        return (jsx("a", Object.assign({ href: url, target: target, className: classNames(linkClass, className, {
+                [fluidClass]: size === "fluid",
+            }), style: style }, { children: jsx(BaseLogo, Object.assign({}, props, { baseClass: baseClass, size: size })) })));
+    }
+    return (jsx(BaseLogo, Object.assign({ baseClass: baseClass, className: className, style: style, size: size }, props)));
+};
+
+export { Logo as default };

package/lib/esm/components/Logo/index.js

@@ -0,0 +1,7 @@
+export { default as Logo } from './Logo.js';
+import 'tslib';
+import 'react/jsx-runtime';
+import 'react';
+import '../../hooks/useGlobalSettings.js';
+import '../../GlobalCtx-7fb23cfa.js';
+import 'classnames';

package/lib/esm/components/Navigation/Navigation.js

@@ -0,0 +1,46 @@
+import { jsxs, jsx } from 'react/jsx-runtime';
+import { useState } from 'react';
+import useGlobalSettings from '../../hooks/useGlobalSettings.js';
+import ContextMenu from '../ContextMenu/ContextMenu.js';
+import SearchField from '../SearchField/SearchField.js';
+import classNames from 'classnames';
+import 'tslib';
+import '../../GlobalCtx-7fb23cfa.js';
+import '../Input/Input.js';
+import '../Fieldset/Fieldset.js';
+import '../Tooltip/Tooltip.js';
+import 'react-dom';
+import '../FormElement/FormElement.js';
+
+const Navigation = ({ logo, mobilelogo, siteurl, tagline, primarynav, subnav, menulabel, menucloselabel, searchlabel, searchfield, languagelabel, languagecontextmenu, }) => {
+    const { prefix } = useGlobalSettings();
+    const [toggleMenuOpen, setMenuToggleOpen] = useState(false);
+    const [toggleSearchOpen, setSearchToggleOpen] = useState(false);
+    const [toggleSubnavOpen, setSubnavToggleOpen] = useState(false);
+    const [toggleLanguageOpen, setLanguageToggleOpen] = useState(false);
+    const baseClass = `${prefix}--header`;
+    const NavigationClasses = classNames(baseClass, {
+        [`${prefix}--mobile--open`]: toggleMenuOpen,
+        [`${prefix}--select--open`]: toggleLanguageOpen,
+        [`${prefix}--search--open`]: toggleSearchOpen,
+        [`${prefix}--subnav--open`]: toggleSubnavOpen,
+    });
+    const handleMenuToggle = () => {
+        setMenuToggleOpen(!toggleMenuOpen);
+    };
+    const handleLanguageToggle = () => {
+        setLanguageToggleOpen(!toggleLanguageOpen);
+    };
+    const handleSearchToggle = () => {
+        setSearchToggleOpen(!toggleSearchOpen);
+    };
+    const handleSubnavToggle = () => {
+        setSubnavToggleOpen(!toggleSubnavOpen);
+    };
+    return (jsxs("header", Object.assign({ className: NavigationClasses }, { children: [jsx("div", Object.assign({ className: `${baseClass}--utility-bar` }, { children: jsx("div", Object.assign({ className: `${prefix}--language-switcher` }, { children: jsxs("div", Object.assign({ className: `${prefix}--language-switcher--wrap` }, { children: [jsx("button", Object.assign({ className: `${prefix}--language-switcher--button`, type: "button" }, { children: languagelabel })), jsx(ContextMenu, { links: languagecontextmenu === null || languagecontextmenu === void 0 ? void 0 : languagecontextmenu.links })] })) })) })), jsx("div", Object.assign({ className: `${baseClass}--logo-bar` }, { children: jsxs("div", Object.assign({ className: `${baseClass}--inner` }, { children: [jsx("a", Object.assign({ href: siteurl, className: `${baseClass}--logo-link` }, { children: jsx("img", { className: `${baseClass}--logo`, src: logo, alt: "ILO Logo" }) })), jsxs("p", Object.assign({ className: `${baseClass}--logo-tagline` }, { children: [tagline === null || tagline === void 0 ? void 0 : tagline.tag, jsx("span", Object.assign({ className: `${baseClass}--logo-tagline--small` }, { children: tagline === null || tagline === void 0 ? void 0 : tagline.small }))] })), jsx("button", Object.assign({ className: `${baseClass}--menu`, onClick: handleMenuToggle }, { children: menulabel }))] })) })), jsxs("div", Object.assign({ className: `${baseClass}--navigation` }, { children: [jsxs("div", Object.assign({ className: `${baseClass}--inner` }, { children: [jsxs("div", Object.assign({ className: `${prefix}--mobile--nav` }, { children: [jsxs("div", Object.assign({ className: `${prefix}--mobile--nav--logo` }, { children: [jsx("a", Object.assign({ href: siteurl, className: `${baseClass}--logo-link` }, { children: jsx("img", { className: `${baseClass}--logo`, src: mobilelogo, alt: "ILO Logo" }) })), jsx("button", Object.assign({ className: `${baseClass}--menu--close`, onClick: handleMenuToggle }, { children: menucloselabel }))] })), jsx("div", Object.assign({ className: `${prefix}--mobile--nav--search` }, { children: jsx(SearchField, { input: searchfield === null || searchfield === void 0 ? void 0 : searchfield.input, action: searchfield === null || searchfield === void 0 ? void 0 : searchfield.action }) })), jsx("div", Object.assign({ className: `${prefix}--mobile--nav--language--switcher` }, { children: jsx("button", Object.assign({ className: `${prefix}--mobile--nav--language--switcher--button`, onClick: handleLanguageToggle, type: "button" }, { children: languagelabel })) })), jsx("div", Object.assign({ className: `${prefix}--mobile--nav--language--select` }, { children: jsxs("div", Object.assign({ className: `${baseClass}--inner` }, { children: [jsxs("div", Object.assign({ className: `${prefix}--mobile--subnav--menu` }, { children: [jsx("button", Object.assign({ className: `${prefix}--mobile--subnav--back`, onClick: handleLanguageToggle, type: "button" }, { children: subnav === null || subnav === void 0 ? void 0 : subnav.mobilebacklabel })), jsx("button", Object.assign({ className: `${baseClass}--menu--close`, onClick: handleMenuToggle }, { children: subnav === null || subnav === void 0 ? void 0 : subnav.mobilecloselabel })), jsx("h6", Object.assign({ className: `${prefix}--mobile--subnav--label` }, { children: languagelabel }))] })), jsx("ul", Object.assign({ className: `${prefix}--nav--set` }, { children: (languagecontextmenu === null || languagecontextmenu === void 0 ? void 0 : languagecontextmenu.links) &&
+                                                        languagecontextmenu.links.map((item, index) => (jsx("li", Object.assign({ className: `${prefix}--nav--items` }, { children: jsx("a", Object.assign({ href: item.url, className: `${prefix}--nav--link ${prefix}--nav--language` }, { children: item.label })) }), index))) }))] })) }))] })), jsxs("nav", Object.assign({ className: `${prefix}--nav`, "aria-labelledby": "primary-navigation" }, { children: [jsx("h2", Object.assign({ className: `${prefix}--nav--label`, id: "primary-navigation" }, { children: primarynav === null || primarynav === void 0 ? void 0 : primarynav.navlabel })), jsxs("ul", Object.assign({ className: `${prefix}--nav--set` }, { children: [(primarynav === null || primarynav === void 0 ? void 0 : primarynav.items) &&
+                                                primarynav.items.map((item, index) => (jsx("li", Object.assign({ className: `${prefix}--nav--items` }, { children: jsx("a", Object.assign({ href: item.url, className: `${prefix}--nav--link` }, { children: item.label })) }), index))), subnav && (jsx("li", Object.assign({ className: `${prefix}--nav--items` }, { children: jsx("button", Object.assign({ className: `${prefix}--nav--trigger`, onClick: handleSubnavToggle }, { children: subnav.buttonlabel })) })))] }))] })), jsx("div", Object.assign({ className: `${prefix}--search` }, { children: jsx("button", Object.assign({ className: `${prefix}--search--button`, type: "button", onClick: handleSearchToggle }, { children: searchlabel })) }))] })), subnav && (jsx("nav", Object.assign({ className: `${prefix}--subnav`, "aria-labelledby": "secondary-navigation" }, { children: jsxs("div", Object.assign({ className: `${prefix}--subnav--inner` }, { children: [jsx("div", Object.assign({ className: `${prefix}--mobile--subnav` }, { children: jsxs("div", Object.assign({ className: `${prefix}--mobile--subnav--menu` }, { children: [jsx("button", Object.assign({ className: `${prefix}--mobile--subnav--back`, onClick: handleSubnavToggle, type: "button" }, { children: subnav.mobilebacklabel })), jsx("button", Object.assign({ className: `${prefix}--header--menu--close`, onClick: handleMenuToggle }, { children: subnav.mobilecloselabel })), jsx("h6", Object.assign({ className: `${prefix}--mobile--subnav--label` }, { children: subnav.buttonlabel }))] })) })), jsx("h2", Object.assign({ className: `${prefix}--nav--label`, id: "secondary-navigation" }, { children: subnav.navlabel })), jsx("ul", Object.assign({ className: `${prefix}--subnav--set` }, { children: (subnav === null || subnav === void 0 ? void 0 : subnav.items) &&
+                                        subnav.items.map((item, index) => (jsx("li", Object.assign({ className: `${prefix}--subnav--items` }, { children: jsx("a", Object.assign({ href: item.url, className: `${prefix}--subnav--link` }, { children: item.label })) }), index))) }))] })) }))), jsx("div", Object.assign({ className: `${prefix}--search-box` }, { children: jsx("div", Object.assign({ className: `${prefix}--header--inner` }, { children: jsx(SearchField, { input: searchfield === null || searchfield === void 0 ? void 0 : searchfield.input, action: searchfield === null || searchfield === void 0 ? void 0 : searchfield.action }) })) }))] }))] })));
+};
+
+export { Navigation as default };

package/lib/esm/components/Navigation/index.js

@@ -0,0 +1,14 @@
+export { default as Navigation } from './Navigation.js';
+import 'react/jsx-runtime';
+import 'react';
+import '../../hooks/useGlobalSettings.js';
+import 'tslib';
+import '../../GlobalCtx-7fb23cfa.js';
+import '../ContextMenu/ContextMenu.js';
+import 'classnames';
+import '../SearchField/SearchField.js';
+import '../Input/Input.js';
+import '../Fieldset/Fieldset.js';
+import '../Tooltip/Tooltip.js';
+import 'react-dom';
+import '../FormElement/FormElement.js';

package/lib/esm/components/Video/Video.js

@@ -1,7 +1,7 @@
 import { jsxs, jsx } from 'react/jsx-runtime';
 import classNames from 'classnames';
 import useGlobalSettings from '../../hooks/useGlobalSettings.js';
-import { V as VideoPlayer } from '../../VideoPlayer-62e0ce79.js';
+import { V as VideoPlayer } from '../../VideoPlayer-719076c4.js';
 import 'tslib';
 import 'react';
 import '../../GlobalCtx-7fb23cfa.js';

package/lib/esm/components/Video/VideoPlayer.js

@@ -1,6 +1,6 @@
 import 'react/jsx-runtime';
 import 'react';
-export { V as default } from '../../VideoPlayer-62e0ce79.js';
+export { V as default } from '../../VideoPlayer-719076c4.js';
 import 'react-dom';
 import 'classnames';
 import '../../hooks/useGlobalSettings.js';

package/lib/esm/components/Video/index.js

@@ -5,7 +5,7 @@ import '../../hooks/useGlobalSettings.js';
 import 'tslib';
 import 'react';
 import '../../GlobalCtx-7fb23cfa.js';
-import '../../VideoPlayer-62e0ce79.js';
+import '../../VideoPlayer-719076c4.js';
 import '../../index-8ebb2cc1.js';
 import 'react-dom';
 import '../../utils/hoursMinutesSeconds.js';

package/lib/esm/components/index.js

@@ -50,6 +50,9 @@ export { default as Profile } from './Profile/Profile.js';
 export { default as TableOfContents } from './TableOfContents/TableOfContents.js';
 export { default as Footer } from './Footer/Footer.js';
 export { default as LocalNav } from './LocalNav/LocalNav.js';
+export { default as Navigation } from './Navigation/Navigation.js';
+export { default as Card } from './Card/Card.js';
+export { default as CardGroup } from './Card/CardGroup.js';
 import '../hooks/useGlobalSettings.js';
 import '../AccordionCtx-8c051900.js';
 import '@ilo-org/utils';
@@ -62,7 +65,9 @@ import '../css-7414f50b.js';
 import '../utils/transitionEndListener.js';
 import '../utils/triggerBrowserReflow.js';
 import './Hero/HeroCard.js';
-import '../VideoPlayer-62e0ce79.js';
+import '../VideoPlayer-719076c4.js';
 import '../utils/hoursMinutesSeconds.js';
 import 'screenfull';
 import '@ilo-org/icons-react';
+import './Logo/Logo.js';
+import './List/ListItem.js';

package/lib/esm/index.js

@@ -50,6 +50,9 @@ export { default as Profile } from './components/Profile/Profile.js';
 export { default as TableOfContents } from './components/TableOfContents/TableOfContents.js';
 export { default as Footer } from './components/Footer/Footer.js';
 export { default as LocalNav } from './components/LocalNav/LocalNav.js';
+export { default as Navigation } from './components/Navigation/Navigation.js';
+export { default as Card } from './components/Card/Card.js';
+export { default as CardGroup } from './components/Card/CardGroup.js';
 import './hooks/useGlobalSettings.js';
 import './AccordionCtx-8c051900.js';
 import '@ilo-org/utils';
@@ -62,7 +65,9 @@ import './css-7414f50b.js';
 import './utils/transitionEndListener.js';
 import './utils/triggerBrowserReflow.js';
 import './components/Hero/HeroCard.js';
-import './VideoPlayer-62e0ce79.js';
+import './VideoPlayer-719076c4.js';
 import './utils/hoursMinutesSeconds.js';
 import 'screenfull';
 import '@ilo-org/icons-react';
+import './components/Logo/Logo.js';
+import './components/List/ListItem.js';

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

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

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

@@ -0,0 +1,110 @@
+import { CardAlignment, HeroCardTheme, 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?: HeroCardTheme;
+    /**
+     * 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>;
+}
+export {};

package/lib/types/react/src/components/Card/CardGroup.d.ts

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

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

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

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

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

@@ -1,21 +1,18 @@
 import { LinkProps, ContextMenuProps } from "../ContextMenu/ContextMenu.props";
+import { LogoProps } from "../Logo/Logo.props";
 export interface LocalNavProps {
     /**
      * Props for the background colour of the LocalNav
      */
     background?: string;
     /**
-     * Props for the logo of the LocalNav
+     * Props for the Logo component of the LocalNav
      */
-    logo?: Required<string>;
-    /**
-     * Props for the home url of the LocalNav
-     */
-    siteurl?: Required<string>;
+    logo: LogoProps;
     /**
      * Specify the primary items for the LocalNav
      */
-    primarynav?: Required<PrimaryNavProps>;
+    primarynav?: PrimaryNavProps;
     /**
      * Specify the main link for the LocalNav
      */

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

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

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

@@ -0,0 +1,55 @@
+type LogoSrc = string | {
+    /**
+     * The url of the logo to use with light theme
+     */
+    light: string;
+    /**
+     * The url of the logo to use with dark theme
+     */
+    dark: string;
+};
+export interface LogoProps {
+    /**
+     * The location of the image file
+     */
+    src: LogoSrc;
+    /**
+     * Alt text for the logo
+     */
+    alt: string;
+    /**
+     * The name of the sub-brand if there is one
+     */
+    subbrand?: string;
+    /**
+     * The width of the logo or 'fluid' width
+     */
+    size?: number | "fluid";
+    /**
+     * Styles to be applied to the outermost element
+     */
+    style?: React.CSSProperties;
+    /**
+     * Optional className to be passed to the outermost element of the component
+     */
+    className?: string;
+    /**
+     * Optional destination if the logo is a link
+     */
+    url?: string;
+    /**
+     * Optional target if the logo is a link
+     */
+    target?: "_blank" | "_self" | "_parent" | "_top";
+    /**
+     * Theme of the logo component
+     */
+    theme?: "light" | "dark";
+}
+export interface InnerLogoProps extends LogoProps {
+    /**
+     * The base class of the logo component
+     */
+    baseClass: string;
+}
+export {};

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

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

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

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

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

@@ -0,0 +1,99 @@
+import { LinkProps, ContextMenuProps } from "../ContextMenu/ContextMenu.props";
+import { SearchFieldProps } from "../SearchField/SearchField.props";
+export interface NavigationProps {
+    /**
+     * Props for the logo of the Navigation
+     */
+    logo?: Required<string>;
+    /**
+     * Props for the mobile logo of the Navigation
+     */
+    mobilelogo?: Required<string>;
+    /**
+     * Props for the home url of the Navigation
+     */
+    siteurl?: Required<string>;
+    /**
+     * Specify the tagline for the Navigation
+     */
+    tagline?: Required<TaglineProps>;
+    /**
+     * Specify the primary items for the Navigation
+     */
+    primarynav?: Required<PrimaryNavProps>;
+    /**
+     * Specify the secondary items for the Navigation
+     */
+    subnav?: Required<SubNavProps>;
+    /**
+     * Specify the tagline for the Navigation
+     */
+    searchlabel?: string;
+    /**
+     * Specify the searchfield props for the Navigation
+     */
+    searchfield?: SearchFieldProps;
+    /**
+     * Specify the menu label for the Navigation
+     */
+    menulabel?: string;
+    /**
+     * Specify the menu close label for the Navigation
+     */
+    menucloselabel?: string;
+    /**
+     * Specify the language label for the Navigation
+     */
+    languagelabel?: string;
+    /**
+     * Specify the language context menu for the Navigation
+     */
+    languagecontextmenu?: ContextMenuProps;
+}
+interface PrimaryNavProps {
+    /**
+     * Specify the label for Navigation
+     */
+    navlabel?: Required<string>;
+    /**
+     * Specify the close label for mobile Navigation
+     */
+    mobilecloselabel?: Required<string>;
+    /**
+     * Specify the links
+     */
+    items?: Required<Array<LinkProps>>;
+}
+interface SubNavProps {
+    /**
+     * Specify the label for sub Navigation
+     */
+    navlabel?: Required<string>;
+    /**
+     * Specify the button label for sub Navigation
+     */
+    buttonlabel?: Required<string>;
+    /**
+     * Specify the close label for mobile sub Navigation
+     */
+    mobilecloselabel?: Required<string>;
+    /**
+     * Specify the back label for mobile sub Navigation
+     */
+    mobilebacklabel?: Required<string>;
+    /**
+     * Specify the subnav links
+     */
+    items?: Required<Array<LinkProps>>;
+}
+interface TaglineProps {
+    /**
+     * Specify the main tagline text
+     */
+    tag?: Required<string>;
+    /**
+     * Specify the small tagline text
+     */
+    small?: Required<string>;
+}
+export {};

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

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

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

@@ -39,3 +39,5 @@ export { Profile } from "./Profile";
 export { TableOfContents } from "./TableOfContents";
 export { Footer } from "./Footer";
 export { LocalNav } from "./LocalNav";
+export { Navigation } from "./Navigation";
+export { Card, CardGroup } from "./Card";