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

package/lib/ColorContrast/index.js

@@ -0,0 +1,169 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
+
+var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWildcard").default;
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = exports.ColorContrast = void 0;
+
+var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutProperties"));
+
+var _react = _interopRequireWildcard(require("react"));
+
+var _passthroughProps = require("@instructure/ui-react-utils/lib/passthroughProps.js");
+
+var _testable = require("@instructure/ui-testable/lib/testable.js");
+
+var _emotion = require("@instructure/emotion");
+
+var _Text = require("@instructure/ui-text/lib/Text");
+
+var _ColorIndicator = _interopRequireDefault(require("../ColorIndicator"));
+
+var _props = require("./props");
+
+var _styles = _interopRequireDefault(require("./styles"));
+
+var _theme = _interopRequireDefault(require("./theme"));
+
+var _contrast = require("@instructure/ui-color-utils/lib/contrast.js");
+
+var _Pill = require("@instructure/ui-pill/lib/Pill");
+
+const _excluded = ["styles", "elementRef", "failureLabel", "successLabel", "withoutColorPreview", "firstColor", "secondColor", "label", "firstColorLabel", "secondColorLabel", "normalTextLabel", "largeTextLabel", "graphicsTextLabel"];
+
+var _dec, _dec2, _class, _class2;
+
+/**
+---
+category: components
+---
+@tsProps
+**/
+let ColorContrast = (_dec = (0, _emotion.withStyle)(_styles.default, _theme.default), _dec2 = (0, _testable.testable)(), _dec(_class = _dec2(_class = (_class2 = class ColorContrast extends _react.Component {
+  constructor(props) {
+    super(props);
+    this.ref = null;
+
+    this.handleRef = el => {
+      const elementRef = this.props.elementRef;
+      this.ref = el;
+
+      if (typeof elementRef === 'function') {
+        elementRef(el);
+      }
+    };
+
+    this.renderStatus = (pass, description) => {
+      const _this$props = this.props,
+            successLabel = _this$props.successLabel,
+            failureLabel = _this$props.failureLabel,
+            styles = _this$props.styles;
+      return (0, _emotion.jsx)("div", {
+        css: styles === null || styles === void 0 ? void 0 : styles.statusWrapper
+      }, (0, _emotion.jsx)("div", {
+        css: pass ? styles === null || styles === void 0 ? void 0 : styles.successDescription : styles === null || styles === void 0 ? void 0 : styles.failureDescription
+      }, description), (0, _emotion.jsx)("div", {
+        css: styles === null || styles === void 0 ? void 0 : styles.statusIndicatorWrapper
+      }, (0, _emotion.jsx)(_Pill.Pill, {
+        color: pass ? 'success' : 'danger'
+      }, pass ? successLabel : failureLabel)));
+    };
+
+    this.renderColorIndicator = (color, label) => {
+      var _this$props$styles, _this$props$styles2, _this$props$styles3;
+
+      return (0, _emotion.jsx)(_react.default.Fragment, null, (0, _emotion.jsx)("div", null, (0, _emotion.jsx)("div", {
+        css: (_this$props$styles = this.props.styles) === null || _this$props$styles === void 0 ? void 0 : _this$props$styles.colorIndicator
+      }, (0, _emotion.jsx)(_ColorIndicator.default, {
+        color: color
+      }))), (0, _emotion.jsx)("div", null, (0, _emotion.jsx)("div", {
+        css: (_this$props$styles2 = this.props.styles) === null || _this$props$styles2 === void 0 ? void 0 : _this$props$styles2.colorIndicatorLabel
+      }, label), (0, _emotion.jsx)("div", {
+        css: (_this$props$styles3 = this.props.styles) === null || _this$props$styles3 === void 0 ? void 0 : _this$props$styles3.pickedColorHex
+      }, color)));
+    };
+
+    this.calcBlendedColor = (c1, c2) => {
+      const alpha = 1 - (1 - c1.a) * (1 - c2.a);
+      return {
+        r: c2.r * c2.a / alpha + c1.r * c1.a * (1 - c2.a) / alpha,
+        g: c2.g * c2.a / alpha + c1.g * c1.a * (1 - c2.a) / alpha,
+        b: c2.b * c2.a / alpha + c1.b * c1.a * (1 - c2.a) / alpha,
+        a: 1
+      };
+    };
+  }
+
+  componentDidMount() {
+    var _this$props$makeStyle, _this$props2;
+
+    (_this$props$makeStyle = (_this$props2 = this.props).makeStyles) === null || _this$props$makeStyle === void 0 ? void 0 : _this$props$makeStyle.call(_this$props2);
+  }
+
+  componentDidUpdate() {
+    var _this$props$makeStyle2, _this$props3;
+
+    (_this$props$makeStyle2 = (_this$props3 = this.props).makeStyles) === null || _this$props$makeStyle2 === void 0 ? void 0 : _this$props$makeStyle2.call(_this$props3);
+  }
+
+  //We project the firstColor onto an opaque white background, then we project the secondColor onto
+  //the projected first color. We calculate the contrast of these two, projected colors.
+  get calcContrast() {
+    const c1RGBA = colorToRGB(this.props.firstColor);
+    const c2RGBA = colorToRGB(this.props.secondColor);
+    const c1OnWhite = this.calcBlendedColor({
+      r: 255,
+      g: 255,
+      b: 255,
+      a: 1
+    }, c1RGBA);
+    const c2OnC1OnWhite = this.calcBlendedColor(c1OnWhite, c2RGBA);
+    return (0, _contrast.contrast)(colorToHex8(c1OnWhite), colorToHex8(c2OnC1OnWhite), 2);
+  }
+
+  render() {
+    var _this$props$styles4, _this$props$styles5, _this$props$styles6, _this$props$styles7;
+
+    const _this$props4 = this.props,
+          styles = _this$props4.styles,
+          elementRef = _this$props4.elementRef,
+          failureLabel = _this$props4.failureLabel,
+          successLabel = _this$props4.successLabel,
+          withoutColorPreview = _this$props4.withoutColorPreview,
+          firstColor = _this$props4.firstColor,
+          secondColor = _this$props4.secondColor,
+          label = _this$props4.label,
+          firstColorLabel = _this$props4.firstColorLabel,
+          secondColorLabel = _this$props4.secondColorLabel,
+          normalTextLabel = _this$props4.normalTextLabel,
+          largeTextLabel = _this$props4.largeTextLabel,
+          graphicsTextLabel = _this$props4.graphicsTextLabel,
+          props = (0, _objectWithoutProperties2.default)(_this$props4, _excluded);
+    const contrast = this.calcContrast;
+    return (0, _emotion.jsx)("div", Object.assign({}, (0, _passthroughProps.passthroughProps)(props), {
+      ref: this.handleRef,
+      css: styles === null || styles === void 0 ? void 0 : styles.colorContrast
+    }), (0, _emotion.jsx)("div", {
+      css: (_this$props$styles4 = this.props.styles) === null || _this$props$styles4 === void 0 ? void 0 : _this$props$styles4.label
+    }, (0, _emotion.jsx)(_Text.Text, {
+      weight: "bold",
+      as: "div"
+    }, label)), (0, _emotion.jsx)(_Text.Text, {
+      size: "x-large"
+    }, contrast, ":1"), !withoutColorPreview && (0, _emotion.jsx)("div", {
+      css: (_this$props$styles5 = this.props.styles) === null || _this$props$styles5 === void 0 ? void 0 : _this$props$styles5.colorPreview
+    }, (0, _emotion.jsx)("div", {
+      css: (_this$props$styles6 = this.props.styles) === null || _this$props$styles6 === void 0 ? void 0 : _this$props$styles6.firstColorPreview
+    }, this.renderColorIndicator(firstColor, firstColorLabel || '')), (0, _emotion.jsx)("div", {
+      css: (_this$props$styles7 = this.props.styles) === null || _this$props$styles7 === void 0 ? void 0 : _this$props$styles7.secondColorPreview
+    }, this.renderColorIndicator(secondColor, secondColorLabel || ''))), this.renderStatus(contrast >= 4.5, normalTextLabel), this.renderStatus(contrast >= 3, largeTextLabel), this.renderStatus(contrast >= 3, graphicsTextLabel));
+  }
+
+}, _class2.displayName = "ColorContrast", _class2.propTypes = _props.propTypes, _class2.allowedProps = _props.allowedProps, _class2.componentId = 'ColorContrast', _class2)) || _class) || _class);
+exports.ColorContrast = ColorContrast;
+var _default = ColorContrast;
+exports.default = _default;

