Brand colors are developed.

Author: jmosawy

src/App.vue

@@ -9,18 +9,42 @@
           </div>
         </div>
       </section>
+      <section class="brand">
+        <div class="container">
+          <brand-row v-for="item in colorData">
+            <h2 slot="title">{{ item.name }}</h2>
+
+            <template v-for="color in item.colors">
+              <color-box slot="colors" :color="color"></color-box>
+            </template>
+          </brand-row>
+        </div>
+      </section>
     </div>
   </div>
 </template>
 
 <script>
+  /* eslint-disable object-shorthand */
+
   import BcHeader from './components/header.vue';
   import SearchBox from './components/search-box.vue';
+  import BrandRow from './components/brand-row.vue';
+  import ColorBox from './components/color-box.vue';
+
+  import colorData from './assets/data.json';
 
   export default {
+    data() {
+      return {
+        colorData: colorData,
+      };
+    },
     components: {
       BcHeader,
       SearchBox,
+      BrandRow,
+      ColorBox,
     },
   };
 </script>

src/components/brand-row.vue

@@ -0,0 +1,24 @@
+<template>
+  <div class="brand-row">
+    <div class="brand-row__brand-title">
+      <slot name="title">
+        <h2>Brand Title</h2>
+      </slot>
+    </div>
+    <div class="brand-row__brand-colors">
+      <slot name="colors">
+        <color-box color="#EA1D5D"></color-box>
+      </slot>
+    </div>
+  </div>
+</template>
+
+<script>
+  import ColorBox from './color-box.vue';
+
+  export default {
+    components: {
+      ColorBox,
+    },
+  };
+</script>

src/components/color-box.vue

@@ -0,0 +1,9 @@
+<template>
+  <div class="color-box" :style="{ backgroundColor: color }" :data-clipboard-text="color"></div>
+</template>
+
+<script>
+  export default {
+    props: ['color'],
+  };
+</script>

src/style.scss

@@ -6,3 +6,5 @@
 
 @import "styles/components/header";
 @import "styles/components/form-input";
+@import "styles/components/color-box";
+@import "styles/components/brand-row";

src/styles/components/_brand-row.scss

@@ -0,0 +1,31 @@
+.brand-row {
+  @extend %clearfix;
+  background-color: #ffffff;
+  display: block;
+  width: 100%;
+  padding: 8px 0;
+
+  &__brand-title {
+    @extend %fontFamily;
+    float: left;
+    width: 218px;
+    font-size: 18px;
+    font-weight: 400;
+    color: #607D8B;
+    margin-top: 20px;
+  }
+
+  &__brand-colors {
+    @extend %clearfix;
+    float: left;
+    width: calc(100% - 218px);
+
+    .color-box {
+      float: left;
+    }
+  }
+
+  &:not(:last-child) {
+    border-bottom: 1px solid #CFD8DC;
+  }
+}

src/styles/components/_color-box.scss

@@ -0,0 +1,16 @@
+.color-box {
+  width: 70px;
+  height: 40px;
+  border-radius: 8px;
+  margin: 8px;
+  cursor: pointer;
+
+  &:hover:after {
+    content: '';
+    display: block;
+    width: 100%;
+    height: 100%;
+    background-color: rgba(0, 0, 0, 0.5);
+    border-radius: 8px;
+  }
+}

src/styles/core/_global.scss

@@ -3,5 +3,10 @@ body {
 }
 
 .page {
-  padding-top: 58px;
+  .search {
+    padding-top: 58px;
+  }
+  .brand {
+    padding-top: 90px;
+  }
 }