From 94f9559fe5863bbe42fc0c5e03ef9ef575d1d6f6 Mon Sep 17 00:00:00 2001
From: dChiamp <derek.chiampas@gmail.com>
Date: Wed, 22 Jul 2020 10:57:36 -0700
Subject: [PATCH 1/9] adds sectionAwards

---
 .../SectionAwards/SectionAwards.stories.js    |  60 ++++++++
 .../SectionAwards/SectionAwards.vue           | 133 ++++++++++++++++++
 src/components/global/CountUp.vue             |  62 ++++++++
 src/directives/IntersectionObserver.vue       | 101 +++++++++++++
 4 files changed, 356 insertions(+)
 create mode 100644 src/components/SectionAwards/SectionAwards.stories.js
 create mode 100644 src/components/SectionAwards/SectionAwards.vue
 create mode 100644 src/components/global/CountUp.vue
 create mode 100644 src/directives/IntersectionObserver.vue

diff --git a/src/components/SectionAwards/SectionAwards.stories.js b/src/components/SectionAwards/SectionAwards.stories.js
new file mode 100644
index 0000000..2279ac5
--- /dev/null
+++ b/src/components/SectionAwards/SectionAwards.stories.js
@@ -0,0 +1,60 @@
+import SectionAwards from "./SectionAwards"
+import API from "@/static/db.json"
+
+const Awards = [
+    {
+        total: 2,
+        text: "BET awards"
+    },
+    {
+        total: 20,
+        text: "Clio awards"
+    },
+    {
+        total: 13,
+        text: "Cannes Lions"
+    },
+    {
+        total: 5,
+        text: "Webby Awards"
+    },
+    {
+        total: 12,
+        text: "Grammys"
+    },
+    {
+        total: 5,
+        text: "Latin Grammys"
+    },
+    {
+        total: 8,
+        text: "Cyclope Awards"
+    },
+    {
+        total: 6,
+        text: "Shorts Awards"
+    },
+    {
+        total: 2,
+        text: "Music Video Festival Brazil"
+    },
+    {
+        total: 7,
+        text: "Berlin Music Video Awards"
+    }
+]
+
+export default {
+    title: "@dchiamp / SectionAwards"
+}
+
+export const Default = () => ({
+    components: { SectionAwards },
+    data() {
+        return {
+            api: API,
+            awards: Awards
+        }
+    },
+    template: `<section-awards  :awards="awards" />`
+})
diff --git a/src/components/SectionAwards/SectionAwards.vue b/src/components/SectionAwards/SectionAwards.vue
new file mode 100644
index 0000000..b48e1d9
--- /dev/null
+++ b/src/components/SectionAwards/SectionAwards.vue
@@ -0,0 +1,133 @@
+<template lang="html">
+    <div
+        v-intersection-observer="{
+            threshold: 0
+        }"
+        class="section-awards"
+        @has-intersected="hasIntersected()"
+    >
+        <h2 class="title" v-html="'Awards'" />
+
+        <ul class="awards">
+            <li v-for="(award, i) in awards" class="award">
+                <count-up
+                    class="count"
+                    element="span"
+                    :to="award.total"
+                    :start-count="startCount"
+                    :duration="2000"
+                />
+
+                <p v-html="award.text"></p>
+            </li>
+        </ul>
+    </div>
+</template>
+
+<script>
+//  Components
+import CountUp from "@/components/global/CountUp"
+
+// Directives
+import Vue from "vue"
+import intersectionObserver from "@/directives/IntersectionObserver"
+Vue.directive("intersection-observer", intersectionObserver)
+
+export default {
+    components: {
+        CountUp
+    },
+    props: {
+        awards: {
+            type: Array,
+            default: () => []
+        }
+    },
+    data() {
+        return {
+            startCount: false
+        }
+    },
+    methods: {
+        // Start count when component hasIntersected
+        hasIntersected() {
+            this.startCount = true
+        }
+    }
+}
+</script>
+
+<style lang="scss">
+.section-awards {
+    position: relative;
+    background-color: var(--color-pink);
+    color: var(--color-black);
+    padding: var(--unit-gutter);
+    box-sizing: border-box;
+
+    .title {
+        font-size: 75px;
+        font-weight: 500;
+        text-transform: uppercase;
+        -webkit-text-stroke: 1.5px var(--color-pink);
+        margin: 0;
+        position: absolute;
+        top: -40px;
+        left: 50%;
+        transform: translate(-50%);
+    }
+
+    .awards {
+        list-style: none;
+        margin: 0;
+        padding: 0;
+        columns: 2;
+        max-width: var(--unit-max-width);
+        margin: 0 auto;
+    }
+
+    .award {
+        display: flex;
+        flex-direction: row;
+        justify-content: flex-start;
+        align-items: center;
+        margin: 10px 0;
+
+        .count {
+            font-size: 50px;
+            min-width: 75px;
+            height: auto;
+            text-align: center;
+        }
+        p {
+            display: inline-block;
+            font-size: 20px;
+            font-weight: 500;
+            text-transform: uppercase;
+            margin: 0 10px;
+        }
+    }
+
+    // Breakpoints
+    @media #{$lt-phone} {
+        padding: 50px 20px;
+
+        .title {
+            font-size: 30px;
+            top: -15px;
+        }
+        .awards {
+            columns: 1;
+        }
+        .award {
+            .count {
+                font-size: 20px;
+                min-width: 30px;
+            }
+            p {
+                font-size: 12px;
+            }
+        }
+    }
+}
+</style>
diff --git a/src/components/global/CountUp.vue b/src/components/global/CountUp.vue
new file mode 100644
index 0000000..eb64fc5
--- /dev/null
+++ b/src/components/global/CountUp.vue
@@ -0,0 +1,62 @@
+<template>
+    <component :is="element" v-text="displayNumber" />
+</template>
+
+<script>
+export default {
+    props: {
+        from: {
+            type: Number,
+            default: 0
+        },
+        to: {
+            type: Number,
+            required: true
+        },
+        duration: {
+            type: Number,
+            default: 1000 // Duration is in milliseconds
+        },
+        element: {
+            type: String,
+            default: "div"
+        },
+        startCount: {
+            type: Boolean,
+            required: true
+        }
+    },
+    data() {
+        return {
+            displayNumber: this.from,
+            countInterval: null
+        }
+    },
+    computed: {
+        interval() {
+            return this.duration / (this.to - this.from)
+        }
+    },
+    watch: {
+        startCount(newVal) {
+            if (newVal && !this.countInterval) {
+                this.countInterval = setInterval(
+                    () => this.incrementDisplayNimber(),
+                    this.interval
+                )
+            } else this.displayNumber = this.from
+        }
+    },
+    methods: {
+        beginCount() {},
+        incrementDisplayNimber() {
+            this.displayNumber += 1
+            if (this.displayNumber == this.to) this.clearCountInterval()
+        },
+        clearCountInterval() {
+            clearInterval(this.countInterval)
+            this.countInterval = null
+        }
+    }
+}
+</script>
diff --git a/src/directives/IntersectionObserver.vue b/src/directives/IntersectionObserver.vue
new file mode 100644
index 0000000..b409cb0
--- /dev/null
+++ b/src/directives/IntersectionObserver.vue
@@ -0,0 +1,101 @@
+<script>
+// Helpers
+import _pick from "lodash/pick"
+
+// Setup class
+class ObserverState {
+    // This gets function called automatically
+    constructor(el, settings, vnode) {
+        this.settings = settings
+        this.observer = this.initObserver()
+    }
+
+    // Creates Observer
+    initObserver() {
+        return new IntersectionObserver(
+            this.onIntersection,
+            this.settings.value
+        )
+    }
+
+    // This is the function that runs when an Intersection occurs.
+    // NOTE Intersection happens when it goes out of view too!
+    // SEE https://developer.mozilla.org/en-US/docs/Web/API/Intersection_Observer_API
+    // SEE https://developer.mozilla.org/en-US/docs/Web/API/IntersectionObserverEntry
+    onIntersection(entries, observer) {
+        entries.forEach(function(entry, index) {
+            // Set up required data
+            const el = entry.target
+            const state = el._observerState
+            const hasClass = el.classList.contains("has-intersected")
+
+            // If "once" and el already has class we have nothing to do
+            if (state.settings.modifiers.once && hasClass) return
+
+            // Check if element has passed intersection threshold
+            if (entry.intersectionRatio < state.settings.value.threshold)
+                return
+
+            // Fire event with IntersectionObserverEntry object
+            const event = new CustomEvent("has-intersected", { detail: entry })
+
+            // Generate random time
+            let number = 0
+            if (state.settings.modifiers.stagger) {
+                number = Math.floor(Math.random() * Math.floor(500))
+            }
+
+            // Stagger time by number
+            clearTimeout(el.observerTimer)
+            el.observerTimer = setTimeout(() => {
+                el.dispatchEvent(event)
+
+                // Add a class for convenience
+                if (entry.isIntersecting) {
+                    el.classList.add("has-intersected")
+                } else {
+                    el.classList.remove("has-intersected")
+                }
+            }, number)
+        });
+    }
+}
+
+// The Vue directive config
+export default {
+    bind(el, binding) {
+        // Default settings
+        let settings = {
+            value: {
+                root: null,
+                rootMargin: "0px",
+                threshold: 1.0
+            },
+            modifiers: {
+                once: false,
+                stagger: false
+            }
+        }
+
+        // Overwrite settings, only keep relevant settings
+        settings = Object.assign(settings, binding)
+        settings = _pick(settings, ["value", "modifiers"])
+
+        // Start ObserverState constructor, save to el for future access
+        el._observerState = new ObserverState(el, settings)
+    },
+    unbind(el) {
+        const state = el._observerState
+        if (state) {
+            state.observer.disconnect()
+            delete el._observerState
+        }
+    },
+    inserted(el) {
+        const state = el._observerState
+        if (state) {
+            state.observer.observe(el)
+        }
+    }
+}
+</script>

