Lerna versionbump [ci skip]

- @navikt/ds-css@0.4.2
 - @navikt/ds-react@0.4.3

@navikt/ds-css/index.css

@@ -13,4 +13,5 @@
 @import "modal.css";
 @import "popover.css";
 @import "tag.css";
+@import "panel.css";
 @import "typography.css";

@navikt/ds-css/package.json

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

@navikt/ds-css/panel.css

@@ -0,0 +1,10 @@
+.navds-panel {
+  background-color: var(--navds-color-white);
+  display: block;
+  padding: 1rem;
+  border-radius: var(--navds-border-radius);
+}
+
+.navds-panel--border {
+  border: var(--navds-border-default);
+}

@navikt/ds-react/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@navikt/ds-react",
-  "version": "0.4.2",
+  "version": "0.4.3",
   "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 { Panel, PanelProps } from "./panel/index";
 export {
   Heading,
   HeadingProps,

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

@@ -0,0 +1,36 @@
+import React, { forwardRef, HTMLAttributes } from "react";
+import cl from "classnames";
+
+export interface PanelProps extends HTMLAttributes<HTMLDivElement> {
+  /**
+   * Component content
+   */
+  children: React.ReactNode;
+  /**
+   * @ignore
+   */
+  className?: string;
+  /**
+   * Adds a border to the panel
+   * @default false
+   */
+  border?: boolean;
+}
+
+const Panel = forwardRef<HTMLDivElement, PanelProps>(
+  ({ children, className, border = false, ...rest }, ref) => {
+    return (
+      <div
+        ref={ref}
+        className={cl("navds-panel", className, {
+          "navds-panel--border": border,
+        })}
+        {...rest}
+      >
+        {children}
+      </div>
+    );
+  }
+);
+
+export default Panel;

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

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

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

@@ -0,0 +1,38 @@
+import React from "react";
+import { Panel } from "../index";
+import { Meta } from "@storybook/react/types-6-0";
+export default {
+  title: "ds-react/panel",
+  component: Panel,
+} as Meta;
+
+export const All = () => {
+  return (
+    <div>
+      <h1>Panel</h1>
+      <Panel>
+        Eu quis exercitation voluptate ex. Aute irure esse occaecat minim
+        cupidatat velit minim duis sint culpa anim laboris. Consectetur nulla eu
+        commodo ea culpa velit commodo incididunt sunt ipsum. Amet anim
+        adipisicing minim ipsum do. Non laborum culpa reprehenderit est sint
+        officia quis excepteur. Fugiat eiusmod eiusmod commodo incididunt nisi
+        minim ex eu cupidatat quis ex. Lorem irure ea ea enim consectetur ea
+        aliqua cupidatat. Officia aute veniam aute exercitation ipsum aliqua
+        adipisicing. Est aliqua ad ullamco aute nostrud amet ea adipisicing
+        consequat id officia irure pariatur. Eu mollit amet culpa culpa velit.
+      </Panel>
+      <h2>With border</h2>
+      <Panel border>
+        Eu quis exercitation voluptate ex. Aute irure esse occaecat minim
+        cupidatat velit minim duis sint culpa anim laboris. Consectetur nulla eu
+        commodo ea culpa velit commodo incididunt sunt ipsum. Amet anim
+        adipisicing minim ipsum do. Non laborum culpa reprehenderit est sint
+        officia quis excepteur. Fugiat eiusmod eiusmod commodo incididunt nisi
+        minim ex eu cupidatat quis ex. Lorem irure ea ea enim consectetur ea
+        aliqua cupidatat. Officia aute veniam aute exercitation ipsum aliqua
+        adipisicing. Est aliqua ad ullamco aute nostrud amet ea adipisicing
+        consequat id officia irure pariatur. Eu mollit amet culpa culpa velit.
+      </Panel>
+    </div>
+  );
+};

packages/nav-frontend-paneler/md/Panel.overview.mdx

@@ -3,7 +3,7 @@ import Panel from "./../";
 ## Normal
 
 Paneler brukes til å ramme inn innhold. På hvit bakgrunn bør paneler få en 1px tykk border med farge
-[@navGra20](/resources/colors) (#C6C2BF). Intern avstand fra panelkant til innhold skal være
+[@navGra20](/resources/colors) (#C9C9C9). Intern avstand fra panelkant til innhold skal være
 minimum `16px` (`1rem`).
 
 <Example>