@hlf-fe/pulmo-ui 1.4.0 → 1.5.0

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

@@ -61,6 +61,7 @@ const StyledButton = styled.button `
   ${({ theme, inverted, fullWidth }) => css `
     ${media.M `
       width: ${fullWidth ? "100%" : "fit-content"};
+      font-size: ${rem(18)};
     `}
 
     &:not(:disabled) {

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

@@ -1,6 +1,7 @@
 import { jsx as _jsx } from "react/jsx-runtime";
 import styled, { css } from "styled-components";
 import { rem } from "../../../styles/units";
+import { media } from "../../../styles/mixins";
 import { Link } from "gatsby";
 export const TextButton = ({ type = "button", onClick, onMouseEnter, onMouseLeave, className, disabled, dataTest, children, to, href, target, tabIndex, }) => {
     const commonProps = {
@@ -58,4 +59,8 @@ const StyledTextButton = styled.button `
       text-decoration: none;
     }
   }
+
+  ${media.M `
+    font-size: ${rem(18)}
+  `}
 `;

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/headings/headings.js

@@ -20,7 +20,7 @@ export const H2 = styled.h2 `
 
   ${media.L `
     font-size: ${rem(32)};
-    line-height: 1.5;
+    line-height: 1.25;
   `}
 `;
 export const H3 = styled.h3 `

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