Fix prettier formatting issues
This commit is contained in:
adilallo
@@ -1 +1,15 @@
|
||||
import{j as u}from"./jsx-runtime-C_nHp4yK.js";function o({src:e,alt:s,size:a="small",className:l="",...r}){const t=`rounded-[var(--radius-measures-radius-full)] object-cover ${{small:"w-[16px] h-[16px]",medium:"w-[18px] h-[18px]",large:"w-[24px] h-[24px]",xlarge:"w-[32px] h-[32px]"}[a]} ${l}`;return u.jsx("img",{src:e,alt:s,className:t,...r})}o.__docgenInfo={description:"",methods:[],displayName:"Avatar",props:{size:{defaultValue:{value:'"small"',computed:!1},required:!1},className:{defaultValue:{value:'""',computed:!1},required:!1}}};export{o as A};
|
||||
import { j as u } from "./jsx-runtime-C_nHp4yK.js";
|
||||
function o({ src: e, alt: s, size: a = "small", className: l = "", ...r }) {
|
||||
const t = `rounded-[var(--radius-measures-radius-full)] object-cover ${{ small: "w-[16px] h-[16px]", medium: "w-[18px] h-[18px]", large: "w-[24px] h-[24px]", xlarge: "w-[32px] h-[32px]" }[a]} ${l}`;
|
||||
return u.jsx("img", { src: e, alt: s, className: t, ...r });
|
||||
}
|
||||
o.__docgenInfo = {
|
||||
description: "",
|
||||
methods: [],
|
||||
displayName: "Avatar",
|
||||
props: {
|
||||
size: { defaultValue: { value: '"small"', computed: !1 }, required: !1 },
|
||||
className: { defaultValue: { value: '""', computed: !1 }, required: !1 },
|
||||
},
|
||||
};
|
||||
export { o as A };
|
||||
|
||||
@@ -1,10 +1,239 @@
|
||||
import{j as s}from"./jsx-runtime-C_nHp4yK.js";import{A as a}from"./Avatar-C4Vb3oYl.js";import"./iframe-D_aMTKb2.js";import"./preload-helper-DIZFD4sK.js";const d={title:"Components/Avatar",component:a,parameters:{layout:"centered",docs:{description:{component:"A simple avatar component that displays user profile images with multiple size variants. Supports custom images and alt text for accessibility."}}},argTypes:{src:{control:{type:"text"},description:"The source URL of the avatar image"},alt:{control:{type:"text"},description:"Alt text for accessibility"},size:{control:{type:"select"},options:["small","medium","large","xlarge"],description:"The size of the avatar"},className:{control:{type:"text"},description:"Additional CSS classes"}},tags:["autodocs"]},r={args:{src:"/assets/Avatar_1.png",alt:"User Avatar",size:"medium"}},t={args:{src:"/assets/Avatar_1.png",alt:"User Avatar"},render:e=>s.jsx("div",{className:"space-y-4",children:s.jsxs("div",{className:"space-x-4",children:[s.jsx(a,{...e,size:"small"}),s.jsx(a,{...e,size:"medium"}),s.jsx(a,{...e,size:"large"}),s.jsx(a,{...e,size:"xlarge"})]})}),parameters:{docs:{description:{story:"Different size variants available for the avatar component."}}}},i={args:{size:"large"},render:e=>s.jsx("div",{className:"space-y-4",children:s.jsxs("div",{className:"space-x-4",children:[s.jsx(a,{...e,src:"assets/Avatar_1.png",alt:"User 1"}),s.jsx(a,{...e,src:"assets/Avatar_2.png",alt:"User 2"}),s.jsx(a,{...e,src:"assets/Avatar_3.png",alt:"User 3"})]})}),parameters:{docs:{description:{story:"Different avatar images available in the project."}}}},n={args:{},render:()=>s.jsxs("div",{className:"space-y-6",children:[s.jsxs("div",{children:[s.jsx("h3",{className:"text-white font-semibold mb-3",children:"Small Size"}),s.jsxs("div",{className:"space-x-4",children:[s.jsx(a,{size:"small",src:"assets/Avatar_1.png",alt:"User 1"}),s.jsx(a,{size:"small",src:"assets/Avatar_2.png",alt:"User 2"}),s.jsx(a,{size:"small",src:"assets/Avatar_3.png",alt:"User 3"})]})]}),s.jsxs("div",{children:[s.jsx("h3",{className:"text-white font-semibold mb-3",children:"Medium Size"}),s.jsxs("div",{className:"space-x-4",children:[s.jsx(a,{size:"medium",src:"assets/Avatar_1.png",alt:"User 1"}),s.jsx(a,{size:"medium",src:"assets/Avatar_2.png",alt:"User 2"}),s.jsx(a,{size:"medium",src:"assets/Avatar_3.png",alt:"User 3"})]})]}),s.jsxs("div",{children:[s.jsx("h3",{className:"text-white font-semibold mb-3",children:"Large Size"}),s.jsxs("div",{className:"space-x-4",children:[s.jsx(a,{size:"large",src:"assets/Avatar_1.png",alt:"User 1"}),s.jsx(a,{size:"large",src:"assets/Avatar_2.png",alt:"User 2"}),s.jsx(a,{size:"large",src:"assets/Avatar_3.png",alt:"User 3"})]})]}),s.jsxs("div",{children:[s.jsx("h3",{className:"text-white font-semibold mb-3",children:"XLarge Size"}),s.jsxs("div",{className:"space-x-4",children:[s.jsx(a,{size:"xlarge",src:"assets/Avatar_1.png",alt:"User 1"}),s.jsx(a,{size:"xlarge",src:"assets/Avatar_2.png",alt:"User 2"}),s.jsx(a,{size:"xlarge",src:"assets/Avatar_3.png",alt:"User 3"})]})]})]}),parameters:{docs:{description:{story:"Complete overview of all avatar sizes with different user images."}}}};r.parameters={...r.parameters,docs:{...r.parameters?.docs,source:{originalSource:`{
|
||||
import { j as s } from "./jsx-runtime-C_nHp4yK.js";
|
||||
import { A as a } from "./Avatar-C4Vb3oYl.js";
|
||||
import "./iframe-D_aMTKb2.js";
|
||||
import "./preload-helper-DIZFD4sK.js";
|
||||
const d = {
|
||||
title: "Components/Avatar",
|
||||
component: a,
|
||||
parameters: {
|
||||
layout: "centered",
|
||||
docs: {
|
||||
description: {
|
||||
component:
|
||||
"A simple avatar component that displays user profile images with multiple size variants. Supports custom images and alt text for accessibility.",
|
||||
},
|
||||
},
|
||||
},
|
||||
argTypes: {
|
||||
src: {
|
||||
control: { type: "text" },
|
||||
description: "The source URL of the avatar image",
|
||||
},
|
||||
alt: {
|
||||
control: { type: "text" },
|
||||
description: "Alt text for accessibility",
|
||||
},
|
||||
size: {
|
||||
control: { type: "select" },
|
||||
options: ["small", "medium", "large", "xlarge"],
|
||||
description: "The size of the avatar",
|
||||
},
|
||||
className: {
|
||||
control: { type: "text" },
|
||||
description: "Additional CSS classes",
|
||||
},
|
||||
},
|
||||
tags: ["autodocs"],
|
||||
},
|
||||
r = {
|
||||
args: { src: "/assets/Avatar_1.png", alt: "User Avatar", size: "medium" },
|
||||
},
|
||||
t = {
|
||||
args: { src: "/assets/Avatar_1.png", alt: "User Avatar" },
|
||||
render: (e) =>
|
||||
s.jsx("div", {
|
||||
className: "space-y-4",
|
||||
children: s.jsxs("div", {
|
||||
className: "space-x-4",
|
||||
children: [
|
||||
s.jsx(a, { ...e, size: "small" }),
|
||||
s.jsx(a, { ...e, size: "medium" }),
|
||||
s.jsx(a, { ...e, size: "large" }),
|
||||
s.jsx(a, { ...e, size: "xlarge" }),
|
||||
],
|
||||
}),
|
||||
}),
|
||||
parameters: {
|
||||
docs: {
|
||||
description: {
|
||||
story: "Different size variants available for the avatar component.",
|
||||
},
|
||||
},
|
||||
},
|
||||
},
|
||||
i = {
|
||||
args: { size: "large" },
|
||||
render: (e) =>
|
||||
s.jsx("div", {
|
||||
className: "space-y-4",
|
||||
children: s.jsxs("div", {
|
||||
className: "space-x-4",
|
||||
children: [
|
||||
s.jsx(a, { ...e, src: "assets/Avatar_1.png", alt: "User 1" }),
|
||||
s.jsx(a, { ...e, src: "assets/Avatar_2.png", alt: "User 2" }),
|
||||
s.jsx(a, { ...e, src: "assets/Avatar_3.png", alt: "User 3" }),
|
||||
],
|
||||
}),
|
||||
}),
|
||||
parameters: {
|
||||
docs: {
|
||||
description: {
|
||||
story: "Different avatar images available in the project.",
|
||||
},
|
||||
},
|
||||
},
|
||||
},
|
||||
n = {
|
||||
args: {},
|
||||
render: () =>
|
||||
s.jsxs("div", {
|
||||
className: "space-y-6",
|
||||
children: [
|
||||
s.jsxs("div", {
|
||||
children: [
|
||||
s.jsx("h3", {
|
||||
className: "text-white font-semibold mb-3",
|
||||
children: "Small Size",
|
||||
}),
|
||||
s.jsxs("div", {
|
||||
className: "space-x-4",
|
||||
children: [
|
||||
s.jsx(a, {
|
||||
size: "small",
|
||||
src: "assets/Avatar_1.png",
|
||||
alt: "User 1",
|
||||
}),
|
||||
s.jsx(a, {
|
||||
size: "small",
|
||||
src: "assets/Avatar_2.png",
|
||||
alt: "User 2",
|
||||
}),
|
||||
s.jsx(a, {
|
||||
size: "small",
|
||||
src: "assets/Avatar_3.png",
|
||||
alt: "User 3",
|
||||
}),
|
||||
],
|
||||
}),
|
||||
],
|
||||
}),
|
||||
s.jsxs("div", {
|
||||
children: [
|
||||
s.jsx("h3", {
|
||||
className: "text-white font-semibold mb-3",
|
||||
children: "Medium Size",
|
||||
}),
|
||||
s.jsxs("div", {
|
||||
className: "space-x-4",
|
||||
children: [
|
||||
s.jsx(a, {
|
||||
size: "medium",
|
||||
src: "assets/Avatar_1.png",
|
||||
alt: "User 1",
|
||||
}),
|
||||
s.jsx(a, {
|
||||
size: "medium",
|
||||
src: "assets/Avatar_2.png",
|
||||
alt: "User 2",
|
||||
}),
|
||||
s.jsx(a, {
|
||||
size: "medium",
|
||||
src: "assets/Avatar_3.png",
|
||||
alt: "User 3",
|
||||
}),
|
||||
],
|
||||
}),
|
||||
],
|
||||
}),
|
||||
s.jsxs("div", {
|
||||
children: [
|
||||
s.jsx("h3", {
|
||||
className: "text-white font-semibold mb-3",
|
||||
children: "Large Size",
|
||||
}),
|
||||
s.jsxs("div", {
|
||||
className: "space-x-4",
|
||||
children: [
|
||||
s.jsx(a, {
|
||||
size: "large",
|
||||
src: "assets/Avatar_1.png",
|
||||
alt: "User 1",
|
||||
}),
|
||||
s.jsx(a, {
|
||||
size: "large",
|
||||
src: "assets/Avatar_2.png",
|
||||
alt: "User 2",
|
||||
}),
|
||||
s.jsx(a, {
|
||||
size: "large",
|
||||
src: "assets/Avatar_3.png",
|
||||
alt: "User 3",
|
||||
}),
|
||||
],
|
||||
}),
|
||||
],
|
||||
}),
|
||||
s.jsxs("div", {
|
||||
children: [
|
||||
s.jsx("h3", {
|
||||
className: "text-white font-semibold mb-3",
|
||||
children: "XLarge Size",
|
||||
}),
|
||||
s.jsxs("div", {
|
||||
className: "space-x-4",
|
||||
children: [
|
||||
s.jsx(a, {
|
||||
size: "xlarge",
|
||||
src: "assets/Avatar_1.png",
|
||||
alt: "User 1",
|
||||
}),
|
||||
s.jsx(a, {
|
||||
size: "xlarge",
|
||||
src: "assets/Avatar_2.png",
|
||||
alt: "User 2",
|
||||
}),
|
||||
s.jsx(a, {
|
||||
size: "xlarge",
|
||||
src: "assets/Avatar_3.png",
|
||||
alt: "User 3",
|
||||
}),
|
||||
],
|
||||
}),
|
||||
],
|
||||
}),
|
||||
],
|
||||
}),
|
||||
parameters: {
|
||||
docs: {
|
||||
description: {
|
||||
story:
|
||||
"Complete overview of all avatar sizes with different user images.",
|
||||
},
|
||||
},
|
||||
},
|
||||
};
|
||||
r.parameters = {
|
||||
...r.parameters,
|
||||
docs: {
|
||||
...r.parameters?.docs,
|
||||
source: {
|
||||
originalSource: `{
|
||||
args: {
|
||||
src: "/assets/Avatar_1.png",
|
||||
alt: "User Avatar",
|
||||
size: "medium"
|
||||
}
|
||||
}`,...r.parameters?.docs?.source}}};t.parameters={...t.parameters,docs:{...t.parameters?.docs,source:{originalSource:`{
|
||||
}`,
|
||||
...r.parameters?.docs?.source,
|
||||
},
|
||||
},
|
||||
};
|
||||
t.parameters = {
|
||||
...t.parameters,
|
||||
docs: {
|
||||
...t.parameters?.docs,
|
||||
source: {
|
||||
originalSource: `{
|
||||
args: {
|
||||
src: "/assets/Avatar_1.png",
|
||||
alt: "User Avatar"
|
||||
@@ -24,7 +253,17 @@ import{j as s}from"./jsx-runtime-C_nHp4yK.js";import{A as a}from"./Avatar-C4Vb3o
|
||||
}
|
||||
}
|
||||
}
|
||||
}`,...t.parameters?.docs?.source}}};i.parameters={...i.parameters,docs:{...i.parameters?.docs,source:{originalSource:`{
|
||||
}`,
|
||||
...t.parameters?.docs?.source,
|
||||
},
|
||||
},
|
||||
};
|
||||
i.parameters = {
|
||||
...i.parameters,
|
||||
docs: {
|
||||
...i.parameters?.docs,
|
||||
source: {
|
||||
originalSource: `{
|
||||
args: {
|
||||
size: "large"
|
||||
},
|
||||
@@ -42,7 +281,17 @@ import{j as s}from"./jsx-runtime-C_nHp4yK.js";import{A as a}from"./Avatar-C4Vb3o
|
||||
}
|
||||
}
|
||||
}
|
||||
}`,...i.parameters?.docs?.source}}};n.parameters={...n.parameters,docs:{...n.parameters?.docs,source:{originalSource:`{
|
||||
}`,
|
||||
...i.parameters?.docs?.source,
|
||||
},
|
||||
},
|
||||
};
|
||||
n.parameters = {
|
||||
...n.parameters,
|
||||
docs: {
|
||||
...n.parameters?.docs,
|
||||
source: {
|
||||
originalSource: `{
|
||||
args: {},
|
||||
render: () => <div className="space-y-6">
|
||||
<div>
|
||||
@@ -88,4 +337,22 @@ import{j as s}from"./jsx-runtime-C_nHp4yK.js";import{A as a}from"./Avatar-C4Vb3o
|
||||
}
|
||||
}
|
||||
}
|
||||
}`,...n.parameters?.docs?.source}}};const v=["Default","Sizes","DifferentAvatars","AllSizesWithDifferentAvatars"];export{n as AllSizesWithDifferentAvatars,r as Default,i as DifferentAvatars,t as Sizes,v as __namedExportsOrder,d as default};
|
||||
}`,
|
||||
...n.parameters?.docs?.source,
|
||||
},
|
||||
},
|
||||
};
|
||||
const v = [
|
||||
"Default",
|
||||
"Sizes",
|
||||
"DifferentAvatars",
|
||||
"AllSizesWithDifferentAvatars",
|
||||
];
|
||||
export {
|
||||
n as AllSizesWithDifferentAvatars,
|
||||
r as Default,
|
||||
i as DifferentAvatars,
|
||||
t as Sizes,
|
||||
v as __namedExportsOrder,
|
||||
d as default,
|
||||
};
|
||||
|
||||
@@ -1 +1,15 @@
|
||||
import{j as r}from"./jsx-runtime-C_nHp4yK.js";function i({children:e,size:a="small",className:s="",...l}){const t=`items-center ${{small:"flex -space-x-2",medium:"flex -space-x-[9px]",large:"flex -space-x-[10px]",xlarge:"flex -space-x-[13px]"}[a]} ${s}`;return r.jsx("div",{className:t,...l,children:e})}i.__docgenInfo={description:"",methods:[],displayName:"AvatarContainer",props:{size:{defaultValue:{value:'"small"',computed:!1},required:!1},className:{defaultValue:{value:'""',computed:!1},required:!1}}};export{i as A};
|
||||
import { j as r } from "./jsx-runtime-C_nHp4yK.js";
|
||||
function i({ children: e, size: a = "small", className: s = "", ...l }) {
|
||||
const t = `items-center ${{ small: "flex -space-x-2", medium: "flex -space-x-[9px]", large: "flex -space-x-[10px]", xlarge: "flex -space-x-[13px]" }[a]} ${s}`;
|
||||
return r.jsx("div", { className: t, ...l, children: e });
|
||||
}
|
||||
i.__docgenInfo = {
|
||||
description: "",
|
||||
methods: [],
|
||||
displayName: "AvatarContainer",
|
||||
props: {
|
||||
size: { defaultValue: { value: '"small"', computed: !1 }, required: !1 },
|
||||
className: { defaultValue: { value: '""', computed: !1 }, required: !1 },
|
||||
},
|
||||
};
|
||||
export { i as A };
|
||||
|
||||
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
@@ -1 +1,96 @@
|
||||
import{j as e}from"./jsx-runtime-C_nHp4yK.js";import{B as s}from"./Button-Z4hbXct5.js";const n=({title:l,subtitle:i,description:x,ctaText:a,ctaHref:t,buttonClassName:r=""})=>e.jsxs("div",{className:"flex flex-col gap-[var(--spacing-scale-006)] sm:gap-[var(--spacing-scale-012)] md:gap-[var(--spacing-scale-020)] lg:gap-[var(--spacing-scale-020)] relative z-10",children:[e.jsxs("div",{className:"flex flex-col md:gap-[var(--spacing-scale-004)] lg:gap-[var(--spacing-scale-008)] xl:gap-[var(--spacing-scale-020)]",children:[e.jsxs("div",{className:"flex flex-col xl:gap-0",children:[e.jsxs("div",{className:"flex gap-[var(--spacing-scale-008)] xl:gap-[var(--spacing-scale-010)] items-center",children:[e.jsx("h1",{className:"font-bricolage-grotesque font-medium text-[32px] leading-[32px] sm:text-[52px] sm:leading-[52px] md:text-[44px] md:leading-[44px] lg:text-[64px] lg:leading-[64px] xl:text-[96px] xl:leading-[110%] text-[var(--color-content-inverse-primary)]",children:l}),e.jsx("img",{src:"assets/Shapes_1.svg",alt:"Decorative shapes",className:"w-[27.2px] h-[27.2px] md:w-[34px] md:h-[34px] lg:w-[50px] lg:h-[50px]"})]}),e.jsx("h2",{className:"font-bricolage-grotesque font-medium text-[32px] leading-[32px] sm:text-[52px] sm:leading-[52px] md:text-[44px] md:leading-[44px] lg:text-[64px] lg:leading-[64px] xl:text-[96px] xl:leading-[110%] text-[var(--color-content-inverse-primary)]",children:i})]}),e.jsx("p",{className:"font-inter font-[400] text-[18px] leading-[130%] lg:text-[24px] lg:leading-[32px] xl:text-[32px] xl:leading-[40px] text-[var(--color-content-inverse-primary)] pr-[var(--spacing-scale-032)] md:pr-[var(--spacing-scale-008)] lg:pr-[var(--spacing-scale-032)]",children:x})]}),e.jsxs("div",{className:"flex justify-start",children:[e.jsx("div",{className:"block md:hidden",children:e.jsx(s,{variant:"primary",size:"small",children:a})}),e.jsx("div",{className:"hidden md:block xl:hidden",children:e.jsx(s,{variant:"primary",size:"large",className:r,children:a})}),e.jsx("div",{className:"hidden xl:block",children:e.jsx(s,{variant:"primary",size:"xlarge",children:a})})]})]});n.__docgenInfo={description:"",methods:[],displayName:"ContentLockup",props:{buttonClassName:{defaultValue:{value:'""',computed:!1},required:!1}}};export{n as C};
|
||||
import { j as e } from "./jsx-runtime-C_nHp4yK.js";
|
||||
import { B as s } from "./Button-Z4hbXct5.js";
|
||||
const n = ({
|
||||
title: l,
|
||||
subtitle: i,
|
||||
description: x,
|
||||
ctaText: a,
|
||||
ctaHref: t,
|
||||
buttonClassName: r = "",
|
||||
}) =>
|
||||
e.jsxs("div", {
|
||||
className:
|
||||
"flex flex-col gap-[var(--spacing-scale-006)] sm:gap-[var(--spacing-scale-012)] md:gap-[var(--spacing-scale-020)] lg:gap-[var(--spacing-scale-020)] relative z-10",
|
||||
children: [
|
||||
e.jsxs("div", {
|
||||
className:
|
||||
"flex flex-col md:gap-[var(--spacing-scale-004)] lg:gap-[var(--spacing-scale-008)] xl:gap-[var(--spacing-scale-020)]",
|
||||
children: [
|
||||
e.jsxs("div", {
|
||||
className: "flex flex-col xl:gap-0",
|
||||
children: [
|
||||
e.jsxs("div", {
|
||||
className:
|
||||
"flex gap-[var(--spacing-scale-008)] xl:gap-[var(--spacing-scale-010)] items-center",
|
||||
children: [
|
||||
e.jsx("h1", {
|
||||
className:
|
||||
"font-bricolage-grotesque font-medium text-[32px] leading-[32px] sm:text-[52px] sm:leading-[52px] md:text-[44px] md:leading-[44px] lg:text-[64px] lg:leading-[64px] xl:text-[96px] xl:leading-[110%] text-[var(--color-content-inverse-primary)]",
|
||||
children: l,
|
||||
}),
|
||||
e.jsx("img", {
|
||||
src: "assets/Shapes_1.svg",
|
||||
alt: "Decorative shapes",
|
||||
className:
|
||||
"w-[27.2px] h-[27.2px] md:w-[34px] md:h-[34px] lg:w-[50px] lg:h-[50px]",
|
||||
}),
|
||||
],
|
||||
}),
|
||||
e.jsx("h2", {
|
||||
className:
|
||||
"font-bricolage-grotesque font-medium text-[32px] leading-[32px] sm:text-[52px] sm:leading-[52px] md:text-[44px] md:leading-[44px] lg:text-[64px] lg:leading-[64px] xl:text-[96px] xl:leading-[110%] text-[var(--color-content-inverse-primary)]",
|
||||
children: i,
|
||||
}),
|
||||
],
|
||||
}),
|
||||
e.jsx("p", {
|
||||
className:
|
||||
"font-inter font-[400] text-[18px] leading-[130%] lg:text-[24px] lg:leading-[32px] xl:text-[32px] xl:leading-[40px] text-[var(--color-content-inverse-primary)] pr-[var(--spacing-scale-032)] md:pr-[var(--spacing-scale-008)] lg:pr-[var(--spacing-scale-032)]",
|
||||
children: x,
|
||||
}),
|
||||
],
|
||||
}),
|
||||
e.jsxs("div", {
|
||||
className: "flex justify-start",
|
||||
children: [
|
||||
e.jsx("div", {
|
||||
className: "block md:hidden",
|
||||
children: e.jsx(s, {
|
||||
variant: "primary",
|
||||
size: "small",
|
||||
children: a,
|
||||
}),
|
||||
}),
|
||||
e.jsx("div", {
|
||||
className: "hidden md:block xl:hidden",
|
||||
children: e.jsx(s, {
|
||||
variant: "primary",
|
||||
size: "large",
|
||||
className: r,
|
||||
children: a,
|
||||
}),
|
||||
}),
|
||||
e.jsx("div", {
|
||||
className: "hidden xl:block",
|
||||
children: e.jsx(s, {
|
||||
variant: "primary",
|
||||
size: "xlarge",
|
||||
children: a,
|
||||
}),
|
||||
}),
|
||||
],
|
||||
}),
|
||||
],
|
||||
});
|
||||
n.__docgenInfo = {
|
||||
description: "",
|
||||
methods: [],
|
||||
displayName: "ContentLockup",
|
||||
props: {
|
||||
buttonClassName: {
|
||||
defaultValue: { value: '""', computed: !1 },
|
||||
required: !1,
|
||||
},
|
||||
},
|
||||
};
|
||||
export { n as C };
|
||||
|
||||
@@ -1,4 +1,120 @@
|
||||
import{C as s}from"./ContentLockup-DbWiPA4N.js";import"./jsx-runtime-C_nHp4yK.js";import"./iframe-D_aMTKb2.js";import"./preload-helper-DIZFD4sK.js";import"./Button-Z4hbXct5.js";const p={title:"Components/ContentLockup",component:s,parameters:{layout:"centered",docs:{description:{component:"A content lockup component that groups title, subtitle, description, and CTA button. Features responsive typography and spacing that adapts across breakpoints. Used within the HeroBanner component."}}},argTypes:{title:{control:{type:"text"},description:"The main title text"},subtitle:{control:{type:"text"},description:"The subtitle text"},description:{control:{type:"text"},description:"The description text"},ctaText:{control:{type:"text"},description:"The call-to-action button text"},ctaHref:{control:{type:"text"},description:"The call-to-action button link"},buttonClassName:{control:{type:"text"},description:"Additional CSS classes to apply to the large button (md/lg breakpoints)"}},tags:["autodocs"]},t={args:{title:"Collaborate",subtitle:"with clarity",description:"Help your community make important decisions in a way that reflects its unique values.",ctaText:"Learn how Community Rule works",ctaHref:"#"},parameters:{docs:{description:{story:"Default content lockup with standard Community Rule messaging."}}}},e={args:{title:"Collaborate",subtitle:"with clarity",description:"Help your community make important decisions in a way that reflects its unique values. Our platform provides the tools and frameworks needed to build successful, sustainable communities that can navigate complex challenges together.",ctaText:"Learn how Community Rule works",ctaHref:"#"},parameters:{docs:{description:{story:"Content lockup with longer description text to test text wrapping."}}}},o={args:{title:"Simple",subtitle:"solution",description:"Easy community decision making.",ctaText:"Try it",ctaHref:"#"},parameters:{docs:{description:{story:"Content lockup with minimal content to test compact layouts."}}}},n={args:{title:"Collaborate",subtitle:"with clarity",description:"Help your community make important decisions in a way that reflects its unique values.",ctaText:"Learn how Community Rule works",ctaHref:"#",buttonClassName:"shrink-0 whitespace-nowrap min-w-[280px]"},parameters:{docs:{description:{story:"Content lockup with custom button styling applied to the large button (md/lg breakpoints)."}}}};t.parameters={...t.parameters,docs:{...t.parameters?.docs,source:{originalSource:`{
|
||||
import { C as s } from "./ContentLockup-DbWiPA4N.js";
|
||||
import "./jsx-runtime-C_nHp4yK.js";
|
||||
import "./iframe-D_aMTKb2.js";
|
||||
import "./preload-helper-DIZFD4sK.js";
|
||||
import "./Button-Z4hbXct5.js";
|
||||
const p = {
|
||||
title: "Components/ContentLockup",
|
||||
component: s,
|
||||
parameters: {
|
||||
layout: "centered",
|
||||
docs: {
|
||||
description: {
|
||||
component:
|
||||
"A content lockup component that groups title, subtitle, description, and CTA button. Features responsive typography and spacing that adapts across breakpoints. Used within the HeroBanner component.",
|
||||
},
|
||||
},
|
||||
},
|
||||
argTypes: {
|
||||
title: { control: { type: "text" }, description: "The main title text" },
|
||||
subtitle: { control: { type: "text" }, description: "The subtitle text" },
|
||||
description: {
|
||||
control: { type: "text" },
|
||||
description: "The description text",
|
||||
},
|
||||
ctaText: {
|
||||
control: { type: "text" },
|
||||
description: "The call-to-action button text",
|
||||
},
|
||||
ctaHref: {
|
||||
control: { type: "text" },
|
||||
description: "The call-to-action button link",
|
||||
},
|
||||
buttonClassName: {
|
||||
control: { type: "text" },
|
||||
description:
|
||||
"Additional CSS classes to apply to the large button (md/lg breakpoints)",
|
||||
},
|
||||
},
|
||||
tags: ["autodocs"],
|
||||
},
|
||||
t = {
|
||||
args: {
|
||||
title: "Collaborate",
|
||||
subtitle: "with clarity",
|
||||
description:
|
||||
"Help your community make important decisions in a way that reflects its unique values.",
|
||||
ctaText: "Learn how Community Rule works",
|
||||
ctaHref: "#",
|
||||
},
|
||||
parameters: {
|
||||
docs: {
|
||||
description: {
|
||||
story:
|
||||
"Default content lockup with standard Community Rule messaging.",
|
||||
},
|
||||
},
|
||||
},
|
||||
},
|
||||
e = {
|
||||
args: {
|
||||
title: "Collaborate",
|
||||
subtitle: "with clarity",
|
||||
description:
|
||||
"Help your community make important decisions in a way that reflects its unique values. Our platform provides the tools and frameworks needed to build successful, sustainable communities that can navigate complex challenges together.",
|
||||
ctaText: "Learn how Community Rule works",
|
||||
ctaHref: "#",
|
||||
},
|
||||
parameters: {
|
||||
docs: {
|
||||
description: {
|
||||
story:
|
||||
"Content lockup with longer description text to test text wrapping.",
|
||||
},
|
||||
},
|
||||
},
|
||||
},
|
||||
o = {
|
||||
args: {
|
||||
title: "Simple",
|
||||
subtitle: "solution",
|
||||
description: "Easy community decision making.",
|
||||
ctaText: "Try it",
|
||||
ctaHref: "#",
|
||||
},
|
||||
parameters: {
|
||||
docs: {
|
||||
description: {
|
||||
story: "Content lockup with minimal content to test compact layouts.",
|
||||
},
|
||||
},
|
||||
},
|
||||
},
|
||||
n = {
|
||||
args: {
|
||||
title: "Collaborate",
|
||||
subtitle: "with clarity",
|
||||
description:
|
||||
"Help your community make important decisions in a way that reflects its unique values.",
|
||||
ctaText: "Learn how Community Rule works",
|
||||
ctaHref: "#",
|
||||
buttonClassName: "shrink-0 whitespace-nowrap min-w-[280px]",
|
||||
},
|
||||
parameters: {
|
||||
docs: {
|
||||
description: {
|
||||
story:
|
||||
"Content lockup with custom button styling applied to the large button (md/lg breakpoints).",
|
||||
},
|
||||
},
|
||||
},
|
||||
};
|
||||
t.parameters = {
|
||||
...t.parameters,
|
||||
docs: {
|
||||
...t.parameters?.docs,
|
||||
source: {
|
||||
originalSource: `{
|
||||
args: {
|
||||
title: "Collaborate",
|
||||
subtitle: "with clarity",
|
||||
@@ -13,7 +129,17 @@ import{C as s}from"./ContentLockup-DbWiPA4N.js";import"./jsx-runtime-C_nHp4yK.js
|
||||
}
|
||||
}
|
||||
}
|
||||
}`,...t.parameters?.docs?.source}}};e.parameters={...e.parameters,docs:{...e.parameters?.docs,source:{originalSource:`{
|
||||
}`,
|
||||
...t.parameters?.docs?.source,
|
||||
},
|
||||
},
|
||||
};
|
||||
e.parameters = {
|
||||
...e.parameters,
|
||||
docs: {
|
||||
...e.parameters?.docs,
|
||||
source: {
|
||||
originalSource: `{
|
||||
args: {
|
||||
title: "Collaborate",
|
||||
subtitle: "with clarity",
|
||||
@@ -28,7 +154,17 @@ import{C as s}from"./ContentLockup-DbWiPA4N.js";import"./jsx-runtime-C_nHp4yK.js
|
||||
}
|
||||
}
|
||||
}
|
||||
}`,...e.parameters?.docs?.source}}};o.parameters={...o.parameters,docs:{...o.parameters?.docs,source:{originalSource:`{
|
||||
}`,
|
||||
...e.parameters?.docs?.source,
|
||||
},
|
||||
},
|
||||
};
|
||||
o.parameters = {
|
||||
...o.parameters,
|
||||
docs: {
|
||||
...o.parameters?.docs,
|
||||
source: {
|
||||
originalSource: `{
|
||||
args: {
|
||||
title: "Simple",
|
||||
subtitle: "solution",
|
||||
@@ -43,7 +179,17 @@ import{C as s}from"./ContentLockup-DbWiPA4N.js";import"./jsx-runtime-C_nHp4yK.js
|
||||
}
|
||||
}
|
||||
}
|
||||
}`,...o.parameters?.docs?.source}}};n.parameters={...n.parameters,docs:{...n.parameters?.docs,source:{originalSource:`{
|
||||
}`,
|
||||
...o.parameters?.docs?.source,
|
||||
},
|
||||
},
|
||||
};
|
||||
n.parameters = {
|
||||
...n.parameters,
|
||||
docs: {
|
||||
...n.parameters?.docs,
|
||||
source: {
|
||||
originalSource: `{
|
||||
args: {
|
||||
title: "Collaborate",
|
||||
subtitle: "with clarity",
|
||||
@@ -59,4 +205,17 @@ import{C as s}from"./ContentLockup-DbWiPA4N.js";import"./jsx-runtime-C_nHp4yK.js
|
||||
}
|
||||
}
|
||||
}
|
||||
}`,...n.parameters?.docs?.source}}};const u=["Default","LongDescription","ShortContent","CustomButtonStyling"];export{n as CustomButtonStyling,t as Default,e as LongDescription,o as ShortContent,u as __namedExportsOrder,p as default};
|
||||
}`,
|
||||
...n.parameters?.docs?.source,
|
||||
},
|
||||
},
|
||||
};
|
||||
const u = ["Default", "LongDescription", "ShortContent", "CustomButtonStyling"];
|
||||
export {
|
||||
n as CustomButtonStyling,
|
||||
t as Default,
|
||||
e as LongDescription,
|
||||
o as ShortContent,
|
||||
u as __namedExportsOrder,
|
||||
p as default,
|
||||
};
|
||||
|
||||
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
@@ -1 +1,191 @@
|
||||
import{j as e}from"./jsx-runtime-C_nHp4yK.js";import{L as v}from"./Logo-DM7O8ATg.js";import{M as t}from"./MenuBar-anMCqtJv.js";import{M as d}from"./MenuBarItem-Dp8NM2fx.js";import{B as j}from"./Button-Z4hbXct5.js";import{A as b}from"./AvatarContainer-Bt0G0TWZ.js";import{A as f}from"./Avatar-C4Vb3oYl.js";function N({onToggle:c}){const m={"@context":"https://schema.org","@type":"WebSite",name:"CommunityRule",url:"https://communityrule.com",potentialAction:{"@type":"SearchAction",target:"https://communityrule.com/search?q={search_term_string}","query-input":"required name=search_term_string"}},o=[{href:"#",text:"Use cases",extraPadding:!0},{href:"#",text:"Learn"},{href:"#",text:"About"}],x=[{src:"/assets/Avatar_1.png",alt:"Avatar 1"},{src:"/assets/Avatar_2.png",alt:"Avatar 2"},{src:"/assets/Avatar_3.png",alt:"Avatar 3"}],h=[{breakpoint:"block sm:hidden",size:"header",showText:!1},{breakpoint:"hidden sm:block md:hidden",size:"header",showText:!0},{breakpoint:"hidden md:block lg:hidden",size:"headerMd",showText:!0},{breakpoint:"hidden lg:block xl:hidden",size:"headerLg",showText:!0},{breakpoint:"hidden xl:block",size:"headerXl",showText:!0}],i=a=>o.map((s,r)=>e.jsx(d,{href:s.href,size:s.extraPadding&&a==="xsmall"?"xsmallUseCases":a,onClick:c,ariaLabel:`Navigate to ${s.text} page`,children:s.text},r)),g=(a,s)=>e.jsx(b,{size:a,children:x.map((r,u)=>e.jsx(f,{src:r.src,alt:r.alt,size:s},u))}),l=a=>e.jsx(d,{href:"#",size:a,ariaLabel:"Log in to your account",children:"Log in"}),n=(a,s,r)=>e.jsxs(j,{size:a,ariaLabel:"Create a new rule with avatar decoration",children:[g(s,r),e.jsx("span",{children:"Create rule"})]}),p=(a,s)=>e.jsx(v,{size:a,showText:s});return e.jsxs(e.Fragment,{children:[e.jsx("script",{type:"application/ld+json",dangerouslySetInnerHTML:{__html:JSON.stringify(m)}}),e.jsx("header",{className:"bg-[var(--color-surface-default-primary)] w-full border-b border-[var(--border-color-default-tertiary)]",role:"banner","aria-label":"Main navigation header",children:e.jsxs("nav",{className:"flex items-center justify-between mx-auto h-[40px] lg:h-[84px] xl:h-[88px] px-[var(--spacing-measures-spacing-016)] py-[var(--spacing-measures-spacing-008)] lg:px-[var(--spacing-measures-spacing-64,64px)] lg:py-[var(--spacing-measures-spacing-016,16px)]",role:"navigation","aria-label":"Main navigation",children:[e.jsx("div",{className:"flex items-center",children:h.map((a,s)=>e.jsx("div",{className:a.breakpoint,children:p(a.size,a.showText)},s))}),e.jsxs("div",{className:"flex items-center",children:[e.jsx("div",{className:"block sm:hidden"}),e.jsx("div",{className:"hidden sm:block md:hidden",children:e.jsxs(t,{size:"default",children:[i("xsmall"),l("xsmall")]})}),e.jsx("div",{className:"hidden md:block lg:hidden",children:e.jsx(t,{size:"default",children:i("xsmall")})}),e.jsx("div",{className:"hidden lg:block xl:hidden",children:e.jsx(t,{size:"large",children:i("large")})}),e.jsx("div",{className:"hidden xl:block",children:e.jsx(t,{size:"large",children:i("xlarge")})})]}),e.jsxs("div",{className:"flex items-center",children:[e.jsx("div",{className:"block sm:hidden",children:e.jsxs("div",{className:"flex items-center gap-[var(--spacing-scale-001)]",children:[i("xsmall"),l("xsmall"),n("xsmall","small","small")]})}),e.jsx("div",{className:"hidden sm:block md:hidden",children:e.jsx("div",{className:"flex items-center gap-[var(--spacing-scale-004)]",children:n("xsmall","small","small")})}),e.jsx("div",{className:"hidden md:block lg:hidden",children:e.jsxs("div",{className:"flex items-center gap-[var(--spacing-measures-spacing-010)]",children:[l("xsmall"),n("xsmall","medium","medium")]})}),e.jsx("div",{className:"hidden lg:block xl:hidden",children:e.jsxs("div",{className:"flex items-center gap-[var(--spacing-measures-spacing-004)]",children:[l("large"),n("large","xlarge","xlarge")]})}),e.jsx("div",{className:"hidden xl:block",children:e.jsxs("div",{className:"flex items-center gap-[var(--spacing-measures-spacing-004)]",children:[l("xlarge"),n("xlarge","xlarge","xlarge")]})})]})]})})]})}N.__docgenInfo={description:"",methods:[],displayName:"Header"};export{N as H};
|
||||
import { j as e } from "./jsx-runtime-C_nHp4yK.js";
|
||||
import { L as v } from "./Logo-DM7O8ATg.js";
|
||||
import { M as t } from "./MenuBar-anMCqtJv.js";
|
||||
import { M as d } from "./MenuBarItem-Dp8NM2fx.js";
|
||||
import { B as j } from "./Button-Z4hbXct5.js";
|
||||
import { A as b } from "./AvatarContainer-Bt0G0TWZ.js";
|
||||
import { A as f } from "./Avatar-C4Vb3oYl.js";
|
||||
function N({ onToggle: c }) {
|
||||
const m = {
|
||||
"@context": "https://schema.org",
|
||||
"@type": "WebSite",
|
||||
name: "CommunityRule",
|
||||
url: "https://communityrule.com",
|
||||
potentialAction: {
|
||||
"@type": "SearchAction",
|
||||
target: "https://communityrule.com/search?q={search_term_string}",
|
||||
"query-input": "required name=search_term_string",
|
||||
},
|
||||
},
|
||||
o = [
|
||||
{ href: "#", text: "Use cases", extraPadding: !0 },
|
||||
{ href: "#", text: "Learn" },
|
||||
{ href: "#", text: "About" },
|
||||
],
|
||||
x = [
|
||||
{ src: "/assets/Avatar_1.png", alt: "Avatar 1" },
|
||||
{ src: "/assets/Avatar_2.png", alt: "Avatar 2" },
|
||||
{ src: "/assets/Avatar_3.png", alt: "Avatar 3" },
|
||||
],
|
||||
h = [
|
||||
{ breakpoint: "block sm:hidden", size: "header", showText: !1 },
|
||||
{ breakpoint: "hidden sm:block md:hidden", size: "header", showText: !0 },
|
||||
{
|
||||
breakpoint: "hidden md:block lg:hidden",
|
||||
size: "headerMd",
|
||||
showText: !0,
|
||||
},
|
||||
{
|
||||
breakpoint: "hidden lg:block xl:hidden",
|
||||
size: "headerLg",
|
||||
showText: !0,
|
||||
},
|
||||
{ breakpoint: "hidden xl:block", size: "headerXl", showText: !0 },
|
||||
],
|
||||
i = (a) =>
|
||||
o.map((s, r) =>
|
||||
e.jsx(
|
||||
d,
|
||||
{
|
||||
href: s.href,
|
||||
size: s.extraPadding && a === "xsmall" ? "xsmallUseCases" : a,
|
||||
onClick: c,
|
||||
ariaLabel: `Navigate to ${s.text} page`,
|
||||
children: s.text,
|
||||
},
|
||||
r,
|
||||
),
|
||||
),
|
||||
g = (a, s) =>
|
||||
e.jsx(b, {
|
||||
size: a,
|
||||
children: x.map((r, u) =>
|
||||
e.jsx(f, { src: r.src, alt: r.alt, size: s }, u),
|
||||
),
|
||||
}),
|
||||
l = (a) =>
|
||||
e.jsx(d, {
|
||||
href: "#",
|
||||
size: a,
|
||||
ariaLabel: "Log in to your account",
|
||||
children: "Log in",
|
||||
}),
|
||||
n = (a, s, r) =>
|
||||
e.jsxs(j, {
|
||||
size: a,
|
||||
ariaLabel: "Create a new rule with avatar decoration",
|
||||
children: [g(s, r), e.jsx("span", { children: "Create rule" })],
|
||||
}),
|
||||
p = (a, s) => e.jsx(v, { size: a, showText: s });
|
||||
return e.jsxs(e.Fragment, {
|
||||
children: [
|
||||
e.jsx("script", {
|
||||
type: "application/ld+json",
|
||||
dangerouslySetInnerHTML: { __html: JSON.stringify(m) },
|
||||
}),
|
||||
e.jsx("header", {
|
||||
className:
|
||||
"bg-[var(--color-surface-default-primary)] w-full border-b border-[var(--border-color-default-tertiary)]",
|
||||
role: "banner",
|
||||
"aria-label": "Main navigation header",
|
||||
children: e.jsxs("nav", {
|
||||
className:
|
||||
"flex items-center justify-between mx-auto h-[40px] lg:h-[84px] xl:h-[88px] px-[var(--spacing-measures-spacing-016)] py-[var(--spacing-measures-spacing-008)] lg:px-[var(--spacing-measures-spacing-64,64px)] lg:py-[var(--spacing-measures-spacing-016,16px)]",
|
||||
role: "navigation",
|
||||
"aria-label": "Main navigation",
|
||||
children: [
|
||||
e.jsx("div", {
|
||||
className: "flex items-center",
|
||||
children: h.map((a, s) =>
|
||||
e.jsx(
|
||||
"div",
|
||||
{ className: a.breakpoint, children: p(a.size, a.showText) },
|
||||
s,
|
||||
),
|
||||
),
|
||||
}),
|
||||
e.jsxs("div", {
|
||||
className: "flex items-center",
|
||||
children: [
|
||||
e.jsx("div", { className: "block sm:hidden" }),
|
||||
e.jsx("div", {
|
||||
className: "hidden sm:block md:hidden",
|
||||
children: e.jsxs(t, {
|
||||
size: "default",
|
||||
children: [i("xsmall"), l("xsmall")],
|
||||
}),
|
||||
}),
|
||||
e.jsx("div", {
|
||||
className: "hidden md:block lg:hidden",
|
||||
children: e.jsx(t, {
|
||||
size: "default",
|
||||
children: i("xsmall"),
|
||||
}),
|
||||
}),
|
||||
e.jsx("div", {
|
||||
className: "hidden lg:block xl:hidden",
|
||||
children: e.jsx(t, { size: "large", children: i("large") }),
|
||||
}),
|
||||
e.jsx("div", {
|
||||
className: "hidden xl:block",
|
||||
children: e.jsx(t, { size: "large", children: i("xlarge") }),
|
||||
}),
|
||||
],
|
||||
}),
|
||||
e.jsxs("div", {
|
||||
className: "flex items-center",
|
||||
children: [
|
||||
e.jsx("div", {
|
||||
className: "block sm:hidden",
|
||||
children: e.jsxs("div", {
|
||||
className:
|
||||
"flex items-center gap-[var(--spacing-scale-001)]",
|
||||
children: [
|
||||
i("xsmall"),
|
||||
l("xsmall"),
|
||||
n("xsmall", "small", "small"),
|
||||
],
|
||||
}),
|
||||
}),
|
||||
e.jsx("div", {
|
||||
className: "hidden sm:block md:hidden",
|
||||
children: e.jsx("div", {
|
||||
className:
|
||||
"flex items-center gap-[var(--spacing-scale-004)]",
|
||||
children: n("xsmall", "small", "small"),
|
||||
}),
|
||||
}),
|
||||
e.jsx("div", {
|
||||
className: "hidden md:block lg:hidden",
|
||||
children: e.jsxs("div", {
|
||||
className:
|
||||
"flex items-center gap-[var(--spacing-measures-spacing-010)]",
|
||||
children: [l("xsmall"), n("xsmall", "medium", "medium")],
|
||||
}),
|
||||
}),
|
||||
e.jsx("div", {
|
||||
className: "hidden lg:block xl:hidden",
|
||||
children: e.jsxs("div", {
|
||||
className:
|
||||
"flex items-center gap-[var(--spacing-measures-spacing-004)]",
|
||||
children: [l("large"), n("large", "xlarge", "xlarge")],
|
||||
}),
|
||||
}),
|
||||
e.jsx("div", {
|
||||
className: "hidden xl:block",
|
||||
children: e.jsxs("div", {
|
||||
className:
|
||||
"flex items-center gap-[var(--spacing-measures-spacing-004)]",
|
||||
children: [l("xlarge"), n("xlarge", "xlarge", "xlarge")],
|
||||
}),
|
||||
}),
|
||||
],
|
||||
}),
|
||||
],
|
||||
}),
|
||||
}),
|
||||
],
|
||||
});
|
||||
}
|
||||
N.__docgenInfo = { description: "", methods: [], displayName: "Header" };
|
||||
export { N as H };
|
||||
|
||||
@@ -1,4 +1,106 @@
|
||||
import{j as e}from"./jsx-runtime-C_nHp4yK.js";import{H as o}from"./Header-Bz-bT1Sq.js";import"./iframe-D_aMTKb2.js";import"./preload-helper-DIZFD4sK.js";import"./Logo-DM7O8ATg.js";import"./MenuBar-anMCqtJv.js";import"./MenuBarItem-Dp8NM2fx.js";import"./Button-Z4hbXct5.js";import"./AvatarContainer-Bt0G0TWZ.js";import"./Avatar-C4Vb3oYl.js";const x={title:"Components/Header",component:o,parameters:{layout:"fullscreen",docs:{description:{component:"The main navigation header with responsive behavior across different breakpoints."}}},argTypes:{onToggle:{action:"toggled"}},tags:["autodocs"]},t={args:{},parameters:{docs:{description:{story:"Use the Viewport toolbar to change the iframe width and see how the header adapts to different screen sizes. The header shows different layouts for mobile, tablet, and desktop breakpoints."}}}},a={args:{},render:()=>e.jsxs("div",{className:"min-h-screen bg-[var(--color-surface-default-primary)]",children:[e.jsx(o,{}),e.jsx("main",{className:"p-8",children:e.jsxs("div",{className:"max-w-4xl mx-auto",children:[e.jsx("h1",{className:"text-2xl font-bold text-white mb-4",children:"Example Page Content"}),e.jsx("p",{className:"text-white mb-4",children:"This demonstrates how the header looks in a realistic page context. The header maintains its responsive behavior while providing navigation for the page content."}),e.jsx("div",{className:"grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4",children:[1,2,3,4,5,6].map(s=>e.jsxs("div",{className:"bg-[var(--color-surface-default-secondary)] p-4 rounded-lg",children:[e.jsxs("h3",{className:"text-white font-semibold mb-2",children:["Content Block ",s]}),e.jsx("p",{className:"text-[var(--color-content-default-secondary)] text-sm",children:"This is example content to show how the header integrates with page content."})]},s))})]})})]}),parameters:{docs:{description:{story:"The header integrated into a full page layout to show how it works in context."}}}};t.parameters={...t.parameters,docs:{...t.parameters?.docs,source:{originalSource:`{
|
||||
import { j as e } from "./jsx-runtime-C_nHp4yK.js";
|
||||
import { H as o } from "./Header-Bz-bT1Sq.js";
|
||||
import "./iframe-D_aMTKb2.js";
|
||||
import "./preload-helper-DIZFD4sK.js";
|
||||
import "./Logo-DM7O8ATg.js";
|
||||
import "./MenuBar-anMCqtJv.js";
|
||||
import "./MenuBarItem-Dp8NM2fx.js";
|
||||
import "./Button-Z4hbXct5.js";
|
||||
import "./AvatarContainer-Bt0G0TWZ.js";
|
||||
import "./Avatar-C4Vb3oYl.js";
|
||||
const x = {
|
||||
title: "Components/Header",
|
||||
component: o,
|
||||
parameters: {
|
||||
layout: "fullscreen",
|
||||
docs: {
|
||||
description: {
|
||||
component:
|
||||
"The main navigation header with responsive behavior across different breakpoints.",
|
||||
},
|
||||
},
|
||||
},
|
||||
argTypes: { onToggle: { action: "toggled" } },
|
||||
tags: ["autodocs"],
|
||||
},
|
||||
t = {
|
||||
args: {},
|
||||
parameters: {
|
||||
docs: {
|
||||
description: {
|
||||
story:
|
||||
"Use the Viewport toolbar to change the iframe width and see how the header adapts to different screen sizes. The header shows different layouts for mobile, tablet, and desktop breakpoints.",
|
||||
},
|
||||
},
|
||||
},
|
||||
},
|
||||
a = {
|
||||
args: {},
|
||||
render: () =>
|
||||
e.jsxs("div", {
|
||||
className: "min-h-screen bg-[var(--color-surface-default-primary)]",
|
||||
children: [
|
||||
e.jsx(o, {}),
|
||||
e.jsx("main", {
|
||||
className: "p-8",
|
||||
children: e.jsxs("div", {
|
||||
className: "max-w-4xl mx-auto",
|
||||
children: [
|
||||
e.jsx("h1", {
|
||||
className: "text-2xl font-bold text-white mb-4",
|
||||
children: "Example Page Content",
|
||||
}),
|
||||
e.jsx("p", {
|
||||
className: "text-white mb-4",
|
||||
children:
|
||||
"This demonstrates how the header looks in a realistic page context. The header maintains its responsive behavior while providing navigation for the page content.",
|
||||
}),
|
||||
e.jsx("div", {
|
||||
className:
|
||||
"grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4",
|
||||
children: [1, 2, 3, 4, 5, 6].map((s) =>
|
||||
e.jsxs(
|
||||
"div",
|
||||
{
|
||||
className:
|
||||
"bg-[var(--color-surface-default-secondary)] p-4 rounded-lg",
|
||||
children: [
|
||||
e.jsxs("h3", {
|
||||
className: "text-white font-semibold mb-2",
|
||||
children: ["Content Block ", s],
|
||||
}),
|
||||
e.jsx("p", {
|
||||
className:
|
||||
"text-[var(--color-content-default-secondary)] text-sm",
|
||||
children:
|
||||
"This is example content to show how the header integrates with page content.",
|
||||
}),
|
||||
],
|
||||
},
|
||||
s,
|
||||
),
|
||||
),
|
||||
}),
|
||||
],
|
||||
}),
|
||||
}),
|
||||
],
|
||||
}),
|
||||
parameters: {
|
||||
docs: {
|
||||
description: {
|
||||
story:
|
||||
"The header integrated into a full page layout to show how it works in context.",
|
||||
},
|
||||
},
|
||||
},
|
||||
};
|
||||
t.parameters = {
|
||||
...t.parameters,
|
||||
docs: {
|
||||
...t.parameters?.docs,
|
||||
source: {
|
||||
originalSource: `{
|
||||
args: {},
|
||||
parameters: {
|
||||
docs: {
|
||||
@@ -7,7 +109,17 @@ import{j as e}from"./jsx-runtime-C_nHp4yK.js";import{H as o}from"./Header-Bz-bT1
|
||||
}
|
||||
}
|
||||
}
|
||||
}`,...t.parameters?.docs?.source}}};a.parameters={...a.parameters,docs:{...a.parameters?.docs,source:{originalSource:`{
|
||||
}`,
|
||||
...t.parameters?.docs?.source,
|
||||
},
|
||||
},
|
||||
};
|
||||
a.parameters = {
|
||||
...a.parameters,
|
||||
docs: {
|
||||
...a.parameters?.docs,
|
||||
source: {
|
||||
originalSource: `{
|
||||
args: {},
|
||||
render: () => <div className="min-h-screen bg-[var(--color-surface-default-primary)]">
|
||||
<Header />
|
||||
@@ -42,4 +154,15 @@ import{j as e}from"./jsx-runtime-C_nHp4yK.js";import{H as o}from"./Header-Bz-bT1
|
||||
}
|
||||
}
|
||||
}
|
||||
}`,...a.parameters?.docs?.source}}};const f=["Default","InPageContext"];export{t as Default,a as InPageContext,f as __namedExportsOrder,x as default};
|
||||
}`,
|
||||
...a.parameters?.docs?.source,
|
||||
},
|
||||
},
|
||||
};
|
||||
const f = ["Default", "InPageContext"];
|
||||
export {
|
||||
t as Default,
|
||||
a as InPageContext,
|
||||
f as __namedExportsOrder,
|
||||
x as default,
|
||||
};
|
||||
|
||||
@@ -1 +1,41 @@
|
||||
import{j as s}from"./jsx-runtime-C_nHp4yK.js";function n({children:a,className:e="",stretch:l=!1,...p}){const r=l?"flex-1 sm:mr-[var(--spacing-scale-008)] md:mr-[185px] lg:mr-[var(--spacing-scale-024)] xl:mr-[var(--spacing-scale-032)]":"";return s.jsxs("div",{className:`HeaderTab header-breakpoint-transition relative bg-[var(--color-surface-default-brand-primary)] rounded-t-[32px] sm:rounded-t-[32px] md:rounded-t-[32px] lg:rounded-t-[32px] xl:rounded-t-[32px] pl-[var(--spacing-measures-spacing-012)] h-[40px] sm:h-[52px] md:h-[52px] lg:h-[52px] xl:h-[64px] sm:pr-[var(--spacing-scale-006)] md:pl-[var(--spacing-scale-024)] lg:pl-[var(--spacing-scale-024)] xl:pl-[var(--spacing-scale-032)] md:pr-[var(--spacing-scale-012)] lg:pr-[var(--spacing-scale-048)] xl:pr-[var(--spacing-scale-120)] md:gap-[var(--spacing-scale-032)] ${r} ${e}`,...p,children:[a,s.jsx("img",{src:"assets/Union_xsm.svg",alt:"Union",className:"absolute -bottom-[3px] -right-[52px] w-[61px] h-[24px] sm:w-[61px] sm:h-[31.5px] sm:hidden -z-10"}),s.jsx("img",{src:"assets/Union_sm_md_lg.svg",alt:"Union",className:"absolute -bottom-[3.7px] -right-[53px] w-[61px] h-[24px] sm:w-[61px] sm:h-[31.5px] hidden sm:block xl:hidden -z-10"}),s.jsx("img",{src:"assets/Union_xlg.svg",alt:"Union",className:"absolute -bottom-[6px] -right-[94px] w-[105px] h-[53px] hidden xl:block -z-10"})]})}n.__docgenInfo={description:"",methods:[],displayName:"HeaderTab",props:{className:{defaultValue:{value:'""',computed:!1},required:!1},stretch:{defaultValue:{value:"false",computed:!1},required:!1}}};export{n as H};
|
||||
import { j as s } from "./jsx-runtime-C_nHp4yK.js";
|
||||
function n({ children: a, className: e = "", stretch: l = !1, ...p }) {
|
||||
const r = l
|
||||
? "flex-1 sm:mr-[var(--spacing-scale-008)] md:mr-[185px] lg:mr-[var(--spacing-scale-024)] xl:mr-[var(--spacing-scale-032)]"
|
||||
: "";
|
||||
return s.jsxs("div", {
|
||||
className: `HeaderTab header-breakpoint-transition relative bg-[var(--color-surface-default-brand-primary)] rounded-t-[32px] sm:rounded-t-[32px] md:rounded-t-[32px] lg:rounded-t-[32px] xl:rounded-t-[32px] pl-[var(--spacing-measures-spacing-012)] h-[40px] sm:h-[52px] md:h-[52px] lg:h-[52px] xl:h-[64px] sm:pr-[var(--spacing-scale-006)] md:pl-[var(--spacing-scale-024)] lg:pl-[var(--spacing-scale-024)] xl:pl-[var(--spacing-scale-032)] md:pr-[var(--spacing-scale-012)] lg:pr-[var(--spacing-scale-048)] xl:pr-[var(--spacing-scale-120)] md:gap-[var(--spacing-scale-032)] ${r} ${e}`,
|
||||
...p,
|
||||
children: [
|
||||
a,
|
||||
s.jsx("img", {
|
||||
src: "assets/Union_xsm.svg",
|
||||
alt: "Union",
|
||||
className:
|
||||
"absolute -bottom-[3px] -right-[52px] w-[61px] h-[24px] sm:w-[61px] sm:h-[31.5px] sm:hidden -z-10",
|
||||
}),
|
||||
s.jsx("img", {
|
||||
src: "assets/Union_sm_md_lg.svg",
|
||||
alt: "Union",
|
||||
className:
|
||||
"absolute -bottom-[3.7px] -right-[53px] w-[61px] h-[24px] sm:w-[61px] sm:h-[31.5px] hidden sm:block xl:hidden -z-10",
|
||||
}),
|
||||
s.jsx("img", {
|
||||
src: "assets/Union_xlg.svg",
|
||||
alt: "Union",
|
||||
className:
|
||||
"absolute -bottom-[6px] -right-[94px] w-[105px] h-[53px] hidden xl:block -z-10",
|
||||
}),
|
||||
],
|
||||
});
|
||||
}
|
||||
n.__docgenInfo = {
|
||||
description: "",
|
||||
methods: [],
|
||||
displayName: "HeaderTab",
|
||||
props: {
|
||||
className: { defaultValue: { value: '""', computed: !1 }, required: !1 },
|
||||
stretch: { defaultValue: { value: "false", computed: !1 }, required: !1 },
|
||||
},
|
||||
};
|
||||
export { n as H };
|
||||
|
||||
@@ -1,8 +1,53 @@
|
||||
import{j as t}from"./jsx-runtime-C_nHp4yK.js";import{H as r}from"./HeaderTab-D9jUrYUx.js";import{L as s}from"./Logo-DM7O8ATg.js";import"./iframe-D_aMTKb2.js";import"./preload-helper-DIZFD4sK.js";const p={title:"Components/HeaderTab",component:r,parameters:{layout:"centered",docs:{description:{component:"A header tab container with decorative Union images and responsive behavior. Used to wrap content in the header with consistent styling and responsive breakpoint transitions."}}},argTypes:{stretch:{control:{type:"boolean"},description:"Whether the tab should stretch to fill available space"},className:{control:{type:"text"},description:"Additional CSS classes"}},tags:["autodocs"]},e={args:{stretch:!1},render:a=>t.jsx(r,{...a,children:t.jsx(s,{size:"homeHeaderMd"})})};e.parameters={...e.parameters,docs:{...e.parameters?.docs,source:{originalSource:`{
|
||||
import { j as t } from "./jsx-runtime-C_nHp4yK.js";
|
||||
import { H as r } from "./HeaderTab-D9jUrYUx.js";
|
||||
import { L as s } from "./Logo-DM7O8ATg.js";
|
||||
import "./iframe-D_aMTKb2.js";
|
||||
import "./preload-helper-DIZFD4sK.js";
|
||||
const p = {
|
||||
title: "Components/HeaderTab",
|
||||
component: r,
|
||||
parameters: {
|
||||
layout: "centered",
|
||||
docs: {
|
||||
description: {
|
||||
component:
|
||||
"A header tab container with decorative Union images and responsive behavior. Used to wrap content in the header with consistent styling and responsive breakpoint transitions.",
|
||||
},
|
||||
},
|
||||
},
|
||||
argTypes: {
|
||||
stretch: {
|
||||
control: { type: "boolean" },
|
||||
description: "Whether the tab should stretch to fill available space",
|
||||
},
|
||||
className: {
|
||||
control: { type: "text" },
|
||||
description: "Additional CSS classes",
|
||||
},
|
||||
},
|
||||
tags: ["autodocs"],
|
||||
},
|
||||
e = {
|
||||
args: { stretch: !1 },
|
||||
render: (a) =>
|
||||
t.jsx(r, { ...a, children: t.jsx(s, { size: "homeHeaderMd" }) }),
|
||||
};
|
||||
e.parameters = {
|
||||
...e.parameters,
|
||||
docs: {
|
||||
...e.parameters?.docs,
|
||||
source: {
|
||||
originalSource: `{
|
||||
args: {
|
||||
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};
|
||||
}`,
|
||||
...e.parameters?.docs?.source,
|
||||
},
|
||||
},
|
||||
};
|
||||
const m = ["Default"];
|
||||
export { e as Default, m as __namedExportsOrder, p as default };
|
||||
|
||||
@@ -1 +1,43 @@
|
||||
import{j as a}from"./jsx-runtime-C_nHp4yK.js";import{C as t}from"./ContentLockup-DbWiPA4N.js";import{H as p}from"./HeroDecor-Csfoi-N_.js";const c=({title:e,subtitle:s,description:r,ctaText:l,ctaHref:n})=>a.jsx("section",{className:"bg-transparent px-[var(--spacing-scale-008)] sm:px-[var(--spacing-scale-010)] md:px-[var(--spacing-scale-016)] lg:px-[var(--spacing-scale-024)] xl:px-[var(--spacing-scale-048)]",children:a.jsx("div",{className:"flex flex-col gap-[var(--spacing-scale-010)]",children:a.jsxs("div",{className:"bg-[var(--color-surface-default-brand-primary)] p-[var(--spacing-scale-012)] sm:p-[var(--spacing-scale-016)] md:p-[var(--spacing-scale-064)] lg:py-[var(--spacing-scale-096)] lg:px-[var(--spacing-scale-064)] rounded-tl-none rounded-tr-[16px] rounded-br-[16px] rounded-bl-[16px] flex flex-col gap-[var(--spacing-scale-024)] sm:gap-[var(--spacing-scale-024)] md:flex-row md:gap-[var(--spacing-scale-048)] relative overflow-hidden",children:[a.jsx(p,{className:"pointer-events-none absolute z-0 left-0 top-0 translate-x-[-72px] translate-y-[26px] sm:translate-x-[-78px] sm:translate-y-[24px] md:translate-x-[-86px] md:translate-y-[16px] lg:translate-x-[-88px] lg:translate-y-[16px] w-[1540px] h-[645px] scale-[1.04]"}),a.jsx("div",{className:"md:flex-1",children:a.jsx(t,{title:e,subtitle:s,description:r,ctaText:l,ctaHref:n,buttonClassName:"shrink-0 whitespace-nowrap min-w-[280px]"})}),a.jsx("div",{className:"w-full md:flex-1 rounded-[8px] overflow-hidden relative z-10 flex items-center justify-center",children:a.jsx("img",{src:"assets/HeroImage.png",alt:"Hero illustration",className:"w-full h-auto"})})]})})});c.__docgenInfo={description:"",methods:[],displayName:"HeroBanner"};export{c as H};
|
||||
import { j as a } from "./jsx-runtime-C_nHp4yK.js";
|
||||
import { C as t } from "./ContentLockup-DbWiPA4N.js";
|
||||
import { H as p } from "./HeroDecor-Csfoi-N_.js";
|
||||
const c = ({ title: e, subtitle: s, description: r, ctaText: l, ctaHref: n }) =>
|
||||
a.jsx("section", {
|
||||
className:
|
||||
"bg-transparent px-[var(--spacing-scale-008)] sm:px-[var(--spacing-scale-010)] md:px-[var(--spacing-scale-016)] lg:px-[var(--spacing-scale-024)] xl:px-[var(--spacing-scale-048)]",
|
||||
children: a.jsx("div", {
|
||||
className: "flex flex-col gap-[var(--spacing-scale-010)]",
|
||||
children: a.jsxs("div", {
|
||||
className:
|
||||
"bg-[var(--color-surface-default-brand-primary)] p-[var(--spacing-scale-012)] sm:p-[var(--spacing-scale-016)] md:p-[var(--spacing-scale-064)] lg:py-[var(--spacing-scale-096)] lg:px-[var(--spacing-scale-064)] rounded-tl-none rounded-tr-[16px] rounded-br-[16px] rounded-bl-[16px] flex flex-col gap-[var(--spacing-scale-024)] sm:gap-[var(--spacing-scale-024)] md:flex-row md:gap-[var(--spacing-scale-048)] relative overflow-hidden",
|
||||
children: [
|
||||
a.jsx(p, {
|
||||
className:
|
||||
"pointer-events-none absolute z-0 left-0 top-0 translate-x-[-72px] translate-y-[26px] sm:translate-x-[-78px] sm:translate-y-[24px] md:translate-x-[-86px] md:translate-y-[16px] lg:translate-x-[-88px] lg:translate-y-[16px] w-[1540px] h-[645px] scale-[1.04]",
|
||||
}),
|
||||
a.jsx("div", {
|
||||
className: "md:flex-1",
|
||||
children: a.jsx(t, {
|
||||
title: e,
|
||||
subtitle: s,
|
||||
description: r,
|
||||
ctaText: l,
|
||||
ctaHref: n,
|
||||
buttonClassName: "shrink-0 whitespace-nowrap min-w-[280px]",
|
||||
}),
|
||||
}),
|
||||
a.jsx("div", {
|
||||
className:
|
||||
"w-full md:flex-1 rounded-[8px] overflow-hidden relative z-10 flex items-center justify-center",
|
||||
children: a.jsx("img", {
|
||||
src: "assets/HeroImage.png",
|
||||
alt: "Hero illustration",
|
||||
className: "w-full h-auto",
|
||||
}),
|
||||
}),
|
||||
],
|
||||
}),
|
||||
}),
|
||||
});
|
||||
c.__docgenInfo = { description: "", methods: [], displayName: "HeroBanner" };
|
||||
export { c as H };
|
||||
|
||||
@@ -1,4 +1,64 @@
|
||||
import{H as e}from"./HeroBanner-D2qHR4vw.js";import"./jsx-runtime-C_nHp4yK.js";import"./iframe-D_aMTKb2.js";import"./preload-helper-DIZFD4sK.js";import"./ContentLockup-DbWiPA4N.js";import"./Button-Z4hbXct5.js";import"./HeroDecor-Csfoi-N_.js";const p={title:"Components/HeroBanner",component:e,parameters:{layout:"fullscreen",docs:{description:{component:"A responsive hero banner component that showcases the Community Rule branding and messaging. Adapts across multiple breakpoints with proper spacing, typography, and interactive elements. Includes background decorations and product demo integration."}}},argTypes:{title:{control:{type:"text"},description:"The main title text"},subtitle:{control:{type:"text"},description:"The subtitle text"},description:{control:{type:"text"},description:"The description text"},ctaText:{control:{type:"text"},description:"The call-to-action button text"},ctaHref:{control:{type:"text"},description:"The call-to-action button link"}},tags:["autodocs"]},t={args:{title:"Collaborate",subtitle:"with clarity",description:"Help your community make important decisions in a way that reflects its unique values.",ctaText:"Learn how Community Rule works",ctaHref:"#"},parameters:{docs:{description:{story:"Default hero banner with standard Community Rule messaging and branding."}}}};t.parameters={...t.parameters,docs:{...t.parameters?.docs,source:{originalSource:`{
|
||||
import { H as e } from "./HeroBanner-D2qHR4vw.js";
|
||||
import "./jsx-runtime-C_nHp4yK.js";
|
||||
import "./iframe-D_aMTKb2.js";
|
||||
import "./preload-helper-DIZFD4sK.js";
|
||||
import "./ContentLockup-DbWiPA4N.js";
|
||||
import "./Button-Z4hbXct5.js";
|
||||
import "./HeroDecor-Csfoi-N_.js";
|
||||
const p = {
|
||||
title: "Components/HeroBanner",
|
||||
component: e,
|
||||
parameters: {
|
||||
layout: "fullscreen",
|
||||
docs: {
|
||||
description: {
|
||||
component:
|
||||
"A responsive hero banner component that showcases the Community Rule branding and messaging. Adapts across multiple breakpoints with proper spacing, typography, and interactive elements. Includes background decorations and product demo integration.",
|
||||
},
|
||||
},
|
||||
},
|
||||
argTypes: {
|
||||
title: { control: { type: "text" }, description: "The main title text" },
|
||||
subtitle: { control: { type: "text" }, description: "The subtitle text" },
|
||||
description: {
|
||||
control: { type: "text" },
|
||||
description: "The description text",
|
||||
},
|
||||
ctaText: {
|
||||
control: { type: "text" },
|
||||
description: "The call-to-action button text",
|
||||
},
|
||||
ctaHref: {
|
||||
control: { type: "text" },
|
||||
description: "The call-to-action button link",
|
||||
},
|
||||
},
|
||||
tags: ["autodocs"],
|
||||
},
|
||||
t = {
|
||||
args: {
|
||||
title: "Collaborate",
|
||||
subtitle: "with clarity",
|
||||
description:
|
||||
"Help your community make important decisions in a way that reflects its unique values.",
|
||||
ctaText: "Learn how Community Rule works",
|
||||
ctaHref: "#",
|
||||
},
|
||||
parameters: {
|
||||
docs: {
|
||||
description: {
|
||||
story:
|
||||
"Default hero banner with standard Community Rule messaging and branding.",
|
||||
},
|
||||
},
|
||||
},
|
||||
};
|
||||
t.parameters = {
|
||||
...t.parameters,
|
||||
docs: {
|
||||
...t.parameters?.docs,
|
||||
source: {
|
||||
originalSource: `{
|
||||
args: {
|
||||
title: "Collaborate",
|
||||
subtitle: "with clarity",
|
||||
@@ -13,4 +73,10 @@ import{H as e}from"./HeroBanner-D2qHR4vw.js";import"./jsx-runtime-C_nHp4yK.js";i
|
||||
}
|
||||
}
|
||||
}
|
||||
}`,...t.parameters?.docs?.source}}};const l=["Default"];export{t as Default,l as __namedExportsOrder,p as default};
|
||||
}`,
|
||||
...t.parameters?.docs?.source,
|
||||
},
|
||||
},
|
||||
};
|
||||
const l = ["Default"];
|
||||
export { t as Default, l as __namedExportsOrder, p as default };
|
||||
|
||||
File diff suppressed because one or more lines are too long
@@ -1 +1,88 @@
|
||||
import{j as e}from"./jsx-runtime-C_nHp4yK.js";const s=({className:C=""})=>e.jsx("svg",{className:`text-[#FDFAA8] opacity-50 ${C}`,viewBox:"0 0 1540 645","aria-hidden":"true",overflow:"visible",preserveAspectRatio:"xMidYMid slice",children:e.jsxs("g",{fill:"currentColor",children:[e.jsx("defs",{children:e.jsxs("filter",{id:"grain",filterUnits:"objectBoundingBox",x:"0",y:"0",width:"1",height:"1",colorInterpolationFilters:"sRGB",children:[e.jsx("feTurbulence",{type:"fractalNoise",baseFrequency:"0.8",numOctaves:"2",seed:"3",stitchTiles:"stitch",result:"noise"}),e.jsx("feColorMatrix",{in:"noise",result:"softNoise",type:"matrix",values:" 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.15 0"}),e.jsx("feComposite",{in:"softNoise",in2:"SourceAlpha",operator:"in",result:"maskedNoise"}),e.jsx("feBlend",{in:"SourceGraphic",in2:"maskedNoise",mode:"multiply"})]})}),e.jsxs("g",{fill:"currentColor",filter:"url(#grain)",children:[e.jsx("path",{d:"M1441.54 226.758C1495.92 226.758 1540 320.385 1540 435.879C1540 551.373 1495.92 645 1441.54 645C1387.16 645 1343.08 551.373 1343.08 435.879C1343.08 320.385 1387.16 226.758 1441.54 226.758Z"}),e.jsx("path",{d:"M1441.54 226.758C1495.92 226.758 1540 320.385 1540 435.879C1540 551.373 1495.92 645 1441.54 645C1387.16 645 1343.08 551.373 1343.08 435.879C1343.08 320.385 1387.16 226.758 1441.54 226.758Z"}),e.jsx("path",{d:"M674.066 209.121C728.443 209.121 772.525 302.748 772.525 418.242C772.525 533.737 728.443 627.363 674.066 627.363C619.688 627.363 575.607 533.737 575.607 418.242C575.607 302.748 619.688 209.121 674.066 209.121Z"}),e.jsx("path",{d:"M674.066 209.121C728.443 209.121 772.525 302.748 772.525 418.242C772.525 533.737 728.443 627.363 674.066 627.363C619.688 627.363 575.607 533.737 575.607 418.242C575.607 302.748 619.688 209.121 674.066 209.121Z"}),e.jsx("path",{d:"M290.328 0C344.705 0 388.787 93.6267 388.787 209.121C388.787 211.519 388.765 213.907 388.728 216.285C401.725 133.082 438.661 73.0664 482.197 73.0664C536.574 73.0664 580.656 166.693 580.656 282.188C580.656 397.682 536.574 491.309 482.197 491.309C427.819 491.309 383.738 397.682 383.738 282.188C383.738 279.79 383.758 277.401 383.796 275.023C370.798 358.226 333.864 418.242 290.328 418.242C246.792 418.242 209.856 358.226 196.859 275.023C196.897 277.401 196.918 279.79 196.918 282.188C196.918 397.682 152.836 491.309 98.459 491.309C44.0816 491.309 0 397.682 0 282.188C0 166.693 44.0816 73.0664 98.459 73.0664C141.995 73.0664 178.929 133.082 191.927 216.285C191.889 213.907 191.869 211.519 191.869 209.121C191.869 93.6267 235.95 0 290.328 0Z"}),e.jsx("path",{d:"M290.328 0C344.705 0 388.787 93.6267 388.787 209.121C388.787 211.519 388.765 213.907 388.728 216.285C401.725 133.082 438.661 73.0664 482.197 73.0664C536.574 73.0664 580.656 166.693 580.656 282.188C580.656 397.682 536.574 491.309 482.197 491.309C427.819 491.309 383.738 397.682 383.738 282.188C383.738 279.79 383.758 277.401 383.796 275.023C370.798 358.226 333.864 418.242 290.328 418.242C246.792 418.242 209.856 358.226 196.859 275.023C196.897 277.401 196.918 279.79 196.918 282.188C196.918 397.682 152.836 491.309 98.459 491.309C44.0816 491.309 0 397.682 0 282.188C0 166.693 44.0816 73.0664 98.459 73.0664C141.995 73.0664 178.929 133.082 191.927 216.285C191.889 213.907 191.869 211.519 191.869 209.121C191.869 93.6267 235.95 0 290.328 0Z"}),e.jsx("path",{d:"M1057.8 0C1112.18 0 1156.26 93.6267 1156.26 209.121C1156.26 211.519 1156.24 213.907 1156.2 216.285C1169.2 133.082 1206.14 73.0664 1249.67 73.0664C1304.05 73.0664 1348.13 166.693 1348.13 282.188C1348.13 397.682 1304.05 491.309 1249.67 491.309C1195.29 491.309 1151.21 397.682 1151.21 282.188C1151.21 279.79 1151.23 277.401 1151.27 275.023C1138.27 358.226 1101.34 418.242 1057.8 418.242C1014.27 418.242 977.332 358.226 964.334 275.023C964.372 277.401 964.393 279.79 964.393 282.188C964.393 397.682 920.312 491.309 865.934 491.309C811.557 491.309 767.475 397.682 767.475 282.188C767.475 166.693 811.557 73.0664 865.934 73.0664C909.47 73.0664 946.405 133.082 959.402 216.285C959.365 213.907 959.344 211.519 959.344 209.121C959.344 93.6267 1003.43 0 1057.8 0Z"})]})]})});s.__docgenInfo={description:"",methods:[],displayName:"HeroDecor",props:{className:{defaultValue:{value:'""',computed:!1},required:!1}}};export{s as H};
|
||||
import { j as e } from "./jsx-runtime-C_nHp4yK.js";
|
||||
const s = ({ className: C = "" }) =>
|
||||
e.jsx("svg", {
|
||||
className: `text-[#FDFAA8] opacity-50 ${C}`,
|
||||
viewBox: "0 0 1540 645",
|
||||
"aria-hidden": "true",
|
||||
overflow: "visible",
|
||||
preserveAspectRatio: "xMidYMid slice",
|
||||
children: e.jsxs("g", {
|
||||
fill: "currentColor",
|
||||
children: [
|
||||
e.jsx("defs", {
|
||||
children: e.jsxs("filter", {
|
||||
id: "grain",
|
||||
filterUnits: "objectBoundingBox",
|
||||
x: "0",
|
||||
y: "0",
|
||||
width: "1",
|
||||
height: "1",
|
||||
colorInterpolationFilters: "sRGB",
|
||||
children: [
|
||||
e.jsx("feTurbulence", {
|
||||
type: "fractalNoise",
|
||||
baseFrequency: "0.8",
|
||||
numOctaves: "2",
|
||||
seed: "3",
|
||||
stitchTiles: "stitch",
|
||||
result: "noise",
|
||||
}),
|
||||
e.jsx("feColorMatrix", {
|
||||
in: "noise",
|
||||
result: "softNoise",
|
||||
type: "matrix",
|
||||
values: " 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.15 0",
|
||||
}),
|
||||
e.jsx("feComposite", {
|
||||
in: "softNoise",
|
||||
in2: "SourceAlpha",
|
||||
operator: "in",
|
||||
result: "maskedNoise",
|
||||
}),
|
||||
e.jsx("feBlend", {
|
||||
in: "SourceGraphic",
|
||||
in2: "maskedNoise",
|
||||
mode: "multiply",
|
||||
}),
|
||||
],
|
||||
}),
|
||||
}),
|
||||
e.jsxs("g", {
|
||||
fill: "currentColor",
|
||||
filter: "url(#grain)",
|
||||
children: [
|
||||
e.jsx("path", {
|
||||
d: "M1441.54 226.758C1495.92 226.758 1540 320.385 1540 435.879C1540 551.373 1495.92 645 1441.54 645C1387.16 645 1343.08 551.373 1343.08 435.879C1343.08 320.385 1387.16 226.758 1441.54 226.758Z",
|
||||
}),
|
||||
e.jsx("path", {
|
||||
d: "M1441.54 226.758C1495.92 226.758 1540 320.385 1540 435.879C1540 551.373 1495.92 645 1441.54 645C1387.16 645 1343.08 551.373 1343.08 435.879C1343.08 320.385 1387.16 226.758 1441.54 226.758Z",
|
||||
}),
|
||||
e.jsx("path", {
|
||||
d: "M674.066 209.121C728.443 209.121 772.525 302.748 772.525 418.242C772.525 533.737 728.443 627.363 674.066 627.363C619.688 627.363 575.607 533.737 575.607 418.242C575.607 302.748 619.688 209.121 674.066 209.121Z",
|
||||
}),
|
||||
e.jsx("path", {
|
||||
d: "M674.066 209.121C728.443 209.121 772.525 302.748 772.525 418.242C772.525 533.737 728.443 627.363 674.066 627.363C619.688 627.363 575.607 533.737 575.607 418.242C575.607 302.748 619.688 209.121 674.066 209.121Z",
|
||||
}),
|
||||
e.jsx("path", {
|
||||
d: "M290.328 0C344.705 0 388.787 93.6267 388.787 209.121C388.787 211.519 388.765 213.907 388.728 216.285C401.725 133.082 438.661 73.0664 482.197 73.0664C536.574 73.0664 580.656 166.693 580.656 282.188C580.656 397.682 536.574 491.309 482.197 491.309C427.819 491.309 383.738 397.682 383.738 282.188C383.738 279.79 383.758 277.401 383.796 275.023C370.798 358.226 333.864 418.242 290.328 418.242C246.792 418.242 209.856 358.226 196.859 275.023C196.897 277.401 196.918 279.79 196.918 282.188C196.918 397.682 152.836 491.309 98.459 491.309C44.0816 491.309 0 397.682 0 282.188C0 166.693 44.0816 73.0664 98.459 73.0664C141.995 73.0664 178.929 133.082 191.927 216.285C191.889 213.907 191.869 211.519 191.869 209.121C191.869 93.6267 235.95 0 290.328 0Z",
|
||||
}),
|
||||
e.jsx("path", {
|
||||
d: "M290.328 0C344.705 0 388.787 93.6267 388.787 209.121C388.787 211.519 388.765 213.907 388.728 216.285C401.725 133.082 438.661 73.0664 482.197 73.0664C536.574 73.0664 580.656 166.693 580.656 282.188C580.656 397.682 536.574 491.309 482.197 491.309C427.819 491.309 383.738 397.682 383.738 282.188C383.738 279.79 383.758 277.401 383.796 275.023C370.798 358.226 333.864 418.242 290.328 418.242C246.792 418.242 209.856 358.226 196.859 275.023C196.897 277.401 196.918 279.79 196.918 282.188C196.918 397.682 152.836 491.309 98.459 491.309C44.0816 491.309 0 397.682 0 282.188C0 166.693 44.0816 73.0664 98.459 73.0664C141.995 73.0664 178.929 133.082 191.927 216.285C191.889 213.907 191.869 211.519 191.869 209.121C191.869 93.6267 235.95 0 290.328 0Z",
|
||||
}),
|
||||
e.jsx("path", {
|
||||
d: "M1057.8 0C1112.18 0 1156.26 93.6267 1156.26 209.121C1156.26 211.519 1156.24 213.907 1156.2 216.285C1169.2 133.082 1206.14 73.0664 1249.67 73.0664C1304.05 73.0664 1348.13 166.693 1348.13 282.188C1348.13 397.682 1304.05 491.309 1249.67 491.309C1195.29 491.309 1151.21 397.682 1151.21 282.188C1151.21 279.79 1151.23 277.401 1151.27 275.023C1138.27 358.226 1101.34 418.242 1057.8 418.242C1014.27 418.242 977.332 358.226 964.334 275.023C964.372 277.401 964.393 279.79 964.393 282.188C964.393 397.682 920.312 491.309 865.934 491.309C811.557 491.309 767.475 397.682 767.475 282.188C767.475 166.693 811.557 73.0664 865.934 73.0664C909.47 73.0664 946.405 133.082 959.402 216.285C959.365 213.907 959.344 211.519 959.344 209.121C959.344 93.6267 1003.43 0 1057.8 0Z",
|
||||
}),
|
||||
],
|
||||
}),
|
||||
],
|
||||
}),
|
||||
});
|
||||
s.__docgenInfo = {
|
||||
description: "",
|
||||
methods: [],
|
||||
displayName: "HeroDecor",
|
||||
props: {
|
||||
className: { defaultValue: { value: '""', computed: !1 }, required: !1 },
|
||||
},
|
||||
};
|
||||
export { s as H };
|
||||
|
||||
@@ -1,4 +1,73 @@
|
||||
import{j as e}from"./jsx-runtime-C_nHp4yK.js";import{H as o}from"./HeroDecor-Csfoi-N_.js";import"./iframe-D_aMTKb2.js";import"./preload-helper-DIZFD4sK.js";const d={title:"Components/HeroDecor",component:o,parameters:{layout:"centered",docs:{description:{component:"A decorative SVG component that provides background visual elements for the HeroBanner. Features grain effects and organic shapes that enhance the visual appeal without interfering with content readability."}}},argTypes:{className:{control:{type:"text"},description:"Additional CSS classes for positioning and styling"}},tags:["autodocs"]},r={args:{className:"w-[400px] h-[200px]"},parameters:{docs:{description:{story:"Default hero decoration with standard sizing and positioning."}}}},t={args:{className:"w-[600px] h-[300px]"},render:a=>e.jsxs("div",{className:"bg-[var(--color-surface-default-brand-primary)] p-8 rounded-lg relative overflow-hidden",children:[e.jsx(o,{...a}),e.jsxs("div",{className:"relative z-10 text-white mt-4",children:[e.jsx("h3",{children:"Content Overlay"}),e.jsx("p",{children:"This demonstrates how the decoration appears behind content."})]})]}),parameters:{docs:{description:{story:"Hero decoration with background color to show how it integrates with content."}}}};r.parameters={...r.parameters,docs:{...r.parameters?.docs,source:{originalSource:`{
|
||||
import { j as e } from "./jsx-runtime-C_nHp4yK.js";
|
||||
import { H as o } from "./HeroDecor-Csfoi-N_.js";
|
||||
import "./iframe-D_aMTKb2.js";
|
||||
import "./preload-helper-DIZFD4sK.js";
|
||||
const d = {
|
||||
title: "Components/HeroDecor",
|
||||
component: o,
|
||||
parameters: {
|
||||
layout: "centered",
|
||||
docs: {
|
||||
description: {
|
||||
component:
|
||||
"A decorative SVG component that provides background visual elements for the HeroBanner. Features grain effects and organic shapes that enhance the visual appeal without interfering with content readability.",
|
||||
},
|
||||
},
|
||||
},
|
||||
argTypes: {
|
||||
className: {
|
||||
control: { type: "text" },
|
||||
description: "Additional CSS classes for positioning and styling",
|
||||
},
|
||||
},
|
||||
tags: ["autodocs"],
|
||||
},
|
||||
r = {
|
||||
args: { className: "w-[400px] h-[200px]" },
|
||||
parameters: {
|
||||
docs: {
|
||||
description: {
|
||||
story:
|
||||
"Default hero decoration with standard sizing and positioning.",
|
||||
},
|
||||
},
|
||||
},
|
||||
},
|
||||
t = {
|
||||
args: { className: "w-[600px] h-[300px]" },
|
||||
render: (a) =>
|
||||
e.jsxs("div", {
|
||||
className:
|
||||
"bg-[var(--color-surface-default-brand-primary)] p-8 rounded-lg relative overflow-hidden",
|
||||
children: [
|
||||
e.jsx(o, { ...a }),
|
||||
e.jsxs("div", {
|
||||
className: "relative z-10 text-white mt-4",
|
||||
children: [
|
||||
e.jsx("h3", { children: "Content Overlay" }),
|
||||
e.jsx("p", {
|
||||
children:
|
||||
"This demonstrates how the decoration appears behind content.",
|
||||
}),
|
||||
],
|
||||
}),
|
||||
],
|
||||
}),
|
||||
parameters: {
|
||||
docs: {
|
||||
description: {
|
||||
story:
|
||||
"Hero decoration with background color to show how it integrates with content.",
|
||||
},
|
||||
},
|
||||
},
|
||||
};
|
||||
r.parameters = {
|
||||
...r.parameters,
|
||||
docs: {
|
||||
...r.parameters?.docs,
|
||||
source: {
|
||||
originalSource: `{
|
||||
args: {
|
||||
className: "w-[400px] h-[200px]"
|
||||
},
|
||||
@@ -9,7 +78,17 @@ import{j as e}from"./jsx-runtime-C_nHp4yK.js";import{H as o}from"./HeroDecor-Csf
|
||||
}
|
||||
}
|
||||
}
|
||||
}`,...r.parameters?.docs?.source}}};t.parameters={...t.parameters,docs:{...t.parameters?.docs,source:{originalSource:`{
|
||||
}`,
|
||||
...r.parameters?.docs?.source,
|
||||
},
|
||||
},
|
||||
};
|
||||
t.parameters = {
|
||||
...t.parameters,
|
||||
docs: {
|
||||
...t.parameters?.docs,
|
||||
source: {
|
||||
originalSource: `{
|
||||
args: {
|
||||
className: "w-[600px] h-[300px]"
|
||||
},
|
||||
@@ -27,4 +106,15 @@ import{j as e}from"./jsx-runtime-C_nHp4yK.js";import{H as o}from"./HeroDecor-Csf
|
||||
}
|
||||
}
|
||||
}
|
||||
}`,...t.parameters?.docs?.source}}};const p=["Default","WithBackground"];export{r as Default,t as WithBackground,p as __namedExportsOrder,d as default};
|
||||
}`,
|
||||
...t.parameters?.docs?.source,
|
||||
},
|
||||
},
|
||||
};
|
||||
const p = ["Default", "WithBackground"];
|
||||
export {
|
||||
r as Default,
|
||||
t as WithBackground,
|
||||
p as __namedExportsOrder,
|
||||
d as default,
|
||||
};
|
||||
|
||||
File diff suppressed because one or more lines are too long
@@ -1 +1,144 @@
|
||||
import{j as i}from"./jsx-runtime-C_nHp4yK.js";function p({size:e="default",showText:o=!0}){const a={default:{containerHeight:"h-[41px]",gap:"gap-[8.28px]",textSize:"text-[21.97px]",lineHeight:"leading-[27.05px]",iconSize:"w-[27.05px] h-[27.05px]"},homeHeaderXsmall:{containerHeight:"h-[14.11px]",gap:"gap-[4.21px]",textSize:"text-[11.57px]",lineHeight:"leading-[14.24px]",iconSize:"w-[14.11px] h-[14.11px]"},homeHeaderSm:{containerHeight:"h-[21.06px]",gap:"gap-[3.19px]",textSize:"text-[11.69px]",lineHeight:"leading-[14.39px]",iconSize:"w-[14.39px] h-[14.39px]"},homeHeaderMd:{containerHeight:"h-[32.24px]",gap:"gap-[4.89px]",textSize:"text-[17.89px]",lineHeight:"leading-[22.02px]",iconSize:"w-[22.02px] h-[22.02px]"},homeHeaderLg:{containerHeight:"h-[28px]",gap:"gap-[6.55px]",textSize:"text-[21.97px]",lineHeight:"leading-[27.05px]",iconSize:"w-[27.05px] h-[27.05px]"},homeHeaderXl:{containerHeight:"h-[36px]",gap:"gap-[8.64px]",textSize:"text-[29.01px]",lineHeight:"leading-[35.7px]",iconSize:"w-[35.7px] h-[35.7px]"},header:{containerHeight:"h-[20.85px]",gap:"gap-[4.21px]",textSize:"text-[11.57px]",lineHeight:"leading-[14.24px]",iconSize:"w-[14.24px] h-[14.24px]"},headerMd:{containerHeight:"h-[17.91px]",gap:"gap-[6.51px]",textSize:"text-[17.89px]",lineHeight:"leading-[22.02px]",iconSize:"w-[22.02px] h-[22.02px]"},headerLg:{containerHeight:"h-[28px]",gap:"gap-[6.55px]",textSize:"text-[21.97px]",lineHeight:"leading-[27.05px]",iconSize:"w-[27.05px] h-[27.05px]"},headerXl:{containerHeight:"h-[34px]",gap:"gap-[8.19px]",textSize:"text-[27.47px]",lineHeight:"leading-[33.81px]",iconSize:"w-[33.81px] h-[33.81px]"},footer:{containerHeight:"h-[calc(40px*1.37)]",gap:"gap-[calc(8px*1.37)]",textSize:"text-[calc(21.97px*1.37)]",lineHeight:"leading-[calc(27.05px*1.37)]",iconSize:"w-[calc(27.05px*1.37)] h-[calc(27.05px*1.37)]"},footerLg:{containerHeight:"h-[calc(40px*2.05)]",gap:"gap-[calc(8px*2.05)]",textSize:"text-[calc(21.97px*2.05)]",lineHeight:"leading-[calc(27.05px*2.05)]",iconSize:"w-[calc(27.05px*2.05)] h-[calc(27.05px*2.05)]"}},t=e==="homeHeaderXsmall"?a.homeHeaderXsmall:e==="homeHeaderSm"?a.homeHeaderSm:e==="homeHeaderMd"?a.homeHeaderMd:e==="homeHeaderLg"?a.homeHeaderLg:e==="homeHeaderXl"?a.homeHeaderXl:e==="header"?a.header:e==="headerMd"?a.headerMd:e==="headerLg"?a.headerLg:e==="headerXl"?a.headerXl:e==="footer"?a.footer:e==="footerLg"?a.footerLg:a.default;return i.jsxs("div",{className:`flex items-center ${t.containerHeight} ${o?t.gap:""} transition-all duration-200 ease-in-out hover:scale-[1.02] cursor-pointer`,role:"banner","aria-label":"CommunityRule Logo",children:[o&&i.jsx("div",{className:`font-['Bricolage_Grotesque'] ${e==="homeHeaderXsmall"||e==="homeHeaderSm"||e==="homeHeaderMd"||e==="homeHeaderLg"||e==="homeHeaderXl"?"text-[var(--color-content-inverse-primary)]":"text-[var(--color-content-default-primary)]"} ${t.textSize} ${t.lineHeight} font-normal tracking-[0px] transition-colors duration-200`,"aria-label":"CommunityRule",children:"CommunityRule"}),i.jsx("img",{src:"assets/Logo.svg",alt:"CommunityRule Logo Icon",width:27.05,height:27.05,className:`flex-shrink-0 ${t.iconSize} transition-all duration-200 ${e==="homeHeaderXsmall"||e==="homeHeaderSm"||e==="homeHeaderMd"||e==="homeHeaderLg"||e==="homeHeaderXl"?"filter brightness-0":""}`,"aria-hidden":"true"})]})}p.__docgenInfo={description:"",methods:[],displayName:"Logo",props:{size:{defaultValue:{value:'"default"',computed:!1},required:!1},showText:{defaultValue:{value:"true",computed:!1},required:!1}}};export{p as L};
|
||||
import { j as i } from "./jsx-runtime-C_nHp4yK.js";
|
||||
function p({ size: e = "default", showText: o = !0 }) {
|
||||
const a = {
|
||||
default: {
|
||||
containerHeight: "h-[41px]",
|
||||
gap: "gap-[8.28px]",
|
||||
textSize: "text-[21.97px]",
|
||||
lineHeight: "leading-[27.05px]",
|
||||
iconSize: "w-[27.05px] h-[27.05px]",
|
||||
},
|
||||
homeHeaderXsmall: {
|
||||
containerHeight: "h-[14.11px]",
|
||||
gap: "gap-[4.21px]",
|
||||
textSize: "text-[11.57px]",
|
||||
lineHeight: "leading-[14.24px]",
|
||||
iconSize: "w-[14.11px] h-[14.11px]",
|
||||
},
|
||||
homeHeaderSm: {
|
||||
containerHeight: "h-[21.06px]",
|
||||
gap: "gap-[3.19px]",
|
||||
textSize: "text-[11.69px]",
|
||||
lineHeight: "leading-[14.39px]",
|
||||
iconSize: "w-[14.39px] h-[14.39px]",
|
||||
},
|
||||
homeHeaderMd: {
|
||||
containerHeight: "h-[32.24px]",
|
||||
gap: "gap-[4.89px]",
|
||||
textSize: "text-[17.89px]",
|
||||
lineHeight: "leading-[22.02px]",
|
||||
iconSize: "w-[22.02px] h-[22.02px]",
|
||||
},
|
||||
homeHeaderLg: {
|
||||
containerHeight: "h-[28px]",
|
||||
gap: "gap-[6.55px]",
|
||||
textSize: "text-[21.97px]",
|
||||
lineHeight: "leading-[27.05px]",
|
||||
iconSize: "w-[27.05px] h-[27.05px]",
|
||||
},
|
||||
homeHeaderXl: {
|
||||
containerHeight: "h-[36px]",
|
||||
gap: "gap-[8.64px]",
|
||||
textSize: "text-[29.01px]",
|
||||
lineHeight: "leading-[35.7px]",
|
||||
iconSize: "w-[35.7px] h-[35.7px]",
|
||||
},
|
||||
header: {
|
||||
containerHeight: "h-[20.85px]",
|
||||
gap: "gap-[4.21px]",
|
||||
textSize: "text-[11.57px]",
|
||||
lineHeight: "leading-[14.24px]",
|
||||
iconSize: "w-[14.24px] h-[14.24px]",
|
||||
},
|
||||
headerMd: {
|
||||
containerHeight: "h-[17.91px]",
|
||||
gap: "gap-[6.51px]",
|
||||
textSize: "text-[17.89px]",
|
||||
lineHeight: "leading-[22.02px]",
|
||||
iconSize: "w-[22.02px] h-[22.02px]",
|
||||
},
|
||||
headerLg: {
|
||||
containerHeight: "h-[28px]",
|
||||
gap: "gap-[6.55px]",
|
||||
textSize: "text-[21.97px]",
|
||||
lineHeight: "leading-[27.05px]",
|
||||
iconSize: "w-[27.05px] h-[27.05px]",
|
||||
},
|
||||
headerXl: {
|
||||
containerHeight: "h-[34px]",
|
||||
gap: "gap-[8.19px]",
|
||||
textSize: "text-[27.47px]",
|
||||
lineHeight: "leading-[33.81px]",
|
||||
iconSize: "w-[33.81px] h-[33.81px]",
|
||||
},
|
||||
footer: {
|
||||
containerHeight: "h-[calc(40px*1.37)]",
|
||||
gap: "gap-[calc(8px*1.37)]",
|
||||
textSize: "text-[calc(21.97px*1.37)]",
|
||||
lineHeight: "leading-[calc(27.05px*1.37)]",
|
||||
iconSize: "w-[calc(27.05px*1.37)] h-[calc(27.05px*1.37)]",
|
||||
},
|
||||
footerLg: {
|
||||
containerHeight: "h-[calc(40px*2.05)]",
|
||||
gap: "gap-[calc(8px*2.05)]",
|
||||
textSize: "text-[calc(21.97px*2.05)]",
|
||||
lineHeight: "leading-[calc(27.05px*2.05)]",
|
||||
iconSize: "w-[calc(27.05px*2.05)] h-[calc(27.05px*2.05)]",
|
||||
},
|
||||
},
|
||||
t =
|
||||
e === "homeHeaderXsmall"
|
||||
? a.homeHeaderXsmall
|
||||
: e === "homeHeaderSm"
|
||||
? a.homeHeaderSm
|
||||
: e === "homeHeaderMd"
|
||||
? a.homeHeaderMd
|
||||
: e === "homeHeaderLg"
|
||||
? a.homeHeaderLg
|
||||
: e === "homeHeaderXl"
|
||||
? a.homeHeaderXl
|
||||
: e === "header"
|
||||
? a.header
|
||||
: e === "headerMd"
|
||||
? a.headerMd
|
||||
: e === "headerLg"
|
||||
? a.headerLg
|
||||
: e === "headerXl"
|
||||
? a.headerXl
|
||||
: e === "footer"
|
||||
? a.footer
|
||||
: e === "footerLg"
|
||||
? a.footerLg
|
||||
: a.default;
|
||||
return i.jsxs("div", {
|
||||
className: `flex items-center ${t.containerHeight} ${o ? t.gap : ""} transition-all duration-200 ease-in-out hover:scale-[1.02] cursor-pointer`,
|
||||
role: "banner",
|
||||
"aria-label": "CommunityRule Logo",
|
||||
children: [
|
||||
o &&
|
||||
i.jsx("div", {
|
||||
className: `font-['Bricolage_Grotesque'] ${e === "homeHeaderXsmall" || e === "homeHeaderSm" || e === "homeHeaderMd" || e === "homeHeaderLg" || e === "homeHeaderXl" ? "text-[var(--color-content-inverse-primary)]" : "text-[var(--color-content-default-primary)]"} ${t.textSize} ${t.lineHeight} font-normal tracking-[0px] transition-colors duration-200`,
|
||||
"aria-label": "CommunityRule",
|
||||
children: "CommunityRule",
|
||||
}),
|
||||
i.jsx("img", {
|
||||
src: "assets/Logo.svg",
|
||||
alt: "CommunityRule Logo Icon",
|
||||
width: 27.05,
|
||||
height: 27.05,
|
||||
className: `flex-shrink-0 ${t.iconSize} transition-all duration-200 ${e === "homeHeaderXsmall" || e === "homeHeaderSm" || e === "homeHeaderMd" || e === "homeHeaderLg" || e === "homeHeaderXl" ? "filter brightness-0" : ""}`,
|
||||
"aria-hidden": "true",
|
||||
}),
|
||||
],
|
||||
});
|
||||
}
|
||||
p.__docgenInfo = {
|
||||
description: "",
|
||||
methods: [],
|
||||
displayName: "Logo",
|
||||
props: {
|
||||
size: { defaultValue: { value: '"default"', computed: !1 }, required: !1 },
|
||||
showText: { defaultValue: { value: "true", computed: !1 }, required: !1 },
|
||||
},
|
||||
};
|
||||
export { p as L };
|
||||
|
||||
File diff suppressed because one or more lines are too long
@@ -1 +1,21 @@
|
||||
import{j as p}from"./jsx-runtime-C_nHp4yK.js";function r({children:a,className:e="",size:s="default",...l}){const c=`flex items-center ${{xsmall:"px-[var(--spacing-scale-004)] py-[var(--spacing-scale-004)] gap-[var(--spacing-scale-001)] rounded-[4px]",default:"px-[var(--spacing-scale-004)] py-[var(--spacing-scale-004)] gap-[var(--spacing-scale-001)]",medium:"px-[var(--spacing-scale-004)] py-[var(--spacing-scale-004)] gap-[var(--spacing-scale-004)]",large:"px-[var(--spacing-scale-004)] py-[var(--spacing-scale-004)] gap-[var(--spacing-scale-012)]"}[s]} ${e}`;return p.jsx("nav",{className:c,role:"menubar","aria-label":"Main navigation menu",...l,children:a})}r.__docgenInfo={description:"",methods:[],displayName:"MenuBar",props:{className:{defaultValue:{value:'""',computed:!1},required:!1},size:{defaultValue:{value:'"default"',computed:!1},required:!1}}};export{r as M};
|
||||
import { j as p } from "./jsx-runtime-C_nHp4yK.js";
|
||||
function r({ children: a, className: e = "", size: s = "default", ...l }) {
|
||||
const c = `flex items-center ${{ xsmall: "px-[var(--spacing-scale-004)] py-[var(--spacing-scale-004)] gap-[var(--spacing-scale-001)] rounded-[4px]", default: "px-[var(--spacing-scale-004)] py-[var(--spacing-scale-004)] gap-[var(--spacing-scale-001)]", medium: "px-[var(--spacing-scale-004)] py-[var(--spacing-scale-004)] gap-[var(--spacing-scale-004)]", large: "px-[var(--spacing-scale-004)] py-[var(--spacing-scale-004)] gap-[var(--spacing-scale-012)]" }[s]} ${e}`;
|
||||
return p.jsx("nav", {
|
||||
className: c,
|
||||
role: "menubar",
|
||||
"aria-label": "Main navigation menu",
|
||||
...l,
|
||||
children: a,
|
||||
});
|
||||
}
|
||||
r.__docgenInfo = {
|
||||
description: "",
|
||||
methods: [],
|
||||
displayName: "MenuBar",
|
||||
props: {
|
||||
className: { defaultValue: { value: '""', computed: !1 }, required: !1 },
|
||||
size: { defaultValue: { value: '"default"', computed: !1 }, required: !1 },
|
||||
},
|
||||
};
|
||||
export { r as M };
|
||||
|
||||
@@ -1,4 +1,132 @@
|
||||
import{j as e}from"./jsx-runtime-C_nHp4yK.js";import{M as s}from"./MenuBar-anMCqtJv.js";import{M as n}from"./MenuBarItem-Dp8NM2fx.js";import"./iframe-D_aMTKb2.js";import"./preload-helper-DIZFD4sK.js";const d={title:"Components/MenuBar",component:s,parameters:{layout:"centered",docs:{description:{component:"A navigation menu bar container that groups MenuBarItem components together. Provides consistent spacing and layout for navigation menus with multiple size variants."}}},argTypes:{size:{control:{type:"select"},options:["xsmall","default","medium","large"],description:"The size of the menu bar and its children"},className:{control:{type:"text"},description:"Additional CSS classes"}},tags:["autodocs"]},a={args:{size:"default"},render:t=>e.jsxs(s,{...t,children:[e.jsx(n,{size:"large",children:"Home"}),e.jsx(n,{size:"large",children:"About"}),e.jsx(n,{size:"large",children:"Contact"})]})},r={args:{},render:()=>e.jsxs("div",{className:"space-y-6",children:[e.jsxs("div",{children:[e.jsx("h3",{className:"text-white font-semibold mb-3",children:"XSmall Size"}),e.jsxs(s,{size:"xsmall",children:[e.jsx(n,{size:"xsmall",children:"Home"}),e.jsx(n,{size:"xsmall",children:"About"}),e.jsx(n,{size:"xsmall",children:"Contact"})]})]}),e.jsxs("div",{children:[e.jsx("h3",{className:"text-white font-semibold mb-3",children:"Default Size"}),e.jsxs(s,{size:"default",children:[e.jsx(n,{size:"large",children:"Home"}),e.jsx(n,{size:"large",children:"About"}),e.jsx(n,{size:"large",children:"Contact"})]})]}),e.jsxs("div",{children:[e.jsx("h3",{className:"text-white font-semibold mb-3",children:"Medium Size"}),e.jsxs(s,{size:"medium",children:[e.jsx(n,{size:"large",children:"Home"}),e.jsx(n,{size:"large",children:"About"}),e.jsx(n,{size:"large",children:"Contact"})]})]}),e.jsxs("div",{children:[e.jsx("h3",{className:"text-white font-semibold mb-3",children:"Large Size"}),e.jsxs(s,{size:"large",children:[e.jsx(n,{size:"large",children:"Home"}),e.jsx(n,{size:"large",children:"About"}),e.jsx(n,{size:"large",children:"Contact"})]})]})]}),parameters:{docs:{description:{story:"Different size variants of the menu bar with consistent spacing and layout."}}}};a.parameters={...a.parameters,docs:{...a.parameters?.docs,source:{originalSource:`{
|
||||
import { j as e } from "./jsx-runtime-C_nHp4yK.js";
|
||||
import { M as s } from "./MenuBar-anMCqtJv.js";
|
||||
import { M as n } from "./MenuBarItem-Dp8NM2fx.js";
|
||||
import "./iframe-D_aMTKb2.js";
|
||||
import "./preload-helper-DIZFD4sK.js";
|
||||
const d = {
|
||||
title: "Components/MenuBar",
|
||||
component: s,
|
||||
parameters: {
|
||||
layout: "centered",
|
||||
docs: {
|
||||
description: {
|
||||
component:
|
||||
"A navigation menu bar container that groups MenuBarItem components together. Provides consistent spacing and layout for navigation menus with multiple size variants.",
|
||||
},
|
||||
},
|
||||
},
|
||||
argTypes: {
|
||||
size: {
|
||||
control: { type: "select" },
|
||||
options: ["xsmall", "default", "medium", "large"],
|
||||
description: "The size of the menu bar and its children",
|
||||
},
|
||||
className: {
|
||||
control: { type: "text" },
|
||||
description: "Additional CSS classes",
|
||||
},
|
||||
},
|
||||
tags: ["autodocs"],
|
||||
},
|
||||
a = {
|
||||
args: { size: "default" },
|
||||
render: (t) =>
|
||||
e.jsxs(s, {
|
||||
...t,
|
||||
children: [
|
||||
e.jsx(n, { size: "large", children: "Home" }),
|
||||
e.jsx(n, { size: "large", children: "About" }),
|
||||
e.jsx(n, { size: "large", children: "Contact" }),
|
||||
],
|
||||
}),
|
||||
},
|
||||
r = {
|
||||
args: {},
|
||||
render: () =>
|
||||
e.jsxs("div", {
|
||||
className: "space-y-6",
|
||||
children: [
|
||||
e.jsxs("div", {
|
||||
children: [
|
||||
e.jsx("h3", {
|
||||
className: "text-white font-semibold mb-3",
|
||||
children: "XSmall Size",
|
||||
}),
|
||||
e.jsxs(s, {
|
||||
size: "xsmall",
|
||||
children: [
|
||||
e.jsx(n, { size: "xsmall", children: "Home" }),
|
||||
e.jsx(n, { size: "xsmall", children: "About" }),
|
||||
e.jsx(n, { size: "xsmall", children: "Contact" }),
|
||||
],
|
||||
}),
|
||||
],
|
||||
}),
|
||||
e.jsxs("div", {
|
||||
children: [
|
||||
e.jsx("h3", {
|
||||
className: "text-white font-semibold mb-3",
|
||||
children: "Default Size",
|
||||
}),
|
||||
e.jsxs(s, {
|
||||
size: "default",
|
||||
children: [
|
||||
e.jsx(n, { size: "large", children: "Home" }),
|
||||
e.jsx(n, { size: "large", children: "About" }),
|
||||
e.jsx(n, { size: "large", children: "Contact" }),
|
||||
],
|
||||
}),
|
||||
],
|
||||
}),
|
||||
e.jsxs("div", {
|
||||
children: [
|
||||
e.jsx("h3", {
|
||||
className: "text-white font-semibold mb-3",
|
||||
children: "Medium Size",
|
||||
}),
|
||||
e.jsxs(s, {
|
||||
size: "medium",
|
||||
children: [
|
||||
e.jsx(n, { size: "large", children: "Home" }),
|
||||
e.jsx(n, { size: "large", children: "About" }),
|
||||
e.jsx(n, { size: "large", children: "Contact" }),
|
||||
],
|
||||
}),
|
||||
],
|
||||
}),
|
||||
e.jsxs("div", {
|
||||
children: [
|
||||
e.jsx("h3", {
|
||||
className: "text-white font-semibold mb-3",
|
||||
children: "Large Size",
|
||||
}),
|
||||
e.jsxs(s, {
|
||||
size: "large",
|
||||
children: [
|
||||
e.jsx(n, { size: "large", children: "Home" }),
|
||||
e.jsx(n, { size: "large", children: "About" }),
|
||||
e.jsx(n, { size: "large", children: "Contact" }),
|
||||
],
|
||||
}),
|
||||
],
|
||||
}),
|
||||
],
|
||||
}),
|
||||
parameters: {
|
||||
docs: {
|
||||
description: {
|
||||
story:
|
||||
"Different size variants of the menu bar with consistent spacing and layout.",
|
||||
},
|
||||
},
|
||||
},
|
||||
};
|
||||
a.parameters = {
|
||||
...a.parameters,
|
||||
docs: {
|
||||
...a.parameters?.docs,
|
||||
source: {
|
||||
originalSource: `{
|
||||
args: {
|
||||
size: "default"
|
||||
},
|
||||
@@ -7,7 +135,17 @@ import{j as e}from"./jsx-runtime-C_nHp4yK.js";import{M as s}from"./MenuBar-anMCq
|
||||
<MenuBarItem size="large">About</MenuBarItem>
|
||||
<MenuBarItem size="large">Contact</MenuBarItem>
|
||||
</MenuBar>
|
||||
}`,...a.parameters?.docs?.source}}};r.parameters={...r.parameters,docs:{...r.parameters?.docs,source:{originalSource:`{
|
||||
}`,
|
||||
...a.parameters?.docs?.source,
|
||||
},
|
||||
},
|
||||
};
|
||||
r.parameters = {
|
||||
...r.parameters,
|
||||
docs: {
|
||||
...r.parameters?.docs,
|
||||
source: {
|
||||
originalSource: `{
|
||||
args: {},
|
||||
render: () => <div className="space-y-6">
|
||||
<div>
|
||||
@@ -53,4 +191,10 @@ import{j as e}from"./jsx-runtime-C_nHp4yK.js";import{M as s}from"./MenuBar-anMCq
|
||||
}
|
||||
}
|
||||
}
|
||||
}`,...r.parameters?.docs?.source}}};const u=["Default","Sizes"];export{a as Default,r as Sizes,u as __namedExportsOrder,d as default};
|
||||
}`,
|
||||
...r.parameters?.docs?.source,
|
||||
},
|
||||
},
|
||||
};
|
||||
const u = ["Default", "Sizes"];
|
||||
export { a as Default, r as Sizes, u as __namedExportsOrder, d as default };
|
||||
|
||||
File diff suppressed because one or more lines are too long
@@ -1,9 +1,217 @@
|
||||
import{j as e}from"./jsx-runtime-C_nHp4yK.js";import{M as a}from"./MenuBarItem-Dp8NM2fx.js";import"./iframe-D_aMTKb2.js";import"./preload-helper-DIZFD4sK.js";const u={title:"Components/MenuBarItem",component:a,parameters:{layout:"centered",docs:{description:{component:"A navigation menu item component with multiple variants, sizes, and states. Can render as a link or disabled span with full accessibility support. Includes focus states with keyboard navigation - use Tab key to test focus indicators."}}},argTypes:{variant:{control:{type:"select"},options:["default","home"],description:"The visual style variant of the menu item"},size:{control:{type:"select"},options:["xsmall","xsmallUseCases","homeMd","homeUseCases","large","largeUseCases","homeXlarge","xlarge"],description:"The size of the menu item"},disabled:{control:{type:"boolean"},description:"Whether the menu item is disabled"},href:{control:{type:"text"},description:"The link destination"},onClick:{action:"clicked"}},tags:["autodocs"]},n={args:{children:"Menu Item",size:"large"}},r={args:{children:"Menu Item",size:"large"},render:s=>e.jsx("div",{className:"space-y-4",children:e.jsxs("div",{className:"space-x-4",children:[e.jsx(a,{...s,variant:"default",children:"Default"}),e.jsx(a,{...s,variant:"home",children:"Home"})]})}),parameters:{docs:{description:{story:"Different visual variants of the menu item component."}}}},t={args:{children:"Menu Item",variant:"default"},render:s=>e.jsx("div",{className:"space-y-4",children:e.jsxs("div",{className:"space-x-4",children:[e.jsx(a,{...s,size:"xsmall",children:"XSmall"}),e.jsx(a,{...s,size:"large",children:"Large"}),e.jsx(a,{...s,size:"xlarge",children:"XLarge"})]})}),parameters:{docs:{description:{story:"Different sizes available for the menu item component."}}}},i={args:{children:"Menu Item",size:"large",variant:"default"},render:s=>e.jsx("div",{className:"space-y-4",children:e.jsxs("div",{className:"space-x-4",children:[e.jsx(a,{...s,children:"Normal"}),e.jsx(a,{...s,disabled:!0,children:"Disabled"})]})}),parameters:{docs:{description:{story:"Different states of the menu item component."}}}},l={args:{},render:()=>e.jsxs("div",{className:"space-y-6",children:[e.jsxs("div",{children:[e.jsx("h3",{className:"text-white font-semibold mb-3",children:"Default Variant"}),e.jsxs("div",{className:"space-x-4",children:[e.jsx(a,{size:"xsmall",children:"XSmall"}),e.jsx(a,{size:"large",children:"Large"}),e.jsx(a,{size:"xlarge",children:"XLarge"})]})]}),e.jsxs("div",{children:[e.jsx("h3",{className:"text-white font-semibold mb-3",children:"Home Variant"}),e.jsxs("div",{className:"space-x-4",children:[e.jsx(a,{variant:"home",size:"xsmall",children:"XSmall"}),e.jsx(a,{variant:"home",size:"large",children:"Large"}),e.jsx(a,{variant:"home",size:"xlarge",children:"XLarge"})]})]}),e.jsxs("div",{children:[e.jsx("h3",{className:"text-white font-semibold mb-3",children:"Disabled States"}),e.jsxs("div",{className:"space-x-4",children:[e.jsx(a,{size:"large",disabled:!0,children:"Default Disabled"}),e.jsx(a,{variant:"home",size:"large",disabled:!0,children:"Home Disabled"})]})]})]}),parameters:{docs:{description:{story:"Complete overview of all menu item variants, sizes, and states."}}}};n.parameters={...n.parameters,docs:{...n.parameters?.docs,source:{originalSource:`{
|
||||
import { j as e } from "./jsx-runtime-C_nHp4yK.js";
|
||||
import { M as a } from "./MenuBarItem-Dp8NM2fx.js";
|
||||
import "./iframe-D_aMTKb2.js";
|
||||
import "./preload-helper-DIZFD4sK.js";
|
||||
const u = {
|
||||
title: "Components/MenuBarItem",
|
||||
component: a,
|
||||
parameters: {
|
||||
layout: "centered",
|
||||
docs: {
|
||||
description: {
|
||||
component:
|
||||
"A navigation menu item component with multiple variants, sizes, and states. Can render as a link or disabled span with full accessibility support. Includes focus states with keyboard navigation - use Tab key to test focus indicators.",
|
||||
},
|
||||
},
|
||||
},
|
||||
argTypes: {
|
||||
variant: {
|
||||
control: { type: "select" },
|
||||
options: ["default", "home"],
|
||||
description: "The visual style variant of the menu item",
|
||||
},
|
||||
size: {
|
||||
control: { type: "select" },
|
||||
options: [
|
||||
"xsmall",
|
||||
"xsmallUseCases",
|
||||
"homeMd",
|
||||
"homeUseCases",
|
||||
"large",
|
||||
"largeUseCases",
|
||||
"homeXlarge",
|
||||
"xlarge",
|
||||
],
|
||||
description: "The size of the menu item",
|
||||
},
|
||||
disabled: {
|
||||
control: { type: "boolean" },
|
||||
description: "Whether the menu item is disabled",
|
||||
},
|
||||
href: { control: { type: "text" }, description: "The link destination" },
|
||||
onClick: { action: "clicked" },
|
||||
},
|
||||
tags: ["autodocs"],
|
||||
},
|
||||
n = { args: { children: "Menu Item", size: "large" } },
|
||||
r = {
|
||||
args: { children: "Menu Item", size: "large" },
|
||||
render: (s) =>
|
||||
e.jsx("div", {
|
||||
className: "space-y-4",
|
||||
children: e.jsxs("div", {
|
||||
className: "space-x-4",
|
||||
children: [
|
||||
e.jsx(a, { ...s, variant: "default", children: "Default" }),
|
||||
e.jsx(a, { ...s, variant: "home", children: "Home" }),
|
||||
],
|
||||
}),
|
||||
}),
|
||||
parameters: {
|
||||
docs: {
|
||||
description: {
|
||||
story: "Different visual variants of the menu item component.",
|
||||
},
|
||||
},
|
||||
},
|
||||
},
|
||||
t = {
|
||||
args: { children: "Menu Item", variant: "default" },
|
||||
render: (s) =>
|
||||
e.jsx("div", {
|
||||
className: "space-y-4",
|
||||
children: e.jsxs("div", {
|
||||
className: "space-x-4",
|
||||
children: [
|
||||
e.jsx(a, { ...s, size: "xsmall", children: "XSmall" }),
|
||||
e.jsx(a, { ...s, size: "large", children: "Large" }),
|
||||
e.jsx(a, { ...s, size: "xlarge", children: "XLarge" }),
|
||||
],
|
||||
}),
|
||||
}),
|
||||
parameters: {
|
||||
docs: {
|
||||
description: {
|
||||
story: "Different sizes available for the menu item component.",
|
||||
},
|
||||
},
|
||||
},
|
||||
},
|
||||
i = {
|
||||
args: { children: "Menu Item", size: "large", variant: "default" },
|
||||
render: (s) =>
|
||||
e.jsx("div", {
|
||||
className: "space-y-4",
|
||||
children: e.jsxs("div", {
|
||||
className: "space-x-4",
|
||||
children: [
|
||||
e.jsx(a, { ...s, children: "Normal" }),
|
||||
e.jsx(a, { ...s, disabled: !0, children: "Disabled" }),
|
||||
],
|
||||
}),
|
||||
}),
|
||||
parameters: {
|
||||
docs: {
|
||||
description: { story: "Different states of the menu item component." },
|
||||
},
|
||||
},
|
||||
},
|
||||
l = {
|
||||
args: {},
|
||||
render: () =>
|
||||
e.jsxs("div", {
|
||||
className: "space-y-6",
|
||||
children: [
|
||||
e.jsxs("div", {
|
||||
children: [
|
||||
e.jsx("h3", {
|
||||
className: "text-white font-semibold mb-3",
|
||||
children: "Default Variant",
|
||||
}),
|
||||
e.jsxs("div", {
|
||||
className: "space-x-4",
|
||||
children: [
|
||||
e.jsx(a, { size: "xsmall", children: "XSmall" }),
|
||||
e.jsx(a, { size: "large", children: "Large" }),
|
||||
e.jsx(a, { size: "xlarge", children: "XLarge" }),
|
||||
],
|
||||
}),
|
||||
],
|
||||
}),
|
||||
e.jsxs("div", {
|
||||
children: [
|
||||
e.jsx("h3", {
|
||||
className: "text-white font-semibold mb-3",
|
||||
children: "Home Variant",
|
||||
}),
|
||||
e.jsxs("div", {
|
||||
className: "space-x-4",
|
||||
children: [
|
||||
e.jsx(a, {
|
||||
variant: "home",
|
||||
size: "xsmall",
|
||||
children: "XSmall",
|
||||
}),
|
||||
e.jsx(a, {
|
||||
variant: "home",
|
||||
size: "large",
|
||||
children: "Large",
|
||||
}),
|
||||
e.jsx(a, {
|
||||
variant: "home",
|
||||
size: "xlarge",
|
||||
children: "XLarge",
|
||||
}),
|
||||
],
|
||||
}),
|
||||
],
|
||||
}),
|
||||
e.jsxs("div", {
|
||||
children: [
|
||||
e.jsx("h3", {
|
||||
className: "text-white font-semibold mb-3",
|
||||
children: "Disabled States",
|
||||
}),
|
||||
e.jsxs("div", {
|
||||
className: "space-x-4",
|
||||
children: [
|
||||
e.jsx(a, {
|
||||
size: "large",
|
||||
disabled: !0,
|
||||
children: "Default Disabled",
|
||||
}),
|
||||
e.jsx(a, {
|
||||
variant: "home",
|
||||
size: "large",
|
||||
disabled: !0,
|
||||
children: "Home Disabled",
|
||||
}),
|
||||
],
|
||||
}),
|
||||
],
|
||||
}),
|
||||
],
|
||||
}),
|
||||
parameters: {
|
||||
docs: {
|
||||
description: {
|
||||
story:
|
||||
"Complete overview of all menu item variants, sizes, and states.",
|
||||
},
|
||||
},
|
||||
},
|
||||
};
|
||||
n.parameters = {
|
||||
...n.parameters,
|
||||
docs: {
|
||||
...n.parameters?.docs,
|
||||
source: {
|
||||
originalSource: `{
|
||||
args: {
|
||||
children: "Menu Item",
|
||||
size: "large"
|
||||
}
|
||||
}`,...n.parameters?.docs?.source}}};r.parameters={...r.parameters,docs:{...r.parameters?.docs,source:{originalSource:`{
|
||||
}`,
|
||||
...n.parameters?.docs?.source,
|
||||
},
|
||||
},
|
||||
};
|
||||
r.parameters = {
|
||||
...r.parameters,
|
||||
docs: {
|
||||
...r.parameters?.docs,
|
||||
source: {
|
||||
originalSource: `{
|
||||
args: {
|
||||
children: "Menu Item",
|
||||
size: "large"
|
||||
@@ -25,7 +233,17 @@ import{j as e}from"./jsx-runtime-C_nHp4yK.js";import{M as a}from"./MenuBarItem-D
|
||||
}
|
||||
}
|
||||
}
|
||||
}`,...r.parameters?.docs?.source}}};t.parameters={...t.parameters,docs:{...t.parameters?.docs,source:{originalSource:`{
|
||||
}`,
|
||||
...r.parameters?.docs?.source,
|
||||
},
|
||||
},
|
||||
};
|
||||
t.parameters = {
|
||||
...t.parameters,
|
||||
docs: {
|
||||
...t.parameters?.docs,
|
||||
source: {
|
||||
originalSource: `{
|
||||
args: {
|
||||
children: "Menu Item",
|
||||
variant: "default"
|
||||
@@ -50,7 +268,17 @@ import{j as e}from"./jsx-runtime-C_nHp4yK.js";import{M as a}from"./MenuBarItem-D
|
||||
}
|
||||
}
|
||||
}
|
||||
}`,...t.parameters?.docs?.source}}};i.parameters={...i.parameters,docs:{...i.parameters?.docs,source:{originalSource:`{
|
||||
}`,
|
||||
...t.parameters?.docs?.source,
|
||||
},
|
||||
},
|
||||
};
|
||||
i.parameters = {
|
||||
...i.parameters,
|
||||
docs: {
|
||||
...i.parameters?.docs,
|
||||
source: {
|
||||
originalSource: `{
|
||||
args: {
|
||||
children: "Menu Item",
|
||||
size: "large",
|
||||
@@ -71,7 +299,17 @@ import{j as e}from"./jsx-runtime-C_nHp4yK.js";import{M as a}from"./MenuBarItem-D
|
||||
}
|
||||
}
|
||||
}
|
||||
}`,...i.parameters?.docs?.source}}};l.parameters={...l.parameters,docs:{...l.parameters?.docs,source:{originalSource:`{
|
||||
}`,
|
||||
...i.parameters?.docs?.source,
|
||||
},
|
||||
},
|
||||
};
|
||||
l.parameters = {
|
||||
...l.parameters,
|
||||
docs: {
|
||||
...l.parameters?.docs,
|
||||
source: {
|
||||
originalSource: `{
|
||||
args: {},
|
||||
render: () => <div className="space-y-6">
|
||||
<div>
|
||||
@@ -117,4 +355,18 @@ import{j as e}from"./jsx-runtime-C_nHp4yK.js";import{M as a}from"./MenuBarItem-D
|
||||
}
|
||||
}
|
||||
}
|
||||
}`,...l.parameters?.docs?.source}}};const p=["Default","Variants","Sizes","States","AllVariants"];export{l as AllVariants,n as Default,t as Sizes,i as States,r as Variants,p as __namedExportsOrder,u as default};
|
||||
}`,
|
||||
...l.parameters?.docs?.source,
|
||||
},
|
||||
},
|
||||
};
|
||||
const p = ["Default", "Variants", "Sizes", "States", "AllVariants"];
|
||||
export {
|
||||
l as AllVariants,
|
||||
n as Default,
|
||||
t as Sizes,
|
||||
i as States,
|
||||
r as Variants,
|
||||
p as __namedExportsOrder,
|
||||
u as default,
|
||||
};
|
||||
|
||||
@@ -1 +1,24 @@
|
||||
import{j as e}from"./jsx-runtime-C_nHp4yK.js";import{S as t}from"./SectionNumber-Cptefv18.js";const r=({number:l,text:s,iconShape:o,iconColor:a})=>e.jsxs("div",{className:"bg-[var(--color-surface-inverse-primary)] rounded-[12px] p-5 shadow-lg flex flex-col gap-4 sm:p-8 sm:gap-8 sm:flex-row sm:items-center lg:p-8 lg:gap-0 lg:flex-row lg:items-stretch lg:relative lg:h-[238px]",children:[e.jsx("div",{className:"flex justify-end sm:justify-start sm:flex-shrink-0 lg:absolute lg:top-8 lg:right-8",children:e.jsx(t,{number:l})}),e.jsx("div",{className:"sm:flex-1 lg:absolute lg:bottom-8 lg:left-8 lg:right-16",children:e.jsx("p",{className:"font-bricolage-grotesque font-medium text-[24px] leading-[32px] sm:font-normal sm:leading-[24px] sm:text-[24px] lg:text-[24px] lg:leading-[24px] xl:text-[32px] xl:leading-[32px] text-[#141414]",children:s})})]});r.__docgenInfo={description:"",methods:[],displayName:"NumberedCard"};export{r as N};
|
||||
import { j as e } from "./jsx-runtime-C_nHp4yK.js";
|
||||
import { S as t } from "./SectionNumber-Cptefv18.js";
|
||||
const r = ({ number: l, text: s, iconShape: o, iconColor: a }) =>
|
||||
e.jsxs("div", {
|
||||
className:
|
||||
"bg-[var(--color-surface-inverse-primary)] rounded-[12px] p-5 shadow-lg flex flex-col gap-4 sm:p-8 sm:gap-8 sm:flex-row sm:items-center lg:p-8 lg:gap-0 lg:flex-row lg:items-stretch lg:relative lg:h-[238px]",
|
||||
children: [
|
||||
e.jsx("div", {
|
||||
className:
|
||||
"flex justify-end sm:justify-start sm:flex-shrink-0 lg:absolute lg:top-8 lg:right-8",
|
||||
children: e.jsx(t, { number: l }),
|
||||
}),
|
||||
e.jsx("div", {
|
||||
className: "sm:flex-1 lg:absolute lg:bottom-8 lg:left-8 lg:right-16",
|
||||
children: e.jsx("p", {
|
||||
className:
|
||||
"font-bricolage-grotesque font-medium text-[24px] leading-[32px] sm:font-normal sm:leading-[24px] sm:text-[24px] lg:text-[24px] lg:leading-[24px] xl:text-[32px] xl:leading-[32px] text-[#141414]",
|
||||
children: s,
|
||||
}),
|
||||
}),
|
||||
],
|
||||
});
|
||||
r.__docgenInfo = { description: "", methods: [], displayName: "NumberedCard" };
|
||||
export { r as N };
|
||||
|
||||
@@ -1,11 +1,124 @@
|
||||
import{j as e}from"./jsx-runtime-C_nHp4yK.js";import{N as o}from"./NumberedCard-ClCynPua.js";import"./iframe-D_aMTKb2.js";import"./preload-helper-DIZFD4sK.js";import"./SectionNumber-Cptefv18.js";const m={title:"Components/NumberedCard",component:o,parameters:{layout:"centered",docs:{description:{component:"Individual numbered card component that displays a step in a process with a numbered icon and descriptive text. Supports responsive layouts across different breakpoints."}}},argTypes:{number:{control:{type:"number",min:1,max:9},description:"The number to display on the card"},text:{control:{type:"text"},description:"The descriptive text for this step"},iconShape:{control:{type:"select"},options:["blob","gear","star"],description:"The shape of the icon background (currently not used, uses PNG images)"},iconColor:{control:{type:"select"},options:["green","purple","orange","blue"],description:"The color theme for the icon (currently not used, uses PNG images)"}},tags:["autodocs"]},t={args:{number:1,text:"Document how your community makes decisions",iconShape:"blob",iconColor:"green"}},r={args:{number:1,text:"Example card text",iconShape:"blob",iconColor:"green"},render:s=>e.jsxs("div",{className:"space-y-4",children:[e.jsx(o,{...s,number:1,text:"First step in the process"}),e.jsx(o,{...s,number:2,text:"Second step with different content"}),e.jsx(o,{...s,number:3,text:"Third and final step of the workflow"})]}),parameters:{docs:{description:{story:"Shows all three numbered cards with different content to demonstrate the visual hierarchy."}}}},n={args:{number:1,text:"This is a much longer piece of text that demonstrates how the card handles content that spans multiple lines and requires more space to display properly",iconShape:"blob",iconColor:"green"},parameters:{docs:{description:{story:"Demonstrates how the card handles longer text content across different breakpoints."}}}};t.parameters={...t.parameters,docs:{...t.parameters?.docs,source:{originalSource:`{
|
||||
import { j as e } from "./jsx-runtime-C_nHp4yK.js";
|
||||
import { N as o } from "./NumberedCard-ClCynPua.js";
|
||||
import "./iframe-D_aMTKb2.js";
|
||||
import "./preload-helper-DIZFD4sK.js";
|
||||
import "./SectionNumber-Cptefv18.js";
|
||||
const m = {
|
||||
title: "Components/NumberedCard",
|
||||
component: o,
|
||||
parameters: {
|
||||
layout: "centered",
|
||||
docs: {
|
||||
description: {
|
||||
component:
|
||||
"Individual numbered card component that displays a step in a process with a numbered icon and descriptive text. Supports responsive layouts across different breakpoints.",
|
||||
},
|
||||
},
|
||||
},
|
||||
argTypes: {
|
||||
number: {
|
||||
control: { type: "number", min: 1, max: 9 },
|
||||
description: "The number to display on the card",
|
||||
},
|
||||
text: {
|
||||
control: { type: "text" },
|
||||
description: "The descriptive text for this step",
|
||||
},
|
||||
iconShape: {
|
||||
control: { type: "select" },
|
||||
options: ["blob", "gear", "star"],
|
||||
description:
|
||||
"The shape of the icon background (currently not used, uses PNG images)",
|
||||
},
|
||||
iconColor: {
|
||||
control: { type: "select" },
|
||||
options: ["green", "purple", "orange", "blue"],
|
||||
description:
|
||||
"The color theme for the icon (currently not used, uses PNG images)",
|
||||
},
|
||||
},
|
||||
tags: ["autodocs"],
|
||||
},
|
||||
t = {
|
||||
args: {
|
||||
number: 1,
|
||||
text: "Document how your community makes decisions",
|
||||
iconShape: "blob",
|
||||
iconColor: "green",
|
||||
},
|
||||
},
|
||||
r = {
|
||||
args: {
|
||||
number: 1,
|
||||
text: "Example card text",
|
||||
iconShape: "blob",
|
||||
iconColor: "green",
|
||||
},
|
||||
render: (s) =>
|
||||
e.jsxs("div", {
|
||||
className: "space-y-4",
|
||||
children: [
|
||||
e.jsx(o, { ...s, number: 1, text: "First step in the process" }),
|
||||
e.jsx(o, {
|
||||
...s,
|
||||
number: 2,
|
||||
text: "Second step with different content",
|
||||
}),
|
||||
e.jsx(o, {
|
||||
...s,
|
||||
number: 3,
|
||||
text: "Third and final step of the workflow",
|
||||
}),
|
||||
],
|
||||
}),
|
||||
parameters: {
|
||||
docs: {
|
||||
description: {
|
||||
story:
|
||||
"Shows all three numbered cards with different content to demonstrate the visual hierarchy.",
|
||||
},
|
||||
},
|
||||
},
|
||||
},
|
||||
n = {
|
||||
args: {
|
||||
number: 1,
|
||||
text: "This is a much longer piece of text that demonstrates how the card handles content that spans multiple lines and requires more space to display properly",
|
||||
iconShape: "blob",
|
||||
iconColor: "green",
|
||||
},
|
||||
parameters: {
|
||||
docs: {
|
||||
description: {
|
||||
story:
|
||||
"Demonstrates how the card handles longer text content across different breakpoints.",
|
||||
},
|
||||
},
|
||||
},
|
||||
};
|
||||
t.parameters = {
|
||||
...t.parameters,
|
||||
docs: {
|
||||
...t.parameters?.docs,
|
||||
source: {
|
||||
originalSource: `{
|
||||
args: {
|
||||
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:`{
|
||||
}`,
|
||||
...t.parameters?.docs?.source,
|
||||
},
|
||||
},
|
||||
};
|
||||
r.parameters = {
|
||||
...r.parameters,
|
||||
docs: {
|
||||
...r.parameters?.docs,
|
||||
source: {
|
||||
originalSource: `{
|
||||
args: {
|
||||
number: 1,
|
||||
text: "Example card text",
|
||||
@@ -24,7 +137,17 @@ import{j as e}from"./jsx-runtime-C_nHp4yK.js";import{N as o}from"./NumberedCard-
|
||||
}
|
||||
}
|
||||
}
|
||||
}`,...r.parameters?.docs?.source}}};n.parameters={...n.parameters,docs:{...n.parameters?.docs,source:{originalSource:`{
|
||||
}`,
|
||||
...r.parameters?.docs?.source,
|
||||
},
|
||||
},
|
||||
};
|
||||
n.parameters = {
|
||||
...n.parameters,
|
||||
docs: {
|
||||
...n.parameters?.docs,
|
||||
source: {
|
||||
originalSource: `{
|
||||
args: {
|
||||
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",
|
||||
@@ -38,4 +161,16 @@ import{j as e}from"./jsx-runtime-C_nHp4yK.js";import{N as o}from"./NumberedCard-
|
||||
}
|
||||
}
|
||||
}
|
||||
}`,...n.parameters?.docs?.source}}};const l=["Default","AllNumbers","LongText"];export{r as AllNumbers,t as Default,n as LongText,l as __namedExportsOrder,m as default};
|
||||
}`,
|
||||
...n.parameters?.docs?.source,
|
||||
},
|
||||
},
|
||||
};
|
||||
const l = ["Default", "AllNumbers", "LongText"];
|
||||
export {
|
||||
r as AllNumbers,
|
||||
t as Default,
|
||||
n as LongText,
|
||||
l as __namedExportsOrder,
|
||||
m as default,
|
||||
};
|
||||
|
||||
@@ -1,4 +1,184 @@
|
||||
import{j as e}from"./jsx-runtime-C_nHp4yK.js";import{N as m}from"./NumberedCard-ClCynPua.js";import{S as u}from"./SectionHeader-CadpOP1T.js";import{B as c}from"./Button-Z4hbXct5.js";import"./iframe-D_aMTKb2.js";import"./preload-helper-DIZFD4sK.js";import"./SectionNumber-Cptefv18.js";const l=({title:r,subtitle:a,cards:i})=>{const p={"@context":"https://schema.org","@type":"HowTo",name:r,description:a,step:i.map((o,t)=>({"@type":"HowToStep",position:t+1,name:o.text,text:o.text}))};return e.jsxs(e.Fragment,{children:[e.jsx("script",{type:"application/ld+json",dangerouslySetInnerHTML:{__html:JSON.stringify(p)}}),e.jsx("section",{className:"bg-transparent py-[var(--spacing-scale-032)] px-[var(--spacing-scale-020)] sm:py-[var(--spacing-scale-048)] sm:px-[var(--spacing-scale-032)] lg:py-[var(--spacing-scale-064)] lg:px-[var(--spacing-scale-064)] xl:py-[var(--spacing-scale-076)] xl:px-[var(--spacing-scale-064)]",children:e.jsx("div",{className:"max-w-[var(--spacing-measures-max-width-lg)] mx-auto",children:e.jsxs("div",{className:"grid grid-cols-1 gap-y-[var(--spacing-scale-032)] lg:gap-y-[var(--spacing-scale-056)]",children:[e.jsx("div",{children:e.jsx(u,{title:r,subtitle:a,titleLg:"How CommunityRule helps"})}),e.jsx("div",{className:"grid grid-cols-1 gap-y-[var(--spacing-scale-024)] lg:grid-cols-3 lg:gap-[var(--spacing-scale-024)]",children:i.map((o,t)=>e.jsx(m,{number:t+1,text:o.text,iconShape:o.iconShape,iconColor:o.iconColor},t))}),e.jsxs("div",{className:"text-center sm:text-left lg:text-center",children:[e.jsx("div",{className:"block lg:hidden",children:e.jsx(c,{variant:"default",size:"large",children:"Create CommunityRule"})}),e.jsx("div",{className:"hidden lg:block",children:e.jsx(c,{variant:"outlined",size:"large",children:"See how it works"})})]})]})})})]})};l.__docgenInfo={description:"",methods:[],displayName:"NumberedCards"};const C={title:"Components/NumberedCards",component:l,parameters:{layout:"fullscreen",docs:{description:{component:"A component system for visually communicating multi-step workflows, processes, or value propositions. The component's modular design with NumberedCard and SectionNumber sub-components makes it ideal for explaining any sequential process while maintaining brand consistency and accessibility standards across the design system."}}},argTypes:{title:{control:{type:"text"},description:"The main title for the section"},subtitle:{control:{type:"text"},description:"The subtitle text below the main title"},cards:{control:{type:"object"},description:"Array of card objects with text, iconShape, and iconColor properties"}},tags:["autodocs"]},n={args:{title:"How CommunityRule works",subtitle:"Here's a quick overview of the process, from start to finish.",cards:[{text:"Document how your community makes decisions",iconShape:"blob",iconColor:"green"},{text:"Build an operating manual for a successful community",iconShape:"gear",iconColor:"purple"},{text:"Get a link to your manual for your group to review and evolve",iconShape:"star",iconColor:"orange"}]}},s={args:{title:"Our Process",subtitle:"Follow these simple steps to get started with your project.",cards:[{text:"Define your project requirements and goals",iconShape:"blob",iconColor:"green"},{text:"Collaborate with our team to create the perfect solution",iconShape:"gear",iconColor:"purple"},{text:"Launch and iterate based on user feedback",iconShape:"star",iconColor:"orange"},{text:"Scale and optimize for continued success",iconShape:"blob",iconColor:"blue"}]},parameters:{docs:{description:{story:"Example with custom content and four cards to show flexibility."}}}};n.parameters={...n.parameters,docs:{...n.parameters?.docs,source:{originalSource:`{
|
||||
import { j as e } from "./jsx-runtime-C_nHp4yK.js";
|
||||
import { N as m } from "./NumberedCard-ClCynPua.js";
|
||||
import { S as u } from "./SectionHeader-CadpOP1T.js";
|
||||
import { B as c } from "./Button-Z4hbXct5.js";
|
||||
import "./iframe-D_aMTKb2.js";
|
||||
import "./preload-helper-DIZFD4sK.js";
|
||||
import "./SectionNumber-Cptefv18.js";
|
||||
const l = ({ title: r, subtitle: a, cards: i }) => {
|
||||
const p = {
|
||||
"@context": "https://schema.org",
|
||||
"@type": "HowTo",
|
||||
name: r,
|
||||
description: a,
|
||||
step: i.map((o, t) => ({
|
||||
"@type": "HowToStep",
|
||||
position: t + 1,
|
||||
name: o.text,
|
||||
text: o.text,
|
||||
})),
|
||||
};
|
||||
return e.jsxs(e.Fragment, {
|
||||
children: [
|
||||
e.jsx("script", {
|
||||
type: "application/ld+json",
|
||||
dangerouslySetInnerHTML: { __html: JSON.stringify(p) },
|
||||
}),
|
||||
e.jsx("section", {
|
||||
className:
|
||||
"bg-transparent py-[var(--spacing-scale-032)] px-[var(--spacing-scale-020)] sm:py-[var(--spacing-scale-048)] sm:px-[var(--spacing-scale-032)] lg:py-[var(--spacing-scale-064)] lg:px-[var(--spacing-scale-064)] xl:py-[var(--spacing-scale-076)] xl:px-[var(--spacing-scale-064)]",
|
||||
children: e.jsx("div", {
|
||||
className: "max-w-[var(--spacing-measures-max-width-lg)] mx-auto",
|
||||
children: e.jsxs("div", {
|
||||
className:
|
||||
"grid grid-cols-1 gap-y-[var(--spacing-scale-032)] lg:gap-y-[var(--spacing-scale-056)]",
|
||||
children: [
|
||||
e.jsx("div", {
|
||||
children: e.jsx(u, {
|
||||
title: r,
|
||||
subtitle: a,
|
||||
titleLg: "How CommunityRule helps",
|
||||
}),
|
||||
}),
|
||||
e.jsx("div", {
|
||||
className:
|
||||
"grid grid-cols-1 gap-y-[var(--spacing-scale-024)] lg:grid-cols-3 lg:gap-[var(--spacing-scale-024)]",
|
||||
children: i.map((o, t) =>
|
||||
e.jsx(
|
||||
m,
|
||||
{
|
||||
number: t + 1,
|
||||
text: o.text,
|
||||
iconShape: o.iconShape,
|
||||
iconColor: o.iconColor,
|
||||
},
|
||||
t,
|
||||
),
|
||||
),
|
||||
}),
|
||||
e.jsxs("div", {
|
||||
className: "text-center sm:text-left lg:text-center",
|
||||
children: [
|
||||
e.jsx("div", {
|
||||
className: "block lg:hidden",
|
||||
children: e.jsx(c, {
|
||||
variant: "default",
|
||||
size: "large",
|
||||
children: "Create CommunityRule",
|
||||
}),
|
||||
}),
|
||||
e.jsx("div", {
|
||||
className: "hidden lg:block",
|
||||
children: e.jsx(c, {
|
||||
variant: "outlined",
|
||||
size: "large",
|
||||
children: "See how it works",
|
||||
}),
|
||||
}),
|
||||
],
|
||||
}),
|
||||
],
|
||||
}),
|
||||
}),
|
||||
}),
|
||||
],
|
||||
});
|
||||
};
|
||||
l.__docgenInfo = { description: "", methods: [], displayName: "NumberedCards" };
|
||||
const C = {
|
||||
title: "Components/NumberedCards",
|
||||
component: l,
|
||||
parameters: {
|
||||
layout: "fullscreen",
|
||||
docs: {
|
||||
description: {
|
||||
component:
|
||||
"A component system for visually communicating multi-step workflows, processes, or value propositions. The component's modular design with NumberedCard and SectionNumber sub-components makes it ideal for explaining any sequential process while maintaining brand consistency and accessibility standards across the design system.",
|
||||
},
|
||||
},
|
||||
},
|
||||
argTypes: {
|
||||
title: {
|
||||
control: { type: "text" },
|
||||
description: "The main title for the section",
|
||||
},
|
||||
subtitle: {
|
||||
control: { type: "text" },
|
||||
description: "The subtitle text below the main title",
|
||||
},
|
||||
cards: {
|
||||
control: { type: "object" },
|
||||
description:
|
||||
"Array of card objects with text, iconShape, and iconColor properties",
|
||||
},
|
||||
},
|
||||
tags: ["autodocs"],
|
||||
},
|
||||
n = {
|
||||
args: {
|
||||
title: "How CommunityRule works",
|
||||
subtitle: "Here's a quick overview of the process, from start to finish.",
|
||||
cards: [
|
||||
{
|
||||
text: "Document how your community makes decisions",
|
||||
iconShape: "blob",
|
||||
iconColor: "green",
|
||||
},
|
||||
{
|
||||
text: "Build an operating manual for a successful community",
|
||||
iconShape: "gear",
|
||||
iconColor: "purple",
|
||||
},
|
||||
{
|
||||
text: "Get a link to your manual for your group to review and evolve",
|
||||
iconShape: "star",
|
||||
iconColor: "orange",
|
||||
},
|
||||
],
|
||||
},
|
||||
},
|
||||
s = {
|
||||
args: {
|
||||
title: "Our Process",
|
||||
subtitle: "Follow these simple steps to get started with your project.",
|
||||
cards: [
|
||||
{
|
||||
text: "Define your project requirements and goals",
|
||||
iconShape: "blob",
|
||||
iconColor: "green",
|
||||
},
|
||||
{
|
||||
text: "Collaborate with our team to create the perfect solution",
|
||||
iconShape: "gear",
|
||||
iconColor: "purple",
|
||||
},
|
||||
{
|
||||
text: "Launch and iterate based on user feedback",
|
||||
iconShape: "star",
|
||||
iconColor: "orange",
|
||||
},
|
||||
{
|
||||
text: "Scale and optimize for continued success",
|
||||
iconShape: "blob",
|
||||
iconColor: "blue",
|
||||
},
|
||||
],
|
||||
},
|
||||
parameters: {
|
||||
docs: {
|
||||
description: {
|
||||
story:
|
||||
"Example with custom content and four cards to show flexibility.",
|
||||
},
|
||||
},
|
||||
},
|
||||
};
|
||||
n.parameters = {
|
||||
...n.parameters,
|
||||
docs: {
|
||||
...n.parameters?.docs,
|
||||
source: {
|
||||
originalSource: `{
|
||||
args: {
|
||||
title: "How CommunityRule works",
|
||||
subtitle: "Here's a quick overview of the process, from start to finish.",
|
||||
@@ -16,7 +196,17 @@ import{j as e}from"./jsx-runtime-C_nHp4yK.js";import{N as m}from"./NumberedCard-
|
||||
iconColor: "orange"
|
||||
}]
|
||||
}
|
||||
}`,...n.parameters?.docs?.source}}};s.parameters={...s.parameters,docs:{...s.parameters?.docs,source:{originalSource:`{
|
||||
}`,
|
||||
...n.parameters?.docs?.source,
|
||||
},
|
||||
},
|
||||
};
|
||||
s.parameters = {
|
||||
...s.parameters,
|
||||
docs: {
|
||||
...s.parameters?.docs,
|
||||
source: {
|
||||
originalSource: `{
|
||||
args: {
|
||||
title: "Our Process",
|
||||
subtitle: "Follow these simple steps to get started with your project.",
|
||||
@@ -45,4 +235,15 @@ import{j as e}from"./jsx-runtime-C_nHp4yK.js";import{N as m}from"./NumberedCard-
|
||||
}
|
||||
}
|
||||
}
|
||||
}`,...s.parameters?.docs?.source}}};const v=["Default","CustomContent"];export{s as CustomContent,n as Default,v as __namedExportsOrder,C as default};
|
||||
}`,
|
||||
...s.parameters?.docs?.source,
|
||||
},
|
||||
},
|
||||
};
|
||||
const v = ["Default", "CustomContent"];
|
||||
export {
|
||||
s as CustomContent,
|
||||
n as Default,
|
||||
v as __namedExportsOrder,
|
||||
C as default,
|
||||
};
|
||||
|
||||
@@ -1 +1,31 @@
|
||||
import{j as e}from"./jsx-runtime-C_nHp4yK.js";const a=({title:l,subtitle:t,titleLg:x})=>e.jsxs("div",{className:"flex flex-col gap-1 w-full lg:flex-row lg:justify-between lg:items-start xl:gap-[var(--spacing-scale-024)]",children:[e.jsx("div",{className:"lg:w-[369px] lg:h-[120px] lg:flex lg:items-center xl:w-[452px] xl:h-[156px] xl:flex xl:items-center",children:e.jsxs("h2",{className:"font-bricolage-grotesque font-bold text-[28px] leading-[36px] sm:text-[32px] sm:leading-[40px] lg:text-[32px] lg:leading-[40px] lg:w-[369px] lg:pr-24 xl:text-[40px] xl:leading-[52px] xl:w-[452px] xl:pr-24 text-[var(--color-content-default-primary)]",children:[e.jsx("span",{className:"block lg:hidden",children:l}),e.jsx("span",{className:"hidden lg:block",children:x||l})]})}),e.jsx("div",{className:"lg:w-[928px] lg:h-[120px] lg:flex lg:items-center lg:justify-end xl:w-[763px] xl:h-[156px] xl:flex xl:items-center xl:justify-end",children:e.jsx("p",{className:"font-inter font-normal text-[18px] leading-[130%] sm:text-[18px] sm:leading-[32px] lg:text-[24px] lg:leading-[32px] xl:text-[32px] xl:leading-[40px] xl:text-right text-[#484848] sm:text-[var(--color-content-default-tertiary)] lg:text-[var(--color-content-default-tertiary)] xl:text-[var(--color-content-default-tertiary)] tracking-[0px]",children:t})})]});a.__docgenInfo={description:"",methods:[],displayName:"SectionHeader"};export{a as S};
|
||||
import { j as e } from "./jsx-runtime-C_nHp4yK.js";
|
||||
const a = ({ title: l, subtitle: t, titleLg: x }) =>
|
||||
e.jsxs("div", {
|
||||
className:
|
||||
"flex flex-col gap-1 w-full lg:flex-row lg:justify-between lg:items-start xl:gap-[var(--spacing-scale-024)]",
|
||||
children: [
|
||||
e.jsx("div", {
|
||||
className:
|
||||
"lg:w-[369px] lg:h-[120px] lg:flex lg:items-center xl:w-[452px] xl:h-[156px] xl:flex xl:items-center",
|
||||
children: e.jsxs("h2", {
|
||||
className:
|
||||
"font-bricolage-grotesque font-bold text-[28px] leading-[36px] sm:text-[32px] sm:leading-[40px] lg:text-[32px] lg:leading-[40px] lg:w-[369px] lg:pr-24 xl:text-[40px] xl:leading-[52px] xl:w-[452px] xl:pr-24 text-[var(--color-content-default-primary)]",
|
||||
children: [
|
||||
e.jsx("span", { className: "block lg:hidden", children: l }),
|
||||
e.jsx("span", { className: "hidden lg:block", children: x || l }),
|
||||
],
|
||||
}),
|
||||
}),
|
||||
e.jsx("div", {
|
||||
className:
|
||||
"lg:w-[928px] lg:h-[120px] lg:flex lg:items-center lg:justify-end xl:w-[763px] xl:h-[156px] xl:flex xl:items-center xl:justify-end",
|
||||
children: e.jsx("p", {
|
||||
className:
|
||||
"font-inter font-normal text-[18px] leading-[130%] sm:text-[18px] sm:leading-[32px] lg:text-[24px] lg:leading-[32px] xl:text-[32px] xl:leading-[40px] xl:text-right text-[#484848] sm:text-[var(--color-content-default-tertiary)] lg:text-[var(--color-content-default-tertiary)] xl:text-[var(--color-content-default-tertiary)] tracking-[0px]",
|
||||
children: t,
|
||||
}),
|
||||
}),
|
||||
],
|
||||
});
|
||||
a.__docgenInfo = { description: "", methods: [], displayName: "SectionHeader" };
|
||||
export { a as S };
|
||||
|
||||
@@ -1,10 +1,128 @@
|
||||
import{S as n}from"./SectionHeader-CadpOP1T.js";import"./jsx-runtime-C_nHp4yK.js";import"./iframe-D_aMTKb2.js";import"./preload-helper-DIZFD4sK.js";const p={title:"Components/SectionHeader",component:n,parameters:{layout:"centered",docs:{description:{component:"A section header component that displays a title and subtitle with responsive typography and layout. Supports different title text for large breakpoints and maintains consistent spacing across all screen sizes."}}},argTypes:{title:{control:{type:"text"},description:"The main title text (used for xsm and sm breakpoints)"},subtitle:{control:{type:"text"},description:"The subtitle text below the main title"},titleLg:{control:{type:"text"},description:"The title text for lg and xl breakpoints (optional, falls back to title)"}},tags:["autodocs"]},e={args:{title:"How CommunityRule works",subtitle:"Here's a quick overview of the process, from start to finish.",titleLg:"How CommunityRule helps"}},t={args:{title:"Our Mission",subtitle:"We're dedicated to helping communities thrive through better decision-making processes and transparent governance structures.",titleLg:"Building Better Communities"},parameters:{docs:{description:{story:"Example with custom content to show the flexibility of the component."}}}},s={args:{title:"Complex Process",subtitle:"This is a much longer subtitle that demonstrates how the component handles extended text content across different breakpoints and layout configurations.",titleLg:"Complex Process Simplified"},parameters:{docs:{description:{story:"Demonstrates how the component handles longer subtitle text across different breakpoints."}}}},o={args:{title:"Responsive Design",subtitle:"Test the responsive behavior by resizing your browser window or using the viewport controls in Storybook.",titleLg:"Responsive Design Test"},parameters:{docs:{description:{story:"Test the responsive behavior by resizing your browser window or using the viewport controls in Storybook."}}}},r={args:{title:"Simple Header",subtitle:"This example doesn't specify a titleLg prop, so it will use the same title text across all breakpoints."},parameters:{docs:{description:{story:"Shows the component without a titleLg prop, demonstrating the fallback behavior."}}}};e.parameters={...e.parameters,docs:{...e.parameters?.docs,source:{originalSource:`{
|
||||
import { S as n } from "./SectionHeader-CadpOP1T.js";
|
||||
import "./jsx-runtime-C_nHp4yK.js";
|
||||
import "./iframe-D_aMTKb2.js";
|
||||
import "./preload-helper-DIZFD4sK.js";
|
||||
const p = {
|
||||
title: "Components/SectionHeader",
|
||||
component: n,
|
||||
parameters: {
|
||||
layout: "centered",
|
||||
docs: {
|
||||
description: {
|
||||
component:
|
||||
"A section header component that displays a title and subtitle with responsive typography and layout. Supports different title text for large breakpoints and maintains consistent spacing across all screen sizes.",
|
||||
},
|
||||
},
|
||||
},
|
||||
argTypes: {
|
||||
title: {
|
||||
control: { type: "text" },
|
||||
description: "The main title text (used for xsm and sm breakpoints)",
|
||||
},
|
||||
subtitle: {
|
||||
control: { type: "text" },
|
||||
description: "The subtitle text below the main title",
|
||||
},
|
||||
titleLg: {
|
||||
control: { type: "text" },
|
||||
description:
|
||||
"The title text for lg and xl breakpoints (optional, falls back to title)",
|
||||
},
|
||||
},
|
||||
tags: ["autodocs"],
|
||||
},
|
||||
e = {
|
||||
args: {
|
||||
title: "How CommunityRule works",
|
||||
subtitle: "Here's a quick overview of the process, from start to finish.",
|
||||
titleLg: "How CommunityRule helps",
|
||||
},
|
||||
},
|
||||
t = {
|
||||
args: {
|
||||
title: "Our Mission",
|
||||
subtitle:
|
||||
"We're dedicated to helping communities thrive through better decision-making processes and transparent governance structures.",
|
||||
titleLg: "Building Better Communities",
|
||||
},
|
||||
parameters: {
|
||||
docs: {
|
||||
description: {
|
||||
story:
|
||||
"Example with custom content to show the flexibility of the component.",
|
||||
},
|
||||
},
|
||||
},
|
||||
},
|
||||
s = {
|
||||
args: {
|
||||
title: "Complex Process",
|
||||
subtitle:
|
||||
"This is a much longer subtitle that demonstrates how the component handles extended text content across different breakpoints and layout configurations.",
|
||||
titleLg: "Complex Process Simplified",
|
||||
},
|
||||
parameters: {
|
||||
docs: {
|
||||
description: {
|
||||
story:
|
||||
"Demonstrates how the component handles longer subtitle text across different breakpoints.",
|
||||
},
|
||||
},
|
||||
},
|
||||
},
|
||||
o = {
|
||||
args: {
|
||||
title: "Responsive Design",
|
||||
subtitle:
|
||||
"Test the responsive behavior by resizing your browser window or using the viewport controls in Storybook.",
|
||||
titleLg: "Responsive Design Test",
|
||||
},
|
||||
parameters: {
|
||||
docs: {
|
||||
description: {
|
||||
story:
|
||||
"Test the responsive behavior by resizing your browser window or using the viewport controls in Storybook.",
|
||||
},
|
||||
},
|
||||
},
|
||||
},
|
||||
r = {
|
||||
args: {
|
||||
title: "Simple Header",
|
||||
subtitle:
|
||||
"This example doesn't specify a titleLg prop, so it will use the same title text across all breakpoints.",
|
||||
},
|
||||
parameters: {
|
||||
docs: {
|
||||
description: {
|
||||
story:
|
||||
"Shows the component without a titleLg prop, demonstrating the fallback behavior.",
|
||||
},
|
||||
},
|
||||
},
|
||||
};
|
||||
e.parameters = {
|
||||
...e.parameters,
|
||||
docs: {
|
||||
...e.parameters?.docs,
|
||||
source: {
|
||||
originalSource: `{
|
||||
args: {
|
||||
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:`{
|
||||
}`,
|
||||
...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.",
|
||||
@@ -17,7 +135,17 @@ import{S as n}from"./SectionHeader-CadpOP1T.js";import"./jsx-runtime-C_nHp4yK.js
|
||||
}
|
||||
}
|
||||
}
|
||||
}`,...t.parameters?.docs?.source}}};s.parameters={...s.parameters,docs:{...s.parameters?.docs,source:{originalSource:`{
|
||||
}`,
|
||||
...t.parameters?.docs?.source,
|
||||
},
|
||||
},
|
||||
};
|
||||
s.parameters = {
|
||||
...s.parameters,
|
||||
docs: {
|
||||
...s.parameters?.docs,
|
||||
source: {
|
||||
originalSource: `{
|
||||
args: {
|
||||
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.",
|
||||
@@ -30,7 +158,17 @@ import{S as n}from"./SectionHeader-CadpOP1T.js";import"./jsx-runtime-C_nHp4yK.js
|
||||
}
|
||||
}
|
||||
}
|
||||
}`,...s.parameters?.docs?.source}}};o.parameters={...o.parameters,docs:{...o.parameters?.docs,source:{originalSource:`{
|
||||
}`,
|
||||
...s.parameters?.docs?.source,
|
||||
},
|
||||
},
|
||||
};
|
||||
o.parameters = {
|
||||
...o.parameters,
|
||||
docs: {
|
||||
...o.parameters?.docs,
|
||||
source: {
|
||||
originalSource: `{
|
||||
args: {
|
||||
title: "Responsive Design",
|
||||
subtitle: "Test the responsive behavior by resizing your browser window or using the viewport controls in Storybook.",
|
||||
@@ -43,7 +181,17 @@ import{S as n}from"./SectionHeader-CadpOP1T.js";import"./jsx-runtime-C_nHp4yK.js
|
||||
}
|
||||
}
|
||||
}
|
||||
}`,...o.parameters?.docs?.source}}};r.parameters={...r.parameters,docs:{...r.parameters?.docs,source:{originalSource:`{
|
||||
}`,
|
||||
...o.parameters?.docs?.source,
|
||||
},
|
||||
},
|
||||
};
|
||||
r.parameters = {
|
||||
...r.parameters,
|
||||
docs: {
|
||||
...r.parameters?.docs,
|
||||
source: {
|
||||
originalSource: `{
|
||||
args: {
|
||||
title: "Simple Header",
|
||||
subtitle: "This example doesn't specify a titleLg prop, so it will use the same title text across all breakpoints."
|
||||
@@ -55,4 +203,24 @@ import{S as n}from"./SectionHeader-CadpOP1T.js";import"./jsx-runtime-C_nHp4yK.js
|
||||
}
|
||||
}
|
||||
}
|
||||
}`,...r.parameters?.docs?.source}}};const m=["Default","CustomContent","LongSubtitle","ResponsiveTest","WithoutTitleLg"];export{t as CustomContent,e as Default,s as LongSubtitle,o as ResponsiveTest,r as WithoutTitleLg,m as __namedExportsOrder,p as default};
|
||||
}`,
|
||||
...r.parameters?.docs?.source,
|
||||
},
|
||||
},
|
||||
};
|
||||
const m = [
|
||||
"Default",
|
||||
"CustomContent",
|
||||
"LongSubtitle",
|
||||
"ResponsiveTest",
|
||||
"WithoutTitleLg",
|
||||
];
|
||||
export {
|
||||
t as CustomContent,
|
||||
e as Default,
|
||||
s as LongSubtitle,
|
||||
o as ResponsiveTest,
|
||||
r as WithoutTitleLg,
|
||||
m as __namedExportsOrder,
|
||||
p as default,
|
||||
};
|
||||
|
||||
@@ -1 +1,36 @@
|
||||
import{j as e}from"./jsx-runtime-C_nHp4yK.js";const a=({number:t})=>{const s=r=>{switch(r){case 1:return"/assets/SectionNumber_1.png";case 2:return"/assets/SectionNumber_2.png";case 3:return"/assets/SectionNumber_3.png";default:return"/assets/SectionNumber_1.png"}};return e.jsxs("div",{className:"relative size-[40px] overflow-visible -rotate-[15deg]",children:[e.jsx("img",{src:s(t),alt:`Section ${t}`,className:"absolute left-1/2 top-1/2 -translate-x-1/2 -translate-y-1/2 size-[47.37px] max-w-none"}),e.jsx("div",{className:"absolute inset-0 flex items-center justify-center",children:e.jsx("span",{className:"text-[var(--font-size-body-small)] font-[var(--font-weight-bold)] text-[var(--color-content-inverse-primary)]",children:t})})]})};a.__docgenInfo={description:"",methods:[],displayName:"SectionNumber"};export{a as S};
|
||||
import { j as e } from "./jsx-runtime-C_nHp4yK.js";
|
||||
const a = ({ number: t }) => {
|
||||
const s = (r) => {
|
||||
switch (r) {
|
||||
case 1:
|
||||
return "/assets/SectionNumber_1.png";
|
||||
case 2:
|
||||
return "/assets/SectionNumber_2.png";
|
||||
case 3:
|
||||
return "/assets/SectionNumber_3.png";
|
||||
default:
|
||||
return "/assets/SectionNumber_1.png";
|
||||
}
|
||||
};
|
||||
return e.jsxs("div", {
|
||||
className: "relative size-[40px] overflow-visible -rotate-[15deg]",
|
||||
children: [
|
||||
e.jsx("img", {
|
||||
src: s(t),
|
||||
alt: `Section ${t}`,
|
||||
className:
|
||||
"absolute left-1/2 top-1/2 -translate-x-1/2 -translate-y-1/2 size-[47.37px] max-w-none",
|
||||
}),
|
||||
e.jsx("div", {
|
||||
className: "absolute inset-0 flex items-center justify-center",
|
||||
children: e.jsx("span", {
|
||||
className:
|
||||
"text-[var(--font-size-body-small)] font-[var(--font-weight-bold)] text-[var(--color-content-inverse-primary)]",
|
||||
children: t,
|
||||
}),
|
||||
}),
|
||||
],
|
||||
});
|
||||
};
|
||||
a.__docgenInfo = { description: "", methods: [], displayName: "SectionNumber" };
|
||||
export { a as S };
|
||||
|
||||
@@ -1,16 +1,119 @@
|
||||
import{j as e}from"./jsx-runtime-C_nHp4yK.js";import{S as r}from"./SectionNumber-Cptefv18.js";import"./iframe-D_aMTKb2.js";import"./preload-helper-DIZFD4sK.js";const u={title:"Components/SectionNumber",component:r,parameters:{layout:"centered",docs:{description:{component:"A numbered icon component that displays a number overlaid on a PNG background image. The component uses different PNG images for numbers 1, 2, and 3, with the image extending beyond the 40px container size."}}},argTypes:{number:{control:{type:"number",min:1,max:3},description:"The number to display (1, 2, or 3)"}},tags:["autodocs"]},n={args:{number:1}},s={args:{number:2}},o={args:{number:3}},a={render:()=>e.jsxs("div",{className:"flex space-x-4",children:[e.jsx(r,{number:1}),e.jsx(r,{number:2}),e.jsx(r,{number:3})]}),parameters:{docs:{description:{story:"Shows all three numbered icons side by side to demonstrate the different PNG backgrounds."}}}},t={render:()=>e.jsx("div",{className:"bg-gray-100 p-8 rounded-lg",children:e.jsxs("div",{className:"flex space-x-4",children:[e.jsx(r,{number:1}),e.jsx(r,{number:2}),e.jsx(r,{number:3})]})}),parameters:{docs:{description:{story:"Shows the numbered icons on a background to demonstrate how the PNG images extend beyond the container."}}}};n.parameters={...n.parameters,docs:{...n.parameters?.docs,source:{originalSource:`{
|
||||
import { j as e } from "./jsx-runtime-C_nHp4yK.js";
|
||||
import { S as r } from "./SectionNumber-Cptefv18.js";
|
||||
import "./iframe-D_aMTKb2.js";
|
||||
import "./preload-helper-DIZFD4sK.js";
|
||||
const u = {
|
||||
title: "Components/SectionNumber",
|
||||
component: r,
|
||||
parameters: {
|
||||
layout: "centered",
|
||||
docs: {
|
||||
description: {
|
||||
component:
|
||||
"A numbered icon component that displays a number overlaid on a PNG background image. The component uses different PNG images for numbers 1, 2, and 3, with the image extending beyond the 40px container size.",
|
||||
},
|
||||
},
|
||||
},
|
||||
argTypes: {
|
||||
number: {
|
||||
control: { type: "number", min: 1, max: 3 },
|
||||
description: "The number to display (1, 2, or 3)",
|
||||
},
|
||||
},
|
||||
tags: ["autodocs"],
|
||||
},
|
||||
n = { args: { number: 1 } },
|
||||
s = { args: { number: 2 } },
|
||||
o = { args: { number: 3 } },
|
||||
a = {
|
||||
render: () =>
|
||||
e.jsxs("div", {
|
||||
className: "flex space-x-4",
|
||||
children: [
|
||||
e.jsx(r, { number: 1 }),
|
||||
e.jsx(r, { number: 2 }),
|
||||
e.jsx(r, { number: 3 }),
|
||||
],
|
||||
}),
|
||||
parameters: {
|
||||
docs: {
|
||||
description: {
|
||||
story:
|
||||
"Shows all three numbered icons side by side to demonstrate the different PNG backgrounds.",
|
||||
},
|
||||
},
|
||||
},
|
||||
},
|
||||
t = {
|
||||
render: () =>
|
||||
e.jsx("div", {
|
||||
className: "bg-gray-100 p-8 rounded-lg",
|
||||
children: e.jsxs("div", {
|
||||
className: "flex space-x-4",
|
||||
children: [
|
||||
e.jsx(r, { number: 1 }),
|
||||
e.jsx(r, { number: 2 }),
|
||||
e.jsx(r, { number: 3 }),
|
||||
],
|
||||
}),
|
||||
}),
|
||||
parameters: {
|
||||
docs: {
|
||||
description: {
|
||||
story:
|
||||
"Shows the numbered icons on a background to demonstrate how the PNG images extend beyond the container.",
|
||||
},
|
||||
},
|
||||
},
|
||||
};
|
||||
n.parameters = {
|
||||
...n.parameters,
|
||||
docs: {
|
||||
...n.parameters?.docs,
|
||||
source: {
|
||||
originalSource: `{
|
||||
args: {
|
||||
number: 1
|
||||
}
|
||||
}`,...n.parameters?.docs?.source}}};s.parameters={...s.parameters,docs:{...s.parameters?.docs,source:{originalSource:`{
|
||||
}`,
|
||||
...n.parameters?.docs?.source,
|
||||
},
|
||||
},
|
||||
};
|
||||
s.parameters = {
|
||||
...s.parameters,
|
||||
docs: {
|
||||
...s.parameters?.docs,
|
||||
source: {
|
||||
originalSource: `{
|
||||
args: {
|
||||
number: 2
|
||||
}
|
||||
}`,...s.parameters?.docs?.source}}};o.parameters={...o.parameters,docs:{...o.parameters?.docs,source:{originalSource:`{
|
||||
}`,
|
||||
...s.parameters?.docs?.source,
|
||||
},
|
||||
},
|
||||
};
|
||||
o.parameters = {
|
||||
...o.parameters,
|
||||
docs: {
|
||||
...o.parameters?.docs,
|
||||
source: {
|
||||
originalSource: `{
|
||||
args: {
|
||||
number: 3
|
||||
}
|
||||
}`,...o.parameters?.docs?.source}}};a.parameters={...a.parameters,docs:{...a.parameters?.docs,source:{originalSource:`{
|
||||
}`,
|
||||
...o.parameters?.docs?.source,
|
||||
},
|
||||
},
|
||||
};
|
||||
a.parameters = {
|
||||
...a.parameters,
|
||||
docs: {
|
||||
...a.parameters?.docs,
|
||||
source: {
|
||||
originalSource: `{
|
||||
render: () => <div className="flex space-x-4">
|
||||
<SectionNumber number={1} />
|
||||
<SectionNumber number={2} />
|
||||
@@ -23,7 +126,17 @@ import{j as e}from"./jsx-runtime-C_nHp4yK.js";import{S as r}from"./SectionNumber
|
||||
}
|
||||
}
|
||||
}
|
||||
}`,...a.parameters?.docs?.source}}};t.parameters={...t.parameters,docs:{...t.parameters?.docs,source:{originalSource:`{
|
||||
}`,
|
||||
...a.parameters?.docs?.source,
|
||||
},
|
||||
},
|
||||
};
|
||||
t.parameters = {
|
||||
...t.parameters,
|
||||
docs: {
|
||||
...t.parameters?.docs,
|
||||
source: {
|
||||
originalSource: `{
|
||||
render: () => <div className="bg-gray-100 p-8 rounded-lg">
|
||||
<div className="flex space-x-4">
|
||||
<SectionNumber number={1} />
|
||||
@@ -38,4 +151,24 @@ import{j as e}from"./jsx-runtime-C_nHp4yK.js";import{S as r}from"./SectionNumber
|
||||
}
|
||||
}
|
||||
}
|
||||
}`,...t.parameters?.docs?.source}}};const b=["NumberOne","NumberTwo","NumberThree","AllNumbers","WithBackground"];export{a as AllNumbers,n as NumberOne,o as NumberThree,s as NumberTwo,t as WithBackground,b as __namedExportsOrder,u as default};
|
||||
}`,
|
||||
...t.parameters?.docs?.source,
|
||||
},
|
||||
},
|
||||
};
|
||||
const b = [
|
||||
"NumberOne",
|
||||
"NumberTwo",
|
||||
"NumberThree",
|
||||
"AllNumbers",
|
||||
"WithBackground",
|
||||
];
|
||||
export {
|
||||
a as AllNumbers,
|
||||
n as NumberOne,
|
||||
o as NumberThree,
|
||||
s as NumberTwo,
|
||||
t as WithBackground,
|
||||
b as __namedExportsOrder,
|
||||
u as default,
|
||||
};
|
||||
|
||||
+42433
-18
File diff suppressed because one or more lines are too long
+2800
-1
File diff suppressed because one or more lines are too long
+74559
-300
File diff suppressed because one or more lines are too long
@@ -1 +1,26 @@
|
||||
import{R as e}from"./iframe-D_aMTKb2.js";import"./preload-helper-DIZFD4sK.js";const o={},c=e.createContext(o);function u(n){const t=e.useContext(c);return e.useMemo(function(){return typeof n=="function"?n(t):{...t,...n}},[t,n])}function r(n){let t;return n.disableParentContext?t=typeof n.components=="function"?n.components(o):n.components||o:t=u(n.components),e.createElement(c.Provider,{value:t},n.children)}export{r as MDXProvider,u as useMDXComponents};
|
||||
import { R as e } from "./iframe-D_aMTKb2.js";
|
||||
import "./preload-helper-DIZFD4sK.js";
|
||||
const o = {},
|
||||
c = e.createContext(o);
|
||||
function u(n) {
|
||||
const t = e.useContext(c);
|
||||
return e.useMemo(
|
||||
function () {
|
||||
return typeof n == "function" ? n(t) : { ...t, ...n };
|
||||
},
|
||||
[t, n],
|
||||
);
|
||||
}
|
||||
function r(n) {
|
||||
let t;
|
||||
return (
|
||||
n.disableParentContext
|
||||
? (t =
|
||||
typeof n.components == "function"
|
||||
? n.components(o)
|
||||
: n.components || o)
|
||||
: (t = u(n.components)),
|
||||
e.createElement(c.Provider, { value: t }, n.children)
|
||||
);
|
||||
}
|
||||
export { r as MDXProvider, u as useMDXComponents };
|
||||
|
||||
@@ -1 +1,3 @@
|
||||
import{b as r}from"./iframe-D_aMTKb2.js";var s=r();export{s as j};
|
||||
import { b as r } from "./iframe-D_aMTKb2.js";
|
||||
var s = r();
|
||||
export { s as j };
|
||||
|
||||
File diff suppressed because one or more lines are too long
@@ -1 +1,58 @@
|
||||
const p="modulepreload",v=function(l){return"/CommunityRuleStorybook/"+l},u={},E=function(d,c,y){let i=Promise.resolve();if(c&&c.length>0){let m=function(e){return Promise.all(e.map(o=>Promise.resolve(o).then(s=>({status:"fulfilled",value:s}),s=>({status:"rejected",reason:s}))))};document.getElementsByTagName("link");const r=document.querySelector("meta[property=csp-nonce]"),t=r?.nonce||r?.getAttribute("nonce");i=m(c.map(e=>{if(e=v(e),e in u)return;u[e]=!0;const o=e.endsWith(".css"),s=o?'[rel="stylesheet"]':"";if(document.querySelector(`link[href="${e}"]${s}`))return;const n=document.createElement("link");if(n.rel=o?"stylesheet":p,o||(n.as="script"),n.crossOrigin="",n.href=e,t&&n.setAttribute("nonce",t),document.head.appendChild(n),o)return new Promise((f,h)=>{n.addEventListener("load",f),n.addEventListener("error",()=>h(new Error(`Unable to preload CSS for ${e}`)))})}))}function a(r){const t=new Event("vite:preloadError",{cancelable:!0});if(t.payload=r,window.dispatchEvent(t),!t.defaultPrevented)throw r}return i.then(r=>{for(const t of r||[])t.status==="rejected"&&a(t.reason);return d().catch(a)})};export{E as _};
|
||||
const p = "modulepreload",
|
||||
v = function (l) {
|
||||
return "/CommunityRuleStorybook/" + l;
|
||||
},
|
||||
u = {},
|
||||
E = function (d, c, y) {
|
||||
let i = Promise.resolve();
|
||||
if (c && c.length > 0) {
|
||||
let m = function (e) {
|
||||
return Promise.all(
|
||||
e.map((o) =>
|
||||
Promise.resolve(o).then(
|
||||
(s) => ({ status: "fulfilled", value: s }),
|
||||
(s) => ({ status: "rejected", reason: s }),
|
||||
),
|
||||
),
|
||||
);
|
||||
};
|
||||
document.getElementsByTagName("link");
|
||||
const r = document.querySelector("meta[property=csp-nonce]"),
|
||||
t = r?.nonce || r?.getAttribute("nonce");
|
||||
i = m(
|
||||
c.map((e) => {
|
||||
if (((e = v(e)), e in u)) return;
|
||||
u[e] = !0;
|
||||
const o = e.endsWith(".css"),
|
||||
s = o ? '[rel="stylesheet"]' : "";
|
||||
if (document.querySelector(`link[href="${e}"]${s}`)) return;
|
||||
const n = document.createElement("link");
|
||||
if (
|
||||
((n.rel = o ? "stylesheet" : p),
|
||||
o || (n.as = "script"),
|
||||
(n.crossOrigin = ""),
|
||||
(n.href = e),
|
||||
t && n.setAttribute("nonce", t),
|
||||
document.head.appendChild(n),
|
||||
o)
|
||||
)
|
||||
return new Promise((f, h) => {
|
||||
(n.addEventListener("load", f),
|
||||
n.addEventListener("error", () =>
|
||||
h(new Error(`Unable to preload CSS for ${e}`)),
|
||||
));
|
||||
});
|
||||
}),
|
||||
);
|
||||
}
|
||||
function a(r) {
|
||||
const t = new Event("vite:preloadError", { cancelable: !0 });
|
||||
if (((t.payload = r), window.dispatchEvent(t), !t.defaultPrevented))
|
||||
throw r;
|
||||
}
|
||||
return i.then((r) => {
|
||||
for (const t of r || []) t.status === "rejected" && a(t.reason);
|
||||
return d().catch(a);
|
||||
});
|
||||
};
|
||||
export { E as _ };
|
||||
|
||||
Vendored
+11500
-11
File diff suppressed because one or more lines are too long
Reference in New Issue
Block a user