@progress/kendo-react-inputs 5.6.0-dev.202208251227 → 5.7.0-sig.202208281415

package/src/checkbox/interfaces/CheckboxProps.ts

@@ -0,0 +1,122 @@
+import { ToggleBaseProps } from '../../interfaces/ToggleBaseProps';
+import { FormComponentProps } from '@progress/kendo-react-common';
+import { CheckboxChangeEvent } from './CheckboxChangeEvent';
+import { CheckboxFocusEvent } from './CheckboxFocusEvent';
+import { CheckboxBlurEvent } from './CheckboxBlurEvent';
+
+/**
+ * @hidden
+ */
+type Omit<T, K extends keyof T> = Pick<T, Exclude<keyof T, K>>;
+
+/**
+ * Represents the props of the [KendoReact Checkbox component]({% slug overview_checkbox %}).
+ * Extends the [native input props](https://developer.mozilla.org/en-US/docs/Web/API/HTMLInputElement).
+ */
+export interface CheckboxProps extends ToggleBaseProps, FormComponentProps,
+    Omit<React.InputHTMLAttributes<HTMLInputElement>, 'checked' | 'value' | 'size' | 'onChange' | 'onFocus' | 'onBlur'> {
+    /**
+     * Sets the checked state of the Checkbox.
+     * Set to null to enable the indeterminate state of the Checkbox ([see example]({% slug overview_checkbox %})).
+     */
+    checked?: boolean | null;
+    /**
+     * If the type is different than boolean and the `checked` property is provided it's passed to the underlying `input` element.
+     * If set to boolean and the `checked` property is omitted sets the checked state of the Checkbox.
+     * Set null to enable the indeterminate state of the Checkbox ([see example]({% slug overview_checkbox %})).
+     */
+    value?: string | number | string[] | boolean | null;
+    /**
+     * Sets the `className` of the wrapping element of the Checkbox.
+     */
+    className?: string;
+    /**
+     * The React elements that are passed as children to the rendered component.
+     */
+    children?: any;
+    /**
+     * Sets the default value of checked attribute when used in uncontrolled mode ([see example]({% slug default_state %})).
+     */
+    defaultChecked?: boolean;
+    /**
+     * The default value of the Checkbox.
+     */
+    defaultValue?: any;
+    /**
+     * Represents the `dir` HTML attribute. This is used to switch from LTR to RTL.
+     */
+    dir?: string;
+    /**
+     * Sets the disabled state of the Checkbox
+     * ([see example]({% slug disabled_checkbox %})).
+     */
+    disabled?: boolean;
+    /**
+     * Sets the `id` of the Checkbox.
+     */
+    id?: string;
+    /**
+     * Configures the `size` of the Checkbox.
+     *
+     * The available options are:
+     * - small
+     * - medium
+     * - large
+     * - null&mdash;Does not set a size `className`.
+     *
+     * @default `medium`
+     */
+    size?: null | 'small' | 'medium' | 'large';
+    /**
+     * Configures the `rounded` style of the Checkbox.
+     *
+     * The available options are:
+     * - small
+     * - medium
+     * - large
+     * - null&mdash;Does not set a rounded `className`.
+     *
+     * @default `medium`
+     */
+    rounded?: null | 'small' | 'medium' | 'large';
+    /* eslint-disable max-len */
+    /**
+     * Identifies the element(s) which will describe the component, similar to [HTML aria-describedby attribute](https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/ARIA_Techniques/Using_the_aria-describedby_attribute).
+     * For example these elements could contain error or hint message.
+     */
+    ariaDescribedBy?: string;
+    /* eslint-enable max-len */
+    /**
+     * Identifies the element(s) which will label the component.
+     */
+    ariaLabelledBy?: string;
+    /**
+     * Sets the label of the Checkbox component ([see example]({% slug labels_checkbox %})).
+     */
+    label?: string | HTMLElement;
+    /**
+     * Sets the label position of the Checkbox component ([see example]({% slug labels_checkbox %})).
+     */
+    labelPlacement?: 'before' | 'after';
+    /**
+     * Sets the optional text after the label of the Checkbox component.
+     */
+    labelOptional?: boolean;
+    /**
+     * Sets the `tabIndex` property of the Checkbox.
+     * Defaults to `0`.
+     */
+    tabIndex?: number;
+    /**
+     * The event handler that will be fired when the user edits the value.
+     */
+    onChange?: (event: CheckboxChangeEvent) => void;
+    /**
+     * The event handler that will be fired when Checkbox is focused.
+     */
+    onFocus?: (event: CheckboxFocusEvent) => void;
+    /**
+     * The event handler that will be fired when Checkbox is blurred.
+     */
+    onBlur?: (event: CheckboxBlurEvent) => void;
+}

