@progress/kendo-themes-html 5.4.2-dev.3 → 5.4.2-dev.4

package/src/editor/tests/editor-react.tsx

@@ -0,0 +1,241 @@
+import React from 'react';
+import ReactDOM from 'react-dom/client';
+import { Button } from '../../button';
+import { ColorPicker } from '../../colorpicker';
+import { DropdownList } from '../../dropdownlist';
+
+const root = ReactDOM.createRoot(
+    document.getElementById('app') as HTMLElement
+);
+
+const styles = `
+/* needed for test */
+.k-editor-content > .ProseMirror {
+    white-space: normal;
+}
+`;
+
+root.render(
+    <>
+        <style>{styles}</style>
+        <div id="test-area" className="k-d-grid k-grid-cols-2">
+            <span>React Editor with iFrame</span>
+            <span>React Editor without iFrame</span>
+            <section>
+                <div className="k-widget k-editor" style={{ height: "400px" }}>
+                    <div className="k-editor-toolbar k-toolbar">
+                        <div className="k-tool-group">
+                            <div className="k-button-group">
+                                <Button icon="bold"></Button>
+                                <Button icon="italic"></Button>
+                                <Button icon="underline"></Button>
+                                <Button icon="strikethrough"></Button>
+                            </div>
+                        </div>
+                        <div className="k-tool-group">
+                            <div className="k-button-group">
+                                <Button icon="subscript"></Button>
+                                <Button icon="superscript"></Button>
+                            </div>
+                        </div>
+                        <div className="k-tool-group">
+                            <div className="k-button-group">
+                                <Button icon="align-left"></Button>
+                                <Button icon="align-center"></Button>
+                                <Button icon="align-right"></Button>
+                                <Button icon="align-justify"></Button>
+                            </div>
+                        </div>
+                        <div className="k-tool-group">
+                            <div className="k-button-group">
+                                <Button icon="indent-increase"></Button>
+                                <Button icon="indent-decrease"></Button>
+                            </div>
+                        </div>
+                        <div className="k-tool-group">
+                            <div className="k-button-group">
+                                <Button icon="list-ordered"></Button>
+                                <Button icon="list-unordered"></Button>
+                            </div>
+                        </div>
+                        <div className="k-tool-group">
+                            <DropdownList value="Font Size" />
+                        </div>
+                        <div className="k-tool-group">
+                            <DropdownList value="Font Name" />
+                        </div>
+                        <div className="k-tool-group">
+                            <DropdownList value="Paragraph" />
+                        </div>
+                        <div className="k-tool-group">
+                            <div className="k-button-group">
+                                <Button icon="undo"></Button>
+                                <Button icon="redo"></Button>
+                            </div>
+                        </div>
+                        <div className="k-tool-group">
+                            <div className="k-button-group">
+                                <Button icon="link-horizontal"></Button>
+                                <Button icon="unlink-horizontal"></Button>
+                                <Button icon="image"></Button>
+                                <Button icon="html"></Button>
+                            </div>
+                        </div>
+                        <div className="k-tool-group">
+                            <div className="k-button-group">
+                                <Button icon="table-insert"></Button>
+                            </div>
+                        </div>
+                        <div className="k-tool-group">
+                            <div className="k-button-group">
+                                <Button icon="table-row-insert-above"></Button>
+                                <Button icon="table-row-insert-below"></Button>
+                                <Button icon="table-column-insert-left"></Button>
+                                <Button icon="table-column-insert-right"></Button>
+                            </div>
+                        </div>
+                        <div className="k-tool-group">
+                            <div className="k-button-group">
+                                <Button icon="table-row-delete"></Button>
+                                <Button icon="table-column-delete"></Button>
+                                <Button icon="table-delete"></Button>
+                            </div>
+                        </div>
+                        <div className="k-tool-group">
+                            <div className="k-button-group">
+                                <Button icon="cells-merge"></Button>
+                                <Button icon="cell-split-horizontally"></Button>
+                            </div>
+                        </div>
+                        <div className="k-tool-group">
+                            <ColorPicker value="red" valueIconName="foreground-color" />
+                        </div>
+                        <div className="k-tool-group">
+                            <ColorPicker value="fuchsia" valueIconName="paint" />
+                        </div>
+                        <div className="k-tool-group">
+                            <Button icon="clear-css"></Button>
+                        </div>
+                    </div>
+                    <div className="k-editor-content"><iframe frameBorder="0" className="k-iframe" src="editor-iFrameContent.html"></iframe></div>
+                </div>
+            </section>
+
+            <section>
+                <div className="k-widget k-editor" style={{ height: "400px" }}>
+                    <div className="k-editor-toolbar k-toolbar">
+                        <div className="k-tool-group">
+                            <div className="k-button-group">
+                                <Button icon="bold"></Button>
+                                <Button icon="italic"></Button>
+                                <Button icon="underline"></Button>
+                                <Button icon="strikethrough"></Button>
+                            </div>
+                        </div>
+                        <div className="k-tool-group">
+                            <div className="k-button-group">
+                                <Button icon="subscript"></Button>
+                                <Button icon="superscript"></Button>
+                            </div>
+                        </div>
+                        <div className="k-tool-group">
+                            <div className="k-button-group">
+                                <Button icon="align-left"></Button>
+                                <Button icon="align-center"></Button>
+                                <Button icon="align-right"></Button>
+                                <Button icon="align-justify"></Button>
+                            </div>
+                        </div>
+                        <div className="k-tool-group">
+                            <div className="k-button-group">
+                                <Button icon="indent-increase"></Button>
+                                <Button icon="indent-decrease"></Button>
+                            </div>
+                        </div>
+                        <div className="k-tool-group">
+                            <div className="k-button-group">
+                                <Button icon="list-ordered"></Button>
+                                <Button icon="list-unordered"></Button>
+                            </div>
+                        </div>
+                        <div className="k-tool-group">
+                            <DropdownList value="Font Size" />
+                        </div>
+                        <div className="k-tool-group">
+                            <DropdownList value="Font Name" />
+                        </div>
+                        <div className="k-tool-group">
+                            <DropdownList value="Paragraph" />
+                        </div>
+                        <div className="k-tool-group">
+                            <div className="k-button-group">
+                                <Button icon="undo"></Button>
+                                <Button icon="redo"></Button>
+                            </div>
+                        </div>
+                        <div className="k-tool-group">
+                            <div className="k-button-group">
+                                <Button icon="link-horizontal"></Button>
+                                <Button icon="unlink-horizontal"></Button>
+                                <Button icon="image"></Button>
+                                <Button icon="html"></Button>
+                            </div>
+                        </div>
+                        <div className="k-tool-group">
+                            <div className="k-button-group">
+                                <Button icon="table-insert"></Button>
+                            </div>
+                        </div>
+                        <div className="k-tool-group">
+                            <div className="k-button-group">
+                                <Button icon="table-row-insert-above"></Button>
+                                <Button icon="table-row-insert-below"></Button>
+                                <Button icon="table-column-insert-left"></Button>
+                                <Button icon="table-column-insert-right"></Button>
+                            </div>
+                        </div>
+                        <div className="k-tool-group">
+                            <div className="k-button-group">
+                                <Button icon="table-row-delete"></Button>
+                                <Button icon="table-column-delete"></Button>
+                                <Button icon="table-delete"></Button>
+                            </div>
+                        </div>
+                        <div className="k-tool-group">
+                            <div className="k-button-group">
+                                <Button icon="cells-merge"></Button>
+                                <Button icon="cell-split-horizontally"></Button>
+                            </div>
+                        </div>
+                        <div className="k-tool-group">
+                            <ColorPicker value="red" valueIconName="foreground-color" />
+                        </div>
+                        <div className="k-tool-group">
+                            <ColorPicker value="fuchsia" valueIconName="paint"/>
+                        </div>
+                        <div className="k-tool-group">
+                            <Button icon="clear-css"></Button>
+                        </div>
+                    </div>
+                    <div className="k-editor-content"><div className="ProseMirror"><p>The Kendo React Editor allows your users to edit HTML in a familiar, user-friendly way.</p><p>In this version, the Editor provides the core HTML editing engine which includes basic text formatting, hyperlinks, and lists. The widget <strong>outputs identical HTML</strong> across all major browsers, follows accessibility standards, and provides API for content manipulation.</p><p>Features include:</p><ul><li>Text formatting</li><li>Bulleted and numbered lists</li><li>Hyperlinks</li><li>Cross-browser support</li><li>Identical HTML output across browsers</li></ul></div></div>
+                </div>
+            </section>
+
+            <section></section>
+            <section>
+                <div className="k-widget k-editor">
+                    <div className="k-editor-toolbar k-toolbar">
+                        <div className="k-tool-group">
+                            <div className="k-button-group">
+                                <Button icon="bold"></Button>
+                                <Button icon="italic"></Button>
+                                <Button icon="underline"></Button>
+                            </div>
+                        </div>
+                    </div>
+                    <div className="k-editor-content"><div contentEditable="true" className="ProseMirror"><p data-placeholder="Enter some content ..." className="k-placeholder"><br /></p></div></div>
+                </div>
+            </section>
+        </div>
+    </>
+);

