@hlf-fe/pulmo-ui 1.0.1 → 1.1.0

package/dist/components/inputs/text-field/text-field.js

@@ -0,0 +1,65 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { forwardRef, } from "react";
+import { FormError } from "../../../components/inputs/form-error/form-error";
+import { rem } from "../../../styles/units";
+import styled, { css } from "styled-components";
+const variantInputWrapperStyles = {
+    default: css `
+    height: ${rem(56)};
+  `,
+    rounded: css `
+    height: ${rem(48)};
+  `,
+};
+const variantInputStyles = {
+    default: css `
+    border-radius: ${rem(5)};
+  `,
+    rounded: css `
+    border-radius: ${rem(24)};
+  `,
+};
+export const TextField = forwardRef(({ dataTest, value, name, type = "text", variant = "default", placeholder, onChange, onBlur, onFocus, onKeyDown, className, ariaLabel, ariaDescribedBy, register, errors, pattern, inputMode = "text", startAdornment, endAdornment, }, ref) => {
+    return (_jsxs(InputContainer, { children: [_jsxs(InputWrapper, { className: className, variant: variant, startAdornment: startAdornment, children: [startAdornment && _jsx(StartAdornment, { children: startAdornment }), _jsx(StyledInput, { "data-test": dataTest, variant: variant, value: value, ref: ref, type: type, id: name, name: name, placeholder: placeholder, onChange: onChange, onBlur: onBlur, onFocus: onFocus, onKeyDown: onKeyDown, "aria-label": ariaLabel, "aria-describedby": ariaDescribedBy, inputMode: inputMode, pattern: pattern, startAdornment: startAdornment, ...register }), endAdornment && _jsx(EndAdornment, { children: endAdornment })] }), errors && name && _jsx(FormError, { errors: errors, name: name })] }));
+});
+TextField.displayName = "TextField";
+const InputContainer = styled.div `
+  width: 100%;
+`;
+const InputWrapper = styled.div `
+  display: flex;
+  position: relative;
+  ${({ variant }) => variantInputWrapperStyles[variant]};
+`;
+const StyledInput = styled.input `
+  width: 100%;
+  font-family: ${({ theme }) => theme.valueRegular};
+  font-size: ${rem(16)};
+  background-color: ${({ theme }) => theme.white};
+  border: ${rem(1)} solid ${({ theme }) => theme.grayTransparent};
+  padding-right: ${rem(16)};
+
+  &:focus {
+    outline: none;
+    border: ${rem(1)} solid ${({ theme }) => theme.gray};
+  }
+
+  ${({ variant }) => variantInputStyles[variant]};
+  padding-left: ${({ startAdornment }) => (startAdornment ? rem(40) : rem(20))};
+`;
+const StartAdornment = styled.div `
+  position: absolute;
+  display: flex;
+  align-items: center;
+  top: 0;
+  left: ${rem(10)};
+  height: 100%;
+`;
+const EndAdornment = styled.div `
+  position: absolute;
+  display: flex;
+  align-items: center;
+  top: 0;
+  right: ${rem(15)};
+  height: 100%;
+`;

package/dist/components/inputs/text-field/text-field.stories.d.ts

@@ -0,0 +1,11 @@
+import type { Meta, StoryObj } from "@storybook/react";
+import { TextField } from "./text-field";
+declare const meta: Meta<typeof TextField>;
+export default meta;
+type Story = StoryObj<typeof TextField>;
+export declare const Default: Story;
+export declare const Rounded: Story;
+export declare const DefaultWithStartAdornment: Story;
+export declare const DefaultWithEndAdornment: Story;
+export declare const RoundedWithStartAdornment: Story;
+export declare const RoundedWithEndAdornment: Story;

package/dist/components/inputs/text-field/text-field.stories.js

