New/list

.changeset/polite-fireants-reply.md

@@ -0,0 +1,12 @@
+---
+"@navikt/ds-codemod": patch
+"@navikt/ds-css": patch
+"@navikt/ds-react": patch
+"@navikt/ds-tailwind": patch
+"@navikt/ds-tokens": patch
+"@navikt/ds-icons": patch
+"@navikt/ds-css-internal": patch
+"@navikt/ds-react-internal": patch
+---
+
+added support for nested lists

@navikt/core/css/list.css

@@ -3,8 +3,17 @@
   padding: 0;
 }
 
-.navds-list li:not(:first-child) {
-  margin-top: var(--a-spacing-5);
+.navds-list--nested {
+  margin: var(--a-spacing-4) 0 var(--a-spacing-8) 0;
+}
+
+.navds-list li:not(.navds-list__item--noMargin) {
+  margin-bottom: var(--a-spacing-5);
+}
+
+.navds-list:last-child > ul > li:last-child,
+.navds-list:last-child > ol > li:last-child {
+  margin-bottom: 0;
 }
 
 .navds-list ul .navds-list__item {

@navikt/core/react/src/list/List.tsx

@@ -1,8 +1,8 @@
 import cl from "clsx";
-import React, { createContext, forwardRef } from "react";
+import React, { createContext, forwardRef, useContext } from "react";
 import { BodyShort, Heading } from "../typography";
 import { useId } from "../util/useId";
-import { ListItem, ListItemType } from "./ListItem";
+import { ListItem, ListItemContext, ListItemType } from "./ListItem";
 
 export interface ListProps extends React.HTMLAttributes<HTMLDivElement> {
   children: React.ReactNode;
@@ -26,8 +26,10 @@ export interface ListProps extends React.HTMLAttributes<HTMLDivElement> {
   headingTag?: React.ElementType<any>;
 }
 
-interface ListComponent extends React.ForwardRefExoticComponent<ListProps> {
+export interface ListComponent
+  extends React.ForwardRefExoticComponent<ListProps> {
   Item: ListItemType;
+  componentType: string;
 }
 
 interface ListContextProps {
@@ -53,13 +55,22 @@ export const List = forwardRef<HTMLDivElement, ListProps>(
   ) => {
     const ariaId = useId();
 
+    const { isNested } = useContext(ListItemContext);
+
+
     return (
       <ListContext.Provider
         value={{
           listType: ListTag,
         }}
       >
-        <div {...rest} ref={ref} className={cl("navds-list", className)}>
+        <div
+          {...rest}
+          ref={ref}
+          className={cl("navds-list", className, {
+            "navds-list--nested": isNested,
+          })}
+        >
           {title && (
             <Heading id={`tittel-${ariaId}`} size="small" as={headingTag}>
               {title}
@@ -81,5 +92,6 @@ export const List = forwardRef<HTMLDivElement, ListProps>(
 ) as ListComponent;
 
 List.Item = ListItem;
+List.componentType = "list";
 
 export default List;

@navikt/core/react/src/list/ListItem.tsx

@@ -1,5 +1,5 @@
 import cl from "clsx";
-import React, { forwardRef, useContext } from "react";
+import React, { createContext, forwardRef, useContext } from "react";
 import { BodyShort, Label } from "../typography";
 import { ListContext } from "./List";
 
@@ -13,7 +13,7 @@ export interface ListItemProps extends React.HTMLAttributes<HTMLLIElement> {
    */
   title?: string;
   /*
-   * Icon to be used as list marker
+   * Icon to be used as list marker for unordered lists.
    */
   icon?: React.ReactNode;
 }
@@ -23,47 +23,73 @@ export interface ListItemType
     ListItemProps & React.RefAttributes<HTMLLIElement>
   > {}
 
+interface ListItemContextProps {
+  isNested: boolean;
+}
+
+export const ListItemContext = createContext<ListItemContextProps>({
+  isNested: false,
+});
+
 export const ListItem: ListItemType = forwardRef(
   ({ className, children, title, icon, ...rest }, ref) => {
     const { listType } = useContext(ListContext);
 
-    return (
-      <li {...rest} ref={ref} className={cl("navds-list__item", className)}>
-        {listType === "ul" && (
-          <div
-            className={cl({
-              "navds-list__item-marker--icon": icon,
-              "navds-list__item-marker--bullet": !icon,
-            })}
-          >
-            {icon ? (
-              icon
-            ) : (
-              <svg
-                width="6"
-                height="6"
-                viewBox="0 0 6 6"
-                fill="none"
-                xmlns="http://www.w3.org/2000/svg"
-                aria-hidden
-                focusable={false}
-                role="img"
-              >
-                <rect width="6" height="6" rx="3" fill="currentColor" />
-              </svg>
-            )}
-          </div>
-        )}
+    if (listType === "ol" && icon) {
+      console.warn(
+        "<List />: Icon prop is not supported for ordered lists. Please remove the icon prop."
+      );
+    }
 
-        <BodyShort as="div" size="small" className="navds-list__item-content">
-          {title && (
-            <Label as="p" size="small">
-              {title}
-            </Label>
+    const hasNestedList = React.Children.toArray(children)?.some(
+      (child: any) => child?.type?.componentType === "list"
+    );
+
+    return (
+      <ListItemContext.Provider value={{ isNested: hasNestedList }}>
+        <li
+          {...rest}
+          ref={ref}
+          className={cl("navds-list__item", className, {
+            "navds-list__item--noMargin": hasNestedList,
+          })}
+        >
+          {listType === "ul" && (
+            <div
+              className={cl({
+                "navds-list__item-marker--icon": icon,
+                "navds-list__item-marker--bullet": !icon,
+              })}
+            >
+              {icon ? (
+                icon
+              ) : (
+                <svg
+                  width="6"
+                  height="6"
+                  viewBox="0 0 6 6"
+                  fill="none"
+                  xmlns="http://www.w3.org/2000/svg"
+                  aria-hidden
+                  focusable={false}
+                  role="img"
+                >
+                  <rect width="6" height="6" rx="3" fill="currentColor" />
+                </svg>
+              )}
+            </div>
           )}
-          {children}
-        </BodyShort>
-      </li>
+
+          <BodyShort as="div" size="small" className="navds-list__item-content">
+            {title && (
+              <Label as="p" size="small">
+                {title}
+              </Label>
+            )}
+            {children}
+          </BodyShort>
+        </li>
+      </ListItemContext.Provider>
     );
   }
 );

@navikt/core/react/src/list/list.stories.tsx

@@ -117,3 +117,32 @@ export const Icons = {
     );
   },
 };
+
+export const Nested = {
+  render: () => {
+    return (
+      <List>
+        <List.Item title="Sed Do Eiusmod Tempor Incididunt">
+          Beskrivelsen på punkter er nærmere forklart <a href="/">her</a>
+          <List>
+            <List.Item title="Lorem Ipsum Dolor Sit Amet">
+              Beskrivelsen på punkter er nærmere forklart <a href="/">her</a>
+            </List.Item>
+            <List.Item title="Consectetur Adipiscing Elit">
+              Beskrivelsen på punkter er nærmere forklart <a href="/">her</a>
+            </List.Item>
+            <List.Item>
+              Beskrivelsen på punkter er nærmere forklart <a href="/">her</a>
+            </List.Item>
+            <List.Item>
+              Beskrivelsen på punkter er nærmere forklart <a href="/">her</a>
+            </List.Item>
+          </List>
+        </List.Item>
+        <List.Item>
+          Beskrivelsen på punkter er nærmere forklart <a href="/">her</a>
+        </List.Item>
+      </List>
+    );
+  },
+};

aksel.nav.no/website/pages/eksempler/list/nested.tsx

@@ -0,0 +1,44 @@
+import { List } from "@navikt/ds-react";
+import { withDsExample } from "components/website-modules/examples/withDsExample";
+
+const Example = () => {
+  return (
+    <List>
+      <List.Item title="Kritiske">
+        disse er problemer som må løses så fort som mulig—de hindrer folk i å
+        bruke siden i det hele tatt og kan være direkte farlig.
+      </List.Item>
+      <List.Item title="Høy">
+        brukere er forhindret i å forstå innholdet eller utføre kritiske
+        oppgaver, og det finnes ingen forsvarsstrategier eller alternative
+        løsninger.
+        <List>
+          <List.Item>
+            Rammeverket, inkludert navigasjon, påloggings- og søkefunksjoner
+          </List.Item>
+          <List.Item>Gjenbrukbare komponenter</List.Item>
+          <List.Item>Nøkkelstier gjennom nettstedet</List.Item>
+        </List>
+      </List.Item>
+      <List.Item title="Medium">
+        det er vanskelig, tidkrevende eller frustrerende for brukere å få
+        tilgang til innhold eller funksjonalitet.
+      </List.Item>
+      <List.Item title="Lav">
+        brukeren få tilgang til alt innhold og funksjonalitet, men
+        brukeropplevelsen er dårlig.
+      </List.Item>
+    </List>
+  );
+};
+
+export default withDsExample(Example);
+
+/* Storybook story */
+export const Demo = {
+  render: Example,
+};
+
+export const args = {
+  index: 4,
+};