package/src/colors/ColorContrastLabels.tsx

@@ -0,0 +1,83 @@
+import * as React from 'react';
+import {
+    registerForLocalization,
+    LocalizationService, provideLocalizationService
+} from '@progress/kendo-react-intl';
+import {
+    messages, colorGradientContrastRatio, colorGradientAALevel,
+    colorGradientAAALevel, colorGradientPass, colorGradientFail
+} from '../messages';
+import { RGBA } from './models/rgba';
+import { getContrastFromTwoRGBAs } from './utils/color-parser';
+
+/**
+ * @hidden
+ */
+export interface ColorContrastLabelProps {
+    bgColor: RGBA;
+    rgba: RGBA;
+}
+
+/**
+ * @hidden
+ */
+export class ColorContrastLabels extends React.Component<ColorContrastLabelProps, {}> {
+    render() {
+        const localizationService: LocalizationService = provideLocalizationService(this);
+
+        const contrastRatioMessage = localizationService.toLanguageString(colorGradientContrastRatio, messages[colorGradientContrastRatio]);
+        const AALevelMessage = localizationService.toLanguageString(colorGradientAALevel, messages[colorGradientAALevel]);
+        const AAALevelMessage = localizationService.toLanguageString(colorGradientAAALevel, messages[colorGradientAAALevel]);
+        const passMessage = localizationService.toLanguageString(colorGradientPass, messages[colorGradientPass]);
+        const failMessage = localizationService.toLanguageString(colorGradientFail, messages[colorGradientFail]);
+
+        const contrast = getContrastFromTwoRGBAs(this.props.rgba, this.props.bgColor);
+
+        const requiredAAContrast = (4.5).toFixed(1);
+        const requiredAAAContrast = (7.0).toFixed(1);
+
+        const contrastText = `${contrastRatioMessage}: ${contrast.toFixed(2)}`;
+        const aaText = `${AALevelMessage}: ${requiredAAContrast}`;
+        const aaaText = `${AAALevelMessage}: ${requiredAAAContrast}`;
+
+        const success = (
+          <span className="k-contrast-validation k-text-success">
+            {passMessage} <span className="k-icon k-i-check"/>
+          </span>
+        );
+
+        const error = (
+          <span className="k-contrast-validation k-text-error">
+            {failMessage} <span className="k-icon k-i-close"/>
+          </span>
+        );
+
+        return (
+          <div className="k-vbox k-colorgradient-color-contrast">
+            <div className="k-contrast-ratio">
+              <span className="k-contrast-ratio-text">{contrastText}</span>
+              {contrast >= 4.5 ? (
+                <span className="k-contrast-validation k-text-success">
+                  <span className="k-icon k-i-check"/>
+                  {contrast >= 7 && <span className="k-icon k-i-check"/>}
+                </span>
+                    ) : (
+                      <span className="k-contrast-validation k-text-error">
+                        <span className="k-icon k-i-close"/>
+                      </span>
+                    )}
+            </div>
+            <div>
+              <span>{aaText}</span>
+              {contrast >= 4.5 ? success : error}
+            </div>
+            <div>
+              <span>{aaaText}</span>
+              {contrast >= 7 ? success : error}
+            </div>
+          </div>
+        );
+    }
+}
+
+registerForLocalization(ColorContrastLabels);