@@ -0,0 +1,51 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { Decorator } from "../../../components/decorator/decorator";
+import { SearchIcon } from "../../../components/icons/search-icon/search-icon";
+import { TextField } from "./text-field";
+const meta = {
+    title: "Inputs/TextField",
+    component: TextField,
+    decorators: [
+        (Story) => (_jsx(Decorator, { maxWidth: "250px", children: _jsx(Story, {}) })),
+    ],
+};
+export default meta;
+export const Default = {
+    args: {
+        placeholder: "placeholder",
+    },
+};
+export const Rounded = {
+    args: {
+        variant: "rounded",
+        placeholder: "placeholder",
+    },
+};
+export const DefaultWithStartAdornment = {
+    args: {
+        variant: "default",
+        placeholder: "placeholder",
+        startAdornment: _jsx(SearchIcon, { width: 26, height: 26 }),
+    },
+};
+export const DefaultWithEndAdornment = {
+    args: {
+        variant: "default",
+        placeholder: "placeholder",
+        endAdornment: _jsx(SearchIcon, { width: 26, height: 26 }),
+    },
+};
+export const RoundedWithStartAdornment = {
+    args: {
+        variant: "rounded",
+        placeholder: "placeholder",
+        startAdornment: _jsx(SearchIcon, { width: 26, height: 26 }),
+    },
+};
+export const RoundedWithEndAdornment = {
+    args: {
+        variant: "rounded",
+        placeholder: "placeholder",
+        endAdornment: _jsx(SearchIcon, { width: 26, height: 26 }),
+    },
+};

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

@@ -0,0 +1,13 @@
+import { ReactNode } from "react";
+export type AccordionItemProps = {
+    heading: string;
+    panelId: string;
+    regionId: string;
+    initiallyExpanded?: boolean;
+    children?: ReactNode;
+    headingLevel?: "h2" | "h3";
+};
+export declare const AccordionItem: ({ heading, headingLevel, panelId, regionId, initiallyExpanded, children, }: AccordionItemProps) => import("react/jsx-runtime").JSX.Element;
+export declare const Accordion: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components/dist/types").Substitute<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {
+    disabled?: boolean;
+}>> & string;

package/dist/components/layout/accordion/accordion.js

@@ -0,0 +1,115 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useEffect, useRef, useState } from "react";
+import styled, { css } from "styled-components";
+import { media } from "../../../styles/mixins";
+import { rem } from "../../../styles/units";
+import { ToggablePlusMinusIcon } from "../../../components/icons/toggable-plus-minus-icon/toggable-plus-minus-icon";
+var PanelState;
+(function (PanelState) {
+    PanelState[PanelState["CLOSED"] = 0] = "CLOSED";
+    PanelState[PanelState["OPENING"] = 1] = "OPENING";
+    PanelState[PanelState["OPENED"] = 2] = "OPENED";
+    PanelState[PanelState["CLOSING"] = 3] = "CLOSING";
+})(PanelState || (PanelState = {}));
+export const AccordionItem = ({ heading, headingLevel, panelId, regionId, initiallyExpanded, children, }) => {
+    const [height, setHeight] = useState(0);
+    const [panelState, setPanelState] = useState(!initiallyExpanded ? PanelState.CLOSED : PanelState.OPENING);
+    const ref = useRef(null);
+    useEffect(() => {
+        if (panelState === PanelState.OPENING ||
+            panelState === PanelState.CLOSING) {
+            setHeight(ref.current?.scrollHeight ?? 0);
+        }
+    }, [panelState]);
+    useEffect(() => {
+        if (height > 0 && panelState === PanelState.CLOSING) {
+            setHeight(0);
+        }
+    }, [height, panelState]);
+    const onAnimationComplete = () => {
+        if (panelState === PanelState.OPENING) {
+            setPanelState(PanelState.OPENED);
+        }
+        else if (panelState === PanelState.CLOSING) {
+            setPanelState(PanelState.CLOSED);
+        }
+    };
+    const togglePanel = () => {
+        const isClosed = panelState === PanelState.CLOSED || panelState === PanelState.CLOSING;
+        setPanelState(isClosed ? PanelState.OPENING : PanelState.CLOSING);
+    };
+    const isExpanded = panelState !== PanelState.CLOSED;
+    return (_jsxs(AccordionPanel, { children: [_jsx(StyledHeading, { as: headingLevel, children: _jsxs(StyledButton, { "data-test": `accordion-header${isExpanded ? "-expanded" : ""}`, id: panelId, "aria-expanded": isExpanded, "aria-controls": regionId, onClick: togglePanel, children: [_jsx(Text, { children: heading }), _jsx(StyledToggablePlusMinusIcon, { isOpen: isExpanded })] }) }), _jsx(AccodrionContent, { "data-test": "accordion-content", ref: ref, id: regionId, role: "region", "aria-labelledby": panelId, contentHeight: height, useAutoHeight: panelState === PanelState.OPENED, onTransitionEnd: onAnimationComplete, children: _jsx(Content, { hidden: !isExpanded, children: children }) })] }));
+};
+const AccodrionContent = styled.div `
+  overflow: hidden;
+  transition: height 0.3s ease-in-out;
+  height: ${({ contentHeight }) => `${contentHeight}px`};
+  height: ${({ useAutoHeight }) => useAutoHeight && "auto"};
+`;
+const Content = styled.div `
+  padding: ${rem(15)} 0;
+  padding-top: 0;
+
+  ${media.M `
+    padding: ${rem(25)} 0;
+    padding-top: 0;
+  `}
+`;
+const AccordionPanel = styled.div `
+  position: relative;
+`;
+const StyledHeading = styled.h2 `
+  position: relative;
+  z-index: 1;
+  margin: 0;
+  border-top: 1px solid rgba(51, 51, 51, 0.2);
+`;
+const Text = styled.span `
+  font-size: ${rem(18)};
+  cursor: pointer;
+  ${media.M `
+   font-size: ${rem(20)};
+    `}
+`;
+const StyledButton = styled.button `
+  width: 100%;
+  display: flex;
+  align-items: center;
+  padding: 0;
+  margin: 0;
+  text-align: left;
+  font-weight: 400;
+  line-height: ${rem(24)};
+  font-size: ${rem(16)};
+  padding: ${rem(15)} 0;
+  background-color: transparent;
+  border: none;
+
+  ${({ theme }) => css `
+    color: ${theme.blackLight};
+    font-family: ${theme.valueBold};
+  `}
+
+  ${media.M `
+    line-height: ${rem(26)};
+    font-size: ${rem(18)};
+    padding: ${rem(25)} 0;
+  `}
+`;
+const StyledToggablePlusMinusIcon = styled(ToggablePlusMinusIcon) `
+  cursor: pointer;
+  margin-left: auto;
+  margin-right: ${rem(10)};
+`;
+export const Accordion = styled.div `
+  border-bottom: 1px solid rgba(51, 51, 51, 0.2);
+  width: 100%;
+
+  ${({ disabled }) => disabled &&
+    css `
+      pointer-events: none;
+      opacity: 0.5;
+      user-select: none;
+    `};
+`;

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

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

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

