@navikt/ds-react 3.4.2 → 4.1.0

package/src/dropdown/Dropdown.tsx

@@ -0,0 +1,119 @@
+import React, { createContext, useState } from "react";
+import Toggle, { ToggleProps } from "./Toggle";
+import Menu, { MenuType } from "./Menu";
+
+export interface DropdownProps {
+  children: React.ReactNode;
+  /**
+   * Handler called when an item is selected.
+   */
+  onSelect?: (element: React.MouseEvent) => void;
+  /**
+   * Whether the Menu closes when a selection is made.
+   * @default true
+   */
+  closeOnSelect?: boolean;
+  /**
+   * @default false
+   */
+  defaultOpen?: boolean;
+  /**
+   * Controlled state of the dropdown. When set, you will need to handle onClose and onSelect manually.
+   */
+  open?: boolean;
+}
+
+export interface DropdownType extends React.FC<DropdownProps> {
+  /**
+   * @see 🏷️ {@link ToggleProps}
+   */
+  Toggle: React.ForwardRefExoticComponent<
+    ToggleProps & React.RefAttributes<HTMLButtonElement>
+  >;
+  /**
+   * @see 🏷️ {@link MenuType}
+   */
+  Menu: MenuType;
+}
+
+export interface DropdownContextType {
+  readonly isOpen: boolean;
+  handleToggle: (v: boolean) => void;
+  readonly anchorEl: Element | null;
+  setAnchorEl: React.Dispatch<React.SetStateAction<Element | null>>;
+  onSelect: (element: React.MouseEvent) => void;
+}
+
+export const DropdownContext = createContext<DropdownContextType | null>(null);
+
+/**
+ * A component that displays a dropdown menu when the user clicks on its toggle button.
+ *
+ * @see [📝 Documentation](https://aksel.nav.no/komponenter/core/dropdown)
+ * @see 🏷️ {@link DropdownProps}
+ *
+ * @example
+ * ```jsx
+ * <Dropdown>
+ *   <Button as={Dropdown.Toggle}>Toggle</Button>
+ *   <Dropdown.Menu>
+ *     <Dropdown.Menu.GroupedList>
+ *       <Dropdown.Menu.GroupedList.Heading>
+ *         Systemer og oppslagsverk
+ *       </Dropdown.Menu.GroupedList.Heading>
+ *       <Dropdown.Menu.GroupedList.Item>
+ *         Gosys
+ *       </Dropdown.Menu.GroupedList.Item>
+ *       <Dropdown.Menu.GroupedList.Item>
+ *         Infotrygd
+ *       </Dropdown.Menu.GroupedList.Item>
+ *     </Dropdown.Menu.GroupedList>
+ *     <Dropdown.Menu.Divider />
+ *     <Dropdown.Menu.List>
+ *       <Dropdown.Menu.List.Item>Gosys</Dropdown.Menu.List.Item>
+ *       <Dropdown.Menu.List.Item>Infotrygd</Dropdown.Menu.List.Item>
+ *     </Dropdown.Menu.List>
+ *   </Dropdown.Menu>
+ * </Dropdown>
+ * ```
+ */
+export const Dropdown = (({
+  children,
+  onSelect,
+  closeOnSelect = true,
+  defaultOpen = false,
+  open,
+}) => {
+  const [isOpen, setIsOpen] = useState<boolean>(defaultOpen);
+  const [anchorEl, setAnchorEl] = useState<Element | null>(null);
+
+  const handleToggle = (v: boolean) => {
+    if (open === undefined) {
+      setIsOpen(v);
+    }
+  };
+
+  return (
+    <DropdownContext.Provider
+      value={{
+        isOpen: open ?? isOpen,
+        handleToggle,
+        anchorEl,
+        setAnchorEl,
+        onSelect: (event) => {
+          onSelect?.(event);
+          if (closeOnSelect) {
+            open === undefined && setIsOpen(false);
+          }
+        },
+      }}
+    >
+      {children}
+    </DropdownContext.Provider>
+  );
+}) as DropdownType;
+
+Dropdown.Toggle = Toggle;
+Dropdown.Menu = Menu;
+
+export default Dropdown;

package/src/dropdown/Menu/Divider.tsx

@@ -0,0 +1,15 @@
+import React, { forwardRef } from "react";
+import cl from "clsx";
+
+export const Divider = forwardRef<
+  HTMLHRElement,
+  React.HTMLAttributes<HTMLHRElement>
+>(({ className, ...rest }, ref) => (
+  <hr
+    {...rest}
+    ref={ref}
+    className={cl("navds-dropdown__divider", className)}
+  />
+));
+
+export default Divider;

