Replace absolute image paths
This commit is contained in:
adilallo
@@ -0,0 +1 @@
|
||||
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};
|
||||
@@ -0,0 +1,91 @@
|
||||
import{j as s}from"./jsx-runtime-C_nHp4yK.js";import{A as a}from"./Avatar-C4Vb3oYl.js";import"./iframe-D_aMTKb2.js";import"./preload-helper-DIZFD4sK.js";const d={title:"Components/Avatar",component:a,parameters:{layout:"centered",docs:{description:{component:"A simple avatar component that displays user profile images with multiple size variants. Supports custom images and alt text for accessibility."}}},argTypes:{src:{control:{type:"text"},description:"The source URL of the avatar image"},alt:{control:{type:"text"},description:"Alt text for accessibility"},size:{control:{type:"select"},options:["small","medium","large","xlarge"],description:"The size of the avatar"},className:{control:{type:"text"},description:"Additional CSS classes"}},tags:["autodocs"]},r={args:{src:"/assets/Avatar_1.png",alt:"User Avatar",size:"medium"}},t={args:{src:"/assets/Avatar_1.png",alt:"User Avatar"},render:e=>s.jsx("div",{className:"space-y-4",children:s.jsxs("div",{className:"space-x-4",children:[s.jsx(a,{...e,size:"small"}),s.jsx(a,{...e,size:"medium"}),s.jsx(a,{...e,size:"large"}),s.jsx(a,{...e,size:"xlarge"})]})}),parameters:{docs:{description:{story:"Different size variants available for the avatar component."}}}},i={args:{size:"large"},render:e=>s.jsx("div",{className:"space-y-4",children:s.jsxs("div",{className:"space-x-4",children:[s.jsx(a,{...e,src:"assets/Avatar_1.png",alt:"User 1"}),s.jsx(a,{...e,src:"assets/Avatar_2.png",alt:"User 2"}),s.jsx(a,{...e,src:"assets/Avatar_3.png",alt:"User 3"})]})}),parameters:{docs:{description:{story:"Different avatar images available in the project."}}}},n={args:{},render:()=>s.jsxs("div",{className:"space-y-6",children:[s.jsxs("div",{children:[s.jsx("h3",{className:"text-white font-semibold mb-3",children:"Small Size"}),s.jsxs("div",{className:"space-x-4",children:[s.jsx(a,{size:"small",src:"assets/Avatar_1.png",alt:"User 1"}),s.jsx(a,{size:"small",src:"assets/Avatar_2.png",alt:"User 2"}),s.jsx(a,{size:"small",src:"assets/Avatar_3.png",alt:"User 3"})]})]}),s.jsxs("div",{children:[s.jsx("h3",{className:"text-white font-semibold mb-3",children:"Medium Size"}),s.jsxs("div",{className:"space-x-4",children:[s.jsx(a,{size:"medium",src:"assets/Avatar_1.png",alt:"User 1"}),s.jsx(a,{size:"medium",src:"assets/Avatar_2.png",alt:"User 2"}),s.jsx(a,{size:"medium",src:"assets/Avatar_3.png",alt:"User 3"})]})]}),s.jsxs("div",{children:[s.jsx("h3",{className:"text-white font-semibold mb-3",children:"Large Size"}),s.jsxs("div",{className:"space-x-4",children:[s.jsx(a,{size:"large",src:"assets/Avatar_1.png",alt:"User 1"}),s.jsx(a,{size:"large",src:"assets/Avatar_2.png",alt:"User 2"}),s.jsx(a,{size:"large",src:"assets/Avatar_3.png",alt:"User 3"})]})]}),s.jsxs("div",{children:[s.jsx("h3",{className:"text-white font-semibold mb-3",children:"XLarge Size"}),s.jsxs("div",{className:"space-x-4",children:[s.jsx(a,{size:"xlarge",src:"assets/Avatar_1.png",alt:"User 1"}),s.jsx(a,{size:"xlarge",src:"assets/Avatar_2.png",alt:"User 2"}),s.jsx(a,{size:"xlarge",src:"assets/Avatar_3.png",alt:"User 3"})]})]})]}),parameters:{docs:{description:{story:"Complete overview of all avatar sizes with different user images."}}}};r.parameters={...r.parameters,docs:{...r.parameters?.docs,source:{originalSource:`{
|
||||
args: {
|
||||
src: "/assets/Avatar_1.png",
|
||||
alt: "User Avatar",
|
||||
size: "medium"
|
||||
}
|
||||
}`,...r.parameters?.docs?.source}}};t.parameters={...t.parameters,docs:{...t.parameters?.docs,source:{originalSource:`{
|
||||
args: {
|
||||
src: "/assets/Avatar_1.png",
|
||||
alt: "User Avatar"
|
||||
},
|
||||
render: args => <div className="space-y-4">
|
||||
<div className="space-x-4">
|
||||
<Avatar {...args} size="small" />
|
||||
<Avatar {...args} size="medium" />
|
||||
<Avatar {...args} size="large" />
|
||||
<Avatar {...args} size="xlarge" />
|
||||
</div>
|
||||
</div>,
|
||||
parameters: {
|
||||
docs: {
|
||||
description: {
|
||||
story: "Different size variants available for the avatar component."
|
||||
}
|
||||
}
|
||||
}
|
||||
}`,...t.parameters?.docs?.source}}};i.parameters={...i.parameters,docs:{...i.parameters?.docs,source:{originalSource:`{
|
||||
args: {
|
||||
size: "large"
|
||||
},
|
||||
render: args => <div className="space-y-4">
|
||||
<div className="space-x-4">
|
||||
<Avatar {...args} src="assets/Avatar_1.png" alt="User 1" />
|
||||
<Avatar {...args} src="assets/Avatar_2.png" alt="User 2" />
|
||||
<Avatar {...args} src="assets/Avatar_3.png" alt="User 3" />
|
||||
</div>
|
||||
</div>,
|
||||
parameters: {
|
||||
docs: {
|
||||
description: {
|
||||
story: "Different avatar images available in the project."
|
||||
}
|
||||
}
|
||||
}
|
||||
}`,...i.parameters?.docs?.source}}};n.parameters={...n.parameters,docs:{...n.parameters?.docs,source:{originalSource:`{
|
||||
args: {},
|
||||
render: () => <div className="space-y-6">
|
||||
<div>
|
||||
<h3 className="text-white font-semibold mb-3">Small Size</h3>
|
||||
<div className="space-x-4">
|
||||
<Avatar size="small" src="assets/Avatar_1.png" alt="User 1" />
|
||||
<Avatar size="small" src="assets/Avatar_2.png" alt="User 2" />
|
||||
<Avatar size="small" src="assets/Avatar_3.png" alt="User 3" />
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<h3 className="text-white font-semibold mb-3">Medium Size</h3>
|
||||
<div className="space-x-4">
|
||||
<Avatar size="medium" src="assets/Avatar_1.png" alt="User 1" />
|
||||
<Avatar size="medium" src="assets/Avatar_2.png" alt="User 2" />
|
||||
<Avatar size="medium" src="assets/Avatar_3.png" alt="User 3" />
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<h3 className="text-white font-semibold mb-3">Large Size</h3>
|
||||
<div className="space-x-4">
|
||||
<Avatar size="large" src="assets/Avatar_1.png" alt="User 1" />
|
||||
<Avatar size="large" src="assets/Avatar_2.png" alt="User 2" />
|
||||
<Avatar size="large" src="assets/Avatar_3.png" alt="User 3" />
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<h3 className="text-white font-semibold mb-3">XLarge Size</h3>
|
||||
<div className="space-x-4">
|
||||
<Avatar size="xlarge" src="assets/Avatar_1.png" alt="User 1" />
|
||||
<Avatar size="xlarge" src="assets/Avatar_2.png" alt="User 2" />
|
||||
<Avatar size="xlarge" src="assets/Avatar_3.png" alt="User 3" />
|
||||
</div>
|
||||
</div>
|
||||
</div>,
|
||||
parameters: {
|
||||
docs: {
|
||||
description: {
|
||||
story: "Complete overview of all avatar sizes with different user images."
|
||||
}
|
||||
}
|
||||
}
|
||||
}`,...n.parameters?.docs?.source}}};const v=["Default","Sizes","DifferentAvatars","AllSizesWithDifferentAvatars"];export{n as AllSizesWithDifferentAvatars,r as Default,i as DifferentAvatars,t as Sizes,v as __namedExportsOrder,d as default};
|
||||
@@ -0,0 +1 @@
|
||||
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
Binary file not shown.
|
After Width: | Height: | Size: 2.7 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 1.7 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 1.5 KiB |
@@ -0,0 +1,10 @@
|
||||
<svg width="24" height="22" viewBox="0 0 24 22" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<g clip-path="url(#clip0_18411_62931)">
|
||||
<path d="M5.42835 2.2446C8.08819 4.2226 10.9492 8.23317 11.9996 10.3855C13.05 8.23333 15.9108 4.22256 18.5708 2.2446C20.49 0.817353 23.5996 -0.28697 23.5996 3.22704C23.5996 3.92884 23.1934 9.1225 22.9551 9.96567C22.127 12.8971 19.1094 13.6448 16.4251 13.1923C21.1171 13.9833 22.3107 16.6034 19.733 19.2236C14.8374 24.1998 12.6966 17.9751 12.1478 16.3801C12.0472 16.0877 12.0002 15.9509 11.9995 16.0672C11.9988 15.9509 11.9517 16.0877 11.8512 16.3801C11.3026 17.9751 9.16185 24.2 4.26597 19.2236C1.68821 16.6034 2.88177 13.9831 7.57385 13.1923C4.88953 13.6448 1.87185 12.8971 1.04385 9.96567C0.805606 9.12242 0.399414 3.92876 0.399414 3.22704C0.399414 -0.28697 3.50909 0.817353 5.42821 2.2446H5.42835Z" fill="#949494"/>
|
||||
</g>
|
||||
<defs>
|
||||
<clipPath id="clip0_18411_62931">
|
||||
<rect width="24" height="21" fill="white" transform="translate(0 0.5)"/>
|
||||
</clipPath>
|
||||
</defs>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 1001 B |
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
@@ -0,0 +1 @@
|
||||
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};
|
||||
@@ -0,0 +1,62 @@
|
||||
import{C as s}from"./ContentLockup-DbWiPA4N.js";import"./jsx-runtime-C_nHp4yK.js";import"./iframe-D_aMTKb2.js";import"./preload-helper-DIZFD4sK.js";import"./Button-Z4hbXct5.js";const p={title:"Components/ContentLockup",component:s,parameters:{layout:"centered",docs:{description:{component:"A content lockup component that groups title, subtitle, description, and CTA button. Features responsive typography and spacing that adapts across breakpoints. Used within the HeroBanner component."}}},argTypes:{title:{control:{type:"text"},description:"The main title text"},subtitle:{control:{type:"text"},description:"The subtitle text"},description:{control:{type:"text"},description:"The description text"},ctaText:{control:{type:"text"},description:"The call-to-action button text"},ctaHref:{control:{type:"text"},description:"The call-to-action button link"},buttonClassName:{control:{type:"text"},description:"Additional CSS classes to apply to the large button (md/lg breakpoints)"}},tags:["autodocs"]},t={args:{title:"Collaborate",subtitle:"with clarity",description:"Help your community make important decisions in a way that reflects its unique values.",ctaText:"Learn how Community Rule works",ctaHref:"#"},parameters:{docs:{description:{story:"Default content lockup with standard Community Rule messaging."}}}},e={args:{title:"Collaborate",subtitle:"with clarity",description:"Help your community make important decisions in a way that reflects its unique values. Our platform provides the tools and frameworks needed to build successful, sustainable communities that can navigate complex challenges together.",ctaText:"Learn how Community Rule works",ctaHref:"#"},parameters:{docs:{description:{story:"Content lockup with longer description text to test text wrapping."}}}},o={args:{title:"Simple",subtitle:"solution",description:"Easy community decision making.",ctaText:"Try it",ctaHref:"#"},parameters:{docs:{description:{story:"Content lockup with minimal content to test compact layouts."}}}},n={args:{title:"Collaborate",subtitle:"with clarity",description:"Help your community make important decisions in a way that reflects its unique values.",ctaText:"Learn how Community Rule works",ctaHref:"#",buttonClassName:"shrink-0 whitespace-nowrap min-w-[280px]"},parameters:{docs:{description:{story:"Content lockup with custom button styling applied to the large button (md/lg breakpoints)."}}}};t.parameters={...t.parameters,docs:{...t.parameters?.docs,source:{originalSource:`{
|
||||
args: {
|
||||
title: "Collaborate",
|
||||
subtitle: "with clarity",
|
||||
description: "Help your community make important decisions in a way that reflects its unique values.",
|
||||
ctaText: "Learn how Community Rule works",
|
||||
ctaHref: "#"
|
||||
},
|
||||
parameters: {
|
||||
docs: {
|
||||
description: {
|
||||
story: "Default content lockup with standard Community Rule messaging."
|
||||
}
|
||||
}
|
||||
}
|
||||
}`,...t.parameters?.docs?.source}}};e.parameters={...e.parameters,docs:{...e.parameters?.docs,source:{originalSource:`{
|
||||
args: {
|
||||
title: "Collaborate",
|
||||
subtitle: "with clarity",
|
||||
description: "Help your community make important decisions in a way that reflects its unique values. Our platform provides the tools and frameworks needed to build successful, sustainable communities that can navigate complex challenges together.",
|
||||
ctaText: "Learn how Community Rule works",
|
||||
ctaHref: "#"
|
||||
},
|
||||
parameters: {
|
||||
docs: {
|
||||
description: {
|
||||
story: "Content lockup with longer description text to test text wrapping."
|
||||
}
|
||||
}
|
||||
}
|
||||
}`,...e.parameters?.docs?.source}}};o.parameters={...o.parameters,docs:{...o.parameters?.docs,source:{originalSource:`{
|
||||
args: {
|
||||
title: "Simple",
|
||||
subtitle: "solution",
|
||||
description: "Easy community decision making.",
|
||||
ctaText: "Try it",
|
||||
ctaHref: "#"
|
||||
},
|
||||
parameters: {
|
||||
docs: {
|
||||
description: {
|
||||
story: "Content lockup with minimal content to test compact layouts."
|
||||
}
|
||||
}
|
||||
}
|
||||
}`,...o.parameters?.docs?.source}}};n.parameters={...n.parameters,docs:{...n.parameters?.docs,source:{originalSource:`{
|
||||
args: {
|
||||
title: "Collaborate",
|
||||
subtitle: "with clarity",
|
||||
description: "Help your community make important decisions in a way that reflects its unique values.",
|
||||
ctaText: "Learn how Community Rule works",
|
||||
ctaHref: "#",
|
||||
buttonClassName: "shrink-0 whitespace-nowrap min-w-[280px]"
|
||||
},
|
||||
parameters: {
|
||||
docs: {
|
||||
description: {
|
||||
story: "Content lockup with custom button styling applied to the large button (md/lg breakpoints)."
|
||||
}
|
||||
}
|
||||
}
|
||||
}`,...n.parameters?.docs?.source}}};const u=["Default","LongDescription","ShortContent","CustomButtonStyling"];export{n as CustomButtonStyling,t as Default,e as LongDescription,o as ShortContent,u as __namedExportsOrder,p as default};
|
||||
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
Binary file not shown.
|
After Width: | Height: | Size: 53 KiB |
@@ -0,0 +1 @@
|
||||
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};
|
||||
@@ -0,0 +1,45 @@
|
||||
import{j as e}from"./jsx-runtime-C_nHp4yK.js";import{H as o}from"./Header-Bz-bT1Sq.js";import"./iframe-D_aMTKb2.js";import"./preload-helper-DIZFD4sK.js";import"./Logo-DM7O8ATg.js";import"./MenuBar-anMCqtJv.js";import"./MenuBarItem-Dp8NM2fx.js";import"./Button-Z4hbXct5.js";import"./AvatarContainer-Bt0G0TWZ.js";import"./Avatar-C4Vb3oYl.js";const x={title:"Components/Header",component:o,parameters:{layout:"fullscreen",docs:{description:{component:"The main navigation header with responsive behavior across different breakpoints."}}},argTypes:{onToggle:{action:"toggled"}},tags:["autodocs"]},t={args:{},parameters:{docs:{description:{story:"Use the Viewport toolbar to change the iframe width and see how the header adapts to different screen sizes. The header shows different layouts for mobile, tablet, and desktop breakpoints."}}}},a={args:{},render:()=>e.jsxs("div",{className:"min-h-screen bg-[var(--color-surface-default-primary)]",children:[e.jsx(o,{}),e.jsx("main",{className:"p-8",children:e.jsxs("div",{className:"max-w-4xl mx-auto",children:[e.jsx("h1",{className:"text-2xl font-bold text-white mb-4",children:"Example Page Content"}),e.jsx("p",{className:"text-white mb-4",children:"This demonstrates how the header looks in a realistic page context. The header maintains its responsive behavior while providing navigation for the page content."}),e.jsx("div",{className:"grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4",children:[1,2,3,4,5,6].map(s=>e.jsxs("div",{className:"bg-[var(--color-surface-default-secondary)] p-4 rounded-lg",children:[e.jsxs("h3",{className:"text-white font-semibold mb-2",children:["Content Block ",s]}),e.jsx("p",{className:"text-[var(--color-content-default-secondary)] text-sm",children:"This is example content to show how the header integrates with page content."})]},s))})]})})]}),parameters:{docs:{description:{story:"The header integrated into a full page layout to show how it works in context."}}}};t.parameters={...t.parameters,docs:{...t.parameters?.docs,source:{originalSource:`{
|
||||
args: {},
|
||||
parameters: {
|
||||
docs: {
|
||||
description: {
|
||||
story: "Use the Viewport toolbar to change the iframe width and see how the header adapts to different screen sizes. The header shows different layouts for mobile, tablet, and desktop breakpoints."
|
||||
}
|
||||
}
|
||||
}
|
||||
}`,...t.parameters?.docs?.source}}};a.parameters={...a.parameters,docs:{...a.parameters?.docs,source:{originalSource:`{
|
||||
args: {},
|
||||
render: () => <div className="min-h-screen bg-[var(--color-surface-default-primary)]">
|
||||
<Header />
|
||||
<main className="p-8">
|
||||
<div className="max-w-4xl mx-auto">
|
||||
<h1 className="text-2xl font-bold text-white mb-4">
|
||||
Example Page Content
|
||||
</h1>
|
||||
<p className="text-white mb-4">
|
||||
This demonstrates how the header looks in a realistic page context.
|
||||
The header maintains its responsive behavior while providing
|
||||
navigation for the page content.
|
||||
</p>
|
||||
<div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4">
|
||||
{[1, 2, 3, 4, 5, 6].map(i => <div key={i} className="bg-[var(--color-surface-default-secondary)] p-4 rounded-lg">
|
||||
<h3 className="text-white font-semibold mb-2">
|
||||
Content Block {i}
|
||||
</h3>
|
||||
<p className="text-[var(--color-content-default-secondary)] text-sm">
|
||||
This is example content to show how the header integrates with
|
||||
page content.
|
||||
</p>
|
||||
</div>)}
|
||||
</div>
|
||||
</div>
|
||||
</main>
|
||||
</div>,
|
||||
parameters: {
|
||||
docs: {
|
||||
description: {
|
||||
story: "The header integrated into a full page layout to show how it works in context."
|
||||
}
|
||||
}
|
||||
}
|
||||
}`,...a.parameters?.docs?.source}}};const f=["Default","InPageContext"];export{t as Default,a as InPageContext,f as __namedExportsOrder,x as default};
|
||||
@@ -0,0 +1 @@
|
||||
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};
|
||||
@@ -0,0 +1,8 @@
|
||||
import{j as t}from"./jsx-runtime-C_nHp4yK.js";import{H as r}from"./HeaderTab-D9jUrYUx.js";import{L as s}from"./Logo-DM7O8ATg.js";import"./iframe-D_aMTKb2.js";import"./preload-helper-DIZFD4sK.js";const p={title:"Components/HeaderTab",component:r,parameters:{layout:"centered",docs:{description:{component:"A header tab container with decorative Union images and responsive behavior. Used to wrap content in the header with consistent styling and responsive breakpoint transitions."}}},argTypes:{stretch:{control:{type:"boolean"},description:"Whether the tab should stretch to fill available space"},className:{control:{type:"text"},description:"Additional CSS classes"}},tags:["autodocs"]},e={args:{stretch:!1},render:a=>t.jsx(r,{...a,children:t.jsx(s,{size:"homeHeaderMd"})})};e.parameters={...e.parameters,docs:{...e.parameters?.docs,source:{originalSource:`{
|
||||
args: {
|
||||
stretch: false
|
||||
},
|
||||
render: args => <HeaderTab {...args}>
|
||||
<Logo size="homeHeaderMd" />
|
||||
</HeaderTab>
|
||||
}`,...e.parameters?.docs?.source}}};const m=["Default"];export{e as Default,m as __namedExportsOrder,p as default};
|
||||
@@ -0,0 +1 @@
|
||||
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};
|
||||
@@ -0,0 +1,16 @@
|
||||
import{H as e}from"./HeroBanner-D2qHR4vw.js";import"./jsx-runtime-C_nHp4yK.js";import"./iframe-D_aMTKb2.js";import"./preload-helper-DIZFD4sK.js";import"./ContentLockup-DbWiPA4N.js";import"./Button-Z4hbXct5.js";import"./HeroDecor-Csfoi-N_.js";const p={title:"Components/HeroBanner",component:e,parameters:{layout:"fullscreen",docs:{description:{component:"A responsive hero banner component that showcases the Community Rule branding and messaging. Adapts across multiple breakpoints with proper spacing, typography, and interactive elements. Includes background decorations and product demo integration."}}},argTypes:{title:{control:{type:"text"},description:"The main title text"},subtitle:{control:{type:"text"},description:"The subtitle text"},description:{control:{type:"text"},description:"The description text"},ctaText:{control:{type:"text"},description:"The call-to-action button text"},ctaHref:{control:{type:"text"},description:"The call-to-action button link"}},tags:["autodocs"]},t={args:{title:"Collaborate",subtitle:"with clarity",description:"Help your community make important decisions in a way that reflects its unique values.",ctaText:"Learn how Community Rule works",ctaHref:"#"},parameters:{docs:{description:{story:"Default hero banner with standard Community Rule messaging and branding."}}}};t.parameters={...t.parameters,docs:{...t.parameters?.docs,source:{originalSource:`{
|
||||
args: {
|
||||
title: "Collaborate",
|
||||
subtitle: "with clarity",
|
||||
description: "Help your community make important decisions in a way that reflects its unique values.",
|
||||
ctaText: "Learn how Community Rule works",
|
||||
ctaHref: "#"
|
||||
},
|
||||
parameters: {
|
||||
docs: {
|
||||
description: {
|
||||
story: "Default hero banner with standard Community Rule messaging and branding."
|
||||
}
|
||||
}
|
||||
}
|
||||
}`,...t.parameters?.docs?.source}}};const l=["Default"];export{t as Default,l as __namedExportsOrder,p as default};
|
||||
File diff suppressed because one or more lines are too long
@@ -0,0 +1 @@
|
||||
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};
|
||||
@@ -0,0 +1,30 @@
|
||||
import{j as e}from"./jsx-runtime-C_nHp4yK.js";import{H as o}from"./HeroDecor-Csfoi-N_.js";import"./iframe-D_aMTKb2.js";import"./preload-helper-DIZFD4sK.js";const d={title:"Components/HeroDecor",component:o,parameters:{layout:"centered",docs:{description:{component:"A decorative SVG component that provides background visual elements for the HeroBanner. Features grain effects and organic shapes that enhance the visual appeal without interfering with content readability."}}},argTypes:{className:{control:{type:"text"},description:"Additional CSS classes for positioning and styling"}},tags:["autodocs"]},r={args:{className:"w-[400px] h-[200px]"},parameters:{docs:{description:{story:"Default hero decoration with standard sizing and positioning."}}}},t={args:{className:"w-[600px] h-[300px]"},render:a=>e.jsxs("div",{className:"bg-[var(--color-surface-default-brand-primary)] p-8 rounded-lg relative overflow-hidden",children:[e.jsx(o,{...a}),e.jsxs("div",{className:"relative z-10 text-white mt-4",children:[e.jsx("h3",{children:"Content Overlay"}),e.jsx("p",{children:"This demonstrates how the decoration appears behind content."})]})]}),parameters:{docs:{description:{story:"Hero decoration with background color to show how it integrates with content."}}}};r.parameters={...r.parameters,docs:{...r.parameters?.docs,source:{originalSource:`{
|
||||
args: {
|
||||
className: "w-[400px] h-[200px]"
|
||||
},
|
||||
parameters: {
|
||||
docs: {
|
||||
description: {
|
||||
story: "Default hero decoration with standard sizing and positioning."
|
||||
}
|
||||
}
|
||||
}
|
||||
}`,...r.parameters?.docs?.source}}};t.parameters={...t.parameters,docs:{...t.parameters?.docs,source:{originalSource:`{
|
||||
args: {
|
||||
className: "w-[600px] h-[300px]"
|
||||
},
|
||||
render: args => <div className="bg-[var(--color-surface-default-brand-primary)] p-8 rounded-lg relative overflow-hidden">
|
||||
<HeroDecor {...args} />
|
||||
<div className="relative z-10 text-white mt-4">
|
||||
<h3>Content Overlay</h3>
|
||||
<p>This demonstrates how the decoration appears behind content.</p>
|
||||
</div>
|
||||
</div>,
|
||||
parameters: {
|
||||
docs: {
|
||||
description: {
|
||||
story: "Hero decoration with background color to show how it integrates with content."
|
||||
}
|
||||
}
|
||||
}
|
||||
}`,...t.parameters?.docs?.source}}};const p=["Default","WithBackground"];export{r as Default,t as WithBackground,p as __namedExportsOrder,d as default};
|
||||
Binary file not shown.
|
After Width: | Height: | Size: 112 KiB |
File diff suppressed because one or more lines are too long
@@ -0,0 +1 @@
|
||||
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
@@ -0,0 +1,3 @@
|
||||
<svg width="28" height="28" viewBox="0 0 28 28" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<path d="M27.5948 13.9998L0.549194 0.477051L7.31736 13.9998L0.549194 27.5226L27.5948 13.9998ZM14.0855 11.1905C14.6377 11.1938 15.1766 11.3603 15.6343 11.6689C16.092 11.9776 16.4481 12.4146 16.6577 12.925C16.8673 13.4353 16.9211 13.9962 16.8123 14.5371C16.7036 15.0779 16.437 15.5746 16.0463 15.9644C15.6556 16.3543 15.1582 16.6199 14.6166 16.728C14.0751 16.836 13.5137 16.7816 13.0031 16.5715C12.4924 16.3615 12.0554 16.0053 11.747 15.5477C11.4386 15.09 11.2726 14.5515 11.27 13.9998C11.2682 13.6301 11.3398 13.2637 11.4807 12.9218C11.6216 12.58 11.829 12.2694 12.0908 12.0081C12.3527 11.7468 12.6638 11.54 13.0062 11.3997C13.3486 11.2594 13.7154 11.1882 14.0855 11.1905Z" fill="#FFFDD2"/>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 793 B |
@@ -0,0 +1 @@
|
||||
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};
|
||||
@@ -0,0 +1,56 @@
|
||||
import{j as e}from"./jsx-runtime-C_nHp4yK.js";import{M as s}from"./MenuBar-anMCqtJv.js";import{M as n}from"./MenuBarItem-Dp8NM2fx.js";import"./iframe-D_aMTKb2.js";import"./preload-helper-DIZFD4sK.js";const d={title:"Components/MenuBar",component:s,parameters:{layout:"centered",docs:{description:{component:"A navigation menu bar container that groups MenuBarItem components together. Provides consistent spacing and layout for navigation menus with multiple size variants."}}},argTypes:{size:{control:{type:"select"},options:["xsmall","default","medium","large"],description:"The size of the menu bar and its children"},className:{control:{type:"text"},description:"Additional CSS classes"}},tags:["autodocs"]},a={args:{size:"default"},render:t=>e.jsxs(s,{...t,children:[e.jsx(n,{size:"large",children:"Home"}),e.jsx(n,{size:"large",children:"About"}),e.jsx(n,{size:"large",children:"Contact"})]})},r={args:{},render:()=>e.jsxs("div",{className:"space-y-6",children:[e.jsxs("div",{children:[e.jsx("h3",{className:"text-white font-semibold mb-3",children:"XSmall Size"}),e.jsxs(s,{size:"xsmall",children:[e.jsx(n,{size:"xsmall",children:"Home"}),e.jsx(n,{size:"xsmall",children:"About"}),e.jsx(n,{size:"xsmall",children:"Contact"})]})]}),e.jsxs("div",{children:[e.jsx("h3",{className:"text-white font-semibold mb-3",children:"Default Size"}),e.jsxs(s,{size:"default",children:[e.jsx(n,{size:"large",children:"Home"}),e.jsx(n,{size:"large",children:"About"}),e.jsx(n,{size:"large",children:"Contact"})]})]}),e.jsxs("div",{children:[e.jsx("h3",{className:"text-white font-semibold mb-3",children:"Medium Size"}),e.jsxs(s,{size:"medium",children:[e.jsx(n,{size:"large",children:"Home"}),e.jsx(n,{size:"large",children:"About"}),e.jsx(n,{size:"large",children:"Contact"})]})]}),e.jsxs("div",{children:[e.jsx("h3",{className:"text-white font-semibold mb-3",children:"Large Size"}),e.jsxs(s,{size:"large",children:[e.jsx(n,{size:"large",children:"Home"}),e.jsx(n,{size:"large",children:"About"}),e.jsx(n,{size:"large",children:"Contact"})]})]})]}),parameters:{docs:{description:{story:"Different size variants of the menu bar with consistent spacing and layout."}}}};a.parameters={...a.parameters,docs:{...a.parameters?.docs,source:{originalSource:`{
|
||||
args: {
|
||||
size: "default"
|
||||
},
|
||||
render: args => <MenuBar {...args}>
|
||||
<MenuBarItem size="large">Home</MenuBarItem>
|
||||
<MenuBarItem size="large">About</MenuBarItem>
|
||||
<MenuBarItem size="large">Contact</MenuBarItem>
|
||||
</MenuBar>
|
||||
}`,...a.parameters?.docs?.source}}};r.parameters={...r.parameters,docs:{...r.parameters?.docs,source:{originalSource:`{
|
||||
args: {},
|
||||
render: () => <div className="space-y-6">
|
||||
<div>
|
||||
<h3 className="text-white font-semibold mb-3">XSmall Size</h3>
|
||||
<MenuBar size="xsmall">
|
||||
<MenuBarItem size="xsmall">Home</MenuBarItem>
|
||||
<MenuBarItem size="xsmall">About</MenuBarItem>
|
||||
<MenuBarItem size="xsmall">Contact</MenuBarItem>
|
||||
</MenuBar>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<h3 className="text-white font-semibold mb-3">Default Size</h3>
|
||||
<MenuBar size="default">
|
||||
<MenuBarItem size="large">Home</MenuBarItem>
|
||||
<MenuBarItem size="large">About</MenuBarItem>
|
||||
<MenuBarItem size="large">Contact</MenuBarItem>
|
||||
</MenuBar>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<h3 className="text-white font-semibold mb-3">Medium Size</h3>
|
||||
<MenuBar size="medium">
|
||||
<MenuBarItem size="large">Home</MenuBarItem>
|
||||
<MenuBarItem size="large">About</MenuBarItem>
|
||||
<MenuBarItem size="large">Contact</MenuBarItem>
|
||||
</MenuBar>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<h3 className="text-white font-semibold mb-3">Large Size</h3>
|
||||
<MenuBar size="large">
|
||||
<MenuBarItem size="large">Home</MenuBarItem>
|
||||
<MenuBarItem size="large">About</MenuBarItem>
|
||||
<MenuBarItem size="large">Contact</MenuBarItem>
|
||||
</MenuBar>
|
||||
</div>
|
||||
</div>,
|
||||
parameters: {
|
||||
docs: {
|
||||
description: {
|
||||
story: "Different size variants of the menu bar with consistent spacing and layout."
|
||||
}
|
||||
}
|
||||
}
|
||||
}`,...r.parameters?.docs?.source}}};const u=["Default","Sizes"];export{a as Default,r as Sizes,u as __namedExportsOrder,d as default};
|
||||
File diff suppressed because one or more lines are too long
@@ -0,0 +1,120 @@
|
||||
import{j as e}from"./jsx-runtime-C_nHp4yK.js";import{M as a}from"./MenuBarItem-Dp8NM2fx.js";import"./iframe-D_aMTKb2.js";import"./preload-helper-DIZFD4sK.js";const u={title:"Components/MenuBarItem",component:a,parameters:{layout:"centered",docs:{description:{component:"A navigation menu item component with multiple variants, sizes, and states. Can render as a link or disabled span with full accessibility support. Includes focus states with keyboard navigation - use Tab key to test focus indicators."}}},argTypes:{variant:{control:{type:"select"},options:["default","home"],description:"The visual style variant of the menu item"},size:{control:{type:"select"},options:["xsmall","xsmallUseCases","homeMd","homeUseCases","large","largeUseCases","homeXlarge","xlarge"],description:"The size of the menu item"},disabled:{control:{type:"boolean"},description:"Whether the menu item is disabled"},href:{control:{type:"text"},description:"The link destination"},onClick:{action:"clicked"}},tags:["autodocs"]},n={args:{children:"Menu Item",size:"large"}},r={args:{children:"Menu Item",size:"large"},render:s=>e.jsx("div",{className:"space-y-4",children:e.jsxs("div",{className:"space-x-4",children:[e.jsx(a,{...s,variant:"default",children:"Default"}),e.jsx(a,{...s,variant:"home",children:"Home"})]})}),parameters:{docs:{description:{story:"Different visual variants of the menu item component."}}}},t={args:{children:"Menu Item",variant:"default"},render:s=>e.jsx("div",{className:"space-y-4",children:e.jsxs("div",{className:"space-x-4",children:[e.jsx(a,{...s,size:"xsmall",children:"XSmall"}),e.jsx(a,{...s,size:"large",children:"Large"}),e.jsx(a,{...s,size:"xlarge",children:"XLarge"})]})}),parameters:{docs:{description:{story:"Different sizes available for the menu item component."}}}},i={args:{children:"Menu Item",size:"large",variant:"default"},render:s=>e.jsx("div",{className:"space-y-4",children:e.jsxs("div",{className:"space-x-4",children:[e.jsx(a,{...s,children:"Normal"}),e.jsx(a,{...s,disabled:!0,children:"Disabled"})]})}),parameters:{docs:{description:{story:"Different states of the menu item component."}}}},l={args:{},render:()=>e.jsxs("div",{className:"space-y-6",children:[e.jsxs("div",{children:[e.jsx("h3",{className:"text-white font-semibold mb-3",children:"Default Variant"}),e.jsxs("div",{className:"space-x-4",children:[e.jsx(a,{size:"xsmall",children:"XSmall"}),e.jsx(a,{size:"large",children:"Large"}),e.jsx(a,{size:"xlarge",children:"XLarge"})]})]}),e.jsxs("div",{children:[e.jsx("h3",{className:"text-white font-semibold mb-3",children:"Home Variant"}),e.jsxs("div",{className:"space-x-4",children:[e.jsx(a,{variant:"home",size:"xsmall",children:"XSmall"}),e.jsx(a,{variant:"home",size:"large",children:"Large"}),e.jsx(a,{variant:"home",size:"xlarge",children:"XLarge"})]})]}),e.jsxs("div",{children:[e.jsx("h3",{className:"text-white font-semibold mb-3",children:"Disabled States"}),e.jsxs("div",{className:"space-x-4",children:[e.jsx(a,{size:"large",disabled:!0,children:"Default Disabled"}),e.jsx(a,{variant:"home",size:"large",disabled:!0,children:"Home Disabled"})]})]})]}),parameters:{docs:{description:{story:"Complete overview of all menu item variants, sizes, and states."}}}};n.parameters={...n.parameters,docs:{...n.parameters?.docs,source:{originalSource:`{
|
||||
args: {
|
||||
children: "Menu Item",
|
||||
size: "large"
|
||||
}
|
||||
}`,...n.parameters?.docs?.source}}};r.parameters={...r.parameters,docs:{...r.parameters?.docs,source:{originalSource:`{
|
||||
args: {
|
||||
children: "Menu Item",
|
||||
size: "large"
|
||||
},
|
||||
render: args => <div className="space-y-4">
|
||||
<div className="space-x-4">
|
||||
<MenuBarItem {...args} variant="default">
|
||||
Default
|
||||
</MenuBarItem>
|
||||
<MenuBarItem {...args} variant="home">
|
||||
Home
|
||||
</MenuBarItem>
|
||||
</div>
|
||||
</div>,
|
||||
parameters: {
|
||||
docs: {
|
||||
description: {
|
||||
story: "Different visual variants of the menu item component."
|
||||
}
|
||||
}
|
||||
}
|
||||
}`,...r.parameters?.docs?.source}}};t.parameters={...t.parameters,docs:{...t.parameters?.docs,source:{originalSource:`{
|
||||
args: {
|
||||
children: "Menu Item",
|
||||
variant: "default"
|
||||
},
|
||||
render: args => <div className="space-y-4">
|
||||
<div className="space-x-4">
|
||||
<MenuBarItem {...args} size="xsmall">
|
||||
XSmall
|
||||
</MenuBarItem>
|
||||
<MenuBarItem {...args} size="large">
|
||||
Large
|
||||
</MenuBarItem>
|
||||
<MenuBarItem {...args} size="xlarge">
|
||||
XLarge
|
||||
</MenuBarItem>
|
||||
</div>
|
||||
</div>,
|
||||
parameters: {
|
||||
docs: {
|
||||
description: {
|
||||
story: "Different sizes available for the menu item component."
|
||||
}
|
||||
}
|
||||
}
|
||||
}`,...t.parameters?.docs?.source}}};i.parameters={...i.parameters,docs:{...i.parameters?.docs,source:{originalSource:`{
|
||||
args: {
|
||||
children: "Menu Item",
|
||||
size: "large",
|
||||
variant: "default"
|
||||
},
|
||||
render: args => <div className="space-y-4">
|
||||
<div className="space-x-4">
|
||||
<MenuBarItem {...args}>Normal</MenuBarItem>
|
||||
<MenuBarItem {...args} disabled>
|
||||
Disabled
|
||||
</MenuBarItem>
|
||||
</div>
|
||||
</div>,
|
||||
parameters: {
|
||||
docs: {
|
||||
description: {
|
||||
story: "Different states of the menu item component."
|
||||
}
|
||||
}
|
||||
}
|
||||
}`,...i.parameters?.docs?.source}}};l.parameters={...l.parameters,docs:{...l.parameters?.docs,source:{originalSource:`{
|
||||
args: {},
|
||||
render: () => <div className="space-y-6">
|
||||
<div>
|
||||
<h3 className="text-white font-semibold mb-3">Default Variant</h3>
|
||||
<div className="space-x-4">
|
||||
<MenuBarItem size="xsmall">XSmall</MenuBarItem>
|
||||
<MenuBarItem size="large">Large</MenuBarItem>
|
||||
<MenuBarItem size="xlarge">XLarge</MenuBarItem>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<h3 className="text-white font-semibold mb-3">Home Variant</h3>
|
||||
<div className="space-x-4">
|
||||
<MenuBarItem variant="home" size="xsmall">
|
||||
XSmall
|
||||
</MenuBarItem>
|
||||
<MenuBarItem variant="home" size="large">
|
||||
Large
|
||||
</MenuBarItem>
|
||||
<MenuBarItem variant="home" size="xlarge">
|
||||
XLarge
|
||||
</MenuBarItem>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<h3 className="text-white font-semibold mb-3">Disabled States</h3>
|
||||
<div className="space-x-4">
|
||||
<MenuBarItem size="large" disabled>
|
||||
Default Disabled
|
||||
</MenuBarItem>
|
||||
<MenuBarItem variant="home" size="large" disabled>
|
||||
Home Disabled
|
||||
</MenuBarItem>
|
||||
</div>
|
||||
</div>
|
||||
</div>,
|
||||
parameters: {
|
||||
docs: {
|
||||
description: {
|
||||
story: "Complete overview of all menu item variants, sizes, and states."
|
||||
}
|
||||
}
|
||||
}
|
||||
}`,...l.parameters?.docs?.source}}};const p=["Default","Variants","Sizes","States","AllVariants"];export{l as AllVariants,n as Default,t as Sizes,i as States,r as Variants,p as __namedExportsOrder,u as default};
|
||||
@@ -0,0 +1 @@
|
||||
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};
|
||||
@@ -0,0 +1,41 @@
|
||||
import{j as e}from"./jsx-runtime-C_nHp4yK.js";import{N as o}from"./NumberedCard-ClCynPua.js";import"./iframe-D_aMTKb2.js";import"./preload-helper-DIZFD4sK.js";import"./SectionNumber-Cptefv18.js";const m={title:"Components/NumberedCard",component:o,parameters:{layout:"centered",docs:{description:{component:"Individual numbered card component that displays a step in a process with a numbered icon and descriptive text. Supports responsive layouts across different breakpoints."}}},argTypes:{number:{control:{type:"number",min:1,max:9},description:"The number to display on the card"},text:{control:{type:"text"},description:"The descriptive text for this step"},iconShape:{control:{type:"select"},options:["blob","gear","star"],description:"The shape of the icon background (currently not used, uses PNG images)"},iconColor:{control:{type:"select"},options:["green","purple","orange","blue"],description:"The color theme for the icon (currently not used, uses PNG images)"}},tags:["autodocs"]},t={args:{number:1,text:"Document how your community makes decisions",iconShape:"blob",iconColor:"green"}},r={args:{number:1,text:"Example card text",iconShape:"blob",iconColor:"green"},render:s=>e.jsxs("div",{className:"space-y-4",children:[e.jsx(o,{...s,number:1,text:"First step in the process"}),e.jsx(o,{...s,number:2,text:"Second step with different content"}),e.jsx(o,{...s,number:3,text:"Third and final step of the workflow"})]}),parameters:{docs:{description:{story:"Shows all three numbered cards with different content to demonstrate the visual hierarchy."}}}},n={args:{number:1,text:"This is a much longer piece of text that demonstrates how the card handles content that spans multiple lines and requires more space to display properly",iconShape:"blob",iconColor:"green"},parameters:{docs:{description:{story:"Demonstrates how the card handles longer text content across different breakpoints."}}}};t.parameters={...t.parameters,docs:{...t.parameters?.docs,source:{originalSource:`{
|
||||
args: {
|
||||
number: 1,
|
||||
text: "Document how your community makes decisions",
|
||||
iconShape: "blob",
|
||||
iconColor: "green"
|
||||
}
|
||||
}`,...t.parameters?.docs?.source}}};r.parameters={...r.parameters,docs:{...r.parameters?.docs,source:{originalSource:`{
|
||||
args: {
|
||||
number: 1,
|
||||
text: "Example card text",
|
||||
iconShape: "blob",
|
||||
iconColor: "green"
|
||||
},
|
||||
render: args => <div className="space-y-4">
|
||||
<NumberedCard {...args} number={1} text="First step in the process" />
|
||||
<NumberedCard {...args} number={2} text="Second step with different content" />
|
||||
<NumberedCard {...args} number={3} text="Third and final step of the workflow" />
|
||||
</div>,
|
||||
parameters: {
|
||||
docs: {
|
||||
description: {
|
||||
story: "Shows all three numbered cards with different content to demonstrate the visual hierarchy."
|
||||
}
|
||||
}
|
||||
}
|
||||
}`,...r.parameters?.docs?.source}}};n.parameters={...n.parameters,docs:{...n.parameters?.docs,source:{originalSource:`{
|
||||
args: {
|
||||
number: 1,
|
||||
text: "This is a much longer piece of text that demonstrates how the card handles content that spans multiple lines and requires more space to display properly",
|
||||
iconShape: "blob",
|
||||
iconColor: "green"
|
||||
},
|
||||
parameters: {
|
||||
docs: {
|
||||
description: {
|
||||
story: "Demonstrates how the card handles longer text content across different breakpoints."
|
||||
}
|
||||
}
|
||||
}
|
||||
}`,...n.parameters?.docs?.source}}};const l=["Default","AllNumbers","LongText"];export{r as AllNumbers,t as Default,n as LongText,l as __namedExportsOrder,m as default};
|
||||
@@ -0,0 +1,48 @@
|
||||
import{j as e}from"./jsx-runtime-C_nHp4yK.js";import{N as m}from"./NumberedCard-ClCynPua.js";import{S as u}from"./SectionHeader-CadpOP1T.js";import{B as c}from"./Button-Z4hbXct5.js";import"./iframe-D_aMTKb2.js";import"./preload-helper-DIZFD4sK.js";import"./SectionNumber-Cptefv18.js";const l=({title:r,subtitle:a,cards:i})=>{const p={"@context":"https://schema.org","@type":"HowTo",name:r,description:a,step:i.map((o,t)=>({"@type":"HowToStep",position:t+1,name:o.text,text:o.text}))};return e.jsxs(e.Fragment,{children:[e.jsx("script",{type:"application/ld+json",dangerouslySetInnerHTML:{__html:JSON.stringify(p)}}),e.jsx("section",{className:"bg-transparent py-[var(--spacing-scale-032)] px-[var(--spacing-scale-020)] sm:py-[var(--spacing-scale-048)] sm:px-[var(--spacing-scale-032)] lg:py-[var(--spacing-scale-064)] lg:px-[var(--spacing-scale-064)] xl:py-[var(--spacing-scale-076)] xl:px-[var(--spacing-scale-064)]",children:e.jsx("div",{className:"max-w-[var(--spacing-measures-max-width-lg)] mx-auto",children:e.jsxs("div",{className:"grid grid-cols-1 gap-y-[var(--spacing-scale-032)] lg:gap-y-[var(--spacing-scale-056)]",children:[e.jsx("div",{children:e.jsx(u,{title:r,subtitle:a,titleLg:"How CommunityRule helps"})}),e.jsx("div",{className:"grid grid-cols-1 gap-y-[var(--spacing-scale-024)] lg:grid-cols-3 lg:gap-[var(--spacing-scale-024)]",children:i.map((o,t)=>e.jsx(m,{number:t+1,text:o.text,iconShape:o.iconShape,iconColor:o.iconColor},t))}),e.jsxs("div",{className:"text-center sm:text-left lg:text-center",children:[e.jsx("div",{className:"block lg:hidden",children:e.jsx(c,{variant:"default",size:"large",children:"Create CommunityRule"})}),e.jsx("div",{className:"hidden lg:block",children:e.jsx(c,{variant:"outlined",size:"large",children:"See how it works"})})]})]})})})]})};l.__docgenInfo={description:"",methods:[],displayName:"NumberedCards"};const C={title:"Components/NumberedCards",component:l,parameters:{layout:"fullscreen",docs:{description:{component:"A component system for visually communicating multi-step workflows, processes, or value propositions. The component's modular design with NumberedCard and SectionNumber sub-components makes it ideal for explaining any sequential process while maintaining brand consistency and accessibility standards across the design system."}}},argTypes:{title:{control:{type:"text"},description:"The main title for the section"},subtitle:{control:{type:"text"},description:"The subtitle text below the main title"},cards:{control:{type:"object"},description:"Array of card objects with text, iconShape, and iconColor properties"}},tags:["autodocs"]},n={args:{title:"How CommunityRule works",subtitle:"Here's a quick overview of the process, from start to finish.",cards:[{text:"Document how your community makes decisions",iconShape:"blob",iconColor:"green"},{text:"Build an operating manual for a successful community",iconShape:"gear",iconColor:"purple"},{text:"Get a link to your manual for your group to review and evolve",iconShape:"star",iconColor:"orange"}]}},s={args:{title:"Our Process",subtitle:"Follow these simple steps to get started with your project.",cards:[{text:"Define your project requirements and goals",iconShape:"blob",iconColor:"green"},{text:"Collaborate with our team to create the perfect solution",iconShape:"gear",iconColor:"purple"},{text:"Launch and iterate based on user feedback",iconShape:"star",iconColor:"orange"},{text:"Scale and optimize for continued success",iconShape:"blob",iconColor:"blue"}]},parameters:{docs:{description:{story:"Example with custom content and four cards to show flexibility."}}}};n.parameters={...n.parameters,docs:{...n.parameters?.docs,source:{originalSource:`{
|
||||
args: {
|
||||
title: "How CommunityRule works",
|
||||
subtitle: "Here's a quick overview of the process, from start to finish.",
|
||||
cards: [{
|
||||
text: "Document how your community makes decisions",
|
||||
iconShape: "blob",
|
||||
iconColor: "green"
|
||||
}, {
|
||||
text: "Build an operating manual for a successful community",
|
||||
iconShape: "gear",
|
||||
iconColor: "purple"
|
||||
}, {
|
||||
text: "Get a link to your manual for your group to review and evolve",
|
||||
iconShape: "star",
|
||||
iconColor: "orange"
|
||||
}]
|
||||
}
|
||||
}`,...n.parameters?.docs?.source}}};s.parameters={...s.parameters,docs:{...s.parameters?.docs,source:{originalSource:`{
|
||||
args: {
|
||||
title: "Our Process",
|
||||
subtitle: "Follow these simple steps to get started with your project.",
|
||||
cards: [{
|
||||
text: "Define your project requirements and goals",
|
||||
iconShape: "blob",
|
||||
iconColor: "green"
|
||||
}, {
|
||||
text: "Collaborate with our team to create the perfect solution",
|
||||
iconShape: "gear",
|
||||
iconColor: "purple"
|
||||
}, {
|
||||
text: "Launch and iterate based on user feedback",
|
||||
iconShape: "star",
|
||||
iconColor: "orange"
|
||||
}, {
|
||||
text: "Scale and optimize for continued success",
|
||||
iconShape: "blob",
|
||||
iconColor: "blue"
|
||||
}]
|
||||
},
|
||||
parameters: {
|
||||
docs: {
|
||||
description: {
|
||||
story: "Example with custom content and four cards to show flexibility."
|
||||
}
|
||||
}
|
||||
}
|
||||
}`,...s.parameters?.docs?.source}}};const v=["Default","CustomContent"];export{s as CustomContent,n as Default,v as __namedExportsOrder,C as default};
|
||||
@@ -0,0 +1 @@
|
||||
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};
|
||||
@@ -0,0 +1,58 @@
|
||||
import{S as n}from"./SectionHeader-CadpOP1T.js";import"./jsx-runtime-C_nHp4yK.js";import"./iframe-D_aMTKb2.js";import"./preload-helper-DIZFD4sK.js";const p={title:"Components/SectionHeader",component:n,parameters:{layout:"centered",docs:{description:{component:"A section header component that displays a title and subtitle with responsive typography and layout. Supports different title text for large breakpoints and maintains consistent spacing across all screen sizes."}}},argTypes:{title:{control:{type:"text"},description:"The main title text (used for xsm and sm breakpoints)"},subtitle:{control:{type:"text"},description:"The subtitle text below the main title"},titleLg:{control:{type:"text"},description:"The title text for lg and xl breakpoints (optional, falls back to title)"}},tags:["autodocs"]},e={args:{title:"How CommunityRule works",subtitle:"Here's a quick overview of the process, from start to finish.",titleLg:"How CommunityRule helps"}},t={args:{title:"Our Mission",subtitle:"We're dedicated to helping communities thrive through better decision-making processes and transparent governance structures.",titleLg:"Building Better Communities"},parameters:{docs:{description:{story:"Example with custom content to show the flexibility of the component."}}}},s={args:{title:"Complex Process",subtitle:"This is a much longer subtitle that demonstrates how the component handles extended text content across different breakpoints and layout configurations.",titleLg:"Complex Process Simplified"},parameters:{docs:{description:{story:"Demonstrates how the component handles longer subtitle text across different breakpoints."}}}},o={args:{title:"Responsive Design",subtitle:"Test the responsive behavior by resizing your browser window or using the viewport controls in Storybook.",titleLg:"Responsive Design Test"},parameters:{docs:{description:{story:"Test the responsive behavior by resizing your browser window or using the viewport controls in Storybook."}}}},r={args:{title:"Simple Header",subtitle:"This example doesn't specify a titleLg prop, so it will use the same title text across all breakpoints."},parameters:{docs:{description:{story:"Shows the component without a titleLg prop, demonstrating the fallback behavior."}}}};e.parameters={...e.parameters,docs:{...e.parameters?.docs,source:{originalSource:`{
|
||||
args: {
|
||||
title: "How CommunityRule works",
|
||||
subtitle: "Here's a quick overview of the process, from start to finish.",
|
||||
titleLg: "How CommunityRule helps"
|
||||
}
|
||||
}`,...e.parameters?.docs?.source}}};t.parameters={...t.parameters,docs:{...t.parameters?.docs,source:{originalSource:`{
|
||||
args: {
|
||||
title: "Our Mission",
|
||||
subtitle: "We're dedicated to helping communities thrive through better decision-making processes and transparent governance structures.",
|
||||
titleLg: "Building Better Communities"
|
||||
},
|
||||
parameters: {
|
||||
docs: {
|
||||
description: {
|
||||
story: "Example with custom content to show the flexibility of the component."
|
||||
}
|
||||
}
|
||||
}
|
||||
}`,...t.parameters?.docs?.source}}};s.parameters={...s.parameters,docs:{...s.parameters?.docs,source:{originalSource:`{
|
||||
args: {
|
||||
title: "Complex Process",
|
||||
subtitle: "This is a much longer subtitle that demonstrates how the component handles extended text content across different breakpoints and layout configurations.",
|
||||
titleLg: "Complex Process Simplified"
|
||||
},
|
||||
parameters: {
|
||||
docs: {
|
||||
description: {
|
||||
story: "Demonstrates how the component handles longer subtitle text across different breakpoints."
|
||||
}
|
||||
}
|
||||
}
|
||||
}`,...s.parameters?.docs?.source}}};o.parameters={...o.parameters,docs:{...o.parameters?.docs,source:{originalSource:`{
|
||||
args: {
|
||||
title: "Responsive Design",
|
||||
subtitle: "Test the responsive behavior by resizing your browser window or using the viewport controls in Storybook.",
|
||||
titleLg: "Responsive Design Test"
|
||||
},
|
||||
parameters: {
|
||||
docs: {
|
||||
description: {
|
||||
story: "Test the responsive behavior by resizing your browser window or using the viewport controls in Storybook."
|
||||
}
|
||||
}
|
||||
}
|
||||
}`,...o.parameters?.docs?.source}}};r.parameters={...r.parameters,docs:{...r.parameters?.docs,source:{originalSource:`{
|
||||
args: {
|
||||
title: "Simple Header",
|
||||
subtitle: "This example doesn't specify a titleLg prop, so it will use the same title text across all breakpoints."
|
||||
},
|
||||
parameters: {
|
||||
docs: {
|
||||
description: {
|
||||
story: "Shows the component without a titleLg prop, demonstrating the fallback behavior."
|
||||
}
|
||||
}
|
||||
}
|
||||
}`,...r.parameters?.docs?.source}}};const m=["Default","CustomContent","LongSubtitle","ResponsiveTest","WithoutTitleLg"];export{t as CustomContent,e as Default,s as LongSubtitle,o as ResponsiveTest,r as WithoutTitleLg,m as __namedExportsOrder,p as default};
|
||||
@@ -0,0 +1 @@
|
||||
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};
|
||||
@@ -0,0 +1,41 @@
|
||||
import{j as e}from"./jsx-runtime-C_nHp4yK.js";import{S as r}from"./SectionNumber-Cptefv18.js";import"./iframe-D_aMTKb2.js";import"./preload-helper-DIZFD4sK.js";const u={title:"Components/SectionNumber",component:r,parameters:{layout:"centered",docs:{description:{component:"A numbered icon component that displays a number overlaid on a PNG background image. The component uses different PNG images for numbers 1, 2, and 3, with the image extending beyond the 40px container size."}}},argTypes:{number:{control:{type:"number",min:1,max:3},description:"The number to display (1, 2, or 3)"}},tags:["autodocs"]},n={args:{number:1}},s={args:{number:2}},o={args:{number:3}},a={render:()=>e.jsxs("div",{className:"flex space-x-4",children:[e.jsx(r,{number:1}),e.jsx(r,{number:2}),e.jsx(r,{number:3})]}),parameters:{docs:{description:{story:"Shows all three numbered icons side by side to demonstrate the different PNG backgrounds."}}}},t={render:()=>e.jsx("div",{className:"bg-gray-100 p-8 rounded-lg",children:e.jsxs("div",{className:"flex space-x-4",children:[e.jsx(r,{number:1}),e.jsx(r,{number:2}),e.jsx(r,{number:3})]})}),parameters:{docs:{description:{story:"Shows the numbered icons on a background to demonstrate how the PNG images extend beyond the container."}}}};n.parameters={...n.parameters,docs:{...n.parameters?.docs,source:{originalSource:`{
|
||||
args: {
|
||||
number: 1
|
||||
}
|
||||
}`,...n.parameters?.docs?.source}}};s.parameters={...s.parameters,docs:{...s.parameters?.docs,source:{originalSource:`{
|
||||
args: {
|
||||
number: 2
|
||||
}
|
||||
}`,...s.parameters?.docs?.source}}};o.parameters={...o.parameters,docs:{...o.parameters?.docs,source:{originalSource:`{
|
||||
args: {
|
||||
number: 3
|
||||
}
|
||||
}`,...o.parameters?.docs?.source}}};a.parameters={...a.parameters,docs:{...a.parameters?.docs,source:{originalSource:`{
|
||||
render: () => <div className="flex space-x-4">
|
||||
<SectionNumber number={1} />
|
||||
<SectionNumber number={2} />
|
||||
<SectionNumber number={3} />
|
||||
</div>,
|
||||
parameters: {
|
||||
docs: {
|
||||
description: {
|
||||
story: "Shows all three numbered icons side by side to demonstrate the different PNG backgrounds."
|
||||
}
|
||||
}
|
||||
}
|
||||
}`,...a.parameters?.docs?.source}}};t.parameters={...t.parameters,docs:{...t.parameters?.docs,source:{originalSource:`{
|
||||
render: () => <div className="bg-gray-100 p-8 rounded-lg">
|
||||
<div className="flex space-x-4">
|
||||
<SectionNumber number={1} />
|
||||
<SectionNumber number={2} />
|
||||
<SectionNumber number={3} />
|
||||
</div>
|
||||
</div>,
|
||||
parameters: {
|
||||
docs: {
|
||||
description: {
|
||||
story: "Shows the numbered icons on a background to demonstrate how the PNG images extend beyond the container."
|
||||
}
|
||||
}
|
||||
}
|
||||
}`,...t.parameters?.docs?.source}}};const b=["NumberOne","NumberTwo","NumberThree","AllNumbers","WithBackground"];export{a as AllNumbers,n as NumberOne,o as NumberThree,s as NumberTwo,t as WithBackground,b as __namedExportsOrder,u as default};
|
||||
Binary file not shown.
|
After Width: | Height: | Size: 3.3 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 27 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 22 KiB |
@@ -0,0 +1,15 @@
|
||||
<svg width="28" height="28" viewBox="0 0 28 28" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<g clip-path="url(#clip0_18586_27811)">
|
||||
<mask id="mask0_18586_27811" style="mask-type:luminance" maskUnits="userSpaceOnUse" x="0" y="0" width="28" height="28">
|
||||
<path d="M27.2 0.399994L0 0.399994L0 27.6H27.2V0.399994Z" fill="white"/>
|
||||
</mask>
|
||||
<g mask="url(#mask0_18586_27811)">
|
||||
<path d="M13.6 24.0284C3.31356 32.6244 -5.02436 24.2865 3.57164 14C-5.02436 3.71355 3.31356 -4.62436 13.6 3.97164C23.8845 -4.62436 32.2244 3.71355 23.6284 14C32.2244 24.2786 23.8845 32.6244 13.6 24.0284Z" fill="black"/>
|
||||
</g>
|
||||
</g>
|
||||
<defs>
|
||||
<clipPath id="clip0_18586_27811">
|
||||
<rect width="27.2" height="27.2" fill="white" transform="translate(0 0.399994)"/>
|
||||
</clipPath>
|
||||
</defs>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 752 B |
@@ -0,0 +1,3 @@
|
||||
<svg width="105" height="42" viewBox="0 0 105 42" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<path d="M12.0492 10.0151C12.0492 4.49227 7.57203 0 2.04918 0H0V53H105V42.0635H44.0492C26.3761 42.0635 12.0492 27.6882 12.0492 10.0151Z" fill="#FEFCC9"/>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 259 B |
@@ -0,0 +1,3 @@
|
||||
<svg width="61" height="25" viewBox="0 0 61 25" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<path d="M7 0H0V31.5H61V25H31C17.7452 25 7 14.2548 7 1V0Z" fill="#FEFCC9"/>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 179 B |
@@ -0,0 +1,3 @@
|
||||
<svg width="105" height="42" viewBox="0 0 105 42" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<path d="M12.0492 10.0151C12.0492 4.49227 7.57203 0 2.04918 0H0V53H105V42.0635H44.0492C26.3761 42.0635 12.0492 27.6882 12.0492 10.0151Z" fill="#FEFCC9"/>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 259 B |
@@ -0,0 +1,3 @@
|
||||
<svg width="61" height="19" viewBox="0 0 61 19" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<path d="M7 0H0V24H61V19.0476H23C14.1634 19.0476 7 11.8842 7 3.04761V0Z" fill="#FEFCC9"/>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 193 B |
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
@@ -0,0 +1 @@
|
||||
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};
|
||||
@@ -0,0 +1 @@
|
||||
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
@@ -0,0 +1 @@
|
||||
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
+25
File diff suppressed because one or more lines are too long
Reference in New Issue
Block a user