@postenbring/hedwig-react 0.0.81 → 0.0.83

package/src/skeleton/skeleton.tsx

@@ -0,0 +1,114 @@
+/* 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 { clsx } from "@postenbring/hedwig-css/typed-classname";
+import { Slot } from "@radix-ui/react-slot";
+import { forwardRef } from "react";
+
+interface DimensionsFromWidthAndHeight {
+  height?: number | string;
+  width?: number | string;
+}
+
+interface SkeletonPropsInner extends React.HTMLAttributes<HTMLDivElement> {
+  /**
+   * The visual style of the Skeleton
+   */
+  variant?: "text" | "circle" | "rectangle" | "rounded";
+
+  /**
+   * Whether to show animation or not
+   * In the future the animation effect might become configurable
+   *
+   * default true
+   */
+  animation?: boolean;
+
+  children?: React.ReactNode;
+
+  /**
+   * 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 SkeletonProps.asChild} if you need more control of the rendered element.
+   */
+  as?: "h1" | "h2" | "h3" | "h4" | "h5" | "h6" | "span" | "div" | "label" | "p";
+}
+
+export type SkeletonProps = SkeletonPropsInner & DimensionsFromWidthAndHeight;
+
+/**
+ * Make skeleton loading states as placeholders for your content while waiting for data to load.
+ *
+ * **Note**
+ *
+ * Consider if this is really needed. The best experience is to avoid loading states altogether.
+ * If your loading takes under 1 second, it better to not show anything at all.
+ *
+ * - Make your backend faster
+ * - Preload/prefetch data
+ * - Avoid data loading waterfalls
+ * - Use optimistic ui when doing mutations
+ *
+ * **Usage**
+ *
+ * ```tsx
+ * <Skeleton variant="circle" width="2rem" height="2rem" />
+ * <Skeleton variant="text" />
+ * <Skeleton variant="text" width="80%" />
+ * <Skeleton variant="text">Uses content to determine width</Skeleton>
+ * <Skeleton variant="rectangle" width="300px" height="400px" />
+ * ```
+ *
+ * Remember to set `aria-hidden` on top level components you use that are not the `Skeleton` component.
+ *
+ * The `Skeleton` component does this for it self, but if you are using other components higher up in the tree, it might cause problems with screen readers
+ *
+ * **References**
+ * - https://aksel.nav.no/komponenter/core/skeleton
+ * - https://chakra-ui.com/docs/components/skeleton
+ * - https://mui.com/material-ui/react-skeleton/
+ */
+export const Skeleton = forwardRef<HTMLDivElement, SkeletonProps>(
+  (
+    {
+      as: Tag = "div",
+      asChild,
+      children,
+      animation = true,
+      variant = "text",
+      width,
+      height,
+      className,
+      style,
+      ...rest
+    },
+    ref,
+  ) => {
+    const Component = asChild ? Slot : Tag;
+    return (
+      <Component
+        className={clsx(
+          "hds-skeleton",
+          `hds-skeleton--${variant}`,
+          !animation && `hds-skeleton--no-animation`,
+          className as undefined,
+        )}
+        style={{ ...style, width, height }}
+        aria-hidden
+        {...{ inert: "true" }}
+        ref={ref as any}
+        {...(rest as any)}
+      >
+        {children}
+      </Component>
+    );
+  },
+);
+Skeleton.displayName = "Skeleton";

package/src/step-indicator/index.ts

@@ -0,0 +1,2 @@
+export { StepIndicator } from "./step-indicator";
+export type * from "./step-indicator";

package/src/step-indicator/step-indicator.stories.tsx

@@ -0,0 +1,50 @@
+/* eslint-disable import/no-extraneous-dependencies -- storybook story */
+import type { Meta, StoryObj } from "@storybook/react";
+import { Badge } from "../badge";
+import { StepIndicator } from ".";
+
+const meta: Meta<typeof StepIndicator> = {
+  title: "Step indicator",
+  component: StepIndicator,
+};
+
+export default meta;
+
+type Story = StoryObj<typeof StepIndicator>;
+
+export const Default: Story = {
+  args: {
+    label: "Progress name",
+    totalSteps: 5,
+    activeStep: 2,
+  },
+};
+
+export const Title: Story = {
+  args: {
+    activeStep: 2,
+    label: "Pakke til utlandet",
+    lang: "no",
+    totalSteps: 5,
+    title: "Hvem sender pakken?",
+    titleAs: "h2",
+  },
+};
+
+export const WithBadgeInLabel: Story = {
+  args: {
+    activeStep: 2,
+    label: (
+      <>
+        Norgespakke™ liten
+        <Badge size="smaller" style={{ marginLeft: "var(--hds-spacing-12)" }}>
+          73,-
+        </Badge>
+      </>
+    ),
+    lang: "no",
+    totalSteps: 5,
+    title: "Størrelse og vekt",
+    titleAs: "h2",
+  },
+};

