@navikt/ds-react 3.4.2 → 4.1.0

package/src/skeleton/Skeleton.tsx

@@ -0,0 +1,48 @@
+import React, { forwardRef } from "react";
+import cl from "clsx";
+
+export interface SkeletonProps extends React.HTMLAttributes<HTMLDivElement> {
+  children?: React.ReactNode;
+  /**
+   * @default text
+   */
+  variant?: "circle" | "rectangle" | "rounded" | "text";
+  /**
+   * When not inferring height from children, you must specify height
+   */
+  height?: number | string;
+  /**
+   * When not infering width from children, you must specify width
+   */
+  width?: number | string;
+}
+
+export const Skeleton = forwardRef<HTMLDivElement, SkeletonProps>(
+  (
+    { className, children, height, width, style, variant = "text", ...rest },
+    ref
+  ) => {
+    return (
+      <div
+        {...rest}
+        ref={ref}
+        className={cl(
+          "navds-skeleton",
+          className,
+          `navds-skeleton--${variant}`,
+          {
+            "navds-skeleton--has-children": Boolean(children),
+            "navds-skeleton--no-height": !height,
+            "navds-skeleton--no-width": !width,
+          }
+        )}
+        style={{ ...style, width, height }}
+        aria-hidden
+      >
+        {children}
+      </div>
+    );
+  }
+);
+
+export default Skeleton;

package/src/skeleton/index.ts

@@ -0,0 +1,2 @@
+export { default as Skeleton } from "./Skeleton";
+export type { SkeletonProps } from "./Skeleton";

package/src/skeleton/skeleton.stories.tsx

@@ -0,0 +1,118 @@
+import React from "react";
+import { Skeleton } from ".";
+import { Alert } from "../alert";
+import { Button } from "../button";
+import { Checkbox } from "../form";
+import { BodyLong, Heading } from "../typography";
+
+export default {
+  title: "ds-react/Skeleton",
+  component: Skeleton,
+  decorators: [
+    (Story) => (
+      <div style={{ display: "grid", gap: "0.5rem" }}>
+        <Story />
+      </div>
+    ),
+  ],
+};
+
+export const Default = {
+  render: () => (
+    <div>
+      <Skeleton>
+        Lorem ipsum dolor sit amet, consectetur adipisicing elit. Consequuntur
+        voluptas sint dolore omnis quia consequatur beatae vero cum officia
+        debitis. Quidem debitis omnis reprehenderit nobis rerum. Nulla, magnam?
+        Saepe, eveniet? Test
+      </Skeleton>
+      <Skeleton>
+        <Alert variant="info">
+          Lorem ipsum dolor sit amet, consectetur adipisicing elit. Consequuntur
+          voluptas sint dolore omnis quia consequatur beatae vero cum officia
+          debitis. Quidem debitis omnis reprehenderit nobis rerum. Nulla,
+          magnam? Saepe, eveniet?
+        </Alert>
+      </Skeleton>
+      <Skeleton>
+        <BodyLong>
+          Quidem debitis omnis reprehenderit nobis rerum. Nulla, magnam? Saepe,
+          eveniet?
+        </BodyLong>
+        <Checkbox value="test">Valg 1</Checkbox>
+        <Checkbox value="tes2">Valg 2</Checkbox>
+        <div style={{ display: "flex", gap: "2rem" }}>
+          <Button>Send inn</Button>
+          <Button>Tilbake</Button>
+        </div>
+      </Skeleton>
+    </div>
+  ),
+};
+
+export const Shapes = {
+  render: () => (
+    <>
+      <Skeleton variant="text"></Skeleton>
+      <Skeleton variant="circle" width={60} height={60}></Skeleton>
+      <Skeleton variant="rectangle" width={200} height={40}></Skeleton>
+      <Skeleton variant="rounded" width={200} height={40}></Skeleton>
+    </>
+  ),
+};
+
+export const WrappingComponents = {
+  render: () => (
+    <Skeleton style={{ display: "grid", gap: "0.5rem" }}>
+      <BodyLong>
+        Quidem debitis omnis reprehenderit nobis rerum. Nulla, magnam? Saepe,
+        eveniet?
+      </BodyLong>
+      <Checkbox value="test">Valg 1</Checkbox>
+      <Checkbox value="tes2">Valg 2</Checkbox>
+      <div style={{ display: "flex", gap: "2rem" }}>
+        <Button>Send inn</Button>
+        <Button>Tilbake</Button>
+      </div>
+    </Skeleton>
+  ),
+};
+
+export const TextSizing = {
+  render: () => (
+    <div style={{ display: "grid", width: 300 }}>
+      <Skeleton>
+        <Heading level="1" size="xlarge">
+          Placeholder
+        </Heading>
+      </Skeleton>
+      <Skeleton>
+        <BodyLong>Placeholder</BodyLong>
+      </Skeleton>
+      <BodyLong as={Skeleton}>Placeholder</BodyLong>
+    </div>
+  ),
+};
+
+export const NativeText = {
+  render: () => (
+    <div>
+      <h1>
+        <Skeleton>
+          Lorem ipsum dolor sit amet, consectetur adipisicing elit. Consequuntur
+          voluptas sint dolore omnis quia consequatur beatae vero cum officia
+          debitis. Quidem debitis omnis reprehenderit nobis rerum. Nulla,
+          magnam? Saepe, eveniet? Test
+        </Skeleton>
+      </h1>
+      <Skeleton>
+        <p>
+          Lorem ipsum dolor sit amet, consectetur adipisicing elit. Consequuntur
+          voluptas sint dolore omnis quia consequatur beatae vero cum officia
+          debitis. Quidem debitis omnis reprehenderit nobis rerum. Nulla,
+          magnam? Saepe, eveniet? Test
+        </p>
+      </Skeleton>
+    </div>
+  ),
+};

