Skip to content

Commit d8256f9

Browse files
chase-moskalchase-moskal
committed
wip: exhibit
1 parent 076eece commit d8256f9

File tree

4 files changed

+138
-59
lines changed

4 files changed

+138
-59
lines changed

‎s/components/button/showcase.ts‎

Lines changed: 119 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,119 @@
1+
2+
import {css, html} from "lit"
3+
import {Showcase} from "../../demo/views/showcase/view.js"
4+
5+
const cssSnippet = `
6+
shiny-button {
7+
--padding: 0.3em;
8+
font-size: 1em;
9+
color: currentColor;
10+
background: transparent;
11+
}
12+
`
13+
14+
export const buttonShowcase = Showcase({
15+
name: "button",
16+
style: css`
17+
.box {
18+
> * { font-size: 2em; }
19+
}
20+
`,
21+
exhibits: [
22+
{
23+
label: "basic",
24+
explain: html`<p>clicky-clacky pressy button.</p>`,
25+
snippets: [
26+
{label: "html", code: `<shiny-button>button</shiny-button>`},
27+
{label: "view", code: `ShinyButton("button")`},
28+
{label: "css", code: cssSnippet},
29+
],
30+
style: css``,
31+
presentation: views => html`
32+
${views.ShinyButton.props().children("button").render()}
33+
`,
34+
},
35+
{
36+
label: "gradient",
37+
explain: html`<p>added <code>gradient</code> attribute.</p>`,
38+
snippets: [
39+
{label: "html", code: `<shiny-button gradient>button</shiny-button>`},
40+
{label: "view", code: `
41+
ShinyButton
42+
.props("button")
43+
.attr("gradient")
44+
.render()
45+
`},
46+
{label: "css", code: cssSnippet},
47+
],
48+
style: css``,
49+
presentation: views => html`
50+
${views.ShinyButton.props().attr("gradient", true).children("button").render()}
51+
`,
52+
},
53+
{
54+
label: "catalog",
55+
explain: html`<p>clicky-clacky pressy buttons.</p>`,
56+
snippets: [
57+
{label: "html", code: `
58+
<shiny-button calm gradient>calm</shiny-button>
59+
<shiny-button angry gradient>angry</shiny-button>
60+
<shiny-button happy gradient>happy</shiny-button>
61+
<shiny-button zesty gradient>zesty</shiny-button>
62+
<shiny-button sad gradient>sad</shiny-button>
63+
<shiny-button quirky gradient>quirky</shiny-button>
64+
<shiny-button plain gradient>plain</shiny-button>
65+
`},
66+
{label: "view", code: `
67+
[
68+
ShinyButton.props().attr("calm").attr("gradient").children("calm").render(),
69+
ShinyButton.props().attr("angry").attr("gradient").children("angry").render(),
70+
ShinyButton.props().attr("happy").attr("gradient").children("happy").render(),
71+
ShinyButton.props().attr("zesty").attr("gradient").children("zesty").render(),
72+
ShinyButton.props().attr("sad").attr("gradient").children("sad").render(),
73+
ShinyButton.props().attr("quirky").attr("gradient").children("quirky").render(),
74+
ShinyButton.props().attr("plain").children("plain").render(),
75+
]
76+
`},
77+
{label: "css", code: cssSnippet},
78+
],
79+
style: css``,
80+
presentation: views => [
81+
views.ShinyButton.props()
82+
.attr("calm")
83+
.attr("gradient")
84+
.children("calm")
85+
.render(),
86+
views.ShinyButton.props()
87+
.attr("angry")
88+
.attr("gradient")
89+
.children("angry")
90+
.render(),
91+
views.ShinyButton.props()
92+
.attr("happy")
93+
.attr("gradient")
94+
.children("happy")
95+
.render(),
96+
views.ShinyButton.props()
97+
.attr("zesty")
98+
.attr("gradient")
99+
.children("zesty")
100+
.render(),
101+
views.ShinyButton.props()
102+
.attr("sad")
103+
.attr("gradient")
104+
.children("sad")
105+
.render(),
106+
views.ShinyButton.props()
107+
.attr("quirky")
108+
.attr("gradient")
109+
.children("quirky")
110+
.render(),
111+
views.ShinyButton.props()
112+
.attr("plain")
113+
.children("plain")
114+
.render(),
115+
],
116+
},
117+
],
118+
})
119+

‎s/demo/demo.bundle.ts‎

Lines changed: 2 additions & 52 deletions
Original file line numberDiff line numberDiff line change
@@ -3,6 +3,7 @@ import {css, html} from "lit"
33
import {dom, view} from "@e280/sly"
44
import {Showcase} from "./views/showcase/view.js"
55
import {makeLipsumDispenser} from "./utils/lipsum.js"
6+
import { buttonShowcase } from "../components/button/showcase.js"
67