package/src/dropdown/Menu/GroupedList/Heading.tsx

@@ -0,0 +1,28 @@
+import React, { forwardRef } from "react";
+import cl from "clsx";
+
+export interface GroupedHeadingProps
+  extends React.HTMLAttributes<HTMLDetailsElement> {
+  /**
+   * Heading
+   */
+  children: React.ReactNode;
+}
+
+export const GroupedHeading = forwardRef<
+  HTMLDetailsElement,
+  GroupedHeadingProps
+>(({ className, ...rest }, ref) => (
+  <dt
+    {...rest}
+    ref={ref}
+    className={cl(
+      "navds-dropdown__list-heading",
+      "navds-heading",
+      "navds-heading--xsmall",
+      className
+    )}
+  />
+));
+
+export default GroupedHeading;

package/src/dropdown/Menu/GroupedList/Item.tsx

@@ -0,0 +1,41 @@
+import { OverridableComponent } from "../../../util/OverridableComponent";
+import cl from "clsx";
+import React, { forwardRef, useContext } from "react";
+import { DropdownContext } from "../../Dropdown";
+
+export interface GroupedItemProps
+  extends React.ButtonHTMLAttributes<HTMLElement> {
+  /**
+   * Menu item content
+   */
+  children: React.ReactNode;
+}
+
+export const GroupedItem: OverridableComponent<
+  GroupedItemProps,
+  HTMLButtonElement
+> = forwardRef(({ as: Component = "button", className, ...rest }, ref) => {
+  const context = useContext(DropdownContext);
+
+  return (
+    <dd className="navds-dropdown__list-item">
+      <Component
+        {...rest}
+        value={rest.children}
+        onClick={(event: React.MouseEvent<HTMLElement, MouseEvent>) => {
+          context?.onSelect?.(event);
+          rest?.onClick?.(event);
+        }}
+        ref={ref}
+        className={cl(
+          "navds-dropdown__item",
+          "navds-body-short",
+          "navds-body-short--small",
+          className
+        )}
+      />
+    </dd>
+  );
+});
+
+export default GroupedItem;

package/src/dropdown/Menu/GroupedList/index.tsx

@@ -0,0 +1,43 @@
+import cl from "clsx";
+import React, { forwardRef } from "react";
+import { OverridableComponent } from "../../../util/OverridableComponent";
+import GroupedHeading, { GroupedHeadingProps } from "./Heading";
+import GroupedItem, { GroupedItemProps } from "./Item";
+
+export interface GroupedListProps
+  extends React.HTMLAttributes<HTMLDListElement> {
+  /**
+   * Menu list content
+   */
+  children: React.ReactNode;
+}
+
+export interface GroupedListType
+  extends React.ForwardRefExoticComponent<
+    GroupedListProps & React.RefAttributes<HTMLDListElement>
+  > {
+  /**
+   * @see 🏷️ {@link GroupedHeadingProps}
+   */
+  Heading: React.ForwardRefExoticComponent<
+    GroupedHeadingProps & React.RefAttributes<HTMLDetailsElement>
+  >;
+  /**
+   * @see 🏷️ {@link GroupedItemProps}
+   * @see [🤖 OverridableComponent](https://aksel.nav.no/grunnleggende/kode/overridablecomponent) support
+   */
+  Item: OverridableComponent<GroupedItemProps, HTMLButtonElement>;
+}
+
+export const DescriptionList = forwardRef(
+  ({ className, children, ...rest }, ref) => (
+    <dl {...rest} ref={ref} className={cl("navds-dropdown__list", className)}>
+      {children}
+    </dl>
+  )
+) as GroupedListType;
+
+DescriptionList.Heading = GroupedHeading;
+DescriptionList.Item = GroupedItem;
+
+export default DescriptionList;

package/src/dropdown/Menu/List/Item.tsx

@@ -0,0 +1,38 @@
+import React, { forwardRef, useContext } from "react";
+import cl from "clsx";
+import { OverridableComponent } from "../../../util/OverridableComponent";
+import { DropdownContext } from "../../Dropdown";
+
+export interface ListItemProps extends React.ButtonHTMLAttributes<HTMLElement> {
+  /**
+   * Menu item content
+   */
+  children: React.ReactNode;
+}
+
+export const ListItem: OverridableComponent<ListItemProps, HTMLButtonElement> =
+  forwardRef(({ as: Component = "button", className, ...rest }, ref) => {
+    const context = useContext(DropdownContext);
+
+    return (
+      <li className="navds-dropdown__list-item">
+        <Component
+          {...rest}
+          value={rest.children}
+          onClick={(event: React.MouseEvent<HTMLElement, MouseEvent>) => {
+            context?.onSelect?.(event);
+            rest?.onClick?.(event);
+          }}
+          ref={ref}
+          className={cl(
+            "navds-dropdown__item",
+            "navds-body-short",
+            "navds-body-short--small",
+            className
+          )}
+        />
+      </li>
+    );
+  });
+
+export default ListItem;

