@hlf-fe/pulmo-ui 1.1.0 → 1.2.0

package/dist/components/icons/external-icon/external-icon.d.ts

@@ -0,0 +1,5 @@
+type ExternalIconType = {
+    className?: string;
+};
+export declare const ExternalIcon: ({ className }: ExternalIconType) => import("react/jsx-runtime").JSX.Element;
+export {};

package/dist/components/icons/external-icon/external-icon.js

@@ -0,0 +1,2 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+export const ExternalIcon = ({ className = "" }) => (_jsx("svg", { className: className, width: "16px", height: "16px", viewBox: "0 0 16 16", version: "1.1", xmlns: "http://www.w3.org/2000/svg", children: _jsx("g", { stroke: "none", "stroke-width": "1", fill: "none", fillRule: "evenodd", children: _jsx("g", { transform: "translate(-428.000000, -10860.000000)", fill: "currentColor", fillRule: "nonzero", children: _jsx("path", { d: "M433,10861 C433.552285,10861 434,10861.4477 434,10862 C434,10862.5523 433.552285,10863 433,10863 L431,10863 C430.447715,10863 430,10863.4477 430,10864 L430,10873 C430,10873.5523 430.447715,10874 431,10874 L440,10874 C440.552285,10874 441,10873.5523 441,10873 L441,10871 C441,10870.4477 441.447715,10870 442,10870 C442.552285,10870 443,10870.4477 443,10871 L443,10873 C443,10874.6569 441.656854,10876 440,10876 L431,10876 C429.343146,10876 428,10874.6569 428,10873 L428,10864 C428,10862.3431 429.343146,10861 431,10861 L433,10861 Z M443,10860 L443.019354,10860.0002 C443.042681,10860.0006 443.065995,10860.0019 443.08925,10860.004 L443,10860 C443.05062,10860 443.100362,10860.0038 443.148961,10860.011 C443.165949,10860.0136 443.183375,10860.0167 443.200726,10860.0202 C443.222746,10860.0246 443.244436,10860.0298 443.26584,10860.0357 C443.281463,10860.0401 443.296851,10860.0447 443.312143,10860.0497 C443.331798,10860.0561 443.351579,10860.0633 443.371059,10860.0711 C443.388796,10860.0782 443.406098,10860.0857 443.423222,10860.0937 C443.443891,10860.1034 443.464294,10860.1138 443.484277,10860.1249 C443.496394,10860.1315 443.508613,10860.1386 443.520709,10860.146 C443.546275,10860.1617 443.571131,10860.1785 443.595159,10860.1963 C443.602603,10860.2018 443.609842,10860.2073 443.617022,10860.2129 C443.680182,10860.2626 443.737448,10860.3198 443.787214,10860.3832 L443.707107,10860.2929 C443.742501,10860.3283 443.774687,10860.3657 443.803665,10860.4047 C443.82151,10860.4289 443.838281,10860.4537 443.853933,10860.4793 C443.861393,10860.4914 443.868501,10860.5036 443.875329,10860.5159 C443.886206,10860.5357 443.896623,10860.5561 443.906346,10860.5769 C443.914321,10860.5939 443.921804,10860.6112 443.928775,10860.6287 C443.936684,10860.6484 443.943878,10860.6682 443.950453,10860.6883 C443.955271,10860.7031 443.959902,10860.7185 443.964155,10860.734 C443.970166,10860.7556 443.97536,10860.7773 443.979835,10860.7992 C443.983298,10860.8166 443.986372,10860.8341 443.988982,10860.8515 C443.992033,10860.8715 443.994467,10860.8921 443.996262,10860.9129 C443.997844,10860.9317 443.998905,10860.9497 443.999483,10860.9677 C443.999818,10860.9778 444,10860.9889 444,10861 L444,10867 C444,10867.5523 443.552285,10868 443,10868 C442.447715,10868 442,10867.5523 442,10867 L442,10863.414 L433.707107,10871.7071 C433.316582,10872.0976 432.683418,10872.0976 432.292893,10871.7071 C431.902369,10871.3166 431.902369,10870.6834 432.292893,10870.2929 L440.584,10862 L437,10862 C436.487164,10862 436.064493,10861.614 436.006728,10861.1166 L436,10861 C436,10860.4477 436.447715,10860 437,10860 L443,10860 Z" }) }) }) }));

