@ilo-org/react 0.1.1 → 0.2.0

package/lib/esm/components/Footer/Footer.js

@@ -0,0 +1,21 @@
+import { jsxs, jsx, Fragment } from 'react/jsx-runtime';
+import useGlobalSettings from '../../hooks/useGlobalSettings.js';
+import classNames from 'classnames';
+import LinkList from '../LinkList/LinkList.js';
+import Button from '../Button/Button.js';
+import 'tslib';
+import 'react';
+import '../../GlobalCtx-7fb23cfa.js';
+import '../Link/Link.js';
+import '../Icon/Icon.js';
+import '@ilo-org/icons-react';
+
+const Footer = ({ className, logo, tagline, subtagline, address, linkgroup, socials, subscribe, legal, secondarylinks, anchorlink, }) => {
+    const { prefix } = useGlobalSettings();
+    const baseClass = `${prefix}--footer`;
+    const footerClasses = classNames(className, baseClass);
+    return (jsxs("footer", Object.assign({ className: footerClasses }, { children: [jsxs("div", Object.assign({ className: `${baseClass}--main` }, { children: [jsxs("div", Object.assign({ className: "site--info" }, { children: [jsx("img", { className: `${baseClass}--logo`, src: logo, alt: "ILO Logo" }), jsx("h3", Object.assign({ className: `${baseClass}--headline` }, { children: tagline })), jsx("h4", Object.assign({ className: `${baseClass}--subhead` }, { children: subtagline }))] })), address && (jsx("div", Object.assign({ className: "address" }, { children: address.map((line, i) => (jsx("p", Object.assign({ className: "address--line" }, { children: line }), i))) }))), linkgroup && (jsx("nav", Object.assign({ className: "links" }, { children: jsx(LinkList, { linkgroup: linkgroup, theme: "dark" }) }))), (socials || subscribe) && (jsxs("div", Object.assign({ className: "connect" }, { children: [socials && (jsxs(Fragment, { children: [jsx("h5", Object.assign({ className: "social--headline" }, { children: socials === null || socials === void 0 ? void 0 : socials.headline })), jsx("ul", Object.assign({ className: "social--links" }, { children: socials.links &&
+                                            socials.links.map((link, index) => (jsx("li", Object.assign({ className: "social--links--item" }, { children: jsx("a", Object.assign({ className: `social--links--link ${link.type}`, href: link.url }, { children: link.type })) }), index))) }))] })), subscribe && (jsx(Button, { label: subscribe === null || subscribe === void 0 ? void 0 : subscribe.label, url: subscribe === null || subscribe === void 0 ? void 0 : subscribe.url, type: "primary", size: "large", target: "_blank" }))] })))] })), jsxs("div", Object.assign({ className: `${baseClass}--secondary` }, { children: [jsx("div", Object.assign({ className: "legal" }, { children: legal })), secondarylinks && (jsx("nav", Object.assign({ className: "secondarylinks" }, { children: jsx("ul", Object.assign({ className: "secondarylinks--list" }, { children: secondarylinks.map((link, i) => (jsx("li", Object.assign({ className: "secondarylinks--list--item" }, { children: jsx("a", Object.assign({ href: link.url, className: "secondarylinks--list--link" }, { children: link === null || link === void 0 ? void 0 : link.label }), i) })))) })) }))), jsx("a", Object.assign({ href: anchorlink === null || anchorlink === void 0 ? void 0 : anchorlink.url, className: "anchorlink" }, { children: anchorlink === null || anchorlink === void 0 ? void 0 : anchorlink.label }))] }))] })));
+};
+
+export { Footer as default };

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

@@ -0,0 +1,12 @@
+export { default as Footer } from './Footer.js';
+import 'react/jsx-runtime';
+import '../../hooks/useGlobalSettings.js';
+import 'tslib';
+import 'react';
+import '../../GlobalCtx-7fb23cfa.js';
+import 'classnames';
+import '../LinkList/LinkList.js';
+import '../Button/Button.js';
+import '../Link/Link.js';
+import '../Icon/Icon.js';
+import '@ilo-org/icons-react';

package/lib/esm/components/LocalNav/LocalNav.js

