Page maxWidth-token

.changeset/great-cups-do-token.md

@@ -0,0 +1,5 @@
+---
+"@navikt/ds-tokens": patch
+---
+
+Tokens: Ny token `--a-text-width-max: 576px`

.changeset/great-cups-do.md

@@ -0,0 +1,6 @@
+---
+"@navikt/ds-react": patch
+"@navikt/ds-css": patch
+---
+
+Page: Lagt til ny bakgrunnsfarge `surface-subtle` og ny maksbredde på Page.Block `text`

@navikt/aksel/src/codemod/transforms/v2.0.0/update-js-tokens/update-js-tokens.ts

@@ -21,7 +21,7 @@ export default function transformer(file: JSCodeshift, api) {
 
   const jsImport = root.find(j.ImportDeclaration).filter((x) => {
     return ["@navikt/ds-tokens/dist/tokens"].includes(
-      x.node.source.value as string,
+      x.node.source.value as string
     );
   });
 
@@ -36,7 +36,7 @@ export default function transformer(file: JSCodeshift, api) {
     let foundName: string = "";
 
     getImportSpecifier(j, root, name, "@navikt/ds-tokens/dist/tokens").forEach(
-      (x) => (foundName = x.node.imported.name),
+      (x) => (foundName = x.node.imported.name)
     );
 
     if (name === foundName) {
@@ -45,15 +45,15 @@ export default function transformer(file: JSCodeshift, api) {
           j,
           root,
           name,
-          "@navikt/ds-tokens/dist/tokens",
+          "@navikt/ds-tokens/dist/tokens"
         ) || name;
 
       renameImportSpecifier(
         j,
         root,
         name,
         out,
-        "@navikt/ds-tokens/dist/tokens",
+        "@navikt/ds-tokens/dist/tokens"
       );
 
       let code = root.toSource(getLineTerminator(file.source));

@navikt/aksel/src/codemod/transforms/v2.0.0/update-less-tokens/update-less-tokens.ts

@@ -1,5 +1,5 @@
-import { translateToken } from "../../../utils/translate-token";
 import { tokens } from "../../../tokens-map.js";
+import { translateToken } from "../../../utils/translate-token";
 
 /**
  * @param {import('jscodeshift').FileInfo} file

@navikt/aksel/src/codemod/transforms/v2.0.0/update-sass-tokens/update-sass-tokens.ts

@@ -1,5 +1,5 @@
-import { translateToken } from "../../../utils/translate-token";
 import { tokens } from "../../../tokens-map.js";
+import { translateToken } from "../../../utils/translate-token";
 
 /**
  * @param {import('jscodeshift').FileInfo} file

@navikt/aksel/src/codemod/utils/check.ts

@@ -1,10 +1,8 @@
+import { applyTransform } from "jscodeshift/dist/testUtils";
 import fs from "node:fs";
 import path from "node:path";
-
 import prettier from "prettier";
 
-import { applyTransform } from "jscodeshift/dist/testUtils";
-
 interface TestT {
   fixture: string;
   migration: string;
@@ -14,7 +12,7 @@ interface TestT {
 
 export function check(
   dirName: string,
-  { fixture, migration, extension = "js", options = {} }: TestT,
+  { fixture, migration, extension = "js", options = {} }: TestT
 ) {
   describe(migration, () => {
     it(fixture, async () => {
@@ -24,7 +22,7 @@ export function check(
       const source = fs.readFileSync(inputPath, "utf8");
       const expected = fs.readFileSync(
         path.join(fixtureDir, `${fixture}.output.${extension}`),
-        "utf8",
+        "utf8"
       );
       // Assumes transform is one level up from tests directory
       const module = await import(path.join(dirName, "..", migration));
@@ -36,11 +34,11 @@ export function check(
       expect(
         await prettier.format(output, {
           parser: parser === "js" ? "typescript" : parser,
-        }),
+        })
       ).toBe(
         await prettier.format(expected, {
           parser: parser === "js" ? "typescript" : parser,
-        }),
+        })
       );
     });
   });

@navikt/core/css/primitives/page.css

@@ -10,6 +10,9 @@
 
 /* Page.Block */
 .navds-pageblock {
+  /* stylelint-disable-next-line length-zero-no-unit */
+  --__ac-page-padding-inline: 0px;
+
   margin-inline: auto;
   width: 100%;
 }
@@ -27,6 +30,10 @@
   padding-block-end: var(--a-spacing-8);
 }
 
+.navds-pageblock--text {
+  max-width: calc(var(--a-text-width-max) + var(--__ac-page-padding-inline) + var(--__ac-page-padding-inline));
+}
+
 .navds-pageblock--md {
   max-width: 768px;
 }
@@ -44,11 +51,13 @@
 }
 
 .navds-pageblock--gutters {
-  padding-inline: var(--a-spacing-4);
+  --__ac-page-padding-inline: var(--a-spacing-4);
+
+  padding-inline: var(--__ac-page-padding-inline);
 }
 
 @media (min-width: 1024px) {
   .navds-pageblock--gutters {
-    padding-inline: var(--a-spacing-12);
+    --__ac-page-padding-inline: var(--a-spacing-12);
   }
 }

@navikt/core/react/src/accordion/AccordionItem.tsx

@@ -38,7 +38,7 @@ export const AccordionItemContext =
 const AccordionItem = forwardRef<HTMLDivElement, AccordionItemProps>(
   (
     { children, className, open, defaultOpen = false, onOpenChange, ...rest },
-    ref,
+    ref
   ) => {
     const [_open, _setOpen] = useControllableState({
       defaultValue: defaultOpen,
@@ -78,7 +78,7 @@ const AccordionItem = forwardRef<HTMLDivElement, AccordionItemProps>(
         </AccordionItemContext.Provider>
       </div>
     );
-  },
+  }
 );
 
 export default AccordionItem;

@navikt/core/react/src/date/monthpicker/MonthCaption.tsx

@@ -1,10 +1,10 @@
-import { ArrowLeftIcon, ArrowRightIcon } from "@navikt/aksel-icons";
 import { isAfter, isBefore } from "date-fns";
 import setYear from "date-fns/setYear";
 import startOfMonth from "date-fns/startOfMonth";
 import startOfYear from "date-fns/startOfYear";
 import React from "react";
 import { useDayPicker } from "react-day-picker";
+import { ArrowLeftIcon, ArrowRightIcon } from "@navikt/aksel-icons";
 import { Button } from "../../button";
 import { Select } from "../../form/Select";
 import { useSharedMonthContext } from "../context";

@navikt/core/react/src/dropdown/Toggle.tsx

@@ -42,7 +42,7 @@ export const Toggle = forwardRef<HTMLButtonElement, ToggleProps>(
         className={cl("navds-dropdown__toggle", className)}
       />
     );
-  },
+  }
 );
 
 export default Toggle;

