@hlf-fe/pulmo-ui 1.0.1 → 1.2.0

package/dist/components/navigation/pagination/pagination.stories.d.ts

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

package/dist/components/navigation/pagination/pagination.stories.js

@@ -0,0 +1,21 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { useState } from "react";
+import { Pagination } from "./pagination";
+import { Decorator } from "../../../components/decorator/decorator";
+const meta = {
+    title: "Navigation/Pagination",
+    component: Pagination,
+    decorators: [
+        (Story) => (_jsx(Decorator, { children: _jsx(Story, {}) })),
+    ],
+};
+export default meta;
+export const Default = {
+    render: () => {
+        const [page, setPage] = useState(0);
+        return (_jsx(Pagination, { currentPage: page, numberOfPages: 27, indexStartsAt: 0, onChange: (newPage) => setPage(newPage), localeText: {
+                prePage: "Previous page",
+                nextPage: "Next page",
+            } }));
+    },
+};

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/constants/general.d.ts

@@ -0,0 +1,4 @@
+export declare const INFO = "info";
+export declare const WARNING = "warning";
+export declare const ERROR = "error";
+export declare const SUCCESS = "success";

package/dist/constants/general.js

@@ -0,0 +1,5 @@
+// Severities
+export const INFO = "info";
+export const WARNING = "warning";
+export const ERROR = "error";
+export const SUCCESS = "success";

package/dist/hoc/withDefaultTheme.d.ts

@@ -1 +1 @@
-export declare function withDefaultTheme<T extends object>(Component: React.ComponentType<T>): React.FC<T>;
+export declare const withDefaultTheme: <T extends object>(Component: React.ComponentType<T>) => React.FC<T>;

package/dist/hoc/withDefaultTheme.js

@@ -2,11 +2,7 @@ import { jsx as _jsx } from "react/jsx-runtime";
 import { useContext } from "react";
 import { THEME_SETTINGS } from "../styles/theme";
 import { ThemeContext, ThemeProvider } from "styled-components";
-export function withDefaultTheme(Component) {
-    return function Wrapped(props) {
-        const theme = useContext(ThemeContext);
-        if (theme)
-            return _jsx(Component, { ...props });
-        return (_jsx(ThemeProvider, { theme: THEME_SETTINGS, children: _jsx(Component, { ...props }) }));
-    };
-}
+export const withDefaultTheme = (Component) => (props) => {
+    const theme = useContext(ThemeContext);
+    return theme ? (_jsx(Component, { ...props })) : (_jsx(ThemeProvider, { theme: THEME_SETTINGS, children: _jsx(Component, { ...props }) }));
+};

package/dist/index.d.ts

