@postenbring/hedwig-react 0.0.81 → 0.0.82

package/src/link/link.tsx

@@ -0,0 +1,46 @@
+import * as React from "react";
+import { clsx } from "@postenbring/hedwig-css/typed-classname";
+import { forwardRef } from "react";
+import { Slot } from "@radix-ui/react-slot";
+
+export interface LinkProps extends React.AnchorHTMLAttributes<HTMLAnchorElement> {
+  /**
+   * The visual style of the link
+   */
+  variant?: "underline" | "solid" | "inverted" | "no-underline";
+
+  /**
+   * Font size of the link
+   */
+  size?: "small" | "medium" | "large";
+
+  children: React.ReactNode;
+
+  /**
+   * Change the default rendered element for the one passed as a child, merging their props and behavior.
+   *
+   * @default false
+   */
+  asChild?: boolean;
+}
+
+export const Link = forwardRef<HTMLAnchorElement, LinkProps>(
+  ({ asChild, children, variant = "underline", size = "medium", className, ...rest }, ref) => {
+    const Component = asChild ? Slot : "a";
+    return (
+      <Component
+        className={clsx(
+          "hds-link",
+          variant !== "underline" && `hds-link--${variant}`,
+          size !== "medium" && `hds-link--${size}`,
+          className as undefined,
+        )}
+        ref={ref}
+        {...rest}
+      >
+        {children}
+      </Component>
+    );
+  },
+);
+Link.displayName = "Link";

package/src/list/index.tsx

@@ -0,0 +1,5 @@
+export { UnorderedList, OrderedList } from "./list";
+export type * from "./list";
+
+export { LinkList } from "./link-list";
+export type * from "./link-list";

package/src/list/link-list.stories.tsx

@@ -0,0 +1,38 @@
+/* eslint-disable import/no-extraneous-dependencies -- storybook story */
+import type { Meta, StoryObj } from "@storybook/react";
+import { Link } from "../link";
+import { LinkList } from "./link-list";
+
+type Story = StoryObj<typeof LinkList>;
+
+const linkListItems = () => (
+  <>
+    <li>
+      <Link href="https://hedwig.posten.no">Link somewhere</Link>
+    </li>
+    <li>
+      <Link href="https://hedwig.posten.no" target="_blank">
+        Link somewhere
+      </Link>
+    </li>
+    <li>
+      <Link href="https://hedwig.posten.no" target="_self">
+        Link somewhere
+      </Link>
+    </li>
+  </>
+);
+
+export const LinkListStory: Story = {
+  name: "Link List",
+  args: {
+    size: "medium",
+    children: linkListItems(),
+  },
+};
+
+const meta: Meta<typeof LinkList> = {
+  title: "Link List",
+  component: LinkList,
+};
+export default meta;

package/src/list/link-list.tsx

@@ -0,0 +1,26 @@
+import { clsx } from "@postenbring/hedwig-css/typed-classname";
+import { forwardRef } from "react";
+import type { ListProps } from "./list";
+import { UnorderedList } from "./list";
+
+export interface LinkListProps extends Omit<ListProps, "listStyle"> {
+  children?: React.ReactElement<HTMLLIElement> | React.ReactElement<HTMLLIElement>[];
+}
+
+/**
+ * Show a list of links
+ *
+ * For other list types use `UnorderedList` and `OrderedList`, or use your own list component using the semantic `ul` and `ol` tags.
+ */
+export const LinkList = forwardRef<HTMLUListElement, LinkListProps>(
+  ({ className, ...rest }, ref) => {
+    return (
+      <UnorderedList
+        ref={ref}
+        className={clsx("hds-list--link-list", className as undefined)}
+        {...rest}
+      />
+    );
+  },
+);
+LinkList.displayName = "LinkList";

package/src/list/list.stories.tsx

