@progress/kendo-themes-html 6.3.1-dev.0 → 6.4.0-dev.0

package/src/colorgradient/color-contrast.tsx

@@ -0,0 +1,44 @@
+import { classNames } from '../utils';
+import { Icon } from '../icon';
+
+const COLOR_CONTRAST_CLASSNAME = 'k-colorgradient-color-contrast';
+
+const states = [];
+
+const options = {};
+
+const defaultProps = {};
+
+export const ColorContrast = (
+) => (
+    <div className={classNames(COLOR_CONTRAST_CLASSNAME, 'k-vbox')}>
+        <div className="k-contrast-ratio">
+            <span className="k-contrast-ratio-text">Contrast ratio: 7.1</span>
+            <span className="k-contrast-validation !k-text-success">
+                <Icon name="check" />
+                <Icon name="check" />
+            </span>
+        </div>
+        <div>
+            <span>AA: 4.5</span>
+            <span className="k-contrast-validation !k-text-success">
+                    Pass
+                <Icon name="check" />
+            </span>
+        </div>
+        <div>
+            <span>AAA: 7.0</span>
+            <span className="k-contrast-validation !k-text-error">
+                    Fail
+                <Icon name="x" />
+            </span>
+        </div>
+    </div>
+);
+
+ColorContrast.states = states;
+ColorContrast.options = options;
+ColorContrast.className = COLOR_CONTRAST_CLASSNAME;
+ColorContrast.defaultProps = defaultProps;
+
+export default ColorContrast;

package/src/colorgradient/color-gradient.spec.tsx

@@ -0,0 +1,102 @@
+import { classNames, stateClassNames, States } from '../utils';
+import { Slider } from '../slider';
+import { ColorInput } from './color-input';
+import { ColorContrast } from './color-contrast';
+
+const COLOR_GRADIENT_CLASSNAME = 'k-colorgradient';
+
+const states = [
+    States.hover,
+    States.focus,
+    States.readonly,
+    States.disabled,
+];
+
+const options = {};
+
+export type KendoColorGradientProps = {
+    mode: 'rgba' | 'rgb' | 'hsva' | 'hsv' | 'hex'
+    dir?: 'ltr' | 'rtl';
+    contrast?: boolean;
+    hoverHandle?: boolean;
+    focusHandle?: boolean;
+    gradientStyle?: React.CSSProperties;
+    dragHandleStyle?: React.CSSProperties;
+    alphaStyle?: React.CSSProperties;
+};
+
+export type KendoColorGradientState = { [K in (typeof states)[number]]?: boolean };
+
+const defaultProps = {
+    mode: 'rgba',
+    readonly: false,
+    disabled: false,
+    contrast: false,
+    gradientStyle: { background: "rgb(255, 0, 0 )" },
+    dragHandleStyle: { top: "50px", left: "73px" },
+    alphaStyle: { background: "linear-gradient(to top, transparent, rgb(255, 0, 0))" }
+};
+
+export const ColorGradient = (
+    props: KendoColorGradientProps &
+        KendoColorGradientState &
+        React.HTMLAttributes<HTMLDivElement>
+) => {
+    const {
+        mode = defaultProps.mode,
+        readonly = defaultProps.readonly,
+        disabled = defaultProps.disabled,
+        dir,
+        contrast = defaultProps.contrast,
+        hover,
+        focus,
+        hoverHandle,
+        focusHandle,
+        gradientStyle = defaultProps.gradientStyle,
+        dragHandleStyle = defaultProps.dragHandleStyle,
+        alphaStyle = defaultProps.alphaStyle,
+    } = props;
+
+    return (
+        <div className={classNames(
+            props.className,
+            COLOR_GRADIENT_CLASSNAME,
+            stateClassNames(COLOR_GRADIENT_CLASSNAME, {
+                hover,
+                focus,
+                readonly,
+                disabled
+            })
+        )} dir={dir}>
+            <div className="k-colorgradient-canvas k-hstack">
+                <div className="k-hsv-rectangle" style={gradientStyle}>
+                    <div className="k-hsv-gradient">
+                        <div className={classNames(
+                            'k-hsv-draghandle',
+                            'k-draghandle',
+                            {
+                                'k-hover': hoverHandle,
+                                'k-focus': focusHandle
+                            }
+                        )} style={dragHandleStyle} ></div>
+                    </div>
+                </div>
+                <div className="k-hsv-controls k-hstack">
+                    <Slider type="gradient" orientation="vertical" className="k-hue-slider" hover={hoverHandle} focus={focusHandle} />
+                    {
+                        mode !== 'rgb' && mode !== 'hsv' && <Slider type="gradient" orientation="vertical" className="k-alpha-slider" hover={hoverHandle} focus={focusHandle} trackStyle={alphaStyle}/>
+                    }
+                </div>
+            </div>
+            <ColorInput mode={props.mode} />
+            { contrast && <ColorContrast /> }
+        </div>
+    );
+};
+
+ColorGradient.states = states;
+ColorGradient.options = options;
+ColorGradient.className = COLOR_GRADIENT_CLASSNAME;
+ColorGradient.defaultProps = defaultProps;
+
+export default ColorGradient;

