@progress/kendo-themes-html 7.0.2-dev.4 → 7.0.2

package/src/window/tests/window-theme-colors.tsx

@@ -1,4 +1,4 @@
-import { Window } from '..';
+import { Window, WindowNormal } from '..';
 
 const style = `
     .k-window {
@@ -10,23 +10,11 @@ export default () =>(
     <>
         <style>{style}</style>
         <div id="test-area" className="k-d-grid k-grid-cols-2">
-
-            <section>
-                <Window title="Window" actions={[ 'window-minimize', 'window', 'x' ]}>Window with default theme color</Window>
-            </section>
-
-            <section>
-                <Window themeColor="primary" title="Window" actions={[ 'window-minimize', 'window', 'x' ]}>Window with primary theme color</Window>
-            </section>
-
-            <section>
-                <Window themeColor="dark" title="Window" actions={[ 'window-minimize', 'window', 'x' ]}>Window with dark theme color</Window>
-            </section>
-
-            <section>
-                <Window themeColor="light" title="Window" actions={[ 'window-minimize', 'window', 'x' ]}>Window with light theme color</Window>
-            </section>
-
+            {[ undefined ,...Window.options.themeColor ].map((color) => (
+                <section>
+                    <WindowNormal themeColor={color}>Window with {color ? color : "no"} theme color</WindowNormal>
+                </section>
+            ))}
         </div>
     </>
 );

package/src/window/tests/window.tsx

@@ -1,4 +1,4 @@
-import { Window } from '../../window';
+import { WindowNormal } from '..';
 
 const style = `
     .k-window {
@@ -12,23 +12,23 @@ export default () =>(
         <div id="test-area" className="k-d-grid k-grid-cols-2">
 
             <section>
-                <Window title="Window" actions={[ 'window-minimize', 'window', 'x' ]}>Window content</Window>
+                <WindowNormal>Window content</WindowNormal>
             </section>
 
             <section>
-                <Window title="" actions={[ 'window-minimize', 'window', 'x' ]}>Window with no title specified</Window>
+                <WindowNormal title="">Window with no title specified</WindowNormal>
             </section>
 
             <section>
-                <Window title="">Window with empty title and no actions</Window>
+                <WindowNormal title="" actions={undefined}>Window with empty title and no actions</WindowNormal>
             </section>
 
             <section>
-                <Window>Window without a title</Window>
+                <WindowNormal title={undefined} actions={undefined}>Window without a title</WindowNormal>
             </section>
 
             <section>
-                <Window title="Window minimized" actions={[ 'window-minimize', 'window', 'x' ]} minimized>Window content</Window>
+                <WindowNormal title="Window minimized" minimized>Window content</WindowNormal>
             </section>
         </div>
     </>

package/src/fab/tests/fab-size.tsx

@@ -1,109 +0,0 @@
-import { FloatingActionButton } from '../../fab';
-
-
-const styles = `
-    #test-area {
-        max-width: 1200px;
-        grid-template-columns: auto repeat(3, 1fr);
-        align-items: center;
-    }
-`;
-
-export default () =>(
-    <>
-        <style>{styles}</style>
-        <div id="test-area" className="k-d-grid">
-
-            <span><small>rounded / size</small></span>
-            <span>small</span>
-            <span>medium</span>
-            <span>large</span>
-
-            <span>null</span>
-            <span className="k-d-flex k-gap-1">
-                <FloatingActionButton rounded={null} size="small" text="Create" />
-                <FloatingActionButton icon="plus" rounded={null} size="small" text="Create" />
-                <FloatingActionButton icon="plus" rounded={null} size="small" />
-            </span>
-            <span className="k-d-flex k-gap-1">
-                <FloatingActionButton rounded={null} size="medium" text="Create" />
-                <FloatingActionButton icon="plus" rounded={null} size="medium" text="Create" />
-                <FloatingActionButton icon="plus" rounded={null} size="medium" />
-            </span>
-            <span className="k-d-flex k-gap-1">
-                <FloatingActionButton rounded={null} size="large" text="Create" />
-                <FloatingActionButton icon="plus" rounded={null} size="large" text="Create" />
-                <FloatingActionButton icon="plus" rounded={null} size="large" />
-            </span>
-
-            <span>small</span>
-            <span className="k-d-flex k-gap-1">
-                <FloatingActionButton rounded="small" size="small" text="Create" />
-                <FloatingActionButton icon="plus" rounded="small" size="small" text="Create" />
-                <FloatingActionButton icon="plus" rounded="small" size="small" />
-            </span>
-            <span className="k-d-flex k-gap-1">
-                <FloatingActionButton rounded="small" size="medium" text="Create" />
-                <FloatingActionButton icon="plus" rounded="small" size="medium" text="Create" />
-                <FloatingActionButton icon="plus" rounded="small" size="medium" />
-            </span>
-            <span className="k-d-flex k-gap-1">
-                <FloatingActionButton rounded="small" size="large" text="Create" />
-                <FloatingActionButton icon="plus" rounded="small" size="large" text="Create" />
-                <FloatingActionButton icon="plus" rounded="small" size="large" />
-            </span>
-
-            <span>medium</span>
-            <span className="k-d-flex k-gap-1">
-                <FloatingActionButton rounded="medium" size="small" text="Create" />
-                <FloatingActionButton icon="plus" rounded="medium" size="small" text="Create" />
-                <FloatingActionButton icon="plus" rounded="medium" size="small" />
-            </span>
-            <span className="k-d-flex k-gap-1">
-                <FloatingActionButton rounded="medium" size="medium" text="Create" />
-                <FloatingActionButton icon="plus" rounded="medium" size="medium" text="Create" />
-                <FloatingActionButton icon="plus" rounded="medium" size="medium" />
-            </span>
-            <span className="k-d-flex k-gap-1">
-                <FloatingActionButton rounded="medium" size="large" text="Create" />
-                <FloatingActionButton icon="plus" rounded="medium" size="large" text="Create" />
-                <FloatingActionButton icon="plus" rounded="medium" size="large" />
-            </span>
-
-            <span>large</span>
-            <span className="k-d-flex k-gap-1">
-                <FloatingActionButton rounded="large" size="small" text="Create" />
-                <FloatingActionButton icon="plus" rounded="large" size="small" text="Create" />
-                <FloatingActionButton icon="plus" rounded="large" size="small" />
-            </span>
-            <span className="k-d-flex k-gap-1">
-                <FloatingActionButton rounded="large" size="medium" text="Create" />
-                <FloatingActionButton icon="plus" rounded="large" size="medium" text="Create" />
-                <FloatingActionButton icon="plus" rounded="large" size="medium" />
-            </span>
-            <span className="k-d-flex k-gap-1">
-                <FloatingActionButton rounded="large" size="large" text="Create" />
-                <FloatingActionButton icon="plus" rounded="large" size="large" text="Create" />
-                <FloatingActionButton icon="plus" rounded="large" size="large" />
-            </span>
-
-            <span>full</span>
-            <span className="k-d-flex k-gap-1">
-                <FloatingActionButton rounded="full" size="small" text="Create" />
-                <FloatingActionButton icon="plus" rounded="full" size="small" text="Create" />
-                <FloatingActionButton icon="plus" rounded="full" size="small" />
-            </span>
-            <span className="k-d-flex k-gap-1">
-                <FloatingActionButton rounded="full" size="medium" text="Create" />
-                <FloatingActionButton icon="plus" rounded="full" size="medium" text="Create" />
-                <FloatingActionButton icon="plus" rounded="full" size="medium" />
-            </span>
-            <span className="k-d-flex k-gap-1">
-                <FloatingActionButton rounded="full" size="large" text="Create" />
-                <FloatingActionButton icon="plus" rounded="full" size="large" text="Create" />
-                <FloatingActionButton icon="plus" rounded="full" size="large" />
-            </span>
-
-        </div>
-    </>
-);

package/src/multiselecttree/tests/multiselecttree-size.tsx

@@ -1,50 +0,0 @@
-import { Chip, ChipAction } from '../../chip';
-import { MultiSelectTree } from '../../multiselecttree';
-
-
-const styles = `
-    #test-area {
-        max-width: 600px;
-        grid-template-columns: 120px repeat(1, 1fr);
-    }
-`;
-
-export default () =>(
-    <>
-        <style>{styles}</style>
-        <div id="test-area" className="k-d-grid k-grid-cols-3">
-            <span>small</span>
-            <MultiSelectTree
-                size="small"
-                tags={(
-                    <>
-                        <Chip text="Chip Text" size="small" actions={ <ChipAction type="remove"/> } />
-                        <Chip text="Chip Text" size="small" actions={ <ChipAction type="remove"/> } />
-                    </>
-                )}
-            />
-
-            <span>medium</span>
-            <MultiSelectTree
-                size="medium"
-                tags={(
-                    <>
-                        <Chip text="Chip Text" size="medium" actions={ <ChipAction type="remove"/> } />
-                        <Chip text="Chip Text" size="medium" actions={ <ChipAction type="remove"/> } />
-                    </>
-                )}
-            />
-
-            <span>large</span>
-            <MultiSelectTree
-                size="large"
-                tags={(
-                    <>
-                        <Chip text="Chip Text" size="large" actions={ <ChipAction type="remove"/> } />
-                        <Chip text="Chip Text" size="large" actions={ <ChipAction type="remove"/> } />
-                    </>
-                )}
-            />
-        </div>
-    </>
-);

package/src/multiselecttree/tests/multiselecttree.tsx

@@ -1,175 +0,0 @@
-import { Chip, ChipAction } from '../../chip';
-import { MultiSelectTree } from '../../multiselecttree';
-
-
-const styles = `
-    #test-area {
-        grid-template-columns: 160px repeat(2, 300px);
-    }
-`;
-
-export default () =>(
-    <>
-        <style>{styles}</style>
-        <div id="test-area" className="k-d-grid">
-
-            <span></span>
-            <span>MultiSelectTree</span>
-            <span>MultiSelectTree RTL</span>
-
-            <div>Empty</div>
-            <div>
-                <MultiSelectTree placeholder="MultiSelectTree..." />
-            </div>
-            <div dir="rtl">
-                <MultiSelectTree placeholder="MultiSelectTree..." />
-            </div>
-
-            <div>Arrow button</div>
-            <div>
-                <MultiSelectTree showArrowButton placeholder="MultiSelectTree with arrow button" />
-            </div>
-            <div dir="rtl">
-                <MultiSelectTree showArrowButton placeholder="MultiSelectTree with arrow button" />
-            </div>
-
-            <div>Normal</div>
-            <div>
-                <MultiSelectTree
-                    tags={(
-                        <Chip text="Normal" actions={ <ChipAction type="remove"/> } />
-                    )}
-                />
-            </div>
-            <div dir="rtl">
-                <MultiSelectTree
-                    tags={(
-                        <Chip text="Normal" actions={ <ChipAction type="remove"/> } />
-                    )}
-                />
-            </div>
-
-            <div>Hover</div>
-            <div>
-                <MultiSelectTree
-                    tags={(
-                        <Chip text="Hover" actions={ <ChipAction type="remove"/> } />
-                    )}
-                    hover
-                />
-            </div>
-            <div dir="rtl">
-                <MultiSelectTree
-                    tags={(
-                        <Chip text="Hover" actions={ <ChipAction type="remove"/> } />
-                    )}
-                    hover
-                />
-            </div>
-
-            <div>Focus</div>
-            <div>
-                <MultiSelectTree
-                    tags={(
-                        <Chip text="Focus" actions={ <ChipAction type="remove"/> } />
-                    )}
-                    focus
-                />
-            </div>
-            <div dir="rtl">
-                <MultiSelectTree
-                    tags={(
-                        <Chip text="Focus" actions={ <ChipAction type="remove"/> } />
-                    )}
-                    focus
-                />
-            </div>
-
-            <div>Disabled</div>
-            <div>
-                <MultiSelectTree
-                    tags={(
-                        <Chip text="Disabled" actions={ <ChipAction type="remove"/> } />
-                    )}
-                    disabled
-                />
-            </div>
-            <div dir="rtl">
-                <MultiSelectTree
-                    tags={(
-                        <Chip text="Disabled" actions={ <ChipAction type="remove"/> } />
-                    )}
-                    disabled
-                />
-            </div>
-
-            <div>Invalid</div>
-            <div>
-                <MultiSelectTree
-                    tags={(
-                        <Chip text="Invalid" actions={ <ChipAction type="remove"/> } />
-                    )}
-                    invalid
-                />
-            </div>
-            <div dir="rtl">
-                <MultiSelectTree
-                    tags={(
-                        <Chip text="Invalid" actions={ <ChipAction type="remove"/> } />
-                    )}
-                    invalid
-                />
-            </div>
-
-            <div>Invalid + Focus</div>
-            <div>
-                <MultiSelectTree
-                    tags={(
-                        <Chip text="Invalid + Focus" actions={ <ChipAction type="remove"/> } />
-                    )}
-                    invalid
-                    focus
-                />
-            </div>
-            <div dir="rtl">
-                <MultiSelectTree
-                    tags={(
-                        <Chip text="Invalid + Focus" actions={ <ChipAction type="remove"/> } />
-                    )}
-                    invalid
-                    focus
-                />
-            </div>
-
-            <div>Loading</div>
-            <div>
-                <MultiSelectTree placeholder="Loading..." loading/>
-            </div>
-            <div dir="rtl">
-                <MultiSelectTree placeholder="Loading..." loading />
-            </div>
-
-            <div>Multi Line + Overflow</div>
-            <div>
-                <MultiSelectTree
-                    tags={(
-                        <>
-                            <Chip text="Multi-line" actions={ <ChipAction type="remove"/> } />
-                            <Chip text="Multi-line + Overflow with a very very very long text" actions={ <ChipAction type="remove"/> } />
-                        </>
-                    )}
-                />
-            </div>
-            <div dir="rtl">
-                <MultiSelectTree
-                    tags={(
-                        <>
-                            <Chip text="Multi-line" actions={ <ChipAction type="remove"/> } />
-                            <Chip text="Multi-line + Overflow with a very very very long text" actions={ <ChipAction type="remove"/> } />
-                        </>
-                    )}
-                />
-            </div>
-        </div>
-    </>
-);