package/lib/ColorContrast/props.js

@@ -0,0 +1,51 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.propTypes = exports.allowedProps = void 0;
+
+var _propTypes = _interopRequireDefault(require("prop-types"));
+
+/*
+ * 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 propTypes = {
+  elementRef: _propTypes.default.func,
+  failureLabel: _propTypes.default.string.isRequired,
+  firstColor: _propTypes.default.string.isRequired,
+  firstColorLabel: _propTypes.default.string,
+  graphicsTextLabel: _propTypes.default.string.isRequired,
+  withoutColorPreview: _propTypes.default.bool,
+  label: _propTypes.default.string.isRequired,
+  largeTextLabel: _propTypes.default.string.isRequired,
+  normalTextLabel: _propTypes.default.string.isRequired,
+  secondColor: _propTypes.default.string.isRequired,
+  secondColorLabel: _propTypes.default.string,
+  successLabel: _propTypes.default.string.isRequired
+};
+exports.propTypes = propTypes;
+const allowedProps = ['elementRef', 'failureLabel', 'firstColor', 'firstColorLabel', 'graphicsTextLabel', 'withoutColorPreview', 'label', 'largeTextLabel', 'normalTextLabel', 'secondColor', 'secondColorLabel', 'successLabel'];
+exports.allowedProps = allowedProps;

package/lib/ColorContrast/styles.js

@@ -0,0 +1,107 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+
+/*
+ * 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 = componentTheme => {
+  const statusDescriptionStyle = pass => ({
+    label: pass ? 'colorContrast__successDescription' : 'colorContrast__failureDescription',
+    flex: 1,
+    color: pass ? componentTheme.successColor : componentTheme.failureColor
+  });
+
+  return {
+    colorContrast: {
+      label: 'colorContrast',
+      width: componentTheme.width,
+      fontFamily: componentTheme.fontFamily,
+      fontWeight: componentTheme.fontWeight,
+      lineHeight: componentTheme.lineHeight,
+      fontSize: componentTheme.fontSize
+    },
+    statusWrapper: {
+      label: 'colorContrast__statusWrapper',
+      width: '100%',
+      display: 'flex',
+      marginBottom: componentTheme.statusWrapperBottomMargin
+    },
+    successDescription: statusDescriptionStyle(true),
+    failureDescription: statusDescriptionStyle(false),
+    colorIndicator: {
+      marginInlineEnd: componentTheme.colorIndicatorRightMargin
+    },
+    statusIndicatorWrapper: {
+      label: 'colorContrast__statusIndicatorWrapper',
+      flex: 1,
+      display: 'flex',
+      flexDirection: 'row-reverse'
+    },
+    colorIndicatorLabel: {
+      label: 'colorContrast__colorIndicatorLabel',
+      wordBreak: 'break-all'
+    },
+    pickedColorHex: {
+      label: 'colorContrast__pickedColorHex',
+      color: componentTheme.pickedHexColor
+    },
+    colorPreview: {
+      label: 'colorContrast__colorPreview',
+      display: 'flex',
+      width: '100%',
+      marginBottom: componentTheme.colorPreviewBottomMargin,
+      marginTop: componentTheme.colorPreviewTopMargin
+    },
+    firstColorPreview: {
+      label: 'colorContrast__firstColorPreview',
+      display: 'flex',
+      flex: 1
+    },
+    secondColorPreview: {
+      label: 'colorContrast__secondColorPreview',
+      display: 'flex'
+    },
+    label: {
+      label: 'colorContrast__label',
+      marginBottom: componentTheme.labelBottomMargin
+    }
+  };
+};
+
+var _default = generateStyle;
+exports.default = _default;

package/lib/ColorContrast/theme.js

@@ -0,0 +1,63 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+
+/*
+ * 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.
+ */
+
+/**
+ * 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,
+        typography = theme.typography,
+        spacing = theme.spacing,
+        borders = theme.borders;
+  const componentVariables = {
+    width: '17rem',
+    fontFamily: typography === null || typography === void 0 ? void 0 : typography.fontFamily,
+    fontWeight: typography === null || typography === void 0 ? void 0 : typography.fontWeightNormal,
+    lineHeight: typography === null || typography === void 0 ? void 0 : typography.lineHeight,
+    fontSize: typography === null || typography === void 0 ? void 0 : typography.fontSizeMedium,
+    statusWrapperBottomMargin: spacing === null || spacing === void 0 ? void 0 : spacing.xxSmall,
+    colorIndicatorRightMargin: spacing === null || spacing === void 0 ? void 0 : spacing.small,
+    colorPreviewBottomMargin: spacing === null || spacing === void 0 ? void 0 : spacing.small,
+    colorPreviewTopMargin: spacing === null || spacing === void 0 ? void 0 : spacing.xSmall,
+    labelBottomMargin: spacing === null || spacing === void 0 ? void 0 : spacing.xxSmall,
+    smallBorder: borders.widthSmall,
+    successColor: colors.shamrock,
+    failureColor: colors.crimson,
+    pickedHexColor: colors.ash
+  };
+  return { ...componentVariables
+  };
+};
+
+var _default = generateComponentTheme;
+exports.default = _default;

package/lib/ColorIndicator/ColorIndicatorLocator.js

@@ -0,0 +1,51 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.ColorIndicatorLocator = void 0;
+
+var _locator = require("@instructure/ui-test-locator/lib/utils/locator.js");
+
+var _index = require("./index");
+
+var _uiColorUtils = require("@instructure/ui-color-utils");
+
+/*
+ * 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.
+ */
+// @ts-expect-error ts-migrate(2339) FIXME: Property 'selector' does not exist on type 'typeof... Remove this comment to see the full error message
+const ColorIndicatorLocator = (0, _locator.locator)(_index.ColorIndicator.selector, {
+  getColorRGBA: element => {
+    const _getComputedStyle = getComputedStyle(element),
+          boxShadow = _getComputedStyle.boxShadow;
+
+    if (boxShadow === 'none') {
+      return boxShadow;
+    }
+
+    const shadowColor = /rgba?\(\d+,\s\d+,\s\d+(,\s.+)?\)/.exec(boxShadow)[0];
+    return (0, _uiColorUtils.colorToRGB)(shadowColor);
+  }
+});
+exports.ColorIndicatorLocator = ColorIndicatorLocator;

