Fix prettier formatting issues
This commit is contained in:
adilallo
@@ -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,
|
||||
};
|
||||
|
||||
Reference in New Issue
Block a user