Lerna versionbump [ci skip]

- @navikt/ds-css@0.12.6
 - @navikt/ds-react@0.14.2
 - @navikt/ds-react-internal@0.9.2

@navikt/core/css/form/index.css

@@ -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";

@navikt/core/css/form/switch.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;
+}

@navikt/core/css/package.json

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

@navikt/core/css/table.css

@@ -47,7 +47,7 @@
 
 .navds-table--zebra-stripes
   .navds-table__body
-  .navds-table__row:nth-of-type(odd):not(:hover) {
+  .navds-table__row:nth-of-type(odd):not(:hover):not(.navds-table__row--selected) {
   background-color: var(--navds-table-row-color-background-zebra);
 }
 

@navikt/core/react/package.json

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

@navikt/core/react/src/form/Switch.tsx

@@ -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;

@navikt/core/react/src/form/index.ts

@@ -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";

@navikt/core/react/src/form/stories/switch.stories.mdx

@@ -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>

@navikt/core/react/src/form/stories/switch.stories.tsx

@@ -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>
+  );
+};

@navikt/core/react/src/table/stories/table.stories.tsx

@@ -142,7 +142,7 @@ const SelectionTable = ({ size = "medium" }: { size?: "small" | "medium" }) => {
   const [selectedRows, toggleSelectedRow] = useToggleList([]);
 
   return (
-    <Table size={size}>
+    <Table size={size} zebraStripes>
       <Table.Body>
         <Table.Row>
           <Table.DataCell>

@navikt/internal/react/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@navikt/ds-react-internal",
-  "version": "0.9.1",
+  "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.1",
+    "@navikt/ds-react": "^0.14.2",
     "@popperjs/core": "^2.10.1",
     "classnames": "^2.3.1",
     "copy-to-clipboard": "^3.3.1",