Handle responsivness on Grid + Film components

components/Film/index.vue

@@ -1,6 +1,6 @@
 <template>
   <article
-    class="film bg-gray-100 prose prose-sm rounded-md shadow-md transition-shadow duration-300 hover:shadow-xl mb-4 sm:m-4"
+    class="film flex flex-col justify-between bg-gray-100 prose prose-sm rounded-md shadow-md transition-shadow duration-300 hover:shadow-xl mb-4 sm:m-4"
   >
     <header class="p-4 rounded-t-md">
       <h1>
@@ -56,6 +56,19 @@ export default {
 </script>
 
 <style lang="css" scoped>
+@media screen and (min-width: 640px) {
+  .film {
+    margin: 1rem;
+    flex: 1 1 calc(50% - 2rem);
+  }
+}
+
+@media screen and (min-width: 1024px) {
+  .film {
+    flex: 1 1 calc(33% - 2rem);
+  }
+}
+
 header {
   background-color: #85ffbd;
   background-image: linear-gradient(45deg, #85ffbd 0%, #fffb7d 100%);

components/Footer/Footer.spec.js

@@ -0,0 +1,9 @@
+import { mount } from "@vue/test-utils";
+import Footer from "./";
+
+describe("Footer", () => {
+  it("should render Footer instance", () => {
+    const wrapper = mount(Footer);
+    expect(wrapper.exists()).toBe(true);
+  });
+});

components/Grid/index.vue

@@ -1,5 +1,5 @@
 <template>
-  <div class="flex flex-wrap">
+  <div class="flex flex-wrap justify-center">
     <Film :key="film.id" v-for="film in dataSource" :film="film" />
   </div>
 </template>

components/Header.vue

@@ -1,23 +0,0 @@
-<template>
-  <header
-    id="header"
-    class="fixed top-0 left-0 w-screen bg-white h-16 px-4 py-3 shadow-md"
-  >
-    <router-link to="/" class="flex w-auto h-full items-center">
-      <img
-        class="h-full mr-4"
-        src="https://avatars2.githubusercontent.com/u/1080062?s=200&v=4"
-        alt="PeopleDoc - Icon"
-      />
-      <h1 class="text-2xl font-light tracking-wide">Ghibli</h1>
-    </router-link>
-  </header>
-</template>
-
-<script>
-export default {
-  name: "Header"
-};
-</script>
-
-<style></style>

components/Header/Header.spec.js

@@ -1,10 +1,10 @@
 import { mount, RouterLinkStub } from "@vue/test-utils";
-import Header from "@/components/Header";
+import Header from "./";
 
 describe("Header", () => {
   it("should render Header instance", () => {
     const wrapper = mount(Header, { stubs: ["router-link"] });
-    expect(wrapper.find("h1").text()).toBe("Ghibli");
+    expect(wrapper.find("h1").text()).toBe("PeopleDoc");
   });
 
   it("should redirect to Home page when clicking on brand logo", () => {

components/Header/index.vue

@@ -0,0 +1,31 @@
+<template>
+  <header
+    id="header"
+    class="fixed top-0 left-0 w-screen bg-white h-16 px-4 md:px-8 py-3 shadow-md flex items-center justify-between"
+  >
+    <router-link to="/" class="flex w-auto h-full items-center">
+      <img
+        class="h-full mr-4"
+        src="https://avatars2.githubusercontent.com/u/1080062?s=200&v=4"
+        alt="PeopleDoc - Icon"
+      />
+      <h1 class="text-2xl font-light tracking-wide">PeopleDoc</h1>
+    </router-link>
+    <h2 class="font-medium hidden sm:block">{{ description }}</h2>
+  </header>
+</template>
+
+<script>
+import pkg from "@/package.json";
+
+export default {
+  name: "Header",
+  computed: {
+    description: function() {
+      return pkg.description;
+    }
+  }
+};
+</script>
+
+<style></style>

pages/films/index.vue

@@ -1,8 +1,10 @@
 <template>
   <section class="py-4">
-    <h2 class="text-3xl font-normal mx-auto block text-center mb-4">
+    <img
-      Ghibli films
+      class="w-full max-w-md mx-auto mb-8"
-    </h2>
+      src="~/assets/images/logo.png"
+      alt="Studio Ghibli"
+    />
     <Grid :dataSource="films" />
   </section>
 </template>

test/index.spec.js

@@ -10,7 +10,7 @@ jest.mock("axios", () => ({
 describe("Films page", () => {
   it("should render Films page instance", () => {
     const wrapper = mount(FilmsView);
-    expect(wrapper.find("h2").text()).toBe("Ghibli films");
+    expect(wrapper.find("img").exists()).toBe(true);
   });
 
   it("should get films from Ghibli API", async () => {