Lerna versionbump [ci skip]

- @navikt/ds-css@0.16.9 - @navikt/ds-react@0.17.13 - @navikt/ds-react-internal@0.12.13
[FIX] Tabs komponent (#1451 )
2026-10-13 17:22:02 +00:00 · 2022-03-24 12:38:43 +00:00 · 2022-03-24 13:29:52 +01:00 · 2022-03-24 12:58:54 +01:00 · 2022-03-23 18:50:44 +00:00 · 2022-03-23 19:41:50 +01:00
77 changed files with 1607 additions and 373 deletions
@@ -1,3 +0,0 @@
-# Designsystem v2
-
-Storybook: https://navikt.github.io/Designsystemet/
@@ -3,53 +3,32 @@
  --navds-alert-color-error-border: var(
    --navds-semantic-color-feedback-danger-border
  );
-  --navds-alert-color-error-background: var(
-    --navds-semantic-color-feedback-danger-background
-  );
+  --navds-alert-color-error-background: var(--navds-global-color-red-50);
  --navds-alert-color-warning-border: var(
    --navds-semantic-color-feedback-warning-border
  );
-  --navds-alert-color-warning-background: var(
-    --navds-semantic-color-feedback-warning-background
-  );
+  --navds-alert-color-warning-background: var(--navds-global-color-orange-50);
  --navds-alert-color-info-border: var(
    --navds-semantic-color-feedback-info-border
  );
-  --navds-alert-color-info-background: var(
-    --navds-semantic-color-feedback-info-background
-  );
+  --navds-alert-color-info-background: var(--navds-global-color-lightblue-50);
  --navds-alert-color-success-border: var(
    --navds-semantic-color-feedback-success-border
  );
-  --navds-alert-color-success-background: var(
-    --navds-semantic-color-feedback-success-background
-  );
+  --navds-alert-color-success-background: var(--navds-global-color-green-50);
  --navds-alert-color-error-icon: var(
    --navds-semantic-color-feedback-danger-icon
  );
-  --navds-alert-color-error-icon-background: var(
-    --navds-semantic-color-component-background-light
-  );
-  --navds-alert-color-warning-icon: var(
-    --navds-semantic-color-feedback-warning-icon
-  );
-  --navds-alert-color-warning-icon-background: var(
-    --navds-semantic-color-component-background-inverted
-  );
+  --navds-alert-color-warning-icon: var(--navds-global-color-orange-600);
  --navds-alert-color-info-icon: var(--navds-semantic-color-feedback-info-icon);
-  --navds-alert-color-info-icon-background: var(
-    --navds-semantic-color-component-background-light
-  );
  --navds-alert-color-success-icon: var(
    --navds-semantic-color-feedback-success-icon
  );
-  --navds-alert-color-success-icon-background: var(
-    --navds-semantic-color-component-background-light
-  );
+  --navds-alert-color-icon-background: var(--navds-global-color-white);
 }

 .navds-alert {
-  border-radius: 4px;
+  border-radius: var(--navds-border-radius-medium);
  border: 1px solid;
  border-color: var(--navds-alert-color-border);
  padding: calc(var(--navds-spacing-4) + 1px) calc(var(--navds-spacing-4) + 1px);
@@ -91,7 +70,7 @@
  color: var(--navds-alert-color-error-icon);
  background: radial-gradient(
    circle,
-    var(--navds-alert-color-error-icon-background) 50%,
+    var(--navds-alert-color-icon-background) 50%,
    0,
    transparent
  );
@@ -104,12 +83,11 @@

 .navds-alert--warning > .navds-alert__icon {
  color: var(--navds-alert-color-warning-icon);
-  background: radial-gradient(
-    circle,
-    var(--navds-alert-color-warning-icon-background) 50%,
-    0,
-    transparent
-  );
+  background: linear-gradient(
+      var(--navds-alert-color-icon-background),
+      var(--navds-alert-color-icon-background)
+    )
+    center / 16% 60% no-repeat;
 }

 .navds-alert--info {
@@ -121,7 +99,7 @@
  color: var(--navds-alert-color-info-icon);
  background: radial-gradient(
    circle,
-    var(--navds-alert-color-info-icon-background) 50%,
+    var(--navds-alert-color-icon-background) 50%,
    0,
    transparent
  );
@@ -136,7 +114,7 @@
  color: var(--navds-alert-color-success-icon);
  background: radial-gradient(
    circle,
-    var(--navds-alert-color-success-icon-background) 50%,
+    var(--navds-alert-color-icon-background) 50%,
    0,
    transparent
  );
@@ -88,7 +88,7 @@
  text-decoration: none;
  border: none;
  background: none;
-  border-radius: 2px;
+  border-radius: var(--navds-border-radius-small);
  min-width: 48px;
  padding: var(--navds-spacing-3);
 }
@@ -27,7 +27,7 @@
 */

 .navds-card__micro {
-  border-radius: 1rem;
+  border-radius: var(--navds-border-radius-full);
  color: var(--navds-card-micro-color-text);
  display: inline-flex;
  padding: var(--navds-spacing-1) var(--navds-spacing-2);
@@ -1,15 +1,21 @@
 :root {
  --navds-confirmation-panel-color-background: var(
-    --navds-semantic-color-feedback-warning-background
+    --navds-global-color-orange-50
  );
  --navds-confirmation-panel-color-background-checked: var(
-    --navds-semantic-color-feedback-success-background
+    --navds-global-color-green-50
+  );
+  --navds-confirmation-panel-color-border: var(
+    --navds-semantic-color-feedback-warning-border
  );
  --navds-confirmation-panel-color-border-checked: var(
-    --navds-semantic-color-feedback-success-background
+    --navds-semantic-color-feedback-success-border
+  );
+  --navds-confirmation-panel-color-border-error: var(
+    --navds-semantic-color-feedback-danger-background
  );
  --navds-confirmation-panel-color-background-error: var(
-    --navds-semantic-color-feedback-danger-background
+    --navds-global-color-red-50
  );
  --navds-confirmation-panel-color-checkbox-background-checked-hover: var(
    --navds-global-color-green-700
@@ -33,7 +39,8 @@
  flex-direction: column;
  gap: var(--navds-spacing-4);
  padding: var(--navds-spacing-4);
-  border-radius: 4px;
+  border-radius: var(--navds-border-radius-medium);
+  border: 1px solid var(--navds-confirmation-panel-color-border);
  background-color: var(--navds-confirmation-panel-color-background);
  transition: background-color linear 100ms;
 }
@@ -57,12 +57,12 @@
  box-shadow: inset 0 0 0 2px var(--navds-radio-checkbox-color-shadow);
  width: 1.5rem;
  height: 1.5rem;
-  border-radius: 4px;
+  border-radius: var(--navds-border-radius-medium);
  flex-shrink: 0;
 }

 .navds-radio__label::before {
-  border-radius: 50%;
+  border-radius: var(--navds-border-radius-full);
 }

 .navds-checkbox__content,
@@ -121,7 +121,7 @@
  background-color: var(--navds-radio-checkbox-color-background);
  width: 0.75rem;
  height: 0.25rem;
-  border-radius: 1px;
+  border-radius: 1px; /* Custom value OK */
  flex-shrink: 0;
 }

@@ -8,10 +8,12 @@
 .navds-search {
  display: flex;
  flex-direction: column;
+  width: 100%;
 }

 .navds-search__wrapper-inner {
  position: relative;
+  width: 100%;
 }

 .navds-search__wrapper {
@@ -22,7 +22,7 @@
 .navds-select__input {
  appearance: none;
  background-color: var(--navds-select-color-background);
-  border-radius: 4px;
+  border-radius: var(--navds-border-radius-medium);
  border: 1px solid var(--navds-select-color-border);
  width: 100%;
  box-sizing: border-box;
@@ -112,7 +112,7 @@
  position: absolute;
  top: var(--navds-spacing-3);
  left: 0;
-  border-radius: 4px;
+  border-radius: var(--navds-border-radius-medium);
  transition: background-color 250ms cubic-bezier(0.4, 0, 0.2, 1);
 }

@@ -155,7 +155,7 @@
 .navds-switch__thumb {
  background-color: var(--navds-switch-color-thumb);
  color: var(--navds-switch-color-thumb-icon);
-  border-radius: 2.5px;
+  border-radius: var(--navds-border-radius-small);
  width: 20px;
  height: 20px;
  position: absolute;
@@ -24,7 +24,7 @@
  appearance: none;
  padding: 0.5rem;
  background-color: var(--navds-text-field-color-background);
-  border-radius: 4px;
+  border-radius: var(--navds-border-radius-medium);
  border: 1px solid var(--navds-text-field-color-border);
  min-height: 48px;
  width: 100%;
@@ -32,7 +32,7 @@
  appearance: none;
  padding: var(--navds-spacing-2);
  background-color: var(--navds-textarea-color-background);
-  border-radius: 4px;
+  border-radius: var(--navds-border-radius-medium);
  border: 1px solid var(--navds-textarea-color-border);
  resize: none;
  width: 100%;
@@ -18,7 +18,7 @@

 .navds-guide-panel__content {
  background-color: var(--navds-guide-panel-color-background);
-  border-radius: 4px;
+  border-radius: var(--navds-border-radius-medium);
  border: 2px solid var(--navds-guide-panel-color-border);
  min-height: 7.25rem;
  padding: 1.5rem;
@@ -58,7 +58,7 @@
 /* Guide illustration frame */
 .navds-guide__illustration {
  background: var(--navds-guide-panel-color-illustration-background);
-  border-radius: 50%;
+  border-radius: var(--navds-border-radius-full);
  overflow: hidden;
 }

@@ -1,22 +1,21 @@
 :root {
-  --navds-help-text-color-button-background: transparent;
-  --navds-help-text-color-icon: var(--navds-semantic-color-interaction-primary);
-  --navds-help-text-color-icon-hover: var(
+  --navds-help-text-color: var(--navds-semantic-color-interaction-primary);
+  --navds-help-text-color-hover: var(
    --navds-semantic-color-component-background-light
  );
-  --navds-help-text-color-icon-background-hover: var(
-    --navds-semantic-color-interaction-primary
-  );
-  --navds-help-text-color-icon-shadow-hover: var(
-    --navds-semantic-color-interaction-primary
-  );
-  --navds-help-text-color-icon-focus: var(
+  --navds-help-text-color-focus: var(
    --navds-semantic-color-component-background-light
  );
-  --navds-help-text-color-icon-background-focus: var(
+  --navds-help-text-color-background-hover: var(
    --navds-semantic-color-interaction-primary
  );
-  --navds-help-text-color-icon-shadow-focus: var(--navds-semantic-color-focus);
+  --navds-help-text-color-background-focus: var(
+    --navds-semantic-color-interaction-primary
+  );
+  --navds-help-text-color-shadow-hover: var(
+    --navds-semantic-color-interaction-primary
+  );
+  --navds-help-text-color-shadow-focus: var(--navds-semantic-color-focus);
  --navds-help-text-color-popover-background: var(
    --navds-semantic-color-feedback-info-background
  );
@@ -27,34 +26,30 @@
  padding: 0;
  border: 0;
  cursor: pointer;
-  background-color: var(--navds-help-text-color-button-background);
-  border-radius: 50%;
+  background-color: transparent;
+  border-radius: var(--navds-border-radius-full);
  display: flex;
  justify-content: center;
  align-items: center;
+  color: var(--navds-help-text-color);
+  font-size: 1.5rem;
+}
+
+.navds-help-text__button:hover {
+  color: var(--navds-help-text-color-hover);
+  background: var(--navds-help-text-color-background-hover);
+  box-shadow: 0 0 0 2px var(--navds-help-text-color-shadow-hover);
 }

 .navds-help-text__button:focus {
  outline: none;
+  color: var(--navds-help-text-color-focus);
+  background: var(--navds-help-text-color-background-focus);
+  box-shadow: 0 0 0 3px var(--navds-help-text-color-shadow-focus);
 }

 .navds-help-text__icon {
-  border-radius: 50%;
-  font-size: 1.5rem;
-  color: var(--navds-help-text-color-icon);
-}
-
-.navds-help-text__button:hover > .navds-help-text__icon {
-  color: var(--navds-help-text-color-icon-hover);
-  background: var(--navds-help-text-color-icon-background-hover);
-  box-shadow: 0 0 0 2px var(--navds-help-text-color-icon-shadow-hover);
-}
-
-.navds-help-text__button:focus > .navds-help-text__icon {
-  outline: none;
-  color: var(--navds-help-text-color-icon-focus);
-  background: var(--navds-help-text-color-icon-background-focus);
-  box-shadow: 0 0 0 3px var(--navds-help-text-color-icon-shadow-focus);
+  border-radius: var(--navds-border-radius-full);
 }

 .navds-help-text__popover > .navds-popover__arrow::before {
@@ -20,9 +20,12 @@
@import "toggle-group.css";
@import "panel.css";
@import "link-panel.css";
+@import "read-more.css";
@import "speech-bubble.css";
@import "step-indicator.css";
+@import "stepper.css";
@import "table.css";
+@import "tabs.css";

 /* Navno spesific packages */
@import "page-header.css";
@@ -11,7 +11,7 @@

 .navds-modal {
  background-color: var(--navds-modal-color-background);
-  border-radius: 4px;
+  border-radius: var(--navds-border-radius-medium);
  display: block;
  position: relative;
  overflow: auto;
@@ -1,6 +1,6 @@
 {
  "name": "@navikt/ds-css",
-  "version": "0.16.1",
+  "version": "0.16.9",
  "private": false,
  "description": "Css for NAV Designsystem components",
  "author": "NAV Designsystem team",
@@ -47,7 +47,7 @@
  text-decoration: none;
  border: none;
  background: none;
-  border-radius: 2px;
+  border-radius: var(--navds-border-radius-small);
  padding: var(--navds-spacing-1) var(--navds-spacing-3);
 }

@@ -87,7 +87,7 @@
  color: var(--navds-semantic-color-link);
  align-items: center;
  gap: var(--navds-spacing-1);
-  border-radius: 2px;
+  border-radius: var(--navds-border-radius-small);
 }

 .navds-pagination__prev-next:focus {
@@ -116,3 +116,7 @@
 .navds-pagination__prev-text {
  padding-right: 0.75rem;
 }
+
+.navds-pagination--invisible {
+  visibility: hidden;
+}
@@ -8,7 +8,7 @@
 .navds-panel {
  background-color: var(--navds-panel-color-background);
  padding: var(--navds-spacing-4);
-  border-radius: 4px;
+  border-radius: var(--navds-border-radius-small);
  border: 1px solid transparent;
 }

@@ -11,7 +11,7 @@
  box-shadow: var(--navds-shadow-popover);
  border: 1px solid;
  border-color: var(--navds-popover-color-border);
-  border-radius: 4px;
+  border-radius: var(--navds-border-radius-medium);
 }

 .navds-popover__content {
@@ -0,0 +1,52 @@
+.navds-read-more {
+  cursor: pointer;
+  margin: 0;
+  padding: 0;
+  text-decoration: underline;
+  border: none;
+  background: none;
+  display: flex;
+  align-items: center;
+  gap: var(--navds-spacing-2);
+  color: var(--navds-semantic-color-link);
+}
+
+.navds-read-more:hover {
+  text-decoration: none;
+}
+
+.navds-read-more:focus {
+  outline: none;
+  color: var(--navds-link-color-text-focus);
+  text-decoration: none;
+  background-color: var(--navds-link-color-background-focus);
+  box-shadow: 0 0 0 2px var(--navds-semantic-color-focus);
+}
+
+.navds-read-more__expand-icon {
+  font-size: 1.25rem;
+}
+
+.navds-read-more--open > .navds-read-more__expand-icon {
+  transform: rotate(180deg);
+}
+
+.navds-read-more + .ReactCollapse--collapse {
+  transition: height 250ms cubic-bezier(0.4, 0, 0.2, 1);
+  padding-top: var(--navds-spacing-2);
+}
+
+.navds-read-more__content {
+  display: flex;
+  align-items: stretch;
+  gap: var(--navds-spacing-2);
+}
+
+.navds-read-more__content::before {
+  content: "";
+  display: block;
+  width: 2px;
+  background-color: var(--navds-semantic-color-border-muted);
+  margin: 0 9px;
+  flex-shrink: 0;
+}
@@ -38,7 +38,7 @@
  align-items: center;
  background: var(--navds-speechbubble-color-illustration-background);
  color: var(--navds-speechbubble-color-illustration);
-  border-radius: 50%;
+  border-radius: var(--navds-border-radius-full);
  display: flex;
  flex-shrink: 0;
  justify-content: center;
@@ -59,7 +59,7 @@
  width: fit-content;
  max-width: 37.5rem;
  background-color: var(--navds-speechbubble-color-background);
-  border-radius: 12px;
+  border-radius: var(--navds-border-radius-xlarge);
  border-bottom-left-radius: 2px;
  display: flex;
  flex-direction: column;
@@ -72,7 +72,7 @@
 }

 .navds-speechbubble--right .navds-speechbubble__bubble {
-  border-radius: 12px;
+  border-radius: var(--navds-border-radius-xlarge);
  border-bottom-right-radius: 2px;
 }

@@ -72,7 +72,7 @@
  width: 2rem;
  height: 2rem;
  margin: 0.5rem;
-  border-radius: 50%;
+  border-radius: var(--navds-border-radius-full);
  align-items: center;
  justify-content: center;
  box-shadow: 0 0 0 1px var(--navds-step-indicator-color-step-number-shadow);
@@ -107,7 +107,7 @@
  left: calc(-50% + 2rem);
  display: block;
  border-top: 2px solid var(--navds-step-indicator-color-step-line);
-  border-radius: 4px;
+  border-radius: var(--navds-border-radius-medium);
  pointer-events: none;
 }

@@ -0,0 +1,99 @@
+.navds-stepper {
+  display: flex;
+  flex-direction: column;
+  padding: 0;
+  margin: 0;
+  list-style: none;
+}
+
+/* Step */
+.navds-stepper__step {
+  position: relative;
+  cursor: pointer;
+  padding: calc(2.25rem / 2) 0;
+  display: flex;
+  background: none;
+  border: none;
+  appearance: none;
+  width: 100%;
+  color: var(--navds-semantic-color-text);
+  text-decoration: none;
+  flex-shrink: 0;
+}
+
+.navds-stepper__step-number {
+  flex-shrink: 0;
+  display: flex;
+  width: 28px;
+  height: 28px;
+  margin: 0;
+  margin-right: var(--navds-spacing-3);
+  border-radius: var(--navds-border-radius-full);
+  align-items: center;
+  justify-content: center;
+  color: var(--navds-semantic-color-interaction-primary);
+  box-shadow: inset 0 0 0 2px var(--navds-semantic-color-interaction-primary);
+  background-color: var(--navds-semantic-color-component-background-light);
+}
+
+/* Step-states: focus, active, hover */
+.navds-stepper__step-wrapper:hover
+  > .navds-stepper__step
+  > .navds-stepper__step-number {
+  background-color: var(
+    --navds-semantic-color-interaction-primary-hover-subtle
+  );
+}
+
+.navds-stepper__step--active > .navds-stepper__step-number,
+.navds-stepper__step-wrapper:hover
+  > .navds-stepper__step--active
+  > .navds-stepper__step-number {
+  color: var(--navds-semantic-color-text-inverted);
+  background-color: var(--navds-semantic-color-interaction-primary-selected);
+  box-shadow: inset 0 0 0 2px
+    var(--navds-semantic-color-interaction-primary-selected);
+}
+
+.navds-stepper__step:focus {
+  box-shadow: var(--navds-shadow-focus);
+  outline: none;
+}
+
+.navds-stepper__step--active {
+  cursor: default;
+}
+
+/* Step label */
+.navds-stepper__step-label {
+  margin-top: 2px;
+  color: var(--navds-semantic-color-interaction-primary);
+  text-align: start;
+}
+
+.navds-stepper__step:hover > .navds-stepper__step-label {
+  text-decoration: underline;
+}
+
+.navds-stepper__step--active > .navds-stepper__step-label {
+  color: black;
+}
+
+.navds-stepper__step--active:hover > .navds-stepper__step-label {
+  text-decoration: none;
+}
+
+/* Step Horizontal Lines */
+
+.navds-stepper__step-wrapper:not(:last-child) > .navds-stepper__step::after {
+  content: "";
+  position: absolute;
+  top: calc(28px + 8px + (2.25rem / 2));
+  left: 13px;
+  height: calc(100% - 2.75rem);
+  display: block;
+  border-left: 2px solid var(--navds-semantic-color-border-muted);
+  border-radius: var(--navds-border-radius-medium);
+  pointer-events: none;
+  z-index: -1;
+}
@@ -0,0 +1,108 @@
+.navds-tabs__tablist-wrapper {
+  box-shadow: inset 0 -1px 0 0 var(--navds-global-color-gray-300);
+  width: 100%;
+  display: flex;
+}
+
+.navds-tabs__tablist {
+  display: flex;
+  max-width: 100%;
+  width: auto;
+  scroll-behavior: smooth;
+  -ms-overflow-style: none; /* for Internet Explorer, Edge */
+  scrollbar-width: none; /* for Firefox */
+  overflow-x: scroll;
+}
+
+.navds-tabs__tablist::-webkit-scrollbar {
+  display: none; /* for Chrome, Safari, and Opera */
+}
+
+.navds-tabs__scroll-button {
+  padding: var(--navds-spacing-3) var(--navds-spacing-4);
+  width: 44px;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+}
+
+.navds-tabs__scroll-button--hidden {
+  visibility: hidden;
+}
+
+.navds-tabs__scroll-button svg {
+  font-size: 1.25rem;
+  flex-shrink: 0;
+}
+
+.navds-tabs--small .navds-tabs__scroll-button {
+  padding: 0.375rem var(--navds-spacing-4);
+  width: 32px;
+}
+
+.navds-tabs__tab {
+  min-height: 48px;
+  padding: var(--navds-spacing-3) var(--navds-spacing-4);
+  display: inline-flex;
+  justify-content: center;
+  align-items: center;
+  background: none;
+  border: none;
+  color: var(--navds-semantic-color-text-muted);
+  cursor: pointer;
+}
+
+.navds-tabs__tab:hover {
+  box-shadow: inset 0 -3px 0 0 var(--navds-global-color-gray-300);
+}
+
+.navds-tabs__tab[aria-selected="true"] {
+  box-shadow: inset 0 -3px 0 0 var(--navds-semantic-color-interaction-primary);
+  color: var(--navds-semantic-color-text);
+}
+
+.navds-tabs__tab:focus {
+  outline: none;
+  box-shadow: inset var(--navds-shadow-focus);
+  color: var(--navds-semantic-color-text);
+}
+
+.navds-tabs__tab-inner {
+  display: flex;
+  align-items: center;
+  gap: var(--navds-spacing-1);
+}
+
+.navds-tabs__tab-icon--top > .navds-tabs__tab-inner {
+  flex-direction: column;
+  gap: 0;
+}
+
+.navds-tabs__tab--small {
+  min-height: 32px;
+  padding: 0.375rem var(--navds-spacing-4);
+}
+
+.navds-tabs__tab-icon--top,
+.navds-tabs__tab--small.navds-tabs__tab-icon--top {
+  padding: var(--navds-spacing-1) var(--navds-spacing-4);
+}
+
+.navds-tabs__tab svg,
+.navds-tabs__tab--small.navds-tabs__tab--icon-only svg,
+.navds-tabs__tab--small.navds-tabs__tab-icon--top svg {
+  font-size: 1.25rem;
+}
+
+.navds-tabs__tab--small svg {
+  font-size: 1rem;
+}
+
+.navds-tabs__tab--icon-only svg,
+.navds-tabs__tab-icon--top svg {
+  font-size: 1.5rem;
+}
+
+.navds-tabs__tabpanel:focus {
+  outline: none;
+}
@@ -32,7 +32,7 @@
 .navds-tag {
  border: 1px solid;
  border-color: var(--navds-tag-color-border);
-  border-radius: 4px;
+  border-radius: var(--navds-border-radius-medium);
  background-color: var(--navds-tag-color-background);
  display: inline-flex;
  align-items: center;
@@ -19,7 +19,7 @@
 }

 .navds-toggle-group {
-  border-radius: 7px;
+  border-radius: 7px; /* Custom value OK */
  background-color: var(--navds-toggle-group-color-background);
  box-shadow: inset 0 0 0 1px var(--navds-toggle-group-color-border);
  padding: calc(var(--navds-spacing-1) + 1px);
@@ -39,7 +39,7 @@
  cursor: pointer;
  background-color: var(--navds-toggle-group-color-background);
  color: var(--navds-toggle-group-color-text);
-  border-radius: 2px;
+  border-radius: var(--navds-border-radius-small);
  min-width: fit-content;
 }

@@ -43,14 +43,14 @@
  },
  {
    "name": "Attachment",
-    "description": "",
-    "created_at": "2020-07-01T10:37:43.111Z",
+    "description": "2px-Original size",
+    "created_at": "2022-02-18T10:41:36.129Z",
    "pageName": "Attachment"
  },
  {
    "name": "AttachmentFilled",
-    "description": "",
-    "created_at": "2021-01-11T13:48:27.872Z",
+    "description": "2px-Original size",
+    "created_at": "2022-02-18T10:41:36.124Z",
    "pageName": "Attachment"
  },
  {
@@ -708,15 +708,15 @@
    "pageName": "Communication"
  },
  {
-    "name": "EmailOpen",
-    "description": "",
-    "created_at": "2020-07-01T10:37:42.632Z",
+    "name": "EmailOpened",
+    "description": "2px-Original size",
+    "created_at": "2022-02-18T10:41:36.018Z",
    "pageName": "Communication"
  },
  {
-    "name": "EmailOpenFilled",
-    "description": "",
-    "created_at": "2021-01-11T13:37:55.419Z",
+    "name": "EmailOpenedFilled",
+    "description": "2px-Original size",
+    "created_at": "2022-02-18T10:41:36.024Z",
    "pageName": "Communication"
  },
  {
@@ -2399,6 +2399,18 @@
    "created_at": "2020-07-01T10:37:42.692Z",
    "pageName": "Arrow"
  },
+  {
+    "name": "UpDown",
+    "description": "",
+    "created_at": "2022-03-16T13:47:53.004Z",
+    "pageName": "Arrow"
+  },
+  {
+    "name": "UpDownFilled",
+    "description": "",
+    "created_at": "2022-03-16T13:47:52.999Z",
+    "pageName": "Arrow"
+  },
  {
    "name": "UpFilled",
    "description": "",
@@ -1,6 +1,6 @@
 {
  "name": "@navikt/ds-icons",
-  "version": "0.8.4",
+  "version": "0.8.6",
  "private": false,
  "description": "NAVs egne ikoner i SVG og React format",
  "repository": {
@@ -29,7 +29,7 @@
    "create-package-json-pointers-to-esm": "node ../../../utilities/scripts/createPackageJsonsWithESMPointers.js",
    "create-icons": "svgr --out-dir src svg",
    "clean": "rimraf src cjs esm",
-    "build": "yarn clean && yarn create-icons && tsc && tsc -p tsconfig.esm.json && yarn create-package-json-pointers-to-esm",
+    "build": "yarn clean && copyfiles util/* src && yarn create-icons && tsc && tsc -p tsconfig.esm.json && yarn create-package-json-pointers-to-esm",
    "update": "ts-node figma/index.ts dotenv/config"
  },
  "dependencies": {
@@ -1,3 +1,3 @@
 <svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
-<path fill-rule="evenodd" clip-rule="evenodd" d="M16.8634 1.00122C18.1639 0.974609 19.5426 1.3819 20.5704 2.35845C21.5981 3.33501 22.0267 4.64511 21.9987 5.88083C21.9709 7.10846 21.4908 8.35534 20.5704 9.22999L11.1693 18.163C10.6021 18.7019 9.81338 18.9683 9.05641 18.9838C8.29093 18.9995 7.45868 18.76 6.83035 18.163C6.20202 17.5659 5.95004 16.7751 5.96653 16.0478C5.98283 15.3285 6.26318 14.579 6.83035 14.0401L13.3388 7.85568C13.7382 7.47618 14.3857 7.47618 14.7851 7.85568C15.1845 8.23518 15.1845 8.85048 14.7851 9.22999L8.27667 15.4144C8.13723 15.5469 8.01819 15.7922 8.01145 16.0896C8.0049 16.3789 8.10622 16.6267 8.27667 16.7887C8.44712 16.9506 8.70788 17.0469 9.01237 17.0407C9.32537 17.0343 9.58355 16.9212 9.72299 16.7887L19.1241 7.85568C19.6168 7.38747 19.9355 6.64474 19.9538 5.83898C19.9719 5.0413 19.6939 4.27422 19.1241 3.73276C18.5542 3.19129 17.7469 2.92716 16.9075 2.94433C16.0595 2.96168 15.2778 3.26454 14.7851 3.73276L5.38403 12.6658C4.6945 13.321 4.13449 14.5364 4.05489 15.8977C3.9765 17.2386 4.37172 18.5754 5.38403 19.5373C7.5157 21.5628 10.484 21.5628 12.6156 19.5373L19.1519 13.3265C19.5513 12.947 20.1988 12.947 20.5982 13.3265C20.9976 13.706 20.9976 14.3213 20.5982 14.7008L14.0619 20.9116C11.1315 23.6961 6.86816 23.6961 3.93772 20.9116C2.41897 19.4685 1.91025 17.5412 2.01264 15.7899C2.11384 14.0591 2.81936 12.3541 3.93772 11.2914L13.3388 2.35845C14.2593 1.4838 15.5715 1.02766 16.8634 1.00122Z" fill="#262626"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M13.377 3.30693C15.0823 1.56435 17.8563 1.56436 19.5616 3.30694C21.2551 5.03744 21.2551 7.83438 19.5616 9.56489L12.6369 16.641C11.424 17.8804 9.44839 17.8804 8.23551 16.641C7.03443 15.4136 7.03443 13.4325 8.23551 12.2052L12.5033 7.84413C12.8895 7.44941 13.5227 7.44256 13.9174 7.82884C14.3121 8.21512 14.319 8.84825 13.9327 9.24297L9.66493 13.604C9.22463 14.054 9.22463 14.7922 9.66493 15.2421C10.0934 15.68 10.779 15.68 11.2075 15.2421L18.1322 8.16605C19.0649 7.21294 19.0649 5.65888 18.1322 4.70578C17.2113 3.76474 15.7273 3.76474 14.8064 4.70577L6.06884 13.6344C4.64372 15.0907 4.64372 17.4606 6.06884 18.9168C7.48216 20.3611 9.76444 20.3611 11.1778 18.9168L11.185 18.9095L11.185 18.9095L20.2926 9.79323C20.6829 9.40252 21.3161 9.40222 21.7068 9.79255C22.0975 10.1829 22.0978 10.8161 21.7074 11.2068L12.6034 20.3196C10.4053 22.5614 6.83586 22.5601 4.63942 20.3157C2.45353 18.082 2.45353 14.4692 4.63942 12.2356L13.377 3.30693Z" fill="#262626"/>
 </svg>
@@ -1,3 +1,3 @@
 <svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
-<path fill-rule="evenodd" clip-rule="evenodd" d="M16.3472 0.00138792C17.7614 -0.0288776 19.2813 0.434034 20.4223 1.56794L19.3387 2.6448L20.4223 1.56794C21.5633 2.70184 22.0291 4.21243 21.9986 5.61786C21.9684 7.01063 21.4486 8.445 20.4223 9.46495L11.0314 18.7978C10.358 19.467 9.43759 19.7854 8.57056 19.8039C7.69079 19.8227 6.71672 19.5352 5.97471 18.7978C5.23271 18.0604 4.94338 17.0923 4.96233 16.218C4.981 15.3563 5.30134 14.4416 5.97472 13.7724L12.4761 7.31122C13.0746 6.71649 14.0448 6.71649 14.6433 7.31122C15.2417 7.90596 15.2417 8.87022 14.6433 9.46495L8.14185 15.9261C8.10938 15.9584 8.03076 16.083 8.02641 16.2836C8.02234 16.4715 8.08594 16.5885 8.14185 16.6441C8.19777 16.6996 8.31553 16.7628 8.50458 16.7588C8.70636 16.7545 8.83176 16.6763 8.86423 16.6441L18.2552 7.31122C18.6406 6.92821 18.9187 6.28392 18.9345 5.55228C18.9501 4.8333 18.71 4.17373 18.2552 3.72167C17.8003 3.26961 17.1366 3.03104 16.4132 3.04652C15.677 3.06227 15.0287 3.33865 14.6433 3.72167L5.25234 13.0545C4.67063 13.6326 4.14756 14.7746 4.07345 16.1004C4.00113 17.3941 4.36759 18.6364 5.25234 19.5157C7.18223 21.4337 9.82386 21.4337 11.7538 19.5157L18.2829 13.0269C18.8814 12.4322 19.8516 12.4322 20.4501 13.0269C21.0485 13.6216 21.0485 14.5859 20.4501 15.1806L13.9209 21.6694C10.7941 24.7769 6.21196 24.7769 3.0852 21.6694C1.44161 20.036 0.9051 17.8683 1.01337 15.9314C1.11986 14.0266 1.86096 12.1174 3.0852 10.9008L12.4761 1.56794C13.5024 0.547983 14.9457 0.0313808 16.3472 0.00138792Z" fill="#262626"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M2 0C0.895431 0 0 0.89543 0 2V22C0 23.1046 0.89543 24 2 24H22C23.1046 24 24 23.1046 24 22V2C24 0.895431 23.1046 0 22 0H2ZM13.377 3.30693C15.0823 1.56435 17.8563 1.56436 19.5616 3.30694C21.2551 5.03744 21.2551 7.83438 19.5616 9.56489L12.6369 16.641C11.424 17.8804 9.44839 17.8804 8.23551 16.641C7.03443 15.4136 7.03443 13.4325 8.23551 12.2052L12.5033 7.84413C12.8895 7.44941 13.5227 7.44256 13.9174 7.82884C14.3121 8.21512 14.319 8.84825 13.9327 9.24297L9.66493 13.604C9.22463 14.054 9.22463 14.7922 9.66493 15.2421C10.0934 15.68 10.779 15.68 11.2075 15.2421L18.1322 8.16605C19.0649 7.21294 19.0649 5.65888 18.1322 4.70578C17.2113 3.76474 15.7273 3.76474 14.8064 4.70577L6.06884 13.6344C4.64372 15.0907 4.64372 17.4606 6.06884 18.9168C7.48216 20.3611 9.76444 20.3611 11.1778 18.9168L11.1845 18.91L11.1845 18.91L13.2429 16.8466C13.2588 16.8283 13.2754 16.8103 13.2929 16.7929L14.792 15.2937L20.2929 9.79289C20.6834 9.40237 21.3166 9.40237 21.7071 9.79289C22.0976 10.1834 22.0976 10.8166 21.7071 11.2071L16.208 16.7063L16.2072 16.707L12.6037 20.3192C10.4057 22.5614 6.83597 22.5603 4.63942 20.3157C2.45353 18.082 2.45353 14.4692 4.63942 12.2356L13.377 3.30693Z" fill="#262626"/>
 </svg>
@@ -1,3 +0,0 @@
-<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
-<path fill-rule="evenodd" clip-rule="evenodd" d="M12 4.23607L2.4102 8.03097L12 13.2254L21.5898 8.03097L12 4.23607ZM0 7.80877V7L12 2L24 7V7.80878C24 7.87303 23.9969 7.93683 23.9909 8H24V19C24 20.6569 22.6569 22 21 22H3C1.34314 22 0 20.6569 0 19V8H0.00913671C0.00308106 7.93683 0 7.87303 0 7.80877ZM2 17.1315L7.83295 13.2428L2 10.0833V17.1315ZM9.82222 14.3204L2.11208 19.4605C2.27866 19.781 2.61376 20 3 20H21C21.3862 20 21.7213 19.781 21.8879 19.4605L14.1778 14.3204L12 15.5L9.82222 14.3204ZM22 10.0833V17.1315L16.1671 13.2428L22 10.0833Z" fill="#262626"/>
-</svg>
@@ -1,3 +0,0 @@
-<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
-<path fill-rule="evenodd" clip-rule="evenodd" d="M12 15.5L24 9V7L12 2L0 7V9L12 15.5ZM15.833 15.4238L23.8477 20.7669C23.5468 21.4909 22.8329 22 22 22H2C1.16715 22 0.453196 21.4909 0.15234 20.767L8.16706 15.4238L12 17.5L15.833 15.4238ZM24 11V18.4648L17.8222 14.3463L24 11ZM0 11L6.17779 14.3463L0 18.4648V11Z" fill="#262626"/>
-</svg>
@@ -0,0 +1,3 @@
+<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M1 8.2L0.518081 7.32378L0 7.60873V8.2H1ZM23 8.2H24V7.60873L23.4819 7.32378L23 8.2ZM12 2.15L12.4819 1.27378L12 1.00873L11.5181 1.27378L12 2.15ZM12 15L11.5211 15.8779L12 16.1391L12.4789 15.8779L12 15ZM22 20H2V22H22V20ZM1.48192 9.07622L12.4819 3.02622L11.5181 1.27378L0.518081 7.32378L1.48192 9.07622ZM11.5181 3.02622L22.5181 9.07622L23.4819 7.32378L12.4819 1.27378L11.5181 3.02622ZM22 8.2V9H24V8.2H22ZM2 9V8.2H0V9H2ZM22 9V20H24V9H22ZM22.5211 8.1221L13.5211 13.0312L14.4789 14.787L23.4789 9.8779L22.5211 8.1221ZM13.5211 13.0312L11.5211 14.1221L12.4789 15.8779L14.4789 14.787L13.5211 13.0312ZM23.5605 19.1718L14.5605 13.0809L13.4395 14.7373L22.4395 20.8282L23.5605 19.1718ZM2 20V9H0V20H2ZM12.4789 14.1221L10.4789 13.0312L9.52115 14.787L11.5211 15.8779L12.4789 14.1221ZM10.4789 13.0312L1.47885 8.1221L0.521148 9.8779L9.52115 14.787L10.4789 13.0312ZM1.56048 20.8282L10.5605 14.7373L9.43952 13.0809L0.439522 19.1718L1.56048 20.8282ZM2 20H2H0C0 21.1046 0.895431 22 2 22V20ZM22 22C23.1046 22 24 21.1046 24 20H22V22Z" fill="#262626"/>
+</svg>
@@ -0,0 +1,3 @@
+<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path fill-rule="evenodd" clip-rule="evenodd" d="M0.210623 7.51518L10.4732 13.0282L10.4789 13.0312L10.4789 13.0312L12 13.8609L13.5211 13.0312L13.5268 13.0281L13.5268 13.0282L23.7894 7.51518L12 1L0.210623 7.51518ZM24 9.67234L15.9314 14.0067L24 19.4557V9.67234ZM23.3783 21.4492L13.9446 15.0784L12.4789 15.8779L12 16.1391L11.5211 15.8779L10.0554 15.0784L0.621651 21.4492C0.980399 21.7905 1.46574 22 2 22H22C22.5343 22 23.0196 21.7905 23.3783 21.4492ZM0 19.4557L8.06862 14.0067L0 9.67234V19.4557Z" fill="#262626"/>
+</svg>
@@ -1,3 +1,3 @@
 <svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
-<path fill-rule="evenodd" clip-rule="evenodd" d="M7.50256 5.46703L7.17181 6.69387C7.06015 7.10802 7 7.54543 7 8C7 10.7614 9.23858 13 12 13C14.7614 13 17 10.7614 17 8C17 7.54543 16.9398 7.10801 16.8282 6.69387L16.4974 5.46702L17.4675 4.64636C17.7964 4.3681 18 3.95882 18 3.5C18 2.67157 17.3284 2 16.5 2C16.0412 2 15.6319 2.20357 15.3536 2.53248L14.533 3.50256L13.3061 3.1718C12.892 3.06015 12.4546 3 12 3C11.5454 3 11.108 3.06015 10.6939 3.17181L9.46703 3.50256L8.64636 2.53248C8.3681 2.20357 7.95882 2 7.5 2C6.67157 2 6 2.67157 6 3.5C6 3.95882 6.20357 4.3681 6.53248 4.64636L7.50256 5.46703ZM19 8C19 9.09191 18.75 10.1254 18.3041 11.0464L19.3117 10.7765C20.9121 10.3476 22.5571 11.2974 22.9859 12.8978C23.4148 14.4982 22.465 16.1432 20.8646 16.572L19.2673 17H19.5C21.433 17 23 18.567 23 20.5C23 22.433 21.433 24 19.5 24H4.5C2.567 24 1 22.433 1 20.5C1 18.567 2.567 17 4.5 17H4.89138L3.29411 16.572C1.69371 16.1432 0.743963 14.4982 1.17279 12.8978C1.60161 11.2974 3.24662 10.3476 4.84702 10.7765L5.67251 10.9976C5.24127 10.089 5 9.07267 5 8C5 7.36803 5.08375 6.75562 5.24075 6.17326C4.48185 5.53124 4 4.57189 4 3.5C4 1.567 5.567 0 7.5 0C8.57189 0 9.53124 0.481847 10.1733 1.24075C10.7556 1.08375 11.368 1 12 1C12.632 1 13.2444 1.08375 13.8267 1.24075C14.4688 0.481845 15.4281 0 16.5 0C18.433 0 20 1.567 20 3.5C20 4.57189 19.5182 5.53124 18.7593 6.17326C18.9163 6.75562 19 7.36803 19 8ZM12 15C10.5061 15 9.26396 16.0939 9.03723 17.5241L8.96058 18.0077C9.51318 18.5435 9.99991 19.3532 9.99991 20.5C9.99991 21.065 9.89085 21.5702 9.73917 22H14.2608C14.1092 21.5702 14.0001 21.065 14.0001 20.5C14.0001 19.3532 14.4868 18.5435 15.0394 18.0077L14.9628 17.5241C14.736 16.0939 13.4939 15 12 15ZM19.5 22H16.4819C16.4454 21.9453 16.4069 21.8839 16.3683 21.8164C16.1761 21.4799 16.0001 21.0262 16.0001 20.5C16.0001 19.9689 16.2159 19.6312 16.4829 19.3953L17.4403 19.1469C17.8086 19.0514 18.1968 19 18.6 19H19.5C20.3284 19 21 19.6716 21 20.5C21 21.3284 20.3284 22 19.5 22ZM7.51806 22C7.55463 21.9453 7.59309 21.8839 7.63167 21.8164C7.82391 21.4799 7.99991 21.0262 7.99991 20.5C7.99991 19.9689 7.7841 19.6312 7.51715 19.3953L6.55975 19.1469C6.19139 19.0514 5.80317 19 5.4 19H4.5C3.67157 19 3 19.6716 3 20.5C3 21.3284 3.67157 22 4.5 22H7.51806ZM3.81175 14.6402L6.70952 15.4166C7.24299 15.5596 7.79133 15.243 7.93427 14.7095C8.07721 14.176 7.76063 13.6277 7.22716 13.4848L4.32939 12.7083C3.79592 12.5654 3.24758 12.8819 3.10464 13.4154C2.9617 13.9489 3.27828 14.4972 3.81175 14.6402ZM17.4492 15.4166L20.347 14.6402C20.8804 14.4972 21.197 13.9489 21.0541 13.4154C20.9111 12.8819 20.3628 12.5654 19.8293 12.7083L16.9316 13.4848C16.3981 13.6277 16.0815 14.176 16.2244 14.7095C16.3674 15.243 16.9157 15.5596 17.4492 15.4166ZM12 10C12.5523 10 13 9.55229 13 9C13 8.44771 12.5523 8 12 8C11.4477 8 11 8.44771 11 9C11 9.55229 11.4477 10 12 10Z" fill="#262626"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M7.50256 5.46703L7.17181 6.69387C7.06015 7.10802 7 7.54543 7 8C7 10.7614 9.23858 13 12 13C14.7614 13 17 10.7614 17 8C17 7.54543 16.9398 7.10801 16.8282 6.69387L16.4974 5.46702L17.4675 4.64636C17.7964 4.3681 18 3.95882 18 3.5C18 2.67157 17.3284 2 16.5 2C16.0412 2 15.6319 2.20357 15.3536 2.53248L14.533 3.50256L13.3061 3.1718C12.892 3.06015 12.4546 3 12 3C11.5454 3 11.108 3.06015 10.6939 3.17181L9.46703 3.50256L8.64636 2.53248C8.3681 2.20357 7.95882 2 7.5 2C6.67157 2 6 2.67157 6 3.5C6 3.95882 6.20357 4.3681 6.53248 4.64636L7.50256 5.46703ZM19 8C19 9.09191 18.75 10.1254 18.3041 11.0464L19.3117 10.7765C20.9121 10.3476 22.5571 11.2974 22.9859 12.8978C23.4148 14.4982 22.465 16.1432 20.8646 16.572L19.2673 17H19.5C21.433 17 23 18.567 23 20.5C23 22.433 21.433 24 19.5 24H4.5C2.567 24 1 22.433 1 20.5C1 18.567 2.567 17 4.5 17H4.89138L3.29411 16.572C1.69371 16.1432 0.743963 14.4982 1.17279 12.8978C1.60161 11.2974 3.24662 10.3476 4.84702 10.7765L5.67251 10.9976C5.24127 10.089 5 9.07267 5 8C5 7.36803 5.08375 6.75562 5.24075 6.17326C4.48185 5.53124 4 4.57189 4 3.5C4 1.567 5.567 0 7.5 0C8.57189 0 9.53124 0.481847 10.1733 1.24075C10.7556 1.08375 11.368 1 12 1C12.632 1 13.2444 1.08375 13.8267 1.24075C14.4688 0.481845 15.4281 0 16.5 0C18.433 0 20 1.567 20 3.5C20 4.57189 19.5182 5.53124 18.7593 6.17326C18.9163 6.75562 19 7.36803 19 8ZM12 15C10.5061 15 9.26396 16.0939 9.03723 17.5241L8.96058 18.0077C9.51318 18.5435 9.99991 19.3532 9.99991 20.5C9.99991 21.065 9.89085 21.5702 9.73917 22H14.2608C14.1092 21.5702 14.0001 21.065 14.0001 20.5C14.0001 19.3532 14.4868 18.5435 15.0394 18.0077L14.9628 17.5241C14.736 16.0939 13.4939 15 12 15ZM19.5 22H16.4819C16.4454 21.9453 16.4069 21.8839 16.3683 21.8164C16.1761 21.4799 16.0001 21.0262 16.0001 20.5C16.0001 19.9689 16.2159 19.6312 16.4829 19.3953L17.4403 19.1469C17.8086 19.0514 18.1968 19 18.6 19H19.5C20.3284 19 21 19.6716 21 20.5C21 21.3284 20.3284 22 19.5 22ZM7.51806 22C7.55463 21.9453 7.59309 21.8839 7.63167 21.8164C7.82391 21.4799 7.99991 21.0262 7.99991 20.5C7.99991 19.9689 7.7841 19.6312 7.51715 19.3953L6.55975 19.1469C6.19139 19.0514 5.80317 19 5.4 19H4.5C3.67157 19 3 19.6716 3 20.5C3 21.3284 3.67157 22 4.5 22H7.51806ZM3.81175 14.6402L6.70952 15.4166C7.24299 15.5596 7.79133 15.243 7.93427 14.7095C8.07721 14.176 7.76063 13.6277 7.22716 13.4848L4.32939 12.7083C3.79592 12.5654 3.24758 12.8819 3.10464 13.4154C2.9617 13.9489 3.27828 14.4972 3.81175 14.6402ZM17.4492 15.4166L20.347 14.6402C20.8804 14.4972 21.197 13.9489 21.0541 13.4154C20.9111 12.8819 20.3628 12.5654 19.8293 12.7083L16.9316 13.4848C16.3981 13.6277 16.0815 14.176 16.2244 14.7095C16.3674 15.243 16.9157 15.5596 17.4492 15.4166ZM12 10C12.5523 10 13 9.55228 13 9C13 8.44771 12.5523 8 12 8C11.4477 8 11 8.44771 11 9C11 9.55228 11.4477 10 12 10Z" fill="#262626"/>
 </svg>
@@ -1,3 +1,3 @@
 <svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
-<path fill-rule="evenodd" clip-rule="evenodd" d="M6.36562 5.9328C5.01344 5.6417 4 4.4392 4 3C4 1.34315 5.34315 0 7 0C8.4392 0 9.6417 1.01344 9.9328 2.36562C10.5773 2.1291 11.2735 2 12 2C12.7265 2 13.4228 2.1291 14.0672 2.36562C14.3583 1.01344 15.5608 0 17 0C18.6569 0 20 1.34315 20 3C20 4.4392 18.9866 5.6417 17.6344 5.9328C17.8709 6.57725 18 7.27355 18 8C18 9.55877 17.4056 10.9787 16.4311 12.0455L18.7614 11.4211C19.8283 11.1352 20.925 11.7684 21.2109 12.8353C21.4967 13.9022 20.8636 14.9989 19.7966 15.2848L16.6389 16.1309C16.8718 16.7083 17 17.3392 17 18V19.2774C17.4083 19.099 17.8593 19 18.3333 19H20.5C21.8807 19 23 20.1193 23 21.5C23 22.8807 21.8807 24 20.5 24H16.6667C16.0642 24 15.5364 23.6803 15.2436 23.2014C14.5478 23.7039 13.6931 24 12.7692 24H11.2308C10.3069 24 9.4522 23.7039 8.7564 23.2014C8.46361 23.6803 7.9358 24 7.33333 24H3.5C2.11929 24 1 22.8807 1 21.5C1 20.1193 2.11929 19 3.5 19H5.66667C6.14074 19 6.59169 19.099 7 19.2774V18C7 17.3976 7.10651 16.8202 7.30173 16.2854L3.5675 15.2848C2.50057 14.9989 1.8674 13.9022 2.15329 12.8353C2.43917 11.7684 3.53585 11.1352 4.60278 11.4211L7.79011 12.2751C6.68509 11.1869 6 9.67345 6 8C6 7.27355 6.1291 6.57725 6.36562 5.9328ZM12 10C12.5523 10 13 9.55229 13 9C13 8.44771 12.5523 8 12 8C11.4477 8 11 8.44771 11 9C11 9.55229 11.4477 10 12 10ZM14 18C14 19.6569 13.1046 21 12 21C10.8954 21 10 19.6569 10 18C10 16.3431 10.8954 15 12 15C13.1046 15 14 16.3431 14 18Z" fill="#262626"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M6.36562 5.9328C5.01344 5.6417 4 4.4392 4 3C4 1.34315 5.34315 0 7 0C8.4392 0 9.6417 1.01344 9.9328 2.36562C10.5773 2.1291 11.2735 2 12 2C12.7265 2 13.4228 2.1291 14.0672 2.36562C14.3583 1.01344 15.5608 0 17 0C18.6569 0 20 1.34315 20 3C20 4.4392 18.9866 5.6417 17.6344 5.9328C17.8709 6.57725 18 7.27355 18 8C18 9.55877 17.4056 10.9787 16.4311 12.0455L18.7614 11.4211C19.8283 11.1352 20.925 11.7684 21.2109 12.8353C21.4967 13.9022 20.8636 14.9989 19.7966 15.2848L16.6389 16.1309C16.8718 16.7083 17 17.3392 17 18V19.2774C17.4083 19.099 17.8593 19 18.3333 19H20.5C21.8807 19 23 20.1193 23 21.5C23 22.8807 21.8807 24 20.5 24H16.6667C16.0642 24 15.5364 23.6803 15.2436 23.2014C14.5478 23.7039 13.6931 24 12.7692 24H11.2308C10.3069 24 9.4522 23.7039 8.7564 23.2014C8.46361 23.6803 7.9358 24 7.33333 24H3.5C2.11929 24 1 22.8807 1 21.5C1 20.1193 2.11929 19 3.5 19H5.66667C6.14074 19 6.59169 19.099 7 19.2774V18C7 17.3976 7.10651 16.8202 7.30173 16.2854L3.5675 15.2848C2.50057 14.9989 1.8674 13.9022 2.15329 12.8353C2.43917 11.7684 3.53585 11.1352 4.60278 11.4211L7.79011 12.2751C6.68509 11.1869 6 9.67345 6 8C6 7.27355 6.1291 6.57725 6.36562 5.9328ZM12 10C12.5523 10 13 9.55228 13 9C13 8.44771 12.5523 8 12 8C11.4477 8 11 8.44771 11 9C11 9.55228 11.4477 10 12 10ZM14 18C14 19.6569 13.1046 21 12 21C10.8954 21 10 19.6569 10 18C10 16.3431 10.8954 15 12 15C13.1046 15 14 16.3431 14 18Z" fill="#262626"/>
 </svg>
@@ -0,0 +1,3 @@
+<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path fill-rule="evenodd" clip-rule="evenodd" d="M11.9988 5.9571L5.99745 1.57383e-06L5.20444e-07 5.95319L1.40897 7.37263L4.99745 3.81063L4.99745 15.0028L6.99745 15.0028L6.99745 3.81064L10.5898 7.37654L11.9988 5.9571ZM12.0012 18.0429L18.0025 24L24 18.0468L22.591 16.6274L19.0025 20.1894L19.0025 8.99724L17.0025 8.99724L17.0025 20.1894L13.4102 16.6235L12.0012 18.0429Z" fill="#262626"/>
+</svg>
@@ -0,0 +1,3 @@
+<svg width="24" height="25" viewBox="0 0 24 25" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path fill-rule="evenodd" clip-rule="evenodd" d="M11.9988 5.9571L5.99746 1.57373e-06L2.42779e-06 5.95319L3.99745 5.9571L3.99745 15.0028L7.99745 15.0028L7.99745 5.9571L11.9988 5.9571ZM12 18.0457L18.0014 24.0028L23.9988 18.0496L20.0014 18.0457L20.0014 9.00001L16.0014 9.00001L16.0014 18.0457L12 18.0457Z" fill="#262626"/>
+</svg>
@@ -1,3 +1,3 @@
 <svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
-<path fill-rule="evenodd" clip-rule="evenodd" d="M12 0C18.6274 0 24 5.37258 24 12C24 18.6274 18.6274 24 12 24C5.37258 24 0 18.6274 0 12C0 5.37258 5.37258 0 12 0ZM12 2C6.47715 2 2 6.47715 2 12C2 17.5228 6.47715 22 12 22C17.5228 22 22 17.5228 22 12C22 6.47715 17.5228 2 12 2ZM12 16C12.8284 16 13.5 16.6716 13.5 17.5C13.5 18.3284 12.8284 19 12 19C11.1716 19 10.5 18.3284 10.5 17.5C10.5 16.6716 11.1716 16 12 16ZM13 5V14H11V5H13Z" fill="#262626"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M12 0C12.3788 0 12.725 0.214002 12.8944 0.552786L23.8944 22.5528C24.0494 22.8628 24.0329 23.2309 23.8507 23.5257C23.6684 23.8205 23.3466 24 23 24H1C0.653423 24 0.331557 23.8205 0.14935 23.5257C-0.0328564 23.2309 -0.0494204 22.8628 0.105574 22.5528L11.1056 0.552786C11.275 0.214002 11.6212 0 12 0ZM21.382 22L12 3.23607L2.61804 22H21.382ZM11 15V8H13V15H11ZM12 20C12.8284 20 13.5 19.3284 13.5 18.5C13.5 17.6716 12.8284 17 12 17C11.1716 17 10.5 17.6716 10.5 18.5C10.5 19.3284 11.1716 20 12 20Z" fill="#262626"/>
 </svg>
@@ -1,3 +1,3 @@
 <svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
-<path fill-rule="evenodd" clip-rule="evenodd" d="M12 0C18.6274 0 24 5.37258 24 12C24 18.6274 18.6274 24 12 24C5.37258 24 0 18.6274 0 12C0 5.37258 5.37258 0 12 0ZM12 16C12.8284 16 13.5 16.6716 13.5 17.5C13.5 18.3284 12.8284 19 12 19C11.1716 19 10.5 18.3284 10.5 17.5C10.5 16.6716 11.1716 16 12 16ZM13 5V14H11V5H13Z" fill="#262626"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M12 0C12.3788 0 12.725 0.214002 12.8944 0.552786L23.8944 22.5528C24.0494 22.8628 24.0329 23.2309 23.8507 23.5257C23.6684 23.8205 23.3466 24 23 24H1C0.653423 24 0.331557 23.8205 0.14935 23.5257C-0.0328564 23.2309 -0.0494204 22.8628 0.105574 22.5528L11.1056 0.552786C11.275 0.214002 11.6212 0 12 0ZM11 15V8H13V15H11ZM13.5 18.5C13.5 19.3284 12.8284 20 12 20C11.1716 20 10.5 19.3284 10.5 18.5C10.5 17.6716 11.1716 17 12 17C12.8284 17 13.5 17.6716 13.5 18.5Z" fill="#262626"/>
 </svg>
@@ -15,13 +15,13 @@ function defaultTemplate(
        type: "ImportSpecifier",
        imported: {
          type: "Identifier",
-          name: "v4",
+          name: "useId",
        },
      },
    ],
    source: {
      type: "StringLiteral",
-      value: "uuid",
+      value: "./util/useId",
    },
  });

@@ -34,12 +34,12 @@ function defaultTemplate(
  return typeScriptTpl.ast`
  ${imports}
  ${interfaces}
-  function ${componentName}(${props}) {
-    const titleId = _titleId ?? (title ?
-      "icon-title-" + v4() : undefined);
+  const ${componentName} = React.forwardRef((${props}) => {
+    let titleId: string | undefined = useId(_titleId);
+    titleId = title ? titleId : undefined;
    return ${jsx};
-  }
-  ${exports}`;
+  });
+  export default ${componentName}`;
 }

 module.exports = defaultTemplate;
@@ -4,5 +4,5 @@
    "outDir": "./cjs",
    "module": "commonjs"
  },
-  "exclude": ["./figma", "./scripts", "**/*.stories.*"]
+  "exclude": ["./figma", "./util", "./scripts", "**/*.stories.*"]
 }
@@ -0,0 +1,22 @@
+import { useLayoutEffect, useState } from "react";
+import { v4 } from "uuid";
+
+const canUseDOM = (): boolean => {
+  return (
+    typeof window !== "undefined" &&
+    typeof window.document !== "undefined" &&
+    typeof window.document.createElement !== "undefined"
+  );
+};
+
+export const useClientLayoutEffect = canUseDOM() ? useLayoutEffect : () => {};
+
+export const useId: (id?: string) => string = (id) => {
+  const [newId, setNewId] = useState<string | undefined>(undefined);
+
+  useClientLayoutEffect(() => {
+    setNewId(v4());
+  }, []);
+
+  return id ?? newId ?? "";
+};
@@ -1,6 +1,6 @@
 {
  "name": "@navikt/ds-react",
-  "version": "0.17.2",
+  "version": "0.17.13",
  "private": false,
  "description": "NAV designsystem react components",
  "author": "NAV Designsystem team",
@@ -35,8 +35,9 @@
  },
  "dependencies": {
    "@material-ui/core": "^4.12.3",
-    "@navikt/ds-icons": "^0.8.4",
+    "@navikt/ds-icons": "^0.8.6",
    "@popperjs/core": "^2.10.1",
+    "@radix-ui/react-tabs": "0.1.5",
    "@radix-ui/react-toggle-group": "0.1.5",
    "classnames": "^2.2.6",
    "react-collapse": "^5.1.0",
@@ -51,6 +52,7 @@
    "@testing-library/user-event": "^13.2.1",
    "@types/faker": "^5.5.8",
    "@types/jest": "^27.0.1",
+    "@types/react-collapse": "^5.0.1",
    "@types/react-modal": "^3.13.1",
    "@types/styled-components": "^5.1.14",
    "copyfiles": "^2.4.1",
@@ -1,11 +1,11 @@
-import React, { forwardRef } from "react";
-import cl from "classnames";
 import {
  ErrorFilled,
-  WarningFilled,
  InformationFilled,
  SuccessFilled,
+  WarningFilled,
 } from "@navikt/ds-icons";
+import cl from "classnames";
+import React, { forwardRef } from "react";
 import { BodyLong } from "..";

 export interface AlertProps extends React.HTMLAttributes<HTMLDivElement> {
@@ -10,7 +10,7 @@ export interface ConfirmationPanelProps extends Partial<CheckboxProps> {
  /**
   * Checkbox label
   */
-  label: string;
+  label: React.ReactNode;
  /**
   * Checked state for checkbox
   */
@@ -19,7 +19,7 @@ export interface SelectProps
  /**
   * Label for select
   */
-  label: string;
+  label: React.ReactNode;
  /**
   * If enabled shows the label and description for screenreaders only
   */
@@ -75,6 +75,7 @@ export interface SearchContextProps {
  disabled?: boolean;
  size: "medium" | "small";
  variant?: "tertiary" | "primary";
+  onSearch?: () => void;
 }

 export const SearchContext = React.createContext<SearchContextProps | null>(
@@ -104,7 +105,7 @@ const Search = forwardRef<HTMLInputElement, SearchProps>((props, ref) => {

  const searchRef = useRef<HTMLInputElement | null>(null);
  const mergedRef = mergeRefs([searchRef, ref]);
-  const [wrapperRef, setWrapperRef] = useState<HTMLFormElement | null>(null);
+  const [wrapperRef, setWrapperRef] = useState<HTMLDivElement | null>(null);

  const [controlledValue, setControlledValue] = useState(value ?? "");

@@ -147,8 +148,7 @@ const Search = forwardRef<HTMLInputElement, SearchProps>((props, ref) => {
  }, [value]);

  return (
-    <form
-      role="search"
+    <div
      ref={setWrapperRef}
      className={cl(
        className,
@@ -159,10 +159,6 @@ const Search = forwardRef<HTMLInputElement, SearchProps>((props, ref) => {
          "navds-search--disabled": !!inputProps.disabled,
        }
      )}
-      onSubmit={(e) => {
-        e.preventDefault();
-        onSearch?.(controlledValue);
-      }}
    >
      <Label
        htmlFor={inputProps.id}
@@ -222,12 +218,13 @@ const Search = forwardRef<HTMLInputElement, SearchProps>((props, ref) => {
            size,
            disabled: inputProps.disabled,
            variant,
+            onSearch: () => onSearch?.(controlledValue),
          }}
        >
          {children ? children : <SearchButton />}
        </SearchContext.Provider>
      </div>
-    </form>
+    </div>
  );
 }) as SearchComponent;

@@ -25,7 +25,7 @@ const SearchButton: SearchButtonType = forwardRef(
      return null;
    }

-    const { size, variant } = context;
+    const { size, variant, onSearch } = context;

    return (
      <Button
@@ -36,7 +36,10 @@ const SearchButton: SearchButtonType = forwardRef(
        variant={variant}
        className={cl("navds-search__button-search", className)}
        disabled={context?.disabled ?? disabled}
-        onClick={(e) => onClick?.(e)}
+        onClick={(e) => {
+          onSearch?.();
+          onClick?.(e);
+        }}
      >
        <Search aria-hidden />
        {children ? children : <span className="navds-sr-only">Søk</span>}
@@ -10,20 +10,23 @@ export default {
 export const All = () => {
  const [value, setValue] = useState("");
  return (
-    <div style={{ maxWidth: 300 }}>
+    <div
+      style={{
+        display: "flex",
+        alignItems: "center",
+        flexDirection: "column",
+        maxWidth: 400,
+      }}
+    >
      <h1>Search</h1>
-      <div>
-        <Search
-          label="Søk alle sider om X og Y"
-          onSearch={console.log}
-        ></Search>
-        <br />
-        <Search
-          label="Søk alle sider om X og Y"
-          onSearch={console.log}
-          variant="primary"
-        ></Search>
-      </div>
+
+      <Search label="Søk alle sider om X og Y" onSearch={console.log}></Search>
+      <h2>Primary search</h2>
+      <Search
+        label="Søk alle sider om X og Y"
+        onSearch={console.log}
+        variant="primary"
+      ></Search>

      <h2>Search small</h2>
      <Search
@@ -1,12 +1,12 @@
 .navds-story-cell {
-  border-radius: 0.25rem;
+  border-radius: var(--navds-border-radius-medium);
  background: white;
  padding: 1rem;
 }

 .navds-story-content-container {
  display: flex;
-  border-radius: 0.25rem;
+  border-radius: var(--navds-border-radius-medium);
  justify-content: center;
  align-items: center;
  margin-bottom: 1.5rem;
@@ -1,6 +1,6 @@
 import { Helptext as HelpTextIcon } from "@navikt/ds-icons";
 import cl from "classnames";
-import React, { forwardRef, useEffect, useRef, useState } from "react";
+import React, { forwardRef, useRef, useState } from "react";
 import mergeRefs from "react-merge-refs";
 import { Popover, PopoverProps } from "..";

@@ -21,53 +21,41 @@ const HelpText = forwardRef<HTMLButtonElement, HelpTextProps>(
      placement = "top",
      strategy = "absolute",
      title = "hjelp",
+      onClick,
      ...rest
    },
    ref
  ) => {
    const buttonRef = useRef<HTMLButtonElement | null>(null);
    const mergedRef = mergeRefs([buttonRef, ref]);
-    const [popoverRef, setPopoverRef] = useState<HTMLDivElement | null>(null);
-    const wrapperRef = useRef<HTMLDivElement | null>(null);
-
    const [open, setOpen] = useState(false);

-    useEffect(() => {
-      open && popoverRef?.focus?.();
-    }, [open, popoverRef]);
-
-    const handleClick = (
-      e: React.MouseEvent<HTMLButtonElement, MouseEvent>
-    ) => {
-      setOpen((x) => !x);
-      rest.onClick && rest.onClick(e);
-    };
    return (
-      <div className="navds-help-text" ref={wrapperRef}>
+      <div className="navds-help-text">
        <button
          {...rest}
          ref={mergedRef}
-          onClick={(e) => handleClick(e)}
+          onClick={(e) => {
+            setOpen((x) => !x);
+            onClick?.(e);
+          }}
          className={cl(className, "navds-help-text__button")}
          type="button"
          aria-expanded={open}
-          aria-haspopup="dialog"
-          title={title}
        >
-          <HelpTextIcon className="navds-help-text__icon" />
-          <span className="navds-sr-only">{title}</span>
+          <HelpTextIcon className="navds-help-text__icon" title={title} />
        </button>
        <Popover
-          ref={setPopoverRef}
          onClose={() => setOpen(false)}
          className="navds-help-text__popover"
          open={open}
-          role="tooltip"
          anchorEl={buttonRef.current}
          placement={placement}
          strategy={strategy}
        >
-          <Popover.Content>{children}</Popover.Content>
+          <Popover.Content className="navds-body-short">
+            {children}
+          </Popover.Content>
        </Popover>
      </div>
    );
@@ -0,0 +1,28 @@
+import React from "react";
+import { TextField, HelpText } from "..";
+
+export default {
+  title: "ds-react/help-text",
+  component: HelpText,
+};
+
+export const All = () => {
+  return (
+    <>
+      <h1>HelpText</h1>
+      <HelpText title="show tooltip">
+        Id ullamco excepteur elit fugiat labore.
+      </HelpText>
+      <TextField
+        label={
+          <div style={{ display: "flex", gap: 8 }}>
+            Text field label
+            <HelpText title="show tooltip">
+              Id ullamco excepteur elit fugiat labore.
+            </HelpText>
+          </div>
+        }
+      ></TextField>
+    </>
+  );
+};
@@ -1,35 +0,0 @@
-import { Meta, Canvas } from "@storybook/addon-docs";
-import { HelpText } from "../../index";
-import { Success } from "@navikt/ds-react";
-
-<Meta title="ds-react/help-text/intro" />
-
-# Hvordan ta i bruk HelpText
-
-```jsx
-<HelpText>Exercitation esse minim esse mollit ex magna.</HelpText>
-```
-
-<Canvas>
-  <div style={{ padding: "5rem" }}>
-    <HelpText>Exercitation esse minim esse mollit ex magna.</HelpText>
-  </div>
-</Canvas>
-
-# Egen title
-
-Husk å endre på "title" slik at skjermlesere får tydeligere informasjon
-
-```jsx
-<HelpText title="vis hjelpetekst angående søknad">
-  Exercitation esse minim esse mollit ex magna.
-</HelpText>
-```
-
-<Canvas>
-  <div style={{ padding: "5rem" }}>
-    <HelpText title="vis hjelpetekst angående søknad">
-      Exercitation esse minim esse mollit ex magna.
-    </HelpText>
-  </div>
-</Canvas>
@@ -1,32 +0,0 @@
-import React from "react";
-import { BodyLong } from "../../typography";
-import { HelpText } from "../index";
-
-export default {
-  title: "ds-react/help-text",
-  component: HelpText,
-};
-
-export const All = () => {
-  return (
-    <>
-      <h1>HelpText</h1>
-      <BodyLong style={{ display: "flex" }}>
-        Quis tempor incididunt sint sit veniam ad dolore cillum ut.
-        <HelpText title="show tooltip">
-          Id ullamco excepteur elit fugiat labore.
-        </HelpText>
-      </BodyLong>
-
-      <BodyLong>
-        Incididunt pariatur laborum dolor sint qui eiusmod exercitation non
-        cupidatat amet.
-      </BodyLong>
-
-      <h2>HelpText defaultOpen</h2>
-      <HelpText title="show tooltip">
-        Id ullamco excepteur elit fugiat labore.
-      </HelpText>
-    </>
-  );
-};
@@ -13,11 +13,14 @@ export * from "./modal";
 export * from "./pagination";
 export * from "./panel";
 export * from "./popover";
+export * from "./read-more";
 export * from "./speech-bubble";
 export * from "./step-indicator";
+export * from "./stepper";
 export * from "./tag";
 export * from "./toggle-group";
 export * from "./table";
+export * from "./tabs";
 export * from "./typography";
 export * from "./util";

@@ -1,4 +1,4 @@
-import React from "react";
+import React, { forwardRef } from "react";
 import cl from "classnames";
 import { Back, Next } from "@navikt/ds-icons";
 import { BodyShort } from "..";
@@ -71,117 +71,141 @@ export const getSteps = ({
  ];
 };

-const Pagination = ({
-  page,
-  onPageChange,
-  count,
-  boundaryCount = 1,
-  siblingCount = 1,
-  className,
-  size = "medium",
-  prevNextTexts = false,
-}: PaginationProps) => {
-  if (page < 1) {
-    console.error("page cannot be less than 1");
-    return null;
-  }
-  if (count < 1) {
-    console.error("count cannot be less than 1");
-    return null;
-  }
-  if (boundaryCount < 0) {
-    console.error("boundaryCount cannot be less than 0");
-    return null;
-  }
-  if (siblingCount < 0) {
-    console.error("siblingCount cannot be less than 0");
-    return null;
-  }
+const Pagination = forwardRef<HTMLElement, PaginationProps>(
+  (
+    {
+      page,
+      onPageChange,
+      count,
+      boundaryCount = 1,
+      siblingCount = 1,
+      className,
+      size = "medium",
+      prevNextTexts = false,
+      ...rest
+    },
+    ref
+  ) => {
+    if (page < 1) {
+      console.error("page cannot be less than 1");
+      return null;
+    }
+    if (count < 1) {
+      console.error("count cannot be less than 1");
+      return null;
+    }
+    if (boundaryCount < 0) {
+      console.error("boundaryCount cannot be less than 0");
+      return null;
+    }
+    if (siblingCount < 0) {
+      console.error("siblingCount cannot be less than 0");
+      return null;
+    }

-  return (
-    <nav
-      className={cl("navds-pagination", `navds-pagination--${size}`, className)}
-    >
-      {prevNextTexts && page !== 1 && (
-        <button
-          className="navds-pagination__prev-next"
-          onClick={() => onPageChange(page - 1)}
-        >
-          <Back
-            className="navds-pagination__prev-next-icon"
-            role="presentation"
-          />
-          <BodyShort size={size} className="navds-pagination__prev-text">
-            Forrige
-          </BodyShort>
-        </button>
-      )}
-      <ul className="navds-pagination__list">
-        {!prevNextTexts && page !== 1 && (
-          <li>
-            <button
-              className="navds-pagination__prev-next"
-              onClick={() => onPageChange(page - 1)}
-            >
-              <Back
-                className="navds-pagination__prev-next-icon"
-                title="Forrige"
-              />
-            </button>
-          </li>
+    return (
+      <nav
+        ref={ref}
+        {...rest}
+        className={cl(
+          "navds-pagination",
+          `navds-pagination--${size}`,
+          className
        )}
-        {getSteps({ page, count, siblingCount, boundaryCount }).map(
-          (step, i) => {
-            const n = Number(step);
-            return isNaN(n) ? (
-              <li className="navds-pagination__ellipsis" key={`${step}${i}`}>
-                <BodyShort size={size}>...</BodyShort>
-              </li>
-            ) : (
-              <li key={step}>
-                <BodyShort
-                  size={size}
-                  as="button"
-                  className="navds-pagination__item"
-                  onClick={() => onPageChange(n)}
-                  aria-current={page === n ? true : undefined}
-                >
-                  {n}
-                </BodyShort>
-              </li>
-            );
-          }
+      >
+        {prevNextTexts && (
+          <button
+            className={cl("navds-pagination__prev-next", {
+              "navds-pagination--invisible": page === 1,
+            })}
+            disabled={page === 1}
+            onClick={() => onPageChange(page - 1)}
+          >
+            <Back
+              className="navds-pagination__prev-next-icon"
+              role="presentation"
+            />
+            <BodyShort size={size} className="navds-pagination__prev-text">
+              Forrige
+            </BodyShort>
+          </button>
        )}
-        {!prevNextTexts && page !== count && (
-          <li>
-            <button
-              className="navds-pagination__prev-next"
-              onClick={() => onPageChange(page + 1)}
-            >
-              <Next
-                className="navds-pagination__prev-next-icon"
-                title="Neste"
-              />
-            </button>
-          </li>
+        <ul className="navds-pagination__list">
+          {!prevNextTexts && (
+            <li>
+              <button
+                className={cl("navds-pagination__prev-next", {
+                  "navds-pagination--invisible": page === 1,
+                })}
+                disabled={page === 1}
+                onClick={() => onPageChange(page - 1)}
+              >
+                <Back
+                  className="navds-pagination__prev-next-icon"
+                  title="Forrige"
+                />
+              </button>
+            </li>
+          )}
+          {getSteps({ page, count, siblingCount, boundaryCount }).map(
+            (step, i) => {
+              const n = Number(step);
+              return isNaN(n) ? (
+                <li className="navds-pagination__ellipsis" key={`${step}${i}`}>
+                  <BodyShort size={size}>...</BodyShort>
+                </li>
+              ) : (
+                <li key={step}>
+                  <BodyShort
+                    size={size}
+                    as="button"
+                    className="navds-pagination__item"
+                    onClick={() => onPageChange(n)}
+                    aria-current={page === n ? true : undefined}
+                  >
+                    {n}
+                  </BodyShort>
+                </li>
+              );
+            }
+          )}
+          {!prevNextTexts && (
+            <li>
+              <button
+                className={cl("navds-pagination__prev-next", {
+                  "navds-pagination--invisible": page === count,
+                })}
+                disabled={page === count}
+                onClick={() => onPageChange(page + 1)}
+              >
+                <Next
+                  className="navds-pagination__prev-next-icon"
+                  title="Neste"
+                />
+              </button>
+            </li>
+          )}
+        </ul>
+        {prevNextTexts && (
+          <button
+            className={cl("navds-pagination__prev-next", {
+              "navds-pagination--invisible": page === count,
+            })}
+            disabled={page === count}
+            onClick={() => onPageChange(page + 1)}
+          >
+            <BodyShort size={size} className="navds-pagination__next-text">
+              Neste
+            </BodyShort>
+            <Next
+              className="navds-pagination__prev-next-icon"
+              role="presentation"
+            />
+          </button>
        )}
-      </ul>
-      {prevNextTexts && page !== count && (
-        <button
-          className="navds-pagination__prev-next"
-          onClick={() => onPageChange(page + 1)}
-        >
-          <BodyShort size={size} className="navds-pagination__next-text">
-            Neste
-          </BodyShort>
-          <Next
-            className="navds-pagination__prev-next-icon"
-            role="presentation"
-          />
-        </button>
-      )}
-    </nav>
-  );
-};
+      </nav>
+    );
+  }
+);

 export default Pagination;
@@ -29,6 +29,7 @@ export const All = (props) => {
    </div>
  );
 };
+
 All.args = {
  page: 1,
  count: 8,
@@ -0,0 +1,90 @@
+import React, { forwardRef, useState } from "react";
+import cl from "classnames";
+import { Collapse, UnmountClosed } from "react-collapse";
+import { Expand } from "@navikt/ds-icons";
+import { BodyLong } from "../typography";
+
+export interface ReadMoreProps
+  extends React.ButtonHTMLAttributes<HTMLButtonElement> {
+  /**
+   * Content inside read more
+   */
+  children: React.ReactNode;
+  /**
+   * Read more header content
+   */
+  header: React.ReactNode;
+  /**
+   * Opens component if 'true', closes if 'false'
+   * Using this props removes automatic control of open-state
+   */
+  open?: boolean;
+  /**
+   * Defaults the accordion to opened state
+   * @default false
+   */
+  defaultOpen?: boolean;
+  /**
+   * Removes content-element from dom when closed
+   * @default false
+   */
+  renderContentWhenClosed?: boolean;
+}
+
+const ReadMore = forwardRef<HTMLButtonElement, ReadMoreProps>(
+  (
+    {
+      className,
+      header,
+      renderContentWhenClosed = false,
+      children,
+      open,
+      defaultOpen = false,
+      onClick,
+      ...rest
+    },
+    ref
+  ) => {
+    const [internalOpen, setInternalOpen] = useState<boolean>(defaultOpen);
+    const CollapseComponent = renderContentWhenClosed
+      ? Collapse
+      : UnmountClosed;
+
+    const isOpened = open ?? internalOpen;
+
+    return (
+      <>
+        <button
+          {...rest}
+          className={cl(
+            "navds-read-more",
+            "navds-body-short",
+            "navds-body-short--small",
+            className,
+            {
+              "navds-read-more--open": isOpened,
+            }
+          )}
+          onClick={(e) => {
+            if (open === undefined) {
+              setInternalOpen((isOpen) => !isOpen);
+            }
+            onClick?.(e);
+          }}
+          aria-expanded={isOpened}
+          ref={ref}
+        >
+          <Expand className="navds-read-more__expand-icon" aria-hidden />
+          <span>{header}</span>
+        </button>
+        <CollapseComponent isOpened={isOpened}>
+          <div className="navds-read-more__content">
+            <BodyLong size="small">{children}</BodyLong>
+          </div>
+        </CollapseComponent>
+      </>
+    );
+  }
+);
+
+export default ReadMore;
@@ -0,0 +1,2 @@
+export { default as ReadMore } from "./ReadMore";
+export * from "./ReadMore";
@@ -0,0 +1,60 @@
+import React, { useState } from "react";
+import { ReadMore } from ".";
+import { Link } from "..";
+
+export default {
+  title: "ds-react/read-more",
+  component: ReadMore,
+};
+
+export const All = () => {
+  const [open, setOpen] = useState(false);
+
+  return (
+    <>
+      <h1>Read more</h1>
+      <h2>Controlled</h2>
+      <ReadMore
+        open={open}
+        onClick={() => setOpen(!open)}
+        header="ReadMore header text"
+      >
+        Magna aliquip aliquip fugiat nostrud nostrud velit pariatur veniam
+        officia laboris voluptate officia pariatur.Lorem est ex anim velit
+        occaecat nisi qui nostrud sit consectetur consectetur officia nostrud
+        ullamco. Est ex duis proident nostrud elit qui laborum anim minim eu
+        eiusmod. Veniam in nostrud sunt tempor velit incididunt sint ex dolor
+        qui velit id eu.{" "}
+        <Link href="example.com">Deserunt magna sunt velit in</Link>. Est
+        exercitation id cillum qui do. Minim adipisicing nostrud commodo
+        proident occaecat aliquip nulla anim proident reprehenderit. Magna ipsum
+        officia veniam cupidatat duis veniam dolore reprehenderit mollit
+        velit.Ut consequat commodo minim occaecat id pariatur. Nisi enim tempor
+        laborum commodo. Tempor sit quis nostrud eu cupidatat sunt commodo
+        reprehenderit irure deserunt eiusmod ipsum. Exercitation quis commodo
+        cillum eiusmod eiusmod. Do laborum qui proident commodo adipisicing
+        eiusmod id.
+      </ReadMore>
+      <h2>Un-controlled</h2>
+      <ReadMore header="ReadMore header text">
+        Magna aliquip aliquip fugiat nostrud nostrud velit pariatur veniam
+        officia laboris voluptate officia pariatur.Lorem est ex anim velit
+        occaecat nisi qui nostrud sit consectetur consectetur officia nostrud
+        ullamco. Est ex duis proident nostrud elit qui laborum anim minim eu
+        eiusmod. Veniam in nostrud sunt tempor velit incididunt sint ex dolor
+        qui velit id eu. Deserunt magna sunt velit in. Est exercitation id
+        cillum qui do. Minim adipisicing nostrud commodo proident occaecat
+        aliquip nulla anim proident reprehenderit. Magna ipsum officia veniam
+        cupidatat duis veniam dolore reprehenderit mollit velit.Ut consequat
+        commodo minim occaecat id pariatur. Nisi enim tempor laborum commodo.
+        Tempor sit quis nostrud eu cupidatat sunt commodo reprehenderit irure
+        deserunt eiusmod ipsum. Exercitation quis commodo cillum eiusmod
+        eiusmod. Do laborum qui proident commodo adipisicing eiusmod id.
+      </ReadMore>
+      <h2>Default open</h2>
+      <ReadMore header="ReadMore header text" defaultOpen>
+        Body
+      </ReadMore>
+    </>
+  );
+};
@@ -28,7 +28,7 @@ Du må nå selv styre state med `activeStep` og `onStepChange`.

 ## responsive

-Bruk `responsive`-prop for å skjule labels med en gang StepIndicator begynner å overlfowe.
+Bruk `responsive`-prop for å skjule labels med en gang StepIndicator begynner å overflowe.

 ```jsx
 <StepIndicator
@@ -0,0 +1,59 @@
+import cl from "classnames";
+import React, { forwardRef, useContext } from "react";
+import { StepperContext } from ".";
+import { Label, OverridableComponent } from "..";
+
+export interface StepperStepProps
+  extends React.AnchorHTMLAttributes<HTMLAnchorElement> {
+  /**
+   * Text content under indicator
+   */
+  children: string;
+  /**
+   * Handled by Stepper
+   */
+  index?: number;
+}
+
+export interface StepperStepType
+  extends OverridableComponent<StepperStepProps, HTMLAnchorElement> {}
+
+const StepComponent: OverridableComponent<
+  StepperStepProps,
+  HTMLAnchorElement
+> = forwardRef(
+  ({ className, children, as: Component = "a", index = 0, ...rest }, ref) => {
+    const context = useContext(StepperContext);
+    if (context === null) {
+      console.error(
+        "<StepIndicator.Step> has to be used within an <StepIndicator>"
+      );
+      return null;
+    }
+    const activeStep = context.activeStep === index;
+
+    return (
+      <Component
+        {...rest}
+        aria-current={Boolean(activeStep)}
+        ref={ref}
+        className={cl("navds-stepper__step", className, {
+          "navds-stepper__step--active": activeStep,
+        })}
+        onClick={(e) => {
+          context.onStepChange(index);
+          rest?.onClick?.(e);
+        }}
+      >
+        <Label className="navds-stepper__step-number" as="span">
+          {activeStep ? `${index + 1}` : index + 1}
+        </Label>
+        <Label className="navds-stepper__step-label">{children}</Label>
+      </Component>
+    );
+  }
+);
+
+const Step = StepComponent as StepperStepType;
+
+export default Step;
@@ -0,0 +1,73 @@
+import React, { createContext, forwardRef } from "react";
+import cl from "classnames";
+import Step, { StepperStepProps, StepperStepType } from "./Step";
+
+export interface StepperProps extends React.HTMLAttributes<HTMLOListElement> {
+  /**
+   * <Stepper.Step /> elements
+   */
+  children: React.ReactNode;
+  /**
+   * Adds classname to wrapper
+   */
+  className?: string;
+  /**
+   * Current active step index
+   */
+  activeStep: number;
+  /**
+   * Callback for clicked step index
+   */
+  onStepChange?: (step: number) => void;
+}
+
+interface StepperComponent
+  extends React.ForwardRefExoticComponent<
+    StepperProps & React.RefAttributes<HTMLOListElement>
+  > {
+  Step: StepperStepType;
+}
+
+interface StepperContextProps {
+  activeStep: number;
+  onStepChange: (step: number) => void;
+  lastIndex: number;
+}
+
+export const StepperContext = createContext<StepperContextProps | null>(null);
+
+const Stepper: StepperComponent = forwardRef<HTMLOListElement, StepperProps>(
+  (
+    { children, className, activeStep, onStepChange = () => {}, ...rest },
+    ref
+  ) => {
+    return (
+      <ol {...rest} ref={ref} className={cl("navds-stepper", className)}>
+        <StepperContext.Provider
+          value={{
+            activeStep,
+            onStepChange,
+            lastIndex: React.Children.count(children),
+          }}
+        >
+          {React.Children.map(children, (step, index) => {
+            return (
+              <li
+                className={cl("navds-stepper__step-wrapper")}
+                key={index + (children?.toString?.() ?? "")}
+              >
+                {React.isValidElement<StepperStepProps>(step)
+                  ? React.cloneElement(step, { ...step.props, index })
+                  : step}
+              </li>
+            );
+          })}
+        </StepperContext.Provider>
+      </ol>
+    );
+  }
+) as StepperComponent;
+
+Stepper.Step = Step;
+
+export default Stepper;
@@ -0,0 +1,2 @@
+export { default as Stepper } from "./Stepper";
+export * from "./Stepper";
@@ -0,0 +1,28 @@
+import React, { useState } from "react";
+import { Stepper } from "..";
+
+export const Example = (props) => {
+  const [activeStep, setActiveStep] = useState(
+    props.initialStep ? props.initialStep : 1
+  );
+
+  const anchorProps = {
+    href: "",
+    onClick: (e) => e.preventDefault(),
+  };
+
+  return (
+    <Stepper {...props} activeStep={activeStep} onStepChange={setActiveStep}>
+      <Stepper.Step {...anchorProps}>Start</Stepper.Step>
+      <Stepper.Step {...anchorProps}>
+        Sunt deserunt qui sit sunt culpa nisi
+      </Stepper.Step>
+      <Stepper.Step {...anchorProps}>
+        Nulla nisi pariatur nulla cupidatat elit.
+      </Stepper.Step>
+      <Stepper.Step {...anchorProps}>
+        Nulla laborum proident consequat laborum elit et dolore ut sunt.
+      </Stepper.Step>
+    </Stepper>
+  );
+};
@@ -0,0 +1,61 @@
+import { Meta, Canvas } from "@storybook/addon-docs";
+import { Stepper } from "..";
+import { Example } from "./Example";
+
+<Meta title="ds-react/stepper/intro" />
+
+# Hvordan ta i bruk Stepper
+
+Stepper er det vertikale søskenet til step-indicator/stegindikator.
+Du må nå selv styre state med `activeStep` og `onStepChange`.
+
+## Eksempel
+
+```jsx
+<Stepper activeStep={activeStep} onStepChange={(x) => setActiveStep(x)}>
+  <Stepper.Step href="" onClick={(e) => e.preventDefault()}>
+    Start
+  </Stepper.Step>
+  <Stepper.Step href="" onClick={(e) => e.preventDefault()}>
+    Sunt deserunt qui sit sunt culpa nisi
+  </Stepper.Step>
+  <Stepper.Step href="" onClick={(e) => e.preventDefault()}>
+    Nulla nisi pariatur nulla cupidatat elit.
+  </Stepper.Step>
+  <Stepper.Step href="" onClick={(e) => e.preventDefault()}>
+    Nulla laborum proident consequat laborum elit et dolore ut sunt.
+  </Stepper.Step>
+</Stepper>
+```
+
+<Canvas>
+  <Example />
+</Canvas>
+
+## Override tags
+
+`Stepper.Step` er implementert med Overridable-component noe som gjør at du kan endre taggen til
+det du vil med `as`-prop. Merk at Step åakkes inn i en `<li>`-wrapper for tilgjengelighet.
+
+```jsx
+<Stepper activeStep={activeStep} onStepChange={(x) => setActiveStep(x)}>
+  {/* <button> er default */}
+  <Stepper.Step
+    href=""
+    onClick={(e) => e.preventDefault()}
+  >{`Dette er default, et <a>-element`}</Stepper.Step>
+  <Stepper.Step as="button">{`Dette er et <button>-element`}</Stepper.Step>
+  <Stepper.Step as="span">{`Dette er et <span>-element`}</Stepper.Step>
+</Stepper>
+```
+
+<Canvas>
+  <Stepper activeStep={1} onStepChange={console.log}>
+    <Stepper.Step
+      href=""
+      onClick={(e) => e.preventDefault()}
+    >{`Dette er default, et <a>-element`}</Stepper.Step>
+    <Stepper.Step as="button">{`Dette er et <button>-element`}</Stepper.Step>
+    <Stepper.Step as="span">{`Dette er et <span>-element`}</Stepper.Step>
+  </Stepper>
+</Canvas>
@@ -0,0 +1,54 @@
+import { Meta } from "@storybook/react/types-6-0";
+import React, { useState } from "react";
+import Stepper from "../Stepper";
+import { BodyLong } from "../../typography";
+
+export default {
+  title: "ds-react/stepper",
+  component: Stepper,
+} as Meta;
+
+export const All = () => {
+  const storyTexts = [
+    "Minimize backwards overflow agile. Horsehead offer commitment to the cause nor copy and paste from stack overflow problem territories, innovation is hot right now for can you slack it to me?. High touch client table the discussion , and get buy-in so manage expectations loop back, please advise soonest. We need a paradigm shift dogpile that, and i need to pee and then go to another meeting for let's prioritize the low-hanging fruit.",
+    "Customer centric sorry i didn't get your email proceduralize, and first-order optimal strategies. I dont care if you got some copy, why you dont use officeipsumcom or something like that ? wheelhouse. Viral engagement new economy, this proposal is a win-win situation which will cause a stellar paradigm shift, and produce a multi-fold increase in deliverables Bob called an all-hands this afternoon. Fire up your browser touch base innovation is hot right now so this medium needs to be more dynamic.",
+    "Touch base define the underlying principles that drive decisions and strategy for your design language. I have zero cycles for this. Cadence social currency, for low engagement execute . Deliverables rehydrate the team or let's circle back to that those options are already baked in with this model teams were able to drive adoption and awareness we need to start advertising on social media circle back. Through the lens of face time.",
+    "Take five, punch the tree, and come back in here with a clear head those options are already baked in with this model ultimate measure of success and we need to crystallize a plan yet open door policy who's responsible for the ask for this request? what do you feel you would bring to the table if you were hired for this position. Wiggle room guerrilla marketing shelfware. Code feature creep can we parallel path lose client to 10:00 meeting hire the best manage expectations root-and-branch review.",
+    "Curate downselect tread it daily cc me on that due diligence, or close the loop. All hands on deck my supervisor didn't like the latest revision you gave me can you switch back to the first revision? ping me or game-plan, yet make it a priority, on this journey win-win. Our competitors are jumping the shark we need to build it so that it scales post launch future-proof can we align on lunch orders. Deliverables message the initiative.",
+    "Out of scope poop, so pre launch. I just wanted to give you a heads-up wiggle room cc me on that I have been doing some research this morning and we need to better, nor dog and pony show prioritize these line items so UX. Big data upstream selling circle back, in an ideal world. Get all your ducks in a row land it in region so code so one-sheet. Action item we need to think big start small and scale fast to energize our clients. Cta due diligence, for this vendor is incompetent nor forcing function and circle back and low engagement.",
+    "Move the needle a loss a day will keep you focus yet can you put it into a banner that is not alarming, but eye catching and not too giant or strategic fit, nor it is all exactly as i said, but i don't like it or streamline. We've bootstrapped the model. This proposal is a win-win situation which will cause a stellar paradigm shift, and produce a multi-fold increase in deliverables the horse is out of the barn usabiltiy, for going forward but going forward.",
+  ];
+  const [activeStep, setActiveStep] = useState(1);
+
+  const anchorProps = {
+    href: "",
+    onClick: (e) => e.preventDefault(),
+  };
+
+  return (
+    <div style={{ display: "flex", gap: "10rem" }}>
+      <div>
+        <h2 id="stepper-heading">Stepper</h2>
+        <Stepper
+          aria-labelledby="stepper-heading"
+          activeStep={activeStep}
+          onStepChange={setActiveStep}
+        >
+          <Stepper.Step {...anchorProps}>Start søknad</Stepper.Step>
+          <Stepper.Step {...anchorProps}>Personopplysninger</Stepper.Step>
+          <Stepper.Step {...anchorProps}>Saksopplysninger</Stepper.Step>
+          <Stepper.Step {...anchorProps}>
+            Søknadstekst for en veldig spesifikk prosess i NAV som jeg må skrive
+            om her i denne labelen
+          </Stepper.Step>
+          <Stepper.Step {...anchorProps}>Vedlegg</Stepper.Step>
+          <Stepper.Step {...anchorProps}>Oppsummering</Stepper.Step>
+          <Stepper.Step {...anchorProps}>Innsending</Stepper.Step>
+        </Stepper>
+      </div>
+      <BodyLong style={{ marginTop: "5rem" }}>
+        {storyTexts[activeStep]}
+      </BodyLong>
+    </div>
+  );
+};
@@ -1,5 +1,5 @@
 import React, { forwardRef, useContext } from "react";
-import { Down, Up } from "@navikt/ds-icons";
+import { Down, Up, UpDown } from "@navikt/ds-icons";
 import { TableContext } from "..";
 import HeaderCell, { HeaderCellProps } from "./HeaderCell";

@@ -52,11 +52,14 @@ const ColumnHeader: ColumnHeaderType = forwardRef(
            }
          >
            {children}
-            {context?.sort?.orderBy === sortKey &&
-            context?.sort?.direction === "descending" ? (
-              <Down aria-label="sorter synkende" />
+            {context?.sort?.orderBy === sortKey ? (
+              context?.sort?.direction === "descending" ? (
+                <Down aria-hidden />
+              ) : (
+                <Up aria-hidden />
+              )
            ) : (
-              <Up aria-label="sorter stigende" />
+              <UpDown aria-hidden />
            )}
          </button>
        ) : (
@@ -0,0 +1,79 @@
+import * as RadixTabs from "@radix-ui/react-tabs";
+import cl from "classnames";
+import React, { forwardRef, useContext } from "react";
+import { Label, OverridableComponent } from "..";
+import { TabsContext } from "./Tabs";
+
+export interface TabProps
+  extends Omit<React.HTMLAttributes<HTMLButtonElement>, "children"> {
+  /**
+   * Content
+   */
+  label?: React.ReactNode;
+  /**
+   * Icon
+   */
+  icon?: React.ReactNode;
+  /**
+   * Value for state-handling
+   */
+  value: string;
+  /**
+   * Icon position
+   * @default "left"
+   */
+  iconPosition?: "left" | "top";
+}
+
+export type TabType = OverridableComponent<TabProps, HTMLButtonElement>;
+
+const Tab: TabType = forwardRef(
+  (
+    {
+      className,
+      as: Component = "button",
+      label,
+      icon,
+      iconPosition,
+      value,
+      ...rest
+    },
+    ref
+  ) => {
+    const context = useContext(TabsContext);
+
+    if (!label && !icon) {
+      console.error("<Tabs.Tab/> needs label/icon");
+      return null;
+    }
+
+    return (
+      <RadixTabs.Trigger value={value} asChild>
+        <Component
+          ref={ref}
+          className={cl(
+            "navds-tabs__tab",
+            `navds-tabs__tab--${context?.size ?? "medium"}`,
+            `navds-tabs__tab-icon--${iconPosition}`,
+            className,
+            {
+              "navds-tabs__tab--icon-only": icon && !label,
+            }
+          )}
+          {...rest}
+        >
+          <Label
+            as="span"
+            className="navds-tabs__tab-inner"
+            size={context?.size}
+          >
+            {icon}
+            {label}
+          </Label>
+        </Component>
+      </RadixTabs.Trigger>
+    );
+  }
+);
+
+export default Tab;
@@ -0,0 +1,127 @@
+import { debounce } from "@material-ui/core";
+import { Back, Next } from "@navikt/ds-icons";
+import { TabsList } from "@radix-ui/react-tabs";
+import cl from "classnames";
+import React, { forwardRef, useEffect, useMemo, useRef, useState } from "react";
+import mergeRefs from "react-merge-refs";
+
+export interface ListProps extends React.HTMLAttributes<HTMLDivElement> {
+  /**
+   * Tab elements
+   */
+  children: React.ReactNode;
+  /**
+   * Loops back to start when navigating past last item
+   */
+  loop?: boolean;
+}
+
+export type ListType = React.ForwardRefExoticComponent<
+  ListProps & React.RefAttributes<HTMLDivElement>
+>;
+
+const List = forwardRef<HTMLDivElement, ListProps>(
+  ({ className, ...rest }, ref) => {
+    const listRef = useRef<HTMLDivElement | null>(null);
+    const mergedRef = mergeRefs([listRef, ref]);
+    const [displayScroll, setDisplayScroll] = useState({
+      start: false,
+      end: false,
+    });
+
+    const updateScrollButtonState = useMemo(
+      () =>
+        debounce(() => {
+          if (!listRef?.current) return;
+          const { scrollWidth, clientWidth } = listRef?.current;
+          let showStartScroll;
+          let showEndScroll;
+
+          const scrollLeft = listRef?.current?.scrollLeft;
+          // use 1 for the potential rounding error with browser zooms.
+          showStartScroll = scrollLeft > 1;
+          showEndScroll = scrollLeft < scrollWidth - clientWidth - 1;
+
+          setDisplayScroll((displayScroll) =>
+            showStartScroll === displayScroll.start &&
+            showEndScroll === displayScroll.end
+              ? displayScroll
+              : { start: showStartScroll, end: showEndScroll }
+          );
+        }),
+      []
+    );
+
+    useEffect(() => {
+      const handleResize = () => updateScrollButtonState();
+      const win = listRef.current?.ownerDocument ?? document ?? window;
+      win.addEventListener("resize", handleResize);
+
+      let resizeObserver;
+
+      if (typeof ResizeObserver !== "undefined") {
+        resizeObserver = new ResizeObserver(handleResize);
+        resizeObserver.observe(listRef.current);
+      }
+
+      return () => {
+        win.removeEventListener("resize", handleResize);
+        if (resizeObserver) {
+          resizeObserver.disconnect();
+        }
+      };
+    }, [updateScrollButtonState]);
+
+    useEffect(() => {
+      updateScrollButtonState();
+    });
+
+    useEffect(() => {
+      return () => {
+        updateScrollButtonState.clear();
+      };
+    }, [updateScrollButtonState]);
+
+    const ScrollButton = ({
+      dir,
+      hidden,
+    }: {
+      dir: 1 | -1;
+      hidden: boolean;
+    }) => (
+      <div
+        className={cl("navds-tabs__scroll-button", {
+          "navds-tabs__scroll-button--hidden": hidden,
+        })}
+        onClick={() => {
+          if (!listRef.current) return;
+          listRef.current.scrollLeft &&= listRef.current.scrollLeft + dir * 100;
+        }}
+      >
+        {dir === -1 ? (
+          <Back title="scroll tilbake" />
+        ) : (
+          <Next title="scroll neste" />
+        )}
+      </div>
+    );
+
+    const showSteppers = displayScroll.end || displayScroll.start;
+    return (
+      <div className="navds-tabs__tablist-wrapper">
+        {showSteppers && (
+          <ScrollButton dir={-1} hidden={!displayScroll.start} />
+        )}
+        <TabsList
+          {...rest}
+          ref={mergedRef}
+          onScroll={updateScrollButtonState}
+          className={cl("navds-tabs__tablist", className)}
+        />
+        {showSteppers && <ScrollButton dir={1} hidden={!displayScroll.end} />}
+      </div>
+    );
+  }
+) as ListType;
+
+export default List;
@@ -0,0 +1,30 @@
+import { TabsContent } from "@radix-ui/react-tabs";
+import cl from "classnames";
+import React, { forwardRef } from "react";
+
+export interface PanelProps extends React.HTMLAttributes<HTMLDivElement> {
+  /**
+   * Tab panel
+   */
+  children: React.ReactNode;
+  /**
+   * Value for state-handling
+   */
+  value: string;
+}
+
+export type PanelType = React.ForwardRefExoticComponent<
+  PanelProps & React.RefAttributes<HTMLDivElement>
+>;
+
+const Panel = forwardRef<HTMLDivElement, PanelProps>(
+  ({ className, ...rest }, ref) => (
+    <TabsContent
+      {...rest}
+      ref={ref}
+      className={cl("navds-tabs__tabpanel", className)}
+    />
+  )
+) as PanelType;
+
+export default Panel;
@@ -0,0 +1,188 @@
+import { Cup, Dishwasher, Freezer } from "@navikt/ds-icons";
+import { Meta } from "@storybook/react/types-6-0";
+import React, { useState } from "react";
+import { Tabs } from ".";
+import { Link } from "../link";
+
+export default {
+  title: "ds-react/tabs",
+  component: Tabs,
+} as Meta;
+
+export const UUDemo = () => (
+  <Tabs defaultValue="skap" lang="no">
+    <Tabs.List>
+      <Tabs.Tab value="skap" label="Skap" icon={<Cup aria-hidden />} />
+      <Tabs.Tab
+        value="oppvaskmaskin"
+        label="Oppvaskmaskin"
+        icon={<Dishwasher aria-hidden />}
+      />
+      <Tabs.Tab value="fryser" icon={<Freezer aria-hidden />} label="Fryser" />
+    </Tabs.List>
+    <Tabs.Panel
+      value="skap"
+      style={{ background: "var(--navds-global-color-gray-50)", height: 300 }}
+    >
+      Innholdspanel for skap med lenke <Link href="#">Dette er en lenke</Link>
+    </Tabs.Panel>
+    <Tabs.Panel
+      value="oppvaskmaskin"
+      style={{ background: "var(--navds-global-color-green-50)", height: 300 }}
+    >
+      Innholdspanel for oppvaskmaskin med lenke{" "}
+      <Link href="#">Dette er en lenke</Link>
+    </Tabs.Panel>
+    <Tabs.Panel
+      value="fryser"
+      style={{ background: "var(--navds-global-color-red-50)", height: 300 }}
+    >
+      Innholdspanel for fryser med lenke <Link href="#">Dette er en lenke</Link>
+    </Tabs.Panel>
+  </Tabs>
+);
+
+const Panel = () => {
+  return (
+    <>
+      <Tabs.Panel
+        value="test1"
+        style={{ background: "var(--navds-global-color-gray-50)", height: 100 }}
+      >
+        Innholdspanel for Skap-tab
+      </Tabs.Panel>
+      <Tabs.Panel
+        value="test2"
+        style={{
+          background: "var(--navds-global-color-green-50)",
+          height: 100,
+        }}
+      >
+        Innholdspanel for Oppvaskmaskin-tab
+      </Tabs.Panel>
+      <Tabs.Panel
+        value="test3"
+        style={{ background: "var(--navds-global-color-red-50)", height: 100 }}
+      >
+        Innholdspanel for Fryser-tab
+      </Tabs.Panel>
+    </>
+  );
+};
+
+export const All = () => {
+  const [activeValue, setActiveValue] = useState("test1");
+
+  return (
+    <div>
+      <h2>Tabs</h2>
+      <Tabs defaultValue="test2">
+        <Tabs.List>
+          <Tabs.Tab value="test1" icon={<Cup />} label="Skap" />
+          <Tabs.Tab value="test2" label="Oppvaskmaskin" icon={<Dishwasher />} />
+          <Tabs.Tab value="test3" icon={<Freezer />} label="Fryser" />
+        </Tabs.List>
+        <Panel />
+      </Tabs>
+
+      <h2>Controlled</h2>
+      <Tabs value={activeValue} onChange={setActiveValue}>
+        <Tabs.List>
+          <Tabs.Tab value="test1" icon={<Cup />} label="Skap" />
+          <Tabs.Tab value="test2" label="Oppvaskmaskin" icon={<Dishwasher />} />
+          <Tabs.Tab value="test3" icon={<Freezer />} label="Fryser" />
+        </Tabs.List>
+        <Panel />
+      </Tabs>
+
+      <h2>selectionFollowsFocus</h2>
+      <Tabs defaultValue="test2" selectionFollowsFocus>
+        <Tabs.List>
+          <Tabs.Tab value="test1" icon={<Cup />} label="Skap" />
+          <Tabs.Tab value="test2" label="Oppvaskmaskin" icon={<Dishwasher />} />
+          <Tabs.Tab value="test3" icon={<Freezer />} label="Fryser" />
+        </Tabs.List>
+        <Panel />
+      </Tabs>
+
+      <h2>Tabs iconPosition="top"</h2>
+      <Tabs defaultValue="test2">
+        <Tabs.List>
+          <Tabs.Tab
+            value="test1"
+            icon={<Cup />}
+            label="Skap"
+            iconPosition="top"
+          />
+          <Tabs.Tab
+            value="test2"
+            label="Oppvaskmaskin"
+            icon={<Dishwasher />}
+            iconPosition="top"
+          />
+          <Tabs.Tab
+            value="test3"
+            icon={<Freezer />}
+            label="Fryser"
+            iconPosition="top"
+          />
+        </Tabs.List>
+        <Panel />
+      </Tabs>
+
+      <h2>Tabs small</h2>
+      <Tabs defaultValue="test2" size="small">
+        <Tabs.List>
+          <Tabs.Tab value="test1" icon={<Cup />} label="Skap" />
+          <Tabs.Tab value="test2" label="Oppvaskmaskin" icon={<Dishwasher />} />
+          <Tabs.Tab value="test3" icon={<Freezer />} label="Fryser" />
+        </Tabs.List>
+        <Panel />
+      </Tabs>
+      <br />
+      <Tabs defaultValue="test2" size="small">
+        <Tabs.List>
+          <Tabs.Tab
+            value="test1"
+            icon={<Cup />}
+            label="Skap"
+            iconPosition="top"
+          />
+
+          <Tabs.Tab
+            value="test2"
+            label="Oppvaskmaskin"
+            icon={<Dishwasher />}
+            iconPosition="top"
+          />
+          <Tabs.Tab
+            value="test3"
+            icon={<Freezer />}
+            label="Fryser"
+            iconPosition="top"
+          />
+        </Tabs.List>
+        <Panel />
+      </Tabs>
+
+      <h2>Tabs Icon-only</h2>
+      <Tabs defaultValue="test2">
+        <Tabs.List>
+          <Tabs.Tab value="test1" icon={<Cup />} />
+          <Tabs.Tab value="test2" icon={<Dishwasher />} />
+          <Tabs.Tab value="test3" icon={<Freezer />} />
+        </Tabs.List>
+        <Panel />
+      </Tabs>
+      <br />
+      <Tabs defaultValue="test2" size="small">
+        <Tabs.List>
+          <Tabs.Tab value="test1" icon={<Cup />} />
+          <Tabs.Tab value="test2" icon={<Dishwasher />} />
+          <Tabs.Tab value="test3" icon={<Freezer />} />
+        </Tabs.List>
+        <Panel />
+      </Tabs>
+    </div>
+  );
+};
@@ -0,0 +1,89 @@
+import cl from "classnames";
+import React, { createContext, forwardRef, HTMLAttributes } from "react";
+import * as RadixTabs from "@radix-ui/react-tabs";
+import Tab, { TabType } from "./Tab";
+import List, { ListType } from "./TabList";
+import Panel, { PanelType } from "./TabPanel";
+
+export interface TabsProps
+  extends Omit<HTMLAttributes<HTMLDivElement>, "onChange" | "dir"> {
+  /**
+   * Tabs elements
+   */
+  children: React.ReactNode;
+  /**
+   * Changes padding and font-size
+   * @default "medium"
+   */
+  size?: "medium" | "small";
+  /**
+   * onChange
+   */
+  onChange?: (value: string) => void;
+  /**
+   * Controlled selected value
+   */
+  value?: string;
+  /**
+   * If not controlled, a default-value needs to be set
+   */
+  defaultValue?: string;
+  /**
+   * Automatically activates tab on focus/navigation
+   * @default false
+   */
+  selectionFollowsFocus?: boolean;
+}
+
+interface TabsComponent
+  extends React.ForwardRefExoticComponent<
+    TabsProps & React.RefAttributes<HTMLDivElement>
+  > {
+  Tab: TabType;
+  List: ListType;
+  Panel: PanelType;
+}
+
+interface TabsContextProps {
+  size: "medium" | "small";
+}
+
+export const TabsContext = createContext<TabsContextProps | null>(null);
+
+const Tabs = forwardRef<HTMLDivElement, TabsProps>(
+  (
+    {
+      className,
+      children,
+      onChange,
+      size = "medium",
+      selectionFollowsFocus = false,
+      ...rest
+    },
+    ref
+  ) => {
+    return (
+      <RadixTabs.Root
+        {...rest}
+        ref={ref}
+        className={cl("navds-tabs", className, `navds-tabs--${size}`)}
+        activationMode={selectionFollowsFocus ? "automatic" : "manual"}
+        onValueChange={onChange}
+      >
+        <TabsContext.Provider
+          value={{
+            size,
+          }}
+        >
+          {children}
+        </TabsContext.Provider>
+      </RadixTabs.Root>
+    );
+  }
+) as TabsComponent;
+
+Tabs.Tab = Tab;
+Tabs.List = List;
+Tabs.Panel = Panel;
+
+export default Tabs;
@@ -0,0 +1,2 @@
+export { default as Tabs, TabsProps } from "./Tabs";
+export { TabProps } from "./Tab";
@@ -1,6 +1,6 @@
 {
  "name": "@navikt/ds-react-internal",
-  "version": "0.12.2",
+  "version": "0.12.13",
  "private": false,
  "description": "NAV internal designsystem react components",
  "author": "NAV Designsystem team",
@@ -33,8 +33,8 @@
    "watch": "tsc --watch -p tsconfig.esm.json"
  },
  "dependencies": {
-    "@navikt/ds-icons": "^0.8.4",
-    "@navikt/ds-react": "^0.17.2",
+    "@navikt/ds-icons": "^0.8.6",
+    "@navikt/ds-react": "^0.17.13",
    "@popperjs/core": "^2.10.1",
    "classnames": "^2.3.1",
    "copy-to-clipboard": "^3.3.1",
@@ -2671,6 +2671,19 @@
    "@babel/runtime" "^7.13.10"
    "@radix-ui/react-compose-refs" "0.1.0"

+"@radix-ui/react-tabs@0.1.5":
+  version "0.1.5"
+  resolved "https://registry.yarnpkg.com/@radix-ui/react-tabs/-/react-tabs-0.1.5.tgz#ddcf860cc32e186d76477ae767dbb216d1944252"
+  integrity sha512-ieVQS1TFr0dX1XA8B+CsSFKOE7kcgEaNWWEfItxj9D1GZjn1o3WqPkW+FhQWDAWZLSKCH2PezYF3MNyO41lgJg==
+  dependencies:
+    "@babel/runtime" "^7.13.10"
+    "@radix-ui/primitive" "0.1.0"
+    "@radix-ui/react-context" "0.1.1"
+    "@radix-ui/react-id" "0.1.5"
+    "@radix-ui/react-primitive" "0.1.4"
+    "@radix-ui/react-roving-focus" "0.1.5"
+    "@radix-ui/react-use-controllable-state" "0.1.0"
+
 "@radix-ui/react-toggle-group@0.1.5":
  version "0.1.5"
  resolved "https://registry.yarnpkg.com/@radix-ui/react-toggle-group/-/react-toggle-group-0.1.5.tgz#9e4d65e22c4fc0ba3a42fbc8d5496c430e5e9852"
@@ -4185,6 +4198,13 @@
  resolved "https://registry.yarnpkg.com/@types/qs/-/qs-6.9.7.tgz#63bb7d067db107cc1e457c303bc25d511febf6cb"
  integrity sha512-FGa1F62FT09qcrueBA6qYTrJPVDzah9a+493+o2PCXsesWHIn27G98TsSMs3WPNbZIEj4+VJf6saSFpvD+3Zsw==

+"@types/react-collapse@^5.0.1":
+  version "5.0.1"
+  resolved "https://registry.yarnpkg.com/@types/react-collapse/-/react-collapse-5.0.1.tgz#078ea1ad15e00ba2063f2e4d8d6760c9375a2023"
+  integrity sha512-Iq3OrqvzCIP0DmAawU4T2VKH6XAplbjo/D7Qk14mcfQ92plU+OrA2SF10r2XrcFg1Wvya/5f8w1vS29RVpdoLQ==
+  dependencies:
+    "@types/react" "*"
+
 "@types/react-dom@*":
  version "17.0.13"
  resolved "https://registry.yarnpkg.com/@types/react-dom/-/react-dom-17.0.13.tgz#a3323b974ee4280070982b3112351bb1952a7809"
Author	SHA1	Message	Date
github-actions[bot]	9e1b0ab1d1	Lerna versionbump [ci skip] - @navikt/ds-css@0.16.9 - @navikt/ds-react@0.17.13 - @navikt/ds-react-internal@0.12.13	2022-03-24 12:38:43 +00:00
Ken Andreas Nordahl larseirikhansen	9c4d41e4c8	[FIX] Tabs komponent (#1451 ) Co-authored-by: Andreas Nordahl <andnorda@gmail.com> Co-authored-by: larseirikhansen <71271458+larseirikhansen@users.noreply.github.com>	2022-03-24 13:29:52 +01:00
larseirikhansen Ken Ken github-actions[bot]Andreas Nordahl	16e141a624	[NEW] New/stepper (#1429 ) * satt opp stepper react * satt opp stepper css * oppdatert react-kode * førsteutkast styling * ♿ aria-label added to icons * Stepper spacing and last-child focus * add aria-labelledby * add aria-labelledby to sb * fix spelling mistake * Remove 'finished' step api-option * refactor Stepper-children jsx * create Stepper example for sb * WIP: Stepper mdx with practical props examples * intro mdx disabled state * ds intro overridable tags example * add flex gap and fix last-child margin * step-line is now pseudo-element * cleanup css * last child no margin-bottom * remove disabled state * update storybook * aria-current to active step * styling and color fixes * color change line step * Update @navikt/core/css/stepper.css Co-authored-by: Ken <26967723+KenAJoh@users.noreply.github.com> * Update @navikt/core/css/stepper.css Co-authored-by: Ken <26967723+KenAJoh@users.noreply.github.com> * Update @navikt/core/css/stepper.css Co-authored-by: Ken <26967723+KenAJoh@users.noreply.github.com> * Update @navikt/core/css/stepper.css Co-authored-by: Ken <26967723+KenAJoh@users.noreply.github.com> * Update @navikt/core/css/stepper.css Co-authored-by: Ken <26967723+KenAJoh@users.noreply.github.com> * Update @navikt/core/css/stepper.css Co-authored-by: Ken <26967723+KenAJoh@users.noreply.github.com> * Update @navikt/core/css/stepper.css Co-authored-by: Ken <26967723+KenAJoh@users.noreply.github.com> * Update @navikt/core/react/src/stepper/Step.tsx Co-authored-by: Ken <26967723+KenAJoh@users.noreply.github.com> * [FIX] Bedre width for search (#1455) * Lerna versionbump [ci skip] - @navikt/ds-css@0.16.3 * [fix] Helptext uu fix (#1407) * storybook no div in p fix * move title inside svg * extra helptext in story * remove duplicate title * remove aria-props and refactor * remove unused style * simplify styling some * default help text content to body-short * cleanup * tabindex 0 på popover * flyttet story * fjernet tabindex * Update @navikt/core/react/src/help-text/HelpText.tsx Co-authored-by: Ken <26967723+KenAJoh@users.noreply.github.com> Co-authored-by: Ken <ken.aleksander@gmail.com> Co-authored-by: Ken <26967723+KenAJoh@users.noreply.github.com> * Lerna versionbump [ci skip] - @navikt/ds-css@0.16.4 - @navikt/ds-react@0.17.4 - @navikt/ds-react-internal@0.12.4 * [FIX] Oppdatert ikon-template, SSR-safe uuid (#1458) * oppdatert ikon-template * oppdatert pakkversjoner * fikset pakkeversjoner * oppdatert ikon-template * fikset config * Lerna versionbump [ci skip] - @navikt/ds-icons@0.8.5 - @navikt/ds-react@0.17.5 - @navikt/ds-react-internal@0.12.5 * [fix] Read more component (#1456) * scrips yo * unused import * stylez * aria-expanded * add link to storybook * oopsie * read more focus style * read more collapse animation * Lerna versionbump [ci skip] - @navikt/ds-css@0.16.5 - @navikt/ds-react@0.17.6 - @navikt/ds-react-internal@0.12.6 * remove ariaLabelledBy as its in by default * Update @navikt/core/css/stepper.css * anchor tag is default overridable * rm space * default from button to anchor * add y-axis click affordance to steps * click affordance, flex-align-start and stretching h-line with long label * Update @navikt/core/css/stepper.css Co-authored-by: Ken <ken.aleksander@gmail.com> Co-authored-by: Ken <26967723+KenAJoh@users.noreply.github.com> Co-authored-by: github-actions[bot] <github-actions[bot]@users.noreply.github.com> Co-authored-by: Andreas Nordahl <andnorda@gmail.com>	2022-03-24 12:58:54 +01:00
github-actions[bot]	08be6c0e8b	Lerna versionbump [ci skip] - @navikt/ds-react@0.17.12 - @navikt/ds-react-internal@0.12.12	2022-03-23 18:50:44 +00:00
Andreas Nordahl	becb01d429	[fix] Label react node (#1466 )	2022-03-23 19:41:50 +01:00
github-actions[bot]	62ba36ae09	Lerna versionbump [ci skip] - @navikt/ds-css@0.16.8 - @navikt/ds-react@0.17.11 - @navikt/ds-react-internal@0.12.11	2022-03-22 13:40:06 +00:00
Martin BerglundandAndreas Nordahl	2114c2bb53	[FIX] Replace hard coded values with tokens (#1463 ) * Replace hard coded values with tokens * Update yarn.lock Co-authored-by: Andreas Nordahl <andnorda@gmail.com>	2022-03-22 14:30:48 +01:00
Ken	213ef258aa	[FIX] Fikset title på HelpText (#1464 )	2022-03-22 14:27:22 +01:00
github-actions[bot]	85dd252e43	Lerna versionbump [ci skip] - @navikt/ds-css@0.16.7 - @navikt/ds-react@0.17.10 - @navikt/ds-react-internal@0.12.10	2022-03-22 11:18:22 +00:00
Ken	9ebeff4ae0	[FIX] Endringsforslag Pagination (#1457 )	2022-03-22 12:09:23 +01:00
github-actions[bot]	b383a6baec	Lerna versionbump [ci skip] - @navikt/ds-css@0.16.6 - @navikt/ds-react@0.17.9 - @navikt/ds-react-internal@0.12.9	2022-03-22 10:06:07 +00:00
Ken Andreas Nordahl Ken github-actions[bot]	b09ea568d4	[FIX] Alert styling og ikoner (#1447 ) Co-authored-by: Andreas Nordahl <andnorda@gmail.com> Co-authored-by: Ken <26967723+KenAJoh@users.noreply.github.com> Co-authored-by: Ken <ken.aleksander@gmail.com> Co-authored-by: github-actions[bot] <github-actions[bot]@users.noreply.github.com>	2022-03-22 10:57:09 +01:00
github-actions[bot]	a3b28bb9ad	Lerna versionbump [ci skip] - @navikt/ds-react@0.17.8 - @navikt/ds-react-internal@0.12.8	2022-03-17 11:33:19 +00:00
Andreas Nordahl	1d04a06885	[fix] up-down for default sort state (#1461 )	2022-03-17 12:23:39 +01:00
github-actions[bot]	88adfdc310	Lerna versionbump [ci skip] - @navikt/ds-icons@0.8.6 - @navikt/ds-react@0.17.7 - @navikt/ds-react-internal@0.12.7	2022-03-17 10:06:07 +00:00
Andreas Nordahl	502326dc33	[fix] update icons from Figma (#1460 )	2022-03-17 10:55:43 +01:00
github-actions[bot]	f6042d01aa	Lerna versionbump [ci skip] - @navikt/ds-css@0.16.5 - @navikt/ds-react@0.17.6 - @navikt/ds-react-internal@0.12.6	2022-03-16 16:18:56 +00:00
Andreas Nordahl	3f4c35b0ef	[fix] Read more component (#1456 ) * scrips yo * unused import * stylez * aria-expanded * add link to storybook * oopsie * read more focus style * read more collapse animation	2022-03-16 17:09:06 +01:00
github-actions[bot]	b2a71fd227	Lerna versionbump [ci skip] - @navikt/ds-icons@0.8.5 - @navikt/ds-react@0.17.5 - @navikt/ds-react-internal@0.12.5	2022-03-16 15:53:15 +00:00
Ken	d4aed1b59a	[FIX] Oppdatert ikon-template, SSR-safe uuid (#1458 ) * oppdatert ikon-template * oppdatert pakkversjoner * fikset pakkeversjoner * oppdatert ikon-template * fikset config	2022-03-16 16:44:24 +01:00
github-actions[bot]	ddc0db1905	Lerna versionbump [ci skip] - @navikt/ds-css@0.16.4 - @navikt/ds-react@0.17.4 - @navikt/ds-react-internal@0.12.4	2022-03-14 12:29:03 +00:00
Andreas Nordahl Ken Ken	211bd751cd	[fix] Helptext uu fix (#1407 ) * storybook no div in p fix * move title inside svg * extra helptext in story * remove duplicate title * remove aria-props and refactor * remove unused style * simplify styling some * default help text content to body-short * cleanup * tabindex 0 på popover * flyttet story * fjernet tabindex * Update @navikt/core/react/src/help-text/HelpText.tsx Co-authored-by: Ken <26967723+KenAJoh@users.noreply.github.com> Co-authored-by: Ken <ken.aleksander@gmail.com> Co-authored-by: Ken <26967723+KenAJoh@users.noreply.github.com>	2022-03-14 13:18:43 +01:00
github-actions[bot]	3e334453e3	Lerna versionbump [ci skip] - @navikt/ds-css@0.16.3	2022-03-14 12:00:11 +00:00
Ken	70819de284	[FIX] Bedre width for search (#1455 )	2022-03-14 12:51:53 +01:00
github-actions[bot]	4baebb4340	Lerna versionbump [ci skip] - @navikt/ds-react@0.17.3 - @navikt/ds-react-internal@0.12.3	2022-03-08 10:50:29 +00:00
Ken	7866333ae2	[FIX] Search: form -> div (#1454 )	2022-03-08 11:40:25 +01:00
github-actions[bot]	2f13905d61	Lerna versionbump [ci skip] - @navikt/ds-css@0.16.2	2022-03-07 15:23:32 +00:00
KenandAndreas Nordahl	0160383ff0	[FIX] Synket ConfirmationPanel med Figma (#1437 ) Co-authored-by: Andreas Nordahl <andnorda@gmail.com>	2022-03-07 16:14:04 +01:00