@ndlib/component-library 1.0.42 → 1.0.44

package/dist/components/composites/NavMenuV2/NavMenuV2.module.css

@@ -0,0 +1,24 @@
+.navWrapper {
+  justify-content: center;
+  padding: 0.75rem;
+  border: 1px solid var(--extraLightGray);
+  background: var(--white);
+  border-radius: 4px;
+  margin: 0px 10px 0px 10px;
+}
+
+.submenuCol {
+  flex-basis: 300px;
+  padding: 0.5rem 1rem;
+  flex-shrink: 0;
+  flex-grow: 0;
+}
+
+.leafMenuLink {
+  font-weight: 700;
+  font-size: 1rem;
+  line-height: 1.4;
+  font-family: 'Libre Franklin', 'Helvetica Neue', Helvetica, Arial, Verdana,
+    sans-serif;
+  text-decoration: none;
+}

package/dist/components/composites/NavMenuV2/NavMenuV2.stories.d.ts

@@ -0,0 +1,6 @@
+import { NavMenuV2 } from '.';
+import type { Meta, StoryObj } from '@storybook/react';
+declare const meta: Meta<typeof NavMenuV2>;
+export default meta;
+type Story = StoryObj<typeof NavMenuV2>;
+export declare const Default: Story;

package/dist/components/composites/NavMenuV2/NavMenuV2.stories.js

@@ -0,0 +1,14 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { UIVersion2 } from '../../../utils/decorators/UIVersion2';
+import { NavMenuV2 } from '.';
+import { DemoMenuImplementationV2 } from './demoV2';
+const meta = {
+    title: 'Composites/NavMenuV2',
+    component: NavMenuV2,
+    decorators: [UIVersion2],
+};
+export default meta;
+export const Default = {
+    render: () => _jsx(DemoMenuImplementationV2, {}),
+    args: {},
+};

package/dist/components/composites/NavMenuV2/demoV2.d.ts

@@ -0,0 +1 @@
+export declare const DemoMenuImplementationV2: () => import("react/jsx-runtime").JSX.Element;

package/dist/components/composites/NavMenuV2/demoV2.js

