@databiosphere/findable-ui 6.0.0 → 8.0.0

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

@@ -1,51 +1,23 @@
-"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.Navigation = void 0;
-const material_1 = require("@mui/material");
-const router_1 = require("next/router");
-const react_1 = __importStar(require("react"));
-const entities_1 = require("../../../../../../../../common/entities");
-const useBreakpointHelper_1 = require("../../../../../../../../hooks/useBreakpointHelper");
-const breakpoints_1 = require("../../../../../../../../theme/common/breakpoints");
-const entities_2 = require("../../../../../../../Links/common/entities");
-const utils_1 = require("../../../../../../../Links/common/utils");
-const navigationDrawer_1 = require("./components/NavigationDrawer/navigationDrawer");
-const navigationMenu_1 = require("./components/NavigationMenu/navigationMenu");
-const navigation_styles_1 = require("./navigation.styles");
-exports.Navigation = (0, react_1.forwardRef)(function Navigation({ alignment = entities_1.ELEMENT_ALIGNMENT.LEFT, className, closeAncestor, headerProps, links, style, }, ref) {
-    const smDesktop = (0, useBreakpointHelper_1.useBreakpointHelper)(useBreakpointHelper_1.BREAKPOINT_FN_NAME.UP, breakpoints_1.DESKTOP_SM);
-    const router = (0, router_1.useRouter)();
-    return (react_1.default.createElement(navigation_styles_1.Navigation, { ref: ref, alignment: alignment, className: className, style: style }, links.map(({ divider, label, menuItems, target = entities_2.ANCHOR_TARGET.SELF, url }, i) => menuItems ? (react_1.default.createElement(react_1.Fragment, { key: i },
-        smDesktop ? (react_1.default.createElement(navigationMenu_1.NavigationMenu, { closeAncestor: closeAncestor, menuItems: menuItems, menuLabel: label })) : (react_1.default.createElement(navigationDrawer_1.NavigationDrawer, { closeAncestor: closeAncestor, headerProps: headerProps, menuItems: menuItems, menuLabel: label })),
-        divider && react_1.default.createElement(material_1.Divider, null))) : (react_1.default.createElement(react_1.Fragment, { key: i },
-        react_1.default.createElement(material_1.Button, { onClick: () => {
-                (0, utils_1.isClientSideNavigation)(url)
+import { Button, Divider } from "@mui/material";
+import { useRouter } from "next/router";
+import React, { forwardRef, Fragment } from "react";
+import { useBreakpoint } from "../../../../../../../../hooks/useBreakpoint";
+import { ANCHOR_TARGET } from "../../../../../../../Links/common/entities";
+import { isClientSideNavigation } from "../../../../../../../Links/common/utils";
+import { NavigationDrawer } from "./components/NavigationDrawer/navigationDrawer";
+import { NavigationMenu } from "./components/NavigationMenu/navigationMenu";
+import { Navigation as Links } from "./navigation.styles";
+export const Navigation = forwardRef(function Navigation({ className, closeAncestor, headerProps, links, style }, ref) {
+    const { mdUp } = useBreakpoint();
+    const router = useRouter();
+    return (React.createElement(Links, { ref: ref, className: className, style: style }, links.map(({ divider, label, menuItems, target = ANCHOR_TARGET.SELF, url }, i) => menuItems ? (React.createElement(Fragment, { key: i },
+        mdUp ? (React.createElement(NavigationMenu, { closeAncestor: closeAncestor, menuItems: menuItems, menuLabel: label })) : (React.createElement(NavigationDrawer, { closeAncestor: closeAncestor, headerProps: headerProps, menuItems: menuItems, menuLabel: label })),
+        divider && React.createElement(Divider, null))) : (React.createElement(Fragment, { key: i },
+        React.createElement(Button, { onClick: () => {
+                isClientSideNavigation(url)
                     ? router.push(url)
                     : window.open(url, target, "noopener noreferrer");
-                closeAncestor === null || closeAncestor === void 0 ? void 0 : closeAncestor();
+                closeAncestor?.();
             }, variant: "nav" }, label),
-        divider && react_1.default.createElement(material_1.Divider, null))))));
+        divider && React.createElement(Divider, null))))));
 });

package/lib/components/Layout/components/Header/components/Content/components/Navigation/navigation.styles.d.ts

@@ -1,10 +1,5 @@
 /// <reference types="react" />
-import { ElementAlignment } from "../../../../../../../../common/entities";
-interface Props {
-    alignment: ElementAlignment;
-}
 export declare const Navigation: import("@emotion/styled").StyledComponent<{
     theme?: import("@emotion/react").Theme | undefined;
     as?: import("react").ElementType<any> | undefined;
-} & Props, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;
-export {};
+}, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;

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

@@ -1,41 +1,20 @@
-"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") `
+import styled from "@emotion/styled";
+import { mediaDesktopSmallUp } from "../../../../../../../../styles/common/mixins/breakpoints";
+import { textBody500 } from "../../../../../../../../styles/common/mixins/fonts";
+export const Navigation = styled("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;
-    `};
+  ${mediaDesktopSmallUp} {
+    flex: unset;
+    justify-content: inherit;
+  }
 
   .MuiButton-nav {
-    ${fonts_1.textBody500};
+    ${textBody500};
     padding: 6px 12px;
 
     .MuiButton-endIcon {
@@ -47,7 +26,7 @@ exports.Navigation = (0, styled_1.default)("div") `
   .MuiDivider-root {
     margin: 8px 0;
 
-    ${breakpoints_1.mediaDesktopSmallUp} {
+    ${mediaDesktopSmallUp} {
       display: none;
     }
   }

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

@@ -1,33 +1,7 @@
-"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)));
+import { Typography } from "@mui/material";
+import React, { forwardRef } from "react";
+import { TEXT_BODY_400 } from "../../../../../../../../theme/common/typography";
+import { Slogan as CatchPhrase } from "./slogan.styles";
+export const Slogan = forwardRef(function Slogan({ className, slogan, style }, ref) {
+    return (React.createElement(CatchPhrase, { ref: ref, style: style }, typeof slogan === "string" ? (React.createElement(Typography, { className: className, variant: TEXT_BODY_400 }, slogan)) : (slogan)));
 });

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

@@ -1,20 +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.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 `
+import styled from "@emotion/styled";
+import { Divider as MDivider } from "@mui/material";
+import { mediaDesktopSmallUp } from "../../../../../../../../styles/common/mixins/breakpoints";
+export const Slogan = styled.div `
   padding: 8px 24px;
 
   .MuiTypography-text-body-400 {
     display: block;
   }
 
-  ${breakpoints_1.mediaDesktopSmallUp} {
+  ${mediaDesktopSmallUp} {
     flex: none;
     padding: 0;
 
@@ -25,6 +19,6 @@ exports.Slogan = styled_1.default.div `
     }
   }
 `;
-exports.Divider = (0, styled_1.default)(material_1.Divider) `
+export const Divider = styled(MDivider) `
   max-height: 32px;
 `;

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

@@ -1,12 +1,6 @@
-"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) `
+import styled from "@emotion/styled";
+import { Socials as DXSocials } from "../../../../../../../common/Socials/socials";
+export const Socials = styled(DXSocials) `
   display: flex;
   gap: 8px;
   padding: 0;

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

@@ -1,11 +1,5 @@
-"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 `
+import styled from "@emotion/styled";
+export const Content = styled.div `
   display: grid;
   gap: 4px;
   padding: 16px 0;

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

@@ -1,15 +1,13 @@
 import { ReactNode } from "react";
-import { ElementAlignment } from "../../../../common/entities";
-import { SocialMedia } from "./common/entities";
-import { NavLinkItem } from "./components/Content/components/Navigation/navigation";
+import { ComponentsConfig } from "../../../../config/entities";
+import { Navigation, SocialMedia } from "./common/entities";
 export interface HeaderProps {
     actions?: ReactNode;
-    Announcements?: ReactNode;
+    announcements?: ComponentsConfig;
     authenticationEnabled?: boolean;
     className?: string;
-    Logo: ReactNode;
-    navAlignment?: ElementAlignment;
-    navLinks: NavLinkItem[];
+    logo: ReactNode;
+    navigation?: Navigation;
     searchEnabled?: boolean;
     searchURL?: string;
     slogan?: ReactNode;

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

@@ -1,108 +1,45 @@
-"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;
+import { Fade, Toolbar } from "@mui/material";
+import React from "react";
+import { useBreakpoint } from "../../../../hooks/useBreakpoint";
+import { useMenu } from "../../../../hooks/useMenu";
+import { APP_BAR_PROPS, FADE_TRANSITION_PROPS, TOOLBAR_PROPS, } from "./common/constants";
+import { getNavigationLinks } from "./common/utils";
+import { Announcements } from "./components/Announcements/announcements";
+import { Actions } from "./components/Content/components/Actions/actions";
+import { Authentication } from "./components/Content/components/Actions/components/Authentication/authentication";
+import { Menu } from "./components/Content/components/Actions/components/Menu/menu";
+import { Search } from "./components/Content/components/Actions/components/Search/search";
+import { Navigation as DXNavigation } from "./components/Content/components/Navigation/navigation";
+import { Slogan } from "./components/Content/components/Slogan/slogan";
+import { Divider } from "./components/Content/components/Slogan/slogan.styles";
+import { Socials } from "./components/Content/components/Socials/socials.styles";
+import { AppBar, Center, Left, Right } from "./header.styles";
+import { useHeaderVisibility } from "./hooks/useHeaderVisibility";
+import { useMeasureHeader } from "./hooks/useMeasureHeader";
+export const Header = ({ ...headerProps }) => {
+    const { breakpoint } = useBreakpoint();
+    const { isIn } = useHeaderVisibility(headerProps);
+    const { headerRef } = useMeasureHeader();
+    const { onClose, onOpen, open } = useMenu();
+    const { actions, announcements, authenticationEnabled, className, logo, navigation: [navItemsL, navItemsC, navItemsR] = [], searchEnabled, searchURL, slogan, socialMedia, } = headerProps;
+    return (React.createElement(AppBar, { ...APP_BAR_PROPS, ref: headerRef, className: className },
+        React.createElement(Announcements, { announcements: announcements }),
+        React.createElement(Toolbar, { ...TOOLBAR_PROPS },
+            React.createElement(Fade, { ...FADE_TRANSITION_PROPS, in: isIn.isLeftGroupIn },
+                React.createElement(Left, null,
+                    logo,
+                    isIn.isSloganIn && React.createElement(Divider, { flexItem: true, orientation: "vertical" }),
+                    isIn.isSloganIn && React.createElement(Slogan, { slogan: slogan }),
+                    isIn.isLeftNavigationIn && (React.createElement(DXNavigation, { headerProps: headerProps, links: getNavigationLinks(navItemsL, breakpoint) })))),
+            React.createElement(Fade, { ...FADE_TRANSITION_PROPS, in: isIn.isCenterGroupIn },
+                React.createElement(Center, null, isIn.isCenterNavigationIn && (React.createElement(DXNavigation, { headerProps: headerProps, links: getNavigationLinks(navItemsC, breakpoint) })))),
+            React.createElement(Fade, { ...FADE_TRANSITION_PROPS, in: isIn.isRightGroupIn },
+                React.createElement(Right, null,
+                    isIn.isRightNavigationIn && (React.createElement(DXNavigation, { headerProps: headerProps, links: getNavigationLinks(navItemsR) })),
+                    isIn.isSocialsIn && (React.createElement(Socials, { buttonSize: "small", socials: socialMedia?.socials || [] })),
+                    isIn.isActionsIn && (React.createElement(Actions, null,
+                        React.createElement(Search, { closeMenu: onClose, searchEnabled: searchEnabled, searchURL: searchURL }),
+                        React.createElement(Authentication, { authenticationEnabled: authenticationEnabled, closeMenu: onClose }),
+                        actions,
+                        React.createElement(Menu, { closeMenu: onClose, headerProps: headerProps, open: open, openMenu: onOpen }))))))));
 };
-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.js

@@ -1,98 +1,89 @@
-"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 = {
+import React from "react";
+import logo from "../../../../images/logo.svg";
+import { DiscourseIcon } from "../../../common/CustomIcon/components/DiscourseIcon/discourseIcon";
+import { GitHubIcon } from "../../../common/CustomIcon/components/GitHubIcon/gitHubIcon";
+import { XIcon } from "../../../common/CustomIcon/components/XIcon/xIcon";
+import { YouTubeIcon } from "../../../common/CustomIcon/components/YouTubeIcon/youTubeIcon";
+import { Logo } from "./components/Content/components/Logo/logo";
+import { Header } from "./header";
+export default {
     argTypes: {
-        Logo: { control: { disable: true } },
         authenticationEnabled: { control: "boolean" },
-        navAlignment: {
-            control: "select",
-            options: [entities_1.ELEMENT_ALIGNMENT.LEFT, entities_1.ELEMENT_ALIGNMENT.CENTER],
-        },
+        logo: { control: { disable: true } },
         navLinks: { control: "array" },
         searchEnabled: { control: "boolean" },
         slogan: { control: "text" },
         socialMedia: { control: { disable: true } },
     },
-    component: header_1.Header,
+    component: Header,
     parameters: {
         layout: "fullscreen",
     },
     title: "Components/Layout/Header",
 };
 const url = "/";
-exports.HeaderStory = {
+export const 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: "",
-            },
+        logo: React.createElement(Logo, { alt: "Logo", height: 40, link: "/", src: logo }),
+        navigation: [
+            undefined,
+            [
+                {
+                    label: "Overview",
+                    url,
+                },
+                {
+                    label: "Learn",
+                    url,
+                },
+                {
+                    label: "Datasets",
+                    url,
+                },
+                {
+                    label: "More",
+                    menuItems: [
+                        {
+                            label: "Team",
+                            url,
+                        },
+                        {
+                            label: "FAQ",
+                            url,
+                        },
+                        {
+                            label: "Help",
+                            url,
+                        },
+                    ],
+                    url: "",
+                },
+            ],
+            undefined,
         ],
         searchEnabled: true,
         slogan: "Header Slogan",
         socialMedia: {
-            label: constants_1.HEADER_NAVIGATION_LABEL.SOCIALS,
+            label: "Follow Us",
             socials: [
                 {
-                    Icon: xIcon_1.XIcon,
+                    Icon: XIcon,
                     label: "X",
                     url: "https://twitter.com",
                 },
                 {
-                    Icon: youTubeIcon_1.YouTubeIcon,
+                    Icon: YouTubeIcon,
                     label: "YouTube",
                     url: "https://www.youtube.com",
                 },
                 {
-                    Icon: discourseIcon_1.DiscourseIcon,
+                    Icon: DiscourseIcon,
                     label: "Discourse",
                     url: "https://www.discourse.org/",
                 },
                 {
-                    Icon: gitHubIcon_1.GitHubIcon,
+                    Icon: GitHubIcon,
                     label: "GitHub",
                     url: "https://github.com",
                 },

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

@@ -1,2 +1,14 @@
+/// <reference types="react" />
 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">>;
+export declare const Left: 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 Center: 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 Right: import("@emotion/styled").StyledComponent<{
+    theme?: import("@emotion/react").Theme | undefined;
+    as?: import("react").ElementType<any> | undefined;
+}, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;