@navikt/ds-react 0.7.4 → 0.8.0

package/src/accordion/AccordionContent.tsx

@@ -0,0 +1,59 @@
+import cl from "classnames";
+import React, { forwardRef, useContext } from "react";
+import { Collapse, UnmountClosed } from "react-collapse";
+import { useClientLayoutEffect, useId } from "../util";
+import { AccordionItemContext } from "./AccordionItem";
+
+export interface AccordionContentProps
+  extends React.HTMLAttributes<HTMLDivElement> {
+  /**
+   * Accordion panel content
+   */
+  children: React.ReactNode;
+}
+
+export type AccordionContentType = React.ForwardRefExoticComponent<
+  AccordionContentProps & React.RefAttributes<HTMLDivElement>
+>;
+
+const AccordionContent: AccordionContentType = forwardRef(
+  ({ children, className, id, ...rest }, ref) => {
+    const context = useContext(AccordionItemContext);
+
+    const newId = useId(id);
+    const setContentId = context && context.setContentId;
+
+    useClientLayoutEffect(() => {
+      setContentId && setContentId(id ? newId : `accordionContent-${newId}`);
+    }, [setContentId, newId]);
+
+    if (context === null) {
+      console.error(
+        "<Accordion.Content> has to be used within an <Accordion.Item>"
+      );
+      return null;
+    }
+
+    const CollapseComponent = context.renderContentWhenClosed
+      ? Collapse
+      : UnmountClosed;
+
+    return (
+      <div
+        ref={ref}
+        id={context.contentId}
+        role="region"
+        aria-labelledby={context.buttonId}
+        {...rest}
+      >
+        <CollapseComponent isOpened={context.open}>
+          <div className={cl("navds-accordion__content", className)}>
+            {children}
+          </div>
+        </CollapseComponent>
+      </div>
+    );
+  }
+);
+
+export default AccordionContent;

package/src/accordion/AccordionHeader.tsx

@@ -0,0 +1,84 @@
+import { Expand, ExpandFilled } from "@navikt/ds-icons";
+import cl from "classnames";
+import React, { forwardRef, useContext } from "react";
+import { AccordionItemContext } from "./AccordionItem";
+import { useClientLayoutEffect, useId } from "..";
+
+export interface AccordionHeaderProps
+  extends React.ButtonHTMLAttributes<HTMLButtonElement> {
+  /**
+   * Button content
+   */
+  children: React.ReactNode;
+}
+
+export type AccordionHeaderType = React.ForwardRefExoticComponent<
+  AccordionHeaderProps & React.RefAttributes<HTMLButtonElement>
+>;
+
+const AccordionHeader: AccordionHeaderType = forwardRef(
+  ({ children, className, id, onClick, ...rest }, ref) => {
+    const context = useContext(AccordionItemContext);
+    const newId = useId(id);
+
+    const setButtonId = context && context.setButtonId;
+
+    useClientLayoutEffect(() => {
+      setButtonId && setButtonId(id ? newId : `accordionContent-${newId}`);
+    }, [setButtonId, newId]);
+
+    if (context === null) {
+      console.error(
+        "<Accordion.Header> has to be used within an <Accordion.Item>"
+      );
+      return null;
+    }
+
+    const handleClick = (
+      e: React.MouseEvent<HTMLButtonElement, MouseEvent>
+    ) => {
+      context.toggleOpen();
+      onClick && onClick(e);
+    };
+
+    return (
+      <button
+        ref={ref}
+        id={context.buttonId}
+        className={cl(
+          "navds-accordion__header",
+          className,
+          "navds-heading",
+          "navds-heading--small"
+        )}
+        onClick={handleClick}
+        aria-controls={context.contentId}
+        {...rest}
+      >
+        {children}
+        <Expand
+          focusable="false"
+          role="img"
+          aria-label={context.open ? "Lukk panel ikon" : "Åpne panel ikon"}
+          className={cl("navds-accordion__expand-icon", {
+            "navds-accordion__expand-icon--flip": context.open,
+          })}
+        />
+        <ExpandFilled
+          focusable="false"
+          role="img"
+          aria-label={context.open ? "Lukk panel ikon" : "Åpne panel ikon"}
+          className={cl(
+            "navds-accordion__expand-icon",
+            "navds-accordion__expand-icon--filled",
+            {
+              "navds-accordion__expand-icon--flip": context.open,
+            }
+          )}
+        />
+      </button>
+    );
+  }
+);
+
+export default AccordionHeader;

package/src/accordion/AccordionItem.tsx