package/src/step-indicator/step-indicator.tsx

@@ -0,0 +1,116 @@
+import { clsx } from "@postenbring/hedwig-css/typed-classname";
+import { forwardRef } from "react";
+
+type TitleProps =
+  | {
+      /**
+       * Optional title of the active step to be shown underneath the step indicator
+       *
+       * Use `titleAs` to set the correct heading level
+       */
+      title: React.ReactNode;
+      titleAs: "h1" | "h2" | "h3" | "h4" | "h5" | "h6";
+    }
+  | {
+      title?: undefined;
+      titleAs?: undefined;
+    };
+
+interface StepIndicatorProps extends React.HTMLAttributes<HTMLDivElement> {
+  /*
+   * 1-indexed number of the active step
+   */
+  activeStep: number;
+
+  /**
+   * 1-indexed number of steps
+   */
+  totalSteps: number;
+
+  /**
+   * Label on the left side above the steps
+   */
+  label: React.ReactNode;
+
+  /**
+   * Language for the "step x of y" label, default is "en"
+   */
+  lang?: "no" | "en" | "da" | "sv";
+}
+
+/**
+ * Indicate a step in a process.
+ *
+ * It does not handle step content or navigation, only the visual indication of the active step.
+ */
+export const StepIndicator = forwardRef<HTMLDivElement, StepIndicatorProps & TitleProps>(
+  (
+    {
+      activeStep,
+      totalSteps,
+      className,
+      label,
+      lang = "en",
+      title,
+      titleAs: TitleComponent,
+      ...rest
+    },
+    ref,
+  ) => {
+    return (
+      <div
+        ref={ref}
+        className={clsx("hds-step-indicator", className as undefined)}
+        lang={lang}
+        {...rest}
+      >
+        <div className={clsx("hds-step-indicator__header")}>
+          <span className={clsx("hds-step-indicator__left-label")}>{label}</span>
+          <span>{stepLabelTranslations[lang](activeStep, totalSteps)}</span>
+        </div>
+
+        <div className={clsx("hds-step-indicator__steps")}>
+          {Array.from({ length: totalSteps }, (_, i) => (
+            <div
+              className={clsx("hds-step-indicator__step")}
+              data-state={getStepState(i + 1, activeStep)}
+              key={i}
+            />
+          ))}
+        </div>
+
+        {title ? (
+          <TitleComponent className={clsx("hds-step-indicator__title")}>{title}</TitleComponent>
+        ) : null}
+      </div>
+    );
+  },
+);
+StepIndicator.displayName = "StepIndicator";
+
+/**
+ * Translated texts for the `step x of y` label.
+ */
+const stepLabelTranslations: Record<
+  "no" | "en" | "da" | "sv",
+  (activeStep: number, totalSteps: number) => string
+> = {
+  no: (activeStep: number, totalSteps: number) => `steg ${activeStep} av ${totalSteps}`,
+  en: (activeStep: number, totalSteps: number) => `step ${activeStep} of ${totalSteps}`,
+  da: (activeStep: number, totalSteps: number) => `trin ${activeStep} af ${totalSteps}`,
+  sv: (activeStep: number, totalSteps: number) => `steg ${activeStep} av ${totalSteps}`,
+};
+
+/**
+ * Determine the state of a step.
+ * 1-indexed
+ */
+function getStepState(renderedStep: number, activeStep: number) {
+  if (renderedStep < activeStep) {
+    return "previous";
+  }
+  if (renderedStep === activeStep) {
+    return "active";
+  }
+  return "next";
+}

package/src/styled-html/index.ts

@@ -0,0 +1,2 @@
+export { StyledHtml } from "./styled-html";
+export type * from "./styled-html";

package/src/styled-html/styled-html.stories.tsx

