@postenbring/hedwig-react 0.0.81 → 0.0.82

package/src/help-text/help-text.tsx

@@ -0,0 +1,98 @@
+import * as Popover from "@radix-ui/react-popover";
+import { clsx } from "@postenbring/hedwig-css/typed-classname";
+import { forwardRef } from "react";
+import { Box } from "../box";
+
+interface HelpTextProps extends React.HTMLAttributes<HTMLButtonElement> {
+  className?: string;
+
+  /**
+   * The content of the help text, often a word or phrase that could use some explanation
+   */
+  children: React.ReactNode;
+
+  /**
+   * The help text that will be shown when the user clicks the trigger
+   */
+  helpText: React.ReactNode;
+
+  /**
+   * The title of the help text. Used by screen readers and if the user hover over the help text
+   */
+  title?: string;
+
+  /**
+   * Props for the `Box` that contains the help text
+   */
+  boxProps?: React.ComponentProps<typeof Box>;
+
+  /**
+   * The side of the trigger the popover should be attached to
+   *
+   * @default "top"
+   */
+  side?: "top" | "right" | "bottom" | "left";
+
+  /**
+   * The alignment of the popover content
+   *
+   * @default "start"
+   */
+  align?: "center" | "end" | "start";
+}
+
+/**
+ * Show a help text for a word or phrase when clicked
+ *
+ * Useful for providing explanations for domain-specific terms, acronyms or phrases that could do with further elaboration
+ *
+ * @example
+ * ```tsx
+ * <p>
+ *   En annen avgjørende faktor for avgifter er om nettbutikken er registrert i{" "}
+ *   <HelpText helpText={`VOEC er en forkortelse for "VAT on E-commerce" (mva. på e-handel).`}>
+ *    VOEC
+ *   </HelpText>
+ * </p>
+ * ```
+ */
+export const HelpText = forwardRef<HTMLButtonElement, HelpTextProps>(
+  (
+    { children, className, helpText, title, side = "top", align = "start", boxProps, ...rest },
+    ref,
+  ) => {
+    return (
+      // NOTE: Using radix's [Popover component](https://www.radix-ui.com/primitives/docs/components/popover)
+      // In the future we can use the native popover api, but as of writing, though all browsers support it
+      // it's not far enough back to be used in production
+      // https://caniuse.com/mdn-html_elements_input_popovertarget
+      <Popover.Root>
+        <Popover.Trigger asChild>
+          <button
+            ref={ref}
+            className={clsx("hds-help-text-button", className as undefined)}
+            title={title}
+            type="button"
+            {...rest}
+          >
+            {children}
+          </button>
+        </Popover.Trigger>
+        <Popover.Portal>
+          <Popover.Content asChild side={side} align={align}>
+            <Box
+              {...boxProps}
+              className={clsx("hds-help-text-box", boxProps?.className as undefined)}
+            >
+              <Popover.Close asChild>
+                <Box.CloseButton />
+              </Popover.Close>
+              {helpText}
+            </Box>
+          </Popover.Content>
+        </Popover.Portal>
+      </Popover.Root>
+    );
+  },
+);
+HelpText.displayName = "HelpText";

package/src/help-text/index.ts

@@ -0,0 +1,2 @@
+export { HelpText } from "./help-text";
+export type * from "./help-text";

package/src/index-no-css.tsx

@@ -0,0 +1,25 @@
+export * from "./accordion";
+export * from "./badge";
+export * from "./box";
+export * from "./breadcrumbs";
+export * from "./button";
+export * from "./card";
+export * from "./description-list";
+export * from "./form";
+export * from "./footer";
+export * from "./help-text";
+export * from "./layout";
+export * from "./link";
+export * from "./list";
+export * from "./message";
+export * from "./modal";
+export * from "./navbar";
+export * from "./show-more";
+export * from "./skeleton";
+export * from "./step-indicator";
+export * from "./styled-html";
+export * from "./table";
+export * from "./tabs";
+export * from "./text";
+export * from "./utilities";
+export * from "./warning-banner";

package/src/index.tsx

@@ -0,0 +1,11 @@
+/**
+ * Import the hedwig css file, so the consumers don't have to. Plug and play.
+ *
+ * NOTE: Importing the full path, not just the package name.
+ * For some reason vite did not include the css during development when this file only imported the package name.
+ *
+ * Consumers using the `@postenbring/hedwig-css` package directly should only need to import the package without a path.
+ */
+import "@postenbring/hedwig-css/dist/index.css";
+
+export * from "./index-no-css";

