Skip to content

Commit 9ad798c

Browse files
chase-moskalchase-moskal
committed
add: copy showcase, add fail demo
1 parent 7baead2 commit 9ad798c

File tree

3 files changed

+57
-109
lines changed

3 files changed

+57
-109
lines changed

‎s/components/copy/component.ts‎

Lines changed: 3 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -33,6 +33,8 @@ export class ShinyCopy extends (
3333
async function click() {
3434
if (text === undefined) return
3535
try {
36+
if (use.attrs.booleans.fail)
37+
throw new Error("copy failed on purpose for testing purposes")
3638
await navigator.clipboard.writeText(text)
3739
await statusFlash("good")
3840
}
@@ -47,7 +49,7 @@ export class ShinyCopy extends (
4749
case "invalid": return clipboardSvg
4850
case "good": return clipboardCheckFilledSvg
4951
case "bad": return clipboardXFilledSvg
50-
default: throw new Error(`invalid copy status`)
52+
default: throw new Error(`unknown copy status`)
5153
}})()
5254

5355
return html`

‎s/components/copy/showcase.ts‎

Lines changed: 51 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,51 @@
1+
2+
import {css, html} from "lit"
3+
import {Showcase} from "../../demo/views/showcase/view.js"
4+
5+
const cssSnippet = `
6+
shiny-copy {
7+
font-size: 1em;
8+
--happy: #0fa;
9+
--angry: #f50;
10+
--lame: #8888;
11+
--inactive-opacity: 0.5;
12+
}
13+
`
14+
15+
export const copyShowcase = Showcase({
16+
name: "copy",
17+
style: css`
18+
.box {
19+
> * { font-size: 6em; }
20+
}
21+
`,
22+
exhibits: [
23+
{
24+
label: "succeed",
25+
explain: html`<p>click-to-copy text button.</p>`,
26+
snippets: [
27+
{label: "html", code: `<shiny-copy text="hello world"></shiny-button>`},
28+
{label: "view", code: `ShinyCopy("hello world")`},
29+
{label: "css", code: cssSnippet},
30+
],
31+
style: css``,
32+
presentation: views => html`
33+
${views.ShinyCopy("hello world")}
34+
`,
35+
},
36+
{
37+
label: "fail",
38+
explain: html`<p>copy text button, deliberately fails so you can see.</p>`,
39+
snippets: [
40+
{label: "html", code: `<shiny-copy fail></shiny-button>`},
41+
{label: "view", code: `ShinyCopy.props("").attr("fail").render()`},
42+
{label: "css", code: cssSnippet},
43+
],
44+
style: css``,
45+
presentation: views => html`
46+
${views.ShinyCopy.props("").attr("fail").render()}
47+
`,
48+
},
49+
],
50+
})
51+

‎s/demo/demo.bundle.ts‎

Lines changed: 3 additions & 108 deletions
Original file line numberDiff line numberDiff line change
@@ -3,7 +3,8 @@ 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"
6+
import {copyShowcase} from "../components/copy/showcase.js"
7+
import {buttonShowcase} from "../components/button/showcase.js"
78

89
const dispenser = makeLipsumDispenser()
910
const lipsum = () => dispenser.takeFirst()
@@ -38,84 +39,8 @@ dom.register({ShinyDemo: view.component(use => {
3839

3940
const demonstrations = [
4041
buttonShowcase,
42+
copyShowcase,
4143

42-
// Demonstration({
43-
// name: "button",
44-
// explain: html`
45-
// <p>clicky-clacky pressy button.</p>
46-
// `,
47-
// snippets: [
48-
// [labels.html, `
49-
// <shiny-button>hello</shiny-button>
50-
// `],
51-
// [labels.view, `
52-
// ShinyButton
53-
// .props()
54-
// .children("hello")
55-
// .render()
56-
// `],
57-
// [labels.css, `
58-
// shiny-button {
59-
// font-size: 1em;
60-
// --happy: #0fa;
61-
// --angry: #f50;
62-
// --lame: #8888;
63-
// --inactive-opacity: 0.5;
64-
// }
65-
// `],
66-
// ],
67-
// content: [
68-
// views.ShinyButton.props()
69-
// .children("button")
70-
// .render(),
71-
// views.ShinyButton.props()
72-
// .attr("gradient", true)
73-
// .children("gradient")
74-
// .render(),
75-
// views.ShinyButton.props()
76-
// .attr("angry", true)
77-
// .attr("gradient", true)
78-
// .children("angry")
79-
// .render(),
80-
// views.ShinyButton.props()
81-
// .attr("happy", true)
82-
// .attr("gradient", true)
83-
// .children("happy")
84-
// .render(),
85-
// views.ShinyButton.props()
86-
// .attr("zesty", true)
87-
// .attr("gradient", true)
88-
// .children("zesty")
89-
// .render(),
90-
// views.ShinyButton.props()
91-
// .attr("sad", true)
92-
// .attr("gradient", true)
93-
// .children("sad")
94-
// .render(),
95-
// views.ShinyButton.props()
96-
// .attr("quirky", true)
97-
// .attr("gradient", true)
98-
// .children("quirky")
99-
// .render(),
100-
// views.ShinyButton.props()
101-
// .attr("plain", true)
102-
// .children("plain")
103-
// .render(),
104-
// ],
105-
// style: css`
106-
// .content {
107-
// flex-direction: row;
108-
// flex-wrap: wrap;
109-
// align-content: center;
110-
// gap: 0.5em;
111-
//
112-
// sly-view {
113-
// font-size: 1.2em;
114-
// }
115-
// }
116-
// `,
117-
// }),
118-
//
11944
// Demonstration({
12045
// name: "tabs",
12146
// explain: html`
@@ -176,36 +101,6 @@ dom.register({ShinyDemo: view.component(use => {
176101
// }),
177102
//
178103
// Demonstration({
179-
// name: "copy",
180-
// explain: html`
181-
// <p>click-to-copy text button.</p>
182-
// `,
183-
// snippets: [
184-
// [labels.html, `
185-
// <shiny-copy text="hello world"></shiny-copy>
186-
// `],
187-
// [labels.view, `
188-
// ShinyCopy("hello world")
189-
// `],
190-
// [labels.css, `
191-
// shiny-copy {
192-
// font-size: 1em;
193-
// --happy: #0fa;
194-
// --angry: #f50;
195-
// --lame: #8888;
196-
// --inactive-opacity: 0.5;
197-
// }
198-
// `],
199-
// ],
200-
// content: views.ShinyCopy("hello world"),
201-
// style: css`
202-
// .content sly-view {
203-
// font-size: 4em;
204-
// }
205-
// `,
206-
// }),
207-
//
208-
// Demonstration({
209104
// name: "drawer",
210105
// explain: html`
211106
// <p>slide-out panel. button optional.</p>

0 commit comments

Comments
 (0)