Commit Graph

13 Commits

Author SHA1 Message Date
Mike Jolley 454bb07eda Add permalink to line items (https://github.com/woocommerce/woocommerce-blocks/pull/1791) 2020-02-24 12:39:43 +00:00
Albert Juhé Lluveras 6736a9d94a Add ShippingCalculator component (https://github.com/woocommerce/woocommerce-blocks/pull/1559)
* Create ShippingCalculatorAddress block

* Make 'change address' button to open/close the address form

* Create ShippingCalculator component

* Use CountryInput and CountyInput instead of TextInputs

* Fix city value not being set

* Fix shipping rate not appearing when there was only one option

* Unify postalCode and postCode to postcode

* Rename 'county' to 'state'

* Add reset styles for popular themes

* Increase cart-frontend.js max size
2020-02-17 12:12:15 +01:00
Albert Juhé Lluveras a30615e2cb Hook up shipping methods to API (https://github.com/woocommerce/woocommerce-blocks/pull/1468)
* Create ShippingMethodsControl component

* Hook up shipping methods to API

* Add support for several packages

* Add tests to useShippingRates

* Fix shipping_rates property name

* Only show the products list if there are several packages

* Use <FormattedMonetaryAmount> to display shipping rate prices

* Make 'country' optional in CartShippingRates

* Make CartShippingRate API return currency info

* Minor improvements

* Fix shipping fields hidden in editor

* Fix missing currency in Checkout shipping rates selector

* Add links to issues in @todo comments

* Improve ShippingRatesControl useEffect

* Remove unnecessary tab

* Remove unnecessary id in RadioControl

* API: Add error when country is invalid

* Debounce shipping rates API requests

* 'Country key' -> 'Country code'

* Don't display radio input when there is only one option

* Add message when there are no results

* Minor enhacements

* Remove unnecessary Fragment

* Simplify RadioControlOption export

* Refactor 'renderOptions' and split it into several components

* Prevent Card sidebar from taking too much width

* Move country request check outside of the loop

* Fix failing test
2020-02-14 04:43:13 +01:00
Mike Jolley 69a509f184 Improved cart styling for desktop and mobile (https://github.com/woocommerce/woocommerce-blocks/pull/1587)
* Style mobile qty selector

* Add dedicated column for image and remove duplicate elements

* Tweak column headers

* Refactor cart styles to use CSS grid, and use nesting for organisation

* adjust column widths

* Remove unused div

* Fix wrapping and flexbox styles

* Add decodeEntities to alt attribute

* Use % basis

* Tweak min widths
2020-01-20 16:43:22 +00:00
Rua Haszard eaa6b42d89 UI for removing cart items (not including hooking up to API) (https://github.com/woocommerce/woocommerce-blocks/pull/1579)
* correct typography styles for remove link (based on design)

* add trashcan icon from material icons, for removing cart items on mobile

* add & style trash icon for remove cart item on mobile

* a11y - use darker grey for trashcan icon button to improve contrast

* rename IconDelete -> IconTrash

* remove unnecessary div

* use <button> for remove action buttons + add link-button scss mixin

* fix editor styles for cart line items - total column should be right-aligned

* fix various visual issues with cart line items table in editor:
- rows should align hard left and right (first/last child no padding)
- totals should be align-bottom on small screen
- correct vertical padding on column headings
- re-add row border separator lines
2020-01-17 13:46:56 +00:00
Mike Jolley 86b8b7779c Add Quantity selector component for cart line items (https://github.com/woocommerce/woocommerce-blocks/pull/1558)
* Implement quantity selector component

* Improve default appearance

* Remove underline

* Add aria speak

* Improved keycode handling

* Add focus styles to buttons and inputs

* Increase constrast
2020-01-15 11:32:54 +00:00
Rua Haszard 5c85ee23cf follow up fixes on cart low stock warning badge (https://github.com/woocommerce/woocommerce-blocks/pull/1564)
* rename low stock prop inside lineitem to avoid unnecessary renders

* remove unnecessary span in low stock warning badge
2020-01-15 12:54:32 +13:00
Rua Haszard 86dca691e5 show discount on cart line items & price styling (https://github.com/woocommerce/woocommerce-blocks/pull/1548)
* show discount on cart line items (no styling)

* style line item discount badge + use correct colors for prices

* show full price inline on mobile

* move all responsive tweaks for cart prices to explicit breakpoints

* add nowrap to FormattedMoneyAmount so prices don't ever wrap

* fix misaligned full price on mobile when prices are large (edge case):
- if price strings are long, the full price stacks above line total
- previous right-margin on full price showed prices misaligned

* allow client code to add class(es) to FormattedMonetaryAmount

* add nowrap so discount badge doesn't wrap

* remove unnecessary span from discount badge +
+ more explicit `display` style for different price column elements
2020-01-15 09:52:42 +13:00
Rua Haszard b9bfef0ba4 show low stock warning badge on cart line items (incl fake test data) (https://github.com/woocommerce/woocommerce-blocks/pull/1557) 2020-01-15 09:50:32 +13:00
Rua Haszard f23dee503f show product details in cart line items: attributes (variations), product short description (https://github.com/woocommerce/woocommerce-blocks/pull/1549)
* show product variation attributes in cart line item + styling:
+ adjust font sizes & colors to match design

* show product description in cart line items…
- this commit also adds descriptions to test cart-items data
- note API does not currently return description/excerpt

* add a class to product attributes to allow custom styling
2020-01-14 12:07:52 +13:00
Albert Juhé Lluveras bd2b8cb279 Add Cart totals to Cart block (https://github.com/woocommerce/woocommerce-blocks/pull/1411)
* Add Cart totals to Cart block

* Accessibility improvements

* Load vendors styles separately

* Use same shipping placeholders for cart and checkout

* Refactor how we import @wordpress/components styles so only panel styles are imported

* Remove style-loader from vendors styles build process

* Add htmlFor attribute to TotalsCouponCodeInput

* Update totalItems shape to match API

* Fix wrong total items shape using numbers instead of strings

* Rename wc-blocks classes to wc-block

* Remove unnecessary parseInt()

* Add radix to parseInt()

* Rename totalRows to totalRowsConfig

* Move placeholder content out of the component

* Use Card component for cart's sidebar (https://github.com/woocommerce/woocommerce-blocks/pull/1423)

* Use Card component for cart's sidebar

* Split RadioControl component

* No need to use Label in RadioControlOption

* Remove no longer valid @todo comment

* Use 'checked' prop instead of 'selected' in RadioControlOption

* Rename wc-blocks classes to wc-block

* Rename wc-blocks classes to wc-block (II)

* Make sure radio control ids are unique using withComponentId

* Load PanelBody and PanelRow from last version of @wordpress/components

* Create vendors-frontend.js file

* Load wordpress-component instead of @wordpress/components from <Button> component

* Only load 'withRestApiHydration' HOC

* Make vendors-frontend a dependency of cart-frontend script

* Revert "Only load 'withRestApiHydration' HOC"

This reverts commit 9f9b9759a98047b26e7d8f04189ffe78c1d5bb06.

* Fix fieldset background
2020-01-10 15:37:27 +01:00
Rua Haszard 0763655d42 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-10 11:50:14 +13:00
Albert Juhé Lluveras 810341d084 Add Cart block checkout button (https://github.com/woocommerce/woocommerce-blocks/pull/1366) 2019-12-12 20:46:56 +01:00