package/lib/ColorIndicator/index.js

@@ -0,0 +1,82 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = exports.ColorIndicator = void 0;
+
+var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutProperties"));
+
+var _react = require("react");
+
+var _testable = require("@instructure/ui-testable/lib/testable.js");
+
+var _passthroughProps = require("@instructure/ui-react-utils/lib/passthroughProps.js");
+
+var _emotion = require("@instructure/emotion");
+
+var _styles = _interopRequireDefault(require("./styles"));
+
+var _theme = _interopRequireDefault(require("./theme"));
+
+var _props = require("./props");
+
+const _excluded = ["color", "elementRef"];
+
+var _dec, _dec2, _class, _class2;
+
+/**
+---
+category: components
+---
+@tsProps
+**/
+let ColorIndicator = (_dec = (0, _emotion.withStyle)(_styles.default, _theme.default), _dec2 = (0, _testable.testable)(), _dec(_class = _dec2(_class = (_class2 = class ColorIndicator extends _react.Component {
+  constructor() {
+    super(...arguments);
+    this.ref = null;
+
+    this.handleRef = el => {
+      const elementRef = this.props.elementRef;
+      this.ref = el;
+
+      if (typeof elementRef === 'function') {
+        elementRef(el);
+      }
+    };
+  }
+
+  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);
+  }
+
+  componentDidUpdate() {
+    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);
+  }
+
+  render() {
+    var _this$props$styles;
+
+    const _this$props3 = this.props,
+          color = _this$props3.color,
+          elementRef = _this$props3.elementRef,
+          props = (0, _objectWithoutProperties2.default)(_this$props3, _excluded);
+    return (0, _emotion.jsx)("div", Object.assign({}, (0, _passthroughProps.passthroughProps)(props), {
+      ref: this.handleRef,
+      css: (_this$props$styles = this.props.styles) === null || _this$props$styles === void 0 ? void 0 : _this$props$styles.colorIndicator
+    }));
+  }
+
+}, _class2.displayName = "ColorIndicator", _class2.propTypes = _props.propTypes, _class2.allowedProps = _props.allowedProps, _class2.componentId = 'ColorIndicator', _class2.defaultProps = {
+  color: '',
+  shape: 'circle'
+}, _class2)) || _class) || _class);
+exports.ColorIndicator = ColorIndicator;
+var _default = ColorIndicator;
+exports.default = _default;

