@ilo-org/react 0.4.6 → 0.5.0

package/CHANGELOG.md

@@ -1,5 +1,17 @@
 # @ilo-org/react
 
+## 0.5.0
+
+### Minor Changes
+
+- 25c3bca99: feat(react): add breadcrumb as a new component
+
+### Patch Changes
+
+- Updated dependencies [11801070b]
+- Updated dependencies [1b942833b]
+  - @ilo-org/styles@0.3.5
+
 ## 0.4.6
 
 ### Patch Changes

package/lib/cjs/components/Breadcrumb/Breadcrumb.js

@@ -0,0 +1,37 @@
+'use strict';
+
+var jsxRuntime = require('react/jsx-runtime');
+var require$$0 = require('react');
+var hooks_useGlobalSettings = require('../../hooks/useGlobalSettings.js');
+var classNames = require('classnames');
+var components_ContextMenu_ContextMenu = require('../ContextMenu/ContextMenu.js');
+require('tslib');
+require('../../GlobalCtx-97e4b433.js');
+
+const Breadcrumb = ({ home, links }) => {
+    const { prefix } = hooks_useGlobalSettings();
+    const [showContextMenu, enableContextMenu] = require$$0.useState(false);
+    const [toggleMenuOpen, setContextMenuToggleOpen] = require$$0.useState(false);
+    const handleScreenResize = () => {
+        enableContextMenu(window.innerWidth <= 1024); // turn on context menu when screen is resized to a smaller size
+    };
+    require$$0.useEffect(() => {
+        window.addEventListener("resize", handleScreenResize);
+        handleScreenResize();
+        return () => {
+            window.removeEventListener("resize", handleScreenResize);
+        };
+    }, []);
+    const handleContextMenuToggle = () => {
+        setContextMenuToggleOpen(!toggleMenuOpen);
+    };
+    const showContext = links.length > 4 || showContextMenu ? true : false;
+    const baseClass = `${prefix}--breadcrumb`;
+    const BreadcrumbClasses = classNames(baseClass);
+    const lastLink = links[links.length - 1];
+    const menuLinks = links.slice(0, -1);
+    return (jsxRuntime.jsx("nav", Object.assign({ className: `${BreadcrumbClasses} ${showContext ? " contextmenu" : ""}` }, { children: jsxRuntime.jsxs("ol", Object.assign({ className: `${baseClass}--items` }, { children: [jsxRuntime.jsx("li", Object.assign({ className: `${baseClass}--item home` }, { children: jsxRuntime.jsx("a", Object.assign({ className: `${baseClass}--link`, href: home.url }, { children: jsxRuntime.jsx("span", Object.assign({ className: `${baseClass}--link--label` }, { children: home.label })) })) })), jsxRuntime.jsx("li", Object.assign({ className: `${baseClass}--item--context`, onClick: handleContextMenuToggle }, { children: jsxRuntime.jsxs("ul", Object.assign({ className: `${baseClass}--items context--menu ${toggleMenuOpen ? " open" : ""}` }, { children: [showContext && jsxRuntime.jsx(components_ContextMenu_ContextMenu, { links: menuLinks }), !showContext &&
+                                menuLinks.map((link, index) => (jsxRuntime.jsx("li", Object.assign({ className: `${baseClass}--item` }, { children: jsxRuntime.jsx("a", Object.assign({ href: link.url, className: `${baseClass}--link` }, { children: jsxRuntime.jsx("span", Object.assign({ className: `${baseClass}--link--label` }, { children: link.label })) })) }), index)))] })) })), jsxRuntime.jsx("li", Object.assign({ className: `${baseClass}--item final` }, { children: jsxRuntime.jsx("a", Object.assign({ className: `${baseClass}--link`, href: lastLink.url }, { children: jsxRuntime.jsx("span", Object.assign({ className: `${baseClass}--link--label` }, { children: lastLink.label })) })) }))] })) })));
+};
+
+module.exports = Breadcrumb;

package/lib/cjs/components/Breadcrumb/index.js

