|
|
|
@@ -21,21 +21,21 @@ const typography = {
|
|
|
|
|
};
|
|
|
|
|
|
|
|
|
|
const layouts = {
|
|
|
|
|
NarrowContainer: "wire-container wire-container--narrow",
|
|
|
|
|
WideContainer: "wire-container wire-container--wide",
|
|
|
|
|
FullBleed: "wire-full-bleed",
|
|
|
|
|
Flex: "wire-flex",
|
|
|
|
|
AutoGrid: "wire-auto-grid",
|
|
|
|
|
SplitLayout: "wire-split-layout",
|
|
|
|
|
SidebarLayout: "wire-sidebar-layout",
|
|
|
|
|
StickyLayout: "wire-sticky-layout",
|
|
|
|
|
AspectRatio: "wire-aspect-ratio",
|
|
|
|
|
Panel: "wire-panel",
|
|
|
|
|
Surface: "wire-surface",
|
|
|
|
|
Well: "wire-well",
|
|
|
|
|
InsetPanel: "wire-inset-panel",
|
|
|
|
|
ScrollArea: "wire-scroll-area",
|
|
|
|
|
Sticky: "wire-sticky",
|
|
|
|
|
NarrowContainer: "wrn-container wrn-container--narrow",
|
|
|
|
|
WideContainer: "wrn-container wrn-container--wide",
|
|
|
|
|
FullBleed: "wrn-full-bleed",
|
|
|
|
|
Flex: "wrn-flex",
|
|
|
|
|
AutoGrid: "wrn-auto-grid",
|
|
|
|
|
SplitLayout: "wrn-split-layout",
|
|
|
|
|
SidebarLayout: "wrn-sidebar-layout",
|
|
|
|
|
StickyLayout: "wrn-sticky-layout",
|
|
|
|
|
AspectRatio: "wrn-aspect-ratio",
|
|
|
|
|
Panel: "wrn-panel",
|
|
|
|
|
Surface: "wrn-surface",
|
|
|
|
|
Well: "wrn-well",
|
|
|
|
|
InsetPanel: "wrn-inset-panel",
|
|
|
|
|
ScrollArea: "wrn-scroll-area",
|
|
|
|
|
Sticky: "wrn-sticky",
|
|
|
|
|
};
|
|
|
|
|
|
|
|
|
|
const buttons = {
|
|
|
|
@@ -103,7 +103,7 @@ for (const [name, variant] of Object.entries(typography)) {
|
|
|
|
|
align = "start"
|
|
|
|
|
class = ""
|
|
|
|
|
}
|
|
|
|
|
view { <div class="wire-type wire-type--${variant} wire-text--{align} ${name === "MutedText" ? "wire-muted" : ""} {class}">{text}<slot /></div> }
|
|
|
|
|
view { <div class="wrn-type wrn-type--${variant} wrn-text--{align} ${name === "MutedText" ? "wrn-muted" : ""} {class}">{text}<slot /></div> }
|
|
|
|
|
}`,
|
|
|
|
|
);
|
|
|
|
|
}
|
|
|
|
@@ -130,7 +130,7 @@ for (const [name, variant] of Object.entries(buttons)) {
|
|
|
|
|
disabled = false
|
|
|
|
|
class = ""
|
|
|
|
|
}
|
|
|
|
|
view { <button type="{type}" disabled="{disabled}" class="wire-btn wire-btn--${variant} {class}">{label}<slot /></button> }
|
|
|
|
|
view { <button type="{type}" disabled="{disabled}" class="wrn-btn wrn-btn--${variant} {class}">{label}<slot /></button> }
|
|
|
|
|
}`,
|
|
|
|
|
);
|
|
|
|
|
}
|
|
|
|
@@ -145,7 +145,7 @@ for (const name of cards) {
|
|
|
|
|
href = ""
|
|
|
|
|
class = ""
|
|
|
|
|
}
|
|
|
|
|
view { <article class="wire-card wire-catalog-card wire-catalog-card--${name.replace(/Card$/, "").toLowerCase()} {class}"><h3 data-show="title">{title}</h3><p data-show="description">{description}</p><slot /><a data-show="href" href="{href}" class="wire-catalog-card__link"><span class="wire-visually-hidden">Open {title}</span></a></article> }
|
|
|
|
|
view { <article class="wrn-card wrn-catalog-card wrn-catalog-card--${name.replace(/Card$/, "").toLowerCase()} {class}"><h3 data-show="title">{title}</h3><p data-show="description">{description}</p><slot /><a data-show="href" href="{href}" class="wrn-catalog-card__link"><span class="wrn-visually-hidden">Open {title}</span></a></article> }
|
|
|
|
|
}`,
|
|
|
|
|
);
|
|
|
|
|
}
|
|
|
|
@@ -159,7 +159,7 @@ for (const name of badges) {
|
|
|
|
|
variant = "default"
|
|
|
|
|
class = ""
|
|
|
|
|
}
|
|
|
|
|
view { <span class="wire-badge wire-badge--{variant} wire-catalog-badge wire-catalog-badge--${name.toLowerCase()} {class}">{label}<slot /></span> }
|
|
|
|
|
view { <span class="wrn-badge wrn-badge--{variant} wrn-catalog-badge wrn-catalog-badge--${name.toLowerCase()} {class}">{label}<slot /></span> }
|
|
|
|
|
}`,
|
|
|
|
|
);
|
|
|
|
|
}
|
|
|
|
|