@databiosphere/findable-ui 0.0.0

package/lib/components/Layout/components/Header/components/Content/components/Navigation/navigation.styles.js

@@ -0,0 +1,54 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.Navigation = void 0;
+const react_1 = require("@emotion/react");
+const styled_1 = __importDefault(require("@emotion/styled"));
+const entities_1 = require("../../../../../../../../common/entities");
+const breakpoints_1 = require("../../../../../../../../styles/common/mixins/breakpoints");
+const fonts_1 = require("../../../../../../../../styles/common/mixins/fonts");
+exports.Navigation = (0, styled_1.default)("div") `
+  display: flex;
+  flex: 1;
+  flex-direction: row;
+  gap: 8px;
+  justify-content: flex-start;
+
+  // Left alignment.
+  ${({ alignment }) => alignment === entities_1.ELEMENT_ALIGNMENT.LEFT &&
+    (0, react_1.css) `
+      margin-left: 24px;
+    `};
+
+  // Center alignment.
+  ${({ alignment }) => alignment === entities_1.ELEMENT_ALIGNMENT.CENTER &&
+    (0, react_1.css) `
+      justify-content: center;
+    `};
+
+  // Right alignment.
+  ${({ alignment }) => alignment === entities_1.ELEMENT_ALIGNMENT.RIGHT &&
+    (0, react_1.css) `
+      justify-content: flex-end;
+    `};
+
+  .MuiButton-nav {
+    ${fonts_1.textBody500};
+    padding: 6px 12px;
+
+    .MuiButton-endIcon {
+      margin-left: -6px;
+      margin-right: -6px;
+    }
+  }
+
+  .MuiDivider-root {
+    margin: 8px 0;
+
+    ${breakpoints_1.mediaDesktopSmallUp} {
+      display: none;
+    }
+  }
+`;

package/lib/components/Layout/components/Header/components/Content/components/Slogan/slogan.d.ts

@@ -0,0 +1,7 @@
+import React, { CSSProperties, ReactNode } from "react";
+export interface SloganProps {
+    className?: string;
+    slogan: ReactNode;
+    style?: CSSProperties;
+}
+export declare const Slogan: React.ForwardRefExoticComponent<SloganProps & React.RefAttributes<HTMLDivElement>>;

package/lib/components/Layout/components/Header/components/Content/components/Slogan/slogan.js