package/dist/components/icons/external-icon/external-icon.stories.d.ts

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

package/dist/components/icons/external-icon/external-icon.stories.js

@@ -0,0 +1,14 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { ExternalIcon } from "./external-icon";
+import { Decorator } from "../../../components/decorator/decorator";
+const meta = {
+    title: "Icons/ExternalIcon",
+    component: ExternalIcon,
+    decorators: [
+        (Story) => (_jsx(Decorator, { children: _jsx(Story, {}) })),
+    ],
+};
+export default meta;
+export const Default = {
+    args: {},
+};

package/dist/components/icons/hamburger-icon/hamburger-icon.d.ts

@@ -0,0 +1 @@
+export declare const HamburgerIcon: () => import("react/jsx-runtime").JSX.Element;

package/dist/components/icons/hamburger-icon/hamburger-icon.js

@@ -0,0 +1,2 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+export const HamburgerIcon = () => (_jsx("svg", { width: "30px", height: "19px", viewBox: "0 0 30 19", fill: "#333333", version: "1.1", xmlns: "http://www.w3.org/2000/svg", children: _jsx("g", { stroke: "none", strokeWidth: "1", fillRule: "evenodd", children: _jsx("g", { transform: "translate(-326.000000, -113.000000)", children: _jsx("g", { transform: "translate(0.000000, 94.000000)", children: _jsx("path", { d: "M326,19 L356,19 L356,22 L326,22 Z M326,27 L356,27 L356,30 L326,30 Z M326,35 L356,35 L356,38 L326,38 Z" }) }) }) }) }));

package/dist/components/icons/hamburger-icon/hamburger-icon.stories.d.ts

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

package/dist/components/icons/hamburger-icon/hamburger-icon.stories.js

@@ -0,0 +1,14 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { HamburgerIcon } from "./hamburger-icon";
+import { Decorator } from "../../../components/decorator/decorator";
+const meta = {
+    title: "Icons/HamburgerIcon",
+    component: HamburgerIcon,
+    decorators: [
+        (Story) => (_jsx(Decorator, { children: _jsx(Story, {}) })),
+    ],
+};
+export default meta;
+export const Default = {
+    args: {},
+};

package/dist/components/icons/heart-icon/heart-icon.d.ts

@@ -0,0 +1 @@
+export declare const HeartIcon: () => import("react/jsx-runtime").JSX.Element;

package/dist/components/icons/heart-icon/heart-icon.js

@@ -0,0 +1,2 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+export const HeartIcon = () => (_jsx("svg", { width: "20px", height: "18px", viewBox: "0 0 20 18", version: "1.1", xmlns: "http://www.w3.org/2000/svg", children: _jsx("g", { id: "Page-1", stroke: "none", strokeWidth: "1", fill: "none", fillRule: "evenodd", children: _jsx("g", { id: "navigation_1440_1", transform: "translate(-337.000000, -220.000000)", fill: "#ED1B2F", fillRule: "nonzero", children: _jsx("g", { id: "Group-23", transform: "translate(0.000000, 128.000000)", children: _jsx("g", { id: "Group-16", transform: "translate(128.000000, 0.000000)", children: _jsx("g", { id: "Group-15", transform: "translate(80.000000, 32.000000)", children: _jsx("path", { d: "M143.961126,60.790431 C142.253052,60.6643448 140.432682,61.3962357 139.210237,62.6994547 L139.134389,62.7802287 L139.05854,62.6994547 C137.927704,61.4927704 136.283659,60.7766403 134.690836,60.7766403 C134.562779,60.7766403 134.434723,60.7815655 134.307652,60.790431 C132.310959,60.9381882 130.761478,62.1694987 130.050273,64.1691469 C129.145013,66.7253474 130.275849,69.6056288 133.414213,72.7311873 C135.013394,74.2978159 136.778889,75.6851081 138.679296,76.8683905 L138.954125,77.0319085 C139.065219,77.0979816 139.203558,77.0979816 139.314653,77.0319085 L139.589481,76.8683905 C141.489053,75.6839171 143.254424,74.2967226 144.854565,72.7311873 C147.991944,69.6056288 149.123764,66.7223923 148.21752,64.1691469 C147.5073,62.1694987 145.954864,60.9401583 143.961126,60.790431 Z", id: "heart_icon_red" }) }) }) }) }) }) }));

