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

package/package.json

@@ -0,0 +1,62 @@
+{
+  "name": "@instructure/ui-color-picker",
+  "version": "8.25.1-snapshot-20",
+  "description": "A UI component library made by Instructure Inc.",
+  "author": "Instructure, Inc. Engineering and Product Design",
+  "module": "./es/index.js",
+  "main": "./lib/index.js",
+  "types": "./types/index.d.ts",
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/instructure/instructure-ui.git"
+  },
+  "homepage": "https://instructure.github.io/instructure-ui/",
+  "bugs": "https://github.com/instructure/instructure-ui/issues",
+  "scripts": {
+    "lint": "run -T ui-test --lint",
+    "lint:fix": "run -T ui-test --lint --fix",
+    "clean": "run -T ui-build --clean",
+    "build": "run -T ui-build --modules es,cjs",
+    "build:watch": "run -T ui-build --watch",
+    "build:types": "run -T tsc -p tsconfig.build.json",
+    "ts:check": "run -T tsc -p tsconfig.build.json --noEmit --emitDeclarationOnly false"
+  },
+  "license": "MIT",
+  "dependencies": {
+    "@babel/runtime": "^7.13.10",
+    "@instructure/console": "8.25.1-snapshot-20",
+    "@instructure/emotion": "8.25.1-snapshot-20",
+    "@instructure/shared-types": "8.25.1-snapshot-20",
+    "@instructure/ui-a11y-content": "8.25.1-snapshot-20",
+    "@instructure/ui-buttons": "8.25.1-snapshot-20",
+    "@instructure/ui-color-utils": "8.25.1-snapshot-20",
+    "@instructure/ui-dom-utils": "8.25.1-snapshot-20",
+    "@instructure/ui-drilldown": "8.25.1-snapshot-20",
+    "@instructure/ui-form-field": "8.25.1-snapshot-20",
+    "@instructure/ui-icons": "8.25.1-snapshot-20",
+    "@instructure/ui-pill": "8.25.1-snapshot-20",
+    "@instructure/ui-popover": "8.25.1-snapshot-20",
+    "@instructure/ui-react-utils": "8.25.1-snapshot-20",
+    "@instructure/ui-testable": "8.25.1-snapshot-20",
+    "@instructure/ui-text": "8.25.1-snapshot-20",
+    "@instructure/ui-text-input": "8.25.1-snapshot-20",
+    "@instructure/ui-themes": "8.25.1-snapshot-20",
+    "@instructure/ui-tooltip": "8.25.1-snapshot-20",
+    "@instructure/ui-utils": "8.25.1-snapshot-20",
+    "@instructure/ui-view": "8.25.1-snapshot-20",
+    "prop-types": "^15"
+  },
+  "devDependencies": {
+    "@instructure/ui-babel-preset": "8.25.1-snapshot-20",
+    "@instructure/ui-test-locator": "8.25.1-snapshot-20",
+    "@instructure/ui-test-queries": "8.25.1-snapshot-20",
+    "@instructure/ui-test-utils": "8.25.1-snapshot-20"
+  },
+  "peerDependencies": {
+    "react": ">=16.8 <=17"
+  },
+  "publishConfig": {
+    "access": "public"
+  },
+  "sideEffects": false
+}

package/src/ColorContrast/ColorContrastLocator.ts

@@ -0,0 +1,51 @@
+/*
+ * 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 } from '@instructure/ui-test-queries'
+
+/* eslint-disable no-restricted-imports */
+// @ts-expect-error bypass no type definition found error
+import { PillLocator } from '@instructure/ui-pill/es/Pill/PillLocator'
+/* eslint-enable no-restricted-imports */
+
+import { ColorContrast } 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 ColorContrastLocator = locator(ColorContrast.selector, {
+  findPreview: (...args: any[]) => {
+    return find('[class$=-colorContrast__colorPreview]', ...args)
+  },
+  findNormalTextCheckPill: async () => {
+    const pills = await PillLocator.findAll()
+    return pills[0]
+  },
+  findLargeTextCheckPill: async () => {
+    const pills = await PillLocator.findAll()
+    return pills[1]
+  },
+  findGraphicsCheckPill: async () => {
+    const pills = await PillLocator.findAll()
+    return pills[2]
+  }
+})

