Merge pull request #2 from 0c370t/Tile-Component

Add Tile Component Resolves #1
ItsMeBrianD · Jul 26, 2020 · 08ab5e3 · 08ab5e3
2 parents 94de0e0 + 8c8e2a1
commit 08ab5e3
Show file tree

Hide file tree

Showing 23 changed files with 1,398 additions and 175 deletions.
diff --git a/dist/index.js b/dist/index.js
diff --git a/dist/index.min.js b/dist/index.min.js
diff --git a/dist/index.mjs b/dist/index.mjs
diff --git a/docs/iframe.html b/docs/iframe.html
@@ -73,4 +73,4 @@
     }</style><style>#root[hidden],
       #docs-root[hidden] {
         display: none !important;
-      }</style></head><body><div class="sb-nopreview sb-wrapper"><div class="sb-nopreview_main"><h1 class="sb-nopreview_heading sb-heading">No Preview</h1><p>Sorry, but you either have no stories or none are selected somehow.</p><ul><li>Please check the Storybook config.</li><li>Try reloading the page.</li></ul><p>If the problem persists, check the browser console, or the terminal you've run Storybook from.</p></div></div><div class="sb-errordisplay sb-wrapper"><pre id="error-message" class="sb-heading"></pre><pre class="sb-errordisplay_code"><code id="error-stack"></code></pre></div><div id="root"></div><div id="docs-root"></div><script src="runtime~main.5a1dd4f5289c13896dcd.bundle.js"></script><script src="vendors~main.5a1dd4f5289c13896dcd.bundle.js"></script><script src="main.5a1dd4f5289c13896dcd.bundle.js"></script></body></html>
+      }</style></head><body><div class="sb-nopreview sb-wrapper"><div class="sb-nopreview_main"><h1 class="sb-nopreview_heading sb-heading">No Preview</h1><p>Sorry, but you either have no stories or none are selected somehow.</p><ul><li>Please check the Storybook config.</li><li>Try reloading the page.</li></ul><p>If the problem persists, check the browser console, or the terminal you've run Storybook from.</p></div></div><div class="sb-errordisplay sb-wrapper"><pre id="error-message" class="sb-heading"></pre><pre class="sb-errordisplay_code"><code id="error-stack"></code></pre></div><div id="root"></div><div id="docs-root"></div><script src="runtime~main.65c3451b62b39297fb37.bundle.js"></script><script src="vendors~main.65c3451b62b39297fb37.bundle.js"></script><script src="main.65c3451b62b39297fb37.bundle.js"></script></body></html>
diff --git a/docs/main.5a1dd4f5289c13896dcd.bundle.js b/docs/main.5a1dd4f5289c13896dcd.bundle.js
diff --git a/docs/main.5a1dd4f5289c13896dcd.bundle.js.map b/docs/main.5a1dd4f5289c13896dcd.bundle.js.map
diff --git a/docs/main.65c3451b62b39297fb37.bundle.js b/docs/main.65c3451b62b39297fb37.bundle.js
diff --git a/docs/main.65c3451b62b39297fb37.bundle.js.map b/docs/main.65c3451b62b39297fb37.bundle.js.map
diff --git a/docs/runtime~main.5a1dd4f5289c13896dcd.bundle.js.map b/docs/runtime~main.5a1dd4f5289c13896dcd.bundle.js.map
diff --git a/...ntime~main.5a1dd4f5289c13896dcd.bundle.js → ...ntime~main.65c3451b62b39297fb37.bundle.js b/...ntime~main.5a1dd4f5289c13896dcd.bundle.js → ...ntime~main.65c3451b62b39297fb37.bundle.js
diff --git a/docs/runtime~main.65c3451b62b39297fb37.bundle.js.map b/docs/runtime~main.65c3451b62b39297fb37.bundle.js.map
diff --git a/docs/vendors~main.5a1dd4f5289c13896dcd.bundle.js b/docs/vendors~main.5a1dd4f5289c13896dcd.bundle.js
diff --git a/docs/vendors~main.5a1dd4f5289c13896dcd.bundle.js.map b/docs/vendors~main.5a1dd4f5289c13896dcd.bundle.js.map
diff --git a/docs/vendors~main.65c3451b62b39297fb37.bundle.js b/docs/vendors~main.65c3451b62b39297fb37.bundle.js
diff --git a/...a1dd4f5289c13896dcd.bundle.js.LICENSE.txt → ...5c3451b62b39297fb37.bundle.js.LICENSE.txt b/...a1dd4f5289c13896dcd.bundle.js.LICENSE.txt → ...5c3451b62b39297fb37.bundle.js.LICENSE.txt
diff --git a/docs/vendors~main.65c3451b62b39297fb37.bundle.js.map b/docs/vendors~main.65c3451b62b39297fb37.bundle.js.map
diff --git a/package-lock.json b/package-lock.json
diff --git a/src/README.md b/src/README.md
@@ -17,4 +17,5 @@
 - [Drop](Drop#drop)
 - [Dropdown](Dropdown#dropdown)
 - [Flex](Flex#flex)
+- [Tile](Tile#tile)
 - [Width](helpers#width)
diff --git a/src/Tile/README.md b/src/Tile/README.md
@@ -0,0 +1,28 @@
+# Tile
+> [UIKit documentation](https://getuikit.com/docs/tile)
+
+> [Storybook](https://0c370t.github.io/Svelte-UIKit3/docs/?path=/story/Tile--main)
+## Usage
+
+#### Props
+| name        | type  | description                  | see also                                        |
+|-------------|-------|------------------------------|-------------------------------------------------|
+| style       | enum  | Background / Text color      | Module context of [Tile.svelte](./Tile.svelte)  |
+| width       | enum  | Width of the tile            | [helpers/width.js](../helpers/)                 |  
+
+#### Slots
+| name    | type | inside                 | description                               |
+|---------|------|------------------------|-------------------------------------------|
+| default | any  | root element (div)     | Content of the tile                       |
+
+#### Real Example
+> Note that all props are default values
+```html
+<script>
+    import {Tile} from 'svelte-uikit3';
+</script>
+
+<Tile style={""} width={""}>
+    <h3>Lorem ipsum dolor sit amet, consectetur adipisicing elit.</h3>
+</Tile>
+```
diff --git a/src/Tile/Tile.svelte b/src/Tile/Tile.svelte
@@ -0,0 +1,28 @@
+<script context="module">
+    const styles = ["default", "muted", "primary", "secondary"]
+
+    export const tileOptions = {
+        styles
+    }
+</script>
+
+<script>
+    import {uk_width} from "..";
+    let classes = ["uk-tile"]
+
+    export let style = "";
+    if(styles.includes(style.toLowerCase())){
+        classes.push("uk-tile-" + style.toLowerCase())
+    } else {
+        classes.push("uk-tile-default")
+    }
+
+    export let width = "";
+
+    let _class = "";
+    export {_class as class}
+</script>
+
+<div class={classes.join(" ") + " " + _class} use:uk_width={width}>
+    <slot/>
+</div>
diff --git a/src/index.js b/src/index.js
@@ -37,5 +37,7 @@ export {default as Flex, flexOptions} from "./Flex/Flex.svelte";
 
 export {default as Inline} from "./Utility/Inline.svelte";
 
+export {default as Tile, tileOptions} from "./Tile/Tile.svelte";
+
 export {uk_width} from "./helpers/width";
 export {uk_animate} from "./helpers/animation";
diff --git a/stories/Tile.stories.js b/stories/Tile.stories.js
@@ -0,0 +1,21 @@
+import TileView from "./views/Tile/TileView.svelte";
+import {withKnobs, text, boolean, number, select} from "@storybook/addon-knobs";
+import {validWidths} from "../src/helpers/width";
+import {tileOptions} from "../src";
+
+export default {
+    title: 'Tile',
+    component: TileView,
+    decorators: [withKnobs]
+};
+
+export const Main = () => ({
+    Component: TileView,
+    props: {
+        props: {
+            style: select("Style", [...tileOptions.styles], ""),
+            width: select("Width", ["", ...validWidths], "")
+        },
+
+    }
+});
diff --git a/stories/views/Tile/TileView.svelte b/stories/views/Tile/TileView.svelte
@@ -0,0 +1,8 @@
+<script>
+    import {Tile} from "../../../src";
+    export let props = {};
+</script>
+
+<Tile {...props}>
+    <h3>Lorem ipsum dolor sit amet, consectetur adipisicing elit.</h3>
+</Tile>