package/lib/ColorIndicator/props.js

@@ -0,0 +1,42 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.propTypes = exports.allowedProps = void 0;
+
+var _propTypes = _interopRequireDefault(require("prop-types"));
+
+/*
+ * 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 propTypes = {
+  color: _propTypes.default.string,
+  elementRef: _propTypes.default.func,
+  shape: _propTypes.default.oneOf(['circle', 'rectangle'])
+};
+exports.propTypes = propTypes;
+const allowedProps = ['color', 'elementRef', 'shape'];
+exports.allowedProps = allowedProps;

package/lib/ColorIndicator/styles.js

@@ -0,0 +1,78 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+
+var _isValid = require("@instructure/ui-color-utils/lib/isValid.js");
+
+/*
+ * 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 calcBlendedColor = (c1, c2) => {
+  // 0.4 as decided by design
+  const c2Alpha = c2.a * 0.4;
+  const c1Alpha = 1 - c2Alpha;
+  const alpha = 1 - c1Alpha * (1 - c1Alpha);
+  return `rgba(
+      ${c2.r * c2Alpha / alpha + c1.r * c1Alpha * (1 - c2Alpha) / alpha},
+      ${c2.g * c2Alpha / alpha + c1.g * c1Alpha * (1 - c2Alpha) / alpha},
+      ${c2.b * c2Alpha / alpha + c1.b * c1Alpha * (1 - c2Alpha) / alpha},
+      ${c2.a < 0.6 ? 0.6 : c2.a})`;
+};
+/**
+ * ---
+ * 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 = (componentTheme, props) => {
+  const color = props.color,
+        shape = props.shape;
+  return {
+    colorIndicator: {
+      label: 'colorIndicator',
+      width: shape === 'rectangle' ? componentTheme.rectangleIndicatorSize : componentTheme.circleIndicatorSize,
+      height: shape === 'rectangle' ? componentTheme.rectangleIndicatorSize : componentTheme.circleIndicatorSize,
+      borderRadius: shape === 'rectangle' ? componentTheme.rectangularIndicatorBorderRadius : componentTheme.circleIndicatorSize,
+      boxSizing: 'border-box',
+      borderWidth: componentTheme.borderWidth,
+      boxShadow: color ? `inset 0 0 0 1.5rem ${color}` : 'none',
+      borderStyle: 'solid',
+      backgroundImage: componentTheme.backgroundImage,
+      backgroundSize: componentTheme.backgroundSize,
+      backgroundPosition: componentTheme.backgroundPosition,
+      borderColor: calcBlendedColor(colorToRGB(componentTheme.colorIndicatorBorderColor), colorToRGB((0, _isValid.isValid)(color) ? color : '#fff'))
+    }
+  };
+};
+
+var _default = generateStyle;
+exports.default = _default;