adilallo
204 lines
14 KiB
JavaScript
204 lines
14 KiB
JavaScript
import{j as e}from"./jsx-runtime-C_nHp4yK.js";import{L as s}from"./Logo-DM7O8ATg.js";import"./iframe-D_aMTKb2.js";import"./preload-helper-DIZFD4sK.js";const h={title:"Components/Logo",component:s,parameters:{layout:"centered",docs:{description:{component:"The CommunityRule logo component with multiple size variants for different contexts (header, footer, home header). Can display with or without text and adapts colors based on context."}}},argTypes:{size:{control:{type:"select"},options:["default","homeHeaderXsmall","homeHeaderSm","homeHeaderMd","homeHeaderLg","homeHeaderXl","header","headerMd","headerLg","headerXl","footer","footerLg"],description:"The size variant of the logo"},showText:{control:{type:"boolean"},description:"Whether to show the text portion of the logo"}},tags:["autodocs"]},t={args:{size:"default",showText:!0}},n={args:{showText:!0},render:a=>e.jsxs("div",{className:"space-y-6",children:[e.jsxs("div",{children:[e.jsx("h3",{className:"text-white font-semibold mb-3",children:"Default Sizes"}),e.jsxs("div",{className:"space-x-4",children:[e.jsx(s,{...a,size:"default"}),e.jsx(s,{...a,size:"header"}),e.jsx(s,{...a,size:"footer"})]})]}),e.jsxs("div",{children:[e.jsx("h3",{className:"text-white font-semibold mb-3",children:"Header Sizes"}),e.jsxs("div",{className:"space-x-4",children:[e.jsx(s,{...a,size:"header"}),e.jsx(s,{...a,size:"headerMd"}),e.jsx(s,{...a,size:"headerLg"}),e.jsx(s,{...a,size:"headerXl"})]})]}),e.jsxs("div",{children:[e.jsx("h3",{className:"text-white font-semibold mb-3",children:"Home Header Sizes"}),e.jsxs("div",{className:"space-x-4",children:[e.jsx(s,{...a,size:"homeHeaderXsmall"}),e.jsx(s,{...a,size:"homeHeaderSm"}),e.jsx(s,{...a,size:"homeHeaderMd"}),e.jsx(s,{...a,size:"homeHeaderLg"}),e.jsx(s,{...a,size:"homeHeaderXl"})]})]}),e.jsxs("div",{children:[e.jsx("h3",{className:"text-white font-semibold mb-3",children:"Footer Sizes"}),e.jsxs("div",{className:"space-x-4",children:[e.jsx(s,{...a,size:"footer"}),e.jsx(s,{...a,size:"footerLg"})]})]})]}),parameters:{docs:{description:{story:"Different size variants available for the logo component across different contexts."}}}},r={args:{size:"default",showText:!1},render:a=>e.jsxs("div",{className:"space-y-6",children:[e.jsxs("div",{children:[e.jsx("h3",{className:"text-white font-semibold mb-3",children:"Icon Only - Default Sizes"}),e.jsxs("div",{className:"space-x-4",children:[e.jsx(s,{...a,size:"default"}),e.jsx(s,{...a,size:"header"}),e.jsx(s,{...a,size:"footer"})]})]}),e.jsxs("div",{children:[e.jsx("h3",{className:"text-white font-semibold mb-3",children:"Icon Only - Header Sizes"}),e.jsxs("div",{className:"space-x-4",children:[e.jsx(s,{...a,size:"header"}),e.jsx(s,{...a,size:"headerMd"}),e.jsx(s,{...a,size:"headerLg"}),e.jsx(s,{...a,size:"headerXl"})]})]}),e.jsxs("div",{children:[e.jsx("h3",{className:"text-white font-semibold mb-3",children:"Icon Only - Home Header Sizes"}),e.jsxs("div",{className:"space-x-4",children:[e.jsx(s,{...a,size:"homeHeaderXsmall"}),e.jsx(s,{...a,size:"homeHeaderSm"}),e.jsx(s,{...a,size:"homeHeaderMd"}),e.jsx(s,{...a,size:"homeHeaderLg"}),e.jsx(s,{...a,size:"homeHeaderXl"})]})]})]}),parameters:{docs:{description:{story:"Logo variants with only the icon, no text. Useful for compact spaces."}}}},i={args:{},render:()=>e.jsx("div",{className:"min-h-screen bg-gradient-to-b from-[var(--color-surface-default-primary)] to-[var(--color-surface-default-secondary)] p-8",children:e.jsxs("div",{className:"max-w-4xl mx-auto",children:[e.jsx("h2",{className:"text-white font-semibold mb-6",children:"Home Header Context (White Text)"}),e.jsxs("div",{className:"space-y-4",children:[e.jsxs("div",{className:"flex items-center space-x-4",children:[e.jsx("span",{className:"text-white text-sm w-24",children:"XSmall:"}),e.jsx(s,{size:"homeHeaderXsmall"})]}),e.jsxs("div",{className:"flex items-center space-x-4",children:[e.jsx("span",{className:"text-white text-sm w-24",children:"Small:"}),e.jsx(s,{size:"homeHeaderSm"})]}),e.jsxs("div",{className:"flex items-center space-x-4",children:[e.jsx("span",{className:"text-white text-sm w-24",children:"Medium:"}),e.jsx(s,{size:"homeHeaderMd"})]}),e.jsxs("div",{className:"flex items-center space-x-4",children:[e.jsx("span",{className:"text-white text-sm w-24",children:"Large:"}),e.jsx(s,{size:"homeHeaderLg"})]}),e.jsxs("div",{className:"flex items-center space-x-4",children:[e.jsx("span",{className:"text-white text-sm w-24",children:"XLarge:"}),e.jsx(s,{size:"homeHeaderXl"})]})]})]})}),parameters:{docs:{description:{story:"Home header context showing white text variants. These are used on dark/transparent backgrounds."}}}},o={args:{},render:()=>e.jsx("div",{className:"min-h-screen bg-[var(--color-surface-default-primary)] p-8",children:e.jsxs("div",{className:"max-w-4xl mx-auto",children:[e.jsx("h2",{className:"text-white font-semibold mb-6",children:"Header Context (Dark Text)"}),e.jsxs("div",{className:"space-y-4",children:[e.jsxs("div",{className:"flex items-center space-x-4",children:[e.jsx("span",{className:"text-white text-sm w-24",children:"Default:"}),e.jsx(s,{size:"header"})]}),e.jsxs("div",{className:"flex items-center space-x-4",children:[e.jsx("span",{className:"text-white text-sm w-24",children:"Medium:"}),e.jsx(s,{size:"headerMd"})]}),e.jsxs("div",{className:"flex items-center space-x-4",children:[e.jsx("span",{className:"text-white text-sm w-24",children:"Large:"}),e.jsx(s,{size:"headerLg"})]}),e.jsxs("div",{className:"flex items-center space-x-4",children:[e.jsx("span",{className:"text-white text-sm w-24",children:"XLarge:"}),e.jsx(s,{size:"headerXl"})]})]})]})}),parameters:{docs:{description:{story:"Header context showing dark text variants. These are used on light backgrounds."}}}},d={args:{},render:()=>e.jsx("div",{className:"min-h-screen bg-[var(--color-surface-default-primary)] p-8",children:e.jsxs("div",{className:"max-w-4xl mx-auto",children:[e.jsx("h2",{className:"text-white font-semibold mb-6",children:"Footer Context (Larger Sizes)"}),e.jsxs("div",{className:"space-y-4",children:[e.jsxs("div",{className:"flex items-center space-x-4",children:[e.jsx("span",{className:"text-white text-sm w-24",children:"Default:"}),e.jsx(s,{size:"footer"})]}),e.jsxs("div",{className:"flex items-center space-x-4",children:[e.jsx("span",{className:"text-white text-sm w-24",children:"Large:"}),e.jsx(s,{size:"footerLg"})]})]})]})}),parameters:{docs:{description:{story:"Footer context showing larger size variants for footer placement."}}}};t.parameters={...t.parameters,docs:{...t.parameters?.docs,source:{originalSource:`{
|
|
args: {
|
|
size: "default",
|
|
showText: true
|
|
}
|
|
}`,...t.parameters?.docs?.source}}};n.parameters={...n.parameters,docs:{...n.parameters?.docs,source:{originalSource:`{
|
|
args: {
|
|
showText: true
|
|
},
|
|
render: args => <div className="space-y-6">
|
|
<div>
|
|
<h3 className="text-white font-semibold mb-3">Default Sizes</h3>
|
|
<div className="space-x-4">
|
|
<Logo {...args} size="default" />
|
|
<Logo {...args} size="header" />
|
|
<Logo {...args} size="footer" />
|
|
</div>
|
|
</div>
|
|
|
|
<div>
|
|
<h3 className="text-white font-semibold mb-3">Header Sizes</h3>
|
|
<div className="space-x-4">
|
|
<Logo {...args} size="header" />
|
|
<Logo {...args} size="headerMd" />
|
|
<Logo {...args} size="headerLg" />
|
|
<Logo {...args} size="headerXl" />
|
|
</div>
|
|
</div>
|
|
|
|
<div>
|
|
<h3 className="text-white font-semibold mb-3">Home Header Sizes</h3>
|
|
<div className="space-x-4">
|
|
<Logo {...args} size="homeHeaderXsmall" />
|
|
<Logo {...args} size="homeHeaderSm" />
|
|
<Logo {...args} size="homeHeaderMd" />
|
|
<Logo {...args} size="homeHeaderLg" />
|
|
<Logo {...args} size="homeHeaderXl" />
|
|
</div>
|
|
</div>
|
|
|
|
<div>
|
|
<h3 className="text-white font-semibold mb-3">Footer Sizes</h3>
|
|
<div className="space-x-4">
|
|
<Logo {...args} size="footer" />
|
|
<Logo {...args} size="footerLg" />
|
|
</div>
|
|
</div>
|
|
</div>,
|
|
parameters: {
|
|
docs: {
|
|
description: {
|
|
story: "Different size variants available for the logo component across different contexts."
|
|
}
|
|
}
|
|
}
|
|
}`,...n.parameters?.docs?.source}}};r.parameters={...r.parameters,docs:{...r.parameters?.docs,source:{originalSource:`{
|
|
args: {
|
|
size: "default",
|
|
showText: false
|
|
},
|
|
render: args => <div className="space-y-6">
|
|
<div>
|
|
<h3 className="text-white font-semibold mb-3">
|
|
Icon Only - Default Sizes
|
|
</h3>
|
|
<div className="space-x-4">
|
|
<Logo {...args} size="default" />
|
|
<Logo {...args} size="header" />
|
|
<Logo {...args} size="footer" />
|
|
</div>
|
|
</div>
|
|
|
|
<div>
|
|
<h3 className="text-white font-semibold mb-3">
|
|
Icon Only - Header Sizes
|
|
</h3>
|
|
<div className="space-x-4">
|
|
<Logo {...args} size="header" />
|
|
<Logo {...args} size="headerMd" />
|
|
<Logo {...args} size="headerLg" />
|
|
<Logo {...args} size="headerXl" />
|
|
</div>
|
|
</div>
|
|
|
|
<div>
|
|
<h3 className="text-white font-semibold mb-3">
|
|
Icon Only - Home Header Sizes
|
|
</h3>
|
|
<div className="space-x-4">
|
|
<Logo {...args} size="homeHeaderXsmall" />
|
|
<Logo {...args} size="homeHeaderSm" />
|
|
<Logo {...args} size="homeHeaderMd" />
|
|
<Logo {...args} size="homeHeaderLg" />
|
|
<Logo {...args} size="homeHeaderXl" />
|
|
</div>
|
|
</div>
|
|
</div>,
|
|
parameters: {
|
|
docs: {
|
|
description: {
|
|
story: "Logo variants with only the icon, no text. Useful for compact spaces."
|
|
}
|
|
}
|
|
}
|
|
}`,...r.parameters?.docs?.source}}};i.parameters={...i.parameters,docs:{...i.parameters?.docs,source:{originalSource:`{
|
|
args: {},
|
|
render: () => <div className="min-h-screen bg-gradient-to-b from-[var(--color-surface-default-primary)] to-[var(--color-surface-default-secondary)] p-8">
|
|
<div className="max-w-4xl mx-auto">
|
|
<h2 className="text-white font-semibold mb-6">
|
|
Home Header Context (White Text)
|
|
</h2>
|
|
<div className="space-y-4">
|
|
<div className="flex items-center space-x-4">
|
|
<span className="text-white text-sm w-24">XSmall:</span>
|
|
<Logo size="homeHeaderXsmall" />
|
|
</div>
|
|
<div className="flex items-center space-x-4">
|
|
<span className="text-white text-sm w-24">Small:</span>
|
|
<Logo size="homeHeaderSm" />
|
|
</div>
|
|
<div className="flex items-center space-x-4">
|
|
<span className="text-white text-sm w-24">Medium:</span>
|
|
<Logo size="homeHeaderMd" />
|
|
</div>
|
|
<div className="flex items-center space-x-4">
|
|
<span className="text-white text-sm w-24">Large:</span>
|
|
<Logo size="homeHeaderLg" />
|
|
</div>
|
|
<div className="flex items-center space-x-4">
|
|
<span className="text-white text-sm w-24">XLarge:</span>
|
|
<Logo size="homeHeaderXl" />
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>,
|
|
parameters: {
|
|
docs: {
|
|
description: {
|
|
story: "Home header context showing white text variants. These are used on dark/transparent backgrounds."
|
|
}
|
|
}
|
|
}
|
|
}`,...i.parameters?.docs?.source}}};o.parameters={...o.parameters,docs:{...o.parameters?.docs,source:{originalSource:`{
|
|
args: {},
|
|
render: () => <div className="min-h-screen bg-[var(--color-surface-default-primary)] p-8">
|
|
<div className="max-w-4xl mx-auto">
|
|
<h2 className="text-white font-semibold mb-6">
|
|
Header Context (Dark Text)
|
|
</h2>
|
|
<div className="space-y-4">
|
|
<div className="flex items-center space-x-4">
|
|
<span className="text-white text-sm w-24">Default:</span>
|
|
<Logo size="header" />
|
|
</div>
|
|
<div className="flex items-center space-x-4">
|
|
<span className="text-white text-sm w-24">Medium:</span>
|
|
<Logo size="headerMd" />
|
|
</div>
|
|
<div className="flex items-center space-x-4">
|
|
<span className="text-white text-sm w-24">Large:</span>
|
|
<Logo size="headerLg" />
|
|
</div>
|
|
<div className="flex items-center space-x-4">
|
|
<span className="text-white text-sm w-24">XLarge:</span>
|
|
<Logo size="headerXl" />
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>,
|
|
parameters: {
|
|
docs: {
|
|
description: {
|
|
story: "Header context showing dark text variants. These are used on light backgrounds."
|
|
}
|
|
}
|
|
}
|
|
}`,...o.parameters?.docs?.source}}};d.parameters={...d.parameters,docs:{...d.parameters?.docs,source:{originalSource:`{
|
|
args: {},
|
|
render: () => <div className="min-h-screen bg-[var(--color-surface-default-primary)] p-8">
|
|
<div className="max-w-4xl mx-auto">
|
|
<h2 className="text-white font-semibold mb-6">
|
|
Footer Context (Larger Sizes)
|
|
</h2>
|
|
<div className="space-y-4">
|
|
<div className="flex items-center space-x-4">
|
|
<span className="text-white text-sm w-24">Default:</span>
|
|
<Logo size="footer" />
|
|
</div>
|
|
<div className="flex items-center space-x-4">
|
|
<span className="text-white text-sm w-24">Large:</span>
|
|
<Logo size="footerLg" />
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>,
|
|
parameters: {
|
|
docs: {
|
|
description: {
|
|
story: "Footer context showing larger size variants for footer placement."
|
|
}
|
|
}
|
|
}
|
|
}`,...d.parameters?.docs?.source}}};const p=["Default","Sizes","IconOnly","HomeHeaderContext","HeaderContext","FooterContext"];export{t as Default,d as FooterContext,o as HeaderContext,i as HomeHeaderContext,r as IconOnly,n as Sizes,p as __namedExportsOrder,h as default};
|