@@ -0,0 +1,100 @@
+import { jsx, jsxs } from 'react/jsx-runtime';
+import { useState } from 'react';
+import useGlobalSettings from '../../hooks/useGlobalSettings.js';
+import ContextMenu from '../ContextMenu/ContextMenu.js';
+import classNames from 'classnames';
+import 'tslib';
+import '../../GlobalCtx-7fb23cfa.js';
+
+var brand = {
+	"ilo-blue": {
+		value: "rgba(30, 45, 190, 1)"
+	},
+	"ilo-red": {
+		value: "rgba(250, 60, 75, 1)"
+	},
+	"ilo-dark-blue": {
+		value: "rgba(35, 0, 80, 1)"
+	},
+	"ilo-yellow": {
+		value: "rgba(255, 205, 45, 1)"
+	},
+	"ilo-green": {
+		value: "rgba(140, 225, 100, 1)"
+	},
+	"ilo-purple": {
+		value: "rgba(150, 10, 85, 1)"
+	},
+	"ilo-purple-light": {
+		value: "rgba(116, 96, 145, 1)"
+	},
+	"ilo-turquoise": {
+		value: "rgba(5, 210, 210, 1)"
+	},
+	"ilo-dark-red": {
+		value: "rgba(200, 48, 60, 1)"
+	},
+	"ilo-lighter-blue": {
+		value: "rgba(235, 245, 253, 1)"
+	},
+	"ilo-light-blue": {
+		value: "rgba(235, 245, 253, 1)"
+	},
+	"ilo-grey-light-alternate": {
+		value: "rgba(246, 247, 248, 1)"
+	},
+	"ilo-grey-light": {
+		value: "rgba(237, 240, 242, 1)"
+	},
+	"ilo-grey-ui": {
+		value: "rgba(184, 196, 204, 1)"
+	},
+	"ilo-grey-accessible": {
+		value: "rgba(109, 109, 109, 1)"
+	},
+	"ilo-grey-charcoal": {
+		value: "rgba(45, 45, 45, 1)"
+	},
+	"ilo-black": {
+		value: "rgba(45, 45, 45, 1)"
+	},
+	"ilo-white": {
+		value: "rgba(255, 255, 255, 1)"
+	},
+	"ilo-ramp-blue": {
+		value: "rgba(190, 220, 250, 1)"
+	},
+	"ilo-ramp-red": {
+		value: "rgba(254, 216, 219, 1)"
+	},
+	"ilo-ramp-green": {
+		value: "rgba(232, 249, 224, 1)"
+	},
+	"ilo-ramp-yellow": {
+		value: "rgba(255, 245, 200, 1)"
+	}
+};
+
+const LocalNav = ({ background, logo, siteurl, primarynav, mainlink, menucloselabel, languagelabel, languagecontextmenu, }) => {
+    const { prefix } = useGlobalSettings();
+    const [toggleMenuOpen, setMenuToggleOpen] = useState(false);
+    const [toggleLanguageOpen, setLanguageToggleOpen] = useState(false);
+    const baseClass = `${prefix}--header`;
+    const localNavClasses = classNames(baseClass, `${baseClass}--local`, {
+        [`${prefix}--mobile--open`]: toggleMenuOpen,
+        [`${prefix}--select--open`]: toggleLanguageOpen,
+    });
+    const bg = background ? background : brand["ilo-dark-blue"].value;
+    const handleMenuToggle = () => {
+        setMenuToggleOpen(!toggleMenuOpen);
+    };
+    const handleLanguageToggle = () => {
+        setLanguageToggleOpen(!toggleLanguageOpen);
+    };
+    return (jsx("header", Object.assign({ className: localNavClasses }, { children: jsxs("div", Object.assign({ className: `${baseClass}--utility-bar ${baseClass}--utility-bar--local`, style: { background: bg } }, { children: [jsxs("nav", Object.assign({ className: `${prefix}--nav--local` }, { children: [jsx("div", Object.assign({ className: `${prefix}--nav--local--logo-wrapper` }, { children: jsx("a", Object.assign({ href: siteurl, className: `${prefix}--nav--local--logo-link` }, { children: jsx("img", { src: logo, alt: "ILO Logo", className: `${prefix}--nav--local--logo` }) })) })), jsx("ul", Object.assign({ className: `${prefix}--nav--local--set` }, { children: (primarynav === null || primarynav === void 0 ? void 0 : primarynav.items) &&
+                                primarynav.items.map((item, index) => (jsx("li", Object.assign({ className: `${prefix}--nav--local--item` }, { children: jsx("a", Object.assign({ href: item.url, className: `${prefix}--nav--local--link` }, { children: jsx("span", { children: item.label }) })) }), index))) }))] })), jsx("div", Object.assign({ className: `${prefix}--language-switcher` }, { children: jsxs("div", Object.assign({ className: `${prefix}--language-switcher--wrap` }, { children: [mainlink && (jsx("span", Object.assign({ className: `${prefix}--language-switcher--link--wrap` }, { children: jsx("a", Object.assign({ href: mainlink.url, className: `${prefix}--language-switcher--link` }, { children: mainlink.label })) }))), 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("button", Object.assign({ className: `${baseClass}--menu`, onClick: handleMenuToggle }, { children: "Menu" })), jsx("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: logo, alt: "ILO Logo" }) })), jsx("button", Object.assign({ className: `${baseClass}--menu--close`, onClick: handleMenuToggle }, { children: menucloselabel }))] })), 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", { className: `${prefix}--mobile--subnav--back`, onClick: handleLanguageToggle, type: "button" }), jsx("button", Object.assign({ className: `${baseClass}--menu--close`, onClick: handleMenuToggle }, { children: "Close" })), 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 })), jsx("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))) }))] }))] })) }))] })) })));
+};
+
+export { LocalNav as default };

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

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

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

@@ -6,7 +6,7 @@ import 'tslib';
 import 'react';
 import '../../GlobalCtx-7fb23cfa.js';
 import '../../_commonjsHelpers-849bcf65.js';
-import '../../patterns-3a3fa9d6.js';
+import '../../patterns-53247c1d.js';
 import '../../index-8ebb2cc1.js';
 import 'react-dom';
 import '../../utils/hoursMinutesSeconds.js';

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

@@ -1,7 +1,7 @@
 import { jsxs, jsx } from 'react/jsx-runtime';
 import require$$0, { useState, createRef } from 'react';
 import { g as getAugmentedNamespace, c as commonjsGlobal, a as getDefaultExportFromCjs } from '../../_commonjsHelpers-849bcf65.js';
-import { u as utils, p as patterns, c as cjs } from '../../patterns-3a3fa9d6.js';
+import { u as utils, p as patterns, c as cjs } from '../../patterns-53247c1d.js';
 import { p as propTypesExports } from '../../index-8ebb2cc1.js';
 import { findDOMNode } from 'react-dom';
 import classNames from 'classnames';
@@ -35,7 +35,7 @@ var players = {};
 	  lazyPlayer: /*#__PURE__*/(0, _react.lazy)(function () {
 	    return import(
 	    /* webpackChunkName: 'reactPlayerYouTube' */
-	    '../../YouTube-d58f130b.js').then(function (n) { return n.Y; });
+	    '../../YouTube-e030042e.js').then(function (n) { return n.Y; });
 	  })
 	}, {
 	  key: 'soundcloud',
@@ -44,7 +44,7 @@ var players = {};
 	  lazyPlayer: /*#__PURE__*/(0, _react.lazy)(function () {
 	    return import(
 	    /* webpackChunkName: 'reactPlayerSoundCloud' */
-	    '../../SoundCloud-306d6c78.js').then(function (n) { return n.S; });
+	    '../../SoundCloud-0fac2e7a.js').then(function (n) { return n.S; });
 	  })
 	}, {
 	  key: 'vimeo',
@@ -53,7 +53,7 @@ var players = {};
 	  lazyPlayer: /*#__PURE__*/(0, _react.lazy)(function () {
 	    return import(
 	    /* webpackChunkName: 'reactPlayerVimeo' */
-	    '../../Vimeo-074f2c39.js').then(function (n) { return n.V; });
+	    '../../Vimeo-a807e7e1.js').then(function (n) { return n.V; });
 	  })
 	}, {
 	  key: 'facebook',
@@ -62,7 +62,7 @@ var players = {};
 	  lazyPlayer: /*#__PURE__*/(0, _react.lazy)(function () {
 	    return import(
 	    /* webpackChunkName: 'reactPlayerFacebook' */
-	    '../../Facebook-c3c77787.js').then(function (n) { return n.F; });
+	    '../../Facebook-eb35da52.js').then(function (n) { return n.F; });
 	  })
 	}, {
 	  key: 'streamable',
@@ -71,7 +71,7 @@ var players = {};
 	  lazyPlayer: /*#__PURE__*/(0, _react.lazy)(function () {
 	    return import(
 	    /* webpackChunkName: 'reactPlayerStreamable' */
-	    '../../Streamable-aa3d544e.js').then(function (n) { return n.S; });
+	    '../../Streamable-46f19a16.js').then(function (n) { return n.S; });
 	  })
 	}, {
 	  key: 'wistia',
@@ -80,7 +80,7 @@ var players = {};
 	  lazyPlayer: /*#__PURE__*/(0, _react.lazy)(function () {
 	    return import(
 	    /* webpackChunkName: 'reactPlayerWistia' */
-	    '../../Wistia-0a2b73b0.js').then(function (n) { return n.W; });
+	    '../../Wistia-eef03ce2.js').then(function (n) { return n.W; });
 	  })
 	}, {
 	  key: 'twitch',
@@ -89,7 +89,7 @@ var players = {};
 	  lazyPlayer: /*#__PURE__*/(0, _react.lazy)(function () {
 	    return import(
 	    /* webpackChunkName: 'reactPlayerTwitch' */
-	    '../../Twitch-4a1a1565.js').then(function (n) { return n.T; });
+	    '../../Twitch-1be39438.js').then(function (n) { return n.T; });
 	  })
 	}, {
 	  key: 'dailymotion',
@@ -98,7 +98,7 @@ var players = {};
 	  lazyPlayer: /*#__PURE__*/(0, _react.lazy)(function () {
 	    return import(
 	    /* webpackChunkName: 'reactPlayerDailyMotion' */
-	    '../../DailyMotion-b35dc8bb.js').then(function (n) { return n.D; });
+	    '../../DailyMotion-9a7aeab5.js').then(function (n) { return n.D; });
 	  })
 	}, {
 	  key: 'mixcloud',
@@ -107,7 +107,7 @@ var players = {};
 	  lazyPlayer: /*#__PURE__*/(0, _react.lazy)(function () {
 	    return import(
 	    /* webpackChunkName: 'reactPlayerMixcloud' */
-	    '../../Mixcloud-3d4e0760.js').then(function (n) { return n.M; });
+	    '../../Mixcloud-41d6dc0b.js').then(function (n) { return n.M; });
 	  })
 	}, {
 	  key: 'vidyard',
@@ -116,7 +116,7 @@ var players = {};
 	  lazyPlayer: /*#__PURE__*/(0, _react.lazy)(function () {
 	    return import(
 	    /* webpackChunkName: 'reactPlayerVidyard' */
-	    '../../Vidyard-fe74c274.js').then(function (n) { return n.V; });
+	    '../../Vidyard-6185c490.js').then(function (n) { return n.V; });
 	  })
 	}, {
 	  key: 'kaltura',
@@ -125,7 +125,7 @@ var players = {};
 	  lazyPlayer: /*#__PURE__*/(0, _react.lazy)(function () {
 	    return import(
 	    /* webpackChunkName: 'reactPlayerKaltura' */
-	    '../../Kaltura-4ac3cda3.js').then(function (n) { return n.K; });
+	    '../../Kaltura-b97bb455.js').then(function (n) { return n.K; });
 	  })
 	}, {
 	  key: 'file',
@@ -137,7 +137,7 @@ var players = {};
 	  lazyPlayer: /*#__PURE__*/(0, _react.lazy)(function () {
 	    return import(
 	    /* webpackChunkName: 'reactPlayerFilePlayer' */
-	    '../../FilePlayer-540e4c5a.js').then(function (n) { return n.F; });
+	    '../../FilePlayer-22314795.js').then(function (n) { return n.F; });
 	  })
 	}];
 	exports["default"] = _default;

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

