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

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

@@ -1,63 +1,44 @@
 import { Window } from '../../window';
 import { Button } from '../../button';
-import { Checkbox } from '../../checkbox';
-import { RadioButtonLabel, RadioGroup, RadioItem } from '../../radio';
 import { Form, FormField } from '../../form';
 import { Textbox } from '../../textbox';
 import { DropdownList } from '../../dropdownlist';
+import { Checkbox } from '../../checkbox';
+import { RadioButtonLabel, RadioGroup, RadioItem } from '../../radio';
+
 
 const style = `
     .k-window {
-        width: 450px;
+        min-width: 400px;
         position: relative;
     }
 `;
 
-export default () => (
+export default () =>(
     <>
         <style>{style}</style>
-        <div id="test-area" className="k-d-grid">
-            <Window title="Data Validation" actions={[ 'x' ]} className="k-spreadsheet-window" actionButtonsAlign="start" actionButtons={
-                <>
-                    <Button themeColor="primary">Apply</Button>
-                    <Button>Cancel</Button>
-                </>
-            }>
-                <Form>
-                    <FormField
-                        label="Criteria:"
-                        editor={ <DropdownList placeholder="Number" /> }
-                    >
-                    </FormField>
-
-                    <FormField
-                        label="Comparer:"
-                        editor={
-                            <DropdownList placeholder="greater than" />
-                        }
-                    >
-                    </FormField>
-
-                    <FormField
-                        label="Min:"
-                        editor={ <Textbox placeholder="e.g. 10"/> }
-                    >
-                    </FormField>
+        <div id="test-area" className="k-d-grid k-grid-cols-2">
 
-                    <FormField
-                        editor={
+            <section>
+                <Window title="Data Validation" actions={[ 'x' ]} className="k-spreadsheet-window" actionButtonsAlign="start" actionButtons={
+                    <>
+                        <Button themeColor="primary">Apply</Button>
+                        <Button>Cancel</Button>
+                    </>
+                }>
+                    <Form>
+                        <FormField label="Cell Range" editor={ <Textbox value="Input Value" /> }/>
+                        <FormField label="Criteria" editor={ <DropdownList value="Number" /> }/>
+                        <FormField label="Comparer" editor={ <DropdownList value="Greater than" /> } />
+                        <FormField label="Min" editor={ <Textbox placeholder="Placeholder" /> } />
+                        <FormField editor={
                             <>
-                                <Checkbox checked/>
+                                <Checkbox/>
                                 <label className="k-checkbox-label">Ignore blank</label>
                             </>
-                        }
-                    >
-                    </FormField>
-
-                    <FormField
-                        label="On invalid data:"
-                        editor={
-                            <RadioGroup layout="horizontal">
+                        } />
+                        <FormField label="On invalid data" editor={
+                            <RadioGroup layout="vertical">
                                 <RadioItem>
                                     <RadioButtonLabel checked>Reject input</RadioButtonLabel>
                                 </RadioItem>
@@ -65,21 +46,30 @@ export default () => (
                                     <RadioButtonLabel>Show warning</RadioButtonLabel>
                                 </RadioItem>
                             </RadioGroup>
-                        }
-                    >
-                    </FormField>
-
-                    <FormField
-                        editor={
+                        }/>
+                        <FormField editor={
                             <>
                                 <Checkbox/>
                                 <label className="k-checkbox-label">Show hint</label>
                             </>
-                        }
-                    >
-                    </FormField>
-                </Form>
-            </Window>
+                        } />
+                    </Form>
+                </Window>
+            </section>
+
+            <section>
+                <Window 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>
+            </section>
+
         </div>
     </>
 );
+
+

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

@@ -0,0 +1,63 @@
+import { Window } from '../../window';
+import { Button } from '../../button';
+import { Form, FormField } from '../../form';
+import { Textbox } from '../../textbox';
+import { DropdownList } from '../../dropdownlist';
+import { Upload } from '../../upload';
+import { Dropzone } from '../../dropzone';
+
+
+const style = `
+    .k-window {
+        min-width: 400px;
+        position: relative;
+    }
+`;
+
+export default () =>(
+    <>
+        <style>{style}</style>
+        <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={
+                    <>
+                        <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>
+            </section>
+
+            <section>
+                <Window title="Save" actions={[ 'x' ]} className="k-spreadsheet-window" actionButtonsAlign="start" actionButtons={
+                    <>
+                        <Button themeColor="primary">Save</Button>
+                        <Button>Cancel</Button>
+                    </>
+                }>
+                    <Form>
+                        <FormField label="File name" editor={ <Textbox placeholder="Workbook"/> }></FormField>
+
+                        <FormField label="Save as type" editor={ <DropdownList placeholder="Excel Workbook (.xlsx)" />}></FormField>
+                    </Form>
+                </Window>
+            </section>
+
+            <section>
+                <Window title="Open file" actions={[ 'x' ]} className="k-spreadsheet-window" actionButtonsAlign="start" actionButtons={
+                    <>
+                        <Button themeColor="primary">Open</Button>
+                        <Button>Cancel</Button>
+                    </>
+                }>
+                    <Dropzone note={false} />
+
+                    <Upload async status="upload"></Upload>
+                </Window>
+            </section>
+
+        </div>
+    </>
+);