@hlf-fe/pulmo-ui 1.5.1 → 1.5.3

package/dist/mocks/navigation-mock.js

@@ -0,0 +1,153 @@
+import { mockImage_128_128, logoMock } from '../mocks/image-mocks';
+const mockWebUrlItems = [
+    {
+        webUrlName: 'Sub Item #1',
+        internalLink: {
+            slug: {
+                current: '/sub-item-1/',
+            }
+        }
+    },
+    {
+        webUrlName: 'Sub Item #2',
+        internalLink: {
+            slug: {
+                current: '/sub-item-1/',
+            }
+        }
+    },
+];
+const mockCardBanner = {
+    title: 'Lorem Ipsum',
+    text: 'Lorem Ipsum Dorem',
+    // @ts-ignore
+    image: mockImage_128_128,
+};
+export const mockNavItemsA = [
+    {
+        key: 'A0',
+        title: 'Nav Item #1',
+        slug: {
+            current: '/nav-item-1/',
+        },
+        items: null,
+    },
+    {
+        key: 'A1',
+        title: 'Nav Item #2',
+        highlight: false,
+        slug: {
+            current: '/nav-item-2/',
+        },
+        items: [],
+    },
+    {
+        key: 'A2',
+        title: 'Nav Item #3 (Expandable)',
+        highlight: false,
+        items: [...mockWebUrlItems],
+    },
+];
+export const mockNavItemsB = [
+    {
+        key: 'B0',
+        title: 'Nav Item #1',
+        highlight: false,
+        slug: {
+            current: '/nav-item-3/',
+        },
+        items: [],
+    },
+    {
+        key: 'B1',
+        title: 'Nav Item #2',
+        highlight: false,
+        slug: {
+            current: '/nav-item-2/',
+        },
+        items: [],
+    },
+    {
+        key: 'B2',
+        title: 'Nav Item #3 (Expandable)',
+        highlight: false,
+        items: [...mockWebUrlItems],
+    },
+];
+export const mockNavSections = [
+    {
+        key: '0',
+        title: '2 Columns',
+        backgroundColor: {
+            hex: '#D6EBE3',
+        },
+        column1Title: 'Column #1',
+        column1Items: [...mockNavItemsA],
+        column2Title: 'Column #2',
+        column2Items: [...mockNavItemsB],
+        linkBanners: [mockCardBanner, { ...mockCardBanner, title: 'Lorem Ipsum 2' }],
+    },
+    {
+        key: '1',
+        title: '1 Column - Left',
+        backgroundColor: {
+            hex: '#D6EBE3',
+        },
+        column1Title: 'Column #1',
+        column1Items: [...mockNavItemsA],
+        linkBanners: [mockCardBanner, { ...mockCardBanner, title: 'Lorem Ipsum 2' }],
+    },
+    {
+        key: '2',
+        title: '1 Column - Right',
+        backgroundColor: {
+            hex: '#D6EBE3',
+        },
+        column2Title: 'Column #2',
+        column2Items: [...mockNavItemsB],
+        linkBanners: [mockCardBanner, { ...mockCardBanner, title: 'Lorem Ipsum 2' }],
+    },
+    {
+        key: '3',
+        title: '1 Column - Right',
+        column2Title: 'Column #3',
+        column2Items: [...mockNavItemsB],
+        linkBanners: [mockCardBanner],
+    },
+];
+export const mockNavigation = {
+    topMenuItems: [
+        {
+            webUrlName: 'Top Menu #1',
+            internalLink: {
+                slug: {
+                    current: '/sub-item-1/',
+                }
+            }
+        },
+        {
+            webUrlName: 'Top Menu #2',
+            internalLink: {
+                slug: {
+                    current: '/sub-item-1/',
+                }
+            }
+        },
+    ],
+    mainMenuItems: [...mockNavSections],
+    ctaButton: {
+        webUrlName: 'CTA Button',
+        internalLink: {
+            slug: {
+                current: '/sub-item-1/',
+            }
+        }
+    },
+    // @ts-ignore
+    logotype: logoMock,
+    localeText: {
+        ariaLabelHome: 'Lorem ipsum',
+        goBack: 'Go back'
+    },
+    isMenuVisible: true
+};

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.5.1",
+  "version": "1.5.3",
   "type": "module",
   "main": "dist/index.js",
   "module": "dist/index.js",