@@ -0,0 +1,14 @@
+'use strict';
+
+var components_Breadcrumb_Breadcrumb = require('./Breadcrumb.js');
+require('react/jsx-runtime');
+require('react');
+require('../../hooks/useGlobalSettings.js');
+require('tslib');
+require('../../GlobalCtx-97e4b433.js');
+require('classnames');
+require('../ContextMenu/ContextMenu.js');
+
+
+
+exports.Breadcrumb = components_Breadcrumb_Breadcrumb;

package/lib/cjs/components/index.js

@@ -55,6 +55,7 @@ var components_LocalNav_LocalNav = require('./LocalNav/LocalNav.js');
 var components_Navigation_Navigation = require('./Navigation/Navigation.js');
 var components_Card_Card = require('./Card/Card.js');
 var components_Card_CardGroup = require('./Card/CardGroup.js');
+var components_Breadcrumb_Breadcrumb = require('./Breadcrumb/Breadcrumb.js');
 require('../hooks/useGlobalSettings.js');
 require('../AccordionCtx-fe08ff45.js');
 require('@ilo-org/utils');
@@ -123,3 +124,4 @@ exports.LocalNav = components_LocalNav_LocalNav;
 exports.Navigation = components_Navigation_Navigation;
 exports.Card = components_Card_Card;
 exports.CardGroup = components_Card_CardGroup;
+exports.Breadcrumb = components_Breadcrumb_Breadcrumb;

package/lib/cjs/index.js

@@ -55,6 +55,7 @@ var components_LocalNav_LocalNav = require('./components/LocalNav/LocalNav.js');
 var components_Navigation_Navigation = require('./components/Navigation/Navigation.js');
 var components_Card_Card = require('./components/Card/Card.js');
 var components_Card_CardGroup = require('./components/Card/CardGroup.js');
+var components_Breadcrumb_Breadcrumb = require('./components/Breadcrumb/Breadcrumb.js');
 require('./hooks/useGlobalSettings.js');
 require('./AccordionCtx-fe08ff45.js');
 require('@ilo-org/utils');
@@ -123,3 +124,4 @@ exports.LocalNav = components_LocalNav_LocalNav;
 exports.Navigation = components_Navigation_Navigation;
 exports.Card = components_Card_Card;
 exports.CardGroup = components_Card_CardGroup;
+exports.Breadcrumb = components_Breadcrumb_Breadcrumb;

package/lib/esm/components/Breadcrumb/Breadcrumb.js

@@ -0,0 +1,35 @@
+import { jsx, jsxs } from 'react/jsx-runtime';
+import { useState, useEffect } from 'react';
+import useGlobalSettings from '../../hooks/useGlobalSettings.js';
+import classNames from 'classnames';
+import ContextMenu from '../ContextMenu/ContextMenu.js';
+import 'tslib';
+import '../../GlobalCtx-7fb23cfa.js';
+
+const Breadcrumb = ({ home, links }) => {
+    const { prefix } = useGlobalSettings();
+    const [showContextMenu, enableContextMenu] = useState(false);
+    const [toggleMenuOpen, setContextMenuToggleOpen] = useState(false);
+    const handleScreenResize = () => {
+        enableContextMenu(window.innerWidth <= 1024); // turn on context menu when screen is resized to a smaller size
+    };
+    useEffect(() => {
+        window.addEventListener("resize", handleScreenResize);
+        handleScreenResize();
+        return () => {
+            window.removeEventListener("resize", handleScreenResize);
+        };
+    }, []);
+    const handleContextMenuToggle = () => {
+        setContextMenuToggleOpen(!toggleMenuOpen);
+    };
+    const showContext = links.length > 4 || showContextMenu ? true : false;
+    const baseClass = `${prefix}--breadcrumb`;
+    const BreadcrumbClasses = classNames(baseClass);
+    const lastLink = links[links.length - 1];
+    const menuLinks = links.slice(0, -1);
+    return (jsx("nav", Object.assign({ className: `${BreadcrumbClasses} ${showContext ? " contextmenu" : ""}` }, { children: jsxs("ol", Object.assign({ className: `${baseClass}--items` }, { children: [jsx("li", Object.assign({ className: `${baseClass}--item home` }, { children: jsx("a", Object.assign({ className: `${baseClass}--link`, href: home.url }, { children: jsx("span", Object.assign({ className: `${baseClass}--link--label` }, { children: home.label })) })) })), jsx("li", Object.assign({ className: `${baseClass}--item--context`, onClick: handleContextMenuToggle }, { children: jsxs("ul", Object.assign({ className: `${baseClass}--items context--menu ${toggleMenuOpen ? " open" : ""}` }, { children: [showContext && jsx(ContextMenu, { links: menuLinks }), !showContext &&
+                                menuLinks.map((link, index) => (jsx("li", Object.assign({ className: `${baseClass}--item` }, { children: jsx("a", Object.assign({ href: link.url, className: `${baseClass}--link` }, { children: jsx("span", Object.assign({ className: `${baseClass}--link--label` }, { children: link.label })) })) }), index)))] })) })), jsx("li", Object.assign({ className: `${baseClass}--item final` }, { children: jsx("a", Object.assign({ className: `${baseClass}--link`, href: lastLink.url }, { children: jsx("span", Object.assign({ className: `${baseClass}--link--label` }, { children: lastLink.label })) })) }))] })) })));
+};
+
+export { Breadcrumb as default };

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

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

