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

package/src/notification/tests/notification-angular.tsx

@@ -1,11 +1,7 @@
-import { Notification, NotificationAction } from '../../notification';
+import { NotificationNormal, NotificationClosable, IconNotification, IconNotificationClosable } from '../../notification';
 
 
 const styles = `
-    body {
-        background: #fcfcfc;
-    }
-
     #test-area {
         justify-items: start;
     }
@@ -15,133 +11,52 @@ const styles = `
     }
 `;
 
-export default () =>(
+export default () => (
     <>
         <style>{styles}</style>
         <div id="test-area" className="k-d-grid k-grid-cols-4">
 
             <span className="k-colspan-all k-col-span-full">LTR</span>
-
-            <div>
-                <div className="k-notification-container">
-                    <Notification text="Default notification" />
-                </div>
-            </div>
-            <div>
-                <div className="k-notification-container">
-                    <Notification closable={true} text="Closable notification" actions={ <NotificationAction type="close" /> } />
-                </div>
-            </div>
-            <div>
-                <div className="k-notification-container">
-                    <Notification themeColor="primary" text="Primary notification" />
-                </div>
-            </div>
-            <div>
-                <div className="k-notification-container">
-                    <Notification themeColor="secondary" text="Secondary notification" />
-                </div>
-            </div>
             <div>
                 <div className="k-notification-container">
-                    <Notification themeColor="tertiary" text="Tertiary notification" />
+                    <NotificationNormal text="Default notification" />
                 </div>
             </div>
             <div>
                 <div className="k-notification-container">
-                    <Notification themeColor="info" text="Info notification" icon="info-circle" />
+                    <IconNotification text="Icon notification" />
                 </div>
             </div>
             <div>
                 <div className="k-notification-container">
-                    <Notification themeColor="success" text="Success notification" icon="check-outline" />
+                    <NotificationClosable text="Closable notification" />
                 </div>
             </div>
             <div>
                 <div className="k-notification-container">
-                    <Notification themeColor="warning" text="Warning notification" icon="exclamation-circle" />
-                </div>
-            </div>
-            <div>
-                <div className="k-notification-container">
-                    <Notification themeColor="error" text="Error notification" icon="x-outline" />
-                </div>
-            </div>
-            <div>
-                <div className="k-notification-container">
-                    <Notification themeColor="dark" text="Dark notification" />
-                </div>
-            </div>
-            <div>
-                <div className="k-notification-container">
-                    <Notification themeColor="light" text="Light notification" />
-                </div>
-            </div>
-            <div>
-                <div className="k-notification-container">
-                    <Notification themeColor="inverse" text="Inverse notification" />
+                    <IconNotificationClosable text="Closable notification with icon" />
                 </div>
             </div>
 
             <span className="k-colspan-all k-col-span-full">RTL</span>
             <div dir="rtl">
                 <div className="k-notification-container">
-                    <Notification text="Default notification" />
-                </div>
-            </div>
-            <div dir="rtl">
-                <div className="k-notification-container">
-                    <Notification closable={true} text="Closable notification" actions={ <NotificationAction type="close" /> } />
-                </div>
-            </div>
-            <div dir="rtl">
-                <div className="k-notification-container">
-                    <Notification themeColor="primary" text="Primary notification" />
-                </div>
-            </div>
-            <div dir="rtl">
-                <div className="k-notification-container">
-                    <Notification themeColor="secondary" text="Secondary notification" />
-                </div>
-            </div>
-            <div dir="rtl">
-                <div className="k-notification-container">
-                    <Notification themeColor="tertiary" text="Tertiary notification" />
-                </div>
-            </div>
-            <div dir="rtl">
-                <div className="k-notification-container">
-                    <Notification themeColor="info" text="Info notification" icon="info-circle" />
-                </div>
-            </div>
-            <div dir="rtl">
-                <div className="k-notification-container">
-                    <Notification themeColor="success" text="Success notification" icon="check-outline" />
-                </div>
-            </div>
-            <div dir="rtl">
-                <div className="k-notification-container">
-                    <Notification themeColor="warning" text="Warning notification" icon="exclamation-circle" />
-                </div>
-            </div>
-            <div dir="rtl">
-                <div className="k-notification-container">
-                    <Notification themeColor="error" text="Error notification" icon="x-outline" />
+                    <NotificationNormal text="Default notification" />
                 </div>
             </div>
             <div dir="rtl">
                 <div className="k-notification-container">
-                    <Notification themeColor="dark" text="Dark notification" />
+                    <IconNotification text="Icon notification" />
                 </div>
             </div>
             <div dir="rtl">
                 <div className="k-notification-container">
-                    <Notification themeColor="light" text="Light notification" />
+                    <NotificationClosable text="Closable notification" />
                 </div>
             </div>
             <div dir="rtl">
                 <div className="k-notification-container">
-                    <Notification themeColor="inverse" text="Inverse notification" />
+                    <IconNotificationClosable text="Closable notification with icon" />
                 </div>
             </div>
 

package/src/notification/tests/notification-custom-angular.tsx

@@ -1,4 +1,4 @@
-import { Notification, NotificationAction } from '../../notification';
+import { NotificationClosable, NotificationNormal } from '../../notification';
 
 
 const styles = `
