-
Notifications
You must be signed in to change notification settings - Fork 89
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
Co-authored-by: Liberty Curtis <[email protected]>
- Loading branch information
1 parent
fc114dd
commit 0124f46
Showing
7 changed files
with
98 additions
and
0 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,10 @@ | ||
--- | ||
title: Panel | ||
layout: DetailComponent | ||
sidebar: | ||
exclude: true | ||
data: | ||
$ref: ./#/data | ||
--- | ||
|
||
This component has no accessibility guidance. |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -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> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -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 | ||
--- |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -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" /> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -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> | ||
); |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -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> | ||
); |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,2 @@ | ||
export * from "./Primary"; | ||
export * from "./Secondary"; |
0124f46
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Successfully deployed to the following URLs:
saltdesignsystem – ./
saltdesignsystem-fed-team.vercel.app
saltdesignsystem-git-main-fed-team.vercel.app
www.saltdesignsystem.com
saltdesignsystem.vercel.app
next.saltdesignsystem.com