@hlf-fe/pulmo-ui 1.5.9 → 1.5.11

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

@@ -8,6 +8,7 @@ export type ContainerProps = {
     innerContainerWidth?: string;
     alignBlock?: "center" | "left";
     innerWidth?: number;
+    gutters?: boolean;
 } & CSSTypes;
 export declare const Container: import("react").ForwardRefExoticComponent<{
     children: ReactNode;
@@ -16,5 +17,6 @@ export declare const Container: import("react").ForwardRefExoticComponent<{
     innerContainerWidth?: string;
     alignBlock?: "center" | "left";
     innerWidth?: number;
+    gutters?: boolean;
 } & CSSTypes & import("react").RefAttributes<HTMLDivElement>>;
 export {};

package/dist/components/layout/container/container.js

@@ -1,6 +1,6 @@
 import { jsx as _jsx } from "react/jsx-runtime";
 import { forwardRef } from "react";
-import { siteWidthRow, siteWidthRowMd, siteWidthRowXL, siteWidthRowS, siteWidthRowAuto, } from "../../../styles/mixins";
+import { siteWidthRow, siteWidthRowMd, siteWidthRowXL, siteWidthRowS, siteWidthRowAuto, siteWidthOnly, } from "../../../styles/mixins";
 import { rem } from "../../../styles/units";
 import styled from "styled-components";
 const MAX_WIDTH = {
@@ -22,14 +22,15 @@ const getMaxWidth = (size) => {
 const getInnerWidth = (size) => {
     return INNER_WIDTH?.[size];
 };
-export const Container = forwardRef(({ children, className, maxWidth = "lg", position = "static", display = "block", alignBlock = "center", innerWidth, }, ref) => {
+export const Container = forwardRef(({ children, className, maxWidth = "lg", position = "static", display = "block", alignBlock = "center", innerWidth, gutters = true, }, ref) => {
     const containerWidth = alignBlock === "left" ? "lg" : maxWidth;
     const innerContainerWidth = alignBlock == "left" ? getInnerWidth(maxWidth) : innerWidth;
     const content = innerContainerWidth ? (_jsx(Inner, { "$innerContainerWidth": innerContainerWidth, children: children })) : (children);
-    return (_jsx(Div, { ref: ref, className: className, "$maxWidth": getMaxWidth(containerWidth), "$display": display, "$position": position, children: content }));
+    return (_jsx(Div, { ref: ref, className: className, "$maxWidth": getMaxWidth(containerWidth), "$display": display, "$position": position, "$gutters": gutters, "$size": containerWidth, children: content }));
 });
 const Div = styled.div `
-  ${({ $maxWidth }) => $maxWidth};
+  ${({ $maxWidth, $gutters }) => $gutters && $maxWidth};
+  ${({ $gutters, $size }) => !$gutters && $size && siteWidthOnly($size)};
   display: ${({ $display }) => $display};
   position: ${({ $position }) => $position};
 `;

package/dist/components/modules/email-signup-form/email-signup-form.js

@@ -24,43 +24,43 @@ export const EmailSignupForm = ({ heading, description, localeText, onSubmit, lo
     return (_jsx(Container, { children: !success ? (_jsxs(Box, { children: [heading && _jsx(Heading, { children: heading }), description && _jsx(Text, { children: description }), _jsx(FormLabel, { htmlFor: "email", children: emailLabel }), _jsxs(TextFieldAndButton, { children: [_jsx(TextField, { type: "email", name: "email", errors: errors, register: register("email") }), _jsx(StyledLoadingButton, { onClick: handleSubmit(({ email }) => onSubmit(email)), children: sendButtonText, disabled: loading, loading: loading, btnSize: "l", fullWidthMobile: true })] }), failed && _jsx(StyledAlert, { severity: "error", children: errorMessage })] })) : (_jsx(BoxCenter, { children: _jsx(Heading, { children: successMessage }) })) }));
 };
 const Container = styled.form ``;
-const TextFieldAndButton = styled.div `
-  display: flex;
-  flex-direction: column;
-  width: 100%;
-
-  ${media.L `
-    flex-direction: row;
-  `}
+const TextFieldAndButton = styled.div `
+  display: flex;
+  flex-direction: column;
+  width: 100%;
+
+  ${media.L `
+    flex-direction: row;
+  `}
 `;
 const Box = styled.div ``;
-const BoxCenter = styled(Box) `
-  display: flex;
-  width: 100%;
-  justify-content: center;
-  align-items: center;
+const BoxCenter = styled(Box) `
+  display: flex;
+  width: 100%;
+  justify-content: center;
+  align-items: center;
 `;
-const Heading = styled.h2 `
-  font-family: ${({ theme }) => theme.valueBold};
-  font-size: ${rem(32)};
-  color: ${({ theme }) => theme.blackLight};
-  line-height: 1.5;
-  margin: 0;
+const Heading = styled.h2 `
+  font-family: ${({ theme }) => theme.valueBold};
+  font-size: ${rem(32)};
+  color: ${({ theme }) => theme.blackLight};
+  line-height: 1.5;
+  margin: 0;
 `;
-const Text = styled.p `
-  color: ${({ theme }) => theme.blackLight};
-  font-size: ${rem(18)};
+const Text = styled.p `
+  color: ${({ theme }) => theme.blackLight};
+  font-size: ${rem(18)};
 `;
-const StyledAlert = styled(Alert) `
-  margin-top: ${rem(15)};
+const StyledAlert = styled(Alert) `
+  margin-top: ${rem(15)};
 `;
-const StyledLoadingButton = styled(LoadingButton) `
-  width: 100%;
-  margin-top: ${rem(15)};
-
-  ${media.L `
-    margin-left: ${rem(15)};
-    margin-top: 0;
-    width: auto;
-  `}
+const StyledLoadingButton = styled(LoadingButton) `
+  width: 100%;
+  margin-top: ${rem(15)};
+
+  ${media.L `
+    margin-left: ${rem(15)};
+    margin-top: 0;
+    width: auto;
+  `}
 `;

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

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

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

@@ -1,9 +1,15 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Link } from 'gatsby';
 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 })] }) }));