package/src/dropdown/Menu/List/index.tsx

@@ -0,0 +1,32 @@
+import cl from "clsx";
+import React, { forwardRef } from "react";
+import { OverridableComponent } from "../../../util/OverridableComponent";
+import ListItem, { ListItemProps } from "./Item";
+
+export interface ListProps extends React.HTMLAttributes<HTMLUListElement> {
+  /**
+   * Menu list content
+   */
+  children: React.ReactNode;
+}
+
+export interface ListType
+  extends React.ForwardRefExoticComponent<
+    ListProps & React.RefAttributes<HTMLUListElement>
+  > {
+  /**
+   * @see 🏷️ {@link ListItemProps}
+   * @see [🤖 OverridableComponent](https://aksel.nav.no/grunnleggende/kode/overridablecomponent) support
+   */
+  Item: OverridableComponent<ListItemProps, HTMLButtonElement>;
+}
+
+export const List = forwardRef(({ className, children, ...rest }, ref) => (
+  <ul {...rest} ref={ref} className={cl("navds-dropdown__list", className)}>
+    {children}
+  </ul>
+)) as ListType;
+
+List.Item = ListItem;
+
+export default List;

package/src/dropdown/Menu/index.tsx

@@ -0,0 +1,96 @@
+import cl from "clsx";
+import React, { forwardRef, useContext } from "react";
+import { Popover } from "../../popover";
+import { DropdownContext } from "../Dropdown";
+import Divider from "./Divider";
+import GroupedList, { GroupedListType } from "./GroupedList";
+import List, { ListType } from "./List";
+
+interface MenuProps extends React.HTMLAttributes<HTMLDivElement> {
+  /**
+   * Dropdown content
+   */
+  children: React.ReactNode;
+  /**
+   * onClose callback
+   */
+  onClose?: () => void;
+  /**
+   * Popover positionion strategy
+   * @default "absolute"
+   */
+  strategy?: "fixed" | "absolute";
+  /*
+   * Default dialog-placement on open
+   * @default "bottom-end"
+   */
+  placement?:
+    | "top"
+    | "bottom"
+    | "right"
+    | "left"
+    | "top-start"
+    | "top-end"
+    | "bottom-start"
+    | "bottom-end"
+    | "right-start"
+    | "right-end"
+    | "left-start"
+    | "left-end";
+}
+
+export interface MenuType<Props = MenuProps>
+  extends React.ForwardRefExoticComponent<
+    Props & React.RefAttributes<HTMLDivElement>
+  > {
+  /**
+   * @see 🏷️ {@link ListType}
+   */
+  List: ListType;
+  /**
+   * @see 🏷️ {@link GroupedListType}
+   */
+  GroupedList: GroupedListType;
+  /**
+   * @see 🏷️ {@link React.HTMLAttributes<HTMLHRElement>}
+   */
+  Divider: React.ForwardRefExoticComponent<
+    React.HTMLAttributes<HTMLHRElement> & React.RefAttributes<HTMLHRElement>
+  >;
+}
+
+export const Menu = forwardRef<HTMLDivElement, MenuProps>(
+  ({ className, onClose, placement = "bottom-end", ...rest }, ref) => {
+    const context = useContext(DropdownContext);
+
+    if (!context) {
+      console.warn("Dropdown.Menu has to be wrapped in <Dropdown />");
+      return null;
+    }
+
+    const { isOpen, anchorEl, handleToggle } = context;
+
+    return (
+      <Popover
+        {...rest}
+        placement={placement}
+        ref={ref}
+        arrow={false}
+        className={cl("navds-dropdown__menu", className)}
+        offset={-4}
+        anchorEl={anchorEl}
+        open={isOpen}
+        onClose={() => {
+          handleToggle(false);
+          onClose && onClose();
+        }}
+      />
+    );
+  }
+) as MenuType;
+
+Menu.List = List;
+Menu.GroupedList = GroupedList;
+Menu.Divider = Divider;
+
+export default Menu;

package/src/dropdown/Toggle.tsx

