From 45bbcaaac55865603912c26af85b8c59e9dce16e Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?No=C3=A9=20Viricel?= <noe.viricel@wazo-lab.io>
Date: Tue, 3 Nov 2020 19:15:07 +0100
Subject: [PATCH 1/4] WL-31 - Pass title as props on Hero component

---
 components/Hero.vue | 62 +++++++++++++++++++++++++++++++++++++++++++--
 pages/index.vue     |  2 +-
 test/Hero.spec.js   | 27 ++++++++++++++++++++
 3 files changed, 88 insertions(+), 3 deletions(-)
 create mode 100644 test/Hero.spec.js

diff --git a/components/Hero.vue b/components/Hero.vue
index d8bafbd..03c4387 100644
--- a/components/Hero.vue
+++ b/components/Hero.vue
@@ -6,9 +6,33 @@
       class="rounded-3xl bg-white w-3/4 sm:w-1/2 max-w-lg mx-auto p-6 shadow-xl text-center"
     >
       <Logo />
+      <!-- TODO: [WL-30] Create fliping avatar
+        even: {
+          type: [Component, String],
+          required: true
+        },
+        odd: {
+          type: [Component, String],
+          default: null
+        }
+      -->
+
+      <!-- <div
+        class="w-24 h-24 md:w-32 md:h-32 overflow-hidden relative rounded-full"
+      >
+        <img
+          id="brand-member"
+          class="bg-cover absolute"
+          src="~/assets/images/noe.jpg"
+          alt="Noé Viricel"
+        />
+      </div> -->
+
       <h1 class="font-mono text-2xl">
-        wazo-lab.io
+        {{ title }}
       </h1>
+
+      <!-- TODO: Pass array of links -->
       <div class="mt-4 hidden sm:block">
         <a
           href="#projects"
@@ -32,11 +56,45 @@
 </template>
 
 <script>
-export default {};
+import Logo from "@/components/Logo";
+
+export default {
+  components: { Logo },
+  props: {
+    title: {
+      type: String,
+      required: true
+    }
+    // links: {
+    //   type: [Array, Object],
+    //   default: () => {
+    //     return {
+    //       title: "",
+    //       url: "",
+    //       target: "",
+    //       rel: ""
+    //     };
+    //   },
+    //   validator: () => {
+    //     const skeleton = [
+    //       {
+    //         title: "",
+    //         url: "",
+    //         target: "",
+    //         rel: ""
+    //       }
+    //     ];
+    //   }
+    // }
+  }
+};
 </script>
 
 <style>
 .hero {
   height: 460px;
 }
+
+/* #brand-member {
+} */
 </style>
diff --git a/pages/index.vue b/pages/index.vue
index 7333b80..fa4ce30 100644
--- a/pages/index.vue
+++ b/pages/index.vue
@@ -1,7 +1,7 @@
 <template>
   <div>
     <Header />
-    <Hero />
+    <Hero title="wazo-lab.io" />
     <Grid :dataSource="projects" />
     <Contact />
   </div>
diff --git a/test/Hero.spec.js b/test/Hero.spec.js
new file mode 100644
index 0000000..6417f99
--- /dev/null
+++ b/test/Hero.spec.js
@@ -0,0 +1,27 @@
+import { mount } from "@vue/test-utils";
+import Hero from "@/components/Hero.vue";
+
+describe("Hero", () => {
+  const factory = propsData => {
+    return mount(Hero, {
+      propsData: {
+        ...propsData
+      }
+    });
+  };
+
+  it("throw an error when no title", () => {
+    expect(() => {
+      factory()
+        .find("h1")
+        .toThrow("Missing required prop: 'title'");
+    });
+  });
+
+  it("should have a title", () => {
+    const wrapper = factory({
+      title: "Hero"
+    });
+    expect(wrapper.find("h1").text()).toContain("Hero");
+  });
+});

From a18e5f5b5bc2e6243a8c7c155e467e647f1dd7ff Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?No=C3=A9=20Viricel?= <noe.viricel@wazo-lab.io>
Date: Tue, 3 Nov 2020 19:24:22 +0100
Subject: [PATCH 2/4] Increases Contact component responsiveness

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

diff --git a/components/Contact.vue b/components/Contact.vue
index c0b376f..0c4e551 100644
--- a/components/Contact.vue
+++ b/components/Contact.vue
@@ -39,7 +39,7 @@
     </div>
 
     <form
-      class="w-full sm:w-3/4 md:w-1/2 max-w-lg mx-auto p-6 rounded shadow-xl flex flex-col items-end bg-gradient-to-br from-indigo-800 to-blue-800"
+      class="w-full sm:w-3/4 max-w-lg mx-auto p-6 rounded shadow-xl flex flex-col items-end bg-gradient-to-br from-indigo-800 to-blue-800"
       name="contact"
       method="POST"
       data-netlify="true"

From 0a0c89092131ff7b61db903f47ebb19b26e279f0 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?No=C3=A9=20Viricel?= <noe.viricel@wazo-lab.io>
Date: Tue, 3 Nov 2020 19:25:18 +0100
Subject: [PATCH 3/4] Commented IntersectionObserver for testing purposes + bug
 fix on computed

---
 components/Grid.vue | 11 ++++-------
 1 file changed, 4 insertions(+), 7 deletions(-)

diff --git a/components/Grid.vue b/components/Grid.vue
index 995f535..0b4fed1 100644
--- a/components/Grid.vue
+++ b/components/Grid.vue
@@ -92,9 +92,9 @@ export default {
   components: { GridEmpty },
   computed: {
     filteredData() {
-      if (this.filter === "all") return shuffle(this.dataSource);
+      if (this.filter === "all") return this.dataSource;
 
-      return this.shuffle(this.dataSource.filter(o => o.type === this.filter));
+      return shuffle(this.dataSource.filter(o => o.type === this.filter));
     }
   },
   props: {
@@ -116,14 +116,10 @@ export default {
   methods: {
     // FIXME: Commented for testing purposes
     // observeElmt(elmt) {
-    //   const options = {
-    //     root: elmt,
-    //     threshold: 1
-    //   };
     //   const observer = new IntersectionObserver(
     //     ([e]) =>
     //       e.target.classList.toggle("shadow-md", e.intersectionRatio < 1),
-    //     options
+    //     { threshold: [1] }
     //   );
     //   observer.observe(elmt);
     // }
@@ -138,6 +134,7 @@ export default {
   z-index: 15;
   transition: all 0.1s;
   padding-top: calc(0.75rem + 1px);
+  padding-left: 0;
 }
 
 .grid-item-thumbnail {

From 449f7778c054c6fb4359613a4ab9745f2a6090b7 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?No=C3=A9=20Viricel?= <noe.viricel@wazo-lab.io>
Date: Tue, 3 Nov 2020 19:26:55 +0100
Subject: [PATCH 4/4] Increases Logo responsivness

---
 components/Logo.vue | 6 +++++-
 1 file changed, 5 insertions(+), 1 deletion(-)

diff --git a/components/Logo.vue b/components/Logo.vue
index 3b75db9..924ecb6 100644
--- a/components/Logo.vue
+++ b/components/Logo.vue
@@ -1,6 +1,6 @@
 <template>
   <svg
-    class="brand-logo w-24 md:w-40"
+    class="brand-logo w-24 md:w-32"
     xmlns="http://www.w3.org/2000/svg"
     xmlns:xlink="http://www.w3.org/1999/xlink"
     viewBox="0 0 230 230"
@@ -198,6 +198,10 @@
   </svg>
 </template>
 
+<script>
+export default {};
+</script>
+
 <style>
 .brand-logo {
   animation: 1s appear;