@@ -32,20 +32,20 @@ export default () =>(
                 {/* notification group */}
                 <div className="k-notification-group">
                     <div className="k-notification-container">
-                        <Notification text="Multiline notification" closable={true} actions={ <NotificationAction type="close" /> } >
+                        <NotificationClosable text="Multiline notification">
                             <div>Closable multiline notification</div>
                             <div>Closable multiline notification</div>
                             <div>Closable multiline notification</div>
-                        </Notification>
+                        </NotificationClosable>
                     </div>
                     <div className="k-notification-container">
-                        <Notification className="k-custom-notification" text="Custom notification" />
+                        <NotificationNormal className="k-custom-notification" text="Custom notification" />
                     </div>
                 </div>
             </div>
             <div className="k-colspan-3 k-col-span-3">
                 <div className="k-notification-container fullwidth">
-                    <Notification text="Full width notification" closable={true} actions={ <NotificationAction type="close" /> } />
+                    <NotificationClosable text="Full width notification"/>
                 </div>
             </div>
 
@@ -55,20 +55,20 @@ export default () =>(
                 {/* notification group */}
                 <div className="k-notification-group">
                     <div className="k-notification-container">
-                        <Notification text="Multiline notification" closable={true} actions={ <NotificationAction type="close" /> } >
+                        <NotificationClosable text="Multiline notification">
                             <div>Closable multiline notification</div>
                             <div>Closable multiline notification</div>
                             <div>Closable multiline notification</div>
-                        </Notification>
+                        </NotificationClosable>
                     </div>
                     <div className="k-notification-container">
-                        <Notification className="k-custom-notification" text="Custom notification" />
+                        <NotificationNormal className="k-custom-notification" text="Custom notification" />
                     </div>
                 </div>
             </div>
             <div className="k-colspan-3 k-col-span-3" dir="rtl">
                 <div className="k-notification-container fullwidth">
-                    <Notification text="Full width notification" closable={true} actions={ <NotificationAction type="close" /> } />
+                    <NotificationClosable text="Full width notification"/>
                 </div>
             </div>
 

package/src/notification/tests/notification-jquery-colors.tsx

@@ -0,0 +1,30 @@
+import { Notification, NotificationClosable } from '../../notification';
+import { AnimationContainer } from '../../animation-container';
+
+
+const styles = `
+    #test-area {
+        justify-items: start;
+    }
+
+    .k-animation-container {
+        position: static;
+        overflow: visible;
+    }
+`;
+
+export default () =>(
+    <>
+        <style>{styles}</style>
+        <div id="test-area" className="k-d-grid k-grid-cols-2">
+            {Notification.options.themeColor.map((color) => (
+                <div>
+                    <AnimationContainer>
+                        <NotificationClosable themeColor={color} text={`${color} notification`} />
+                    </AnimationContainer>
+                </div>
+            ))}
+
+        </div>
+    </>
+);

package/src/notification/tests/notification-jquery.tsx

@@ -1,12 +1,8 @@
-import { Notification, NotificationAction } from '../../notification';
+import { NotificationNormal, NotificationClosable, IconNotification, IconNotificationClosable } from '../../notification';
 import { AnimationContainer } from '../../animation-container';
 
 
 const styles = `
-    body {
-        background: #fcfcfc;
-    }
-
     #test-area {
         justify-items: start;
     }
@@ -17,133 +13,52 @@ const styles = `
     }
 `;
 
-export default () =>(
+export default () => (
     <>
         <style>{styles}</style>
         <div id="test-area" className="k-d-grid k-grid-cols-4">
 
             <span className="k-colspan-all k-col-span-full">LTR</span>
-
-            <div>
-                <AnimationContainer>
-                    <Notification text="Default notification" />
-                </AnimationContainer>
-            </div>
-            <div>
-                <AnimationContainer>
-                    <Notification closable={true} text="Closable notification" actions={ <NotificationAction type="close" /> } />
-                </AnimationContainer>
-            </div>
-            <div>
-                <AnimationContainer>
-                    <Notification themeColor="primary" text="Primary notification" />
-                </AnimationContainer>
-            </div>
-            <div>
-                <AnimationContainer>
-                    <Notification themeColor="secondary" text="Secondary notification" />
-                </AnimationContainer>
-            </div>
             <div>
                 <AnimationContainer>
-                    <Notification themeColor="tertiary" text="Tertiary notification" />
+                    <NotificationNormal text="Default notification" />
                 </AnimationContainer>
             </div>
             <div>
                 <AnimationContainer>
-                    <Notification themeColor="info" text="Info notification" icon="info-circle" />
+                    <IconNotification text="Icon notification" />
                 </AnimationContainer>
             </div>
             <div>
                 <AnimationContainer>
-                    <Notification themeColor="success" text="Success notification" icon="check-outline" />
+                    <NotificationClosable text="Closable notification" />
                 </AnimationContainer>
             </div>
             <div>
                 <AnimationContainer>
-                    <Notification themeColor="warning" text="Warning notification" icon="exclamation-circle" />
-                </AnimationContainer>
-            </div>
-            <div>
-                <AnimationContainer>
-                    <Notification themeColor="error" text="Error notification" icon="x-outline" />
-                </AnimationContainer>
-            </div>
-            <div>
-                <AnimationContainer>
-                    <Notification themeColor="dark" text="Dark notification" />
-                </AnimationContainer>
-            </div>
-            <div>
-                <AnimationContainer>
-                    <Notification themeColor="light" text="Light notification" />
-                </AnimationContainer>
-            </div>
-            <div>
-                <AnimationContainer>
-                    <Notification themeColor="inverse" text="Inverse notification" />
+                    <IconNotificationClosable text="Closable notification with icon" />
                 </AnimationContainer>
             </div>
 
             <span className="k-colspan-all k-col-span-full">RTL</span>
             <div dir="rtl">
                 <AnimationContainer>
-                    <Notification text="Default notification" />
-                </AnimationContainer>
-            </div>
-            <div dir="rtl">
-                <AnimationContainer>
-                    <Notification closable={true} text="Closable notification" actions={ <NotificationAction type="close" /> } />
-                </AnimationContainer>
-            </div>
-            <div dir="rtl">
-                <AnimationContainer>
-                    <Notification themeColor="primary" text="Primary notification" />
-                </AnimationContainer>
-            </div>
-            <div dir="rtl">
-                <AnimationContainer>
-                    <Notification themeColor="secondary" text="Secondary notification" />
-                </AnimationContainer>
-            </div>
-            <div dir="rtl">
-                <AnimationContainer>
-                    <Notification themeColor="tertiary" text="Tertiary notification" />
-                </AnimationContainer>
-            </div>
-            <div dir="rtl">
-                <AnimationContainer>
-                    <Notification themeColor="info" text="Info notification" icon="info-circle" />
-                </AnimationContainer>
-            </div>
-            <div dir="rtl">
-                <AnimationContainer>
-                    <Notification themeColor="success" text="Success notification" icon="check-outline" />
-                </AnimationContainer>
-            </div>
-            <div dir="rtl">
-                <AnimationContainer>
-                    <Notification themeColor="warning" text="Warning notification" icon="exclamation-circle" />
-                </AnimationContainer>
-            </div>
-            <div dir="rtl">
-                <AnimationContainer>
-                    <Notification themeColor="error" text="Error notification" icon="x-outline" />
+                    <NotificationNormal text="Default notification" />
                 </AnimationContainer>
             </div>
             <div dir="rtl">
                 <AnimationContainer>
-                    <Notification themeColor="dark" text="Dark notification" />
+                    <IconNotification text="Icon notification" />
                 </AnimationContainer>
             </div>
             <div dir="rtl">
                 <AnimationContainer>
-                    <Notification themeColor="light" text="Light notification" />
+                    <NotificationClosable text="Closable notification" />
                 </AnimationContainer>
             </div>
             <div dir="rtl">
                 <AnimationContainer>
-                    <Notification themeColor="inverse" text="Inverse notification" />
+                    <IconNotificationClosable text="Closable notification with icon" />
                 </AnimationContainer>
             </div>
 

package/src/pdf-viewer/tests/pdf-viewer-blank-page.tsx

@@ -1,5 +1,5 @@
 import { Button } from '../../button';
-import { Upload } from '../../upload';
+import { UploadNormal } from '../../upload';
 import { Toolbar } from '../../toolbar';
 import { Pager } from '../../pager';
 import { Dropzone } from '../../dropzone';
@@ -31,7 +31,7 @@ export default () =>(
                     <div className="k-pdf-viewer-pages">
                         <div className="k-page k-blank-page">
                             <Dropzone note={false}/>
-                            <Upload async empty status="upload"></Upload>
+                            <UploadNormal empty status="upload"></UploadNormal>
                         </div>
                     </div>
                 </div>

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

@@ -1,4 +1,4 @@
-import { Window } from '../../window';
+import { WindowNormal } from '../../window';
 import { Button } from '../../button';
 import { Checkbox } from '../../checkbox';
 import { Textarea } from '../../textarea';
@@ -29,7 +29,7 @@ export default () =>(
         <div id="test-area" className="k-d-grid k-grid-cols-1">
 
             <section>
-                <Window title="Edit event" actions={[ 'window-minimize', 'window', 'x' ]} actionButtonsAlign="start" actionButtons={
+                <WindowNormal title="Edit event" actionButtonsAlign="start" actionButtons={
                     <>
                         <Button themeColor="primary" icon="save">Save</Button>
                         <Button icon="cancel">Cancel</Button>
@@ -96,7 +96,7 @@ export default () =>(
                         <FormField label="Owner" editor={ <Combobox placeholder="Select owner" /> }/>
                         <FormField label="Atendee" optional editor={ <MultiSelect placeholder="Invite people" /> }/>
                     </Form>
-                </Window>
+                </WindowNormal>
             </section>
         </div>
     </>

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

@@ -1,4 +1,4 @@
-import { Window } from '../../window';
+import { WindowNormal } from '../../window';
 import { Button } from '../../button';
 import { Checkbox } from '../../checkbox';
 import { Textarea } from '../../textarea';
@@ -29,7 +29,7 @@ export default () =>(
 
             <section>
 
-                <Window title="Edit event" actions={[ 'window-minimize', 'window', 'x' ]} actionButtonsAlign="start" actionButtons={
+                <WindowNormal title="Edit event" actionButtonsAlign="start" actionButtons={
                     <>
                         <Button themeColor="primary" icon="save">Save</Button>
                         <Button icon="cancel">Cancel</Button>
@@ -119,7 +119,7 @@ export default () =>(
                         <FormField label="Owner" editor={ <Combobox placeholder="Select owner" /> }/>
                         <FormField label="Atendee" optional editor={ <MultiSelect placeholder="Invite people" /> }/>
                     </Form>
-                </Window>
+                </WindowNormal>
 
             </section>
 

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

@@ -1,4 +1,4 @@
-import { Window } from '../../window';
+import { WindowNormal } from '../../window';
 import { Button } from '../../button';
 import { Form, FormField } from '../../form';
 import { Textbox } from '../../textbox';
@@ -20,7 +20,7 @@ export default () =>(
         <div id="test-area" className="k-d-grid k-grid-cols-2">
 
             <section>
-                <Window title="Data Validation" actions={[ 'x' ]} className="k-spreadsheet-window" actionButtonsAlign="start" actionButtons={
+                <WindowNormal title="Data Validation" actions={[ 'x' ]} className="k-spreadsheet-window" actionButtonsAlign="start" actionButtons={
                     <>
                         <Button themeColor="primary">Apply</Button>
                         <Button>Cancel</Button>
@@ -54,18 +54,18 @@ export default () =>(
                             </>
                         } />
                     </Form>
-                </Window>
+                </WindowNormal>
             </section>
 
             <section>
-                <Window title="Birth Date validaiton error" actions={[ 'x' ]} className="k-spreadsheet-window" actionButtonsAlign="start" actionButtons={
+                <WindowNormal title="Birth Date validaiton error" actions={[ 'x' ]} className="k-spreadsheet-window" actionButtonsAlign="start" actionButtons={
                     <>
                         <Button themeColor="primary">Retry</Button>
                         <Button>Cancel</Button>
                     </>
                 }>
                     Birth Date should be between 1899 and 1998 year.
-                </Window>
+                </WindowNormal>
             </section>
 
         </div>

package/src/spreadsheet/tests/spreadsheet-file-dialogs.tsx

@@ -1,9 +1,9 @@
-import { Window } from '../../window';
+import { WindowNormal } from '../../window';
 import { Button } from '../../button';
 import { Form, FormField } from '../../form';
 import { Textbox } from '../../textbox';
 import { DropdownList } from '../../dropdownlist';
-import { Upload } from '../../upload';
+import { UploadNormal } from '../../upload';
 import { Dropzone } from '../../dropzone';
 
 
@@ -20,18 +20,18 @@ export default () =>(
         <div id="test-area" className="k-d-grid k-grid-cols-2">
 
             <section>
-                <Window title="Create new file" actions={[ 'x' ]} className="k-spreadsheet-window" actionButtonsAlign="stretched" actionButtons={
+                <WindowNormal title="Create new file" actions={[ 'x' ]} className="k-spreadsheet-window" actionButtonsAlign="stretched" actionButtons={
                     <>
                         <Button themeColor="primary">Create new file</Button>
                         <Button>Cancel</Button>
                     </>
                 }>
                     <p>Are you sure you want to close this file without saving it and create a new one?</p>
-                </Window>
+                </WindowNormal>
             </section>
 
             <section>
-                <Window title="Save" actions={[ 'x' ]} className="k-spreadsheet-window" actionButtonsAlign="start" actionButtons={
+                <WindowNormal title="Save" actions={[ 'x' ]} className="k-spreadsheet-window" actionButtonsAlign="start" actionButtons={
                     <>
                         <Button themeColor="primary">Save</Button>
                         <Button>Cancel</Button>
@@ -42,11 +42,11 @@ export default () =>(
 
                         <FormField label="Save as type" editor={ <DropdownList placeholder="Excel Workbook (.xlsx)" />}></FormField>
                     </Form>
-                </Window>
+                </WindowNormal>
             </section>
 
             <section>
-                <Window title="Open file" actions={[ 'x' ]} className="k-spreadsheet-window" actionButtonsAlign="start" actionButtons={
+                <WindowNormal title="Open file" actions={[ 'x' ]} className="k-spreadsheet-window" actionButtonsAlign="start" actionButtons={
                     <>
                         <Button themeColor="primary">Open</Button>
                         <Button>Cancel</Button>
@@ -54,8 +54,8 @@ export default () =>(
                 }>
                     <Dropzone note={false} />
 
-                    <Upload async status="upload"></Upload>
-                </Window>
+                    <UploadNormal status="upload"/>
+                </WindowNormal>
             </section>
 
         </div>

package/src/spreadsheet/tests/spreadsheet-find-replace-dialog.tsx

@@ -1,4 +1,4 @@
-import { Window } from '../../window';
+import { WindowNormal } from '../../window';
 import { Button } from '../../button';
 import { Form, FormField } from '../../form';
 import { Textbox } from '../../textbox';
@@ -17,7 +17,7 @@ export default () =>(
         <div id="test-area" className="k-d-grid k-grid-cols-2">
 
             <section>
-                <Window title="Find and Replace" actions={[ 'x' ]} className="k-spreadsheet-window" actionButtonsAlign="start" actionButtons={
+                <WindowNormal title="Find and Replace" actions={[ 'x' ]} className="k-spreadsheet-window" actionButtonsAlign="start" actionButtons={
                     <>
                         <Button themeColor="primary">Done</Button>
                         <Button>Find</Button>
@@ -30,7 +30,7 @@ export default () =>(
                         <FormField label="Replace with" editor={ <Textbox placeholder="Placeholder" /> }/>
                         <FormField label="Search within" editor={ <DropdownList value="All Sheets" /> } />
                     </Form>
-                </Window>
+                </WindowNormal>
             </section>
 
         </div>

package/src/spreadsheet/tests/spreadsheet-format-dialogs.tsx

@@ -1,4 +1,4 @@
-import { Window } from '../../window';
+import { WindowNormal } from '../../window';
 import { Button } from '../../button';
 import { Form, FormField } from '../../form';
 import { Textbox } from '../../textbox';
@@ -23,7 +23,7 @@ export default () =>(
         <div id="test-area" className="k-d-grid k-grid-cols-2">
 
             <section>
-                <Window title="Custom Format" actions={[ 'x' ]} className="k-spreadsheet-window" actionButtonsAlign="start" actionButtons={
+                <WindowNormal title="Custom Format" actions={[ 'x' ]} className="k-spreadsheet-window" actionButtonsAlign="start" actionButtons={
                     <>
                         <Button themeColor="primary">Apply</Button>
                         <Button>Cancel</Button>
@@ -42,11 +42,11 @@ export default () =>(
                             </ListBox>
                         }/>
                     </Form>
-                </Window>
+                </WindowNormal>
             </section>
 
             <section>
-                <Window title="Conditional Formatting" actions={[ 'x' ]} className="k-spreadsheet-window" actionButtonsAlign="start" actionButtons={
+                <WindowNormal title="Conditional Formatting" actions={[ 'x' ]} className="k-spreadsheet-window" actionButtonsAlign="start" actionButtons={
                     <>
                         <Button themeColor="primary">Apply</Button>
                         <Button>Cancel</Button>
@@ -68,7 +68,7 @@ export default () =>(
                             </Toolbar>
                         } />
                     </Form>
-                </Window>
+                </WindowNormal>
             </section>
 
         </div>

package/src/spreadsheet/tests/spreadsheet-formula-dialog.tsx

@@ -1,4 +1,4 @@
-import { Window } from '../../window';
+import { WindowNormal } from '../../window';
 import { Button } from '../../button';
 import { Form, FormField } from '../../form';
 import { DropdownList } from '../../dropdownlist';
@@ -19,7 +19,7 @@ export default () =>(
         <div id="test-area" className="k-d-grid k-grid-cols-2">
 
             <section>
-                <Window title="Insert formula" actions={[ 'x' ]} className="k-spreadsheet-window" actionButtonsAlign="start" actionButtons={
+                <WindowNormal title="Insert formula" actions={[ 'x' ]} className="k-spreadsheet-window" actionButtonsAlign="start" actionButtons={
                     <>
                         <Button themeColor="primary">Apply</Button>
                         <Button>Cancel</Button>
@@ -37,7 +37,7 @@ export default () =>(
                             </ListBox>
                         } />
                     </Form>
-                </Window>
+                </WindowNormal>
             </section>
 
         </div>