Lerna versionbump [ci skip]

- @navikt/ds-css@0.6.3 - @navikt/ds-react@0.6.3 - @navikt/ds-tokens@0.4.3 - nav-frontend-ikonknapper@2.0.2 - nav-frontend-knapper-style@2.0.2 - nav-frontend-knapper@3.0.2 - nav-frontend-tabell-style@2.0.2 - nav-frontend-toggle-style@2.0.2 - nav-frontend-toggle@2.0.2
Button styling + oppdatert styling for ds-react komponenter (#1134 )
2026-10-16 02:32:02 +00:00 · 2021-07-02 15:03:44 +00:00 · 2021-07-02 16:50:09 +02:00 · 2021-06-24 09:02:56 +02:00 · 2021-06-23 13:53:34 +00:00 · 2021-06-23 15:41:56 +02:00
40 changed files with 564 additions and 275 deletions
@@ -5,14 +5,12 @@
 .navds-accordion {
  position: relative;
  background: var(--navds-color-background);
-  border: var(--navds-border-default);
-  border-radius: 4px;
+  border-bottom: 2px solid #c9c9c9;
 }

 .navds-accordion:hover {
-  box-shadow: var(--navds-color-hover);
-  border: var(--navds-panel-hover);
-  color: black;
+  /* color: black; */
+  border-bottom: 2px solid var(--navds-color-blue-50);
 }

 .navds-accordion:focus,
@@ -39,16 +37,16 @@

 .navds-accordion__button {
  padding: var(--navds-spacing-4);
-  border-radius: 4px;
  background: transparent;
-  border: 0;
  text-align: left;
+  border: none;
  width: 100%;
  margin-bottom: 0;
  cursor: pointer;
  display: flex;
  justify-content: space-between;
  align-items: center;
+  color: var(--navds-color-text-link);
 }

 .navds-accordion__button:hover .navds-accordion__heading {
@@ -69,3 +67,16 @@
  border-bottom-left-radius: 0;
  border-bottom-right-radius: 0;
 }
+
+.navds-accordion__chevron--filled {
+  display: none;
+}
+
+.navds-accordion__button:hover
+  > .navds-accordion__chevron.navds-accordion__chevron--filled {
+  display: inherit;
+}
+
+.navds-accordion__button:hover > .navds-accordion__chevron {
+  display: none;
+}
@@ -2,20 +2,20 @@
  border-radius: 4px;
  border: var(--navds-border-default);

-  /* Padding calculated based on 16px font for 64px tall alert */
-  padding: 1.1875rem var(--navds-spacing-4);
+  /* Padding calculated based on 18px font for 64px tall alert */
+  padding: 1.0625rem var(--navds-spacing-4);
  display: grid;
  grid-auto-flow: column;
-  column-gap: 0.75rem;
  justify-content: start;
 }

 .navds-alert--s {
-  border-radius: 0;
-  padding: var(--navds-spacing-2) var(--navds-spacing-4);
+  padding: 0.1875rem var(--navds-spacing-4);
 }

 .navds-alert > svg {
+  align-self: center;
+  margin-right: var(--navds-spacing-3);
  font-size: 1.5rem;
  background: radial-gradient(
    circle,
@@ -12,12 +12,12 @@
  border-width: 2px;

  /* Padding calculated based on 18px font for 44px tall button */
-  padding: calc(0.625rem - 2px) calc(var(--navds-spacing-8) - 2px);
+  padding: 0.65625rem var(--navds-spacing-3);
 }

 .navds-button--s {
  /* Padding calculated based on 16px font for 32px tall button */
-  padding: calc(0.3125rem - 2px) calc(var(--navds-spacing-4) - 2px);
+  padding: 0.25rem calc(var(--navds-spacing-4) - 2px);
 }

 .navds-button:focus {
@@ -33,16 +33,16 @@
 .navds-button--primary:active {
  color: var(--navds-color-text-inverse);
  background-color: var(--navds-color-action-hover);
-  border-width: 0;
+  border-color: transparent;

  /* Padding calculated based on 18px font for 44px tall button */
-  padding: 0.625rem var(--navds-spacing-8);
+  padding: 0.53125rem var(--navds-spacing-3);
 }

 .navds-button--primary:hover.navds-button--s,
 .navds-button--primary:active.navds-button--s {
  /* Padding calculated based on 16px font for 32px tall button */
-  padding: 0.3125rem var(--navds-spacing-4);
+  padding: 0.25rem calc(var(--navds-spacing-4) - 2px);
 }

 .navds-button--primary:active {
@@ -86,42 +86,18 @@

 .navds-button--action,
 .navds-button--danger {
-  /* Padding calculated based on 18px font for 44px tall button */
-  padding: 0.625rem var(--navds-spacing-8);
-  border-width: 0;
-  transform: translateY(calc(-1 * 2px));
-  position: relative;
-  color: var(--navds-color-text-inverse);
-}
-
-.navds-button--action.navds-button--s,
-.navds-button--danger.navds-button--s {
-  /* Padding calculated based on 16px font for 32px tall button */
-  padding: 0.3125rem var(--navds-spacing-4);
-}
-
-.navds-button--action:not(:focus),
-.navds-button--danger:not(:focus) {
-  box-shadow: inset 0 -1px 0 rgba(0, 0, 0, 0.25), 0 2px 0 rgba(0, 0, 0, 0.25);
+  color: white;
+  border-width: 1px;
 }

 .navds-button--action:hover {
  background-color: var(--navds-color-action-hover);
+  border-color: var(--navds-color-action-hover);
 }

 .navds-button--danger:hover {
  background-color: var(--navds-color-danger-hover);
-}
-
-.navds-button--danger:hover,
-.navds-button--action:hover {
-  transform: translateY(calc(-1 * 3px));
-  position: relative;
-}
-
-.navds-button--action:hover:not(:focus),
-.navds-button--danger:hover:not(:focus) {
-  box-shadow: inset 0 -1px 0 rgba(0, 0, 0, 0.25), 0 3px 0 rgba(0, 0, 0, 0.25);
+  border-color: var(--navds-color-danger-hover);
 }

 .navds-button--action:active {
@@ -132,131 +108,9 @@
  background-color: var(--navds-color-danger-active);
 }

-.navds-button--action:active,
-.navds-button--danger:active {
-  transform: translateY(0);
-  position: relative;
-}
-
-.navds-button--action:active:not(:focus),
-.navds-button--danger:active:not(:focus) {
-  box-shadow: inset 0 -1px 0 rgba(0, 0, 0, 0.25), 0 0 0 rgba(0, 0, 0, 0.25);
-}
-
-.navds-button--action:focus {
-  color: var(--navds-color-action-default);
-  background-color: var(--navds-color-background);
-}
-
+.navds-button--action:focus,
 .navds-button--danger:focus {
-  color: var(--navds-color-danger-default);
-  background-color: var(--navds-color-background);
-}
-
-.navds-button--danger:focus,
-.navds-button--action:focus {
-  /* Padding calculated based on 18px font for 44px tall button */
-  padding: calc(0.625rem - 2px) calc(var(--navds-spacing-8) - 2px);
-  transform: translateY(calc(-1 * 2px));
-  position: relative;
-  border-width: 2px;
-}
-
-.navds-button--action:focus.navds-button--s,
-.navds-button--danger:focus.navds-button--s {
-  /* Padding calculated based on 16px font for 32px tall button */
-  padding: calc(0.3125rem - 2px) calc(var(--navds-spacing-4) - 2px);
-}
-
-.navds-button--action:hover:focus {
-  background-color: var(--navds-color-action-hover);
-}
-
-.navds-button--danger:hover:focus {
-  background-color: var(--navds-color-danger-hover);
-}
-
-.navds-button--action:hover:focus,
-.navds-button--danger:hover:focus {
-  /* Padding calculated based on 18px font for 44px tall button */
-  padding: 0.625rem var(--navds-spacing-8);
-  border-width: 0;
-  color: var(--navds-color-text-inverse);
-}
-
-.navds-button--action:hover:focus.navds-button--s,
-.navds-button--danger:hover:focus.navds-button--s {
-  /* Padding calculated based on 16px font for 32px tall button */
-  padding: 0.3125rem var(--navds-spacing-4);
-}
-
-.navds-button--action:active:focus {
-  color: var(--navds-color-action-active);
-  border-color: var(--navds-color-action-active);
-}
-
-.navds-button--danger:active:focus {
-  color: var(--navds-color-danger-active);
-  border-color: var(--navds-color-danger-active);
-}
-
-.navds-button--action:active:focus,
-.navds-button--danger:active:focus {
-  /* Padding calculated based on 18px font for 44px tall button */
-  padding: calc(0.625rem - 2px) calc(var(--navds-spacing-8) - 2px);
-  transform: translateY(0);
-  position: relative;
-  border-width: 2px;
-  background-color: var(--navds-color-background);
-}
-
-.navds-button--action:active:focus.navds-button--s,
-.navds-button--danger:active:focus.navds-button--s {
-  /* Padding calculated based on 16px font for 32px tall button */
-  padding: calc(0.3125rem - 2px) calc(var(--navds-spacing-4) - 2px);
-}
-
-.navds-button--action:hover:focus:active {
-  color: var(--navds-color-text-inverse);
-  background-color: var(--navds-color-action-active);
-}
-
-.navds-button--danger:hover:focus:active {
-  color: var(--navds-color-text-inverse);
-  background-color: var(--navds-color-danger-active);
-}
-
-/**************************
- * ::before *
- **************************/
-
-.navds-button--action::before,
-.navds-button--danger::before {
-  bottom: calc(-1 * 2px);
-  height: 2px;
-  content: "";
-  display: block;
-  position: absolute;
-  left: 0;
-  right: 0;
-}
-
-.navds-button--action:hover::before,
-.navds-button--danger:hover::before {
-  bottom: calc(-1 * 3px);
-  height: 3px;
-}
-
-.navds-button--action:focus::before,
-.navds-button--danger:focus::before {
-  bottom: calc(-1 * 2px);
-  height: 2px;
-}
-
-.navds-button--action:active::before,
-.navds-button--danger:active::before {
-  bottom: 0;
-  height: 0;
+  border-color: white;
 }

 /**************************
@@ -0,0 +1,31 @@
+/*
+  MicroCard
+*/
+
+.navds-card__micro {
+  border-radius: 1rem;
+  color: var(--navds-color-text-primary);
+  display: inline-flex;
+  padding: var(--navds-spacing-1) var(--navds-spacing-2);
+  text-decoration: none;
+  background-color: var(--navds-color-orange-20);
+  border: 1px solid transparent;
+}
+
+.navds-card__micro:hover {
+  background-color: var(--navds-color-white);
+  border-color: var(--navds-color-blue-50);
+  color: var(--navds-color-blue-50);
+}
+
+.navds-card__micro:focus {
+  background-color: var(--navds-color-white);
+  color: var(--navds-color-blue-50);
+  outline: none;
+  box-shadow: var(--navds-shadow-focus);
+}
+
+.navds-card__micro:active {
+  background-color: var(--navds-color-blue-70);
+  color: var(--navds-color-white);
+}
@@ -0,0 +1,63 @@
+.navds-header {
+  display: flex;
+  justify-content: center;
+  background-color: var(--navds-color-background);
+  padding-top: 1.5rem;
+  padding-bottom: 1.5rem;
+  padding-left: calc((100vw - 100%) / 2);
+  padding-right: calc((100vw - 100%) / 2);
+  margin-left: calc((100vw - 100%) / -2);
+  margin-right: calc((100vw - 100%) / -2);
+}
+
+.navds-header__wrapper {
+  width: 100%;
+  max-width: 56.5rem;
+  text-align: start;
+}
+
+.navds-header__title {
+  display: flex;
+  margin: 0 auto;
+  width: 100%;
+  position: relative;
+  flex-direction: column;
+}
+
+.navds-header--left > .navds-header__wrapper {
+  text-align: start;
+}
+
+.navds-header--center > .navds-header__wrapper {
+  text-align: center;
+}
+
+.navds-header__illustration {
+  margin-right: 1.5rem;
+  pointer-events: none;
+}
+
+.navds-header__illustration > svg {
+  width: 5rem;
+  height: 5rem;
+}
+
+.navds-header--situation {
+  box-shadow: 0 -4px 0 var(--navds-color-orange-40) inset;
+}
+.navds-header--product {
+  box-shadow: 0 -4px 0 var(--navds-color-green-40) inset;
+}
+.navds-header--guide {
+  box-shadow: 0 -4px 0 var(--navds-color-deepblue-40) inset;
+}
+
+@media (max-width: 649px) {
+  .navds-header__illustration > svg {
+    width: 3rem;
+    height: 3rem;
+  }
+  .navds-header__title {
+    font-size: var(--navds-font-size-title-xl);
+  }
+}
@@ -8,8 +8,10 @@
@import "accordion-menu.css";
@import "alert.css";
@import "button.css";
+@import "card.css";
@import "content-container.css";
@import "copy-to-clipboard.css";
+@import "header.css";
@import "internal-header.css";
@import "link.css";
@import "modal.css";
@@ -2,7 +2,7 @@
 * .navds-header *
 **************************/

-.navds-header {
+.navds-interal-header {
  display: flex;
  align-items: center;
  background: var(--navds-color-darkgray);
@@ -11,16 +11,16 @@
  min-height: 50px;
 }

-.navds-header__column {
+.navds-interal-header__column {
  display: flex;
  align-items: center;
 }

 /**************************
-  * .navds-header__title *
+  * .navds-interal-header__title *
  **************************/

-.navds-header__title {
+.navds-interal-header__title {
  padding: 0 var(--navds-spacing-6);
  border-right: 1px solid var(--navds-color-gray-40);
  display: flex;
@@ -31,21 +31,21 @@
  color: var(--navds-color-text-inverse);
 }

-.navds-header__title > span > a {
+.navds-interal-header__title > span > a {
  text-decoration: none;
  color: inherit;
 }

-.navds-header__title > span > a:focus {
+.navds-interal-header__title > span > a:focus {
  box-shadow: var(--navds-shadow-focus-on-dark);
  outline: none;
 }

 /**************************
-  * .navds-header__user *
+  * .navds-interal-header__user *
  **************************/

-.navds-header__user {
+.navds-interal-header__user {
  color: var(--navds-color-text-inverse);
  padding: 0 var(--navds-spacing-6);
  margin-left: auto;
@@ -55,6 +55,6 @@
  align-items: center;
 }

-.navds-header__name.navds-body-short {
+.navds-interal-header__name.navds-body-short {
  margin-right: var(--navds-spacing-4);
 }
@@ -1,6 +1,6 @@
 {
  "name": "@navikt/ds-css",
-  "version": "0.6.1",
+  "version": "0.6.3",
  "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.4.1",
+    "@navikt/ds-tokens": "^0.4.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.6.1",
+  "version": "0.6.3",
  "private": false,
  "description": "NAV designsystem react components",
  "author": "NAV Designsystem team",
@@ -1,7 +1,7 @@
 import React, { forwardRef, useEffect, useState } from "react";
 import cl from "classnames";
 import { UnmountClosed, Collapse } from "react-collapse";
-import { Expand } from "@navikt/ds-icons";
+import { Expand, ExpandFilled } from "@navikt/ds-icons";
 import { v4 as uuidv4 } from "uuid";

 export interface AccordionProps
@@ -93,6 +93,13 @@ const Accordion = forwardRef<HTMLButtonElement, AccordionProps>(
              `navds-accordion__chevron--${internalOpen ? "up" : "down"}`
            )}
          />
+          <ExpandFilled
+            className={cl(
+              "navds-accordion__chevron",
+              "navds-accordion__chevron--filled",
+              `navds-accordion__chevron--${internalOpen ? "up" : "down"}`
+            )}
+          />
        </button>
        <div id={contentId} role="region" aria-labelledby={buttonId}>
          <CollapseComponent isOpened={internalOpen}>
@@ -52,7 +52,7 @@ const Alert = forwardRef<HTMLDivElement, AlertProps>(
        `navds-alert--${variant}`,
        `navds-alert--${size}`,
        "navds-body-long",
-        "navds-body--s"
+        { "navds-body--s": size === "s" }
      )}
      {...rest}
    >
@@ -36,7 +36,8 @@ const Button = forwardRef<HTMLButtonElement, ButtonProps>(
        "navds-button",
        `navds-button--${variant}`,
        `navds-button--${size}`,
-        "navds-body-short"
+        "navds-body-short",
+        { "navds-body--s": size === "s" }
      )}
      {...rest}
    />
@@ -52,7 +52,7 @@ export const All = () => {
        {variants.map((variant) => (
          <a
            key={variant}
-            className={`navds-button navds-button--${variant}`}
+            className={`navds-button navds-button--${variant} navds-body-short`}
            href="the-link"
          >
            {variant}
@@ -0,0 +1,34 @@
+import React, { forwardRef } from "react";
+import cl from "classnames";
+import { OverridableComponent } from "../util";
+
+export interface MicroCardProps {
+  props: {
+    children: string;
+    /**
+     * @ignore
+     */
+    className?: string;
+  } & React.HTMLAttributes<HTMLAnchorElement>;
+  defaultComponent: "a";
+}
+
+export const MicroCard: OverridableComponent<MicroCardProps> = forwardRef(
+  ({ className, component: Component = "a", children, ...rest }, ref) => (
+    <Component
+      ref={ref}
+      className={cl(
+        "navds-card__micro",
+        "navds-detail",
+        "navds-detail--s",
+        className
+      )}
+      title={children}
+      {...rest}
+    >
+      {children}
+    </Component>
+  )
+);
+
+export default MicroCard;
@@ -0,0 +1,2 @@
+export { default as MicroCard } from "./MicroCard";
+export * from "./MicroCard";
@@ -0,0 +1,21 @@
+import { Meta } from "@storybook/addon-docs/blocks";
+
+<Meta title="ds-react/card/intro" />
+
+# Hvordan ta i bruk card
+
+## MicroCard
+
+Kan brukes som en vanlig lenke direkte:
+
+```
+<MicroCard href="/lenke/til/side">Lenketekst</MicroCard>
+```
+
+Hvis man ønsker å ta i bruk nextjs sin `Link`-komponent:
+
+```
+<Link href="/lenke/til/side" passHref>
+  <MicroCard>Lenketekst</MicroCard>
+</Link>
+```
@@ -0,0 +1,16 @@
+import React from "react";
+import { MicroCard } from "../index";
+import { Meta } from "@storybook/react/types-6-0";
+export default {
+  title: "ds-react/card",
+  component: MicroCard,
+} as Meta;
+
+export const All = () => {
+  return (
+    <div>
+      <h2>MicroCard</h2>
+      <MicroCard href="#">Sit laborum aliqua.</MicroCard>
+    </div>
+  );
+};
@@ -0,0 +1,73 @@
+import React, { forwardRef, HTMLAttributes } from "react";
+import cl from "classnames";
+
+export interface HeaderProps extends HTMLAttributes<HTMLDivElement> {
+  /**
+   * Header title
+   */
+  children: string;
+  /**
+   * @ignore
+   */
+  className?: string;
+  /**
+   * Pictogram placed in header
+   */
+  illustration?: React.ReactNode;
+  /**
+   * Short text placed under title
+   */
+  description?: string;
+  /**
+   * Decides how to align content
+   * @default "left"
+   */
+  variant?: "left" | "center";
+  /**
+   * Predefined theming for header
+   * @default "guide"
+   */
+  theme?: "situation" | "product" | "guide";
+}
+
+const Header = forwardRef<HTMLDivElement, HeaderProps>(
+  (
+    {
+      children,
+      className,
+      illustration,
+      description,
+      theme = "guide",
+      variant = "left",
+      ...rest
+    },
+    ref
+  ) => {
+    return (
+      <div
+        ref={ref}
+        className={cl(
+          "navds-header",
+          className,
+          `navds-header--${theme}`,
+          `navds-header--${variant}`
+        )}
+        {...rest}
+      >
+        {illustration && (
+          <div className="navds-header__illustration">{illustration}</div>
+        )}
+        <div className="navds-header__wrapper">
+          <h1 className="navds-header__title navds-title navds-title--2xl">
+            {children}
+          </h1>
+          {description && (
+            <p className="navds-body-short navds-body--s">{description}</p>
+          )}
+        </div>
+      </div>
+    );
+  }
+);
+
+export default Header;
@@ -0,0 +1,2 @@
+export { default as Header } from "./Header";
+export * from "./Header";
@@ -0,0 +1,74 @@
+import React from "react";
+import { Header } from "../index";
+import { Meta } from "@storybook/react/types-6-0";
+export default {
+  title: "ds-react/header",
+  component: Header,
+} as Meta;
+
+export const All = () => {
+  return (
+    <div>
+      <h2>Header</h2>
+      <Header description="LABORIS AUTE DESERUNT ID AUTE OFFICIA SINT SUNT FUGIAT EX ET CUPIDATAT CONSEQUAT DOLORE.">
+        AUTE OFFICIA SINT SUNT FUGIAT
+      </Header>
+      <br />
+      <h2>Header m/illustration</h2>
+      <Header
+        illustration={illustrationPictogram}
+        description="LABORIS AUTE DESERUNT ID AUTE OFFICIA SINT SUNT FUGIAT EX ET CUPIDATAT CONSEQUAT DOLORE."
+      >
+        AUTE OFFICIA SINT SUNT FUGIAT
+      </Header>
+      <h2>Header center</h2>
+      <Header
+        description="LABORIS AUTE DESERUNT ID AUTE OFFICIA SINT SUNT FUGIAT EX ET CUPIDATAT CONSEQUAT DOLORE."
+        variant="center"
+      >
+        AUTE OFFICIA SINT SUNT FUGIAT
+      </Header>
+      <h2>Header center m/illustration</h2>
+      <Header
+        illustration={illustrationPictogram}
+        description="LABORIS AUTE DESERUNT ID AUTE OFFICIA SINT SUNT FUGIAT EX ET CUPIDATAT CONSEQUAT DOLORE."
+        variant="center"
+      >
+        AUTE OFFICIA SINT SUNT FUGIAT
+      </Header>
+      <h2>Header variants</h2>
+      <Header
+        description="LABORIS AUTE DESERUNT ID AUTE OFFICIA SINT SUNT FUGIAT EX ET CUPIDATAT CONSEQUAT DOLORE."
+        theme="guide"
+      >
+        AUTE OFFICIA SINT SUNT FUGIAT
+      </Header>
+      <Header
+        description="LABORIS AUTE DESERUNT ID AUTE OFFICIA SINT SUNT FUGIAT EX ET CUPIDATAT CONSEQUAT DOLORE."
+        theme="product"
+      >
+        AUTE OFFICIA SINT SUNT FUGIAT
+      </Header>
+      <Header
+        description="LABORIS AUTE DESERUNT ID AUTE OFFICIA SINT SUNT FUGIAT EX ET CUPIDATAT CONSEQUAT DOLORE."
+        theme="situation"
+      >
+        AUTE OFFICIA SINT SUNT FUGIAT
+      </Header>
+    </div>
+  );
+};
+
+/* prettier-ignore */
+const illustrationPictogram = <svg width="96" height="96" viewBox="0 0 96 96" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M37.6697 60.6469L9 31.9772L30.9772 10L59.6469 38.6697L72.1116 26.205L81 82L25.205 73.1116L37.6697 60.6469Z" fill="#FFECCC"/>
+<path d="M94.5 64.0584C94.5 72.104 88.003 78.6169 80 78.6169C71.997 78.6169 65.5 72.104 65.5 64.0584C65.5 56.0129 71.997 49.5 80 49.5C88.003 49.5 94.5 56.0129 94.5 64.0584Z" stroke="#262626" stroke-width="3"/>
+<path d="M91.9999 95.9999V95.9999C91.9999 89.3725 86.6274 83.9561 79.9999 83.9561V83.9561C73.3725 83.9561 67.9999 89.3725 67.9999 95.9999V95.9999" stroke="#262626" stroke-width="3"/>
+<ellipse cx="76.0001" cy="63.5566" rx="2" ry="2.00731" fill="#262626"/>
+<ellipse cx="84" cy="63.5566" rx="2" ry="2.00731" fill="#262626"/>
+<path d="M29 29.488V30C29 25.0515 25.866 22 22 22C18.134 22 15 25.0515 15 30V29.488" stroke="#262626" stroke-width="3"/>
+<circle cx="22" cy="15" r="5.5" stroke="#262626" stroke-width="3"/>
+<rect x="1.5" y="1.5" width="41" height="56" stroke="#262626" stroke-width="3"/>
+<path d="M10 37H27" stroke="#262626" stroke-width="3"/>
+<path d="M10 47H18.5" stroke="#262626" stroke-width="3"/>
+</svg>
@@ -25,6 +25,7 @@ export {
  InternalHeaderUser,
  InternalHeaderUserProps,
 } from "./internal-header/index";
+export { Header, HeaderProps } from "./header/index";
 export {
  ProductPageLayout,
  ProductPagePanel,
@@ -36,6 +37,7 @@ export { Popover, PopoverProps } from "./popover/index";
 export { Tag, TagProps } from "./tag/index";
 export { LinkPanel, LinkPanelProps, LinkPanelTitle } from "./link-panel/index";
 export { Panel, PanelProps } from "./panel/index";
+export { MicroCard, MicroCardProps } from "./card/index";
 export {
  Title,
  Ingress,
@@ -14,7 +14,11 @@ export interface InternalHeaderProps extends HTMLAttributes<HTMLElement> {

 const InternalHeader = forwardRef<HTMLElement, InternalHeaderProps>(
  ({ children, className, ...rest }, ref) => (
-    <header ref={ref} className={cl("navds-header", className)} {...rest}>
+    <header
+      ref={ref}
+      className={cl("navds-interal-header", className)}
+      {...rest}
+    >
      {children}
    </header>
  )
@@ -22,7 +22,7 @@ const InternalHeaderTitle = forwardRef<HTMLElement, InternalHeaderTitleProps>(
    createElement(element, {
      ...rest,
      ref,
-      className: cl("navds-header__title", "navds-label", className),
+      className: cl("navds-interal-header__title", "navds-label", className),
      children: <span>{children}</span>,
    })
 );
@@ -19,8 +19,12 @@ export interface InternalHeaderUserProps

 const InternalHeaderUser = forwardRef<HTMLDivElement, InternalHeaderUserProps>(
  ({ className, name, ident, ...rest }, ref) => (
-    <div ref={ref} className={cl("navds-header__user", className)} {...rest}>
-      <span className="navds-header__name navds-body-short navds-body--s">
+    <div
+      ref={ref}
+      className={cl("navds-interal-header__user", className)}
+      {...rest}
+    >
+      <span className="navds-interal-header__name navds-body-short navds-body--s">
        {name}
      </span>
      <span className="navds-detail navds-detail--s">{ident}</span>
@@ -0,0 +1,39 @@
+import { Meta } from "@storybook/addon-docs/blocks";
+
+<Meta title="ds-react/Typography/intro" />
+
+# Hvordan ta i bruk typografien
+
+Typografien kan tas i bruk som React komponenter eller ved å ta i bruk css-stilene.
+Se eksemplene under ds-react tabben her i storybook for å se hvordan man tar i bruk både react og stilpakken for dette oppsettet.
+
+Oppsettet er forbedret med blandt annet letter-spacing og line-height.
+I tillegg kan man nå sette `spacing` proppen og man får da automatisk margin-bottom på typo-elementet.
+Da kan man lett sikre riktig spacing mellom tekst i en artikkel.
+
+Font-size er skrevet med REM, men basert på 16px root font size.
+Dette vil si at de som har forstørret font-size på root vil ende opp med større font enn forventet.
+For de som har satt root font size til 18px (1.125rem) kan da "fikse" dette ved å endre tilbake til 16px,
+da det nye typo-oppsettet fikser større font, eller man ta i bruk css-en under.
+
+Denne stylingen vil overskrive default variablene og tilpasse font-size.
+
+```css
+/* autogenerated fix for 18px root-font-size*/
+:root {
+  --navds-font-size-title-2xl: 2.2222222222222223rem;
+  --navds-font-size-title-xl: 1.7777777777777777rem;
+  --navds-font-size-title-l: 1.5555555555555556rem;
+  --navds-font-size-title-m: 1.3333333333333333rem;
+  --navds-font-size-title-s: 1.1111111111111112rem;
+  --navds-font-size-xl: 1.1111111111111112rem;
+  --navds-font-size-l: 1rem;
+  --navds-font-size-m: 0.8888888888888888rem;
+  --navds-font-size-s: 0.7777777777777778rem;
+}
+```
+
+Vi anbefaler å før eller siden endre tilbake til default root font size da designsystemet sine nye
+komponenter og design-tokens er basert på dette. Endringen til 18px root font size var i grunn for å teste en løsning for å
+forstørre font, noe som er fikset ved nye typo-løsningen. Vi vil derfor unngå å måtte ha midlertidge patcher/fikser
+for å tilpasse systemet for alle de forskjellige variantene av font size på root.
@@ -7,73 +7,64 @@ export default {
  component: BodyLong,
 };

-export const TypoMedSpacing = () => <TypoMal spacing={true} />;
-export const TypoUtenSpacing = () => <TypoMal spacing={false} />;
+const lorem = () => (
+  <>
+    Veniam consequat cillum pariatur officia duis aute labore anim labore.
+    Pariatur ad duis do nulla.
+  </>
+);

-const TypoMal = ({ ...rest }) => {
-  const lorem = (text) => (
-    <>
-      {text} <br /> Veniam consequat cillum pariatur officia duis aute labore
-      anim labore. Pariatur ad duis do nulla.
-    </>
-  );
-  return (
-    <div
-      className="typo-story"
-      style={{
-        display: "flex",
-        flexDirection: "column",
-      }}
-    >
-      <div>
-        <Title {...rest} level={1} size="2xl">
-          {lorem("Title 2xl")}
-        </Title>
-        <Title {...rest} level={2} size="xl">
-          {lorem("Title xl")}
-        </Title>
-        <Title {...rest} level={3} size="l">
-          {lorem("Title l")}
-        </Title>
-        <Title {...rest} level={4} size="m">
-          {lorem("Title m")}
-        </Title>
-        <Title {...rest} level={5} size="s">
-          {lorem("Title s")}
-        </Title>
-      </div>
-      <div>
-        <Ingress {...rest}>{lorem("Ingress")}</Ingress>
-      </div>
-      <div>
-        <BodyLong {...rest}>{lorem("BodyLong")}</BodyLong>
-        <BodyLong {...rest} size="s">
-          {lorem("BodyLong small")}
-        </BodyLong>
-      </div>
-      <div>
-        <BodyShort component="span" {...rest} {...rest}>
-          {lorem("BodyShort")}
-        </BodyShort>
-        <BodyShort {...rest} size="s">
-          {lorem("BodyShort small")}
-        </BodyShort>
-      </div>
-      <div>
-        <Label {...rest}>{lorem("Label")}</Label>
-        <Label {...rest} size="s">
-          {lorem("Label small")}
-        </Label>
-      </div>
-      <div>
-        <Detail {...rest}>{lorem("Detail")}</Detail>
-        <Detail {...rest} size="s">
-          {lorem("Detail small")}
-        </Detail>
-      </div>
-    </div>
-  );
-};
+const TitleTemplate = ({ level, size, spacing }) => (
+  <Title spacing={spacing} size={size} level={level}>
+    {lorem()}
+  </Title>
+);
+
+export const TitleStory = TitleTemplate.bind({});
+TitleStory.args = { level: 1, size: "2xl", spacing: false };
+
+const IngressTemplate = ({ spacing }) => (
+  <Ingress spacing={spacing}>{lorem()}</Ingress>
+);
+
+export const IngressStory = IngressTemplate.bind({});
+IngressStory.args = { spacing: false };
+
+const BodyLongTemplate = ({ spacing, size }) => (
+  <BodyLong size={size} spacing={spacing}>
+    {lorem()}
+  </BodyLong>
+);
+
+export const BodyLongStory = BodyLongTemplate.bind({});
+BodyLongStory.args = { spacing: false, size: "m" };
+
+const BodyShortTemplate = ({ spacing, size }) => (
+  <BodyShort size={size} spacing={spacing}>
+    {lorem()}
+  </BodyShort>
+);
+
+export const BodyShortStory = BodyShortTemplate.bind({});
+BodyShortStory.args = { spacing: false, size: "m" };
+
+const LabelTemplate = ({ spacing, size }) => (
+  <Label size={size} spacing={spacing}>
+    {lorem()}
+  </Label>
+);
+
+export const LabelStory = LabelTemplate.bind({});
+LabelStory.args = { spacing: false, size: "m" };
+
+const DetailTemplate = ({ spacing, size }) => (
+  <Detail size={size} spacing={spacing}>
+    {lorem()}
+  </Detail>
+);
+
+export const DetailStory = DetailTemplate.bind({});
+DetailStory.args = { spacing: false, size: "m" };

 export const SideInnholdEksempel = () => {
  return (
@@ -1,6 +1,6 @@
 {
  "name": "@navikt/ds-tokens",
-  "version": "0.4.1",
+  "version": "0.4.3",
  "private": false,
  "description": "Auto-generated design-tokens for NAV design-systems framework",
  "author": "NAV Designsystem team",
@@ -68,12 +68,12 @@ module.exports = {
      disabled: { value: "{navds.color.gray.40.value}" },
      action: {
        default: { value: "{navds.color.blue.50.value}" },
-        hover: { value: Color(baseColors.blue).lighten(0.1) },
+        hover: { value: "{navds.color.blue.60.value}" },
        active: { value: "{navds.color.deepblue.50.value}" },
      },
      danger: {
        default: { value: "{navds.color.red.50.value}" },
-        hover: { value: Color(baseColors.red).lighten(0.1) },
+        hover: { value: "{navds.color.red.60.value}" },
        active: { value: "{navds.color.red.70.value}" },
      },
      error: {
@@ -95,7 +95,7 @@ module.exports = {
      border: { value: "{navds.color.gray.40.value}" },
      background: { value: "{navds.color.white.value}" },
      text: {
-        primary: { value: "{navds.color.gray.90}" },
+        primary: { value: "{navds.color.gray.90.value}" },
        inverse: { value: "{navds.color.white.value}" },
        disabled: { value: "{navds.color.gray.60.value}" },
        link: { value: "{navds.color.blue.50.value}" },
@@ -11,7 +11,7 @@
      <a href="https://github.com/navikt/nav-frontend-moduler/pulls">
          <img src="https://img.shields.io/badge/PRs-welcome-green.svg" />
      </a>
-                  <img src="https://github.com/navikt/nav-frontend-moduler/workflows/Build,%20test%20and%20maybe%20publish/badge.svg" />
+         <img src="https://github.com/navikt/nav-frontend-moduler/workflows/Build,%20test%20and%20maybe%20publish/badge.svg" />
    </p>
    <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>
@@ -1,6 +1,6 @@
 {
  "name": "nav-frontend-ikonknapper",
-  "version": "2.0.1",
+  "version": "2.0.2",
  "main": "lib/index.js",
  "types": "lib/index.d.ts",
  "license": "MIT",
@@ -25,7 +25,7 @@
  "devDependencies": {
    "nav-frontend-chevron": "^1.0.30",
    "nav-frontend-ikoner-assets": "^3.0.1",
-    "nav-frontend-knapper": "^3.0.1",
+    "nav-frontend-knapper": "^3.0.2",
    "react": "^16.8.0 || ^17.0.0"
  }
 }
@@ -1,6 +1,6 @@
 {
  "name": "nav-frontend-knapper-style",
-  "version": "2.0.1",
+  "version": "2.0.2",
  "main": "src/index.less",
  "license": "MIT",
  "files": [
@@ -12,11 +12,11 @@
 }

 .knapp--hoved {
-  .knappfylt-mixin(@navBla, @white, @navDypBla, lighten(@navBla, 5%));
+  .knappefylt-cta-mixin(@navBla, @navBlaDarken20, @navDypBla);
 }

 .knapp--fare {
-  .knappfylt-mixin(@redError, @white, darken(@redError, 5%), lighten(@redError, 5%));
+  .knappefylt-cta-mixin(@redError, @redErrorDarken20, @redErrorDarken40);
 }

 .knapp--flat {
@@ -64,6 +64,44 @@
  }
 }

+.knappefylt-cta-mixin(@bgColor, @hoverColor, @activeColor) {
+  color: white;
+  border-color: @bgColor;
+  background-color: @bgColor;
+  position: relative;
+  border-width: 1px;
+
+  &:hover {
+    background-color: @hoverColor;
+    border-color: @hoverColor;
+  }
+
+  &:hover&:focus {
+    background-color: @hoverColor;
+    border-color: @hoverColor;
+    border-color: white;
+  }
+
+  &:focus {
+    outline: none;
+    border-color: white;
+    box-shadow: 0 0 0 3px @fokusFarge;
+  }
+
+  &:active {
+    background-color: @activeColor;
+    border-color: transparent;
+    border-color: white;
+  }
+
+  &:hover&:focus&:active {
+    background-color: @activeColor;
+    border-color: @activeColor;
+    border-color: white;
+  }
+}
+
+/* Beholdes i kode for å unngå breaking change */
 .knappfylt-mixin(@bgColor, @textColor, @activeColor, @highlighColor) {
  .knapptaktil-mixin();

@@ -1,6 +1,6 @@
 {
  "name": "nav-frontend-knapper",
-  "version": "3.0.1",
+  "version": "3.0.2",
  "main": "lib/index.js",
  "types": "lib/index.d.ts",
  "license": "MIT",
@@ -28,7 +28,7 @@
    "@types/react": "15.0.23 || ^16.0.0",
    "classnames": "^2.2.5",
    "nav-frontend-js-utils": "^1.0.19",
-    "nav-frontend-knapper-style": "^2.0.1",
+    "nav-frontend-knapper-style": "^2.0.2",
    "prop-types": "^15.5.10",
    "react": "^16.8.0 || ^17.0.0"
  },
@@ -1,6 +1,6 @@
 {
  "name": "nav-frontend-tabell-style",
-  "version": "2.0.1",
+  "version": "2.0.2",
  "main": "src/index.less",
  "license": "MIT",
  "files": [
@@ -21,7 +21,7 @@
  },
  "devDependencies": {
    "nav-frontend-core": "^6.0.1",
-    "nav-frontend-knapper-style": "^2.0.1",
+    "nav-frontend-knapper-style": "^2.0.2",
    "nav-frontend-typografi-style": "^2.0.1"
  }
 }
@@ -1,6 +1,6 @@
 {
  "name": "nav-frontend-toggle-style",
-  "version": "2.0.1",
+  "version": "2.0.2",
  "main": "src/toggle-style.less",
  "license": "MIT",
  "files": [
@@ -17,7 +17,7 @@
  },
  "devDependencies": {
    "nav-frontend-core": "^6.0.1",
-    "nav-frontend-knapper-style": "^2.0.1",
+    "nav-frontend-knapper-style": "^2.0.2",
    "nav-frontend-typografi-style": "^2.0.1"
  }
 }
@@ -1,6 +1,6 @@
 {
  "name": "nav-frontend-toggle",
-  "version": "2.0.1",
+  "version": "2.0.2",
  "main": "lib/index.js",
  "types": "lib/index.d.ts",
  "license": "MIT",
@@ -22,7 +22,7 @@
  "devDependencies": {
    "classnames": "^2.2.5",
    "nav-frontend-js-utils": "^1.0.19",
-    "nav-frontend-toggle-style": "^2.0.1",
+    "nav-frontend-toggle-style": "^2.0.2",
    "prop-types": "^15.5.10",
    "react": "^16.8.0 || ^17.0.0"
  }
@@ -14,6 +14,22 @@ import {
  Undertekst,
  UndertekstBold,
 } from "./../";
+import Lenkepanel from "nav-frontend-lenkepanel";
+
+## Nytt typografi-oppsett (beta)
+
+Vi har nå en ny og forbedret typografi-løsning for både react og css i beta. Vi anbefaler
+alle å ta en titt på dette og ta den i bruk hvis ønskelig.
+
+For nå kan man finne dokumentasjon om hvordan man tar denne i bruk her:
+
+<Lenkepanel
+  href="https://navikt.github.io/Designsystemet/?path=/story/ds-react-typography-intro--page"
+  className="resource-link"
+  border
+>
+  Typografi storybook
+</Lenkepanel>

 ## Bruk av Typografi i prosjekter

@@ -55,7 +55,9 @@ exports.sourceNodes = (() => {
    { user, repository, tree = false, releases = false, branch, secrets = {} }
  ) {
    if (!user || !repository) {
-      throw "You need to define user & repository for gatsby-source-github to work";
+      throw new Error(
+        "You need to define user & repository for gatsby-source-github to work"
+      );
    }

    const octo = new Octokat(secrets);
@@ -10,7 +10,9 @@ exports.sourceNodes = async (
  { user, repository, tree = false, releases = false, secrets = {} }
 ) => {
  if (!user || !repository) {
-    throw "You need to define user & repository for gatsby-source-github to work";
+    throw new Error(
+      "You need to define user & repository for gatsby-source-github to work"
+    );
  }

  const octo = new Octokat(secrets);
Author	SHA1	Message	Date
github-actions[bot]	6f36724570	Lerna versionbump [ci skip] - @navikt/ds-css@0.6.3 - @navikt/ds-react@0.6.3 - @navikt/ds-tokens@0.4.3 - nav-frontend-ikonknapper@2.0.2 - nav-frontend-knapper-style@2.0.2 - nav-frontend-knapper@3.0.2 - nav-frontend-tabell-style@2.0.2 - nav-frontend-toggle-style@2.0.2 - nav-frontend-toggle@2.0.2	2021-07-02 15:03:44 +00:00
Ken	91b956d8c2	Button styling + oppdatert styling for ds-react komponenter (#1134 )	2021-07-02 16:50:09 +02:00
Ken	c9d70ebd1c	Update README.md	2021-06-24 09:02:56 +02:00
github-actions[bot]	6dee56062c	Lerna versionbump [ci skip] - @navikt/ds-css@0.6.2 - @navikt/ds-react@0.6.2 - @navikt/ds-tokens@0.4.2	2021-06-23 13:53:34 +00:00
Ken	b24c959968	MicroCard komponent (#1129 )	2021-06-23 15:41:56 +02:00
Ken	c44b82b603	Header for bruk på sider (#1128 )	2021-06-23 15:41:46 +02:00
Ken	c1b622de8c	Oppdatert typo komponent dokumentasjon (#1127 )	2021-06-22 21:53:37 +02:00