@@ -0,0 +1,71 @@
+/* eslint-disable import/no-extraneous-dependencies -- storybook story */
+import type { StoryObj, Meta } from "@storybook/react";
+import { HStack } from "../layout";
+import { OrderedList, UnorderedList } from ".";
+
+type Story = StoryObj<typeof UnorderedList>;
+
+const listItems = (
+  <>
+    <li>List item 1</li>
+    <li>List item 2</li>
+    <li>List item 3</li>
+  </>
+);
+
+export const UnorderedListStory: Story = {
+  name: "Unordered List",
+  args: {
+    children: listItems,
+  },
+  render: (props) => (
+    <HStack gap="16">
+      <UnorderedList {...props} size="small" />
+      <UnorderedList {...props} size="medium" />
+      <UnorderedList {...props} size="large" />
+    </HStack>
+  ),
+};
+
+export const OrderedListStory: Story = {
+  name: "Ordered List",
+  args: {
+    children: listItems,
+  },
+  render: (props) => (
+    <HStack gap="16">
+      <OrderedList {...(props as React.HTMLAttributes<HTMLOListElement>)} size="small" />
+      <OrderedList {...(props as React.HTMLAttributes<HTMLOListElement>)} size="medium" />
+      <OrderedList {...(props as React.HTMLAttributes<HTMLOListElement>)} size="large" />
+    </HStack>
+  ),
+};
+
+export const NestedLists: Story = {
+  render: () => (
+    <UnorderedList>
+      <li>
+        Varer med verdi opp til 3000 kroner der mva. er betalt i utenlandsk nettbutikk
+        (VOEC-ordningen): Ingen fortolling.
+      </li>
+      <li>
+        Næringsmidler, særavgiftsvarer og restriksjonsbelagte varer uansett verdi, samt varer med
+        verdi over&nbsp;3000 kroner: Fortolling til 270&nbsp;kroner (gjelder fra 01.12.2023).
+      </li>
+      <li>
+        Andre varer med verdi mellom 0 og 3000 kroner blir fortollet basert på verdi av innholdet i
+        sendingen. Posten har satt ned prisene for å utføre fortollingen.
+        <UnorderedList>
+          <li>Verdi på vare 0–500 kroner: 45 kroner</li>
+          <li>Verdi på vare&nbsp;500–3000 kroner: 75 kroner</li>
+        </UnorderedList>
+      </li>
+    </UnorderedList>
+  ),
+};
+
+const meta: Meta<typeof UnorderedList> = {
+  title: "List",
+  component: UnorderedList,
+};
+export default meta;

package/src/list/list.tsx

@@ -0,0 +1,65 @@
+import { forwardRef, type HTMLAttributes } from "react";
+import { clsx } from "@postenbring/hedwig-css/typed-classname";
+
+export interface ListProps extends HTMLAttributes<HTMLOListElement | HTMLUListElement> {
+  /**
+   * Sets the size of the items (font)
+   *
+   * @default "medium"
+   */
+  size?: "small" | "medium" | "large";
+}
+
+/**
+ * An unordered list of simple items, often text. You can nest other lists inside this component.
+ *
+ * If you have other list needs, you can build your own using the semantic `ul` and `ol` tags.
+ *
+ * @example
+ * ```tsx
+ * <UnorderedList>
+ *  <li>Item 1</li>
+ *  <li>Item 2</li>
+ *  <li>Item 3</li>
+ * </UnorderedList>
+ * ```
+ */
+export const UnorderedList = forwardRef<HTMLUListElement, ListProps>(
+  ({ size = "medium", className, ...rest }, ref) => {
+    return (
+      <ul
+        ref={ref}
+        className={clsx("hds-list", `hds-list--${size}`, className as undefined)}
+        {...rest}
+      />
+    );
+  },
+);
+UnorderedList.displayName = "UnorderedList";
+
+/**
+ * An ordered list of simple items
+ *
+ * If you have other list needs, you can build your own using the semantic `ul` and `ol` tags.
+ *
+ * @example
+ * ```tsx
+ * <OrderedList>
+ *  <li>Item 1</li>
+ *  <li>Item 2</li>
+ *  <li>Item 3</li>
+ * </OrderedList>
+ * ```
+ */
+export const OrderedList = forwardRef<HTMLOListElement, ListProps>(
+  ({ size = "medium", className, ...rest }, ref) => {
+    return (
+      <ol
+        ref={ref}
+        className={clsx("hds-list", `hds-list--${size}`, className as undefined)}
+        {...rest}
+      />
+    );
+  },
+);
+OrderedList.displayName = "OrderedList";

package/src/message/index.tsx

@@ -0,0 +1,2 @@
+export { Message, MessageTitle, MessageDescription } from "./message";
+export type * from "./message";

package/src/message/message.stories.tsx

