Cleanup
This commit is contained in:
adilallo
@@ -77,9 +77,6 @@ next-env.d.ts
|
||||
*storybook.log
|
||||
storybook-static
|
||||
|
||||
# Storybook build output (config files should be committed)
|
||||
storybook-static
|
||||
|
||||
# Gitea runner runtime files
|
||||
.runner
|
||||
.runner.pid
|
||||
|
||||
@@ -170,13 +170,10 @@ community-rule/
|
||||
│ └── runner-config.yaml # Runner configuration
|
||||
├── docs/ # Documentation
|
||||
│ ├── README.md # Documentation index
|
||||
│ └── guides/ # Comprehensive guides
|
||||
│ ├── testing.md # Testing strategy
|
||||
│ ├── testing-framework.md # Testing framework details
|
||||
│ ├── testing-quick-reference.md # Quick reference
|
||||
│ ├── performance.md # Performance optimization
|
||||
│ ├── visual-regression.md # Visual testing
|
||||
│ └── content-creation.md # Content guidelines
|
||||
│ ├── TESTING_GUIDE.md # Testing guide
|
||||
│ ├── CUSTOM_HOOKS.md # Custom hooks documentation
|
||||
│ └── guides/ # Guides
|
||||
│ └── content-creation.md # Content creation guide
|
||||
├── scripts/ # Utility scripts
|
||||
│ ├── start-runner.sh # Start Gitea runner
|
||||
│ ├── status-runner.sh # Check runner status
|
||||
@@ -207,16 +204,16 @@ community-rule/
|
||||
## 📖 Documentation
|
||||
|
||||
- **[Documentation Index](docs/README.md)** - Complete documentation guide
|
||||
- **[Testing Guides](docs/guides/)** - Testing strategy, framework, and quick reference
|
||||
- **[Performance Guide](docs/guides/performance.md)** - Performance optimization guide
|
||||
- **[Visual Regression Guide](docs/guides/visual-regression.md)** - Visual testing guide
|
||||
- **[Testing Guide](docs/TESTING_GUIDE.md)** - Testing strategy, component tests, E2E tests, and accessibility
|
||||
- **[Custom Hooks](docs/CUSTOM_HOOKS.md)** - Documentation for custom React hooks
|
||||
- **[Content Creation Guide](docs/guides/content-creation.md)** - Guide for creating blog content
|
||||
- **[Storybook](http://localhost:6006)** - Component documentation (local)
|
||||
|
||||
## 🤝 Contributing
|
||||
|
||||
1. **Fork the repository**
|
||||
2. **Create a feature branch**: `git checkout -b feature/amazing-feature`
|
||||
3. **Write tests first** (see [Testing Guide](docs/guides/testing.md))
|
||||
3. **Write tests first** (see [Testing Guide](docs/TESTING_GUIDE.md))
|
||||
4. **Make your changes**
|
||||
5. **Run tests**: `npm test && npm run e2e`
|
||||
6. **Commit changes**: `git commit -m "feat: add amazing feature"`
|
||||
|
||||
+28
-47
@@ -1,63 +1,44 @@
|
||||
# Documentation Index
|
||||
# Documentation
|
||||
|
||||
This directory contains all project documentation organized by topic.
|
||||
This directory contains project documentation organized by topic.
|
||||
|
||||
## 📚 Documentation Structure
|
||||
## Documentation Structure
|
||||
|
||||
### Core Documentation
|
||||
|
||||
- **[TESTING_GUIDE.md](./TESTING_GUIDE.md)** - Complete testing guide covering component tests, E2E tests, accessibility, and testing philosophy
|
||||
- **[CUSTOM_HOOKS.md](./CUSTOM_HOOKS.md)** - Documentation for all custom React hooks used in the project
|
||||
|
||||
### Guides (`guides/`)
|
||||
|
||||
Comprehensive guides for different aspects of the project:
|
||||
- **[content-creation.md](./guides/content-creation.md)** - Guide for creating blog content
|
||||
|
||||
#### Testing
|
||||
## Quick Navigation
|
||||
|
||||
- **[testing.md](./guides/testing.md)** - Complete testing strategy and philosophy
|
||||
- **[testing-framework.md](./guides/testing-framework.md)** - Detailed testing framework documentation
|
||||
- **[testing-quick-reference.md](./guides/testing-quick-reference.md)** - Quick reference for daily development
|
||||
- **[visual-regression.md](./guides/visual-regression.md)** - Visual regression testing guide
|
||||
### For Testing
|
||||
|
||||
#### Performance
|
||||
Start with **[TESTING_GUIDE.md](./TESTING_GUIDE.md)** for:
|
||||
- Testing philosophy and approach
|
||||
- Component testing with `componentTestSuite`
|
||||
- E2E testing with Playwright
|
||||
- Accessibility testing
|
||||
- How to add tests for new components
|
||||
|
||||
- **[performance.md](./guides/performance.md)** - Performance optimization and monitoring guide
|
||||
### For Custom Hooks
|
||||
|
||||
#### Content
|
||||
See **[CUSTOM_HOOKS.md](./CUSTOM_HOOKS.md)** for:
|
||||
- Available custom hooks
|
||||
- Usage examples
|
||||
- API documentation
|
||||
|
||||
- **[content-creation.md](./guides/content-creation.md)** - Content creation guidelines
|
||||
### For Content Creation
|
||||
|
||||
## 🎯 Quick Navigation
|
||||
See **[content-creation.md](./guides/content-creation.md)** for:
|
||||
- How to create blog articles
|
||||
- Content guidelines
|
||||
- Contribution workflow
|
||||
|
||||
### For New Team Members
|
||||
|
||||
1. Start with **[testing.md](./guides/testing.md)** to understand the testing strategy
|
||||
2. Use **[testing-quick-reference.md](./guides/testing-quick-reference.md)** for daily development
|
||||
3. Reference **[performance.md](./guides/performance.md)** for performance optimization
|
||||
|
||||
### For Daily Development
|
||||
|
||||
- **[testing-quick-reference.md](./guides/testing-quick-reference.md)** - Essential commands and troubleshooting
|
||||
- **[testing-framework.md](./guides/testing-framework.md)** - Detailed testing explanations
|
||||
|
||||
### For Specific Topics
|
||||
|
||||
- **Visual Testing**: [visual-regression.md](./guides/visual-regression.md)
|
||||
- **Performance**: [performance.md](./guides/performance.md)
|
||||
- **Content**: [content-creation.md](./guides/content-creation.md)
|
||||
|
||||
## 📊 Current Project Status
|
||||
|
||||
- **Unit Tests**: 94.88% coverage (exceeds 85% target)
|
||||
- **Integration Tests**: 5 comprehensive test suites
|
||||
- **E2E Tests**: 92 tests across 4 browsers
|
||||
- **Visual Regression**: 23 tests per browser
|
||||
- **Accessibility**: WCAG 2.1 AA compliance
|
||||
- **Performance**: Lighthouse CI with budgets
|
||||
- **Bundle Analysis**: Real-time monitoring with budgets
|
||||
- **Web Vitals Tracking**: Core Web Vitals collection
|
||||
|
||||
## 🔄 Documentation Updates
|
||||
|
||||
This documentation is maintained by the CommunityRule development team and updated regularly.
|
||||
|
||||
## 📚 Additional Resources
|
||||
## Additional Resources
|
||||
|
||||
- **Vitest Documentation**: https://vitest.dev/
|
||||
- **Playwright Documentation**: https://playwright.dev/
|
||||
|
||||
Binary file not shown.
@@ -1,15 +0,0 @@
|
||||
import { j as u } from "./jsx-runtime-C_nHp4yK.js";
|
||||
function o({ src: e, alt: s, size: a = "small", className: l = "", ...r }) {
|
||||
const t = `rounded-[var(--radius-measures-radius-full)] object-cover ${{ small: "w-[16px] h-[16px]", medium: "w-[18px] h-[18px]", large: "w-[24px] h-[24px]", xlarge: "w-[32px] h-[32px]" }[a]} ${l}`;
|
||||
return u.jsx("img", { src: e, alt: s, className: t, ...r });
|
||||
}
|
||||
o.__docgenInfo = {
|
||||
description: "",
|
||||
methods: [],
|
||||
displayName: "Avatar",
|
||||
props: {
|
||||
size: { defaultValue: { value: '"small"', computed: !1 }, required: !1 },
|
||||
className: { defaultValue: { value: '""', computed: !1 }, required: !1 },
|
||||
},
|
||||
};
|
||||
export { o as A };
|
||||
@@ -1,358 +0,0 @@
|
||||
import { j as s } from "./jsx-runtime-C_nHp4yK.js";
|
||||
import { A as a } from "./Avatar-C4Vb3oYl.js";
|
||||
import "./iframe-D_aMTKb2.js";
|
||||
import "./preload-helper-DIZFD4sK.js";
|
||||
const d = {
|
||||
title: "Components/Avatar",
|
||||
component: a,
|
||||
parameters: {
|
||||
layout: "centered",
|
||||
docs: {
|
||||
description: {
|
||||
component:
|
||||
"A simple avatar component that displays user profile images with multiple size variants. Supports custom images and alt text for accessibility.",
|
||||
},
|
||||
},
|
||||
},
|
||||
argTypes: {
|
||||
src: {
|
||||
control: { type: "text" },
|
||||
description: "The source URL of the avatar image",
|
||||
},
|
||||
alt: {
|
||||
control: { type: "text" },
|
||||
description: "Alt text for accessibility",
|
||||
},
|
||||
size: {
|
||||
control: { type: "select" },
|
||||
options: ["small", "medium", "large", "xlarge"],
|
||||
description: "The size of the avatar",
|
||||
},
|
||||
className: {
|
||||
control: { type: "text" },
|
||||
description: "Additional CSS classes",
|
||||
},
|
||||
},
|
||||
tags: ["autodocs"],
|
||||
},
|
||||
r = {
|
||||
args: { src: "/assets/Avatar_1.png", alt: "User Avatar", size: "medium" },
|
||||
},
|
||||
t = {
|
||||
args: { src: "/assets/Avatar_1.png", alt: "User Avatar" },
|
||||
render: (e) =>
|
||||
s.jsx("div", {
|
||||
className: "space-y-4",
|
||||
children: s.jsxs("div", {
|
||||
className: "space-x-4",
|
||||
children: [
|
||||
s.jsx(a, { ...e, size: "small" }),
|
||||
s.jsx(a, { ...e, size: "medium" }),
|
||||
s.jsx(a, { ...e, size: "large" }),
|
||||
s.jsx(a, { ...e, size: "xlarge" }),
|
||||
],
|
||||
}),
|
||||
}),
|
||||
parameters: {
|
||||
docs: {
|
||||
description: {
|
||||
story: "Different size variants available for the avatar component.",
|
||||
},
|
||||
},
|
||||
},
|
||||
},
|
||||
i = {
|
||||
args: { size: "large" },
|
||||
render: (e) =>
|
||||
s.jsx("div", {
|
||||
className: "space-y-4",
|
||||
children: s.jsxs("div", {
|
||||
className: "space-x-4",
|
||||
children: [
|
||||
s.jsx(a, { ...e, src: "assets/Avatar_1.png", alt: "User 1" }),
|
||||
s.jsx(a, { ...e, src: "assets/Avatar_2.png", alt: "User 2" }),
|
||||
s.jsx(a, { ...e, src: "assets/Avatar_3.png", alt: "User 3" }),
|
||||
],
|
||||
}),
|
||||
}),
|
||||
parameters: {
|
||||
docs: {
|
||||
description: {
|
||||
story: "Different avatar images available in the project.",
|
||||
},
|
||||
},
|
||||
},
|
||||
},
|
||||
n = {
|
||||
args: {},
|
||||
render: () =>
|
||||
s.jsxs("div", {
|
||||
className: "space-y-6",
|
||||
children: [
|
||||
s.jsxs("div", {
|
||||
children: [
|
||||
s.jsx("h3", {
|
||||
className: "text-white font-semibold mb-3",
|
||||
children: "Small Size",
|
||||
}),
|
||||
s.jsxs("div", {
|
||||
className: "space-x-4",
|
||||
children: [
|
||||
s.jsx(a, {
|
||||
size: "small",
|
||||
src: "assets/Avatar_1.png",
|
||||
alt: "User 1",
|
||||
}),
|
||||
s.jsx(a, {
|
||||
size: "small",
|
||||
src: "assets/Avatar_2.png",
|
||||
alt: "User 2",
|
||||
}),
|
||||
s.jsx(a, {
|
||||
size: "small",
|
||||
src: "assets/Avatar_3.png",
|
||||
alt: "User 3",
|
||||
}),
|
||||
],
|
||||
}),
|
||||
],
|
||||
}),
|
||||
s.jsxs("div", {
|
||||
children: [
|
||||
s.jsx("h3", {
|
||||
className: "text-white font-semibold mb-3",
|
||||
children: "Medium Size",
|
||||
}),
|
||||
s.jsxs("div", {
|
||||
className: "space-x-4",
|
||||
children: [
|
||||
s.jsx(a, {
|
||||
size: "medium",
|
||||
src: "assets/Avatar_1.png",
|
||||
alt: "User 1",
|
||||
}),
|
||||
s.jsx(a, {
|
||||
size: "medium",
|
||||
src: "assets/Avatar_2.png",
|
||||
alt: "User 2",
|
||||
}),
|
||||
s.jsx(a, {
|
||||
size: "medium",
|
||||
src: "assets/Avatar_3.png",
|
||||
alt: "User 3",
|
||||
}),
|
||||
],
|
||||
}),
|
||||
],
|
||||
}),
|
||||
s.jsxs("div", {
|
||||
children: [
|
||||
s.jsx("h3", {
|
||||
className: "text-white font-semibold mb-3",
|
||||
children: "Large Size",
|
||||
}),
|
||||
s.jsxs("div", {
|
||||
className: "space-x-4",
|
||||
children: [
|
||||
s.jsx(a, {
|
||||
size: "large",
|
||||
src: "assets/Avatar_1.png",
|
||||
alt: "User 1",
|
||||
}),
|
||||
s.jsx(a, {
|
||||
size: "large",
|
||||
src: "assets/Avatar_2.png",
|
||||
alt: "User 2",
|
||||
}),
|
||||
s.jsx(a, {
|
||||
size: "large",
|
||||
src: "assets/Avatar_3.png",
|
||||
alt: "User 3",
|
||||
}),
|
||||
],
|
||||
}),
|
||||
],
|
||||
}),
|
||||
s.jsxs("div", {
|
||||
children: [
|
||||
s.jsx("h3", {
|
||||
className: "text-white font-semibold mb-3",
|
||||
children: "XLarge Size",
|
||||
}),
|
||||
s.jsxs("div", {
|
||||
className: "space-x-4",
|
||||
children: [
|
||||
s.jsx(a, {
|
||||
size: "xlarge",
|
||||
src: "assets/Avatar_1.png",
|
||||
alt: "User 1",
|
||||
}),
|
||||
s.jsx(a, {
|
||||
size: "xlarge",
|
||||
src: "assets/Avatar_2.png",
|
||||
alt: "User 2",
|
||||
}),
|
||||
s.jsx(a, {
|
||||
size: "xlarge",
|
||||
src: "assets/Avatar_3.png",
|
||||
alt: "User 3",
|
||||
}),
|
||||
],
|
||||
}),
|
||||
],
|
||||
}),
|
||||
],
|
||||
}),
|
||||
parameters: {
|
||||
docs: {
|
||||
description: {
|
||||
story:
|
||||
"Complete overview of all avatar sizes with different user images.",
|
||||
},
|
||||
},
|
||||
},
|
||||
};
|
||||
r.parameters = {
|
||||
...r.parameters,
|
||||
docs: {
|
||||
...r.parameters?.docs,
|
||||
source: {
|
||||
originalSource: `{
|
||||
args: {
|
||||
src: "/assets/Avatar_1.png",
|
||||
alt: "User Avatar",
|
||||
size: "medium"
|
||||
}
|
||||
}`,
|
||||
...r.parameters?.docs?.source,
|
||||
},
|
||||
},
|
||||
};
|
||||
t.parameters = {
|
||||
...t.parameters,
|
||||
docs: {
|
||||
...t.parameters?.docs,
|
||||
source: {
|
||||
originalSource: `{
|
||||
args: {
|
||||
src: "/assets/Avatar_1.png",
|
||||
alt: "User Avatar"
|
||||
},
|
||||
render: args => <div className="space-y-4">
|
||||
<div className="space-x-4">
|
||||
<Avatar {...args} size="small" />
|
||||
<Avatar {...args} size="medium" />
|
||||
<Avatar {...args} size="large" />
|
||||
<Avatar {...args} size="xlarge" />
|
||||
</div>
|
||||
</div>,
|
||||
parameters: {
|
||||
docs: {
|
||||
description: {
|
||||
story: "Different size variants available for the avatar component."
|
||||
}
|
||||
}
|
||||
}
|
||||
}`,
|
||||
...t.parameters?.docs?.source,
|
||||
},
|
||||
},
|
||||
};
|
||||
i.parameters = {
|
||||
...i.parameters,
|
||||
docs: {
|
||||
...i.parameters?.docs,
|
||||
source: {
|
||||
originalSource: `{
|
||||
args: {
|
||||
size: "large"
|
||||
},
|
||||
render: args => <div className="space-y-4">
|
||||
<div className="space-x-4">
|
||||
<Avatar {...args} src="assets/Avatar_1.png" alt="User 1" />
|
||||
<Avatar {...args} src="assets/Avatar_2.png" alt="User 2" />
|
||||
<Avatar {...args} src="assets/Avatar_3.png" alt="User 3" />
|
||||
</div>
|
||||
</div>,
|
||||
parameters: {
|
||||
docs: {
|
||||
description: {
|
||||
story: "Different avatar images available in the project."
|
||||
}
|
||||
}
|
||||
}
|
||||
}`,
|
||||
...i.parameters?.docs?.source,
|
||||
},
|
||||
},
|
||||
};
|
||||
n.parameters = {
|
||||
...n.parameters,
|
||||
docs: {
|
||||
...n.parameters?.docs,
|
||||
source: {
|
||||
originalSource: `{
|
||||
args: {},
|
||||
render: () => <div className="space-y-6">
|
||||
<div>
|
||||
<h3 className="text-white font-semibold mb-3">Small Size</h3>
|
||||
<div className="space-x-4">
|
||||
<Avatar size="small" src="assets/Avatar_1.png" alt="User 1" />
|
||||
<Avatar size="small" src="assets/Avatar_2.png" alt="User 2" />
|
||||
<Avatar size="small" src="assets/Avatar_3.png" alt="User 3" />
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<h3 className="text-white font-semibold mb-3">Medium Size</h3>
|
||||
<div className="space-x-4">
|
||||
<Avatar size="medium" src="assets/Avatar_1.png" alt="User 1" />
|
||||
<Avatar size="medium" src="assets/Avatar_2.png" alt="User 2" />
|
||||
<Avatar size="medium" src="assets/Avatar_3.png" alt="User 3" />
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<h3 className="text-white font-semibold mb-3">Large Size</h3>
|
||||
<div className="space-x-4">
|
||||
<Avatar size="large" src="assets/Avatar_1.png" alt="User 1" />
|
||||
<Avatar size="large" src="assets/Avatar_2.png" alt="User 2" />
|
||||
<Avatar size="large" src="assets/Avatar_3.png" alt="User 3" />
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<h3 className="text-white font-semibold mb-3">XLarge Size</h3>
|
||||
<div className="space-x-4">
|
||||
<Avatar size="xlarge" src="assets/Avatar_1.png" alt="User 1" />
|
||||
<Avatar size="xlarge" src="assets/Avatar_2.png" alt="User 2" />
|
||||
<Avatar size="xlarge" src="assets/Avatar_3.png" alt="User 3" />
|
||||
</div>
|
||||
</div>
|
||||
</div>,
|
||||
parameters: {
|
||||
docs: {
|
||||
description: {
|
||||
story: "Complete overview of all avatar sizes with different user images."
|
||||
}
|
||||
}
|
||||
}
|
||||
}`,
|
||||
...n.parameters?.docs?.source,
|
||||
},
|
||||
},
|
||||
};
|
||||
const v = [
|
||||
"Default",
|
||||
"Sizes",
|
||||
"DifferentAvatars",
|
||||
"AllSizesWithDifferentAvatars",
|
||||
];
|
||||
export {
|
||||
n as AllSizesWithDifferentAvatars,
|
||||
r as Default,
|
||||
i as DifferentAvatars,
|
||||
t as Sizes,
|
||||
v as __namedExportsOrder,
|
||||
d as default,
|
||||
};
|
||||
@@ -1,15 +0,0 @@
|
||||
import { j as r } from "./jsx-runtime-C_nHp4yK.js";
|
||||
function i({ children: e, size: a = "small", className: s = "", ...l }) {
|
||||
const t = `items-center ${{ small: "flex -space-x-2", medium: "flex -space-x-[9px]", large: "flex -space-x-[10px]", xlarge: "flex -space-x-[13px]" }[a]} ${s}`;
|
||||
return r.jsx("div", { className: t, ...l, children: e });
|
||||
}
|
||||
i.__docgenInfo = {
|
||||
description: "",
|
||||
methods: [],
|
||||
displayName: "AvatarContainer",
|
||||
props: {
|
||||
size: { defaultValue: { value: '"small"', computed: !1 }, required: !1 },
|
||||
className: { defaultValue: { value: '""', computed: !1 }, required: !1 },
|
||||
},
|
||||
};
|
||||
export { i as A };
|
||||
@@ -1,664 +0,0 @@
|
||||
import { j as s } from "./jsx-runtime-C_nHp4yK.js";
|
||||
import { A as e } from "./AvatarContainer-Bt0G0TWZ.js";
|
||||
import { A as a } from "./Avatar-C4Vb3oYl.js";
|
||||
import "./iframe-D_aMTKb2.js";
|
||||
import "./preload-helper-DIZFD4sK.js";
|
||||
const g = {
|
||||
title: "Components/AvatarContainer",
|
||||
component: e,
|
||||
parameters: {
|
||||
layout: "centered",
|
||||
docs: {
|
||||
description: {
|
||||
component:
|
||||
"A container component that groups multiple avatars together with overlapping spacing. Useful for displaying multiple users or team members in a compact format.",
|
||||
},
|
||||
},
|
||||
},
|
||||
argTypes: {
|
||||
size: {
|
||||
control: { type: "select" },
|
||||
options: ["small", "medium", "large", "xlarge"],
|
||||
description: "The size of the avatar container and its children",
|
||||
},
|
||||
className: {
|
||||
control: { type: "text" },
|
||||
description: "Additional CSS classes",
|
||||
},
|
||||
},
|
||||
tags: ["autodocs"],
|
||||
},
|
||||
t = {
|
||||
args: { size: "medium" },
|
||||
render: (r) =>
|
||||
s.jsxs(e, {
|
||||
...r,
|
||||
children: [
|
||||
s.jsx(a, { size: r.size, src: "assets/Avatar_1.png", alt: "User 1" }),
|
||||
s.jsx(a, { size: r.size, src: "assets/Avatar_2.png", alt: "User 2" }),
|
||||
s.jsx(a, { size: r.size, src: "assets/Avatar_3.png", alt: "User 3" }),
|
||||
],
|
||||
}),
|
||||
},
|
||||
n = {
|
||||
args: {},
|
||||
render: () =>
|
||||
s.jsxs("div", {
|
||||
className: "space-y-6",
|
||||
children: [
|
||||
s.jsxs("div", {
|
||||
children: [
|
||||
s.jsx("h3", {
|
||||
className: "text-white font-semibold mb-3",
|
||||
children: "Small Size",
|
||||
}),
|
||||
s.jsxs(e, {
|
||||
size: "small",
|
||||
children: [
|
||||
s.jsx(a, {
|
||||
size: "small",
|
||||
src: "assets/Avatar_1.png",
|
||||
alt: "User 1",
|
||||
}),
|
||||
s.jsx(a, {
|
||||
size: "small",
|
||||
src: "assets/Avatar_2.png",
|
||||
alt: "User 2",
|
||||
}),
|
||||
s.jsx(a, {
|
||||
size: "small",
|
||||
src: "assets/Avatar_3.png",
|
||||
alt: "User 3",
|
||||
}),
|
||||
],
|
||||
}),
|
||||
],
|
||||
}),
|
||||
s.jsxs("div", {
|
||||
children: [
|
||||
s.jsx("h3", {
|
||||
className: "text-white font-semibold mb-3",
|
||||
children: "Medium Size",
|
||||
}),
|
||||
s.jsxs(e, {
|
||||
size: "medium",
|
||||
children: [
|
||||
s.jsx(a, {
|
||||
size: "medium",
|
||||
src: "assets/Avatar_1.png",
|
||||
alt: "User 1",
|
||||
}),
|
||||
s.jsx(a, {
|
||||
size: "medium",
|
||||
src: "assets/Avatar_2.png",
|
||||
alt: "User 2",
|
||||
}),
|
||||
s.jsx(a, {
|
||||
size: "medium",
|
||||
src: "assets/Avatar_3.png",
|
||||
alt: "User 3",
|
||||
}),
|
||||
],
|
||||
}),
|
||||
],
|
||||
}),
|
||||
s.jsxs("div", {
|
||||
children: [
|
||||
s.jsx("h3", {
|
||||
className: "text-white font-semibold mb-3",
|
||||
children: "Large Size",
|
||||
}),
|
||||
s.jsxs(e, {
|
||||
size: "large",
|
||||
children: [
|
||||
s.jsx(a, {
|
||||
size: "large",
|
||||
src: "assets/Avatar_1.png",
|
||||
alt: "User 1",
|
||||
}),
|
||||
s.jsx(a, {
|
||||
size: "large",
|
||||
src: "assets/Avatar_2.png",
|
||||
alt: "User 2",
|
||||
}),
|
||||
s.jsx(a, {
|
||||
size: "large",
|
||||
src: "assets/Avatar_3.png",
|
||||
alt: "User 3",
|
||||
}),
|
||||
],
|
||||
}),
|
||||
],
|
||||
}),
|
||||
s.jsxs("div", {
|
||||
children: [
|
||||
s.jsx("h3", {
|
||||
className: "text-white font-semibold mb-3",
|
||||
children: "XLarge Size",
|
||||
}),
|
||||
s.jsxs(e, {
|
||||
size: "xlarge",
|
||||
children: [
|
||||
s.jsx(a, {
|
||||
size: "xlarge",
|
||||
src: "assets/Avatar_1.png",
|
||||
alt: "User 1",
|
||||
}),
|
||||
s.jsx(a, {
|
||||
size: "xlarge",
|
||||
src: "assets/Avatar_2.png",
|
||||
alt: "User 2",
|
||||
}),
|
||||
s.jsx(a, {
|
||||
size: "xlarge",
|
||||
src: "assets/Avatar_3.png",
|
||||
alt: "User 3",
|
||||
}),
|
||||
],
|
||||
}),
|
||||
],
|
||||
}),
|
||||
],
|
||||
}),
|
||||
parameters: {
|
||||
docs: {
|
||||
description: {
|
||||
story:
|
||||
"Different size variants of the avatar container with overlapping spacing.",
|
||||
},
|
||||
},
|
||||
},
|
||||
},
|
||||
i = {
|
||||
args: {},
|
||||
render: () =>
|
||||
s.jsxs("div", {
|
||||
className: "space-y-6",
|
||||
children: [
|
||||
s.jsxs("div", {
|
||||
children: [
|
||||
s.jsx("h3", {
|
||||
className: "text-white font-semibold mb-3",
|
||||
children: "2 Users",
|
||||
}),
|
||||
s.jsxs(e, {
|
||||
size: "large",
|
||||
children: [
|
||||
s.jsx(a, {
|
||||
size: "large",
|
||||
src: "assets/Avatar_1.png",
|
||||
alt: "User 1",
|
||||
}),
|
||||
s.jsx(a, {
|
||||
size: "large",
|
||||
src: "assets/Avatar_2.png",
|
||||
alt: "User 2",
|
||||
}),
|
||||
],
|
||||
}),
|
||||
],
|
||||
}),
|
||||
s.jsxs("div", {
|
||||
children: [
|
||||
s.jsx("h3", {
|
||||
className: "text-white font-semibold mb-3",
|
||||
children: "3 Users",
|
||||
}),
|
||||
s.jsxs(e, {
|
||||
size: "large",
|
||||
children: [
|
||||
s.jsx(a, {
|
||||
size: "large",
|
||||
src: "assets/Avatar_1.png",
|
||||
alt: "User 1",
|
||||
}),
|
||||
s.jsx(a, {
|
||||
size: "large",
|
||||
src: "assets/Avatar_2.png",
|
||||
alt: "User 2",
|
||||
}),
|
||||
s.jsx(a, {
|
||||
size: "large",
|
||||
src: "assets/Avatar_3.png",
|
||||
alt: "User 3",
|
||||
}),
|
||||
],
|
||||
}),
|
||||
],
|
||||
}),
|
||||
s.jsxs("div", {
|
||||
children: [
|
||||
s.jsx("h3", {
|
||||
className: "text-white font-semibold mb-3",
|
||||
children: "4 Users",
|
||||
}),
|
||||
s.jsxs(e, {
|
||||
size: "large",
|
||||
children: [
|
||||
s.jsx(a, {
|
||||
size: "large",
|
||||
src: "assets/Avatar_1.png",
|
||||
alt: "User 1",
|
||||
}),
|
||||
s.jsx(a, {
|
||||
size: "large",
|
||||
src: "assets/Avatar_2.png",
|
||||
alt: "User 2",
|
||||
}),
|
||||
s.jsx(a, {
|
||||
size: "large",
|
||||
src: "assets/Avatar_3.png",
|
||||
alt: "User 3",
|
||||
}),
|
||||
s.jsx(a, {
|
||||
size: "large",
|
||||
src: "assets/Avatar_1.png",
|
||||
alt: "User 4",
|
||||
}),
|
||||
],
|
||||
}),
|
||||
],
|
||||
}),
|
||||
s.jsxs("div", {
|
||||
children: [
|
||||
s.jsx("h3", {
|
||||
className: "text-white font-semibold mb-3",
|
||||
children: "5 Users",
|
||||
}),
|
||||
s.jsxs(e, {
|
||||
size: "large",
|
||||
children: [
|
||||
s.jsx(a, {
|
||||
size: "large",
|
||||
src: "assets/Avatar_1.png",
|
||||
alt: "User 1",
|
||||
}),
|
||||
s.jsx(a, {
|
||||
size: "large",
|
||||
src: "assets/Avatar_2.png",
|
||||
alt: "User 2",
|
||||
}),
|
||||
s.jsx(a, {
|
||||
size: "large",
|
||||
src: "assets/Avatar_3.png",
|
||||
alt: "User 3",
|
||||
}),
|
||||
s.jsx(a, {
|
||||
size: "large",
|
||||
src: "assets/Avatar_1.png",
|
||||
alt: "User 4",
|
||||
}),
|
||||
s.jsx(a, {
|
||||
size: "large",
|
||||
src: "assets/Avatar_2.png",
|
||||
alt: "User 5",
|
||||
}),
|
||||
],
|
||||
}),
|
||||
],
|
||||
}),
|
||||
],
|
||||
}),
|
||||
parameters: {
|
||||
docs: {
|
||||
description: {
|
||||
story:
|
||||
"Avatar containers with different numbers of users to show the overlapping effect.",
|
||||
},
|
||||
},
|
||||
},
|
||||
},
|
||||
l = {
|
||||
args: {},
|
||||
render: () =>
|
||||
s.jsx("div", {
|
||||
className: "min-h-screen bg-[var(--color-surface-default-primary)] p-8",
|
||||
children: s.jsxs("div", {
|
||||
className: "max-w-4xl mx-auto",
|
||||
children: [
|
||||
s.jsx("h2", {
|
||||
className: "text-white font-semibold mb-6",
|
||||
children: "Avatar Container in Context",
|
||||
}),
|
||||
s.jsxs("div", {
|
||||
className: "space-y-8",
|
||||
children: [
|
||||
s.jsxs("div", {
|
||||
className:
|
||||
"bg-[var(--color-surface-default-secondary)] p-6 rounded-lg",
|
||||
children: [
|
||||
s.jsx("h3", {
|
||||
className: "text-white font-semibold mb-4",
|
||||
children: "Team Members",
|
||||
}),
|
||||
s.jsxs("div", {
|
||||
className: "flex items-center space-x-4",
|
||||
children: [
|
||||
s.jsxs(e, {
|
||||
size: "medium",
|
||||
children: [
|
||||
s.jsx(a, {
|
||||
size: "medium",
|
||||
src: "assets/Avatar_1.png",
|
||||
alt: "User 1",
|
||||
}),
|
||||
s.jsx(a, {
|
||||
size: "medium",
|
||||
src: "assets/Avatar_2.png",
|
||||
alt: "User 2",
|
||||
}),
|
||||
s.jsx(a, {
|
||||
size: "medium",
|
||||
src: "assets/Avatar_3.png",
|
||||
alt: "User 3",
|
||||
}),
|
||||
],
|
||||
}),
|
||||
s.jsx("span", {
|
||||
className: "text-white",
|
||||
children: "3 team members",
|
||||
}),
|
||||
],
|
||||
}),
|
||||
],
|
||||
}),
|
||||
s.jsxs("div", {
|
||||
className:
|
||||
"bg-[var(--color-surface-default-secondary)] p-6 rounded-lg",
|
||||
children: [
|
||||
s.jsx("h3", {
|
||||
className: "text-white font-semibold mb-4",
|
||||
children: "Project Contributors",
|
||||
}),
|
||||
s.jsxs("div", {
|
||||
className: "flex items-center space-x-4",
|
||||
children: [
|
||||
s.jsxs(e, {
|
||||
size: "large",
|
||||
children: [
|
||||
s.jsx(a, {
|
||||
size: "large",
|
||||
src: "assets/Avatar_1.png",
|
||||
alt: "User 1",
|
||||
}),
|
||||
s.jsx(a, {
|
||||
size: "large",
|
||||
src: "assets/Avatar_2.png",
|
||||
alt: "User 2",
|
||||
}),
|
||||
s.jsx(a, {
|
||||
size: "large",
|
||||
src: "assets/Avatar_3.png",
|
||||
alt: "User 3",
|
||||
}),
|
||||
s.jsx(a, {
|
||||
size: "large",
|
||||
src: "assets/Avatar_1.png",
|
||||
alt: "User 4",
|
||||
}),
|
||||
],
|
||||
}),
|
||||
s.jsx("span", {
|
||||
className: "text-white",
|
||||
children: "4 contributors",
|
||||
}),
|
||||
],
|
||||
}),
|
||||
],
|
||||
}),
|
||||
s.jsxs("div", {
|
||||
className:
|
||||
"bg-[var(--color-surface-default-secondary)] p-6 rounded-lg",
|
||||
children: [
|
||||
s.jsx("h3", {
|
||||
className: "text-white font-semibold mb-4",
|
||||
children: "Small Team",
|
||||
}),
|
||||
s.jsxs("div", {
|
||||
className: "flex items-center space-x-4",
|
||||
children: [
|
||||
s.jsxs(e, {
|
||||
size: "small",
|
||||
children: [
|
||||
s.jsx(a, {
|
||||
size: "small",
|
||||
src: "assets/Avatar_1.png",
|
||||
alt: "User 1",
|
||||
}),
|
||||
s.jsx(a, {
|
||||
size: "small",
|
||||
src: "assets/Avatar_2.png",
|
||||
alt: "User 2",
|
||||
}),
|
||||
],
|
||||
}),
|
||||
s.jsx("span", {
|
||||
className: "text-white",
|
||||
children: "2 members",
|
||||
}),
|
||||
],
|
||||
}),
|
||||
],
|
||||
}),
|
||||
],
|
||||
}),
|
||||
],
|
||||
}),
|
||||
}),
|
||||
parameters: {
|
||||
docs: {
|
||||
description: {
|
||||
story:
|
||||
"Avatar containers used in realistic contexts to show how they integrate with other UI elements.",
|
||||
},
|
||||
},
|
||||
},
|
||||
};
|
||||
t.parameters = {
|
||||
...t.parameters,
|
||||
docs: {
|
||||
...t.parameters?.docs,
|
||||
source: {
|
||||
originalSource: `{
|
||||
args: {
|
||||
size: "medium"
|
||||
},
|
||||
render: args => <AvatarContainer {...args}>
|
||||
<Avatar size={args.size} src="assets/Avatar_1.png" alt="User 1" />
|
||||
<Avatar size={args.size} src="assets/Avatar_2.png" alt="User 2" />
|
||||
<Avatar size={args.size} src="assets/Avatar_3.png" alt="User 3" />
|
||||
</AvatarContainer>
|
||||
}`,
|
||||
...t.parameters?.docs?.source,
|
||||
},
|
||||
},
|
||||
};
|
||||
n.parameters = {
|
||||
...n.parameters,
|
||||
docs: {
|
||||
...n.parameters?.docs,
|
||||
source: {
|
||||
originalSource: `{
|
||||
args: {},
|
||||
render: () => <div className="space-y-6">
|
||||
<div>
|
||||
<h3 className="text-white font-semibold mb-3">Small Size</h3>
|
||||
<AvatarContainer size="small">
|
||||
<Avatar size="small" src="assets/Avatar_1.png" alt="User 1" />
|
||||
<Avatar size="small" src="assets/Avatar_2.png" alt="User 2" />
|
||||
<Avatar size="small" src="assets/Avatar_3.png" alt="User 3" />
|
||||
</AvatarContainer>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<h3 className="text-white font-semibold mb-3">Medium Size</h3>
|
||||
<AvatarContainer size="medium">
|
||||
<Avatar size="medium" src="assets/Avatar_1.png" alt="User 1" />
|
||||
<Avatar size="medium" src="assets/Avatar_2.png" alt="User 2" />
|
||||
<Avatar size="medium" src="assets/Avatar_3.png" alt="User 3" />
|
||||
</AvatarContainer>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<h3 className="text-white font-semibold mb-3">Large Size</h3>
|
||||
<AvatarContainer size="large">
|
||||
<Avatar size="large" src="assets/Avatar_1.png" alt="User 1" />
|
||||
<Avatar size="large" src="assets/Avatar_2.png" alt="User 2" />
|
||||
<Avatar size="large" src="assets/Avatar_3.png" alt="User 3" />
|
||||
</AvatarContainer>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<h3 className="text-white font-semibold mb-3">XLarge Size</h3>
|
||||
<AvatarContainer size="xlarge">
|
||||
<Avatar size="xlarge" src="assets/Avatar_1.png" alt="User 1" />
|
||||
<Avatar size="xlarge" src="assets/Avatar_2.png" alt="User 2" />
|
||||
<Avatar size="xlarge" src="assets/Avatar_3.png" alt="User 3" />
|
||||
</AvatarContainer>
|
||||
</div>
|
||||
</div>,
|
||||
parameters: {
|
||||
docs: {
|
||||
description: {
|
||||
story: "Different size variants of the avatar container with overlapping spacing."
|
||||
}
|
||||
}
|
||||
}
|
||||
}`,
|
||||
...n.parameters?.docs?.source,
|
||||
},
|
||||
},
|
||||
};
|
||||
i.parameters = {
|
||||
...i.parameters,
|
||||
docs: {
|
||||
...i.parameters?.docs,
|
||||
source: {
|
||||
originalSource: `{
|
||||
args: {},
|
||||
render: () => <div className="space-y-6">
|
||||
<div>
|
||||
<h3 className="text-white font-semibold mb-3">2 Users</h3>
|
||||
<AvatarContainer size="large">
|
||||
<Avatar size="large" src="assets/Avatar_1.png" alt="User 1" />
|
||||
<Avatar size="large" src="assets/Avatar_2.png" alt="User 2" />
|
||||
</AvatarContainer>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<h3 className="text-white font-semibold mb-3">3 Users</h3>
|
||||
<AvatarContainer size="large">
|
||||
<Avatar size="large" src="assets/Avatar_1.png" alt="User 1" />
|
||||
<Avatar size="large" src="assets/Avatar_2.png" alt="User 2" />
|
||||
<Avatar size="large" src="assets/Avatar_3.png" alt="User 3" />
|
||||
</AvatarContainer>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<h3 className="text-white font-semibold mb-3">4 Users</h3>
|
||||
<AvatarContainer size="large">
|
||||
<Avatar size="large" src="assets/Avatar_1.png" alt="User 1" />
|
||||
<Avatar size="large" src="assets/Avatar_2.png" alt="User 2" />
|
||||
<Avatar size="large" src="assets/Avatar_3.png" alt="User 3" />
|
||||
<Avatar size="large" src="assets/Avatar_1.png" alt="User 4" />
|
||||
</AvatarContainer>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<h3 className="text-white font-semibold mb-3">5 Users</h3>
|
||||
<AvatarContainer size="large">
|
||||
<Avatar size="large" src="assets/Avatar_1.png" alt="User 1" />
|
||||
<Avatar size="large" src="assets/Avatar_2.png" alt="User 2" />
|
||||
<Avatar size="large" src="assets/Avatar_3.png" alt="User 3" />
|
||||
<Avatar size="large" src="assets/Avatar_1.png" alt="User 4" />
|
||||
<Avatar size="large" src="assets/Avatar_2.png" alt="User 5" />
|
||||
</AvatarContainer>
|
||||
</div>
|
||||
</div>,
|
||||
parameters: {
|
||||
docs: {
|
||||
description: {
|
||||
story: "Avatar containers with different numbers of users to show the overlapping effect."
|
||||
}
|
||||
}
|
||||
}
|
||||
}`,
|
||||
...i.parameters?.docs?.source,
|
||||
},
|
||||
},
|
||||
};
|
||||
l.parameters = {
|
||||
...l.parameters,
|
||||
docs: {
|
||||
...l.parameters?.docs,
|
||||
source: {
|
||||
originalSource: `{
|
||||
args: {},
|
||||
render: () => <div className="min-h-screen bg-[var(--color-surface-default-primary)] p-8">
|
||||
<div className="max-w-4xl mx-auto">
|
||||
<h2 className="text-white font-semibold mb-6">
|
||||
Avatar Container in Context
|
||||
</h2>
|
||||
|
||||
<div className="space-y-8">
|
||||
<div className="bg-[var(--color-surface-default-secondary)] p-6 rounded-lg">
|
||||
<h3 className="text-white font-semibold mb-4">Team Members</h3>
|
||||
<div className="flex items-center space-x-4">
|
||||
<AvatarContainer size="medium">
|
||||
<Avatar size="medium" src="assets/Avatar_1.png" alt="User 1" />
|
||||
<Avatar size="medium" src="assets/Avatar_2.png" alt="User 2" />
|
||||
<Avatar size="medium" src="assets/Avatar_3.png" alt="User 3" />
|
||||
</AvatarContainer>
|
||||
<span className="text-white">3 team members</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="bg-[var(--color-surface-default-secondary)] p-6 rounded-lg">
|
||||
<h3 className="text-white font-semibold mb-4">
|
||||
Project Contributors
|
||||
</h3>
|
||||
<div className="flex items-center space-x-4">
|
||||
<AvatarContainer size="large">
|
||||
<Avatar size="large" src="assets/Avatar_1.png" alt="User 1" />
|
||||
<Avatar size="large" src="assets/Avatar_2.png" alt="User 2" />
|
||||
<Avatar size="large" src="assets/Avatar_3.png" alt="User 3" />
|
||||
<Avatar size="large" src="assets/Avatar_1.png" alt="User 4" />
|
||||
</AvatarContainer>
|
||||
<span className="text-white">4 contributors</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="bg-[var(--color-surface-default-secondary)] p-6 rounded-lg">
|
||||
<h3 className="text-white font-semibold mb-4">Small Team</h3>
|
||||
<div className="flex items-center space-x-4">
|
||||
<AvatarContainer size="small">
|
||||
<Avatar size="small" src="assets/Avatar_1.png" alt="User 1" />
|
||||
<Avatar size="small" src="assets/Avatar_2.png" alt="User 2" />
|
||||
</AvatarContainer>
|
||||
<span className="text-white">2 members</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>,
|
||||
parameters: {
|
||||
docs: {
|
||||
description: {
|
||||
story: "Avatar containers used in realistic contexts to show how they integrate with other UI elements."
|
||||
}
|
||||
}
|
||||
}
|
||||
}`,
|
||||
...l.parameters?.docs?.source,
|
||||
},
|
||||
},
|
||||
};
|
||||
const p = ["Default", "Sizes", "DifferentGroupSizes", "InContext"];
|
||||
export {
|
||||
t as Default,
|
||||
i as DifferentGroupSizes,
|
||||
l as InContext,
|
||||
n as Sizes,
|
||||
p as __namedExportsOrder,
|
||||
g as default,
|
||||
};
|
||||
Binary file not shown.
|
Before Width: | Height: | Size: 2.7 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 1.7 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 1.5 KiB |
@@ -1,10 +0,0 @@
|
||||
<svg width="24" height="22" viewBox="0 0 24 22" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<g clip-path="url(#clip0_18411_62931)">
|
||||
<path d="M5.42835 2.2446C8.08819 4.2226 10.9492 8.23317 11.9996 10.3855C13.05 8.23333 15.9108 4.22256 18.5708 2.2446C20.49 0.817353 23.5996 -0.28697 23.5996 3.22704C23.5996 3.92884 23.1934 9.1225 22.9551 9.96567C22.127 12.8971 19.1094 13.6448 16.4251 13.1923C21.1171 13.9833 22.3107 16.6034 19.733 19.2236C14.8374 24.1998 12.6966 17.9751 12.1478 16.3801C12.0472 16.0877 12.0002 15.9509 11.9995 16.0672C11.9988 15.9509 11.9517 16.0877 11.8512 16.3801C11.3026 17.9751 9.16185 24.2 4.26597 19.2236C1.68821 16.6034 2.88177 13.9831 7.57385 13.1923C4.88953 13.6448 1.87185 12.8971 1.04385 9.96567C0.805606 9.12242 0.399414 3.92876 0.399414 3.22704C0.399414 -0.28697 3.50909 0.817353 5.42821 2.2446H5.42835Z" fill="#949494"/>
|
||||
</g>
|
||||
<defs>
|
||||
<clipPath id="clip0_18411_62931">
|
||||
<rect width="24" height="21" fill="white" transform="translate(0 0.5)"/>
|
||||
</clipPath>
|
||||
</defs>
|
||||
</svg>
|
||||
|
Before Width: | Height: | Size: 1001 B |
@@ -1,97 +0,0 @@
|
||||
import { j as u } from "./jsx-runtime-C_nHp4yK.js";
|
||||
function g({
|
||||
children: o,
|
||||
variant: e = "default",
|
||||
size: a = "xsmall",
|
||||
className: v = "",
|
||||
disabled: r = !1,
|
||||
type: p = "button",
|
||||
onClick: t,
|
||||
href: l,
|
||||
target: s,
|
||||
rel: c,
|
||||
ariaLabel: n,
|
||||
...f
|
||||
}) {
|
||||
const b = {
|
||||
xsmall:
|
||||
"px-[var(--spacing-scale-006)] py-[var(--spacing-scale-004)] gap-[var(--spacing-scale-001)]",
|
||||
small:
|
||||
"px-[var(--spacing-measures-spacing-008)] py-[var(--spacing-measures-spacing-008)] gap-[var(--spacing-scale-004)]",
|
||||
medium: "p-[var(--spacing-scale-010)] gap-[var(--spacing-scale-004)]",
|
||||
large:
|
||||
"px-[var(--spacing-scale-012)] py-[var(--spacing-scale-010)] gap-[var(--spacing-scale-004)]",
|
||||
xlarge:
|
||||
"px-[var(--spacing-scale-020)] py-[var(--spacing-scale-012)] gap-[var(--spacing-scale-008)]",
|
||||
},
|
||||
m = {
|
||||
xsmall:
|
||||
"font-['Inter'] text-[10px] leading-[12px] font-medium tracking-[0%]",
|
||||
small:
|
||||
"font-['Inter'] text-[12px] leading-[14px] font-medium tracking-[0%]",
|
||||
medium:
|
||||
"font-['Inter'] text-[14px] leading-[16px] font-medium tracking-[0%]",
|
||||
large:
|
||||
"font-['Inter'] text-[16px] leading-[20px] font-medium tracking-[0%]",
|
||||
xlarge:
|
||||
"font-['Inter'] text-[24px] leading-[28px] font-normal tracking-[0%]",
|
||||
},
|
||||
y = {
|
||||
default:
|
||||
"bg-[var(--color-surface-inverse-primary)] text-[var(--color-content-inverse-primary)] hover:bg-[var(--color-surface-inverse-primary)] hover:text-[var(--color-content-inverse-brand-primary)] hover:outline-[var(--border-color-default-brandprimary)] hover:outline-inset hover:scale-[1.02] hover:shadow-lg focus:shadow-[0_0_10px_1px_var(--color-surface-default-brand-primary)] focus:outline-none focus:ring-1 focus:ring-[var(--color-content-default-brand-primary)] focus:ring-offset-1 focus:scale-[1.02] active:bg-[var(--color-surface-inverse-brand-primary)] active:text-[var(--color-content-inverse-primary)] active:outline-[var(--border-color-default-brandprimary)] active:outline-offset-1 active:shadow-none active:scale-[0.98] disabled:bg-[var(--color-surface-default-secondary)] disabled:text-[var(--color-content-inverse-tertiary)] disabled:cursor-not-allowed disabled:opacity-50 disabled:hover:scale-100 disabled:active:scale-100 disabled:hover:shadow-none disabled:hover:outline-none",
|
||||
secondary:
|
||||
"bg-transparent text-[var(--color-content-default-brand-primary)] hover:text-[var(--color-content-default-primary)] hover:scale-[1.02] hover:bg-transparent hover:outline-none focus:outline-1 focus:outline-inset focus:outline-[var(--border-color-default-tertiary)] focus:shadow-[0_0_10px_1px_var(--color-surface-default-brand-primary)] focus:blur-[0px] active:bg-[var(--color-surface-default-brand-primary)] active:text-[var(--color-content-inverse-primary)] active:shadow-none active:scale-[0.98] disabled:bg-[var(--color-surface-default-secondary)] disabled:text-[var(--color-content-inverse-tertiary)] disabled:cursor-not-allowed disabled:opacity-50 disabled:hover:scale-100 disabled:active:scale-100",
|
||||
primary:
|
||||
"bg-[var(--color-surface-default-primary)] text-[var(--color-content-default-primary)] hover:bg-[var(--color-surface-default-primary)] hover:text-[var(--color-content-default-brand-primary)] hover:scale-[1.02] focus:bg-[var(--color-surface-default-primary)] focus:text-[var(--color-content-default-brand-primary)] focus:outline-none focus:shadow-[0_0_10px_1px_var(--color-surface-default-brand-primary)] focus:blur-[0px] focus:scale-[1.02] active:bg-[var(--color-surface-default-brand-primary)] active:text-[var(--color-content-inverse-primary)] active:shadow-none active:scale-[0.98] disabled:bg-[var(--color-surface-inverse-secondary)] disabled:text-[var(--color-content-default-primary)] disabled:cursor-not-allowed disabled:opacity-50 disabled:hover:scale-100 disabled:active:scale-100",
|
||||
outlined:
|
||||
"bg-transparent text-[var(--color-content-default-primary)] border-[1.5px] border-[var(--color-content-default-primary)] hover:bg-transparent hover:text-[var(--color-content-default-brand-primary)] hover:border-[1.5px] hover:border-[var(--color-content-default-brand-primary)] hover:scale-[1.02] focus:bg-transparent focus:text-[var(--color-content-default-primary)] focus:outline-none focus:border-[1.5px] focus:border-[var(--color-content-default-primary)] focus:shadow-[0_0_10px_1px_var(--color-surface-default-brand-primary)] focus:blur-[0px] focus:scale-[1.02] active:bg-[var(--color-surface-default-brand-primary)] active:text-[var(--color-content-inverse-primary)] active:border-transparent active:shadow-none active:scale-[0.98] disabled:bg-[var(--color-surface-default-secondary)] disabled:text-[var(--color-content-inverse-tertiary)] disabled:border-[1.5px] disabled:border-[var(--color-surface-default-secondary)] disabled:cursor-not-allowed disabled:opacity-50 disabled:hover:scale-100 disabled:active:scale-100",
|
||||
dark: "bg-transparent text-[var(--color-content-inverse-primary)] border border-[var(--border-color-default-primary)] hover:bg-transparent hover:text-[var(--color-content-inverse-brand-primary)] hover:border hover:border-[var(--border-color-inverse-brandprimary)] hover:scale-[1.02] focus:bg-transparent focus:text-[var(--color-content-inverse-primary)] focus:outline-none focus:border focus:border-[var(--border-color-default-primary)] focus:shadow-[0_0_10px_1px_var(--color-surface-default-brand-primary)] focus:blur-[0px] focus:scale-[1.02] active:bg-[var(--color-surface-default-brand-primary)] active:text-[var(--color-content-inverse-primary)] active:border-transparent active:shadow-none active:scale-[0.98] disabled:bg-[var(--color-surface-inverse-secondary)] disabled:text-[var(--color-content-default-primary)] disabled:border-transparent disabled:cursor-not-allowed disabled:opacity-50 disabled:hover:scale-100 disabled:active:scale-100",
|
||||
inverse:
|
||||
"bg-transparent text-[var(--color-content-inverse-primary)] hover:text-[var(--color-content-inverse-brand-primary)] hover:scale-[1.02] hover:bg-transparent hover:outline-none focus:outline-1 focus:outline-inset focus:outline-[var(--border-color-default-tertiary)] focus:shadow-[0_0_10px_1px_var(--color-surface-default-tertiary)] focus:blur-[0px] active:bg-[var(--color-surface-default-brand-primary)] active:text-[var(--color-content-inverse-primary)] active:shadow-none active:scale-[0.98] disabled:bg-[var(--color-surface-inverse-secondary)] disabled:text-[var(--color-content-default-primary)] disabled:cursor-not-allowed disabled:opacity-50 disabled:hover:scale-100 disabled:active:scale-100",
|
||||
},
|
||||
x =
|
||||
e === "primary" || e === "outlined" || e === "dark" || e === "inverse"
|
||||
? ""
|
||||
: {
|
||||
xsmall: "hover:outline-1",
|
||||
small: "hover:outline-1",
|
||||
medium: "hover:outline-1",
|
||||
large: "hover:outline-2",
|
||||
xlarge: "hover:outline-[2.5px]",
|
||||
}[a],
|
||||
i = `${`inline-flex items-center justify-start box-border ${b[a]} rounded-[var(--radius-measures-radius-full)] ${m[a]} transition-all duration-500 ease-in-out cursor-pointer ${y[e]} ${x}`} ${v}`,
|
||||
d = {
|
||||
...(n && { "aria-label": n }),
|
||||
...(r && { "aria-disabled": "true" }),
|
||||
...(s && { target: s }),
|
||||
...(c && { rel: c }),
|
||||
tabIndex: r ? -1 : 0,
|
||||
...f,
|
||||
};
|
||||
return l && !r
|
||||
? u.jsx("a", { href: l, className: i, onClick: t, ...d, children: o })
|
||||
: u.jsx("button", {
|
||||
type: p,
|
||||
className: i,
|
||||
disabled: r,
|
||||
onClick: t,
|
||||
...d,
|
||||
children: o,
|
||||
});
|
||||
}
|
||||
g.__docgenInfo = {
|
||||
description: "",
|
||||
methods: [],
|
||||
displayName: "Button",
|
||||
props: {
|
||||
variant: {
|
||||
defaultValue: { value: '"default"', computed: !1 },
|
||||
required: !1,
|
||||
},
|
||||
size: { defaultValue: { value: '"xsmall"', computed: !1 }, required: !1 },
|
||||
className: { defaultValue: { value: '""', computed: !1 }, required: !1 },
|
||||
disabled: { defaultValue: { value: "false", computed: !1 }, required: !1 },
|
||||
type: { defaultValue: { value: '"button"', computed: !1 }, required: !1 },
|
||||
},
|
||||
};
|
||||
export { g as B };
|
||||
@@ -1,687 +0,0 @@
|
||||
import { j as e } from "./jsx-runtime-C_nHp4yK.js";
|
||||
import { B as n } from "./Button-Z4hbXct5.js";
|
||||
import "./iframe-D_aMTKb2.js";
|
||||
import "./preload-helper-DIZFD4sK.js";
|
||||
const u = {
|
||||
title: "Components/Button",
|
||||
component: n,
|
||||
parameters: {
|
||||
layout: "centered",
|
||||
docs: {
|
||||
description: {
|
||||
component:
|
||||
"A versatile button component with multiple variants, sizes, and states. Can render as a button or link with full accessibility support. Includes focus states with keyboard navigation - use Tab key to test focus indicators.",
|
||||
},
|
||||
},
|
||||
},
|
||||
argTypes: {
|
||||
variant: {
|
||||
control: { type: "select" },
|
||||
options: [
|
||||
"default",
|
||||
"secondary",
|
||||
"primary",
|
||||
"outlined",
|
||||
"dark",
|
||||
"inverse",
|
||||
],
|
||||
description: "The visual style variant of the button",
|
||||
},
|
||||
size: {
|
||||
control: { type: "select" },
|
||||
options: ["xsmall", "small", "medium", "large", "xlarge"],
|
||||
description: "The size of the button",
|
||||
},
|
||||
disabled: {
|
||||
control: { type: "boolean" },
|
||||
description: "Whether the button is disabled",
|
||||
},
|
||||
href: {
|
||||
control: { type: "text" },
|
||||
description: "If provided, renders as a link instead of a button",
|
||||
},
|
||||
onClick: { action: "clicked" },
|
||||
},
|
||||
tags: ["autodocs"],
|
||||
},
|
||||
t = { args: { children: "Button" } },
|
||||
s = {
|
||||
args: { children: "Button", size: "large" },
|
||||
render: (a) =>
|
||||
e.jsx("div", {
|
||||
className: "space-y-4",
|
||||
children: e.jsxs("div", {
|
||||
className: "space-x-4",
|
||||
children: [
|
||||
e.jsx(n, { ...a, variant: "default", children: "Default" }),
|
||||
e.jsx(n, { ...a, variant: "secondary", children: "Secondary" }),
|
||||
e.jsx(n, { ...a, variant: "primary", children: "Primary" }),
|
||||
e.jsx(n, { ...a, variant: "outlined", children: "Outlined" }),
|
||||
e.jsx(n, { ...a, variant: "dark", children: "Dark" }),
|
||||
e.jsx(n, { ...a, variant: "inverse", children: "Inverse" }),
|
||||
],
|
||||
}),
|
||||
}),
|
||||
parameters: {
|
||||
docs: {
|
||||
description: {
|
||||
story: "Different visual variants of the button component.",
|
||||
},
|
||||
},
|
||||
},
|
||||
},
|
||||
i = {
|
||||
args: { children: "Button", variant: "default" },
|
||||
render: (a) =>
|
||||
e.jsx("div", {
|
||||
className: "space-y-4",
|
||||
children: e.jsxs("div", {
|
||||
className: "space-x-4",
|
||||
children: [
|
||||
e.jsx(n, { ...a, size: "xsmall", children: "XSmall" }),
|
||||
e.jsx(n, { ...a, size: "small", children: "Small" }),
|
||||
e.jsx(n, { ...a, size: "medium", children: "Medium" }),
|
||||
e.jsx(n, { ...a, size: "large", children: "Large" }),
|
||||
e.jsx(n, { ...a, size: "xlarge", children: "XLarge" }),
|
||||
],
|
||||
}),
|
||||
}),
|
||||
parameters: {
|
||||
docs: {
|
||||
description: {
|
||||
story: "Different sizes available for the button component.",
|
||||
},
|
||||
},
|
||||
},
|
||||
},
|
||||
r = {
|
||||
args: { children: "Button", size: "large", variant: "default" },
|
||||
render: (a) =>
|
||||
e.jsx("div", {
|
||||
className: "space-y-4",
|
||||
children: e.jsxs("div", {
|
||||
className: "space-x-4",
|
||||
children: [
|
||||
e.jsx(n, { ...a, children: "Normal" }),
|
||||
e.jsx(n, { ...a, disabled: !0, children: "Disabled" }),
|
||||
],
|
||||
}),
|
||||
}),
|
||||
parameters: {
|
||||
docs: {
|
||||
description: { story: "Different states of the button component." },
|
||||
},
|
||||
},
|
||||
},
|
||||
l = {
|
||||
args: {},
|
||||
render: () =>
|
||||
e.jsxs("div", {
|
||||
className: "space-y-6",
|
||||
children: [
|
||||
e.jsxs("div", {
|
||||
children: [
|
||||
e.jsx("h3", {
|
||||
className: "text-white font-semibold mb-3",
|
||||
children: "Default Variant",
|
||||
}),
|
||||
e.jsxs("div", {
|
||||
className: "space-x-4",
|
||||
children: [
|
||||
e.jsx(n, { size: "xsmall", children: "XSmall" }),
|
||||
e.jsx(n, { size: "small", children: "Small" }),
|
||||
e.jsx(n, { size: "medium", children: "Medium" }),
|
||||
e.jsx(n, { size: "large", children: "Large" }),
|
||||
e.jsx(n, { size: "xlarge", children: "XLarge" }),
|
||||
],
|
||||
}),
|
||||
],
|
||||
}),
|
||||
e.jsxs("div", {
|
||||
children: [
|
||||
e.jsx("h3", {
|
||||
className: "text-white font-semibold mb-3",
|
||||
children: "Secondary Variant",
|
||||
}),
|
||||
e.jsxs("div", {
|
||||
className: "space-x-4",
|
||||
children: [
|
||||
e.jsx(n, {
|
||||
variant: "secondary",
|
||||
size: "xsmall",
|
||||
children: "XSmall",
|
||||
}),
|
||||
e.jsx(n, {
|
||||
variant: "secondary",
|
||||
size: "small",
|
||||
children: "Small",
|
||||
}),
|
||||
e.jsx(n, {
|
||||
variant: "secondary",
|
||||
size: "medium",
|
||||
children: "Medium",
|
||||
}),
|
||||
e.jsx(n, {
|
||||
variant: "secondary",
|
||||
size: "large",
|
||||
children: "Large",
|
||||
}),
|
||||
e.jsx(n, {
|
||||
variant: "secondary",
|
||||
size: "xlarge",
|
||||
children: "XLarge",
|
||||
}),
|
||||
],
|
||||
}),
|
||||
],
|
||||
}),
|
||||
e.jsxs("div", {
|
||||
children: [
|
||||
e.jsx("h3", {
|
||||
className: "text-white font-semibold mb-3",
|
||||
children: "Primary Variant",
|
||||
}),
|
||||
e.jsxs("div", {
|
||||
className: "space-x-4",
|
||||
children: [
|
||||
e.jsx(n, {
|
||||
variant: "primary",
|
||||
size: "xsmall",
|
||||
children: "XSmall",
|
||||
}),
|
||||
e.jsx(n, {
|
||||
variant: "primary",
|
||||
size: "small",
|
||||
children: "Small",
|
||||
}),
|
||||
e.jsx(n, {
|
||||
variant: "primary",
|
||||
size: "medium",
|
||||
children: "Medium",
|
||||
}),
|
||||
e.jsx(n, {
|
||||
variant: "primary",
|
||||
size: "large",
|
||||
children: "Large",
|
||||
}),
|
||||
e.jsx(n, {
|
||||
variant: "primary",
|
||||
size: "xlarge",
|
||||
children: "XLarge",
|
||||
}),
|
||||
],
|
||||
}),
|
||||
],
|
||||
}),
|
||||
e.jsxs("div", {
|
||||
children: [
|
||||
e.jsx("h3", {
|
||||
className: "text-white font-semibold mb-3",
|
||||
children: "Outlined Variant",
|
||||
}),
|
||||
e.jsxs("div", {
|
||||
className: "space-x-4",
|
||||
children: [
|
||||
e.jsx(n, {
|
||||
variant: "outlined",
|
||||
size: "xsmall",
|
||||
children: "XSmall",
|
||||
}),
|
||||
e.jsx(n, {
|
||||
variant: "outlined",
|
||||
size: "small",
|
||||
children: "Small",
|
||||
}),
|
||||
e.jsx(n, {
|
||||
variant: "outlined",
|
||||
size: "medium",
|
||||
children: "Medium",
|
||||
}),
|
||||
e.jsx(n, {
|
||||
variant: "outlined",
|
||||
size: "large",
|
||||
children: "Large",
|
||||
}),
|
||||
e.jsx(n, {
|
||||
variant: "outlined",
|
||||
size: "xlarge",
|
||||
children: "XLarge",
|
||||
}),
|
||||
],
|
||||
}),
|
||||
],
|
||||
}),
|
||||
e.jsxs("div", {
|
||||
children: [
|
||||
e.jsx("h3", {
|
||||
className: "text-white font-semibold mb-3",
|
||||
children: "Dark Variant",
|
||||
}),
|
||||
e.jsxs("div", {
|
||||
className: "space-x-4",
|
||||
children: [
|
||||
e.jsx(n, {
|
||||
variant: "dark",
|
||||
size: "xsmall",
|
||||
children: "XSmall",
|
||||
}),
|
||||
e.jsx(n, {
|
||||
variant: "dark",
|
||||
size: "small",
|
||||
children: "Small",
|
||||
}),
|
||||
e.jsx(n, {
|
||||
variant: "dark",
|
||||
size: "medium",
|
||||
children: "Medium",
|
||||
}),
|
||||
e.jsx(n, {
|
||||
variant: "dark",
|
||||
size: "large",
|
||||
children: "Large",
|
||||
}),
|
||||
e.jsx(n, {
|
||||
variant: "dark",
|
||||
size: "xlarge",
|
||||
children: "XLarge",
|
||||
}),
|
||||
],
|
||||
}),
|
||||
],
|
||||
}),
|
||||
e.jsxs("div", {
|
||||
children: [
|
||||
e.jsx("h3", {
|
||||
className: "text-white font-semibold mb-3",
|
||||
children: "Inverse Variant",
|
||||
}),
|
||||
e.jsxs("div", {
|
||||
className: "space-x-4",
|
||||
children: [
|
||||
e.jsx(n, {
|
||||
variant: "inverse",
|
||||
size: "xsmall",
|
||||
children: "XSmall",
|
||||
}),
|
||||
e.jsx(n, {
|
||||
variant: "inverse",
|
||||
size: "small",
|
||||
children: "Small",
|
||||
}),
|
||||
e.jsx(n, {
|
||||
variant: "inverse",
|
||||
size: "medium",
|
||||
children: "Medium",
|
||||
}),
|
||||
e.jsx(n, {
|
||||
variant: "inverse",
|
||||
size: "large",
|
||||
children: "Large",
|
||||
}),
|
||||
e.jsx(n, {
|
||||
variant: "inverse",
|
||||
size: "xlarge",
|
||||
children: "XLarge",
|
||||
}),
|
||||
],
|
||||
}),
|
||||
],
|
||||
}),
|
||||
e.jsxs("div", {
|
||||
children: [
|
||||
e.jsx("h3", {
|
||||
className: "text-white font-semibold mb-3",
|
||||
children: "Disabled States",
|
||||
}),
|
||||
e.jsxs("div", {
|
||||
className: "space-x-4",
|
||||
children: [
|
||||
e.jsx(n, {
|
||||
size: "large",
|
||||
disabled: !0,
|
||||
children: "Default Disabled",
|
||||
}),
|
||||
e.jsx(n, {
|
||||
variant: "secondary",
|
||||
size: "large",
|
||||
disabled: !0,
|
||||
children: "Secondary Disabled",
|
||||
}),
|
||||
e.jsx(n, {
|
||||
variant: "primary",
|
||||
size: "large",
|
||||
disabled: !0,
|
||||
children: "Primary Disabled",
|
||||
}),
|
||||
e.jsx(n, {
|
||||
variant: "outlined",
|
||||
size: "large",
|
||||
disabled: !0,
|
||||
children: "Outlined Disabled",
|
||||
}),
|
||||
e.jsx(n, {
|
||||
variant: "dark",
|
||||
size: "large",
|
||||
disabled: !0,
|
||||
children: "Dark Disabled",
|
||||
}),
|
||||
e.jsx(n, {
|
||||
variant: "inverse",
|
||||
size: "large",
|
||||
disabled: !0,
|
||||
children: "Inverse Disabled",
|
||||
}),
|
||||
],
|
||||
}),
|
||||
],
|
||||
}),
|
||||
],
|
||||
}),
|
||||
parameters: {
|
||||
docs: {
|
||||
description: {
|
||||
story: "Complete overview of all button variants, sizes, and states.",
|
||||
},
|
||||
},
|
||||
},
|
||||
};
|
||||
t.parameters = {
|
||||
...t.parameters,
|
||||
docs: {
|
||||
...t.parameters?.docs,
|
||||
source: {
|
||||
originalSource: `{
|
||||
args: {
|
||||
children: "Button"
|
||||
}
|
||||
}`,
|
||||
...t.parameters?.docs?.source,
|
||||
},
|
||||
},
|
||||
};
|
||||
s.parameters = {
|
||||
...s.parameters,
|
||||
docs: {
|
||||
...s.parameters?.docs,
|
||||
source: {
|
||||
originalSource: `{
|
||||
args: {
|
||||
children: "Button",
|
||||
size: "large"
|
||||
},
|
||||
render: args => <div className="space-y-4">
|
||||
<div className="space-x-4">
|
||||
<Button {...args} variant="default">
|
||||
Default
|
||||
</Button>
|
||||
<Button {...args} variant="secondary">
|
||||
Secondary
|
||||
</Button>
|
||||
<Button {...args} variant="primary">
|
||||
Primary
|
||||
</Button>
|
||||
<Button {...args} variant="outlined">
|
||||
Outlined
|
||||
</Button>
|
||||
<Button {...args} variant="dark">
|
||||
Dark
|
||||
</Button>
|
||||
<Button {...args} variant="inverse">
|
||||
Inverse
|
||||
</Button>
|
||||
</div>
|
||||
</div>,
|
||||
parameters: {
|
||||
docs: {
|
||||
description: {
|
||||
story: "Different visual variants of the button component."
|
||||
}
|
||||
}
|
||||
}
|
||||
}`,
|
||||
...s.parameters?.docs?.source,
|
||||
},
|
||||
},
|
||||
};
|
||||
i.parameters = {
|
||||
...i.parameters,
|
||||
docs: {
|
||||
...i.parameters?.docs,
|
||||
source: {
|
||||
originalSource: `{
|
||||
args: {
|
||||
children: "Button",
|
||||
variant: "default"
|
||||
},
|
||||
render: args => <div className="space-y-4">
|
||||
<div className="space-x-4">
|
||||
<Button {...args} size="xsmall">
|
||||
XSmall
|
||||
</Button>
|
||||
<Button {...args} size="small">
|
||||
Small
|
||||
</Button>
|
||||
<Button {...args} size="medium">
|
||||
Medium
|
||||
</Button>
|
||||
<Button {...args} size="large">
|
||||
Large
|
||||
</Button>
|
||||
<Button {...args} size="xlarge">
|
||||
XLarge
|
||||
</Button>
|
||||
</div>
|
||||
</div>,
|
||||
parameters: {
|
||||
docs: {
|
||||
description: {
|
||||
story: "Different sizes available for the button component."
|
||||
}
|
||||
}
|
||||
}
|
||||
}`,
|
||||
...i.parameters?.docs?.source,
|
||||
},
|
||||
},
|
||||
};
|
||||
r.parameters = {
|
||||
...r.parameters,
|
||||
docs: {
|
||||
...r.parameters?.docs,
|
||||
source: {
|
||||
originalSource: `{
|
||||
args: {
|
||||
children: "Button",
|
||||
size: "large",
|
||||
variant: "default"
|
||||
},
|
||||
render: args => <div className="space-y-4">
|
||||
<div className="space-x-4">
|
||||
<Button {...args}>Normal</Button>
|
||||
<Button {...args} disabled>
|
||||
Disabled
|
||||
</Button>
|
||||
</div>
|
||||
</div>,
|
||||
parameters: {
|
||||
docs: {
|
||||
description: {
|
||||
story: "Different states of the button component."
|
||||
}
|
||||
}
|
||||
}
|
||||
}`,
|
||||
...r.parameters?.docs?.source,
|
||||
},
|
||||
},
|
||||
};
|
||||
l.parameters = {
|
||||
...l.parameters,
|
||||
docs: {
|
||||
...l.parameters?.docs,
|
||||
source: {
|
||||
originalSource: `{
|
||||
args: {},
|
||||
render: () => <div className="space-y-6">
|
||||
<div>
|
||||
<h3 className="text-white font-semibold mb-3">Default Variant</h3>
|
||||
<div className="space-x-4">
|
||||
<Button size="xsmall">XSmall</Button>
|
||||
<Button size="small">Small</Button>
|
||||
<Button size="medium">Medium</Button>
|
||||
<Button size="large">Large</Button>
|
||||
<Button size="xlarge">XLarge</Button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<h3 className="text-white font-semibold mb-3">Secondary Variant</h3>
|
||||
<div className="space-x-4">
|
||||
<Button variant="secondary" size="xsmall">
|
||||
XSmall
|
||||
</Button>
|
||||
<Button variant="secondary" size="small">
|
||||
Small
|
||||
</Button>
|
||||
<Button variant="secondary" size="medium">
|
||||
Medium
|
||||
</Button>
|
||||
<Button variant="secondary" size="large">
|
||||
Large
|
||||
</Button>
|
||||
<Button variant="secondary" size="xlarge">
|
||||
XLarge
|
||||
</Button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<h3 className="text-white font-semibold mb-3">Primary Variant</h3>
|
||||
<div className="space-x-4">
|
||||
<Button variant="primary" size="xsmall">
|
||||
XSmall
|
||||
</Button>
|
||||
<Button variant="primary" size="small">
|
||||
Small
|
||||
</Button>
|
||||
<Button variant="primary" size="medium">
|
||||
Medium
|
||||
</Button>
|
||||
<Button variant="primary" size="large">
|
||||
Large
|
||||
</Button>
|
||||
<Button variant="primary" size="xlarge">
|
||||
XLarge
|
||||
</Button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<h3 className="text-white font-semibold mb-3">Outlined Variant</h3>
|
||||
<div className="space-x-4">
|
||||
<Button variant="outlined" size="xsmall">
|
||||
XSmall
|
||||
</Button>
|
||||
<Button variant="outlined" size="small">
|
||||
Small
|
||||
</Button>
|
||||
<Button variant="outlined" size="medium">
|
||||
Medium
|
||||
</Button>
|
||||
<Button variant="outlined" size="large">
|
||||
Large
|
||||
</Button>
|
||||
<Button variant="outlined" size="xlarge">
|
||||
XLarge
|
||||
</Button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<h3 className="text-white font-semibold mb-3">Dark Variant</h3>
|
||||
<div className="space-x-4">
|
||||
<Button variant="dark" size="xsmall">
|
||||
XSmall
|
||||
</Button>
|
||||
<Button variant="dark" size="small">
|
||||
Small
|
||||
</Button>
|
||||
<Button variant="dark" size="medium">
|
||||
Medium
|
||||
</Button>
|
||||
<Button variant="dark" size="large">
|
||||
Large
|
||||
</Button>
|
||||
<Button variant="dark" size="xlarge">
|
||||
XLarge
|
||||
</Button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<h3 className="text-white font-semibold mb-3">Inverse Variant</h3>
|
||||
<div className="space-x-4">
|
||||
<Button variant="inverse" size="xsmall">
|
||||
XSmall
|
||||
</Button>
|
||||
<Button variant="inverse" size="small">
|
||||
Small
|
||||
</Button>
|
||||
<Button variant="inverse" size="medium">
|
||||
Medium
|
||||
</Button>
|
||||
<Button variant="inverse" size="large">
|
||||
Large
|
||||
</Button>
|
||||
<Button variant="inverse" size="xlarge">
|
||||
XLarge
|
||||
</Button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<h3 className="text-white font-semibold mb-3">Disabled States</h3>
|
||||
<div className="space-x-4">
|
||||
<Button size="large" disabled>
|
||||
Default Disabled
|
||||
</Button>
|
||||
<Button variant="secondary" size="large" disabled>
|
||||
Secondary Disabled
|
||||
</Button>
|
||||
<Button variant="primary" size="large" disabled>
|
||||
Primary Disabled
|
||||
</Button>
|
||||
<Button variant="outlined" size="large" disabled>
|
||||
Outlined Disabled
|
||||
</Button>
|
||||
<Button variant="dark" size="large" disabled>
|
||||
Dark Disabled
|
||||
</Button>
|
||||
<Button variant="inverse" size="large" disabled>
|
||||
Inverse Disabled
|
||||
</Button>
|
||||
</div>
|
||||
</div>
|
||||
</div>,
|
||||
parameters: {
|
||||
docs: {
|
||||
description: {
|
||||
story: "Complete overview of all button variants, sizes, and states."
|
||||
}
|
||||
}
|
||||
}
|
||||
}`,
|
||||
...l.parameters?.docs?.source,
|
||||
},
|
||||
},
|
||||
};
|
||||
const v = ["Default", "Variants", "Sizes", "States", "AllVariants"];
|
||||
export {
|
||||
l as AllVariants,
|
||||
t as Default,
|
||||
i as Sizes,
|
||||
r as States,
|
||||
s as Variants,
|
||||
v as __namedExportsOrder,
|
||||
u as default,
|
||||
};
|
||||
File diff suppressed because it is too large
Load Diff
@@ -1,96 +0,0 @@
|
||||
import { j as e } from "./jsx-runtime-C_nHp4yK.js";
|
||||
import { B as s } from "./Button-Z4hbXct5.js";
|
||||
const n = ({
|
||||
title: l,
|
||||
subtitle: i,
|
||||
description: x,
|
||||
ctaText: a,
|
||||
ctaHref: t,
|
||||
buttonClassName: r = "",
|
||||
}) =>
|
||||
e.jsxs("div", {
|
||||
className:
|
||||
"flex flex-col gap-[var(--spacing-scale-006)] sm:gap-[var(--spacing-scale-012)] md:gap-[var(--spacing-scale-020)] lg:gap-[var(--spacing-scale-020)] relative z-10",
|
||||
children: [
|
||||
e.jsxs("div", {
|
||||
className:
|
||||
"flex flex-col md:gap-[var(--spacing-scale-004)] lg:gap-[var(--spacing-scale-008)] xl:gap-[var(--spacing-scale-020)]",
|
||||
children: [
|
||||
e.jsxs("div", {
|
||||
className: "flex flex-col xl:gap-0",
|
||||
children: [
|
||||
e.jsxs("div", {
|
||||
className:
|
||||
"flex gap-[var(--spacing-scale-008)] xl:gap-[var(--spacing-scale-010)] items-center",
|
||||
children: [
|
||||
e.jsx("h1", {
|
||||
className:
|
||||
"font-bricolage-grotesque font-medium text-[32px] leading-[32px] sm:text-[52px] sm:leading-[52px] md:text-[44px] md:leading-[44px] lg:text-[64px] lg:leading-[64px] xl:text-[96px] xl:leading-[110%] text-[var(--color-content-inverse-primary)]",
|
||||
children: l,
|
||||
}),
|
||||
e.jsx("img", {
|
||||
src: "assets/Shapes_1.svg",
|
||||
alt: "Decorative shapes",
|
||||
className:
|
||||
"w-[27.2px] h-[27.2px] md:w-[34px] md:h-[34px] lg:w-[50px] lg:h-[50px]",
|
||||
}),
|
||||
],
|
||||
}),
|
||||
e.jsx("h2", {
|
||||
className:
|
||||
"font-bricolage-grotesque font-medium text-[32px] leading-[32px] sm:text-[52px] sm:leading-[52px] md:text-[44px] md:leading-[44px] lg:text-[64px] lg:leading-[64px] xl:text-[96px] xl:leading-[110%] text-[var(--color-content-inverse-primary)]",
|
||||
children: i,
|
||||
}),
|
||||
],
|
||||
}),
|
||||
e.jsx("p", {
|
||||
className:
|
||||
"font-inter font-[400] text-[18px] leading-[130%] lg:text-[24px] lg:leading-[32px] xl:text-[32px] xl:leading-[40px] text-[var(--color-content-inverse-primary)] pr-[var(--spacing-scale-032)] md:pr-[var(--spacing-scale-008)] lg:pr-[var(--spacing-scale-032)]",
|
||||
children: x,
|
||||
}),
|
||||
],
|
||||
}),
|
||||
e.jsxs("div", {
|
||||
className: "flex justify-start",
|
||||
children: [
|
||||
e.jsx("div", {
|
||||
className: "block md:hidden",
|
||||
children: e.jsx(s, {
|
||||
variant: "primary",
|
||||
size: "small",
|
||||
children: a,
|
||||
}),
|
||||
}),
|
||||
e.jsx("div", {
|
||||
className: "hidden md:block xl:hidden",
|
||||
children: e.jsx(s, {
|
||||
variant: "primary",
|
||||
size: "large",
|
||||
className: r,
|
||||
children: a,
|
||||
}),
|
||||
}),
|
||||
e.jsx("div", {
|
||||
className: "hidden xl:block",
|
||||
children: e.jsx(s, {
|
||||
variant: "primary",
|
||||
size: "xlarge",
|
||||
children: a,
|
||||
}),
|
||||
}),
|
||||
],
|
||||
}),
|
||||
],
|
||||
});
|
||||
n.__docgenInfo = {
|
||||
description: "",
|
||||
methods: [],
|
||||
displayName: "ContentLockup",
|
||||
props: {
|
||||
buttonClassName: {
|
||||
defaultValue: { value: '""', computed: !1 },
|
||||
required: !1,
|
||||
},
|
||||
},
|
||||
};
|
||||
export { n as C };
|
||||
@@ -1,221 +0,0 @@
|
||||
import { C as s } from "./ContentLockup-DbWiPA4N.js";
|
||||
import "./jsx-runtime-C_nHp4yK.js";
|
||||
import "./iframe-D_aMTKb2.js";
|
||||
import "./preload-helper-DIZFD4sK.js";
|
||||
import "./Button-Z4hbXct5.js";
|
||||
const p = {
|
||||
title: "Components/ContentLockup",
|
||||
component: s,
|
||||
parameters: {
|
||||
layout: "centered",
|
||||
docs: {
|
||||
description: {
|
||||
component:
|
||||
"A content lockup component that groups title, subtitle, description, and CTA button. Features responsive typography and spacing that adapts across breakpoints. Used within the HeroBanner component.",
|
||||
},
|
||||
},
|
||||
},
|
||||
argTypes: {
|
||||
title: { control: { type: "text" }, description: "The main title text" },
|
||||
subtitle: { control: { type: "text" }, description: "The subtitle text" },
|
||||
description: {
|
||||
control: { type: "text" },
|
||||
description: "The description text",
|
||||
},
|
||||
ctaText: {
|
||||
control: { type: "text" },
|
||||
description: "The call-to-action button text",
|
||||
},
|
||||
ctaHref: {
|
||||
control: { type: "text" },
|
||||
description: "The call-to-action button link",
|
||||
},
|
||||
buttonClassName: {
|
||||
control: { type: "text" },
|
||||
description:
|
||||
"Additional CSS classes to apply to the large button (md/lg breakpoints)",
|
||||
},
|
||||
},
|
||||
tags: ["autodocs"],
|
||||
},
|
||||
t = {
|
||||
args: {
|
||||
title: "Collaborate",
|
||||
subtitle: "with clarity",
|
||||
description:
|
||||
"Help your community make important decisions in a way that reflects its unique values.",
|
||||
ctaText: "Learn how Community Rule works",
|
||||
ctaHref: "#",
|
||||
},
|
||||
parameters: {
|
||||
docs: {
|
||||
description: {
|
||||
story:
|
||||
"Default content lockup with standard Community Rule messaging.",
|
||||
},
|
||||
},
|
||||
},
|
||||
},
|
||||
e = {
|
||||
args: {
|
||||
title: "Collaborate",
|
||||
subtitle: "with clarity",
|
||||
description:
|
||||
"Help your community make important decisions in a way that reflects its unique values. Our platform provides the tools and frameworks needed to build successful, sustainable communities that can navigate complex challenges together.",
|
||||
ctaText: "Learn how Community Rule works",
|
||||
ctaHref: "#",
|
||||
},
|
||||
parameters: {
|
||||
docs: {
|
||||
description: {
|
||||
story:
|
||||
"Content lockup with longer description text to test text wrapping.",
|
||||
},
|
||||
},
|
||||
},
|
||||
},
|
||||
o = {
|
||||
args: {
|
||||
title: "Simple",
|
||||
subtitle: "solution",
|
||||
description: "Easy community decision making.",
|
||||
ctaText: "Try it",
|
||||
ctaHref: "#",
|
||||
},
|
||||
parameters: {
|
||||
docs: {
|
||||
description: {
|
||||
story: "Content lockup with minimal content to test compact layouts.",
|
||||
},
|
||||
},
|
||||
},
|
||||
},
|
||||
n = {
|
||||
args: {
|
||||
title: "Collaborate",
|
||||
subtitle: "with clarity",
|
||||
description:
|
||||
"Help your community make important decisions in a way that reflects its unique values.",
|
||||
ctaText: "Learn how Community Rule works",
|
||||
ctaHref: "#",
|
||||
buttonClassName: "shrink-0 whitespace-nowrap min-w-[280px]",
|
||||
},
|
||||
parameters: {
|
||||
docs: {
|
||||
description: {
|
||||
story:
|
||||
"Content lockup with custom button styling applied to the large button (md/lg breakpoints).",
|
||||
},
|
||||
},
|
||||
},
|
||||
};
|
||||
t.parameters = {
|
||||
...t.parameters,
|
||||
docs: {
|
||||
...t.parameters?.docs,
|
||||
source: {
|
||||
originalSource: `{
|
||||
args: {
|
||||
title: "Collaborate",
|
||||
subtitle: "with clarity",
|
||||
description: "Help your community make important decisions in a way that reflects its unique values.",
|
||||
ctaText: "Learn how Community Rule works",
|
||||
ctaHref: "#"
|
||||
},
|
||||
parameters: {
|
||||
docs: {
|
||||
description: {
|
||||
story: "Default content lockup with standard Community Rule messaging."
|
||||
}
|
||||
}
|
||||
}
|
||||
}`,
|
||||
...t.parameters?.docs?.source,
|
||||
},
|
||||
},
|
||||
};
|
||||
e.parameters = {
|
||||
...e.parameters,
|
||||
docs: {
|
||||
...e.parameters?.docs,
|
||||
source: {
|
||||
originalSource: `{
|
||||
args: {
|
||||
title: "Collaborate",
|
||||
subtitle: "with clarity",
|
||||
description: "Help your community make important decisions in a way that reflects its unique values. Our platform provides the tools and frameworks needed to build successful, sustainable communities that can navigate complex challenges together.",
|
||||
ctaText: "Learn how Community Rule works",
|
||||
ctaHref: "#"
|
||||
},
|
||||
parameters: {
|
||||
docs: {
|
||||
description: {
|
||||
story: "Content lockup with longer description text to test text wrapping."
|
||||
}
|
||||
}
|
||||
}
|
||||
}`,
|
||||
...e.parameters?.docs?.source,
|
||||
},
|
||||
},
|
||||
};
|
||||
o.parameters = {
|
||||
...o.parameters,
|
||||
docs: {
|
||||
...o.parameters?.docs,
|
||||
source: {
|
||||
originalSource: `{
|
||||
args: {
|
||||
title: "Simple",
|
||||
subtitle: "solution",
|
||||
description: "Easy community decision making.",
|
||||
ctaText: "Try it",
|
||||
ctaHref: "#"
|
||||
},
|
||||
parameters: {
|
||||
docs: {
|
||||
description: {
|
||||
story: "Content lockup with minimal content to test compact layouts."
|
||||
}
|
||||
}
|
||||
}
|
||||
}`,
|
||||
...o.parameters?.docs?.source,
|
||||
},
|
||||
},
|
||||
};
|
||||
n.parameters = {
|
||||
...n.parameters,
|
||||
docs: {
|
||||
...n.parameters?.docs,
|
||||
source: {
|
||||
originalSource: `{
|
||||
args: {
|
||||
title: "Collaborate",
|
||||
subtitle: "with clarity",
|
||||
description: "Help your community make important decisions in a way that reflects its unique values.",
|
||||
ctaText: "Learn how Community Rule works",
|
||||
ctaHref: "#",
|
||||
buttonClassName: "shrink-0 whitespace-nowrap min-w-[280px]"
|
||||
},
|
||||
parameters: {
|
||||
docs: {
|
||||
description: {
|
||||
story: "Content lockup with custom button styling applied to the large button (md/lg breakpoints)."
|
||||
}
|
||||
}
|
||||
}
|
||||
}`,
|
||||
...n.parameters?.docs?.source,
|
||||
},
|
||||
},
|
||||
};
|
||||
const u = ["Default", "LongDescription", "ShortContent", "CustomButtonStyling"];
|
||||
export {
|
||||
n as CustomButtonStyling,
|
||||
t as Default,
|
||||
e as LongDescription,
|
||||
o as ShortContent,
|
||||
u as __namedExportsOrder,
|
||||
p as default,
|
||||
};
|
||||
File diff suppressed because one or more lines are too long
@@ -1,351 +0,0 @@
|
||||
import { j as e } from "./jsx-runtime-C_nHp4yK.js";
|
||||
import { L as o } from "./Logo-DM7O8ATg.js";
|
||||
import "./iframe-D_aMTKb2.js";
|
||||
import "./preload-helper-DIZFD4sK.js";
|
||||
function n() {
|
||||
return e.jsx("div", {
|
||||
className: "flex flex-col items-center self-stretch",
|
||||
children: e.jsx("div", {
|
||||
className:
|
||||
"flex items-start self-stretch h-px w-full bg-[var(--border-color-default-secondary)]",
|
||||
}),
|
||||
});
|
||||
}
|
||||
n.__docgenInfo = { description: "", methods: [], displayName: "Separator" };
|
||||
function r() {
|
||||
const a = {
|
||||
"@context": "https://schema.org",
|
||||
"@type": "Organization",
|
||||
name: "Media Economies Design Lab",
|
||||
email: "medlab@colorado.edu",
|
||||
url: "https://communityrule.com",
|
||||
sameAs: [
|
||||
"https://bsky.app/profile/medlabboulder",
|
||||
"https://gitlab.com/medlabboulder",
|
||||
],
|
||||
};
|
||||
return e.jsxs(e.Fragment, {
|
||||
children: [
|
||||
e.jsx("script", {
|
||||
type: "application/ld+json",
|
||||
dangerouslySetInnerHTML: { __html: JSON.stringify(a) },
|
||||
}),
|
||||
e.jsx("footer", {
|
||||
className: "bg-[var(--color-surface-default-primary)] w-full",
|
||||
children: e.jsxs("div", {
|
||||
className:
|
||||
"flex flex-col items-start mx-auto px-[var(--spacing-measures-spacing-016)] py-[var(--spacing-measures-spacing-040)] gap-[var(--spacing-measures-spacing-040)] sm:px-[var(--spacing-measures-spacing-032)] sm:py-[var(--spacing-measures-spacing-024)] sm:gap-[var(--spacing-measures-spacing-024)] lg:px-[var(--spacing-measures-spacing-120,120px)] lg:py-[var(--spacing-measures-spacing-096,96px)] lg:gap-[var(--spacing-measures-spacing-060,60px)]",
|
||||
children: [
|
||||
e.jsx("div", {
|
||||
className: "block sm:hidden",
|
||||
children: e.jsx(o, {}),
|
||||
}),
|
||||
e.jsx("div", {
|
||||
className: "hidden sm:block lg:hidden",
|
||||
children: e.jsx(o, { size: "footer" }),
|
||||
}),
|
||||
e.jsx("div", {
|
||||
className: "hidden lg:block",
|
||||
children: e.jsx(o, { size: "footerLg" }),
|
||||
}),
|
||||
e.jsxs("div", {
|
||||
className:
|
||||
"flex flex-col items-start w-full gap-[var(--spacing-measures-spacing-048,48px)] sm:flex-row sm:justify-between sm:gap-0",
|
||||
children: [
|
||||
e.jsxs("div", {
|
||||
className:
|
||||
"flex flex-col items-start gap-[var(--spacing-measures-spacing-064,64px)] order-2 sm:order-1",
|
||||
children: [
|
||||
e.jsxs("div", {
|
||||
className:
|
||||
"flex flex-col items-start gap-[var(--spacing-measures-spacing-016,16px)]",
|
||||
children: [
|
||||
e.jsx("div", {
|
||||
className:
|
||||
"text-[var(--color-content-default-primary)] font-['Inter'] text-base leading-5 font-medium tracking-[0%] lg:text-2xl lg:leading-7 lg:font-normal",
|
||||
children: "Media Economies Design Lab",
|
||||
}),
|
||||
e.jsx("a", {
|
||||
href: "mailto:medlab@colorado.edu",
|
||||
className:
|
||||
"text-[var(--color-content-default-primary)] font-['Inter'] text-base leading-5 font-medium tracking-[0%] lg:text-2xl lg:leading-7 lg:font-normal hover:opacity-80 active:opacity-60 focus:opacity-80 focus:outline-none focus:ring-2 focus:ring-[var(--color-content-default-primary)] focus:ring-offset-2 focus:ring-offset-[var(--color-surface-default-primary)] transition-opacity p-2 -m-2 cursor-pointer",
|
||||
children: "medlab@colorado.edu",
|
||||
}),
|
||||
],
|
||||
}),
|
||||
e.jsxs("div", {
|
||||
className:
|
||||
"flex flex-col items-start gap-[var(--spacing-measures-spacing-016,16px)]",
|
||||
children: [
|
||||
e.jsxs("a", {
|
||||
href: "#",
|
||||
className:
|
||||
"flex items-center gap-[var(--spacing-measures-spacing-06,6px)] hover:opacity-80 active:opacity-60 focus:opacity-80 focus:outline-none focus:ring-2 focus:ring-[var(--color-content-default-primary)] focus:ring-offset-2 focus:ring-offset-[var(--color-surface-default-primary)] transition-opacity p-2 -m-2 cursor-pointer group",
|
||||
"aria-label": "Follow us on Bluesky",
|
||||
children: [
|
||||
e.jsx("img", {
|
||||
src: "assets/Bluesky_Logo.svg",
|
||||
alt: "Bluesky",
|
||||
width: 24,
|
||||
height: 22,
|
||||
className:
|
||||
"flex-shrink-0 group-hover:scale-110 transition-transform",
|
||||
}),
|
||||
e.jsx("div", {
|
||||
className:
|
||||
"text-[var(--color-content-default-primary)] font-['Inter'] text-base leading-5 font-medium tracking-[0%] lg:text-2xl lg:leading-7 lg:font-normal",
|
||||
children: "medlabboulder",
|
||||
}),
|
||||
],
|
||||
}),
|
||||
e.jsxs("a", {
|
||||
href: "#",
|
||||
className:
|
||||
"flex items-center gap-[var(--spacing-measures-spacing-06,6px)] hover:opacity-80 active:opacity-60 focus:opacity-80 focus:outline-none focus:ring-2 focus:ring-[var(--color-content-default-primary)] focus:ring-offset-2 focus:ring-offset-[var(--color-surface-default-primary)] transition-opacity p-2 -m-2 cursor-pointer group",
|
||||
"aria-label": "Follow us on GitLab",
|
||||
children: [
|
||||
e.jsx("img", {
|
||||
src: "assets/GitLab_Icon.png",
|
||||
alt: "GitLab",
|
||||
width: 22,
|
||||
height: 22,
|
||||
className:
|
||||
"flex-shrink-0 grayscale group-hover:scale-110 transition-transform",
|
||||
}),
|
||||
e.jsx("div", {
|
||||
className:
|
||||
"text-[var(--color-content-default-primary)] font-['Inter'] text-base leading-5 font-medium tracking-[0%] lg:text-2xl lg:leading-7 lg:font-normal",
|
||||
children: "medlabboulder",
|
||||
}),
|
||||
],
|
||||
}),
|
||||
],
|
||||
}),
|
||||
],
|
||||
}),
|
||||
e.jsxs("div", {
|
||||
className:
|
||||
"flex flex-col items-start gap-[var(--spacing-measures-spacing-032,32px)] order-1 sm:order-2 sm:items-end",
|
||||
children: [
|
||||
e.jsx("a", {
|
||||
href: "#",
|
||||
className:
|
||||
"text-[var(--color-content-default-primary)] font-['Inter'] text-base leading-5 font-medium tracking-[0%] lg:text-2xl lg:leading-7 lg:font-normal hover:opacity-80 active:opacity-60 focus:opacity-80 focus:outline-none focus:ring-2 focus:ring-[var(--color-content-default-primary)] focus:ring-offset-2 focus:ring-offset-[var(--color-surface-default-primary)] transition-opacity p-2 -m-2 cursor-pointer",
|
||||
children: "Use cases",
|
||||
}),
|
||||
e.jsx("a", {
|
||||
href: "#",
|
||||
className:
|
||||
"text-[var(--color-content-default-primary)] font-['Inter'] text-base leading-5 font-medium tracking-[0%] lg:text-2xl lg:leading-7 lg:font-normal hover:opacity-80 active:opacity-60 focus:opacity-80 focus:outline-none focus:ring-2 focus:ring-[var(--color-content-default-primary)] focus:ring-offset-2 focus:ring-offset-[var(--color-surface-default-primary)] transition-opacity p-2 -m-2 cursor-pointer",
|
||||
children: "Learn",
|
||||
}),
|
||||
e.jsx("a", {
|
||||
href: "#",
|
||||
className:
|
||||
"text-[var(--color-content-default-primary)] font-['Inter'] text-base leading-5 font-medium tracking-[0%] lg:text-2xl lg:leading-7 lg:font-normal hover:opacity-80 active:opacity-60 focus:opacity-80 focus:outline-none focus:ring-2 focus:ring-[var(--color-content-default-primary)] focus:ring-offset-2 focus:ring-offset-[var(--color-surface-default-primary)] transition-opacity p-2 -m-2 cursor-pointer",
|
||||
children: "About",
|
||||
}),
|
||||
],
|
||||
}),
|
||||
],
|
||||
}),
|
||||
e.jsx(n, {}),
|
||||
e.jsxs("div", {
|
||||
className:
|
||||
"flex flex-col items-start gap-[var(--spacing-measures-spacing-032,32px)] sm:flex-row sm:justify-between sm:items-center w-full",
|
||||
children: [
|
||||
e.jsx("div", {
|
||||
className:
|
||||
"text-[var(--color-content-default-secondary)] font-['Inter'] text-sm leading-5 font-medium sm:text-xs sm:leading-4 lg:text-sm lg:leading-5 lg:font-normal",
|
||||
children: "© All right reserved",
|
||||
}),
|
||||
e.jsxs("div", {
|
||||
className:
|
||||
"flex flex-col items-start gap-[var(--spacing-measures-spacing-040,40px)] sm:flex-row sm:gap-[var(--spacing-measures-spacing-040,40px)]",
|
||||
children: [
|
||||
e.jsx("a", {
|
||||
href: "#",
|
||||
className:
|
||||
"text-[var(--color-content-default-secondary)] font-['Inter'] text-sm leading-5 font-medium underline sm:text-xs sm:leading-4 sm:no-underline lg:text-sm lg:leading-5 lg:font-normal hover:opacity-80 active:opacity-60 focus:opacity-80 focus:outline-none focus:ring-2 focus:ring-[var(--color-content-default-secondary)] focus:ring-offset-2 focus:ring-offset-[var(--color-surface-default-primary)] transition-opacity p-2 -m-2 cursor-pointer",
|
||||
children: "Privacy Policy",
|
||||
}),
|
||||
e.jsx("a", {
|
||||
href: "#",
|
||||
className:
|
||||
"text-[var(--color-content-default-secondary)] font-['Inter'] text-sm leading-5 font-medium underline sm:text-xs sm:leading-4 sm:no-underline lg:text-sm lg:leading-5 lg:font-normal hover:opacity-80 active:opacity-60 focus:opacity-80 focus:outline-none focus:ring-2 focus:ring-[var(--color-content-default-secondary)] focus:ring-offset-2 focus:ring-offset-[var(--color-surface-default-primary)] transition-opacity p-2 -m-2 cursor-pointer",
|
||||
children: "Terms of Service",
|
||||
}),
|
||||
e.jsx("a", {
|
||||
href: "#",
|
||||
className:
|
||||
"text-[var(--color-content-default-secondary)] font-['Inter'] text-sm leading-5 font-medium underline sm:text-xs sm:leading-4 sm:no-underline lg:text-sm lg:leading-5 lg:font-normal hover:opacity-80 active:opacity-60 focus:opacity-80 focus:outline-none focus:ring-2 focus:ring-[var(--color-content-default-secondary)] focus:ring-offset-2 focus:ring-offset-[var(--color-surface-default-primary)] transition-opacity p-2 -m-2 cursor-pointer",
|
||||
children: "Cookies Settings",
|
||||
}),
|
||||
],
|
||||
}),
|
||||
],
|
||||
}),
|
||||
],
|
||||
}),
|
||||
}),
|
||||
],
|
||||
});
|
||||
}
|
||||
r.__docgenInfo = { description: "", methods: [], displayName: "Footer" };
|
||||
const d = {
|
||||
title: "Components/Footer",
|
||||
component: r,
|
||||
parameters: {
|
||||
layout: "fullscreen",
|
||||
docs: {
|
||||
description: {
|
||||
component:
|
||||
"The main footer with responsive layout, branding section, navigation links, and legal information. Features different logo sizes and layout changes across breakpoints.",
|
||||
},
|
||||
},
|
||||
},
|
||||
tags: ["autodocs"],
|
||||
},
|
||||
s = {
|
||||
args: {},
|
||||
parameters: {
|
||||
docs: {
|
||||
description: {
|
||||
story:
|
||||
"Use the Viewport toolbar to see how the footer adapts to different screen sizes. The layout changes from stacked to side-by-side and logo sizes adjust.",
|
||||
},
|
||||
},
|
||||
},
|
||||
},
|
||||
t = {
|
||||
args: {},
|
||||
render: () =>
|
||||
e.jsxs("div", {
|
||||
className: "min-h-screen bg-[var(--color-surface-default-primary)]",
|
||||
children: [
|
||||
e.jsx("main", {
|
||||
className: "p-8",
|
||||
children: e.jsxs("div", {
|
||||
className: "max-w-4xl mx-auto",
|
||||
children: [
|
||||
e.jsx("h1", {
|
||||
className: "text-2xl font-bold text-white mb-4",
|
||||
children: "Example Page Content",
|
||||
}),
|
||||
e.jsx("p", {
|
||||
className: "text-white mb-4",
|
||||
children:
|
||||
"This demonstrates how the footer looks in a realistic page context. The footer maintains its responsive behavior while providing navigation and branding information.",
|
||||
}),
|
||||
e.jsx("div", {
|
||||
className:
|
||||
"grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4",
|
||||
children: [1, 2, 3, 4, 5, 6].map((a) =>
|
||||
e.jsxs(
|
||||
"div",
|
||||
{
|
||||
className:
|
||||
"bg-[var(--color-surface-default-secondary)] p-4 rounded-lg",
|
||||
children: [
|
||||
e.jsxs("h3", {
|
||||
className: "text-white font-semibold mb-2",
|
||||
children: ["Content Block ", a],
|
||||
}),
|
||||
e.jsx("p", {
|
||||
className:
|
||||
"text-[var(--color-content-default-secondary)] text-sm",
|
||||
children:
|
||||
"This is example content to show how the footer integrates with page content.",
|
||||
}),
|
||||
],
|
||||
},
|
||||
a,
|
||||
),
|
||||
),
|
||||
}),
|
||||
],
|
||||
}),
|
||||
}),
|
||||
e.jsx(r, {}),
|
||||
],
|
||||
}),
|
||||
parameters: {
|
||||
docs: {
|
||||
description: {
|
||||
story:
|
||||
"The footer integrated into a full page layout to show how it works in context.",
|
||||
},
|
||||
},
|
||||
},
|
||||
};
|
||||
s.parameters = {
|
||||
...s.parameters,
|
||||
docs: {
|
||||
...s.parameters?.docs,
|
||||
source: {
|
||||
originalSource: `{
|
||||
args: {},
|
||||
parameters: {
|
||||
docs: {
|
||||
description: {
|
||||
story: "Use the Viewport toolbar to see how the footer adapts to different screen sizes. The layout changes from stacked to side-by-side and logo sizes adjust."
|
||||
}
|
||||
}
|
||||
}
|
||||
}`,
|
||||
...s.parameters?.docs?.source,
|
||||
},
|
||||
},
|
||||
};
|
||||
t.parameters = {
|
||||
...t.parameters,
|
||||
docs: {
|
||||
...t.parameters?.docs,
|
||||
source: {
|
||||
originalSource: `{
|
||||
args: {},
|
||||
render: () => <div className="min-h-screen bg-[var(--color-surface-default-primary)]">
|
||||
<main className="p-8">
|
||||
<div className="max-w-4xl mx-auto">
|
||||
<h1 className="text-2xl font-bold text-white mb-4">
|
||||
Example Page Content
|
||||
</h1>
|
||||
<p className="text-white mb-4">
|
||||
This demonstrates how the footer looks in a realistic page context.
|
||||
The footer maintains its responsive behavior while providing
|
||||
navigation and branding information.
|
||||
</p>
|
||||
<div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4">
|
||||
{[1, 2, 3, 4, 5, 6].map(i => <div key={i} className="bg-[var(--color-surface-default-secondary)] p-4 rounded-lg">
|
||||
<h3 className="text-white font-semibold mb-2">
|
||||
Content Block {i}
|
||||
</h3>
|
||||
<p className="text-[var(--color-content-default-secondary)] text-sm">
|
||||
This is example content to show how the footer integrates with
|
||||
page content.
|
||||
</p>
|
||||
</div>)}
|
||||
</div>
|
||||
</div>
|
||||
</main>
|
||||
<Footer />
|
||||
</div>,
|
||||
parameters: {
|
||||
docs: {
|
||||
description: {
|
||||
story: "The footer integrated into a full page layout to show how it works in context."
|
||||
}
|
||||
}
|
||||
}
|
||||
}`,
|
||||
...t.parameters?.docs?.source,
|
||||
},
|
||||
},
|
||||
};
|
||||
const f = ["Default", "InPageContext"];
|
||||
export {
|
||||
s as Default,
|
||||
t as InPageContext,
|
||||
f as __namedExportsOrder,
|
||||
d as default,
|
||||
};
|
||||
Binary file not shown.
|
Before Width: | Height: | Size: 53 KiB |
@@ -1,191 +0,0 @@
|
||||
import { j as e } from "./jsx-runtime-C_nHp4yK.js";
|
||||
import { L as v } from "./Logo-DM7O8ATg.js";
|
||||
import { M as t } from "./MenuBar-anMCqtJv.js";
|
||||
import { M as d } from "./MenuBarItem-Dp8NM2fx.js";
|
||||
import { B as j } from "./Button-Z4hbXct5.js";
|
||||
import { A as b } from "./AvatarContainer-Bt0G0TWZ.js";
|
||||
import { A as f } from "./Avatar-C4Vb3oYl.js";
|
||||
function N({ onToggle: c }) {
|
||||
const m = {
|
||||
"@context": "https://schema.org",
|
||||
"@type": "WebSite",
|
||||
name: "CommunityRule",
|
||||
url: "https://communityrule.com",
|
||||
potentialAction: {
|
||||
"@type": "SearchAction",
|
||||
target: "https://communityrule.com/search?q={search_term_string}",
|
||||
"query-input": "required name=search_term_string",
|
||||
},
|
||||
},
|
||||
o = [
|
||||
{ href: "#", text: "Use cases", extraPadding: !0 },
|
||||
{ href: "#", text: "Learn" },
|
||||
{ href: "#", text: "About" },
|
||||
],
|
||||
x = [
|
||||
{ src: "/assets/Avatar_1.png", alt: "Avatar 1" },
|
||||
{ src: "/assets/Avatar_2.png", alt: "Avatar 2" },
|
||||
{ src: "/assets/Avatar_3.png", alt: "Avatar 3" },
|
||||
],
|
||||
h = [
|
||||
{ breakpoint: "block sm:hidden", size: "header", showText: !1 },
|
||||
{ breakpoint: "hidden sm:block md:hidden", size: "header", showText: !0 },
|
||||
{
|
||||
breakpoint: "hidden md:block lg:hidden",
|
||||
size: "headerMd",
|
||||
showText: !0,
|
||||
},
|
||||
{
|
||||
breakpoint: "hidden lg:block xl:hidden",
|
||||
size: "headerLg",
|
||||
showText: !0,
|
||||
},
|
||||
{ breakpoint: "hidden xl:block", size: "headerXl", showText: !0 },
|
||||
],
|
||||
i = (a) =>
|
||||
o.map((s, r) =>
|
||||
e.jsx(
|
||||
d,
|
||||
{
|
||||
href: s.href,
|
||||
size: s.extraPadding && a === "xsmall" ? "xsmallUseCases" : a,
|
||||
onClick: c,
|
||||
ariaLabel: `Navigate to ${s.text} page`,
|
||||
children: s.text,
|
||||
},
|
||||
r,
|
||||
),
|
||||
),
|
||||
g = (a, s) =>
|
||||
e.jsx(b, {
|
||||
size: a,
|
||||
children: x.map((r, u) =>
|
||||
e.jsx(f, { src: r.src, alt: r.alt, size: s }, u),
|
||||
),
|
||||
}),
|
||||
l = (a) =>
|
||||
e.jsx(d, {
|
||||
href: "#",
|
||||
size: a,
|
||||
ariaLabel: "Log in to your account",
|
||||
children: "Log in",
|
||||
}),
|
||||
n = (a, s, r) =>
|
||||
e.jsxs(j, {
|
||||
size: a,
|
||||
ariaLabel: "Create a new rule with avatar decoration",
|
||||
children: [g(s, r), e.jsx("span", { children: "Create rule" })],
|
||||
}),
|
||||
p = (a, s) => e.jsx(v, { size: a, showText: s });
|
||||
return e.jsxs(e.Fragment, {
|
||||
children: [
|
||||
e.jsx("script", {
|
||||
type: "application/ld+json",
|
||||
dangerouslySetInnerHTML: { __html: JSON.stringify(m) },
|
||||
}),
|
||||
e.jsx("header", {
|
||||
className:
|
||||
"bg-[var(--color-surface-default-primary)] w-full border-b border-[var(--border-color-default-tertiary)]",
|
||||
role: "banner",
|
||||
"aria-label": "Main navigation header",
|
||||
children: e.jsxs("nav", {
|
||||
className:
|
||||
"flex items-center justify-between mx-auto h-[40px] lg:h-[84px] xl:h-[88px] px-[var(--spacing-measures-spacing-016)] py-[var(--spacing-measures-spacing-008)] lg:px-[var(--spacing-measures-spacing-64,64px)] lg:py-[var(--spacing-measures-spacing-016,16px)]",
|
||||
role: "navigation",
|
||||
"aria-label": "Main navigation",
|
||||
children: [
|
||||
e.jsx("div", {
|
||||
className: "flex items-center",
|
||||
children: h.map((a, s) =>
|
||||
e.jsx(
|
||||
"div",
|
||||
{ className: a.breakpoint, children: p(a.size, a.showText) },
|
||||
s,
|
||||
),
|
||||
),
|
||||
}),
|
||||
e.jsxs("div", {
|
||||
className: "flex items-center",
|
||||
children: [
|
||||
e.jsx("div", { className: "block sm:hidden" }),
|
||||
e.jsx("div", {
|
||||
className: "hidden sm:block md:hidden",
|
||||
children: e.jsxs(t, {
|
||||
size: "default",
|
||||
children: [i("xsmall"), l("xsmall")],
|
||||
}),
|
||||
}),
|
||||
e.jsx("div", {
|
||||
className: "hidden md:block lg:hidden",
|
||||
children: e.jsx(t, {
|
||||
size: "default",
|
||||
children: i("xsmall"),
|
||||
}),
|
||||
}),
|
||||
e.jsx("div", {
|
||||
className: "hidden lg:block xl:hidden",
|
||||
children: e.jsx(t, { size: "large", children: i("large") }),
|
||||
}),
|
||||
e.jsx("div", {
|
||||
className: "hidden xl:block",
|
||||
children: e.jsx(t, { size: "large", children: i("xlarge") }),
|
||||
}),
|
||||
],
|
||||
}),
|
||||
e.jsxs("div", {
|
||||
className: "flex items-center",
|
||||
children: [
|
||||
e.jsx("div", {
|
||||
className: "block sm:hidden",
|
||||
children: e.jsxs("div", {
|
||||
className:
|
||||
"flex items-center gap-[var(--spacing-scale-001)]",
|
||||
children: [
|
||||
i("xsmall"),
|
||||
l("xsmall"),
|
||||
n("xsmall", "small", "small"),
|
||||
],
|
||||
}),
|
||||
}),
|
||||
e.jsx("div", {
|
||||
className: "hidden sm:block md:hidden",
|
||||
children: e.jsx("div", {
|
||||
className:
|
||||
"flex items-center gap-[var(--spacing-scale-004)]",
|
||||
children: n("xsmall", "small", "small"),
|
||||
}),
|
||||
}),
|
||||
e.jsx("div", {
|
||||
className: "hidden md:block lg:hidden",
|
||||
children: e.jsxs("div", {
|
||||
className:
|
||||
"flex items-center gap-[var(--spacing-measures-spacing-010)]",
|
||||
children: [l("xsmall"), n("xsmall", "medium", "medium")],
|
||||
}),
|
||||
}),
|
||||
e.jsx("div", {
|
||||
className: "hidden lg:block xl:hidden",
|
||||
children: e.jsxs("div", {
|
||||
className:
|
||||
"flex items-center gap-[var(--spacing-measures-spacing-004)]",
|
||||
children: [l("large"), n("large", "xlarge", "xlarge")],
|
||||
}),
|
||||
}),
|
||||
e.jsx("div", {
|
||||
className: "hidden xl:block",
|
||||
children: e.jsxs("div", {
|
||||
className:
|
||||
"flex items-center gap-[var(--spacing-measures-spacing-004)]",
|
||||
children: [l("xlarge"), n("xlarge", "xlarge", "xlarge")],
|
||||
}),
|
||||
}),
|
||||
],
|
||||
}),
|
||||
],
|
||||
}),
|
||||
}),
|
||||
],
|
||||
});
|
||||
}
|
||||
N.__docgenInfo = { description: "", methods: [], displayName: "Header" };
|
||||
export { N as H };
|
||||
@@ -1,168 +0,0 @@
|
||||
import { j as e } from "./jsx-runtime-C_nHp4yK.js";
|
||||
import { H as o } from "./Header-Bz-bT1Sq.js";
|
||||
import "./iframe-D_aMTKb2.js";
|
||||
import "./preload-helper-DIZFD4sK.js";
|
||||
import "./Logo-DM7O8ATg.js";
|
||||
import "./MenuBar-anMCqtJv.js";
|
||||
import "./MenuBarItem-Dp8NM2fx.js";
|
||||
import "./Button-Z4hbXct5.js";
|
||||
import "./AvatarContainer-Bt0G0TWZ.js";
|
||||
import "./Avatar-C4Vb3oYl.js";
|
||||
const x = {
|
||||
title: "Components/Header",
|
||||
component: o,
|
||||
parameters: {
|
||||
layout: "fullscreen",
|
||||
docs: {
|
||||
description: {
|
||||
component:
|
||||
"The main navigation header with responsive behavior across different breakpoints.",
|
||||
},
|
||||
},
|
||||
},
|
||||
argTypes: { onToggle: { action: "toggled" } },
|
||||
tags: ["autodocs"],
|
||||
},
|
||||
t = {
|
||||
args: {},
|
||||
parameters: {
|
||||
docs: {
|
||||
description: {
|
||||
story:
|
||||
"Use the Viewport toolbar to change the iframe width and see how the header adapts to different screen sizes. The header shows different layouts for mobile, tablet, and desktop breakpoints.",
|
||||
},
|
||||
},
|
||||
},
|
||||
},
|
||||
a = {
|
||||
args: {},
|
||||
render: () =>
|
||||
e.jsxs("div", {
|
||||
className: "min-h-screen bg-[var(--color-surface-default-primary)]",
|
||||
children: [
|
||||
e.jsx(o, {}),
|
||||
e.jsx("main", {
|
||||
className: "p-8",
|
||||
children: e.jsxs("div", {
|
||||
className: "max-w-4xl mx-auto",
|
||||
children: [
|
||||
e.jsx("h1", {
|
||||
className: "text-2xl font-bold text-white mb-4",
|
||||
children: "Example Page Content",
|
||||
}),
|
||||
e.jsx("p", {
|
||||
className: "text-white mb-4",
|
||||
children:
|
||||
"This demonstrates how the header looks in a realistic page context. The header maintains its responsive behavior while providing navigation for the page content.",
|
||||
}),
|
||||
e.jsx("div", {
|
||||
className:
|
||||
"grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4",
|
||||
children: [1, 2, 3, 4, 5, 6].map((s) =>
|
||||
e.jsxs(
|
||||
"div",
|
||||
{
|
||||
className:
|
||||
"bg-[var(--color-surface-default-secondary)] p-4 rounded-lg",
|
||||
children: [
|
||||
e.jsxs("h3", {
|
||||
className: "text-white font-semibold mb-2",
|
||||
children: ["Content Block ", s],
|
||||
}),
|
||||
e.jsx("p", {
|
||||
className:
|
||||
"text-[var(--color-content-default-secondary)] text-sm",
|
||||
children:
|
||||
"This is example content to show how the header integrates with page content.",
|
||||
}),
|
||||
],
|
||||
},
|
||||
s,
|
||||
),
|
||||
),
|
||||
}),
|
||||
],
|
||||
}),
|
||||
}),
|
||||
],
|
||||
}),
|
||||
parameters: {
|
||||
docs: {
|
||||
description: {
|
||||
story:
|
||||
"The header integrated into a full page layout to show how it works in context.",
|
||||
},
|
||||
},
|
||||
},
|
||||
};
|
||||
t.parameters = {
|
||||
...t.parameters,
|
||||
docs: {
|
||||
...t.parameters?.docs,
|
||||
source: {
|
||||
originalSource: `{
|
||||
args: {},
|
||||
parameters: {
|
||||
docs: {
|
||||
description: {
|
||||
story: "Use the Viewport toolbar to change the iframe width and see how the header adapts to different screen sizes. The header shows different layouts for mobile, tablet, and desktop breakpoints."
|
||||
}
|
||||
}
|
||||
}
|
||||
}`,
|
||||
...t.parameters?.docs?.source,
|
||||
},
|
||||
},
|
||||
};
|
||||
a.parameters = {
|
||||
...a.parameters,
|
||||
docs: {
|
||||
...a.parameters?.docs,
|
||||
source: {
|
||||
originalSource: `{
|
||||
args: {},
|
||||
render: () => <div className="min-h-screen bg-[var(--color-surface-default-primary)]">
|
||||
<Header />
|
||||
<main className="p-8">
|
||||
<div className="max-w-4xl mx-auto">
|
||||
<h1 className="text-2xl font-bold text-white mb-4">
|
||||
Example Page Content
|
||||
</h1>
|
||||
<p className="text-white mb-4">
|
||||
This demonstrates how the header looks in a realistic page context.
|
||||
The header maintains its responsive behavior while providing
|
||||
navigation for the page content.
|
||||
</p>
|
||||
<div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4">
|
||||
{[1, 2, 3, 4, 5, 6].map(i => <div key={i} className="bg-[var(--color-surface-default-secondary)] p-4 rounded-lg">
|
||||
<h3 className="text-white font-semibold mb-2">
|
||||
Content Block {i}
|
||||
</h3>
|
||||
<p className="text-[var(--color-content-default-secondary)] text-sm">
|
||||
This is example content to show how the header integrates with
|
||||
page content.
|
||||
</p>
|
||||
</div>)}
|
||||
</div>
|
||||
</div>
|
||||
</main>
|
||||
</div>,
|
||||
parameters: {
|
||||
docs: {
|
||||
description: {
|
||||
story: "The header integrated into a full page layout to show how it works in context."
|
||||
}
|
||||
}
|
||||
}
|
||||
}`,
|
||||
...a.parameters?.docs?.source,
|
||||
},
|
||||
},
|
||||
};
|
||||
const f = ["Default", "InPageContext"];
|
||||
export {
|
||||
t as Default,
|
||||
a as InPageContext,
|
||||
f as __namedExportsOrder,
|
||||
x as default,
|
||||
};
|
||||
@@ -1,41 +0,0 @@
|
||||
import { j as s } from "./jsx-runtime-C_nHp4yK.js";
|
||||
function n({ children: a, className: e = "", stretch: l = !1, ...p }) {
|
||||
const r = l
|
||||
? "flex-1 sm:mr-[var(--spacing-scale-008)] md:mr-[185px] lg:mr-[var(--spacing-scale-024)] xl:mr-[var(--spacing-scale-032)]"
|
||||
: "";
|
||||
return s.jsxs("div", {
|
||||
className: `HeaderTab header-breakpoint-transition relative bg-[var(--color-surface-default-brand-primary)] rounded-t-[32px] sm:rounded-t-[32px] md:rounded-t-[32px] lg:rounded-t-[32px] xl:rounded-t-[32px] pl-[var(--spacing-measures-spacing-012)] h-[40px] sm:h-[52px] md:h-[52px] lg:h-[52px] xl:h-[64px] sm:pr-[var(--spacing-scale-006)] md:pl-[var(--spacing-scale-024)] lg:pl-[var(--spacing-scale-024)] xl:pl-[var(--spacing-scale-032)] md:pr-[var(--spacing-scale-012)] lg:pr-[var(--spacing-scale-048)] xl:pr-[var(--spacing-scale-120)] md:gap-[var(--spacing-scale-032)] ${r} ${e}`,
|
||||
...p,
|
||||
children: [
|
||||
a,
|
||||
s.jsx("img", {
|
||||
src: "assets/Union_xsm.svg",
|
||||
alt: "Union",
|
||||
className:
|
||||
"absolute -bottom-[3px] -right-[52px] w-[61px] h-[24px] sm:w-[61px] sm:h-[31.5px] sm:hidden -z-10",
|
||||
}),
|
||||
s.jsx("img", {
|
||||
src: "assets/Union_sm_md_lg.svg",
|
||||
alt: "Union",
|
||||
className:
|
||||
"absolute -bottom-[3.7px] -right-[53px] w-[61px] h-[24px] sm:w-[61px] sm:h-[31.5px] hidden sm:block xl:hidden -z-10",
|
||||
}),
|
||||
s.jsx("img", {
|
||||
src: "assets/Union_xlg.svg",
|
||||
alt: "Union",
|
||||
className:
|
||||
"absolute -bottom-[6px] -right-[94px] w-[105px] h-[53px] hidden xl:block -z-10",
|
||||
}),
|
||||
],
|
||||
});
|
||||
}
|
||||
n.__docgenInfo = {
|
||||
description: "",
|
||||
methods: [],
|
||||
displayName: "HeaderTab",
|
||||
props: {
|
||||
className: { defaultValue: { value: '""', computed: !1 }, required: !1 },
|
||||
stretch: { defaultValue: { value: "false", computed: !1 }, required: !1 },
|
||||
},
|
||||
};
|
||||
export { n as H };
|
||||
@@ -1,53 +0,0 @@
|
||||
import { j as t } from "./jsx-runtime-C_nHp4yK.js";
|
||||
import { H as r } from "./HeaderTab-D9jUrYUx.js";
|
||||
import { L as s } from "./Logo-DM7O8ATg.js";
|
||||
import "./iframe-D_aMTKb2.js";
|
||||
import "./preload-helper-DIZFD4sK.js";
|
||||
const p = {
|
||||
title: "Components/HeaderTab",
|
||||
component: r,
|
||||
parameters: {
|
||||
layout: "centered",
|
||||
docs: {
|
||||
description: {
|
||||
component:
|
||||
"A header tab container with decorative Union images and responsive behavior. Used to wrap content in the header with consistent styling and responsive breakpoint transitions.",
|
||||
},
|
||||
},
|
||||
},
|
||||
argTypes: {
|
||||
stretch: {
|
||||
control: { type: "boolean" },
|
||||
description: "Whether the tab should stretch to fill available space",
|
||||
},
|
||||
className: {
|
||||
control: { type: "text" },
|
||||
description: "Additional CSS classes",
|
||||
},
|
||||
},
|
||||
tags: ["autodocs"],
|
||||
},
|
||||
e = {
|
||||
args: { stretch: !1 },
|
||||
render: (a) =>
|
||||
t.jsx(r, { ...a, children: t.jsx(s, { size: "homeHeaderMd" }) }),
|
||||
};
|
||||
e.parameters = {
|
||||
...e.parameters,
|
||||
docs: {
|
||||
...e.parameters?.docs,
|
||||
source: {
|
||||
originalSource: `{
|
||||
args: {
|
||||
stretch: false
|
||||
},
|
||||
render: args => <HeaderTab {...args}>
|
||||
<Logo size="homeHeaderMd" />
|
||||
</HeaderTab>
|
||||
}`,
|
||||
...e.parameters?.docs?.source,
|
||||
},
|
||||
},
|
||||
};
|
||||
const m = ["Default"];
|
||||
export { e as Default, m as __namedExportsOrder, p as default };
|
||||
@@ -1,43 +0,0 @@
|
||||
import { j as a } from "./jsx-runtime-C_nHp4yK.js";
|
||||
import { C as t } from "./ContentLockup-DbWiPA4N.js";
|
||||
import { H as p } from "./HeroDecor-Csfoi-N_.js";
|
||||
const c = ({ title: e, subtitle: s, description: r, ctaText: l, ctaHref: n }) =>
|
||||
a.jsx("section", {
|
||||
className:
|
||||
"bg-transparent px-[var(--spacing-scale-008)] sm:px-[var(--spacing-scale-010)] md:px-[var(--spacing-scale-016)] lg:px-[var(--spacing-scale-024)] xl:px-[var(--spacing-scale-048)]",
|
||||
children: a.jsx("div", {
|
||||
className: "flex flex-col gap-[var(--spacing-scale-010)]",
|
||||
children: a.jsxs("div", {
|
||||
className:
|
||||
"bg-[var(--color-surface-default-brand-primary)] p-[var(--spacing-scale-012)] sm:p-[var(--spacing-scale-016)] md:p-[var(--spacing-scale-064)] lg:py-[var(--spacing-scale-096)] lg:px-[var(--spacing-scale-064)] rounded-tl-none rounded-tr-[16px] rounded-br-[16px] rounded-bl-[16px] flex flex-col gap-[var(--spacing-scale-024)] sm:gap-[var(--spacing-scale-024)] md:flex-row md:gap-[var(--spacing-scale-048)] relative overflow-hidden",
|
||||
children: [
|
||||
a.jsx(p, {
|
||||
className:
|
||||
"pointer-events-none absolute z-0 left-0 top-0 translate-x-[-72px] translate-y-[26px] sm:translate-x-[-78px] sm:translate-y-[24px] md:translate-x-[-86px] md:translate-y-[16px] lg:translate-x-[-88px] lg:translate-y-[16px] w-[1540px] h-[645px] scale-[1.04]",
|
||||
}),
|
||||
a.jsx("div", {
|
||||
className: "md:flex-1",
|
||||
children: a.jsx(t, {
|
||||
title: e,
|
||||
subtitle: s,
|
||||
description: r,
|
||||
ctaText: l,
|
||||
ctaHref: n,
|
||||
buttonClassName: "shrink-0 whitespace-nowrap min-w-[280px]",
|
||||
}),
|
||||
}),
|
||||
a.jsx("div", {
|
||||
className:
|
||||
"w-full md:flex-1 rounded-[8px] overflow-hidden relative z-10 flex items-center justify-center",
|
||||
children: a.jsx("img", {
|
||||
src: "assets/HeroImage.png",
|
||||
alt: "Hero illustration",
|
||||
className: "w-full h-auto",
|
||||
}),
|
||||
}),
|
||||
],
|
||||
}),
|
||||
}),
|
||||
});
|
||||
c.__docgenInfo = { description: "", methods: [], displayName: "HeroBanner" };
|
||||
export { c as H };
|
||||
@@ -1,82 +0,0 @@
|
||||
import { H as e } from "./HeroBanner-D2qHR4vw.js";
|
||||
import "./jsx-runtime-C_nHp4yK.js";
|
||||
import "./iframe-D_aMTKb2.js";
|
||||
import "./preload-helper-DIZFD4sK.js";
|
||||
import "./ContentLockup-DbWiPA4N.js";
|
||||
import "./Button-Z4hbXct5.js";
|
||||
import "./HeroDecor-Csfoi-N_.js";
|
||||
const p = {
|
||||
title: "Components/HeroBanner",
|
||||
component: e,
|
||||
parameters: {
|
||||
layout: "fullscreen",
|
||||
docs: {
|
||||
description: {
|
||||
component:
|
||||
"A responsive hero banner component that showcases the Community Rule branding and messaging. Adapts across multiple breakpoints with proper spacing, typography, and interactive elements. Includes background decorations and product demo integration.",
|
||||
},
|
||||
},
|
||||
},
|
||||
argTypes: {
|
||||
title: { control: { type: "text" }, description: "The main title text" },
|
||||
subtitle: { control: { type: "text" }, description: "The subtitle text" },
|
||||
description: {
|
||||
control: { type: "text" },
|
||||
description: "The description text",
|
||||
},
|
||||
ctaText: {
|
||||
control: { type: "text" },
|
||||
description: "The call-to-action button text",
|
||||
},
|
||||
ctaHref: {
|
||||
control: { type: "text" },
|
||||
description: "The call-to-action button link",
|
||||
},
|
||||
},
|
||||
tags: ["autodocs"],
|
||||
},
|
||||
t = {
|
||||
args: {
|
||||
title: "Collaborate",
|
||||
subtitle: "with clarity",
|
||||
description:
|
||||
"Help your community make important decisions in a way that reflects its unique values.",
|
||||
ctaText: "Learn how Community Rule works",
|
||||
ctaHref: "#",
|
||||
},
|
||||
parameters: {
|
||||
docs: {
|
||||
description: {
|
||||
story:
|
||||
"Default hero banner with standard Community Rule messaging and branding.",
|
||||
},
|
||||
},
|
||||
},
|
||||
};
|
||||
t.parameters = {
|
||||
...t.parameters,
|
||||
docs: {
|
||||
...t.parameters?.docs,
|
||||
source: {
|
||||
originalSource: `{
|
||||
args: {
|
||||
title: "Collaborate",
|
||||
subtitle: "with clarity",
|
||||
description: "Help your community make important decisions in a way that reflects its unique values.",
|
||||
ctaText: "Learn how Community Rule works",
|
||||
ctaHref: "#"
|
||||
},
|
||||
parameters: {
|
||||
docs: {
|
||||
description: {
|
||||
story: "Default hero banner with standard Community Rule messaging and branding."
|
||||
}
|
||||
}
|
||||
}
|
||||
}`,
|
||||
...t.parameters?.docs?.source,
|
||||
},
|
||||
},
|
||||
};
|
||||
const l = ["Default"];
|
||||
export { t as Default, l as __namedExportsOrder, p as default };
|
||||
@@ -1,523 +0,0 @@
|
||||
import { j as e } from "./jsx-runtime-C_nHp4yK.js";
|
||||
import { H as t } from "./HeroBanner-D2qHR4vw.js";
|
||||
import { C as r } from "./ContentLockup-DbWiPA4N.js";
|
||||
import { H as o } from "./HeroDecor-Csfoi-N_.js";
|
||||
import "./iframe-D_aMTKb2.js";
|
||||
import "./preload-helper-DIZFD4sK.js";
|
||||
import "./Button-Z4hbXct5.js";
|
||||
const y = {
|
||||
title: "Systems/HeroBanner System",
|
||||
parameters: {
|
||||
layout: "fullscreen",
|
||||
docs: {
|
||||
description: {
|
||||
component:
|
||||
"Complete HeroBanner system showcasing all nested components working together. This demonstrates the full responsive behavior and component integration.",
|
||||
},
|
||||
},
|
||||
},
|
||||
tags: ["autodocs"],
|
||||
},
|
||||
n = {
|
||||
render: () =>
|
||||
e.jsx("div", {
|
||||
className: "min-h-screen bg-gray-50",
|
||||
children: e.jsx(t, {
|
||||
title: "Collaborate",
|
||||
subtitle: "with clarity",
|
||||
description:
|
||||
"Help your community make important decisions in a way that reflects its unique values.",
|
||||
ctaText: "Learn how Community Rule works",
|
||||
ctaHref: "#",
|
||||
}),
|
||||
}),
|
||||
parameters: {
|
||||
docs: {
|
||||
description: {
|
||||
story:
|
||||
"Complete HeroBanner system with all components integrated. Resize your browser to see responsive behavior across all breakpoints.",
|
||||
},
|
||||
},
|
||||
},
|
||||
},
|
||||
a = {
|
||||
render: () =>
|
||||
e.jsx("div", {
|
||||
className: "space-y-12 p-8",
|
||||
children: e.jsxs("div", {
|
||||
children: [
|
||||
e.jsx("h2", {
|
||||
className: "text-2xl font-bold mb-6",
|
||||
children: "HeroBanner Components",
|
||||
}),
|
||||
e.jsxs("div", {
|
||||
className: "space-y-8",
|
||||
children: [
|
||||
e.jsxs("div", {
|
||||
children: [
|
||||
e.jsx("h3", {
|
||||
className: "text-lg font-semibold mb-4",
|
||||
children: "1. ContentLockup Component",
|
||||
}),
|
||||
e.jsx("div", {
|
||||
className:
|
||||
"bg-[var(--color-surface-default-brand-primary)] p-8 rounded-lg",
|
||||
children: e.jsx(r, {
|
||||
title: "Collaborate",
|
||||
subtitle: "with clarity",
|
||||
description:
|
||||
"Help your community make important decisions in a way that reflects its unique values.",
|
||||
ctaText: "Learn how Community Rule works",
|
||||
ctaHref: "#",
|
||||
}),
|
||||
}),
|
||||
],
|
||||
}),
|
||||
e.jsxs("div", {
|
||||
children: [
|
||||
e.jsx("h3", {
|
||||
className: "text-lg font-semibold mb-4",
|
||||
children: "2. HeroDecor Component",
|
||||
}),
|
||||
e.jsxs("div", {
|
||||
className:
|
||||
"bg-[var(--color-surface-default-brand-primary)] p-8 rounded-lg relative overflow-hidden h-64",
|
||||
children: [
|
||||
e.jsx(o, { className: "w-full h-full" }),
|
||||
e.jsx("div", {
|
||||
className: "relative z-10 text-white mt-4",
|
||||
children: e.jsx("p", {
|
||||
children: "Decoration appears behind content",
|
||||
}),
|
||||
}),
|
||||
],
|
||||
}),
|
||||
],
|
||||
}),
|
||||
e.jsxs("div", {
|
||||
children: [
|
||||
e.jsx("h3", {
|
||||
className: "text-lg font-semibold mb-4",
|
||||
children: "3. Complete HeroBanner",
|
||||
}),
|
||||
e.jsx(t, {
|
||||
title: "Collaborate",
|
||||
subtitle: "with clarity",
|
||||
description:
|
||||
"Help your community make important decisions in a way that reflects its unique values.",
|
||||
ctaText: "Learn how Community Rule works",
|
||||
ctaHref: "#",
|
||||
}),
|
||||
],
|
||||
}),
|
||||
],
|
||||
}),
|
||||
],
|
||||
}),
|
||||
}),
|
||||
parameters: {
|
||||
docs: {
|
||||
description: {
|
||||
story:
|
||||
"Breakdown of individual components that make up the HeroBanner system, showing how they work together.",
|
||||
},
|
||||
},
|
||||
},
|
||||
},
|
||||
s = {
|
||||
render: () =>
|
||||
e.jsxs("div", {
|
||||
className: "space-y-8 p-8",
|
||||
children: [
|
||||
e.jsx("h2", {
|
||||
className: "text-2xl font-bold",
|
||||
children: "Responsive Breakpoints",
|
||||
}),
|
||||
e.jsxs("div", {
|
||||
className: "space-y-6",
|
||||
children: [
|
||||
e.jsxs("div", {
|
||||
children: [
|
||||
e.jsx("h3", {
|
||||
className: "text-lg font-semibold mb-2",
|
||||
children: "XSmall (≤429px)",
|
||||
}),
|
||||
e.jsx("div", {
|
||||
className:
|
||||
"border-2 border-gray-300 rounded-lg overflow-hidden",
|
||||
style: { width: "400px" },
|
||||
children: e.jsx(t, {
|
||||
title: "Collaborate",
|
||||
subtitle: "with clarity",
|
||||
description:
|
||||
"Help your community make important decisions in a way that reflects its unique values.",
|
||||
ctaText: "Learn how Community Rule works",
|
||||
ctaHref: "#",
|
||||
}),
|
||||
}),
|
||||
],
|
||||
}),
|
||||
e.jsxs("div", {
|
||||
children: [
|
||||
e.jsx("h3", {
|
||||
className: "text-lg font-semibold mb-2",
|
||||
children: "Small (430px+)",
|
||||
}),
|
||||
e.jsx("div", {
|
||||
className:
|
||||
"border-2 border-gray-300 rounded-lg overflow-hidden",
|
||||
style: { width: "600px" },
|
||||
children: e.jsx(t, {
|
||||
title: "Collaborate",
|
||||
subtitle: "with clarity",
|
||||
description:
|
||||
"Help your community make important decisions in a way that reflects its unique values.",
|
||||
ctaText: "Learn how Community Rule works",
|
||||
ctaHref: "#",
|
||||
}),
|
||||
}),
|
||||
],
|
||||
}),
|
||||
e.jsxs("div", {
|
||||
children: [
|
||||
e.jsx("h3", {
|
||||
className: "text-lg font-semibold mb-2",
|
||||
children: "Medium (768px+)",
|
||||
}),
|
||||
e.jsx("div", {
|
||||
className:
|
||||
"border-2 border-gray-300 rounded-lg overflow-hidden",
|
||||
style: { width: "900px" },
|
||||
children: e.jsx(t, {
|
||||
title: "Collaborate",
|
||||
subtitle: "with clarity",
|
||||
description:
|
||||
"Help your community make important decisions in a way that reflects its unique values.",
|
||||
ctaText: "Learn how Community Rule works",
|
||||
ctaHref: "#",
|
||||
}),
|
||||
}),
|
||||
],
|
||||
}),
|
||||
e.jsxs("div", {
|
||||
children: [
|
||||
e.jsx("h3", {
|
||||
className: "text-lg font-semibold mb-2",
|
||||
children: "Large (1024px+)",
|
||||
}),
|
||||
e.jsx("div", {
|
||||
className:
|
||||
"border-2 border-gray-300 rounded-lg overflow-hidden",
|
||||
style: { width: "1200px" },
|
||||
children: e.jsx(t, {
|
||||
title: "Collaborate",
|
||||
subtitle: "with clarity",
|
||||
description:
|
||||
"Help your community make important decisions in a way that reflects its unique values.",
|
||||
ctaText: "Learn how Community Rule works",
|
||||
ctaHref: "#",
|
||||
}),
|
||||
}),
|
||||
],
|
||||
}),
|
||||
e.jsxs("div", {
|
||||
children: [
|
||||
e.jsx("h3", {
|
||||
className: "text-lg font-semibold mb-2",
|
||||
children: "XLarge (1440px+)",
|
||||
}),
|
||||
e.jsx("div", {
|
||||
className:
|
||||
"border-2 border-gray-300 rounded-lg overflow-hidden",
|
||||
style: { width: "1600px" },
|
||||
children: e.jsx(t, {
|
||||
title: "Collaborate",
|
||||
subtitle: "with clarity",
|
||||
description:
|
||||
"Help your community make important decisions in a way that reflects its unique values.",
|
||||
ctaText: "Learn how Community Rule works",
|
||||
ctaHref: "#",
|
||||
}),
|
||||
}),
|
||||
],
|
||||
}),
|
||||
],
|
||||
}),
|
||||
],
|
||||
}),
|
||||
parameters: {
|
||||
docs: {
|
||||
description: {
|
||||
story:
|
||||
"HeroBanner system demonstrating responsive behavior at each breakpoint. Each container simulates a different screen size.",
|
||||
},
|
||||
},
|
||||
},
|
||||
},
|
||||
i = {
|
||||
render: () =>
|
||||
e.jsxs("div", {
|
||||
className: "space-y-8 p-8",
|
||||
children: [
|
||||
e.jsx("h2", {
|
||||
className: "text-2xl font-bold",
|
||||
children: "Content Variations",
|
||||
}),
|
||||
e.jsxs("div", {
|
||||
className: "space-y-6",
|
||||
children: [
|
||||
e.jsxs("div", {
|
||||
children: [
|
||||
e.jsx("h3", {
|
||||
className: "text-lg font-semibold mb-2",
|
||||
children: "Standard Content",
|
||||
}),
|
||||
e.jsx(t, {
|
||||
title: "Collaborate",
|
||||
subtitle: "with clarity",
|
||||
description:
|
||||
"Help your community make important decisions in a way that reflects its unique values.",
|
||||
ctaText: "Learn how Community Rule works",
|
||||
ctaHref: "#",
|
||||
}),
|
||||
],
|
||||
}),
|
||||
e.jsxs("div", {
|
||||
children: [
|
||||
e.jsx("h3", {
|
||||
className: "text-lg font-semibold mb-2",
|
||||
children: "Alternative Content",
|
||||
}),
|
||||
e.jsx(t, {
|
||||
title: "Build",
|
||||
subtitle: "better communities",
|
||||
description:
|
||||
"Create operating manuals that help your community thrive and make decisions together.",
|
||||
ctaText: "Get started today",
|
||||
ctaHref: "/signup",
|
||||
}),
|
||||
],
|
||||
}),
|
||||
e.jsxs("div", {
|
||||
children: [
|
||||
e.jsx("h3", {
|
||||
className: "text-lg font-semibold mb-2",
|
||||
children: "Long Description",
|
||||
}),
|
||||
e.jsx(t, {
|
||||
title: "Collaborate",
|
||||
subtitle: "with clarity",
|
||||
description:
|
||||
"Help your community make important decisions in a way that reflects its unique values. Our platform provides the tools and frameworks needed to build successful, sustainable communities that can navigate complex challenges together.",
|
||||
ctaText: "Learn how Community Rule works",
|
||||
ctaHref: "#",
|
||||
}),
|
||||
],
|
||||
}),
|
||||
],
|
||||
}),
|
||||
],
|
||||
}),
|
||||
parameters: {
|
||||
docs: {
|
||||
description: {
|
||||
story:
|
||||
"HeroBanner system with different content variations to demonstrate flexibility and content handling.",
|
||||
},
|
||||
},
|
||||
},
|
||||
};
|
||||
n.parameters = {
|
||||
...n.parameters,
|
||||
docs: {
|
||||
...n.parameters?.docs,
|
||||
source: {
|
||||
originalSource: `{
|
||||
render: () => <div className="min-h-screen bg-gray-50">
|
||||
<HeroBanner title="Collaborate" subtitle="with clarity" description="Help your community make important decisions in a way that reflects its unique values." ctaText="Learn how Community Rule works" ctaHref="#" />
|
||||
</div>,
|
||||
parameters: {
|
||||
docs: {
|
||||
description: {
|
||||
story: "Complete HeroBanner system with all components integrated. Resize your browser to see responsive behavior across all breakpoints."
|
||||
}
|
||||
}
|
||||
}
|
||||
}`,
|
||||
...n.parameters?.docs?.source,
|
||||
},
|
||||
},
|
||||
};
|
||||
a.parameters = {
|
||||
...a.parameters,
|
||||
docs: {
|
||||
...a.parameters?.docs,
|
||||
source: {
|
||||
originalSource: `{
|
||||
render: () => <div className="space-y-12 p-8">
|
||||
<div>
|
||||
<h2 className="text-2xl font-bold mb-6">HeroBanner Components</h2>
|
||||
|
||||
<div className="space-y-8">
|
||||
<div>
|
||||
<h3 className="text-lg font-semibold mb-4">
|
||||
1. ContentLockup Component
|
||||
</h3>
|
||||
<div className="bg-[var(--color-surface-default-brand-primary)] p-8 rounded-lg">
|
||||
<ContentLockup title="Collaborate" subtitle="with clarity" description="Help your community make important decisions in a way that reflects its unique values." ctaText="Learn how Community Rule works" ctaHref="#" />
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<h3 className="text-lg font-semibold mb-4">
|
||||
2. HeroDecor Component
|
||||
</h3>
|
||||
<div className="bg-[var(--color-surface-default-brand-primary)] p-8 rounded-lg relative overflow-hidden h-64">
|
||||
<HeroDecor className="w-full h-full" />
|
||||
<div className="relative z-10 text-white mt-4">
|
||||
<p>Decoration appears behind content</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<h3 className="text-lg font-semibold mb-4">
|
||||
3. Complete HeroBanner
|
||||
</h3>
|
||||
<HeroBanner title="Collaborate" subtitle="with clarity" description="Help your community make important decisions in a way that reflects its unique values." ctaText="Learn how Community Rule works" ctaHref="#" />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>,
|
||||
parameters: {
|
||||
docs: {
|
||||
description: {
|
||||
story: "Breakdown of individual components that make up the HeroBanner system, showing how they work together."
|
||||
}
|
||||
}
|
||||
}
|
||||
}`,
|
||||
...a.parameters?.docs?.source,
|
||||
},
|
||||
},
|
||||
};
|
||||
s.parameters = {
|
||||
...s.parameters,
|
||||
docs: {
|
||||
...s.parameters?.docs,
|
||||
source: {
|
||||
originalSource: `{
|
||||
render: () => <div className="space-y-8 p-8">
|
||||
<h2 className="text-2xl font-bold">Responsive Breakpoints</h2>
|
||||
|
||||
<div className="space-y-6">
|
||||
<div>
|
||||
<h3 className="text-lg font-semibold mb-2">XSmall (≤429px)</h3>
|
||||
<div className="border-2 border-gray-300 rounded-lg overflow-hidden" style={{
|
||||
width: "400px"
|
||||
}}>
|
||||
<HeroBanner title="Collaborate" subtitle="with clarity" description="Help your community make important decisions in a way that reflects its unique values." ctaText="Learn how Community Rule works" ctaHref="#" />
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<h3 className="text-lg font-semibold mb-2">Small (430px+)</h3>
|
||||
<div className="border-2 border-gray-300 rounded-lg overflow-hidden" style={{
|
||||
width: "600px"
|
||||
}}>
|
||||
<HeroBanner title="Collaborate" subtitle="with clarity" description="Help your community make important decisions in a way that reflects its unique values." ctaText="Learn how Community Rule works" ctaHref="#" />
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<h3 className="text-lg font-semibold mb-2">Medium (768px+)</h3>
|
||||
<div className="border-2 border-gray-300 rounded-lg overflow-hidden" style={{
|
||||
width: "900px"
|
||||
}}>
|
||||
<HeroBanner title="Collaborate" subtitle="with clarity" description="Help your community make important decisions in a way that reflects its unique values." ctaText="Learn how Community Rule works" ctaHref="#" />
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<h3 className="text-lg font-semibold mb-2">Large (1024px+)</h3>
|
||||
<div className="border-2 border-gray-300 rounded-lg overflow-hidden" style={{
|
||||
width: "1200px"
|
||||
}}>
|
||||
<HeroBanner title="Collaborate" subtitle="with clarity" description="Help your community make important decisions in a way that reflects its unique values." ctaText="Learn how Community Rule works" ctaHref="#" />
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<h3 className="text-lg font-semibold mb-2">XLarge (1440px+)</h3>
|
||||
<div className="border-2 border-gray-300 rounded-lg overflow-hidden" style={{
|
||||
width: "1600px"
|
||||
}}>
|
||||
<HeroBanner title="Collaborate" subtitle="with clarity" description="Help your community make important decisions in a way that reflects its unique values." ctaText="Learn how Community Rule works" ctaHref="#" />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>,
|
||||
parameters: {
|
||||
docs: {
|
||||
description: {
|
||||
story: "HeroBanner system demonstrating responsive behavior at each breakpoint. Each container simulates a different screen size."
|
||||
}
|
||||
}
|
||||
}
|
||||
}`,
|
||||
...s.parameters?.docs?.source,
|
||||
},
|
||||
},
|
||||
};
|
||||
i.parameters = {
|
||||
...i.parameters,
|
||||
docs: {
|
||||
...i.parameters?.docs,
|
||||
source: {
|
||||
originalSource: `{
|
||||
render: () => <div className="space-y-8 p-8">
|
||||
<h2 className="text-2xl font-bold">Content Variations</h2>
|
||||
|
||||
<div className="space-y-6">
|
||||
<div>
|
||||
<h3 className="text-lg font-semibold mb-2">Standard Content</h3>
|
||||
<HeroBanner title="Collaborate" subtitle="with clarity" description="Help your community make important decisions in a way that reflects its unique values." ctaText="Learn how Community Rule works" ctaHref="#" />
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<h3 className="text-lg font-semibold mb-2">Alternative Content</h3>
|
||||
<HeroBanner title="Build" subtitle="better communities" description="Create operating manuals that help your community thrive and make decisions together." ctaText="Get started today" ctaHref="/signup" />
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<h3 className="text-lg font-semibold mb-2">Long Description</h3>
|
||||
<HeroBanner title="Collaborate" subtitle="with clarity" description="Help your community make important decisions in a way that reflects its unique values. Our platform provides the tools and frameworks needed to build successful, sustainable communities that can navigate complex challenges together." ctaText="Learn how Community Rule works" ctaHref="#" />
|
||||
</div>
|
||||
</div>
|
||||
</div>,
|
||||
parameters: {
|
||||
docs: {
|
||||
description: {
|
||||
story: "HeroBanner system with different content variations to demonstrate flexibility and content handling."
|
||||
}
|
||||
}
|
||||
}
|
||||
}`,
|
||||
...i.parameters?.docs?.source,
|
||||
},
|
||||
},
|
||||
};
|
||||
const v = [
|
||||
"CompleteSystem",
|
||||
"ComponentBreakdown",
|
||||
"ResponsiveBreakpoints",
|
||||
"ContentVariations",
|
||||
];
|
||||
export {
|
||||
n as CompleteSystem,
|
||||
a as ComponentBreakdown,
|
||||
i as ContentVariations,
|
||||
s as ResponsiveBreakpoints,
|
||||
v as __namedExportsOrder,
|
||||
y as default,
|
||||
};
|
||||
@@ -1,88 +0,0 @@
|
||||
import { j as e } from "./jsx-runtime-C_nHp4yK.js";
|
||||
const s = ({ className: C = "" }) =>
|
||||
e.jsx("svg", {
|
||||
className: `text-[#FDFAA8] opacity-50 ${C}`,
|
||||
viewBox: "0 0 1540 645",
|
||||
"aria-hidden": "true",
|
||||
overflow: "visible",
|
||||
preserveAspectRatio: "xMidYMid slice",
|
||||
children: e.jsxs("g", {
|
||||
fill: "currentColor",
|
||||
children: [
|
||||
e.jsx("defs", {
|
||||
children: e.jsxs("filter", {
|
||||
id: "grain",
|
||||
filterUnits: "objectBoundingBox",
|
||||
x: "0",
|
||||
y: "0",
|
||||
width: "1",
|
||||
height: "1",
|
||||
colorInterpolationFilters: "sRGB",
|
||||
children: [
|
||||
e.jsx("feTurbulence", {
|
||||
type: "fractalNoise",
|
||||
baseFrequency: "0.8",
|
||||
numOctaves: "2",
|
||||
seed: "3",
|
||||
stitchTiles: "stitch",
|
||||
result: "noise",
|
||||
}),
|
||||
e.jsx("feColorMatrix", {
|
||||
in: "noise",
|
||||
result: "softNoise",
|
||||
type: "matrix",
|
||||
values: " 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.15 0",
|
||||
}),
|
||||
e.jsx("feComposite", {
|
||||
in: "softNoise",
|
||||
in2: "SourceAlpha",
|
||||
operator: "in",
|
||||
result: "maskedNoise",
|
||||
}),
|
||||
e.jsx("feBlend", {
|
||||
in: "SourceGraphic",
|
||||
in2: "maskedNoise",
|
||||
mode: "multiply",
|
||||
}),
|
||||
],
|
||||
}),
|
||||
}),
|
||||
e.jsxs("g", {
|
||||
fill: "currentColor",
|
||||
filter: "url(#grain)",
|
||||
children: [
|
||||
e.jsx("path", {
|
||||
d: "M1441.54 226.758C1495.92 226.758 1540 320.385 1540 435.879C1540 551.373 1495.92 645 1441.54 645C1387.16 645 1343.08 551.373 1343.08 435.879C1343.08 320.385 1387.16 226.758 1441.54 226.758Z",
|
||||
}),
|
||||
e.jsx("path", {
|
||||
d: "M1441.54 226.758C1495.92 226.758 1540 320.385 1540 435.879C1540 551.373 1495.92 645 1441.54 645C1387.16 645 1343.08 551.373 1343.08 435.879C1343.08 320.385 1387.16 226.758 1441.54 226.758Z",
|
||||
}),
|
||||
e.jsx("path", {
|
||||
d: "M674.066 209.121C728.443 209.121 772.525 302.748 772.525 418.242C772.525 533.737 728.443 627.363 674.066 627.363C619.688 627.363 575.607 533.737 575.607 418.242C575.607 302.748 619.688 209.121 674.066 209.121Z",
|
||||
}),
|
||||
e.jsx("path", {
|
||||
d: "M674.066 209.121C728.443 209.121 772.525 302.748 772.525 418.242C772.525 533.737 728.443 627.363 674.066 627.363C619.688 627.363 575.607 533.737 575.607 418.242C575.607 302.748 619.688 209.121 674.066 209.121Z",
|
||||
}),
|
||||
e.jsx("path", {
|
||||
d: "M290.328 0C344.705 0 388.787 93.6267 388.787 209.121C388.787 211.519 388.765 213.907 388.728 216.285C401.725 133.082 438.661 73.0664 482.197 73.0664C536.574 73.0664 580.656 166.693 580.656 282.188C580.656 397.682 536.574 491.309 482.197 491.309C427.819 491.309 383.738 397.682 383.738 282.188C383.738 279.79 383.758 277.401 383.796 275.023C370.798 358.226 333.864 418.242 290.328 418.242C246.792 418.242 209.856 358.226 196.859 275.023C196.897 277.401 196.918 279.79 196.918 282.188C196.918 397.682 152.836 491.309 98.459 491.309C44.0816 491.309 0 397.682 0 282.188C0 166.693 44.0816 73.0664 98.459 73.0664C141.995 73.0664 178.929 133.082 191.927 216.285C191.889 213.907 191.869 211.519 191.869 209.121C191.869 93.6267 235.95 0 290.328 0Z",
|
||||
}),
|
||||
e.jsx("path", {
|
||||
d: "M290.328 0C344.705 0 388.787 93.6267 388.787 209.121C388.787 211.519 388.765 213.907 388.728 216.285C401.725 133.082 438.661 73.0664 482.197 73.0664C536.574 73.0664 580.656 166.693 580.656 282.188C580.656 397.682 536.574 491.309 482.197 491.309C427.819 491.309 383.738 397.682 383.738 282.188C383.738 279.79 383.758 277.401 383.796 275.023C370.798 358.226 333.864 418.242 290.328 418.242C246.792 418.242 209.856 358.226 196.859 275.023C196.897 277.401 196.918 279.79 196.918 282.188C196.918 397.682 152.836 491.309 98.459 491.309C44.0816 491.309 0 397.682 0 282.188C0 166.693 44.0816 73.0664 98.459 73.0664C141.995 73.0664 178.929 133.082 191.927 216.285C191.889 213.907 191.869 211.519 191.869 209.121C191.869 93.6267 235.95 0 290.328 0Z",
|
||||
}),
|
||||
e.jsx("path", {
|
||||
d: "M1057.8 0C1112.18 0 1156.26 93.6267 1156.26 209.121C1156.26 211.519 1156.24 213.907 1156.2 216.285C1169.2 133.082 1206.14 73.0664 1249.67 73.0664C1304.05 73.0664 1348.13 166.693 1348.13 282.188C1348.13 397.682 1304.05 491.309 1249.67 491.309C1195.29 491.309 1151.21 397.682 1151.21 282.188C1151.21 279.79 1151.23 277.401 1151.27 275.023C1138.27 358.226 1101.34 418.242 1057.8 418.242C1014.27 418.242 977.332 358.226 964.334 275.023C964.372 277.401 964.393 279.79 964.393 282.188C964.393 397.682 920.312 491.309 865.934 491.309C811.557 491.309 767.475 397.682 767.475 282.188C767.475 166.693 811.557 73.0664 865.934 73.0664C909.47 73.0664 946.405 133.082 959.402 216.285C959.365 213.907 959.344 211.519 959.344 209.121C959.344 93.6267 1003.43 0 1057.8 0Z",
|
||||
}),
|
||||
],
|
||||
}),
|
||||
],
|
||||
}),
|
||||
});
|
||||
s.__docgenInfo = {
|
||||
description: "",
|
||||
methods: [],
|
||||
displayName: "HeroDecor",
|
||||
props: {
|
||||
className: { defaultValue: { value: '""', computed: !1 }, required: !1 },
|
||||
},
|
||||
};
|
||||
export { s as H };
|
||||
@@ -1,120 +0,0 @@
|
||||
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,
|
||||
};
|
||||
Binary file not shown.
|
Before Width: | Height: | Size: 112 KiB |
@@ -1,393 +0,0 @@
|
||||
import { j as e } from "./jsx-runtime-C_nHp4yK.js";
|
||||
import { r as w } from "./iframe-D_aMTKb2.js";
|
||||
import { L as N } from "./Logo-DM7O8ATg.js";
|
||||
import { M as l } from "./MenuBar-anMCqtJv.js";
|
||||
import { M as p } from "./MenuBarItem-Dp8NM2fx.js";
|
||||
import { B as y } from "./Button-Z4hbXct5.js";
|
||||
import { A as k } from "./AvatarContainer-Bt0G0TWZ.js";
|
||||
import { A as H } from "./Avatar-C4Vb3oYl.js";
|
||||
import { H as T } from "./HeaderTab-D9jUrYUx.js";
|
||||
import { H as A } from "./Header-Bz-bT1Sq.js";
|
||||
import "./preload-helper-DIZFD4sK.js";
|
||||
function m() {
|
||||
const [t, h] = w.useState(!1),
|
||||
g = {
|
||||
"@context": "https://schema.org",
|
||||
"@type": "WebSite",
|
||||
name: "CommunityRule",
|
||||
url: "https://communityrule.com",
|
||||
description: "Build operating manuals for successful communities",
|
||||
potentialAction: {
|
||||
"@type": "SearchAction",
|
||||
target: "https://communityrule.com/search?q={search_term_string}",
|
||||
"query-input": "required name=search_term_string",
|
||||
},
|
||||
},
|
||||
x = [
|
||||
{ href: "#", text: "Use cases", extraPadding: !0 },
|
||||
{ href: "#", text: "Learn" },
|
||||
{ href: "#", text: "About" },
|
||||
],
|
||||
u = [
|
||||
{ src: "/assets/Avatar_1.png", alt: "Avatar 1" },
|
||||
{ src: "/assets/Avatar_2.png", alt: "Avatar 2" },
|
||||
{ src: "/assets/Avatar_3.png", alt: "Avatar 3" },
|
||||
],
|
||||
f = [
|
||||
{ breakpoint: "block sm:hidden", size: "homeHeaderXsmall", showText: !1 },
|
||||
{
|
||||
breakpoint: "hidden sm:block md:hidden",
|
||||
size: "homeHeaderSm",
|
||||
showText: !0,
|
||||
},
|
||||
{
|
||||
breakpoint: "hidden md:block lg:hidden",
|
||||
size: "homeHeaderMd",
|
||||
showText: !0,
|
||||
},
|
||||
{
|
||||
breakpoint: "hidden lg:block xl:hidden",
|
||||
size: "homeHeaderLg",
|
||||
showText: !0,
|
||||
},
|
||||
{ breakpoint: "hidden xl:block", size: "homeHeaderXl", showText: !0 },
|
||||
],
|
||||
n = (a) =>
|
||||
x.map((r, s) =>
|
||||
e.jsx(
|
||||
p,
|
||||
{
|
||||
href: r.href,
|
||||
size:
|
||||
r.extraPadding &&
|
||||
(a === "xsmall" ||
|
||||
a === "default" ||
|
||||
a === "home" ||
|
||||
a === "homeMd" ||
|
||||
a === "large" ||
|
||||
a === "homeXlarge")
|
||||
? a === "home" || a === "homeMd"
|
||||
? "homeMd"
|
||||
: a === "large"
|
||||
? "large"
|
||||
: a === "homeXlarge"
|
||||
? "homeXlarge"
|
||||
: "xsmallUseCases"
|
||||
: a,
|
||||
variant:
|
||||
a === "xsmall" ||
|
||||
a === "default" ||
|
||||
a === "home" ||
|
||||
a === "homeMd" ||
|
||||
a === "large" ||
|
||||
a === "homeXlarge"
|
||||
? "home"
|
||||
: "default",
|
||||
onClick: () => h(!t),
|
||||
ariaLabel: `Navigate to ${r.text} page`,
|
||||
children: r.text,
|
||||
},
|
||||
s,
|
||||
),
|
||||
),
|
||||
v = (a, r) =>
|
||||
e.jsx(k, {
|
||||
size: a,
|
||||
children: u.map((s, j) =>
|
||||
e.jsx(H, { src: s.src, alt: s.alt, size: r }, j),
|
||||
),
|
||||
}),
|
||||
o = (a) =>
|
||||
e.jsx(p, {
|
||||
href: "#",
|
||||
size: a,
|
||||
variant: a === "xsmall" || a === "default" ? "home" : "default",
|
||||
ariaLabel: "Log in to your account",
|
||||
children: "Log in",
|
||||
}),
|
||||
d = (a, r, s) =>
|
||||
e.jsxs(y, {
|
||||
size: a,
|
||||
variant: "secondary",
|
||||
ariaLabel: "Create a new rule with avatar decoration",
|
||||
children: [v(r, s), e.jsx("span", { children: "Create rule" })],
|
||||
}),
|
||||
b = (a, r) => e.jsx(N, { size: a, showText: r });
|
||||
return t
|
||||
? e.jsx(A, { onToggle: () => h(!1) })
|
||||
: e.jsxs(e.Fragment, {
|
||||
children: [
|
||||
e.jsx("script", {
|
||||
type: "application/ld+json",
|
||||
dangerouslySetInnerHTML: { __html: JSON.stringify(g) },
|
||||
}),
|
||||
e.jsx("header", {
|
||||
className: "w-full bg-transparent overflow-hidden",
|
||||
role: "banner",
|
||||
"aria-label": "Home page navigation header",
|
||||
children: e.jsxs("nav", {
|
||||
className:
|
||||
"relative flex items-center justify-between mx-auto h-[50px] sm:h-[62px] md:h-[68px] lg:h-[68px] xl:h-[88px] px-[var(--spacing-scale-008)] pr-[var(--spacing-scale-016)] pt-[var(--spacing-scale-010)] sm:px-[var(--spacing-scale-010)] sm:pr-[var(--spacing-scale-020)] sm:pt-[var(--spacing-scale-010)] md:px-[var(--spacing-scale-016)] md:pr-[var(--spacing-scale-032)] md:pt-[var(--spacing-scale-016)] lg:pl-[var(--spacing-scale-024)] lg:pt-[var(--spacing-scale-016)] lg:pr-[var(--spacing-scale-056)] xl:pl-[var(--spacing-scale-048)] xl:pt-[var(--spacing-scale-024)] xl:pr-[var(--spacing-scale-056)]",
|
||||
role: "navigation",
|
||||
"aria-label": "Main navigation",
|
||||
children: [
|
||||
e.jsxs(T, {
|
||||
className: "flex items-center self-end",
|
||||
stretch: !0,
|
||||
children: [
|
||||
e.jsx("div", {
|
||||
children: f.map((a, r) =>
|
||||
e.jsx(
|
||||
"div",
|
||||
{
|
||||
className: a.breakpoint,
|
||||
children: b(a.size, a.showText),
|
||||
},
|
||||
r,
|
||||
),
|
||||
),
|
||||
}),
|
||||
e.jsx("div", {
|
||||
className: "block sm:hidden -me-[2px]",
|
||||
children: e.jsxs(l, {
|
||||
size: "default",
|
||||
children: [n("xsmall"), o("xsmall")],
|
||||
}),
|
||||
}),
|
||||
],
|
||||
}),
|
||||
e.jsxs("div", {
|
||||
className:
|
||||
"absolute left-1/2 transform -translate-x-1/2 hidden sm:block",
|
||||
children: [
|
||||
e.jsx("div", {
|
||||
className: "hidden sm:block md:hidden",
|
||||
children: e.jsxs(l, {
|
||||
size: "default",
|
||||
children: [n("xsmall"), o("xsmall")],
|
||||
}),
|
||||
}),
|
||||
e.jsx("div", {
|
||||
className: "hidden md:block lg:hidden",
|
||||
children: e.jsx(l, {
|
||||
size: "medium",
|
||||
children: n("homeMd"),
|
||||
}),
|
||||
}),
|
||||
e.jsx("div", {
|
||||
className: "hidden lg:block xl:hidden",
|
||||
children: e.jsx(l, {
|
||||
size: "large",
|
||||
children: n("large"),
|
||||
}),
|
||||
}),
|
||||
e.jsx("div", {
|
||||
className: "hidden xl:block",
|
||||
children: e.jsx(l, {
|
||||
size: "large",
|
||||
children: n("homeXlarge"),
|
||||
}),
|
||||
}),
|
||||
],
|
||||
}),
|
||||
e.jsxs("div", {
|
||||
className: "flex items-center",
|
||||
children: [
|
||||
e.jsx("div", {
|
||||
className: "block md:hidden",
|
||||
children: d("xsmall", "small", "small"),
|
||||
}),
|
||||
e.jsx("div", {
|
||||
className:
|
||||
"hidden md:block lg:hidden absolute right-[var(--spacing-measures-spacing-016)]",
|
||||
children: e.jsxs("div", {
|
||||
className:
|
||||
"flex items-center gap-[var(--spacing-scale-010)]",
|
||||
children: [o("homeMd"), d("small", "medium", "medium")],
|
||||
}),
|
||||
}),
|
||||
e.jsx("div", {
|
||||
className: "hidden lg:flex xl:hidden items-center",
|
||||
children: e.jsxs("div", {
|
||||
className:
|
||||
"flex items-center gap-[var(--spacing-scale-004)]",
|
||||
children: [o("large"), d("large", "large", "large")],
|
||||
}),
|
||||
}),
|
||||
e.jsx("div", {
|
||||
className: "hidden xl:flex items-center",
|
||||
children: e.jsxs("div", {
|
||||
className:
|
||||
"flex items-center gap-[var(--spacing-scale-004)]",
|
||||
children: [
|
||||
o("homeXlarge"),
|
||||
d("xlarge", "xlarge", "xlarge"),
|
||||
],
|
||||
}),
|
||||
}),
|
||||
],
|
||||
}),
|
||||
],
|
||||
}),
|
||||
}),
|
||||
],
|
||||
});
|
||||
}
|
||||
m.__docgenInfo = { description: "", methods: [], displayName: "HomeHeader" };
|
||||
const U = {
|
||||
title: "Components/HomeHeader",
|
||||
component: m,
|
||||
parameters: {
|
||||
layout: "fullscreen",
|
||||
docs: {
|
||||
description: {
|
||||
component:
|
||||
"The home page header with transparent background, HeaderTab wrapper, and responsive behavior. Features a toggle to switch between home header and regular header.",
|
||||
},
|
||||
},
|
||||
},
|
||||
tags: ["autodocs"],
|
||||
},
|
||||
i = {
|
||||
args: {},
|
||||
parameters: {
|
||||
docs: {
|
||||
description: {
|
||||
story:
|
||||
"Use the Viewport toolbar to see how the home header adapts to different screen sizes. The header has a transparent background and uses HeaderTab for the left section.",
|
||||
},
|
||||
},
|
||||
},
|
||||
},
|
||||
c = {
|
||||
args: {},
|
||||
render: () =>
|
||||
e.jsxs("div", {
|
||||
className:
|
||||
"min-h-screen bg-gradient-to-b from-[var(--color-surface-default-primary)] to-[var(--color-surface-default-secondary)]",
|
||||
children: [
|
||||
e.jsx(m, {}),
|
||||
e.jsx("main", {
|
||||
className: "p-8",
|
||||
children: e.jsxs("div", {
|
||||
className: "max-w-4xl mx-auto text-center",
|
||||
children: [
|
||||
e.jsx("h1", {
|
||||
className: "text-4xl font-bold text-white mb-4",
|
||||
children: "Welcome to CommunityRule",
|
||||
}),
|
||||
e.jsx("p", {
|
||||
className:
|
||||
"text-xl text-[var(--color-content-default-secondary)] mb-8",
|
||||
children:
|
||||
"This demonstrates how the home header looks in a realistic home page context. The header maintains its transparent background and responsive behavior.",
|
||||
}),
|
||||
e.jsx("div", {
|
||||
className:
|
||||
"grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6",
|
||||
children: [1, 2, 3].map((t) =>
|
||||
e.jsxs(
|
||||
"div",
|
||||
{
|
||||
className:
|
||||
"bg-[var(--color-surface-default-secondary)] p-6 rounded-lg border border-[var(--border-color-default-tertiary)]",
|
||||
children: [
|
||||
e.jsxs("h3", {
|
||||
className: "text-white font-semibold mb-3",
|
||||
children: ["Feature ", t],
|
||||
}),
|
||||
e.jsx("p", {
|
||||
className:
|
||||
"text-[var(--color-content-default-secondary)]",
|
||||
children:
|
||||
"This is example content to show how the home header integrates with home page content.",
|
||||
}),
|
||||
],
|
||||
},
|
||||
t,
|
||||
),
|
||||
),
|
||||
}),
|
||||
],
|
||||
}),
|
||||
}),
|
||||
],
|
||||
}),
|
||||
parameters: {
|
||||
docs: {
|
||||
description: {
|
||||
story:
|
||||
"The home header integrated into a full home page layout with gradient background to show the transparent header effect.",
|
||||
},
|
||||
},
|
||||
},
|
||||
};
|
||||
i.parameters = {
|
||||
...i.parameters,
|
||||
docs: {
|
||||
...i.parameters?.docs,
|
||||
source: {
|
||||
originalSource: `{
|
||||
args: {},
|
||||
parameters: {
|
||||
docs: {
|
||||
description: {
|
||||
story: "Use the Viewport toolbar to see how the home header adapts to different screen sizes. The header has a transparent background and uses HeaderTab for the left section."
|
||||
}
|
||||
}
|
||||
}
|
||||
}`,
|
||||
...i.parameters?.docs?.source,
|
||||
},
|
||||
},
|
||||
};
|
||||
c.parameters = {
|
||||
...c.parameters,
|
||||
docs: {
|
||||
...c.parameters?.docs,
|
||||
source: {
|
||||
originalSource: `{
|
||||
args: {},
|
||||
render: () => <div className="min-h-screen bg-gradient-to-b from-[var(--color-surface-default-primary)] to-[var(--color-surface-default-secondary)]">
|
||||
<HomeHeader />
|
||||
<main className="p-8">
|
||||
<div className="max-w-4xl mx-auto text-center">
|
||||
<h1 className="text-4xl font-bold text-white mb-4">
|
||||
Welcome to CommunityRule
|
||||
</h1>
|
||||
<p className="text-xl text-[var(--color-content-default-secondary)] mb-8">
|
||||
This demonstrates how the home header looks in a realistic home page
|
||||
context. The header maintains its transparent background and
|
||||
responsive behavior.
|
||||
</p>
|
||||
<div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
|
||||
{[1, 2, 3].map(i => <div key={i} className="bg-[var(--color-surface-default-secondary)] p-6 rounded-lg border border-[var(--border-color-default-tertiary)]">
|
||||
<h3 className="text-white font-semibold mb-3">Feature {i}</h3>
|
||||
<p className="text-[var(--color-content-default-secondary)]">
|
||||
This is example content to show how the home header integrates
|
||||
with home page content.
|
||||
</p>
|
||||
</div>)}
|
||||
</div>
|
||||
</div>
|
||||
</main>
|
||||
</div>,
|
||||
parameters: {
|
||||
docs: {
|
||||
description: {
|
||||
story: "The home header integrated into a full home page layout with gradient background to show the transparent header effect."
|
||||
}
|
||||
}
|
||||
}
|
||||
}`,
|
||||
...c.parameters?.docs?.source,
|
||||
},
|
||||
},
|
||||
};
|
||||
const q = ["Default", "InHomePageContext"];
|
||||
export {
|
||||
i as Default,
|
||||
c as InHomePageContext,
|
||||
q as __namedExportsOrder,
|
||||
U as default,
|
||||
};
|
||||
@@ -1,144 +0,0 @@
|
||||
import { j as i } from "./jsx-runtime-C_nHp4yK.js";
|
||||
function p({ size: e = "default", showText: o = !0 }) {
|
||||
const a = {
|
||||
default: {
|
||||
containerHeight: "h-[41px]",
|
||||
gap: "gap-[8.28px]",
|
||||
textSize: "text-[21.97px]",
|
||||
lineHeight: "leading-[27.05px]",
|
||||
iconSize: "w-[27.05px] h-[27.05px]",
|
||||
},
|
||||
homeHeaderXsmall: {
|
||||
containerHeight: "h-[14.11px]",
|
||||
gap: "gap-[4.21px]",
|
||||
textSize: "text-[11.57px]",
|
||||
lineHeight: "leading-[14.24px]",
|
||||
iconSize: "w-[14.11px] h-[14.11px]",
|
||||
},
|
||||
homeHeaderSm: {
|
||||
containerHeight: "h-[21.06px]",
|
||||
gap: "gap-[3.19px]",
|
||||
textSize: "text-[11.69px]",
|
||||
lineHeight: "leading-[14.39px]",
|
||||
iconSize: "w-[14.39px] h-[14.39px]",
|
||||
},
|
||||
homeHeaderMd: {
|
||||
containerHeight: "h-[32.24px]",
|
||||
gap: "gap-[4.89px]",
|
||||
textSize: "text-[17.89px]",
|
||||
lineHeight: "leading-[22.02px]",
|
||||
iconSize: "w-[22.02px] h-[22.02px]",
|
||||
},
|
||||
homeHeaderLg: {
|
||||
containerHeight: "h-[28px]",
|
||||
gap: "gap-[6.55px]",
|
||||
textSize: "text-[21.97px]",
|
||||
lineHeight: "leading-[27.05px]",
|
||||
iconSize: "w-[27.05px] h-[27.05px]",
|
||||
},
|
||||
homeHeaderXl: {
|
||||
containerHeight: "h-[36px]",
|
||||
gap: "gap-[8.64px]",
|
||||
textSize: "text-[29.01px]",
|
||||
lineHeight: "leading-[35.7px]",
|
||||
iconSize: "w-[35.7px] h-[35.7px]",
|
||||
},
|
||||
header: {
|
||||
containerHeight: "h-[20.85px]",
|
||||
gap: "gap-[4.21px]",
|
||||
textSize: "text-[11.57px]",
|
||||
lineHeight: "leading-[14.24px]",
|
||||
iconSize: "w-[14.24px] h-[14.24px]",
|
||||
},
|
||||
headerMd: {
|
||||
containerHeight: "h-[17.91px]",
|
||||
gap: "gap-[6.51px]",
|
||||
textSize: "text-[17.89px]",
|
||||
lineHeight: "leading-[22.02px]",
|
||||
iconSize: "w-[22.02px] h-[22.02px]",
|
||||
},
|
||||
headerLg: {
|
||||
containerHeight: "h-[28px]",
|
||||
gap: "gap-[6.55px]",
|
||||
textSize: "text-[21.97px]",
|
||||
lineHeight: "leading-[27.05px]",
|
||||
iconSize: "w-[27.05px] h-[27.05px]",
|
||||
},
|
||||
headerXl: {
|
||||
containerHeight: "h-[34px]",
|
||||
gap: "gap-[8.19px]",
|
||||
textSize: "text-[27.47px]",
|
||||
lineHeight: "leading-[33.81px]",
|
||||
iconSize: "w-[33.81px] h-[33.81px]",
|
||||
},
|
||||
footer: {
|
||||
containerHeight: "h-[calc(40px*1.37)]",
|
||||
gap: "gap-[calc(8px*1.37)]",
|
||||
textSize: "text-[calc(21.97px*1.37)]",
|
||||
lineHeight: "leading-[calc(27.05px*1.37)]",
|
||||
iconSize: "w-[calc(27.05px*1.37)] h-[calc(27.05px*1.37)]",
|
||||
},
|
||||
footerLg: {
|
||||
containerHeight: "h-[calc(40px*2.05)]",
|
||||
gap: "gap-[calc(8px*2.05)]",
|
||||
textSize: "text-[calc(21.97px*2.05)]",
|
||||
lineHeight: "leading-[calc(27.05px*2.05)]",
|
||||
iconSize: "w-[calc(27.05px*2.05)] h-[calc(27.05px*2.05)]",
|
||||
},
|
||||
},
|
||||
t =
|
||||
e === "homeHeaderXsmall"
|
||||
? a.homeHeaderXsmall
|
||||
: e === "homeHeaderSm"
|
||||
? a.homeHeaderSm
|
||||
: e === "homeHeaderMd"
|
||||
? a.homeHeaderMd
|
||||
: e === "homeHeaderLg"
|
||||
? a.homeHeaderLg
|
||||
: e === "homeHeaderXl"
|
||||
? a.homeHeaderXl
|
||||
: e === "header"
|
||||
? a.header
|
||||
: e === "headerMd"
|
||||
? a.headerMd
|
||||
: e === "headerLg"
|
||||
? a.headerLg
|
||||
: e === "headerXl"
|
||||
? a.headerXl
|
||||
: e === "footer"
|
||||
? a.footer
|
||||
: e === "footerLg"
|
||||
? a.footerLg
|
||||
: a.default;
|
||||
return i.jsxs("div", {
|
||||
className: `flex items-center ${t.containerHeight} ${o ? t.gap : ""} transition-all duration-200 ease-in-out hover:scale-[1.02] cursor-pointer`,
|
||||
role: "banner",
|
||||
"aria-label": "CommunityRule Logo",
|
||||
children: [
|
||||
o &&
|
||||
i.jsx("div", {
|
||||
className: `font-['Bricolage_Grotesque'] ${e === "homeHeaderXsmall" || e === "homeHeaderSm" || e === "homeHeaderMd" || e === "homeHeaderLg" || e === "homeHeaderXl" ? "text-[var(--color-content-inverse-primary)]" : "text-[var(--color-content-default-primary)]"} ${t.textSize} ${t.lineHeight} font-normal tracking-[0px] transition-colors duration-200`,
|
||||
"aria-label": "CommunityRule",
|
||||
children: "CommunityRule",
|
||||
}),
|
||||
i.jsx("img", {
|
||||
src: "assets/Logo.svg",
|
||||
alt: "CommunityRule Logo Icon",
|
||||
width: 27.05,
|
||||
height: 27.05,
|
||||
className: `flex-shrink-0 ${t.iconSize} transition-all duration-200 ${e === "homeHeaderXsmall" || e === "homeHeaderSm" || e === "homeHeaderMd" || e === "homeHeaderLg" || e === "homeHeaderXl" ? "filter brightness-0" : ""}`,
|
||||
"aria-hidden": "true",
|
||||
}),
|
||||
],
|
||||
});
|
||||
}
|
||||
p.__docgenInfo = {
|
||||
description: "",
|
||||
methods: [],
|
||||
displayName: "Logo",
|
||||
props: {
|
||||
size: { defaultValue: { value: '"default"', computed: !1 }, required: !1 },
|
||||
showText: { defaultValue: { value: "true", computed: !1 }, required: !1 },
|
||||
},
|
||||
};
|
||||
export { p as L };
|
||||
@@ -1,672 +0,0 @@
|
||||
import { j as e } from "./jsx-runtime-C_nHp4yK.js";
|
||||
import { L as s } from "./Logo-DM7O8ATg.js";
|
||||
import "./iframe-D_aMTKb2.js";
|
||||
import "./preload-helper-DIZFD4sK.js";
|
||||
const h = {
|
||||
title: "Components/Logo",
|
||||
component: s,
|
||||
parameters: {
|
||||
layout: "centered",
|
||||
docs: {
|
||||
description: {
|
||||
component:
|
||||
"The CommunityRule logo component with multiple size variants for different contexts (header, footer, home header). Can display with or without text and adapts colors based on context.",
|
||||
},
|
||||
},
|
||||
},
|
||||
argTypes: {
|
||||
size: {
|
||||
control: { type: "select" },
|
||||
options: [
|
||||
"default",
|
||||
"homeHeaderXsmall",
|
||||
"homeHeaderSm",
|
||||
"homeHeaderMd",
|
||||
"homeHeaderLg",
|
||||
"homeHeaderXl",
|
||||
"header",
|
||||
"headerMd",
|
||||
"headerLg",
|
||||
"headerXl",
|
||||
"footer",
|
||||
"footerLg",
|
||||
],
|
||||
description: "The size variant of the logo",
|
||||
},
|
||||
showText: {
|
||||
control: { type: "boolean" },
|
||||
description: "Whether to show the text portion of the logo",
|
||||
},
|
||||
},
|
||||
tags: ["autodocs"],
|
||||
},
|
||||
t = { args: { size: "default", showText: !0 } },
|
||||
n = {
|
||||
args: { showText: !0 },
|
||||
render: (a) =>
|
||||
e.jsxs("div", {
|
||||
className: "space-y-6",
|
||||
children: [
|
||||
e.jsxs("div", {
|
||||
children: [
|
||||
e.jsx("h3", {
|
||||
className: "text-white font-semibold mb-3",
|
||||
children: "Default Sizes",
|
||||
}),
|
||||
e.jsxs("div", {
|
||||
className: "space-x-4",
|
||||
children: [
|
||||
e.jsx(s, { ...a, size: "default" }),
|
||||
e.jsx(s, { ...a, size: "header" }),
|
||||
e.jsx(s, { ...a, size: "footer" }),
|
||||
],
|
||||
}),
|
||||
],
|
||||
}),
|
||||
e.jsxs("div", {
|
||||
children: [
|
||||
e.jsx("h3", {
|
||||
className: "text-white font-semibold mb-3",
|
||||
children: "Header Sizes",
|
||||
}),
|
||||
e.jsxs("div", {
|
||||
className: "space-x-4",
|
||||
children: [
|
||||
e.jsx(s, { ...a, size: "header" }),
|
||||
e.jsx(s, { ...a, size: "headerMd" }),
|
||||
e.jsx(s, { ...a, size: "headerLg" }),
|
||||
e.jsx(s, { ...a, size: "headerXl" }),
|
||||
],
|
||||
}),
|
||||
],
|
||||
}),
|
||||
e.jsxs("div", {
|
||||
children: [
|
||||
e.jsx("h3", {
|
||||
className: "text-white font-semibold mb-3",
|
||||
children: "Home Header Sizes",
|
||||
}),
|
||||
e.jsxs("div", {
|
||||
className: "space-x-4",
|
||||
children: [
|
||||
e.jsx(s, { ...a, size: "homeHeaderXsmall" }),
|
||||
e.jsx(s, { ...a, size: "homeHeaderSm" }),
|
||||
e.jsx(s, { ...a, size: "homeHeaderMd" }),
|
||||
e.jsx(s, { ...a, size: "homeHeaderLg" }),
|
||||
e.jsx(s, { ...a, size: "homeHeaderXl" }),
|
||||
],
|
||||
}),
|
||||
],
|
||||
}),
|
||||
e.jsxs("div", {
|
||||
children: [
|
||||
e.jsx("h3", {
|
||||
className: "text-white font-semibold mb-3",
|
||||
children: "Footer Sizes",
|
||||
}),
|
||||
e.jsxs("div", {
|
||||
className: "space-x-4",
|
||||
children: [
|
||||
e.jsx(s, { ...a, size: "footer" }),
|
||||
e.jsx(s, { ...a, size: "footerLg" }),
|
||||
],
|
||||
}),
|
||||
],
|
||||
}),
|
||||
],
|
||||
}),
|
||||
parameters: {
|
||||
docs: {
|
||||
description: {
|
||||
story:
|
||||
"Different size variants available for the logo component across different contexts.",
|
||||
},
|
||||
},
|
||||
},
|
||||
},
|
||||
r = {
|
||||
args: { size: "default", showText: !1 },
|
||||
render: (a) =>
|
||||
e.jsxs("div", {
|
||||
className: "space-y-6",
|
||||
children: [
|
||||
e.jsxs("div", {
|
||||
children: [
|
||||
e.jsx("h3", {
|
||||
className: "text-white font-semibold mb-3",
|
||||
children: "Icon Only - Default Sizes",
|
||||
}),
|
||||
e.jsxs("div", {
|
||||
className: "space-x-4",
|
||||
children: [
|
||||
e.jsx(s, { ...a, size: "default" }),
|
||||
e.jsx(s, { ...a, size: "header" }),
|
||||
e.jsx(s, { ...a, size: "footer" }),
|
||||
],
|
||||
}),
|
||||
],
|
||||
}),
|
||||
e.jsxs("div", {
|
||||
children: [
|
||||
e.jsx("h3", {
|
||||
className: "text-white font-semibold mb-3",
|
||||
children: "Icon Only - Header Sizes",
|
||||
}),
|
||||
e.jsxs("div", {
|
||||
className: "space-x-4",
|
||||
children: [
|
||||
e.jsx(s, { ...a, size: "header" }),
|
||||
e.jsx(s, { ...a, size: "headerMd" }),
|
||||
e.jsx(s, { ...a, size: "headerLg" }),
|
||||
e.jsx(s, { ...a, size: "headerXl" }),
|
||||
],
|
||||
}),
|
||||
],
|
||||
}),
|
||||
e.jsxs("div", {
|
||||
children: [
|
||||
e.jsx("h3", {
|
||||
className: "text-white font-semibold mb-3",
|
||||
children: "Icon Only - Home Header Sizes",
|
||||
}),
|
||||
e.jsxs("div", {
|
||||
className: "space-x-4",
|
||||
children: [
|
||||
e.jsx(s, { ...a, size: "homeHeaderXsmall" }),
|
||||
e.jsx(s, { ...a, size: "homeHeaderSm" }),
|
||||
e.jsx(s, { ...a, size: "homeHeaderMd" }),
|
||||
e.jsx(s, { ...a, size: "homeHeaderLg" }),
|
||||
e.jsx(s, { ...a, size: "homeHeaderXl" }),
|
||||
],
|
||||
}),
|
||||
],
|
||||
}),
|
||||
],
|
||||
}),
|
||||
parameters: {
|
||||
docs: {
|
||||
description: {
|
||||
story:
|
||||
"Logo variants with only the icon, no text. Useful for compact spaces.",
|
||||
},
|
||||
},
|
||||
},
|
||||
},
|
||||
i = {
|
||||
args: {},
|
||||
render: () =>
|
||||
e.jsx("div", {
|
||||
className:
|
||||
"min-h-screen bg-gradient-to-b from-[var(--color-surface-default-primary)] to-[var(--color-surface-default-secondary)] p-8",
|
||||
children: e.jsxs("div", {
|
||||
className: "max-w-4xl mx-auto",
|
||||
children: [
|
||||
e.jsx("h2", {
|
||||
className: "text-white font-semibold mb-6",
|
||||
children: "Home Header Context (White Text)",
|
||||
}),
|
||||
e.jsxs("div", {
|
||||
className: "space-y-4",
|
||||
children: [
|
||||
e.jsxs("div", {
|
||||
className: "flex items-center space-x-4",
|
||||
children: [
|
||||
e.jsx("span", {
|
||||
className: "text-white text-sm w-24",
|
||||
children: "XSmall:",
|
||||
}),
|
||||
e.jsx(s, { size: "homeHeaderXsmall" }),
|
||||
],
|
||||
}),
|
||||
e.jsxs("div", {
|
||||
className: "flex items-center space-x-4",
|
||||
children: [
|
||||
e.jsx("span", {
|
||||
className: "text-white text-sm w-24",
|
||||
children: "Small:",
|
||||
}),
|
||||
e.jsx(s, { size: "homeHeaderSm" }),
|
||||
],
|
||||
}),
|
||||
e.jsxs("div", {
|
||||
className: "flex items-center space-x-4",
|
||||
children: [
|
||||
e.jsx("span", {
|
||||
className: "text-white text-sm w-24",
|
||||
children: "Medium:",
|
||||
}),
|
||||
e.jsx(s, { size: "homeHeaderMd" }),
|
||||
],
|
||||
}),
|
||||
e.jsxs("div", {
|
||||
className: "flex items-center space-x-4",
|
||||
children: [
|
||||
e.jsx("span", {
|
||||
className: "text-white text-sm w-24",
|
||||
children: "Large:",
|
||||
}),
|
||||
e.jsx(s, { size: "homeHeaderLg" }),
|
||||
],
|
||||
}),
|
||||
e.jsxs("div", {
|
||||
className: "flex items-center space-x-4",
|
||||
children: [
|
||||
e.jsx("span", {
|
||||
className: "text-white text-sm w-24",
|
||||
children: "XLarge:",
|
||||
}),
|
||||
e.jsx(s, { size: "homeHeaderXl" }),
|
||||
],
|
||||
}),
|
||||
],
|
||||
}),
|
||||
],
|
||||
}),
|
||||
}),
|
||||
parameters: {
|
||||
docs: {
|
||||
description: {
|
||||
story:
|
||||
"Home header context showing white text variants. These are used on dark/transparent backgrounds.",
|
||||
},
|
||||
},
|
||||
},
|
||||
},
|
||||
o = {
|
||||
args: {},
|
||||
render: () =>
|
||||
e.jsx("div", {
|
||||
className: "min-h-screen bg-[var(--color-surface-default-primary)] p-8",
|
||||
children: e.jsxs("div", {
|
||||
className: "max-w-4xl mx-auto",
|
||||
children: [
|
||||
e.jsx("h2", {
|
||||
className: "text-white font-semibold mb-6",
|
||||
children: "Header Context (Dark Text)",
|
||||
}),
|
||||
e.jsxs("div", {
|
||||
className: "space-y-4",
|
||||
children: [
|
||||
e.jsxs("div", {
|
||||
className: "flex items-center space-x-4",
|
||||
children: [
|
||||
e.jsx("span", {
|
||||
className: "text-white text-sm w-24",
|
||||
children: "Default:",
|
||||
}),
|
||||
e.jsx(s, { size: "header" }),
|
||||
],
|
||||
}),
|
||||
e.jsxs("div", {
|
||||
className: "flex items-center space-x-4",
|
||||
children: [
|
||||
e.jsx("span", {
|
||||
className: "text-white text-sm w-24",
|
||||
children: "Medium:",
|
||||
}),
|
||||
e.jsx(s, { size: "headerMd" }),
|
||||
],
|
||||
}),
|
||||
e.jsxs("div", {
|
||||
className: "flex items-center space-x-4",
|
||||
children: [
|
||||
e.jsx("span", {
|
||||
className: "text-white text-sm w-24",
|
||||
children: "Large:",
|
||||
}),
|
||||
e.jsx(s, { size: "headerLg" }),
|
||||
],
|
||||
}),
|
||||
e.jsxs("div", {
|
||||
className: "flex items-center space-x-4",
|
||||
children: [
|
||||
e.jsx("span", {
|
||||
className: "text-white text-sm w-24",
|
||||
children: "XLarge:",
|
||||
}),
|
||||
e.jsx(s, { size: "headerXl" }),
|
||||
],
|
||||
}),
|
||||
],
|
||||
}),
|
||||
],
|
||||
}),
|
||||
}),
|
||||
parameters: {
|
||||
docs: {
|
||||
description: {
|
||||
story:
|
||||
"Header context showing dark text variants. These are used on light backgrounds.",
|
||||
},
|
||||
},
|
||||
},
|
||||
},
|
||||
d = {
|
||||
args: {},
|
||||
render: () =>
|
||||
e.jsx("div", {
|
||||
className: "min-h-screen bg-[var(--color-surface-default-primary)] p-8",
|
||||
children: e.jsxs("div", {
|
||||
className: "max-w-4xl mx-auto",
|
||||
children: [
|
||||
e.jsx("h2", {
|
||||
className: "text-white font-semibold mb-6",
|
||||
children: "Footer Context (Larger Sizes)",
|
||||
}),
|
||||
e.jsxs("div", {
|
||||
className: "space-y-4",
|
||||
children: [
|
||||
e.jsxs("div", {
|
||||
className: "flex items-center space-x-4",
|
||||
children: [
|
||||
e.jsx("span", {
|
||||
className: "text-white text-sm w-24",
|
||||
children: "Default:",
|
||||
}),
|
||||
e.jsx(s, { size: "footer" }),
|
||||
],
|
||||
}),
|
||||
e.jsxs("div", {
|
||||
className: "flex items-center space-x-4",
|
||||
children: [
|
||||
e.jsx("span", {
|
||||
className: "text-white text-sm w-24",
|
||||
children: "Large:",
|
||||
}),
|
||||
e.jsx(s, { size: "footerLg" }),
|
||||
],
|
||||
}),
|
||||
],
|
||||
}),
|
||||
],
|
||||
}),
|
||||
}),
|
||||
parameters: {
|
||||
docs: {
|
||||
description: {
|
||||
story:
|
||||
"Footer context showing larger size variants for footer placement.",
|
||||
},
|
||||
},
|
||||
},
|
||||
};
|
||||
t.parameters = {
|
||||
...t.parameters,
|
||||
docs: {
|
||||
...t.parameters?.docs,
|
||||
source: {
|
||||
originalSource: `{
|
||||
args: {
|
||||
size: "default",
|
||||
showText: true
|
||||
}
|
||||
}`,
|
||||
...t.parameters?.docs?.source,
|
||||
},
|
||||
},
|
||||
};
|
||||
n.parameters = {
|
||||
...n.parameters,
|
||||
docs: {
|
||||
...n.parameters?.docs,
|
||||
source: {
|
||||
originalSource: `{
|
||||
args: {
|
||||
showText: true
|
||||
},
|
||||
render: args => <div className="space-y-6">
|
||||
<div>
|
||||
<h3 className="text-white font-semibold mb-3">Default Sizes</h3>
|
||||
<div className="space-x-4">
|
||||
<Logo {...args} size="default" />
|
||||
<Logo {...args} size="header" />
|
||||
<Logo {...args} size="footer" />
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<h3 className="text-white font-semibold mb-3">Header Sizes</h3>
|
||||
<div className="space-x-4">
|
||||
<Logo {...args} size="header" />
|
||||
<Logo {...args} size="headerMd" />
|
||||
<Logo {...args} size="headerLg" />
|
||||
<Logo {...args} size="headerXl" />
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<h3 className="text-white font-semibold mb-3">Home Header Sizes</h3>
|
||||
<div className="space-x-4">
|
||||
<Logo {...args} size="homeHeaderXsmall" />
|
||||
<Logo {...args} size="homeHeaderSm" />
|
||||
<Logo {...args} size="homeHeaderMd" />
|
||||
<Logo {...args} size="homeHeaderLg" />
|
||||
<Logo {...args} size="homeHeaderXl" />
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<h3 className="text-white font-semibold mb-3">Footer Sizes</h3>
|
||||
<div className="space-x-4">
|
||||
<Logo {...args} size="footer" />
|
||||
<Logo {...args} size="footerLg" />
|
||||
</div>
|
||||
</div>
|
||||
</div>,
|
||||
parameters: {
|
||||
docs: {
|
||||
description: {
|
||||
story: "Different size variants available for the logo component across different contexts."
|
||||
}
|
||||
}
|
||||
}
|
||||
}`,
|
||||
...n.parameters?.docs?.source,
|
||||
},
|
||||
},
|
||||
};
|
||||
r.parameters = {
|
||||
...r.parameters,
|
||||
docs: {
|
||||
...r.parameters?.docs,
|
||||
source: {
|
||||
originalSource: `{
|
||||
args: {
|
||||
size: "default",
|
||||
showText: false
|
||||
},
|
||||
render: args => <div className="space-y-6">
|
||||
<div>
|
||||
<h3 className="text-white font-semibold mb-3">
|
||||
Icon Only - Default Sizes
|
||||
</h3>
|
||||
<div className="space-x-4">
|
||||
<Logo {...args} size="default" />
|
||||
<Logo {...args} size="header" />
|
||||
<Logo {...args} size="footer" />
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<h3 className="text-white font-semibold mb-3">
|
||||
Icon Only - Header Sizes
|
||||
</h3>
|
||||
<div className="space-x-4">
|
||||
<Logo {...args} size="header" />
|
||||
<Logo {...args} size="headerMd" />
|
||||
<Logo {...args} size="headerLg" />
|
||||
<Logo {...args} size="headerXl" />
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<h3 className="text-white font-semibold mb-3">
|
||||
Icon Only - Home Header Sizes
|
||||
</h3>
|
||||
<div className="space-x-4">
|
||||
<Logo {...args} size="homeHeaderXsmall" />
|
||||
<Logo {...args} size="homeHeaderSm" />
|
||||
<Logo {...args} size="homeHeaderMd" />
|
||||
<Logo {...args} size="homeHeaderLg" />
|
||||
<Logo {...args} size="homeHeaderXl" />
|
||||
</div>
|
||||
</div>
|
||||
</div>,
|
||||
parameters: {
|
||||
docs: {
|
||||
description: {
|
||||
story: "Logo variants with only the icon, no text. Useful for compact spaces."
|
||||
}
|
||||
}
|
||||
}
|
||||
}`,
|
||||
...r.parameters?.docs?.source,
|
||||
},
|
||||
},
|
||||
};
|
||||
i.parameters = {
|
||||
...i.parameters,
|
||||
docs: {
|
||||
...i.parameters?.docs,
|
||||
source: {
|
||||
originalSource: `{
|
||||
args: {},
|
||||
render: () => <div className="min-h-screen bg-gradient-to-b from-[var(--color-surface-default-primary)] to-[var(--color-surface-default-secondary)] p-8">
|
||||
<div className="max-w-4xl mx-auto">
|
||||
<h2 className="text-white font-semibold mb-6">
|
||||
Home Header Context (White Text)
|
||||
</h2>
|
||||
<div className="space-y-4">
|
||||
<div className="flex items-center space-x-4">
|
||||
<span className="text-white text-sm w-24">XSmall:</span>
|
||||
<Logo size="homeHeaderXsmall" />
|
||||
</div>
|
||||
<div className="flex items-center space-x-4">
|
||||
<span className="text-white text-sm w-24">Small:</span>
|
||||
<Logo size="homeHeaderSm" />
|
||||
</div>
|
||||
<div className="flex items-center space-x-4">
|
||||
<span className="text-white text-sm w-24">Medium:</span>
|
||||
<Logo size="homeHeaderMd" />
|
||||
</div>
|
||||
<div className="flex items-center space-x-4">
|
||||
<span className="text-white text-sm w-24">Large:</span>
|
||||
<Logo size="homeHeaderLg" />
|
||||
</div>
|
||||
<div className="flex items-center space-x-4">
|
||||
<span className="text-white text-sm w-24">XLarge:</span>
|
||||
<Logo size="homeHeaderXl" />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>,
|
||||
parameters: {
|
||||
docs: {
|
||||
description: {
|
||||
story: "Home header context showing white text variants. These are used on dark/transparent backgrounds."
|
||||
}
|
||||
}
|
||||
}
|
||||
}`,
|
||||
...i.parameters?.docs?.source,
|
||||
},
|
||||
},
|
||||
};
|
||||
o.parameters = {
|
||||
...o.parameters,
|
||||
docs: {
|
||||
...o.parameters?.docs,
|
||||
source: {
|
||||
originalSource: `{
|
||||
args: {},
|
||||
render: () => <div className="min-h-screen bg-[var(--color-surface-default-primary)] p-8">
|
||||
<div className="max-w-4xl mx-auto">
|
||||
<h2 className="text-white font-semibold mb-6">
|
||||
Header Context (Dark Text)
|
||||
</h2>
|
||||
<div className="space-y-4">
|
||||
<div className="flex items-center space-x-4">
|
||||
<span className="text-white text-sm w-24">Default:</span>
|
||||
<Logo size="header" />
|
||||
</div>
|
||||
<div className="flex items-center space-x-4">
|
||||
<span className="text-white text-sm w-24">Medium:</span>
|
||||
<Logo size="headerMd" />
|
||||
</div>
|
||||
<div className="flex items-center space-x-4">
|
||||
<span className="text-white text-sm w-24">Large:</span>
|
||||
<Logo size="headerLg" />
|
||||
</div>
|
||||
<div className="flex items-center space-x-4">
|
||||
<span className="text-white text-sm w-24">XLarge:</span>
|
||||
<Logo size="headerXl" />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>,
|
||||
parameters: {
|
||||
docs: {
|
||||
description: {
|
||||
story: "Header context showing dark text variants. These are used on light backgrounds."
|
||||
}
|
||||
}
|
||||
}
|
||||
}`,
|
||||
...o.parameters?.docs?.source,
|
||||
},
|
||||
},
|
||||
};
|
||||
d.parameters = {
|
||||
...d.parameters,
|
||||
docs: {
|
||||
...d.parameters?.docs,
|
||||
source: {
|
||||
originalSource: `{
|
||||
args: {},
|
||||
render: () => <div className="min-h-screen bg-[var(--color-surface-default-primary)] p-8">
|
||||
<div className="max-w-4xl mx-auto">
|
||||
<h2 className="text-white font-semibold mb-6">
|
||||
Footer Context (Larger Sizes)
|
||||
</h2>
|
||||
<div className="space-y-4">
|
||||
<div className="flex items-center space-x-4">
|
||||
<span className="text-white text-sm w-24">Default:</span>
|
||||
<Logo size="footer" />
|
||||
</div>
|
||||
<div className="flex items-center space-x-4">
|
||||
<span className="text-white text-sm w-24">Large:</span>
|
||||
<Logo size="footerLg" />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>,
|
||||
parameters: {
|
||||
docs: {
|
||||
description: {
|
||||
story: "Footer context showing larger size variants for footer placement."
|
||||
}
|
||||
}
|
||||
}
|
||||
}`,
|
||||
...d.parameters?.docs?.source,
|
||||
},
|
||||
},
|
||||
};
|
||||
const p = [
|
||||
"Default",
|
||||
"Sizes",
|
||||
"IconOnly",
|
||||
"HomeHeaderContext",
|
||||
"HeaderContext",
|
||||
"FooterContext",
|
||||
];
|
||||
export {
|
||||
t as Default,
|
||||
d as FooterContext,
|
||||
o as HeaderContext,
|
||||
i as HomeHeaderContext,
|
||||
r as IconOnly,
|
||||
n as Sizes,
|
||||
p as __namedExportsOrder,
|
||||
h as default,
|
||||
};
|
||||
@@ -1,3 +0,0 @@
|
||||
<svg width="28" height="28" viewBox="0 0 28 28" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<path d="M27.5948 13.9998L0.549194 0.477051L7.31736 13.9998L0.549194 27.5226L27.5948 13.9998ZM14.0855 11.1905C14.6377 11.1938 15.1766 11.3603 15.6343 11.6689C16.092 11.9776 16.4481 12.4146 16.6577 12.925C16.8673 13.4353 16.9211 13.9962 16.8123 14.5371C16.7036 15.0779 16.437 15.5746 16.0463 15.9644C15.6556 16.3543 15.1582 16.6199 14.6166 16.728C14.0751 16.836 13.5137 16.7816 13.0031 16.5715C12.4924 16.3615 12.0554 16.0053 11.747 15.5477C11.4386 15.09 11.2726 14.5515 11.27 13.9998C11.2682 13.6301 11.3398 13.2637 11.4807 12.9218C11.6216 12.58 11.829 12.2694 12.0908 12.0081C12.3527 11.7468 12.6638 11.54 13.0062 11.3997C13.3486 11.2594 13.7154 11.1882 14.0855 11.1905Z" fill="#FFFDD2"/>
|
||||
</svg>
|
||||
|
Before Width: | Height: | Size: 793 B |
@@ -1,21 +0,0 @@
|
||||
import { j as p } from "./jsx-runtime-C_nHp4yK.js";
|
||||
function r({ children: a, className: e = "", size: s = "default", ...l }) {
|
||||
const c = `flex items-center ${{ xsmall: "px-[var(--spacing-scale-004)] py-[var(--spacing-scale-004)] gap-[var(--spacing-scale-001)] rounded-[4px]", default: "px-[var(--spacing-scale-004)] py-[var(--spacing-scale-004)] gap-[var(--spacing-scale-001)]", medium: "px-[var(--spacing-scale-004)] py-[var(--spacing-scale-004)] gap-[var(--spacing-scale-004)]", large: "px-[var(--spacing-scale-004)] py-[var(--spacing-scale-004)] gap-[var(--spacing-scale-012)]" }[s]} ${e}`;
|
||||
return p.jsx("nav", {
|
||||
className: c,
|
||||
role: "menubar",
|
||||
"aria-label": "Main navigation menu",
|
||||
...l,
|
||||
children: a,
|
||||
});
|
||||
}
|
||||
r.__docgenInfo = {
|
||||
description: "",
|
||||
methods: [],
|
||||
displayName: "MenuBar",
|
||||
props: {
|
||||
className: { defaultValue: { value: '""', computed: !1 }, required: !1 },
|
||||
size: { defaultValue: { value: '"default"', computed: !1 }, required: !1 },
|
||||
},
|
||||
};
|
||||
export { r as M };
|
||||
@@ -1,200 +0,0 @@
|
||||
import { j as e } from "./jsx-runtime-C_nHp4yK.js";
|
||||
import { M as s } from "./MenuBar-anMCqtJv.js";
|
||||
import { M as n } from "./MenuBarItem-Dp8NM2fx.js";
|
||||
import "./iframe-D_aMTKb2.js";
|
||||
import "./preload-helper-DIZFD4sK.js";
|
||||
const d = {
|
||||
title: "Components/MenuBar",
|
||||
component: s,
|
||||
parameters: {
|
||||
layout: "centered",
|
||||
docs: {
|
||||
description: {
|
||||
component:
|
||||
"A navigation menu bar container that groups MenuBarItem components together. Provides consistent spacing and layout for navigation menus with multiple size variants.",
|
||||
},
|
||||
},
|
||||
},
|
||||
argTypes: {
|
||||
size: {
|
||||
control: { type: "select" },
|
||||
options: ["xsmall", "default", "medium", "large"],
|
||||
description: "The size of the menu bar and its children",
|
||||
},
|
||||
className: {
|
||||
control: { type: "text" },
|
||||
description: "Additional CSS classes",
|
||||
},
|
||||
},
|
||||
tags: ["autodocs"],
|
||||
},
|
||||
a = {
|
||||
args: { size: "default" },
|
||||
render: (t) =>
|
||||
e.jsxs(s, {
|
||||
...t,
|
||||
children: [
|
||||
e.jsx(n, { size: "large", children: "Home" }),
|
||||
e.jsx(n, { size: "large", children: "About" }),
|
||||
e.jsx(n, { size: "large", children: "Contact" }),
|
||||
],
|
||||
}),
|
||||
},
|
||||
r = {
|
||||
args: {},
|
||||
render: () =>
|
||||
e.jsxs("div", {
|
||||
className: "space-y-6",
|
||||
children: [
|
||||
e.jsxs("div", {
|
||||
children: [
|
||||
e.jsx("h3", {
|
||||
className: "text-white font-semibold mb-3",
|
||||
children: "XSmall Size",
|
||||
}),
|
||||
e.jsxs(s, {
|
||||
size: "xsmall",
|
||||
children: [
|
||||
e.jsx(n, { size: "xsmall", children: "Home" }),
|
||||
e.jsx(n, { size: "xsmall", children: "About" }),
|
||||
e.jsx(n, { size: "xsmall", children: "Contact" }),
|
||||
],
|
||||
}),
|
||||
],
|
||||
}),
|
||||
e.jsxs("div", {
|
||||
children: [
|
||||
e.jsx("h3", {
|
||||
className: "text-white font-semibold mb-3",
|
||||
children: "Default Size",
|
||||
}),
|
||||
e.jsxs(s, {
|
||||
size: "default",
|
||||
children: [
|
||||
e.jsx(n, { size: "large", children: "Home" }),
|
||||
e.jsx(n, { size: "large", children: "About" }),
|
||||
e.jsx(n, { size: "large", children: "Contact" }),
|
||||
],
|
||||
}),
|
||||
],
|
||||
}),
|
||||
e.jsxs("div", {
|
||||
children: [
|
||||
e.jsx("h3", {
|
||||
className: "text-white font-semibold mb-3",
|
||||
children: "Medium Size",
|
||||
}),
|
||||
e.jsxs(s, {
|
||||
size: "medium",
|
||||
children: [
|
||||
e.jsx(n, { size: "large", children: "Home" }),
|
||||
e.jsx(n, { size: "large", children: "About" }),
|
||||
e.jsx(n, { size: "large", children: "Contact" }),
|
||||
],
|
||||
}),
|
||||
],
|
||||
}),
|
||||
e.jsxs("div", {
|
||||
children: [
|
||||
e.jsx("h3", {
|
||||
className: "text-white font-semibold mb-3",
|
||||
children: "Large Size",
|
||||
}),
|
||||
e.jsxs(s, {
|
||||
size: "large",
|
||||
children: [
|
||||
e.jsx(n, { size: "large", children: "Home" }),
|
||||
e.jsx(n, { size: "large", children: "About" }),
|
||||
e.jsx(n, { size: "large", children: "Contact" }),
|
||||
],
|
||||
}),
|
||||
],
|
||||
}),
|
||||
],
|
||||
}),
|
||||
parameters: {
|
||||
docs: {
|
||||
description: {
|
||||
story:
|
||||
"Different size variants of the menu bar with consistent spacing and layout.",
|
||||
},
|
||||
},
|
||||
},
|
||||
};
|
||||
a.parameters = {
|
||||
...a.parameters,
|
||||
docs: {
|
||||
...a.parameters?.docs,
|
||||
source: {
|
||||
originalSource: `{
|
||||
args: {
|
||||
size: "default"
|
||||
},
|
||||
render: args => <MenuBar {...args}>
|
||||
<MenuBarItem size="large">Home</MenuBarItem>
|
||||
<MenuBarItem size="large">About</MenuBarItem>
|
||||
<MenuBarItem size="large">Contact</MenuBarItem>
|
||||
</MenuBar>
|
||||
}`,
|
||||
...a.parameters?.docs?.source,
|
||||
},
|
||||
},
|
||||
};
|
||||
r.parameters = {
|
||||
...r.parameters,
|
||||
docs: {
|
||||
...r.parameters?.docs,
|
||||
source: {
|
||||
originalSource: `{
|
||||
args: {},
|
||||
render: () => <div className="space-y-6">
|
||||
<div>
|
||||
<h3 className="text-white font-semibold mb-3">XSmall Size</h3>
|
||||
<MenuBar size="xsmall">
|
||||
<MenuBarItem size="xsmall">Home</MenuBarItem>
|
||||
<MenuBarItem size="xsmall">About</MenuBarItem>
|
||||
<MenuBarItem size="xsmall">Contact</MenuBarItem>
|
||||
</MenuBar>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<h3 className="text-white font-semibold mb-3">Default Size</h3>
|
||||
<MenuBar size="default">
|
||||
<MenuBarItem size="large">Home</MenuBarItem>
|
||||
<MenuBarItem size="large">About</MenuBarItem>
|
||||
<MenuBarItem size="large">Contact</MenuBarItem>
|
||||
</MenuBar>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<h3 className="text-white font-semibold mb-3">Medium Size</h3>
|
||||
<MenuBar size="medium">
|
||||
<MenuBarItem size="large">Home</MenuBarItem>
|
||||
<MenuBarItem size="large">About</MenuBarItem>
|
||||
<MenuBarItem size="large">Contact</MenuBarItem>
|
||||
</MenuBar>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<h3 className="text-white font-semibold mb-3">Large Size</h3>
|
||||
<MenuBar size="large">
|
||||
<MenuBarItem size="large">Home</MenuBarItem>
|
||||
<MenuBarItem size="large">About</MenuBarItem>
|
||||
<MenuBarItem size="large">Contact</MenuBarItem>
|
||||
</MenuBar>
|
||||
</div>
|
||||
</div>,
|
||||
parameters: {
|
||||
docs: {
|
||||
description: {
|
||||
story: "Different size variants of the menu bar with consistent spacing and layout."
|
||||
}
|
||||
}
|
||||
}
|
||||
}`,
|
||||
...r.parameters?.docs?.source,
|
||||
},
|
||||
},
|
||||
};
|
||||
const u = ["Default", "Sizes"];
|
||||
export { a as Default, r as Sizes, u as __namedExportsOrder, d as default };
|
||||
@@ -1,123 +0,0 @@
|
||||
import { j as p } from "./jsx-runtime-C_nHp4yK.js";
|
||||
function U({
|
||||
href: v = "#",
|
||||
children: o,
|
||||
variant: d = "default",
|
||||
size: e = "default",
|
||||
className: f = "",
|
||||
disabled: a = !1,
|
||||
ariaLabel: l,
|
||||
...m
|
||||
}) {
|
||||
const x = {
|
||||
default:
|
||||
"bg-transparent text-[var(--color-content-default-brand-primary)] hover:bg-[var(--color-surface-default-tertiary)] hover:text-[var(--color-content-default-brand-primary)] hover:scale-[1.02] active:bg-transparent active:text-[var(--color-content-default-brand-primary)] active:scale-[0.98] disabled:bg-[var(--color-surface-default-tertiary)] disabled:text-[var(--color-content-default-tertiary)] disabled:opacity-50 disabled:cursor-not-allowed disabled:hover:scale-100 disabled:active:scale-100",
|
||||
home: "bg-transparent text-[var(--color-content-inverse-primary)] hover:bg-[var(--color-content-default-brand-accent)] hover:text-[var(--color-content-inverse-primary)] hover:scale-[1.02] active:bg-transparent active:text-[var(--color-content-inverse-primary)] active:scale-[0.98] disabled:bg-[var(--color-surface-default-tertiary)] disabled:text-[var(--color-content-default-tertiary)] disabled:opacity-50 disabled:cursor-not-allowed disabled:hover:scale-100 disabled:active:scale-100",
|
||||
},
|
||||
g = {
|
||||
xsmall:
|
||||
"active:outline-1 active:outline-[var(--color-content-default-primary)] focus:outline-1 focus:outline-[var(--color-content-default-primary)]",
|
||||
xsmallUseCases:
|
||||
"active:outline-1 active:outline-[var(--color-content-default-primary)] focus:outline-1 focus:outline-[var(--color-content-default-primary)]",
|
||||
default:
|
||||
"active:outline-1 active:outline-[var(--color-content-default-brand-primary)] focus:outline-1 focus:outline-[var(--color-content-default-brand-primary)]",
|
||||
homeMd:
|
||||
"active:outline-[1.5px] active:outline-[var(--color-content-default-brand-primary)] focus:outline-[1.5px] focus:outline-[var(--color-content-default-brand-primary)]",
|
||||
homeUseCases:
|
||||
"active:outline-[1.5px] active:outline-[var(--color-content-default-brand-primary)] focus:outline-[1.5px] focus:outline-[var(--color-content-default-brand-primary)]",
|
||||
large:
|
||||
"active:outline-[1.75px] active:outline-[var(--color-content-default-brand-primary)] focus:outline-[1.75px] focus:outline-[var(--color-content-default-brand-primary)]",
|
||||
largeUseCases:
|
||||
"active:outline-[1.75px] active:outline-[var(--color-content-default-brand-primary)] focus:outline-[1.75px] focus:outline-[var(--color-content-default-brand-primary)]",
|
||||
homeXlarge:
|
||||
"active:outline-[2px] active:outline-[var(--color-content-default-brand-primary)] focus:outline-[2px] focus:outline-[var(--color-content-default-brand-primary)]",
|
||||
xlarge:
|
||||
"active:outline-2 active:outline-[var(--color-content-default-brand-primary)] focus:outline-2 focus:outline-[var(--color-content-default-brand-primary)]",
|
||||
},
|
||||
y = {
|
||||
xsmall:
|
||||
"active:outline-1 active:outline-[var(--color-content-default-primary)] focus:outline-1 focus:outline-[var(--color-content-default-primary)]",
|
||||
xsmallUseCases:
|
||||
"active:outline-1 active:outline-[var(--color-content-default-primary)] focus:outline-1 focus:outline-[var(--color-content-default-primary)]",
|
||||
default:
|
||||
"active:outline-[1.5px] active:outline-[var(--color-content-default-primary)] focus:outline-[1.5px] focus:outline-[var(--color-content-default-primary)]",
|
||||
homeMd:
|
||||
"active:outline-[1.5px] active:outline-[var(--color-content-default-primary)] focus:outline-[1.5px] focus:outline-[var(--color-content-default-primary)]",
|
||||
homeUseCases:
|
||||
"active:outline-[1.5px] active:outline-[var(--color-content-default-primary)] focus:outline-[1.5px] focus:outline-[var(--color-content-default-primary)]",
|
||||
largeUseCases:
|
||||
"active:outline-[1.75px] active:outline-[var(--color-content-default-primary)] focus:outline-[1.75px] focus:outline-[var(--color-content-default-primary)]",
|
||||
large:
|
||||
"active:outline-[1.75px] active:outline-[var(--color-content-default-primary)] focus:outline-[1.75px] focus:outline-[var(--color-content-default-primary)]",
|
||||
homeXlarge:
|
||||
"active:outline-[2px] active:outline-[var(--color-content-default-primary)] focus:outline-[2px] focus:outline-[var(--color-content-default-primary)]",
|
||||
xlarge:
|
||||
"active:outline-2 active:outline-[var(--color-content-default-primary)] focus:outline-2 focus:outline-[var(--color-content-default-primary)]",
|
||||
},
|
||||
b = {
|
||||
default:
|
||||
"px-[var(--spacing-measures-spacing-016)] py-[var(--spacing-measures-spacing-016)] gap-[var(--spacing-scale-004)]",
|
||||
xsmall:
|
||||
"px-[var(--spacing-scale-004)] py-[var(--spacing-scale-002)] gap-[var(--spacing-scale-004)]",
|
||||
xsmallUseCases:
|
||||
"px-[var(--spacing-scale-002)] py-[var(--spacing-scale-002)] gap-[var(--spacing-scale-004)]",
|
||||
homeMd:
|
||||
"px-[var(--spacing-scale-008)] py-[var(--spacing-scale-008)] gap-[var(--spacing-scale-004)]",
|
||||
homeUseCases:
|
||||
"px-[var(--spacing-scale-002)] py-[var(--spacing-scale-008)] gap-[var(--spacing-scale-004)]",
|
||||
large:
|
||||
"px-[var(--spacing-scale-012)] py-[var(--spacing-scale-012)] gap-[var(--spacing-scale-004)] h-[44px]",
|
||||
largeUseCases:
|
||||
"px-[var(--spacing-scale-012)] py-[var(--spacing-scale-012)] gap-[var(--spacing-scale-004)] h-[44px]",
|
||||
homeXlarge:
|
||||
"px-[var(--spacing-scale-016)] py-[var(--spacing-scale-016)] gap-[var(--spacing-scale-004)] h-[44px]",
|
||||
xlarge:
|
||||
"px-[var(--spacing-scale-016)] py-[var(--spacing-scale-008)] gap-[var(--spacing-scale-004)] h-[44px]",
|
||||
},
|
||||
t = "font-['Inter'] text-[10px] leading-[12px] font-medium tracking-[0%]",
|
||||
n = "font-['Inter'] text-[12px] leading-[14px] font-medium tracking-[0%]",
|
||||
c = "font-['Inter'] text-[16px] leading-[20px] font-medium tracking-[0%]",
|
||||
i = "font-['Inter'] text-[24px] leading-[28px] font-normal tracking-[0%]",
|
||||
h = {
|
||||
default: t,
|
||||
xsmall: t,
|
||||
xsmallUseCases: t,
|
||||
home: t,
|
||||
homeMd: n,
|
||||
homeUseCases: n,
|
||||
large: c,
|
||||
largeUseCases: c,
|
||||
homeXlarge: i,
|
||||
xlarge: i,
|
||||
},
|
||||
C = `inline-flex items-center ${b[e]} rounded-[var(--radius-measures-radius-full)] ${h[e]} transition-all duration-200 ease-in-out cursor-pointer focus:scale-[1.02]`;
|
||||
let r = d;
|
||||
a && (r = "default");
|
||||
const s = `${C} ${x[r]} ${r === "home" ? y[e] : g[e]} ${f}`,
|
||||
u = {
|
||||
...(l && { "aria-label": l }),
|
||||
...(a && { "aria-disabled": "true" }),
|
||||
role: "menuitem",
|
||||
tabIndex: a ? -1 : 0,
|
||||
...m,
|
||||
};
|
||||
return a
|
||||
? p.jsx("span", { className: s, ...u, children: o })
|
||||
: p.jsx("a", { href: v, className: s, ...u, children: o });
|
||||
}
|
||||
U.__docgenInfo = {
|
||||
description: "",
|
||||
methods: [],
|
||||
displayName: "MenuBarItem",
|
||||
props: {
|
||||
href: { defaultValue: { value: '"#"', computed: !1 }, required: !1 },
|
||||
variant: {
|
||||
defaultValue: { value: '"default"', computed: !1 },
|
||||
required: !1,
|
||||
},
|
||||
size: { defaultValue: { value: '"default"', computed: !1 }, required: !1 },
|
||||
className: { defaultValue: { value: '""', computed: !1 }, required: !1 },
|
||||
disabled: { defaultValue: { value: "false", computed: !1 }, required: !1 },
|
||||
},
|
||||
};
|
||||
export { U as M };
|
||||
@@ -1,372 +0,0 @@
|
||||
import { j as e } from "./jsx-runtime-C_nHp4yK.js";
|
||||
import { M as a } from "./MenuBarItem-Dp8NM2fx.js";
|
||||
import "./iframe-D_aMTKb2.js";
|
||||
import "./preload-helper-DIZFD4sK.js";
|
||||
const u = {
|
||||
title: "Components/MenuBarItem",
|
||||
component: a,
|
||||
parameters: {
|
||||
layout: "centered",
|
||||
docs: {
|
||||
description: {
|
||||
component:
|
||||
"A navigation menu item component with multiple variants, sizes, and states. Can render as a link or disabled span with full accessibility support. Includes focus states with keyboard navigation - use Tab key to test focus indicators.",
|
||||
},
|
||||
},
|
||||
},
|
||||
argTypes: {
|
||||
variant: {
|
||||
control: { type: "select" },
|
||||
options: ["default", "home"],
|
||||
description: "The visual style variant of the menu item",
|
||||
},
|
||||
size: {
|
||||
control: { type: "select" },
|
||||
options: [
|
||||
"xsmall",
|
||||
"xsmallUseCases",
|
||||
"homeMd",
|
||||
"homeUseCases",
|
||||
"large",
|
||||
"largeUseCases",
|
||||
"homeXlarge",
|
||||
"xlarge",
|
||||
],
|
||||
description: "The size of the menu item",
|
||||
},
|
||||
disabled: {
|
||||
control: { type: "boolean" },
|
||||
description: "Whether the menu item is disabled",
|
||||
},
|
||||
href: { control: { type: "text" }, description: "The link destination" },
|
||||
onClick: { action: "clicked" },
|
||||
},
|
||||
tags: ["autodocs"],
|
||||
},
|
||||
n = { args: { children: "Menu Item", size: "large" } },
|
||||
r = {
|
||||
args: { children: "Menu Item", size: "large" },
|
||||
render: (s) =>
|
||||
e.jsx("div", {
|
||||
className: "space-y-4",
|
||||
children: e.jsxs("div", {
|
||||
className: "space-x-4",
|
||||
children: [
|
||||
e.jsx(a, { ...s, variant: "default", children: "Default" }),
|
||||
e.jsx(a, { ...s, variant: "home", children: "Home" }),
|
||||
],
|
||||
}),
|
||||
}),
|
||||
parameters: {
|
||||
docs: {
|
||||
description: {
|
||||
story: "Different visual variants of the menu item component.",
|
||||
},
|
||||
},
|
||||
},
|
||||
},
|
||||
t = {
|
||||
args: { children: "Menu Item", variant: "default" },
|
||||
render: (s) =>
|
||||
e.jsx("div", {
|
||||
className: "space-y-4",
|
||||
children: e.jsxs("div", {
|
||||
className: "space-x-4",
|
||||
children: [
|
||||
e.jsx(a, { ...s, size: "xsmall", children: "XSmall" }),
|
||||
e.jsx(a, { ...s, size: "large", children: "Large" }),
|
||||
e.jsx(a, { ...s, size: "xlarge", children: "XLarge" }),
|
||||
],
|
||||
}),
|
||||
}),
|
||||
parameters: {
|
||||
docs: {
|
||||
description: {
|
||||
story: "Different sizes available for the menu item component.",
|
||||
},
|
||||
},
|
||||
},
|
||||
},
|
||||
i = {
|
||||
args: { children: "Menu Item", size: "large", variant: "default" },
|
||||
render: (s) =>
|
||||
e.jsx("div", {
|
||||
className: "space-y-4",
|
||||
children: e.jsxs("div", {
|
||||
className: "space-x-4",
|
||||
children: [
|
||||
e.jsx(a, { ...s, children: "Normal" }),
|
||||
e.jsx(a, { ...s, disabled: !0, children: "Disabled" }),
|
||||
],
|
||||
}),
|
||||
}),
|
||||
parameters: {
|
||||
docs: {
|
||||
description: { story: "Different states of the menu item component." },
|
||||
},
|
||||
},
|
||||
},
|
||||
l = {
|
||||
args: {},
|
||||
render: () =>
|
||||
e.jsxs("div", {
|
||||
className: "space-y-6",
|
||||
children: [
|
||||
e.jsxs("div", {
|
||||
children: [
|
||||
e.jsx("h3", {
|
||||
className: "text-white font-semibold mb-3",
|
||||
children: "Default Variant",
|
||||
}),
|
||||
e.jsxs("div", {
|
||||
className: "space-x-4",
|
||||
children: [
|
||||
e.jsx(a, { size: "xsmall", children: "XSmall" }),
|
||||
e.jsx(a, { size: "large", children: "Large" }),
|
||||
e.jsx(a, { size: "xlarge", children: "XLarge" }),
|
||||
],
|
||||
}),
|
||||
],
|
||||
}),
|
||||
e.jsxs("div", {
|
||||
children: [
|
||||
e.jsx("h3", {
|
||||
className: "text-white font-semibold mb-3",
|
||||
children: "Home Variant",
|
||||
}),
|
||||
e.jsxs("div", {
|
||||
className: "space-x-4",
|
||||
children: [
|
||||
e.jsx(a, {
|
||||
variant: "home",
|
||||
size: "xsmall",
|
||||
children: "XSmall",
|
||||
}),
|
||||
e.jsx(a, {
|
||||
variant: "home",
|
||||
size: "large",
|
||||
children: "Large",
|
||||
}),
|
||||
e.jsx(a, {
|
||||
variant: "home",
|
||||
size: "xlarge",
|
||||
children: "XLarge",
|
||||
}),
|
||||
],
|
||||
}),
|
||||
],
|
||||
}),
|
||||
e.jsxs("div", {
|
||||
children: [
|
||||
e.jsx("h3", {
|
||||
className: "text-white font-semibold mb-3",
|
||||
children: "Disabled States",
|
||||
}),
|
||||
e.jsxs("div", {
|
||||
className: "space-x-4",
|
||||
children: [
|
||||
e.jsx(a, {
|
||||
size: "large",
|
||||
disabled: !0,
|
||||
children: "Default Disabled",
|
||||
}),
|
||||
e.jsx(a, {
|
||||
variant: "home",
|
||||
size: "large",
|
||||
disabled: !0,
|
||||
children: "Home Disabled",
|
||||
}),
|
||||
],
|
||||
}),
|
||||
],
|
||||
}),
|
||||
],
|
||||
}),
|
||||
parameters: {
|
||||
docs: {
|
||||
description: {
|
||||
story:
|
||||
"Complete overview of all menu item variants, sizes, and states.",
|
||||
},
|
||||
},
|
||||
},
|
||||
};
|
||||
n.parameters = {
|
||||
...n.parameters,
|
||||
docs: {
|
||||
...n.parameters?.docs,
|
||||
source: {
|
||||
originalSource: `{
|
||||
args: {
|
||||
children: "Menu Item",
|
||||
size: "large"
|
||||
}
|
||||
}`,
|
||||
...n.parameters?.docs?.source,
|
||||
},
|
||||
},
|
||||
};
|
||||
r.parameters = {
|
||||
...r.parameters,
|
||||
docs: {
|
||||
...r.parameters?.docs,
|
||||
source: {
|
||||
originalSource: `{
|
||||
args: {
|
||||
children: "Menu Item",
|
||||
size: "large"
|
||||
},
|
||||
render: args => <div className="space-y-4">
|
||||
<div className="space-x-4">
|
||||
<MenuBarItem {...args} variant="default">
|
||||
Default
|
||||
</MenuBarItem>
|
||||
<MenuBarItem {...args} variant="home">
|
||||
Home
|
||||
</MenuBarItem>
|
||||
</div>
|
||||
</div>,
|
||||
parameters: {
|
||||
docs: {
|
||||
description: {
|
||||
story: "Different visual variants of the menu item component."
|
||||
}
|
||||
}
|
||||
}
|
||||
}`,
|
||||
...r.parameters?.docs?.source,
|
||||
},
|
||||
},
|
||||
};
|
||||
t.parameters = {
|
||||
...t.parameters,
|
||||
docs: {
|
||||
...t.parameters?.docs,
|
||||
source: {
|
||||
originalSource: `{
|
||||
args: {
|
||||
children: "Menu Item",
|
||||
variant: "default"
|
||||
},
|
||||
render: args => <div className="space-y-4">
|
||||
<div className="space-x-4">
|
||||
<MenuBarItem {...args} size="xsmall">
|
||||
XSmall
|
||||
</MenuBarItem>
|
||||
<MenuBarItem {...args} size="large">
|
||||
Large
|
||||
</MenuBarItem>
|
||||
<MenuBarItem {...args} size="xlarge">
|
||||
XLarge
|
||||
</MenuBarItem>
|
||||
</div>
|
||||
</div>,
|
||||
parameters: {
|
||||
docs: {
|
||||
description: {
|
||||
story: "Different sizes available for the menu item component."
|
||||
}
|
||||
}
|
||||
}
|
||||
}`,
|
||||
...t.parameters?.docs?.source,
|
||||
},
|
||||
},
|
||||
};
|
||||
i.parameters = {
|
||||
...i.parameters,
|
||||
docs: {
|
||||
...i.parameters?.docs,
|
||||
source: {
|
||||
originalSource: `{
|
||||
args: {
|
||||
children: "Menu Item",
|
||||
size: "large",
|
||||
variant: "default"
|
||||
},
|
||||
render: args => <div className="space-y-4">
|
||||
<div className="space-x-4">
|
||||
<MenuBarItem {...args}>Normal</MenuBarItem>
|
||||
<MenuBarItem {...args} disabled>
|
||||
Disabled
|
||||
</MenuBarItem>
|
||||
</div>
|
||||
</div>,
|
||||
parameters: {
|
||||
docs: {
|
||||
description: {
|
||||
story: "Different states of the menu item component."
|
||||
}
|
||||
}
|
||||
}
|
||||
}`,
|
||||
...i.parameters?.docs?.source,
|
||||
},
|
||||
},
|
||||
};
|
||||
l.parameters = {
|
||||
...l.parameters,
|
||||
docs: {
|
||||
...l.parameters?.docs,
|
||||
source: {
|
||||
originalSource: `{
|
||||
args: {},
|
||||
render: () => <div className="space-y-6">
|
||||
<div>
|
||||
<h3 className="text-white font-semibold mb-3">Default Variant</h3>
|
||||
<div className="space-x-4">
|
||||
<MenuBarItem size="xsmall">XSmall</MenuBarItem>
|
||||
<MenuBarItem size="large">Large</MenuBarItem>
|
||||
<MenuBarItem size="xlarge">XLarge</MenuBarItem>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<h3 className="text-white font-semibold mb-3">Home Variant</h3>
|
||||
<div className="space-x-4">
|
||||
<MenuBarItem variant="home" size="xsmall">
|
||||
XSmall
|
||||
</MenuBarItem>
|
||||
<MenuBarItem variant="home" size="large">
|
||||
Large
|
||||
</MenuBarItem>
|
||||
<MenuBarItem variant="home" size="xlarge">
|
||||
XLarge
|
||||
</MenuBarItem>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<h3 className="text-white font-semibold mb-3">Disabled States</h3>
|
||||
<div className="space-x-4">
|
||||
<MenuBarItem size="large" disabled>
|
||||
Default Disabled
|
||||
</MenuBarItem>
|
||||
<MenuBarItem variant="home" size="large" disabled>
|
||||
Home Disabled
|
||||
</MenuBarItem>
|
||||
</div>
|
||||
</div>
|
||||
</div>,
|
||||
parameters: {
|
||||
docs: {
|
||||
description: {
|
||||
story: "Complete overview of all menu item variants, sizes, and states."
|
||||
}
|
||||
}
|
||||
}
|
||||
}`,
|
||||
...l.parameters?.docs?.source,
|
||||
},
|
||||
},
|
||||
};
|
||||
const p = ["Default", "Variants", "Sizes", "States", "AllVariants"];
|
||||
export {
|
||||
l as AllVariants,
|
||||
n as Default,
|
||||
t as Sizes,
|
||||
i as States,
|
||||
r as Variants,
|
||||
p as __namedExportsOrder,
|
||||
u as default,
|
||||
};
|
||||
@@ -1,24 +0,0 @@
|
||||
import { j as e } from "./jsx-runtime-C_nHp4yK.js";
|
||||
import { S as t } from "./SectionNumber-Cptefv18.js";
|
||||
const r = ({ number: l, text: s, iconShape: o, iconColor: a }) =>
|
||||
e.jsxs("div", {
|
||||
className:
|
||||
"bg-[var(--color-surface-inverse-primary)] rounded-[12px] p-5 shadow-lg flex flex-col gap-4 sm:p-8 sm:gap-8 sm:flex-row sm:items-center lg:p-8 lg:gap-0 lg:flex-row lg:items-stretch lg:relative lg:h-[238px]",
|
||||
children: [
|
||||
e.jsx("div", {
|
||||
className:
|
||||
"flex justify-end sm:justify-start sm:flex-shrink-0 lg:absolute lg:top-8 lg:right-8",
|
||||
children: e.jsx(t, { number: l }),
|
||||
}),
|
||||
e.jsx("div", {
|
||||
className: "sm:flex-1 lg:absolute lg:bottom-8 lg:left-8 lg:right-16",
|
||||
children: e.jsx("p", {
|
||||
className:
|
||||
"font-bricolage-grotesque font-medium text-[24px] leading-[32px] sm:font-normal sm:leading-[24px] sm:text-[24px] lg:text-[24px] lg:leading-[24px] xl:text-[32px] xl:leading-[32px] text-[#141414]",
|
||||
children: s,
|
||||
}),
|
||||
}),
|
||||
],
|
||||
});
|
||||
r.__docgenInfo = { description: "", methods: [], displayName: "NumberedCard" };
|
||||
export { r as N };
|
||||
@@ -1,176 +0,0 @@
|
||||
import { j as e } from "./jsx-runtime-C_nHp4yK.js";
|
||||
import { N as o } from "./NumberedCard-ClCynPua.js";
|
||||
import "./iframe-D_aMTKb2.js";
|
||||
import "./preload-helper-DIZFD4sK.js";
|
||||
import "./SectionNumber-Cptefv18.js";
|
||||
const m = {
|
||||
title: "Components/NumberedCard",
|
||||
component: o,
|
||||
parameters: {
|
||||
layout: "centered",
|
||||
docs: {
|
||||
description: {
|
||||
component:
|
||||
"Individual numbered card component that displays a step in a process with a numbered icon and descriptive text. Supports responsive layouts across different breakpoints.",
|
||||
},
|
||||
},
|
||||
},
|
||||
argTypes: {
|
||||
number: {
|
||||
control: { type: "number", min: 1, max: 9 },
|
||||
description: "The number to display on the card",
|
||||
},
|
||||
text: {
|
||||
control: { type: "text" },
|
||||
description: "The descriptive text for this step",
|
||||
},
|
||||
iconShape: {
|
||||
control: { type: "select" },
|
||||
options: ["blob", "gear", "star"],
|
||||
description:
|
||||
"The shape of the icon background (currently not used, uses PNG images)",
|
||||
},
|
||||
iconColor: {
|
||||
control: { type: "select" },
|
||||
options: ["green", "purple", "orange", "blue"],
|
||||
description:
|
||||
"The color theme for the icon (currently not used, uses PNG images)",
|
||||
},
|
||||
},
|
||||
tags: ["autodocs"],
|
||||
},
|
||||
t = {
|
||||
args: {
|
||||
number: 1,
|
||||
text: "Document how your community makes decisions",
|
||||
iconShape: "blob",
|
||||
iconColor: "green",
|
||||
},
|
||||
},
|
||||
r = {
|
||||
args: {
|
||||
number: 1,
|
||||
text: "Example card text",
|
||||
iconShape: "blob",
|
||||
iconColor: "green",
|
||||
},
|
||||
render: (s) =>
|
||||
e.jsxs("div", {
|
||||
className: "space-y-4",
|
||||
children: [
|
||||
e.jsx(o, { ...s, number: 1, text: "First step in the process" }),
|
||||
e.jsx(o, {
|
||||
...s,
|
||||
number: 2,
|
||||
text: "Second step with different content",
|
||||
}),
|
||||
e.jsx(o, {
|
||||
...s,
|
||||
number: 3,
|
||||
text: "Third and final step of the workflow",
|
||||
}),
|
||||
],
|
||||
}),
|
||||
parameters: {
|
||||
docs: {
|
||||
description: {
|
||||
story:
|
||||
"Shows all three numbered cards with different content to demonstrate the visual hierarchy.",
|
||||
},
|
||||
},
|
||||
},
|
||||
},
|
||||
n = {
|
||||
args: {
|
||||
number: 1,
|
||||
text: "This is a much longer piece of text that demonstrates how the card handles content that spans multiple lines and requires more space to display properly",
|
||||
iconShape: "blob",
|
||||
iconColor: "green",
|
||||
},
|
||||
parameters: {
|
||||
docs: {
|
||||
description: {
|
||||
story:
|
||||
"Demonstrates how the card handles longer text content across different breakpoints.",
|
||||
},
|
||||
},
|
||||
},
|
||||
};
|
||||
t.parameters = {
|
||||
...t.parameters,
|
||||
docs: {
|
||||
...t.parameters?.docs,
|
||||
source: {
|
||||
originalSource: `{
|
||||
args: {
|
||||
number: 1,
|
||||
text: "Document how your community makes decisions",
|
||||
iconShape: "blob",
|
||||
iconColor: "green"
|
||||
}
|
||||
}`,
|
||||
...t.parameters?.docs?.source,
|
||||
},
|
||||
},
|
||||
};
|
||||
r.parameters = {
|
||||
...r.parameters,
|
||||
docs: {
|
||||
...r.parameters?.docs,
|
||||
source: {
|
||||
originalSource: `{
|
||||
args: {
|
||||
number: 1,
|
||||
text: "Example card text",
|
||||
iconShape: "blob",
|
||||
iconColor: "green"
|
||||
},
|
||||
render: args => <div className="space-y-4">
|
||||
<NumberedCard {...args} number={1} text="First step in the process" />
|
||||
<NumberedCard {...args} number={2} text="Second step with different content" />
|
||||
<NumberedCard {...args} number={3} text="Third and final step of the workflow" />
|
||||
</div>,
|
||||
parameters: {
|
||||
docs: {
|
||||
description: {
|
||||
story: "Shows all three numbered cards with different content to demonstrate the visual hierarchy."
|
||||
}
|
||||
}
|
||||
}
|
||||
}`,
|
||||
...r.parameters?.docs?.source,
|
||||
},
|
||||
},
|
||||
};
|
||||
n.parameters = {
|
||||
...n.parameters,
|
||||
docs: {
|
||||
...n.parameters?.docs,
|
||||
source: {
|
||||
originalSource: `{
|
||||
args: {
|
||||
number: 1,
|
||||
text: "This is a much longer piece of text that demonstrates how the card handles content that spans multiple lines and requires more space to display properly",
|
||||
iconShape: "blob",
|
||||
iconColor: "green"
|
||||
},
|
||||
parameters: {
|
||||
docs: {
|
||||
description: {
|
||||
story: "Demonstrates how the card handles longer text content across different breakpoints."
|
||||
}
|
||||
}
|
||||
}
|
||||
}`,
|
||||
...n.parameters?.docs?.source,
|
||||
},
|
||||
},
|
||||
};
|
||||
const l = ["Default", "AllNumbers", "LongText"];
|
||||
export {
|
||||
r as AllNumbers,
|
||||
t as Default,
|
||||
n as LongText,
|
||||
l as __namedExportsOrder,
|
||||
m as default,
|
||||
};
|
||||
@@ -1,249 +0,0 @@
|
||||
import { j as e } from "./jsx-runtime-C_nHp4yK.js";
|
||||
import { N as m } from "./NumberedCard-ClCynPua.js";
|
||||
import { S as u } from "./SectionHeader-CadpOP1T.js";
|
||||
import { B as c } from "./Button-Z4hbXct5.js";
|
||||
import "./iframe-D_aMTKb2.js";
|
||||
import "./preload-helper-DIZFD4sK.js";
|
||||
import "./SectionNumber-Cptefv18.js";
|
||||
const l = ({ title: r, subtitle: a, cards: i }) => {
|
||||
const p = {
|
||||
"@context": "https://schema.org",
|
||||
"@type": "HowTo",
|
||||
name: r,
|
||||
description: a,
|
||||
step: i.map((o, t) => ({
|
||||
"@type": "HowToStep",
|
||||
position: t + 1,
|
||||
name: o.text,
|
||||
text: o.text,
|
||||
})),
|
||||
};
|
||||
return e.jsxs(e.Fragment, {
|
||||
children: [
|
||||
e.jsx("script", {
|
||||
type: "application/ld+json",
|
||||
dangerouslySetInnerHTML: { __html: JSON.stringify(p) },
|
||||
}),
|
||||
e.jsx("section", {
|
||||
className:
|
||||
"bg-transparent py-[var(--spacing-scale-032)] px-[var(--spacing-scale-020)] sm:py-[var(--spacing-scale-048)] sm:px-[var(--spacing-scale-032)] lg:py-[var(--spacing-scale-064)] lg:px-[var(--spacing-scale-064)] xl:py-[var(--spacing-scale-076)] xl:px-[var(--spacing-scale-064)]",
|
||||
children: e.jsx("div", {
|
||||
className: "max-w-[var(--spacing-measures-max-width-lg)] mx-auto",
|
||||
children: e.jsxs("div", {
|
||||
className:
|
||||
"grid grid-cols-1 gap-y-[var(--spacing-scale-032)] lg:gap-y-[var(--spacing-scale-056)]",
|
||||
children: [
|
||||
e.jsx("div", {
|
||||
children: e.jsx(u, {
|
||||
title: r,
|
||||
subtitle: a,
|
||||
titleLg: "How CommunityRule helps",
|
||||
}),
|
||||
}),
|
||||
e.jsx("div", {
|
||||
className:
|
||||
"grid grid-cols-1 gap-y-[var(--spacing-scale-024)] lg:grid-cols-3 lg:gap-[var(--spacing-scale-024)]",
|
||||
children: i.map((o, t) =>
|
||||
e.jsx(
|
||||
m,
|
||||
{
|
||||
number: t + 1,
|
||||
text: o.text,
|
||||
iconShape: o.iconShape,
|
||||
iconColor: o.iconColor,
|
||||
},
|
||||
t,
|
||||
),
|
||||
),
|
||||
}),
|
||||
e.jsxs("div", {
|
||||
className: "text-center sm:text-left lg:text-center",
|
||||
children: [
|
||||
e.jsx("div", {
|
||||
className: "block lg:hidden",
|
||||
children: e.jsx(c, {
|
||||
variant: "default",
|
||||
size: "large",
|
||||
children: "Create CommunityRule",
|
||||
}),
|
||||
}),
|
||||
e.jsx("div", {
|
||||
className: "hidden lg:block",
|
||||
children: e.jsx(c, {
|
||||
variant: "outlined",
|
||||
size: "large",
|
||||
children: "See how it works",
|
||||
}),
|
||||
}),
|
||||
],
|
||||
}),
|
||||
],
|
||||
}),
|
||||
}),
|
||||
}),
|
||||
],
|
||||
});
|
||||
};
|
||||
l.__docgenInfo = { description: "", methods: [], displayName: "NumberedCards" };
|
||||
const C = {
|
||||
title: "Components/NumberedCards",
|
||||
component: l,
|
||||
parameters: {
|
||||
layout: "fullscreen",
|
||||
docs: {
|
||||
description: {
|
||||
component:
|
||||
"A component system for visually communicating multi-step workflows, processes, or value propositions. The component's modular design with NumberedCard and SectionNumber sub-components makes it ideal for explaining any sequential process while maintaining brand consistency and accessibility standards across the design system.",
|
||||
},
|
||||
},
|
||||
},
|
||||
argTypes: {
|
||||
title: {
|
||||
control: { type: "text" },
|
||||
description: "The main title for the section",
|
||||
},
|
||||
subtitle: {
|
||||
control: { type: "text" },
|
||||
description: "The subtitle text below the main title",
|
||||
},
|
||||
cards: {
|
||||
control: { type: "object" },
|
||||
description:
|
||||
"Array of card objects with text, iconShape, and iconColor properties",
|
||||
},
|
||||
},
|
||||
tags: ["autodocs"],
|
||||
},
|
||||
n = {
|
||||
args: {
|
||||
title: "How CommunityRule works",
|
||||
subtitle: "Here's a quick overview of the process, from start to finish.",
|
||||
cards: [
|
||||
{
|
||||
text: "Document how your community makes decisions",
|
||||
iconShape: "blob",
|
||||
iconColor: "green",
|
||||
},
|
||||
{
|
||||
text: "Build an operating manual for a successful community",
|
||||
iconShape: "gear",
|
||||
iconColor: "purple",
|
||||
},
|
||||
{
|
||||
text: "Get a link to your manual for your group to review and evolve",
|
||||
iconShape: "star",
|
||||
iconColor: "orange",
|
||||
},
|
||||
],
|
||||
},
|
||||
},
|
||||
s = {
|
||||
args: {
|
||||
title: "Our Process",
|
||||
subtitle: "Follow these simple steps to get started with your project.",
|
||||
cards: [
|
||||
{
|
||||
text: "Define your project requirements and goals",
|
||||
iconShape: "blob",
|
||||
iconColor: "green",
|
||||
},
|
||||
{
|
||||
text: "Collaborate with our team to create the perfect solution",
|
||||
iconShape: "gear",
|
||||
iconColor: "purple",
|
||||
},
|
||||
{
|
||||
text: "Launch and iterate based on user feedback",
|
||||
iconShape: "star",
|
||||
iconColor: "orange",
|
||||
},
|
||||
{
|
||||
text: "Scale and optimize for continued success",
|
||||
iconShape: "blob",
|
||||
iconColor: "blue",
|
||||
},
|
||||
],
|
||||
},
|
||||
parameters: {
|
||||
docs: {
|
||||
description: {
|
||||
story:
|
||||
"Example with custom content and four cards to show flexibility.",
|
||||
},
|
||||
},
|
||||
},
|
||||
};
|
||||
n.parameters = {
|
||||
...n.parameters,
|
||||
docs: {
|
||||
...n.parameters?.docs,
|
||||
source: {
|
||||
originalSource: `{
|
||||
args: {
|
||||
title: "How CommunityRule works",
|
||||
subtitle: "Here's a quick overview of the process, from start to finish.",
|
||||
cards: [{
|
||||
text: "Document how your community makes decisions",
|
||||
iconShape: "blob",
|
||||
iconColor: "green"
|
||||
}, {
|
||||
text: "Build an operating manual for a successful community",
|
||||
iconShape: "gear",
|
||||
iconColor: "purple"
|
||||
}, {
|
||||
text: "Get a link to your manual for your group to review and evolve",
|
||||
iconShape: "star",
|
||||
iconColor: "orange"
|
||||
}]
|
||||
}
|
||||
}`,
|
||||
...n.parameters?.docs?.source,
|
||||
},
|
||||
},
|
||||
};
|
||||
s.parameters = {
|
||||
...s.parameters,
|
||||
docs: {
|
||||
...s.parameters?.docs,
|
||||
source: {
|
||||
originalSource: `{
|
||||
args: {
|
||||
title: "Our Process",
|
||||
subtitle: "Follow these simple steps to get started with your project.",
|
||||
cards: [{
|
||||
text: "Define your project requirements and goals",
|
||||
iconShape: "blob",
|
||||
iconColor: "green"
|
||||
}, {
|
||||
text: "Collaborate with our team to create the perfect solution",
|
||||
iconShape: "gear",
|
||||
iconColor: "purple"
|
||||
}, {
|
||||
text: "Launch and iterate based on user feedback",
|
||||
iconShape: "star",
|
||||
iconColor: "orange"
|
||||
}, {
|
||||
text: "Scale and optimize for continued success",
|
||||
iconShape: "blob",
|
||||
iconColor: "blue"
|
||||
}]
|
||||
},
|
||||
parameters: {
|
||||
docs: {
|
||||
description: {
|
||||
story: "Example with custom content and four cards to show flexibility."
|
||||
}
|
||||
}
|
||||
}
|
||||
}`,
|
||||
...s.parameters?.docs?.source,
|
||||
},
|
||||
},
|
||||
};
|
||||
const v = ["Default", "CustomContent"];
|
||||
export {
|
||||
s as CustomContent,
|
||||
n as Default,
|
||||
v as __namedExportsOrder,
|
||||
C as default,
|
||||
};
|
||||
@@ -1,31 +0,0 @@
|
||||
import { j as e } from "./jsx-runtime-C_nHp4yK.js";
|
||||
const a = ({ title: l, subtitle: t, titleLg: x }) =>
|
||||
e.jsxs("div", {
|
||||
className:
|
||||
"flex flex-col gap-1 w-full lg:flex-row lg:justify-between lg:items-start xl:gap-[var(--spacing-scale-024)]",
|
||||
children: [
|
||||
e.jsx("div", {
|
||||
className:
|
||||
"lg:w-[369px] lg:h-[120px] lg:flex lg:items-center xl:w-[452px] xl:h-[156px] xl:flex xl:items-center",
|
||||
children: e.jsxs("h2", {
|
||||
className:
|
||||
"font-bricolage-grotesque font-bold text-[28px] leading-[36px] sm:text-[32px] sm:leading-[40px] lg:text-[32px] lg:leading-[40px] lg:w-[369px] lg:pr-24 xl:text-[40px] xl:leading-[52px] xl:w-[452px] xl:pr-24 text-[var(--color-content-default-primary)]",
|
||||
children: [
|
||||
e.jsx("span", { className: "block lg:hidden", children: l }),
|
||||
e.jsx("span", { className: "hidden lg:block", children: x || l }),
|
||||
],
|
||||
}),
|
||||
}),
|
||||
e.jsx("div", {
|
||||
className:
|
||||
"lg:w-[928px] lg:h-[120px] lg:flex lg:items-center lg:justify-end xl:w-[763px] xl:h-[156px] xl:flex xl:items-center xl:justify-end",
|
||||
children: e.jsx("p", {
|
||||
className:
|
||||
"font-inter font-normal text-[18px] leading-[130%] sm:text-[18px] sm:leading-[32px] lg:text-[24px] lg:leading-[32px] xl:text-[32px] xl:leading-[40px] xl:text-right text-[#484848] sm:text-[var(--color-content-default-tertiary)] lg:text-[var(--color-content-default-tertiary)] xl:text-[var(--color-content-default-tertiary)] tracking-[0px]",
|
||||
children: t,
|
||||
}),
|
||||
}),
|
||||
],
|
||||
});
|
||||
a.__docgenInfo = { description: "", methods: [], displayName: "SectionHeader" };
|
||||
export { a as S };
|
||||
@@ -1,226 +0,0 @@
|
||||
import { S as n } from "./SectionHeader-CadpOP1T.js";
|
||||
import "./jsx-runtime-C_nHp4yK.js";
|
||||
import "./iframe-D_aMTKb2.js";
|
||||
import "./preload-helper-DIZFD4sK.js";
|
||||
const p = {
|
||||
title: "Components/SectionHeader",
|
||||
component: n,
|
||||
parameters: {
|
||||
layout: "centered",
|
||||
docs: {
|
||||
description: {
|
||||
component:
|
||||
"A section header component that displays a title and subtitle with responsive typography and layout. Supports different title text for large breakpoints and maintains consistent spacing across all screen sizes.",
|
||||
},
|
||||
},
|
||||
},
|
||||
argTypes: {
|
||||
title: {
|
||||
control: { type: "text" },
|
||||
description: "The main title text (used for xsm and sm breakpoints)",
|
||||
},
|
||||
subtitle: {
|
||||
control: { type: "text" },
|
||||
description: "The subtitle text below the main title",
|
||||
},
|
||||
titleLg: {
|
||||
control: { type: "text" },
|
||||
description:
|
||||
"The title text for lg and xl breakpoints (optional, falls back to title)",
|
||||
},
|
||||
},
|
||||
tags: ["autodocs"],
|
||||
},
|
||||
e = {
|
||||
args: {
|
||||
title: "How CommunityRule works",
|
||||
subtitle: "Here's a quick overview of the process, from start to finish.",
|
||||
titleLg: "How CommunityRule helps",
|
||||
},
|
||||
},
|
||||
t = {
|
||||
args: {
|
||||
title: "Our Mission",
|
||||
subtitle:
|
||||
"We're dedicated to helping communities thrive through better decision-making processes and transparent governance structures.",
|
||||
titleLg: "Building Better Communities",
|
||||
},
|
||||
parameters: {
|
||||
docs: {
|
||||
description: {
|
||||
story:
|
||||
"Example with custom content to show the flexibility of the component.",
|
||||
},
|
||||
},
|
||||
},
|
||||
},
|
||||
s = {
|
||||
args: {
|
||||
title: "Complex Process",
|
||||
subtitle:
|
||||
"This is a much longer subtitle that demonstrates how the component handles extended text content across different breakpoints and layout configurations.",
|
||||
titleLg: "Complex Process Simplified",
|
||||
},
|
||||
parameters: {
|
||||
docs: {
|
||||
description: {
|
||||
story:
|
||||
"Demonstrates how the component handles longer subtitle text across different breakpoints.",
|
||||
},
|
||||
},
|
||||
},
|
||||
},
|
||||
o = {
|
||||
args: {
|
||||
title: "Responsive Design",
|
||||
subtitle:
|
||||
"Test the responsive behavior by resizing your browser window or using the viewport controls in Storybook.",
|
||||
titleLg: "Responsive Design Test",
|
||||
},
|
||||
parameters: {
|
||||
docs: {
|
||||
description: {
|
||||
story:
|
||||
"Test the responsive behavior by resizing your browser window or using the viewport controls in Storybook.",
|
||||
},
|
||||
},
|
||||
},
|
||||
},
|
||||
r = {
|
||||
args: {
|
||||
title: "Simple Header",
|
||||
subtitle:
|
||||
"This example doesn't specify a titleLg prop, so it will use the same title text across all breakpoints.",
|
||||
},
|
||||
parameters: {
|
||||
docs: {
|
||||
description: {
|
||||
story:
|
||||
"Shows the component without a titleLg prop, demonstrating the fallback behavior.",
|
||||
},
|
||||
},
|
||||
},
|
||||
};
|
||||
e.parameters = {
|
||||
...e.parameters,
|
||||
docs: {
|
||||
...e.parameters?.docs,
|
||||
source: {
|
||||
originalSource: `{
|
||||
args: {
|
||||
title: "How CommunityRule works",
|
||||
subtitle: "Here's a quick overview of the process, from start to finish.",
|
||||
titleLg: "How CommunityRule helps"
|
||||
}
|
||||
}`,
|
||||
...e.parameters?.docs?.source,
|
||||
},
|
||||
},
|
||||
};
|
||||
t.parameters = {
|
||||
...t.parameters,
|
||||
docs: {
|
||||
...t.parameters?.docs,
|
||||
source: {
|
||||
originalSource: `{
|
||||
args: {
|
||||
title: "Our Mission",
|
||||
subtitle: "We're dedicated to helping communities thrive through better decision-making processes and transparent governance structures.",
|
||||
titleLg: "Building Better Communities"
|
||||
},
|
||||
parameters: {
|
||||
docs: {
|
||||
description: {
|
||||
story: "Example with custom content to show the flexibility of the component."
|
||||
}
|
||||
}
|
||||
}
|
||||
}`,
|
||||
...t.parameters?.docs?.source,
|
||||
},
|
||||
},
|
||||
};
|
||||
s.parameters = {
|
||||
...s.parameters,
|
||||
docs: {
|
||||
...s.parameters?.docs,
|
||||
source: {
|
||||
originalSource: `{
|
||||
args: {
|
||||
title: "Complex Process",
|
||||
subtitle: "This is a much longer subtitle that demonstrates how the component handles extended text content across different breakpoints and layout configurations.",
|
||||
titleLg: "Complex Process Simplified"
|
||||
},
|
||||
parameters: {
|
||||
docs: {
|
||||
description: {
|
||||
story: "Demonstrates how the component handles longer subtitle text across different breakpoints."
|
||||
}
|
||||
}
|
||||
}
|
||||
}`,
|
||||
...s.parameters?.docs?.source,
|
||||
},
|
||||
},
|
||||
};
|
||||
o.parameters = {
|
||||
...o.parameters,
|
||||
docs: {
|
||||
...o.parameters?.docs,
|
||||
source: {
|
||||
originalSource: `{
|
||||
args: {
|
||||
title: "Responsive Design",
|
||||
subtitle: "Test the responsive behavior by resizing your browser window or using the viewport controls in Storybook.",
|
||||
titleLg: "Responsive Design Test"
|
||||
},
|
||||
parameters: {
|
||||
docs: {
|
||||
description: {
|
||||
story: "Test the responsive behavior by resizing your browser window or using the viewport controls in Storybook."
|
||||
}
|
||||
}
|
||||
}
|
||||
}`,
|
||||
...o.parameters?.docs?.source,
|
||||
},
|
||||
},
|
||||
};
|
||||
r.parameters = {
|
||||
...r.parameters,
|
||||
docs: {
|
||||
...r.parameters?.docs,
|
||||
source: {
|
||||
originalSource: `{
|
||||
args: {
|
||||
title: "Simple Header",
|
||||
subtitle: "This example doesn't specify a titleLg prop, so it will use the same title text across all breakpoints."
|
||||
},
|
||||
parameters: {
|
||||
docs: {
|
||||
description: {
|
||||
story: "Shows the component without a titleLg prop, demonstrating the fallback behavior."
|
||||
}
|
||||
}
|
||||
}
|
||||
}`,
|
||||
...r.parameters?.docs?.source,
|
||||
},
|
||||
},
|
||||
};
|
||||
const m = [
|
||||
"Default",
|
||||
"CustomContent",
|
||||
"LongSubtitle",
|
||||
"ResponsiveTest",
|
||||
"WithoutTitleLg",
|
||||
];
|
||||
export {
|
||||
t as CustomContent,
|
||||
e as Default,
|
||||
s as LongSubtitle,
|
||||
o as ResponsiveTest,
|
||||
r as WithoutTitleLg,
|
||||
m as __namedExportsOrder,
|
||||
p as default,
|
||||
};
|
||||
@@ -1,36 +0,0 @@
|
||||
import { j as e } from "./jsx-runtime-C_nHp4yK.js";
|
||||
const a = ({ number: t }) => {
|
||||
const s = (r) => {
|
||||
switch (r) {
|
||||
case 1:
|
||||
return "/assets/SectionNumber_1.png";
|
||||
case 2:
|
||||
return "/assets/SectionNumber_2.png";
|
||||
case 3:
|
||||
return "/assets/SectionNumber_3.png";
|
||||
default:
|
||||
return "/assets/SectionNumber_1.png";
|
||||
}
|
||||
};
|
||||
return e.jsxs("div", {
|
||||
className: "relative size-[40px] overflow-visible -rotate-[15deg]",
|
||||
children: [
|
||||
e.jsx("img", {
|
||||
src: s(t),
|
||||
alt: `Section ${t}`,
|
||||
className:
|
||||
"absolute left-1/2 top-1/2 -translate-x-1/2 -translate-y-1/2 size-[47.37px] max-w-none",
|
||||
}),
|
||||
e.jsx("div", {
|
||||
className: "absolute inset-0 flex items-center justify-center",
|
||||
children: e.jsx("span", {
|
||||
className:
|
||||
"text-[var(--font-size-body-small)] font-[var(--font-weight-bold)] text-[var(--color-content-inverse-primary)]",
|
||||
children: t,
|
||||
}),
|
||||
}),
|
||||
],
|
||||
});
|
||||
};
|
||||
a.__docgenInfo = { description: "", methods: [], displayName: "SectionNumber" };
|
||||
export { a as S };
|
||||
@@ -1,174 +0,0 @@
|
||||
import { j as e } from "./jsx-runtime-C_nHp4yK.js";
|
||||
import { S as r } from "./SectionNumber-Cptefv18.js";
|
||||
import "./iframe-D_aMTKb2.js";
|
||||
import "./preload-helper-DIZFD4sK.js";
|
||||
const u = {
|
||||
title: "Components/SectionNumber",
|
||||
component: r,
|
||||
parameters: {
|
||||
layout: "centered",
|
||||
docs: {
|
||||
description: {
|
||||
component:
|
||||
"A numbered icon component that displays a number overlaid on a PNG background image. The component uses different PNG images for numbers 1, 2, and 3, with the image extending beyond the 40px container size.",
|
||||
},
|
||||
},
|
||||
},
|
||||
argTypes: {
|
||||
number: {
|
||||
control: { type: "number", min: 1, max: 3 },
|
||||
description: "The number to display (1, 2, or 3)",
|
||||
},
|
||||
},
|
||||
tags: ["autodocs"],
|
||||
},
|
||||
n = { args: { number: 1 } },
|
||||
s = { args: { number: 2 } },
|
||||
o = { args: { number: 3 } },
|
||||
a = {
|
||||
render: () =>
|
||||
e.jsxs("div", {
|
||||
className: "flex space-x-4",
|
||||
children: [
|
||||
e.jsx(r, { number: 1 }),
|
||||
e.jsx(r, { number: 2 }),
|
||||
e.jsx(r, { number: 3 }),
|
||||
],
|
||||
}),
|
||||
parameters: {
|
||||
docs: {
|
||||
description: {
|
||||
story:
|
||||
"Shows all three numbered icons side by side to demonstrate the different PNG backgrounds.",
|
||||
},
|
||||
},
|
||||
},
|
||||
},
|
||||
t = {
|
||||
render: () =>
|
||||
e.jsx("div", {
|
||||
className: "bg-gray-100 p-8 rounded-lg",
|
||||
children: e.jsxs("div", {
|
||||
className: "flex space-x-4",
|
||||
children: [
|
||||
e.jsx(r, { number: 1 }),
|
||||
e.jsx(r, { number: 2 }),
|
||||
e.jsx(r, { number: 3 }),
|
||||
],
|
||||
}),
|
||||
}),
|
||||
parameters: {
|
||||
docs: {
|
||||
description: {
|
||||
story:
|
||||
"Shows the numbered icons on a background to demonstrate how the PNG images extend beyond the container.",
|
||||
},
|
||||
},
|
||||
},
|
||||
};
|
||||
n.parameters = {
|
||||
...n.parameters,
|
||||
docs: {
|
||||
...n.parameters?.docs,
|
||||
source: {
|
||||
originalSource: `{
|
||||
args: {
|
||||
number: 1
|
||||
}
|
||||
}`,
|
||||
...n.parameters?.docs?.source,
|
||||
},
|
||||
},
|
||||
};
|
||||
s.parameters = {
|
||||
...s.parameters,
|
||||
docs: {
|
||||
...s.parameters?.docs,
|
||||
source: {
|
||||
originalSource: `{
|
||||
args: {
|
||||
number: 2
|
||||
}
|
||||
}`,
|
||||
...s.parameters?.docs?.source,
|
||||
},
|
||||
},
|
||||
};
|
||||
o.parameters = {
|
||||
...o.parameters,
|
||||
docs: {
|
||||
...o.parameters?.docs,
|
||||
source: {
|
||||
originalSource: `{
|
||||
args: {
|
||||
number: 3
|
||||
}
|
||||
}`,
|
||||
...o.parameters?.docs?.source,
|
||||
},
|
||||
},
|
||||
};
|
||||
a.parameters = {
|
||||
...a.parameters,
|
||||
docs: {
|
||||
...a.parameters?.docs,
|
||||
source: {
|
||||
originalSource: `{
|
||||
render: () => <div className="flex space-x-4">
|
||||
<SectionNumber number={1} />
|
||||
<SectionNumber number={2} />
|
||||
<SectionNumber number={3} />
|
||||
</div>,
|
||||
parameters: {
|
||||
docs: {
|
||||
description: {
|
||||
story: "Shows all three numbered icons side by side to demonstrate the different PNG backgrounds."
|
||||
}
|
||||
}
|
||||
}
|
||||
}`,
|
||||
...a.parameters?.docs?.source,
|
||||
},
|
||||
},
|
||||
};
|
||||
t.parameters = {
|
||||
...t.parameters,
|
||||
docs: {
|
||||
...t.parameters?.docs,
|
||||
source: {
|
||||
originalSource: `{
|
||||
render: () => <div className="bg-gray-100 p-8 rounded-lg">
|
||||
<div className="flex space-x-4">
|
||||
<SectionNumber number={1} />
|
||||
<SectionNumber number={2} />
|
||||
<SectionNumber number={3} />
|
||||
</div>
|
||||
</div>,
|
||||
parameters: {
|
||||
docs: {
|
||||
description: {
|
||||
story: "Shows the numbered icons on a background to demonstrate how the PNG images extend beyond the container."
|
||||
}
|
||||
}
|
||||
}
|
||||
}`,
|
||||
...t.parameters?.docs?.source,
|
||||
},
|
||||
},
|
||||
};
|
||||
const b = [
|
||||
"NumberOne",
|
||||
"NumberTwo",
|
||||
"NumberThree",
|
||||
"AllNumbers",
|
||||
"WithBackground",
|
||||
];
|
||||
export {
|
||||
a as AllNumbers,
|
||||
n as NumberOne,
|
||||
o as NumberThree,
|
||||
s as NumberTwo,
|
||||
t as WithBackground,
|
||||
b as __namedExportsOrder,
|
||||
u as default,
|
||||
};
|
||||
Binary file not shown.
|
Before Width: | Height: | Size: 3.3 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 27 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 22 KiB |
@@ -1,15 +0,0 @@
|
||||
<svg width="28" height="28" viewBox="0 0 28 28" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<g clip-path="url(#clip0_18586_27811)">
|
||||
<mask id="mask0_18586_27811" style="mask-type:luminance" maskUnits="userSpaceOnUse" x="0" y="0" width="28" height="28">
|
||||
<path d="M27.2 0.399994L0 0.399994L0 27.6H27.2V0.399994Z" fill="white"/>
|
||||
</mask>
|
||||
<g mask="url(#mask0_18586_27811)">
|
||||
<path d="M13.6 24.0284C3.31356 32.6244 -5.02436 24.2865 3.57164 14C-5.02436 3.71355 3.31356 -4.62436 13.6 3.97164C23.8845 -4.62436 32.2244 3.71355 23.6284 14C32.2244 24.2786 23.8845 32.6244 13.6 24.0284Z" fill="black"/>
|
||||
</g>
|
||||
</g>
|
||||
<defs>
|
||||
<clipPath id="clip0_18586_27811">
|
||||
<rect width="27.2" height="27.2" fill="white" transform="translate(0 0.399994)"/>
|
||||
</clipPath>
|
||||
</defs>
|
||||
</svg>
|
||||
|
Before Width: | Height: | Size: 752 B |
@@ -1,3 +0,0 @@
|
||||
<svg width="105" height="42" viewBox="0 0 105 42" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<path d="M12.0492 10.0151C12.0492 4.49227 7.57203 0 2.04918 0H0V53H105V42.0635H44.0492C26.3761 42.0635 12.0492 27.6882 12.0492 10.0151Z" fill="#FEFCC9"/>
|
||||
</svg>
|
||||
|
Before Width: | Height: | Size: 259 B |
@@ -1,3 +0,0 @@
|
||||
<svg width="61" height="25" viewBox="0 0 61 25" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<path d="M7 0H0V31.5H61V25H31C17.7452 25 7 14.2548 7 1V0Z" fill="#FEFCC9"/>
|
||||
</svg>
|
||||
|
Before Width: | Height: | Size: 179 B |
@@ -1,3 +0,0 @@
|
||||
<svg width="105" height="42" viewBox="0 0 105 42" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<path d="M12.0492 10.0151C12.0492 4.49227 7.57203 0 2.04918 0H0V53H105V42.0635H44.0492C26.3761 42.0635 12.0492 27.6882 12.0492 10.0151Z" fill="#FEFCC9"/>
|
||||
</svg>
|
||||
|
Before Width: | Height: | Size: 259 B |
@@ -1,3 +0,0 @@
|
||||
<svg width="61" height="19" viewBox="0 0 61 19" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<path d="M7 0H0V24H61V19.0476H23C14.1634 19.0476 7 11.8842 7 3.04761V0Z" fill="#FEFCC9"/>
|
||||
</svg>
|
||||
|
Before Width: | Height: | Size: 193 B |
File diff suppressed because one or more lines are too long
File diff suppressed because it is too large
Load Diff
File diff suppressed because one or more lines are too long
@@ -1,26 +0,0 @@
|
||||
import { R as e } from "./iframe-D_aMTKb2.js";
|
||||
import "./preload-helper-DIZFD4sK.js";
|
||||
const o = {},
|
||||
c = e.createContext(o);
|
||||
function u(n) {
|
||||
const t = e.useContext(c);
|
||||
return e.useMemo(
|
||||
function () {
|
||||
return typeof n == "function" ? n(t) : { ...t, ...n };
|
||||
},
|
||||
[t, n],
|
||||
);
|
||||
}
|
||||
function r(n) {
|
||||
let t;
|
||||
return (
|
||||
n.disableParentContext
|
||||
? (t =
|
||||
typeof n.components == "function"
|
||||
? n.components(o)
|
||||
: n.components || o)
|
||||
: (t = u(n.components)),
|
||||
e.createElement(c.Provider, { value: t }, n.children)
|
||||
);
|
||||
}
|
||||
export { r as MDXProvider, u as useMDXComponents };
|
||||
@@ -1,3 +0,0 @@
|
||||
import { b as r } from "./iframe-D_aMTKb2.js";
|
||||
var s = r();
|
||||
export { s as j };
|
||||
File diff suppressed because it is too large
Load Diff
@@ -1,58 +0,0 @@
|
||||
const p = "modulepreload",
|
||||
v = function (l) {
|
||||
return "/CommunityRuleStorybook/" + l;
|
||||
},
|
||||
u = {},
|
||||
E = function (d, c, y) {
|
||||
let i = Promise.resolve();
|
||||
if (c && c.length > 0) {
|
||||
let m = function (e) {
|
||||
return Promise.all(
|
||||
e.map((o) =>
|
||||
Promise.resolve(o).then(
|
||||
(s) => ({ status: "fulfilled", value: s }),
|
||||
(s) => ({ status: "rejected", reason: s }),
|
||||
),
|
||||
),
|
||||
);
|
||||
};
|
||||
document.getElementsByTagName("link");
|
||||
const r = document.querySelector("meta[property=csp-nonce]"),
|
||||
t = r?.nonce || r?.getAttribute("nonce");
|
||||
i = m(
|
||||
c.map((e) => {
|
||||
if (((e = v(e)), e in u)) return;
|
||||
u[e] = !0;
|
||||
const o = e.endsWith(".css"),
|
||||
s = o ? '[rel="stylesheet"]' : "";
|
||||
if (document.querySelector(`link[href="${e}"]${s}`)) return;
|
||||
const n = document.createElement("link");
|
||||
if (
|
||||
((n.rel = o ? "stylesheet" : p),
|
||||
o || (n.as = "script"),
|
||||
(n.crossOrigin = ""),
|
||||
(n.href = e),
|
||||
t && n.setAttribute("nonce", t),
|
||||
document.head.appendChild(n),
|
||||
o)
|
||||
)
|
||||
return new Promise((f, h) => {
|
||||
(n.addEventListener("load", f),
|
||||
n.addEventListener("error", () =>
|
||||
h(new Error(`Unable to preload CSS for ${e}`)),
|
||||
));
|
||||
});
|
||||
}),
|
||||
);
|
||||
}
|
||||
function a(r) {
|
||||
const t = new Event("vite:preloadError", { cancelable: !0 });
|
||||
if (((t.payload = r), window.dispatchEvent(t), !t.defaultPrevented))
|
||||
throw r;
|
||||
}
|
||||
return i.then((r) => {
|
||||
for (const t of r || []) t.status === "rejected" && a(t.reason);
|
||||
return d().catch(a);
|
||||
});
|
||||
};
|
||||
export { E as _ };
|
||||
Vendored
-11504
File diff suppressed because it is too large
Load Diff
@@ -1,46 +0,0 @@
|
||||
<svg xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewBox="0 0 32 32">
|
||||
<defs>
|
||||
<mask id="active-mask">
|
||||
<rect x="0" y="0" width="32" height="32" fill="#FFF" />
|
||||
<path fill="#000" fill-rule="nonzero"
|
||||
d="M25,15.3 C26.8630998,15.3 28.7261995,16.2284418 29.795607,18.0853254 L29.795607,18.0853254 L34.7484772,26.6853254 C35.2679728,27.5873604 35.5068948,28.5446245 35.509009,29.4780654 C35.5112408,30.4762222 35.243212,31.4466974 34.7610935,32.2926531 C34.2789749,33.1386087 33.5826171,33.8603071 32.7267084,34.3600412 C31.9262928,34.8273748 30.9864445,35.1 29.9528702,35.1 L29.9528702,35.1 L20.0471298,35.1 C19.0135555,35.1 18.0737072,34.8273748 17.2732916,34.3600412 C16.4173829,33.8603071 15.7210251,33.1386087 15.2389065,32.2926531 C14.756788,31.4466974 14.4887592,30.4762222 14.490991,29.4780654 C14.4931052,28.5446245 14.7320272,27.5873604 15.2515228,26.6853254 L15.2515228,26.6853254 L20.204393,18.0853254 C21.2738005,16.2284418 23.1369002,15.3 25,15.3 Z"
|
||||
transform="rotate(90 25 25.2)" />
|
||||
</mask>
|
||||
<mask id="critical-mask">
|
||||
<rect x="0" y="0" width="32" height="32" fill="#FFF" />
|
||||
<path fill="#000" fill-rule="nonzero"
|
||||
d="M23.9,14.6 C26.7442665,14.6 29.3192665,15.7528668 31.1831998,17.6168002 C33.0471332,19.4807335 34.2,22.0557335 34.2,24.9 C34.2,27.7442665 33.0471332,30.3192665 31.1831998,32.1831998 C29.3192665,34.0471332 26.7442665,35.2 23.9,35.2 C21.0557335,35.2 18.4807335,34.0471332 16.6168002,32.1831998 C14.7528668,30.3192665 13.6,27.7442665 13.6,24.9 C13.6,22.0557335 14.7528668,19.4807335 16.6168002,17.6168002 C18.4807335,15.7528668 21.0557335,14.6 23.9,14.6 Z" />
|
||||
</mask>
|
||||
<mask id="negative-mask">
|
||||
<rect x="0" y="0" width="32" height="32" fill="#FFF" />
|
||||
<path fill="#000" fill-rule="nonzero"
|
||||
d="M28.2,14.8 C29.633165,14.8 31.06633,15.346734 32.159798,16.440202 C33.2414078,17.5218119 33.7880833,18.9357904 33.8,20.353376 C33.811544,21.7725108 33.2872104,23.1952877 32.2266806,24.2917914 L32.2266806,24.2917914 L31.7206,24.8006729 L32.159798,25.240202 C33.253266,26.33367 33.8,27.766835 33.8,29.2 C33.8,30.633165 33.253266,32.06633 32.159798,33.159798 C31.0781881,34.2414078 29.6642096,34.7880833 28.246624,34.8 C26.8274892,34.811544 25.4047123,34.2872104 24.3082086,33.2266806 L24.3082086,33.2266806 L23.7993271,32.7206 L23.359798,33.159798 C22.26633,34.253266 20.833165,34.8 19.4,34.8 C17.966835,34.8 16.53367,34.253266 15.440202,33.159798 C14.3585922,32.0781881 13.8119167,30.6642096 13.8,29.246624 C13.788456,27.8274892 14.3127896,26.4047123 15.3733194,25.3082086 L15.3733194,25.3082086 L15.8794,24.7993271 L15.440202,24.359798 C14.346734,23.26633 13.8,21.833165 13.8,20.4 C13.8,18.966835 14.346734,17.53367 15.440202,16.440202 C16.5218119,15.3585922 17.9357904,14.8119167 19.353376,14.8 C20.7725108,14.788456 22.1952877,15.3127896 23.2917914,16.3733194 L23.2917914,16.3733194 L23.8006729,16.8794 L24.240202,16.440202 C25.33367,15.346734 26.766835,14.8 28.2,14.8 Z" />
|
||||
</mask>
|
||||
<mask id="positive-mask">
|
||||
<rect x="0" y="0" width="32" height="32" fill="#FFF" />
|
||||
<path fill="#000" fill-rule="nonzero"
|
||||
d="M29.7294207,16.9922805 C31.1625744,16.9866282 32.5979013,17.5276612 33.6957071,18.6167741 C34.7816077,19.6940761 35.3338993,21.1058704 35.351258,22.5233982 C35.3686336,23.9423122 34.8500808,25.3669976 33.7941627,26.4676563 L33.7941627,26.4676563 L27.1794488,33.1363075 C26.0960963,34.2283069 24.675298,34.7802389 23.2508341,34.7920857 C21.8249459,34.8039445 20.3953569,34.27469 19.296927,33.2041927 L19.296927,33.2041927 L15.7761737,29.656491 C14.6870608,28.5586851 14.1460279,27.1233582 14.1516801,25.6902046 C14.1574213,24.2570509 14.7098478,22.8260705 15.8076536,21.7369576 C16.7544861,20.7976225 17.9523748,20.2659173 19.1834383,20.1411672 C20.4372495,20.0141119 21.7255226,20.3088158 22.8178242,21.0249737 L22.8178242,21.0249737 L23.1781395,21.2667759 L25.7761737,18.648254 C26.8652867,17.5504481 28.2962671,16.9980217 29.7294207,16.9922805 Z" />
|
||||
</mask>
|
||||
<mask id="warning-mask">
|
||||
<rect x="0" y="0" width="32" height="32" fill="#FFF" />
|
||||
<path fill="#000" fill-rule="nonzero"
|
||||
d="M23.8,14.8 C25.6808284,14.8 27.5616567,15.7284418 28.6412402,17.5853254 L28.6412402,17.5853254 L33.6412402,26.1853254 C34.1656792,27.0873604 34.4068747,28.0446245 34.409009,28.9780654 C34.4112621,29.9762222 34.1406828,30.9466974 33.6539766,31.7926531 C33.1672704,32.6386087 32.4642862,33.3603071 31.600233,33.8600412 C30.7922009,34.3273748 29.8434094,34.6 28.8,34.6 L28.8,34.6 L18.8,34.6 C17.7565906,34.6 16.8077991,34.3273748 15.999767,33.8600412 C15.1357138,33.3603071 14.4327296,32.6386087 13.9460234,31.7926531 C13.4593172,30.9466974 13.1887379,29.9762222 13.190991,28.9780654 C13.1931253,28.0446245 13.4343208,27.0873604 13.9587598,26.1853254 L13.9587598,26.1853254 L18.9587598,17.5853254 C20.0383433,15.7284418 21.9191716,14.8 23.8,14.8 Z" />
|
||||
</mask>
|
||||
|
||||
<polygon id="active" fill="none" stroke="#029CFD" stroke-linejoin="round" stroke-width="2.8"
|
||||
points="25 21 30 29.6 20 29.6" transform="rotate(90 25 25.3)" />
|
||||
<circle id="critical" fill="none" cx="23.9" cy="24.9" r="4.7" stroke="#000" stroke-linejoin="round"
|
||||
stroke-width="2.8" />
|
||||
<path id="negative" fill="none" stroke="#F40" stroke-linecap="round" stroke-linejoin="round" stroke-width="2.8"
|
||||
d="M19.4,20.4 L28.2,29.2 M28.2,20.4 L19.4,29.2" />
|
||||
<polyline id="positive" fill="none" stroke="#66BF3C" stroke-linecap="round" stroke-linejoin="round"
|
||||
stroke-width="2.8" points="19.752 25.712 23.204 29.192 29.752 22.592" />
|
||||
<polygon id="warning" fill="none" stroke="#FFAE00" stroke-linejoin="round" stroke-width="2.8"
|
||||
points="23.8 20.4 28.8 29 18.8 29" />
|
||||
</defs>
|
||||
|
||||
<g id="mask">
|
||||
<use id="icon" />
|
||||
</g>
|
||||
<use id="status" />
|
||||
</svg>
|
||||
|
Before Width: | Height: | Size: 5.7 KiB |
@@ -1 +0,0 @@
|
||||
<svg xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewBox="0 0 32 32"><g fill="none" fill-rule="evenodd"><path fill="#FF4785" fill-rule="nonzero" d="M3.19456517,29.5523576 L2.20116517,3.08035756 C2.16820317,2.206041 2.83853396,1.46497625 3.71176517,1.41035756 L26.2285652,0.00315756388 C26.6728415,-0.0246745074 27.1088544,0.132425741 27.4332785,0.437229126 C27.7577026,0.74203251 27.9415652,1.16741027 27.9415652,1.61255756 L27.9415652,30.4585576 C27.9415652,30.8987416 27.7615266,31.3197739 27.4433606,31.6239653 C27.1251947,31.9281568 26.6965078,32.0890657 26.2567652,32.0693576 L4.73376517,31.1027576 C3.89549138,31.0651477 3.22618762,30.3908861 3.19476517,29.5523576 L3.19456517,29.5523576 Z"/><path fill="#FFF" d="M24.4581652,0.113957564 L21.3591652,0.307557564 L21.2081652,3.94195756 C21.2043927,4.0349625 21.2546048,4.1217998 21.3370927,4.16492627 C21.4195807,4.20805273 21.5195442,4.19973049 21.5937652,4.14355756 L23.0057652,3.07275756 L24.1981652,4.01215756 C24.2717133,4.07021898 24.3722957,4.08025391 24.4558654,4.03786787 C24.539435,3.99548183 24.5907604,3.90840015 24.5873652,3.81475756 L24.4581652,0.113757564 L24.4581652,0.113957564 Z M22.0463652,12.2851576 C21.4791652,12.7257576 17.2533652,13.0265576 17.2533652,12.3991576 C17.3427652,10.0053576 16.2709652,9.90035756 15.6755652,9.90035756 C15.1099652,9.90035756 14.1575652,10.0713576 14.1575652,11.3537576 C14.1575652,12.6605576 15.5495652,13.3983576 17.1835652,14.2643576 C19.5049652,15.4943576 22.3143652,16.9831576 22.3143652,20.7295576 C22.3143652,24.3201576 19.3967652,26.3037576 15.6755652,26.3037576 C11.8353652,26.3037576 8.47936517,24.7499576 8.85836517,19.3633576 C9.00716517,18.7307576 13.8895652,18.8811576 13.8895652,19.3633576 C13.8299652,21.5861576 14.3359652,22.2399576 15.6161652,22.2399576 C16.5985652,22.2399576 17.0449652,21.6983576 17.0449652,20.7865576 C17.0449652,19.4065576 15.5945652,18.5919576 13.9259652,17.6551576 C11.6665652,16.3865576 9.00716517,14.8935576 9.00716517,11.4679576 C9.00716517,8.04835756 11.3591652,5.76855756 15.5565652,5.76855756 C19.7541652,5.76855756 22.0463652,8.01335756 22.0463652,12.2853576 L22.0463652,12.2851576 Z"/></g></svg>
|
||||
|
Before Width: | Height: | Size: 2.1 KiB |
@@ -1 +0,0 @@
|
||||
<svg fill="none" viewBox="0 0 16 16" xmlns="http://www.w3.org/2000/svg"><path d="M14.5 13.5V5.41a1 1 0 0 0-.3-.7L9.8.29A1 1 0 0 0 9.08 0H1.5v13.5A2.5 2.5 0 0 0 4 16h8a2.5 2.5 0 0 0 2.5-2.5m-1.5 0v-7H8v-5H3v12a1 1 0 0 0 1 1h8a1 1 0 0 0 1-1M9.5 5V2.12L12.38 5zM5.13 5h-.62v1.25h2.12V5zm-.62 3h7.12v1.25H4.5zm.62 3h-.62v1.25h7.12V11z" clip-rule="evenodd" fill="#666" fill-rule="evenodd"/></svg>
|
||||
|
Before Width: | Height: | Size: 391 B |
@@ -1 +0,0 @@
|
||||
<svg fill="none" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16"><g clip-path="url(#a)"><path fill-rule="evenodd" clip-rule="evenodd" d="M10.27 14.1a6.5 6.5 0 0 0 3.67-3.45q-1.24.21-2.7.34-.31 1.83-.97 3.1M8 16A8 8 0 1 0 8 0a8 8 0 0 0 0 16m.48-1.52a7 7 0 0 1-.96 0H7.5a4 4 0 0 1-.84-1.32q-.38-.89-.63-2.08a40 40 0 0 0 3.92 0q-.25 1.2-.63 2.08a4 4 0 0 1-.84 1.31zm2.94-4.76q1.66-.15 2.95-.43a7 7 0 0 0 0-2.58q-1.3-.27-2.95-.43a18 18 0 0 1 0 3.44m-1.27-3.54a17 17 0 0 1 0 3.64 39 39 0 0 1-4.3 0 17 17 0 0 1 0-3.64 39 39 0 0 1 4.3 0m1.1-1.17q1.45.13 2.69.34a6.5 6.5 0 0 0-3.67-3.44q.65 1.26.98 3.1M8.48 1.5l.01.02q.41.37.84 1.31.38.89.63 2.08a40 40 0 0 0-3.92 0q.25-1.2.63-2.08a4 4 0 0 1 .85-1.32 7 7 0 0 1 .96 0m-2.75.4a6.5 6.5 0 0 0-3.67 3.44 29 29 0 0 1 2.7-.34q.31-1.83.97-3.1M4.58 6.28q-1.66.16-2.95.43a7 7 0 0 0 0 2.58q1.3.27 2.95.43a18 18 0 0 1 0-3.44m.17 4.71q-1.45-.12-2.69-.34a6.5 6.5 0 0 0 3.67 3.44q-.65-1.27-.98-3.1" fill="#666"/></g><defs><clipPath id="a"><path fill="#fff" d="M0 0h16v16H0z"/></clipPath></defs></svg>
|
||||
|
Before Width: | Height: | Size: 1.0 KiB |
@@ -1,751 +0,0 @@
|
||||
<!doctype html>
|
||||
<!--suppress HtmlUnknownTarget -->
|
||||
<html lang="en">
|
||||
<head>
|
||||
<script type="module" src="/vite-inject-mocker-entry.js"></script>
|
||||
<meta charset="utf-8" />
|
||||
<title>Storybook</title>
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1" />
|
||||
|
||||
<style>
|
||||
@font-face {
|
||||
font-family: "Nunito Sans";
|
||||
font-style: normal;
|
||||
font-weight: 400;
|
||||
font-display: swap;
|
||||
src: url("./sb-common-assets/nunito-sans-regular.woff2") format("woff2");
|
||||
}
|
||||
|
||||
@font-face {
|
||||
font-family: "Nunito Sans";
|
||||
font-style: italic;
|
||||
font-weight: 400;
|
||||
font-display: swap;
|
||||
src: url("./sb-common-assets/nunito-sans-italic.woff2") format("woff2");
|
||||
}
|
||||
|
||||
@font-face {
|
||||
font-family: "Nunito Sans";
|
||||
font-style: normal;
|
||||
font-weight: 700;
|
||||
font-display: swap;
|
||||
src: url("./sb-common-assets/nunito-sans-bold.woff2") format("woff2");
|
||||
}
|
||||
|
||||
@font-face {
|
||||
font-family: "Nunito Sans";
|
||||
font-style: italic;
|
||||
font-weight: 700;
|
||||
font-display: swap;
|
||||
src: url("./sb-common-assets/nunito-sans-bold-italic.woff2")
|
||||
format("woff2");
|
||||
}
|
||||
</style>
|
||||
|
||||
<script>
|
||||
window.CONFIG_TYPE = "PRODUCTION";
|
||||
window.LOGLEVEL = "info";
|
||||
window.FRAMEWORK_OPTIONS = {};
|
||||
window.CHANNEL_OPTIONS = {};
|
||||
window.FEATURES = {
|
||||
argTypeTargetsV7: true,
|
||||
legacyDecoratorFileOrder: false,
|
||||
disallowImplicitActionsInRenderV8: true,
|
||||
viewport: true,
|
||||
highlight: true,
|
||||
controls: true,
|
||||
interactions: true,
|
||||
actions: true,
|
||||
backgrounds: true,
|
||||
outline: true,
|
||||
measure: true,
|
||||
};
|
||||
window.STORIES = [
|
||||
{
|
||||
titlePrefix: "",
|
||||
directory: "./stories",
|
||||
files: "**/*.mdx",
|
||||
importPathMatcher:
|
||||
"^\\.[\\\\/](?:stories(?:\\/(?!\\.)(?:(?:(?!(?:^|\\/)\\.).)*?)\\/|\\/|$)(?!\\.)(?=.)[^/]*?\\.mdx)$",
|
||||
},
|
||||
{
|
||||
titlePrefix: "",
|
||||
directory: "./stories",
|
||||
files: "**/*.stories.@(js|jsx|mjs|ts|tsx)",
|
||||
importPathMatcher:
|
||||
"^\\.[\\\\/](?:stories(?:\\/(?!\\.)(?:(?:(?!(?:^|\\/)\\.).)*?)\\/|\\/|$)(?!\\.)(?=.)[^/]*?\\.stories\\.(js|jsx|mjs|ts|tsx))$",
|
||||
},
|
||||
];
|
||||
window.DOCS_OPTIONS = { defaultName: "Docs" };
|
||||
window.TAGS_OPTIONS = {
|
||||
"dev-only": { excludeFromDocsStories: true },
|
||||
"docs-only": { excludeFromSidebar: true },
|
||||
"test-only": { excludeFromSidebar: true, excludeFromDocsStories: true },
|
||||
};
|
||||
|
||||
// We do this so that "module && module.hot" etc. in Storybook source code
|
||||
// doesn't fail (it will simply be disabled)
|
||||
window.module = undefined;
|
||||
window.global = window;
|
||||
</script>
|
||||
<base target="_parent" />
|
||||
|
||||
<style>
|
||||
/* While we aren't showing the main block yet, but still preparing, we want everything the user has rendered, which may or may not be in #storybook-root, to be display none */
|
||||
.sb-show-preparing-story:not(.sb-show-main) > :not(.sb-preparing-story) {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.sb-show-preparing-docs:not(.sb-show-main) > :not(.sb-preparing-docs) {
|
||||
display: none;
|
||||
}
|
||||
|
||||
/* Hide our own blocks when we aren't supposed to be showing them */
|
||||
:not(.sb-show-preparing-story) > .sb-preparing-story,
|
||||
:not(.sb-show-preparing-docs) > .sb-preparing-docs,
|
||||
:not(.sb-show-nopreview) > .sb-nopreview,
|
||||
:not(.sb-show-errordisplay) > .sb-errordisplay {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.sb-show-main.sb-main-centered {
|
||||
margin: 0;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
min-height: 100vh;
|
||||
}
|
||||
|
||||
.sb-show-main.sb-main-centered #storybook-root {
|
||||
box-sizing: border-box;
|
||||
margin: auto;
|
||||
padding: 1rem;
|
||||
max-height: 100%;
|
||||
/* Hack for centering correctly in IE11 */
|
||||
}
|
||||
|
||||
/* Vertical centering fix for IE11 */
|
||||
@media screen and (-ms-high-contrast: none), (-ms-high-contrast: active) {
|
||||
.sb-show-main.sb-main-centered:after {
|
||||
content: "";
|
||||
min-height: inherit;
|
||||
font-size: 0;
|
||||
}
|
||||
}
|
||||
|
||||
.sb-show-main.sb-main-fullscreen {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
display: block;
|
||||
}
|
||||
|
||||
.sb-show-main.sb-main-padded {
|
||||
margin: 0;
|
||||
padding: 1rem;
|
||||
display: block;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
.sb-wrapper {
|
||||
position: fixed;
|
||||
top: 0;
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
box-sizing: border-box;
|
||||
|
||||
padding: 40px;
|
||||
font-family:
|
||||
"Nunito Sans",
|
||||
-apple-system,
|
||||
".SFNSText-Regular",
|
||||
"San Francisco",
|
||||
BlinkMacSystemFont,
|
||||
"Segoe UI",
|
||||
"Helvetica Neue",
|
||||
Helvetica,
|
||||
Arial,
|
||||
sans-serif;
|
||||
-webkit-font-smoothing: antialiased;
|
||||
overflow: auto;
|
||||
}
|
||||
|
||||
@media (max-width: 700px) {
|
||||
.sb-wrapper {
|
||||
padding: 20px;
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-width: 500px) {
|
||||
.sb-wrapper {
|
||||
padding: 10px;
|
||||
}
|
||||
}
|
||||
|
||||
.sb-heading {
|
||||
font-size: 14px;
|
||||
font-weight: 600;
|
||||
letter-spacing: 0.2px;
|
||||
margin: 10px 0;
|
||||
padding-right: 25px;
|
||||
}
|
||||
|
||||
.sb-nopreview {
|
||||
display: flex;
|
||||
align-content: center;
|
||||
justify-content: center;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
.sb-nopreview_main {
|
||||
margin: auto;
|
||||
padding: 30px;
|
||||
border-radius: 10px;
|
||||
background: rgba(0, 0, 0, 0.03);
|
||||
}
|
||||
|
||||
.sb-nopreview_heading {
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.sb-errordisplay {
|
||||
background: #f6f9fc;
|
||||
color: black;
|
||||
z-index: 999999;
|
||||
width: 100vw;
|
||||
min-height: 100vh;
|
||||
box-sizing: border-box;
|
||||
|
||||
& ol {
|
||||
padding-left: 18px;
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
& h1 {
|
||||
font-family: Nunito Sans;
|
||||
font-size: 22px;
|
||||
font-weight: 400;
|
||||
line-height: 30px;
|
||||
font-weight: normal;
|
||||
margin: 0;
|
||||
|
||||
&::before {
|
||||
content: "";
|
||||
display: inline-block;
|
||||
width: 12px;
|
||||
height: 12px;
|
||||
background: #ff4400;
|
||||
border-radius: 50%;
|
||||
margin-right: 8px;
|
||||
}
|
||||
}
|
||||
|
||||
& p,
|
||||
& ol {
|
||||
font-family: Nunito Sans;
|
||||
font-size: 14px;
|
||||
font-weight: 400;
|
||||
line-height: 19px;
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
& li + li {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
padding-top: 12px;
|
||||
}
|
||||
|
||||
& a {
|
||||
color: currentColor;
|
||||
}
|
||||
}
|
||||
|
||||
.sb-errordisplay_main {
|
||||
margin: auto;
|
||||
padding: 24px;
|
||||
display: flex;
|
||||
box-sizing: border-box;
|
||||
|
||||
flex-direction: column;
|
||||
min-height: 100%;
|
||||
width: 100%;
|
||||
border-radius: 6px;
|
||||
background: white;
|
||||
border: 1px solid #ff0000;
|
||||
box-shadow: 0 0 64px rgba(0, 0, 0, 0.1);
|
||||
gap: 24px;
|
||||
}
|
||||
|
||||
.sb-errordisplay_code {
|
||||
padding: 10px;
|
||||
flex: 1;
|
||||
background: #242424;
|
||||
color: #c6c6c6;
|
||||
box-sizing: border-box;
|
||||
|
||||
font-size: 14px;
|
||||
font-weight: 400;
|
||||
line-height: 19px;
|
||||
border-radius: 4px;
|
||||
|
||||
font-family:
|
||||
"Operator Mono", "Fira Code Retina", "Fira Code", "FiraCode-Retina",
|
||||
"Andale Mono", "Lucida Console", Consolas, Monaco, monospace;
|
||||
margin: 0;
|
||||
overflow: auto;
|
||||
}
|
||||
|
||||
.sb-errordisplay pre {
|
||||
white-space: pre-wrap;
|
||||
white-space: revert;
|
||||
}
|
||||
|
||||
@-webkit-keyframes sb-rotate360 {
|
||||
from {
|
||||
transform: rotate(0deg);
|
||||
}
|
||||
|
||||
to {
|
||||
transform: rotate(360deg);
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes sb-rotate360 {
|
||||
from {
|
||||
transform: rotate(0deg);
|
||||
}
|
||||
|
||||
to {
|
||||
transform: rotate(360deg);
|
||||
}
|
||||
}
|
||||
|
||||
@-webkit-keyframes sb-glow {
|
||||
0%,
|
||||
100% {
|
||||
opacity: 1;
|
||||
}
|
||||
|
||||
50% {
|
||||
opacity: 0.4;
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes sb-glow {
|
||||
0%,
|
||||
100% {
|
||||
opacity: 1;
|
||||
}
|
||||
|
||||
50% {
|
||||
opacity: 0.4;
|
||||
}
|
||||
}
|
||||
|
||||
/* We display the preparing loaders *over* the rendering story */
|
||||
.sb-preparing-story,
|
||||
.sb-preparing-docs {
|
||||
background-color: white;
|
||||
/* Maximum possible z-index. It would be better to use stacking contexts to ensure it's always
|
||||
on top, but this isn't possible as it would require making CSS changes that could affect user code */
|
||||
z-index: 2147483647;
|
||||
}
|
||||
|
||||
.sb-loader {
|
||||
-webkit-animation: sb-rotate360 0.7s linear infinite;
|
||||
animation: sb-rotate360 0.7s linear infinite;
|
||||
border-color: rgba(97, 97, 97, 0.29);
|
||||
border-radius: 50%;
|
||||
border-style: solid;
|
||||
border-top-color: #646464;
|
||||
border-width: 2px;
|
||||
display: inline-block;
|
||||
height: 32px;
|
||||
left: 50%;
|
||||
margin-left: -16px;
|
||||
margin-top: -16px;
|
||||
mix-blend-mode: difference;
|
||||
overflow: hidden;
|
||||
position: absolute;
|
||||
top: 50%;
|
||||
transition: all 200ms ease-out;
|
||||
vertical-align: top;
|
||||
width: 32px;
|
||||
z-index: 4;
|
||||
}
|
||||
|
||||
.sb-previewBlock {
|
||||
background: #fff;
|
||||
border: 1px solid rgba(0, 0, 0, 0.1);
|
||||
border-radius: 4px;
|
||||
box-shadow: rgba(0, 0, 0, 0.1) 0 1px 3px 0;
|
||||
margin: 25px auto 40px;
|
||||
max-width: 600px;
|
||||
}
|
||||
|
||||
.sb-previewBlock_header {
|
||||
align-items: center;
|
||||
box-shadow: rgba(0, 0, 0, 0.1) 0 -1px 0 0 inset;
|
||||
display: flex;
|
||||
gap: 14px;
|
||||
height: 40px;
|
||||
padding: 0 12px;
|
||||
}
|
||||
|
||||
.sb-previewBlock_icon {
|
||||
-webkit-animation: sb-glow 1.5s ease-in-out infinite;
|
||||
animation: sb-glow 1.5s ease-in-out infinite;
|
||||
background: #e6e6e6;
|
||||
height: 14px;
|
||||
width: 14px;
|
||||
}
|
||||
|
||||
.sb-previewBlock_icon:last-child {
|
||||
margin-left: auto;
|
||||
}
|
||||
|
||||
.sb-previewBlock_body {
|
||||
-webkit-animation: sb-glow 1.5s ease-in-out infinite;
|
||||
animation: sb-glow 1.5s ease-in-out infinite;
|
||||
height: 182px;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.sb-argstableBlock {
|
||||
border-collapse: collapse;
|
||||
border-spacing: 0;
|
||||
font-size: 13px;
|
||||
line-height: 20px;
|
||||
margin: 25px auto 40px;
|
||||
max-width: 600px;
|
||||
text-align: left;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.sb-argstableBlock th:first-of-type,
|
||||
.sb-argstableBlock td:first-of-type {
|
||||
padding-left: 20px;
|
||||
}
|
||||
|
||||
.sb-argstableBlock th:nth-of-type(2),
|
||||
.sb-argstableBlock td:nth-of-type(2) {
|
||||
width: 35%;
|
||||
}
|
||||
|
||||
.sb-argstableBlock th:nth-of-type(3),
|
||||
.sb-argstableBlock td:nth-of-type(3) {
|
||||
width: 15%;
|
||||
}
|
||||
|
||||
.sb-argstableBlock th:last-of-type,
|
||||
.sb-argstableBlock td:last-of-type {
|
||||
width: 25%;
|
||||
padding-right: 20px;
|
||||
}
|
||||
|
||||
.sb-argstableBlock th span,
|
||||
.sb-argstableBlock td span {
|
||||
-webkit-animation: sb-glow 1.5s ease-in-out infinite;
|
||||
animation: sb-glow 1.5s ease-in-out infinite;
|
||||
background-color: rgba(0, 0, 0, 0.1);
|
||||
border-radius: 0;
|
||||
box-shadow: none;
|
||||
color: transparent;
|
||||
}
|
||||
|
||||
.sb-argstableBlock th {
|
||||
padding: 10px 15px;
|
||||
}
|
||||
|
||||
.sb-argstableBlock-body {
|
||||
border-radius: 4px;
|
||||
box-shadow:
|
||||
rgba(0, 0, 0, 0.1) 0 1px 3px 1px,
|
||||
rgba(0, 0, 0, 0.065) 0 0 0 1px;
|
||||
}
|
||||
|
||||
.sb-argstableBlock-body tr {
|
||||
background: transparent;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.sb-argstableBlock-body tr:not(:first-child) {
|
||||
border-top: 1px solid #e6e6e6;
|
||||
}
|
||||
|
||||
.sb-argstableBlock-body tr:first-child td:first-child {
|
||||
border-top-left-radius: 4px;
|
||||
}
|
||||
|
||||
.sb-argstableBlock-body tr:first-child td:last-child {
|
||||
border-top-right-radius: 4px;
|
||||
}
|
||||
|
||||
.sb-argstableBlock-body tr:last-child td:first-child {
|
||||
border-bottom-left-radius: 4px;
|
||||
}
|
||||
|
||||
.sb-argstableBlock-body tr:last-child td:last-child {
|
||||
border-bottom-right-radius: 4px;
|
||||
}
|
||||
|
||||
.sb-argstableBlock-body td {
|
||||
background: #fff;
|
||||
padding-bottom: 10px;
|
||||
padding-top: 10px;
|
||||
vertical-align: top;
|
||||
}
|
||||
|
||||
.sb-argstableBlock-body td:not(:first-of-type) {
|
||||
padding-left: 15px;
|
||||
padding-right: 15px;
|
||||
}
|
||||
|
||||
.sb-argstableBlock-body button {
|
||||
-webkit-animation: sb-glow 1.5s ease-in-out infinite;
|
||||
animation: sb-glow 1.5s ease-in-out infinite;
|
||||
background-color: rgba(0, 0, 0, 0.1);
|
||||
border: 0;
|
||||
border-radius: 0;
|
||||
box-shadow: none;
|
||||
color: transparent;
|
||||
display: inline;
|
||||
font-size: 12px;
|
||||
line-height: 1;
|
||||
padding: 10px 16px;
|
||||
}
|
||||
|
||||
.sb-argstableBlock-summary {
|
||||
margin-top: 4px;
|
||||
}
|
||||
|
||||
.sb-argstableBlock-code {
|
||||
margin-right: 4px;
|
||||
margin-bottom: 4px;
|
||||
padding: 2px 5px;
|
||||
}
|
||||
|
||||
.sb-sr-only,
|
||||
.sb-hidden-until-focus:not(:focus) {
|
||||
position: absolute;
|
||||
width: 1px;
|
||||
height: 1px;
|
||||
padding: 0px;
|
||||
margin: -1px;
|
||||
overflow: hidden;
|
||||
clip: rect(0, 0, 0, 0);
|
||||
border: none;
|
||||
}
|
||||
|
||||
.sb-hidden-until-focus {
|
||||
opacity: 0;
|
||||
transition: opacity 150ms ease-out;
|
||||
}
|
||||
|
||||
.sb-hidden-until-focus:focus {
|
||||
opacity: 1;
|
||||
}
|
||||
</style>
|
||||
|
||||
<script>
|
||||
/* globals window */
|
||||
try {
|
||||
if (window.top !== window) {
|
||||
window.__REACT_DEVTOOLS_GLOBAL_HOOK__ =
|
||||
window.top.__REACT_DEVTOOLS_GLOBAL_HOOK__;
|
||||
window.__VUE_DEVTOOLS_GLOBAL_HOOK__ =
|
||||
window.top.__VUE_DEVTOOLS_GLOBAL_HOOK__;
|
||||
window.top.__VUE_DEVTOOLS_CONTEXT__ = window.document;
|
||||
}
|
||||
} catch (e) {
|
||||
// eslint-disable-next-line no-console
|
||||
console.warn("unable to connect to top frame for connecting dev tools");
|
||||
}
|
||||
</script>
|
||||
|
||||
<script
|
||||
type="module"
|
||||
crossorigin
|
||||
src="/CommunityRuleStorybook/assets/iframe-D_aMTKb2.js"
|
||||
></script>
|
||||
<link
|
||||
rel="modulepreload"
|
||||
crossorigin
|
||||
href="/CommunityRuleStorybook/assets/preload-helper-DIZFD4sK.js"
|
||||
/>
|
||||
<link
|
||||
rel="stylesheet"
|
||||
crossorigin
|
||||
href="/CommunityRuleStorybook/assets/iframe-7VPDhVZ9.css"
|
||||
/>
|
||||
</head>
|
||||
|
||||
<body>
|
||||
<div class="sb-preparing-story sb-wrapper">
|
||||
<div class="sb-loader"></div>
|
||||
</div>
|
||||
|
||||
<div class="sb-preparing-docs sb-wrapper">
|
||||
<div class="sb-previewBlock">
|
||||
<div class="sb-previewBlock_header">
|
||||
<div class="sb-previewBlock_icon"></div>
|
||||
<div class="sb-previewBlock_icon"></div>
|
||||
<div class="sb-previewBlock_icon"></div>
|
||||
<div class="sb-previewBlock_icon"></div>
|
||||
</div>
|
||||
<div class="sb-previewBlock_body">
|
||||
<div class="sb-loader"></div>
|
||||
</div>
|
||||
</div>
|
||||
<table aria-hidden="true" class="sb-argstableBlock">
|
||||
<thead class="sb-argstableBlock-head">
|
||||
<tr>
|
||||
<th><span>Name</span></th>
|
||||
<th><span>Description</span></th>
|
||||
<th><span>Default</span></th>
|
||||
<th><span>Control </span></th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody class="sb-argstableBlock-body">
|
||||
<tr>
|
||||
<td><span>propertyName</span><span title="Required">*</span></td>
|
||||
<td>
|
||||
<div><span>This is a short description</span></div>
|
||||
<div class="sb-argstableBlock-summary">
|
||||
<div><span class="sb-argstableBlock-code">summary</span></div>
|
||||
</div>
|
||||
</td>
|
||||
<td>
|
||||
<div>
|
||||
<span class="sb-argstableBlock-code">defaultValue</span>
|
||||
</div>
|
||||
</td>
|
||||
<td><button>Set string</button></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td><span>propertyName</span><span>*</span></td>
|
||||
<td>
|
||||
<div><span>This is a short description</span></div>
|
||||
<div class="sb-argstableBlock-summary">
|
||||
<div><span class="sb-argstableBlock-code">summary</span></div>
|
||||
</div>
|
||||
</td>
|
||||
<td>
|
||||
<div>
|
||||
<span class="sb-argstableBlock-code">defaultValue</span>
|
||||
</div>
|
||||
</td>
|
||||
<td><button>Set string</button></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td><span>propertyName</span><span>*</span></td>
|
||||
<td>
|
||||
<div><span>This is a short description</span></div>
|
||||
<div class="sb-argstableBlock-summary">
|
||||
<div><span class="sb-argstableBlock-code">summary</span></div>
|
||||
</div>
|
||||
</td>
|
||||
<td>
|
||||
<div>
|
||||
<span class="sb-argstableBlock-code">defaultValue</span>
|
||||
</div>
|
||||
</td>
|
||||
<td><button>Set string</button></td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
|
||||
<div class="sb-nopreview sb-wrapper">
|
||||
<div class="sb-nopreview_main">
|
||||
<h1 class="sb-nopreview_heading sb-heading">No Preview</h1>
|
||||
<p>
|
||||
Sorry, but you either have no stories or none are selected somehow.
|
||||
</p>
|
||||
<ul>
|
||||
<li>Please check the Storybook config.</li>
|
||||
<li>Try reloading the page.</li>
|
||||
</ul>
|
||||
<p>
|
||||
If the problem persists, check the browser console, or the terminal
|
||||
you've run Storybook from.
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="sb-errordisplay sb-wrapper">
|
||||
<div class="sb-errordisplay_main">
|
||||
<h1 id="error-message"></h1>
|
||||
<p>
|
||||
The component failed to render properly, likely due to a configuration
|
||||
issue in Storybook. Here are some common causes and how you can
|
||||
address them:
|
||||
</p>
|
||||
<ol>
|
||||
<li>
|
||||
<strong>Missing Context/Providers</strong>: You can use decorators
|
||||
to supply specific contexts or providers, which are sometimes
|
||||
necessary for components to render correctly. For detailed
|
||||
instructions on using decorators, please visit the
|
||||
<a href="https://storybook.js.org/docs/writing-stories/decorators"
|
||||
>Decorators documentation</a
|
||||
>.
|
||||
</li>
|
||||
<li>
|
||||
<strong>Misconfigured Webpack or Vite</strong>: Verify that
|
||||
Storybook picks up all necessary settings for loaders, plugins, and
|
||||
other relevant parameters. You can find step-by-step guides for
|
||||
configuring
|
||||
<a href="https://storybook.js.org/docs/builders/webpack">Webpack</a>
|
||||
or
|
||||
<a href="https://storybook.js.org/docs/builders/vite">Vite</a>
|
||||
with Storybook.
|
||||
</li>
|
||||
<li>
|
||||
<strong>Missing Environment Variables</strong>: Your Storybook may
|
||||
require specific environment variables to function as intended. You
|
||||
can set up custom environment variables as outlined in the
|
||||
<a
|
||||
href="https://storybook.js.org/docs/configure/environment-variables"
|
||||
>Environment Variables documentation</a
|
||||
>.
|
||||
</li>
|
||||
</ol>
|
||||
<pre class="sb-errordisplay_code"><code id="error-stack"></code></pre>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div id="storybook-root"></div>
|
||||
<div id="storybook-docs"></div>
|
||||
<script>
|
||||
function __onViteAppLoadingError(event) {
|
||||
const hostname = globalThis.location.hostname;
|
||||
if (
|
||||
hostname !== "localhost" &&
|
||||
globalThis.CONFIG_TYPE === "DEVELOPMENT"
|
||||
) {
|
||||
const message = `Failed to load the Storybook preview file 'vite-app.js':
|
||||
|
||||
It looks like you're visiting the Storybook development server on another hostname than localhost: '${hostname}', but you haven't configured the necessary security features to support this.
|
||||
Please re-run your Storybook development server with the '--host ${hostname}' flag, or manually configure your Vite allowedHosts configuration with viteFinal.
|
||||
|
||||
See:`;
|
||||
const docs = [
|
||||
"https://storybook.js.org/docs/api/cli-options#dev",
|
||||
"https://storybook.js.org/docs/api/main-config/main-config-vite-final",
|
||||
"https://vite.dev/config/server-options.html#server-allowedhosts",
|
||||
];
|
||||
console.error(
|
||||
`${message}\n${docs.map((doc) => `- ${doc}`).join("\n")}`,
|
||||
);
|
||||
|
||||
document.getElementById("storybook-root").innerHTML =
|
||||
`<p style="color: red; max-width: 70ch">${message.replaceAll(
|
||||
"\n",
|
||||
"<br/>",
|
||||
)}<ul>${docs.map((doc) => `<li><a href='${doc}' target='_blank'>${doc}</a></li>`).join("")}<ul></p>`;
|
||||
return;
|
||||
}
|
||||
}
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
-141
@@ -1,141 +0,0 @@
|
||||
<!doctype html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="utf-8" />
|
||||
|
||||
<title>storybook - Storybook</title>
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1" />
|
||||
|
||||
<link rel="icon" type="image/svg+xml" href="./favicon.svg" />
|
||||
|
||||
<style>
|
||||
@font-face {
|
||||
font-family: "Nunito Sans";
|
||||
font-style: normal;
|
||||
font-weight: 400;
|
||||
font-display: swap;
|
||||
src: url("./sb-common-assets/nunito-sans-regular.woff2") format("woff2");
|
||||
}
|
||||
|
||||
@font-face {
|
||||
font-family: "Nunito Sans";
|
||||
font-style: italic;
|
||||
font-weight: 400;
|
||||
font-display: swap;
|
||||
src: url("./sb-common-assets/nunito-sans-italic.woff2") format("woff2");
|
||||
}
|
||||
|
||||
@font-face {
|
||||
font-family: "Nunito Sans";
|
||||
font-style: normal;
|
||||
font-weight: 700;
|
||||
font-display: swap;
|
||||
src: url("./sb-common-assets/nunito-sans-bold.woff2") format("woff2");
|
||||
}
|
||||
|
||||
@font-face {
|
||||
font-family: "Nunito Sans";
|
||||
font-style: italic;
|
||||
font-weight: 700;
|
||||
font-display: swap;
|
||||
src: url("./sb-common-assets/nunito-sans-bold-italic.woff2")
|
||||
format("woff2");
|
||||
}
|
||||
</style>
|
||||
|
||||
<link href="./sb-manager/runtime.js" rel="modulepreload" />
|
||||
|
||||
<link
|
||||
href="./sb-addons/storybook-core-server-presets-0/common-manager-bundle.js"
|
||||
rel="modulepreload"
|
||||
/>
|
||||
|
||||
<link
|
||||
href="./sb-addons/chromatic-com-storybook-1/manager-bundle.js"
|
||||
rel="modulepreload"
|
||||
/>
|
||||
|
||||
<link href="./sb-addons/docs-2/manager-bundle.js" rel="modulepreload" />
|
||||
|
||||
<link
|
||||
href="./sb-addons/onboarding-3/manager-bundle.js"
|
||||
rel="modulepreload"
|
||||
/>
|
||||
|
||||
<link href="./sb-addons/a11y-4/manager-bundle.js" rel="modulepreload" />
|
||||
|
||||
<link href="./sb-addons/vitest-5/manager-bundle.js" rel="modulepreload" />
|
||||
|
||||
<style>
|
||||
#storybook-root[hidden] {
|
||||
display: none !important;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<div id="root"></div>
|
||||
|
||||
<script>
|
||||
window["FEATURES"] = {
|
||||
argTypeTargetsV7: true,
|
||||
legacyDecoratorFileOrder: false,
|
||||
disallowImplicitActionsInRenderV8: true,
|
||||
viewport: true,
|
||||
highlight: true,
|
||||
controls: true,
|
||||
interactions: true,
|
||||
actions: true,
|
||||
backgrounds: true,
|
||||
outline: true,
|
||||
measure: true,
|
||||
};
|
||||
|
||||
window["REFS"] = {};
|
||||
|
||||
window["LOGLEVEL"] = "info";
|
||||
|
||||
window["DOCS_OPTIONS"] = {
|
||||
defaultName: "Docs",
|
||||
};
|
||||
|
||||
window["CONFIG_TYPE"] = "PRODUCTION";
|
||||
|
||||
window["TAGS_OPTIONS"] = {
|
||||
"dev-only": {
|
||||
excludeFromDocsStories: true,
|
||||
},
|
||||
"docs-only": {
|
||||
excludeFromSidebar: true,
|
||||
},
|
||||
"test-only": {
|
||||
excludeFromSidebar: true,
|
||||
excludeFromDocsStories: true,
|
||||
},
|
||||
};
|
||||
|
||||
window["STORYBOOK_RENDERER"] = "react";
|
||||
|
||||
window["STORYBOOK_BUILDER"] = "@storybook/builder-vite";
|
||||
|
||||
window["STORYBOOK_FRAMEWORK"] = "@storybook/nextjs-vite";
|
||||
</script>
|
||||
|
||||
<script type="module">
|
||||
import "./sb-manager/globals-runtime.js";
|
||||
|
||||
import "./sb-addons/storybook-core-server-presets-0/common-manager-bundle.js";
|
||||
|
||||
import "./sb-addons/chromatic-com-storybook-1/manager-bundle.js";
|
||||
|
||||
import "./sb-addons/docs-2/manager-bundle.js";
|
||||
|
||||
import "./sb-addons/onboarding-3/manager-bundle.js";
|
||||
|
||||
import "./sb-addons/a11y-4/manager-bundle.js";
|
||||
|
||||
import "./sb-addons/vitest-5/manager-bundle.js";
|
||||
|
||||
import "./sb-manager/runtime.js";
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
-694
@@ -1,694 +0,0 @@
|
||||
{
|
||||
"v": 5,
|
||||
"entries": {
|
||||
"components-avatar--docs": {
|
||||
"id": "components-avatar--docs",
|
||||
"title": "Components/Avatar",
|
||||
"name": "Docs",
|
||||
"importPath": "./stories/Avatar.stories.js",
|
||||
"type": "docs",
|
||||
"tags": ["dev", "test", "autodocs"],
|
||||
"storiesImports": []
|
||||
},
|
||||
"components-avatar--default": {
|
||||
"type": "story",
|
||||
"id": "components-avatar--default",
|
||||
"name": "Default",
|
||||
"title": "Components/Avatar",
|
||||
"importPath": "./stories/Avatar.stories.js",
|
||||
"componentPath": "./app/components/Avatar.js",
|
||||
"tags": ["dev", "test", "autodocs"]
|
||||
},
|
||||
"components-avatar--sizes": {
|
||||
"type": "story",
|
||||
"id": "components-avatar--sizes",
|
||||
"name": "Sizes",
|
||||
"title": "Components/Avatar",
|
||||
"importPath": "./stories/Avatar.stories.js",
|
||||
"componentPath": "./app/components/Avatar.js",
|
||||
"tags": ["dev", "test", "autodocs"]
|
||||
},
|
||||
"components-avatar--different-avatars": {
|
||||
"type": "story",
|
||||
"id": "components-avatar--different-avatars",
|
||||
"name": "Different Avatars",
|
||||
"title": "Components/Avatar",
|
||||
"importPath": "./stories/Avatar.stories.js",
|
||||
"componentPath": "./app/components/Avatar.js",
|
||||
"tags": ["dev", "test", "autodocs"]
|
||||
},
|
||||
"components-avatar--all-sizes-with-different-avatars": {
|
||||
"type": "story",
|
||||
"id": "components-avatar--all-sizes-with-different-avatars",
|
||||
"name": "All Sizes With Different Avatars",
|
||||
"title": "Components/Avatar",
|
||||
"importPath": "./stories/Avatar.stories.js",
|
||||
"componentPath": "./app/components/Avatar.js",
|
||||
"tags": ["dev", "test", "autodocs"]
|
||||
},
|
||||
"components-avatarcontainer--docs": {
|
||||
"id": "components-avatarcontainer--docs",
|
||||
"title": "Components/AvatarContainer",
|
||||
"name": "Docs",
|
||||
"importPath": "./stories/AvatarContainer.stories.js",
|
||||
"type": "docs",
|
||||
"tags": ["dev", "test", "autodocs"],
|
||||
"storiesImports": []
|
||||
},
|
||||
"components-avatarcontainer--default": {
|
||||
"type": "story",
|
||||
"id": "components-avatarcontainer--default",
|
||||
"name": "Default",
|
||||
"title": "Components/AvatarContainer",
|
||||
"importPath": "./stories/AvatarContainer.stories.js",
|
||||
"componentPath": "./app/components/AvatarContainer.js",
|
||||
"tags": ["dev", "test", "autodocs"]
|
||||
},
|
||||
"components-avatarcontainer--sizes": {
|
||||
"type": "story",
|
||||
"id": "components-avatarcontainer--sizes",
|
||||
"name": "Sizes",
|
||||
"title": "Components/AvatarContainer",
|
||||
"importPath": "./stories/AvatarContainer.stories.js",
|
||||
"componentPath": "./app/components/AvatarContainer.js",
|
||||
"tags": ["dev", "test", "autodocs"]
|
||||
},
|
||||
"components-avatarcontainer--different-group-sizes": {
|
||||
"type": "story",
|
||||
"id": "components-avatarcontainer--different-group-sizes",
|
||||
"name": "Different Group Sizes",
|
||||
"title": "Components/AvatarContainer",
|
||||
"importPath": "./stories/AvatarContainer.stories.js",
|
||||
"componentPath": "./app/components/AvatarContainer.js",
|
||||
"tags": ["dev", "test", "autodocs"]
|
||||
},
|
||||
"components-avatarcontainer--in-context": {
|
||||
"type": "story",
|
||||
"id": "components-avatarcontainer--in-context",
|
||||
"name": "In Context",
|
||||
"title": "Components/AvatarContainer",
|
||||
"importPath": "./stories/AvatarContainer.stories.js",
|
||||
"componentPath": "./app/components/AvatarContainer.js",
|
||||
"tags": ["dev", "test", "autodocs"]
|
||||
},
|
||||
"components-button--docs": {
|
||||
"id": "components-button--docs",
|
||||
"title": "Components/Button",
|
||||
"name": "Docs",
|
||||
"importPath": "./stories/Button.stories.js",
|
||||
"type": "docs",
|
||||
"tags": ["dev", "test", "autodocs"],
|
||||
"storiesImports": []
|
||||
},
|
||||
"components-button--default": {
|
||||
"type": "story",
|
||||
"id": "components-button--default",
|
||||
"name": "Default",
|
||||
"title": "Components/Button",
|
||||
"importPath": "./stories/Button.stories.js",
|
||||
"componentPath": "./app/components/Button.js",
|
||||
"tags": ["dev", "test", "autodocs"]
|
||||
},
|
||||
"components-button--variants": {
|
||||
"type": "story",
|
||||
"id": "components-button--variants",
|
||||
"name": "Variants",
|
||||
"title": "Components/Button",
|
||||
"importPath": "./stories/Button.stories.js",
|
||||
"componentPath": "./app/components/Button.js",
|
||||
"tags": ["dev", "test", "autodocs"]
|
||||
},
|
||||
"components-button--sizes": {
|
||||
"type": "story",
|
||||
"id": "components-button--sizes",
|
||||
"name": "Sizes",
|
||||
"title": "Components/Button",
|
||||
"importPath": "./stories/Button.stories.js",
|
||||
"componentPath": "./app/components/Button.js",
|
||||
"tags": ["dev", "test", "autodocs"]
|
||||
},
|
||||
"components-button--states": {
|
||||
"type": "story",
|
||||
"id": "components-button--states",
|
||||
"name": "States",
|
||||
"title": "Components/Button",
|
||||
"importPath": "./stories/Button.stories.js",
|
||||
"componentPath": "./app/components/Button.js",
|
||||
"tags": ["dev", "test", "autodocs"]
|
||||
},
|
||||
"components-button--all-variants": {
|
||||
"type": "story",
|
||||
"id": "components-button--all-variants",
|
||||
"name": "All Variants",
|
||||
"title": "Components/Button",
|
||||
"importPath": "./stories/Button.stories.js",
|
||||
"componentPath": "./app/components/Button.js",
|
||||
"tags": ["dev", "test", "autodocs"]
|
||||
},
|
||||
"components-contentlockup--docs": {
|
||||
"id": "components-contentlockup--docs",
|
||||
"title": "Components/ContentLockup",
|
||||
"name": "Docs",
|
||||
"importPath": "./stories/ContentLockup.stories.js",
|
||||
"type": "docs",
|
||||
"tags": ["dev", "test", "autodocs"],
|
||||
"storiesImports": []
|
||||
},
|
||||
"components-contentlockup--default": {
|
||||
"type": "story",
|
||||
"id": "components-contentlockup--default",
|
||||
"name": "Default",
|
||||
"title": "Components/ContentLockup",
|
||||
"importPath": "./stories/ContentLockup.stories.js",
|
||||
"componentPath": "./app/components/ContentLockup.js",
|
||||
"tags": ["dev", "test", "autodocs"]
|
||||
},
|
||||
"components-contentlockup--long-description": {
|
||||
"type": "story",
|
||||
"id": "components-contentlockup--long-description",
|
||||
"name": "Long Description",
|
||||
"title": "Components/ContentLockup",
|
||||
"importPath": "./stories/ContentLockup.stories.js",
|
||||
"componentPath": "./app/components/ContentLockup.js",
|
||||
"tags": ["dev", "test", "autodocs"]
|
||||
},
|
||||
"components-contentlockup--short-content": {
|
||||
"type": "story",
|
||||
"id": "components-contentlockup--short-content",
|
||||
"name": "Short Content",
|
||||
"title": "Components/ContentLockup",
|
||||
"importPath": "./stories/ContentLockup.stories.js",
|
||||
"componentPath": "./app/components/ContentLockup.js",
|
||||
"tags": ["dev", "test", "autodocs"]
|
||||
},
|
||||
"components-contentlockup--custom-button-styling": {
|
||||
"type": "story",
|
||||
"id": "components-contentlockup--custom-button-styling",
|
||||
"name": "Custom Button Styling",
|
||||
"title": "Components/ContentLockup",
|
||||
"importPath": "./stories/ContentLockup.stories.js",
|
||||
"componentPath": "./app/components/ContentLockup.js",
|
||||
"tags": ["dev", "test", "autodocs"]
|
||||
},
|
||||
"components-footer--docs": {
|
||||
"id": "components-footer--docs",
|
||||
"title": "Components/Footer",
|
||||
"name": "Docs",
|
||||
"importPath": "./stories/Footer.stories.js",
|
||||
"type": "docs",
|
||||
"tags": ["dev", "test", "autodocs"],
|
||||
"storiesImports": []
|
||||
},
|
||||
"components-footer--default": {
|
||||
"type": "story",
|
||||
"id": "components-footer--default",
|
||||
"name": "Default",
|
||||
"title": "Components/Footer",
|
||||
"importPath": "./stories/Footer.stories.js",
|
||||
"componentPath": "./app/components/Footer.js",
|
||||
"tags": ["dev", "test", "autodocs"]
|
||||
},
|
||||
"components-footer--in-page-context": {
|
||||
"type": "story",
|
||||
"id": "components-footer--in-page-context",
|
||||
"name": "In Page Context",
|
||||
"title": "Components/Footer",
|
||||
"importPath": "./stories/Footer.stories.js",
|
||||
"componentPath": "./app/components/Footer.js",
|
||||
"tags": ["dev", "test", "autodocs"]
|
||||
},
|
||||
"components-header--docs": {
|
||||
"id": "components-header--docs",
|
||||
"title": "Components/Header",
|
||||
"name": "Docs",
|
||||
"importPath": "./stories/Header.stories.js",
|
||||
"type": "docs",
|
||||
"tags": ["dev", "test", "autodocs"],
|
||||
"storiesImports": []
|
||||
},
|
||||
"components-header--default": {
|
||||
"type": "story",
|
||||
"id": "components-header--default",
|
||||
"name": "Default",
|
||||
"title": "Components/Header",
|
||||
"importPath": "./stories/Header.stories.js",
|
||||
"componentPath": "./app/components/Header.js",
|
||||
"tags": ["dev", "test", "autodocs"]
|
||||
},
|
||||
"components-header--in-page-context": {
|
||||
"type": "story",
|
||||
"id": "components-header--in-page-context",
|
||||
"name": "In Page Context",
|
||||
"title": "Components/Header",
|
||||
"importPath": "./stories/Header.stories.js",
|
||||
"componentPath": "./app/components/Header.js",
|
||||
"tags": ["dev", "test", "autodocs"]
|
||||
},
|
||||
"components-headertab--docs": {
|
||||
"id": "components-headertab--docs",
|
||||
"title": "Components/HeaderTab",
|
||||
"name": "Docs",
|
||||
"importPath": "./stories/HeaderTab.stories.js",
|
||||
"type": "docs",
|
||||
"tags": ["dev", "test", "autodocs"],
|
||||
"storiesImports": []
|
||||
},
|
||||
"components-headertab--default": {
|
||||
"type": "story",
|
||||
"id": "components-headertab--default",
|
||||
"name": "Default",
|
||||
"title": "Components/HeaderTab",
|
||||
"importPath": "./stories/HeaderTab.stories.js",
|
||||
"componentPath": "./app/components/HeaderTab.js",
|
||||
"tags": ["dev", "test", "autodocs"]
|
||||
},
|
||||
"components-herobanner--docs": {
|
||||
"id": "components-herobanner--docs",
|
||||
"title": "Components/HeroBanner",
|
||||
"name": "Docs",
|
||||
"importPath": "./stories/HeroBanner.stories.js",
|
||||
"type": "docs",
|
||||
"tags": ["dev", "test", "autodocs"],
|
||||
"storiesImports": []
|
||||
},
|
||||
"components-herobanner--default": {
|
||||
"type": "story",
|
||||
"id": "components-herobanner--default",
|
||||
"name": "Default",
|
||||
"title": "Components/HeroBanner",
|
||||
"importPath": "./stories/HeroBanner.stories.js",
|
||||
"componentPath": "./app/components/HeroBanner.js",
|
||||
"tags": ["dev", "test", "autodocs"]
|
||||
},
|
||||
"systems-herobanner-system--docs": {
|
||||
"id": "systems-herobanner-system--docs",
|
||||
"title": "Systems/HeroBanner System",
|
||||
"name": "Docs",
|
||||
"importPath": "./stories/HeroBannerSystem.stories.js",
|
||||
"type": "docs",
|
||||
"tags": ["dev", "test", "autodocs"],
|
||||
"storiesImports": []
|
||||
},
|
||||
"systems-herobanner-system--complete-system": {
|
||||
"type": "story",
|
||||
"id": "systems-herobanner-system--complete-system",
|
||||
"name": "Complete System",
|
||||
"title": "Systems/HeroBanner System",
|
||||
"importPath": "./stories/HeroBannerSystem.stories.js",
|
||||
"tags": ["dev", "test", "autodocs"]
|
||||
},
|
||||
"systems-herobanner-system--component-breakdown": {
|
||||
"type": "story",
|
||||
"id": "systems-herobanner-system--component-breakdown",
|
||||
"name": "Component Breakdown",
|
||||
"title": "Systems/HeroBanner System",
|
||||
"importPath": "./stories/HeroBannerSystem.stories.js",
|
||||
"tags": ["dev", "test", "autodocs"]
|
||||
},
|
||||
"systems-herobanner-system--responsive-breakpoints": {
|
||||
"type": "story",
|
||||
"id": "systems-herobanner-system--responsive-breakpoints",
|
||||
"name": "Responsive Breakpoints",
|
||||
"title": "Systems/HeroBanner System",
|
||||
"importPath": "./stories/HeroBannerSystem.stories.js",
|
||||
"tags": ["dev", "test", "autodocs"]
|
||||
},
|
||||
"systems-herobanner-system--content-variations": {
|
||||
"type": "story",
|
||||
"id": "systems-herobanner-system--content-variations",
|
||||
"name": "Content Variations",
|
||||
"title": "Systems/HeroBanner System",
|
||||
"importPath": "./stories/HeroBannerSystem.stories.js",
|
||||
"tags": ["dev", "test", "autodocs"]
|
||||
},
|
||||
"components-herodecor--docs": {
|
||||
"id": "components-herodecor--docs",
|
||||
"title": "Components/HeroDecor",
|
||||
"name": "Docs",
|
||||
"importPath": "./stories/HeroDecor.stories.js",
|
||||
"type": "docs",
|
||||
"tags": ["dev", "test", "autodocs"],
|
||||
"storiesImports": []
|
||||
},
|
||||
"components-herodecor--default": {
|
||||
"type": "story",
|
||||
"id": "components-herodecor--default",
|
||||
"name": "Default",
|
||||
"title": "Components/HeroDecor",
|
||||
"importPath": "./stories/HeroDecor.stories.js",
|
||||
"componentPath": "./app/components/HeroDecor.js",
|
||||
"tags": ["dev", "test", "autodocs"]
|
||||
},
|
||||
"components-herodecor--with-background": {
|
||||
"type": "story",
|
||||
"id": "components-herodecor--with-background",
|
||||
"name": "With Background",
|
||||
"title": "Components/HeroDecor",
|
||||
"importPath": "./stories/HeroDecor.stories.js",
|
||||
"componentPath": "./app/components/HeroDecor.js",
|
||||
"tags": ["dev", "test", "autodocs"]
|
||||
},
|
||||
"components-homeheader--docs": {
|
||||
"id": "components-homeheader--docs",
|
||||
"title": "Components/HomeHeader",
|
||||
"name": "Docs",
|
||||
"importPath": "./stories/HomeHeader.stories.js",
|
||||
"type": "docs",
|
||||
"tags": ["dev", "test", "autodocs"],
|
||||
"storiesImports": []
|
||||
},
|
||||
"components-homeheader--default": {
|
||||
"type": "story",
|
||||
"id": "components-homeheader--default",
|
||||
"name": "Default",
|
||||
"title": "Components/HomeHeader",
|
||||
"importPath": "./stories/HomeHeader.stories.js",
|
||||
"componentPath": "./app/components/HomeHeader.js",
|
||||
"tags": ["dev", "test", "autodocs"]
|
||||
},
|
||||
"components-homeheader--in-home-page-context": {
|
||||
"type": "story",
|
||||
"id": "components-homeheader--in-home-page-context",
|
||||
"name": "In Home Page Context",
|
||||
"title": "Components/HomeHeader",
|
||||
"importPath": "./stories/HomeHeader.stories.js",
|
||||
"componentPath": "./app/components/HomeHeader.js",
|
||||
"tags": ["dev", "test", "autodocs"]
|
||||
},
|
||||
"components-logo--docs": {
|
||||
"id": "components-logo--docs",
|
||||
"title": "Components/Logo",
|
||||
"name": "Docs",
|
||||
"importPath": "./stories/Logo.stories.js",
|
||||
"type": "docs",
|
||||
"tags": ["dev", "test", "autodocs"],
|
||||
"storiesImports": []
|
||||
},
|
||||
"components-logo--default": {
|
||||
"type": "story",
|
||||
"id": "components-logo--default",
|
||||
"name": "Default",
|
||||
"title": "Components/Logo",
|
||||
"importPath": "./stories/Logo.stories.js",
|
||||
"componentPath": "./app/components/Logo.js",
|
||||
"tags": ["dev", "test", "autodocs"]
|
||||
},
|
||||
"components-logo--sizes": {
|
||||
"type": "story",
|
||||
"id": "components-logo--sizes",
|
||||
"name": "Sizes",
|
||||
"title": "Components/Logo",
|
||||
"importPath": "./stories/Logo.stories.js",
|
||||
"componentPath": "./app/components/Logo.js",
|
||||
"tags": ["dev", "test", "autodocs"]
|
||||
},
|
||||
"components-logo--icon-only": {
|
||||
"type": "story",
|
||||
"id": "components-logo--icon-only",
|
||||
"name": "Icon Only",
|
||||
"title": "Components/Logo",
|
||||
"importPath": "./stories/Logo.stories.js",
|
||||
"componentPath": "./app/components/Logo.js",
|
||||
"tags": ["dev", "test", "autodocs"]
|
||||
},
|
||||
"components-logo--home-header-context": {
|
||||
"type": "story",
|
||||
"id": "components-logo--home-header-context",
|
||||
"name": "Home Header Context",
|
||||
"title": "Components/Logo",
|
||||
"importPath": "./stories/Logo.stories.js",
|
||||
"componentPath": "./app/components/Logo.js",
|
||||
"tags": ["dev", "test", "autodocs"]
|
||||
},
|
||||
"components-logo--header-context": {
|
||||
"type": "story",
|
||||
"id": "components-logo--header-context",
|
||||
"name": "Header Context",
|
||||
"title": "Components/Logo",
|
||||
"importPath": "./stories/Logo.stories.js",
|
||||
"componentPath": "./app/components/Logo.js",
|
||||
"tags": ["dev", "test", "autodocs"]
|
||||
},
|
||||
"components-logo--footer-context": {
|
||||
"type": "story",
|
||||
"id": "components-logo--footer-context",
|
||||
"name": "Footer Context",
|
||||
"title": "Components/Logo",
|
||||
"importPath": "./stories/Logo.stories.js",
|
||||
"componentPath": "./app/components/Logo.js",
|
||||
"tags": ["dev", "test", "autodocs"]
|
||||
},
|
||||
"components-menubar--docs": {
|
||||
"id": "components-menubar--docs",
|
||||
"title": "Components/MenuBar",
|
||||
"name": "Docs",
|
||||
"importPath": "./stories/MenuBar.stories.js",
|
||||
"type": "docs",
|
||||
"tags": ["dev", "test", "autodocs"],
|
||||
"storiesImports": []
|
||||
},
|
||||
"components-menubar--default": {
|
||||
"type": "story",
|
||||
"id": "components-menubar--default",
|
||||
"name": "Default",
|
||||
"title": "Components/MenuBar",
|
||||
"importPath": "./stories/MenuBar.stories.js",
|
||||
"componentPath": "./app/components/MenuBar.js",
|
||||
"tags": ["dev", "test", "autodocs"]
|
||||
},
|
||||
"components-menubar--sizes": {
|
||||
"type": "story",
|
||||
"id": "components-menubar--sizes",
|
||||
"name": "Sizes",
|
||||
"title": "Components/MenuBar",
|
||||
"importPath": "./stories/MenuBar.stories.js",
|
||||
"componentPath": "./app/components/MenuBar.js",
|
||||
"tags": ["dev", "test", "autodocs"]
|
||||
},
|
||||
"components-menubaritem--docs": {
|
||||
"id": "components-menubaritem--docs",
|
||||
"title": "Components/MenuBarItem",
|
||||
"name": "Docs",
|
||||
"importPath": "./stories/MenuBarItem.stories.js",
|
||||
"type": "docs",
|
||||
"tags": ["dev", "test", "autodocs"],
|
||||
"storiesImports": []
|
||||
},
|
||||
"components-menubaritem--default": {
|
||||
"type": "story",
|
||||
"id": "components-menubaritem--default",
|
||||
"name": "Default",
|
||||
"title": "Components/MenuBarItem",
|
||||
"importPath": "./stories/MenuBarItem.stories.js",
|
||||
"componentPath": "./app/components/MenuBarItem.js",
|
||||
"tags": ["dev", "test", "autodocs"]
|
||||
},
|
||||
"components-menubaritem--variants": {
|
||||
"type": "story",
|
||||
"id": "components-menubaritem--variants",
|
||||
"name": "Variants",
|
||||
"title": "Components/MenuBarItem",
|
||||
"importPath": "./stories/MenuBarItem.stories.js",
|
||||
"componentPath": "./app/components/MenuBarItem.js",
|
||||
"tags": ["dev", "test", "autodocs"]
|
||||
},
|
||||
"components-menubaritem--sizes": {
|
||||
"type": "story",
|
||||
"id": "components-menubaritem--sizes",
|
||||
"name": "Sizes",
|
||||
"title": "Components/MenuBarItem",
|
||||
"importPath": "./stories/MenuBarItem.stories.js",
|
||||
"componentPath": "./app/components/MenuBarItem.js",
|
||||
"tags": ["dev", "test", "autodocs"]
|
||||
},
|
||||
"components-menubaritem--states": {
|
||||
"type": "story",
|
||||
"id": "components-menubaritem--states",
|
||||
"name": "States",
|
||||
"title": "Components/MenuBarItem",
|
||||
"importPath": "./stories/MenuBarItem.stories.js",
|
||||
"componentPath": "./app/components/MenuBarItem.js",
|
||||
"tags": ["dev", "test", "autodocs"]
|
||||
},
|
||||
"components-menubaritem--all-variants": {
|
||||
"type": "story",
|
||||
"id": "components-menubaritem--all-variants",
|
||||
"name": "All Variants",
|
||||
"title": "Components/MenuBarItem",
|
||||
"importPath": "./stories/MenuBarItem.stories.js",
|
||||
"componentPath": "./app/components/MenuBarItem.js",
|
||||
"tags": ["dev", "test", "autodocs"]
|
||||
},
|
||||
"components-numberedcard--docs": {
|
||||
"id": "components-numberedcard--docs",
|
||||
"title": "Components/NumberedCard",
|
||||
"name": "Docs",
|
||||
"importPath": "./stories/NumberedCard.stories.js",
|
||||
"type": "docs",
|
||||
"tags": ["dev", "test", "autodocs"],
|
||||
"storiesImports": []
|
||||
},
|
||||
"components-numberedcard--default": {
|
||||
"type": "story",
|
||||
"id": "components-numberedcard--default",
|
||||
"name": "Default",
|
||||
"title": "Components/NumberedCard",
|
||||
"importPath": "./stories/NumberedCard.stories.js",
|
||||
"componentPath": "./app/components/NumberedCard.js",
|
||||
"tags": ["dev", "test", "autodocs"]
|
||||
},
|
||||
"components-numberedcard--all-numbers": {
|
||||
"type": "story",
|
||||
"id": "components-numberedcard--all-numbers",
|
||||
"name": "All Numbers",
|
||||
"title": "Components/NumberedCard",
|
||||
"importPath": "./stories/NumberedCard.stories.js",
|
||||
"componentPath": "./app/components/NumberedCard.js",
|
||||
"tags": ["dev", "test", "autodocs"]
|
||||
},
|
||||
"components-numberedcard--long-text": {
|
||||
"type": "story",
|
||||
"id": "components-numberedcard--long-text",
|
||||
"name": "Long Text",
|
||||
"title": "Components/NumberedCard",
|
||||
"importPath": "./stories/NumberedCard.stories.js",
|
||||
"componentPath": "./app/components/NumberedCard.js",
|
||||
"tags": ["dev", "test", "autodocs"]
|
||||
},
|
||||
"components-numberedcards--docs": {
|
||||
"id": "components-numberedcards--docs",
|
||||
"title": "Components/NumberedCards",
|
||||
"name": "Docs",
|
||||
"importPath": "./stories/NumberedCards.stories.js",
|
||||
"type": "docs",
|
||||
"tags": ["dev", "test", "autodocs"],
|
||||
"storiesImports": []
|
||||
},
|
||||
"components-numberedcards--default": {
|
||||
"type": "story",
|
||||
"id": "components-numberedcards--default",
|
||||
"name": "Default",
|
||||
"title": "Components/NumberedCards",
|
||||
"importPath": "./stories/NumberedCards.stories.js",
|
||||
"componentPath": "./app/components/NumberedCards.js",
|
||||
"tags": ["dev", "test", "autodocs"]
|
||||
},
|
||||
"components-numberedcards--custom-content": {
|
||||
"type": "story",
|
||||
"id": "components-numberedcards--custom-content",
|
||||
"name": "Custom Content",
|
||||
"title": "Components/NumberedCards",
|
||||
"importPath": "./stories/NumberedCards.stories.js",
|
||||
"componentPath": "./app/components/NumberedCards.js",
|
||||
"tags": ["dev", "test", "autodocs"]
|
||||
},
|
||||
"components-sectionheader--docs": {
|
||||
"id": "components-sectionheader--docs",
|
||||
"title": "Components/SectionHeader",
|
||||
"name": "Docs",
|
||||
"importPath": "./stories/SectionHeader.stories.js",
|
||||
"type": "docs",
|
||||
"tags": ["dev", "test", "autodocs"],
|
||||
"storiesImports": []
|
||||
},
|
||||
"components-sectionheader--default": {
|
||||
"type": "story",
|
||||
"id": "components-sectionheader--default",
|
||||
"name": "Default",
|
||||
"title": "Components/SectionHeader",
|
||||
"importPath": "./stories/SectionHeader.stories.js",
|
||||
"componentPath": "./app/components/SectionHeader.js",
|
||||
"tags": ["dev", "test", "autodocs"]
|
||||
},
|
||||
"components-sectionheader--custom-content": {
|
||||
"type": "story",
|
||||
"id": "components-sectionheader--custom-content",
|
||||
"name": "Custom Content",
|
||||
"title": "Components/SectionHeader",
|
||||
"importPath": "./stories/SectionHeader.stories.js",
|
||||
"componentPath": "./app/components/SectionHeader.js",
|
||||
"tags": ["dev", "test", "autodocs"]
|
||||
},
|
||||
"components-sectionheader--long-subtitle": {
|
||||
"type": "story",
|
||||
"id": "components-sectionheader--long-subtitle",
|
||||
"name": "Long Subtitle",
|
||||
"title": "Components/SectionHeader",
|
||||
"importPath": "./stories/SectionHeader.stories.js",
|
||||
"componentPath": "./app/components/SectionHeader.js",
|
||||
"tags": ["dev", "test", "autodocs"]
|
||||
},
|
||||
"components-sectionheader--responsive-test": {
|
||||
"type": "story",
|
||||
"id": "components-sectionheader--responsive-test",
|
||||
"name": "Responsive Test",
|
||||
"title": "Components/SectionHeader",
|
||||
"importPath": "./stories/SectionHeader.stories.js",
|
||||
"componentPath": "./app/components/SectionHeader.js",
|
||||
"tags": ["dev", "test", "autodocs"]
|
||||
},
|
||||
"components-sectionheader--without-title-lg": {
|
||||
"type": "story",
|
||||
"id": "components-sectionheader--without-title-lg",
|
||||
"name": "Without Title Lg",
|
||||
"title": "Components/SectionHeader",
|
||||
"importPath": "./stories/SectionHeader.stories.js",
|
||||
"componentPath": "./app/components/SectionHeader.js",
|
||||
"tags": ["dev", "test", "autodocs"]
|
||||
},
|
||||
"components-sectionnumber--docs": {
|
||||
"id": "components-sectionnumber--docs",
|
||||
"title": "Components/SectionNumber",
|
||||
"name": "Docs",
|
||||
"importPath": "./stories/SectionNumber.stories.js",
|
||||
"type": "docs",
|
||||
"tags": ["dev", "test", "autodocs"],
|
||||
"storiesImports": []
|
||||
},
|
||||
"components-sectionnumber--number-one": {
|
||||
"type": "story",
|
||||
"id": "components-sectionnumber--number-one",
|
||||
"name": "Number One",
|
||||
"title": "Components/SectionNumber",
|
||||
"importPath": "./stories/SectionNumber.stories.js",
|
||||
"componentPath": "./app/components/SectionNumber.js",
|
||||
"tags": ["dev", "test", "autodocs"]
|
||||
},
|
||||
"components-sectionnumber--number-two": {
|
||||
"type": "story",
|
||||
"id": "components-sectionnumber--number-two",
|
||||
"name": "Number Two",
|
||||
"title": "Components/SectionNumber",
|
||||
"importPath": "./stories/SectionNumber.stories.js",
|
||||
"componentPath": "./app/components/SectionNumber.js",
|
||||
"tags": ["dev", "test", "autodocs"]
|
||||
},
|
||||
"components-sectionnumber--number-three": {
|
||||
"type": "story",
|
||||
"id": "components-sectionnumber--number-three",
|
||||
"name": "Number Three",
|
||||
"title": "Components/SectionNumber",
|
||||
"importPath": "./stories/SectionNumber.stories.js",
|
||||
"componentPath": "./app/components/SectionNumber.js",
|
||||
"tags": ["dev", "test", "autodocs"]
|
||||
},
|
||||
"components-sectionnumber--all-numbers": {
|
||||
"type": "story",
|
||||
"id": "components-sectionnumber--all-numbers",
|
||||
"name": "All Numbers",
|
||||
"title": "Components/SectionNumber",
|
||||
"importPath": "./stories/SectionNumber.stories.js",
|
||||
"componentPath": "./app/components/SectionNumber.js",
|
||||
"tags": ["dev", "test", "autodocs"]
|
||||
},
|
||||
"components-sectionnumber--with-background": {
|
||||
"type": "story",
|
||||
"id": "components-sectionnumber--with-background",
|
||||
"name": "With Background",
|
||||
"title": "Components/SectionNumber",
|
||||
"importPath": "./stories/SectionNumber.stories.js",
|
||||
"componentPath": "./app/components/SectionNumber.js",
|
||||
"tags": ["dev", "test", "autodocs"]
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -1 +0,0 @@
|
||||
<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 394 80"><path fill="#000" d="M262 0h68.5v12.7h-27.2v66.6h-13.6V12.7H262V0ZM149 0v12.7H94v20.4h44.3v12.6H94v21h55v12.6H80.5V0h68.7zm34.3 0h-17.8l63.8 79.4h17.9l-32-39.7 32-39.6h-17.9l-23 28.6-23-28.6zm18.3 56.7-9-11-27.1 33.7h17.8l18.3-22.7z"/><path fill="#000" d="M81 79.3 17 0H0v79.3h13.6V17l50.2 62.3H81Zm252.6-.4c-1 0-1.8-.4-2.5-1s-1.1-1.6-1.1-2.6.3-1.8 1-2.5 1.6-1 2.6-1 1.8.3 2.5 1a3.4 3.4 0 0 1 .6 4.3 3.7 3.7 0 0 1-3 1.8zm23.2-33.5h6v23.3c0 2.1-.4 4-1.3 5.5a9.1 9.1 0 0 1-3.8 3.5c-1.6.8-3.5 1.3-5.7 1.3-2 0-3.7-.4-5.3-1s-2.8-1.8-3.7-3.2c-.9-1.3-1.4-3-1.4-5h6c.1.8.3 1.6.7 2.2s1 1.2 1.6 1.5c.7.4 1.5.5 2.4.5 1 0 1.8-.2 2.4-.6a4 4 0 0 0 1.6-1.8c.3-.8.5-1.8.5-3V45.5zm30.9 9.1a4.4 4.4 0 0 0-2-3.3 7.5 7.5 0 0 0-4.3-1.1c-1.3 0-2.4.2-3.3.5-.9.4-1.6 1-2 1.6a3.5 3.5 0 0 0-.3 4c.3.5.7.9 1.3 1.2l1.8 1 2 .5 3.2.8c1.3.3 2.5.7 3.7 1.2a13 13 0 0 1 3.2 1.8 8.1 8.1 0 0 1 3 6.5c0 2-.5 3.7-1.5 5.1a10 10 0 0 1-4.4 3.5c-1.8.8-4.1 1.2-6.8 1.2-2.6 0-4.9-.4-6.8-1.2-2-.8-3.4-2-4.5-3.5a10 10 0 0 1-1.7-5.6h6a5 5 0 0 0 3.5 4.6c1 .4 2.2.6 3.4.6 1.3 0 2.5-.2 3.5-.6 1-.4 1.8-1 2.4-1.7a4 4 0 0 0 .8-2.4c0-.9-.2-1.6-.7-2.2a11 11 0 0 0-2.1-1.4l-3.2-1-3.8-1c-2.8-.7-5-1.7-6.6-3.2a7.2 7.2 0 0 1-2.4-5.7 8 8 0 0 1 1.7-5 10 10 0 0 1 4.3-3.5c2-.8 4-1.2 6.4-1.2 2.3 0 4.4.4 6.2 1.2 1.8.8 3.2 2 4.3 3.4 1 1.4 1.5 3 1.5 5h-5.8z"/></svg>
|
||||
|
Before Width: | Height: | Size: 1.3 KiB |
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
@@ -1,50 +0,0 @@
|
||||
{
|
||||
"generatedAt": 1755714532484,
|
||||
"userSince": 1754920905774,
|
||||
"hasCustomBabel": false,
|
||||
"hasCustomWebpack": false,
|
||||
"hasStaticDirs": true,
|
||||
"hasStorybookEslint": true,
|
||||
"refCount": 0,
|
||||
"metaFramework": {
|
||||
"name": "Next",
|
||||
"packageName": "next",
|
||||
"version": "15.2.4"
|
||||
},
|
||||
"testPackages": {
|
||||
"@chromatic-com/storybook": "4.1.0",
|
||||
"@storybook/addon-vitest": "9.1.2",
|
||||
"@vitest/browser": "3.2.4",
|
||||
"@vitest/coverage-v8": "3.2.4",
|
||||
"playwright": "1.54.2",
|
||||
"vitest": "3.2.4"
|
||||
},
|
||||
"hasRouterPackage": true,
|
||||
"packageManager": {
|
||||
"type": "npm",
|
||||
"agent": "npm",
|
||||
"nodeLinker": "node_modules"
|
||||
},
|
||||
"preview": { "usesGlobals": false },
|
||||
"framework": { "name": "@storybook/nextjs-vite", "options": {} },
|
||||
"builder": "@storybook/builder-vite",
|
||||
"renderer": "@storybook/react",
|
||||
"portableStoriesFileCount": 0,
|
||||
"applicationFileCount": 1,
|
||||
"storybookVersion": "9.1.2",
|
||||
"language": "javascript",
|
||||
"storybookPackages": {
|
||||
"@storybook/addon-styling-webpack": { "version": "2.0.0" },
|
||||
"@storybook/addon-viewport": { "version": "9.0.8" },
|
||||
"@storybook/nextjs-vite": { "version": "9.1.2" },
|
||||
"eslint-plugin-storybook": { "version": "9.1.2" },
|
||||
"storybook": { "version": "9.1.2" }
|
||||
},
|
||||
"addons": {
|
||||
"@chromatic-com/storybook": { "version": "4.1.0" },
|
||||
"@storybook/addon-docs": { "version": "9.1.2" },
|
||||
"@storybook/addon-onboarding": { "version": "9.1.2" },
|
||||
"@storybook/addon-a11y": { "version": "9.1.2" },
|
||||
"@storybook/addon-vitest": { "version": "9.1.2" }
|
||||
}
|
||||
}
|
||||
File diff suppressed because it is too large
Load Diff
File diff suppressed because one or more lines are too long
@@ -1,40 +0,0 @@
|
||||
Bundled license information:
|
||||
|
||||
filesize/dist/filesize.esm.js:
|
||||
/**
|
||||
* filesize
|
||||
*
|
||||
* @copyright 2024 Jason Mulligan <jason.mulligan@avoidwork.com>
|
||||
* @license BSD-3-Clause
|
||||
* @version 10.1.6
|
||||
*/
|
||||
|
||||
@chromatic-com/storybook/dist/manager.mjs:
|
||||
/*! Bundled license information:
|
||||
|
||||
popper.js/dist/esm/popper.js:
|
||||
(**!
|
||||
* @fileOverview Kickass library to create and place poppers near their reference elements.
|
||||
* @version 1.16.1
|
||||
* @license
|
||||
* Copyright (c) 2016 Federico Zivolo and contributors
|
||||
*
|
||||
* Permission is hereby granted, free of charge, to any person obtaining a copy
|
||||
* of this software and associated documentation files (the "Software"), to deal
|
||||
* in the Software without restriction, including without limitation the rights
|
||||
* to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
|
||||
* copies of the Software, and to permit persons to whom the Software is
|
||||
* furnished to do so, subject to the following conditions:
|
||||
*
|
||||
* The above copyright notice and this permission notice shall be included in all
|
||||
* copies or substantial portions of the Software.
|
||||
*
|
||||
* THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
|
||||
* IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
|
||||
* FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
|
||||
* AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
|
||||
* LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
|
||||
* OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
|
||||
* SOFTWARE.
|
||||
*)
|
||||
*/
|
||||
File diff suppressed because it is too large
Load Diff
File diff suppressed because it is too large
Load Diff
File diff suppressed because it is too large
Load Diff
File diff suppressed because it is too large
Load Diff
@@ -1,46 +0,0 @@
|
||||
<svg xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewBox="0 0 32 32">
|
||||
<defs>
|
||||
<mask id="active-mask">
|
||||
<rect x="0" y="0" width="32" height="32" fill="#FFF" />
|
||||
<path fill="#000" fill-rule="nonzero"
|
||||
d="M25,15.3 C26.8630998,15.3 28.7261995,16.2284418 29.795607,18.0853254 L29.795607,18.0853254 L34.7484772,26.6853254 C35.2679728,27.5873604 35.5068948,28.5446245 35.509009,29.4780654 C35.5112408,30.4762222 35.243212,31.4466974 34.7610935,32.2926531 C34.2789749,33.1386087 33.5826171,33.8603071 32.7267084,34.3600412 C31.9262928,34.8273748 30.9864445,35.1 29.9528702,35.1 L29.9528702,35.1 L20.0471298,35.1 C19.0135555,35.1 18.0737072,34.8273748 17.2732916,34.3600412 C16.4173829,33.8603071 15.7210251,33.1386087 15.2389065,32.2926531 C14.756788,31.4466974 14.4887592,30.4762222 14.490991,29.4780654 C14.4931052,28.5446245 14.7320272,27.5873604 15.2515228,26.6853254 L15.2515228,26.6853254 L20.204393,18.0853254 C21.2738005,16.2284418 23.1369002,15.3 25,15.3 Z"
|
||||
transform="rotate(90 25 25.2)" />
|
||||
</mask>
|
||||
<mask id="critical-mask">
|
||||
<rect x="0" y="0" width="32" height="32" fill="#FFF" />
|
||||
<path fill="#000" fill-rule="nonzero"
|
||||
d="M23.9,14.6 C26.7442665,14.6 29.3192665,15.7528668 31.1831998,17.6168002 C33.0471332,19.4807335 34.2,22.0557335 34.2,24.9 C34.2,27.7442665 33.0471332,30.3192665 31.1831998,32.1831998 C29.3192665,34.0471332 26.7442665,35.2 23.9,35.2 C21.0557335,35.2 18.4807335,34.0471332 16.6168002,32.1831998 C14.7528668,30.3192665 13.6,27.7442665 13.6,24.9 C13.6,22.0557335 14.7528668,19.4807335 16.6168002,17.6168002 C18.4807335,15.7528668 21.0557335,14.6 23.9,14.6 Z" />
|
||||
</mask>
|
||||
<mask id="negative-mask">
|
||||
<rect x="0" y="0" width="32" height="32" fill="#FFF" />
|
||||
<path fill="#000" fill-rule="nonzero"
|
||||
d="M28.2,14.8 C29.633165,14.8 31.06633,15.346734 32.159798,16.440202 C33.2414078,17.5218119 33.7880833,18.9357904 33.8,20.353376 C33.811544,21.7725108 33.2872104,23.1952877 32.2266806,24.2917914 L32.2266806,24.2917914 L31.7206,24.8006729 L32.159798,25.240202 C33.253266,26.33367 33.8,27.766835 33.8,29.2 C33.8,30.633165 33.253266,32.06633 32.159798,33.159798 C31.0781881,34.2414078 29.6642096,34.7880833 28.246624,34.8 C26.8274892,34.811544 25.4047123,34.2872104 24.3082086,33.2266806 L24.3082086,33.2266806 L23.7993271,32.7206 L23.359798,33.159798 C22.26633,34.253266 20.833165,34.8 19.4,34.8 C17.966835,34.8 16.53367,34.253266 15.440202,33.159798 C14.3585922,32.0781881 13.8119167,30.6642096 13.8,29.246624 C13.788456,27.8274892 14.3127896,26.4047123 15.3733194,25.3082086 L15.3733194,25.3082086 L15.8794,24.7993271 L15.440202,24.359798 C14.346734,23.26633 13.8,21.833165 13.8,20.4 C13.8,18.966835 14.346734,17.53367 15.440202,16.440202 C16.5218119,15.3585922 17.9357904,14.8119167 19.353376,14.8 C20.7725108,14.788456 22.1952877,15.3127896 23.2917914,16.3733194 L23.2917914,16.3733194 L23.8006729,16.8794 L24.240202,16.440202 C25.33367,15.346734 26.766835,14.8 28.2,14.8 Z" />
|
||||
</mask>
|
||||
<mask id="positive-mask">
|
||||
<rect x="0" y="0" width="32" height="32" fill="#FFF" />
|
||||
<path fill="#000" fill-rule="nonzero"
|
||||
d="M29.7294207,16.9922805 C31.1625744,16.9866282 32.5979013,17.5276612 33.6957071,18.6167741 C34.7816077,19.6940761 35.3338993,21.1058704 35.351258,22.5233982 C35.3686336,23.9423122 34.8500808,25.3669976 33.7941627,26.4676563 L33.7941627,26.4676563 L27.1794488,33.1363075 C26.0960963,34.2283069 24.675298,34.7802389 23.2508341,34.7920857 C21.8249459,34.8039445 20.3953569,34.27469 19.296927,33.2041927 L19.296927,33.2041927 L15.7761737,29.656491 C14.6870608,28.5586851 14.1460279,27.1233582 14.1516801,25.6902046 C14.1574213,24.2570509 14.7098478,22.8260705 15.8076536,21.7369576 C16.7544861,20.7976225 17.9523748,20.2659173 19.1834383,20.1411672 C20.4372495,20.0141119 21.7255226,20.3088158 22.8178242,21.0249737 L22.8178242,21.0249737 L23.1781395,21.2667759 L25.7761737,18.648254 C26.8652867,17.5504481 28.2962671,16.9980217 29.7294207,16.9922805 Z" />
|
||||
</mask>
|
||||
<mask id="warning-mask">
|
||||
<rect x="0" y="0" width="32" height="32" fill="#FFF" />
|
||||
<path fill="#000" fill-rule="nonzero"
|
||||
d="M23.8,14.8 C25.6808284,14.8 27.5616567,15.7284418 28.6412402,17.5853254 L28.6412402,17.5853254 L33.6412402,26.1853254 C34.1656792,27.0873604 34.4068747,28.0446245 34.409009,28.9780654 C34.4112621,29.9762222 34.1406828,30.9466974 33.6539766,31.7926531 C33.1672704,32.6386087 32.4642862,33.3603071 31.600233,33.8600412 C30.7922009,34.3273748 29.8434094,34.6 28.8,34.6 L28.8,34.6 L18.8,34.6 C17.7565906,34.6 16.8077991,34.3273748 15.999767,33.8600412 C15.1357138,33.3603071 14.4327296,32.6386087 13.9460234,31.7926531 C13.4593172,30.9466974 13.1887379,29.9762222 13.190991,28.9780654 C13.1931253,28.0446245 13.4343208,27.0873604 13.9587598,26.1853254 L13.9587598,26.1853254 L18.9587598,17.5853254 C20.0383433,15.7284418 21.9191716,14.8 23.8,14.8 Z" />
|
||||
</mask>
|
||||
|
||||
<polygon id="active" fill="none" stroke="#029CFD" stroke-linejoin="round" stroke-width="2.8"
|
||||
points="25 21 30 29.6 20 29.6" transform="rotate(90 25 25.3)" />
|
||||
<circle id="critical" fill="none" cx="23.9" cy="24.9" r="4.7" stroke="#000" stroke-linejoin="round"
|
||||
stroke-width="2.8" />
|
||||
<path id="negative" fill="none" stroke="#F40" stroke-linecap="round" stroke-linejoin="round" stroke-width="2.8"
|
||||
d="M19.4,20.4 L28.2,29.2 M28.2,20.4 L19.4,29.2" />
|
||||
<polyline id="positive" fill="none" stroke="#66BF3C" stroke-linecap="round" stroke-linejoin="round"
|
||||
stroke-width="2.8" points="19.752 25.712 23.204 29.192 29.752 22.592" />
|
||||
<polygon id="warning" fill="none" stroke="#FFAE00" stroke-linejoin="round" stroke-width="2.8"
|
||||
points="23.8 20.4 28.8 29 18.8 29" />
|
||||
</defs>
|
||||
|
||||
<g id="mask">
|
||||
<use id="icon" />
|
||||
</g>
|
||||
<use id="status" />
|
||||
</svg>
|
||||
|
Before Width: | Height: | Size: 5.7 KiB |
@@ -1 +0,0 @@
|
||||
<svg xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewBox="0 0 32 32"><g fill="none" fill-rule="evenodd"><path fill="#FF4785" fill-rule="nonzero" d="M3.19456517,29.5523576 L2.20116517,3.08035756 C2.16820317,2.206041 2.83853396,1.46497625 3.71176517,1.41035756 L26.2285652,0.00315756388 C26.6728415,-0.0246745074 27.1088544,0.132425741 27.4332785,0.437229126 C27.7577026,0.74203251 27.9415652,1.16741027 27.9415652,1.61255756 L27.9415652,30.4585576 C27.9415652,30.8987416 27.7615266,31.3197739 27.4433606,31.6239653 C27.1251947,31.9281568 26.6965078,32.0890657 26.2567652,32.0693576 L4.73376517,31.1027576 C3.89549138,31.0651477 3.22618762,30.3908861 3.19476517,29.5523576 L3.19456517,29.5523576 Z"/><path fill="#FFF" d="M24.4581652,0.113957564 L21.3591652,0.307557564 L21.2081652,3.94195756 C21.2043927,4.0349625 21.2546048,4.1217998 21.3370927,4.16492627 C21.4195807,4.20805273 21.5195442,4.19973049 21.5937652,4.14355756 L23.0057652,3.07275756 L24.1981652,4.01215756 C24.2717133,4.07021898 24.3722957,4.08025391 24.4558654,4.03786787 C24.539435,3.99548183 24.5907604,3.90840015 24.5873652,3.81475756 L24.4581652,0.113757564 L24.4581652,0.113957564 Z M22.0463652,12.2851576 C21.4791652,12.7257576 17.2533652,13.0265576 17.2533652,12.3991576 C17.3427652,10.0053576 16.2709652,9.90035756 15.6755652,9.90035756 C15.1099652,9.90035756 14.1575652,10.0713576 14.1575652,11.3537576 C14.1575652,12.6605576 15.5495652,13.3983576 17.1835652,14.2643576 C19.5049652,15.4943576 22.3143652,16.9831576 22.3143652,20.7295576 C22.3143652,24.3201576 19.3967652,26.3037576 15.6755652,26.3037576 C11.8353652,26.3037576 8.47936517,24.7499576 8.85836517,19.3633576 C9.00716517,18.7307576 13.8895652,18.8811576 13.8895652,19.3633576 C13.8299652,21.5861576 14.3359652,22.2399576 15.6161652,22.2399576 C16.5985652,22.2399576 17.0449652,21.6983576 17.0449652,20.7865576 C17.0449652,19.4065576 15.5945652,18.5919576 13.9259652,17.6551576 C11.6665652,16.3865576 9.00716517,14.8935576 9.00716517,11.4679576 C9.00716517,8.04835756 11.3591652,5.76855756 15.5565652,5.76855756 C19.7541652,5.76855756 22.0463652,8.01335756 22.0463652,12.2853576 L22.0463652,12.2851576 Z"/></g></svg>
|
||||
|
Before Width: | Height: | Size: 2.1 KiB |
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
@@ -1,800 +0,0 @@
|
||||
import ESM_COMPAT_Module from "node:module";
|
||||
import { fileURLToPath as ESM_COMPAT_fileURLToPath } from "node:url";
|
||||
import { dirname as ESM_COMPAT_dirname } from "node:path";
|
||||
const __filename = ESM_COMPAT_fileURLToPath(import.meta.url);
|
||||
const __dirname = ESM_COMPAT_dirname(__filename);
|
||||
const require = ESM_COMPAT_Module.createRequire(import.meta.url);
|
||||
|
||||
// src/manager/globals/exports.ts
|
||||
var n = {
|
||||
react: [
|
||||
"Children",
|
||||
"Component",
|
||||
"Fragment",
|
||||
"Profiler",
|
||||
"PureComponent",
|
||||
"StrictMode",
|
||||
"Suspense",
|
||||
"__SECRET_INTERNALS_DO_NOT_USE_OR_YOU_WILL_BE_FIRED",
|
||||
"act",
|
||||
"cloneElement",
|
||||
"createContext",
|
||||
"createElement",
|
||||
"createFactory",
|
||||
"createRef",
|
||||
"forwardRef",
|
||||
"isValidElement",
|
||||
"lazy",
|
||||
"memo",
|
||||
"startTransition",
|
||||
"unstable_act",
|
||||
"useCallback",
|
||||
"useContext",
|
||||
"useDebugValue",
|
||||
"useDeferredValue",
|
||||
"useEffect",
|
||||
"useId",
|
||||
"useImperativeHandle",
|
||||
"useInsertionEffect",
|
||||
"useLayoutEffect",
|
||||
"useMemo",
|
||||
"useReducer",
|
||||
"useRef",
|
||||
"useState",
|
||||
"useSyncExternalStore",
|
||||
"useTransition",
|
||||
"version",
|
||||
],
|
||||
"react-dom": [
|
||||
"__SECRET_INTERNALS_DO_NOT_USE_OR_YOU_WILL_BE_FIRED",
|
||||
"createPortal",
|
||||
"createRoot",
|
||||
"findDOMNode",
|
||||
"flushSync",
|
||||
"hydrate",
|
||||
"hydrateRoot",
|
||||
"render",
|
||||
"unmountComponentAtNode",
|
||||
"unstable_batchedUpdates",
|
||||
"unstable_renderSubtreeIntoContainer",
|
||||
"version",
|
||||
],
|
||||
"react-dom/client": ["createRoot", "hydrateRoot"],
|
||||
"@storybook/icons": [
|
||||
"AccessibilityAltIcon",
|
||||
"AccessibilityIcon",
|
||||
"AccessibilityIgnoredIcon",
|
||||
"AddIcon",
|
||||
"AdminIcon",
|
||||
"AlertAltIcon",
|
||||
"AlertIcon",
|
||||
"AlignLeftIcon",
|
||||
"AlignRightIcon",
|
||||
"AppleIcon",
|
||||
"ArrowBottomLeftIcon",
|
||||
"ArrowBottomRightIcon",
|
||||
"ArrowDownIcon",
|
||||
"ArrowLeftIcon",
|
||||
"ArrowRightIcon",
|
||||
"ArrowSolidDownIcon",
|
||||
"ArrowSolidLeftIcon",
|
||||
"ArrowSolidRightIcon",
|
||||
"ArrowSolidUpIcon",
|
||||
"ArrowTopLeftIcon",
|
||||
"ArrowTopRightIcon",
|
||||
"ArrowUpIcon",
|
||||
"AzureDevOpsIcon",
|
||||
"BackIcon",
|
||||
"BasketIcon",
|
||||
"BatchAcceptIcon",
|
||||
"BatchDenyIcon",
|
||||
"BeakerIcon",
|
||||
"BellIcon",
|
||||
"BitbucketIcon",
|
||||
"BoldIcon",
|
||||
"BookIcon",
|
||||
"BookmarkHollowIcon",
|
||||
"BookmarkIcon",
|
||||
"BottomBarIcon",
|
||||
"BottomBarToggleIcon",
|
||||
"BoxIcon",
|
||||
"BranchIcon",
|
||||
"BrowserIcon",
|
||||
"ButtonIcon",
|
||||
"CPUIcon",
|
||||
"CalendarIcon",
|
||||
"CameraIcon",
|
||||
"CameraStabilizeIcon",
|
||||
"CategoryIcon",
|
||||
"CertificateIcon",
|
||||
"ChangedIcon",
|
||||
"ChatIcon",
|
||||
"CheckIcon",
|
||||
"ChevronDownIcon",
|
||||
"ChevronLeftIcon",
|
||||
"ChevronRightIcon",
|
||||
"ChevronSmallDownIcon",
|
||||
"ChevronSmallLeftIcon",
|
||||
"ChevronSmallRightIcon",
|
||||
"ChevronSmallUpIcon",
|
||||
"ChevronUpIcon",
|
||||
"ChromaticIcon",
|
||||
"ChromeIcon",
|
||||
"CircleHollowIcon",
|
||||
"CircleIcon",
|
||||
"ClearIcon",
|
||||
"CloseAltIcon",
|
||||
"CloseIcon",
|
||||
"CloudHollowIcon",
|
||||
"CloudIcon",
|
||||
"CogIcon",
|
||||
"CollapseIcon",
|
||||
"CommandIcon",
|
||||
"CommentAddIcon",
|
||||
"CommentIcon",
|
||||
"CommentsIcon",
|
||||
"CommitIcon",
|
||||
"CompassIcon",
|
||||
"ComponentDrivenIcon",
|
||||
"ComponentIcon",
|
||||
"ContrastIcon",
|
||||
"ContrastIgnoredIcon",
|
||||
"ControlsIcon",
|
||||
"CopyIcon",
|
||||
"CreditIcon",
|
||||
"CrossIcon",
|
||||
"DashboardIcon",
|
||||
"DatabaseIcon",
|
||||
"DeleteIcon",
|
||||
"DiamondIcon",
|
||||
"DirectionIcon",
|
||||
"DiscordIcon",
|
||||
"DocChartIcon",
|
||||
"DocListIcon",
|
||||
"DocumentIcon",
|
||||
"DownloadIcon",
|
||||
"DragIcon",
|
||||
"EditIcon",
|
||||
"EllipsisIcon",
|
||||
"EmailIcon",
|
||||
"ExpandAltIcon",
|
||||
"ExpandIcon",
|
||||
"EyeCloseIcon",
|
||||
"EyeIcon",
|
||||
"FaceHappyIcon",
|
||||
"FaceNeutralIcon",
|
||||
"FaceSadIcon",
|
||||
"FacebookIcon",
|
||||
"FailedIcon",
|
||||
"FastForwardIcon",
|
||||
"FigmaIcon",
|
||||
"FilterIcon",
|
||||
"FlagIcon",
|
||||
"FolderIcon",
|
||||
"FormIcon",
|
||||
"GDriveIcon",
|
||||
"GithubIcon",
|
||||
"GitlabIcon",
|
||||
"GlobeIcon",
|
||||
"GoogleIcon",
|
||||
"GraphBarIcon",
|
||||
"GraphLineIcon",
|
||||
"GraphqlIcon",
|
||||
"GridAltIcon",
|
||||
"GridIcon",
|
||||
"GrowIcon",
|
||||
"HeartHollowIcon",
|
||||
"HeartIcon",
|
||||
"HomeIcon",
|
||||
"HourglassIcon",
|
||||
"InfoIcon",
|
||||
"ItalicIcon",
|
||||
"JumpToIcon",
|
||||
"KeyIcon",
|
||||
"LightningIcon",
|
||||
"LightningOffIcon",
|
||||
"LinkBrokenIcon",
|
||||
"LinkIcon",
|
||||
"LinkedinIcon",
|
||||
"LinuxIcon",
|
||||
"ListOrderedIcon",
|
||||
"ListUnorderedIcon",
|
||||
"LocationIcon",
|
||||
"LockIcon",
|
||||
"MarkdownIcon",
|
||||
"MarkupIcon",
|
||||
"MediumIcon",
|
||||
"MemoryIcon",
|
||||
"MenuIcon",
|
||||
"MergeIcon",
|
||||
"MirrorIcon",
|
||||
"MobileIcon",
|
||||
"MoonIcon",
|
||||
"NutIcon",
|
||||
"OutboxIcon",
|
||||
"OutlineIcon",
|
||||
"PaintBrushIcon",
|
||||
"PaperClipIcon",
|
||||
"ParagraphIcon",
|
||||
"PassedIcon",
|
||||
"PhoneIcon",
|
||||
"PhotoDragIcon",
|
||||
"PhotoIcon",
|
||||
"PhotoStabilizeIcon",
|
||||
"PinAltIcon",
|
||||
"PinIcon",
|
||||
"PlayAllHollowIcon",
|
||||
"PlayBackIcon",
|
||||
"PlayHollowIcon",
|
||||
"PlayIcon",
|
||||
"PlayNextIcon",
|
||||
"PlusIcon",
|
||||
"PointerDefaultIcon",
|
||||
"PointerHandIcon",
|
||||
"PowerIcon",
|
||||
"PrintIcon",
|
||||
"ProceedIcon",
|
||||
"ProfileIcon",
|
||||
"PullRequestIcon",
|
||||
"QuestionIcon",
|
||||
"RSSIcon",
|
||||
"RedirectIcon",
|
||||
"ReduxIcon",
|
||||
"RefreshIcon",
|
||||
"ReplyIcon",
|
||||
"RepoIcon",
|
||||
"RequestChangeIcon",
|
||||
"RewindIcon",
|
||||
"RulerIcon",
|
||||
"SaveIcon",
|
||||
"SearchIcon",
|
||||
"ShareAltIcon",
|
||||
"ShareIcon",
|
||||
"ShieldIcon",
|
||||
"SideBySideIcon",
|
||||
"SidebarAltIcon",
|
||||
"SidebarAltToggleIcon",
|
||||
"SidebarIcon",
|
||||
"SidebarToggleIcon",
|
||||
"SpeakerIcon",
|
||||
"StackedIcon",
|
||||
"StarHollowIcon",
|
||||
"StarIcon",
|
||||
"StatusFailIcon",
|
||||
"StatusIcon",
|
||||
"StatusPassIcon",
|
||||
"StatusWarnIcon",
|
||||
"StickerIcon",
|
||||
"StopAltHollowIcon",
|
||||
"StopAltIcon",
|
||||
"StopIcon",
|
||||
"StorybookIcon",
|
||||
"StructureIcon",
|
||||
"SubtractIcon",
|
||||
"SunIcon",
|
||||
"SupportIcon",
|
||||
"SweepIcon",
|
||||
"SwitchAltIcon",
|
||||
"SyncIcon",
|
||||
"TabletIcon",
|
||||
"ThumbsUpIcon",
|
||||
"TimeIcon",
|
||||
"TimerIcon",
|
||||
"TransferIcon",
|
||||
"TrashIcon",
|
||||
"TwitterIcon",
|
||||
"TypeIcon",
|
||||
"UbuntuIcon",
|
||||
"UndoIcon",
|
||||
"UnfoldIcon",
|
||||
"UnlockIcon",
|
||||
"UnpinIcon",
|
||||
"UploadIcon",
|
||||
"UserAddIcon",
|
||||
"UserAltIcon",
|
||||
"UserIcon",
|
||||
"UsersIcon",
|
||||
"VSCodeIcon",
|
||||
"VerifiedIcon",
|
||||
"VideoIcon",
|
||||
"WandIcon",
|
||||
"WatchIcon",
|
||||
"WindowsIcon",
|
||||
"WrenchIcon",
|
||||
"XIcon",
|
||||
"YoutubeIcon",
|
||||
"ZoomIcon",
|
||||
"ZoomOutIcon",
|
||||
"ZoomResetIcon",
|
||||
"iconList",
|
||||
],
|
||||
"storybook/manager-api": [
|
||||
"ActiveTabs",
|
||||
"Consumer",
|
||||
"ManagerContext",
|
||||
"Provider",
|
||||
"RequestResponseError",
|
||||
"addons",
|
||||
"combineParameters",
|
||||
"controlOrMetaKey",
|
||||
"controlOrMetaSymbol",
|
||||
"eventMatchesShortcut",
|
||||
"eventToShortcut",
|
||||
"experimental_MockUniversalStore",
|
||||
"experimental_UniversalStore",
|
||||
"experimental_getStatusStore",
|
||||
"experimental_getTestProviderStore",
|
||||
"experimental_requestResponse",
|
||||
"experimental_useStatusStore",
|
||||
"experimental_useTestProviderStore",
|
||||
"experimental_useUniversalStore",
|
||||
"internal_fullStatusStore",
|
||||
"internal_fullTestProviderStore",
|
||||
"internal_universalStatusStore",
|
||||
"internal_universalTestProviderStore",
|
||||
"isMacLike",
|
||||
"isShortcutTaken",
|
||||
"keyToSymbol",
|
||||
"merge",
|
||||
"mockChannel",
|
||||
"optionOrAltSymbol",
|
||||
"shortcutMatchesShortcut",
|
||||
"shortcutToHumanString",
|
||||
"types",
|
||||
"useAddonState",
|
||||
"useArgTypes",
|
||||
"useArgs",
|
||||
"useChannel",
|
||||
"useGlobalTypes",
|
||||
"useGlobals",
|
||||
"useParameter",
|
||||
"useSharedState",
|
||||
"useStoryPrepared",
|
||||
"useStorybookApi",
|
||||
"useStorybookState",
|
||||
],
|
||||
"storybook/theming": [
|
||||
"CacheProvider",
|
||||
"ClassNames",
|
||||
"Global",
|
||||
"ThemeProvider",
|
||||
"background",
|
||||
"color",
|
||||
"convert",
|
||||
"create",
|
||||
"createCache",
|
||||
"createGlobal",
|
||||
"createReset",
|
||||
"css",
|
||||
"darken",
|
||||
"ensure",
|
||||
"ignoreSsrWarning",
|
||||
"isPropValid",
|
||||
"jsx",
|
||||
"keyframes",
|
||||
"lighten",
|
||||
"styled",
|
||||
"themes",
|
||||
"typography",
|
||||
"useTheme",
|
||||
"withTheme",
|
||||
],
|
||||
"storybook/theming/create": ["create", "themes"],
|
||||
"storybook/test": [
|
||||
"buildQueries",
|
||||
"clearAllMocks",
|
||||
"configure",
|
||||
"createEvent",
|
||||
"expect",
|
||||
"findAllByAltText",
|
||||
"findAllByDisplayValue",
|
||||
"findAllByLabelText",
|
||||
"findAllByPlaceholderText",
|
||||
"findAllByRole",
|
||||
"findAllByTestId",
|
||||
"findAllByText",
|
||||
"findAllByTitle",
|
||||
"findByAltText",
|
||||
"findByDisplayValue",
|
||||
"findByLabelText",
|
||||
"findByPlaceholderText",
|
||||
"findByRole",
|
||||
"findByTestId",
|
||||
"findByText",
|
||||
"findByTitle",
|
||||
"fireEvent",
|
||||
"fn",
|
||||
"getAllByAltText",
|
||||
"getAllByDisplayValue",
|
||||
"getAllByLabelText",
|
||||
"getAllByPlaceholderText",
|
||||
"getAllByRole",
|
||||
"getAllByTestId",
|
||||
"getAllByText",
|
||||
"getAllByTitle",
|
||||
"getByAltText",
|
||||
"getByDisplayValue",
|
||||
"getByLabelText",
|
||||
"getByPlaceholderText",
|
||||
"getByRole",
|
||||
"getByTestId",
|
||||
"getByText",
|
||||
"getByTitle",
|
||||
"getConfig",
|
||||
"getDefaultNormalizer",
|
||||
"getElementError",
|
||||
"getNodeText",
|
||||
"getQueriesForElement",
|
||||
"getRoles",
|
||||
"getSuggestedQuery",
|
||||
"isInaccessible",
|
||||
"isMockFunction",
|
||||
"logDOM",
|
||||
"logRoles",
|
||||
"mocked",
|
||||
"mocks",
|
||||
"onMockCall",
|
||||
"prettyDOM",
|
||||
"prettyFormat",
|
||||
"queries",
|
||||
"queryAllByAltText",
|
||||
"queryAllByAttribute",
|
||||
"queryAllByDisplayValue",
|
||||
"queryAllByLabelText",
|
||||
"queryAllByPlaceholderText",
|
||||
"queryAllByRole",
|
||||
"queryAllByTestId",
|
||||
"queryAllByText",
|
||||
"queryAllByTitle",
|
||||
"queryByAltText",
|
||||
"queryByAttribute",
|
||||
"queryByDisplayValue",
|
||||
"queryByLabelText",
|
||||
"queryByPlaceholderText",
|
||||
"queryByRole",
|
||||
"queryByTestId",
|
||||
"queryByText",
|
||||
"queryByTitle",
|
||||
"queryHelpers",
|
||||
"resetAllMocks",
|
||||
"restoreAllMocks",
|
||||
"sb",
|
||||
"screen",
|
||||
"spyOn",
|
||||
"uninstrumentedUserEvent",
|
||||
"userEvent",
|
||||
"waitFor",
|
||||
"waitForElementToBeRemoved",
|
||||
"within",
|
||||
],
|
||||
"storybook/internal/channels": [
|
||||
"Channel",
|
||||
"HEARTBEAT_INTERVAL",
|
||||
"HEARTBEAT_MAX_LATENCY",
|
||||
"PostMessageTransport",
|
||||
"WebsocketTransport",
|
||||
"createBrowserChannel",
|
||||
],
|
||||
"storybook/internal/client-logger": ["deprecate", "logger", "once", "pretty"],
|
||||
"storybook/internal/components": [
|
||||
"A",
|
||||
"ActionBar",
|
||||
"AddonPanel",
|
||||
"Badge",
|
||||
"Bar",
|
||||
"Blockquote",
|
||||
"Button",
|
||||
"ClipboardCode",
|
||||
"Code",
|
||||
"DL",
|
||||
"Div",
|
||||
"DocumentWrapper",
|
||||
"EmptyTabContent",
|
||||
"ErrorFormatter",
|
||||
"FlexBar",
|
||||
"Form",
|
||||
"H1",
|
||||
"H2",
|
||||
"H3",
|
||||
"H4",
|
||||
"H5",
|
||||
"H6",
|
||||
"HR",
|
||||
"IconButton",
|
||||
"Img",
|
||||
"LI",
|
||||
"Link",
|
||||
"ListItem",
|
||||
"Loader",
|
||||
"Modal",
|
||||
"OL",
|
||||
"P",
|
||||
"Placeholder",
|
||||
"Pre",
|
||||
"ProgressSpinner",
|
||||
"ResetWrapper",
|
||||
"ScrollArea",
|
||||
"Separator",
|
||||
"Spaced",
|
||||
"Span",
|
||||
"StorybookIcon",
|
||||
"StorybookLogo",
|
||||
"SyntaxHighlighter",
|
||||
"TT",
|
||||
"TabBar",
|
||||
"TabButton",
|
||||
"TabWrapper",
|
||||
"Table",
|
||||
"Tabs",
|
||||
"TabsState",
|
||||
"TooltipLinkList",
|
||||
"TooltipMessage",
|
||||
"TooltipNote",
|
||||
"UL",
|
||||
"WithTooltip",
|
||||
"WithTooltipPure",
|
||||
"Zoom",
|
||||
"codeCommon",
|
||||
"components",
|
||||
"createCopyToClipboardFunction",
|
||||
"getStoryHref",
|
||||
"interleaveSeparators",
|
||||
"nameSpaceClassNames",
|
||||
"resetComponents",
|
||||
"withReset",
|
||||
],
|
||||
"storybook/internal/core-errors": [
|
||||
"ARGTYPES_INFO_REQUEST",
|
||||
"ARGTYPES_INFO_RESPONSE",
|
||||
"CHANNEL_CREATED",
|
||||
"CHANNEL_WS_DISCONNECT",
|
||||
"CONFIG_ERROR",
|
||||
"CREATE_NEW_STORYFILE_REQUEST",
|
||||
"CREATE_NEW_STORYFILE_RESPONSE",
|
||||
"CURRENT_STORY_WAS_SET",
|
||||
"DOCS_PREPARED",
|
||||
"DOCS_RENDERED",
|
||||
"FILE_COMPONENT_SEARCH_REQUEST",
|
||||
"FILE_COMPONENT_SEARCH_RESPONSE",
|
||||
"FORCE_REMOUNT",
|
||||
"FORCE_RE_RENDER",
|
||||
"GLOBALS_UPDATED",
|
||||
"NAVIGATE_URL",
|
||||
"PLAY_FUNCTION_THREW_EXCEPTION",
|
||||
"PRELOAD_ENTRIES",
|
||||
"PREVIEW_BUILDER_PROGRESS",
|
||||
"PREVIEW_KEYDOWN",
|
||||
"REGISTER_SUBSCRIPTION",
|
||||
"REQUEST_WHATS_NEW_DATA",
|
||||
"RESET_STORY_ARGS",
|
||||
"RESULT_WHATS_NEW_DATA",
|
||||
"SAVE_STORY_REQUEST",
|
||||
"SAVE_STORY_RESPONSE",
|
||||
"SELECT_STORY",
|
||||
"SET_CONFIG",
|
||||
"SET_CURRENT_STORY",
|
||||
"SET_FILTER",
|
||||
"SET_GLOBALS",
|
||||
"SET_INDEX",
|
||||
"SET_STORIES",
|
||||
"SET_WHATS_NEW_CACHE",
|
||||
"SHARED_STATE_CHANGED",
|
||||
"SHARED_STATE_SET",
|
||||
"STORIES_COLLAPSE_ALL",
|
||||
"STORIES_EXPAND_ALL",
|
||||
"STORY_ARGS_UPDATED",
|
||||
"STORY_CHANGED",
|
||||
"STORY_ERRORED",
|
||||
"STORY_FINISHED",
|
||||
"STORY_HOT_UPDATED",
|
||||
"STORY_INDEX_INVALIDATED",
|
||||
"STORY_MISSING",
|
||||
"STORY_PREPARED",
|
||||
"STORY_RENDERED",
|
||||
"STORY_RENDER_PHASE_CHANGED",
|
||||
"STORY_SPECIFIED",
|
||||
"STORY_THREW_EXCEPTION",
|
||||
"STORY_UNCHANGED",
|
||||
"TELEMETRY_ERROR",
|
||||
"TOGGLE_WHATS_NEW_NOTIFICATIONS",
|
||||
"UNHANDLED_ERRORS_WHILE_PLAYING",
|
||||
"UPDATE_GLOBALS",
|
||||
"UPDATE_QUERY_PARAMS",
|
||||
"UPDATE_STORY_ARGS",
|
||||
],
|
||||
"storybook/internal/core-events": [
|
||||
"ARGTYPES_INFO_REQUEST",
|
||||
"ARGTYPES_INFO_RESPONSE",
|
||||
"CHANNEL_CREATED",
|
||||
"CHANNEL_WS_DISCONNECT",
|
||||
"CONFIG_ERROR",
|
||||
"CREATE_NEW_STORYFILE_REQUEST",
|
||||
"CREATE_NEW_STORYFILE_RESPONSE",
|
||||
"CURRENT_STORY_WAS_SET",
|
||||
"DOCS_PREPARED",
|
||||
"DOCS_RENDERED",
|
||||
"FILE_COMPONENT_SEARCH_REQUEST",
|
||||
"FILE_COMPONENT_SEARCH_RESPONSE",
|
||||
"FORCE_REMOUNT",
|
||||
"FORCE_RE_RENDER",
|
||||
"GLOBALS_UPDATED",
|
||||
"NAVIGATE_URL",
|
||||
"PLAY_FUNCTION_THREW_EXCEPTION",
|
||||
"PRELOAD_ENTRIES",
|
||||
"PREVIEW_BUILDER_PROGRESS",
|
||||
"PREVIEW_KEYDOWN",
|
||||
"REGISTER_SUBSCRIPTION",
|
||||
"REQUEST_WHATS_NEW_DATA",
|
||||
"RESET_STORY_ARGS",
|
||||
"RESULT_WHATS_NEW_DATA",
|
||||
"SAVE_STORY_REQUEST",
|
||||
"SAVE_STORY_RESPONSE",
|
||||
"SELECT_STORY",
|
||||
"SET_CONFIG",
|
||||
"SET_CURRENT_STORY",
|
||||
"SET_FILTER",
|
||||
"SET_GLOBALS",
|
||||
"SET_INDEX",
|
||||
"SET_STORIES",
|
||||
"SET_WHATS_NEW_CACHE",
|
||||
"SHARED_STATE_CHANGED",
|
||||
"SHARED_STATE_SET",
|
||||
"STORIES_COLLAPSE_ALL",
|
||||
"STORIES_EXPAND_ALL",
|
||||
"STORY_ARGS_UPDATED",
|
||||
"STORY_CHANGED",
|
||||
"STORY_ERRORED",
|
||||
"STORY_FINISHED",
|
||||
"STORY_HOT_UPDATED",
|
||||
"STORY_INDEX_INVALIDATED",
|
||||
"STORY_MISSING",
|
||||
"STORY_PREPARED",
|
||||
"STORY_RENDERED",
|
||||
"STORY_RENDER_PHASE_CHANGED",
|
||||
"STORY_SPECIFIED",
|
||||
"STORY_THREW_EXCEPTION",
|
||||
"STORY_UNCHANGED",
|
||||
"TELEMETRY_ERROR",
|
||||
"TOGGLE_WHATS_NEW_NOTIFICATIONS",
|
||||
"UNHANDLED_ERRORS_WHILE_PLAYING",
|
||||
"UPDATE_GLOBALS",
|
||||
"UPDATE_QUERY_PARAMS",
|
||||
"UPDATE_STORY_ARGS",
|
||||
],
|
||||
"storybook/internal/manager-errors": [
|
||||
"Category",
|
||||
"ProviderDoesNotExtendBaseProviderError",
|
||||
"StatusTypeIdMismatchError",
|
||||
"UncaughtManagerError",
|
||||
],
|
||||
"storybook/internal/router": [
|
||||
"BaseLocationProvider",
|
||||
"DEEPLY_EQUAL",
|
||||
"Link",
|
||||
"Location",
|
||||
"LocationProvider",
|
||||
"Match",
|
||||
"Route",
|
||||
"buildArgsParam",
|
||||
"deepDiff",
|
||||
"getMatch",
|
||||
"parsePath",
|
||||
"queryFromLocation",
|
||||
"stringifyQuery",
|
||||
"useNavigate",
|
||||
],
|
||||
"storybook/internal/types": ["Addon_TypesEnum"],
|
||||
"storybook/internal/manager-api": [
|
||||
"ActiveTabs",
|
||||
"Consumer",
|
||||
"ManagerContext",
|
||||
"Provider",
|
||||
"RequestResponseError",
|
||||
"addons",
|
||||
"combineParameters",
|
||||
"controlOrMetaKey",
|
||||
"controlOrMetaSymbol",
|
||||
"eventMatchesShortcut",
|
||||
"eventToShortcut",
|
||||
"experimental_MockUniversalStore",
|
||||
"experimental_UniversalStore",
|
||||
"experimental_getStatusStore",
|
||||
"experimental_getTestProviderStore",
|
||||
"experimental_requestResponse",
|
||||
"experimental_useStatusStore",
|
||||
"experimental_useTestProviderStore",
|
||||
"experimental_useUniversalStore",
|
||||
"internal_fullStatusStore",
|
||||
"internal_fullTestProviderStore",
|
||||
"internal_universalStatusStore",
|
||||
"internal_universalTestProviderStore",
|
||||
"isMacLike",
|
||||
"isShortcutTaken",
|
||||
"keyToSymbol",
|
||||
"merge",
|
||||
"mockChannel",
|
||||
"optionOrAltSymbol",
|
||||
"shortcutMatchesShortcut",
|
||||
"shortcutToHumanString",
|
||||
"types",
|
||||
"useAddonState",
|
||||
"useArgTypes",
|
||||
"useArgs",
|
||||
"useChannel",
|
||||
"useGlobalTypes",
|
||||
"useGlobals",
|
||||
"useParameter",
|
||||
"useSharedState",
|
||||
"useStoryPrepared",
|
||||
"useStorybookApi",
|
||||
"useStorybookState",
|
||||
],
|
||||
"storybook/internal/theming": [
|
||||
"CacheProvider",
|
||||
"ClassNames",
|
||||
"Global",
|
||||
"ThemeProvider",
|
||||
"background",
|
||||
"color",
|
||||
"convert",
|
||||
"create",
|
||||
"createCache",
|
||||
"createGlobal",
|
||||
"createReset",
|
||||
"css",
|
||||
"darken",
|
||||
"ensure",
|
||||
"ignoreSsrWarning",
|
||||
"isPropValid",
|
||||
"jsx",
|
||||
"keyframes",
|
||||
"lighten",
|
||||
"styled",
|
||||
"themes",
|
||||
"typography",
|
||||
"useTheme",
|
||||
"withTheme",
|
||||
],
|
||||
"storybook/internal/theming/create": ["create", "themes"],
|
||||
};
|
||||
|
||||
// src/manager/globals/globals.ts
|
||||
var o = {
|
||||
react: "__REACT__",
|
||||
"react-dom": "__REACT_DOM__",
|
||||
"react-dom/client": "__REACT_DOM_CLIENT__",
|
||||
"@storybook/icons": "__STORYBOOK_ICONS__",
|
||||
"storybook/manager-api": "__STORYBOOK_API__",
|
||||
"storybook/test": "__STORYBOOK_TEST__",
|
||||
"storybook/theming": "__STORYBOOK_THEMING__",
|
||||
"storybook/theming/create": "__STORYBOOK_THEMING_CREATE__",
|
||||
"storybook/internal/channels": "__STORYBOOK_CHANNELS__",
|
||||
"storybook/internal/client-logger": "__STORYBOOK_CLIENT_LOGGER__",
|
||||
"storybook/internal/components": "__STORYBOOK_COMPONENTS__",
|
||||
"storybook/internal/core-errors": "__STORYBOOK_CORE_EVENTS__",
|
||||
"storybook/internal/core-events": "__STORYBOOK_CORE_EVENTS__",
|
||||
"storybook/internal/manager-errors":
|
||||
"__STORYBOOK_CORE_EVENTS_MANAGER_ERRORS__",
|
||||
"storybook/internal/router": "__STORYBOOK_ROUTER__",
|
||||
"storybook/internal/types": "__STORYBOOK_TYPES__",
|
||||
// @deprecated TODO: delete in 9.1
|
||||
"storybook/internal/manager-api": "__STORYBOOK_API__",
|
||||
"storybook/internal/theming": "__STORYBOOK_THEMING__",
|
||||
"storybook/internal/theming/create": "__STORYBOOK_THEMING_CREATE__",
|
||||
},
|
||||
r = Object.keys(o);
|
||||
|
||||
// src/manager/globals/globals-module-info.ts
|
||||
var E = r.reduce(
|
||||
(t, e) => (
|
||||
(t[e] = {
|
||||
type: "esm",
|
||||
varName: o[e],
|
||||
namedExports: n[e],
|
||||
defaultExport: !0,
|
||||
}),
|
||||
t
|
||||
),
|
||||
{},
|
||||
);
|
||||
export { E as globalsModuleInfoMap };
|
||||
File diff suppressed because it is too large
Load Diff
@@ -1,33 +0,0 @@
|
||||
import ESM_COMPAT_Module from "node:module";
|
||||
import { fileURLToPath as ESM_COMPAT_fileURLToPath } from "node:url";
|
||||
import { dirname as ESM_COMPAT_dirname } from "node:path";
|
||||
const __filename = ESM_COMPAT_fileURLToPath(import.meta.url);
|
||||
const __dirname = ESM_COMPAT_dirname(__filename);
|
||||
const require = ESM_COMPAT_Module.createRequire(import.meta.url);
|
||||
|
||||
// src/manager/globals/globals.ts
|
||||
var _ = {
|
||||
react: "__REACT__",
|
||||
"react-dom": "__REACT_DOM__",
|
||||
"react-dom/client": "__REACT_DOM_CLIENT__",
|
||||
"@storybook/icons": "__STORYBOOK_ICONS__",
|
||||
"storybook/manager-api": "__STORYBOOK_API__",
|
||||
"storybook/test": "__STORYBOOK_TEST__",
|
||||
"storybook/theming": "__STORYBOOK_THEMING__",
|
||||
"storybook/theming/create": "__STORYBOOK_THEMING_CREATE__",
|
||||
"storybook/internal/channels": "__STORYBOOK_CHANNELS__",
|
||||
"storybook/internal/client-logger": "__STORYBOOK_CLIENT_LOGGER__",
|
||||
"storybook/internal/components": "__STORYBOOK_COMPONENTS__",
|
||||
"storybook/internal/core-errors": "__STORYBOOK_CORE_EVENTS__",
|
||||
"storybook/internal/core-events": "__STORYBOOK_CORE_EVENTS__",
|
||||
"storybook/internal/manager-errors":
|
||||
"__STORYBOOK_CORE_EVENTS_MANAGER_ERRORS__",
|
||||
"storybook/internal/router": "__STORYBOOK_ROUTER__",
|
||||
"storybook/internal/types": "__STORYBOOK_TYPES__",
|
||||
// @deprecated TODO: delete in 9.1
|
||||
"storybook/internal/manager-api": "__STORYBOOK_API__",
|
||||
"storybook/internal/theming": "__STORYBOOK_THEMING__",
|
||||
"storybook/internal/theming/create": "__STORYBOOK_THEMING_CREATE__",
|
||||
},
|
||||
o = Object.keys(_);
|
||||
export { o as globalPackages, _ as globalsNameReferenceMap };
|
||||
File diff suppressed because it is too large
Load Diff
@@ -1 +0,0 @@
|
||||
<svg fill="none" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1155 1000"><path d="m577.3 0 577.4 1000H0z" fill="#fff"/></svg>
|
||||
|
Before Width: | Height: | Size: 128 B |
File diff suppressed because it is too large
Load Diff
@@ -1 +0,0 @@
|
||||
<svg fill="none" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16"><path fill-rule="evenodd" clip-rule="evenodd" d="M1.5 2.5h13v10a1 1 0 0 1-1 1h-11a1 1 0 0 1-1-1zM0 1h16v11.5a2.5 2.5 0 0 1-2.5 2.5h-11A2.5 2.5 0 0 1 0 12.5zm3.75 4.5a.75.75 0 1 0 0-1.5.75.75 0 0 0 0 1.5M7 4.75a.75.75 0 1 1-1.5 0 .75.75 0 0 1 1.5 0m1.75.75a.75.75 0 1 0 0-1.5.75.75 0 0 0 0 1.5" fill="#666"/></svg>
|
||||
|
Before Width: | Height: | Size: 385 B |
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
Some files were not shown because too many files have changed in this diff Show More
Reference in New Issue
Block a user