package/src/layout/container/container.stories.tsx

@@ -0,0 +1,62 @@
+/* eslint-disable import/no-extraneous-dependencies -- storybook story */
+import type { Meta, StoryObj } from "@storybook/react";
+import { useState, useEffect, useRef, useId } from "react";
+import { Container } from "..";
+
+const meta: Meta<typeof Container> = {
+  title: "Layout/Container",
+  component: Container,
+  render: (args) => (
+    <Container {...args} style={{ background: "var(--hds-ui-colors-warning-yellow)" }}>
+      <div style={{ background: "var(--hds-ui-colors-warning-yellow-light-fill)" }}>
+        <Widths />
+      </div>
+    </Container>
+  ),
+};
+
+export default meta;
+
+type Story = StoryObj<typeof Container>;
+
+export const Default: Story = {};
+
+export const Slim: Story = {
+  args: {
+    variant: "slim",
+  },
+};
+
+function Widths() {
+  const id = useId().replace(":", "").replace(":", "");
+  const [windowWidth, setWindowWidth] = useState(window.innerWidth);
+  const [containerWidth, setContainerWidth] = useState(0);
+  const [innerWidth, setInnerWidth] = useState(0);
+  const ref = useRef<HTMLDivElement>(null);
+  useEffect(() => {
+    const handleResize = () => {
+      setWindowWidth(window.innerWidth);
+      const container = document.querySelector(`.hds-container:has(#${id})`);
+      if (container !== null) {
+        setContainerWidth(container.getBoundingClientRect().width);
+      }
+      if (ref.current !== null) {
+        setInnerWidth(ref.current.getBoundingClientRect().width);
+      }
+    };
+
+    handleResize();
+    window.addEventListener("resize", handleResize);
+    return () => {
+      window.removeEventListener("resize", handleResize);
+    };
+  }, [id]);
+
+  return (
+    <div id={id} ref={ref}>
+      <p>Window width: {windowWidth}</p>
+      <p>Container width: {containerWidth}</p>
+      <p>Inner width: {innerWidth}</p>
+    </div>
+  );
+}

package/src/layout/container/container.tsx

@@ -0,0 +1,47 @@
+import { clsx } from "@postenbring/hedwig-css/typed-classname";
+import { Slot } from "@radix-ui/react-slot";
+import type { HTMLAttributes, ReactNode } from "react";
+import { forwardRef } from "react";
+
+export interface ContainerProps extends HTMLAttributes<HTMLDivElement> {
+  variant?: "default" | "slim";
+  children: 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 ContainerProps.asChild} if you need more control of the rendered element.
+   */
+  as?: "div" | "section" | "aside" | "main" | "article" | "header" | "footer";
+}
+
+/**
+ * Container is a layout component that is used to wrap content.
+ * It ensures a max-width and minimum spacing on the sides.
+ */
+export const Container = forwardRef<HTMLDivElement, ContainerProps>(
+  ({ as: Tag = "div", asChild, className, children, variant, ...rest }, ref) => {
+    const Component = asChild ? Slot : Tag;
+    return (
+      <Component
+        {...rest}
+        className={clsx(
+          "hds-container",
+          { "hds-container--slim": variant === "slim" },
+          className as undefined,
+        )}
+        ref={ref}
+      >
+        {children}
+      </Component>
+    );
+  },
+);
+Container.displayName = "Container";

package/src/layout/grid/grid.tsx

