[refactor] upgrade NavBar, Progress & Form validation

Author: TechQuery

document/source/components/BreadCrumb.mdx

@@ -1,6 +1,6 @@
 ---
 layout: docs
-title: BreadCrumb
+title: Bread crumb
 description: Indicate the current page's location within a navigational hierarchy that automatically adds separators via CSS.
 group: Components
 ---

document/source/components/Card.mdx

@@ -7,7 +7,7 @@ group: Components
 
 import { Card } from 'boot-cell/source/Content/Card';
 import { Button } from 'boot-cell/source/Form/Button';
-import { Nav } from 'boot-cell/source/Navigator/Nav';
+import { Nav, NavLink } from 'boot-cell/source/Navigator/Nav';
 
 import { Example } from '../../../source/component/Example';
 
@@ -245,19 +245,11 @@ Add some navigation to a card’s header (or block) with BootCell’s [`<Nav />`
     <Card
         className="text-center"
         header={
-            <Nav
-                className="card-header-tabs"
-                itemMode="tabs"
-                list={[
-                    { title: 'Active', href: 'javascript: void;' },
-                    { title: 'Link', href: 'javascript: void;' },
-                    {
-                        title: 'Disabled',
-                        href: 'javascript: void;',
-                        disabled: true
-                    }
-                ]}
-            />
+            <Nav className="card-header-tabs" itemMode="tabs">
+                <NavLink active>Active</NavLink>
+                <NavLink>Link</NavLink>
+                <NavLink disabled>Disabled</NavLink>
+            </Nav>
         }
         title="Special title treatment"
         text="With supporting text below as a natural lead-in to additional content."
@@ -269,26 +261,18 @@ Add some navigation to a card’s header (or block) with BootCell’s [`<Nav />`
 ```TSX
 import { render, createCell } from 'web-cell';
 import { Card } from 'boot-cell/source/Content/Card';
-import { Nav } from 'boot-cell/source/Navigator/Nav';
+import { Nav, NavLink } from 'boot-cell/source/Navigator/Nav';
 import { Button } from 'boot-cell/source/Form/Button';
 
 render(
     <Card
         className="text-center"
         header={
-            <Nav
-                className="card-header-tabs"
-                itemMode="tabs"
-                list={[
-                    { title: 'Active', href: 'javascript: void;' },
-                    { title: 'Link', href: 'javascript: void;' },
-                    {
-                        title: 'Disabled',
-                        href: 'javascript: void;',
-                        disabled: true
-                    }
-                ]}
-            />
+            <Nav className="card-header-tabs" itemMode="tabs">
+                <NavLink active>Active</NavLink>
+                <NavLink>Link</NavLink>
+                <NavLink disabled>Disabled</NavLink>
+            </Nav>
         }
         title="Special title treatment"
         text="With supporting text below as a natural lead-in to additional content."
@@ -302,19 +286,11 @@ render(
     <Card
         className="text-center"
         header={
-            <Nav
-                className="card-header-pills"
-                itemMode="pills"
-                list={[
-                    { title: 'Active', href: 'javascript: void;' },
-                    { title: 'Link', href: 'javascript: void;' },
-                    {
-                        title: 'Disabled',
-                        href: 'javascript: void;',
-                        disabled: true
-                    }
-                ]}
-            />
+            <Nav className="card-header-pills" itemMode="pills">
+                <NavLink active>Active</NavLink>
+                <NavLink>Link</NavLink>
+                <NavLink disabled>Disabled</NavLink>
+            </Nav>
         }
         title="Special title treatment"
         text="With supporting text below as a natural lead-in to additional content."
@@ -326,26 +302,18 @@ render(
 ```TSX
 import { render, createCell } from 'web-cell';
 import { Card } from 'boot-cell/source/Content/Card';
-import { Nav } from 'boot-cell/source/Navigator/Nav';
+import { Nav, NavLink } from 'boot-cell/source/Navigator/Nav';
 import { Button } from 'boot-cell/source/Form/Button';
 
 render(
     <Card
         className="text-center"
         header={
-            <Nav
-                className="card-header-pills"
-                itemMode="pills"
-                list={[
-                    { title: 'Active', href: 'javascript: void;' },
-                    { title: 'Link', href: 'javascript: void;' },
-                    {
-                        title: 'Disabled',
-                        href: 'javascript: void;',
-                        disabled: true
-                    }
-                ]}
-            />
+            <Nav className="card-header-pills" itemMode="pills">
+                <NavLink active>Active</NavLink>
+                <NavLink>Link</NavLink>
+                <NavLink disabled>Disabled</NavLink>
+            </Nav>
         }
         title="Special title treatment"
         text="With supporting text below as a natural lead-in to additional content."

document/source/components/CountDown.mdx

@@ -1,6 +1,6 @@
 ---
 layout: docs
-title: CountDown
+title: Count down
 description:
 group: Components
 ---