@progress/kendo-themes-html 6.3.1-dev.0 → 6.4.0-dev.0

package/src/bottom-nav/bottom-nav.spec.tsx

@@ -0,0 +1,76 @@
+import { classNames, optionClassNames, FillMode, ThemeColor } from '../utils';
+
+export const BOTTOM_NAV_CLASSNAME = 'k-bottom-nav';
+
+const states = [];
+
+const options = {
+    fillMode: [ FillMode.solid, FillMode.flat ],
+    themeColor: [
+        ThemeColor.primary,
+        ThemeColor.secondary,
+        ThemeColor.tertiary,
+        ThemeColor.info,
+        ThemeColor.success,
+        ThemeColor.warning,
+        ThemeColor.error,
+        ThemeColor.dark,
+        ThemeColor.light,
+        ThemeColor.inverse
+    ]
+};
+
+export type KendoBottomNavOptions = {
+    fillMode?: (typeof options.fillMode)[number] | null;
+    themeColor?: (typeof options.themeColor)[number] | null;
+};
+
+export type KendoBottomNavProps = KendoBottomNavOptions & {
+    flow?: string;
+    border?: boolean;
+    dir?: 'ltr' | 'rtl';
+};
+
+const defaultProps = {
+    fillMode: FillMode.solid,
+    themeColor: ThemeColor.primary,
+    flow: 'horizontal',
+    border: false,
+};
+
+export const BottomNav = (
+    props: KendoBottomNavProps &
+        React.HTMLAttributes<HTMLElement>
+) => {
+    const {
+        fillMode = defaultProps.fillMode,
+        themeColor = defaultProps.themeColor,
+        flow = defaultProps.flow,
+        border = defaultProps.border,
+        dir
+    } = props;
+
+    return (
+        <nav className={classNames(
+            props.className,
+            BOTTOM_NAV_CLASSNAME,
+            optionClassNames(BOTTOM_NAV_CLASSNAME, {
+                fillMode,
+                themeColor
+            }),
+            {
+                [`k-bottom-nav-item-flow-${flow}`]: flow,
+                'k-bottom-nav-border': border,
+            }
+        )} dir={dir}>
+            {props.children}
+        </nav>
+    );
+};
+
+BottomNav.states = states;
+BottomNav.options = options;
+BottomNav.className = BOTTOM_NAV_CLASSNAME;
+BottomNav.defaultProps = defaultProps;
+
+export default BottomNav;

package/src/bottom-nav/index.ts

@@ -0,0 +1,2 @@
+export * from './bottom-nav.spec';
+export * from './bottom-nav-item';

package/src/bottom-nav/tests/bottom-nav-colors.tsx

@@ -1,5 +1,5 @@
 import ReactDOM from 'react-dom/client';
