diff --git a/.storybook/main.js b/.storybook/main.js index 7afbb5d..6e3993d 100644 --- a/.storybook/main.js +++ b/.storybook/main.js @@ -16,11 +16,7 @@ const config = { options: {}, }, staticDirs: ["../public"], - managerHead: (head) => `${head}`, - previewHead: (head) => `${head}`, async viteFinal(cfg) { - // IMPORTANT: Set base path for GitHub Pages sub-path hosting - cfg.base = "/communityrulestorybook/"; // Ensure esbuild treats .js as JSX during dep pre-bundling cfg.optimizeDeps ??= {}; cfg.optimizeDeps.esbuildOptions ??= {}; diff --git a/.storybook/preview.github.js b/.storybook/preview.github.js index 1fd25df..8b6689a 100644 --- a/.storybook/preview.github.js +++ b/.storybook/preview.github.js @@ -1,5 +1,29 @@ import "../app/globals.css"; +// Import Google Fonts for Storybook +import { Inter, Bricolage_Grotesque, Space_Grotesk } from "next/font/google"; + +const inter = Inter({ + subsets: ["latin"], + weight: ["400", "500", "600", "700"], + variable: "--font-inter", + display: "swap", +}); + +const bricolageGrotesque = Bricolage_Grotesque({ + subsets: ["latin"], + weight: ["400", "500", "700", "800"], + variable: "--font-bricolage-grotesque", + display: "swap", +}); + +const spaceGrotesk = Space_Grotesk({ + subsets: ["latin"], + weight: ["400", "500", "700"], + variable: "--font-space-grotesk", + display: "swap", +}); + /** @type { import('@storybook/react').Preview } */ const preview = { parameters: { @@ -11,6 +35,15 @@ const preview = { }, }, }, + decorators: [ + (Story) => ( +
+ +
+ ), + ], }; export default preview; diff --git a/.storybook/preview.js b/.storybook/preview.js index 1fd25df..8b6689a 100644 --- a/.storybook/preview.js +++ b/.storybook/preview.js @@ -1,5 +1,29 @@ import "../app/globals.css"; +// Import Google Fonts for Storybook +import { Inter, Bricolage_Grotesque, Space_Grotesk } from "next/font/google"; + +const inter = Inter({ + subsets: ["latin"], + weight: ["400", "500", "600", "700"], + variable: "--font-inter", + display: "swap", +}); + +const bricolageGrotesque = Bricolage_Grotesque({ + subsets: ["latin"], + weight: ["400", "500", "700", "800"], + variable: "--font-bricolage-grotesque", + display: "swap", +}); + +const spaceGrotesk = Space_Grotesk({ + subsets: ["latin"], + weight: ["400", "500", "700"], + variable: "--font-space-grotesk", + display: "swap", +}); + /** @type { import('@storybook/react').Preview } */ const preview = { parameters: { @@ -11,6 +35,15 @@ const preview = { }, }, }, + decorators: [ + (Story) => ( +
+ +
+ ), + ], }; export default preview; diff --git a/.storybook/preview.local.js b/.storybook/preview.local.js index 1fd25df..8b6689a 100644 --- a/.storybook/preview.local.js +++ b/.storybook/preview.local.js @@ -1,5 +1,29 @@ import "../app/globals.css"; +// Import Google Fonts for Storybook +import { Inter, Bricolage_Grotesque, Space_Grotesk } from "next/font/google"; + +const inter = Inter({ + subsets: ["latin"], + weight: ["400", "500", "600", "700"], + variable: "--font-inter", + display: "swap", +}); + +const bricolageGrotesque = Bricolage_Grotesque({ + subsets: ["latin"], + weight: ["400", "500", "700", "800"], + variable: "--font-bricolage-grotesque", + display: "swap", +}); + +const spaceGrotesk = Space_Grotesk({ + subsets: ["latin"], + weight: ["400", "500", "700"], + variable: "--font-space-grotesk", + display: "swap", +}); + /** @type { import('@storybook/react').Preview } */ const preview = { parameters: { @@ -11,6 +35,15 @@ const preview = { }, }, }, + decorators: [ + (Story) => ( +
+ +
+ ), + ], }; export default preview; diff --git a/app/components/Avatar.js b/app/components/Avatar.js index 2abbefe..fbb366a 100644 --- a/app/components/Avatar.js +++ b/app/components/Avatar.js @@ -6,10 +6,10 @@ export default function Avatar({ ...props }) { const sizeStyles = { - small: "w-[16px] h-[16px]", + small: "w-[var(--spacing-scale-016)] h-[var(--spacing-scale-016)]", medium: "w-[18px] h-[18px]", - large: "w-[24px] h-[24px]", - xlarge: "w-[32px] h-[32px]", + large: "w-[var(--spacing-scale-024)] h-[var(--spacing-scale-024)]", + xlarge: "w-[var(--spacing-scale-032)] h-[var(--spacing-scale-032)]", }; const baseStyles = `rounded-[var(--radius-measures-radius-full)] object-cover ${sizeStyles[size]} ${className}`; diff --git a/app/components/AvatarContainer.js b/app/components/AvatarContainer.js index 55ecfff..128775d 100644 --- a/app/components/AvatarContainer.js +++ b/app/components/AvatarContainer.js @@ -5,9 +5,9 @@ export default function AvatarContainer({ ...props }) { const sizeStyles = { - small: "flex -space-x-2", + small: "flex -space-x-[var(--spacing-scale-008)]", medium: "flex -space-x-[9px]", - large: "flex -space-x-[10px]", + large: "flex -space-x-[var(--spacing-scale-010)]", xlarge: "flex -space-x-[13px]", }; diff --git a/app/components/HeaderTab.js b/app/components/HeaderTab.js index 1a1f7c3..0756504 100644 --- a/app/components/HeaderTab.js +++ b/app/components/HeaderTab.js @@ -10,7 +10,7 @@ export default function HeaderTab({ return (
{children} diff --git a/app/components/HeroBanner.js b/app/components/HeroBanner.js index 419f16c..3fe84c8 100644 --- a/app/components/HeroBanner.js +++ b/app/components/HeroBanner.js @@ -8,7 +8,7 @@ const HeroBanner = ({ title, subtitle, description, ctaText, ctaHref }) => {
{/* Frame container for content */} -
+
{/* DECORATIONS (behind content) */} +
Hero illustration { return (
+ {/* DECORATIONS (behind content) */} + {config.showDecor && ( +
+ ); +}; + +export default QuoteBlock; diff --git a/app/components/QuoteDecor.js b/app/components/QuoteDecor.js new file mode 100644 index 0000000..cd2a5f4 --- /dev/null +++ b/app/components/QuoteDecor.js @@ -0,0 +1,73 @@ +"use client"; + +const QuoteDecor = ({ className = "" }) => { + return ( + + ); +}; + +export default QuoteDecor; diff --git a/app/components/RuleCard.js b/app/components/RuleCard.js new file mode 100644 index 0000000..291b90f --- /dev/null +++ b/app/components/RuleCard.js @@ -0,0 +1,73 @@ +"use client"; + +const RuleCard = ({ + title, + description, + icon, + backgroundColor = "bg-[var(--color-community-teal-100)]", + className = "", + onClick, +}) => { + const handleClick = () => { + // Basic analytics event tracking + if (typeof window !== "undefined" && window.gtag) { + window.gtag("event", "template_selected", { + template_name: title, + template_type: "governance_pattern", + }); + } + + // Custom analytics event for other tracking systems + if (typeof window !== "undefined" && window.analytics) { + window.analytics.track("Template Selected", { + templateName: title, + templateType: "governance_pattern", + }); + } + + if (onClick) onClick(); + }; + + const handleKeyDown = (event) => { + if (event.key === "Enter" || event.key === " ") { + event.preventDefault(); + handleClick(); + } + }; + + return ( +
+ {/* Header Container */} +
+ {/* Icon Container */} + {icon && ( +
+ {icon} +
+ )} + {/* Title Container */} + {title && ( +
+

+ {title} +

+
+ )} +
+ {description && ( +

+ {description} +

+ )} +
+ ); +}; + +export default RuleCard; diff --git a/app/components/RuleStack.js b/app/components/RuleStack.js new file mode 100644 index 0000000..f5b9733 --- /dev/null +++ b/app/components/RuleStack.js @@ -0,0 +1,103 @@ +"use client"; + +import React from "react"; +import Image from "next/image"; +import RuleCard from "./RuleCard"; +import Button from "./Button"; + +const RuleStack = ({ className = "" }) => { + const handleTemplateClick = (templateName) => { + // Basic analytics tracking + if (typeof window !== "undefined") { + if (window.gtag) { + window.gtag("event", "template_click", { + template_name: templateName, + }); + } + if (window.analytics) { + window.analytics.track("Template Clicked", { + templateName: templateName, + }); + } + } + console.log(`${templateName} template clicked`); + }; + + return ( +
+
+ + } + backgroundColor="bg-[var(--color-surface-default-brand-lime)]" + onClick={() => handleTemplateClick("Consensus clusters")} + /> + + } + backgroundColor="bg-[var(--color-surface-default-brand-rust)]" + onClick={() => handleTemplateClick("Consensus")} + /> + + } + backgroundColor="bg-[var(--color-surface-default-brand-red)]" + onClick={() => handleTemplateClick("Elected Board")} + /> + + } + backgroundColor="bg-[var(--color-surface-default-brand-teal)]" + onClick={() => handleTemplateClick("Petition")} + /> +
+ + {/* See all templates button */} +
+ +
+
+ ); +}; + +export default RuleStack; diff --git a/app/components/SectionHeader.js b/app/components/SectionHeader.js index e6dfe6c..6be3c1b 100644 --- a/app/components/SectionHeader.js +++ b/app/components/SectionHeader.js @@ -1,19 +1,49 @@ "use client"; -const SectionHeader = ({ title, subtitle, titleLg }) => { +const SectionHeader = ({ title, subtitle, titleLg, variant = "default" }) => { return ( -
+
{/* Title Container - Left side (lg breakpoint) */} -
-

+
+

{title} {titleLg || title}

{/* Subtitle Container */} -
-

+

+

{subtitle}

diff --git a/app/globals.css b/app/globals.css index bdc4871..a8c908b 100644 --- a/app/globals.css +++ b/app/globals.css @@ -12,6 +12,11 @@ -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial; } +.font-space-grotesk { + font-family: var(--font-space-grotesk), ui-sans-serif, system-ui, + -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial; +} + /* Set default body text face */ html, body { diff --git a/app/layout.js b/app/layout.js index 18e97dc..d4d41bc 100644 --- a/app/layout.js +++ b/app/layout.js @@ -1,24 +1,35 @@ -import { Inter, Bricolage_Grotesque } from "next/font/google"; +import { Inter, Bricolage_Grotesque, Space_Grotesk } from "next/font/google"; import "./globals.css"; import HomeHeader from "./components/HomeHeader"; import Footer from "./components/Footer"; const inter = Inter({ subsets: ["latin"], - weight: ["400", "500"], + weight: ["400", "500", "600", "700"], variable: "--font-inter", + display: "swap", }); const bricolageGrotesque = Bricolage_Grotesque({ subsets: ["latin"], - weight: ["400", "500"], + weight: ["400", "500", "700", "800"], variable: "--font-bricolage-grotesque", + display: "swap", +}); + +const spaceGrotesk = Space_Grotesk({ + subsets: ["latin"], + weight: ["400", "500", "700"], + variable: "--font-space-grotesk", + display: "swap", }); export default function RootLayout({ children }) { return ( - - + +
{children}
diff --git a/app/page.js b/app/page.js index 5e07816..ac8d1fd 100644 --- a/app/page.js +++ b/app/page.js @@ -1,6 +1,8 @@ import NumberedCards from "./components/NumberedCards"; import HeroBanner from "./components/HeroBanner"; import LogoWall from "./components/LogoWall"; +import RuleStack from "./components/RuleStack"; +import QuoteBlock from "./components/QuoteBlock"; export default function Page() { const heroBannerData = { @@ -39,6 +41,8 @@ export default function Page() { + +
); } diff --git a/app/tailwind.css b/app/tailwind.css index 6cb9b11..b2602f0 100644 --- a/app/tailwind.css +++ b/app/tailwind.css @@ -1,26 +1,31 @@ -/** - * This file was generated by Supernova.io and should not be changed manually. - * To modify the format or content of this file, please contact your design system team. - */ - @import "tailwindcss"; /* Make sure Tailwind scans stories and .storybook files */ @source "../stories/**/*"; @source "../app/**/*"; @source "../.storybook/**/*"; +@source "./**/*"; @theme inline { /* Custom breakpoints */ --breakpoint-xsm: 429px; --breakpoint-sm: 430px; --breakpoint-md: 640px; + --breakpoint-xmd: 768px; --breakpoint-lg: 1024px; --breakpoint-xl: 1440px; - /* Reset default Tailwind configuration */ + /* Reset Tailwind color defaults to avoid collisions */ --color-*: initial; + /* Font families */ + --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; + --font-mono: var(--font-space-grotesk), ui-monospace, SFMono-Regular, + "SF Mono", Consolas, "Liberation Mono", Menlo, monospace; + /* Dimension */ --spacing-scale-000: 0px; --spacing-scale-001: 1px; @@ -44,8 +49,10 @@ --spacing-scale-076: 76px; --spacing-scale-096: 96px; --spacing-scale-120: 120px; + --spacing-scale-160: 160px; --spacing-scale-260: 260px; --spacing-scale-290: 290px; + --spacing-measures-sizing-008: var(--spacing-scale-008); --spacing-measures-sizing-010: var(--spacing-scale-010); --spacing-measures-sizing-012: var(--spacing-scale-012); @@ -60,11 +67,14 @@ --spacing-measures-sizing-064: var(--spacing-scale-064); --spacing-measures-sizing-076: var(--spacing-scale-076); --spacing-measures-sizing-096: var(--spacing-scale-096); - --spacing-measures-spacing-000: var(--spacing-scale-000); --spacing-measures-sizing-120: var(--spacing-scale-120); + + /* Spacing aliases */ + --spacing-measures-spacing-000: var(--spacing-scale-000); --spacing-measures-spacing-001: var(--spacing-scale-001); --spacing-measures-spacing-002: var(--spacing-scale-002); --spacing-measures-spacing-004: var(--spacing-scale-004); + --spacing-measures-spacing-006: var(--spacing-scale-006); --spacing-measures-spacing-008: var(--spacing-scale-008); --spacing-measures-spacing-010: var(--spacing-scale-010); --spacing-measures-spacing-012: var(--spacing-scale-012); @@ -80,196 +90,981 @@ --spacing-measures-spacing-076: var(--spacing-scale-076); --spacing-measures-spacing-096: var(--spacing-scale-096); --spacing-measures-spacing-120: var(--spacing-scale-120); + --spacing-measures-spacing-160: var(--spacing-scale-160); + --spacing-measures-spacing-260: var(--spacing-scale-260); - /* BorderRadius */ + /* Border radius */ --radius-measures-radius-none: var(--spacing-scale-000); - --radius-measures-radius-small: var(--spacing-scale-002); - --radius-measures-radius-medium: var(--spacing-scale-004); - --radius-measures-radius-large: var(--spacing-scale-008); - --radius-measures-radius-xlarge: var(--spacing-scale-012); - --radius-measures-radius-full: var(--spacing-scale-120); + --radius-measures-radius-xsmall: var(--spacing-scale-006); + --radius-measures-radius-small: var(--spacing-scale-012); + --radius-measures-radius-medium: var(--spacing-scale-016); + --radius-measures-radius-large: var(--spacing-scale-024); + --radius-measures-radius-xlarge: var(--spacing-scale-032); + --radius-measures-radius-full: 9999px; - /* BorderWidth */ - --border-measures-stroke-large: var(--spacing-scale-003); - --border-measures-stroke-medium: var(--spacing-scale-002); + /* Border widths */ --border-measures-stroke-small: var(--spacing-scale-001); + --border-measures-stroke-medium: var(--spacing-scale-002); + --border-measures-stroke-large: var(--spacing-scale-003); - /* Color */ - --color-community-yellow-100: oklch(98.48% 0.055 105.21); - --color-community-yellow-200: oklch(94.76% 0.083 103.43); - --color-community-yellow-300: oklch(90.22% 0.095 102.92); - --color-community-yellow-400: oklch(84.34% 0.097 101.09); - --color-community-yellow-500: oklch(76.71% 0.094 100.01); - --color-community-yellow-600: oklch(66.85% 0.083 99.46); - --color-community-yellow-700: oklch(55.29% 0.069 98.1); - --color-community-yellow-800: oklch(42.89% 0.054 98.59); - --color-community-yellow-900: oklch(30.32% 0.036 99.23); - --color-community-teal-050: oklch(95.63% 0.022 13.86); - --color-community-orange-050: oklch(98.55% 0.017 201.66); - --color-community-mauve-050: oklch(98.1% 0.009 100.14); - --color-community-orange-100: oklch(95.43% 0.06 198.83); - --color-community-orange-200: oklch(83.58% 0.121 198.44); - --color-community-orange-300: oklch(69.29% 0.124 217.83); - --color-community-orange-400: oklch(50.04% 0.102 233.41); - --color-community-orange-500: oklch(39.59% 0.091 242.29); - --color-community-orange-600: oklch(31.94% 0.096 255.01); - --color-community-orange-700: oklch(20.28% 0.053 252.69); - --color-community-blue-050: oklch(39.46% 0.149 259.87); - --color-community-kiwi-050: oklch(97.77% 0.031 127.13); - --color-community-pink-050: oklch(95.93% 0.032 321.01); - --color-community-pink-100: oklch(90.78% 0.072 319.41); - --color-community-pink-200: oklch(85.82% 0.091 318.38); - --color-community-pink-300: oklch(81.18% 0.096 318.17); - --color-community-pink-400: oklch(75.77% 0.097 317.51); - --color-community-pink-500: oklch(68.84% 0.092 316.79); - --color-community-pink-600: oklch(60.22% 0.08 316.45); - --color-community-pink-700: oklch(50.08% 0.065 315.63); - --color-community-pink-800: oklch(38.98% 0.049 315.23); - --color-community-pink-900: oklch(27.83% 0.03 314.26); - --color-community-red-050: oklch(96.51% 0.014 22.47); - --color-yellow-opacity-000: oklch(30.32% 0.036 99.23 / 0%); - --color-yellow-opacity-001: oklch(30.32% 0.036 99.23 / 1%); - --color-yellow-opacity-050: oklch(30.32% 0.036 99.23 / 5%); - --color-yellow-opacity-100: oklch(30.32% 0.036 99.23 / 10%); - --color-yellow-opacity-200: oklch(42.89% 0.054 98.59 / 20%); - --color-yellow-opacity-300: oklch(55.29% 0.069 98.1 / 30%); - --color-yellow-opacity-400: oklch(66.85% 0.083 99.46 / 40%); - --color-yellow-opacity-500: oklch(76.71% 0.094 100.01 / 50%); - --color-yellow-opacity-600: oklch(84.34% 0.097 101.09 / 60%); - --color-yellow-opacity-700: oklch(90.22% 0.095 102.92 / 70%); - --color-yellow-opacity-800: oklch(94.76% 0.083 103.43 / 80%); - --color-yellow-opacity-900: oklch(98.48% 0.055 105.21 / 90%); - --color-opacity-000: oklch(97.31% 0 263.28 / 0%); - --color-opacity-001: oklch(97.31% 0 263.28 / 1%); - --color-opacity-050: oklch(97.31% 0 263.28 / 50%); - --color-opacity-100: oklch(94.91% 0 263.28 / 50%); - --color-opacity-200: oklch(91.28% 0 263.28 / 50%); - --color-opacity-300: oklch(84.21% 0 263.28 / 50%); - --color-opacity-400: oklch(75.4% 0 263.28 / 50%); - --color-opacity-500: oklch(56.24% 0 263.28 / 50%); - --color-opacity-600: oklch(44.59% 0 263.28 / 50%); - --color-opacity-700: oklch(32.11% 0 263.28 / 50%); - --color-opacity-800: oklch(23.93% 0 263.28 / 50%); - --color-opacity-900: oklch(19.13% 0 263.28 / 50%); - --color-gray-000: oklch(100% 0 263.28); - --color-gray-050: oklch(97.31% 0 263.28); - --color-gray-100: oklch(92.19% 0 263.28); - --color-gray-200: oklch(86.38% 0 263.28); - --color-gray-300: oklch(76.99% 0 263.28); - --color-gray-400: oklch(65% 0 263.28); - --color-gray-500: oklch(51.03% 0 263.28); - --color-gray-600: oklch(39.42% 0 263.28); - --color-gray-700: oklch(29.72% 0 263.28); - --color-gray-800: oklch(23.93% 0 263.28); - --color-gray-900: oklch(19.13% 0 263.28); - --color-gray-1000: oklch(0% 0 0); - --color-community-blue-100: oklch(94.43% 0.038 211.19); - --color-community-blue-200: oklch(91.44% 0.048 211.24); - --color-community-blue-300: oklch(87.85% 0.052 210.11); - --color-community-blue-400: oklch(82.74% 0.054 206.72); - --color-community-blue-500: oklch(75.92% 0.052 204.06); - --color-community-blue-600: oklch(66.92% 0.047 201.57); - --color-community-blue-700: oklch(55.72% 0.04 200.59); - --color-community-blue-800: oklch(43.34% 0.03 199.27); - --color-community-blue-900: oklch(30.78% 0.02 196.24); - --color-community-red-100: oklch(86.1% 0.051 359.55); - --color-community-red-200: oklch(82% 0.065 0.21); - --color-community-red-300: oklch(77.79% 0.072 359.58); - --color-community-red-400: oklch(73.06% 0.073 359.79); - --color-community-red-500: oklch(66.82% 0.07 359.71); - --color-community-red-600: oklch(58.65% 0.062 357.88); - --color-community-red-700: oklch(49.14% 0.05 359.07); - --color-community-red-800: oklch(38.48% 0.039 356.54); - --color-community-red-900: oklch(28.01% 0.024 356.91); - --color-community-orange-800: oklch(40.58% 0.027 46.54); - --color-community-orange-900: oklch(29.05% 0.017 48.05); - --color-community-mauve-100: oklch(88.23% 0.059 282.99); - --color-community-mauve-200: oklch(82.9% 0.074 281.26); - --color-community-mauve-300: oklch(78.02% 0.08 281.18); - --color-community-mauve-400: oklch(72.83% 0.08 280.17); - --color-community-mauve-500: oklch(66.39% 0.075 278.85); - --color-community-mauve-600: oklch(58.34% 0.063 277.78); - --color-community-mauve-700: oklch(48.68% 0.052 277.4); - --color-community-mauve-800: oklch(38.09% 0.038 276.43); - --color-community-mauve-900: oklch(27.24% 0.024 277.83); - --color-green0: oklch(98.15% 0.028 155.49); - --color-community-teal-100: oklch(96.1% 0.059 157.85); - --color-community-teal-200: oklch(92.78% 0.075 157.69); - --color-community-teal-300: oklch(88.65% 0.079 158.06); - --color-community-teal-400: oklch(83.47% 0.079 158.61); - --color-community-teal-500: oklch(76.31% 0.074 159.02); - --color-community-teal-600: oklch(66.77% 0.064 159.89); - --color-community-teal-700: oklch(55.57% 0.052 160.52); - --color-community-teal-800: oklch(43.12% 0.039 160.72); - --color-community-teal-900: oklch(30.48% 0.025 161.27); - --color-community-kiwi-100: oklch(92.3% 0.055 122.16); - --color-community-kiwi-200: oklch(89.94% 0.07 122.82); - --color-community-kiwi-300: oklch(86.7% 0.077 122.51); - --color-community-kiwi-400: oklch(81.99% 0.078 123.36); - --color-community-kiwi-500: oklch(75.31% 0.074 122.9); - --color-community-kiwi-600: oklch(66.25% 0.066 123.19); - --color-community-kiwi-700: oklch(55.28% 0.055 123.2); - --color-community-kiwi-800: oklch(43.14% 0.041 122.55); - --color-community-kiwi-900: oklch(31.14% 0.027 122.95); - --color-content-default-utility-positive: oklch(55.09% 0.151 143.2); - --color-content-default-utility-negative: oklch(58.87% 0.184 29.83); - --color-content-default-utility-info: oklch(55.14% 0.217 260.1); - --color-content-inverse-utility-positive: oklch(70.5% 0.146 138.3); - --color-content-inverse-utility-warning: oklch(79.77% 0.155 89.66); - --color-content-inverse-utility-negative: oklch(69.63% 0.149 28.39); - --color-content-inverse-utility-info: oklch(61.97% 0.194 258.88); - --color-surface-default-utility-info: oklch(55.14% 0.217 260.1); - --color-surface-default-utility-negative: oklch(58.87% 0.184 29.83); - --color-surface-default-utility-warning: oklch(57.3% 0.12 74.7); - --color-surface-default-utility-positive: oklch(55.09% 0.151 143.2); - --color-surface-default-brand-accent: oklch(79.17% 0.121 16.33); - --color-surface-inverse-utility-info: oklch(61.97% 0.194 258.88); - --color-surface-inverse-utility-negative: oklch(69.63% 0.149 28.39); - --color-surface-inverse-utility-warning: oklch(79.77% 0.155 89.66); - --color-surface-inverse-utility-positive: oklch(70.5% 0.146 138.3); - --border-color-default-utility-info: oklch(61.97% 0.194 258.88); - --border-color-default-utility-negative: oklch(69.63% 0.149 28.39); - --border-color-default-utility-warning: oklch(79.77% 0.155 89.66); - --border-color-default-utility-positive: oklch(70.5% 0.146 138.3); - --border-color-inverse-brandaccent: oklch(62.78% 0.234 25.05); - --color-content-default-utility-warning: var(--color-community-yellow-500); + /* Compatibility aliases */ + --measures-radius-none: var(--radius-measures-radius-none); + --measures-radius-xsmall: var(--radius-measures-radius-xsmall); + --measures-radius-small: var(--radius-measures-radius-small); + --measures-radius-medium: var(--radius-measures-radius-medium); + --measures-radius-large: var(--radius-measures-radius-large); + --measures-radius-xlarge: var(--radius-measures-radius-xlarge); + --measures-radius-full: var(--radius-measures-radius-full); + --measures-stroke-small: var(--border-measures-stroke-small); + --measures-stroke-medium: var(--border-measures-stroke-medium); + --measures-stroke-large: var(--border-measures-stroke-large); + --measures-sizing-008: var(--spacing-measures-sizing-008); + --measures-sizing-010: var(--spacing-measures-sizing-010); + --measures-sizing-012: var(--spacing-measures-sizing-012); + --measures-sizing-016: var(--spacing-measures-sizing-016); + --measures-sizing-020: var(--spacing-measures-sizing-020); + --measures-sizing-024: var(--spacing-measures-sizing-024); + --measures-sizing-032: var(--spacing-measures-sizing-032); + --measures-sizing-040: var(--spacing-measures-sizing-040); + --measures-sizing-048: var(--spacing-measures-sizing-048); + --measures-sizing-056: var(--spacing-measures-sizing-056); + --measures-sizing-060: var(--spacing-measures-sizing-060); + --measures-sizing-064: var(--spacing-measures-sizing-064); + --measures-sizing-076: var(--spacing-measures-sizing-076); + --measures-sizing-096: var(--spacing-measures-sizing-096); + --measures-sizing-120: var(--spacing-measures-sizing-120); + --measures-spacing-000: var(--spacing-measures-spacing-000); + --measures-spacing-001: var(--spacing-measures-spacing-001); + --measures-spacing-002: var(--spacing-measures-spacing-002); + --measures-spacing-004: var(--spacing-measures-spacing-004); + --measures-spacing-006: var(--spacing-measures-spacing-006); + --measures-spacing-008: var(--spacing-measures-spacing-008); + --measures-spacing-010: var(--spacing-measures-spacing-010); + --measures-spacing-012: var(--spacing-measures-spacing-012); + --measures-spacing-016: var(--spacing-measures-spacing-016); + --measures-spacing-020: var(--spacing-measures-spacing-020); + --measures-spacing-024: var(--spacing-measures-spacing-024); + --measures-spacing-032: var(--spacing-measures-spacing-032); + --measures-spacing-040: var(--spacing-measures-spacing-040); + --measures-spacing-048: var(--spacing-measures-spacing-048); + --measures-spacing-056: var(--spacing-measures-spacing-056); + --measures-spacing-060: var(--spacing-measures-spacing-060); + --measures-spacing-064: var(--spacing-measures-spacing-064); + --measures-spacing-076: var(--spacing-measures-spacing-076); + --measures-spacing-096: var(--spacing-measures-spacing-096); + --measures-spacing-120: var(--spacing-measures-spacing-120); + --measures-spacing-160: var(--spacing-measures-spacing-160); + --measures-spacing-260: var(--spacing-measures-spacing-260); + + /* Grays & alpha */ + --color-gray-000: #ffffff; + --color-gray-050: #f6f6f6; + --color-gray-100: #e5e5e5; + --color-gray-200: #d2d2d2; + --color-gray-300: #b4b4b4; + --color-gray-400: #8f8f8f; + --color-gray-500: #666666; + --color-gray-600: #464646; + --color-gray-700: #2d2d2d; + --color-gray-800: #1f1f1f; + --color-gray-900: #141414; + --color-gray-1000: #000000; + + --color-opacity-000: #00000000; + --color-opacity-001: #00000003; + --color-opacity-050: #0000000d; + --color-opacity-100: #0000001a; + --color-opacity-200: #00000033; + --color-opacity-300: #0000004d; + --color-opacity-400: #00000066; + --color-opacity-500: #00000080; + --color-opacity-600: #00000099; + --color-opacity-700: #000000b2; + --color-opacity-800: #000000cc; + --color-opacity-900: #000000e5; + + /* Kiwi */ + --color-kiwi-kiwi0: #ebfff2; + --color-kiwi-kiwi50: #c9fedf; + --color-kiwi-kiwi100: #a8fdcd; + --color-kiwi-kiwi150: #8cf9bd; + --color-kiwi-kiwi200: #6ff6ae; + --color-kiwi-kiwi300: #45ea97; + --color-kiwi-kiwi400: #29d984; + --color-kiwi-kiwi500: #16c472; + --color-kiwi-kiwi600: #0ba960; + --color-kiwi-kiwi700: #058c4e; + --color-kiwi-kiwi800: #016c3c; + --color-kiwi-kiwi900: #004d2b; + --color-kiwi-kiwi1000: #00331c; + + /* Lavender */ + --color-lavender-lavender0: #f0ebff; + --color-lavender-lavender50: #e8defe; + --color-lavender-lavender100: #e0d1fd; + --color-lavender-lavender150: #d7c3f9; + --color-lavender-lavender200: #ceb5f6; + --color-lavender-lavender300: #bb97ea; + --color-lavender-lavender400: #a578d9; + --color-lavender-lavender500: #8d5ac4; + --color-lavender-lavender600: #743ea9; + --color-lavender-lavender700: #5a278c; + --color-lavender-lavender800: #41146c; + --color-lavender-lavender900: #2b074d; + --color-lavender-lavender1000: #1a0033; + + /* Lime */ + --color-lime-lime0: #fbffeb; + --color-lime-lime50: #f2fec9; + --color-lime-lime100: #e7fda8; + --color-lime-lime150: #daf98c; + --color-lime-lime200: #ccf66f; + --color-lime-lime300: #b1ea45; + --color-lime-lime400: #98d929; + --color-lime-lime500: #80c416; + --color-lime-lime600: #6aa90b; + --color-lime-lime700: #548c05; + --color-lime-lime800: #406c01; + --color-lime-lime900: #2d4d00; + --color-lime-lime1000: #1e3300; + + /* Magenta */ + --color-magenta-magenta0: #ffebf0; + --color-magenta-magenta50: #fedee7; + --color-magenta-magenta100: #fdd1dd; + --color-magenta-magenta150: #f9c3d2; + --color-magenta-magenta200: #f6b5c7; + --color-magenta-magenta300: #ea97ad; + --color-magenta-magenta400: #d97892; + --color-magenta-magenta500: #c45a76; + --color-magenta-magenta600: #a93e5b; + --color-magenta-magenta700: #8c2742; + --color-magenta-magenta800: #6c142b; + --color-magenta-magenta900: #4d071a; + --color-magenta-magenta1000: #33000e; + + /* Red */ + --color-red-red0: #ffebf1; + --color-red-red50: #fec9d6; + --color-red-red100: #fda8b7; + --color-red-red150: #f98c98; + --color-red-red200: #f66f78; + --color-red-red300: #ea4845; + --color-red-red400: #d93529; + --color-red-red500: #c42916; + --color-red-red600: #a9200b; + --color-red-red700: #8c1905; + --color-red-red800: #6c1301; + --color-red-red900: #4d0d00; + --color-red-red1000: #330800; + + /* Royal Blue */ + --color-royal-blue-royal-blue0: #ebecff; + --color-royal-blue-royal-blue50: #c9cdfe; + --color-royal-blue-royal-blue100: #a8adfd; + --color-royal-blue-royal-blue150: #8c91f9; + --color-royal-blue-royal-blue200: #6f74f6; + --color-royal-blue-royal-blue300: #4548ea; + --color-royal-blue-royal-blue400: #2b29d9; + --color-royal-blue-royal-blue500: #1c16c4; + --color-royal-blue-royal-blue600: #140ba9; + --color-royal-blue-royal-blue700: #0f058c; + --color-royal-blue-royal-blue800: #0c016c; + --color-royal-blue-royal-blue900: #0a004d; + --color-royal-blue-royal-blue1000: #080033; + + /* Rust */ + --color-rust-rust0: #ffedeb; + --color-rust-rust50: #fed8d4; + --color-rust-rust100: #fdc4bd; + --color-rust-rust150: #f9b0a6; + --color-rust-rust200: #f69c8f; + --color-rust-rust300: #ea7a65; + --color-rust-rust400: #d96043; + --color-rust-rust500: #c44e29; + --color-rust-rust600: #a94417; + --color-rust-rust700: #8c3d0b; + --color-rust-rust800: #6c3604; + --color-rust-rust900: #4d2c01; + --color-rust-rust1000: #332100; + + /* Teal */ + --color-teal-teal0: #ebfffc; + --color-teal-teal50: #c9fef9; + --color-teal-teal100: #a8fdf8; + --color-teal-teal150: #8cf9f8; + --color-teal-teal200: #6ff2f6; + --color-teal-teal300: #45dcea; + --color-teal-teal400: #29c3d9; + --color-teal-teal500: #16a9c4; + --color-teal-teal600: #0b8ea9; + --color-teal-teal700: #05728c; + --color-teal-teal800: #01576c; + --color-teal-teal900: #003e4d; + --color-teal-teal1000: #002933; + + /* Yellow */ + --color-yellow-yellow0: #fffeeb; + --color-yellow-yellow50: #fefcc9; + --color-yellow-yellow100: #fdfaa8; + --color-yellow-yellow150: #f9f58c; + --color-yellow-yellow200: #f6f06f; + --color-yellow-yellow300: #eae345; + --color-yellow-yellow400: #d9d129; + --color-yellow-yellow500: #c4bb16; + --color-yellow-yellow600: #a9a20b; + --color-yellow-yellow700: #8c8505; + --color-yellow-yellow800: #6c6701; + --color-yellow-yellow900: #4d4a00; + --color-yellow-yellow1000: #333000; + + /* Border */ + --color-border-default-brand-accent: var(--color-yellow-yellow300); + --color-border-default-brand-primary: var(--color-yellow-yellow100); + --color-border-default-brand-secondary: var(--color-rust-rust100); + --color-border-default-primary: var(--color-gray-900); + --color-border-default-secondary: var(--color-gray-800); + --color-border-default-tertiary: var(--color-gray-600); + --color-border-default-utility-info: var(--color-royal-blue-royal-blue300); + --color-border-default-utility-negative: var(--color-red-red300); + --color-border-default-utility-positive: var(--color-kiwi-kiwi300); + --color-border-default-utility-warning: var(--color-yellow-yellow300); + + --color-border-inverse-brand-accent: var(--color-yellow-yellow50); + --color-border-inverse-brand-primary: var(--color-yellow-yellow800); + --color-border-inverse-brand-secondary: var(--color-rust-rust800); + --color-border-inverse-primary: var(--color-gray-000); + --color-border-inverse-secondary: var(--color-opacity-200); + --color-border-inverse-tertiary: var(--color-opacity-300); + --color-border-inverse-utility-info: var(--color-royal-blue-royal-blue300); + --color-border-inverse-utility-negative: var(--color-red-red300); + --color-border-inverse-utility-positive: var(--color-kiwi-kiwi400); + --color-border-inverse-utility-warning: var(--color-yellow-yellow400); + + /* Content */ + --color-content-brand-darker-accent-2: var(--color-yellow-yellow200); + --color-content-brand-kiwi: var(--color-kiwi-kiwi600); + --color-content-brand-lavender: var(--color-lavender-lavender500); + --color-content-brand-lighter-accent-2: var(--color-yellow-yellow100); + --color-content-brand-lime: var(--color-lime-lime500); + --color-content-brand-primary: var(--color-yellow-yellow50); + --color-content-brand-red: var(--color-red-red400); + --color-content-brand-royal: var(--color-royal-blue-royal-blue400); + --color-content-brand-rust: var(--color-rust-rust400); + --color-content-brand-teal: var(--color-teal-teal500); + + --color-content-default-brand-accent: var(--color-opacity-700); + --color-content-default-brand-primary: var(--color-yellow-yellow50); + --color-content-default-brand-secondary: var(--color-rust-rust400); --color-content-default-primary: var(--color-gray-000); --color-content-default-secondary: var(--color-gray-200); --color-content-default-tertiary: var(--color-gray-300); - --color-content-default-brand-primary: var(--color-community-yellow-100); - --color-content-default-brand-secondary: var(--color-community-orange-400); - --color-content-default-brand-accent: var(--color-yellow-opacity-700); + --color-content-default-utility-info: var(--color-royal-blue-royal-blue500); + --color-content-default-utility-negative: var(--color-red-red400); + --color-content-default-utility-positive: var(--color-lime-lime400); + --color-content-default-utility-warning: var(--color-yellow-yellow500); + + --color-content-inverse-brand-accent: var(--color-yellow-yellow700); + --color-content-inverse-brand-primary: var(--color-yellow-yellow900); + --color-content-inverse-brand-secondary: var(--color-rust-rust800); --color-content-inverse-primary: var(--color-gray-1000); --color-content-inverse-secondary: var(--color-gray-800); --color-content-inverse-tertiary: var(--color-gray-700); - --color-content-inverse-brand-primary: var(--color-community-yellow-900); - --color-content-inverse-brand-secondary: var(--color-community-orange-300); - --color-content-inverse-brand-accent: var(--color-yellow-opacity-400); - --color-surface-default-brand-primary: var(--color-community-yellow-100); - --color-surface-default-brand-secondary: var(--color-community-yellow-900); + --color-content-inverse-utility-info: var(--color-royal-blue-royal-blue300); + --color-content-inverse-utility-negative: var(--color-red-red300); + --color-content-inverse-utility-positive: var(--color-kiwi-kiwi300); + --color-content-inverse-utility-warning: var(--color-yellow-yellow300); + + /* Surface */ + --color-surface-default-brand-red: var(--color-red-red100); + --color-surface-default-brand-darker-accent: var(--color-yellow-yellow200); + --color-surface-default-brand-kiwi: var(--color-kiwi-kiwi200); + --color-surface-default-brand-lavender: var(--color-lavender-lavender200); + --color-surface-default-brand-lighter-accent: var(--color-yellow-yellow100); + --color-surface-default-brand-lime: var(--color-lime-lime100); + --color-surface-default-brand-primary: var(--color-yellow-yellow100); + --color-surface-default-brand-royal: var(--color-royal-blue-royal-blue50); + --color-surface-default-brand-rust: var(--color-rust-rust100); + --color-surface-default-brand-teal: var(--color-teal-teal50); + --color-surface-default-primary: var(--color-gray-1000); --color-surface-default-secondary: var(--color-gray-900); - --color-surface-inverse-primary: var(--color-gray-000); + --color-surface-default-semi-opaque: var(--color-opacity-050); --color-surface-default-tertiary: var(--color-gray-800); + --color-surface-default-transparent: var(--color-opacity-000); + + --color-surface-default-utility-info: var(--color-royal-blue-royal-blue400); + --color-surface-default-utility-negative: var(--color-red-red400); + --color-surface-default-utility-positive: var(--color-kiwi-kiwi500); + --color-surface-default-utility-warning: var(--color-yellow-yellow500); + + --color-surface-inverse-brand-accent: var(--color-yellow-yellow100); + --color-surface-inverse-brand-primary: var(--color-yellow-yellow50); + --color-surface-inverse-brand-secondary: var(--color-rust-rust300); + --color-surface-inverse-primary: var(--color-gray-000); --color-surface-inverse-secondary: var(--color-gray-100); --color-surface-inverse-tertiary: var(--color-gray-200); - --color-surface-inverse-brand-primary: var(--color-community-yellow-100); - --color-surface-inverse-brand-secondary: var(--color-community-orange-300); - --color-surface-inverse-brand-accent: var(--color-yellow-opacity-100); - --border-color-default-primary: var(--color-gray-900); - --border-color-inverse-utility-info: var(--color-community-blue-300); - --border-color-inverse-primary: var(--color-gray-000); - --border-color-default-secondary: var(--color-gray-800); - --border-color-inverse-secondary: var(--color-opacity-200); - --border-color-inverse-tertiary: var(--color-opacity-300); - --border-color-default-tertiary: var(--color-gray-600); - --border-color-inverse-utility-negative: var(--color-community-red-300); - --border-color-default-brandprimary: var(--color-community-yellow-100); - --border-color-inverse-utility-warning: var(--color-community-yellow-400); - --border-color-inverse-utility-positive: var(--color-community-kiwi-400); - --border-color-default-brandsecondary: var(--color-community-orange-400); - --border-color-default-brandaccent: var(--color-yellow-opacity-300); - --border-color-inverse-brandprimary: var(--color-community-yellow-800); - --border-color-inverse-brandsecondary: var(--color-community-orange-300); - --color-surface-default-transparent: var(--color-opacity-000); + --color-surface-inverse-utility-info: var(--color-royal-blue-royal-blue300); + --color-surface-inverse-utility-negative: var(--color-red-red300); + --color-surface-inverse-utility-positive: var(--color-kiwi-kiwi300); + --color-surface-inverse-utility-warning: var(--color-yellow-yellow300); + + /* Color */ + --color-config-europe-morning-magenta: oklch(66.27% 0.264 321.73); + /* white */ + --bg-color-light-primary: oklch(100% 0 263.28); + + /* Shadow */ + --shadow-focus-default: 0px 0px 10px 1px oklch(98.01% 0.065 105.71); + --shadow-subtle: 0px 0px 48px 0px oklch(0% 0 0 / 10%); + --shadow-minimal-shadow: 0px 0px 8px 0px oklch(0% 0 0 / 15%); + --shadow-focus-inverse: 0px 0px 10px 1px oklch(23.93% 0 263.28); + /* Use this shadow most of the time */ + --shadow-shallow-below: 0px 4px 16px 0px oklch(0% 0 0 / 12%); + --shadow-default: 0px 4px 6px 0px oklch(0% 0 0 / 9%); + + /* Typography */ + --text-xx-large-display: 96px; + --text-xx-large-display--line-height: 110%; + --text-xx-large-display--letter-spacing: 0px; + --text-xx-large-display--font-weight: 400; + + --text-xx-large-heading: 40px; + --text-xx-large-heading--line-height: 52px; + --text-xx-large-heading--letter-spacing: 0px; + --text-xx-large-heading--font-weight: 700; + + --text-x-large-heading: 36px; + --text-x-large-heading--line-height: 44px; + --text-x-large-heading--letter-spacing: 0px; + --text-x-large-heading--font-weight: 800; + + --text-large-heading: 32px; + --text-large-heading--line-height: 40px; + --text-large-heading--letter-spacing: 0px; + --text-large-heading--font-weight: 700; + + --text-medium-heading: 28px; + --text-medium-heading--line-height: 36px; + --text-medium-heading--letter-spacing: 0px; + --text-medium-heading--font-weight: 700; + + --text-small-heading: 24px; + --text-small-heading--line-height: 32px; + --text-small-heading--letter-spacing: 0px; + --text-small-heading--font-weight: 700; + + --text-x-small-heading: 20px; + --text-x-small-heading--line-height: 28px; + --text-x-small-heading--letter-spacing: 0px; + --text-x-small-heading--font-weight: 700; + + --text-large-label: 18px; + --text-large-label--line-height: 24px; + --text-large-label--letter-spacing: 0px; + --text-large-label--font-weight: 500; + + --text-medium-label: 16px; + --text-medium-label--line-height: 20px; + --text-medium-label--letter-spacing: 0px; + --text-medium-label--font-weight: 500; + + --text-small-label: 14px; + --text-small-label--line-height: 16px; + --text-small-label--letter-spacing: 0px; + --text-small-label--font-weight: 500; + + /* Regular 400 */ + --text-large-paragraph: 18px; + --text-large-paragraph--line-height: 130%; + --text-large-paragraph--letter-spacing: 0px; + --text-large-paragraph--font-weight: 400; + + --text-medium-paragraph: 16px; + --text-medium-paragraph--line-height: 24px; + --text-medium-paragraph--letter-spacing: 0px; + --text-medium-paragraph--font-weight: 400; + + --text-small-paragraph: 14px; + --text-small-paragraph--line-height: 20px; + --text-small-paragraph--letter-spacing: 0px; + --text-small-paragraph--font-weight: 400; + + --text-x-small-paragraph: 12px; + --text-x-small-paragraph--line-height: 16px; + --text-x-small-paragraph--letter-spacing: 0px; + --text-x-small-paragraph--font-weight: 400; + + --text-xx-small-label: 10px; + --text-xx-small-label--line-height: 12px; + --text-xx-small-label--letter-spacing: 0px; + --text-xx-small-label--font-weight: 500; + + --text-xx-small-paragraph: 10px; + --text-xx-small-paragraph--line-height: 14px; + --text-xx-small-paragraph--letter-spacing: 0px; + --text-xx-small-paragraph--font-weight: 400; + + --text-xx-small-italic: 10px; + --text-xx-small-italic--line-height: 14px; + --text-xx-small-italic--letter-spacing: 0px; + --text-xx-small-italic--font-weight: 400; + + --text-x-large-label: 24px; + --text-x-large-label--line-height: 28px; + --text-x-large-label--letter-spacing: 0px; + --text-x-large-label--font-weight: 400; + + --text-x-large-paragraph: 24px; + --text-x-large-paragraph--line-height: 32px; + --text-x-large-paragraph--letter-spacing: 0px; + --text-x-large-paragraph--font-weight: 400; + + --text-xx-large-paragraph: 32px; + --text-xx-large-paragraph--line-height: 40px; + --text-xx-large-paragraph--letter-spacing: 0px; + --text-xx-large-paragraph--font-weight: 400; + + --text-xx-large-label: 32px; + --text-xx-large-label--line-height: 36px; + --text-xx-large-label--letter-spacing: 0px; + --text-xx-large-label--font-weight: 400; + + --text-x-small-underline: 12px; + --text-x-small-underline--line-height: 14px; + --text-x-small-underline--letter-spacing: 0px; + --text-x-small-underline--font-weight: 400; + + --text-small-underline: 14px; + --text-small-underline--line-height: 16px; + --text-small-underline--letter-spacing: 0px; + --text-small-underline--font-weight: 400; + + --text-medium-underline: 16px; + --text-medium-underline--line-height: 20px; + --text-medium-underline--letter-spacing: 0px; + --text-medium-underline--font-weight: 400; + + --text-large-underline: 18px; + --text-large-underline--line-height: 24px; + --text-large-underline--letter-spacing: 0px; + --text-large-underline--font-weight: 400; + + --text-x-large-underline: 24px; + --text-x-large-underline--line-height: 28px; + --text-x-large-underline--letter-spacing: 0px; + --text-x-large-underline--font-weight: 400; + + --text-x-small-label: 12px; + --text-x-small-label--line-height: 14px; + --text-x-small-label--letter-spacing: 0px; + --text-x-small-label--font-weight: 500; + + --text-x-small-label-caps: 10px; + --text-x-small-label-caps--line-height: 12px; + --text-x-small-label-caps--letter-spacing: 0px; + --text-x-small-label-caps--font-weight: 500; + + --text-xx-small-heading: 16px; + --text-xx-small-heading--line-height: 22px; + --text-xx-small-heading--letter-spacing: 0px; + --text-xx-small-heading--font-weight: 700; + + --text-x-small-display: 24px; + --text-x-small-display--line-height: 24px; + --text-x-small-display--letter-spacing: 0px; + --text-x-small-display--font-weight: 400; + + --text-x-large-uppercase: 24px; + --text-x-large-uppercase--line-height: 120%; + --text-x-large-uppercase--letter-spacing: 0.48px; + --text-x-large-uppercase--font-weight: 400; + + --text-xx-large-uppercase: 32px; + --text-xx-large-uppercase--line-height: 120%; + --text-xx-large-uppercase--letter-spacing: 0.64px; + --text-xx-large-uppercase--font-weight: 400; + + --text-x-large-display: 64px; + --text-x-large-display--line-height: 110%; + --text-x-large-display--letter-spacing: 0px; + --text-x-large-display--font-weight: 400; + + --text-large-display: 52px; + --text-large-display--line-height: 110%; + --text-large-display--letter-spacing: 0px; + --text-large-display--font-weight: 400; + + --text-medium-display: 44px; + --text-medium-display--line-height: 110%; + --text-medium-display--letter-spacing: 0px; + --text-medium-display--font-weight: 400; + + --text-xx-small-display: 18px; + --text-xx-small-display--line-height: 120%; + --text-xx-small-display--letter-spacing: 0px; + --text-xx-small-display--font-weight: 400; + + --text-x-small-uppercase: 12px; + --text-x-small-uppercase--line-height: 120%; + --text-x-small-uppercase--letter-spacing: 0.24px; + --text-x-small-uppercase--font-weight: 400; + + --text-large-uppercase: 18px; + --text-large-uppercase--line-height: 120%; + --text-large-uppercase--letter-spacing: 0.36px; + --text-large-uppercase--font-weight: 400; + + --text-small-display: 36px; + --text-small-display--line-height: 110%; + --text-small-display--letter-spacing: 0px; + --text-small-display--font-weight: 400; +} + +@layer utilities { + .text-x-small-heading { + font-size: var(--text-x-small-heading); + line-height: var(--text-x-small-heading--line-height); + font-weight: var(--text-x-small-heading--font-weight); + letter-spacing: var(--text-x-small-heading--letter-spacing); + } + .text-x-small-paragraph { + font-size: var(--text-x-small-paragraph); + line-height: var(--text-x-small-paragraph--line-height); + font-weight: var(--text-x-small-paragraph--font-weight); + letter-spacing: var(--text-x-small-paragraph--letter-spacing); + } +} + +@layer components { + .xx-large-display { + font-family: var(--font-bricolage-grotesque); + font-size: var(--text-xx-large-display); + font-weight: var(--text-xx-large-display--font-weight); + line-height: var(--text-xx-large-display--line-height); + letter-spacing: var(--text-xx-large-display--letter-spacing); + text-decoration: none; + text-transform: none; + text-indent: 0px; + margin-bottom: 0px; + } + .xx-large-heading { + font-family: var(--font-bricolage-grotesque); + font-size: var(--text-xx-large-heading); + font-weight: var(--text-xx-large-heading--font-weight); + line-height: var(--text-xx-large-heading--line-height); + letter-spacing: var(--text-xx-large-heading--letter-spacing); + text-decoration: none; + text-transform: none; + text-indent: 0px; + margin-bottom: 0px; + } + .x-large-heading { + font-family: var(--font-bricolage-grotesque); + font-size: var(--text-x-large-heading); + font-weight: var(--text-x-large-heading--font-weight); + line-height: var(--text-x-large-heading--line-height); + letter-spacing: var(--text-x-large-heading--letter-spacing); + text-decoration: none; + text-transform: none; + text-indent: 0px; + margin-bottom: 0px; + } + .large-heading { + font-family: var(--font-bricolage-grotesque); + font-size: var(--text-large-heading); + font-weight: var(--text-large-heading--font-weight); + line-height: var(--text-large-heading--line-height); + letter-spacing: var(--text-large-heading--letter-spacing); + text-decoration: none; + text-transform: none; + text-indent: 0px; + margin-bottom: 0px; + } + .medium-heading { + font-family: var(--font-bricolage-grotesque); + font-size: var(--text-medium-heading); + font-weight: var(--text-medium-heading--font-weight); + line-height: var(--text-medium-heading--line-height); + letter-spacing: var(--text-medium-heading--letter-spacing); + text-decoration: none; + text-transform: none; + text-indent: 0px; + margin-bottom: 0px; + } + .small-heading { + font-family: var(--font-bricolage-grotesque); + font-size: var(--text-small-heading); + font-weight: var(--text-small-heading--font-weight); + line-height: var(--text-small-heading--line-height); + letter-spacing: var(--text-small-heading--letter-spacing); + text-decoration: none; + text-transform: none; + text-indent: 0px; + margin-bottom: 0px; + } + .x-small-heading { + font-family: var(--font-space-grotesk); + font-size: var(--text-x-small-heading); + font-weight: var(--text-x-small-heading--font-weight); + line-height: var(--text-x-small-heading--line-height); + letter-spacing: var(--text-x-small-heading--letter-spacing); + text-decoration: none; + text-transform: none; + text-indent: 0px; + margin-bottom: 0px; + } + .large-label { + font-family: var(--font-inter); + font-size: var(--text-large-label); + font-weight: var(--text-large-label--font-weight); + line-height: var(--text-large-label--line-height); + letter-spacing: var(--text-large-label--letter-spacing); + text-decoration: none; + text-transform: none; + text-indent: 0px; + margin-bottom: 0px; + } + .medium-label { + font-family: var(--font-inter); + font-size: var(--text-medium-label); + font-weight: var(--text-medium-label--font-weight); + line-height: var(--text-medium-label--line-height); + letter-spacing: var(--text-medium-label--letter-spacing); + text-decoration: none; + text-transform: none; + text-indent: 0px; + margin-bottom: 0px; + } + .small-label { + font-family: var(--font-inter); + font-size: var(--text-small-label); + font-weight: var(--text-small-label--font-weight); + line-height: var(--text-small-label--line-height); + letter-spacing: var(--text-small-label--letter-spacing); + text-decoration: none; + text-transform: none; + text-indent: 0px; + margin-bottom: 0px; + } + /* Regular 400 */ + .large-paragraph { + font-family: var(--font-inter); + font-size: var(--text-large-paragraph); + font-weight: var(--text-large-paragraph--font-weight); + line-height: var(--text-large-paragraph--line-height); + letter-spacing: var(--text-large-paragraph--letter-spacing); + text-decoration: none; + text-transform: none; + text-indent: 0px; + margin-bottom: 0px; + } + .medium-paragraph { + font-family: var(--font-inter); + font-size: var(--text-medium-paragraph); + font-weight: var(--text-medium-paragraph--font-weight); + line-height: var(--text-medium-paragraph--line-height); + letter-spacing: var(--text-medium-paragraph--letter-spacing); + text-decoration: none; + text-transform: none; + text-indent: 0px; + margin-bottom: 0px; + } + .small-paragraph { + font-family: var(--font-inter); + font-size: var(--text-small-paragraph); + font-weight: var(--text-small-paragraph--font-weight); + line-height: var(--text-small-paragraph--line-height); + letter-spacing: var(--text-small-paragraph--letter-spacing); + text-decoration: none; + text-transform: none; + text-indent: 0px; + margin-bottom: 0px; + } + .x-small-paragraph { + font-family: var(--font-inter); + font-size: var(--text-x-small-paragraph); + font-weight: var(--text-x-small-paragraph--font-weight); + line-height: var(--text-x-small-paragraph--line-height); + letter-spacing: var(--text-x-small-paragraph--letter-spacing); + text-decoration: none; + text-transform: none; + text-indent: 0px; + margin-bottom: 0px; + } + .xx-small-label { + font-family: var(--font-inter); + font-size: var(--text-xx-small-label); + font-weight: var(--text-xx-small-label--font-weight); + line-height: var(--text-xx-small-label--line-height); + letter-spacing: var(--text-xx-small-label--letter-spacing); + text-decoration: none; + text-transform: none; + text-indent: 0px; + margin-bottom: 0px; + } + .xx-small-paragraph { + font-family: var(--font-inter); + font-size: var(--text-xx-small-paragraph); + font-weight: var(--text-xx-small-paragraph--font-weight); + line-height: var(--text-xx-small-paragraph--line-height); + letter-spacing: var(--text-xx-small-paragraph--letter-spacing); + text-decoration: none; + text-transform: none; + text-indent: 0px; + margin-bottom: 0px; + } + .xx-small-italic { + font-family: var(--font-inter); + font-size: var(--text-xx-small-italic); + font-weight: var(--text-xx-small-italic--font-weight); + line-height: var(--text-xx-small-italic--line-height); + letter-spacing: var(--text-xx-small-italic--letter-spacing); + text-decoration: none; + text-transform: none; + text-indent: 0px; + margin-bottom: 0px; + } + .x-large-label { + font-family: var(--font-inter); + font-size: var(--text-x-large-label); + font-weight: var(--text-x-large-label--font-weight); + line-height: var(--text-x-large-label--line-height); + letter-spacing: var(--text-x-large-label--letter-spacing); + text-decoration: none; + text-transform: none; + text-indent: 0px; + margin-bottom: 0px; + } + .x-large-paragraph { + font-family: var(--font-inter); + font-size: var(--text-x-large-paragraph); + font-weight: var(--text-x-large-paragraph--font-weight); + line-height: var(--text-x-large-paragraph--line-height); + letter-spacing: var(--text-x-large-paragraph--letter-spacing); + text-decoration: none; + text-transform: none; + text-indent: 0px; + margin-bottom: 0px; + } + .xx-large-paragraph { + font-family: var(--font-inter); + font-size: var(--text-xx-large-paragraph); + font-weight: var(--text-xx-large-paragraph--font-weight); + line-height: var(--text-xx-large-paragraph--line-height); + letter-spacing: var(--text-xx-large-paragraph--letter-spacing); + text-decoration: none; + text-transform: none; + text-indent: 0px; + margin-bottom: 0px; + } + .xx-large-label { + font-family: var(--font-inter); + font-size: var(--text-xx-large-label); + font-weight: var(--text-xx-large-label--font-weight); + line-height: var(--text-xx-large-label--line-height); + letter-spacing: var(--text-xx-large-label--letter-spacing); + text-decoration: none; + text-transform: none; + text-indent: 0px; + margin-bottom: 0px; + } + .x-small-underline { + font-family: var(--font-inter); + font-size: var(--text-x-small-underline); + font-weight: var(--text-x-small-underline--font-weight); + line-height: var(--text-x-small-underline--line-height); + letter-spacing: var(--text-x-small-underline--letter-spacing); + text-decoration: underline; + text-transform: none; + text-indent: 0px; + margin-bottom: 0px; + } + .small-underline { + font-family: var(--font-inter); + font-size: var(--text-small-underline); + font-weight: var(--text-small-underline--font-weight); + line-height: var(--text-small-underline--line-height); + letter-spacing: var(--text-small-underline--letter-spacing); + text-decoration: underline; + text-transform: none; + text-indent: 0px; + margin-bottom: 0px; + } + .medium-underline { + font-family: var(--font-inter); + font-size: var(--text-medium-underline); + font-weight: var(--text-medium-underline--font-weight); + line-height: var(--text-medium-underline--line-height); + letter-spacing: var(--text-medium-underline--letter-spacing); + text-decoration: underline; + text-transform: none; + text-indent: 0px; + margin-bottom: 0px; + } + .large-underline { + font-family: var(--font-inter); + font-size: var(--text-large-underline); + font-weight: var(--text-large-underline--font-weight); + line-height: var(--text-large-underline--line-height); + letter-spacing: var(--text-large-underline--letter-spacing); + text-decoration: underline; + text-transform: none; + text-indent: 0px; + margin-bottom: 0px; + } + .x-large-underline { + font-family: var(--font-inter); + font-size: var(--text-x-large-underline); + font-weight: var(--text-x-large-underline--font-weight); + line-height: var(--text-x-large-underline--line-height); + letter-spacing: var(--text-x-large-underline--letter-spacing); + text-decoration: underline; + text-transform: none; + text-indent: 0px; + margin-bottom: 0px; + } + .x-small-label { + font-family: var(--font-inter); + font-size: var(--text-x-small-label); + font-weight: var(--text-x-small-label--font-weight); + line-height: var(--text-x-small-label--line-height); + letter-spacing: var(--text-x-small-label--letter-spacing); + text-decoration: none; + text-transform: none; + text-indent: 0px; + margin-bottom: 0px; + } + .x-small-label-caps { + font-family: var(--font-inter); + font-size: var(--text-x-small-label-caps); + font-weight: var(--text-x-small-label-caps--font-weight); + line-height: var(--text-x-small-label-caps--line-height); + letter-spacing: var(--text-x-small-label-caps--letter-spacing); + text-decoration: none; + text-transform: uppercase; + text-indent: 0px; + margin-bottom: 0px; + } + .xx-small-heading { + font-family: var(--font-inter); + font-size: var(--text-xx-small-heading); + font-weight: var(--text-xx-small-heading--font-weight); + line-height: var(--text-xx-small-heading--line-height); + letter-spacing: var(--text-xx-small-heading--letter-spacing); + text-decoration: none; + text-transform: none; + text-indent: 0px; + margin-bottom: 0px; + } + .x-small-display { + font-family: var(--font-bricolage-grotesque); + font-size: var(--text-x-small-display); + font-weight: var(--text-x-small-display--font-weight); + line-height: var(--text-x-small-display--line-height); + letter-spacing: var(--text-x-small-display--letter-spacing); + text-decoration: none; + text-transform: none; + text-indent: 0px; + margin-bottom: 0px; + } + .x-large-uppercase { + font-family: var(--font-inter); + font-size: var(--text-x-large-uppercase); + font-weight: var(--text-x-large-uppercase--font-weight); + line-height: var(--text-x-large-uppercase--line-height); + letter-spacing: var(--text-x-large-uppercase--letter-spacing); + text-decoration: none; + text-transform: uppercase; + text-indent: 0px; + margin-bottom: 0px; + } + .xx-large-uppercase { + font-family: var(--font-inter); + font-size: var(--text-xx-large-uppercase); + font-weight: var(--text-xx-large-uppercase--font-weight); + line-height: var(--text-xx-large-uppercase--line-height); + letter-spacing: var(--text-xx-large-uppercase--letter-spacing); + text-decoration: none; + text-transform: uppercase; + text-indent: 0px; + margin-bottom: 0px; + } + .x-large-display { + font-family: var(--font-bricolage-grotesque); + font-size: var(--text-x-large-display); + font-weight: var(--text-x-large-display--font-weight); + line-height: var(--text-x-large-display--line-height); + letter-spacing: var(--text-x-large-display--letter-spacing); + text-decoration: none; + text-transform: none; + text-indent: 0px; + margin-bottom: 0px; + } + .large-display { + font-family: var(--font-bricolage-grotesque); + font-size: var(--text-large-display); + font-weight: var(--text-large-display--font-weight); + line-height: var(--text-large-display--line-height); + letter-spacing: var(--text-large-display--letter-spacing); + text-decoration: none; + text-transform: none; + text-indent: 0px; + margin-bottom: 0px; + } + .medium-display { + font-family: var(--font-bricolage-grotesque); + font-size: var(--text-medium-display); + font-weight: var(--text-medium-display--font-weight); + line-height: var(--text-medium-display--line-height); + letter-spacing: var(--text-medium-display--letter-spacing); + text-decoration: none; + text-transform: none; + text-indent: 0px; + margin-bottom: 0px; + } + .xx-small-display { + font-family: var(--font-bricolage-grotesque); + font-size: var(--text-xx-small-display); + font-weight: var(--text-xx-small-display--font-weight); + line-height: var(--text-xx-small-display--line-height); + letter-spacing: var(--text-xx-small-display--letter-spacing); + text-decoration: none; + text-transform: none; + text-indent: 0px; + margin-bottom: 0px; + } + .x-small-uppercase { + font-family: var(--font-inter); + font-size: var(--text-x-small-uppercase); + font-weight: var(--text-x-small-uppercase--font-weight); + line-height: var(--text-x-small-uppercase--line-height); + letter-spacing: var(--text-x-small-uppercase--letter-spacing); + text-decoration: none; + text-transform: uppercase; + text-indent: 0px; + margin-bottom: 0px; + } + .large-uppercase { + font-family: var(--font-inter); + font-size: var(--text-large-uppercase); + font-weight: var(--text-large-uppercase--font-weight); + line-height: var(--text-large-uppercase--line-height); + letter-spacing: var(--text-large-uppercase--letter-spacing); + text-decoration: none; + text-transform: uppercase; + text-indent: 0px; + margin-bottom: 0px; + } + .small-display { + font-family: var(--font-bricolage-grotesque); + font-size: var(--text-small-display); + font-weight: var(--text-small-display--font-weight); + line-height: var(--text-small-display--line-height); + letter-spacing: var(--text-small-display--letter-spacing); + text-decoration: none; + text-transform: none; + text-indent: 0px; + margin-bottom: 0px; + } } diff --git a/public/assets/Icon_Consensus.svg b/public/assets/Icon_Consensus.svg new file mode 100644 index 0000000..0bcac3e --- /dev/null +++ b/public/assets/Icon_Consensus.svg @@ -0,0 +1,10 @@ + + + + + + + + + + diff --git a/public/assets/Icon_ElectedBoard.svg b/public/assets/Icon_ElectedBoard.svg new file mode 100644 index 0000000..1e4405c --- /dev/null +++ b/public/assets/Icon_ElectedBoard.svg @@ -0,0 +1,9 @@ + + + + + + + + + diff --git a/public/assets/Icon_Petition.svg b/public/assets/Icon_Petition.svg new file mode 100644 index 0000000..ba2d443 --- /dev/null +++ b/public/assets/Icon_Petition.svg @@ -0,0 +1,13 @@ + + + + + + + + + + + + + diff --git a/public/assets/Icon_Sociocracy.svg b/public/assets/Icon_Sociocracy.svg new file mode 100644 index 0000000..85fc35f --- /dev/null +++ b/public/assets/Icon_Sociocracy.svg @@ -0,0 +1,3 @@ + + + diff --git a/public/assets/Quote_Avatar.svg b/public/assets/Quote_Avatar.svg new file mode 100644 index 0000000..50c8704 --- /dev/null +++ b/public/assets/Quote_Avatar.svg @@ -0,0 +1,9 @@ + + + + + + + + + diff --git a/stories/QuoteBlock.stories.js b/stories/QuoteBlock.stories.js new file mode 100644 index 0000000..3b4f0f6 --- /dev/null +++ b/stories/QuoteBlock.stories.js @@ -0,0 +1,146 @@ +import QuoteBlock from "../app/components/QuoteBlock"; + +export default { + title: "Components/QuoteBlock", + component: QuoteBlock, + parameters: { + layout: "fullscreen", + docs: { + description: { + component: ` +A responsive quote section component that displays inspirational governance quotes with author attribution and decorative geometric elements. + +## Features +- **Three variants**: compact, standard, and extended layouts +- **Responsive design**: Adapts across all breakpoints +- **Error handling**: Graceful fallbacks for image loading failures +- **Accessibility**: WCAG 2.1 AA compliant with proper ARIA labels +- **Design system integration**: Uses design tokens for consistent styling + +## Usage +\`\`\`jsx + +\`\`\` + `, + }, + }, + }, + argTypes: { + variant: { + control: { type: "select" }, + options: ["compact", "standard", "extended"], + description: "Layout variant for different use cases", + }, + quote: { + control: { type: "text" }, + description: "The quote text to display", + }, + author: { + control: { type: "text" }, + description: "Author name for attribution", + }, + source: { + control: { type: "text" }, + description: "Source title (book, article, etc.)", + }, + avatarSrc: { + control: { type: "text" }, + description: "Path to author avatar image", + }, + fallbackAvatarSrc: { + control: { type: "text" }, + description: "Fallback avatar image path", + }, + onError: { + action: "error", + description: "Error callback function", + }, + }, +}; + +// Default story +export const Default = { + args: { + variant: "standard", + quote: + "The rules of decision-making must be open and available to everyone, and this can happen only if they are formalized.", + author: "Jo Freeman", + source: "The Tyranny of Structurelessness", + avatarSrc: "assets/Quote_Avatar.svg", + }, +}; + +// All variants comparison +export const AllVariants = { + render: () => ( +
+
+

Compact Variant

+ +
+ +
+

Standard Variant

+ +
+ +
+

Extended Variant

+ +
+
+ ), + parameters: { + docs: { + description: { + story: + "Side-by-side comparison of all three variants to show the differences in layout, typography, and spacing.", + }, + }, + }, +}; + +// Error state simulation +export const ErrorState = { + args: { + variant: "standard", + quote: + "The rules of decision-making must be open and available to everyone, and this can happen only if they are formalized.", + author: "Jo Freeman", + source: "The Tyranny of Structurelessness", + avatarSrc: "invalid-image-path.jpg", // This will trigger error state + onError: (error) => console.log("QuoteBlock error:", error), + }, + parameters: { + docs: { + description: { + story: + "Error state when avatar image fails to load. Shows initials fallback and error handling.", + }, + }, + }, +}; diff --git a/stories/RuleCard.stories.js b/stories/RuleCard.stories.js new file mode 100644 index 0000000..07485de --- /dev/null +++ b/stories/RuleCard.stories.js @@ -0,0 +1,176 @@ +import RuleCard from "../app/components/RuleCard"; +import Image from "next/image"; + +export default { + title: "Components/RuleCard", + component: RuleCard, + parameters: { + layout: "centered", + docs: { + description: { + component: + "An interactive card component that displays governance templates and decision-making patterns. Features hover states, keyboard navigation, analytics tracking, and accessibility support. Use Tab key to test focus indicators and Enter/Space to activate.", + }, + }, + }, + argTypes: { + title: { + control: { type: "text" }, + description: "The title of the governance template", + }, + description: { + control: { type: "text" }, + description: "The description of the governance pattern", + }, + backgroundColor: { + control: { type: "select" }, + options: [ + "bg-[var(--color-surface-default-brand-lime)]", + "bg-[var(--color-surface-default-brand-rust)]", + "bg-[var(--color-surface-default-brand-red)]", + "bg-[var(--color-surface-default-brand-teal)]", + "bg-[var(--color-community-teal-100)]", + ], + description: "The background color variant for the card", + }, + onClick: { action: "clicked" }, + }, + tags: ["autodocs"], +}; + +export const Default = { + args: { + title: "Consensus clusters", + description: + "Units called Circles have the ability to decide and act on matters in their domains, which their members agree on through a Council.", + backgroundColor: "bg-[var(--color-surface-default-brand-lime)]", + icon: ( + Sociocracy + ), + }, +}; + +export const AllVariants = { + render: (args) => ( +
+ + } + onClick={() => console.log("Consensus clusters selected")} + /> + + } + onClick={() => console.log("Consensus selected")} + /> + + } + onClick={() => console.log("Elected Board selected")} + /> + + } + onClick={() => console.log("Petition selected")} + /> +
+ ), + parameters: { + docs: { + description: { + story: + "All four governance template variants with their respective colors and icons. Test hover states, focus indicators, and click interactions.", + }, + }, + }, +}; + +export const InteractiveStates = { + args: { + title: "Interactive Demo", + description: + "Hover over this card to see the scale and shadow effects. Use Tab to focus and Enter/Space to activate.", + backgroundColor: "bg-[var(--color-community-teal-100)]", + icon: ( +
+ ? +
+ ), + }, + parameters: { + docs: { + description: { + story: + "Demonstrates interactive states including hover effects, focus indicators, and keyboard navigation. Test with mouse hover and keyboard Tab/Enter/Space.", + }, + }, + }, +}; + +export const AccessibilityTest = { + args: { + title: "Accessibility Demo", + description: + "This card is designed for accessibility testing. Use Tab to focus, Enter/Space to activate, and screen readers to test ARIA labels.", + backgroundColor: "bg-[var(--color-surface-default-brand-teal)]", + icon: ( +
+ ♿ +
+ ), + }, + parameters: { + docs: { + description: { + story: + "Specifically designed for testing accessibility features including keyboard navigation, screen reader support, and focus management.", + }, + }, + }, +}; diff --git a/stories/RuleStack.stories.js b/stories/RuleStack.stories.js new file mode 100644 index 0000000..c5bca40 --- /dev/null +++ b/stories/RuleStack.stories.js @@ -0,0 +1,39 @@ +import RuleStack from "../app/components/RuleStack"; + +export default { + title: "Components/RuleStack", + component: RuleStack, + parameters: { + layout: "fullscreen", + docs: { + description: { + component: + "A complete template library component that displays governance patterns in a responsive grid layout. Includes SectionHeader with multi-line variant, interactive RuleCard components, and a call-to-action button. Features comprehensive accessibility, analytics tracking, and responsive design across all breakpoints.\n\n" + + "**Testing Scenarios:**\n" + + "- **Responsive Testing**: Resize browser window to test layout adaptation from single column on mobile to 2x2 grid on larger screens\n" + + "- **Interactive Testing**: Hover over cards to see effects, use Tab to navigate between cards, and click to see analytics events in console\n" + + "- **Accessibility Testing**: Use screen readers to test ARIA labels, keyboard navigation to move between cards, and verify focus indicators\n" + + "- **Custom Styling**: Add className prop to customize background or other styling", + }, + }, + }, + argTypes: { + className: { + control: { type: "text" }, + description: "Additional CSS classes for custom styling", + }, + }, + tags: ["autodocs"], +}; + +export const Default = { + args: {}, + parameters: { + docs: { + description: { + story: + "The complete RuleStack component with all four governance templates, responsive grid layout, and interactive features. Test hover states, keyboard navigation, and responsive behavior across different screen sizes.", + }, + }, + }, +}; diff --git a/stories/SectionHeader.stories.js b/stories/SectionHeader.stories.js index 40bf7b0..a821b94 100644 --- a/stories/SectionHeader.stories.js +++ b/stories/SectionHeader.stories.js @@ -8,7 +8,7 @@ export default { 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.", + "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. Includes 'default' and 'multi-line' variants with different layout behaviors.", }, }, }, @@ -26,6 +26,12 @@ export default { description: "The title text for lg and xl breakpoints (optional, falls back to title)", }, + variant: { + control: { type: "select" }, + options: ["default", "multi-line"], + description: + "The layout variant - 'default' for traditional layout, 'multi-line' for 50/50 split layout", + }, }, tags: ["autodocs"], }; @@ -35,6 +41,24 @@ export const Default = { title: "How CommunityRule works", subtitle: "Here's a quick overview of the process, from start to finish.", titleLg: "How CommunityRule helps", + variant: "default", + }, +}; + +export const MultiLine = { + args: { + title: "Popular templates", + subtitle: + "These are popular patterns for making decisions in mutual aid and open source communities. You can use them as they are or as a starting place for customizing your own CommunityRule.", + variant: "multi-line", + }, + parameters: { + docs: { + description: { + story: + "The multi-line variant creates a 50/50 split layout at lg and xl breakpoints, with the title on the left and subtitle on the right. This variant is used in the RuleStack component.", + }, + }, }, }; @@ -44,6 +68,7 @@ export const CustomContent = { subtitle: "We're dedicated to helping communities thrive through better decision-making processes and transparent governance structures.", titleLg: "Building Better Communities", + variant: "default", }, parameters: { docs: { @@ -61,6 +86,7 @@ export const LongSubtitle = { 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", + variant: "default", }, parameters: { docs: { @@ -78,6 +104,7 @@ export const ResponsiveTest = { subtitle: "Test the responsive behavior by resizing your browser window or using the viewport controls in Storybook.", titleLg: "Responsive Design Test", + variant: "default", }, parameters: { docs: { @@ -94,6 +121,7 @@ export const WithoutTitleLg = { title: "Simple Header", subtitle: "This example doesn't specify a titleLg prop, so it will use the same title text across all breakpoints.", + variant: "default", }, parameters: { docs: { @@ -104,3 +132,20 @@ export const WithoutTitleLg = { }, }, }; + +export const MultiLineResponsive = { + args: { + title: "Multi-line Responsive Test", + subtitle: + "This multi-line variant demonstrates the 50/50 split layout at larger breakpoints. Resize your browser to see how the layout adapts from stacked on mobile to side-by-side on desktop.", + variant: "multi-line", + }, + parameters: { + docs: { + description: { + story: + "Test the responsive behavior of the multi-line variant. The layout changes from stacked on mobile to 50/50 split on lg and xl breakpoints.", + }, + }, + }, +};