docs: update content

Author: mrholek

docs/migration/v4.mdx

@@ -0,0 +1,64 @@
+---
+name: Migration to v4
+description: Track and review changes to the CoreUI for React.js components to help you migrate from v3 to v4.
+menu: "Migration"
+route: "/migration/v4"
+---
+
+CoreUI for React is the React.js version of CoreUI components library, so before read this migration guide, please check also [CoreUI 3 to 4 migration guide](https://coreui.io/docs/4.0/migration/).
+
+## v4.0.0-alpha.2
+
+### Components
+
+- Deprecated component `CEmbed`
+- Deprecated component `CJumbotron`
+
+#### Badges
+
+- variant="pill" => shape="rounded-pill"
+- variant="square" => shape="rounded-0"
+
+#### Forms
+
+- `CInput` => `CFormControl`
+- `CInputCheckbox` => `CFormCheck`
+- `CLabel` => `CFormLabel`
+- `CSelect` => `CFormSelect`
+- `CValidFeedback` => `CFormFeedback valid`
+- `CInvalidFeedback` => `CFormFeedback invalid`
+
+- Deprecated component `CFormGroup`
+- Deprecated component `CInputGroupAppend`
+- Deprecated component `CInputGroupPrepend`
+- Depreacted component `CSwitch`, use `CFormCheck switch` instead of.
+- Deprecated `.help-block`
+
+#### Header
+
+- Deprecated property `withSubheader`
+- Deprecated component `CHeaderNavItem`, use `CNavItem` instead of.
+- Deprecated component `CHeaderNavLink`, use `CNavLink` instead of.
+
+#### List Group
+
+- Depracated prop `action` Use property `component="a"` or `component="button"` instead of `action`.
+
+#### Modal
+
+- Depracated prop `show` Use `visible` instead of.
+
+#### Popover
+
+- Depracated prop `header` Use `title` instead of.
+
+#### Progress Bar
+
+- Depracated prop `precision`
+- Depracated prop `showLabel`
+- Depracated prop `showPercentage`
+- Depracated prop `showValue`
+
+#### Tabs
+
+- Deprecated component `<CTabs>` use `<CNav variant="tabs">` without wrapper component `<CTabs>`

doczrc.js

@@ -18,14 +18,8 @@ export default {
     {
       name: 'Components', // manually ordered menu "Components"
     },
-  ],
-  htmlContext: {
-    footer: {
-      scripts: [
-        {
-          src: 'https://media.ethicalads.io/media/client/ethicalads.min.js',
-        },
-      ],
+    {
+      name: 'Migration', // manually ordered menu "Migration"
     },
-  },
+  ],
 }

src/gatsby-theme-docz/components/NavGroup/index.js

