Add ThumbNav Component

src/README.md

@@ -18,5 +18,6 @@
 - [Dropdown](Dropdown#dropdown)
 - [Flex](Flex#flex)
 - [List](List#list)
+- [ThumbNav](ThumbNav#thumbnav)
 - [Tile](Tile#tile)
 - [Width](helpers#width)

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

src/ThumbNav/ThumbNav.svelte

@@ -0,0 +1,30 @@
+<script context="module">
+
+</script>
+
+<script>
+    import {uk_width} from "..";
+
+    export let vertical = false;
+    export let width;
+
+    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(" ") + " " + _class} use:uk_width={width}>
+    <slot/>
+</ul>

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>

src/index.js

@@ -39,6 +39,9 @@ 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";
 
 export {uk_width} from "./helpers/width";

stories/ThumbNav.stories.js

@@ -0,0 +1,20 @@
+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: {
+            vertical: boolean("Vertical", false),
+            width: select("Width", ["", ...validWidths], "")
+        },
+    }
+});

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>