@navikt/core/react/src/layout/page/Page.tsx

@@ -1,6 +1,6 @@
-import bgColors from "@navikt/ds-tokens/src/colors-bg.json";
 import cl from "clsx";
 import React, { forwardRef } from "react";
+import bgColors from "@navikt/ds-tokens/src/colors-bg.json";
 import { OverridableComponent } from "../../util";
 import { PageBlock } from "./parts/PageBlock";
 
@@ -14,7 +14,7 @@ export interface PageProps extends React.HTMLAttributes<HTMLElement> {
    * Background color. Accepts a color token.
    * @default bg-default
    */
-  background?: keyof typeof bgColors.a;
+  background?: keyof typeof bgColors.a | "surface-subtle";
   /**
    * Allows better positioning of footer
    */

@navikt/core/react/src/layout/page/parts/PageBlock.tsx

@@ -2,16 +2,17 @@ import cl from "clsx";
 import React, { forwardRef } from "react";
 import { OverridableComponent } from "../../../util/OverridableComponent";
 
-export const widths = ["md", "lg", "xl", "2xl"] as const;
+export const widths = ["text", "md", "lg", "xl", "2xl"] as const;
 
 export interface PageBlockProps extends React.HTMLAttributes<HTMLDivElement> {
   /**
    * Predefined max-width
    * @example
-   * md:  768px
-   * lg:  1024px
-   * xl:  1280px
-   * 2xl: 1440px
+   * text: 576px + dynamic gutters
+   * md:   768px
+   * lg:   1024px
+   * xl:   1280px
+   * 2xl:  1440px
    * @default max-width: 100%;
    */
   width?: (typeof widths)[number];

@navikt/core/react/src/tooltip/Tooltip.tsx

@@ -113,7 +113,7 @@ export const Tooltip = forwardRef<HTMLDivElement, TooltipProps>(
       maxChar = 80,
       ...rest
     },
-    ref,
+    ref
   ) => {
     const [_open, _setOpen] = useControllableState({
       defaultValue: defaultOpen,
@@ -168,11 +168,11 @@ export const Tooltip = forwardRef<HTMLDivElement, TooltipProps>(
 
     const mergedRef = useMemo(
       () => mergeRefs([ref, refs.setFloating]),
-      [refs.setFloating, ref],
+      [refs.setFloating, ref]
     );
     const childMergedRef = useMemo(
       () => mergeRefs([(children as any).ref, refs.setReference]),
-      [children, refs.setReference],
+      [children, refs.setReference]
     );
 
     if (
@@ -181,15 +181,15 @@ export const Tooltip = forwardRef<HTMLDivElement, TooltipProps>(
       (children as any) === React.Fragment
     ) {
       console.error(
-        "<Tooltip> children needs to be a single ReactElement and not: <React.Fragment/> | <></>",
+        "<Tooltip> children needs to be a single ReactElement and not: <React.Fragment/> | <></>"
       );
       return null;
     }
 
     if (content?.length > maxChar) {
       _open &&
         console.warn(
-          `Because of strict accessibility concers we encourage all Tooltips to have less than 80 characters. Can be overwritten with the maxChar-prop\n\nLength:${content.length}\nTooltip-content: ${content}`,
+          `Because of strict accessibility concers we encourage all Tooltips to have less than 80 characters. Can be overwritten with the maxChar-prop\n\nLength:${content.length}\nTooltip-content: ${content}`
         );
     }
 
@@ -203,7 +203,7 @@ export const Tooltip = forwardRef<HTMLDivElement, TooltipProps>(
             "aria-describedby": _open
               ? cl(ariaId, children?.props["aria-describedby"])
               : children?.props["aria-describedby"],
-          }),
+          })
         )}
         <FloatingPortal root={rootElement}>
           {_open && (
@@ -222,7 +222,7 @@ export const Tooltip = forwardRef<HTMLDivElement, TooltipProps>(
                 className: cl(
                   "navds-tooltip",
                   "navds-detail navds-detail--small",
-                  className,
+                  className
                 ),
               })}
               data-side={placement}
@@ -267,7 +267,7 @@ export const Tooltip = forwardRef<HTMLDivElement, TooltipProps>(
         </FloatingPortal>
       </>
     );
-  },
+  }
 );
 
 export default Tooltip;