@@ -0,0 +1,93 @@
+/* eslint-disable import/no-extraneous-dependencies -- storybook story */
+import type { Meta, StoryObj } from "@storybook/react";
+import { Message } from ".";
+
+const meta: Meta<typeof Message> = {
+  title: "Message",
+  component: Message,
+  args: {
+    children: (
+      <>
+        <Message.Title>Message header</Message.Title>
+        <Message.Description>
+          Message header Message description. A more detailed explanation of whats happening, but
+          not too long.
+        </Message.Description>
+      </>
+    ),
+  },
+  argTypes: {
+    variant: {
+      options: ["success", "attention", "warning", "neutral"],
+      control: {
+        type: "radio",
+      },
+    },
+  },
+};
+
+export default meta;
+
+type Story = StoryObj<typeof Message>;
+export const Success: Story = {
+  args: {
+    variant: "success",
+  },
+};
+
+export const Attention: Story = {
+  args: {
+    variant: "attention",
+  },
+};
+
+export const Warning: Story = {
+  args: {
+    variant: "warning",
+  },
+};
+
+export const Neutral: Story = {
+  args: {
+    variant: "neutral",
+    icon: (
+      <svg
+        aria-hidden
+        fill="none"
+        height="32"
+        viewBox="0 0 24 24"
+        width="32"
+        xmlns="http://www.w3.org/2000/svg"
+      >
+        <path
+          d="M12 19.3125C12.2602 19.3125 12.9492 19.0594 13.6734 17.6109C13.9828 16.9887 14.25 16.2328 14.4469 15.375H9.55312C9.75 16.2328 10.0172 16.9887 10.3266 17.6109C11.0508 19.0594 11.7398 19.3125 12 19.3125ZM9.27539 13.6875H14.7246C14.7809 13.1496 14.8125 12.5836 14.8125 12C14.8125 11.4164 14.7809 10.8504 14.7246 10.3125H9.27539C9.21914 10.8504 9.1875 11.4164 9.1875 12C9.1875 12.5836 9.21914 13.1496 9.27539 13.6875ZM9.55312 8.625H14.4469C14.25 7.76719 13.9828 7.01133 13.6734 6.38906C12.9492 4.94063 12.2602 4.6875 12 4.6875C11.7398 4.6875 11.0508 4.94063 10.3266 6.38906C10.0172 7.01133 9.75 7.76719 9.55312 8.625ZM16.4191 10.3125C16.4719 10.8574 16.4965 11.4234 16.4965 12C16.4965 12.5766 16.4684 13.1426 16.4191 13.6875H19.1156C19.2422 13.1461 19.3125 12.5801 19.3125 12C19.3125 11.4199 19.2457 10.8539 19.1156 10.3125H16.4227H16.4191ZM18.4863 8.625C17.734 7.18008 16.5141 6.01992 15.027 5.34141C15.5227 6.24141 15.9164 7.36289 16.173 8.625H18.4898H18.4863ZM7.82344 8.625C8.08008 7.36289 8.47383 6.24492 8.96953 5.34141C7.48242 6.01992 6.2625 7.18008 5.51016 8.625H7.82695H7.82344ZM4.88437 10.3125C4.75781 10.8539 4.6875 11.4199 4.6875 12C4.6875 12.5801 4.7543 13.1461 4.88437 13.6875H7.58086C7.52813 13.1426 7.50352 12.5766 7.50352 12C7.50352 11.4234 7.53164 10.8574 7.58086 10.3125H4.88437ZM15.027 18.6586C16.5141 17.9801 17.734 16.8199 18.4863 15.375H16.173C15.9164 16.6371 15.5227 17.7551 15.027 18.6586ZM8.97305 18.6586C8.47734 17.7586 8.08359 16.6371 7.82695 15.375H5.51016C6.2625 16.8199 7.48242 17.9801 8.96953 18.6586H8.97305ZM12 21C9.61305 21 7.32387 20.0518 5.63604 18.364C3.94821 16.6761 3 14.3869 3 12C3 9.61305 3.94821 7.32387 5.63604 5.63604C7.32387 3.94821 9.61305 3 12 3C14.3869 3 16.6761 3.94821 18.364 5.63604C20.0518 7.32387 21 9.61305 21 12C21 14.3869 20.0518 16.6761 18.364 18.364C16.6761 20.0518 14.3869 21 12 21Z"
+          fill="currentColor"
+        />
+      </svg>
+    ),
+    children: (
+      <>
+        <Message.Title>Custom icons</Message.Title>
+        <Message.Description>Icon is a prop, so you can use whatever you like.</Message.Description>
+      </>
+    ),
+  },
+};
+
+export const TitleOnly: Story = {
+  args: {
+    variant: "attention",
+    children: <Message.Title>Message header</Message.Title>,
+  },
+};
+
+export const LongDescriptionOnly: Story = {
+  args: {
+    children: (
+      <Message.Description>
+        Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec et dolor id nisl consectetur
+        aliquet. Donec euismod, nibh et aliquam tincidunt, nunc urna ultricies
+      </Message.Description>
+    ),
+  },
+};