@@ -0,0 +1,189 @@
+var __rest = (this && this.__rest) || function (s, e) {
+    var t = {};
+    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
+        t[p] = s[p];
+    if (s != null && typeof Object.getOwnPropertySymbols === "function")
+        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
+            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
+                t[p[i]] = s[p[i]];
+        }
+    return t;
+};
+import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
+import { createElement as _createElement } from "react";
+import { NavMenuV2 } from '.';
+import { ButtonV2 } from '../../elements/ButtonV2';
+import { RowV2 } from '../../elements/RowV2';
+import { MENU_ACTION_TYPE, MENU_ORIENTATION, MenuProvider, } from '../../providers/menu';
+const demoMenuV2 = {
+    orientation: MENU_ORIENTATION.HORIZONTAL,
+    items: [
+        {
+            id: 'home',
+            label: 'home',
+            action: {
+                type: MENU_ACTION_TYPE.LINK,
+                to: '/',
+            },
+        },
+        {
+            id: 'research',
+            label: 'research',
+            action: {
+                type: MENU_ACTION_TYPE.SUBMENU,
+                submenu: {
+                    orientation: MENU_ORIENTATION.HORIZONTAL,
+                    items: [
+                        {
+                            label: 'test submenu 1',
+                            id: 'test-submenu-1',
+                            action: {
+                                type: MENU_ACTION_TYPE.SUBMENU,
+                                submenu: {
+                                    orientation: MENU_ORIENTATION.VERTICAL,
+                                    items: [
+                                        {
+                                            label: 'test leaf 1',
+                                            id: 'test-leaf-1',
+                                            action: {
+                                                type: MENU_ACTION_TYPE.LINK,
+                                                to: '/',
+                                            },
+                                        },
+                                        {
+                                            label: 'test leaf 2',
+                                            id: 'test-leaf-2',
+                                            action: {
+                                                type: MENU_ACTION_TYPE.LINK,
+                                                to: '/',
+                                            },
+                                        },
+                                    ],
+                                },
+                            },
+                        },
+                        {
+                            action: {
+                                type: MENU_ACTION_TYPE.SUBMENU,
+                                submenu: {
+                                    orientation: MENU_ORIENTATION.VERTICAL,
+                                    items: [
+                                        {
+                                            label: 'test leaf 3',
+                                            id: 'test-leaf-3',
+                                            action: {
+                                                type: MENU_ACTION_TYPE.LINK,
+                                                to: '/',
+                                            },
+                                        },
+                                        {
+                                            label: 'test leaf 4',
+                                            id: 'test-leaf-4',
+                                            action: {
+                                                type: MENU_ACTION_TYPE.LINK,
+                                                to: '/',
+                                            },
+                                        },
+                                    ],
+                                },
+                            },
+                            label: 'test submenu 2',
+                            id: 'test-submenu-2',
+                        },
+                    ],
+                },
+            },
+        },
+        {
+            id: 'services',
+            label: 'services',
+            action: {
+                type: MENU_ACTION_TYPE.SUBMENU,
+                submenu: {
+                    orientation: MENU_ORIENTATION.HORIZONTAL,
+                    items: [
+                        {
+                            label: 'test submenu 5',
+                            id: 'test-submenu-5',
+                            action: {
+                                type: MENU_ACTION_TYPE.SUBMENU,
+                                submenu: {
+                                    orientation: MENU_ORIENTATION.VERTICAL,
+                                    items: [
+                                        {
+                                            label: 'test leaf 1',
+                                            id: 'test-leaf-1',
+                                            action: {
+                                                type: MENU_ACTION_TYPE.LINK,
+                                                to: '/',
+                                            },
+                                        },
+                                        {
+                                            label: 'test leaf 2',
+                                            id: 'test-leaf-2',
+                                            action: {
+                                                type: MENU_ACTION_TYPE.LINK,
+                                                to: '/',
+                                            },
+                                        },
+                                    ],
+                                },
+                            },
+                        },
+                        {
+                            action: {
+                                type: MENU_ACTION_TYPE.SUBMENU,
+                                submenu: {
+                                    orientation: MENU_ORIENTATION.VERTICAL,
+                                    items: [
+                                        {
+                                            label: 'test leaf 3',
+                                            id: 'test-leaf-3',
+                                            action: {
+                                                type: MENU_ACTION_TYPE.LINK,
+                                                to: '/',
+                                            },
+                                        },
+                                        {
+                                            label: 'test leaf 4',
+                                            id: 'test-leaf-4',
+                                            action: {
+                                                type: MENU_ACTION_TYPE.LINK,
+                                                to: '/',
+                                            },
+                                        },
+                                        {
+                                            label: 'test leaf 5',
+                                            id: 'test-leaf-5',
+                                            action: {
+                                                type: MENU_ACTION_TYPE.LINK,
+                                                to: '/',
+                                            },
+                                        },
+                                        {
+                                            label: 'test leaf 6',
+                                            id: 'test-leaf-6',
+                                            action: {
+                                                type: MENU_ACTION_TYPE.LINK,
+                                                to: '/',
+                                            },
+                                        },
+                                    ],
+                                },
+                            },
+                            label: 'test submenu 6',
+                            id: 'test-submenu-6',
+                        },
+                    ],
+                },
+            },
+        },
+    ],
+};
+export const DemoMenuImplementationV2 = () => (_jsx(MenuProvider, Object.assign({ menu: demoMenuV2 }, { children: ({ menu, getMenuProps, getMenuItemProps }) => {
+        const getPropsWithoutStyle = (props) => {
+            const { style: _style } = props, propsWithoutStyle = __rest(props, ["style"]);
+            return propsWithoutStyle;
+        };
+        return (_jsxs(_Fragment, { children: [_jsx(RowV2, Object.assign({}, getMenuProps(), { children: menu.items.map((menuItem) => (_createElement(ButtonV2, Object.assign({}, getPropsWithoutStyle(getMenuItemProps([menuItem.id])), { sx: { margin: '4px' }, key: menuItem.id }), menuItem.label))) })), _jsx(NavMenuV2, {})] }));
+    } })));

