@hlf-fe/pulmo-ui 1.5.2 → 1.5.3

package/dist/components/modules/navigation/navigation-desktop/navigation-desktop.js

@@ -0,0 +1,136 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useState } from 'react';
+import { Link } from 'gatsby';
+import { NavigationSection } from './nav-section/nav-section';
+import { NavigationCell } from './nav-cell/nav-cell';
+import { Image } from '../../../../components/layout/image/image';
+import { Button } from '../../../../components/buttons/button/button';
+import { ExternalIcon } from '../../../../components/icons/external-icon/external-icon';
+import styled, { css } from 'styled-components';
+import { rem } from '../../../../styles/units';
+export const NavigationDesktop = ({ logotype, mainMenuItems, topMenuItems, ctaButton, localeText = {
+    ariaLabelHome: "",
+}, isMenuVisible, menuRef }) => {
+    const [currentSection, setCurrentSection] = useState();
+    const [isSearchOpen, setIsSearchOpen] = useState(false);
+    const { ariaLabelHome } = localeText;
+    const onOpenSection = (section) => {
+        const sectionToShow = currentSection?.key !== section?.key ? section : undefined;
+        setCurrentSection(sectionToShow);
+    };
+    return (_jsxs(Wrapper, { ref: menuRef, children: [_jsxs(MenuContainer, { children: [!!topMenuItems?.length && (_jsx(TopBar, { "data-test": "nav-top-bar", children: topMenuItems.map(({ webUrlName, internalLink, externalUrl }) => (_jsx(StyledTopLink, { to: externalUrl || internalLink?.slug?.current || '/', children: webUrlName }, webUrlName))) })), _jsxs(NavBar, { children: [logotype && (_jsx(StyledLogoLink, { "data-test": "nav-logo", to: '/', "aria-label": ariaLabelHome, children: _jsx(Image, { image: logotype?.asset, width: "142", height: "35" }) })), _jsx(StyledList, { "data-test": "nav-list", children: mainMenuItems?.map(section => (_jsx(NavigationCell, { active: currentSection?.key === section.key, title: section.title, onToggleCell: () => onOpenSection(section) }, section.key))) }), ctaButton && (_jsxs(StyledButton, { dataTest: "nav-cta", to: ctaButton?.externalUrl, href: ctaButton?.internalLink?.slug?.current, children: [ctaButton.webUrlName, _jsx(IconWrapper, { children: _jsx(ExternalIcon, {}) })] }))] })] }), currentSection && (_jsx(StyledNavSection, { section: currentSection, closeSection: () => onOpenSection(undefined) })), (currentSection || isSearchOpen) && (_jsx(Overlay, { "data-test": "nav-overlay", "$isSearchOpen": isSearchOpen, "$playFadeOut": !isMenuVisible, onClick: () => {
+                    onOpenSection(undefined);
+                    setIsSearchOpen(false);
+                } }))] }));
+};
+const Wrapper = styled.nav `
+  position: relative;
+  display: flex;
+  flex-direction: column;
+  background: white;
+  z-index: 10;
+
+  a {
+    text-decoration: none;
+  }
+`;
+const MenuContainer = styled.div `
+  position: relative;
+  max-width: ${({ theme }) => theme.siteMaxWidth};
+  margin: 0 auto;
+  width: 100%;
+`;
+const Overlay = styled.div `
+  @keyframes fadeIn {
+    0% {
+      opacity: 0;
+    }
+    100% {
+      opacity: 1;
+    }
+  }
+
+  @keyframes fadeOut {
+    0% {
+      opacity: 1;
+    }
+    100% {
+      opacity: 0;
+      pointer-events: none;
+    }
+  }
+
+  position: fixed;
+  left: 0;
+  right: 0;
+  top: ${rem(128)};
+  bottom: 0;
+  background: rgba(0, 0, 0, 0.4);
+  cursor: pointer;
+  animation: fadeIn 0.2s forwards;
+
+  ${({ $isSearchOpen }) => $isSearchOpen &&
+    css `
+      top: ${rem(52)};
+      z-index: 2;
+    `}
+
+  ${({ $playFadeOut }) => $playFadeOut &&
+    css `
+      animation: fadeOut 0.2s forwards;
+    `}
+`;
+const TopBar = styled.div `
+  position: relative;
+  display: flex;
+  height: 52px;
+  justify-content: flex-end;
+  align-items: center;
+  background: white;
+  padding-right: ${rem(56)};
+`;
+const NavBar = styled.div `
+  position: relative;
+  display: flex;
+  height: 76px;
+  background: white;
+  padding: 0 ${rem(56)};
+`;
+const StyledButton = styled(Button) `
+  align-self: center;
+  white-space: nowrap;
+`;
+const IconWrapper = styled.span ``;
+const StyledTopLink = styled(Link) `
+  font-size: ${rem(16)};
+  font-weight: 500;
+  margin: 0;
+  margin-right: ${rem(32)};
+
+  ${({ theme }) => css `
+    color: ${theme.blackLight};
+    font-family: ${theme.valueMedium};
+  `};
+
+  &:focus-visible {
+    outline: ${rem(2)} solid ${({ theme }) => theme.blackLight};
+    outline-offset: ${rem(2)};
+    border-radius: ${rem(2)};
+  }
+`;
+const StyledLogoLink = styled(Link) `
+  display: flex;
+  align-self: center;
+  margin-right: ${rem(16)};
+`;
+const StyledList = styled.ul `
+  margin: 0;
+  padding: 0;
+  margin-left: auto;
+  display: flex;
+  align-items: center;
+`;
+const StyledNavSection = styled(NavigationSection) `
+  top: 100%;
+  z-index: 1;
+`;

