docs: update documentation

Author: mrholek

packages/docs/content/components/dropdown.mdx

@@ -390,12 +390,12 @@ Historically dropdown menu contents _had_ to be links, but that's no longer the
 You can also create non-interactive dropdown items with `<CDropdownItemPlain>`.
 
 ```jsx preview
-<div className="border rounded py-2">
+<CDropdownMenu>
   <CDropdownItemPlain>Dropdown item text</CDropdownItemPlain>
   <CDropdownItem href="#">Action</CDropdownItem>
   <CDropdownItem href="#">Another action</CDropdownItem>
   <CDropdownItem href="#">Something else here</CDropdownItem>
-</div>
+</CDropdownMenu>
 ```
 
 ### Active
@@ -405,11 +405,11 @@ Set boolean property `active` to **style item as active**.
 In the following example we use `div` instead of `<CDropdownMenu>` to show `<CDropdownMenu>` content.
 
 ```jsx preview
-<div className="border rounded py-2">
+<CDropdownMenu>
   <CDropdownItem href="#">Regular link</CDropdownItem>
   <CDropdownItem href="#" active>Active link</CDropdownItem>
   <CDropdownItem href="#">Another link</CDropdownItem>
-</div>
+</CDropdownMenu>
 ```
 
 ### Disabled
@@ -419,11 +419,11 @@ Add `disabled` boolean property to items in the dropdown to **style them as disa
 In the following example we use `div` instead of `<CDropdownMenu>` to show `<CDropdownMenu>` content.
 
 ```jsx preview
-<div className="border rounded py-2">
+<CDropdownMenu>
   <CDropdownItem href="#">Regular link</CDropdownItem>
   <CDropdownItem href="#" disabled>Disabled link</CDropdownItem>
   <CDropdownItem href="#">Another link</CDropdownItem>
-</div>
+</CDropdownMenu>
 ```
 
 ## Menu alignment

packages/docs/content/components/list-group.mdx

@@ -300,16 +300,15 @@ And if you want `<label>`s as the `.list-group-item` for large hit areas, you ca
 
 ```jsx preview
 <CListGroup>
-  <CFormCheck className="list-group-item" hitArea="full" label="Cras justo odio" />
-  <CFormCheck
-    className="list-group-item"
-    hitArea="full"
-    label="Dapibus ac facilisis in"
-    defaultChecked
-  />
-  <CFormCheck className="list-group-item" hitArea="full" label="Morbi leo risus" defaultChecked />
-  <CFormCheck className="list-group-item" hitArea="full" label="orta ac consectetur ac" />
-  <CFormCheck className="list-group-item" hitArea="full" label="Vestibulum at eros" />
+  <CListGroupItem>
+    <CFormCheck hitArea="full" label="First checkbox" value="" id="firstCheckboxStretched" />
+  </CListGroupItem>
+  <CListGroupItem>
+    <CFormCheck hitArea="full" label="Second checkbox" value="" id="secondCheckboxStretched" defaultChecked/>
+  </CListGroupItem>
+  <CListGroupItem>
+    <CFormCheck hitArea="full" label="Third checkbox" value="" id="thirdCheckboxStretched"/>
+  </CListGroupItem>
 </CListGroup>
 ```
 

packages/docs/src/templates/DefaultLayout.tsx

@@ -5,7 +5,6 @@ import DocsLayout from './DocsLayout'
 
 import { AppContext } from '../AppContext'
 import { Script } from 'gatsby'
-import { Helmet } from 'react-helmet'
 
 interface DefaultLayoutProps {
   children: any