Lerna versionbump [ci skip]

- @navikt/ds-css@0.6.20
 - @navikt/ds-react@0.7.4

.storybook/main.js

@@ -10,7 +10,6 @@ module.exports = {
     "../@navikt/**/*.stories.@(js|jsx|ts|tsx|mdx)",
   ],
   addons: [
-    "@storybook/addon-links",
     "@storybook/addon-docs",
     {
       name: "@storybook/addon-storysource",
@@ -27,6 +26,5 @@ module.exports = {
         controls: { hideNoControlsWarning: true },
       },
     },
-    "@whitespace/storybook-addon-html",
   ],
 };

.storybook/stories/introduction.stories.mdx

@@ -11,7 +11,7 @@ yarn add @navikt/ds-react @navikt/ds-css
 ```
 
 Siden stilene ikke importeres direkte i komponentene, så må man selv importere ds-css.
-Dette gjøres for å la komponetene brukes i Nextjs prosjekter.
+For å legge til all stylingen som trengs må man da bare importere `ds-css`.
 
 ```bash
 import "@navikt/ds-css"
@@ -19,15 +19,4 @@ import "@navikt/ds-css"
 
 Dette vil også legge css-variabler på :root. For å få dette til å fungere med IE11, kan denne pakken tas i bruk: https://jhildenbiddle.github.io/css-vars-ponyfill/#/
 
-## Testing
-
-For å støtte testing med eks Jest som ikke tillater ESM moduler, så kan denne configen legges til
-
-```bash
-"moduleNameMapper": {
-  "@navikt/ds-react(.*)": "@navikt/ds-react/cjs$1",
-  "@navikt/ds-icons(.*)": "@navikt/ds-icons/cjs$1"
-}
-```
-
-Dette vil remappe komponentene (og ikonpakken) til å bruke CommonJs versjonen for testing
+Note: Disse komponentene kan ikke garanteres at fungerer som forventet i IE11 da vi har valgt og ikke unngå styling-valg basert på IE11 støtte eller ikke.

@navikt/README.md

@@ -0,0 +1,3 @@
+# Designsystem v2 
+
+Storybook: https://navikt.github.io/Designsystemet/

@navikt/ds-css/form/index.css

@@ -13,3 +13,4 @@
 @import "select.css";
 @import "text-field.css";
 @import "textarea.css";
+@import "search-field.css";

@navikt/ds-css/form/search-field.css

@@ -0,0 +1,32 @@
+.navds-search-field__input-wrapper {
+  display: flex;
+}
+
+.navds-form-field--s .navds-search-field__input {
+  padding: 0.25rem;
+  min-height: 32px;
+}
+
+.navds-search-field__input-wrapper > *:not(:first-child):not(:last-child) {
+  border-radius: 0;
+}
+
+.navds-search-field__input-wrapper > :first-child {
+  border-top-right-radius: 0;
+  border-bottom-right-radius: 0;
+}
+
+.navds-search-field__input-wrapper > :last-child {
+  border-top-left-radius: 0;
+  border-bottom-left-radius: 0;
+}
+
+.navds-search-field__input-wrapper :focus {
+  z-index: 1;
+}
+
+.navds-search-field--error
+  .navds-search-field__input:not(:hover):not(:focus):not(:disabled) {
+  box-shadow: 0 0 0 1px var(--navds-color-red-50) inset;
+  border-color: var(--navds-color-red-50);
+}

@navikt/ds-css/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@navikt/ds-css",
-  "version": "0.6.19",
+  "version": "0.6.20",
   "private": false,
   "description": "Css for NAV Designsystem components",
   "author": "NAV Designsystem team",

@navikt/ds-icons/stories/icons.stories.mdx

@@ -4,7 +4,7 @@ import { Meta } from "@storybook/addon-docs";
 
 # Ta i bruk ikonpakken `@navikt/ds-icons`
 
-Alle ikoner kan bli funnet her https://design.nav.no/resources/icons
+Alle ikoner kan bli funnet her https://design.nav.no/designsystem/resources/icons
 
 ## Oppsett
 
@@ -12,7 +12,7 @@ Alle ikoner kan bli funnet her https://design.nav.no/resources/icons
 yarn add @navikt/ds-icons
 ```
 
-```bash
+```jsx
 Import { Expand } from `@navikt/ds-icons`;
 
 <Expand
@@ -22,15 +22,4 @@ Import { Expand } from `@navikt/ds-icons`;
 />
 ```
 
-## Testing
-
-For å støtte testing med eks Jest som ikke tillater ESM moduler, så kan denne configen legges til
-
-```bash
-"moduleNameMapper": {
-  "@navikt/ds-react(.*)": "@navikt/ds-react/cjs$1",
-  "@navikt/ds-icons(.*)": "@navikt/ds-icons/cjs$1"
-}
-```
-
-Dette vil remappe Ikonpakken (og komponentpakken) til å bruke CommonJs versjonen for testing
+Note: Det kan være tilfeller der oppsettet ditt ikke har støtte for SVG, og det må da legges til manuelt i eks en webpack config basert på hva som blir brukt.