package/dist/components/modules/navigation/navigation-desktop/navigation-desktop.stories.d.ts

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

package/dist/components/modules/navigation/navigation-desktop/navigation-desktop.stories.js

@@ -0,0 +1,12 @@
+import { NavigationDesktop } from "./navigation-desktop";
+import { mockNavigation } from '../../../../mocks/navigation-mock';
+const meta = {
+    title: "Modules/Main Navigation (Desktop)",
+    component: NavigationDesktop,
+};
+export default meta;
+export const Default = {
+    args: {
+        ...mockNavigation
+    }
+};

package/dist/components/modules/navigation/navigation-mobile/nav-panel.d.ts

@@ -0,0 +1,11 @@
+import { WebPageUrl } from "../../../../models/web-page-url";
+import { NavigationSectionModel } from "../shared/types/types";
+type Props = {
+    mainMenuItems?: NavigationSectionModel[];
+    topMenuItems?: WebPageUrl[];
+    scrollToTop: () => void;
+    closeMenu: () => void;
+    goBackText: string;
+};
+declare const NavigationPanel: ({ mainMenuItems, topMenuItems, scrollToTop, closeMenu, goBackText }: Props) => import("react/jsx-runtime").JSX.Element;
+export default NavigationPanel;

package/dist/components/modules/navigation/navigation-mobile/nav-panel.js

