@hlf-fe/pulmo-ui 1.5.4 → 1.5.6

package/dist/components/layout/container/container.d.ts

@@ -1,14 +1,20 @@
 import { ReactNode, CSSProperties } from "react";
-type Sizes = "sm" | "lg" | "xl";
+type Sizes = "sm" | "md" | "lg" | "xl" | "auto";
 type CSSTypes = Pick<CSSProperties, "position" | "display">;
 export type ContainerProps = {
     children: ReactNode;
     maxWidth?: Sizes;
     className?: string;
+    innerContainerWidth?: string;
+    alignBlock?: "center" | "left";
+    innerWidth?: number;
 } & CSSTypes;
 export declare const Container: import("react").ForwardRefExoticComponent<{
     children: ReactNode;
     maxWidth?: Sizes;
     className?: string;
+    innerContainerWidth?: string;
+    alignBlock?: "center" | "left";
+    innerWidth?: number;
 } & CSSTypes & import("react").RefAttributes<HTMLDivElement>>;
 export {};

package/dist/components/layout/container/container.js

@@ -1,20 +1,38 @@
 import { jsx as _jsx } from "react/jsx-runtime";
 import { forwardRef } from "react";
-import { siteWidthRow, siteWidthRowXL, siteWidthRowS } from "../../../styles/mixins";
+import { siteWidthRow, siteWidthRowMd, siteWidthRowXL, siteWidthRowS, siteWidthRowAuto, } from "../../../styles/mixins";
+import { rem } from "../../../styles/units";
 import styled from "styled-components";
 const MAX_WIDTH = {
     sm: siteWidthRowS,
+    md: siteWidthRowMd,
     lg: siteWidthRow,
     xl: siteWidthRowXL,
+    auto: siteWidthRowAuto,
+};
+const INNER_WIDTH = {
+    sm: 676,
+    md: 800,
+    lg: 1024,
+    xl: 1200,
 };
 const getMaxWidth = (size) => {
     return MAX_WIDTH?.[size];
 };
