docs: update documentation

Author: mrholek

docs/4.0/components/CBreadcrumb.mdx

@@ -1,6 +1,8 @@
 ---
 title: React Breadcrumb Component
 name: Breadcrumb
+description: React breadcrumb navigation component which indicates the current location within a navigational hierarchy that automatically adds separators.
+
 menu: Components
 route: /components/breadcrumb
 ---

docs/4.0/components/CButton.mdx

@@ -7,7 +7,7 @@ route: /components/buttons
 ---
 
 import { Playground, Props } from 'docz'
-import { CButton } from '../../../src/index.ts'
+import { CButton, CCallout } from '../../../src/index.ts'
 
 ## Examples
 
@@ -25,12 +25,12 @@ CoreUI includes a bunch of predefined buttons components, each serving its own s
   <CButton color="link">Link</CButton>
 </Playground>
 
-<div className="callout callout-info">
+<CCallout color="info">
   <h5>Conveying meaning to assistive technologies</h5>
   <p>
     Using color to add meaning only provides a visual indication, which will not be conveyed to users of assistive technologies – such as screen readers. Ensure that information denoted by the color is either obvious from the content itself (e.g. the visible text), or is included through alternative means, such as additional text hidden with the `.visually-hidden` class.
   </p>
-</div>
+</CCallout>
 
 ## Disable text wrapping
 
@@ -80,7 +80,9 @@ If you need a ghost variant of button, set `variant="ghost"` prop to remove all
   <CButton color="dark" variant="ghost">Dark</CButton>
 </Playground>
 
-CALLOUT: Some of the button styles use a relatively light foreground color, and should only be used on a dark background in order to have sufficient contrast.
+<CCallout color="info">
+  Some of the button styles use a relatively light foreground color, and should only be used on a dark background in order to have sufficient contrast.
+</CCallout>
 
 ## Sizes
 

docs/4.0/components/CHeader.mdx

@@ -11,6 +11,7 @@ import { Playground, Props } from 'docz'
 import { useState } from 'react'
 
 import { 
+  CButton,
   CContainer,
   CCollapse,
   CDropdown,
@@ -20,6 +21,8 @@ import {
   CDropdownItemPlain,
   CDropdownMenu,
   CDropdownToggle,
+  CForm,
+  CFormInput,
   CNav,
   CNavItem,
   CNavLink,
@@ -46,12 +49,12 @@ Here's what you need to know before getting started with the header:
 
 Headers come with built-in support for a handful of sub-components. Choose from the following as needed:
 
-- `.header-brand` for your company, product, or project name.
-- `.header-nav` for a full-height and lightweight navigation (including support for dropdowns).
-- `.header-toggler` for use with our collapse plugin and other [navigation toggling](#responsive-behaviors) behaviors.
+- `<CHeaderBrand>` for your company, product, or project name.
+- `<CHeaderNav>` for a full-height and lightweight navigation (including support for dropdowns).
+- `<CHeaderToggler>` for use with our collapse plugin and other [navigation toggling](#responsive-behaviors) behaviors.
 - Flex and spacing utilities for any form controls and actions.
-- `.header-text` for adding vertically centered strings of text.
-- `.collapse.header-collapse` for grouping and hiding header contents by a parent breakpoint.
+- `<CHeaderText>` for adding vertically centered strings of text.
+- `<CCollapse className="header-collapse">` for grouping and hiding header contents by a parent breakpoint.
 
 Here's an example of all the sub-components included in a responsive light-themed header that automatically collapses at the `lg` (large) breakpoint.
 
@@ -91,10 +94,10 @@ Here's an example of all the sub-components included in a responsive light-theme
                   </CNavLink>
                 </CNavItem>
               </CHeaderNav>
-              {/* <form className="d-flex">
-          <input className="form-control me-2" type="search" placeholder="Search">
-          <button className="btn btn-outline-success" type="submit">Search</button>
-        </form> */}
+              <CForm className="d-flex">
+                <CFormInput className="me-2" type="search" placeholder="Search"/>
+                <CButton type="submit" color="success" variant="outline">Search</CButton>
+              </CForm> 
             </CCollapse>
           </CContainer>
         </CHeader>

docs/4.0/components/COffcanvas.mdx

@@ -23,7 +23,7 @@ import {
 
 ### Offcanvas components
 
-Below is an offcanvas example that is shown by default (via `.show` on `.offcanvas`). Offcanvas includes support for a header with a close button and an optional body class for some initial `padding`. We suggest that you include offcanvas headers with dismiss actions whenever possible, or provide an explicit dismiss action.
+Below is an offcanvas example that is shown by default (via `visible={true}`). Offcanvas includes support for a header with a close button and an optional body class for some initial `padding`. We suggest that you include offcanvas headers with dismiss actions whenever possible, or provide an explicit dismiss action.
 
 <Playground>
   <div className="docs-example-offcanvas bg-light">
@@ -42,12 +42,10 @@ Below is an offcanvas example that is shown by default (via `.show` on `.offcanv
 
 ### Live demo
 
-Use the buttons below to show and hide an offcanvas element via JavaScript that toggles the `.show` class on an element with the `.offcanvas` class.
+Use the buttons below to show and hide an offcanvas component.
 
-- `.offcanvas` hides content (default)
-- `.offcanvas.show` shows content
-
-You can use a link with the `href` attribute, or a button with the `data-coreui-target` attribute. In both cases, the `data-coreui-toggle="offcanvas"` is required.
+- `visible={false}` hides content (default)
+- `visible` or `visible={true}` shows content
 
 <Playground>
   {() => {
@@ -74,10 +72,10 @@ You can use a link with the `href` attribute, or a button with the `data-coreui-
 
 There's no default placement for offcanvas components, so you must add one of the modifier classes below;
 
-- `.offcanvas-start` places offcanvas on the left of the viewport (shown above)
-- `.offcanvas-end` places offcanvas on the right of the viewport
-- `.offcanvas-top` places offcanvas on the top of the viewport
-- `.offcanvas-bottom` places offcanvas on the bottom of the viewport
+- `placement="start"` places offcanvas on the left of the viewport (shown above)
+- `placement="end"` places offcanvas on the right of the viewport
+- `placement="top"` places offcanvas on the top of the viewport
+- `placement="bottom"` places offcanvas on the bottom of the viewport
 
 Try the top, right, and bottom examples out below.
 

docs/4.0/components/CTable.mdx

@@ -1173,4 +1173,34 @@ Responsive tables allow tables to be scrolled horizontally with ease. Make any t
       </CTableRow>
     </CTableBody>
   </CTable>
-</Playground>
+</Playground>
+
+## API
+
+### CTable
+
+<Props of={CTable} />
+
+### CTableBody
+
+<Props of={CTableBody} />
+
+### CTableDataCell
+
+<Props of={CTableDataCell} />
+
+### CTableFoot
+
+<Props of={CTableFoot} />
+
+### CTableHead
+
+<Props of={CTableHead} />
+
+### CTableHeaderCell
+
+<Props of={CTableHeaderCell} />
+
+### CTableRow
+
+<Props of={CTableRow} />