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

package/src/spreadsheet/tests/{spreadsheet-dialog.tsx → spreadsheet-insert-dialogs.tsx}

@@ -2,11 +2,12 @@ import { Window } from '../../window';
 import { Textarea } from '../../textarea';
 import { Button } from '../../button';
 import { Form, FormField } from '../../form';
-import { RadioButtonLabel, RadioGroup, RadioItem } from '../../radio';
 import { Textbox } from '../../textbox';
-import { DropdownList } from '../../dropdownlist';
 import { Upload } from '../../upload';
 import { Dropzone } from '../../dropzone';
+import { DropdownList } from '../../dropdownlist';
+import { ListBox } from '../../listbox';
+import { ListItem } from '../../list';
 
 
 const style = `
@@ -27,99 +28,81 @@ export default () =>(
                         <Button themeColor="primary">Insert</Button>
                         <Button>Cancel</Button>
                         <span className="k-spacer"></span>
-                        <Button fillMode="clear" themeColor="primary">Remove</Button>
+                        <Button fillMode="clear" themeColor="primary">Remove comment</Button>
                     </>
                 }>
                     <Form>
-                        <FormField label="Comment:" editor={ <Textarea /> }/>
+                        <FormField label="Comment" editor={ <Textarea /> }/>
                     </Form>
                 </Window>
             </section>
 
             <section>
-                <Window title="Hyperlink" actions={[ 'x' ]} className="k-spreadsheet-window" actionButtonsAlign="start" actionButtons={
+                <Window title="Insert image" actions={[ 'x' ]} className="k-spreadsheet-window" actionButtonsAlign="start" actionButtons={
                     <>
-                        <Button themeColor="primary">OK</Button>
+                        <Button themeColor="primary">Insert</Button>
                         <Button>Cancel</Button>
-                        <span className="k-spacer"></span>
-                        <Button fillMode="clear" themeColor="primary">Remove link</Button>
                     </>
                 }>
-                    <Form>
-                        <FormField label="Web address:" editor={ <Textbox /> } />
-                    </Form>
+                    <Dropzone />
+
+                    <Upload async status="upload"></Upload>
                 </Window>
             </section>
 
             <section>
-                <Window title="Export..." actions={[ 'x' ]} className="k-spreadsheet-window" actionButtonsAlign="start" actionButtons={
+                <Window title="Insert Link" actions={[ 'x' ]} className="k-spreadsheet-window" actionButtonsAlign="start" actionButtons={
                     <>
-                        <Button themeColor="primary">Save</Button>
+                        <Button themeColor="primary">Insert</Button>
                         <Button>Cancel</Button>
+                        <span className="k-spacer"></span>
+                        <Button fillMode="clear" themeColor="primary">Remove link</Button>
                     </>
                 }>
                     <Form>
-                        <FormField label="File name:" editor={ <Textbox placeholder="Workbook"/> }></FormField>
-
-                        <FormField label="Save as type:" editor={ <DropdownList placeholder="Excel Workbook (.xlsx)" />}></FormField>
+                        <FormField label="Select link" editor={ <DropdownList value="URL" /> } />
+                        <FormField label="URL address" editor={ <Textbox value="Input value" /> } />
                     </Form>
                 </Window>
             </section>
 
             <section>
-                <Window title="Birth Date validaiton error" actions={[ 'x' ]} className="k-spreadsheet-window" actionButtonsAlign="start" actionButtons={
+                <Window title="Insert Link" 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>
-
-            <section>
-                <Window title="Insert image" actions={[ 'x' ]} className="k-spreadsheet-window" actionButtonsAlign="start" actionButtons={
-                    <>
-                        <Button themeColor="primary">Update</Button>
+                        <Button themeColor="primary">Insert</Button>
                         <Button>Cancel</Button>
+                        <span className="k-spacer"></span>
+                        <Button fillMode="clear" themeColor="primary">Remove link</Button>
                     </>
                 }>
-                    <Dropzone />
-
-                    <Upload async status="upload"></Upload>
+                    <Form>
+                        <FormField label="Select link" editor={ <DropdownList value="Internal" /> } />
+                        <FormField label="Cell reference" editor={ <Textbox value="B3:B11" /> } />
+                        <FormField label="From sheet" editor={
+                            <ListBox style={{ width: "100%" }}>
+                                <ListItem>Sheet 1</ListItem>
+                                <ListItem>Sheet 2</ListItem>
+                                <ListItem>Sheet 3</ListItem>
+                                <ListItem>Sheet 4</ListItem>
+                            </ListBox>
+                        }/>
+                    </Form>
                 </Window>
             </section>
 
             <section>
-                <Window title="Merge cells" actions={[ 'x' ]} className="k-spreadsheet-window" actionButtonsAlign="start" actionButtons={
+                <Window title="Insert Chart" actions={[ 'x' ]} className="k-spreadsheet-window" actionButtonsAlign="start" actionButtons={
                     <>
                         <Button themeColor="primary">Insert</Button>
                         <Button>Cancel</Button>
                     </>
                 }>
                     <Form>
-                        <FormField
-                            editor={
-                                <RadioGroup>
-                                    <RadioItem>
-                                        <RadioButtonLabel checked>Merge all</RadioButtonLabel>
-                                    </RadioItem>
-                                    <RadioItem>
-                                        <RadioButtonLabel>Merge horizontally</RadioButtonLabel>
-                                    </RadioItem>
-                                    <RadioItem>
-                                        <RadioButtonLabel>Merge vertically</RadioButtonLabel>
-                                    </RadioItem>
-                                    <RadioItem>
-                                        <RadioButtonLabel>Unmerge</RadioButtonLabel>
-                                    </RadioItem>
-                                </RadioGroup>
-                            }
-                        >
-                        </FormField>
+                        <FormField label="Select chart type" editor={ <DropdownList value="Donut" /> } />
                     </Form>
                 </Window>
             </section>
+
         </div>
     </>
 );

package/src/spreadsheet/tests/{spreadsheet-tools-popup.tsx → spreadsheet-jquery.tsx}

@@ -5,7 +5,7 @@ import { DropdownList } from '../../dropdownlist';
 import { Icon } from '../../icon';
 import { MenuButton } from '../../menu-button';
 import { Toolbar, ToolbarSeparator } from '../../toolbar';
-import { MenuItem, MenuList, MenuSeparator } from '../../menu';
+
 
 const style = `
     .k-spreadsheet-view {
@@ -24,11 +24,11 @@ const style = `
     }
 `;
 
-export default () => (
+export default () =>(
     <>
         <style>{style}</style>
         <div id="test-area">
-            <div style={{ width: '100%' }} className="k-widget k-spreadsheet">
+            <div style={{ width: '100%' }} className="k-widget k-spreadsheet k-spreadsheet-legacy">
                 <div className="k-tabstrip-wrapper">
                     <div className="k-spreadsheet-quick-access-toolbar">
                         <Button icon="undo"></Button>
@@ -73,27 +73,26 @@ export default () => (
                                 <MenuButton icon="foreground-color" showArrow></MenuButton>
                                 <ToolbarSeparator></ToolbarSeparator>
                                 <MenuButton icon="droplet" showArrow></MenuButton>
-                                <MenuButton icon="borders-all" showArrow ></MenuButton>
+                                <MenuButton icon="borders-all" showArrow></MenuButton>
+                                <ToolbarSeparator></ToolbarSeparator>
+                                <MenuButton icon="align-left" showArrow></MenuButton>
+                                <Button icon="text-wrap"></Button>
                                 <ToolbarSeparator></ToolbarSeparator>
-                                <MenuButton icon="align-left" showArrow className="k-hidden"></MenuButton>
-                                <Button icon="text-wrap" className="k-hidden"></Button>
-                                <ToolbarSeparator className="k-hidden"></ToolbarSeparator>
-                                <ButtonGroup className="k-hidden">
+                                <ButtonGroup>
                                     <Button icon="decimal-decrease"></Button>
                                     <Button icon="decimal-increase"></Button>
                                 </ButtonGroup>
-                                <Button icon="more-vertical"></Button>
-                                <ToolbarSeparator className="k-hidden"></ToolbarSeparator>
-                                <Button icon="filter" className="k-hidden"></Button>
-                                <DropdownList className="k-hidden" value="Custom format" showValue={false} valueIconName="custom-format" />
-                                <Button className="k-hidden" icon="link"></Button>
-                                <ToolbarSeparator className="k-hidden"></ToolbarSeparator>
-                                <Button className="k-hidden" icon="image"></Button>
-                                <Button className="k-hidden" icon="comment"></Button>
-                                <ToolbarSeparator className="k-hidden"></ToolbarSeparator>
-                                <MenuButton className="k-hidden" icon="pane-freeze" showArrow></MenuButton>
-                                <MenuButton className="k-hidden" icon="cells-merge" showArrow></MenuButton>
-                                <Button className="k-hidden" icon="borders-none"></Button>
+                                <ToolbarSeparator></ToolbarSeparator>
+                                <Button icon="filter"></Button>
+                                <DropdownList value="Custom format" showValue={false} valueIconName="custom-format" />
+                                <Button icon="link"></Button>
+                                <ToolbarSeparator></ToolbarSeparator>
+                                <Button icon="image"></Button>
+                                <Button icon="comment"></Button>
+                                <ToolbarSeparator></ToolbarSeparator>
+                                <MenuButton icon="pane-freeze" showArrow></MenuButton>
+                                <MenuButton icon="cells-merge" showArrow></MenuButton>
+                                <Button icon="borders-none"></Button>
                             </Toolbar>
                         </div>
                     </div>
@@ -575,29 +574,6 @@ export default () => (
                     </div>
                 </div>
             </div>
-
-            <div className="k-animation-container" style={{ position: "absolute", top: "110px", left: "780px" }}>
-                <div className="k-toolbar-popup k-popup k-menu-popup">
-                    <MenuList>
-                        <MenuItem text="Alignment" icon="align-left"></MenuItem>
-                        <MenuItem text="Wrap text" icon="text-wrap"></MenuItem>
-                        <MenuSeparator></MenuSeparator>
-                        <MenuItem text="Decrease decimal" icon="decimal-decrease"></MenuItem>
-                        <MenuItem text="Increase decimal" icon="decimal-increase"></MenuItem>
-                        <MenuSeparator></MenuSeparator>
-                        <MenuItem text="Filter" icon="filter"></MenuItem>
-                        <MenuItem text="Custom format" icon="custom-format"></MenuItem>
-                        <MenuItem text="Link" icon="link"></MenuItem>
-                        <MenuSeparator></MenuSeparator>
-                        <MenuItem text="Insert image" icon="image"></MenuItem>
-                        <MenuItem text="Insert comment" icon="comment"></MenuItem>
-                        <MenuSeparator></MenuSeparator>
-                        <MenuItem text="Freeze panes" icon="pane-freeze"></MenuItem>
-                        <MenuItem text="Merge cells" icon="cells-merge"></MenuItem>
-                        <MenuItem text="Toggle gridlines" icon="borders-none"></MenuItem>
-                    </MenuList>
-                </div>
-            </div>
         </div>
     </>
 );

package/src/spreadsheet/tests/spreadsheet-print.tsx

@@ -0,0 +1,179 @@
+import { Window } from '../../window';
+import { Button } from '../../button';
+import { Fieldset, Form, FormField } from '../../form';
+import { RadioButtonLabel, RadioGroup, RadioItem } from '../../radio';
+import { Textbox } from '../../textbox';
+import { DropdownList } from '../../dropdownlist';
+import { NumericTextbox } from '../../numerictextbox';
+import { Checkbox } from '../../checkbox';
+
+
+const style = `
+    .k-window {
+        position: relative;
+    }
+`;
+
+export default () =>(
+    <>
+        <style>{style}</style>
+        <div id="test-area" className="k-d-grid k-grid-cols-1">
+
+            <section>
+                <Window style={{ width: "620px" }} title="Print" actions={[ 'x' ]} className="k-spreadsheet-window" actionButtonsAlign="start" actionButtons={
+                    <>
+                        <Button themeColor="primary">Save</Button>
+                    </>
+                }>
+                    <div className="k-tabstrip k-tabstrip-top">
+                        <div className="k-tabstrip-items-wrapper k-hstack">
+                            <ul className="k-tabstrip-items k-reset">
+                                <li className="k-item k-first k-active"><span className="k-link">Print</span></li>
+                                <li className="k-item k-last"><span className="k-link">Format</span></li>
+                            </ul>
+                        </div>
+                        <div className="k-tabstrip-content k-active">
+                            <Form tag="div" layout="grid">
+                                <Fieldset legend="Settings" layout="grid" cols={2} gapX={4}>
+                                    <FormField
+                                        colSpan="1"
+                                        label="Print"
+                                        editor={ <DropdownList value="Selection" />}>
+                                    </FormField>
+                                    <FormField
+                                        colSpan="1"
+                                        label="Paper size"
+                                        editor={ <DropdownList value="A4" />}>
+                                    </FormField>
+                                </Fieldset>
+                                <Fieldset legend="Orientation" layout="grid" cols={1} gapX={4}>
+                                    <FormField
+                                        colSpan="4"
+                                        label=""
+                                        editor={
+                                            <RadioGroup layout="horizontal">
+                                                <RadioItem>
+                                                    <RadioButtonLabel>Auto</RadioButtonLabel>
+                                                </RadioItem>
+                                                <RadioItem>
+                                                    <RadioButtonLabel>Portrait</RadioButtonLabel>
+                                                </RadioItem>
+                                                <RadioItem>
+                                                    <RadioButtonLabel>Landscape</RadioButtonLabel>
+                                                </RadioItem>
+                                            </RadioGroup>
+                                        }>
+                                    </FormField>
+                                </Fieldset>
+                                <Fieldset legend="Pages" layout="grid" cols={4} gapX={4}>
+                                    <FormField
+                                        colSpan="1"
+                                        label="Pages"
+                                        editor={
+                                            <RadioGroup layout="horizontal">
+                                                <RadioItem>
+                                                    <RadioButtonLabel>All</RadioButtonLabel>
+                                                </RadioItem>
+                                                <RadioItem>
+                                                    <RadioButtonLabel>Range</RadioButtonLabel>
+                                                </RadioItem>
+                                            </RadioGroup>
+                                        }>
+                                    </FormField>
+                                    <FormField colSpan="3" label="&nbsp;" editor={ <Textbox placeholder="Example: 2 or 1 - 3" />}></FormField>
+                                </Fieldset>
+                                <Fieldset legend="Margins Unit" layout="grid" cols={4} gapX={4}>
+                                    <FormField
+                                        colSpan="1"
+                                        label="Top"
+                                        editor={ <NumericTextbox value="25.0" />}>
+                                    </FormField>
+                                    <FormField
+                                        colSpan="1"
+                                        label="&nbsp;"
+                                        editor={ <DropdownList value="mm" />}>
+                                    </FormField>
+                                    <FormField
+                                        colSpan="1"
+                                        label="Bottom"
+                                        editor={ <NumericTextbox value="25.0" />}>
+                                    </FormField>
+                                    <FormField
+                                        colSpan="1"
+                                        label="&nbsp;"
+                                        editor={ <DropdownList value="mm" />}>
+                                    </FormField>
+                                    <FormField
+                                        colSpan="1"
+                                        label="Left"
+                                        editor={ <NumericTextbox value="25.0" />}>
+                                    </FormField>
+                                    <FormField
+                                        colSpan="1"
+                                        label="&nbsp;"
+                                        editor={ <DropdownList value="mm" />}>
+                                    </FormField>
+                                    <FormField
+                                        colSpan="1"
+                                        label="Right"
+                                        editor={ <NumericTextbox value="25.0" />}>
+                                    </FormField>
+                                    <FormField
+                                        colSpan="1"
+                                        label="&nbsp;"
+                                        editor={ <DropdownList value="mm" />}>
+                                    </FormField>
+                                </Fieldset>
+                            </Form>
+                        </div>
+                    </div>
+                </Window>
+            </section>
+
+            <section>
+                <Window style={{ width: "620px" }} title="Print" actions={[ 'x' ]} className="k-spreadsheet-window" actionButtonsAlign="start" actionButtons={
+                    <>
+                        <Button themeColor="primary">Save</Button>
+                    </>
+                }>
+                    <div className="k-tabstrip k-tabstrip-top">
+                        <div className="k-tabstrip-items-wrapper k-hstack">
+                            <ul className="k-tabstrip-items k-reset">
+                                <li className="k-item k-first"><span className="k-link">Print</span></li>
+                                <li className="k-item k-last k-active"><span className="k-link">Format</span></li>
+                            </ul>
+                        </div>
+                        <div className="k-tabstrip-content k-active">
+                            <Form tag="div" layout="grid">
+                                <FormField label="Show" editor={
+                                    <div className="k-search-options k-checkbox-list">
+                                        <span className="k-checkbox-list-item">
+                                            <Checkbox />
+                                            <label className="k-checkbox-label">Grid lines</label>
+                                        </span>
+                                        <span className="k-checkbox-list-item">
+                                            <Checkbox />
+                                            <label className="k-checkbox-label">Row and column headings</label>
+                                        </span>
+                                    </div>
+                                }/>
+                                <FormField label="Center on page" editor={
+                                    <div className="k-search-options k-checkbox-list">
+                                        <span className="k-checkbox-list-item">
+                                            <Checkbox />
+                                            <label className="k-checkbox-label">Horizontally</label>
+                                        </span>
+                                        <span className="k-checkbox-list-item">
+                                            <Checkbox />
+                                            <label className="k-checkbox-label">Vertically</label>
+                                        </span>
+                                    </div>
+                                } />
+                            </Form>
+                        </div>
+                    </div>
+                </Window>
+            </section>
+        </div>
+    </>
+);