@@ -0,0 +1,158 @@
+import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
+import { useState } from "react";
+import { Link } from "gatsby";
+import { ToggableChevron } from "../../../../components/icons/toggable-chevron/toggable-chevron";
+import { CardBanner } from "../../../../components/surfaces/cards/card-banner/card-banner";
+import { NavigationItem } from "../shared/nav-item/nav-item";
+import styled, { css } from "styled-components";
+import { rem } from '../../../../styles/units';
+const NavigationPanel = ({ mainMenuItems, topMenuItems, scrollToTop, closeMenu, goBackText }) => {
+    const [currentSection, setCurrentSection] = useState();
+    const [currentItem, setCurrentItem] = useState();
+    const [isShowingSection, setIsShowingSection] = useState(false);
+    const [isAnimating, setIsAnimating] = useState(false);
+    const toggleSection = (section) => {
+        if (isAnimating)
+            return;
+        if (section) {
+            setCurrentSection(section);
+        }
+        setIsShowingSection(!!section);
+        setIsAnimating(true);
+        scrollToTop();
+    };
+    const toggleItem = (item) => {
+        setCurrentItem(currentItem?.key !== item?.key ? item : undefined);
+    };
+    const renderColumn = (title, items) => (items && (_jsxs(_Fragment, { children: [_jsx(Header, { children: title }), _jsx(StyledList, { children: items.map((item) => (_jsx(NavigationItem, { model: item, expanded: currentItem?.key === item.key, parent: currentSection?.title, onToggle: toggleItem, onLinkClick: closeMenu }, item.key))) })] })));
+    return (_jsxs(Wrapper, { "data-test": "nav-panel-wrapper", toggled: isShowingSection, onTransitionEnd: () => setIsAnimating(false), children: [_jsx(Panel, { visible: true, children: _jsxs(PanelLayout, { children: [_jsx(StyledList, { "data-test": "nav-list", children: mainMenuItems?.map((section) => (_jsx("li", { children: _jsxs(NavCell, { "data-test": "nav-cell", onClick: () => toggleSection(section), children: [_jsx("p", { children: section.title }), _jsx(Chevron, {})] }) }, section.key))) }), !!topMenuItems?.length && (_jsx(LinkContainer, { "data-test": "nav-sub-menu", children: topMenuItems.map(({ webUrlName, internalLink, externalUrl }) => (_jsx(StyledLink, { to: externalUrl || internalLink?.slug?.current || "/", children: webUrlName }, webUrlName))) }))] }) }), _jsxs(Panel, { "data-test": "nav-panel-section", visible: isShowingSection || isAnimating, children: [_jsxs(PanelLayout, { children: [_jsxs(BackCell, { "data-test": "nav-panel-back", onClick: () => toggleSection(undefined), children: [_jsx(BackChevron, { disableCircle: false }), goBackText] }), renderColumn(currentSection?.column1Title, currentSection?.column1Items), renderColumn(currentSection?.column2Title, currentSection?.column2Items)] }), _jsx(InfoWrapper, { color: currentSection?.backgroundColor?.hex, children: currentSection?.linkBanners && currentSection?.linkBanners?.map((banner) => (_jsx(CardBanner, { ...banner, externalUrl: banner?.link?.externalUrl, internalLink: banner?.link?.internalLink?.slug?.current, onClick: closeMenu }, banner.title.trim()))) })] })] }));
+};
+const Wrapper = styled.div `
+  width: 100%;
+  display: flex;
+  transform: translateX(0%);
+  transition: transform ease-in-out 0.6s;
+
+  ${({ toggled }) => toggled && css `
+    transform: translateX(-100%);
+  `}
+`;
+const Panel = styled.div `
+  width: 100vw;
+  display: flex;
+  flex-direction: column;
+  flex-shrink: 0;
+  display: none;
+
+  ${({ visible }) => visible && css `
+    display: block;
+  `}
+`;
+const PanelLayout = styled.div `
+  padding: ${rem(24)};
+  padding-bottom: ${rem(40)};
+`;
+const StyledList = styled.ul `
+  margin: 0;
+  padding: 0;
+  list-style: none;
+
+  li {
+    margin-bottom: ${rem(16)};
+
+    &:last-child {
+      margin-bottom: 0;
+    }
+  }
+`;
+const NavCell = styled.button `
+  padding: 0;
+  border: 0;
+  background: none;
+  cursor: pointer;
+  display: grid;
+  grid-template-columns: 1fr 22px;
+  align-items: center;
+  width: 100%;
+  font-size: ${rem(20)};
+
+  p {
+    font-size: inherit;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+    margin: 0;
+    text-align: left;
+  }
+
+  ${({ theme }) => css `
+    color: ${theme.blackLight};
+    font-family: ${theme.valueBold};
+  `};
+`;
+const Chevron = styled(ToggableChevron).attrs({
+    rotation: -90,
+}) `
+  margin-left: auto;
+`;
+const BackCell = styled(NavCell) `
+  display: flex;
+  font-size: ${rem(16)};
+  width: fit-content;
+`;
+const BackChevron = styled(ToggableChevron).attrs({
+    rotation: -270,
+}) `
+  margin-right: ${rem(4)};
+`;
+const LinkContainer = styled.div `
+  display: flex;
+  flex-direction: column;
+  padding-top: ${rem(32)};
+`;
+const StyledLink = styled(Link) `
+  font-size: ${rem(16)};
+  font-weight: 500;
+  margin: 0;
+
+  ${({ theme }) => css `
+    color: ${theme.blackLight};
+    font-family: ${theme.valueMedium};
+  `};
+
+  &:not(:last-child) {
+    margin-bottom: ${rem(24)};
+  };
+`;
+const Header = styled.h2 `
+  font-size: ${rem(20)};
+  margin: 0;
+  overflow: hidden;
+  white-space: nowrap;
+  text-overflow: ellipsis;
+  border-bottom: 1px solid ${({ theme }) => theme.grayPale};
+  padding-bottom: ${rem(8)};
+  margin-top: ${rem(30)};
+
+  ${({ theme }) => css `
+    color: ${theme.blackLight};
+    font-family: ${theme.valueBold};
+  `};
+`;
+const InfoWrapper = styled.div `
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  padding: ${rem(32)} ${rem(15)};
+  
+  ${({ color }) => color && css `
+    background-color: ${color};
+  `};
+
+  > * {
+    &:first-child {
+        margin-bottom: ${rem(16)};
+    }
+  }
+`;
+export default NavigationPanel;