package/src/message/message.tsx

@@ -0,0 +1,89 @@
+import { forwardRef } from "react";
+import { clsx } from "@postenbring/hedwig-css/typed-classname";
+import { Slot } from "@radix-ui/react-slot";
+import { Box, type BoxProps } from "../box/box";
+
+interface MessageTitleProps extends React.HTMLAttributes<HTMLParagraphElement> {
+  /**
+   * Change the default rendered element for the one passed as a child, merging their props and behavior.
+   *
+   * @default false
+   */
+  asChild?: boolean;
+}
+export const MessageTitle = forwardRef<HTMLParagraphElement, MessageTitleProps>(
+  ({ asChild, className, ...rest }, ref) => {
+    const Component = asChild ? Slot : "div";
+    return (
+      <Component
+        className={clsx("hds-message__title", className as undefined)}
+        ref={ref}
+        {...rest}
+      />
+    );
+  },
+);
+MessageTitle.displayName = "Message.Title";
+
+interface MessageDescriptionProps extends React.HTMLAttributes<HTMLParagraphElement> {
+  /**
+   * Change the default rendered element for the one passed as a child, merging their props and behavior.
+   *
+   * @default false
+   */
+  asChild?: boolean;
+}
+export const MessageDescription = forwardRef<HTMLParagraphElement, MessageDescriptionProps>(
+  ({ asChild, className, ...rest }, ref) => {
+    const Component = asChild ? Slot : "div";
+    return (
+      <Component
+        className={clsx("hds-message__description", className as undefined)}
+        ref={ref}
+        {...rest}
+      />
+    );
+  },
+);
+MessageDescription.displayName = "Message.Description";
+
+export type MessageProps = (
+  | {
+      variant?: "success" | "attention" | "warning";
+      icon?: never;
+      iconClassName?: never;
+    }
+  | {
+      variant: "neutral";
+      icon?: React.ReactNode;
+      iconClassName?: string;
+    }
+) &
+  Omit<BoxProps, "variant" | "asChild">;
+
+export const Message = forwardRef<HTMLDivElement, MessageProps>(
+  ({ children, className, variant = "success", icon, iconClassName, ...rest }, ref) => {
+    return (
+      <Box
+        className={clsx(`hds-message`, `hds-message--${variant}`, className as undefined)}
+        ref={ref}
+        {...rest}
+      >
+        {variant === "neutral" && (
+          <div className={clsx("hds-message--neutral__icon", iconClassName as undefined)}>
+            {icon}
+          </div>
+        )}
+        {children}
+      </Box>
+    );
+  },
+) as MessageType;
+Message.displayName = "Message";
+
+type MessageType = ReturnType<typeof forwardRef<HTMLDivElement, MessageProps>> & {
+  Title: typeof MessageTitle;
+  Description: typeof MessageDescription;
+};
+Message.Title = MessageTitle;
+Message.Description = MessageDescription;

package/src/modal/index.tsx

@@ -0,0 +1,3 @@
+export { Modal, ModalHeader, ModalContent, ModalFooter } from "./modal";
+
+export type * from "./modal";

package/src/modal/modal.stories.tsx

