2022-02-18 08:20:47 +00:00
|
|
|
import { Panel } from "./Panel";
|
2022-02-17 11:53:32 +00:00
|
|
|
|
|
|
|
export default {
|
2022-02-18 08:20:47 +00:00
|
|
|
title: "SkynetLibrary/Panel",
|
2022-02-17 11:53:32 +00:00
|
|
|
component: Panel,
|
|
|
|
decorators: [
|
|
|
|
(Story) => (
|
|
|
|
<div className="inset-0 bg-palette-100 p-6">
|
|
|
|
<div style={{ maxWidth: 800 }}>
|
|
|
|
<Story />
|
|
|
|
</div>
|
|
|
|
</div>
|
|
|
|
),
|
|
|
|
],
|
2022-02-18 08:20:47 +00:00
|
|
|
};
|
2022-02-17 11:53:32 +00:00
|
|
|
|
|
|
|
const SampleContent = () => (
|
|
|
|
<>
|
|
|
|
<p>This is the first paragraph</p>
|
|
|
|
<p>This is the second paragraph</p>
|
|
|
|
<p>This is the third paragraph</p>
|
|
|
|
</>
|
2022-02-18 08:20:47 +00:00
|
|
|
);
|
2022-02-17 11:53:32 +00:00
|
|
|
|
|
|
|
const Template = (args) => (
|
|
|
|
<Panel {...args}>
|
|
|
|
<SampleContent />
|
|
|
|
</Panel>
|
2022-02-18 08:20:47 +00:00
|
|
|
);
|
2022-02-17 11:53:32 +00:00
|
|
|
|
2022-02-18 08:20:47 +00:00
|
|
|
export const RawPanel = Template.bind({});
|
|
|
|
RawPanel.args = {};
|
2022-02-17 11:53:32 +00:00
|
|
|
|
2022-02-18 08:20:47 +00:00
|
|
|
export const TitledPanel = Template.bind({});
|
2022-02-17 11:53:32 +00:00
|
|
|
TitledPanel.args = {
|
2022-02-18 08:20:47 +00:00
|
|
|
title: "Latest activity",
|
|
|
|
};
|
2022-02-17 11:53:32 +00:00
|
|
|
|
|
|
|
export const InlinePanelsExample = () => (
|
|
|
|
<div className="grid gap-4 grid-flow-col auto-cols-fr">
|
|
|
|
<Panel title="Upload" className="w-50">
|
|
|
|
<SampleContent />
|
|
|
|
</Panel>
|
|
|
|
<Panel title="Usage" className="w-50">
|
|
|
|
<SampleContent />
|
|
|
|
</Panel>
|
|
|
|
</div>
|
2022-02-18 08:20:47 +00:00
|
|
|
);
|
2022-02-17 11:53:32 +00:00
|
|
|
|
|
|
|
export const FullWidthPanelsExample = () => (
|
|
|
|
<>
|
|
|
|
<Panel title="Latest activity">
|
|
|
|
<SampleContent />
|
|
|
|
</Panel>
|
|
|
|
<Panel title="Payment history">
|
|
|
|
<SampleContent />
|
|
|
|
</Panel>
|
|
|
|
</>
|
2022-02-18 08:20:47 +00:00
|
|
|
);
|
2022-02-17 11:53:32 +00:00
|
|
|
|
2022-02-18 08:20:47 +00:00
|
|
|
export const CustomPanelBackground = Template.bind({});
|
2022-02-17 11:53:32 +00:00
|
|
|
CustomPanelBackground.args = {
|
2022-02-18 08:20:47 +00:00
|
|
|
className: "bg-red-500",
|
|
|
|
title: "Background below should be red",
|
|
|
|
};
|