@@ -0,0 +1,33 @@
+"use strict";
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
+    Object.defineProperty(o, "default", { enumerable: true, value: v });
+}) : function(o, v) {
+    o["default"] = v;
+});
+var __importStar = (this && this.__importStar) || function (mod) {
+    if (mod && mod.__esModule) return mod;
+    var result = {};
+    if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
+    __setModuleDefault(result, mod);
+    return result;
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.Slogan = void 0;
+const material_1 = require("@mui/material");
+const react_1 = __importStar(require("react"));
+const typography_1 = require("../../../../../../../../theme/common/typography");
+const slogan_styles_1 = require("./slogan.styles");
+exports.Slogan = (0, react_1.forwardRef)(function Slogan({ className, slogan, style }, ref) {
+    return (react_1.default.createElement(slogan_styles_1.Slogan, { ref: ref, style: style }, typeof slogan === "string" ? (react_1.default.createElement(material_1.Typography, { className: className, variant: typography_1.TEXT_BODY_400 }, slogan)) : (slogan)));
+});

package/lib/components/Layout/components/Header/components/Content/components/Slogan/slogan.styles.d.ts

@@ -0,0 +1,20 @@
+/// <reference types="react" />
+export declare const Slogan: import("@emotion/styled").StyledComponent<{
+    theme?: import("@emotion/react").Theme | undefined;
+    as?: import("react").ElementType<any> | undefined;
+}, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;
+export declare const Divider: import("@emotion/styled").StyledComponent<{
+    absolute?: boolean | undefined;
+    children?: import("react").ReactNode;
+    classes?: Partial<import("@mui/material").DividerClasses> | undefined;
+    flexItem?: boolean | undefined;
+    light?: boolean | undefined;
+    orientation?: "horizontal" | "vertical" | undefined;
+    sx?: import("@mui/material").SxProps<import("@mui/material").Theme> | undefined;
+    textAlign?: "center" | "right" | "left" | undefined;
+    variant?: "inset" | "middle" | "fullWidth" | undefined;
+} & import("@mui/material/OverridableComponent").CommonProps & Omit<Omit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLHRElement>, HTMLHRElement>, "ref"> & {
+    ref?: ((instance: HTMLHRElement | null) => void) | import("react").RefObject<HTMLHRElement> | null | undefined;
+}, keyof import("@mui/material/OverridableComponent").CommonProps | "children" | "textAlign" | "sx" | "variant" | "orientation" | "absolute" | "light" | "flexItem"> & {
+    theme?: import("@emotion/react").Theme | undefined;
+}, {}, {}>;

package/lib/components/Layout/components/Header/components/Content/components/Slogan/slogan.styles.js

@@ -0,0 +1,30 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.Divider = exports.Slogan = void 0;
+const styled_1 = __importDefault(require("@emotion/styled"));
+const material_1 = require("@mui/material");
+const breakpoints_1 = require("../../../../../../../../styles/common/mixins/breakpoints");
+exports.Slogan = styled_1.default.div `
+  padding: 8px 24px;
+
+  .MuiTypography-text-body-400 {
+    display: block;
+  }
+
+  ${breakpoints_1.mediaDesktopSmallUp} {
+    flex: none;
+    padding: 0;
+
+    .MuiTypography-text-body-400 {
+      font-size: 12px;
+      line-height: 18px;
+      max-width: 180px;
+    }
+  }
+`;
+exports.Divider = (0, styled_1.default)(material_1.Divider) `
+  max-height: 32px;
+`;

package/lib/components/Layout/components/Header/components/Content/components/Socials/socials.styles.d.ts

@@ -0,0 +1,4 @@
+/// <reference types="react" />
+export declare const Socials: import("@emotion/styled").StyledComponent<import("../../../../../../../common/Socials/socials").SocialsProps & import("react").RefAttributes<HTMLDivElement> & {
+    theme?: import("@emotion/react").Theme | undefined;
+}, {}, {}>;

package/lib/components/Layout/components/Header/components/Content/components/Socials/socials.styles.js

@@ -0,0 +1,13 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.Socials = void 0;
+const styled_1 = __importDefault(require("@emotion/styled"));
+const socials_1 = require("../../../../../../../common/Socials/socials");
+exports.Socials = (0, styled_1.default)(socials_1.Socials) `
+  display: flex;
+  gap: 8px;
+  padding: 0;
+`;

package/lib/components/Layout/components/Header/components/Content/content.styles.d.ts

@@ -0,0 +1,5 @@
+/// <reference types="react" />
+export declare const Content: import("@emotion/styled").StyledComponent<{
+    theme?: import("@emotion/react").Theme | undefined;
+    as?: import("react").ElementType<any> | undefined;
+}, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;

package/lib/components/Layout/components/Header/components/Content/content.styles.js

@@ -0,0 +1,14 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.Content = void 0;
+const styled_1 = __importDefault(require("@emotion/styled"));
+exports.Content = styled_1.default.div `
+  display: grid;
+  gap: 4px;
+  padding: 16px 0;
+  overflow-x: hidden;
+  overflow-y: auto;
+`;

package/lib/components/Layout/components/Header/header.d.ts

@@ -0,0 +1,18 @@
+import { ReactNode } from "react";
+import { ElementAlignment } from "../../../../common/entities";
+import { SocialMedia } from "./common/entities";
+import { NavLinkItem } from "./components/Content/components/Navigation/navigation";
+export interface HeaderProps {
+    actions?: ReactNode;
+    Announcements?: ReactNode;
+    authenticationEnabled?: boolean;
+    className?: string;
+    Logo: ReactNode;
+    navAlignment?: ElementAlignment;
+    navLinks: NavLinkItem[];
+    searchEnabled?: boolean;
+    searchURL?: string;
+    slogan?: ReactNode;
+    socialMedia?: SocialMedia;
+}
+export declare const Header: ({ ...headerProps }: HeaderProps) => JSX.Element;

package/lib/components/Layout/components/Header/header.js

@@ -0,0 +1,108 @@
+"use strict";
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
+    Object.defineProperty(o, "default", { enumerable: true, value: v });
+}) : function(o, v) {
+    o["default"] = v;
+});
+var __importStar = (this && this.__importStar) || function (mod) {
+    if (mod && mod.__esModule) return mod;
+    var result = {};
+    if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
+    __setModuleDefault(result, mod);
+    return result;
+};
+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;
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.Header = void 0;
+const material_1 = require("@mui/material");
+const react_1 = __importStar(require("react"));
+const entities_1 = require("../../../../common/entities");
+const useBreakpointHelper_1 = require("../../../../hooks/useBreakpointHelper");
+const useLayoutState_1 = require("../../../../hooks/useLayoutState");
+const useResizeObserver_1 = require("../../../../hooks/useResizeObserver");
+const layoutState_1 = require("../../../../providers/layoutState");
+const breakpoints_1 = require("../../../../theme/common/breakpoints");
+const constants_1 = require("./common/constants");
+const utils_1 = require("./common/utils");
+const actions_1 = require("./components/Content/components/Actions/actions");
+const authentication_1 = require("./components/Content/components/Actions/components/Authentication/authentication");
+const menu_1 = require("./components/Content/components/Actions/components/Menu/menu");
+const search_1 = require("./components/Content/components/Actions/components/Search/search");
+const navigation_1 = require("./components/Content/components/Navigation/navigation");
+const slogan_1 = require("./components/Content/components/Slogan/slogan");
+const slogan_styles_1 = require("./components/Content/components/Slogan/slogan.styles");
+const socials_styles_1 = require("./components/Content/components/Socials/socials.styles");
+const header_styles_1 = require("./header.styles");
+const Header = (_a) => {
+    var headerProps = __rest(_a, []);
+    const { Announcements, authenticationEnabled, actions, className, Logo, navAlignment = entities_1.ELEMENT_ALIGNMENT.LEFT, navLinks, searchEnabled, searchURL, slogan, socialMedia, } = headerProps;
+    const { layoutDispatch } = (0, useLayoutState_1.useLayoutState)();
+    const headerRef = (0, react_1.useRef)(null);
+    const { height } = (0, useResizeObserver_1.useResizeObserver)(headerRef, useResizeObserver_1.getBorderBoxSizeHeight) || {};
+    const [menuOpen, setMenuOpen] = (0, react_1.useState)(false);
+    const onlySmDesktop = (0, useBreakpointHelper_1.useBreakpointHelper)(useBreakpointHelper_1.BREAKPOINT_FN_NAME.ONLY, breakpoints_1.DESKTOP_SM);
+    const smDesktop = (0, useBreakpointHelper_1.useBreakpointHelper)(useBreakpointHelper_1.BREAKPOINT_FN_NAME.UP, breakpoints_1.DESKTOP_SM);
+    const desktop = (0, useBreakpointHelper_1.useBreakpointHelper)(useBreakpointHelper_1.BREAKPOINT_FN_NAME.UP, breakpoints_1.DESKTOP);
+    const AppBar = navAlignment === entities_1.ELEMENT_ALIGNMENT.RIGHT ? header_styles_1.HeaderSmAppBar : header_styles_1.AppBar;
+    const showActions = searchEnabled || authenticationEnabled || !smDesktop;
+    const isNavigationIn = smDesktop;
+    const isSloganIn = Boolean(slogan) && smDesktop;
+    const isSocialsIn = Boolean(socialMedia) && desktop;
+    const fadeProps = constants_1.FADE_TRANSITION_PROPS;
+    // Closes header menu.
+    const closeMenu = (0, react_1.useCallback)(() => {
+        setMenuOpen(false);
+    }, []);
+    // Opens header menu.
+    const openMenu = (0, react_1.useCallback)(() => {
+        setMenuOpen(true);
+    }, []);
+    // Updates layout state header height.
+    (0, react_1.useEffect)(() => {
+        if (!height)
+            return;
+        layoutDispatch({
+            payload: height,
+            type: layoutState_1.LayoutActionKind.UpdateHeaderHeight,
+        });
+    }, [height, layoutDispatch]);
+    return (react_1.default.createElement(AppBar, { ref: headerRef, className: className, elevation: 1, position: "fixed" },
+        Announcements,
+        react_1.default.createElement(material_1.Toolbar, { variant: "dense" },
+            Logo,
+            react_1.default.createElement(material_1.Fade, Object.assign({ in: isSloganIn, style: { transitionDelay: isSloganIn ? "50ms" : "0ms" } }, fadeProps),
+                react_1.default.createElement(slogan_styles_1.Divider, { orientation: "vertical" })),
+            react_1.default.createElement(material_1.Fade, Object.assign({ in: isSloganIn, style: { transitionDelay: isSloganIn ? "50ms" : "0ms" } }, fadeProps),
+                react_1.default.createElement(slogan_1.Slogan, { slogan: slogan })),
+            react_1.default.createElement(material_1.Fade, Object.assign({ in: isNavigationIn }, fadeProps),
+                react_1.default.createElement(navigation_1.Navigation, { alignment: navAlignment, headerProps: headerProps, links: (0, utils_1.getHeaderNavigationLinks)(navLinks, socialMedia, onlySmDesktop) })),
+            socialMedia && (react_1.default.createElement(material_1.Fade, Object.assign({ in: isSocialsIn }, fadeProps),
+                react_1.default.createElement(socials_styles_1.Socials, { buttonSize: "small", socials: socialMedia.socials }))),
+            react_1.default.createElement(actions_1.Actions, { showActions: showActions },
+                react_1.default.createElement(search_1.Search, { closeMenu: closeMenu, searchEnabled: searchEnabled, searchURL: searchURL }),
+                react_1.default.createElement(authentication_1.Authentication, { authenticationEnabled: authenticationEnabled, closeMenu: closeMenu }),
+                actions,
+                react_1.default.createElement(menu_1.Menu, { closeMenu: closeMenu, headerProps: headerProps, open: menuOpen, openMenu: openMenu })))));
+};
+exports.Header = Header;

