From fb7bf628ad8ad0c6f8b10e8f65429f5c9547f816 Mon Sep 17 00:00:00 2001
From: woothu <32914662+woothu@users.noreply.github.com>
Date: Fri, 31 May 2019 10:40:13 +0200
Subject: [PATCH] refactor: add CIcon component to widgets

---
 src/views/widgets/Widgets.vue       | 339 ++++++++++++++++------------
 src/views/widgets/WidgetsSocial.vue |  82 +++++--
 2 files changed, 261 insertions(+), 160 deletions(-)

diff --git a/src/views/widgets/Widgets.vue b/src/views/widgets/Widgets.vue
index b171ee2e..d12f541d 100644
--- a/src/views/widgets/Widgets.vue
+++ b/src/views/widgets/Widgets.vue
@@ -88,62 +88,37 @@
         <CWidgetIcon
           header="$1.999,50"
           text="Income"
-          addIconClasses="fa fa-cogs c-bg-primary"
-        />
+          variant="primary"
+        >
+          <CIcon name="settings" width="24"/>
+        </CWidgetIcon>
       </CCol>
       <CCol col="12" sm="6" lg="3">
         <CWidgetIcon
           header="$1.999,50"
-          addIconClasses="fa fa-laptop c-bg-info"
           text="Income"
-        />
+          variant="info"
+        >
+          <CIcon name="laptop" width="24"/>
+        </CWidgetIcon>
       </CCol>
       <CCol col="12" sm="6" lg="3">
         <CWidgetIcon
           header="$1.999,50"
-          addIconClasses="fa fa-moon-o c-bg-warning"
           text="Income"
-        />
+          variant="warning"
+        >
+          <CIcon name="moon" width="24"/>
+        </CWidgetIcon>
       </CCol>
       <CCol col="12" sm="6" lg="3">
         <CWidgetIcon
           header="$1.999,50"
-          addIconClasses="fa fa-bell c-bg-danger"
           text="Income"
-        />
-      </CCol>
-    </CRow>
-    <CRow>
-      <CCol col="12" sm="6" lg="3">
-        <CWidgetIcon
-          header="$1.999,50"
-          addIconClasses="fa fa-cogs c-bg-primary"
-          text="Income"
-          link="#"
-        />
-      </CCol>
-      <CCol col="12" sm="6" lg="3">
-        <CWidgetIcon
-          header="$1.999,50"
-          addIconClasses="fa fa-laptop c-bg-info"
-          text="Income"
-          link="#"
-        />
-      </CCol>
-      <CCol col="12" sm="6" lg="3">
-        <CWidgetIcon
-          header="$1.999,50"
-          addIconClasses="fa fa-moon-o c-bg-warning c-bg-primary"
-          text="Income" link="#"
-        />
-      </CCol>
-      <CCol col="12" sm="6" lg="3">
-        <CWidgetIcon
-          header="$1.999,50"
-          addIconClasses="fa fa-bell c-bg-danger"
-          text="Income"
-          link="#"
-        />
+          variant="danger"
+        >
+          <CIcon name="bell" width="24"/>
+        </CWidgetIcon>
       </CCol>
     </CRow>
     <CRow>
@@ -151,33 +126,83 @@
         <CWidgetIcon
           header="$1.999,50"
           text="Income"
-          addIconClasses="fa fa-cogs c-bg-primary"
-          noPadding
-        />
+          variant="primary"
+          link="#"
+        >
+          <CIcon name="settings" width="24"/>
+        </CWidgetIcon>
       </CCol>
       <CCol col="12" sm="6" lg="3">
         <CWidgetIcon
           header="$1.999,50"
           text="Income"
-          addIconClasses="fa fa-laptop c-bg-info"
-          noPadding
-        />
+          variant="info"
+          link="#"
+        >
+          <CIcon name="laptop" width="24"/>
+        </CWidgetIcon>
       </CCol>
       <CCol col="12" sm="6" lg="3">
         <CWidgetIcon
           header="$1.999,50"
           text="Income"
