[add] Checkout example

Author: TechQuery

document/source/components/InputGroup.mdx

@@ -55,6 +55,7 @@ render(
             aria-label="Recipient's username"
             append="@example.com"
         />
+        <label for="basic-url">Your vanity URL</label>
         <InputGroup
             id="basic-url"
             placeholder="Username"

source/page/Example/Carousel/index.tsx

@@ -6,7 +6,7 @@ import { NavBar } from 'boot-cell/source/Navigator/NavBar';
 import { Form } from 'boot-cell/source/Form/Form';
 import { Field } from 'boot-cell/source/Form/Field';
 import { Button } from 'boot-cell/source/Form/Button';
-import { CarouselView } from 'boot-cell/source/Media/Carousel';
+import { CarouselView, CarouselItem } from 'boot-cell/source/Media/Carousel';
 
 import { Feature } from './Feature';
 import style from './index.less';
@@ -65,7 +65,11 @@ export class CarouselPage extends mixin<{}, CarouselPageState>() {
                     </Form>
                 </NavBar>
 
-                <CarouselView controls indicators interval={3} list={banners} />
+                <CarouselView controls indicators interval={3}>
+                    {banners.map(item => (
+                        <CarouselItem {...item} />
+                    ))}
+                </CarouselView>
 
                 <div className={classNames('container', style.marketing)}>
                     <div className="row text-center">

source/page/Example/Checkout/data.json

@@ -0,0 +1,29 @@
+{
+    "cart_list": [
+        {
+            "title": "Product name",
+            "description": "Brief description",
+            "price": 12
+        },
+        {
+            "title": "Second product",
+            "description": "Brief description",
+            "price": 8
+        },
+        {
+            "title": "Third item",
+            "description": "Brief description",
+            "price": 5
+        },
+        {
+            "title": "Promo code",
+            "code": "EXAMPLECODE",
+            "price": 5
+        }
+    ],
+    "foot_links": [
+        { "title": "Privacy" },
+        { "title": "Terms" },
+        { "title": "Support" }
+    ]
+}

source/page/Example/Checkout/index.less

@@ -0,0 +1,10 @@
+.box {
+    :global {
+        .container {
+            max-width: 960px;
+        }
+        .lh-condensed {
+            line-height: 1.25;
+        }
+    }
+}

source/page/Example/Checkout/index.tsx

@@ -1,6 +1,6 @@
 import { createCell } from 'web-cell';
 import classNames from 'classnames';
-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';
 
 import style from './Cover.less';
@@ -25,12 +25,11 @@ export function CoverPage() {
                     className="text-white-50 float-md-right"
                     itemMode="masthead"
                     align="center"
-                    list={[
-                        { title: 'Home' },
-                        { title: 'Features' },
-                        { title: 'Contact' }
-                    ]}
-                />
+                >
+                    <NavLink>Home</NavLink>
+                    <NavLink>Features</NavLink>
+                    <NavLink>Contact</NavLink>
+                </Nav>
             </header>
 
             <main className="mx-auto py-0 px-4">

source/page/Example/Cover.tsx

@@ -2,7 +2,7 @@ import { createCell, Fragment } from 'web-cell';
 import classNames from 'classnames';
 
 import { NavBar } from 'boot-cell/source/Navigator/NavBar';
-import { Nav } from 'boot-cell/source/Navigator/Nav';
+import { Nav, NavLink } from 'boot-cell/source/Navigator/Nav';
 import { Form } from 'boot-cell/source/Form/Form';
 import { Field } from 'boot-cell/source/Form/Field';
 import { Button } from 'boot-cell/source/Form/Button';
@@ -49,29 +49,20 @@ export function OffcanvasPage() {
                     </Button>
                 </Form>
             </NavBar>
-            <Nav
-                scrollable
-                list={[
-                    { title: 'Dashboard' },
-                    {
-                        title: (
-                            <Fragment>
-                                Friends{' '}
-                                <Badge
-                                    pill
-                                    kind="light"
-                                    className="align-text-bottom"
-                                >
-                                    27
-                                </Badge>
-                            </Fragment>
-                        )
-                    },
-                    { title: 'Explore' },
-                    { title: 'Suggestions' },
-                    ...Array.from(new Array(5), () => ({ title: 'Link' }))
-                ]}
-            />
+            <Nav scrollable>
+                <NavLink>Dashboard</NavLink>
+                <NavLink>
+                    Friends{' '}
+                    <Badge pill kind="light" className="align-text-bottom">
+                        27
+                    </Badge>
+                </NavLink>
+                <NavLink>Explore</NavLink>
+                <NavLink>Suggestions</NavLink>
+                {Array.from(new Array(5), () => (
+                    <NavLink>Link</NavLink>
+                ))}
+            </Nav>
             <main className="container">
                 <div
                     className={classNames(

source/page/Example/Offcanvas.tsx

@@ -1,15 +1,14 @@
-import { NavProps } from 'boot-cell/source/Navigator';
 import { FooterListProps } from '../../../component/FooterList';
 import { CaseProps } from './Case';
 
-export const headers: NavProps['list'] = [
-    { title: 'Tour' },
-    { title: 'Product' },
-    { title: 'Features' },
-    { title: 'Enterprise' },
-    { title: 'Support' },
-    { title: 'Pricing' },
-    { title: 'Cart' }
+export const headers = [
+    'Tour',
+    'Product',
+    'Features',
+    'Enterprise',
+    'Support',
+    'Pricing',
+    'Cart'
 ];
 
 export const products: Pick<CaseProps, 'background' | 'color'>[][] = [

source/page/Example/Product/data.ts

@@ -1,5 +1,5 @@
 import { createCell, Fragment } from 'web-cell';
-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';
 
 import { FooterList } from '../../../component/FooterList';
@@ -17,18 +17,14 @@ export function ProductPage() {
     );
     return (
         <Fragment>
-            <nav className="bg-dark sticky-top py-1">
-                <Nav
-                    className="container text-light"
-                    align="between"
-                    list={[
-                        {
-                            title: logo
-                        },
-                        ...headers
-                    ]}
-                />
-            </nav>
+            <div className="bg-dark sticky-top py-1">
+                <Nav className="container" align="between">
+                    <NavLink className="text-light">{logo}</NavLink>
+                    {headers.map(header => (
+                        <NavLink className="text-light">{header}</NavLink>
+                    ))}
+                </Nav>
+            </div>
             <header className="position-relative overflow-hidden p-3 p-md-5 m-md-3 text-center bg-light">
                 <div className="col-md-5 p-lg-5 mx-auto my-5">
                     <h1 className="display-4 font-weight-normal">

source/page/Example/Product/index.tsx

@@ -7,6 +7,10 @@ export default [
         paths: ['example/pricing'],
         component: async () => (await import('./Pricing')).PricingPage
     },
+    {
+        paths: ['example/checkout'],
+        component: async () => (await import('./Checkout')).CheckoutPage
+    },
     {
         paths: ['example/product'],
         component: async () => (await import('./Product')).ProductPage