@instructure/ui-color-picker 8.25.1-snapshot-20

package/es/ColorMixer/Slider/theme.js

@@ -0,0 +1,53 @@
+/*
+ * The MIT License (MIT)
+ *
+ * Copyright (c) 2015 - present Instructure, Inc.
+ *
+ * Permission is hereby granted, free of charge, to any person obtaining a copy
+ * of this software and associated documentation files (the "Software"), to deal
+ * in the Software without restriction, including without limitation the rights
+ * to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+ * copies of the Software, and to permit persons to whom the Software is
+ * furnished to do so, subject to the following conditions:
+ *
+ * The above copyright notice and this permission notice shall be included in all
+ * copies or substantial portions of the Software.
+ *
+ * THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+ * IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+ * FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+ * AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+ * LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+ * OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+ * SOFTWARE.
+ */
+import { colorIndicatorBorderColor } from '../../ColorIndicator/theme';
+/**
+ * Generates the theme object for the component from the theme and provided additional information
+ * @param  {Object} theme The actual theme object.
+ * @return {Object} The final theme object with the overrides and component variables
+ */
+
+const generateComponentTheme = theme => {
+  const colors = theme.colors,
+        borders = theme.borders,
+        stacking = theme.stacking;
+  const componentVariables = {
+    indicatorBorderColor: colors.licorice,
+    checkerboardBackgroundImage: `linear-gradient(45deg, ${colors.tiara} 25%, transparent 25%),
+    linear-gradient(-45deg, ${colors.tiara} 25%, transparent 25%),
+    linear-gradient(45deg, transparent 75%, ${colors.tiara} 75%),
+    linear-gradient(-45deg, transparent 75%, ${colors.tiara} 75%)`,
+    checkerboardBackgroundSize: '.5rem .5rem',
+    checkerboardBackgroundPosition: '0 0, 0 .25rem, .25rem -0.25rem, -0.25rem 0px',
+    colorIndicatorBorderColor,
+    indicatorBorderWidth: borders.widthSmall,
+    sliderBorderWidth: borders.widthSmall,
+    indicatorZIndex: stacking.above,
+    disabledOverlayZIndex: stacking.topmost
+  };
+  return { ...componentVariables
+  };
+};
+
+export default generateComponentTheme;

package/es/ColorMixer/index.js