@@ -1,3 +1,51 @@
-import { ButtonProps } from "./components/buttons/button/button";
-export type { ButtonProps } from "./components/buttons/button/button";
+import { type ButtonProps } from "./components/buttons/button/button";
+import { type TextButtonProps } from "./components/buttons/text-button/text-button";
+import { type LoadingButtonProps } from "./components/buttons/loading-button/loading-button";
+import { type AlertProps } from "./components/feedback/alert/alert";
+import { type LoadingSpinnerProps } from "./components/icons/loading-spinner/loading-spinner";
+import { type FormErrorProps } from "./components/inputs/form-error/form-error";
+import { type FormLabelProps } from "./components/inputs/form-label/form-label";
+import { type TextFieldProps } from "./components/inputs/text-field/text-field";
+import { type EmailSignupFormProps } from "./components/modules/email-signup-form/email-signup-form";
+import { type ImageProps } from "./components/layout/image/image";
+import { type ContainerProps } from "./components/layout/container/container";
+import { type EntryListProps, type EntryListItemProps, type EntryListHeadingProps, type EntryListTextProps } from "./components/modules/entry-list/entry-list";
+import { type DropdownProps } from "./components/inputs/dropdown/dropdown";
+import { type PaginationProps } from "./components/navigation/pagination/pagination";
+import { type AccordionItemProps } from "./components/layout/accordion/accordion";
+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>;
+export declare const TextButton: import("react").FC<TextButtonProps>;
+export declare const Alert: import("react").FC<AlertProps>;
+export declare const FormError: import("react").FC<FormErrorProps>;
+export declare const FormLabel: import("react").FC<FormLabelProps>;
+export declare const TextField: import("react").FC<TextFieldProps>;
+export declare const EmailSignupForm: import("react").FC<EmailSignupFormProps>;
+export declare const Image: import("react").FC<ImageProps>;
+export declare const Container: import("react").FC<ContainerProps>;
+export declare const EntryList: import("react").FC<EntryListProps>;
+export declare const EntryListItem: import("react").FC<EntryListItemProps>;
+export declare const EntryListText: import("react").FC<EntryListTextProps>;
+export declare const EntryListHeading: import("react").FC<EntryListHeadingProps>;
+export declare const Dropdown: import("react").FC<DropdownProps>;
+export declare const Pagination: import("react").FC<PaginationProps>;
+export declare const Accordion: import("react").FC<import("styled-components/dist/types").Substitute<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {
+    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

@@ -1,3 +1,53 @@
 import { withDefaultTheme } from "./hoc/withDefaultTheme";
-import { Button as RawButton, } from "./components/buttons/button/button";
-export const Button = withDefaultTheme(RawButton);
+// Buttons
+import { Button as ButtonComponent, } from "./components/buttons/button/button";
+import { TextButton as TextButtonComponent, } from "./components/buttons/text-button/text-button";
+import { LoadingButton as LoadingButtonComponent, } from "./components/buttons/loading-button/loading-button";
+// Components
+import { Alert as AlertComponent, } from "./components/feedback/alert/alert";
+import { LoadingSpinner as LoadingSpinnerComponent, } from "./components/icons/loading-spinner/loading-spinner";
+import { FormError as FormErrorComponent, } from "./components/inputs/form-error/form-error";
+import { FormLabel as FormLabelComponent, } from "./components/inputs/form-label/form-label";
+import { TextField as TextFieldComponent, } from "./components/inputs/text-field/text-field";
+import { EmailSignupForm as EmailSignupFormComponent, } from "./components/modules/email-signup-form/email-signup-form";
+import { Image as ImageComponent, } from "./components/layout/image/image";
+import { Container as ContainerComponent, } from "./components/layout/container/container";
+import { EntryList as EntryListComponent, EntryListItem as EntryListItemComponent, EntryListText as EntryListTextComponent, EntryListHeading as EntryListHeadingComoponent, } from "./components/modules/entry-list/entry-list";
+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);
+export const LoadingButton = withDefaultTheme(LoadingButtonComponent);
+export const TextButton = withDefaultTheme(TextButtonComponent);
+export const Alert = withDefaultTheme(AlertComponent);
+export const FormError = withDefaultTheme(FormErrorComponent);
+export const FormLabel = withDefaultTheme(FormLabelComponent);
+export const TextField = withDefaultTheme(TextFieldComponent);
+export const EmailSignupForm = withDefaultTheme(EmailSignupFormComponent);
+export const Image = withDefaultTheme(ImageComponent);
+export const Container = withDefaultTheme(ContainerComponent);
+export const EntryList = withDefaultTheme(EntryListComponent);
+export const EntryListItem = withDefaultTheme(EntryListItemComponent);
+export const EntryListText = withDefaultTheme(EntryListTextComponent);
+export const EntryListHeading = withDefaultTheme(EntryListHeadingComoponent);
+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/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/dist/styles/mixins.js

@@ -94,8 +94,8 @@ export const siteWidthRow = () => css `
   ${media.M `
     margin-bottom: ${SPACING.spacingXL};
     margin-top: ${SPACING.spacingXL};
-    margin-left: ${rem(24)};
-    margin-right: ${rem(24)};
+    margin-left: ${rem(SPACING.blockSpacingM)};
+    margin-right: ${rem(SPACING.blockSpacingM)};
   `}
 
   ${media.L `