package/src/editor/tests/editor-table-wizard-accessibility.tsx

@@ -0,0 +1,107 @@
+import React from 'react';
+import ReactDOM from 'react-dom/client';
+import { ActionButtons } from '../../action-buttons';
+import { Button } from '../../button';
+import { DropdownList } from '../../dropdownlist';
+import { NumericTextbox } from '../../numerictextbox';
+import { Textarea } from '../../textarea';
+import { Textbox } from '../../textbox';
+
+const root = ReactDOM.createRoot(
+    document.getElementById('app') as HTMLElement
+);
+
+const styles = `
+    #test-area {
+        width: 600px;
+    }
+    .k-window {
+        width: 100%;
+        position: relative;
+    }
+`;
+
+root.render(
+    <>
+        <style>{styles}</style>
+        <div id="test-area" className="k-d-grid">
+            <section>
+                <div className="k-window k-editor-dialog k-editor-table-wizard-dialog">
+                    <div className="k-window-titlebar">
+                        <span className="k-window-title">Table Wizard</span>
+                        <div className="k-window-actions">
+                            <Button fillMode="flat" icon="close"></Button>
+                        </div>
+                    </div>
+                    <div className="k-window-content">
+                        <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-loading k-complete"></span><span className="k-link">Table</span></li>
+                                    <li className="k-item"><span className="k-loading k-complete"></span><span className="k-link">Cell</span></li>
+                                    <li className="k-item k-last k-tab-on-top k-state-active"><span className="k-loading k-complete"></span><span className="k-link">Accessibility</span></li>
+                                </ul>
+                            </div>
+                            <div className="k-tabstrip-content k-state-active">
+                                <div className="k-form k-form-horizontal">
+                                    <div className="k-form-field">
+                                        <div className="k-form-label">
+                                            <label>Header Rows</label>
+                                        </div>
+                                        <div className="k-form-field-wrap">
+                                            <NumericTextbox />
+                                        </div>
+                                    </div>
+                                    <div className="k-form-field">
+                                        <div className="k-form-label">
+                                            <label>Header Cols</label>
+                                        </div>
+                                        <div className="k-form-field-wrap">
+                                            <NumericTextbox />
+                                        </div>
+                                    </div>
+                                    <div className="k-form-field">
+                                        <div className="k-form-label">
+                                            <label>Caption</label>
+                                        </div>
+                                        <div className="k-form-field-wrap">
+                                            <Textbox />
+                                        </div>
+                                    </div>
+                                    <div className="k-form-field">
+                                        <div className="k-form-label">
+                                            <label>Alignment</label>
+                                        </div>
+                                        <div className="k-form-field-wrap">
+                                            <DropdownList className="k-align" showValue={false} value="Remove align" valueIconName="align-remove" style={{ width: "min-content" }} />
+                                        </div>
+                                    </div>
+                                    <div className="k-form-field">
+                                        <div className="k-form-label">
+                                            <label>Summary</label>
+                                        </div>
+                                        <div className="k-form-field-wrap">
+                                            <Textarea className="k-editor-accessibility-summary" placeholder="Summary attribute is not HTML5 compatible." />
+                                        </div>
+                                    </div>
+                                    <div className="k-form-field">
+                                        <div className="k-form-label">
+                                            <label>Associate headers</label>
+                                        </div>
+                                        <div className="k-form-field-wrap">
+                                            <DropdownList value="None" />
+                                        </div>
+                                    </div>
+                                </div>
+                            </div>
+                        </div>
+                    </div>
+                    <ActionButtons className="k-window-buttons" alignment="end">
+                        <Button>Cancel</Button>
+                        <Button themeColor="primary">Update</Button>
+                    </ActionButtons>
+                </div>
+            </section>
+        </div>
+    </>
+);

