Lerna versionbump [ci skip]

- @navikt/ds-css@0.12.11-next.0 - @navikt/ds-react@0.14.10-next.0 - @navikt/ds-react-internal@0.9.10-next.0
v
2026-10-16 10:42:03 +00:00 · 2022-01-15 22:32:02 +01:00 · 2022-01-15 22:29:35 +01:00 · 2022-01-15 22:22:40 +01:00 · 2022-01-14 12:28:46 +01:00 · 2022-01-14 12:22:44 +01:00
48 changed files with 1740 additions and 1454 deletions
@@ -1,16 +1,10 @@
-const getStories = () => {
-  return process.env.stories
-    ? [`../@navikt/**/${process.env.stories}.stories.@(js|jsx|ts|tsx|mdx)`]
-    : ["../@navikt/**/*.stories.@(js|jsx|ts|tsx|mdx)"];
-};
-
 module.exports = {
  webpackFinal: async (config, { configType }) => {
    config.devServer = { stats: "errors-only" };
    return config;
  },
  devServer: { stats: "errors-only" },
-  stories: () => getStories(),
+  stories: ["../@navikt/**/*.stories.@(js|jsx|ts|tsx|mdx)"],
  addons: [
    "@storybook/addon-docs",
    "@storybook/addon-a11y",
@@ -30,7 +24,4 @@ module.exports = {
      },
    },
  ],
-  core: {
-    builder: "webpack5",
-  },
 };
@@ -74,10 +74,6 @@
  --navds-button-color-danger-border-focus: var(
    --navds-semantic-color-component-background-light
  );
-
-  /* Loader */
-  --navds-loader-color-on-button-background: rgba(255, 255, 255, 0.3);
-  --navds-loader-color-on-button-foreground: currentColor;
 }

 .navds-button {
@@ -259,18 +255,7 @@
 **************************/

 .navds-button:disabled {
-  cursor: not-allowed;
-}
-
-.navds-button:disabled:not(.navds-button--loading) {
  opacity: 0.3;
-}
-
-.navds-button .navds-loader .navds-loader__foreground {
-  stroke: var(--navds-loader-color-on-button-foreground);
-}
-
-.navds-button--primary .navds-loader .navds-loader__background,
-.navds-button--danger .navds-loader .navds-loader__background {
-  stroke: var(--navds-loader-color-on-button-background);
+  cursor: not-allowed;
+  transform: none;
 }
@@ -14,7 +14,7 @@
 }

 /* Applied when hideLegend is applied to fieldset */
-.navds-fieldset > .navds-sr-only + :not(:first-child):not(:empty) {
+.navds-fieldset > .sr-only + :not(:first-child):not(:empty) {
  margin-top: 0;
 }

@@ -4,6 +4,8 @@
 }

 /* Applied when hideLabel is applied to form-element */