@@ -0,0 +1,232 @@
+import _objectWithoutProperties from "@babel/runtime/helpers/esm/objectWithoutProperties";
+const _excluded = ["disabled", "onChange", "value", "elementRef", "styles", "withAlpha", "rgbRedInputScreenReaderLabel", "rgbGreenInputScreenReaderLabel", "rgbBlueInputScreenReaderLabel", "rgbAlphaInputScreenReaderLabel", "colorSliderNavigationExplanationScreenReaderLabel", "alphaSliderNavigationExplanationScreenReaderLabel", "colorPaletteNavigationExplanationScreenReaderLabel"];
+
+var _dec, _dec2, _class, _class2;
+
+/*
+ * The MIT License (MIT)
+ *
+ * Copyright (c) 2015 - present Instructure, Inc.
+ *
+ * Permission is hereby granted, free of charge, to any person obtaining a copy
+ * of this software and associated documentation files (the "Software"), to deal
+ * in the Software without restriction, including without limitation the rights
+ * to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+ * copies of the Software, and to permit persons to whom the Software is
+ * furnished to do so, subject to the following conditions:
+ *
+ * The above copyright notice and this permission notice shall be included in all
+ * copies or substantial portions of the Software.
+ *
+ * THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+ * IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+ * FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+ * AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+ * LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+ * OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+ * SOFTWARE.
+ */
+
+/** @jsx jsx */
+import { Component } from 'react';
+import { withStyle, jsx } from '@instructure/emotion';
+import { passthroughProps } from '@instructure/ui-react-utils';
+import { testable } from '@instructure/ui-testable';
+import { colorToHex8, colorToHsva, colorToRGB } from '@instructure/ui-color-utils';
+import ColorPalette from './ColorPalette';
+import Slider from './Slider';
+import RGBAInput from './RGBAInput';
+import { propTypes, allowedProps } from './props';
+import generateStyle from './styles';
+/**
+---
+category: components
+---
+@tsProps
+**/
+
+let ColorMixer = (_dec = withStyle(generateStyle, null), _dec2 = testable(), _dec(_class = _dec2(_class = (_class2 = class ColorMixer extends Component {
+  constructor(props) {
+    super(props);
+    this.ref = null;
+    this._width = 272;
+    this._paletteHeight = 160;
+    this._sliderHeight = 8;
+    this._sliderIndicatorRadius = 6;
+    this._paletteIndicatorRadius = 6;
+
+    this.handleRef = el => {
+      const elementRef = this.props.elementRef;
+      this.ref = el;
+
+      if (typeof elementRef === 'function') {
+        elementRef(el);
+      }
+    };
+
+    this.state = {
+      h: 0,
+      s: 0,
+      v: 0,
+      a: 1
+    };
+  }
+
+  componentDidMount() {
+    var _this$props$makeStyle, _this$props;
+
+    (_this$props$makeStyle = (_this$props = this.props).makeStyles) === null || _this$props$makeStyle === void 0 ? void 0 : _this$props$makeStyle.call(_this$props);
+
+    if (this.props.value) {
+      this.setState({ ...colorToHsva(this.props.value)
+      });
+    }
+  }
+
+  componentDidUpdate(prevProps, prevState) {
+    var _this$props$makeStyle2, _this$props2;
+
+    (_this$props$makeStyle2 = (_this$props2 = this.props).makeStyles) === null || _this$props$makeStyle2 === void 0 ? void 0 : _this$props$makeStyle2.call(_this$props2);
+    const _this$state = this.state,
+          h = _this$state.h,
+          s = _this$state.s,
+          v = _this$state.v,
+          a = _this$state.a;
+
+    if (prevState.h !== h || prevState.s !== s || prevState.v !== v || prevState.a !== a) {
+      this.props.onChange(colorToHex8({
+        h,
+        s,
+        v,
+        a
+      }));
+    }
+
+    if (prevProps.value !== this.props.value && colorToHex8({
+      h,
+      s,
+      v,
+      a
+    }) !== this.props.value) {
+      this.setState({ ...colorToHsva(this.props.value)
+      });
+    }
+  }
+
+  render() {
+    const _this$props3 = this.props,
+          disabled = _this$props3.disabled,
+          onChange = _this$props3.onChange,
+          value = _this$props3.value,
+          elementRef = _this$props3.elementRef,
+          styles = _this$props3.styles,
+          withAlpha = _this$props3.withAlpha,
+          rgbRedInputScreenReaderLabel = _this$props3.rgbRedInputScreenReaderLabel,
+          rgbGreenInputScreenReaderLabel = _this$props3.rgbGreenInputScreenReaderLabel,
+          rgbBlueInputScreenReaderLabel = _this$props3.rgbBlueInputScreenReaderLabel,
+          rgbAlphaInputScreenReaderLabel = _this$props3.rgbAlphaInputScreenReaderLabel,
+          colorSliderNavigationExplanationScreenReaderLabel = _this$props3.colorSliderNavigationExplanationScreenReaderLabel,
+          alphaSliderNavigationExplanationScreenReaderLabel = _this$props3.alphaSliderNavigationExplanationScreenReaderLabel,
+          colorPaletteNavigationExplanationScreenReaderLabel = _this$props3.colorPaletteNavigationExplanationScreenReaderLabel,
+          props = _objectWithoutProperties(_this$props3, _excluded);
+
+    const _this$state2 = this.state,
+          h = _this$state2.h,
+          s = _this$state2.s,
+          v = _this$state2.v,
+          a = _this$state2.a;
+    return jsx("div", Object.assign({}, passthroughProps(props), {
+      "aria-disabled": disabled,
+      ref: this.handleRef,
+      css: styles === null || styles === void 0 ? void 0 : styles.colorMixer
+    }), jsx("span", {
+      css: styles === null || styles === void 0 ? void 0 : styles.sliderAndPaletteContainer,
+      "aria-label": `${colorToHex8({
+        h,
+        s,
+        v,
+        a
+      })}`,
+      "aria-live": "polite"
+    }, jsx(ColorPalette, {
+      disabled: disabled,
+      width: this._width,
+      height: this._paletteHeight,
+      indicatorRadius: this._paletteIndicatorRadius,
+      hue: h,
+      color: {
+        h,
+        s,
+        v
+      },
+      onChange: color => {
+        this.setState({
+          s: color.s,
+          v: color.v
+        });
+      },
+      navigationExplanationScreenReaderLabel: colorPaletteNavigationExplanationScreenReaderLabel
+    }), jsx(Slider, {
+      disabled: disabled,
+      isColorSlider: true,
+      width: this._width,
+      height: this._sliderHeight,
+      indicatorRadius: this._sliderIndicatorRadius,
+      value: h,
+      minValue: 0,
+      maxValue: 359,
+      color: colorToHex8({
+        h,
+        s,
+        v,
+        a
+      }),
+      onChange: hue => {
+        this.setState({
+          h: hue
+        });
+      },
+      navigationExplanationScreenReaderLabel: colorSliderNavigationExplanationScreenReaderLabel
+    }), withAlpha && jsx(Slider, {
+      disabled: disabled,
+      width: this._width,
+      height: this._sliderHeight,
+      indicatorRadius: this._sliderIndicatorRadius,
+      color: colorToHex8({
+        h,
+        s,
+        v
+      }),
+      value: a,
+      minValue: 0,
+      maxValue: 1,
+      onChange: opacity => this.setState({
+        a: opacity / 100
+      }),
+      navigationExplanationScreenReaderLabel: alphaSliderNavigationExplanationScreenReaderLabel
+    })), jsx(RGBAInput, {
+      disabled: disabled,
+      label: withAlpha ? 'RGBA' : 'RGB',
+      width: this._width,
+      value: colorToRGB({
+        h,
+        s,
+        v,
+        a
+      }),
+      onChange: color => this.setState({ ...colorToHsva(color)
+      }),
+      withAlpha: withAlpha,
+      rgbRedInputScreenReaderLabel: rgbRedInputScreenReaderLabel,
+      rgbGreenInputScreenReaderLabel: rgbGreenInputScreenReaderLabel,
+      rgbBlueInputScreenReaderLabel: rgbBlueInputScreenReaderLabel,
+      rgbAlphaInputScreenReaderLabel: rgbAlphaInputScreenReaderLabel
+    }));
+  }
+
+}, _class2.displayName = "ColorMixer", _class2.propTypes = propTypes, _class2.allowedProps = allowedProps, _class2.componentId = 'ColorMixer', _class2.defaultProps = {
+  withAlpha: false,
+  disabled: false
+}, _class2)) || _class) || _class);
+export { ColorMixer };
+export default ColorMixer;

