@postenbring/hedwig-react 0.0.81 → 0.0.82

package/src/modal/modal.tsx

@@ -0,0 +1,199 @@
+import { forwardRef, useEffect, useRef } from "react";
+import { clsx } from "@postenbring/hedwig-css/typed-classname";
+import { Slot } from "@radix-ui/react-slot";
+import { Box } from "../box/box";
+import { useMergeRefs } from "../utils";
+
+interface ModalHeaderProps extends React.HTMLAttributes<HTMLHeadingElement> {
+  /**
+   * Change the default rendered element for the one passed as a child, merging their props and behavior.
+   *
+   * @default false
+   */
+  asChild?: boolean;
+}
+export const ModalHeader = forwardRef<HTMLHeadingElement, ModalHeaderProps>(
+  ({ asChild, className, ...rest }, ref) => {
+    const Component = asChild ? Slot : "h1";
+    return (
+      <Component
+        className={clsx("hds-modal__header", className as undefined)}
+        ref={ref}
+        {...rest}
+      />
+    );
+  },
+);
+ModalHeader.displayName = "Modal.Header";
+
+interface ModalContentProps extends React.HTMLAttributes<HTMLDivElement> {
+  /**
+   * Change the default rendered element for the one passed as a child, merging their props and behavior.
+   *
+   * @default false
+   */
+  asChild?: boolean;
+}
+export const ModalContent = forwardRef<HTMLDivElement, ModalContentProps>(
+  ({ asChild, className, ...rest }, ref) => {
+    const Component = asChild ? Slot : "div";
+    return (
+      <Component
+        className={clsx("hds-modal__content", className as undefined)}
+        ref={ref}
+        {...rest}
+      />
+    );
+  },
+);
+ModalContent.displayName = "Modal.Content";
+
+interface ModalFooterProps extends React.HTMLAttributes<HTMLDivElement> {
+  /**
+   * Change the default rendered element for the one passed as a child, merging their props and behavior.
+   *
+   * @default false
+   */
+  asChild?: boolean;
+}
+export const ModalFooter = forwardRef<HTMLDivElement, ModalFooterProps>(
+  ({ asChild, className, ...rest }, ref) => {
+    const Component = asChild ? Slot : "footer";
+    return (
+      <Component
+        className={clsx("hds-modal__footer", className as undefined)}
+        ref={ref}
+        {...rest}
+      />
+    );
+  },
+);
+ModalFooter.displayName = "Modal.Footer";
+
+export interface ModalProps extends React.HTMLAttributes<HTMLDialogElement> {
+  children: React.ReactNode;
+
+  /**
+   * Controls the open state of the modal
+   */
+  open?: boolean;
+
+  /**
+   * Whether to close when clicking on the backdrop.
+   */
+  closeOnBackdropClick?: boolean;
+}
+
+/**
+ * A modal dialog is a window that forces the user to interact with it before they can return to other parts of the application.
+ *
+ * Uses the native [`dialog`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/dialog) element.
+ *
+ * @example
+ * ```tsx
+ *   const modalRef = useRef<HTMLDialogElement>(null);
+ *   const onClose = () => modalRef.current?.close();
+ *
+ *   return (
+ *     <>
+ *       <PrimaryButton onClick={() => modalRef.current?.showModal()}>Open Modal</PrimaryButton>
+ *       <Modal ref={modalRef}>
+ *         <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>
+ *     </>
+ *   );
+ * ```
+ */
+export const Modal = forwardRef<HTMLDialogElement, ModalProps>(
+  ({ children, className, open, closeOnBackdropClick, onClick, ...rest }, ref) => {
+    const modalRef = useRef<HTMLDialogElement>(null);
+    const mergedRef = useMergeRefs([modalRef, ref]);
+
+    // The X close button that comes from the `Box` component
+    function onCloseButtonClick() {
+      modalRef.current?.close();
+      return false;
+    }
+
+    // No scroll when modal is open
+    useScrollLock(modalRef, "hds-modal-scroll-lock");
+
+    // `open` prop
+    useEffect(() => {
+      if (modalRef.current && open !== undefined) {
+        if (open && !modalRef.current.open) {
+          modalRef.current.showModal();
+        } else if (!open && modalRef.current.open) {
+          modalRef.current.close();
+        }
+      }
+    }, [modalRef, open]);
+
+    function onDialogClick(e: React.MouseEvent<HTMLElement>) {
+      if (closeOnBackdropClick && e.target === modalRef.current) {
+        modalRef.current.close();
+      }
+      onClick?.(e as React.MouseEvent<HTMLDialogElement>);
+    }
+
+    return (
+      <Box
+        asChild
+        className={clsx("hds-modal", className as undefined)}
+        closeable
+        onClick={onDialogClick}
+        onClose={onCloseButtonClick}
+        variant="white"
+      >
+        <dialog ref={mergedRef} {...rest}>
+          {children}
+        </dialog>
+      </Box>
+    );
+  },
+) as ModalType;
+Modal.displayName = "Modal";
+
+type ModalType = ReturnType<typeof forwardRef<HTMLDialogElement, ModalProps>> & {
+  Header: typeof ModalHeader;
+  Content: typeof ModalContent;
+  Footer: typeof ModalFooter;
+};
+
+Modal.Header = ModalHeader;
+Modal.Content = ModalContent;
+Modal.Footer = ModalFooter;
+
+function useScrollLock(modalRef: React.RefObject<HTMLDialogElement>, bodyClass: string) {
+  useEffect(() => {
+    if (!modalRef.current) return;
+    if (modalRef.current.open) document.body.classList.add(bodyClass);
+
+    const observer = new MutationObserver(() => {
+      if (modalRef.current?.open) document.body.classList.add(bodyClass);
+      else document.body.classList.remove(bodyClass);
+    });
+    observer.observe(modalRef.current, {
+      attributes: true,
+      attributeFilter: ["open"],
+    });
+    return () => {
+      observer.disconnect();
+      document.body.classList.remove(bodyClass);
+    };
+  }, [bodyClass, modalRef]);
+}

