Filter Products by Price: Block creation (#865)

* Prevent interaction with slider * Show input fields toggle * Placeholder content and icons * Update dependency rimraf to v2.7.0 (#858) * placeholder styling * remove unnecessary config (#862) * Filter button and styling * Show/hide placeholder based on product count * Update dependency rimraf to v2.7.1 (#867) * Use correct parameter order for implode. Solves deprecation notice in PHP 7.4 (#857) * Add description to blocks added in last releases (#869) * Limit max width * Prevent wrap * handles src file * Introduce withCategory HOC for featured category block (#846) * Introduce withCategory hoc * Refactor featured category to use new hoc * Update docblocks * Add README note for PHP deprecation notices * Remove screen-reader-text css rules (#849) * Align stars left (#866) * bool * Create Reviews by Product block (#658) * Create Reviews by Product block * Honor Content settings * Fix wrong className * Load new wc-packages file * Add reviews-by-product JS files to webpack config * Cleanup * Remove error messages * Add Reviews by Product icon * Update sort options * Allow additional CSS classes attribute * Refactor block styles * Fix wrong default for reviews_orderby * Don't enforce CSS chunks * Add reviews count to Reviews by Product controls (#671) * Add label to Reviews by Product controls count (#677) * Add reviews count to Reviews by Product controls * Add label to Reviews by Product controls count * Add label to Reviews by Product controls count * Update components package * Review ordering and placeholders (#688) * Add support for comment_count ordering and add to productcontrol * Add a placeholder if rating count is 0 * Update assets/js/components/utils/index.js Co-Authored-By: Albert Juhé Lluveras <[email protected]> * Update assets/js/blocks/reviews-by-product/block.js Co-Authored-By: Albert Juhé Lluveras <[email protected]> * grammar * Fix some linting errors and warnings (#693) * Create Reviews by Product block placeholder (#691) * Create Reviews by Product block placeholder * Reviews by Product: load and render reviews with JS (#696) * Reviews by Product: load and render reviews with JS * Add dangerouslySetInnerHTML explanatory comment * Fix wrong dependency source * Debounce getReviews call when creating the Reviews by Product block * Rename 'Reviewer Picture' with 'Avatar' (#702) * Lint errors * Replace stringify query with addQueryArgs (#707) * Add reviews endpoint (#705) * Prevent state updates on unmounted components (#715) * Add Order by and Load more controls in Reviews by Product frontend (#716) * Export IconReviewsByProduct (#721) * Fix Reviews by Product layout in IE11 (#723) * Set minimum to per page input field (#731) * Hide avatars in Reviews by Products if 'show_avatars' settings is false (#730) * Blocks API - Reviews endpoint with rating sort and category filtering (#726) * Move file to correct location * We are only using the reviews endpoint not revioews/id * Remove sensistive data and make endpoint public * Allow guest access to approved reviews * Add support for rating sorting * category filtering * update arg name * fix category query * Reviews by Product: add placeholders when loading reviews (#732) * Add placeholder animation (#733) * Hook up Reviews by Product 'Order by' with endpoint (#736) * Hook up Reviews by Product 'Order by' with endpoint * Use onChange instead of onBlur in select control * Reviews by Product: Hide ratings if they are disabled in settings (#740) * Hide ratings in Reviews by Product if disabled in settings * Hide order by select if ratings are disabled * Reviews by Product cleanup (#773) * Fix wrong method name * Reduce the number of dependencies used in Reviews by Product (#774) * Reduce the number of dependencies used in Reviews by Product * Use 'withComponentId' HOC * Remove debounce * Fix wrong proptype * Get rid of JS warning * Load render from react-dom * Add formatted_date_created item schema (#788) * Fix import of WithComponentID * Add new settings to Reviews by Product block (#787) * Add new settings to Reviews by Product block * Remove helpText and add notices * Use RangeControl for numeric settings * Prevent fetching new reviews if all were already fetched * Enable product image in reviews * Remove unnecessary catch * Refactor getReviews * Move getReviews back to block's code * Cleanup * Fix wrong order in editor * Hide 'Load More Reviews' if showLoadMore is false * Move getReviews to utils.js * Add @woocommerce/navigation to package.json * Make notices non-dismissable * Reviews by Product: prevent importing all HOCs and import only withComponentId (#811) * Reviews by product: Update review styling and content (#806) * Add new settings to Reviews by Product block * Remove helpText and add notices * Use RangeControl for numeric settings * Prevent fetching new reviews if all were already fetched * Enable product image in reviews * Remove unnecessary catch * Refactor getReviews * Move getReviews back to block's code * Cleanup * Fix wrong order in editor * Hide 'Load More Reviews' if showLoadMore is false * Move getReviews to utils.js * Add @woocommerce/navigation to package.json * Make notices non-dismissable * Review design/layout * verified icons * Read more component * remove comment * expanded -> isExpanded * Localise and change default elipses * Simplify ReadMore * Support children rather than passing content * remove outside * remove list style * Update assets/js/components/read-more/index.js Co-Authored-By: Albert Juhé Lluveras <[email protected]> * Update assets/js/components/read-more/index.js Co-Authored-By: Albert Juhé Lluveras <[email protected]> * merge set state * Add missing parameter doc in renderReview (#820) * Fix Reviews by Product order by select not honoring default setting (#818) * Read more component - change how clamped content is shown (#821) * Pass review as components * Build summary from content and track both * Toggle display after inital load * remove unused variable * remove componentDidUpdate * Simplify clampLines * Put back componentDidUpdate, but store final summary in state * clampEnabled * Call clampLines from componentDidMount (#826) * truncate html tests * implement trimHTML and pass test * Feedback * test short content * Use withProduct HOC in ReviewsByProductEditor (#828) * Use withProduct HOC * Convert ReviewsByProductEditor to a functional component * Add loading and error states * Prevent loading screen appearing when changing products * Reviews: only save wrapper element to post (#830) * Fix bundlesize config not picking frontend files (#840) * Reviews by Product: split 'block.js' into smaller chunks (#841) * Split 'block.js' into smaller chunks * Move frontend blocks to their specific folder * Order imports * Typo * Add frontend components proptypes * Fix indentation * Call 'this.getDefaultArgs' directly inside 'getReviews' * Move access to wc_product_block_data to the top of the file * Rename 'frontend' folder to 'base' * Rename base components and move styles to their folder * Fix Reviews by Product using rating count instead of review count (#860) * Improve Reviews by Product accessibility (#861) * Improve Reviews by Product accessibility * Make 'onClick' prop not required in <LoadMoreButton> * Wrap Reviews by Product editor block with <Disabled> * Reviews: fix reviews without rating not appearing when sorting by rating (#863) * Update assets/css/style.scss Co-Authored-By: Albert Juhé Lluveras <[email protected]> * Pin dependencies (#872) * Update dependency webpack to v4.39.2 (#855) * Update dependency @woocommerce/components to v3.2.0 (#875) * Update Reviews styles so it looks the same in the editor and the frontend (#871) * Update Node.js to v10.16.3 (#874) * Move wc_product_block_data variables to constants file (#870) * Update dependency webpack-cli to v3.3.7 (#880) * Add changelog script (#878) * Add changelog script * Adapt changelog script to WooCommerce Blocks * Minor improvements * Update dependency lint-staged to v9.2.3 (#879) * Pin dependencies (#883) * Update dependency eslint to v6.2.0 (#881) * Reviews by category block (#804) * Create Reviews by Product block * Honor Content settings * Fix wrong className * Load new wc-packages file * Add reviews-by-product JS files to webpack config * Cleanup * Remove error messages * Add Reviews by Product icon * Update sort options * Allow additional CSS classes attribute * Refactor block styles * Fix wrong default for reviews_orderby * Don't enforce CSS chunks * Add reviews count to Reviews by Product controls (#671) * Add label to Reviews by Product controls count (#677) * Add reviews count to Reviews by Product controls * Add label to Reviews by Product controls count * Add label to Reviews by Product controls count * Update components package * Review ordering and placeholders (#688) * Add support for comment_count ordering and add to productcontrol * Add a placeholder if rating count is 0 * Update assets/js/components/utils/index.js Co-Authored-By: Albert Juhé Lluveras <[email protected]> * Update assets/js/blocks/reviews-by-product/block.js Co-Authored-By: Albert Juhé Lluveras <[email protected]> * grammar * Fix some linting errors and warnings (#693) * Create Reviews by Product block placeholder (#691) * Create Reviews by Product block placeholder * Reviews by Product: load and render reviews with JS (#696) * Reviews by Product: load and render reviews with JS * Add dangerouslySetInnerHTML explanatory comment * Fix wrong dependency source * Debounce getReviews call when creating the Reviews by Product block * Rename 'Reviewer Picture' with 'Avatar' (#702) * Lint errors * Replace stringify query with addQueryArgs (#707) * Add reviews endpoint (#705) * Prevent state updates on unmounted components (#715) * Add Order by and Load more controls in Reviews by Product frontend (#716) * Export IconReviewsByProduct (#721) * Fix Reviews by Product layout in IE11 (#723) * Set minimum to per page input field (#731) * Hide avatars in Reviews by Products if 'show_avatars' settings is false (#730) * Blocks API - Reviews endpoint with rating sort and category filtering (#726) * Move file to correct location * We are only using the reviews endpoint not revioews/id * Remove sensistive data and make endpoint public * Allow guest access to approved reviews * Add support for rating sorting * category filtering * update arg name * fix category query * Reviews by Product: add placeholders when loading reviews (#732) * Add placeholder animation (#733) * Hook up Reviews by Product 'Order by' with endpoint (#736) * Hook up Reviews by Product 'Order by' with endpoint * Use onChange instead of onBlur in select control * Reviews by Product: Hide ratings if they are disabled in settings (#740) * Hide ratings in Reviews by Product if disabled in settings * Hide order by select if ratings are disabled * Reviews by Product cleanup (#773) * Fix wrong method name * Reduce the number of dependencies used in Reviews by Product (#774) * Reduce the number of dependencies used in Reviews by Product * Use 'withComponentId' HOC * Remove debounce * Fix wrong proptype * Get rid of JS warning * Load render from react-dom * Add formatted_date_created item schema (#788) * Inital block setup * Fix import of WithComponentID * Render the category reviews * Add new settings to Reviews by Product block (#787) * Add new settings to Reviews by Product block * Remove helpText and add notices * Use RangeControl for numeric settings * Prevent fetching new reviews if all were already fetched * Enable product image in reviews * Remove unnecessary catch * Refactor getReviews * Move getReviews back to block's code * Cleanup * Fix wrong order in editor * Hide 'Load More Reviews' if showLoadMore is false * Move getReviews to utils.js * Add @woocommerce/navigation to package.json * Make notices non-dismissable * Reviews by Product: prevent importing all HOCs and import only withComponentId (#811) * Reviews by product: Update review styling and content (#806) * Add new settings to Reviews by Product block * Remove helpText and add notices * Use RangeControl for numeric settings * Prevent fetching new reviews if all were already fetched * Enable product image in reviews * Remove unnecessary catch * Refactor getReviews * Move getReviews back to block's code * Cleanup * Fix wrong order in editor * Hide 'Load More Reviews' if showLoadMore is false * Move getReviews to utils.js * Add @woocommerce/navigation to package.json * Make notices non-dismissable * Review design/layout * verified icons * Read more component * remove comment * expanded -> isExpanded * Localise and change default elipses * Simplify ReadMore * Support children rather than passing content * remove outside * remove list style * Update assets/js/components/read-more/index.js Co-Authored-By: Albert Juhé Lluveras <[email protected]> * Update assets/js/components/read-more/index.js Co-Authored-By: Albert Juhé Lluveras <[email protected]> * merge set state * Add missing parameter doc in renderReview (#820) * Fix Reviews by Product order by select not honoring default setting (#818) * Read more component - change how clamped content is shown (#821) * Pass review as components * Build summary from content and track both * Toggle display after inital load * remove unused variable * remove componentDidUpdate * Simplify clampLines * Put back componentDidUpdate, but store final summary in state * clampEnabled * Call clampLines from componentDidMount (#826) * truncate html tests * implement trimHTML and pass test * Feedback * test short content * Use withProduct HOC in ReviewsByProductEditor (#828) * Use withProduct HOC * Convert ReviewsByProductEditor to a functional component * Add loading and error states * Prevent loading screen appearing when changing products * Reviews: only save wrapper element to post (#830) * Update based on product reviews * Cleanup after master merge * Implement content hiding and placeholder states for reviews blocks * Output product names and adjust css * Review permalink * Remove old read-more component which was moved * showProductName is already part of passed attributes * CSS tweaks for missing elements * Move dir * Move product reviews block * Move shared uitils * update paths * frontend paths * Update paths * shared attributes * switch to constants * Shared review block code * Replace constants * Fix hidden content bug * star alignment * Update dependency eslint to v6.2.1 (#890) * remove JSON parse * remove comment * No need for important rules * Fix error appearing on Reviews by Product when there were no reviews (#884) * Fix error appearing on Reviews by Product when there were no reviews * Revert "Fix error appearing on Reviews by Product when there were no reviews" This reverts commit 73e95b3. * Move withProduct() HOC to editor-block.js * Revert "Move withProduct() HOC to editor-block.js" This reverts commit ae95157. * Move renderNoReviews back to edit.js * Move no reviews placeholder to its own component * Remove usage of 'RawHTML' * Fix propTypes * Remove unnecessary escapeHTML * revise labels * Move component to base * Add price text
woocommerce · Aug 21, 2019 · 6c3bb4f · 6c3bb4f
1 parent bbd421f
commit 6c3bb4f
Show file tree

Hide file tree

Showing 95 changed files with 4,492 additions and 782 deletions.
diff --git a/.eslintrc.js b/.eslintrc.js
@@ -14,6 +14,10 @@ module.exports = {
 	],
 	rules: {
 		'@wordpress/dependency-group': 'off',
+		'camelcase': [ 'error', {
+			allow: [ 'wc_product_block_data' ],
+			properties: 'never',
+		} ],
 		'valid-jsdoc': 'off',
 	}
 };
diff --git a/assets/css/abstracts/_mixins.scss b/assets/css/abstracts/_mixins.scss
@@ -15,6 +15,18 @@
 	}
 }
 