package/lib/esm/components/index.js

@@ -53,6 +53,7 @@ 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';
+export { default as Breadcrumb } from './Breadcrumb/Breadcrumb.js';
 import '../hooks/useGlobalSettings.js';
 import '../AccordionCtx-8c051900.js';
 import '@ilo-org/utils';

package/lib/esm/index.js

@@ -53,6 +53,7 @@ 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';
+export { default as Breadcrumb } from './components/Breadcrumb/Breadcrumb.js';
 import './hooks/useGlobalSettings.js';
 import './AccordionCtx-8c051900.js';
 import '@ilo-org/utils';

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

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

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

@@ -0,0 +1,11 @@
+import { LinkProps } from "../LinkList/LinkList.props";
+export interface BreadcrumbProps {
+    /**
+     * Specify the HOME link in the Breadcrumb
+     */
+    home: Required<LinkProps>;
+    /**
+     * Specify the links to be displayed in the Breadcrumb
+     */
+    links: Required<Array<LinkProps>>;
+}

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

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

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

@@ -41,3 +41,4 @@ export { Footer } from "./Footer";
 export { LocalNav } from "./LocalNav";
 export { Navigation } from "./Navigation";
 export { Card, CardGroup } from "./Card";
+export { Breadcrumb } from "./Breadcrumb";

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ilo-org/react",
-  "version": "0.4.6",
+  "version": "0.5.0",
   "description": "React components for the ILO's Design System",
   "keywords": [
     "ui_patterns",
@@ -75,7 +75,7 @@
     "@ilo-org/brand-assets": "0.1.0",
     "@ilo-org/fonts": "0.1.0",
     "@ilo-org/icons-react": "0.0.19",
-    "@ilo-org/styles": "0.3.4",
+    "@ilo-org/styles": "0.3.5",
     "@ilo-org/themes": "0.1.15",
     "@ilo-org/utils": "0.0.11"
   },

package/src/components/Breadcrumb/Breadcrumb.args.ts

@@ -0,0 +1,61 @@
+import { BreadcrumbProps } from "./Breadcrumb.props";
+
+const basic: BreadcrumbProps = {
+  home: {
+    indented: false,
+    label: "Home",
+    url: "/",
+  },
+  links: [
+    {
+      label: "Link One",
+      url: "https://www.ilo.org/",
+    },
+    {
+      label: "Link Two",
+      url: "https://www.ilo.org/",
+    },
+    {
+      label: "Link Three",
+      url: "https://www.ilo.org/",
+    },
+    {
+      label: "Link Four",
+      url: "https://www.ilo.org/",
+    },
+  ],
+};
+
+const fiveLinks: BreadcrumbProps = {
+  home: {
+    indented: false,
+    label: "Home",
+    url: "/",
+  },
+  links: [
+    {
+      label: "Link One",
+      url: "https://www.ilo.org/",
+    },
+    {
+      label: "Link Two",
+      url: "https://www.ilo.org/",
+    },
+    {
+      label: "Link Three",
+      url: "https://www.ilo.org/",
+    },
+    {
+      label: "Link Four",
+      url: "https://www.ilo.org/",
+    },
+    {
+      label: "Link Five",
+      url: "https://www.ilo.org/",
+    },
+  ],
+};
+
+const BreadcrumbArgs = { basic, fiveLinks };
+
+export default BreadcrumbArgs;

