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

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

@@ -1,4 +1,4 @@
-import { BottomNav, BottomNavItem } from '../../bottom-nav';
+import { BottomNavNormal, BottomNavItem } from '../../bottom-nav';
 
 
 const styles = `
@@ -14,22 +14,22 @@ export default () =>(
 
             <section>
                 <h4>Bottom Navigation RTL Horizontal</h4>
-                <BottomNav fillMode="flat" themeColor="primary" border dir="rtl">
+                <BottomNavNormal themeColor="primary" border dir="rtl">
                     <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 RTL Vertical</h4>
-                <BottomNav fillMode="flat" themeColor="primary" border flow="vertical" dir="rtl">
+                <BottomNavNormal themeColor="primary" border flow="vertical" dir="rtl">
                     <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>
         </div>
     </>

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

@@ -0,0 +1,32 @@
+import { BottomNav, BottomNavNormal, BottomNavItem } from '../../bottom-nav';
+
+
+const styles = `
+    #test-area .colors {
+        padding: 10px;
+        gap: 10px;
+    }
+`;
+
+export default () =>(
+    <>
+        <style>{styles}</style>
+        <div id="test-area" className="k-d-grid">
+            <div className="colors k-d-grid">
+                {[ ...BottomNav.options.themeColor ].map((themeColor) => (
+                    <>
+                        <span>BottomNav {themeColor} theme color</span>
+                        <section>
+                            <BottomNavNormal fillMode="solid" 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.tsx

@@ -1,4 +1,4 @@
-import { BottomNav, BottomNavItem } from '../../bottom-nav';
+import { BottomNavNormal, BottomNavItem, BottomNavIcons, BottomNavLinks } from '../../bottom-nav';
 
 
 const styles = `
