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

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

@@ -0,0 +1,38 @@
+import { Window } from '../../window';
+import { Button } from '../../button';
+import { Form, FormField } from '../../form';
+import { Textbox } from '../../textbox';
+import { DropdownList } from '../../dropdownlist';
+
+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="Find and Replace" actions={[ 'x' ]} className="k-spreadsheet-window" actionButtonsAlign="start" actionButtons={
+                    <>
+                        <Button themeColor="primary">Done</Button>
+                        <Button>Find</Button>
+                        <Button>Replace</Button>
+                        <Button>Replace All</Button>
+                    </>
+                }>
+                    <Form>
+                        <FormField label="Find" editor={ <Textbox placeholder="Placeholder" /> }/>
+                        <FormField label="Replace with" editor={ <Textbox placeholder="Placeholder" /> }/>
+                        <FormField label="Search within" editor={ <DropdownList value="All Sheets" /> } />
+                    </Form>
+                </Window>
+            </section>
+
+        </div>
+    </>
+);

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

@@ -0,0 +1,76 @@
+import { Window } from '../../window';
+import { Button } from '../../button';
+import { Form, FormField } from '../../form';
+import { Textbox } from '../../textbox';
+import { DropdownList } from '../../dropdownlist';
+import { ListBox } from '../../listbox';
+import { ListItem } from '../../list';
+import { DateInput } from '../../dateinput';
+import { ColorPicker } from '../../colorpicker';
+import { Toolbar } from '../../toolbar';
+
+
+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="Custom Format" actions={[ 'x' ]} className="k-spreadsheet-window" actionButtonsAlign="start" actionButtons={
+                    <>
+                        <Button themeColor="primary">Apply</Button>
+                        <Button>Cancel</Button>
+                    </>
+                }>
+                    <Form>
+                        <FormField label="Category" editor={ <DropdownList value="Date" /> }/>
+                        <FormField label="Sample" editor={ <DateInput value="1/17/2022" /> }/>
+                        <FormField label="Symbol" editor={
+                            <ListBox style={{ width: "100%" }}>
+                                <ListItem>1/17/2022</ListItem>
+                                <ListItem>Monday, January 17, 2022</ListItem>
+                                <ListItem>Monday, January 17, 2022 6:25:37 PM</ListItem>
+                                <ListItem>1/17/2022 6:25 PM</ListItem>
+                                <ListItem>1/17/2022 6:25:37 PM</ListItem>
+                            </ListBox>
+                        }/>
+                    </Form>
+                </Window>
+            </section>
+
+            <section>
+                <Window title="Conditional Formatting" actions={[ 'x' ]} className="k-spreadsheet-window" actionButtonsAlign="start" actionButtons={
+                    <>
+                        <Button themeColor="primary">Apply</Button>
+                        <Button>Cancel</Button>
+                    </>
+                }>
+                    <Form>
+                        <FormField label="Apply to range" editor={ <Textbox placeholder="Placeholder" /> }/>
+                        <FormField label="Format cells if" editor={ <DropdownList value="Cell value" /> }/>
+                        <FormField label="is" editor={ <DropdownList value="Greater than" /> }/>
+                        <FormField label="Apply to range" editor={ <Textbox placeholder="Placeholder" /> }/>
+                        <FormField label="Format with" editor={
+                            <Toolbar resizable>
+                                <Button icon="bold" />
+                                <Button icon="italic" />
+                                <Button icon="underline" />
+                                <Button icon="strikethrough" />
+                                <ColorPicker value="red" valueIconName="foreground-color" />
+                                <ColorPicker value="fuchsia" valueIconName="droplet" />
+                            </Toolbar>
+                        } />
+                    </Form>
+                </Window>
+            </section>
+
+        </div>
+    </>
+);

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

@@ -0,0 +1,45 @@
+import { Window } from '../../window';
+import { Button } from '../../button';
+import { Form, FormField } from '../../form';
+import { DropdownList } from '../../dropdownlist';
+import { ListBox } from '../../listbox';
+import { ListItem } from '../../list';
+
+
+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="Insert formula" actions={[ 'x' ]} className="k-spreadsheet-window" actionButtonsAlign="start" actionButtons={
+                    <>
+                        <Button themeColor="primary">Apply</Button>
+                        <Button>Cancel</Button>
+                    </>
+                }>
+                    <Form>
+                        <FormField label="Category" editor={ <DropdownList value="Date and Time" /> }/>
+                        <FormField label="Pick a formula" hint="Returns the number of dates between the two dates." editor={
+                            <ListBox style={{ width: "100%" }}>
+                                <ListItem>DATE</ListItem>
+                                <ListItem>DATEVALUE</ListItem>
+                                <ListItem>DAY</ListItem>
+                                <ListItem>DAYS</ListItem>
+                                <ListItem>DAYS360</ListItem>
+                            </ListBox>
+                        } />
+                    </Form>
+                </Window>
+            </section>
+
+        </div>
+    </>
+);