Lerna versionbump [ci skip]

- @navikt/ds-react@0.13.2
 - @navikt/ds-react-internal@0.8.2

.github/workflows/update-tokens.yml

@@ -36,6 +36,6 @@ jobs:
           branch: figma-tokens-sync
           delete-branch: true
           title: "[FEATURE] Tokens sync Figma"
-          commit-message: "Ikoner synket fra figma"
+          commit-message: "Tokens synket fra figma"
           committer: GitHub <noreply@github.com>
           signoff: false

@navikt/core/css/baseline/baseline.css

@@ -22,7 +22,7 @@ html {
 
 body {
   font-family: var(--navds-font-family);
-  line-height: 1.375;
+  line-height: 1.333;
   color: var(--navds-color-text-primary);
   font-size: 1.125rem;
 }

@navikt/core/css/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@navikt/ds-css",
-  "version": "0.11.1",
+  "version": "0.11.4",
   "private": false,
   "description": "Css for NAV Designsystem components",
   "author": "NAV Designsystem team",
@@ -21,7 +21,7 @@
     "watch": "postcss --watch --use postcss-import -o dist/index.css index.css"
   },
   "devDependencies": {
-    "@navikt/ds-tokens": "^0.6.1",
+    "@navikt/ds-tokens": "^0.6.3",
     "normalize.css": "^8.0.1",
     "postcss": "^8.3.6",
     "postcss-cli": "^8.3.1",

@navikt/core/react/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@navikt/ds-react",
-  "version": "0.13.1",
+  "version": "0.13.2",
   "private": false,
   "description": "NAV designsystem react components",
   "author": "NAV Designsystem team",

@navikt/core/react/src/form/Fieldset/Fieldset.tsx

@@ -103,6 +103,7 @@ const Fieldset = forwardRef<HTMLFieldSetElement, FieldsetProps>(
           </Label>
           {!!description && (
             <BodyShort
+              as="div"
               className={cl("navds-fieldset__description", {
                 "sr-only": !!hideLegend,
               })}

@navikt/core/react/src/form/Select.tsx

@@ -67,6 +67,7 @@ const Select = forwardRef<HTMLSelectElement, SelectProps>((props, ref) => {
       </Label>
       {!!description && (
         <BodyShort
+          as="div"
           className={cl("navds-select__description", {
             "sr-only": hideLabel,
           })}

@navikt/core/react/src/form/TextField.tsx

@@ -66,6 +66,7 @@ const TextField = forwardRef<HTMLInputElement, TextFieldProps>((props, ref) => {
 
       {!!description && (
         <BodyShort
+          as="div"
           className={cl("navds-text-field__description", {
             "sr-only": hideLabel,
           })}

@navikt/core/react/src/form/Textarea.tsx

@@ -81,6 +81,7 @@ const Textarea = forwardRef<HTMLTextAreaElement, TextareaProps>(
         </Label>
         {!!description && (
           <BodyShort
+            as="div"
             className={cl("navds-textarea__description", {
               "sr-only": hideLabel,
             })}

@navikt/core/react/src/form/checkbox/Checkbox.tsx

@@ -72,6 +72,7 @@ const Checkbox = forwardRef<HTMLInputElement, CheckboxProps>((props, ref) => {
       </BodyShort>
       {props.description && (
         <BodyShort
+          as="div"
           size={size}
           id={inputDescriptionId}
           className="navds-checkbox__description"

@navikt/core/react/src/form/checkbox/stories/checkbox.stories.tsx

@@ -21,7 +21,7 @@ export const All = () => {
         description="Exercitation do labore"
       >
         <Checkbox value="Apple">Apple</Checkbox>
-        <Checkbox value="Orange" description="Laborum ad">
+        <Checkbox value="Orange" description={<div>Laborum ad</div>}>
           Orange
         </Checkbox>
         <Checkbox value="Melon">Melon</Checkbox>

@navikt/core/react/src/form/radio/Radio.tsx

@@ -55,6 +55,7 @@ const Radio = forwardRef<HTMLInputElement, RadioProps>((props, ref) => {
       </BodyShort>
       {props.description && (
         <BodyShort
+          as="div"
           size={size}
           id={inputDescriptionId}
           className="navds-radio__description"

@navikt/core/react/src/form/radio/stories/radio.stories.tsx

@@ -16,9 +16,12 @@ export const All = () => {
         <Radio value="Melon">Melon</Radio>
       </RadioGroup>
       <h2>description</h2>
-      <RadioGroup legend="Mollit eiusmod" description="Exercitation do labore">
+      <RadioGroup
+        legend="Mollit eiusmod"
+        description={<div>Exercitation do labore</div>}
+      >
         <Radio value="Apple">Apple</Radio>
-        <Radio value="Orange" description="Laborum ad">
+        <Radio value="Orange" description={<div>Laborum ad</div>}>
           Orange
         </Radio>
         <Radio value="Melon">Melon</Radio>

@navikt/core/react/src/form/search-field/SearchField.tsx

@@ -94,6 +94,7 @@ const SearchField = forwardRef<HTMLDivElement, SearchFieldProps>(
         </Label>
         {!!description && (
           <BodyShort
+            as="div"
             className={cl("navds-text-field__description", {
               "sr-only": hideLabel,
             })}

@navikt/core/react/src/form/search-field/stories/search-field.stories.tsx

@@ -15,7 +15,7 @@ export const All = () => {
       <h1>SearchField</h1>
       <SearchField
         label="Mollit eiusmod"
-        description="Ea cupidatat eu sunt commodo"
+        description={<div>Ea cupidatat eu sunt commodo</div>}
       >
         <SearchField.Input />
         <SearchField.Button>

@navikt/core/react/src/form/stories/fieldset.stories.tsx

@@ -21,9 +21,13 @@ export const All = () => {
 
       <Fieldset
         legend="Mollit eiusmod"
-        description="Quis reprehenderit esse cillum"
+        description={<div>Quis reprehenderit esse cillum</div>}
       >
-        <TextField label="Textfield label" hideLabel />
+        <TextField
+          label="Textfield label"
+          hideLabel
+          description={<div>Quis reprehenderit esse cillum</div>}
+        />
         <TextField label="Textfield label" hideLabel />
       </Fieldset>
 

@navikt/core/react/src/form/stories/select.stories.tsx

@@ -19,7 +19,7 @@ export const All = () => {
 
       <h2>Description</h2>
 
-      <Select label="Ipsum enim quis culpa" description="Aute enim">
+      <Select label="Ipsum enim quis culpa" description={<div>Aute enim</div>}>
         <option value="">Velg land</option>
         <option value="norge">Norge</option>
         <option value="sverige">Sverige</option>

@navikt/core/react/src/form/stories/text-field.stories.tsx

@@ -15,7 +15,10 @@ export const All = () => {
 
       <h2>Description</h2>
 
-      <TextField label="Laborum excepteur" description="Cillum mollit" />
+      <TextField
+        label="Laborum excepteur"
+        description={<div>Cillum mollit</div>}
+      />
 
       <h2>Passord-type</h2>
       <TextField label="Passord" type="password" />

@navikt/core/react/src/form/stories/textarea.stories.tsx

@@ -23,7 +23,7 @@ export const All = () => {
 
       <Textarea
         label="In anim elit"
-        description="Reprehenderit esse proident"
+        description={<div>Reprehenderit esse proident</div>}
         value={value}
         onChange={handleChange}
       />

@navikt/core/tokens/config.json

@@ -44,7 +44,7 @@
         },
         {
           "destination": "tokens-cjs.js",
-          "format": "javascript/module"
+          "format": "javascript/module-flat"
         }
       ]
     }

@navikt/core/tokens/figma/deepen.ts

@@ -1,8 +1,12 @@
+import unifyNestedLevel from "./unify-nested-level";
+
 const deepen = (obj: { [key: string]: { value: string } }) => {
   const result = {};
 
+  const workObj = unifyNestedLevel(obj);
+
   // For each object path (property key) in the object
-  for (const objectPath in obj) {
+  for (const objectPath in workObj) {
     // Split path into component parts
     const parts = objectPath.split("-");
 
@@ -12,9 +16,8 @@ const deepen = (obj: { [key: string]: { value: string } }) => {
       const part = parts.shift();
       target = target[part] = target[part] || {};
     }
-
     // Set value at end of path
-    target[parts[0]] = obj[objectPath];
+    target[parts[0]] = workObj[objectPath];
   }
 
   return result;

@navikt/core/tokens/figma/tests/format-sd.test.ts

@@ -30,10 +30,10 @@ describe("Check conversion to Styled-dictionary format", () => {
           semantic: {
             color: {
               danger: {
-                value: "{navds.global.color.red.400.value}",
                 hover: {
                   value: "{navds.global.color.red.300.value}",
                 },
+                "@": { value: "{navds.global.color.red.400.value}" },
               },
             },
           },

@navikt/core/tokens/figma/tests/unify-nested-level.test.ts

@@ -0,0 +1,43 @@
+import unifyNestedLevel from "../unify-nested-level";
+
+describe("Check unifying of nested levels", () => {
+  test("Check color nesting", () => {
+    const obj = {
+      "navds-global-color-green-50": { value: "rbga(0,1,0,0)" },
+      "navds-global-color-green-500": { value: "rbga(0,2,0,0)" },
+      "navds-semantic-color-primary-hover": {
+        value: "rbga(0,3,0,0)",
+      },
+      "navds-semantic-color-primary-hover-subtle": {
+        value: "rbga(0,4,0,0)",
+      },
+      "navds-semantic-color-danger": { value: "rbga(0,5,0,0)" },
+      "navds-semantic-color-danger-hover": {
+        value: "rbga(0,6,0,0)",
+      },
+      "navds-semantic-color-danger-hover-subtle": {
+        value: "rbga(0,7,0,0)",
+      },
+    };
+
+    const newObj = unifyNestedLevel(obj);
+
+    expect(newObj).toEqual({
+      "navds-global-color-green-50": { value: "rbga(0,1,0,0)" },
+      "navds-global-color-green-500": { value: "rbga(0,2,0,0)" },
+      "navds-semantic-color-primary-hover-@": {
+        value: "rbga(0,3,0,0)",
+      },
+      "navds-semantic-color-primary-hover-subtle": {
+        value: "rbga(0,4,0,0)",
+      },
+      "navds-semantic-color-danger-@-@": { value: "rbga(0,5,0,0)" },
+      "navds-semantic-color-danger-hover-@": {
+        value: "rbga(0,6,0,0)",
+      },
+      "navds-semantic-color-danger-hover-subtle": {
+        value: "rbga(0,7,0,0)",
+      },
+    });
+  });
+});

@navikt/core/tokens/figma/unify-nested-level.ts

@@ -0,0 +1,22 @@
+const unifyNestedLevel = (obj: { [key: string]: { value: string } }) => {
+  // deep copy
+  const workObj = JSON.parse(JSON.stringify(obj));
+
+  Object.keys(workObj).forEach((k) => {
+    const deeperKeys = Object.keys(workObj).filter(
+      (k2) => k2.startsWith(`${k}-`) && k2.length > k.length
+    );
+    if (deeperKeys.length > 0) {
+      const neededNestedLevel =
+        Math.max(...deeperKeys.map((k) => k.split("-").length)) -
+        k.split("-").length;
+
+      delete Object.assign(workObj, {
+        [k + "-@".repeat(neededNestedLevel)]: workObj[k],
+      })[k];
+    }
+  });
+  return workObj;
+};
+
+export default unifyNestedLevel;

@navikt/core/tokens/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@navikt/ds-tokens",
-  "version": "0.6.1",
+  "version": "0.6.3",
   "private": false,
   "description": "Auto-generated design-tokens for NAV design-systems framework",
   "author": "NAV Designsystem team",

@navikt/core/tokens/src/colors.json

@@ -324,6 +324,9 @@
             },
             "inverted": {
               "value": "{navds.global.color.gray.900.value}"
+            },
+            "light": {
+              "value": "{navds.global.color.white.value}"
             }
           }
         },

@navikt/internal/react/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@navikt/ds-react-internal",
-  "version": "0.8.1",
+  "version": "0.8.2",
   "private": false,
   "description": "NAV internal designsystem react components",
   "author": "NAV Designsystem team",
@@ -34,7 +34,7 @@
   },
   "dependencies": {
     "@navikt/ds-icons": "^0.6.3",
-    "@navikt/ds-react": "^0.13.1",
+    "@navikt/ds-react": "^0.13.2",
     "@popperjs/core": "^2.10.1",
     "classnames": "^2.3.1",
     "copy-to-clipboard": "^3.3.1",

README.md

@@ -26,7 +26,7 @@ Repoet inneholder følgende:
 - [Eksempler på forskjellige frontend-oppsett](https://github.com/navikt/nav-frontend-moduler/tree/master/examples) til applikasjoner som skal bruke komponentene
 - [Storybook](https://navikt.github.io/Designsystemet/?path=/story/ds-react-kom-i-gang--page) for v2 komponenter (wip) og eldre komponenter.
 
-## Bidra
+## Bidrag
 
 Gå til [CONTRIBUTING.md](https://github.com/navikt/nav-frontend-moduler/blob/master/CONTRIBUTING.md)
 

website/src/components/card/card.less

@@ -1,6 +1,6 @@
 .card {
-  height: 22rem;
   width: 18rem;
+  height: 24rem;
   text-decoration: none;
   color: var(--navds-color-darkgray);
   display: flex;
@@ -25,11 +25,10 @@
 }
 
 .card__grid {
-  column-gap: 1rem;
-  row-gap: 1rem;
-  display: grid;
-  grid-template-columns: repeat(4, 1fr);
-  padding: 0;
+  display: flex;
+  gap: 1rem;
+  flex-wrap: wrap;
+  justify-content: center;
 }
 
 .card__icon {
@@ -63,6 +62,7 @@
   font-size: 1.5rem;
   line-height: 1.75rem;
   font-weight: 600;
+  text-align: center;
 }
 
 .card:hover .card__title,
@@ -73,15 +73,3 @@
 .card__content {
   text-align: center;
 }
-
-@media screen and (max-width: 1350px) {
-  .card__grid {
-    grid-template-columns: repeat(2, 1fr);
-  }
-}
-
-@media screen and (max-width: 700px) {
-  .card__grid {
-    grid-template-columns: repeat(1, 1fr);
-  }
-}

website/src/components/layout/forside/Forside.jsx

@@ -1,7 +1,7 @@
 import React from "react";
 import { Ingress, Sidetittel } from "nav-frontend-typografi";
 import Card from "../../card/Card";
-import { Star, Facilitet, HandsHeart, Like } from "@navikt/ds-icons";
+import { Star, Facilitet, HandsHeart, Like, Locked } from "@navikt/ds-icons";
 import { NAVLogoDark } from "../../assets/images/svg";
 import "./styles.less";
 /* import Lenke from "nav-frontend-lenker"; */
@@ -61,6 +61,19 @@ const Forside = ({ ...props }) => (
             icon={<Like focusable="false" />}
           />
         </li>
+        <li>
+          <Card
+            content={
+              <>
+                <p>Hvordan vi utvikler sikker software i NAV.</p>
+                <p>(Krever GitHub bruker i navikt org)</p>
+              </>
+            }
+            title="Security Champions Playbook"
+            link="https://improved-train-2f244007.pages.github.io/"
+            icon={<Locked focusable="false" />}
+          />
+        </li>
       </ol>
     </nav>
   </div>

website/src/components/layout/forside/styles.less

@@ -46,6 +46,7 @@
 .card__grid {
   list-style: none;
   margin: 0;
+  padding: 0;
 }
 
 .card__wrapper {