Add Section Component

src/Flex/README.md

@@ -2,7 +2,7 @@
 
 
 # Flex
-> [UIKit documentation](https://getuikit.com/docs/Flex)
+> [UIKit documentation](https://getuikit.com/docs/flex)
 
 > [Storybook](https://0c370t.github.io/Svelte-UIKit3/docs/?path=/story/Flex--main)
 ## Usage

src/README.md

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

src/Section/README.md

@@ -0,0 +1,19 @@
+# ⚠️ This Section is a WIP ⚠️
+
+
+# Section
+> [UIKit documentation](https://getuikit.com/docs/section)
+
+> [Storybook](https://0c370t.github.io/Svelte-UIKit3/docs/?path=/story/Section--main)
+## Usage
+
+#### Props
+| name        | type  | description                  | see also                        |
+|-------------|-------|------------------------------|---------------------------------|
+
+#### Slots
+| name    | type | inside                 | description                               |
+|---------|------|------------------------|-------------------------------------------|
+
+#### Real Example
+> Note that all props are default values

src/Section/Section.svelte

@@ -0,0 +1,48 @@
+<script context="module">
+    const styles = ["default", "muted", "primary", "secondary"]
+    const sizes = ["xsmall", "small", "large", "xlarge"]
+
+    export const sectionOptions = {
+        styles,
+        sizes
+    }
+
+</script>
+
+<script>
+    import {uk_width} from "..";
+    let classes = ["uk-section"]
+
+    export let style = "";
+    export let size = "";
+    export let overlap = false;
+    $: {
+        classes = ["uk-section"]
+
+        if(styles.includes(style.toLowerCase())){
+            classes.push("uk-section-" + style.toLowerCase())
+        } else {
+            classes.push("uk-section-default")
+        }
+
+        if(sizes.includes(size.toLowerCase())){
+            classes.push("uk-section-" + size.toLowerCase())
+        }
+
+        if (overlap) {
+            classes.push("uk-section-overlap")
+        }
+
+        classes = [...classes]
+    }
+
+    export let width = "";
+
+    let _class = "";
+    export {_class as class}
+
+</script>
+
+<div class={classes.join(" ") + " " + _class} use:uk_width={width}>
+    <slot/>
+</div>

src/index.js

@@ -39,6 +39,8 @@ export {default as Inline} from "./Utility/Inline.svelte";
 
 export {default as List, listOptions} from "./List/List.svelte";
 
+export {default as Section, sectionOptions} from "./Section/Section.svelte";
+
 export {default as Tile, tileOptions} from "./Tile/Tile.svelte";
 
 export {uk_width} from "./helpers/width";

stories/Section.stories.js

@@ -0,0 +1,21 @@
+import SectionView from "./views/Section/SectionView.svelte";
+import {sectionOptions} from "../src";
+import {withKnobs, text, boolean, number, select} from "@storybook/addon-knobs";
+import {validWidths} from "../src/helpers/width";
+
+export default {
+    title: 'Section',
+    component: SectionView,
+    decorators: [withKnobs]
+};
+
+export const Main = () => ({
+    Component: SectionView,
+    props: {
+        props: {
+            style: select("Style", [...sectionOptions.styles], ""),
+            size: select("Size", ["", ...sectionOptions.sizes], ""),
+            overlap: boolean("Overlap", false)
+        },
+    }
+});

stories/views/Section/SectionView.svelte

@@ -0,0 +1,15 @@
+<script>
+    import {Section} from "../../../src";
+    export let props = {};
+</script>
+
+<Section {...props}>
+    <h3>Section Heading</h3>
+
+    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit.</p>
+
+    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit.</p>
+
+    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit.</p>
+</Section>
+