@@ -7,7 +7,7 @@ import 'react';
 import '../../GlobalCtx-7fb23cfa.js';
 import './VideoPlayer.js';
 import '../../_commonjsHelpers-849bcf65.js';
-import '../../patterns-3a3fa9d6.js';
+import '../../patterns-53247c1d.js';
 import '../../index-8ebb2cc1.js';
 import 'react-dom';
 import '../../utils/hoursMinutesSeconds.js';

package/lib/esm/components/index.js

@@ -48,6 +48,8 @@ export { default as List } from './List/List.js';
 import '../ListCtx-da435fdf.js';
 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';
 import '../hooks/useGlobalSettings.js';
 import '../AccordionCtx-8c051900.js';
 import '@ilo-org/utils';
@@ -63,6 +65,6 @@ import '@ilo-org/icons-react';
 import './Hero/HeroCard.js';
 import './Video/VideoPlayer.js';
 import '../_commonjsHelpers-849bcf65.js';
-import '../patterns-3a3fa9d6.js';
+import '../patterns-53247c1d.js';
 import '../utils/hoursMinutesSeconds.js';
 import 'screenfull';

package/lib/esm/index.js

@@ -48,6 +48,8 @@ export { default as List } from './components/List/List.js';
 import './ListCtx-da435fdf.js';
 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';
 import './hooks/useGlobalSettings.js';
 import './AccordionCtx-8c051900.js';
 import '@ilo-org/utils';
