Lerna versionbump [ci skip]

- @navikt/ds-css@0.5.2
 - @navikt/ds-react@0.5.2

@navikt/ds-css/index.css

@@ -1,4 +1,8 @@
 @import "baseline/baseline.css";
+@import "typography.css";
+@import "grid.css";
+@import "layouts.css";
+
 @import "accordion.css";
 @import "accordion-anchor-menu.css";
 @import "accordion-menu.css";
@@ -6,12 +10,10 @@
 @import "button.css";
 @import "content-container.css";
 @import "copy-to-clipboard.css";
-@import "grid.css";
 @import "internal-header.css";
-@import "layouts.css";
 @import "link.css";
 @import "modal.css";
 @import "popover.css";
 @import "tag.css";
 @import "panel.css";
-@import "typography.css";
+@import "link-panel.css";

@navikt/ds-css/link-panel.css

@@ -0,0 +1,32 @@
+.navds-link-panel {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  text-decoration: none;
+  color: var(--navds-color-gray-90);
+}
+
+.navds-link-panel:hover .navds-link-panel-title {
+  text-decoration: underline;
+  color: var(--navds-color-text-link);
+}
+
+.navds-link-panel:hover {
+  box-shadow: var(--navds-shadow-hover);
+  border-color: var(--navds-color-blue-50);
+}
+
+.navds-link-panel:focus {
+  box-shadow: var(--navds-shadow-focus);
+  outline: none;
+}
+
+.navds-link-panel__chevron {
+  font-size: 1.5rem;
+  transition: transform 200ms;
+}
+
+.navds-link-panel:hover > .navds-link-panel__chevron,
+.navds-link-panel:focus-within > .navds-link-panel__chevron {
+  transform: translateX(4px);
+}

@navikt/ds-css/package.json

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

@navikt/ds-css/panel.css

@@ -3,8 +3,9 @@
   display: block;
   padding: 1rem;
   border-radius: var(--navds-border-radius);
+  border: 1px solid transparent;
 }
 
 .navds-panel--border {
-  border: var(--navds-border-default);
+  border-color: var(--navds-color-border);
 }

@navikt/ds-react/package.json

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

@navikt/ds-react/src/index.ts

@@ -34,6 +34,7 @@ export { Link, LinkProps } from "./link/index";
 export { Modal, ModalProps } from "./modal/index";
 export { Popover, PopoverProps } from "./popover/index";
 export { Tag, TagProps } from "./tag/index";
