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-24 14:42:02 +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
40 changed files with 1732 additions and 1409 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;
 }
@@ -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.12",
+  "version": "0.12.11-next.0",
  "private": false,
  "description": "Css for NAV Designsystem components",
  "author": "NAV Designsystem team",
@@ -1,6 +1,6 @@
 {
  "name": "@navikt/ds-react",
-  "version": "0.14.12",
+  "version": "0.14.10-next.0",
  "private": false,
  "description": "NAV designsystem react components",
  "author": "NAV Designsystem team",
@@ -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}
@@ -115,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,
+    },
+  };
+};
@@ -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.12",
+  "version": "0.9.10-next.0",
  "private": false,
  "description": "NAV internal designsystem react components",
  "author": "NAV Designsystem team",
@@ -34,7 +34,7 @@
  },
  "dependencies": {
    "@navikt/ds-icons": "^0.7.2",
-    "@navikt/ds-react": "^0.14.12",
+    "@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