Lerna versionbump [ci skip]

- @navikt/ds-react@0.11.1 - @navikt/ds-react-internal@0.6.1
[fix] remove aria-live from popover (#1299 )
2026-10-15 02:02:02 +00:00 · 2021-10-20 12:40:42 +00:00 · 2021-10-20 14:22:20 +02:00 · 2021-10-19 13:17:42 +00:00 · 2021-10-19 15:01:32 +02:00 · 2021-10-19 12:41:18 +00:00
44 changed files with 330 additions and 376 deletions
@@ -2,7 +2,33 @@ import { Meta } from "@storybook/addon-docs";

 <Meta title="ds-react/Migration" />

-# Migrering til ds-react, ds-css v0.8.0
+# Migreringsguider
+
+## Migrering til ds-react v0.11, ds-css v0.10
+
+### ErrorSummary
+
+- ErrorSummaryItem -> ErrorSummary.Item
+  Må da slette import "ErrorSummaryItem" da denne ikke er eksponert alene lengre
+
+### SearchField
+
+- SearchFieldButton -> SearchField.Button
+- SearchFieldClearButton -> SearchField.Clear
+- SearchFieldInput -> SearchField.Input
+
+SearchFieldButton, SearchFieldClearButton og SearchFieldInput må da slettes fra imports da de ikke er eksponert lengre.
+
+### CopyToClipBoard
+
+Komponenten er flyttet til pakkene "@navikt/ds-react-internal" og "@navikt/ds-css-internal". API er ikke endret
+så fikses med
+
+```bash
+yarn install @navikt/ds-react-internal @navikt/ds-css-internal
+```
+
+## Migrering til ds-react, ds-css v0.8.0

 Denne guiden vil være til hjelp for de som allerede har begynt å ta i bruk de nye pakkene våre tidligere enn v0.8.0.
 For de som ikke har begynt å ta i bruk pakkene kan man se bort fra denne.
@@ -7,7 +7,6 @@
@import "alert.css";
@import "button.css";
@import "content-container.css";
-@import "copy-to-clipboard.css";
@import "guide-panel.css";
@import "form/index.css";
@import "help-text.css";
@@ -1,6 +1,6 @@
 {
  "name": "@navikt/ds-css",
-  "version": "0.9.3",
+  "version": "0.10.0",
  "private": false,
  "description": "Css for NAV Designsystem components",
  "author": "NAV Designsystem team",
@@ -1,6 +1,6 @@
 {
  "name": "@navikt/ds-icons",
-  "version": "0.5.5",
+  "version": "0.5.6",
  "private": false,
  "description": "NAVs egne ikoner i SVG og React format",
  "repository": {
@@ -31,7 +31,7 @@
    "convert-icons": "node figma-api/pngConverter.mjs",
    "clean": "rimraf src png NAV-ikonpakke-png.zip NAV-ikonpakke-svg.zip",
    "zip-icons": "node figma-api/zipIcons.mjs",
-    "build": "yarn clean && yarn create-icons && tsc && tsc -p tsconfig-esm.json && yarn create-package-json-pointers-to-esm && yarn run convert-icons && yarn zip-icons"
+    "build": "yarn clean && yarn create-icons && tsc && tsc -p tsconfig.esm.json && yarn create-package-json-pointers-to-esm && yarn run convert-icons && yarn zip-icons"
  },
  "peerDependencies": {
    "react": "^16.8.0 || ^17.0.0"
@@ -1,13 +0,0 @@
-{
-  "extends": "../../../utilities/build/tsconfig-pakker.json",
-  "compilerOptions": {
-    "rootDir": "./src",
-    "esModuleInterop": true,
-    "module": "ES2020",
-    "target": "ES2015",
-    "outDir": "./esm",
-    "sourceMap": true,
-    "declaration": true
-  },
-  "include": ["./src"]
-}
@@ -0,0 +1,9 @@
+{
+  "extends": "./tsconfig.json",
+  "compilerOptions": {
+    "outDir": "./esm",
+    "module": "esnext",
+    "sourceMap": true,
+    "declaration": true
+  }
+}
@@ -1,13 +1,7 @@
 {
-  "extends": "../../../utilities/build/tsconfig-pakker.json",
+  "extends": "../../../tsconfig.json",
  "compilerOptions": {
-    "module": "commonjs",
    "outDir": "./cjs",
-    "target": "es2015",
-    "rootDir": "./src",
-    "esModuleInterop": true,
-    "sourceMap": false,
-    "declaration": false
-  },
-  "include": ["./src"]
+    "module": "commonjs"
+  }
 }
@@ -1,6 +1,6 @@
 {
  "name": "@navikt/ds-react",
-  "version": "0.10.5",
+  "version": "0.11.1",
  "private": false,
  "description": "NAV designsystem react components",
  "author": "NAV Designsystem team",
@@ -29,16 +29,15 @@
  "scripts": {
    "create-package-json-pointers-to-esm": "node ../../../utilities/scripts/createPackageJsonsWithESMPointers.js",
    "clean": "rimraf cjs esm",
-    "build": "yarn run clean && tsc && tsc -p tsconfig-esm.json && yarn create-package-json-pointers-to-esm",
-    "watch": "tsc --watch -p tsconfig-esm.json",
+    "build": "yarn run clean && tsc && tsc -p tsconfig.esm.json && yarn create-package-json-pointers-to-esm",
+    "watch": "tsc --watch -p tsconfig.esm.json",
    "test": "jest"
  },
  "dependencies": {
    "@material-ui/core": "^4.12.3",
-    "@navikt/ds-icons": "^0.5.5",
+    "@navikt/ds-icons": "^0.5.6",
    "@popperjs/core": "^2.10.1",
    "classnames": "^2.2.6",
-    "copy-to-clipboard": "^3.3.1",
    "react-collapse": "^5.1.0",
    "react-merge-refs": "^1.1.0",
    "react-modal": "3.14.3",
@@ -1,4 +1,4 @@
-import React, { createContext, forwardRef } from "react";
+import React, { forwardRef } from "react";
 import cl from "classnames";
 import {
  ErrorFilled,
@@ -6,8 +6,6 @@ import {
  InformationFilled,
  SuccessFilled,
 } from "@navikt/ds-icons";
-import AlertContent, { AlertContentType } from "./AlertContent";
-import AlertTitle, { AlertTitleType } from "./AlertTitle";
 import { BodyLong } from "..";

 export interface AlertProps extends React.HTMLAttributes<HTMLDivElement> {
@@ -54,15 +52,6 @@ export interface AlertContextProps {
  size: "medium" | "small";
 }

-export const AlertContext = createContext<AlertContextProps | null>(null);
-interface AlertComponent
-  extends React.ForwardRefExoticComponent<
-    AlertProps & React.RefAttributes<HTMLDivElement>
-  > {
-  Title: AlertTitleType;
-  Content: AlertContentType;
-}
-
 const Alert = forwardRef<HTMLDivElement, AlertProps>(
  (
    {
@@ -100,9 +89,6 @@ const Alert = forwardRef<HTMLDivElement, AlertProps>(
      </BodyLong>
    </div>
  )
-) as AlertComponent;
-
-Alert.Title = AlertTitle;
-Alert.Content = AlertContent;
+);

 export default Alert;
@@ -1,41 +0,0 @@
-import React, { forwardRef, useContext } from "react";
-import cl from "classnames";
-import { BodyLong } from "..";
-import { AlertContext } from ".";
-
-export interface AlertContentProps
-  extends React.HTMLAttributes<HTMLDivElement> {
-  /**
-   * Alert content
-   */
-  children: React.ReactNode;
-}
-
-export type AlertContentType = React.ForwardRefExoticComponent<
-  AlertContentProps & React.RefAttributes<HTMLDivElement>
->;
-
-const AlertContent: AlertContentType = forwardRef(
-  ({ children, className, ...rest }, ref) => {
-    const context = useContext(AlertContext);
-
-    if (context === null) {
-      console.warn("AlertContent has to be wrapped in <Alert />");
-      return null;
-    }
-
-    return (
-      <BodyLong
-        {...rest}
-        as="div"
-        className={cl(className, "navds-alert__content")}
-        ref={ref}
-        size={context.size ?? "medium"}
-      >
-        {children}
-      </BodyLong>
-    );
-  }
-);
-
-export default AlertContent;
@@ -1,41 +0,0 @@
-import React, { forwardRef, useContext } from "react";
-import cl from "classnames";
-import { AlertContext, Heading } from "..";
-
-export interface AlertTitleProps extends React.HTMLAttributes<HTMLDivElement> {
-  /**
-   * Alert content
-   */
-  children: React.ReactNode;
-}
-
-export type AlertTitleType = React.ForwardRefExoticComponent<
-  AlertTitleProps & React.RefAttributes<HTMLDivElement>
->;
-
-const AlertTitle: AlertTitleType = forwardRef(
-  ({ children, className, ...rest }, ref) => {
-    const context = useContext(AlertContext);
-
-    if (context === null) {
-      console.warn("AlertTitle has to be wrapped in <Alert />");
-      return null;
-    }
-
-    const size = context.size === "medium" ? "small" : "xsmall";
-
-    return (
-      <Heading
-        {...rest}
-        ref={ref}
-        className={cl(className, "navds-alert__title")}
-        as="div"
-        size={size}
-      >
-        {children}
-      </Heading>
-    );
-  }
-);
-
-export default AlertTitle;
@@ -1,6 +1,7 @@
 import React, { forwardRef, HTMLAttributes } from "react";
 import cl from "classnames";
 import { Heading, BodyShort } from "../..";
+import ErrorSummaryItem, { ErrorSummaryItemType } from "./ErrorSummaryItem";

 export interface ErrorSummaryProps extends HTMLAttributes<HTMLDivElement> {
  /**
@@ -23,6 +24,13 @@ export interface ErrorSummaryProps extends HTMLAttributes<HTMLDivElement> {
  headingTag?: React.ElementType<any>;
 }

+interface ErrorSummaryComponent
+  extends React.ForwardRefExoticComponent<
+    ErrorSummaryProps & React.RefAttributes<HTMLDivElement>
+  > {
+  Item: ErrorSummaryItemType;
+}
+
 const ErrorSummary = forwardRef<HTMLDivElement, ErrorSummaryProps>(
  (
    {
@@ -62,6 +70,8 @@ const ErrorSummary = forwardRef<HTMLDivElement, ErrorSummaryProps>(
      </div>
    );
  }
-);
+) as ErrorSummaryComponent;
+
+ErrorSummary.Item = ErrorSummaryItem;

 export default ErrorSummary;
@@ -10,11 +10,12 @@ export interface ErrorSummaryItemProps
  children: React.ReactNode;
 }

-export type ErrorType = OverridableComponent<
+export type ErrorSummaryItemType = OverridableComponent<
  ErrorSummaryItemProps,
  HTMLAnchorElement
 >;
-const ErrorSummaryItem: ErrorType = forwardRef(
+
+const ErrorSummaryItem: ErrorSummaryItemType = forwardRef(
  ({ children, as: Component = "a", className, ...rest }, ref) => {
    return (
      <Component
@@ -1,5 +1,2 @@
-export { default as ErrorSummary, ErrorSummaryProps } from "./ErrorSummary";
-export {
-  default as ErrorSummaryItem,
-  ErrorSummaryItemProps,
-} from "./ErrorSummaryItem";
+export { default as ErrorSummary } from "./ErrorSummary";
+export * from "./ErrorSummary";
@@ -1,27 +1,27 @@
 import { Meta, Canvas } from "@storybook/addon-docs";
-import { ErrorSummary, ErrorSummaryItem } from "../index";
+import { ErrorSummary } from "../index";

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

 # Hvordan ta i bruk ErrorSummary

-`href` på `ErrorSummaryItem` linker til id som er satt på skjema-elementer.
+`href` på `ErrorSummary.Item` linker til id som er satt på skjema-elementer.

 ```jsx
 <ErrorSummary heading="Eiusmod est cillum mollit pariatur deserunt">
-  <ErrorSummaryItem href="#1">Checkbox må fylles ut</ErrorSummaryItem>
-  <ErrorSummaryItem href="#2">
+  <ErrorSummary.Item href="#1">Checkbox må fylles ut</ErrorSummary.Item>
+  <ErrorSummary.Item href="#2">
    Tekstfeltet må ha en godkjent e-mail
-  </ErrorSummaryItem>
-</ErrorSummaryItem>
+  </ErrorSummary.Item>
+</ErrorSummary>
 ```

 <Canvas>
  <ErrorSummary heading="Eiusmod est cillum mollit pariatur deserunt">
-    <ErrorSummaryItem href="#1">Checkbox må fylles ut</ErrorSummaryItem>
-    <ErrorSummaryItem href="#2">
+    <ErrorSummary.Item href="#1">Checkbox må fylles ut</ErrorSummary.Item>
+    <ErrorSummary.Item href="#2">
      Tekstfeltet må ha en godkjent e-mail
-    </ErrorSummaryItem>
+    </ErrorSummary.Item>
  </ErrorSummary>
 </Canvas>

@@ -34,11 +34,11 @@ import { ErrorSummary, ErrorSummaryItem } from "../index";
  heading="Eiusmod est cillum mollit pariatur deserunt"
  headingTag="h3"
 >
-  <ErrorSummaryItem href="#1">Checkbox må fylles ut</ErrorSummaryItem>
-  <ErrorSummaryItem href="#2">
+  <ErrorSummary.Item href="#1">Checkbox må fylles ut</ErrorSummary.Item>
+  <ErrorSummary.Item href="#2">
    Tekstfeltet må ha en godkjent e-mail
-  </ErrorSummaryItem>
-</ErrorSummaryItem>
+  </ErrorSummary.Item>
+</ErrorSummary>
 ```

 <Canvas>
@@ -46,9 +46,9 @@ import { ErrorSummary, ErrorSummaryItem } from "../index";
    heading="Eiusmod est cillum mollit pariatur deserunt"
    headingTag="h3"
  >
-    <ErrorSummaryItem href="#1">Checkbox må fylles ut</ErrorSummaryItem>
-    <ErrorSummaryItem href="#2">
+    <ErrorSummary.Item href="#1">Checkbox må fylles ut</ErrorSummary.Item>
+    <ErrorSummary.Item href="#2">
      Tekstfeltet må ha en godkjent e-mail
-    </ErrorSummaryItem>
+    </ErrorSummary.Item>
  </ErrorSummary>
 </Canvas>
@@ -1,6 +1,6 @@
 import React from "react";
 import { Meta } from "@storybook/react/types-6-0";
-import { ErrorSummary, ErrorSummaryItem } from "..";
+import { ErrorSummary } from "..";
 export default {
  title: "ds-react/form/errorsummary",
  component: ErrorSummary,
@@ -11,17 +11,17 @@ export const All = () => {
    <>
      <h1>Error summary</h1>
      <ErrorSummary heading="Feiloppsummering komponent" headingTag="h4">
-        <ErrorSummaryItem href="#1">Checkbox må fylles ut</ErrorSummaryItem>
-        <ErrorSummaryItem href="#2">
+        <ErrorSummary.Item href="#1">Checkbox må fylles ut</ErrorSummary.Item>
+        <ErrorSummary.Item href="#2">
          Tekstfeltet må ha en godkjent e-mail
-        </ErrorSummaryItem>
+        </ErrorSummary.Item>
      </ErrorSummary>
      <h2>size small</h2>
      <ErrorSummary size="small" heading="Feiloppsummering komponent">
-        <ErrorSummaryItem href="#1">Checkbox må fylles ut</ErrorSummaryItem>
-        <ErrorSummaryItem href="#2">
+        <ErrorSummary.Item href="#1">Checkbox må fylles ut</ErrorSummary.Item>
+        <ErrorSummary.Item href="#2">
          Tekstfeltet må ha en godkjent e-mail
-        </ErrorSummaryItem>
+        </ErrorSummary.Item>
      </ErrorSummary>
    </>
  );
@@ -10,21 +10,9 @@ export {
  FieldsetProps,
 } from "./Fieldset";
 export { Radio, RadioGroup, RadioGroupProps, RadioProps } from "./radio";
-export {
-  SearchField,
-  SearchFieldProps,
-  SearchFieldInput,
-  SearchFieldInputProps,
-  SearchFieldClearButton,
-  SearchFieldClearButtonProps,
-} from "./search-field";
+export { SearchField, SearchFieldProps } from "./search-field";
 export { default as Select, SelectProps } from "./Select";
-export {
-  ErrorSummary,
-  ErrorSummaryProps,
-  ErrorSummaryItem,
-  ErrorSummaryItemProps,
-} from "./error-summary";
+export { ErrorSummary, ErrorSummaryProps } from "./error-summary";
 export { Counter, default as Textarea, TextareaProps } from "./Textarea";
 export { default as TextField, TextFieldProps } from "./TextField";
 export {
@@ -3,6 +3,11 @@ 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: {
@@ -35,6 +40,15 @@ export interface SearchFieldProps
  label: React.ReactNode;
 }

+interface SearchFieldComponent
+  extends React.ForwardRefExoticComponent<
+    SearchFieldProps & React.RefAttributes<HTMLDivElement>
+  > {
+  Button: SearchFieldButtonType;
+  Clear: SearchFieldClearButtonType;
+  Input: SearchFieldInputType;
+}
+
 const SearchField = forwardRef<HTMLDivElement, SearchFieldProps>(
  (props, ref) => {
    const {
@@ -105,6 +119,10 @@ const SearchField = forwardRef<HTMLDivElement, SearchFieldProps>(
      </div>
    );
  }
-);
+) as SearchFieldComponent;
+
+SearchField.Button = SearchFieldButton;
+SearchField.Clear = SearchFieldClearButton;
+SearchField.Input = SearchFieldInput;

 export default SearchField;
@@ -16,7 +16,11 @@ export interface SearchFieldButtonProps extends Omit<ButtonProps, "size"> {
  variant?: "primary" | "secondary";
 }

-const SearchFieldButton = forwardRef<HTMLButtonElement, SearchFieldButtonProps>(
+export type SearchFieldButtonType = React.ForwardRefExoticComponent<
+  SearchFieldButtonProps & React.RefAttributes<HTMLButtonElement>
+>;
+
+const SearchFieldButton: SearchFieldButtonType = forwardRef(
  ({ className, variant = "primary", disabled, ...rest }, ref) => {
    const searchField = useContext(SearchFieldContext);

@@ -16,29 +16,34 @@ export interface SearchFieldClearButtonProps extends Omit<ButtonProps, "size"> {
  variant?: "primary" | "secondary";
 }

-const SearchFieldClearButton = forwardRef<
-  HTMLButtonElement,
-  SearchFieldClearButtonProps
->(({ className, variant = "secondary", disabled, ...rest }, ref) => {
-  const searchField = useContext(SearchFieldContext);
+export type SearchFieldClearButtonType = React.ForwardRefExoticComponent<
+  SearchFieldClearButtonProps & React.RefAttributes<HTMLButtonElement>
+>;

-  if (searchField === null) {
-    console.warn("SearchFieldClearButton has to be wrapped in <SearchField />");
-    return null;
+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}
+      />
+    );
  }
-
-  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;
@@ -5,7 +5,11 @@ import { SearchFieldContext } from "./SearchField";
 export interface SearchFieldInputProps
  extends InputHTMLAttributes<HTMLInputElement> {}

-const SearchFieldInput = forwardRef<HTMLInputElement, SearchFieldInputProps>(
+export type SearchFieldInputType = React.ForwardRefExoticComponent<
+  SearchFieldInputProps & React.RefAttributes<HTMLInputElement>
+>;
+
+const SearchFieldInput: SearchFieldInputType = forwardRef(
  ({ className, ...rest }, ref) => {
    const searchField = useContext(SearchFieldContext);

@@ -1,13 +1,2 @@
 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";
+export * from "./SearchField";
@@ -1,30 +1,25 @@
 import React, { useState } from "react";
 import { Close, Search } from "@navikt/ds-icons";
-import {
-  SearchField,
-  SearchFieldInput,
-  SearchFieldButton,
-  SearchFieldClearButton,
-} from "../index";
+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">
-      <SearchFieldInput
+      <SearchField.Input
        value={value}
        onChange={(e) => setValue(e.target.value)}
      />
      {!!value && (
-        <SearchFieldClearButton onClick={() => setValue("")}>
+        <SearchField.Clear onClick={() => setValue("")}>
          <Close />
          Tøm
-        </SearchFieldClearButton>
+        </SearchField.Clear>
      )}
-      <SearchFieldButton>
+      <SearchField.Button>
        <Search /> Søk
-      </SearchFieldButton>
+      </SearchField.Button>
    </SearchField>
  );
 };
@@ -1,10 +1,5 @@
 import { Meta, Canvas } from "@storybook/addon-docs";
-import {
-  SearchField,
-  SearchFieldInput,
-  SearchFieldButton,
-  SearchFieldClearButton,
-} from "../index";
+import { SearchField } from "../index";

 import { Example } from "./search-field-example.tsx";

@@ -22,10 +17,10 @@ Komponenten er ikke testet eller gått gjennom et design-review, så anbefalses

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

@@ -34,10 +29,10 @@ Komponenten er ikke testet eller gått gjennom et design-review, så anbefalses
    label="Mollit eiusmod"
    description="Ea cupidatat eu sunt commodo"
  >
-    <SearchFieldInput />
-    <SearchFieldButton>
+    <SearchField.Input />
+    <SearchField.Button>
      <Search /> Søk
-    </SearchFieldButton>
+    </SearchField.Button>
  </SearchField>
 </Canvas>

@@ -52,10 +47,10 @@ Vi har satt `label` som required siden man vil bruke den i sammenheng med denne
  description="Ea cupidatat eu sunt commodo"
  hideLabel
 >
-  <SearchFieldInput />
-  <SearchFieldButton>
+  <SearchField.Input />
+  <SearchField.Button>
    <Search /> Søk
-  </SearchFieldButton>
+  </SearchField.Button>
 </SearchField>
 ```

@@ -65,10 +60,10 @@ Vi har satt `label` som required siden man vil bruke den i sammenheng med denne
    description="Ea cupidatat eu sunt commodo"
    hideLabel
  >
-    <SearchFieldInput />
-    <SearchFieldButton>
+    <SearchField.Input />
+    <SearchField.Button>
      <Search /> Søk
-    </SearchFieldButton>
+    </SearchField.Button>
  </SearchField>
 </Canvas>

@@ -81,10 +76,10 @@ Vi har satt `label` som required siden man vil bruke den i sammenheng med denne
  hideLabel
  size="small"
 >
-  <SearchFieldInput />
-  <SearchFieldButton>
+  <SearchField.Input />
+  <SearchField.Button>
    <Search /> Søk
-  </SearchFieldButton>
+  </SearchField.Button>
 </SearchField>
 ```

@@ -95,10 +90,10 @@ Vi har satt `label` som required siden man vil bruke den i sammenheng med denne
    hideLabel
    size="small"
  >
-    <SearchFieldInput />
-    <SearchFieldButton>
+    <SearchField.Input />
+    <SearchField.Button>
      <Search /> Søk
-    </SearchFieldButton>
+    </SearchField.Button>
  </SearchField>
 </Canvas>

@@ -111,10 +106,10 @@ Vi har satt `label` som required siden man vil bruke den i sammenheng med denne
  hideLabel
  error="Error message"
 >
-  <SearchFieldInput />
-  <SearchFieldButton>
+  <SearchField.Input />
+  <SearchField.Button>
    <Search /> Søk
-  </SearchFieldButton>
+  </SearchField.Button>
 </SearchField>
 ```

@@ -125,31 +120,31 @@ Vi har satt `label` som required siden man vil bruke den i sammenheng med denne
    hideLabel
    error="Error message"
  >
-    <SearchFieldInput />
-    <SearchFieldButton>
+    <SearchField.Input />
+    <SearchField.Button>
      <Search /> Søk
-    </SearchFieldButton>
+    </SearchField.Button>
  </SearchField>
 </Canvas>

 ## ClearButton

-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.
+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">
-  <SearchFieldInput value={value} onChange={(e) => setValue(e.target.value)} />
+  <SearchField.Input value={value} onChange={(e) => setValue(e.target.value)} />
  {!!value && (
-    <SearchFieldClearButton onClick={() => setValue("")}>
+    <SearchField.Clear onClick={() => setValue("")}>
      <Close /> Tøm
-    </SearchFieldClearButton>
+    </SearchField.Clear>
  )}
-  <SearchFieldButton>
+  <SearchField.Button>
    <Search /> Søk
-  </SearchFieldButton>
+  </SearchField.Button>
 </SearchField>
 ```

@@ -1,12 +1,7 @@
 import React, { useState } 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 { SearchField } from "../index";
 import { Fieldset } from "../..";
 export default {
  title: "ds-react/form/search-field",
@@ -22,19 +17,19 @@ export const All = () => {
        label="Mollit eiusmod"
        description="Ea cupidatat eu sunt commodo"
      >
-        <SearchFieldInput />
-        <SearchFieldButton>
+        <SearchField.Input />
+        <SearchField.Button>
          <Search /> Søk
-        </SearchFieldButton>
+        </SearchField.Button>
      </SearchField>
      <SearchField
        label="Mollit eiusmod"
        description="Ea cupidatat eu sunt commodo"
      >
-        <SearchFieldButton>
+        <SearchField.Button>
          <Search /> Søk
-        </SearchFieldButton>
-        <SearchFieldInput />
+        </SearchField.Button>
+        <SearchField.Input />
      </SearchField>

      <h1>SearchField w clearsearch</h1>
@@ -42,25 +37,25 @@ export const All = () => {
        label="Mollit eiusmod"
        description="Ea cupidatat eu sunt commodo"
      >
-        <SearchFieldInput />
-        <SearchFieldClearButton>
+        <SearchField.Input />
+        <SearchField.Clear>
          <Close />
-        </SearchFieldClearButton>
-        <SearchFieldButton onClick={() => setShow(!show)}>
+        </SearchField.Clear>
+        <SearchField.Button onClick={() => setShow(!show)}>
          <Search /> Søk
-        </SearchFieldButton>
+        </SearchField.Button>
      </SearchField>
      <SearchField
        label="Mollit eiusmod"
        description="Ea cupidatat eu sunt commodo"
      >
-        <SearchFieldButton>
+        <SearchField.Button>
          <Search /> Søk
-        </SearchFieldButton>
-        <SearchFieldClearButton>
+        </SearchField.Button>
+        <SearchField.Clear>
          <Close /> Tøm
-        </SearchFieldClearButton>
-        <SearchFieldInput />
+        </SearchField.Clear>
+        <SearchField.Input />
      </SearchField>

      <h2>Hidelabel</h2>
@@ -69,10 +64,10 @@ export const All = () => {
        description="Ea cupidatat eu sunt commodo"
        hideLabel
      >
-        <SearchFieldButton>
+        <SearchField.Button>
          <Search /> Søk
-        </SearchFieldButton>
-        <SearchFieldInput />
+        </SearchField.Button>
+        <SearchField.Input />
      </SearchField>

      <h2>SearchField small</h2>
@@ -81,11 +76,11 @@ export const All = () => {
        description="Ea cupidatat eu sunt commodo"
        size="small"
      >
-        <SearchFieldButton>
+        <SearchField.Button>
          <Search />
          <span className="sr-only">Søk</span>
-        </SearchFieldButton>
-        <SearchFieldInput />
+        </SearchField.Button>
+        <SearchField.Input />
      </SearchField>

      <SearchField
@@ -93,25 +88,25 @@ export const All = () => {
        description="Ea cupidatat eu sunt commodo"
        size="small"
      >
-        <SearchFieldInput />
-        <SearchFieldButton>
+        <SearchField.Input />
+        <SearchField.Button>
          <Search />
          <span className="sr-only">Søk</span>
-        </SearchFieldButton>
+        </SearchField.Button>
      </SearchField>
      <SearchField
        label="Mollit eiusmod"
        description="Ea cupidatat eu sunt commodo"
        size="small"
      >
-        <SearchFieldButton>
+        <SearchField.Button>
          <Search />
          <span className="sr-only">Søk</span>
-        </SearchFieldButton>
-        <SearchFieldClearButton>
+        </SearchField.Button>
+        <SearchField.Clear>
          <Close /> Tøm
-        </SearchFieldClearButton>
-        <SearchFieldInput />
+        </SearchField.Clear>
+        <SearchField.Input />
      </SearchField>

      <SearchField
@@ -119,14 +114,14 @@ export const All = () => {
        description="Ea cupidatat eu sunt commodo"
        size="small"
      >
-        <SearchFieldInput />
-        <SearchFieldClearButton>
+        <SearchField.Input />
+        <SearchField.Clear>
          <Close /> Tøm
-        </SearchFieldClearButton>
-        <SearchFieldButton>
+        </SearchField.Clear>
+        <SearchField.Button>
          <Search />
          <span className="sr-only">Søk</span>
-        </SearchFieldButton>
+        </SearchField.Button>
      </SearchField>

      <h2>SearchField w error</h2>
@@ -135,20 +130,20 @@ export const All = () => {
        description="Ea cupidatat eu sunt commodo"
        error="Errormsg"
      >
-        <SearchFieldInput />
-        <SearchFieldButton>
+        <SearchField.Input />
+        <SearchField.Button>
          <Search /> Søk
-        </SearchFieldButton>
+        </SearchField.Button>
      </SearchField>
      <SearchField
        label="Mollit eiusmod"
        description="Ea cupidatat eu sunt commodo"
        error="Errormsg"
      >
-        <SearchFieldButton>
+        <SearchField.Button>
          <Search /> Søk
-        </SearchFieldButton>
-        <SearchFieldInput />
+        </SearchField.Button>
+        <SearchField.Input />
      </SearchField>

      <h2>SearchField in Fieldset</h2>
@@ -159,20 +154,20 @@ export const All = () => {
          error="Errormsg"
          hideLabel
        >
-          <SearchFieldInput />
-          <SearchFieldButton>
+          <SearchField.Input />
+          <SearchField.Button>
            <Search /> Søk
-          </SearchFieldButton>
+          </SearchField.Button>
        </SearchField>
        <SearchField
          label="Mollit eiusmod"
          description="Ea cupidatat eu sunt commodo"
          hideLabel
        >
-          <SearchFieldButton>
+          <SearchField.Button>
            <Search /> Søk
-          </SearchFieldButton>
-          <SearchFieldInput />
+          </SearchField.Button>
+          <SearchField.Input />
        </SearchField>
      </Fieldset>
    </>
@@ -2,7 +2,6 @@ export * from "./accordion";
 export * from "./accordion-menu";
 export * from "./alert";
 export * from "./button";
-export * from "./copy-to-clipboard";
 export * from "./form";
 export * from "./grid";
 export * from "./help-text";
@@ -150,7 +150,6 @@ const Popover = forwardRef<HTMLDivElement, PopoverProps>(
        className={cl("navds-popover", className, {
          "navds-popover--hidden": !open || !anchorEl,
        })}
-        aria-live="polite"
        aria-hidden={!open || !anchorEl}
        tabIndex={-1}
        {...attributes.popper}
@@ -1,4 +1,5 @@
 import { Meta } from "@storybook/addon-docs";
+import { Alert, Heading, BodyLong } from "@navikt/ds-react";

 <Meta title="ds-react/Typography/intro" />

@@ -37,3 +38,46 @@ Vi anbefaler å før eller siden endre tilbake til default root font size da des
 komponenter og design-tokens er basert på dette. Endringen til 18px root font size var i grunn for å teste en løsning for å
 forstørre font, noe som er fikset ved nye typo-løsningen. Vi vil derfor unngå å måtte ha midlertidge patcher/fikser
 for å tilpasse systemet for alle de forskjellige variantene av font size på root.
+
+## Migrasjonsguide fra `nav-frontend-typografi` til `@navikt/ds-react`
+
+De nye typografi-komponentene er ikke helt en-til-en med de gamle, så det kan hende du må trekke på en designer om du er usikker på hvilken komponent du skal velge. Eller du kan spørre en av oss i designsystemet.
+
+### Overskrifter
+
+Overskrifters tekststørrelse er nå uavhengig heading-nivå. Det betyr at du står fritt til å sørge for at overskrift-hierarkiet stemmer for din side, uavhengig av visuelt hierarki. Før kunne det være trøblete om men f.eks. ønsket seg en h1, men `<Sidetittel>` opplevdes som for stor.
+
+En direkte en-til-en oversettelse av gamle komponenter til nye, hvor man bevarer størrelsene, ser sånn ut:
+
+`<Sidetittel> -> <Heading size="2xlarge">`
+
+`<Innholdstittel> -> <Heading size="xlarge">`
+
+`<Systemtittel> -> <Heading size="medium">`
+
+`<Undertittel> -> <Heading size="small">`
+
+<Alert variant="warning">
+  Pass på å sette riktig `level` i hver Heading-komponent for å ivareta
+  hierarkiet (h1-h6).
+</Alert>
+
+### Brødtekst
+
+De nye komponentene for brødtekst heter `<BodyLong>` og `<BodyShort>`. `<BodyLong>` er ment å brukes der det er snakk om løpende tekst, f.eks. i en artikkel. I komponent-tekst som med fordel kan være mer kompakt skal `<BodyShort>` brukes, for den har en lavere linjehøyde.
+
+Ny brødtekst-størrelse er 18px. Om du bygger grensesnitt med kompakt design (les; interne flater) der du ønsker å fortsette å bruke 16px brødtekst så finnes det en `<BodyLong size="small">` og `<BodyShort size="small">` som er til for deg.
+
+`<Normaltekst> ->` `<BodyLong>`/`<BodyShort>` (muligens med `size=small`)
+
+### Andre komponenter
+
+`<Ingress> -> <Ingress>`
+
+`<Element> -> <Label>`
+
+`<UndertekstBold> -> <Detail>`
+
+`<Undertekst> -> <Detail size="small">`
+
+`<Feilmelding>` Denne har vi valgt å ikke videreføre, for vi er usikre på om det er behov for en egen komponent. Skriv gjerne en melding på #designsystem eller send en PM til @andreas.nordahl eller @ken.aleksander.johansen om du savner den.
@@ -1,14 +0,0 @@
-{
-  "extends": "../../../utilities/build/tsconfig-pakker.json",
-  "compilerOptions": {
-    "outDir": "./esm",
-    "rootDir": "./src",
-    "esModuleInterop": true,
-    "module": "ES2020",
-    "target": "ES2015",
-    "sourceMap": true,
-    "declaration": true
-  },
-  "include": ["./src"],
-  "exclude": ["./src/**/stories", "**/*.test.ts", "**/*.test.tsx"]
-}
@@ -0,0 +1,9 @@
+{
+  "extends": "./tsconfig.json",
+  "compilerOptions": {
+    "outDir": "./esm",
+    "module": "esnext",
+    "sourceMap": true,
+    "declaration": true
+  }
+}
@@ -1,14 +1,9 @@
 {
-  "extends": "../../../utilities/build/tsconfig-pakker.json",
+  "extends": "../../../tsconfig.json",
  "compilerOptions": {
    "outDir": "./cjs",
-    "rootDir": "./src",
-    "esModuleInterop": true,
    "module": "commonjs",
-    "target": "es2015",
-    "sourceMap": false,
-    "declaration": false
+    "noImplicitAny": false
  },
-  "include": ["./src"],
-  "exclude": ["./src/**/stories", "**/*.test.ts", "**/*.test.tsx"]
+  "include": ["./src"]
 }
@@ -1,3 +1,3 @@
-.navds-copy-to-clipboard__popover {
+.navdsi-copy-to-clipboard__popover {
  padding: var(--navds-spacing-1);
 }
@@ -1,3 +1,4 @@
+@import "copy-to-clipboard.css";
@import "divider.css";
@import "dropdown.css";
@import "header.css";
@@ -1,6 +1,6 @@
 {
  "name": "@navikt/ds-css-internal",
-  "version": "0.5.0",
+  "version": "0.6.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.5.3",
+  "version": "0.6.1",
  "private": false,
  "description": "NAV internal designsystem react components",
  "author": "NAV Designsystem team",
@@ -29,13 +29,16 @@
  "scripts": {
    "create-package-json-pointers-to-esm": "node ../../../utilities/scripts/createPackageJsonsWithESMPointers.js",
    "clean": "rimraf cjs esm",
-    "build": "yarn run clean && tsc && tsc -p tsconfig-esm.json && yarn create-package-json-pointers-to-esm",
-    "watch": "tsc --watch -p tsconfig-esm.json"
+    "build": "yarn run clean && tsc && tsc -p tsconfig.esm.json && yarn create-package-json-pointers-to-esm",
+    "watch": "tsc --watch -p tsconfig.esm.json"
  },
  "dependencies": {
-    "@navikt/ds-icons": "^0.5.5",
-    "@navikt/ds-react": "^0.10.5",
-    "classnames": "^2.3.1"
+    "@navikt/ds-icons": "^0.5.6",
+    "@navikt/ds-react": "^0.11.1",
+    "@popperjs/core": "^2.10.1",
+    "classnames": "^2.3.1",
+    "copy-to-clipboard": "^3.3.1",
+    "react-merge-refs": "^1.1.0"
  },
  "devDependencies": {
    "rimraf": "^3.0.2"
@@ -1,10 +1,10 @@
 import { Copy } from "@navikt/ds-icons";
-import { Placement } from "@popperjs/core";
 import cl from "classnames";
 import copy from "copy-to-clipboard";
 import React, { forwardRef, useEffect, useRef, useState } from "react";
 import mergeRefs from "react-merge-refs";
-import { BodyShort, Button, ButtonProps, Popover } from "..";
+import { BodyShort, Button, ButtonProps, Popover } from "@navikt/ds-react";
+import { Placement } from "@popperjs/core";

 export interface CopyToClipboardProps extends Omit<ButtonProps, "children"> {
  /**
@@ -66,7 +66,7 @@ const CopyToClipboard = forwardRef<HTMLButtonElement, CopyToClipboardProps>(
          ref={mergedRef}
          variant="secondary"
          title={title}
-          className={cl("navds-copy-to-clipboard", className)}
+          className={cl("navdsi-copy-to-clipboard", className)}
          onClick={handleClick}
          size={size}
          {...rest}
@@ -76,7 +76,7 @@ const CopyToClipboard = forwardRef<HTMLButtonElement, CopyToClipboardProps>(
            role="img"
            aria-label="Fil ikon for kopiering"
          />
-          {children ? children : <span className="sr-only">{title}</span>}
+          {children ? children : <span className="navds-sr-only">{title}</span>}
        </Button>
        <Popover
          role="alert"
@@ -85,7 +85,7 @@ const CopyToClipboard = forwardRef<HTMLButtonElement, CopyToClipboardProps>(
          onClose={() => setOpenPopover(false)}
          placement={popoverPlacement}
          arrow={false}
-          className="navds-copy-to-clipboard__popover"
+          className="navdsi-copy-to-clipboard__popover"
        >
          <BodyShort size={size} as="span">
            {popoverText}
@@ -3,7 +3,7 @@ import * as React from "react";
 import { CopyToClipboard } from "../index";

 export default {
-  title: "@ds-react/copy-to-clipboard",
+  title: "ds-react-internal/copy-to-clipboard",
  component: CopyToClipboard,
 };

@@ -2,7 +2,7 @@ import { Meta, Canvas } from "@storybook/addon-docs";
 import { CopyToClipboard } from "../../index";
 import { Success } from "@navikt/ds-react";

-<Meta title="ds-react/copy-to-clipboard/intro" />
+<Meta title="ds-react-internal/copy-to-clipboard/intro" />

 # Hvordan ta i bruk CopyToClipboard

@@ -1,3 +1,4 @@
+export * from "./copy-to-clipboard";
 export * from "./divider";
 export * from "./dropdown";
 export * from "./header";
@@ -1,14 +0,0 @@
-{
-  "extends": "../../../utilities/build/tsconfig-pakker.json",
-  "compilerOptions": {
-    "outDir": "./esm",
-    "rootDir": "./src",
-    "esModuleInterop": true,
-    "module": "ES2020",
-    "target": "ES2015",
-    "sourceMap": true,
-    "declaration": true
-  },
-  "include": ["./src"],
-  "exclude": ["./src/**/stories", "**/*.test.ts", "**/*.test.tsx"]
-}
@@ -0,0 +1,9 @@
+{
+  "extends": "./tsconfig.json",
+  "compilerOptions": {
+    "outDir": "./esm",
+    "module": "esnext",
+    "sourceMap": true,
+    "declaration": true
+  }
+}
@@ -1,14 +1,7 @@
 {
-  "extends": "../../../utilities/build/tsconfig-pakker.json",
+  "extends": "../../../tsconfig.json",
  "compilerOptions": {
    "outDir": "./cjs",
-    "rootDir": "./src",
-    "esModuleInterop": true,
-    "module": "commonjs",
-    "target": "es2015",
-    "sourceMap": false,
-    "declaration": false
-  },
-  "include": ["./src"],
-  "exclude": ["./src/**/stories", "**/*.test.ts", "**/*.test.tsx"]
+    "module": "commonjs"
+  }
 }
@@ -0,0 +1,10 @@
+{
+  "compilerOptions": {
+    "jsx": "react",
+    "strict": true,
+    "esModuleInterop": true,
+    "target": "es6",
+    "moduleResolution": "node"
+  },
+  "exclude": ["**/stories", "**/*.test.ts", "**/*.test.tsx"]
+}
Author	SHA1	Message	Date
github-actions[bot]	79b85169d1	Lerna versionbump [ci skip] - @navikt/ds-react@0.11.1 - @navikt/ds-react-internal@0.6.1	2021-10-20 12:40:42 +00:00
Andreas Nordahl	4e5d410f9f	[fix] remove aria-live from popover (#1299 )	2021-10-20 14:22:20 +02:00
github-actions[bot]	83ba659219	Lerna versionbump [ci skip] - @navikt/ds-css@0.10.0 - @navikt/ds-react@0.11.0 - @navikt/ds-css-internal@0.6.0 - @navikt/ds-react-internal@0.6.0	2021-10-19 13:17:42 +00:00
Ken	af12f5aa47	[FEATURE] Flyttet CopyToClipboard to internal-pakke 1/3 (#1296 )	2021-10-19 15:01:32 +02:00
github-actions[bot]	7548ef086f	Lerna versionbump [ci skip] - @navikt/ds-react@0.10.7 - @navikt/ds-react-internal@0.5.5	2021-10-19 12:41:18 +00:00
Ken	077ccb81cb	[FIX] Fjernet ubrukt dot.notation i Alert (#1294 )	2021-10-19 14:24:22 +02:00
github-actions[bot]	fc6bdd70c7	Lerna versionbump [ci skip] - @navikt/ds-icons@0.5.6 - @navikt/ds-react@0.10.6 - @navikt/ds-react-internal@0.5.4	2021-10-19 11:53:52 +00:00
Andreas Nordahl	998f0c7752	[fix] simplify tsconfig of @navikt/ds-react-internal (#1285 ) * simplify tsconfig of @navikt/ds-react-internal * new tsconfig for core react * new tsconfig in icons * rename tsconfig-esm to tsconfig.esm	2021-10-19 13:39:30 +02:00
Andreas NordahlandKen	900525fecf	Typo migration guide (#1293 ) * Typo migration guide draft * Update @navikt/core/react/src/typography/stories/typography.stories.mdx Co-authored-by: Ken <26967723+KenAJoh@users.noreply.github.com> Co-authored-by: Ken <26967723+KenAJoh@users.noreply.github.com>	2021-10-18 17:37:22 +02:00