@@ -0,0 +1,14 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Accordion, AccordionItem } from "./accordion";
+import { Decorator } from "../../../components/decorator/decorator";
+const meta = {
+    title: "Layout/Accordion",
+    component: Accordion,
+    decorators: [
+        (Story) => (_jsx(Decorator, { maxWidth: "800px", children: _jsx(Story, {}) })),
+    ],
+};
+export default meta;
+export const Default = {
+    render: () => (_jsxs(Accordion, { children: [_jsx(AccordionItem, { heading: "In volutpat est eu dolor efficitur", panelId: "1", regionId: "1", children: "Aliquam erat volutpat. Nulla facilisi. Vestibulum eget ullamcorper elit. Praesent mattis arcu ante, in gravida eros pharetra sit amet. Praesent mattis arcu ante, in gravida eros pharetra sit amet. Etiam ac enim lorem. Proin euismod vulputate faucibus." }), _jsx(AccordionItem, { heading: "Vestibulum eget ullamcorper,\r\n        Praesent mattis arcu ante", panelId: "2", regionId: "2", children: "Aliquam erat volutpat. Nulla facilisi. Vestibulum eget ullamcorper, Praesent mattis arcu ante, in gravida eros pharetra sit amet. Etiam ac enim lorem. Proin euismod vulputate faucibus." }), _jsx(AccordionItem, { heading: "In volutpat est eu dolor efficitur", panelId: "3", regionId: "3", children: "Aliquam erat volutpat. Nulla facilisi. Vestibulum eget ullamcorper elit. Praesent mattis arcu ante, in gravida eros pharetra sit amet. Praesent mattis arcu ante, in gravida eros pharetra sit amet. Etiam ac enim lorem. Proin euismod vulputate faucibus." }), _jsx(AccordionItem, { heading: "Vestibulum eget ullamcorper,\r\n        Praesent mattis arcu ante", panelId: "4", regionId: "4", children: "Aliquam erat volutpat. Nulla facilisi. Vestibulum eget ullamcorper, Praesent mattis arcu ante, in gravida eros pharetra sit amet. Etiam ac enim lorem. Proin euismod vulputate faucibus." })] })),
+};

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

@@ -0,0 +1,10 @@
+import { ReactNode, CSSProperties } from "react";
+type Sizes = "sm" | "lg" | "xl";
+type CSSTypes = Pick<CSSProperties, "position" | "display">;
+export type ContainerProps = {
+    children: ReactNode;
+    maxWidth?: Sizes;
+    className?: string;
+} & CSSTypes;
+export declare const Container: ({ children, className, maxWidth, position, display, }: ContainerProps) => import("react/jsx-runtime").JSX.Element;
+export {};

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

