@hlf-fe/pulmo-ui 1.4.1 → 1.5.1

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

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

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

@@ -0,0 +1,2 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+export const DocumentIcon = () => (_jsx("svg", { xmlns: "http://www.w3.org/2000/svg", width: 32, height: 32, children: _jsx("path", { fill: "#D81125", fillRule: "evenodd", d: "M18 5a1.01 1.01 0 0 1 .25.031l.03.009c.03.009.061.02.091.031l.027.012a.914.914 0 0 1 .195.112c.04.03.078.062.114.098l-.093-.082.011.009.082.073 6 6a1.006 1.006 0 0 1 .21.309l.012.027c.012.03.022.06.031.091l.008.03A.921.921 0 0 1 25 12l-.008-.126L25 12v12a3 3 0 0 1-3 3H10a3 3 0 0 1-3-3V8a3 3 0 0 1 3-3h8zm-1 2h-7a1 1 0 0 0-1 1v16a1 1 0 0 0 1 1h12a1 1 0 0 0 1-1V13h-5a1 1 0 0 1-.993-.883L17 12V7zm3 13a1 1 0 0 1 .117 1.993L20 22h-8a1 1 0 0 1-.117-1.993L12 20h8zm0-4a1 1 0 0 1 .117 1.993L20 18h-8a1 1 0 0 1-.117-1.993L12 16h8zm-6-4a1 1 0 0 1 .117 1.993L14 14h-2a1 1 0 0 1-.117-1.993L12 12h2zm5-3.585V11h2.586L19 8.415z" }) }));

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

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

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

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

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

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

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

@@ -0,0 +1,2 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+export const DownloadIcon = () => (_jsx("svg", { xmlns: "http://www.w3.org/2000/svg", width: 32, height: 32, children: _jsx("path", { fill: "#D81125", fillRule: "evenodd", d: "M25 18a1 1 0 0 1 .993.883L26 19v4a3 3 0 0 1-2.824 2.995L23 26H9a3 3 0 0 1-2.995-2.824L6 23v-4a1 1 0 0 1 1.993-.117L8 19v4a1 1 0 0 0 .883.993L9 24h14a1 1 0 0 0 .993-.883L24 23v-4a1 1 0 0 1 1-1zM16 6a1 1 0 0 1 .993.883L17 7v9.585l3.293-3.292a1 1 0 0 1 1.32-.083l.094.083a1 1 0 0 1 .083 1.32l-.083.094-5 5a1.006 1.006 0 0 1-.09.08l.09-.08a1.008 1.008 0 0 1-.674.292L16 20h-.032l-.054-.004L16 20a1.008 1.008 0 0 1-.613-.21 1.037 1.037 0 0 1-.094-.083l-5-5a1 1 0 0 1 1.32-1.497l.094.083L15 16.585V7a1 1 0 0 1 1-1z" }) }));

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

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

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

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

package/dist/components/modules/downloadable-file/downloadable-file.d.ts

@@ -0,0 +1,4 @@
+export declare const formatFileSize: (bytes: any) => string;
+export declare const DownloadableFile: ({ file }: {
+    file: any;
+}) => import("react/jsx-runtime").JSX.Element;

package/dist/components/modules/downloadable-file/downloadable-file.js

@@ -0,0 +1,56 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { DownloadIcon } from "../../../components/icons/download-icon/download-icon";
+import { DocumentIcon } from "../../../components/icons/document-icon/document-icon";
+import styled from "styled-components";
+import { rem } from "../../../styles/units";
+import { media } from "../../../styles/mixins";
+export const formatFileSize = (bytes) => {
+    const kb = bytes / 1024;
+    if (kb < 1000) {
+        return `${Math.floor(kb)} KB`;
+    }
+    if (kb >= 1000) {
+        const mb = kb / 1024;
+        return `${mb.toFixed(1)} MB`;
+    }
+};
+export const DownloadableFile = ({ file }) => {
+    const { file: { asset }, title, } = file;
+    return (_jsxs(Link, { href: asset?.url, target: "_blank", children: [_jsxs(File, { children: [_jsxs(FileHeader, { children: [_jsx(DocumentIcon, {}), _jsx(FileTitle, { children: title })] }), _jsxs(FileData, { children: ["(", _jsx(FileExtension, { children: asset?.extension }), " ", formatFileSize(asset?.size), ")"] })] }), _jsx(DownloadIcon, {})] }));
+};
+const Link = styled.a `
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  background-color: ${({ theme }) => theme?.white};
+  width: 100%;
+  padding: ${rem(16)} ${rem(24)};
+  border: ${rem(1)} solid #dde1e5;
+  border-radius: ${rem(4)};
+  text-decoration: none;
+`;
+const File = styled.div ``;
+const FileHeader = styled.p `
+  display: flex;
+  align-items: center;
+  margin: 0;
+`;
+const FileTitle = styled.span `
+  font-size: ${rem(16)};
+  color: ${({ theme }) => theme?.redClear};
+  text-decoration: underline;
+  margin: 0;
+
+  ${media.M `
+    font-size: ${rem(18)};
+  `}
+`;
+const FileData = styled.span `
+  font-family: ${({ theme }) => theme?.valueRegular};
+  font-size: ${rem(14)};
+  color: #545454;
+  text-decoration: none;
+`;
+const FileExtension = styled.span `
+  text-transform: uppercase;
+`;