package/dist/components/composites/NavMenuV2/index.d.ts

@@ -0,0 +1,5 @@
+import React from 'react';
+import { StyledElementPropsV2 } from '../../../theme';
+type NavMenuV2Props = StyledElementPropsV2<HTMLDivElement>;
+export declare const NavMenuV2: React.FC<NavMenuV2Props>;
+export {};

package/dist/components/composites/NavMenuV2/index.js

@@ -0,0 +1,56 @@
+var __rest = (this && this.__rest) || function (s, e) {
+    var t = {};
+    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
+        t[p] = s[p];
+    if (s != null && typeof Object.getOwnPropertySymbols === "function")
+        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
+            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
+                t[p[i]] = s[p[i]];
+        }
+    return t;
+};
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import _ChevronRightIcon from '@mui/icons-material/ChevronRight';
+import { ArrowLinkV2 } from '../../elements/ArrowLinkV2';
+import { ListV2, ListItemV2 } from '../../elements/ListV2';
+import { MENU_ACTION_TYPE, useMenu } from '../../providers/menu';
+import { RowV2 } from '../../elements/RowV2';
+import { ColumnV2 } from '../../elements/ColumnV2';
+import { HEADINGV2_SIZE, HeadingV2 } from '../../elements/HeadingV2';
+import { FONT_SIZE } from '../../../theme/typography';
+import { importedDefaultComponentShim } from '../../../utils/misc';
+import * as styles from './NavMenuV2.module.css';
+const typeSafeStyles = styles;
+const ChevronRightIcon = importedDefaultComponentShim(_ChevronRightIcon);
+export const NavMenuV2 = (props) => {
+    const { sx } = props, rest = __rest(props, ["sx"]);
+    const { isOpen, activePath, getMenuItem, getMenuItemProps, getMenuProps } = useMenu();
+    if (!isOpen) {
+        return null;
+    }
+    const topLevelMenuId = activePath[0];
+    const activeTopLevelMenu = getMenuItem([topLevelMenuId]);
+    if (!activeTopLevelMenu ||
+        !(activeTopLevelMenu.action.type === MENU_ACTION_TYPE.SUBMENU)) {
+        return null;
+    }
+    const submenu = activeTopLevelMenu.action.submenu;
+    const getPropsWithoutStyle = (propsFn) => {
+        const _a = propsFn(), { style: _style } = _a, propsWithoutStyle = __rest(_a, ["style"]);
+        return propsWithoutStyle;
+    };
+    return (_jsxs(RowV2, Object.assign({ className: typeSafeStyles.navWrapper, sx: sx }, rest, { children: [_jsx(ColumnV2, { sx: { flexGrow: 1 } }), submenu.items.map((submenuItem, i) => {
+                if (!(submenuItem.action.type === MENU_ACTION_TYPE.SUBMENU)) {
+                    return null;
+                }
+                const leafMenuItems = submenuItem.action.submenu.items;
+                const submenuPath = [topLevelMenuId, submenuItem.id];
+                const link = '//' + document.location.host + topLevelMenuId;
+                const category = topLevelMenuId.charAt(1).toUpperCase() + topLevelMenuId.slice(2);
+                return (_jsxs(ColumnV2, Object.assign({ className: typeSafeStyles.submenuCol }, { children: [_jsx("div", Object.assign({}, getPropsWithoutStyle(() => getMenuItemProps(submenuPath)), { children: _jsx(HeadingV2, Object.assign({ standalone: true, size: HEADINGV2_SIZE.SM, underline: true }, { children: submenuItem.label })) })), _jsx(ListV2, Object.assign({}, getPropsWithoutStyle(() => getMenuProps(submenuPath)), { icon: ChevronRightIcon, iconSize: FONT_SIZE.MS }, { children: leafMenuItems.map((leafMenuItem, i) => {
+                                var _a;
+                                const leafMenuPath = submenuPath.concat(leafMenuItem.id);
+                                return (_jsx(ListItemV2, Object.assign({ index: i, sx: { mt: 2 } }, getPropsWithoutStyle(() => getMenuItemProps(leafMenuPath)), { children: _jsx("a", Object.assign({ href: (_a = leafMenuItem === null || leafMenuItem === void 0 ? void 0 : leafMenuItem.action) === null || _a === void 0 ? void 0 : _a.to, className: typeSafeStyles.leafMenuLink, tabIndex: -1 }, { children: leafMenuItem.label })) }), leafMenuItem.id));
+                            }) })), i < 1 && (link.includes('esearch') || link.includes('ervices')) ? (_jsxs(ArrowLinkV2, Object.assign({ to: link, sx: { m: '20px 10px 10px 10px' } }, { children: ["View More ", category] }))) : null] }), submenuItem.id));
+            }), _jsx(ColumnV2, { sx: { flexGrow: 1 } })] })));
+};

