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

package/src/popover/tests/popover.tsx

@@ -1,4 +1,4 @@
-import { Popover } from '../../popover';
+import { PopoverNormal } from '../../popover';
 import { Button } from '../../button';
 import { ActionButtons } from '../../action-buttons';
 
@@ -21,44 +21,44 @@ export default () =>(
             <span>Empty body fixed height</span>
 
             <section>
-                <Popover callout="top" title="Title" body={<>Body content</>}>
+                <PopoverNormal callout="top" title="Title" body={<>Body content</>}>
                     <ActionButtons className="k-popover-actions" alignment="stretched">
                         <Button fillMode="flat">Action</Button>
                         <Button fillMode="flat" themeColor="primary">Primary</Button>
                     </ActionButtons>
-                </Popover>
+                </PopoverNormal>
             </section>
 
             <section>
-                <Popover callout="right" title="Title" body={<>Body content</>}>
+                <PopoverNormal callout="right" title="Title" body={<>Body content</>}>
                     <ActionButtons className="k-popover-actions" alignment="stretched">
                         <Button fillMode="flat">Action</Button>
                         <Button fillMode="flat" themeColor="primary">Primary</Button>
                     </ActionButtons>
-                </Popover>
+                </PopoverNormal>
             </section>
 
             <section>
-                <Popover callout="bottom" title="Title" body={<>Body content</>}>
+                <PopoverNormal callout="bottom" title="Title" body={<>Body content</>}>
                     <ActionButtons className="k-popover-actions" alignment="stretched">
                         <Button fillMode="flat">Action</Button>
                         <Button fillMode="flat" themeColor="primary">Primary</Button>
                     </ActionButtons>
-                </Popover>
+                </PopoverNormal>
             </section>
 
             <section>
-                <Popover callout="left" title="Title" body={<>Body content</>}>
+                <PopoverNormal callout="left" title="Title" body={<>Body content</>}>
                     <ActionButtons className="k-popover-actions" alignment="stretched">
                         <Button fillMode="flat">Action</Button>
                         <Button fillMode="flat" themeColor="primary">Primary</Button>
                     </ActionButtons>
-                </Popover>
+                </PopoverNormal>
             </section>
 
             <section>
-                <Popover callout="left" title="Title" style={{ height: "150px" }}>
-                </Popover>
+                <PopoverNormal callout="left" title="Title" style={{ height: "150px" }}>
+                </PopoverNormal>
             </section>
         </div>
     </>

package/src/scrollview/index.ts

@@ -1 +1,2 @@
 export * from './scrollview-spec';
+export * from './templates/scrollview-normal';

package/src/scrollview/templates/scrollview-normal.tsx

@@ -0,0 +1,3 @@
+import ScrollView from "../scrollview-spec";
+
+export const ScrollViewNormal = (props) => (<ScrollView {...props} />);

package/src/scrollview/tests/scrollview-rtl.tsx

@@ -0,0 +1,36 @@
+import { ScrollViewNormal } from '../../scrollview';
+
+const style = `
+    .k-scrollview {
+        width: 100%;
+        height: 300px;
+    }
+
+    .k-scrollview { background: gray !important; }
+    .k-scrollview-dark { background: white !important; }
+    .k-scrollview-light { background: black !important; }
+`;
+
+export default () =>(
+    <>
+        <style>{style}</style>
+        <div id="test-area" className="k-d-grid k-grid-cols-3">
+
+            <span>RTL - Light mode</span>
+            <span>RTL - Normal</span>
+            <span>RTL - Dark mode</span>
+
+            <ScrollViewNormal mode="light" rtl />
+            <ScrollViewNormal rtl />
+            <ScrollViewNormal mode="dark" rtl />
+
+            <span>RTL Pager disabled</span>
+            <span></span>
+            <span></span>
+
+            <ScrollViewNormal mode="light" pager={false} rtl />
+            <ScrollViewNormal pager={false} rtl />
+            <ScrollViewNormal mode="dark" pager={false} rtl />
+        </div>
+    </>
+);

package/src/scrollview/tests/scrollview.tsx

@@ -1,5 +1,4 @@
-import { ScrollView } from '../../scrollview';
-
+import { ScrollViewNormal } from '../../scrollview';
 
 const style = `
     .k-scrollview {
@@ -21,15 +20,17 @@ export default () =>(
             <span>Normal</span>
             <span>Dark mode</span>
 
-            <ScrollView mode="light" />
-            <ScrollView />
-            <ScrollView mode="dark" />
+            <ScrollViewNormal mode="light" />
+            <ScrollViewNormal />
+            <ScrollViewNormal mode="dark" />
 
-            <span>RTL</span>
+            <span>Pager disabled</span>
             <span></span>
             <span></span>
 
-            <ScrollView rtl />
+            <ScrollViewNormal mode="light" pager={false} />
+            <ScrollViewNormal pager={false} />
+            <ScrollViewNormal mode="dark" pager={false} />
         </div>
     </>
 );

package/src/tilelayout/index.ts

@@ -1,3 +1,4 @@
 export * from './tilelayout.spec';
 export * from './tilelayout-item.spec';
 export * from './tilelayout-item-hint.spec';
+export * from './templates/tilelayout-normal';

package/src/tilelayout/templates/tilelayout-normal.tsx

@@ -0,0 +1,14 @@
+import { TileLayout, TileLayoutItem } from "../../tilelayout";
+
+export const TileLayoutNormal = (props) => (
+    <TileLayout
+        children={[
+            <TileLayoutItem header="Title goes here" body="Content goes here" />,
+            <TileLayoutItem header="Title goes here" body="Content goes here" />,
+            <TileLayoutItem header="Title goes here" body="Content goes here" />,
+            <TileLayoutItem header="Title goes here" body="Content goes here" />
+        ]}
+        {...props}
+    >
+    </TileLayout>
+);

package/src/tilelayout/tests/tilelayout-resizing.tsx

@@ -1,15 +1,15 @@
-import { TileLayout } from '../tilelayout.spec';
+import { TileLayoutNormal } from '../../tilelayout';
 import { TileLayoutItem } from '../tilelayout-item.spec';
 
 export default () => (
     <>
         <div id="test-area">
-            <TileLayout columns={4} gap="16px" columnWidth="1fr">
+            <TileLayoutNormal columns={4} gap="16px" columnWidth="1fr">
                 <TileLayoutItem resize="horizontal" header="Card Title" body="Horizontally resizable card" />
                 <TileLayoutItem resize="vertical" header="Card Title" body="Vertically resizable card" />
                 <TileLayoutItem resize={true} header="Card Title" body="Horizontally and Vertically resizable card" />
                 <TileLayoutItem header="Card Title" body="Non-resizable card" />
-            </TileLayout>
+            </TileLayoutNormal>
         </div>
     </>
 );

package/src/tilelayout/tests/tilelayout.tsx

@@ -1,11 +1,11 @@
-import { TileLayout } from '../tilelayout.spec';
+import { TileLayoutNormal } from '../../tilelayout';
 import { TileLayoutItem } from '../tilelayout-item.spec';
 import TileLayoutItemHint from '../tilelayout-item-hint.spec';
 
 export default () => (
     <>
         <div id="test-area">
-            <TileLayout
+            <TileLayoutNormal
                 columns={5}
                 columnWidth="1fr"
                 rowHeight="1fr"
@@ -27,7 +27,7 @@ export default () => (
                     body="Content goes here"
                     style={{ order: "9", gridColumnEnd: "span 1", gridRowEnd: "span 2" }}
                 />
-            </TileLayout>
+            </TileLayoutNormal>
         </div>
     </>
 );

package/src/toolbar/templates/toolbar-normal.tsx

@@ -1,7 +1,22 @@
 import ToolBar from "../toolbar.spec";
+import { Button } from '../../button';
+import { ButtonGroup } from '../../button-group';
+import { MenuButton } from '../../menu-button';
+import { SplitButton } from '../../split-button';
 
-export const ToolbarNormal = ({ children, ...other }) => (
-    <ToolBar {...other}>
-        {children}
+export const ToolbarNormal = (props) => (
+    <ToolBar children={[
+        <>
+            <Button>Button</Button>
+            <MenuButton text="Menu button"></MenuButton>
+            <SplitButton>Split button</SplitButton>
+            <ButtonGroup>
+                <Button icon="align-left">Left</Button>
+                <Button icon="align-center">Center</Button>
+                <Button icon="align-right">Right</Button>
+            </ButtonGroup>
+        </>
+    ]}
+    {...props}>
     </ToolBar>
 );

package/src/toolbar/tests/toolbar.tsx

@@ -119,31 +119,11 @@ export default () =>(
             <span>wrapped</span>
             <span>wrapped rtl</span>
             <section>
-                <ToolbarNormal>
-                    <Button>Button</Button>
-                    <MenuButton text="Menu button"></MenuButton>
-                    <SplitButton>Split button</SplitButton>
-                    <ButtonGroup>
-                        <Button icon="align-left">Left</Button>
-                        <Button icon="align-center">Center</Button>
-                        <Button icon="align-right">Right</Button>
-                        <Button icon="align-justify">Justify</Button>
-                    </ButtonGroup>
-                </ToolbarNormal>
+                <ToolbarNormal />
             </section>
 
             <section dir="rtl">
-                <ToolbarNormal>
-                    <Button>Button</Button>
-                    <SplitButton>Split button</SplitButton>
-                    <MenuButton text="Menu button"></MenuButton>
-                    <ButtonGroup>
-                        <Button icon="align-left">Left</Button>
-                        <Button icon="align-center">Center</Button>
-                        <Button icon="align-right">Right</Button>
-                        <Button icon="align-justify">Justify</Button>
-                    </ButtonGroup>
-                </ToolbarNormal>
+                <ToolbarNormal />
             </section>
 
         </div>

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

@@ -1,205 +0,0 @@
-import { BottomNav, BottomNavItem } from '../../bottom-nav';
-
-
-const styles = `
-    #test-area .colors {
-        padding: 10px 20px;
-        gap: 20px;
-    }
-    #test-area .colors-flat {
-        background-color: rgb(234, 234, 234);
-    }
-`;
-
-export default () =>(
-    <>
-        <style>{styles}</style>
-        <div id="test-area" className="k-d-grid">
-            <h2>Solid Colors</h2>
-            <div className="colors k-d-grid k-grid-cols-2">
-                <section>
-                    <span className="k-col-start-1">Primary ThemeColor</span>
-                    <BottomNav themeColor="primary" 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>
-                </section>
-
-                <section>
-                    <span>Secondary ThemeColor</span>
-                    <BottomNav themeColor="secondary" 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>
-                </section>
-
-                <section>
-                    <span>Tertiary ThemeColor</span>
-                    <BottomNav themeColor="tertiary" 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>
-                </section>
-
-                <section>
-                    <span>Info ThemeColor</span>
-                    <BottomNav themeColor="info" 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>
-                </section>
-
-                <section>
-                    <span>Success ThemeColor</span>
-                    <BottomNav themeColor="success" 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>
-                </section>
-
-                <section>
-                    <span>Warning ThemeColor</span>
-                    <BottomNav themeColor="warning" 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>
-                </section>
-
-                <section>
-                    <span>Error ThemeColor</span>
-                    <BottomNav themeColor="error" 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>
-                </section>
-
-                <section>
-                    <span>Dark ThemeColor</span>
-                    <BottomNav themeColor="dark" 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>
-                </section>
-
-                <section>
-                    <span>Light ThemeColor</span>
-                    <BottomNav themeColor="light" 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>
-                </section>
-            </div>
-
-            <h2>Flat Colors</h2>
-            <div className="colors colors-flat k-d-grid k-grid-cols-2">
-                <section>
-                    <span>Primary ThemeColor</span>
-                    <BottomNav fillMode="flat" 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>
-                </section>
-
-                <section>
-                    <span>Secondary ThemeColor</span>
-                    <BottomNav fillMode="flat" themeColor="secondary" 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>
-                </section>
-
-                <section>
-                    <span>Tertiary ThemeColor</span>
-                    <BottomNav fillMode="flat" themeColor="tertiary" 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>
-                </section>
-
-                <section>
-                    <span>Info ThemeColor</span>
-                    <BottomNav fillMode="flat" themeColor="info" 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>
-                </section>
-
-                <section>
-                    <span>Success ThemeColor</span>
-                    <BottomNav fillMode="flat" themeColor="success" 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>
-                </section>
-
-                <section>
-                    <span>Warning ThemeColor</span>
-                    <BottomNav fillMode="flat" themeColor="warning" 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>
-                </section>
-
-                <section>
-                    <span>Error ThemeColor</span>
-                    <BottomNav fillMode="flat" themeColor="error" 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>
-                </section>
-
-                <section>
-                    <span>Dark ThemeColor</span>
-                    <BottomNav fillMode="flat" themeColor="dark" 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>
-                </section>
-
-                <section>
-                    <span>Light ThemeColor</span>
-                    <BottomNav fillMode="flat" themeColor="light" 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>
-                </section>
-            </div>
-        </div>
-    </>
-);