wip: shiny-button

Author: chase-moskal

s/components/button/component.ts

@@ -0,0 +1,32 @@
+
+import {html} from "lit"
+import {view} from "@e280/sly"
+import styleCss from "./style.css.js"
+import {foundationCss} from "../foundation.css.js"
+import {ShinyContext, ShinyElement} from "../framework.js"
+
+export class ShinyButton extends (
+	view(use => (context: ShinyContext) => {
+		use.name("shiny-button")
+		use.styles(foundationCss, context.theme, styleCss)
+
+		const attrs = use.attrs.spec({
+			role: String,
+			tabindex: Number,
+			disabled: Boolean,
+			hidden: Boolean,
+		})
+
+		return html`
+			<button
+				part=button
+				?disabled="${attrs.disabled}"
+				?hidden="${attrs.hidden}">
+					<slot></slot>
+			</button>
+		`
+	})
+	.component(ShinyElement)
+	.props(el => [el.context] as const)
+) {}
+

s/components/button/style.css.ts

@@ -0,0 +1,55 @@
+
+import {css} from "lit"
+export default css`@layer view {
+
+:host {
+	opacity: 0.8;
+	display: contents;
+	justify-content: center;
+	align-items: center;
+
+	padding: 0.5em;
+	border-radius: 0.2em;
+	border: 0.1em solid currentColor;
+
+	cursor: pointer;
+	color: var(--alpha);
+	background: transparent;
+	user-select: none;
+
+	outline: 3px solid yellow;
+}
+
+/* TODO */
+:host-context([view="shiny-tabs"]) {
+	outline: 3px solid red;
+}
+
+:host(:is(:hover, :focus-visible)) { opacity: 1; }
+:host(:active) { opacity: 0.6; }
+
+:host([disabled]) {
+	cursor: default;
+	color: var(--lame);
+	opacity: var(--inactive-opacity);
+}
+
+:host([hidden]) {
+	display: none !important;
+}
+
+:host([angry]) {
+	color: var(--angry);
+}
+
+button {
+	all: inherit;
+	display: inline-flex;
+}
+
+slot {
+	display: contents;
+}
+
+}`
+

s/components/raw-components.ts

@@ -1,10 +1,12 @@
 
+import {ShinyButton} from "./button/component.js"
 import {ShinyCopy} from "./copy/component.js"
 import {ShinyDrawer} from "./drawer/component.js"
 import {ShinyExample} from "./example/component.js"
 import {ShinyTabs} from "./tabs/component.js"
 
 export const rawComponents = {
+	ShinyButton,
 	ShinyCopy,
 	ShinyDrawer,
 	ShinyExample,

s/demo/demo.bundle.ts

@@ -42,7 +42,7 @@ dom.register({ShinyDemo: view.component(use => {
 				font-style: italic;
 			}
 
-			[view="shiny-tabs"] {
+			[view="demo-tabs"] {
 				display: flex;
 			}
 		}
@@ -55,7 +55,45 @@ dom.register({ShinyDemo: view.component(use => {
 
 	const demonstrations = [
 		Demonstration({
-			name: "shiny-copy",
+			name: "button",
+			explain: html`
+				<p>clicky-clacky pressy button.</p>
+			`,
+			snippets: [
+				[labels.html, `
+					<shiny-button>hello</shiny-button>
+				`],
+				[labels.view, `
+					ShinyButton
+						.props()
+						.children("hello")
+						.render()
+				`],
+				[labels.css, `
+					shiny-button {
+						font-size: 1em;
+						--happy: #0fa;
+						--angry: #f50;
+						--lame: #8888;
+						--inactive-opacity: 0.5;
+					}
+				`],
+			],
+			content: (
+				views.ShinyButton
+					.props()
+					.children("hello")
+					.render()
+			),
+			style: css`
+				.content sly-view {
+					font-size: 2em;
+				}
+			`,
+		}),
+
+		Demonstration({
+			name: "copy",
 			explain: html`
 				<p>click-to-copy text button.</p>
 			`,
@@ -85,7 +123,7 @@ dom.register({ShinyDemo: view.component(use => {
 		}),
 
 		Demonstration({
-			name: "shiny-drawer",
+			name: "drawer",
 			explain: html`
 				<p>slide-out panel. button optional.</p>
 			`,
@@ -160,7 +198,7 @@ dom.register({ShinyDemo: view.component(use => {
 		}),
 
 		Demonstration({
-			name: "shiny-tabs",
+			name: "tabs",
 			explain: html`
 				<p>button bar. panels optional.</p>
 			`,

s/demo/views/demonstration/view.ts

@@ -14,7 +14,7 @@ export const Demonstration = view(use => (options: {
 		style: CSSResultGroup
 	}) => {
 
-	use.name(options.name)
+	use.name(`demo-${options.name}`)
 	use.styles(foundationCss, styleCss, options.style)
 
 	function codeblock(heading: string, code: string) {
@@ -32,14 +32,17 @@ export const Demonstration = view(use => (options: {
 
 	return html`
 		<div class=meta>
-			<h2>✨ ${options.name}</h2>
+			<h2>✨ shiny-${options.name}</h2>
 			<div class=explain>${options.explain}</div>
 			${auraViews.ShinyTabs
 				.props()
 				.children(html`
-					${options.snippets.map(([label]) => html`
-						<button>${label.button}</button>
-					`)}
+					${options.snippets.map(([label]) => (
+						auraViews.ShinyButton
+							.props()
+							.children(label.button)
+							.render()
+					))}
 					${options.snippets.map(([label, code]) => codeblock(label.text, code))}
 				`)
 				.render()}

s/themes/aura.css.ts

@@ -4,13 +4,15 @@ import {defaultCssVars, renderCssVars} from "./infra/css-vars.js"
 export const aura = css`@layer overlay {
 
 :host {
-	display: block;
-
 	${renderCssVars({
 		...defaultCssVars(),
 	})}
 }
 
+:host([view="shiny-button"])::part(button) {
+	padding: 0.5em;
+}
+
 :host([view="shiny-drawer"]) {
 	display: block;
 
@@ -39,7 +41,7 @@ export const aura = css`@layer overlay {
 :host([view="shiny-tabs"]) {
 	display: block;
 
-	&::part(tabs) {
+	slot[part="tabs"] {
 		display: flex;
 	}
 }

s/themes/plain.css.ts

@@ -4,7 +4,6 @@ import {defaultCssVars, renderCssVars} from "./infra/css-vars.js"
 export const plain = css`@layer overlay {
 
 :host {
-	display: block;
 	${renderCssVars(defaultCssVars())}
 }