-import { Icon } from '../../icon';
+import { BottomNav, BottomNavItem } from '../../bottom-nav';
 
 const root = ReactDOM.createRoot(
     document.getElementById('app') as HTMLElement
@@ -23,200 +23,92 @@ root.render(
             <div className="colors k-d-grid k-grid-cols-2">
                 <section>
                     <span className="k-col-start-1">Primary ThemeColor</span>
-                    <nav className="k-bottom-nav k-bottom-nav-primary k-bottom-nav-solid k-bottom-nav-item-flow-vertical">
-                        <span className="k-bottom-nav-item">
-                            <Icon className="k-bottom-nav-item-icon" name="email" />
-                            <span className="k-bottom-nav-item-text">Normal</span>
-                        </span>
-                        <span className="k-bottom-nav-item k-focus">
-                            <Icon className="k-bottom-nav-item-icon" name="email" />
-                            <span className="k-bottom-nav-item-text">Focused</span>
-                        </span>
-                        <span className="k-bottom-nav-item k-selected">
-                            <Icon className="k-bottom-nav-item-icon" name="email" />
-                            <span className="k-bottom-nav-item-text">Selected</span>
-                        </span>
-                        <span className="k-bottom-nav-item k-disabled">
-                            <Icon className="k-bottom-nav-item-icon" name="email" />
-                            <span className="k-bottom-nav-item-text">Disabled</span>
-                        </span>
-                    </nav>
+                    <BottomNav themeColor="primary" flow="vertical">
+                        <BottomNavItem icon="email" text="Normal" />
+                        <BottomNavItem icon="email" text="Focused" focus />
+                        <BottomNavItem icon="email" text="Selected" selected />
+                        <BottomNavItem icon="email" text="Disabled" disabled />
+                    </BottomNav>
                 </section>
 
                 <section>
                     <span>Secondary ThemeColor</span>
-                    <nav className="k-bottom-nav k-bottom-nav-secondary k-bottom-nav-solid k-bottom-nav-item-flow-vertical">
-                        <span className="k-bottom-nav-item">
-                            <Icon className="k-bottom-nav-item-icon" name="email" />
-                            <span className="k-bottom-nav-item-text">Normal</span>
-                        </span>
-                        <span className="k-bottom-nav-item k-focus">
-                            <Icon className="k-bottom-nav-item-icon" name="email" />
-                            <span className="k-bottom-nav-item-text">Focused</span>
-                        </span>
-                        <span className="k-bottom-nav-item k-selected">
-                            <Icon className="k-bottom-nav-item-icon" name="email" />
-                            <span className="k-bottom-nav-item-text">Selected</span>
-                        </span>
-                        <span className="k-bottom-nav-item k-disabled">
-                            <Icon className="k-bottom-nav-item-icon" name="email" />
-                            <span className="k-bottom-nav-item-text">Disabled</span>
-                        </span>
-                    </nav>
+                    <BottomNav themeColor="secondary" flow="vertical">
+                        <BottomNavItem icon="email" text="Normal" />
+                        <BottomNavItem icon="email" text="Focused" focus />
+                        <BottomNavItem icon="email" text="Selected" selected />
+                        <BottomNavItem icon="email" text="Disabled" disabled />
+                    </BottomNav>
                 </section>
 
                 <section>
                     <span>Tertiary ThemeColor</span>
-                    <nav className="k-bottom-nav k-bottom-nav-tertiary k-bottom-nav-solid k-bottom-nav-item-flow-vertical">
-                        <span className="k-bottom-nav-item">
-                            <Icon className="k-bottom-nav-item-icon" name="email" />
-                            <span className="k-bottom-nav-item-text">Normal</span>
-                        </span>
-                        <span className="k-bottom-nav-item k-focus">
-                            <Icon className="k-bottom-nav-item-icon" name="email" />
-                            <span className="k-bottom-nav-item-text">Focused</span>
-                        </span>
-                        <span className="k-bottom-nav-item k-selected">
-                            <Icon className="k-bottom-nav-item-icon" name="email" />
-                            <span className="k-bottom-nav-item-text">Selected</span>
-                        </span>
-                        <span className="k-bottom-nav-item k-disabled">
-                            <Icon className="k-bottom-nav-item-icon" name="email" />
-                            <span className="k-bottom-nav-item-text">Disabled</span>
-                        </span>
-                    </nav>
+                    <BottomNav themeColor="tertiary" flow="vertical">
+                        <BottomNavItem icon="email" text="Normal" />
+                        <BottomNavItem icon="email" text="Focused" focus />
+                        <BottomNavItem icon="email" text="Selected" selected />
+                        <BottomNavItem icon="email" text="Disabled" disabled />
+                    </BottomNav>
                 </section>
 
                 <section>
                     <span>Info ThemeColor</span>
-                    <nav className="k-bottom-nav k-bottom-nav-info k-bottom-nav-solid k-bottom-nav-item-flow-vertical">
-                        <span className="k-bottom-nav-item">
-                            <Icon className="k-bottom-nav-item-icon" name="email" />
-                            <span className="k-bottom-nav-item-text">Normal</span>
-                        </span>
-                        <span className="k-bottom-nav-item k-focus">
-                            <Icon className="k-bottom-nav-item-icon" name="email" />
-                            <span className="k-bottom-nav-item-text">Focused</span>
-                        </span>
-                        <span className="k-bottom-nav-item k-selected">
-                            <Icon className="k-bottom-nav-item-icon" name="email" />
-                            <span className="k-bottom-nav-item-text">Selected</span>
-                        </span>
-                        <span className="k-bottom-nav-item k-disabled">
-                            <Icon className="k-bottom-nav-item-icon" name="email" />
-                            <span className="k-bottom-nav-item-text">Disabled</span>
-                        </span>
-                    </nav>
+                    <BottomNav themeColor="info" flow="vertical">
+                        <BottomNavItem icon="email" text="Normal" />
+                        <BottomNavItem icon="email" text="Focused" focus />
+                        <BottomNavItem icon="email" text="Selected" selected />
+                        <BottomNavItem icon="email" text="Disabled" disabled />
+                    </BottomNav>
                 </section>
 
                 <section>
                     <span>Success ThemeColor</span>
-                    <nav className="k-bottom-nav k-bottom-nav-success k-bottom-nav-solid k-bottom-nav-item-flow-vertical">
-                        <span className="k-bottom-nav-item">
-                            <Icon className="k-bottom-nav-item-icon" name="email" />
-                            <span className="k-bottom-nav-item-text">Normal</span>
-                        </span>
-                        <span className="k-bottom-nav-item k-focus">
-                            <Icon className="k-bottom-nav-item-icon" name="email" />
-                            <span className="k-bottom-nav-item-text">Focused</span>
-                        </span>
-                        <span className="k-bottom-nav-item k-selected">
-                            <Icon className="k-bottom-nav-item-icon" name="email" />
-                            <span className="k-bottom-nav-item-text">Selected</span>
-                        </span>
-                        <span className="k-bottom-nav-item k-disabled">
-                            <Icon className="k-bottom-nav-item-icon" name="email" />
-                            <span className="k-bottom-nav-item-text">Disabled</span>
-                        </span>
-                    </nav>
+                    <BottomNav themeColor="success" flow="vertical">
+                        <BottomNavItem icon="email" text="Normal" />
+                        <BottomNavItem icon="email" text="Focused" focus />
+                        <BottomNavItem icon="email" text="Selected" selected />
+                        <BottomNavItem icon="email" text="Disabled" disabled />
+                    </BottomNav>
                 </section>
 
                 <section>
                     <span>Warning ThemeColor</span>
-                    <nav className="k-bottom-nav k-bottom-nav-warning k-bottom-nav-solid k-bottom-nav-item-flow-vertical">
-                        <span className="k-bottom-nav-item">
-                            <Icon className="k-bottom-nav-item-icon" name="email" />
-                            <span className="k-bottom-nav-item-text">Normal</span>
-                        </span>
-                        <span className="k-bottom-nav-item k-focus">
-                            <Icon className="k-bottom-nav-item-icon" name="email" />
-                            <span className="k-bottom-nav-item-text">Focused</span>
-                        </span>
-                        <span className="k-bottom-nav-item k-selected">
-                            <Icon className="k-bottom-nav-item-icon" name="email" />
-                            <span className="k-bottom-nav-item-text">Selected</span>
-                        </span>
-                        <span className="k-bottom-nav-item k-disabled">
-                            <Icon className="k-bottom-nav-item-icon" name="email" />
-                            <span className="k-bottom-nav-item-text">Disabled</span>
-                        </span>
-                    </nav>
+                    <BottomNav themeColor="warning" flow="vertical">
+                        <BottomNavItem icon="email" text="Normal" />
+                        <BottomNavItem icon="email" text="Focused" focus />
+                        <BottomNavItem icon="email" text="Selected" selected />
+                        <BottomNavItem icon="email" text="Disabled" disabled />
+                    </BottomNav>
                 </section>
 
                 <section>
                     <span>Error ThemeColor</span>
-                    <nav className="k-bottom-nav k-bottom-nav-error k-bottom-nav-solid k-bottom-nav-item-flow-vertical">
-                        <span className="k-bottom-nav-item">
-                            <Icon className="k-bottom-nav-item-icon" name="email" />
-                            <span className="k-bottom-nav-item-text">Normal</span>
-                        </span>
-                        <span className="k-bottom-nav-item k-focus">
-                            <Icon className="k-bottom-nav-item-icon" name="email" />
-                            <span className="k-bottom-nav-item-text">Focused</span>
-                        </span>
-                        <span className="k-bottom-nav-item k-selected">
-                            <Icon className="k-bottom-nav-item-icon" name="email" />
-                            <span className="k-bottom-nav-item-text">Selected</span>
-                        </span>
-                        <span className="k-bottom-nav-item k-disabled">
-                            <Icon className="k-bottom-nav-item-icon" name="email" />
-                            <span className="k-bottom-nav-item-text">Disabled</span>
-                        </span>
-                    </nav>
+                    <BottomNav themeColor="error" flow="vertical">
+                        <BottomNavItem icon="email" text="Normal" />
+                        <BottomNavItem icon="email" text="Focused" focus />
+                        <BottomNavItem icon="email" text="Selected" selected />
+                        <BottomNavItem icon="email" text="Disabled" disabled />
+                    </BottomNav>
                 </section>
 
                 <section>
                     <span>Dark ThemeColor</span>
-                    <nav className="k-bottom-nav k-bottom-nav-dark k-bottom-nav-solid k-bottom-nav-item-flow-vertical">
-                        <span className="k-bottom-nav-item">
-                            <Icon className="k-bottom-nav-item-icon" name="email" />
-                            <span className="k-bottom-nav-item-text">Normal</span>
-                        </span>
-                        <span className="k-bottom-nav-item k-focus">
-                            <Icon className="k-bottom-nav-item-icon" name="email" />
-                            <span className="k-bottom-nav-item-text">Focused</span>
-                        </span>
-                        <span className="k-bottom-nav-item k-selected">
-                            <Icon className="k-bottom-nav-item-icon" name="email" />
-                            <span className="k-bottom-nav-item-text">Selected</span>
-                        </span>
-                        <span className="k-bottom-nav-item k-disabled">
-                            <Icon className="k-bottom-nav-item-icon" name="email" />
-                            <span className="k-bottom-nav-item-text">Disabled</span>
-                        </span>
-                    </nav>
+                    <BottomNav themeColor="dark" flow="vertical">
+                        <BottomNavItem icon="email" text="Normal" />
+                        <BottomNavItem icon="email" text="Focused" focus />
+                        <BottomNavItem icon="email" text="Selected" selected />
+                        <BottomNavItem icon="email" text="Disabled" disabled />
+                    </BottomNav>
                 </section>
 
                 <section>
                     <span>Light ThemeColor</span>
-                    <nav className="k-bottom-nav k-bottom-nav-light k-bottom-nav-solid k-bottom-nav-item-flow-vertical">
-                        <span className="k-bottom-nav-item">
-                            <Icon className="k-bottom-nav-item-icon" name="email" />
-                            <span className="k-bottom-nav-item-text">Normal</span>
-                        </span>
-                        <span className="k-bottom-nav-item k-focus">
-                            <Icon className="k-bottom-nav-item-icon" name="email" />
-                            <span className="k-bottom-nav-item-text">Focused</span>
-                        </span>
-                        <span className="k-bottom-nav-item k-selected">
-                            <Icon className="k-bottom-nav-item-icon" name="email" />
-                            <span className="k-bottom-nav-item-text">Selected</span>
-                        </span>
-                        <span className="k-bottom-nav-item k-disabled">
-                            <Icon className="k-bottom-nav-item-icon" name="email" />
-                            <span className="k-bottom-nav-item-text">Disabled</span>
-                        </span>
-                    </nav>
+                    <BottomNav themeColor="light" flow="vertical">
+                        <BottomNavItem icon="email" text="Normal" />
+                        <BottomNavItem icon="email" text="Focused" focus />
+                        <BottomNavItem icon="email" text="Selected" selected />
+                        <BottomNavItem icon="email" text="Disabled" disabled />
+                    </BottomNav>
                 </section>
             </div>
 
@@ -224,200 +116,92 @@ root.render(
             <div className="colors colors-flat k-d-grid k-grid-cols-2">
                 <section>
                     <span>Primary ThemeColor</span>
-                    <nav className="k-bottom-nav k-bottom-nav-primary k-bottom-nav-flat k-bottom-nav-border k-bottom-nav-item-flow-vertical">
-                        <span className="k-bottom-nav-item">
-                            <Icon className="k-bottom-nav-item-icon" name="email" />
-                            <span className="k-bottom-nav-item-text">Normal</span>
-                        </span>
-                        <span className="k-bottom-nav-item k-focus">
-                            <Icon className="k-bottom-nav-item-icon" name="email" />
-                            <span className="k-bottom-nav-item-text">Focused</span>
-                        </span>
-                        <span className="k-bottom-nav-item k-selected">
-                            <Icon className="k-bottom-nav-item-icon" name="email" />
-                            <span className="k-bottom-nav-item-text">Selected</span>
-                        </span>
-                        <span className="k-bottom-nav-item k-disabled">
-                            <Icon className="k-bottom-nav-item-icon" name="email" />
-                            <span className="k-bottom-nav-item-text">Disabled</span>
-                        </span>
-                    </nav>
+                    <BottomNav fillMode="flat" themeColor="primary" border flow="vertical">
+                        <BottomNavItem icon="email" text="Normal" />
+                        <BottomNavItem icon="email" text="Focused" focus />
+                        <BottomNavItem icon="email" text="Selected" selected />
+                        <BottomNavItem icon="email" text="Disabled" disabled />
+                    </BottomNav>
                 </section>
 
                 <section>
                     <span>Secondary ThemeColor</span>
-                    <nav className="k-bottom-nav k-bottom-nav-secondary k-bottom-nav-flat k-bottom-nav-border k-bottom-nav-item-flow-vertical">
-                        <span className="k-bottom-nav-item">
-                            <Icon className="k-bottom-nav-item-icon" name="email" />
-                            <span className="k-bottom-nav-item-text">Normal</span>
-                        </span>
-                        <span className="k-bottom-nav-item k-focus">
-                            <Icon className="k-bottom-nav-item-icon" name="email" />
-                            <span className="k-bottom-nav-item-text">Focused</span>
-                        </span>
-                        <span className="k-bottom-nav-item k-selected">
-                            <Icon className="k-bottom-nav-item-icon" name="email" />
-                            <span className="k-bottom-nav-item-text">Selected</span>
-                        </span>
-                        <span className="k-bottom-nav-item k-disabled">
-                            <Icon className="k-bottom-nav-item-icon" name="email" />
-                            <span className="k-bottom-nav-item-text">Disabled</span>
-                        </span>
-                    </nav>
+                    <BottomNav fillMode="flat" themeColor="secondary" border flow="vertical">
+                        <BottomNavItem icon="email" text="Normal" />
+                        <BottomNavItem icon="email" text="Focused" focus />
+                        <BottomNavItem icon="email" text="Selected" selected />
+                        <BottomNavItem icon="email" text="Disabled" disabled />
+                    </BottomNav>
                 </section>
 
                 <section>
                     <span>Tertiary ThemeColor</span>
-                    <nav className="k-bottom-nav k-bottom-nav-tertiary k-bottom-nav-flat k-bottom-nav-border k-bottom-nav-item-flow-vertical">
-                        <span className="k-bottom-nav-item">
-                            <Icon className="k-bottom-nav-item-icon" name="email" />
-                            <span className="k-bottom-nav-item-text">Normal</span>
-                        </span>
-                        <span className="k-bottom-nav-item k-focus">
-                            <Icon className="k-bottom-nav-item-icon" name="email" />
-                            <span className="k-bottom-nav-item-text">Focused</span>
-                        </span>
-                        <span className="k-bottom-nav-item k-selected">
-                            <Icon className="k-bottom-nav-item-icon" name="email" />
-                            <span className="k-bottom-nav-item-text">Selected</span>
-                        </span>
-                        <span className="k-bottom-nav-item k-disabled">
-                            <Icon className="k-bottom-nav-item-icon" name="email" />
-                            <span className="k-bottom-nav-item-text">Disabled</span>
-                        </span>
-                    </nav>
+                    <BottomNav fillMode="flat" themeColor="tertiary" border flow="vertical">
+                        <BottomNavItem icon="email" text="Normal" />
+                        <BottomNavItem icon="email" text="Focused" focus />
+                        <BottomNavItem icon="email" text="Selected" selected />
+                        <BottomNavItem icon="email" text="Disabled" disabled />
+                    </BottomNav>
                 </section>
 
                 <section>
                     <span>Info ThemeColor</span>
-                    <nav className="k-bottom-nav k-bottom-nav-info k-bottom-nav-flat k-bottom-nav-border k-bottom-nav-item-flow-vertical">
-                        <span className="k-bottom-nav-item">
-                            <Icon className="k-bottom-nav-item-icon" name="email" />
-                            <span className="k-bottom-nav-item-text">Normal</span>
-                        </span>
-                        <span className="k-bottom-nav-item k-focus">
-                            <Icon className="k-bottom-nav-item-icon" name="email" />
-                            <span className="k-bottom-nav-item-text">Focused</span>
-                        </span>
-                        <span className="k-bottom-nav-item k-selected">
-                            <Icon className="k-bottom-nav-item-icon" name="email" />
-                            <span className="k-bottom-nav-item-text">Selected</span>
-                        </span>
-                        <span className="k-bottom-nav-item k-disabled">
-                            <Icon className="k-bottom-nav-item-icon" name="email" />
-                            <span className="k-bottom-nav-item-text">Disabled</span>
-                        </span>
-                    </nav>
+                    <BottomNav fillMode="flat" themeColor="info" border flow="vertical">
+                        <BottomNavItem icon="email" text="Normal" />
+                        <BottomNavItem icon="email" text="Focused" focus />
+                        <BottomNavItem icon="email" text="Selected" selected />
+                        <BottomNavItem icon="email" text="Disabled" disabled />
+                    </BottomNav>
                 </section>
 
                 <section>
                     <span>Success ThemeColor</span>
-                    <nav className="k-bottom-nav k-bottom-nav-success k-bottom-nav-flat k-bottom-nav-border k-bottom-nav-item-flow-vertical">
-                        <span className="k-bottom-nav-item">
-                            <Icon className="k-bottom-nav-item-icon" name="email" />
-                            <span className="k-bottom-nav-item-text">Normal</span>
-                        </span>
-                        <span className="k-bottom-nav-item k-focus">
-                            <Icon className="k-bottom-nav-item-icon" name="email" />
-                            <span className="k-bottom-nav-item-text">Focused</span>
-                        </span>
-                        <span className="k-bottom-nav-item k-selected">
-                            <Icon className="k-bottom-nav-item-icon" name="email" />
-                            <span className="k-bottom-nav-item-text">Selected</span>
-                        </span>
-                        <span className="k-bottom-nav-item k-disabled">
-                            <Icon className="k-bottom-nav-item-icon" name="email" />
-                            <span className="k-bottom-nav-item-text">Disabled</span>
-                        </span>
-                    </nav>
+                    <BottomNav fillMode="flat" themeColor="success" border flow="vertical">
+                        <BottomNavItem icon="email" text="Normal" />
+                        <BottomNavItem icon="email" text="Focused" focus />
+                        <BottomNavItem icon="email" text="Selected" selected />
+                        <BottomNavItem icon="email" text="Disabled" disabled />
+                    </BottomNav>
                 </section>
 
                 <section>
                     <span>Warning ThemeColor</span>
-                    <nav className="k-bottom-nav k-bottom-nav-warning k-bottom-nav-flat k-bottom-nav-border k-bottom-nav-item-flow-vertical">
-                        <span className="k-bottom-nav-item">
-                            <Icon className="k-bottom-nav-item-icon" name="email" />
-                            <span className="k-bottom-nav-item-text">Normal</span>
-                        </span>
-                        <span className="k-bottom-nav-item k-focus">
-                            <Icon className="k-bottom-nav-item-icon" name="email" />
-                            <span className="k-bottom-nav-item-text">Focused</span>
-                        </span>
-                        <span className="k-bottom-nav-item k-selected">
-                            <Icon className="k-bottom-nav-item-icon" name="email" />
-                            <span className="k-bottom-nav-item-text">Selected</span>
-                        </span>
-                        <span className="k-bottom-nav-item k-disabled">
-                            <Icon className="k-bottom-nav-item-icon" name="email" />
-                            <span className="k-bottom-nav-item-text">Disabled</span>
-                        </span>
-                    </nav>
+                    <BottomNav fillMode="flat" themeColor="warning" border flow="vertical">
+                        <BottomNavItem icon="email" text="Normal" />
+                        <BottomNavItem icon="email" text="Focused" focus />
+                        <BottomNavItem icon="email" text="Selected" selected />
+                        <BottomNavItem icon="email" text="Disabled" disabled />
+                    </BottomNav>
                 </section>
 
                 <section>
                     <span>Error ThemeColor</span>
-                    <nav className="k-bottom-nav k-bottom-nav-error k-bottom-nav-flat k-bottom-nav-border k-bottom-nav-item-flow-vertical">
-                        <span className="k-bottom-nav-item">
-                            <Icon className="k-bottom-nav-item-icon" name="email" />
-                            <span className="k-bottom-nav-item-text">Normal</span>
-                        </span>
-                        <span className="k-bottom-nav-item k-focus">
-                            <Icon className="k-bottom-nav-item-icon" name="email" />
-                            <span className="k-bottom-nav-item-text">Focused</span>
-                        </span>
-                        <span className="k-bottom-nav-item k-selected">
-                            <Icon className="k-bottom-nav-item-icon" name="email" />
-                            <span className="k-bottom-nav-item-text">Selected</span>
-                        </span>
-                        <span className="k-bottom-nav-item k-disabled">
-                            <Icon className="k-bottom-nav-item-icon" name="email" />
-                            <span className="k-bottom-nav-item-text">Disabled</span>
-                        </span>
-                    </nav>
+                    <BottomNav fillMode="flat" themeColor="error" border flow="vertical">
+                        <BottomNavItem icon="email" text="Normal" />
+                        <BottomNavItem icon="email" text="Focused" focus />
+                        <BottomNavItem icon="email" text="Selected" selected />
+                        <BottomNavItem icon="email" text="Disabled" disabled />
+                    </BottomNav>
                 </section>
 
                 <section>
                     <span>Dark ThemeColor</span>
-                    <nav className="k-bottom-nav k-bottom-nav-dark k-bottom-nav-flat k-bottom-nav-border k-bottom-nav-item-flow-vertical">
-                        <span className="k-bottom-nav-item">
-                            <Icon className="k-bottom-nav-item-icon" name="email" />
-                            <span className="k-bottom-nav-item-text">Normal</span>
-                        </span>
-                        <span className="k-bottom-nav-item k-focus">
-                            <Icon className="k-bottom-nav-item-icon" name="email" />
-                            <span className="k-bottom-nav-item-text">Focused</span>
-                        </span>
-                        <span className="k-bottom-nav-item k-selected">
-                            <Icon className="k-bottom-nav-item-icon" name="email" />
-                            <span className="k-bottom-nav-item-text">Selected</span>
-                        </span>
-                        <span className="k-bottom-nav-item k-disabled">
-                            <Icon className="k-bottom-nav-item-icon" name="email" />
-                            <span className="k-bottom-nav-item-text">Disabled</span>
-                        </span>
-                    </nav>
+                    <BottomNav fillMode="flat" themeColor="dark" border flow="vertical">
+                        <BottomNavItem icon="email" text="Normal" />
+                        <BottomNavItem icon="email" text="Focused" focus />
+                        <BottomNavItem icon="email" text="Selected" selected />
+                        <BottomNavItem icon="email" text="Disabled" disabled />
+                    </BottomNav>
                 </section>
 
                 <section>
                     <span>Light ThemeColor</span>
-                    <nav className="k-bottom-nav k-bottom-nav-light k-bottom-nav-flat k-bottom-nav-border k-bottom-nav-item-flow-vertical">
-                        <span className="k-bottom-nav-item">
-                            <Icon className="k-bottom-nav-item-icon" name="email" />
-                            <span className="k-bottom-nav-item-text">Normal</span>
-                        </span>
-                        <span className="k-bottom-nav-item k-focus">
-                            <Icon className="k-bottom-nav-item-icon" name="email" />
-                            <span className="k-bottom-nav-item-text">Focused</span>
-                        </span>
-                        <span className="k-bottom-nav-item k-selected">
-                            <Icon className="k-bottom-nav-item-icon" name="email" />
-                            <span className="k-bottom-nav-item-text">Selected</span>
-                        </span>
-                        <span className="k-bottom-nav-item k-disabled">
-                            <Icon className="k-bottom-nav-item-icon" name="email" />
-                            <span className="k-bottom-nav-item-text">Disabled</span>
-                        </span>
-                    </nav>
+                    <BottomNav fillMode="flat" themeColor="light" border flow="vertical">
+                        <BottomNavItem icon="email" text="Normal" />
+                        <BottomNavItem icon="email" text="Focused" focus />
+                        <BottomNavItem icon="email" text="Selected" selected />
+                        <BottomNavItem icon="email" text="Disabled" disabled />
+                    </BottomNav>
                 </section>
             </div>
         </div>