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

package/src/ColorContrast/theme.ts

@@ -0,0 +1,62 @@
+/*
+ * 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 type { Theme } from '@instructure/ui-themes'
+import { ColorContrastTheme } from '@instructure/shared-types'
+
+/**
+ * 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: Theme): ColorContrastTheme => {
+  const { colors, typography, spacing, borders } = theme
+
+  const componentVariables = {
+    width: '17rem',
+
+    fontFamily: typography?.fontFamily,
+    fontWeight: typography?.fontWeightNormal,
+    lineHeight: typography?.lineHeight,
+    fontSize: typography?.fontSizeMedium,
+
+    statusWrapperBottomMargin: spacing?.xxSmall,
+    colorIndicatorRightMargin: spacing?.small,
+    colorPreviewBottomMargin: spacing?.small,
+    colorPreviewTopMargin: spacing?.xSmall,
+    labelBottomMargin: spacing?.xxSmall,
+
+    smallBorder: borders.widthSmall,
+
+    successColor: colors.shamrock,
+    failureColor: colors.crimson,
+    pickedHexColor: colors.ash
+  }
+
+  return {
+    ...componentVariables
+  }
+}
+
+export default generateComponentTheme

package/src/ColorIndicator/ColorIndicatorLocator.ts

@@ -0,0 +1,41 @@
+/*
+ * 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 { ColorIndicator } from './index'
+import { colorToRGB } from '@instructure/ui-color-utils'
+
+// @ts-expect-error ts-migrate(2339) FIXME: Property 'selector' does not exist on type 'typeof... Remove this comment to see the full error message
+export const ColorIndicatorLocator = locator(ColorIndicator.selector, {
+  getColorRGBA: (element: HTMLDivElement) => {
+    const { boxShadow } = getComputedStyle(element)
+
+    if (boxShadow === 'none') {
+      return boxShadow
+    }
+
+    const shadowColor = /rgba?\(\d+,\s\d+,\s\d+(,\s.+)?\)/.exec(boxShadow)![0]
+    return colorToRGB(shadowColor)
+  }
+})

package/src/ColorIndicator/README.md

@@ -0,0 +1,76 @@
+---
+describes: ColorIndicator
+---
+
+A component displaying a circle with checkerboard background capable of displaying colors
+
+### Color Indicator
+
+```js
+---
+example: true
+---
+<div style={{display:'flex', background:'white'}}>
+  <View margin='small'>
+    <ColorIndicator color=''/>
+  </View>
+  <View margin='small'>
+    <ColorIndicator color='#ff0000'/>
+  </View>
+  <View margin='small'>
+    <ColorIndicator color='#ff000088'/>
+  </View>
+  <View margin='small'>
+    <ColorIndicator color='#ff000000'/>
+  </View>
+  <View margin='small'>
+    <ColorIndicator color='yellow'/>
+  </View>
+  <View margin='small'>
+    <ColorIndicator color='rgb(155,55,82)'/>
+  </View>
+  <View margin='small'>
+    <ColorIndicator color='rgba(155,55,82,.5)'/>
+  </View>
+  <View margin='small'>
+    <ColorIndicator color='hsl(30, 100%, 50%)'/>
+  </View>
+  <View margin='small'>
+    <ColorIndicator color='hsla(30, 100%, 50%, .3)'/>
+  </View>
+  <View margin='small'>
+    <ColorIndicator color='hwb(1.5708rad 60% 0%)'/>
+  </View>
+</div>
+
+
+```
+
+### Shapes
+
+`ColorIndicator` can have a `shape` prop. It is either a `circle` which is the default, or a `rectangle`
+
+```js
+---
+example: true
+---
+<div style={{display:'flex', background:'white'}}>
+  <View margin='small'>
+    <ColorIndicator color='#ff0000'/>
+  </View>
+  <View margin='small'>
+    <ColorIndicator color='#ff0000' shape='rectangle'/>
+  </View>
+</div>
+```
+
+### Color Button Pattern
+
+```js
+---
+example: true
+---
+<IconButton screenReaderLabel="ColorIndicator button">
+  <ColorIndicator color='#ff0000'/>
+</IconButton>
+```

package/src/ColorIndicator/index.tsx

@@ -0,0 +1,89 @@
+/*
+ * 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 { testable } from '@instructure/ui-testable'
+import { passthroughProps } from '@instructure/ui-react-utils'
+import { withStyle, jsx } from '@instructure/emotion'
+
+import generateStyle from './styles'
+import generateComponentTheme from './theme'
+
+import type { ColorIndicatorProps } from './props'
+import { propTypes, allowedProps } from './props'
+
+/**
+---
+category: components
+---
+@tsProps
+**/
+@withStyle(generateStyle, generateComponentTheme)
+@testable()
+class ColorIndicator extends Component<ColorIndicatorProps> {
+  static propTypes = propTypes
+  static allowedProps = allowedProps
+  static readonly componentId = 'ColorIndicator'
+
+  static defaultProps = {
+    color: '',
+    shape: 'circle'
+  }
+
+  ref: HTMLDivElement | null = null
+
+  componentDidMount() {
+    this.props.makeStyles?.()
+  }
+
+  componentDidUpdate() {
+    this.props.makeStyles?.()
+  }
+
+  handleRef = (el: HTMLDivElement | null) => {
+    const { elementRef } = this.props
+
+    this.ref = el
+
+    if (typeof elementRef === 'function') {
+      elementRef(el)
+    }
+  }
+
+  render() {
+    const { color, elementRef, ...props } = this.props
+    return (
+      <div
+        {...passthroughProps(props)}
+        ref={this.handleRef}
+        css={this.props.styles?.colorIndicator}
+      />
+    )
+  }
+}
+
+export default ColorIndicator
+export { ColorIndicator }