package/src/colors/ColorContrastSvg.tsx

@@ -0,0 +1,88 @@
+import * as React from 'react';
+import { bezierCommand, controlPoint, line, svgPath } from './utils/svg-calc';
+import {getColorFromHSV, getRGBA, getContrastFromTwoRGBAs } from './utils/color-parser';
+import { HSVA } from './models/hsva';
+
+const AA_CONTRAST = 4.5;
+const AAA_CONTRAST = 7;
+const STEP_COUNT = 16;
+
+/**
+ * @hidden
+ */
+export interface ColorContrastSvgProps{
+    metrics: ClientRect | undefined;
+    backgroundColor: string;
+    hsva: HSVA;
+};
+
+/**
+ * @hidden
+ */
+export class ColorContrastSvg extends React.Component<ColorContrastSvgProps> {
+    renderSvgCurveLine() {
+        const gradientRectMetrics = this.props.metrics;
+
+        const findValue = (contrast: number, saturation: number, low: number, high: number, comparer: (a: number, b: number) => boolean): any => {
+            const mid = (low + high) / 2;
+            const hsva = Object.assign({}, this.props.hsva, { s: saturation / gradientRectMetrics!.width, v: 1 - mid / gradientRectMetrics!.height });
+            const currentContrast = getContrastFromTwoRGBAs(getRGBA(getColorFromHSV(hsva)), getRGBA(this.props.backgroundColor || ''));
+
+            if (low + 0.5 > high) {
+                if (currentContrast < contrast + 1 && currentContrast > contrast - 1) {
+                    return mid;
+                } else {
+                    return null;
+                }
+            }
+
+            if (comparer(currentContrast, contrast)) {
+                return findValue(contrast, saturation, low, high - (high - low) / 2, comparer);
+            }
+            return findValue(contrast, saturation, low + (high - low) / 2, high, comparer);
+        };
+
+        const getPaths = (contrast: number, stepCount: number, reversed = false) => {
+            const points: any = [];
+            for (let i = 0; i <= gradientRectMetrics!.width; i += gradientRectMetrics!.width/stepCount) {
+                const value = findValue(contrast, i, 0, gradientRectMetrics!.height, reversed ? ((a, b) => a < b) : ((a, b) => a > b));
+                if (value !== null){
+                    points.push([i, value]);
+                }
+            }
+            return points;
+        };
+        const bezierCommandCalc = bezierCommand(controlPoint(line));
+        return svgPath(getPaths(AA_CONTRAST, STEP_COUNT), bezierCommandCalc) +
+                svgPath(getPaths(AA_CONTRAST, STEP_COUNT, true), bezierCommandCalc) +
+                svgPath(getPaths(AAA_CONTRAST, STEP_COUNT), bezierCommandCalc) +
+                svgPath(getPaths(AAA_CONTRAST, STEP_COUNT, true), bezierCommandCalc);
+    }
+
+    shouldComponentUpdate(nextProps: ColorContrastSvgProps){
+        if (nextProps.hsva.h === this.props.hsva.h &&
+            nextProps.hsva.a === this.props.hsva.a &&
+            this.props.backgroundColor === nextProps.backgroundColor){
+            return false;
+        }
+        return true;
+    }
+
+    render(){
+        return (
+          <svg
+            xmlns="http://www.w3.org/2000/svg"
+            className={'k-color-contrast-svg'}
+            dangerouslySetInnerHTML={{ __html: this.renderSvgCurveLine() }}
+            style={{
+              position: 'absolute',
+              overflow: 'visible',
+              pointerEvents: 'none',
+              left: 0,
+              top: 0,
+              zIndex: 3
+            }}
+            />
+        );
+    }
+}