+export { LinkPanel, LinkPanelProps } from "./link-panel/index";
 export { Panel, PanelProps } from "./panel/index";
 export {
   Title,

@navikt/ds-react/src/link-panel/LinkPanel.tsx

@@ -0,0 +1,65 @@
+import React, { forwardRef } from "react";
+import { OverridableComponent } from "../util";
+import { Panel } from "../index";
+import { Next } from "@navikt/ds-icons";
+import cl from "classnames";
+
+export type LinkPanelType = OverridableComponent<LinkPanelProps>;
+
+export interface LinkPanelProps {
+  props: {
+    children?: React.ReactNode;
+    className?: string;
+    noHeading?: boolean;
+    border?: boolean;
+  } & React.HTMLAttributes<HTMLAnchorElement>;
+  defaultComponent: "a";
+}
+
+const LinkPanel: LinkPanelType = forwardRef(
+  ({ children, component = "a", border = true, className, ...rest }, ref) => {
+    return (
+      <Panel
+        component={component}
+        border={border}
+        ref={ref}
+        className={cl("navds-link-panel", className)}
+        {...rest}
+      >
+        {typeof children === "string" ? (
+          <LinkPanelTitle>{children}</LinkPanelTitle>
+        ) : (
+          <span className="navds-link-panel__content">{children}</span>
+        )}
+        <Next
+          className="navds-link-panel__chevron"
+          aria-label="arrow-icon pointing right"
+        />
+      </Panel>
+    );
+  }
+);
+
+interface LinkPanelTitleProps {
+  props: {
+    children: React.ReactNode;
+  } & React.HTMLAttributes<HTMLSpanElement>;
+  defaultComponent: "span";
+}
+
+export const LinkPanelTitle: OverridableComponent<LinkPanelTitleProps> = forwardRef(
+  ({ className, component: Component = "span", ...rest }, ref) => (
+    <Component
+      ref={ref}
+      className={cl(
+        "navds-link-panel-title",
+        "navds-title",
+        "navds-title--m",
+        className
+      )}
+      {...rest}
+    />
+  )
+);
+
+export default LinkPanel;

@navikt/ds-react/src/link-panel/index.ts

@@ -0,0 +1,2 @@
+export { default as LinkPanel } from "./LinkPanel";
+export * from "./LinkPanel";

@navikt/ds-react/src/link-panel/stories/link-panel.stories.tsx

@@ -0,0 +1,166 @@
+import React from "react";
+import { LinkPanel, LinkPanelTitle } from "../index";
+
+export default {
+  title: "ds-react/linkPanel",
+  component: LinkPanel,
+};
+
+export const All = () => {
+  return (
+    <>
+      <h1>Link</h1>
+      <LinkPanel href="#">Dette er en tekstlenke</LinkPanel>
+
+      <h1>No border</h1>
+      <LinkPanel href="#" border={false}>
+        Dette er en tekstlenke
+      </LinkPanel>
+
+      <h1>Custom styling</h1>
+      <LinkPanel href="#" style={{ textDecoration: "none" }}>
+        <div
+          style={{
+            padding: "1rem",
+            display: "grid",
+            gridAutoFlow: "column",
+            gap: "2rem",
+            alignItems: "center",
+          }}
+        >
+          <Illustration />
+          <div>
+            <LinkPanelTitle>Dagpenger</LinkPanelTitle>
+            <p>
+              Du kan få dagpenger når du er arbeidsledig og har mistet inntekten
+              din.
+            </p>
+          </div>
+        </div>
+      </LinkPanel>
+    </>
+  );
+};
+
+const Illustration = () => (
+  <svg xmlns="http://www.w3.org/2000/svg" width="110" height="110">
+    <defs>
+      <path id="a" d="M.686.654h4.399v5.852H.686z"></path>
+    </defs>
+    <g fill="none" fillRule="evenodd">
+      <path fill="transparent" d="M-287-1518H993V543H-287z"></path>
+      <rect
+        width="796"
+        height="181"
+        fill="transparent"
+        rx="8"
+        transform="translate(-45 -36)"
+      ></rect>
+      <circle cx="55" cy="55" r="55" fill="#CCDEE6"></circle>
+      <g fill="#D8D8D8">
+        <path
+          fill="#337C9B"
+          d="M32.034 5.834l-11.606 3.11-9.517 2.55-4.637 1.242 1.284 4.794 9.069 33.843 1.284 4.795 4.637-1.243 9.518-2.55 11.605-3.11c2.561-.686 4.063-3.389 3.353-6.037L37.956 9.385c-.71-2.648-3.361-4.238-5.922-3.551"
+        ></path>
+        <path
+          fill="#38363A"
+          d="M38.322 51.833l1.77-.474-12.12-45.233-1.77.474z"
+        ></path>
+        <path
+          fill="#CE2128"
+          d="M26.593 57.996l-1.179-.613-.713 1.12-.93-3.47 1.892-.507z"
+        ></path>
+      </g>
+      <path
+        fill="#FFF"
+        d="M61.773 69.14l8.95 38.112a2.524 2.524 0 0 0 3.036 1.881l32.913-7.745a2.528 2.528 0 0 0 1.88-3.04L98.279 54.591a2.526 2.526 0 0 0-3.037-1.883L68.425 59.02l-6.652 10.12z"
+      ></path>
+      <path
+        fill="#C0C0BE"
+        d="M68.425 59.02l1.326 5.645a2.527 2.527 0 0 1-1.88 3.038l-6.098 1.436 6.652-10.12z"
+      ></path>
+      <path
+        stroke="#8E9294"
+        strokeLinecap="round"
+        strokeWidth="2.152"
+        d="M68.902 74.197l11.982-2.82m-10.721 8.19l24.874-5.853M71.424 84.937l24.873-5.853"
+      ></path>
+      <path
+        stroke="#8E9294"
+        strokeLinecap="round"
+        strokeWidth="2.264"
+        d="M72.685 90.307l24.873-5.854M73.857 95.297l24.873-5.853M75.021 100.7l24.874-5.853"
+      ></path>
+      <path
+        fill="#CCDEE6"
+        d="M21.698 86.68c-5.726-3.643-7.42-11.243-3.78-16.976 3.64-5.733 11.231-7.427 16.958-3.784 5.727 3.643 7.42 11.243 3.78 16.976-3.639 5.733-11.231 7.427-16.958 3.784z"
+      ></path>
+      <path
+        fill="#C42B34"
+        d="M9.283 106.905a2.772 2.772 0 0 1-.851-3.823l8.759-13.798a2.765 2.765 0 0 1 3.817-.852 2.77 2.77 0 0 1 .851 3.822l-8.758 13.799a2.764 2.764 0 0 1-3.818.852"
+      ></path>
+      <path
+        fill="#2E3137"
+        d="M19.032 90.912c-.86-.547-1.348-1.318-.801-2.179l1.826-2.877a1.841 1.841 0 0 1 2.546-.567 1.847 1.847 0 0 1 .566 2.547l-1.826 2.878c-.547.86-1.452.744-2.31.198"
+      ></path>
+      <path
+        fill="#D84B55"
+        d="M16.41 91l-8.266 13.021a.925.925 0 0 0 .283 1.275.92.92 0 0 0 1.272-.284l7.912-12.463c-.713-.47-1.083-1.039-1.2-1.549"
+      ></path>
+      <path
+        fill="#2E3137"
+        d="M27.811 87.523a11.115 11.115 0 0 1-1.117-.196 11.283 11.283 0 0 1-3.577-1.48c-5.295-3.369-6.866-10.423-3.502-15.723 3.366-5.301 10.412-6.874 15.709-3.504 5.296 3.368 6.866 10.422 3.5 15.723a11.317 11.317 0 0 1-2.86 3.053 11.4 11.4 0 0 1-4.72 2.029c-1.127.203-2.284.24-3.433.098m12.57-4.19c3.911-6.16 2.085-14.358-4.069-18.271-6.154-3.915-14.342-2.089-18.253 4.072-3.91 6.16-2.085 14.356 4.07 18.271 6.153 3.915 14.343 2.09 18.252-4.072"
+      ></path>
+      <path
+        fill="#FFD399"
+        d="M93.445 12.554c2.45 5.367.088 11.707-5.274 14.159-5.361 2.452-11.695.088-14.145-5.279-2.449-5.368-.088-11.707 5.275-14.16 5.361-2.452 11.695-.088 14.144 5.28"
+      ></path>
+      <path
+        fill="#FFD399"
+        d="M91.45 28.239l-4.274 1.954a2.697 2.697 0 0 1-3.574-1.334l-2.775-6.08a2.7 2.7 0 0 1 1.333-3.578l4.274-1.955a2.696 2.696 0 0 1 3.575 1.334l2.775 6.08a2.702 2.702 0 0 1-1.333 3.579"
+      ></path>
+      <path
+        fill="#5A5C5D"
+        d="M94.1 30.6l-6.9 3.156a1.255 1.255 0 0 1-1.043-2.284l6.902-3.155a1.253 1.253 0 1 1 1.04 2.282m1.275 2.794l-6.9 3.156a1.254 1.254 0 1 1-1.041-2.283l6.9-3.156a1.254 1.254 0 0 1 1.041 2.283m-1.682 1.387l-3.044 1.392c-.458.21-.4.889.09 1.006.685.164 1.425.11 2.115-.207a3.25 3.25 0 0 0 1.54-1.464c.233-.449-.241-.936-.701-.727"
+      ></path>
+      <g transform="rotate(-69 92.268 -44.056)">
+        <mask id="b" fill="#fff">
+          <use xlinkHref="#a"></use>
+        </mask>
+        <path
+          fill="#C42B34"
+          d="M.732 4.08l.397-1.844a1.999 1.999 0 1 1 3.91.842l-.396 1.846A2 2 0 1 1 .732 4.08"
+          mask="url(#b)"
+        ></path>
+      </g>
+      <path
+        fill="#E1CFB4"
+        d="M86.458 79.011l-1.334 7.43 6.268-4.21-2.12-2.355z"
+      ></path>
+      <path
+        fill="#FECB86"
+        d="M103.266 56.87l-1.644-1.073-14.841 22.72 1.643 1.072z"
+      ></path>
+      <path
+        fill="#FAA736"
+        d="M104.912 57.945l-1.644-1.074-14.841 22.72 1.644 1.073z"
+      ></path>
+      <path
+        fill="#FECB86"
+        d="M90.071 80.664l1.644 1.072 14.842-22.72-1.645-1.072zm-3.306-.951c.31.203.774-.055 1.188.215a.513.513 0 0 1 .152.15l.32-.488-1.644-1.073-.297.453s-.028.542.281.743"
+      ></path>
+      <path
+        fill="#FAA736"
+        d="M88.106 80.078c.205.277.111.67.548.956.44.286.764.042 1.098.118l.32-.488-1.648-1.075-.318.489z"
+      ></path>
+      <path
+        fill="#FECB86"
+        d="M89.752 81.152a.507.507 0 0 1 .198.08c.414.27.365.797.675 1 .311.204.794-.041.794-.041l.296-.454-1.644-1.073-.32.488z"
+      ></path>
+      <path
+        fill="#535756"
+        d="M85.123 86.44l2.22-1.488-1.749-1.14zm21.434-27.423l-4.935-3.22.437-.67 4.935 3.22z"
+      ></path>
+    </g>
+  </svg>
+);

@navikt/ds-react/src/panel/Panel.tsx

@@ -1,26 +1,41 @@
-import React, { forwardRef, HTMLAttributes } from "react";
+import React, { forwardRef } from "react";
 import cl from "classnames";
+import { OverridableComponent } from "../util";
 
-export interface PanelProps extends HTMLAttributes<HTMLDivElement> {
-  /**
-   * Component content
-   */
-  children: React.ReactNode;
-  /**
-   * @ignore
-   */
-  className?: string;
-  /**
-   * Adds a border to the panel
-   * @default false
-   */
-  border?: boolean;
+export type PanelType = OverridableComponent<PanelProps>;
+
+export interface PanelProps {
+  props: {
+    /**
+     * Component content
+     */
+    children: React.ReactNode;
+    /**
+     * @ignore
+     */
+    className?: string;
+    /**
+     * Adds a border to the panel
+     * @default false
+     */
+    border?: boolean;
+  } & React.HTMLAttributes<HTMLElement>;
+  defaultComponent: "div";
 }
 
-const Panel = forwardRef<HTMLDivElement, PanelProps>(
-  ({ children, className, border = false, ...rest }, ref) => {
+const Panel: PanelType = forwardRef(
+  (
+    {
+      children,
+      className,
+      border = false,
+      component: Component = "div",
+      ...rest
+    },
+    ref
+  ) => {
     return (
-      <div
+      <Component
         ref={ref}
         className={cl("navds-panel", className, {
           "navds-panel--border": border,
@@ -28,7 +43,7 @@ const Panel = forwardRef<HTMLDivElement, PanelProps>(
         {...rest}
       >
         {children}
-      </div>
+      </Component>
     );
   }
 );

CHANGELOG.md

@@ -1,5 +1,27 @@
 # Endringslogg
 
+## 02. Juni 2021
+
+### Nytt typo-oppsett for ds-react, ds-css og ds-tokens
+
+[#1079](https://github.com/navikt/nav-frontend-moduler/pull/1079)
+
+[Typo med spacing](https://navikt.github.io/Designsystemet/?path=/story/ds-react-typography--typo-med-spacing)
+[Typo uten spacing](https://navikt.github.io/Designsystemet/?path=/story/ds-react-typography--typo-uten-spacing)
+[Bruks eksempel](https://navikt.github.io/Designsystemet/?path=/story/ds-react-typography--side-innhold-eksempel)
+
+Ds-react, ds-css og ds-tokens er alle minor-bumpet
+
+Nye komponenter for typografi:
+- Title: Heading
+- Ingress
+- BodyLong: Lengre tekster, tenk en vanlig paragraf
+- BodyShort: Mindre tekster, tenk teksten på en knapp eller label
+- Label
+- Detail: Detaljetekst på 14px 
+
+Ds-css og ds-tokens er endret for å tilrettelegge for disse. Diverse komponenter i ds-react bruker nå også typo-stilene for å sikre riktig typo.
+
 ## 21. Mai 2021
 
 ### Popover-position oppdateres nå onMount