Lerna versionbump [ci skip]

- @navikt/ds-css@0.12.6 - @navikt/ds-react@0.14.2 - @navikt/ds-react-internal@0.9.2
[FIX] Switch-komponent (#1359 )
2026-10-17 03:02:03 +00:00 · 2021-12-21 14:02:07 +00:00 · 2021-12-21 14:47:59 +01:00 · 2021-12-17 12:27:25 +00:00 · 2021-12-17 13:14:11 +01:00 · 2021-12-17 10:23:03 +00:00
62 changed files with 879 additions and 1045 deletions
@@ -45,12 +45,6 @@ jobs:
        run: echo "BRANCH=HEAD" >> website/.env
      - name: Test gatsby-build (design.nav.no)
        run: yarn build:gatsby
-      - name: Test chromatic
-        uses: chromaui/action@v1
-        with:
-          token: ${{ secrets.GIT_REPO }}
-          projectToken: ${{ secrets.CHROMATIC }}
-          exitZeroOnChanges: true

  publish-npm:
    needs: test-build
@@ -0,0 +1,126 @@
+name: Chromatic
+
+on:
+  push:
+    branches: [master]
+  pull_request:
+    branches: [master]
+
+jobs:
+  chromatic-pr:
+    if: "!contains(github.event.head_commit.message, '[ci skip]') && github.event_name != 'push'"
+    runs-on: ubuntu-latest
+    steps:
+      - uses: actions/checkout@v2
+        with:
+          fetch-depth: 0
+      - uses: actions/setup-node@v1
+        with:
+          node-version: 14
+      - name: Node-modules cache
+        uses: actions/cache@v2
+        id: node-cache
+        with:
+          path: "**/node_modules"
+          key: ${{ runner.os }}-modules-${{ hashFiles('**/yarn.lock') }}
+      - name: install
+        if: steps.node-cache.outputs.cache-hit != 'true'
+        run: yarn install
+      - name: postinstall
+        if: steps.node-cache.outputs.cache-hit == 'true'
+        run: yarn postinstall
+      - name: Boot
+        run: yarn boot
+      - name: run chromatic
+        uses: chromaui/action@v1
+        id: chromatic_tests
+        continue-on-error: true
+        with:
+          token: ${{ secrets.GITHUB_TOKEN }}
+          projectToken: x3xqdfgkujg
+          exitZeroOnChanges: false
+
+      - name: replace storybook url
+        uses: frabert/replace-string-action@v2.0
+        id: storybook_url
+        with:
+          pattern: "(iframe.html)"
+          string: ${{ steps.chromatic_tests.outputs.storybookUrl }}
+          replace-with: ""
+
+      - name: Get commit sha
+        id: vars
+        shell: bash
+        run: |
+          echo "::set-output name=sha_short::$(git rev-parse --short HEAD)"
+
+      - name: Find Comment
+        uses: peter-evans/find-comment@v1
+        id: fc
+        with:
+          issue-number: ${{ github.event.pull_request.number }}
+          comment-author: "github-actions[bot]"
+          body-includes: Chromatic build-output
+
+      - name: Create or update comment
+        if: steps.chromatic_tests.outcome == 'success'
+        uses: peter-evans/create-or-update-comment@v1
+        with:
+          comment-id: ${{ steps.fc.outputs.comment-id }}
+          issue-number: ${{ github.event.pull_request.number }}
+          body: |
+            Chromatic build-output:
+
+            - :clipboard: [Review](${{steps.chromatic_tests.outputs.url}})
+            - :tada: [Storybook preview](${{steps.storybook_url.outputs.replaced}})
+            - :white_check_mark: SUCCESS :white_check_mark:
+
+            commit: `${{ steps.vars.outputs.sha_short }}`
+          edit-mode: replace
+
+      - name: Create or update failed comment
+        if: steps.chromatic_tests.outcome != 'success'
+        uses: peter-evans/create-or-update-comment@v1
+        with:
+          comment-id: ${{ steps.fc.outputs.comment-id }}
+          issue-number: ${{ github.event.pull_request.number }}
+          body: |
+            **Chromatic build-output**:
+
+            - :clipboard: [Review](${{steps.chromatic_tests.outputs.url}})
+            - :tada: [Storybook preview](${{steps.storybook_url.outputs.replaced}})
+            - :no_entry_sign: FAILED :no_entry_sign:, review endringer.
+
+            commit: `${{ steps.vars.outputs.sha_short }}`
+          edit-mode: replace
+
+  chromatic-push:
+    if: "!contains(github.event.head_commit.message, '[ci skip]') && github.event_name == 'push'"
+    runs-on: ubuntu-latest
+    steps:
+      - uses: actions/checkout@v2
+        with:
+          fetch-depth: 0
+      - uses: actions/setup-node@v1
+        with:
+          node-version: 14
+      - name: Node-modules cache
+        uses: actions/cache@v2
+        id: node-cache
+        with:
+          path: "**/node_modules"
+          key: ${{ runner.os }}-modules-${{ hashFiles('**/yarn.lock') }}
+      - name: install
+        if: steps.node-cache.outputs.cache-hit != 'true'
+        run: yarn install
+      - name: postinstall
+        if: steps.node-cache.outputs.cache-hit == 'true'
+        run: yarn postinstall
+      - name: Boot
+        run: yarn boot
+      - name: run chromatic
+        uses: chromaui/action@v1
+        with:
+          token: ${{ secrets.GITHUB_TOKEN }}
+          projectToken: x3xqdfgkujg
+          autoAcceptChanges: true
@@ -1,8 +1,6 @@
 name: Update tokens

 on:
-  schedule:
-    - cron: 0 0 * * *
  workflow_dispatch:

 jobs:
@@ -115,4 +115,5 @@ utilities/**/css
 react-docgen.json
 react-docgen-docs.json
 cjs
-esm
+esm
+.vercel
@@ -137,7 +137,8 @@
    var(--navds-shadow-focus);
 }

-.navds-button--primary:hover:disabled {
+.navds-button--primary:hover:disabled,
+.navds-button--primary:active:disabled {
  background-color: var(--navds-button-color-primary-background);
 }

@@ -244,7 +245,8 @@
    var(--navds-shadow-focus);
 }

