@navikt/ds-react 3.4.2 → 4.1.0

package/src/accordion/Accordion.tsx

@@ -1,17 +1,32 @@
 import cl from "clsx";
 import React, { forwardRef } from "react";
-import AccordionItem, { AccordionItemType } from "./AccordionItem";
-import AccordionContent, { AccordionContentType } from "./AccordionContent";
-import AccordionHeader, { AccordionHeaderType } from "./AccordionHeader";
+import AccordionItem, { AccordionItemProps } from "./AccordionItem";
+import AccordionContent, { AccordionContentProps } from "./AccordionContent";
+import AccordionHeader, { AccordionHeaderProps } from "./AccordionHeader";
 import { AccordionContext } from "./AccordionContext";
 
 interface AccordionComponent
   extends React.ForwardRefExoticComponent<
     AccordionProps & React.RefAttributes<HTMLDivElement>
   > {
-  Item: AccordionItemType;
-  Header: AccordionHeaderType;
-  Content: AccordionContentType;
+  /**
+   * @see 🏷️ {@link AccordionItemProps}
+   */
+  Item: React.ForwardRefExoticComponent<
+    AccordionItemProps & React.RefAttributes<HTMLDivElement>
+  >;
+  /**
+   * @see 🏷️ {@link AccordionHeaderProps}
+   */
+  Header: React.ForwardRefExoticComponent<
+    AccordionHeaderProps & React.RefAttributes<HTMLButtonElement>
+  >;
+  /**
+   * @see 🏷️ {@link AccordionContentProps}
+   */
+  Content: React.ForwardRefExoticComponent<
+    AccordionContentProps & React.RefAttributes<HTMLDivElement>
+  >;
 }
 
 export interface AccordionProps extends React.HTMLAttributes<HTMLDivElement> {
@@ -27,12 +42,37 @@ export interface AccordionProps extends React.HTMLAttributes<HTMLDivElement> {
    * @default "medium"
    */
   size?: "large" | "medium" | "small";
+  /**
+   * Whether to indent content or not
+   * @default true
+   */
+  indent?: boolean;
   /**
    * Instances of Accordion.Item
    */
   children: React.ReactNode;
 }
 
+/**
+ * A component that displays collapsible content sections.
+ *
+ * @see [📝 Documentation](https://aksel.nav.no/komponenter/core/accordion)
+ * @see 🏷️ {@link AccordionProps}
+ *
+ * @example
+ * ```jsx
+ * <Accordion>
+ *   <Accordion.Item>
+ *     <Accordion.Header>Section 1</Accordion.Header>
+ *     <Accordion.Content>Content 1</Accordion.Content>
+ *   </Accordion.Item>
+ *   <Accordion.Item>
+ *     <Accordion.Header>Section 2</Accordion.Header>
+ *     <Accordion.Content>Content 2</Accordion.Content>
+ *   </Accordion.Item>
+ * </Accordion>
+ * ```
+ */
 export const Accordion = forwardRef<HTMLDivElement, AccordionProps>(
   (
     {
@@ -40,6 +80,7 @@ export const Accordion = forwardRef<HTMLDivElement, AccordionProps>(
       variant = "default",
       headingSize = "small",
       size = "medium",
+      indent = true,
       ...rest
     },
     ref
@@ -57,7 +98,8 @@ export const Accordion = forwardRef<HTMLDivElement, AccordionProps>(
           className={cl(
             "navds-accordion",
             className,
-            `navds-accordion--${size}`
+            `navds-accordion--${size}`,
+            { "navds-accordion--indent": indent }
           )}
           ref={ref}
         />

package/src/accordion/AccordionContent.tsx

@@ -11,11 +11,7 @@ export interface AccordionContentProps
   children: React.ReactNode;
 }
 
-export type AccordionContentType = React.ForwardRefExoticComponent<
-  AccordionContentProps & React.RefAttributes<HTMLDivElement>
->;
-
-const AccordionContent: AccordionContentType = forwardRef(
+const AccordionContent = forwardRef<HTMLDivElement, AccordionContentProps>(
   ({ children, className, ...rest }, ref) => {
     const context = useContext(AccordionItemContext);
 

package/src/accordion/AccordionHeader.tsx

@@ -13,11 +13,7 @@ export interface AccordionHeaderProps
   children: React.ReactNode;
 }
 
-export type AccordionHeaderType = React.ForwardRefExoticComponent<
-  AccordionHeaderProps & React.RefAttributes<HTMLButtonElement>
->;
-
-const AccordionHeader: AccordionHeaderType = forwardRef(
+const AccordionHeader = forwardRef<HTMLButtonElement, AccordionHeaderProps>(
   ({ children, className, onClick, ...rest }, ref) => {
     const itemContext = useContext(AccordionItemContext);
     const accordionContext = useContext(AccordionContext);

package/src/accordion/AccordionItem.tsx

@@ -27,10 +27,6 @@ export interface AccordionItemProps
   defaultOpen?: boolean;
 }
 
-export type AccordionItemType = React.ForwardRefExoticComponent<
-  AccordionItemProps & React.RefAttributes<HTMLDivElement>
->;
-
 export interface AccordionItemContextProps {
   open: boolean;
   toggleOpen: () => void;
@@ -39,7 +35,7 @@ export interface AccordionItemContextProps {
 export const AccordionItemContext =
   createContext<AccordionItemContextProps | null>(null);
 
-const AccordionItem: AccordionItemType = forwardRef(
+const AccordionItem = forwardRef<HTMLDivElement, AccordionItemProps>(
   (
     { children, className, open, defaultOpen = false, onClick, id, ...rest },
     ref

package/src/accordion/accordion.stories.tsx

@@ -114,11 +114,12 @@ export const Default = {
   },
 
   args: {
-    controlled: "false",
+    controlled: false,
     nItems: 2,
     variant: "default",
     headingSize: "medium",
     size: "medium",
+    indent: true,
   },
 };
 
@@ -137,7 +138,7 @@ export const DefaultOpen = {
 
   args: {
     openItems: [1, 2],
-    controlled: "false",
+    controlled: false,
     nItems: 5,
     variant: "neutral",
     headingSize: "large",
@@ -251,6 +252,7 @@ export const WithTable = {
   args: {
     variant: "default",
     headingSize: "large",
+    indent: false,
   },
 };
 

package/src/alert/Alert.tsx

@@ -53,6 +53,15 @@ export interface AlertContextProps {
   size: "medium" | "small";
 }
 
+/**
+ * A component for displaying alerts
+ * @see [📝 Documentation](https://aksel.nav.no/komponenter/core/alert)
+ * @see 🏷️ {@link AlertProps}
+ * @example
+ * ```jsx
+ * <Alert variant="error">Dette er en feilmelding</Alert>
+ * ```
+ */
 export const Alert = forwardRef<HTMLDivElement, AlertProps>(
   (
     {

package/src/button/Button.tsx

@@ -47,6 +47,16 @@ export interface ButtonProps
   iconPosition?: "left" | "right";
 }
 
+/**
+ * A button component
+ * @see [📝 Documentation](https://aksel.nav.no/komponenter/core/button)
+ * @see 🏷️ {@link ButtonProps}
+ * @see [🤖 OverridableComponent](https://aksel.nav.no/grunnleggende/kode/overridablecomponent) support
+ * @example
+ * ```jsx
+ * <Button>Klikk meg</Button>
+ * ```
+ */
 export const Button: OverridableComponent<ButtonProps, HTMLButtonElement> =
   forwardRef(
     (

package/src/chat/Bubble.tsx

@@ -25,11 +25,7 @@ export interface BubbleProps extends HTMLAttributes<HTMLDivElement> {
   toptextPosition?: "left" | "right";
 }
 
-export type BubbleType = React.ForwardRefExoticComponent<
-  BubbleProps & React.RefAttributes<HTMLDivElement>
->;
-
-const Bubble: BubbleType = forwardRef(
+const Bubble = forwardRef<HTMLDivElement, BubbleProps>(
   (
     {
       children,

package/src/chat/Chat.tsx

@@ -1,6 +1,6 @@
 import React, { forwardRef, HTMLAttributes } from "react";
 import cl from "clsx";
-import Bubble, { BubbleType } from "./Bubble";
+import Bubble, { BubbleProps } from "./Bubble";
 import { BodyLong, BodyShort } from "../typography";
 
 export interface ChatProps extends HTMLAttributes<HTMLDivElement> {
@@ -44,9 +44,30 @@ interface ChatComponent
   extends React.ForwardRefExoticComponent<
     ChatProps & React.RefAttributes<HTMLDivElement>
   > {
-  Bubble: BubbleType;
+  /**
+   * @see 🏷️ {@link BubbleProps}
+   */
+  Bubble: React.ForwardRefExoticComponent<
+    BubbleProps & React.RefAttributes<HTMLDivElement>
+  >;
 }
 
+/**
+ * A component for displaying chat messages.
+ *
+ * @see [📝 Documentation](https://aksel.nav.no/komponenter/core/chat)
+ * @see 🏷️ {@link ChatProps}
+ *
+ * @example
+ * ```jsx
+ * <Chat>
+ *   <Chat.Bubble avatar="A" name="Alice">Hello!</Chat.Bubble>
+ * </Chat>
+ * <Chat>
+ *   <Chat.Bubble avatar="B" name="Bob">Hi there!</Chat.Bubble>
+ * </Chat>
+ * ```
+ */
 export const Chat = forwardRef<HTMLDivElement, ChatProps>(
   (
     {

package/src/chips/Chips.tsx

@@ -1,7 +1,8 @@
 import cl from "clsx";
 import React, { forwardRef, HTMLAttributes } from "react";
-import ToggleChips, { ToggleChipsType } from "./Toggle";
-import RemovableChips, { RemovableChipsType } from "./Removable";
+import ToggleChips, { ToggleChipsProps } from "./Toggle";
+import RemovableChips, { RemovableChipsProps } from "./Removable";
+import { OverridableComponent } from "../util/OverridableComponent";
 
 export interface ChipsProps extends HTMLAttributes<HTMLUListElement> {
   children: React.ReactNode;
@@ -16,10 +17,47 @@ interface ChipsComponent
   extends React.ForwardRefExoticComponent<
     ChipsProps & React.RefAttributes<HTMLUListElement>
   > {
-  Toggle: ToggleChipsType;
-  Removable: RemovableChipsType;
+  /**
+   * Toggle between selected-states.
+   * @see 🏷️ {@link ToggleChipsProps}
+   * @see [🤖 OverridableComponent](https://aksel.nav.no/grunnleggende/kode/overridablecomponent) support
+   */
+  Toggle: OverridableComponent<ToggleChipsProps, HTMLButtonElement>;
+  /**
+   * Remove filter or the likes on click
+   * @see 🏷️ {@link RemovableChipsProps}
+   * @see [🤖 OverridableComponent](https://aksel.nav.no/grunnleggende/kode/overridablecomponent) support
+   */
+  Removable: OverridableComponent<RemovableChipsProps, HTMLButtonElement>;
 }
 
+/**
+ * A component that displays a list of items as chips.
+ *
+ * @see [📝 Documentation](https://aksel.nav.no/komponenter/core/chips)
+ * @see 🏷️ {@link ChipsProps}
+ *
+ * @example
+ * ```jsx
+      <Chips size="small">
+        {options.map((c) => (
+          <Chips.Toggle
+            selected={selected.includes(c)}
+            key={c}
+            onClick={() =>
+              setSelected(
+                selected.includes(c)
+                  ? selected.filter((x) => x !== c)
+                  : [...selected, c]
+              )
+            }
+          >
+            {c}
+          </Chips.Toggle>
+        ))}
+      </Chips>
+ * ```
+ */
 export const Chips: ChipsComponent = forwardRef<HTMLUListElement, ChipsProps>(
   ({ className, size = "medium", children, ...rest }, ref) => {
     return (

package/src/chips/Removable.tsx

@@ -22,9 +22,6 @@ export interface RemovableChipsProps
   onDelete?: () => void;
 }
 
-export interface RemovableChipsType
-  extends OverridableComponent<RemovableChipsProps, HTMLButtonElement> {}
-
 export const RemovableChips: OverridableComponent<
   RemovableChipsProps,
   HTMLButtonElement
@@ -63,6 +60,6 @@ export const RemovableChips: OverridableComponent<
       </Component>
     );
   }
-) as RemovableChipsType;
+);
 
 export default RemovableChips;

package/src/chips/Toggle.tsx

@@ -1,4 +1,3 @@
-import { CheckmarkIcon } from "@navikt/aksel-icons";
 import cl from "clsx";
 import React, { forwardRef } from "react";
 import { OverridableComponent } from "../util/OverridableComponent";
@@ -10,27 +9,64 @@ export interface ToggleChipsProps
    * Toggles aria-pressed and visual-changes
    */
   selected?: boolean;
+  /**
+   * Chip-variants
+   * @default "action"
+   */
+  variant?: "action" | "neutral";
+  /**
+   * Toggles display of checkmark on selected
+   * @default true
+   */
+  checkmark?: boolean;
 }
 
-export interface ToggleChipsType
-  extends OverridableComponent<ToggleChipsProps, HTMLButtonElement> {}
-
-export const ToggleChips: ToggleChipsType = forwardRef(
+export const ToggleChips: OverridableComponent<
+  ToggleChipsProps,
+  HTMLButtonElement
+> = forwardRef(
   (
-    { className, children, selected, as: Component = "button", ...rest },
+    {
+      className,
+      children,
+      selected,
+      variant = "action",
+      checkmark = true,
+      as: Component = "button",
+      ...rest
+    },
     ref
   ) => {
     return (
       <Component
         {...rest}
         ref={ref}
-        className={cl("navds-chips__chip navds-chips__toggle", className, {
-          "navds-chips--icon-left": selected,
-        })}
+        className={cl(
+          "navds-chips__chip navds-chips__toggle",
+          className,
+          `navds-chips__toggle--${variant}`
+        )}
         aria-pressed={selected}
       >
-        {selected && (
-          <CheckmarkIcon aria-hidden className="navds-chips__toggle-icon" />
+        {selected && checkmark && (
+          <svg
+            aria-hidden
+            className="navds-chips__toggle-icon"
+            width="10"
+            height="8"
+            viewBox="0 0 10 8"
+            fill="none"
+            xmlns="http://www.w3.org/2000/svg"
+            focusable={false}
+            role="img"
+          >
+            <path
+              fillRule="evenodd"
+              clipRule="evenodd"
+              d="M9.51894 0.45851C9.81799 0.745107 9.8281 1.21987 9.5415 1.51893L3.7915 7.51893C3.51247 7.81009 3.05315 7.82848 2.75174 7.56056L0.501735 5.56056C0.192148 5.28537 0.164263 4.81132 0.439451 4.50173C0.71464 4.19214 1.18869 4.16426 1.49828 4.43944L3.20835 5.95951L8.45852 0.481072C8.74511 0.182015 9.21988 0.171913 9.51894 0.45851Z"
+              fill="currentColor"
+            />
+          </svg>
         )}
         <span className="navds-chips__chip-text">{children}</span>
       </Component>

package/src/chips/chips.stories.tsx

@@ -66,25 +66,78 @@ export const Default = {
 };
 
 export const Toggle = () => {
-  const [selected, setSelected] = useState<number[]>([]);
+  const [selected, setSelected] = useState<number[]>([2, 4]);
   return (
-    <Chips>
-      {options.map((c, y) => (
-        <Chips.Toggle
-          selected={selected.includes(y)}
-          onClick={() =>
-            setSelected(
-              selected.includes(y)
-                ? selected.filter((x) => x !== y)
-                : [...selected, y]
-            )
-          }
-          key={y}
-        >
-          {c}
-        </Chips.Toggle>
-      ))}
-    </Chips>
+    <div className="colgap">
+      <Chips>
+        {options.map((c, y) => (
+          <Chips.Toggle
+            selected={selected.includes(y)}
+            onClick={() =>
+              setSelected(
+                selected.includes(y)
+                  ? selected.filter((x) => x !== y)
+                  : [...selected, y]
+              )
+            }
+            key={y}
+          >
+            {c}
+          </Chips.Toggle>
+        ))}
+      </Chips>
+      <Chips>
+        {options.map((c, y) => (
+          <Chips.Toggle
+            variant="neutral"
+            selected={selected.includes(y)}
+            onClick={() =>
+              setSelected(
+                selected.includes(y)
+                  ? selected.filter((x) => x !== y)
+                  : [...selected, y]
+              )
+            }
+            key={y}
+          >
+            {c}
+          </Chips.Toggle>
+        ))}
+      </Chips>
+    </div>
+  );
+};
+
+export const ToggleNoCheckmark = () => {
+  const [selected, setSelected] = useState<number>(2);
+  return (
+    <div className="colgap">
+      <Chips>
+        {options.map((c, y) => (
+          <Chips.Toggle
+            selected={selected === y}
+            checkmark={false}
+            onClick={() => setSelected(y)}
+            key={y}
+          >
+            {c}
+          </Chips.Toggle>
+        ))}
+      </Chips>
+      <Chips>
+        {options.map((c, y) => (
+          <Chips.Toggle
+            variant="neutral"
+            selected={selected === y}
+            checkmark={false}
+            onClick={() => setSelected(y)}
+            key={y}
+          >
+            {c}
+          </Chips.Toggle>
+        ))}
+      </Chips>
+    </div>
   );
 };
 
@@ -108,7 +161,7 @@ export const Removable = () => {
 };
 
 export const Regular = () => {
-  const [selected, setSelected] = useState<number[]>([]);
+  const [selected, setSelected] = useState<number[]>([2]);
   return (
     <div className="colgap">
       <Chips>
@@ -138,7 +191,7 @@ export const Regular = () => {
 };
 
 export const Small = () => {
-  const [selected, setSelected] = useState<number[]>([]);
+  const [selected, setSelected] = useState<number[]>([2, 4]);
   return (
     <div className="colgap">
       <Chips size="small">

package/src/copybutton/CopyButton.tsx

@@ -65,6 +65,17 @@ export interface CopyButtonProps
   activeTitle?: string;
 }
 
+/**
+ * A button component that copies text to the clipboard when clicked.
+ *
+ * @see [📝 Documentation](https://aksel.nav.no/komponenter/core/copybutton)
+ * @see 🏷️ {@link CopyButtonProps}
+ *
+ * @example
+ * ```jsx
+      <CopyButton copyText="3.14" />
+ * ```
+ */
 export const CopyButton = forwardRef<HTMLButtonElement, CopyButtonProps>(
   (
     {