package/src/navbar/icons.tsx

@@ -0,0 +1,21 @@
+export function CloseIcon() {
+  return (
+    <svg aria-hidden xmlns="http://www.w3.org/2000/svg" width={24} height={24}>
+      <path
+        fill="currentColor"
+        d="m13.16 12.25 3.621-3.586.739-.738c.105-.106.105-.281 0-.422l-.774-.774c-.14-.105-.316-.105-.422 0L12 11.09 7.64 6.73c-.105-.105-.28-.105-.421 0l-.774.774c-.105.14-.105.316 0 .422l4.36 4.324-4.36 4.36c-.105.105-.105.28 0 .421l.774.774c.14.105.316.105.422 0L12 13.445l3.586 3.621.738.739c.106.105.281.105.422 0l.774-.774c.105-.14.105-.316 0-.422l-4.36-4.359Z"
+      />
+    </svg>
+  );
+}
+
+export function MenuIcon() {
+  return (
+    <svg aria-hidden xmlns="http://www.w3.org/2000/svg" width={32} height={32}>
+      <path
+        fill="currentColor"
+        d="M25.938 10.146a.57.57 0 0 0 .562-.563v-1.5c0-.281-.281-.562-.563-.562H6.063a.57.57 0 0 0-.562.562v1.5c0 .328.234.563.563.563h19.875Zm0 7.5a.57.57 0 0 0 .562-.563v-1.5c0-.281-.281-.563-.563-.563H6.063a.57.57 0 0 0-.562.563v1.5c0 .328.234.563.563.563h19.875Zm0 7.5a.57.57 0 0 0 .562-.563v-1.5c0-.281-.281-.563-.563-.563H6.063a.57.57 0 0 0-.562.563v1.5c0 .328.234.563.563.563h19.875Z"
+      />
+    </svg>
+  );
+}

package/src/navbar/index.tsx

@@ -0,0 +1,18 @@
+export {
+  Navbar,
+  NavbarLogo,
+  NavbarItem,
+  NavbarButtonItem,
+  NavbarLinkItem,
+  NavbarItemIcon,
+  NavbarNavigation,
+  NavbarLogoAndServiceText,
+} from "./navbar";
+export {
+  useNavbarExpendableMenuContext,
+  NavbarExpandableMenu,
+  NavbarExpandableMenuTrigger,
+  NavbarExpandableMenuContent,
+} from "./navbar-expandable-menu";
+
+export type * from "./navbar";

package/src/navbar/navbar-expandable-menu.tsx

