docs: update documentation

Author: mrholek

docs/4.0/components/CButton.mdx

@@ -144,8 +144,6 @@ Disabled buttons using the `<a>` component act a little different:
   <CButton component="a" href="#" color="secondary" size="lg" disabled>Link</CButton>
 </Playground>
 
-TODO: callout callout-warning
-
 The `.disabled` class uses `pointer-events: none` to try to disable the link functionality of `<a>`s, but that CSS property is not yet standardized. Besides, even in browsers that do support `pointer-events: none`, keyboard navigation remains unaffected, meaning that sighted keyboard users and users of assistive technologies will still be able to activate these links. So to be safe, we automatically add a `tabindex="-1"` attribute on disabled links (to prevent them from receiving keyboard focus) and use custom JavaScript to disable their functionality.
 
 ## Block buttons

docs/4.0/components/CButtonGroup.mdx

@@ -36,7 +36,6 @@ Wrap a series of `<CButton>` components in `<CButtonGroup>`.
   </CButtonGroup>
 </Playground>
 
-<!-- TODO: callout warning -->
 ##### Ensure the correct `role` and provide a label
 
 For assistive technologies (ex. screen readers) to communicate that a series of buttons are grouped, a proper `role` attribute has to be provided. For button groups, this should be `role="group"`, while toolbars should have a `role="toolbar"`.

docs/4.0/components/CCard.mdx

@@ -16,6 +16,7 @@ import {
   CCardGroup,
   CCardHeader,
   CCardImage,
+  CCardImageOverlay,
   CCardLink,
   CCardSubtitle,
   CCardTitle,
@@ -411,7 +412,18 @@ Similar to headers and footers, cards can include top and bottom "image caps"—
 
 Adapt an image into a background and overlay your text. Depending on the image, you may need additional styles or utilities.
 
-<!-- TODO: add example -->
+<Playground>
+  <CCard className="mb-3 bg-dark text-white">
+    <CCardImage component="svg" className="docs-placeholder-img rounded-0" width="100%" height="250" xmlns="http://www.w3.org/2000/svg" role="img" aria-label="Placeholder: Image" preserveAspectRatio="xMidYMid slice" focusable="false"><title>Placeholder</title><rect width="100%" height="100%" fill="#868e96"></rect><text x="50%" y="50%" fill="#dee2e6" dy=".3em">Image</text></CCardImage>
+    <CCardImageOverlay>
+      <CCardTitle>Card title</CCardTitle>
+      <CCardText>This is a wider card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.</CCardText>
+      <CCardText>Last updated 3 mins ago</CCardText>
+    </CCardImageOverlay>
+  </CCard>
+</Playground>
+
+## Horizontal
 
 Using a combination of grid and utility classes, cards can be made horizontal in a mobile-friendly and responsive way. In the example below, we remove the grid gutters with `.g-0` and use `.col-md-*` classes to make the card horizontal at the `md` breakpoint. Further adjustments may be needed depending on your card content.
 
@@ -788,6 +800,10 @@ Just like with card groups, card footers will automatically line up.
 
 <Props of={CCardImage} />
 
+### CCardImageOverlay
+
+<Props of={CCardImageOverlay} />
+
 ### CCardLink
 
 <Props of={CCardLink} />

docs/4.0/components/CDropdown.mdx

@@ -12,6 +12,8 @@ import {
   CButton,
   CButtonGroup,
   CCallout,
+  CCollapse,
+  CContainer,
   CDropdown,
   CDropdownDivider,
   CDropdownHeader,
@@ -22,7 +24,11 @@ import {
   CForm,
   CFormCheck,
   CFormControl,
-  CFormLabel 
+  CFormLabel,
+  CNavbar,
+  CNavbarBrand,
+  CNavbarNav,
+  CNavbarToggler
 } from '../../../src/index.ts'
 
 
@@ -180,16 +186,13 @@ Opt into darker dropdowns to match a dark navbar or custom style by set `dark` p
 
 And putting it to use in a navbar:
 
-<!-- TODO: update navbar components -->
 <Playground>
-  <nav className="navbar navbar-expand-lg navbar-dark bg-dark">
-    <div className="container-fluid">
-      <a className="navbar-brand" href="#">Navbar</a>
-      <button className="navbar-toggler" type="button" data-coreui-toggle="collapse" data-coreui-target="#navbarNavDarkDropdown" aria-controls="navbarNavDarkDropdown" aria-expanded="false" aria-label="Toggle navigation">
-        <span className="navbar-toggler-icon"></span>
-      </button>
-      <div className="collapse navbar-collapse" id="navbarNavDarkDropdown">
-        <ul className="navbar-nav">
+  <CNavbar expand="lg" colorScheme="dark" className="bg-dark">
+    <CContainer fluid>
+      <CNavbarBrand href="#">Navbar</CNavbarBrand>
+      <CNavbarToggler aria-label="Toggle navigation" aria-expanded={visible} onClick={() => setVisible(!visible)} />
+      <CCollapse className="navbar-collapse" visible={visible}>
+        <CNavbarNav>
           <CDropdown dark component="li" variant="nav-item">
             <CDropdownToggle>Dropdown</CDropdownToggle>
             <CDropdownMenu>
@@ -200,10 +203,10 @@ And putting it to use in a navbar:
               <CDropdownItem href="#">Separated link</CDropdownItem>
             </CDropdownMenu>
           </CDropdown>
-        </ul>
-      </div>
-    </div>
-  </nav>
+        </CNavbarNav>
+      </CCollapse>
+    </CContainer>
+  </CNavbar>
 </Playground>
 
 ## Directions

docs/4.0/forms/CFormCheck.mdx

@@ -5,7 +5,7 @@ description: Create consistent cross-browser and cross-device checkboxes and rad
 menu: Forms
 route: /forms/checks-radios
 ---
-
+import { useEffect, useRef } from 'react'
 import { Playground, Props } from 'docz'
 import { 
   CButton,
@@ -27,13 +27,21 @@ Browser default checkboxes and radios are replaced with the help of `<CFormCheck
   <CFormCheck id="flexCheckChecked" label="Checked checkbox" defaultChecked />
 </Playground>
 
-<!-- TODO: ## Indeterminate
+## Indeterminate
 
 Checkboxes can utilize the `:indeterminate` pseudo class when manually set via JavaScript (there is no available HTML attribute for specifying it).
 
 <Playground>
-  <CFormCheck id="flexCheckIndeterminate" label="Indeterminate checkbox" indeterminate/>
-</Playground> -->
+    {() => {
+      const checkboxRef = useRef(null)
+      useEffect(() => {
+        checkboxRef.current.indeterminate = true
+      })
+      return (
+        <CFormCheck id="flexCheckIndeterminate" label="Indeterminate checkbox" ref={checkboxRef} />
+      )
+    }}
+</Playground>
 
 ### Disabled