@navikt/ds-react 0.7.4 → 0.8.0

package/src/modal/ModalContent.tsx

@@ -0,0 +1,26 @@
+import React, { forwardRef } from "react";
+import cl from "classnames";
+
+export interface ModalContentProps
+  extends React.HTMLAttributes<HTMLDivElement> {
+  /**
+   * Modal.Content content
+   */
+  children: React.ReactNode;
+}
+
+export type ModalContentType = React.ForwardRefExoticComponent<
+  ModalContentProps & React.RefAttributes<HTMLDivElement>
+>;
+
+const ModalContent: ModalContentType = forwardRef(
+  ({ className, ...rest }, ref) => (
+    <div
+      {...rest}
+      ref={ref}
+      className={cl("navds-modal__content", className)}
+    />
+  )
+);
+
+export default ModalContent;

package/src/modal/index.ts

@@ -1,2 +1,3 @@
 export { default as Modal } from "./Modal";
+export { ModalContentProps } from "./ModalContent";
 export * from "./Modal";

package/src/modal/stories/modal.stories.mdx

@@ -15,9 +15,18 @@ vil `onClose`-triggre og det er opp til systemet å håndtere det.
 
 ```jsx
 <Modal open={open} onClose={() => setOpen(false)}>
+  <Modal.Content>
+    <h2>Heading</h2>
+    <p>
+      Cupidatat irure ipsum veniam ad in esse. Voluptate do nulla amet
+      laboriselit sit dolor aliquip velit esse. Excepteur sint non minim nulla
+      excepteur labore non magna eu.
+    </p>
+  </Modal.Content>
+</Modal>
 ```
 
 ## shouldCloseOnOverlayClick
 
 Proppen `shouldCloseOnOverlayClick` toggler om `onClose` skal triggres
-når bruker trykker utenfor modalen (overlayet). Defaulter til true.
+når bruker trykker utenfor modalen (overlayet). Er default: true .

package/src/modal/stories/modal.stories.tsx

@@ -1,5 +1,5 @@
 import React, { useState } from "react";