package/es/ColorMixer/props.js

@@ -0,0 +1,40 @@
+/*
+ * The MIT License (MIT)
+ *
+ * Copyright (c) 2015 - present Instructure, Inc.
+ *
+ * Permission is hereby granted, free of charge, to any person obtaining a copy
+ * of this software and associated documentation files (the "Software"), to deal
+ * in the Software without restriction, including without limitation the rights
+ * to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+ * copies of the Software, and to permit persons to whom the Software is
+ * furnished to do so, subject to the following conditions:
+ *
+ * The above copyright notice and this permission notice shall be included in all
+ * copies or substantial portions of the Software.
+ *
+ * THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+ * IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+ * FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+ * AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+ * LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+ * OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+ * SOFTWARE.
+ */
+import PropTypes from 'prop-types';
+const propTypes = {
+  disabled: PropTypes.bool,
+  elementRef: PropTypes.func,
+  value: PropTypes.string,
+  onChange: PropTypes.func,
+  withAlpha: PropTypes.bool,
+  rgbRedInputScreenReaderLabel: PropTypes.string.isRequired,
+  rgbGreenInputScreenReaderLabel: PropTypes.string.isRequired,
+  rgbBlueInputScreenReaderLabel: PropTypes.string.isRequired,
+  rgbAlphaInputScreenReaderLabel: PropTypes.string.isRequired,
+  colorSliderNavigationExplanationScreenReaderLabel: PropTypes.string.isRequired,
+  alphaSliderNavigationExplanationScreenReaderLabel: PropTypes.string.isRequired,
+  colorPaletteNavigationExplanationScreenReaderLabel: PropTypes.string.isRequired
+};
+const allowedProps = ['disabled', 'elementRef', 'value', 'onChange', 'withAlpha', 'rgbRedInputScreenReaderLabel', 'rgbGreenInputScreenReaderLabel', 'rgbBlueInputScreenReaderLabel', 'rgbAlphaInputScreenReaderLabel', 'colorSliderNavigationExplanationScreenReaderLabel', 'alphaSliderNavigationExplanationScreenReaderLabel', 'colorPaletteNavigationExplanationScreenReaderLabel'];
+export { propTypes, allowedProps };

