@postenbring/hedwig-react 0.0.81 → 0.0.82

package/src/navbar/navbar.tsx

@@ -0,0 +1,264 @@
+import { forwardRef, type HTMLAttributes } from "react";
+import { clsx } from "@postenbring/hedwig-css/typed-classname";
+import { Slot } from "@radix-ui/react-slot";
+import {
+  NavbarExpandableMenu,
+  NavbarExpandableMenuContent,
+  NavbarExpandableMenuTrigger,
+} from "./navbar-expandable-menu";
+
+interface NavbarLogoProps 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;
+}
+
+/**
+ * A fixed Posten or Bring logo.
+ *
+ * The logo follows the brand theme, so if the class `hds-theme-bring` is set the Bring logo will be shown instead of the Posten logo
+ */
+export const NavbarLogo = forwardRef<HTMLDivElement, NavbarLogoProps>(
+  ({ children, className, asChild, ...rest }, ref) => {
+    const Component = asChild ? Slot : "div";
+    return (
+      <Component className={clsx(`hds-navbar__logo`, className as undefined)} ref={ref} {...rest}>
+        {children}
+      </Component>
+    );
+  },
+);
+NavbarLogo.displayName = "Navbar.Logo";
+
+interface NavbarLogoAndServiceText extends HTMLAttributes<HTMLDivElement> {
+  /**
+   * The text display next to the logo
+   */
+  children: React.ReactNode;
+
+  /**
+   * The text variant
+   *
+   * Use `service` for internal applications
+   *
+   * Use `flagship` for public facing applications
+   */
+  variant: "service" | "flagship";
+
+  /**
+   * Change the default rendered element for the one passed as a child, merging their props and behavior.
+   *
+   * @default false
+   */
+  asChild?: boolean;
+}
+
+/**
+ * Internal service or flagship text next to either the Posten or Bring logo
+ *
+ * The logo follows the brand theme, so if the class `hds-theme-bring` is set the Bring logo will be shown instead of the Posten logo
+ */
+export const NavbarLogoAndServiceText = forwardRef<HTMLDivElement, NavbarLogoAndServiceText>(
+  ({ children, asChild, variant, className, ...rest }, ref) => {
+    const Component = asChild ? Slot : "div";
+    return (
+      <Component
+        ref={ref}
+        className={clsx(
+          "hds-navbar__logo-and-service-text",
+          `hds-navbar__logo-and-service-text--${variant}`,
+          className as undefined,
+        )}
+        {...rest}
+      >
+        {children}
+      </Component>
+    );
+  },
+);
+NavbarLogoAndServiceText.displayName = "Navbar.NavbarLogoAndText";
+
+interface NavbarItemIconProps extends React.HTMLAttributes<HTMLDivElement> {
+  children: React.ReactNode;
+}
+/**
+ * Icon to be used inside a `Navbar.Item`, `Navbar.ButtonItem`, or `Navbar.LinkItem`
+ */
+export const NavbarItemIcon = forwardRef<HTMLDivElement, NavbarItemIconProps>(
+  ({ children, className, ...rest }, ref) => {
+    return (
+      <Slot className={clsx("hds-navbar__item-icon", className as undefined)} ref={ref} {...rest}>
+        {children}
+      </Slot>
+    );
+  },
+);
+NavbarItemIcon.displayName = "Navbar.ItemIcon";
+
+interface NavbarItemProps extends React.HTMLAttributes<HTMLDivElement> {
+  children: React.ReactNode;
+
+  /**
+   * Change the default rendered element for the one passed as a child, merging their props and behavior.
+   *
+   * @default false
+   */
+  asChild?: boolean;
+}
+
+/**
+ * Generic Navbar item
+ *
+ * Use `Navbar.ButtonItem` or `Navbar.LinkItem` for links and buttons
+ */
+export const NavbarItem = forwardRef<HTMLDivElement, NavbarItemProps>(
+  ({ asChild, children, className, ...rest }, ref) => {
+    const Component = asChild ? Slot : "div";
+    return (
+      <Component className={clsx("hds-navbar__item", className as undefined)} ref={ref} {...rest}>
+        {children}
+      </Component>
+    );
+  },
+);
+NavbarItem.displayName = "Navbar.Item";
+
+interface NavbarButtonItemProps extends React.ButtonHTMLAttributes<HTMLButtonElement> {
+  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 NavbarButtonItem = forwardRef<HTMLButtonElement, NavbarButtonItemProps>(
+  ({ asChild, children, className, ...rest }, ref) => {
+    const Component = asChild ? Slot : "button";
+    return (
+      <Component
+        className={clsx("hds-navbar__item", className as undefined)}
+        ref={ref}
+        type="button"
+        {...rest}
+      >
+        {children}
+      </Component>
+    );
+  },
+);
+NavbarButtonItem.displayName = "Navbar.ButtonItem";
+
+interface NavbarLinkItemProps extends React.AnchorHTMLAttributes<HTMLAnchorElement> {
+  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 NavbarLinkItem = forwardRef<HTMLAnchorElement, NavbarLinkItemProps>(
+  ({ asChild, children, className, ...rest }, ref) => {
+    const Component = asChild ? Slot : "a";
+    return (
+      <Component className={clsx("hds-navbar__item", className as undefined)} ref={ref} {...rest}>
+        {children}
+      </Component>
+    );
+  },
+);
+NavbarLinkItem.displayName = "Navbar.LinkItem";
+
+interface NavbarNavigationProps extends React.HTMLAttributes<HTMLDivElement> {
+  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 NavbarNavigation = forwardRef<HTMLDivElement, NavbarNavigationProps>(
+  ({ asChild, className, ...rest }, ref) => {
+    const Component = asChild ? Slot : "div";
+    return (
+      <Component
+        className={clsx("hds-navbar__navigation", className as undefined)}
+        ref={ref}
+        {...rest}
+      />
+    );
+  },
+);
+NavbarNavigation.displayName = "Navbar.Navigation";
+
+export interface NavbarProps extends HTMLAttributes<HTMLElement> {
+  /**
+   * Navbar variant
+   *
+   * By default the `posten.no` variant is used which has a fixed logo and a fixed height of 112px
+   *
+   * For internal services or flagship services use the `service` should be used
+   *
+   * @default "default"
+   */
+  variant?: "default" | "service";
+
+  /**
+   * Change the default rendered element for the one passed as a child, merging their props and behavior.
+   *
+   * @default false
+   */
+  asChild?: boolean;
+}
+
+/**
+ * 🚨 WORK IN PROGRESS 🚨
+ */
+export const Navbar = forwardRef<HTMLDivElement, NavbarProps>(
+  ({ asChild, children, className, variant, ...rest }, ref) => {
+    const Component = asChild ? Slot : "header";
+    return (
+      <Component
+        className={clsx("hds-navbar", variant && `hds-navbar--${variant}`, className as undefined)}
+        ref={ref}
+        {...rest}
+      >
+        {children}
+      </Component>
+    );
+  },
+) as NavbarType;
+Navbar.displayName = "Navbar";
+
+type NavbarType = ReturnType<typeof forwardRef<HTMLDivElement, NavbarProps>> & {
+  Logo: typeof NavbarLogo;
+  LogoAndServiceText: typeof NavbarLogoAndServiceText;
+  ExpandableMenu: typeof NavbarExpandableMenu;
+  ExpandableMenuTrigger: typeof NavbarExpandableMenuTrigger;
+  ExpandableMenuContent: typeof NavbarExpandableMenuContent;
+  Item: typeof NavbarItem;
+  ButtonItem: typeof NavbarButtonItem;
+  LinkItem: typeof NavbarLinkItem;
+  ItemIcon: typeof NavbarItemIcon;
+  Navigation: typeof NavbarNavigation;
+};
+
+Navbar.Logo = NavbarLogo;
+Navbar.LogoAndServiceText = NavbarLogoAndServiceText;
+Navbar.ExpandableMenu = NavbarExpandableMenu;
+Navbar.ExpandableMenuTrigger = NavbarExpandableMenuTrigger;
+Navbar.ExpandableMenuContent = NavbarExpandableMenuContent;
+Navbar.Item = NavbarItem;
+Navbar.ButtonItem = NavbarButtonItem;
+Navbar.LinkItem = NavbarLinkItem;
+Navbar.ItemIcon = NavbarItemIcon;
+Navbar.Navigation = NavbarNavigation;

package/src/show-more/index.ts

@@ -0,0 +1,5 @@
+export { AutoAnimateHeight } from "../utilities/auto-animate-height";
+export type * from "../utilities/auto-animate-height";
+
+export { ShowMoreButton } from "./show-more";
+export type * from "./show-more";

package/src/show-more/show-more.stories.tsx

@@ -0,0 +1,119 @@
+/* eslint-disable import/no-extraneous-dependencies -- storybook story */
+/* eslint-disable react-hooks/rules-of-hooks -- it's ok */
+import type { Meta, StoryObj } from "@storybook/react";
+import { useRef, useState } from "react";
+import { flushSync } from "react-dom";
+import { StyledHtml } from "../styled-html";
+import { AutoAnimateHeight } from "../utilities/auto-animate-height";
+import { ShowMoreButton } from ".";
+
+const meta: Meta<typeof ShowMoreButton> = {
+  title: "Show more",
+  component: ShowMoreButton,
+};
+
+export default meta;
+
+type Story = StoryObj<typeof ShowMoreButton>;
+
+export const ShowMore: Story = {
+  args: {
+    text: "Vis flere",
+    onClick: () => {
+      // eslint-disable-next-line no-alert -- It's an example
+      alert("Clicked");
+    },
+  },
+};
+
+export const ShowMoreShowLess: Story = {
+  args: {
+    text: "Vis resten",
+    variant: "show-more-show-less",
+    expanded: false,
+  },
+};
+
+export const ShowMoreShowLessExpanded: Story = {
+  args: {
+    text: "Skjul resten",
+    variant: "show-more-show-less",
+    expanded: true,
+  },
+};
+
+export const SimpleShowMoreShowLess: Story = {
+  render: () => {
+    const [expanded, setExpanded] = useState(false);
+    const elements = Array.from({ length: expanded ? 8 : 3 }, (_, i) => (
+      <li key={i}>Hallo {Math.random()}</li>
+    ));
+    return (
+      <>
+        <StyledHtml>
+          <AutoAnimateHeight animationDuration="quick">
+            <ul>{elements}</ul>
+          </AutoAnimateHeight>
+        </StyledHtml>
+        <ShowMoreButton
+          variant="show-more-show-less"
+          expanded={expanded}
+          onClick={() => {
+            setExpanded((prev) => !prev);
+          }}
+          style={{ marginTop: "var(--hds-spacing-24)" }}
+          text={expanded ? "Vis færre hendelser" : "Vis flere hendelser"}
+        />
+      </>
+    );
+  },
+};
+
+export const CompleteShowMoreShowLess: Story = {
+  render: () => {
+    const [expanded, setExpanded] = useState(false);
+    const ref = useRef<HTMLDivElement>(null);
+
+    const elements = Array.from({ length: expanded ? 40 : 3 }, (_, i) => (
+      <li key={i}>Hallo {Math.random()}</li>
+    ));
+    return (
+      <div>
+        <div
+          style={{
+            height: 1400,
+            background: "linear-gradient(to bottom, #051937, #004d7a, #008793, #00bf72, #a8eb12)",
+          }}
+        />
+        <StyledHtml ref={ref}>
+          <AutoAnimateHeight animationDuration="normal">
+            <ul>{elements}</ul>
+          </AutoAnimateHeight>
+        </StyledHtml>
+        <ShowMoreButton
+          variant="show-more-show-less"
+          expanded={expanded}
+          onClick={() => {
+            // Using flushSync to ensure the scrollIntoView is called after the state is updated
+            flushSync(() => {
+              setExpanded((prev) => !prev);
+            });
+            if (expanded) {
+              setTimeout(() => {
+                ref.current?.scrollIntoView({ behavior: "smooth", block: "nearest" });
+              }, 300); // Wait for the animation to finish
+            }
+          }}
+          style={{ marginTop: "var(--hds-spacing-24)" }}
+          text={expanded ? "Vis færre hendelser" : "Vis flere hendelser"}
+        />
+        <div
+          style={{
+            height: 1400,
+            background: "linear-gradient(to top, #051937, #004d7a, #008793, #00bf72, #a8eb12)",
+          }}
+        />
+      </div>
+    );
+  },
+};

package/src/show-more/show-more.tsx

@@ -0,0 +1,66 @@
+import { clsx } from "@postenbring/hedwig-css/typed-classname";
+import { forwardRef } from "react";
+
+type Variant =
+  | {
+      variant?: "show-more";
+      expanded?: never;
+    }
+  | {
+      variant: "show-more-show-less";
+      expanded: boolean;
+    };
+
+export type ShowMoreProps = React.HTMLAttributes<HTMLButtonElement> & {
+  text: React.ReactNode;
+} & Variant;
+
+/**
+ * Simple button for triggering more content.
+ *
+ * You have to add the logic for what happens when the button is clicked yourself.
+ *
+ * @example
+ * ```tsx
+ * function Content() {
+ *   const [items, fetchMoreItems, moreItemsAvailable] = useYourData();
+ *   function onShowMoreItems() {
+ *     fetchMoreItems();
+ *   }
+ *   return (
+ *     <>
+ *       <ul>
+ *         {items.map((item) => (
+ *          <li key={item.id}>{item.text}</li>
+ *         ))}
+ *       </ul>
+ *       {moreItemsAvailable ?
+ *         <ShowMoreButton className="mt-8" onClick={onShowMoreItems} lang="en" /> :
+ *         null
+ *       }
+ *     </>
+ *   )
+ * }
+ * ```
+ */
+export const ShowMoreButton = forwardRef<HTMLButtonElement, ShowMoreProps>(
+  ({ text, variant, expanded, className, ...rest }, ref) => {
+    return (
+      <button
+        ref={ref}
+        className={clsx(
+          "hds-show-more",
+          variant === "show-more-show-less" && "hds-show-more--show-less",
+          className as undefined,
+        )}
+        data-state={expanded ? "expanded" : undefined}
+        type="button"
+        {...rest}
+      >
+        {text}
+        <span className={clsx("hds-show-more__icon")} />
+      </button>
+    );
+  },
+);
+ShowMoreButton.displayName = "ShowMoreButton";

package/src/skeleton/index.ts

@@ -0,0 +1,2 @@
+export { Skeleton } from "./skeleton";
+export type * from "./skeleton";

package/src/skeleton/skeleton.stories.tsx

@@ -0,0 +1,152 @@
+/* eslint-disable react-hooks/rules-of-hooks -- storybook story */
+/* eslint-disable import/no-extraneous-dependencies -- storybook story */
+import type { Meta, StoryObj } from "@storybook/react";
+import { useEffect, useState } from "react";
+import { StyledHtml } from "../styled-html";
+import { Card } from "../card";
+import { CardStory } from "../card/card.stories";
+import { PrimaryButton } from "../button";
+import { HStack, VStack } from "../layout";
+import { Skeleton } from ".";
+
+const meta: Meta<typeof Skeleton> = {
+  title: "Skeleton",
+  component: Skeleton,
+};
+
+export default meta;
+
+type Story = StoryObj<typeof Skeleton>;
+
+export const Default: Story = {
+  render: () => (
+    <VStack gap="8">
+      <Skeleton variant="circle">
+        <div style={{ height: "6rem", width: "6rem", background: "deeppink" }}>Avatar</div>
+      </Skeleton>
+      <div>
+        <Skeleton variant="text" />
+        <Skeleton variant="text" />
+        <Skeleton variant="text" width="80%" />
+      </div>
+    </VStack>
+  ),
+};
+
+export const LoadingCards: Story = {
+  render: () => {
+    // @ts-expect-error -- It's ok
+    // eslint-disable-next-line @typescript-eslint/no-non-null-assertion -- It really is
+    const realCard = CardStory.render!({
+      style: { width: "400px" },
+    });
+
+    const skeletonCard = (
+      <Card
+        aria-hidden
+        as="div"
+        style={{
+          width: "400px",
+          backgroundColor: "var(--hds-ui-colors-light-grey-fill)",
+        }}
+      >
+        <Card.Media style={{ width: "100%", background: "white" }}>
+          <Skeleton variant="rectangle" style={{ width: "100%", aspectRatio: 16 / 9 }} />
+        </Card.Media>
+        <Card.Body>
+          <Card.BodyHeader as="h2">
+            <Card.BodyHeaderOverline asChild>
+              <Skeleton>Theme</Skeleton>
+            </Card.BodyHeaderOverline>
+            <Card.BodyHeaderTitle asChild>
+              <Skeleton>Cool article</Skeleton>
+            </Card.BodyHeaderTitle>
+          </Card.BodyHeader>
+          <Card.BodyDescription>
+            <Skeleton variant="text" />
+            <Skeleton variant="text" />
+            <Skeleton variant="text" />
+            <Skeleton variant="text" />
+            <Skeleton variant="text" width="80%" />
+          </Card.BodyDescription>
+          <Card.BodyAction>
+            <Skeleton variant="rectangle" height="1em" width="1em" />
+          </Card.BodyAction>
+        </Card.Body>
+      </Card>
+    );
+
+    const [isLoading, setIsLoading] = useState(true);
+    useEffect(() => {
+      if (isLoading) {
+        setTimeout(
+          () => {
+            setIsLoading(false);
+          },
+          randomNumberBetween(2000, 5000),
+        );
+      }
+    }, [isLoading]);
+
+    const card = isLoading ? skeletonCard : realCard;
+    return (
+      <div>
+        <PrimaryButton
+          size="small"
+          onClick={() => {
+            setIsLoading(true);
+          }}
+        >
+          Reload
+        </PrimaryButton>
+        <p className="hds-mt-8">Only use greytones, never any red or green colors.</p>
+        <HStack className="hds-mt-16" wrap gap="24">
+          {card}
+          {card}
+          {card}
+        </HStack>
+      </div>
+    );
+  },
+};
+
+function randomNumberBetween(min: number, max: number) {
+  return Math.floor(Math.random() * (max - min + 1) + min);
+}
+export const Article: Story = {
+  render: () => (
+    <StyledHtml aria-hidden>
+      <Skeleton variant="text" style={{ font: "var(--hds-typography-h1-display)" }}>
+        A title is loading
+      </Skeleton>
+      <Skeleton variant="rectangle">
+        <figure style={{ height: 300, aspectRatio: 16 / 9 }} />
+      </Skeleton>
+      <Skeleton variant="text" as="h2">
+        A subtitle with some more text is loading
+      </Skeleton>
+      <p>
+        <Skeleton variant="text" width={`${randomNumberBetween(75, 90)}%`} />
+        <Skeleton variant="text" width={`${randomNumberBetween(75, 90)}%`} />
+        <Skeleton variant="text" width={`${randomNumberBetween(25, 60)}%`} />
+        <Skeleton variant="text" width={`${randomNumberBetween(45, 80)}%`} />
+        <Skeleton variant="text" width={`${randomNumberBetween(75, 90)}%`} />
+        <Skeleton variant="text" width={`${randomNumberBetween(75, 90)}%`} />
+        <Skeleton variant="text" width={`${randomNumberBetween(75, 90)}%`} />
+      </p>
+
+      <Skeleton variant="text" as="h2">
+        Another piece of text
+      </Skeleton>
+      <p>
+        <Skeleton variant="text" width={`${randomNumberBetween(75, 90)}%`} />
+        <Skeleton variant="text" width={`${randomNumberBetween(75, 90)}%`} />
+        <Skeleton variant="text" width={`${randomNumberBetween(25, 60)}%`} />
+        <Skeleton variant="text" width={`${randomNumberBetween(45, 80)}%`} />
+        <Skeleton variant="text" width={`${randomNumberBetween(75, 90)}%`} />
+        <Skeleton variant="text" width={`${randomNumberBetween(75, 90)}%`} />
+        <Skeleton variant="text" width={`${randomNumberBetween(75, 90)}%`} />
+      </p>
+    </StyledHtml>
+  ),
+};