@navikt/ds-react 0.7.4 → 0.8.0

package/src/accordion-menu/AccordionMenu.tsx

@@ -1,11 +1,23 @@
-import React, { forwardRef, HTMLAttributes } from "react";
+import React, { forwardRef } from "react";
 import cl from "classnames";
 import MenuItems from "./MenuItems";
+import Collapsable, {
+  AccordionMenuCollapsableType,
+} from "./AccordionMenuCollapsable";
+import Item, { AccordionMenuItemType } from "./AccordionMenuItem";
 
-export interface AccordionMenuProps extends HTMLAttributes<HTMLElement> {
+export interface AccordionMenuProps extends React.HTMLAttributes<HTMLElement> {
   children: React.ReactNode;
 }
 
+interface AccordionMenuComponent
+  extends React.ForwardRefExoticComponent<
+    AccordionMenuProps & React.RefAttributes<HTMLElement>
+  > {
+  Collapsable: AccordionMenuCollapsableType;
+  Item: AccordionMenuItemType;
+}
+
 const AccordionMenu = forwardRef<HTMLElement, AccordionMenuProps>(
   ({ children, className, ...rest }, ref) => {
     return (
@@ -19,6 +31,9 @@ const AccordionMenu = forwardRef<HTMLElement, AccordionMenuProps>(
       </nav>
     );
   }
-);
+) as AccordionMenuComponent;
+
+AccordionMenu.Collapsable = Collapsable;
+AccordionMenu.Item = Item;
 
 export default AccordionMenu;

package/src/accordion-menu/AccordionMenuCollapsable.tsx

@@ -10,35 +10,38 @@ export interface AccordionMenuCollapsableProps
   children: React.ReactNode;
 }
 
-const AccordionMenuCollapsable = forwardRef<
-  HTMLDivElement,
-  AccordionMenuCollapsableProps
->(({ children, defaultOpen = false, title, className, ...rest }, ref) => {
-  const [isOpen, setIsOpen] = useState(defaultOpen);
+export type AccordionMenuCollapsableType = React.ForwardRefExoticComponent<
+  AccordionMenuCollapsableProps & React.RefAttributes<HTMLDivElement>
+>;
 
-  return (
-    <div
-      ref={ref}
-      className={cl("navds-accordion-menu-collapsable", className, {
-        "navds-accordion-menu-collapsable--open": isOpen,
-      })}
-      {...rest}
-    >
-      <button
-        onClick={() => setIsOpen(!isOpen)}
-        className="navds-accordion-menu-collapsable__button"
+const Collapsable: AccordionMenuCollapsableType = forwardRef(
+  ({ children, defaultOpen = false, title, className, ...rest }, ref) => {
+    const [isOpen, setIsOpen] = useState(defaultOpen);
+
+    return (
+      <div
+        ref={ref}
+        className={cl("navds-accordion-menu-collapsable", className, {
+          "navds-accordion-menu-collapsable--open": isOpen,
+        })}
+        {...rest}
       >
-        {title}
-        <Expand
-          role="img"
-          focusable="false"
-          aria-label={isOpen ? "Pil peker opp" : "Pil peker ned"}
-          className="navds-accordion-menu-collapsable__expand-icon"
-        />
-      </button>
-      {isOpen && <MenuItems>{children}</MenuItems>}
-    </div>
-  );
-});
+        <button
+          onClick={() => setIsOpen(!isOpen)}
+          className="navds-accordion-menu-collapsable__button"
+        >
+          {title}
+          <Expand
+            role="img"
+            focusable="false"
+            aria-label={isOpen ? "Pil peker opp" : "Pil peker ned"}
+            className="navds-accordion-menu-collapsable__expand-icon"
+          />
+        </button>
+        {isOpen && <MenuItems>{children}</MenuItems>}
+      </div>
+    );
+  }
+);
 
-export default AccordionMenuCollapsable;
+export default Collapsable;

package/src/accordion-menu/AccordionMenuItem.tsx

@@ -1,26 +1,25 @@
 import React, { forwardRef } from "react";
-import { OverridableComponent } from "../util";
+import { OverridableComponent } from "..";
 import cl from "classnames";
 