package/es/ColorMixer/styles.js

@@ -0,0 +1,49 @@
+/*
+ * The MIT License (MIT)
+ *
+ * Copyright (c) 2015 - present Instructure, Inc.
+ *
+ * Permission is hereby granted, free of charge, to any person obtaining a copy
+ * of this software and associated documentation files (the "Software"), to deal
+ * in the Software without restriction, including without limitation the rights
+ * to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+ * copies of the Software, and to permit persons to whom the Software is
+ * furnished to do so, subject to the following conditions:
+ *
+ * The above copyright notice and this permission notice shall be included in all
+ * copies or substantial portions of the Software.
+ *
+ * THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+ * IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+ * FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+ * AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+ * LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+ * OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+ * SOFTWARE.
+ */
+
+/**
+ * ---
+ * private: true
+ * ---
+ * Generates the style object from the theme and provided additional information
+ * @param  {Object} componentTheme The theme variable object.
+ * @param  {Object} props the props of the component, the style is applied to
+ * @param  {Object} state the state of the component, the style is applied to
+ * @return {Object} The final style object, which will be used in the component
+ */
+const generateStyle = () => {
+  return {
+    colorMixer: {
+      label: 'colorMixer',
+      width: '17rem'
+    },
+    sliderAndPaletteContainer: {
+      label: 'colorMixer__sliderAndPaletteContainer',
+      display: 'flex',
+      flexDirection: 'column'
+    }
+  };
+};
+
+export default generateStyle;

package/es/ColorMixer/utils/shallowCompare.js

@@ -0,0 +1,32 @@
+/*
+ * The MIT License (MIT)
+ *
+ * Copyright (c) 2015 - present Instructure, Inc.
+ *
+ * Permission is hereby granted, free of charge, to any person obtaining a copy
+ * of this software and associated documentation files (the "Software"), to deal
+ * in the Software without restriction, including without limitation the rights
+ * to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+ * copies of the Software, and to permit persons to whom the Software is
+ * furnished to do so, subject to the following conditions:
+ *
+ * The above copyright notice and this permission notice shall be included in all
+ * copies or substantial portions of the Software.
+ *
+ * THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+ * IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+ * FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+ * AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+ * LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+ * OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+ * SOFTWARE.
+ */
+const shallowCompare = (newObj, prevObj) => {
+  for (const key in newObj) {
+    if (newObj[key] !== prevObj[key]) return true;
+  }
+
+  return false;
+};
+
+export default shallowCompare;

package/es/ColorPicker/ColorPickerLocator.js

