@navikt/ds-react 2.9.7 → 3.0.0

package/src/table/ColumnHeader.tsx

@@ -1,7 +1,11 @@
 import React, { forwardRef, useContext } from "react";
-import { Down, Up, UpDown } from "@navikt/ds-icons";
 import { TableContext } from "./Table";
 import HeaderCell, { HeaderCellProps } from "./HeaderCell";
+import {
+  ArrowDownIcon,
+  ArrowUpIcon,
+  ArrowsUpDownIcon,
+} from "@navikt/aksel-icons";
 
 export interface ColumnHeaderProps extends HeaderCellProps {
   /**
@@ -55,12 +59,12 @@ export const ColumnHeader: ColumnHeaderType = forwardRef(
             {children}
             {context?.sort?.orderBy === sortKey ? (
               context?.sort?.direction === "descending" ? (
-                <Down aria-hidden />
+                <ArrowDownIcon aria-hidden />
               ) : (
-                <Up aria-hidden />
+                <ArrowUpIcon aria-hidden />
               )
             ) : (
-              <UpDown aria-hidden />
+              <ArrowsUpDownIcon aria-hidden />
             )}
           </button>
         ) : (

package/src/table/ExpandableRow.tsx

@@ -1,10 +1,10 @@
-import { Expand, ExpandFilled } from "@navikt/ds-icons";
 import cl from "clsx";
 import React, { forwardRef, useState } from "react";
 import { useId } from "..";
 import AnimateHeight from "../util/AnimateHeight";
 import DataCell from "./DataCell";
 import Row, { RowProps } from "./Row";
+import { ChevronDownIcon } from "@navikt/aksel-icons";
 
 export interface ExpandableRowProps extends Omit<RowProps, "content"> {
   /**
@@ -96,14 +96,10 @@ export const ExpandableRow: ExpandableRowType = forwardRef(
                   }
                 }}
               >
-                <Expand
+                <ChevronDownIcon
                   className="navds-table__expandable-icon"
                   title={isOpen ? "Vis mindre" : "Vis mer"}
                 />
-                <ExpandFilled
-                  className="navds-table__expandable-icon navds-table__expandable-icon--filled"
-                  title={isOpen ? "Vis mindre" : "Vis mer"}
-                />
               </button>
             )}
           </DataCell>

package/src/tabs/TabList.tsx

@@ -1,4 +1,4 @@
-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, {
@@ -9,7 +9,7 @@ import React, {
   useRef,
   useState,
 } from "react";
-import { mergeRefs, debounce } from "..";
+import { debounce, mergeRefs } from "..";
 import { TabsContext } from "./Tabs";
 
 export interface TabListProps extends React.HTMLAttributes<HTMLDivElement> {
@@ -103,9 +103,9 @@ export const TabList = forwardRef<HTMLDivElement, TabListProps>(
         }}
       >
         {dir === -1 ? (
-          <Back title="scroll tilbake" />
+          <ChevronLeftIcon title="scroll tilbake" />
         ) : (
-          <Next title="scroll neste" />
+          <ChevronRightIcon title="scroll neste" />
         )}
       </div>
     );

package/src/tabs/Tabs.stories.tsx

@@ -1,7 +1,7 @@
-import { Cup, Dishwasher, Freezer } from "@navikt/ds-icons";
 import { Meta } from "@storybook/react";
 import React, { useState } from "react";
 import { Tabs } from ".";
+import { FreezerIcon, MugIcon, DishwasherIcon } from "@navikt/aksel-icons";
 
 export default {
   title: "ds-react/Tabs",
@@ -65,9 +65,13 @@ export const Default = {
         iconPosition={props?.iconPosition}
       >
         <Tabs.List>
-          <Tabs.Tab value="test1" icon={<Cup />} label="Skap" />
-          <Tabs.Tab value="test2" label="Oppvaskmaskin" icon={<Dishwasher />} />
-          <Tabs.Tab value="test3" icon={<Freezer />} label="Fryser" />
+          <Tabs.Tab value="test1" icon={<MugIcon />} label="Skap" />
+          <Tabs.Tab
+            value="test2"
+            label="Oppvaskmaskin"
+            icon={<DishwasherIcon />}
+          />
+          <Tabs.Tab value="test3" icon={<FreezerIcon />} label="Fryser" />
         </Tabs.List>
         <Panel />
       </Tabs>
@@ -84,9 +88,13 @@ export const Small = () => {
   return (
     <Tabs defaultValue="test2" size="small">
       <Tabs.List>
-        <Tabs.Tab value="test1" icon={<Cup />} label="Skap" />
-        <Tabs.Tab value="test2" label="Oppvaskmaskin" icon={<Dishwasher />} />
-        <Tabs.Tab value="test3" icon={<Freezer />} label="Fryser" />
+        <Tabs.Tab value="test1" icon={<MugIcon />} label="Skap" />
+        <Tabs.Tab
+          value="test2"
+          label="Oppvaskmaskin"
+          icon={<DishwasherIcon />}
+        />
+        <Tabs.Tab value="test3" icon={<FreezerIcon />} label="Fryser" />
       </Tabs.List>
       <Panel />
     </Tabs>
@@ -98,9 +106,13 @@ export const Controlled = () => {
   return (
     <Tabs value={activeValue} onChange={setActiveValue}>
       <Tabs.List>
-        <Tabs.Tab value="test1" icon={<Cup />} label="Skap" />
-        <Tabs.Tab value="test2" label="Oppvaskmaskin" icon={<Dishwasher />} />
-        <Tabs.Tab value="test3" icon={<Freezer />} label="Fryser" />
+        <Tabs.Tab value="test1" icon={<MugIcon />} label="Skap" />
+        <Tabs.Tab
+          value="test2"
+          label="Oppvaskmaskin"
+          icon={<DishwasherIcon />}
+        />
+        <Tabs.Tab value="test3" icon={<FreezerIcon />} label="Fryser" />
       </Tabs.List>
       <Panel />
     </Tabs>
@@ -112,17 +124,25 @@ export const IconPosition = () => {
     <div className="colgap">
       <Tabs defaultValue="test2" size="small">
         <Tabs.List>
-          <Tabs.Tab value="test1" icon={<Cup />} label="Skap" />
-          <Tabs.Tab value="test2" label="Oppvaskmaskin" icon={<Dishwasher />} />
-          <Tabs.Tab value="test3" icon={<Freezer />} label="Fryser" />
+          <Tabs.Tab value="test1" icon={<MugIcon />} label="Skap" />
+          <Tabs.Tab
+            value="test2"
+            label="Oppvaskmaskin"
+            icon={<DishwasherIcon />}
+          />
+          <Tabs.Tab value="test3" icon={<FreezerIcon />} label="Fryser" />
         </Tabs.List>
         <Panel />
       </Tabs>
       <Tabs defaultValue="test2" size="small" iconPosition="top">
         <Tabs.List style={{ margin: "0 auto" }}>
-          <Tabs.Tab value="test1" icon={<Cup />} label="Skap" />
-          <Tabs.Tab value="test2" label="Oppvaskmaskin" icon={<Dishwasher />} />
-          <Tabs.Tab value="test3" icon={<Freezer />} label="Fryser" />
+          <Tabs.Tab value="test1" icon={<MugIcon />} label="Skap" />
+          <Tabs.Tab
+            value="test2"
+            label="Oppvaskmaskin"
+            icon={<DishwasherIcon />}
+          />
+          <Tabs.Tab value="test3" icon={<FreezerIcon />} label="Fryser" />
         </Tabs.List>
         <Panel />
       </Tabs>
@@ -135,17 +155,17 @@ export const Icon = () => {
     <div className="colgap">
       <Tabs defaultValue="test2">
         <Tabs.List style={{ margin: "0 auto" }}>
-          <Tabs.Tab value="test1" icon={<Cup />} />
-          <Tabs.Tab value="test2" icon={<Dishwasher />} />
-          <Tabs.Tab value="test3" icon={<Freezer />} />
+          <Tabs.Tab value="test1" icon={<MugIcon />} />
+          <Tabs.Tab value="test2" icon={<DishwasherIcon />} />
+          <Tabs.Tab value="test3" icon={<FreezerIcon />} />
         </Tabs.List>
         <Panel />
       </Tabs>
       <Tabs defaultValue="test2" size="small" iconPosition="top">
         <Tabs.List style={{ margin: "0 auto" }}>
-          <Tabs.Tab value="test1" icon={<Cup />} />
-          <Tabs.Tab value="test2" icon={<Dishwasher />} />
-          <Tabs.Tab value="test3" icon={<Freezer />} />
+          <Tabs.Tab value="test1" icon={<MugIcon />} />
+          <Tabs.Tab value="test2" icon={<DishwasherIcon />} />
+          <Tabs.Tab value="test3" icon={<FreezerIcon />} />
         </Tabs.List>
         <Panel />
       </Tabs>
@@ -157,9 +177,13 @@ export const Overflow = () => {
   return (
     <Tabs defaultValue="test2" style={{ maxWidth: 300 }}>
       <Tabs.List>
-        <Tabs.Tab value="test1" icon={<Cup />} label="Skap" />
-        <Tabs.Tab value="test2" label="Oppvaskmaskin" icon={<Dishwasher />} />
-        <Tabs.Tab value="test3" icon={<Freezer />} label="Fryser" />
+        <Tabs.Tab value="test1" icon={<MugIcon />} label="Skap" />
+        <Tabs.Tab
+          value="test2"
+          label="Oppvaskmaskin"
+          icon={<DishwasherIcon />}
+        />
+        <Tabs.Tab value="test3" icon={<FreezerIcon />} label="Fryser" />
       </Tabs.List>
       <Panel />
     </Tabs>

package/src/toggle-group/ToggleGroup.stories.tsx

@@ -1,5 +1,10 @@
 /* eslint-disable react-hooks/rules-of-hooks */
-import { Email, EmailOpened, Send } from "@navikt/ds-icons";
+
+import {
+  EnvelopeClosedIcon,
+  EnvelopeOpenIcon,
+  InboxUpIcon,
+} from "@navikt/aksel-icons";
 import { Meta } from "@storybook/react";
 import React, { useState } from "react";
 import { ToggleGroup } from "../index";
@@ -27,28 +32,28 @@ const Items = (icon?: boolean, both?: boolean) => (
     <ToggleGroup.Item value="ulest">
       {both ? (
         <>
-          <Email /> Uleste
+          <EnvelopeClosedIcon /> Uleste
         </>
       ) : (
-        <>{icon ? <Email /> : "Uleste"}</>
+        <>{icon ? <EnvelopeClosedIcon /> : "Uleste"}</>
       )}
     </ToggleGroup.Item>
     <ToggleGroup.Item value="lest">
       {both ? (
         <>
-          <EmailOpened /> Leste
+          <EnvelopeOpenIcon /> Leste
         </>
       ) : (
-        <>{icon ? <EmailOpened /> : "Leste"}</>
+        <>{icon ? <EnvelopeOpenIcon /> : "Leste"}</>
       )}
     </ToggleGroup.Item>
     <ToggleGroup.Item value="sendt">
       {both ? (
         <>
-          <Send /> Sendte
+          <InboxUpIcon /> Sendt
         </>
       ) : (
-        <>{icon ? <Send /> : "Sendte"}</>
+        <>{icon ? <InboxUpIcon /> : "Sendt"}</>
       )}
     </ToggleGroup.Item>
   </>