+.navds-form-field > .sr-only + :not(:first-child):not(:empty),
+.navds-form-field > .sr-only + input:not(:first-child),
 .navds-form-field > .navds-sr-only + :not(:first-child):not(:empty),
 .navds-form-field > .navds-sr-only + input:not(:first-child) {
  margin-top: 0;
@@ -1,11 +1,48 @@
 :root {
-  --navds-search-field-color-shadow-error: var(
-    --navds-semantic-color-interaction-danger
+  --navds-search-field-color-input-hover: var(
+    --navds-semantic-color-interaction-primary
  );
-  --navds-search-field-color-border-error: var(
-    --navds-semantic-color-interaction-danger
+  --navds-search-field-color-button-text: var(--navds-semantic-color-text);
+  --navds-search-field-color-button-hover: var(
+    --navds-semantic-color-interaction-primary
  );
-  --navds-search-field-color-clearbutton-border: var(
+  --navds-search-field-color-button-border-hover-focus: var(
+    --navds-semantic-color-interaction-primary
+  );
+  --navds-search-field-color-button-border-focus: var(
+    --navds-semantic-color-border
+  );
+  --navds-search-field-color-input-inverted: var(
+    --navds-semantic-color-component-background-light
+  );
+  --navds-search-field-color-input-inverted-border: var(
+    --navds-semantic-color-component-background-light
+  );
+  --navds-search-field-color-input-inverted-background: var(
+    --navds-semantic-color-component-background-inverted
+  );
+  --navds-search-field-color-input-inverted-background-active: var(
+    --navds-semantic-color-component-background-light
+  );
+  --navds-search-field-color-input-inverted-active: var(
+    --navds-semantic-color-text
+  );
+  --navds-search-field-color-input-inverted-border-active: var(
+    --navds-semantic-color-component-background-inverted
+  );
+  --navds-search-field-color-input-inverted-background-focus: var(
+    --navds-semantic-color-component-background-light
+  );
+  --navds-search-field-color-input-inverted-focus: var(
+    --navds-semantic-color-text
+  );
+  --navds-search-field-color-input-inverted-border-focus: var(
+    --navds-semantic-color-component-background-inverted
+  );
+  --navds-search-field-color-input-inverted-hover-focus: var(
+    --navds-semantic-color-focus-inverted
+  );
+  --navds-search-field-color-button-inverted-focus: var(
    --navds-semantic-color-border
  );
 }
@@ -14,46 +51,137 @@
  display: flex;
  align-items: center;
  justify-content: center;
+  position: relative;
+}
+
+.navds-search-field__input-icon {
+  position: absolute;
+  left: 0;
+  padding: 0 var(--navds-spacing-4);
+  align-items: center;
+  display: flex;
+  pointer-events: none;
+}
+
+.navds-search-field__input {
+  padding-left: var(--navds-spacing-11);
+  padding-right: var(--navds-spacing-12);
+  border-width: 1px;
 }

 .navds-form-field--small .navds-search-field__input {
-  padding: 0.15rem;
  min-height: 32px;
+  padding: 0.15rem var(--navds-spacing-8) 0.15rem var(--navds-spacing-7);
 }

-.navds-search-field__input-wrapper > *:not(:first-child):not(:last-child) {
-  border-radius: 0;
+.navds-form-field--small .navds-search-field__input-icon {
+  padding: 0 var(--navds-spacing-2);
 }

-.navds-search-field__input-wrapper > :first-child {
-  border-top-right-radius: 0;
-  border-bottom-right-radius: 0;
+.navds-search-field__input:hover {
+  border-color: var(--navds-search-field-color-input-hover);
 }

-.navds-search-field__input-wrapper > :last-child {
-  border-top-left-radius: 0;
-  border-bottom-left-radius: 0;
-}
+/* Clear Button */

-.navds-search-field__input-wrapper > :last-child:first-child {
-  border-radius: 4px;
-}
-
-.navds-search-field__input-wrapper :focus {
-  z-index: var(--navds-z-index-focus);
-}
-
-.navds-search-field__button,
 .navds-search-field__clear-button {
-  flex-shrink: 0;
+  position: absolute;
+  right: 0;
+  color: var(--navds-search-field-color-button-text);
+  appearance: none;
+  background: none;
+  height: 48px;
+  width: 48px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  border: 1px solid transparent;
+  border-radius: 4px;
+  cursor: pointer;
+  font-size: 1.5rem;
 }

-.navds-search-field--error
-  .navds-search-field__input:not(:hover):not(:focus):not(:disabled) {
-  box-shadow: 0 0 0 1px var(--navds-search-field-color-shadow-error) inset;
-  border-color: var(--navds-search-field-color-border-error);
+.navds-form-field--small .navds-search-field__clear-button {
+  height: 32px;
+  width: 32px;
+  font-size: 1rem;
 }

+.navds-search-field__clear-button:focus {
+  box-shadow: var(--navds-shadow-focus);
+  border-color: var(--navds-search-field-color-button-border-focus);
+  outline: none;
+}
+
+.navds-search-field__clear-button:hover {
+  color: var(--navds-search-field-color-button-hover);
+}
+
+.navds-search-field__clear-button:hover:focus {
+  border-color: var(--navds-search-field-color-button-border-hover-focus);
+}
+
+/* Inverted */
+.navds-search-field--inverted
+  > .navds-search-field__input-wrapper
+  > .navds-search-field__input {
+  background-color: var(--navds-search-field-color-inverted-background);
+  color: var(--navds-search-field-color-input-inverted);
+  border-color: var(--navds-search-field-color-input-inverted-border);
+}
+
+.navds-search-field--inverted
+  > .navds-search-field__input-wrapper[data-value="true"]
+  > .navds-search-field__input {
+  background-color: var(
+    --navds-search-field-color-input-inverted-background-active
+  );
+  color: var(--navds-search-field-color-input-inverted-active);
+  border-color: var(--navds-search-field-color-input-inverted-border-active);
+}
+
+.navds-search-field--inverted
+  > .navds-search-field__input-wrapper[data-value="true"] {
+  color: var(--navds-search-field-color-input-inverted-active);
+}
+
+.navds-search-field--inverted > .navds-search-field__input-wrapper {
+  color: var(--navds-search-field-color-input-inverted);
+}
+
+.navds-search-field--inverted
+  > .navds-search-field__input-wrapper
+  > .navds-search-field__input:focus {
+  background-color: var(
+    --navds-search-field-color-input-inverted-background-focus
+  );
+  color: var(--navds-search-field-color-input-inverted-focus);
+  border-color: var(--navds-search-field-color-input-inverted-border-focus);
+  box-shadow: 0 0 0 3px var(--navds-semantic-color-focus-inverted);
+}
+
+.navds-search-field--inverted
+  > .navds-search-field__input-wrapper:focus-within {
+  color: var(--navds-search-field-color-input-inverted-focus);
+}
+
+/* Inveted clear button */
+
+.navds-search-field--inverted
+  > .navds-search-field__input-wrapper
+  > .navds-search-field__clear-button:focus {
+  box-shadow: 0 0 0 3px var(--navds-semantic-color-focus-inverted);
+  border-color: var(--navds-search-field-color-button-inverted-focus);
+  outline: none;
+}
+
+.navds-search-field--inverted
+  > .navds-search-field__input-wrapper
+  > .navds-search-field__clear-button:hover:focus {
+  border-color: var(--navds-search-field-color-input-inverted-hover-focus);
+}
+
+/* disabled */
 .navds-search-field--disabled {
  opacity: 0.3;
 }
@@ -210,7 +210,7 @@
  appearance: none;
 }

-.navds-switch--disabled:not(.navds-switch--loading) {
+.navds-switch--disabled {
  opacity: 0.3;
 }

@@ -24,13 +24,13 @@
  padding: 0.5rem;
  background-color: var(--navds-text-field-color-background);
  border-radius: 4px;
-  border: 1px solid var(--navds-text-field-color-border);
+  border: 2px solid var(--navds-text-field-color-border);
  min-height: 48px;
  width: 100%;
 }

 .navds-form-field--small > .navds-text-field__input {
-  padding: 0 0.25rem;
+  padding: 0 0.15rem;
  min-height: 32px;
 }

@@ -52,13 +52,6 @@
 */
 .navds-text-field--error > .navds-text-field__input:not(:hover):not(:disabled) {
  border-color: var(--navds-text-field-color-border-error);
-  box-shadow: 0 0 0 1px var(--navds-text-field-color-border-error);
-}
-
-.navds-text-field--error
-  > .navds-text-field__input:focus:not(:hover):not(:disabled) {
-  box-shadow: 0 0 0 1px var(--navds-text-field-color-border-error),
-    var(--navds-shadow-focus);
 }

 /* Disabled handling */
@@ -12,6 +12,8 @@
  );
  --navds-loader-color-inverted-background: rgba(255, 255, 255, 0.3);
  --navds-loader-color-transparent-background: transparent;
+  --navds-loader-color-on-button-background: rgba(255, 255, 255, 0.3);
+  --navds-loader-color-on-button-foreground: currentColor;
 }

 .navds-loader {
@@ -76,6 +78,27 @@
  width: 1rem;
 }

+/*
+ * Button spesific styling
+ */
+
+.navds-button .navds-loader .navds-loader__foreground {
+  stroke: var(--navds-loader-color-on-button-foreground);
+}
+
+.navds-button:hover .navds-loader .navds-loader__background {
+  stroke: var(--navds-loader-color-on-button-background);
+}
+
+.navds-button:active .navds-loader .navds-loader__background {
+  stroke: var(--navds-loader-color-on-button-background);
+}
+
+.navds-button--primary .navds-loader .navds-loader__background,
+.navds-button--danger .navds-loader .navds-loader__background {
+  stroke: var(--navds-loader-color-on-button-background);
+}
+
@keyframes loader-rotate {
  100% {
    transform: rotate(360deg);
@@ -1,6 +1,6 @@
 {
  "name": "@navikt/ds-css",
-  "version": "0.12.13",
+  "version": "0.12.11-next.0",
  "private": false,
  "description": "Css for NAV Designsystem components",
  "author": "NAV Designsystem team",
@@ -893,24 +893,12 @@
    "created_at": "2020-07-01T10:37:42.891Z",
    "pageName": "Interface"
  },
-  {
-    "name": "Filter2",
-    "description": "",
-    "created_at": "2022-01-14T09:16:08.202Z",
-    "pageName": "Interface"
-  },
  {
    "name": "FilterFilled",
    "description": "",
    "created_at": "2021-01-11T13:37:55.605Z",
    "pageName": "Interface"
  },
-  {
-    "name": "FilterFilled2",
-    "description": "",
-    "created_at": "2022-01-14T09:16:08.197Z",
-    "pageName": "Interface"
-  },
  {
    "name": "Findout",
    "description": "",
@@ -1,6 +1,6 @@
 {
  "name": "@navikt/ds-icons",
-  "version": "0.7.3",
+  "version": "0.7.2",
  "private": false,
  "description": "NAVs egne ikoner i SVG og React format",
  "repository": {
@@ -42,7 +42,6 @@
  "devDependencies": {
    "@svgr/cli": "^5.5.0",
    "@types/lodash.startcase": "^4.4.6",
-    "@types/rimraf": "3.0.2",
    "@types/uuid": "^8.3.1",
    "axios": "^0.21.3",
    "copyfiles": "^2.4.1",
@@ -1,3 +1,3 @@
 <svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
-<path fill-rule="evenodd" clip-rule="evenodd" d="M16.8634 1.00122C18.1639 0.974609 19.5426 1.3819 20.5704 2.35845C21.5981 3.33501 22.0267 4.64511 21.9987 5.88083C21.9709 7.10846 21.4908 8.35534 20.5704 9.22999L11.1693 18.163C10.6021 18.7019 9.81338 18.9683 9.05641 18.9838C8.29093 18.9995 7.45868 18.76 6.83035 18.163C6.20202 17.5659 5.95004 16.7751 5.96653 16.0478C5.98283 15.3285 6.26318 14.579 6.83035 14.0401L13.3388 7.85568C13.7382 7.47618 14.3857 7.47618 14.7851 7.85568C15.1845 8.23518 15.1845 8.85048 14.7851 9.22999L8.27667 15.4144C8.13723 15.5469 8.01819 15.7922 8.01145 16.0896C8.0049 16.3789 8.10622 16.6267 8.27667 16.7887C8.44712 16.9506 8.70788 17.0469 9.01237 17.0407C9.32537 17.0343 9.58355 16.9212 9.72299 16.7887L19.1241 7.85568C19.6168 7.38747 19.9355 6.64474 19.9538 5.83898C19.9719 5.0413 19.6939 4.27422 19.1241 3.73276C18.5542 3.19129 17.7469 2.92716 16.9075 2.94433C16.0595 2.96168 15.2778 3.26454 14.7851 3.73276L5.38403 12.6658C4.6945 13.321 4.13449 14.5364 4.05489 15.8977C3.9765 17.2386 4.37172 18.5754 5.38403 19.5373C7.5157 21.5628 10.484 21.5628 12.6156 19.5373L19.1519 13.3265C19.5513 12.947 20.1988 12.947 20.5982 13.3265C20.9976 13.706 20.9976 14.3213 20.5982 14.7008L14.0619 20.9116C11.1315 23.6961 6.86816 23.6961 3.93772 20.9116C2.41897 19.4685 1.91025 17.5412 2.01264 15.7899C2.11384 14.0591 2.81936 12.3541 3.93772 11.2914L13.3388 2.35845C14.2593 1.4838 15.5715 1.02766 16.8634 1.00122Z" fill="#262626"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M19.4858 7.11515C20.7324 5.94459 20.7324 4.04674 19.4858 2.87619C18.2838 1.74743 16.3616 1.70712 15.1081 2.75525L14.9716 2.87619L3.6862 13.4736L3.52649 13.6301C1.61004 15.5902 1.66328 18.6389 3.6862 20.5385C5.70912 22.4381 8.95584 22.4881 11.0432 20.6885L11.2098 20.5385L22.4953 9.94113L24 11.3541L12.7146 21.9515L12.5304 22.1187C9.61022 24.6816 5.02951 24.6259 2.18147 21.9515C-0.666561 19.2771 -0.725895 14.9757 2.00347 12.2335L2.18147 12.0606L13.4669 1.4632C15.5445 -0.487732 18.913 -0.487732 20.9905 1.4632C23.0135 3.36279 23.0667 6.41157 21.1503 8.37164L20.9905 8.52814L9.7051 19.1255L9.56865 19.2465C8.31517 20.2946 6.39296 20.2543 5.19092 19.1255C3.98889 17.9968 3.94596 16.1918 5.06214 15.0147L5.19092 14.8866L16.4764 4.28917L17.9811 5.70216L6.69565 16.2996L6.61297 16.3867C6.28225 16.7789 6.30981 17.3502 6.69565 17.7126C7.08149 18.0749 7.68993 18.1008 8.10757 17.7902L8.20038 17.7126L19.4858 7.11515Z" fill="#262626"/>
 </svg>
@@ -1,3 +1,3 @@
 <svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
-<path fill-rule="evenodd" clip-rule="evenodd" d="M16.3472 0.00138792C17.7614 -0.0288776 19.2813 0.434034 20.4223 1.56794L19.3387 2.6448L20.4223 1.56794C21.5633 2.70184 22.0291 4.21243 21.9986 5.61786C21.9684 7.01063 21.4486 8.445 20.4223 9.46495L11.0314 18.7978C10.358 19.467 9.43759 19.7854 8.57056 19.8039C7.69079 19.8227 6.71672 19.5352 5.97471 18.7978C5.23271 18.0604 4.94338 17.0923 4.96233 16.218C4.981 15.3563 5.30134 14.4416 5.97472 13.7724L12.4761 7.31122C13.0746 6.71649 14.0448 6.71649 14.6433 7.31122C15.2417 7.90596 15.2417 8.87022 14.6433 9.46495L8.14185 15.9261C8.10938 15.9584 8.03076 16.083 8.02641 16.2836C8.02234 16.4715 8.08594 16.5885 8.14185 16.6441C8.19777 16.6996 8.31553 16.7628 8.50458 16.7588C8.70636 16.7545 8.83176 16.6763 8.86423 16.6441L18.2552 7.31122C18.6406 6.92821 18.9187 6.28392 18.9345 5.55228C18.9501 4.8333 18.71 4.17373 18.2552 3.72167C17.8003 3.26961 17.1366 3.03104 16.4132 3.04652C15.677 3.06227 15.0287 3.33865 14.6433 3.72167L5.25234 13.0545C4.67063 13.6326 4.14756 14.7746 4.07345 16.1004C4.00113 17.3941 4.36759 18.6364 5.25234 19.5157C7.18223 21.4337 9.82386 21.4337 11.7538 19.5157L18.2829 13.0269C18.8814 12.4322 19.8516 12.4322 20.4501 13.0269C21.0485 13.6216 21.0485 14.5859 20.4501 15.1806L13.9209 21.6694C10.7941 24.7769 6.21196 24.7769 3.0852 21.6694C1.44161 20.036 0.9051 17.8683 1.01337 15.9314C1.11986 14.0266 1.86096 12.1174 3.0852 10.9008L12.4761 1.56794C13.5024 0.547983 14.9457 0.0313808 16.3472 0.00138792Z" fill="#262626"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M19.4858 7.11888C20.7324 5.94771 20.7324 4.04887 19.4858 2.87769C18.2838 1.74835 16.3616 1.70802 15.1081 2.75669L14.9716 2.87769L3.6862 13.4807L3.52649 13.6372C1.61004 15.5983 1.66328 18.6487 3.6862 20.5493C4.61095 21.4181 5.79143 21.9002 7 21.9956V22H24V24L7 24C5.24586 23.9013 3.52179 23.2223 2.18147 21.963C-0.666561 19.2872 -0.725895 14.9835 2.00347 12.2399L2.18147 12.0669L13.4669 1.46396C15.5445 -0.487988 18.913 -0.487988 20.9905 1.46396C23.0135 3.36455 23.0667 6.41493 21.1503 8.37603L20.9905 8.53261L9.7051 19.1356L9.56865 19.2566C8.31517 20.3053 6.39296 20.2649 5.19092 19.1356C3.98889 18.0062 3.94596 16.2003 5.06214 15.0226L5.19092 14.8944L16.4764 4.29142L17.9811 5.70515L6.69565 16.3081L6.61297 16.3953C6.28225 16.7877 6.30981 17.3593 6.69565 17.7219C7.08149 18.0844 7.68993 18.1103 8.10757 17.7995L8.20038 17.7219L19.4858 7.11888Z" fill="#262626"/>
 </svg>
@@ -1,3 +0,0 @@
-<svg width="24" height="25" viewBox="0 0 24 25" fill="none" xmlns="http://www.w3.org/2000/svg">
-<path d="M9.34783 12.9348V12.5015L9.03177 12.2052L1 4.67546L0.316059 5.405L1 4.67546V3.5H23V4.69448L15.4668 12.2277L15.1739 12.5206V12.9348L15.1739 21.5495L9.34783 23.0384V12.9348Z" stroke="#262626" stroke-width="2"/>
-</svg>
@@ -1,3 +0,0 @@
-<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
-<path d="M0 3V4.17546C0 4.45187 0.114409 4.71595 0.316059 4.905L8.34783 12.4348V22.5384C8.34783 23.1911 8.96302 23.6689 9.59542 23.5073L15.4215 22.0184C15.8642 21.9052 16.1739 21.5064 16.1739 21.0495V12.4348L23.7071 4.90159C23.8946 4.71405 24 4.4597 24 4.19448V3C24 2.44772 23.5523 2 23 2H1C0.447715 2 0 2.44772 0 3Z" fill="#262626"/>
-</svg>
@@ -1,6 +1,6 @@
 {
  "name": "@navikt/ds-react",
-  "version": "0.14.14",
+  "version": "0.14.10-next.0",
  "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.7.3",
+    "@navikt/ds-icons": "^0.7.2",
    "@popperjs/core": "^2.10.1",
    "classnames": "^2.2.6",
    "react-collapse": "^5.1.0",
@@ -1,8 +1,6 @@
-import React, { useRef, useState, forwardRef } from "react";
-import mergeRefs from "react-merge-refs";
+import React, { forwardRef } from "react";
 import cl from "classnames";
-import { BodyShort, OverridableComponent, Loader } from "../";
-import { useClientLayoutEffect } from "../util";
+import { BodyShort, OverridableComponent } from "../";

 export interface ButtonProps
  extends React.ButtonHTMLAttributes<HTMLButtonElement> {
@@ -26,11 +24,6 @@ export interface ButtonProps
   * @default false
   */
  disabled?: boolean;
-  /**
-   * Replaces button content with a Loader component, keeps width
-   * @default false
-   */
-  loading?: boolean;
 }

 const Button: OverridableComponent<ButtonProps, HTMLButtonElement> = forwardRef(
@@ -41,55 +34,25 @@ const Button: OverridableComponent<ButtonProps, HTMLButtonElement> = forwardRef(
      className,
      children,
      size = "medium",
-      loading = false,
-      disabled,
      ...rest
    },
    ref
-  ) => {
-    const buttonRef = useRef<HTMLButtonElement | null>(null);
-    const mergedRef = mergeRefs([buttonRef, ref]);
-    const [widthOverride, setWidthOverride] = useState<number>();
-
-    useClientLayoutEffect(() => {
-      if (loading) {
-        const requestID = window.requestAnimationFrame(() => {
-          setWidthOverride(buttonRef?.current?.getBoundingClientRect()?.width);
-        });
-        return () => {
-          setWidthOverride(undefined);
-          cancelAnimationFrame(requestID);
-        };
-      }
-    }, [loading, children]);
-
-    return (
-      <Component
-        {...rest}
-        ref={mergedRef}
-        className={cl(
-          className,
-          "navds-button",
-          `navds-button--${variant}`,
-          `navds-button--${size}`,
-          {
-            "navds-button--loading": widthOverride,
-          }
-        )}
-        style={{ width: widthOverride }}
-        disabled={disabled ?? widthOverride ? true : undefined}
-      >
-        <BodyShort
-          as="span"
-          className="navds-button__inner"
-          size={size}
-          aria-live="polite"
-        >
-          {widthOverride ? <Loader size={size} /> : children}
-        </BodyShort>
-      </Component>
-    );
-  }
+  ) => (
+    <Component
+      {...rest}
+      ref={ref}
+      className={cl(
+        className,
+        "navds-button",
+        `navds-button--${variant}`,
+        `navds-button--${size}`
+      )}
+    >
+      <BodyShort as="span" className="navds-button__inner" size={size}>
+        {children}
+      </BodyShort>
+    </Component>
+  )
 );

 export default Button;
@@ -45,32 +45,26 @@ Button har to størrelser: Default 48px min-height og small 32px min-height
  </Button>
 </Canvas>

-## Loading
+## Med ikon eller `<Loader />`

-Button har en egen `loading`-prop setter knappen til disabled og viser `Loader`.
-Button width bli automatisk justert basert på innholdet sin bredde.
-
-<Canvas>
-  <Button loading variant="primary">
-    Primary
-  </Button>
-  <Button loading variant="secondary">
-    Secondary
-  </Button>
-</Canvas>
-
-## Med ikon
-
-Hvis man setter ikoner (svg) rett på button vil størrelsen
+Hvis man setter ikoner (svg) eller `<Loader />` rett på button vil størrelsen
 bli justert automatisk og sentrert.

 <Canvas>
  <Button>
-    <Success /> Knapp <Success />
+    <Loader /> Laster... <Loader />
+  </Button>
+  <Button size="small">
+    <Loader />
+    Laster...
+    <Loader />
+  </Button>
+  <Button>
+    <Success /> Laster... <Success />
  </Button>
  <Button size="small">
    <Success />
-    Knapp
+    Laster...
    <Success />
  </Button>
 </Canvas>
@@ -1,4 +1,4 @@
-import React, { useState } from "react";
+import React from "react";
 import { Button } from "../index";
 import { Success } from "@navikt/ds-icons";

@@ -37,13 +37,6 @@ const varSwitch = {
 };

 export const All = () => {
-  const [loadingState, setLoadingState] = useState(true);
-  const [content, setContent] = useState<string>("");
-
-  const toggleLoading = () => {
-    setLoadingState(!loadingState);
-  };
-
  return (
    <div style={{ paddingLeft: "1rem" }}>
      <h1>Button</h1>
@@ -89,7 +82,7 @@ export const All = () => {
      <Section>
        {variants.map((variant) => (
          <Button key={variant} variant={variant}>
-            <span className="navds-sr-only">Success ikon</span>
+            <span className="sr-only">Success ikon</span>
            <Success />
          </Button>
        ))}
@@ -105,42 +98,11 @@ export const All = () => {
      <Section>
        {variants.map((variant) => (
          <Button key={variant} variant={variant} size="small">
-            <span className="navds-sr-only">Success ikon</span>
+            <span className="sr-only">Success ikon</span>
            <Success />
          </Button>
        ))}
      </Section>
-      <h2>Button w/loader</h2>
-      <Button onClick={toggleLoading}>Toggle loaders</Button>
-      <Button onClick={() => setContent((content) => `${content} wat`)}>
-        Change content
-      </Button>
-      <Section>
-        {variants.map((variant) => (
-          <Button
-            key={variant}
-            variant={variant}
-            loading={loadingState}
-            onClick={toggleLoading}
-          >
-            {content || varSwitch[variant]}
-          </Button>
-        ))}
-      </Section>
-      <h2>Small w/loader</h2>
-      <Section>
-        {variants.map((variant) => (
-          <Button
-            key={variant}
-            variant={variant}
-            size="small"
-            loading={loadingState}
-            onClick={toggleLoading}
-          >
-            {varSwitch[variant]}
-          </Button>
-        ))}
-      </Section>
    </div>
  );
 };
@@ -96,7 +96,7 @@ const Fieldset = forwardRef<HTMLFieldSetElement, FieldsetProps>(
            size={size}
            as="legend"
            className={cl("navds-fieldset__legend", {
-              "navds-sr-only": !!hideLegend,
+              "sr-only": !!hideLegend,
            })}
          >
            {legend}
@@ -105,7 +105,7 @@ const Fieldset = forwardRef<HTMLFieldSetElement, FieldsetProps>(
            (size === "medium" ? (
              <BodyShort
                className={cl("navds-fieldset__description", {
-                  "navds-sr-only": !!hideLegend,
+                  "sr-only": !!hideLegend,
                })}
                id={inputDescriptionId}
                size="small"
@@ -116,7 +116,7 @@ const Fieldset = forwardRef<HTMLFieldSetElement, FieldsetProps>(
            ) : (
              <Detail
                className={cl("navds-fieldset__description", {
-                  "navds-sr-only": !!hideLegend,
+                  "sr-only": !!hideLegend,
                })}
                id={inputDescriptionId}
                size="small"
@@ -63,7 +63,7 @@ const Select = forwardRef<HTMLSelectElement, SelectProps>((props, ref) => {
        size={size}
        as="label"
        className={cl("navds-select__label", {
-          "navds-sr-only": hideLabel,
+          "sr-only": hideLabel,
        })}
      >
        {label}
@@ -72,7 +72,7 @@ const Select = forwardRef<HTMLSelectElement, SelectProps>((props, ref) => {
        <BodyShort
          as="div"
          className={cl("navds-select__description", {
-            "navds-sr-only": hideLabel,
+            "sr-only": hideLabel,
          })}
          id={inputDescriptionId}
          size={size}
@@ -89,15 +89,13 @@ const Switch = forwardRef<HTMLInputElement, SwitchProps>((props, ref) => {
        `navds-switch--${size}`,
        `navds-switch--${position}`,
        {
-          "navds-switch--loading": loading,
-          "navds-switch--disabled": inputProps.disabled ?? loading,
+          "navds-switch--disabled": inputProps.disabled,
        }
      )}
    >
      <input
        {...omit(rest, ["size"])}
        {...omit(inputProps, ["aria-invalid", "aria-describedby"])}
-        disabled={inputProps.disabled ?? loading}
        checked={checkedProp}
        defaultChecked={defaultChecked}
        ref={ref}
@@ -108,7 +106,7 @@ const Switch = forwardRef<HTMLInputElement, SwitchProps>((props, ref) => {
      <span className="navds-switch__track">
        <span className="navds-switch__thumb">
          {loading ? (
-            <Loader size="xsmall" aria-live="polite" />
+            <Loader size="xsmall" />
          ) : checked ? (
            <SelectedIcon />
          ) : null}
@@ -117,7 +115,7 @@ const Switch = forwardRef<HTMLInputElement, SwitchProps>((props, ref) => {
      <label htmlFor={inputProps.id} className="navds-switch__label-wrapper">
        <div
          className={cl("navds-switch__content", {
-            "navds-sr-only": hideLabel,
+            "sr-only": hideLabel,
            "navds-switch--with-description": !!description && !hideLabel,
          })}
        >
@@ -62,9 +62,7 @@ const TextField = forwardRef<HTMLInputElement, TextFieldProps>((props, ref) => {
        htmlFor={inputProps.id}
        size={size}
        as="label"
-        className={cl("navds-text-field__label", {
-          "navds-sr-only": hideLabel,
-        })}
+        className={cl("navds-text-field__label", { "sr-only": hideLabel })}
      >
        {label}
      </Label>
@@ -74,7 +72,7 @@ const TextField = forwardRef<HTMLInputElement, TextFieldProps>((props, ref) => {
          {size === "medium" ? (
            <BodyShort
              className={cl("navds-text-field__description", {
-                "navds-sr-only": hideLabel,
+                "sr-only": hideLabel,
              })}
              id={inputDescriptionId}
              size="small"
@@ -85,7 +83,7 @@ const TextField = forwardRef<HTMLInputElement, TextFieldProps>((props, ref) => {
          ) : (
            <Detail
              className={cl("navds-text-field__description", {
-                "navds-sr-only": hideLabel,
+                "sr-only": hideLabel,
              })}
              id={inputDescriptionId}
              size="small"
@@ -77,7 +77,7 @@ const Textarea = forwardRef<HTMLTextAreaElement, TextareaProps>(
          size={size}
          as="label"
          className={cl("navds-textarea__label", {
-            "navds-sr-only": hideLabel,
+            "sr-only": hideLabel,
          })}
        >
          {label}
@@ -86,7 +86,7 @@ const Textarea = forwardRef<HTMLTextAreaElement, TextareaProps>(
          <BodyShort
            as="div"
            className={cl("navds-textarea__description", {
-              "navds-sr-only": hideLabel,
+              "sr-only": hideLabel,
            })}
            id={inputDescriptionId}
            size={size}
@@ -113,7 +113,7 @@ const Textarea = forwardRef<HTMLTextAreaElement, TextareaProps>(
          />
          {hasMaxLength && (
            <>
-              <span id={maxLengthId} className="navds-sr-only">
+              <span id={maxLengthId} className="sr-only">
                Tekstområde med plass til {maxLength} tegn., Textarea can have{" "}
                {maxLength} signs.
              </span>
@@ -58,7 +58,7 @@ const Checkbox = forwardRef<HTMLInputElement, CheckboxProps>((props, ref) => {
      <label htmlFor={inputProps.id} className="navds-checkbox__label">
        <div
          className={cl("navds-checkbox__content", {
-            "navds-sr-only": props.hideLabel,
+            "sr-only": props.hideLabel,
          })}
        >
          <BodyShort as="div" size={size}>
@@ -1,35 +1,21 @@
+import { Close, Search } from "@navikt/ds-icons";
 import cl from "classnames";
-import React, { forwardRef } from "react";
-import { BodyShort, Label, omit } from "../..";
-import ErrorMessage from "../ErrorMessage";
-import { FormFieldProps, useFormField } from "../useFormField";
-import SearchFieldButton, { SearchFieldButtonType } from "./SearchFieldButton";
-import SearchFieldClearButton, {
-  SearchFieldClearButtonType,
-} from "./SearchFieldClearButton";
-import SearchFieldInput, { SearchFieldInputType } from "./SearchFieldInput";
-
-export interface SearchFieldContextProps {
-  inputProps: {
-    id: string;
-    "aria-invalid": boolean;
-    "aria-describedby"?: string;
-    disabled?: boolean;
-  };
-  size?: "medium" | "small";
-}
-
-export const SearchFieldContext = React.createContext<SearchFieldContextProps | null>(
-  null
-);
+import React, {
+  forwardRef,
+  InputHTMLAttributes,
+  useCallback,
+  useEffect,
+  useRef,
+  useState,
+} from "react";
+import mergeRefs from "react-merge-refs";
+import { BodyShort, Label, omit, useEventListener } from "../..";
+import { FormFieldProps } from "../useFormField";
+import { useSearchField } from "./useSearchField";

 export interface SearchFieldProps
-  extends FormFieldProps,
-    React.HTMLAttributes<HTMLDivElement> {
-  /**
-   * SearchFieldInput & SearchFieldButton
-   */
-  children: React.ReactNode;
+  extends Omit<FormFieldProps, "error" | "errorId">,
+    Omit<InputHTMLAttributes<HTMLInputElement>, "size" | "onChange"> {
  /**
   * If enabled shows the label and description for screenreaders only
   */
@@ -38,50 +24,101 @@ export interface SearchFieldProps
   * SearchField label
   */
  label: React.ReactNode;
+  /**
+   * Inverts color theme
+   * @default false
+   */
+  inverted?: boolean;
+  /**
+   * Customize aria-label on clear button
+   * @default "Slett tekst i felt"
+   */
+  clearButtonLabel?: string;
+  /**
+   * Callback for when user manually clears input with button or Escape
+   */
+  onClear?: () => void;
+  /**
+   * Callback for value in input after change
+   */
+  onChange?: (value: string) => void;
+  /**
+   * Toggles display of "clear"-button when there is text in field
+   */
+  clearButton?: boolean;
 }

-interface SearchFieldComponent
-  extends React.ForwardRefExoticComponent<
-    SearchFieldProps & React.RefAttributes<HTMLDivElement>
-  > {
-  Button: SearchFieldButtonType;
-  Clear: SearchFieldClearButtonType;
-  Input: SearchFieldInputType;
-}
-
-const SearchField = forwardRef<HTMLDivElement, SearchFieldProps>(
+const SearchField = forwardRef<HTMLInputElement, SearchFieldProps>(
  (props, ref) => {
-    const {
-      inputProps,
-      errorId,
-      showErrorMsg,
-      hasError,
-      size,
-      inputDescriptionId,
-    } = useFormField(props, "searchfield");
+    const { inputProps, size, inputDescriptionId } = useSearchField(
+      props,
+      "searchfield"
+    );

    const {
      className,
      hideLabel,
-      children,
      label,
      description,
-      error,
+      value,
+      clearButtonLabel,
+      onClear,
+      inverted = false,
+      clearButton = true,
      ...rest
    } = props;

+    const [controlledValue, setControlledValue] = useState(value ?? "");
+    const searchRef = useRef<HTMLInputElement | null>(null);
+    const mergedRef = mergeRefs([searchRef, ref]);
+    const [wrapperRef, setWrapperRef] = useState<HTMLDivElement | null>(null);
+
+    const handleChange = useCallback(
+      (v: string) => {
+        if (searchRef.current && value === undefined) {
+          searchRef.current.value = v;
+          setControlledValue(v);
+        }
+        props?.onChange?.(v);
+      },
+      [props, value]
+    );
+
+    const handleClear = useCallback(() => {
+      onClear?.();
+      handleChange("");
+      searchRef.current && searchRef.current?.focus?.();
+    }, [handleChange, onClear]);
+
+    useEventListener(
+      "keydown",
+      useCallback(
+        (e) => {
+          if (e.key === "Escape") {
+            e.preventDefault();
+            handleClear();
+          }
+        },
+        [handleClear]
+      ),
+      wrapperRef
+    );
+
+    useEffect(() => {
+      value !== undefined && setControlledValue(value);
+    }, [value]);
+
    return (
      <div
-        ref={ref}
-        {...omit(rest, ["id", "error", "errorId", "size", "disabled"])}
+        ref={setWrapperRef}
        className={cl(
          className,
          "navds-form-field",
          `navds-form-field--${size ?? "medium"}`,
          "navds-search-field",
          {
-            "navds-search-field--error": hasError,
            "navds-search-field--disabled": !!inputProps.disabled,
+            "navds-search-field--inverted": inverted,
          }
        )}
      >
@@ -107,26 +144,44 @@ const SearchField = forwardRef<HTMLDivElement, SearchFieldProps>(
            {description}
          </BodyShort>
        )}
-        <div className="navds-search-field__input-wrapper">
-          <SearchFieldContext.Provider
-            value={{
-              inputProps,
-              size,
-            }}
-          >
-            {children}
-          </SearchFieldContext.Provider>
-        </div>
-        <div id={errorId} aria-relevant="additions removals" aria-live="polite">
-          {showErrorMsg && <ErrorMessage size={size}>{error}</ErrorMessage>}
+        <div
+          data-value={!!controlledValue}
+          className="navds-search-field__input-wrapper"
+        >
+          <span className="navds-search-field__input-icon">
+            <Search aria-hidden />
+          </span>
+          <input
+            ref={mergedRef}
+            {...omit(rest, ["size"])}
+            {...inputProps}
+            {...(props.value !== undefined && { value: props.value })}
+            onChange={(e) => handleChange(e.target.value)}
+            type="search"
+            role="searchbox"
+            className={cl(
+              className,
+              "navds-search-field__input",
+              "navds-text-field__input",
+              "navds-body-short",
+              `navds-body-${size ?? "medium"}`
+            )}
+          />
+          {controlledValue && clearButton && (
+            <button
+              onClick={() => handleClear()}
+              className="navds-search-field__clear-button"
+            >
+              <span className="navds-sr-only">
+                {clearButtonLabel ? clearButtonLabel : "Slett tekst i felt"}
+              </span>
+              <Close aria-hidden />
+            </button>
+          )}
        </div>
      </div>
    );
  }
-) as SearchFieldComponent;
-
-SearchField.Button = SearchFieldButton;
-SearchField.Clear = SearchFieldClearButton;
-SearchField.Input = SearchFieldInput;
+);

 export default SearchField;
@@ -1,47 +0,0 @@
-import React, { forwardRef, useContext } from "react";
-import cl from "classnames";
-import { SearchFieldContext } from "./SearchField";
-import { Button, ButtonProps } from "../..";
-
-export interface SearchFieldButtonProps extends Omit<ButtonProps, "size"> {
-  /**
-   * Button text
-   * @example <Search /> <span>Søk</span>
-   */
-  children: React.ReactNode;
-  /**
-   * Changes design and interactions
-   * @default "primary"
-   */
-  variant?: "primary" | "secondary";
-}
-
-export type SearchFieldButtonType = React.ForwardRefExoticComponent<
-  SearchFieldButtonProps & React.RefAttributes<HTMLButtonElement>
->;
-
-const SearchFieldButton: SearchFieldButtonType = forwardRef(
-  ({ className, variant = "primary", disabled, ...rest }, ref) => {
-    const searchField = useContext(SearchFieldContext);
-
-    if (searchField === null) {
-      console.warn("SearchFieldButton has to be wrapped in <SearchField />");
-      return null;
-    }
-
-    const { size, inputProps } = searchField;
-
-    return (
-      <Button
-        ref={ref}
-        className={cl(className, "navds-search-field__button")}
-        {...rest}
-        size={size}
-        variant={variant}
-        disabled={disabled ?? inputProps?.disabled}
-      />
-    );
-  }
-);
-
-export default SearchFieldButton;
@@ -1,49 +0,0 @@
-import React, { forwardRef, useContext } from "react";
-import cl from "classnames";
-import { SearchFieldContext } from "./SearchField";
-import { Button, ButtonProps } from "../..";
-
-export interface SearchFieldClearButtonProps extends Omit<ButtonProps, "size"> {
-  /**
-   * Button text
-   * @example <Close /> <span>Søk</span>
-   */
-  children: React.ReactNode;
-  /**
-   * Changes design and interactions
-   * @default "secondary"
-   */
-  variant?: "primary" | "secondary";
-}
-
-export type SearchFieldClearButtonType = React.ForwardRefExoticComponent<
-  SearchFieldClearButtonProps & React.RefAttributes<HTMLButtonElement>
->;
-
-const SearchFieldClearButton: SearchFieldClearButtonType = forwardRef(
-  ({ className, variant = "secondary", disabled, ...rest }, ref) => {
-    const searchField = useContext(SearchFieldContext);
-
-    if (searchField === null) {
-      console.warn(
-        "SearchFieldClearButton has to be wrapped in <SearchField />"
-      );
-      return null;
-    }
-
-    const { size, inputProps } = searchField;
-
-    return (
-      <Button
-        {...rest}
-        ref={ref}
-        className={cl(className, "navds-search-field__clear-button")}
-        size={size}
-        variant={variant}
-        disabled={disabled ?? inputProps?.disabled}
-      />
-    );
-  }
-);
-
-export default SearchFieldClearButton;
@@ -1,42 +0,0 @@
-import React, { forwardRef, InputHTMLAttributes, useContext } from "react";
-import cl from "classnames";
-import { SearchFieldContext } from "./SearchField";
-
-export interface SearchFieldInputProps
-  extends InputHTMLAttributes<HTMLInputElement> {}
-
-export type SearchFieldInputType = React.ForwardRefExoticComponent<
-  SearchFieldInputProps & React.RefAttributes<HTMLInputElement>
->;
-
-const SearchFieldInput: SearchFieldInputType = forwardRef(
-  ({ className, ...rest }, ref) => {
-    const searchField = useContext(SearchFieldContext);
-
-    if (searchField === null) {
-      console.warn("SearchFieldInput has to be wrapped in <SearchField />");
-      return null;
-    }
-
-    const { size, inputProps } = searchField;
-
-    return (
-      <input
-        {...rest}
-        {...inputProps}
-        type="search"
-        role="searchbox"
-        ref={ref}
-        className={cl(
-          className,
-          "navds-search-field__input",
-          "navds-text-field__input",
-          "navds-body-short",
-          `navds-body-${size ?? "medium"}`
-        )}
-      />
-    );
-  }
-);
-
-export default SearchFieldInput;
@@ -1,25 +0,0 @@
-import React, { useState } from "react";
-import { Close, Search } from "@navikt/ds-icons";
-import { SearchField } from "../index";
-
-export const Example = ({ size = "medium" }: { size: "medium" | "small" }) => {
-  const [value, setValue] = useState("");
-
-  return (
-    <SearchField size={size} label="Skriv i søkefeltet for å vise clearbutton">
-      <SearchField.Input
-        value={value}
-        onChange={(e) => setValue(e.target.value)}
-      />
-      {!!value && (
-        <SearchField.Clear onClick={() => setValue("")}>
-          <Close />
-          Tøm
-        </SearchField.Clear>
-      )}
-      <SearchField.Button>
-        <Search /> Søk
-      </SearchField.Button>
-    </SearchField>
-  );
-};
@@ -1,9 +1,8 @@
 import { Meta, Canvas } from "@storybook/addon-docs";
 import { SearchField } from "../index";

-import { Example } from "./search-field-example.tsx";
-
-import { Search } from "@navikt/ds-icons";
+import { Table } from "@navikt/ds-react";
+import { Header } from "@navikt/ds-react-internal";

 <Meta title="ds-react/form/search-field/intro" />

@@ -16,24 +15,47 @@ Komponenten er ikke testet eller gått gjennom et design-review, så anbefalses
 ## Bruk

 ```jsx
-<SearchField label="Mollit eiusmod" description="Ea cupidatat eu sunt commodo">
-  <SearchField.Input />
-  <SearchField.Button>
-    <Search /> Søk
-  </SearchField.Button>
-</SearchField>
+<SearchField
+  label="Mollit eiusmod"
+  description="Ea cupidatat eu sunt commodo"
+/>
 ```

 <Canvas>
-  <SearchField
-    label="Mollit eiusmod"
-    description="Ea cupidatat eu sunt commodo"
+  <div style={{ width: 300 }}>
+    <SearchField
+      label="Mollit eiusmod"
+      description="Ea cupidatat eu sunt commodo"
+    />
+  </div>
+</Canvas>
+
+## Inverted
+
+```jsx
+<SearchField
+  label="Mollit eiusmod"
+  description="Ea cupidatat eu sunt commodo"
+  hideLabel
+  inverted
+/>
+```
+
+<Canvas>
+  <div
+    style={{
+      width: 300,
+      padding: "1rem",
+      background: "var(--navds-global-color-gray-900)",
+    }}
  >
-    <SearchField.Input />
-    <SearchField.Button>
-      <Search /> Søk
-    </SearchField.Button>
-  </SearchField>
+    <SearchField
+      inverted
+      hideLabel
+      label="Mollit eiusmod"
+      description="Ea cupidatat eu sunt commodo"
+    />
+  </div>
 </Canvas>

 ## hideLabel
@@ -46,25 +68,41 @@ Vi har satt `label` som required siden man vil bruke den i sammenheng med denne
  label="Mollit eiusmod"
  description="Ea cupidatat eu sunt commodo"
  hideLabel
->
-  <SearchField.Input />
-  <SearchField.Button>
-    <Search /> Søk
-  </SearchField.Button>
-</SearchField>
+/>
 ```

 <Canvas>
-  <SearchField
-    label="Mollit eiusmod"
-    description="Ea cupidatat eu sunt commodo"
-    hideLabel
-  >
-    <SearchField.Input />
-    <SearchField.Button>
-      <Search /> Søk
-    </SearchField.Button>
-  </SearchField>
+  <div style={{ width: 300 }}>
+    <SearchField
+      label="Mollit eiusmod"
+      description="Ea cupidatat eu sunt commodo"
+      hideLabel
+    />
+  </div>
+</Canvas>
+
+## Uten "clear"-button
+
+Fjerner "lukke"-knapp som dukker opp når feltet ikke er tomt.
+
+```jsx
+<SearchField
+  label="Mollit eiusmod"
+  description="Ea cupidatat eu sunt commodo"
+  hideLabel
+  clearButton={false}
+/>
+```
+
+<Canvas>
+  <div style={{ width: 300 }}>
+    <SearchField
+      label="Mollit eiusmod"
+      description="Ea cupidatat eu sunt commodo"
+      hideLabel
+      clearButton={false}
+    />
+  </div>
 </Canvas>

 ## Sizing
@@ -75,82 +113,113 @@ Vi har satt `label` som required siden man vil bruke den i sammenheng med denne
  description="Ea cupidatat eu sunt commodo"
  hideLabel
  size="small"
->
-  <SearchField.Input />
-  <SearchField.Button>
-    <Search /> Søk
-  </SearchField.Button>
-</SearchField>
+/>
 ```

 <Canvas>
+  <div style={{ width: 300 }}>
+    <SearchField
+      label="Mollit eiusmod"
+      description="Ea cupidatat eu sunt commodo"
+      hideLabel
+      size="small"
+    />
+  </div>
+</Canvas>
+
+## Disabled
+
+```jsx
+<SearchField
+  disabled
+  label="Mollit eiusmod"
+  description="Ea cupidatat eu sunt commodo"
+  hideLabel
+
+/>
+<SearchField
+  disabled
+  label="Mollit eiusmod"
+  description="Ea cupidatat eu sunt commodo"
+  hideLabel
+  size="small"
+/>
+```
+
+<Canvas>
+  <div style={{ width: 300 }}>
+    <SearchField
+      disabled
+      label="Mollit eiusmod"
+      description="Ea cupidatat eu sunt commodo"
+      hideLabel
+    />
+  </div>
  <SearchField
+    disabled
    label="Mollit eiusmod"
    description="Ea cupidatat eu sunt commodo"
    hideLabel
    size="small"
-  >
-    <SearchField.Input />
-    <SearchField.Button>
-      <Search /> Søk
-    </SearchField.Button>
-  </SearchField>
+  />
 </Canvas>

-## Errors
-
-```jsx
-<SearchField
-  label="Mollit eiusmod"
-  description="Ea cupidatat eu sunt commodo"
-  hideLabel
-  error="Error message"
->
-  <SearchField.Input />
-  <SearchField.Button>
-    <Search /> Søk
-  </SearchField.Button>
-</SearchField>
-```
+## Table

 <Canvas>
-  <SearchField
-    label="Mollit eiusmod"
-    description="Ea cupidatat eu sunt commodo"
-    hideLabel
-    error="Error message"
-  >
-    <SearchField.Input />
-    <SearchField.Button>
-      <Search /> Søk
-    </SearchField.Button>
-  </SearchField>
+  <Table>
+    <Table.Body>
+      <Table.Row>
+        <Table.HeaderCell scope="col">
+          <SearchField
+            label="Mollit eiusmod"
+            description="Ea cupidatat eu sunt commodo"
+            hideLabel
+          />
+        </Table.HeaderCell>
+      </Table.Row>
+      <Table.Row>
+        <Table.HeaderCell scope="col">Name</Table.HeaderCell>
+        <Table.HeaderCell scope="col">Age</Table.HeaderCell>
+        <Table.HeaderCell scope="col">Country</Table.HeaderCell>
+        <Table.HeaderCell scope="col">Points</Table.HeaderCell>
+      </Table.Row>
+      <Table.Row>
+        <Table.HeaderCell scope="row">
+          Donald SmithDonald Smith
+        </Table.HeaderCell>
+        <Table.DataCell>32</Table.DataCell>
+        <Table.DataCell>USA</Table.DataCell>
+        <Table.DataCell>38</Table.DataCell>
+      </Table.Row>
+      <Table.Row>
+        <Table.HeaderCell scope="row">Preben Aalborg</Table.HeaderCell>
+        <Table.DataCell>44</Table.DataCell>
+        <Table.DataCell>Denmark</Table.DataCell>
+        <Table.DataCell>11</Table.DataCell>
+      </Table.Row>
+      <Table.Row>
+        <Table.HeaderCell scope="row">Rudolph Bachenmeier</Table.HeaderCell>
+        <Table.DataCell>32</Table.DataCell>
+        <Table.DataCell>Germany</Table.DataCell>
+        <Table.DataCell>70</Table.DataCell>
+      </Table.Row>
+    </Table.Body>
+  </Table>
 </Canvas>

-## ClearButton
+## Header

-Man kan bruke `SearchField.Clear` for å håndtere clearing av value i `<input />`. For å bruke denne
-kreves det da at `SearchField.Input` er controlled slik at man styrer state selv slik som eksemplet under.
-Hvis man bare ønsker at den bare skal vises når bruker har begynt å skrive, anbefaler vi bare å rendre
-den når inputvalue ikke er empty.
-
-```jsx
-<SearchField label="Mollit eiusmod" description="Ea cupidatat eu sunt commodo">
-  <SearchField.Input value={value} onChange={(e) => setValue(e.target.value)} />
-  {!!value && (
-    <SearchField.Clear onClick={() => setValue("")}>
-      <Close /> Tøm
-    </SearchField.Clear>
-  )}
-  <SearchField.Button>
-    <Search /> Søk
-  </SearchField.Button>
-</SearchField>
-```
-
-<Canvas>
-  <div>
-    <Example />
-    <Example size="small" />
+<Header>
+  <Header.Title href="#">NAV Sykepenger</Header.Title>
+  <div style={{ margin: "auto 1rem auto auto" }}>
+    <SearchField
+      label="Mollit eiusmod"
+      description="Ea cupidatat eu sunt commodo"
+      hideLabel
+      size="small"
+      inverted
+    />
  </div>
-</Canvas>
+  <Header.User name="Ola Normann" />
+</Header>
@@ -1,174 +1,77 @@
-import React, { useState } from "react";
 import { Meta } from "@storybook/react/types-6-0";
-import { Close, Search } from "@navikt/ds-icons";
-import { SearchField } from "../index";
+import React, { useState } from "react";
 import { Fieldset } from "../..";
+import { SearchField } from "../index";
 export default {
  title: "ds-react/form/search-field",
  component: SearchField,
 } as Meta;

 export const All = () => {
-  const [show, setShow] = useState(false);
+  const [value, setValue] = useState("");
  return (
    <>
      <h1>SearchField</h1>
-      <SearchField
-        label="Mollit eiusmod"
-        description={<div>Ea cupidatat eu sunt commodo</div>}
-      >
-        <SearchField.Input />
-        <SearchField.Button>
-          <Search /> Søk
-        </SearchField.Button>
-      </SearchField>
-      <SearchField
-        label="Mollit eiusmod"
-        description="Ea cupidatat eu sunt commodo"
-      >
-        <SearchField.Button>
-          <Search /> Søk
-        </SearchField.Button>
-        <SearchField.Input />
-      </SearchField>
-
-      <h1>SearchField w clearsearch</h1>
-      <SearchField
-        label="Mollit eiusmod"
-        description="Ea cupidatat eu sunt commodo"
-      >
-        <SearchField.Input />
-        <SearchField.Clear>
-          <Close />
-        </SearchField.Clear>
-        <SearchField.Button onClick={() => setShow(!show)}>
-          <Search /> Søk
-        </SearchField.Button>
-      </SearchField>
-      <SearchField
-        label="Mollit eiusmod"
-        description="Ea cupidatat eu sunt commodo"
-      >
-        <SearchField.Button>
-          <Search /> Søk
-        </SearchField.Button>
-        <SearchField.Clear>
-          <Close /> Tøm
-        </SearchField.Clear>
-        <SearchField.Input />
-      </SearchField>
+      <div>
+        <SearchField label="Mollit eiusmod" />
+        <SearchField
+          label="Mollit eiusmod"
+          description={<div>Ea cupidatat eu sunt commodo</div>}
+        />
+      </div>

      <h2>Hidelabel</h2>
      <SearchField
        label="Mollit eiusmod"
        description="Ea cupidatat eu sunt commodo"
        hideLabel
+      />
+
+      <h2>Inverted</h2>
+      <div
+        style={{
+          width: 300,
+          padding: "1rem",
+          background: "var(--navds-global-color-gray-900)",
+        }}
      >
-        <SearchField.Button>
-          <Search /> Søk
-        </SearchField.Button>
-        <SearchField.Input />
-      </SearchField>
+        <SearchField
+          label="Mollit eiusmod"
+          description="Ea cupidatat eu sunt commodo"
+          hideLabel
+          inverted
+        />
+        <br />
+        <SearchField
+          label="Mollit eiusmod"
+          description="Ea cupidatat eu sunt commodo"
+          hideLabel
+          inverted
+          value="Søketekst"
+        />
+      </div>

      <h2>SearchField small</h2>
      <SearchField
        label="Mollit eiusmod"
        description="Ea cupidatat eu sunt commodo"
        size="small"
-      >
-        <SearchField.Button>
-          <Search />
-          <span className="navds-sr-only">Søk</span>
-        </SearchField.Button>
-        <SearchField.Input />
-      </SearchField>
-
+      />
+      <br />
      <SearchField
        label="Mollit eiusmod"
        description="Ea cupidatat eu sunt commodo"
        size="small"
-      >
-        <SearchField.Input />
-        <SearchField.Button>
-          <Search />
-          <span className="navds-sr-only">Søk</span>
-        </SearchField.Button>
-      </SearchField>
-      <SearchField
-        label="Mollit eiusmod"
-        description="Ea cupidatat eu sunt commodo"
-        size="small"
-      >
-        <SearchField.Button>
-          <Search />
-          <span className="navds-sr-only">Søk</span>
-        </SearchField.Button>
-        <SearchField.Clear>
-          <Close /> Tøm
-        </SearchField.Clear>
-        <SearchField.Input />
-      </SearchField>
-
-      <SearchField
-        label="Mollit eiusmod"
-        description="Ea cupidatat eu sunt commodo"
-        size="small"
-      >
-        <SearchField.Input />
-        <SearchField.Clear>
-          <Close /> Tøm
-        </SearchField.Clear>
-        <SearchField.Button>
-          <Search />
-          <span className="navds-sr-only">Søk</span>
-        </SearchField.Button>
-      </SearchField>
-
-      <h2>SearchField w error</h2>
-      <SearchField
-        label="Mollit eiusmod"
-        description="Ea cupidatat eu sunt commodo"
-        error="Errormsg"
-      >
-        <SearchField.Input />
-        <SearchField.Button>
-          <Search /> Søk
-        </SearchField.Button>
-      </SearchField>
-      <SearchField
-        label="Mollit eiusmod"
-        description="Ea cupidatat eu sunt commodo"
-        error="Errormsg"
-      >
-        <SearchField.Button>
-          <Search /> Søk
-        </SearchField.Button>
-        <SearchField.Input />
-      </SearchField>
+        hideLabel
+      />

      <h2>SearchField in Fieldset</h2>
      <Fieldset legend="Filter" error="Fieldset-error-msg">
        <SearchField
          label="Mollit eiusmod"
          description="Ea cupidatat eu sunt commodo"
-          error="Errormsg"
          hideLabel
-        >
-          <SearchField.Input />
-          <SearchField.Button>
-            <Search /> Søk
-          </SearchField.Button>
-        </SearchField>
-        <SearchField
-          label="Mollit eiusmod"
-          description="Ea cupidatat eu sunt commodo"
-          hideLabel
-        >
-          <SearchField.Button>
-            <Search /> Søk
-          </SearchField.Button>
-          <SearchField.Input />
-        </SearchField>
+        />
      </Fieldset>

      <h2>Disabled </h2>
@@ -176,24 +79,29 @@ export const All = () => {
        disabled
        label="Mollit eiusmod"
        description="Ea cupidatat eu sunt commodo"
-      >
-        <SearchField.Input />
-        <SearchField.Button>
-          <Search /> Søk
-        </SearchField.Button>
-      </SearchField>
-      <Fieldset legend="Filter" disabled>
-        <SearchField
-          label="Mollit eiusmod"
-          description="Ea cupidatat eu sunt commodo"
-          error="Errormsg"
-        >
-          <SearchField.Input />
-          <SearchField.Button>
-            <Search /> Søk
-          </SearchField.Button>
-        </SearchField>
-      </Fieldset>
+      />
+      <h2>Controlled state </h2>
+      <SearchField
+        value={value}
+        label="Mollit eiusmod"
+        description="Ea cupidatat eu sunt commodo"
+        onChange={(e) => setValue(e)}
+        onClear={() => setValue("")}
+      />
+      <h3>Controlled state no clear</h3>
+      <SearchField
+        value={value}
+        label="Mollit eiusmod"
+        description="Ea cupidatat eu sunt commodo"
+        onChange={(e) => setValue(e)}
+      />
+      <h2>No clear button</h2>
+      <SearchField
+        hideLabel
+        label="Mollit eiusmod"
+        description="Ea cupidatat eu sunt commodo"
+        clearButton={false}
+      />
    </>
  );
 };
@@ -0,0 +1,31 @@
+import cl from "classnames";
+import { useContext } from "react";
+import { useId } from "../../index";
+import { FieldsetContext } from "../index";
+import { FormFieldProps } from "../useFormField";
+
+export const useSearchField = (props: FormFieldProps, prefix: string) => {
+  const { size } = props;
+
+  const fieldset = useContext(FieldsetContext);
+
+  const genId = useId();
+
+  const id = props.id ?? `${prefix}-${genId}`;
+  const inputDescriptionId = `${prefix}-description-${genId}`;
+
+  const disabled = fieldset?.disabled || props.disabled;
+
+  return {
+    inputDescriptionId,
+    size: size ?? fieldset?.size ?? "medium",
+    inputProps: {
+      id,
+      "aria-describedby":
+        cl(props["aria-describedby"], {
+          [inputDescriptionId]: !!props?.description,
+        }) || undefined,
+      disabled,
+    },
+  };
+};
@@ -9,7 +9,6 @@ export default {

 export const All = () => {
  const [checked, setChecked] = useState(false);
-  const [loadingState, setLoadingState] = useState(false);
  return (
    <div style={{ width: "fit-content" }}>
      <h1>Switch</h1>
@@ -92,13 +91,6 @@ export const All = () => {
      <Switch disabled loading>
        Label text
      </Switch>
-      <Switch checked loading>
-        Label text
-      </Switch>
-      <button onClick={() => setLoadingState(!loadingState)}>
-        Toggle loading
-      </button>
-      <Switch loading={loadingState}>Label text</Switch>
    </div>
  );
 };
@@ -63,3 +63,25 @@ Bakgrunnen kan settes til transparent med `transparent={true}`
 <Canvas>
  <Loader size="2xlarge" transparent />
 </Canvas>
+
+## Bruk av loader i knapper
+
+Husk her å gi brukeren nok informasjon om hvorfor knappen har en Loader. Dette kan gjøres ved å ha god tekst på siden,
+i knappen og i `title`-proppen for `Loader`. Unngå også bruk av `Loader` uten noen tekst som hinter til hva som foregår.
+
+Stylingen er overstyrt for knapper, slik at `transparent` ikke fungerer by-default ved bruk i knapper.
+Størrelsen justeres også automatisk, slik at alt man trenger er å sette Loaderen rett inn i knappen.
+
+```jsx
+<Button>
+  Laster inn nytt innhold...
+  <Loader />
+</Button>
+```
+
+<Canvas>
+  <Button>
+    Laster inn nytt innhold...
+    <Loader />
+  </Button>
+</Canvas>
@@ -28,11 +28,6 @@ export interface ModalProps {
   * User defined classname for modal
   */
  className?: string;
-  /**
-   * Toggles addition of a X-button on modal
-   * @default true
-   */
-  closeButton?: boolean;
 }

 interface ModalComponent
@@ -55,7 +50,6 @@ const Modal = forwardRef<ReactModal, ModalProps>(
      onClose,
      className,
      shouldCloseOnOverlayClick = true,
-      closeButton = true,
      ...rest
    },
    ref
@@ -83,19 +77,18 @@ const Modal = forwardRef<ReactModal, ModalProps>(
        onRequestClose={(e) => onModalCloseRequest(e)}
      >
        {children}
-        {closeButton && (
-          <Button
-            className={cl("navds-modal__button", {
-              "navds-modal__button--shake": shouldCloseOnOverlayClick,
-            })}
-            size="small"
-            variant="tertiary"
-            ref={buttonRef}
-            onClick={onClose}
-          >
-            <Close title="Lukk modalvindu" />
-          </Button>
-        )}
+        <Button
+          className={cl("navds-modal__button", {
+            "navds-modal__button--shake": shouldCloseOnOverlayClick,
+          })}
+          size="small"
+          variant="secondary"
+          ref={buttonRef}
+          aria-label="lukk modalvindu"
+          onClick={onClose}
+        >
+          <Close title="X-ikon for å lukke modal" />
+        </Button>
      </ReactModal>
    );
  }
@@ -11,7 +11,6 @@ Modal.setAppElement("#root");
 export const All = () => {
  const [open, setOpen] = useState(true);
  const [openTwo, setOpenTwo] = useState(false);
-  const [openThree, setOpenThree] = useState(false);

  return (
    <>
@@ -47,21 +46,6 @@ export const All = () => {
          </p>
        </Modal.Content>
      </Modal>
-      <button onClick={() => setOpenThree(true)}>
-        Open modal without x-button
-      </button>
-      <Modal
-        open={openThree}
-        closeButton={false}
-        onClose={() => setOpenThree(false)}
-      >
-        <Modal.Content>
-          <h1>Header</h1>
-          <h2>subheader</h2>
-          <p>Cupidatat irure ipsum veniam ad in esse.</p>
-          <p>Cillum tempor pariatur amet ut laborum Lorem enim enim.</p>
-        </Modal.Content>
-      </Modal>
    </>
  );
 };
@@ -1,3 +1,5 @@
+import { useEffect } from "react";
+
 export * from "./OverridableComponent";
 export * from "./useId";

@@ -11,3 +13,34 @@ export const omit = (obj: object, props: string[]) =>
      }),
      {}
    );
+
+export interface ListenerT {
+  addEventListener(
+    name: string,
+    handler: (event?: any) => void,
+    ...args: any[]
+  );
+
+  removeEventListener(
+    name: string,
+    handler: (event?: any) => void,
+    ...args: any[]
+  );
+}
+
+/* https://github.com/streamich/react-use/blob/master/src/useEvent.ts */
+export const useEventListener = <T extends ListenerT>(
+  name: Parameters<ListenerT["addEventListener"]>[0],
+  handler: Parameters<ListenerT["addEventListener"]>[1],
+  target: null | T | Window = window
+): void => {
+  useEffect(() => {
+    if (!target) {
+      return;
+    }
+    target?.addEventListener(name, handler);
+    return () => {
+      target?.addEventListener(name, handler);
+    };
+  }, [name, handler, target]);
+};
@@ -66,9 +66,3 @@
  outline: none;
  box-shadow: inset 0 0 0 2px var(--navds-dropdown-item-color-focus);
 }
-
-.navdsi-dropdown__item:disabled {
-  opacity: 0.3;
-  background: transparent;
-  cursor: not-allowed;
-}
@@ -1,6 +1,6 @@
 {
  "name": "@navikt/ds-css-internal",
-  "version": "0.7.1",
+  "version": "0.7.0",
  "private": false,
  "description": "Css for NAV internal Designsystem components",
  "author": "NAV Designsystem team",
@@ -1,6 +1,6 @@
 {
  "name": "@navikt/ds-react-internal",
-  "version": "0.9.14",
+  "version": "0.9.10-next.0",
  "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.7.3",
-    "@navikt/ds-react": "^0.14.14",
+    "@navikt/ds-icons": "^0.7.2",
+    "@navikt/ds-react": "^0.14.10-next.0",
    "@popperjs/core": "^2.10.1",
    "classnames": "^2.3.1",
    "copy-to-clipboard": "^3.3.1",
@@ -7,7 +7,7 @@ import { Success } from "@navikt/ds-react";
 # Hvordan ta i bruk CopyToClipboard

 Innholdet i `copyText` vil bli kopiert til clipboard, mens innholdet i `popoverText`
-brukes i popover. Hvis komponenten ikke har noen children (tekst i button) vil da en "navds-sr-only" tekst bli
+brukes i popover. Hvis komponenten ikke har noen children (tekst i button) vil da en "sr-only" tekst blie
 lagt på knappen med tekst "Kopier copyText"

 ```jsx
@@ -27,7 +27,6 @@ export const All = () => (
        <Dropdown.Menu.List>
          <Dropdown.Menu.List.Item>Gosys</Dropdown.Menu.List.Item>
          <Dropdown.Menu.List.Item>Psys</Dropdown.Menu.List.Item>
-          <Dropdown.Menu.List.Item disabled>Infotrygd</Dropdown.Menu.List.Item>
        </Dropdown.Menu.List>
      </Dropdown.Menu>
    </Dropdown>
@@ -0,0 +1,516 @@
+# Endringslogg
+
+## September 2021
+
+### Større oppdaterting for ds-react og ds-css
+
+- Følg migreringsguiden: https://navikt.github.io/Designsystemet/?path=/story/ds-react-migration--page
+
+## August 2021
+
+### Skjema-elementer i `ds-react`-pakken
+
+- Pakken ds-react og ds-css har nå implementert skjemakomponenter
+- Kan sees her: https://navikt.github.io/Designsystemet/?path=/story/ds-react-form-checkbox--all
+
+### Ikoner
+
+- `Addpeople` renamet til `Addperson` i ds-icons
+- `Desicion`-ikon lagt til.
+
+## Juli 2021
+
+### SpeechBubble komponent lagt til i ds-react
+
+- Oppdatert SpeechBubble kode og design lagt til i ds-react pakken
+
+### Loader komponent i ds-react (spinner)
+
+- Loader er nå oppdatert og lagt til i ds-react
+
+### Oppdatert AccordionMenu
+
+- AccordionMenu har fått oppdatert design for å synce med figma
+
+### MicroCard komponent
+
+- Liten tag brukt for lenger i produktsider er lagt tilk i ds-react
+
+### Oppdatert styling for ds-react komponenter + button
+
+- Action/Hoved knapp og Danger/Fare knapp har fått oppdatert styling i ds-react og nav-frontend-knapper
+- I tillegg har noen komponenter ds-css fått justert styling for å matche Figma bedre.
+
+### Ny Header komponent for produktsider i ds-react
+
+[#1128](https://github.com/navikt/nav-frontend-moduler/pull/1128)
+
+### Fikset RefAttributes for Accordion
+
+[#1122](https://github.com/navikt/nav-frontend-moduler/pull/1122)
+
+- Ref er satt til type HTMLButtonElement nå istedenfor HTMLDivElement.
+- Fikser SSR/CSR problem med forskjellige id-er som ble laget på server vs client.
+
+## Juni 2021
+
+### Verktøykasse MVP
+
+- MVP for verktøykassen ble publisert til design.nav.no
+
+### Fjernet smoothscroll fra ds-css
+
+[#1123](https://github.com/navikt/nav-frontend-moduler/pull/1123)
+
+- ds-css pakken defaulter ikke til at smoothscroll er satt. Dette er gjort av UU årsaker.
+
+### Linkpanel lagt til i `ds-react`-pakken
+
+### Nytt typo-oppsett for ds-react, ds-css og ds-tokens
+
+[#1079](https://github.com/navikt/nav-frontend-moduler/pull/1079)
+
+### Nytt typo-oppsett for ds-react, ds-css og ds-tokens
+
+[#1079](https://github.com/navikt/nav-frontend-moduler/pull/1079)
+
+[Typo med spacing](https://navikt.github.io/Designsystemet/?path=/story/ds-react-typography--typo-med-spacing)
+[Typo uten spacing](https://navikt.github.io/Designsystemet/?path=/story/ds-react-typography--typo-uten-spacing)
+[Bruks eksempel](https://navikt.github.io/Designsystemet/?path=/story/ds-react-typography--side-innhold-eksempel)
+
+Ds-react, ds-css og ds-tokens er alle minor-bumpet
+
+Nye komponenter for typografi:
+
+- Title: Heading
+- Ingress
+- BodyLong: Lengre tekster, tenk en vanlig paragraf
+- BodyShort: Mindre tekster, tenk teksten på en knapp eller label
+- Label
+- Detail: Detaljetekst på 14px
+
+Ds-css og ds-tokens er endret for å tilrettelegge for disse. Diverse komponenter i ds-react bruker nå også typo-stilene for å sikre riktig typo.
+
+## 21. Mai 2021
+
+### Popover-position oppdateres nå onMount
+
+[#1104](https://github.com/navikt/nav-frontend-moduler/pull/1104)
+
+- Hvis popover mountes med `ankerEl` så vil posisjon oppdateres riktig nå.
+- OPS! Tilfeller ved bruk av useRef som `ankerEl` kan føre til feil i posisjonering da Popover mountes med `ankerEl == null`, og da oppdatering av ref ikke fører til props oppdatering siden det er en ref. Anbefales å ta i bruk state for `ankerEl`
+
+## 19. Mai 2021
+
+### Oppdatert fargepalett
+
+[#1092](https://github.com/navikt/nav-frontend-moduler/pull/1092)
+
+- Alle nav-frontend pakker som `nav-frontend-core` berører vil major bumpes, inkludert `na v-frontend-core`.
+- `@navikt/ds-tokens`, `@navikt/ds-css` og `@navikt/ds-react` vil minor bumpes
+
+- `orangeFocus` og alle variantene av denne fargen er fjernet fra `nav-frontend-core`
+- `navRod`sine lighten/darken varianter er fjernet fra `nav-frontend-core`. Bruk `redError` som erstattning.
+- `@navikt/ds-tokens` har nå `purple` og `limegreen` farger tilgjengelige
+
+### Prop for hvit bakgrunn på veileder sin snakkeboble
+
+[#1099](https://github.com/navikt/nav-frontend-moduler/pull/1099)
+
+- Kan nå bruke prop `hvitSnakkeboble` for å setteakgrunnen på snakkeboble til hvit.
+
+## 18. Mai 2021
+
+### Oppdatert bakgrunnsfarge på Tag/Etikett for å synke med figma
+
+[#1097](https://github.com/navikt/nav-frontend-moduler/pull/1097)
+[#1094](https://github.com/navikt/nav-frontend-moduler/pull/1094)
+
+- Bakgrunnene til de fire komponent-variasjonenen er nå endret til `Lighten80` istedenfor `Lighten60`
+
+### Oppdatert textareaRef prop for textarea-controlled
+
+[#1098](https://github.com/navikt/nav-frontend-moduler/pull/1098)
+
+- Legger på optional argument i textareaRef-propen på samme måte som i Textarea-componenten.
+
+### BekreftCheckboksPanel label har nå underline onHover
+
+[#1095](https://github.com/navikt/nav-frontend-moduler/pull/1095)
+
+- Fikser en uu-feil hvor forskjellen på default og hover stil ikke var stor nok.
+
+## 14. Mai 2021
+
+### @navikt/ds-tokens eksporteres nå også i CommonJs format
+
+## 13. Mai 2021
+
+### Typeguard for children i Tekstomrade-komponenten
+
+[#1089](https://github.com/navikt/nav-frontend-moduler/pull/1089)
+
+- Sjekker at children == string, hvis ikke return null
+
+## 04. Mai 2021
+
+### Forbedret scroll-behavior for sticky-panel
+
+[#1084](https://github.com/navikt/nav-frontend-moduler/pull/1084)
+
+- Oppførselen til menyen scrollet separat på mobil-skjermer (< 648px), noe som førte til en litt rar interaksjon. Menyen og innholdet under flyter nå naturlig uten noen overflow og max-height.
+
+## 30. April 2021
+
+### xxxl -> 3xl etc
+
+[#1086](https://github.com/navikt/nav-frontend-moduler/pull/1086)
+
+### AnchorMenu history-state fiks
+
+[#1085](https://github.com/navikt/nav-frontend-moduler/pull/1085)
+
+- Beholder state-objektet når history oppdateres ved scrolling med anchor-menu. Dette benyttes ved async navigering mellom sider i bl.a. next.js, og denne vil brekke dersom state'en overskrives.
+
+- Bruker replaceState istedenfor pushState slik at frem/tilbake-knapper i browser oppfører seg mer som forventet
+
+## 27. April 2021
+
+### Kan nå bruke className på `Popover`-komponent
+
+[#1082](https://github.com/navikt/nav-frontend-moduler/pull/1082)
+
+- Bruker kan nå bruke className som en prop på `<Popover />` uten at den overskriver komponentens styling
+
+### Fikser Checkbokspanel focus+feil markering
+
+[#1081](https://github.com/navikt/nav-frontend-moduler/pull/1081)
+
+- Fokusmarkering vises nå når man har focus + feil
+
+## 21. April 2021
+
+## Active stil for secondary/normal-knapp er endret for å skille seg fra hover
+
+[#1062](https://github.com/navikt/nav-frontend-moduler/pull/1062)
+
+## 19. April 2021
+
+### Modal-overlay klasse for @navikt/ds-css er nå `fixed
+
+[#1074](https://github.com/navikt/nav-frontend-moduler/pull/1074)
+
+- `absolute -> fixed`
+
+## 16. April 2021
+
+### Fokusmarkering forsvinner ikke nå onHover
+
+[#1072](https://github.com/navikt/nav-frontend-moduler/pull/1072)
+
+### Scroll er nå bare "smooth" onFocus
+
+[#1071](https://github.com/navikt/nav-frontend-moduler/pull/1071)
+
+Smooth-scroll bare satt i html:focus-within
+Slipper da at det er smooth-scroll når man gjør eks ctrl + f søk på siden.
+
+Takk for tips @winsvold !
+
+## 08. April 2021
+
+### Gråskala er endret i `nav-frontend-core`
+
+[#1068](https://github.com/navikt/nav-frontend-moduler/pull/1068)
+
+- Gråfargene er endret til en mer nøytral og leselig farge enn tidligere.
+- Alle pakker som bruker `nav-frontend-core` eller har tilknytning til den (inkludert selve pakken) er minor bumpet fra x.0.x -> x.1.0.
+- Letteste måten å oppdatere pakkene på er å kjøre `npm update`
+- Hvis man ønsker å bumpe pakkene manuelt så kan alle `nav-frontend-*` pakker minor bumpes til x.1.x utenom disse:
+- - nav-frontend-chevron-style
+- - nav-frontend-chevron
+- - nav-frontend-fullbreddeknapp-style
+- - nav-frontend-grid-style
+- - nav-frontend-ikoner-assets
+- - nav-frontend-js-utils
+- - nav-frontend-spinner-style
+- - nav-frontend-spinner
+
+## 07. April 2021
+
+### Sourcemapping ds-icons og ds-react
+
+[#1064](https://github.com/navikt/nav-frontend-moduler/pull/1064)
+[#1065](https://github.com/navikt/nav-frontend-moduler/pull/1065)
+
+## 24. Mars 2021
+
+### Smoothscroll og reduced animations
+
+[#1055](https://github.com/navikt/nav-frontend-moduler/pull/1055)
+
+- `@navikt/ds-css` sin baseline setter nå `scroll-behavior: smooth;` på html by default
+- Ved `(prefers-reduced-motion: reduce)` vil baseline redusere animasjoner.
+
+## 10. Mars 2021
+
+### @navikt/ds-react importerer nå ikke styling i selve komponenten
+
+[#1030](https://github.com/navikt/nav-frontend-moduler/pull/1030)
+
+- Dette betyr at pakken `@navikt/ds-css` må importeres separat ved å endten linke til pakken i `<head>` eller importere den høyt i dom-strukturen.
+
+### @navikt/ds-react og @navikt/ds-icons er nå treeshakable
+
+[#1033](https://github.com/navikt/nav-frontend-moduler/pull/1033)
+
+- Begge pakkene defaulter nå til esm versjonen av pakken. De vanligste bundlerne hånterer da treeshaking selv når pakken blir brukt. Hvis man man ønsker å ta i bruk Commonjs versjonen kan man importere direkte fra `cjs` dir i pakken
+
+```bash
+Esm -> import { Button } from "@navikt/ds-react";
+Cjs -> import { Button } from "@navikt/ds-react/cjs";
+```
+
+Siden eks noen test-libraries ikke støtter ESM enda kan man legge denne til i jest config for å bruke pakkene:
+
+```
+"moduleNameMapper": {
+  "@navikt/ds-react(.*)": "@navikt/ds-react/cjs$1",
+  "@navikt/ds-icons(.*)": "@navikt/ds-icons/cjs$1"
+}
+```
+
+### Oppdatert feil-styling og state-handling for skjemakomponenter
+
+[#1018](https://github.com/navikt/nav-frontend-moduler/pull/1018)
+
+- Feil på Skjemagruppe vil føre til feil-styling på checkbox/radio og checkboxpanel/radiopanel
+- Checkboxpanel, Radiopanel og Radio har nå feil-prop
+- Feil + disabled styling er satt til bare disabled nå.
+- checkbox/radio og checkboxpanel/radiopanel kan nå alle ta i bruk utenFeilPropagerings-prop
+
+## 01. Mars 2021
+
+### Nav-frontend-typografi-style støtter nå Less v4
+
+[#1014](https://github.com/navikt/nav-frontend-moduler/pull/1014)
+
+- Alle divisjoner i Less-filer er nå wrappet i parentes
+
+## 22. Februar 2021
+
+### Kan nå vise label på checkbox i første column i tabell
+
+[#1000](https://github.com/navikt/nav-frontend-moduler/pull/1000)
+
+- Ved å sette `data-label="true"` på <Checkbox/> som blir brukt i tabell, kan man nå vise label om ønsket
+
+### Oppdatert Bekreftcheckboxpanel for bedre UU
+
+[#1002](https://github.com/navikt/nav-frontend-moduler/pull/1002)
+
+- Styling for Lenke blir nå endret ved bruk på Bekreftcheckboxpanel for å sikre god kontrast
+
+## 19. Februar 2021
+
+### Oppdatert animasjon Ekspanderbartpanel
+
+[#993](https://github.com/navikt/nav-frontend-moduler/pull/993)
+
+- Animasjonen er nå på 250ms, erstatter 400ms
+
+## 15. Februar 2021
+
+### Oppdatert dokumentasjon om obligatoriske felt i skjema
+
+[#996](https://github.com/navikt/nav-frontend-moduler/pull/996)
+
+- https://design.nav.no/patterns/form-validation
+
+## 12. Februar 2021
+
+### Proptable viser nå riktige default-values for props
+
+[#988](https://github.com/navikt/nav-frontend-moduler/pull/988)
+
+- Man kan nå se hva default-value er for props under teknisk side for komponenter
+- Eks: https://design.nav.no/components/alertstripe/technical
+
+## 05. Februar 2021
+
+### Komponenter støtter nå React v17
+
+[#979](https://github.com/navikt/nav-frontend-moduler/pull/979)
+
+- Alle react komponenter har nå devDep og peerDep `^16.8.0 || ^17.0.0`
+- React er fjernet som devDep for stilpakker
+
+## 05. Februar 2021
+
+### Ikon-nedlastning i PNG format
+
+[#973](https://github.com/navikt/nav-frontend-moduler/pull/973)
+
+- Ikonsiden tilbyr nå både nedlastning av ikoner i SVG og PNG format
+- Fargevelger for ikon er laget for å kunne laste ned ikonene med forskjellige farger.
+
+## 29. Januar 2021
+
+### Publisering av ikonpakke og ikonsøk
+
+[#945](https://github.com/navikt/nav-frontend-moduler/pull/945)
+
+- `@navikt/ds-icons` er publisert som version 0.1.0
+- Ikonsøket på design.nav.no er nå i bruk
+
+## 25. Januar 2021
+
+### Fjernet komponenten EtikettLiten
+
+[#956](https://github.com/navikt/nav-frontend-moduler/pull/956)
+
+- `Undertekst` kan brukes som erstatning da begge har samme styling.
+- Dette fører til en major bump fra v2 -> v3 for `nav-frontend-typografi`
+
+### Element for sortering av tabell endres
+
+[#893](https://github.com/navikt/nav-frontend-moduler/pull/893)
+
+- ✅ `<button aria-label="Sorter column synkende">`
+- ❌ `<Lenke href="#">`
+
+- Hover og fokusmarkering for element er endret, samt plassering av chevron [Eksempel](https://design.nav.no/components/tabell#sorterbar-tabell)
+
+Hvordan ta i bruk oppdateringen:
+
+- Oppdater `nav-frontend-tabell-styles` til v1.0.0
+- Legge til pakken `nav-frontend-knapper-style` som nå er en dependency.
+- Endre all bruk av `<Lenke>` i sortert tabell til `<button>`. Kan være lurt å lese de nye punktene her [tabell-UU](https://design.nav.no/components/tabell/accessibility) også da.
+- Sikre at prosjektet ditt kan håndtere SVG, da chevrons nå er svg og ikke css. Create-react-app gjør dette selv. Om du bruker webpack er dette den mest vanlige løsningen: [npmjs @svgr/webpack](https://www.npmjs.com/package/@svgr/webpack). Om du bruker VUE er dette en potensiell løsning [npmjs vue-svg-loader](https://www.npmjs.com/package/vue-svg-loader)
+
+## 08. Januar 2021
+
+### Oppdatert RadioPanel med prop radioRef
+
+[Pull-request](https://github.com/navikt/nav-frontend-moduler/pull/943)
+
+Kan nå sette ref på RadioPanel
+[Dokumentasjon](http://localhost:8000/components/radiopanelgruppe/#bruk-av-radioref)
+
+## 04. Januar 2021
+
+### Oppdaterte Alertstripe komponent for bedre UU
+
+[Pull-request](https://github.com/navikt/nav-frontend-moduler/pull/940)
+
+SVG-ikonene Alertstripe brukte har nå `role="img"` og `aria-label` for å fikse
+[WCAG 2.1 SC 1.1.1](https://www.w3.org/WAI/WCAG21/Understanding/non-text-content.html)
+
+### Fikset Math kalkulering for LESS v4
+
+[Pull-request](https://github.com/navikt/nav-frontend-moduler/pull/937)
+
+- Chevron mixin kalkulerte `Floor` uten parentes rundt intern kalkulering, noe LESS v4 ikke taklet.
+
+### Oppdatert eksempel-prosjekt for CRA og Webpack
+
+[Pull-request](https://github.com/navikt/nav-frontend-moduler/pull/931)
+
+- Oppdatert til nyeste CRA
+- Oppdatert til enklere eslint config
+- Satt opp prettier, pretty-quick og stylelint
+- Satt opp husky for commit og push (v4)
+- Begge bruker nå nav-frontend-core for scaffolding by default
+
+## 21. Desember 2020
+
+### Fikset mixins for LESS v4
+
+[Pull-request](https://github.com/navikt/nav-frontend-moduler/pull/930)
+
+- LESS v4 krever at alle mixins må bli brukt med parentes.
+
+`.skjemaelement__input;` ❌
+
+`.skjemaelement__input();` ✅
+
+## 14. Desember 2020
+
+### Endringer Chevron
+
+[Pull-request](https://github.com/navikt/nav-frontend-moduler/pull/916)
+
+- Endret implementasjon til å bruke `<span>` over `<i>` da dette var sett på som dårlig praksis.
+- Bumpet Chevron stilpakke til v1 da ingen større endringer vil treffe denne fremmover.
+
+## 18. januar 2020
+
+### [Den Store Skjema-oppdateringen™](https://gist.github.com/Lillebo/7394a6e491d479795a6418d93bff638c)
+
+:point_up: den, pluss:
+
+### Nye komponenter
+
+- Popover: https://design.nav.no/components/popover
+
+### Endringer
+
+- Fikset slik at `Etikett` utvider `HTMLDivElement`: [#575](https://github.com/navikt/nav-frontend-moduler/pull/575) Takk til [@hakonph](https://github.com/hakonph) :tada:
+- Fikset støtte for ikoner i Lenke: [#579](https://github.com/navikt/nav-frontend-moduler/pull/579) Takk til [@unorsk](https://github.com/unorsk) :tada:
+- Endret farge på valgt rad i Tabell: [#580](https://github.com/navikt/nav-frontend-moduler/pull/580)
+- Fikset støtte for å fortsatt rendre skjult innhold i EkspanderbartPanel: [#585](https://github.com/navikt/nav-frontend-moduler/pull/585) Takk til [@frodehansen2](https://github.com/frodehansen2) :tada:
+- Fikset støtte for `className` i Tekstomrade: [#590](https://github.com/navikt/nav-frontend-moduler/pull/590) Takk til [@alexander-svendsen](https://github.com/alexander-svendsen) :tada:
+- Fikset støtte for `className` i EkspanderbartPanel: [#594](https://github.com/navikt/nav-frontend-moduler/pull/594) Takk til [@kjesvale](https://github.com/kjesvale) :tada:
+- Forenklet skjermleser-tekst på lukknapp i Modal: [#612](https://github.com/navikt/nav-frontend-moduler/pull/612) Takk til [@frederikgdl](https://github.com/frederikgdl) :tada:
+- Fikset bortskriving fra `componentWillReceiveProps` i Popover: [#617](https://github.com/navikt/nav-frontend-moduler/pull/617) Takk til [@havstein](https://github.com/havstein) :tada:
+- Oppdatert LICENSE: [#619](https://github.com/navikt/nav-frontend-moduler/pull/619) Takk til [@erlendev](https://github.com/erlendev) :tada:
+- Lagt til blå "info"-variant av Veilederpanel: [#620](https://github.com/navikt/nav-frontend-moduler/pull/620) Takk til [@jhnav](https://github.com/jhnav) :tada:
+- Lagt til kontaktinformasjon for forslag til endringer i språk-retningslinjer: [#623](https://github.com/navikt/nav-frontend-moduler/pull/623) Takk til [@mariannefriess](https://github.com/mariannefriess) :tada:
+- Publisert ny versjon av Sketch-bibliotek med en rekke bugfikser og oppdatering til Sketch Smart Layout: [#624](https://github.com/navikt/nav-frontend-moduler/pull/624) Takk til [@vikingwind](https://github.com/vikingwind) :tada:
+- Publisert ny versjon av Ikon-bibliotek som inneholder hele ikon-pakken fremfor bare et utvalg: [#631](https://github.com/navikt/nav-frontend-moduler/pull/631) Takk til [@vikingwind](https://github.com/vikingwind) :tada:
+
+### Bugfikser
+
+- Fikset type for `onChange` prop på Textarea: [#578](https://github.com/navikt/nav-frontend-moduler/pull/578) Takk til [@hakonph](https://github.com/hakonph) :tada:
+- Fikset type for `inputRef` prop på Input: [#593](https://github.com/navikt/nav-frontend-moduler/pull/593) Takk til [@mijohansen](https://github.com/mijohansen) :tada:
+- Fikset avhengighet til React-versjon i Popover, Hjelpetekst
+- Fikset feil på posisjonering av Popover i IE11: [#611](https://github.com/navikt/nav-frontend-moduler/pull/611) Takk til [@frederikgdl](https://github.com/frederikgdl) :tada:
+- Fikset type for `checkboxRef` prop på Checkbox: [#615](https://github.com/navikt/nav-frontend-moduler/pull/615) Takk til [@nutgaard](https://github.com/nutgaard) :tada:
+- Fikset en bug der skjult tekst som kun er ment for skjermlesere likevel ble synlig i Hjelpetekst og Knapp: [#624](https://github.com/navikt/nav-frontend-moduler/pull/624)
+- Fikset slik at `className` ikke er påkrevd i Grid Row: [#630](https://github.com/navikt/nav-frontend-moduler/pull/630) Takk til [@AndreasDybdahl](https://github.com/AndreasDybdahl) :tada:
+- Fikset støtte for `className` prop i Snakkeboble: [#638](https://github.com/navikt/nav-frontend-moduler/pull/638) Takk til [@andersnav](https://github.com/andersnav) :tada:
+
+## 15. oktober 2019
+
+### Nye komponenter
+
+- Tabell: https://design.nav.no/components/tabell
+- Ikonknapper: https://design.nav.no/components/ikonknapper
+
+### Endringer
+
+- Fikset støtte for publisering og markering av "beta"-pakker på design.nav.no
+- Fikset støtte for å liste opp og vise frem rene "style"-pakker i komponentoversikten på design.nav.no
+- Muligheten for å bare innstallere "style"-pakkene har blitt litt tydeligere under "Teknisk" på komponent-sidene
+- Fikset støtte for ikoner i knapper: https://design.nav.no/components/knapp#med-ikon
+- Fikset aria-varsling og rød markering på tekst-teller når Textarea får for mange tegn: [#548](https://github.com/navikt/nav-frontend-moduler/pull/548)
+- Fikset støtte for React 17.0+ i Ekspanderbartpanel: [#541](https://github.com/navikt/nav-frontend-moduler/pull/541) Takk til [@erlend-axelsson](https://github.com/@erlendaxelsson) :tada:
+- Fikset støtte for å bruke knappe-stiler på lenker: [#532](https://github.com/navikt/nav-frontend-moduler/pull/532)
+- Tegnbegrensning på Textarea er nå valgfri: [#490](https://github.com/navikt/nav-frontend-moduler/pull/490) Takk til [@hakonph](https://github.com/hakonph) :tada:
+
+### Sider publisert på design.nav.no
+
+- Oppdaterte språk-sider: https://design.nav.no/resources/language Takk til [@mariannefriess](https://github.com/mariannefriess) :tada:
+- Tilgjengelighet: https://design.nav.no/accessibility
+- Prinsipper for brukeropplevelse på interne flater: https://design.nav.no/resources/internal-ux-principles Takk til Hanna Sofia Hogberg og @ElinNav og alle andre som bidro :tada:
+- Subdomener: https://design.nav.no/resources/subdomains Takk til Tov Are Jacobsen og Petter Hafskjold :tada:
+- Grid: https://design.nav.no/resources/grid
+- Typografi: https://design.nav.no/resources/typography
+
+### Bugfikser
+
+- Fikset en gammel og plagsom bug med dårlig font-rendering i Chrome på Windows: [#557](https://github.com/navikt/nav-frontend-moduler/pull/557) Takk til @unorsk :tada:
+- Fikset en bug hvor knapper med 100% bredde fikk venstrejustert innhold: [#532](https://github.com/navikt/nav-frontend-moduler/pull/532) Takk til @winsvold :tada:
+- Fikset en bug hvor Textarea av og til kunne oppta dobbelt så mye plass som det trengte: [#530](https://github.com/navikt/nav-frontend-moduler/pull/530)
+- Fikset syntax-feil i scaffolding-script: [#523](https://github.com/navikt/nav-frontend-moduler/pull/523)
+- Fikset visuell bug hvor spinner forsvant på knapper med fokus: [#498](https://github.com/navikt/nav-frontend-moduler/pull/498)
@@ -1,6 +1,9 @@
 # Bidra med utvikling av nye og eksisterende komponenter

-Lyst på en ny kul feature på en komponent? Prøv deg på en løsning selv eller start en dialog så kan vi hjelpe deg.
+#
+
+Det oppfordres til at alle blir med og bidrar med nye moduler, og holder eksisterende moduler vedlike,
+slik at mest mulig av fremtidige moduler er å finne her og fungerer etter de behov som man har i det enkelte prosjekt.

 ## TL;DR

@@ -28,25 +31,21 @@ brew reinstall vips

 ## Utviklingsmiljø

-Vi bruker storybook [https://storybook.js.org/](https://storybook.js.org/) som utviklermiljø.
+Vi tar nå i bruk storybook [https://storybook.js.org/](https://storybook.js.org/) som utviklermiljø.
 `yarn storybook` vil starte opp dette miljøet og kan da skrive `stories` for komponentene man vil teste [hvordan skrive storybook stories](https://storybook.js.org/docs/react/writing-stories/introduction)

 ## Utvikling av nye komponenter

 **NB!!** Det er aldri behov for å kjøre `npm install` i noen annen mappe enn rot-mappen.
-Om en modul du lager har behov for en npm-pakke så kan du legge den til i devDep/dep i pakken for så å kjøre `yarn install` i root. Yarn workspaces fikser da dependency treet selv. Hvis du lurer på hvordan strukturen er satt opp, så hjelper vi deg gjerne!
+Om en modul du lager har behov for en npm-pakke så kan du legge den til i devDep/dep i pakken for så å kjøre `yarn install` i root. Yarn workspaces fikser da dependency treet selv.

 ## Dokumentasjon

-Dokumentasjon ang komponentter finner man på nettsiden vår [design.nav.no](https://design.nav.no/). Hvis man ønsker å skrive noe dokumentasjon selv gjør vi det via CMS et Sanity. Spør gjerne om tilgang så kan du være med å utfylle dokumentasjonen vår [her](https://verktoykasse.sanity.studio/).
+Dokumentasjon kan skrives ved å legge til mdx filer under `website/src/pages`. Nye komponenter under `@navikt/` dokumenteres ved å skrive mdx filer under `website/src/pages/beta/components`. Eldre komponenter dokumenteres ved å endre mdx filer under `md`-mappen lokalt i pakken under `packages`.

-## Kodekvalitet og testing
+## Kodekvalitet

-Kode: Noen komponenter og løsninger blir testet med jest + react-testing-library hvert build.
-
-Design: Ved bruk av [Chromatic](https://www.chromatic.com/) + storybook har vi visuell regresjons-testing på alle komponentene våre.
-
-For å sikre kodekvalitet er det satt opp både `prettier` som kjører for hver commit, samt linter som kjører hvert push. All kode blir da auto-"prettified"
+For å sikre kodekvalitet er det satt opp både `prettier` som kjører for hver commit, samt linter som kjører hvert push

 ## Kommandoer

@@ -58,9 +57,15 @@ For å sikre kodekvalitet er det satt opp både `prettier` som kjører for hver
 - `yarn lint` - Kjører diverse lintere på kode og styling
 - `yarn storybook` - starter opp utviklingsmiljø for storybook

+### Nettside
+
+- `yarn start` - starter opp gatsby nettsiden lokalt
+- `yarn build:gatsby` - bygger gatsby nettsiden lokalt
+- `yarn serve` - server bygd gatsby nettside på localhost:9000
+
 ## Ikoner

-> Krever at man har lagt til en .env fil under `@navikt/core/icons` med en Figma auth-token i format FIGMA_TOKEN="[TOKEN]"
+> Krever at man har lagt til en .env fil under `@navikt/core/icons/figma-api` med en Figma auth-token i format FIGMA_TOKEN="[TOKEN]"

 - `yarn lerna:icons` - Oppdaterer ikonpakken med de nyeste ikonene fra Figma-biblioteket

@@ -1,5 +1,5 @@
 <h1 align="center">
-    <img src="https://avatars.githubusercontent.com/u/11848947?s=200&v=4" />
+    <img src="https://www.nav.no/_/asset/no.nav.navno:1575554845/img/navno/logo.svg" />
    <br/>Designsystemet
 </h1>

@@ -11,10 +11,8 @@
      <a href="https://github.com/navikt/nav-frontend-moduler/pulls">
          <img src="https://img.shields.io/badge/PRs-welcome-green.svg" />
      </a>
-         <img src="https://github.com/navikt/nav-frontend-moduler/actions/workflows/build-publish.yml/badge.svg" />
-        <img src="https://github.com/navikt/nav-frontend-moduler/actions/workflows/chromatic.yml/badge.svg" />    
+         <img src="https://github.com/navikt/nav-frontend-moduler/workflows/Build,%20test%20and%20maybe%20publish/badge.svg" />
    </p>
-   <img src="https://img.shields.io/endpoint?style=for-the-badge&url=https://runkit.io/fezvrasta/combined-npm-downloads/1.0.0?packages=@navikt/ds-react,@navikt/ds-css,@navikt/ds-icons,@navikt/ds-tokens,@navikt/ds-react-internal,@navikt/ds-css-internal,nav-frontend-alertstriper-style,nav-frontend-alertstriper,nav-frontend-chevron-style,nav-frontend-chevron,nav-frontend-core,nav-frontend-ekspanderbartpanel-style,nav-frontend-ekspanderbartpanel,nav-frontend-etiketter-style,nav-frontend-etiketter,nav-frontend-fullbreddeknapp-style,nav-frontend-grid-style,nav-frontend-grid,nav-frontend-hjelpetekst-style,nav-frontend-hjelpetekst,nav-frontend-ikoner-assets,nav-frontend-ikonknapper,nav-frontend-js-utils,nav-frontend-knapper-style,nav-frontend-knapper,nav-frontend-lenkepanel-style,nav-frontend-lenkepanel,nav-frontend-lenker-style,nav-frontend-lenker,nav-frontend-lesmerpanel-style,nav-frontend-lesmerpanel,nav-frontend-lukknapp-style,nav-frontend-lukknapp,nav-frontend-modal-style,nav-frontend-modal,nav-frontend-paneler-style,nav-frontend-paneler,nav-frontend-popover-style,nav-frontend-popover,nav-frontend-skjema-style,nav-frontend-skjema,nav-frontend-snakkeboble-style,nav-frontend-snakkeboble,nav-frontend-spinner-style,nav-frontend-spinner,nav-frontend-stegindikator-style,nav-frontend-stegindikator,nav-frontend-tabell-style,nav-frontend-tabs-style,nav-frontend-tabs,nav-frontend-tekstomrade,nav-frontend-toggle-style,nav-frontend-toggle,nav-frontend-typografi-style,nav-frontend-typografi,nav-frontend-veileder-style,nav-frontend-veileder,nav-frontend-veilederpanel-style,nav-frontend-veilederpanel" />
    <h4><a href="https://design.nav.no">Nettside</a> | <a href="https://github.com/navikt/nav-frontend-moduler/blob/master/CONTRIBUTING.md">Bidra</a> | <a href="https://github.com/navikt/nav-frontend-moduler/issues">Bug-rapport</a>
 </div>

@@ -23,16 +21,8 @@
 Repoet inneholder følgende:

 - [Felleskomponenter](https://github.com/navikt/nav-frontend-moduler/tree/master/@navikt/)
- [Storybook](https://5f801fb2aea7820022de2936-rognyzqcpw.chromatic.com/) for komponenter.
- [Gammel dokumentasjon](https://old-design-nav.vercel.app) for komponenter.
-
- ## Dokumentasjon
-    
-[Dokumentasjon side forvaltes i dette repoet](https://github.com/navikt/verktoykassen)
-
-## Endringslogg
-
-[Alle relevante kode-endringer blir dokumentert her](https://design.nav.no/designsystem/side/endringslogg)
+- [Storybook](https://navikt.github.io/Designsystemet) for komponenter.
+- [Gammel dokumentasjon](https://old-design-nav.vercel.app/designsystem) for komponenter.

 ## Bidra

@@ -41,9 +31,3 @@ Gå til [CONTRIBUTING.md](https://github.com/navikt/nav-frontend-moduler/blob/ma
 ## Lisenser

 Gå til [LICENSE](https://github.com/navikt/nav-frontend-moduler/blob/master/LICENSE)
-    
-## Contributors
-    
-<a href="https://github.com/navikt/nav-frontend-moduler/graphs/contributors">
-  <img src="https://contrib.rocks/image?repo=navikt/nav-frontend-moduler" />
-</a>
@@ -56,6 +56,10 @@
    "url": "https://github.com/navikt/nav-frontend-moduler.git"
  },
  "dependencies": {
+    "@storybook/addon-storysource": "^6.3.4",
+    "@storybook/addons": "^6.3.4",
+    "@storybook/theming": "^6.3.4",
+    "@storybook/addon-a11y": "^6.3.12",
    "extend": "^3.0.2",
    "gh-pages": "^3.1.0",
    "glob": "^7.1.6",
@@ -68,17 +72,11 @@
    "yarn": "^1.22.10"
  },
  "devDependencies": {
-    "@storybook/addon-storysource": "^6.4",
-    "@storybook/addons": "^6.4",
-    "@storybook/theming": "^6.4",
-    "@storybook/addon-a11y": "^6.4",
-    "@storybook/builder-webpack5": "^6.4",
-    "@storybook/manager-webpack5": "^6.4",
-    "@storybook/addon-actions": "^6.4",
-    "@storybook/addon-docs": "^6.4",
-    "@storybook/addon-essentials": "^6.4",
-    "@storybook/react": "^6.4",
    "@babel/core": "^7.11.6",
+    "@storybook/addon-actions": "^6.3.4",
+    "@storybook/addon-docs": "^6.3.4",
+    "@storybook/addon-essentials": "^6.3.4",
+    "@storybook/react": "^6.3.4",
    "@typescript-eslint/eslint-plugin": "^4.3.0",
    "@typescript-eslint/parser": "^4.3.0",
    "babel-eslint": "^10.1.0",
Author	SHA1	Message	Date
Ken	d9174b4352	Lerna versionbump [ci skip] - @navikt/ds-css@0.12.11-next.0 - @navikt/ds-react@0.14.10-next.0 - @navikt/ds-react-internal@0.9.10-next.0	2022-01-15 22:32:02 +01:00
Ken	eea7b7e2a5	v	2022-01-15 22:29:35 +01:00
Ken	83eabecc09	Merge branch 'master' into update/searchfield	2022-01-15 22:22:40 +01:00
Ken	adb5db8dab	toggle for clearbutton	2022-01-14 12:28:46 +01:00
Ken	6d2d9f7a21	fikset css margin-issue	2022-01-14 12:22:44 +01:00
Ken	965b6c9bc7	fikset events for searchbutton	2022-01-13 13:55:17 +01:00
Ken	674aabe50e	hook og starte handling	2022-01-13 11:28:43 +01:00
Ken	b9ba01a02d	hover på button	2022-01-11 12:59:29 +01:00
Ken	98424123c2	la til inverted i stories	2022-01-11 12:11:32 +01:00
Ken	bd6c524cad	Merge branch 'master' into update/searchfield	2022-01-11 12:01:30 +01:00
Ken	750ed8376c	storybook	2022-01-11 11:58:49 +01:00
Ken	815cd85da5	bruker nå spacing tokens	2022-01-11 11:32:20 +01:00
Ken	466d1b375a	forenklet hover/focus	2022-01-11 11:28:12 +01:00
Ken	85aed1d104	tokens	2022-01-11 11:23:22 +01:00
Ken	479c46d3a7	fungerende inverted	2022-01-11 10:39:41 +01:00
Ken	28bea1e430	statet på inverted	2022-01-11 09:46:59 +01:00
Ken	dc9a52c33c	searchfield i header og tabell	2022-01-10 23:18:09 +01:00
Ken	755acf80f2	searchfield api + styling	2022-01-10 17:26:33 +01:00
Ken	cf6bd1e5c3	søk ikon	2022-01-10 16:18:37 +01:00