From 734e689a9bf3ab8543f789ebceda43914cea279f Mon Sep 17 00:00:00 2001
From: dChiamp <derek.chiampas@gmail.com>
Date: Wed, 22 Jul 2020 11:01:31 -0700
Subject: [PATCH 2/9] adds more responsive styles

---
 src/components/SectionAwards/SectionAwards.vue | 5 +++--
 1 file changed, 3 insertions(+), 2 deletions(-)

diff --git a/src/components/SectionAwards/SectionAwards.vue b/src/components/SectionAwards/SectionAwards.vue
index b48e1d9..2fe7f59 100644
--- a/src/components/SectionAwards/SectionAwards.vue
+++ b/src/components/SectionAwards/SectionAwards.vue
@@ -15,7 +15,7 @@
                     element="span"
                     :to="award.total"
                     :start-count="startCount"
-                    :duration="2000"
+                    :duration="1200"
                 />
 
                 <p v-html="award.text"></p>
@@ -91,10 +91,11 @@ export default {
         flex-direction: row;
         justify-content: flex-start;
         align-items: center;
-        margin: 10px 0;
+        margin: 0 0 10px 0;
 
         .count {
             font-size: 50px;
+            font-weight: 400;
             min-width: 75px;
             height: auto;
             text-align: center;

From 2fa1f0a63055889ee5831806006789d4d9297f66 Mon Sep 17 00:00:00 2001
From: dChiamp <derek.chiampas@gmail.com>
Date: Wed, 22 Jul 2020 11:21:32 -0700
Subject: [PATCH 3/9] adds mrore responsivce styles

---
 src/components/SectionAwards/SectionAwards.vue | 6 ++++--
 1 file changed, 4 insertions(+), 2 deletions(-)

diff --git a/src/components/SectionAwards/SectionAwards.vue b/src/components/SectionAwards/SectionAwards.vue
index 2fe7f59..63a2910 100644
--- a/src/components/SectionAwards/SectionAwards.vue
+++ b/src/components/SectionAwards/SectionAwards.vue
@@ -62,7 +62,7 @@ export default {
     position: relative;
     background-color: var(--color-pink);
     color: var(--color-black);
-    padding: var(--unit-gutter);
+    padding: 60px 50px;
     box-sizing: border-box;
 
     .title {
@@ -91,7 +91,7 @@ export default {
         flex-direction: row;
         justify-content: flex-start;
         align-items: center;
-        margin: 0 0 10px 0;
+        margin: 10px 0;
 
         .count {
             font-size: 50px;
@@ -121,6 +121,8 @@ export default {
             columns: 1;
         }
         .award {
+            margin: 0 0 10px 0;
+
             .count {
                 font-size: 20px;
                 min-width: 30px;

From d87f1cd317bbb95cf7042e4def092ba7b4f127bd Mon Sep 17 00:00:00 2001
From: dChiamp <derek.chiampas@gmail.com>
Date: Wed, 22 Jul 2020 11:26:10 -0700
Subject: [PATCH 4/9] adds title prop

---
 src/components/SectionAwards/SectionAwards.stories.js | 2 +-
 src/components/SectionAwards/SectionAwards.vue        | 6 +++++-
 2 files changed, 6 insertions(+), 2 deletions(-)

diff --git a/src/components/SectionAwards/SectionAwards.stories.js b/src/components/SectionAwards/SectionAwards.stories.js
index 2279ac5..3852318 100644
--- a/src/components/SectionAwards/SectionAwards.stories.js
+++ b/src/components/SectionAwards/SectionAwards.stories.js
@@ -56,5 +56,5 @@ export const Default = () => ({
             awards: Awards
         }
     },
-    template: `<section-awards  :awards="awards" />`
+    template: `<section-awards  :awards="awards" title="Awards" />`
 })
diff --git a/src/components/SectionAwards/SectionAwards.vue b/src/components/SectionAwards/SectionAwards.vue
index 63a2910..4fa686d 100644
--- a/src/components/SectionAwards/SectionAwards.vue
+++ b/src/components/SectionAwards/SectionAwards.vue
@@ -6,7 +6,7 @@
         class="section-awards"
         @has-intersected="hasIntersected()"
     >
-        <h2 class="title" v-html="'Awards'" />
+        <h2 class="title" v-html="title" />
 
         <ul class="awards">
             <li v-for="(award, i) in awards" class="award">
@@ -38,6 +38,10 @@ export default {
         CountUp
     },
     props: {
+        title: {
+            type: String,
+            default: "Awards"
+        },
         awards: {
             type: Array,
             default: () => []

From 14a34e0e9f5561204e6dd1fb70a6ceae1a6c185e Mon Sep 17 00:00:00 2001
From: dChiamp <derek.chiampas@gmail.com>
Date: Wed, 22 Jul 2020 11:28:58 -0700
Subject: [PATCH 5/9] changes containing div to section tag

---
 src/components/SectionAwards/SectionAwards.vue | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/src/components/SectionAwards/SectionAwards.vue b/src/components/SectionAwards/SectionAwards.vue
index 4fa686d..ce0a668 100644
--- a/src/components/SectionAwards/SectionAwards.vue
+++ b/src/components/SectionAwards/SectionAwards.vue
@@ -1,5 +1,5 @@
 <template lang="html">
-    <div
+    <section
         v-intersection-observer="{
             threshold: 0
         }"
@@ -21,7 +21,7 @@
                 <p v-html="award.text"></p>
             </li>
         </ul>
-    </div>
+    </section>
 </template>
 
 <script>

From 7379c6c08726aa5fddf88781fa0c7ab56df0cc9e Mon Sep 17 00:00:00 2001
From: dChiamp <derek.chiampas@gmail.com>
Date: Wed, 22 Jul 2020 14:14:06 -0700
Subject: [PATCH 6/9] fixes vue autocompleted syntax

---
 src/components/SectionAwards/SectionAwards.vue | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/components/SectionAwards/SectionAwards.vue b/src/components/SectionAwards/SectionAwards.vue
index ce0a668..a3d327b 100644
--- a/src/components/SectionAwards/SectionAwards.vue
+++ b/src/components/SectionAwards/SectionAwards.vue
@@ -18,7 +18,7 @@
                     :duration="1200"
                 />
 
-                <p v-html="award.text"></p>
+                <p v-html="award.text" />
             </li>
         </ul>
     </section>

From 0b0670a5915aaaaebbdfb5c5baab9cb656cbc2eb Mon Sep 17 00:00:00 2001
From: dChiamp <derek.chiampas@gmail.com>
Date: Thu, 23 Jul 2020 15:16:54 -0700
Subject: [PATCH 7/9] updates fonts

---
 src/components/SectionAwards/SectionAwards.vue | 7 +++++--
 1 file changed, 5 insertions(+), 2 deletions(-)

diff --git a/src/components/SectionAwards/SectionAwards.vue b/src/components/SectionAwards/SectionAwards.vue
index a3d327b..7166dfd 100644
--- a/src/components/SectionAwards/SectionAwards.vue
+++ b/src/components/SectionAwards/SectionAwards.vue
@@ -70,13 +70,14 @@ export default {
     box-sizing: border-box;
 
     .title {
+        font-family: var(--font-secondary);
         font-size: 75px;
         font-weight: 500;
         text-transform: uppercase;
         -webkit-text-stroke: 1.5px var(--color-pink);
         margin: 0;
         position: absolute;
-        top: -40px;
+        top: -47px;
         left: 50%;
         transform: translate(-50%);
     }
@@ -98,6 +99,7 @@ export default {
         margin: 10px 0;
 
         .count {
+            font-family: var(--font-primary);
             font-size: 50px;
             font-weight: 400;
             min-width: 75px;
@@ -105,6 +107,7 @@ export default {
             text-align: center;
         }
         p {
+            font-family: var(--font-secondary);
             display: inline-block;
             font-size: 20px;
             font-weight: 500;
@@ -119,7 +122,7 @@ export default {
 
         .title {
             font-size: 30px;
-            top: -15px;
+            top: -20px;
         }
         .awards {
             columns: 1;

From 20f91fc0d5478bacc1b11b256bf2b5ae9ed01312 Mon Sep 17 00:00:00 2001
From: dChiamp <derek.chiampas@gmail.com>
Date: Thu, 23 Jul 2020 15:36:16 -0700
Subject: [PATCH 8/9] improves scss formatting

---
 src/components/SectionAwards/SectionAwards.vue | 3 ---
 1 file changed, 3 deletions(-)

diff --git a/src/components/SectionAwards/SectionAwards.vue b/src/components/SectionAwards/SectionAwards.vue
index 7166dfd..25094a4 100644
--- a/src/components/SectionAwards/SectionAwards.vue
+++ b/src/components/SectionAwards/SectionAwards.vue
@@ -90,14 +90,12 @@ export default {
         max-width: var(--unit-max-width);
         margin: 0 auto;
     }
-
     .award {
         display: flex;
         flex-direction: row;
         justify-content: flex-start;
         align-items: center;
         margin: 10px 0;
-
         .count {
             font-family: var(--font-primary);
             font-size: 50px;
@@ -129,7 +127,6 @@ export default {
         }
         .award {
             margin: 0 0 10px 0;
-
             .count {
                 font-size: 20px;
                 min-width: 30px;

From 0800632432b794c6e1b348d9f5760157e2fd0c88 Mon Sep 17 00:00:00 2001
From: dChiamp <derek.chiampas@gmail.com>
Date: Fri, 24 Jul 2020 13:36:59 -0700
Subject: [PATCH 9/9] adds scoped attr to styles

---
 src/components/SectionAwards/SectionAwards.vue | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/components/SectionAwards/SectionAwards.vue b/src/components/SectionAwards/SectionAwards.vue
index 25094a4..8a0ab9c 100644
--- a/src/components/SectionAwards/SectionAwards.vue
+++ b/src/components/SectionAwards/SectionAwards.vue
@@ -61,7 +61,7 @@ export default {
 }
 </script>
 
-<style lang="scss">
+<style lang="scss" scoped>
 .section-awards {
     position: relative;
     background-color: var(--color-pink);