package/dist/components/typography/heading/heading.d.ts

@@ -1,4 +0,0 @@
-export declare const H1: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLHeadingElement>, HTMLHeadingElement>, never>> & string;
-export declare const H2: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLHeadingElement>, HTMLHeadingElement>, never>> & string;
-export declare const H3: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLHeadingElement>, HTMLHeadingElement>, never>> & string;
-export declare const H4: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLHeadingElement>, HTMLHeadingElement>, never>> & string;

package/dist/components/typography/heading/heading.js

@@ -1,47 +0,0 @@
-import styled from "styled-components";
-import { media } from "../../../styles/mixins";
-import { rem } from "../../../styles/units";
-export const H1 = styled.h1 `
-  font-family: ${({ theme }) => theme.valueBold};
-  color: ${({ theme }) => theme.blackLight};
-  font-size: ${rem(40)};
-  line-height: 1.15;
-
-  ${media.L `
-    font-size: ${rem(64)};
-    line-height: 1.09;
-  `}
-`;
-export const H2 = styled.h2 `
-  font-family: ${({ theme }) => theme.valueBold};
-  color: ${({ theme }) => theme.blackLight};
-  font-size: ${rem(28)};
-  line-height: 1.14;
-
-  ${media.L `
-    font-size: ${rem(32)};
-    line-height: 1.5;
-  `}
-`;
-export const H3 = styled.h3 `
-  font-family: ${({ theme }) => theme.valueBold};
-  color: ${({ theme }) => theme.blackLight};
-  font-size: ${rem(22)};
-  line-height: 1.45;
-
-  ${media.L `
-    font-size: ${rem(28)};
-    line-height: 1.43;
-  `}
-`;
-export const H4 = styled.h4 `
-  font-family: ${({ theme }) => theme.valueBold};
-  color: ${({ theme }) => theme.blackLight};
-  font-size: ${rem(22)};
-  line-height: 1.45;
-
-  ${media.L `
-    font-size: ${rem(28)};
-    line-height: 1.43;
-  `}
-`;

package/dist/components/typography/heading/heading.stories.d.ts

@@ -1,7 +0,0 @@
-import type { Meta, StoryObj } from "@storybook/react";
-declare const meta: Meta;
-export default meta;
-export declare const Heading1: StoryObj;
-export declare const Heading2: StoryObj;
-export declare const Heading3: StoryObj;
-export declare const Heading4: StoryObj;

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

@@ -1,26 +0,0 @@
-import { jsx as _jsx, Fragment as _Fragment } from "react/jsx-runtime";
-import { H1, H2, H3, H4 } from "./heading";
-import { Decorator } from "../../../components/decorator/decorator";
-const meta = {
-    title: "Typography/Headings",
-    decorators: [
-        (Story) => (_jsx(Decorator, { children: _jsx(Story, {}) })),
-    ],
-};
-export default meta;
-export const Heading1 = {
-    name: "H1",
-    render: () => (_jsx(_Fragment, { children: _jsx(H1, { children: "This is an H1" }) })),
-};
-export const Heading2 = {
-    name: "H2",
-    render: () => (_jsx(_Fragment, { children: _jsx(H2, { children: "This is an H2" }) })),
-};
-export const Heading3 = {
-    name: "H3",
-    render: () => (_jsx(_Fragment, { children: _jsx(H3, { children: "This is an H2" }) })),
-};
-export const Heading4 = {
-    name: "H4",
-    render: () => (_jsx(_Fragment, { children: _jsx(H4, { children: "This is an H2" }) })),
-};

package/dist/components/typography/heading/headings.d.ts