@@ -0,0 +1,48 @@
+import React, { forwardRef, useContext } from "react";
+import cl from "clsx";
+import { DropdownContext } from ".";
+
+export interface ToggleProps
+  extends React.ButtonHTMLAttributes<HTMLButtonElement> {
+  /**
+   * Button content
+   */
+  children: React.ReactNode;
+}
+
+export const Toggle = forwardRef<HTMLButtonElement, ToggleProps>(
+  ({ className, onClick, ...rest }, ref) => {
+    const context = useContext(DropdownContext);
+
+    if (!context) {
+      console.warn("Dropdown.Toggle has to be wrapped in <Dropdown />");
+      return null;
+    }
+
+    const { setAnchorEl, handleToggle, isOpen } = context;
+
+    return (
+      <button
+        {...rest}
+        ref={(el) => {
+          setAnchorEl(el);
+
+          if (typeof ref === "function") {
+            ref(el);
+          } else if (ref != null) {
+            ref.current = el;
+          }
+        }}
+        onClick={(e) => {
+          setAnchorEl(e.currentTarget);
+          handleToggle(!isOpen);
+          onClick && onClick(e);
+        }}
+        aria-expanded={isOpen}
+        className={cl("navds-dropdown__toggle", className)}
+      />
+    );
+  }
+);
+
+export default Toggle;

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/expansion-card/ExpansionCard.tsx

@@ -1,28 +1,48 @@
 import cl from "clsx";
 import React, { createContext, forwardRef, useRef, useState } from "react";
+import { OverridableComponent } from "../util/OverridableComponent";
 import ExpansionCardContent, {
-  ExpansionCardContentType,
+  ExpansionCardContentProps,
 } from "./ExpansionCardContent";
 import {
   ExpansionCardDescription,
-  ExpansionCardDescriptionType,
+  ExpansionCardDescriptionProps,
 } from "./ExpansionCardDescription";
 import ExpansionCardHeader, {
-  ExpansionCardHeaderType,
+  ExpansionCardHeaderProps,
 } from "./ExpansionCardHeader";
 import {
   ExpansionCardTitle,
-  ExpansionCardTitleType,
+  ExpansionCardTitleProps,
 } from "./ExpansionCardTitle";
 
 interface ExpansionCardComponent
   extends React.ForwardRefExoticComponent<
     ExpansionCardProps & React.RefAttributes<HTMLDivElement>
   > {
-  Header: ExpansionCardHeaderType;
-  Title: ExpansionCardTitleType;
-  Description: ExpansionCardDescriptionType;
-  Content: ExpansionCardContentType;
+  /**
+   * @see 🏷️ {@link ExpansionCardHeaderProps}
+   */
+  Header: React.ForwardRefExoticComponent<
+    ExpansionCardHeaderProps & React.RefAttributes<HTMLDivElement>
+  >;
+  /**
+   * @see 🏷️ {@link ExpansionCardTitleProps}
+   * @see [🤖 OverridableComponent](https://aksel.nav.no/grunnleggende/kode/overridablecomponent) support
+   */
+  Title: OverridableComponent<ExpansionCardTitleProps, HTMLHeadingElement>;
+  /**
+   * @see 🏷️ {@link ExpansionCardDescriptionProps}
+   */
+  Description: React.ForwardRefExoticComponent<
+    ExpansionCardDescriptionProps & React.RefAttributes<HTMLParagraphElement>
+  >;
+  /**
+   * @see 🏷️ {@link ExpansionCardContentProps}
+   */
+  Content: React.ForwardRefExoticComponent<
+    ExpansionCardContentProps & React.RefAttributes<HTMLDivElement>
+  >;
 }
 
 interface ExpansionCardCommonProps
@@ -77,6 +97,24 @@ export const ExpansionCardContext = createContext<ExpansionCardContextProps>({
 export type ExpansionCardProps = ExpansionCardCommonProps &
   ExpansionCardConditionalProps;
 
+/**
+ * A component that displays an expandable card.
+ *
+ * @see [📝 Documentation](https://aksel.nav.no/komponenter/core/expansioncard)
+ * @see 🏷️ {@link ExpansionCardProps}
+ *
+ * @example
+ * ```jsx
+ * <ExpansionCard aria-label="default-demo">
+ *   <ExpansionCard.Header>
+ *     <ExpansionCard.Title>Utbetaling av sykepenger</ExpansionCard.Title>
+ *   </ExpansionCard.Header>
+ *   <ExpansionCard.Content>
+ *     <Innhold />
+ *   </ExpansionCard.Content>
+ * </ExpansionCard>
+ * ```
+ */
 export const ExpansionCard = forwardRef<HTMLDivElement, ExpansionCardProps>(
   (
     {