package/lib/components/Layout/components/Header/header.stories.d.ts

@@ -0,0 +1,6 @@
+import { StoryObj } from "@storybook/react";
+import { Header } from "./header";
+declare const _default: import("@storybook/types").ComponentAnnotations<import("@storybook/react/dist/types-0fc72a6d").R, import("./header").HeaderProps>;
+export default _default;
+declare type Story = StoryObj<typeof Header>;
+export declare const HeaderStory: Story;

package/lib/components/Layout/components/Header/header.stories.js

@@ -0,0 +1,102 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.HeaderStory = void 0;
+const react_1 = __importDefault(require("react"));
+const entities_1 = require("../../../../common/entities");
+const logo_svg_1 = __importDefault(require("../../../../images/logo.svg"));
+const discourseIcon_1 = require("../../../common/CustomIcon/components/DiscourseIcon/discourseIcon");
+const gitHubIcon_1 = require("../../../common/CustomIcon/components/GitHubIcon/gitHubIcon");
+const xIcon_1 = require("../../../common/CustomIcon/components/XIcon/xIcon");
+const youTubeIcon_1 = require("../../../common/CustomIcon/components/YouTubeIcon/youTubeIcon");
+const constants_1 = require("./common/constants");
+const logo_1 = require("./components/Content/components/Logo/logo");
+const header_1 = require("./header");
+exports.default = {
+    argTypes: {
+        Logo: { control: { disable: true } },
+        authenticationEnabled: { control: "boolean" },
+        navAlignment: {
+            control: "select",
+            options: [entities_1.ELEMENT_ALIGNMENT.LEFT, entities_1.ELEMENT_ALIGNMENT.CENTER],
+        },
+        navLinks: { control: "array" },
+        searchEnabled: { control: "boolean" },
+        slogan: { control: "text" },
+        socialMedia: { control: { disable: true } },
+    },
+    component: header_1.Header,
+    parameters: {
+        layout: "fullscreen",
+    },
+    title: "Components/Layout/Header",
+};
+const url = "/";
+exports.HeaderStory = {
+    args: {
+        Logo: react_1.default.createElement(logo_1.Logo, { alt: "Logo", height: 40, link: "/", src: logo_svg_1.default }),
+        authenticationEnabled: false,
+        navAlignment: entities_1.ELEMENT_ALIGNMENT.CENTER,
+        navLinks: [
+            {
+                label: "Overview",
+                url,
+            },
+            {
+                label: "Learn",
+                url,
+            },
+            {
+                label: "Datasets",
+                url,
+            },
+            {
+                label: "More",
+                menuItems: [
+                    {
+                        label: "Team",
+                        url,
+                    },
+                    {
+                        label: "FAQ",
+                        url,
+                    },
+                    {
+                        label: "Help",
+                        url,
+                    },
+                ],
+                url: "",
+            },
+        ],
+        searchEnabled: true,
+        slogan: "Header Slogan",
+        socialMedia: {
+            label: constants_1.HEADER_NAVIGATION_LABEL.SOCIALS,
+            socials: [
+                {
+                    Icon: xIcon_1.XIcon,
+                    label: "X",
+                    url: "https://twitter.com",
+                },
+                {
+                    Icon: youTubeIcon_1.YouTubeIcon,
+                    label: "YouTube",
+                    url: "https://www.youtube.com",
+                },
+                {
+                    Icon: discourseIcon_1.DiscourseIcon,
+                    label: "Discourse",
+                    url: "https://www.discourse.org/",
+                },
+                {
+                    Icon: gitHubIcon_1.GitHubIcon,
+                    label: "GitHub",
+                    url: "https://github.com",
+                },
+            ],
+        },
+    },
+};