@@ -0,0 +1,19 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { siteWidthRow, siteWidthRowXL, siteWidthRowS } from "../../../styles/mixins";
+import styled from "styled-components";
+const MAX_WIDTH = {
+    sm: siteWidthRowS,
+    lg: siteWidthRow,
+    xl: siteWidthRowXL,
+};
+const getMaxWidth = (size) => {
+    return MAX_WIDTH?.[size];
+};
+export const Container = ({ children, className, maxWidth = "lg", position = "static", display = "block", }) => {
+    return (_jsx(Div, { className: className, maxWidth: getMaxWidth(maxWidth), display: display, position: position, children: children }));
+};
+const Div = styled.div `
+  ${({ maxWidth }) => maxWidth};
+  display: ${({ display }) => display};
+  position: ${({ position }) => position};
+`;

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

@@ -0,0 +1,9 @@
+import type { Meta, StoryObj } from "@storybook/react";
+import { Container } from "./container";
+declare const meta: Meta<typeof Container>;
+export default meta;
+type Story = StoryObj<typeof Container>;
+export declare const Default: Story;
+export declare const Small: Story;
+export declare const Large: Story;
+export declare const ExtraLarge: Story;

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

@@ -0,0 +1,47 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { Container } from "./container";
+import styled from "styled-components";
+import { rem } from "../../../styles/units";
+const meta = {
+    title: "Layout/Container",
+    component: Container,
+    decorators: [(Story) => _jsx(Story, {})],
+};
+export default meta;
+const PlaceholderBlock = styled.div `
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  background-color: #d6ebe3;
+  width: 100%;
+  height: ${rem(300)};
+  color: #333;
+  border-radius: ${rem(10)};
+`;
+const Heading = styled.h1 `
+  font-size: ${rem(52)};
+`;
+export const Default = {
+    args: {
+        maxWidth: "lg",
+        children: (_jsx(PlaceholderBlock, { children: _jsx(Heading, { children: "lg" }) })),
+    },
+};
+export const Small = {
+    args: {
+        maxWidth: "sm",
+        children: (_jsx(PlaceholderBlock, { children: _jsx(Heading, { children: "sm" }) })),
+    },
+};
+export const Large = {
+    args: {
+        maxWidth: "lg",
+        children: (_jsx(PlaceholderBlock, { children: _jsx(Heading, { children: "lg" }) })),
+    },
+};
+export const ExtraLarge = {
+    args: {
+        maxWidth: "xl",
+        children: (_jsx(PlaceholderBlock, { children: _jsx(Heading, { children: "xl" }) })),
+    },
+};

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

@@ -0,0 +1,22 @@
+import { IGatsbyImageData } from "gatsby-plugin-image";
+export type ImageProps = {
+    image: {
+        description: string;
+        gatsbyImageData: IGatsbyImageData;
+        url?: string;
+        extension?: string;
+    };
+    imageSmall?: {
+        description?: string;
+        gatsbyImageData?: IGatsbyImageData;
+    };
+    className?: string;
+    imgClassName?: string;
+    width?: string;
+    height?: string;
+    bpSmallDevice?: number;
+    objectPosition?: string;
+    onLoad?: () => void;
+    loading?: "eager" | "lazy";
+};
+export declare const Image: ({ image, imageSmall, className, imgClassName, width, height, bpSmallDevice, objectPosition, loading, onLoad, }: ImageProps) => import("react/jsx-runtime").JSX.Element;

package/dist/components/layout/image/image.js

@@ -0,0 +1,27 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { GatsbyImage, getImage, withArtDirection, } from "gatsby-plugin-image";
+import { BREAKPOINT_VALUES } from "../../../styles/theme";
+import { em } from "../../../styles/units";
+const SVG = "svg";
+export const Image = ({ image, imageSmall, className = "", imgClassName = "", width = "auto", height = "auto", bpSmallDevice = BREAKPOINT_VALUES.M, objectPosition = "50% 50%", loading = "lazy", onLoad, }) => {
+    const desc = image?.description;
+    const contentType = image?.extension;
+    const fileUrl = image?.url;
+    const gatsbyImageData = getImage(image?.gatsbyImageData);
+    const gatsbyImageDataSmall = imageSmall?.gatsbyImageData
+        ? getImage(imageSmall?.gatsbyImageData)
+        : false;
+    const images = gatsbyImageData && gatsbyImageDataSmall
+        ? withArtDirection(gatsbyImageData, [
+            {
+                media: `(max-width: ${em(bpSmallDevice - 1)})`,
+                image: gatsbyImageDataSmall,
+            },
+        ])
+        : gatsbyImageData;
+    if (contentType === SVG && fileUrl)
+        return (_jsx("img", { width: width, height: height, className: className, src: fileUrl, alt: desc }));
+    if (images)
+        return (_jsx(GatsbyImage, { className: className, imgClassName: imgClassName, image: images, loading: loading, alt: desc ?? "", objectPosition: objectPosition, onLoad: onLoad }));
+    return null;
+};

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

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

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

