refactor: add reusable folder with DocsLink component

jsconfig.json

@@ -0,0 +1,6 @@
+{
+  "compilerOptions": {
+    "baseUrl": "."
+  },
+  "include": ["src"]
+}

src/reusable/DocsLink.js

@@ -0,0 +1,28 @@
+import React from 'react'
+import { CLink } from '@coreui/react'
+
+const DocsLink = props => {
+  const {
+    name,
+    text,
+    ...rest
+  } = props
+
+  const href = name ? `https://coreui.io/react/docs/components/${name}` : props.href
+
+  return (
+    <div className="card-header-actions">
+      <CLink 
+        {...rest}
+        href={href}
+        rel="noreferrer noopener" 
+        target="_blank" 
+        className="card-header-action"  
+      >
+        <small className="text-muted">{ text || 'docs' }</small>
+      </CLink>
+    </div>
+  )
+}
+
+export default React.memo(DocsLink)

src/reusable/index.js

@@ -0,0 +1,5 @@
+import DocsLink from './DocsLink'
+
+export {
+  DocsLink
+}

src/views/base/breadcrumbs/Breadcrumbs.js

@@ -10,6 +10,7 @@ import {
   CCol,
   CRow
 } from '@coreui/react'
+import { DocsLink } from 'src/reusable'
 import routes from '../../../routes'
 
 const Breadcrumbs = () => {
@@ -19,16 +20,7 @@ const Breadcrumbs = () => {
         <CCard>
           <CCardHeader>
             Bootstrap Breadcrumb
-            <div className="card-header-actions">
+            <DocsLink name="CBreadcrumb"/>
-              <a 
-                href="https://coreui.github.io/components/breadcrumbs/" 
-                rel="noreferrer noopener" 
-                target="_blank" 
-                className="card-header-action"
-              >
-                <small className="text-muted">docs</small>
-              </a>
-            </div>
           </CCardHeader>
           <CCardBody>
             <h6>CBreadcrumbRouter wrapper component</h6>

src/views/base/cards/Cards.js

@@ -13,6 +13,8 @@ import {
   CLink
 } from  '@coreui/react'
 import CIcon from '@coreui/icons-react'
+import { DocsLink } from 'src/reusable'
+
 
 const Cards = () => {
   const [collapsed, setCollapsed] = React.useState(true)
@@ -25,6 +27,7 @@ const Cards = () => {
           <CCard>
             <CCardHeader>
               Card title
+              <DocsLink name="CCard"/>
             </CCardHeader>
             <CCardBody>
               Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut

src/views/base/carousels/Carousels.js

@@ -12,6 +12,7 @@ import {
   CCol,
   CRow 
 } from '@coreui/react'
+import { DocsLink } from 'src/reusable'
 
 const slides = [
   'data:image/svg+xml;charset=UTF-8,%3Csvg%20width%3D%22800%22%20height%3D%22400%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%20800%20400%22%20preserveAspectRatio%3D%22none%22%3E%3Cdefs%3E%3Cstyle%20type%3D%22text%2Fcss%22%3E%23holder_1607923e7e2%20text%20%7B%20fill%3A%23555%3Bfont-weight%3Anormal%3Bfont-family%3AHelvetica%2C%20monospace%3Bfont-size%3A40pt%20%7D%20%3C%2Fstyle%3E%3C%2Fdefs%3E%3Cg%20id%3D%22holder_1607923e7e2%22%3E%3Crect%20width%3D%22800%22%20height%3D%22400%22%20fill%3D%22%23777%22%3E%3C%2Frect%3E%3Cg%3E%3Ctext%20x%3D%22285.9296875%22%20y%3D%22217.75625%22%3EFirst%20slide%3C%2Ftext%3E%3C%2Fg%3E%3C%2Fg%3E%3C%2Fsvg%3E',
@@ -28,6 +29,7 @@ const Carousels = () => {
         <CCard>
           <CCardHeader>
             Carousel with controls
+            <DocsLink name="CCarousel"/>
           </CCardHeader>
           <CCardBody>
             <CCarousel>

src/views/base/collapses/Collapses.js

@@ -10,6 +10,7 @@ import {
   CFade,
   CRow 
 } from '@coreui/react';
+import { DocsLink } from 'src/reusable'
 
 const Collapses = () => {
 
@@ -51,11 +52,7 @@ const Collapses = () => {
         <CCard>
           <CCardHeader>
             Collapse
-            <div className="card-header-actions">
+            <DocsLink name="CCollapse"/>
-              <a href="https://coreui.github.io/components/collapse/" rel="noreferrer noopener" target="_blank" className="card-header-action">
-                <small className="text-muted">docs</small>
-              </a>
-            </div>
           </CCardHeader>
           <CCollapse show={collapse}>
             <CCardBody>
@@ -129,11 +126,7 @@ const Collapses = () => {
         <CCard>
           <CCardHeader>
             Fade
-            <div className="card-header-actions">
+            <DocsLink name="CFade"/>
-              <a href="https://coreui.github.io/components/fade/" rel="noreferrer noopener" target="_blank" className="card-header-action">
-                <small className="text-muted">docs</small>
-              </a>
-            </div>
           </CCardHeader>
           <CCardBody>
             <CFade timeout={300} in={fade} tag="h5" className="mt-3">

src/views/base/forms/BasicForms.js

@@ -31,6 +31,7 @@ import {
   CRow
 } from '@coreui/react'
 import CIcon from '@coreui/icons-react'
+import { DocsLink } from 'src/reusable'
 
 const BasicForms = () => {
   const [collapsed, setCollapsed] = React.useState(true)
@@ -44,6 +45,7 @@ const BasicForms = () => {
             <CCardHeader>
               Credit Card
               <small> Form</small>
+              <DocsLink name="-Input"/>
             </CCardHeader>
             <CCardBody>
               <CRow>

src/views/base/index.js

@@ -0,0 +1,20 @@
+import Breadcrumbs from './Breadcrumbs';
+import Cards from './Cards';
+import Carousels from './Carousels';
+import Collapses from './Collapses';
+import Dropdowns from './Dropdowns';
+import Jumbotrons from './Jumbotrons';
+import ListGroups from './ListGroups';
+import Navbars from './Navbars';
+import Navs from './Navs';
+import Paginations from './Paginations';
+import Popovers from './Popovers';
+import ProgressBar from './ProgressBar';
+import Switches from './Switches';
+import Tabs from './Tabs';
+import Tooltips from './Tooltips';
+
+export {
+  Breadcrumbs, Cards, Carousels, Collapses, Dropdowns, Jumbotrons, ListGroups, Navbars, Navs, Popovers, ProgressBar, Switches, Tabs, Tooltips, Paginations,
+};
+

src/views/base/jumbotrons/Jumbotrons.js

@@ -11,6 +11,7 @@ import {
   CEmbed,
   CEmbedItem
 } from '@coreui/react'
+import { DocsLink } from 'src/reusable'
 
 const Jumbotrons = () => {
 
@@ -21,11 +22,7 @@ const Jumbotrons = () => {
           <CCard>
             <CCardHeader>
               Jumbotron
-              <div className="card-header-actions">
+              <DocsLink name="CJumbotron"/>
-                <a href="https://coreui.github.io/components/jumbotron/" rel="noreferrer noopener" target="_blank" className="card-header-action">
-                  <small className="text-muted">docs</small>
-                </a>
-              </div>
             </CCardHeader>
             <CCardBody>
               <CJumbotron className="border">

src/views/base/list-groups/ListGroups.js

@@ -1,4 +1,4 @@
-import React, { useState } from 'react';
+import React, { useState } from 'react'
 import {
   CBadge,
   CCard,
@@ -10,7 +10,9 @@ import {
   CRow,
   CTabContent,
   CTabPane
-} from '@coreui/react';
+} from '@coreui/react'
+import { DocsLink } from 'src/reusable'
+
 
 const ListGroups = () => {
   const [activeTab, setActiveTab] = useState(1)
@@ -23,11 +25,7 @@ const ListGroups = () => {
           <CCard>
             <CCardHeader>
               List group
-              <div className="card-header-actions">
+              <DocsLink name="CListGroup"/>
-                <a href="https://coreui.github.io/components/listgroup/" rel="noreferrer noopener" target="_blank" className="card-header-action">
-                  <small className="text-muted">docs</small>
-                </a>
-              </div>
             </CCardHeader>
             <CCardBody>
               <CListGroup>

src/views/base/navbars/Navbars.js

@@ -19,7 +19,7 @@ import {
   CButton,
   CImg
 } from '@coreui/react'
-// import CIcon from '@coreui/icons-react'
+import { DocsLink } from 'src/reusable'
 
 const CNavbars = () => {
   const [isOpen, setIsOpen] = useState(false)
@@ -32,6 +32,7 @@ const CNavbars = () => {
       <CCard>
         <CCardHeader>
           CNavbar
+          <DocsLink name="CNavbar"/>
         </CCardHeader>
         <CCardBody>
           <CNavbar expandable="sm" color="info" >

src/views/base/navs/Navs.js

@@ -13,6 +13,7 @@ import {
   CNavItem,
   CNavLink
 } from '@coreui/react'
+import { DocsLink } from 'src/reusable'
 
 const Navs = () => {
   return (
@@ -22,11 +23,7 @@ const Navs = () => {
           <CCard>
             <CCardHeader>
               Navs
-              <div className="card-header-actions">
+              <DocsLink name="CNav"/>
-                <a href="https://coreui.github.io/components/navs/" rel="noreferrer noopener" target="_blank" className="card-header-action">
-                  <small className="text-muted">docs</small>
-                </a>
-              </div>
             </CCardHeader>
             <CCardBody>
               <small>List Based</small>

src/views/base/paginations/Pagnations.js

@@ -5,6 +5,8 @@ import {
   CCardHeader,
   CPagination
 } from '@coreui/react'
+import { DocsLink } from 'src/reusable'
+
 
 const Paginations = () => {
   const [currentPage, setCurrentPage] = useState(2)
@@ -14,11 +16,7 @@ const Paginations = () => {
       <CCard>
         <CCardHeader>
           Pagination
-          <div className="card-header-actions">
+          <DocsLink name="CPagination"/>
-            <a href="https://coreui.github.io/components/pagination/" rel="noreferrer noopener" target="_blank" className="card-header-action">
-              <small className="text-muted">docs</small>
-            </a>
-          </div>
         </CCardHeader>
         <CCardBody>
           <h6>Default</h6>

src/views/base/popovers/Popovers.js

@@ -9,6 +9,7 @@ import {
   CCol,
   CLink
 } from '@coreui/react'
+import { DocsLink } from 'src/reusable'
 
 const Popovers = () => {
   const placements = [
@@ -23,16 +24,7 @@ const Popovers = () => {
       <CCard>
         <CCardHeader>
           Popovers
-          <div className="card-header-actions">
+          <DocsLink name="CPopover"/>
-            <a
-              href="https://coreui.github.io/components/popovers/"
-              rel="noreferrer noopener"
-              target="_blank"
-              className="card-header-action"
-            >
-              <small className="text-muted">docs</small>
-            </a>
-          </div>
         </CCardHeader>
         <CCardBody>
           {/*eslint-disable-next-line*/}

src/views/base/progress-bar/ProgressBar.js

@@ -6,6 +6,7 @@ import {
   CProgress,
   CProgressBar
 } from '@coreui/react'
+import { DocsLink } from 'src/reusable'
 
 const ProgressBar = () => {
   return (
@@ -13,11 +14,7 @@ const ProgressBar = () => {
       <CCard>
         <CCardHeader>
           Progress
-          <div className="card-header-actions">
+          <DocsLink name="CProgressBar"/>
-            <a href="https://coreui.github.io/components/progress/" rel="noreferrer noopener" target="_blank" className="card-header-action">
-              <small className="text-muted">docs</small>
-            </a>
-          </div>
         </CCardHeader>
         <CCardBody>
           <CProgress className="mb-3" />

src/views/base/switches/Switches.js

@@ -7,6 +7,7 @@ import {
   CRow,
   CSwitch
 } from '@coreui/react'
+import { DocsLink } from 'src/reusable'
 
 const Switches = () => {
   return (
@@ -15,6 +16,7 @@ const Switches = () => {
         <CCard>
           <CCardHeader>
             3d Switch
+            <DocsLink name="CSwitch"/>
           </CCardHeader>
           <CCardBody>
             <CSwitch className={'mx-1'} variant={'3d'} color={'primary'} defaultChecked onChange={(e)=>console.log(e.target.checked)}/>

src/views/base/tables/Tables.js

@@ -8,6 +8,7 @@ import {
   CDataTable,
   CRow
 } from '@coreui/react'
+import { DocsLink } from 'src/reusable'
 
 import usersData from '../../users/UsersData'
 
@@ -30,6 +31,7 @@ const Tables = () => {
           <CCard>
             <CCardHeader>
               Simple Table
+              <DocsLink name="CModal"/>
             </CCardHeader>
             <CCardBody>
             <CDataTable

src/views/base/tabs/Tabs.js

@@ -13,6 +13,7 @@ import {
   CCardHeader
 } from '@coreui/react'
 import CIcon from '@coreui/icons-react'
+import { DocsLink } from 'src/reusable'
 
 const Tabs = () => {
   const [active, setActive] = useState(1)
@@ -24,6 +25,7 @@ const Tabs = () => {
         <CCard>
           <CCardHeader>
             Index indentifiers
+            <DocsLink name="CTabs"/>
           </CCardHeader>
           <CCardBody>
             <CTabs>

src/views/base/tooltips/Tooltips.js

@@ -9,6 +9,7 @@ import {
   CCol,
   CLink
 } from '@coreui/react'
+import { DocsLink } from 'src/reusable'
 
 const Tooltips = () => {
   const placements = [
@@ -23,16 +24,7 @@ const Tooltips = () => {
       <CCard>
         <CCardHeader>
           Tooltips
-          <div className="card-header-actions">
+          <DocsLink name="CTooltip"/>
-            <a
-              href="https://coreui.github.io/components/tooltips/"
-              rel="noreferrer noopener"
-              target="_blank"
-              className="card-header-action"
-            >
-              <small className="text-muted">docs</small>
-            </a>
-          </div>
         </CCardHeader>
         <CCardBody>
           {/*eslint-disable-next-line*/}

src/views/buttons/button-dropdowns/ButtonDropdowns.js

@@ -18,6 +18,7 @@ import {
   CInput,
   CInputCheckbox
 } from '@coreui/react'
+import { DocsLink } from 'src/reusable'
 
 const ButtonDropdowns = () => {
   return (
@@ -26,11 +27,7 @@ const ButtonDropdowns = () => {
         <CCard>
           <CCardHeader>
             Dropdowns
-            <div className="card-header-actions">
+            <DocsLink name="CDropdown"/>
-              <a href="https://coreui.github.io/components/button-dropdown/" rel="noreferrer noopener" target="_blank" className="card-header-action">
-                <small className="text-muted">docs</small>
-              </a>
-            </div>
           </CCardHeader>
           <CCardBody>
 

src/views/buttons/button-groups/ButtonGroups.js

@@ -18,6 +18,7 @@ import {
   CRow,
   CCallout
 } from '@coreui/react'
+import { DocsLink } from 'src/reusable'
 
 const ButtonGroups = () => {
   return (
@@ -26,11 +27,7 @@ const ButtonGroups = () => {
         <CCard>
           <CCardHeader>
             Callout
-            <div className="card-header-actions">
+            <DocsLink name="CCallout"/>
-              <a href="https://coreui.github.io/components/button-group/" rel="noreferrer noopener" target="_blank" className="card-header-action">
-                <small className="text-muted">docs</small>
-              </a>
-            </div>
           </CCardHeader>
           <CCardBody>
             <CCallout color="primary">
@@ -42,11 +39,7 @@ const ButtonGroups = () => {
         <CCard>
           <CCardHeader>
             Button Group
-            <div className="card-header-actions">
+            <DocsLink name="-Button/#CButtonGroup"/>
-              <a href="https://coreui.github.io/components/button-group/" rel="noreferrer noopener" target="_blank" className="card-header-action">
-                <small className="text-muted">docs</small>
-              </a>
-            </div>
           </CCardHeader>
           <CCardBody>
             <CButtonGroup>

src/views/buttons/buttons/Buttons.js

@@ -8,6 +8,7 @@ import {
   CRow
 } from '@coreui/react'
 import CIcon from '@coreui/icons-react'
+import { DocsLink } from 'src/reusable'
 
 const Buttons = () => {
   return (
@@ -15,6 +16,7 @@ const Buttons = () => {
       <CCard>
         <CCardHeader>
           Standard Buttons
+          <DocsLink name="-Button"/>
         </CCardHeader>
         <CCardBody>
           <CRow className="align-items-center">

src/views/buttons/index.js

@@ -0,0 +1,8 @@
+import ButtonDropdowns from './ButtonDropdowns'
+import ButtonGroups from './ButtonGroups'
+import Buttons from './Buttons'
+import BrandButtons from './BrandButtons'
+
+export {
+  ButtonDropdowns, ButtonGroups, Buttons, BrandButtons
+}

src/views/charts/ChartBarSimple.js

@@ -48,7 +48,6 @@ const ChartBarSimple = props => {
   return (
     <CChartBar
       {...attributes}
-      type="bar"
       datasets={defaultDatasets}
       options={defaultOptions}
       labels={label}

src/views/charts/ChartLineSimple.js

@@ -123,7 +123,6 @@ const ChartLineSimple = props => {
   return (
     <CChartLine
       {...attributes}
-      type="line"
       datasets={computedDatasets}
       options={computedOptions}
       labels={label}

src/views/charts/Charts.js

@@ -13,6 +13,7 @@ import {
   CChartPie,
   CChartPolarArea
 } from '@coreui/react-chartjs'
+import { DocsLink } from 'src/reusable'
 
 const Charts = () => {
 
@@ -21,15 +22,10 @@ const Charts = () => {
       <CCard>
         <CCardHeader>
           Bar Chart
-          <div className="card-header-actions">
+          <DocsLink href="http://www.chartjs.org"/>
-            <a href="http://www.chartjs.org" className="card-header-action">
-              <small className="text-muted">docs</small>
-            </a>
-          </div>
         </CCardHeader>
         <CCardBody>
           <CChartBar
-            type="bar"
             datasets={[
               {
                 label: 'GitHub Commits',
@@ -53,7 +49,6 @@ const Charts = () => {
         </CCardHeader>
         <CCardBody>
           <CChartDoughnut
-            type="doughnut"
             datasets={[
               {
                 backgroundColor: [
@@ -81,7 +76,6 @@ const Charts = () => {
         </CCardHeader>
         <CCardBody>
           <CChartLine
-            type="line"
             datasets={[
               {
                 label: 'Data One',
@@ -110,7 +104,6 @@ const Charts = () => {
         </CCardHeader>
         <CCardBody>
           <CChartPie
-            type="pie"
             datasets={[
               {
                 backgroundColor: [
@@ -138,7 +131,6 @@ const Charts = () => {
         </CCardHeader>
         <CCardBody>
           <CChartPolarArea
-            type="polarArea"
             datasets={[
               {
                 label: 'My First dataset',
@@ -179,7 +171,6 @@ const Charts = () => {
         </CCardHeader>
         <CCardBody>
           <CChartRadar
-            type="radar"
             datasets={[
               {
                 label: '2019',

src/views/icons/brands/Brands.js

@@ -2,6 +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/reusable'
 
 const toKebabCase = (str) => {
   return str.replace(/([a-z0-9]|(?=[A-Z]))([A-Z])/g, '$1-$2').toLowerCase()
@@ -20,12 +21,8 @@ const CoreUIIcons = () => {
   return (
     <CCard>
       <CCardHeader>
-        Brand Icons / as CIcon{' '}
+        Brand Icons
-        <div className="card-header-actions">
+        <DocsLink href="https://github.com/coreui/coreui-icons" text="GitHub"/>
-          <a href="https://github.com/coreui/coreui-icons" rel="noreferrer noopener" target="_blank" className="card-header-action">
-            <small className="text-muted">Github</small>
-          </a>
-        </div>
       </CCardHeader>
       <CCardBody>
         <CRow className="text-center">

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

@@ -2,17 +2,14 @@ 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/reusable'
 
 const CoreUIIcons = () => {
   return (
     <CCard>
       <CCardHeader>
         Free Icons / as CIcon{' '}
-        <div className="card-header-actions">
+        <DocsLink href="https://github.com/coreui/coreui-icons" text="GitHub"/>
-          <a href="https://github.com/coreui/coreui-icons" rel="noreferrer noopener" target="_blank" className="card-header-action">
-            <small className="text-muted">Github</small>
-          </a>
-        </div>
       </CCardHeader>
       <CCardBody>
         <CRow className="text-center">

src/views/icons/flags/Flags.js

@@ -2,17 +2,14 @@ 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/reusable'
 
 const CoreUIIcons = () => {
   return (
     <CCard>
       <CCardHeader>
-        Flag Icons / as CIcon{' '}
+        Flag Icons
-        <div className="card-header-actions">
+        <DocsLink href="https://github.com/coreui/coreui-icons" text="GitHub"/>
-          <a href="https://github.com/coreui/coreui-icons" rel="noreferrer noopener" target="_blank" className="card-header-action">
-            <small className="text-muted">Github</small>
-          </a>
-        </div>
       </CCardHeader>
       <CCardBody>
         <CRow className="text-center">

src/views/icons/index.js

@@ -0,0 +1,7 @@
+import CoreUIIcons from './coreui-icons';
+import Flags from './flags';
+import Brands from './brands';
+
+export {
+  CoreUIIcons, Flags, Brands
+};

src/views/notifications/alerts/Alerts.js

@@ -10,6 +10,7 @@ import {
   CProgress,
   CRow
 } from '@coreui/react'
+import { DocsLink } from 'src/reusable'
 
 const Alerts = () => {
   const [visible, setVisible] = React.useState(10)
@@ -21,11 +22,7 @@ const Alerts = () => {
           <CCard>
             <CCardHeader>
               Alerts
-              <div className="card-header-actions">
+              <DocsLink name="CAlert"/>
-                <a href="https://coreui.github.io/components/alerts/" rel="noreferrer noopener" target="_blank" className="card-header-action">
-                  <small className="text-muted">docs</small>
-                </a>
-              </div>
             </CCardHeader>
             <CCardBody>
               <CAlert color="primary">

src/views/notifications/badges/Badges.js

@@ -9,6 +9,7 @@ import {
   CCol,
   CRow
 } from '@coreui/react'
+import { DocsLink } from 'src/reusable'
 
 const Badges = () => {
   return (
@@ -17,11 +18,7 @@ const Badges = () => {
         <CCard>
           <CCardHeader>
             Badges
-            <div className="card-header-actions">
+            <DocsLink name="CBadge"/>
-              <a href="https://coreui.github.io/components/badge/" rel="noreferrer noopener" target="_blank" className="card-header-action">
-                <small className="text-muted">docs</small>
-              </a>
-            </div>
           </CCardHeader>
           <CCardBody>
             <h1>Example heading <CBadge color="secondary">New</CBadge></h1>

src/views/notifications/index.js

@@ -0,0 +1,8 @@
+import Alerts from './Alerts';
+import Badges from './Badges';
+import Modals from './Modals';
+import Toaster from './Toaster';
+
+export {
+  Alerts, Badges, Modals, Toaster
+};

src/views/notifications/modals/Modals.js

@@ -12,6 +12,7 @@ import {
   CModalTitle,
   CRow
 } from '@coreui/react'
+import { DocsLink } from 'src/reusable'
 
 const Modals = () => {
 
@@ -30,25 +31,17 @@ const Modals = () => {
         <CCard>
           <CCardHeader>
             Bootstrap Modals
+            <DocsLink name="CModal"/>
           </CCardHeader>
           <CCardBody>
             <CButton 
               onClick={() => setModal(!modal)} 
               className="mr-1"
-              color="secondary"
             >Launch demo modal</CButton>
-            <CButton 
+            <CButton onClick={() => setLarge(!large)} className="mr-1">
-              onClick={() => setLarge(!large)} 
-              className="mr-1" 
-              color="secondary"
-            >
               Launch large modal
             </CButton>
-            <CButton 
+            <CButton onClick={() => setSmall(!large)} className="mr-1">
-              onClick={() => setSmall(!large)} 
-              className="mr-1" 
-              color="secondary"
-            >
               Launch small modal
             </CButton>
             <CModal 

src/views/notifications/toaster/Toaster.js

@@ -17,6 +17,7 @@ import {
   CFormGroup,
   CLabel
 } from '@coreui/react'
+import { DocsLink } from 'src/reusable'
 
 const Toaster = () => {
 
@@ -65,6 +66,7 @@ const Toaster = () => {
     <CCard>
       <CCardHeader>
         Toasts.
+        <DocsLink name="-Toast"/>
       </CCardHeader>
       <CCardBody>
         <CContainer>

src/views/theme/colors/Colors.js

@@ -1,7 +1,15 @@
 import React, { useEffect, useState, createRef } from 'react'
 import classNames from 'classnames'
-import { CRow, CCol } from '@coreui/react'
+import {
+  CRow,
+  CCol,
+  CCard,
+  CCardHeader,
+  CCardBody
+} from '@coreui/react'
 import { rgbToHex } from '@coreui/utils'
+import { DocsLink } from 'src/reusable'
+
 
 const ThemeView = () => {
   const [color, setColor] = useState('rgb(255, 255, 255)')
@@ -43,11 +51,12 @@ const ThemeColor = ({className, children}) => {
 const Colors = () => {
   return (
     <>
-      <div className="card">
+      <CCard>
-        <div className="card-header">
+        <CCardHeader>
           Theme colors
-        </div>
+          <DocsLink href="https://coreui.io/docs/utilities/colors/"/>
-        <div className="card-body">
+        </CCardHeader>
+        <CCardBody>
           <CRow>
             <ThemeColor className="bg-primary">
               <h6>Brand Primary Color</h6>
@@ -74,13 +83,13 @@ const Colors = () => {
               <h6>Brand Dark Color</h6>
             </ThemeColor>
           </CRow>
-        </div>
+        </CCardBody>
-      </div>
+      </CCard>
-      <div className="card">
+      <CCard>
-        <div className="card-header">
+        <CCardHeader>
           Grays
-        </div>
+        </CCardHeader>
-        <div className="card-body">
+        <CCardBody>
           <CRow className="mb-3">
             <ThemeColor className="bg-gray-100">
               <h6>Gray 100 Color</h6>
@@ -110,8 +119,8 @@ const Colors = () => {
               <h6>Gray 900 Color</h6>
             </ThemeColor>
           </CRow>
-        </div>
+        </CCardBody>
-      </div>
+      </CCard>
     </>
   )
 }

src/views/theme/typography/Typography.js

@@ -1,13 +1,20 @@
 import React from 'react'
+import {
+  CCard,
+  CCardHeader,
+  CCardBody
+} from '@coreui/react'
+import { DocsLink } from 'src/reusable'
 
 const Typography = () => {
   return (
     <>
-      <div className="card">
+      <CCard>
-        <div className="card-header">
+        <CCardHeader>
           Headings
-        </div>
+          <DocsLink href="https://coreui.io/docs/content/typography/"/>
-        <div className="card-body">
+        </CCardHeader>
+        <CCardBody>
           <p>Documentation and examples for Bootstrap typography, including global settings, headings, body text, lists, and more.</p>
           <table className="table">
             <thead>
@@ -55,15 +62,18 @@ const Typography = () => {
             </tr>
             </tbody>
           </table>
-        </div>
+        </CCardBody>
-      </div>
+      </CCard>
-      <div className="card">
+      <CCard>
-        <div className="card-header">
+        <CCardHeader>
           Headings
-        </div>
+        </CCardHeader>
-        <div className="card-body">
+        <CCardBody>
-          <p><code className="highlighter-rouge">.h1</code> through <code className="highlighter-rouge">.h6</code> classes are also available, for when you
+          <p><code className="highlighter-rouge">.h1</code> through 
-            want to match the font styling of a heading but cannot use the associated HTML element.</p>
+          <code className="highlighter-rouge">.h6</code> 
+          classes are also available, for when you
+          want to match the font styling of a heading but cannot use the 
+          associated HTML element.</p>
           <div className="bd-example">
             <p className="h1">h1. Bootstrap heading</p>
             <p className="h2">h2. Bootstrap heading</p>
@@ -72,9 +82,9 @@ const Typography = () => {
             <p className="h5">h5. Bootstrap heading</p>
             <p className="h6">h6. Bootstrap heading</p>
           </div>
-        </div>
+        </CCardBody>
-      </div>
+      </CCard>
-      <div className="card">
+      <CCard>
         <div className="card-header">
           Display headings
         </div>
@@ -100,12 +110,12 @@ const Typography = () => {
             </table>
           </div>
         </div>
-      </div>
+      </CCard>
-      <div className="card">
+      <CCard>
-        <div className="card-header">
+        <CCardHeader>
           Inline text elements
-        </div>
+        </CCardHeader>
-        <div className="card-body">
+        <CCardBody>
           <p>Traditional heading elements are designed to work best in the meat of your page content. When you need a heading to stand out, consider using
             a <strong>display heading</strong>—a larger, slightly more opinionated heading style.</p>
           <div className="bd-example">
@@ -124,13 +134,13 @@ const Typography = () => {
             <p><strong>This line rendered as bold text.</strong></p>
             <p><em>This line rendered as italicized text.</em></p>
           </div>
-        </div>
+        </CCardBody>
-      </div>
+      </CCard>
-      <div className="card">
+      <CCard>
-        <div className="card-header">
+        <CCardHeader>
           Description list alignment
-        </div>
+        </CCardHeader>
-        <div className="card-body">
+        <CCardBody>
           <p>Align terms and descriptions horizontally by using our grid system’s predefined classes (or semantic mixins). For longer terms, you can
             optionally add a <code className="highlighter-rouge">.text-truncate</code> class to truncate the text with an ellipsis.</p>
           <div className="bd-example">
@@ -159,8 +169,8 @@ const Typography = () => {
               </dd>
             </dl>
           </div>
-        </div>
+        </CCardBody>
-      </div>
+      </CCard>
     </>
   )
 }