@@ -0,0 +1,163 @@
+import { clsx } from "@postenbring/hedwig-css/typed-classname";
+import { Slot } from "@radix-ui/react-slot";
+import { forwardRef } from "react";
+import { getResponsiveProps, type ResponsiveProp } from "../responsive";
+import { type SpacingSizes, type ResponsiveSpacingSizes, getSpacingVariable } from "../spacing";
+
+export interface GridItemProps extends React.HTMLAttributes<HTMLDivElement> {
+  children: React.ReactNode;
+
+  /**
+   * Column span for the grid item
+   *
+   * `default` is `12`
+   */
+  span?: ResponsiveProp<1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12>;
+
+  /**
+   * Center the grid item horizontally
+   *
+   * Offsets the start position of the grid item relative to it's span so that it appears centered.
+   *
+   * assumes a span of 2, 4, 6, 8, or 10
+   *
+   * a span of `12` is 100% width and centering has no effect
+   *
+   * `default` is `false`
+   */
+  center?: ResponsiveProp<boolean>;
+
+  /**
+   * Change the default rendered element for the one passed as a child, merging their props and behavior.
+   */
+  asChild?: boolean;
+}
+
+/**
+ * 🚧 Grid.Item
+ *
+ * Use as the direct child of a `Grid` to override `span` and `center` for individual items.
+ */
+export const GridItem = forwardRef<HTMLDivElement, GridItemProps>(
+  ({ children, asChild, className, span, center, style: _style, ...rest }, ref) => {
+    const Component = asChild ? Slot : "div";
+    const style: React.CSSProperties = {
+      ..._style,
+      ...getResponsiveProps("--hds-grid-item-span", span),
+      ...getResponsiveProps("--hds-grid-item-center", center, (value) => (value ? "1" : "0")),
+    };
+    return (
+      <Component
+        style={style}
+        className={clsx("hds-grid__item", className as undefined)}
+        ref={ref}
+        {...rest}
+      >
+        {children}
+      </Component>
+    );
+  },
+);
+GridItem.displayName = "Grid.Item";
+
+export interface GridProps extends React.HTMLAttributes<HTMLDivElement> {
+  children: React.ReactNode;
+
+  /**
+   * Space between grid items. Both horizontal and vertical.
+   *
+   * Use the responsive shorthand `12-16` to jump a level at the `large` breakpoint.
+   *
+   * Or use the responsive object `{ initial: 40, large: 64 }` to set different values at different breakpoints.
+   *
+   * Use `gapX` and `gapY` to set different values for horizontal and vertical spacing.
+   */
+  gap?: ResponsiveProp<SpacingSizes> | ResponsiveSpacingSizes;
+
+  /**
+   * Space between grid items horizontally
+   */
+  gapX?: ResponsiveProp<SpacingSizes> | ResponsiveSpacingSizes;
+
+  /**
+   * Space between grid items vertically
+   */
+  gapY?: ResponsiveProp<SpacingSizes> | ResponsiveSpacingSizes;
+
+  /**
+   * Column span for the grid items
+   *
+   * `default` is `12`
+   */
+  span?: ResponsiveProp<1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12>;
+
+  /**
+   * Center grid items horizontally
+   *
+   * Offsets the start position of the grid items relative to their span so that it appears centered.
+   *
+   * assumes a span of 2, 4, 6, 8, or 10
+   *
+   * a span of `12` is 100% width and centering has no effect
+   *
+   * `default` is `false`
+   */
+  center?: ResponsiveProp<boolean>;
+
+  /**
+   * Change the default rendered element for the one passed as a child, merging their props and behavior.
+   *
+   * @default false
+   */
+  asChild?: boolean;
+}
+
+/**
+ * A simple opionated abstraction over CSS Grid.
+ *
+ * The grid is always a 12 column grid.
+ *
+ * @example
+ * ```tsx
+ * <Grid gap="12-16" span={{ small: 6 }}>
+ *   <div>6/12</div>
+ *   <div>6/12</div>
+ *   <Grid.Item span={{ small: 12 }}>12/12</Grid.Item>
+ *   <div>6/12</div>
+ *   <div>6/12</div>
+ * </Grid>
+ * ```
+ */
+export const Grid = forwardRef<HTMLDivElement, GridProps>(
+  (
+    { children, asChild, className, span, center, style: _style, gap, gapX, gapY, ...rest },
+    ref,
+  ) => {
+    const Component = asChild ? Slot : "div";
+    const style: React.CSSProperties = {
+      ..._style,
+      ...getResponsiveProps("--hds-grid-gap", gap, getSpacingVariable),
+      ...getResponsiveProps("--hds-grid-gap-x", gapX, getSpacingVariable),
+      ...getResponsiveProps("--hds-grid-gap-y", gapY, getSpacingVariable),
+      ...getResponsiveProps("--hds-grid-span", span),
+      ...getResponsiveProps("--hds-grid-center", center, (value) => (value ? "1" : "0")),
+    };
+    return (
+      <Component
+        style={style}
+        className={clsx("hds-grid", className as undefined)}
+        ref={ref}
+        {...rest}
+      >
+        {children}
+      </Component>
+    );
+  },
+) as GridType;
+Grid.displayName = "Grid";
+
+type GridType = ReturnType<typeof forwardRef<HTMLDivElement, GridProps>> & {
+  Item: typeof GridItem;
+};
+
+Grid.Item = GridItem;

package/src/layout/grid/index.tsx

