@navikt/ds-react 4.11.2 → 4.12.0

package/src/list/List.tsx

@@ -24,6 +24,11 @@ export interface ListProps extends React.HTMLAttributes<HTMLDivElement> {
    * @default "h3"
    */
   headingTag?: React.ElementType<any>;
+  /**
+   * Changes padding, height and font-size
+   * @default medium
+   */
+  size?: "medium" | "small";
 }
 
 export interface ListComponent
@@ -37,13 +42,15 @@ export interface ListComponent
 }
 
 interface ListContextProps {
-  listType: "ul" | "ol";
+  listType: ListProps["as"];
   isNested: boolean | null;
+  size: ListProps["size"];
 }
 
 export const ListContext = createContext<ListContextProps>({
   listType: "ul",
   isNested: null,
+  size: "medium",
 });
 
 export const List = forwardRef<HTMLDivElement, ListProps>(
@@ -55,35 +62,44 @@ export const List = forwardRef<HTMLDivElement, ListProps>(
       title,
       description,
       headingTag = "h3",
+      size,
       ...rest
     },
     ref
   ) => {
     const ariaId = useId();
 
-    const { isNested } = useContext(ListContext);
+    const { isNested, size: _size } = useContext(ListContext);
 
+    const listSize = size ?? _size ?? "medium";
     return (
       <ListContext.Provider
         value={{
           listType: ListTag,
           isNested: isNested === null ? false : true,
+          size: listSize,
         }}
       >
         <div
           {...rest}
           ref={ref}
-          className={cl("navds-list", className, {
+          className={cl("navds-list", `navds-list--${listSize}`, className, {
             "navds-list--nested": isNested === null ? false : true,
           })}
         >
           {title && (
-            <Heading id={`tittel-${ariaId}`} size="small" as={headingTag}>
+            <Heading
+              id={`tittel-${ariaId}`}
+              size={listSize === "medium" ? "small" : "xsmall"}
+              as={headingTag}
+            >
               {title}
             </Heading>
           )}
           {description && (
-            <BodyShort id={`description-${ariaId}`}>{description}</BodyShort>
+            <BodyShort size={listSize} id={`description-${ariaId}`}>
+              {description}
+            </BodyShort>
           )}
           <ListTag
             aria-labelledby={title && `tittel-${ariaId}`}

package/src/list/ListItem.tsx

@@ -20,7 +20,7 @@ export interface ListItemProps extends React.HTMLAttributes<HTMLLIElement> {
 
 export const ListItem = forwardRef<HTMLLIElement, ListItemProps>(
   ({ className, children, title, icon, ...rest }, ref) => {
-    const { listType, isNested } = useContext(ListContext);
+    const { listType, size } = useContext(ListContext);
 
     if (listType === "ol" && icon) {
       console.warn(
@@ -29,13 +29,7 @@ export const ListItem = forwardRef<HTMLLIElement, ListItemProps>(
     }
 
     return (
-      <li
-        {...rest}
-        ref={ref}
-        className={cl("navds-list__item", className, {
-          "navds-list__item--noMargin": isNested,
-        })}
-      >
+      <li {...rest} ref={ref} className={cl("navds-list__item", className)}>
         {listType === "ul" && (
           <div
             className={cl({
@@ -62,9 +56,9 @@ export const ListItem = forwardRef<HTMLLIElement, ListItemProps>(
           </div>
         )}
 
-        <BodyShort as="div" size="small" className="navds-list__item-content">
+        <BodyShort as="div" size={size} className="navds-list__item-content">
           {title && (
-            <Label as="p" size="small">
+            <Label as="p" size={size}>
               {title}
             </Label>
           )}

package/src/list/list.stories.tsx

@@ -6,7 +6,7 @@ import {
 } from "@navikt/aksel-icons";
 import { Meta } from "@storybook/react";
 import React from "react";
-import { List } from "..";
+import { List, VStack } from "..";
 
 export default {
   title: "ds-react/List",
@@ -91,6 +91,137 @@ export const WithHeading = {
   },
 };
 
+export const SizesUl = {
+  render: () => {
+    return (
+      <VStack gap="8">
+        <List
+          title="Medium list"
+          description="Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam vel risus volutpat."
+          size="medium"
+        >
+          <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>
+        <List
+          title="Small list"
+          description="Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam vel risus volutpat."
+          size="small"
+        >
+          <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>
+      </VStack>
+    );
+  },
+};
+
+export const SizesOl = {
+  render: () => {
+    return (
+      <VStack gap="8">
+        <List
+          title="Medium list"
+          description="Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam vel risus volutpat."
+          size="medium"
+          as="ol"
+        >
+          <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>
+        <List
+          title="Small list"
+          description="Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam vel risus volutpat."
+          size="small"
+          as="ol"
+        >
+          <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>
+      </VStack>
+    );
+  },
+};
+
+export const SizesIcons = {
+  render: () => {
+    return (
+      <VStack gap="8">
+        <List
+          title="Medium list"
+          description="Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam vel risus volutpat."
+          size="medium"
+        >
+          <List.Item
+            icon={<HeadHeartIcon aria-hidden />}
+            title="Lorem Ipsum Dolor Sit Amet"
+          >
+            Beskrivelsen på punkter er nærmere forklart <a href="/">her</a>
+          </List.Item>
+          <List.Item
+            icon={<HeadHeartIcon aria-hidden />}
+            title="Consectetur Adipiscing Elit"
+          >
+            Beskrivelsen på punkter er nærmere forklart <a href="/">her</a>
+          </List.Item>
+          <List.Item icon={<HeadHeartIcon aria-hidden />}>
+            Beskrivelsen på punkter er nærmere forklart <a href="/">her</a>
+          </List.Item>
+        </List>
+        <List
+          title="Small list"
+          description="Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam vel risus volutpat."
+          size="small"
+        >
+          <List.Item
+            icon={<HeadHeartIcon aria-hidden />}
+            title="Lorem Ipsum Dolor Sit Amet"
+          >
+            Beskrivelsen på punkter er nærmere forklart <a href="/">her</a>
+          </List.Item>
+          <List.Item
+            icon={<HeadHeartIcon aria-hidden />}
+            title="Consectetur Adipiscing Elit"
+          >
+            Beskrivelsen på punkter er nærmere forklart <a href="/">her</a>
+          </List.Item>
+          <List.Item icon={<HeadHeartIcon aria-hidden />}>
+            Beskrivelsen på punkter er nærmere forklart <a href="/">her</a>
+          </List.Item>
+        </List>
+      </VStack>
+    );
+  },
+};
+
 export const Icons = {
   render: () => {
     return (