few more changes and stories

assets/src/edit-story/components/colorPicker/index.js

@@ -21,7 +21,6 @@ import PropTypes from 'prop-types';
 import styled from 'styled-components';
 import { CustomPicker } from 'react-color';
 import { Saturation, Hue, Alpha } from 'react-color/lib/components/common';
-import { toState } from 'react-color/lib/helpers';
 
 /**
  * WordPress dependencies
@@ -33,7 +32,7 @@ import { __ } from '@wordpress/i18n';
  * Internal dependencies
  */
 import { Close, Eyedropper } from '../button';
-import Pointer, { PointerWithoutOffset } from './pointer';
+import { Pointer, PointerWithOffset } from './pointer';
 import EditableHexPreview from './editableHexPreview';
 
 const Container = styled.div`
@@ -48,6 +47,7 @@ const Container = styled.div`
 `;
 
 const Header = styled.div`
+	height: 53px;
 	padding: 16px;
 	border-bottom: 1px solid rgba(229, 229, 229, 0.2);
 	position: relative;
@@ -158,19 +158,19 @@ const CurrentAlphaWrapper = styled.div`
 	bottom: 15px;
 `;
 
-function ColorPicker( { rgb, hsl, hsv, hex, onChange, onClose, gradients } ) {
+function ColorPicker( { rgb, hsl, hsv, hex, onChange, onClose, withGradients } ) {
 	const controlsProps = { rgb, hsl, hsv, hex, onChange };
 	const { a: alpha } = rgb;
 
 	const [ currentMode, setCurrentMode ] = useState( 'solid' );
 
-	const displayHeader = gradients || onClose;
+	const displayHeader = withGradients || onClose;
 
 	return (
 		<Container>
 			{ displayHeader && (
 				<Header>
-					{ gradients && (
+					{ withGradients && (
 						<ModesList>
 							{ [ 'solid', 'linear', 'radial' ].map( ( mode ) => {
 								const value = mode === currentMode ? hex : null;
@@ -199,7 +199,7 @@ function ColorPicker( { rgb, hsl, hsv, hex, onChange, onClose, gradients } ) {
 				<SaturationWrapper>
 					<Saturation
 						radius="6px"
-						pointer={ Pointer }
+						pointer={ PointerWithOffset }
 						{ ...controlsProps }
 					/>
 				</SaturationWrapper>
@@ -209,7 +209,7 @@ function ColorPicker( { rgb, hsl, hsv, hex, onChange, onClose, gradients } ) {
 						width="12px"
 						height="140px"
 						radius="6px"
-						pointer={ PointerWithoutOffset }
+						pointer={ Pointer }
 						{ ...controlsProps }
 					/>
 				</HueWrapper>
@@ -219,7 +219,7 @@ function ColorPicker( { rgb, hsl, hsv, hex, onChange, onClose, gradients } ) {
 						width="12px"
 						height="140px"
 						radius="6px"
-						pointer={ PointerWithoutOffset }
+						pointer={ Pointer }
 						{ ...controlsProps }
 					/>
 				</AlphaWrapper>
@@ -248,13 +248,16 @@ function ColorPicker( { rgb, hsl, hsv, hex, onChange, onClose, gradients } ) {
 
 ColorPicker.propTypes = {
 	onChange: PropTypes.func.isRequired,
-	gradients: PropTypes.bool,
 	onClose: PropTypes.func,
+	withGradients: PropTypes.bool,
 	rgb: PropTypes.object,
+	hex: PropTypes.object,
+	hsl: PropTypes.object,
+	hsv: PropTypes.object,
 };
 
 ColorPicker.defaultProps = {
-	gradients: true,
+	withGradients: true,
 };
 
 export default CustomPicker( ColorPicker );

assets/src/edit-story/components/colorPicker/pointer.js

@@ -19,23 +19,19 @@
  */
 import styled from 'styled-components';
 
-const Circle = styled.div`
+const Pointer = styled.div`
 	width: 12px;
 	height: 12px;
 	background: radial-gradient(circle at center 6px, transparent, transparent 4px, #fff 4px);
 	filter: drop-shadow(0 0 1px rgba(0, 0, 0, 0.38));
 	border-radius: 100%;
 `;
 
-const CircleWithOffset = styled( Circle )`
+const PointerWithOffset = styled( Pointer )`
 	transform: translate(-6px, -6px);
 `;
 
-export default function Pointer() {
-	return <CircleWithOffset />;
-}
-
-export function PointerWithoutOffset() {
-	return <Circle />;
-}
-
+export {
+	Pointer,
+	PointerWithOffset,
+};

assets/src/edit-story/components/panels/stories/color.js

@@ -0,0 +1,41 @@
+/*
+ * Copyright 2020 Google LLC
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     https://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+/**
+ * External dependencies
+ */
+import { text } from '@storybook/addon-knobs';
+
+/**
+ * Internal dependencies
+ */
+import ColorPanel from '../color';
+
+export default {
+	title: 'Panels/Color',
+	component: ColorPanel,
+};
+
+export const _default = () => {
+	const color = text( 'Initial Color', '#4891fc' );
+
+	return (
+		<ColorPanel
+			onSetProperties={ () => {} }
+			selectedElements={ [ { color } ] }
+		/>
+	);
+};