-export type AccordionMenuItemType = OverridableComponent<AccordionMenuItemProps>;
-
-export interface AccordionMenuItemProps {
-  props: {
-    children: React.ReactNode;
-    active?: boolean;
-  } & React.HTMLAttributes<HTMLAnchorElement>;
-  defaultComponent: "a";
+export interface AccordionMenuItemProps
+  extends React.AnchorHTMLAttributes<HTMLAnchorElement> {
+  children: React.ReactNode;
+  /**
+   * Sets active styling if true
+   * @default false
+   */
+  active?: boolean;
 }
 
-const AccordionMenuItem: AccordionMenuItemType = forwardRef(
+export type AccordionMenuItemType = OverridableComponent<
+  AccordionMenuItemProps,
+  HTMLAnchorElement
+>;
+
+const Item: AccordionMenuItemType = forwardRef(
   (
-    {
-      children,
-      component: Component = "a",
-      active = false,
-      className,
-      ...rest
-    },
+    { children, as: Component = "a", active = false, className, ...rest },
     ref
   ) => {
     return (
@@ -37,4 +36,4 @@ const AccordionMenuItem: AccordionMenuItemType = forwardRef(
   }
 );
 
-export default AccordionMenuItem;
+export default Item;

package/src/accordion-menu/index.ts

@@ -1,6 +1,3 @@
-export { default as AccordionMenu } from "./AccordionMenu";
-export { default as AccordionMenuCollapsable } from "./AccordionMenuCollapsable";
-export {
-  default as AccordionMenuItem,
-  AccordionMenuItemType,
-} from "./AccordionMenuItem";
+export { default as AccordionMenu, AccordionMenuProps } from "./AccordionMenu";
+export { AccordionMenuCollapsableProps } from "./AccordionMenuCollapsable";
+export { AccordionMenuItemProps } from "./AccordionMenuItem";

package/src/accordion-menu/stories/accordion-menu.stories.mdx

@@ -1,9 +1,5 @@
 import { Meta, Canvas } from "@storybook/addon-docs";
-import {
-  AccordionMenu,
-  AccordionMenuItem,
-  AccordionMenuCollapsable,
-} from "../../index";
+import { AccordionMenu } from "../../index";
 
 <Meta title="ds-react/accordion-menu/intro" />
 
@@ -11,59 +7,59 @@ import {
 
 ```jsx
 <AccordionMenu>
-  <AccordionMenuItem href="#leo">Leo</AccordionMenuItem>
-  <AccordionMenuCollapsable title="Proin">
-    <AccordionMenuItem href="#nulla" active>
+  <AccordionMenu.item href="#leo">Leo</AccordionMenu.item>
+  <AccordionMenu.Collapsable title="Proin">
+    <AccordionMenu.item href="#nulla" active>
       Nulla
-    </AccordionMenuItem>
-    <AccordionMenuItem href="#luctus">Luctus</AccordionMenuItem>
-  </AccordionMenuCollapsable>
-  <AccordionMenuCollapsable title="Accumsan">
-    <AccordionMenuItem href="#justo" aria-current="page">
+    </AccordionMenu.item>
+    <AccordionMenu.item href="#luctus">Luctus</AccordionMenu.item>
+  </AccordionMenu.Collapsable>
+  <AccordionMenu.Collapsable title="Accumsan">
+    <AccordionMenu.item href="#justo" aria-current="page">
       Justo
-    </AccordionMenuItem>
-    <AccordionMenuCollapsable title="Proin">
-      <AccordionMenuItem href="#nulla">Nulla</AccordionMenuItem>
-      <AccordionMenuItem href="#luctus">Luctus</AccordionMenuItem>
-    </AccordionMenuCollapsable>
-  </AccordionMenuCollapsable>
+    </AccordionMenu.item>
+    <AccordionMenu.Collapsable title="Proin">
+      <AccordionMenu.item href="#nulla">Nulla</AccordionMenu.item>
+      <AccordionMenu.item href="#luctus">Luctus</AccordionMenu.item>
+    </AccordionMenu.Collapsable>
+  </AccordionMenu.Collapsable>
 </AccordionMenu>
 ```
 
 <Canvas>
   <AccordionMenu>
-    <AccordionMenuItem href="#leo">Leo</AccordionMenuItem>
-    <AccordionMenuCollapsable title="Proin">
-      <AccordionMenuItem href="#nulla" active>
+    <AccordionMenu.Item href="#leo">Leo</AccordionMenu.Item>
+    <AccordionMenu.Collapsable title="Proin">
+      <AccordionMenu.Item href="#nulla" active>
         Nulla
-      </AccordionMenuItem>
-      <AccordionMenuItem href="#luctus">Luctus</AccordionMenuItem>
-    </AccordionMenuCollapsable>
-    <AccordionMenuCollapsable title="Accumsan">
-      <AccordionMenuItem href="#justo" aria-current="page">
+      </AccordionMenu.Item>
+      <AccordionMenu.Item href="#luctus">Luctus</AccordionMenu.Item>
+    </AccordionMenu.Collapsable>
+    <AccordionMenu.Collapsable title="Accumsan">
+      <AccordionMenu.Item href="#justo" aria-current="page">
         Justo
-      </AccordionMenuItem>
-      <AccordionMenuCollapsable title="Proin">
-        <AccordionMenuItem href="#nulla">Nulla</AccordionMenuItem>
-        <AccordionMenuItem href="#luctus">Luctus</AccordionMenuItem>
-      </AccordionMenuCollapsable>
-    </AccordionMenuCollapsable>
+      </AccordionMenu.Item>
+      <AccordionMenu.Collapsable title="Proin">
+        <AccordionMenu.Item href="#nulla">Nulla</AccordionMenu.Item>
+        <AccordionMenu.Item href="#luctus">Luctus</AccordionMenu.Item>
+      </AccordionMenu.Collapsable>
+    </AccordionMenu.Collapsable>
   </AccordionMenu>
 </Canvas>
 
-Accordion-menu støtter opp til maks to-nivårer av `AccordionMenuCollapsable` akkurat nå.
+Accordion-menu støtter opp til maks to-nivårer av `AccordionMenu.Collapsable` akkurat nå.
 
-`AccordionMenuItem` er implementert med `OverridableComponent`, noe som
+`AccordionMenu.Item` er implementert med `OverridableComponent`, noe som
 gjør at man kan ta i bruk eks react-router slik:
 
 ```jsx
-<Item
-  component={NavLink}
+<AccordionMenu.item
+  as={NavLink}
   activeClassName="navds-accordion-menu-item--active"
   to="/1"
 >
   Lenketekst
-</Item>
+</AccordionMenu.item>
 ```
 
 Her er `NavLink` fra `react-router-dom` brukt, og man får da

package/src/accordion-menu/stories/accordion-menu.stories.tsx

@@ -1,29 +1,10 @@
 import * as React from "react";
-import {
-  AccordionMenu,
-  AccordionMenuItem as Item,
-  AccordionMenuCollapsable as Collapsable,
-} from "../index";
+import { AccordionMenu } from "../index";
 import { NavLink, HashRouter as Router } from "react-router-dom";
 
 export default {
   title: "ds-react/accordion-menu",
   component: { AccordionMenu },
-  parameters: {
-    backgrounds: {
-      default: "light",
-      values: [
-        {
-          name: "light",
-          value: "#F1F1F1",
-        },
-        {
-          name: "white",
-          value: "#fff",
-        },
-      ],
-    },
-  },
 };
 
 export const All = () => (
@@ -34,113 +15,113 @@ export const All = () => (
     }}
   >
     <AccordionMenu>
-      <Item href="#leo">Leo</Item>
-      <Collapsable title="Proin">
-        <Item href="#nulla" active>
+      <AccordionMenu.Item href="#leo">Leo</AccordionMenu.Item>
+      <AccordionMenu.Collapsable title="Proin">
+        <AccordionMenu.Item href="#nulla" active>
           Nulla
-        </Item>
-        <Item href="#luctus">Luctus</Item>
-      </Collapsable>
-      <Collapsable title="Accumsan">
-        <Item href="#justo" aria-current="page">
+        </AccordionMenu.Item>
+        <AccordionMenu.Item href="#luctus">Luctus</AccordionMenu.Item>
+      </AccordionMenu.Collapsable>
+      <AccordionMenu.Collapsable title="Accumsan">
+        <AccordionMenu.Item href="#justo" aria-current="page">
           Justo
-        </Item>
-        <Item href="#pariatur" active aria-current="page">
+        </AccordionMenu.Item>
+        <AccordionMenu.Item href="#pariatur" active aria-current="page">
           Pariatur
-        </Item>
-        <Collapsable title="Proin">
-          <Item href="#nulla" active>
+        </AccordionMenu.Item>
+        <AccordionMenu.Collapsable title="Proin">
+          <AccordionMenu.Item href="#nulla" active>
             Nulla
-          </Item>
-          <Item href="#luctus">Luctus</Item>
-        </Collapsable>
-      </Collapsable>
-      <Item href="#justo" active>
+          </AccordionMenu.Item>
+          <AccordionMenu.Item href="#luctus">Luctus</AccordionMenu.Item>
+        </AccordionMenu.Collapsable>
+      </AccordionMenu.Collapsable>
+      <AccordionMenu.Item href="#justo" active>
         Justo
-      </Item>
-      <Item href="#pariatur">Pariatur</Item>
+      </AccordionMenu.Item>
+      <AccordionMenu.Item href="#pariatur">Pariatur</AccordionMenu.Item>
     </AccordionMenu>
   </div>
 );
 
 export const ReactRouter = () => (
   <AccordionMenu>
-    <Collapsable title="Nivå 1 – 3 rems høy">
-      <Item
-        component={NavLink}
+    <AccordionMenu.Collapsable title="Nivå 1 – 3 rems høy">
+      <AccordionMenu.Item
+        as={NavLink}
         activeClassName="navds-accordion-menu-item--active"
         to="/1"
       >
         Nivå 2 innrykk 2 rems
-      </Item>
-      <Item
-        component={NavLink}
+      </AccordionMenu.Item>
+      <AccordionMenu.Item
+        as={NavLink}
         activeClassName="navds-accordion-menu-item--active"
         to="/2"
       >
         Subtitle 3
-      </Item>
-    </Collapsable>
-    <Collapsable title="Skjema og søknad">
-      <Collapsable title="Satser">
-        <Item
-          component={NavLink}
+      </AccordionMenu.Item>
+    </AccordionMenu.Collapsable>
+    <AccordionMenu.Collapsable title="Skjema og søknad">
+      <AccordionMenu.Collapsable title="Satser">
+        <AccordionMenu.Item
+          as={NavLink}
           activeClassName="navds-accordion-menu-item--active"
           to="/3"
         >
           Nivå 3 – 3 rems innrykk Har du rett til dagpenger når du mottar annen
           økonomisk støtte fra NAV?
-        </Item>
-      </Collapsable>
-      <Item
-        component={NavLink}
+        </AccordionMenu.Item>
+      </AccordionMenu.Collapsable>
+      <AccordionMenu.Item
+        as={NavLink}
         activeClassName="navds-accordion-menu-item--active"
         to="/4"
       >
         Subtitle 2
-      </Item>
-      <Item
-        component={NavLink}
+      </AccordionMenu.Item>
+      <AccordionMenu.Item
+        as={NavLink}
         activeClassName="navds-accordion-menu-item--active"
         to="/5"
       >
         Subtitle 3
-      </Item>
-    </Collapsable>
-    <Collapsable title="Sakbehandlingstider">
-      <Collapsable title="Subtitle 4 Lang tittel på andre nivå lorem ipsum">
-        <Item
-          component={NavLink}
+      </AccordionMenu.Item>
+    </AccordionMenu.Collapsable>
+    <AccordionMenu.Collapsable title="Sakbehandlingstider">
+      <AccordionMenu.Collapsable title="Subtitle 4 Lang tittel på andre nivå lorem ipsum">
+        <AccordionMenu.Item
+          as={NavLink}
           activeClassName="navds-accordion-menu-item--active"
           to="/6"
         >
           Subtitle 5
-        </Item>
-      </Collapsable>
-    </Collapsable>
-    <Item
-      component={NavLink}
+        </AccordionMenu.Item>
+      </AccordionMenu.Collapsable>
+    </AccordionMenu.Collapsable>
+    <AccordionMenu.Item
+      as={NavLink}
       activeClassName="navds-accordion-menu-item--active"
       to="/7"
     >
       Internasjonalt
-    </Item>
-    <Collapsable title="Meld fra om endringer lang tittel på første nivå">
-      <Item
-        component={NavLink}
+    </AccordionMenu.Item>
+    <AccordionMenu.Collapsable title="Meld fra om endringer lang tittel på første nivå">
+      <AccordionMenu.Item
+        as={NavLink}
         activeClassName="navds-accordion-menu-item--active"
         to="/8"
       >
         Subtitle 6
-      </Item>
-    </Collapsable>
-    <Item
-      component={NavLink}
+      </AccordionMenu.Item>
+    </AccordionMenu.Collapsable>
+    <AccordionMenu.Item
+      as={NavLink}
       activeClassName="navds-accordion-menu-item--active"
       to="/9"
     >
       Nivå 1
-    </Item>
+    </AccordionMenu.Item>
   </AccordionMenu>
 );