-export const Container = forwardRef(({ children, className, maxWidth = "lg", position = "static", display = "block", }, ref) => {
-    return (_jsx(Div, { ref: ref, className: className, "$maxWidth": getMaxWidth(maxWidth), display: display, position: position, children: children }));
+const getInnerWidth = (size) => {
+    return INNER_WIDTH?.[size];
+};
+export const Container = forwardRef(({ children, className, maxWidth = "lg", position = "static", display = "block", alignBlock = "center", innerWidth, }, ref) => {
+    const containerWidth = alignBlock === "left" ? "lg" : maxWidth;
+    const innerContainerWidth = alignBlock == "left" ? getInnerWidth(maxWidth) : innerWidth;
+    const content = innerContainerWidth ? (_jsx(Inner, { "$innerContainerWidth": innerContainerWidth, children: children })) : (children);
+    return (_jsx(Div, { ref: ref, className: className, "$maxWidth": getMaxWidth(containerWidth), "$display": display, "$position": position, children: content }));
 });
 const Div = styled.div `
   ${({ $maxWidth }) => $maxWidth};
-  display: ${({ display }) => display};
-  position: ${({ position }) => position};
+  display: ${({ $display }) => $display};
+  position: ${({ $position }) => $position};
+`;
+const Inner = styled.div `
+  max-width: ${({ $innerContainerWidth }) => rem($innerContainerWidth)};
 `;

package/dist/components/layout/container/container.stories.d.ts

@@ -5,5 +5,6 @@ export default meta;
 type Story = StoryObj<typeof Container>;
 export declare const Default: Story;
 export declare const Small: Story;
+export declare const Medium: Story;
 export declare const Large: Story;
 export declare const ExtraLarge: Story;

package/dist/components/layout/container/container.stories.js

@@ -33,6 +33,12 @@ export const Small = {
         children: (_jsx(PlaceholderBlock, { children: _jsx(Heading, { children: "sm" }) })),
     },
 };
+export const Medium = {
+    args: {
+        maxWidth: "md",
+        children: (_jsx(PlaceholderBlock, { children: _jsx(Heading, { children: "md" }) })),
+    },
+};
 export const Large = {
     args: {
         maxWidth: "lg",

package/dist/components/modules/navigation/navigation-desktop/navigation-desktop.js

@@ -18,7 +18,7 @@ export const NavigationDesktop = ({ logotype, mainMenuItems, topMenuItems, ctaBu
         const sectionToShow = currentSection?.key !== section?.key ? section : undefined;
         setCurrentSection(sectionToShow);
     };
-    return (_jsxs(Wrapper, { ref: menuRef, children: [_jsxs(MenuContainer, { children: [!!topMenuItems?.length && (_jsx(TopBar, { "data-test": "nav-top-bar", children: topMenuItems.map(({ webUrlName, internalLink, externalUrl }) => (_jsx(StyledTopLink, { to: externalUrl || internalLink?.slug?.current || '/', children: webUrlName }, webUrlName))) })), _jsxs(NavBar, { children: [logotype && (_jsx(StyledLogoLink, { "data-test": "nav-logo", to: '/', "aria-label": ariaLabelHome, children: _jsx(Image, { image: logotype?.asset, width: "142", height: "35" }) })), _jsx(StyledList, { "data-test": "nav-list", children: mainMenuItems?.map(section => (_jsx(NavigationCell, { active: currentSection?.key === section.key, title: section.title, onToggleCell: () => onOpenSection(section) }, section.key))) }), ctaButton && (_jsxs(StyledButton, { dataTest: "nav-cta", to: ctaButton?.internalLink?.slug?.current, href: ctaButton?.externalUrl, children: [ctaButton.webUrlName, _jsx(IconWrapper, { children: _jsx(ExternalIcon, {}) })] }))] })] }), currentSection && (_jsx(StyledNavSection, { section: currentSection, closeSection: () => onOpenSection(undefined) })), (currentSection || isSearchOpen) && (_jsx(Overlay, { "data-test": "nav-overlay", "$isSearchOpen": isSearchOpen, "$playFadeOut": !isMenuVisible, onClick: () => {
+    return (_jsxs(Wrapper, { ref: menuRef, children: [_jsxs(MenuContainer, { children: [!!topMenuItems?.length && (_jsx(TopBar, { "data-test": "nav-top-bar", children: topMenuItems.map(({ webUrlName, internalLink, externalUrl }) => (_jsx(StyledTopLink, { to: externalUrl || internalLink?.slug?.current || '/', children: webUrlName }, webUrlName))) })), _jsxs(NavBar, { children: [logotype && (_jsx(StyledLogoLink, { "data-test": "nav-logo", to: '/', "aria-label": ariaLabelHome, children: _jsx(Image, { image: logotype?.asset, width: "127", height: "32" }) })), _jsx(StyledList, { "data-test": "nav-list", children: mainMenuItems?.map(section => (_jsx(NavigationCell, { active: currentSection?.key === section.key, title: section.title, onToggleCell: () => onOpenSection(section) }, section.key))) }), ctaButton && (_jsxs(StyledButton, { dataTest: "nav-cta", to: ctaButton?.internalLink?.slug?.current, href: ctaButton?.externalUrl, children: [ctaButton.webUrlName, _jsx(IconWrapper, { children: _jsx(ExternalIcon, {}) })] }))] })] }), currentSection && (_jsx(StyledNavSection, { section: currentSection, closeSection: () => onOpenSection(undefined) })), (currentSection || isSearchOpen) && (_jsx(Overlay, { "data-test": "nav-overlay", "$isSearchOpen": isSearchOpen, "$playFadeOut": !isMenuVisible, onClick: () => {
                     onOpenSection(undefined);
                     setIsSearchOpen(false);
                 } }))] }));
@@ -123,7 +123,6 @@ const StyledTopLink = styled(Link) `
 const StyledLogoLink = styled(Link) `
   display: flex;
   align-self: center;
-  max-width: ${rem(264)};
   margin-right: ${rem(16)};
 `;
 const StyledList = styled.ul `

package/dist/components/modules/navigation/navigation-mobile/navigation-mobile.js

@@ -28,7 +28,7 @@ export const NavigationMobile = ({ logotype, mainMenuItems, topMenuItems, ctaBut
     const scrollToTop = () => {
         stickyRef.current?.scroll({ top: 0, behavior: "smooth" });
     };
-    return (_jsx(Wrapper, { children: _jsxs(StickyContainer, { "$expanded": isOpen, ref: stickyRef, children: [_jsxs(TopBar, { children: [logotype && (_jsx(StyledLogoLink, { "data-test": "nav-logo", to: "/", "aria-label": ariaLabelHome, children: _jsx(Image, { image: logotype?.asset, width: "112", height: "28" }) })), ctaButton && (_jsx(StyledButton, { btnSize: "s", dataTest: "nav-cta", to: ctaButton.externalUrl, href: ctaButton.internalLink?.slug?.current, target: "_blank", children: ctaButton.webUrlName })), !emptyMenuItems && (_jsx(MenuToggle, { "data-test": !isOpen ? "nav-menu-closed" : "nav-menu-open", "aria-label": "Meny", onClick: () => setIsOpen(!isOpen), children: _jsx(IconWrapper, { children: !isOpen ? _jsx(HamburgerIcon, {}) : _jsx(MenuCloseIcon, {}) }) }))] }), isOpen && (_jsx(MenuContent, { children: _jsx(NavigationPanel, { mainMenuItems: mainMenuItems, topMenuItems: topMenuItems, scrollToTop: scrollToTop, closeMenu: () => setIsOpen(false), goBackText: goBack }) }))] }) }));
+    return (_jsx(Wrapper, { children: _jsxs(StickyContainer, { "$expanded": isOpen, ref: stickyRef, children: [_jsxs(TopBar, { children: [logotype && (_jsx(StyledLogoLink, { "data-test": "nav-logo", to: "/", "aria-label": ariaLabelHome, children: _jsx(Image, { image: logotype?.asset, width: "95", height: "24" }) })), ctaButton && (_jsx(StyledButton, { btnSize: "s", dataTest: "nav-cta", to: ctaButton.externalUrl, href: ctaButton.internalLink?.slug?.current, target: "_blank", marginRight: emptyMenuItems, children: ctaButton.webUrlName })), !emptyMenuItems && (_jsx(MenuToggle, { "data-test": !isOpen ? "nav-menu-closed" : "nav-menu-open", "aria-label": "Meny", onClick: () => setIsOpen(!isOpen), children: _jsx(IconWrapper, { children: !isOpen ? _jsx(HamburgerIcon, {}) : _jsx(MenuCloseIcon, {}) }) }))] }), isOpen && (_jsx(MenuContent, { children: _jsx(NavigationPanel, { mainMenuItems: mainMenuItems, topMenuItems: topMenuItems, scrollToTop: scrollToTop, closeMenu: () => setIsOpen(false), goBackText: goBack }) }))] }) }));
 };
 const Wrapper = styled.nav `
   position: relative;
@@ -64,12 +64,13 @@ const TopBar = styled.div `
 const StyledLogoLink = styled(Link) `
   display: flex;
   align-self: center;
-  max-width: ${rem(140)};
 `;
 const StyledButton = styled(Button) `
   display: flex;
   align-items: center;
+  white-space: nowrap;
   margin-left: auto;
+  margin-right: ${({ marginRight }) => (marginRight ? rem(16) : 0)};
   height: ${rem(32)};
   padding: 0 ${rem(8)};
 `;

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

@@ -15,6 +15,10 @@ const Wrapper = styled(Link) `
   text-decoration: none;
   box-shadow: 0 ${rem(4)} ${rem(16)} 0 rgba(0,0,0,0.08);
   padding: ${rem(16)};
+
+  &:hover {
+    box-shadow: 0 ${rem(4)} ${rem(16)} 0 rgba(0,0,0,0.3);
+  }
 `;
 const ImageWrapper = styled.div `
   border-radius: 50%;

package/dist/index.d.ts

@@ -40,8 +40,11 @@ export declare const EmailSignupForm: import("react").FC<EmailSignupFormProps>;
 export declare const Image: import("react").FC<ImageProps>;
 export declare const Container: import("react").ForwardRefExoticComponent<{
     children: import("react").ReactNode;
-    maxWidth?: "sm" | "lg" | "xl";
+    maxWidth?: "auto" | "sm" | "md" | "lg" | "xl";
     className?: string;
+    innerContainerWidth?: string;
+    alignBlock?: "center" | "left";
+    innerWidth?: number;
 } & {
     position?: import("csstype").Property.Position | undefined;
     display?: import("csstype").Property.Display | undefined;

package/dist/styles/mixins.d.ts

@@ -14,8 +14,10 @@ export declare const media: {
 };
 export declare const dynamicFontSize: (minFontSize: number, maxFontSize: number, minScreenWidth?: number, maxScreenWidth?: number) => string;
 export declare const siteWidthRowS: () => import("styled-components").RuleSet<object>;
+export declare const siteWidthRowMd: () => import("styled-components").RuleSet<object>;
 export declare const siteWidthRow: () => import("styled-components").RuleSet<object>;
 export declare const siteWidthRowXL: () => import("styled-components").RuleSet<object>;
+export declare const siteWidthRowAuto: () => import("styled-components").RuleSet<object>;
 export declare const fullWidthRow: () => import("styled-components").RuleSet<object>;
 export declare const fontSize: {
     XS: () => import("styled-components").RuleSet<object>;

package/dist/styles/mixins.js

@@ -79,6 +79,33 @@ export const siteWidthRowS = () => css `
     margin-bottom: ${SPACING.spacingXXL};
   `}
 `;
+export const siteWidthRowMd = () => css `
+  margin-left: ${SPACING.spacingXS};
+  margin-right: ${SPACING.spacingXS};
+  margin-bottom: ${rem(20)};
+  margin-top: ${rem(20)};
+  max-width: ${rem(800)};
+
+  ${media.XS `
+    margin-left: ${SPACING.spacingM};
+    margin-right: ${SPACING.spacingM};
+  `}
+
+  @media (min-width: ${em(800 + SPACING.blockSpacingM * 2)}) {
+    margin-left: auto;
+    margin-right: auto;
+  }
+
+  ${media.M `
+    margin-bottom: ${SPACING.spacingXL};
+    margin-top: ${SPACING.spacingXL};
+  `}
+
+  ${media.L `
+    margin-top: ${SPACING.spacingXXL};
+    margin-bottom: ${SPACING.spacingXXL};
+  `}
+`;
 export const siteWidthRow = () => css `
   margin-left: ${SPACING.spacingXS};
   margin-right: ${SPACING.spacingXS};
@@ -135,6 +162,9 @@ export const siteWidthRowXL = () => css `
     padding-right: ${rem(SPACING.blockSpacingM)};
   `}
 `;
+export const siteWidthRowAuto = () => css `
+  width: auto;
+`;
 export const fullWidthRow = () => css `
   padding-top: ${SPACING.spacingL};
   padding-right: ${SPACING.spacingXS};

package/dist/styles/theme.d.ts

@@ -19,6 +19,7 @@ export declare const SPACING: {
 };
 export declare const VARIABLES: {
     siteWidthS: string;
+    siteWidthM: string;
     siteWidth: string;
     siteWidthXL: string;
     siteMaxWidth: string;
@@ -123,6 +124,7 @@ export declare const THEME_SETTINGS: {
     valueMedium: string;
     valueBold: string;
     siteWidthS: string;
+    siteWidthM: string;
     siteWidth: string;
     siteWidthXL: string;
     siteMaxWidth: string;

package/dist/styles/theme.js

@@ -20,6 +20,7 @@ export const SPACING = {
 };
 export const VARIABLES = {
     siteWidthS: rem(BREAKPOINT_VALUES.S_ALT),
+    siteWidthM: rem(800 + SPACING.blockSpacingM * 2),
     siteWidth: rem(BREAKPOINT_VALUES.L + SPACING.blockSpacingM * 2),
     siteWidthXL: rem(BREAKPOINT_VALUES.XL + SPACING.blockSpacingM * 2),
     siteMaxWidth: rem(1920),

package/package.json

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