From c29f2ab38473544dc29138529485aebd9e34d575 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=C5=81ukasz=20Holeczek?= <lukasz@holeczek.pl>
Date: Thu, 28 Oct 2021 20:07:07 +0200
Subject: [PATCH] refactor: update examples

---
 src/components/AppSidebar.vue   |  1 -
 src/components/DocsCallout.vue  | 17 ++++++++++++-----
 src/main.js                     |  2 +-
 src/views/buttons/Buttons.vue   |  4 ----
 src/views/charts/Charts.vue     |  7 +++++++
 src/views/icons/Brands.vue      |  7 ++++++-
 src/views/icons/CoreUIIcons.vue |  7 ++++++-
 src/views/icons/Flags.vue       |  7 ++++++-
 src/views/theme/ColorTheme.vue  |  1 -
 9 files changed, 38 insertions(+), 15 deletions(-)

diff --git a/src/components/AppSidebar.vue b/src/components/AppSidebar.vue
index 01139645..6d84edd1 100644
--- a/src/components/AppSidebar.vue
+++ b/src/components/AppSidebar.vue
@@ -1,7 +1,6 @@
 <template>
   <CSidebar
     position="fixed"
-    selfHiding="md"
     :unfoldable="sidebarUnfoldable"
     :visible="sidebarVisible"
     @visible-change="
diff --git a/src/components/DocsCallout.vue b/src/components/DocsCallout.vue
index 489517e8..ff1adea9 100644
--- a/src/components/DocsCallout.vue
+++ b/src/components/DocsCallout.vue
@@ -1,10 +1,12 @@
 <template>
   <CCallout color="info" class="bg-white">
-    A Vue {{ name }} component {{ plural ? 'have' : 'has' }} been created as a
-    native Vue.js version of Bootstrap {{ name }}. {{ name }}
-    {{ plural ? 'are' : 'is' }}
-    delivered with some new features, variants, and unique design that matches
-    CoreUI Design System requirements.
+    {{content
+        ? content
+        : `A Vue ${name} component ${
+            plural ? 'have' : 'has'
+          } been created as a native Vue.js version
+      of Bootstrap ${name}. ${name} ${plural ? 'are' : 'is'} delivered with some new features,
+      variants, and unique design that matches CoreUI Design System requirements.`}}
     <br />
     <br />
     For more information please visit our official
