@progress/kendo-themes-html 7.0.1-dev.1 → 7.0.2-dev.0

package/src/appbar/tests/appbar.tsx

@@ -1,4 +1,4 @@
-import { Appbar, AppbarSection } from '../../appbar';
+import { Appbar, AppbarNormal, AppbarSection } from '../../appbar';
 import { Icon } from '../../icon';
 import { Textbox } from '../../textbox';
 
@@ -32,10 +32,10 @@ export default () =>(
     <>
         <style>{styles}</style>
         <div id="test-area" className="k-d-grid k-grid-cols-1">
-            <span>Appbar Sticky and Inherit ThemeColor</span>
+            <span>Appbar sticky and inherit color</span>
             <section>
                 <div style={{ background: "#1976d2", color: "#fff" }}>
-                    <Appbar positionMode={'sticky'} themeColor={'inherit'}>
+                    <AppbarNormal positionMode={'sticky'}>
                         <AppbarSection>
                             <Icon icon="menu" />
                         </AppbarSection>
@@ -64,418 +64,47 @@ export default () =>(
                             <span className="k-appbar-separator"></span>
                             <Icon icon="user" />
                         </AppbarSection>
-                    </Appbar>
+                    </AppbarNormal>
                 </div>
             </section>
 
-            <span>Appbar Light ThemeColor</span>
-            <section>
-                <Appbar themeColor={'light'}>
-                    <AppbarSection>
-                        <Icon icon="menu" />
-                    </AppbarSection>
-                    <span className="k-spacer k-spacer-sized" style={{ width: "8px" }}></span>
-                    <AppbarSection>
-                        <h1 className="title">Page Title</h1>
-                    </AppbarSection>
-                    <span className="k-spacer k-spacer-sized" style={{ width: "32px" }}></span>
-                    <AppbarSection>
-                        <ul>
-                            <li>Menu Item</li>
-                            <li>Menu Item</li>
-                            <li>Menu Item</li>
-                        </ul>
-                    </AppbarSection>
-
-                    <span className="k-spacer"></span>
-
-                    <AppbarSection>
-                        <Textbox placeholder="Search..." />
-                    </AppbarSection>
-
-                    <AppbarSection>
-                        <Icon icon="sliders" />
-                        <Icon icon="bell" />
-                        <span className="k-appbar-separator"></span>
-                        <Icon icon="user" />
-                    </AppbarSection>
-                </Appbar>
-            </section>
-
-            <span>Appbar Dark ThemeColor</span>
-            <section>
-                <Appbar themeColor={'dark'}>
-                    <AppbarSection>
-                        <Icon icon="menu" />
-                    </AppbarSection>
-                    <span className="k-spacer k-spacer-sized" style={{ width: "8px" }}></span>
-                    <AppbarSection>
-                        <h1 className="title">Page Title</h1>
-                    </AppbarSection>
-                    <span className="k-spacer k-spacer-sized" style={{ width: "32px" }}></span>
-                    <AppbarSection>
-                        <ul>
-                            <li>Menu Item</li>
-                            <li>Menu Item</li>
-                            <li>Menu Item</li>
-                        </ul>
-                    </AppbarSection>
-
-                    <span className="k-spacer"></span>
-
-                    <AppbarSection>
-                        <Textbox placeholder="Search..." />
-                    </AppbarSection>
-
-                    <AppbarSection>
-                        <Icon icon="sliders" />
-                        <Icon icon="bell" />
-                        <span className="k-appbar-separator"></span>
-                        <Icon icon="user" />
-                    </AppbarSection>
-                </Appbar>
-            </section>
-
-            <span>Appbar Primary ThemeColor</span>
-            <section>
-                <Appbar themeColor={'primary'}>
-                    <AppbarSection>
-                        <Icon icon="menu" />
-                    </AppbarSection>
-                    <span className="k-spacer k-spacer-sized" style={{ width: "8px" }}></span>
-                    <AppbarSection>
-                        <h1 className="title">Page Title</h1>
-                    </AppbarSection>
-                    <span className="k-spacer k-spacer-sized" style={{ width: "32px" }}></span>
-                    <AppbarSection>
-                        <ul>
-                            <li>Menu Item</li>
-                            <li>Menu Item</li>
-                            <li>Menu Item</li>
-                        </ul>
-                    </AppbarSection>
-
-                    <span className="k-spacer"></span>
-
-                    <AppbarSection>
-                        <Textbox placeholder="Search..." />
-                    </AppbarSection>
-
-                    <AppbarSection>
-                        <Icon icon="sliders" />
-                        <Icon icon="bell" />
-                        <span className="k-appbar-separator"></span>
-                        <Icon icon="user" />
-                    </AppbarSection>
-                </Appbar>
-            </section>
-
-            <span>Appbar Secondary ThemeColor</span>
-            <section>
-                <Appbar themeColor={'secondary'}>
-                    <AppbarSection>
-                        <Icon icon="menu" />
-                    </AppbarSection>
-                    <span className="k-spacer k-spacer-sized" style={{ width: "8px" }}></span>
-                    <AppbarSection>
-                        <h1 className="title">Page Title</h1>
-                    </AppbarSection>
-                    <span className="k-spacer k-spacer-sized" style={{ width: "32px" }}></span>
-                    <AppbarSection>
-                        <ul>
-                            <li>Menu Item</li>
-                            <li>Menu Item</li>
-                            <li>Menu Item</li>
-                        </ul>
-                    </AppbarSection>
-
-                    <span className="k-spacer"></span>
-
-                    <AppbarSection>
-                        <Textbox placeholder="Search..." />
-                    </AppbarSection>
-
-                    <AppbarSection>
-                        <Icon icon="sliders" />
-                        <Icon icon="bell" />
-                        <span className="k-appbar-separator"></span>
-                        <Icon icon="user" />
-                    </AppbarSection>
-                </Appbar>
-            </section>
-
-            <span>Appbar Tertiary ThemeColor</span>
-            <section>
-                <Appbar themeColor={'tertiary'}>
-                    <AppbarSection>
-                        <Icon icon="menu" />
-                    </AppbarSection>
-                    <span className="k-spacer k-spacer-sized" style={{ width: "8px" }}></span>
-                    <AppbarSection>
-                        <h1 className="title">Page Title</h1>
-                    </AppbarSection>
-                    <span className="k-spacer k-spacer-sized" style={{ width: "32px" }}></span>
-                    <AppbarSection>
-                        <ul>
-                            <li>Menu Item</li>
-                            <li>Menu Item</li>
-                            <li>Menu Item</li>
-                        </ul>
-                    </AppbarSection>
-
-                    <span className="k-spacer"></span>
-
-                    <AppbarSection>
-                        <Textbox placeholder="Search..." />
-                    </AppbarSection>
-
-                    <AppbarSection>
-                        <Icon icon="sliders" />
-                        <Icon icon="bell" />
-                        <span className="k-appbar-separator"></span>
-                        <Icon icon="user" />
-                    </AppbarSection>
-                </Appbar>
-            </section>
-
-            <span>Appbar Info ThemeColor</span>
-            <section>
-                <Appbar themeColor={'info'}>
-                    <AppbarSection>
-                        <Icon icon="menu" />
-                    </AppbarSection>
-                    <span className="k-spacer k-spacer-sized" style={{ width: "8px" }}></span>
-                    <AppbarSection>
-                        <h1 className="title">Page Title</h1>
-                    </AppbarSection>
-                    <span className="k-spacer k-spacer-sized" style={{ width: "32px" }}></span>
-                    <AppbarSection>
-                        <ul>
-                            <li>Menu Item</li>
-                            <li>Menu Item</li>
-                            <li>Menu Item</li>
-                        </ul>
-                    </AppbarSection>
-
-                    <span className="k-spacer"></span>
-
-                    <AppbarSection>
-                        <Textbox placeholder="Search..." />
-                    </AppbarSection>
-
-                    <AppbarSection>
-                        <Icon icon="sliders" />
-                        <Icon icon="bell" />
-                        <span className="k-appbar-separator"></span>
-                        <Icon icon="user" />
-                    </AppbarSection>
-                </Appbar>
-            </section>
-
-            <span>Appbar Success ThemeColor</span>
-            <section>
-                <Appbar themeColor={'success'}>
-                    <AppbarSection>
-                        <Icon icon="menu" />
-                    </AppbarSection>
-                    <span className="k-spacer k-spacer-sized" style={{ width: "8px" }}></span>
-                    <AppbarSection>
-                        <h1 className="title">Page Title</h1>
-                    </AppbarSection>
-                    <span className="k-spacer k-spacer-sized" style={{ width: "32px" }}></span>
-                    <AppbarSection>
-                        <ul>
-                            <li>Menu Item</li>
-                            <li>Menu Item</li>
-                            <li>Menu Item</li>
-                        </ul>
-                    </AppbarSection>
-
-                    <span className="k-spacer"></span>
-
-                    <AppbarSection>
-                        <Textbox placeholder="Search..." />
-                    </AppbarSection>
-
-                    <AppbarSection>
-                        <Icon icon="sliders" />
-                        <Icon icon="bell" />
-                        <span className="k-appbar-separator"></span>
-                        <Icon icon="user" />
-                    </AppbarSection>
-                </Appbar>
-            </section>
-
-            <span>Appbar Warning ThemeColor</span>
-            <section>
-                <Appbar themeColor={'warning'}>
-                    <AppbarSection>
-                        <Icon icon="menu" />
-                    </AppbarSection>
-                    <span className="k-spacer k-spacer-sized" style={{ width: "8px" }}></span>
-                    <AppbarSection>
-                        <h1 className="title">Page Title</h1>
-                    </AppbarSection>
-                    <span className="k-spacer k-spacer-sized" style={{ width: "32px" }}></span>
-                    <AppbarSection>
-                        <ul>
-                            <li>Menu Item</li>
-                            <li>Menu Item</li>
-                            <li>Menu Item</li>
-                        </ul>
-                    </AppbarSection>
-
-                    <span className="k-spacer"></span>
-
-                    <AppbarSection>
-                        <Textbox placeholder="Search..." />
-                    </AppbarSection>
-
-                    <AppbarSection>
-                        <Icon icon="sliders" />
-                        <Icon icon="bell" />
-                        <span className="k-appbar-separator"></span>
-                        <Icon icon="user" />
-                    </AppbarSection>
-                </Appbar>
-            </section>
-
-            <span>Appbar Error ThemeColor</span>
-            <section>
-                <Appbar themeColor={'error'}>
-                    <AppbarSection>
-                        <Icon icon="menu" />
-                    </AppbarSection>
-                    <span className="k-spacer k-spacer-sized" style={{ width: "8px" }}></span>
-                    <AppbarSection>
-                        <h1 className="title">Page Title</h1>
-                    </AppbarSection>
-                    <span className="k-spacer k-spacer-sized" style={{ width: "32px" }}></span>
-                    <AppbarSection>
-                        <ul>
-                            <li>Menu Item</li>
-                            <li>Menu Item</li>
-                            <li>Menu Item</li>
-                        </ul>
-                    </AppbarSection>
-
-                    <span className="k-spacer"></span>
-
-                    <AppbarSection>
-                        <Textbox placeholder="Search..." />
-                    </AppbarSection>
-
-                    <AppbarSection>
-                        <Icon icon="sliders" />
-                        <Icon icon="bell" />
-                        <span className="k-appbar-separator"></span>
-                        <Icon icon="user" />
-                    </AppbarSection>
-                </Appbar>
-            </section>
-
-            <span>Appbar Inverse ThemeColor</span>
-            <section>
-                <Appbar themeColor={'inverse'}>
-                    <AppbarSection>
-                        <Icon icon="menu" />
-                    </AppbarSection>
-                    <span className="k-spacer k-spacer-sized" style={{ width: "8px" }}></span>
-                    <AppbarSection>
-                        <h1 className="title">Page Title</h1>
-                    </AppbarSection>
-                    <span className="k-spacer k-spacer-sized" style={{ width: "32px" }}></span>
-                    <AppbarSection>
-                        <ul>
-                            <li>Menu Item</li>
-                            <li>Menu Item</li>
-                            <li>Menu Item</li>
-                        </ul>
-                    </AppbarSection>
-
-                    <span className="k-spacer"></span>
-
-                    <AppbarSection>
-                        <Textbox placeholder="Search..." />
-                    </AppbarSection>
-
-                    <AppbarSection>
-                        <Icon icon="sliders" />
-                        <Icon icon="bell" />
-                        <span className="k-appbar-separator"></span>
-                        <Icon icon="user" />
-                    </AppbarSection>
-                </Appbar>
-            </section>
-
-            <span>Sticky AppBar</span>
-            <section>
-                <Appbar themeColor={'light'} positionMode={'sticky'}>
-                    <AppbarSection>
-                        <Icon icon="menu" />
-                    </AppbarSection>
-                    <span className="k-spacer k-spacer-sized" style={{ width: "8px" }}></span>
-                    <AppbarSection>
-                        <h1 className="title">Page Title</h1>
-                    </AppbarSection>
-                    <span className="k-spacer k-spacer-sized" style={{ width: "32px" }}></span>
-                    <AppbarSection>
-                        <ul>
-                            <li>Menu Item</li>
-                            <li>Menu Item</li>
-                            <li>Menu Item</li>
-                        </ul>
-                    </AppbarSection>
-
-                    <span className="k-spacer"></span>
-
-                    <AppbarSection>
-                        <Textbox placeholder="Search..." />
-                    </AppbarSection>
-
-                    <AppbarSection>
-                        <Icon icon="sliders" />
-                        <Icon icon="bell" />
-                        <span className="k-appbar-separator"></span>
-                        <Icon icon="user" />
-                    </AppbarSection>
-                </Appbar>
-            </section>
-
-            <span>RTL AppBar</span>
-            <section>
-                <Appbar themeColor={'light'} dir="rtl">
-                    <AppbarSection>
-                        <Icon icon="menu" />
-                    </AppbarSection>
-                    <span className="k-spacer k-spacer-sized" style={{ width: "8px" }}></span>
-                    <AppbarSection>
-                        <h1 className="title">Page Title</h1>
-                    </AppbarSection>
-                    <span className="k-spacer k-spacer-sized" style={{ width: "32px" }}></span>
-                    <AppbarSection>
-                        <ul>
-                            <li>Menu Item</li>
-                            <li>Menu Item</li>
-                            <li>Menu Item</li>
-                        </ul>
-                    </AppbarSection>
-
-                    <span className="k-spacer"></span>
-
-                    <AppbarSection>
-                        <Textbox placeholder="Search..." />
-                    </AppbarSection>
-
-                    <AppbarSection>
-                        <Icon icon="sliders" />
-                        <Icon icon="bell" />
-                        <span className="k-appbar-separator"></span>
-                        <Icon icon="user" />
-                    </AppbarSection>
-                </Appbar>
-            </section>
-
+            {[ ...Appbar.options.themeColor ].map((themeColor) => (
+                <>
+                    <span>Appbar {themeColor} theme color</span>
+                    <section>
+                        <AppbarNormal fillMode="solid" themeColor={themeColor}>
+                            <AppbarSection>
+                                <Icon icon="menu" />
+                            </AppbarSection>
+                            <span className="k-spacer k-spacer-sized" style={{ width: "8px" }}></span>
+                            <AppbarSection>
+                                <h1 className="title">Page Title</h1>
+                            </AppbarSection>
+                            <span className="k-spacer k-spacer-sized" style={{ width: "32px" }}></span>
+                            <AppbarSection>
+                                <ul>
+                                    <li>Menu Item</li>
+                                    <li>Menu Item</li>
+                                    <li>Menu Item</li>
+                                </ul>
+                            </AppbarSection>
+
+                            <span className="k-spacer"></span>
+
+                            <AppbarSection>
+                                <Textbox placeholder="Search..." />
+                            </AppbarSection>
+
+                            <AppbarSection>
+                                <Icon icon="sliders" />
+                                <Icon icon="bell" />
+                                <span className="k-appbar-separator"></span>
+                                <Icon icon="user" />
+                            </AppbarSection>
+                        </AppbarNormal>
+                    </section>
+                </>
+            ))}
         </div>
     </>
 );

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

@@ -1,8 +1,10 @@
-import { classNames, optionClassNames, FillMode, ThemeColor } from '../misc';
+import { classNames, stateClassNames, optionClassNames, FillMode, ThemeColor, States } from '../misc';
 
 export const BOTTOM_NAV_CLASSNAME = 'k-bottom-nav';
 
-const states = [];
+const states = [
+    States.disabled,
+];
 
 const options = {
     fillMode: [ FillMode.solid, FillMode.flat ],
@@ -31,8 +33,10 @@ export type KendoBottomNavProps = KendoBottomNavOptions & {
     dir?: 'ltr' | 'rtl';
 };
 
+export type KendoBottomNavState = { [K in (typeof states)[number]]?: boolean };
+
 const defaultProps = {
-    fillMode: FillMode.solid,
+    fillMode: FillMode.flat,
     themeColor: ThemeColor.primary,
     flow: 'horizontal',
     border: false
@@ -40,9 +44,11 @@ const defaultProps = {
 
 export const BottomNav = (
     props: KendoBottomNavProps &
+        KendoBottomNavState &
         React.HTMLAttributes<HTMLElement>
 ) => {
     const {
+        disabled,
         fillMode = defaultProps.fillMode,
         themeColor = defaultProps.themeColor,
         flow = defaultProps.flow,
@@ -61,7 +67,10 @@ export const BottomNav = (
             {
                 [`k-bottom-nav-item-flow-${flow}`]: flow,
                 'k-bottom-nav-border': border,
-            }
+            },
+            stateClassNames(BOTTOM_NAV_CLASSNAME, {
+                disabled,
+            }),
         )} dir={dir}>
             {props.children}
         </nav>

package/src/bottom-nav/index.ts

@@ -1,2 +1,5 @@
 export * from './bottom-nav.spec';
 export * from './bottom-nav-item';
+export * from './templates/bottom-nav-normal';
+export * from './templates/bottom-nav-icons';
+export * from './templates/bottom-nav-links';

package/src/bottom-nav/templates/bottom-nav-icons.tsx

@@ -0,0 +1,13 @@
+import { BottomNav, BottomNavItem } from "../../bottom-nav";
+
+export const BottomNavIcons = (props) => (
+    <BottomNav
+        children={[
+            <BottomNavItem icon="envelope" />,
+            <BottomNavItem icon="envelope" />,
+            <BottomNavItem icon="envelope" />
+        ]}
+        {...props}
+    >
+    </BottomNav>
+);

package/src/bottom-nav/templates/bottom-nav-links.tsx

@@ -0,0 +1,13 @@
+import { BottomNav, BottomNavItem } from "../../bottom-nav";
+
+export const BottomNavLinks = (props) => (
+    <BottomNav
+        children={[
+            <BottomNavItem link="LinkItem"/>,
+            <BottomNavItem link="LinkItem"/>,
+            <BottomNavItem link="LinkItem"/>
+        ]}
+        {...props}
+    >
+    </BottomNav>
+);

package/src/bottom-nav/templates/bottom-nav-normal.tsx

@@ -0,0 +1,13 @@
+import { BottomNav, BottomNavItem } from "../../bottom-nav";
+
+export const BottomNavNormal = (props) => (
+    <BottomNav
+        children={[
+            <BottomNavItem icon="envelope" text="BottomNavItem" />,
+            <BottomNavItem icon="envelope" text="BottomNavItem" />,
+            <BottomNavItem icon="envelope" text="BottomNavItem" />
+        ]}
+        {...props}
+    >
+    </BottomNav>
+);

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

@@ -0,0 +1,35 @@
+import { BottomNav, BottomNavNormal, BottomNavItem } from '../../bottom-nav';
+
+
+const styles = `
+    #test-area .colors {
+        padding: 10px;
+        gap: 10px;
+    }
+    #test-area .colors-flat {
+        background-color: rgb(234, 234, 234);
+    }
+`;
+
+export default () =>(
+    <>
+        <style>{styles}</style>
+        <div id="test-area" className="k-d-grid">
+            <div className="colors colors-flat k-d-grid">
+                {[ ...BottomNav.options.themeColor ].map((themeColor) => (
+                    <>
+                        <span>BottomNav {themeColor} theme color</span>
+                        <section>
+                            <BottomNavNormal themeColor={themeColor} border flow="vertical">
+                                <BottomNavItem icon="envelope" text="Normal" />
+                                <BottomNavItem icon="envelope" text="Focused" focus />
+                                <BottomNavItem icon="envelope" text="Selected" selected />
+                                <BottomNavItem icon="envelope" text="Disabled" disabled />
+                            </BottomNavNormal>
+                        </section>
+                    </>
+                ))}
+            </div>
+        </div>
+    </>
+);

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

@@ -1,5 +1,5 @@
 import { Icon } from '../../icon';
-import { BottomNav, BottomNavItem } from '../../bottom-nav';
+import { BottomNavNormal, BottomNavItem } from '../../bottom-nav';
 
 const styles = `
 #test-area {
@@ -14,17 +14,17 @@ export default () =>(
 
             <section>
                 <h4>Bottom Navigation with SPAN</h4>
-                <BottomNav fillMode="flat" themeColor="primary" border flow="vertical">
+                <BottomNavNormal themeColor="primary" border flow="vertical">
                     <BottomNavItem icon="envelope" text="Normal" />
                     <BottomNavItem icon="envelope" text="Focused" focus />
                     <BottomNavItem icon="envelope" text="Selected" selected />
                     <BottomNavItem icon="envelope" text="Disabled" disabled />
-                </BottomNav>
+                </BottomNavNormal>
             </section>
 
             <section>
                 <h4>Bottom Navigation with BUTTON</h4>
-                <BottomNav fillMode="flat" themeColor="primary" border flow="vertical">
+                <BottomNavNormal themeColor="primary" border flow="vertical">
                     <button className="k-bottom-nav-item">
                         <Icon className="k-bottom-nav-item-icon" icon="envelope" size="xlarge" />
                         <span className="k-bottom-nav-item-text">Normal</span>
@@ -41,12 +41,12 @@ export default () =>(
                         <Icon className="k-bottom-nav-item-icon" icon="envelope" size="xlarge" />
                         <span className="k-bottom-nav-item-text">Disabled</span>
                     </button>
-                </BottomNav>
+                </BottomNavNormal>
             </section>
 
             <section>
                 <h4>Bottom Navigation with A</h4>
-                <BottomNav fillMode="flat" themeColor="primary" border flow="vertical">
+                <BottomNavNormal themeColor="primary" border flow="vertical">
                     <a className="k-bottom-nav-item">
                         <Icon className="k-bottom-nav-item-icon" icon="envelope" size="xlarge" />
                         <span className="k-bottom-nav-item-text">Normal</span>
@@ -63,7 +63,7 @@ export default () =>(
                         <Icon className="k-bottom-nav-item-icon" icon="envelope" size="xlarge" />
                         <span className="k-bottom-nav-item-text">Disabled</span>
                     </a>
-                </BottomNav>
+                </BottomNavNormal>
             </section>
         </div>
     </>