-.navds-button--danger:hover:disabled {
+.navds-button--danger:hover:disabled,
+.navds-button--danger:active:disabled {
  background-color: var(--navds-button-color-danger-background);
 }

@@ -253,7 +255,7 @@
 **************************/

 .navds-button:disabled {
-  opacity: 30%;
+  opacity: 0.3;
  cursor: not-allowed;
  transform: none;
 }
@@ -8,6 +8,7 @@
@import "error-message.css";
@import "radio-checkbox.css";
@import "select.css";
+@import "switch.css";
@import "text-field.css";
@import "textarea.css";
@import "search-field.css";
@@ -0,0 +1,183 @@
+:root {
+  --navds-switch-color-label: var(--navds-color-text-primary);
+  --navds-switch-color-label-hover: var(
+    --navds-semantic-color-interaction-primary
+  );
+  --navds-switch-color-track-background: var(--navds-semantic-color-text-muted);
+  --navds-switch-color-track-background-checked: var(
+    --navds-semantic-color-interaction-primary
+  );
+  --navds-switch-color-track-background-hover-checked: var(
+    --navds-semantic-color-interaction-primary-hover
+  );
+  --navds-switch-color-track-shadow-inner-focus: var(
+    --navds-semantic-color-component-background-light
+  );
+  --navds-switch-color-thumb: var(
+    --navds-semantic-color-component-background-light
+  );
+  --navds-switch-color-thumb-loader-checked: var(
+    --navds-semantic-color-interaction-primary
+  );
+}
+
+.navds-switch {
+  position: relative;
+  min-height: 48px;
+  width: fit-content;
+}
+
+.navds-switch--small {
+  position: relative;
+  min-height: 32px;
+}
+
+/* Input */
+.navds-switch__input {
+  cursor: pointer;
+  position: absolute;
+  z-index: 1;
+  width: 48px;
+  height: 48px;
+  opacity: 0;
+  top: 0;
+}
+
+.navds-switch--small > .navds-switch__input {
+  height: 32px;
+  top: 0;
+}
+
+/* Label */
+.navds-switch__label-wrapper {
+  cursor: pointer;
+  color: var(--navds-switch-color-label);
+}
+
+.navds-switch__content {
+  display: flex;
+  flex-direction: column;
+  gap: var(--navds-spacing-1);
+  padding: 0.75rem 0 0.75rem 3.25rem;
+}
+
+.navds-switch--small > .navds-switch__label-wrapper > .navds-switch__content {
+  padding: calc(var(--navds-spacing-2) - 2px) 0
+    calc(var(--navds-spacing-2) - 2px) 3.25rem;
+}
+
+.navds-switch--with-description,
+.navds-switch--small
+  > .navds-switch__label-wrapper
+  > .navds-switch--with-description {
+  padding-bottom: 0;
+}
+
+.navds-switch__input:hover ~ .navds-switch__label-wrapper {
+  color: var(--navds-switch-color-label-hover);
+}
+
+.navds-switch__input:disabled:hover ~ .navds-switch__label-wrapper {
+  color: inherit;
+}
+
+/* Track */
+.navds-switch__track {
+  width: 44px;
+  height: 24px;
+  background-color: var(--navds-switch-color-track-background);
+  position: absolute;
+  top: var(--navds-spacing-3);
+  left: 0;
+  border-radius: var(--navds-spacing-4);
+  transition: background-color 250ms cubic-bezier(0.4, 0, 0.2, 1);
+}
+
+.navds-switch--small > .navds-switch__track {
+  top: var(--navds-spacing-1);
+}
+
+.navds-switch__input:checked ~ .navds-switch__track {
+  background-color: var(--navds-switch-color-track-background-checked);
+}
+
+.navds-switch__input:hover:checked ~ .navds-switch__track {
+  background-color: var(--navds-switch-color-track-background-hover-checked);
+}
+
+.navds-switch__input:disabled ~ .navds-switch__track {
+  background-color: var(--navds-switch-color-track-background);
+}
+
+.navds-switch__input:checked:disabled ~ .navds-switch__track {
+  background-color: var(--navds-switch-color-track-background-checked);
+}
+
+.navds-switch__input:focus ~ .navds-switch__track {
+  box-shadow: 0 0 0 1px var(--navds-switch-color-track-shadow-inner-focus),
+    var(--navds-shadow-focus);
+}
+
+/* Thumb */
+.navds-switch__thumb {
+  background-color: var(--navds-switch-color-thumb);
+  border-radius: 50%;
+  width: 20px;
+  height: 20px;
+  position: absolute;
+  transform: translateX(0);
+  left: 2px;
+  top: 2px;
+  transition: transform 250ms cubic-bezier(0.4, 0, 0.2, 1);
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+
+.navds-switch__input:checked ~ .navds-switch__track > .navds-switch__thumb {
+  transform: translateX(20px);
+}
+
+.navds-switch__input:hover ~ .navds-switch__track > .navds-switch__thumb {
+  transform: translateX(2px);
+}
+
+.navds-switch__input:checked:hover
+  ~ .navds-switch__track
+  > .navds-switch__thumb {
+  transform: translateX(18px);
+}
+
+.navds-switch__input:disabled:hover
+  ~ .navds-switch__track
+  > .navds-switch__thumb {
+  transform: translateX(0);
+}
+
+.navds-switch__input:checked:disabled:hover
+  ~ .navds-switch__track
+  > .navds-switch__thumb {
+  transform: translateX(20px);
+}
+
+/* Loader */
+.navds-switch__input:checked
+  ~ .navds-switch__track
+  > .navds-switch__thumb
+  .navds-loader__foreground {
+  stroke: var(--navds-switch-color-thumb-loader-checked);
+}
+
+/* Disabled */
+.navds-switch__input:disabled {
+  appearance: none;
+}
+
+.navds-switch--disabled {
+  opacity: 0.3;
+}
+
+.navds-switch__input:disabled,
+.navds-switch__input:disabled ~ .navds-switch__label-wrapper {
+  cursor: not-allowed;
+}
@@ -1,6 +1,6 @@
 :root {
  --navds-textarea-color-background: var(
-    --navds-semantic-color-component-background-light:
+    --navds-semantic-color-component-background-light
  );
  --navds-textarea-color-border: var(--navds-semantic-color-border);
  --navds-textarea-color-border-hover: var(
@@ -38,7 +38,7 @@
  width: 100%;
  transition: height 0.1s ease-out;
  display: block;
-  min-height: 48px;
+  min-height: 3rem;
 }

 .navds-textarea--counter {
@@ -56,7 +56,7 @@

 .navds-form-field--small .navds-textarea__input {
  padding: var(--navds-spacing-1);
-  min-height: 32px;
+  min-height: 2rem;
 }

 .navds-form-field--small .navds-textarea--counter.navds-textarea__input {
@@ -1,6 +1,6 @@
 {
  "name": "@navikt/ds-css",
-  "version": "0.12.0",
+  "version": "0.12.6",
  "private": false,
  "description": "Css for NAV Designsystem components",
  "author": "NAV Designsystem team",
@@ -1,5 +1,18 @@
 :root {
  --navds-table-cell-color-border: var(--navds-semantic-color-border-muted);
+  --navds-table-row-color-background-hover: var(
+    --navds-semantic-color-canvas-background
+  );
+  --navds-table-row-color-background-selected: var(
+    --navds-semantic-color-interaction-primary-hover-subtle
+  );
+  --navds-table-row-color-background-selected-hover: var(
+    --navds-global-color-blue-100
+  );
+  --navds-table-row-color-background-zebra: var(
+    --navds-semantic-color-component-background-alternate
+  );
+  --navds-table-cell-color-border-hover: var(--navds-semantic-color-border);
 }

 .navds-table {
@@ -20,13 +33,50 @@
  display: table-row;
 }

-.navds-table__cell {
-  display: table-cell;
-  padding: var(--navds-spacing-4);
-  text-align: left;
-  border-bottom: 1px solid var(--navds-table-cell-color-border);
+.navds-table__body .navds-table__row:hover {
+  background-color: var(--navds-table-row-color-background-hover);
 }

-.navds-table--small .navds-table__cell {
+.navds-table__row--selected {
+  background-color: var(--navds-table-row-color-background-selected);
+}
+
+.navds-table__body .navds-table__row--selected:hover {
+  background-color: var(--navds-table-row-color-background-selected-hover);
+}
+
+.navds-table--zebra-stripes
+  .navds-table__body
+  .navds-table__row:nth-of-type(odd):not(:hover):not(.navds-table__row--selected) {
+  background-color: var(--navds-table-row-color-background-zebra);
+}
+
+.navds-table__header-cell,
+.navds-table__data-cell {
+  display: table-cell;
+  padding: var(--navds-spacing-4);
+  border-bottom: 1px solid var(--navds-table-cell-color-border);
+  text-align: left;
+}
+
+.navds-table__body .navds-table__row:hover .navds-table__header-cell,
+.navds-table__body .navds-table__row:hover .navds-table__data-cell {
+  border-color: var(--navds-table-cell-color-border-hover);
+}
+
+.navds-table--small .navds-table__header-cell,
+.navds-table--small .navds-table__data-cell {
  padding: var(--navds-spacing-2);
 }
+
+.navds-table .navds-checkbox .navds-checkbox__input {
+  top: -12px;
+}
+
+.navds-table .navds-checkbox--small .navds-checkbox__input {
+  top: -6px;
+}
+
+.navds-table .navds-checkbox .navds-checkbox__label {
+  padding: 0;
+}
@@ -1,6 +1,6 @@
 {
  "name": "@navikt/ds-react",
-  "version": "0.14.0",
+  "version": "0.14.2",
  "private": false,
  "description": "NAV designsystem react components",
  "author": "NAV Designsystem team",
@@ -0,0 +1,81 @@
+import cl from "classnames";
+import React, { forwardRef, InputHTMLAttributes } from "react";
+import { BodyShort, Detail, Loader, omit } from "..";
+import { FormFieldProps, useFormField } from "./useFormField";
+
+export interface SwitchProps
+  extends Omit<FormFieldProps, "error" | "errorId">,
+    Omit<InputHTMLAttributes<HTMLInputElement>, "size"> {
+  /**
+   * Switch-label
+   */
+  children: React.ReactNode;
+  /**
+   * If enabled shows the label and description for screenreaders only
+   */
+  hideLabel?: boolean;
+  /**
+   * Toggles loading state with loader-component on switch
+   */
+  loading?: boolean;
+}
+
+const Switch = forwardRef<HTMLInputElement, SwitchProps>((props, ref) => {
+  const { inputProps, size } = useFormField(props, "switch");
+
+  const {
+    children,
+    className,
+    description,
+    hideLabel = false,
+    loading,
+    ...rest
+  } = props;
+
+  const Description = size === "medium" ? BodyShort : Detail;
+
+  return (
+    <div
+      className={cl("navds-switch", props.className, `navds-switch--${size}`, {
+        "navds-switch--disabled": inputProps.disabled,
+      })}
+    >
+      <input
+        {...omit(rest, ["size"])}
+        {...omit(inputProps, ["aria-invalid", "aria-describedby"])}
+        ref={ref}
+        type="checkbox"
+        className={cl(className, "navds-switch__input")}
+      />
+      <span className="navds-switch__track">
+        <span className="navds-switch__thumb">
+          {loading && <Loader size="xsmall" />}
+        </span>
+      </span>
+
+      <label htmlFor={inputProps.id} className="navds-switch__label-wrapper">
+        <div
+          className={cl("navds-switch__content", {
+            "sr-only": hideLabel,
+            "navds-switch--with-description": !!description && !hideLabel,
+          })}
+        >
+          <BodyShort as="div" size={size} className="navds-switch__label">
+            {children}
+          </BodyShort>
+          {description && (
+            <Description
+              as="div"
+              size="small"
+              className="navds-switch__description"
+            >
+              {description}
+            </Description>
+          )}
+        </div>
+      </label>
+    </div>
+  );
+});
+
+export default Switch;
@@ -12,6 +12,7 @@ export {
 export { Radio, RadioGroup, RadioGroupProps, RadioProps } from "./radio";
 export { SearchField, SearchFieldProps } from "./search-field";
 export { default as Select, SelectProps } from "./Select";
+export { default as Switch, SwitchProps } from "./Switch";
 export { ErrorSummary, ErrorSummaryProps } from "./error-summary";
 export { Counter, default as Textarea, TextareaProps } from "./Textarea";
 export { default as TextField, TextFieldProps } from "./TextField";
@@ -0,0 +1,104 @@
+import { Meta, Canvas } from "@storybook/addon-docs";
+import { Switch } from "../index";
+
+<Meta title="ds-react/form/switch/intro" />
+
+# Hvordan ta i bruk Switch
+
+```jsx
+<Switch>Slå på feature</Switch>
+```
+
+<Canvas>
+  <Switch>Slå på feature</Switch>
+</Canvas>
+
+## Description
+
+```jsx
+<Switch description="Dette vil gjøre x og y">Slå på feature</Switch>
+```
+
+<Canvas>
+  <Switch description="Dette vil gjøre x og y">Slå på feature</Switch>
+</Canvas>
+
+## Sizing
+
+Switch har default 48px høy klikkflate. Med size="small" blir klikkflaten 32px
+
+```jsx
+<Switch size="small" >Slå på feature</Switch>
+<Switch size="small" description="Dette vil gjøre x og y">Slå på feature</Switch>
+```
+
+<Canvas>
+  <div>
+    <Switch size="small">Slå på feature</Switch>
+    <Switch size="small" description="Dette vil gjøre x og y">
+      Slå på feature
+    </Switch>
+  </div>
+</Canvas>
+
+## defaultChecked
+
+Switch er en stylet checkbox, så både `checked` og `defaultChecked` fungerer
+
+```jsx
+<Switch defaultChecked>Slå på feature</Switch>
+```
+
+<Canvas>
+  <Switch defaultChecked>Slå på feature</Switch>
+</Canvas>
+
+## hideLabel
+
+Ved bruk av `hideLegend` på Switch kan man gjøre slik at legend/description bare vises for skjermlesere
+
+```jsx
+<Switch hideLabel>Slå på feature</Switch>
+```
+
+<Canvas>
+  <Switch hideLabel>Slå på feature</Switch>
+</Canvas>
+
+## Disabled
+
+Ved bruk av `disabled` kan man både disabled enkelte checkboxer eller checkboxgruppen.
+
+NOTE: Husk at disabled bør unngås!
+
+```jsx
+<Switch disabled>Slå på feature</Switch>
+```
+
+<Canvas>
+  <div>
+    <Switch disabled>Slå på feature</Switch>
+    <Switch disabled defaultChecked>
+      Slå på feature
+    </Switch>
+  </div>
+</Canvas>
+
+## Loading
+
+Om systemet bruker tid på å utføre handlingen vises en loading-indikator på switch’en.
+Om ventetiden er mer enn noen sekunder bør en forklarende tekst også vises.
+Teksten må forklare kort og godt hvorfor brukeren må vente.
+
+```jsx
+<Switch loading>Slå på feature</Switch>
+```
+
+<Canvas>
+  <div>
+    <Switch loading>Slå på feature</Switch>
+    <Switch loading defaultChecked>
+      Slå på feature
+    </Switch>
+  </div>
+</Canvas>
@@ -0,0 +1,70 @@
+import React, { useState } from "react";
+import { Switch } from "../index";
+import { Meta } from "@storybook/react/types-6-0";
+import { Fieldset } from "../..";
+export default {
+  title: "ds-react/form/switch",
+  component: Switch,
+} as Meta;
+
+export const All = () => {
+  const [checked, setChecked] = useState(false);
+  return (
+    <div>
+      <h1>Switch</h1>
+      <Switch>Label text</Switch>
+
+      <h2>Switch w/Description</h2>
+      <Switch>Label text</Switch>
+      <Switch description="Switch description">Label text</Switch>
+      <Switch>Label text</Switch>
+
+      <h2>hidelabel</h2>
+      <Switch description="Switch description" hideLabel>
+        Label text
+      </Switch>
+      <Switch description="Switch description" hideLabel>
+        Label text
+      </Switch>
+      <Switch hideLabel size="small">
+        Label text small
+      </Switch>
+
+      <h2>Switch small</h2>
+      <Switch size="small">Label text</Switch>
+      <Switch description="Switch description" size="small">
+        Label text
+      </Switch>
+      <Switch size="small">Label text</Switch>
+
+      <h2>Controlled</h2>
+      <Switch checked={checked} onChange={() => setChecked(!checked)}>
+        Label text
+      </Switch>
+
+      <h2>Defaultchecked</h2>
+      <Switch defaultChecked>Label text</Switch>
+
+      <h2>Disabled</h2>
+      <Switch disabled>Label text</Switch>
+      <Switch disabled defaultChecked>
+        Label text
+      </Switch>
+
+      <h2>With fieldset error</h2>
+      <Fieldset legend="Fieldset legend" error="Errormsg">
+        <Switch defaultChecked>Label text</Switch>
+        <Switch>Label text</Switch>
+      </Fieldset>
+
+      <h2>loading prop</h2>
+      <Switch loading>Label text</Switch>
+      <Switch size="small" loading>
+        Label text
+      </Switch>
+      <Switch disabled loading>
+        Label text
+      </Switch>
+    </div>
+  );
+};
@@ -1,5 +1,7 @@
-import React, { forwardRef } from "react";
+import React, { forwardRef, useContext } from "react";
 import cl from "classnames";
+import { BodyShort } from "..";
+import { TableContext } from ".";

 interface DataCellProps extends React.HTMLAttributes<HTMLTableCellElement> {}

@@ -8,8 +10,22 @@ export interface DataCellType
    DataCellProps & React.RefAttributes<HTMLTableCellElement>
  > {}

-const DataCell: DataCellType = forwardRef(({ className, ...rest }, ref) => (
-  <td {...rest} ref={ref} className={cl("navds-table__cell", className)} />
-));
+const DataCell: DataCellType = forwardRef(
+  ({ className, children = "", ...rest }, ref) => {
+    const context = useContext(TableContext);
+
+    return (
+      <BodyShort
+        as="td"
+        ref={ref}
+        className={cl("navds-table__data-cell", className)}
+        size={context?.size}
+        {...rest}
+      >
+        {children}
+      </BodyShort>
+    );
+  }
+);

 export default DataCell;
@@ -1,15 +1,32 @@
-import React, { forwardRef } from "react";
+import React, { forwardRef, useContext } from "react";
 import cl from "classnames";
+import { Label, TableContext } from "..";

-interface HeaderCellProps extends React.HTMLAttributes<HTMLTableCellElement> {}
+interface HeaderCellProps extends React.HTMLAttributes<HTMLTableCellElement> {
+  scope?: string;
+}

 export interface HeaderCellType
  extends React.ForwardRefExoticComponent<
    HeaderCellProps & React.RefAttributes<HTMLTableCellElement>
  > {}

-const HeaderCell: HeaderCellType = forwardRef(({ className, ...rest }, ref) => (
-  <th {...rest} ref={ref} className={cl("navds-table__cell", className)} />
-));
+const HeaderCell: HeaderCellType = forwardRef(
+  ({ className, children, ...rest }, ref) => {
+    const context = useContext(TableContext);
+
+    return (
+      <Label
+        as="th"
+        ref={ref}
+        className={cl("navds-table__header-cell", className)}
+        size={context?.size}
+        {...rest}
+      >
+        {children}
+      </Label>
+    );
+  }
+);

 export default HeaderCell;
@@ -1,15 +1,29 @@
 import React, { forwardRef } from "react";
 import cl from "classnames";

-interface RowProps extends React.HTMLAttributes<HTMLTableRowElement> {}
+interface RowProps extends React.HTMLAttributes<HTMLTableRowElement> {
+  /**
+   * Row is selected
+   * @default false
+   */
+  selected?: boolean;
+}

 export interface RowType
  extends React.ForwardRefExoticComponent<
    RowProps & React.RefAttributes<HTMLTableRowElement>
  > {}

-const Row: RowType = forwardRef(({ className, ...rest }, ref) => (
-  <tr {...rest} ref={ref} className={cl("navds-table__row", className)} />
-));
+const Row: RowType = forwardRef(
+  ({ className, selected = false, ...rest }, ref) => (
+    <tr
+      {...rest}
+      ref={ref}
+      className={cl("navds-table__row", className, {
+        "navds-table__row--selected": selected,
+      })}
+    />
+  )
+);

 export default Row;
@@ -1,4 +1,4 @@
-import React, { forwardRef } from "react";
+import React, { createContext, forwardRef } from "react";
 import cl from "classnames";
 import Header, { HeaderType } from "./Header";
 import Body, { BodyType } from "./Body";
@@ -12,6 +12,11 @@ export interface TableProps extends React.HTMLAttributes<HTMLTableElement> {
   * @default "medium"
   */
  size?: "medium" | "small";
+  /**
+   * Zebra striped table
+   * @default false
+   */
+  zebraStripes?: boolean;
 }

 export interface TableType
@@ -25,13 +30,25 @@ export interface TableType
  HeaderCell: HeaderCellType;
 }

-const Table = forwardRef(({ className, size = "medium", ...rest }, ref) => (
-  <table
-    {...rest}
-    ref={ref}
-    className={cl("navds-table", `navds-table--${size}`, className)}
-  />
-)) as TableType;
+export interface TableContextProps {
+  size: "medium" | "small";
+}
+
+export const TableContext = createContext<TableContextProps | null>(null);
+
+const Table = forwardRef(
+  ({ className, zebraStripes = false, size = "medium", ...rest }, ref) => (
+    <TableContext.Provider value={{ size }}>
+      <table
+        {...rest}
+        ref={ref}
+        className={cl("navds-table", `navds-table--${size}`, className, {
+          "navds-table--zebra-stripes": zebraStripes,
+        })}
+      />
+    </TableContext.Provider>
+  )
+) as TableType;

 Table.Header = Header;
 Table.Body = Body;
@@ -1,6 +1,6 @@
-import React from "react";
+import React, { useState } from "react";
 import { Table } from "../index";
-import { Alert, Link } from "@navikt/ds-react";
+import { Alert, Checkbox, Link } from "@navikt/ds-react";

 export default {
  title: "ds-react/table",
@@ -8,70 +8,46 @@ export default {
 };

 export const All = () => {
+  const TableComponent = (props) => (
+    <Table {...props}>
+      <Table.Header>
+        <Table.Row>
+          <Table.HeaderCell>ID</Table.HeaderCell>
+          <Table.HeaderCell>Fornavn</Table.HeaderCell>
+          <Table.HeaderCell>Etternavn</Table.HeaderCell>
+          <Table.HeaderCell>Rolle</Table.HeaderCell>
+        </Table.Row>
+      </Table.Header>
+      <Table.Body>
+        <Table.Row>
+          <Table.HeaderCell>1</Table.HeaderCell>
+          <Table.DataCell>Jean-Luc</Table.DataCell>
+          <Table.DataCell>Picard</Table.DataCell>
+          <Table.DataCell>Kaptein</Table.DataCell>
+        </Table.Row>
+        <Table.Row>
+          <Table.HeaderCell>2</Table.HeaderCell>
+          <Table.DataCell>William</Table.DataCell>
+          <Table.DataCell>Riker</Table.DataCell>
+          <Table.DataCell>Kommandør</Table.DataCell>
+        </Table.Row>
+        <Table.Row>
+          <Table.HeaderCell>3</Table.HeaderCell>
+          <Table.DataCell>Geordi</Table.DataCell>
+          <Table.DataCell>La Forge</Table.DataCell>
+          <Table.DataCell>Sjefsingeniør</Table.DataCell>
+        </Table.Row>
+      </Table.Body>
+    </Table>
+  );
  return (
    <>
      <h1>Table</h1>
-      <Table>
-        <Table.Header>
-          <Table.Row>
-            <Table.HeaderCell>ID</Table.HeaderCell>
-            <Table.HeaderCell>Fornavn</Table.HeaderCell>
-            <Table.HeaderCell>Etternavn</Table.HeaderCell>
-            <Table.HeaderCell>Rolle</Table.HeaderCell>
-          </Table.Row>
-        </Table.Header>
-        <Table.Body>
-          <Table.Row>
-            <Table.HeaderCell>1</Table.HeaderCell>
-            <Table.DataCell>Jean-Luc</Table.DataCell>
-            <Table.DataCell>Picard</Table.DataCell>
-            <Table.DataCell>Kaptein</Table.DataCell>
-          </Table.Row>
-          <Table.Row>
-            <Table.HeaderCell>2</Table.HeaderCell>
-            <Table.DataCell>William</Table.DataCell>
-            <Table.DataCell>Riker</Table.DataCell>
-            <Table.DataCell>Kommandør</Table.DataCell>
-          </Table.Row>
-          <Table.Row>
-            <Table.HeaderCell>3</Table.HeaderCell>
-            <Table.DataCell>Geordi</Table.DataCell>
-            <Table.DataCell>La Forge</Table.DataCell>
-            <Table.DataCell>Sjefsingeniør</Table.DataCell>
-          </Table.Row>
-        </Table.Body>
-      </Table>
+      <TableComponent />
+      <h2>Zebra</h2>
+      <TableComponent zebraStripes />
      <h2>Small Table</h2>
-      <Table size="small">
-        <Table.Header>
-          <Table.Row>
-            <Table.HeaderCell>ID</Table.HeaderCell>
-            <Table.HeaderCell>Fornavn</Table.HeaderCell>
-            <Table.HeaderCell>Etternavn</Table.HeaderCell>
-            <Table.HeaderCell>Rolle</Table.HeaderCell>
-          </Table.Row>
-        </Table.Header>
-        <Table.Body>
-          <Table.Row>
-            <Table.HeaderCell>1</Table.HeaderCell>
-            <Table.DataCell>Jean-Luc</Table.DataCell>
-            <Table.DataCell>Picard</Table.DataCell>
-            <Table.DataCell>Kaptein</Table.DataCell>
-          </Table.Row>
-          <Table.Row>
-            <Table.HeaderCell>2</Table.HeaderCell>
-            <Table.DataCell>William</Table.DataCell>
-            <Table.DataCell>Riker</Table.DataCell>
-            <Table.DataCell>Kommandør</Table.DataCell>
-          </Table.Row>
-          <Table.Row>
-            <Table.HeaderCell>3</Table.HeaderCell>
-            <Table.DataCell>Geordi</Table.DataCell>
-            <Table.DataCell>La Forge</Table.DataCell>
-            <Table.DataCell>Sjefsingeniør</Table.DataCell>
-          </Table.Row>
-        </Table.Body>
-      </Table>
+      <TableComponent size="small" />
      <h2>Table with divs</h2>
      <Alert variant="warning">
        Obs! Hvis man skal bygge tabeller uten å bruke vanlig {"<tabell> "}
@@ -87,48 +63,48 @@ export const All = () => {
      <div className="navds-table" role="table">
        <div className="navds-table__header" role="rowgroup">
          <div className="navds-table__row" role="row">
-            <div className="navds-table__cell" role="columnheader">
+            <div className="navds-table__header-cell" role="columnheader">
              Fornavn
            </div>
-            <div className="navds-table__cell" role="columnheader">
+            <div className="navds-table__header-cell" role="columnheader">
              Etternavn
            </div>
-            <div className="navds-table__cell" role="columnheader">
+            <div className="navds-table__header-cell" role="columnheader">
              Rolle
            </div>
          </div>
        </div>
        <div className="navds-table__body" role="rowgroup">
          <div className="navds-table__row" role="row">
-            <div className="navds-table__cell" role="cell">
+            <div className="navds-table__data-cell" role="cell">
              Jean-Luc
            </div>
-            <div className="navds-table__cell" role="cell">
+            <div className="navds-table__data-cell" role="cell">
              Picard
            </div>
-            <div className="navds-table__cell" role="cell">
+            <div className="navds-table__data-cell" role="cell">
              Kaptein
            </div>
          </div>
          <div className="navds-table__row" role="row">
-            <div className="navds-table__cell" role="cell">
+            <div className="navds-table__data-cell" role="cell">
              William
            </div>
-            <div className="navds-table__cell" role="cell">
+            <div className="navds-table__data-cell" role="cell">
              Riker
            </div>
-            <div className="navds-table__cell" role="cell">
+            <div className="navds-table__data-cell" role="cell">
              Kommandør
            </div>
          </div>
          <div className="navds-table__row" role="row">
-            <div className="navds-table__cell" role="cell">
+            <div className="navds-table__data-cell" role="cell">
              Geordi
            </div>
-            <div className="navds-table__cell" role="cell">
+            <div className="navds-table__data-cell" role="cell">
              La Forge
            </div>
-            <div className="navds-table__cell" role="cell">
+            <div className="navds-table__data-cell" role="cell">
              Sjefsingeniør
            </div>
          </div>
@@ -137,3 +113,110 @@ export const All = () => {
    </>
  );
 };
+
+export const Selection = () => (
+  <>
+    <h1>Selection</h1>
+    <h2>Medium</h2>
+    <SelectionTable />
+    <h2>Small</h2>
+    <SelectionTable size="small" />
+  </>
+);
+
+const SelectionTable = ({ size = "medium" }: { size?: "small" | "medium" }) => {
+  const useToggleList = (initialState) => {
+    const [list, setList] = useState(initialState);
+
+    return [
+      list,
+      (value) =>
+        setList((list) =>
+          list.includes(value)
+            ? list.filter((id) => id !== value)
+            : [...list, value]
+        ),
+    ];
+  };
+
+  const [selectedRows, toggleSelectedRow] = useToggleList([]);
+
+  return (
+    <Table size={size} zebraStripes>
+      <Table.Body>
+        <Table.Row>
+          <Table.DataCell>
+            <Checkbox
+              size={size}
+              checked={selectedRows.includes("all")}
+              onChange={() => toggleSelectedRow("all")}
+            >
+              Select all
+            </Checkbox>
+          </Table.DataCell>
+          <Table.HeaderCell scope="col">Name</Table.HeaderCell>
+          <Table.HeaderCell scope="col">Age</Table.HeaderCell>
+          <Table.HeaderCell scope="col">Country</Table.HeaderCell>
+          <Table.HeaderCell scope="col">Points</Table.HeaderCell>
+        </Table.Row>
+        <Table.Row selected={selectedRows.includes("1")}>
+          <Table.DataCell>
+            <Checkbox
+              size={size}
+              hideLabel
+              checked={selectedRows.includes("1")}
+              onChange={() => toggleSelectedRow("1")}
+              aria-labelledby={`x_r1-${size}`}
+            >
+              {" "}
+            </Checkbox>
+          </Table.DataCell>
+          <Table.HeaderCell scope="row">
+            <span id={`x_r1-${size}`}>Donald Smith</span>
+          </Table.HeaderCell>
+          <Table.DataCell>32</Table.DataCell>
+          <Table.DataCell>USA</Table.DataCell>
+          <Table.DataCell>38</Table.DataCell>
+        </Table.Row>
+        <Table.Row selected={selectedRows.includes("2")}>
+          <Table.DataCell>
+            <Checkbox
+              size={size}
+              hideLabel
+              checked={selectedRows.includes("2")}
+              onChange={() => toggleSelectedRow("2")}
+              aria-labelledby={`x_r2-${size}`}
+            >
+              {" "}
+            </Checkbox>
+          </Table.DataCell>
+          <Table.HeaderCell scope="row">
+            <span id={`x_r2-${size}`}>Preben Aalborg</span>
+          </Table.HeaderCell>
+          <Table.DataCell>44</Table.DataCell>
+          <Table.DataCell>Denmark</Table.DataCell>
+          <Table.DataCell>11</Table.DataCell>
+        </Table.Row>
+        <Table.Row selected={selectedRows.includes("3")}>
+          <Table.DataCell>
+            <Checkbox
+              size={size}
+              hideLabel
+              checked={selectedRows.includes("3")}
+              onChange={() => toggleSelectedRow("3")}
+              aria-labelledby={`x_r3-${size}`}
+            >
+              {" "}
+            </Checkbox>
+          </Table.DataCell>
+          <Table.HeaderCell scope="row">
+            <span id={`x_r3-${size}`}>Rudolph Bachenmeier</span>
+          </Table.HeaderCell>
+          <Table.DataCell>32</Table.DataCell>
+          <Table.DataCell>Germany</Table.DataCell>
+          <Table.DataCell>70</Table.DataCell>
+        </Table.Row>
+      </Table.Body>
+    </Table>
+  );
+};
@@ -1,6 +1,6 @@
 {
  "name": "@navikt/ds-react-internal",
-  "version": "0.9.0",
+  "version": "0.9.2",
  "private": false,
  "description": "NAV internal designsystem react components",
  "author": "NAV Designsystem team",
@@ -34,7 +34,7 @@
  },
  "dependencies": {
    "@navikt/ds-icons": "^0.7.0",
-    "@navikt/ds-react": "^0.14.0",
+    "@navikt/ds-react": "^0.14.2",
    "@popperjs/core": "^2.10.1",
    "classnames": "^2.3.1",
    "copy-to-clipboard": "^3.3.1",
@@ -16,7 +16,7 @@
    <h4><a href="https://design.nav.no">Nettside</a> | <a href="https://github.com/navikt/nav-frontend-moduler/blob/master/CONTRIBUTING.md">Bidra</a> | <a href="https://github.com/navikt/nav-frontend-moduler/issues">Bug-rapport</a>
 </div>

-## Innhold
+## Innhold i repo

 Repoet inneholder følgende:

@@ -1,24 +0,0 @@
-# See https://help.github.com/articles/ignoring-files/ for more about ignoring files.
-
-# dependencies
-/node_modules
-/.pnp
-.pnp.js
-
-# testing
-/coverage
-
-# production
-/build
-
-# misc
-.DS_Store
-.env.local
-.env.development.local
-.env.test.local
-.env.production.local
-
-npm-debug.log*
-yarn-debug.log*
-yarn-error.log*
-package-lock.json
@@ -1,31 +0,0 @@
-# Create-React-App eksempel prosjekt
-
-Er satt opp som et enkelt oppsett som støtter bruk av designsystemet sine komponenter. Er også satt opp for bruk av riktig typografi og basestiler med `nav-frontend-core` og `nav-frontend-typografi-style`
-
-Bruker pakken `Craco` https://www.npmjs.com/package/@craco/craco for å kunne extende Webpack-features uten å ta i bruk `eject`.
-
-Satt opp for å støtte lasting av `less` filer ved hjelp av `craco-less` https://github.com/DocSpring/craco-less#readme.
-
-Prosjektet kjører `pretty-quick` on-`git commit` for automatisk kjøring av prettier, samt linting av js/ts og less on-`git push`.
-
-Development og linting:
-
-```
-yarn install
-yarn start
-```
-
-Bygging for produksjon:
-
-```
-yarn install
-yarn run build
-```
-
-For å kjøre build lokalt kan `serve` brukes:
-https://www.npmjs.com/package/serve
-
-```
-yarn install -g serve
-serve build
-```
@@ -1,9 +0,0 @@
-const { ESLINT_MODES } = require("@craco/craco");
-const CracoLessPlugin = require("craco-less");
-
-module.exports = {
-  plugins: [{ plugin: CracoLessPlugin }],
-  eslint: {
-    mode: ESLINT_MODES.file,
-  },
-};
@@ -1,73 +0,0 @@
-{
-  "name": "cra",
-  "version": "0.1.0",
-  "private": true,
-  "dependencies": {
-    "@craco/craco": "^6.0.0",
-    "@testing-library/jest-dom": "^5.11.4",
-    "@testing-library/react": "^11.1.0",
-    "@testing-library/user-event": "^12.1.10",
-    "@types/jest": "^26.0.15",
-    "@types/node": "^12.0.0",
-    "@types/react": "^16.9.53",
-    "@types/react-dom": "^16.9.8",
-    "classnames": "^2.2.6",
-    "craco": "^0.0.3",
-    "craco-less": "^1.17.1",
-    "nav-frontend-core": "^5.0.10",
-    "nav-frontend-typografi": "^3.0.0",
-    "nav-frontend-typografi-style": "^1.0.31",
-    "prop-types": "^15.7.2",
-    "react": "^17.0.1",
-    "react-dom": "^16.8.0",
-    "react-scripts": "4.0.1",
-    "typescript": "^4.0.3",
-    "web-vitals": "^0.2.4"
-  },
-  "devDependencies": {
-    "husky": "^4.3.6",
-    "prettier": "^2.2.1",
-    "pretty-quick": "^3.1.0",
-    "stylelint": "^13.8.0",
-    "stylelint-config-standard": "^20.0.0"
-  },
-  "scripts": {
-    "start": "craco start",
-    "build": "craco build",
-    "test": "craco test",
-    "eject": "craco eject",
-    "lint": "yarn lint:jsts && yarn lint:less",
-    "lint:jsts": "npx eslint .",
-    "lint:less": "npx stylelint --syntax less **/*.less"
-  },
-  "husky": {
-    "hooks": {
-      "pre-commit": "pretty-quick --staged",
-      "pre-push": "yarn lint"
-    }
-  },
-  "stylelint": {
-    "extends": "stylelint-config-standard",
-    "rules": {},
-    "ignoreFiles": []
-  },
-  "prettier": {},
-  "eslintConfig": {
-    "extends": [
-      "react-app",
-      "react-app/jest"
-    ]
-  },
-  "browserslist": {
-    "production": [
-      ">0.2%",
-      "not dead",
-      "not op_mini all"
-    ],
-    "development": [
-      "last 1 chrome version",
-      "last 1 firefox version",
-      "last 1 safari version"
-    ]
-  }
-}
@@ -1,43 +0,0 @@
-<!DOCTYPE html>
-<html lang="en">
-  <head>
-    <meta charset="utf-8" />
-    <link rel="icon" href="%PUBLIC_URL%/favicon.ico" />
-    <meta name="viewport" content="width=device-width, initial-scale=1" />
-    <meta name="theme-color" content="#000000" />
-    <meta
-      name="description"
-      content="Web site created using create-react-app"
-    />
-    <link rel="apple-touch-icon" href="%PUBLIC_URL%/logo192.png" />
-    <!--
-      manifest.json provides metadata used when your web app is installed on a
-      user's mobile device or desktop. See https://developers.google.com/web/fundamentals/web-app-manifest/
-    -->
-    <link rel="manifest" href="%PUBLIC_URL%/manifest.json" />
-    <!--
-      Notice the use of %PUBLIC_URL% in the tags above.
-      It will be replaced with the URL of the `public` folder during the build.
-      Only files inside the `public` folder can be referenced from the HTML.
-
-      Unlike "/favicon.ico" or "favicon.ico", "%PUBLIC_URL%/favicon.ico" will
-      work correctly both with client-side routing and a non-root public URL.
-      Learn how to configure a non-root public URL by running `npm run build`.
-    -->
-    <title>React App</title>
-  </head>
-  <body>
-    <noscript>You need to enable JavaScript to run this app.</noscript>
-    <div id="root"></div>
-    <!--
-      This HTML file is a template.
-      If you open it directly in the browser, you will see an empty page.
-
-      You can add webfonts, meta tags, or analytics to this file.
-      The build step will place the bundled scripts into the <body> tag.
-
-      To begin the development, run `npm start` or `yarn start`.
-      To create a production bundle, use `npm run build` or `yarn build`.
-    -->
-  </body>
-</html>
@@ -1,25 +0,0 @@
-{
-  "short_name": "React App",
-  "name": "Create React App Sample",
-  "icons": [
-    {
-      "src": "favicon.ico",
-      "sizes": "64x64 32x32 24x24 16x16",
-      "type": "image/x-icon"
-    },
-    {
-      "src": "logo192.png",
-      "type": "image/png",
-      "sizes": "192x192"
-    },
-    {
-      "src": "logo512.png",
-      "type": "image/png",
-      "sizes": "512x512"
-    }
-  ],
-  "start_url": ".",
-  "display": "standalone",
-  "theme_color": "#000000",
-  "background_color": "#ffffff"
-}
@@ -1,3 +0,0 @@
-# https://www.robotstxt.org/robotstxt.html
-User-agent: *
-Disallow:
@@ -1,7 +0,0 @@
-@import (reference) "nav-frontend-core";
-
-.app {
-  width: 100vw;
-  height: 100vh;
-  background-color: #f1f1f1;
-}
@@ -1,8 +0,0 @@
-import React from "react";
-import "./App.less";
-
-const App = (): JSX.Element => {
-  return <div className="app"></div>;
-};
-
-export default App;
@@ -1 +0,0 @@
-@import "nav-frontend-core";
@@ -1,17 +0,0 @@
-import React from "react";
-import ReactDOM from "react-dom";
-import "./index.less";
-import App from "./App";
-import reportWebVitals from "./reportWebVitals";
-
-ReactDOM.render(
-  <React.StrictMode>
-    <App />
-  </React.StrictMode>,
-  document.getElementById("root")
-);
-
-// If you want to start measuring performance in your app, pass a function
-// to log results (for example: reportWebVitals(console.log))
-// or send to an analytics endpoint. Learn more: https://bit.ly/CRA-vitals
-reportWebVitals();
@@ -1,15 +0,0 @@
-import { ReportHandler } from "web-vitals";
-
-const reportWebVitals = (onPerfEntry?: ReportHandler) => {
-  if (onPerfEntry && onPerfEntry instanceof Function) {
-    import("web-vitals").then(({ getCLS, getFID, getFCP, getLCP, getTTFB }) => {
-      getCLS(onPerfEntry);
-      getFID(onPerfEntry);
-      getFCP(onPerfEntry);
-      getLCP(onPerfEntry);
-      getTTFB(onPerfEntry);
-    });
-  }
-};
-
-export default reportWebVitals;
@@ -1,5 +0,0 @@
-// jest-dom adds custom jest matchers for asserting on DOM nodes.
-// allows you to do things like:
-// expect(element).toHaveTextContent(/react/i)
-// learn more: https://github.com/testing-library/jest-dom
-import "@testing-library/jest-dom";
@@ -1,20 +0,0 @@
-{
-  "compilerOptions": {
-    "target": "es5",
-    "lib": ["dom", "dom.iterable", "esnext"],
-    "allowJs": true,
-    "skipLibCheck": true,
-    "esModuleInterop": true,
-    "allowSyntheticDefaultImports": true,
-    "strict": true,
-    "forceConsistentCasingInFileNames": true,
-    "noFallthroughCasesInSwitch": true,
-    "module": "esnext",
-    "moduleResolution": "node",
-    "resolveJsonModule": true,
-    "isolatedModules": true,
-    "noEmit": true,
-    "jsx": "react-jsx"
-  },
-  "include": ["src"]
-}
@@ -1,3 +0,0 @@
-{
-  "extends": "next/core-web-vitals"
-}
@@ -1,34 +0,0 @@
-# See https://help.github.com/articles/ignoring-files/ for more about ignoring files.
-
-# dependencies
-/node_modules
-/.pnp
-.pnp.js
-
-# testing
-/coverage
-
-# next.js
-/.next/
-/out/
-
-# production
-/build
-
-# misc
-.DS_Store
-*.pem
-
-# debug
-npm-debug.log*
-yarn-debug.log*
-yarn-error.log*
-
-# local env files
-.env.local
-.env.development.local
-.env.test.local
-.env.production.local
-
-# vercel
-.vercel
@@ -1,34 +0,0 @@
-This is a [Next.js](https://nextjs.org/) project bootstrapped with [`create-next-app`](https://github.com/vercel/next.js/tree/canary/packages/create-next-app).
-
-## Getting Started
-
-First, run the development server:
-
-```bash
-npm run dev
-# or
-yarn dev
-```
-
-Open [http://localhost:3000](http://localhost:3000) with your browser to see the result.
-
-You can start editing the page by modifying `pages/index.tsx`. The page auto-updates as you edit the file.
-
-[API routes](https://nextjs.org/docs/api-routes/introduction) can be accessed on [http://localhost:3000/api/hello](http://localhost:3000/api/hello). This endpoint can be edited in `pages/api/hello.ts`.
-
-The `pages/api` directory is mapped to `/api/*`. Files in this directory are treated as [API routes](https://nextjs.org/docs/api-routes/introduction) instead of React pages.
-
-## Learn More
-
-To learn more about Next.js, take a look at the following resources:
-
- [Next.js Documentation](https://nextjs.org/docs) - learn about Next.js features and API.
- [Learn Next.js](https://nextjs.org/learn) - an interactive Next.js tutorial.
-
-You can check out [the Next.js GitHub repository](https://github.com/vercel/next.js/) - your feedback and contributions are welcome!
-
-## Deploy on Vercel
-
-The easiest way to deploy your Next.js app is to use the [Vercel Platform](https://vercel.com/new?utm_medium=default-template&filter=next.js&utm_source=create-next-app&utm_campaign=create-next-app-readme) from the creators of Next.js.
-
-Check out our [Next.js deployment documentation](https://nextjs.org/docs/deployment) for more details.
@@ -1,41 +0,0 @@
-/** @type {import('next').NextConfig} */
-/* eslint-disable @typescript-eslint/no-var-requires */
-/* eslint-disable no-undef */
-/**
- * Leter etter bruk av nav-frontend-* pakker og @navikt/* pakker i nermeste package.json
- * Husk å endre til riktig package.json hvis strukturen av imports er annerledes (eks yarn workspaces)
- */
-const packageJson = require("./package.json");
-const modules = [];
-const withLess = require("next-with-less");
-
-Object.keys(packageJson.dependencies).forEach((key) => {
-  /**
-   * Nextjs does not as of june 2021 support esm import/export syntax
-   * TODO: Remove this when this issue is fixed
-   *  */
-  if (key.startsWith("@navikt/") || key.startsWith("nav-frontend-")) {
-    modules.push(key);
-  }
-});
-
-const withTM = require("next-transpile-modules")(modules);
-
-module.exports = withTM(
-  withLess({
-    productionBrowserSourceMaps: true,
-
-    /**
-     * Added to support @navikt/ds-icons package, can be changed to other svg-handlers
-     */
-    webpack(config) {
-      config.module.rules.push({
-        test: /\.svg$/,
-        use: ["@svgr/webpack"],
-      });
-
-      return config;
-    },
-    reactStrictMode: true,
-  })
-);
@@ -1,24 +0,0 @@
-{
-  "name": "nextjs-app",
-  "version": "0.1.0",
-  "private": true,
-  "scripts": {
-    "dev": "next dev",
-    "build": "next build",
-    "start": "next start",
-    "lint": "next lint"
-  },
-  "dependencies": {
-    "next": "11.1.0",
-    "react": "17.0.2",
-    "react-dom": "17.0.2",
-    "next-with-less": "^1.0.0",
-    "next-transpile-modules": "^8.0.0"
-  },
-  "devDependencies": {
-    "@types/react": "17.0.17",
-    "eslint": "7.32.0",
-    "eslint-config-next": "11.1.0",
-    "typescript": "4.3.5"
-  }
-}
@@ -1,7 +0,0 @@
-import "../styles/globals.css";
-import type { AppProps } from "next/app";
-
-function MyApp({ Component, pageProps }: AppProps) {
-  return <Component {...pageProps} />;
-}
-export default MyApp;
@@ -1,13 +0,0 @@
-// Next.js API route support: https://nextjs.org/docs/api-routes/introduction
-import type { NextApiRequest, NextApiResponse } from "next";
-
-type Data = {
-  name: string;
-};
-
-export default function handler(
-  req: NextApiRequest,
-  res: NextApiResponse<Data>
-) {
-  res.status(200).json({ name: "John Doe" });
-}
@@ -1,72 +0,0 @@
-import type { NextPage } from "next";
-import Head from "next/head";
-import Image from "next/image";
-import styles from "../styles/Home.module.css";
-
-const Home: NextPage = () => {
-  return (
-    <div className={styles.container}>
-      <Head>
-        <title>Create Next App</title>
-        <meta name="description" content="Generated by create next app" />
-        <link rel="icon" href="/favicon.ico" />
-      </Head>
-
-      <main className={styles.main}>
-        <h1 className={styles.title}>
-          Welcome to <a href="https://nextjs.org">Next.js!</a>
-        </h1>
-
-        <p className={styles.description}>
-          Get started by editing{" "}
-          <code className={styles.code}>pages/index.js</code>
-        </p>
-
-        <div className={styles.grid}>
-          <a href="https://nextjs.org/docs" className={styles.card}>
-            <h2>Documentation &rarr;</h2>
-            <p>Find in-depth information about Next.js features and API.</p>
-          </a>
-
-          <a href="https://nextjs.org/learn" className={styles.card}>
-            <h2>Learn &rarr;</h2>
-            <p>Learn about Next.js in an interactive course with quizzes!</p>
-          </a>
-
-          <a
-            href="https://github.com/vercel/next.js/tree/master/examples"
-            className={styles.card}
-          >
-            <h2>Examples &rarr;</h2>
-            <p>Discover and deploy boilerplate example Next.js projects.</p>
-          </a>
-
-          <a
-            href="https://vercel.com/new?utm_source=create-next-app&utm_medium=default-template&utm_campaign=create-next-app"
-            className={styles.card}
-          >
-            <h2>Deploy &rarr;</h2>
-            <p>
-              Instantly deploy your Next.js site to a public URL with Vercel.
-            </p>
-          </a>
-        </div>
-      </main>
-
-      <footer className={styles.footer}>
-        <a
-          href="https://vercel.com?utm_source=create-next-app&utm_medium=default-template&utm_campaign=create-next-app"
-          target="_blank"
-          rel="noopener noreferrer"
-        >
-          Powered by{" "}
-          <span className={styles.logo}>
-            <Image src="/vercel.svg" alt="Vercel Logo" width={72} height={16} />
-          </span>
-        </a>
-      </footer>
-    </div>
-  );
-};
-
-export default Home;
@@ -1,4 +0,0 @@
-<svg width="283" height="64" viewBox="0 0 283 64" fill="none" 
-    xmlns="http://www.w3.org/2000/svg">
-    <path d="M141.04 16c-11.04 0-19 7.2-19 18s8.96 18 20 18c6.67 0 12.55-2.64 16.19-7.09l-7.65-4.42c-2.02 2.21-5.09 3.5-8.54 3.5-4.79 0-8.86-2.5-10.37-6.5h28.02c.22-1.12.35-2.28.35-3.5 0-10.79-7.96-17.99-19-17.99zm-9.46 14.5c1.25-3.99 4.67-6.5 9.45-6.5 4.79 0 8.21 2.51 9.45 6.5h-18.9zM248.72 16c-11.04 0-19 7.2-19 18s8.96 18 20 18c6.67 0 12.55-2.64 16.19-7.09l-7.65-4.42c-2.02 2.21-5.09 3.5-8.54 3.5-4.79 0-8.86-2.5-10.37-6.5h28.02c.22-1.12.35-2.28.35-3.5 0-10.79-7.96-17.99-19-17.99zm-9.45 14.5c1.25-3.99 4.67-6.5 9.45-6.5 4.79 0 8.21 2.51 9.45 6.5h-18.9zM200.24 34c0 6 3.92 10 10 10 4.12 0 7.21-1.87 8.8-4.92l7.68 4.43c-3.18 5.3-9.14 8.49-16.48 8.49-11.05 0-19-7.2-19-18s7.96-18 19-18c7.34 0 13.29 3.19 16.48 8.49l-7.68 4.43c-1.59-3.05-4.68-4.92-8.8-4.92-6.07 0-10 4-10 10zm82.48-29v46h-9V5h9zM36.95 0L73.9 64H0L36.95 0zm92.38 5l-27.71 48L73.91 5H84.3l17.32 30 17.32-30h10.39zm58.91 12v9.69c-1-.29-2.06-.49-3.2-.49-5.81 0-10 4-10 10V51h-9V17h9v9.2c0-5.08 5.91-9.2 13.2-9.2z" fill="#000"/>
-</svg>
@@ -1,121 +0,0 @@
-.container {
-  min-height: 100vh;
-  padding: 0 0.5rem;
-  display: flex;
-  flex-direction: column;
-  justify-content: center;
-  align-items: center;
-  height: 100vh;
-}
-
-.main {
-  padding: 5rem 0;
-  flex: 1;
-  display: flex;
-  flex-direction: column;
-  justify-content: center;
-  align-items: center;
-}
-
-.footer {
-  width: 100%;
-  height: 100px;
-  border-top: 1px solid #eaeaea;
-  display: flex;
-  justify-content: center;
-  align-items: center;
-}
-
-.footer a {
-  display: flex;
-  justify-content: center;
-  align-items: center;
-  flex-grow: 1;
-}
-
-.title a {
-  color: #0070f3;
-  text-decoration: none;
-}
-
-.title a:hover,
-.title a:focus,
-.title a:active {
-  text-decoration: underline;
-}
-
-.title {
-  margin: 0;
-  line-height: 1.15;
-  font-size: 4rem;
-}
-
-.title,
-.description {
-  text-align: center;
-}
-
-.description {
-  line-height: 1.5;
-  font-size: 1.5rem;
-}
-
-.code {
-  background: #fafafa;
-  border-radius: 5px;
-  padding: 0.75rem;
-  font-size: 1.1rem;
-  font-family: Menlo, Monaco, Lucida Console, Liberation Mono, DejaVu Sans Mono,
-    Bitstream Vera Sans Mono, Courier New, monospace;
-}
-
-.grid {
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  flex-wrap: wrap;
-  max-width: 800px;
-  margin-top: 3rem;
-}
-
-.card {
-  margin: 1rem;
-  padding: 1.5rem;
-  text-align: left;
-  color: inherit;
-  text-decoration: none;
-  border: 1px solid #eaeaea;
-  border-radius: 10px;
-  transition: color 0.15s ease, border-color 0.15s ease;
-  width: 45%;
-}
-
-.card:hover,
-.card:focus,
-.card:active {
-  color: #0070f3;
-  border-color: #0070f3;
-}
-
-.card h2 {
-  margin: 0 0 1rem 0;
-  font-size: 1.5rem;
-}
-
-.card p {
-  margin: 0;
-  font-size: 1.25rem;
-  line-height: 1.5;
-}
-
-.logo {
-  height: 1em;
-  margin-left: 0.5rem;
-}
-
-@media (max-width: 600px) {
-  .grid {
-    width: 100%;
-    flex-direction: column;
-  }
-}
@@ -1,16 +0,0 @@
-html,
-body {
-  padding: 0;
-  margin: 0;
-  font-family: -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Oxygen,
-    Ubuntu, Cantarell, Fira Sans, Droid Sans, Helvetica Neue, sans-serif;
-}
-
-a {
-  color: inherit;
-  text-decoration: none;
-}
-
-* {
-  box-sizing: border-box;
-}
@@ -1,19 +0,0 @@
-{
-  "compilerOptions": {
-    "target": "es5",
-    "lib": ["dom", "dom.iterable", "esnext"],
-    "allowJs": true,
-    "skipLibCheck": true,
-    "strict": true,
-    "forceConsistentCasingInFileNames": true,
-    "noEmit": true,
-    "esModuleInterop": true,
-    "module": "esnext",
-    "moduleResolution": "node",
-    "resolveJsonModule": true,
-    "isolatedModules": true,
-    "jsx": "preserve"
-  },
-  "include": ["next-env.d.ts", "**/*.ts", "**/*.tsx"],
-  "exclude": ["node_modules"]
-}
@@ -1,24 +0,0 @@
-# See https://help.github.com/articles/ignoring-files/ for more about ignoring files.
-
-# dependencies
-/node_modules
-/.pnp
-.pnp.js
-
-# testing
-/coverage
-
-# production
-/build
-
-# misc
-.DS_Store
-.env.local
-.env.development.local
-.env.test.local
-.env.production.local
-
-npm-debug.log*
-yarn-debug.log*
-yarn-error.log*
-package-lock.json
@@ -1,34 +0,0 @@
-# Webpack eksempel prosjekt
-
-Er satt opp som et enkelt oppsett som støtter bruk av designsystemet sine komponenter. Er også satt opp for bruk av riktig typografi og basestiler med `nav-frontend-core` og `nav-frontend-typografi-style`
-
-Prosjektet kjører `pretty-quick` on-`git commit` for automatisk kjøring av prettier, samt linting av js/ts og less on-`git push`.
-
-Development med hot-reloading og linting:
-
-```
-yarn install
-yarn start
-```
-
-Bygging for produksjon:
-
-```
-yarn install
-yarn run build
-```
-
-Bruker `copyfiles` for å kopiere `index.html` til `/dist`
-https://www.npmjs.com/package/copyfiles
-
-```
-yarn install -g copyfiles
-```
-
-For å kjøre build lokalt kan `serve` brukes:
-https://www.npmjs.com/package/serve
-
-```
-yarn install -g serve
-serve dist
-```
@@ -1,78 +0,0 @@
-{
-  "name": "webpack",
-  "version": "0.0.1",
-  "main": "index.tsx",
-  "scripts": {
-    "clean": "rimraf dist",
-    "build:js": "webpack --config ./webpack.config.js --mode production",
-    "build:html": "copyfiles -f ./public/index.html dist",
-    "build": "npm run clean && npm run build:js && npm run build:html",
-    "start": "webpack-dev-server --config ./webpack.config.js --mode development",
-    "test": "echo \"No test specified\" && exit 0",
-    "lint": "yarn lint:jsts && yarn lint:less",
-    "lint:jsts": "npx eslint .",
-    "lint:less": "npx stylelint --syntax less **/*.less"
-  },
-  "husky": {
-    "hooks": {
-      "pre-commit": "pretty-quick --staged",
-      "pre-push": "yarn lint"
-    }
-  },
-  "stylelint": {
-    "extends": "stylelint-config-standard",
-    "rules": {},
-    "ignoreFiles": []
-  },
-  "prettier": {},
-  "eslintConfig": {
-    "extends": [
-      "react-app"
-    ]
-  },
-  "author": "Name <mail@mail.com>",
-  "license": "MIT",
-  "devDependencies": {
-    "@babel/core": "^7.10.4",
-    "@babel/preset-env": "^7.10.4",
-    "@babel/preset-react": "^7.10.4",
-    "@types/react": "^16.9.46",
-    "@types/react-dom": "^16.9.8",
-    "@typescript-eslint/eslint-plugin": "^4.0.0",
-    "@typescript-eslint/parser": "^4.0.0",
-    "babel-eslint": "^10.0.0",
-    "babel-loader": "^8.1.0",
-    "copyfiles": "^2.3.0",
-    "css-loader": "^3.6.0",
-    "eslint": "^7.5.0",
-    "eslint-config-react-app": "^6.0.0",
-    "eslint-plugin-flowtype": "^5.2.0",
-    "eslint-plugin-import": "^2.22.0",
-    "eslint-plugin-jsx-a11y": "^6.3.1",
-    "eslint-plugin-react": "^7.20.3",
-    "eslint-plugin-react-hooks": "^4.0.8",
-    "file-loader": "^6.0.0",
-    "husky": "^4.3.6",
-    "less-loader": "^6.2.0",
-    "prettier": "^2.2.1",
-    "pretty-quick": "^3.1.0",
-    "react-hot-loader": "^4.12.21",
-    "style-loader": "^1.2.1",
-    "stylelint": "^13.8.0",
-    "stylelint-config-standard": "^20.0.0",
-    "ts-loader": "^8.0.2",
-    "typescript": "^3.9.7",
-    "webpack": "^4.43.0",
-    "webpack-cli": "^3.3.12",
-    "webpack-dev-server": "^3.11.0"
-  },
-  "dependencies": {
-    "classnames": "^2.2.6",
-    "nav-frontend-core": "^5.0.1",
-    "nav-frontend-typografi": "^3.0.0",
-    "nav-frontend-typografi-style": "^1.0.22",
-    "prop-types": "^15.7.2",
-    "react": "^16.13.1",
-    "react-dom": "^16.13.1"
-  }
-}
@@ -1,12 +0,0 @@
-<!DOCTYPE html>
-<html lang="no"></html>
-<html>
-  <head>
-    <meta charset="UTF-8" />
-    <title>Legacy test</title>
-  </head>
-  <body>
-    <div id="root"></div>
-    <script type="application/javascript" src="./bundle.js"></script>
-  </body>
-</html>
@@ -1,7 +0,0 @@
-@import (reference) "nav-frontend-core";
-
-.app {
-  width: 100vw;
-  height: 100vh;
-  background-color: #f1f1f1;
-}
@@ -1,8 +0,0 @@
-import React from "react";
-import "./App.less";
-
-const App = (): JSX.Element => {
-  return <div className="app"></div>;
-};
-
-export default App;
@@ -1 +0,0 @@
-@import "nav-frontend-core";
@@ -1,11 +0,0 @@
-import React from "react";
-import ReactDOM from "react-dom";
-import "./index.less";
-import App from "./App";
-
-ReactDOM.render(
-  <React.StrictMode>
-    <App />
-  </React.StrictMode>,
-  document.getElementById("root")
-);
@@ -1,21 +0,0 @@
-{
-  "compilerOptions": {
-    "target": "es6",
-    "lib": ["dom", "dom.iterable", "esnext"],
-    "skipLibCheck": true,
-    "esModuleInterop": true,
-    "allowSyntheticDefaultImports": true,
-    "strict": true,
-    "forceConsistentCasingInFileNames": true,
-    "module": "esnext",
-    "moduleResolution": "node",
-    "resolveJsonModule": true,
-    "isolatedModules": true,
-    "jsx": "react",
-    "allowJs": true,
-    "checkJs": true
-  },
-  "outDir": "./dist",
-  "include": ["src"],
-  "exclude": ["./dist/**"]
-}
@@ -1,59 +0,0 @@
-const webpack = require("webpack");
-
-module.exports = {
-  entry: "./src/index.tsx",
-  module: {
-    rules: [
-      {
-        test: /\.(js|jsx)$/,
-        exclude: /node_modules/,
-        use: ["babel-loader"],
-      },
-      {
-        test: /\.tsx?$/,
-        loader: "ts-loader",
-        exclude: /node_modules/,
-      },
-      {
-        test: /\.less$/,
-        use: [
-          {
-            loader: "style-loader",
-          },
-          {
-            loader: "css-loader",
-          },
-          {
-            loader: "less-loader",
-            options: {
-              lessOptions: {
-                strictMath: true,
-              },
-            },
-          },
-        ],
-      },
-      {
-        test: /\.(png|jpe?g|gif|svg)$/i,
-        use: [
-          {
-            loader: "file-loader",
-          },
-        ],
-      },
-    ],
-  },
-  resolve: {
-    extensions: [".js", ".jsx", ".ts", ".tsx"],
-  },
-  output: {
-    path: __dirname + "/dist",
-    publicPath: "/",
-    filename: "bundle.js",
-  },
-  plugins: [new webpack.HotModuleReplacementPlugin()],
-  devServer: {
-    contentBase: "./public",
-    hot: true,
-  },
-};
Author	SHA1	Message	Date
github-actions[bot]	ce1c6de935	Lerna versionbump [ci skip] - @navikt/ds-css@0.12.6 - @navikt/ds-react@0.14.2 - @navikt/ds-react-internal@0.9.2	2021-12-21 14:02:07 +00:00
Ken	6f430ae69c	[FIX] Switch-komponent (#1359 )	2021-12-21 14:47:59 +01:00
github-actions[bot]	ab03820591	Lerna versionbump [ci skip] - @navikt/ds-css@0.12.5	2021-12-17 12:27:25 +00:00
Andreas Nordahl	9016c9bff4	[fix] selector specificity bug in zebra table (#1370 )	2021-12-17 13:14:11 +01:00
github-actions[bot]	99ed25a0b4	Lerna versionbump [ci skip] - @navikt/ds-css@0.12.4 - @navikt/ds-react@0.14.1 - @navikt/ds-react-internal@0.9.1	2021-12-17 10:23:03 +00:00
Andreas NordahlandKen	488168f6ed	[fix] Table updates (#1369 ) * adjust table sizes * add table body row hover style * add zebra style option to table * add simple table row selection * add table row hover dark borderC * move table checkbox style to table.css * small selection table * fix token ref * a11y table story for morten * hack type errors * fix id issue * Update @navikt/core/css/table.css Co-authored-by: Ken <26967723+KenAJoh@users.noreply.github.com> * Update @navikt/core/css/table.css Co-authored-by: Ken <26967723+KenAJoh@users.noreply.github.com> * Update @navikt/core/css/table.css Co-authored-by: Ken <26967723+KenAJoh@users.noreply.github.com> * define table css custom props Co-authored-by: Ken <26967723+KenAJoh@users.noreply.github.com>	2021-12-17 11:10:19 +01:00
Ken	12d81f8553	[ci skip] Fjernet ubrukte eksempler	2021-12-16 15:47:49 +01:00
Ken	abcee8bad6	[ci skip] fjernet cron-job tokens	2021-12-16 15:37:46 +01:00
github-actions[bot]	815b07c3ff	Lerna versionbump [ci skip] - @navikt/ds-css@0.12.3	2021-12-16 10:04:44 +00:00
Ken	942d0c522a	[FIX] FIkser bakgrunn for textarea (#1368 )	2021-12-16 10:52:01 +01:00
Ken	34dfa9d1ee	exitZeroOnChanges: false chromatic workflow	2021-12-15 22:57:46 +01:00
Ken	fa3032d13c	chromatic workflow	2021-12-15 22:09:47 +01:00
Ken	b12086625a	[ci skip] chromatic workflow	2021-12-15 17:56:32 +01:00
Ken	c1e78d0359	[ci skip] chromatic workflow	2021-12-15 16:36:19 +01:00
Ken	7fbad47841	[ci skip] chromatic workflow	2021-12-15 15:13:07 +01:00
Ken	3c426e07e7	[ci skip] chromatic-workflow	2021-12-15 15:06:55 +01:00
Ken	662ab4cbfd	[ci skip] Tester endring i conditionals, chromatic-workflow	2021-12-15 14:45:49 +01:00
Ken	85a816e415	[ci skip] Finner nå riktig chromatic comment i pr	2021-12-15 14:26:59 +01:00
Ken	613339f289	[ci skip] logger chromatic output	2021-12-14 17:17:10 +01:00
Ken	48b42c0a8f	[ci skip] fikset comments	2021-12-14 16:57:28 +01:00
Ken	a28b70343a	get status for chromatic build in comments	2021-12-14 16:39:29 +01:00
Ken	762fa3ef08	continue-on-error for chromatic error	2021-12-14 16:17:18 +01:00
Ken	8bf95d7c58	splittet push og pr build	2021-12-14 15:39:25 +01:00
Ken	3a08d0e25c	la til commit-sha i chromatic melding	2021-12-14 15:21:31 +01:00
Ken	685b443374	chromatic-status fix	2021-12-14 15:18:22 +01:00
Ken	d107eecc93	la til chromatic status i comment	2021-12-14 15:06:20 +01:00
Ken	879d8f6306	workflow for chromatic pr, fjernet vercel	2021-12-14 15:04:06 +01:00
github-actions[bot]	6641304e0e	Lerna versionbump [ci skip] - @navikt/ds-css@0.12.2	2021-12-14 11:03:29 +00:00
Ken	d56d329547	[FIX] button:disabled opacity til 0.3, tidligere 30% (#1363 )	2021-12-14 11:48:29 +01:00
Ken	afefca5b46	Update chromatic.yml	2021-12-14 11:30:57 +01:00
Ken	918a189c3e	oppdatert workflow	2021-12-14 11:15:13 +01:00
Ken	bef36ccf81	workflow for chromatic PR	2021-12-14 11:13:13 +01:00
github-actions[bot]	80ad6349e2	Lerna versionbump [ci skip] - @navikt/ds-css@0.12.1	2021-12-13 12:41:19 +00:00
Ken	67dc10d290	[FIX] active:disabled styling for button (#1360 )	2021-12-13 13:25:59 +01:00
Ken	05477b273e	fikset alias for vercel deploy	2021-12-13 11:23:13 +01:00
Ken	0b05928f69	vercel workflow- kjører ikke dev på master push	2021-12-13 11:02:41 +01:00
Ken	f5b2012245	vercel workflow fix	2021-12-13 11:01:08 +01:00
Ken	3b59d03bca	vercel workflow	2021-12-13 10:59:48 +01:00
Ken	794c6fea4e	oppdatert gitignore	2021-12-13 10:51:10 +01:00
Ken	01cc0b3703	Update README.md	2021-12-10 13:13:49 +01:00