@@ -20,6 +22,11 @@ import packageJson from '../../package.json'
 export default {
   name: 'DocsCallout',
   props: {
+    content: {
+      type: String,
+      default: undefined,
+      required: false,
+    },
     href: {
       type: String,
       default: undefined,
diff --git a/src/main.js b/src/main.js
index 3490bf54..7e7d386a 100644
--- a/src/main.js
+++ b/src/main.js
@@ -4,7 +4,7 @@ import router from './router'
 import store from './store'
 
 import CoreuiVue from '@coreui/vue'
-import { CIcon } from '@coreui/icons-vue'
+import CIcon from '@coreui/icons-vue'
 import { iconsSet as icons } from '@/assets/icons'
 import DocsCallout from '@/components/DocsCallout'
 import DocsExample from '@/components/DocsExample'
diff --git a/src/views/buttons/Buttons.vue b/src/views/buttons/Buttons.vue
index 0b56ca68..90e21d84 100644
--- a/src/views/buttons/Buttons.vue
+++ b/src/views/buttons/Buttons.vue
@@ -296,8 +296,6 @@
             >
               <CButton
                 :color="color"
-                :active="state === 'active' ? true : false"
-                :disabled="state === 'disabled' ? true : false"
                 shape="rounded-pill"
               >
                 {{ color.charAt(0).toUpperCase() + color.slice(1) }}
@@ -329,8 +327,6 @@
             >
               <CButton
                 :color="color"
-                :active="state === 'active' ? true : false"
-                :disabled="state === 'disabled' ? true : false"
                 shape="rounded-0"
               >
                 {{ color.charAt(0).toUpperCase() + color.slice(1) }}
diff --git a/src/views/charts/Charts.vue b/src/views/charts/Charts.vue
index eff0304f..a7fb838f 100644
--- a/src/views/charts/Charts.vue
+++ b/src/views/charts/Charts.vue
@@ -1,5 +1,12 @@
 <template>
   <CRow>
+    <CCol :xs="12">
+      <DocsCallout
+        name="Chart"
+        href="components/chart"
+        content="React wrapper component for Chart.js 3.0, the most popular charting library."
+      />
+    </CCol>
     <CCol :md="6" class="mb-4">
       <CCard>
         <CCardHeader> Line Chart </CCardHeader>
diff --git a/src/views/icons/Brands.vue b/src/views/icons/Brands.vue
index f374af09..1792a851 100644
--- a/src/views/icons/Brands.vue
+++ b/src/views/icons/Brands.vue
@@ -1,9 +1,14 @@
 <template>
   <CRow>
     <CCol>
+      <DocsCallout
+        name="CoreUI Brand Icons"
+        href="components/chart"
+        content="CoreUI Brand Icons. CoreUI Icons package is delivered with more than 1500 icons in multiple formats SVG, PNG, and Webfonts. CoreUI Icons are beautifully crafted symbols for common actions and items. You can use them in your digital products for web or mobile app."
+      />
       <CCard>
         <CCardHeader>
-          <strong>Vue CoreUI Brand Icons</strong>
+          CoreUI Icons - Brand
         </CCardHeader>
         <CCardBody>
           <CRow class="text-center">
diff --git a/src/views/icons/CoreUIIcons.vue b/src/views/icons/CoreUIIcons.vue
index 11191748..d75d8b5f 100644
--- a/src/views/icons/CoreUIIcons.vue
+++ b/src/views/icons/CoreUIIcons.vue
@@ -1,9 +1,14 @@
 <template>
   <CRow>
     <CCol>
+      <DocsCallout
+        name="CoreUI Icons"
+        href="components/chart"
+        content="CoreUI Icons. CoreUI Icons package is delivered with more than 1500 icons in multiple formats SVG, PNG, and Webfonts. CoreUI Icons are beautifully crafted symbols for common actions and items. You can use them in your digital products for web or mobile app."
+      />
       <CCard>
         <CCardHeader>
-          <strong>Vue CoreUI Icons</strong>
+          CoreUI Icons Free
         </CCardHeader>
         <CCardBody>
           <CRow class="text-center">
diff --git a/src/views/icons/Flags.vue b/src/views/icons/Flags.vue
index f3aef03a..ed41eaeb 100644
--- a/src/views/icons/Flags.vue
+++ b/src/views/icons/Flags.vue
@@ -1,9 +1,14 @@
 <template>
   <CRow>
     <CCol>
+      <DocsCallout
+        name="CoreUI Flag Icons"
+        href="components/chart"
+        content="CoreUI Flag Icons. CoreUI Icons package is delivered with more than 1500 icons in multiple formats SVG, PNG, and Webfonts. CoreUI Icons are beautifully crafted symbols for common actions and items. You can use them in your digital products for web or mobile app."
+      />
       <CCard>
         <CCardHeader>
-          <strong>Vue CoreUI Flag Icons</strong>
+          CoreUI Icons - Flag
         </CCardHeader>
         <CCardBody>
           <CRow class="text-center">
diff --git a/src/views/theme/ColorTheme.vue b/src/views/theme/ColorTheme.vue
index 336074fc..ad0767f9 100644
--- a/src/views/theme/ColorTheme.vue
+++ b/src/views/theme/ColorTheme.vue
@@ -5,7 +5,6 @@
       style="padding-top: 75%"
     ></div>
     <slot></slot>
-    <ColorView />
   </CCol>
 </template>