-          addIconClasses="fa fa-moon-o c-bg-warning c-bg-primary"
-          noPadding
-        />
+          variant="warning"
+          link="#"
+        >
+          <CIcon name="moon" width="24"/>
+        </CWidgetIcon>
       </CCol>
       <CCol col="12" sm="6" lg="3">
         <CWidgetIcon
           header="$1.999,50"
           text="Income"
-          addIconClasses="fa fa-bell c-bg-danger"
+          variant="danger"
+          link="#"
+        >
+          <CIcon name="bell" width="24"/>
+        </CWidgetIcon>
+      </CCol>
+    </CRow>
+    <CRow>
+      <CCol col="12" sm="6" lg="3">
+        <CWidgetIcon
+          header="$1.999,50"
+          text="Income"
+          variant="primary"
           noPadding
-        />
+        >
+          <CIcon name="settings" width="24"/>
+        </CWidgetIcon>
+      </CCol>
+      <CCol col="12" sm="6" lg="3">
+        <CWidgetIcon
+          header="$1.999,50"
+          text="Income"
+          variant="info"
+          noPadding
+        >
+          <CIcon name="laptop" width="24"/>
+        </CWidgetIcon>
+      </CCol>
+      <CCol col="12" sm="6" lg="3">
+        <CWidgetIcon
+          header="$1.999,50"
+          text="Income"
+          variant="warning"
+          noPadding
+        >
+          <CIcon name="moon" width="24"/>
+        </CWidgetIcon>
+      </CCol>
+      <CCol col="12" sm="6" lg="3">
+        <CWidgetIcon
+          header="$1.999,50"
+          text="Income"
+          variant="danger"
+          noPadding
+        >
+          <CIcon name="bell" width="24"/>
+        </CWidgetIcon>
       </CCol>
     </CRow>
     <CRow>
@@ -185,25 +210,31 @@
         <CWidgetIcon
           header="$1.999,50"
           text="Income"
-          addIconClasses="fa fa-cogs c-bg-primary c-px-5"
+          variant="primary"
           noPadding
-        />
+        >
+          <CIcon name="settings" class="c-mx-5 " width="24"/>
+        </CWidgetIcon>
       </CCol>
       <CCol col="12" sm="6" lg="4">
         <CWidgetIcon
           header="$1.999,50"
           text="Income"
-          addIconClasses="fa fa-laptop c-bg-info c-px-5"
+          variant="info"
           noPadding
-        />
+        >
+          <CIcon name="laptop" class="c-mx-5 " width="24"/>
+        </CWidgetIcon>
       </CCol>
       <CCol col="12" sm="6" lg="4">
         <CWidgetIcon
           header="$1.999,50"
           text="Income"
-          addIconClasses="fa fa-moon-o c-bg-warning c-bg-primary c-px-5"
+          variant="warning"
           noPadding
-        />
+        >
+          <CIcon name="moon" class="c-mx-5 " width="24"/>
+        </CWidgetIcon>
       </CCol>
     </CRow>
     <CRow>
@@ -211,206 +242,232 @@
         <CWidgetIcon
           header="$1.999,50"
           text="Income"
-          addIconClasses="fa fa-cogs c-bg-primary c-px-5"
+          variant="primary"
           noPadding
           link="#"
-        />
+        >
+          <CIcon name="settings" class="c-mx-5 " width="24"/>
+        </CWidgetIcon>
       </CCol>
       <CCol col="12" sm="6" lg="4">
         <CWidgetIcon
           header="$1.999,50"
           text="Income"
-          addIconClasses="fa fa-laptop c-bg-info c-px-5"
+          variant="info"
           noPadding
           link="#"
-        />
+        >
+          <CIcon name="laptop" class="c-mx-5 " width="24"/>
+        </CWidgetIcon>
       </CCol>
       <CCol col="12" sm="6" lg="4">
         <CWidgetIcon
           header="$1.999,50"
           text="Income"
