Version Packages (#1829 )

Co-authored-by: github-actions[bot] <github-actions[bot]@users.noreply.github.com>
New/list (#1823 )
2026-10-14 09:42:02 +00:00 · 2023-02-28 15:47:06 +01:00 · 2023-02-28 15:44:13 +01:00 · 2023-02-28 14:59:28 +01:00 · 2023-02-28 14:23:44 +01:00
26 changed files with 244 additions and 70 deletions
@@ -1,5 +1,11 @@
 # @navikt/ds-codemod

+## 2.4.2
+
+### Patch Changes
+
+- [#1823](https://github.com/navikt/aksel/pull/1823) [`a7ce61f84`](https://github.com/navikt/aksel/commit/a7ce61f840e5bfaafc4f70e550167fe0095555b8) Thanks [@kschieren](https://github.com/kschieren)! - added support for nested lists
+
 ## 2.4.1

 ## 2.4.0
@@ -1,6 +1,6 @@
 {
  "name": "@navikt/ds-codemod",
-  "version": "2.4.1",
+  "version": "2.4.2",
  "description": "Aksel codemods for NAVs designsystem",
  "author": "Aksel | NAV designsystem team",
  "license": "MIT",
@@ -39,8 +39,8 @@
    "build-pict": "svgr --silent --index-template index-template.js --out-dir src/pictograms pictograms"
  },
  "dependencies": {
-    "@navikt/ds-icons": "^2.4.1",
-    "@navikt/ds-react": "^2.4.1",
+    "@navikt/ds-icons": "^2.4.2",
+    "@navikt/ds-react": "^2.4.2",
    "clsx": "^1.1.1"
  },
  "devDependencies": {
@@ -1,5 +1,11 @@
 # @navikt/ds-css

+## 2.4.2
+
+### Patch Changes
+
+- [#1823](https://github.com/navikt/aksel/pull/1823) [`a7ce61f84`](https://github.com/navikt/aksel/commit/a7ce61f840e5bfaafc4f70e550167fe0095555b8) Thanks [@kschieren](https://github.com/kschieren)! - added support for nested lists
+
 ## 2.4.1

 ## 2.4.0
@@ -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 {
@@ -1,6 +1,6 @@
 {
  "name": "@navikt/ds-css",
-  "version": "2.4.1",
+  "version": "2.4.2",
  "description": "CSS for NAV Designsystem",
  "author": "Aksel | NAV designsystem team",
  "keywords": [
@@ -20,7 +20,7 @@
    "watch": "postcss --watch --use postcss-import -o dist/index.css index.css"
  },
  "devDependencies": {
-    "@navikt/ds-tokens": "^2.4.1",
+    "@navikt/ds-tokens": "^2.4.2",
    "normalize.css": "^8.0.1",
    "postcss": "^8.4.0",
    "postcss-cli": "^9.0.0",
@@ -1,5 +1,14 @@
 # @navikt/ds-react

+## 2.4.2
+
+### Patch Changes
+
+- [#1823](https://github.com/navikt/aksel/pull/1823) [`a7ce61f84`](https://github.com/navikt/aksel/commit/a7ce61f840e5bfaafc4f70e550167fe0095555b8) Thanks [@kschieren](https://github.com/kschieren)! - added support for nested lists
+
+- Updated dependencies [[`a7ce61f84`](https://github.com/navikt/aksel/commit/a7ce61f840e5bfaafc4f70e550167fe0095555b8)]:
+  - @navikt/ds-icons@2.4.2
+
 ## 2.4.1

 ### Patch Changes
@@ -1,6 +1,6 @@
 {
  "name": "@navikt/ds-react",
-  "version": "2.4.1",
+  "version": "2.4.2",
  "description": "Aksel react-components for NAV designsystem",
  "author": "Aksel | NAV designsystem team",
  "license": "MIT",
@@ -37,7 +37,7 @@
  },
  "dependencies": {
    "@floating-ui/react": "0.17.0",
-    "@navikt/ds-icons": "^2.4.1",
+    "@navikt/ds-icons": "^2.4.2",
    "@radix-ui/react-tabs": "1.0.0",
    "@radix-ui/react-toggle-group": "1.0.0",
    "clsx": "^1.2.1",
@@ -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;
@@ -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>
    );
  }
 );
@@ -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>
+    );
+  },
+};
@@ -1,5 +1,11 @@
 # @navikt/ds-tailwind

+## 2.4.2
+
+### Patch Changes
+
+- [#1823](https://github.com/navikt/aksel/pull/1823) [`a7ce61f84`](https://github.com/navikt/aksel/commit/a7ce61f840e5bfaafc4f70e550167fe0095555b8) Thanks [@kschieren](https://github.com/kschieren)! - added support for nested lists
+
 ## 2.4.1

 ## 2.4.0
@@ -1,6 +1,6 @@
 {
  "name": "@navikt/ds-tailwind",
-  "version": "2.4.1",
+  "version": "2.4.2",
  "description": "Tailwind config based on @navikt/ds-tokens",
  "author": "Aksel | NAV designsystem team",
  "keywords": [
@@ -22,7 +22,7 @@
    "directory": "@navikt/core/tailwind"
  },
  "devDependencies": {
-    "@navikt/ds-tokens": "^2.4.1",
+    "@navikt/ds-tokens": "^2.4.2",
    "@types/jest": "^29.0.0",
    "color": "4.2.3",
    "jest": "^29.0.0",
@@ -1,5 +1,11 @@
 # @navikt/ds-tokens

+## 2.4.2
+
+### Patch Changes
+
+- [#1823](https://github.com/navikt/aksel/pull/1823) [`a7ce61f84`](https://github.com/navikt/aksel/commit/a7ce61f840e5bfaafc4f70e550167fe0095555b8) Thanks [@kschieren](https://github.com/kschieren)! - added support for nested lists
+
 ## 2.4.1

 ## 2.4.0
@@ -1,6 +1,6 @@
 {
  "name": "@navikt/ds-tokens",
-  "version": "2.4.1",
+  "version": "2.4.2",
  "description": "Design-tokens for NAV designsystem",
  "author": "Aksel | NAV designsystem team",
  "keywords": [
@@ -1,5 +1,11 @@
 # @navikt/ds-icons

+## 2.4.2
+
+### Patch Changes
+
+- [#1823](https://github.com/navikt/aksel/pull/1823) [`a7ce61f84`](https://github.com/navikt/aksel/commit/a7ce61f840e5bfaafc4f70e550167fe0095555b8) Thanks [@kschieren](https://github.com/kschieren)! - added support for nested lists
+
 ## 2.4.1

 ## 2.4.0
@@ -1,6 +1,6 @@
 {
  "name": "@navikt/ds-icons",
-  "version": "2.4.1",
+  "version": "2.4.2",
  "description": "Aksel icons for NAV",
  "author": "Aksel | NAV designsystem team",
  "repository": {
@@ -1,5 +1,11 @@
 # @navikt/ds-css-internal

+## 2.4.2
+
+### Patch Changes
+
+- [#1823](https://github.com/navikt/aksel/pull/1823) [`a7ce61f84`](https://github.com/navikt/aksel/commit/a7ce61f840e5bfaafc4f70e550167fe0095555b8) Thanks [@kschieren](https://github.com/kschieren)! - added support for nested lists
+
 ## 2.4.1

 ## 2.4.0
@@ -1,6 +1,6 @@
 {
  "name": "@navikt/ds-css-internal",
-  "version": "2.4.1",
+  "version": "2.4.2",
  "description": "CSS for NAV internal Designsystem-components",
  "author": "Aksel | NAV designsystem team",
  "keywords": [
@@ -1,5 +1,15 @@
 # @navikt/ds-react-internal

+## 2.4.2
+
+### Patch Changes
+
+- [#1823](https://github.com/navikt/aksel/pull/1823) [`a7ce61f84`](https://github.com/navikt/aksel/commit/a7ce61f840e5bfaafc4f70e550167fe0095555b8) Thanks [@kschieren](https://github.com/kschieren)! - added support for nested lists
+
+- Updated dependencies [[`a7ce61f84`](https://github.com/navikt/aksel/commit/a7ce61f840e5bfaafc4f70e550167fe0095555b8)]:
+  - @navikt/ds-react@2.4.2
+  - @navikt/ds-icons@2.4.2
+
 ## 2.4.1

 ### Patch Changes
@@ -1,6 +1,6 @@
 {
  "name": "@navikt/ds-react-internal",
-  "version": "2.4.1",
+  "version": "2.4.2",
  "description": "Aksel react components for internal UIs in NAV",
  "author": "Aksel | NAV designsystem team",
  "license": "MIT",
@@ -35,8 +35,8 @@
    "watch": "tsc --watch -p tsconfig.esm.json"
  },
  "dependencies": {
-    "@navikt/ds-icons": "^2.4.1",
-    "@navikt/ds-react": "^2.4.1",
+    "@navikt/ds-icons": "^2.4.2",
+    "@navikt/ds-react": "^2.4.2",
    "clsx": "^1.1.1",
    "copy-to-clipboard": "^3.3.1"
  },
@@ -1,4 +1,4 @@
-FROM node:16.15.0-alpine3.14
+FROM node:18.1-alpine3.14
 RUN apk add --no-cache libc6-compat

 ENV NODE_ENV production
@@ -15,14 +15,14 @@
    "website"
  ],
  "dependencies": {
-    "@navikt/ds-codemod": "^2.4.1",
-    "@navikt/ds-css": "^2.4.1",
-    "@navikt/ds-css-internal": "^2.4.1",
-    "@navikt/ds-icons": "^2.4.1",
-    "@navikt/ds-react": "^2.4.1",
-    "@navikt/ds-react-internal": "^2.4.1",
-    "@navikt/ds-tailwind": "^2.4.1",
-    "@navikt/ds-tokens": "^2.4.1"
+    "@navikt/ds-codemod": "^2.4.2",
+    "@navikt/ds-css": "^2.4.2",
+    "@navikt/ds-css-internal": "^2.4.2",
+    "@navikt/ds-icons": "^2.4.2",
+    "@navikt/ds-react": "^2.4.2",
+    "@navikt/ds-react-internal": "^2.4.2",
+    "@navikt/ds-tailwind": "^2.4.2",
+    "@navikt/ds-tokens": "^2.4.2"
  },
  "devDependencies": {
    "prettier-plugin-tailwindcss": "^0.2.3"
@@ -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,
+};
@@ -110,7 +110,6 @@ export const getServerSideProps: GetServerSideProps = async (
  const { page } = await getClient().fetch(akselStandaloneBySlug, {
    slug: `side/${context.params.slug}`,
  });
-  console.log(page);

  return {
    props: {
@@ -10,8 +10,8 @@
    "preview": "vite preview"
  },
  "dependencies": {
-    "@navikt/ds-css": "2.4.1",
-    "@navikt/ds-react": "2.4.1",
+    "@navikt/ds-css": "2.4.2",
+    "@navikt/ds-react": "2.4.2",
    "react": "^18.0.0",
    "react-dom": "^18.0.0"
  },
Author	SHA1	Message	Date
github-actions[bot]andgithub-actions[bot]	0cba7a93b8	Version Packages (#1829 ) Co-authored-by: github-actions[bot] <github-actions[bot]@users.noreply.github.com>	2023-02-28 15:47:06 +01:00
Kai Erik Schieren Ken Ken github-actions[bot]Ken github-actions[bot]Snyk bot	a7ce61f840	New/list (#1823 ) * 🎉 setup * 💄 add stylesheet * 🎨 conditional type * 🎨 add listitem * 🎨 add title + desc + refactor * 🎨 added title and description * ♿ add aria labels * 🎨 add headingTag prop * 🎨 add stories * 🎨 update ListItem API * 💄 ul markers * 🎨 update markers * 🎨 add icons story * 🎨 ordered markers * 🎨 update stories * 🎨 tweak list props * 💄 update classes * 💄 update classes again * 🎨 remove icon if ol * 🎨 update stories * 🎨 use default counter for ol * 🎨 h4 > span * 🎨 use bodyshort default * 🎨 update stories * 🎨 tweaks * 🎨 Css-tokens * 🎨 update aria Co-authored-by: Ken <KenAJoh@users.noreply.github.com> * 🎨 refactor css and remove test story co authored by OleJørgen and Ken * 🎨 add examples * 🎨 update examples * Update @navikt/core/css/list.css Co-authored-by: Ken <26967723+KenAJoh@users.noreply.github.com> * Update @navikt/core/css/list.css Co-authored-by: Ken <26967723+KenAJoh@users.noreply.github.com> * 🎨 La til tokens-doc * 🔖 changeset * 🎨 add console warn * 💄 tweak margin to support nested list * 🎨 nested story * 🎨 add nested example * 🚧 detect nested lists * 💄 change margins for nested lists * 💄 tweak margins * Update @navikt/core/react/src/list/List.tsx * ⬆️ Storybook beta 45 -> 54 * ✨ add fixedWeeks option to standalone (#1827) * ✨ add fixedWeeks option to standalone * 🔖 changeset * ♿ Fikset siteimprove feilmeldinger for kode-eksempler * Version Packages (#1828) Co-authored-by: github-actions[bot] <github-actions[bot]@users.noreply.github.com> * 🔥 Fjernet redundant console.log * [Snyk] Security upgrade node from 16.13.1-alpine3.14 to 18.1-alpine3.14 (#1826) * 🔖 changeset --------- Co-authored-by: Ken <ken.aleksander@gmail.com> Co-authored-by: Ken <KenAJoh@users.noreply.github.com> Co-authored-by: Ken <26967723+KenAJoh@users.noreply.github.com> Co-authored-by: github-actions[bot] <41898282+github-actions[bot]@users.noreply.github.com> Co-authored-by: github-actions[bot] <github-actions[bot]@users.noreply.github.com> Co-authored-by: Snyk bot <snyk-bot@snyk.io>	2023-02-28 15:44:13 +01:00
Snyk bot	35e8da7811	[Snyk] Security upgrade node from 16.13.1-alpine3.14 to 18.1-alpine3.14 (#1826 )	2023-02-28 14:59:28 +01:00
Ken	8953185f80	🔥 Fjernet redundant console.log	2023-02-28 14:23:44 +01:00