@@ -0,0 +1,3 @@
+export { Grid, GridItem } from "./grid";
+
+export type * from "./grid";

package/src/layout/index.tsx

@@ -0,0 +1,3 @@
+export * from "./container/container";
+export * from "./grid";
+export * from "./stack";

package/src/layout/responsive.ts

@@ -0,0 +1,26 @@
+type Breakpoints = "initial" | "small" | "medium" | "large" | "xlarge";
+
+type ResponsiveValues<T> = {
+  [Breakpoint in Breakpoints]?: T;
+};
+
+export type ResponsiveProp<T> = T | ResponsiveValues<T>;
+
+export function getResponsiveProps<T>(
+  variable: `--hds-${string}`,
+  inputValues?: ResponsiveProp<T>,
+  valueTransformer: (value: T) => string = (value) => String(value),
+) {
+  if (!inputValues) return {};
+
+  if (typeof inputValues !== "object") {
+    return { [`${variable}-initial`]: valueTransformer(inputValues) };
+  }
+
+  const result: Record<string, string> = {};
+  for (const [key, value] of Object.entries(inputValues as ResponsiveValues<T>)) {
+    result[`${variable}-${key}`] = valueTransformer(value);
+  }
+
+  return result;
+}

package/src/layout/spacing.ts

@@ -0,0 +1,37 @@
+// TODO: Get from tokens package
+// For now it's fine, since it's still in this monorepo
+const spacingSizes = {
+  "4": "4",
+  "8": "8",
+  "12": "12",
+  "16": "16",
+  "20": "20",
+  "24": "24",
+  "32": "32",
+  "40": "40",
+  "48": "48",
+  "64": "64",
+  "80": "80",
+  "120": "120",
+} as const;
+export type SpacingSizes = keyof typeof spacingSizes;
+
+const responsiveSpacingSizes = {
+  "4-8": "4-8",
+  "8-12": "8-12",
+  "12-16": "12-16",
+  "16-20": "16-20",
+  "20-24": "20-24",
+  "24-32": "24-32",
+  "32-40": "32-40",
+  "40-48": "40-48",
+  "48-64": "48-64",
+  "64-80": "64-80",
+  "80-120": "80-120",
+  "120-160": "120-160",
+} as const;
+export type ResponsiveSpacingSizes = keyof typeof responsiveSpacingSizes;
+
+export function getSpacingVariable(size: SpacingSizes | ResponsiveSpacingSizes) {
+  return `var(--hds-spacing-${size})`;
+}

package/src/layout/stack/index.tsx

@@ -0,0 +1,2 @@
+export { Stack, HStack, VStack } from "./stack";
+export type * from "./stack";

package/src/layout/stack/stack.tsx