package/dist/components/icons/heart-icon/heart-icon.stories.d.ts

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

package/dist/components/icons/heart-icon/heart-icon.stories.js

@@ -0,0 +1,12 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { HeartIcon } from "./heart-icon";
+import { Decorator } from "../../../components/decorator/decorator";
+const meta = {
+    title: "Icons/HeartIcon",
+    component: HeartIcon,
+    decorators: [
+        (Story) => (_jsx(Decorator, { children: _jsx(Story, {}) })),
+    ],
+};
+export default meta;
+export const Default = {};

package/dist/components/icons/menu-close-icon/menu-close-icon.d.ts

@@ -0,0 +1 @@
+export declare const MenuCloseIcon: () => import("react/jsx-runtime").JSX.Element;

package/dist/components/icons/menu-close-icon/menu-close-icon.js

@@ -0,0 +1,2 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+export const MenuCloseIcon = () => (_jsx("svg", { width: "24px", height: "25px", viewBox: "0 0 24 25", version: "1.1", fill: "#333333", xmlns: "http://www.w3.org/2000/svg", children: _jsx("g", { stroke: "none", strokeWidth: "1", fillRule: "evenodd", children: _jsx("g", { transform: "translate(-329.000000, -110.000000)", children: _jsx("path", { d: "M350.545942,110.832738 L352.667262,112.954058 L343.120738,122.499738 L352.667262,132.045942 L350.545942,134.167262 L340.999738,124.620738 L331.454058,134.167262 L329.332738,132.045942 L338.878738,122.499738 L329.332738,112.954058 L331.454058,110.832738 L340.999738,120.378738 L350.545942,110.832738 Z" }) }) }) }));

package/dist/components/icons/menu-close-icon/menu-close-icon.stories.d.ts

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

package/dist/components/icons/menu-close-icon/menu-close-icon.stories.js

@@ -0,0 +1,14 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { MenuCloseIcon } from "./menu-close-icon";
+import { Decorator } from "../../../components/decorator/decorator";
+const meta = {
+    title: "Icons/MenuCloseIcon",
+    component: MenuCloseIcon,
+    decorators: [
+        (Story) => (_jsx(Decorator, { children: _jsx(Story, {}) })),
+    ],
+};
+export default meta;
+export const Default = {
+    args: {},
+};

package/dist/components/navigation/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/navigation/nav-cell/nav-cell.js

@@ -0,0 +1,67 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+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";
+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/navigation/nav-cell/nav-cell.stories.d.ts

@@ -0,0 +1,7 @@
+import type { Meta, StoryObj } from "@storybook/react";
+import { NavigationCell } from "./nav-cell";
+declare const meta: Meta<typeof NavigationCell>;
+export default meta;
+type Story = StoryObj<typeof NavigationCell>;
+export declare const Default: Story;
+export declare const Active: Story;

package/dist/components/navigation/nav-cell/nav-cell.stories.js

@@ -0,0 +1,23 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { NavigationCell } from "./nav-cell";
+import { Decorator } from "../../../components/decorator/decorator";
+const meta = {
+    title: "Navigation/NavCell",
+    component: NavigationCell,
+    decorators: [
+        (Story) => (_jsx(Decorator, { children: _jsx("div", { style: { height: '76px' }, children: _jsx(Story, {}) }) })),
+    ],
+};
+export default meta;
+export const Default = {
+    args: {
+        title: "Lorem ipsum",
+        active: false
+    }
+};
+export const Active = {
+    args: {
+        title: "Lorem ipsum",
+        active: true
+    }
+};

package/dist/components/navigation/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/navigation/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/navigation/nav-item/nav-item.stories.d.ts

@@ -0,0 +1,9 @@
+import type { Meta, StoryObj } from "@storybook/react";
+import { NavigationItem } from "./nav-item";
+declare const meta: Meta<typeof NavigationItem>;
+export default meta;
+type Story = StoryObj<typeof NavigationItem>;
+export declare const Default: Story;
+export declare const Highlighted: Story;
+export declare const WithItems: Story;
+export declare const WithItemsExpanded: Story;