package/lib/components/Layout/components/Header/header.styles.d.ts

@@ -0,0 +1,2 @@
+export declare const AppBar: import("@mui/material/OverridableComponent").OverridableComponent<import("@mui/material").AppBarTypeMap<{}, "header">>;
+export declare const HeaderSmAppBar: import("@mui/material/OverridableComponent").OverridableComponent<import("@mui/material").AppBarTypeMap<{}, "header">>;

package/lib/components/Layout/components/Header/header.styles.js

@@ -0,0 +1,27 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.HeaderSmAppBar = exports.AppBar = void 0;
+const styled_1 = __importDefault(require("@emotion/styled"));
+const material_1 = require("@mui/material");
+const constants_1 = require("./common/constants");
+exports.AppBar = (0, styled_1.default)(material_1.AppBar) `
+  border-bottom: 1px solid ${({ theme }) => theme.palette.smoke.main};
+
+  &.MuiPaper-elevation0 {
+    border-bottom: 1px solid transparent;
+  }
+
+  .MuiToolbar-root {
+    gap: 16px;
+    height: ${constants_1.HEADER_HEIGHT}px;
+    min-height: unset;
+  }
+`;
+exports.HeaderSmAppBar = (0, styled_1.default)(exports.AppBar) `
+  .MuiToolbar-root {
+    gap: 8px;
+  }
+`;