@navikt/core/react/src/util/hooks/useCallbackRef.ts

@@ -7,7 +7,7 @@ import { useCallback, useEffect, useRef } from "react";
  */
 export function useCallbackRef<T extends (...args: any[]) => any>(
   callback: T | undefined,
-  deps: React.DependencyList = [],
+  deps: React.DependencyList = []
 ) {
   const callbackRef = useRef(callback);
 

@navikt/core/react/src/util/hooks/useControllableState.ts

@@ -33,7 +33,7 @@ export function useControllableState<T>({
 
       onChangeProp(nextValue);
     },
-    [controlled, onChangeProp, value],
+    [controlled, onChangeProp, value]
   );
 
   return [value, setValue] as const;

@navikt/core/tailwind/src/index.ts

@@ -1,5 +1,5 @@
-import * as TokensBuild from "@navikt/ds-tokens/dist/tokens";
 import { writeFileSync } from "fs";
+import * as TokensBuild from "@navikt/ds-tokens/dist/tokens";
 import { getColors } from "./colors";
 import { getBreakpoints } from "./getBreakpoints";
 import kebabCase from "./kebabCase";
@@ -26,6 +26,8 @@ const config = {
       lineHeight: Reducer(tokens, ["font-line-height"]),
       fontFamily: Reducer(tokens, ["font-family"]),
       borderRadius: Reducer(tokens, ["border-radius"]),
+      // TODO: Add next major-release
+      // maxWidth: Reducer(tokens, ["text-width"]),
     },
   },
 };

@navikt/core/tokens/docs.json

@@ -42,6 +42,7 @@
       "description": "@media (max-width: 1279px)"
     }
   ],
+  "text-width": [{ "name": "--a-text-width-max", "value": "576px" }],
   "font": [
     {
       "name": "--a-font-family",

@navikt/core/tokens/src/index.js

@@ -14,6 +14,11 @@ module.exports = {
       xl: { value: "1280px" },
       "xl-down": { value: "1279px" },
     },
+    text: {
+      width: {
+        max: { value: "576px" },
+      },
+    },
     font: {
       family: { value: "'Source Sans Pro', Arial, sans-serif" },
       line: {