@postenbring/hedwig-react 0.0.81 → 0.0.82

package/src/tabs/tabs-list.tsx

@@ -0,0 +1,129 @@
+import type { HTMLAttributes, ReactElement, MouseEvent } from "react";
+import { forwardRef, useEffect, useRef } from "react";
+import { clsx } from "@postenbring/hedwig-css/typed-classname";
+import { useResize, useHydrated, useMergeRefs } from "../utils";
+import { useTabsContext } from "./context";
+
+export interface TabsListProps extends HTMLAttributes<HTMLDivElement> {
+  children: ReactElement<TabsTabProps> | ReactElement<TabsTabProps>[];
+
+  /**
+   * Direction of the tabs. Can either be vertical or horizontal.
+   * Horizontal breaks on window width with fallback back to vertical
+   *
+   * @default "horizontal"
+   */
+  direction?: "vertical" | "horizontal";
+}
+
+export const TabsList = forwardRef<HTMLDivElement, TabsListProps>(
+  ({ children, direction = "horizontal", className, ...rest }, ref) => {
+    const { activeTabId } = useTabsContext();
+    const tabsListRef = useRef<HTMLDivElement>(null);
+    const mergedRef = useMergeRefs([tabsListRef, ref]);
+    const { width: tabsWidth } = useResize(tabsListRef);
+
+    const isClientSide = useHydrated();
+    const { innerWidth } = isClientSide ? window : { innerWidth: 1000 };
+    const wideEnough = innerWidth >= tabsWidth;
+
+    const previousTabId = useRef(activeTabId);
+
+    // Marker animation
+    useEffect(() => {
+      const tabList = tabsListRef.current;
+      const activeTab = tabList?.querySelector(`[data-tabid="${activeTabId}"]`);
+      if (!activeTab || !tabList) return;
+
+      const { offsetHeight: containerHeight, offsetWidth: containerWidth } = tabList;
+      const { offsetHeight, offsetWidth, offsetTop, offsetLeft } = activeTab as HTMLElement;
+
+      // Calculate the height and width of the marker relative to the container
+      const height = offsetHeight / containerHeight;
+      const width = offsetWidth / containerWidth;
+
+      // NOTE: Doing a DOM manipulation here to set the CSS variables for the marker
+      // Not really the react idomatic way, but as long as it works we are able to skip some intermidiate `useState`
+      tabsListRef.current.style.setProperty("--_hds-tabs-marker-height", String(height));
+      tabsListRef.current.style.setProperty("--_hds-tabs-marker-width", String(width));
+      tabsListRef.current.style.setProperty("--_hds-tabs-marker-top", `${offsetTop}px`);
+      tabsListRef.current.style.setProperty("--_hds-tabs-marker-left", `${offsetLeft}px`);
+
+      // Start with border fallback, then switch to the animated marker when the user changes tabs
+      // This way the marker is placed immediately to the default tab, then animates smoothly to the next when selected
+      if (previousTabId.current !== activeTabId) {
+        tabsListRef.current.style.setProperty(
+          "--_hds-tabs-marker-animated-color",
+          "var(--_hds-tabs-marker-color)",
+        );
+        tabsListRef.current.style.setProperty(
+          "--_hds-tabs-marker-border-fallback-color",
+          "transparent",
+        );
+      }
+      previousTabId.current = activeTabId;
+    }, [activeTabId, innerWidth]);
+
+    return (
+      <div
+        className={clsx(
+          "hds-tabs__list",
+          direction === "horizontal"
+            ? {
+                "hds-tabs__list--horizontal": wideEnough,
+                "hds-tabs__list--vertical": !wideEnough,
+              }
+            : {
+                "hds-tabs__list--vertical": true,
+              },
+          className as undefined,
+        )}
+        ref={mergedRef}
+        role="tablist"
+        {...rest}
+      >
+        {children}
+      </div>
+    );
+  },
+);
+TabsList.displayName = "Tabs.List";
+
+export interface TabsTabProps extends HTMLAttributes<HTMLButtonElement> {
+  children: ReactElement<HTMLElement> | string;
+
+  /**
+   * Identifier for the tab
+   */
+  tabId: string;
+}
+
+export const TabsTab = forwardRef<HTMLButtonElement, TabsTabProps>(
+  ({ children, tabId, className, onClick, ...rest }, ref) => {
+    const context = useTabsContext();
+
+    const toggleTab = (e: MouseEvent<HTMLButtonElement>) => {
+      e.preventDefault();
+      context.toggleActiveTabId(tabId);
+      onClick?.(e);
+    };
+    return (
+      <button
+        className={clsx(
+          "hds-tabs__tab",
+          { "hds-tabs__tab--active": context.activeTabId === tabId },
+          className as undefined,
+        )}
+        data-tabid={tabId}
+        onClick={toggleTab}
+        ref={ref}
+        type="button"
+        role="tab"
+        {...rest}
+      >
+        {children}
+      </button>
+    );
+  },
+);
+TabsTab.displayName = "Tabs.Tab";