-          addIconClasses="fa fa-moon-o c-bg-warning c-bg-primary c-px-5"
+          variant="warning"
           noPadding
           link="#"
-        />
+        >
+          <CIcon name="moon" class="c-mx-5" width="24"/>
+        </CWidgetIcon>
       </CCol>
     </CRow>
     <WidgetsSocial noCharts/>
     <WidgetsSocial/>
     <CCardGroup class="c-mb-4">
       <CWidgetProgressIcon
-        iconClasses="icon-people"
         header="87.500"
         text="Visitors"
         variant="info"
-      />
+      >
+        <CIcon name="people" height="36"/>
+      </CWidgetProgressIcon>
       <CWidgetProgressIcon
-        iconClasses="icon-user-follow"
         header="385"
         text="New Clients"
         variant="success"
-      />
+      >
+        <CIcon name="userFollow" height="36"/>
+      </CWidgetProgressIcon>
       <CWidgetProgressIcon
-        iconClasses="icon-basket-loaded"
         header="1238"
         text="Products sold"
         variant="warning"
-      />
+      >
+        <CIcon name="basketLoaded" height="36"/>
+      </CWidgetProgressIcon>
       <CWidgetProgressIcon
-        iconClasses="icon-pie-chart"
         header="28%"
         text="Returning Visitors"
-      />
+      >
+        <CIcon name="chart" height="36"/>
+      </CWidgetProgressIcon>
       <CWidgetProgressIcon
-        iconClasses="icon-speedometer"
         header="5:34:11"
         text="Avg. Time"
         variant="danger"
-      />
+      >
+        <CIcon name="speedometer" height="36"/>
+      </CWidgetProgressIcon>
     </CCardGroup>
     <CCardGroup class="c-mb-4">
       <CWidgetProgressIcon
-        iconClasses="icon-people"
         header="87.500"
         text="Visitors"
         variant="info"
         inverse
-      />
+      >
+        <CIcon name="people" height="36"/>
+      </CWidgetProgressIcon>
       <CWidgetProgressIcon
-        iconClasses="icon-user-follow"
         header="385"
         text="New Clients"
         variant="success"
         inverse
-      />
+      >
+        <CIcon name="userFollow" height="36"/>
+      </CWidgetProgressIcon>
       <CWidgetProgressIcon
-        iconClasses="icon-basket-loaded"
         header="1238"
         text="Products sold"
         variant="warning"
         inverse
-      />
+      >
+        <CIcon name="basketLoaded" height="36"/>
+      </CWidgetProgressIcon>
       <CWidgetProgressIcon
-        iconClasses="icon-pie-chart"
         header="28%"
-        variant="primary"
         text="Returning Visitors"
+        variant="primary"
         inverse
-      />
+      >
+        <CIcon name="chart" height="36"/>
+      </CWidgetProgressIcon>
       <CWidgetProgressIcon
-        iconClasses="icon-speedometer"
         header="5:34:11"
         text="Avg. Time"
         variant="danger"
         inverse
-      />
+      >
+        <CIcon name="speedometer" height="36"/>
+      </CWidgetProgressIcon>
     </CCardGroup>
     <CRow>
       <CCol sm="6" md="2">
         <CWidgetProgressIcon
-          iconClasses="icon-people"
           header="87.500"
-          text="visitors"
+          text="Visitors"
           variant="info"
-        />
-      </CCol>
-      <CCol sm="6" md="2">
-        <CWidgetProgressIcon
-          iconClasses="icon-user-follow"
-          header="385"
-          text="New Clients"
-          variant="success"
-        />
-      </CCol>
-      <CCol sm="6" md="2">
-        <CWidgetProgressIcon
-          iconClasses="icon-basket-loaded"
-          header="1238"
-          text="Products sold"
-          variant="warning"
-        />
-      </CCol>
-      <CCol sm="6" md="2">
-        <CWidgetProgressIcon
-          iconClasses="icon-pie-chart"
-          header="28%"
-          text="Returning Visitors"
-        />
-      </CCol>
-      <CCol sm="6" md="2">
-        <CWidgetProgressIcon
-          iconClasses="icon-speedometer"
-          header="5:34:11"
-          text="Avg. Time"
         >