package/dist/components/navigation/nav-item/nav-item.stories.js

@@ -0,0 +1,73 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { NavigationItem } from "./nav-item";
+import { Decorator } from "../../../components/decorator/decorator";
+const mockWebUrlItems = [
+    {
+        webUrlName: 'Sub Item #1',
+        slugReference: {
+            slug: '/sub-item-1/',
+        },
+    },
+    {
+        webUrlName: 'Sub Item #2',
+        slugReference: {
+            slug: '/sub-item-2/',
+        },
+    },
+];
+const navItemModelMockDefault = {
+    key: 'A0',
+    title: 'Nav Item default',
+    highlight: false,
+    slug: {
+        current: '/item-1/',
+    },
+    items: [],
+};
+const navItemModelMockHiglighted = {
+    key: 'A0',
+    title: 'Nav Item Highlighted',
+    highlight: true,
+    slug: {
+        current: '/item-1/',
+    },
+    items: [],
+};
+const navItemModelMockExpandable = {
+    key: 'A0',
+    title: 'Nav Item Expandable',
+    highlight: false,
+    items: [...mockWebUrlItems],
+};
+const meta = {
+    title: "Navigation/NavItem",
+    component: NavigationItem,
+    decorators: [
+        (Story) => (_jsx(Decorator, { children: _jsx(Story, {}) })),
+    ],
+};
+export default meta;
+export const Default = {
+    args: {
+        model: navItemModelMockDefault,
+        expanded: false
+    }
+};
+export const Highlighted = {
+    args: {
+        model: navItemModelMockHiglighted,
+        expanded: false
+    }
+};
+export const WithItems = {
+    args: {
+        model: navItemModelMockExpandable,
+        expanded: false
+    }
+};
+export const WithItemsExpanded = {
+    args: {
+        model: navItemModelMockExpandable,
+        expanded: true
+    }
+};

package/dist/components/surfaces/cards/card-banner/card-banner.d.ts

@@ -0,0 +1,14 @@
+import { SanityImage } from '../../../../models/sanity-types';
+export type CardBannerProps = {
+    title: string;
+    text: string;
+    image?: SanityImage;
+    backgroundColor?: {
+        value: string;
+    };
+    externalUrl?: string;
+    internalLink?: string;
+    onClick?: () => void;
+};
+export declare const CardBanner: ({ title, text, image, externalUrl, internalLink, onClick, }: CardBannerProps) => import("react/jsx-runtime").JSX.Element;
+export default CardBanner;

package/dist/components/surfaces/cards/card-banner/card-banner.js

@@ -0,0 +1,62 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Image } from '../../../../components/layout/image/image';
+import { Link } from 'gatsby';
+import styled, { css } from 'styled-components';
+import { media } from '../../../../styles/mixins';
+import { rem } from "../../../../styles/units";
+export const CardBanner = ({ title, text, image, externalUrl, internalLink, onClick, }) => {
+    return (_jsxs(Wrapper, { "data-test": "card-banner", as: externalUrl ? 'a' : !internalLink ? 'div' : Link, href: externalUrl || undefined, to: internalLink || undefined, target: externalUrl ? '_blank' : undefined, onClick: () => onClick?.(), children: [_jsx(ImageWrapper, { children: _jsx(StyledImage, { image: image?.asset }) }), _jsxs(TextWrapper, { children: [_jsx(Title, { children: title }), _jsx(StyledParagraph, { children: text })] })] }));
+};
+const Wrapper = styled(Link) `
+  display: flex;
+  align-items: flex-start;
+  background-color: white;
+  border-radius: ${rem(6)};
+  text-decoration: none;
+  box-shadow: 0 ${rem(4)} ${rem(16)} 0 rgba(0,0,0,0.08);
+  padding: ${rem(16)};
+`;
+const ImageWrapper = styled.div `
+  border-radius: 50%;
+  flex-shrink: 0;
+  overflow: hidden; 
+  width: ${rem(64)};
+  height: ${rem(64)};
+
+  ${media.L `
+    width: ${rem(72)};
+    height: ${rem(72)};
+  `}
+`;
+const StyledImage = styled(Image) `
+    width: 100%;
+    height: 100%;
+    object-fit: cover; 
+`;
+const TextWrapper = styled.div `
+  word-break: break-word;
+  margin-left: ${rem(16)};
+`;
+const Title = styled.h3 `
+  margin: 0;
+  margin-bottom: ${rem(5)};
+
+  ${({ theme }) => css `
+    color: ${theme.blackLight};
+    font-family: ${theme.valueBold};
+    font-size: ${rem(20)};
+    line-height: ${rem(28)};
+
+  `};
+`;
+const StyledParagraph = styled.p `
+  margin: 0;
+
+  ${({ theme }) => css `
+    color: ${theme.blackLight};
+    font-family: ${theme.valueRegular};
+    font-size: ${rem(16)};
+    line-height: ${rem(24)};
+  `};
+`;
+export default CardBanner;

