Lerna versionbump [ci skip]

- @navikt/ds-react@0.3.3 - nav-frontend-ekspanderbartpanel@3.1.3 - nav-frontend-hjelpetekst@2.1.3 - nav-frontend-ikonknapper@1.1.3 - nav-frontend-js-utils@1.0.18 - nav-frontend-knapper@2.1.3 - nav-frontend-lesmerpanel@1.1.2 - nav-frontend-lukknapp@1.2.1 - nav-frontend-modal@1.2.1 - nav-frontend-popover@1.1.3 - nav-frontend-skjema@3.2.3 - nav-frontend-stegindikator@1.1.2 - nav-frontend-tabs@1.1.2 - nav-frontend-tekstomrade@2.1.2 - nav-frontend-toggle@1.1.3 - nav-frontend-veileder@2.1.3 - nav-frontend-veilederpanel@1.1.3
Legger til typeguard for children i Tekstomrade-komponenten (#1089 )
2026-10-14 17:52:02 +00:00 · 2021-05-10 08:32:44 +00:00 · 2021-05-10 10:18:54 +02:00 · 2021-05-04 07:32:04 +00:00 · 2021-05-04 09:18:06 +02:00 · 2021-04-30 07:59:47 +00:00
46 changed files with 367 additions and 313 deletions
@@ -66,6 +66,18 @@
  padding-left: 3rem;
 }

+.navds-accordion-menu-collapsable
+  .navds-accordion-menu-collapsable
+  .navds-accordion-menu-collapsable
+  .navds-accordion-menu-item,
+.navds-accordion-menu-collapsable
+  .navds-accordion-menu-collapsable
+  .navds-accordion-menu-collapsable
+  .navds-accordion-menu-collapsable
+  .navds-accordion-menu-collapsable__button {
+  padding-left: 4rem;
+}
+
 .navds-accordion-menu-item:focus,
 .navds-accordion-menu-collapsable__button:focus {
  outline: 3px solid var(--navds-text-focus);
@@ -5,10 +5,7 @@
@import "Source-Sans-Pro-600.css";
@import "print.css";
@import "utility.css";
-
-html:focus-within {
-  scroll-behavior: smooth;
-}
+@import "smooth-scroll.css";

 body {
  font-family: var(--navds-font-family);
@@ -0,0 +1,27 @@
+/**
+* Solution copied from blogpost
+* https://schepp.dev/posts/smooth-scrolling-and-page-search/
+*/
+
+@keyframes smoothscroll1 {
+  from,
+  to {
+    scroll-behavior: smooth;
+  }
+}
+
+@keyframes smoothscroll2 {
+  from,
+  to {
+    scroll-behavior: smooth;
+  }
+}
+
+html {
+  animation: smoothscroll1 1s;
+}
+
+html:focus-within {
+  animation-name: smoothscroll2;
+  scroll-behavior: smooth;
+}
@@ -27,11 +27,6 @@
  padding: var(--navds-layout-padding-small);
 }

-.navds-layout__section--sticky > * {
-  top: calc(var(--navds-grid-gutter-small) + var(--decorator-sticky-offset));
-  position: sticky;
-}
-
 .navds-layout__section > *:not(:last-child) {
  margin-bottom: var(--navds-layout-padding-small);
 }
@@ -59,6 +54,22 @@
 }

@media (min-width: 648px) {
+  /* prettier-ignore */
+  .navds-layout__container--2-columns > .navds-layout__section--left.navds-layout__section--sticky {
+    /* TEMP Solution until dekratøren has updated */
+    --navds-sidebar-sticky-offset: var(--decorator-sticky-offset);
+
+    top: calc(
+      var(--navds-grid-gutter-small) + var(--navds-sidebar-sticky-offset)
+    );
+    position: sticky;
+    max-height: calc(
+      100vh - var(--navds-grid-gutter-small) * 2 -
+        var(--navds-sidebar-sticky-offset)
+    );
+    overflow-y: auto;
+  }
+
  .navds-layout__container {
    grid-gap: var(--navds-grid-gutter-medium-and-larger);
  }
@@ -104,6 +115,22 @@
 }

