@hlf-fe/pulmo-ui 1.5.2 → 1.5.4

package/dist/components/buttons/button/button.js

@@ -52,7 +52,6 @@ const StyledButton = styled.button `
   ${({ theme, $inverted, $fullWidth }) => css `
     ${media.M `
       width: ${$fullWidth ? "100%" : "fit-content"};
-      font-size: ${rem(18)};
     `}
 
     &:not(:disabled) {

package/dist/components/icons/toggable-chevron/toggable-chevron.d.ts

@@ -3,10 +3,14 @@ type ToggableChevronProps = {
     disableCircle?: boolean;
     className?: string;
     rotation?: number;
+    width?: number;
+    height?: number;
 };
 type ChevronDownProps = {
     className?: string;
+    width?: number;
+    height?: number;
 };
-export declare const ChevronDownIcon: ({ className }: ChevronDownProps) => import("react/jsx-runtime").JSX.Element;
-export declare const ToggableChevron: ({ toggled, disableCircle, rotation, className, }: ToggableChevronProps) => import("react/jsx-runtime").JSX.Element;
+export declare const ChevronDownIcon: ({ className, width, height }: ChevronDownProps) => import("react/jsx-runtime").JSX.Element;
+export declare const ToggableChevron: ({ toggled, disableCircle, rotation, className, width, height }: ToggableChevronProps) => import("react/jsx-runtime").JSX.Element;
 export {};

package/dist/components/icons/toggable-chevron/toggable-chevron.js

@@ -1,7 +1,7 @@
 import { jsx as _jsx } from "react/jsx-runtime";
 import styled, { css } from "styled-components";
-export const ChevronDownIcon = ({ className }) => (_jsx("svg", { width: "16px", height: "16px", viewBox: "0 0 16 16", version: "1.1", xmlns: "http://www.w3.org/2000/svg", fill: "#333333", className: className, children: _jsx("path", { d: "M2.29289322,5.29289322 C2.65337718,4.93240926 3.22060824,4.90467972 3.61289944,5.20970461 L3.70710678,5.29289322 L8,9.585 L12.2928932,5.29289322 C12.6533772,4.93240926 13.2206082,4.90467972 13.6128994,5.20970461 L13.7071068,5.29289322 C14.0675907,5.65337718 14.0953203,6.22060824 13.7902954,6.61289944 L13.7071068,6.70710678 L8.70710678,11.7071068 C8.34662282,12.0675907 7.77939176,12.0953203 7.38710056,11.7902954 L7.29289322,11.7071068 L2.29289322,6.70710678 C1.90236893,6.31658249 1.90236893,5.68341751 2.29289322,5.29289322 Z" }) }));
-export const ToggableChevron = ({ toggled, disableCircle = true, rotation, className, }) => (_jsx(Chevron, { "$isToggled": toggled, "$disableCircle": disableCircle, "$rotation": rotation, className: className, children: _jsx(ChevronDownIcon, {}) }));
+export const ChevronDownIcon = ({ className, width = 16, height = 16 }) => (_jsx("svg", { width: width, height: height, viewBox: "0 0 16 16", version: "1.1", xmlns: "http://www.w3.org/2000/svg", fill: "#333333", className: className, children: _jsx("path", { d: "M2.29289322,5.29289322 C2.65337718,4.93240926 3.22060824,4.90467972 3.61289944,5.20970461 L3.70710678,5.29289322 L8,9.585 L12.2928932,5.29289322 C12.6533772,4.93240926 13.2206082,4.90467972 13.6128994,5.20970461 L13.7071068,5.29289322 C14.0675907,5.65337718 14.0953203,6.22060824 13.7902954,6.61289944 L13.7071068,6.70710678 L8.70710678,11.7071068 C8.34662282,12.0675907 7.77939176,12.0953203 7.38710056,11.7902954 L7.29289322,11.7071068 L2.29289322,6.70710678 C1.90236893,6.31658249 1.90236893,5.68341751 2.29289322,5.29289322 Z" }) }));
+export const ToggableChevron = ({ toggled, disableCircle = true, rotation, className, width, height }) => (_jsx(Chevron, { "$isToggled": toggled, "$disableCircle": disableCircle, "$rotation": rotation, className: className, children: _jsx(ChevronDownIcon, { width: width, height: height }) }));
 const Chevron = styled.div `
   width: 22px;
   height: 22px;

package/dist/components/layout/accordion/accordion.d.ts

@@ -4,10 +4,11 @@ export type AccordionItemProps = {
     panelId: string;
     regionId: string;
     initiallyExpanded?: boolean;
+    expandIcon?: string;
     children?: ReactNode;
     headingLevel?: "h2" | "h3";
 };
-export declare const AccordionItem: ({ heading, headingLevel, panelId, regionId, initiallyExpanded, children, }: AccordionItemProps) => import("react/jsx-runtime").JSX.Element;
+export declare const AccordionItem: ({ heading, headingLevel, panelId, regionId, initiallyExpanded, expandIcon, children, }: AccordionItemProps) => import("react/jsx-runtime").JSX.Element;
 export declare const Accordion: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components/dist/types").Substitute<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {
     disabled?: boolean;
 }>> & string;

package/dist/components/layout/accordion/accordion.js

@@ -4,6 +4,7 @@ import styled, { css } from "styled-components";
 import { media } from "../../../styles/mixins";
 import { rem } from "../../../styles/units";
 import { ToggablePlusMinusIcon } from "../../../components/icons/toggable-plus-minus-icon/toggable-plus-minus-icon";
+import { ToggableChevron } from "../../../components/icons/toggable-chevron/toggable-chevron";
 var PanelState;
 (function (PanelState) {
     PanelState[PanelState["CLOSED"] = 0] = "CLOSED";
@@ -11,7 +12,7 @@ var PanelState;
     PanelState[PanelState["OPENED"] = 2] = "OPENED";
     PanelState[PanelState["CLOSING"] = 3] = "CLOSING";
 })(PanelState || (PanelState = {}));
-export const AccordionItem = ({ heading, headingLevel, panelId, regionId, initiallyExpanded, children, }) => {
+export const AccordionItem = ({ heading, headingLevel, panelId, regionId, initiallyExpanded, expandIcon, children, }) => {
     const [height, setHeight] = useState(0);
     const [panelState, setPanelState] = useState(!initiallyExpanded ? PanelState.CLOSED : PanelState.OPENING);
     const ref = useRef(null);
@@ -39,7 +40,16 @@ export const AccordionItem = ({ heading, headingLevel, panelId, regionId, initia
         setPanelState(isClosed ? PanelState.OPENING : PanelState.CLOSING);
     };
     const isExpanded = panelState !== PanelState.CLOSED;
-    return (_jsxs(AccordionPanel, { children: [_jsx(StyledHeading, { as: headingLevel, children: _jsxs(StyledButton, { "data-test": `accordion-header${isExpanded ? "-expanded" : ""}`, id: panelId, "aria-expanded": isExpanded, "aria-controls": regionId, onClick: togglePanel, children: [_jsx(Text, { children: heading }), _jsx(StyledToggablePlusMinusIcon, { isOpen: isExpanded })] }) }), _jsx(AccodrionContent, { "data-test": "accordion-content", ref: ref, id: regionId, role: "region", "aria-labelledby": panelId, "$contentHeight": height, "$useAutoHeight": panelState === PanelState.OPENED, onTransitionEnd: onAnimationComplete, children: _jsx(Content, { hidden: !isExpanded, children: children }) })] }));
+    const icon = () => {
+        switch (expandIcon) {
+            case 'arrow':
+                return _jsx(StyledToggableChevron, { toggled: isExpanded, width: 20, height: 20 });
+            default:
+                return _jsx(StyledToggablePlusMinusIcon, { isOpen: isExpanded });
+                ;
+        }
+    };
+    return (_jsxs(AccordionPanel, { children: [_jsx(StyledHeading, { as: headingLevel, children: _jsxs(StyledButton, { "data-test": `accordion-header${isExpanded ? "-expanded" : ""}`, id: panelId, "aria-expanded": isExpanded, "aria-controls": regionId, onClick: togglePanel, children: [_jsx(Text, { children: heading }), icon()] }) }), _jsx(AccodrionContent, { "data-test": "accordion-content", ref: ref, id: regionId, role: "region", "aria-labelledby": panelId, "$contentHeight": height, "$useAutoHeight": panelState === PanelState.OPENED, onTransitionEnd: onAnimationComplete, children: _jsx(Content, { hidden: !isExpanded, children: children }) })] }));
 };
 const AccodrionContent = styled.div `
   overflow: hidden;
@@ -97,11 +107,17 @@ const StyledButton = styled.button `
     padding: ${rem(25)} 0;
   `}
 `;
-const StyledToggablePlusMinusIcon = styled(ToggablePlusMinusIcon) `
+const iconStyles = css `
   cursor: pointer;
   margin-left: auto;
   margin-right: ${rem(10)};
 `;
