[feat] Core components (#17)

* [feat] Create the core button

* [feat] Create the core text input

* [feat] Create the core figure

package.json

@@ -6,6 +6,7 @@
     "serve": "vue-cli-service serve",
     "build": "vue-cli-service build",
     "test:unit": "vue-cli-service test:unit",
+    "test:unit:watch": "vue-cli-service test:unit --watch",
     "lint": "vue-cli-service lint"
   },
   "dependencies": {

src/assets/styles/commons.css

@@ -12,14 +12,11 @@ h2,
   line-height: 16px;
 }
 
-h2,
-.product-code {
+h2 {
   font-size: 12px;
   line-height: 16px;
 }
 
-.product-quantity,
-.summary input,
 .summary ul li,
 .summary-total-cost {
   font-size: 14px;
@@ -31,7 +28,6 @@ h2,
   line-height: 24px;
 }
 
-.products button.count,
 .summary-total-price {
   font-size: 20px;
   line-height: 25px;
@@ -110,34 +106,7 @@ h1 {
   width: 15%;
 }
 
-input {
-  width: 100%;
-  height: 48px;
-  border-radius: 4px;
-}
-
 .currency {
   margin-left: 4px;
 }
 
-button[type="button"] {
-  margin-top: 24px;
-  padding-top: 16px;
-  padding-bottom: 16px;
-  width: 100%;
-  border-radius: 4px;
-  background: #00a0df;
-  color: #ffffff;
-  font-size: 16px;
-  font-weight: bold;
-  line-height: 14px;
-  cursor: pointer;
-}
-
-button:disabled {
-  background: #eee;
-  color: #333;
-  border: solid 1px #999;
-  opacity: .5;
-  cursor: auto;
-}

src/components/Modal.vue

@@ -10,9 +10,9 @@
           </div>
 
           <div class="modal-footer">
-            <button type="button" @click="handleHideModal()">
+            <shop-button @click="handleHideModal()">
               Confirm
-            </button>
+            </shop-button>
           </div>
         </div>
       </div>
@@ -23,12 +23,17 @@
 <script lang="ts">
 import { defineComponent } from "vue";
 import EVENT from "@/enums/event";
+import ShopButton from "@/components/core/Button.vue";
 
 const { HIDE_MODAL } = EVENT;
 
 export default defineComponent({
   name: "Modal",
 
+  components: {
+    ShopButton
+  },
+
   setup(props, { emit }) {
     const handleHideModal = () => {
       emit(HIDE_MODAL);

src/components/ProductItem.vue

@@ -2,37 +2,32 @@
   <li class="product row">
     <!--Image and description-->
     <div class="col-product">
-      <figure class="product-image">
-        <img :src="getProductImage(product.code)" :alt="product.name" />
-        <div class="product-description">
-          <h1>{{ product.name }}</h1>
-          <p class="product-code">
-            Product code
-            <span>{{ product.id }}</span>
-          </p>
-        </div>
-      </figure>
+      <shop-figure :product="product" />
     </div>
 
     <!--Quantity-->
     <div class="col-quantity">
-      <button
-        class="count"
+      <shop-button
+        classes="icon"
         data-testid="remove-product"
         @click="removeProduct()"
       >
         -
-      </button>
-      <input
+      </shop-button>
+
+      <shop-input-text
         v-model.number="quantity"
-        type="text"
-        class="product-quantity"
         data-testid="product-quantity"
         disabled
       />
-      <button class="count" data-testid="add-product" @click="addProduct()">
+
+      <shop-button
+        classes="icon"
+        data-testid="add-product"
+        @click="addProduct()"
+      >
         +
-      </button>
+      </shop-button>
     </div>
 
     <!--Price-->
@@ -62,20 +57,29 @@
 
 <script lang="ts">
 import { ref, computed, defineComponent } from "vue";
-import { PricingRule } from "@/types";
+import { Product } from "@/types";
 import isValidProductCode from "@/utils/isValidProductCode";
 import EVENT from "@/enums/event";
 import PRODUCT_CODE from "@/enums/product";
+import ShopButton from "@/components/core/Button.vue";
+import ShopInputText from "@/components/core/InputText.vue";
+import ShopFigure from "@/components/core/Figure.vue";
 
 const { ADD_PRODUCT, REMOVE_PRODUCT } = EVENT;
 
 export default defineComponent({
   name: "ProductItem",
 
+  components: {
+    ShopButton,
+    ShopInputText,
+    ShopFigure
+  },
+
   props: {
     product: {
       required: true,
-      type: Object as () => PricingRule
+      type: Object as () => Product
     }
   },
 
@@ -115,55 +119,21 @@ export default defineComponent({
       }
     };
 
-    const getProductImage = (code: string): string => {
-      return `/img/${code.toLowerCase()}.png`;
-    };
-
     return {
       quantity,
       priceTotal,
       addProduct,
-      removeProduct,
-      getProductImage
+      removeProduct
     };
   }
 });
 </script>
 
 <style scoped>
-.product-image {
-  display: flex;
-  align-items: center;
-  flex-flow: row nowrap;
-}
-
-.product-image img {
-  margin-right: 16px;
-  width: 72px;
-  height: 72px;
-  border: 1px solid #cacad1;
-  border-radius: 4px;
-}
-
 .product h1 {
   color: #00a0df;
 }
 
-.product-code {
-  border-radius: 4px;
-  color: #a6a7b3;
-  letter-spacing: 0.13px;
-  font-weight: 400;
-}
-
-.product-quantity {
-  width: 40px;
-  height: 40px;
-  border: 2px solid #dbdbe0;
-  border-radius: 4px;
-  text-align: center;
-}
-
 .product-price {
   color: #000000;
   font-size: 16px;

src/components/SummaryTotal.vue

@@ -8,13 +8,9 @@
         </span>
       </li>
     </ul>
-    <button
-      :disabled="!hasTotalCost"
-      type="button"
-      @click="handleDisplayModal()"
-    >
+    <shop-button :disabled="!hasTotalCost" @click="handleDisplayModal()">
       Checkout
-    </button>
+    </shop-button>
 
     <teleport to="body">
       <Modal v-if="displayModal" @hide-modal="handleHideModal">
@@ -29,6 +25,7 @@
 <script lang="ts">
 import { defineComponent } from "vue";
 import Modal from "@/components/Modal.vue";
+import ShopButton from "@/components/core/Button.vue";
 import Checkout from "@/components/Checkout.vue";
 import useModal from "@/composable-functions/useModal";
 import useShoppingSummary from "@/composable-functions/useShoppingSummary";
@@ -38,7 +35,8 @@ export default defineComponent({
 
   components: {
     Modal,
-    Checkout
+    Checkout,
+    ShopButton
   },
 
   setup() {

src/components/core/Button.vue

@@ -0,0 +1,82 @@
+<template>
+  <button
+    :type="type"
+    :disabled="disabled"
+    :class="classes"
+    :data-testid="testId"
+    @click="onClick"
+  >
+    <slot></slot>
+  </button>
+</template>
+
+<script lang="ts">
+import { defineComponent, PropType } from "vue";
+
+export default defineComponent({
+  name: "ShopButton",
+
+  props: {
+    type: {
+      default: "button",
+      type: String as PropType<"button" | "submit" | "reset">
+    },
+    disabled: {
+      default: false,
+      type: Boolean
+    },
+    classes: {
+      default: "button",
+      type: String as PropType<"button" | "icon">
+    },
+    testId: {
+      default: "",
+      type: String
+    }
+  },
+  emits: ["click"],
+  setup(props, { emit }) {
+    const onClick = () => emit("click");
+
+    return {
+      onClick
+    };
+  }
+});
+</script>
+
+<style scoped>
+button.button {
+  margin-top: 24px;
+  padding-top: 16px;
+  padding-bottom: 16px;
+  width: 100%;
+  border-radius: 4px;
+  background: #00a0df;
+  color: #ffffff;
+  font-size: 16px;
+  font-weight: bold;
+  line-height: 14px;
+  cursor: pointer;
+}
+
+button:disabled {
+  background: #eee;
+  color: #333;
+  border: solid 1px #999;
+  opacity: 0.5;
+  cursor: auto;
+}
+
+button.icon {
+  font-size: 20px;
+  line-height: 25px;
+  padding: 0 8px;
+  height: 40px;
+  border: none;
+  background: transparent;
+  color: #00a0df;
+  font-weight: bold;
+  cursor: pointer;
+}
+</style>