@progress/kendo-themes-html 14.7.0-dev.13 → 14.7.0-dev.15

package/src/imageeditor/tests/imageeditor-adaptive-small.tsx

@@ -1,83 +1,5 @@
-import { ImageEditor, ImageEditorPane, ImageEditorOptionList, ImageEditorOptionPreview, ImageEditorResizeHandles, ImageEditorRotateHandle } from '..';
-import { Button } from '../../button';
-import { ButtonGroup } from '../../button-group';
-import { Combobox } from '../../combobox';
-import { NumericTextbox } from '../../numerictextbox';
-import { ColorPicker } from '../../colorpicker';
-import { Form, FormField, Fieldset } from '../../form';
-import { Icon } from '../../icon';
-import { SegmentedControl, SegmentedControlButton } from '../../segmented-control';
-import { ToolbarSeparator } from '../../toolbar';
-
-// Mobile top toolbar has no zoom-level combobox - just the 6 core icon actions, split into two edge-aligned groups
-const mobileToolbarItems = [
-    <Button fillMode="flat" key="mobile-toolbar-button-1" icon="image-add" aria-label="Image Add"></Button>,
-    <ToolbarSeparator key="mobile-toolbar-separator-1"></ToolbarSeparator>,
-    <Button fillMode="flat" key="mobile-toolbar-button-2" icon="undo" aria-label="Undo"></Button>,
-    <Button fillMode="flat" key="mobile-toolbar-button-3" icon="redo" aria-label="Redo"></Button>,
-    <ToolbarSeparator key="mobile-toolbar-separator-2"></ToolbarSeparator>,
-    <Button fillMode="flat" key="mobile-toolbar-button-4" icon="download" aria-label="Download"></Button>,
-    <div className="k-spacer" key="mobile-toolbar-spacer"></div>,
-    <Button fillMode="flat" key="mobile-toolbar-button-5" icon="zoom-in" aria-label="Zoom In"></Button>,
-    <Button fillMode="flat" key="mobile-toolbar-button-6" icon="zoom-out" aria-label="Zoom Out"></Button>
-];
-
-// Same 5 actions as the desktop FloatingToolbar (imageeditor-insert-shape.tsx) - on mobile they dock at the top instead of floating over the canvas
-const contextualToolbarItems = [
-    <Button fillMode="flat" key="contextual-button-1" icon="squares-overlapping-plus" aria-label="Duplicate"></Button>,
-    <Button fillMode="flat" key="contextual-button-2" icon="pencil" aria-label="Edit"></Button>,
-    <ToolbarSeparator key="contextual-separator-1"></ToolbarSeparator>,
-    <Button fillMode="flat" key="contextual-button-3" icon="flip-horizontal" aria-label="Flip Horizontal"></Button>,
-    <Button fillMode="flat" key="contextual-button-4" icon="flip-vertical" aria-label="Flip Vertical"></Button>,
-    <ToolbarSeparator key="contextual-separator-2"></ToolbarSeparator>,
-    <Button fillMode="flat" key="contextual-button-5" icon="trash" aria-label="Delete"></Button>
-];
-
-const sidebarItems = [
-    <Button fillMode="flat" key="sidebar-button-1" icon="image-resize" aria-label="Resize"></Button>,
-    <Button fillMode="flat" key="sidebar-button-2" icon="crop" aria-label="Crop"></Button>,
-    <Button fillMode="flat" key="sidebar-button-3" icon="rotate" aria-label="Rotate"></Button>,
-    <div className="k-separator k-separator-vertical" key="sidebar-separator-1"></div>,
-    <Button fillMode="flat" key="sidebar-button-4" icon="free-text" aria-label="Text"></Button>,
-    <Button fillMode="flat" key="sidebar-button-5" icon="shapes" aria-label="Shapes"></Button>,
-    <div className="k-separator k-separator-vertical" key="sidebar-separator-2"></div>,
-    <Button fillMode="flat" key="sidebar-button-6" icon="drop-half-pixelated" aria-label="Blur"></Button>,
-    <Button fillMode="flat" key="sidebar-button-7" icon="sliders-horizontal" aria-label="Adjustments"></Button>,
-    <Button fillMode="flat" key="sidebar-button-8" icon="circles-three-intersecting" aria-label="Filters"></Button>,
-    <div className="k-separator k-separator-vertical" key="sidebar-separator-3"></div>,
-    <Button fillMode="flat" key="sidebar-button-9" icon="frame-corners" aria-label="Frame"></Button>,
-    <Button fillMode="flat" key="sidebar-button-10" icon="circle-half-tilted" aria-label="Shadow"></Button>
-];
-
-const shapeSidebarItems = [
-    <Button fillMode="flat" key="sidebar-button-1" icon="image-resize" aria-label="Resize"></Button>,
-    <Button fillMode="flat" key="sidebar-button-2" icon="crop" aria-label="Crop"></Button>,
-    <Button fillMode="flat" key="sidebar-button-3" icon="rotate" aria-label="Rotate"></Button>,
-    <div className="k-separator k-separator-vertical" key="sidebar-separator-1"></div>,
-    <Button fillMode="flat" key="sidebar-button-4" icon="free-text" aria-label="Text"></Button>,
-    <Button fillMode="flat" key="sidebar-button-5" icon="shapes" selected aria-label="Shapes"></Button>,
-    <div className="k-separator k-separator-vertical" key="sidebar-separator-2"></div>,
-    <Button fillMode="flat" key="sidebar-button-6" icon="drop-half-pixelated" aria-label="Blur"></Button>,
-    <Button fillMode="flat" key="sidebar-button-7" icon="sliders-horizontal" aria-label="Adjustments"></Button>,
-    <Button fillMode="flat" key="sidebar-button-8" icon="circles-three-intersecting" aria-label="Filters"></Button>,
-    <div className="k-separator k-separator-vertical" key="sidebar-separator-3"></div>,
-    <Button fillMode="flat" key="sidebar-button-9" icon="frame-corners" aria-label="Frame"></Button>,
-    <Button fillMode="flat" key="sidebar-button-10" icon="circle-half-tilted" aria-label="Shadow"></Button>
-];
-
-const shapeTypes = [
-    { label: "Square", icon: "checkbox" },
-    { label: "Rectangle", icon: "rectangle-shape" },
-    { label: "Circle", icon: "circle-shape" },
-    { label: "Oval", icon: "oval-shape" },
-    { label: "Triangle", icon: "kpi-status-hold" },
-    { label: "Star", icon: "star" },
-    { label: "Heart", icon: "heart" },
-    { label: "Diamond", icon: "kpi-status-deny" },
-    { label: "Hexagon", icon: "hexagon-shape" },
-    { label: "Pentagon", icon: "pentagon-shape" },
-    { label: "Arrow", icon: "arrow-right" }
-];
+import { ImageEditor, ImageEditorInsertShape, ImageEditorCanvas, ImageEditorResizeHandles, ImageEditorRotateHandle } from '..';
+import { IMAGEEDITOR_TEST_IMAGE_SRC } from '../constants';
 
 const styles = `
     #test-area {
@@ -98,123 +20,15 @@ export default () => (
 
             <div>
                 <h4>Mobile / Adaptive / Unselected Tool</h4>
-                <ImageEditor adaptive toolbarItems={mobileToolbarItems} sidebarItems={sidebarItems}>
-                    <canvas width="326" height="203" role="img" aria-label="Image being edited" style={{ backgroundImage: "url('/packages/html/assets/sofia.jpg')", backgroundSize: "cover", backgroundPosition: "center", backgroundRepeat: "no-repeat" }}></canvas>
+                <ImageEditor adaptive>
+                    <ImageEditorCanvas adaptive imageSrc={IMAGEEDITOR_TEST_IMAGE_SRC} />
                 </ImageEditor>
             </div>
 
             <div>
                 <h4>Mobile / Adaptive / Selected Tool / Panel Opened</h4>
-                <ImageEditor
-                    adaptive
-                    toolbarItems={contextualToolbarItems}
-                    sidebarItems={shapeSidebarItems}
-                    actionPane={
-                        <ImageEditorPane adaptive title="Shape">
-                            <SegmentedControl thumbStyles={{ width: "50%" }} stretched aria-label="Shape or Line" style={{ flexShrink: 0 }}>
-                                <SegmentedControlButton icon="shapes" selected>Shape</SegmentedControlButton>
-                                <SegmentedControlButton icon="shape-line">Line</SegmentedControlButton>
-                            </SegmentedControl>
-
-                            <Form tag="div">
-                                <FormField
-                                    label="Type"
-                                    editor={
-                                        <ImageEditorOptionList scrollable scrollingPosition="both">
-                                            {shapeTypes.map((shape) => (
-                                                <ImageEditorOptionPreview key={shape.label} label={shape.label} selected={shape.label === "Oval"}>
-                                                    <div className="k-imageeditor-option-content">
-                                                        <Icon icon={shape.icon} />
-                                                        <span className="k-imageeditor-option-label">{shape.label}</span>
-                                                    </div>
-                                                </ImageEditorOptionPreview>
-                                            ))}
-                                        </ImageEditorOptionList>
-                                    }
-                                />
-                                <Fieldset layout="grid" cols={2} gutters={{ cols: "16px" }}>
-                                    <FormField
-                                        label="Stroke Color"
-                                        editor={ <ColorPicker id="mobile-shape-stroke-color" value="#b0e855" aria-label="Stroke Color" /> }
-                                    />
-                                    <FormField
-                                        label="Stroke Width"
-                                        editorId="mobile-shape-stroke-width"
-                                        editor={ <NumericTextbox id="mobile-shape-stroke-width" showSpinButton={false} value="8" prefix={<Icon icon="border-width" />} /> }
-                                    />
-                                </Fieldset>
-                                <Fieldset layout="grid" cols={2} gutters={{ cols: "16px" }}>
-                                    <FormField
-                                        label="Fill Color"
-                                        editor={ <ColorPicker id="mobile-shape-fill-color" value="#eae382" valueIconName="droplet" aria-label="Fill Color" /> }
-                                    />
-                                    <FormField
-                                        label="Text Color"
-                                        editor={ <ColorPicker id="mobile-shape-text-color" value="#4a4500" valueIconName="foreground-color" aria-label="Text Color" /> }
-                                    />
-                                </Fieldset>
-                                <FormField
-                                    label="Font Family"
-                                    editorId="mobile-shape-font-family"
-                                    editor={ <Combobox id="mobile-shape-font-family" prefix={<Icon icon="font-family" />} value="Trebuchet MS" /> }
-                                />
-                                <Fieldset layout="grid" cols={2} gutters={{ cols: "16px" }}>
-                                    <FormField
-                                        label="Font Size"
-                                        editorId="mobile-shape-font-size"
-                                        editor={ <NumericTextbox id="mobile-shape-font-size" showSpinButton={false} value="24" prefix={<Icon icon="font-size" />} /> }
-                                    />
-                                    <FormField
-                                        label="Alignment"
-                                        editor={
-                                            <ButtonGroup>
-                                                <Button className="k-group-start" icon="align-left" aria-label="Align Left"></Button>
-                                                <Button icon="align-center" selected aria-label="Align Center"></Button>
-                                                <Button className="k-group-end" icon="align-right" aria-label="Align Right"></Button>
-                                            </ButtonGroup>
-                                        }
-                                    />
-                                </Fieldset>
-                                <FormField
-                                    label="Format"
-                                    editor={
-                                        <div className="k-imageeditor-controls">
-                                            <Button icon="bold" aria-label="Bold"></Button>
-                                            <Button icon="italic" aria-label="Italic"></Button>
-                                            <Button icon="underline" aria-label="Underline"></Button>
-                                            <Button icon="strikethrough" aria-label="Strikethrough"></Button>
-                                            <Button icon="convert-uppercase" aria-label="Uppercase"></Button>
-                                            <Button icon="convert-lowercase" aria-label="Lowercase"></Button>
-                                        </div>
-                                    }
-                                />
-                                <Fieldset layout="grid" cols={2} gutters={{ cols: "16px" }}>
-                                    <FormField
-                                        label="Align Horizontal"
-                                        editor={
-                                            <ButtonGroup>
-                                                <Button className="k-group-start" icon="align-items-start" aria-label="Align Left"></Button>
-                                                <Button icon="align-items-center" aria-label="Align Center"></Button>
-                                                <Button className="k-group-end" icon="align-items-end" aria-label="Align Right"></Button>
-                                            </ButtonGroup>
-                                        }
-                                    />
-                                    <FormField
-                                        label="Align Vertical"
-                                        editor={
-                                            <ButtonGroup>
-                                                <Button className="k-group-start" icon="align-items-start-alt" aria-label="Align Top"></Button>
-                                                <Button icon="align-items-center-alt" aria-label="Align Middle"></Button>
-                                                <Button className="k-group-end" icon="align-items-end-alt" aria-label="Align Bottom"></Button>
-                                            </ButtonGroup>
-                                        }
-                                    />
-                                </Fieldset>
-                            </Form>
-                        </ImageEditorPane>
-                    }
-                >
-                    <canvas width="326" height="203" role="img" aria-label="Image being edited" style={{ backgroundImage: "url('/packages/html/assets/sofia.jpg')", backgroundSize: "cover", backgroundPosition: "center", backgroundRepeat: "no-repeat" }}></canvas>
+                <ImageEditorInsertShape adaptive selected shapeType="Oval" alignment="center" strokeColor="#b0e855" strokeWidth={8} fillColor="#eae382" textColor="#4a4500" fontSize={24}>
+                    <ImageEditorCanvas adaptive imageSrc={IMAGEEDITOR_TEST_IMAGE_SRC} />
                     <div className="k-imageeditor-resize" style={{ width: "165px", height: "54px", top: "75px", left: "81px" }}>
                         <div style={{
                             width: "100%",
@@ -241,122 +55,13 @@ export default () => (
                         <ImageEditorResizeHandles variant="mixed" />
                         <ImageEditorRotateHandle />
                     </div>
-                </ImageEditor>
+                </ImageEditorInsertShape>
             </div>
 
             <div>
                 <h4>Tablet / Adaptive / Selected Tool / Panel Opened</h4>
-                <ImageEditor
-                    adaptive
-                    style={{ width: "768px", height: "1024px" }}
-                    toolbarItems={contextualToolbarItems}
-                    sidebarItems={shapeSidebarItems}
-                    actionPane={
-                        <ImageEditorPane adaptive title="Shape">
-                            <SegmentedControl thumbStyles={{ width: "50%" }} stretched aria-label="Shape or Line" style={{ flexShrink: 0 }}>
-                                <SegmentedControlButton icon="shapes" selected>Shape</SegmentedControlButton>
-                                <SegmentedControlButton icon="shape-line">Line</SegmentedControlButton>
-                            </SegmentedControl>
-
-                            <Form tag="div">
-                                <FormField
-                                    label="Type"
-                                    editor={
-                                        <ImageEditorOptionList scrollable scrollingPosition="end">
-                                            {shapeTypes.map((shape) => (
-                                                <ImageEditorOptionPreview key={shape.label} label={shape.label} selected={shape.label === "Oval"}>
-                                                    <div className="k-imageeditor-option-content">
-                                                        <Icon icon={shape.icon} />
-                                                        <span className="k-imageeditor-option-label">{shape.label}</span>
-                                                    </div>
-                                                </ImageEditorOptionPreview>
-                                            ))}
-                                        </ImageEditorOptionList>
-                                    }
-                                />
-                                <Fieldset layout="grid" cols={2} gutters={{ cols: "16px" }}>
-                                    <FormField
-                                        label="Stroke Color"
-                                        editor={ <ColorPicker id="tablet-shape-stroke-color" value="#b0e855" aria-label="Stroke Color" /> }
-                                    />
-                                    <FormField
-                                        label="Stroke Width"
-                                        editorId="tablet-shape-stroke-width"
-                                        editor={ <NumericTextbox id="tablet-shape-stroke-width" showSpinButton={false} value="8" prefix={<Icon icon="border-width" />} /> }
-                                    />
-                                </Fieldset>
-                                <Fieldset layout="grid" cols={2} gutters={{ cols: "16px" }}>
-                                    <FormField
-                                        label="Fill Color"
-                                        editor={ <ColorPicker id="tablet-shape-fill-color" value="#eae382" valueIconName="droplet" aria-label="Fill Color" /> }
-                                    />
-                                    <FormField
-                                        label="Text Color"
-                                        editor={ <ColorPicker id="tablet-shape-text-color" value="#4a4500" valueIconName="foreground-color" aria-label="Text Color" /> }
-                                    />
-                                </Fieldset>
-                                <FormField
-                                    label="Font Family"
-                                    editorId="tablet-shape-font-family"
-                                    editor={ <Combobox id="tablet-shape-font-family" prefix={<Icon icon="font-family" />} value="Trebuchet MS" /> }
-                                />
-                                <Fieldset layout="grid" cols={2} gutters={{ cols: "16px" }}>
-                                    <FormField
-                                        label="Font Size"
-                                        editorId="tablet-shape-font-size"
-                                        editor={ <NumericTextbox id="tablet-shape-font-size" showSpinButton={false} value="24" prefix={<Icon icon="font-size" />} /> }
-                                    />
-                                    <FormField
-                                        label="Alignment"
-                                        editor={
-                                            <ButtonGroup>
-                                                <Button className="k-group-start" icon="align-left" aria-label="Align Left"></Button>
-                                                <Button icon="align-center" selected aria-label="Align Center"></Button>
-                                                <Button className="k-group-end" icon="align-right" aria-label="Align Right"></Button>
-                                            </ButtonGroup>
-                                        }
-                                    />
-                                </Fieldset>
-                                <FormField
-                                    label="Format"
-                                    editor={
-                                        <div className="k-imageeditor-controls">
-                                            <Button icon="bold" aria-label="Bold"></Button>
-                                            <Button icon="italic" aria-label="Italic"></Button>
-                                            <Button icon="underline" aria-label="Underline"></Button>
-                                            <Button icon="strikethrough" aria-label="Strikethrough"></Button>
-                                            <Button icon="convert-uppercase" aria-label="Uppercase"></Button>
-                                            <Button icon="convert-lowercase" aria-label="Lowercase"></Button>
-                                        </div>
-                                    }
-                                />
-                                <Fieldset layout="grid" cols={2} gutters={{ cols: "16px" }}>
-                                    <FormField
-                                        label="Align Horizontal"
-                                        editor={
-                                            <ButtonGroup>
-                                                <Button className="k-group-start" icon="align-items-start" aria-label="Align Left"></Button>
-                                                <Button icon="align-items-center" aria-label="Align Center"></Button>
-                                                <Button className="k-group-end" icon="align-items-end" aria-label="Align Right"></Button>
-                                            </ButtonGroup>
-                                        }
-                                    />
-                                    <FormField
-                                        label="Align Vertical"
-                                        editor={
-                                            <ButtonGroup>
-                                                <Button className="k-group-start" icon="align-items-start-alt" aria-label="Align Top"></Button>
-                                                <Button icon="align-items-center-alt" aria-label="Align Middle"></Button>
-                                                <Button className="k-group-end" icon="align-items-end-alt" aria-label="Align Bottom"></Button>
-                                            </ButtonGroup>
-                                        }
-                                    />
-                                </Fieldset>
-                            </Form>
-                        </ImageEditorPane>
-                    }
-                >
-                    <canvas width="720" height="393" role="img" aria-label="Image being edited" style={{ backgroundImage: "url('/packages/html/assets/sofia.jpg')", backgroundSize: "cover", backgroundPosition: "center", backgroundRepeat: "no-repeat" }}></canvas>
+                <ImageEditorInsertShape adaptive selected style={{ width: "768px", height: "1024px" }} shapeType="Oval" alignment="center" strokeColor="#b0e855" strokeWidth={8} fillColor="#eae382" textColor="#4a4500" fontSize={24}>
+                    <ImageEditorCanvas width={720} height={393} imageSrc={IMAGEEDITOR_TEST_IMAGE_SRC} />
                     <div className="k-imageeditor-resize" style={{ width: "234px", height: "77px", top: "156px", left: "243px" }}>
                         <div style={{
                             width: "100%",
@@ -383,7 +88,7 @@ export default () => (
                         <ImageEditorResizeHandles variant="mixed" />
                         <ImageEditorRotateHandle />
                     </div>
-                </ImageEditor>
+                </ImageEditorInsertShape>
             </div>
 
         </div>

package/src/imageeditor/tests/imageeditor-adjustments-pane.tsx

@@ -1,4 +1,5 @@
 import { ImageEditorAdjustments } from '..';
+import { IMAGEEDITOR_TEST_IMAGE_SRC } from '../constants';
 
 
 export default () => (
@@ -7,7 +8,7 @@ export default () => (
 
             <h4>Image Editor Adjustments Pane</h4>
 
-            <ImageEditorAdjustments contentHeight="640px" blur={24} opacity={24} />
+            <ImageEditorAdjustments contentHeight="640px" imageSrc={IMAGEEDITOR_TEST_IMAGE_SRC} />
 
         </div>
     </>

package/src/imageeditor/tests/imageeditor-blur-pane.tsx

@@ -1,4 +1,5 @@
 import { ImageEditorBlur, ImageEditorResizeHandles, ImageEditorRotateHandle } from '..';
+import { IMAGEEDITOR_TEST_IMAGE_SRC } from '../constants';
 import { Button } from '../../button';
 import { FloatingToolbar } from '../../floating-toolbar/floating-toolbar.spec';
 
@@ -9,7 +10,7 @@ export default () =>(
 
             <h4>Image Editor Blur Pane &mdash; No Selection</h4>
 
-            <ImageEditorBlur contentHeight="482px" />
+            <ImageEditorBlur contentHeight="482px" imageSrc={IMAGEEDITOR_TEST_IMAGE_SRC} />
 
             <h4>Image Editor Blur Pane &mdash; Rectangular Markee</h4>
 

package/src/imageeditor/tests/imageeditor-crop-pane.tsx

@@ -1,4 +1,5 @@
 import { ImageEditorCrop } from '..';
+import { IMAGEEDITOR_TEST_IMAGE_SRC } from '../constants';
 
 
 export default () =>(
@@ -7,7 +8,7 @@ export default () =>(
 
             <h4>Image Editor Crop Pane &mdash; Default</h4>
 
-            <ImageEditorCrop contentHeight="482px" />
+            <ImageEditorCrop contentHeight="482px" imageSrc={IMAGEEDITOR_TEST_IMAGE_SRC} />
 
             <h4>Image Editor Crop Pane &mdash; Custom Crop</h4>
 

package/src/imageeditor/tests/imageeditor-filters-pane.tsx

@@ -1,4 +1,5 @@
 import { ImageEditorFilters } from '..';
+import { IMAGEEDITOR_TEST_IMAGE_SRC } from '../constants';
 
 
 export default () => (
@@ -7,7 +8,7 @@ export default () => (
 
             <h4>Image Editor Filters Pane &mdash; None Selected</h4>
 
-            <ImageEditorFilters contentHeight="640px" preset="none" />
+            <ImageEditorFilters contentHeight="640px" preset="none" imageSrc={IMAGEEDITOR_TEST_IMAGE_SRC} />
 
         </div>
     </>

package/src/imageeditor/tests/imageeditor-frames-pane.tsx

@@ -1,4 +1,5 @@
 import { ImageEditorFrames } from '..';
+import { IMAGEEDITOR_TEST_IMAGE_SRC } from '../constants';
 
 
 export default () => (
@@ -7,15 +8,15 @@ export default () => (
 
             <h4>Image Editor Frames Pane - None</h4>
 
-            <ImageEditorFrames contentHeight="640px" style="none" imageRoundness={24} />
+            <ImageEditorFrames contentHeight="640px" style="none" imageRoundness={24} imageSrc={IMAGEEDITOR_TEST_IMAGE_SRC} />
 
             <h4>Image Editor Frames Pane - Single</h4>
 
-            <ImageEditorFrames contentHeight="640px" style="single" imageRoundness={24} />
+            <ImageEditorFrames contentHeight="640px" style="single" imageRoundness={24} frameThickness={12} frameRoundness={16} offset={12} imageSrc={IMAGEEDITOR_TEST_IMAGE_SRC} />
 
             <h4>Image Editor Frames Pane - Multiple</h4>
 
-            <ImageEditorFrames contentHeight="640px" style="multiple" imageRoundness={24} />
+            <ImageEditorFrames contentHeight="640px" style="multiple" imageRoundness={24} frameThickness={12} frameRoundness={40} offset={12} imageSrc={IMAGEEDITOR_TEST_IMAGE_SRC} />
 
         </div>
     </>

package/src/imageeditor/tests/imageeditor-insert-shape-pane.tsx

@@ -15,7 +15,7 @@ export default () => (
 
             <h4>Image Editor Insert Shape Pane &mdash; Selected Shape</h4>
 
-            <ImageEditorInsertShape contentHeight="1016px" selected shapeType="Oval" strokeColor="#b0e855" strokeWidth={8} fillColor="#eae382" textColor="#4a4500" fontSize={24}>
+            <ImageEditorInsertShape contentHeight="1016px" selected shapeType="Oval" alignment="center" strokeColor="#b0e855" strokeWidth={8} fillColor="#eae382" textColor="#4a4500" fontSize={24}>
                 <canvas width="494" height="307" role="img" aria-label="Image being edited" style={{ backgroundImage: "url('/packages/html/assets/sofia.jpg')", backgroundSize: "cover" }}></canvas>
                 <div className="k-imageeditor-resize" style={{ width: "165px", height: "54px", top: "140px", left: "165px" }}>
                     <div style={{

package/src/imageeditor/tests/imageeditor-interactive-states.tsx

@@ -1,4 +1,4 @@
-import { ImageEditor, ImageEditorDisabled, ImageEditorInsertText, ImageEditorResize, ImageEditorResizeHandles, ImageEditorRotateHandle } from '..';
+import { ImageEditor, ImageEditorNormal, ImageEditorInsertText, ImageEditorResize, ImageEditorResizeHandles, ImageEditorRotateHandle } from '..';
 import { ImageEditorPlaceholder } from '../imageeditor-placeholder';
 import { Loader } from '../../loader';
 import { Button } from '../../button';
@@ -21,7 +21,7 @@ export default () => (
     <div id="test-area" className="k-d-grid k-grid-cols-1">
 
         <span>Empty</span>
-        <ImageEditorDisabled
+        <ImageEditorNormal
             contentHeight="260px"
             placeholder={
                 <ImageEditorPlaceholder
@@ -34,7 +34,7 @@ export default () => (
         />
 
         <span>Loading</span>
-        <ImageEditorDisabled
+        <ImageEditorNormal
             contentHeight="260px"
             placeholder={
                 <ImageEditorPlaceholder>
@@ -68,7 +68,7 @@ export default () => (
         </ImageEditor>
 
         <span>Error - Failed Upload</span>
-        <ImageEditorDisabled
+        <ImageEditorNormal
             contentHeight="260px"
             placeholder={
                 <ImageEditorPlaceholder
@@ -81,7 +81,7 @@ export default () => (
         />
 
         <span>Error - Unsupported File Format</span>
-        <ImageEditorDisabled
+        <ImageEditorNormal
             contentHeight="260px"
             placeholder={
                 <ImageEditorPlaceholder
@@ -94,7 +94,7 @@ export default () => (
         />
 
         <span>Error - Maximum File Size Exceeded</span>
-        <ImageEditorDisabled
+        <ImageEditorNormal
             contentHeight="260px"
             placeholder={
                 <ImageEditorPlaceholder

package/src/imageeditor/tests/imageeditor-pixelate-pane.tsx

@@ -1,4 +1,5 @@
 import { ImageEditorPixelate, ImageEditorResizeHandles, ImageEditorRotateHandle } from '..';
+import { IMAGEEDITOR_TEST_IMAGE_SRC } from '../constants';
 import { Button } from '../../button';
 import { FloatingToolbar } from '../../floating-toolbar/floating-toolbar.spec';
 
@@ -9,7 +10,7 @@ export default () =>(
 
             <h4>Image Editor Pixelate Pane &mdash; No Selection</h4>
 
-            <ImageEditorPixelate contentHeight="482px" />
+            <ImageEditorPixelate contentHeight="482px" imageSrc={IMAGEEDITOR_TEST_IMAGE_SRC} />
 
             <h4>Image Editor Pixelate Pane &mdash; Rectangular Markee</h4>
 

package/src/imageeditor/tests/imageeditor-resize-pane.tsx

@@ -1,4 +1,5 @@
 import { ImageEditorResize } from '..';
+import { IMAGEEDITOR_TEST_IMAGE_SRC } from '../constants';
 import { Tooltip } from '../../tooltip';
 
 
@@ -8,7 +9,7 @@ export default () =>(
 
             <h4>Image Editor Resize Pane &mdash; Default</h4>
 
-            <ImageEditorResize contentHeight="482px" />
+            <ImageEditorResize contentHeight="482px" imageSrc={IMAGEEDITOR_TEST_IMAGE_SRC} />
 
             <h4>Image Editor Resize Pane &mdash; Resizing</h4>
 

package/src/imageeditor/tests/imageeditor-responsive.tsx

@@ -1,4 +1,4 @@
-import { ImageEditorNormal, ImageEditorInsertShape, ImageEditorResizeHandles, ImageEditorRotateHandle } from '..';
+import { ImageEditor, ImageEditorInsertShape, ImageEditorResizeHandles, ImageEditorRotateHandle } from '..';
 import { Button } from '../../button';
 import { FloatingToolbar } from '../../floating-toolbar/floating-toolbar.spec';
 
@@ -22,14 +22,14 @@ export default () => (
 
             <div>
                 <h4>Tablet / Responsive / Unselected Tool</h4>
-                <ImageEditorNormal contentHeight="997px">
+                <ImageEditor contentHeight="997px">
                     <canvas width="659" height="410" role="img" aria-label="Image being edited" style={{ backgroundImage: "url('/packages/html/assets/sofia.jpg')", backgroundSize: "cover", backgroundPosition: "center", backgroundRepeat: "no-repeat" }}></canvas>
-                </ImageEditorNormal>
+                </ImageEditor>
             </div>
 
             <div>
                 <h4>Tablet / Responsive / Selected Tool / Panel Opened</h4>
-                <ImageEditorInsertShape contentHeight="997px" selected shapeType="Oval" strokeColor="#b0e855" strokeWidth={8} fillColor="#eae382" textColor="#4a4500" fontSize={24}>
+                <ImageEditorInsertShape contentHeight="997px" selected shapeType="Oval" alignment="center" strokeColor="#b0e855" strokeWidth={8} fillColor="#eae382" textColor="#4a4500" fontSize={24}>
                     <canvas width="338" height="211" role="img" aria-label="Image being edited" style={{ backgroundImage: "url('/packages/html/assets/sofia.jpg')", backgroundSize: "cover", backgroundPosition: "center", backgroundRepeat: "no-repeat" }}></canvas>
                     <div className="k-imageeditor-resize" style={{ width: "130px", height: "43px", top: "84px", left: "105px" }}>
                         <div style={{

package/src/imageeditor/tests/imageeditor-rotate-pane.tsx

@@ -1,4 +1,5 @@
 import { ImageEditorRotate, ImageEditorRotateHandle } from '..';
+import { IMAGEEDITOR_TEST_IMAGE_SRC } from '../constants';
 import { Tooltip } from '../../tooltip';
 
 
@@ -8,7 +9,7 @@ export default () =>(
 
             <h4>Image Editor Rotate Pane &mdash; Default</h4>
 
-            <ImageEditorRotate contentHeight="482px" />
+            <ImageEditorRotate contentHeight="482px" imageSrc={IMAGEEDITOR_TEST_IMAGE_SRC} />
 
             <h4>Image Editor Rotate Pane &mdash; Rotating</h4>
 

package/src/imageeditor/tests/imageeditor-shadow-pane.tsx

@@ -1,4 +1,5 @@
 import { ImageEditorShadow } from '..';
+import { IMAGEEDITOR_TEST_IMAGE_SRC } from '../constants';
 
 
 export default () => (
@@ -7,7 +8,7 @@ export default () => (
 
             <h4>Image Editor Shadow Pane</h4>
 
-            <ImageEditorShadow contentHeight="640px" positionX={2} positionY={-4} blur={32} spread={12} opacity={32} />
+            <ImageEditorShadow contentHeight="640px" positionX={2} positionY={-4} blur={32} spread={12} opacity={32} imageSrc={IMAGEEDITOR_TEST_IMAGE_SRC} />
 
         </div>
     </>