package/src/colorgradient/color-input.tsx

@@ -0,0 +1,123 @@
+import { classNames } from '../utils';
+import { Button } from '../button';
+import { NumericTextbox } from '../numerictextbox';
+import { Textbox } from '../textbox';
+
+const COLOR_INPUT_CLASSNAME = 'k-colorgradient-inputs';
+
+const states = [];
+
+const options = {};
+
+export type KendoColorInputOptions = {
+    mode: 'rgba' | 'rgb' | 'hsva' | 'hsv' | 'hex'
+};
+
+const defaultProps = {
+    mode: 'rgba'
+};
+
+export const ColorInput = (
+    props: KendoColorInputOptions &
+        React.HTMLAttributes<HTMLDivElement>
+
+) => {
+    const {
+        mode = defaultProps.mode,
+    } = props;
+
+    return (
+        <div className={classNames(COLOR_INPUT_CLASSNAME, 'k-hstack')}>
+            <div className="k-vstack">
+                <Button fillMode="flat" icon="arrows-kpi" className="k-cologradient-toggle-mode" />
+            </div>
+            { mode === 'rgba' &&
+                <>
+                    <div className="k-vstack">
+                        <NumericTextbox showSpinButton={false} showClearButton={false} value="132" />
+                        <label className="k-colorgradient-input-label">R</label>
+                    </div>
+                    <div className="k-vstack">
+                        <NumericTextbox showSpinButton={false} showClearButton={false} value="132" />
+                        <label className="k-colorgradient-input-label">G</label>
+                    </div>
+                    <div className="k-vstack">
+                        <NumericTextbox showSpinButton={false} showClearButton={false} value="132" />
+                        <label className="k-colorgradient-input-label">B</label>
+                    </div>
+                    <div className="k-vstack">
+                        <NumericTextbox showSpinButton={false} showClearButton={false} value="1.00" />
+                        <label className="k-colorgradient-input-label">A</label>
+                    </div>
+                </>
+            }
+            { mode === 'rgb' &&
+                <>
+                    <div className="k-vstack">
+                        <NumericTextbox showSpinButton={false} showClearButton={false} value="132" />
+                        <label className="k-colorgradient-input-label">R</label>
+                    </div>
+                    <div className="k-vstack">
+                        <NumericTextbox showSpinButton={false} showClearButton={false} value="132" />
+                        <label className="k-colorgradient-input-label">G</label>
+                    </div>
+                    <div className="k-vstack">
+                        <NumericTextbox showSpinButton={false} showClearButton={false} value="132" />
+                        <label className="k-colorgradient-input-label">B</label>
+                    </div>
+                </>
+            }
+            { mode === 'hsva' &&
+                <>
+                    <div className="k-vstack">
+                        <NumericTextbox showSpinButton={false} showClearButton={false} value="132" />
+                        <label className="k-colorgradient-input-label">H</label>
+                    </div>
+                    <div className="k-vstack">
+                        <NumericTextbox showSpinButton={false} showClearButton={false} value="132" />
+                        <label className="k-colorgradient-input-label">S</label>
+                    </div>
+                    <div className="k-vstack">
+                        <NumericTextbox showSpinButton={false} showClearButton={false} value="132" />
+                        <label className="k-colorgradient-input-label">V</label>
+                    </div>
+                    <div className="k-vstack">
+                        <NumericTextbox showSpinButton={false} showClearButton={false} value="1.00" />
+                        <label className="k-colorgradient-input-label">A</label>
+                    </div>
+                </>
+            }
+            { mode === 'hsv' &&
+                <>
+                    <div className="k-vstack">
+                        <NumericTextbox showSpinButton={false} showClearButton={false} value="132" />
+                        <label className="k-colorgradient-input-label">H</label>
+                    </div>
+                    <div className="k-vstack">
+                        <NumericTextbox showSpinButton={false} showClearButton={false} value="132" />
+                        <label className="k-colorgradient-input-label">S</label>
+                    </div>
+                    <div className="k-vstack">
+                        <NumericTextbox showSpinButton={false} showClearButton={false} value="132" />
+                        <label className="k-colorgradient-input-label">V</label>
+                    </div>
+                </>
+            }
+            { mode === 'hex' &&
+                <>
+                    <div className="k-vstack k-flex-1">
+                        <Textbox showClearButton={false} value="#b88484AA" className="k-hex-value" />
+                        <label className="k-colorgradient-input-label">HEX</label>
+                    </div>
+                </>
+            }
+        </div>
+    );
+};
+
+ColorInput.states = states;
+ColorInput.options = options;
+ColorInput.className = COLOR_INPUT_CLASSNAME;
+ColorInput.defaultProps = defaultProps;
+
+export default ColorInput;