package/dist/components/surfaces/cards/card-banner/card-banner.stories.d.ts

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

package/dist/components/surfaces/cards/card-banner/card-banner.stories.js

@@ -0,0 +1,29 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { CardBanner } from "./card-banner";
+import { Decorator } from "../../../../components/decorator/decorator";
+import { mockImage_128_128 } from '../../../../mocks/image-mocks';
+const mockWebUrlItem = {
+    externalUrl: 'https://example.com',
+    internalLink: {
+        slug: {
+            current: '/sub-item-2/'
+        }
+    }
+};
+const meta = {
+    title: "Surfaces/Cards/CardBanner",
+    component: CardBanner,
+    decorators: [
+        (Story) => (_jsx(Decorator, { children: _jsx("div", { style: { width: '300px' }, children: _jsx(Story, {}) }) })),
+    ],
+};
+export default meta;
+export const Default = {
+    args: {
+        title: 'Rubrik',
+        text: 'Lorem ipsum dolor sit amet, sit amet dolor.',
+        // @ts-ignore
+        image: mockImage_128_128,
+        webPageUrl: mockWebUrlItem
+    }
+};

package/dist/index.d.ts

@@ -13,11 +13,18 @@ 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";
-export type { ButtonProps, LoadingButtonProps, TextButtonProps, EmailSignupFormProps, ImageProps, ContainerProps, AlertProps, EntryListHeadingProps, EntryListTextProps, PaginationProps, };
+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";
+export type { ButtonProps, LoadingButtonProps, TextButtonProps, EmailSignupFormProps, ImageProps, ContainerProps, AlertProps, EntryListHeadingProps, EntryListTextProps, PaginationProps, NavigationCellProps, NavigationItemProps, CardBannerProps };
 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";
 export { SearchIcon } from "./components/icons/search-icon/search-icon";
+export { ToggableChevron } from "./components/icons/toggable-chevron/toggable-chevron";
+export { HamburgerIcon } from "./components/icons/hamburger-icon/hamburger-icon";
+export { MenuCloseIcon } from "./components/icons/menu-close-icon/menu-close-icon";
+export { ExternalIcon } from "./components/icons/external-icon/external-icon";
 export declare const LoadingSpinner: import("react").FC<LoadingSpinnerProps>;
 export declare const Button: import("react").FC<ButtonProps>;
 export declare const LoadingButton: import("react").FC<LoadingButtonProps>;
@@ -39,3 +46,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>;

package/dist/index.js

@@ -16,11 +16,18 @@ 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";
 // Icons
 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";
 export { SearchIcon } from "./components/icons/search-icon/search-icon";
+export { ToggableChevron } from "./components/icons/toggable-chevron/toggable-chevron";
+export { HamburgerIcon } from "./components/icons/hamburger-icon/hamburger-icon";
+export { MenuCloseIcon } from "./components/icons/menu-close-icon/menu-close-icon";
+export { ExternalIcon } from "./components/icons/external-icon/external-icon";
 export const LoadingSpinner = withDefaultTheme(LoadingSpinnerComponent);
 // Components
 export const Button = withDefaultTheme(ButtonComponent);
@@ -41,3 +48,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);

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

