@navikt/ds-react 3.4.2 → 4.0.0

package/src/dropdown/dropdown.stories.tsx

@@ -0,0 +1,91 @@
+import React, { useState } from "react";
+import { Dropdown } from "..";
+import { Meta } from "@storybook/react";
+import { Button } from "../button";
+
+export default {
+  title: "ds-react/Dropdown",
+  component: Dropdown,
+} as Meta;
+
+export const Default = () => {
+  return (
+    <Dropdown onSelect={(event) => console.log(event)}>
+      <Dropdown.Toggle>Toggle</Dropdown.Toggle>
+      <Dropdown.Menu strategy="fixed">
+        <Dropdown.Menu.GroupedList>
+          <Dropdown.Menu.GroupedList.Heading>
+            Systemer og oppslagsverk
+          </Dropdown.Menu.GroupedList.Heading>
+          <Dropdown.Menu.GroupedList.Item
+            onClick={() => console.log("GroupedList.Item-click")}
+          >
+            Gosys
+          </Dropdown.Menu.GroupedList.Item>
+        </Dropdown.Menu.GroupedList>
+        <Dropdown.Menu.Divider />
+        <Dropdown.Menu.List>
+          <Dropdown.Menu.List.Item onClick={() => console.log("Item-click")}>
+            Gosys
+          </Dropdown.Menu.List.Item>
+          <Dropdown.Menu.List.Item>Psys</Dropdown.Menu.List.Item>
+          <Dropdown.Menu.List.Item disabled>Infotrygd</Dropdown.Menu.List.Item>
+        </Dropdown.Menu.List>
+      </Dropdown.Menu>
+    </Dropdown>
+  );
+};
+
+export const DefaultOpen = {
+  render: () => (
+    <Dropdown onSelect={(event) => console.log(event)} defaultOpen>
+      <Button as={Dropdown.Toggle}>Toggle</Button>
+      <Dropdown.Menu
+        strategy="fixed"
+        onClose={() => console.log("ONCLOSE default")}
+      >
+        <Dropdown.Menu.GroupedList>
+          <Dropdown.Menu.GroupedList.Heading>
+            Systemer og oppslagsverk
+          </Dropdown.Menu.GroupedList.Heading>
+          <Dropdown.Menu.GroupedList.Item
+            onClick={() => console.log("GroupedList.Item-click")}
+          >
+            Gosys
+          </Dropdown.Menu.GroupedList.Item>
+        </Dropdown.Menu.GroupedList>
+      </Dropdown.Menu>
+    </Dropdown>
+  ),
+  args: { chromatic: { delay: 300 } },
+};
+
+export const ControlledOpen = {
+  render: () => {
+    // eslint-disable-next-line react-hooks/rules-of-hooks
+    const [openState, setOpenState] = useState(true);
+    return (
+      <Dropdown onSelect={(event) => console.log(event)} open={openState}>
+        <Button as={Dropdown.Toggle} onClick={() => setOpenState(!openState)}>
+          Toggle
+        </Button>
+        <Dropdown.Menu
+          strategy="fixed"
+          onClose={() => console.log("ONCLOSE CONTROLLED")}
+        >
+          <Dropdown.Menu.GroupedList>
+            <Dropdown.Menu.GroupedList.Heading>
+              Systemer og oppslagsverk
+            </Dropdown.Menu.GroupedList.Heading>
+            <Dropdown.Menu.GroupedList.Item
+              onClick={() => console.log("GroupedList.Item-click")}
+            >
+              Gosys
+            </Dropdown.Menu.GroupedList.Item>
+          </Dropdown.Menu.GroupedList>
+        </Dropdown.Menu>
+      </Dropdown>
+    );
+  },
+  args: { chromatic: { delay: 300 } },
+};

package/src/dropdown/index.ts

@@ -0,0 +1,2 @@
+export { default as Dropdown } from "./Dropdown";
+export * from "./Dropdown";

package/src/form/radio/RadioGroup.tsx

@@ -45,6 +45,16 @@ export interface RadioGroupProps
   required?: boolean;
 }
 
