https://mobill.se/assets/KitchenSinkView-B-KJ1IrE.js

1import{j as e}from"./index-k83ngEpT.js";import{P as d}from"./proseClasses-CSosluWs.js";const c={"mobill-hero":[["heading","string",'""',"Optional section heading shown above the element."],["subheading","string",'""',"Optional muted sub-heading below the heading."],["image","URL","—","Background image. Falls back to the brand color if omitted."],["image-alt","string",'""',"Alt text for the background image."],["title","string",'""',"Heading (rendered as <h1>). Omitted if empty."],["subtitle","string","child text","Sub-heading. Falls back to child text if absent."],["cta-label","string",'""',"Button text. The button only renders when set."],["cta-href","URL","#","Button link target."],["cta-target","string","_self",'Button link target (rel="noopener" always applied).']],"mobill-image-text":[["heading","string",'""',"Optional section heading shown above the element."],["subheading","string",'""',"Optional muted sub-heading below the heading."],["image","URL","—","Image source (empty box if omitted)."],["image-alt","string",'""',"Alt text for the image."],["title","string",'""',"Heading (rendered as <h3>). Omitted if empty."],["text","string","child text","Body text (blank lines split paragraphs). Falls back to child text."]],"mobill-card-grid":[["heading","string",'""',"Optional section heading shown above the grid."],["subheading","string",'""',"Optional muted sub-heading below the heading."]],"mobill-card":[["icon","string",'""',"Emoji/text icon in the badge. Ignored if `image` is set."],["image","URL",'""',"Top image (16:9). Takes priority over `icon`."],["image-alt","string",'""',"Alt text for the image."],["title","string",'""',"Card heading (<h3>). Omitted if empty."],["text","string","child text","Body text. Falls back to child text if absent."],["href","URL",'""',"If set, the whole card becomes a link."],["target","string","_self",'Link target (rel="noopener" always applied).']],"mobill-steps":[["heading","string",'""',"Optional section heading shown above the steps."],["subheading","string",'""',"Optional muted sub-heading below the heading."]],"mobill-step":[["title","string",'""',"Step heading. Omitted if empty."],["text","string","child text","Step body. Falls back to child text if absent."],["icon","string",'""',"Emoji/text shown in the badge instead of the number."],["number","string","auto","Overrides the auto-assigned (1-based) number."]],"mobill-accordion":[["heading","string",'""',"Optional section heading shown above the list."],["subheading","string",'""',"Optional muted sub-heading below the heading."]],"mobill-accordion-item":[["q","string",'""',"The question (summary row)."],["a","string","child content","Plain-text answer. If omitted, slotted child content is used (rich HTML)."],["open","boolean","off","Start expanded."]],"mobill-table":[["heading","string",'""',"Optional section heading shown above the table."],["subheading","string",'""',"Optional muted sub-heading below the heading."],["columns","string (comma-sep)","—",'Header labels, e.g. "Zon, Pris, Tid". No header if omitted.']],"mobill-row":[["cells","string (pipe-sep)","child text","Cell values separated by |. Falls back to child text."],["header","boolean","off","Render this row in <thead> as <th> cells."]],"mobill-cta":[["heading","string",'""',"Optional section heading shown above the band."],["subheading","string",'""',"Optional muted sub-heading below the heading."],["title","string",'""',"Heading (<h2>). Omitted if empty."],["text","string","child text","Supporting text. Falls back to child text if absent."],["primary-label","string",'""',"Primary button text. Only renders when set."],["primary-href","URL","#","Primary button link."],["primary-target","string","_self","Primary button link target."],["secondary-label","string",'""',"Secondary (outline) button text. Only renders when set."],["secondary-href","URL","#","Secondary button link."],["secondary-target","string","_self","Secondary button link target."],["image","URL","—","Background image. Falls back to the brand color if omitted."],["image-alt","string",'""',"Alt text for the background image."]],"mobill-link-button":[["heading","string","variant default",'Section heading above the button. Variants carry their own; heading="" suppresses it.'],["subheading","string","variant default",'Muted explainer text below the heading. Variants carry their own; subheading="" suppresses it.'],["variant","string","generic",'Design preset: "utility" (pink, permit icon) or "mode" (teal, parking icon). Each carries a default explainer and label.'],["label","string","child text → variant default","Button text. Falls back to child text, then the variant's default label."],["href","URL","#","Link target."],["target","string","_self",'Link target window (rel="noopener" always applied).']],"mobill-service-fee-info":[["heading","string",'""',"Optional section heading shown above the block."],["subheading","string",'""',"Optional muted sub-heading below the heading."],["t

1itle","string","translated copy","Block title (<h3>)."],["text-1","string","translated copy","First paragraph (before the login link)."],["login-label","string","translated copy","Link text appended to the first paragraph."],["login-href","URL","/login","Login link target."],["text-2","string","translated copy","Second paragraph (before the SMS link)."],["sms-label","string","translated copy","Link text appended to the second paragraph."],["sms-href","URL","/park/sms","SMS-guide link target."],["text-3","string","translated copy","Closing paragraph (regular tariff always applies)."],["image","URL","/assets/img/mobill-webb.png","Image shown beside the text."],["image-alt","string",'""',"Alt text for the image (decorative by default)."]],"mobill-service-fee":[["heading","string",'""',"Optional section heading shown above the row."],["subheading","string",'""',"Optional muted sub-heading below the heading."],["percent","string",'""','Service fee percentage, e.g. "15" → "15%".'],["minimum","string",'""','Minimum fee amount, e.g. "4,95". Omit to show only the percentage.'],["currency","string",'"kr"',"Currency label appended after the minimum amount."],["label","string","translated copy","Row label (overrides i18n default)."],["minimum-prefix","string","translated copy",'Text before the minimum value, e.g. "minst".']]};function h({tag:i}){const n=c[i]||[];return e.jsxs("div",{children:[e.jsxs("p",{className:"font-mono text-xs text-mobill-black/50 mb-1",children:["<",i,"> attributes"]}),n.length===0?e.jsx("p",{className:"text-xs text-mobill-black/50 italic rounded-mobill-sm border border-dashed border-black/15 px-3 py-2",children:"Inga attribut – konfigureras via barn-elementen."}):e.jsx("div",{className:"overflow-x-auto rounded-mobill-sm border border-black/10",children:e.jsxs("table",{className:"w-full text-left text-sm",children:[e.jsx("thead",{className:"bg-mobill-silver text-mobill-black",children:e.jsxs("tr",{children:[e.jsx("th",{className:"px-3 py-2 font-semibold",children:"Attribute"}),e.jsx("th",{className:"px-3 py-2 font-semibold",children:"Type"}),e.jsx("th",{className:"px-3 py-2 font-semibold",children:"Default"}),e.jsx("th",{className:"px-3 py-2 font-semibold",children:"Description"})]})}),e.jsx("tbody",{children:n.map(([a,l,s,r])=>e.jsxs("tr",{className:"border-t border-black/5 align-top",children:[e.jsx("td",{className:"px-3 py-2 font-mono text-mobill-primary whitespace-nowrap",children:a}),e.jsx("td",{className:"px-3 py-2 text-mobill-black/70 whitespace-nowrap",children:l}),e.jsx("td",{className:"px-3 py-2 font-mono text-xs text-mobill-black/60 whitespace-nowrap",children:s}),e.jsx("td",{className:"px-3 py-2 text-mobill-black/80",children:r})]},a))})]})})]})}function t({tag:i,title:n,tags:a,desc:l,children:s}){const r=a!=null?a:i?[i]:[];return e.jsxs("section",{className:"space-y-4",children:[e.jsxs("div",{children:[e.jsx("h2",{className:"font-mono text-base font-semibold text-mobill-primary",children:i?"<".concat(i,">"):n}),l&&e.jsx("p",{className:"text-sm text-mobill-black/70 mt-1",children:l})]}),s,r.length>0&&e.jsx("div",{className:"space-y-4 pt-1",children:r.map(o=>e.jsx(h,{tag:o},o))})]})}function b(){return e.jsxs("main",{className:"max-w-4xl mx-auto px-4 py-12 space-y-16",children:[e.jsxs("header",{className:"space-y-2",children:[e.jsx("h1",{className:"text-3xl font-bold text-mobill-black",children:"Kitchen sink"}),e.jsxs("p",{className:"text-mobill-black/70",children:["Every ",e.jsx("code",{className:"font-mono text-sm",children:"<mobill-*>"})," custom element, rendered with sample content and a description of each supported attribute. These are the building blocks available inside a client page's custom HTML."]})]}),e.jsx(t,{tag:"mobill-hero",desc:"Full-width hero banner: background image/color, title, subtitle, optional CTA.",children:e.jsx("mobill-hero",{image:"https://images.unsplash.com/photo-1506521781263-d8422e82f27a?w=1200&q=80","image-alt":"Parkeringshus",title:"Parkera i Skövde",subtitle:"Betala smidigt direkt i appen — ingen registrering krävs.","cta-label":"Ladda ner appen","cta-href":"/qr"})}),e.jsx(t,{tag:"mobill-image-text",desc:"Responsive image paired with a title and one or more paragraphs.",children:e.jsx("mobill-image-text",{image:"https://images.unsplash.com/photo-1573497491208-6b1acb26050

17?w=800&q=80","image-alt":"Person använder mobiltelefon",title:"Enkelt och smidigt",text:"Starta din parkering på sekunder.\n\nBetala med kort eller Swish — allt sköts i appen."})}),e.jsx(t,{tag:"mobill-card-grid",tags:["mobill-card-grid","mobill-card"],desc:"Responsive grid of cards. Each <mobill-card> child renders an icon/image, title, and text.",children:e.jsxs("mobill-card-grid",{heading:"Därför Mobill",subheading:"Valfri rubrik och underrubrik ovanför elementet.",children:[e.jsx("mobill-card",{icon:"⏱",title:"Snabbt",text:"Starta parkering på sekunder."}),e.jsx("mobill-card",{icon:"💳",title:"Enkelt",text:"Betala direkt i appen."}),e.jsx("mobill-card",{icon:"🔒",title:"Säkert",text:"Inga kortuppgifter sparas på enheten."})]})}),e.jsx(t,{tag:"mobill-steps",tags:["mobill-steps","mobill-step"],desc:"Numbered “how it works” sequence. Vertical on mobile, horizontal from 768px.",children:e.jsxs("mobill-steps",{children:[e.jsx("mobill-step",{title:"Ladda ner",text:"Hämta Mobill-appen gratis."}),e.jsx("mobill-step",{title:"Registrera",text:"Skapa ett konto på under en minut."}),e.jsx("mobill-step",{title:"Parkera",text:"Starta din parkering direkt i appen."})]})}),e.jsx(t,{tag:"mobill-accordion",tags:["mobill-accordion","mobill-accordion-item"],desc:"Collapsible FAQ list built on native <details>/<summary>. Only one item is open at a time.",children:e.jsxs("mobill-accordion",{children:[e.jsx("mobill-accordion-item",{q:"Hur betalar jag?",open:"",children:"Du betalar direkt i appen — koppla kort eller Swish."}),e.jsx("mobill-accordion-item",{q:"Kostar appen något?",children:"Nej, appen är gratis att ladda ner och använda."}),e.jsxs("mobill-accordion-item",{q:"Var fungerar det?",children:["I alla anslutna zoner. Se kartan under ",e.jsx("a",{href:"/zones",children:"Zoner"}),"."]})]})}),e.jsx(t,{tag:"mobill-table",tags:["mobill-table","mobill-row"],desc:"Configurable data table from <mobill-row> children. Pipe-separated cells; header via `columns` or a `header` row.",children:e.jsxs("mobill-table",{columns:"Zon, Pris, Max tid",children:[e.jsx("mobill-row",{cells:"Centrum | 15 kr/tim | 4 tim"}),e.jsx("mobill-row",{cells:"Ytterområde | 8 kr/tim | Ingen gräns"}),e.jsx("mobill-row",{cells:"Helg | Gratis | —"})]})}),e.jsx(t,{tag:"mobill-cta",desc:"Call-to-action band: title, text, and up to two buttons. Optional background image with overlay.",children:e.jsx("div",{className:"space-y-4",children:e.jsx("mobill-cta",{image:"https://images.unsplash.com/photo-1494522855154-9297ac14b55f?w=1200&q=80","image-alt":"Stadsmiljö",title:"Parkera var du än är",text:"Mobill fungerar i alla anslutna zoner.","primary-label":"Hitta zoner","primary-href":"/zones"})})}),e.jsx(t,{tag:"mobill-link-button",desc:"Standalone button link with a trailing arrow — e.g. a city page linking to its utility-permit page. The utility/mode variants are fixed presets with their own icon, color, explainer text, and label — the bare tag renders the complete section.",children:e.jsxs("div",{className:"space-y-6",children:[e.jsx("mobill-link-button",{variant:"utility",href:"/enkoping-utility"}),e.jsx("mobill-link-button",{variant:"mode",href:"/skovde-mode"}),e.jsx("mobill-link-button",{href:"/zones",label:"Generisk länkknapp"})]})}),e.jsx(t,{tag:"mobill-service-fee-info",desc:"Park without service fee on Mobill.se — text + image block with web/SMS links. All attributes are optional — the bare tag renders the original Swedish copy.",children:e.jsx("mobill-service-fee-info",{})}),e.jsx(t,{tag:"mobill-service-fee",desc:"Single-line info row showing the service fee for a parking zone: label, percentage, and optional minimum amount.",children:e.jsxs("div",{className:"space-y-3",children:[e.jsx("mobill-service-fee",{percent:"15",minimum:"4,95"}),e.jsx("mobill-service-fee",{percent:"10"})]})}),e.jsx(t,{title:"Standard text elements",children:e.jsxs("div",{className:"rounded-mobill-sm border border-black/10 bg-white p-6 ".concat(d),children:[e.jsx("h1",{children:"Heading 1"}),e.jsx("h2",{children:"Heading 2"}),e.jsx("h3",{children:"Heading 3"}),e.jsx("h4",{children:"Heading 4"}),e.jsx("h5",{children:"Heading 5"}),e.jsx("h6",{children:"Heading 6"}),e.jsxs("p",{children:["A paragraph of body text with ",e.jsx("strong",{children:"bold"}),", ",e.jsx("em",{children:"italic"}),", an"," ",e.jsx("a",{href:"/zones",children:"inline link"}),", some ",e.jsx("code",{children:"inline code"}),", and"," ",e.jsx("small",{children:"small print"}),"."]}),e.jsx("p",{children:"A second paragraph to show the spacing between blocks of text."}),e.jsxs("ul",{children:[e.jsx("li",{children:"Unordered list item one"}),e.jsx("li",{children:"Unordered list item two"})]}),e.jsxs("ol",{children:[e.jsx("li",{children:"Ordered list item one"}),e.jsx("li",{children:"Ordered list item two"})]}),e.jsx("blockquote",{children:"A blockquote — useful for highlighting a short statement or quote."}),e.jsx("hr",{}),e.jsx("p",{children:"Text after a horizontal rule."})]})})]})}export{b as default};