package/src/ColorContrast/README.md

@@ -0,0 +1,111 @@
+---
+describes: ColorContrast
+---
+
+A component for displaying color contrast between two colors. It will perform checks according to the [WCAG 2.1 standard](https://webaim.org/articles/contrast/#ratio), determinig if a given contrast ratio is acceptable for `normal`, `large` or `graphics` texts. `normal` needs to be `4.5`, the other two `3`.
+
+### Color Contrast
+
+```js
+---
+render: false
+example: true
+---
+class Example extends React.Component {
+  render() {
+    return (
+      <ColorContrast
+        firstColor="#FF0000"
+        secondColor="#FFFF00"
+        label="Color Contrast Ratio"
+        successLabel="PASS"
+        failureLabel="FAIL"
+        normalTextLabel="Normal text"
+        largeTextLabel="Large text"
+        graphicsTextLabel="Graphics text"
+        firstColorLabel="Background"
+        secondColorLabel="Foreground"
+      />
+    );
+  }
+}
+
+render(<Example />);
+```
+
+### In-line Color setting
+
+```js
+---
+render: false
+example: true
+---
+class Example extends React.Component {
+  constructor(props) {
+    super(props);
+    this.state = {
+      selectedForeGround: "#0CBF94",
+      selectedBackGround: "#35423A",
+    };
+  }
+
+  render() {
+    return (
+      <div>
+        <ColorPreset
+          label="Background"
+          colors={[
+            "#ffffff",
+            "#0CBF94",
+            "#0C89BF",
+            "#BF0C6D",
+            "#BF8D0C",
+            "#ff0000",
+            "#576A66",
+            "#35423A",
+            "#35423F",
+          ]}
+          selected={this.state.selectedBackGround}
+          onSelect={(selectedBackGround) =>
+            this.setState({ selectedBackGround })
+          }
+        />
+        <ColorPreset
+          label="Foreground"
+          colors={[
+            "#ffffff",
+            "#0CBF94",
+            "#0C89BF",
+            "#BF0C6D",
+            "#BF8D0C",
+            "#ff0000",
+            "#576A66",
+            "#35423A",
+            "#35423F",
+          ]}
+          selected={this.state.selectedForeGround}
+          onSelect={(selectedForeGround) =>
+            this.setState({ selectedForeGround })
+          }
+        />
+        <hr style={{ width: "272px", marginLeft: 0 }} />
+        <ColorContrast
+          withoutColorPreview
+          firstColor={this.state.selectedBackGround}
+          secondColor={this.state.selectedForeGround}
+          label="Contrast Ratio"
+          successLabel="PASS"
+          failureLabel="FAIL"
+          normalTextLabel="Normal text"
+          largeTextLabel="Large text"
+          graphicsTextLabel="Graphics text"
+        />
+      </div>
+    );
+  }
+}
+
+render(<Example />);
+
+
+```

package/src/ColorContrast/index.tsx

@@ -0,0 +1,189 @@
+/*
+ * 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 */
+/** @jsxFrag React.Fragment */
+import React, { Component } from 'react'
+
+import { passthroughProps } from '@instructure/ui-react-utils'
+import { testable } from '@instructure/ui-testable'
+import { withStyle, jsx } from '@instructure/emotion'
+import { Text } from '@instructure/ui-text'
+import ColorIndicator from '../ColorIndicator'
+
+import type { ColorContrastProps } from './props'
+import { propTypes, allowedProps } from './props'
+import generateStyle from './styles'
+import generateComponentTheme from './theme'
+import {
+  contrast as getContrast,
+  colorToRGB,
+  colorToHex8
+} from '@instructure/ui-color-utils'
+import { Pill } from '@instructure/ui-pill'
+
+import type { RGBAType } from '../ColorMixer/props'
+
+/**
+---
+category: components
+---
+@tsProps
+**/
+@withStyle(generateStyle, generateComponentTheme)
+@testable()
+class ColorContrast extends Component<ColorContrastProps> {
+  static propTypes = propTypes
+  static allowedProps = allowedProps
+  static readonly componentId = 'ColorContrast'
+
+  constructor(props: ColorContrastProps) {
+    super(props)
+  }
+
+  ref: HTMLDivElement | null = null
+
+  handleRef = (el: HTMLDivElement | null) => {
+    const { elementRef } = this.props
+
+    this.ref = el
+
+    if (typeof elementRef === 'function') {
+      elementRef(el)
+    }
+  }
+
+  componentDidMount() {
+    this.props.makeStyles?.()
+  }
+
+  componentDidUpdate() {
+    this.props.makeStyles?.()
+  }
+
+  renderStatus = (pass: boolean, description: string) => {
+    const { successLabel, failureLabel, styles } = this.props
+    return (
+      <div css={styles?.statusWrapper}>
+        <div
+          css={pass ? styles?.successDescription : styles?.failureDescription}
+        >
+          {description}
+        </div>
+        <div css={styles?.statusIndicatorWrapper}>
+          <Pill color={pass ? 'success' : 'danger'}>
+            {pass ? successLabel : failureLabel}
+          </Pill>
+        </div>
+      </div>
+    )
+  }
+
+  renderColorIndicator = (color: string, label: string) => (
+    <>
+      <div>
+        <div css={this.props.styles?.colorIndicator}>
+          <ColorIndicator color={color} />
+        </div>
+      </div>
+
+      <div>
+        <div css={this.props.styles?.colorIndicatorLabel}>{label}</div>
+        <div css={this.props.styles?.pickedColorHex}>{color}</div>
+      </div>
+    </>
+  )
+  calcBlendedColor = (c1: RGBAType, c2: RGBAType) => {
+    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
+    }
+  }
+
+  //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 getContrast(colorToHex8(c1OnWhite), colorToHex8(c2OnC1OnWhite), 2)
+  }
+  render() {
+    const {
+      styles,
+      elementRef,
+      failureLabel,
+      successLabel,
+      withoutColorPreview,
+      firstColor,
+      secondColor,
+      label,
+      firstColorLabel,
+      secondColorLabel,
+      normalTextLabel,
+      largeTextLabel,
+      graphicsTextLabel,
+      ...props
+    } = this.props
+    const contrast = this.calcContrast
+    return (
+      <div
+        {...passthroughProps(props)}
+        ref={this.handleRef}
+        css={styles?.colorContrast}
+      >
+        <div css={this.props.styles?.label}>
+          <Text weight="bold" as="div">
+            {label}
+          </Text>
+        </div>
+        <Text size="x-large">{contrast}:1</Text>
+        {!withoutColorPreview && (
+          <div css={this.props.styles?.colorPreview}>
+            <div css={this.props.styles?.firstColorPreview}>
+              {this.renderColorIndicator(firstColor, firstColorLabel || '')}
+            </div>
+            <div css={this.props.styles?.secondColorPreview}>
+              {this.renderColorIndicator(secondColor, secondColorLabel || '')}
+            </div>
+          </div>
+        )}
+        {this.renderStatus(contrast >= 4.5, normalTextLabel)}
+        {this.renderStatus(contrast >= 3, largeTextLabel)}
+        {this.renderStatus(contrast >= 3, graphicsTextLabel)}
+      </div>
+    )
+  }
+}
+
+export { ColorContrast }
+export default ColorContrast