@@ -62,7 +64,7 @@ import './utils/triggerBrowserReflow.js';
 import './components/Hero/HeroCard.js';
 import './components/Video/VideoPlayer.js';
 import './_commonjsHelpers-849bcf65.js';
-import './patterns-3a3fa9d6.js';
+import './patterns-53247c1d.js';
 import './utils/hoursMinutesSeconds.js';
 import 'screenfull';
 import '@ilo-org/icons-react';

package/lib/esm/{patterns-3a3fa9d6.js → patterns-53247c1d.js}

@@ -117,7 +117,7 @@ function getMergeFunction(key, options) {
 function getEnumerableOwnPropertySymbols(target) {
 	return Object.getOwnPropertySymbols
 		? Object.getOwnPropertySymbols(target).filter(function(symbol) {
-			return target.propertyIsEnumerable(symbol)
+			return Object.propertyIsEnumerable.call(target, symbol)
 		})
 		: []
 }

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

@@ -1,4 +1,4 @@
-interface LinkProps {
+export interface LinkProps {
     /**
      * Specify whether this link marks the end of a section
      */
@@ -22,4 +22,3 @@ export interface ContextMenuProps {
      */
     links?: Required<Array<LinkProps>>;
 }
-export {};

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

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

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

@@ -0,0 +1,70 @@
+import { LinkGroupProps } from "../LinkList/LinkList.props";
+import { LinkProps } from "../LinkList/LinkList.props";
+import { SocialTypes } from "../../types";
+export interface FooterProps {
+    /**
+     * Specify an optional className to be added to your Footer.
+     */
+    className?: string;
+    /**
+     * Props for the logo of the Footer
+     */
+    logo?: string;
+    /**
+     * Specify the tagline for the Footer
+     */
+    tagline?: string;
+    /**
+     * Specify the subtagline for the Footer
+     */
+    subtagline?: string;
+    /**
+     * Specify the address for the Footer, in multiple lines
+     */
+    address?: string[];
+    /**
+     * Specify the linkgroup for the Footer's links
+     */
+    linkgroup?: Required<Array<LinkGroupProps>>;
+    /**
+     * Specify the links to be displayed in this link group
+     */
+    socials?: FooterSocialProps;
+    /**
+     * Specify the legal statement for the Footer
+     */
+    subscribe?: LinkProps;
+    /**
+     * Specify the legal statement for the Footer
+     */
+    legal?: string;
+    /**
+     * Specify the secondary links for the Footer
+     */
+    secondarylinks?: LinkProps[];
+    /**
+     * Specify the anchor link for the Footer
+     */
+    anchorlink?: LinkProps;
+}
+interface FooterSocialProps {
+    /**
+     * Specify the headline for social links
+     */
+    headline?: Required<string>;
+    /**
+     * Specify the social links
+     */
+    links?: Required<SocialLinkProps>[];
+}
+interface SocialLinkProps {
+    /**
+     * Specify the type for social link
+     */
+    type?: Required<SocialTypes>;
+    /**
+     * Specify the url for social link
+     */
+    url?: Required<string>;
+}
+export {};

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

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

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

@@ -1,5 +1,5 @@
 import { LinkListThemes } from "../../types";
-interface LinkProps {
+export interface LinkProps {
     /**
      * Specify if this link should indent and have a triangle icon
      */
@@ -13,7 +13,7 @@ interface LinkProps {
      */
     url?: Required<string>;
 }
-interface LinkGroupProps {
+export interface LinkGroupProps {
     /**
      * Specify an optional headline for this link group
      */
@@ -41,4 +41,3 @@ export interface LinkListProps {
      */
     theme?: Required<LinkListThemes>;
 }
-export {};

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

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

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

@@ -0,0 +1,50 @@
+import { LinkProps, ContextMenuProps } from "../ContextMenu/ContextMenu.props";
+export interface LocalNavProps {
+    /**
+     * Props for the background colour of the LocalNav
+     */
+    background?: string;
+    /**
+     * Props for the logo of the LocalNav
+     */
+    logo?: Required<string>;
+    /**
+     * Props for the home url of the LocalNav
+     */
+    siteurl?: Required<string>;
+    /**
+     * Specify the primary items for the LocalNav
+     */
+    primarynav?: Required<PrimaryNavProps>;
+    /**
+     * Specify the main link for the LocalNav
+     */
+    mainlink?: LinkProps;
+    /**
+     * Specify the menu close label for the LocalNav
+     */
+    menucloselabel?: string;
+    /**
+     * Specify the language label for the LocalNav
+     */
+    languagelabel?: string;
+    /**
+     * Specify the language context menu for the LocalNav
+     */
+    languagecontextmenu?: ContextMenuProps;
+}
+interface PrimaryNavProps {
+    /**
+     * Specify the label for local nav
+     */
+    navlabel?: Required<string>;
+    /**
+     * Specify the close label for mobile local nav
+     */
+    mobilecloselabel?: Required<string>;
+    /**
+     * Specify the social links
+     */
+    items?: Required<Array<LinkProps>>;
+}
+export {};

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

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

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

@@ -37,3 +37,5 @@ export { Icon } from "./Icon";
 export { List } from "./List";
 export { Profile } from "./Profile";
 export { TableOfContents } from "./TableOfContents";
+export { Footer } from "./Footer";
+export { LocalNav } from "./LocalNav";

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

@@ -24,3 +24,4 @@ export type NotificationTypes = "error" | "info" | "success" | "warning";
 export type PositionTypes = "top" | "bottom" | "left" | "right";
 export type SizeTypes = "small" | "medium" | "large";
 export type TagTypes = "anchor" | "display" | "button";
+export type SocialTypes = "instagram" | "facebook" | "twitter" | "youtube";

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ilo-org/react",
-  "version": "0.1.1",
+  "version": "0.2.0",
   "description": "React components for the ILO's Design System",
   "keywords": [
     "ui_patterns",
@@ -49,6 +49,11 @@
   "module": "lib/esm/index.js",
   "type": "module",
   "types": "lib/types/react/src/index.d.ts",
+  "jest": {
+    "moduleNameMapper": {
+      ".+\\.(css|styl|less|sass|scss|png|jpg|svg|ttf|woff|woff2)$": "identity-obj-proxy"
+    }
+  },
   "browserslist": {
     "production": [
       ">0.2%",
@@ -66,10 +71,10 @@
     "dom-helpers": "^5.2.1",
     "react-player": "2.10.1",
     "react-transition-group": "^4.4.1",
-    "@ilo-org/brand-assets": "0.0.2",
-    "@ilo-org/fonts": "0.0.7",
+    "@ilo-org/brand-assets": "0.1.0",
+    "@ilo-org/fonts": "0.1.0",
     "@ilo-org/icons-react": "0.0.18",
-    "@ilo-org/styles": "0.1.16",
+    "@ilo-org/styles": "0.1.18",
     "@ilo-org/themes": "0.1.15",
     "@ilo-org/utils": "0.0.11"
   },
@@ -86,6 +91,7 @@
     "@storybook/blocks": "next",
     "@storybook/builder-webpack5": "next",
     "@storybook/client-api": "next",
+    "@storybook/manager-api": "next",
     "@storybook/manager-webpack5": "6.5.15",
     "@storybook/node-logger": "next",
     "@storybook/preset-create-react-app": "4.1.2",
@@ -103,10 +109,12 @@
     "@types/react": "17.0.11",
     "@types/react-dom": "^17.0.13",
     "http-server": "^14.1.0",
+    "identity-obj-proxy": "^3.0.0",
     "jest-environment-jsdom": "^27.5.1",
     "nodemon": "^2.0.20",
     "react": "17.0.2",
     "react-dom": "17.0.2",
+    "react-element-to-jsx-string": "^15.0.0",
     "react-scripts": "5.0.1",
     "remark-gfm": "^3.0.1",
     "rollup": "^3.9.0",
@@ -121,12 +129,13 @@
     "screenfull": "^5.2.0",
     "storybook": "next",
     "storybook-addon-performance": "^0.16.1",
+    "ts-dedent": "^2.2.0",
     "ts-jest": "^27.1.3",
     "tslib": "^2.3.1",
     "typescript": "4.9.3",
     "webpack": "^5.68.0",
-    "@ilo-org/eslint-config": "0.0.2",
-    "@ilo-org/prettier-config": "0.0.1",
+    "@ilo-org/eslint-config": "0.0.3",
+    "@ilo-org/prettier-config": "0.0.2",
     "@ilo-org/typescript-config": "0.0.1"
   },
   "peerDependencies": {

package/src/components/ContextMenu/ContextMenu.props.ts

@@ -1,4 +1,4 @@
-interface LinkProps {
+export interface LinkProps {
   /**
    * Specify whether this link marks the end of a section
    */