package/dist/components/elements/ArrowLinkV2/ArrowLinkV2.module.css

@@ -0,0 +1,47 @@
+.arrowLinkWrapper {
+  text-decoration: none;
+  display: inline-flex;
+  white-space: nowrap;
+  padding: 0;
+  flex-grow: 0;
+  position: relative;
+  box-sizing: border-box;
+  background: var(--white);
+  color: var(--primary);
+  font-weight: 700;
+  font-size: 1rem;
+  line-height: 1.4;
+  font-family: 'Libre Franklin', 'Helvetica Neue', Helvetica, Arial, Verdana,
+    sans-serif;
+
+  &:hover {
+    transform: scale(1.02);
+    background: var(--extraExtraLightGray);
+  }
+
+  &:hover > svg {
+    fill: var(--extraExtraLightGray);
+  }
+
+  & > svg {
+    fill: var(--white);
+  }
+}
+
+.arrowLinkInnerWrapper {
+  position: relative;
+  border: 1px solid #a7a7a7;
+  border-width: 1px 0 2px 1px;
+  box-sizing: border-box;
+  padding: 0.125rem 1.5rem 0.125rem 0.5rem;
+  height: 100%;
+  flex: 1 1 auto;
+}
+
+.arrow {
+  width: 16px;
+  right: -16px;
+  position: absolute;
+  top: 0;
+  height: 100%;
+}

package/dist/components/elements/ArrowLinkV2/ArrowLinkV2.stories.d.ts

@@ -0,0 +1,6 @@
+import type { Meta, StoryObj } from '@storybook/react';
+import { ArrowLinkV2 } from '.';
+declare const meta: Meta<typeof ArrowLinkV2>;
+export default meta;
+type Story = StoryObj<typeof ArrowLinkV2>;
+export declare const Default: Story;

package/dist/components/elements/ArrowLinkV2/ArrowLinkV2.stories.js

@@ -0,0 +1,14 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { ArrowLinkV2 } from '.';
+import { ColumnV2 } from '../ColumnV2';
+import { BoxV2 } from '../BoxV2';
+import { UIVersion2 } from '../../../utils/decorators/UIVersion2';
+const meta = {
+    title: 'Elements/ArrowLinkV2',
+    component: ArrowLinkV2,
+    decorators: [UIVersion2],
+};
+export default meta;
+export const Default = {
+    render: () => (_jsx(ColumnV2, { children: _jsx(BoxV2, { children: _jsx(ArrowLinkV2, Object.assign({ to: "/" }, { children: "Click Me" })) }) })),
+};

package/dist/components/elements/ArrowLinkV2/index.d.ts

@@ -0,0 +1,7 @@
+/// <reference types="react" />
+import { StyledElementPropsV2 } from '../../../theme';
+type ArrowLinkV2Props = StyledElementPropsV2<HTMLAnchorElement, {
+    to: string;
+}>;
+export declare const ArrowLinkV2: React.FC<ArrowLinkV2Props>;
+export {};

package/dist/components/elements/ArrowLinkV2/index.js

