Lerna versionbump [ci skip]

- @navikt/ds-css-internal@0.4.0
 - @navikt/ds-react-internal@0.4.0

@navikt/internal/css/dropdown-menu.css

@@ -7,17 +7,19 @@
   overflow-y: auto;
 }
 
-.navdsi-dropdown-menu > :not(.navdsi-divider):not(.navdsi-dropdown-menu__list) {
-  padding-left: var(--navds-spacing-4);
-  padding-right: var(--navds-spacing-4);
-}
-
 .navdsi-dropdown-menu__list {
   margin: 0;
   padding: 0;
   list-style: none;
 }
 
+.navdsi-dropdown-menu__list
+  > *
+  > :not(.navdsi-divider):not(.navdsi-dropdown-menu__item) {
+  margin: var(--navds-spacing-4);
+  margin-top: 0;
+}
+
 .navdsi-dropdown-menu__item {
   border: none;
   margin: 0;

@navikt/internal/css/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@navikt/ds-css-internal",
-  "version": "0.3.1",
+  "version": "0.4.0",
   "private": false,
   "description": "Css for NAV internal Designsystem components",
   "author": "NAV Designsystem team",

@navikt/internal/react/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@navikt/ds-react-internal",
-  "version": "0.3.1",
+  "version": "0.4.0",
   "private": false,
   "description": "NAV internal designsystem react components",
   "author": "NAV Designsystem team",

@navikt/internal/react/src/dropdown-menu/DropdownMenu.tsx

@@ -2,7 +2,6 @@ import React, { forwardRef } from "react";
 import cl from "classnames";
 import { Placement } from "@popperjs/core";
 import { Popover, PopoverProps } from "@navikt/ds-react";
-import List, { DropdownMenuListType } from "./List";
 import Item, { DropdownMenuItemType } from "./Item";
 
 export interface DropdownMenuProps extends PopoverProps {
@@ -31,7 +30,6 @@ export interface DropdownMenuType<Props = DropdownMenuProps>
   extends React.ForwardRefExoticComponent<
     Props & React.RefAttributes<HTMLDivElement>
   > {
-  List: DropdownMenuListType;
   Item: DropdownMenuItemType;
 }
 
@@ -55,12 +53,15 @@ const DropdownMenu = forwardRef<HTMLDivElement, DropdownMenuProps>(
       className={cl("navdsi-dropdown-menu", className)}
       offset={offset ?? arrow ? 8 : -4}
     >
-      {children}
+      <ul role="menu" className="navdsi-dropdown-menu__list">
+        {React.Children.map(children, (child) => (
+          <li>{child}</li>
+        ))}
+      </ul>
     </Popover>
   )
 ) as DropdownMenuType;
 
-DropdownMenu.List = List;
 DropdownMenu.Item = Item;
 
 export default DropdownMenu;

@navikt/internal/react/src/dropdown-menu/List.tsx

@@ -1,31 +0,0 @@
-import React, { forwardRef } from "react";
-import cl from "classnames";
-
-export interface DropdownMenuListProps
-  extends React.HTMLAttributes<HTMLUListElement> {
-  /**
-   * Menu item content
-   */
-  children: React.ReactNode;
-}
-
-export type DropdownMenuListType = React.ForwardRefExoticComponent<
-  DropdownMenuListProps & React.RefAttributes<HTMLUListElement>
->;
-
-const List: DropdownMenuListType = forwardRef(
-  ({ className, children, ...rest }, ref) => (
-    <ul
-      {...rest}
-      ref={ref}
-      role="menu"
-      className={cl("navdsi-dropdown-menu__list", className)}
-    >
-      {React.Children.map(children, (child) => (
-        <li>{child}</li>
-      ))}
-    </ul>
-  )
-);
-
-export default List;

@navikt/internal/react/src/dropdown-menu/stories/dropdown-menu.stories.tsx

@@ -17,7 +17,7 @@ export const All = () => {
     <Router>
       <span ref={(el) => setAnchorEl(el)} />
       <DropdownMenu open onClose={() => {}} anchorEl={anchorEl}>
-        <Heading level="2" size="xsmall">
+        <Heading size="xsmall" as="div">
           Systemer og oppslagsverk
         </Heading>
         <DropdownMenu.Item as={Link} to="/settings">

@navikt/internal/react/src/header/Header.tsx

@@ -1,7 +1,6 @@
 import React, { forwardRef, HTMLAttributes } from "react";
 import HeaderTitle, { HeaderTitleType } from "./HeaderTitle";
 import HeaderUser, { HeaderUserType } from "./HeaderUser";
-import HeaderButton, { HeaderButtonType } from "./HeaderButton";
 import HeaderDropdown, { HeaderDropdownType } from "./HeaderDropdown";
 import cl from "classnames";
 
@@ -18,17 +17,15 @@ interface HeaderComponent
   > {
   Title: HeaderTitleType;
   User: HeaderUserType;
-  Button: HeaderButtonType;
   Dropdown: HeaderDropdownType;
 }
 
 const Header = forwardRef(({ className, ...rest }, ref) => (
-  <header ref={ref} className={cl("navdsi-header", className)} {...rest} />
+  <header {...rest} ref={ref} className={cl("navdsi-header", className)} />
 )) as HeaderComponent;
 
 Header.Title = HeaderTitle;
 Header.User = HeaderUser;
-Header.Button = HeaderButton;
 Header.Dropdown = HeaderDropdown;
 
 export default Header;

@navikt/internal/react/src/header/HeaderButton.tsx

@@ -1,28 +0,0 @@
-import React, { forwardRef } from "react";
-import cl from "classnames";
-import { OverridableComponent } from "@navikt/ds-react";
-
-export interface HeaderButtonProps
-  extends React.ButtonHTMLAttributes<HTMLButtonElement> {
-  /**
-   * Button content
-   */
-  children: React.ReactNode;
-}
-
-export type HeaderButtonType = OverridableComponent<
-  HeaderButtonProps,
-  HTMLButtonElement
->;
-
-const HeaderButton: HeaderButtonType = forwardRef(
-  ({ as: Component = "button", className, ...rest }, ref) => (
-    <Component
-      {...rest}
-      ref={ref}
-      className={cl("navdsi-header__button", className)}
-    />
-  )
-);
-
-export default HeaderButton;

@navikt/internal/react/src/header/HeaderDropdown/Menu.tsx

@@ -35,7 +35,6 @@ const HeaderDropdownMenu = forwardRef(({ className, ...rest }, ref) => {
   );
 }) as HeaderDropdownMenuType;
 
-HeaderDropdownMenu.List = DropdownMenu.List;
 HeaderDropdownMenu.Item = DropdownMenu.Item;
 
 export default HeaderDropdownMenu;

@navikt/internal/react/src/header/stories/header.stories.tsx

@@ -50,20 +50,18 @@ export const All = () => (
           />
         </Header.Dropdown.Button>
         <Header.Dropdown.Menu>
-          <Header.Dropdown.Menu.List>
-            <Header.Dropdown.Menu.Item>
-              <span>A.Inntekt</span>
-              <ExternalLink style={{ fontSize: "0.875rem" }} />
-            </Header.Dropdown.Menu.Item>
-            <Header.Dropdown.Menu.Item>
-              <span>Aa-registeret</span>
-              <ExternalLink style={{ fontSize: "0.875rem" }} />
-            </Header.Dropdown.Menu.Item>
-            <Header.Dropdown.Menu.Item>
-              <span>Gosys</span>
-              <ExternalLink style={{ fontSize: "0.875rem" }} />
-            </Header.Dropdown.Menu.Item>
-          </Header.Dropdown.Menu.List>
+          <Header.Dropdown.Menu.Item>
+            <span>A.Inntekt</span>
+            <ExternalLink style={{ fontSize: "0.875rem" }} />
+          </Header.Dropdown.Menu.Item>
+          <Header.Dropdown.Menu.Item>
+            <span>Aa-registeret</span>
+            <ExternalLink style={{ fontSize: "0.875rem" }} />
+          </Header.Dropdown.Menu.Item>
+          <Header.Dropdown.Menu.Item>
+            <span>Gosys</span>
+            <ExternalLink style={{ fontSize: "0.875rem" }} />
+          </Header.Dropdown.Menu.Item>
         </Header.Dropdown.Menu>
       </Header.Dropdown>
       <Header.User name="Kong Harald" description="D123456" />
@@ -92,23 +90,21 @@ const Full = () => (
         />
       </Header.Dropdown.Button>
       <Header.Dropdown.Menu>
-        <BodyShort size="small" style={{ fontWeight: 600, marginBottom: 16 }}>
+        <Heading size="xsmall" as="div">
           Systemer og oppslagsverk
-        </BodyShort>
-        <Header.Dropdown.Menu.List>
-          <Header.Dropdown.Menu.Item>
-            <span>A.Inntekt</span>
-            <ExternalLink style={{ fontSize: "0.875rem" }} />
-          </Header.Dropdown.Menu.Item>
-          <Header.Dropdown.Menu.Item>
-            <span>Aa-registeret</span>
-            <ExternalLink style={{ fontSize: "0.875rem" }} />
-          </Header.Dropdown.Menu.Item>
-          <Header.Dropdown.Menu.Item>
-            <span>Gosys</span>
-            <ExternalLink style={{ fontSize: "0.875rem" }} />
-          </Header.Dropdown.Menu.Item>
-        </Header.Dropdown.Menu.List>
+        </Heading>
+        <Header.Dropdown.Menu.Item>
+          <span>A.Inntekt</span>
+          <ExternalLink style={{ fontSize: "0.875rem" }} />
+        </Header.Dropdown.Menu.Item>
+        <Header.Dropdown.Menu.Item>
+          <span>Aa-registeret</span>
+          <ExternalLink style={{ fontSize: "0.875rem" }} />
+        </Header.Dropdown.Menu.Item>
+        <Header.Dropdown.Menu.Item>
+          <span>Gosys</span>
+          <ExternalLink style={{ fontSize: "0.875rem" }} />
+        </Header.Dropdown.Menu.Item>
       </Header.Dropdown.Menu>
     </Header.Dropdown>
     <Header.Dropdown>
@@ -117,11 +113,9 @@ const Full = () => (
         description="Enhet: Skien"
       />
       <Header.Dropdown.Menu>
-        <Header.Dropdown.Menu.List>
-          <Header.Dropdown.Menu.Item onClick={() => console.log("logg ut")}>
-            Logg ut
-          </Header.Dropdown.Menu.Item>
-        </Header.Dropdown.Menu.List>
+        <Header.Dropdown.Menu.Item onClick={() => console.log("logg ut")}>
+          Logg ut
+        </Header.Dropdown.Menu.Item>
       </Header.Dropdown.Menu>
     </Header.Dropdown>
   </Header>
@@ -138,20 +132,22 @@ const Initials = () => (
         <Expand />
       </Header.Dropdown.Button>
       <Header.Dropdown.Menu>
-        <div style={{ marginBottom: "var(--navds-spacing-4)" }}>
-          <BodyLong size="small">Kong Harald 16px</BodyLong>
-          <Detail size="small">Ident nr 14px</Detail>
-          <Detail size="small">Enhet: Skien</Detail>
+        <div>
+          <BodyLong size="small" as="div">
+            Kong Harald 16px
+          </BodyLong>
+          <Detail size="small" as="div">
+            <div>Ident nr 14px</div>
+            <div>Enhet: Skien</div>
+          </Detail>
         </div>
         <Divider />
-        <Header.Dropdown.Menu.List>
-          <Header.Dropdown.Menu.Item as="a" href="/#settings">
-            Innstillinger
-          </Header.Dropdown.Menu.Item>
-          <Header.Dropdown.Menu.Item onClick={() => console.log("logg ut")}>
-            Logg ut
-          </Header.Dropdown.Menu.Item>
-        </Header.Dropdown.Menu.List>
+        <Header.Dropdown.Menu.Item as="a" href="/#settings">
+          Innstillinger
+        </Header.Dropdown.Menu.Item>
+        <Header.Dropdown.Menu.Item onClick={() => console.log("logg ut")}>
+          Logg ut
+        </Header.Dropdown.Menu.Item>
       </Header.Dropdown.Menu>
     </Header.Dropdown>
   </Header>