From 7831766fa0da53aa7f5d188ffb9e15efd0106d66 Mon Sep 17 00:00:00 2001
From: Antony Jones <ant@enzy.org>
Date: Thu, 27 Feb 2020 11:40:42 +0000
Subject: [PATCH] site: turn fancybutton into custombutton (#4476)

---
 .../05-dom-event-forwarding/App.svelte        |   4 ++--
 .../CustomButton.svelte                       |  22 ++++++++++++++++++
 .../FancyButton.svelte                        |  15 ------------
 .../06-dom-event-forwarding/app-a/App.svelte  |   4 ++--
 .../app-a/CustomButton.svelte                 |  22 ++++++++++++++++++
 .../app-a/FancyButton.svelte                  |  15 ------------
 .../06-dom-event-forwarding/app-b/App.svelte  |   4 ++--
 .../app-b/CustomButton.svelte                 |  22 ++++++++++++++++++
 .../app-b/FancyButton.svelte                  |  15 ------------
 .../05-events/06-dom-event-forwarding/text.md |   2 +-
 .../thumbnails/dom-event-forwarding.jpg       | Bin 4128 -> 2409 bytes
 .../samples/extended-builtin/_config.js       |   8 +++----
 .../samples/extended-builtin/custom-button.js |   2 ++
 .../samples/extended-builtin/fancy-button.js  |   2 --
 .../samples/extended-builtin/main.svelte      |   4 ++--
 .../samples/extended-builtin/test.js          |   2 +-
 16 files changed, 82 insertions(+), 61 deletions(-)
 create mode 100644 site/content/examples/04-events/05-dom-event-forwarding/CustomButton.svelte
 delete mode 100644 site/content/examples/04-events/05-dom-event-forwarding/FancyButton.svelte
 create mode 100644 site/content/tutorial/05-events/06-dom-event-forwarding/app-a/CustomButton.svelte
 delete mode 100644 site/content/tutorial/05-events/06-dom-event-forwarding/app-a/FancyButton.svelte
 create mode 100644 site/content/tutorial/05-events/06-dom-event-forwarding/app-b/CustomButton.svelte
 delete mode 100644 site/content/tutorial/05-events/06-dom-event-forwarding/app-b/FancyButton.svelte
 create mode 100644 test/custom-elements/samples/extended-builtin/custom-button.js
 delete mode 100644 test/custom-elements/samples/extended-builtin/fancy-button.js

diff --git a/site/content/examples/04-events/05-dom-event-forwarding/App.svelte b/site/content/examples/04-events/05-dom-event-forwarding/App.svelte
index 1429cae207..e75c78106a 100644
--- a/site/content/examples/04-events/05-dom-event-forwarding/App.svelte
+++ b/site/content/examples/04-events/05-dom-event-forwarding/App.svelte
@@ -1,9 +1,9 @@
 <script>
-	import FancyButton from './FancyButton.svelte';
+	import CustomButton from './CustomButton.svelte';
 
 	function handleClick() {
 		alert('clicked');
 	}
 </script>
 
-<FancyButton on:click={handleClick}/>
\ No newline at end of file
+<CustomButton on:click={handleClick}/>
\ No newline at end of file
diff --git a/site/content/examples/04-events/05-dom-event-forwarding/CustomButton.svelte b/site/content/examples/04-events/05-dom-event-forwarding/CustomButton.svelte
new file mode 100644
index 0000000000..f521c1f471
--- /dev/null
+++ b/site/content/examples/04-events/05-dom-event-forwarding/CustomButton.svelte
@@ -0,0 +1,22 @@
+<style>
+	button {
+		height: 4rem;
+		width: 8rem;
+		background-color: #aaa;
+		border-color: #f1c40f;
+		color: #f1c40f;
+		font-size: 1.25rem;
+		background-image: linear-gradient(45deg, #f1c40f 50%, transparent 50%);
+		background-position: 100%;
+		background-size: 400%;
+		transition: background 300ms ease-in-out;
+	}
+	button:hover {
+		background-position: 0;
+		color: #aaa;
+	}
+</style>
+
+<button on:click>
+	Click me
+</button>
\ No newline at end of file
diff --git a/site/content/examples/04-events/05-dom-event-forwarding/FancyButton.svelte b/site/content/examples/04-events/05-dom-event-forwarding/FancyButton.svelte
deleted file mode 100644
index 68dcc68636..0000000000
--- a/site/content/examples/04-events/05-dom-event-forwarding/FancyButton.svelte
+++ /dev/null
@@ -1,15 +0,0 @@
-<style>
-	button {
-		font-family: 'Comic Sans MS', cursive;
-		font-size: 2em;
-		padding: 0.5em 1em;
-		color: royalblue;
-		background: gold;
-		border-radius: 1em;
-		box-shadow: 2px 2px 4px rgba(0,0,0,0.5);
-	}
-</style>
-
-<button on:click>
-	Click me
-</button>
\ No newline at end of file
diff --git a/site/content/tutorial/05-events/06-dom-event-forwarding/app-a/App.svelte b/site/content/tutorial/05-events/06-dom-event-forwarding/app-a/App.svelte
index 1429cae207..e75c78106a 100644
--- a/site/content/tutorial/05-events/06-dom-event-forwarding/app-a/App.svelte
+++ b/site/content/tutorial/05-events/06-dom-event-forwarding/app-a/App.svelte
@@ -1,9 +1,9 @@
 <script>
-	import FancyButton from './FancyButton.svelte';
+	import CustomButton from './CustomButton.svelte';
 
 	function handleClick() {
 		alert('clicked');
 	}
 </script>
 
-<FancyButton on:click={handleClick}/>
\ No newline at end of file
+<CustomButton on:click={handleClick}/>
\ No newline at end of file
diff --git a/site/content/tutorial/05-events/06-dom-event-forwarding/app-a/CustomButton.svelte b/site/content/tutorial/05-events/06-dom-event-forwarding/app-a/CustomButton.svelte
new file mode 100644
index 0000000000..0955930b5d
--- /dev/null
+++ b/site/content/tutorial/05-events/06-dom-event-forwarding/app-a/CustomButton.svelte
@@ -0,0 +1,22 @@
+<style>
+	button {
+		height: 4rem;
+		width: 8rem;
+		background-color: #aaa;
+		border-color: #f1c40f;
+		color: #f1c40f;
+		font-size: 1.25rem;
+		background-image: linear-gradient(45deg, #f1c40f 50%, transparent 50%);
+		background-position: 100%;
+		background-size: 400%;
+		transition: background 300ms ease-in-out;
+	}
+	button:hover {
+		background-position: 0;
+		color: #aaa;
+	}
+</style>
+
+<button>
+	Click me
+</button>
\ No newline at end of file
diff --git a/site/content/tutorial/05-events/06-dom-event-forwarding/app-a/FancyButton.svelte b/site/content/tutorial/05-events/06-dom-event-forwarding/app-a/FancyButton.svelte
deleted file mode 100644
index b75f19a1f2..0000000000
--- a/site/content/tutorial/05-events/06-dom-event-forwarding/app-a/FancyButton.svelte
+++ /dev/null
@@ -1,15 +0,0 @@
-<style>
-	button {
-		font-family: 'Comic Sans MS', cursive;
-		font-size: 2em;
-		padding: 0.5em 1em;
-		color: royalblue;
-		background: gold;
-		border-radius: 1em;
-		box-shadow: 2px 2px 4px rgba(0,0,0,0.5);
-	}
-</style>
-
-<button>
-	Click me
-</button>
\ No newline at end of file
diff --git a/site/content/tutorial/05-events/06-dom-event-forwarding/app-b/App.svelte b/site/content/tutorial/05-events/06-dom-event-forwarding/app-b/App.svelte
index 1429cae207..e75c78106a 100644
--- a/site/content/tutorial/05-events/06-dom-event-forwarding/app-b/App.svelte
+++ b/site/content/tutorial/05-events/06-dom-event-forwarding/app-b/App.svelte
@@ -1,9 +1,9 @@
 <script>
-	import FancyButton from './FancyButton.svelte';
+	import CustomButton from './CustomButton.svelte';
 
 	function handleClick() {
 		alert('clicked');
 	}
 </script>
 
-<FancyButton on:click={handleClick}/>
\ No newline at end of file
+<CustomButton on:click={handleClick}/>
\ No newline at end of file
diff --git a/site/content/tutorial/05-events/06-dom-event-forwarding/app-b/CustomButton.svelte b/site/content/tutorial/05-events/06-dom-event-forwarding/app-b/CustomButton.svelte
new file mode 100644
index 0000000000..f521c1f471
--- /dev/null
+++ b/site/content/tutorial/05-events/06-dom-event-forwarding/app-b/CustomButton.svelte
@@ -0,0 +1,22 @@
+<style>
+	button {
+		height: 4rem;
+		width: 8rem;
+		background-color: #aaa;
+		border-color: #f1c40f;
+		color: #f1c40f;
+		font-size: 1.25rem;
+		background-image: linear-gradient(45deg, #f1c40f 50%, transparent 50%);
+		background-position: 100%;
+		background-size: 400%;
+		transition: background 300ms ease-in-out;
+	}
+	button:hover {
+		background-position: 0;
+		color: #aaa;
+	}
+</style>
+
+<button on:click>
+	Click me
+</button>
\ No newline at end of file
diff --git a/site/content/tutorial/05-events/06-dom-event-forwarding/app-b/FancyButton.svelte b/site/content/tutorial/05-events/06-dom-event-forwarding/app-b/FancyButton.svelte
deleted file mode 100644
index 68dcc68636..0000000000
--- a/site/content/tutorial/05-events/06-dom-event-forwarding/app-b/FancyButton.svelte
+++ /dev/null
@@ -1,15 +0,0 @@
-<style>
-	button {
-		font-family: 'Comic Sans MS', cursive;
-		font-size: 2em;
-		padding: 0.5em 1em;
-		color: royalblue;
-		background: gold;
-		border-radius: 1em;
-		box-shadow: 2px 2px 4px rgba(0,0,0,0.5);
-	}
-</style>
-
-<button on:click>
-	Click me
-</button>
\ No newline at end of file
diff --git a/site/content/tutorial/05-events/06-dom-event-forwarding/text.md b/site/content/tutorial/05-events/06-dom-event-forwarding/text.md
index 0959e1d98b..be9ae77f89 100644
--- a/site/content/tutorial/05-events/06-dom-event-forwarding/text.md
+++ b/site/content/tutorial/05-events/06-dom-event-forwarding/text.md
@@ -4,7 +4,7 @@ title: DOM event forwarding
 
 Event forwarding works for DOM events too.
 
-We want to get notified of clicks on our `<FancyButton>` — to do that, we just need to forward `click` events on the `<button>` element in `FancyButton.svelte`:
+We want to get notified of clicks on our `<CustomButton>` — to do that, we just need to forward `click` events on the `<button>` element in `CustomButton.svelte`:
 
 ```html
 <button on:click>
diff --git a/site/static/examples/thumbnails/dom-event-forwarding.jpg b/site/static/examples/thumbnails/dom-event-forwarding.jpg
index 307acde39d7a2e75f7f2faab9763d87b063662be..0992aef1fdca6eb4d786b03e988307aa9c423c02 100644
GIT binary patch
literal 2409
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
M1~UFW*(jI&4pE++;s5{u

literal 4128
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

diff --git a/test/custom-elements/samples/extended-builtin/_config.js b/test/custom-elements/samples/extended-builtin/_config.js
index 08580e780a..cbd57acc65 100644
--- a/test/custom-elements/samples/extended-builtin/_config.js
+++ b/test/custom-elements/samples/extended-builtin/_config.js
@@ -2,15 +2,15 @@ export default {
 	warnings: [{
 		code: "avoid-is",
 		message: "The 'is' attribute is not supported cross-browser and should be avoided",
-		pos: 97,
+		pos: 98,
 		start: {
-			character: 97,
+			character: 98,
 			column: 8,
 			line: 7
 		},
 		end: {
-			character: 114,
-			column: 25,
+			character: 116,
+			column: 26,
 			line: 7
 		}
 	}]
diff --git a/test/custom-elements/samples/extended-builtin/custom-button.js b/test/custom-elements/samples/extended-builtin/custom-button.js
new file mode 100644
index 0000000000..9134b2af9f
--- /dev/null
+++ b/test/custom-elements/samples/extended-builtin/custom-button.js
@@ -0,0 +1,2 @@
+class CustomButton extends HTMLButtonElement {}
+customElements.define('custom-button', CustomButton, { extends: 'button' });
\ No newline at end of file
diff --git a/test/custom-elements/samples/extended-builtin/fancy-button.js b/test/custom-elements/samples/extended-builtin/fancy-button.js
deleted file mode 100644
index eaa7d84135..0000000000
--- a/test/custom-elements/samples/extended-builtin/fancy-button.js
+++ /dev/null
@@ -1,2 +0,0 @@
-class FancyButton extends HTMLButtonElement {}
-customElements.define('fancy-button', FancyButton, { extends: 'button' });
\ No newline at end of file
diff --git a/test/custom-elements/samples/extended-builtin/main.svelte b/test/custom-elements/samples/extended-builtin/main.svelte
index 0919d9585e..3f1b59db53 100644
--- a/test/custom-elements/samples/extended-builtin/main.svelte
+++ b/test/custom-elements/samples/extended-builtin/main.svelte
@@ -1,7 +1,7 @@
 <svelte:options tag="custom-element"/>
 
 <script>
-	import './fancy-button.js';
+	import './custom-button.js';
 </script>
 
-<button is="fancy-button">click me</button>
\ No newline at end of file
+<button is="custom-button">click me</button>
\ No newline at end of file
diff --git a/test/custom-elements/samples/extended-builtin/test.js b/test/custom-elements/samples/extended-builtin/test.js
index d676fd137b..3886ae1149 100644
--- a/test/custom-elements/samples/extended-builtin/test.js
+++ b/test/custom-elements/samples/extended-builtin/test.js
@@ -11,5 +11,5 @@ export default function (target) {
 	const el = target.querySelector('custom-element');
 	const button = el.shadowRoot.querySelector('button');
 
-	assert.ok(button instanceof customElements.get('fancy-button'));
+	assert.ok(button instanceof customElements.get('custom-button'));
 }
\ No newline at end of file