Fix prettier formatting issues
This commit is contained in:
adilallo
@@ -1,6 +1,6 @@
|
|||||||
import * as a11yAddonAnnotations from "@storybook/addon-a11y/preview";
|
import * as a11yAddonAnnotations from "@storybook/addon-a11y/preview";
|
||||||
import { setProjectAnnotations } from '@storybook/nextjs-vite';
|
import { setProjectAnnotations } from "@storybook/nextjs-vite";
|
||||||
import * as projectAnnotations from './preview';
|
import * as projectAnnotations from "./preview";
|
||||||
|
|
||||||
// This is an important step to apply the right configuration when testing your stories.
|
// This is an important step to apply the right configuration when testing your stories.
|
||||||
// More info at: https://storybook.js.org/docs/api/portable-stories/portable-stories-vitest#setprojectannotations
|
// More info at: https://storybook.js.org/docs/api/portable-stories/portable-stories-vitest#setprojectannotations
|
||||||
|
|||||||
@@ -179,9 +179,15 @@ community-rule/
|
|||||||
|
|
||||||
This project is licensed under the MIT License - see the [LICENSE](LICENSE) file for details.
|
This project is licensed under the MIT License - see the [LICENSE](LICENSE) file for details.
|
||||||
<<<<<<< HEAD
|
<<<<<<< HEAD
|
||||||
|
|
||||||
# Test from working commit
|
# Test from working commit
|
||||||
|
|
||||||
=======
|
=======
|
||||||
|
|
||||||
# Test trigger
|
# Test trigger
|
||||||
>>>>>>> bead0c737303fb7e83b3be0c5dbd121b00351b90
|
|
||||||
|
> > > > > > > bead0c737303fb7e83b3be0c5dbd121b00351b90
|
||||||
|
|
||||||
# Test new runner
|
# Test new runner
|
||||||
|
|
||||||
# Test host mode
|
# Test host mode
|
||||||
|
|||||||
@@ -34,10 +34,10 @@ export default function HomeHeader() {
|
|||||||
];
|
];
|
||||||
|
|
||||||
const avatarImages = [
|
const avatarImages = [
|
||||||
{ src: "assets/Avatar_1.png", alt: "Avatar 1" },
|
{ src: "assets/Avatar_1.png", alt: "Avatar 1" },
|
||||||
{ src: "assets/Avatar_2.png", alt: "Avatar 2" },
|
{ src: "assets/Avatar_2.png", alt: "Avatar 2" },
|
||||||
{ src: "assets/Avatar_3.png", alt: "Avatar 3" },
|
{ src: "assets/Avatar_3.png", alt: "Avatar 3" },
|
||||||
];
|
];
|
||||||
|
|
||||||
const logoConfig = [
|
const logoConfig = [
|
||||||
{
|
{
|
||||||
@@ -79,10 +79,10 @@ export default function HomeHeader() {
|
|||||||
? size === "home" || size === "homeMd"
|
? size === "home" || size === "homeMd"
|
||||||
? "homeMd"
|
? "homeMd"
|
||||||
: size === "large"
|
: size === "large"
|
||||||
? "large"
|
? "large"
|
||||||
: size === "homeXlarge"
|
: size === "homeXlarge"
|
||||||
? "homeXlarge"
|
? "homeXlarge"
|
||||||
: "xsmallUseCases"
|
: "xsmallUseCases"
|
||||||
: size
|
: size
|
||||||
}
|
}
|
||||||
variant={
|
variant={
|
||||||
|
|||||||
+20
-20
@@ -91,26 +91,26 @@ export default function Logo({ size = "default", showText = true }) {
|
|||||||
size === "homeHeaderXsmall"
|
size === "homeHeaderXsmall"
|
||||||
? sizes.homeHeaderXsmall
|
? sizes.homeHeaderXsmall
|
||||||
: size === "homeHeaderSm"
|
: size === "homeHeaderSm"
|
||||||
? sizes.homeHeaderSm
|
? sizes.homeHeaderSm
|
||||||
: size === "homeHeaderMd"
|
: size === "homeHeaderMd"
|
||||||
? sizes.homeHeaderMd
|
? sizes.homeHeaderMd
|
||||||
: size === "homeHeaderLg"
|
: size === "homeHeaderLg"
|
||||||
? sizes.homeHeaderLg
|
? sizes.homeHeaderLg
|
||||||
: size === "homeHeaderXl"
|
: size === "homeHeaderXl"
|
||||||
? sizes.homeHeaderXl
|
? sizes.homeHeaderXl
|
||||||
: size === "header"
|
: size === "header"
|
||||||
? sizes.header
|
? sizes.header
|
||||||
: size === "headerMd"
|
: size === "headerMd"
|
||||||
? sizes.headerMd
|
? sizes.headerMd
|
||||||
: size === "headerLg"
|
: size === "headerLg"
|
||||||
? sizes.headerLg
|
? sizes.headerLg
|
||||||
: size === "headerXl"
|
: size === "headerXl"
|
||||||
? sizes.headerXl
|
? sizes.headerXl
|
||||||
: size === "footer"
|
: size === "footer"
|
||||||
? sizes.footer
|
? sizes.footer
|
||||||
: size === "footerLg"
|
: size === "footerLg"
|
||||||
? sizes.footerLg
|
? sizes.footerLg
|
||||||
: sizes.default;
|
: sizes.default;
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<div
|
<div
|
||||||
|
|||||||
@@ -78,7 +78,7 @@ const QuoteBlock = ({
|
|||||||
const handleImageError = (error) => {
|
const handleImageError = (error) => {
|
||||||
console.warn(
|
console.warn(
|
||||||
`QuoteBlock: Failed to load avatar image for ${author}:`,
|
`QuoteBlock: Failed to load avatar image for ${author}:`,
|
||||||
error
|
error,
|
||||||
);
|
);
|
||||||
setImageError(true);
|
setImageError(true);
|
||||||
setImageLoading(false);
|
setImageLoading(false);
|
||||||
|
|||||||
+39
-9
@@ -2,26 +2,56 @@
|
|||||||
|
|
||||||
/* Map next/font CSS variables to handy classes */
|
/* Map next/font CSS variables to handy classes */
|
||||||
.font-inter {
|
.font-inter {
|
||||||
font-family: var(--font-inter), ui-sans-serif, system-ui, -apple-system,
|
font-family:
|
||||||
"Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans",
|
var(--font-inter),
|
||||||
"Apple Color Emoji", "Segoe UI Emoji";
|
ui-sans-serif,
|
||||||
|
system-ui,
|
||||||
|
-apple-system,
|
||||||
|
"Segoe UI",
|
||||||
|
Roboto,
|
||||||
|
"Helvetica Neue",
|
||||||
|
Arial,
|
||||||
|
"Noto Sans",
|
||||||
|
"Apple Color Emoji",
|
||||||
|
"Segoe UI Emoji";
|
||||||
}
|
}
|
||||||
|
|
||||||
.font-bricolage-grotesque {
|
.font-bricolage-grotesque {
|
||||||
font-family: var(--font-bricolage-grotesque), ui-sans-serif, system-ui,
|
font-family:
|
||||||
-apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial;
|
var(--font-bricolage-grotesque),
|
||||||
|
ui-sans-serif,
|
||||||
|
system-ui,
|
||||||
|
-apple-system,
|
||||||
|
"Segoe UI",
|
||||||
|
Roboto,
|
||||||
|
"Helvetica Neue",
|
||||||
|
Arial;
|
||||||
}
|
}
|
||||||
|
|
||||||
.font-space-grotesk {
|
.font-space-grotesk {
|
||||||
font-family: var(--font-space-grotesk), ui-sans-serif, system-ui,
|
font-family:
|
||||||
-apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial;
|
var(--font-space-grotesk),
|
||||||
|
ui-sans-serif,
|
||||||
|
system-ui,
|
||||||
|
-apple-system,
|
||||||
|
"Segoe UI",
|
||||||
|
Roboto,
|
||||||
|
"Helvetica Neue",
|
||||||
|
Arial;
|
||||||
}
|
}
|
||||||
|
|
||||||
/* Set default body text face */
|
/* Set default body text face */
|
||||||
html,
|
html,
|
||||||
body {
|
body {
|
||||||
font-family: var(--font-inter), ui-sans-serif, system-ui, -apple-system,
|
font-family:
|
||||||
"Segoe UI", Roboto, "Helvetica Neue", Arial;
|
var(--font-inter),
|
||||||
|
ui-sans-serif,
|
||||||
|
system-ui,
|
||||||
|
-apple-system,
|
||||||
|
"Segoe UI",
|
||||||
|
Roboto,
|
||||||
|
"Helvetica Neue",
|
||||||
|
Arial;
|
||||||
}
|
}
|
||||||
|
|
||||||
body {
|
body {
|
||||||
|
|||||||
+8
-5
@@ -19,12 +19,15 @@
|
|||||||
--color-*: initial;
|
--color-*: initial;
|
||||||
|
|
||||||
/* Font families */
|
/* Font families */
|
||||||
--font-sans: var(--font-inter), ui-sans-serif, system-ui, -apple-system,
|
--font-sans:
|
||||||
|
var(--font-inter), ui-sans-serif, system-ui, -apple-system, "Segoe UI",
|
||||||
|
Roboto, "Helvetica Neue", Arial, sans-serif;
|
||||||
|
--font-display:
|
||||||
|
var(--font-bricolage-grotesque), ui-sans-serif, system-ui, -apple-system,
|
||||||
"Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
|
"Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
|
||||||
--font-display: var(--font-bricolage-grotesque), ui-sans-serif, system-ui,
|
--font-mono:
|
||||||
-apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
|
var(--font-space-grotesk), ui-monospace, SFMono-Regular, "SF Mono",
|
||||||
--font-mono: var(--font-space-grotesk), ui-monospace, SFMono-Regular,
|
Consolas, "Liberation Mono", Menlo, monospace;
|
||||||
"SF Mono", Consolas, "Liberation Mono", Menlo, monospace;
|
|
||||||
|
|
||||||
/* Dimension */
|
/* Dimension */
|
||||||
--spacing-scale-000: 0px;
|
--spacing-scale-000: 0px;
|
||||||
|
|||||||
@@ -9,26 +9,22 @@ The Community Rule platform includes a comprehensive performance monitoring syst
|
|||||||
### Core Components
|
### Core Components
|
||||||
|
|
||||||
1. **Performance Monitor Module** (`tests/performance/performance-monitor.js`)
|
1. **Performance Monitor Module** (`tests/performance/performance-monitor.js`)
|
||||||
|
|
||||||
- Base `PerformanceMonitor` class for metric collection and analysis
|
- Base `PerformanceMonitor` class for metric collection and analysis
|
||||||
- `WebPerformanceMonitor` for browser-based performance monitoring
|
- `WebPerformanceMonitor` for browser-based performance monitoring
|
||||||
- `PlaywrightPerformanceMonitor` for E2E performance testing
|
- `PlaywrightPerformanceMonitor` for E2E performance testing
|
||||||
|
|
||||||
2. **Performance Tests** (`tests/e2e/performance.spec.ts`)
|
2. **Performance Tests** (`tests/e2e/performance.spec.ts`)
|
||||||
|
|
||||||
- Comprehensive E2E performance tests using Playwright
|
- Comprehensive E2E performance tests using Playwright
|
||||||
- Core Web Vitals monitoring
|
- Core Web Vitals monitoring
|
||||||
- Component render performance testing
|
- Component render performance testing
|
||||||
- Interaction performance testing
|
- Interaction performance testing
|
||||||
|
|
||||||
3. **Lighthouse CI Integration** (`lighthouserc.json`)
|
3. **Lighthouse CI Integration** (`lighthouserc.json`)
|
||||||
|
|
||||||
- Automated performance audits
|
- Automated performance audits
|
||||||
- Performance budget enforcement
|
- Performance budget enforcement
|
||||||
- Core Web Vitals validation
|
- Core Web Vitals validation
|
||||||
|
|
||||||
4. **Performance Budgets** (`performance-budgets.json`)
|
4. **Performance Budgets** (`performance-budgets.json`)
|
||||||
|
|
||||||
- Resource size limits
|
- Resource size limits
|
||||||
- Timing budgets
|
- Timing budgets
|
||||||
- Resource count limits
|
- Resource count limits
|
||||||
@@ -109,13 +105,11 @@ node scripts/performance-monitor.js
|
|||||||
### Core Web Vitals
|
### Core Web Vitals
|
||||||
|
|
||||||
1. **Largest Contentful Paint (LCP)**
|
1. **Largest Contentful Paint (LCP)**
|
||||||
|
|
||||||
- Measures loading performance
|
- Measures loading performance
|
||||||
- Target: < 2.5 seconds
|
- Target: < 2.5 seconds
|
||||||
- Baseline: < 2.0 seconds
|
- Baseline: < 2.0 seconds
|
||||||
|
|
||||||
2. **First Input Delay (FID)**
|
2. **First Input Delay (FID)**
|
||||||
|
|
||||||
- Measures interactivity
|
- Measures interactivity
|
||||||
- Target: < 100ms
|
- Target: < 100ms
|
||||||
- Baseline: < 50ms
|
- Baseline: < 50ms
|
||||||
@@ -256,13 +250,11 @@ The performance monitoring system automatically detects regressions by:
|
|||||||
### Common Issues
|
### Common Issues
|
||||||
|
|
||||||
1. **Test Timeouts**
|
1. **Test Timeouts**
|
||||||
|
|
||||||
- Increase timeout values for slow operations
|
- Increase timeout values for slow operations
|
||||||
- Add proper wait conditions
|
- Add proper wait conditions
|
||||||
- Check for network issues
|
- Check for network issues
|
||||||
|
|
||||||
2. **False Positives**
|
2. **False Positives**
|
||||||
|
|
||||||
- Adjust baseline values
|
- Adjust baseline values
|
||||||
- Review test environment
|
- Review test environment
|
||||||
- Check for external dependencies
|
- Check for external dependencies
|
||||||
@@ -290,19 +282,16 @@ npm run performance:monitor -- --verbose
|
|||||||
### Planned Features
|
### Planned Features
|
||||||
|
|
||||||
1. **Real User Monitoring (RUM)**
|
1. **Real User Monitoring (RUM)**
|
||||||
|
|
||||||
- Collect performance data from real users
|
- Collect performance data from real users
|
||||||
- User-centric performance metrics
|
- User-centric performance metrics
|
||||||
- Geographic performance analysis
|
- Geographic performance analysis
|
||||||
|
|
||||||
2. **Advanced Analytics**
|
2. **Advanced Analytics**
|
||||||
|
|
||||||
- Machine learning-based regression detection
|
- Machine learning-based regression detection
|
||||||
- Predictive performance modeling
|
- Predictive performance modeling
|
||||||
- Automated performance optimization suggestions
|
- Automated performance optimization suggestions
|
||||||
|
|
||||||
3. **Performance Dashboard**
|
3. **Performance Dashboard**
|
||||||
|
|
||||||
- Web-based performance monitoring dashboard
|
- Web-based performance monitoring dashboard
|
||||||
- Real-time performance metrics visualization
|
- Real-time performance metrics visualization
|
||||||
- Historical performance trends
|
- Historical performance trends
|
||||||
|
|||||||
@@ -81,17 +81,14 @@ Visual regression tests run automatically in the CI pipeline:
|
|||||||
### Common Issues
|
### Common Issues
|
||||||
|
|
||||||
1. **"Snapshot doesn't exist" errors**
|
1. **"Snapshot doesn't exist" errors**
|
||||||
|
|
||||||
- **Cause**: Baseline snapshots haven't been generated
|
- **Cause**: Baseline snapshots haven't been generated
|
||||||
- **Solution**: Run snapshot seeding (see above)
|
- **Solution**: Run snapshot seeding (see above)
|
||||||
|
|
||||||
2. **Platform-specific failures**
|
2. **Platform-specific failures**
|
||||||
|
|
||||||
- **Cause**: Snapshots generated on different OS (macOS vs Linux)
|
- **Cause**: Snapshots generated on different OS (macOS vs Linux)
|
||||||
- **Solution**: Use Docker container for local snapshot generation
|
- **Solution**: Use Docker container for local snapshot generation
|
||||||
|
|
||||||
3. **Minor pixel differences**
|
3. **Minor pixel differences**
|
||||||
|
|
||||||
- **Cause**: Font rendering differences, anti-aliasing, etc.
|
- **Cause**: Font rendering differences, anti-aliasing, etc.
|
||||||
- **Solution**: Check tolerance settings in `playwright.config.ts`
|
- **Solution**: Check tolerance settings in `playwright.config.ts`
|
||||||
|
|
||||||
|
|||||||
@@ -1 +1,15 @@
|
|||||||
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};
|
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,10 +1,239 @@
|
|||||||
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:`{
|
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: {
|
args: {
|
||||||
src: "/assets/Avatar_1.png",
|
src: "/assets/Avatar_1.png",
|
||||||
alt: "User Avatar",
|
alt: "User Avatar",
|
||||||
size: "medium"
|
size: "medium"
|
||||||
}
|
}
|
||||||
}`,...r.parameters?.docs?.source}}};t.parameters={...t.parameters,docs:{...t.parameters?.docs,source:{originalSource:`{
|
}`,
|
||||||
|
...r.parameters?.docs?.source,
|
||||||
|
},
|
||||||
|
},
|
||||||
|
};
|
||||||
|
t.parameters = {
|
||||||
|
...t.parameters,
|
||||||
|
docs: {
|
||||||
|
...t.parameters?.docs,
|
||||||
|
source: {
|
||||||
|
originalSource: `{
|
||||||
args: {
|
args: {
|
||||||
src: "/assets/Avatar_1.png",
|
src: "/assets/Avatar_1.png",
|
||||||
alt: "User Avatar"
|
alt: "User Avatar"
|
||||||
@@ -24,7 +253,17 @@ import{j as s}from"./jsx-runtime-C_nHp4yK.js";import{A as a}from"./Avatar-C4Vb3o
|
|||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}`,...t.parameters?.docs?.source}}};i.parameters={...i.parameters,docs:{...i.parameters?.docs,source:{originalSource:`{
|
}`,
|
||||||
|
...t.parameters?.docs?.source,
|
||||||
|
},
|
||||||
|
},
|
||||||
|
};
|
||||||
|
i.parameters = {
|
||||||
|
...i.parameters,
|
||||||
|
docs: {
|
||||||
|
...i.parameters?.docs,
|
||||||
|
source: {
|
||||||
|
originalSource: `{
|
||||||
args: {
|
args: {
|
||||||
size: "large"
|
size: "large"
|
||||||
},
|
},
|
||||||
@@ -42,7 +281,17 @@ import{j as s}from"./jsx-runtime-C_nHp4yK.js";import{A as a}from"./Avatar-C4Vb3o
|
|||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}`,...i.parameters?.docs?.source}}};n.parameters={...n.parameters,docs:{...n.parameters?.docs,source:{originalSource:`{
|
}`,
|
||||||
|
...i.parameters?.docs?.source,
|
||||||
|
},
|
||||||
|
},
|
||||||
|
};
|
||||||
|
n.parameters = {
|
||||||
|
...n.parameters,
|
||||||
|
docs: {
|
||||||
|
...n.parameters?.docs,
|
||||||
|
source: {
|
||||||
|
originalSource: `{
|
||||||
args: {},
|
args: {},
|
||||||
render: () => <div className="space-y-6">
|
render: () => <div className="space-y-6">
|
||||||
<div>
|
<div>
|
||||||
@@ -88,4 +337,22 @@ import{j as s}from"./jsx-runtime-C_nHp4yK.js";import{A as a}from"./Avatar-C4Vb3o
|
|||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}`,...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};
|
}`,
|
||||||
|
...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 +1,15 @@
|
|||||||
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};
|
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 };
|
||||||
|
|||||||
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
@@ -1 +1,96 @@
|
|||||||
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};
|
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,4 +1,120 @@
|
|||||||
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:`{
|
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: {
|
args: {
|
||||||
title: "Collaborate",
|
title: "Collaborate",
|
||||||
subtitle: "with clarity",
|
subtitle: "with clarity",
|
||||||
@@ -13,7 +129,17 @@ import{C as s}from"./ContentLockup-DbWiPA4N.js";import"./jsx-runtime-C_nHp4yK.js
|
|||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}`,...t.parameters?.docs?.source}}};e.parameters={...e.parameters,docs:{...e.parameters?.docs,source:{originalSource:`{
|
}`,
|
||||||
|
...t.parameters?.docs?.source,
|
||||||
|
},
|
||||||
|
},
|
||||||
|
};
|
||||||
|
e.parameters = {
|
||||||
|
...e.parameters,
|
||||||
|
docs: {
|
||||||
|
...e.parameters?.docs,
|
||||||
|
source: {
|
||||||
|
originalSource: `{
|
||||||
args: {
|
args: {
|
||||||
title: "Collaborate",
|
title: "Collaborate",
|
||||||
subtitle: "with clarity",
|
subtitle: "with clarity",
|
||||||
@@ -28,7 +154,17 @@ import{C as s}from"./ContentLockup-DbWiPA4N.js";import"./jsx-runtime-C_nHp4yK.js
|
|||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}`,...e.parameters?.docs?.source}}};o.parameters={...o.parameters,docs:{...o.parameters?.docs,source:{originalSource:`{
|
}`,
|
||||||
|
...e.parameters?.docs?.source,
|
||||||
|
},
|
||||||
|
},
|
||||||
|
};
|
||||||
|
o.parameters = {
|
||||||
|
...o.parameters,
|
||||||
|
docs: {
|
||||||
|
...o.parameters?.docs,
|
||||||
|
source: {
|
||||||
|
originalSource: `{
|
||||||
args: {
|
args: {
|
||||||
title: "Simple",
|
title: "Simple",
|
||||||
subtitle: "solution",
|
subtitle: "solution",
|
||||||
@@ -43,7 +179,17 @@ import{C as s}from"./ContentLockup-DbWiPA4N.js";import"./jsx-runtime-C_nHp4yK.js
|
|||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}`,...o.parameters?.docs?.source}}};n.parameters={...n.parameters,docs:{...n.parameters?.docs,source:{originalSource:`{
|
}`,
|
||||||
|
...o.parameters?.docs?.source,
|
||||||
|
},
|
||||||
|
},
|
||||||
|
};
|
||||||
|
n.parameters = {
|
||||||
|
...n.parameters,
|
||||||
|
docs: {
|
||||||
|
...n.parameters?.docs,
|
||||||
|
source: {
|
||||||
|
originalSource: `{
|
||||||
args: {
|
args: {
|
||||||
title: "Collaborate",
|
title: "Collaborate",
|
||||||
subtitle: "with clarity",
|
subtitle: "with clarity",
|
||||||
@@ -59,4 +205,17 @@ import{C as s}from"./ContentLockup-DbWiPA4N.js";import"./jsx-runtime-C_nHp4yK.js
|
|||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}`,...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};
|
}`,
|
||||||
|
...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
File diff suppressed because one or more lines are too long
@@ -1 +1,191 @@
|
|||||||
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};
|
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,4 +1,106 @@
|
|||||||
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:`{
|
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: {},
|
args: {},
|
||||||
parameters: {
|
parameters: {
|
||||||
docs: {
|
docs: {
|
||||||
@@ -7,7 +109,17 @@ import{j as e}from"./jsx-runtime-C_nHp4yK.js";import{H as o}from"./Header-Bz-bT1
|
|||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}`,...t.parameters?.docs?.source}}};a.parameters={...a.parameters,docs:{...a.parameters?.docs,source:{originalSource:`{
|
}`,
|
||||||
|
...t.parameters?.docs?.source,
|
||||||
|
},
|
||||||
|
},
|
||||||
|
};
|
||||||
|
a.parameters = {
|
||||||
|
...a.parameters,
|
||||||
|
docs: {
|
||||||
|
...a.parameters?.docs,
|
||||||
|
source: {
|
||||||
|
originalSource: `{
|
||||||
args: {},
|
args: {},
|
||||||
render: () => <div className="min-h-screen bg-[var(--color-surface-default-primary)]">
|
render: () => <div className="min-h-screen bg-[var(--color-surface-default-primary)]">
|
||||||
<Header />
|
<Header />
|
||||||
@@ -42,4 +154,15 @@ import{j as e}from"./jsx-runtime-C_nHp4yK.js";import{H as o}from"./Header-Bz-bT1
|
|||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}`,...a.parameters?.docs?.source}}};const f=["Default","InPageContext"];export{t as Default,a as InPageContext,f as __namedExportsOrder,x as default};
|
}`,
|
||||||
|
...a.parameters?.docs?.source,
|
||||||
|
},
|
||||||
|
},
|
||||||
|
};
|
||||||
|
const f = ["Default", "InPageContext"];
|
||||||
|
export {
|
||||||
|
t as Default,
|
||||||
|
a as InPageContext,
|
||||||
|
f as __namedExportsOrder,
|
||||||
|
x as default,
|
||||||
|
};
|
||||||
|
|||||||
@@ -1 +1,41 @@
|
|||||||
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};
|
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,8 +1,53 @@
|
|||||||
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:`{
|
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: {
|
args: {
|
||||||
stretch: false
|
stretch: false
|
||||||
},
|
},
|
||||||
render: args => <HeaderTab {...args}>
|
render: args => <HeaderTab {...args}>
|
||||||
<Logo size="homeHeaderMd" />
|
<Logo size="homeHeaderMd" />
|
||||||
</HeaderTab>
|
</HeaderTab>
|
||||||
}`,...e.parameters?.docs?.source}}};const m=["Default"];export{e as Default,m as __namedExportsOrder,p as default};
|
}`,
|
||||||
|
...e.parameters?.docs?.source,
|
||||||
|
},
|
||||||
|
},
|
||||||
|
};
|
||||||
|
const m = ["Default"];
|
||||||
|
export { e as Default, m as __namedExportsOrder, p as default };
|
||||||
|
|||||||
@@ -1 +1,43 @@
|
|||||||
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};
|
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,4 +1,64 @@
|
|||||||
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:`{
|
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: {
|
args: {
|
||||||
title: "Collaborate",
|
title: "Collaborate",
|
||||||
subtitle: "with clarity",
|
subtitle: "with clarity",
|
||||||
@@ -13,4 +73,10 @@ import{H as e}from"./HeroBanner-D2qHR4vw.js";import"./jsx-runtime-C_nHp4yK.js";i
|
|||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}`,...t.parameters?.docs?.source}}};const l=["Default"];export{t as Default,l as __namedExportsOrder,p as default};
|
}`,
|
||||||
|
...t.parameters?.docs?.source,
|
||||||
|
},
|
||||||
|
},
|
||||||
|
};
|
||||||
|
const l = ["Default"];
|
||||||
|
export { t as Default, l as __namedExportsOrder, p as default };
|
||||||
|
|||||||
File diff suppressed because one or more lines are too long
@@ -1 +1,88 @@
|
|||||||
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};
|
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,4 +1,73 @@
|
|||||||
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:`{
|
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: {
|
args: {
|
||||||
className: "w-[400px] h-[200px]"
|
className: "w-[400px] h-[200px]"
|
||||||
},
|
},
|
||||||
@@ -9,7 +78,17 @@ import{j as e}from"./jsx-runtime-C_nHp4yK.js";import{H as o}from"./HeroDecor-Csf
|
|||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}`,...r.parameters?.docs?.source}}};t.parameters={...t.parameters,docs:{...t.parameters?.docs,source:{originalSource:`{
|
}`,
|
||||||
|
...r.parameters?.docs?.source,
|
||||||
|
},
|
||||||
|
},
|
||||||
|
};
|
||||||
|
t.parameters = {
|
||||||
|
...t.parameters,
|
||||||
|
docs: {
|
||||||
|
...t.parameters?.docs,
|
||||||
|
source: {
|
||||||
|
originalSource: `{
|
||||||
args: {
|
args: {
|
||||||
className: "w-[600px] h-[300px]"
|
className: "w-[600px] h-[300px]"
|
||||||
},
|
},
|
||||||
@@ -27,4 +106,15 @@ import{j as e}from"./jsx-runtime-C_nHp4yK.js";import{H as o}from"./HeroDecor-Csf
|
|||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}`,...t.parameters?.docs?.source}}};const p=["Default","WithBackground"];export{r as Default,t as WithBackground,p as __namedExportsOrder,d as default};
|
}`,
|
||||||
|
...t.parameters?.docs?.source,
|
||||||
|
},
|
||||||
|
},
|
||||||
|
};
|
||||||
|
const p = ["Default", "WithBackground"];
|
||||||
|
export {
|
||||||
|
r as Default,
|
||||||
|
t as WithBackground,
|
||||||
|
p as __namedExportsOrder,
|
||||||
|
d as default,
|
||||||
|
};
|
||||||
|
|||||||
File diff suppressed because one or more lines are too long
@@ -1 +1,144 @@
|
|||||||
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};
|
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 };
|
||||||
|
|||||||
File diff suppressed because one or more lines are too long
@@ -1 +1,21 @@
|
|||||||
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};
|
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,4 +1,132 @@
|
|||||||
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:`{
|
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: {
|
args: {
|
||||||
size: "default"
|
size: "default"
|
||||||
},
|
},
|
||||||
@@ -7,7 +135,17 @@ import{j as e}from"./jsx-runtime-C_nHp4yK.js";import{M as s}from"./MenuBar-anMCq
|
|||||||
<MenuBarItem size="large">About</MenuBarItem>
|
<MenuBarItem size="large">About</MenuBarItem>
|
||||||
<MenuBarItem size="large">Contact</MenuBarItem>
|
<MenuBarItem size="large">Contact</MenuBarItem>
|
||||||
</MenuBar>
|
</MenuBar>
|
||||||
}`,...a.parameters?.docs?.source}}};r.parameters={...r.parameters,docs:{...r.parameters?.docs,source:{originalSource:`{
|
}`,
|
||||||
|
...a.parameters?.docs?.source,
|
||||||
|
},
|
||||||
|
},
|
||||||
|
};
|
||||||
|
r.parameters = {
|
||||||
|
...r.parameters,
|
||||||
|
docs: {
|
||||||
|
...r.parameters?.docs,
|
||||||
|
source: {
|
||||||
|
originalSource: `{
|
||||||
args: {},
|
args: {},
|
||||||
render: () => <div className="space-y-6">
|
render: () => <div className="space-y-6">
|
||||||
<div>
|
<div>
|
||||||
@@ -53,4 +191,10 @@ import{j as e}from"./jsx-runtime-C_nHp4yK.js";import{M as s}from"./MenuBar-anMCq
|
|||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}`,...r.parameters?.docs?.source}}};const u=["Default","Sizes"];export{a as Default,r as Sizes,u as __namedExportsOrder,d as default};
|
}`,
|
||||||
|
...r.parameters?.docs?.source,
|
||||||
|
},
|
||||||
|
},
|
||||||
|
};
|
||||||
|
const u = ["Default", "Sizes"];
|
||||||
|
export { a as Default, r as Sizes, u as __namedExportsOrder, d as default };
|
||||||
|
|||||||
File diff suppressed because one or more lines are too long
@@ -1,9 +1,217 @@
|
|||||||
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:`{
|
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: {
|
args: {
|
||||||
children: "Menu Item",
|
children: "Menu Item",
|
||||||
size: "large"
|
size: "large"
|
||||||
}
|
}
|
||||||
}`,...n.parameters?.docs?.source}}};r.parameters={...r.parameters,docs:{...r.parameters?.docs,source:{originalSource:`{
|
}`,
|
||||||
|
...n.parameters?.docs?.source,
|
||||||
|
},
|
||||||
|
},
|
||||||
|
};
|
||||||
|
r.parameters = {
|
||||||
|
...r.parameters,
|
||||||
|
docs: {
|
||||||
|
...r.parameters?.docs,
|
||||||
|
source: {
|
||||||
|
originalSource: `{
|
||||||
args: {
|
args: {
|
||||||
children: "Menu Item",
|
children: "Menu Item",
|
||||||
size: "large"
|
size: "large"
|
||||||
@@ -25,7 +233,17 @@ import{j as e}from"./jsx-runtime-C_nHp4yK.js";import{M as a}from"./MenuBarItem-D
|
|||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}`,...r.parameters?.docs?.source}}};t.parameters={...t.parameters,docs:{...t.parameters?.docs,source:{originalSource:`{
|
}`,
|
||||||
|
...r.parameters?.docs?.source,
|
||||||
|
},
|
||||||
|
},
|
||||||
|
};
|
||||||
|
t.parameters = {
|
||||||
|
...t.parameters,
|
||||||
|
docs: {
|
||||||
|
...t.parameters?.docs,
|
||||||
|
source: {
|
||||||
|
originalSource: `{
|
||||||
args: {
|
args: {
|
||||||
children: "Menu Item",
|
children: "Menu Item",
|
||||||
variant: "default"
|
variant: "default"
|
||||||
@@ -50,7 +268,17 @@ import{j as e}from"./jsx-runtime-C_nHp4yK.js";import{M as a}from"./MenuBarItem-D
|
|||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}`,...t.parameters?.docs?.source}}};i.parameters={...i.parameters,docs:{...i.parameters?.docs,source:{originalSource:`{
|
}`,
|
||||||
|
...t.parameters?.docs?.source,
|
||||||
|
},
|
||||||
|
},
|
||||||
|
};
|
||||||
|
i.parameters = {
|
||||||
|
...i.parameters,
|
||||||
|
docs: {
|
||||||
|
...i.parameters?.docs,
|
||||||
|
source: {
|
||||||
|
originalSource: `{
|
||||||
args: {
|
args: {
|
||||||
children: "Menu Item",
|
children: "Menu Item",
|
||||||
size: "large",
|
size: "large",
|
||||||
@@ -71,7 +299,17 @@ import{j as e}from"./jsx-runtime-C_nHp4yK.js";import{M as a}from"./MenuBarItem-D
|
|||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}`,...i.parameters?.docs?.source}}};l.parameters={...l.parameters,docs:{...l.parameters?.docs,source:{originalSource:`{
|
}`,
|
||||||
|
...i.parameters?.docs?.source,
|
||||||
|
},
|
||||||
|
},
|
||||||
|
};
|
||||||
|
l.parameters = {
|
||||||
|
...l.parameters,
|
||||||
|
docs: {
|
||||||
|
...l.parameters?.docs,
|
||||||
|
source: {
|
||||||
|
originalSource: `{
|
||||||
args: {},
|
args: {},
|
||||||
render: () => <div className="space-y-6">
|
render: () => <div className="space-y-6">
|
||||||
<div>
|
<div>
|
||||||
@@ -117,4 +355,18 @@ import{j as e}from"./jsx-runtime-C_nHp4yK.js";import{M as a}from"./MenuBarItem-D
|
|||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}`,...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};
|
}`,
|
||||||
|
...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 +1,24 @@
|
|||||||
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};
|
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,11 +1,124 @@
|
|||||||
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:`{
|
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: {
|
args: {
|
||||||
number: 1,
|
number: 1,
|
||||||
text: "Document how your community makes decisions",
|
text: "Document how your community makes decisions",
|
||||||
iconShape: "blob",
|
iconShape: "blob",
|
||||||
iconColor: "green"
|
iconColor: "green"
|
||||||
}
|
}
|
||||||
}`,...t.parameters?.docs?.source}}};r.parameters={...r.parameters,docs:{...r.parameters?.docs,source:{originalSource:`{
|
}`,
|
||||||
|
...t.parameters?.docs?.source,
|
||||||
|
},
|
||||||
|
},
|
||||||
|
};
|
||||||
|
r.parameters = {
|
||||||
|
...r.parameters,
|
||||||
|
docs: {
|
||||||
|
...r.parameters?.docs,
|
||||||
|
source: {
|
||||||
|
originalSource: `{
|
||||||
args: {
|
args: {
|
||||||
number: 1,
|
number: 1,
|
||||||
text: "Example card text",
|
text: "Example card text",
|
||||||
@@ -24,7 +137,17 @@ import{j as e}from"./jsx-runtime-C_nHp4yK.js";import{N as o}from"./NumberedCard-
|
|||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}`,...r.parameters?.docs?.source}}};n.parameters={...n.parameters,docs:{...n.parameters?.docs,source:{originalSource:`{
|
}`,
|
||||||
|
...r.parameters?.docs?.source,
|
||||||
|
},
|
||||||
|
},
|
||||||
|
};
|
||||||
|
n.parameters = {
|
||||||
|
...n.parameters,
|
||||||
|
docs: {
|
||||||
|
...n.parameters?.docs,
|
||||||
|
source: {
|
||||||
|
originalSource: `{
|
||||||
args: {
|
args: {
|
||||||
number: 1,
|
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",
|
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",
|
||||||
@@ -38,4 +161,16 @@ import{j as e}from"./jsx-runtime-C_nHp4yK.js";import{N as o}from"./NumberedCard-
|
|||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}`,...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};
|
}`,
|
||||||
|
...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,4 +1,184 @@
|
|||||||
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:`{
|
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: {
|
args: {
|
||||||
title: "How CommunityRule works",
|
title: "How CommunityRule works",
|
||||||
subtitle: "Here's a quick overview of the process, from start to finish.",
|
subtitle: "Here's a quick overview of the process, from start to finish.",
|
||||||
@@ -16,7 +196,17 @@ import{j as e}from"./jsx-runtime-C_nHp4yK.js";import{N as m}from"./NumberedCard-
|
|||||||
iconColor: "orange"
|
iconColor: "orange"
|
||||||
}]
|
}]
|
||||||
}
|
}
|
||||||
}`,...n.parameters?.docs?.source}}};s.parameters={...s.parameters,docs:{...s.parameters?.docs,source:{originalSource:`{
|
}`,
|
||||||
|
...n.parameters?.docs?.source,
|
||||||
|
},
|
||||||
|
},
|
||||||
|
};
|
||||||
|
s.parameters = {
|
||||||
|
...s.parameters,
|
||||||
|
docs: {
|
||||||
|
...s.parameters?.docs,
|
||||||
|
source: {
|
||||||
|
originalSource: `{
|
||||||
args: {
|
args: {
|
||||||
title: "Our Process",
|
title: "Our Process",
|
||||||
subtitle: "Follow these simple steps to get started with your project.",
|
subtitle: "Follow these simple steps to get started with your project.",
|
||||||
@@ -45,4 +235,15 @@ import{j as e}from"./jsx-runtime-C_nHp4yK.js";import{N as m}from"./NumberedCard-
|
|||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}`,...s.parameters?.docs?.source}}};const v=["Default","CustomContent"];export{s as CustomContent,n as Default,v as __namedExportsOrder,C as default};
|
}`,
|
||||||
|
...s.parameters?.docs?.source,
|
||||||
|
},
|
||||||
|
},
|
||||||
|
};
|
||||||
|
const v = ["Default", "CustomContent"];
|
||||||
|
export {
|
||||||
|
s as CustomContent,
|
||||||
|
n as Default,
|
||||||
|
v as __namedExportsOrder,
|
||||||
|
C as default,
|
||||||
|
};
|
||||||
|
|||||||
@@ -1 +1,31 @@
|
|||||||
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};
|
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,10 +1,128 @@
|
|||||||
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:`{
|
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: {
|
args: {
|
||||||
title: "How CommunityRule works",
|
title: "How CommunityRule works",
|
||||||
subtitle: "Here's a quick overview of the process, from start to finish.",
|
subtitle: "Here's a quick overview of the process, from start to finish.",
|
||||||
titleLg: "How CommunityRule helps"
|
titleLg: "How CommunityRule helps"
|
||||||
}
|
}
|
||||||
}`,...e.parameters?.docs?.source}}};t.parameters={...t.parameters,docs:{...t.parameters?.docs,source:{originalSource:`{
|
}`,
|
||||||
|
...e.parameters?.docs?.source,
|
||||||
|
},
|
||||||
|
},
|
||||||
|
};
|
||||||
|
t.parameters = {
|
||||||
|
...t.parameters,
|
||||||
|
docs: {
|
||||||
|
...t.parameters?.docs,
|
||||||
|
source: {
|
||||||
|
originalSource: `{
|
||||||
args: {
|
args: {
|
||||||
title: "Our Mission",
|
title: "Our Mission",
|
||||||
subtitle: "We're dedicated to helping communities thrive through better decision-making processes and transparent governance structures.",
|
subtitle: "We're dedicated to helping communities thrive through better decision-making processes and transparent governance structures.",
|
||||||
@@ -17,7 +135,17 @@ import{S as n}from"./SectionHeader-CadpOP1T.js";import"./jsx-runtime-C_nHp4yK.js
|
|||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}`,...t.parameters?.docs?.source}}};s.parameters={...s.parameters,docs:{...s.parameters?.docs,source:{originalSource:`{
|
}`,
|
||||||
|
...t.parameters?.docs?.source,
|
||||||
|
},
|
||||||
|
},
|
||||||
|
};
|
||||||
|
s.parameters = {
|
||||||
|
...s.parameters,
|
||||||
|
docs: {
|
||||||
|
...s.parameters?.docs,
|
||||||
|
source: {
|
||||||
|
originalSource: `{
|
||||||
args: {
|
args: {
|
||||||
title: "Complex Process",
|
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.",
|
subtitle: "This is a much longer subtitle that demonstrates how the component handles extended text content across different breakpoints and layout configurations.",
|
||||||
@@ -30,7 +158,17 @@ import{S as n}from"./SectionHeader-CadpOP1T.js";import"./jsx-runtime-C_nHp4yK.js
|
|||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}`,...s.parameters?.docs?.source}}};o.parameters={...o.parameters,docs:{...o.parameters?.docs,source:{originalSource:`{
|
}`,
|
||||||
|
...s.parameters?.docs?.source,
|
||||||
|
},
|
||||||
|
},
|
||||||
|
};
|
||||||
|
o.parameters = {
|
||||||
|
...o.parameters,
|
||||||
|
docs: {
|
||||||
|
...o.parameters?.docs,
|
||||||
|
source: {
|
||||||
|
originalSource: `{
|
||||||
args: {
|
args: {
|
||||||
title: "Responsive Design",
|
title: "Responsive Design",
|
||||||
subtitle: "Test the responsive behavior by resizing your browser window or using the viewport controls in Storybook.",
|
subtitle: "Test the responsive behavior by resizing your browser window or using the viewport controls in Storybook.",
|
||||||
@@ -43,7 +181,17 @@ import{S as n}from"./SectionHeader-CadpOP1T.js";import"./jsx-runtime-C_nHp4yK.js
|
|||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}`,...o.parameters?.docs?.source}}};r.parameters={...r.parameters,docs:{...r.parameters?.docs,source:{originalSource:`{
|
}`,
|
||||||
|
...o.parameters?.docs?.source,
|
||||||
|
},
|
||||||
|
},
|
||||||
|
};
|
||||||
|
r.parameters = {
|
||||||
|
...r.parameters,
|
||||||
|
docs: {
|
||||||
|
...r.parameters?.docs,
|
||||||
|
source: {
|
||||||
|
originalSource: `{
|
||||||
args: {
|
args: {
|
||||||
title: "Simple Header",
|
title: "Simple Header",
|
||||||
subtitle: "This example doesn't specify a titleLg prop, so it will use the same title text across all breakpoints."
|
subtitle: "This example doesn't specify a titleLg prop, so it will use the same title text across all breakpoints."
|
||||||
@@ -55,4 +203,24 @@ import{S as n}from"./SectionHeader-CadpOP1T.js";import"./jsx-runtime-C_nHp4yK.js
|
|||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}`,...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};
|
}`,
|
||||||
|
...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 +1,36 @@
|
|||||||
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};
|
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,16 +1,119 @@
|
|||||||
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:`{
|
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: {
|
args: {
|
||||||
number: 1
|
number: 1
|
||||||
}
|
}
|
||||||
}`,...n.parameters?.docs?.source}}};s.parameters={...s.parameters,docs:{...s.parameters?.docs,source:{originalSource:`{
|
}`,
|
||||||
|
...n.parameters?.docs?.source,
|
||||||
|
},
|
||||||
|
},
|
||||||
|
};
|
||||||
|
s.parameters = {
|
||||||
|
...s.parameters,
|
||||||
|
docs: {
|
||||||
|
...s.parameters?.docs,
|
||||||
|
source: {
|
||||||
|
originalSource: `{
|
||||||
args: {
|
args: {
|
||||||
number: 2
|
number: 2
|
||||||
}
|
}
|
||||||
}`,...s.parameters?.docs?.source}}};o.parameters={...o.parameters,docs:{...o.parameters?.docs,source:{originalSource:`{
|
}`,
|
||||||
|
...s.parameters?.docs?.source,
|
||||||
|
},
|
||||||
|
},
|
||||||
|
};
|
||||||
|
o.parameters = {
|
||||||
|
...o.parameters,
|
||||||
|
docs: {
|
||||||
|
...o.parameters?.docs,
|
||||||
|
source: {
|
||||||
|
originalSource: `{
|
||||||
args: {
|
args: {
|
||||||
number: 3
|
number: 3
|
||||||
}
|
}
|
||||||
}`,...o.parameters?.docs?.source}}};a.parameters={...a.parameters,docs:{...a.parameters?.docs,source:{originalSource:`{
|
}`,
|
||||||
|
...o.parameters?.docs?.source,
|
||||||
|
},
|
||||||
|
},
|
||||||
|
};
|
||||||
|
a.parameters = {
|
||||||
|
...a.parameters,
|
||||||
|
docs: {
|
||||||
|
...a.parameters?.docs,
|
||||||
|
source: {
|
||||||
|
originalSource: `{
|
||||||
render: () => <div className="flex space-x-4">
|
render: () => <div className="flex space-x-4">
|
||||||
<SectionNumber number={1} />
|
<SectionNumber number={1} />
|
||||||
<SectionNumber number={2} />
|
<SectionNumber number={2} />
|
||||||
@@ -23,7 +126,17 @@ import{j as e}from"./jsx-runtime-C_nHp4yK.js";import{S as r}from"./SectionNumber
|
|||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}`,...a.parameters?.docs?.source}}};t.parameters={...t.parameters,docs:{...t.parameters?.docs,source:{originalSource:`{
|
}`,
|
||||||
|
...a.parameters?.docs?.source,
|
||||||
|
},
|
||||||
|
},
|
||||||
|
};
|
||||||
|
t.parameters = {
|
||||||
|
...t.parameters,
|
||||||
|
docs: {
|
||||||
|
...t.parameters?.docs,
|
||||||
|
source: {
|
||||||
|
originalSource: `{
|
||||||
render: () => <div className="bg-gray-100 p-8 rounded-lg">
|
render: () => <div className="bg-gray-100 p-8 rounded-lg">
|
||||||
<div className="flex space-x-4">
|
<div className="flex space-x-4">
|
||||||
<SectionNumber number={1} />
|
<SectionNumber number={1} />
|
||||||
@@ -38,4 +151,24 @@ import{j as e}from"./jsx-runtime-C_nHp4yK.js";import{S as r}from"./SectionNumber
|
|||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}`,...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};
|
}`,
|
||||||
|
...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,
|
||||||
|
};
|
||||||
|
|||||||
+42433
-18
File diff suppressed because one or more lines are too long
+2800
-1
File diff suppressed because one or more lines are too long
+74559
-300
File diff suppressed because one or more lines are too long
@@ -1 +1,26 @@
|
|||||||
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};
|
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 +1,3 @@
|
|||||||
import{b as r}from"./iframe-D_aMTKb2.js";var s=r();export{s as j};
|
import { b as r } from "./iframe-D_aMTKb2.js";
|
||||||
|
var s = r();
|
||||||
|
export { s as j };
|
||||||
|
|||||||
File diff suppressed because one or more lines are too long
@@ -1 +1,58 @@
|
|||||||
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 _};
|
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
+11500
-11
File diff suppressed because one or more lines are too long
+694
-1
File diff suppressed because one or more lines are too long
+50
-1
@@ -1 +1,50 @@
|
|||||||
{"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"}}}
|
{
|
||||||
|
"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 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
File diff suppressed because one or more lines are too long
@@ -1,6 +1,6 @@
|
|||||||
import ESM_COMPAT_Module from "node:module";
|
import ESM_COMPAT_Module from "node:module";
|
||||||
import { fileURLToPath as ESM_COMPAT_fileURLToPath } from 'node:url';
|
import { fileURLToPath as ESM_COMPAT_fileURLToPath } from "node:url";
|
||||||
import { dirname as ESM_COMPAT_dirname } from 'node:path';
|
import { dirname as ESM_COMPAT_dirname } from "node:path";
|
||||||
const __filename = ESM_COMPAT_fileURLToPath(import.meta.url);
|
const __filename = ESM_COMPAT_fileURLToPath(import.meta.url);
|
||||||
const __dirname = ESM_COMPAT_dirname(__filename);
|
const __dirname = ESM_COMPAT_dirname(__filename);
|
||||||
const require = ESM_COMPAT_Module.createRequire(import.meta.url);
|
const require = ESM_COMPAT_Module.createRequire(import.meta.url);
|
||||||
@@ -43,7 +43,7 @@ var n = {
|
|||||||
"useState",
|
"useState",
|
||||||
"useSyncExternalStore",
|
"useSyncExternalStore",
|
||||||
"useTransition",
|
"useTransition",
|
||||||
"version"
|
"version",
|
||||||
],
|
],
|
||||||
"react-dom": [
|
"react-dom": [
|
||||||
"__SECRET_INTERNALS_DO_NOT_USE_OR_YOU_WILL_BE_FIRED",
|
"__SECRET_INTERNALS_DO_NOT_USE_OR_YOU_WILL_BE_FIRED",
|
||||||
@@ -57,7 +57,7 @@ var n = {
|
|||||||
"unmountComponentAtNode",
|
"unmountComponentAtNode",
|
||||||
"unstable_batchedUpdates",
|
"unstable_batchedUpdates",
|
||||||
"unstable_renderSubtreeIntoContainer",
|
"unstable_renderSubtreeIntoContainer",
|
||||||
"version"
|
"version",
|
||||||
],
|
],
|
||||||
"react-dom/client": ["createRoot", "hydrateRoot"],
|
"react-dom/client": ["createRoot", "hydrateRoot"],
|
||||||
"@storybook/icons": [
|
"@storybook/icons": [
|
||||||
@@ -306,7 +306,7 @@ var n = {
|
|||||||
"ZoomIcon",
|
"ZoomIcon",
|
||||||
"ZoomOutIcon",
|
"ZoomOutIcon",
|
||||||
"ZoomResetIcon",
|
"ZoomResetIcon",
|
||||||
"iconList"
|
"iconList",
|
||||||
],
|
],
|
||||||
"storybook/manager-api": [
|
"storybook/manager-api": [
|
||||||
"ActiveTabs",
|
"ActiveTabs",
|
||||||
@@ -351,7 +351,7 @@ var n = {
|
|||||||
"useSharedState",
|
"useSharedState",
|
||||||
"useStoryPrepared",
|
"useStoryPrepared",
|
||||||
"useStorybookApi",
|
"useStorybookApi",
|
||||||
"useStorybookState"
|
"useStorybookState",
|
||||||
],
|
],
|
||||||
"storybook/theming": [
|
"storybook/theming": [
|
||||||
"CacheProvider",
|
"CacheProvider",
|
||||||
@@ -377,7 +377,7 @@ var n = {
|
|||||||
"themes",
|
"themes",
|
||||||
"typography",
|
"typography",
|
||||||
"useTheme",
|
"useTheme",
|
||||||
"withTheme"
|
"withTheme",
|
||||||
],
|
],
|
||||||
"storybook/theming/create": ["create", "themes"],
|
"storybook/theming/create": ["create", "themes"],
|
||||||
"storybook/test": [
|
"storybook/test": [
|
||||||
@@ -465,7 +465,7 @@ var n = {
|
|||||||
"userEvent",
|
"userEvent",
|
||||||
"waitFor",
|
"waitFor",
|
||||||
"waitForElementToBeRemoved",
|
"waitForElementToBeRemoved",
|
||||||
"within"
|
"within",
|
||||||
],
|
],
|
||||||
"storybook/internal/channels": [
|
"storybook/internal/channels": [
|
||||||
"Channel",
|
"Channel",
|
||||||
@@ -473,7 +473,7 @@ var n = {
|
|||||||
"HEARTBEAT_MAX_LATENCY",
|
"HEARTBEAT_MAX_LATENCY",
|
||||||
"PostMessageTransport",
|
"PostMessageTransport",
|
||||||
"WebsocketTransport",
|
"WebsocketTransport",
|
||||||
"createBrowserChannel"
|
"createBrowserChannel",
|
||||||
],
|
],
|
||||||
"storybook/internal/client-logger": ["deprecate", "logger", "once", "pretty"],
|
"storybook/internal/client-logger": ["deprecate", "logger", "once", "pretty"],
|
||||||
"storybook/internal/components": [
|
"storybook/internal/components": [
|
||||||
@@ -541,7 +541,7 @@ var n = {
|
|||||||
"interleaveSeparators",
|
"interleaveSeparators",
|
||||||
"nameSpaceClassNames",
|
"nameSpaceClassNames",
|
||||||
"resetComponents",
|
"resetComponents",
|
||||||
"withReset"
|
"withReset",
|
||||||
],
|
],
|
||||||
"storybook/internal/core-errors": [
|
"storybook/internal/core-errors": [
|
||||||
"ARGTYPES_INFO_REQUEST",
|
"ARGTYPES_INFO_REQUEST",
|
||||||
@@ -600,7 +600,7 @@ var n = {
|
|||||||
"UNHANDLED_ERRORS_WHILE_PLAYING",
|
"UNHANDLED_ERRORS_WHILE_PLAYING",
|
||||||
"UPDATE_GLOBALS",
|
"UPDATE_GLOBALS",
|
||||||
"UPDATE_QUERY_PARAMS",
|
"UPDATE_QUERY_PARAMS",
|
||||||
"UPDATE_STORY_ARGS"
|
"UPDATE_STORY_ARGS",
|
||||||
],
|
],
|
||||||
"storybook/internal/core-events": [
|
"storybook/internal/core-events": [
|
||||||
"ARGTYPES_INFO_REQUEST",
|
"ARGTYPES_INFO_REQUEST",
|
||||||
@@ -659,13 +659,13 @@ var n = {
|
|||||||
"UNHANDLED_ERRORS_WHILE_PLAYING",
|
"UNHANDLED_ERRORS_WHILE_PLAYING",
|
||||||
"UPDATE_GLOBALS",
|
"UPDATE_GLOBALS",
|
||||||
"UPDATE_QUERY_PARAMS",
|
"UPDATE_QUERY_PARAMS",
|
||||||
"UPDATE_STORY_ARGS"
|
"UPDATE_STORY_ARGS",
|
||||||
],
|
],
|
||||||
"storybook/internal/manager-errors": [
|
"storybook/internal/manager-errors": [
|
||||||
"Category",
|
"Category",
|
||||||
"ProviderDoesNotExtendBaseProviderError",
|
"ProviderDoesNotExtendBaseProviderError",
|
||||||
"StatusTypeIdMismatchError",
|
"StatusTypeIdMismatchError",
|
||||||
"UncaughtManagerError"
|
"UncaughtManagerError",
|
||||||
],
|
],
|
||||||
"storybook/internal/router": [
|
"storybook/internal/router": [
|
||||||
"BaseLocationProvider",
|
"BaseLocationProvider",
|
||||||
@@ -681,7 +681,7 @@ var n = {
|
|||||||
"parsePath",
|
"parsePath",
|
||||||
"queryFromLocation",
|
"queryFromLocation",
|
||||||
"stringifyQuery",
|
"stringifyQuery",
|
||||||
"useNavigate"
|
"useNavigate",
|
||||||
],
|
],
|
||||||
"storybook/internal/types": ["Addon_TypesEnum"],
|
"storybook/internal/types": ["Addon_TypesEnum"],
|
||||||
"storybook/internal/manager-api": [
|
"storybook/internal/manager-api": [
|
||||||
@@ -727,7 +727,7 @@ var n = {
|
|||||||
"useSharedState",
|
"useSharedState",
|
||||||
"useStoryPrepared",
|
"useStoryPrepared",
|
||||||
"useStorybookApi",
|
"useStorybookApi",
|
||||||
"useStorybookState"
|
"useStorybookState",
|
||||||
],
|
],
|
||||||
"storybook/internal/theming": [
|
"storybook/internal/theming": [
|
||||||
"CacheProvider",
|
"CacheProvider",
|
||||||
@@ -753,45 +753,48 @@ var n = {
|
|||||||
"themes",
|
"themes",
|
||||||
"typography",
|
"typography",
|
||||||
"useTheme",
|
"useTheme",
|
||||||
"withTheme"
|
"withTheme",
|
||||||
],
|
],
|
||||||
"storybook/internal/theming/create": ["create", "themes"]
|
"storybook/internal/theming/create": ["create", "themes"],
|
||||||
};
|
};
|
||||||
|
|
||||||
// src/manager/globals/globals.ts
|
// src/manager/globals/globals.ts
|
||||||
var o = {
|
var o = {
|
||||||
react: "__REACT__",
|
react: "__REACT__",
|
||||||
"react-dom": "__REACT_DOM__",
|
"react-dom": "__REACT_DOM__",
|
||||||
"react-dom/client": "__REACT_DOM_CLIENT__",
|
"react-dom/client": "__REACT_DOM_CLIENT__",
|
||||||
"@storybook/icons": "__STORYBOOK_ICONS__",
|
"@storybook/icons": "__STORYBOOK_ICONS__",
|
||||||
"storybook/manager-api": "__STORYBOOK_API__",
|
"storybook/manager-api": "__STORYBOOK_API__",
|
||||||
"storybook/test": "__STORYBOOK_TEST__",
|
"storybook/test": "__STORYBOOK_TEST__",
|
||||||
"storybook/theming": "__STORYBOOK_THEMING__",
|
"storybook/theming": "__STORYBOOK_THEMING__",
|
||||||
"storybook/theming/create": "__STORYBOOK_THEMING_CREATE__",
|
"storybook/theming/create": "__STORYBOOK_THEMING_CREATE__",
|
||||||
"storybook/internal/channels": "__STORYBOOK_CHANNELS__",
|
"storybook/internal/channels": "__STORYBOOK_CHANNELS__",
|
||||||
"storybook/internal/client-logger": "__STORYBOOK_CLIENT_LOGGER__",
|
"storybook/internal/client-logger": "__STORYBOOK_CLIENT_LOGGER__",
|
||||||
"storybook/internal/components": "__STORYBOOK_COMPONENTS__",
|
"storybook/internal/components": "__STORYBOOK_COMPONENTS__",
|
||||||
"storybook/internal/core-errors": "__STORYBOOK_CORE_EVENTS__",
|
"storybook/internal/core-errors": "__STORYBOOK_CORE_EVENTS__",
|
||||||
"storybook/internal/core-events": "__STORYBOOK_CORE_EVENTS__",
|
"storybook/internal/core-events": "__STORYBOOK_CORE_EVENTS__",
|
||||||
"storybook/internal/manager-errors": "__STORYBOOK_CORE_EVENTS_MANAGER_ERRORS__",
|
"storybook/internal/manager-errors":
|
||||||
"storybook/internal/router": "__STORYBOOK_ROUTER__",
|
"__STORYBOOK_CORE_EVENTS_MANAGER_ERRORS__",
|
||||||
"storybook/internal/types": "__STORYBOOK_TYPES__",
|
"storybook/internal/router": "__STORYBOOK_ROUTER__",
|
||||||
// @deprecated TODO: delete in 9.1
|
"storybook/internal/types": "__STORYBOOK_TYPES__",
|
||||||
"storybook/internal/manager-api": "__STORYBOOK_API__",
|
// @deprecated TODO: delete in 9.1
|
||||||
"storybook/internal/theming": "__STORYBOOK_THEMING__",
|
"storybook/internal/manager-api": "__STORYBOOK_API__",
|
||||||
"storybook/internal/theming/create": "__STORYBOOK_THEMING_CREATE__"
|
"storybook/internal/theming": "__STORYBOOK_THEMING__",
|
||||||
}, r = Object.keys(o);
|
"storybook/internal/theming/create": "__STORYBOOK_THEMING_CREATE__",
|
||||||
|
},
|
||||||
|
r = Object.keys(o);
|
||||||
|
|
||||||
// src/manager/globals/globals-module-info.ts
|
// src/manager/globals/globals-module-info.ts
|
||||||
var E = r.reduce(
|
var E = r.reduce(
|
||||||
(t, e) => (t[e] = {
|
(t, e) => (
|
||||||
type: "esm",
|
(t[e] = {
|
||||||
varName: o[e],
|
type: "esm",
|
||||||
namedExports: n[e],
|
varName: o[e],
|
||||||
defaultExport: !0
|
namedExports: n[e],
|
||||||
}, t),
|
defaultExport: !0,
|
||||||
{}
|
}),
|
||||||
|
t
|
||||||
|
),
|
||||||
|
{},
|
||||||
);
|
);
|
||||||
export {
|
export { E as globalsModuleInfoMap };
|
||||||
E as globalsModuleInfoMap
|
|
||||||
};
|
|
||||||
|
|||||||
+63981
-42689
File diff suppressed because it is too large
Load Diff
+26
-27
@@ -1,34 +1,33 @@
|
|||||||
import ESM_COMPAT_Module from "node:module";
|
import ESM_COMPAT_Module from "node:module";
|
||||||
import { fileURLToPath as ESM_COMPAT_fileURLToPath } from 'node:url';
|
import { fileURLToPath as ESM_COMPAT_fileURLToPath } from "node:url";
|
||||||
import { dirname as ESM_COMPAT_dirname } from 'node:path';
|
import { dirname as ESM_COMPAT_dirname } from "node:path";
|
||||||
const __filename = ESM_COMPAT_fileURLToPath(import.meta.url);
|
const __filename = ESM_COMPAT_fileURLToPath(import.meta.url);
|
||||||
const __dirname = ESM_COMPAT_dirname(__filename);
|
const __dirname = ESM_COMPAT_dirname(__filename);
|
||||||
const require = ESM_COMPAT_Module.createRequire(import.meta.url);
|
const require = ESM_COMPAT_Module.createRequire(import.meta.url);
|
||||||
|
|
||||||
// src/manager/globals/globals.ts
|
// src/manager/globals/globals.ts
|
||||||
var _ = {
|
var _ = {
|
||||||
react: "__REACT__",
|
react: "__REACT__",
|
||||||
"react-dom": "__REACT_DOM__",
|
"react-dom": "__REACT_DOM__",
|
||||||
"react-dom/client": "__REACT_DOM_CLIENT__",
|
"react-dom/client": "__REACT_DOM_CLIENT__",
|
||||||
"@storybook/icons": "__STORYBOOK_ICONS__",
|
"@storybook/icons": "__STORYBOOK_ICONS__",
|
||||||
"storybook/manager-api": "__STORYBOOK_API__",
|
"storybook/manager-api": "__STORYBOOK_API__",
|
||||||
"storybook/test": "__STORYBOOK_TEST__",
|
"storybook/test": "__STORYBOOK_TEST__",
|
||||||
"storybook/theming": "__STORYBOOK_THEMING__",
|
"storybook/theming": "__STORYBOOK_THEMING__",
|
||||||
"storybook/theming/create": "__STORYBOOK_THEMING_CREATE__",
|
"storybook/theming/create": "__STORYBOOK_THEMING_CREATE__",
|
||||||
"storybook/internal/channels": "__STORYBOOK_CHANNELS__",
|
"storybook/internal/channels": "__STORYBOOK_CHANNELS__",
|
||||||
"storybook/internal/client-logger": "__STORYBOOK_CLIENT_LOGGER__",
|
"storybook/internal/client-logger": "__STORYBOOK_CLIENT_LOGGER__",
|
||||||
"storybook/internal/components": "__STORYBOOK_COMPONENTS__",
|
"storybook/internal/components": "__STORYBOOK_COMPONENTS__",
|
||||||
"storybook/internal/core-errors": "__STORYBOOK_CORE_EVENTS__",
|
"storybook/internal/core-errors": "__STORYBOOK_CORE_EVENTS__",
|
||||||
"storybook/internal/core-events": "__STORYBOOK_CORE_EVENTS__",
|
"storybook/internal/core-events": "__STORYBOOK_CORE_EVENTS__",
|
||||||
"storybook/internal/manager-errors": "__STORYBOOK_CORE_EVENTS_MANAGER_ERRORS__",
|
"storybook/internal/manager-errors":
|
||||||
"storybook/internal/router": "__STORYBOOK_ROUTER__",
|
"__STORYBOOK_CORE_EVENTS_MANAGER_ERRORS__",
|
||||||
"storybook/internal/types": "__STORYBOOK_TYPES__",
|
"storybook/internal/router": "__STORYBOOK_ROUTER__",
|
||||||
// @deprecated TODO: delete in 9.1
|
"storybook/internal/types": "__STORYBOOK_TYPES__",
|
||||||
"storybook/internal/manager-api": "__STORYBOOK_API__",
|
// @deprecated TODO: delete in 9.1
|
||||||
"storybook/internal/theming": "__STORYBOOK_THEMING__",
|
"storybook/internal/manager-api": "__STORYBOOK_API__",
|
||||||
"storybook/internal/theming/create": "__STORYBOOK_THEMING_CREATE__"
|
"storybook/internal/theming": "__STORYBOOK_THEMING__",
|
||||||
}, o = Object.keys(_);
|
"storybook/internal/theming/create": "__STORYBOOK_THEMING_CREATE__",
|
||||||
export {
|
},
|
||||||
o as globalPackages,
|
o = Object.keys(_);
|
||||||
_ as globalsNameReferenceMap
|
export { o as globalPackages, _ as globalsNameReferenceMap };
|
||||||
};
|
|
||||||
|
|||||||
+17166
-10348
File diff suppressed because it is too large
Load Diff
+1656
-18
File diff suppressed because one or more lines are too long
@@ -87,7 +87,7 @@ class PerformanceMonitorScript {
|
|||||||
} else {
|
} else {
|
||||||
console.error("❌ Lighthouse CI tests failed");
|
console.error("❌ Lighthouse CI tests failed");
|
||||||
reject(
|
reject(
|
||||||
new Error(`Lighthouse CI failed with code ${code}: ${errorOutput}`)
|
new Error(`Lighthouse CI failed with code ${code}: ${errorOutput}`),
|
||||||
);
|
);
|
||||||
}
|
}
|
||||||
});
|
});
|
||||||
@@ -112,7 +112,7 @@ class PerformanceMonitorScript {
|
|||||||
{
|
{
|
||||||
stdio: "pipe",
|
stdio: "pipe",
|
||||||
shell: true,
|
shell: true,
|
||||||
}
|
},
|
||||||
);
|
);
|
||||||
|
|
||||||
let output = "";
|
let output = "";
|
||||||
@@ -135,8 +135,8 @@ class PerformanceMonitorScript {
|
|||||||
console.error("❌ Playwright performance tests failed");
|
console.error("❌ Playwright performance tests failed");
|
||||||
reject(
|
reject(
|
||||||
new Error(
|
new Error(
|
||||||
`Playwright tests failed with code ${code}: ${errorOutput}`
|
`Playwright tests failed with code ${code}: ${errorOutput}`,
|
||||||
)
|
),
|
||||||
);
|
);
|
||||||
}
|
}
|
||||||
});
|
});
|
||||||
@@ -162,7 +162,7 @@ class PerformanceMonitorScript {
|
|||||||
|
|
||||||
if (score < 90) {
|
if (score < 90) {
|
||||||
this.warnings.push(
|
this.warnings.push(
|
||||||
`Performance score below threshold: ${score}/100`
|
`Performance score below threshold: ${score}/100`,
|
||||||
);
|
);
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
@@ -176,7 +176,7 @@ class PerformanceMonitorScript {
|
|||||||
|
|
||||||
if (time > PERFORMANCE_BUDGETS.first_contentful_paint) {
|
if (time > PERFORMANCE_BUDGETS.first_contentful_paint) {
|
||||||
this.warnings.push(
|
this.warnings.push(
|
||||||
`First Contentful Paint exceeded budget: ${time}ms`
|
`First Contentful Paint exceeded budget: ${time}ms`,
|
||||||
);
|
);
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
@@ -190,7 +190,7 @@ class PerformanceMonitorScript {
|
|||||||
|
|
||||||
if (time > PERFORMANCE_BUDGETS.largest_contentful_paint) {
|
if (time > PERFORMANCE_BUDGETS.largest_contentful_paint) {
|
||||||
this.warnings.push(
|
this.warnings.push(
|
||||||
`Largest Contentful Paint exceeded budget: ${time}ms`
|
`Largest Contentful Paint exceeded budget: ${time}ms`,
|
||||||
);
|
);
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
@@ -204,7 +204,7 @@ class PerformanceMonitorScript {
|
|||||||
|
|
||||||
if (time > 300) {
|
if (time > 300) {
|
||||||
this.warnings.push(
|
this.warnings.push(
|
||||||
`Total Blocking Time exceeded budget: ${time}ms`
|
`Total Blocking Time exceeded budget: ${time}ms`,
|
||||||
);
|
);
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
@@ -218,7 +218,7 @@ class PerformanceMonitorScript {
|
|||||||
|
|
||||||
if (shift > 0.1) {
|
if (shift > 0.1) {
|
||||||
this.warnings.push(
|
this.warnings.push(
|
||||||
`Cumulative Layout Shift exceeded budget: ${shift}`
|
`Cumulative Layout Shift exceeded budget: ${shift}`,
|
||||||
);
|
);
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
@@ -283,7 +283,7 @@ class PerformanceMonitorScript {
|
|||||||
console.log("📊 Summary:");
|
console.log("📊 Summary:");
|
||||||
console.log(`- Total metrics recorded: ${this.metrics.size}`);
|
console.log(`- Total metrics recorded: ${this.metrics.size}`);
|
||||||
console.log(
|
console.log(
|
||||||
`- Performance regressions detected: ${this.regressions.length}`
|
`- Performance regressions detected: ${this.regressions.length}`,
|
||||||
);
|
);
|
||||||
console.log(`- Warnings: ${this.warnings.length}\n`);
|
console.log(`- Warnings: ${this.warnings.length}\n`);
|
||||||
|
|
||||||
@@ -292,7 +292,7 @@ class PerformanceMonitorScript {
|
|||||||
console.log("🚨 Performance Regressions:");
|
console.log("🚨 Performance Regressions:");
|
||||||
for (const regression of this.regressions) {
|
for (const regression of this.regressions) {
|
||||||
console.log(
|
console.log(
|
||||||
` - ${regression.metric}: ${regression.current} (baseline: ${regression.baseline}, regression: ${regression.regression})`
|
` - ${regression.metric}: ${regression.current} (baseline: ${regression.baseline}, regression: ${regression.regression})`,
|
||||||
);
|
);
|
||||||
}
|
}
|
||||||
console.log("");
|
console.log("");
|
||||||
|
|||||||
+27
-23
@@ -5,58 +5,62 @@
|
|||||||
* This script validates the configuration without running actual tests
|
* This script validates the configuration without running actual tests
|
||||||
*/
|
*/
|
||||||
|
|
||||||
const fs = require('fs');
|
const fs = require("fs");
|
||||||
const path = require('path');
|
const path = require("path");
|
||||||
|
|
||||||
console.log('🔍 Testing LHCI Configuration...\n');
|
console.log("🔍 Testing LHCI Configuration...\n");
|
||||||
|
|
||||||
// Check if .lighthouserc.json exists
|
// Check if .lighthouserc.json exists
|
||||||
const configPath = path.join(process.cwd(), '.lighthouserc.json');
|
const configPath = path.join(process.cwd(), ".lighthouserc.json");
|
||||||
if (fs.existsSync(configPath)) {
|
if (fs.existsSync(configPath)) {
|
||||||
console.log('✅ .lighthouserc.json found');
|
console.log("✅ .lighthouserc.json found");
|
||||||
|
|
||||||
try {
|
try {
|
||||||
const config = JSON.parse(fs.readFileSync(configPath, 'utf8'));
|
const config = JSON.parse(fs.readFileSync(configPath, "utf8"));
|
||||||
console.log('✅ Configuration is valid JSON');
|
console.log("✅ Configuration is valid JSON");
|
||||||
|
|
||||||
if (config.ci && config.ci.collect && config.ci.assert) {
|
if (config.ci && config.ci.collect && config.ci.assert) {
|
||||||
console.log('✅ Configuration has required sections (collect, assert)');
|
console.log("✅ Configuration has required sections (collect, assert)");
|
||||||
console.log(`✅ Testing ${config.ci.collect.numberOfRuns} runs`);
|
console.log(`✅ Testing ${config.ci.collect.numberOfRuns} runs`);
|
||||||
console.log(`✅ URL: ${config.ci.collect.url[0]}`);
|
console.log(`✅ URL: ${config.ci.collect.url[0]}`);
|
||||||
} else {
|
} else {
|
||||||
console.log('❌ Configuration missing required sections');
|
console.log("❌ Configuration missing required sections");
|
||||||
}
|
}
|
||||||
} catch (error) {
|
} catch (error) {
|
||||||
console.log('❌ Configuration is not valid JSON:', error.message);
|
console.log("❌ Configuration is not valid JSON:", error.message);
|
||||||
}
|
}
|
||||||
} else {
|
} else {
|
||||||
console.log('❌ .lighthouserc.json not found');
|
console.log("❌ .lighthouserc.json not found");
|
||||||
}
|
}
|
||||||
|
|
||||||
// Check if @lhci/cli is installed
|
// Check if @lhci/cli is installed
|
||||||
try {
|
try {
|
||||||
const { execSync } = require('child_process');
|
const { execSync } = require("child_process");
|
||||||
execSync('npx lhci --version', { stdio: 'pipe' });
|
execSync("npx lhci --version", { stdio: "pipe" });
|
||||||
console.log('✅ @lhci/cli package is installed and working');
|
console.log("✅ @lhci/cli package is installed and working");
|
||||||
} catch (error) {
|
} catch (error) {
|
||||||
console.log('❌ @lhci/cli package is not working:', error.message);
|
console.log("❌ @lhci/cli package is not working:", error.message);
|
||||||
}
|
}
|
||||||
|
|
||||||
// Check package.json scripts
|
// Check package.json scripts
|
||||||
const packagePath = path.join(process.cwd(), 'package.json');
|
const packagePath = path.join(process.cwd(), "package.json");
|
||||||
if (fs.existsSync(packagePath)) {
|
if (fs.existsSync(packagePath)) {
|
||||||
try {
|
try {
|
||||||
const packageJson = JSON.parse(fs.readFileSync(packagePath, 'utf8'));
|
const packageJson = JSON.parse(fs.readFileSync(packagePath, "utf8"));
|
||||||
if (packageJson.scripts && packageJson.scripts.lhci) {
|
if (packageJson.scripts && packageJson.scripts.lhci) {
|
||||||
console.log('✅ LHCI script found in package.json');
|
console.log("✅ LHCI script found in package.json");
|
||||||
} else {
|
} else {
|
||||||
console.log('❌ LHCI script not found in package.json');
|
console.log("❌ LHCI script not found in package.json");
|
||||||
}
|
}
|
||||||
} catch (error) {
|
} catch (error) {
|
||||||
console.log('❌ Error reading package.json:', error.message);
|
console.log("❌ Error reading package.json:", error.message);
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
console.log('\n🎉 LHCI Configuration Test Complete!');
|
console.log("\n🎉 LHCI Configuration Test Complete!");
|
||||||
console.log('Note: Actual LHCI tests may fail locally due to Node.js architecture issues on macOS.');
|
console.log(
|
||||||
console.log('The CI environment should work correctly with the provided configuration.');
|
"Note: Actual LHCI tests may fail locally due to Node.js architecture issues on macOS.",
|
||||||
|
);
|
||||||
|
console.log(
|
||||||
|
"The CI environment should work correctly with the provided configuration.",
|
||||||
|
);
|
||||||
|
|||||||
@@ -60,7 +60,7 @@ test.describe("Accessibility Testing", () => {
|
|||||||
focusedElements.push(
|
focusedElements.push(
|
||||||
`${elementInfo.tagName}${
|
`${elementInfo.tagName}${
|
||||||
elementInfo.role ? `[role="${elementInfo.role}"]` : ""
|
elementInfo.role ? `[role="${elementInfo.role}"]` : ""
|
||||||
}: ${elementInfo.accessibleName}`
|
}: ${elementInfo.accessibleName}`,
|
||||||
);
|
);
|
||||||
|
|
||||||
await page.keyboard.press("Tab");
|
await page.keyboard.press("Tab");
|
||||||
@@ -190,7 +190,7 @@ test.describe("Accessibility Testing", () => {
|
|||||||
test("focus indicators - visible focus", async ({ page }) => {
|
test("focus indicators - visible focus", async ({ page }) => {
|
||||||
// Test that focus indicators are visible
|
// Test that focus indicators are visible
|
||||||
const focusableElements = page.locator(
|
const focusableElements = page.locator(
|
||||||
"button, a, input, textarea, select, [tabindex]"
|
"button, a, input, textarea, select, [tabindex]",
|
||||||
);
|
);
|
||||||
const elementCount = await focusableElements.count();
|
const elementCount = await focusableElements.count();
|
||||||
|
|
||||||
|
|||||||
+1
-1
@@ -8,7 +8,7 @@ export async function runA11y(page, options = {}) {
|
|||||||
if (results.violations.length > 0) {
|
if (results.violations.length > 0) {
|
||||||
console.log("Accessibility violations found:", results.violations);
|
console.log("Accessibility violations found:", results.violations);
|
||||||
throw new Error(
|
throw new Error(
|
||||||
`Found ${results.violations.length} accessibility violations`
|
`Found ${results.violations.length} accessibility violations`,
|
||||||
);
|
);
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|||||||
@@ -29,7 +29,7 @@ test.describe("Edge Cases and Error Scenarios", () => {
|
|||||||
// Page should function normally
|
// Page should function normally
|
||||||
await expect(page.locator("text=Collaborate")).toBeVisible();
|
await expect(page.locator("text=Collaborate")).toBeVisible();
|
||||||
const learnButtons = page.locator(
|
const learnButtons = page.locator(
|
||||||
'button:has-text("Learn how CommunityRule works")'
|
'button:has-text("Learn how CommunityRule works")',
|
||||||
);
|
);
|
||||||
const buttonCount = await learnButtons.count();
|
const buttonCount = await learnButtons.count();
|
||||||
let visibleButton = null;
|
let visibleButton = null;
|
||||||
@@ -44,7 +44,7 @@ test.describe("Edge Cases and Error Scenarios", () => {
|
|||||||
|
|
||||||
if (!visibleButton) {
|
if (!visibleButton) {
|
||||||
throw new Error(
|
throw new Error(
|
||||||
'No visible "Learn how CommunityRule works" button found'
|
'No visible "Learn how CommunityRule works" button found',
|
||||||
);
|
);
|
||||||
}
|
}
|
||||||
|
|
||||||
@@ -103,7 +103,7 @@ test.describe("Edge Cases and Error Scenarios", () => {
|
|||||||
test("handles browser back/forward navigation", async ({ page }) => {
|
test("handles browser back/forward navigation", async ({ page }) => {
|
||||||
// Navigate to a section
|
// Navigate to a section
|
||||||
const learnButtons = page.locator(
|
const learnButtons = page.locator(
|
||||||
'button:has-text("Learn how CommunityRule works")'
|
'button:has-text("Learn how CommunityRule works")',
|
||||||
);
|
);
|
||||||
const buttonCount = await learnButtons.count();
|
const buttonCount = await learnButtons.count();
|
||||||
let visibleButton = null;
|
let visibleButton = null;
|
||||||
@@ -118,7 +118,7 @@ test.describe("Edge Cases and Error Scenarios", () => {
|
|||||||
|
|
||||||
if (!visibleButton) {
|
if (!visibleButton) {
|
||||||
throw new Error(
|
throw new Error(
|
||||||
'No visible "Learn how CommunityRule works" button found'
|
'No visible "Learn how CommunityRule works" button found',
|
||||||
);
|
);
|
||||||
}
|
}
|
||||||
|
|
||||||
@@ -136,7 +136,7 @@ test.describe("Edge Cases and Error Scenarios", () => {
|
|||||||
test("handles page refresh during interactions", async ({ page }) => {
|
test("handles page refresh during interactions", async ({ page }) => {
|
||||||
// Start an interaction
|
// Start an interaction
|
||||||
const learnButtons = page.locator(
|
const learnButtons = page.locator(
|
||||||
'button:has-text("Learn how CommunityRule works")'
|
'button:has-text("Learn how CommunityRule works")',
|
||||||
);
|
);
|
||||||
const buttonCount = await learnButtons.count();
|
const buttonCount = await learnButtons.count();
|
||||||
let visibleButton = null;
|
let visibleButton = null;
|
||||||
@@ -151,7 +151,7 @@ test.describe("Edge Cases and Error Scenarios", () => {
|
|||||||
|
|
||||||
if (!visibleButton) {
|
if (!visibleButton) {
|
||||||
throw new Error(
|
throw new Error(
|
||||||
'No visible "Learn how CommunityRule works" button found'
|
'No visible "Learn how CommunityRule works" button found',
|
||||||
);
|
);
|
||||||
}
|
}
|
||||||
|
|
||||||
@@ -175,7 +175,7 @@ test.describe("Edge Cases and Error Scenarios", () => {
|
|||||||
|
|
||||||
// Interact with each tab - find the first visible button
|
// Interact with each tab - find the first visible button
|
||||||
const learnButtons = page.locator(
|
const learnButtons = page.locator(
|
||||||
'button:has-text("Learn how CommunityRule works")'
|
'button:has-text("Learn how CommunityRule works")',
|
||||||
);
|
);
|
||||||
const buttonCount = await learnButtons.count();
|
const buttonCount = await learnButtons.count();
|
||||||
let visibleButton = null;
|
let visibleButton = null;
|
||||||
@@ -190,7 +190,7 @@ test.describe("Edge Cases and Error Scenarios", () => {
|
|||||||
|
|
||||||
if (!visibleButton) {
|
if (!visibleButton) {
|
||||||
throw new Error(
|
throw new Error(
|
||||||
'No visible "Learn how CommunityRule works" button found'
|
'No visible "Learn how CommunityRule works" button found',
|
||||||
);
|
);
|
||||||
}
|
}
|
||||||
|
|
||||||
@@ -219,7 +219,7 @@ test.describe("Edge Cases and Error Scenarios", () => {
|
|||||||
|
|
||||||
// All tabs should work independently
|
// All tabs should work independently
|
||||||
await expect(
|
await expect(
|
||||||
page.locator('h2:has-text("How CommunityRule works")')
|
page.locator('h2:has-text("How CommunityRule works")'),
|
||||||
).toBeVisible();
|
).toBeVisible();
|
||||||
await expect(page1.locator("text=Consensus clusters")).toBeVisible();
|
await expect(page1.locator("text=Consensus clusters")).toBeVisible();
|
||||||
await expect(page2.locator("text=Still have questions?")).toBeVisible();
|
await expect(page2.locator("text=Still have questions?")).toBeVisible();
|
||||||
@@ -249,7 +249,7 @@ test.describe("Edge Cases and Error Scenarios", () => {
|
|||||||
// Page should continue to function
|
// Page should continue to function
|
||||||
await expect(page.locator("text=Collaborate")).toBeVisible();
|
await expect(page.locator("text=Collaborate")).toBeVisible();
|
||||||
const learnButtons = page.locator(
|
const learnButtons = page.locator(
|
||||||
'button:has-text("Learn how CommunityRule works")'
|
'button:has-text("Learn how CommunityRule works")',
|
||||||
);
|
);
|
||||||
const buttonCount = await learnButtons.count();
|
const buttonCount = await learnButtons.count();
|
||||||
let visibleButton = null;
|
let visibleButton = null;
|
||||||
@@ -264,7 +264,7 @@ test.describe("Edge Cases and Error Scenarios", () => {
|
|||||||
|
|
||||||
if (!visibleButton) {
|
if (!visibleButton) {
|
||||||
throw new Error(
|
throw new Error(
|
||||||
'No visible "Learn how CommunityRule works" button found'
|
'No visible "Learn how CommunityRule works" button found',
|
||||||
);
|
);
|
||||||
}
|
}
|
||||||
|
|
||||||
@@ -283,7 +283,7 @@ test.describe("Edge Cases and Error Scenarios", () => {
|
|||||||
// Page should still function without images
|
// Page should still function without images
|
||||||
await expect(page.locator("text=Collaborate")).toBeVisible();
|
await expect(page.locator("text=Collaborate")).toBeVisible();
|
||||||
const learnButtons = page.locator(
|
const learnButtons = page.locator(
|
||||||
'button:has-text("Learn how CommunityRule works")'
|
'button:has-text("Learn how CommunityRule works")',
|
||||||
);
|
);
|
||||||
const buttonCount = await learnButtons.count();
|
const buttonCount = await learnButtons.count();
|
||||||
let visibleButton = null;
|
let visibleButton = null;
|
||||||
@@ -298,7 +298,7 @@ test.describe("Edge Cases and Error Scenarios", () => {
|
|||||||
|
|
||||||
if (!visibleButton) {
|
if (!visibleButton) {
|
||||||
throw new Error(
|
throw new Error(
|
||||||
'No visible "Learn how CommunityRule works" button found'
|
'No visible "Learn how CommunityRule works" button found',
|
||||||
);
|
);
|
||||||
}
|
}
|
||||||
|
|
||||||
@@ -317,7 +317,7 @@ test.describe("Edge Cases and Error Scenarios", () => {
|
|||||||
// Page should still function without styles
|
// Page should still function without styles
|
||||||
await expect(page.locator("text=Collaborate")).toBeVisible();
|
await expect(page.locator("text=Collaborate")).toBeVisible();
|
||||||
const learnButtons = page.locator(
|
const learnButtons = page.locator(
|
||||||
'button:has-text("Learn how CommunityRule works")'
|
'button:has-text("Learn how CommunityRule works")',
|
||||||
);
|
);
|
||||||
const buttonCount = await learnButtons.count();
|
const buttonCount = await learnButtons.count();
|
||||||
let visibleButton = null;
|
let visibleButton = null;
|
||||||
@@ -332,7 +332,7 @@ test.describe("Edge Cases and Error Scenarios", () => {
|
|||||||
|
|
||||||
if (!visibleButton) {
|
if (!visibleButton) {
|
||||||
throw new Error(
|
throw new Error(
|
||||||
'No visible "Learn how CommunityRule works" button found'
|
'No visible "Learn how CommunityRule works" button found',
|
||||||
);
|
);
|
||||||
}
|
}
|
||||||
|
|
||||||
@@ -351,7 +351,7 @@ test.describe("Edge Cases and Error Scenarios", () => {
|
|||||||
// Page should still function with fallback fonts
|
// Page should still function with fallback fonts
|
||||||
await expect(page.locator("text=Collaborate")).toBeVisible();
|
await expect(page.locator("text=Collaborate")).toBeVisible();
|
||||||
const learnButtons = page.locator(
|
const learnButtons = page.locator(
|
||||||
'button:has-text("Learn how CommunityRule works")'
|
'button:has-text("Learn how CommunityRule works")',
|
||||||
);
|
);
|
||||||
const buttonCount = await learnButtons.count();
|
const buttonCount = await learnButtons.count();
|
||||||
let visibleButton = null;
|
let visibleButton = null;
|
||||||
@@ -366,7 +366,7 @@ test.describe("Edge Cases and Error Scenarios", () => {
|
|||||||
|
|
||||||
if (!visibleButton) {
|
if (!visibleButton) {
|
||||||
throw new Error(
|
throw new Error(
|
||||||
'No visible "Learn how CommunityRule works" button found'
|
'No visible "Learn how CommunityRule works" button found',
|
||||||
);
|
);
|
||||||
}
|
}
|
||||||
|
|
||||||
@@ -386,7 +386,7 @@ test.describe("Edge Cases and Error Scenarios", () => {
|
|||||||
// Clean up
|
// Clean up
|
||||||
setTimeout(() => {
|
setTimeout(() => {
|
||||||
const testElements = document.querySelectorAll(
|
const testElements = document.querySelectorAll(
|
||||||
'div[textContent*="Test element"]'
|
'div[textContent*="Test element"]',
|
||||||
);
|
);
|
||||||
testElements.forEach((el) => el.remove());
|
testElements.forEach((el) => el.remove());
|
||||||
}, 100);
|
}, 100);
|
||||||
@@ -395,7 +395,7 @@ test.describe("Edge Cases and Error Scenarios", () => {
|
|||||||
// Page should remain functional
|
// Page should remain functional
|
||||||
await expect(page.locator("text=Collaborate")).toBeVisible();
|
await expect(page.locator("text=Collaborate")).toBeVisible();
|
||||||
const learnButtons = page.locator(
|
const learnButtons = page.locator(
|
||||||
'button:has-text("Learn how CommunityRule works")'
|
'button:has-text("Learn how CommunityRule works")',
|
||||||
);
|
);
|
||||||
const buttonCount = await learnButtons.count();
|
const buttonCount = await learnButtons.count();
|
||||||
let visibleButton = null;
|
let visibleButton = null;
|
||||||
@@ -410,7 +410,7 @@ test.describe("Edge Cases and Error Scenarios", () => {
|
|||||||
|
|
||||||
if (!visibleButton) {
|
if (!visibleButton) {
|
||||||
throw new Error(
|
throw new Error(
|
||||||
'No visible "Learn how CommunityRule works" button found'
|
'No visible "Learn how CommunityRule works" button found',
|
||||||
);
|
);
|
||||||
}
|
}
|
||||||
|
|
||||||
@@ -481,7 +481,7 @@ test.describe("Edge Cases and Error Scenarios", () => {
|
|||||||
|
|
||||||
// Find visible button for right-click
|
// Find visible button for right-click
|
||||||
const learnButtons = page.locator(
|
const learnButtons = page.locator(
|
||||||
'button:has-text("Learn how CommunityRule works")'
|
'button:has-text("Learn how CommunityRule works")',
|
||||||
);
|
);
|
||||||
const buttonCount = await learnButtons.count();
|
const buttonCount = await learnButtons.count();
|
||||||
let visibleButton = null;
|
let visibleButton = null;
|
||||||
@@ -578,7 +578,7 @@ test.describe("Edge Cases and Error Scenarios", () => {
|
|||||||
// Content should remain readable
|
// Content should remain readable
|
||||||
await expect(page.locator("text=Collaborate")).toBeVisible();
|
await expect(page.locator("text=Collaborate")).toBeVisible();
|
||||||
const learnButtons = page.locator(
|
const learnButtons = page.locator(
|
||||||
'button:has-text("Learn how CommunityRule works")'
|
'button:has-text("Learn how CommunityRule works")',
|
||||||
);
|
);
|
||||||
const buttonCount = await learnButtons.count();
|
const buttonCount = await learnButtons.count();
|
||||||
let visibleButton = null;
|
let visibleButton = null;
|
||||||
@@ -593,7 +593,7 @@ test.describe("Edge Cases and Error Scenarios", () => {
|
|||||||
|
|
||||||
if (!visibleButton) {
|
if (!visibleButton) {
|
||||||
throw new Error(
|
throw new Error(
|
||||||
'No visible "Learn how CommunityRule works" button found'
|
'No visible "Learn how CommunityRule works" button found',
|
||||||
);
|
);
|
||||||
}
|
}
|
||||||
|
|
||||||
@@ -610,14 +610,14 @@ test.describe("Edge Cases and Error Scenarios", () => {
|
|||||||
await page.evaluate(() => {
|
await page.evaluate(() => {
|
||||||
document.documentElement.style.setProperty(
|
document.documentElement.style.setProperty(
|
||||||
"--prefers-reduced-motion",
|
"--prefers-reduced-motion",
|
||||||
"reduce"
|
"reduce",
|
||||||
);
|
);
|
||||||
});
|
});
|
||||||
|
|
||||||
// Page should respect reduced motion
|
// Page should respect reduced motion
|
||||||
await expect(page.locator("text=Collaborate")).toBeVisible();
|
await expect(page.locator("text=Collaborate")).toBeVisible();
|
||||||
const learnButtons = page.locator(
|
const learnButtons = page.locator(
|
||||||
'button:has-text("Learn how CommunityRule works")'
|
'button:has-text("Learn how CommunityRule works")',
|
||||||
);
|
);
|
||||||
const buttonCount = await learnButtons.count();
|
const buttonCount = await learnButtons.count();
|
||||||
let visibleButton = null;
|
let visibleButton = null;
|
||||||
@@ -632,7 +632,7 @@ test.describe("Edge Cases and Error Scenarios", () => {
|
|||||||
|
|
||||||
if (!visibleButton) {
|
if (!visibleButton) {
|
||||||
throw new Error(
|
throw new Error(
|
||||||
'No visible "Learn how CommunityRule works" button found'
|
'No visible "Learn how CommunityRule works" button found',
|
||||||
);
|
);
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|||||||
@@ -33,7 +33,7 @@ for (const bp of breakpoints) {
|
|||||||
}) => {
|
}) => {
|
||||||
// All breakpoints should have navigation items
|
// All breakpoints should have navigation items
|
||||||
await expect(
|
await expect(
|
||||||
page.getByRole("link", { name: /use cases/i })
|
page.getByRole("link", { name: /use cases/i }),
|
||||||
).toBeVisible();
|
).toBeVisible();
|
||||||
await expect(page.getByRole("link", { name: /learn/i })).toBeVisible();
|
await expect(page.getByRole("link", { name: /learn/i })).toBeVisible();
|
||||||
await expect(page.getByRole("link", { name: /about/i })).toBeVisible();
|
await expect(page.getByRole("link", { name: /about/i })).toBeVisible();
|
||||||
@@ -42,20 +42,20 @@ for (const bp of breakpoints) {
|
|||||||
test(`footer legal links visibility at ${bp.name}`, async ({ page }) => {
|
test(`footer legal links visibility at ${bp.name}`, async ({ page }) => {
|
||||||
// All breakpoints should have legal links
|
// All breakpoints should have legal links
|
||||||
await expect(
|
await expect(
|
||||||
page.getByRole("link", { name: /privacy policy/i })
|
page.getByRole("link", { name: /privacy policy/i }),
|
||||||
).toBeVisible();
|
).toBeVisible();
|
||||||
await expect(
|
await expect(
|
||||||
page.getByRole("link", { name: /terms of service/i })
|
page.getByRole("link", { name: /terms of service/i }),
|
||||||
).toBeVisible();
|
).toBeVisible();
|
||||||
});
|
});
|
||||||
|
|
||||||
test(`footer social links visibility at ${bp.name}`, async ({ page }) => {
|
test(`footer social links visibility at ${bp.name}`, async ({ page }) => {
|
||||||
// All breakpoints should have social links
|
// All breakpoints should have social links
|
||||||
await expect(
|
await expect(
|
||||||
page.getByRole("link", { name: /follow us on bluesky/i })
|
page.getByRole("link", { name: /follow us on bluesky/i }),
|
||||||
).toBeVisible();
|
).toBeVisible();
|
||||||
await expect(
|
await expect(
|
||||||
page.getByRole("link", { name: /follow us on gitlab/i })
|
page.getByRole("link", { name: /follow us on gitlab/i }),
|
||||||
).toBeVisible();
|
).toBeVisible();
|
||||||
});
|
});
|
||||||
|
|
||||||
@@ -110,7 +110,7 @@ test.describe("Footer visual regression", () => {
|
|||||||
|
|
||||||
// Take a screenshot for visual regression testing
|
// Take a screenshot for visual regression testing
|
||||||
await expect(page.locator("footer").first()).toHaveScreenshot(
|
await expect(page.locator("footer").first()).toHaveScreenshot(
|
||||||
`footer-${bp.name}.png`
|
`footer-${bp.name}.png`,
|
||||||
);
|
);
|
||||||
}
|
}
|
||||||
});
|
});
|
||||||
@@ -136,7 +136,7 @@ test.describe("Footer visual regression", () => {
|
|||||||
await useCasesLink.hover();
|
await useCasesLink.hover();
|
||||||
await page.waitForTimeout(200);
|
await page.waitForTimeout(200);
|
||||||
await expect(page.locator("footer").first()).toHaveScreenshot(
|
await expect(page.locator("footer").first()).toHaveScreenshot(
|
||||||
`footer-${bp.name}-hover-nav.png`
|
`footer-${bp.name}-hover-nav.png`,
|
||||||
);
|
);
|
||||||
|
|
||||||
// Test hover on social links
|
// Test hover on social links
|
||||||
@@ -146,7 +146,7 @@ test.describe("Footer visual regression", () => {
|
|||||||
await blueskyLink.hover();
|
await blueskyLink.hover();
|
||||||
await page.waitForTimeout(200);
|
await page.waitForTimeout(200);
|
||||||
await expect(page.locator("footer").first()).toHaveScreenshot(
|
await expect(page.locator("footer").first()).toHaveScreenshot(
|
||||||
`footer-${bp.name}-hover-social.png`
|
`footer-${bp.name}-hover-social.png`,
|
||||||
);
|
);
|
||||||
}
|
}
|
||||||
});
|
});
|
||||||
@@ -172,7 +172,7 @@ test.describe("Footer visual regression", () => {
|
|||||||
await useCasesLink.focus();
|
await useCasesLink.focus();
|
||||||
await page.waitForTimeout(200);
|
await page.waitForTimeout(200);
|
||||||
await expect(page.locator("footer").first()).toHaveScreenshot(
|
await expect(page.locator("footer").first()).toHaveScreenshot(
|
||||||
`footer-${bp.name}-focus-nav.png`
|
`footer-${bp.name}-focus-nav.png`,
|
||||||
);
|
);
|
||||||
|
|
||||||
// Test focus on social links
|
// Test focus on social links
|
||||||
@@ -182,7 +182,7 @@ test.describe("Footer visual regression", () => {
|
|||||||
await blueskyLink.focus();
|
await blueskyLink.focus();
|
||||||
await page.waitForTimeout(200);
|
await page.waitForTimeout(200);
|
||||||
await expect(page.locator("footer").first()).toHaveScreenshot(
|
await expect(page.locator("footer").first()).toHaveScreenshot(
|
||||||
`footer-${bp.name}-focus-social.png`
|
`footer-${bp.name}-focus-social.png`,
|
||||||
);
|
);
|
||||||
}
|
}
|
||||||
});
|
});
|
||||||
|
|||||||
@@ -33,7 +33,7 @@ for (const bp of breakpoints) {
|
|||||||
test(`navigation items visibility at ${bp.name}`, async ({ page }) => {
|
test(`navigation items visibility at ${bp.name}`, async ({ page }) => {
|
||||||
// All breakpoints should have navigation items
|
// All breakpoints should have navigation items
|
||||||
await expect(
|
await expect(
|
||||||
page.getByRole("link", { name: /use cases/i })
|
page.getByRole("link", { name: /use cases/i }),
|
||||||
).toBeVisible();
|
).toBeVisible();
|
||||||
await expect(page.getByRole("link", { name: /learn/i })).toBeVisible();
|
await expect(page.getByRole("link", { name: /learn/i })).toBeVisible();
|
||||||
await expect(page.getByRole("link", { name: /about/i })).toBeVisible();
|
await expect(page.getByRole("link", { name: /about/i })).toBeVisible();
|
||||||
@@ -44,14 +44,14 @@ for (const bp of breakpoints) {
|
|||||||
}) => {
|
}) => {
|
||||||
// All breakpoints should have login button
|
// All breakpoints should have login button
|
||||||
await expect(
|
await expect(
|
||||||
page.getByRole("link", { name: /log in to your account/i })
|
page.getByRole("link", { name: /log in to your account/i }),
|
||||||
).toBeVisible();
|
).toBeVisible();
|
||||||
|
|
||||||
// All breakpoints should have create rule button
|
// All breakpoints should have create rule button
|
||||||
await expect(
|
await expect(
|
||||||
page.getByRole("button", {
|
page.getByRole("button", {
|
||||||
name: /create a new rule with avatar decoration/i,
|
name: /create a new rule with avatar decoration/i,
|
||||||
})
|
}),
|
||||||
).toBeVisible();
|
).toBeVisible();
|
||||||
});
|
});
|
||||||
|
|
||||||
@@ -149,7 +149,7 @@ test.describe("Header visual regression", () => {
|
|||||||
|
|
||||||
// Take a screenshot for visual regression testing
|
// Take a screenshot for visual regression testing
|
||||||
await expect(page.locator("header").first()).toHaveScreenshot(
|
await expect(page.locator("header").first()).toHaveScreenshot(
|
||||||
`header-${bp.name}.png`
|
`header-${bp.name}.png`,
|
||||||
);
|
);
|
||||||
}
|
}
|
||||||
});
|
});
|
||||||
@@ -171,7 +171,7 @@ test.describe("Header visual regression", () => {
|
|||||||
await useCasesLink.hover();
|
await useCasesLink.hover();
|
||||||
await page.waitForTimeout(200);
|
await page.waitForTimeout(200);
|
||||||
await expect(page.locator("header").first()).toHaveScreenshot(
|
await expect(page.locator("header").first()).toHaveScreenshot(
|
||||||
`header-${bp.name}-hover-nav.png`
|
`header-${bp.name}-hover-nav.png`,
|
||||||
);
|
);
|
||||||
|
|
||||||
// Test hover on create rule button
|
// Test hover on create rule button
|
||||||
@@ -181,7 +181,7 @@ test.describe("Header visual regression", () => {
|
|||||||
await createRuleButton.hover();
|
await createRuleButton.hover();
|
||||||
await page.waitForTimeout(200);
|
await page.waitForTimeout(200);
|
||||||
await expect(page.locator("header").first()).toHaveScreenshot(
|
await expect(page.locator("header").first()).toHaveScreenshot(
|
||||||
`header-${bp.name}-hover-button.png`
|
`header-${bp.name}-hover-button.png`,
|
||||||
);
|
);
|
||||||
}
|
}
|
||||||
});
|
});
|
||||||
@@ -203,7 +203,7 @@ test.describe("Header visual regression", () => {
|
|||||||
await useCasesLink.focus();
|
await useCasesLink.focus();
|
||||||
await page.waitForTimeout(200);
|
await page.waitForTimeout(200);
|
||||||
await expect(page.locator("header").first()).toHaveScreenshot(
|
await expect(page.locator("header").first()).toHaveScreenshot(
|
||||||
`header-${bp.name}-focus-nav.png`
|
`header-${bp.name}-focus-nav.png`,
|
||||||
);
|
);
|
||||||
|
|
||||||
// Test focus on create rule button
|
// Test focus on create rule button
|
||||||
@@ -213,7 +213,7 @@ test.describe("Header visual regression", () => {
|
|||||||
await createRuleButton.focus();
|
await createRuleButton.focus();
|
||||||
await page.waitForTimeout(200);
|
await page.waitForTimeout(200);
|
||||||
await expect(page.locator("header").first()).toHaveScreenshot(
|
await expect(page.locator("header").first()).toHaveScreenshot(
|
||||||
`header-${bp.name}-focus-button.png`
|
`header-${bp.name}-focus-button.png`,
|
||||||
);
|
);
|
||||||
}
|
}
|
||||||
});
|
});
|
||||||
|
|||||||
@@ -2,7 +2,7 @@ import { Locator, Page } from "@playwright/test";
|
|||||||
|
|
||||||
export async function findVisibleButton(
|
export async function findVisibleButton(
|
||||||
page: Page,
|
page: Page,
|
||||||
text: string
|
text: string,
|
||||||
): Promise<Locator> {
|
): Promise<Locator> {
|
||||||
const buttons = page.locator(`button:has-text("${text}")`);
|
const buttons = page.locator(`button:has-text("${text}")`);
|
||||||
const buttonCount = await buttons.count();
|
const buttonCount = await buttons.count();
|
||||||
@@ -19,7 +19,7 @@ export async function findVisibleButton(
|
|||||||
|
|
||||||
export async function findVisibleElement(
|
export async function findVisibleElement(
|
||||||
page: Page,
|
page: Page,
|
||||||
selector: string
|
selector: string,
|
||||||
): Promise<Locator> {
|
): Promise<Locator> {
|
||||||
const elements = page.locator(selector);
|
const elements = page.locator(selector);
|
||||||
const elementCount = await elements.count();
|
const elementCount = await elements.count();
|
||||||
|
|||||||
+37
-37
@@ -12,19 +12,19 @@ test.describe("Homepage", () => {
|
|||||||
|
|
||||||
// Check main sections are present
|
// Check main sections are present
|
||||||
await expect(
|
await expect(
|
||||||
page.locator("h1, h2").filter({ hasText: "Collaborate" })
|
page.locator("h1, h2").filter({ hasText: "Collaborate" }),
|
||||||
).toBeVisible();
|
).toBeVisible();
|
||||||
await expect(
|
await expect(
|
||||||
page.locator("h2").filter({ hasText: "How CommunityRule works" })
|
page.locator("h2").filter({ hasText: "How CommunityRule works" }),
|
||||||
).toBeVisible();
|
).toBeVisible();
|
||||||
await expect(
|
await expect(
|
||||||
page.locator("h1").filter({ hasText: "We've got your back" })
|
page.locator("h1").filter({ hasText: "We've got your back" }),
|
||||||
).toBeVisible();
|
).toBeVisible();
|
||||||
|
|
||||||
// Check key components are rendered
|
// Check key components are rendered
|
||||||
await expect(page.locator('img[alt="Hero illustration"]')).toBeVisible();
|
await expect(page.locator('img[alt="Hero illustration"]')).toBeVisible();
|
||||||
await expect(
|
await expect(
|
||||||
page.locator("text=Trusted by leading cooperators")
|
page.locator("text=Trusted by leading cooperators"),
|
||||||
).toBeVisible();
|
).toBeVisible();
|
||||||
await expect(page.locator("text=Jo Freeman")).toBeVisible();
|
await expect(page.locator("text=Jo Freeman")).toBeVisible();
|
||||||
});
|
});
|
||||||
@@ -34,12 +34,12 @@ test.describe("Homepage", () => {
|
|||||||
await expect(page.locator("text=Collaborate")).toBeVisible();
|
await expect(page.locator("text=Collaborate")).toBeVisible();
|
||||||
await expect(page.locator("text=with clarity")).toBeVisible();
|
await expect(page.locator("text=with clarity")).toBeVisible();
|
||||||
await expect(
|
await expect(
|
||||||
page.locator("text=Help your community make important decisions")
|
page.locator("text=Help your community make important decisions"),
|
||||||
).toBeVisible();
|
).toBeVisible();
|
||||||
|
|
||||||
// Check CTA button
|
// Check CTA button
|
||||||
const learnButtons = page.locator(
|
const learnButtons = page.locator(
|
||||||
'button:has-text("Learn how CommunityRule works")'
|
'button:has-text("Learn how CommunityRule works")',
|
||||||
);
|
);
|
||||||
const buttonCount = await learnButtons.count();
|
const buttonCount = await learnButtons.count();
|
||||||
let visibleButton = null;
|
let visibleButton = null;
|
||||||
@@ -54,7 +54,7 @@ test.describe("Homepage", () => {
|
|||||||
|
|
||||||
if (!visibleButton) {
|
if (!visibleButton) {
|
||||||
throw new Error(
|
throw new Error(
|
||||||
'No visible "Learn how CommunityRule works" button found'
|
'No visible "Learn how CommunityRule works" button found',
|
||||||
);
|
);
|
||||||
}
|
}
|
||||||
|
|
||||||
@@ -64,14 +64,14 @@ test.describe("Homepage", () => {
|
|||||||
await visibleButton.click();
|
await visibleButton.click();
|
||||||
// Should scroll to the numbered cards section
|
// Should scroll to the numbered cards section
|
||||||
await expect(
|
await expect(
|
||||||
page.locator('h2:has-text("How CommunityRule works")')
|
page.locator('h2:has-text("How CommunityRule works")'),
|
||||||
).toBeVisible();
|
).toBeVisible();
|
||||||
});
|
});
|
||||||
|
|
||||||
test("logo wall section displays correctly", async ({ page }) => {
|
test("logo wall section displays correctly", async ({ page }) => {
|
||||||
// Check section label
|
// Check section label
|
||||||
await expect(
|
await expect(
|
||||||
page.locator("text=Trusted by leading cooperators")
|
page.locator("text=Trusted by leading cooperators"),
|
||||||
).toBeVisible();
|
).toBeVisible();
|
||||||
|
|
||||||
// Check logos are present
|
// Check logos are present
|
||||||
@@ -95,23 +95,23 @@ test.describe("Homepage", () => {
|
|||||||
test("numbered cards section functionality", async ({ page }) => {
|
test("numbered cards section functionality", async ({ page }) => {
|
||||||
// Check section header
|
// Check section header
|
||||||
await expect(
|
await expect(
|
||||||
page.locator('h2:has-text("How CommunityRule works")')
|
page.locator('h2:has-text("How CommunityRule works")'),
|
||||||
).toBeVisible();
|
).toBeVisible();
|
||||||
await expect(
|
await expect(
|
||||||
page.locator("text=Here's a quick overview of the process")
|
page.locator("text=Here's a quick overview of the process"),
|
||||||
).toBeVisible();
|
).toBeVisible();
|
||||||
|
|
||||||
// Check all three cards are present
|
// Check all three cards are present
|
||||||
await expect(
|
await expect(
|
||||||
page.locator("text=Document how your community makes decisions")
|
page.locator("text=Document how your community makes decisions"),
|
||||||
).toBeVisible();
|
).toBeVisible();
|
||||||
await expect(
|
await expect(
|
||||||
page.locator("text=Build an operating manual for a successful community")
|
page.locator("text=Build an operating manual for a successful community"),
|
||||||
).toBeVisible();
|
).toBeVisible();
|
||||||
await expect(
|
await expect(
|
||||||
page.locator(
|
page.locator(
|
||||||
"text=Get a link to your manual for your group to review and evolve"
|
"text=Get a link to your manual for your group to review and evolve",
|
||||||
)
|
),
|
||||||
).toBeVisible();
|
).toBeVisible();
|
||||||
|
|
||||||
// Check numbered indicators
|
// Check numbered indicators
|
||||||
@@ -121,7 +121,7 @@ test.describe("Homepage", () => {
|
|||||||
|
|
||||||
// Check CTA buttons
|
// Check CTA buttons
|
||||||
const createButtons = page.locator(
|
const createButtons = page.locator(
|
||||||
'button:has-text("Create CommunityRule")'
|
'button:has-text("Create CommunityRule")',
|
||||||
);
|
);
|
||||||
const createButtonCount = await createButtons.count();
|
const createButtonCount = await createButtons.count();
|
||||||
let visibleCreateButton = null;
|
let visibleCreateButton = null;
|
||||||
@@ -139,7 +139,7 @@ test.describe("Homepage", () => {
|
|||||||
}
|
}
|
||||||
|
|
||||||
await expect(
|
await expect(
|
||||||
page.locator('button:has-text("See how it works")')
|
page.locator('button:has-text("See how it works")'),
|
||||||
).toBeVisible();
|
).toBeVisible();
|
||||||
});
|
});
|
||||||
|
|
||||||
@@ -152,16 +152,16 @@ test.describe("Homepage", () => {
|
|||||||
|
|
||||||
// Check rule descriptions
|
// Check rule descriptions
|
||||||
await expect(
|
await expect(
|
||||||
page.locator("text=Units called Circles have the ability to decide")
|
page.locator("text=Units called Circles have the ability to decide"),
|
||||||
).toBeVisible();
|
).toBeVisible();
|
||||||
await expect(
|
await expect(
|
||||||
page.locator("text=Decisions that affect the group collectively")
|
page.locator("text=Decisions that affect the group collectively"),
|
||||||
).toBeVisible();
|
).toBeVisible();
|
||||||
await expect(
|
await expect(
|
||||||
page.locator("text=An elected board determines policies")
|
page.locator("text=An elected board determines policies"),
|
||||||
).toBeVisible();
|
).toBeVisible();
|
||||||
await expect(
|
await expect(
|
||||||
page.locator("text=All participants can propose and vote")
|
page.locator("text=All participants can propose and vote"),
|
||||||
).toBeVisible();
|
).toBeVisible();
|
||||||
|
|
||||||
// Test card interactions
|
// Test card interactions
|
||||||
@@ -171,19 +171,19 @@ test.describe("Homepage", () => {
|
|||||||
|
|
||||||
// Check "See all templates" button
|
// Check "See all templates" button
|
||||||
await expect(
|
await expect(
|
||||||
page.locator('button:has-text("See all templates")')
|
page.locator('button:has-text("See all templates")'),
|
||||||
).toBeVisible();
|
).toBeVisible();
|
||||||
});
|
});
|
||||||
|
|
||||||
test("feature grid section functionality", async ({ page }) => {
|
test("feature grid section functionality", async ({ page }) => {
|
||||||
// Check section header
|
// Check section header
|
||||||
await expect(
|
await expect(
|
||||||
page.locator('h1:has-text("We\'ve got your back")')
|
page.locator('h1:has-text("We\'ve got your back")'),
|
||||||
).toBeVisible();
|
).toBeVisible();
|
||||||
await expect(
|
await expect(
|
||||||
page.locator(
|
page.locator(
|
||||||
"text=Use our toolkit to improve, document, and evolve your organization"
|
"text=Use our toolkit to improve, document, and evolve your organization",
|
||||||
)
|
),
|
||||||
).toBeVisible();
|
).toBeVisible();
|
||||||
|
|
||||||
// Check all four feature cards - use more specific selectors to avoid conflicts
|
// Check all four feature cards - use more specific selectors to avoid conflicts
|
||||||
@@ -205,23 +205,23 @@ test.describe("Homepage", () => {
|
|||||||
test("quote block section displays correctly", async ({ page }) => {
|
test("quote block section displays correctly", async ({ page }) => {
|
||||||
// Check quote content
|
// Check quote content
|
||||||
await expect(
|
await expect(
|
||||||
page.locator("text=The rules of decision-making must be open")
|
page.locator("text=The rules of decision-making must be open"),
|
||||||
).toBeVisible();
|
).toBeVisible();
|
||||||
|
|
||||||
// Check author and source
|
// Check author and source
|
||||||
await expect(page.locator("text=Jo Freeman")).toBeVisible();
|
await expect(page.locator("text=Jo Freeman")).toBeVisible();
|
||||||
await expect(
|
await expect(
|
||||||
page.locator("text=The Tyranny of Structurelessness")
|
page.locator("text=The Tyranny of Structurelessness"),
|
||||||
).toBeVisible();
|
).toBeVisible();
|
||||||
|
|
||||||
// Check avatar
|
// Check avatar
|
||||||
await expect(
|
await expect(
|
||||||
page.locator('img[alt="Portrait of Jo Freeman"]')
|
page.locator('img[alt="Portrait of Jo Freeman"]'),
|
||||||
).toBeVisible();
|
).toBeVisible();
|
||||||
|
|
||||||
// Check decorative elements
|
// Check decorative elements
|
||||||
await expect(
|
await expect(
|
||||||
page.locator('[class*="pointer-events-none absolute z-0"]').first()
|
page.locator('[class*="pointer-events-none absolute z-0"]').first(),
|
||||||
).toBeVisible();
|
).toBeVisible();
|
||||||
});
|
});
|
||||||
|
|
||||||
@@ -229,7 +229,7 @@ test.describe("Homepage", () => {
|
|||||||
// Check section content
|
// Check section content
|
||||||
await expect(page.locator("text=Still have questions?")).toBeVisible();
|
await expect(page.locator("text=Still have questions?")).toBeVisible();
|
||||||
await expect(
|
await expect(
|
||||||
page.locator("text=Get answers from an experienced organizer")
|
page.locator("text=Get answers from an experienced organizer"),
|
||||||
).toBeVisible();
|
).toBeVisible();
|
||||||
|
|
||||||
// Check CTA button (it's actually a link)
|
// Check CTA button (it's actually a link)
|
||||||
@@ -286,19 +286,19 @@ test.describe("Homepage", () => {
|
|||||||
// Test mobile viewport
|
// Test mobile viewport
|
||||||
await page.setViewportSize({ width: 375, height: 667 });
|
await page.setViewportSize({ width: 375, height: 667 });
|
||||||
await expect(
|
await expect(
|
||||||
page.locator("h1, h2").filter({ hasText: "Collaborate" })
|
page.locator("h1, h2").filter({ hasText: "Collaborate" }),
|
||||||
).toBeVisible();
|
).toBeVisible();
|
||||||
|
|
||||||
// Test tablet viewport
|
// Test tablet viewport
|
||||||
await page.setViewportSize({ width: 768, height: 1024 });
|
await page.setViewportSize({ width: 768, height: 1024 });
|
||||||
await expect(
|
await expect(
|
||||||
page.locator("h1, h2").filter({ hasText: "Collaborate" })
|
page.locator("h1, h2").filter({ hasText: "Collaborate" }),
|
||||||
).toBeVisible();
|
).toBeVisible();
|
||||||
|
|
||||||
// Test desktop viewport
|
// Test desktop viewport
|
||||||
await page.setViewportSize({ width: 1440, height: 900 });
|
await page.setViewportSize({ width: 1440, height: 900 });
|
||||||
await expect(
|
await expect(
|
||||||
page.locator("h1, h2").filter({ hasText: "Collaborate" })
|
page.locator("h1, h2").filter({ hasText: "Collaborate" }),
|
||||||
).toBeVisible();
|
).toBeVisible();
|
||||||
});
|
});
|
||||||
|
|
||||||
@@ -362,7 +362,7 @@ test.describe("Homepage", () => {
|
|||||||
test("scroll behavior and smooth scrolling", async ({ page }) => {
|
test("scroll behavior and smooth scrolling", async ({ page }) => {
|
||||||
// Test smooth scrolling to sections
|
// Test smooth scrolling to sections
|
||||||
const learnButtons = page.locator(
|
const learnButtons = page.locator(
|
||||||
'button:has-text("Learn how CommunityRule works")'
|
'button:has-text("Learn how CommunityRule works")',
|
||||||
);
|
);
|
||||||
const buttonCount = await learnButtons.count();
|
const buttonCount = await learnButtons.count();
|
||||||
let visibleButton = null;
|
let visibleButton = null;
|
||||||
@@ -377,7 +377,7 @@ test.describe("Homepage", () => {
|
|||||||
|
|
||||||
if (!visibleButton) {
|
if (!visibleButton) {
|
||||||
throw new Error(
|
throw new Error(
|
||||||
'No visible "Learn how CommunityRule works" button found'
|
'No visible "Learn how CommunityRule works" button found',
|
||||||
);
|
);
|
||||||
}
|
}
|
||||||
|
|
||||||
@@ -388,7 +388,7 @@ test.describe("Homepage", () => {
|
|||||||
|
|
||||||
// Check we're at the numbered cards section
|
// Check we're at the numbered cards section
|
||||||
await expect(
|
await expect(
|
||||||
page.locator('h2:has-text("How CommunityRule works")')
|
page.locator('h2:has-text("How CommunityRule works")'),
|
||||||
).toBeVisible();
|
).toBeVisible();
|
||||||
});
|
});
|
||||||
|
|
||||||
@@ -405,7 +405,7 @@ test.describe("Homepage", () => {
|
|||||||
const brokenImages = await page.evaluate(() => {
|
const brokenImages = await page.evaluate(() => {
|
||||||
const imgs = document.querySelectorAll("img");
|
const imgs = document.querySelectorAll("img");
|
||||||
return Array.from(imgs).filter(
|
return Array.from(imgs).filter(
|
||||||
(img) => !img.complete || img.naturalWidth === 0
|
(img) => !img.complete || img.naturalWidth === 0,
|
||||||
);
|
);
|
||||||
});
|
});
|
||||||
|
|
||||||
|
|||||||
@@ -65,7 +65,7 @@ test.describe("Performance Monitoring", () => {
|
|||||||
// Assert individual metrics
|
// Assert individual metrics
|
||||||
expect(result.metrics.ttfb).toBeLessThan(PERFORMANCE_BUDGETS.ttfb);
|
expect(result.metrics.ttfb).toBeLessThan(PERFORMANCE_BUDGETS.ttfb);
|
||||||
expect(result.metrics.domContentLoaded).toBeLessThan(
|
expect(result.metrics.domContentLoaded).toBeLessThan(
|
||||||
PERFORMANCE_BUDGETS.dom_content_loaded
|
PERFORMANCE_BUDGETS.dom_content_loaded,
|
||||||
);
|
);
|
||||||
expect(result.metrics.load).toBeLessThan(PERFORMANCE_BUDGETS.full_load);
|
expect(result.metrics.load).toBeLessThan(PERFORMANCE_BUDGETS.full_load);
|
||||||
|
|
||||||
@@ -121,10 +121,10 @@ test.describe("Performance Monitoring", () => {
|
|||||||
|
|
||||||
// Assert Core Web Vitals are within acceptable ranges
|
// Assert Core Web Vitals are within acceptable ranges
|
||||||
expect(coreWebVitals.lcp).toBeLessThan(
|
expect(coreWebVitals.lcp).toBeLessThan(
|
||||||
PERFORMANCE_BUDGETS.largest_contentful_paint
|
PERFORMANCE_BUDGETS.largest_contentful_paint,
|
||||||
);
|
);
|
||||||
expect(coreWebVitals.fid).toBeLessThan(
|
expect(coreWebVitals.fid).toBeLessThan(
|
||||||
PERFORMANCE_BUDGETS.first_input_delay
|
PERFORMANCE_BUDGETS.first_input_delay,
|
||||||
);
|
);
|
||||||
expect(coreWebVitals.cls).toBeLessThan(0.1); // CLS should be less than 0.1
|
expect(coreWebVitals.cls).toBeLessThan(0.1); // CLS should be less than 0.1
|
||||||
});
|
});
|
||||||
@@ -133,27 +133,24 @@ test.describe("Performance Monitoring", () => {
|
|||||||
await page.goto("/");
|
await page.goto("/");
|
||||||
|
|
||||||
// Measure header render time
|
// Measure header render time
|
||||||
const headerRenderTime = await performanceMonitor.measureComponentRender(
|
const headerRenderTime =
|
||||||
"header"
|
await performanceMonitor.measureComponentRender("header");
|
||||||
);
|
|
||||||
expect(headerRenderTime).toBeLessThan(
|
expect(headerRenderTime).toBeLessThan(
|
||||||
PERFORMANCE_BUDGETS.component_render_time
|
PERFORMANCE_BUDGETS.component_render_time,
|
||||||
);
|
);
|
||||||
|
|
||||||
// Measure footer render time
|
// Measure footer render time
|
||||||
const footerRenderTime = await performanceMonitor.measureComponentRender(
|
const footerRenderTime =
|
||||||
"footer"
|
await performanceMonitor.measureComponentRender("footer");
|
||||||
);
|
|
||||||
expect(footerRenderTime).toBeLessThan(
|
expect(footerRenderTime).toBeLessThan(
|
||||||
PERFORMANCE_BUDGETS.component_render_time
|
PERFORMANCE_BUDGETS.component_render_time,
|
||||||
);
|
);
|
||||||
|
|
||||||
// Measure main content render time
|
// Measure main content render time
|
||||||
const mainRenderTime = await performanceMonitor.measureComponentRender(
|
const mainRenderTime =
|
||||||
"main"
|
await performanceMonitor.measureComponentRender("main");
|
||||||
);
|
|
||||||
expect(mainRenderTime).toBeLessThan(
|
expect(mainRenderTime).toBeLessThan(
|
||||||
PERFORMANCE_BUDGETS.component_render_time
|
PERFORMANCE_BUDGETS.component_render_time,
|
||||||
);
|
);
|
||||||
});
|
});
|
||||||
|
|
||||||
@@ -168,7 +165,7 @@ test.describe("Performance Monitoring", () => {
|
|||||||
'button:has-text("Learn how CommunityRule works")',
|
'button:has-text("Learn how CommunityRule works")',
|
||||||
async () => {
|
async () => {
|
||||||
const learnButtons = page.locator(
|
const learnButtons = page.locator(
|
||||||
'button:has-text("Learn how CommunityRule works")'
|
'button:has-text("Learn how CommunityRule works")',
|
||||||
);
|
);
|
||||||
const buttonCount = await learnButtons.count();
|
const buttonCount = await learnButtons.count();
|
||||||
let visibleButton = null;
|
let visibleButton = null;
|
||||||
@@ -183,12 +180,12 @@ test.describe("Performance Monitoring", () => {
|
|||||||
|
|
||||||
if (!visibleButton) {
|
if (!visibleButton) {
|
||||||
throw new Error(
|
throw new Error(
|
||||||
'No visible "Learn how CommunityRule works" button found'
|
'No visible "Learn how CommunityRule works" button found',
|
||||||
);
|
);
|
||||||
}
|
}
|
||||||
|
|
||||||
await visibleButton.click();
|
await visibleButton.click();
|
||||||
}
|
},
|
||||||
);
|
);
|
||||||
expect(buttonClickTime).toBeLessThan(PERFORMANCE_BUDGETS.interaction_time);
|
expect(buttonClickTime).toBeLessThan(PERFORMANCE_BUDGETS.interaction_time);
|
||||||
|
|
||||||
@@ -213,7 +210,7 @@ test.describe("Performance Monitoring", () => {
|
|||||||
}
|
}
|
||||||
|
|
||||||
await visibleLink.click();
|
await visibleLink.click();
|
||||||
}
|
},
|
||||||
);
|
);
|
||||||
expect(linkClickTime).toBeLessThan(PERFORMANCE_BUDGETS.interaction_time);
|
expect(linkClickTime).toBeLessThan(PERFORMANCE_BUDGETS.interaction_time);
|
||||||
});
|
});
|
||||||
@@ -250,7 +247,7 @@ test.describe("Performance Monitoring", () => {
|
|||||||
const summary = performanceMonitor.getSummary();
|
const summary = performanceMonitor.getSummary();
|
||||||
if (summary.network_request_duration) {
|
if (summary.network_request_duration) {
|
||||||
expect(summary.network_request_duration.average).toBeLessThan(
|
expect(summary.network_request_duration.average).toBeLessThan(
|
||||||
PERFORMANCE_BUDGETS.network_request_duration
|
PERFORMANCE_BUDGETS.network_request_duration,
|
||||||
);
|
);
|
||||||
}
|
}
|
||||||
});
|
});
|
||||||
@@ -293,7 +290,7 @@ test.describe("Performance Monitoring", () => {
|
|||||||
|
|
||||||
// Even under load, page should load within reasonable time
|
// Even under load, page should load within reasonable time
|
||||||
expect(result.loadTime).toBeLessThan(
|
expect(result.loadTime).toBeLessThan(
|
||||||
PERFORMANCE_BUDGETS.page_load_time * 1.5
|
PERFORMANCE_BUDGETS.page_load_time * 1.5,
|
||||||
);
|
);
|
||||||
});
|
});
|
||||||
|
|
||||||
@@ -343,7 +340,7 @@ test.describe("Performance Monitoring", () => {
|
|||||||
|
|
||||||
console.log(
|
console.log(
|
||||||
"Exported Performance Data:",
|
"Exported Performance Data:",
|
||||||
JSON.stringify(exportedData, null, 2)
|
JSON.stringify(exportedData, null, 2),
|
||||||
);
|
);
|
||||||
});
|
});
|
||||||
|
|
||||||
@@ -402,7 +399,7 @@ test.describe("Performance Regression Testing", () => {
|
|||||||
const variance =
|
const variance =
|
||||||
results.reduce(
|
results.reduce(
|
||||||
(acc, val) => acc + Math.pow(val - averageLoadTime, 2),
|
(acc, val) => acc + Math.pow(val - averageLoadTime, 2),
|
||||||
0
|
0,
|
||||||
) / results.length;
|
) / results.length;
|
||||||
|
|
||||||
// Performance should be consistent (low variance)
|
// Performance should be consistent (low variance)
|
||||||
|
|||||||
@@ -11,7 +11,7 @@ test.describe("User Journeys", () => {
|
|||||||
|
|
||||||
// 2. User reads hero section
|
// 2. User reads hero section
|
||||||
await expect(
|
await expect(
|
||||||
page.locator("text=Help your community make important decisions")
|
page.locator("text=Help your community make important decisions"),
|
||||||
).toBeVisible();
|
).toBeVisible();
|
||||||
|
|
||||||
// 3. User clicks CTA to learn more
|
// 3. User clicks CTA to learn more
|
||||||
@@ -24,20 +24,20 @@ test.describe("User Journeys", () => {
|
|||||||
|
|
||||||
// 4. User scrolls to numbered cards section
|
// 4. User scrolls to numbered cards section
|
||||||
await expect(
|
await expect(
|
||||||
page.locator('h2:has-text("How CommunityRule works")')
|
page.locator('h2:has-text("How CommunityRule works")'),
|
||||||
).toBeVisible();
|
).toBeVisible();
|
||||||
|
|
||||||
// 5. User reads the process steps
|
// 5. User reads the process steps
|
||||||
await expect(
|
await expect(
|
||||||
page.locator("text=Document how your community makes decisions")
|
page.locator("text=Document how your community makes decisions"),
|
||||||
).toBeVisible();
|
).toBeVisible();
|
||||||
await expect(
|
await expect(
|
||||||
page.locator("text=Build an operating manual for a successful community")
|
page.locator("text=Build an operating manual for a successful community"),
|
||||||
).toBeVisible();
|
).toBeVisible();
|
||||||
await expect(
|
await expect(
|
||||||
page.locator(
|
page.locator(
|
||||||
"text=Get a link to your manual for your group to review and evolve"
|
"text=Get a link to your manual for your group to review and evolve",
|
||||||
)
|
),
|
||||||
).toBeVisible();
|
).toBeVisible();
|
||||||
|
|
||||||
// 6. User explores rule templates
|
// 6. User explores rule templates
|
||||||
@@ -78,7 +78,7 @@ test.describe("User Journeys", () => {
|
|||||||
|
|
||||||
// 10. User creates CommunityRule
|
// 10. User creates CommunityRule
|
||||||
const createButton = page.locator(
|
const createButton = page.locator(
|
||||||
'button:has-text("Create CommunityRule")'
|
'button:has-text("Create CommunityRule")',
|
||||||
);
|
);
|
||||||
if (
|
if (
|
||||||
(await createButton.count()) > 0 &&
|
(await createButton.count()) > 0 &&
|
||||||
@@ -139,7 +139,7 @@ test.describe("User Journeys", () => {
|
|||||||
|
|
||||||
// Read the section
|
// Read the section
|
||||||
await expect(
|
await expect(
|
||||||
page.locator("text=Get answers from an experienced organizer")
|
page.locator("text=Get answers from an experienced organizer"),
|
||||||
).toBeVisible();
|
).toBeVisible();
|
||||||
|
|
||||||
// Click contact button - check if it exists and is visible first
|
// Click contact button - check if it exists and is visible first
|
||||||
@@ -158,7 +158,7 @@ test.describe("User Journeys", () => {
|
|||||||
test("user journey: create CommunityRule", async ({ page }) => {
|
test("user journey: create CommunityRule", async ({ page }) => {
|
||||||
// Simplified approach - just check if the button exists and is visible
|
// Simplified approach - just check if the button exists and is visible
|
||||||
const createButton = page.locator(
|
const createButton = page.locator(
|
||||||
'button:has-text("Create CommunityRule")'
|
'button:has-text("Create CommunityRule")',
|
||||||
);
|
);
|
||||||
|
|
||||||
if (
|
if (
|
||||||
|
|||||||
@@ -349,7 +349,7 @@ test.describe("Visual Regression Tests", () => {
|
|||||||
await page.evaluate(() => {
|
await page.evaluate(() => {
|
||||||
document.documentElement.style.setProperty(
|
document.documentElement.style.setProperty(
|
||||||
"--prefers-reduced-motion",
|
"--prefers-reduced-motion",
|
||||||
"reduce"
|
"reduce",
|
||||||
);
|
);
|
||||||
});
|
});
|
||||||
|
|
||||||
|
|||||||
@@ -16,18 +16,18 @@ describe("ContentLockup Integration", () => {
|
|||||||
subtitle="Get Started"
|
subtitle="Get Started"
|
||||||
description="This is a description"
|
description="This is a description"
|
||||||
ctaText="Get Started"
|
ctaText="Get Started"
|
||||||
/>
|
/>,
|
||||||
);
|
);
|
||||||
|
|
||||||
expect(
|
expect(
|
||||||
screen.getByRole("heading", { name: "Welcome" })
|
screen.getByRole("heading", { name: "Welcome" }),
|
||||||
).toBeInTheDocument();
|
).toBeInTheDocument();
|
||||||
expect(
|
expect(
|
||||||
screen.getByRole("heading", { name: "Get Started" })
|
screen.getByRole("heading", { name: "Get Started" }),
|
||||||
).toBeInTheDocument();
|
).toBeInTheDocument();
|
||||||
expect(screen.getByText("This is a description")).toBeInTheDocument();
|
expect(screen.getByText("This is a description")).toBeInTheDocument();
|
||||||
expect(screen.getAllByRole("button", { name: "Get Started" })).toHaveLength(
|
expect(screen.getAllByRole("button", { name: "Get Started" })).toHaveLength(
|
||||||
3
|
3,
|
||||||
);
|
);
|
||||||
});
|
});
|
||||||
|
|
||||||
@@ -40,18 +40,18 @@ describe("ContentLockup Integration", () => {
|
|||||||
description="Feature description"
|
description="Feature description"
|
||||||
linkText="Learn More"
|
linkText="Learn More"
|
||||||
linkHref="/learn"
|
linkHref="/learn"
|
||||||
/>
|
/>,
|
||||||
);
|
);
|
||||||
|
|
||||||
expect(
|
expect(
|
||||||
screen.getByRole("heading", { name: "Feature Title" })
|
screen.getByRole("heading", { name: "Feature Title" }),
|
||||||
).toBeInTheDocument();
|
).toBeInTheDocument();
|
||||||
expect(
|
expect(
|
||||||
screen.getByRole("link", { name: "Learn More" })
|
screen.getByRole("link", { name: "Learn More" }),
|
||||||
).toBeInTheDocument();
|
).toBeInTheDocument();
|
||||||
expect(screen.getByRole("link", { name: "Learn More" })).toHaveAttribute(
|
expect(screen.getByRole("link", { name: "Learn More" })).toHaveAttribute(
|
||||||
"href",
|
"href",
|
||||||
"/learn"
|
"/learn",
|
||||||
);
|
);
|
||||||
});
|
});
|
||||||
|
|
||||||
@@ -61,14 +61,14 @@ describe("ContentLockup Integration", () => {
|
|||||||
variant="ask"
|
variant="ask"
|
||||||
title="Ask Question"
|
title="Ask Question"
|
||||||
subtitle="Ask subtitle"
|
subtitle="Ask subtitle"
|
||||||
/>
|
/>,
|
||||||
);
|
);
|
||||||
|
|
||||||
expect(
|
expect(
|
||||||
screen.getByRole("heading", { name: "Ask Question" })
|
screen.getByRole("heading", { name: "Ask Question" }),
|
||||||
).toBeInTheDocument();
|
).toBeInTheDocument();
|
||||||
expect(
|
expect(
|
||||||
screen.getByRole("heading", { name: "Ask subtitle" })
|
screen.getByRole("heading", { name: "Ask subtitle" }),
|
||||||
).toBeInTheDocument();
|
).toBeInTheDocument();
|
||||||
// Ask variant should not have description or CTA
|
// Ask variant should not have description or CTA
|
||||||
expect(screen.queryByRole("button")).not.toBeInTheDocument();
|
expect(screen.queryByRole("button")).not.toBeInTheDocument();
|
||||||
@@ -81,7 +81,7 @@ describe("ContentLockup Integration", () => {
|
|||||||
title="Left Aligned"
|
title="Left Aligned"
|
||||||
subtitle="Subtitle"
|
subtitle="Subtitle"
|
||||||
alignment="left"
|
alignment="left"
|
||||||
/>
|
/>,
|
||||||
);
|
);
|
||||||
|
|
||||||
const container = screen
|
const container = screen
|
||||||
@@ -92,7 +92,7 @@ describe("ContentLockup Integration", () => {
|
|||||||
|
|
||||||
test("renders responsive buttons correctly", () => {
|
test("renders responsive buttons correctly", () => {
|
||||||
render(
|
render(
|
||||||
<ContentLockup variant="hero" title="Responsive" ctaText="Click Me" />
|
<ContentLockup variant="hero" title="Responsive" ctaText="Click Me" />,
|
||||||
);
|
);
|
||||||
|
|
||||||
// Should render all three button variants for different breakpoints
|
// Should render all three button variants for different breakpoints
|
||||||
@@ -107,7 +107,7 @@ describe("ContentLockup Integration", () => {
|
|||||||
title="Custom Button"
|
title="Custom Button"
|
||||||
ctaText="Custom"
|
ctaText="Custom"
|
||||||
buttonClassName="custom-button-class"
|
buttonClassName="custom-button-class"
|
||||||
/>
|
/>,
|
||||||
);
|
);
|
||||||
|
|
||||||
const buttons = screen.getAllByRole("button", { name: "Custom" });
|
const buttons = screen.getAllByRole("button", { name: "Custom" });
|
||||||
@@ -119,7 +119,7 @@ describe("ContentLockup Integration", () => {
|
|||||||
render(<ContentLockup variant="hero" title="Minimal" />);
|
render(<ContentLockup variant="hero" title="Minimal" />);
|
||||||
|
|
||||||
expect(
|
expect(
|
||||||
screen.getByRole("heading", { name: "Minimal" })
|
screen.getByRole("heading", { name: "Minimal" }),
|
||||||
).toBeInTheDocument();
|
).toBeInTheDocument();
|
||||||
// Should not crash without subtitle, description, or CTA
|
// Should not crash without subtitle, description, or CTA
|
||||||
expect(screen.queryByRole("button")).not.toBeInTheDocument();
|
expect(screen.queryByRole("button")).not.toBeInTheDocument();
|
||||||
@@ -146,7 +146,7 @@ describe("ContentLockup Integration", () => {
|
|||||||
title="Accessible"
|
title="Accessible"
|
||||||
linkText="Accessible Link"
|
linkText="Accessible Link"
|
||||||
linkHref="/accessible"
|
linkHref="/accessible"
|
||||||
/>
|
/>,
|
||||||
);
|
);
|
||||||
|
|
||||||
const link = screen.getByRole("link", { name: "Accessible Link" });
|
const link = screen.getByRole("link", { name: "Accessible Link" });
|
||||||
|
|||||||
@@ -49,26 +49,26 @@ describe("Component Interactions Integration", () => {
|
|||||||
<div>
|
<div>
|
||||||
<HeroBanner {...heroData} />
|
<HeroBanner {...heroData} />
|
||||||
<NumberedCards {...numberedCardsData} />
|
<NumberedCards {...numberedCardsData} />
|
||||||
</div>
|
</div>,
|
||||||
);
|
);
|
||||||
|
|
||||||
// Hero introduces the concept
|
// Hero introduces the concept
|
||||||
expect(
|
expect(
|
||||||
screen.getByText(/Help your community make important decisions/)
|
screen.getByText(/Help your community make important decisions/),
|
||||||
).toBeInTheDocument();
|
).toBeInTheDocument();
|
||||||
|
|
||||||
// Numbered cards explain the process
|
// Numbered cards explain the process
|
||||||
expect(screen.getByText("How CommunityRule works")).toBeInTheDocument();
|
expect(screen.getByText("How CommunityRule works")).toBeInTheDocument();
|
||||||
expect(
|
expect(
|
||||||
screen.getByText("Document how your community makes decisions")
|
screen.getByText("Document how your community makes decisions"),
|
||||||
).toBeInTheDocument();
|
).toBeInTheDocument();
|
||||||
expect(
|
expect(
|
||||||
screen.getByText("Build an operating manual for a successful community")
|
screen.getByText("Build an operating manual for a successful community"),
|
||||||
).toBeInTheDocument();
|
).toBeInTheDocument();
|
||||||
expect(
|
expect(
|
||||||
screen.getByText(
|
screen.getByText(
|
||||||
"Get a link to your manual for your group to review and evolve"
|
"Get a link to your manual for your group to review and evolve",
|
||||||
)
|
),
|
||||||
).toBeInTheDocument();
|
).toBeInTheDocument();
|
||||||
});
|
});
|
||||||
|
|
||||||
@@ -83,7 +83,7 @@ describe("Component Interactions Integration", () => {
|
|||||||
<div>
|
<div>
|
||||||
<RuleStack />
|
<RuleStack />
|
||||||
<FeatureGrid {...featureGridData} />
|
<FeatureGrid {...featureGridData} />
|
||||||
</div>
|
</div>,
|
||||||
);
|
);
|
||||||
|
|
||||||
// Rule stack shows governance options
|
// Rule stack shows governance options
|
||||||
@@ -94,12 +94,12 @@ describe("Component Interactions Integration", () => {
|
|||||||
|
|
||||||
// Feature grid provides support context
|
// Feature grid provides support context
|
||||||
expect(
|
expect(
|
||||||
screen.getByText("We've got your back, every step of the way")
|
screen.getByText("We've got your back, every step of the way"),
|
||||||
).toBeInTheDocument();
|
).toBeInTheDocument();
|
||||||
expect(
|
expect(
|
||||||
screen.getByText(
|
screen.getByText(
|
||||||
"Use our toolkit to improve, document, and evolve your organization."
|
"Use our toolkit to improve, document, and evolve your organization.",
|
||||||
)
|
),
|
||||||
).toBeInTheDocument();
|
).toBeInTheDocument();
|
||||||
});
|
});
|
||||||
|
|
||||||
@@ -108,13 +108,13 @@ describe("Component Interactions Integration", () => {
|
|||||||
|
|
||||||
// Quote provides credibility and social proof
|
// Quote provides credibility and social proof
|
||||||
expect(
|
expect(
|
||||||
screen.getByText(/The rules of decision-making must be open/)
|
screen.getByText(/The rules of decision-making must be open/),
|
||||||
).toBeInTheDocument();
|
).toBeInTheDocument();
|
||||||
|
|
||||||
// Should have proper attribution
|
// Should have proper attribution
|
||||||
expect(screen.getByText("Jo Freeman")).toBeInTheDocument();
|
expect(screen.getByText("Jo Freeman")).toBeInTheDocument();
|
||||||
expect(
|
expect(
|
||||||
screen.getByText("The Tyranny of Structurelessness")
|
screen.getByText("The Tyranny of Structurelessness"),
|
||||||
).toBeInTheDocument();
|
).toBeInTheDocument();
|
||||||
});
|
});
|
||||||
|
|
||||||
@@ -131,10 +131,10 @@ describe("Component Interactions Integration", () => {
|
|||||||
// Provides help for users who need assistance
|
// Provides help for users who need assistance
|
||||||
expect(screen.getByText("Still have questions?")).toBeInTheDocument();
|
expect(screen.getByText("Still have questions?")).toBeInTheDocument();
|
||||||
expect(
|
expect(
|
||||||
screen.getByText("Get answers from an experienced organizer")
|
screen.getByText("Get answers from an experienced organizer"),
|
||||||
).toBeInTheDocument();
|
).toBeInTheDocument();
|
||||||
expect(
|
expect(
|
||||||
screen.getByRole("link", { name: /Ask an organizer/i })
|
screen.getByRole("link", { name: /Ask an organizer/i }),
|
||||||
).toBeInTheDocument();
|
).toBeInTheDocument();
|
||||||
});
|
});
|
||||||
|
|
||||||
@@ -160,7 +160,7 @@ describe("Component Interactions Integration", () => {
|
|||||||
subtitle="Test help subtitle"
|
subtitle="Test help subtitle"
|
||||||
buttonText="Test Help Button"
|
buttonText="Test Help Button"
|
||||||
/>
|
/>
|
||||||
</div>
|
</div>,
|
||||||
);
|
);
|
||||||
|
|
||||||
// All components should render without errors
|
// All components should render without errors
|
||||||
@@ -169,7 +169,7 @@ describe("Component Interactions Integration", () => {
|
|||||||
expect(screen.getByText("Consensus clusters")).toBeInTheDocument();
|
expect(screen.getByText("Consensus clusters")).toBeInTheDocument();
|
||||||
expect(screen.getByText("Test Features")).toBeInTheDocument();
|
expect(screen.getByText("Test Features")).toBeInTheDocument();
|
||||||
expect(
|
expect(
|
||||||
screen.getByText(/The rules of decision-making must be open/)
|
screen.getByText(/The rules of decision-making must be open/),
|
||||||
).toBeInTheDocument();
|
).toBeInTheDocument();
|
||||||
expect(screen.getByText("Test Help")).toBeInTheDocument();
|
expect(screen.getByText("Test Help")).toBeInTheDocument();
|
||||||
});
|
});
|
||||||
@@ -209,7 +209,7 @@ describe("Component Interactions Integration", () => {
|
|||||||
<NumberedCards {...testData.cards} />
|
<NumberedCards {...testData.cards} />
|
||||||
<FeatureGrid {...testData.features} />
|
<FeatureGrid {...testData.features} />
|
||||||
<AskOrganizer {...testData.help} />
|
<AskOrganizer {...testData.help} />
|
||||||
</div>
|
</div>,
|
||||||
);
|
);
|
||||||
|
|
||||||
// Verify all data is passed correctly
|
// Verify all data is passed correctly
|
||||||
@@ -217,7 +217,7 @@ describe("Component Interactions Integration", () => {
|
|||||||
expect(screen.getByText("Test Subtitle")).toBeInTheDocument();
|
expect(screen.getByText("Test Subtitle")).toBeInTheDocument();
|
||||||
expect(screen.getByText("Test description")).toBeInTheDocument();
|
expect(screen.getByText("Test description")).toBeInTheDocument();
|
||||||
expect(
|
expect(
|
||||||
screen.getAllByRole("button", { name: "Test CTA" }).length
|
screen.getAllByRole("button", { name: "Test CTA" }).length,
|
||||||
).toBeGreaterThan(0);
|
).toBeGreaterThan(0);
|
||||||
expect(screen.getByText("Test Cards")).toBeInTheDocument();
|
expect(screen.getByText("Test Cards")).toBeInTheDocument();
|
||||||
expect(screen.getByText("Card 1")).toBeInTheDocument();
|
expect(screen.getByText("Card 1")).toBeInTheDocument();
|
||||||
@@ -225,7 +225,7 @@ describe("Component Interactions Integration", () => {
|
|||||||
expect(screen.getByText("Test Features")).toBeInTheDocument();
|
expect(screen.getByText("Test Features")).toBeInTheDocument();
|
||||||
expect(screen.getByText("Test Help")).toBeInTheDocument();
|
expect(screen.getByText("Test Help")).toBeInTheDocument();
|
||||||
expect(
|
expect(
|
||||||
screen.getByRole("link", { name: /Test Help Button/i })
|
screen.getByRole("link", { name: /Test Help Button/i }),
|
||||||
).toBeInTheDocument();
|
).toBeInTheDocument();
|
||||||
});
|
});
|
||||||
|
|
||||||
@@ -258,7 +258,7 @@ describe("Component Interactions Integration", () => {
|
|||||||
buttonText="Contact us"
|
buttonText="Contact us"
|
||||||
buttonHref="#contact"
|
buttonHref="#contact"
|
||||||
/>
|
/>
|
||||||
</div>
|
</div>,
|
||||||
);
|
);
|
||||||
|
|
||||||
// Test interaction flow
|
// Test interaction flow
|
||||||
@@ -281,7 +281,7 @@ describe("Component Interactions Integration", () => {
|
|||||||
expect(screen.getByText("Consensus clusters")).toBeInTheDocument();
|
expect(screen.getByText("Consensus clusters")).toBeInTheDocument();
|
||||||
expect(screen.getByText("Features")).toBeInTheDocument();
|
expect(screen.getByText("Features")).toBeInTheDocument();
|
||||||
expect(
|
expect(
|
||||||
screen.getByText(/The rules of decision-making must be open/)
|
screen.getByText(/The rules of decision-making must be open/),
|
||||||
).toBeInTheDocument();
|
).toBeInTheDocument();
|
||||||
expect(screen.getByText("Need help?")).toBeInTheDocument();
|
expect(screen.getByText("Need help?")).toBeInTheDocument();
|
||||||
});
|
});
|
||||||
@@ -294,7 +294,7 @@ describe("Component Interactions Integration", () => {
|
|||||||
<NumberedCards title="Minimal Cards" cards={[]} />
|
<NumberedCards title="Minimal Cards" cards={[]} />
|
||||||
<FeatureGrid title="Minimal Features" />
|
<FeatureGrid title="Minimal Features" />
|
||||||
<AskOrganizer title="Minimal Help" />
|
<AskOrganizer title="Minimal Help" />
|
||||||
</div>
|
</div>,
|
||||||
);
|
);
|
||||||
|
|
||||||
// Components should render without crashing
|
// Components should render without crashing
|
||||||
@@ -331,7 +331,7 @@ describe("Component Interactions Integration", () => {
|
|||||||
subtitle="Accessible help subtitle"
|
subtitle="Accessible help subtitle"
|
||||||
buttonText="Accessible Help Button"
|
buttonText="Accessible Help Button"
|
||||||
/>
|
/>
|
||||||
</div>
|
</div>,
|
||||||
);
|
);
|
||||||
|
|
||||||
// Check for proper heading hierarchy
|
// Check for proper heading hierarchy
|
||||||
|
|||||||
@@ -14,7 +14,7 @@ describe("Layout Integration", () => {
|
|||||||
<div>
|
<div>
|
||||||
<Header />
|
<Header />
|
||||||
<Footer />
|
<Footer />
|
||||||
</div>
|
</div>,
|
||||||
);
|
);
|
||||||
|
|
||||||
// Check that CommunityRule branding appears in both header and footer
|
// Check that CommunityRule branding appears in both header and footer
|
||||||
@@ -30,19 +30,21 @@ describe("Layout Integration", () => {
|
|||||||
<div>
|
<div>
|
||||||
<Header />
|
<Header />
|
||||||
<Footer />
|
<Footer />
|
||||||
</div>
|
</div>,
|
||||||
);
|
);
|
||||||
|
|
||||||
// Header navigation items
|
// Header navigation items
|
||||||
expect(
|
expect(
|
||||||
screen.getAllByRole("menuitem", { name: "Navigate to Use cases page" })
|
screen.getAllByRole("menuitem", { name: "Navigate to Use cases page" })
|
||||||
.length
|
.length,
|
||||||
).toBeGreaterThan(0);
|
).toBeGreaterThan(0);
|
||||||
expect(
|
expect(
|
||||||
screen.getAllByRole("menuitem", { name: "Navigate to Learn page" }).length
|
screen.getAllByRole("menuitem", { name: "Navigate to Learn page" })
|
||||||
|
.length,
|
||||||
).toBeGreaterThan(0);
|
).toBeGreaterThan(0);
|
||||||
expect(
|
expect(
|
||||||
screen.getAllByRole("menuitem", { name: "Navigate to About page" }).length
|
screen.getAllByRole("menuitem", { name: "Navigate to About page" })
|
||||||
|
.length,
|
||||||
).toBeGreaterThan(0);
|
).toBeGreaterThan(0);
|
||||||
|
|
||||||
// Footer navigation items (should be present in footer as well)
|
// Footer navigation items (should be present in footer as well)
|
||||||
@@ -92,23 +94,23 @@ describe("Layout Integration", () => {
|
|||||||
// Contact information
|
// Contact information
|
||||||
expect(screen.getByText("medlab@colorado.edu")).toBeInTheDocument();
|
expect(screen.getByText("medlab@colorado.edu")).toBeInTheDocument();
|
||||||
expect(
|
expect(
|
||||||
screen.getByRole("link", { name: "medlab@colorado.edu" })
|
screen.getByRole("link", { name: "medlab@colorado.edu" }),
|
||||||
).toHaveAttribute("href", "mailto:medlab@colorado.edu");
|
).toHaveAttribute("href", "mailto:medlab@colorado.edu");
|
||||||
|
|
||||||
// Social media links
|
// Social media links
|
||||||
expect(
|
expect(
|
||||||
screen.getByRole("link", { name: "Follow us on Bluesky" })
|
screen.getByRole("link", { name: "Follow us on Bluesky" }),
|
||||||
).toBeInTheDocument();
|
).toBeInTheDocument();
|
||||||
expect(
|
expect(
|
||||||
screen.getByRole("link", { name: "Follow us on GitLab" })
|
screen.getByRole("link", { name: "Follow us on GitLab" }),
|
||||||
).toBeInTheDocument();
|
).toBeInTheDocument();
|
||||||
|
|
||||||
// Legal links
|
// Legal links
|
||||||
expect(
|
expect(
|
||||||
screen.getByRole("link", { name: "Privacy Policy" })
|
screen.getByRole("link", { name: "Privacy Policy" }),
|
||||||
).toBeInTheDocument();
|
).toBeInTheDocument();
|
||||||
expect(
|
expect(
|
||||||
screen.getByRole("link", { name: "Terms of Service" })
|
screen.getByRole("link", { name: "Terms of Service" }),
|
||||||
).toBeInTheDocument();
|
).toBeInTheDocument();
|
||||||
});
|
});
|
||||||
|
|
||||||
@@ -134,7 +136,7 @@ describe("Layout Integration", () => {
|
|||||||
<div>
|
<div>
|
||||||
<Header />
|
<Header />
|
||||||
<Footer />
|
<Footer />
|
||||||
</div>
|
</div>,
|
||||||
);
|
);
|
||||||
|
|
||||||
// Header should have banner role
|
// Header should have banner role
|
||||||
@@ -155,7 +157,7 @@ describe("Layout Integration", () => {
|
|||||||
<div>
|
<div>
|
||||||
<Header />
|
<Header />
|
||||||
<Footer />
|
<Footer />
|
||||||
</div>
|
</div>,
|
||||||
);
|
);
|
||||||
|
|
||||||
// Header should have responsive navigation elements
|
// Header should have responsive navigation elements
|
||||||
@@ -172,7 +174,7 @@ describe("Layout Integration", () => {
|
|||||||
<div>
|
<div>
|
||||||
<Header />
|
<Header />
|
||||||
<Footer />
|
<Footer />
|
||||||
</div>
|
</div>,
|
||||||
);
|
);
|
||||||
|
|
||||||
// Get all interactive elements
|
// Get all interactive elements
|
||||||
@@ -195,7 +197,7 @@ describe("Layout Integration", () => {
|
|||||||
<div>
|
<div>
|
||||||
<Header />
|
<Header />
|
||||||
<Footer />
|
<Footer />
|
||||||
</div>
|
</div>,
|
||||||
);
|
);
|
||||||
|
|
||||||
// Header provides main navigation
|
// Header provides main navigation
|
||||||
@@ -215,7 +217,7 @@ describe("Layout Integration", () => {
|
|||||||
<div>
|
<div>
|
||||||
<Header />
|
<Header />
|
||||||
<Footer />
|
<Footer />
|
||||||
</div>
|
</div>,
|
||||||
);
|
);
|
||||||
|
|
||||||
// Main navigation in header
|
// Main navigation in header
|
||||||
@@ -228,13 +230,13 @@ describe("Layout Integration", () => {
|
|||||||
(link) =>
|
(link) =>
|
||||||
link.textContent?.includes("Use cases") ||
|
link.textContent?.includes("Use cases") ||
|
||||||
link.textContent?.includes("Learn") ||
|
link.textContent?.includes("Learn") ||
|
||||||
link.textContent?.includes("About")
|
link.textContent?.includes("About"),
|
||||||
);
|
);
|
||||||
expect(navigationLinks.length).toBeGreaterThan(0);
|
expect(navigationLinks.length).toBeGreaterThan(0);
|
||||||
|
|
||||||
// Contact information in footer
|
// Contact information in footer
|
||||||
expect(
|
expect(
|
||||||
screen.getByRole("link", { name: "medlab@colorado.edu" })
|
screen.getByRole("link", { name: "medlab@colorado.edu" }),
|
||||||
).toBeInTheDocument();
|
).toBeInTheDocument();
|
||||||
});
|
});
|
||||||
});
|
});
|
||||||
|
|||||||
@@ -13,15 +13,15 @@ describe("Page Flow Integration", () => {
|
|||||||
|
|
||||||
// Hero Banner section
|
// Hero Banner section
|
||||||
expect(
|
expect(
|
||||||
screen.getByRole("heading", { name: "Collaborate" })
|
screen.getByRole("heading", { name: "Collaborate" }),
|
||||||
).toBeInTheDocument();
|
).toBeInTheDocument();
|
||||||
expect(
|
expect(
|
||||||
screen.getByRole("heading", { name: "with clarity" })
|
screen.getByRole("heading", { name: "with clarity" }),
|
||||||
).toBeInTheDocument();
|
).toBeInTheDocument();
|
||||||
expect(
|
expect(
|
||||||
screen.getByText(
|
screen.getByText(
|
||||||
"Help your community make important decisions in a way that reflects its unique values."
|
"Help your community make important decisions in a way that reflects its unique values.",
|
||||||
)
|
),
|
||||||
).toBeInTheDocument();
|
).toBeInTheDocument();
|
||||||
// Check that CTA button exists (multiple sizes for responsive design)
|
// Check that CTA button exists (multiple sizes for responsive design)
|
||||||
const ctaButtons = screen.getAllByRole("button", {
|
const ctaButtons = screen.getAllByRole("button", {
|
||||||
@@ -39,65 +39,65 @@ describe("Page Flow Integration", () => {
|
|||||||
|
|
||||||
// Numbered Cards section
|
// Numbered Cards section
|
||||||
expect(
|
expect(
|
||||||
screen.getByRole("heading", { name: /How CommunityRule works/ })
|
screen.getByRole("heading", { name: /How CommunityRule works/ }),
|
||||||
).toBeInTheDocument();
|
).toBeInTheDocument();
|
||||||
expect(
|
expect(
|
||||||
screen.getByText(
|
screen.getByText(
|
||||||
"Here's a quick overview of the process, from start to finish."
|
"Here's a quick overview of the process, from start to finish.",
|
||||||
)
|
),
|
||||||
).toBeInTheDocument();
|
).toBeInTheDocument();
|
||||||
expect(
|
expect(
|
||||||
screen.getByText("Document how your community makes decisions")
|
screen.getByText("Document how your community makes decisions"),
|
||||||
).toBeInTheDocument();
|
).toBeInTheDocument();
|
||||||
expect(
|
expect(
|
||||||
screen.getByText("Build an operating manual for a successful community")
|
screen.getByText("Build an operating manual for a successful community"),
|
||||||
).toBeInTheDocument();
|
).toBeInTheDocument();
|
||||||
expect(
|
expect(
|
||||||
screen.getByText(
|
screen.getByText(
|
||||||
"Get a link to your manual for your group to review and evolve"
|
"Get a link to your manual for your group to review and evolve",
|
||||||
)
|
),
|
||||||
).toBeInTheDocument();
|
).toBeInTheDocument();
|
||||||
|
|
||||||
// Rule Stack section
|
// Rule Stack section
|
||||||
expect(
|
expect(
|
||||||
screen.getByRole("heading", { name: "Consensus clusters" })
|
screen.getByRole("heading", { name: "Consensus clusters" }),
|
||||||
).toBeInTheDocument();
|
).toBeInTheDocument();
|
||||||
expect(
|
expect(
|
||||||
screen.getByRole("heading", { name: "Elected Board" })
|
screen.getByRole("heading", { name: "Elected Board" }),
|
||||||
).toBeInTheDocument();
|
).toBeInTheDocument();
|
||||||
expect(
|
expect(
|
||||||
screen.getByRole("heading", { name: "Consensus" })
|
screen.getByRole("heading", { name: "Consensus" }),
|
||||||
).toBeInTheDocument();
|
).toBeInTheDocument();
|
||||||
expect(
|
expect(
|
||||||
screen.getByRole("heading", { name: "Petition" })
|
screen.getByRole("heading", { name: "Petition" }),
|
||||||
).toBeInTheDocument();
|
).toBeInTheDocument();
|
||||||
|
|
||||||
// Feature Grid section
|
// Feature Grid section
|
||||||
expect(
|
expect(
|
||||||
screen.getByRole("heading", {
|
screen.getByRole("heading", {
|
||||||
name: "We've got your back, every step of the way",
|
name: "We've got your back, every step of the way",
|
||||||
})
|
}),
|
||||||
).toBeInTheDocument();
|
).toBeInTheDocument();
|
||||||
expect(
|
expect(
|
||||||
screen.getByText(
|
screen.getByText(
|
||||||
"Use our toolkit to improve, document, and evolve your organization."
|
"Use our toolkit to improve, document, and evolve your organization.",
|
||||||
)
|
),
|
||||||
).toBeInTheDocument();
|
).toBeInTheDocument();
|
||||||
|
|
||||||
// Quote Block section
|
// Quote Block section
|
||||||
expect(
|
expect(
|
||||||
screen.getByText(/The rules of decision-making must be open/)
|
screen.getByText(/The rules of decision-making must be open/),
|
||||||
).toBeInTheDocument();
|
).toBeInTheDocument();
|
||||||
|
|
||||||
// Ask Organizer section
|
// Ask Organizer section
|
||||||
expect(
|
expect(
|
||||||
screen.getByRole("heading", { name: "Still have questions?" })
|
screen.getByRole("heading", { name: "Still have questions?" }),
|
||||||
).toBeInTheDocument();
|
).toBeInTheDocument();
|
||||||
expect(
|
expect(
|
||||||
screen.getByText("Get answers from an experienced organizer")
|
screen.getByText("Get answers from an experienced organizer"),
|
||||||
).toBeInTheDocument();
|
).toBeInTheDocument();
|
||||||
expect(
|
expect(
|
||||||
screen.getByRole("link", { name: /Ask an organizer/i })
|
screen.getByRole("link", { name: /Ask an organizer/i }),
|
||||||
).toBeInTheDocument();
|
).toBeInTheDocument();
|
||||||
});
|
});
|
||||||
|
|
||||||
@@ -125,7 +125,7 @@ describe("Page Flow Integration", () => {
|
|||||||
|
|
||||||
// Check that all three cards are rendered
|
// Check that all three cards are rendered
|
||||||
const cards = screen.getAllByText(
|
const cards = screen.getAllByText(
|
||||||
/Document how your community|Build an operating manual|Get a link to your manual/
|
/Document how your community|Build an operating manual|Get a link to your manual/,
|
||||||
);
|
);
|
||||||
expect(cards).toHaveLength(3);
|
expect(cards).toHaveLength(3);
|
||||||
|
|
||||||
@@ -167,7 +167,7 @@ describe("Page Flow Integration", () => {
|
|||||||
|
|
||||||
// Check that main content is properly structured
|
// Check that main content is properly structured
|
||||||
const mainContent = screen.getByText(
|
const mainContent = screen.getByText(
|
||||||
/Help your community make important decisions/
|
/Help your community make important decisions/,
|
||||||
);
|
);
|
||||||
expect(mainContent).toBeInTheDocument();
|
expect(mainContent).toBeInTheDocument();
|
||||||
});
|
});
|
||||||
@@ -194,7 +194,7 @@ describe("Page Flow Integration", () => {
|
|||||||
// Verify the logical flow of information
|
// Verify the logical flow of information
|
||||||
// 1. Hero introduces the concept
|
// 1. Hero introduces the concept
|
||||||
expect(
|
expect(
|
||||||
screen.getByText(/Help your community make important decisions/)
|
screen.getByText(/Help your community make important decisions/),
|
||||||
).toBeInTheDocument();
|
).toBeInTheDocument();
|
||||||
|
|
||||||
// 2. How it works section explains the process
|
// 2. How it works section explains the process
|
||||||
@@ -205,12 +205,12 @@ describe("Page Flow Integration", () => {
|
|||||||
|
|
||||||
// 4. Features highlight benefits
|
// 4. Features highlight benefits
|
||||||
expect(
|
expect(
|
||||||
screen.getByText("We've got your back, every step of the way")
|
screen.getByText("We've got your back, every step of the way"),
|
||||||
).toBeInTheDocument();
|
).toBeInTheDocument();
|
||||||
|
|
||||||
// 5. Quote provides social proof
|
// 5. Quote provides social proof
|
||||||
expect(
|
expect(
|
||||||
screen.getByText(/The rules of decision-making must be open/)
|
screen.getByText(/The rules of decision-making must be open/),
|
||||||
).toBeInTheDocument();
|
).toBeInTheDocument();
|
||||||
|
|
||||||
// 6. Call to action for help
|
// 6. Call to action for help
|
||||||
|
|||||||
@@ -17,12 +17,12 @@ describe("User Journey Integration", () => {
|
|||||||
<Header />
|
<Header />
|
||||||
<Page />
|
<Page />
|
||||||
<Footer />
|
<Footer />
|
||||||
</div>
|
</div>,
|
||||||
);
|
);
|
||||||
|
|
||||||
// User sees the main value proposition
|
// User sees the main value proposition
|
||||||
expect(
|
expect(
|
||||||
screen.getByText(/Help your community make important decisions/)
|
screen.getByText(/Help your community make important decisions/),
|
||||||
).toBeInTheDocument();
|
).toBeInTheDocument();
|
||||||
|
|
||||||
// User clicks the main CTA to learn more
|
// User clicks the main CTA to learn more
|
||||||
@@ -64,7 +64,7 @@ describe("User Journey Integration", () => {
|
|||||||
<Header />
|
<Header />
|
||||||
<Page />
|
<Page />
|
||||||
<Footer />
|
<Footer />
|
||||||
</div>
|
</div>,
|
||||||
);
|
);
|
||||||
|
|
||||||
// User clicks on navigation links in header (check that they exist and are clickable)
|
// User clicks on navigation links in header (check that they exist and are clickable)
|
||||||
@@ -73,7 +73,7 @@ describe("User Journey Integration", () => {
|
|||||||
(link) =>
|
(link) =>
|
||||||
link.textContent?.includes("Use Cases") ||
|
link.textContent?.includes("Use Cases") ||
|
||||||
link.textContent?.includes("Learn") ||
|
link.textContent?.includes("Learn") ||
|
||||||
link.textContent?.includes("About")
|
link.textContent?.includes("About"),
|
||||||
);
|
);
|
||||||
|
|
||||||
// Test that navigation links are present and clickable
|
// Test that navigation links are present and clickable
|
||||||
@@ -90,7 +90,7 @@ describe("User Journey Integration", () => {
|
|||||||
// User scrolls to the bottom and sees the help section
|
// User scrolls to the bottom and sees the help section
|
||||||
expect(screen.getByText("Still have questions?")).toBeInTheDocument();
|
expect(screen.getByText("Still have questions?")).toBeInTheDocument();
|
||||||
expect(
|
expect(
|
||||||
screen.getByText("Get answers from an experienced organizer")
|
screen.getByText("Get answers from an experienced organizer"),
|
||||||
).toBeInTheDocument();
|
).toBeInTheDocument();
|
||||||
|
|
||||||
// User clicks the ask organizer button (it's actually a link, not a button)
|
// User clicks the ask organizer button (it's actually a link, not a button)
|
||||||
@@ -105,15 +105,15 @@ describe("User Journey Integration", () => {
|
|||||||
|
|
||||||
// User reads through the process steps
|
// User reads through the process steps
|
||||||
expect(
|
expect(
|
||||||
screen.getByText("Document how your community makes decisions")
|
screen.getByText("Document how your community makes decisions"),
|
||||||
).toBeInTheDocument();
|
).toBeInTheDocument();
|
||||||
expect(
|
expect(
|
||||||
screen.getByText("Build an operating manual for a successful community")
|
screen.getByText("Build an operating manual for a successful community"),
|
||||||
).toBeInTheDocument();
|
).toBeInTheDocument();
|
||||||
expect(
|
expect(
|
||||||
screen.getByText(
|
screen.getByText(
|
||||||
"Get a link to your manual for your group to review and evolve"
|
"Get a link to your manual for your group to review and evolve",
|
||||||
)
|
),
|
||||||
).toBeInTheDocument();
|
).toBeInTheDocument();
|
||||||
|
|
||||||
// User sees the step numbers
|
// User sees the step numbers
|
||||||
@@ -128,7 +128,7 @@ describe("User Journey Integration", () => {
|
|||||||
<Header />
|
<Header />
|
||||||
<Page />
|
<Page />
|
||||||
<Footer />
|
<Footer />
|
||||||
</div>
|
</div>,
|
||||||
);
|
);
|
||||||
|
|
||||||
// User finds contact email in footer
|
// User finds contact email in footer
|
||||||
@@ -153,17 +153,17 @@ describe("User Journey Integration", () => {
|
|||||||
|
|
||||||
// User sees the features section
|
// User sees the features section
|
||||||
expect(
|
expect(
|
||||||
screen.getByText("We've got your back, every step of the way")
|
screen.getByText("We've got your back, every step of the way"),
|
||||||
).toBeInTheDocument();
|
).toBeInTheDocument();
|
||||||
expect(
|
expect(
|
||||||
screen.getByText(
|
screen.getByText(
|
||||||
"Use our toolkit to improve, document, and evolve your organization."
|
"Use our toolkit to improve, document, and evolve your organization.",
|
||||||
)
|
),
|
||||||
).toBeInTheDocument();
|
).toBeInTheDocument();
|
||||||
|
|
||||||
// User sees the testimonial/quote (check for the actual quote content)
|
// User sees the testimonial/quote (check for the actual quote content)
|
||||||
expect(
|
expect(
|
||||||
screen.getByText(/The rules of decision-making must be open/)
|
screen.getByText(/The rules of decision-making must be open/),
|
||||||
).toBeInTheDocument();
|
).toBeInTheDocument();
|
||||||
});
|
});
|
||||||
|
|
||||||
@@ -173,7 +173,7 @@ describe("User Journey Integration", () => {
|
|||||||
<div>
|
<div>
|
||||||
<Page />
|
<Page />
|
||||||
<Footer />
|
<Footer />
|
||||||
</div>
|
</div>,
|
||||||
);
|
);
|
||||||
|
|
||||||
// User sees the logo wall with partner logos (check for any logo images)
|
// User sees the logo wall with partner logos (check for any logo images)
|
||||||
@@ -185,7 +185,7 @@ describe("User Journey Integration", () => {
|
|||||||
img.alt?.includes("Metagov") ||
|
img.alt?.includes("Metagov") ||
|
||||||
img.alt?.includes("Open Civics") ||
|
img.alt?.includes("Open Civics") ||
|
||||||
img.alt?.includes("Mutual Aid CO") ||
|
img.alt?.includes("Mutual Aid CO") ||
|
||||||
img.alt?.includes("CU Boulder")
|
img.alt?.includes("CU Boulder"),
|
||||||
);
|
);
|
||||||
expect(partnerLogos.length).toBeGreaterThan(0);
|
expect(partnerLogos.length).toBeGreaterThan(0);
|
||||||
|
|
||||||
@@ -203,7 +203,7 @@ describe("User Journey Integration", () => {
|
|||||||
<Header />
|
<Header />
|
||||||
<Page />
|
<Page />
|
||||||
<Footer />
|
<Footer />
|
||||||
</div>
|
</div>,
|
||||||
);
|
);
|
||||||
|
|
||||||
// 1. User discovers the application
|
// 1. User discovers the application
|
||||||
@@ -218,12 +218,12 @@ describe("User Journey Integration", () => {
|
|||||||
|
|
||||||
// 4. User sees features and benefits
|
// 4. User sees features and benefits
|
||||||
expect(
|
expect(
|
||||||
screen.getByText("We've got your back, every step of the way")
|
screen.getByText("We've got your back, every step of the way"),
|
||||||
).toBeInTheDocument();
|
).toBeInTheDocument();
|
||||||
|
|
||||||
// 5. User sees social proof
|
// 5. User sees social proof
|
||||||
expect(
|
expect(
|
||||||
screen.getByText(/The rules of decision-making must be open/)
|
screen.getByText(/The rules of decision-making must be open/),
|
||||||
).toBeInTheDocument();
|
).toBeInTheDocument();
|
||||||
|
|
||||||
// 6. User can take action
|
// 6. User can take action
|
||||||
@@ -243,7 +243,7 @@ describe("User Journey Integration", () => {
|
|||||||
<Header />
|
<Header />
|
||||||
<Page />
|
<Page />
|
||||||
<Footer />
|
<Footer />
|
||||||
</div>
|
</div>,
|
||||||
);
|
);
|
||||||
|
|
||||||
// Header navigation
|
// Header navigation
|
||||||
@@ -256,7 +256,7 @@ describe("User Journey Integration", () => {
|
|||||||
(link) =>
|
(link) =>
|
||||||
link.textContent?.includes("Use cases") ||
|
link.textContent?.includes("Use cases") ||
|
||||||
link.textContent?.includes("Learn") ||
|
link.textContent?.includes("Learn") ||
|
||||||
link.textContent?.includes("About")
|
link.textContent?.includes("About"),
|
||||||
);
|
);
|
||||||
expect(navigationLinks.length).toBeGreaterThan(0);
|
expect(navigationLinks.length).toBeGreaterThan(0);
|
||||||
|
|
||||||
@@ -273,7 +273,7 @@ describe("User Journey Integration", () => {
|
|||||||
<Header />
|
<Header />
|
||||||
<Page />
|
<Page />
|
||||||
<Footer />
|
<Footer />
|
||||||
</div>
|
</div>,
|
||||||
);
|
);
|
||||||
|
|
||||||
// Test all interactive elements
|
// Test all interactive elements
|
||||||
|
|||||||
+1
-1
@@ -1,2 +1,2 @@
|
|||||||
import { setupServer } from 'msw/node';
|
import { setupServer } from "msw/node";
|
||||||
export const server = setupServer(); // add handlers per test as needed
|
export const server = setupServer(); // add handlers per test as needed
|
||||||
|
|||||||
@@ -61,7 +61,7 @@ class PerformanceMonitor {
|
|||||||
|
|
||||||
if (value > threshold) {
|
if (value > threshold) {
|
||||||
console.warn(
|
console.warn(
|
||||||
`⚠️ Performance threshold exceeded: ${name} = ${value}ms (threshold: ${threshold}ms)`
|
`⚠️ Performance threshold exceeded: ${name} = ${value}ms (threshold: ${threshold}ms)`,
|
||||||
);
|
);
|
||||||
return false;
|
return false;
|
||||||
}
|
}
|
||||||
@@ -78,7 +78,7 @@ class PerformanceMonitor {
|
|||||||
const regressionThreshold = baseline * 1.2; // 20% regression threshold
|
const regressionThreshold = baseline * 1.2; // 20% regression threshold
|
||||||
if (value > regressionThreshold) {
|
if (value > regressionThreshold) {
|
||||||
console.error(
|
console.error(
|
||||||
`🚨 Performance regression detected: ${name} = ${value}ms (baseline: ${baseline}ms)`
|
`🚨 Performance regression detected: ${name} = ${value}ms (baseline: ${baseline}ms)`,
|
||||||
);
|
);
|
||||||
return false;
|
return false;
|
||||||
}
|
}
|
||||||
|
|||||||
@@ -16,25 +16,25 @@ describe("AskOrganizer Component", () => {
|
|||||||
description="Our organizers can help you build better communities"
|
description="Our organizers can help you build better communities"
|
||||||
buttonText="Contact an organizer"
|
buttonText="Contact an organizer"
|
||||||
buttonHref="/contact"
|
buttonHref="/contact"
|
||||||
/>
|
/>,
|
||||||
);
|
);
|
||||||
|
|
||||||
expect(
|
expect(
|
||||||
screen.getByRole("heading", { name: "Need help organizing?" })
|
screen.getByRole("heading", { name: "Need help organizing?" }),
|
||||||
).toBeInTheDocument();
|
).toBeInTheDocument();
|
||||||
expect(
|
expect(
|
||||||
screen.getByRole("heading", { name: "Get expert guidance" })
|
screen.getByRole("heading", { name: "Get expert guidance" }),
|
||||||
).toBeInTheDocument();
|
).toBeInTheDocument();
|
||||||
// The description text might not be rendered or might be different
|
// The description text might not be rendered or might be different
|
||||||
// Just verify the component renders without error
|
// Just verify the component renders without error
|
||||||
expect(
|
expect(
|
||||||
screen.getByRole("heading", { name: "Need help organizing?" })
|
screen.getByRole("heading", { name: "Need help organizing?" }),
|
||||||
).toBeInTheDocument();
|
).toBeInTheDocument();
|
||||||
// Button renders as a link when href is provided
|
// Button renders as a link when href is provided
|
||||||
expect(
|
expect(
|
||||||
screen.getByRole("link", {
|
screen.getByRole("link", {
|
||||||
name: "Contact an organizer - Contact an organizer for help",
|
name: "Contact an organizer - Contact an organizer for help",
|
||||||
})
|
}),
|
||||||
).toBeInTheDocument();
|
).toBeInTheDocument();
|
||||||
});
|
});
|
||||||
|
|
||||||
@@ -45,13 +45,13 @@ describe("AskOrganizer Component", () => {
|
|||||||
expect(
|
expect(
|
||||||
screen.getByRole("link", {
|
screen.getByRole("link", {
|
||||||
name: "Ask an organizer - Contact an organizer for help",
|
name: "Ask an organizer - Contact an organizer for help",
|
||||||
})
|
}),
|
||||||
).toBeInTheDocument();
|
).toBeInTheDocument();
|
||||||
});
|
});
|
||||||
|
|
||||||
test("renders with custom className", () => {
|
test("renders with custom className", () => {
|
||||||
render(
|
render(
|
||||||
<AskOrganizer title="Test" subtitle="Test" className="custom-class" />
|
<AskOrganizer title="Test" subtitle="Test" className="custom-class" />,
|
||||||
);
|
);
|
||||||
|
|
||||||
const section = document.querySelector("section");
|
const section = document.querySelector("section");
|
||||||
@@ -60,7 +60,7 @@ describe("AskOrganizer Component", () => {
|
|||||||
|
|
||||||
test("renders different variants", () => {
|
test("renders different variants", () => {
|
||||||
const { rerender } = render(
|
const { rerender } = render(
|
||||||
<AskOrganizer title="Test" subtitle="Test" variant="centered" />
|
<AskOrganizer title="Test" subtitle="Test" variant="centered" />,
|
||||||
);
|
);
|
||||||
|
|
||||||
// Centered variant should have center alignment
|
// Centered variant should have center alignment
|
||||||
@@ -70,7 +70,7 @@ describe("AskOrganizer Component", () => {
|
|||||||
expect(container).toBeInTheDocument();
|
expect(container).toBeInTheDocument();
|
||||||
|
|
||||||
rerender(
|
rerender(
|
||||||
<AskOrganizer title="Test" subtitle="Test" variant="left-aligned" />
|
<AskOrganizer title="Test" subtitle="Test" variant="left-aligned" />,
|
||||||
);
|
);
|
||||||
|
|
||||||
// Left-aligned variant should have left alignment
|
// Left-aligned variant should have left alignment
|
||||||
@@ -86,19 +86,19 @@ describe("AskOrganizer Component", () => {
|
|||||||
title="Ask Title"
|
title="Ask Title"
|
||||||
subtitle="Ask Subtitle"
|
subtitle="Ask Subtitle"
|
||||||
description="Ask Description"
|
description="Ask Description"
|
||||||
/>
|
/>,
|
||||||
);
|
);
|
||||||
|
|
||||||
expect(
|
expect(
|
||||||
screen.getByRole("heading", { name: "Ask Title" })
|
screen.getByRole("heading", { name: "Ask Title" }),
|
||||||
).toBeInTheDocument();
|
).toBeInTheDocument();
|
||||||
expect(
|
expect(
|
||||||
screen.getByRole("heading", { name: "Ask Subtitle" })
|
screen.getByRole("heading", { name: "Ask Subtitle" }),
|
||||||
).toBeInTheDocument();
|
).toBeInTheDocument();
|
||||||
// Description might not be rendered if not provided to ContentLockup
|
// Description might not be rendered if not provided to ContentLockup
|
||||||
// Just verify the component renders without error
|
// Just verify the component renders without error
|
||||||
expect(
|
expect(
|
||||||
screen.getByRole("heading", { name: "Ask Title" })
|
screen.getByRole("heading", { name: "Ask Title" }),
|
||||||
).toBeInTheDocument();
|
).toBeInTheDocument();
|
||||||
});
|
});
|
||||||
|
|
||||||
@@ -109,7 +109,7 @@ describe("AskOrganizer Component", () => {
|
|||||||
subtitle="Test"
|
subtitle="Test"
|
||||||
buttonText="Custom Button"
|
buttonText="Custom Button"
|
||||||
buttonHref="/custom"
|
buttonHref="/custom"
|
||||||
/>
|
/>,
|
||||||
);
|
);
|
||||||
|
|
||||||
const button = screen.getByRole("link", {
|
const button = screen.getByRole("link", {
|
||||||
@@ -128,7 +128,7 @@ describe("AskOrganizer Component", () => {
|
|||||||
title="Test"
|
title="Test"
|
||||||
subtitle="Test"
|
subtitle="Test"
|
||||||
onContactClick={onContactClick}
|
onContactClick={onContactClick}
|
||||||
/>
|
/>,
|
||||||
);
|
);
|
||||||
|
|
||||||
const button = screen.getByRole("link", {
|
const button = screen.getByRole("link", {
|
||||||
@@ -172,13 +172,13 @@ describe("AskOrganizer Component", () => {
|
|||||||
|
|
||||||
test("renders with proper accessibility attributes", () => {
|
test("renders with proper accessibility attributes", () => {
|
||||||
render(
|
render(
|
||||||
<AskOrganizer title="Test" subtitle="Test" buttonText="Custom Button" />
|
<AskOrganizer title="Test" subtitle="Test" buttonText="Custom Button" />,
|
||||||
);
|
);
|
||||||
|
|
||||||
const section = document.querySelector("section");
|
const section = document.querySelector("section");
|
||||||
expect(section).toHaveAttribute(
|
expect(section).toHaveAttribute(
|
||||||
"aria-labelledby",
|
"aria-labelledby",
|
||||||
"ask-organizer-headline"
|
"ask-organizer-headline",
|
||||||
);
|
);
|
||||||
expect(section).toHaveAttribute("tabIndex", "-1");
|
expect(section).toHaveAttribute("tabIndex", "-1");
|
||||||
|
|
||||||
@@ -187,7 +187,7 @@ describe("AskOrganizer Component", () => {
|
|||||||
});
|
});
|
||||||
expect(button).toHaveAttribute(
|
expect(button).toHaveAttribute(
|
||||||
"aria-label",
|
"aria-label",
|
||||||
"Custom Button - Contact an organizer for help"
|
"Custom Button - Contact an organizer for help",
|
||||||
);
|
);
|
||||||
});
|
});
|
||||||
|
|
||||||
@@ -197,7 +197,7 @@ describe("AskOrganizer Component", () => {
|
|||||||
const section = document.querySelector("section");
|
const section = document.querySelector("section");
|
||||||
expect(section).toHaveClass(
|
expect(section).toHaveClass(
|
||||||
"py-[var(--spacing-scale-032)]",
|
"py-[var(--spacing-scale-032)]",
|
||||||
"px-[var(--spacing-scale-032)]"
|
"px-[var(--spacing-scale-032)]",
|
||||||
);
|
);
|
||||||
});
|
});
|
||||||
|
|
||||||
@@ -207,7 +207,7 @@ describe("AskOrganizer Component", () => {
|
|||||||
const section = document.querySelector("section");
|
const section = document.querySelector("section");
|
||||||
expect(section).toHaveClass(
|
expect(section).toHaveClass(
|
||||||
"md:py-[var(--spacing-scale-096)]",
|
"md:py-[var(--spacing-scale-096)]",
|
||||||
"md:px-[var(--spacing-scale-064)]"
|
"md:px-[var(--spacing-scale-064)]",
|
||||||
);
|
);
|
||||||
});
|
});
|
||||||
|
|
||||||
@@ -224,18 +224,18 @@ describe("AskOrganizer Component", () => {
|
|||||||
|
|
||||||
test("applies variant-specific styling", () => {
|
test("applies variant-specific styling", () => {
|
||||||
const { rerender } = render(
|
const { rerender } = render(
|
||||||
<AskOrganizer title="Test" subtitle="Test" variant="compact" />
|
<AskOrganizer title="Test" subtitle="Test" variant="compact" />,
|
||||||
);
|
);
|
||||||
|
|
||||||
// Compact variant should have different padding
|
// Compact variant should have different padding
|
||||||
const section = screen.getByRole("region");
|
const section = screen.getByRole("region");
|
||||||
expect(section).toHaveClass(
|
expect(section).toHaveClass(
|
||||||
"py-[var(--spacing-scale-016)]",
|
"py-[var(--spacing-scale-016)]",
|
||||||
"px-[var(--spacing-scale-016)]"
|
"px-[var(--spacing-scale-016)]",
|
||||||
);
|
);
|
||||||
|
|
||||||
rerender(
|
rerender(
|
||||||
<AskOrganizer title="Test" subtitle="Test" variant="left-aligned" />
|
<AskOrganizer title="Test" subtitle="Test" variant="left-aligned" />,
|
||||||
);
|
);
|
||||||
|
|
||||||
// Left-aligned variant should have left alignment
|
// Left-aligned variant should have left alignment
|
||||||
@@ -251,7 +251,7 @@ describe("AskOrganizer Component", () => {
|
|||||||
});
|
});
|
||||||
expect(button).toHaveClass(
|
expect(button).toHaveClass(
|
||||||
"xl:!px-[var(--spacing-scale-020)]",
|
"xl:!px-[var(--spacing-scale-020)]",
|
||||||
"xl:!py-[var(--spacing-scale-012)]"
|
"xl:!py-[var(--spacing-scale-012)]",
|
||||||
);
|
);
|
||||||
});
|
});
|
||||||
|
|
||||||
@@ -266,7 +266,7 @@ describe("AskOrganizer Component", () => {
|
|||||||
expect(
|
expect(
|
||||||
screen.getByRole("link", {
|
screen.getByRole("link", {
|
||||||
name: "Ask an organizer - Contact an organizer for help",
|
name: "Ask an organizer - Contact an organizer for help",
|
||||||
})
|
}),
|
||||||
).toBeInTheDocument();
|
).toBeInTheDocument();
|
||||||
});
|
});
|
||||||
|
|
||||||
|
|||||||
@@ -35,7 +35,7 @@ describe("Button Component", () => {
|
|||||||
const { rerender } = render(<Button variant="default">Default</Button>);
|
const { rerender } = render(<Button variant="default">Default</Button>);
|
||||||
let button = screen.getByRole("button", { name: "Default" });
|
let button = screen.getByRole("button", { name: "Default" });
|
||||||
expect(button.className).toContain(
|
expect(button.className).toContain(
|
||||||
"bg-[var(--color-surface-inverse-primary)]"
|
"bg-[var(--color-surface-inverse-primary)]",
|
||||||
);
|
);
|
||||||
|
|
||||||
rerender(<Button variant="secondary">Secondary</Button>);
|
rerender(<Button variant="secondary">Secondary</Button>);
|
||||||
@@ -79,10 +79,10 @@ describe("Button Component", () => {
|
|||||||
|
|
||||||
// Check that design tokens are applied
|
// Check that design tokens are applied
|
||||||
expect(button.className).toContain(
|
expect(button.className).toContain(
|
||||||
"rounded-[var(--radius-measures-radius-full)]"
|
"rounded-[var(--radius-measures-radius-full)]",
|
||||||
);
|
);
|
||||||
expect(button.className).toContain(
|
expect(button.className).toContain(
|
||||||
"bg-[var(--color-surface-inverse-primary)]"
|
"bg-[var(--color-surface-inverse-primary)]",
|
||||||
);
|
);
|
||||||
});
|
});
|
||||||
|
|
||||||
@@ -103,7 +103,7 @@ describe("Button Component", () => {
|
|||||||
render(
|
render(
|
||||||
<Button href="/test" disabled>
|
<Button href="/test" disabled>
|
||||||
Disabled Link
|
Disabled Link
|
||||||
</Button>
|
</Button>,
|
||||||
);
|
);
|
||||||
const button = screen.getByRole("button", { name: "Disabled Link" });
|
const button = screen.getByRole("button", { name: "Disabled Link" });
|
||||||
expect(button).toBeInTheDocument();
|
expect(button).toBeInTheDocument();
|
||||||
|
|||||||
@@ -13,22 +13,22 @@ describe("FeatureGrid Component", () => {
|
|||||||
<FeatureGrid
|
<FeatureGrid
|
||||||
title="Feature Tools"
|
title="Feature Tools"
|
||||||
subtitle="Everything you need to build better communities"
|
subtitle="Everything you need to build better communities"
|
||||||
/>
|
/>,
|
||||||
);
|
);
|
||||||
|
|
||||||
expect(
|
expect(
|
||||||
screen.getByRole("heading", { name: "Feature Tools" })
|
screen.getByRole("heading", { name: "Feature Tools" }),
|
||||||
).toBeInTheDocument();
|
).toBeInTheDocument();
|
||||||
expect(
|
expect(
|
||||||
screen.getByRole("heading", {
|
screen.getByRole("heading", {
|
||||||
name: "Everything you need to build better communities",
|
name: "Everything you need to build better communities",
|
||||||
})
|
}),
|
||||||
).toBeInTheDocument();
|
).toBeInTheDocument();
|
||||||
});
|
});
|
||||||
|
|
||||||
test("renders with custom className", () => {
|
test("renders with custom className", () => {
|
||||||
render(
|
render(
|
||||||
<FeatureGrid title="Test" subtitle="Test" className="custom-class" />
|
<FeatureGrid title="Test" subtitle="Test" className="custom-class" />,
|
||||||
);
|
);
|
||||||
|
|
||||||
const section = document.querySelector("section");
|
const section = document.querySelector("section");
|
||||||
@@ -40,16 +40,16 @@ describe("FeatureGrid Component", () => {
|
|||||||
|
|
||||||
// Check for all four MiniCard components
|
// Check for all four MiniCard components
|
||||||
expect(
|
expect(
|
||||||
screen.getByRole("link", { name: "Decision-making support tools" })
|
screen.getByRole("link", { name: "Decision-making support tools" }),
|
||||||
).toBeInTheDocument();
|
).toBeInTheDocument();
|
||||||
expect(
|
expect(
|
||||||
screen.getByRole("link", { name: "Values alignment exercises" })
|
screen.getByRole("link", { name: "Values alignment exercises" }),
|
||||||
).toBeInTheDocument();
|
).toBeInTheDocument();
|
||||||
expect(
|
expect(
|
||||||
screen.getByRole("link", { name: "Membership guidance resources" })
|
screen.getByRole("link", { name: "Membership guidance resources" }),
|
||||||
).toBeInTheDocument();
|
).toBeInTheDocument();
|
||||||
expect(
|
expect(
|
||||||
screen.getByRole("link", { name: "Conflict resolution tools" })
|
screen.getByRole("link", { name: "Conflict resolution tools" }),
|
||||||
).toBeInTheDocument();
|
).toBeInTheDocument();
|
||||||
});
|
});
|
||||||
|
|
||||||
@@ -57,13 +57,13 @@ describe("FeatureGrid Component", () => {
|
|||||||
render(<FeatureGrid title="Feature Title" subtitle="Feature Subtitle" />);
|
render(<FeatureGrid title="Feature Title" subtitle="Feature Subtitle" />);
|
||||||
|
|
||||||
expect(
|
expect(
|
||||||
screen.getByRole("heading", { name: "Feature Title" })
|
screen.getByRole("heading", { name: "Feature Title" }),
|
||||||
).toBeInTheDocument();
|
).toBeInTheDocument();
|
||||||
expect(
|
expect(
|
||||||
screen.getByRole("heading", { name: "Feature Subtitle" })
|
screen.getByRole("heading", { name: "Feature Subtitle" }),
|
||||||
).toBeInTheDocument();
|
).toBeInTheDocument();
|
||||||
expect(
|
expect(
|
||||||
screen.getByRole("link", { name: "Learn more" })
|
screen.getByRole("link", { name: "Learn more" }),
|
||||||
).toBeInTheDocument();
|
).toBeInTheDocument();
|
||||||
});
|
});
|
||||||
|
|
||||||
@@ -130,7 +130,7 @@ describe("FeatureGrid Component", () => {
|
|||||||
|
|
||||||
// Should render default MiniCards
|
// Should render default MiniCards
|
||||||
expect(
|
expect(
|
||||||
screen.getByRole("link", { name: "Decision-making support tools" })
|
screen.getByRole("link", { name: "Decision-making support tools" }),
|
||||||
).toBeInTheDocument();
|
).toBeInTheDocument();
|
||||||
});
|
});
|
||||||
|
|
||||||
|
|||||||
+15
-15
@@ -27,7 +27,7 @@ describe("Footer", () => {
|
|||||||
expect(schemaData.email).toBe("medlab@colorado.edu");
|
expect(schemaData.email).toBe("medlab@colorado.edu");
|
||||||
expect(schemaData.url).toBe("https://communityrule.com");
|
expect(schemaData.url).toBe("https://communityrule.com");
|
||||||
expect(schemaData.sameAs).toContain(
|
expect(schemaData.sameAs).toContain(
|
||||||
"https://bsky.app/profile/medlabboulder"
|
"https://bsky.app/profile/medlabboulder",
|
||||||
);
|
);
|
||||||
expect(schemaData.sameAs).toContain("https://gitlab.com/medlabboulder");
|
expect(schemaData.sameAs).toContain("https://gitlab.com/medlabboulder");
|
||||||
});
|
});
|
||||||
@@ -36,7 +36,7 @@ describe("Footer", () => {
|
|||||||
render(<Footer />);
|
render(<Footer />);
|
||||||
|
|
||||||
expect(
|
expect(
|
||||||
screen.getAllByText("Media Economies Design Lab").length
|
screen.getAllByText("Media Economies Design Lab").length,
|
||||||
).toBeGreaterThan(0);
|
).toBeGreaterThan(0);
|
||||||
|
|
||||||
const emailLinks = screen.getAllByRole("link", {
|
const emailLinks = screen.getAllByRole("link", {
|
||||||
@@ -86,13 +86,13 @@ describe("Footer", () => {
|
|||||||
render(<Footer />);
|
render(<Footer />);
|
||||||
|
|
||||||
expect(
|
expect(
|
||||||
screen.getAllByRole("link", { name: "Use cases" }).length
|
screen.getAllByRole("link", { name: "Use cases" }).length,
|
||||||
).toBeGreaterThan(0);
|
).toBeGreaterThan(0);
|
||||||
expect(
|
expect(
|
||||||
screen.getAllByRole("link", { name: "Learn" }).length
|
screen.getAllByRole("link", { name: "Learn" }).length,
|
||||||
).toBeGreaterThan(0);
|
).toBeGreaterThan(0);
|
||||||
expect(
|
expect(
|
||||||
screen.getAllByRole("link", { name: "About" }).length
|
screen.getAllByRole("link", { name: "About" }).length,
|
||||||
).toBeGreaterThan(0);
|
).toBeGreaterThan(0);
|
||||||
});
|
});
|
||||||
|
|
||||||
@@ -100,13 +100,13 @@ describe("Footer", () => {
|
|||||||
render(<Footer />);
|
render(<Footer />);
|
||||||
|
|
||||||
expect(
|
expect(
|
||||||
screen.getAllByRole("link", { name: "Privacy Policy" }).length
|
screen.getAllByRole("link", { name: "Privacy Policy" }).length,
|
||||||
).toBeGreaterThan(0);
|
).toBeGreaterThan(0);
|
||||||
expect(
|
expect(
|
||||||
screen.getAllByRole("link", { name: "Terms of Service" }).length
|
screen.getAllByRole("link", { name: "Terms of Service" }).length,
|
||||||
).toBeGreaterThan(0);
|
).toBeGreaterThan(0);
|
||||||
expect(
|
expect(
|
||||||
screen.getAllByRole("link", { name: "Cookies Settings" }).length
|
screen.getAllByRole("link", { name: "Cookies Settings" }).length,
|
||||||
).toBeGreaterThan(0);
|
).toBeGreaterThan(0);
|
||||||
});
|
});
|
||||||
|
|
||||||
@@ -114,7 +114,7 @@ describe("Footer", () => {
|
|||||||
render(<Footer />);
|
render(<Footer />);
|
||||||
|
|
||||||
expect(screen.getAllByText("© All right reserved").length).toBeGreaterThan(
|
expect(screen.getAllByText("© All right reserved").length).toBeGreaterThan(
|
||||||
0
|
0,
|
||||||
);
|
);
|
||||||
});
|
});
|
||||||
|
|
||||||
@@ -123,7 +123,7 @@ describe("Footer", () => {
|
|||||||
|
|
||||||
// Check that logo containers exist for different breakpoints
|
// Check that logo containers exist for different breakpoints
|
||||||
const logoContainers = document.querySelectorAll(
|
const logoContainers = document.querySelectorAll(
|
||||||
'[class*="block sm:hidden"], [class*="hidden sm:block lg:hidden"], [class*="hidden lg:block"]'
|
'[class*="block sm:hidden"], [class*="hidden sm:block lg:hidden"], [class*="hidden lg:block"]',
|
||||||
);
|
);
|
||||||
expect(logoContainers.length).toBeGreaterThan(0);
|
expect(logoContainers.length).toBeGreaterThan(0);
|
||||||
});
|
});
|
||||||
@@ -147,7 +147,7 @@ describe("Footer", () => {
|
|||||||
|
|
||||||
// The Separator component should be rendered (it uses a div with border, not hr)
|
// The Separator component should be rendered (it uses a div with border, not hr)
|
||||||
const separator = document.querySelector(
|
const separator = document.querySelector(
|
||||||
".bg-\\[var\\(--border-color-default-secondary\\)\\]"
|
".bg-\\[var\\(--border-color-default-secondary\\)\\]",
|
||||||
);
|
);
|
||||||
expect(separator).toBeInTheDocument();
|
expect(separator).toBeInTheDocument();
|
||||||
});
|
});
|
||||||
@@ -263,10 +263,10 @@ describe("Footer", () => {
|
|||||||
expect(emailLink).toHaveClass("focus:ring-2");
|
expect(emailLink).toHaveClass("focus:ring-2");
|
||||||
expect(emailLink).toHaveClass("focus:ring-offset-2");
|
expect(emailLink).toHaveClass("focus:ring-offset-2");
|
||||||
expect(emailLink).toHaveClass(
|
expect(emailLink).toHaveClass(
|
||||||
"focus:ring-[var(--color-content-default-primary)]"
|
"focus:ring-[var(--color-content-default-primary)]",
|
||||||
);
|
);
|
||||||
expect(emailLink).toHaveClass(
|
expect(emailLink).toHaveClass(
|
||||||
"focus:ring-offset-[var(--color-surface-default-primary)]"
|
"focus:ring-offset-[var(--color-surface-default-primary)]",
|
||||||
);
|
);
|
||||||
});
|
});
|
||||||
|
|
||||||
@@ -276,10 +276,10 @@ describe("Footer", () => {
|
|||||||
expect(link).toHaveClass("focus:ring-2");
|
expect(link).toHaveClass("focus:ring-2");
|
||||||
expect(link).toHaveClass("focus:ring-offset-2");
|
expect(link).toHaveClass("focus:ring-offset-2");
|
||||||
expect(link).toHaveClass(
|
expect(link).toHaveClass(
|
||||||
"focus:ring-[var(--color-content-default-primary)]"
|
"focus:ring-[var(--color-content-default-primary)]",
|
||||||
);
|
);
|
||||||
expect(link).toHaveClass(
|
expect(link).toHaveClass(
|
||||||
"focus:ring-offset-[var(--color-surface-default-primary)]"
|
"focus:ring-offset-[var(--color-surface-default-primary)]",
|
||||||
);
|
);
|
||||||
});
|
});
|
||||||
});
|
});
|
||||||
|
|||||||
+10
-10
@@ -22,14 +22,14 @@ describe("Header", () => {
|
|||||||
|
|
||||||
// Check main header structure - use container to scope the search
|
// Check main header structure - use container to scope the search
|
||||||
const header = container.querySelector(
|
const header = container.querySelector(
|
||||||
'[role="banner"][aria-label="Main navigation header"]'
|
'[role="banner"][aria-label="Main navigation header"]',
|
||||||
);
|
);
|
||||||
expect(header).toBeInTheDocument();
|
expect(header).toBeInTheDocument();
|
||||||
expect(header).toHaveAttribute("aria-label", "Main navigation header");
|
expect(header).toHaveAttribute("aria-label", "Main navigation header");
|
||||||
|
|
||||||
// Check navigation - use container to scope the search
|
// Check navigation - use container to scope the search
|
||||||
const nav = container.querySelector(
|
const nav = container.querySelector(
|
||||||
'[role="navigation"][aria-label="Main navigation"]'
|
'[role="navigation"][aria-label="Main navigation"]',
|
||||||
);
|
);
|
||||||
expect(nav).toBeInTheDocument();
|
expect(nav).toBeInTheDocument();
|
||||||
expect(nav).toHaveAttribute("aria-label", "Main navigation");
|
expect(nav).toHaveAttribute("aria-label", "Main navigation");
|
||||||
@@ -41,15 +41,15 @@ describe("Header", () => {
|
|||||||
// Check all navigation items have proper aria-labels - use menuitem role since they're in a menubar
|
// Check all navigation items have proper aria-labels - use menuitem role since they're in a menubar
|
||||||
expect(
|
expect(
|
||||||
screen.getAllByRole("menuitem", { name: "Navigate to Use cases page" })
|
screen.getAllByRole("menuitem", { name: "Navigate to Use cases page" })
|
||||||
.length
|
.length,
|
||||||
).toBeGreaterThan(0);
|
).toBeGreaterThan(0);
|
||||||
expect(
|
expect(
|
||||||
screen.getAllByRole("menuitem", { name: "Navigate to Learn page" })
|
screen.getAllByRole("menuitem", { name: "Navigate to Learn page" })
|
||||||
.length
|
.length,
|
||||||
).toBeGreaterThan(0);
|
).toBeGreaterThan(0);
|
||||||
expect(
|
expect(
|
||||||
screen.getAllByRole("menuitem", { name: "Navigate to About page" })
|
screen.getAllByRole("menuitem", { name: "Navigate to About page" })
|
||||||
.length
|
.length,
|
||||||
).toBeGreaterThan(0);
|
).toBeGreaterThan(0);
|
||||||
});
|
});
|
||||||
});
|
});
|
||||||
@@ -59,7 +59,7 @@ describe("Header", () => {
|
|||||||
render(<Header onToggle={mockOnToggle} />);
|
render(<Header onToggle={mockOnToggle} />);
|
||||||
|
|
||||||
const script = document.querySelector(
|
const script = document.querySelector(
|
||||||
'script[type="application/ld+json"]'
|
'script[type="application/ld+json"]',
|
||||||
);
|
);
|
||||||
expect(script).toBeInTheDocument();
|
expect(script).toBeInTheDocument();
|
||||||
|
|
||||||
@@ -296,7 +296,7 @@ describe("Header", () => {
|
|||||||
(img) =>
|
(img) =>
|
||||||
img.alt === "Avatar 1" ||
|
img.alt === "Avatar 1" ||
|
||||||
img.alt === "Avatar 2" ||
|
img.alt === "Avatar 2" ||
|
||||||
img.alt === "Avatar 3"
|
img.alt === "Avatar 3",
|
||||||
);
|
);
|
||||||
expect(avatarImages.length).toBeGreaterThan(0);
|
expect(avatarImages.length).toBeGreaterThan(0);
|
||||||
});
|
});
|
||||||
@@ -324,17 +324,17 @@ describe("Header", () => {
|
|||||||
const { container } = render(<Header onToggle={mockOnToggle} />);
|
const { container } = render(<Header onToggle={mockOnToggle} />);
|
||||||
|
|
||||||
const header = container.querySelector(
|
const header = container.querySelector(
|
||||||
'[role="banner"][aria-label="Main navigation header"]'
|
'[role="banner"][aria-label="Main navigation header"]',
|
||||||
);
|
);
|
||||||
expect(header).toHaveClass("bg-[var(--color-surface-default-primary)]");
|
expect(header).toHaveClass("bg-[var(--color-surface-default-primary)]");
|
||||||
expect(header).toHaveClass("w-full");
|
expect(header).toHaveClass("w-full");
|
||||||
expect(header).toHaveClass("border-b");
|
expect(header).toHaveClass("border-b");
|
||||||
expect(header).toHaveClass(
|
expect(header).toHaveClass(
|
||||||
"border-[var(--border-color-default-tertiary)]"
|
"border-[var(--border-color-default-tertiary)]",
|
||||||
);
|
);
|
||||||
|
|
||||||
const nav = container.querySelector(
|
const nav = container.querySelector(
|
||||||
'[role="navigation"][aria-label="Main navigation"]'
|
'[role="navigation"][aria-label="Main navigation"]',
|
||||||
);
|
);
|
||||||
expect(nav).toHaveClass("flex");
|
expect(nav).toHaveClass("flex");
|
||||||
expect(nav).toHaveClass("items-center");
|
expect(nav).toHaveClass("items-center");
|
||||||
|
|||||||
@@ -16,17 +16,17 @@ describe("HeroBanner Component", () => {
|
|||||||
description="Create and manage community rules with ease"
|
description="Create and manage community rules with ease"
|
||||||
ctaText="Get Started"
|
ctaText="Get Started"
|
||||||
ctaHref="/signup"
|
ctaHref="/signup"
|
||||||
/>
|
/>,
|
||||||
);
|
);
|
||||||
|
|
||||||
expect(
|
expect(
|
||||||
screen.getByRole("heading", { name: "Welcome to CommunityRule" })
|
screen.getByRole("heading", { name: "Welcome to CommunityRule" }),
|
||||||
).toBeInTheDocument();
|
).toBeInTheDocument();
|
||||||
expect(
|
expect(
|
||||||
screen.getByRole("heading", { name: "Build better communities" })
|
screen.getByRole("heading", { name: "Build better communities" }),
|
||||||
).toBeInTheDocument();
|
).toBeInTheDocument();
|
||||||
expect(
|
expect(
|
||||||
screen.getByText("Create and manage community rules with ease")
|
screen.getByText("Create and manage community rules with ease"),
|
||||||
).toBeInTheDocument();
|
).toBeInTheDocument();
|
||||||
// Button component renders multiple versions for different screen sizes
|
// Button component renders multiple versions for different screen sizes
|
||||||
// Use getAllByRole to handle multiple buttons with same text
|
// Use getAllByRole to handle multiple buttons with same text
|
||||||
@@ -38,10 +38,10 @@ describe("HeroBanner Component", () => {
|
|||||||
render(<HeroBanner title="Minimal" />);
|
render(<HeroBanner title="Minimal" />);
|
||||||
|
|
||||||
expect(
|
expect(
|
||||||
screen.getByRole("heading", { name: "Minimal" })
|
screen.getByRole("heading", { name: "Minimal" }),
|
||||||
).toBeInTheDocument();
|
).toBeInTheDocument();
|
||||||
expect(
|
expect(
|
||||||
screen.getByRole("img", { name: "Hero illustration" })
|
screen.getByRole("img", { name: "Hero illustration" }),
|
||||||
).toBeInTheDocument();
|
).toBeInTheDocument();
|
||||||
});
|
});
|
||||||
|
|
||||||
@@ -72,15 +72,15 @@ describe("HeroBanner Component", () => {
|
|||||||
description="Test Description"
|
description="Test Description"
|
||||||
ctaText="Test CTA"
|
ctaText="Test CTA"
|
||||||
ctaHref="/test"
|
ctaHref="/test"
|
||||||
/>
|
/>,
|
||||||
);
|
);
|
||||||
|
|
||||||
// Check that ContentLockup receives the props correctly
|
// Check that ContentLockup receives the props correctly
|
||||||
expect(
|
expect(
|
||||||
screen.getByRole("heading", { name: "Test Title" })
|
screen.getByRole("heading", { name: "Test Title" }),
|
||||||
).toBeInTheDocument();
|
).toBeInTheDocument();
|
||||||
expect(
|
expect(
|
||||||
screen.getByRole("heading", { name: "Test Subtitle" })
|
screen.getByRole("heading", { name: "Test Subtitle" }),
|
||||||
).toBeInTheDocument();
|
).toBeInTheDocument();
|
||||||
expect(screen.getByText("Test Description")).toBeInTheDocument();
|
expect(screen.getByText("Test Description")).toBeInTheDocument();
|
||||||
// Button component renders multiple versions for different screen sizes
|
// Button component renders multiple versions for different screen sizes
|
||||||
@@ -93,7 +93,7 @@ describe("HeroBanner Component", () => {
|
|||||||
|
|
||||||
// HeroDecor should be present (it's a decorative component)
|
// HeroDecor should be present (it's a decorative component)
|
||||||
const heroDecor = document.querySelector(
|
const heroDecor = document.querySelector(
|
||||||
'[class*="pointer-events-none absolute z-0"]'
|
'[class*="pointer-events-none absolute z-0"]',
|
||||||
);
|
);
|
||||||
expect(heroDecor).toBeInTheDocument();
|
expect(heroDecor).toBeInTheDocument();
|
||||||
});
|
});
|
||||||
@@ -123,7 +123,7 @@ describe("HeroBanner Component", () => {
|
|||||||
const section = document.querySelector("section");
|
const section = document.querySelector("section");
|
||||||
expect(section).toHaveClass(
|
expect(section).toHaveClass(
|
||||||
"px-[var(--spacing-scale-008)]",
|
"px-[var(--spacing-scale-008)]",
|
||||||
"sm:px-[var(--spacing-scale-010)]"
|
"sm:px-[var(--spacing-scale-010)]",
|
||||||
);
|
);
|
||||||
});
|
});
|
||||||
|
|
||||||
@@ -135,7 +135,7 @@ describe("HeroBanner Component", () => {
|
|||||||
|
|
||||||
// Check for design token usage in the component structure
|
// Check for design token usage in the component structure
|
||||||
const container = section.querySelector(
|
const container = section.querySelector(
|
||||||
'[class*="bg-[var(--color-surface-inverse-brand-primary)]"]'
|
'[class*="bg-[var(--color-surface-inverse-brand-primary)]"]',
|
||||||
);
|
);
|
||||||
expect(container).toBeInTheDocument();
|
expect(container).toBeInTheDocument();
|
||||||
});
|
});
|
||||||
|
|||||||
+12
-12
@@ -23,7 +23,7 @@ describe("RootLayout", () => {
|
|||||||
render(
|
render(
|
||||||
<RootLayout>
|
<RootLayout>
|
||||||
<div>Test content</div>
|
<div>Test content</div>
|
||||||
</RootLayout>
|
</RootLayout>,
|
||||||
);
|
);
|
||||||
|
|
||||||
const html = document.querySelector("html");
|
const html = document.querySelector("html");
|
||||||
@@ -36,7 +36,7 @@ describe("RootLayout", () => {
|
|||||||
render(
|
render(
|
||||||
<RootLayout>
|
<RootLayout>
|
||||||
<div>Test content</div>
|
<div>Test content</div>
|
||||||
</RootLayout>
|
</RootLayout>,
|
||||||
);
|
);
|
||||||
|
|
||||||
const body = document.querySelector("body");
|
const body = document.querySelector("body");
|
||||||
@@ -50,7 +50,7 @@ describe("RootLayout", () => {
|
|||||||
render(
|
render(
|
||||||
<RootLayout>
|
<RootLayout>
|
||||||
<div>Test content</div>
|
<div>Test content</div>
|
||||||
</RootLayout>
|
</RootLayout>,
|
||||||
);
|
);
|
||||||
|
|
||||||
const mainContainer = document.querySelector(".min-h-screen.flex.flex-col");
|
const mainContainer = document.querySelector(".min-h-screen.flex.flex-col");
|
||||||
@@ -61,7 +61,7 @@ describe("RootLayout", () => {
|
|||||||
render(
|
render(
|
||||||
<RootLayout>
|
<RootLayout>
|
||||||
<div>Test content</div>
|
<div>Test content</div>
|
||||||
</RootLayout>
|
</RootLayout>,
|
||||||
);
|
);
|
||||||
|
|
||||||
// The HomeHeader component should be rendered
|
// The HomeHeader component should be rendered
|
||||||
@@ -74,7 +74,7 @@ describe("RootLayout", () => {
|
|||||||
render(
|
render(
|
||||||
<RootLayout>
|
<RootLayout>
|
||||||
<div>Test content</div>
|
<div>Test content</div>
|
||||||
</RootLayout>
|
</RootLayout>,
|
||||||
);
|
);
|
||||||
|
|
||||||
const main = document.querySelector("main");
|
const main = document.querySelector("main");
|
||||||
@@ -87,7 +87,7 @@ describe("RootLayout", () => {
|
|||||||
render(
|
render(
|
||||||
<RootLayout>
|
<RootLayout>
|
||||||
<div>Test content</div>
|
<div>Test content</div>
|
||||||
</RootLayout>
|
</RootLayout>,
|
||||||
);
|
);
|
||||||
|
|
||||||
// The Footer component should be rendered
|
// The Footer component should be rendered
|
||||||
@@ -100,7 +100,7 @@ describe("RootLayout", () => {
|
|||||||
render(
|
render(
|
||||||
<RootLayout>
|
<RootLayout>
|
||||||
<div>{testContent}</div>
|
<div>{testContent}</div>
|
||||||
</RootLayout>
|
</RootLayout>,
|
||||||
);
|
);
|
||||||
|
|
||||||
expect(screen.getByText(testContent)).toBeInTheDocument();
|
expect(screen.getByText(testContent)).toBeInTheDocument();
|
||||||
@@ -110,7 +110,7 @@ describe("RootLayout", () => {
|
|||||||
render(
|
render(
|
||||||
<RootLayout>
|
<RootLayout>
|
||||||
<div>Test content</div>
|
<div>Test content</div>
|
||||||
</RootLayout>
|
</RootLayout>,
|
||||||
);
|
);
|
||||||
|
|
||||||
const mainContainer = document.querySelector(".min-h-screen.flex.flex-col");
|
const mainContainer = document.querySelector(".min-h-screen.flex.flex-col");
|
||||||
@@ -124,7 +124,7 @@ describe("RootLayout", () => {
|
|||||||
render(
|
render(
|
||||||
<RootLayout>
|
<RootLayout>
|
||||||
<div>Test content</div>
|
<div>Test content</div>
|
||||||
</RootLayout>
|
</RootLayout>,
|
||||||
);
|
);
|
||||||
|
|
||||||
const main = document.querySelector("main");
|
const main = document.querySelector("main");
|
||||||
@@ -135,7 +135,7 @@ describe("RootLayout", () => {
|
|||||||
render(
|
render(
|
||||||
<RootLayout>
|
<RootLayout>
|
||||||
<div>Test content</div>
|
<div>Test content</div>
|
||||||
</RootLayout>
|
</RootLayout>,
|
||||||
);
|
);
|
||||||
|
|
||||||
// Check for all major structural elements
|
// Check for all major structural elements
|
||||||
@@ -150,7 +150,7 @@ describe("RootLayout", () => {
|
|||||||
render(
|
render(
|
||||||
<RootLayout>
|
<RootLayout>
|
||||||
<div>Test content</div>
|
<div>Test content</div>
|
||||||
</RootLayout>
|
</RootLayout>,
|
||||||
);
|
);
|
||||||
|
|
||||||
// Check that the document has proper structure
|
// Check that the document has proper structure
|
||||||
@@ -173,7 +173,7 @@ describe("RootLayout", () => {
|
|||||||
<div>First child</div>
|
<div>First child</div>
|
||||||
<div>Second child</div>
|
<div>Second child</div>
|
||||||
<div>Third child</div>
|
<div>Third child</div>
|
||||||
</RootLayout>
|
</RootLayout>,
|
||||||
);
|
);
|
||||||
|
|
||||||
expect(screen.getByText("First child")).toBeInTheDocument();
|
expect(screen.getByText("First child")).toBeInTheDocument();
|
||||||
|
|||||||
@@ -47,7 +47,7 @@ describe("LogoWall Component", () => {
|
|||||||
render(<LogoWall />);
|
render(<LogoWall />);
|
||||||
|
|
||||||
expect(
|
expect(
|
||||||
screen.getByText("Trusted by leading cooperators")
|
screen.getByText("Trusted by leading cooperators"),
|
||||||
).toBeInTheDocument();
|
).toBeInTheDocument();
|
||||||
});
|
});
|
||||||
|
|
||||||
@@ -64,7 +64,7 @@ describe("LogoWall Component", () => {
|
|||||||
const section = document.querySelector("section");
|
const section = document.querySelector("section");
|
||||||
expect(section).toHaveClass(
|
expect(section).toHaveClass(
|
||||||
"p-[var(--spacing-scale-032)]",
|
"p-[var(--spacing-scale-032)]",
|
||||||
"md:px-[var(--spacing-scale-024)]"
|
"md:px-[var(--spacing-scale-024)]",
|
||||||
);
|
);
|
||||||
});
|
});
|
||||||
|
|
||||||
@@ -72,7 +72,7 @@ describe("LogoWall Component", () => {
|
|||||||
render(<LogoWall />);
|
render(<LogoWall />);
|
||||||
|
|
||||||
const grid = document.querySelector(
|
const grid = document.querySelector(
|
||||||
'[class*="grid grid-cols-2 grid-rows-3"]'
|
'[class*="grid grid-cols-2 grid-rows-3"]',
|
||||||
);
|
);
|
||||||
expect(grid).toBeInTheDocument();
|
expect(grid).toBeInTheDocument();
|
||||||
expect(grid).toHaveClass("sm:grid-cols-3", "sm:grid-rows-2", "md:flex");
|
expect(grid).toHaveClass("sm:grid-cols-3", "sm:grid-rows-2", "md:flex");
|
||||||
@@ -84,7 +84,7 @@ describe("LogoWall Component", () => {
|
|||||||
const foodNotBombsLogo = screen.getByAltText("Food Not Bombs");
|
const foodNotBombsLogo = screen.getByAltText("Food Not Bombs");
|
||||||
expect(foodNotBombsLogo).toHaveAttribute(
|
expect(foodNotBombsLogo).toHaveAttribute(
|
||||||
"src",
|
"src",
|
||||||
"assets/Section/Logo_FoodNotBombs.png"
|
"assets/Section/Logo_FoodNotBombs.png",
|
||||||
);
|
);
|
||||||
expect(foodNotBombsLogo).toHaveClass("h-11", "lg:h-14", "xl:h-[70px]");
|
expect(foodNotBombsLogo).toHaveClass("h-11", "lg:h-14", "xl:h-[70px]");
|
||||||
});
|
});
|
||||||
@@ -109,7 +109,7 @@ describe("LogoWall Component", () => {
|
|||||||
render(<LogoWall />);
|
render(<LogoWall />);
|
||||||
|
|
||||||
const logoContainers = document.querySelectorAll(
|
const logoContainers = document.querySelectorAll(
|
||||||
'[class*="hover:opacity-100"]'
|
'[class*="hover:opacity-100"]',
|
||||||
);
|
);
|
||||||
expect(logoContainers.length).toBeGreaterThan(0);
|
expect(logoContainers.length).toBeGreaterThan(0);
|
||||||
});
|
});
|
||||||
@@ -129,7 +129,7 @@ describe("LogoWall Component", () => {
|
|||||||
render(<LogoWall />);
|
render(<LogoWall />);
|
||||||
|
|
||||||
const logoContainers = document.querySelectorAll(
|
const logoContainers = document.querySelectorAll(
|
||||||
'[class*="transition-opacity duration-500"]'
|
'[class*="transition-opacity duration-500"]',
|
||||||
);
|
);
|
||||||
expect(logoContainers.length).toBeGreaterThan(0);
|
expect(logoContainers.length).toBeGreaterThan(0);
|
||||||
});
|
});
|
||||||
|
|||||||
@@ -32,25 +32,25 @@ describe("NumberedCards Component", () => {
|
|||||||
title="How CommunityRule helps"
|
title="How CommunityRule helps"
|
||||||
subtitle="Build better communities step by step"
|
subtitle="Build better communities step by step"
|
||||||
cards={mockCards}
|
cards={mockCards}
|
||||||
/>
|
/>,
|
||||||
);
|
);
|
||||||
|
|
||||||
// Check for the heading (it contains both mobile and desktop versions)
|
// Check for the heading (it contains both mobile and desktop versions)
|
||||||
expect(screen.getByRole("heading")).toBeInTheDocument();
|
expect(screen.getByRole("heading")).toBeInTheDocument();
|
||||||
// Check for the subtitle text
|
// Check for the subtitle text
|
||||||
expect(
|
expect(
|
||||||
screen.getByText("Build better communities step by step")
|
screen.getByText("Build better communities step by step"),
|
||||||
).toBeInTheDocument();
|
).toBeInTheDocument();
|
||||||
|
|
||||||
// Check for card content
|
// Check for card content
|
||||||
expect(
|
expect(
|
||||||
screen.getByText("Define your community values")
|
screen.getByText("Define your community values"),
|
||||||
).toBeInTheDocument();
|
).toBeInTheDocument();
|
||||||
expect(
|
expect(
|
||||||
screen.getByText("Create decision-making processes")
|
screen.getByText("Create decision-making processes"),
|
||||||
).toBeInTheDocument();
|
).toBeInTheDocument();
|
||||||
expect(
|
expect(
|
||||||
screen.getByText("Establish communication channels")
|
screen.getByText("Establish communication channels"),
|
||||||
).toBeInTheDocument();
|
).toBeInTheDocument();
|
||||||
});
|
});
|
||||||
|
|
||||||
@@ -60,7 +60,7 @@ describe("NumberedCards Component", () => {
|
|||||||
title="Test Title"
|
title="Test Title"
|
||||||
subtitle="Test Subtitle"
|
subtitle="Test Subtitle"
|
||||||
cards={mockCards}
|
cards={mockCards}
|
||||||
/>
|
/>,
|
||||||
);
|
);
|
||||||
|
|
||||||
// Check for the heading (it contains both mobile and desktop versions)
|
// Check for the heading (it contains both mobile and desktop versions)
|
||||||
@@ -82,10 +82,10 @@ describe("NumberedCards Component", () => {
|
|||||||
render(<NumberedCards title="Test" subtitle="Test" cards={mockCards} />);
|
render(<NumberedCards title="Test" subtitle="Test" cards={mockCards} />);
|
||||||
|
|
||||||
expect(
|
expect(
|
||||||
screen.getByRole("button", { name: "Create CommunityRule" })
|
screen.getByRole("button", { name: "Create CommunityRule" }),
|
||||||
).toBeInTheDocument();
|
).toBeInTheDocument();
|
||||||
expect(
|
expect(
|
||||||
screen.getByRole("button", { name: "See how it works" })
|
screen.getByRole("button", { name: "See how it works" }),
|
||||||
).toBeInTheDocument();
|
).toBeInTheDocument();
|
||||||
});
|
});
|
||||||
|
|
||||||
@@ -109,7 +109,7 @@ describe("NumberedCards Component", () => {
|
|||||||
const section = document.querySelector("section");
|
const section = document.querySelector("section");
|
||||||
expect(section).toHaveClass(
|
expect(section).toHaveClass(
|
||||||
"bg-transparent",
|
"bg-transparent",
|
||||||
"py-[var(--spacing-scale-032)]"
|
"py-[var(--spacing-scale-032)]",
|
||||||
);
|
);
|
||||||
});
|
});
|
||||||
|
|
||||||
@@ -117,7 +117,7 @@ describe("NumberedCards Component", () => {
|
|||||||
render(<NumberedCards title="Test" subtitle="Test" cards={mockCards} />);
|
render(<NumberedCards title="Test" subtitle="Test" cards={mockCards} />);
|
||||||
|
|
||||||
const cardsContainer = document.querySelector(
|
const cardsContainer = document.querySelector(
|
||||||
'[class*="grid grid-cols-1"]'
|
'[class*="grid grid-cols-1"]',
|
||||||
);
|
);
|
||||||
expect(cardsContainer).toBeInTheDocument();
|
expect(cardsContainer).toBeInTheDocument();
|
||||||
});
|
});
|
||||||
@@ -128,7 +128,7 @@ describe("NumberedCards Component", () => {
|
|||||||
title="Test Title"
|
title="Test Title"
|
||||||
subtitle="Test Description"
|
subtitle="Test Description"
|
||||||
cards={mockCards}
|
cards={mockCards}
|
||||||
/>
|
/>,
|
||||||
);
|
);
|
||||||
|
|
||||||
const script = document.querySelector('script[type="application/ld+json"]');
|
const script = document.querySelector('script[type="application/ld+json"]');
|
||||||
@@ -161,7 +161,7 @@ describe("NumberedCards Component", () => {
|
|||||||
|
|
||||||
// Should render buttons even without cards
|
// Should render buttons even without cards
|
||||||
expect(
|
expect(
|
||||||
screen.getByRole("button", { name: "Create CommunityRule" })
|
screen.getByRole("button", { name: "Create CommunityRule" }),
|
||||||
).toBeInTheDocument();
|
).toBeInTheDocument();
|
||||||
});
|
});
|
||||||
|
|
||||||
@@ -180,7 +180,7 @@ describe("NumberedCards Component", () => {
|
|||||||
const section = document.querySelector("section");
|
const section = document.querySelector("section");
|
||||||
expect(section).toHaveClass(
|
expect(section).toHaveClass(
|
||||||
"py-[var(--spacing-scale-032)]",
|
"py-[var(--spacing-scale-032)]",
|
||||||
"sm:py-[var(--spacing-scale-048)]"
|
"sm:py-[var(--spacing-scale-048)]",
|
||||||
);
|
);
|
||||||
});
|
});
|
||||||
|
|
||||||
@@ -188,7 +188,7 @@ describe("NumberedCards Component", () => {
|
|||||||
render(<NumberedCards title="Test" subtitle="Test" cards={mockCards} />);
|
render(<NumberedCards title="Test" subtitle="Test" cards={mockCards} />);
|
||||||
|
|
||||||
const container = document.querySelector(
|
const container = document.querySelector(
|
||||||
'[class*="max-w-[var(--spacing-measures-max-width-lg)]"]'
|
'[class*="max-w-[var(--spacing-measures-max-width-lg)]"]',
|
||||||
);
|
);
|
||||||
expect(container).toBeInTheDocument();
|
expect(container).toBeInTheDocument();
|
||||||
});
|
});
|
||||||
|
|||||||
+50
-50
@@ -11,36 +11,36 @@ describe("Page", () => {
|
|||||||
expect(screen.getAllByText("with clarity").length).toBeGreaterThan(0);
|
expect(screen.getAllByText("with clarity").length).toBeGreaterThan(0);
|
||||||
expect(
|
expect(
|
||||||
screen.getAllByText(
|
screen.getAllByText(
|
||||||
"Help your community make important decisions in a way that reflects its unique values."
|
"Help your community make important decisions in a way that reflects its unique values.",
|
||||||
).length
|
).length,
|
||||||
).toBeGreaterThan(0);
|
).toBeGreaterThan(0);
|
||||||
|
|
||||||
// Check numbered cards section (using getAllByText since there are multiple instances)
|
// Check numbered cards section (using getAllByText since there are multiple instances)
|
||||||
expect(
|
expect(
|
||||||
screen.getAllByText("How CommunityRule works").length
|
screen.getAllByText("How CommunityRule works").length,
|
||||||
).toBeGreaterThan(0);
|
).toBeGreaterThan(0);
|
||||||
expect(
|
expect(
|
||||||
screen.getAllByText(
|
screen.getAllByText(
|
||||||
"Here's a quick overview of the process, from start to finish."
|
"Here's a quick overview of the process, from start to finish.",
|
||||||
).length
|
).length,
|
||||||
).toBeGreaterThan(0);
|
).toBeGreaterThan(0);
|
||||||
|
|
||||||
// Check feature grid section (using getAllByText since there are multiple instances)
|
// Check feature grid section (using getAllByText since there are multiple instances)
|
||||||
expect(
|
expect(
|
||||||
screen.getAllByText("We've got your back, every step of the way").length
|
screen.getAllByText("We've got your back, every step of the way").length,
|
||||||
).toBeGreaterThan(0);
|
).toBeGreaterThan(0);
|
||||||
expect(
|
expect(
|
||||||
screen.getAllByText(
|
screen.getAllByText(
|
||||||
"Use our toolkit to improve, document, and evolve your organization."
|
"Use our toolkit to improve, document, and evolve your organization.",
|
||||||
).length
|
).length,
|
||||||
).toBeGreaterThan(0);
|
).toBeGreaterThan(0);
|
||||||
|
|
||||||
// Check ask organizer section (using getAllByText since there are multiple instances)
|
// Check ask organizer section (using getAllByText since there are multiple instances)
|
||||||
expect(screen.getAllByText("Still have questions?").length).toBeGreaterThan(
|
expect(screen.getAllByText("Still have questions?").length).toBeGreaterThan(
|
||||||
0
|
0,
|
||||||
);
|
);
|
||||||
expect(
|
expect(
|
||||||
screen.getAllByText("Get answers from an experienced organizer").length
|
screen.getAllByText("Get answers from an experienced organizer").length,
|
||||||
).toBeGreaterThan(0);
|
).toBeGreaterThan(0);
|
||||||
});
|
});
|
||||||
|
|
||||||
@@ -52,11 +52,11 @@ describe("Page", () => {
|
|||||||
expect(screen.getAllByText("with clarity").length).toBeGreaterThan(0);
|
expect(screen.getAllByText("with clarity").length).toBeGreaterThan(0);
|
||||||
expect(
|
expect(
|
||||||
screen.getAllByText(
|
screen.getAllByText(
|
||||||
"Help your community make important decisions in a way that reflects its unique values."
|
"Help your community make important decisions in a way that reflects its unique values.",
|
||||||
).length
|
).length,
|
||||||
).toBeGreaterThan(0);
|
).toBeGreaterThan(0);
|
||||||
expect(
|
expect(
|
||||||
screen.getAllByText("Learn how CommunityRule works").length
|
screen.getAllByText("Learn how CommunityRule works").length,
|
||||||
).toBeGreaterThan(0);
|
).toBeGreaterThan(0);
|
||||||
});
|
});
|
||||||
|
|
||||||
@@ -65,27 +65,27 @@ describe("Page", () => {
|
|||||||
|
|
||||||
// Check numbered cards content (using getAllByText since there are multiple instances)
|
// Check numbered cards content (using getAllByText since there are multiple instances)
|
||||||
expect(
|
expect(
|
||||||
screen.getAllByText("How CommunityRule works").length
|
screen.getAllByText("How CommunityRule works").length,
|
||||||
).toBeGreaterThan(0);
|
).toBeGreaterThan(0);
|
||||||
expect(
|
expect(
|
||||||
screen.getAllByText(
|
screen.getAllByText(
|
||||||
"Here's a quick overview of the process, from start to finish."
|
"Here's a quick overview of the process, from start to finish.",
|
||||||
).length
|
).length,
|
||||||
).toBeGreaterThan(0);
|
).toBeGreaterThan(0);
|
||||||
|
|
||||||
// Check individual card content (using getAllByText since there are multiple instances)
|
// Check individual card content (using getAllByText since there are multiple instances)
|
||||||
expect(
|
expect(
|
||||||
screen.getAllByText("Document how your community makes decisions").length
|
screen.getAllByText("Document how your community makes decisions").length,
|
||||||
).toBeGreaterThan(0);
|
).toBeGreaterThan(0);
|
||||||
expect(
|
expect(
|
||||||
screen.getAllByText(
|
screen.getAllByText(
|
||||||
"Build an operating manual for a successful community"
|
"Build an operating manual for a successful community",
|
||||||
).length
|
).length,
|
||||||
).toBeGreaterThan(0);
|
).toBeGreaterThan(0);
|
||||||
expect(
|
expect(
|
||||||
screen.getAllByText(
|
screen.getAllByText(
|
||||||
"Get a link to your manual for your group to review and evolve"
|
"Get a link to your manual for your group to review and evolve",
|
||||||
).length
|
).length,
|
||||||
).toBeGreaterThan(0);
|
).toBeGreaterThan(0);
|
||||||
});
|
});
|
||||||
|
|
||||||
@@ -94,12 +94,12 @@ describe("Page", () => {
|
|||||||
|
|
||||||
// Check feature grid content (using getAllByText since there are multiple instances)
|
// Check feature grid content (using getAllByText since there are multiple instances)
|
||||||
expect(
|
expect(
|
||||||
screen.getAllByText("We've got your back, every step of the way").length
|
screen.getAllByText("We've got your back, every step of the way").length,
|
||||||
).toBeGreaterThan(0);
|
).toBeGreaterThan(0);
|
||||||
expect(
|
expect(
|
||||||
screen.getAllByText(
|
screen.getAllByText(
|
||||||
"Use our toolkit to improve, document, and evolve your organization."
|
"Use our toolkit to improve, document, and evolve your organization.",
|
||||||
).length
|
).length,
|
||||||
).toBeGreaterThan(0);
|
).toBeGreaterThan(0);
|
||||||
});
|
});
|
||||||
|
|
||||||
@@ -108,10 +108,10 @@ describe("Page", () => {
|
|||||||
|
|
||||||
// Check ask organizer content (using getAllByText since there are multiple instances)
|
// Check ask organizer content (using getAllByText since there are multiple instances)
|
||||||
expect(screen.getAllByText("Still have questions?").length).toBeGreaterThan(
|
expect(screen.getAllByText("Still have questions?").length).toBeGreaterThan(
|
||||||
0
|
0,
|
||||||
);
|
);
|
||||||
expect(
|
expect(
|
||||||
screen.getAllByText("Get answers from an experienced organizer").length
|
screen.getAllByText("Get answers from an experienced organizer").length,
|
||||||
).toBeGreaterThan(0);
|
).toBeGreaterThan(0);
|
||||||
expect(screen.getAllByText("Ask an organizer").length).toBeGreaterThan(0);
|
expect(screen.getAllByText("Ask an organizer").length).toBeGreaterThan(0);
|
||||||
});
|
});
|
||||||
@@ -126,19 +126,19 @@ describe("Page", () => {
|
|||||||
// LogoWall - should be present (even if just the component structure)
|
// LogoWall - should be present (even if just the component structure)
|
||||||
// NumberedCards
|
// NumberedCards
|
||||||
expect(
|
expect(
|
||||||
screen.getAllByText("How CommunityRule works").length
|
screen.getAllByText("How CommunityRule works").length,
|
||||||
).toBeGreaterThan(0);
|
).toBeGreaterThan(0);
|
||||||
|
|
||||||
// RuleStack - should be present
|
// RuleStack - should be present
|
||||||
// FeatureGrid
|
// FeatureGrid
|
||||||
expect(
|
expect(
|
||||||
screen.getAllByText("We've got your back, every step of the way").length
|
screen.getAllByText("We've got your back, every step of the way").length,
|
||||||
).toBeGreaterThan(0);
|
).toBeGreaterThan(0);
|
||||||
|
|
||||||
// QuoteBlock - should be present
|
// QuoteBlock - should be present
|
||||||
// AskOrganizer
|
// AskOrganizer
|
||||||
expect(screen.getAllByText("Still have questions?").length).toBeGreaterThan(
|
expect(screen.getAllByText("Still have questions?").length).toBeGreaterThan(
|
||||||
0
|
0,
|
||||||
);
|
);
|
||||||
});
|
});
|
||||||
|
|
||||||
@@ -154,7 +154,7 @@ describe("Page", () => {
|
|||||||
|
|
||||||
// Check CTA button in hero banner
|
// Check CTA button in hero banner
|
||||||
expect(
|
expect(
|
||||||
screen.getAllByText("Learn how CommunityRule works").length
|
screen.getAllByText("Learn how CommunityRule works").length,
|
||||||
).toBeGreaterThan(0);
|
).toBeGreaterThan(0);
|
||||||
|
|
||||||
// Check CTA button in ask organizer section
|
// Check CTA button in ask organizer section
|
||||||
@@ -167,27 +167,27 @@ describe("Page", () => {
|
|||||||
// Check main description (using getAllByText since there are multiple instances)
|
// Check main description (using getAllByText since there are multiple instances)
|
||||||
expect(
|
expect(
|
||||||
screen.getAllByText(
|
screen.getAllByText(
|
||||||
"Help your community make important decisions in a way that reflects its unique values."
|
"Help your community make important decisions in a way that reflects its unique values.",
|
||||||
).length
|
).length,
|
||||||
).toBeGreaterThan(0);
|
).toBeGreaterThan(0);
|
||||||
|
|
||||||
// Check numbered cards description (using getAllByText since there are multiple instances)
|
// Check numbered cards description (using getAllByText since there are multiple instances)
|
||||||
expect(
|
expect(
|
||||||
screen.getAllByText(
|
screen.getAllByText(
|
||||||
"Here's a quick overview of the process, from start to finish."
|
"Here's a quick overview of the process, from start to finish.",
|
||||||
).length
|
).length,
|
||||||
).toBeGreaterThan(0);
|
).toBeGreaterThan(0);
|
||||||
|
|
||||||
// Check feature grid description (using getAllByText since there are multiple instances)
|
// Check feature grid description (using getAllByText since there are multiple instances)
|
||||||
expect(
|
expect(
|
||||||
screen.getAllByText(
|
screen.getAllByText(
|
||||||
"Use our toolkit to improve, document, and evolve your organization."
|
"Use our toolkit to improve, document, and evolve your organization.",
|
||||||
).length
|
).length,
|
||||||
).toBeGreaterThan(0);
|
).toBeGreaterThan(0);
|
||||||
|
|
||||||
// Check ask organizer description (using getAllByText since there are multiple instances)
|
// Check ask organizer description (using getAllByText since there are multiple instances)
|
||||||
expect(
|
expect(
|
||||||
screen.getAllByText("Get answers from an experienced organizer").length
|
screen.getAllByText("Get answers from an experienced organizer").length,
|
||||||
).toBeGreaterThan(0);
|
).toBeGreaterThan(0);
|
||||||
});
|
});
|
||||||
|
|
||||||
@@ -197,13 +197,13 @@ describe("Page", () => {
|
|||||||
// Check all section titles (using getAllByText since there are multiple instances)
|
// Check all section titles (using getAllByText since there are multiple instances)
|
||||||
expect(screen.getAllByText("Collaborate").length).toBeGreaterThan(0);
|
expect(screen.getAllByText("Collaborate").length).toBeGreaterThan(0);
|
||||||
expect(
|
expect(
|
||||||
screen.getAllByText("How CommunityRule works").length
|
screen.getAllByText("How CommunityRule works").length,
|
||||||
).toBeGreaterThan(0);
|
).toBeGreaterThan(0);
|
||||||
expect(
|
expect(
|
||||||
screen.getAllByText("We've got your back, every step of the way").length
|
screen.getAllByText("We've got your back, every step of the way").length,
|
||||||
).toBeGreaterThan(0);
|
).toBeGreaterThan(0);
|
||||||
expect(screen.getAllByText("Still have questions?").length).toBeGreaterThan(
|
expect(screen.getAllByText("Still have questions?").length).toBeGreaterThan(
|
||||||
0
|
0,
|
||||||
);
|
);
|
||||||
});
|
});
|
||||||
|
|
||||||
@@ -212,17 +212,17 @@ describe("Page", () => {
|
|||||||
|
|
||||||
// Check all three numbered card items (using getAllByText since there are multiple instances)
|
// Check all three numbered card items (using getAllByText since there are multiple instances)
|
||||||
expect(
|
expect(
|
||||||
screen.getAllByText("Document how your community makes decisions").length
|
screen.getAllByText("Document how your community makes decisions").length,
|
||||||
).toBeGreaterThan(0);
|
).toBeGreaterThan(0);
|
||||||
expect(
|
expect(
|
||||||
screen.getAllByText(
|
screen.getAllByText(
|
||||||
"Build an operating manual for a successful community"
|
"Build an operating manual for a successful community",
|
||||||
).length
|
).length,
|
||||||
).toBeGreaterThan(0);
|
).toBeGreaterThan(0);
|
||||||
expect(
|
expect(
|
||||||
screen.getAllByText(
|
screen.getAllByText(
|
||||||
"Get a link to your manual for your group to review and evolve"
|
"Get a link to your manual for your group to review and evolve",
|
||||||
).length
|
).length,
|
||||||
).toBeGreaterThan(0);
|
).toBeGreaterThan(0);
|
||||||
});
|
});
|
||||||
|
|
||||||
@@ -233,16 +233,16 @@ describe("Page", () => {
|
|||||||
expect(screen.getAllByText("with clarity").length).toBeGreaterThan(0);
|
expect(screen.getAllByText("with clarity").length).toBeGreaterThan(0);
|
||||||
expect(
|
expect(
|
||||||
screen.getAllByText(
|
screen.getAllByText(
|
||||||
"Here's a quick overview of the process, from start to finish."
|
"Here's a quick overview of the process, from start to finish.",
|
||||||
).length
|
).length,
|
||||||
).toBeGreaterThan(0);
|
).toBeGreaterThan(0);
|
||||||
expect(
|
expect(
|
||||||
screen.getAllByText(
|
screen.getAllByText(
|
||||||
"Use our toolkit to improve, document, and evolve your organization."
|
"Use our toolkit to improve, document, and evolve your organization.",
|
||||||
).length
|
).length,
|
||||||
).toBeGreaterThan(0);
|
).toBeGreaterThan(0);
|
||||||
expect(
|
expect(
|
||||||
screen.getAllByText("Get answers from an experienced organizer").length
|
screen.getAllByText("Get answers from an experienced organizer").length,
|
||||||
).toBeGreaterThan(0);
|
).toBeGreaterThan(0);
|
||||||
});
|
});
|
||||||
});
|
});
|
||||||
|
|||||||
@@ -12,11 +12,11 @@ describe("QuoteBlock Component", () => {
|
|||||||
render(<QuoteBlock />);
|
render(<QuoteBlock />);
|
||||||
|
|
||||||
expect(
|
expect(
|
||||||
screen.getByText(/The rules of decision-making must be open/)
|
screen.getByText(/The rules of decision-making must be open/),
|
||||||
).toBeInTheDocument();
|
).toBeInTheDocument();
|
||||||
expect(screen.getByText("Jo Freeman")).toBeInTheDocument();
|
expect(screen.getByText("Jo Freeman")).toBeInTheDocument();
|
||||||
expect(
|
expect(
|
||||||
screen.getByText("The Tyranny of Structurelessness")
|
screen.getByText("The Tyranny of Structurelessness"),
|
||||||
).toBeInTheDocument();
|
).toBeInTheDocument();
|
||||||
expect(screen.getByAltText("Portrait of Jo Freeman")).toBeInTheDocument();
|
expect(screen.getByAltText("Portrait of Jo Freeman")).toBeInTheDocument();
|
||||||
});
|
});
|
||||||
@@ -27,7 +27,7 @@ describe("QuoteBlock Component", () => {
|
|||||||
quote="Custom quote text"
|
quote="Custom quote text"
|
||||||
author="Custom Author"
|
author="Custom Author"
|
||||||
source="Custom Source"
|
source="Custom Source"
|
||||||
/>
|
/>,
|
||||||
);
|
);
|
||||||
|
|
||||||
expect(screen.getByText("Custom quote text")).toBeInTheDocument();
|
expect(screen.getByText("Custom quote text")).toBeInTheDocument();
|
||||||
@@ -41,7 +41,7 @@ describe("QuoteBlock Component", () => {
|
|||||||
quote="Test quote"
|
quote="Test quote"
|
||||||
author="Test Author"
|
author="Test Author"
|
||||||
className="custom-class"
|
className="custom-class"
|
||||||
/>
|
/>,
|
||||||
);
|
);
|
||||||
|
|
||||||
const section = document.querySelector("section");
|
const section = document.querySelector("section");
|
||||||
@@ -50,24 +50,24 @@ describe("QuoteBlock Component", () => {
|
|||||||
|
|
||||||
test("renders different variants", () => {
|
test("renders different variants", () => {
|
||||||
const { rerender } = render(
|
const { rerender } = render(
|
||||||
<QuoteBlock quote="Test quote" author="Test Author" variant="compact" />
|
<QuoteBlock quote="Test quote" author="Test Author" variant="compact" />,
|
||||||
);
|
);
|
||||||
|
|
||||||
// Compact variant should have different styling
|
// Compact variant should have different styling
|
||||||
const section = screen.getByRole("region");
|
const section = screen.getByRole("region");
|
||||||
expect(section).toHaveClass(
|
expect(section).toHaveClass(
|
||||||
"py-[var(--spacing-scale-032)]",
|
"py-[var(--spacing-scale-032)]",
|
||||||
"px-[var(--spacing-scale-016)]"
|
"px-[var(--spacing-scale-016)]",
|
||||||
);
|
);
|
||||||
|
|
||||||
rerender(
|
rerender(
|
||||||
<QuoteBlock quote="Test quote" author="Test Author" variant="extended" />
|
<QuoteBlock quote="Test quote" author="Test Author" variant="extended" />,
|
||||||
);
|
);
|
||||||
|
|
||||||
// Extended variant should have different styling
|
// Extended variant should have different styling
|
||||||
expect(section).toHaveClass(
|
expect(section).toHaveClass(
|
||||||
"py-[var(--spacing-scale-048)]",
|
"py-[var(--spacing-scale-048)]",
|
||||||
"px-[var(--spacing-scale-024)]"
|
"px-[var(--spacing-scale-024)]",
|
||||||
);
|
);
|
||||||
});
|
});
|
||||||
|
|
||||||
@@ -77,7 +77,7 @@ describe("QuoteBlock Component", () => {
|
|||||||
quote="Test quote"
|
quote="Test quote"
|
||||||
author="Test Author"
|
author="Test Author"
|
||||||
id="custom-quote-id"
|
id="custom-quote-id"
|
||||||
/>
|
/>,
|
||||||
);
|
);
|
||||||
|
|
||||||
const quoteElement = screen.getByText("Test quote");
|
const quoteElement = screen.getByText("Test quote");
|
||||||
@@ -95,7 +95,7 @@ describe("QuoteBlock Component", () => {
|
|||||||
test("calls onError callback when image fails", () => {
|
test("calls onError callback when image fails", () => {
|
||||||
const onError = vi.fn();
|
const onError = vi.fn();
|
||||||
render(
|
render(
|
||||||
<QuoteBlock quote="Test quote" author="Test Author" onError={onError} />
|
<QuoteBlock quote="Test quote" author="Test Author" onError={onError} />,
|
||||||
);
|
);
|
||||||
|
|
||||||
// Should render without errors
|
// Should render without errors
|
||||||
@@ -112,24 +112,24 @@ describe("QuoteBlock Component", () => {
|
|||||||
|
|
||||||
test("renders decorative elements for standard variant", () => {
|
test("renders decorative elements for standard variant", () => {
|
||||||
render(
|
render(
|
||||||
<QuoteBlock quote="Test quote" author="Test Author" variant="standard" />
|
<QuoteBlock quote="Test quote" author="Test Author" variant="standard" />,
|
||||||
);
|
);
|
||||||
|
|
||||||
// Should render QuoteDecor for standard variant
|
// Should render QuoteDecor for standard variant
|
||||||
const decor = document.querySelector(
|
const decor = document.querySelector(
|
||||||
'[class*="pointer-events-none absolute z-0"]'
|
'[class*="pointer-events-none absolute z-0"]',
|
||||||
);
|
);
|
||||||
expect(decor).toBeInTheDocument();
|
expect(decor).toBeInTheDocument();
|
||||||
});
|
});
|
||||||
|
|
||||||
test("does not render decorative elements for compact variant", () => {
|
test("does not render decorative elements for compact variant", () => {
|
||||||
render(
|
render(
|
||||||
<QuoteBlock quote="Test quote" author="Test Author" variant="compact" />
|
<QuoteBlock quote="Test quote" author="Test Author" variant="compact" />,
|
||||||
);
|
);
|
||||||
|
|
||||||
// Should not render QuoteDecor for compact variant
|
// Should not render QuoteDecor for compact variant
|
||||||
const decor = document.querySelector(
|
const decor = document.querySelector(
|
||||||
'[class*="pointer-events-none absolute z-0"]'
|
'[class*="pointer-events-none absolute z-0"]',
|
||||||
);
|
);
|
||||||
expect(decor).not.toBeInTheDocument();
|
expect(decor).not.toBeInTheDocument();
|
||||||
});
|
});
|
||||||
@@ -149,7 +149,7 @@ describe("QuoteBlock Component", () => {
|
|||||||
|
|
||||||
test("applies correct accessibility attributes", () => {
|
test("applies correct accessibility attributes", () => {
|
||||||
render(
|
render(
|
||||||
<QuoteBlock quote="Test quote" author="Test Author" id="test-quote" />
|
<QuoteBlock quote="Test quote" author="Test Author" id="test-quote" />,
|
||||||
);
|
);
|
||||||
|
|
||||||
const section = document.querySelector("section");
|
const section = document.querySelector("section");
|
||||||
@@ -166,7 +166,7 @@ describe("QuoteBlock Component", () => {
|
|||||||
expect(section).toHaveClass("md:py-[var(--spacing-scale-032)]");
|
expect(section).toHaveClass("md:py-[var(--spacing-scale-032)]");
|
||||||
|
|
||||||
const card = section.querySelector(
|
const card = section.querySelector(
|
||||||
'[class*="bg-[var(--color-surface-default-brand-darker-accent)]"]'
|
'[class*="bg-[var(--color-surface-default-brand-darker-accent)]"]',
|
||||||
);
|
);
|
||||||
expect(card).toBeInTheDocument();
|
expect(card).toBeInTheDocument();
|
||||||
});
|
});
|
||||||
@@ -177,7 +177,7 @@ describe("QuoteBlock Component", () => {
|
|||||||
render(<QuoteBlock quote="" author="" />);
|
render(<QuoteBlock quote="" author="" />);
|
||||||
|
|
||||||
expect(consoleSpy).toHaveBeenCalledWith(
|
expect(consoleSpy).toHaveBeenCalledWith(
|
||||||
"QuoteBlock: Missing required props (quote or author)"
|
"QuoteBlock: Missing required props (quote or author)",
|
||||||
);
|
);
|
||||||
|
|
||||||
consoleSpy.mockRestore();
|
consoleSpy.mockRestore();
|
||||||
@@ -199,14 +199,14 @@ describe("QuoteBlock Component", () => {
|
|||||||
|
|
||||||
test("applies responsive text sizing", () => {
|
test("applies responsive text sizing", () => {
|
||||||
render(
|
render(
|
||||||
<QuoteBlock quote="Test quote" author="Test Author" variant="standard" />
|
<QuoteBlock quote="Test quote" author="Test Author" variant="standard" />,
|
||||||
);
|
);
|
||||||
|
|
||||||
const quoteElement = screen.getByText("Test quote");
|
const quoteElement = screen.getByText("Test quote");
|
||||||
expect(quoteElement).toHaveClass(
|
expect(quoteElement).toHaveClass(
|
||||||
"text-[18px]",
|
"text-[18px]",
|
||||||
"md:text-[36px]",
|
"md:text-[36px]",
|
||||||
"lg:text-[52px]"
|
"lg:text-[52px]",
|
||||||
);
|
);
|
||||||
});
|
});
|
||||||
|
|
||||||
@@ -216,7 +216,7 @@ describe("QuoteBlock Component", () => {
|
|||||||
expect(screen.getByText("Test quote")).toBeInTheDocument();
|
expect(screen.getByText("Test quote")).toBeInTheDocument();
|
||||||
expect(screen.getByText("Test Author")).toBeInTheDocument();
|
expect(screen.getByText("Test Author")).toBeInTheDocument();
|
||||||
expect(
|
expect(
|
||||||
screen.queryByText("The Tyranny of Structurelessness")
|
screen.queryByText("The Tyranny of Structurelessness"),
|
||||||
).not.toBeInTheDocument();
|
).not.toBeInTheDocument();
|
||||||
});
|
});
|
||||||
});
|
});
|
||||||
|
|||||||
@@ -28,16 +28,16 @@ describe("RuleStack Component", () => {
|
|||||||
render(<RuleStack />);
|
render(<RuleStack />);
|
||||||
|
|
||||||
expect(
|
expect(
|
||||||
screen.getByText(/Units called Circles have the ability to decide/)
|
screen.getByText(/Units called Circles have the ability to decide/),
|
||||||
).toBeInTheDocument();
|
).toBeInTheDocument();
|
||||||
expect(
|
expect(
|
||||||
screen.getByText(/Decisions that affect the group collectively/)
|
screen.getByText(/Decisions that affect the group collectively/),
|
||||||
).toBeInTheDocument();
|
).toBeInTheDocument();
|
||||||
expect(
|
expect(
|
||||||
screen.getByText(/An elected board determines policies/)
|
screen.getByText(/An elected board determines policies/),
|
||||||
).toBeInTheDocument();
|
).toBeInTheDocument();
|
||||||
expect(
|
expect(
|
||||||
screen.getByText(/All participants can propose and vote/)
|
screen.getByText(/All participants can propose and vote/),
|
||||||
).toBeInTheDocument();
|
).toBeInTheDocument();
|
||||||
});
|
});
|
||||||
|
|
||||||
@@ -54,7 +54,7 @@ describe("RuleStack Component", () => {
|
|||||||
render(<RuleStack />);
|
render(<RuleStack />);
|
||||||
|
|
||||||
expect(
|
expect(
|
||||||
screen.getByRole("button", { name: "See all templates" })
|
screen.getByRole("button", { name: "See all templates" }),
|
||||||
).toBeInTheDocument();
|
).toBeInTheDocument();
|
||||||
});
|
});
|
||||||
|
|
||||||
@@ -71,7 +71,7 @@ describe("RuleStack Component", () => {
|
|||||||
const section = document.querySelector("section");
|
const section = document.querySelector("section");
|
||||||
expect(section).toHaveClass(
|
expect(section).toHaveClass(
|
||||||
"py-[var(--spacing-scale-032)]",
|
"py-[var(--spacing-scale-032)]",
|
||||||
"px-[var(--spacing-scale-020)]"
|
"px-[var(--spacing-scale-020)]",
|
||||||
);
|
);
|
||||||
});
|
});
|
||||||
|
|
||||||
@@ -128,7 +128,7 @@ describe("RuleStack Component", () => {
|
|||||||
const section = document.querySelector("section");
|
const section = document.querySelector("section");
|
||||||
expect(section).toHaveClass(
|
expect(section).toHaveClass(
|
||||||
"md:py-[var(--spacing-scale-048)]",
|
"md:py-[var(--spacing-scale-048)]",
|
||||||
"lg:py-[var(--spacing-scale-064)]"
|
"lg:py-[var(--spacing-scale-064)]",
|
||||||
);
|
);
|
||||||
});
|
});
|
||||||
|
|
||||||
@@ -141,7 +141,7 @@ describe("RuleStack Component", () => {
|
|||||||
"md:w-[56px]",
|
"md:w-[56px]",
|
||||||
"md:h-[56px]",
|
"md:h-[56px]",
|
||||||
"lg:w-[90px]",
|
"lg:w-[90px]",
|
||||||
"lg:h-[90px]"
|
"lg:h-[90px]",
|
||||||
);
|
);
|
||||||
});
|
});
|
||||||
|
|
||||||
@@ -155,7 +155,7 @@ describe("RuleStack Component", () => {
|
|||||||
// Verify that cards have background color classes
|
// Verify that cards have background color classes
|
||||||
cards.forEach((card) => {
|
cards.forEach((card) => {
|
||||||
expect(card.className).toMatch(
|
expect(card.className).toMatch(
|
||||||
/bg-\[var\(--color-surface-default-brand-/
|
/bg-\[var\(--color-surface-default-brand-/,
|
||||||
);
|
);
|
||||||
});
|
});
|
||||||
});
|
});
|
||||||
|
|||||||
@@ -155,7 +155,7 @@ describe("Accessibility - Component Level", () => {
|
|||||||
}
|
}
|
||||||
|
|
||||||
const headingLevels = headings.map((heading) =>
|
const headingLevels = headings.map((heading) =>
|
||||||
parseInt(heading.tagName.charAt(1))
|
parseInt(heading.tagName.charAt(1)),
|
||||||
);
|
);
|
||||||
|
|
||||||
// Check that heading levels are sequential (no skipping levels)
|
// Check that heading levels are sequential (no skipping levels)
|
||||||
|
|||||||
+3
-14
@@ -1,11 +1,7 @@
|
|||||||
{
|
{
|
||||||
"compilerOptions": {
|
"compilerOptions": {
|
||||||
"target": "ES2017",
|
"target": "ES2017",
|
||||||
"lib": [
|
"lib": ["dom", "dom.iterable", "esnext"],
|
||||||
"dom",
|
|
||||||
"dom.iterable",
|
|
||||||
"esnext"
|
|
||||||
],
|
|
||||||
"allowJs": true,
|
"allowJs": true,
|
||||||
"skipLibCheck": true,
|
"skipLibCheck": true,
|
||||||
"strict": false,
|
"strict": false,
|
||||||
@@ -23,13 +19,6 @@
|
|||||||
}
|
}
|
||||||
]
|
]
|
||||||
},
|
},
|
||||||
"include": [
|
"include": ["next-env.d.ts", ".next/types/**/*.ts", "**/*.ts", "**/*.tsx"],
|
||||||
"next-env.d.ts",
|
"exclude": ["node_modules"]
|
||||||
".next/types/**/*.ts",
|
|
||||||
"**/*.ts",
|
|
||||||
"**/*.tsx"
|
|
||||||
],
|
|
||||||
"exclude": [
|
|
||||||
"node_modules"
|
|
||||||
]
|
|
||||||
}
|
}
|
||||||
|
|||||||
Reference in New Issue
Block a user