package/dist/components/modules/navigation/navigation-mobile/navigation-mobile.d.ts

@@ -0,0 +1,3 @@
+import { NavigationModel } from '../shared/types/types';
+export type NavigationMobileProps = NavigationModel;
+export declare const NavigationMobile: ({ logotype, mainMenuItems, topMenuItems, ctaButton, localeText, }: NavigationMobileProps) => import("react/jsx-runtime").JSX.Element;

package/dist/components/modules/navigation/navigation-mobile/navigation-mobile.js

@@ -0,0 +1,97 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useEffect, useRef, useState } from 'react';
+import { Link } from 'gatsby';
+import NavigationPanel from './nav-panel';
+import { Image } from '../../../../components/layout/image/image';
+import { Button } from '../../../../components/buttons/button/button';
+import { HamburgerIcon } from '../../../../components/icons/hamburger-icon/hamburger-icon';
+import { MenuCloseIcon } from '../../../../components/icons/menu-close-icon/menu-close-icon';
+import styled, { css } from 'styled-components';
+import { rem } from '../../../../styles/units';
+export const NavigationMobile = ({ logotype, mainMenuItems, topMenuItems, ctaButton, localeText = {
+    ariaLabelHome: "",
+    goBack: ""
+}, }) => {
+    const { ariaLabelHome, goBack } = localeText;
+    const [isOpen, setIsOpen] = useState(false);
+    const stickyRef = useRef(null);
+    useEffect(() => {
+        document.body.style.overflow = isOpen ? 'hidden' : '';
+    }, [isOpen]);
+    // On Unmount, cleanup
+    useEffect(() => {
+        return () => {
+            document.body.style.overflow = '';
+        };
+    }, []);
+    const scrollToTop = () => {
+        stickyRef.current?.scroll({ top: 0, behavior: 'smooth' });
+    };
+    return (_jsx(Wrapper, { children: _jsxs(StickyContainer, { "$expanded": isOpen, ref: stickyRef, children: [_jsxs(TopBar, { children: [logotype && (_jsx(StyledLogoLink, { "data-test": "nav-logo", to: '/', "aria-label": ariaLabelHome, children: _jsx(Image, { image: logotype?.asset, width: "112", height: "28" }) })), ctaButton && (_jsx(StyledButton, { btnSize: "s", dataTest: "nav-cta", to: ctaButton.externalUrl, href: ctaButton.internalLink?.slug?.current, target: '_blank', children: ctaButton.webUrlName })), _jsx(MenuToggle, { "data-test": !isOpen ? 'nav-menu-closed' : 'nav-menu-open', "aria-label": "Meny", onClick: () => setIsOpen(!isOpen), children: _jsx(IconWrapper, { children: !isOpen ? _jsx(HamburgerIcon, {}) : _jsx(MenuCloseIcon, {}) }) })] }), isOpen && (_jsx(MenuContent, { children: _jsx(NavigationPanel, { mainMenuItems: mainMenuItems, topMenuItems: topMenuItems, scrollToTop: scrollToTop, closeMenu: () => setIsOpen(false), goBackText: goBack }) }))] }) }));
+};
+const Wrapper = styled.nav `
+  position: relative;
+  height: ${({ theme }) => rem(theme?.mobileNavHeight)};
+  width: 100%;
+  display: flex;
+  flex-direction: column;
+  z-index: 10;
+
+  a {
+    text-decoration: none;
+  }
+`;
+const StickyContainer = styled.div `
+  position: fixed;
+  width: 100%;
+  background: white;
+  overflow: hidden;
+  overflow-y: scroll;
+
+  ${({ $expanded }) => $expanded &&
+    css `
+      height: 100%;
+    `};
+`;
+const TopBar = styled.div `
+  height: ${({ theme }) => rem(theme?.mobileNavHeight)};
+  display: flex;
+  align-items: center;
+  padding: 0;
+  padding-left: ${rem(16)};
+`;
+const StyledLogoLink = styled(Link) `
+  display: flex;
+  align-self: center;
+
+  img {
+    height: ${rem(28)};
+  }
+`;
+const StyledButton = styled(Button) `
+  display: flex;
+  align-items: center;
+  margin-left: auto;
+  height: ${rem(32)};
+  padding: 0 ${rem(8)};
+`;
+const MenuToggle = styled.button `
+  display: flex;
+  align-items: center;
+  height: 100%;
+  margin: 0;
+  padding: 0 ${rem(16)};
+  border: none;
+  background: none;
+  cursor: pointer;
+`;
+const IconWrapper = styled.div `
+  display: flex;
+  width: ${rem(30)};
+  justify-content: center;
+`;
+const MenuContent = styled.div `
+  width: 100%;
+  border-top: 1px solid #ddd;
+  -webkit-tap-highlight-color: transparent;
+`;