package/lib/components/Layout/components/Main/main.d.ts

@@ -0,0 +1,6 @@
+import { ReactNode } from "react";
+export interface MainProps {
+    children: ReactNode | ReactNode[];
+    className?: string;
+}
+export declare const Main: ({ children, className }: MainProps) => JSX.Element;

package/lib/components/Layout/components/Main/main.js

@@ -0,0 +1,15 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.Main = void 0;
+const react_1 = __importDefault(require("react"));
+const useLayoutState_1 = require("../../../../hooks/useLayoutState");
+const main_styles_1 = require("./main.styles");
+const Main = ({ children, className }) => {
+    const { layoutState } = (0, useLayoutState_1.useLayoutState)();
+    const { headerHeight } = layoutState;
+    return (react_1.default.createElement(main_styles_1.MainWithOffset, { className: className, offset: headerHeight }, children));
+};
+exports.Main = Main;

package/lib/components/Layout/components/Main/main.styles.d.ts

@@ -0,0 +1,15 @@
+/// <reference types="react" />
+interface Props {
+    offset: number;
+}
+export declare const Main: import("@emotion/styled").StyledComponent<{
+    theme?: import("@emotion/react").Theme | undefined;
+    as?: import("react").ElementType<any> | undefined;
+}, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLElement>, HTMLElement>, {}>;
+export declare const MainWithOffset: import("@emotion/styled").StyledComponent<{
+    theme?: import("@emotion/react").Theme | undefined;
+    as?: import("react").ElementType<any> | undefined;
+} & import("react").ClassAttributes<HTMLElement> & import("react").HTMLAttributes<HTMLElement> & {
+    theme?: import("@emotion/react").Theme | undefined;
+} & Props, {}, {}>;
+export {};