package/src/tabs/tabs.stories.tsx

@@ -0,0 +1,138 @@
+/* eslint-disable import/no-extraneous-dependencies -- storybook story */
+import type { Meta, StoryObj } from "@storybook/react";
+import { StyledHtml } from "../styled-html";
+import { Tabs } from ".";
+
+type Story = StoryObj<typeof Tabs>;
+
+const meta: Meta<typeof Tabs> = {
+  title: "Tabs",
+  component: Tabs,
+};
+
+export const Horizontal: Story = {
+  args: {
+    defaultTab: "first",
+    children: (
+      <>
+        <Tabs.List>
+          <Tabs.Tab tabId="first">First</Tabs.Tab>
+          <Tabs.Tab tabId="second">Second</Tabs.Tab>
+          <Tabs.Tab tabId="third">Third</Tabs.Tab>
+          <Tabs.Tab tabId="forth">Forth</Tabs.Tab>
+          <Tabs.Tab tabId="fifth">Fifth</Tabs.Tab>
+          <Tabs.Tab tabId="sixth">Sixth</Tabs.Tab>
+        </Tabs.List>
+        <Tabs.Contents>
+          <Tabs.Content forTabId="first">First tab</Tabs.Content>
+          <Tabs.Content forTabId="second">Second tab</Tabs.Content>
+          <Tabs.Content forTabId="third">Third tab</Tabs.Content>
+          <Tabs.Content forTabId="forth">Forth tab</Tabs.Content>
+          <Tabs.Content forTabId="fifth">Fifth tab</Tabs.Content>
+          <Tabs.Content forTabId="sixth">Sixth tab</Tabs.Content>
+        </Tabs.Contents>
+      </>
+    ),
+  },
+};
+
+export const Vertical: Story = {
+  args: {
+    defaultTab: "first",
+    children: (
+      <>
+        <Tabs.List direction="vertical">
+          <Tabs.Tab tabId="first">First</Tabs.Tab>
+          <Tabs.Tab tabId="second">Second</Tabs.Tab>
+          <Tabs.Tab tabId="third">Third</Tabs.Tab>
+          <Tabs.Tab tabId="forth">Forth</Tabs.Tab>
+          <Tabs.Tab tabId="fifth">Fifth</Tabs.Tab>
+          <Tabs.Tab tabId="sixth">Sixth</Tabs.Tab>
+        </Tabs.List>
+        <Tabs.Contents>
+          <Tabs.Content forTabId="first">First tab</Tabs.Content>
+          <Tabs.Content forTabId="second">Second tab</Tabs.Content>
+          <Tabs.Content forTabId="third">Third tab</Tabs.Content>
+          <Tabs.Content forTabId="forth">Forth tab</Tabs.Content>
+          <Tabs.Content forTabId="fifth">Fifth tab</Tabs.Content>
+          <Tabs.Content forTabId="sixth">Sixth tab</Tabs.Content>
+        </Tabs.Contents>
+      </>
+    ),
+  },
+};
+
+export const HorizontalWithMiddleSelected: Story = {
+  args: {
+    defaultTab: "second",
+    children: (
+      <>
+        <Tabs.List>
+          <Tabs.Tab tabId="first">Pakker og gods for bedrift</Tabs.Tab>
+          <Tabs.Tab tabId="second">Post og brevpost</Tabs.Tab>
+          <Tabs.Tab tabId="third">Bud- og ekspress-pakker</Tabs.Tab>
+        </Tabs.List>
+        <Tabs.Contents>
+          <Tabs.Content forTabId="first" asChild>
+            <StyledHtml>
+              <h2>Vilkår for transport til bedrifter nasjonalt</h2>
+              <ul>
+                <li>
+                  <a href="/tjenester/pakker-og-gods/Transportguiden_01122023.pdf">
+                    Transportguiden fra 01.12.2023 (pdf)
+                  </a>
+                </li>
+                <li>
+                  <a
+                    href="https://lovdata.no/dokument/NL/lov/1974-12-20-68?q=Lov+om+vegfraktavtaler"
+                    rel="noopener"
+                    target="_blank"
+                  >
+                    Link til Lov om Vegfraktavtaler fra Lovdata
+                  </a>
+                </li>
+                <li>
+                  <a href="/vilkar/nsab-2000.pdf">NSAB 2000 (pdf)</a>
+                </li>
+                <li>
+                  <a href="/vilkar/nsab-2015.pdf">NSAB 2015 (pdf)</a>
+                </li>
+                <li>
+                  <a href="/vilkar/pakker-til-bedrifter-i-utlandet-pakker-og-gods-sikkerhetsbestemmelser">
+                    Pakker og gods - sikkerhetsbestemmelser
+                  </a>
+                </li>
+                <li>
+                  <a href="/vilkar/vilkar-for-pakke-til-bedrift">Vilkår for Pakke til bedrift</a>
+                </li>
+                <li>
+                  <a href="/vilkar/vilkar-for-ekspress-neste-dag">Vilkår for Ekspress neste dag</a>
+                </li>
+                <li>
+                  <a href="/vilkar/Betingelser%20Oljeekspressen.pdf">
+                    Betingelser Oljeekspressen (pdf)
+                  </a>
+                  &nbsp;
+                </li>
+                <li>
+                  <a href="/tjenester/pakker-og-gods/Transportguiden_01122023.pdf">
+                    Vilkår for godstjenester fra 01.12.2023 (pdf)
+                  </a>
+                  &nbsp;
+                </li>
+              </ul>
+            </StyledHtml>
+          </Tabs.Content>
+          <Tabs.Content forTabId="second">
+            <h2>Vilkår for post med like formater</h2>
+          </Tabs.Content>
+          <Tabs.Content forTabId="third">
+            <h2>Generelle vilkår</h2>
+          </Tabs.Content>
+        </Tabs.Contents>
+      </>
+    ),
+  },
+};
+
+export default meta;