@@ -0,0 +1,21 @@
+var __rest = (this && this.__rest) || function (s, e) {
+    var t = {};
+    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
+        t[p] = s[p];
+    if (s != null && typeof Object.getOwnPropertySymbols === "function")
+        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
+            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
+                t[p[i]] = s[p[i]];
+        }
+    return t;
+};
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { processSx } from '../../../utils/processSx';
+import { BoxV2 } from '../BoxV2';
+import * as styles from './ArrowLinkV2.module.css';
+const typeSafeStyles = styles;
+export const ArrowLinkV2 = (_a) => {
+    var { to, children, sx } = _a, rest = __rest(_a, ["to", "children", "sx"]);
+    const processedSx = processSx(sx);
+    return (_jsxs("a", Object.assign({ href: to, className: typeSafeStyles.arrowLinkWrapper, style: processedSx }, rest, { children: [_jsx(BoxV2, Object.assign({ className: typeSafeStyles.arrowLinkInnerWrapper }, { children: children })), _jsxs("svg", Object.assign({ viewBox: "0 0 16 1", preserveAspectRatio: "none", className: typeSafeStyles.arrow }, { children: [_jsx("path", { d: "M0,0 0,0 16,0.5 0,1 0,1z" }), _jsx("line", { x1: "0", x2: "16", y1: "0", y2: "0.5", stroke: "#a7a7a7", strokeWidth: "0.05", strokeLinecap: "butt" }), _jsx("line", { x1: "0", x2: "16", y1: "1", y2: "0.5", stroke: "#a7a7a7", strokeWidth: "0.1", strokeLinecap: "butt" })] }))] })));
+};

package/dist/index.d.ts

@@ -7,6 +7,7 @@ export { GlobalStyles } from './theme/GlobalStyles';
 export { Alert, Alerts } from './components/elements/Alerts';
 export { AlertV2, AlertsV2 } from './components/elements/AlertsV2';
 export { ArrowLink } from './components/elements/ArrowLink';
+export { ArrowLinkV2 } from './components/elements/ArrowLinkV2';
 export { BrandingBar } from './components/elements/BrandingBar';
 export { BrandingBarV2 } from './components/elements/BrandingBarV2';
 export { Button, BUTTON_SIZE, BUTTON_TYPE, LinkButton, } from './components/elements/Button';
@@ -66,6 +67,7 @@ export { Card, CARD_SIZE, CARD_LAYOUT } from './components/composites/Card';
 export { CardV2, CARDV2_SIZE, CARDV2_LAYOUT, } from './components/composites/CardV2';
 export { SnackBar } from './components/composites/SnackBar';
 export { NavMenu } from './components/composites/NavMenu';
+export { NavMenuV2 } from './components/composites/NavMenuV2';
 export { EmptyState, EMPTY_STATE_SIZE, } from './components/composites/EmptyState';
 export { DropdownLinks } from './components/composites/DropdownLinks';
 export { Modal } from './components/composites/Modal';

package/dist/index.js

@@ -6,6 +6,7 @@ export { GlobalStyles } from './theme/GlobalStyles';
 export { Alert, Alerts } from './components/elements/Alerts';
 export { AlertV2, AlertsV2 } from './components/elements/AlertsV2';
 export { ArrowLink } from './components/elements/ArrowLink';
+export { ArrowLinkV2 } from './components/elements/ArrowLinkV2';
 export { BrandingBar } from './components/elements/BrandingBar';
 export { BrandingBarV2 } from './components/elements/BrandingBarV2';
 export { Button, BUTTON_SIZE, BUTTON_TYPE, LinkButton, } from './components/elements/Button';
@@ -65,6 +66,7 @@ export { Card, CARD_SIZE, CARD_LAYOUT } from './components/composites/Card';
 export { CardV2, CARDV2_SIZE, CARDV2_LAYOUT, } from './components/composites/CardV2';
 export { SnackBar } from './components/composites/SnackBar';
 export { NavMenu } from './components/composites/NavMenu';
+export { NavMenuV2 } from './components/composites/NavMenuV2';
 export { EmptyState, EMPTY_STATE_SIZE, } from './components/composites/EmptyState';
 export { DropdownLinks } from './components/composites/DropdownLinks';
 export { Modal } from './components/composites/Modal';

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ndlib/component-library",
-  "version": "1.0.42",
+  "version": "1.0.44",
   "type": "module",
   "sideEffects": false,
   "files": [