Lerna versionbump [ci skip]

- @navikt/ds-css@0.8.2 - @navikt/ds-react@0.8.2 - nav-frontend-skjema@4.0.3
[FIX] Refactor speechbubble til dot-notasjon (#1256 )
2026-10-16 02:32:02 +00:00 · 2021-09-20 11:48:54 +00:00 · 2021-09-20 13:35:33 +02:00 · 2021-09-20 13:35:25 +02:00 · 2021-09-20 13:34:23 +02:00 · 2021-09-17 15:03:05 +00:00
22 changed files with 224 additions and 220 deletions
@@ -219,3 +219,11 @@ Props må fikses for de som har brukt denne komponenten, i tilleg til å endre n
 ## MicroCard

 - Oppdatert med OverridableComponent
+
+## SpeechBubble
+
+Implementert med Dot-notasjon
+
+- `<Bubble/>` -> `<SpeechBubble.Bubble/>`
+
+Bubble er fortsatt eksportert så vil ikke brekke noe for de som har begynt å ta denne i bruk.
@@ -44,12 +44,6 @@ eks darkmode.
 Dette er noe vi ikke har på planene for tiden, men etterhvert som ting faller på plass så vil dette være
 noe vi kunne ta en titt på hvis vi ser at det trengs.

-## Feature-flagging
-
-Ideen om å ta i bruk feature-flagging er noe som virker veldig interessant og vil da se på muligheten for å kunne levere
-større endringe i feature-flags for testing, og da publisere under eks major-bump i faste intervaller. Dette vil da kunne
-gjøre det enklere for deg som consumer av pakkene å ha oversikt over endringer og hva som må migreres.
-
 ## Versjonering

 To av de nye pakkene under `@navikt`, da `ds-css` og `ds-react` er nå versjonert under to store pakker med alle komponentene. I fremtiden vil vi se på å
@@ -1,41 +1,37 @@
 :root {
-  --navds-button-color-text: var(--navds-color-action-default);
-  --navds-button-color-background: var(--navds-color-background);
-  --navds-button-color-border: var(--navds-color-action-default);
-
  /* Primary */
  --navds-button-color-primary-text: var(--navds-color-white);
+  --navds-button-color-primary-border-focus: var(--navds-color-white);
  --navds-button-color-primary-background: var(--navds-color-action-default);
-  --navds-button-color-primary-border: var(--navds-color-action-default);
  --navds-button-color-primary-background-hover: var(
    --navds-color-action-hover
  );
-  --navds-button-color-primary-border-hover: var(--navds-color-action-hover);
  --navds-button-color-primary-background-active: var(
    --navds-color-action-active
  );
-  --navds-button-color-primary-border-focus: var(--navds-color-white);

-  /* secondary */
+  /* Secondary */
+  --navds-button-color-secondary-text: var(--navds-color-action-default);
  --navds-button-color-secondary-text-hover: var(--navds-color-text-inverse);
-  --navds-button-color-secondary-background-hover: var(
-    --navds-color-action-hover
-  );
  --navds-button-color-secondary-text-active: var(--navds-color-text-inverse);
-  --navds-button-color-secondary-background-active: var(
-    --navds-color-action-active
-  );
+  --navds-button-color-secondary-border: var(--navds-color-action-default);
  --navds-button-color-secondary-border-focus-active-hover: var(
    --navds-color-white
  );
+  --navds-button-color-secondary-background: var(--navds-color-background);
+  --navds-button-color-secondary-background-hover: var(
+    --navds-color-action-hover
+  );
+  --navds-button-color-secondary-background-active: var(
+    --navds-color-action-active
+  );

-  /* tertiary */
-  --navds-button-color-tertiary-border: transparent;
-  --navds-button-color-tertiary-background: transparent;
+  /* Tertiary */
+  --navds-button-color-tertiary-text: var(--navds-color-action-default);
+  --navds-button-color-tertiary-text-active: var(--navds-color-text-inverse);
  --navds-button-color-tertiary-border-hover: var(--navds-color-action-default);
  --navds-button-color-tertiary-border-focus: var(--navds-color-action-default);
  --navds-button-color-tertiary-border-active: var(--navds-color-white);
-  --navds-button-color-tertiary-text-active: var(--navds-color-text-inverse);
  --navds-button-color-tertiary-background-active: var(
    --navds-color-action-active
  );
@@ -43,9 +39,7 @@
  /* Danger */
  --navds-button-color-danger-text: var(--navds-color-white);
  --navds-button-color-danger-background: var(--navds-color-danger-default);
-  --navds-button-color-danger-border: var(--navds-color-danger-default);
  --navds-button-color-danger-background-hover: var(--navds-color-danger-hover);
-  --navds-button-color-danger-border-hover: var(--navds-color-danger-hover);
  --navds-button-color-danger-background-active: var(
    --navds-color-danger-active
  );
@@ -59,25 +53,32 @@
 .navds-button {
  display: inline-flex;
  cursor: pointer;
-  background-color: var(--navds-button-color-background);
-  color: var(--navds-button-color-text);
  margin: 0;
  text-align: center;
  text-decoration: none;
-  border-color: var(--navds-button-color-border);
+  border: none;
+  background: none;
  border-radius: 2px;
-  border-style: solid;
-  border-width: 2px;
-  min-height: 48px;
  min-width: 48px;
-  padding: var(--navds-spacing-2) var(--navds-spacing-2);
+  padding: var(--navds-spacing-3);
  flex-shrink: 0;
 }

+.navds-button--small {
+  padding-top: 0.375rem;
+  padding-bottom: 0.375rem;
+  min-width: 32px;
+}
+
+.navds-button:focus {
+  outline: none;
+  box-shadow: var(--navds-shadow-focus);
+}
+
 .navds-button__inner {
+  margin: auto;
  display: flex;
  align-items: center;
-  margin: auto;
  gap: var(--navds-spacing-2);
 }

@@ -89,42 +90,60 @@
  font-size: 1.25rem;
 }

-.navds-button--small {
-  padding: var(--navds-spacing-1) var(--navds-spacing-2);
-  min-height: 32px;
+/*************************
+ * .navds-button--primary *
+ *************************/
+
+.navds-button--primary {
+  background-color: var(--navds-button-color-primary-background);
+  color: var(--navds-button-color-primary-text);
 }

-.navds-button:focus {
-  outline: none;
-  box-shadow: var(--navds-shadow-focus);
+.navds-button--primary:hover {
+  background-color: var(--navds-button-color-primary-background-hover);
+}
+
+.navds-button--primary:active {
+  background-color: var(--navds-button-color-primary-background-active);
+}
+
+.navds-button--primary:focus {
+  box-shadow: inset 0 0 0 1px var(--navds-button-color-primary-border-focus),
+    var(--navds-shadow-focus);
 }

 /**************************
 * .navds-button--secondary *
 **************************/

+.navds-button--secondary {
+  color: var(--navds-button-color-secondary-text);
+  background-color: var(--navds-button-color-secondary-background);
+  box-shadow: inset 0 0 0 2px var(--navds-button-color-secondary-border);
+}
+
 .navds-button--secondary:hover {
  color: var(--navds-button-color-secondary-text-hover);
  background-color: var(--navds-button-color-secondary-background-hover);
-  border-color: transparent;
+  box-shadow: none;
+}
+
+.navds-button--secondary:focus {
+  box-shadow: inset 0 0 0 2px var(--navds-button-color-secondary-border),
+    var(--navds-shadow-focus);
 }

 .navds-button--secondary:active {
  color: var(--navds-button-color-secondary-text-active);
  background-color: var(--navds-button-color-secondary-background-active);
-  border-color: transparent;
-}
-
-.navds-button--secondary:focus:hover {
-  border-color: var(--navds-button-color-secondary-border-focus-active-hover);
-  border-width: 1px;
-  padding: calc(0.25rem + 1px) calc(0.5rem + 1px);
+  box-shadow: none;
 }

+.navds-button--secondary:focus:hover,
 .navds-button--secondary:focus:active {
-  border-color: var(--navds-button-color-secondary-border-focus-active-hover);
-  border-width: 1px;
-  padding: calc(0.25rem + 1px) calc(0.5rem + 1px);
+  box-shadow: inset 0 0 0 1px
+      var(--navds-button-color-secondary-border-focus-active-hover),
+    var(--navds-shadow-focus);
 }

 /****************************
@@ -132,76 +151,49 @@
 ****************************/

 .navds-button--tertiary {
-  border-color: var(--navds-button-color-tertiary-border);
-  background-color: var(--navds-button-color-tertiary-background);
+  color: var(--navds-button-color-tertiary-text);
 }

 .navds-button--tertiary:hover {
-  border-color: var(--navds-button-color-tertiary-border-hover);
+  box-shadow: inset 0 0 0 2px var(--navds-button-color-tertiary-border-hover);
 }

 .navds-button--tertiary:focus {
-  border-color: var(--navds-button-color-tertiary-border-focus);
+  box-shadow: inset 0 0 0 2px var(--navds-button-color-tertiary-border-focus),
+    var(--navds-shadow-focus);
 }

 .navds-button--tertiary:active {
  color: var(--navds-button-color-tertiary-text-active);
  background-color: var(--navds-button-color-tertiary-background-active);
-  border-color: var(--navds-button-color-tertiary-border-active);
-  border-width: 1px;
-  padding: calc(0.5rem + 1px) calc(0.5rem + 1px);
+  box-shadow: inset 0 0 0 1px var(--navds-button-color-tertiary-border-active);
 }

-.navds-button--small.navds-button--tertiary:active {
-  padding: calc(0.25rem + 1px) calc(0.5rem + 1px);
+.navds-button--tertiary:active:focus {
+  box-shadow: inset 0 0 0 1px var(--navds-button-color-tertiary-border-active),
+    var(--navds-shadow-focus);
 }

 /*************************
- * .navds-button--primary *
 * .navds-button--danger *
 *************************/

-.navds-button--primary {
-  background-color: var(--navds-button-color-primary-background);
-  border-color: var(--navds-button-color-primary-border);
-  color: var(--navds-button-color-primary-text);
-}
-
 .navds-button--danger {
  background-color: var(--navds-button-color-danger-background);
-  border-color: var(--navds-button-color-danger-border);
  color: var(--navds-button-color-danger-text);
 }

-.navds-button--primary,
-.navds-button--danger {
-  border-width: 1px;
-}
-
-.navds-button--primary:hover {
-  background-color: var(--navds-button-color-primary-background-hover);
-  border-color: var(--navds-button-color-primary-border-hover);
-}
-
 .navds-button--danger:hover {
  background-color: var(--navds-button-color-danger-background-hover);
-  border-color: var(--navds-button-color-danger-border-hover);
-}
-
-.navds-button--primary:active {
-  background-color: var(--navds-button-color-primary-background-active);
 }

 .navds-button--danger:active {
  background-color: var(--navds-button-color-danger-background-active);
 }

-.navds-button--primary:focus {
-  border-color: var(--navds-button-color-primary-border-focus);
-}
-
 .navds-button--danger:focus {
-  border-color: var(--navds-button-color-danger-border-focus);
+  box-shadow: inset 0 0 0 1px var(--navds-button-color-danger-border-focus),
+    var(--navds-shadow-focus);
 }

 /**************************
@@ -212,11 +204,6 @@
  color: var(--navds-button-color-text-disabled);
  background-color: var(--navds-button-color-background-disabled);
  cursor: not-allowed;
-  border-width: 0;
  box-shadow: none;
  transform: none;
 }
-
-.navds-button:disabled.navds-button--tertiary:active {
-  padding: var(--navds-spacing-2) var(--navds-spacing-2);
-}
@@ -38,25 +38,3 @@
  box-shadow: 0 0 0 1px var(--navds-search-field-color-shadow-error) inset;
  border-color: var(--navds-search-field-color-border-error);
 }
-
-.navds-search-field__clear-button {
-  background-color: initial;
-  border: 1px solid var(--navds-search-field-color-clearbutton-border);
-  display: flex;
-  flex-shrink: 0;
-  justify-content: center;
-  align-items: center;
-  padding: 0 0.5rem;
-}
-
-.navds-search-field__clear-button:focus {
-  border-color: transparent;
-}
-
-.navds-search-field__clear-button:not(:first-child) {
-  border-left: none;
-}
-
-.navds-search-field__clear-button:not(:last-child) {
-  border-right: none;
-}
@@ -88,7 +88,7 @@
  stroke: var(--navds-loader-color-on-button-background);
 }

-.navds-button--action .navds-loader .navds-loader__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);
 }
@@ -1,6 +1,6 @@
 {
  "name": "@navikt/ds-css",
-  "version": "0.8.0",
+  "version": "0.8.2",
  "private": false,
  "description": "Css for NAV Designsystem components",
  "author": "NAV Designsystem team",
@@ -71,9 +71,12 @@
 .navds-speechbubble--right .navds-speechbubble__bubble {
  border-radius: 12px;
  border-bottom-right-radius: 2px;
-  align-items: flex-end;
 }

 .navds-speechbubble__top-text {
  color: var(--navds-speechbubble-color-detail-text);
 }
+
+.navds-speechbubble--right .navds-speechbubble__top-text {
+  align-self: flex-end;
+}
@@ -1,6 +1,6 @@
 {
  "name": "@navikt/ds-react",
-  "version": "0.8.0",
+  "version": "0.8.2",
  "private": false,
  "description": "NAV designsystem react components",
  "author": "NAV Designsystem team",
@@ -42,7 +42,7 @@
    "react-merge-refs": "^1.1.0",
    "react-modal": "3.12.1",
    "react-popper": "^2.2.4",
-    "short-uuid": "^4.2.0"
+    "uuid": "^8.3.2"
  },
  "devDependencies": {
    "@types/react-router-dom": "^5.1.8",
@@ -1,17 +1,17 @@
 import { Meta, Canvas } from "@storybook/addon-docs";
 import { Button, Loader } from "../../index";
-import { Success } from "@navikt/ds-react";
+import { Success } from "@navikt/ds-icons";

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

 # Hvordan ta i bruk Button

 ```jsx
-<Button>Buttontekst</Button>
+<Button>Button</Button>
 ```

 <Canvas>
-  <Button>Buttontekst</Button>
+  <Button>Button</Button>
 </Canvas>

 ## Varianter
@@ -20,10 +20,10 @@ import { Success } from "@navikt/ds-react";
 `primary`, `secondary`, `tertiary` og `danger`

 <Canvas>
-  <Button variant="primary">Buttontekst</Button>
-  <Button variant="secondary">Buttontekst</Button>
-  <Button variant="tertiary">Buttontekst</Button>
-  <Button variant="danger">Buttontekst</Button>
+  <Button variant="primary">Primary</Button>
+  <Button variant="secondary">Secondary</Button>
+  <Button variant="tertiary">Tertiary</Button>
+  <Button variant="danger">Danger</Button>
 </Canvas>

 ## Sizing
@@ -32,33 +32,39 @@ Button har to størrelser: Default 48px min-height og small 32px min-height

 <Canvas>
  <Button size="small" variant="primary">
-    Buttontekst
+    Primary
  </Button>
  <Button size="small" variant="secondary">
-    Buttontekst
+    Secondary
  </Button>
  <Button size="small" variant="tertiary">
-    Buttontekst
+    Tertiary
  </Button>
  <Button size="small" variant="danger">
-    Buttontekst
+    Danger
  </Button>
 </Canvas>

 ## Med ikon eller `<Loader />`

 Hvis man setter ikoner (svg) eller `<Loader />` rett på button vil størrelsen
-bli justert automatisk.
+bli justert automatisk og sentrert.

 <Canvas>
  <Button>
-    <Loader /> Buttontekst
-  </Button>
-  <Button>
-    Buttontekst <Loader />
+    <Loader /> Laster... <Loader />
  </Button>
  <Button size="small">
-    Buttontekst
+    <Loader />
+    Laster...
    <Loader />
  </Button>
+  <Button>
+    <Success /> Laster... <Success />
+  </Button>
+  <Button size="small">
+    <Success />
+    Laster...
+    <Success />
+  </Button>
 </Canvas>
@@ -10,12 +10,12 @@ export default {
 const Section = ({ children }) => (
  <div
    style={{
-      display: "grid",
+      display: "flex",
      gap: 16,
      gridAutoFlow: "column",
      justifyContent: "start",
      padding: 24,
-      background: "lightgray",
+      paddingLeft: 0,
    }}
  >
    {children}
@@ -38,7 +38,7 @@ const varSwitch = {

 export const All = () => {
  return (
-    <>
+    <div style={{ paddingLeft: "1rem" }}>
      <h1>Button</h1>
      <Section>
        {variants.map((variant) => (
@@ -103,6 +103,6 @@ export const All = () => {
          </Button>
        ))}
      </Section>
-    </>
+    </div>
  );
 };
@@ -140,7 +140,7 @@ export const Counter = ({ maxLength, currentLength, size }) => {
      className={cl("navds-textarea__counter", {
        "navds-textarea__counter--error": difference < 0,
      })}
-      aria-live="polite"
+      aria-live={difference < 20 ? "polite" : "off"}
      size={size}
    >
      {difference < 0
@@ -16,7 +16,11 @@ export interface BubbleProps extends HTMLAttributes<HTMLDivElement> {
  backgroundColor?: string;
 }

-const Bubble = forwardRef<HTMLDivElement, BubbleProps>(
+export type BubbleType = React.ForwardRefExoticComponent<
+  BubbleProps & React.RefAttributes<HTMLDivElement>
+>;
+
+const Bubble: BubbleType = forwardRef(
  ({ children, className, topText, backgroundColor, ...rest }, ref) => {
    return (
      <div
@@ -1,5 +1,6 @@
 import React, { forwardRef, HTMLAttributes } from "react";
 import cl from "classnames";
+import { Bubble, BubbleType } from ".";

 export interface SpeechBubbleProps extends HTMLAttributes<HTMLDivElement> {
  /**
@@ -29,6 +30,13 @@ export interface SpeechBubbleProps extends HTMLAttributes<HTMLDivElement> {
  position?: "left" | "right";
 }

+interface SpeechBubbleComponent
+  extends React.ForwardRefExoticComponent<
+    SpeechBubbleProps & React.RefAttributes<HTMLDivElement>
+  > {
+  Bubble: BubbleType;
+}
+
 const SpeechBubble = forwardRef<HTMLDivElement, SpeechBubbleProps>(
  (
    {
@@ -78,6 +86,8 @@ const SpeechBubble = forwardRef<HTMLDivElement, SpeechBubbleProps>(
      </div>
    );
  }
-);
+) as SpeechBubbleComponent;
+
+SpeechBubble.Bubble = Bubble;

 export default SpeechBubble;
@@ -11,27 +11,31 @@ breaking-changes før v1 er klar. Anbefaler da å ikke override styling som er b

 ```jsx
 <SpeechBubble illustration="OLA" topText="Ola Normann 01.01.21 14:00">
-  <Bubble>
+  <SpeechBubble.Bubble>
    Aute minim nisi sunt mollit duis sunt nulla minim non proident.
-  </Bubble>
-  <Bubble>Tempor fugiat amet eu sint in in ullamco.</Bubble>
-  <Bubble>
+  </SpeechBubble.Bubble>
+  <SpeechBubble.Bubble>
+    Tempor fugiat amet eu sint in in ullamco.
+  </SpeechBubble.Bubble>
+  <SpeechBubble.Bubble>
    Adipisicing laborum est eu laborum est sit in commodo enim sint laboris
    labore nisi ut.
-  </Bubble>
+  </SpeechBubble.Bubble>
 </SpeechBubble>
 ```

 <Canvas>
  <SpeechBubble illustration="OLA" topText="Ola Normann 01.01.21 14:00">
-    <Bubble>
+    <SpeechBubble.Bubble>
      Aute minim nisi sunt mollit duis sunt nulla minim non proident.
-    </Bubble>
-    <Bubble>Tempor fugiat amet eu sint in in ullamco.</Bubble>
-    <Bubble>
+    </SpeechBubble.Bubble>
+    <SpeechBubble.Bubble>
+      Tempor fugiat amet eu sint in in ullamco.
+    </SpeechBubble.Bubble>
+    <SpeechBubble.Bubble>
      Adipisicing laborum est eu laborum est sit in commodo enim sint laboris
      labore nisi ut.
-    </Bubble>
+    </SpeechBubble.Bubble>
  </SpeechBubble>
 </Canvas>

@@ -41,27 +45,29 @@ Speechbubble kan bli posisjonert "left" og "right" med `position`-proppen

 ```jsx
 <SpeechBubble illustration="OLA" position="left">
-  <Bubble>
+  <SpeechBubble.Bubble>
    Aute minim nisi sunt mollit duis sunt nulla minim non proident.
-  </Bubble>
+  </SpeechBubble.Bubble>
 </SpeechBubble>
 <SpeechBubble illustration="OLA" position="right">
-  <Bubble>
+  <SpeechBubble.Bubble>
    Aute minim nisi sunt mollit duis sunt nulla minim non proident.
-  </Bubble>
+  </SpeechBubble.Bubble>
 </SpeechBubble>
 ```

 <Canvas>
  <div>
    <SpeechBubble illustration="OLA" position="left">
-      <Bubble>
+      <SpeechBubble.Bubble>
        Aute minim nisi sunt mollit duis sunt nulla minim non proident.
-      </Bubble>
+      </SpeechBubble.Bubble>
    </SpeechBubble>
    <br />
    <SpeechBubble illustration="PER" position="right">
-      <Bubble>Ipsum laborum culpa ea ea commodo eiusmod in aute.</Bubble>
+      <SpeechBubble.Bubble>
+        Ipsum laborum culpa ea ea commodo eiusmod in aute.
+      </SpeechBubble.Bubble>
    </SpeechBubble>
  </div>
 </Canvas>
@@ -77,9 +83,9 @@ Man kan endre bakgrunnsfargen selv med `illustrationBgColor` og `backgroundColor
  illustrationBgColor="var(--navds-color-lightblue-10)"
  backgroundColor="var(--navds-color-lightblue-20)"
 >
-  <Bubble>
+  <SpeechBubble.Bubble>
    Aute minim nisi sunt mollit duis sunt nulla minim non proident.
-  </Bubble>
+  </SpeechBubble.Bubble>
 </SpeechBubble>
 ```

@@ -90,9 +96,9 @@ Man kan endre bakgrunnsfargen selv med `illustrationBgColor` og `backgroundColor
    illustrationBgColor="var(--navds-color-lightblue-10)"
    backgroundColor="var(--navds-color-lightblue-20)"
  >
-    <Bubble>
+    <SpeechBubble.Bubble>
      Aute minim nisi sunt mollit duis sunt nulla minim non proident.
-    </Bubble>
+    </SpeechBubble.Bubble>
  </SpeechBubble>
 </Canvas>

@@ -103,17 +109,17 @@ Hvis man bruker en illustrasjon i SVG-fromat vil den fungere likt `nav-frontend-

 ```jsx
 <SpeechBubble illustration={<Illustration />} position="left">
-  <Bubble>
+  <SpeechBubble.Bubble>
    Aute minim nisi sunt mollit duis sunt nulla minim non proident.
-  </Bubble>
+  </SpeechBubble.Bubble>
 </SpeechBubble>
 ```

 <Canvas>
  <SpeechBubble illustration={<Illustration />} position="left">
-    <Bubble>
+    <SpeechBubble.Bubble>
      Aute minim nisi sunt mollit duis sunt nulla minim non proident.
-    </Bubble>
+    </SpeechBubble.Bubble>
  </SpeechBubble>
 </Canvas>

@@ -136,14 +142,16 @@ Hvis man bruker en illustrasjon i SVG-fromat vil den fungere likt `nav-frontend-
    </div>
  }
 >
-  <Bubble>
+  <SpeechBubble.Bubble>
    Aute minim nisi sunt mollit duis sunt nulla minim non proident.
-  </Bubble>
-  <Bubble>Tempor fugiat amet eu sint in in ullamco.</Bubble>
-  <Bubble>
+  </SpeechBubble.Bubble>
+  <SpeechBubble.Bubble>
+    Tempor fugiat amet eu sint in in ullamco.
+  </SpeechBubble.Bubble>
+  <SpeechBubble.Bubble>
    Adipisicing laborum est eu laborum est sit in commodo enim sint laboris
    labore nisi ut.
-  </Bubble>
+  </SpeechBubble.Bubble>
 </SpeechBubble>
 ```

@@ -162,13 +170,15 @@ Hvis man bruker en illustrasjon i SVG-fromat vil den fungere likt `nav-frontend-
      </div>
    }
  >
-    <Bubble>
+    <SpeechBubble.Bubble>
      Aute minim nisi sunt mollit duis sunt nulla minim non proident.
-    </Bubble>
-    <Bubble>Tempor fugiat amet eu sint in in ullamco.</Bubble>
-    <Bubble>
+    </SpeechBubble.Bubble>
+    <SpeechBubble.Bubble>
+      Tempor fugiat amet eu sint in in ullamco.
+    </SpeechBubble.Bubble>
+    <SpeechBubble.Bubble>
      Adipisicing laborum est eu laborum est sit in commodo enim sint laboris
      labore nisi ut.
-    </Bubble>
+    </SpeechBubble.Bubble>
  </SpeechBubble>
 </Canvas>
@@ -17,14 +17,16 @@ export const All = () => {
        topText="Ola Normann 01.01.21 14:00"
        backgroundColor="var(--navds-color-lightblue-20)"
      >
-        <Bubble>
+        <SpeechBubble.Bubble>
          Aute minim nisi sunt mollit duis sunt nulla minim non proident.
-        </Bubble>
-        <Bubble>Tempor fugiat amet eu sint in in ullamco.</Bubble>
-        <Bubble>
+        </SpeechBubble.Bubble>
+        <SpeechBubble.Bubble>
+          Tempor fugiat amet eu sint in in ullamco.
+        </SpeechBubble.Bubble>
+        <SpeechBubble.Bubble>
          Adipisicing laborum est eu laborum est sit in commodo enim sint
          laboris labore nisi ut.
-        </Bubble>
+        </SpeechBubble.Bubble>
      </SpeechBubble>
      <SpeechBubble
        illustration={<div>KAJ</div>}
@@ -43,54 +45,60 @@ export const All = () => {
        position="right"
        backgroundColor="var(--navds-color-gray-10)"
      >
-        <Bubble>
+        <SpeechBubble.Bubble>
          Aute minim nisi sunt mollit duis sunt nulla minim non proident.
-        </Bubble>
-        <Bubble>Tempor fugiat amet eu sint in in ullamco.</Bubble>
-        <Bubble>
+        </SpeechBubble.Bubble>
+        <SpeechBubble.Bubble>
+          Tempor fugiat amet eu sint in in ullamco.
+        </SpeechBubble.Bubble>
+        <SpeechBubble.Bubble>
          Adipisicing laborum est eu laborum est sit in commodo enim sint
          laboris labore nisi ut.
-        </Bubble>
+        </SpeechBubble.Bubble>
      </SpeechBubble>
      <SpeechBubble
        illustration={<div>KAJ</div>}
        topText="Ola Normann 01.01.21 14:00"
        position="left"
      >
-        <Bubble>
+        <SpeechBubble.Bubble>
          Aute minim nisi sunt mollit duis sunt nulla minim non proident.
-        </Bubble>
-        <Bubble>Tempor fugiat amet eu sint in in ullamco.</Bubble>
-        <Bubble>
+        </SpeechBubble.Bubble>
+        <SpeechBubble.Bubble>
+          Tempor fugiat amet eu sint in in ullamco.
+        </SpeechBubble.Bubble>
+        <SpeechBubble.Bubble>
          Adipisicing laborum est eu laborum est sit in commodo enim sint
          laboris labore nisi ut.
-        </Bubble>
+        </SpeechBubble.Bubble>
      </SpeechBubble>
      <SpeechBubble
        illustration={<div>KAJ</div>}
        topText="Ola Normann 01.01.21 14:00"
        position="right"
      >
-        <Bubble>
+        <SpeechBubble.Bubble>
          Aute minim nisi sunt mollit duis sunt nulla minim non proident.
-        </Bubble>
-        <Bubble>Tempor fugiat amet eu sint in in ullamco.</Bubble>
+        </SpeechBubble.Bubble>
+        <SpeechBubble.Bubble>
+          Tempor fugiat amet eu sint in in ullamco.
+        </SpeechBubble.Bubble>
      </SpeechBubble>
      <SpeechBubble
        illustration={<div>KAJ</div>}
        topText="Ola Normann 01.01.21 14:00"
        position="left"
      >
-        <Bubble>
+        <SpeechBubble.Bubble>
          Aute minim nisi sunt mollit duis sunt nulla minim non proident.
-        </Bubble>
+        </SpeechBubble.Bubble>
      </SpeechBubble>
      <SpeechBubble
        illustration={<div>KAJ</div>}
        topText="Ola Normann 01.01.21 14:00"
        position="right"
      >
-        <Bubble>Per skriver....</Bubble>
+        <SpeechBubble.Bubble>Per skriver....</SpeechBubble.Bubble>
      </SpeechBubble>
    </div>
  );
@@ -1,5 +1,5 @@
 import { useLayoutEffect, useState } from "react";
-import ShortUuid from "short-uuid";
+import { v4 as uuidv4 } from "uuid";

 const canUseDOM = (): boolean => {
  return (
@@ -15,7 +15,7 @@ export const useId: (id?: string) => string = (id) => {
  const [newId, setNewId] = useState<string | undefined>(undefined);

  useClientLayoutEffect(() => {
-    setNewId(ShortUuid.generate());
+    setNewId(uuidv4());
  }, []);

  return id ?? newId ?? "";
@@ -1,5 +1,11 @@
 # 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
@@ -1,6 +1,6 @@
 {
  "name": "nav-frontend-skjema",
-  "version": "4.0.2",
+  "version": "4.0.3",
  "main": "lib/index.js",
  "types": "lib/index.d.ts",
  "license": "MIT",
@@ -283,7 +283,10 @@ const Teller = (props: TellerProps) => {
 function defaultTellerTekst(antallTegn, maxLength) {
  const difference = maxLength - antallTegn;
  return (
-    <span className={tellerTekstCls(difference)} aria-live="polite">
+    <span
+      className={tellerTekstCls(difference)}
+      aria-live={difference < 20 ? "polite" : "off"}
+    >
      {difference >= 0 && `Du har ${difference} tegn igjen`}
      {difference < 0 && `Du har ${Math.abs(difference)} tegn for mye`}
    </span>
@@ -147,7 +147,7 @@ Alle livssituasjonssider ligger i det sentrale publiseringssystemet (per nå Eno
  - Vil dere at Team personbruker skal bistå med gjennomføringen av workshopen? Ta kontakt med oss!
 - Detaljér innholdet
  - [Språkarbeid i Produktområder, team og prosjekter (Navet)](https://navno.sharepoint.com/sites/intranett-kommunikasjon/SitePages/Spr%C3%A5karbeid-i-team-og-prosjekter.aspx?web=1)
-  - [Parskriving (Medium)](https://medium.com/netlife/hvorfor-parskriving-sikrer-gode-webtekster-9d9069e51e4a)
+  - Parskriv innholdet. [Hvorfor parskriving? (Medium)](https://medium.com/netlife/hvorfor-parskriving-sikrer-gode-webtekster-9d9069e51e4a) [Hvordan parskrive? (Medium)](https://www.netlife.com/blogg/slik-kommer-du-i-gang-med-parskriving)
 - Sørg for at innholdet er klarspråklig og bruker riktig stil og tone
  - [Slik skriver vi i NAV](https://design.nav.no/designsystem/resources/language)
  - [Begrepskatalog (Confluence)](https://confluence.adeo.no/display/BGRP/Se+alle+godkjente+begreper)
@@ -188,7 +188,7 @@ Team som har innholdet sitt i andre CMS kan velge å beholde innholdet der det e
 | Mulighet for gjenbruk av innhold på egne sider                                       | Ja                                                                                                                                                  | Ja (hvis hodeløst CMS)                                                                                                |
 | Mulighet for gjenbruk av innhold på andre sider på nav.no                            | Ja                                                                                                                                                  | Nei                                                                                                                   |
 | Tilpasningsfunksjonalitet (filter)                                                   | Ja                                                                                                                                                  | Tilgjengelig som designkomponent. Funksjonalitet må utvikles av teamet.                                               |
-| Kalkulator integrert på siden.                                                       | I arbeid. Vil se på muligheten for at disse blir redigerbare i redaktørgrensesnittet, og at de kan bruke satser og G-beløp som oppdateres sentralt. | Tilgjengelig som designkomponent. Funksjonalitet må utvikles av teamet.                                               |
+| Kalkulator integrert på siden.                                                       | Ja. Kalkulator er redigerbar i redaktørgrensesnittet, og kan bruke satser og G-beløp som oppdateres sentralt. | Tilgjengelig som designkomponent. Funksjonalitet må utvikles av teamet.                                               |
 | Metadata for produktside                                                             | Ja, ivaretas av Enonic.                                                                                                                             | Teamet må sørge for at dette er ivaretatt.                                                                            |
 | Hjelp og støtte ved redaksjonelt arbeid                                              | Ja                                                                                                                                                  | Team personbruker prioriterer redaksjonell støtte til arbeid i Enonic, men forsøker å være tilgjengelige for sparring |
 |                                                                                      |
@@ -222,7 +222,7 @@ Team som har innholdet sitt i andre CMS kan velge å beholde innholdet der det e
  - Vil dere at Team personbruker skal bistå med gjennomføringen av workshopen? Ta kontakt med oss!
 - Detaljér innholdet
  - [Språkarbeid i Produktområder, team og prosjekter (Navet)](https://navno.sharepoint.com/sites/intranett-kommunikasjon/SitePages/Spr%C3%A5karbeid-i-team-og-prosjekter.aspx?web=1)
-  - [Parskriving (Medium)](https://medium.com/netlife/hvorfor-parskriving-sikrer-gode-webtekster-9d9069e51e4a)
+  - Parskriv innholdet. [Hvorfor parskriving? (Medium)](https://medium.com/netlife/hvorfor-parskriving-sikrer-gode-webtekster-9d9069e51e4a) [Hvordan parskrive? (Medium)](https://www.netlife.com/blogg/slik-kommer-du-i-gang-med-parskriving)
 - Sørg for at innholdet er klarspråklig og bruker riktig stil og tone
  - [Slik skriver vi i NAV](https://design.nav.no/designsystem/resources/language)
  - [Begrepskatalog (Confluence)](https://confluence.adeo.no/display/BGRP/Se+alle+godkjente+begreper)
@@ -11698,11 +11698,6 @@ follow-redirects@^1.14.0:
  resolved "https://registry.yarnpkg.com/follow-redirects/-/follow-redirects-1.14.3.tgz#6ada78118d8d24caee595595accdc0ac6abd022e"
  integrity sha512-3MkHxknWMUtb23apkgz/83fDoe+y+qr0TdgacGIA7bew+QLBo3vdgEN2xEsuXNivpFy4CyDhBBZnNZOtalmenw==

-follow-redirects@^1.14.0:
-  version "1.14.3"
-  resolved "https://registry.yarnpkg.com/follow-redirects/-/follow-redirects-1.14.3.tgz#6ada78118d8d24caee595595accdc0ac6abd022e"
-  integrity sha512-3MkHxknWMUtb23apkgz/83fDoe+y+qr0TdgacGIA7bew+QLBo3vdgEN2xEsuXNivpFy4CyDhBBZnNZOtalmenw==
-
 for-each@^0.3.3:
  version "0.3.3"
  resolved "https://registry.yarnpkg.com/for-each/-/for-each-0.3.3.tgz#69b447e88a0a5d32c3e7084f3f1710034b21376e"
@@ -22838,14 +22833,6 @@ shellwords@^0.1.1:
  resolved "https://registry.yarnpkg.com/shellwords/-/shellwords-0.1.1.tgz#d6b9181c1a48d397324c84871efbcfc73fc0654b"
  integrity sha512-vFwSUfQvqybiICwZY5+DAWIPLKsWO31Q91JSKl3UYv+K5c2QRPzn0qzec6QPu1Qc9eHYItiP3NdJqNVqetYAww==

-short-uuid@^4.2.0:
-  version "4.2.0"
-  resolved "https://registry.yarnpkg.com/short-uuid/-/short-uuid-4.2.0.tgz#3706d9e7287ac589dc5ffe324d3e34817a07540b"
-  integrity sha512-r3cxuPPZSuF0QkKsK9bBR7u+7cwuCRzWzgjPh07F5N2iIUNgblnMHepBY16xgj5t1lG9iOP9k/TEafY1qhRzaw==
-  dependencies:
-    any-base "^1.1.0"
-    uuid "^8.3.2"
-
 side-channel@^1.0.4:
  version "1.0.4"
  resolved "https://registry.yarnpkg.com/side-channel/-/side-channel-1.0.4.tgz#efce5c8fdc104ee751b25c58d4290011fa5ea2cf"
Author	SHA1	Message	Date
github-actions[bot]	9a1a48d319	Lerna versionbump [ci skip] - @navikt/ds-css@0.8.2 - @navikt/ds-react@0.8.2 - nav-frontend-skjema@4.0.3	2021-09-20 11:48:54 +00:00
Ken	ce4afb17a8	[FIX] Refactor speechbubble til dot-notasjon (#1256 )	2021-09-20 13:35:33 +02:00
Ken	146111e859	[FIX] Justert alignment av tekst i SpeechBubble (#1255 )	2021-09-20 13:35:25 +02:00
Ken	40a8965cec	[FIX] Setter aria-live til polite bare når 20 tegn gjenstår... (#1258 ) ... i Textarea	2021-09-20 13:34:23 +02:00
github-actions[bot]	8f4e6a5e89	Lerna versionbump [ci skip] - @navikt/ds-react@0.8.1	2021-09-17 15:03:05 +00:00
Ken	e73c9d2f3e	[FIX] short-uuid -> uuid (short-uuid brekker sanity) (#1257 )	2021-09-17 16:47:51 +02:00
Ken	0849fffe40	oppdatert changelog	2021-09-16 15:07:24 +02:00
TuvaSverdstad	7a261e86a3	Update produktsider.mdx (#1253 )	2021-09-16 15:03:17 +02:00
TuvaSverdstad	a2c48a9246	Update livssituasjonssider.mdx (#1252 )	2021-09-16 15:03:03 +02:00
github-actions[bot]	7c845ac464	Lerna versionbump [ci skip] - @navikt/ds-css@0.8.1	2021-09-16 08:24:28 +00:00
Ken	6edd03a9c1	[FIX] hotfix searchfield clearbutton	2021-09-16 10:09:35 +02:00
Andreas NordahlandKen	724a90eb28	[FIX] Button padding fix (#1248 ) Co-authored-by: Ken <ken.aleksander@gmail.com>	2021-09-16 10:00:54 +02:00
TuvaSverdstad	43b686e769	Update produktsider.mdx (#1249 )	2021-09-16 09:09:16 +02:00