@@ -0,0 +1,189 @@
+/* eslint-disable import/no-extraneous-dependencies -- storybook story */
+import type { Meta, StoryObj } from "@storybook/react";
+import { StyledHtml } from ".";
+
+const meta: Meta<typeof StyledHtml> = {
+  title: "Styled Html",
+  component: StyledHtml,
+  args: {
+    children: (
+      <>
+        <h1>Hello</h1>
+        <h2>Hello</h2>
+
+        <a href="https://www.postenbring.no">Postenbring</a>
+
+        <ul>
+          <li>Hei</li>
+          <li>Hallo</li>
+          <li>Hello</li>
+        </ul>
+
+        <ol>
+          <li>En</li>
+          <li>To</li>
+          <li>Tre</li>
+        </ol>
+      </>
+    ),
+  },
+  argTypes: {
+    size: {
+      defaultValue: "default",
+      options: ["default", "small"],
+      control: {
+        type: "radio",
+      },
+      darkmode: {
+        defaultValue: false,
+        options: [true, false],
+        control: {
+          type: "radio",
+        },
+      },
+    },
+  },
+};
+
+export default meta;
+
+type Story = StoryObj<typeof StyledHtml>;
+export const Default: Story = {
+  args: {},
+};
+
+export const Darkmode: Story = {
+  args: {
+    darkmode: true,
+  },
+  parameters: {
+    backgrounds: { default: "dark" },
+  },
+};
+
+export const Small: Story = {
+  args: {
+    size: "small",
+  },
+};
+
+export const DarkmodeSmall: Story = {
+  args: {
+    darkmode: true,
+    size: "small",
+  },
+  parameters: {
+    backgrounds: { default: "dark" },
+  },
+};
+
+export const ArticleContent: Story = {
+  render: () => (
+    <StyledHtml>
+      <p>
+        Pakkeboksene er selvbetjente, og er plassert slik at de er mulig å bruke hele døgnet. Du
+        trenger bare mobilen din og Posten-appen for å åpne lukene.
+      </p>
+
+      <p>
+        Akkurat nå er det satt ut pakkebokser over 1800 steder i landet, og fremover vil det komme
+        enda flere.&nbsp;
+      </p>
+
+      <p>
+        <a href="/motta/fleksibelt/pakkeboks" title="Les mer og finn Pakkeboks">
+          Her kan du finne din nærmeste Pakkeboks
+        </a>
+      </p>
+
+      <h1 className="hds-text-h3">Slik bruker du Pakkeboks:</h1>
+
+      <p>
+        For å bruke pakkeboksene må du&nbsp;
+        <a href="/posten-app" target="_blank" title="Last ned Posten-appen">
+          laste ned Posten-appen
+        </a>
+        &nbsp;på mobilen din. Med appen kan du:
+      </p>
+
+      <ul>
+        <li>Åpne luke for å hente pakke</li>
+        <li>Reservere og åpne luke når du skal sende pakke</li>
+        <li>Velge om du vil ha pakker kun levert i de midterste lukene</li>
+        <li>Dele pakkene dine&nbsp;med andre, slik at de kan hente eller sende dem for deg</li>
+      </ul>
+
+      <h2>Hente pakker</h2>
+
+      <p>
+        Du får varsel i Posten-appen når du har en pakke som skal hentes i Pakkeboks. Slik gjør du:
+      </p>
+
+      <ul>
+        <li>Stå ved pakkeboksen og åpne appen. Husk å ha på Bluetooth</li>
+        <li>Appen kobler til riktig boks, og viser hvilken luke pakken din er i</li>
+        <li>Trykk på Åpne luke, og ta ut pakken din.</li>
+        <li>Steng luken og lukk appen</li>
+      </ul>
+
+      <h2>Velge høyde på luke</h2>
+
+      <p>Slik velger du at du vil ha pakkene kun i midterste luker:</p>
+
+      <ul>
+        <li>Du må ha nyeste versjon av Posten-appen</li>
+        <li>Åpne appen, og trykk på «Profil»</li>
+        <li>Velg «Levering i Pakkeboks», deretter&nbsp;«Luker på midten»</li>
+        <li>Lagre valget ditt</li>
+      </ul>
+
+      <h2>Sende fra Pakkeboks</h2>
+
+      <p>
+        Nå kan du bruke Posten-appen for å reservere luker i pakkeboksen når du skal sende{" "}
+        <a
+          href="/sende/i-norge/norgespakke/norgespakke-0-5-kg"
+          target="_blank"
+          title="Les mer om Norgespakke™ liten"
+        >
+          Norgespakke™ liten
+        </a>
+        .
+      </p>
+
+      <p>Slik reserverer du luke for å sende pakke:</p>
+
+      <ul>
+        <li>
+          Du må ha Posten-appen for å bestille sending og&nbsp;holde av en&nbsp;luke i pakkeboksen
+        </li>
+        <li>Velg&nbsp;Norgespakke™ liten, og følg stegene for kjøp av frakt</li>
+        <li>Velg innlevering på Posten, og fullfør kjøpet</li>
+        <li>
+          Du trenger ikke reservere luke rett etter kjøp, dette kan du gjøre innenfor 2 timer før du
+          skal sende pakken
+        </li>
+        <li>Pakken din blir hentet senest neste virkedag</li>
+      </ul>
+
+      <h2>Returnere fra Pakkeboks</h2>
+
+      <ul>
+        <li>
+          Du må ha&nbsp;<a href="https://www.posten.no/posten-app">Posten-appen</a>&nbsp;for å
+          reservere en luke.
+        </li>
+        <li>Velg retur i appen og følg stegene videre</li>
+        <li>Fest&nbsp;adresselappen for retur&nbsp;midt på pakken med strekkoden godt synlig</li>
+        <li>Luken holdes av i to timer fra du reserverer den.</li>
+        <li>Du kan reservere en luke&nbsp;når som helst</li>
+      </ul>
+
+      <p>Er det noe du lurer på?</p>
+
+      <p>
+        Se flere <a href="/kundeservice/pakkeboks-hjelp">spørsmål og svar om Pakkeboks</a>.
+      </p>
+    </StyledHtml>
+  ),
+};