@@ -0,0 +1,30 @@
+export declare const mockImage_128_128: {
+    asset: {
+        description: string;
+        gatsbyImageData: {
+            images: {
+                sources: {
+                    srcSet: string;
+                    sizes: string;
+                    type: string;
+                }[];
+                fallback: {
+                    src: string;
+                    srcSet: string;
+                    sizes: string;
+                };
+            };
+            layout: string;
+            backgroundColor: string;
+            width: number;
+            height: number;
+        };
+    };
+};
+export declare const svgMock: {
+    asset: {
+        description: string;
+        url: string;
+        extension: string;
+    };
+};

package/dist/mocks/image-mocks.js

@@ -0,0 +1,32 @@
+export const mockImage_128_128 = {
+    asset: {
+        description: 'lorem ipsum',
+        gatsbyImageData: {
+            images: {
+                sources: [
+                    {
+                        srcSet: '//images.ctfassets.net/e8gvzq1fwq00/4KETnnG9zWRzgrz8C6txFE/593a0fa983e140a49f78ed7ce6b16313/Blodtrycket_liten.jpg?w=452&h=650&q=50&fm=webp 452w,\n//images.ctfassets.net/e8gvzq1fwq00/4KETnnG9zWRzgrz8C6txFE/593a0fa983e140a49f78ed7ce6b16313/Blodtrycket_liten.jpg?w=904&h=1300&q=50&fm=webp 904w,\n//images.ctfassets.net/e8gvzq1fwq00/4KETnnG9zWRzgrz8C6txFE/593a0fa983e140a49f78ed7ce6b16313/Blodtrycket_liten.jpg?w=1808&h=2599&q=50&fm=webp 1808w',
+                        sizes: '(min-width: 128px) 128px, 100vw',
+                        type: 'image/webp',
+                    },
+                ],
+                fallback: {
+                    src: '//images.ctfassets.net/e8gvzq1fwq00/4KETnnG9zWRzgrz8C6txFE/593a0fa983e140a49f78ed7ce6b16313/Blodtrycket_liten.jpg?w=1808&h=2599&fl=progressive&q=50&fm=jpg',
+                    srcSet: '//images.ctfassets.net/e8gvzq1fwq00/4KETnnG9zWRzgrz8C6txFE/593a0fa983e140a49f78ed7ce6b16313/Blodtrycket_liten.jpg?w=452&h=650&fl=progressive&q=50&fm=jpg 452w,\n//images.ctfassets.net/e8gvzq1fwq00/4KETnnG9zWRzgrz8C6txFE/593a0fa983e140a49f78ed7ce6b16313/Blodtrycket_liten.jpg?w=904&h=1300&fl=progressive&q=50&fm=jpg 904w,\n//images.ctfassets.net/e8gvzq1fwq00/4KETnnG9zWRzgrz8C6txFE/593a0fa983e140a49f78ed7ce6b16313/Blodtrycket_liten.jpg?w=1808&h=2599&fl=progressive&q=50&fm=jpg 1808w',
+                    sizes: '(min-width: 128px) 128px, 100vw',
+                },
+            },
+            layout: 'constrained',
+            backgroundColor: '#e89888',
+            width: 128,
+            height: 128,
+        },
+    }
+};
+export const svgMock = {
+    asset: {
+        description: 'lorem ipsum',
+        url: 'https://cdn.sanity.io/images/1mvwv0jt/development/c3fd17a2e85054afbc33b99672c469f82cdde69c-189x135.svg',
+        extension: 'svg'
+    }
+};

package/dist/models/sanity-types.d.ts

@@ -0,0 +1,9 @@
+import { IGatsbyImageData } from 'gatsby-plugin-image';
+export type SanityImage = {
+    asset: {
+        gatsbyImageData: IGatsbyImageData;
+        description: string;
+        url?: string;
+        extension?: string;
+    };
+};

package/dist/models/sanity-types.js

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

package/dist/models/web-page-url.d.ts

@@ -0,0 +1,10 @@
+export type WebPageUrl = {
+    externalUrl?: string;
+    openInNewWindow?: boolean;
+    internalLink?: {
+        slug?: {
+            current: string;
+        };
+    };
+    webUrlName?: string;
+};

package/dist/models/web-page-url.js

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

package/package.json

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