@@ -0,0 +1,147 @@
+/* eslint-disable import/no-extraneous-dependencies -- storybook story */
+import type { Meta, StoryObj } from "@storybook/react";
+import { useRef } from "react";
+import { PrimaryButton } from "../button";
+import { Link } from "../link";
+import { Message } from "../message";
+import { StyledHtml } from "../styled-html";
+import { HStack } from "../layout";
+import { Modal } from ".";
+
+const meta: Meta<typeof Modal> = {
+  title: "Modal",
+  component: Modal,
+};
+
+export default meta;
+
+type Story = StoryObj<typeof Modal>;
+export const Main = {
+  render: function Render(args) {
+    const modalRef = useRef<HTMLDialogElement>(null);
+    const onClose = () => modalRef.current?.close();
+    const onMainAction = () => modalRef.current?.close();
+
+    return (
+      <>
+        <PrimaryButton onClick={() => modalRef.current?.showModal()}>Open Modal</PrimaryButton>
+        <Modal ref={modalRef} {...args}>
+          <Modal.Header>Dialog header</Modal.Header>
+          <Modal.Content>
+            <p>
+              Dialog header Dialog description - a description of what is about to happen and maybe
+              something about the consequences.
+            </p>
+          </Modal.Content>
+          <Modal.Footer>
+            <HStack gap="16" wrap>
+              <PrimaryButton onClick={onMainAction}>Main action</PrimaryButton>
+              <PrimaryButton fill="outline" onClick={onClose}>
+                Cancel
+              </PrimaryButton>
+            </HStack>
+          </Modal.Footer>
+        </Modal>
+      </>
+    );
+  },
+} satisfies Story;
+
+export const ShareParcelModal = {
+  render: function Render(args) {
+    const modalRef = useRef<HTMLDialogElement>(null);
+    const open = window.location.search.includes("viewMode=story");
+    return (
+      <>
+        <PrimaryButton onClick={() => modalRef.current?.showModal()}>Open Modal</PrimaryButton>
+        <Modal ref={modalRef} {...args} closeOnBackdropClick open={open}>
+          <Modal.Header>Legg til pakken</Modal.Header>
+          <Modal.Content>
+            <StyledHtml>
+              For å kunne hente pakken, må du legge den til i appen fra mobilen din.
+              <br />
+              <br />
+              <strong>Viktig!</strong>
+              <br />
+              Appen må allerede være innstallert på mobilen før du kan legge den til
+            </StyledHtml>
+          </Modal.Content>
+          <Modal.Footer>
+            <PrimaryButton fullWidth="mobile">Legg til pakken i Posten-appen </PrimaryButton>
+          </Modal.Footer>
+        </Modal>
+      </>
+    );
+  },
+} satisfies Story;
+
+export const MuchContentBelow: Story = {
+  render: function Render(args) {
+    return (
+      <>
+        <div
+          style={{
+            height: 3200,
+            background: "linear-gradient(to bottom, #051937, #004d7a, #008793, #00bf72, #a8eb12)",
+          }}
+        />
+        {Main.render(args)}
+        <div style={{ height: 1600, background: "deeppink" }} />
+      </>
+    );
+  },
+};
+
+export const AsAReadMore: Story = {
+  name: "As a read more",
+  render: function Render(args) {
+    const modalRef = useRef<HTMLDialogElement>(null);
+
+    return (
+      <>
+        <Message variant="attention">
+          <Message.Title>Kunne ikke leveres hjem</Message.Title>
+          <Message.Description>
+            Vi møtte på utfordringer da vi skulle levere pakken hjem til deg. Derfor har vi sendt
+            den til ditt nærmeste hentested.{" "}
+            <Link variant="solid" asChild>
+              <button type="button" onClick={() => modalRef.current?.showModal()}>
+                Les mer
+              </button>
+            </Link>
+          </Message.Description>
+        </Message>
+
+        <Modal ref={modalRef} {...args}>
+          <Modal.Header>Kunne ikke leveres hjem til deg</Modal.Header>
+
+          <Modal.Content asChild>
+            <StyledHtml>
+              <p>
+                Noen ganger kan vi ikke levere pakken til postkassen din, eller utenfor døren. Det
+                kan være ulike grunner til dette, for eksempel:
+              </p>
+              <ul>
+                <li>Pakken var for stor for postkassen din</li>
+                <li>Det var ikke mulig å sette den utenfor døren din</li>
+                <li>Ingen var hjemme</li>
+                <li>Døren var ikke merket med navn</li>
+                <li>Andre årsaker</li>
+              </ul>
+              <p>
+                Pakken blir videresendt til ditt nærmeste hentested når den ikke kan leveres hjem.
+                Den vil vanligvis være klar til henting der etter én til to virkedager.
+              </p>
+            </StyledHtml>
+          </Modal.Content>
+
+          <Modal.Footer>
+            <PrimaryButton fullWidth="mobile" onClick={() => modalRef.current?.close()}>
+              Lukk
+            </PrimaryButton>
+          </Modal.Footer>
+        </Modal>
+      </>
+    );
+  },
+};