WRR-14756: Publish ColorPicker component

ColorPicker/ColorPicker.module.less

@@ -1,93 +1,74 @@
 // ColorPicker.module.less
 //
-@import '../styles/colors.less';
-@import '../styles/mixins.less';
-@import '../styles/variables.less';
-
-.colorPicker {
-	align-items: center;
-	justify-content: space-between;
-
-	.colorsRow {
-		width: 522px;
-		padding-top: 9px;
-	}
+@import "../styles/mixins.less";
+@import "../styles/variables.less";
+
+@keyframes shakeColor {
+	0% { transform: translateX(0) }
+	25% { transform: translateX(3px) }
+	50% { transform: translateX(-3px) }
+	75% { transform: translateX(3px) }
+	100% { transform: translateX(0) }
+}
 
-	.coloredButton {
-		border-radius: 72px;
-		border: 3px solid #ffffff;
-		height: 120px;
-		margin-left: 0;
-		min-width: 120px;
-		padding: 0;
-		transform: none;
+.pickerTabGroup {
+	min-width: @sand-colorpicker-tabgroup-width;
+	padding-bottom: @sand-colorpicker-padding;
+}
 
-		.focus({
-			transform: scale(1.1);
-		});
+.colorPicker {
+	display: flex;
+	height: @sand-colorpicker-height;
+	justify-content: center;
+	padding: @sand-colorpicker-padding;
+}
 
-		.disabled({
-			opacity: @sand-disabled-opacity;
-		})
-	}
+.favoriteColorsRow {
+	text-align: center;
 
-	.coloredDiv,
-	.coloredInput {
-		border-radius: 24px;
-	}
+	.favoriteColor {
+		border-radius: 50%;
+		border: @sand-colorpicker-border-medium solid;
+		transition: transform .2s;
 
-	.coloredDiv {
-		display: block;
-		height: 81px;
-		border: 3px solid #ffffff;
-
-		&.button, &.focusExpand {
-			margin: 24px;
+		.deleteButton {
+			position: absolute;
+			z-index: -2;
 		}
 
 		.focus({
+			box-shadow: 0 0 12px 3px inset;
 			transform: scale(1.1);
 		});
 	}
 
-	.coloredInput {
-		opacity: 0;
-
-		&:hover {
-			cursor: pointer;
-		}
+	.shakeFavoriteColor {
+		animation: shakeColor 0.2s;
+		animation-iteration-count: infinite;
 	}
 }
 
-.colorPopup {
-	height: max-content;
+.selectedColorContainer {
+	justify-content: center;
+	margin-top: @sand-colorpicker-selectedcolor-margin;
 
-	.colorPopupHeader {
-		font-size: 66px;
-		text-transform: capitalize;
-		margin: 0 0 0 15px;
-	}
-
-	.closeButton {
-		&.button, &.focusExpand {
-			margin: 0;
-		}
+	.selectedColor {
+		border-radius: @sand-colorpicker-selectedcolor-border-radius;
+		border: @sand-colorpicker-border-medium solid;
+		height: @sand-colorpicker-selectedcolor-height;
+		margin-inline: 0;
+		transition: transform .2s;
 
-		.icon {
-			font-size: 48px;
+		.selectedColorIcon {
+			transition: transform .2s;
 		}
-	}
-
-	.colorPickerSliders {
-		padding: 45px 0;
 
-		.colorSlider {
-			margin: 0 27px;
-		}
+		.focus({
+			box-shadow: 0 0 12px 6px inset;
 
-		.colorSliderText {
-			font-size: 54px;
-			margin: 0 24px;
-		}
+			.selectedColorIcon {
+				transform: scale(1.2);
+			}
+		});
 	}
 }

ColorPicker/ColorPickerGrid.js

@@ -0,0 +1,116 @@
+/**
+ * Sandstone component to allow the user to choose a color from a grid.
+ *
+ * @example
+ * <ColorPickerGrid
+ * 	 selectedColor="#FF00FF"
+ * 	 selectedColorHandler={setSelectedColor}
+ * />
+ *
+ * @exports ColorPickerGrid
+ * @exports ColorPickerGridBase
+ * @private
+ */
+import Spottable from '@enact/spotlight/Spottable';
+import classnames from 'classnames';
+import PropTypes from 'prop-types';
+import {useCallback} from 'react';
+
+import Skinnable from '../Skinnable';
+
+import {generateOppositeColor, rgbStringToHex} from './utils';
+
+import componentCss from './ColorPickerGrid.module.less';
+
+const SpottableDiv = Spottable('div');
+
+const colors = [
+	['#ffffff', '#00374a', '#004d65', '#016e8f', '#008cb4', '#00a1d8', '#01c7fc', '#52d6fc', '#93e3fd', '#cbf0ff'],
+	['#ebebeb', '#011d57', '#012f7b', '#0042a9', '#0056d6', '#0061fe', '#3a87fe', '#74a7ff', '#a7c6ff', '#d3e2ff'],
+	['#d6d6d6', '#11053b', '#1a0a52', '#2c0977', '#371a94', '#4d22b2', '#5e30eb', '#864ffe', '#b18cfe', '#d9c9fe'],
+	['#c2c2c2', '#2e063d', '#450d59', '#61187c', '#7a219e', '#982abc', '#be38f3', '#d357fe', '#e292fe', '#efcaff'],
+	['#adadad', '#3c071b', '#551029', '#791a3d', '#99244f', '#b92d5d', '#e63b7a', '#ee719e', '#f4a4c0', '#f9d3e0'],
+	['#999999', '#5c0701', '#831100', '#b51a00', '#e22400', '#ff4015', '#ff6250', '#ff8c82', '#ffb5af', '#ffdbd8'],
+	['#858585', '#5a1c00', '#7b2900', '#ad3e00', '#da5100', '#ff6a00', '#ff8648', '#ffa57d', '#ffc5ab', '#ffe2d6'],
+	['#707070', '#583300', '#7a4a00', '#a96800', '#d38301', '#ffab01', '#feb43f', '#ffc777', '#ffd9a8', '#ffecd4'],
+	['#5c5c5c', '#563d00', '#785800', '#a67b01', '#d19d01', '#fdc700', '#fecb3e', '#ffd977', '#fee4a8', '#fff2d5'],
+	['#474747', '#666100', '#8d8602', '#c4bc00', '#f5ec00', '#fefb41', '#fff76b', '#fff994', '#fffbb9', '#fefcdd'],
+	['#333333', '#4f5504', '#6f760a', '#9ba50e', '#c3d117', '#d9ec37', '#e4ef65', '#eaf28f', '#f2f7b7', '#f7fadb'],
+	['#000000', '#263e0f', '#38571a', '#4e7a27', '#669d34', '#76bb40', '#96d35f', '#b1dd8b', '#cde8b5', '#dfeed4']
+];
+
+/**
+ * The color picker base component which sets-up the component's structure.
+ *
+ * This component is most often not used directly but may be composed within another component as it
+ * is within {@link sandstone/ColorPickerGrid|ColorPickerGrid}.
+ *
+ * @class ColorPickerGridBase
+ * @memberof sandstone/ColorPicker
+ * @ui
+ * @private
+ */
+const ColorPickerGridBase = (props) => {
+	const {className, disabled, selectedColorHandler, ...rest} = props;
+
+	const handleClick = useCallback((e) => {
+		if (disabled) return;
+		selectedColorHandler(rgbStringToHex(e.target.style.backgroundColor));
+	}, [disabled, selectedColorHandler]);
+
+	return (
+		<div className={classnames(componentCss.colorPicker, className)} {...rest} >
+			{
+				colors.map((row, rowIndex) => {
+					return (
+						<div key={rowIndex}>
+							{
+								colors[rowIndex].map((color, colorIndex) => {
+									return <SpottableDiv className={componentCss.colorBlock} spotlightDisabled={disabled} onClick={handleClick} style={{backgroundColor: color, '--sand-colorpicker-grid-focus-border-color': generateOppositeColor(color)}} key={colorIndex} />;
+								})
+							}
+						</div>
+					);
+				})
+			}
+		</div>
+	);
+};
+
+ColorPickerGridBase.displayName = 'ColorPickerGridBase';
+
+ColorPickerGridBase.propTypes = {/** @lends sandstone/ColorPicker.ColorPickerGridBase.prototype */
+	/**
+	 * Applies a disabled style and prevents interacting with the component.
+	 *
+	 * @type {Boolean}
+	 * @default false
+	 * @private
+	 */
+	disabled: PropTypes.bool,
+
+	/**
+	 * A function to run when the current color changes.
+	 *
+	 * @type {Function}
+	 * @private
+	 */
+	selectedColorHandler: PropTypes.func
+};
+
+/**
+ * A color picker component, ready to use in Sandstone applications.
+ *
+ * @class ColorPickerGrid
+ * @memberof sandstone/ColorPicker
+ * @extends sandstone/ColorPicker.ColorPickerGridBase
+ * @ui
+ * @private
+ */
+const ColorPickerGrid = Skinnable(ColorPickerGridBase);
+
+export default ColorPickerGrid;
+export {
+	ColorPickerGrid,
+	ColorPickerGridBase
+};

ColorPicker/ColorPickerGrid.module.less

@@ -0,0 +1,20 @@
+// ColorPickerGrid.module.less
+//
+@import "../styles/colors.less";
+@import "../styles/mixins.less";
+@import "../styles/variables.less";
+
+.colorPicker {
+	display: flex;
+
+	.colorBlock {
+		border: @sand-colorpicker-border-large solid @sand-colorpicker-colorblock-border-color;
+		height: @sand-colorpicker-grid-colorblock-size;
+		width: @sand-colorpicker-grid-colorblock-size;
+
+		.focus({
+			border-color: var(--sand-colorpicker-grid-focus-border-color);
+			box-shadow: 0 0 12px 3px inset;
+		})
+	}
+}