@@ -13,45 +13,45 @@ export default () =>(
         <div id="test-area" className="k-d-grid k-grid-cols-1">
             <section>
                 <h4>Horizontal</h4>
-                <BottomNav fillMode="flat" themeColor="primary" border>
+                <BottomNavNormal themeColor="primary" border>
                     <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>
 
                 <h4>Vertical</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>
 
                 <h4>Icons only</h4>
-                <BottomNav fillMode="flat" themeColor="primary" border>
+                <BottomNavIcons themeColor="primary" border>
                     <BottomNavItem icon="envelope" />
                     <BottomNavItem icon="envelope" focus />
                     <BottomNavItem icon="envelope" selected />
                     <BottomNavItem icon="envelope" disabled />
-                </BottomNav>
+                </BottomNavIcons>
 
                 <h4>Overflow</h4>
                 <div style={{ width: "360px" }}>
-                    <BottomNav fillMode="flat" themeColor="primary" border flow="vertical">
+                    <BottomNavNormal themeColor="primary" border flow="vertical">
                         <BottomNavItem icon="envelope" text="Normal" />
                         <BottomNavItem icon="envelope" text="Focused Long" focus />
                         <BottomNavItem icon="envelope" text="Selected" selected />
                         <BottomNavItem icon="envelope" text="Disabled Long Text" disabled />
-                    </BottomNav>
+                    </BottomNavNormal>
                 </div>
 
                 <h4>k-bottom-nav-link</h4>
                 <div style={{ width: "360px" }}>
-                    <BottomNav fillMode="flat" themeColor="primary" flow="vertical">
+                    <BottomNavLinks themeColor="primary" flow="vertical">
                         <BottomNavItem link="Inbox" selected />
                         <BottomNavItem link="Profile" />
-                    </BottomNav>
+                    </BottomNavLinks>
                 </div>
             </section>
         </div>

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

@@ -1,7 +1,12 @@
 import Dialog from "../dialog.spec";
 
-export const DialogNormal = ({ children, ...other }: any) => <Dialog
-    {...other}
->
-    {children}
-</Dialog>;
+export const DialogNormal = (props) => (
+    <Dialog children={[
+        <>
+        Dialog content
+        </>
+    ]}
+    { ...props}
+    >
+    </Dialog>
+);

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

@@ -1,3 +1,22 @@
-import Editor from "../editor.spec";
+import { EditorContent, EditorToolbar, Editor } from '../../editor';
+import { Button } from '../../button';
+import { ButtonGroup } from '../../button-group';
 
-export const EditorNormal = (props: any) => <Editor {...props} />;
+export const EditorNormal = (props) => (
+    <Editor children={[
+        <>
+            <EditorToolbar resizable>
+                <ButtonGroup>
+                    <Button icon="undo"></Button>
+                    <Button icon="redo"></Button>
+                </ButtonGroup>
+                <Button icon="more-vertical" className="k-toolbar-overflow-button" fillMode="flat" rounded={null}></Button>
+            </EditorToolbar>
+            <EditorContent>
+                <iframe className="k-iframe" frameBorder="0" src="editor-iFrameContent.html"></iframe>
+            </EditorContent>
+        </>
+    ]}
+    {...props}>
+    </Editor>
+);

package/src/editor/tests/editor.tsx

@@ -31,18 +31,7 @@ export default () =>(
             <span>Editor with iFrame; responsive toolbar</span>
             <span>Editor without iFrame; responsive toolbar</span>
             <section>
-                <EditorNormal style={{ height: "300px" }}>
-                    <EditorToolbar resizable>
-                        <ButtonGroup>
-                            <Button icon="undo"></Button>
-                            <Button icon="redo"></Button>
-                        </ButtonGroup>
-                        <Button icon="more-vertical" className="k-toolbar-overflow-button" fillMode="flat" rounded={null}></Button>
-                    </EditorToolbar>
-                    <EditorContent>
-                        <iframe className="k-iframe" frameBorder="0" src="editor-iFrameContent.html"></iframe>
-                    </EditorContent>
-                </EditorNormal>
+                <EditorNormal style={{ height: "300px" }}/>
             </section>
             <section>
                 <EditorNormal style={{ height: "300px" }}>

package/src/expansion-panel/expansion-panel.spec.tsx

@@ -84,3 +84,5 @@ ExpansionPanel.states = states;
 ExpansionPanel.options = options;
 ExpansionPanel.className = EXPANSION_PANEL_CLASSNAME;
 ExpansionPanel.defaultProps = defaultProps;
+
+export default ExpansionPanel;

package/src/expansion-panel/index.ts

@@ -1 +1,3 @@
 export * from './expansion-panel.spec';
+export * from './templates/expansion-panel-normal';
+export * from './templates/expansion-panel-expanded';

package/src/expansion-panel/templates/expansion-panel-expanded.tsx

@@ -0,0 +1,14 @@
+import ExpansionPanel from "../expansion-panel.spec";
+
+export const ExpansionPanelExpanded = (props) => (
+    <ExpansionPanel
+        expanded
+        children={[
+            <span>
+                Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry&apos;s standard dummy text.
+            </span>
+        ]}
+        {...props}
+    >
+    </ExpansionPanel>
+);

package/src/expansion-panel/templates/expansion-panel-normal.tsx

@@ -0,0 +1,13 @@
+import ExpansionPanel from "../expansion-panel.spec";
+
+export const ExpansionPanelNormal = (props) => (
+    <ExpansionPanel
+        children={[
+            <span>
+                Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry&apos;s standard dummy text.
+            </span>
+        ]}
+        {...props}
+    >
+    </ExpansionPanel>
+);

package/src/expansion-panel/tests/expansion-panel-rtl.tsx

@@ -1,59 +1,29 @@
-import { ExpansionPanel } from '../../expansion-panel';
-
+import { ExpansionPanel, ExpansionPanelNormal, ExpansionPanelExpanded } from '../../expansion-panel';
 
 export default () =>(
     <>
-        <div id="test-area">
-            <ExpansionPanel title="Collapsed panel" subtitle="South America" dir="rtl"></ExpansionPanel>
-
-            <ExpansionPanel title="Expanded panel" subtitle="South America" expanded dir="rtl" >
-                <span>
-                    Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry&apos;s standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.
-                </span>
-            </ExpansionPanel>
-
-            <ExpansionPanel title="Expanded Focused panel" subtitle="South America" expanded focus dir="rtl" >
-                <span>
-                    Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry&apos;s standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.
-                </span>
-            </ExpansionPanel>
-
-            <ExpansionPanel title="Collapsed panel" subtitle="South America" dir="rtl" >
-                <span>
-                    Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry&apos;s standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.
-                </span>
-            </ExpansionPanel>
-
-            <ExpansionPanel title="Focus state" subtitle="South America" focus dir="rtl" >
-                <span>
-                    Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry&apos;s standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.
-                </span>
-            </ExpansionPanel>
-
-            <ExpansionPanel title="Hover state" subtitle="South America" hover dir="rtl" >
-                <span>
-                    Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry&apos;s standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.
-                </span>
-            </ExpansionPanel>
-
-            <ExpansionPanel title="Hover & Focus state" subtitle="South America" hover focus dir="rtl" >
-                <span>
-                    Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry&apos;s standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.
-                </span>
-            </ExpansionPanel>
-
-            <ExpansionPanel title="Disabled panel" subtitle="South America" disabled dir="rtl" >
-                <span>
-                    Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry&apos;s standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.
-                </span>
-            </ExpansionPanel>
-
-            <ExpansionPanel title="Content with fixed height" subtitle="South America" expanded dir="rtl" contentStyle={ { height: "100px" } } >
-                <div style={ { height: "100%", overflow: "auto" } }>
-                    Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry&apos;s standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.
-                </div>
-            </ExpansionPanel>
-
+        <div id="test-area" className="k-d-grid k-grid-cols-2">
+            <div>
+                {[ 'normal', ...ExpansionPanel.states ].map((state) => (
+                    <ExpansionPanelExpanded { ...{ [state]: true }} title={"Expanded panel - " + state} subtitle="Subtitle" dir="rtl" />
+                ))}
+
+                <ExpansionPanelExpanded title="Expanded panel - hover & focus" hover focus subtitle="Subtitle" dir="rtl" />
+            </div>
+
+            <div>
+                {[ 'normal', ...ExpansionPanel.states ].map((state) => (
+                    <ExpansionPanelNormal { ...{ [state]: true }} title={"Collapsed panel - " + state} subtitle="Subtitle" dir="rtl" />
+                ))}
+
+                <ExpansionPanelNormal title="Collapsed panel - hover & focus" hover focus subtitle="Subtitle" dir="rtl" />
+
+                <ExpansionPanelExpanded title="Content with fixed height" subtitle="Subtitle" contentStyle={ { height: "100px" } } dir="rtl">
+                    <div style={ { height: "100%", overflow: "auto" } }>
+                        Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry&apos;s standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.
+                    </div>
+                </ExpansionPanelExpanded>
+            </div>
         </div>
     </>
 );

package/src/expansion-panel/tests/expansion-panel.tsx

@@ -1,58 +1,29 @@
-import { ExpansionPanel } from '../../expansion-panel';
-
+import { ExpansionPanel, ExpansionPanelNormal, ExpansionPanelExpanded } from '../../expansion-panel';
 
 export default () =>(
     <>
-        <div id="test-area">
-            <ExpansionPanel title="Collapsed panel" subtitle="South America"></ExpansionPanel>
-
-            <ExpansionPanel title="Expanded panel" subtitle="South America" expanded >
-                <span>
-                    Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry&apos;s standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.
-                </span>
-            </ExpansionPanel>
-
-            <ExpansionPanel title="Expanded Focused panel" subtitle="South America" expanded focus >
-                <span>
-                    Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry&apos;s standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.
-                </span>
-            </ExpansionPanel>
-
-            <ExpansionPanel title="Collapsed panel" subtitle="South America" >
-                <span>
-                    Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry&apos;s standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.
-                </span>
-            </ExpansionPanel>
-
-            <ExpansionPanel title="Focus state" subtitle="South America" focus >
-                <span>
-                    Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry&apos;s standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.
-                </span>
-            </ExpansionPanel>
-
-            <ExpansionPanel title="Hover state" subtitle="South America" hover >
-                <span>
-                    Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry&apos;s standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.
-                </span>
-            </ExpansionPanel>
-
-            <ExpansionPanel title="Hover & Focus state" subtitle="South America" hover focus >
-                <span>
-                    Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry&apos;s standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.
-                </span>
-            </ExpansionPanel>
-
-            <ExpansionPanel title="Disabled panel" subtitle="South America" disabled >
-                <span>
-                    Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry&apos;s standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.
-                </span>
-            </ExpansionPanel>
-
-            <ExpansionPanel title="Content with fixed height" subtitle="South America" expanded contentStyle={ { height: "100px" } } >
-                <div style={ { height: "100%", overflow: "auto" } }>
-                    Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry&apos;s standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.
-                </div>
-            </ExpansionPanel>
+        <div id="test-area" className="k-d-grid k-grid-cols-2">
+            <div>
+                {[ 'normal', ...ExpansionPanel.states ].map((state) => (
+                    <ExpansionPanelExpanded { ...{ [state]: true }} title={"Expanded panel - " + state} subtitle="Subtitle" />
+                ))}
+
+                <ExpansionPanelExpanded title="Expanded panel - hover & focus" hover focus subtitle="Subtitle" />
+            </div>
+
+            <div>
+                {[ 'normal', ...ExpansionPanel.states ].map((state) => (
+                    <ExpansionPanelNormal { ...{ [state]: true }} title={"Collapsed panel - " + state} subtitle="Subtitle" />
+                ))}
+
+                <ExpansionPanelNormal title="Collapsed panel - hover & focus" hover focus subtitle="Subtitle" />
+
+                <ExpansionPanelExpanded title="Content with fixed height" subtitle="Subtitle" contentStyle={ { height: "100px" } } >
+                    <div style={ { height: "100%", overflow: "auto" } }>
+                        Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry&apos;s standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.
+                    </div>
+                </ExpansionPanelExpanded>
+            </div>
         </div>
     </>
 );

package/src/filter/index.ts

@@ -3,3 +3,4 @@ export * from './filter-toolbar';
 export * from './filter-lines';
 export * from './filter-preview';
 export * from './filter-item';
+export * from './templates/filter-normal';

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

@@ -0,0 +1,95 @@
+import { Filter, FilterToolbar, FilterLines, FilterPreview, FilterItem } from "../../filter";
+import { Button } from '../../button';
+import { ButtonGroup } from '../../button-group';
+import { DatePicker } from '../../datepicker';
+import { DropdownList } from '../../dropdownlist';
+import { NumericTextbox } from '../../numerictextbox';
+import { Textbox } from '../../textbox';
+import { Toolbar, ToolbarItem } from '../../toolbar';
+
+export const FilterNormal = (props) => (
+    <Filter
+        children={[
+            <FilterToolbar>
+                <Toolbar>
+                    <ButtonGroup>
+                        <Button selected>And</Button>
+                        <Button>Or</Button>
+                    </ButtonGroup>
+                    <Button icon="filter-add-expression">Add Expression</Button>
+                    <Button icon="filter-add-group">Add Group</Button>
+                    <Button fillMode="flat" icon="x"></Button>
+                </Toolbar>
+            </FilterToolbar>,
+            <FilterLines>
+                <FilterItem>
+                    <FilterToolbar>
+                        <Toolbar>
+                            <ToolbarItem className="k-filter-field">
+                                <DropdownList value="Name" />
+                            </ToolbarItem>
+                            <ToolbarItem className="k-filter-operator">
+                                <DropdownList value="Is equal to" />
+                            </ToolbarItem>
+                            <ToolbarItem className="k-filter-value">
+                                <Textbox placeholder="James"/>
+                            </ToolbarItem>
+                            <Button fillMode="flat" icon="x"></Button>
+                        </Toolbar>
+                    </FilterToolbar>
+                </FilterItem>
+                <FilterItem>
+                    <FilterToolbar>
+                        <Toolbar>
+                            <ToolbarItem className="k-filter-field">
+                                <DropdownList value="Price" />
+                            </ToolbarItem>
+                            <ToolbarItem className="k-filter-operator">
+                                <DropdownList value="Is greater than" />
+                            </ToolbarItem>
+                            <ToolbarItem className="k-filter-value">
+                                <NumericTextbox placeholder="100,00"/>
+                            </ToolbarItem>
+                            <Button fillMode="flat" icon="x"></Button>
+                        </Toolbar>
+                    </FilterToolbar>
+                </FilterItem>
+                <FilterItem>
+                    <FilterToolbar>
+                        <Toolbar>
+                            <ToolbarItem className="k-filter-field">
+                                <DropdownList value="First Ordered" />
+                            </ToolbarItem>
+                            <ToolbarItem className="k-filter-operator">
+                                <DropdownList value="Is before" />
+                            </ToolbarItem>
+                            <ToolbarItem className="k-filter-value">
+                                <DatePicker placeholder="1/21/2021" />
+                            </ToolbarItem>
+                            <Button fillMode="flat" icon="x"></Button>
+                        </Toolbar>
+                    </FilterToolbar>
+                </FilterItem>
+            </FilterLines>,
+            <FilterPreview
+                fields={[
+                    { name: "bracket", value: "(" },
+                    { name: "field", value: "Price" },
+                    { name: "criteria", value: "Is greater than" },
+                    { name: "value", value: "'100,00'" },
+                    { name: "operator", value: "AND" },
+                    { name: "bracket", value: "(" },
+                    { name: "bracket", value: "(" },
+                    { name: "field", value: "FirstOrdered" },
+                    { name: "criteria", value: "Is before" },
+                    { name: "value", value: "'Thursday Jan 21 2021'" },
+                    { name: "bracket", value: ")" },
+                    { name: "bracket", value: ")" },
+                    { name: "bracket", value: ")" },
+                ]}>
+            </FilterPreview>
+        ]}
+        {...props}
+    >
+    </Filter>
+);

package/src/filter/tests/filter.tsx

@@ -5,14 +5,14 @@ import { DropdownList } from '../../dropdownlist';
 import { NumericTextbox } from '../../numerictextbox';
 import { Textbox } from '../../textbox';
 import { Toolbar, ToolbarItem } from '../../toolbar';
-import { Filter, FilterToolbar, FilterLines, FilterPreview, FilterItem } from '../../filter';
+import { FilterNormal, FilterToolbar, FilterLines, FilterPreview, FilterItem } from '../../filter';
 
 
 export default () =>(
     <>
         <div id="test-area" className="k-d-grid">
 
-            <Filter>
+            <FilterNormal>
                 <FilterToolbar>
                     <Toolbar focus>
                         <ButtonGroup>
@@ -152,7 +152,7 @@ export default () =>(
                         { name: "bracket", value: ")" },
                     ]}>
                 </FilterPreview>
-            </Filter>
+            </FilterNormal>
         </div>
     </>
 );

package/src/floating-label/templates/floating-label-normal.tsx

@@ -1,7 +1,13 @@
 import FloatingLabel from "../floating-label.spec";
+import { Textbox } from '../../textbox';
 
-export const FloatingLabelNormal = ({ children, ...other }) => (
-    <FloatingLabel {...other}>
-        {children}
+export const FloatingLabelNormal = (props) => (
+    <FloatingLabel
+        label="Label"
+        children={[
+            <Textbox />
+        ]}
+        {...props}
+    >
     </FloatingLabel>
 );

package/src/index.ts

@@ -92,7 +92,7 @@ export * from './card/index';
 export * from './expansion-panel/index';
 // export * from './panelbar/index';
 // export * from './splitter/index';
-// export * from './tile-layout/index';
+export * from './tilelayout/index';
 
 // Data management
 // export * from './grid/index';
@@ -100,10 +100,19 @@ export * from './listview/index';
 // export * from './spreadsheet/index';
 // export * from './pivotgrid/index';
 // export * from './treelist/index';
-// export * from './filter/index';
+export * from './filter/index';
 // export * from './filemanager/index';
 // export * from './taskboard/index';
 
+// Misc
+// export * from './adaptive/index''
+// export * from './chat/index';
+// export * from './mediaplayer/index';
+// export * from './timeline/index';
+// export * from './pdf-viewer/index';
+// export * from './scroller/index';
+export * from './scrollview/index';
+
 // Editors
 export * from './editor/index';
 

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

@@ -1,3 +1,13 @@
-import { ListView } from '../../listview';
+import { ListView, ListViewItem } from '../../listview';
 
-export const ListViewNormal = (props) => <ListView {...props} />;
+export const ListViewNormal = (props) => (
+    <ListView children={[
+        <>
+            <ListViewItem><div>Listview Item</div></ListViewItem>
+            <ListViewItem><div>Listview Item</div></ListViewItem>
+            <ListViewItem><div>Listview Item</div></ListViewItem>
+        </>
+    ]}
+    {...props}>
+    </ListView>
+);

package/src/popover/index.ts

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

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

@@ -0,0 +1,7 @@
+import Popover from "../popover.spec";
+
+export const PopoverNormal = ({ children, ...other }) => (
+    <Popover {...other}>
+        {children}
+    </Popover>
+);