Lerna versionbump [ci skip]

- @navikt/ds-react@0.13.2 - @navikt/ds-react-internal@0.8.2
[fix] field description as div (#1353 )
2026-10-15 18:22:02 +00:00 · 2021-12-02 13:23:57 +00:00 · 2021-12-02 14:05:07 +01:00 · 2021-11-26 10:57:26 +01:00 · 2021-11-18 11:57:06 +01:00 · 2021-11-17 14:28:50 +00:00
35 changed files with 635 additions and 91 deletions
@@ -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
@@ -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;
 }
@@ -1,6 +1,6 @@
 {
  "name": "@navikt/ds-css",
-  "version": "0.11.0",
+  "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.0",
+    "@navikt/ds-tokens": "^0.6.3",
    "normalize.css": "^8.0.1",
    "postcss": "^8.3.6",
    "postcss-cli": "^8.3.1",
@@ -1,6 +1,6 @@
 {
  "name": "@navikt/ds-icons",
-  "version": "0.6.2",
+  "version": "0.6.3",
  "private": false,
  "description": "NAVs egne ikoner i SVG og React format",
  "repository": {
@@ -35,7 +35,8 @@ function defaultTemplate(
  ${imports}
  ${interfaces}
  function ${componentName}(${props}) {
-    const titleId = _titleId ?? (title ? v4() : undefined);
+    const titleId = _titleId ?? (title ?
+      "icon-title-" + v4() : undefined);
    return ${jsx};
  }
  ${exports}`;
@@ -1,6 +1,6 @@
 {
  "name": "@navikt/ds-react",
-  "version": "0.13.0",
+  "version": "0.13.2",
  "private": false,
  "description": "NAV designsystem react components",
  "author": "NAV Designsystem team",
@@ -35,7 +35,7 @@
  },
  "dependencies": {
    "@material-ui/core": "^4.12.3",
-    "@navikt/ds-icons": "^0.6.2",
+    "@navikt/ds-icons": "^0.6.3",
    "@popperjs/core": "^2.10.1",
    "classnames": "^2.2.6",
    "react-collapse": "^5.1.0",
@@ -103,6 +103,7 @@ const Fieldset = forwardRef<HTMLFieldSetElement, FieldsetProps>(
          </Label>
          {!!description && (
            <BodyShort
+              as="div"
              className={cl("navds-fieldset__description", {
                "sr-only": !!hideLegend,
              })}
@@ -67,6 +67,7 @@ const Select = forwardRef<HTMLSelectElement, SelectProps>((props, ref) => {
      </Label>
      {!!description && (
        <BodyShort
+          as="div"
          className={cl("navds-select__description", {
            "sr-only": hideLabel,
          })}
@@ -66,6 +66,7 @@ const TextField = forwardRef<HTMLInputElement, TextFieldProps>((props, ref) => {

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

@@ -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>
@@ -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" />
@@ -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}
      />
@@ -44,7 +44,7 @@
        },
        {
          "destination": "tokens-cjs.js",
-          "format": "javascript/module"
+          "format": "javascript/module-flat"
        }
      ]
    }
@@ -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;
@@ -11,7 +11,10 @@ const formatToStyleDictionary = (
          (old, [key, val]) =>
            val.startsWith("rgba")
              ? { ...old, [key]: { value: val } }
-              : { ...old, [key]: { value: `{${val}.value}` } },
+              : {
+                  ...old,
+                  [key]: { value: `{${val.replace(/-/g, ".")}.value}` },
+                },
          {}
        )
      );
@@ -2,48 +2,70 @@ import formatToStyledDictionary from "../format-sd";

 describe("Check conversion to Styled-dictionary format", () => {
  test("Converting colors", () => {
-    const before = {
-      "navds-global-color-red-500": "rgba(1,1,1,1)",
-      "navds-global-color-red-400": "rgba(1,2,1,1)",
-      "navds-global-color-red-300": "rgba(1,3,1,1)",
-      "navds-semantic-color-danger": "navds-global-color-red-400",
-      "navds-semantic-color-danger-hover": "navds-global-color-red-300",
-    };
-
-    const after = {
-      "navds-global-color-red-500": { value: "rgba(1,1,1,1)" },
-      "navds-global-color-red-400": { value: "rgba(1,2,1,1)" },
-      "navds-global-color-red-300": { value: "rgba(1,3,1,1)" },
-      "navds-semantic-color-danger": {
-        value: "{navds-global-color-red-400.value}",
-      },
-      "navds-semantic-color-danger-hover": {
-        value: "{navds-global-color-red-300.value}",
-      },
-    };
-
-    expect(JSON.stringify(formatToStyledDictionary(before, "color"))).toBe(
-      JSON.stringify(after)
+    expect(
+      JSON.stringify(
+        formatToStyledDictionary(
+          {
+            "navds-global-color-red-500": "rgba(1,1,1,1)",
+            "navds-global-color-red-400": "rgba(1,2,1,1)",
+            "navds-global-color-red-300": "rgba(1,3,1,1)",
+            "navds-semantic-color-danger": "navds-global-color-red-400",
+            "navds-semantic-color-danger-hover": "navds-global-color-red-300",
+          },
+          "color"
+        )
+      )
+    ).toBe(
+      JSON.stringify({
+        navds: {
+          global: {
+            color: {
+              red: {
+                "500": { value: "rgba(1,1,1,1)" },
+                "400": { value: "rgba(1,2,1,1)" },
+                "300": { value: "rgba(1,3,1,1)" },
+              },
+            },
+          },
+          semantic: {
+            color: {
+              danger: {
+                hover: {
+                  value: "{navds.global.color.red.300.value}",
+                },
+                "@": { value: "{navds.global.color.red.400.value}" },
+              },
+            },
+          },
+        },
+      })
    );
  });

  test("Converting spacing", () => {
-    const before = {
-      "navds-spacing-1": "0.25rem",
-      "navds-spacing-2": "0.5rem",
-      "navds-spacing-3": "0.75rem",
-      "navds-spacing-4": "1rem",
-    };
-
-    const after = {
-      "navds-spacing-1": { value: "0.25rem" },
-      "navds-spacing-2": { value: "0.5rem" },
-      "navds-spacing-3": { value: "0.75rem" },
-      "navds-spacing-4": { value: "1rem" },
-    };
-
-    expect(JSON.stringify(formatToStyledDictionary(before, "spacing"))).toBe(
-      JSON.stringify(after)
+    expect(
+      JSON.stringify(
+        formatToStyledDictionary(
+          {
+            "navds-spacing-1": "0.25rem",
+            "navds-spacing-2": "0.5rem",
+            "navds-spacing-3": "0.75rem",
+            "navds-spacing-4": "1rem",
+          },
+          "spacing"
+        )
+      )
+    ).toBe(
+      JSON.stringify({
+        navds: {
+          spacing: {
+            "1": { value: "0.25rem" },
+            "2": { value: "0.5rem" },
+            "3": { value: "0.75rem" },
+            "4": { value: "1rem" },
+          },
+        },
+      })
    );
  });
 });
@@ -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)",
+      },
+    });
+  });
+});
@@ -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;
@@ -1,6 +1,6 @@
 {
  "name": "@navikt/ds-tokens",
-  "version": "0.6.0",
+  "version": "0.6.3",
  "private": false,
  "description": "Auto-generated design-tokens for NAV design-systems framework",
  "author": "NAV Designsystem team",
@@ -1 +1,435 @@
-{}
+{
+  "navds": {
+    "global": {
+      "color": {
+        "blue": {
+          "50": {
+            "value": "rgba(230, 240, 255, 1)"
+          },
+          "100": {
+            "value": "rgba(204, 225, 255, 1)"
+          },
+          "200": {
+            "value": "rgba(153, 195, 255, 1)"
+          },
+          "300": {
+            "value": "rgba(102, 165, 244, 1)"
+          },
+          "400": {
+            "value": "rgba(51, 134, 224, 1)"
+          },
+          "500": {
+            "value": "rgba(0, 103, 197, 1)"
+          },
+          "600": {
+            "value": "rgba(0, 86, 180, 1)"
+          },
+          "700": {
+            "value": "rgba(0, 69, 156, 1)"
+          },
+          "800": {
+            "value": "rgba(0, 52, 125, 1)"
+          },
+          "900": {
+            "value": "rgba(0, 34, 82, 1)"
+          }
+        },
+        "deepblue": {
+          "50": {
+            "value": "rgba(230, 241, 248, 1)"
+          },
+          "100": {
+            "value": "rgba(204, 226, 240, 1)"
+          },
+          "200": {
+            "value": "rgba(153, 196, 221, 1)"
+          },
+          "300": {
+            "value": "rgba(102, 163, 196, 1)"
+          },
+          "400": {
+            "value": "rgba(51, 128, 165, 1)"
+          },
+          "500": {
+            "value": "rgba(0, 91, 130, 1)"
+          },
+          "600": {
+            "value": "rgba(0, 80, 119, 1)"
+          },
+          "700": {
+            "value": "rgba(0, 67, 103, 1)"
+          },
+          "800": {
+            "value": "rgba(0, 52, 83, 1)"
+          },
+          "900": {
+            "value": "rgba(0, 36, 58, 1)"
+          }
+        },
+        "gray": {
+          "50": {
+            "value": "rgba(247, 247, 247, 1)"
+          },
+          "100": {
+            "value": "rgba(241, 241, 241, 1)"
+          },
+          "200": {
+            "value": "rgba(201, 201, 201, 1)"
+          },
+          "400": {
+            "value": "rgba(160, 160, 160, 1)"
+          },
+          "600": {
+            "value": "rgba(106, 106, 106, 1)"
+          },
+          "800": {
+            "value": "rgba(79, 79, 79, 1)"
+          },
+          "900": {
+            "value": "rgba(38, 38, 38, 1)"
+          }
+        },
+        "green": {
+          "50": {
+            "value": "rgba(243, 252, 245, 1)"
+          },
+          "100": {
+            "value": "rgba(204, 241, 214, 1)"
+          },
+          "200": {
+            "value": "rgba(153, 222, 173, 1)"
+          },
+          "300": {
+            "value": "rgba(102, 199, 134, 1)"
+          },
+          "400": {
+            "value": "rgba(51, 170, 95, 1)"
+          },
+          "500": {
+            "value": "rgba(6, 137, 58, 1)"
+          },
+          "600": {
+            "value": "rgba(0, 124, 46, 1)"
+          },
+          "700": {
+            "value": "rgba(0, 106, 35, 1)"
+          },
+          "800": {
+            "value": "rgba(0, 85, 25, 1)"
+          },
+          "900": {
+            "value": "rgba(0, 59, 15, 1)"
+          }
+        },
+        "lightblue": {
+          "50": {
+            "value": "rgba(235, 252, 255, 1)"
+          },
+          "100": {
+            "value": "rgba(216, 249, 255, 1)"
+          },
+          "200": {
+            "value": "rgba(181, 241, 255, 1)"
+          },
+          "300": {
+            "value": "rgba(151, 230, 255, 1)"
+          },
+          "400": {
+            "value": "rgba(124, 218, 248, 1)"
+          },
+          "500": {
+            "value": "rgba(102, 203, 236, 1)"
+          },
+          "600": {
+            "value": "rgba(76, 173, 205, 1)"
+          },
+          "700": {
+            "value": "rgba(54, 141, 168, 1)"
+          },
+          "800": {
+            "value": "rgba(35, 107, 125, 1)"
+          },
+          "900": {
+            "value": "rgba(19, 72, 82, 1)"
+          }
+        },
+        "limegreen": {
+          "50": {
+            "value": "rgba(253, 255, 230, 1)"
+          },
+          "100": {
+            "value": "rgba(249, 252, 204, 1)"
+          },
+          "200": {
+            "value": "rgba(236, 243, 153, 1)"
+          },
+          "300": {
+            "value": "rgba(217, 227, 102, 1)"
+          },
+          "400": {
+            "value": "rgba(193, 203, 51, 1)"
+          },
+          "500": {
+            "value": "rgba(162, 173, 0, 1)"
+          },
+          "600": {
+            "value": "rgba(147, 158, 0, 1)"
+          },
+          "700": {
+            "value": "rgba(127, 137, 0, 1)"
+          },
+          "800": {
+            "value": "rgba(102, 110, 0, 1)"
+          },
+          "900": {
+            "value": "rgba(71, 78, 0, 1)"
+          }
+        },
+        "nav": {
+          "red": {
+            "value": "rgba(195, 0, 0, 1)"
+          }
+        },
+        "orange": {
+          "50": {
+            "value": "rgba(255, 249, 240, 1)"
+          },
+          "100": {
+            "value": "rgba(255, 236, 204, 1)"
+          },
+          "200": {
+            "value": "rgba(255, 215, 153, 1)"
+          },
+          "300": {
+            "value": "rgba(255, 193, 102, 1)"
+          },
+          "400": {
+            "value": "rgba(255, 170, 51, 1)"
+          },
+          "500": {
+            "value": "rgba(255, 145, 0, 1)"
+          },
+          "600": {
+            "value": "rgba(212, 123, 0, 1)"
+          },
+          "700": {
+            "value": "rgba(168, 100, 0, 1)"
+          },
+          "800": {
+            "value": "rgba(125, 76, 0, 1)"
+          },
+          "900": {
+            "value": "rgba(82, 51, 0, 1)"
+          }
+        },
+        "purple": {
+          "50": {
+            "value": "rgba(239, 236, 244, 1)"
+          },
+          "100": {
+            "value": "rgba(224, 216, 233, 1)"
+          },
+          "200": {
+            "value": "rgba(192, 178, 210, 1)"
+          },
+          "300": {
+            "value": "rgba(161, 141, 187, 1)"
+          },
+          "400": {
+            "value": "rgba(130, 105, 162, 1)"
+          },
+          "500": {
+            "value": "rgba(99, 70, 137, 1)"
+          },
+          "600": {
+            "value": "rgba(82, 56, 116, 1)"
+          },
+          "700": {
+            "value": "rgba(65, 43, 93, 1)"
+          },
+          "800": {
+            "value": "rgba(48, 31, 70, 1)"
+          },
+          "900": {
+            "value": "rgba(31, 20, 47, 1)"
+          }
+        },
+        "red": {
+          "50": {
+            "value": "rgba(253, 232, 230, 1)"
+          },
+          "100": {
+            "value": "rgba(249, 210, 204, 1)"
+          },
+          "200": {
+            "value": "rgba(239, 168, 157, 1)"
+          },
+          "300": {
+            "value": "rgba(225, 128, 113, 1)"
+          },
+          "400": {
+            "value": "rgba(208, 92, 74, 1)"
+          },
+          "500": {
+            "value": "rgba(186, 58, 38, 1)"
+          },
+          "600": {
+            "value": "rgba(163, 42, 23, 1)"
+          },
+          "700": {
+            "value": "rgba(136, 29, 12, 1)"
+          },
+          "800": {
+            "value": "rgba(106, 18, 4, 1)"
+          },
+          "900": {
+            "value": "rgba(72, 9, 0, 1)"
+          }
+        },
+        "transparent": {
+          "value": "rgba(255, 255, 255, 0)"
+        },
+        "white": {
+          "value": "rgba(255, 255, 255, 1)"
+        }
+      }
+    },
+    "semantic": {
+      "color": {
+        "border": {
+          "default": {
+            "value": "{navds.global.color.gray.600.value}"
+          },
+          "muted": {
+            "value": "{navds.global.color.gray.400.value}"
+          }
+        },
+        "canvas": {
+          "background": {
+            "default": {
+              "value": "{navds.global.color.gray.100.value}"
+            },
+            "inverted": {
+              "value": "{navds.global.color.gray.900.value}"
+            },
+            "light": {
+              "value": "{navds.global.color.white.value}"
+            }
+          }
+        },
+        "component": {
+          "background": {
+            "alternate": {
+              "value": "{navds.global.color.gray.50.value}"
+            },
+            "inverted": {
+              "value": "{navds.global.color.gray.900.value}"
+            },
+            "light": {
+              "value": "{navds.global.color.white.value}"
+            }
+          }
+        },
+        "divider": {
+          "value": "{navds.global.color.gray.200.value}"
+        },
+        "feedback": {
+          "danger": {
+            "background": {
+              "value": "{navds.global.color.red.100.value}"
+            },
+            "border": {
+              "value": "{navds.global.color.red.500.value}"
+            },
+            "icon": {
+              "value": "{navds.global.color.red.500.value}"
+            },
+            "text": {
+              "value": "{navds.global.color.red.500.value}"
+            }
+          },
+          "info": {
+            "background": {
+              "value": "{navds.global.color.lightblue.100.value}"
+            },
+            "border": {
+              "value": "{navds.global.color.lightblue.700.value}"
+            },
+            "icon": {
+              "value": "{navds.global.color.lightblue.700.value}"
+            }
+          },
+          "success": {
+            "background": {
+              "value": "{navds.global.color.green.100.value}"
+            },
+            "border": {
+              "value": "{navds.global.color.green.500.value}"
+            },
+            "icon": {
+              "value": "{navds.global.color.green.600.value}"
+            }
+          },
+          "warning": {
+            "background": {
+              "value": "{navds.global.color.orange.100.value}"
+            },
+            "border": {
+              "value": "{navds.global.color.orange.600.value}"
+            },
+            "icon": {
+              "value": "{navds.global.color.orange.500.value}"
+            }
+          }
+        },
+        "focus": {
+          "value": "{navds.global.color.blue.800.value}",
+          "inverted": {
+            "value": "{navds.global.color.blue.200.value}"
+          }
+        },
+        "interaction": {
+          "danger": {
+            "default": {
+              "value": "{navds.global.color.red.500.value}"
+            },
+            "hover": {
+              "value": "{navds.global.color.red.600.value}"
+            },
+            "selected": {
+              "value": "{navds.global.color.red.700.value}"
+            }
+          },
+          "primary": {
+            "default": {
+              "value": "{navds.global.color.blue.500.value}"
+            },
+            "hover": {
+              "value": "{navds.global.color.blue.600.value}"
+            },
+            "selected": {
+              "value": "{navds.global.color.deepblue.500.value}"
+            }
+          }
+        },
+        "text": {
+          "default": {
+            "value": "{navds.global.color.gray.900.value}"
+          },
+          "inverted": {
+            "value": "{navds.global.color.white.value}"
+          },
+          "link": {
+            "value": "{navds.global.color.blue.500.value}",
+            "visited": {
+              "value": "{navds.global.color.purple.500.value}"
+            }
+          },
+          "muted": {
+            "value": "{navds.global.color.gray.600.value}"
+          }
+        }
+      }
+    }
+  }
+}
@@ -39,11 +39,8 @@ const gray = (n) => Color(lightgray).mix(Color(darkgray), n).hex();

 module.exports = {
  navds: {
-    spacing: {
-      ...(newSpacing?.navds?.spacing ?? {}),
-    },
-    ...(newColors?.global ?? {}),
-    ...(newColors?.semantic ?? {}),
+    ...(newSpacing?.navds ?? {}),
+    ...(newColors?.navds ?? {}),
    color: {
      white: { value: white },
      darkgray: { value: darkgray },
@@ -1,6 +1,6 @@
 {
  "name": "@navikt/ds-react-internal",
-  "version": "0.8.0",
+  "version": "0.8.2",
  "private": false,
  "description": "NAV internal designsystem react components",
  "author": "NAV Designsystem team",
@@ -33,8 +33,8 @@
    "watch": "tsc --watch -p tsconfig.esm.json"
  },
  "dependencies": {
-    "@navikt/ds-icons": "^0.6.2",
-    "@navikt/ds-react": "^0.13.0",
+    "@navikt/ds-icons": "^0.6.3",
+    "@navikt/ds-react": "^0.13.2",
    "@popperjs/core": "^2.10.1",
    "classnames": "^2.3.1",
    "copy-to-clipboard": "^3.3.1",
@@ -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)

@@ -4,7 +4,7 @@
  "version": "1.0.0",
  "private": true,
  "scripts": {
-    "test": "yarn workspace @navikt/ds-react test",
+    "test": "yarn workspace @navikt/ds-react test && yarn workspace @navikt/ds-tokens test",
    "postinstall": "husky install",
    "start": "yarn workspace website start",
    "boot": "yarn clean:lib && yarn build:packages --stream",
@@ -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);
-  }
-}
@@ -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>
@@ -46,6 +46,7 @@
 .card__grid {
  list-style: none;
  margin: 0;
+  padding: 0;
 }

 .card__wrapper {
Author	SHA1	Message	Date
github-actions[bot]	2ad9183b09	Lerna versionbump [ci skip] - @navikt/ds-react@0.13.2 - @navikt/ds-react-internal@0.8.2	2021-12-02 13:23:57 +00:00
Andreas Nordahl	627b4f06cb	[fix] field description as div (#1353 )	2021-12-02 14:05:07 +01:00
Ken	3977927ac8	Update README.md	2021-11-26 10:57:26 +01:00
Ken	6f81c2cf4e	Update update-tokens.yml	2021-11-18 11:57:06 +01:00
github-actions[bot]	46f97b006f	Lerna versionbump [ci skip] - @navikt/ds-css@0.11.4 - @navikt/ds-tokens@0.6.3	2021-11-17 14:28:50 +00:00
Ken	9338995a3c	[FIX] Nested token-parsing (#1347 )	2021-11-17 15:09:59 +01:00
github-actions[bot]	e3cf943ab3	Lerna versionbump [ci skip] - @navikt/ds-css@0.11.3	2021-11-15 13:33:02 +00:00
Andreas Nordahl	59a3c71821	[FIX] Reduce body line-height to make struts smaller	2021-11-15 14:12:54 +01:00
Andreas NordahlandKen	edab708a93	add security playbook card to front page. adjust styling (#1330 ) Co-authored-by: Ken <ken.aleksander@gmail.com>	2021-11-12 15:50:05 +01:00
github-actions[bot]	c291a6106f	Lerna versionbump [ci skip] - @navikt/ds-css@0.11.2 - @navikt/ds-tokens@0.6.2	2021-11-12 13:43:24 +00:00
github-actions[bot]andKenAJoh	8f0601e93f	[FIX] Tokens sync Figma (#1331 ) Co-authored-by: KenAJoh <KenAJoh@users.noreply.github.com>	2021-11-12 14:27:21 +01:00
github-actions[bot]	03a9d1a554	Lerna versionbump [ci skip] - @navikt/ds-css@0.11.1 - @navikt/ds-icons@0.6.3 - @navikt/ds-react@0.13.1 - @navikt/ds-tokens@0.6.1 - @navikt/ds-react-internal@0.8.1	2021-11-12 11:01:46 +00:00
github-actions[bot]andKenAJoh	c58688a966	[FIX] Tokens sync Figma (#1328 ) Co-authored-by: KenAJoh <KenAJoh@users.noreply.github.com>	2021-11-12 11:45:51 +01:00
Ken	f242e5028c	Fikset parsing til Style Dictionary format (#1329 )	2021-11-12 11:08:51 +01:00
KenandAndreas Nordahl	92e13a173f	[FIX ] ikon id prefikset (#1324 ) Co-authored-by: Andreas Nordahl <andnorda@gmail.com>	2021-11-12 10:05:52 +01:00