package/src/expansion-panel/tests/expansion-panel-rtl.tsx

@@ -0,0 +1,127 @@
+import React from 'react';
+import ReactDOM from 'react-dom/client';
+import { Icon } from '../../icon';
+
+const root = ReactDOM.createRoot(
+    document.getElementById('app') as HTMLElement
+);
+
+root.render(
+    <>
+        <div id="test-area">
+
+            <div className="k-expander" dir="rtl">
+                <div className="k-expander-header">
+                    <div className="k-expander-title">Collapsed panel</div>
+                    <span className="k-spacer"></span>
+                    <div className="k-expander-sub-title">South America</div>
+                    <Icon className="k-expander-indicator" name="arrow-chevron-down" />
+                </div>
+                <div className="k-expander-content-wrapper k-display-none">
+                    <div className="k-expander-content">Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry&apos;s standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.
+                    </div>
+                </div>
+            </div>
+            <div className="k-expander k-expanded" dir="rtl">
+                <div className="k-expander-header">
+                    <div className="k-expander-title">Expanded panel</div>
+                    <span className="k-spacer"></span>
+                    <div className="k-expander-sub-title">South America</div>
+                    <Icon className="k-expander-indicator" name="arrow-chevron-up" />
+                </div>
+                <div className="k-expander-content-wrapper">
+                    <div className="k-expander-content">Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry&apos;s standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.
+                    </div>
+                </div>
+            </div>
+            <div className="k-expander k-expanded k-state-focus" dir="rtl">
+                <div className="k-expander-header">
+                    <div className="k-expander-title">Expanded panel</div>
+                    <span className="k-spacer"></span>
+                    <div className="k-expander-sub-title">South America</div>
+                    <Icon className="k-expander-indicator" name="arrow-chevron-up" />
+                </div>
+                <div className="k-expander-content-wrapper">
+                    <div className="k-expander-content">Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry&apos;s standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.
+                    </div>
+                </div>
+            </div>
+            <div className="k-expander" dir="rtl">
+                <div className="k-expander-header">
+                    <div className="k-expander-title">Collapsed panel</div>
+                    <span className="k-spacer"></span>
+                    <div className="k-expander-sub-title">South America</div>
+                    <Icon className="k-expander-indicator" name="arrow-chevron-down" />
+                </div>
+                <div className="k-expander-content-wrapper k-display-none">
+                    <div className="k-expander-content">Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry&apos;s standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.
+                    </div>
+                </div>
+            </div>
+            <div className="k-expander k-state-focus" dir="rtl">
+                <div className="k-expander-header">
+                    <div className="k-expander-title">Focus state</div>
+                    <span className="k-spacer"></span>
+                    <div className="k-expander-sub-title">South America</div>
+                    <Icon className="k-expander-indicator" name="arrow-chevron-down" />
+                </div>
+                <div className="k-expander-content-wrapper k-display-none">
+                    <div className="k-expander-content">Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry&apos;s standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.
+                    </div>
+                </div>
+            </div>
+            <div className="k-expander" dir="rtl">
+                <div className="k-expander-header k-state-hover">
+                    <div className="k-expander-title">Hover state</div>
+                    <span className="k-spacer"></span>
+                    <div className="k-expander-sub-title">South America</div>
+                    <Icon className="k-expander-indicator" name="arrow-chevron-down" />
+                </div>
+                <div className="k-expander-content-wrapper k-display-none">
+                    <div className="k-expander-content">Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry&apos;s standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.
+                    </div>
+                </div>
+            </div>
+            <div className="k-expander k-state-focus" dir="rtl">
+                <div className="k-expander-header k-state-hover">
+                    <div className="k-expander-title">Hover & Focus state</div>
+                    <span className="k-spacer"></span>
+                    <div className="k-expander-sub-title">South America</div>
+                    <Icon className="k-expander-indicator" name="arrow-chevron-down" />
+                </div>
+                <div className="k-expander-content-wrapper k-display-none">
+                    <div className="k-expander-content">Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry&apos;s standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.
+                    </div>
+                </div>
+            </div>
+            <div className="k-expander" dir="rtl">
+                <div className="k-expander-header k-state-disabled">
+                    <div className="k-expander-title">Disabled panel</div>
+                    <span className="k-spacer"></span>
+                    <div className="k-expander-sub-title">South America</div>
+                    <Icon className="k-expander-indicator" name="arrow-chevron-down" />
+                </div>
+                <div className="k-expander-content-wrapper k-display-none">
+                    <div className="k-expander-content">Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry&apos;s standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.
+                    </div>
+                </div>
+            </div>
+            <div className="k-expander k-expanded" dir="rtl">
+                <div className="k-expander-header">
+                    <div className="k-expander-title">Content with fixed height</div>
+                    <span className="k-spacer"></span>
+                    <div className="k-expander-sub-title">South America</div>
+                    <Icon className="k-expander-indicator" name="arrow-chevron-up" />
+                </div>
+                <div className="k-expander-content-wrapper">
+                    <div className="k-expander-content" style={{ height: "100px" }}>
+                        <div style={{ height: "100%", overflow: "auto" }}>
+                            Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry&apos;s standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.There are many variations of passages of Lorem Ipsum available, but the majority have suffered alteration in some form, by injected humour, or randomised words which don&apos;t look even slightly believable. If you are going to use a passage of Lorem Ipsum, you need to be sure there isn&apos;t anything embarrassing hidden in the middle of text. All the Lorem Ipsum generators on the Internet tend to repeat predefined chunks as necessary, making this the first true generator on the Internet. It uses a dictionary of over 200 Latin words, combined with a handful of model sentence structures, to generate Lorem Ipsum which looks reasonable. The generated Lorem Ipsum is therefore always free from repetition, injected humour, or non-characteristic words etc.
+                        </div>
+                    </div>
+                </div>
+            </div>
+
+        </div>
+    </>
+);