@@ -0,0 +1,93 @@
+import cl from "classnames";
+import React, { createContext, forwardRef, useState } from "react";
+
+export interface AccordionItemProps
+  extends React.HTMLAttributes<HTMLDivElement> {
+  /**
+   * Content inside accordion item
+   */
+  children: React.ReactNode;
+  /**
+   * Opens component if 'true', closes if 'false'
+   * Using this props removes automatic control of open-state
+   */
+  open?: boolean;
+  /**
+   * Defaults the accordion to opened state
+   * @default false
+   */
+  defaultOpen?: boolean;
+  /**
+   * Removes content-element from dom when closed
+   * @default false
+   */
+  renderContentWhenClosed?: boolean;
+}
+
+export type AccordionItemType = React.ForwardRefExoticComponent<
+  AccordionItemProps & React.RefAttributes<HTMLDivElement>
+>;
+
+export interface AccordionItemContextProps {
+  open: boolean;
+  toggleOpen: () => void;
+  setButtonId: (id: string) => void;
+  setContentId: (id: string) => void;
+  buttonId: string;
+  contentId: string;
+  renderContentWhenClosed: boolean;
+}
+
+export const AccordionItemContext = createContext<AccordionItemContextProps | null>(
+  null
+);
+
+const AccordionItem: AccordionItemType = forwardRef(
+  (
+    {
+      children,
+      className,
+      open,
+      defaultOpen = false,
+      renderContentWhenClosed = false,
+      onClick,
+      id,
+      ...rest
+    },
+    ref
+  ) => {
+    const [internalOpen, setInternalOpen] = useState<boolean>(defaultOpen);
+    const [buttonId, setButtonId] = useState("");
+    const [contentId, setContentId] = useState("");
+
+    return (
+      <div
+        className={cl("navds-accordion__item", className, {
+          "navds-accordion__item--open": open ?? internalOpen,
+        })}
+        ref={ref}
+        {...rest}
+      >
+        <AccordionItemContext.Provider
+          value={{
+            open: open ?? internalOpen,
+            toggleOpen: () => {
+              if (open === undefined) {
+                setInternalOpen((iOpen) => !iOpen);
+              }
+            },
+            renderContentWhenClosed,
+            setButtonId,
+            buttonId,
+            setContentId,
+            contentId,
+          }}
+        >
+          {children}
+        </AccordionItemContext.Provider>
+      </div>
+    );
+  }
+);
+
+export default AccordionItem;

package/src/accordion/stories/accordion.stories.mdx

@@ -1,4 +1,4 @@
-import { Meta, Canvas } from "@storybook/addon-docs";
+import { Meta, Canvas, Props } from "@storybook/addon-docs";
 import { Accordion } from "../../index";
 
 <Meta title="ds-react/accordion/intro" />
@@ -6,28 +6,67 @@ import { Accordion } from "../../index";
 # Hvordan ta i bruk Accordion
 
 ```jsx
-<Accordion heading="Qui id id ad cupidatat ullamco.">
-  Et anim nostrud reprehenderit duis eu tempor et irure proident. Eu ea occaecat
-  aliqua commodo sunt. Sit cupidatat ad id occaecat exercitation ipsum laboris
-  duis velit consequat adipisicing do amet aute. Aliquip culpa minim commodo
-  laborum eiusmod eu magna elit veniam ullamco ullamco minim.
+<Accordion>
+  <Accordion.Item>
+    <Accordion.Header>Accordion header text</Accordion.Header>
+    <Accordion.Content>
+      Magna aliquip aliquip fugiat nostrud nostrud velit pariatur veniam officia
+      laboris voluptate officia pariatur.Lorem est ex anim velit occaecat nisi
+      qui nostrud sit.
+    </Accordion.Content>
+  </Accordion.Item>
+  <Accordion.Item>
+    <Accordion.Header>Aliquip amet irure consectetur occaecat</Accordion.Header>
+    <Accordion.Content>
+      Cupidatat aliqua eu ea et anim excepteur. Labore aliquip dolore laborum
+      consequat. Reprehenderit ad velit quis eiusmod ex sint aliquip do deserunt
+      amet exercitation velit Lorem.
+    </Accordion.Content>
+  </Accordion.Item>
 </Accordion>
 ```
 
 <Canvas>
-  <Accordion heading="Qui id id ad cupidatat ullamco.">
-    Et anim nostrud reprehenderit duis eu tempor et irure proident. Eu ea
-    occaecat aliqua commodo sunt. Sit cupidatat ad id occaecat exercitation
-    ipsum laboris duis velit consequat adipisicing do amet aute. Aliquip culpa
-    minim commodo laborum eiusmod eu magna elit veniam ullamco ullamco minim.
+  <Accordion>
+    <Accordion.Item>
+      <Accordion.Header>Accordion header text</Accordion.Header>
+      <Accordion.Content>
+        Magna aliquip aliquip fugiat nostrud nostrud velit pariatur veniam
+        officia laboris voluptate officia pariatur.Lorem est ex anim velit
+        occaecat nisi qui nostrud sit.
+      </Accordion.Content>
+    </Accordion.Item>
+    <Accordion.Item>
+      <Accordion.Header>
+        Aliquip amet irure consectetur occaecat
+      </Accordion.Header>
+      <Accordion.Content>
+        Cupidatat aliqua eu ea et anim excepteur. Labore aliquip dolore laborum
+        consequat. Reprehenderit ad velit quis eiusmod ex sint aliquip do
+        deserunt amet exercitation velit Lorem.
+      </Accordion.Content>
+    </Accordion.Item>
   </Accordion>
 </Canvas>
 