package/dist/components/modules/navigation/navigation-mobile/navigation-mobile.stories.d.ts

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

package/dist/components/modules/navigation/navigation-mobile/navigation-mobile.stories.js

@@ -0,0 +1,12 @@
+import { NavigationMobile } from "./navigation-mobile";
+import { mockNavigation } from '../../../../mocks/navigation-mock';
+const meta = {
+    title: "Modules/Main Navigation (Mobile)",
+    component: NavigationMobile,
+};
+export default meta;
+export const Default = {
+    args: {
+        ...mockNavigation
+    }
+};

package/dist/components/modules/navigation/shared/nav-item/nav-item.d.ts

@@ -0,0 +1,18 @@
+import { WebPageUrl } from '../../../../../models/web-page-url';
+export type NavigationItemProps = {
+    model: NavigationItemModel;
+    expanded?: boolean;
+    parent?: string;
+    onToggle: (model: NavigationItemModel) => void;
+    onLinkClick?: () => void;
+};
+export type NavigationItemModel = {
+    key: string;
+    title: string;
+    highlight?: boolean;
+    slug?: {
+        current: string;
+    };
+    items?: WebPageUrl[];
+};
+export declare const NavigationItem: ({ model, expanded, onToggle, onLinkClick }: NavigationItemProps) => import("react/jsx-runtime").JSX.Element;

package/dist/components/modules/navigation/shared/nav-item/nav-item.js

@@ -0,0 +1,106 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Link } from "gatsby";
+import styled, { css } from "styled-components";
+import { media } from "../../../../../styles/mixins";
+import { rem } from "../../../../../styles/units";
+import { ToggableChevron } from "../../../../../components/icons/toggable-chevron/toggable-chevron";
+import { HeartIcon } from "../../../../../components/icons/heart-icon/heart-icon";
+export const NavigationItem = ({ model, expanded, onToggle, onLinkClick }) => {
+    const { highlight, title, items, slug } = model;
+    return (_jsxs(Wrapper, { "data-test": "nav-item", children: [slug ? (_jsxs(HeaderLink, { to: slug.current, onClick: () => {
+                    onLinkClick?.();
+                }, children: [_jsx(Title, { active: highlight, children: title }), highlight && (_jsx(IconWrapper, { children: _jsx(HeartIcon, {}) }))] })) : (_jsxs(HeaderButton, { onClick: () => {
+                    onToggle(model);
+                }, children: [_jsx(Title, { children: title }), _jsx(StyledToggle, { toggled: expanded, disableCircle: false })] })), (!slug && items) && (_jsx(Expandable, { "data-test": "nav-item-list", active: expanded, children: items.map(({ webUrlName, internalLink }) => (_jsx(StyledListItem, { children: _jsx(StyledLink, { tabIndex: !expanded ? -1 : 0, to: internalLink?.slug?.current ?? "", onClick: () => {
+                            onLinkClick?.();
+                        }, children: webUrlName }) }, webUrlName))) }))] }));
+};
+const Wrapper = styled.li `
+  display: flex;
+  flex-direction: column;
+  margin-top: ${rem(16)};
+`;
+const HeaderButton = styled.button `
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+  cursor: pointer;
+  padding: 0;
+  border: 0;
+  background: none;
+`;
+const HeaderLink = styled(Link) `
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+  cursor: pointer;
+  text-decoration: none; 
+
+  svg {
+    flex-shrink: 0;
+  }
+`;
+const Title = styled.p `
+  font-size: ${rem(16)};
+  margin: 0;
+  margin-right: ${rem(8)};
+  text-align: left;
+
+  ${({ theme }) => css `
+    color: ${theme.blackLight};
+    font-family: ${theme.valueBold};
+  `};
+
+  ${({ active }) => active && css `
+    color: ${({ theme }) => theme.red};
+  `};
+
+  ${media.L `
+    font-size: ${rem(18)};
+    margin-right: ${rem(6)};
+  `}
+`;
+const IconWrapper = styled.div `
+  display: flex;
+
+  ${media.L `
+    margin-right: ${rem(20)};
+  `}
+`;
+const StyledToggle = styled(ToggableChevron) `
+  margin-left: auto;
+
+  ${media.L `
+    margin-right: ${rem(20)};
+  `}
+`;
+const Expandable = styled.ul `
+  position: relative;
+  display: flex;
+  flex-direction: column;
+  overflow: hidden;
+  margin: 0;
+  padding: 0;
+  display: none;
+
+  ${({ active }) => active && css `
+    display: block;
+  `};
+`;
+const StyledListItem = styled.li `
+  margin-top: ${rem(16)};
+  margin-left: ${rem(8)};
+`;
+const StyledLink = styled(Link) `
+  font-size: ${rem(16)};
+  text-decoration: none;
+
+  ${({ theme }) => css `
+    color: ${theme.blackLight};
+    font-family: ${theme.valueRegular};
+    
+    ${media.L `
+      font-family: ${theme.valueMedium};
+    `}
+  `};
+`;

