From f90e65cc6b916e62e69b1d959e6e2ac52cbcb4a4 Mon Sep 17 00:00:00 2001
From: Solomon Himelbloom <2001solomon@gmail.com>
Date: Thu, 30 Jul 2020 15:27:08 -0800
Subject: [PATCH 1/5] Add Section WIP template files

---
 src/Flex/README.md                       |  2 +-
 src/README.md                            |  1 +
 src/Section/README.md                    | 19 +++++++++++++++++++
 src/Section/Section.svelte               |  9 +++++++++
 src/index.js                             |  2 ++
 stories/Section.stories.js               | 19 +++++++++++++++++++
 stories/views/Section/SectionView.svelte |  9 +++++++++
 7 files changed, 60 insertions(+), 1 deletion(-)
 create mode 100644 src/Section/README.md
 create mode 100644 src/Section/Section.svelte
 create mode 100644 stories/Section.stories.js
 create mode 100644 stories/views/Section/SectionView.svelte

diff --git a/src/Flex/README.md b/src/Flex/README.md
index b01b5f0..b2764f8 100644
--- a/src/Flex/README.md
+++ b/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
diff --git a/src/README.md b/src/README.md
index 99350ec..e602b06 100644
--- a/src/README.md
+++ b/src/README.md
@@ -17,5 +17,6 @@
 - [Drop](Drop#drop)
 - [Dropdown](Dropdown#dropdown)
 - [Flex](Flex#flex)
+- [Section](Section#section)
 - [Tile](Tile#tile)
 - [Width](helpers#width)
diff --git a/src/Section/README.md b/src/Section/README.md
new file mode 100644
index 0000000..7c60c13
--- /dev/null
+++ b/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
diff --git a/src/Section/Section.svelte b/src/Section/Section.svelte
new file mode 100644
index 0000000..3670777
--- /dev/null
+++ b/src/Section/Section.svelte
@@ -0,0 +1,9 @@
+<script context="module">
+
+</script>
+
+<script>
+
+</script>
+
+<h1>Hello, world.</h1>
\ No newline at end of file
diff --git a/src/index.js b/src/index.js
index 457d0fe..9bfa80c 100644
--- a/src/index.js
+++ b/src/index.js
@@ -37,6 +37,8 @@ export {default as Flex, flexOptions} from "./Flex/Flex.svelte";
 
 export {default as Inline} from "./Utility/Inline.svelte";
 
+export {default as Section} from "./Section/Section.svelte";
+
 export {default as Tile, tileOptions} from "./Tile/Tile.svelte";
 
 export {uk_width} from "./helpers/width";
diff --git a/stories/Section.stories.js b/stories/Section.stories.js
new file mode 100644
index 0000000..9e83014
--- /dev/null
+++ b/stories/Section.stories.js
@@ -0,0 +1,19 @@
+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: {
+
+        },
+    }
+});
\ No newline at end of file
diff --git a/stories/views/Section/SectionView.svelte b/stories/views/Section/SectionView.svelte
new file mode 100644
index 0000000..42e1204
--- /dev/null
+++ b/stories/views/Section/SectionView.svelte
@@ -0,0 +1,9 @@
+<script>
+    import {Section} from "../../../src";
+    export let props = {};
+</script>
+
+<div {...props}>
+    <h3>Lorem ipsum dolor sit amet, consectetur adipisicing elit.</h3>
+</div>
+

From 80e3bf720839d4a85cd9a2cf8a1398616eda715a Mon Sep 17 00:00:00 2001
From: Solomon Himelbloom <2001solomon@gmail.com>
Date: Thu, 6 Aug 2020 15:55:56 -0800
Subject: [PATCH 2/5] fix: change div to Section; add style knobs

---
 src/Section/Section.svelte               | 30 +++++++++++++++++++++++-
 src/index.js                             |  2 +-
 stories/Section.stories.js               |  2 +-
 stories/views/Section/SectionView.svelte | 14 ++++++++---
 4 files changed, 42 insertions(+), 6 deletions(-)

diff --git a/src/Section/Section.svelte b/src/Section/Section.svelte
index 3670777..216e9a3 100644
--- a/src/Section/Section.svelte
+++ b/src/Section/Section.svelte
@@ -1,9 +1,37 @@
 <script context="module">
+    const styles = ["default", "muted", "primary", "secondary"]
+
+    export const sectionOptions = {
+        styles
+    }
 
 </script>
 
 <script>
+    import {uk_width} from "..";
+    let classes = ["uk-section"]
+
+    export let style = "";
+    $: {
+        classes = ["uk-section"]
+
+        if(styles.includes(style.toLowerCase())){
+            classes.push("uk-section-" + style.toLowerCase())
+        } else {
+            classes.push("uk-section-default")
+        }
+
+        classes = [...classes]
+    }
+    $: console.log(style)
+
+    export let width = "";
+
+    let _class = "";
+    export {_class as class}
 
 </script>
 
-<h1>Hello, world.</h1>
\ No newline at end of file
+<div class={classes.join(" ") + " " + _class} use:uk_width={width}>
+    <slot/>
+</div>
\ No newline at end of file
diff --git a/src/index.js b/src/index.js
index 9bfa80c..01ccc2d 100644
--- a/src/index.js
+++ b/src/index.js
@@ -37,7 +37,7 @@ export {default as Flex, flexOptions} from "./Flex/Flex.svelte";
 
 export {default as Inline} from "./Utility/Inline.svelte";
 
-export {default as Section} from "./Section/Section.svelte";
+export {default as Section, sectionOptions} from "./Section/Section.svelte";
 
 export {default as Tile, tileOptions} from "./Tile/Tile.svelte";
 
diff --git a/stories/Section.stories.js b/stories/Section.stories.js
index 9e83014..168c709 100644
--- a/stories/Section.stories.js
+++ b/stories/Section.stories.js
@@ -13,7 +13,7 @@ export const Main = () => ({
     Component: SectionView,
     props: {
         props: {
-
+            style: select("Style", [...sectionOptions.styles], ""),
         },
     }
 });
\ No newline at end of file
diff --git a/stories/views/Section/SectionView.svelte b/stories/views/Section/SectionView.svelte
index 42e1204..9993974 100644
--- a/stories/views/Section/SectionView.svelte
+++ b/stories/views/Section/SectionView.svelte
@@ -1,9 +1,17 @@
 <script>
     import {Section} from "../../../src";
     export let props = {};
+
+    $: console.log(props)
 </script>
 
-<div {...props}>
-    <h3>Lorem ipsum dolor sit amet, consectetur adipisicing elit.</h3>
-</div>
+<Section {...props}>
+    <h3>Section Heading Test</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>
 

From 403c6f579fb4d6972ca683782db1483a567e099c Mon Sep 17 00:00:00 2001
From: Solomon Himelbloom <2001solomon@gmail.com>
Date: Thu, 6 Aug 2020 16:14:17 -0800
Subject: [PATCH 3/5] Added sizes modifier

---
 src/Section/Section.svelte | 10 ++++++++--
 stories/Section.stories.js |  1 +
 2 files changed, 9 insertions(+), 2 deletions(-)

diff --git a/src/Section/Section.svelte b/src/Section/Section.svelte
index 216e9a3..e81cdaa 100644
--- a/src/Section/Section.svelte
+++ b/src/Section/Section.svelte
@@ -1,8 +1,10 @@
 <script context="module">
     const styles = ["default", "muted", "primary", "secondary"]
+    const sizes = ["xsmall", "small", "large", "xlarge"]
 
     export const sectionOptions = {
-        styles
+        styles,
+        sizes
     }
 
 </script>
@@ -12,6 +14,7 @@
     let classes = ["uk-section"]
 
     export let style = "";
+    export let size = "";
     $: {
         classes = ["uk-section"]
 
@@ -21,9 +24,12 @@
             classes.push("uk-section-default")
         }
 
+        if(sizes.includes(size.toLowerCase())){
+            classes.push("uk-section-" + size.toLowerCase())
+        }
+
         classes = [...classes]
     }
-    $: console.log(style)
 
     export let width = "";
 
diff --git a/stories/Section.stories.js b/stories/Section.stories.js
index 168c709..742de93 100644
--- a/stories/Section.stories.js
+++ b/stories/Section.stories.js
@@ -14,6 +14,7 @@ export const Main = () => ({
     props: {
         props: {
             style: select("Style", [...sectionOptions.styles], ""),
+            size: select("Size", ["", ...sectionOptions.sizes], ""),
         },
     }
 });
\ No newline at end of file

From 5ee684299beea7482ec56320e37b241449f9ec0d Mon Sep 17 00:00:00 2001
From: Solomon Himelbloom <2001solomon@gmail.com>
Date: Sun, 9 Aug 2020 12:48:50 -0800
Subject: [PATCH 4/5] Scrub testing information

---
 stories/views/Section/SectionView.svelte | 4 +---
 1 file changed, 1 insertion(+), 3 deletions(-)

diff --git a/stories/views/Section/SectionView.svelte b/stories/views/Section/SectionView.svelte
index 9993974..1921909 100644
--- a/stories/views/Section/SectionView.svelte
+++ b/stories/views/Section/SectionView.svelte
@@ -1,12 +1,10 @@
 <script>
     import {Section} from "../../../src";
     export let props = {};
-
-    $: console.log(props)
 </script>
 
 <Section {...props}>
-    <h3>Section Heading Test</h3>
+    <h3>Section Heading</h3>
 
     <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit.</p>
 

From 4e6f55291a8ddcdc0df08abd23b93ee6f448e288 Mon Sep 17 00:00:00 2001
From: Solomon Himelbloom <2001solomon@gmail.com>
Date: Thu, 13 Aug 2020 16:43:30 -0800
Subject: [PATCH 5/5] Add overlap property

---
 src/Section/Section.svelte | 5 +++++
 stories/Section.stories.js | 1 +
 2 files changed, 6 insertions(+)

diff --git a/src/Section/Section.svelte b/src/Section/Section.svelte
index e81cdaa..c45611b 100644
--- a/src/Section/Section.svelte
+++ b/src/Section/Section.svelte
@@ -15,6 +15,7 @@
 
     export let style = "";
     export let size = "";
+    export let overlap = false;
     $: {
         classes = ["uk-section"]
 
@@ -28,6 +29,10 @@
             classes.push("uk-section-" + size.toLowerCase())
         }
 
+        if (overlap) {
+            classes.push("uk-section-overlap")
+        }
+
         classes = [...classes]
     }
 
diff --git a/stories/Section.stories.js b/stories/Section.stories.js
index 742de93..a63baca 100644
--- a/stories/Section.stories.js
+++ b/stories/Section.stories.js
@@ -15,6 +15,7 @@ export const Main = () => ({
         props: {
             style: select("Style", [...sectionOptions.styles], ""),
             size: select("Size", ["", ...sectionOptions.sizes], ""),
+            overlap: boolean("Overlap", false)
         },
     }
 });
\ No newline at end of file