From 99036dbff8e49572dc15ca723392e5c6720de235 Mon Sep 17 00:00:00 2001
From: Solomon Himelbloom <2001solomon@gmail.com>
Date: Sun, 9 Aug 2020 13:00:26 -0800
Subject: [PATCH 1/5] Boilerplate thumbnav code

---
 src/README.md                              |  1 +
 src/Thumbnav/README.md                     | 19 +++++++++++++++++++
 src/Thumbnav/Thumbnav.svelte               |  9 +++++++++
 src/index.js                               |  2 ++
 stories/Thumbnav.stories.js                | 19 +++++++++++++++++++
 stories/views/Thumbnav/ThumbnavView.svelte | 17 +++++++++++++++++
 6 files changed, 67 insertions(+)
 create mode 100644 src/Thumbnav/README.md
 create mode 100644 src/Thumbnav/Thumbnav.svelte
 create mode 100644 stories/Thumbnav.stories.js
 create mode 100644 stories/views/Thumbnav/ThumbnavView.svelte

diff --git a/src/README.md b/src/README.md
index 93410f1..a54f566 100644
--- a/src/README.md
+++ b/src/README.md
@@ -19,4 +19,5 @@
 - [Flex](Flex#flex)
 - [List](List#list)
 - [Tile](Tile#tile)
+- [Thumbnav](Thumbnav#thumbnav)
 - [Width](helpers#width)
diff --git a/src/Thumbnav/README.md b/src/Thumbnav/README.md
new file mode 100644
index 0000000..98c074f
--- /dev/null
+++ b/src/Thumbnav/README.md
@@ -0,0 +1,19 @@
+# ⚠️ This Section is a WIP ⚠️
+
+
+# Thumbnav
+> [UIKit documentation](https://getuikit.com/docs/thumbnav)
+
+> [Storybook](https://0c370t.github.io/Svelte-UIKit3/docs/?path=/story/Thumbnav--main)
+## Usage
+
+#### Props
+| name        | type  | description                  | see also                        |
+|-------------|-------|------------------------------|---------------------------------|
+
+#### Slots
+| name    | type | inside                 | description                               |
+|---------|------|------------------------|-------------------------------------------|
+
+#### Real Example
+> Note that all props are default values
diff --git a/src/Thumbnav/Thumbnav.svelte b/src/Thumbnav/Thumbnav.svelte
new file mode 100644
index 0000000..288550f
--- /dev/null
+++ b/src/Thumbnav/Thumbnav.svelte
@@ -0,0 +1,9 @@
+<script context="module">
+
+</script>
+
+<script>
+
+</script>
+
+<h3>Hello, world.</h3>
\ No newline at end of file
diff --git a/src/index.js b/src/index.js
index 5c75935..ae0a2b8 100644
--- a/src/index.js
+++ b/src/index.js
@@ -41,5 +41,7 @@ export {default as List, listOptions} from "./List/List.svelte";
 
 export {default as Tile, tileOptions} from "./Tile/Tile.svelte";
 
+export {default as Thumbnav} from "./Thumbnav/Thumbnav.svelte";
+
 export {uk_width} from "./helpers/width";
 export {uk_animate} from "./helpers/animation";
\ No newline at end of file
diff --git a/stories/Thumbnav.stories.js b/stories/Thumbnav.stories.js
new file mode 100644
index 0000000..7e60b92
--- /dev/null
+++ b/stories/Thumbnav.stories.js
@@ -0,0 +1,19 @@
+import ThumbnavView from "./views/Thumbnav/ThumbnavView.svelte";
+import {thumbnavOptions} from "../src";
+import {withKnobs, text, boolean, number, select} from "@storybook/addon-knobs";
+import {validWidths} from "../src/helpers/width";
+
+export default {
+    title: 'Thumbnav',
+    component: ThumbnavView,
+    decorators: [withKnobs]
+};
+
+export const Main = () => ({
+    Component: ThumbnavView,
+    props: {
+        props: {
+
+        },
+    }
+});
\ No newline at end of file
diff --git a/stories/views/Thumbnav/ThumbnavView.svelte b/stories/views/Thumbnav/ThumbnavView.svelte
new file mode 100644
index 0000000..9083685
--- /dev/null
+++ b/stories/views/Thumbnav/ThumbnavView.svelte
@@ -0,0 +1,17 @@
+<script>
+    import {Thumbnav} from "../../../src"
+    export let props = {}
+
+</script>
+
+<ul>
+    <li>
+        Lorem ipsum dolor sit amet, consectetur adipisicing elit.
+    </li>
+    <li>
+        Lorem ipsum dolor sit amet, consectetur adipisicing elit.
+    </li>
+    <li>
+        Lorem ipsum dolor sit amet, consectetur adipisicing elit.
+    </li>
+</ul>
\ No newline at end of file

From 0d1cff3dd13093d831228ad391a1261ce58e7015 Mon Sep 17 00:00:00 2001
From: Solomon Himelbloom <2001solomon@gmail.com>
Date: Sun, 9 Aug 2020 13:11:14 -0800
Subject: [PATCH 2/5] Change index and readme order

---
 src/README.md                | 2 +-
 src/Thumbnav/Thumbnav.svelte | 9 ++++++++-
 src/index.js                 | 4 ++--
 3 files changed, 11 insertions(+), 4 deletions(-)

diff --git a/src/README.md b/src/README.md
index a54f566..bf2e7c4 100644
--- a/src/README.md
+++ b/src/README.md
@@ -18,6 +18,6 @@
 - [Dropdown](Dropdown#dropdown)
 - [Flex](Flex#flex)
 - [List](List#list)
-- [Tile](Tile#tile)
 - [Thumbnav](Thumbnav#thumbnav)
+- [Tile](Tile#tile)
 - [Width](helpers#width)
diff --git a/src/Thumbnav/Thumbnav.svelte b/src/Thumbnav/Thumbnav.svelte
index 288550f..b50d63d 100644
--- a/src/Thumbnav/Thumbnav.svelte
+++ b/src/Thumbnav/Thumbnav.svelte
@@ -1,9 +1,16 @@
 <script context="module">
+    import {uk_width} from "..";
 
+    export let meta = [];
+    export let vertical = false;
+    export let width;
 </script>
 
 <script>
+    let classes = ["uk-thumbnav"];
 
 </script>
 
-<h3>Hello, world.</h3>
\ No newline at end of file
+<ul class={classes.join(" ")}>
+    <slot/>
+</ul>
\ No newline at end of file
diff --git a/src/index.js b/src/index.js
index ae0a2b8..c2ad906 100644
--- a/src/index.js
+++ b/src/index.js
@@ -39,9 +39,9 @@ export {default as Inline} from "./Utility/Inline.svelte";
 
 export {default as List, listOptions} from "./List/List.svelte";
 
-export {default as Tile, tileOptions} from "./Tile/Tile.svelte";
-
 export {default as Thumbnav} from "./Thumbnav/Thumbnav.svelte";
 
+export {default as Tile, tileOptions} from "./Tile/Tile.svelte";
+
 export {uk_width} from "./helpers/width";
 export {uk_animate} from "./helpers/animation";
\ No newline at end of file

From 4729ad404df02599cb82aad5f94fc0a9959b98e8 Mon Sep 17 00:00:00 2001
From: Solomon Himelbloom <2001solomon@gmail.com>
Date: Sun, 9 Aug 2020 17:07:34 -0800
Subject: [PATCH 3/5] Refactor to ThumbNav

---
 src/Thumbnav/{Thumbnav.svelte => ThumbNav.svelte}    | 0
 src/index.js                                         | 2 +-
 stories/{Thumbnav.stories.js => ThumbNav.stories.js} | 0
 stories/views/Thumbnav/ThumbnavView.svelte           | 6 +++---
 4 files changed, 4 insertions(+), 4 deletions(-)
 rename src/Thumbnav/{Thumbnav.svelte => ThumbNav.svelte} (100%)
 rename stories/{Thumbnav.stories.js => ThumbNav.stories.js} (100%)

diff --git a/src/Thumbnav/Thumbnav.svelte b/src/Thumbnav/ThumbNav.svelte
similarity index 100%
rename from src/Thumbnav/Thumbnav.svelte
rename to src/Thumbnav/ThumbNav.svelte
diff --git a/src/index.js b/src/index.js
index c2ad906..374680f 100644
--- a/src/index.js
+++ b/src/index.js
@@ -39,7 +39,7 @@ export {default as Inline} from "./Utility/Inline.svelte";
 
 export {default as List, listOptions} from "./List/List.svelte";
 
-export {default as Thumbnav} from "./Thumbnav/Thumbnav.svelte";
+export {default as ThumbNav} from "./Thumbnav/ThumbNav.svelte";
 
 export {default as Tile, tileOptions} from "./Tile/Tile.svelte";
 
diff --git a/stories/Thumbnav.stories.js b/stories/ThumbNav.stories.js
similarity index 100%
rename from stories/Thumbnav.stories.js
rename to stories/ThumbNav.stories.js
diff --git a/stories/views/Thumbnav/ThumbnavView.svelte b/stories/views/Thumbnav/ThumbnavView.svelte
index 9083685..2f8387d 100644
--- a/stories/views/Thumbnav/ThumbnavView.svelte
+++ b/stories/views/Thumbnav/ThumbnavView.svelte
@@ -1,10 +1,10 @@
 <script>
-    import {Thumbnav} from "../../../src"
+    import {ThumbNav} from "../../../src"
     export let props = {}
 
 </script>
 
-<ul>
+<ThumbNav>
     <li>
         Lorem ipsum dolor sit amet, consectetur adipisicing elit.
     </li>
@@ -14,4 +14,4 @@
     <li>
         Lorem ipsum dolor sit amet, consectetur adipisicing elit.
     </li>
-</ul>
\ No newline at end of file
+</ThumbNav>
\ No newline at end of file

From 00d5578b95ec04a813d547bb8712f8302936e95b Mon Sep 17 00:00:00 2001
From: Solomon Himelbloom <2001solomon@gmail.com>
Date: Sun, 9 Aug 2020 18:04:59 -0800
Subject: [PATCH 4/5] Added Thumbnav example

---
 src/README.md                              |  2 +-
 src/Thumbnav/ThumbNav.svelte               | 22 ++++++++++++++++++----
 src/Thumbnav/ThumbNavItem.svelte           | 12 ++++++++++++
 src/index.js                               |  1 +
 stories/ThumbNav.stories.js                |  7 ++++---
 stories/views/ThumbNav/ThumbnavView.svelte | 11 +++++++++++
 stories/views/Thumbnav/ThumbnavView.svelte | 17 -----------------
 7 files changed, 47 insertions(+), 25 deletions(-)
 create mode 100644 src/Thumbnav/ThumbNavItem.svelte
 create mode 100644 stories/views/ThumbNav/ThumbnavView.svelte
 delete mode 100644 stories/views/Thumbnav/ThumbnavView.svelte

diff --git a/src/README.md b/src/README.md
index bf2e7c4..77f6415 100644
--- a/src/README.md
+++ b/src/README.md
@@ -18,6 +18,6 @@
 - [Dropdown](Dropdown#dropdown)
 - [Flex](Flex#flex)
 - [List](List#list)
-- [Thumbnav](Thumbnav#thumbnav)
+- [ThumbNav](ThumbNav#thumbnav)
 - [Tile](Tile#tile)
 - [Width](helpers#width)
diff --git a/src/Thumbnav/ThumbNav.svelte b/src/Thumbnav/ThumbNav.svelte
index b50d63d..61873a7 100644
--- a/src/Thumbnav/ThumbNav.svelte
+++ b/src/Thumbnav/ThumbNav.svelte
@@ -1,16 +1,30 @@
 <script context="module">
+
+</script>
+
+<script>
     import {uk_width} from "..";
 
-    export let meta = [];
     export let vertical = false;
     export let width;
-</script>
 
-<script>
     let classes = ["uk-thumbnav"];
 
+    $: {
+        classes = ["uk-thumbnav"];
+
+        if (vertical) {
+            classes.push("uk-thumbnav-vertical")
+        }
+
+        classes = classes
+
+    }
+
+    let _class = "";
+    export {_class as class}
 </script>
 
-<ul class={classes.join(" ")}>
+<ul class={classes.join(" ") + " " + _class} use:uk_width={width}>
     <slot/>
 </ul>
\ No newline at end of file
diff --git a/src/Thumbnav/ThumbNavItem.svelte b/src/Thumbnav/ThumbNavItem.svelte
new file mode 100644
index 0000000..a2a5976
--- /dev/null
+++ b/src/Thumbnav/ThumbNavItem.svelte
@@ -0,0 +1,12 @@
+<script>
+    export let href = "#";
+    export let src = "";
+    export let alt = "";
+    export let width = "";
+</script>
+
+<li>
+    <a {href}>
+        <img {src} {alt} {width}/>
+    </a>
+</li>
diff --git a/src/index.js b/src/index.js
index 374680f..56d87cc 100644
--- a/src/index.js
+++ b/src/index.js
@@ -40,6 +40,7 @@ export {default as Inline} from "./Utility/Inline.svelte";
 export {default as List, listOptions} from "./List/List.svelte";
 
 export {default as ThumbNav} from "./Thumbnav/ThumbNav.svelte";
+export {default as ThumbNavItem} from "./Thumbnav/ThumbNavItem.svelte";
 
 export {default as Tile, tileOptions} from "./Tile/Tile.svelte";
 
diff --git a/stories/ThumbNav.stories.js b/stories/ThumbNav.stories.js
index 7e60b92..21e13b6 100644
--- a/stories/ThumbNav.stories.js
+++ b/stories/ThumbNav.stories.js
@@ -1,10 +1,10 @@
-import ThumbnavView from "./views/Thumbnav/ThumbnavView.svelte";
+import ThumbnavView from "./views/ThumbNav/ThumbnavView.svelte";
 import {thumbnavOptions} from "../src";
 import {withKnobs, text, boolean, number, select} from "@storybook/addon-knobs";
 import {validWidths} from "../src/helpers/width";
 
 export default {
-    title: 'Thumbnav',
+    title: 'ThumbNav',
     component: ThumbnavView,
     decorators: [withKnobs]
 };
@@ -13,7 +13,8 @@ export const Main = () => ({
     Component: ThumbnavView,
     props: {
         props: {
-
+            vertical: boolean("Vertical", false),
+            width: select("Width", ["", ...validWidths], "")
         },
     }
 });
\ No newline at end of file
diff --git a/stories/views/ThumbNav/ThumbnavView.svelte b/stories/views/ThumbNav/ThumbnavView.svelte
new file mode 100644
index 0000000..90a558b
--- /dev/null
+++ b/stories/views/ThumbNav/ThumbnavView.svelte
@@ -0,0 +1,11 @@
+<script>
+    import {ThumbNav, ThumbNavItem} from "../../../src"
+    export let props = {}
+
+</script>
+
+<ThumbNav {...props}>
+    <ThumbNavItem alt="a bear" src="https://placebear.com/400/300" width="100"/>
+    <ThumbNavItem alt="a bear" src="https://placebear.com/400/300" width="100"/>
+    <ThumbNavItem alt="a bear" src="https://placebear.com/400/300" width="100"/>
+</ThumbNav>
\ No newline at end of file
diff --git a/stories/views/Thumbnav/ThumbnavView.svelte b/stories/views/Thumbnav/ThumbnavView.svelte
deleted file mode 100644
index 2f8387d..0000000
--- a/stories/views/Thumbnav/ThumbnavView.svelte
+++ /dev/null
@@ -1,17 +0,0 @@
-<script>
-    import {ThumbNav} from "../../../src"
-    export let props = {}
-
-</script>
-
-<ThumbNav>
-    <li>
-        Lorem ipsum dolor sit amet, consectetur adipisicing elit.
-    </li>
-    <li>
-        Lorem ipsum dolor sit amet, consectetur adipisicing elit.
-    </li>
-    <li>
-        Lorem ipsum dolor sit amet, consectetur adipisicing elit.
-    </li>
-</ThumbNav>
\ No newline at end of file

From f737f15bc54bb3be4dd80d7a8f30d68c113daab0 Mon Sep 17 00:00:00 2001
From: Solomon Himelbloom <2001solomon@gmail.com>
Date: Thu, 13 Aug 2020 15:32:16 -0800
Subject: [PATCH 5/5] Refactor Thumbnav to ThumbNav

---
 src/{Thumbnav => ThumbNav}/README.md           | 2 +-
 src/{Thumbnav => ThumbNav}/ThumbNav.svelte     | 0
 src/{Thumbnav => ThumbNav}/ThumbNavItem.svelte | 0
 src/index.js                                   | 4 ++--
 4 files changed, 3 insertions(+), 3 deletions(-)
 rename src/{Thumbnav => ThumbNav}/README.md (98%)
 rename src/{Thumbnav => ThumbNav}/ThumbNav.svelte (100%)
 rename src/{Thumbnav => ThumbNav}/ThumbNavItem.svelte (100%)

diff --git a/src/Thumbnav/README.md b/src/ThumbNav/README.md
similarity index 98%
rename from src/Thumbnav/README.md
rename to src/ThumbNav/README.md
index 98c074f..8f52bf1 100644
--- a/src/Thumbnav/README.md
+++ b/src/ThumbNav/README.md
@@ -1,7 +1,7 @@
 # ⚠️ This Section is a WIP ⚠️
 
 
-# Thumbnav
+# ThumbNav
 > [UIKit documentation](https://getuikit.com/docs/thumbnav)
 
 > [Storybook](https://0c370t.github.io/Svelte-UIKit3/docs/?path=/story/Thumbnav--main)
diff --git a/src/Thumbnav/ThumbNav.svelte b/src/ThumbNav/ThumbNav.svelte
similarity index 100%
rename from src/Thumbnav/ThumbNav.svelte
rename to src/ThumbNav/ThumbNav.svelte
diff --git a/src/Thumbnav/ThumbNavItem.svelte b/src/ThumbNav/ThumbNavItem.svelte
similarity index 100%
rename from src/Thumbnav/ThumbNavItem.svelte
rename to src/ThumbNav/ThumbNavItem.svelte
diff --git a/src/index.js b/src/index.js
index 56d87cc..5fe5e33 100644
--- a/src/index.js
+++ b/src/index.js
@@ -39,8 +39,8 @@ export {default as Inline} from "./Utility/Inline.svelte";
 
 export {default as List, listOptions} from "./List/List.svelte";
 
-export {default as ThumbNav} from "./Thumbnav/ThumbNav.svelte";
-export {default as ThumbNavItem} from "./Thumbnav/ThumbNavItem.svelte";
+export {default as ThumbNav} from "./ThumbNav/ThumbNav.svelte";
+export {default as ThumbNavItem} from "./ThumbNav/ThumbNavItem.svelte";
 
 export {default as Tile, tileOptions} from "./Tile/Tile.svelte";