@@ -0,0 +1,33 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { Image } from "./image";
+import { Decorator } from "../../../components/decorator/decorator";
+// @ts-ignore
+import placeholderImage from "assets/placeholder-img.png";
+const mockGatsbyImageData = {
+    layout: "constrained",
+    images: {
+        fallback: {
+            src: placeholderImage,
+            srcSet: `${placeholderImage} 1x`,
+            sizes: "(min-width: 600px) 600px, 100vw",
+        },
+    },
+    width: 600,
+    height: 400,
+};
+const meta = {
+    title: "Layout/Image",
+    component: Image,
+    decorators: [
+        (Story) => (_jsx(Decorator, { children: _jsx(Story, {}) })),
+    ],
+};
+export default meta;
+export const Default = {
+    args: {
+        image: {
+            description: "Exempelbild",
+            gatsbyImageData: mockGatsbyImageData,
+        },
+    },
+};

package/dist/components/modules/email-signup-form/email-signup-form.d.ts

@@ -0,0 +1,16 @@
+export type EmailSignupFormProps = {
+    heading?: string;
+    description?: string;
+    localeText: {
+        emailLabel: string;
+        sendButtonText: string;
+        successMessage?: string;
+        errorMessage?: string;
+    };
+    onSubmit: (email: string) => void;
+    onReset?: () => void;
+    loading: boolean;
+    success: boolean;
+    failed: boolean;
+};
+export declare const EmailSignupForm: ({ heading, description, localeText, onSubmit, loading, success, failed, }: EmailSignupFormProps) => import("react/jsx-runtime").JSX.Element;

package/dist/components/modules/email-signup-form/email-signup-form.js

@@ -0,0 +1,63 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useForm } from "react-hook-form";
+import { yupResolver } from "@hookform/resolvers/yup";
+import * as yup from "yup";
+import { TextField } from "../../../components/inputs/text-field/text-field";
+import { LoadingButton } from "../../../components/buttons/loading-button/loading-button";
+import { FormLabel } from "../../../components/inputs/form-label/form-label";
+import { Alert } from "../../../components/feedback/alert/alert";
+import styled from "styled-components";
+import { media } from "../../../styles/mixins";
+import { rem } from "../../../styles/units";
+const schema = yup.object({
+    email: yup.string().email().required(),
+});
+export const EmailSignupForm = ({ heading, description, localeText, onSubmit, loading, success, failed, }) => {
+    const { emailLabel, sendButtonText, successMessage, errorMessage } = localeText;
+    const { register, handleSubmit, formState: { errors }, } = useForm({
+        mode: "onChange",
+        resolver: yupResolver(schema),
+    });
+    return (_jsx(Container, { children: !success ? (_jsxs(Box, { children: [heading && _jsx(Heading, { children: heading }), description && _jsx(Text, { children: description }), _jsx(FormLabel, { htmlFor: "email", children: emailLabel }), _jsxs(TextFieldAndButton, { children: [_jsx(TextField, { type: "email", name: "email", errors: errors, register: register("email") }), _jsx(StyledLoadingButton, { onClick: handleSubmit(({ email }) => onSubmit(email)), children: sendButtonText, disabled: loading, loading: loading, btnSize: "l", fullWidthMobile: true })] }), failed && _jsx(StyledAlert, { severity: "error", children: errorMessage })] })) : (_jsx(BoxCenter, { children: _jsx(Heading, { children: successMessage }) })) }));
+};
+const Container = styled.form ``;
+const TextFieldAndButton = styled.div `
+  display: flex;
+  flex-direction: column;
+  width: 100%;
+
+  ${media.L `
+    flex-direction: row;
+  `}
+`;
+const Box = styled.div ``;
+const BoxCenter = styled(Box) `
+  display: flex;
+  width: 100%;
+  justify-content: center;
+  align-items: center;
+`;
+const Heading = styled.h2 `
+  font-family: ${({ theme }) => theme.valueBold};
+  font-size: ${rem(32)};
+  color: ${({ theme }) => theme.blackLight};
+  line-height: 1.5;
+  margin: 0;
+`;
+const Text = styled.p `
+  color: ${({ theme }) => theme.blackLight};
+  font-size: ${rem(18)};
+`;
+const StyledAlert = styled(Alert) `
+  margin-top: ${rem(15)};
+`;
+const StyledLoadingButton = styled(LoadingButton) `
+  width: 100%;
+  margin-top: ${rem(15)};
+
+  ${media.L `
+    margin-left: ${rem(15)};
+    margin-top: 0;
+    width: auto;
+  `}
+`;