package/lib/components/Layout/components/Main/main.styles.js

@@ -0,0 +1,19 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.MainWithOffset = exports.Main = void 0;
+const react_1 = require("@emotion/react");
+const styled_1 = __importDefault(require("@emotion/styled"));
+const main = (0, react_1.css) `
+  align-items: flex-start;
+  display: flex;
+  flex: 1;
+`;
+exports.Main = (0, styled_1.default)("main") `
+  ${main};
+`;
+exports.MainWithOffset = (0, styled_1.default)(exports.Main) `
+  margin-top: ${({ offset }) => offset}px;
+`;

package/lib/components/Layout/components/Nav/components/NavBarHero/navBarHero.d.ts

@@ -0,0 +1,8 @@
+/// <reference types="react" />
+import { StaticImageProps } from "../../../../../common/StaticImage/staticImage";
+export interface NavBarHeroProps {
+    byline?: string;
+    logo?: StaticImageProps;
+    slogan?: string;
+}
+export declare const NavBarHero: ({ byline, logo, slogan, }: NavBarHeroProps) => JSX.Element;

package/lib/components/Layout/components/Nav/components/NavBarHero/navBarHero.js

@@ -0,0 +1,21 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.NavBarHero = void 0;
+const material_1 = require("@mui/material");
+const react_1 = __importDefault(require("react"));
+const staticImage_1 = require("../../../../../common/StaticImage/staticImage");
+const navBarHero_styles_1 = require("./navBarHero.styles");
+const NavBarHero = ({ byline, logo, slogan, }) => {
+    const showHero = byline || logo || slogan;
+    return (react_1.default.createElement(react_1.default.Fragment, null, showHero && (react_1.default.createElement(react_1.default.Fragment, null,
+        react_1.default.createElement(navBarHero_styles_1.NavBarHero, null,
+            logo && (react_1.default.createElement(navBarHero_styles_1.HeroLogo, null,
+                react_1.default.createElement(staticImage_1.StaticImage, Object.assign({}, logo)))),
+            slogan && react_1.default.createElement(navBarHero_styles_1.HeroText, null, slogan),
+            byline && react_1.default.createElement(navBarHero_styles_1.HeroText, null, byline)),
+        react_1.default.createElement(material_1.Divider, null)))));
+};
+exports.NavBarHero = NavBarHero;