package/src/tabs/tabs.tsx

@@ -0,0 +1,50 @@
+import type { HTMLAttributes, ReactElement } from "react";
+import { forwardRef, useState } from "react";
+import { clsx } from "@postenbring/hedwig-css/typed-classname";
+import { Slot } from "@radix-ui/react-slot";
+import { TabsContext } from "./context";
+import { TabsContent, TabsContents, type TabsContentsProps } from "./tabs-content";
+import { TabsList, TabsTab, type TabsListProps } from "./tabs-list";
+
+export interface TabsProps extends HTMLAttributes<HTMLDivElement> {
+  children: ReactElement<TabsListProps | TabsContentsProps>[] | ReactElement;
+
+  /**
+   * Define which tab to use as default. Must be one of the <Tab/>s identifier.
+   */
+  defaultTab: string;
+
+  /**
+   * Change the default rendered element for the one passed as a child, merging their props and behavior.
+   *
+   * @default false
+   */
+  asChild?: boolean;
+}
+
+export const Tabs = forwardRef<HTMLDivElement, TabsProps>(
+  ({ asChild, defaultTab, children, ...rest }, ref) => {
+    const [activeTabId, setActiveTabId] = useState<string>(defaultTab);
+    const Component = asChild ? Slot : "div";
+    return (
+      <Component className={clsx("hds-tabs")} ref={ref} {...rest}>
+        <TabsContext.Provider value={{ activeTabId, toggleActiveTabId: setActiveTabId }}>
+          {children}
+        </TabsContext.Provider>
+      </Component>
+    );
+  },
+) as TabsType;
+Tabs.displayName = "Tabs";
+
+type TabsType = ReturnType<typeof forwardRef<HTMLDivElement, TabsProps>> & {
+  List: typeof TabsList;
+  Tab: typeof TabsTab;
+  Contents: typeof TabsContents;
+  Content: typeof TabsContent;
+};
+
+Tabs.List = TabsList;
+Tabs.Tab = TabsTab;
+Tabs.Contents = TabsContents;
+Tabs.Content = TabsContent;