package/src/expansion-panel/tests/expansion-panel.tsx

@@ -0,0 +1,125 @@
+import React from 'react';
+import ReactDOM from 'react-dom/client';
+import { Icon } from '../../icon';
+
+const root = ReactDOM.createRoot(
+    document.getElementById('app') as HTMLElement
+);
+
+root.render(
+    <>
+        <div id="test-area">
+            <div className="k-expander">
+                <div className="k-expander-header">
+                    <div className="k-expander-title">Collapsed panel</div>
+                    <span className="k-spacer"></span>
+                    <div className="k-expander-sub-title">South America</div>
+                    <Icon className="k-expander-indicator" name="arrow-chevron-down" />
+                </div>
+                <div className="k-expander-content-wrapper k-display-none">
+                    <div className="k-expander-content">Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry&apos;s standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.
+                    </div>
+                </div>
+            </div>
+            <div className="k-expander k-expanded">
+                <div className="k-expander-header">
+                    <div className="k-expander-title">Expanded panel</div>
+                    <span className="k-spacer"></span>
+                    <div className="k-expander-sub-title">South America</div>
+                    <Icon className="k-expander-indicator" name="arrow-chevron-up" />
+                </div>
+                <div className="k-expander-content-wrapper">
+                    <div className="k-expander-content">Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry&apos;s standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.
+                    </div>
+                </div>
+            </div>
+            <div className="k-expander k-expanded k-state-focus">
+                <div className="k-expander-header">
+                    <div className="k-expander-title">Expanded Focused panel</div>
+                    <span className="k-spacer"></span>
+                    <div className="k-expander-sub-title">South America</div>
+                    <Icon className="k-expander-indicator" name="arrow-chevron-up" />
+                </div>
+                <div className="k-expander-content-wrapper">
+                    <div className="k-expander-content">Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry&apos;s standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.
+                    </div>
+                </div>
+            </div>
+            <div className="k-expander">
+                <div className="k-expander-header">
+                    <div className="k-expander-title">Collapsed panel</div>
+                    <span className="k-spacer"></span>
+                    <div className="k-expander-sub-title">South America</div>
+                    <Icon className="k-expander-indicator" name="arrow-chevron-down" />
+                </div>
+                <div className="k-expander-content-wrapper k-display-none">
+                    <div className="k-expander-content">Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry&apos;s standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.
+                    </div>
+                </div>
+            </div>
+            <div className="k-expander k-state-focus">
+                <div className="k-expander-header">
+                    <div className="k-expander-title">Focus state</div>
+                    <span className="k-spacer"></span>
+                    <div className="k-expander-sub-title">South America</div>
+                    <Icon className="k-expander-indicator" name="arrow-chevron-down" />
+                </div>
+                <div className="k-expander-content-wrapper k-display-none">
+                    <div className="k-expander-content">Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry&apos;s standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.
+                    </div>
+                </div>
+            </div>
+            <div className="k-expander">
+                <div className="k-expander-header k-state-hover">
+                    <div className="k-expander-title">Hover state</div>
+                    <span className="k-spacer"></span>
+                    <div className="k-expander-sub-title">South America</div>
+                    <Icon className="k-expander-indicator" name="arrow-chevron-down" />
+                </div>
+                <div className="k-expander-content-wrapper k-display-none">
+                    <div className="k-expander-content">Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry&apos;s standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.
+                    </div>
+                </div>
+            </div>
+            <div className="k-expander k-state-focus">
+                <div className="k-expander-header k-state-hover">
+                    <div className="k-expander-title">Hover & Focus state</div>
+                    <span className="k-spacer"></span>
+                    <div className="k-expander-sub-title">South America</div>
+                    <Icon className="k-expander-indicator" name="arrow-chevron-down" />
+                </div>
+                <div className="k-expander-content-wrapper k-display-none">
+                    <div className="k-expander-content">Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry&apos;s standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.
+                    </div>
+                </div>
+            </div>
+            <div className="k-expander">
+                <div className="k-expander-header k-state-disabled">
+                    <div className="k-expander-title">Disabled panel</div>
+                    <span className="k-spacer"></span>
+                    <div className="k-expander-sub-title">South America</div>
+                    <Icon className="k-expander-indicator" name="arrow-chevron-down" />
+                </div>
+                <div className="k-expander-content-wrapper k-display-none">
+                    <div className="k-expander-content">Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry&apos;s standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.
+                    </div>
+                </div>
+            </div>
+            <div className="k-expander k-expanded">
+                <div className="k-expander-header">
+                    <div className="k-expander-title">Content with fixed height</div>
+                    <span className="k-spacer"></span>
+                    <div className="k-expander-sub-title">South America</div>
+                    <Icon className="k-expander-indicator" name="arrow-chevron-up" />
+                </div>
+                <div className="k-expander-content-wrapper">
+                    <div className="k-expander-content" style={{ height: "100px" }}>
+                        <div style={{ height: "100%", overflow: "auto" }}>
+                            Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry&apos;s standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.There are many variations of passages of Lorem Ipsum available, but the majority have suffered alteration in some form, by injected humour, or randomised words which don&apos;t look even slightly believable. If you are going to use a passage of Lorem Ipsum, you need to be sure there isn&apos;t anything embarrassing hidden in the middle of text. All the Lorem Ipsum generators on the Internet tend to repeat predefined chunks as necessary, making this the first true generator on the Internet. It uses a dictionary of over 200 Latin words, combined with a handful of model sentence structures, to generate Lorem Ipsum which looks reasonable. The generated Lorem Ipsum is therefore always free from repetition, injected humour, or non-characteristic words etc.
+                        </div>
+                    </div>
+                </div>
+            </div>
+        </div>
+    </>
+);