package/src/colorgradient/index.ts

@@ -0,0 +1,4 @@
+export * from './color-gradient.spec';
+export * from './color-input';
+export * from './color-contrast';
+

package/src/colorgradient/tests/colorgradient-contrast.tsx

@@ -1,7 +1,5 @@
 import ReactDOM from 'react-dom/client';
-import { Button } from '../../button';
-import { Icon } from '../../icon';
-import { NumericTextbox } from '../../numerictextbox';
+import { ColorGradient } from '../../colorgradient';
 
 const root = ReactDOM.createRoot(
     document.getElementById('app') as HTMLElement
@@ -25,86 +23,7 @@ root.render(
 
             <span>Contrast Tool</span>
             <section>
-                <div className="k-colorgradient">
-                    <div className="k-colorgradient-canvas k-hstack">
-                        <div className="k-hsv-rectangle" style={{ background: "rgb(255, 0, 0)" }}>
-                            <div className="k-hsv-gradient">
-                                <div className="k-hsv-draghandle k-draghandle" style={{ top: '50px', left: "73px" }}></div>
-                            </div>
-                        </div>
-                        <div className="k-hsv-controls k-hstack">
-
-                            <div className="k-slider k-slider-vertical k-hue-slider k-colorgradient-slider">
-                                <div className="k-slider-track-wrap">
-                                    <div className="k-slider-track">
-                                        <div className="k-slider-selection"></div>
-                                        <a className="k-draghandle k-draghandle-end"></a>
-                                    </div>
-                                </div>
-                            </div>
-
-                            <div className="k-slider k-slider-vertical k-alpha-slider k-colorgradient-slider">
-                                <div className="k-slider-track-wrap">
-                                    <div className="k-slider-track" style={{ background: "linear-gradient(to top, transparent, rgb(255, 0, 0))" }}>
-                                        <div className="k-slider-selection"></div>
-                                        <a className="k-draghandle k-draghandle-end"></a>
-                                    </div>
-                                </div>
-                            </div>
-                        </div>
-                    </div>
-
-                    <div className="k-colorgradient-inputs k-hstack">
-                        <div className="k-vstack">
-                            <Button fillMode="flat" icon="arrows-kpi" className="k-colorgradient-toggle-mode"></Button>
-                        </div>
-
-                        <div className="k-vstack">
-                            <NumericTextbox showSpinButton={false} showClearButton={false} value="132" />
-                            <label className="k-colorgradient-input-label">R</label>
-                        </div>
-
-                        <div className="k-vstack">
-                            <NumericTextbox showSpinButton={false} showClearButton={false} value="132" />
-                            <label className="k-colorgradient-input-label">G</label>
-                        </div>
-
-                        <div className="k-vstack">
-                            <NumericTextbox showSpinButton={false} showClearButton={false} value="132" />
-                            <label className="k-colorgradient-input-label">B</label>
-                        </div>
-
-                        <div className="k-vstack">
-                            <NumericTextbox showSpinButton={false} showClearButton={false} value="1.00" />
-                            <label className="k-colorgradient-input-label">A</label>
-                        </div>
-                    </div>
-
-                    <div className="k-colorgradient-color-contrast k-vbox">
-                        <div className="k-contrast-ratio">
-                            <span className="k-contrast-ratio-text">Contrast ratio: 7.1</span>
-                            <span className="k-contrast-validation !k-text-success">
-                                <Icon name="check" />
-                                <Icon name="check" />
-                            </span>
-                        </div>
-                        <div>
-                            <span>AA: 4.5</span>
-                            <span className="k-contrast-validation !k-text-success">
-                                Pass
-                                <Icon name="check" />
-                            </span>
-                        </div>
-                        <div>
-                            <span>AAA: 7.0</span>
-                            <span className="k-contrast-validation !k-text-error">
-                                Fail
-                                <Icon name="x" />
-                            </span>
-                        </div>
-                    </div>
-                </div>
-
+                <ColorGradient contrast />
             </section>
 
         </div>

package/src/colorgradient/tests/colorgradient-draghandle.tsx

@@ -1,6 +1,5 @@
 import ReactDOM from 'react-dom/client';
-import { Button } from '../../button';
-import { NumericTextbox } from '../../numerictextbox';
+import { ColorGradient } from '../../colorgradient';
 
 const root = ReactDOM.createRoot(
     document.getElementById('app') as HTMLElement
@@ -27,156 +26,15 @@ root.render(
             <span>DragHandle Hover</span>
 
             <section>
-                <div className="k-colorgradient">
-                    <div className="k-colorgradient-canvas k-hstack">
-                        <div className="k-hsv-rectangle" style={{ background: "rgb(255, 0, 0)" }}>
-                            <div className="k-hsv-gradient">
-                                <div className="k-hsv-draghandle k-draghandle" style={{ top: '50px', left: "73px" }}></div>
-                            </div>
-                        </div>
-                        <div className="k-hsv-controls k-hstack">
-                            <div className="k-slider k-slider-vertical k-hue-slider k-colorgradient-slider">
-                                <div className="k-slider-track-wrap">
-                                    <div className="k-slider-track">
-                                        <div className="k-slider-selection"></div>
-                                        <a className="k-draghandle k-draghandle-end"></a>
-                                    </div>
-                                </div>
-                            </div>
-                            <div className="k-slider k-slider-vertical k-alpha-slider k-colorgradient-slider">
-                                <div className="k-slider-track-wrap">
-                                    <div className="k-slider-track" style={{ background: "linear-gradient(to top, transparent, rgb(255, 0, 0))" }}>
-                                        <div className="k-slider-selection"></div>
-                                        <a className="k-draghandle k-draghandle-end"></a>
-                                    </div>
-                                </div>
-                            </div>
-                        </div>
-                    </div>
-                    <div className="k-colorgradient-inputs k-hstack">
-                        <div className="k-vstack">
-                            <Button fillMode="flat" icon="arrows-kpi" className="k-colorgradient-toggle-mode"></Button>
-                        </div>
-                        <div className="k-vstack">
-                            <NumericTextbox showSpinButton={false} showClearButton={false} value="132" />
-                            <label className="k-colorgradient-input-label">R</label>
-                        </div>
-                        <div className="k-vstack">
-                            <NumericTextbox showSpinButton={false} showClearButton={false} value="132" />
-                            <label className="k-colorgradient-input-label">G</label>
-                        </div>
-                        <div className="k-vstack">
-                            <NumericTextbox showSpinButton={false} showClearButton={false} value="132" />
-                            <label className="k-colorgradient-input-label">B</label>
-                        </div>
-                        <div className="k-vstack">
-                            <NumericTextbox showSpinButton={false} showClearButton={false} value="1.00" />
-                            <label className="k-colorgradient-input-label">A</label>
-                        </div>
-                    </div>
-                </div>
+                <ColorGradient />
             </section>
 
             <section>
-                <div className="k-colorgradient">
-                    <div className="k-colorgradient-canvas k-hstack">
-                        <div className="k-hsv-rectangle" style={{ background: "rgb(255, 0, 0)" }}>
-                            <div className="k-hsv-gradient">
-                                <div className="k-hsv-draghandle k-draghandle k-focus" style={{ top: '50px', left: "73px" }}></div>
-                            </div>
-                        </div>
-                        <div className="k-hsv-controls k-hstack">
-                            <div className="k-slider k-slider-vertical k-hue-slider k-colorgradient-slider k-focus">
-                                <div className="k-slider-track-wrap">
-                                    <div className="k-slider-track">
-                                        <div className="k-slider-selection"></div>
-                                        <a className="k-draghandle k-draghandle-end k-focus"></a>
-                                    </div>
-                                </div>
-                            </div>
-                            <div className="k-slider k-slider-vertical k-alpha-slider k-colorgradient-slider k-focus" style={{ "--kendo-slider-end": "100" } as any }>
-                                <div className="k-slider-track-wrap">
-                                    <div className="k-slider-track" style={{ background: "linear-gradient(to top, transparent, rgb(255, 0, 0))" }}>
-                                        <div className="k-slider-selection"></div>
-                                        <a className="k-draghandle k-draghandle-end k-focus"></a>
-                                    </div>
-                                </div>
-                            </div>
-                        </div>
-                    </div>
-                    <div className="k-colorgradient-inputs k-hstack">
-                        <div className="k-vstack">
-                            <Button fillMode="flat" icon="arrows-kpi" className="k-colorgradient-toggle-mode"></Button>
-                        </div>
-                        <div className="k-vstack">
-                            <NumericTextbox showSpinButton={false} showClearButton={false} value="132" />
-                            <label className="k-colorgradient-input-label">R</label>
-                        </div>
-                        <div className="k-vstack">
-                            <NumericTextbox showSpinButton={false} showClearButton={false} value="132" />
-                            <label className="k-colorgradient-input-label">G</label>
-                        </div>
-                        <div className="k-vstack">
-                            <NumericTextbox showSpinButton={false} showClearButton={false} value="132" />
-                            <label className="k-colorgradient-input-label">B</label>
-                        </div>
-                        <div className="k-vstack">
-                            <NumericTextbox showSpinButton={false} showClearButton={false} value="1.00" />
-                            <label className="k-colorgradient-input-label">A</label>
-                        </div>
-                    </div>
-                </div>
+                <ColorGradient focusHandle />
             </section>
 
             <section>
-                <div className="k-colorgradient">
-                    <div className="k-colorgradient-canvas k-hstack">
-                        <div className="k-hsv-rectangle" style={{ background: "rgb(255, 0, 0)" }}>
-                            <div className="k-hsv-gradient">
-                                <div className="k-hsv-draghandle k-draghandle k-hover" style={{ top: '50px', left: "73px" }}></div>
-                            </div>
-                        </div>
-                        <div className="k-hsv-controls k-hstack">
-                            <div className="k-slider k-slider-vertical k-hue-slider k-colorgradient-slider k-hover">
-                                <div className="k-slider-track-wrap">
-                                    <div className="k-slider-track">
-                                        <div className="k-slider-selection"></div>
-                                        <a className="k-draghandle k-draghandle-end k-hover"></a>
-                                    </div>
-                                </div>
-                            </div>
-                            <div className="k-slider k-slider-vertical k-alpha-slider k-colorgradient-slider k-hover" style={{ "--kendo-slider-end": "100" } as any }>
-                                <div className="k-slider-track-wrap">
-                                    <div className="k-slider-track" style={{ background: "linear-gradient(to top, transparent, rgb(255, 0, 0))" }}>
-                                        <div className="k-slider-selection"></div>
-                                        <a className="k-draghandle k-draghandle-end k-hover"></a>
-                                    </div>
-                                </div>
-                            </div>
-                        </div>
-                    </div>
-                    <div className="k-colorgradient-inputs k-hstack">
-                        <div className="k-vstack">
-                            <Button fillMode="flat" icon="arrows-kpi" className="k-colorgradient-toggle-mode"></Button>
-                        </div>
-                        <div className="k-vstack">
-                            <NumericTextbox showSpinButton={false} showClearButton={false} value="132" />
-                            <label className="k-colorgradient-input-label">R</label>
-                        </div>
-                        <div className="k-vstack">
-                            <NumericTextbox showSpinButton={false} showClearButton={false} value="132" />
-                            <label className="k-colorgradient-input-label">G</label>
-                        </div>
-                        <div className="k-vstack">
-                            <NumericTextbox showSpinButton={false} showClearButton={false} value="132" />
-                            <label className="k-colorgradient-input-label">B</label>
-                        </div>
-                        <div className="k-vstack">
-                            <NumericTextbox showSpinButton={false} showClearButton={false} value="1.00" />
-                            <label className="k-colorgradient-input-label">A</label>
-                        </div>
-                    </div>
-                </div>
+                <ColorGradient hoverHandle />
             </section>
         </div>
     </>