@@ -0,0 +1,176 @@
+import { createContext, useContext, forwardRef, useState, useEffect, useId } from "react";
+import { clsx } from "@postenbring/hedwig-css/typed-classname";
+import { focusTrap } from "../utils";
+import { CloseIcon, MenuIcon } from "./icons";
+
+const expandableMenuContext = createContext([
+  false as boolean,
+  () => {
+    // Empty
+  },
+] as const);
+export const useNavbarExpendableMenuContext = () => useContext(expandableMenuContext);
+
+export interface NavbarExpandableMenuProps {
+  children: React.ReactNode;
+}
+
+/**
+ * Expandable Menu Provider
+ * Handles scroll and focus locking,
+ * as well as scrolling the user to the top of the page.
+ *
+ * If we want a sticky header in the future the scrolling should be configurable
+ */
+export function NavbarExpandableMenu({ children }: NavbarExpandableMenuProps) {
+  const [open, setOpen] = useState(false);
+  function toggleOpen() {
+    setOpen((prev) => !prev);
+  }
+
+  useEffect(() => {
+    if (open) {
+      window.scrollTo(0, 0);
+      document.body.classList.add(clsx("hds-navbar-scroll-lock"));
+      const releaseFocusTrap = focusTrap(
+        document.getElementsByClassName(clsx("hds-navbar"))[0] as HTMLElement,
+      );
+
+      return () => {
+        document.body.classList.remove(clsx("hds-navbar-scroll-lock"));
+        releaseFocusTrap();
+      };
+    }
+  }, [open]);
+
+  return (
+    <expandableMenuContext.Provider value={[open, toggleOpen]}>
+      {children}
+    </expandableMenuContext.Provider>
+  );
+}
+NavbarExpandableMenu.displayName = "NavbarExpandableMenu";
+
+/**
+ * Trigger
+ */
+export interface NavbarExpandableMenuTriggerProps
+  extends Omit<React.HTMLAttributes<HTMLButtonElement>, "children"> {
+  whenClosedText: React.ReactNode;
+  whenClosedHelperTitle?: string;
+
+  whenOpenText: React.ReactNode;
+  whenOpenHelperTitle?: string;
+}
+export const NavbarExpandableMenuTrigger = forwardRef<
+  HTMLButtonElement,
+  NavbarExpandableMenuTriggerProps
+>(
+  (
+    {
+      whenClosedText,
+      whenClosedHelperTitle,
+
+      whenOpenText,
+      whenOpenHelperTitle,
+
+      style,
+      className,
+      ...rest
+    },
+    ref,
+  ) => {
+    const [open, toggleOpen] = useNavbarExpendableMenuContext();
+
+    // Measure the width of the text when open and closed and choose the widest one
+    // This is to ensure that the button doesn't change size when the text changes
+    const [textWidth, setTextWidth] = useState<number | undefined>(undefined);
+    const measurementId = useId();
+    useEffect(() => {
+      const widthWhenOpen =
+        document.getElementById(`${measurementId}-when-open`)?.getBoundingClientRect().width ?? 0;
+      const widthWhenClosed =
+        document.getElementById(`${measurementId}-when-closed`)?.getBoundingClientRect().width ?? 0;
+
+      setTextWidth(widthWhenOpen < widthWhenClosed ? widthWhenClosed : widthWhenOpen);
+    }, [measurementId]);
+
+    const text = open ? whenOpenText : whenClosedText;
+    const title = open ? whenOpenHelperTitle : whenClosedHelperTitle;
+    const icon = open ? <CloseIcon /> : <MenuIcon />;
+
+    return (
+      <button
+        className={clsx("hds-navbar__item", className as undefined)}
+        onClick={toggleOpen}
+        ref={ref}
+        title={title}
+        type="button"
+        style={{ position: "relative", ...style }}
+        {...rest}
+      >
+        {/* Measurement elements, not shown to the user */}
+        <span
+          id={`${measurementId}-when-closed`}
+          aria-hidden
+          style={{
+            position: "absolute",
+            visibility: "hidden",
+            pointerEvents: "none",
+            whiteSpace: "nowrap",
+          }}
+        >
+          {whenOpenText}
+        </span>
+        <span
+          id={`${measurementId}-when-open`}
+          aria-hidden
+          style={{
+            position: "absolute",
+            visibility: "hidden",
+            pointerEvents: "none",
+            whiteSpace: "nowrap",
+          }}
+        >
+          {whenClosedText}
+        </span>
+
+        {/* Actual content */}
+        <span
+          style={{ width: textWidth, whiteSpace: "nowrap" }}
+          className={clsx("hds-navbar__item-responsive-text")}
+        >
+          {text}
+        </span>
+        <span style={{ width: 32, height: 32 }}>{icon}</span>
+      </button>
+    );
+  },
+);
+NavbarExpandableMenuTrigger.displayName = "Navbar.ExpandableMenuTrigger";
+
+/**
+ * Content
+ */
+export interface NavbarExpandableMenuContentProps {
+  children: React.ReactNode;
+  className?: string;
+}
+export const NavbarExpandableMenuContent = forwardRef<
+  HTMLDivElement,
+  NavbarExpandableMenuContentProps
+>(({ children, className, ...rest }, ref) => {
+  const [open] = useNavbarExpendableMenuContext();
+  return (
+    <section
+      {...rest}
+      className={clsx("hds-navbar__expandable-menu-content", className as undefined)}
+      data-state={open ? "open" : "closed"}
+      {...{ inert: open ? undefined : "true" }}
+      ref={ref}
+    >
+      <div className={clsx("hds-navbar__expandable-menu-content-inner")}>{children}</div>
+    </section>
+  );
+});
+NavbarExpandableMenuContent.displayName = "Navbar.ExpandableMenuContent";