@navikt/ds-react/package.json

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

@navikt/ds-react/src/button/Button.tsx

@@ -1,7 +1,8 @@
 import React, { forwardRef } from "react";
 import cl from "classnames";
 
-export interface ButtonProps extends React.HTMLAttributes<HTMLButtonElement> {
+export interface ButtonProps
+  extends React.ButtonHTMLAttributes<HTMLButtonElement> {
   /**
    * Component content
    */

@navikt/ds-react/src/form/Fieldset/Fieldset.tsx

@@ -82,7 +82,7 @@ const Fieldset = forwardRef<HTMLFieldSetElement, FieldsetProps>(
         }}
       >
         <fieldset
-          {...omit(rest, ["errorId"])}
+          {...omit(rest, ["errorId", "error", "size"])}
           {...inputProps}
           ref={ref}
           className={cl(

@navikt/ds-react/src/form/Select.tsx

@@ -1,7 +1,7 @@
 import React, { forwardRef, SelectHTMLAttributes } from "react";
 import cl from "classnames";
 import { Expand } from "@navikt/ds-icons";
-import { BodyShort, Label } from "..";
+import { BodyShort, Label, omit } from "..";
 import ErrorMessage from "./ErrorMessage";
 import { FormFieldProps, useFormField } from "./useFormField";
 
@@ -78,7 +78,7 @@ const Select = forwardRef<HTMLSelectElement, SelectProps>((props, ref) => {
       )}
       <div className="navds-select__container">
         <select
-          {...rest}
+          {...omit(rest, ["error", "errorId", "size"])}
           {...inputProps}
           ref={ref}
           className={cl(

@navikt/ds-react/src/form/TextField.tsx

@@ -1,6 +1,6 @@
 import React, { forwardRef, InputHTMLAttributes } from "react";
 import cl from "classnames";
-import { BodyShort, Label } from "..";
+import { BodyShort, Label, omit } from "..";
 import ErrorMessage from "./ErrorMessage";
 import { FormFieldProps, useFormField } from "./useFormField";
 
@@ -70,7 +70,7 @@ const TextField = forwardRef<HTMLInputElement, TextFieldProps>((props, ref) => {
         </BodyShort>
       )}
       <input
-        {...rest}
+        {...omit(rest, ["error", "errorId", "size"])}
         {...inputProps}
         ref={ref}
         type="text"

@navikt/ds-react/src/form/Textarea.tsx

@@ -1,7 +1,7 @@
 import React, { forwardRef } from "react";
 import cl from "classnames";
 import TextareaAutosize from "@material-ui/core/TextareaAutosize";
-import { BodyShort, Label } from "..";
+import { BodyShort, Label, omit } from "..";
 import ErrorMessage from "./ErrorMessage";
 import { FormFieldProps, useFormField } from "./useFormField";
 import { useId } from "..";
@@ -92,7 +92,7 @@ const Textarea = forwardRef<HTMLTextAreaElement, TextareaProps>(
         )}
         <div className="navds-textarea__wrapper">
           <TextareaAutosize
-            {...rest}
+            {...omit(rest, ["error", "errorId", "size"])}
             {...inputProps}
             ref={ref}
             className={cl(

@navikt/ds-react/src/form/checkbox/Checkbox.tsx

@@ -16,6 +16,10 @@ export interface CheckboxProps
    * Hides label and makes it viewable for screen-readers only.
    */
   hideLabel?: boolean;
+  /**
+   * The value of the HTML element.
+   */
+  value?: string;
 }
 
 const Checkbox = forwardRef<HTMLInputElement, CheckboxProps>((props, ref) => {

@navikt/ds-react/src/form/checkbox/useCheckbox.ts

@@ -17,7 +17,7 @@ const useCheckbox = ({ children, ...props }: CheckboxProps) => {
         "`checked` is unsupported on <Checkbox> elements within a <CheckboxGroup>. Please set a `value` or `defaultValue` on <CheckboxGroup> instead."
       );
     }
-    if (props.value === null) {
+    if (props.value === undefined) {
       console.warn(
         "A <Checkbox> element within a <CheckboxGroup> requires a `value` property."
       );

@navikt/ds-react/src/form/index.ts

@@ -10,6 +10,12 @@ export {
   FieldsetProps,
 } from "./Fieldset";
 export { Radio, RadioGroup, RadioGroupProps, RadioProps } from "./radio";
+export {
+  SearchField,
+  SearchFieldProps,
+  SearchFieldInput,
+  SearchFieldInputProps,
+} from "./search-field";
 export { default as Select, SelectProps } from "./Select";
 export {
   ErrorSummary,

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

@@ -0,0 +1,110 @@
+import cl from "classnames";
+import React, { forwardRef } from "react";
+import { BodyShort, Label, omit } from "../..";
+import ErrorMessage from "../ErrorMessage";
+import { FormFieldProps, useFormField } from "../useFormField";
+
+export interface SearchFieldContextProps {
+  inputProps: {
+    id: string;
+    "aria-invalid": boolean;
+    "aria-describedby"?: string;
+    disabled?: boolean;
+  };
+  size?: "m" | "s";
+}
+
+export const SearchFieldContext = React.createContext<SearchFieldContextProps | null>(
+  null
+);
+
+export interface SearchFieldProps
+  extends FormFieldProps,
+    React.HTMLAttributes<HTMLDivElement> {
+  /**
+   * SearchFieldInput & SearchFieldButton
+   */
+  children: React.ReactNode;
+  /**
+   * If enabled shows the label and description for screenreaders only
+   */
+  hideLabel?: boolean;
+  /**
+   * SearchField label
+   */
+  label: React.ReactNode;
+}
+
+const SearchField = forwardRef<HTMLDivElement, SearchFieldProps>(
+  (props, ref) => {
+    const {
+      inputProps,
+      errorId,
+      showErrorMsg,
+      hasError,
+      size,
+      inputDescriptionId,
+    } = useFormField(props, "searchfield");
+
+    const {
+      className,
+      hideLabel,
+      children,
+      label,
+      description,
+      error,
+      ...rest
+    } = props;
+
+    return (
+      <div
+        ref={ref}
+        {...omit(rest, ["id", "error", "errorId", "size", "disabled"])}
+        className={cl(
+          className,
+          "navds-form-field",
+          `navds-form-field--${size ?? "m"}`,
+          "navds-search-field",
+          { "navds-search-field--error": hasError }
+        )}
+      >
+        <Label
+          htmlFor={inputProps.id}
+          size={size}
+          component="label"
+          className={cl("navds-text-field__label", {
+            "sr-only": hideLabel,
+          })}
+        >
+          {label}
+        </Label>
+        {!!description && (
+          <BodyShort
+            className={cl("navds-text-field__description", {
+              "sr-only": hideLabel,
+            })}
+            id={inputDescriptionId}
+            size={size}
+          >
+            {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>
+      </div>
+    );
+  }
+);
+
+export default SearchField;

@navikt/ds-react/src/form/search-field/SearchFieldButton.tsx

@@ -0,0 +1,43 @@
+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 "action"
+   */
+  variant?: "primary" | "action";
+}
+
+const SearchFieldButton = forwardRef<HTMLButtonElement, SearchFieldButtonProps>(
+  ({ className, variant = "action", 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;

@navikt/ds-react/src/form/search-field/SearchFieldClearButton.tsx

@@ -0,0 +1,44 @@
+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 "primary"
+   */
+  variant?: "primary" | "action";
+}
+
+const SearchFieldClearButton = forwardRef<
+  HTMLButtonElement,
+  SearchFieldClearButtonProps
+>(({ className, variant = "primary", 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
+      ref={ref}
+      className={cl(className, "navds-search-field__button")}
+      {...rest}
+      size={size}
+      variant={variant}
+      disabled={disabled ?? inputProps?.disabled}
+    />
+  );
+});
+
+export default SearchFieldClearButton;

@navikt/ds-react/src/form/search-field/SearchFieldInput.tsx

@@ -0,0 +1,37 @@
+import React, { forwardRef, InputHTMLAttributes, useContext } from "react";
+import cl from "classnames";
+import { SearchFieldContext } from "./SearchField";
+
+export interface SearchFieldInputProps
+  extends InputHTMLAttributes<HTMLInputElement> {}
+
+const SearchFieldInput = forwardRef<HTMLInputElement, SearchFieldInputProps>(
+  ({ 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}
+        ref={ref}
+        type="text"
+        className={cl(
+          className,
+          "navds-search-field__input",
+          "navds-text-field__input",
+          "navds-body-short",
+          `navds-body-${size ?? "m"}`
+        )}
+      />
+    );
+  }
+);
+
+export default SearchFieldInput;

@navikt/ds-react/src/form/search-field/index.ts

@@ -0,0 +1,13 @@
+export { default as SearchField, SearchFieldProps } from "./SearchField";
+export {
+  default as SearchFieldInput,
+  SearchFieldInputProps,
+} from "./SearchFieldInput";
+export {
+  default as SearchFieldButton,
+  SearchFieldButtonProps,
+} from "./SearchFieldButton";
+export {
+  default as SearchFieldClearButton,
+  SearchFieldClearButtonProps,
+} from "./SearchFieldClearButton";

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

@@ -0,0 +1,31 @@
+import React, { useState } from "react";
+import { Close, Search } from "@navikt/ds-icons";
+import {
+  SearchField,
+  SearchFieldInput,
+  SearchFieldButton,
+  SearchFieldClearButton,
+} from "../index";
+
+export const Example = () => {
+  const [value, setValue] = useState("");
+
+  return (
+    <SearchField
+      label="Mollit eiusmod"
+      description="Ea cupidatat eu sunt commodo"
+    >
+      <SearchFieldInput
+        value={value}
+        onChange={(e) => setValue(e.target.value)}
+      />
+      <SearchFieldClearButton onClick={() => setValue("")}>
+        <Close />
+        <span>Tøm</span>
+      </SearchFieldClearButton>
+      <SearchFieldButton>
+        <Search /> <span>Søk</span>
+      </SearchFieldButton>
+    </SearchField>
+  );
+};

@navikt/ds-react/src/form/search-field/stories/search-field.stories.mdx

@@ -0,0 +1,206 @@
+import { Meta, Canvas } from "@storybook/addon-docs";
+import {
+  SearchField,
+  SearchFieldInput,
+  SearchFieldButton,
+  SearchFieldClearButton,
+} from "../index";
+
+import { Example } from "./search-field-example.tsx";
+
+import { Search } from "@navikt/ds-icons";
+
+<Meta title="ds-react/form/search-field/intro" />
+
+# Hvordan ta i bruk SearchField
+
+## Viktig
+
+Komponenten er ikke testet eller gått gjennom et design-review, så anbefalses og vente med å ta den i bruk.
+
+## Bruk
+
+```jsx
+<SearchField label="Mollit eiusmod" description="Ea cupidatat eu sunt commodo">
+  <SearchFieldInput />
+  <SearchFieldButton>
+    <Search /> <span>Søk</span>
+  </SearchFieldButton>
+</SearchField>
+```
+
+<Canvas>
+  <SearchField
+    label="Mollit eiusmod"
+    description="Ea cupidatat eu sunt commodo"
+  >
+    <SearchFieldInput />
+    <SearchFieldButton>
+      <Search /> <span>Søk</span>
+    </SearchFieldButton>
+  </SearchField>
+</Canvas>
+
+## hideLabel
+
+`hideLabel` proppen kan brukes for å vise label + description for bare skjermlesere.
+Vi har satt `label` som required siden man vil bruke den i sammenheng med denne proppen for bedre UU.
+
+```jsx
+<SearchField
+  label="Mollit eiusmod"
+  description="Ea cupidatat eu sunt commodo"
+  hideLabel
+>
+  <SearchFieldInput />
+  <SearchFieldButton>
+    <Search /> <span>Søk</span>
+  </SearchFieldButton>
+</SearchField>
+```
+
+<Canvas>
+  <SearchField
+    label="Mollit eiusmod"
+    description="Ea cupidatat eu sunt commodo"
+    hideLabel
+  >
+    <SearchFieldInput />
+    <SearchFieldButton>
+      <Search /> <span>Søk</span>
+    </SearchFieldButton>
+  </SearchField>
+</Canvas>
+
+## Sizing
+
+```jsx
+<SearchField
+  label="Mollit eiusmod"
+  description="Ea cupidatat eu sunt commodo"
+  hideLabel
+  size="s"
+>
+  <SearchFieldInput />
+  <SearchFieldButton>
+    <Search /> <span>Søk</span>
+  </SearchFieldButton>
+</SearchField>
+```
+
+<Canvas>
+  <SearchField
+    label="Mollit eiusmod"
+    description="Ea cupidatat eu sunt commodo"
+    hideLabel
+    size="s"
+  >
+    <SearchFieldInput />
+    <SearchFieldButton>
+      <Search /> <span>Søk</span>
+    </SearchFieldButton>
+  </SearchField>
+</Canvas>
+
+## Errors
+
+```jsx
+<SearchField
+  label="Mollit eiusmod"
+  description="Ea cupidatat eu sunt commodo"
+  hideLabel
+  error="Error message"
+>
+  <SearchFieldInput />
+  <SearchFieldButton>
+    <Search /> <span>Søk</span>
+  </SearchFieldButton>
+</SearchField>
+```
+
+<Canvas>
+  <SearchField
+    label="Mollit eiusmod"
+    description="Ea cupidatat eu sunt commodo"
+    hideLabel
+    error="Error message"
+  >
+    <SearchFieldInput />
+    <SearchFieldButton>
+      <Search /> <span>Søk</span>
+    </SearchFieldButton>
+  </SearchField>
+</Canvas>
+
+## Plassering av knapp
+
+```jsx
+<SearchField
+  label="Mollit eiusmod"
+  description="Ea cupidatat eu sunt commodo"
+  hideLabel
+>
+  <SearchFieldButton>
+    <Search /> <span>Søk</span>
+  </SearchFieldButton>
+  <SearchFieldInput />
+</SearchField>
+<SearchField
+  label="Mollit eiusmod"
+  description="Ea cupidatat eu sunt commodo"
+  hideLabel
+>
+  <SearchFieldInput />
+  <SearchFieldButton>
+    <Search /> <span>Søk</span>
+  </SearchFieldButton>
+</SearchField>
+```
+
+<Canvas>
+  <div>
+    <SearchField
+      label="Mollit eiusmod"
+      description="Ea cupidatat eu sunt commodo"
+      hideLabel
+    >
+      <SearchFieldButton>
+        <Search /> <span>Søk</span>
+      </SearchFieldButton>
+      <SearchFieldInput />
+    </SearchField>
+    <br />
+    <SearchField
+      label="Mollit eiusmod"
+      description="Ea cupidatat eu sunt commodo"
+      hideLabel
+    >
+      <SearchFieldInput />
+      <SearchFieldButton>
+        <Search /> <span>Søk</span>
+      </SearchFieldButton>
+    </SearchField>
+  </div>
+</Canvas>
+
+<h2>ClearButton</h2>
+
+Man kan bruke `SearchFieldClearButton` for å håndtere clearing av value i `<input />`. For å bruke denne
+kreves det da at `SearchFieldInput` er controlled slik at man styrer state selv slik som eksemplet under.
+
+```jsx
+<SearchField label="Mollit eiusmod" description="Ea cupidatat eu sunt commodo">
+  <SearchFieldInput value={value} onChange={(e) => setValue(e.target.value)} />
+  <SearchFieldClearButton onClick={() => setValue("")}>
+    <Close />
+    <span>Tøm</span>
+  </SearchFieldClearButton>
+  <SearchFieldButton>
+    <Search /> <span>Søk</span>
+  </SearchFieldButton>
+</SearchField>
+```
+
+<Canvas>
+  <Example />
+</Canvas>

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

@@ -0,0 +1,147 @@
+import React from "react";
+import { Meta } from "@storybook/react/types-6-0";
+import { Close, Search } from "@navikt/ds-icons";
+import {
+  SearchField,
+  SearchFieldInput,
+  SearchFieldButton,
+  SearchFieldClearButton,
+} from "../index";
+import { Fieldset } from "../..";
+export default {
+  title: "ds-react/form/search-field",
+  component: SearchField,
+} as Meta;
+
+export const All = () => {
+  return (
+    <>
+      <h1>SearchField</h1>
+      <SearchField
+        label="Mollit eiusmod"
+        description="Ea cupidatat eu sunt commodo"
+      >
+        <SearchFieldInput />
+        <SearchFieldButton>
+          <Search /> <span>Søk</span>
+        </SearchFieldButton>
+      </SearchField>
+      <SearchField
+        label="Mollit eiusmod"
+        description="Ea cupidatat eu sunt commodo"
+      >
+        <SearchFieldButton>
+          <Search /> <span>Søk</span>
+        </SearchFieldButton>
+        <SearchFieldInput />
+      </SearchField>
+
+      <h1>SearchField w clearsearch</h1>
+      <SearchField
+        label="Mollit eiusmod"
+        description="Ea cupidatat eu sunt commodo"
+      >
+        <SearchFieldInput clearSearch />
+        <SearchFieldButton>
+          <Search /> <span>Søk</span>
+        </SearchFieldButton>
+      </SearchField>
+      <SearchField
+        label="Mollit eiusmod"
+        description="Ea cupidatat eu sunt commodo"
+      >
+        <SearchFieldButton>
+          <Search /> <span>Søk</span>
+        </SearchFieldButton>
+        <SearchFieldClearButton>
+          <Close /> <span>Tøm</span>
+        </SearchFieldClearButton>
+        <SearchFieldInput />
+      </SearchField>
+
+      <h2>Hidelabel</h2>
+      <SearchField
+        label="Mollit eiusmod"
+        description="Ea cupidatat eu sunt commodo"
+        hideLabel
+      >
+        <SearchFieldButton>
+          <Search /> <span>Søk</span>
+        </SearchFieldButton>
+        <SearchFieldInput />
+      </SearchField>
+
+      <h2>SearchField small</h2>
+      <SearchField
+        label="Mollit eiusmod"
+        description="Ea cupidatat eu sunt commodo"
+        size="s"
+      >
+        <SearchFieldButton>
+          <Search />
+          <span className="sr-only">Søk</span>
+        </SearchFieldButton>
+        <SearchFieldInput />
+      </SearchField>
+
+      <SearchField
+        label="Mollit eiusmod"
+        description="Ea cupidatat eu sunt commodo"
+        size="s"
+      >
+        <SearchFieldInput />
+        <SearchFieldButton>
+          <Search />
+          <span className="sr-only">Søk</span>
+        </SearchFieldButton>
+      </SearchField>
+
+      <h2>SearchField w error</h2>
+      <SearchField
+        label="Mollit eiusmod"
+        description="Ea cupidatat eu sunt commodo"
+        error="Errormsg"
+      >
+        <SearchFieldInput />
+        <SearchFieldButton>
+          <Search /> <span>Søk</span>
+        </SearchFieldButton>
+      </SearchField>
+      <SearchField
+        label="Mollit eiusmod"
+        description="Ea cupidatat eu sunt commodo"
+        error="Errormsg"
+      >
+        <SearchFieldButton>
+          <Search /> <span>Søk</span>
+        </SearchFieldButton>
+        <SearchFieldInput />
+      </SearchField>
+
+      <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
+        >
+          <SearchFieldInput />
+          <SearchFieldButton>
+            <Search /> <span>Søk</span>
+          </SearchFieldButton>
+        </SearchField>
+        <SearchField
+          label="Mollit eiusmod"
+          description="Ea cupidatat eu sunt commodo"
+          hideLabel
+        >
+          <SearchFieldButton>
+            <Search /> <span>Søk</span>
+          </SearchFieldButton>
+          <SearchFieldInput />
+        </SearchField>
+      </Fieldset>
+    </>
+  );
+};

@navikt/ds-react/src/util/useId.ts

@@ -1,4 +1,4 @@
-import { useEffect, useLayoutEffect, useState } from "react";
+import { useLayoutEffect, useState } from "react";
 import ShortUuid from "short-uuid";
 
 const canUseDOM = (): boolean => {

README.md

@@ -21,10 +21,11 @@
 Dette repoet inneholder følgende:
 
 - [Alle felleskomponenter](https://github.com/navikt/nav-frontend-moduler/tree/master/packages/) i NAVs frontend-rammeverk forvaltet av designsystemet
-- [Felleskomponenter V2](https://github.com/navikt/nav-frontend-moduler/tree/master/@navikt/) oppdaterte og scopede pakker for en bedre brukeropplevelse
+- [Felleskomponenter V2 (WIP)](https://github.com/navikt/nav-frontend-moduler/tree/master/@navikt/) oppdaterte og scopede pakker for en bedre brukeropplevelse
 - [Kildekoden](https://github.com/navikt/nav-frontend-moduler/tree/master/website) til vår nettside; [design.nav.no](https://design.nav.no) som tilbyr dokumentasjon for komponentene og NAVs designsystem generelt
 - [Eksempler på forskjellige frontend-oppsett](https://github.com/navikt/nav-frontend-moduler/tree/master/examples) til applikasjoner som skal bruke komponentene
-
+- [Storybook](https://navikt.github.io/Designsystemet/?path=/story/ds-react-kom-i-gang--page) for v2 komponenter (wip) og eldre komponenter.
+    
 ## Bidra
 
 Gå til [CONTRIBUTING.md](https://github.com/navikt/nav-frontend-moduler/blob/master/CONTRIBUTING.md)

package.json

@@ -81,7 +81,6 @@
     "@storybook/addon-storysource": "^6.3.4",
     "@storybook/addons": "^6.3.4",
     "@storybook/theming": "^6.3.4",
-    "@whitespace/storybook-addon-html": "^5.0.0",
     "axios": "^0.21.0",
     "chalk": "^1.1.3",
     "color": "^3.1.3",
@@ -120,7 +119,6 @@
     "@storybook/addon-actions": "^6.3.4",
     "@storybook/addon-docs": "^6.3.4",
     "@storybook/addon-essentials": "^6.3.4",
-    "@storybook/addon-links": "^6.3.4",
     "@storybook/react": "^6.3.4",
     "@typescript-eslint/eslint-plugin": "^4.3.0",
     "@typescript-eslint/parser": "^4.3.0",

yarn.lock

@@ -122,7 +122,7 @@
     semver "^6.3.0"
     source-map "^0.5.0"
 
-"@babel/generator@^7.10.5", "@babel/generator@^7.12.11", "@babel/generator@^7.12.5", "@babel/generator@^7.13.9", "@babel/generator@^7.15.0":
+"@babel/generator@^7.10.5", "@babel/generator@^7.12.11", "@babel/generator@^7.12.5", "@babel/generator@^7.15.0":
   version "7.15.0"
   resolved "https://registry.yarnpkg.com/@babel/generator/-/generator-7.15.0.tgz#a7d0c172e0d814974bad5aa77ace543b97917f15"
   integrity sha512-eKl4XdMrbpYvuB505KTta4AV9g+wWzmVBW69tX0H2NwKVKd2YJbKgyK6M8j/rgLbmHOYJn6rUklV677nOyJrEQ==
@@ -357,7 +357,7 @@
     chalk "^2.0.0"
     js-tokens "^4.0.0"
 
-"@babel/parser@^7.1.0", "@babel/parser@^7.10.5", "@babel/parser@^7.12.11", "@babel/parser@^7.12.5", "@babel/parser@^7.12.7", "@babel/parser@^7.13.12", "@babel/parser@^7.14.5", "@babel/parser@^7.15.0", "@babel/parser@^7.7.0":
+"@babel/parser@^7.1.0", "@babel/parser@^7.10.5", "@babel/parser@^7.12.11", "@babel/parser@^7.12.5", "@babel/parser@^7.12.7", "@babel/parser@^7.14.5", "@babel/parser@^7.15.0", "@babel/parser@^7.7.0":
   version "7.15.2"
   resolved "https://registry.yarnpkg.com/@babel/parser/-/parser-7.15.2.tgz#08d4ffcf90d211bf77e7cc7154c6f02d468d2b1d"
   integrity sha512-bMJXql1Ss8lFnvr11TZDH4ArtwlAS5NG9qBmdiFW2UHHm6MVoR+GDc5XE2b9K938cyjc9O6/+vjjcffLDtfuDg==
@@ -3421,24 +3421,6 @@
     storybook-addon-outline "^1.4.1"
     ts-dedent "^2.0.0"
 
-"@storybook/addon-links@^6.3.4":
-  version "6.3.7"
-  resolved "https://registry.yarnpkg.com/@storybook/addon-links/-/addon-links-6.3.7.tgz#f273abba6d056794a4aa920b2fa9639136e6747f"
-  integrity sha512-/8Gq18o1DejP3Om0ZOJRkMzW5FoHqoAmR0pFx4DipmNu5lYy7V3krLw4jW4qja1MuQkZ53MGh08FJOoAc2RZvQ==
-  dependencies:
-    "@storybook/addons" "6.3.7"
-    "@storybook/client-logger" "6.3.7"
-    "@storybook/core-events" "6.3.7"
-    "@storybook/csf" "0.0.1"
-    "@storybook/router" "6.3.7"
-    "@types/qs" "^6.9.5"
-    core-js "^3.8.2"
-    global "^4.4.0"
-    prop-types "^15.7.2"
-    qs "^6.10.0"
-    regenerator-runtime "^0.13.7"
-    ts-dedent "^2.0.0"
-
 "@storybook/addon-measure@^2.0.0":
   version "2.0.0"
   resolved "https://registry.yarnpkg.com/@storybook/addon-measure/-/addon-measure-2.0.0.tgz#c40bbe91bacd3f795963dc1ee6ff86be87deeda9"
@@ -3509,7 +3491,7 @@
     global "^4.4.0"
     regenerator-runtime "^0.13.7"
 
-"@storybook/api@6.3.7", "@storybook/api@^6.1.21", "@storybook/api@^6.3.0":
+"@storybook/api@6.3.7", "@storybook/api@^6.3.0":
   version "6.3.7"
   resolved "https://registry.yarnpkg.com/@storybook/api/-/api-6.3.7.tgz#88b8a51422cd0739c91bde0b1d65fb6d8a8485d0"
   integrity sha512-57al8mxmE9agXZGo8syRQ8UhvGnDC9zkuwkBPXchESYYVkm3Mc54RTvdAOYDiy85VS4JxiGOywHayCaRwgUddQ==
@@ -3665,7 +3647,7 @@
     core-js "^3.8.2"
     global "^4.4.0"
 
-"@storybook/components@6.3.7", "@storybook/components@^6.1.21", "@storybook/components@^6.3.0":
+"@storybook/components@6.3.7", "@storybook/components@^6.3.0":
   version "6.3.7"
   resolved "https://registry.yarnpkg.com/@storybook/components/-/components-6.3.7.tgz#42b1ca6d24e388e02eab82aa9ed3365db2266ecc"
   integrity sha512-O7LIg9Z18G0AJqXX7Shcj0uHqwXlSA5UkHgaz9A7mqqqJNl6m6FwwTWcxR1acUfYVNkO+czgpqZHNrOF6rky1A==
@@ -5154,18 +5136,6 @@
   resolved "https://registry.yarnpkg.com/@webpack-cli/serve/-/serve-1.5.1.tgz#b5fde2f0f79c1e120307c415a4c1d5eb15a6f278"
   integrity sha512-4vSVUiOPJLmr45S8rMGy7WDvpWxfFxfP/Qx/cxZFCfvoypTYpPPL1X8VIZMe0WTA+Jr7blUxwUSEZNkjoMTgSw==
 
-"@whitespace/storybook-addon-html@^5.0.0":
-  version "5.0.0"
-  resolved "https://registry.yarnpkg.com/@whitespace/storybook-addon-html/-/storybook-addon-html-5.0.0.tgz#4fd009c1625c909218f2a1a2e6e10524feb05fe6"
-  integrity sha512-1OkgqEGNcXFzeOCGtJsEcPPswVy+mDRgDOFClXWX/f2SG/JBfkltXoFnCj2EfGwhIQaVGxjT7k1gqANKy5VeJQ==
-  dependencies:
-    "@babel/generator" "^7.13.9"
-    "@babel/parser" "^7.13.12"
-    "@storybook/api" "^6.1.21"
-    "@storybook/components" "^6.1.21"
-    prettier "^2.2.1"
-    react-syntax-highlighter "^15.4.3"
-
 "@xtuc/ieee754@^1.2.0":
   version "1.2.0"
   resolved "https://registry.yarnpkg.com/@xtuc/ieee754/-/ieee754-1.2.0.tgz#eef014a3145ae477a1cbc00cd1e552336dceb790"
@@ -17260,7 +17230,7 @@ lowercase-keys@^2.0.0:
   resolved "https://registry.yarnpkg.com/lowercase-keys/-/lowercase-keys-2.0.0.tgz#2603e78b7b4b0006cbca2fbcc8a3202558ac9479"
   integrity sha512-tqNXrS78oMOE73NMxK4EMLQsQowWf8jKooH9g7xPavRT706R6bkQJ6DY2Te7QukaZsulxa30wQ7bk0pm4XiHmA==
 
-lowlight@^1.14.0, lowlight@^1.17.0:
+lowlight@^1.14.0:
   version "1.20.0"
   resolved "https://registry.yarnpkg.com/lowlight/-/lowlight-1.20.0.tgz#ddb197d33462ad0d93bf19d17b6c301aa3941888"
   integrity sha512-8Ktj+prEb1RoCPkEOrPMYUN/nCggB7qAWe3a7OpMjWQkh3l2RD5wKRQ+o8Q8YuI9RG/xs95waaI/E6ym/7NsTw==
@@ -20888,7 +20858,7 @@ prettier@2.2.1, prettier@~2.2.1:
   resolved "https://registry.yarnpkg.com/prettier/-/prettier-2.2.1.tgz#795a1a78dd52f073da0cd42b21f9c91381923ff5"
   integrity sha512-PqyhM2yCjg/oKkFPtTGUojv7gnZAoG80ttl45O6x2Ug/rMJw4wcc9k6aaf2hibP7BGVCCM33gZoGjyvt9mm16Q==
 
-prettier@^2.0.5, prettier@^2.1.2, prettier@^2.2.1:
+prettier@^2.0.5, prettier@^2.1.2:
   version "2.3.2"
   resolved "https://registry.yarnpkg.com/prettier/-/prettier-2.3.2.tgz#ef280a05ec253712e486233db5c6f23441e7342d"
   integrity sha512-lnJzDfJ66zkMy58OL5/NY5zp70S7Nz6KqcKkXYzn2tMVrNxvbqaBpg7H3qHaLxCJ5lNMsGuM8+ohS7cZrthdLQ==
@@ -20955,7 +20925,7 @@ prismjs@1.23.0:
   optionalDependencies:
     clipboard "^2.0.0"
 
-prismjs@^1.21.0, prismjs@^1.22.0, prismjs@^1.23.0, prismjs@~1.24.0:
+prismjs@^1.21.0, prismjs@^1.23.0, prismjs@~1.24.0:
   version "1.24.1"
   resolved "https://registry.yarnpkg.com/prismjs/-/prismjs-1.24.1.tgz#c4d7895c4d6500289482fa8936d9cdd192684036"
   integrity sha512-mNPsedLuk90RVJioIky8ANZEwYm5w9LcvCXrxHlwf4fNVSn8jEipMybMkWUyyF0JhnC+C4VcOVSBuHRKs1L5Ow==
@@ -21685,17 +21655,6 @@ react-syntax-highlighter@^13.5.3:
     prismjs "^1.21.0"
     refractor "^3.1.0"
 
-react-syntax-highlighter@^15.4.3:
-  version "15.4.4"
-  resolved "https://registry.yarnpkg.com/react-syntax-highlighter/-/react-syntax-highlighter-15.4.4.tgz#dc9043f19e7bd063ff3ea78986d22a6eaa943b2a"
-  integrity sha512-PsOFHNTzkb3OroXdoR897eKN5EZ6grht1iM+f1lJSq7/L0YVnkJaNVwC3wEUYPOAmeyl5xyer1DjL6MrumO6Zw==
-  dependencies:
-    "@babel/runtime" "^7.3.1"
-    highlight.js "^10.4.1"
-    lowlight "^1.17.0"
-    prismjs "^1.22.0"
-    refractor "^3.2.0"
-
 react-textarea-autosize@^8.3.0:
   version "8.3.3"
   resolved "https://registry.yarnpkg.com/react-textarea-autosize/-/react-textarea-autosize-8.3.3.tgz#f70913945369da453fd554c168f6baacd1fa04d8"
@@ -22012,7 +21971,7 @@ redux@^4.0.5:
   dependencies:
     "@babel/runtime" "^7.9.2"
 
-refractor@^3.1.0, refractor@^3.2.0:
+refractor@^3.1.0:
   version "3.4.0"
   resolved "https://registry.yarnpkg.com/refractor/-/refractor-3.4.0.tgz#62bd274b06c942041f390c371b676eb67cb0a678"
   integrity sha512-dBeD02lC5eytm9Gld2Mx0cMcnR+zhSnsTfPpWqFaMgUMJfC9A6bcN3Br/NaXrnBJcuxnLFR90k1jrkaSyV8umg==