package/lib/components/Layout/components/Nav/components/NavBarHero/navBarHero.styles.d.ts

@@ -0,0 +1,13 @@
+/// <reference types="react" />
+export declare const NavBarHero: import("@emotion/styled").StyledComponent<{
+    theme?: import("@emotion/react").Theme | undefined;
+    as?: import("react").ElementType<any> | undefined;
+}, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;
+export declare const HeroLogo: import("@emotion/styled").StyledComponent<{
+    theme?: import("@emotion/react").Theme | undefined;
+    as?: import("react").ElementType<any> | undefined;
+}, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLSpanElement>, HTMLSpanElement>, {}>;
+export declare const HeroText: import("@emotion/styled").StyledComponent<{
+    theme?: import("@emotion/react").Theme | undefined;
+    as?: import("react").ElementType<any> | undefined;
+}, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLSpanElement>, HTMLSpanElement>, {}>;

package/lib/components/Layout/components/Nav/components/NavBarHero/navBarHero.styles.js

@@ -0,0 +1,28 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.HeroText = exports.HeroLogo = exports.NavBarHero = void 0;
+const styled_1 = __importDefault(require("@emotion/styled"));
+exports.NavBarHero = styled_1.default.div `
+  display: grid;
+  gap: 8px 0;
+  grid-auto-flow: row;
+  justify-items: flex-start;
+`;
+exports.HeroLogo = styled_1.default.span `
+  line-height: 0;
+
+  img {
+    display: inline-block;
+    margin: 0;
+    width: auto;
+  }
+`;
+exports.HeroText = styled_1.default.span `
+  color: ${({ theme }) => theme.palette.ink.light};
+  display: block;
+  font-size: 12px;
+  line-height: 18px;
+`;

package/lib/components/Layout/components/Nav/nav.d.ts

@@ -0,0 +1,11 @@
+import { ReactNode } from "react";
+export interface NavItem {
+    active?: boolean;
+    label: string;
+    url?: string;
+}
+export interface NavProps {
+    Hero?: ReactNode;
+    navigation: NavItem[];
+}
+export declare const Nav: ({ Hero, navigation }: NavProps) => JSX.Element;

package/lib/components/Layout/components/Nav/nav.js

@@ -0,0 +1,21 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.Nav = void 0;
+const material_1 = require("@mui/material");
+const link_1 = __importDefault(require("next/link"));
+const react_1 = __importDefault(require("react"));
+const nav_styles_1 = require("./nav.styles");
+const Nav = ({ Hero, navigation }) => {
+    return (react_1.default.createElement(nav_styles_1.NavBar, null,
+        Hero,
+        react_1.default.createElement(nav_styles_1.List, null, navigation.map(({ active, label, url }, i) => {
+            return (react_1.default.createElement(material_1.ListItem, { key: `${label}${i}` },
+                react_1.default.createElement(link_1.default, { href: url !== null && url !== void 0 ? url : "", legacyBehavior: true, passHref: true },
+                    react_1.default.createElement(material_1.ListItemButton, { disabled: !url, selected: active },
+                        react_1.default.createElement(material_1.ListItemText, { disableTypography: true, primary: label })))));
+        }))));
+};
+exports.Nav = Nav;

package/lib/components/Layout/components/Nav/nav.stories.d.ts

@@ -0,0 +1,6 @@
+import { StoryObj } from "@storybook/react";
+import { Nav } from "./nav";
+declare const _default: import("@storybook/types").ComponentAnnotations<import("@storybook/react/dist/types-0fc72a6d").R, import("./nav").NavProps>;
+export default _default;
+declare type Story = StoryObj<typeof Nav>;
+export declare const NavStory: Story;