@postenbring/hedwig-react 0.0.86 → 0.0.88

package/src/form/input/input.stories.tsx

@@ -1,8 +1,5 @@
 /* eslint-disable import/no-extraneous-dependencies -- storybook story */
 import type { Meta, StoryObj } from "@storybook/react";
-import { useState } from "react";
-import { Button } from "../../button";
-import { HStack, VStack } from "../../layout";
 import { Input } from ".";
 
 const meta: Meta<typeof Input> = {
@@ -14,7 +11,7 @@ export default meta;
 
 type Story = StoryObj<typeof Input>;
 
-export const PlainInput: Story = {
+export const Preview: Story = {
   args: {
     label: "Some kind of input",
     placeholder: "I am a placeholder",
@@ -26,141 +23,3 @@ export const PlainInput: Story = {
     variant: { control: "inline-radio", options: ["default", "white"] },
   },
 };
-
-export const PlainInputWithError: Story = {
-  args: {
-    label: "Some kind of input with error",
-    errorMessage: "This is invalid",
-    placeholder: "I am a placeholder",
-  },
-};
-
-export const ReadonlyInput: Story = {
-  args: {
-    label: "Some kind of readonly input",
-    readOnly: true,
-    value: "This is a read-only value",
-  },
-};
-
-export const ReadonlyInputWithError: Story = {
-  args: {
-    label: "Some kind of readonly input",
-    readOnly: true,
-    value: "This is a read-only value",
-    errorMessage: "This is invalid",
-  },
-};
-
-export const WhiteInput: Story = {
-  args: {
-    label: "Some kind of white input",
-    variant: "white",
-    placeholder: "I am a placeholder",
-  },
-  render: (props) => (
-    <div style={{ background: "var(--hds-ui-colors-light-grey-fill)", padding: "1em" }}>
-      <Input {...props} />
-    </div>
-  ),
-};
-
-export const WhiteInputWithError: Story = {
-  args: {
-    label: "Some kind of white input",
-    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" }}>
-      <Input {...props} />
-    </div>
-  ),
-};
-
-export const WhiteReadonlyInput: Story = {
-  args: {
-    label: "Some kind of readonly input",
-    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" }}>
-      <Input {...props} />
-    </div>
-  ),
-};
-
-export const WhiteReadonlyInputWithError: Story = {
-  args: {
-    label: "Some kind of readonly input",
-    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" }}>
-      <Input {...props} />
-    </div>
-  ),
-};
-
-export const TrackingNumberSearch: Story = {
-  render: () => (
-    <HStack
-      gap="4"
-      align="end"
-      style={{
-        maxWidth: 556,
-      }}
-    >
-      <Input label="Sporingsnummer" style={{ width: "100%" }} />
-      <Button size="large">Spor</Button>
-    </HStack>
-  ),
-};
-
-export const FormWithErrorsOnSubmit: Story = {
-  render: () => {
-    // eslint-disable-next-line react-hooks/rules-of-hooks -- It's ok
-    const [errors, setErrors] = useState<Record<string, string>>({});
-    return (
-      <VStack gap="16" asChild>
-        <form
-          lang="en"
-          onSubmit={(e) => {
-            e.preventDefault();
-            const formData = new FormData(e.currentTarget);
-            const newErrors: Record<string, string> = {};
-            for (const [key, value] of formData) {
-              if (!value) {
-                newErrors[key] = `${key} is required`;
-              }
-            }
-            setErrors(newErrors);
-          }}
-        >
-          <p>Fields without input will give an error</p>
-          <Input errorMessage={errors.One} label="One" name="One" />
-          <Input errorMessage={errors.Two} label="Two" name="Two" />
-          <Input errorMessage={errors.Three} label="Three" name="Three" />
-          <VStack gap="4">
-            <Button type="submit">Submit</Button>
-            <Button
-              variant="secondary-outline"
-              onClick={() => {
-                setErrors({});
-              }}
-              type="reset"
-            >
-              Reset
-            </Button>
-          </VStack>
-        </form>
-      </VStack>
-    );
-  },
-};

package/src/form/radio-button/index.tsx

@@ -0,0 +1,4 @@
+export { RadioButton } from "./radio-button";
+export type * from "./radio-button";
+export { RadioGroup, useRadioGroupContext } from "./radio-group";
+export type * from "./radio-group";

package/src/form/radio-button/radio-button.stories.tsx

@@ -0,0 +1,25 @@
+/* eslint-disable import/no-extraneous-dependencies -- storybook story */
+import type { Meta, StoryObj } from "@storybook/react";
+import { RadioButton } from "./index";
+
+const meta: Meta<typeof RadioButton> = {
+  title: "Form/RadioButton",
+  component: RadioButton,
+};
+
+export default meta;
+
+type Story = StoryObj<typeof RadioButton>;
+
+export const Preview: Story = {
+  args: {
+    title: "",
+    children: "Just a RadioButton",
+    checked: true,
+    hasError: false,
+    variant: "plain",
+  },
+  argTypes: {
+    variant: { control: "inline-radio", options: ["plain", "bounding-box"] },
+  },
+};

package/src/form/{radiobutton/radiobutton.tsx → radio-button/radio-button.tsx}

@@ -1,19 +1,19 @@
 import { forwardRef, type InputHTMLAttributes, type ReactNode } from "react";
 import { clsx } from "@postenbring/hedwig-css/typed-classname";
 import { useFieldsetContext } from "../fieldset";
-import { type RadioGroupProps, useRadioGroupContext } from "./radiogroup";
+import { type RadioGroupProps, useRadioGroupContext } from "./radio-group";
 
-export interface RadiobuttonProps
+export interface RadioButtonProps
   extends Omit<InputHTMLAttributes<HTMLInputElement>, "defaultValue"> {
   children: ReactNode;
   variant?: "plain" | "bounding-box";
   /**
    * Set to `true` to add error styling. The component will take care of aria to indicate invalid state.
    *
-   * Normally you don't need this, as you should wrap your Radiobuttons in the RadioGroup component.
-   * When providing an errorMessage to RadioGroup, all contained Radiobuttons will get correct hasError state.
+   * Normally you don't need this, as you should wrap your Radio buttons in the RadioGroup component.
+   * When providing an errorMessage to RadioGroup, all contained Radio buttons will get correct hasError state.
    *
-   * You can use this when your Radiobutton is part of a non-HDS fieldset which shows an error message.
+   * You can use this when your Radio button is part of a non-HDS fieldset which shows an error message.
    */
   hasError?: boolean;
   title?: string;
@@ -23,7 +23,7 @@ const isChecked = ({
   checked,
   selectedValue,
   value,
-}: Pick<RadiobuttonProps, "checked" | "value"> & {
+}: Pick<RadioButtonProps, "checked" | "value"> & {
   selectedValue: RadioGroupProps["value"];
 }) => {
   if (typeof checked !== "undefined") return checked;
@@ -31,7 +31,7 @@ const isChecked = ({
   return undefined;
 };
 
-export const Radiobutton = forwardRef<HTMLInputElement, RadiobuttonProps>(
+export const RadioButton = forwardRef<HTMLInputElement, RadioButtonProps>(
   (
     {
       checked,
@@ -56,10 +56,10 @@ export const Radiobutton = forwardRef<HTMLInputElement, RadiobuttonProps>(
     return (
       <div
         className={clsx(
-          "hds-radiobutton",
+          "hds-radio-button",
           {
-            [`hds-radiobutton--${variant}`]: variant === "bounding-box",
-            "hds-radiobutton--error": hasError,
+            [`hds-radio-button--${variant}`]: variant === "bounding-box",
+            "hds-radio-button--error": hasError,
           },
           className as undefined,
         )}
@@ -73,8 +73,8 @@ export const Radiobutton = forwardRef<HTMLInputElement, RadiobuttonProps>(
             ref={ref}
             type="radio"
           />
-          <span aria-hidden className="hds-radiobutton__checkmark" />
-          {title ? <p className="hds-radiobutton__title">{title}</p> : children}
+          <span aria-hidden className="hds-radio-button__checkmark" />
+          {title ? <p className="hds-radio-button__title">{title}</p> : children}
         </label>
         {title ? children : null}
       </div>
@@ -82,4 +82,4 @@ export const Radiobutton = forwardRef<HTMLInputElement, RadiobuttonProps>(
   },
 );
 
-Radiobutton.displayName = "Radiobutton";
+RadioButton.displayName = "RadioButton";

package/src/form/{radiobutton/radiogroup.stories.tsx → radio-button/radio-group.stories.tsx}

@@ -1,10 +1,10 @@
 /* eslint-disable import/no-extraneous-dependencies -- storybook story */
 import type { Meta, StoryObj } from "@storybook/react";
-import { RadioGroup } from "./radiogroup";
-import { Radiobutton } from "./index";
+import { RadioGroup } from "./radio-group";
+import { RadioButton } from "./index";
 
 const meta: Meta<typeof RadioGroup> = {
-  title: "Form/Radiobutton/Radiogroup",
+  title: "Form/Radiogroup",
   component: RadioGroup,
 };
 
@@ -12,10 +12,9 @@ export default meta;
 
 type Story = StoryObj<typeof RadioGroup>;
 
-export const PlainRadioGroup: Story = {
-  name: "Radio group with radiobuttons",
+export const Preview: Story = {
   args: {
-    legend: "Radio group with radiobuttons",
+    legend: "Radio group with radio buttons",
     errorMessage: "",
     name: "group1",
     value: undefined,
@@ -27,13 +26,13 @@ export const PlainRadioGroup: Story = {
     value: {
       description: "Use this prop for a controlled value",
       control: "inline-radio",
-      options: [undefined, "First radiobutton", "Second radiobutton"],
+      options: [undefined, "First RadioButton", "Second RadioButton"],
     },
   },
   render: (props) => (
     <RadioGroup {...props}>
-      <Radiobutton value="First radiobutton">This is a radiobutton</Radiobutton>
-      <Radiobutton value="Second radiobutton">This is another radiobutton</Radiobutton>
+      <RadioButton value="First RadioButton">This is a RadioButton</RadioButton>
+      <RadioButton value="Second RadioButton">This is another RadioButton</RadioButton>
     </RadioGroup>
   ),
 };

package/src/form/{radiobutton/radiogroup.tsx → radio-button/radio-group.tsx}

@@ -6,20 +6,20 @@ import {
   useContext,
 } from "react";
 import { Fieldset, type FieldsetProps } from "../fieldset";
-import type { RadiobuttonProps } from "./radiobutton";
+import type { RadioButtonProps } from "./radio-button";
 
 export interface RadioGroupProps extends Omit<FieldsetProps, "onChange"> {
   children: ReactNode;
-  /** Will be passed to all Radiobuttons within the radio group */
-  name?: RadiobuttonProps["name"];
+  /** Will be passed to all Radio buttons within the radio group */
+  name?: RadioButtonProps["name"];
   /** If you want the group to be controlled, you can pass the selected value here */
-  value?: RadiobuttonProps["value"];
+  value?: RadioButtonProps["value"];
   /**
-   * Error message is passed to the internal Fieldset, and will also give contained Radiobuttons
+   * Error message is passed to the internal Fieldset, and will also give contained Radio buttons
    * error styling and aria to indicate invalid state.
    */
   errorMessage?: ReactNode;
-  /** Will be passed to all Radiobuttons within the radio group */
+  /** Will be passed to all Radio buttons within the radio group */
   onChange?: ChangeEventHandler<HTMLInputElement> | undefined;
 }
 
@@ -28,6 +28,7 @@ type RadioGroupContextProps = {
 } & Pick<RadioGroupProps, "name" | "value" | "onChange">;
 
 const RadioGroupContext = createContext<RadioGroupContextProps>({
+  name: undefined,
   hasError: false,
   onChange: () => {
     return undefined;

package/src/form/select/select.stories.tsx

@@ -11,7 +11,7 @@ export default meta;
 
 type Story = StoryObj<typeof Select>;
 
-export const Default: Story = {
+export const Preview: Story = {
   args: {
     label: "Default select",
     errorMessage: "",
@@ -31,63 +31,3 @@ export const Default: Story = {
     </Select>
   ),
 };
-
-export const White: Story = {
-  args: {
-    label: "White select",
-    variant: "white",
-  },
-  render: (props) => (
-    <div style={{ background: "var(--hds-ui-colors-light-grey-fill)", padding: "1em" }}>
-      <Select {...props} defaultValue="">
-        <option disabled hidden value="">
-          Please select
-        </option>
-        <option value="1">option 1</option>
-        <option value="2">option 2</option>
-        <option value="3">option 3</option>
-      </Select>
-    </div>
-  ),
-};
-
-export const DefaultWithError: Story = {
-  args: {
-    label: "select with error",
-    name: "name",
-    id: "someId",
-    errorMessage: "Something is wrong",
-  },
-  render: (props) => (
-    <Select {...props} defaultValue="">
-      <option disabled hidden value="">
-        Please select
-      </option>
-      <option value="1">option 1</option>
-      <option value="2">option 2</option>
-      <option value="3">option 3</option>
-    </Select>
-  ),
-};
-
-export const WhiteWithError: Story = {
-  args: {
-    label: "White select with error",
-    variant: "white",
-    name: "name",
-    id: "someId",
-    errorMessage: "Something is wrong",
-  },
-  render: (props) => (
-    <div style={{ background: "var(--hds-ui-colors-light-grey-fill)", padding: "1em" }}>
-      <Select {...props} defaultValue="">
-        <option disabled hidden value="">
-          Please select
-        </option>
-        <option value="1">option 1</option>
-        <option value="2">option 2</option>
-        <option value="3">option 3</option>
-      </Select>
-    </div>
-  ),
-};

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

@@ -5,13 +5,16 @@ import { Textarea } from ".";
 const meta: Meta<typeof Textarea> = {
   title: "Form/Textarea",
   component: Textarea,
+  argTypes: {
+    variant: { control: "inline-radio", options: ["default", "white"] },
+  },
 };
 
 export default meta;
 
 type Story = StoryObj<typeof Textarea>;
 
-export const PlainTextarea: Story = {
+export const Preview: Story = {
   args: {
     label: "Some kind of textarea",
     placeholder: "I am a placeholder",
@@ -19,88 +22,4 @@ export const PlainTextarea: Story = {
     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/help-text/help-text.stories.tsx

@@ -0,0 +1,19 @@
+/* eslint-disable import/no-extraneous-dependencies -- storybook story */
+import type { Meta, StoryObj } from "@storybook/react";
+import { HelpText } from ".";
+
+type Story = StoryObj<typeof HelpText>;
+
+const meta: Meta<typeof HelpText> = {
+  title: "Help text",
+  component: HelpText,
+};
+
+export default meta;
+
+export const Preview: Story = {
+  args: {
+    helpText: `VOEC er en forkortelse for "VAT on E-commerce" (mva. på e-handel).`,
+    children: <>VOEC</>,
+  },
+};

package/src/index.ts

@@ -1,5 +1,6 @@
 export * from "./accordion";
 export * from "./badge";
+export * from "./blockquote";
 export * from "./box";
 export * from "./breadcrumbs";
 export * from "./button";

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

@@ -1,30 +1,33 @@
 /* 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 "..";
+import { Container, Grid } 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",
-  },
+export const Preview: Story = {
+  render: (args) => (
+    <div style={{ background: "#f8cb9c" }}>
+      <Container {...args} style={{ background: "#c1cd8a" }}>
+        <Grid
+          style={{
+            background: "var(--hds-colors-lighter)",
+          }}
+          span={{ initial: 8, medium: 6, large: 4 }}
+          center
+        >
+          <Widths />
+        </Grid>
+      </Container>
+    </div>
+  ),
 };
 
 function Widths() {

package/src/layout/grid/grid.stories.tsx

@@ -0,0 +1,27 @@
+/* eslint-disable import/no-extraneous-dependencies -- storybook story */
+import type { Meta, StoryObj } from "@storybook/react";
+import { Box } from "../../box";
+import { Grid } from ".";
+
+type Story = StoryObj<typeof Grid>;
+
+const meta: Meta<typeof Grid> = {
+  title: "Layout/Grid",
+  component: Grid,
+};
+
+export default meta;
+
+export const Preview: Story = {
+  args: {
+    gap: "12-16",
+    span: { initial: 12, small: 4 },
+    children: (
+      <>
+        <Box>1</Box>
+        <Box>2</Box>
+        <Box>3</Box>
+      </>
+    ),
+  },
+};

package/src/layout/stack/stack.stories.tsx

@@ -0,0 +1,27 @@
+/* eslint-disable import/no-extraneous-dependencies -- storybook story */
+import type { Meta, StoryObj } from "@storybook/react";
+import { Box } from "../../box";
+import { Stack } from ".";
+
+type Story = StoryObj<typeof Stack>;
+
+const meta: Meta<typeof Stack> = {
+  title: "Layout/Stack",
+  component: Stack,
+};
+
+export default meta;
+
+export const Preview: Story = {
+  args: {
+    gap: "12-16",
+    direction: { initial: "column", small: "row" },
+    children: (
+      <>
+        <Box>1</Box>
+        <Box>2</Box>
+        <Box>3</Box>
+      </>
+    ),
+  },
+};