@navikt/ds-react 2.9.8 → 3.0.0

package/esm/tabs/TabList.js

@@ -9,11 +9,11 @@ var __rest = (this && this.__rest) || function (s, e) {
         }
     return t;
 };
-import { Back, Next } from "@navikt/ds-icons";
+import { ChevronLeftIcon, ChevronRightIcon } from "@navikt/aksel-icons";
 import { TabsList } from "@radix-ui/react-tabs";
 import cl from "clsx";
 import React, { forwardRef, useContext, useEffect, useMemo, useRef, useState, } from "react";
-import { mergeRefs, debounce } from "..";
+import { debounce, mergeRefs } from "..";
 import { TabsContext } from "./Tabs";
 export const TabList = forwardRef((_a, ref) => {
     var { className } = _a, rest = __rest(_a, ["className"]);
@@ -71,7 +71,7 @@ export const TabList = forwardRef((_a, ref) => {
             if (!listRef.current)
                 return;
             listRef.current.scrollLeft += dir * 100;
-        } }, dir === -1 ? (React.createElement(Back, { title: "scroll tilbake" })) : (React.createElement(Next, { title: "scroll neste" }))));
+        } }, dir === -1 ? (React.createElement(ChevronLeftIcon, { title: "scroll tilbake" })) : (React.createElement(ChevronRightIcon, { title: "scroll neste" }))));
     const showSteppers = displayScroll.end || displayScroll.start;
     return (React.createElement("div", { className: "navds-tabs__tablist-wrapper" },
         showSteppers && (React.createElement(ScrollButton, { dir: -1, hidden: !displayScroll.start })),

package/esm/tabs/TabList.js.map

@@ -1 +1 @@
-{"version":3,"file":"TabList.js","sourceRoot":"","sources":["../../src/tabs/TabList.tsx"],"names":[],"mappings":"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"}
+{"version":3,"file":"TabList.js","sourceRoot":"","sources":["../../src/tabs/TabList.tsx"],"names":[],"mappings":"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"}

package/esm/util/index.d.ts

@@ -9,5 +9,5 @@ export interface ListenerT {
     addEventListener(name: string, handler: (event?: any) => void, ...args: any[]): any;
     removeEventListener(name: string, handler: (event?: any) => void, ...args: any[]): any;
 }
-export declare const useEventListener: <T extends ListenerT>(name: Parameters<ListenerT["addEventListener"]>[0], handler: Parameters<ListenerT["addEventListener"]>[1], target?: Window | T | null) => void;
+export declare const useEventListener: <T extends ListenerT>(name: Parameters<ListenerT["addEventListener"]>[0], handler: Parameters<ListenerT["addEventListener"]>[1], target?: T | Window | null) => void;
 export declare const composeEventHandlers: <E>(originalEventHandler?: ((event: E) => void) | undefined, ourEventHandler?: ((event: E) => void) | undefined) => (event: E) => void;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@navikt/ds-react",
-  "version": "2.9.8",
+  "version": "3.0.0",
   "description": "Aksel react-components for NAV designsystem",
   "author": "Aksel | NAV designsystem team",
   "license": "MIT",
@@ -38,8 +38,8 @@
   },
   "dependencies": {
     "@floating-ui/react": "0.17.0",
-    "@navikt/aksel-icons": "^2.9.8",
-    "@navikt/ds-icons": "^2.9.8",
+    "@navikt/aksel-icons": "^3.0.0",
+    "@navikt/ds-icons": "^3.0.0",
     "@radix-ui/react-tabs": "1.0.0",
     "@radix-ui/react-toggle-group": "1.0.0",
     "clsx": "^1.2.1",

package/src/accordion/Accordion.tsx

@@ -3,6 +3,7 @@ import React, { forwardRef } from "react";
 import AccordionItem, { AccordionItemType } from "./AccordionItem";
 import AccordionContent, { AccordionContentType } from "./AccordionContent";
 import AccordionHeader, { AccordionHeaderType } from "./AccordionHeader";
+import { AccordionContext } from "./AccordionContext";
 
 interface AccordionComponent
   extends React.ForwardRefExoticComponent<
@@ -14,6 +15,18 @@ interface AccordionComponent
 }
 
 export interface AccordionProps extends React.HTMLAttributes<HTMLDivElement> {
+  /**
+   * @default 'default'
+   */
+  variant?: "default" | "neutral";
+  /**
+   * @default 'large'
+   */
+  headingSize?: "large" | "medium" | "small" | "xsmall";
+  /**
+   * @default "medium"
+   */
+  size?: "large" | "medium" | "small";
   /**
    * Instances of Accordion.Item
    */
@@ -21,9 +34,36 @@ export interface AccordionProps extends React.HTMLAttributes<HTMLDivElement> {
 }
 
 export const Accordion = forwardRef<HTMLDivElement, AccordionProps>(
-  ({ className, ...rest }, ref) => (
-    <div {...rest} className={cl("navds-accordion", className)} ref={ref} />
-  )
+  (
+    {
+      className,
+      variant = "default",
+      headingSize = "medium",
+      size = "medium",
+      ...rest
+    },
+    ref
+  ) => {
+    return (
+      <AccordionContext.Provider
+        value={{
+          variant,
+          headingSize,
+          size,
+        }}
+      >
+        <div
+          {...rest}
+          className={cl(
+            "navds-accordion",
+            className,
+            `navds-accordion--${size}`
+          )}
+          ref={ref}
+        />
+      </AccordionContext.Provider>
+    );
+  }
 ) as AccordionComponent;
 
 Accordion.Header = AccordionHeader;

package/src/accordion/AccordionContent.tsx

@@ -1,6 +1,5 @@
 import cl from "clsx";
 import React, { forwardRef, useContext } from "react";
-import AnimateHeight from "../util/AnimateHeight";
 import { BodyLong } from "../typography/BodyLong";
 import { AccordionItemContext } from "./AccordionItem";
 
@@ -28,16 +27,20 @@ const AccordionContent: AccordionContentType = forwardRef(
     }
 
     return (
-      <AnimateHeight height={context.open ? "auto" : 0} duration={250}>
-        <BodyLong
-          {...rest}
-          as="div"
-          ref={ref}
-          className={cl("navds-accordion__content", className)}
-        >
-          {children}
-        </BodyLong>
-      </AnimateHeight>
+      <BodyLong
+        {...rest}
+        as="div"
+        ref={ref}
+        className={cl(
+          "navds-accordion__content",
+          {
+            "navds-accordion__content--closed": !context.open,
+          },
+          className
+        )}
+      >
+        {children}
+      </BodyLong>
     );
   }
 );