package/src/text/index.tsx

@@ -0,0 +1,4 @@
+import { Text } from "./text";
+
+export { Text };
+export type * from "./text";

package/src/text/text.stories.tsx

@@ -0,0 +1,112 @@
+/* eslint-disable import/no-extraneous-dependencies -- storybook story */
+import type { Meta, StoryObj } from "@storybook/react";
+import { HStack, VStack } from "../layout";
+import { Text } from ".";
+
+const meta: Meta<typeof Text> = {
+  title: "Text",
+  component: Text,
+};
+
+export default meta;
+
+type Story = StoryObj<typeof Text>;
+export const Default: Story = {
+  render: FontGallery,
+};
+
+export const PostenBringSideBySide: Story = {
+  render: () => (
+    <HStack gap="16">
+      <div className="hds-theme-posten">
+        <FontGalleryHeader>Posten</FontGalleryHeader>
+        <FontGallery />
+      </div>
+      <div className="hds-theme-bring">
+        <FontGalleryHeader>Bring</FontGalleryHeader>
+        <FontGallery />
+      </div>
+    </HStack>
+  ),
+};
+
+export const MinAndMax: Story = {
+  render: () => (
+    <HStack gap="16">
+      <div>
+        <FontGalleryHeader>Min</FontGalleryHeader>
+        <FontGallery size="min" />
+      </div>
+      <div>
+        <FontGalleryHeader>Max</FontGalleryHeader>
+        <FontGallery size="max" />
+      </div>
+    </HStack>
+  ),
+};
+
+function FontGalleryHeader({ children }: { children: React.ReactNode }) {
+  return (
+    <h2
+      style={{
+        padding: "var(--hds-spacing-8)",
+        background: "var(--hds-colors-signature)",
+        color: "var(--hds-button-colors-text)",
+        fontWeight: 500,
+        margin: 0,
+      }}
+    >
+      {children}
+    </h2>
+  );
+}
+
+function FontGallery({ size }: { size?: "min" | "max" | "fluid" }) {
+  return (
+    <VStack gap="16">
+      <div>
+        <Text size={size} variant="h1-display" as="p">
+          Display
+        </Text>
+        <Text size={size} variant="h1" as="p">
+          H1
+        </Text>
+        <Text size={size} variant="h2" as="p">
+          H2
+        </Text>
+        <Text size={size} variant="h3" as="p">
+          H3
+        </Text>
+        <Text size={size} variant="body">
+          Body
+        </Text>
+        <Text size={size} variant="body-small">
+          Body Small
+        </Text>
+        <Text size={size} variant="technical">
+          Technical
+        </Text>
+        <Text size={size} variant="caption">
+          Caption
+        </Text>
+      </div>
+      <div>
+        <Text size={size} variant="h3-title" as="p">
+          H3 Title
+        </Text>
+        <Text size={size} variant="body-title">
+          Body Title
+        </Text>
+        <Text size={size} variant="body-small-title">
+          Body Small Title
+        </Text>
+        <Text size={size} variant="technical-title">
+          Technical Title
+        </Text>
+        <Text size={size} variant="caption-title">
+          Caption Title
+        </Text>
+      </div>
+    </VStack>
+  );
+}

package/src/text/text.tsx

