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 (
+    <>
+      <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 className="mb-4">
-      <CCardHeader>
+        <CCardHeader>Brand Icons</CCardHeader>
-        Brand Icons
-        <DocsLink href="https://github.com/coreui/coreui-icons" text="GitHub" />
-      </CCardHeader>
         <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 (
+    <>
+      <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 className="mb-4">
-      <CCardHeader>
+        <CCardHeader>Free Icons</CCardHeader>
-        Free Icons / as CIcon{' '}
-        <DocsLink href="https://github.com/coreui/coreui-icons" text="GitHub" />
-      </CCardHeader>
         <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 (
+    <>
+      <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 className="mb-4">
-      <CCardHeader>
+        <CCardHeader>Flag Icons</CCardHeader>
-        Flag Icons
-        <DocsLink href="https://github.com/coreui/coreui-icons" text="GitHub" />
-      </CCardHeader>
         <CCardBody>
           <CRow className="text-center">{getIconsView(flagSet)}</CRow>
         </CCardBody>
       </CCard>
+    </>
   )
 }