@postenbring/hedwig-react 0.0.81 → 0.0.83

package/src/form/select/select.tsx

@@ -0,0 +1,33 @@
+import { forwardRef, type ReactNode , type SelectHTMLAttributes } from "react";
+import { clsx } from "@postenbring/hedwig-css/typed-classname";
+import { InputGroup } from "../input-group";
+import type { InputGroupProps } from "../input-group";
+
+export type SelectProps = Omit<
+  InputGroupProps & SelectHTMLAttributes<HTMLSelectElement>,
+  "readOnly" | "children"
+> & { children: ReactNode };
+
+export const Select = forwardRef<HTMLSelectElement, SelectProps>(function Select(
+  { className, variant, errorMessage, labelProps, label, id, style, disabled, children, ...rest },
+  ref,
+) {
+  return (
+    <InputGroup
+      className={clsx("hds-select", className as undefined)}
+      disabled={disabled}
+      errorMessage={errorMessage}
+      id={id}
+      label={label}
+      labelProps={labelProps}
+      style={style}
+      variant={variant}
+    >
+      <select {...rest} disabled={disabled} ref={ref}>
+        {children}
+      </select>
+    </InputGroup>
+  );
+});
+
+Select.displayName = "Select";

package/src/form/textarea/index.tsx

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

package/src/form/textarea/textarea.stories.tsx

@@ -0,0 +1,106 @@
+/* eslint-disable import/no-extraneous-dependencies -- storybook story */
+import type { Meta, StoryObj } from "@storybook/react";
+import { Textarea } from ".";
+
+const meta: Meta<typeof Textarea> = {
+  title: "Form/Textarea",
+  component: Textarea,
+};
+
+export default meta;
+
+type Story = StoryObj<typeof Textarea>;
+
+export const PlainTextarea: Story = {
+  args: {
+    label: "Some kind of textarea",
+    placeholder: "I am a placeholder",
+    errorMessage: "",
+    readOnly: false,
+    variant: "default",
+  },
+  argTypes: {
+    variant: { control: "inline-radio", options: ["default", "white"] },
+  },
+};
+
+export const PlainTextareaWithError: Story = {
+  args: {
+    label: "Some kind of textarea with error",
+    errorMessage: "This is invalid",
+    placeholder: "I am a placeholder",
+  },
+};
+
+export const ReadonlyTextarea: Story = {
+  args: {
+    label: "Some kind of readonly textarea",
+    readOnly: true,
+    value: "This is a read-only value",
+  },
+};
+
+export const ReadonlyTextareaWithError: Story = {
+  args: {
+    label: "Some kind of readonly textarea",
+    readOnly: true,
+    value: "This is a read-only value",
+    errorMessage: "This is invalid",
+  },
+};
+
+export const WhiteTextarea: Story = {
+  args: {
+    label: "Some kind of white textarea",
+    variant: "white",
+    placeholder: "I am a placeholder",
+  },
+  render: (props) => (
+    <div style={{ background: "var(--hds-ui-colors-light-grey-fill)", padding: "1em" }}>
+      <Textarea {...props} />
+    </div>
+  ),
+};
+
+export const WhiteTextareaWithError: Story = {
+  args: {
+    label: "Some kind of white textarea",
+    variant: "white",
+    placeholder: "I am a placeholder",
+    errorMessage: "This is invalid",
+  },
+  render: (props) => (
+    <div style={{ background: "var(--hds-ui-colors-light-grey-fill)", padding: "1em" }}>
+      <Textarea {...props} />
+    </div>
+  ),
+};
+
+export const WhiteReadonlyTextarea: Story = {
+  args: {
+    label: "Some kind of readonly textarea",
+    variant: "white",
+    readOnly: true,
+    value: "This is a read-only value",
+  },
+  render: (props) => (
+    <div style={{ background: "var(--hds-ui-colors-light-grey-fill)", padding: "1em" }}>
+      <Textarea {...props} />
+    </div>
+  ),
+};
+
+export const WhiteReadonlyTextareaWithError: Story = {
+  args: {
+    label: "Some kind of readonly textarea",
+    variant: "white",
+    readOnly: true,
+    value: "This is a read-only value",
+    errorMessage: "This is invalid",
+  },
+  render: (props) => (
+    <div style={{ background: "var(--hds-ui-colors-light-grey-fill)", padding: "1em" }}>
+      <Textarea {...props} />
+    </div>
+  ),
+};

package/src/form/textarea/textarea.tsx

@@ -0,0 +1,33 @@
+import { forwardRef } from "react";
+import type { TextareaHTMLAttributes } from "react";
+import { clsx } from "@postenbring/hedwig-css/typed-classname";
+import { InputGroup } from "../input-group";
+import type { InputGroupProps } from "../input-group";
+
+export type TextareaProps = Omit<
+  InputGroupProps & TextareaHTMLAttributes<HTMLTextAreaElement>,
+  "children"
+>;
+
+export const Textarea = forwardRef<HTMLTextAreaElement, TextareaProps>(function Textarea(
+  { className, variant, errorMessage, labelProps, label, id, style, disabled, readOnly, ...rest },
+  ref,
+) {
+  return (
+    <InputGroup
+      className={clsx("hds-textarea", className as undefined)}
+      disabled={disabled}
+      errorMessage={errorMessage}
+      id={id}
+      label={label}
+      labelProps={labelProps}
+      readOnly={readOnly}
+      style={style}
+      variant={variant}
+    >
+      <textarea {...rest} disabled={disabled} readOnly={readOnly} ref={ref} />
+    </InputGroup>
+  );
+});
+
+Textarea.displayName = "Textarea";

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 "./utils";
+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";