+const StyledToggablePlusMinusIcon = styled(ToggablePlusMinusIcon) `
+ ${iconStyles}
+`;
+const StyledToggableChevron = styled(ToggableChevron) `
+  ${iconStyles}
+`;
 export const Accordion = styled.div `
   border-bottom: 1px solid rgba(51, 51, 51, 0.2);
   width: 100%;

package/dist/components/layout/accordion/accordion.stories.d.ts

@@ -4,3 +4,4 @@ declare const meta: Meta<typeof Accordion>;
 export default meta;
 type Story = StoryObj<typeof Accordion>;
 export declare const Default: Story;
+export declare const WithArrowIcon: Story;

package/dist/components/layout/accordion/accordion.stories.js

@@ -12,3 +12,6 @@ export default meta;
 export const Default = {
     render: () => (_jsxs(Accordion, { children: [_jsx(AccordionItem, { heading: "In volutpat est eu dolor efficitur", panelId: "1", regionId: "1", children: "Aliquam erat volutpat. Nulla facilisi. Vestibulum eget ullamcorper elit. Praesent mattis arcu ante, in gravida eros pharetra sit amet. Praesent mattis arcu ante, in gravida eros pharetra sit amet. Etiam ac enim lorem. Proin euismod vulputate faucibus." }), _jsx(AccordionItem, { heading: "Vestibulum eget ullamcorper,\r\n        Praesent mattis arcu ante", panelId: "2", regionId: "2", children: "Aliquam erat volutpat. Nulla facilisi. Vestibulum eget ullamcorper, Praesent mattis arcu ante, in gravida eros pharetra sit amet. Etiam ac enim lorem. Proin euismod vulputate faucibus." }), _jsx(AccordionItem, { heading: "In volutpat est eu dolor efficitur", panelId: "3", regionId: "3", children: "Aliquam erat volutpat. Nulla facilisi. Vestibulum eget ullamcorper elit. Praesent mattis arcu ante, in gravida eros pharetra sit amet. Praesent mattis arcu ante, in gravida eros pharetra sit amet. Etiam ac enim lorem. Proin euismod vulputate faucibus." }), _jsx(AccordionItem, { heading: "Vestibulum eget ullamcorper,\r\n        Praesent mattis arcu ante", panelId: "4", regionId: "4", children: "Aliquam erat volutpat. Nulla facilisi. Vestibulum eget ullamcorper, Praesent mattis arcu ante, in gravida eros pharetra sit amet. Etiam ac enim lorem. Proin euismod vulputate faucibus." })] })),
 };
+export const WithArrowIcon = {
+    render: () => (_jsxs(Accordion, { children: [_jsx(AccordionItem, { heading: "In volutpat est eu dolor efficitur", panelId: "1", regionId: "1", expandIcon: "arrow", children: "Aliquam erat volutpat. Nulla facilisi. Vestibulum eget ullamcorper elit. Praesent mattis arcu ante, in gravida eros pharetra sit amet. Praesent mattis arcu ante, in gravida eros pharetra sit amet. Etiam ac enim lorem. Proin euismod vulputate faucibus." }), _jsx(AccordionItem, { heading: "Vestibulum eget ullamcorper,\r\n        Praesent mattis arcu ante", panelId: "2", regionId: "2", expandIcon: "arrow", children: "Aliquam erat volutpat. Nulla facilisi. Vestibulum eget ullamcorper, Praesent mattis arcu ante, in gravida eros pharetra sit amet. Etiam ac enim lorem. Proin euismod vulputate faucibus." }), _jsx(AccordionItem, { heading: "In volutpat est eu dolor efficitur", panelId: "3", regionId: "3", expandIcon: "arrow", children: "Aliquam erat volutpat. Nulla facilisi. Vestibulum eget ullamcorper elit. Praesent mattis arcu ante, in gravida eros pharetra sit amet. Praesent mattis arcu ante, in gravida eros pharetra sit amet. Etiam ac enim lorem. Proin euismod vulputate faucibus." }), _jsx(AccordionItem, { heading: "Vestibulum eget ullamcorper,\r\n        Praesent mattis arcu ante", panelId: "4", regionId: "4", expandIcon: "arrow", children: "Aliquam erat volutpat. Nulla facilisi. Vestibulum eget ullamcorper, Praesent mattis arcu ante, in gravida eros pharetra sit amet. Etiam ac enim lorem. Proin euismod vulputate faucibus." })] })),
+};

package/dist/components/layout/image/image.d.ts

@@ -1,8 +1,8 @@
 import { IGatsbyImageData } from "gatsby-plugin-image";
 export type ImageProps = {
     image: {
-        description: string;
         gatsbyImageData: IGatsbyImageData;
+        altText?: string;
         url?: string;
         extension?: string;
     };

package/dist/components/layout/image/image.js

@@ -4,7 +4,7 @@ import { BREAKPOINT_VALUES } from "../../../styles/theme";
 import { em } from "../../../styles/units";
 const SVG = "svg";
 export const Image = ({ image, imageSmall, className = "", imgClassName = "", width = "auto", height = "auto", bpSmallDevice = BREAKPOINT_VALUES.M, objectPosition = "50% 50%", loading = "lazy", onLoad, }) => {
-    const desc = image?.description;
+    const altText = image?.altText;
     const contentType = image?.extension;
     const fileUrl = image?.url;
     const gatsbyImageData = getImage(image?.gatsbyImageData);
@@ -20,8 +20,8 @@ export const Image = ({ image, imageSmall, className = "", imgClassName = "", wi
         ])
         : gatsbyImageData;
     if (contentType === SVG && fileUrl)
-        return (_jsx("img", { width: width, height: height, className: className, src: fileUrl, alt: desc }));
+        return (_jsx("img", { width: width, height: height, className: className, src: fileUrl, alt: altText }));
     if (images)
-        return (_jsx(GatsbyImage, { className: className, imgClassName: imgClassName, image: images, loading: loading, alt: desc ?? "", objectPosition: objectPosition, onLoad: onLoad }));
+        return (_jsx(GatsbyImage, { className: className, imgClassName: imgClassName, image: images, loading: loading, alt: altText ?? "", objectPosition: objectPosition, onLoad: onLoad }));
     return null;
 };

package/dist/components/layout/image/image.stories.js

@@ -26,7 +26,7 @@ export default meta;
 export const Default = {
     args: {
         image: {
-            description: "Exempelbild",
+            altText: "Exempelbild",
             gatsbyImageData: mockGatsbyImageData,
         },
     },

package/dist/components/modules/logo-list/logo-list.d.ts

@@ -0,0 +1,5 @@
+import { SanityImage } from '../../../models/sanity-types';
+export type LogoListProps = {
+    images: SanityImage[];
+};
+export declare const LogoList: ({ images }: LogoListProps) => import("react/jsx-runtime").JSX.Element;

package/dist/components/modules/logo-list/logo-list.js

@@ -0,0 +1,34 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { Image } from "../../../components/layout/image/image";
+import { Container } from "../../../components/layout/container/container";
+import styled from 'styled-components';
+import { media } from '../../../styles/mixins';
+import { rem } from '../../../styles/units';
+export const LogoList = ({ images }) => {
+    return (_jsx(Container, { children: _jsx(LogoContainer, { children: images?.map((image, i) => {
+                return _jsx(Image, { image: image?.asset }, `${image?.asset?.url}-${i}`);
+            }) }) }));
+};
+const LogoContainer = styled.div `
+  display: grid;
+  grid-template-columns: repeat(2, 1fr);
+  grid-auto-rows: ${rem(110)};
+  grid-gap: ${rem(20)};
+
+  ${media.L `
+    grid-template-columns: repeat(5, 1fr);
+    grid-auto-rows: ${rem(135)};
+  `}
+
+  img {
+    width: 100%;
+    height: ${rem(110)};
+    border-radius: ${rem(4)};
+    box-shadow: 0 ${rem(4)} ${rem(16)} 0 rgba(0, 0, 0, 0.08);
+    padding: ${rem(10)};
+
+    ${media.L `
+      height: ${rem(135)};
+  `}
+  }
+`;

package/dist/components/modules/logo-list/logo-list.stories.d.ts

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

package/dist/components/modules/logo-list/logo-list.stories.js

@@ -0,0 +1,18 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { LogoList } from "./logo-list";
+import { Decorator } from "../../../components/decorator/decorator";
+import { svgMock } from '../../../mocks/image-mocks';
+const meta = {
+    title: "Modules/LogoList",
+    component: LogoList,
+    decorators: [
+        (Story) => (_jsx(Decorator, { children: _jsx(Story, {}) })),
+    ],
+};
+export default meta;
+const images = Array(10).fill(svgMock);
+export const Default = {
+    args: {
+        images,
+    },
+};

package/dist/components/modules/navigation/navigation-desktop/nav-cell/nav-cell.d.ts

@@ -0,0 +1,6 @@
+export type NavigationCellProps = {
+    title: string;
+    active?: boolean;
+    onToggleCell: () => void;
+};
+export declare const NavigationCell: ({ title, active, onToggleCell, }: NavigationCellProps) => import("react/jsx-runtime").JSX.Element;

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

@@ -0,0 +1,69 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { ToggableChevron } from "../../../../../components/icons/toggable-chevron/toggable-chevron";
+import styled, { css } from "styled-components";
+import { media } from "../../../../../styles/mixins";
+import { rem } from "../../../../../styles/units";
+export const NavigationCell = ({ title, active, onToggleCell, }) => (_jsx(StyledListItem, { children: _jsxs(NavCell, { "data-test": "nav-cell", "$active": active, onClick: onToggleCell, children: [title, _jsx(StyledToggle, { toggled: active })] }) }));
+const StyledListItem = styled.li `
+  display: inline-block;
+  height: 100%;
+  padding-right: ${rem(16)};
+
+  ${media.XL `
+    padding-right: ${rem(32)};
+
+    &:last-of-type {
+      padding-right: ${rem(40)};
+    }
+  `}
+`;
+const NavCell = styled.button `
+  padding: 0;
+  border: 0;
+  background: none;
+  cursor: pointer;
+  display: grid;
+  grid-template-columns: 1fr 22px;
+  align-items: center;
+  height: 100%;
+  font-size: ${rem(14)};
+
+  ${media.XL `
+    font-size: ${rem(18)};
+  `}
+
+  p {
+    font-size: inherit;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+    margin: 0;
+  }
+
+  ${({ theme }) => css `
+    color: ${theme.blackLight};
+    font-family: ${theme.valueBold};
+  `};
+
+  ${({ $active }) => $active &&
+    css `
+      ${({ theme }) => css `
+        color: ${theme.red};
+        box-shadow: inset 0 -4px 0 ${theme.red};
+      `};
+    `};
+`;
+const StyledToggle = styled(ToggableChevron).attrs({
+    disableCircle: true,
+}) `
+  margin-left: ${rem(4)};
+
+  svg {
+    ${(props) => props.toggled &&
+    css `
+        ${({ theme }) => css `
+          fill: ${theme.red};
+        `};
+      `};
+  }
+`;

package/dist/components/modules/navigation/navigation-desktop/nav-section/nav-section.d.ts

@@ -0,0 +1,8 @@
+import { NavigationSectionModel } from "../../shared/types/types";
+type Props = {
+    section: NavigationSectionModel;
+    className?: string;
+    closeSection: () => void;
+};
+export declare const NavigationSection: ({ section, className, closeSection }: Props) => import("react/jsx-runtime").JSX.Element;
+export {};

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

@@ -0,0 +1,80 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useState } from "react";
+import { NavigationItem } from "../../shared/nav-item/nav-item";
+import { CardBanner } from "../../../../../components/surfaces/cards/card-banner/card-banner";
+import styled, { css } from "styled-components";
+import { rem } from '../../../../../styles/units';
+export const NavigationSection = ({ section, className, closeSection }) => {
+    const [currentItem, setCurrentItem] = useState();
+    const onToggle = (item) => {
+        setCurrentItem(currentItem?.key !== item?.key ? item : undefined);
+    };
+    const renderColumn = (title, items) => (items ? (_jsxs(NavCol, { children: [_jsx(Header, { children: title }), _jsx(StyledList, { children: items.map((item) => (_jsx(NavigationItem, { model: item, expanded: currentItem?.key === item.key, parent: section.title, onToggle: onToggle, onLinkClick: closeSection }, item.key))) })] })) : _jsx("span", {}));
+    return (_jsx(Wrapper, { "data-test": "nav-section", className: className, children: _jsxs(Content, { children: [_jsxs(NavWrapper, { "data-test": "nav-block", children: [renderColumn(section.column1Title, section.column1Items), renderColumn(section.column2Title, section.column2Items)] }), _jsx(InfoWrapper, { color: section?.backgroundColor?.hex, children: section?.linkBanners && section?.linkBanners?.map((banner, i) => (_jsx(CardBanner, { ...banner, externalUrl: banner?.link?.externalUrl, internalLink: banner?.link?.internalLink?.slug?.current, onClick: closeSection }, `${banner.title.trim()}-${i}`))) })] }) }));
+};
+const Wrapper = styled.div `
+  @keyframes fadeIn {
+    0% { opacity: 0; }
+    100% { opacity: 1; }
+  }
+
+  position: absolute;
+  width: 100%;
+  animation: fadeIn 0.2s;
+`;
+const Content = styled.div `
+  position: absolute;
+  width: 100%;
+  display: grid;
+  grid-template-columns: 55% 45%;
+  max-width: 1114px;
+  left: 50%;
+  transform: translateX(-50%);
+`;
+const NavWrapper = styled.div `
+  display: grid;
+  grid-template-columns: 1fr 1fr;
+  grid-column-gap: ${rem(20)};
+  background-color: white;
+  padding: ${rem(32)} ${rem(62)} ${rem(56)} ${rem(45)};
+`;
+const InfoWrapper = styled.div `
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  padding: ${rem(45)};
+  background-color: white;
+
+  ${({ color }) => color && css `
+    background-color: ${color};
+  `};
+
+  > * {
+    &:first-child {
+        margin-bottom: ${rem(24)};
+    }
+  }
+`;
+const NavCol = styled.div `
+  display: flex;
+  flex-direction: column;
+  overflow: hidden;
+`;
+const StyledList = styled.ul `
+  margin: 0;
+  padding: 0;
+`;
+const Header = styled.h2 `
+  font-size: ${rem(24)};
+  margin: 0;
+  overflow: hidden;
+  white-space: nowrap;
+  text-overflow: ellipsis;
+  border-bottom: 1px solid ${({ theme }) => theme.grayPale};
+  padding-bottom: 2px;
+
+  ${({ theme }) => css `
+    color: ${theme.blackLight};
+    font-family: ${theme.valueBold};
+  `};
+`;

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

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

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

@@ -0,0 +1,139 @@
+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?.internalLink?.slug?.current, href: ctaButton?.externalUrl, 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 `
+  margin-top: ${rem(4)};
+`;
+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;
+  max-width: ${rem(264)};
+  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;