+export const NavigationCell = ({ title, active, url, onToggleCell, }) => {
+    if (url) {
+        return (_jsx(StyledListItem, { children: _jsx(NavCellAsLink, { "data-test": "nav-cell-link", to: url, children: title }) }));
+    }
+    return (_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%;
@@ -17,7 +23,7 @@ const StyledListItem = styled.li `
     }
   `}
 `;
-const NavCell = styled.button `
+const NavCellStyles = css `
   padding: 0;
   border: 0;
   background: none;
@@ -27,6 +33,7 @@ const NavCell = styled.button `
   align-items: center;
   height: 100%;
   font-size: ${rem(14)};
+  text-decoration: none;
 
   ${media.XL `
     font-size: ${rem(18)};
@@ -44,6 +51,9 @@ const NavCell = styled.button `
     color: ${theme.blackLight};
     font-family: ${theme.valueBold};
   `};
+`;
+const NavCell = styled.button `
+  ${NavCellStyles}
 
   ${({ $active }) => $active &&
     css `
@@ -53,6 +63,10 @@ const NavCell = styled.button `
       `};
     `};
 `;
+const NavCellAsLink = styled(Link) `
+  ${NavCellStyles}
+  grid-template-columns: 1fr;
+`;
 const StyledToggle = styled(ToggableChevron).attrs({
     disableCircle: true,
 }) `

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

@@ -6,6 +6,7 @@ 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 { isNavLink } from '../shared/types/types';
 import styled, { css } from 'styled-components';
 import { rem } from '../../../../styles/units';
 export const NavigationDesktop = ({ logotype, mainMenuItems, topMenuItems, ctaButton, localeText = {
@@ -14,11 +15,22 @@ export const NavigationDesktop = ({ logotype, mainMenuItems, topMenuItems, ctaBu
     const [currentSection, setCurrentSection] = useState();
     const [isSearchOpen, setIsSearchOpen] = useState(false);
     const { ariaLabelHome } = localeText;
-    const onOpenSection = (section) => {
-        const sectionToShow = currentSection?.key !== section?.key ? section : undefined;
+    const onOpenSection = (item) => {
+        if (item && isNavLink(item)) {
+            setCurrentSection(undefined);
+            return;
+        }
+        const sectionModel = item;
+        const sectionToShow = currentSection?.key !== sectionModel?.key ? sectionModel : 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: "127", height: "32" }) })), _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, target: ctaButton?.openInNewWindow ? "_blank" : "_self", 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: () => {
+    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: "127", height: "32" }) })), _jsx(StyledList, { "data-test": "nav-list", children: mainMenuItems?.map(item => {
+                                    const isLink = isNavLink(item);
+                                    const title = isLink ? item.webUrlName : item.title;
+                                    const url = isLink ? (item.externalUrl || item.internalLink?.slug?.current) : undefined;
+                                    const key = isLink ? item.webUrlName : item.key;
+                                    return (_jsx(NavigationCell, { active: !isLink && currentSection?.key === item.key, title: title || '', url: url, onToggleCell: () => onOpenSection(item) }, key || (isLink ? item.webUrlName : item.title)));
+                                }) }), ctaButton && (_jsxs(StyledButton, { dataTest: "nav-cta", to: ctaButton?.internalLink?.slug?.current, href: ctaButton?.externalUrl, target: ctaButton?.openInNewWindow ? "_blank" : "_self", 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);
                 } }))] }));

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

@@ -1,7 +1,7 @@
 import { WebPageUrl } from "../../../../models/web-page-url";
-import { NavigationSectionModel } from "../shared/types/types";
+import { MainMenuItemModel } from "../shared/types/types";
 type Props = {
-    mainMenuItems?: NavigationSectionModel[];
+    mainMenuItems?: MainMenuItemModel[];
     topMenuItems?: WebPageUrl[];
     scrollToTop: () => void;
     closeMenu: () => void;

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

@@ -4,6 +4,7 @@ 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 { isNavLink } from "../shared/types/types";
 import styled, { css } from "styled-components";
 import { rem } from '../../../../styles/units';
 const NavigationPanel = ({ mainMenuItems, topMenuItems, scrollToTop, closeMenu, goBackText }) => {
@@ -11,13 +12,17 @@ const NavigationPanel = ({ mainMenuItems, topMenuItems, scrollToTop, closeMenu,
     const [currentItem, setCurrentItem] = useState();
     const [isShowingSection, setIsShowingSection] = useState(false);
     const [isAnimating, setIsAnimating] = useState(false);
-    const toggleSection = (section) => {
+    const toggleSection = (item) => {
         if (isAnimating)
             return;
-        if (section) {
-            setCurrentSection(section);
+        if (item && isNavLink(item)) {
+            closeMenu();
+            return;
+        }
+        if (item) {
+            setCurrentSection(item);
         }
-        setIsShowingSection(!!section);
+        setIsShowingSection(!!item);
         setIsAnimating(true);
         scrollToTop();
     };
@@ -25,7 +30,13 @@ const NavigationPanel = ({ mainMenuItems, topMenuItems, scrollToTop, closeMenu,
         setCurrentItem(currentItem?.key !== item?.key ? item : undefined);
     };
     const renderColumn = (title, items) => (items && (_jsxs(_Fragment, { children: [title && _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}`))) })] })] }));