package/src/styled-html/styled-html.tsx

@@ -0,0 +1,59 @@
+import { forwardRef } from "react";
+import { clsx } from "@postenbring/hedwig-css/typed-classname";
+import { Slot } from "@radix-ui/react-slot";
+
+export interface StyledHtmlProps extends React.HTMLAttributes<HTMLDivElement> {
+  children?: React.ReactNode;
+  size?: "default" | "small";
+  darkmode?: boolean;
+
+  /**
+   * Change the default rendered element for the one passed as a child, merging their props and behavior.
+   *
+   * @default false
+   */
+  asChild?: boolean;
+}
+
+/**
+ * A component for displaying dynamic content that you want to apply hedwig styling to.
+ * the styling depends on the semantic html elements you use inside the component.
+ *
+ * Useful when you have dynamic content that you want styled with hedwig, like content from a CMS.
+ *
+ * Previously known as `hw-wysiwyg` in hedwig legacy. In tailwind this kind of component it is known as `prose`.
+ *
+ * @example
+ * ```tsx
+ * <StyledHtml>
+ *   <h1>Heading 1</h1>
+ *   <h2>Heading 2</h2>
+ *   <a href="https://www.postenbring.no">Postenbring</a>
+ *   <ul>
+ *    <li>Hei</li>
+ *    <li>Hallo</li>
+ *    <li>Hello</li>
+ *   </ul>
+ * </StyledHtml>
+ * ```
+ */
+export const StyledHtml = forwardRef<HTMLDivElement, StyledHtmlProps>(
+  ({ asChild, children, size, darkmode = false, className, ...rest }, ref) => {
+    const Component = asChild ? Slot : "div";
+    return (
+      <Component
+        className={clsx(
+          `hds-styled-html`,
+          size === "small" && "hds-styled-html--small",
+          darkmode && "hds-styled-html--darkmode",
+          className as undefined,
+        )}
+        ref={ref}
+        {...rest}
+      >
+        {children}
+      </Component>
+    );
+  },
+);
+StyledHtml.displayName = "StyledHtml";

package/src/table/index.ts

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

package/src/table/table.tsx