package/dist/components/modules/downloadable-file/downloadable-file.stories.d.ts

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

package/dist/components/modules/downloadable-file/downloadable-file.stories.js

@@ -0,0 +1,25 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { DownloadableFile } from "./downloadable-file";
+import { Decorator } from "../../../components/decorator/decorator";
+const meta = {
+    title: "Modules/DownloadableFile",
+    component: DownloadableFile,
+    decorators: [
+        (Story) => (_jsx(Decorator, { maxWidth: "676px", children: _jsx(Story, {}) })),
+    ],
+};
+export default meta;
+export const Default = {
+    args: {
+        file: {
+            title: "Example-document",
+            file: {
+                asset: {
+                    url: "https://example.com/document.pdf",
+                    extension: "pdf",
+                    size: 1048576,
+                },
+            },
+        },
+    },
+};

package/dist/components/modules/footer/footer.d.ts

@@ -0,0 +1,21 @@
+import { SanityImage } from "../../../models/sanity-types";
+type LinkItem = {
+    externalUrl: string;
+    internalLink: {
+        slug: {
+            current: string;
+        };
+    };
+    openInNewWindow: boolean;
+    webUrlName: string;
+};
+type LinkColumn = {
+    heading?: string;
+    items: LinkItem[];
+};
+export type FooterProps = {
+    linkColumns: LinkColumn[];
+    footerLogo: SanityImage;
+};
+export declare const Footer: ({ linkColumns, footerLogo }: FooterProps) => import("react/jsx-runtime").JSX.Element;
+export {};

package/dist/components/modules/footer/footer.js

@@ -0,0 +1,75 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Link } from "../../../components/typography/link/link";
+import { Image } from "../../../components/layout/image/image";
+import { media } from "../../../styles/mixins";
+import { rem } from "../../../styles/units";
+import styled from "styled-components";
+export const Footer = ({ linkColumns, footerLogo }) => {
+    return (_jsxs(OuterContainer, { children: [_jsx(ColumnContainer, { children: linkColumns.map(({ heading, items }) => {
+                    return (_jsxs(Column, { children: [heading && _jsx(Heading, { children: heading }), items?.map((item) => {
+                                return (_jsx(StyledLink, { value: { reference: item }, children: item?.webUrlName }));
+                            })] }));
+                }) }), _jsx(StyledImage, { image: footerLogo?.asset })] }));
+};
+const OuterContainer = styled.div `
+  width: 100%;
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  min-height: ${rem(340)};
+  background: ${({ theme }) => theme?.redClear};
+`;
+const ColumnContainer = styled.div `
+  width: 100%;
+  max-width: ${rem(1024)};
+  flex-direction: column;
+  display: flex;
+  justify-content: center;
+  padding: ${rem(40)};
+  margin: 0 auto;
+  border-bottom: ${rem(1)} solid #e35361;
+
+  ${media.M `
+    flex-direction: row;
+  `}
+`;
+const Heading = styled.span `
+  font-size: ${rem(14)};
+  font-family: ${({ theme }) => theme?.valueBold};
+  text-transform: uppercase;
+  color: ${({ theme }) => theme?.white};
+  padding: ${rem(10)} 0;
+  margin: 0;
+`;
+const StyledLink = styled(Link) ``;
+const Column = styled.div `
+  display: flex;
+  flex-direction: column;
+  width: 100%;
+  margin-bottom: ${rem(20)};
+
+  ${StyledLink} {
+    color: ${({ theme }) => theme?.white};
+    padding: ${rem(10)} 0;
+    text-decoration: none;
+
+    &[href^="mailto:"] {
+      text-decoration: underline;
+    }
+
+    &:hover {
+      color: #f0f0f0;
+    }
+  }
+
+  ${media.L `
+    margin-bottom: 0;
+  `}
+`;
+const StyledImage = styled(Image) `
+  max-width: ${rem(142)};
+  margin: ${rem(20)} auto;
+  ${media.M `
+  margin: ${rem(40)} auto;
+  `}
+`;

package/dist/components/modules/footer/footer.stories.d.ts

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

package/dist/components/modules/footer/footer.stories.js