+    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((item) => {
+                                const isLink = isNavLink(item);
+                                const title = isLink ? item.webUrlName : item.title;
+                                const url = isLink ? (item.externalUrl || item.internalLink?.slug?.current) : undefined;
+                                const key = isLink ? item.webUrlName : item.key;
+                                return (_jsx("li", { children: isLink ? (_jsx(NavLink, { to: url || "/", "data-test": "nav-cell-link", onClick: closeMenu, children: _jsx("p", { children: title }) })) : (_jsxs(NavCell, { "data-test": "nav-cell", onClick: () => toggleSection(item), children: [_jsx("p", { children: title }), _jsx(Chevron, {})] })) }, key || (isLink ? item.webUrlName : item.title)));
+                            }) }), !!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%;
@@ -65,7 +76,7 @@ const StyledList = styled.ul `
     }
   }
 `;
-const NavCell = styled.button `
+const NavCellStyles = css `
   padding: 0;
   border: 0;
   background: none;
@@ -75,6 +86,7 @@ const NavCell = styled.button `
   align-items: center;
   width: 100%;
   font-size: ${rem(20)};
+  text-decoration: none;
 
   p {
     font-size: inherit;
@@ -90,6 +102,13 @@ const NavCell = styled.button `
     font-family: ${theme.valueBold};
   `};
 `;