@media (min-width: 960px) {
+  /* prettier-ignore */
+  .navds-layout__container--3-columns > .navds-layout__section--left.navds-layout__section--sticky {
+    /* TEMP Solution until dekratøren has updated */
+    --navds-sidebar-sticky-offset: var(--decorator-sticky-offset);
+
+    top: calc(
+      var(--navds-grid-gutter-small) + var(--navds-sidebar-sticky-offset)
+    );
+    position: sticky;
+    max-height: calc(
+      100vh - var(--navds-grid-gutter-small) * 2 -
+        var(--navds-sidebar-sticky-offset)
+    );
+    overflow-y: auto;
+  }
+
  .navds-layout__section--padding.navds-layout__section--left > * {
    padding: var(--navds-layout-padding-small);
  }
@@ -156,6 +183,7 @@

 .navds-layout__body {
  background: var(--navds-layout-background-gray);
+  scroll-margin-block: 2rem;
 }

 .navds-layout__body--white {
@@ -231,28 +259,35 @@
  display: flex;
  align-items: center;
  font-weight: 600;
+  font-size: 14px;
 }

-.navds-layout__panel-copy-icon {
-  color: var(--navds-color-text-link);
-  margin-right: 0.5rem;
-  height: 1.5rem;
-  width: 1.5rem;
+.navds-layout__panel-copy + .navds-copy-to-clipboard__popover {
+  background-color: var(--navds-color-gray-90);
+  color: var(--navds-color-white);
+  font-size: 14px;
 }

 .navds-layout__panel-popover-content {
  margin: 0.5rem;
 }

-.navds-layout__panel-copy-button {
-  display: flex;
-  align-items: center;
-  cursor: pointer;
-  background: transparent;
-  margin: 0 1rem 0 0;
-  padding-left: 0;
-  padding-right: 0;
-  border: 0;
+.navds-layout__panel-copy-anchor:hover {
+  text-decoration: underline;
+}
+
+.navds-layout__panel-anchor {
+  position: relative;
+  top: -2.5rem;
+}
+
+.navds-layout__panel-anchor--child {
+  position: absolute;
+}
+
+.navds-layout__panel-anchor--child--icon {
+  position: absolute;
+  margin-top: -2rem;
 }

@media (min-width: 448px) {
@@ -1,6 +1,6 @@
 {
  "name": "@navikt/ds-css",
-  "version": "0.2.10",
+  "version": "0.3.2",
  "private": false,
  "description": "Css for NAV Designsystem components",
  "author": "NAV Designsystem team",
@@ -21,7 +21,7 @@
    "watch-css": "postcss -w --use postcss-import -o dist/index.css index.css"
  },
  "devDependencies": {
-    "@navikt/ds-tokens": "^0.1.2",
+    "@navikt/ds-tokens": "^0.1.3",
    "normalize.css": "^8.0.1",
    "postcss": "^8.2.7",
    "postcss-cli": "^8.3.1",
@@ -1,6 +1,6 @@
 {
  "name": "@navikt/ds-react",
-  "version": "0.2.14",
+  "version": "0.3.3",
  "private": false,
  "description": "NAV designsystem react components",
  "author": "NAV Designsystem team",
@@ -13,7 +13,11 @@ export interface ActiveAnchorStore {
 }

 export const ActiveAnchorContext = createContext({} as ActiveAnchorStore);
-export const ActiveAnchorProvider = ({ children }) => {
+export const ActiveAnchorProvider = ({
+  children,
+}: {
+  children: React.ReactNode;
+}) => {
  const [anchors, setAnchors] = useState<string[]>([]);
  const [activeAnchor, setActiveAnchor] = useState<string>();

@@ -21,7 +25,7 @@ export const ActiveAnchorProvider = ({ children }) => {
    const scrollListener = () => {
      const offset = 100;
      const lastPassedAnchor = anchors
-        .map((anchor) => document.getElementById(anchor))
+        .map((anchor) => document.getElementById(anchor) as HTMLElement)
        .map((element: HTMLElement) => ({
          id: element.id,
          top: element.getBoundingClientRect().top - offset,
@@ -40,7 +44,7 @@ export const ActiveAnchorProvider = ({ children }) => {
        const urlWithoutHash = href.replace(hash, "");
        const urlWithAnchor = `${urlWithoutHash}#${lastPassedAnchor}`;
        const title = document.title;
-        window.history.pushState(lastPassedAnchor, title, urlWithAnchor);
+        window.history.replaceState(window.history.state, title, urlWithAnchor);
        setActiveAnchor(lastPassedAnchor);
      }
    };
@@ -5,7 +5,11 @@ import {
  AccordionAnchorMenuItem as Item,
 } from "../index";
 import { useEffect } from "react";
-import { ProductPageLayout } from "../../index";
+import {
+  ProductPageLayout as Layout,
+  ProductPageSection as Section,
+  ProductPagePanel as Panel,
+} from "../../index";
 import { Right } from "../../layouts/stories/components/sections/Right";
 import { LightBulb, Telephone } from "@navikt/ds-icons";
 import { MainOne } from "../../layouts/stories/components/sections/Main";
@@ -35,9 +39,9 @@ export default {
 };

 export const All = () => (
-  <ProductPageLayout title={"Nunc et lorem"}>
-    <ProductPageLayout.Section left sticky withPadding={false}>
-      <Menu title={"Minima"} smoothScrollBehavior>
+  <Layout title={"Nunc et lorem"}>
+    <Section left sticky withPadding={false}>
+      <Menu title={"Minima"}>
        <Item href={"#leo-quis"}>Leo quis</Item>
        <Collapsable title={"Proin accumsan"}>
          <Item href={"#nulla-pariatur"}>Nulla pariatur</Item>
@@ -45,39 +49,36 @@ export const All = () => (
        </Collapsable>
        <Item href={"#maecenas-in-pretium"}>Maecenas in pretium</Item>
      </Menu>
-    </ProductPageLayout.Section>
-    <ProductPageLayout.Section whiteBackground={false} withPadding={false}>
-      <ProductPageLayout.Panel
+    </Section>
+    <Section whiteBackground={false} withPadding={false}>
+      <Panel
        title={"Leo quis"}
        anchor={"leo-quis"}
        highlight={true}
        icon={<LightBulb />}
      >
        <MainOne title={false} />
-      </ProductPageLayout.Panel>
-      <ProductPageLayout.Panel
-        title={"Proin accumsan"}
-        anchor={"proin-accumsan"}
-      >
+      </Panel>
+      <Panel title={"Proin accumsan"} anchor={"proin-accumsan"}>
        <MainTwo title={false} />
-      </ProductPageLayout.Panel>
-      <ProductPageLayout.Panel
+      </Panel>
+      <Panel
        title={"Maecenas in pretium"}
        anchor={"maecenas-in-pretium"}
        icon={<Telephone />}
      >
        <MainThree title={false} />
-      </ProductPageLayout.Panel>
-    </ProductPageLayout.Section>
-    <ProductPageLayout.Section right sticky>
+      </Panel>
+    </Section>
+    <Section right sticky>
      <Right />
-    </ProductPageLayout.Section>
-  </ProductPageLayout>
+    </Section>
+  </Layout>
 );

 export const ReactRouter = () => (
-  <ProductPageLayout title={"Nunc et lorem"}>
-    <ProductPageLayout.Section left sticky withPadding={false}>
+  <Layout title={"Nunc et lorem"}>
+    <Section left sticky withPadding={false}>
      <Menu>
        <Item component={Link} to="/link1">
          Leo quis
@@ -102,34 +103,31 @@ export const ReactRouter = () => (
          Maecenas in pretium
        </Item>
      </Menu>
-    </ProductPageLayout.Section>
-    <ProductPageLayout.Section whiteBackground={false} withPadding={false}>
-      <ProductPageLayout.Panel
+    </Section>
+    <Section whiteBackground={false} withPadding={false}>
+      <Panel
        title={"Leo quis"}
        anchor={"leo-quis"}
        highlight={true}
        icon={<LightBulb />}
      >
        <MainOne title={false} />
-      </ProductPageLayout.Panel>
-      <ProductPageLayout.Panel
-        title={"Proin accumsan"}
-        anchor={"proin-accumsan"}
-      >
+      </Panel>
+      <Panel title={"Proin accumsan"} anchor={"proin-accumsan"}>
        <MainTwo title={false} />
-      </ProductPageLayout.Panel>
-      <ProductPageLayout.Panel
+      </Panel>
+      <Panel
        title={"Maecenas in pretium"}
        anchor={"maecenas-in-pretium"}
        icon={<Telephone />}
      >
        <MainThree title={false} />
-      </ProductPageLayout.Panel>
-    </ProductPageLayout.Section>
-    <ProductPageLayout.Section right sticky>
+      </Panel>
+    </Section>
+    <Section right sticky>
      <Right />
-    </ProductPageLayout.Section>
-  </ProductPageLayout>
+    </Section>
+  </Layout>
 );

 ReactRouter.decorators = [
@@ -3,7 +3,7 @@ import React from "react";
 /**
 * @ignore
 */
-const MenuItems = ({ children }) => (
+const MenuItems = ({ children }: { children: React.ReactNode }) => (
  <ul className="navds-accordion-menu__list">
    {React.Children.toArray(children).map((child, i) => (
      <li key={i} className="navds-accordion-menu__list-item">
@@ -32,14 +32,16 @@ const CopyToClipboard = forwardRef<HTMLButtonElement, CopyToClipboardProps>(
  ({ children, text, label, icon, className, ...rest }, ref) => {
    const buttonRef = useRef<HTMLButtonElement>(null);
    const mergedRef = mergeRefs([buttonRef, ref]);
-    const timeoutRef = useRef<NodeJS.Timeout>();
+    const timeoutRef = useRef<number | null>();
    const [openPopover, setOpenPopover] = useState(false);

    useEffect(() => {
-      if (openPopover) {
-        timeoutRef.current = setTimeout(() => setOpenPopover(false), 2000);
-        return () => timeoutRef.current && clearTimeout(timeoutRef.current);
-      }
+      timeoutRef.current = openPopover
+        ? window.setTimeout(() => setOpenPopover(false), 2000)
+        : null;
+      return () => {
+        timeoutRef.current && clearTimeout(timeoutRef.current);
+      };
    }, [openPopover]);

    const title = `Kopier ${label} (${text})`;
@@ -50,7 +52,7 @@ const CopyToClipboard = forwardRef<HTMLButtonElement, CopyToClipboardProps>(
    };

    return (
-      <>
+      <div>
        <Button
          ref={mergedRef}
          variant="secondary"
@@ -73,7 +75,7 @@ const CopyToClipboard = forwardRef<HTMLButtonElement, CopyToClipboardProps>(
        >
          {label}
        </Popover>
-      </>
+      </div>
    );
  }
 );
@@ -27,8 +27,8 @@ export {
 } from "./internal-header/index";
 export {
  ProductPageLayout,
-  ProductPageLayoutProps,
-  ProductPageLayoutSectionProps,
+  ProductPagePanel,
+  ProductPageSection,
 } from "./layouts/index";
 export { Link, LinkProps } from "./link/index";
 export { Modal, ModalProps } from "./modal/index";
@@ -1,3 +1,3 @@
-export { default as ProductPageLayout } from "./product-page/Layout";
-export { LayoutProps as ProductPageLayoutProps } from "./product-page/Layout";
-export { SectionProps as ProductPageLayoutSectionProps } from "./product-page/Section";
+export { default as ProductPageLayout } from "./product-page/ProductPageLayout";
+export { default as ProductPagePanel } from "./product-page/ProductPagePanel";
+export { default as ProductPageSection } from "./product-page/ProductPageSection";
@@ -1,101 +0,0 @@
-import React, { useEffect, useState } from "react";
-import { forwardRef, ReactNode } from "react";
-import cl from "classnames";
-import { Button, Heading, Popover } from "../../";
-import { Attachment } from "@navikt/ds-icons";
-import { OverridableComponent } from "../../util";
-
-export interface PanelProps {
-  props: {
-    title: string;
-    icon?: ReactNode;
-    highlight?: boolean;
-    anchor?: string;
-    whiteBackground?: boolean;
-    withPadding?: boolean;
-  } & React.HTMLAttributes<HTMLDivElement>;
-  defaultComponent: "div";
-}
-
-const Panel: OverridableComponent<PanelProps> = forwardRef(
-  (
-    {
-      title,
-      highlight,
-      icon,
-      anchor,
-      component: Component = "div",
-      className,
-      children,
-      ...rest
-    },
-    ref
-  ) => {
-    const [anchorEl, setAnchorEl] = useState<HTMLElement | null>(null);
-    const [copied, setIsCopied] = useState<boolean>(false);
-
-    useEffect(() => {
-      const header = document.getElementById("navds-layout-body");
-      header?.classList.add("navds-layout__body--padding");
-    }, []);
-
-    return (
-      <Component
-        ref={ref}
-        id={anchor}
-        className={cl(
-          "navds-layout__panel",
-          icon && "navds-layout__panel--icon-margin",
-          highlight && "navds-layout__panel--highlight",
-          className
-        )}
-        {...rest}
-      >
-        {icon && <div className={"navds-layout__panel-icon"}>{icon}</div>}
-        <Heading size={"xl"} className={"navds-layout__panel-title"} level={2}>
-          {title}
-        </Heading>
-        {anchor && (
-          <div className={"navds-layout__panel-copy"}>
-            <Button
-              ref={(el) => setAnchorEl(el)}
-              variant={"secondary"}
-              className={"navds-layout__panel-copy-button"}
-              onClick={() => {
-                setIsCopied(true);
-                const { href, hash } = window.location;
-                const urlWithoutHash = href.replace(hash, "");
-                copyToClipboard(`${urlWithoutHash}#${anchor}`);
-                setTimeout(() => {
-                  setIsCopied(false);
-                }, 1000);
-              }}
-            >
-              <Attachment className={"navds-layout__panel-copy-icon"} />
-              <span>Kopier lenke</span>
-            </Button>
-            <Popover anchorEl={anchorEl} open={copied} onClose={() => {}}>
-              <div className="navds-layout__panel-popover-content">Kopiert</div>
-            </Popover>
-          </div>
-        )}
-        <div className={"navds-layout__panel-content"}>{children}</div>
-      </Component>
-    );
-  }
-);
-
-const copyToClipboard = (text: string) => {
-  const textArea = document.createElement("textarea");
-  textArea.value = text;
-  textArea.style.top = "0";
-  textArea.style.left = "0";
-  textArea.style.position = "fixed";
-  document.body.appendChild(textArea);
-  textArea.focus();
-  textArea.select();
-  document.execCommand("copy");
-  document.body.removeChild(textArea);
-};
-
-export default Panel;
@@ -1,29 +1,23 @@
-import React, { useEffect, Children, forwardRef } from "react";
-import { ForwardRefExoticComponent, HTMLAttributes } from "react";
-import { default as Section, SectionProps } from "./Section";
-import { default as Panel, PanelProps } from "./Panel";
-import { ContentContainer, Heading, OverridableComponent } from "../../";
 import cl from "classnames";
+import React, { Children, forwardRef, HTMLAttributes, useEffect } from "react";
+import { ContentContainer, Heading } from "../../index";

-export interface LayoutWithSubComponents
-  extends ForwardRefExoticComponent<LayoutProps> {
-  Section: ForwardRefExoticComponent<SectionProps>;
-  Panel: OverridableComponent<PanelProps>;
-}
+const cls = (className, columns) =>
+  cl(
+    "navds-layout__container",
+    `navds-layout__container--${columns}-columns`,
+    className
+  );

-export interface LayoutProps extends HTMLAttributes<HTMLElement> {
+export interface ProductPageLayoutProps extends HTMLAttributes<HTMLElement> {
  title: string;
  children?: React.ReactNode;
+  className?: string;
 }

-const Layout = forwardRef<HTMLDivElement, LayoutProps>(
+const ProductPageLayout = forwardRef<HTMLDivElement, ProductPageLayoutProps>(
  ({ children, title, className, ...rest }, ref) => {
    const columns = Children.toArray(children).length;
-    const classNames = cl(
-      "navds-layout__container",
-      `navds-layout__container--${columns}-columns`,
-      className
-    );

    useEffect(() => {
      const layoutBody = document.getElementById("navds-layout-body");
@@ -39,7 +33,7 @@ const Layout = forwardRef<HTMLDivElement, LayoutProps>(
      <div ref={ref}>
        <div id={"navds-layout-header"} className={"navds-layout__header"}>
          <ContentContainer>
-            <div className={classNames} {...rest}>
+            <div className={cls(className, columns)} {...rest}>
              <div className={cl("navds-layout__header-content")}>
                <Heading
                  size={"xxl"}
@@ -54,7 +48,7 @@ const Layout = forwardRef<HTMLDivElement, LayoutProps>(
        </div>
        <div id={"navds-layout-body"} className={"navds-layout__body"}>
          <ContentContainer>
-            <div className={classNames} {...rest}>
+            <div className={cls(className, columns)} {...rest}>
              {children}
            </div>
          </ContentContainer>
@@ -62,8 +56,6 @@ const Layout = forwardRef<HTMLDivElement, LayoutProps>(
      </div>
    );
  }
-) as LayoutWithSubComponents;
+);

-Layout.Section = Section;
-Layout.Panel = Panel;
-export default Layout;
+export default ProductPageLayout;
@@ -0,0 +1,73 @@
+import React, { useEffect, useRef } from "react";
+import { forwardRef, ReactNode } from "react";
+import cl from "classnames";
+import { Heading, CopyToClipboard } from "../../";
+import { Attachment } from "@navikt/ds-icons";
+
+export interface ProductPagePanelProps
+  extends React.HTMLAttributes<HTMLDivElement> {
+  children: React.ReactNode;
+  anchor: string;
+  className?: string;
+  title: string;
+  icon?: ReactNode;
+  highlight?: boolean;
+  whiteBackground?: boolean;
+}
+
+const ProductPagePanel = forwardRef<HTMLDivElement, ProductPagePanelProps>(
+  ({ children, className, title, highlight, icon, anchor, ...rest }, ref) => {
+    const copyRef = useRef(null);
+
+    useEffect(() => {
+      const header = document.getElementById("navds-layout-body");
+      header?.classList.add("navds-layout__body--padding");
+    }, []);
+
+    const getLink = () => {
+      const { href, hash } = window.location;
+      const urlWithoutHash = href.replace(hash, "");
+      return `${urlWithoutHash}#${anchor}`;
+    };
+
+    return (
+      <div
+        ref={ref}
+        className={cl(
+          "navds-layout__panel",
+          icon && "navds-layout__panel--icon-margin",
+          highlight && "navds-layout__panel--highlight",
+          className
+        )}
+        {...rest}
+      >
+        <div className="navds-layout__panel-anchor">
+          <div
+            id={anchor}
+            className={cl("navds-layout__panel-anchor--child", {
+              "navds-layout__panel-anchor--child--icon": !!icon,
+            })}
+          />
+        </div>
+        {icon && <div className={"navds-layout__panel-icon"}>{icon}</div>}
+        <Heading size={"xl"} className={"navds-layout__panel-title"} level={2}>
+          {title}
+        </Heading>
+
+        <CopyToClipboard
+          className="navds-layout__panel-copy"
+          ref={copyRef}
+          text={getLink()}
+          label="Kopierte lenke til panel"
+          icon={<Attachment />}
+        >
+          Kopier lenke
+        </CopyToClipboard>
+
+        <div className={"navds-layout__panel-content"}>{children}</div>
+      </div>
+    );
+  }
+);
+
+export default ProductPagePanel;
@@ -1,7 +1,8 @@
 import React, { forwardRef, HTMLAttributes } from "react";
 import cl from "classnames";

-export interface SectionProps extends HTMLAttributes<HTMLDivElement> {
+export interface ProductPageSectionProps
+  extends HTMLAttributes<HTMLDivElement> {
  left?: boolean;
  right?: boolean;
  whiteBackground?: boolean;
@@ -9,7 +10,7 @@ export interface SectionProps extends HTMLAttributes<HTMLDivElement> {
  sticky?: boolean;
 }

-const Section = forwardRef<HTMLDivElement, SectionProps>(
+const ProductPageSection = forwardRef<HTMLDivElement, ProductPageSectionProps>(
  (
    {
      left,
@@ -42,4 +43,4 @@ const Section = forwardRef<HTMLDivElement, SectionProps>(
  )
 );

-export default Section;
+export default ProductPageSection;
@@ -1,6 +1,10 @@
 import * as React from "react";
 import { useEffect } from "react";
-import { ProductPageLayout } from "../../index";
+import {
+  ProductPageLayout as Layout,
+  ProductPageSection as Section,
+  ProductPagePanel as Panel,
+} from "../../index";
 import { Left } from "./components/sections/Left";
 import { Main, MainOne, MainTwo, MainThree } from "./components/sections/Main";
 import { Right } from "./components/sections/Right";
@@ -9,7 +13,7 @@ import "./components/styles.css";

 export default {
  title: "ds-react/layouts/ProductPage",
-  component: ProductPageLayout,
+  component: Layout,
  decorators: [
    (Story) => {
      useEffect(() => {
@@ -30,73 +34,71 @@ export default {

 const title = "Nunc et lorem";
 export const ThreeColumns = () => (
-  <ProductPageLayout title={title}>
-    <ProductPageLayout.Section left sticky>
+  <Layout title={title}>
+    <Section left sticky>
      <Left />
-    </ProductPageLayout.Section>
-    <ProductPageLayout.Section whiteBackground={false} withPadding={false}>
-      <ProductPageLayout.Panel
+    </Section>
+    <Section whiteBackground={false} withPadding={false}>
+      <Panel
        title={"Leo quis"}
        anchor={"leo-quis"}
        highlight={true}
        icon={<LightBulb />}
      >
        <MainOne title={false} />
-      </ProductPageLayout.Panel>
-      <ProductPageLayout.Panel
-        title={"Proin accumsan"}
-        anchor={"proin-accumsan"}
-      >
+      </Panel>
+      <Panel title={"Proin accumsan"} anchor={"proin-accumsan"}>
        <MainTwo title={false} />
-      </ProductPageLayout.Panel>
-      <ProductPageLayout.Panel
+      </Panel>
+      <Panel
        title={"Maecenas in pretium"}
        anchor={"maecenas-in-pretium"}
        icon={<Telephone />}
      >
        <MainThree title={false} />
-      </ProductPageLayout.Panel>
-    </ProductPageLayout.Section>
-    <ProductPageLayout.Section right sticky>
+      </Panel>
+    </Section>
+    <Section right sticky>
      <Right />
-    </ProductPageLayout.Section>
-  </ProductPageLayout>
+    </Section>
+  </Layout>
 );

 export const TwoColumnsLeft = () => (
-  <ProductPageLayout title={title}>
-    <ProductPageLayout.Section left sticky>
+  <Layout title={title}>
+    <Section left sticky>
      <Left />
-    </ProductPageLayout.Section>
-    <ProductPageLayout.Section>
-      <ProductPageLayout.Panel
+      <Left />
+    </Section>
+    <Section>
+      <Panel
        title={"Leo quis"}
        anchor={"leo-quis"}
        highlight={true}
        icon={<LightBulb />}
      >
        <MainOne title={false} />
-      </ProductPageLayout.Panel>
+      </Panel>
      <Main />
-    </ProductPageLayout.Section>
-  </ProductPageLayout>
+    </Section>
+  </Layout>
 );

 export const TwoColumnsRight = () => (
-  <ProductPageLayout title={title}>
-    <ProductPageLayout.Section>
+  <Layout title={title}>
+    <Section>
      <Main />
-    </ProductPageLayout.Section>
-    <ProductPageLayout.Section right sticky>
+    </Section>
+    <Section right sticky>
      <Right />
-    </ProductPageLayout.Section>
-  </ProductPageLayout>
+    </Section>
+  </Layout>
 );

 export const OneColumn = () => (
-  <ProductPageLayout title={title}>
-    <ProductPageLayout.Section>
+  <Layout title={title}>
+    <Section>
      <Main />
-    </ProductPageLayout.Section>
-  </ProductPageLayout>
+    </Section>
+  </Layout>
 );
@@ -1,6 +1,6 @@
 {
  "name": "@navikt/ds-tokens",
-  "version": "0.1.2",
+  "version": "0.1.3",
  "private": false,
  "description": "Auto-generated design-tokens for NAV design-systems framework",
  "author": "NAV Designsystem team",
@@ -195,5 +195,10 @@ module.exports = {
        },
      },
    },
+    sidebar: {
+      sticky: {
+        offset: { value: "0" },
+      },
+    },
  },
 };
@@ -5,7 +5,6 @@ import Bash from "../code/Bash";
 import Prettier from "prettier/standalone";
 import ParserBabel from "prettier/parser-babel";
 import "./preview.css";
-import OverflowDetector from "../overflow-detector/OverflowDetector";
 import cl from "classnames";

 const prettierOptions = {
@@ -1,6 +1,6 @@
 {
  "name": "nav-frontend-ekspanderbartpanel",
-  "version": "3.1.2",
+  "version": "3.1.3",
  "main": "lib/index.js",
  "license": "MIT",
  "types": "lib/index.d.ts",
@@ -30,7 +30,7 @@
    "@types/react-collapse": "^5.0.0",
    "classnames": "^2.2.5",
    "nav-frontend-ekspanderbartpanel-style": "^1.1.2",
-    "nav-frontend-js-utils": "^1.0.17",
+    "nav-frontend-js-utils": "^1.0.18",
    "react": "^16.8.0 || ^17.0.0",
    "react-collapse": "^5.0.0"
  },
@@ -1,6 +1,6 @@
 {
  "name": "nav-frontend-hjelpetekst",
-  "version": "2.1.2",
+  "version": "2.1.3",
  "main": "lib/hjelpetekst.js",
  "types": "lib/hjelpetekst.d.ts",
  "license": "MIT",
@@ -31,8 +31,8 @@
    "classnames": "^2.2.5",
    "nav-frontend-hjelpetekst-style": "^2.1.1",
    "nav-frontend-ikoner-assets": "^2.0.10",
-    "nav-frontend-js-utils": "^1.0.17",
-    "nav-frontend-popover": "^1.1.2",
+    "nav-frontend-js-utils": "^1.0.18",
+    "nav-frontend-popover": "^1.1.3",
    "prop-types": "^15.5.10",
    "react": "^16.8.0 || ^17.0.0"
  },
@@ -1,6 +1,6 @@
 {
  "name": "nav-frontend-ikonknapper",
-  "version": "1.1.2",
+  "version": "1.1.3",
  "main": "lib/index.js",
  "types": "lib/index.d.ts",
  "license": "MIT",
@@ -25,7 +25,7 @@
  "devDependencies": {
    "nav-frontend-chevron": "^1.0.28",
    "nav-frontend-ikoner-assets": "^2.0.10",
-    "nav-frontend-knapper": "^2.1.2",
+    "nav-frontend-knapper": "^2.1.3",
    "react": "^16.8.0 || ^17.0.0"
  }
 }
@@ -1,6 +1,6 @@
 {
  "name": "nav-frontend-js-utils",
-  "version": "1.0.17",
+  "version": "1.0.18",
  "main": "lib/index.js",
  "types": "lib/index.d.ts",
  "license": "MIT",
@@ -10,7 +10,7 @@ export interface EventThrottlerProps {
 }

 export class EventThrottler extends React.Component<EventThrottlerProps> {
-  private throttled: () => void;
+  private throttled!: () => void;

  componentDidMount() {
    this.throttled = _throttle(this.props.callback, this.props.delay, {
@@ -1,6 +1,6 @@
 {
  "name": "nav-frontend-knapper",
-  "version": "2.1.2",
+  "version": "2.1.3",
  "main": "lib/index.js",
  "types": "lib/index.d.ts",
  "license": "MIT",
@@ -27,7 +27,7 @@
    "@types/classnames": "^2.2.3",
    "@types/react": "15.0.23 || ^16.0.0",
    "classnames": "^2.2.5",
-    "nav-frontend-js-utils": "^1.0.17",
+    "nav-frontend-js-utils": "^1.0.18",
    "nav-frontend-knapper-style": "^1.1.2",
    "prop-types": "^15.5.10",
    "react": "^16.8.0 || ^17.0.0"
@@ -1,6 +1,6 @@
 {
  "name": "nav-frontend-lesmerpanel",
-  "version": "1.1.1",
+  "version": "1.1.2",
  "main": "lib/lesmerpanel.js",
  "types": "lib/lesmerpanel.d.ts",
  "license": "MIT",
@@ -29,7 +29,7 @@
    "@types/react-collapse": "^5.0.0",
    "classnames": "^2.2.5",
    "nav-frontend-chevron": "^1.0.28",
-    "nav-frontend-js-utils": "^1.0.17",
+    "nav-frontend-js-utils": "^1.0.18",
    "nav-frontend-lesmerpanel-style": "^1.1.1",
    "prop-types": "^15.5.10",
    "react": "^16.8.0 || ^17.0.0",
@@ -1,6 +1,6 @@
 {
  "name": "nav-frontend-lukknapp",
-  "version": "1.1.1",
+  "version": "1.2.1",
  "main": "lib/lukknapp.js",
  "types": "lib/lukknapp.d.ts",
  "license": "MIT",
@@ -17,6 +17,10 @@ const cls = (bla, hvit, hjorne, className) =>

 export interface LukknappProps
  extends React.ButtonHTMLAttributes<HTMLButtonElement> {
+  /**
+   * Tekst som beskriver knappen for skjermleser
+   */
+  children: string;
  /**
   * Blå variant
   */
@@ -51,7 +55,7 @@ class Lukknapp extends React.Component<LukknappProps, {}> {
    overstHjorne: false,
  };

-  buttonRef: HTMLButtonElement;
+  buttonRef!: HTMLButtonElement;

  constructor(props) {
    super(props);
@@ -1,6 +1,6 @@
 {
  "name": "nav-frontend-modal",
-  "version": "1.1.2",
+  "version": "1.2.1",
  "main": "lib/index.js",
  "types": "lib/index.d.ts",
  "license": "MIT",
@@ -19,7 +19,7 @@
  "peerDependencies": {
    "@types/react-modal": "^3.1.2",
    "classnames": "^2.2.5",
-    "nav-frontend-lukknapp": "^1.0.48",
+    "nav-frontend-lukknapp": "^1.2.0",
    "nav-frontend-modal-style": "^1.0.0",
    "prop-types": "^15.5.10",
    "react": "^16.8.0 || ^17.0.0",
@@ -28,7 +28,7 @@
  "devDependencies": {
    "@types/react-modal": "^3.1.2",
    "classnames": "^2.2.5",
-    "nav-frontend-lukknapp": "^1.1.1",
+    "nav-frontend-lukknapp": "^1.2.1",
    "nav-frontend-modal-style": "^1.1.1",
    "prop-types": "^15.5.10",
    "react": "^16.8.0 || ^17.0.0",
@@ -58,9 +58,9 @@ export interface ModalProps extends Props {
 }

 class ModalWrapper extends React.Component<ModalProps, {}> {
-  closeButtonRef: Lukknapp | null;
+  closeButtonRef: Lukknapp | null | undefined;

-  modalRef: Modal | null;
+  modalRef!: Modal | null;

  static setAppElement(element) {
    Modal.setAppElement(element);
@@ -1,4 +1,4 @@
-import React from "react";
+import React, { useState } from "react";
 import Modal from "../src/index";
 import { Meta } from "@storybook/react/types-6-0";

@@ -7,34 +7,30 @@ export default {
  component: Modal,
 } as Meta;

-const Template = ({
-  closeButton,
-  isOpen,
-  shouldCloseOnOverlayClick,
-  ...args
-}) => (
-  <Modal
-    isOpen={isOpen}
-    onRequestClose={() => null}
-    closeButton={closeButton}
-    contentLabel="Min modalrute"
-  >
-    <div>
-      Innhold som vises i modal
-      <p>
-        Eu veniam nulla dolore culpa sint esse consectetur commodo non esse id.
-        Aliquip nostrud incididunt quis minim aute eiusmod non fugiat nisi.
-        Proident irure officia laboris ex in cupidatat minim cillum
-        reprehenderit velit velit aliquip duis. Velit amet consequat aliquip
-        reprehenderit consequat sunt occaecat ea aliqua incididunt fugiat enim
-        dolore.
-      </p>
-    </div>
-  </Modal>
-);
+export const All = () => {
+  const [open, setOpen] = useState(true);

-export const All = Template.bind({});
-All.args = {
-  closeButton: true,
-  isOpen: true,
+  return (
+    <>
+      <button onClick={() => setOpen(!open)}>modalstate</button>
+      <Modal
+        isOpen={open}
+        onRequestClose={() => setOpen(false)}
+        closeButton={true}
+        contentLabel="Min modalrute"
+      >
+        <div>
+          Innhold som vises i modal
+          <p>
+            Eu veniam nulla dolore culpa sint esse consectetur commodo non esse
+            id. Aliquip nostrud incididunt quis minim aute eiusmod non fugiat
+            nisi. Proident irure officia laboris ex in cupidatat minim cillum
+            reprehenderit velit velit aliquip duis. Velit amet consequat aliquip
+            reprehenderit consequat sunt occaecat ea aliqua incididunt fugiat
+            enim dolore.
+          </p>
+        </div>
+      </Modal>
+    </>
+  );
 };
@@ -1,6 +1,6 @@
 {
  "name": "nav-frontend-popover",
-  "version": "1.1.2",
+  "version": "1.1.3",
  "main": "lib/popover.js",
  "types": "lib/popover.d.ts",
  "license": "MIT",
@@ -28,7 +28,7 @@
    "@types/classnames": "^2.2.3",
    "@types/react": "15.0.23 || ^16.0.0",
    "classnames": "^2.2.5",
-    "nav-frontend-js-utils": "^1.0.17",
+    "nav-frontend-js-utils": "^1.0.18",
    "nav-frontend-popover-style": "^1.1.1",
    "prop-types": "^15.5.10",
    "react": "^16.8.0 || ^17.0.0",
@@ -1,6 +1,6 @@
 {
  "name": "nav-frontend-skjema",
-  "version": "3.2.2",
+  "version": "3.2.3",
  "main": "lib/index.js",
  "types": "lib/index.d.ts",
  "license": "MIT",
@@ -29,7 +29,7 @@
  "devDependencies": {
    "@navikt/fnrvalidator": "^1.1.0",
    "classnames": "^2.2.5",
-    "nav-frontend-js-utils": "^1.0.17",
+    "nav-frontend-js-utils": "^1.0.18",
    "nav-frontend-lenker": "^1.1.1",
    "nav-frontend-skjema-style": "^2.2.2",
    "nav-frontend-typografi": "^3.1.1",
@@ -159,6 +159,7 @@ class Textarea extends React.Component<TextareaProps> {
  }

  componentDidMount() {
+    // @ts-ignore
    requestAnimationFrame.call(window, this.updateHeight, 0);
  }

@@ -1,6 +1,6 @@
 {
  "name": "nav-frontend-stegindikator",
-  "version": "1.1.1",
+  "version": "1.1.2",
  "main": "lib/stegindikator.js",
  "types": "lib/stegindikator.d.js",
  "license": "MIT",
@@ -19,7 +19,7 @@
    "react": "^16.8.0 || ^17.0.0"
  },
  "devDependencies": {
-    "nav-frontend-js-utils": "^1.0.17",
+    "nav-frontend-js-utils": "^1.0.18",
    "nav-frontend-stegindikator-style": "^1.1.1",
    "react": "^16.8.0 || ^17.0.0"
  },
@@ -65,7 +65,7 @@ class Stegindikator extends React.Component<
    autoResponsiv: false,
  };

-  private list: HTMLOListElement;
+  private list!: HTMLOListElement;

  constructor(props: StegindikatorProps) {
    super(props);
@@ -1,6 +1,6 @@
 {
  "name": "nav-frontend-tabs",
-  "version": "1.1.1",
+  "version": "1.1.2",
  "main": "lib/tabs.js",
  "types": "lib/tabs.d.ts",
  "license": "MIT",
@@ -20,7 +20,7 @@
  },
  "devDependencies": {
    "classnames": "^2.2.5",
-    "nav-frontend-js-utils": "^1.0.17",
+    "nav-frontend-js-utils": "^1.0.18",
    "nav-frontend-tabs-style": "^1.1.1",
    "react": "^16.8.0 || ^17.0.0"
  },
@@ -24,7 +24,7 @@ export interface TabsState {
 class Tabs extends React.Component<TabsProps, TabsState> {
  static Tab = Tab;

-  private pure: TabsPure;
+  private pure!: TabsPure;

  static defaultProps: Partial<TabsProps> = {
    kompakt: false,
@@ -1,6 +1,6 @@
 {
  "name": "nav-frontend-tekstomrade",
-  "version": "2.1.1",
+  "version": "2.1.2",
  "main": "lib/tekstomrade.js",
  "types": "lib/tekstomrade.d.ts",
  "license": "MIT",
@@ -42,6 +42,11 @@ class Tekstomrade extends React.Component<TekstomradeProps> {

  render() {
    const { as, children, ingenFormattering, rules, ...rest } = this.props;
+
+    if (typeof children !== "string") {
+      return null;
+    }
+
    if (ingenFormattering) {
      return <div {...rest}>{children}</div>;
    }
@@ -1,6 +1,6 @@
 {
  "name": "nav-frontend-toggle",
-  "version": "1.1.2",
+  "version": "1.1.3",
  "main": "lib/index.js",
  "types": "lib/index.d.ts",
  "license": "MIT",
@@ -21,7 +21,7 @@
  },
  "devDependencies": {
    "classnames": "^2.2.5",
-    "nav-frontend-js-utils": "^1.0.17",
+    "nav-frontend-js-utils": "^1.0.18",
    "nav-frontend-toggle-style": "^1.1.2",
    "prop-types": "^15.5.10",
    "react": "^16.8.0 || ^17.0.0"
@@ -1,6 +1,6 @@
 {
  "name": "nav-frontend-veileder",
-  "version": "2.1.2",
+  "version": "2.1.3",
  "main": "lib/veileder.js",
  "types": "lib/veileder.d.ts",
  "license": "MIT",
@@ -21,7 +21,7 @@
  },
  "devDependencies": {
    "classnames": "^2.2.5",
-    "nav-frontend-js-utils": "^1.0.17",
+    "nav-frontend-js-utils": "^1.0.18",
    "nav-frontend-veileder-style": "^2.1.1",
    "prop-types": "^15.5.10",
    "react": "^16.8.0 || ^17.0.0"
@@ -1,6 +1,6 @@
 {
  "name": "nav-frontend-veilederpanel",
-  "version": "1.1.2",
+  "version": "1.1.3",
  "main": "lib/veilederpanel.js",
  "types": "lib/veilederpanel.d.ts",
  "license": "MIT",
@@ -21,7 +21,7 @@
  },
  "devDependencies": {
    "classnames": "^2.2.5",
-    "nav-frontend-veileder": "^2.1.2",
+    "nav-frontend-veileder": "^2.1.3",
    "nav-frontend-veilederpanel-style": "^1.1.1",
    "prop-types": "^15.5.10",
    "react": "^16.8.0 || ^17.0.0"
@@ -12,6 +12,8 @@
    "noImplicitAny": false,
    "declaration": true,
    "skipLibCheck": true,
+    "strict": true,
+    "strictFunctionTypes": false,
    "moduleResolution": "node",
    "lib": ["DOM", "es2015", "es2016", "es2017"]
  },
@@ -43,8 +43,8 @@
    "react-use-keypress": "^1.0.1",
    "rehype-slug": "^4.0.1",
    "rehype-toc": "^3.0.2",
-    "@navikt/ds-css": "^0.2.0",
-    "@navikt/ds-react": "^0.2.0",
+    "@navikt/ds-css": "*",
+    "@navikt/ds-react": "*",
    "canvg": "^3.0.7"
  },
  "devDependencies": {
Author	SHA1	Message	Date
github-actions[bot]	746943014d	Lerna versionbump [ci skip] - @navikt/ds-react@0.3.3 - nav-frontend-ekspanderbartpanel@3.1.3 - nav-frontend-hjelpetekst@2.1.3 - nav-frontend-ikonknapper@1.1.3 - nav-frontend-js-utils@1.0.18 - nav-frontend-knapper@2.1.3 - nav-frontend-lesmerpanel@1.1.2 - nav-frontend-lukknapp@1.2.1 - nav-frontend-modal@1.2.1 - nav-frontend-popover@1.1.3 - nav-frontend-skjema@3.2.3 - nav-frontend-stegindikator@1.1.2 - nav-frontend-tabs@1.1.2 - nav-frontend-tekstomrade@2.1.2 - nav-frontend-toggle@1.1.3 - nav-frontend-veileder@2.1.3 - nav-frontend-veilederpanel@1.1.3	2021-05-10 08:32:44 +00:00
Terje KarlsenandKen	9fc9ca6666	Legger til typeguard for children i Tekstomrade-komponenten (#1089 ) * legger til typeguard dersom children er falsy * Tsconfig strict + fixes (#1087) * fikset ts errors i nav-frontend * oppdatert versjoner for modal og lukknapp * sjekket endringer i storybook Co-authored-by: Ken <26967723+KenAJoh@users.noreply.github.com>	2021-05-10 10:18:54 +02:00
github-actions[bot]	f9766fd7ca	Lerna versionbump [ci skip] - @navikt/ds-css@0.3.2	2021-05-04 07:32:04 +00:00
Ken	15bb29a346	fikset sticky scroll (#1084 )	2021-05-04 09:18:06 +02:00
github-actions[bot]	3d80ac7c11	Lerna versionbump [ci skip] - @navikt/ds-react@0.3.2	2021-04-30 07:59:47 +00:00
Anders Bråthen Nomerstad	aba747c7de	Beholder state-objektet ved scrolling med anchor-menu. Bruker replaceState for å gi en mer forventet back funksjonalitet. (#1085 )	2021-04-30 09:46:21 +02:00
github-actions[bot]	e65dc3c858	Lerna versionbump [ci skip] - @navikt/ds-css@0.3.1 - @navikt/ds-react@0.3.1 - @navikt/ds-tokens@0.1.3	2021-04-29 10:39:34 +00:00
KenandAndreas Nordahl	aef2fe1349	WIP: Layout refactor (#1056 ) * oppdatert layout export navn * fikset stories * oppdatert komponenter * oppdatert copy * button -> anchor * endret anchor point * oppdatert sidebar offset * lint fix * merge fix * oppdatert refactor * oppdatert layout * fikset sticky stacking * oppdatert smoothscroll * fikset story + overridablecomponent * flyttet scroll-fix * ninja rename of smooth scrolling styling * add another level to accordion menu styling * fjernet overridablecomponent * oppdatert popover for copy-knapp * fikset sticky ved skalering * fikset sticky for 2-column left * oppdatert versjonsnummer * yarn update * r fikset dep resolution Co-authored-by: Andreas Nordahl <andnorda@gmail.com>	2021-04-29 12:26:23 +02:00