@@ -0,0 +1,129 @@
+/* eslint-disable @typescript-eslint/no-unsafe-assignment -- Typings for the differnt html elements */
+/* eslint-disable @typescript-eslint/no-explicit-any -- Typings for the differnt html elements */
+
+import React, { forwardRef } from "react";
+import { clsx } from "@postenbring/hedwig-css/typed-classname";
+import { Slot } from "@radix-ui/react-slot";
+
+type HeadingProps =
+  | {
+      variant: "h1-display" | "h1" | "h2" | "h3" | "h3-title";
+      asChild: true;
+      as?: never;
+    }
+  | {
+      variant: "h1-display" | "h1" | "h2" | "h3" | "h3-title";
+      as: "h1" | "h2" | "h3" | "h4" | "h5" | "h6" | "span" | "div" | "label" | "p";
+      asChild?: never;
+    };
+
+interface ParagraphProps {
+  variant?:
+    | "body"
+    | "body-title"
+    | "body-small"
+    | "body-small-title"
+    | "technical"
+    | "technical-title"
+    | "caption"
+    | "caption-title";
+}
+
+export type TextProps = {
+  children: React.ReactNode;
+
+  /**
+   * The font-size of the component. By default it's `fluid` which means it's smaller on mobile and larger on desktop.
+   *
+   * But you can lock it to either the min or the max size.
+   *
+   * @default "fluid"
+   */
+  size?: "min" | "max" | "fluid";
+
+  /**
+   * Change the default rendered element for the one passed as a child, merging their props and behavior.
+   *
+   * @default false
+   */
+  asChild?: boolean;
+
+  /**
+   * Convienence prop to change the rendered element.
+   *
+   * Use {@link TextProps.asChild} if you need more control of the rendered element.
+   */
+  as?: "h1" | "h2" | "h3" | "h4" | "h5" | "h6" | "span" | "div" | "label" | "p";
+
+  /**
+   * 🚧 Experimental spacing
+   */
+  _unstableSpacing?: boolean;
+} & (HeadingProps | ParagraphProps) &
+  React.HTMLAttributes<HTMLParagraphElement | HTMLHeadingElement>;
+
+const defaultHTMLTag: Record<NonNullable<TextProps["variant"]>, `h${1 | 2 | 3}` | "p"> = {
+  "h1-display": "h1",
+  h1: "h1",
+  h2: "h2",
+  h3: "h3",
+  "h3-title": "h3",
+  body: "p",
+  "body-title": "p",
+  "body-small": "p",
+  "body-small-title": "p",
+  technical: "p",
+  "technical-title": "p",
+  caption: "p",
+  "caption-title": "p",
+};
+
+/**
+ * Text component
+ *
+ * If the variant is `h1-display`, `h1`, `h2`, `h3`, or `h3-title` the `as` or `asChild` prop is required.
+ *
+ * This is to force the consumer to consider which semantic html element to use. E.g. `<h1>` or `<h2>`
+ *
+ * @example
+ * ```tsx
+ * <Text variant="h1-display" as="h1">Hello world</Text>
+ * <Text variant="body">
+ *   This is a body text
+ * </Text>
+ * ```
+ */
+export const Text = forwardRef<HTMLParagraphElement | HTMLHeadingElement, TextProps>(
+  (
+    {
+      as: Tag,
+      asChild,
+      variant = "body",
+      size = "fluid",
+      _unstableSpacing: spacing,
+      children,
+      className,
+      ...rest
+    },
+    ref,
+  ) => {
+    const Component = asChild ? Slot : Tag ?? defaultHTMLTag[variant];
+    const sizeModifier =
+      size !== "fluid" && variant !== "caption" && variant !== "caption-title" && size;
+    return (
+      <Component
+        className={clsx(
+          `hds-text-${variant}`,
+          sizeModifier && `hds-text--${sizeModifier}`,
+          spacing && "hds-text--spacing",
+          className as undefined,
+        )}
+        ref={ref as any}
+        {...(rest as any)}
+      >
+        {children}
+      </Component>
+    );
+  },
+);
+Text.displayName = "Text";