Page maxWidth-token (#2572)

* 🎨 La til ny token * 🐛 maksbredde var kalkulert feil * 💄 CSS for max-width text * 📝 Changeset og bedre dokumentasjon * 🐛 Docs for max-width token * 🎨 tailwind-støtte for ny maxWidth-token * 🎨 rem -> px * 📝 Dynamic padding-inline -> gutters * ♻️ Fjernet duplikat padding-inline * ♻️ Oppdatert token-navn fra max-width-text -> text-width-max * 🐛 Fikset key i token-docs * 📝 Changeset for ny token
navikt · Jan 11, 2024 · 145ce2e · 145ce2e
1 parent 557786b
commit 145ce2e
Show file tree

Hide file tree

Showing 15 changed files with 58 additions and 29 deletions.
diff --git a/.changeset/great-cups-do-token.md b/.changeset/great-cups-do-token.md
@@ -0,0 +1,5 @@
+---
+"@navikt/ds-tokens": patch
+---
+
+Tokens: Ny token `--a-text-width-max: 576px`
diff --git a/.changeset/great-cups-do.md b/.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`
diff --git a/@navikt/aksel/src/codemod/transforms/v2.0.0/update-js-tokens/update-js-tokens.ts b/@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));

diff --git a/@navikt/aksel/src/codemod/utils/check.ts b/@navikt/aksel/src/codemod/utils/check.ts
@@ -12,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 () => {
@@ -22,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));
@@ -34,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,
-        }),
+        })
       );
     });
   });

diff --git a/@navikt/core/css/primitives/page.css b/@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);
   }
 }
diff --git a/@navikt/core/react/src/accordion/AccordionItem.tsx b/@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;
diff --git a/@navikt/core/react/src/dropdown/Toggle.tsx b/@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;
diff --git a/@navikt/core/react/src/layout/page/Page.tsx b/@navikt/core/react/src/layout/page/Page.tsx
@@ -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
    */

diff --git a/@navikt/core/react/src/layout/page/parts/PageBlock.tsx b/@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];

diff --git a/@navikt/core/react/src/tooltip/Tooltip.tsx b/@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;
diff --git a/@navikt/core/react/src/util/hooks/useCallbackRef.ts b/@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);
 

diff --git a/@navikt/core/react/src/util/hooks/useControllableState.ts b/@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;

diff --git a/@navikt/core/tailwind/src/index.ts b/@navikt/core/tailwind/src/index.ts
@@ -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"]),
     },
   },
 };

diff --git a/@navikt/core/tokens/docs.json b/@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",

diff --git a/@navikt/core/tokens/src/index.js b/@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: {