@@ -1,4 +0,0 @@
-export declare const H1: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLHeadingElement>, HTMLHeadingElement>, never>> & string;
-export declare const H2: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLHeadingElement>, HTMLHeadingElement>, never>> & string;
-export declare const H3: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLHeadingElement>, HTMLHeadingElement>, never>> & string;
-export declare const H4: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLHeadingElement>, HTMLHeadingElement>, never>> & string;

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

@@ -1,47 +0,0 @@
-import styled from "styled-components";
-import { media } from "../../../styles/mixins";
-import { rem } from "../../../styles/units";
-export const H1 = styled.h1 `
-  font-family: ${({ theme }) => theme.valueBold};
-  color: ${({ theme }) => theme.blackLight};
-  font-size: ${rem(40)};
-  line-height: 1.15;
-
-  ${media.L `
-    font-size: ${rem(64)};
-    line-height: 1.09;
-  `}
-`;
-export const H2 = styled.h2 `
-  font-family: ${({ theme }) => theme.valueBold};
-  color: ${({ theme }) => theme.blackLight};
-  font-size: ${rem(28)};
-  line-height: 1.14;
-
-  ${media.L `
-    font-size: ${rem(32)};
-    line-height: 1.5;
-  `}
-`;
-export const H3 = styled.h3 `
-  font-family: ${({ theme }) => theme.valueBold};
-  color: ${({ theme }) => theme.blackLight};
-  font-size: ${rem(22)};
-  line-height: 1.45;
-
-  ${media.L `
-    font-size: ${rem(28)};
-    line-height: 1.43;
-  `}
-`;
-export const H4 = styled.h4 `
-  font-family: ${({ theme }) => theme.valueBold};
-  color: ${({ theme }) => theme.blackLight};
-  font-size: ${rem(22)};
-  line-height: 1.45;
-
-  ${media.L `
-    font-size: ${rem(28)};
-    line-height: 1.43;
-  `}
-`;

package/dist/components/typography/heading/headings.stories.d.ts

@@ -1,7 +0,0 @@
-import type { Meta, StoryObj } from "@storybook/react";
-declare const meta: Meta;
-export default meta;
-export declare const Heading1: StoryObj;
-export declare const Heading2: StoryObj;
-export declare const Heading3: StoryObj;
-export declare const Heading4: StoryObj;

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

@@ -1,26 +0,0 @@
-import { jsx as _jsx, Fragment as _Fragment } from "react/jsx-runtime";
-import { H1, H2, H3, H4 } from "./headings";
-import { Decorator } from "../../../components/decorator/decorator";
-const meta = {
-    title: "Typography/Headings",
-    decorators: [
-        (Story) => (_jsx(Decorator, { children: _jsx(Story, {}) })),
-    ],
-};
-export default meta;
-export const Heading1 = {
-    name: "H1",
-    render: () => (_jsx(_Fragment, { children: _jsx(H1, { children: "This is an H1" }) })),
-};
-export const Heading2 = {
-    name: "H2",
-    render: () => (_jsx(_Fragment, { children: _jsx(H2, { children: "This is an H2" }) })),
-};
-export const Heading3 = {
-    name: "H3",
-    render: () => (_jsx(_Fragment, { children: _jsx(H3, { children: "This is an H2" }) })),
-};
-export const Heading4 = {
-    name: "H4",
-    render: () => (_jsx(_Fragment, { children: _jsx(H4, { children: "This is an H2" }) })),
-};

package/dist/components/typography/portable-text/portable-text-default.d.ts

@@ -1,39 +0,0 @@
-export declare const PortableTextDefault: {
-    marks: {
-        link: any;
-        strong: ({ children }: {
-            children: any;
-        }) => import("react/jsx-runtime").JSX.Element;
-        italic: ({ children }: {
-            children: any;
-        }) => import("react/jsx-runtime").JSX.Element;
-    };
-    list: {
-        bullet: ({ children }: {
-            children: any;
-        }) => import("react/jsx-runtime").JSX.Element;
-        number: ({ children }: {
-            children: any;
-        }) => import("react/jsx-runtime").JSX.Element;
-    };
-    block: {
-        h1: ({ children }: {
-            children: any;
-        }) => import("react/jsx-runtime").JSX.Element;
-        h2: ({ children }: {
-            children: any;
-        }) => import("react/jsx-runtime").JSX.Element;
-        h3: ({ children }: {
-            children: any;
-        }) => import("react/jsx-runtime").JSX.Element;
-        h4: ({ children }: {
-            children: any;
-        }) => import("react/jsx-runtime").JSX.Element;
-        normal: ({ children }: {
-            children: any;
-        }) => import("react/jsx-runtime").JSX.Element;
-        leadParagraph: ({ children }: {
-            children: any;
-        }) => import("react/jsx-runtime").JSX.Element;
-    };
-};