package/src/navbar/navbar.stories.tsx

@@ -0,0 +1,99 @@
+/* eslint-disable import/no-extraneous-dependencies -- storybook story */
+import type { Meta, StoryObj } from "@storybook/react";
+import { Accordion } from "../accordion";
+import { Link } from "../link";
+import { LinkList } from "../list";
+import { ArticleContent } from "../styled-html/styled-html.stories";
+import { Container } from "../layout";
+import { Navbar } from ".";
+
+const meta: Meta<typeof Navbar> = {
+  title: "🚧 Navbar",
+  component: Navbar,
+  parameters: {
+    layout: "fullscreen",
+  },
+};
+
+export default meta;
+
+const globeIcon = (
+  <svg
+    aria-hidden
+    fill="none"
+    height="24"
+    viewBox="0 0 24 24"
+    width="24"
+    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>
+);
+
+const userIcon = (
+  <svg viewBox="0 0 512 512" xmlns="http://www.w3.org/2000/svg">
+    <path
+      d="M368 208A160 160 0 1 0 48 208a160 160 0 1 0 320 0zM337.1 371.1C301.7 399.2 256.8 416 208 416C93.1 416 0 322.9 0 208S93.1 0 208 0S416 93.1 416 208c0 48.8-16.8 93.7-44.9 129.1L505 471c9.4 9.4 9.4 24.6 0 33.9s-24.6 9.4-33.9 0L337.1 371.1z"
+      fill="currentColor"
+    />
+  </svg>
+);
+
+type Story = StoryObj<typeof Navbar>;
+export const Default: Story = {
+  render: () => (
+    <>
+      <Navbar>
+        <Navbar.Logo asChild>
+          <a href="https://www.posten.no/" title="Til forsiden" />
+        </Navbar.Logo>
+        <Navbar.Navigation>
+          <Navbar.LinkItem title="Link" href="https://www.posten.no/">
+            English
+            <Navbar.ItemIcon>{globeIcon}</Navbar.ItemIcon>
+          </Navbar.LinkItem>
+          <Navbar.ButtonItem title="Button">
+            Search
+            <Navbar.ItemIcon>{userIcon}</Navbar.ItemIcon>
+          </Navbar.ButtonItem>
+          <Navbar.ExpandableMenu>
+            <Navbar.ExpandableMenuTrigger whenClosedText="Meny" whenOpenText="Close" />
+            <Navbar.ExpandableMenuContent>
+              <Container>
+                <h2>Menu contents</h2>
+                <Accordion>
+                  <Accordion.Item>
+                    <Accordion.Header>Tjenester</Accordion.Header>
+                    <Accordion.Content>
+                      <LinkList>
+                        <li>
+                          <Link href="#">Post</Link>
+                        </li>
+                        <li>
+                          <Link href="#">Pakker og gods</Link>
+                        </li>
+                        <li>
+                          <Link href="#">Bud og ekspress</Link>
+                        </li>
+                      </LinkList>
+                    </Accordion.Content>
+                  </Accordion.Item>
+                </Accordion>
+              </Container>
+            </Navbar.ExpandableMenuContent>
+          </Navbar.ExpandableMenu>
+        </Navbar.Navigation>
+      </Navbar>
+      <Container as="main">
+        <h1>Some content to be hidden when the menu opens</h1>
+        {
+          // @ts-expect-error -- It's ok
+          ArticleContent.render({})
+        }
+      </Container>
+    </>
+  ),
+};