package/src/stepper/Step.tsx

@@ -45,69 +45,66 @@ const CompletedIcon = () => (
   </svg>
 );
 
-export interface StepperStepType
-  extends OverridableComponent<StepperStepProps, HTMLAnchorElement> {}
+export const Step: OverridableComponent<StepperStepProps, HTMLAnchorElement> =
+  forwardRef(
+    (
+      {
+        className,
+        children,
+        as: Component = "a",
+        unsafe_index = 0,
+        completed = false,
+        interactive,
+        ...rest
+      },
+      ref
+    ) => {
+      const context = useContext(StepperContext);
+      if (context === null) {
+        console.error("<Stepper.Step> has to be used within <Stepper>");
+        return null;
+      }
+      const { activeStep } = context;
 
-export const StepComponent: OverridableComponent<
-  StepperStepProps,
-  HTMLAnchorElement
-> = forwardRef(
-  (
-    {
-      className,
-      children,
-      as: Component = "a",
-      unsafe_index = 0,
-      completed = false,
-      interactive,
-      ...rest
-    },
-    ref
-  ) => {
-    const context = useContext(StepperContext);
-    if (context === null) {
-      console.error("<Stepper.Step> has to be used within <Stepper>");
-      return null;
-    }
-    const { activeStep } = context;
-
-    const isInteractive = interactive ?? context?.interactive;
+      const isInteractive = interactive ?? context?.interactive;
 
-    const Comp = isInteractive ? Component : "div";
+      const Comp = isInteractive ? Component : "div";
 
-    return (
-      <Comp
-        {...rest}
-        aria-current={activeStep === unsafe_index}
-        ref={ref}
-        className={cl("navds-stepper__step", className, {
-          "navds-stepper__step--active": activeStep === unsafe_index,
-          "navds-stepper__step--behind": activeStep > unsafe_index,
-          "navds-stepper__step--non-interactive": !isInteractive,
-          "navds-stepper__step--completed": completed,
-        })}
-        onClick={(e) => {
-          isInteractive && context.onStepChange(unsafe_index + 1);
-          rest?.onClick?.(e);
-        }}
-      >
-        {completed ? (
-          <span className="navds-stepper__circle navds-stepper__circle--success">
-            <CompletedIcon />
-          </span>
-        ) : (
-          <Label className="navds-stepper__circle" as="span" aria-hidden="true">
-            {unsafe_index + 1}
+      return (
+        <Comp
+          {...rest}
+          aria-current={activeStep === unsafe_index}
+          ref={ref}
+          className={cl("navds-stepper__step", className, {
+            "navds-stepper__step--active": activeStep === unsafe_index,
+            "navds-stepper__step--behind": activeStep > unsafe_index,
+            "navds-stepper__step--non-interactive": !isInteractive,
+            "navds-stepper__step--completed": completed,
+          })}
+          onClick={(e) => {
+            isInteractive && context.onStepChange(unsafe_index + 1);
+            rest?.onClick?.(e);
+          }}
+        >
+          {completed ? (
+            <span className="navds-stepper__circle navds-stepper__circle--success">
+              <CompletedIcon />
+            </span>
+          ) : (
+            <Label
+              className="navds-stepper__circle"
+              as="span"
+              aria-hidden="true"
+            >
+              {unsafe_index + 1}
+            </Label>
+          )}
+          <Label as="span" className="navds-stepper__content">
+            {children}
           </Label>
-        )}
-        <Label as="span" className="navds-stepper__content">
-          {children}
-        </Label>
-      </Comp>
-    );
-  }
-);
-
-const Step = StepComponent as StepperStepType;
+        </Comp>
+      );
+    }
+  );
 
 export default Step;

