Lerna versionbump [ci skip]

- @navikt/ds-css@0.18.0
 - @navikt/ds-react@0.19.0
 - @navikt/ds-react-internal@0.14.0

@navikt/core/css/form/radio-checkbox.css

@@ -3,6 +3,9 @@
     --navds-semantic-color-component-background-light
   );
   --navds-radio-checkbox-color-text: var(--navds-semantic-color-text);
+  --navds-radio-checkbox-color-description: var(
+    --navds-semantic-color-text-muted
+  );
   --navds-radio-checkbox-color-background-hover: var(
     --navds-semantic-color-interaction-primary-hover-subtle
   );
@@ -74,7 +77,7 @@
 
 .navds-checkbox__description,
 .navds-radio__description {
-  color: var(--navds-radio-checkbox-color-text);
+  color: var(--navds-radio-checkbox-color-description);
 }
 
 .navds-checkbox--small > .navds-checkbox__input,

@navikt/core/css/form/switch.css

@@ -72,6 +72,10 @@
   padding: 0.75rem 0 0.75rem 3.25rem;
 }
 
+.navds-switch__description {
+  color: var(--navds-semantic-color-text-muted);
+}
+
 .navds-switch--right > .navds-switch__label-wrapper > .navds-switch__content {
   padding: 0.75rem 3.25rem 0.75rem 0;
 }

@navikt/core/css/package.json

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

@navikt/core/css/read-more.css

@@ -1,36 +1,33 @@
 .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);
-  text-align: left;
+  border-radius: var(--navds-border-radius-small);
+  padding: var(--navds-spacing-1) var(--navds-spacing-1) var(--navds-spacing-1)
+    2px;
+  text-align: start;
+}
+
+.navds-read-more--small {
+  padding: 2px var(--navds-spacing-1) 2px 2px;
 }
 
 .navds-read-more:hover {
-  text-decoration: none;
+  background-color: rgba(38, 38, 38, 0.06);
+}
+
+.navds-read-more:active {
+  background-color: rgba(38, 38, 38, 0.1);
 }
 
 .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 {
-  flex-shrink: 0;
-  font-size: 1.25rem;
-}
-
-.navds-read-more--open > .navds-read-more__expand-icon {
-  transform: rotate(180deg);
+  box-shadow: var(--navds-shadow-focus);
 }
 
 .navds-read-more + .ReactCollapse--collapse {
@@ -38,17 +35,44 @@
   padding-top: var(--navds-spacing-2);
 }
 
+.navds-read-more:not(.navds-read-more--open) + .ReactCollapse--collapse {
+  padding: 0;
+}
+
 .navds-read-more__content {
   display: flex;
   align-items: stretch;
-  gap: var(--navds-spacing-2);
+  gap: 10px;
+  padding: 0 var(--navds-spacing-1);
 }
 
 .navds-read-more__content::before {
   content: "";
   display: block;
   width: 2px;
-  background-color: var(--navds-semantic-color-border-muted);
-  margin: 0 9px;
+  background-color: rgba(38, 38, 38, 0.36);
+  margin: 0 7px;
   flex-shrink: 0;
 }
+
+.navds-read-more__expand-icon {
+  font-size: 1.25rem;
+  flex-shrink: 0;
+}
+
+.navds-read-more--open > .navds-read-more__expand-icon {
+  transform: rotate(-180deg);
+}
+
+.navds-read-more__expand-icon--filled {
+  display: none;
+}
+
+.navds-read-more:hover
+  > .navds-read-more__expand-icon.navds-read-more__expand-icon--filled {
+  display: inherit;
+}
+
+.navds-read-more:hover > .navds-read-more__expand-icon {
+  display: none;
+}

@navikt/core/react/package.json

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

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

@@ -50,6 +50,10 @@ export interface SwitchProps
    * @default "left"
    */
   position?: "left" | "right";
