woocommerce/plugins/woocommerce-blocks/assets/js/blocks/cart-checkout/cart/full-cart/cart-line-items-table.js

64 lines
1.4 KiB
JavaScript
Raw Normal View History

Cart block: line-items front end initial work (https://github.com/woocommerce/woocommerce-blocks/pull/1333) * render block on front end, add `Shopping cart` heading (baby steps) * fake data for editing full cart + show line count in header * add note about core/html using `is-active` class for toggle state * reinstate work-in-progress full cart component (lost in rebase) * reinstate full cart from master * component for full cart title & item count + margin tweaks: - add margin between main cart & sidebar - add margin after cart block * add cart items sample data + factor sample product image to module * use sample cart data for item count * basic table of cart line items (no styling) * prettification * show images for cart line items + initial table styling * cart quantity selector component (work in progress) * use state for cart product quantity, allow incr/decr from UI (WIP) * replace WIP custom quantity control with number edit (temporary) * correctly format cart line item total price * align cart item columns with headings + indent image on desktop * tweak css for cart line item padding on mobile so it's more explicit * show cart line item full price if discounted * add placeholder for cart remove item link * switch cart table to flex layout (was table)… This will allow us to move things around for mobile/responsive layout. * only show cart items table header on desktop * more cart items styling - row borders, appropriate padding + + move image width to variable + fix class name plurality for row (item not items) * use standard $gap instead of 1em for padding/margins * responsive (mobile) layout for cart line items: - shift line $ total to bottom right - stack quantity selector in product info column * remove extraneous cart table padding on mobile * comment about unused styles for quantity selector component * add follow up issue for todo * remove inappropriate href * render srcset & sizes for cart line item product image * remove todo comment * switch back to table markup for cart items (in progress): - table is more semantic, associates headers with columns * cart line items column widths - product column is larger (60%) * reinstate table row borders * bottom-align line item price on mobile * cart contents heading should be H2 + prettify * remove unused QuantitySelector code/styles, rename main class in line with BEM * defaults for QuantitySelector props * variable/property name tidies - match conventions/API * fix bug: line total price is only bottom-align on small screen * move QuantitySelector to root of components, intended to be generally useful * use lineItem directly for cart, specify shape in PropTypes * rename cart components to align with "line item" rather than "product" * rejig class names to better align with new component names & BEM style * show cart item image correct size: - use single column for product image and info, with flex container - specify image width (rem instead of px) * fix safari issue - cart product images displaying vertically stretched * shift product name left margin from image, to account for no-image case * experiment: bump bundlewatch size limit for cart temporarily: - our fake data inline image is heavy - when we switch to real API we will no longer need it * fix issue introduced when moving margin from image to details div: - product details needs margin on left (not right) * fix react props issues: - explicitly destructure image props for srcSet (vs srcset) - use API key field for line item key instead of id, fix duplicate test id - CartLineItemsTable takes an array of lineItems (incorrect PropTypes) * remove redundant divs + use conventional `null` (when no full price) * override editor styles to ensure cart product image is correct size * move cart items editor style override to editor.css * add an explicit readable heading for cart heading to match visual layout
2020-01-09 22:50:14 +00:00
/**
* External dependencies
*/
import { __ } from '@wordpress/i18n';
import PropTypes from 'prop-types';
/**
* Internal dependencies
*/
import CartLineItemRow from './cart-line-item-row';
const placeholderRows = [ ...Array( 3 ) ].map( ( _x, i ) => (
<CartLineItemRow key={ i } />
) );
const CartLineItemsTable = ( { lineItems = [], isLoading = false } ) => {
const products = isLoading
? placeholderRows
: lineItems.map( ( lineItem ) => {
return (
<CartLineItemRow
key={ lineItem.key }
lineItem={ lineItem }
/>
);
} );
Cart block: line-items front end initial work (https://github.com/woocommerce/woocommerce-blocks/pull/1333) * render block on front end, add `Shopping cart` heading (baby steps) * fake data for editing full cart + show line count in header * add note about core/html using `is-active` class for toggle state * reinstate work-in-progress full cart component (lost in rebase) * reinstate full cart from master * component for full cart title & item count + margin tweaks: - add margin between main cart & sidebar - add margin after cart block * add cart items sample data + factor sample product image to module * use sample cart data for item count * basic table of cart line items (no styling) * prettification * show images for cart line items + initial table styling * cart quantity selector component (work in progress) * use state for cart product quantity, allow incr/decr from UI (WIP) * replace WIP custom quantity control with number edit (temporary) * correctly format cart line item total price * align cart item columns with headings + indent image on desktop * tweak css for cart line item padding on mobile so it's more explicit * show cart line item full price if discounted * add placeholder for cart remove item link * switch cart table to flex layout (was table)… This will allow us to move things around for mobile/responsive layout. * only show cart items table header on desktop * more cart items styling - row borders, appropriate padding + + move image width to variable + fix class name plurality for row (item not items) * use standard $gap instead of 1em for padding/margins * responsive (mobile) layout for cart line items: - shift line $ total to bottom right - stack quantity selector in product info column * remove extraneous cart table padding on mobile * comment about unused styles for quantity selector component * add follow up issue for todo * remove inappropriate href * render srcset & sizes for cart line item product image * remove todo comment * switch back to table markup for cart items (in progress): - table is more semantic, associates headers with columns * cart line items column widths - product column is larger (60%) * reinstate table row borders * bottom-align line item price on mobile * cart contents heading should be H2 + prettify * remove unused QuantitySelector code/styles, rename main class in line with BEM * defaults for QuantitySelector props * variable/property name tidies - match conventions/API * fix bug: line total price is only bottom-align on small screen * move QuantitySelector to root of components, intended to be generally useful * use lineItem directly for cart, specify shape in PropTypes * rename cart components to align with "line item" rather than "product" * rejig class names to better align with new component names & BEM style * show cart item image correct size: - use single column for product image and info, with flex container - specify image width (rem instead of px) * fix safari issue - cart product images displaying vertically stretched * shift product name left margin from image, to account for no-image case * experiment: bump bundlewatch size limit for cart temporarily: - our fake data inline image is heavy - when we switch to real API we will no longer need it * fix issue introduced when moving margin from image to details div: - product details needs margin on left (not right) * fix react props issues: - explicitly destructure image props for srcSet (vs srcset) - use API key field for line item key instead of id, fix duplicate test id - CartLineItemsTable takes an array of lineItems (incorrect PropTypes) * remove redundant divs + use conventional `null` (when no full price) * override editor styles to ensure cart product image is correct size * move cart items editor style override to editor.css * add an explicit readable heading for cart heading to match visual layout
2020-01-09 22:50:14 +00:00
return (
<table className="wc-block-cart-items">
<thead>
<tr className="wc-block-cart-items__header">
<th className="wc-block-cart-items__header-image">
<span>
{ __( 'Product', 'woo-gutenberg-products-block' ) }
</span>
Cart block: line-items front end initial work (https://github.com/woocommerce/woocommerce-blocks/pull/1333) * render block on front end, add `Shopping cart` heading (baby steps) * fake data for editing full cart + show line count in header * add note about core/html using `is-active` class for toggle state * reinstate work-in-progress full cart component (lost in rebase) * reinstate full cart from master * component for full cart title & item count + margin tweaks: - add margin between main cart & sidebar - add margin after cart block * add cart items sample data + factor sample product image to module * use sample cart data for item count * basic table of cart line items (no styling) * prettification * show images for cart line items + initial table styling * cart quantity selector component (work in progress) * use state for cart product quantity, allow incr/decr from UI (WIP) * replace WIP custom quantity control with number edit (temporary) * correctly format cart line item total price * align cart item columns with headings + indent image on desktop * tweak css for cart line item padding on mobile so it's more explicit * show cart line item full price if discounted * add placeholder for cart remove item link * switch cart table to flex layout (was table)… This will allow us to move things around for mobile/responsive layout. * only show cart items table header on desktop * more cart items styling - row borders, appropriate padding + + move image width to variable + fix class name plurality for row (item not items) * use standard $gap instead of 1em for padding/margins * responsive (mobile) layout for cart line items: - shift line $ total to bottom right - stack quantity selector in product info column * remove extraneous cart table padding on mobile * comment about unused styles for quantity selector component * add follow up issue for todo * remove inappropriate href * render srcset & sizes for cart line item product image * remove todo comment * switch back to table markup for cart items (in progress): - table is more semantic, associates headers with columns * cart line items column widths - product column is larger (60%) * reinstate table row borders * bottom-align line item price on mobile * cart contents heading should be H2 + prettify * remove unused QuantitySelector code/styles, rename main class in line with BEM * defaults for QuantitySelector props * variable/property name tidies - match conventions/API * fix bug: line total price is only bottom-align on small screen * move QuantitySelector to root of components, intended to be generally useful * use lineItem directly for cart, specify shape in PropTypes * rename cart components to align with "line item" rather than "product" * rejig class names to better align with new component names & BEM style * show cart item image correct size: - use single column for product image and info, with flex container - specify image width (rem instead of px) * fix safari issue - cart product images displaying vertically stretched * shift product name left margin from image, to account for no-image case * experiment: bump bundlewatch size limit for cart temporarily: - our fake data inline image is heavy - when we switch to real API we will no longer need it * fix issue introduced when moving margin from image to details div: - product details needs margin on left (not right) * fix react props issues: - explicitly destructure image props for srcSet (vs srcset) - use API key field for line item key instead of id, fix duplicate test id - CartLineItemsTable takes an array of lineItems (incorrect PropTypes) * remove redundant divs + use conventional `null` (when no full price) * override editor styles to ensure cart product image is correct size * move cart items editor style override to editor.css * add an explicit readable heading for cart heading to match visual layout
2020-01-09 22:50:14 +00:00
</th>
<th className="wc-block-cart-items__header-product">
<span>
{ __( 'Details', 'woo-gutenberg-products-block' ) }
</span>
</th>
Cart block: line-items front end initial work (https://github.com/woocommerce/woocommerce-blocks/pull/1333) * render block on front end, add `Shopping cart` heading (baby steps) * fake data for editing full cart + show line count in header * add note about core/html using `is-active` class for toggle state * reinstate work-in-progress full cart component (lost in rebase) * reinstate full cart from master * component for full cart title & item count + margin tweaks: - add margin between main cart & sidebar - add margin after cart block * add cart items sample data + factor sample product image to module * use sample cart data for item count * basic table of cart line items (no styling) * prettification * show images for cart line items + initial table styling * cart quantity selector component (work in progress) * use state for cart product quantity, allow incr/decr from UI (WIP) * replace WIP custom quantity control with number edit (temporary) * correctly format cart line item total price * align cart item columns with headings + indent image on desktop * tweak css for cart line item padding on mobile so it's more explicit * show cart line item full price if discounted * add placeholder for cart remove item link * switch cart table to flex layout (was table)… This will allow us to move things around for mobile/responsive layout. * only show cart items table header on desktop * more cart items styling - row borders, appropriate padding + + move image width to variable + fix class name plurality for row (item not items) * use standard $gap instead of 1em for padding/margins * responsive (mobile) layout for cart line items: - shift line $ total to bottom right - stack quantity selector in product info column * remove extraneous cart table padding on mobile * comment about unused styles for quantity selector component * add follow up issue for todo * remove inappropriate href * render srcset & sizes for cart line item product image * remove todo comment * switch back to table markup for cart items (in progress): - table is more semantic, associates headers with columns * cart line items column widths - product column is larger (60%) * reinstate table row borders * bottom-align line item price on mobile * cart contents heading should be H2 + prettify * remove unused QuantitySelector code/styles, rename main class in line with BEM * defaults for QuantitySelector props * variable/property name tidies - match conventions/API * fix bug: line total price is only bottom-align on small screen * move QuantitySelector to root of components, intended to be generally useful * use lineItem directly for cart, specify shape in PropTypes * rename cart components to align with "line item" rather than "product" * rejig class names to better align with new component names & BEM style * show cart item image correct size: - use single column for product image and info, with flex container - specify image width (rem instead of px) * fix safari issue - cart product images displaying vertically stretched * shift product name left margin from image, to account for no-image case * experiment: bump bundlewatch size limit for cart temporarily: - our fake data inline image is heavy - when we switch to real API we will no longer need it * fix issue introduced when moving margin from image to details div: - product details needs margin on left (not right) * fix react props issues: - explicitly destructure image props for srcSet (vs srcset) - use API key field for line item key instead of id, fix duplicate test id - CartLineItemsTable takes an array of lineItems (incorrect PropTypes) * remove redundant divs + use conventional `null` (when no full price) * override editor styles to ensure cart product image is correct size * move cart items editor style override to editor.css * add an explicit readable heading for cart heading to match visual layout
2020-01-09 22:50:14 +00:00
<th className="wc-block-cart-items__header-total">
<span>
{ __( 'Total', 'woo-gutenberg-products-block' ) }
</span>
Cart block: line-items front end initial work (https://github.com/woocommerce/woocommerce-blocks/pull/1333) * render block on front end, add `Shopping cart` heading (baby steps) * fake data for editing full cart + show line count in header * add note about core/html using `is-active` class for toggle state * reinstate work-in-progress full cart component (lost in rebase) * reinstate full cart from master * component for full cart title & item count + margin tweaks: - add margin between main cart & sidebar - add margin after cart block * add cart items sample data + factor sample product image to module * use sample cart data for item count * basic table of cart line items (no styling) * prettification * show images for cart line items + initial table styling * cart quantity selector component (work in progress) * use state for cart product quantity, allow incr/decr from UI (WIP) * replace WIP custom quantity control with number edit (temporary) * correctly format cart line item total price * align cart item columns with headings + indent image on desktop * tweak css for cart line item padding on mobile so it's more explicit * show cart line item full price if discounted * add placeholder for cart remove item link * switch cart table to flex layout (was table)… This will allow us to move things around for mobile/responsive layout. * only show cart items table header on desktop * more cart items styling - row borders, appropriate padding + + move image width to variable + fix class name plurality for row (item not items) * use standard $gap instead of 1em for padding/margins * responsive (mobile) layout for cart line items: - shift line $ total to bottom right - stack quantity selector in product info column * remove extraneous cart table padding on mobile * comment about unused styles for quantity selector component * add follow up issue for todo * remove inappropriate href * render srcset & sizes for cart line item product image * remove todo comment * switch back to table markup for cart items (in progress): - table is more semantic, associates headers with columns * cart line items column widths - product column is larger (60%) * reinstate table row borders * bottom-align line item price on mobile * cart contents heading should be H2 + prettify * remove unused QuantitySelector code/styles, rename main class in line with BEM * defaults for QuantitySelector props * variable/property name tidies - match conventions/API * fix bug: line total price is only bottom-align on small screen * move QuantitySelector to root of components, intended to be generally useful * use lineItem directly for cart, specify shape in PropTypes * rename cart components to align with "line item" rather than "product" * rejig class names to better align with new component names & BEM style * show cart item image correct size: - use single column for product image and info, with flex container - specify image width (rem instead of px) * fix safari issue - cart product images displaying vertically stretched * shift product name left margin from image, to account for no-image case * experiment: bump bundlewatch size limit for cart temporarily: - our fake data inline image is heavy - when we switch to real API we will no longer need it * fix issue introduced when moving margin from image to details div: - product details needs margin on left (not right) * fix react props issues: - explicitly destructure image props for srcSet (vs srcset) - use API key field for line item key instead of id, fix duplicate test id - CartLineItemsTable takes an array of lineItems (incorrect PropTypes) * remove redundant divs + use conventional `null` (when no full price) * override editor styles to ensure cart product image is correct size * move cart items editor style override to editor.css * add an explicit readable heading for cart heading to match visual layout
2020-01-09 22:50:14 +00:00
</th>
</tr>
</thead>
<tbody>{ products }</tbody>
</table>
);
};
CartLineItemsTable.propTypes = {
lineItems: PropTypes.arrayOf(
PropTypes.shape( {
key: PropTypes.string.isRequired,
} )
),
isLoading: PropTypes.bool,
Cart block: line-items front end initial work (https://github.com/woocommerce/woocommerce-blocks/pull/1333) * render block on front end, add `Shopping cart` heading (baby steps) * fake data for editing full cart + show line count in header * add note about core/html using `is-active` class for toggle state * reinstate work-in-progress full cart component (lost in rebase) * reinstate full cart from master * component for full cart title & item count + margin tweaks: - add margin between main cart & sidebar - add margin after cart block * add cart items sample data + factor sample product image to module * use sample cart data for item count * basic table of cart line items (no styling) * prettification * show images for cart line items + initial table styling * cart quantity selector component (work in progress) * use state for cart product quantity, allow incr/decr from UI (WIP) * replace WIP custom quantity control with number edit (temporary) * correctly format cart line item total price * align cart item columns with headings + indent image on desktop * tweak css for cart line item padding on mobile so it's more explicit * show cart line item full price if discounted * add placeholder for cart remove item link * switch cart table to flex layout (was table)… This will allow us to move things around for mobile/responsive layout. * only show cart items table header on desktop * more cart items styling - row borders, appropriate padding + + move image width to variable + fix class name plurality for row (item not items) * use standard $gap instead of 1em for padding/margins * responsive (mobile) layout for cart line items: - shift line $ total to bottom right - stack quantity selector in product info column * remove extraneous cart table padding on mobile * comment about unused styles for quantity selector component * add follow up issue for todo * remove inappropriate href * render srcset & sizes for cart line item product image * remove todo comment * switch back to table markup for cart items (in progress): - table is more semantic, associates headers with columns * cart line items column widths - product column is larger (60%) * reinstate table row borders * bottom-align line item price on mobile * cart contents heading should be H2 + prettify * remove unused QuantitySelector code/styles, rename main class in line with BEM * defaults for QuantitySelector props * variable/property name tidies - match conventions/API * fix bug: line total price is only bottom-align on small screen * move QuantitySelector to root of components, intended to be generally useful * use lineItem directly for cart, specify shape in PropTypes * rename cart components to align with "line item" rather than "product" * rejig class names to better align with new component names & BEM style * show cart item image correct size: - use single column for product image and info, with flex container - specify image width (rem instead of px) * fix safari issue - cart product images displaying vertically stretched * shift product name left margin from image, to account for no-image case * experiment: bump bundlewatch size limit for cart temporarily: - our fake data inline image is heavy - when we switch to real API we will no longer need it * fix issue introduced when moving margin from image to details div: - product details needs margin on left (not right) * fix react props issues: - explicitly destructure image props for srcSet (vs srcset) - use API key field for line item key instead of id, fix duplicate test id - CartLineItemsTable takes an array of lineItems (incorrect PropTypes) * remove redundant divs + use conventional `null` (when no full price) * override editor styles to ensure cart product image is correct size * move cart items editor style override to editor.css * add an explicit readable heading for cart heading to match visual layout
2020-01-09 22:50:14 +00:00
};
export default CartLineItemsTable;