package/src/stepper/Stepper.tsx

@@ -1,6 +1,7 @@
 import React, { createContext, forwardRef } from "react";
 import cl from "clsx";
-import Step, { StepperStepProps, StepperStepType } from "./Step";
+import Step, { StepperStepProps } from "./Step";
+import { OverridableComponent } from "../util/OverridableComponent";
 
 export interface StepperProps extends React.HTMLAttributes<HTMLOListElement> {
   /**
@@ -33,7 +34,11 @@ interface StepperComponent
   extends React.ForwardRefExoticComponent<
     StepperProps & React.RefAttributes<HTMLOListElement>
   > {
-  Step: StepperStepType;
+  /**
+   * @see 🏷️ {@link StepperStepProps}
+   * @see [🤖 OverridableComponent](https://aksel.nav.no/grunnleggende/kode/overridablecomponent) support
+   */
+  Step: OverridableComponent<StepperStepProps, HTMLAnchorElement>;
 }
 
 interface StepperContextProps {
@@ -46,6 +51,30 @@ interface StepperContextProps {
 
 export const StepperContext = createContext<StepperContextProps | null>(null);
 
+/**
+ * A component that displays a stepper with clickable steps.
+ *
+ * @see [📝 Documentation](https://aksel.nav.no/komponenter/core/stepper)
+ * @see 🏷️ {@link StepperProps}
+ *
+ * @example
+ * ```jsx
+ * <>
+ *   <Heading size="medium" spacing level="2" id="stepper-heading">
+ *     Søknadssteg
+ *   </Heading>
+ *   <Stepper
+ *     aria-labelledby="stepper-heading"
+ *     activeStep={activeStep}
+ *     onStepChange={(x) => setActiveStep(x)}
+ *   >
+ *     <Stepper.Step href="#">Start søknad</Stepper.Step>
+ *     <Stepper.Step href="#">Saksopplysninger</Stepper.Step>
+ *     <Stepper.Step href="#">Vedlegg</Stepper.Step>
+ *   </Stepper>
+ * </>
+ * ```
+ */
 export const Stepper: StepperComponent = forwardRef<
   HTMLOListElement,
   StepperProps

package/src/table/Table.tsx

@@ -56,6 +56,38 @@ export interface TableContextProps {
 
 export const TableContext = createContext<TableContextProps | null>(null);
 
+/**
+ * A component that displays a table with headers and rows.
+ *
+ * @see [📝 Documentation](https://aksel.nav.no/komponenter/core/table)
+ * @see 🏷️ {@link TableProps}
+ *
+ * @example
+ * ```jsx
+ * <Table>
+ *   <Table.Header>
+ *     <Table.Row>
+ *       <Table.HeaderCell scope="col">Navn</Table.HeaderCell>
+ *       <Table.HeaderCell scope="col">Fødseslnr.</Table.HeaderCell>
+ *       <Table.HeaderCell scope="col">Start</Table.HeaderCell>
+ *     </Table.Row>
+ *   </Table.Header>
+ *   <Table.Body>
+ *     {data.map(({ name, fnr, start }, i) => {
+ *       return (
+ *         <Table.Row key={i + fnr}>
+ *           <Table.HeaderCell scope="row">{name}</Table.HeaderCell>
+ *           <Table.DataCell>{fnr}</Table.DataCell>
+ *           <Table.DataCell>
+ *             {format(new Date(start), "dd.MM.yyyy")}
+ *           </Table.DataCell>
+ *         </Table.Row>
+ *       );
+ *     })}
+ *   </Table.Body>
+ * </Table>
+ * ```
+ */
 export const Table = forwardRef(
   (
     {

package/src/tabs/Tab.tsx

@@ -20,47 +20,46 @@ export interface TabProps
   value: string;
 }
 
-export type TabType = OverridableComponent<TabProps, HTMLButtonElement>;
+export const Tab: OverridableComponent<TabProps, HTMLButtonElement> =
+  forwardRef(
+    (
+      { className, as: Component = "button", label, icon, value, ...rest },
+      ref
+    ) => {
+      const context = useContext(TabsContext);
 
-export const Tab: TabType = forwardRef(
-  (
-    { className, as: Component = "button", label, icon, value, ...rest },
-    ref
-  ) => {
-    const context = useContext(TabsContext);
+      if (!label && !icon) {
+        console.error("<Tabs.Tab/> needs label/icon");
+        return null;
+      }
 
-    if (!label && !icon) {
-      console.error("<Tabs.Tab/> needs label/icon");
-      return null;
-    }
-
-    return (
-      <RadixTabs.Trigger value={value} asChild>
-        <Component
-          ref={ref}
-          className={cl(
-            "navds-tabs__tab",
-            `navds-tabs__tab--${context?.size ?? "medium"}`,
-            `navds-tabs__tab-icon--${context?.iconPosition}`,
-            className,
-            {
-              "navds-tabs__tab--icon-only": icon && !label,
-            }
-          )}
-          {...rest}
-        >
-          <BodyShort
-            as="span"
-            className="navds-tabs__tab-inner"
-            size={context?.size}
+      return (
+        <RadixTabs.Trigger value={value} asChild>
+          <Component
+            ref={ref}
+            className={cl(
+              "navds-tabs__tab",
+              `navds-tabs__tab--${context?.size ?? "medium"}`,
+              `navds-tabs__tab-icon--${context?.iconPosition}`,
+              className,
+              {
+                "navds-tabs__tab--icon-only": icon && !label,
+              }
+            )}
+            {...rest}
           >
-            {icon}
-            {label}
-          </BodyShort>
-        </Component>
-      </RadixTabs.Trigger>
-    );
-  }
-);
+            <BodyShort
+              as="span"
+              className="navds-tabs__tab-inner"
+              size={context?.size}
+            >
+              {icon}
+              {label}
+            </BodyShort>
+          </Component>
+        </RadixTabs.Trigger>
+      );
+    }
+  );
 
 export default Tab;

package/src/tabs/TabList.tsx

@@ -19,10 +19,6 @@ export interface TabListProps extends React.HTMLAttributes<HTMLDivElement> {
   children: React.ReactNode;
 }
 
-export type TabListType = React.ForwardRefExoticComponent<
-  TabListProps & React.RefAttributes<HTMLDivElement>
->;
-
 export const TabList = forwardRef<HTMLDivElement, TabListProps>(
   ({ className, ...rest }, ref) => {
     const context = useContext(TabsContext);
@@ -127,6 +123,6 @@ export const TabList = forwardRef<HTMLDivElement, TabListProps>(
       </div>
     );
   }
-) as TabListType;
+);
 
 export default TabList;

package/src/tabs/TabPanel.tsx

@@ -13,10 +13,6 @@ export interface TabPanelProps extends React.HTMLAttributes<HTMLDivElement> {
   value: string;
 }
 
-export type TabPanelType = React.ForwardRefExoticComponent<
-  TabPanelProps & React.RefAttributes<HTMLDivElement>
->;
-
 const TabPanel = forwardRef<HTMLDivElement, TabPanelProps>(
   ({ className, ...rest }, ref) => (
     <TabsContent
@@ -25,6 +21,6 @@ const TabPanel = forwardRef<HTMLDivElement, TabPanelProps>(
       className={cl("navds-tabs__tabpanel", className)}
     />
   )
-) as TabPanelType;
+);
 
 export default TabPanel;

package/src/tabs/Tabs.tsx

@@ -1,9 +1,10 @@
+import * as RadixTabs from "@radix-ui/react-tabs";
 import cl from "clsx";
 import React, { createContext, forwardRef, HTMLAttributes } from "react";
-import * as RadixTabs from "@radix-ui/react-tabs";
-import Tab, { TabType } from "./Tab";
-import TabList, { TabListType } from "./TabList";
-import TabPanel, { TabPanelType } from "./TabPanel";
+import { OverridableComponent } from "../util/OverridableComponent";
+import Tab, { TabProps } from "./Tab";
+import TabList, { TabListProps } from "./TabList";
+import TabPanel, { TabPanelProps } from "./TabPanel";
 
 export interface TabsProps
   extends Omit<HTMLAttributes<HTMLDivElement>, "onChange" | "dir"> {
@@ -46,9 +47,23 @@ interface TabsComponent
   extends React.ForwardRefExoticComponent<
     TabsProps & React.RefAttributes<HTMLDivElement>
   > {
-  Tab: TabType;
-  List: TabListType;
-  Panel: TabPanelType;
+  /**
+   * @see 🏷️ {@link TabProps}
+   * @see [🤖 OverridableComponent](https://aksel.nav.no/grunnleggende/kode/overridablecomponent) support
+   */
+  Tab: OverridableComponent<TabProps, HTMLButtonElement>;
+  /**
+   * @see 🏷️ {@link TabListProps}
+   */
+  List: React.ForwardRefExoticComponent<
+    TabListProps & React.RefAttributes<HTMLDivElement>
+  >;
+  /**
+   * @see 🏷️ {@link TabPanelProps}
+   */
+  Panel: React.ForwardRefExoticComponent<
+    TabPanelProps & React.RefAttributes<HTMLDivElement>
+  >;
 }
 
 interface TabsContextProps {
@@ -59,6 +74,32 @@ interface TabsContextProps {
 
 export const TabsContext = createContext<TabsContextProps | null>(null);
 
+/**
+ * A component that displays a set of tabs that can be used to switch between different views.
+ *
+ * @see [📝 Documentation](https://aksel.nav.no/komponenter/core/tabs)
+ * @see 🏷️ {@link TabsProps}
+ *
+ * @example
+ * ```jsx
+ * <Tabs defaultValue="logg">
+ *   <Tabs.List>
+ *     <Tabs.Tab value="logg" label="Logg" />
+ *     <Tabs.Tab value="inbox" label="Inbox" />
+ *     <Tabs.Tab value="sendt" label="Sendt" />
+ *   </Tabs.List>
+ *   <Tabs.Panel value="logg" className="h-24 w-full bg-gray-50 p-4">
+ *     Logg-tab
+ *   </Tabs.Panel>
+ *   <Tabs.Panel value="inbox" className="h-24 w-full bg-gray-50 p-4">
+ *     Inbox-tab
+ *   </Tabs.Panel>
+ *   <Tabs.Panel value="sendt" className="h-24  w-full bg-gray-50 p-4">
+ *     Sendt-tab
+ *   </Tabs.Panel>
+ * </Tabs>
+ * ```
+ */
 export const Tabs = forwardRef<HTMLDivElement, TabsProps>(
   (
     {

package/src/tag/Tag.tsx

@@ -38,6 +38,17 @@ export interface TagProps extends HTMLAttributes<HTMLSpanElement> {
   size?: "medium" | "small" | "xsmall";
 }
 
+/**
+ * A component that displays a small label with a text and a background color.
+ *
+ * @see [📝 Documentation](https://aksel.nav.no/komponenter/core/tag)
+ * @see 🏷️ {@link TagProps}
+ *
+ * @example
+ * ```jsx
+ * <Tag variant="success">Success</Tag>
+ * ```
+ */
 export const Tag = forwardRef<HTMLSpanElement, TagProps>(
   ({ className, variant, size = "medium", ...rest }, ref) => (
     <BodyShort