package/src/ColorContrast/props.ts

@@ -0,0 +1,140 @@
+/*
+ * 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,
+  ColorContrastTheme
+} from '@instructure/shared-types'
+
+type ColorContrastOwnProps = {
+  /**
+   * Provides a reference to the component's underlying html element.
+   */
+  elementRef?: (element: Element | null) => void
+  /**
+   * Text of the failure indicator (Suggested english text: FAIL)
+   */
+  failureLabel: string
+  /**
+   * The first color to compare (HEX code)
+   */
+  firstColor: string
+  /**
+   * The name of the first color which will be compared
+   */
+  firstColorLabel?: string
+  /**
+   * Text of the third check (Suggested english text: Graphics text)
+   */
+  graphicsTextLabel: string
+  /**
+   * Label of the component
+   */
+  label: string
+  /**
+   * Text of the second check (Suggested english text: Large text)
+   */
+  largeTextLabel: string
+  /**
+   * Text of the first check (Suggested english text: Normal text)
+   */
+  normalTextLabel: string
+  /**
+   * The second color to compare (HEX code)
+   */
+  secondColor: string
+  /**
+   * The name of the second color which will be compared
+   */
+  secondColorLabel?: string
+  /**
+   * Text of the success indicator (Suggested english text: PASS)
+   */
+  successLabel: string
+  /**
+   * toggles the color preview part of the component
+   * if true, firstColorLabel and secondColorLabel is not necessary. Otherwise required
+   */
+  withoutColorPreview?: boolean
+}
+
+type PropKeys = keyof ColorContrastOwnProps
+
+type AllowedPropKeys = Readonly<Array<PropKeys>>
+
+type ColorContrastProps = ColorContrastOwnProps &
+  WithStyleProps<ColorContrastTheme, ColorContrastStyle> &
+  OtherHTMLAttributes<ColorContrastOwnProps>
+
+type ColorContrastStyle = ComponentStyle<
+  | 'colorContrast'
+  | 'successDescription'
+  | 'failureDescription'
+  | 'statusWrapper'
+  | 'colorIndicator'
+  | 'statusIndicatorWrapper'
+  | 'colorIndicatorLabel'
+  | 'pickedColorHex'
+  | 'colorPreview'
+  | 'firstColorPreview'
+  | 'secondColorPreview'
+  | 'label'
+>
+
+const propTypes: PropValidators<PropKeys> = {
+  elementRef: PropTypes.func,
+  failureLabel: PropTypes.string.isRequired,
+  firstColor: PropTypes.string.isRequired,
+  firstColorLabel: PropTypes.string,
+  graphicsTextLabel: PropTypes.string.isRequired,
+  withoutColorPreview: PropTypes.bool,
+  label: PropTypes.string.isRequired,
+  largeTextLabel: PropTypes.string.isRequired,
+  normalTextLabel: PropTypes.string.isRequired,
+  secondColor: PropTypes.string.isRequired,
+  secondColorLabel: PropTypes.string,
+  successLabel: PropTypes.string.isRequired
+}
+
+const allowedProps: AllowedPropKeys = [
+  'elementRef',
+  'failureLabel',
+  'firstColor',
+  'firstColorLabel',
+  'graphicsTextLabel',
+  'withoutColorPreview',
+  'label',
+  'largeTextLabel',
+  'normalTextLabel',
+  'secondColor',
+  'secondColorLabel',
+  'successLabel'
+]
+
+export type { ColorContrastProps, ColorContrastStyle }
+export { propTypes, allowedProps }

package/src/ColorContrast/styles.ts

@@ -0,0 +1,102 @@
+/*
+ * 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 { ColorContrastTheme } from '@instructure/shared-types'
+/**
+ * ---
+ * 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: ColorContrastTheme) => {
+  const statusDescriptionStyle = (pass: boolean) => ({
+    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
+    }
+  }
+}
+
+export default generateStyle