package/dist/components/typography/portable-text/portable-text-default.js

@@ -1,23 +0,0 @@
-import { jsx as _jsx } from "react/jsx-runtime";
-import { BoldText, ItalicText, NormalText, LeadParagraph, } from "../../../components/typography/text/text";
-import { UnorderedList, OrderedList } from "../../../components/typography/list/list";
-import { H1, H2, H3, H4 } from "../../../components/typography/heading/headings";
-export const PortableTextDefault = {
-    marks: {
-        link: LinkElement,
-        strong: ({ children }) => _jsx(BoldText, { children: children }),
-        italic: ({ children }) => _jsx(ItalicText, { children: children }),
-    },
-    list: {
-        bullet: ({ children }) => _jsx(UnorderedList, { children: children }),
-        number: ({ children }) => _jsx(OrderedList, { children: children }),
-    },
-    block: {
-        h1: ({ children }) => _jsx(H1, { children: children }),
-        h2: ({ children }) => _jsx(H2, { children: children }),
-        h3: ({ children }) => _jsx(H3, { children: children }),
-        h4: ({ children }) => _jsx(H4, { children: children }),
-        normal: ({ children }) => _jsx(NormalText, { children: children }),
-        leadParagraph: ({ children }) => _jsx(LeadParagraph, { children: children }),
-    },
-};

package/dist/styles/mixins/theme-mixins/theme-mixins.d.ts

@@ -1,5 +0,0 @@
-import { THEME_COLORS_BY_HEX, THEME_COLORS_BY_NAME, SIZES } from "../../../models/theme";
-export declare const themeColors: (color: THEME_COLORS_BY_HEX | THEME_COLORS_BY_NAME) => string;
-export declare const themeSpacing: (size: SIZES) => string;
-export declare const themeBorderRadius: (size: "sm" | "md" | "lg") => string;
-export declare const themeElevation: (elevation: 0 | 1) => string;

package/dist/styles/mixins/theme-mixins/theme-mixins.js

@@ -1,37 +0,0 @@
-import { COLORS, THEME_SPACING } from "../../../styles/theme";
-import { rem } from "../../../styles/units";
-export const themeColors = (color) => {
-    const THEME_COLORS = {
-        green: COLORS.mint,
-        blue: COLORS.skyBlue,
-        purple: COLORS.lavender,
-        pink: COLORS.pink,
-        white: COLORS.white,
-    };
-    return THEME_COLORS[color] || color;
-};
-export const themeSpacing = (size) => {
-    const THEME_SPACING_SIZES = {
-        sm: THEME_SPACING.sm,
-        md: THEME_SPACING.md,
-        lg: THEME_SPACING.lg,
-        xl: THEME_SPACING.xl,
-        none: "0",
-    };
-    return THEME_SPACING_SIZES[size] || THEME_SPACING.md;
-};
-export const themeBorderRadius = (size) => {
-    const BORDER_RADIUS = {
-        sm: rem(6),
-        md: rem(8),
-        lg: rem(12),
-    };
-    return BORDER_RADIUS[size] || BORDER_RADIUS.sm;
-};
-export const themeElevation = (elevation) => {
-    const ELEVETION = {
-        0: "none",
-        1: `0 ${rem(4)} ${rem(16)} 0 rgba(0, 0, 0, 0.08)`,
-    };
-    return ELEVETION[elevation] || ELEVETION[0];
-};