package/src/components/Breadcrumb/Breadcrumb.props.ts

@@ -0,0 +1,13 @@
+import { LinkProps } from "../LinkList/LinkList.props";
+
+export interface BreadcrumbProps {
+  /**
+   * Specify the HOME link in the Breadcrumb
+   */
+  home: Required<LinkProps>;
+
+  /**
+   * Specify the links to be displayed in the Breadcrumb
+   */
+  links: Required<Array<LinkProps>>;
+}

package/src/components/Breadcrumb/Breadcrumb.tsx

@@ -0,0 +1,82 @@
+import { FC, useState, useEffect } from "react";
+import useGlobalSettings from "../../hooks/useGlobalSettings";
+import classnames from "classnames";
+import { BreadcrumbProps } from "./Breadcrumb.props";
+import { ContextMenu } from "../ContextMenu";
+
+const Breadcrumb: FC<BreadcrumbProps> = ({ home, links }) => {
+  const { prefix } = useGlobalSettings();
+
+  const [showContextMenu, enableContextMenu] = useState(false);
+  const [toggleMenuOpen, setContextMenuToggleOpen] = useState(false);
+
+  const handleScreenResize = () => {
+    enableContextMenu(window.innerWidth <= 1024); // turn on context menu when screen is resized to a smaller size
+  };
+
+  useEffect(() => {
+    window.addEventListener("resize", handleScreenResize);
+    handleScreenResize();
+
+    return () => {
+      window.removeEventListener("resize", handleScreenResize);
+    };
+  }, []);
+
+  const handleContextMenuToggle = () => {
+    setContextMenuToggleOpen(!toggleMenuOpen);
+  };
+
+  const showContext = links.length > 4 || showContextMenu ? true : false;
+
+  const baseClass = `${prefix}--breadcrumb`;
+  const BreadcrumbClasses = classnames(baseClass);
+
+  const lastLink = links[links.length - 1];
+  const menuLinks = links.slice(0, -1);
+
+  return (
+    <nav
+      className={`${BreadcrumbClasses} ${showContext ? " contextmenu" : ""}`}
+    >
+      <ol className={`${baseClass}--items`}>
+        <li className={`${baseClass}--item home`}>
+          <a className={`${baseClass}--link`} href={home.url}>
+            <span className={`${baseClass}--link--label`}>{home.label}</span>
+          </a>
+        </li>
+        <li
+          className={`${baseClass}--item--context`}
+          onClick={handleContextMenuToggle}
+        >
+          <ul
+            className={`${baseClass}--items context--menu ${
+              toggleMenuOpen ? " open" : ""
+            }`}
+          >
+            {showContext && <ContextMenu links={menuLinks}></ContextMenu>}
+            {!showContext &&
+              menuLinks.map((link, index) => (
+                <li className={`${baseClass}--item`} key={index}>
+                  <a href={link.url} className={`${baseClass}--link`}>
+                    <span className={`${baseClass}--link--label`}>
+                      {link.label}
+                    </span>
+                  </a>
+                </li>
+              ))}
+          </ul>
+        </li>
+        <li className={`${baseClass}--item final`}>
+          <a className={`${baseClass}--link`} href={lastLink.url}>
+            <span className={`${baseClass}--link--label`}>
+              {lastLink.label}
+            </span>
+          </a>
+        </li>
+      </ol>
+    </nav>
+  );
+};
+
+export default Breadcrumb;

package/src/components/Breadcrumb/index.ts

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

package/src/components/index.ts

@@ -46,3 +46,4 @@ export { Footer } from "./Footer";
 export { LocalNav } from "./LocalNav";
 export { Navigation } from "./Navigation";
 export { Card, CardGroup } from "./Card";
+export { Breadcrumb } from "./Breadcrumb";