From 3d9ea27f60d5b947a42b8a7d23bfcab97c849934 Mon Sep 17 00:00:00 2001
From: Antony Jones <aj@desirableobjects.co.uk>
Date: Wed, 26 Feb 2020 17:25:45 +0000
Subject: [PATCH] turn fancybutton into custombutton

---
 .../05-dom-event-forwarding/App.svelte        |  4 ++--
 .../CustomButton.svelte                       | 22 +++++++++++++++++++
 .../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}                |  0
 .../app-b/FancyButton.svelte                  | 15 -------------
 .../05-events/06-dom-event-forwarding/text.md |  2 +-
 .../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 +-
 13 files changed, 56 insertions(+), 42 deletions(-)
 create mode 100644 site/content/examples/04-events/05-dom-event-forwarding/CustomButton.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
 rename site/content/{examples/04-events/05-dom-event-forwarding/FancyButton.svelte => tutorial/05-events/06-dom-event-forwarding/app-b/CustomButton.svelte} (100%)
 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/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/examples/04-events/05-dom-event-forwarding/FancyButton.svelte b/site/content/tutorial/05-events/06-dom-event-forwarding/app-b/CustomButton.svelte
similarity index 100%
rename from site/content/examples/04-events/05-dom-event-forwarding/FancyButton.svelte
rename to site/content/tutorial/05-events/06-dom-event-forwarding/app-b/CustomButton.svelte
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/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