package/dist/components/modules/email-signup-form/email-signup-form.stories.d.ts

@@ -0,0 +1,9 @@
+import type { Meta, StoryObj } from "@storybook/react";
+import { EmailSignupForm } from "./email-signup-form";
+declare const meta: Meta<typeof EmailSignupForm>;
+export default meta;
+type Story = StoryObj<typeof EmailSignupForm>;
+export declare const Default: Story;
+export declare const Loading: Story;
+export declare const Error: Story;
+export declare const Success: Story;

package/dist/components/modules/email-signup-form/email-signup-form.stories.js

@@ -0,0 +1,51 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { EmailSignupForm } from "./email-signup-form";
+import { Decorator } from "../../../components/decorator/decorator";
+const meta = {
+    title: "Modules/EmailSignupForm",
+    component: EmailSignupForm,
+    decorators: [
+        (Story) => (_jsx(Decorator, { maxWidth: "600px", children: _jsx(Story, {}) })),
+    ],
+};
+export default meta;
+const baseArgs = {
+    heading: "Fusce dapibus mollis orci, at lobortis nisi mattis eget",
+    description: "Sed in tellus ex. Integer eget placerat nulla, eu tincidunt orci. Morbi erat sapien, laoreet eget commodo vel, consectetur vitae arcu.",
+    localeText: {
+        emailLabel: "Your email address",
+        sendButtonText: "Subscribe",
+        successMessage: "Thank you for subscribing!",
+        goBackText: "Back to form",
+        errorMessage: undefined,
+    },
+    loading: false,
+    success: false,
+    onSubmit: (email) => alert(`Submitted: ${email}`),
+    onReset: () => alert("Reset"),
+};
+export const Default = {
+    args: baseArgs,
+};
+export const Loading = {
+    args: {
+        ...baseArgs,
+        loading: true,
+    },
+};
+export const Error = {
+    args: {
+        ...baseArgs,
+        localeText: {
+            ...baseArgs.localeText,
+            errorMessage: "Something went wrong. Please try again.",
+        },
+        failed: true,
+    },
+};
+export const Success = {
+    args: {
+        ...baseArgs,
+        success: true,
+    },
+};

package/dist/components/modules/entry-list/entry-list.d.ts

@@ -0,0 +1,27 @@
+import { media } from "../../../styles/mixins";
+export type EntryListProps = {
+    children: React.ReactNode;
+};
+export type EntryListItemProps = {
+    children: React.ReactNode;
+};
+export type EntryListHeadingProps = {
+    children: React.ReactNode;
+    fontSizeMobile?: number;
+    fontSizeDesktop?: number;
+    breakpoint?: keyof typeof media;
+    as?: "h2" | "h3";
+};
+export type EntryListTextProps = {
+    children: React.ReactNode;
+    fontSizeMobile?: number;
+    fontSizeDesktop?: number;
+    breakpoint?: keyof typeof media;
+    as?: "span" | "p";
+    bold?: boolean;
+    color?: string;
+};
+export declare const EntryList: ({ children }: EntryListProps) => import("react/jsx-runtime").JSX.Element;
+export declare const EntryListItem: ({ children }: EntryListItemProps) => import("react/jsx-runtime").JSX.Element;
+export declare const EntryListText: ({ children, fontSizeMobile, fontSizeDesktop, breakpoint, bold, as, color, }: EntryListTextProps) => import("react/jsx-runtime").JSX.Element;
+export declare const EntryListHeading: ({ children, fontSizeMobile, fontSizeDesktop, as, breakpoint, }: EntryListHeadingProps) => import("react/jsx-runtime").JSX.Element;