@@ -0,0 +1,137 @@
+/*
+ * The MIT License (MIT)
+ *
+ * Copyright (c) 2015 - present Instructure, Inc.
+ *
+ * Permission is hereby granted, free of charge, to any person obtaining a copy
+ * of this software and associated documentation files (the "Software"), to deal
+ * in the Software without restriction, including without limitation the rights
+ * to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+ * copies of the Software, and to permit persons to whom the Software is
+ * furnished to do so, subject to the following conditions:
+ *
+ * The above copyright notice and this permission notice shall be included in all
+ * copies or substantial portions of the Software.
+ *
+ * THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+ * IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+ * FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+ * AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+ * LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+ * OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+ * SOFTWARE.
+ */
+import { locator } from '@instructure/ui-test-locator';
+import { find, findAll, parseQueryArguments, findWithText, within } from '@instructure/ui-test-utils';
+import { ColorPicker } from '.';
+/* eslint-disable no-restricted-imports */
+// @ts-expect-error bypass no type definition found error
+
+import { PopoverLocator } from '@instructure/ui-popover/es/Popover/PopoverLocator';
+/* eslint-enable no-restricted-imports */
+
+import { ColorIndicatorLocator } from '../ColorIndicator/ColorIndicatorLocator';
+import { ColorMixerLocator } from '../ColorMixer/ColorMixerLocator';
+import { ColorPresetLocator } from '../ColorPreset/ColorPresetLocator';
+
+async function _findColorPreset() {
+  const popoverContent = await PopoverLocator.findContent(...arguments);
+  const colorPreset = await ColorPresetLocator.find(popoverContent.getDOMNode());
+  return ColorIndicatorLocator.findAll(colorPreset.getDOMNode());
+}
+
+const customMethods = {
+  findTextInput: function () {
+    for (var _len = arguments.length, args = new Array(_len), _key = 0; _key < _len; _key++) {
+      args[_key] = arguments[_key];
+    }
+
+    return find('[id^=TextInput_]', ...args);
+  },
+  findColorIndicator: function () {
+    return ColorIndicatorLocator.find(...arguments);
+  },
+  findInputAfterIcon: function () {
+    for (var _len2 = arguments.length, args = new Array(_len2), _key2 = 0; _key2 < _len2; _key2++) {
+      args[_key2] = arguments[_key2];
+    }
+
+    return find('[class$=-textInput__afterElement]', ...args);
+  },
+  findFormMessages: function () {
+    for (var _len3 = arguments.length, args = new Array(_len3), _key3 = 0; _key3 < _len3; _key3++) {
+      args[_key3] = arguments[_key3];
+    }
+
+    return findAll('[class$=-formFieldMessage]', ...args);
+  },
+  findPopoverRoot: function () {
+    return PopoverLocator.find(...arguments);
+  },
+  findPopoverTrigger: function () {
+    return PopoverLocator.findTrigger(...arguments);
+  },
+  findColorMixer: function () {
+    return ColorMixerLocator.find(...arguments);
+  },
+  findPopoverContent: function () {
+    const _parseQueryArguments = parseQueryArguments(...arguments),
+          element = _parseQueryArguments.element,
+          selector = _parseQueryArguments.selector,
+          options = _parseQueryArguments.options;
+
+    return PopoverLocator.findContent(element, selector, { ...options,
+      customMethods: { ...options.customMethods,
+        ...customMethods
+      }
+    });
+  },
+  findRGBAInputs: async function () {
+    for (var _len4 = arguments.length, args = new Array(_len4), _key4 = 0; _key4 < _len4; _key4++) {
+      args[_key4] = arguments[_key4];
+    }
+
+    const rgbaInputs = await findAll('[class$=-RGBAInput__rgbInput]', ...args);
+    return Promise.all(rgbaInputs.map(span => span.find('input')));
+  },
+  findPopoverButtonWithText: async function () {
+    let el = await findWithText(...arguments);
+
+    while (el.getTagName() !== 'button') {
+      const parentNode = el.getParentNode();
+
+      if (!parentNode) {
+        break;
+      }
+
+      el = within(parentNode);
+    }
+
+    return el;
+  },
+  findColorPreset: async function () {
+    return _findColorPreset(...arguments);
+  },
+  findColorPresetButtons: async function () {
+    const colorPresets = await _findColorPreset(...arguments);
+    const colorPresetButtons = [];
+
+    for (let el of colorPresets) {
+      while (el.getTagName() !== 'button') {
+        const parentNode = el.getParentNode();
+
+        if (!parentNode) {
+          break;
+        }
+
+        el = within(parentNode);
+      }
+
+      colorPresetButtons.push(el);
+    }
+
+    return colorPresetButtons;
+  }
+}; //@ts-expect-error no selector on class
+
+export const ColorPickerLocator = locator(ColorPicker.selector, customMethods);