78
const dispenser = makeLipsumDispenser()
89
const lipsum = () => dispenser.takeFirst()
@@ -36,58 +37,7 @@ dom.register({ShinyDemo: view.component(use => {
3637
dispenser.takeAll()
3738

3839
const demonstrations = [
39-
Showcase({
40-
name: "button",
41-
style: css`
42-
.box {
43-
padding: 1em;
44-
> * { font-size: 2em; }
45-
}
46-
`,
47-
exhibits: [
48-
{
49-
label: "basic",
50-
explain: html`<p>clicky-clacky pressy button.</p>`,
51-
snippets: [
52-
{
53-
label: "html",
54-
code: `<shiny-button>button</shiny-button>`,
55-
},
56-
{
57-
label: "view",
58-
code: `ShinyButton("button")`,
59-
},
60-
],
61-
style: css``,
62-
presentation: views => html`
63-
${views.ShinyButton.props().children("button").render()}
64-
`,
65-
},
66-
{
67-
label: "gradient",
68-
explain: html`<p>added <code>gradient</code> attribute.</p>`,
69-
snippets: [
70-
{
71-
label: "html",
72-
code: `<shiny-button gradient>button</shiny-button>`,
73-
},
74-
{
75-
label: "view",
76-
code: `
77-
ShinyButton
78-
.props("button")
79-
.attr("gradient")
80-
.render()
81-
`,
82-
},
83-
],
84-
style: css``,
85-
presentation: views => html`
86-
${views.ShinyButton.props().attr("gradient", true).children("button").render()}
87-
`,
88-
},
89-
],
90-
}),
40+
buttonShowcase,
9141

9242
// Demonstration({
9343
// name: "button",

‎s/demo/views/exhibit/style.css.ts‎

Lines changed: 14 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -8,7 +8,8 @@ export default css`@layer view {
88
gap: 0.5em;
99
1010
> * {
11-
flex: 1 0 0;
11+
flex: 1 1 0;
12+
min-width: 0;
1213
}
1314
}
1415
@@ -19,12 +20,13 @@ export default css`@layer view {
1920
}
2021
2122
.snippet {
23+
flex: 1 0 auto;
2224
display: flex;
2325
flex-direction: column;
2426
gap: 0.5em;
2527
padding: 0.5em;
2628
27-
background: #0004;
29+
background: #0002;
2830
box-shadow: inset 0.2em 0.3em 2em #0004;
2931
border-radius: 0.5em;
3032
@@ -33,8 +35,12 @@ export default css`@layer view {
3335
flex-wrap: wrap;
3436
align-items: center;
3537
36-
[view="shiny-tabs"] { flex: 1 1 auto; font-size: 0.8em; color: color-mix(in oklab, transparent, currentColor 50%) }
3738
[view="shiny-copy"] { font-size: 1.5em; }
39+
[view="shiny-tabs"] {
40+
flex: 1 1 auto;
41+
font-size: 0.8em;
42+
color: color-mix(in oklab, transparent, currentColor 50%);
43+
}
3844
}
3945
4046
> code {
@@ -43,7 +49,8 @@ export default css`@layer view {
4349
white-space: pre;
4450
text-wrap: wrap;
4551
tab-size: 2;
46-
word-break: break-word;
52+
word-break: keep-all;
53+
overflow: auto;
4754
4855
color: var(--code);
4956
font-size: 0.8em;
@@ -53,9 +60,12 @@ export default css`@layer view {
5360
5461
.box {
5562
display: flex;
63+
flex-wrap: wrap;
5664
justify-content: center;
5765
align-items: center;
66+
align-content: center;
5867
68+
gap: 0.5em;
5969
padding: 1em;
6070
6171
border-radius: 0.5rem;

‎s/demo/views/exhibit/view.ts‎

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -6,8 +6,8 @@ import {CSSResultGroup, html} from "lit"
66
import styleCss from "./style.css.js"
77
import {auraViews} from "../../viewsets.js"
88
import {ShinyViews} from "../../../shiny.js"
9+
import {TabControl} from "../../../components/tabs/control.js"
910
import {foundationCss} from "../../../components/foundation.css.js"
10-
import { TabControl } from "../../../components/tabs/control.js"
1111

1212
export type ExhibitParams = {
1313
label: string
@@ -27,8 +27,8 @@ export const Exhibit = view(use => (
2727
use.styles(foundationCss, styleCss, showcaseStyle, exhibit.style)
2828

2929
const snippetControl = use.once(() => new TabControl())
30-
const snippet = exhibit.snippets.at(snippetControl.index)!
31-
const code = untab(snippet.code)
30+
const snippet = exhibit.snippets.at(snippetControl.index)
31+
const code = snippet ? untab(snippet.code).trim() : ""
3232

3333
return html`
3434
<div class=meta>

0 commit comments

Comments
 (0)