@@ -0,0 +1,128 @@
+import * as React from "react";
+import { clsx } from "@postenbring/hedwig-css/typed-classname";
+import { forwardRef } from "react";
+import { Slot } from "@radix-ui/react-slot";
+import { getSpacingVariable, type ResponsiveSpacingSizes, type SpacingSizes } from "../spacing";
+import { getResponsiveProps, type ResponsiveProp } from "../responsive";
+
+type CSSPropertiesWithVar = React.CSSProperties & {
+  "--hds-stack-gap"?: string;
+  "--hds-stack-direction"?: string;
+  "--hds-stack-wrap"?: string;
+  "--hds-stack-align"?: string;
+  "--hds-stack-justify"?: string;
+};
+
+export interface StackProps extends React.HTMLAttributes<HTMLDivElement> {
+  children: React.ReactNode;
+
+  /**
+   * Space between items. Both horizontal and vertical.
+   *
+   * Use the responsive shorthand `12-16` to jump a level at the `large` breakpoint.
+   *
+   * Or use the responsive object `{ initial: 40, large: 64 }` to set different values at different breakpoints.
+   *
+   * Use `gapX` and `gapY` to set different values for horizontal and vertical spacing.
+   */
+  gap?: ResponsiveProp<SpacingSizes> | ResponsiveSpacingSizes;
+
+  /**
+   * Space between items horizontally
+   */
+  gapX?: ResponsiveProp<SpacingSizes> | ResponsiveSpacingSizes;
+
+  /**
+   * Space between items vertically
+   */
+  gapY?: ResponsiveProp<SpacingSizes> | ResponsiveSpacingSizes;
+
+  direction?: ResponsiveProp<React.CSSProperties["flexDirection"]>;
+  wrap?: ResponsiveProp<boolean>;
+  align?: ResponsiveProp<React.CSSProperties["alignItems"]>;
+  justify?: ResponsiveProp<React.CSSProperties["justifyContent"]>;
+
+  /**
+   * Change the default rendered element for the one passed as a child, merging their props and behavior.
+   *
+   * @default false
+   */
+  asChild?: boolean;
+}
+
+/**
+ * 🚨 WORK IN PROGRESS 🚨
+ *
+ * TODO
+ * - [ ] Add more examples
+ * - [ ] Document usage
+ * - [ ] Document props
+ */
+export const Stack = forwardRef<HTMLDivElement, StackProps>(
+  (
+    {
+      children,
+      asChild,
+      className,
+      style: _style,
+      gap,
+      gapX,
+      gapY,
+      direction,
+      wrap,
+      align,
+      justify,
+      ...rest
+    },
+    ref,
+  ) => {
+    const Component = asChild ? Slot : "div";
+    const style: CSSPropertiesWithVar = {
+      ..._style,
+      ...getResponsiveProps("--hds-stack-gap", gap, getSpacingVariable),
+      ...getResponsiveProps("--hds-stack-gap-x", gapX, getSpacingVariable),
+      ...getResponsiveProps("--hds-stack-gap-y", gapY, getSpacingVariable),
+      ...getResponsiveProps("--hds-stack-direction", direction),
+      ...getResponsiveProps("--hds-stack-wrap", wrap, (value) => (value ? "wrap" : "nowrap")),
+      ...getResponsiveProps("--hds-stack-align", align),
+      ...getResponsiveProps("--hds-stack-justify", justify),
+    };
+    return (
+      <Component
+        style={style}
+        className={clsx("hds-stack", className as undefined)}
+        ref={ref}
+        {...rest}
+      >
+        {children}
+      </Component>
+    );
+  },
+);
+Stack.displayName = "Stack";
+
+/**
+ * 🚨 WORK IN PROGRESS 🚨
+ *
+ * TODO
+ * - [ ] Add more examples
+ * - [ ] Document usage
+ * - [ ] Document props
+ */
+export const HStack = forwardRef<HTMLDivElement, Omit<StackProps, "direction">>((props, ref) => {
+  return <Stack ref={ref} {...props} direction="row" />;
+});
+HStack.displayName = "HStack";
+
+/**
+ * 🚨 WORK IN PROGRESS 🚨
+ *
+ * TODO
+ * - [ ] Add more examples
+ * - [ ] Document usage
+ * - [ ] Document props
+ */
+export const VStack = forwardRef<HTMLDivElement, Omit<StackProps, "direction">>((props, ref) => {
+  return <Stack ref={ref} {...props} direction="column" />;
+});
+VStack.displayName = "VStack";

package/src/link/index.tsx

@@ -0,0 +1,3 @@
+export { Link } from "./link";
+
+export type * from "./link";

package/src/link/link.stories.tsx

@@ -0,0 +1,64 @@
+/* eslint-disable import/no-extraneous-dependencies -- storybook story */
+import type { Meta, StoryObj } from "@storybook/react";
+import { Link } from ".";
+
+const meta: Meta<typeof Link> = {
+  title: "Link",
+  component: Link,
+
+  args: {
+    children: "Link",
+    href: "https://www.posten.no/",
+    onClick: (e) => {
+      e.preventDefault();
+      // eslint-disable-next-line no-alert -- Storybook Demo
+      alert("Hello");
+    },
+  },
+
+  // Hide onClick from the auto generated table
+  argTypes: {
+    onClick: {
+      table: {
+        disable: true,
+      },
+    },
+  },
+};
+
+export default meta;
+
+type Story = StoryObj<typeof Link>;
+
+export const Underline: Story = {};
+export const Solid: Story = {
+  args: {
+    variant: "solid",
+  },
+};
+export const Inverted: Story = {
+  args: {
+    variant: "inverted",
+  },
+  parameters: {
+    backgrounds: { default: "dark" },
+  },
+};
+export const NoUnderline: Story = {
+  args: {
+    variant: "no-underline",
+  },
+};
+
+export const ButtonAsLink: Story = {
+  name: "Button as a link",
+  args: {
+    asChild: true,
+    children: <button type="button">Les mer</button>,
+    href: undefined,
+    onClick: () => {
+      // eslint-disable-next-line no-alert -- Story
+      alert(`Hello world`);
+    },
+  },
+};