@hlf-fe/pulmo-ui 1.5.2 → 1.5.4

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, i) => (_jsx(CardBanner, { ...banner, externalUrl: banner?.link?.externalUrl, internalLink: banner?.link?.internalLink?.slug?.current, onClick: closeMenu }, `${banner.title.trim()}-${i}`))) })] })] }));
+};
+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,95 @@
+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);
+    const emptyMenuItems = !mainMenuItems?.length && !topMenuItems?.length;
+    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 })), !emptyMenuItems && (_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;
+  max-width: ${rem(140)};
+`;
+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/typography/headings/headings.js

@@ -6,6 +6,7 @@ export const H1 = styled.h1 `
   color: ${({ theme }) => theme.blackLight};
   font-size: ${rem(40)};
   line-height: 1.15;
+  margin-bottom: 0; 
 
   ${media.L `
     font-size: ${rem(64)};
@@ -17,6 +18,7 @@ export const H2 = styled.h2 `
   color: ${({ theme }) => theme.blackLight};
   font-size: ${rem(28)};
   line-height: 1.14;
+  margin-bottom: 0; 
 
   ${media.L `
     font-size: ${rem(32)};
@@ -28,6 +30,7 @@ export const H3 = styled.h3 `
   color: ${({ theme }) => theme.blackLight};
   font-size: ${rem(22)};
   line-height: 1.45;
+  margin-bottom: 0; 
 
   ${media.L `
     font-size: ${rem(28)};
@@ -39,6 +42,7 @@ export const H4 = styled.h4 `
   color: ${({ theme }) => theme.blackLight};
   font-size: ${rem(22)};
   line-height: 1.45;
+  margin-bottom: 0; 
 
   ${media.L `
     font-size: ${rem(28)};

package/dist/components/typography/headings/headings.stories.js

@@ -18,9 +18,9 @@ export const Heading2 = {
 };
 export const Heading3 = {
     name: "H3",
-    render: () => (_jsx(_Fragment, { children: _jsx(H3, { children: "This is an H2" }) })),
+    render: () => (_jsx(_Fragment, { children: _jsx(H3, { children: "This is an H3" }) })),
 };
 export const Heading4 = {
     name: "H4",
-    render: () => (_jsx(_Fragment, { children: _jsx(H4, { children: "This is an H2" }) })),
+    render: () => (_jsx(_Fragment, { children: _jsx(H4, { children: "This is an H4" }) })),
 };

package/dist/index.d.ts

@@ -13,14 +13,13 @@ import { type EntryListProps, type EntryListItemProps, type EntryListHeadingProp
 import { type DropdownProps } from "./components/inputs/dropdown/dropdown";
 import { type PaginationProps } from "./components/navigation/pagination/pagination";
 import { type AccordionItemProps } from "./components/layout/accordion/accordion";
-import { type NavigationCellProps } from "./components/navigation/nav-cell/nav-cell";
-import { type NavigationItemProps } from "./components/navigation/nav-item/nav-item";
 import { type CardBannerProps } from "./components/surfaces/cards/card-banner/card-banner";
 import { type PaperProps } from "./components/surfaces/paper/paper";
 import { type LinkProps } from "./components/typography/link/link";
 import { PortableTextComponentDefault } from "./components/typography/portable-text/portable-text-component-default";
 import { type FooterProps } from "./components/modules/footer/footer";
-export type { ButtonProps, LoadingButtonProps, TextButtonProps, EmailSignupFormProps, ImageProps, ContainerProps, AlertProps, EntryListHeadingProps, EntryListTextProps, PaginationProps, NavigationCellProps, NavigationItemProps, CardBannerProps, PaperProps, };
+import { type LogoListProps } from "./components/modules/logo-list/logo-list";
+export type { ButtonProps, LoadingButtonProps, TextButtonProps, EmailSignupFormProps, ImageProps, ContainerProps, AlertProps, EntryListHeadingProps, EntryListTextProps, PaginationProps, CardBannerProps, PaperProps, };
 export { CloseIcon } from "./components/icons/close-icon/close-icon";
 export { ExclamationMarkIcon } from "./components/icons/exclamation-mark-icon/exclamation-mark-icon";
 export { WarningIcon } from "./components/icons/warning-icon/warning-icon";
@@ -57,8 +56,6 @@ export declare const Accordion: import("react").FC<import("styled-components/dis
     disabled?: boolean;
 }>>;
 export declare const AccordionItem: import("react").FC<AccordionItemProps>;
-export declare const NavigationCell: import("react").FC<NavigationCellProps>;
-export declare const NavigationItem: import("react").FC<NavigationItemProps>;
 export declare const CardBanner: import("react").FC<CardBannerProps>;
 export declare const Paper: import("react").FC<PaperProps>;
 export declare const Link: import("react").FC<LinkProps>;
@@ -73,4 +70,7 @@ export declare const ItalicText: import("react").FC<import("styled-components").
 export declare const OrderedList: import("react").FC<import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").OlHTMLAttributes<HTMLOListElement>, HTMLOListElement>, never>>;
 export declare const UnorderedList: import("react").FC<import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLUListElement>, HTMLUListElement>, never>>;
 export declare const Footer: import("react").FC<FooterProps>;
+export declare const LogoList: import("react").FC<LogoListProps>;
+export declare const NavigationDesktop: import("react").FC<import("./components/modules/navigation/shared/types/types").NavigationModel>;
+export declare const NavigationMobile: import("react").FC<import("./components/modules/navigation/shared/types/types").NavigationModel>;
 export { PortableTextComponentDefault };

package/dist/index.js

@@ -16,8 +16,6 @@ import { EntryList as EntryListComponent, EntryListItem as EntryListItemComponen
 import { Dropdown as DropdownComponent, } from "./components/inputs/dropdown/dropdown";
 import { Pagination as PaginationComponent, } from "./components/navigation/pagination/pagination";
 import { Accordion as AccordionComponent, AccordionItem as AccordionItemComponent, } from "./components/layout/accordion/accordion";
-import { NavigationCell as NavigationCellComponent, } from "./components/navigation/nav-cell/nav-cell";
-import { NavigationItem as NavigationItemComponent, } from "./components/navigation/nav-item/nav-item";
 import { CardBanner as CardBannerComponent, } from "./components/surfaces/cards/card-banner/card-banner";
 import { Paper as PaperComponent, } from "./components/surfaces/paper/paper";
 import { Link as LinkComponent, } from "./components/typography/link/link";
@@ -26,6 +24,9 @@ import { NormalText as NormalTextComponent, LeadParagraph as LeadParagraphCompon
 import { OrderedList as OrderedListComponent, UnorderedList as UnorderedListComponent, } from "./components/typography/list/list";
 import { PortableTextComponentDefault } from "./components/typography/portable-text/portable-text-component-default";
 import { Footer as FooterComponent, } from "./components/modules/footer/footer";
+import { LogoList as LogoListComponent, } from "./components/modules/logo-list/logo-list";
+import { NavigationDesktop as NavigationDesktopComponent, } from "./components/modules/navigation/navigation-desktop/navigation-desktop";
+import { NavigationMobile as NavigationMobileComponent, } from "./components/modules/navigation/navigation-mobile/navigation-mobile";
 // Icons
 export { CloseIcon } from "./components/icons/close-icon/close-icon";
 export { ExclamationMarkIcon } from "./components/icons/exclamation-mark-icon/exclamation-mark-icon";
@@ -55,8 +56,6 @@ export const Dropdown = withDefaultTheme(DropdownComponent);
 export const Pagination = withDefaultTheme(PaginationComponent);
 export const Accordion = withDefaultTheme(AccordionComponent);
 export const AccordionItem = withDefaultTheme(AccordionItemComponent);
-export const NavigationCell = withDefaultTheme(NavigationCellComponent);
-export const NavigationItem = withDefaultTheme(NavigationItemComponent);
 export const CardBanner = withDefaultTheme(CardBannerComponent);
 export const Paper = withDefaultTheme(PaperComponent);
 export const Link = withDefaultTheme(LinkComponent);
@@ -71,4 +70,7 @@ export const ItalicText = withDefaultTheme(ItalicTextComponent);
 export const OrderedList = withDefaultTheme(OrderedListComponent);
 export const UnorderedList = withDefaultTheme(UnorderedListComponent);
 export const Footer = withDefaultTheme(FooterComponent);
+export const LogoList = withDefaultTheme(LogoListComponent);
+export const NavigationDesktop = withDefaultTheme(NavigationDesktopComponent);
+export const NavigationMobile = withDefaultTheme(NavigationMobileComponent);
 export { PortableTextComponentDefault };

package/dist/mocks/image-mocks.d.ts

@@ -28,3 +28,10 @@ export declare const svgMock: {
         extension: string;
     };
 };
+export declare const logoMock: {
+    asset: {
+        description: string;
+        url: string;
+        extension: string;
+    };
+};

package/dist/mocks/image-mocks.js

@@ -30,3 +30,10 @@ export const svgMock = {
         extension: 'svg'
     }
 };
+export const logoMock = {
+    asset: {
+        description: 'lorem ipsum',
+        url: 'https://placehold.co/142x35?text=Logotype',
+        extension: 'svg'
+    }
+};

package/dist/mocks/navigation-mock.d.ts

@@ -0,0 +1,5 @@
+import { NavigationItemModel, NavigationModel, NavigationSectionModel } from '../components/modules/navigation/shared/types/types';
+export declare const mockNavItemsA: NavigationItemModel[];
+export declare const mockNavItemsB: NavigationItemModel[];
+export declare const mockNavSections: NavigationSectionModel[];
+export declare const mockNavigation: NavigationModel;