From 6c4ccbbc1a1f3074093422f648010d496631e599 Mon Sep 17 00:00:00 2001
From: Rich Harris <richard.a.harris@gmail.com>
Date: Tue, 5 Mar 2019 21:10:28 -0500
Subject: [PATCH] spruce up slot examples

---
 .../14-composition/01-slots/app-a/Box.svelte  |  8 +++-
 .../14-composition/01-slots/app-b/Box.svelte  |  8 +++-
 .../02-slot-fallbacks/app-a/App.svelte        |  8 ++++
 .../02-slot-fallbacks/app-a/Box.svelte        | 14 ++++++
 .../02-slot-fallbacks/app-b/App.svelte        | 10 ++++
 .../02-slot-fallbacks/app-b/Box.svelte        | 16 +++++++
 .../14-composition/02-slot-fallbacks/text.md  | 24 ++++++++++
 .../03-named-slots/app-a/App.svelte           |  7 +++
 .../03-named-slots/app-a/ContactCard.svelte   | 47 +++++++++++++++++++
 .../03-named-slots/app-b/App.svelte           | 14 ++++++
 .../03-named-slots/app-b/ContactCard.svelte   | 47 +++++++++++++++++++
 .../14-composition/03-named-slots/text.md     | 44 +++++++++++++++++
 site/static/tutorial/icons/email.svg          |  4 ++
 site/static/tutorial/icons/map-marker.svg     |  4 ++
 14 files changed, 251 insertions(+), 4 deletions(-)
 create mode 100644 site/content/tutorial/14-composition/02-slot-fallbacks/app-a/App.svelte
 create mode 100644 site/content/tutorial/14-composition/02-slot-fallbacks/app-a/Box.svelte
 create mode 100644 site/content/tutorial/14-composition/02-slot-fallbacks/app-b/App.svelte
 create mode 100644 site/content/tutorial/14-composition/02-slot-fallbacks/app-b/Box.svelte
 create mode 100644 site/content/tutorial/14-composition/02-slot-fallbacks/text.md
 create mode 100644 site/content/tutorial/14-composition/03-named-slots/app-a/App.svelte
 create mode 100644 site/content/tutorial/14-composition/03-named-slots/app-a/ContactCard.svelte
 create mode 100644 site/content/tutorial/14-composition/03-named-slots/app-b/App.svelte
 create mode 100644 site/content/tutorial/14-composition/03-named-slots/app-b/ContactCard.svelte
 create mode 100644 site/content/tutorial/14-composition/03-named-slots/text.md
 create mode 100644 site/static/tutorial/icons/email.svg
 create mode 100644 site/static/tutorial/icons/map-marker.svg

diff --git a/site/content/tutorial/14-composition/01-slots/app-a/Box.svelte b/site/content/tutorial/14-composition/01-slots/app-a/Box.svelte
index 9b3b7c22f9..62f0b92dc0 100644
--- a/site/content/tutorial/14-composition/01-slots/app-a/Box.svelte
+++ b/site/content/tutorial/14-composition/01-slots/app-a/Box.svelte
@@ -1,7 +1,11 @@
 <style>
 	.box {
-		border: 2px solid black;
-		padding: 0.5em;
+		width: 300px;
+		border: 1px solid #aaa;
+		border-radius: 2px;
+		box-shadow: 2px 2px 8px rgba(0,0,0,0.1);
+		padding: 1em;
+		margin: 0 0 1em 0;
 	}
 </style>
 
diff --git a/site/content/tutorial/14-composition/01-slots/app-b/Box.svelte b/site/content/tutorial/14-composition/01-slots/app-b/Box.svelte
index 4a6a89aa3c..7ed13f386f 100644
--- a/site/content/tutorial/14-composition/01-slots/app-b/Box.svelte
+++ b/site/content/tutorial/14-composition/01-slots/app-b/Box.svelte
@@ -1,7 +1,11 @@
 <style>
 	.box {
-		border: 2px solid black;
-		padding: 0.5em;
+		width: 300px;
+		border: 1px solid #aaa;
+		border-radius: 2px;
+		box-shadow: 2px 2px 8px rgba(0,0,0,0.1);
+		padding: 1em;
+		margin: 0 0 1em 0;
 	}
 </style>
 
