Merge pull request #14 from woocommerce/add/6-make-color-editable

Make color editable

block.json

@@ -7,7 +7,10 @@
 	"category": "woocommerce",
 	"parent": [ "woocommerce/cart-totals-block" ],
 	"supports": {
-		"html": false
+		"html": false,
+		"color": {
+			"__experimentalSkipSerialization": true
+		}
 	},
 	"attributes": {
 		"currentTotal": {

package.json

@@ -18,8 +18,8 @@
 		"lint:css": "wp-scripts lint-style",
 		"lint:js": "wp-scripts lint-js",
 		"start": "wp-scripts start",
-		"test": "wp-scripts test-unit-js",
-		"test:coverage": "wp-scripts test-unit-js --coverage",
+		"test": "wp-scripts test-unit-js --verbose",
+		"test:coverage": "wp-scripts test-unit-js --coverage --verbose",
 		"test:help": "wp-scripts test-unit-js --help",
 		"test:watch": "wp-scripts test-unit-js --watchAll",
 		"phpcbf": "composer run phpcbf",
@@ -32,7 +32,10 @@
 	"dependencies": {
 		"@wordpress/block-editor": "^8.0.0",
 		"@wordpress/blocks": "^11.1.0",
+		"autoprefixer": "10.4.2",
+		"classnames": "^2.3.1",
 		"eslint": "^7.32.0",
+		"lodash.kebabcase": "^4.1.1",
 		"prettier": "npm:[email protected]"
 	},
 	"devDependencies": {

src/block.js

@@ -6,9 +6,9 @@ import ProgressBar from './components/progress-bar';
 
 export default function Block( attributes ) {
 	return (
-		<>
+		<div className="wc-free-shipping-progress-bar">
 			<ProgressLabel { ...attributes } />
 			<ProgressBar { ...attributes } />
-		</>
+		</div>
 	);
 }

src/components/progress-bar/__test__/index.test.js

@@ -7,39 +7,53 @@ import '@testing-library/jest-dom';
 /**
  * Internal dependencies
  */
-import ProgressBar from './../index';
+import ProgressBar from '../index';
 
-const outer = '.wc-free-shipping-progress-bar__outer';
-const inner = '.wc-free-shipping-progress-bar__inner';
+const progressbar = '.wc-free-shipping-progress-bar__progress';
 
 describe( 'The ProgressBar component', () => {
-	it( 'shows the classnames of the outer div correctly', () => {
-		render( <ProgressBar /> );
-		expect( document.querySelector( outer ) ).toBeInTheDocument();
-	} );
-
-	it( 'shows the classnames of the inner div correctly', () => {
-		render( <ProgressBar /> );
-		expect( document.querySelector( inner ) ).toBeInTheDocument();
+	it( 'shows the classnames of the div correctly', () => {
+		render( <ProgressBar freeShippingFrom="1" currentTotal="0" /> );
+		expect( document.querySelector( progressbar ) ).toBeInTheDocument();
 	} );
 
 	it( 'shows the style for a full bar correctly', () => {
 		render( <ProgressBar freeShippingFrom="4" currentTotal="4" /> );
-		expect( document.querySelector( inner ) ).toHaveStyle( 'width: 100%' );
+		expect( document.querySelector( progressbar ) ).toHaveAttribute(
+			'value',
+			'100'
+		);
 	} );
 
-	it( 'shows the style for a threequarter bar correctly', () => {
+	it( 'shows the style for a three quarter bar correctly', () => {
 		render( <ProgressBar freeShippingFrom="4" currentTotal="3" /> );
-		expect( document.querySelector( inner ) ).toHaveStyle( 'width: 75%' );
+		expect( document.querySelector( progressbar ) ).toHaveAttribute(
+			'value',
+			'75'
+		);
 	} );
 
 	it( 'shows the style for a half bar correctly', () => {
 		render( <ProgressBar freeShippingFrom="4" currentTotal="2" /> );
-		expect( document.querySelector( inner ) ).toHaveStyle( 'width: 50%' );
+		expect( document.querySelector( progressbar ) ).toHaveAttribute(
+			'value',
+			'50'
+		);
+	} );
+
+	it( 'shows the style for a one quarter bar correctly', () => {
+		render( <ProgressBar freeShippingFrom="4" currentTotal="1" /> );
+		expect( document.querySelector( progressbar ) ).toHaveAttribute(
+			'value',
+			'25'
+		);
 	} );
 
 	it( 'shows the style for an empty bar correctly', () => {
 		render( <ProgressBar freeShippingFrom="4" currentTotal="0" /> );
-		expect( document.querySelector( inner ) ).toHaveStyle( 'width: 0%' );
+		expect( document.querySelector( progressbar ) ).toHaveAttribute(
+			'value',
+			'0'
+		);
 	} );
 } );

src/components/progress-bar/index.js

@@ -1,15 +1,39 @@
-const ProgressBar = ( { currentTotal, freeShippingFrom } ) => {
+/*
+ * External dependencies
+ */
+import classnames from 'classnames';
+
+/**
+ * Internal dependencies
+ */
+import { getColorClass, getColorCode } from '../../util';
+
+const ProgressBar = ( {
+	currentTotal,
+	freeShippingFrom,
+	backgroundColor,
+	colorProps,
+} ) => {
+	const progressClass = getColorClass( backgroundColor, 'color' );
+	const progressColor = getColorCode(
+		backgroundColor,
+		colorProps,
+		'backgroundColor'
+	);
 	const progress = ( currentTotal / freeShippingFrom ) * 100;
-	const divWidth = ( progress > 100 ? 100 : progress ) + '%';
-	const divStyle = { width: divWidth };
+	const width = progress > 100 ? 100 : progress;
+	const style = { color: progressColor };
 
 	return (
-		<div className="wc-free-shipping-progress-bar__outer">
-			<div
-				className="wc-free-shipping-progress-bar__inner"
-				style={ divStyle }
-			></div>
-		</div>
+		<progress
+			className={ classnames(
+				'wc-free-shipping-progress-bar__progress',
+				progressClass
+			) }
+			max="100"
+			style={ style }
+			value={ width }
+		/>
 	);
 };
 

src/components/progress-label/index.js

@@ -1,17 +1,40 @@
+/*
+ * External dependencies
+ */
+import classnames from 'classnames';
+
+/**
+ * Internal dependencies
+ */
+import { getColorClass, getColorCode } from '../../util';
+
 const ProgressLabel = ( {
 	currentTotal,
 	freeShippingFrom,
 	labelInsufficientTotals,
 	labelSufficientTotals,
+	textColor,
+	colorProps,
 } ) => {
+	const messageClass = getColorClass( textColor, 'color' );
+	const messageColor = getColorCode( textColor, colorProps, 'color' );
+	const style = { color: messageColor };
 	const remaining = Number( freeShippingFrom - currentTotal ).toFixed( 2 );
 	const message =
 		remaining > 0
 			? labelInsufficientTotals.replace( '{amount}', remaining )
 			: labelSufficientTotals;
 
 	return (
-		<div className="wc-free-shipping-progress-bar__label">{ message }</div>
+		<div
+			className={ classnames(
+				'wc-free-shipping-progress-bar__label',
+				messageClass
+			) }
+			style={ style }
+		>
+			{ message }
+		</div>
 	);
 };
 

src/edit.js

@@ -3,6 +3,7 @@
  */
 import { __ } from '@wordpress/i18n';
 import {
+	__experimentalUseColorProps as useColorProps,
 	BlockControls,
 	InspectorControls,
 	PlainText,
@@ -19,6 +20,7 @@ import useViewSwitcher from './components/use-view-switcher';
 import { notice } from './constants';
 import { Icon, progressBarHalf, progressBarFull } from './icons';
 import './style.scss';
+import { getColorCode } from './util';
 
 const BlockSettings = ( { attributes, setAttributes } ) => {
 	const { freeShippingFrom } = attributes;
@@ -51,7 +53,11 @@ const BlockSettings = ( { attributes, setAttributes } ) => {
 };
 
 const Edit = ( { attributes, setAttributes, clientId } ) => {
-	const { labelInsufficientTotals, labelSufficientTotals } = attributes;
+	const {
+		labelInsufficientTotals,
+		labelSufficientTotals,
+		textColor,
+	} = attributes;
 	const { currentView, component: ViewSwitcherComponent } = useViewSwitcher(
 		clientId,
 		[
@@ -74,6 +80,10 @@ const Edit = ( { attributes, setAttributes, clientId } ) => {
 		]
 	);
 
+	const colorProps = useColorProps( attributes );
+	const messageColor = getColorCode( textColor, colorProps, 'color' );
+	const messageStyle = { color: messageColor };
+
 	return (
 		<div { ...useBlockProps() }>
 			<BlockErrorBoundary
@@ -102,6 +112,7 @@ const Edit = ( { attributes, setAttributes, clientId } ) => {
 						/>
 						<PlainText
 							className="wc-free-shipping-progress-bar__label"
+							style={ messageStyle }
 							value={ labelInsufficientTotals }
 							onChange={ ( value ) =>
 								setAttributes( {
@@ -135,13 +146,18 @@ const Edit = ( { attributes, setAttributes, clientId } ) => {
 								</p>
 							</Notice>
 						) }
-						<ProgressBar { ...attributes } />
+
+						<ProgressBar
+							{ ...attributes }
+							colorProps={ colorProps }
+						/>
 					</>
 				) }
 				{ currentView === 'sufficient-cart-totals' && (
 					<>
 						<PlainText
 							className="wc-free-shipping-progress-bar__label"
+							style={ messageStyle }
 							value={ labelSufficientTotals }
 							onChange={ ( value ) =>
 								setAttributes( {
@@ -151,6 +167,7 @@ const Edit = ( { attributes, setAttributes, clientId } ) => {
 						/>
 						<ProgressBar
 							{ ...attributes }
+							colorProps={ colorProps }
 							currentTotal="1"
 							freeShippingFrom="1"
 						/>

src/style.scss

@@ -1,19 +1,21 @@
-.wc-free-shipping-progress-bar__outer {
-	align-items: center;
+.wc-free-shipping-progress-bar__progress[value] {
+	appearance: none;
 	background: transparent;
-	border: 2px solid #ddd;
-	border-radius: 4px;
-	display: flex;
-	height: 2em;
-	justify-content: center;
+	border: 1px solid currentColor;
+	border-radius: 3px;
+	height: 20px;
 	margin: 0.5em 0 2em;
-	padding: 0.1em;
-	position: relative;
+	width: 100%;
 }
-.wc-free-shipping-progress-bar__inner {
-	background: #4c566a;
-	border-radius: 3px;
-	height: 100%;
-	left: 0;
-	position: absolute;
+
+.wc-free-shipping-progress-bar__progress[value]::-webkit-progress-bar {
+	background: transparent;
+}
+
+.wc-free-shipping-progress-bar__progress[value]::-webkit-progress-value {
+	background: currentColor;
+}
+
+.wc-free-shipping-progress-bar__progress[value]::-moz-progress-bar {
+	background: currentColor;
 }

src/util.js

@@ -0,0 +1,22 @@
+/**
+ * External dependencies
+ */
+import kebabCase from 'lodash.kebabcase';
+
+export function getColorClass( colorSlug, colorContextName ) {
+	if ( ! colorSlug || ! colorContextName ) {
+		return undefined;
+	}
+
+	return `has-${ kebabCase(
+		colorSlug
+	) }-${ colorContextName } has-text-color`;
+}
+
+export function getColorCode( colorCode, colorProps, scope ) {
+	if ( colorProps !== undefined && colorProps.style !== undefined ) {
+		return colorProps.style[ scope ];
+	}
+
+	return colorCode || 'currentColor';
+}