@navikt/ds-react 6.0.0 → 6.1.0

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 = () => {
@@ -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/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,41 +1,144 @@
 "use client";
-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";
+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/index.ts

@@ -1,8 +1,21 @@
+"use client";
 export {
   default as InternalHeader,
   type InternalHeaderProps,
 } from "./InternalHeader";
-export { type InternalHeaderButtonProps } from "./InternalHeaderButton";
-export { type InternalHeaderTitleProps } from "./InternalHeaderTitle";
-export { type InternalHeaderUserProps } from "./InternalHeaderUser";
-export { type InternalHeaderUserButtonProps } from "./InternalHeaderUserButton";
+export {
+  default as InternalHeaderButton,
+  type InternalHeaderButtonProps,
+} from "./InternalHeaderButton";
+export {
+  default as InternalHeaderTitle,
+  type InternalHeaderTitleProps,
+} from "./InternalHeaderTitle";
+export {
+  default as InternalHeaderUser,
+  type InternalHeaderUserProps,
+} from "./InternalHeaderUser";
+export {
+  default as InternalHeaderUserButton,
+  type InternalHeaderUserButtonProps,
+} from "./InternalHeaderUserButton";

package/src/layout/bleed/Bleed.tsx

@@ -125,3 +125,5 @@ export const Bleed = forwardRef<HTMLDivElement, BleedProps>(
     );
   },
 );
+
+export default Bleed;

package/src/layout/bleed/index.ts

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

package/src/layout/box/Box.tsx

@@ -145,3 +145,5 @@ export const Box: OverridableComponent<BoxProps, HTMLDivElement> = forwardRef(
     );
   },
 );
+
+export default Box;

package/src/layout/box/index.ts

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

package/src/layout/grid/index.ts

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

package/src/layout/page/index.ts

@@ -1,2 +1,3 @@
+"use client";
 export { default as Page, type PageProps } from "./Page";
-export { type PageBlockProps } from "./parts/PageBlock";
+export { default as PageBlock, type PageBlockProps } from "./parts/PageBlock";

package/src/layout/page/parts/PageBlock.tsx

@@ -72,3 +72,5 @@ export const PageBlock: OverridableComponent<PageBlockProps, HTMLDivElement> =
       );
     },
   );
+
+export default PageBlock;

package/src/layout/responsive/index.ts

@@ -1 +1,2 @@
+"use client";
 export { Show, Hide, type ResponsiveProps } from "./Responsive";

package/src/layout/sidemal-test/Filter.tsx

@@ -1,6 +1,6 @@
 import React, { useState } from "react";
 import { InformationSquareIcon } from "@navikt/aksel-icons";
-import { Checkbox, CheckboxGroup } from "../../form";
+import { Checkbox, CheckboxGroup } from "../../form/checkbox";
 import { BodyLong, Detail, Heading } from "../../typography";
 import { Box } from "../box";
 import { HStack, VStack } from "../stack";

package/src/layout/stack/HStack.tsx

@@ -28,3 +28,5 @@ export const HStack: OverridableComponent<HStackProps, HTMLDivElement> =
   forwardRef((props, ref) => {
     return <Stack {...props} ref={ref} direction="row" />;
   });
+
+export default HStack;

package/src/layout/stack/Spacer.tsx

@@ -13,3 +13,5 @@ import React from "react";
  * </HStack>
  */
 export const Spacer = () => <div className="navds-stack__spacer" />;
+
+export default Spacer;

package/src/layout/stack/Stack.tsx

@@ -76,3 +76,5 @@ export const Stack: OverridableComponent<StackProps, HTMLDivElement> =
       );
     },
   );
+
+export default Stack;

package/src/layout/stack/VStack.tsx

@@ -28,3 +28,5 @@ export const VStack: OverridableComponent<VStackProps, HTMLDivElement> =
   forwardRef((props, ref) => {
     return <Stack {...props} ref={ref} direction="column" wrap={false} />;
   });
+
+export default VStack;

package/src/layout/stack/index.ts

@@ -1,4 +1,5 @@
-export { HStack, type HStackProps } from "./HStack";
-export { VStack, type VStackProps } from "./VStack";
-export { Stack, type StackProps } from "./Stack";
-export { Spacer } from "./Spacer";
+"use client";
+export { default as HStack, type HStackProps } from "./HStack";
+export { default as VStack, type VStackProps } from "./VStack";
+export { default as Stack, type StackProps } from "./Stack";
+export { default as Spacer } from "./Spacer";

package/src/link/index.ts

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

package/src/link/stories/link.stories.tsx

@@ -1,7 +1,7 @@
 import React from "react";
 import { PlusCircleFillIcon } from "@navikt/aksel-icons";
 import { Alert } from "../../alert";
-import { ConfirmationPanel } from "../../form";
+import { ConfirmationPanel } from "../../form/confirmation-panel";
 import { BodyLong } from "../../typography";
 import Link from "../Link";
 import { RandomIcon } from "./RandomIcon";

package/src/link-panel/LinkPanelDescription.tsx

@@ -18,3 +18,5 @@ export const LinkPanelDescription = forwardRef<
     className={cl("navds-link-panel__description", className)}
   />
 ));
+
+export default LinkPanelDescription;

package/src/link-panel/LinkPanelTitle.tsx

@@ -22,3 +22,5 @@ export const LinkPanelTitle: OverridableComponent<
     )}
   />
 ));
+
+export default LinkPanelTitle;