@navikt/ds-react 6.0.0-alpha.7 → 6.1.0

package/src/form/search/Search.tsx

@@ -23,7 +23,7 @@ export type SearchClearEvent =
 
 export interface SearchProps
   extends Omit<FormFieldProps, "readOnly">,
-    Omit<InputHTMLAttributes<HTMLInputElement>, "size" | "onChange"> {
+    Omit<InputHTMLAttributes<HTMLInputElement>, "size" | "onChange" | "type"> {
   children?: React.ReactNode;
   /**
    * Search label
@@ -66,10 +66,10 @@ export interface SearchProps
    * Exposes the HTML size attribute
    */
   htmlSize?: number | string;
-    /*
+  /*
    * Exposes role attribute
    */
-  role?: string
+  role?: string;
 }
 
 interface SearchComponent
@@ -210,7 +210,7 @@ export const Search = forwardRef<HTMLInputElement, SearchProps>(
               value={value ?? internalValue}
               onChange={(e) => handleChange(e.target.value)}
               type="search"
-              role={role ?? 'searchbox'}
+              role={role ?? "searchbox"}
               className={cl(
                 className,
                 "navds-search__input",

package/src/form/search/index.ts

@@ -1,5 +1,11 @@
+"use client";
 export {
   default as Search,
   type SearchProps,
   type SearchClearEvent,
 } from "./Search";
+
+export {
+  default as SearchButton,
+  type SearchButtonProps,
+} from "./SearchButton";

package/src/form/search/search.stories.tsx

@@ -1,6 +1,6 @@
-import { Meta } from "@storybook/react";
+import { Meta, StoryObj } from "@storybook/react";
 import React, { useState } from "react";
-import { Search } from "../index";
+import Search from "./Search";
 
 export default {
   title: "ds-react/Search",
@@ -29,8 +29,13 @@ export default {
       },
     },
   },
+  parameters: {
+    chromatic: { disable: true },
+  },
 } as Meta;
 
+type Story = StoryObj<typeof Search>;
+
 export const Default = (props) => {
   const [state, setState] = useState("");
   return (
@@ -185,3 +190,49 @@ export const HtmlSize = () => (
     />
   </div>
 );
+
+export const Chromatic: Story = {
+  render: (...props) => (
+    <div>
+      <div>
+        <h2>Default</h2>
+        <Default {...props} />
+      </div>
+      <div>
+        <h2>Small</h2>
+        <Small />
+      </div>
+      <div>
+        <h2>Variants</h2>
+        <Variants />
+      </div>
+      <div>
+        <h2>ErrorVariants</h2>
+        <ErrorVariants />
+      </div>
+      <div>
+        <h2>Placeholder</h2>
+        <Placeholder />
+      </div>
+      <div>
+        <h2>Text</h2>
+        <Text />
+      </div>
+      <div>
+        <h2>WLabel</h2>
+        <WLabel />
+      </div>
+      <div>
+        <h2>NoClearButton</h2>
+        <NoClearButton />
+      </div>
+      <div>
+        <h2>HtmlSize</h2>
+        <HtmlSize />
+      </div>
+    </div>
+  ),
+  parameters: {
+    chromatic: { disable: false },
+  },
+};

package/src/form/{Select.tsx → select/Select.tsx}

@@ -1,10 +1,10 @@
 import cl from "clsx";
 import React, { SelectHTMLAttributes, forwardRef } from "react";
 import { ChevronDownIcon } from "@navikt/aksel-icons";
-import { BodyShort, ErrorMessage, Label } from "../typography";
-import { omit } from "../util";
-import { ReadOnlyIcon } from "./ReadOnlyIcon";
-import { FormFieldProps, useFormField } from "./useFormField";
+import { BodyShort, ErrorMessage, Label } from "../../typography";
+import { omit } from "../../util";
+import { ReadOnlyIcon } from "../ReadOnlyIcon";
+import { FormFieldProps, useFormField } from "../useFormField";
 
 export interface SelectProps
   extends FormFieldProps,

package/src/form/select/index.ts

@@ -0,0 +1,2 @@
+"use client";
+export { default as Select, type SelectProps } from "./Select";

package/src/form/{stories → select}/select.stories.tsx

@@ -1,6 +1,6 @@
-import { Meta } from "@storybook/react";
+import { Meta, StoryObj } from "@storybook/react";
 import React from "react";
-import { Select } from "../index";
+import Select from "./Select";
 
 export default {
   title: "ds-react/Select",
@@ -25,8 +25,13 @@ export default {
       type: "boolean",
     },
   },
+  parameters: {
+    chromatic: { disable: true },
+  },
 } as Meta;
 
+type Story = StoryObj<typeof Select>;
+
 const content = (
   <>
     <option value="">Velg land</option>
@@ -132,3 +137,41 @@ export const Readonly = () => {
     </div>
   );
 };
+
+export const Chromatic: Story = {
+  render: () => (
+    <div>
+      <div>
+        <h2>Default</h2>
+        {Default.render?.({ label: "Ipsum enim quis culpa" })}
+      </div>
+      <div>
+        <h2>Small</h2>
+        <Small />
+      </div>
+      <div>
+        <h2>Description</h2>
+        <Description />
+      </div>
+      <div>
+        <h2>Error</h2>
+        <Error />
+      </div>
+      <div>
+        <h2>Disabled</h2>
+        <Disabled />
+      </div>
+      <div>
+        <h2>HideLabel</h2>
+        <HideLabel />
+      </div>
+      <div>
+        <h2>Readonly</h2>
+        <Readonly />
+      </div>
+    </div>
+  ),
+  parameters: {
+    chromatic: { disable: false },
+  },
+};

package/src/form/{Switch.tsx → switch/Switch.tsx}

@@ -5,11 +5,11 @@ import React, {
   useEffect,
   useState,
 } from "react";
-import { Loader } from "../loader";
-import { BodyShort } from "../typography";
-import { omit } from "../util";
-import { ReadOnlyIcon } from "./ReadOnlyIcon";
-import { FormFieldProps, useFormField } from "./useFormField";
+import { Loader } from "../../loader";
+import { BodyShort } from "../../typography";
+import { omit } from "../../util";
+import { ReadOnlyIcon } from "../ReadOnlyIcon";
+import { FormFieldProps, useFormField } from "../useFormField";
 
 const SelectedIcon = () => (
   <svg

package/src/form/switch/index.ts

@@ -0,0 +1,2 @@
+"use client";
+export { default as Switch, type SwitchProps } from "./Switch";

package/src/form/{stories → switch}/switch.stories.tsx

@@ -1,6 +1,6 @@
 import { Meta } from "@storybook/react";
 import React from "react";
-import { Switch } from "../index";
+import Switch from "./Switch";
 
 export default {
   title: "ds-react/Switch",

package/src/form/{Textarea.tsx → textarea/Textarea.tsx}

@@ -1,13 +1,13 @@
 import cl from "clsx";
 import React, { forwardRef, useState } from "react";
-import { BodyShort, ErrorMessage, Label } from "../typography";
-import { omit } from "../util";
-import TextareaAutosize from "../util/TextareaAutoSize";
-import { composeEventHandlers } from "../util/composeEventHandlers";
-import { useId } from "../util/hooks";
-import { ReadOnlyIcon } from "./ReadOnlyIcon";
+import { BodyShort, ErrorMessage, Label } from "../../typography";
+import { omit } from "../../util";
+import TextareaAutosize from "../../util/TextareaAutoSize";
+import { composeEventHandlers } from "../../util/composeEventHandlers";
+import { useId } from "../../util/hooks";
+import { ReadOnlyIcon } from "../ReadOnlyIcon";
+import { FormFieldProps, useFormField } from "./../useFormField";
 import Counter from "./TextareaCounter";
-import { FormFieldProps, useFormField } from "./useFormField";
 
 /**
  * TODO: Mulighet for lokalisering av sr-only/counter text

package/src/form/{TextareaCounter.tsx → textarea/TextareaCounter.tsx}

@@ -1,7 +1,7 @@
 import cl from "clsx";
 import React, { useEffect, useState } from "react";
-import { BodyShort } from "../typography";
-import debounce from "../util/debounce";
+import { BodyShort } from "../../typography";
+import debounce from "../../util/debounce";
 import type { TextareaProps } from "./Textarea";
 
 interface Props {

package/src/form/textarea/index.ts

@@ -0,0 +1,2 @@
+"use client";
+export { default as Textarea, type TextareaProps } from "./Textarea";

package/src/form/{stories → textarea}/textarea.stories.tsx

@@ -3,7 +3,7 @@ import { expect, userEvent, within } from "@storybook/test";
 import React, { useState } from "react";
 import { Button } from "../../button";
 import { Modal } from "../../modal";
-import { Textarea } from "../index";
+import { Textarea } from "./index";
 
 const meta: Meta<typeof Textarea> = {
   title: "ds-react/Textarea",
@@ -11,6 +11,8 @@ const meta: Meta<typeof Textarea> = {
 };
 export default meta;
 
+type Story = StoryObj<typeof Textarea>;
+
 export const Default: StoryObj<typeof Textarea> = {
   render: (props) => {
     return <Textarea {...props} />;
@@ -38,6 +40,9 @@ export const Default: StoryObj<typeof Textarea> = {
     maxRows: { type: "number" },
     minRows: { type: "number" },
   },
+  parameters: {
+    chromatic: { disable: true },
+  },
 };
 
 export const Small: StoryFn = () => {
@@ -212,7 +217,7 @@ export const ModalStrictMode: StoryFn<typeof Textarea> = () => {
   // and set the height to 2px when used in StrictMode in a Modal that is initially open.
   return (
     <React.StrictMode>
-      <Modal open>
+      <Modal open onClose={() => null} aria-label="Modal med textarea">
         <Modal.Body>
           <Textarea label="Har du noen tilbakemeldinger?" />
         </Modal.Body>
@@ -223,3 +228,27 @@ export const ModalStrictMode: StoryFn<typeof Textarea> = () => {
 ModalStrictMode.parameters = {
   chromatic: { disable: true }, // Not reproducable in Chromatic
 };
+
+export const Chromatic: Story = {
+  render: (props) => (
+    <div>
+      <Textarea {...props} label="Textarea" />
+      <Small />
+      <Description />
+      <Error />
+      <Disabled />
+      <HideLabel />
+      <MaxLength />
+      <MinRows />
+      <MaxRows />
+      <Resize />
+      <OnChange />
+      <Controlled />
+      <Readonly />
+      <AutoScrollbar label="autoscrollbar" />
+    </div>
+  ),
+  parameters: {
+    chromatic: { disable: false },
+  },
+};

package/src/form/{TextField.tsx → textfield/TextField.tsx}

@@ -1,9 +1,9 @@
 import cl from "clsx";
 import React, { InputHTMLAttributes, forwardRef } from "react";
-import { BodyShort, ErrorMessage, Label } from "../typography";
-import { omit } from "../util";
-import { ReadOnlyIcon } from "./ReadOnlyIcon";
-import { FormFieldProps, useFormField } from "./useFormField";
+import { BodyShort, ErrorMessage, Label } from "../../typography";
+import { omit } from "../../util";
+import { ReadOnlyIcon } from "../ReadOnlyIcon";
+import { FormFieldProps, useFormField } from "../useFormField";
 
 export interface TextFieldProps
   extends FormFieldProps,

package/src/form/textfield/index.ts

@@ -0,0 +1,2 @@
+"use client";
+export { default as TextField, type TextFieldProps } from "./TextField";

package/src/form/{stories → textfield}/text-field.stories.tsx

@@ -1,6 +1,6 @@
-import { Meta } from "@storybook/react";
+import { Meta, StoryObj } from "@storybook/react";
 import React from "react";
-import { TextField } from "../index";
+import TextField from "./TextField";
 
 export default {
   title: "ds-react/TextField",
@@ -25,8 +25,13 @@ export default {
       type: "boolean",
     },
   },
+  parameters: {
+    chromatic: { disable: true },
+  },
 } as Meta;
 
+type Story = StoryObj<typeof TextField>;
+
 export const Default = {
   render: (props) => {
     return <TextField {...props} label="Ipsum enim quis culpa" />;
@@ -98,3 +103,41 @@ export const Readonly = () => {
     </div>
   );
 };
+
+export const Chromatic: Story = {
+  render: () => (
+    <div>
+      <div>
+        <h2>Default</h2>
+        {Default?.render({})}
+      </div>
+      <div>
+        <h2>Small</h2>
+        <Small />
+      </div>
+      <div>
+        <h2>Description</h2>
+        <Description />
+      </div>
+      <div>
+        <h2>Error</h2>
+        <Error />
+      </div>
+      <div>
+        <h2>Disabled</h2>
+        <Disabled />
+      </div>
+      <div>
+        <h2>HideLabel</h2>
+        <HideLabel />
+      </div>
+      <div>
+        <h2>Readonly</h2>
+        <Readonly />
+      </div>
+    </div>
+  ),
+  parameters: {
+    chromatic: { disable: false },
+  },
+};

package/src/form/useFormField.ts

@@ -1,7 +1,7 @@
 import cl from "clsx";
 import React, { useContext } from "react";
 import { useId } from "../util/hooks";
-import { FieldsetContext } from "./Fieldset/context";
+import { FieldsetContext } from "./fieldset/context";
 
 export interface FormFieldProps {
   /**

package/src/guide-panel/guidepanel.stories.tsx

@@ -1,7 +1,9 @@
 import { Meta } from "@storybook/react";
 import React from "react";
 import { InformationIcon } from "@navikt/aksel-icons";
-import { BodyLong, GuidePanel, VStack } from "../index";
+import { VStack } from "../layout/stack";
+import { BodyLong } from "../typography";
+import GuidePanel from "./GuidePanel";
 
 export default {
   title: "ds-react/GuidePanel",

package/src/guide-panel/index.ts

@@ -1,2 +1,3 @@
+"use client";
 export { default as GuidePanel, type GuidePanelProps } from "./GuidePanel";
-export { DefaultIllustration as GuideDefaultIllustration } from "./Illustration";
+export { DefaultIllustration as GuidePanelDefaultIllustration } from "./Illustration";

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

@@ -1,6 +1,7 @@
 import { Meta, StoryFn, StoryObj } from "@storybook/react";
 import React, { useEffect, useRef } from "react";
-import { BodyLong, Heading, HelpText } from "..";
+import { BodyLong, Heading } from "../typography";
+import HelpText from "./HelpText";
 
 const meta: Meta<typeof HelpText> = {
   title: "ds-react/HelpText",

package/src/help-text/index.ts

@@ -1,2 +1,2 @@
-export { default as HelpText } from "./HelpText";
-export { type HelpTextProps } from "./HelpText";
+"use client";
+export { default as HelpText, type HelpTextProps } from "./HelpText";

package/src/index.ts

@@ -1,40 +1,144 @@
-export * from "./accordion";
-export * from "./alert";
-export * from "./button";
-export * from "./chat";
-export * from "./chips";
-export * from "./copybutton";
-export * from "./date";
-export * from "./dropdown";
-export * from "./expansion-card";
-export * from "./form";
-export * from "./guide-panel";
-export * from "./overlays";
-export * from "./help-text";
-export * from "./internal-header";
-export * from "./link";
-export * from "./link-panel";
-export * from "./list";
-export * from "./loader";
-export * from "./modal";
-export * from "./pagination";
-export * from "./panel";
-export * from "./popover";
-export * from "./provider";
-export * from "./read-more";
-export * from "./skeleton";
-export * from "./stepper";
-export * from "./table";
-export * from "./tabs";
-export * from "./tag";
-export * from "./timeline";
-export * from "./toggle-group";
-export * from "./tooltip";
-export * from "./typography";
-export * from "./util";
-export * from "./layout/bleed";
-export * from "./layout/box";
-export * from "./layout/stack";
-export * from "./layout/grid";
-export * from "./layout/responsive";
-export * from "./layout/page";
+"use client";
+export { Accordion, type AccordionProps } from "./accordion";
+export { Alert, type AlertProps } from "./alert";
+export { Button, type ButtonProps } from "./button";
+export { Chat, type ChatProps } from "./chat";
+export { Chips, type ChipsProps } from "./chips";
+export { CopyButton, type CopyButtonProps } from "./copybutton";
+export {
+  DatePicker,
+  useDatepicker,
+  useRangeDatepicker,
+  type DateInputProps,
+  type DatePickerProps,
+  type DatePickerStandaloneProps,
+  type DateValidationT,
+  type RangeValidationT,
+} from "./date/datepicker";
+export {
+  MonthPicker,
+  useMonthpicker,
+  type MonthPickerProps,
+  type MonthPickerStandaloneProps,
+  type MonthValidationT,
+} from "./date/monthpicker";
+export { Dropdown, type DropdownProps } from "./dropdown";
+export { ExpansionCard, type ExpansionCardProps } from "./expansion-card";
+export {
+  GuidePanel,
+  type GuidePanelProps,
+  GuidePanelDefaultIllustration,
+} from "./guide-panel";
+export { HelpText, type HelpTextProps } from "./help-text";
+export {
+  InternalHeader,
+  type InternalHeaderButtonProps,
+  type InternalHeaderProps,
+  type InternalHeaderTitleProps,
+  type InternalHeaderUserButtonProps,
+  type InternalHeaderUserProps,
+} from "./internal-header";
+export { Bleed, type BleedProps } from "./layout/bleed";
+export { Box, type BoxProps } from "./layout/box";
+export { HGrid, type HGridProps } from "./layout/grid";
+export { Page, type PageBlockProps, type PageProps } from "./layout/page";
+export { Hide, Show, type ResponsiveProps } from "./layout/responsive";
+export {
+  HStack,
+  Spacer,
+  Stack,
+  VStack,
+  type HStackProps,
+  type StackProps,
+  type VStackProps,
+} from "./layout/stack";
+export { Link, type LinkProps } from "./link";
+export { List, type ListProps } from "./list";
+export { Loader, type LoaderProps } from "./loader";
+export { Modal, type ModalProps } from "./modal";
+export { Pagination, type PaginationProps } from "./pagination";
+export { Popover, type PopoverProps } from "./popover";
+export { Portal, type PortalProps } from "./portal";
+export { Provider, type ProviderProps } from "./provider";
+export { ReadMore, type ReadMoreProps } from "./read-more";
+export { Skeleton, type SkeletonProps } from "./skeleton";
+export { Stepper, type StepperProps } from "./stepper";
+export {
+  Table,
+  type BodyProps,
+  type ColumnHeaderProps,
+  type DataCellProps,
+  type ExpandableRowProps,
+  type HeaderCellProps,
+  type HeaderProps,
+  type RowProps,
+  type SortState,
+  type TableProps,
+} from "./table";
+export { Tabs, type TabsProps } from "./tabs";
+export { Tag, type TagProps } from "./tag";
+export {
+  Timeline,
+  type TimelinePeriodProps,
+  type TimelinePinProps,
+  type TimelineProps,
+  type TimelineRowProps,
+  type TimelineZoomButtonProps,
+} from "./timeline";
+export { ToggleGroup, type ToggleGroupProps } from "./toggle-group";
+export { Tooltip, type TooltipProps } from "./tooltip";
+export {
+  BodyLong,
+  BodyShort,
+  Detail,
+  ErrorMessage,
+  Heading,
+  Ingress,
+  Label,
+  type BodyLongProps,
+  type BodyShortProps,
+  type DetailProps,
+  type ErrorMessageProps,
+  type HeadingProps,
+  type IngressProps,
+  type LabelProps,
+} from "./typography";
+export {
+  OverridableComponent,
+  debounce,
+  omit,
+  useClientLayoutEffect,
+  useEventListener,
+  useId,
+} from "./util";
+
+export {
+  Checkbox,
+  CheckboxGroup,
+  type CheckboxGroupProps,
+  type CheckboxProps,
+} from "./form/checkbox";
+export { UNSAFE_Combobox, type ComboboxProps } from "./form/combobox";
+export {
+  ConfirmationPanel,
+  type ConfirmationPanelProps,
+} from "./form/confirmation-panel";
+export { ErrorSummary, type ErrorSummaryProps } from "./form/error-summary";
+export { Fieldset, type FieldsetProps } from "./form/fieldset";
+export {
+  Radio,
+  RadioGroup,
+  type RadioGroupProps,
+  type RadioProps,
+} from "./form/radio";
+export { Search, type SearchClearEvent, type SearchProps } from "./form/search";
+export { Select, type SelectProps } from "./form/select";
+export { Switch, type SwitchProps } from "./form/switch";
+export { Textarea, type TextareaProps } from "./form/textarea";
+export { TextField, type TextFieldProps } from "./form/textfield";
+
+/**
+ * @deprecated
+ */
+export { LinkPanel, type LinkPanelProps } from "./link-panel";
+export { Panel, type PanelProps } from "./panel";

package/src/internal-header/header.stories.tsx

@@ -6,7 +6,8 @@ import {
   MenuGridIcon,
 } from "@navikt/aksel-icons";
 import { BodyLong, BodyShort, Detail } from "@navikt/ds-react";
-import { Dropdown, InternalHeader } from "..";
+import { Dropdown } from "../dropdown";
+import InternalHeader from "./InternalHeader";
 
 export default {
   title: "ds-react/InternalHeader",