2 lines
6.4 KiB
JavaScript
2 lines
6.4 KiB
JavaScript
import{b as l,d as n,e as s,F as r,f as d,t as e,g as _,o as i,n as p}from"./vue.esm-bundler-c7-UdoSZ.js";const y={class:"showcase-page"},w={class:"showcase-section","aria-labelledby":"state-title"},v={class:"showcase-grid"},f={class:"showcase-panel"},x={class:"control-row"},k=["onClick"],S={class:"fixture-label"},C={class:"showcase-section","aria-labelledby":"card-title"},N={class:"showcase-grid"},D={class:"fixture-card__meta"},L={key:0,class:"fixture-card__price"},P={key:1,class:"fixture-card__meta"},g={__name:"DesignSystemShowcase",setup(M){const o=_("Near Mint"),m=[{id:"fixture-charizard",productName:"Charizard ex #199/165",askingPriceMinor:11500,status:"AVAILABLE"},{id:"fixture-pikachu",productName:"Pikachu World Collection",askingPriceMinor:8200,status:"PENDING"},{id:"fixture-gengar",productName:"Gengar holo promo",askingPriceMinor:4500,status:"SOLD"}];return(A,a)=>(i(),l("main",y,[a[8]||(a[8]=n('<header class="showcase-header"><div><p class="catalog-kicker">Design system fixture</p><h1>Collectible data, made precise.</h1><p>Representative visual fixtures for the catalog, detail views, controls, states, and themes. This component uses mock data only.</p></div><p class="fixture-label">Use the Storybook theme toolbar to inspect light and dark themes.</p></header><section class="showcase-section" aria-labelledby="type-title"><h2 id="type-title">Typography and tokens</h2><div class="showcase-grid"><article class="showcase-panel type-sample"><h3>Type scale</h3><p class="type-sample__display">Space Grotesk display</p><p class="type-sample__ui">Manrope interface and metadata</p><p class="type-sample__numeric">$1,150.00 · 12 copies · 199/165</p></article><article class="showcase-panel"><h3>Primitive palette</h3><div class="swatch-row"><span class="swatch"><span class="swatch__chip swatch__chip--cobalt"></span>Cobalt</span><span class="swatch"><span class="swatch__chip swatch__chip--success"></span>Success</span><span class="swatch"><span class="swatch__chip swatch__chip--warning"></span>Warning</span><span class="swatch"><span class="swatch__chip swatch__chip--danger"></span>Danger</span><span class="swatch"><span class="swatch__chip swatch__chip--info"></span>Info</span></div></article><article class="showcase-panel"><h3>Controls</h3><div class="control-row"><button class="button button--primary" type="button">Primary</button><button class="button button--secondary" type="button">Secondary</button><button class="button button--danger" type="button">Remove</button><button class="button button--secondary" type="button" disabled>Disabled</button></div><label class="fixture-label" for="fixture-input">Persistent label</label><input id="fixture-input" class="fixture-input" value="Charizard ex"></article></div></section>',2)),s("section",w,[a[3]||(a[3]=s("h2",{id:"state-title"},"Statuses, conditions, and feedback",-1)),s("div",v,[a[1]||(a[1]=n('<article class="showcase-panel"><h3>Status treatments</h3><div class="status-row"><span class="status status--available">Available</span><span class="status status--pending">Pending</span><span class="status status--sold">Sold</span></div></article>',1)),s("article",f,[a[0]||(a[0]=s("h3",null,"Condition selection",-1)),s("div",x,[(i(),l(r,null,d(["Near Mint","Lightly Played","Damaged"],t=>s("button",{key:t,class:p(["condition",{"condition--selected":o.value===t}]),type:"button",onClick:F=>o.value=t},e(t),11,k)),64))]),s("p",S,"Selected: "+e(o.value),1)]),a[2]||(a[2]=s("article",{class:"showcase-panel state-stack"},[s("h3",null,"Feedback states"),s("p",{class:"state state--empty"},"No relevant matches found."),s("p",{class:"state state--loading",role:"status"},"Loading collectible..."),s("p",{class:"state state--error",role:"alert"},"Unable to load marketplace values.")],-1))])]),s("section",C,[a[7]||(a[7]=s("h2",{id:"card-title"},"Collectible cards",-1)),s("div",N,[(i(),l(r,null,d(m,t=>s("article",{key:t.id,class:"fixture-card"},[a[5]||(a[5]=s("div",{class:"fixture-stage","aria-label":"Neutral collectible image stage"},[s("span",{class:"fixture-stage__glyph"},"PK")],-1)),s("div",null,[a[4]||(a[4]=s("p",{class:"fixture-card__meta"},"Trading card · Scarlet & Violet 151",-1)),s("h3",null,e(t.productName),1),s("p",D,"Condition: "+e(t.status==="SOLD"?"Lightly Played":"Near Mint"),1)]),s("span",{class:p(["status",`status--${t.status.toLowerCase()}`])},e(t.status),3),t.status!=="SOLD"?(i(),l("p",L,"$"+e((t.askingPriceMinor/100).toFixed(2)),1)):(i(),l("p",P,"Sold history retained")),a[6]||(a[6]=s("div",{class:"fixture-card__actions"},[s("button",{class:"button button--primary",type:"button"},"View collectible"),s("button",{class:"button button--secondary",type:"button"},"Compare")],-1))])),64))])]),a[9]||(a[9]=n('<section class="showcase-section" aria-labelledby="detail-title"><h2 id="detail-title">Detail and gallery treatment</h2><div class="showcase-grid"><article class="showcase-panel"><h3>Collectible detail</h3><div class="fixture-stage fixture-stage--image" aria-label="Neutral image gallery stage"><span class="fixture-stage__glyph">01</span></div><p class="catalog-kicker">Identity</p><h3>Charizard ex #199/165</h3><p class="fixture-card__meta">Scarlet & Violet 151 · Trading card · Near Mint</p></article><article class="showcase-panel"><h3>Listing detail</h3><p class="catalog-kicker">Available</p><h3>Asking price</h3><p class="fixture-card__price">$115.00</p><dl class="product-facts"><div><dt>Condition</dt><dd>Near Mint</dd></div><div><dt>Market context</dt><dd>$120 reference</dd></div><div><dt>Updated</dt><dd>Today</dd></div><div><dt>Seller note</dt><dd>Clean front and back</dd></div></dl></article><article class="showcase-panel"><h3>Image treatment</h3><div class="fixture-stage fixture-stage--image" aria-label="Museum-style contained collectible image stage"><span class="fixture-stage__glyph">GALLERY</span></div><p class="fixture-card__meta">Contained, neutral, aspect-ratio preserving, and free of cobalt image backgrounds.</p></article></div></section>',1))]))}};g.__docgenInfo={exportName:"default",displayName:"DesignSystemShowcase",description:"",tags:{},sourceFiles:["/Users/fragginwagon/Developer/Source Code/pokemon/pokemon-inventory/apps/web/src/components/organisms/DesignSystemShowcase.vue"]};const T={title:"Organisms/Design System Showcase",component:g},c={};var u,h,b;c.parameters={...c.parameters,docs:{...(u=c.parameters)==null?void 0:u.docs,source:{originalSource:"{}",...(b=(h=c.parameters)==null?void 0:h.docs)==null?void 0:b.source}}};const V=["AllFixtures"];export{c as AllFixtures,V as __namedExportsOrder,T as default};
|