+/**
+ * Form radio group
+ * @see https://aksel.nav.no/komponenter/core/radio
+ * @see {@link RadioGroupProps}
+ * @example
+ * <RadioGroup legend="Får du AAP nå?">
+ *    <Radio value="ja">Ja</Radio>
+ *    <Radio value="Nei">Nei</Radio>
+ * </RadioGroup>
+ */
 export const RadioGroup = forwardRef<HTMLFieldSetElement, RadioGroupProps>(
   (
     {

package/src/index.ts

@@ -5,11 +5,13 @@ export * from "./chat";
 export * from "./chips";
 export * from "./copybutton";
 export * from "./date";
+export * from "./dropdown";
 export * from "./expansion-card";
 export * from "./form";
 export * from "./grid";
 export * from "./guide-panel";
 export * from "./help-text";
+export * from "./internal-header";
 export * from "./link";
 export * from "./link-panel";
 export * from "./list";
@@ -24,6 +26,7 @@ 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";

package/src/internal-header/InternalHeader.tsx

@@ -0,0 +1,44 @@
+import React, { forwardRef, HTMLAttributes } from "react";
+import InternalHeaderTitle, {
+  InternalHeaderTitleType,
+} from "./InternalHeaderTitle";
+import InternalHeaderUser, {
+  InternalHeaderUserType,
+} from "./InternalHeaderUser";
+import InternalHeaderButton, {
+  InternalHeaderButtonType,
+} from "./InternalHeaderButton";
+import InternalHeaderUserButton, {
+  InternalHeaderUserButtonType,
+} from "./InternalHeaderUserButton";
+import cl from "clsx";
+
+export interface InternalHeaderProps extends HTMLAttributes<HTMLElement> {
+  children: React.ReactNode;
+}
+
+interface InternalHeaderComponent
+  extends React.ForwardRefExoticComponent<
+    InternalHeaderProps & React.RefAttributes<HTMLElement>
+  > {
+  Title: InternalHeaderTitleType;
+  User: InternalHeaderUserType;
+  Button: InternalHeaderButtonType;
+  UserButton: InternalHeaderUserButtonType;
+}
+
+export const InternalHeader = forwardRef(({ className, ...rest }, ref) => (
+  <header
+    data-theme="dark"
+    {...rest}
+    ref={ref}
+    className={cl("navds-internalheader", className)}
+  />
+)) as InternalHeaderComponent;
+
+InternalHeader.Title = InternalHeaderTitle;
+InternalHeader.User = InternalHeaderUser;
+InternalHeader.Button = InternalHeaderButton;
+InternalHeader.UserButton = InternalHeaderUserButton;
+
+export default InternalHeader;

package/src/internal-header/InternalHeaderButton.tsx

@@ -0,0 +1,28 @@
+import React, { forwardRef } from "react";
+import cl from "clsx";
+import { OverridableComponent } from "../util/OverridableComponent";
+
+export interface InternalHeaderButtonProps
+  extends React.AnchorHTMLAttributes<HTMLButtonElement> {
+  /**
+   * Application Button
+   */
+  children: React.ReactNode;
+}
+
+export type InternalHeaderButtonType = OverridableComponent<
+  InternalHeaderButtonProps,
+  HTMLButtonElement
+>;
+
+export const InternalHeaderButton: InternalHeaderButtonType = forwardRef(
+  ({ as: Component = "button", className, ...rest }, ref) => (
+    <Component
+      {...rest}
+      ref={ref}
+      className={cl("navds-internalheader__button", className)}
+    />
+  )
+);
+
+export default InternalHeaderButton;

package/src/internal-header/InternalHeaderTitle.tsx

@@ -0,0 +1,35 @@
+import React, { forwardRef } from "react";
+import cl from "clsx";
+import { OverridableComponent } from "../util/OverridableComponent";
+
+export interface InternalHeaderTitleProps
+  extends React.AnchorHTMLAttributes<HTMLAnchorElement> {
+  /**
+   * Application title
+   */
+  children: React.ReactNode;
+}
+
+export type InternalHeaderTitleType = OverridableComponent<
+  InternalHeaderTitleProps,
+  HTMLAnchorElement
+>;
+
+export const InternalHeaderTitle: InternalHeaderTitleType = forwardRef(
+  ({ as: Component = "a", children, className, ...rest }, ref) => (
+    <Component
+      {...rest}
+      ref={ref}
+      size="xsmall"
+      className={cl(
+        "navds-internalheader__title",
+        "navds-body-short",
+        className
+      )}
+    >
+      <span>{children}</span>
+    </Component>
+  )
+);
+
+export default InternalHeaderTitle;

package/src/internal-header/InternalHeaderUser.tsx

@@ -0,0 +1,39 @@
+import React, { forwardRef, HTMLAttributes } from "react";
+import cl from "clsx";
+import { BodyShort, Detail } from "../typography";
+
+export interface InternalHeaderUserProps
+  extends HTMLAttributes<HTMLDivElement> {
+  /**
+   * User name
+   */
+  name: string;
+  /**
+   * User description
+   */
+  description?: string;
+}
+
+export type InternalHeaderUserType = React.ForwardRefExoticComponent<
+  InternalHeaderUserProps & React.RefAttributes<HTMLDivElement>
+>;
+
+export const InternalHeaderUser = forwardRef<
+  HTMLDivElement,
+  InternalHeaderUserProps
+>(({ className, name, description, ...rest }, ref) => (
+  <div
+    {...rest}
+    ref={ref}
+    className={cl("navds-internalheader__user", className)}
+  >
+    <span>
+      <BodyShort size="small" as="div">
+        {name}
+      </BodyShort>
+      {description && <Detail as="div">{description}</Detail>}
+    </span>
+  </div>
+));
+
+export default InternalHeaderUser;

package/src/internal-header/InternalHeaderUserButton.tsx

@@ -0,0 +1,43 @@
+import { ChevronDownIcon } from "@navikt/aksel-icons";
+import cl from "clsx";
+import React, { forwardRef } from "react";
+import { BodyShort, Detail } from "../typography";
+import { OverridableComponent } from "../util/OverridableComponent";
+import InternalHeaderButton from "./InternalHeaderButton";
+
+export interface InternalHeaderUserButtonProps
+  extends React.AnchorHTMLAttributes<HTMLButtonElement> {
+  /**
+   * User name
+   */
+  name: string;
+  /**
+   * User description
+   */
+  description?: string;
+}
+
+export type InternalHeaderUserButtonType = OverridableComponent<
+  InternalHeaderUserButtonProps,
+  HTMLButtonElement
+>;
+
+export const InternalHeaderUserButton: InternalHeaderUserButtonType =
+  forwardRef(({ as, name, description, className, ...rest }, ref) => (
+    <InternalHeaderButton
+      {...rest}
+      as={as}
+      ref={ref}
+      className={cl("navds-internalheader__user-button", className)}
+    >
+      <div>
+        <BodyShort size="small" as="div">
+          {name}
+        </BodyShort>
+        {description && <Detail as="div">{description}</Detail>}
+      </div>
+      <ChevronDownIcon title="vis meny" />
+    </InternalHeaderButton>
+  ));
+
+export default InternalHeaderUserButton;

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

@@ -0,0 +1,225 @@
+import {
+  ChevronDownIcon,
+  ExternalLinkIcon,
+  MenuGridIcon,
+} from "@navikt/aksel-icons";
+import { BodyLong, BodyShort, Detail } from "@navikt/ds-react";
+import { Meta } from "@storybook/react";
+import React from "react";
+import { InternalHeader, Dropdown } from "..";
+
+export default {
+  title: "ds-react/InternalHeader",
+  component: InternalHeader,
+  argTypes: {
+    user: {
+      control: {
+        type: "radio",
+        options: ["simple", "with description", "with dropdown"],
+      },
+    },
+  },
+} as Meta;
+
+export const Default = {
+  render: (props) => {
+    return (
+      <InternalHeader style={{ width: 600 }}>
+        {props?.titleAsHeading ? (
+          <InternalHeader.Title as="h1">Tittel</InternalHeader.Title>
+        ) : (
+          <InternalHeader.Title href="/#home">
+            Tittel med lenke
+          </InternalHeader.Title>
+        )}
+        {props.systemMenu && (
+          <Dropdown>
+            <InternalHeader.Button
+              as={Dropdown.Toggle}
+              style={{ marginLeft: "auto" }}
+            >
+              <MenuGridIcon
+                style={{ fontSize: "1.5rem" }}
+                title="MenuGridIconer og oppslagsverk"
+              />
+            </InternalHeader.Button>
+            <Dropdown.Menu strategy="fixed">
+              <Dropdown.Menu.List>
+                <Dropdown.Menu.List.Item>
+                  <span>A.Inntekt</span>
+                  <ExternalLinkIcon style={{ fontSize: "0.875rem" }} />
+                </Dropdown.Menu.List.Item>
+                <Dropdown.Menu.List.Item>
+                  <span>Aa-registeret</span>
+                  <ExternalLinkIcon style={{ fontSize: "0.875rem" }} />
+                </Dropdown.Menu.List.Item>
+                <Dropdown.Menu.List.Item>
+                  <span>Gosys</span>
+                  <ExternalLinkIcon style={{ fontSize: "0.875rem" }} />
+                </Dropdown.Menu.List.Item>
+              </Dropdown.Menu.List>
+            </Dropdown.Menu>
+          </Dropdown>
+        )}
+        {(!props.user || props.user === "simple") && (
+          <InternalHeader.User
+            name="Ola Normann"
+            style={{ marginLeft: props.systemMenu ? "none" : "auto" }}
+          />
+        )}
+        {props.user === "with description" && (
+          <InternalHeader.User
+            name="Ola Normann"
+            description="0123456"
+            style={{ marginLeft: props.systemMenu ? "none" : "auto" }}
+          />
+        )}
+        {props.user === "with dropdown" && (
+          <Dropdown>
+            <InternalHeader.Button
+              as={Dropdown.Toggle}
+              style={{
+                marginLeft: props.systemMenu ? "none" : "auto",
+                paddingRight: "1.5rem",
+                paddingLeft: "1.5rem",
+                gap: "1rem",
+              }}
+            >
+              <BodyShort title="Ola Normann">KH</BodyShort>
+              <ChevronDownIcon />
+            </InternalHeader.Button>
+            <Dropdown.Menu strategy="fixed">
+              <div>
+                <BodyLong size="small" as="div">
+                  Ola Normann 16px
+                </BodyLong>
+                <Detail size="small" as="div">
+                  <div>Ident nr 14px</div>
+                  <div>Enhet: Skien</div>
+                </Detail>
+              </div>
+              <Dropdown.Menu.Divider />
+              <Dropdown.Menu.List>
+                <Dropdown.Menu.List.Item as="a" href="/#settings">
+                  Innstillinger
+                </Dropdown.Menu.List.Item>
+                <Dropdown.Menu.List.Item onClick={() => console.log("logg ut")}>
+                  Logg ut
+                </Dropdown.Menu.List.Item>
+              </Dropdown.Menu.List>
+            </Dropdown.Menu>
+          </Dropdown>
+        )}
+      </InternalHeader>
+    );
+  },
+
+  args: {
+    titleAsHeading: false,
+    systemMenu: false,
+  },
+};
+
+export const TitleAsHeading = () => (
+  <InternalHeader style={{ width: 600 }}>
+    <InternalHeader.Title as="h1">Tittel</InternalHeader.Title>
+  </InternalHeader>
+);
+
+export const TitleAsLink = () => (
+  <InternalHeader style={{ width: 600 }}>
+    <InternalHeader.Title href="/#home">Tittel med lenke</InternalHeader.Title>
+  </InternalHeader>
+);
+
+export const User = () => (
+  <InternalHeader style={{ width: 600 }}>
+    <InternalHeader.Title href="/#home">Tittel med lenke</InternalHeader.Title>
+    <InternalHeader.User name="Ola Normann" style={{ marginLeft: "auto" }} />
+  </InternalHeader>
+);
+
+export const UserWithDescription = () => (
+  <InternalHeader style={{ width: 600 }}>
+    <InternalHeader.Title href="/#home">Tittel med lenke</InternalHeader.Title>
+    <InternalHeader.User
+      name="Ola Normann"
+      description="id: 123456"
+      style={{ marginLeft: "auto" }}
+    />
+  </InternalHeader>
+);
+
+export const UserWithMenu = () => (
+  <InternalHeader style={{ width: 600 }}>
+    <InternalHeader.Title href="/#home">Tittel med lenke</InternalHeader.Title>
+    <Dropdown>
+      <InternalHeader.Button
+        as={Dropdown.Toggle}
+        style={{
+          marginLeft: "auto",
+          paddingRight: "1.5rem",
+          paddingLeft: "1.5rem",
+          gap: "1rem",
+        }}
+      >
+        <BodyShort title="Ola Normann">KH</BodyShort>
+        <ChevronDownIcon />
+      </InternalHeader.Button>
+      <Dropdown.Menu strategy="fixed">
+        <div>
+          <BodyLong size="small" as="div">
+            Ola Normann 16px
+          </BodyLong>
+          <Detail size="small" as="div">
+            <div>Ident nr 14px</div>
+            <div>Enhet: Skien</div>
+          </Detail>
+        </div>
+        <Dropdown.Menu.Divider />
+        <Dropdown.Menu.List>
+          <Dropdown.Menu.List.Item as="a" href="/#settings">
+            Innstillinger
+          </Dropdown.Menu.List.Item>
+          <Dropdown.Menu.List.Item onClick={() => console.log("logg ut")}>
+            Logg ut
+          </Dropdown.Menu.List.Item>
+        </Dropdown.Menu.List>
+      </Dropdown.Menu>
+    </Dropdown>
+  </InternalHeader>
+);
+
+export const UserWithMenuGridIconMenu = () => (
+  <InternalHeader style={{ width: 600 }}>
+    <InternalHeader.Title href="/#home">Tittel med lenke</InternalHeader.Title>
+    <Dropdown>
+      <InternalHeader.Button
+        as={Dropdown.Toggle}
+        style={{ marginLeft: "auto" }}
+      >
+        <MenuGridIcon
+          style={{ fontSize: "1.5rem" }}
+          title="MenuGridIconer og oppslagsverk"
+        />
+      </InternalHeader.Button>
+      <Dropdown.Menu strategy="fixed">
+        <Dropdown.Menu.List>
+          <Dropdown.Menu.List.Item>
+            <span>A.Inntekt</span>
+            <ExternalLinkIcon style={{ fontSize: "0.875rem" }} />
+          </Dropdown.Menu.List.Item>
+          <Dropdown.Menu.List.Item>
+            <span>Aa-registeret</span>
+            <ExternalLinkIcon style={{ fontSize: "0.875rem" }} />
+          </Dropdown.Menu.List.Item>
+          <Dropdown.Menu.List.Item>
+            <span>Gosys</span>
+            <ExternalLinkIcon style={{ fontSize: "0.875rem" }} />
+          </Dropdown.Menu.List.Item>
+        </Dropdown.Menu.List>
+      </Dropdown.Menu>
+    </Dropdown>
+    <InternalHeader.User name="Ola Normann" description="id: 123456" />
+  </InternalHeader>
+);

package/src/internal-header/index.ts

@@ -0,0 +1,8 @@
+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";

package/src/read-more/ReadMore.tsx

@@ -30,6 +30,23 @@ export interface ReadMoreProps
   size?: "medium" | "small";
 }
 
+/**
+ * ReadMore
+ * @see https://aksel.nav.no/komponenter/core/read-more
+ * @see {@link ReadMoreProps}
+ *
+ * @example
+ * // Default
+ * <ReadMore header="Dette regnes som helsemessige begrensninger">
+ *  Med helsemessige begrensninger mener vi funksjonshemming, sykdom...
+ * </ReadMore>
+ *
+ * @example
+ * // Litt mindre versjon
+ * <ReadMore size="small" header="Dette regnes som helsemessige begrensninger">
+ *   Med helsemessige begrensninger mener vi funksjonshemming, sykdom...
+ * </ReadMore>
+ */
 export const ReadMore = forwardRef<HTMLButtonElement, ReadMoreProps>(
   (
     {