adilallo
121 lines
3.0 KiB
JavaScript
121 lines
3.0 KiB
JavaScript
import { j as e } from "./jsx-runtime-C_nHp4yK.js";
|
|
import { H as o } from "./HeroDecor-Csfoi-N_.js";
|
|
import "./iframe-D_aMTKb2.js";
|
|
import "./preload-helper-DIZFD4sK.js";
|
|
const d = {
|
|
title: "Components/HeroDecor",
|
|
component: o,
|
|
parameters: {
|
|
layout: "centered",
|
|
docs: {
|
|
description: {
|
|
component:
|
|
"A decorative SVG component that provides background visual elements for the HeroBanner. Features grain effects and organic shapes that enhance the visual appeal without interfering with content readability.",
|
|
},
|
|
},
|
|
},
|
|
argTypes: {
|
|
className: {
|
|
control: { type: "text" },
|
|
description: "Additional CSS classes for positioning and styling",
|
|
},
|
|
},
|
|
tags: ["autodocs"],
|
|
},
|
|
r = {
|
|
args: { className: "w-[400px] h-[200px]" },
|
|
parameters: {
|
|
docs: {
|
|
description: {
|
|
story:
|
|
"Default hero decoration with standard sizing and positioning.",
|
|
},
|
|
},
|
|
},
|
|
},
|
|
t = {
|
|
args: { className: "w-[600px] h-[300px]" },
|
|
render: (a) =>
|
|
e.jsxs("div", {
|
|
className:
|
|
"bg-[var(--color-surface-default-brand-primary)] p-8 rounded-lg relative overflow-hidden",
|
|
children: [
|
|
e.jsx(o, { ...a }),
|
|
e.jsxs("div", {
|
|
className: "relative z-10 text-white mt-4",
|
|
children: [
|
|
e.jsx("h3", { children: "Content Overlay" }),
|
|
e.jsx("p", {
|
|
children:
|
|
"This demonstrates how the decoration appears behind content.",
|
|
}),
|
|
],
|
|
}),
|
|
],
|
|
}),
|
|
parameters: {
|
|
docs: {
|
|
description: {
|
|
story:
|
|
"Hero decoration with background color to show how it integrates with content.",
|
|
},
|
|
},
|
|
},
|
|
};
|
|
r.parameters = {
|
|
...r.parameters,
|
|
docs: {
|
|
...r.parameters?.docs,
|
|
source: {
|
|
originalSource: `{
|
|
args: {
|
|
className: "w-[400px] h-[200px]"
|
|
},
|
|
parameters: {
|
|
docs: {
|
|
description: {
|
|
story: "Default hero decoration with standard sizing and positioning."
|
|
}
|
|
}
|
|
}
|
|
}`,
|
|
...r.parameters?.docs?.source,
|
|
},
|
|
},
|
|
};
|
|
t.parameters = {
|
|
...t.parameters,
|
|
docs: {
|
|
...t.parameters?.docs,
|
|
source: {
|
|
originalSource: `{
|
|
args: {
|
|
className: "w-[600px] h-[300px]"
|
|
},
|
|
render: args => <div className="bg-[var(--color-surface-default-brand-primary)] p-8 rounded-lg relative overflow-hidden">
|
|
<HeroDecor {...args} />
|
|
<div className="relative z-10 text-white mt-4">
|
|
<h3>Content Overlay</h3>
|
|
<p>This demonstrates how the decoration appears behind content.</p>
|
|
</div>
|
|
</div>,
|
|
parameters: {
|
|
docs: {
|
|
description: {
|
|
story: "Hero decoration with background color to show how it integrates with content."
|
|
}
|
|
}
|
|
}
|
|
}`,
|
|
...t.parameters?.docs?.source,
|
|
},
|
|
},
|
|
};
|
|
const p = ["Default", "WithBackground"];
|
|
export {
|
|
r as Default,
|
|
t as WithBackground,
|
|
p as __namedExportsOrder,
|
|
d as default,
|
|
};
|