-import { Modal } from "../index";
+import { Modal } from "../..";
 
 export default {
   title: "ds-react/modal",
@@ -16,17 +16,12 @@ export const All = () => {
     <>
       <button onClick={() => setOpen(true)}>Open modal</button>
       <Modal open={open} onClose={() => setOpen(false)}>
-        <h1>Header</h1>
-        <h2>subheader</h2>
-        <p>
-          Cupidatat irure ipsum veniam ad in esse. Voluptate do nulla amet
-          laboris ea ex aliquip. Dolore dolore reprehenderit sint esse commodo
-          aliqua cupidatat incididunt proident laborum qui. Officia fugiat non
-          anim cupidatat. Adipisicing ut aliqua cillum nulla elit. Mollit et id
-          duis cupidatat labore magna consectetur et veniam tempor. In minim
-          exercitation id irure velit sit dolor aliquip velit esse. Excepteur
-          sint non minim nulla excepteur labore non magna eu.
-        </p>
+        <Modal.Content>
+          <h1>Header</h1>
+          <h2>subheader</h2>
+          <p>Cupidatat irure ipsum veniam ad in esse.</p>
+          <p>Cillum tempor pariatur amet ut laborum Lorem enim enim.</p>
+        </Modal.Content>
       </Modal>
 
       <button onClick={() => setOpenTwo(true)}>
@@ -37,17 +32,19 @@ export const All = () => {
         open={openTwo}
         onClose={() => setOpenTwo(false)}
       >
-        <h1>Header</h1>
-        <h2>subheader</h2>
-        <p>
-          Cupidatat irure ipsum veniam ad in esse. Voluptate do nulla amet
-          laboris ea ex aliquip. Dolore dolore reprehenderit sint esse commodo
-          aliqua cupidatat incididunt proident laborum qui. Officia fugiat non
-          anim cupidatat. Adipisicing ut aliqua cillum nulla elit. Mollit et id
-          duis cupidatat labore magna consectetur et veniam tempor. In minim
-          exercitation id irure velit sit dolor aliquip velit esse. Excepteur
-          sint non minim nulla excepteur labore non magna eu.
-        </p>
+        <Modal.Content>
+          <h1>Header</h1>
+          <h2>subheader</h2>
+          <p>
+            Cupidatat irure ipsum veniam ad in esse. Voluptate do nulla amet
+            laboris ea ex aliquip. Dolore dolore reprehenderit sint esse commodo
+            aliqua cupidatat incididunt proident laborum qui. Officia fugiat non
+            anim cupidatat. Adipisicing ut aliqua cillum nulla elit. Mollit et
+            id duis cupidatat labore magna consectetur et veniam tempor. In
+            minim exercitation id irure velit sit dolor aliquip velit esse.
+            Excepteur sint non minim nulla excepteur labore non magna eu.
+          </p>
+        </Modal.Content>
       </Modal>
     </>
   );

package/src/page-header/PageHeader.tsx

@@ -0,0 +1,76 @@
+import React, { forwardRef, HTMLAttributes } from "react";
+import cl from "classnames";
+import { BodyShort, Heading } from "..";
+
+export interface PageHeaderProps extends HTMLAttributes<HTMLDivElement> {
+  /**
+   * PageHeader title
+   */
+  children: string;
+  /**
+   * Pictogram placed in PageHeader
+   */
+  illustration?: React.ReactNode;
+  /**
+   * Short text placed under title
+   */
+  description?: string;
+  /**
+   * Predefined variants for PageHeader
+   * @default "guide"
+   */
+  variant?: "situation" | "product" | "guide";
+  /**
+   * Decides how to align content
+   * @default "left"
+   */
+  align?: "left" | "center";
+}
+
+const PageHeader = forwardRef<HTMLDivElement, PageHeaderProps>(
+  (
+    {
+      children,
+      className,
+      illustration,
+      description,
+      variant = "guide",
+      align = "left",
+      ...rest
+    },
+    ref
+  ) => {
+    return (
+      <div
+        ref={ref}
+        className={cl(
+          "navds-page-header",
+          className,
+          `navds-page-header--${variant}`,
+          `navds-page-header--${align}`
+        )}
+        {...rest}
+      >
+        {illustration && (
+          <div className="navds-page-header__illustration">{illustration}</div>
+        )}
+        <div className="navds-page-header__wrapper">
+          <Heading
+            className="navds-page-header__title"
+            size="2xlarge"
+            level="1"
+          >
+            {children}
+          </Heading>
+          {description && (
+            <BodyShort className="navds-page-header__description">
+              {description}
+            </BodyShort>
+          )}
+        </div>
+      </div>
+    );
+  }
+);
+
+export default PageHeader;

package/src/page-header/index.ts

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

package/src/{header → page-header}/stories/header.stories.mdx

@@ -1,38 +1,38 @@
 import { Meta, Canvas } from "@storybook/addon-docs";
-import { Header } from "../../index";
+import { PageHeader } from "../index";
 import { illustrationPictogram } from "./pictogram";
 
-<Meta title="ds-react/header/intro" />
+<Meta title="ds-react/page-header/intro" />
 
-# Hvordan ta i bruk Header
+# Hvordan ta i bruk PageHeader
 
-Denne header-komponenten er utviklet i sammenheng med nye produktsider på NAV og
+Denne PageHeader-komponenten er utviklet i sammenheng med nye produktsider på NAV og
 vil sannsynligvis forgå en del endringer før de er ferdige.
 
 ```jsx
-<Header description="LABORIS AUTE DESERUNT ID AUTE OFFICIA SINT SUNT FUGIAT EX ET CUPIDATAT CONSEQUAT DOLORE.">
+<PageHeader description="LABORIS AUTE DESERUNT ID AUTE OFFICIA SINT SUNT FUGIAT EX ET CUPIDATAT CONSEQUAT DOLORE.">
   AUTE OFFICIA SINT SUNT FUGIAT
-</Header>
+</PageHeader>
 ```
 
 <Canvas>
-  <Header description="LABORIS AUTE DESERUNT ID AUTE OFFICIA SINT SUNT FUGIAT EX ET CUPIDATAT CONSEQUAT DOLORE.">
+  <PageHeader description="LABORIS AUTE DESERUNT ID AUTE OFFICIA SINT SUNT FUGIAT EX ET CUPIDATAT CONSEQUAT DOLORE.">
     AUTE OFFICIA SINT SUNT FUGIAT
-  </Header>
+  </PageHeader>
 </Canvas>
 
 ## Med illustrasjon
 
-Illustrasjonene brukt i header er "Pictogram" som er designet for den sepsifikke siden og
+Illustrasjonene brukt i PageHeader er "Pictogram" som er designet for den sepsifikke siden og
 man skal da ikke bare velge et fra figma vilkårlig.
 
 <Canvas>
-  <Header
+  <PageHeader
     illustration={illustrationPictogram}
     description="LABORIS AUTE DESERUNT ID AUTE OFFICIA SINT SUNT FUGIAT EX ET CUPIDATAT CONSEQUAT DOLORE."
   >
     AUTE OFFICIA SINT SUNT FUGIAT
-  </Header>
+  </PageHeader>
 </Canvas>
 
 ## Temaer
@@ -40,35 +40,42 @@ man skal da ikke bare velge et fra figma vilkårlig.
 Headeren kommer i tre tema: `guide`, `product` og `situation`
 
 <Canvas>
-  <Header
+  <PageHeader
     description="LABORIS AUTE DESERUNT ID AUTE OFFICIA SINT SUNT FUGIAT EX ET CUPIDATAT CONSEQUAT DOLORE."
-    theme="guide"
+    variant="guide"
   >
     AUTE OFFICIA SINT SUNT FUGIAT
-  </Header>
-  <Header
+  </PageHeader>
+  <PageHeader
     description="LABORIS AUTE DESERUNT ID AUTE OFFICIA SINT SUNT FUGIAT EX ET CUPIDATAT CONSEQUAT DOLORE."
-    theme="product"
+    variant="product"
   >
     AUTE OFFICIA SINT SUNT FUGIAT
-  </Header>
-  <Header
+  </PageHeader>
+  <PageHeader
     description="LABORIS AUTE DESERUNT ID AUTE OFFICIA SINT SUNT FUGIAT EX ET CUPIDATAT CONSEQUAT DOLORE."
-    theme="situation"
+    variant="situation"
   >
     AUTE OFFICIA SINT SUNT FUGIAT
-  </Header>
+  </PageHeader>
 </Canvas>
 
 ## Sentrert
 
-Innhold kan sentreres med `variant="center"`-prop
+Innhold kan sentreres med `align="center"`-prop
 
 <Canvas>
-  <Header
+  <PageHeader
     description="LABORIS AUTE DESERUNT ID AUTE OFFICIA SINT SUNT FUGIAT EX ET CUPIDATAT CONSEQUAT DOLORE."
-    variant="center"
+    align="center"
   >
     AUTE OFFICIA SINT SUNT FUGIAT
-  </Header>
+  </PageHeader>
+  <PageHeader
+    illustration={illustrationPictogram}
+    description="LABORIS AUTE DESERUNT ID AUTE OFFICIA SINT SUNT FUGIAT EX ET CUPIDATAT CONSEQUAT DOLORE."
+    align="center"
+  >
+    AUTE OFFICIA SINT SUNT FUGIAT
+  </PageHeader>
 </Canvas>

package/src/{header → page-header}/stories/header.stories.tsx

@@ -1,61 +1,61 @@
 import React from "react";
-import { Header } from "../index";
+import { PageHeader } from "../index";
 import { Meta } from "@storybook/react/types-6-0";
 import { illustrationPictogram } from "./pictogram";
 export default {
-  title: "ds-react/header",
-  component: Header,
+  title: "ds-react/page-header",
+  component: PageHeader,
 } as Meta;
 
 export const All = () => {
   return (
     <div>
-      <h2>Header</h2>
-      <Header description="LABORIS AUTE DESERUNT ID AUTE OFFICIA SINT SUNT FUGIAT EX ET CUPIDATAT CONSEQUAT DOLORE.">
+      <h2>PageHeader</h2>
+      <PageHeader description="LABORIS AUTE DESERUNT ID AUTE OFFICIA SINT SUNT FUGIAT EX ET CUPIDATAT CONSEQUAT DOLORE.">
         AUTE OFFICIA SINT SUNT FUGIAT
-      </Header>
+      </PageHeader>
       <br />
-      <h2>Header m/illustration</h2>
-      <Header
+      <h2>PageHeader m/illustration</h2>
+      <PageHeader
         illustration={illustrationPictogram}
         description="LABORIS AUTE DESERUNT ID AUTE OFFICIA SINT SUNT FUGIAT EX ET CUPIDATAT CONSEQUAT DOLORE."
       >
         AUTE OFFICIA SINT SUNT FUGIAT
-      </Header>
-      <h2>Header center</h2>
-      <Header
+      </PageHeader>
+      <h2>PageHeader center</h2>
+      <PageHeader
         description="LABORIS AUTE DESERUNT ID AUTE OFFICIA SINT SUNT FUGIAT EX ET CUPIDATAT CONSEQUAT DOLORE."
-        variant="center"
+        align="center"
       >
         AUTE OFFICIA SINT SUNT FUGIAT
-      </Header>
-      <h2>Header center m/illustration</h2>
-      <Header
+      </PageHeader>
+      <h2>PageHeader center m/illustration</h2>
+      <PageHeader
         illustration={illustrationPictogram}
         description="LABORIS AUTE DESERUNT ID AUTE OFFICIA SINT SUNT FUGIAT EX ET CUPIDATAT CONSEQUAT DOLORE."
-        variant="center"
+        align="center"
       >
         AUTE OFFICIA SINT SUNT FUGIAT
-      </Header>
-      <h2>Header variants</h2>
-      <Header
+      </PageHeader>
+      <h2>PageHeader variants</h2>
+      <PageHeader
         description="LABORIS AUTE DESERUNT ID AUTE OFFICIA SINT SUNT FUGIAT EX ET CUPIDATAT CONSEQUAT DOLORE."
-        theme="guide"
+        variant="guide"
       >
         AUTE OFFICIA SINT SUNT FUGIAT
-      </Header>
-      <Header
+      </PageHeader>
+      <PageHeader
         description="LABORIS AUTE DESERUNT ID AUTE OFFICIA SINT SUNT FUGIAT EX ET CUPIDATAT CONSEQUAT DOLORE."
-        theme="product"
+        variant="product"
       >
         AUTE OFFICIA SINT SUNT FUGIAT
-      </Header>
-      <Header
+      </PageHeader>
+      <PageHeader
         description="LABORIS AUTE DESERUNT ID AUTE OFFICIA SINT SUNT FUGIAT EX ET CUPIDATAT CONSEQUAT DOLORE."
-        theme="situation"
+        variant="situation"
       >
         AUTE OFFICIA SINT SUNT FUGIAT
-      </Header>
+      </PageHeader>
     </div>
   );
 };

package/src/panel/Panel.tsx

@@ -1,33 +1,24 @@
 import React, { forwardRef } from "react";
 import cl from "classnames";
-import { OverridableComponent } from "../util";
+import { OverridableComponent } from "..";
 
-export type PanelType = OverridableComponent<PanelProps>;
-
-export interface PanelProps {
-  props: {
-    /**
-     * Panel content
-     */
-    children: React.ReactNode;
-    /**
-     * Toggles border on panel
-     * @default false
-     */
-    border?: boolean;
-  } & React.HTMLAttributes<HTMLElement>;
-  defaultComponent: "div";
+export interface PanelProps extends React.HTMLAttributes<HTMLElement> {
+  /**
+   * Panel content
+   */
+  children: React.ReactNode;
+  /**
+   * Toggles border on panel
+   * @default false
+   */
+  border?: boolean;
 }
 
+export type PanelType = OverridableComponent<PanelProps, HTMLElement>;
+
 const Panel: PanelType = forwardRef(
   (
-    {
-      children,
-      className,
-      border = false,
-      component: Component = "div",
-      ...rest
-    },
+    { children, className, border = false, as: Component = "div", ...rest },
     ref
   ) => {
     return (

package/src/popover/Popover.tsx

@@ -1,3 +1,5 @@
+import { Placement } from "@popperjs/core";
+import cl from "classnames";
 import React, {
   forwardRef,
   HTMLAttributes,
@@ -5,26 +7,26 @@ import React, {
   useEffect,
   useRef,
 } from "react";
-import { usePopper } from "react-popper";
-import { Placement } from "@popperjs/core";
 import mergeRefs from "react-merge-refs";
-import cl from "classnames";
+import { usePopper } from "react-popper";
+import { useClientLayoutEffect } from "..";
+import PopoverContent, { PopoverContentType } from "./PopoverContent";
 
 export interface PopoverProps extends HTMLAttributes<HTMLDivElement> {
   /**
-   * Element that popover will anchor to
+   * Element popover anchors to
    */
   anchorEl: HTMLElement | null;
   /**
-   * Open state for popover
+   * Open state
    */
   open: boolean;
   /**
-   * Callback for when popover closes
+   * onClose callback
    */
   onClose: () => void;
   /**
-   * Content rendered inside popover
+   * Popover content
    */
   children: React.ReactNode;
   /**
@@ -33,12 +35,13 @@ export interface PopoverProps extends HTMLAttributes<HTMLDivElement> {
    */
   placement?: Placement;
   /**
-   *  Deteremines if popover contains an arrow
+   *  Toggles rendering of arrow
+   *  @default true
    */
   arrow?: boolean;
   /**
    * Distance from anchor to popover
-   * @default 16 w/arrow, 4 wo/arrow
+   * @default 16 w/arrow, 4 w/no-arrow
    */
   offset?: number;
 }
@@ -51,6 +54,13 @@ const useEventLister = (event: string, callback) =>
     };
   }, [event, callback]);
 
+interface PopoverComponent
+  extends React.ForwardRefExoticComponent<
+    PopoverProps & React.RefAttributes<HTMLDivElement>
+  > {
+  Content: PopoverContentType;
+}
+
 const Popover = forwardRef<HTMLDivElement, PopoverProps>(
   (
     {
@@ -120,11 +130,17 @@ const Popover = forwardRef<HTMLDivElement, PopoverProps>(
               offset: [0, offset ?? (arrow ? 16 : 4)],
             },
           },
+          {
+            name: "arrow",
+            options: {
+              padding: 8,
+            },
+          },
         ],
       }
     );
 
-    useEffect(() => {
+    useClientLayoutEffect(() => {
       open && update && update();
     }, [open, update]);
 
@@ -152,6 +168,8 @@ const Popover = forwardRef<HTMLDivElement, PopoverProps>(
       </div>
     );
   }
-);
+) as PopoverComponent;
+
+Popover.Content = PopoverContent;
 
 export default Popover;