package/src/ColorIndicator/props.ts

@@ -0,0 +1,68 @@
+/*
+ * 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'
+
+import type { WithStyleProps, ComponentStyle } from '@instructure/emotion'
+import type {
+  OtherHTMLAttributes,
+  PropValidators,
+  ColorIndicatorTheme
+} from '@instructure/shared-types'
+
+type ColorIndicatorOwnProps = {
+  /**
+   * Valid CSS color string. E.g.: #555, rgba(55,55,55,1). It can accept empty strings
+   */
+  color?: string
+  /**
+   * Provides a reference to the `ColorIndicator`'s underlying html element.
+   */
+  elementRef?: (element: Element | null) => void
+  /**
+   * Sets the shape of the indicator. Either a circle or a rectangle
+   */
+  shape?: 'circle' | 'rectangle'
+}
+
+type PropKeys = keyof ColorIndicatorOwnProps
+
+type AllowedPropKeys = Readonly<Array<PropKeys>>
+
+type ColorIndicatorProps = ColorIndicatorOwnProps &
+  WithStyleProps<ColorIndicatorTheme, ColorIndicatorStyle> &
+  OtherHTMLAttributes<ColorIndicatorOwnProps>
+
+type ColorIndicatorStyle = ComponentStyle<'colorIndicator'>
+
+const propTypes: PropValidators<PropKeys> = {
+  color: PropTypes.string,
+  elementRef: PropTypes.func,
+  shape: PropTypes.oneOf(['circle', 'rectangle'])
+}
+
+const allowedProps: AllowedPropKeys = ['color', 'elementRef', 'shape']
+
+export type { ColorIndicatorProps, ColorIndicatorStyle }
+export { propTypes, allowedProps }

package/src/ColorIndicator/styles.ts

@@ -0,0 +1,88 @@
+/*
+ * 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 type { ColorIndicatorProps, ColorIndicatorStyle } from './props'
+import { ColorIndicatorTheme } from '@instructure/shared-types'
+import type { RGBAType } from '@instructure/ui-color-utils'
+import { colorToRGB, isValid } from '@instructure/ui-color-utils'
+
+const calcBlendedColor = (c1: RGBAType, c2: RGBAType) => {
+  // 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: ColorIndicatorTheme,
+  props: ColorIndicatorProps
+): ColorIndicatorStyle => {
+  const { color, shape } = props
+
+  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(isValid(color!) ? color! : '#fff')
+      )
+    }
+  }
+}
+
+export default generateStyle

package/src/ColorIndicator/theme.ts

@@ -0,0 +1,58 @@
+/*
+ * 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 type { Theme } from '@instructure/ui-themes'
+import { ColorIndicatorTheme } from '@instructure/shared-types'
+
+export const colorIndicatorBorderColor = '#384A5899'
+
+/**
+ * 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: Theme): ColorIndicatorTheme => {
+  const { colors, borders, spacing } = theme
+
+  const componentVariables = {
+    borderWidth: borders?.widthSmall,
+    backgroundImage: `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%)`,
+    backgroundSize: '.5rem .5rem',
+    backgroundPosition: '0 0, 0 .25rem, .25rem -0.25rem, -0.25rem 0px',
+    circleIndicatorSize: '1.5rem',
+    rectangleIndicatorSize: '2.375rem',
+    colorIndicatorBorderColor,
+    rectangularIndicatorBorderRadius: spacing?.xxSmall,
+    rectangularIndicatorBorderWidth: borders?.widthSmall
+  }
+
+  return {
+    ...componentVariables
+  }
+}
+
+export default generateComponentTheme

package/src/ColorMixer/ColorMixerLocator.ts

@@ -0,0 +1,29 @@
+/*
+ * 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 { ColorMixer } from './index'
+
+// @ts-expect-error ts-migrate(2339) FIXME: Property 'selector' does not exist on type 'typeof... Remove this comment to see the full error message
+export const ColorMixerLocator = locator(ColorMixer.selector)