refactor: update examples

src/components/DocsCallout.js

@@ -5,7 +5,7 @@ import { CCallout, CLink } from '@coreui/react'
 import packageJson from '../../package.json'
 
 const DocsCallout = (props) => {
-  const { href, name } = props
+  const { content, href, name } = props
 
   const plural = name.slice(-1) === 's' ? true : false
 
@@ -13,9 +13,13 @@ const DocsCallout = (props) => {
 
   return (
     <CCallout color="info" className="bg-white">
-      A React {name} component {plural ? 'have' : 'has'} been created as a native React.js version
+      {content
-      of Bootstrap {name}. {name} {plural ? 'are' : 'is'} delivered with some new features,
+        ? content
-      variants, and unique design that matches CoreUI Design System requirements.
+        : `A React ${name} component ${
+            plural ? 'have' : 'has'
+          } been created as a native React.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{' '}
@@ -28,6 +32,7 @@ const DocsCallout = (props) => {
 }
 
 DocsCallout.propTypes = {
+  content: PropTypes.string,
   href: PropTypes.string,
   name: PropTypes.string,
 }

src/views/charts/Charts.js

@@ -8,19 +8,23 @@ import {
   CChartPolarArea,
   CChartRadar,
 } from '@coreui/react-chartjs'
-import { DocsLink } from 'src/components'
+import { DocsCallout } from 'src/components'
 
 const Charts = () => {
   const random = () => Math.round(Math.random() * 100)
 
   return (
     <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 xs={6}>
         <CCard className="mb-4">
-          <CCardHeader>
+          <CCardHeader>Bar Chart</CCardHeader>
-            Bar Chart
-            <DocsLink href="http://www.chartjs.org" />
-          </CCardHeader>
           <CCardBody>
             <CChartBar
               data={{

src/views/icons/brands/Brands.js

@@ -2,7 +2,7 @@ import React from 'react'
 import { CCard, CCardBody, CCardHeader, CCol, CRow } from '@coreui/react'
 import CIcon from '@coreui/icons-react'
 import { brandSet } from '@coreui/icons'
-import { DocsLink } from 'src/components'
+import { DocsCallout } from 'src/components'
 
 const toKebabCase = (str) => {
   return str.replace(/([a-z0-9]|(?=[A-Z]))([A-Z])/g, '$1-$2').toLowerCase()
@@ -19,15 +19,19 @@ export const getIconsView = (iconset) => {
 
 const CoreUIIcons = () => {
   return (
-    <CCard className="mb-4">
+    <>
-      <CCardHeader>
+      <DocsCallout
-        Brand Icons
+        name="CoreUI Brand Icons"
-        <DocsLink href="https://github.com/coreui/coreui-icons" text="GitHub" />
+        href="components/chart"
-      </CCardHeader>
+        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."
-      <CCardBody>
+      />
-        <CRow className="text-center">{getIconsView(brandSet)}</CRow>
+      <CCard className="mb-4">
-      </CCardBody>
+        <CCardHeader>Brand Icons</CCardHeader>
-    </CCard>
+        <CCardBody>
+          <CRow className="text-center">{getIconsView(brandSet)}</CRow>
+        </CCardBody>
+      </CCard>
+    </>
   )
 }
 

src/views/icons/coreui-icons/CoreUIIcons.js

@@ -2,19 +2,23 @@ import React from 'react'
 import { CCard, CCardBody, CCardHeader, CRow } from '@coreui/react'
 import { freeSet } from '@coreui/icons'
 import { getIconsView } from '../brands/Brands.js'
-import { DocsLink } from 'src/components'
+import { DocsCallout } from 'src/components'
 
 const CoreUIIcons = () => {
   return (
-    <CCard className="mb-4">
+    <>
-      <CCardHeader>
+      <DocsCallout
-        Free Icons / as CIcon{' '}
+        name="CoreUI Icons"
-        <DocsLink href="https://github.com/coreui/coreui-icons" text="GitHub" />
+        href="components/chart"
-      </CCardHeader>
+        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."
-      <CCardBody>
+      />
-        <CRow className="text-center">{getIconsView(freeSet)}</CRow>
+      <CCard className="mb-4">
-      </CCardBody>
+        <CCardHeader>Free Icons</CCardHeader>
-    </CCard>
+        <CCardBody>
+          <CRow className="text-center">{getIconsView(freeSet)}</CRow>
+        </CCardBody>
+      </CCard>
+    </>
   )
 }
 

src/views/icons/flags/Flags.js

@@ -2,19 +2,23 @@ import React from 'react'
 import { CCard, CCardBody, CCardHeader, CRow } from '@coreui/react'
 import { getIconsView } from '../brands/Brands.js'
 import { flagSet } from '@coreui/icons'
-import { DocsLink } from 'src/components'
+import { DocsCallout } from 'src/components'
 
 const CoreUIIcons = () => {
   return (
-    <CCard className="mb-4">
+    <>
-      <CCardHeader>
+      <DocsCallout
-        Flag Icons
+        name="CoreUI Flag Icons"
-        <DocsLink href="https://github.com/coreui/coreui-icons" text="GitHub" />
+        href="components/chart"
-      </CCardHeader>
+        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."
-      <CCardBody>
+      />
-        <CRow className="text-center">{getIconsView(flagSet)}</CRow>
+      <CCard className="mb-4">
-      </CCardBody>
+        <CCardHeader>Flag Icons</CCardHeader>
-    </CCard>
+        <CCardBody>
+          <CRow className="text-center">{getIconsView(flagSet)}</CRow>
+        </CCardBody>
+      </CCard>
+    </>
   )
 }