@@ -0,0 +1,31 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { Footer } from "./footer";
+import { Decorator } from "../../../components/decorator/decorator";
+const meta = {
+    title: "Layout/Footer",
+    component: Footer,
+    decorators: [
+        (Story) => (_jsx(Decorator, { children: _jsx(Story, {}) })),
+    ],
+};
+export default meta;
+const generateLink = (index) => ({
+    externalUrl: `/`,
+    internalLink: {
+        slug: {
+            current: `internal-link-${index}`,
+        },
+    },
+    openInNewWindow: false,
+    webUrlName: `Link ${index}`,
+});
+const mockColumns = Array.from({ length: 4 }, (_, colIndex) => ({
+    heading: `Column ${colIndex + 1}`,
+    items: Array.from({ length: 5 }, (_, i) => generateLink(i + 1)),
+}));
+export const Default = {
+    args: {
+        linkColumns: mockColumns,
+        footerLogo: null,
+    },
+};

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

@@ -5,5 +5,6 @@ export type PortableTextComponents = {
     marks?: PortableTextComponent;
     list?: PortableTextComponent;
     block?: PortableTextComponent;
+    types?: PortableTextComponent;
 };
 export declare const PortableTextComponentDefault: PortableTextComponents;

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

@@ -4,6 +4,7 @@ import { Link as LinkComponent, } from "../../../components/typography/link/link
 import { H1 as H1Component, H2 as H2Component, H3 as H3Component, H4 as H4Component, } from "../../../components/typography/headings/headings";
 import { NormalText as NormalTextComponent, LeadParagraph as LeadParagraphComponent, BoldText as BoldTextComponent, ItalicText as ItalicTextComponent, } from "../../../components/typography/text/text";
 import { OrderedList as OrderedListComponent, UnorderedList as UnorderedListComponent, } from "../../../components/typography/list/list";
+import { DownloadableFile } from "../../../components/modules/downloadable-file/downloadable-file";
 const Link = withDefaultTheme(LinkComponent);
 const H1 = withDefaultTheme(H1Component);
 const H2 = withDefaultTheme(H2Component);
@@ -33,4 +34,9 @@ export const PortableTextComponentDefault = {
         normal: ({ children }) => _jsx(NormalText, { children: children }),
         leadParagraph: ({ children }) => _jsx(LeadParagraph, { children: children }),
     },
+    types: {
+        downloadableFileReference: ({ value }) => {
+            return _jsx(DownloadableFile, { ...value });
+        },
+    },
 };

package/dist/index.d.ts

@@ -19,6 +19,7 @@ import { type CardBannerProps } from "./components/surfaces/cards/card-banner/ca
 import { type PaperProps } from "./components/surfaces/paper/paper";
 import { type LinkProps } from "./components/typography/link/link";
 import { PortableTextComponentDefault } from "./components/typography/portable-text/portable-text-component-default";
+import { type FooterProps } from "./components/modules/footer/footer";
 export type { ButtonProps, LoadingButtonProps, TextButtonProps, EmailSignupFormProps, ImageProps, ContainerProps, AlertProps, EntryListHeadingProps, EntryListTextProps, PaginationProps, NavigationCellProps, NavigationItemProps, CardBannerProps, PaperProps, };
 export { CloseIcon } from "./components/icons/close-icon/close-icon";
 export { ExclamationMarkIcon } from "./components/icons/exclamation-mark-icon/exclamation-mark-icon";
@@ -64,4 +65,5 @@ export declare const BoldText: import("react").FC<import("styled-components").Fa
 export declare const ItalicText: import("react").FC<import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLElement>, HTMLElement>, never>>;
 export declare const OrderedList: import("react").FC<import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").OlHTMLAttributes<HTMLOListElement>, HTMLOListElement>, never>>;
 export declare const UnorderedList: import("react").FC<import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLUListElement>, HTMLUListElement>, never>>;
+export declare const Footer: import("react").FC<FooterProps>;
 export { PortableTextComponentDefault };

package/dist/index.js

@@ -25,6 +25,7 @@ import { H1 as H1Component, H2 as H2Component, H3 as H3Component, H4 as H4Compon
 import { NormalText as NormalTextComponent, LeadParagraph as LeadParagraphComponent, BoldText as BoldTextComponent, ItalicText as ItalicTextComponent, } from "./components/typography/text/text";
 import { OrderedList as OrderedListComponent, UnorderedList as UnorderedListComponent, } from "./components/typography/list/list";
 import { PortableTextComponentDefault } from "./components/typography/portable-text/portable-text-component-default";
+import { Footer as FooterComponent, } from "./components/modules/footer/footer";
 // Icons
 export { CloseIcon } from "./components/icons/close-icon/close-icon";
 export { ExclamationMarkIcon } from "./components/icons/exclamation-mark-icon/exclamation-mark-icon";
@@ -69,5 +70,5 @@ export const BoldText = withDefaultTheme(BoldTextComponent);
 export const ItalicText = withDefaultTheme(ItalicTextComponent);
 export const OrderedList = withDefaultTheme(OrderedListComponent);
 export const UnorderedList = withDefaultTheme(UnorderedListComponent);
-// Configs
+export const Footer = withDefaultTheme(FooterComponent);
 export { PortableTextComponentDefault };

package/package.json

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