From 4a02a1987c02ca03d11cf3da95646c864fff066c Mon Sep 17 00:00:00 2001
From: Ken <26967723+KenAJoh@users.noreply.github.com>
Date: Thu, 8 Feb 2024 11:46:20 +0100
Subject: [PATCH] Deprecate Panel  (#2712)
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

* :coffin: Markert Panel som deprecated

* :memo: Changeset

* :memo: JSDOC var feil for border på Box

* :bug: :memo: JSDoc manglet border-radius
---
 .changeset/thick-falcons-crash.md             |  5 ++
 @navikt/core/react/src/panel/Panel.tsx        | 25 +++-----
 .../core/react/src/panel/panel.stories.tsx    | 63 -------------------
 3 files changed, 14 insertions(+), 79 deletions(-)
 create mode 100644 .changeset/thick-falcons-crash.md
 delete mode 100644 @navikt/core/react/src/panel/panel.stories.tsx

diff --git a/.changeset/thick-falcons-crash.md b/.changeset/thick-falcons-crash.md
new file mode 100644
index 0000000000..e4af883301
--- /dev/null
+++ b/.changeset/thick-falcons-crash.md
@@ -0,0 +1,5 @@
+---
+"@navikt/ds-react": patch
+---
+
+Panel: Komponent er nå markert som deprecated. Bruk `Box` i fremtiden.
diff --git a/@navikt/core/react/src/panel/Panel.tsx b/@navikt/core/react/src/panel/Panel.tsx
index 032a84fcc4..002c1dace8 100644
--- a/@navikt/core/react/src/panel/Panel.tsx
+++ b/@navikt/core/react/src/panel/Panel.tsx
@@ -2,6 +2,9 @@ import cl from "clsx";
 import React, { forwardRef } from "react";
 import { OverridableComponent } from "../util/types";
 
+/**
+ * @deprecated Use Box with padding and border instead
+ */
 export interface PanelProps extends React.HTMLAttributes<HTMLElement> {
   /**
    * Panel content
@@ -17,23 +20,13 @@ export interface PanelProps extends React.HTMLAttributes<HTMLElement> {
 export type PanelType = OverridableComponent<PanelProps, HTMLElement>;
 
 /**
- * A component that displays a bordered panel with heading and body.
- *
- * @see [📝 Documentation](https://aksel.nav.no/komponenter/core/panel)
- * @see 🏷️ {@link PanelProps}
- * @see [🤖 OverridableComponent](https://aksel.nav.no/grunnleggende/kode/overridablecomponent) support
- *
- * @example
- * ```jsx
- * <Panel border>
- *   <Heading spacing level="2" size="large">
- *     Søk om økonomisk sosialhjelp
- *   </Heading>
- *   <BodyLong>
- *     Du kan søke om det du trenger økonomisk støtte til.
- *   </BodyLong>
- * </Panel>
+ * @deprecated
+ * Use Box with padding and border instead
+ * ```
+ * <Box padding="4" borderRadius="small" />
+ * <Box padding="4" borderWidth="1" borderRadius="small" />
  * ```
+ * Component will be removed in a future major release
  */
 export const Panel: PanelType = forwardRef(
   (
diff --git a/@navikt/core/react/src/panel/panel.stories.tsx b/@navikt/core/react/src/panel/panel.stories.tsx
deleted file mode 100644
index 85b04cbae8..0000000000
--- a/@navikt/core/react/src/panel/panel.stories.tsx
+++ /dev/null
@@ -1,63 +0,0 @@
-import { Meta } from "@storybook/react";
-import React from "react";
-import { Panel } from "../index";
-
-export default {
-  title: "ds-react/Panel",
-  component: Panel,
-  argTypes: {
-    border: {
-      defaultValue: true,
-      control: {
-        type: "boolean",
-      },
-    },
-  },
-} as Meta;
-
-export const Default = {
-  render: (props) => {
-    return (
-      <Panel {...props}>
-        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>
-    );
-  },
-};
-
-export const Border = () => {
-  return (
-    <div className="colgap">
-      <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>
-      <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>
-  );
-};