Extract ColorPaletteControl, TextWithColorIndicators and a ColorIndic…

…ator that has color context from PanelColorSettings
WordPress · Jul 17, 2018 · 4d8c4a6 · 4d8c4a6
1 parent 4b9dfee
commit 4d8c4a6
Show file tree

Hide file tree

Showing 7 changed files with 125 additions and 71 deletions.
diff --git a/editor/components/color-indicator/index.js b/editor/components/color-indicator/index.js
@@ -0,0 +1,28 @@
+/**
+ * WordPress dependencies
+ */
+import {
+	ColorIndicator,
+} from '@wordpress/components';
+import { sprintf } from '@wordpress/i18n';
+
+/**
+ * Internal dependencies
+ */
+import withColorContext from '../color-palette/with-color-context';
+import { getColorName } from '../colors';
+
+export default withColorContext( ( { colors, colorValue, ariaLabel } ) => {
+	if ( ! colorValue ) {
+		return null;
+	}
+
+	const colorName = getColorName( colors, colorValue );
+
+	return (
+		<ColorIndicator
+			colorValue={ colorValue }
+			ariaLabel={ sprintf( ariaLabel, colorName || colorValue ) }
+		/>
+	);
+} );
diff --git a/editor/components/color-palette/control.js b/editor/components/color-palette/control.js
@@ -0,0 +1,39 @@
+/**
+ * External dependencies
+ */
+import { pick } from 'lodash';
+
+/**
+ * WordPress dependencies
+ */
+import { BaseControl } from '@wordpress/components';
+
+/**
+ * Internal dependencies
+ */
+import './control.scss';
+import ColorPalette from './';
+import TextWithColorIndicators from '../text-with-color-indicators';
+
+const ColorPaletteControl = ( { label, ...props } ) => {
+	const labelElement = (
+		<TextWithColorIndicators
+			colorSettings={ pick( props, [ 'value', 'colorIndicatorAriaLabel' ] ) }
+		>
+			{ label }
+		</TextWithColorIndicators>
+	);
+
+	return (
+		<BaseControl
+			className="editor-color-palette-control"
+			label={ labelElement }>
+			<ColorPalette
+				className="editor-color-palette-control__color-palette"
+				{ ...pick( props, [ 'value', 'onChange' ] ) }
+			/>
+		</BaseControl>
+	);
+};
+
+export default ColorPaletteControl;
diff --git a/editor/components/color-palette/control.scss b/editor/components/color-palette/control.scss
@@ -0,0 +1,4 @@
+.editor-color-palette-control__color-palette {
+	margin-top: .6rem;
+	margin-bottom: 1.4rem;
+}
diff --git a/editor/components/panel-color-settings/index.js b/editor/components/panel-color-settings/index.js
@@ -1,74 +1,29 @@
-/**
- * External dependencies
- */
-import { pick } from 'lodash';
-
 /**
  * WordPress dependencies
  */
 import {
 	PanelBody,
-	BaseControl,
-	ColorIndicator,
 } from '@wordpress/components';
-import { Fragment } from '@wordpress/element';
 import { ifCondition, compose } from '@wordpress/compose';
-import { sprintf } from '@wordpress/i18n';
 
 /**
  * Internal dependencies
  */
 import './style.scss';
-import ColorPalette from '../color-palette';
+import ColorPaletteControl from '../color-palette/control';
+import TextWithColorIndicators from '../text-with-color-indicators';
 import withColorContext from '../color-palette/with-color-context';
-import { getColorName } from '../colors';
-
-const ColorIndicatorWithColorContext = withColorContext( ( { value, colorIndicatorAriaLabel, colors } ) => {
-	if ( ! value ) {
-		return null;
-	}
-
-	const colorName = getColorName( colors, value );
-
-	return (
-		<ColorIndicator
-			colorValue={ value }
-			ariaLabel={ sprintf( colorIndicatorAriaLabel, colorName || value ) }
-		/>
-	);
-} );
-
-const ColorPaletteControl = ( { label, ...settings } ) => {
-	const labelElement = (
-		<Fragment>
-			{ label }
-			{ <ColorIndicatorWithColorContext { ...settings } /> }
-		</Fragment>
-	);
-
-	return (
-		<BaseControl
-			label={ labelElement } >
-			<ColorPalette
-				className="editor-panel-color-settings__color-palette"
-				{ ...pick( settings, [ 'value', 'onChange' ] ) }
-			/>
-		</BaseControl>
-	);
-};
 
 export function PanelColorSettings( { title, colorSettings, children } ) {
 	const className = 'editor-panel-color-settings';
 
 	const titleElement = (
-		<span className={ `${ className }__panel-title` }>
+		<TextWithColorIndicators
+			className={ `${ className }__panel-title` }
+			colorSettings={ colorSettings }
+		>
 			{ title }
-			{ colorSettings.map(
-				( settings, index ) => (
-					<ColorIndicatorWithColorContext key={ index } { ...settings } />
-				)
-			) }
-		</span>
+		</TextWithColorIndicators>
 	);
 
 	return (

diff --git a/editor/components/panel-color-settings/style.scss b/editor/components/panel-color-settings/style.scss
@@ -10,9 +10,4 @@
 	&.is-opened &__panel-title .component-color-indicator {
 		display: none;
 	}
-
-	&__color-palette {
-		margin-top: .6rem;
-		margin-bottom: 1.4rem;
-	}
 }
diff --git a/editor/components/panel-color-settings/test/__snapshots__/index.js.snap b/editor/components/panel-color-settings/test/__snapshots__/index.js.snap
@@ -4,23 +4,27 @@ exports[`PanelColorSettings matches the snapshot 1`] = `
 <PanelBody
   className="editor-panel-color-settings"
   title={
-    <span
+    <TextWithColorIndicators
       className="editor-panel-color-settings__panel-title"
+      colorSettings={
+        Array [
+          Object {
+            "colorIndicatorAriaLabel": "black",
+            "label": "black color",
+            "onChange": [Function],
+            "value": "#000",
+          },
+          Object {
+            "colorIndicatorAriaLabel": "nearly black",
+            "label": "nearly black color",
+            "onChange": [Function],
+            "value": "#111",
+          },
+        ]
+      }
     >
       Test Title
-      <WithColorContext(Component)
-        colorIndicatorAriaLabel="black"
-        label="black color"
-        onChange={[Function]}
-        value="#000"
-      />
-      <WithColorContext(Component)
-        colorIndicatorAriaLabel="nearly black"
-        label="nearly black color"
-        onChange={[Function]}
-        value="#111"
-      />
-    </span>
+    </TextWithColorIndicators>
   }
 >
   <ColorPaletteControl

diff --git a/editor/components/text-with-color-indicators/index.js b/editor/components/text-with-color-indicators/index.js
@@ -0,0 +1,29 @@
+/**
+ * External dependencies
+ */
+import { isArray } from 'lodash';
+
+/**
+ * Internal dependencies
+ */
+import ColorIndicator from '../color-indicator';
+
+const mapColorIndicator = ( settings, index ) => (
+	<ColorIndicator
+		key={ index }
+		colorValue={ settings.value }
+		ariaLabel={ settings.colorIndicatorAriaLabel }
+	/>
+);
+
+const TextWithColorIndicators = ( { className, colorSettings, children } ) => (
+	<span className={ className }>
+		{ children }
+		{ !! colorSettings && isArray( colorSettings ) ?
+			colorSettings.map( mapColorIndicator ) :
+			mapColorIndicator( colorSettings )
+		}
+	</span>
+);
+
+export default TextWithColorIndicators;