-Accordion-komponeten styrer selv open/closed state, men om man ønsker kan man selv overskrive denne med
-`open`-prop + `onClick`-prop.
+## Controlled state
 
-Note: Hvis man tar i bruk `onClick`, så tolker komponeten det slik at du ønsker å styre state selv, så
-man må da også bruke `open`-prop
+Accordion-komponeten styrer selv open-state, men om man ønsker kan man selv overskrive denne med
+`open`-prop + `onClick`-prop slik det er gjort på eksemplet.
 
-`renderContentWhenClosed`-prop bestemmer om innholdet (children) skal beholdes i dom-strukturen mens
+```jsx
+<Accordion>
+  <Accordion.Item open={open}>
+    <Accordion.Header onClick={(open) => setOpen(!open)}>
+      Accordion header text
+    </Accordion.Header>
+    <Accordion.Content>
+      Magna aliquip aliquip fugiat nostrud nostrud velit pariatur veniam officia
+      laboris voluptate officia pariatur.Lorem est ex anim velit
+    </Accordion.Content>
+  </Accordion.Item>
+</Accordion>
+```
+
+`renderContentWhenClosed`-prop på `Accordion.Item` bestemmer om innholdet (children) skal beholdes i dom-strukturen mens
 Accordion er lukket. Defaulter til `false`.

package/src/accordion/stories/accordion.stories.tsx

@@ -1,9 +1,17 @@
 import React, { useState } from "react";