-          <CProgress
-            variant="danger"
-            :value="25"
-            class="c-progress-xs c-my-3 c-mb-0"
-          />
+          <CIcon name="people" height="36"/>
+        </CWidgetProgressIcon>
+      </CCol>
+      <CCol sm="6" md="2">
+        <CWidgetProgressIcon
+          header="385"
+          text="New Clients"
+          variant="success"
+        >
+          <CIcon name="userFollow" height="36"/>
+        </CWidgetProgressIcon>
+      </CCol>
+      <CCol sm="6" md="2">
+        <CWidgetProgressIcon
+          header="1238"
+          text="Products sold"
+          variant="warning"
+        >
+          <CIcon name="basketLoaded" height="36"/>
+        </CWidgetProgressIcon>
+      </CCol>
+      <CCol sm="6" md="2">
+        <CWidgetProgressIcon
+          header="28%"
+          text="Returning Visitors"
+          variant="primary"
+        >
+          <CIcon name="chart" height="36"/>
+        </CWidgetProgressIcon>
+      </CCol>
+      <CCol sm="6" md="2">
+        <CWidgetProgressIcon
+          header="5:34:11"
+          text="Avg. Time"
+          variant="danger"
+        >
+          <CIcon name="speedometer" height="36"/>
         </CWidgetProgressIcon>
       </CCol>
       <CCol sm="6" md="2">
         <CWidgetProgressIcon
-          iconClasses="icon-speech"
           header="972"
-          text="Comments"
+          text="comments"
           variant="info"
-        />
+        >
+          <CIcon name="speech" height="36"/>
+        </CWidgetProgressIcon>
       </CCol>
     </CRow>
     <CRow>
       <CCol sm="6" md="2">
         <CWidgetProgressIcon
-          iconClasses="icon-people"
           header="87.500"
-          text="visitors"
+          text="Visitors"
           variant="info"
           inverse
-        />
+        >
+          <CIcon name="people" height="36"/>
+        </CWidgetProgressIcon>
       </CCol>
       <CCol sm="6" md="2">
         <CWidgetProgressIcon
-          iconClasses="icon-user-follow"
           header="385"
           text="New Clients"
           variant="success"
           inverse
-        />
+        >
+          <CIcon name="userFollow" height="36"/>
+        </CWidgetProgressIcon>
       </CCol>
       <CCol sm="6" md="2">
         <CWidgetProgressIcon
-          iconClasses="icon-basket-loaded"
-          header="1238" text="Products sold"
+          header="1238"
+          text="Products sold"
           variant="warning"
           inverse
-        />
+        >
+          <CIcon name="basketLoaded" height="36"/>
+        </CWidgetProgressIcon>
       </CCol>
       <CCol sm="6" md="2">
         <CWidgetProgressIcon
-          iconClasses="icon-pie-chart"
           header="28%"
           text="Returning Visitors"
           variant="primary"
           inverse
-        />
+        >
+          <CIcon name="chart" height="36"/>
+        </CWidgetProgressIcon>
       </CCol>
       <CCol sm="6" md="2">
         <CWidgetProgressIcon
-          iconClasses="icon-speedometer"
-          header="5:34:11" text="Avg. Time"
+          header="5:34:11"
+          text="Avg. Time"
           variant="danger"
           inverse
-        />
+        >
+          <CIcon name="speedometer" height="36"/>
+        </CWidgetProgressIcon>
       </CCol>
       <CCol sm="6" md="2">
         <CWidgetProgressIcon
-          iconClasses="icon-speech"
           header="972"
-          text="Comments"
+          text="comments"
           variant="info"
           inverse
-        />
+        >
+          <CIcon name="speech" height="36"/>
+        </CWidgetProgressIcon>
       </CCol>
     </CRow>
     <WidgetsDropdown/>