diff --git a/site/content/tutorial/14-composition/02-slot-fallbacks/app-a/App.svelte b/site/content/tutorial/14-composition/02-slot-fallbacks/app-a/App.svelte
new file mode 100644
index 0000000000..cd0ebde935
--- /dev/null
+++ b/site/content/tutorial/14-composition/02-slot-fallbacks/app-a/App.svelte
@@ -0,0 +1,8 @@
+<script>
+	import Box from './Box.svelte';
+</script>
+
+<Box>
+	<h2>Hello!</h2>
+	<p>This is a box. It can contain anything.</p>
+</Box>
\ No newline at end of file
diff --git a/site/content/tutorial/14-composition/02-slot-fallbacks/app-a/Box.svelte b/site/content/tutorial/14-composition/02-slot-fallbacks/app-a/Box.svelte
new file mode 100644
index 0000000000..7ed13f386f
--- /dev/null
+++ b/site/content/tutorial/14-composition/02-slot-fallbacks/app-a/Box.svelte
@@ -0,0 +1,14 @@
+<style>
+	.box {
+		width: 300px;
+		border: 1px solid #aaa;
+		border-radius: 2px;
+		box-shadow: 2px 2px 8px rgba(0,0,0,0.1);
+		padding: 1em;
+		margin: 0 0 1em 0;
+	}
+</style>
+
+<div class="box">
+	<slot></slot>
+</div>
\ No newline at end of file
diff --git a/site/content/tutorial/14-composition/02-slot-fallbacks/app-b/App.svelte b/site/content/tutorial/14-composition/02-slot-fallbacks/app-b/App.svelte
new file mode 100644
index 0000000000..e30be6d1fc
--- /dev/null
+++ b/site/content/tutorial/14-composition/02-slot-fallbacks/app-b/App.svelte
@@ -0,0 +1,10 @@
+<script>
+	import Box from './Box.svelte';
+</script>
+
+<Box>
+	<h2>Hello!</h2>
+	<p>This is a box. It can contain anything.</p>
+</Box>
+
+<Box/>
\ No newline at end of file
diff --git a/site/content/tutorial/14-composition/02-slot-fallbacks/app-b/Box.svelte b/site/content/tutorial/14-composition/02-slot-fallbacks/app-b/Box.svelte
new file mode 100644
index 0000000000..66c580632c
--- /dev/null
+++ b/site/content/tutorial/14-composition/02-slot-fallbacks/app-b/Box.svelte
@@ -0,0 +1,16 @@
+<style>
+	.box {
+		width: 300px;
+		border: 1px solid #aaa;
+		border-radius: 2px;
+		box-shadow: 2px 2px 8px rgba(0,0,0,0.1);
+		padding: 1em;
+		margin: 0 0 1em 0;
+	}
+</style>
+
+<div class="box">
+	<slot>
+		<em>no content was provided</em>
+	</slot>
+</div>
\ No newline at end of file
diff --git a/site/content/tutorial/14-composition/02-slot-fallbacks/text.md b/site/content/tutorial/14-composition/02-slot-fallbacks/text.md
new file mode 100644
index 0000000000..c8fbde91dc
--- /dev/null
+++ b/site/content/tutorial/14-composition/02-slot-fallbacks/text.md
@@ -0,0 +1,24 @@
+---
+title: Slot fallbacks
+---
+
+A component can specify *fallbacks* for any slots that are left empty, by putting content inside the `<slot>` element:
+
+```html
+<div class="box">
+	<slot>
+		<em>no content was provided</em>
+	</slot>
+</div>
+```
+
+We can now create instances of `<Box>` eithout any children:
+
+```html
+<Box>
+	<h2>Hello!</h2>
+	<p>This is a box. It can contain anything.</p>
+</Box>
+
+<Box/>
+```
\ No newline at end of file
diff --git a/site/content/tutorial/14-composition/03-named-slots/app-a/App.svelte b/site/content/tutorial/14-composition/03-named-slots/app-a/App.svelte
new file mode 100644
index 0000000000..c15b38ad1c
--- /dev/null
+++ b/site/content/tutorial/14-composition/03-named-slots/app-a/App.svelte
@@ -0,0 +1,7 @@
+<script>
+	import ContactCard from './ContactCard.html';
+</script>
+
+<ContactCard>
+	<!-- contact details go here -->
+</ContactCard>
\ No newline at end of file
diff --git a/site/content/tutorial/14-composition/03-named-slots/app-a/ContactCard.svelte b/site/content/tutorial/14-composition/03-named-slots/app-a/ContactCard.svelte
new file mode 100644
index 0000000000..c09404a282
--- /dev/null
+++ b/site/content/tutorial/14-composition/03-named-slots/app-a/ContactCard.svelte
@@ -0,0 +1,47 @@
+<style>
+	.contact-card {
+		width: 300px;
+		border: 1px solid #aaa;
+		border-radius: 2px;
+		box-shadow: 2px 2px 8px rgba(0,0,0,0.1);
+		padding: 1em;
+	}
+
+	h2 {
+		padding: 0 0 0.2em 0;
+		margin: 0 0 1em 0;
+		border-bottom: 1px solid #ff3e00
+	}
+
+	.address, .email {
+		padding: 0 0 0 1.5em;
+		background:  0 50% no-repeat;
+		background-size: 1em 1em;
+		margin: 0 0 0.5em 0;
+		line-height: 1.2;
+	}
+
+	.address { background-image: url(tutorial/icons/map-marker.svg) }
+	.email   { background-image: url(tutorial/icons/email.svg) }
+	.missing { color: #999 }
+</style>
+
+<article class="contact-card">
+	<h2>
+		<slot>
+			<span class="missing">Unknown name</span>
+		</slot>
+	</h2>
+
+	<div class="address">
+		<slot>
+			<span class="missing">Unknown address</span>
+		</slot>
+	</div>
+
+	<div class="email">
+		<slot>
+			<span class="missing">Unknown email</span>
+		</slot>
+	</div>
+</article>
\ No newline at end of file
diff --git a/site/content/tutorial/14-composition/03-named-slots/app-b/App.svelte b/site/content/tutorial/14-composition/03-named-slots/app-b/App.svelte
new file mode 100644
index 0000000000..8047809359
--- /dev/null
+++ b/site/content/tutorial/14-composition/03-named-slots/app-b/App.svelte
@@ -0,0 +1,14 @@
+<script>
+	import ContactCard from './ContactCard.html';
+</script>
+
+<ContactCard>
+	<span slot="name">
+		P. Sherman
+	</span>
+
+	<span slot="address">
+		42 Wallaby Way<br>
+		Sydney
+	</span>
+</ContactCard>
\ No newline at end of file
diff --git a/site/content/tutorial/14-composition/03-named-slots/app-b/ContactCard.svelte b/site/content/tutorial/14-composition/03-named-slots/app-b/ContactCard.svelte
new file mode 100644
index 0000000000..1acf290943
--- /dev/null
+++ b/site/content/tutorial/14-composition/03-named-slots/app-b/ContactCard.svelte
@@ -0,0 +1,47 @@
+<style>
+	.contact-card {
+		width: 300px;
+		border: 1px solid #aaa;
+		border-radius: 2px;
+		box-shadow: 2px 2px 8px rgba(0,0,0,0.1);
+		padding: 1em;
+	}
+
+	h2 {
+		padding: 0 0 0.2em 0;
+		margin: 0 0 1em 0;
+		border-bottom: 1px solid #ff3e00
+	}
+
+	.address, .email {
+		padding: 0 0 0 1.5em;
+		background:  0 0 no-repeat;
+		background-size: 20px 20px;
+		margin: 0 0 0.5em 0;
+		line-height: 1.2;
+	}
+
+	.address { background-image: url(tutorial/icons/map-marker.svg) }
+	.email   { background-image: url(tutorial/icons/email.svg) }
+	.missing { color: #999 }
+</style>
+
+<article class="contact-card">
+	<h2>
+		<slot name="name">
+			<span class="missing">Unknown name</span>
+		</slot>
+	</h2>
+
+	<div class="address">
+		<slot name="address">
+			<span class="missing">Unknown address</span>
+		</slot>
+	</div>
+
+	<div class="email">
+		<slot name="email">
+			<span class="missing">Unknown email</span>
+		</slot>
+	</div>
+</article>
\ No newline at end of file
diff --git a/site/content/tutorial/14-composition/03-named-slots/text.md b/site/content/tutorial/14-composition/03-named-slots/text.md
new file mode 100644
index 0000000000..169f028830
--- /dev/null
+++ b/site/content/tutorial/14-composition/03-named-slots/text.md
@@ -0,0 +1,44 @@
+---
+title: Named slots
+---
+
+The previous example contained a *default slot*, which renders the direct children of a component. Sometimes you will need more control over placement, such as with this `<ContactCard>`. In those cases, we can use *named slots*.
+
+In `ContactCard.svelte`, add a `name` attribute to each slot:
+
+```html
+<article class="contact-card">
+	<h2>
+		<slot name="name">
+			<span class="missing">Unknown name</span>
+		</slot>
+	</h2>
+
+	<div class="address">
+		<slot name="address">
+			<span class="missing">Unknown address</span>
+		</slot>
+	</div>
+
+	<div class="email">
+		<slot name="email">
+			<span class="missing">Unknown email</span>
+		</slot>
+	</div>
+</article>
+```
+
+Then, add elements with corresponding `slot="..."` attributes inside the `<ContactCard>` component:
+
+```html
+<ContactCard>
+	<span slot="name">
+		P. Sherman
+	</span>
+
+	<span slot="address">
+		42 Wallaby Way<br>
+		Sydney
+	</span>
+</ContactCard>
+```
\ No newline at end of file
diff --git a/site/static/tutorial/icons/email.svg b/site/static/tutorial/icons/email.svg
new file mode 100644
index 0000000000..db656054ff
--- /dev/null
+++ b/site/static/tutorial/icons/email.svg
@@ -0,0 +1,4 @@
+<?xml version="1.0" encoding="utf-8"?>
+<svg xmlns="http://www.w3.org/2000/svg" style="width:24px;height:24px" viewBox="0 0 24 24">
+	<path fill="#ff3e00" d="M20,8L12,13L4,8V6L12,11L20,6M20,4H4C2.89,4 2,4.89 2,6V18A2,2 0 0,0 4,20H20A2,2 0 0,0 22,18V6C22,4.89 21.1,4 20,4Z" />
+</svg>
\ No newline at end of file
diff --git a/site/static/tutorial/icons/map-marker.svg b/site/static/tutorial/icons/map-marker.svg
new file mode 100644
index 0000000000..4e9466c7bd
--- /dev/null
+++ b/site/static/tutorial/icons/map-marker.svg
@@ -0,0 +1,4 @@
+<?xml version="1.0" encoding="utf-8"?>
+<svg xmlns="http://www.w3.org/2000/svg" style="width:24px;height:24px" viewBox="0 0 24 24">
+	<path fill="#ff3e00" d="M12,11.5A2.5,2.5 0 0,1 9.5,9A2.5,2.5 0 0,1 12,6.5A2.5,2.5 0 0,1 14.5,9A2.5,2.5 0 0,1 12,11.5M12,2A7,7 0 0,0 5,9C5,14.25 12,22 12,22C12,22 19,14.25 19,9A7,7 0 0,0 12,2Z" />
+</svg>
\ No newline at end of file