package/src/accordion/AccordionContext.tsx

@@ -0,0 +1,15 @@
+import { createContext } from "react";
+
+export type AccordionContextProps = {
+  variant?: "default" | "neutral";
+  headingSize?: "large" | "medium" | "small" | "xsmall";
+  size?: "large" | "medium" | "small";
+  openItems?: number[];
+};
+
+export const AccordionContext = createContext<AccordionContextProps | null>({
+  variant: "default",
+  headingSize: "small",
+  size: "medium",
+  openItems: [],
+});

package/src/accordion/AccordionHeader.tsx

@@ -1,8 +1,9 @@
-import { Expand, ExpandFilled } from "@navikt/ds-icons";
 import cl from "clsx";
 import React, { forwardRef, useContext } from "react";
 import { Heading } from "../typography/Heading";
+import { AccordionContext } from "./AccordionContext";
 import { AccordionItemContext } from "./AccordionItem";
+import { ChevronDownIcon } from "@navikt/aksel-icons";
 
 export interface AccordionHeaderProps
   extends React.ButtonHTMLAttributes<HTMLButtonElement> {
@@ -18,43 +19,42 @@ export type AccordionHeaderType = React.ForwardRefExoticComponent<
 
 const AccordionHeader: AccordionHeaderType = forwardRef(
   ({ children, className, onClick, ...rest }, ref) => {
-    const context = useContext(AccordionItemContext);
+    const itemContext = useContext(AccordionItemContext);
+    const accordionContext = useContext(AccordionContext);
 
-    if (context === null) {
+    if (accordionContext === null || itemContext === null) {
       console.error(
-        "<Accordion.Header> has to be used within an <Accordion.Item>"
+        "<Accordion.Header> has to be used within an <Accordion.Item>, which in turn must be within an <Accordion>"
       );
       return null;
     }
 
-    const handleClick = (
-      e: React.MouseEvent<HTMLButtonElement, MouseEvent>
-    ) => {
-      context.toggleOpen();
-      onClick && onClick(e);
-    };
-
     return (
       <button
-        {...rest}
         ref={ref}
+        {...rest}
         className={cl("navds-accordion__header", className)}
+        onClick={(e: React.MouseEvent<HTMLButtonElement, MouseEvent>) => {
+          itemContext.toggleOpen();
+          onClick && onClick(e);
+        }}
+        aria-expanded={itemContext.open}
         type="button"
-        onClick={handleClick}
-        aria-expanded={context.open}
       >
+        <div className="navds-accordion__icon-wrapper">
+          <ChevronDownIcon
+            className="navds-accordion__header-chevron"
+            title="Vis mer"
+            aria-hidden
+          />
+        </div>
         <Heading
-          size="small"
+          size={accordionContext.headingSize ?? "small"}
           as="span"
           className="navds-accordion__header-content"
         >
           {children}
         </Heading>
-        <Expand aria-hidden className="navds-accordion__expand-icon" />
-        <ExpandFilled
-          aria-hidden
-          className="navds-accordion__expand-icon navds-accordion__expand-icon--filled"
-        />
       </button>
     );
   }

package/src/accordion/AccordionItem.tsx

@@ -1,5 +1,12 @@
 import cl from "clsx";
-import React, { createContext, forwardRef, useState } from "react";
+import React, {
+  createContext,
+  forwardRef,
+  useContext,
+  useRef,
+  useState,
+} from "react";
+import { AccordionContext } from "./AccordionContext";
 
 export interface AccordionItemProps
   extends React.HTMLAttributes<HTMLDivElement> {
@@ -38,11 +45,27 @@ const AccordionItem: AccordionItemType = forwardRef(
     ref
   ) => {
     const [internalOpen, setInternalOpen] = useState<boolean>(defaultOpen);
+    const context = useContext(AccordionContext);
+
+    const [_open, _setOpen] = useState(defaultOpen);
+    const shouldAnimate = useRef<boolean>(!(Boolean(open) || defaultOpen));
+    const handleOpen = () => {
+      if (open === undefined) {
+        const newOpen = !_open;
+        _setOpen(newOpen);
+        setInternalOpen(newOpen);
+      } else {
+        setInternalOpen(!open);
+      }
+      shouldAnimate.current = true;
+    };
 
     return (
       <div
         className={cl("navds-accordion__item", className, {
           "navds-accordion__item--open": open ?? internalOpen,
+          "navds-accordion__item--neutral": context?.variant === "neutral",
+          "navds-accordion__item--no-animation": !shouldAnimate.current,
         })}
         ref={ref}
         {...rest}
@@ -50,11 +73,7 @@ const AccordionItem: AccordionItemType = forwardRef(
         <AccordionItemContext.Provider
           value={{
             open: open ?? internalOpen,
-            toggleOpen: () => {
-              if (open === undefined) {
-                setInternalOpen((iOpen) => !iOpen);
-              }
-            },
+            toggleOpen: handleOpen,
           }}
         >
           {children}

package/src/accordion/accordion.stories.tsx

@@ -2,7 +2,8 @@ import React, { useState } from "react";
 import AccordionContent from "./AccordionContent";
 import AccordionHeader from "./AccordionHeader";
 import AccordionItem from "./AccordionItem";
-import { Accordion } from ".";
+import { Accordion, AccordionProps } from ".";
+import { Table } from "..";
 
 export default {
   title: "ds-react/Accordion",
@@ -12,6 +13,39 @@ export default {
     AccordionContent,
     AccordionHeader,
   },
+  decorators: [
+    (Story) => (
+      <div
+        style={{
+          width: "600px",
+          minHeight: "100vh",
+          padding: "10rem 0",
+          display: "flex",
+          flexDirection: "column",
+          gap: "1rem",
+        }}
+      >
+        <Story />
+      </div>
+    ),
+  ],
+  argTypes: {
+    variant: {
+      options: ["default", "neutral"],
+      control: { type: "select" },
+    },
+    headingSize: {
+      options: ["large", "medium", "small", "xsmall"],
+      control: { type: "select" },
+    },
+    size: {
+      options: ["large", "medium", "small"],
+      control: { type: "select" },
+    },
+    nItems: {
+      control: { type: "number" },
+    },
+  },
 };
 
 const Content = () => (
@@ -32,9 +66,25 @@ const Content = () => (
   </Accordion.Content>
 );
 
+const SmallContent = () => (
+  <Accordion.Content>
+    Magna aliquip aliquip fugiat nostrud <a href="#Lorem">Lorem est</a> pariatur
+    veniam officia laboris voluptate officia pariatur.ex anim
+  </Accordion.Content>
+);
+
 const Item = (props) => {
   const [open, setOpen] = useState(false);
 
+  if (props.defaultOpen) {
+    return (
+      <Accordion.Item defaultOpen={props.defaultOpen}>
+        <Accordion.Header>Accordion header text</Accordion.Header>
+        <SmallContent />
+      </Accordion.Item>
+    );
+  }
+
   return props.controlled ? (
     <Accordion.Item open={open}>
       <Accordion.Header onClick={() => setOpen(!open)}>
@@ -51,11 +101,11 @@ const Item = (props) => {
 };
 
 export const Default = {
-  render: (props) => {
+  render: ({ nItems, ...props }) => {
     return (
       <div style={{ width: 500 }}>
-        <Accordion>
-          {[...Array(props.nItems ? props.nItems : 2)].map((_, y) => (
+        <Accordion {...props}>
+          {[...Array(nItems ? nItems : 2)].map((_, y) => (
             <Item key={y} {...props} />
           ))}
         </Accordion>
@@ -64,18 +114,62 @@ export const Default = {
   },
 
   args: {
-    controlled: false,
+    controlled: "false",
     nItems: 2,
+    variant: "default",
+    headingSize: "medium",
+    size: "medium",
+  },
+};
+
+export const DefaultOpen = {
+  render: ({ nItems, openItems, ...props }) => {
+    return (
+      <div style={{ width: 500 }}>
+        <Accordion {...props}>
+          {[...Array(nItems ? nItems : 2)].map((_, y) => (
+            <Item key={y} defaultOpen={openItems.includes(y)} {...props} />
+          ))}
+        </Accordion>
+      </div>
+    );
+  },
+
+  args: {
+    openItems: [1, 2],
+    controlled: "false",
+    nItems: 5,
+    variant: "neutral",
+    headingSize: "large",
   },
 };
 
-export const Controlled = () => {
+export const Variants = {
+  render: () => {
+    return (
+      <div style={{ width: 500 }} className="colgap">
+        <Accordion>
+          {[...Array(2)].map((_, y) => (
+            <Item key={y} defaultOpen />
+          ))}
+        </Accordion>
+        <Accordion variant="neutral">
+          {[...Array(2)].map((_, y) => (
+            <Item key={y} defaultOpen />
+          ))}
+        </Accordion>
+      </div>
+    );
+  },
+};
+
+export const Controlled = (props) => {
   const [open, setOpen] = useState(false);
   const [open2, setOpen2] = useState(false);
 
   return (
     <div style={{ width: 500 }}>
-      <Accordion>
+      <Accordion {...props}>
         <Accordion.Item open={open}>
           <Accordion.Header onClick={() => setOpen(!open)}>
             Accordion header text
@@ -93,17 +187,124 @@ export const Controlled = () => {
   );
 };
 
-export const Uncontrolled = () => (
-  <div style={{ width: 500 }}>
-    <Accordion>
+export const WithTable = {
+  render: (props) => {
+    const ExampleTable = () => {
+      return (
+        <Table>
+          <Table.Header>
+            <Table.Row>
+              <Table.HeaderCell>ID</Table.HeaderCell>
+              <Table.HeaderCell>Fornavn</Table.HeaderCell>
+              <Table.HeaderCell>Etternavn</Table.HeaderCell>
+              <Table.HeaderCell>Rolle</Table.HeaderCell>
+            </Table.Row>
+          </Table.Header>
+          <Table.Body>
+            <Table.Row>
+              <Table.HeaderCell>1</Table.HeaderCell>
+              <Table.DataCell>Jean-Luc</Table.DataCell>
+              <Table.DataCell>Picard</Table.DataCell>
+              <Table.DataCell>Kaptein</Table.DataCell>
+            </Table.Row>
+            <Table.Row>
+              <Table.HeaderCell>2</Table.HeaderCell>
+              <Table.DataCell>William</Table.DataCell>
+              <Table.DataCell>Riker</Table.DataCell>
+              <Table.DataCell>Kommandør</Table.DataCell>
+            </Table.Row>
+            <Table.Row>
+              <Table.HeaderCell>3</Table.HeaderCell>
+              <Table.DataCell>Geordi</Table.DataCell>
+              <Table.DataCell>La Forge</Table.DataCell>
+              <Table.DataCell>Sjefsingeniør</Table.DataCell>
+            </Table.Row>
+          </Table.Body>
+        </Table>
+      );
+    };
+
+    const ContentWithTable = () => {
+      return (
+        <Accordion.Content>
+          <ExampleTable />
+        </Accordion.Content>
+      );
+    };
+
+    return (
+      <div style={{ width: 500 }}>
+        <Accordion {...props}>
+          <Accordion.Item>
+            <Accordion.Header>Table of people</Accordion.Header>
+            <ContentWithTable />
+          </Accordion.Item>
+          <Accordion.Item>
+            <Accordion.Header>Table of people</Accordion.Header>
+            <ContentWithTable />
+          </Accordion.Item>
+        </Accordion>
+      </div>
+    );
+  },
+
+  args: {
+    variant: "default",
+    headingSize: "large",
+  },
+};
+
+const SingleHeaderAccordion = ({
+  size = "medium",
+  headingSize = "medium",
+}: Partial<AccordionProps>) => {
+  return (
+    <Accordion size={size} headingSize={headingSize}>
       <Accordion.Item>
-        <Accordion.Header>Accordion header text</Accordion.Header>
-        <Content />
+        <Accordion.Header>{`${size} size + ${headingSize} heading`}</Accordion.Header>
+        <Accordion.Content>a</Accordion.Content>
       </Accordion.Item>
       <Accordion.Item>
-        <Accordion.Header>Accordion header text</Accordion.Header>
-        <Content />
+        <Accordion.Header>{`${size} size + ${headingSize} heading`}</Accordion.Header>
+        <Accordion.Content>a</Accordion.Content>
       </Accordion.Item>
     </Accordion>
-  </div>
-);
+  );
+};
+
+type sizesType = "large" | "medium" | "small";
+type headingSizesType = "large" | "medium" | "small" | "xsmall";
+const sizes: sizesType[] = ["large", "medium", "small"];
+const headingSizes: headingSizesType[] = ["large", "medium", "small", "xsmall"]; // enum this?!
+
+export const Size = {
+  render: ({ ...props }) => {
+    return (
+      <div style={{ width: 500 }} className="colgap">
+        {sizes.map((element) => (
+          <SingleHeaderAccordion size={element} {...props} />
+        ))}
+      </div>
+    );
+  },
+
+  args: {
+    variant: "neutral",
+  },
+};
+
+export const HeadingSize = {
+  render: ({ ...props }) => {
+    return (
+      <div style={{ width: 500 }} className="colgap">
+        {headingSizes.map((element) => (
+          <SingleHeaderAccordion headingSize={element} {...props} />
+        ))}
+      </div>
+    );
+  },
+
+  args: {
+    variant: "neutral",
+  },
+};

package/src/alert/Alert.tsx

@@ -1,9 +1,9 @@
 import {
-  ErrorFilled,
-  InformationFilled,
-  SuccessFilled,
-  WarningFilled,
-} from "@navikt/ds-icons";
+  InformationSquareFillIcon,
+  CheckmarkCircleFillIcon,
+  ExclamationmarkTriangleFillIcon,
+  XMarkOctagonFillIcon,
+} from "@navikt/aksel-icons";
 import cl from "clsx";
 import React, { forwardRef } from "react";
 import { BodyLong } from "../typography/BodyLong";
@@ -37,13 +37,13 @@ export interface AlertProps extends React.HTMLAttributes<HTMLDivElement> {
 const Icon = ({ variant, ...props }) => {
   switch (variant) {
     case "error":
-      return <ErrorFilled title="Feil" {...props} />;
+      return <XMarkOctagonFillIcon title="Feil" {...props} />;
     case "warning":
-      return <WarningFilled title="Advarsel" {...props} />;
+      return <ExclamationmarkTriangleFillIcon title="Advarsel" {...props} />;
     case "info":
-      return <InformationFilled title="Informasjon" {...props} />;
+      return <InformationSquareFillIcon title="Informasjon" {...props} />;
     case "success":
-      return <SuccessFilled title="Suksess" {...props} />;
+      return <CheckmarkCircleFillIcon title="Suksess" {...props} />;
     default:
       return null;
   }