package/dist/components/modules/navigation/shared/types/types.d.ts

@@ -0,0 +1,43 @@
+import { WebPageUrl } from '../../../../../models/web-page-url';
+import { SanityImage } from '../../../../../models/sanity-types';
+import { RefObject } from "react";
+export type NavigationItemModel = {
+    key: string;
+    title: string;
+    highlight?: boolean;
+    slug?: {
+        current: string;
+    };
+    items?: any;
+};
+export type NavigationSectionModel = {
+    key: string;
+    title: string;
+    column1Title?: string;
+    column1Items?: NavigationItemModel[];
+    column2Title?: string;
+    column2Items?: NavigationItemModel[];
+    backgroundColor?: {
+        hex: string;
+    };
+    linkBanners: LinkBanner[];
+};
+export type LinkBanner = {
+    title: string;
+    text: string;
+    image?: SanityImage;
+    link?: WebPageUrl;
+};
+export type NavigationModel = {
+    topMenuItems?: WebPageUrl[];
+    mainMenuItems?: NavigationSectionModel[];
+    logotype?: SanityImage;
+    ctaButton?: WebPageUrl;
+    __typename: string;
+    localeText?: {
+        ariaLabelHome?: string;
+        goBack?: string;
+    };
+    isMenuVisible?: boolean;
+    menuRef?: RefObject<HTMLElement>;
+};

package/dist/components/modules/navigation/shared/types/types.js

@@ -0,0 +1 @@
+export {};

package/dist/components/modules/navigation/types.d.ts

@@ -0,0 +1,39 @@
+import { WebPageUrl } from '../../../models/web-page-url';
+import { SanityImage } from '../../../models/sanity-types';
+export type NavigationItemModel = {
+    key: string;
+    title: string;
+    highlight?: boolean;
+    link?: WebPageUrl;
+    items?: any;
+};
+export type NavigationSectionModel = {
+    key: string;
+    title: string;
+    column1Title?: string;
+    column1Items?: NavigationItemModel[];
+    column2Title?: string;
+    column2Items?: NavigationItemModel[];
+    backgroundColor?: {
+        hex: string;
+    };
+    linkBanners: LinkBanner[];
+};
+export type LinkBanner = {
+    title: string;
+    text: string;
+    image?: SanityImage;
+    link?: WebPageUrl;
+};
+export type NavigationModel = {
+    topMenuItems?: WebPageUrl[];
+    mainMenuItems?: NavigationSectionModel[];
+    logotype?: SanityImage;
+    ctaButton?: WebPageUrl;
+    __typename: string;
+    localeText?: {
+        ariaLabelHome?: string;
+        goBack?: string;
+    };
+    isMenuVisible?: boolean;
+};

package/dist/components/modules/navigation/types.js

@@ -0,0 +1 @@
+export {};