Panel docs to site (#2292)

Co-authored-by: Liberty Curtis <[email protected]>

site/docs/components/panel/accessibility.mdx

@@ -0,0 +1,10 @@
+---
+title: Panel
+layout: DetailComponent
+sidebar:
+  exclude: true
+data:
+  $ref: ./#/data
+---
+
+This component has no accessibility guidance.

site/docs/components/panel/examples.mdx

@@ -0,0 +1,27 @@
+---
+title: Panel
+layout: DetailComponent
+sidebar:
+  exclude: true
+data:
+  $ref: ./#/data
+---
+
+<LivePreviewControls>
+<LivePreview componentName="panel" exampleName="Primary" >
+
+### Primary (default)
+
+When using panels together, use the primary variant as the background for the most important content that you want the user to focus on first.
+
+</LivePreview>
+
+<LivePreview componentName="panel" exampleName="Secondary" >
+
+### Secondary
+
+Use the secondary variant as the background for the less important content that you want the user to focus on second.
+
+</LivePreview>
+
+</LivePreviewControls>

site/docs/components/panel/index.mdx

@@ -0,0 +1,17 @@
+---
+title: Panel
+data:
+  description: Panel is a background that organizes content in an application by using color to reflect the level of importance of content and drive visual hierarchy.
+  sourceCodeUrl: "https://github.com/jpmorganchase/salt-ds/blob/main/packages/core/src/panel/Panel.tsx"
+  package:
+    name: "@salt-ds/core"
+    initialVersion: "1.0.0"
+  alsoKnownAs: ["Container", "Pane"]
+  relatedComponents:
+    [
+      { name: "Card", relationship: "similarTo" },
+      { name: "Tile", relationship: "contains" },
+    ]
+  stickerSheet: ""
+layout: DetailComponent
+---

site/docs/components/panel/usage.mdx

@@ -0,0 +1,30 @@
+---
+title: Panel
+layout: DetailComponent
+sidebar:
+  exclude: true
+data:
+  $ref: ./#/data
+---
+
+### Using the Panel component
+
+Pick the background that reflects the level of importance for the content (primary or secondary) and that will drive the types of components that are therefore displayed in the Panel.
+
+#### When to use Panel
+
+- To organize and divide the application into clear content areas.
+- To create visual hierarchy within the application layout.
+- With the Border Layout component to define the main content regions of your app with responsive behaviour.
+
+### Import
+
+To import Panel from the core Salt package, use:
+
+```js
+import { Panel } from "@salt-ds/core";
+```
+
+### Props
+
+<PropsTable componentName="Panel" />

site/src/examples/panel/Primary.tsx

@@ -0,0 +1,6 @@
+import { ReactElement } from "react";
+import { Panel } from "@salt-ds/core";
+
+export const Primary = (): ReactElement => (
+  <Panel>Example of a primary Panel</Panel>
+);

site/src/examples/panel/Secondary.tsx

@@ -0,0 +1,6 @@
+import { ReactElement } from "react";
+import { Panel } from "@salt-ds/core";
+
+export const Secondary = (): ReactElement => (
+  <Panel variant="secondary">Example of a secondary Panel</Panel>
+);

site/src/examples/panel/index.ts

@@ -0,0 +1,2 @@
+export * from "./Primary";
+export * from "./Secondary";