+import AccordionContent from "../AccordionContent";
+import AccordionHeader from "../AccordionHeader";
+import AccordionItem from "../AccordionItem";
 import { Accordion } from "../index";
 
 export default {
   title: "ds-react/accordion",
   component: Accordion,
+  subcomponents: {
+    AccordionItem,
+    AccordionContent,
+    AccordionHeader,
+  },
 };
 
 export const All = () => {
@@ -11,49 +19,74 @@ export const All = () => {
 
   return (
     <>
-      <h1>Accordion</h1>
-      <Accordion heading="tittel" open={open} onClick={(e) => setOpen(!open)}>
-        Eu magna fugiat officia sit ullamco reprehenderit reprehenderit officia.
-        Culpa fugiat irure deserunt irure enim adipisicing qui id. Pariatur
-        commodo dolore consequat nulla cupidatat commodo nisi sunt. Ad proident
-        occaecat cillum eu Lorem proident sunt anim officia voluptate. Veniam
-        ullamco magna elit amet mollit exercitation magna quis ad occaecat in
-        elit. Labore ad id pariatur consequat consectetur ullamco culpa dolor
-        dolor. Sunt irure eiusmod velit duis excepteur veniam consectetur eu
-        occaecat reprehenderit qui anim dolore. Ea voluptate dolore proident
-        esse aliqua amet magna pariatur incididunt ea excepteur. Aliquip magna
-        ut ipsum veniam eu laborum id commodo.
-      </Accordion>
-      <h1>Open</h1>
-      <Accordion heading="tittel" open={true} onClick={(e) => null}>
-        Eu magna fugiat officia sit ullamco reprehenderit reprehenderit officia.
-        Culpa fugiat irure deserunt irure enim adipisicing qui id. Pariatur
-        commodo dolore consequat nulla cupidatat commodo nisi sunt. Ad proident
-        occaecat cillum eu Lorem proident sunt anim officia voluptate. Veniam
-        ullamco magna elit amet mollit exercitation magna quis ad occaecat in
-        elit. Labore ad id pariatur consequat consectetur ullamco culpa dolor
-        dolor. Sunt irure eiusmod velit duis excepteur veniam consectetur eu
-        occaecat reprehenderit qui anim dolore. Ea voluptate dolore proident
-        esse aliqua amet magna pariatur incididunt ea excepteur. Aliquip magna
-        ut ipsum veniam eu laborum id commodo.
-      </Accordion>
-      <h1>Long heading</h1>
-      <Accordion
-        heading="Consequat incididunt aliquip aliquip fugiat anim cupidatat eu do ipsum pariatur."
-        open={open}
-        onClick={(e) => setOpen(!open)}
-      >
-        Eu magna fugiat officia sit ullamco reprehenderit reprehenderit officia.
-        Culpa fugiat irure deserunt irure enim adipisicing qui id. Pariatur
-        commodo dolore consequat nulla cupidatat commodo nisi sunt. Ad proident
-        occaecat cillum eu Lorem proident sunt anim officia voluptate. Veniam
-        ullamco magna elit amet mollit exercitation magna quis ad occaecat in
-        elit. Labore ad id pariatur consequat consectetur ullamco culpa dolor
-        dolor. Sunt irure eiusmod velit duis excepteur veniam consectetur eu
-        occaecat reprehenderit qui anim dolore. Ea voluptate dolore proident
-        esse aliqua amet magna pariatur incididunt ea excepteur. Aliquip magna
-        ut ipsum veniam eu laborum id commodo.
-      </Accordion>
+      <div>
+        <h1>Accordion</h1>
+        <h2>Controlled</h2>
+        <Accordion>
+          <Accordion.Item open={open}>
+            <Accordion.Header onClick={() => setOpen(!open)}>
+              Accordion header text
+            </Accordion.Header>
+            <Accordion.Content>
+              Magna aliquip aliquip fugiat nostrud nostrud velit pariatur veniam
+              officia laboris voluptate officia pariatur.Lorem est ex anim velit
+              occaecat nisi qui nostrud sit consectetur consectetur officia
+              nostrud ullamco. Est ex duis proident nostrud elit qui laborum
+              anim minim eu eiusmod. Veniam in nostrud sunt tempor velit
+              incididunt sint ex dolor qui velit id eu. Deserunt magna sunt
+              velit in. Est exercitation id cillum qui do. Minim adipisicing
+              nostrud commodo proident occaecat aliquip nulla anim proident
+              reprehenderit. Magna ipsum officia veniam cupidatat duis veniam
+              dolore reprehenderit mollit velit.Ut consequat commodo minim
+              occaecat id pariatur. Nisi enim tempor laborum commodo. Tempor sit
+              quis nostrud eu cupidatat sunt commodo reprehenderit irure
+              deserunt eiusmod ipsum. Exercitation quis commodo cillum eiusmod
+              eiusmod. Do laborum qui proident commodo adipisicing eiusmod id.
+            </Accordion.Content>
+          </Accordion.Item>
+        </Accordion>
+        <h2>Un-controlled</h2>
+        <Accordion>
+          <Accordion.Item>
+            <Accordion.Header>Accordion header text</Accordion.Header>
+            <Accordion.Content>
+              Magna aliquip aliquip fugiat nostrud nostrud velit pariatur veniam
+              officia laboris voluptate officia pariatur.Lorem est ex anim velit
+              occaecat nisi qui nostrud sit consectetur consectetur officia
+              nostrud ullamco. Est ex duis proident nostrud elit qui laborum
+              anim minim eu eiusmod. Veniam in nostrud sunt tempor velit
+              incididunt sint ex dolor qui velit id eu. Deserunt magna sunt
+              velit in. Est exercitation id cillum qui do. Minim adipisicing
+              nostrud commodo proident occaecat aliquip nulla anim proident
+              reprehenderit. Magna ipsum officia veniam cupidatat duis veniam
+              dolore reprehenderit mollit velit.Ut consequat commodo minim
+              occaecat id pariatur. Nisi enim tempor laborum commodo. Tempor sit
+              quis nostrud eu cupidatat sunt commodo reprehenderit irure
+              deserunt eiusmod ipsum. Exercitation quis commodo cillum eiusmod
+              eiusmod. Do laborum qui proident commodo adipisicing eiusmod id.
+            </Accordion.Content>
+          </Accordion.Item>
+          <Accordion.Item>
+            <Accordion.Header>Accordion header text</Accordion.Header>
+            <Accordion.Content>
+              Magna aliquip aliquip fugiat nostrud nostrud velit pariatur veniam
+              officia laboris voluptate officia pariatur.Lorem est ex anim velit
+              occaecat nisi qui nostrud sit consectetur consectetur officia
+              nostrud ullamco. Est ex duis proident nostrud elit qui laborum
+              anim minim eu eiusmod. Veniam in nostrud sunt tempor velit
+              incididunt sint ex dolor qui velit id eu. Deserunt magna sunt
+              velit in. Est exercitation id cillum qui do. Minim adipisicing
+              nostrud commodo proident occaecat aliquip nulla anim proident
+              reprehenderit. Magna ipsum officia veniam cupidatat duis veniam
+              dolore reprehenderit mollit velit.Ut consequat commodo minim
+              occaecat id pariatur. Nisi enim tempor laborum commodo. Tempor sit
+              quis nostrud eu cupidatat sunt commodo reprehenderit irure
+              deserunt eiusmod ipsum. Exercitation quis commodo cillum eiusmod
+              eiusmod. Do laborum qui proident commodo adipisicing eiusmod id.
+            </Accordion.Content>
+          </Accordion.Item>
+        </Accordion>
+      </div>
     </>
   );
 };