@@ -103,6 +103,8 @@ export const siteWidthRow = () => css `
     margin-right: auto;
     margin-bottom: ${SPACING.spacingXXL};
     margin-left: auto;
+    padding-left: ${rem(SPACING.blockSpacingM)};
+    padding-right: ${rem(SPACING.blockSpacingM)};
   `}
 `;
 export const siteWidthRowXL = () => css `
@@ -120,8 +122,8 @@ export const siteWidthRowXL = () => css `
   ${media.M `
     margin-bottom: ${SPACING.spacingXL};
     margin-top: ${SPACING.spacingXL};
-    margin-left: ${rem(24)};
-    margin-right: ${rem(24)};
+    margin-left: ${rem(SPACING.blockSpacingM)};
+    margin-right: ${rem(SPACING.blockSpacingM)};
   `}
 
   ${media.XL `
@@ -129,6 +131,8 @@ export const siteWidthRowXL = () => css `
     margin-right: auto;
     margin-bottom: ${SPACING.spacingXXL};
     margin-left: auto;
+    padding-left: ${rem(SPACING.blockSpacingM)};
+    padding-right: ${rem(SPACING.blockSpacingM)};
   `}
 `;
 export const fullWidthRow = () => css `

package/dist/styles/theme.d.ts

@@ -7,6 +7,16 @@ export declare const BREAKPOINT_VALUES: {
     XL: number;
     XXL: number;
 };
+export declare const SPACING: {
+    spacingXXS: string;
+    spacingXS: string;
+    spacingS: string;
+    spacingM: string;
+    spacingL: string;
+    spacingXL: string;
+    spacingXXL: string;
+    blockSpacingM: number;
+};
 export declare const VARIABLES: {
     siteWidthS: string;
     siteWidth: string;
@@ -20,15 +30,6 @@ export declare const THEME_SPACING: {
     lg: string;
     xl: string;
 };
-export declare const SPACING: {
-    spacingXXS: string;
-    spacingXS: string;
-    spacingS: string;
-    spacingM: string;
-    spacingL: string;
-    spacingXL: string;
-    spacingXXL: string;
-};
 export declare const FONTS: {
     valueRegular: string;
     valueMedium: string;
@@ -81,6 +82,7 @@ export declare const THEME_SETTINGS: {
     spacingL: string;
     spacingXL: string;
     spacingXXL: string;
+    blockSpacingM: number;
     skyBlue: string;
     black: string;
     blackLight: string;

package/dist/styles/theme.js

@@ -8,10 +8,20 @@ export const BREAKPOINT_VALUES = {
     XL: 1200,
     XXL: 1440,
 };
+export const SPACING = {
+    spacingXXS: rem(6),
+    spacingXS: rem(8),
+    spacingS: rem(12),
+    spacingM: rem(16),
+    spacingL: rem(32),
+    spacingXL: rem(40),
+    spacingXXL: rem(48),
+    blockSpacingM: 24,
+};
 export const VARIABLES = {
     siteWidthS: rem(BREAKPOINT_VALUES.S_ALT),
-    siteWidth: rem(BREAKPOINT_VALUES.L),
-    siteWidthXL: rem(BREAKPOINT_VALUES.XL),
+    siteWidth: rem(BREAKPOINT_VALUES.L + SPACING.blockSpacingM * 2),
+    siteWidthXL: rem(BREAKPOINT_VALUES.XL + SPACING.blockSpacingM * 2),
     siteMaxWidth: rem(1920),
     mobileNavHeight: 56,
 };
@@ -21,15 +31,6 @@ export const THEME_SPACING = {
     lg: rem(32),
     xl: rem(40),
 };
-export const SPACING = {
-    spacingXXS: rem(6),
-    spacingXS: rem(8),
-    spacingS: rem(12),
-    spacingM: rem(16),
-    spacingL: rem(32),
-    spacingXL: rem(40),
-    spacingXXL: rem(48),
-};
 export const FONTS = {
     valueRegular: '"ValueRegular", Arial, sans-serif',
     valueMedium: '"ValueMedium", Arial, sans-serif',