Merged in bugfix/WL-31-pass-title-as-props (pull request #2)

bugfix/WL-31-pass-title-as-props

Approved-by: Noé Viricel

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"

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 {

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>

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;

pages/index.vue

@@ -1,7 +1,7 @@
 <template>
   <div>
     <Header />
-    <Hero />
+    <Hero title="wazo-lab.io" />
     <Grid :dataSource="projects" />
     <Contact />
   </div>

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");
+  });
+});