+  /**
+   * Adds a description to extend labling of Switch
+   */
+  description?: string;
 }
 
 export const Switch = forwardRef<HTMLInputElement, SwitchProps>(

@navikt/core/react/src/form/checkbox/Checkbox.tsx

@@ -29,6 +29,10 @@ export interface CheckboxProps
    * @default false
    */
   indeterminate?: boolean;
+  /**
+   * Adds a description to extend labling of Checkbox
+   */
+  description?: string;
 }
 
 export const Checkbox = forwardRef<HTMLInputElement, CheckboxProps>(

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

@@ -14,48 +14,52 @@ export const Default = (props) => {
   const [state, setState] = useState(["checkbox1"]);
 
   return (
-    <CheckboxGroup
-      legend={props.legend}
-      description={props.description}
-      value={props.controlled ? state : undefined}
-      onChange={props.controlled ? setState : undefined}
-      hideLegend={props.hideLegend}
-      error={props.errorGroup ? "Errormelding" : undefined}
-      {...props}
-    >
-      <Checkbox
-        value="checkbox1"
-        indeterminate={props.indeterminate}
-        hideLabel={props.hideLabel}
+    <div>
+      <CheckboxGroup
+        legend={props.legend}
+        description={props.description}
+        value={props.controlled ? state : undefined}
+        onChange={props.controlled ? setState : undefined}
+        hideLegend={props.hideLegend}
+        error={props.errorGroup ? "Errormelding" : undefined}
+        {...props}
       >
-        {props.children || "Apple"}
-      </Checkbox>
-      <Checkbox
-        value="checkbox2"
-        error={props.errorSingle}
-        description={
-          props.checkboxDescription ? "Orange description" : undefined
-        }
-        indeterminate={props.indeterminate}
-        hideLabel={props.hideLabel}
-      >
-        {props.children || "Orange"}
-      </Checkbox>
-      <Checkbox
-        value="checkbox3"
-        indeterminate={props.indeterminate}
-        hideLabel={props.hideLabel}
-      >
-        {props.children || "Banana"}
-      </Checkbox>
-      <Checkbox
-        value="checkbox4"
-        indeterminate={props.indeterminate}
-        hideLabel={props.hideLabel}
-      >
-        {props.children || "Melon"}
-      </Checkbox>
-    </CheckboxGroup>
+        <Checkbox
+          value="checkbox1"
+          indeterminate={props.indeterminate}
+          hideLabel={props.hideLabel}
+        >
+          {props.children || "Apple"}
+        </Checkbox>
+        <Checkbox
+          value="checkbox2"
+          error={props.errorSingle}
+          description={
+            props.checkboxDescription
+              ? "Quis laborum culpa enim amet cillum veniam."
+              : undefined
+          }
+          indeterminate={props.indeterminate}
+          hideLabel={props.hideLabel}
+        >
+          {props.children || "Orange"}
+        </Checkbox>
+        <Checkbox
+          value="checkbox3"
+          indeterminate={props.indeterminate}
+          hideLabel={props.hideLabel}
+        >
+          {props.children || "Banana"}
+        </Checkbox>
+        <Checkbox
+          value="checkbox4"
+          indeterminate={props.indeterminate}
+          hideLabel={props.hideLabel}
+        >
+          {props.children || "Melon"}
+        </Checkbox>
+      </CheckboxGroup>
+    </div>
   );
 };
 
@@ -63,6 +67,7 @@ Default.args = {
   controlled: false,
   legend: "Legend-tekst",
   checkboxDescription: false,
+  hideLabel: false,
   hideLegend: false,
   errorSingle: false,
   children: "",

@navikt/core/react/src/form/radio/Radio.tsx

@@ -15,6 +15,10 @@ export interface RadioProps
    * The value of the HTML element
    */
   value: any;
+  /**
+   * Adds a description to extend labling of Radio
+   */
+  description?: string;
 }
 
 export const Radio = forwardRef<HTMLInputElement, RadioProps>((props, ref) => {

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

@@ -1,6 +1,6 @@
+import { Meta } from "@storybook/react/types-6-0";
 import React, { useState } from "react";
 import { Radio, RadioGroup } from "../../index";
-import { Meta } from "@storybook/react/types-6-0";
 
 export default {
   title: "ds-react/Form/Radio",

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

@@ -60,7 +60,8 @@ export const useFormField = (props: FormFieldProps, prefix: string) => {
       "aria-invalid": hasError,
       "aria-describedby":
         cl(props["aria-describedby"], {
-          [inputDescriptionId]: !!props?.description,
+          [inputDescriptionId]:
+            !!props?.description && typeof props?.description === "string",
           [errorId]: showErrorMsg,
           [fieldset?.errorId ?? ""]: hasError && !!fieldset?.error,
         }) || undefined,

@navikt/core/react/src/read-more/ReadMore.tsx

@@ -3,15 +3,16 @@ import cl from "classnames";
 import { Collapse, UnmountClosed } from "react-collapse";
 import { Expand } from "@navikt/ds-icons";
 import { BodyLong } from "../typography";
+import { ExpandFilled } from "@navikt/ds-icons";
 
 export interface ReadMoreProps
   extends React.ButtonHTMLAttributes<HTMLButtonElement> {
   /**
-   * Content inside read more
+   * Content inside ReadMore
    */
   children: React.ReactNode;
   /**
-   * Read more header content
+   * ReadMore header content
    */
   header: React.ReactNode;
   /**
@@ -29,6 +30,11 @@ export interface ReadMoreProps
    * @default false
    */
   renderContentWhenClosed?: boolean;
+  /**
+   * Changes fontsize for content
+   * @default false
+   */
+  size?: "medium" | "small";
 }
 
 export const ReadMore = forwardRef<HTMLButtonElement, ReadMoreProps>(
@@ -41,6 +47,7 @@ export const ReadMore = forwardRef<HTMLButtonElement, ReadMoreProps>(
       open,
       defaultOpen = false,
       onClick,
+      size = "medium",
       ...rest
     },
     ref
@@ -53,17 +60,18 @@ export const ReadMore = forwardRef<HTMLButtonElement, ReadMoreProps>(
     const isOpened = open ?? internalOpen;
 
     return (
-      <>
+      <div>
         <button
           type="button"
           {...rest}
           className={cl(
             "navds-read-more",
             "navds-body-short",
-            "navds-body-short--small",
+            `navds-read-more--${size}`,
             className,
             {
               "navds-read-more--open": isOpened,
+              "navds-body-short--small": size === "small",
             }
           )}
           onClick={(e) => {
@@ -75,15 +83,21 @@ export const ReadMore = forwardRef<HTMLButtonElement, ReadMoreProps>(
           aria-expanded={isOpened}
           ref={ref}
         >
-          <Expand className="navds-read-more__expand-icon" aria-hidden />
+          <Expand className={"navds-read-more__expand-icon"} aria-hidden />
+          <ExpandFilled
+            className={
+              "navds-read-more__expand-icon navds-read-more__expand-icon--filled"
+            }
+            aria-hidden
+          />
           <span>{header}</span>
         </button>
         <CollapseComponent isOpened={isOpened}>
           <div className="navds-read-more__content">
-            <BodyLong size="small">{children}</BodyLong>
+            <BodyLong size={size}>{children}</BodyLong>
           </div>
         </CollapseComponent>
-      </>
+      </div>
     );
   }
 );

@navikt/core/react/src/read-more/index.ts

@@ -1 +1,2 @@
-export { default as ReadMore, ReadMoreProps } from "./ReadMore";
+export { default as ReadMore } from "./ReadMore";
+export { ReadMoreProps } from "./ReadMore";

@navikt/core/react/src/read-more/read-more.stories.tsx

@@ -1,60 +0,0 @@
-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 ReadMore header text ReadMore header text ReadMore header text 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>
-    </>
-  );
-};

@navikt/core/react/src/read-more/readmore.stories.tsx

@@ -0,0 +1,56 @@
+import React, { useState } from "react";
+import { ReadMore } from ".";
+
+export default {
+  title: "ds-react/ReadMore",
+  component: ReadMore,
+  argTypes: {
+    size: {
+      control: {
+        type: "radio",
+        options: ["medium", "small"],
+      },
+    },
+  },
+};
+
+export const Default = (props) => {
+  const [state, setState] = useState(false);
+
+  return (
+    <ReadMore
+      open={props.controlled ? state : undefined}
+      onClick={() => setState((x) => !x)}
+      header="Grunnen til at vi spør om dette og i tillegg ber om vedlegg"
+      {...props}
+    >
+      Command station, this is ST 321. Code Clearance Blue. We're starting our
+      approach. Deactivate the security shield.
+    </ReadMore>
+  );
+};
+
+Default.args = {
+  controlled: false,
+  size: "medium",
+};
+
+export const Small = () => (
+  <ReadMore
+    header="Grunnen til at vi spør om dette og i tillegg ber om vedlegg"
+    size="small"
+  >
+    Command station, this is ST 321. Code Clearance Blue. We're starting our
+    approach. Deactivate the security shield.
+  </ReadMore>
+);
+
+export const Open = () => (
+  <ReadMore
+    header="Grunnen til at vi spør om dette og i tillegg ber om vedlegg"
+    defaultOpen
+  >
+    Command station, this is ST 321. Code Clearance Blue. We're starting our
+    approach. Deactivate the security shield.
+  </ReadMore>
+);

@navikt/internal/react/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@navikt/ds-react-internal",
-  "version": "0.13.7",
+  "version": "0.14.0",
   "private": false,
   "description": "NAV internal designsystem react components",
   "author": "NAV Designsystem team",
@@ -36,7 +36,7 @@
   },
   "dependencies": {
     "@navikt/ds-icons": "^0.8.13",
-    "@navikt/ds-react": "^0.18.7",
+    "@navikt/ds-react": "^0.19.0",
     "@popperjs/core": "^2.10.1",
     "classnames": "^2.3.1",
     "copy-to-clipboard": "^3.3.1",