+@keyframes loading-fade {
+	0% {
+		opacity: 0.7;
+	}
+	50% {
+		opacity: 1;
+	}
+	100% {
+		opacity: 0.7;
+	}
+}
+
 // Adds animation to placeholder section
 @mixin placeholder( $lighten-percentage: 30% ) {
 	animation: loading-fade 1.6s ease-in-out infinite;
@@ -24,6 +36,10 @@
 	&::after {
 		content: "\00a0";
 	}
+
+	@media screen and (prefers-reduced-motion: reduce) {
+		animation: none;
+	}
 }
 
 // Adds animation to transforms

diff --git a/assets/css/style.scss b/assets/css/style.scss
@@ -1,3 +1,60 @@
+.wc-block-form-button,
+.wc-block-form-text-input,
+input[type="text"].wc-block-form-text-input {
+	font-size: 1em;
+	border-radius: 0;
+	background: none;
+	text-decoration: none;
+	font-weight: normal;
+	text-shadow: none;
+	display: inline-block;
+	appearance: none;
+
+	&:focus {
+		outline: 2px solid #9f6893;
+	}
+}
+
+.wc-block-form-text-input,
+input[type="text"].wc-block-form-text-input {
+	border-radius: 4px;
+	border: 1px solid #aaa;
+	background: #fff;
+	padding: 0.6180469716em;
+	color: #333;
+	box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.125);
+
+	&:focus {
+		background: inherit;
+	}
+	&:disabled,
+	&[aria-disabled="true"] {
+		opacity: 0.3;
+		background-color: #eee;
+	}
+}
+.wc-block-form-button {
+	border: 1px solid #eee;
+	background-color: #eee;
+	color: #333;
+	cursor: pointer;
+	word-wrap: normal;
+	padding: 0.6180469716em 1.41575em;
+	font-weight: 600;
+
+	&:focus,
+	&:hover {
+		background-color: #d5d5d5;
+		border-color: #d5d5d5;
+		color: #333;
+	}
+	&:disabled,
+	&[aria-disabled="true"] {
+		cursor: default;
+		opacity: 0.3;
+	}
+}
+
 .wc-block-grid__products {
 	display: flex;
 	flex-wrap: wrap;
@@ -112,6 +169,7 @@
 		font-weight: 400;
 		display: inline-block;
 		margin: 0 auto;
+		text-align: left;
 
 		&::before {
 			content: "\53\53\53\53\53";

diff --git a/assets/js/base/components/load-more-button/index.js b/assets/js/base/components/load-more-button/index.js
@@ -0,0 +1,47 @@
+/**
+ * External dependencies
+ */
+import { __ } from '@wordpress/i18n';
+import { Fragment } from 'react';
+import PropTypes from 'prop-types';
+
+/**
+ * Internal dependencies
+ */
+import './style.scss';
+
+export const LoadMoreButton = ( { onClick, label, screenReaderLabel } ) => {
+	const labelNode = ( screenReaderLabel && label !== screenReaderLabel ) ? (
+		<Fragment>
+			<span aria-hidden>
+				{ label }
+			</span>
+			<span className="screen-reader-text">
+				{ screenReaderLabel }
+			</span>
+		</Fragment>
+	) : label;
+
+	return (
+		<div className="wp-block-button wc-block-load-more">
+			<button
+				className="wp-block-button__link"
+				onClick={ onClick }
+			>
+				{ labelNode }
+			</button>
+		</div>
+	);
+};
+
+LoadMoreButton.propTypes = {
+	label: PropTypes.string,
+	onClick: PropTypes.func,
+	screenReaderLabel: PropTypes.string,
+};
+
+LoadMoreButton.defaultProps = {
+	label: __( 'Load more', 'woo-gutenberg-products-block' ),
+};
+
+export default LoadMoreButton;
diff --git a/assets/js/base/components/load-more-button/style.scss b/assets/js/base/components/load-more-button/style.scss
@@ -0,0 +1,4 @@
+.wc-block-load-more {
+	text-align: center;
+	width: 100%;
+}
diff --git a/assets/js/base/components/price-slider/handles.sketch b/assets/js/base/components/price-slider/handles.sketch
diff --git a/...frontend-components/price-slider/index.js → .../js/base/components/price-slider/index.js b/...frontend-components/price-slider/index.js → .../js/base/components/price-slider/index.js
@@ -4,6 +4,7 @@
 import { sprintf, __ } from '@wordpress/i18n';
 import { Component, createRef, Fragment } from 'react';
 import PropTypes from 'prop-types';
+import classnames from 'classnames';
 
 /**
  * Internal dependencies
@@ -163,34 +164,42 @@ class PriceSlider extends Component {
 	}
 
 	render() {
-		const { min, max, step, showInputFields } = this.props;
+		const { min, max, step, showInputFields, showFilterButton } = this.props;
 		const { inputMin, inputMax, currentMin, currentMax } = this.state;
+
+		const classes = classnames(
+			'wc-block-price-filter',
+			showInputFields && 'wc-block-price-filter--has-input-fields',
+			showFilterButton && 'wc-block-price-filter--has-filter-button',
+		);
 		return (
-			<div className="wc-block-price-filter">
-				{ showInputFields && (
-					<Fragment>
-						<input
-							type="text"
-							className="wc-block-price-filter__amount wc-block-price-filter__amount--min"
-							aria-label={ __( 'Filter products by minimum price', 'woo-gutenberg-products-block' ) }
-							size="5"
-							ref={ this.minInput }
-							value={ inputMin }
-							onChange={ this.onInputChange }
-							onBlur={ this.onInputBlur }
-						/>
-						<input
-							type="text"
-							className="wc-block-price-filter__amount wc-block-price-filter__amount--max"
-							aria-label={ __( 'Filter products by maximum price', 'woo-gutenberg-products-block' ) }
-							size="5"
-							ref={ this.maxInput }
-							value={ inputMax }
-							onChange={ this.onInputChange }
-							onBlur={ this.onInputBlur }
-						/>
-					</Fragment>
-				) }
+			<div className={ classes }>
+				<div className="wc-block-price-filter__controls">
+					{ showInputFields && (
+						<Fragment>
+							<input
+								type="text"
+								className="wc-block-price-filter__amount wc-block-price-filter__amount--min wc-block-form-text-input"
+								aria-label={ __( 'Filter products by minimum price', 'woo-gutenberg-products-block' ) }
+								size="5"
+								ref={ this.minInput }
+								value={ inputMin }
+								onChange={ this.onInputChange }
+								onBlur={ this.onInputBlur }
+							/>
+							<input
+								type="text"
+								className="wc-block-price-filter__amount wc-block-price-filter__amount--max wc-block-form-text-input"
+								aria-label={ __( 'Filter products by maximum price', 'woo-gutenberg-products-block' ) }
+								size="5"
+								ref={ this.maxInput }
+								value={ inputMax }
+								onChange={ this.onInputChange }
+								onBlur={ this.onInputBlur }
+							/>
+						</Fragment>
+					) }
+				</div>
 				<div
 					className="wc-block-price-filter__range-input-wrapper"
 					onMouseMove={ this.findClosestRange }
@@ -220,6 +229,19 @@ class PriceSlider extends Component {
 						max={ max }
 					/>
 				</div>
+				<div className="wc-block-price-filter__range-button-wrapper">
+					<div className="wc-block-price-filter__range-text">
+						{ sprintf( __( 'Price: %s — %s', 'woo-gutenberg-products-block' ), inputMin, inputMax ) }
+					</div>
+					{ showFilterButton && (
+						<button
+							type="submit"
+							className="wc-block-price-filter__button wc-block-form-button"
+						>
+							{ __( 'Go', 'woo-gutenberg-products-block' ) }
+						</button>
+					) }
+				</div>
 			</div>
 		);
 	}
@@ -253,7 +275,11 @@ PriceSlider.propTypes = {
 	/**
 	 * Whether or not to show input fields above the slider.
 	 */
-	showInputFields: PropTypes.boolean,
+	showInputFields: PropTypes.bool,
+	/**
+	 * Whether or not to show filter button above the slider.
+	 */
+	showFilterButton: PropTypes.bool,
 };
 
 PriceSlider.defaultProps = {
@@ -262,6 +288,7 @@ PriceSlider.defaultProps = {
 	currencySymbol: '$',
 	priceFormat: '%1$s%2$s',
 	showInputFields: true,
+	showFilterButton: false,
 };
 
 export default PriceSlider;
diff --git a/...ontend-components/price-slider/style.scss → ...s/base/components/price-slider/style.scss b/...ontend-components/price-slider/style.scss → ...s/base/components/price-slider/style.scss
@@ -47,17 +47,29 @@
 }
 
 .wc-block-price-filter {
-	.wc-block-price-filter__amount {
-		display: inline-block;
-		margin-bottom: 20px;
-		border-radius: 4px;
-		width: auto;
-
-		&.wc-block-price-filter__amount--min {
-			float: left;
-		}
-		&.wc-block-price-filter__amount--max {
-			float: right;
+	.wc-block-price-filter__controls {
+		display: flex;
+		flex-flow: row nowrap;
+		justify-content: flex-end;
+		align-items: center;
+		margin: 0 0 10px;
+
+		.wc-block-price-filter__amount {
+			display: inline-block;
+			margin: 0;
+			border-radius: 4px;
+			width: auto;
+			flex-grow: 2;
+			max-width: 100px;
+
+			&.wc-block-price-filter__amount--min {
+				order: 1;
+				margin-right: 10px;
+			}
+			&.wc-block-price-filter__amount--max {
+				order: 2;
+				margin-left: auto;
+			}
 		}
 	}
 	.wc-block-price-filter__range-input-wrapper {
@@ -67,6 +79,8 @@
 		position: relative;
 		box-shadow: 0 0 0 1px inset rgba(0, 0, 0, 0.1);
 		background: #e1e1e1;
+		margin: 15px 0;
+
 		.wc-block-price-filter__range-input-progress {
 			height: 9px;
 			width: 100%;
@@ -78,6 +92,17 @@
 			background: var(--track-background);
 		}
 	}
+	.wc-block-price-filter__range-button-wrapper {
+		display: flex;
+		flex-flow: row nowrap;
+		justify-content: flex-end;
+		margin: 0 0 20px;
+		align-items: center;
+
+		.wc-block-price-filter__button {
+			margin-left: auto;
+		}
+	}
 	.wc-block-price-filter__range-input {
 		@include reset;
 		width: 100%;

diff --git a/...frontend-components/price-slider/utils.js → .../js/base/components/price-slider/utils.js b/...frontend-components/price-slider/utils.js → .../js/base/components/price-slider/utils.js