diff --git a/src/views/widgets/WidgetsSocial.vue b/src/views/widgets/WidgetsSocial.vue
index b4b9844f..07439fa5 100644
--- a/src/views/widgets/WidgetsSocial.vue
+++ b/src/views/widgets/WidgetsSocial.vue
@@ -9,6 +9,11 @@
           leftHeader="459"
           leftFooter="feeds"
         >
+          <CIcon
+            name="socialFacebook"
+            height="32"
+            class="c-position-absolute"
+          />
           <CChartLineSimple
             style="height:100px"
             backgroundColor="rgba(255,255,255,.1)"
@@ -26,6 +31,11 @@
           leftHeader="1.792"
           leftFooter="tweets"
         >
+          <CIcon
+            name="socialTwitter"
+            height="32"
+            class="c-position-absolute"
+          />
           <CChartLineSimple
             style="height:100px"
             backgroundColor="rgba(255,255,255,.1)"
@@ -43,6 +53,11 @@
           leftHeader="292"
           leftFooter="feeds"
         >
+          <CIcon
+            name="socialLinkedin"
+            height="32"
+            class="c-position-absolute"
+          />
           <CChartLineSimple
             style="height:100px"
             backgroundColor="rgba(255,255,255,.1)"
@@ -54,12 +69,17 @@
        </CCol>
        <CCol md="3" sm="6">
         <CWidgetSocial
-          variant="google-plus"
-          rightHeader="894"
-          rightFooter="followers"
-          leftHeader="92"
-          leftFooter="circles"
+          rightHeader="12"
+          rightFooter="events"
+          leftHeader="4"
+          leftFooter="meetings"
+          variant="warning"
         >
+          <CIcon
+            name="calendar"
+            height="32"
+            class="c-position-absolute"
+          />
           <CChartLineSimple
             style="height:100px"
             backgroundColor="rgba(255,255,255,.1)"
@@ -78,35 +98,58 @@
           rightFooter="friends"
           leftHeader="459"
           leftFooter="feeds"
-        />
-      </CCol>
-      <CCol md="3" sm="6">
+        >
+          <CIcon
+            name="socialFacebook"
+            height="32"
+            class="c-position-absolute"
+          />
+        </CWidgetSocial>
+       </CCol>
+       <CCol md="3" sm="6">
         <CWidgetSocial
           variant="twitter"
           rightHeader="973k"
           rightFooter="followers"
           leftHeader="1.792"
           leftFooter="tweets"
-        />
-      </CCol>
-      <CCol md="3" sm="6">
+        >
+          <CIcon
+            name="socialTwitter"
+            height="32"
+            class="c-position-absolute"
+          />
+        </CWidgetSocial>
+       </CCol>
+       <CCol md="3" sm="6">
         <CWidgetSocial
           variant="linkedin"
           rightHeader="500+"
           rightFooter="contracts"
           leftHeader="292"
           leftFooter="feeds"
-        />
-      </CCol>
+        >
+          <CIcon
+            name="socialLinkedin"
+            height="32"
+            class="c-position-absolute"
+          />
+        </CWidgetSocial>
+       </CCol>
       <CCol md="3" sm="6">
         <CWidgetSocial
+          rightHeader="12"
+          rightFooter="events"
+          leftHeader="4"
+          leftFooter="meetings"
           variant="warning"
-          iconClasses="fa fa-battery-1"
-          rightHeader="0:57"
-          rightFooter="time"
-          leftHeader="17"
-          leftFooter="percentage"
-        />
+        >
+          <CIcon
+            name="calendar"
+            height="32"
+            class="c-position-absolute"
+          />
+        </CWidgetSocial>
       </CCol>
     </template>
   </CRow>
@@ -114,6 +157,7 @@
 
 <script>
 import { CChartLineSimple } from '../charts/index.js'
+
 export default {
   name: 'WidgetsSocial',
   components: {