@@ -21,16 +21,18 @@ const icons = {
   </svg>`,
   Forms: `<svg xmlns="http://www.w3.org/2000/svg" class="nav-icon text-primary" viewBox="0 0 512 512">
   <path fill="var(--ci-primary-color, currentColor)" d="M23.686,456.521a24.841,24.841,0,0,0,6,25.708l.087.087a24.841,24.841,0,0,0,17.612,7.342,25.179,25.179,0,0,0,8.1-1.344h0a646.28,646.28,0,0,0,248.04-154.207L469.981,167.646A88.832,88.832,0,1,0,344.354,42.019l-9.534,9.534L314.029,30.762a50.4,50.4,0,0,0-71.274,0L108.687,164.83l22.626,22.627L265.382,53.389a18.4,18.4,0,0,1,26.019,0L312.193,74.18l-134.3,134.3A646.28,646.28,0,0,0,23.686,456.521Zm343.3-391.875a56.832,56.832,0,1,1,80.373,80.373l-89.493,89.493-80.372-80.373ZM254.862,176.766l80.372,80.372L280.892,311.48A614.383,614.383,0,0,1,58.779,453.221,614.383,614.383,0,0,1,200.52,231.108Z" class="ci-primary"></path>
-  </svg>`
+  </svg>`,
+  Migration: `<svg xmlns="http://www.w3.org/2000/svg" class="nav-icon text-primary" viewBox="0 0 512 512">
+  <path fill="var(--ci-primary-color, currentColor)" d="M464,256.25C464,370.8,370.8,464,256.25,464S48.5,370.8,48.5,256.25,141.7,48.5,256.25,48.5a208,208,0,0,1,149.963,64H328.5v32h128V16.5h-32V85.478A239.717,239.717,0,1,0,496,256.25Z" class="ci-primary"></path>
+  <polygon fill="var(--ci-primary-color, currentColor)" points="272.5 112.451 240.5 112.549 241.017 282.756 353.301 334.53 366.699 305.47 272.954 262.244 272.5 112.451" class="ci-primary"></polygon>
+  </svg>`,
 }
 
 export const NavGroup = ({ item, sidebarRef }) => {
   const currentDoc = useCurrentDoc()
   const currentDocRef = useRef()
   const { name, menu } = item
-  const [subheadingsVisible, setShowsubheadings] = useState(
-    currentDoc.menu === name
-  )
+  const [subheadingsVisible, setShowsubheadings] = useState(currentDoc.menu === name)
   const toggleSubheadings = () => setShowsubheadings(!subheadingsVisible)
   useEffect(() => {
     if (sidebarRef.current && currentDocRef.current) {
@@ -39,15 +41,19 @@ export const NavGroup = ({ item, sidebarRef }) => {
   }, [])
   return (
     <div className="nav-item nav-group show" data-testid="nav-group">
-      <div className="nav-link nav-group-toggle" dangerouslySetInnerHTML={{__html: `${icons[item.name]} ${item.name}`}}onClick={toggleSubheadings}>
+      <div
+        className="nav-link nav-group-toggle"
+        dangerouslySetInnerHTML={{ __html: `${icons[item.name]} ${item.name}` }}
+        onClick={toggleSubheadings}
+      >
         {/* {dangerouslySetInnerHTML={{ __html: icons[item.name] }}}
         {item.name} */}
         {/* <ChevronDown sx={styles.chevron({ active: subheadingsVisible })} /> */}
       </div>
       <div className="nav-group-items compact" data-testid="nav-group-links">
         {menu &&
           subheadingsVisible &&
-          menu.map(menu => {
+          menu.map((menu) => {
             if (currentDoc.route === menu.route) {
               return (
                 <NavLink className="nav-link" key={menu.id} item={menu} ref={currentDocRef}>

src/gatsby-theme-docz/components/NavLink/index.js

@@ -8,9 +8,9 @@ import { get } from 'lodash/fp'
 // import * as styles from './styles'
 
 const getHeadings = (route, docs) => {
-  const doc = docs.find(doc => doc.route === route)
+  const doc = docs.find((doc) => doc.route === route)
   const headings = get('headings', doc)
-  return headings ? headings.filter(heading => heading.depth === 2) : []
+  return headings ? headings.filter((heading) => heading.depth === 2) : []
 }
 
 const getCurrentHash = () => {
@@ -35,12 +35,7 @@ export const NavLink = forwardRef(function NavLink({ item, ...props }, ref) {
   const currentHash = getCurrentHash()
   return (
     <Fragment>
-      <Link
-        {...props}
-        to={to}
-        activeClassName="active"
-        ref={ref}
-      />
+      <Link {...props} to={to} activeClassName="active" ref={ref} />
       {/* {showHeadings &&
         headings.map(heading => (
           <Link

src/gatsby-theme-docz/components/Sidebar/index.js

@@ -10,7 +10,6 @@ import { NavSearch } from '../NavSearch'
 import { NavLink } from '../NavLink'
 import { NavGroup } from '../NavGroup'
 
-
 export const Sidebar = forwardRef(function Sidebar(props, ref) {
   const { show } = props
   const [query, setQuery] = useState('')
@@ -38,15 +37,19 @@ export const Sidebar = forwardRef(function Sidebar(props, ref) {
   }
 
   return (
-    <div className={`sidebar sidebar-lg sidebar-fixed sidebar-self-hiding-md border-end ps-xl-4", ${show && 'show'}`} style={{...cssVars}}>
+    <div
+      className={`sidebar sidebar-lg sidebar-fixed sidebar-self-hiding-md border-end ps-xl-4", ${
+        show && 'show'
+      }`}
+      style={{ ...cssVars }}
+    >
       <div className="sidebar-brand justify-content-start ps-3">
-        <Logo/>
+        <Logo />
       </div>
       <div className="sidebar-nav">
-      {menus &&
-          menus.map(menu => {
-            if (!menu.route)
-              return <NavGroup key={menu.id} item={menu} sidebarRef={ref} />
+        {menus &&
+          menus.map((menu) => {
+            if (!menu.route) return <NavGroup key={menu.id} item={menu} sidebarRef={ref} />
             if (menu.route === currentDoc.route) {
               return (
                 <NavLink key={menu.id} item={menu} ref={currentDocRef}>