+const NavCell = styled.button `
+  ${NavCellStyles}
+`;
+const NavLink = styled(Link) `
+  ${NavCellStyles}
+  grid-template-columns: 1fr;
+`;
 const Chevron = styled(ToggableChevron).attrs({
     rotation: -90,
 }) `

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

@@ -28,9 +28,10 @@ export type LinkBanner = {
     image?: SanityImage;
     link?: WebPageUrl;
 };
+export type MainMenuItemModel = NavigationSectionModel | WebPageUrl;
 export type NavigationModel = {
     topMenuItems?: WebPageUrl[];
-    mainMenuItems?: NavigationSectionModel[];
+    mainMenuItems?: MainMenuItemModel[];
     logotype?: SanityImage;
     ctaButton?: WebPageUrl;
     __typename: string;
@@ -41,3 +42,4 @@ export type NavigationModel = {
     isMenuVisible?: boolean;
     menuRef?: RefObject<HTMLElement>;
 };
+export declare const isNavLink: (item: MainMenuItemModel) => item is WebPageUrl;

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

@@ -1 +1,3 @@
-export {};
+export const isNavLink = (item) => {
+    return item.webUrlName !== undefined;
+};

package/dist/index.d.ts

@@ -41,11 +41,12 @@ export declare const EmailSignupForm: import("react").FC<EmailSignupFormProps>;
 export declare const Image: import("react").FC<ImageProps>;
 export declare const Container: import("react").ForwardRefExoticComponent<{
     children: import("react").ReactNode;
-    maxWidth?: "auto" | "sm" | "md" | "lg" | "xl";
+    maxWidth?: "sm" | "md" | "lg" | "xl" | "auto";
     className?: string;
     innerContainerWidth?: string;
     alignBlock?: "center" | "left";
     innerWidth?: number;
+    gutters?: boolean;
 } & {
     position?: import("csstype").Property.Position | undefined;
     display?: import("csstype").Property.Display | undefined;

package/dist/styles/mixins.d.ts

@@ -18,6 +18,13 @@ export declare const siteWidthRowMd: () => import("styled-components").RuleSet<o
 export declare const siteWidthRow: () => import("styled-components").RuleSet<object>;
 export declare const siteWidthRowXL: () => import("styled-components").RuleSet<object>;
 export declare const siteWidthRowAuto: () => import("styled-components").RuleSet<object>;
+/**
+ * Returns only max-width without any gutters (margin/padding).
+ * Use this when embedding content inside an existing container.
+ * Includes margin: 0 auto for centering when max-width is set.
+ */
+export type SiteWidthSize = "sm" | "md" | "lg" | "xl" | "auto";
+export declare const siteWidthOnly: (size: SiteWidthSize) => import("styled-components").RuleSet<object>;
 export declare const fullWidthRow: () => import("styled-components").RuleSet<object>;
 export declare const fontSize: {
     XS: () => import("styled-components").RuleSet<object>;

package/dist/styles/mixins.js

@@ -165,6 +165,21 @@ export const siteWidthRowXL = () => css `
 export const siteWidthRowAuto = () => css `
   width: auto;
 `;
+const SITE_WIDTH_VALUES = {
+    sm: VARIABLES.siteWidthS,
+    md: rem(800),
+    lg: VARIABLES.siteWidth,
+    xl: VARIABLES.siteWidthXL,
+    auto: "none",
+};
+export const siteWidthOnly = (size) => css `
+  max-width: ${SITE_WIDTH_VALUES[size]};
+  ${size !== "auto" &&
+    css `
+    margin-left: auto;
+    margin-right: auto;
+  `}
+`;
 export const fullWidthRow = () => css `
   padding-top: ${SPACING.spacingL};
   padding-right: ${SPACING.spacingXS};

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@hlf-fe/pulmo-ui",
   "private": false,
-  "version": "1.5.9",
+  "version": "1.5.11",
   "type": "module",
   "main": "dist/index.js",
   "module": "dist/index.js",