@hlf-fe/pulmo-ui 1.5.2 → 1.5.3

package/dist/components/buttons/link-button/link-button.d.ts

@@ -0,0 +1,25 @@
+import { ReactNode } from "react";
+export type LinkButtonProps = {
+    type?: "button" | "reset" | "submit";
+    icon?: ReactNode;
+    className?: string;
+    inverted?: boolean;
+    disabled?: boolean;
+    onClick?: () => void;
+    btnSize?: "s" | "m" | "l";
+    fullWidth?: boolean;
+    fullWidthMobile?: boolean;
+    dataTest?: string;
+    tabIndex?: number;
+    to?: string;
+    href?: string;
+    target?: "_blank" | "_self" | "_parent" | "_top";
+    children: ReactNode;
+};
+export type StyledLinkButtonProps = {
+    inverted?: boolean;
+    btnSize?: "s" | "m" | "l";
+    fullWidthMobile?: boolean;
+    fullWidth?: boolean;
+};
+export declare const LinkButton: ({ type, onClick, className, inverted, disabled, btnSize, fullWidth, fullWidthMobile, dataTest, tabIndex, children, to, href, target, }: LinkButtonProps) => import("react/jsx-runtime").JSX.Element;

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

@@ -0,0 +1,80 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import styled, { css } from "styled-components";
+import { media, buttonSize } from "../../../styles/mixins";
+import { rem } from "../../../styles/units";
+import { Link } from "gatsby";
+export const LinkButton = ({ type = "submit", onClick, className = "", inverted = false, disabled = false, btnSize = "m", fullWidth, fullWidthMobile, dataTest, tabIndex, children, to, href, target, }) => {
+    const commonProps = {
+        className,
+        onClick,
+        inverted,
+        btnSize,
+        fullWidth,
+        fullWidthMobile,
+        "data-test": dataTest,
+        tabIndex,
+    };
+    const asElement = to ? Link : href ? "a" : "button";
+    return (_jsx(StyledLinkButton, { as: asElement, ...commonProps, ...(to ? { to } : {}), ...(href
+            ? {
+                href,
+                target,
+                rel: target === "_blank" ? "noopener noreferrer" : undefined,
+            }
+            : {}), ...(!to && !href ? { type, disabled } : {}), children: children }));
+};
+const StyledLinkButton = styled.button `
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  gap: ${rem(10)};
+  font-family: ${({ theme }) => theme.valueBold};
+  font-weight: 400;
+  text-decoration: none;
+  color: ${({ theme, inverted }) => (inverted ? theme.red : theme.white)};
+  width: ${({ fullWidthMobile }) => (fullWidthMobile ? "100%" : "fit-content")};
+  background-color: ${({ theme, inverted }) => inverted ? theme.white : theme.red};
+  line-height: 2.5;
+  border-radius: ${rem(5)};
+  border-color: ${({ theme, inverted }) => inverted ? theme.red : "transparent"};
+  transition: background-color 0.3s ease-out;
+  border-style: solid;
+
+  &:disabled {
+    cursor: default;
+    opacity: 0.6;
+  }
+
+  ${({ btnSize }) => {
+    switch (btnSize) {
+        case "s":
+            return buttonSize.S;
+        case "m":
+            return buttonSize.M;
+        case "l":
+            return buttonSize.L;
+        default:
+            return buttonSize.M;
+    }
+}}
+
+  ${({ theme, inverted, fullWidth }) => css `
+    ${media.M `
+      width: ${fullWidth ? "100%" : "fit-content"};
+    `}
+
+    &:not(:disabled) {
+      ${media.L `
+        &:hover, :active, :focus-visible {
+          background-color: ${inverted ? theme.red : theme.redHover};
+          color: ${theme.white};
+        }
+
+        &:focus-visible {
+          outline: ${rem(2)} solid ${theme.blackLight};
+          outline-offset: ${rem(2)};
+        }
+      `};
+    }
+  `};
+`;

package/dist/components/buttons/link-button/link-button.stories.d.ts

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

package/dist/components/buttons/link-button/link-button.stories.js

@@ -0,0 +1,17 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { LinkButton } from "./link-button";
+import { Decorator } from "../../../components/decorator/decorator";
+const meta = {
+    title: "Buttons/LinkButton",
+    component: LinkButton,
+    decorators: [
+        (Story) => (_jsx(Decorator, { children: _jsx(Story, {}) })),
+    ],
+};
+export default meta;
+export const Default = {
+    args: {
+        inverted: false,
+        children: "Button Text",
+    },
+};

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

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

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

@@ -0,0 +1,55 @@
+import { jsx as _jsx, jsxs as _jsxs } 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 ImageList = ({ heading, images }) => {
+    return (_jsx(OuterContainer, { children: _jsxs(StyledContainer, { children: [heading && _jsx(Heading, { children: heading }), _jsx(LogoContainer, { children: images?.map((image, i) => {
+                        return _jsx(Image, { image: image?.asset }, `${image?.asset?.url}-${i}`);
+                    }) })] }) }));
+};
+const OuterContainer = styled.div `
+  background-color: ${({ theme }) => theme.white};
+`;
+const StyledContainer = styled(Container) `
+  margin-bottom: 0; 
+`;
+const LogoContainer = styled.div `
+  display: grid;
+  grid-template-columns: repeat(2, 1fr);
+  grid-auto-rows: ${rem(110)};
+  grid-gap: ${rem(20)};
+  padding: ${rem(32)} 0 ${rem(40)};
+
+  ${media.L `
+    grid-template-columns: repeat(5, 1fr);
+    grid-auto-rows: ${rem(135)};
+    padding: ${rem(32)} 0 ${rem(48)};
+  `}
+
+  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)};
+  `}
+  }
+`;
+const Heading = styled.h2 `
+  font-family: ${({ theme }) => theme.valueRegular};
+  font-size: ${rem(16)};
+  font-weight: normal;
+  color: ${({ theme }) => theme.blackLight};
+  margin: 0;
+  padding-top: ${rem(32)};
+
+  ${media.M `
+    font-size: ${rem(18)};
+    text-align: center; 
+  `}
+`;

package/dist/components/layout/image-list/image-list.stories.d.ts

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

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

@@ -0,0 +1,19 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { ImageList } from "./image-list";
+import { Decorator } from "../../../components/decorator/decorator";
+import { svgMock } from '../../../mocks/image-mocks';
+const meta = {
+    title: "Layout/ImageList",
+    component: ImageList,
+    decorators: [
+        (Story) => (_jsx(Decorator, { children: _jsx(Story, {}) })),
+    ],
+};
+export default meta;
+const images = Array(10).fill(svgMock);
+export const Default = {
+    args: {
+        heading: 'Lorem ipsum dolor sit amet',
+        images,
+    },
+};

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-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.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) => (_jsx(CardBanner, { ...banner, externalUrl: banner?.link?.externalUrl, internalLink: banner?.link?.internalLink?.slug?.current, onClick: closeSection }, banner.title.trim()))) })] }) }));
+};
+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/nav-section.d.ts

@@ -0,0 +1,8 @@
+import { NavigationSectionModel } from "../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.js

@@ -0,0 +1,80 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useState } from "react";
+import styled, { css } from "styled-components";
+import { NavigationItem } from "../../../../components/navigation/nav-item/nav-item";
+import { CardBanner } from "../../../../components/surfaces/cards/card-banner/card-banner";
+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) => (_jsx(CardBanner, { ...banner, externalUrl: banner?.link?.externalUrl, internalLink: banner?.link?.internalLink?.slug?.current, onClick: closeSection }, banner.title.trim()))) })] }) }));
+};
+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;