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

package/src/grid/tests/grid.tsx

@@ -1,6 +1,6 @@
 import { Icon } from '../../icon';
 import { Pager } from '../../pager';
-import { Skeleton } from '../../skeleton';
+import { SkeletonNormal } from '../../skeleton';
 
 
 export default () =>(
@@ -62,11 +62,11 @@ export default () =>(
                                 </tr>
                                 <tr className="k-table-row k-table-alt-row k-alt">
                                     <td className="k-table-td">4</td>
-                                    <td className="k-table-td"><Skeleton animation={false} /></td>
+                                    <td className="k-table-td"><SkeletonNormal animation={false} /></td>
                                 </tr>
                                 <tr className="k-table-row">
                                     <td className="k-table-td">5</td>
-                                    <td className="k-table-td"><Skeleton animation={false} /></td>
+                                    <td className="k-table-td"><SkeletonNormal animation={false} /></td>
                                 </tr>
                             </tbody>
                         </table>

package/src/imageeditor/tests/imageeditor-crop-pane.tsx

@@ -4,7 +4,7 @@ import { DropdownList } from '../../dropdownlist';
 import { NumericTextbox } from '../../numerictextbox';
 import { Toolbar, ToolbarSeparator } from '../../toolbar';
 import { ButtonGroup } from '../../button-group';
-import { Form, FormField, Fieldset } from '../../form';
+import { FormNormal, FormField, Fieldset } from '../../form';
 
 
 export default () =>(
@@ -57,7 +57,7 @@ export default () =>(
 
                     {/* Crop Pane */}
                     <div className="k-imageeditor-action-pane">
-                        <Form tag="div" className="k-imageeditor-pane-form" formButtons={
+                        <FormNormal tag="div" className="k-imageeditor-pane-form" formButtons={
                             <>
                                 <Button themeColor="primary">Confirm</Button>
                                 <Button>Cancel</Button>
@@ -95,7 +95,7 @@ export default () =>(
                                     editor={ <Checkbox /> }
                                 />
                             </Fieldset>
-                        </Form>
+                        </FormNormal>
                     </div>
                 </div>
 

package/src/imageeditor/tests/imageeditor-resize-pane.tsx

@@ -3,7 +3,7 @@ import { Checkbox } from '../../checkbox';
 import { DropdownList } from '../../dropdownlist';
 import { NumericTextbox } from '../../numerictextbox';
 import { Toolbar, ToolbarSeparator } from '../../toolbar';
-import { Form, FormField, Fieldset } from '../../form';
+import { FormNormal, FormField, Fieldset } from '../../form';
 
 
 export default () =>(
@@ -42,7 +42,7 @@ export default () =>(
                     </div>
 
                     <div className="k-imageeditor-action-pane">
-                        <Form tag="div" className="k-imageeditor-pane-form" formButtons={
+                        <FormNormal tag="div" className="k-imageeditor-pane-form" formButtons={
                             <>
                                 <Button themeColor="primary">Confirm</Button>
                                 <Button>Cancel</Button>
@@ -75,7 +75,7 @@ export default () =>(
                                     editor={ <Checkbox /> }
                                 />
                             </Fieldset>
-                        </Form>
+                        </FormNormal>
                     </div>
 
                 </div>

package/src/loader/index.ts

@@ -1,2 +1,6 @@
 export * from './loader.spec';
 export * from './loader-container.spec';
+export * from './templates/loader-normal';
+export * from './templates/loader-infinite';
+export * from './templates/loader-converging';
+export * from './templates/loader-container-normal';

package/src/loader/templates/loader-container-normal.tsx

@@ -0,0 +1,5 @@
+import { LoaderContainer } from "..";
+
+export const LoaderContainerNormal = (props) => (
+    <LoaderContainer {...props} />
+);

package/src/loader/templates/loader-converging.tsx

@@ -0,0 +1,5 @@
+import { Loader } from "..";
+
+export const LoaderConverging = (props) => (
+    <Loader animation="converging-spinner" {...props} />
+);

package/src/loader/templates/loader-infinite.tsx

@@ -0,0 +1,5 @@
+import { Loader } from "..";
+
+export const LoaderInfinite = (props) => (
+    <Loader animation="infinite-spinner" {...props} />
+);

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

@@ -0,0 +1,5 @@
+import { Loader } from "..";
+
+export const LoaderNormal = (props) => (
+    <Loader {...props} />
+);

package/src/loader/tests/loader-colors.tsx

@@ -0,0 +1,34 @@
+import { Loader, LoaderConverging, LoaderInfinite, LoaderNormal } from '..';
+
+
+export default () =>(
+    <>
+        <div id="test-area" className="k-d-grid k-grid-cols-4">
+
+            <span></span>
+            <span className="col">Pulsing 2</span>
+            <span className="col">Spinner 3</span>
+            <span className="col">Spinner 4</span>
+
+            {Loader.options.themeColor.map((color) => (
+                <>
+                    <span>{color}</span>
+
+                    <span>
+                        <LoaderNormal size={'large'} themeColor={color} />
+                    </span>
+
+                    <span>
+                        <LoaderInfinite size={'large'} themeColor={color} />
+                    </span>
+
+                    <span>
+                        <LoaderConverging size={'large'} themeColor={color} />
+                    </span>
+                </>
+
+            ))}
+
+        </div>
+    </>
+);

package/src/loader/tests/loader-container-colors.tsx

@@ -1,4 +1,4 @@
-import { LoaderContainer } from '../../loader';
+import { LoaderContainer, LoaderContainerNormal } from '..';
 
 
 const styles = `
@@ -12,57 +12,16 @@ const styles = `
 export default () =>(
     <>
         <style>{styles}</style>
-        <div id="test-area" className="k-d-grid k-grid-cols-2">
-
-            <span>Primary</span>
-            <span className="example">
-                <LoaderContainer size={'large'} position={'top'} themeColor={'primary'} overlay={'dark'} panel={true} />
-            </span>
-
-            <span>Secondary</span>
-            <span className="example">
-                <LoaderContainer size={'large'} position={'top'} themeColor={'secondary'} overlay={'dark'} panel={true} />
-            </span>
-
-            <span>Tertiary</span>
-            <span className="example">
-                <LoaderContainer size={'large'} position={'top'} themeColor={'tertiary'} overlay={'dark'} panel={true} />
-            </span>
-
-            <span>Info</span>
-            <span className="example">
-                <LoaderContainer size={'large'} position={'top'} themeColor={'info'} overlay={'dark'} panel={true} />
-            </span>
-
-            <span>Success</span>
-            <span className="example">
-                <LoaderContainer size={'large'} position={'top'} themeColor={'success'} overlay={'dark'} panel={true} />
-            </span>
-
-            <span>Warning</span>
-            <span className="example">
-                <LoaderContainer size={'large'} position={'top'} themeColor={'warning'} overlay={'dark'} panel={true} />
-            </span>
-
-            <span>Error</span>
-            <span className="example">
-                <LoaderContainer size={'large'} position={'top'} themeColor={'error'} overlay={'dark'} panel={true} />
-            </span>
-
-            <span>Dark</span>
-            <span className="example">
-                <LoaderContainer size={'large'} position={'top'} themeColor={'dark'} overlay={'dark'} panel={true} />
-            </span>
-
-            <span>Light</span>
-            <span className="example">
-                <LoaderContainer size={'large'} position={'top'} themeColor={'light'} overlay={'dark'} panel={true} />
-            </span>
-
-            <span>Inverse</span>
-            <span className="example">
-                <LoaderContainer size={'large'} position={'top'} themeColor={'inverse'} overlay={'dark'} panel={true} />
-            </span>
+        <div id="test-area" className="k-d-grid k-grid-cols-3">
+
+            {LoaderContainer.options.themeColor.map((color) => (
+                <>
+                    <span className="example">
+                        <span>{color}</span>
+                        <LoaderContainerNormal size={'large'} themeColor={color} panel={true} />
+                    </span>
+                </>
+            ))}
         </div>
     </>
 );

package/src/loader/tests/loader-container-overlay.tsx

@@ -1,4 +1,4 @@
-import { LoaderContainer } from '../../loader';
+import { LoaderContainerNormal } from '../../loader';
 
 
 const styles = `
@@ -21,20 +21,20 @@ export default () =>(
 
             <span>Panel</span>
             <span className="example">
-                <LoaderContainer size={'large'} position={'top'} themeColor={'primary'} overlay={'dark'} panel={true} />
+                <LoaderContainerNormal size={'large'} panel={true} />
             </span>
 
             <span className="example">
-                <LoaderContainer size={'large'} position={'top'} themeColor={'primary'} overlay={'light'} panel={true} />
+                <LoaderContainerNormal size={'large'} overlay={'light'} panel={true} />
             </span>
 
             <span>No Panel</span>
             <span className="example">
-                <LoaderContainer size={'large'} position={'top'} themeColor={'primary'} overlay={'dark'} />
+                <LoaderContainerNormal size={'large'}/>
             </span>
 
             <span className="example">
-                <LoaderContainer size={'large'} position={'top'} themeColor={'primary'} overlay={'light'} />
+                <LoaderContainerNormal size={'large'} overlay={'light'} />
             </span>
 
         </div>

package/src/loader/tests/loader-container.tsx

@@ -1,4 +1,4 @@
-import { LoaderContainer } from '../../loader';
+import { LoaderContainer, LoaderContainerNormal } from '../../loader';
 
 
 const styles = `
@@ -19,45 +19,26 @@ export default () =>(
             <span className="col">Medium</span>
             <span className="col">Large</span>
 
-
             <span>Top</span>
-            <span className="example">
-                <LoaderContainer size={'small'} position={'top'} themeColor={'primary'} overlay={'dark'} panel={true} />
-            </span>
-
-            <span className="example">
-                <LoaderContainer size={'medium'} position={'top'} themeColor={'primary'} overlay={'dark'} panel={true} />
-            </span>
-
-            <span className="example">
-                <LoaderContainer size={'large'} position={'top'} themeColor={'primary'} overlay={'dark'} panel={true} />
-            </span>
+            {LoaderContainer.options.size.map((size) => (
+                <span className="example">
+                    <LoaderContainerNormal size={size} panel={true} />
+                </span>
+            ))}
 
             <span>End</span>
-            <span className="example">
-                <LoaderContainer size={'small'} position={'end'} themeColor={'primary'} overlay={'dark'} panel={true} />
-            </span>
-
-            <span className="example">
-                <LoaderContainer size={'medium'} position={'end'} themeColor={'primary'} overlay={'dark'} panel={true} />
-            </span>
-
-            <span className="example">
-                <LoaderContainer size={'large'} position={'end'} themeColor={'primary'} overlay={'dark'} panel={true} />
-            </span>
+            {LoaderContainer.options.size.map((size) => (
+                <span className="example">
+                    <LoaderContainerNormal size={size} position={'end'} panel={true} />
+                </span>
+            ))}
 
             <span>Start</span>
-            <span className="example">
-                <LoaderContainer size={'small'} position={'start'} themeColor={'primary'} overlay={'dark'} panel={true} />
-            </span>
-
-            <span className="example">
-                <LoaderContainer size={'medium'} position={'start'} themeColor={'primary'} overlay={'dark'} panel={true} />
-            </span>
-
-            <span className="example">
-                <LoaderContainer size={'large'} position={'start'} themeColor={'primary'} overlay={'dark'} panel={true} />
-            </span>
+            {LoaderContainer.options.size.map((size) => (
+                <span className="example">
+                    <LoaderContainerNormal size={size} position={'start'} panel={true} />
+                </span>
+            ))}
         </div>
     </>
 );

package/src/loader/tests/loader.tsx

@@ -1,4 +1,4 @@
-import { Loader } from '../../loader';
+import { Loader, LoaderConverging, LoaderInfinite, LoaderNormal } from '..';
 
 
 export default () =>(
@@ -10,137 +10,23 @@ export default () =>(
             <span className="col">Spinner 3</span>
             <span className="col">Spinner 4</span>
 
+            {Loader.options.size.map((size) => (
+                <>
+                    <span>{size}</span>
+                    <span>
+                        <LoaderNormal size={size} />
+                    </span>
 
-            <span>Primary</span>
-            <span>
-                <Loader size={'large'} themeColor={'primary'} animation={'pulsing'} />
-            </span>
+                    <span>
+                        <LoaderInfinite size={size} />
+                    </span>
 
-            <span>
-                <Loader size={'large'} themeColor={'primary'} animation={'infinite-spinner'} />
-            </span>
-
-            <span>
-                <Loader size={'large'} themeColor={'primary'} animation={'converging-spinner'} />
-            </span>
-
-            <span>Secondary</span>
-            <span>
-                <Loader size={'large'} themeColor={'secondary'} animation={'pulsing'} />
-            </span>
-
-            <span>
-                <Loader size={'large'} themeColor={'secondary'} animation={'infinite-spinner'} />
-            </span>
-
-            <span>
-                <Loader size={'large'} themeColor={'secondary'} animation={'converging-spinner'} />
-            </span>
-
-            <span>Tertiary</span>
-            <span>
-                <Loader size={'large'} themeColor={'tertiary'} animation={'pulsing'} />
-            </span>
-
-            <span>
-                <Loader size={'large'} themeColor={'tertiary'} animation={'infinite-spinner'} />
-            </span>
-
-            <span>
-                <Loader size={'large'} themeColor={'tertiary'} animation={'converging-spinner'} />
-            </span>
-
-            <span>Info</span>
-            <span>
-                <Loader size={'large'} themeColor={'info'} animation={'pulsing'} />
-            </span>
-
-            <span>
-                <Loader size={'large'} themeColor={'info'} animation={'infinite-spinner'} />
-            </span>
-
-            <span>
-                <Loader size={'large'} themeColor={'info'} animation={'converging-spinner'} />
-            </span>
-
-            <span>Success</span>
-            <span>
-                <Loader size={'large'} themeColor={'success'} animation={'pulsing'} />
-            </span>
-
-            <span>
-                <Loader size={'large'} themeColor={'success'} animation={'infinite-spinner'} />
-            </span>
-
-            <span>
-                <Loader size={'large'} themeColor={'success'} animation={'converging-spinner'} />
-            </span>
-
-            <span>Warning</span>
-            <span>
-                <Loader size={'large'} themeColor={'warning'} animation={'pulsing'} />
-            </span>
-
-            <span>
-                <Loader size={'large'} themeColor={'warning'} animation={'infinite-spinner'} />
-            </span>
-
-            <span>
-                <Loader size={'large'} themeColor={'warning'} animation={'converging-spinner'} />
-            </span>
-
-            <span>Error</span>
-            <span>
-                <Loader size={'large'} themeColor={'error'} animation={'pulsing'} />
-            </span>
-
-            <span>
-                <Loader size={'large'} themeColor={'error'} animation={'infinite-spinner'} />
-            </span>
-
-            <span>
-                <Loader size={'large'} themeColor={'error'} animation={'converging-spinner'} />
-            </span>
-
-            <span>Dark</span>
-            <span>
-                <Loader size={'large'} themeColor={'dark'} animation={'pulsing'} />
-            </span>
-
-            <span>
-                <Loader size={'large'} themeColor={'dark'} animation={'infinite-spinner'} />
-            </span>
-
-            <span>
-                <Loader size={'large'} themeColor={'dark'} animation={'converging-spinner'} />
-            </span>
-
-            <span>Light</span>
-            <span>
-                <Loader size={'large'} themeColor={'light'} animation={'pulsing'} />
-            </span>
-
-            <span>
-                <Loader size={'large'} themeColor={'light'} animation={'infinite-spinner'} />
-            </span>
-
-            <span>
-                <Loader size={'large'} themeColor={'light'} animation={'converging-spinner'} />
-            </span>
-
-            <span>Inverse</span>
-            <span>
-                <Loader size={'large'} themeColor={'inverse'} animation={'pulsing'} />
-            </span>
-
-            <span>
-                <Loader size={'large'} themeColor={'inverse'} animation={'infinite-spinner'} />
-            </span>
-
-            <span>
-                <Loader size={'large'} themeColor={'inverse'} animation={'converging-spinner'} />
-            </span>
+                    <span>
+                        <LoaderConverging size={size} />
+                    </span>
+                </>
 
+            ))}
         </div>
     </>
 );

package/src/scheduler/tests/scheduler-edit-dialog.tsx

@@ -6,7 +6,7 @@ import { Textbox } from '../../textbox';
 import { DateTimePicker } from '../../datetimepicker';
 import { Combobox } from '../../combobox';
 import { MultiSelect } from '../../multiselect';
-import { Form, FormField } from '../../form';
+import { FormNormal, FormField } from '../../form';
 import { ButtonGroup } from '../../button-group';
 import { RadioButtonWithLabelAfter, RadioGroup, RadioItem } from '../../radio';
 import { NumericTextbox } from '../../numerictextbox';
@@ -37,7 +37,7 @@ export default () =>(
                         <Button fillMode="flat" themeColor="primary" icon="trash">Delete</Button>
                     </>
                 }>
-                    <Form tag="div" className="k-scheduler-edit-form">
+                    <FormNormal formButtons={null} tag="div" className="k-scheduler-edit-form">
                         <FormField className="k-form-field-error" label="Title" error="Error" editor={ <Textbox invalid value="Invalid" /> }/>
                         <FormField label="Start" editor={ <DateTimePicker placeholder="dd/MM/yyyy hh:mm AM" /> }/>
                         <FormField label="End" editor={ <DateTimePicker placeholder="dd/MM/yyyy hh:mm AM" /> }/>
@@ -95,7 +95,7 @@ export default () =>(
                         <FormField label="Description" editor={ <Textarea /> }/>
                         <FormField label="Owner" editor={ <Combobox placeholder="Select owner" /> }/>
                         <FormField label="Atendee" optional editor={ <MultiSelect placeholder="Invite people" /> }/>
-                    </Form>
+                    </FormNormal>
                 </WindowNormal>
             </section>
         </div>

package/src/scheduler/tests/scheduler-editing-weekly.tsx

@@ -6,7 +6,7 @@ import { Textbox } from '../../textbox';
 import { DateTimePicker } from '../../datetimepicker';
 import { Combobox } from '../../combobox';
 import { MultiSelect } from '../../multiselect';
-import { Form, FormField } from '../../form';
+import { FormNormal, FormField } from '../../form';
 import { ButtonGroup } from '../../button-group';
 import { NumericTextbox } from '../../numerictextbox';
 import { RadioButtonWithLabelAfter, RadioGroup, RadioItem } from '../../radio';
@@ -37,7 +37,7 @@ export default () =>(
                         <Button fillMode="flat" themeColor="primary" icon="trash">Delete</Button>
                     </>
                 }>
-                    <Form tag="div" className="k-scheduler-edit-form">
+                    <FormNormal formButtons={null} tag="div" className="k-scheduler-edit-form">
                         <FormField className="k-form-field-error" label="Title" error="Error" editor={ <Textbox invalid value="Invalid" /> }/>
                         <FormField label="Start" editor={ <DateTimePicker placeholder="dd/MM/yyyy hh:mm AM" /> }/>
                         <FormField editor={
@@ -118,7 +118,7 @@ export default () =>(
                         <FormField label="Description" editor={ <Textarea /> }/>
                         <FormField label="Owner" editor={ <Combobox placeholder="Select owner" /> }/>
                         <FormField label="Atendee" optional editor={ <MultiSelect placeholder="Invite people" /> }/>
-                    </Form>
+                    </FormNormal>
                 </WindowNormal>
 
             </section>

package/src/skeleton/index.tsx

@@ -1 +1,4 @@
 export * from './skeleton.spec';
+export * from './templates/skeleton-normal';
+export * from './templates/skeleton-rectangle';
+export * from './templates/skeleton-circle';

package/src/skeleton/templates/skeleton-circle.tsx

@@ -0,0 +1,7 @@
+import { Skeleton } from "..";
+
+export const SkeletonCircle = (props) =>
+    <Skeleton
+        shape={'circle'}
+        {...props}
+    />;

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

@@ -0,0 +1,3 @@
+import { Skeleton } from "..";
+
+export const SkeletonNormal = (props) => <Skeleton {...props}/>;

package/src/skeleton/templates/skeleton-rectangle.tsx

@@ -0,0 +1,7 @@
+import { Skeleton } from "..";
+
+export const SkeletonRectangle = (props) =>
+    <Skeleton
+        shape={'rect'}
+        {...props}
+    />;

package/src/skeleton/tests/skeleton.tsx

@@ -1,4 +1,4 @@
-import { Skeleton } from '../../skeleton';
+import { SkeletonCircle, SkeletonNormal, SkeletonRectangle } from '../../skeleton';
 
 const style = `
     .k-skeleton-container {
@@ -15,19 +15,19 @@ export default () => (
         <style>{style}</style>
         <div id="test-area" className="k-d-grid k-grid-cols-1">
 
-            <Skeleton style={{ width: '300px' }} />
-            <Skeleton shape={'circle'} style={{ width: '50px', height: '50px' }} />
-            <Skeleton shape={'rect'} style={{ width: '300px', height: '200px' }} />
+            <SkeletonNormal style={{ width: '300px' }} />
+            <SkeletonCircle style={{ width: '50px', height: '50px' }} />
+            <SkeletonRectangle style={{ width: '300px', height: '200px' }} />
 
             <div className="k-skeleton-container k-d-grid">
-                <Skeleton shape={'circle'} style={{ gridColumn: "1 / 3", gridRow: "1 / 3" }} />
-                <Skeleton style={{ gridColumn: "3 / 10", gridRow: "1 / 2" }} />
-                <Skeleton style={{ gridColumn: "3 / 7", gridRow: "2 / 3" }} />
+                <SkeletonCircle style={{ gridColumn: "1 / 3", gridRow: "1 / 3" }} />
+                <SkeletonNormal style={{ gridColumn: "3 / 10", gridRow: "1 / 2" }} />
+                <SkeletonNormal style={{ gridColumn: "3 / 7", gridRow: "2 / 3" }} />
 
-                <Skeleton shape={'rect'} style={{ gridColumn: "1 / 11", gridRow: "3 / 8" }} />
+                <SkeletonRectangle style={{ gridColumn: "1 / 11", gridRow: "3 / 8" }} />
 
-                <Skeleton style={{ gridColumn: "1 / 11", gridRow: "9 / 10" }} />
-                <Skeleton style={{ gridColumn: "1 / 11", gridRow: "10 / 10" }} />
+                <SkeletonNormal style={{ gridColumn: "1 / 11", gridRow: "9 / 10" }} />
+                <SkeletonNormal style={{ gridColumn: "1 / 11", gridRow: "10 / 10" }} />
             </div>
 
         </div>

package/src/spreadsheet/tests/spreadsheet-data-validation.tsx

@@ -1,6 +1,6 @@
 import { WindowNormal } from '../../window';
 import { Button } from '../../button';
-import { Form, FormField } from '../../form';
+import { FormNormal, FormField } from '../../form';
 import { Textbox } from '../../textbox';
 import { DropdownList } from '../../dropdownlist';
 import { Checkbox } from '../../checkbox';
@@ -26,7 +26,7 @@ export default () =>(
                         <Button>Cancel</Button>
                     </>
                 }>
-                    <Form>
+                    <FormNormal formButtons={null}>
                         <FormField label="Cell Range" editor={ <Textbox value="Input Value" /> }/>
                         <FormField label="Criteria" editor={ <DropdownList value="Number" /> }/>
                         <FormField label="Comparer" editor={ <DropdownList value="Greater than" /> } />
@@ -53,7 +53,7 @@ export default () =>(
                                 <label className="k-checkbox-label">Show hint</label>
                             </>
                         } />
-                    </Form>
+                    </FormNormal>
                 </WindowNormal>
             </section>