@@ -0,0 +1,59 @@
+import { clsx } from "@postenbring/hedwig-css/typed-classname";
+import { forwardRef, useId } from "react";
+
+interface TableProps extends React.HTMLAttributes<HTMLTableElement> {
+  className?: string;
+
+  /**
+   * Size of the table
+   *
+   * Use `compressed` for a more compact table, or `mobile-compressed` for a compact table on mobile screens only.
+   */
+  size?: "default" | "compressed" | "mobile-compressed";
+
+  /**
+   * The table caption
+   *
+   * You can also set this by passing `<caption>` as a first child of the table
+   */
+  caption?: React.ReactNode;
+
+  /**
+   * Optional description of the table displayed underneath the table
+   *
+   * Ensures the `aria-describedby` attribute is set on the table, making it accessible for screen readers.
+   */
+  description?: React.ReactNode;
+}
+
+export const Table = forwardRef<HTMLTableElement, TableProps>(
+  ({ children, className, size, caption, description, ...rest }, ref) => {
+    const descriptionId = useId();
+    return (
+      <>
+        <table
+          aria-describedby={description ? descriptionId : undefined}
+          ref={ref}
+          className={clsx(
+            "hds-table",
+            {
+              "hds-table--compressed": size === "compressed",
+              "hds-table--mobile-compressed": size === "mobile-compressed",
+            },
+            className as undefined,
+          )}
+          {...rest}
+        >
+          {caption ? <caption>{caption}</caption> : null}
+          {children}
+        </table>
+        {description ? (
+          <p className={clsx("hds-table-description")} id={descriptionId}>
+            {description}
+          </p>
+        ) : null}
+      </>
+    );
+  },
+);
+Table.displayName = "Table";

package/src/tabs/context.ts

@@ -0,0 +1,18 @@
+import { createContext, useContext } from "react";
+
+export interface TabsContextProps {
+  activeTabId: string;
+  toggleActiveTabId: (tabId: string) => void;
+}
+
+export const TabsContext = createContext<TabsContextProps | null>(null);
+
+export function useTabsContext() {
+  const context = useContext(TabsContext);
+  if (!context) {
+    throw new Error(
+      "Tabs context required. Did you use `<Tabs.List />`, `<Tabs.Tab />`, or `<Tabs.Content />` outside of <Tabs/>?",
+    );
+  }
+  return context;
+}

package/src/tabs/index.tsx

@@ -0,0 +1,7 @@
+export { Tabs } from "./tabs";
+export { TabsList, TabsTab } from "./tabs-list";
+export { TabsContents, TabsContent } from "./tabs-content";
+
+export type * from "./tabs";
+export type * from "./tabs-list";
+export type * from "./tabs-content";

package/src/tabs/tabs-content.tsx

@@ -0,0 +1,62 @@
+import type { HTMLAttributes, ReactElement } from "react";
+import { forwardRef } from "react";
+import { clsx } from "@postenbring/hedwig-css/typed-classname";
+import { Slot } from "@radix-ui/react-slot";
+import { useTabsContext } from "./context";
+
+export interface TabsContentsProps extends HTMLAttributes<HTMLDivElement> {
+  children: ReactElement<TabsContentProps> | ReactElement<TabsContentProps>[];
+
+  /**
+   * Change the default rendered element for the one passed as a child, merging their props and behavior.
+   *
+   * @default false
+   */
+  asChild?: boolean;
+}
+
+export const TabsContents = forwardRef<HTMLDivElement, TabsContentsProps>(
+  ({ asChild, children, ...rest }, ref) => {
+    const Component = asChild ? Slot : "div";
+    return (
+      <Component ref={ref} className={clsx("hds-tabs__contents")} {...rest}>
+        {children}
+      </Component>
+    );
+  },
+);
+TabsContents.displayName = "Tabs.Contents";
+
+export interface TabsContentProps extends HTMLAttributes<HTMLElement> {
+  children: ReactElement<HTMLElement> | ReactElement<HTMLElement>[] | string;
+
+  /**
+   * Content for the referenced tabId
+   */
+  forTabId: string;
+
+  /**
+   * Change the default rendered element for the one passed as a child, merging their props and behavior.
+   *
+   * @default false
+   */
+  asChild?: boolean;
+}
+
+export const TabsContent = forwardRef<HTMLDivElement, TabsContentProps>(
+  ({ asChild, forTabId, children, ...rest }, ref) => {
+    const context = useTabsContext();
+    const Component = asChild ? Slot : "div";
+
+    if (context.activeTabId === forTabId) {
+      return (
+        <Component {...rest} ref={ref}>
+          {children}
+        </Component>
+      );
+    }
+    return null;
+  },
+);
+
+TabsContent.displayName = "Tabs.Content";