Commit Graph

53 Commits

Author SHA1 Message Date
David Levin f97c5b8264 Update input colors and alignment (https://github.com/woocommerce/woocommerce-blocks/pull/3597)
* update input colors for dark and light mode + tweak padding and alignment

* update light input dropdown text color

* Fix lint errors

* Fix  package lock.

* Use input-text-active for select options

* Make sizes responsive in radio control

* Unify border colors of text inputs, checkboxes and radio controls

* Unify radio control sizes in mobile/desktop

Co-authored-by: David Levin <davidlevin@Davids-MacBook-Pro-2.local>
Co-authored-by: budzanowski <bartosz.budzanowski@gmail.com>
Co-authored-by: Albert Juhé Lluveras <contact@albertjuhe.com>
2021-01-12 10:09:47 +01:00
Albert Juhé Lluveras 5d01c8d781 Merge markup from Product Title atomic block and ProductName component (https://github.com/woocommerce/woocommerce-blocks/pull/3562)
* Merge markup from ProductTitle atomic block and ProductName component

* Add test

* Remove duplicate decodeEntities call

* Minor improvements
2020-12-21 14:45:27 +01:00
Bartosz Budzanowski f66aa18e43 Change items organisation on smaller viewports. (https://github.com/woocommerce/woocommerce-blocks/pull/3299)
* Change items organisation on smaller viewports.

* Justify and gap.

* Align cost to quantity.
2020-10-27 15:23:27 +01:00
Albert Juhé Lluveras 8bb217cec6 Show express payment methods in the Cart block (https://github.com/woocommerce/woocommerce-blocks/pull/3004)
* Shown express payment methods in Cart block

* Fixes

* Create usePositionRelativeToViewport hook

* Typo

* Style fixes

* Remove footer push div

* Styling fixes

* Improve code clarity

* Split ExpressCheckoutFormControl into two components

* Rename visibilityObserver to referenceElement

* Replace 'useEffect' with 'useLayoutEffect'

* Add tests for usePositionRelativeToViewport

* Self-closing div

* Add explanatory comment

* Create a shim for IntersectionObserver

* Update express payment components class names

* Add todo comment to remove IntersectionObserver shim when we drop IE11 support
2020-08-20 16:14:12 +02:00
Seghir Nadir 145db3ff5d fix issue with no margins on phone input (https://github.com/woocommerce/woocommerce-blocks/pull/2989)
* fix issue with overlapping margins

* move styles out of select

* remove extra spacing

* remove extra spacing from cart

* move styles to state input and remove extra position.
2020-08-11 10:00:53 +01:00
Albert Juhé Lluveras 2fadea064e Document Cart & Checkout button styles (https://github.com/woocommerce/woocommerce-blocks/pull/2814)
* Reduce specificity of some button styles

* Submit container: make it possible for themes to change the shadow color without the need to rewrite shadow values

* Use background-color instead of background property in docs

* Add docs to style the button and the submit container

* Remove border from button

* Add back state styles to button component

* Docs improvements

* Undo unncessary changes in button component styles

* Add spaces
2020-07-07 11:59:51 +02:00
Albert Juhé Lluveras b74b85dc03 Remove text color from Cart and Checkout blocks (https://github.com/woocommerce/woocommerce-blocks/pull/2745)
* Remove text color from Cart and Checkout blocks

* Fix Cart price column misalignement. woocommerce/woocommerce-blocks#2744
2020-06-23 11:13:53 +01:00
Albert Juhé Lluveras 610e082f9c Update base/components classnames (https://github.com/woocommerce/woocommerce-blocks/pull/2711)
* Update base/components classnames

* Fix class name conflict

* Fix some class names mismatch

* Fix review loading placeholder styles

* Fix docs format

* Update old class name

* Fix price slider regression

* Fix load more button component missing legacy class

* Fix wrong loading mask styles classname

* Remove 'checkout' from 'wc-block-components-checkout-payment-methods__save-card-info' classname

* Make it explicit legacy classes will be removed in the next major version

* Make product variation data styles belong to product metadata

* Improve docs sentence
2020-06-17 11:53:42 +02:00
Albert Juhé Lluveras 40426cbf93 Fix styling issues introduced in woocommerce/woocommerce-blocks#2597 and woocommerce/woocommerce-blocks#2619 (https://github.com/woocommerce/woocommerce-blocks/pull/2652)
* Move order summary styles to component style.scss

* Fix wrong class name in Order summary

* Move express payment methods a little bit higher

* Fix shipping options panel misaligned in the Cart sidebar

* Add right padding to panel button so text doesn't overlap the arrow

* Fix wrong class name in Order summary (II)
2020-06-08 11:28:58 +02:00
Albert Juhé Lluveras 1b51a8e050 Unify Cart headers (https://github.com/woocommerce/woocommerce-blocks/pull/2615)
* Unify Cart headers

* Change Cart title to 'Your cart (x items)'
2020-06-05 16:30:49 +02:00
Albert Juhé Lluveras 77b68795d8 Update Cart & Checkout heading styles (https://github.com/woocommerce/woocommerce-blocks/pull/2597)
* Honor heading styles in Cart and Checkout blocks

* Replace Panel with DisclosureWidget and remove Card

* Remove panel-style from main entry

* Rename DisclosureWidget props

* Simplify TitleTag assign

* Add aria-expanded attribute

* Rename DisclosureWidget to Panel

* Make Panel button clickable area smaller

* Fix specificity issues with Twenty Twenty

* Reset italics in reset-typography mixin

* Make C&C titles font size large

* Add padding to shipping options when in the sidebar
2020-06-05 12:00:19 +02:00
Albert Juhé Lluveras d1685bda7b Use named font sizes instead of values in px (https://github.com/woocommerce/woocommerce-blocks/pull/2533)
* Use named font sizes instead of values in px

* Convert rem mixin to em

* Remove unnecessary line-height

* 'Design' -> 'layout'

* Add comment to magic line-heihgt number

* Update a couple of class names to use BEM

* Use consistent name for SCSS variables

* Fix order summary line heights

* Update docs/contributors/coding-guidelines.md

Co-authored-by: Mike Jolley <mike.jolley@me.com>

Co-authored-by: Mike Jolley <mike.jolley@me.com>
2020-05-29 12:16:33 +02:00
Albert Juhé Lluveras 79359e7056 Fix Cart style discrepancies (editor-frontend) (https://github.com/woocommerce/woocommerce-blocks/pull/2486)
* Fix different heading size of Cart block between frontend and editor

* Increase Cart submit button specificity so styles are applied in the editor

* Ensure buttons don't inherit borders

* Simplify styles

* Create Title component

* Rename 'level' prop to 'headingLevel'
2020-05-25 18:45:38 +02:00
Albert Juhé Lluveras e970e4e86f SCSS mixins cleanup (https://github.com/woocommerce/woocommerce-blocks/pull/2405)
* Cleanup some old mixins

* Make font-size() mixin use parameters with units

* Remove hover-state mixin

* Cleanup mixins file
2020-05-07 10:48:38 +02:00
Albert Juhé Lluveras 30c281c524 Use container queries to load Cart and Checkout responsive styles (https://github.com/woocommerce/woocommerce-blocks/pull/2370)
* Use container queries to load Cart and Checkout responsive styles

* Update package-lock.json

* Make form-step react to container queries instead of media queries

* Make sidebar layout inner padding relative to the full-width

* Make container queries breakpoints smaller
2020-05-05 10:10:02 +02:00
Rua Haszard 7abe9dffb3 align cart main heading and totals sidebar heading: (https://github.com/woocommerce/woocommerce-blocks/pull/2346)
- set appropriate padding for main cart container
- card padding is currently provided by Gutenberg component (?)
- overriding padding on totals card to match main container
2020-04-29 13:35:42 +01:00
Albert Juhé Lluveras 96e8ccf1a4 Cart & Checkout: Update styles to better match designs (https://github.com/woocommerce/woocommerce-blocks/pull/2283)
* Add ending dot to sentence

* Open links to products from Cart and Checkut blocks in new tabs

* Makes sure product names are broken if they overflow the container

* Use native find instead of lodash method

* Update styles to better match designs

* Revert "Open links to products from Cart and Checkut blocks in new tabs"

This reverts commit 9b64aa5f2e81bf0cf09d5640a3cfe1cc1085c046.

* Fix product name overflowing remove menu on mobile

* Remove @todo comments from form step CSS

* Make letter-spacinguse em instead of px

* IE11: Correctly align text in quantity selector

* Fix long product names overflowing in Checkout block on IE11
2020-04-24 13:23:25 +01:00
Albert Juhé Lluveras c035a578a8 Fix currency format in On Sale badge (https://github.com/woocommerce/woocommerce-blocks/pull/2185)
* Fix currency format in On Sale badge

* Add back translators comment

* Use self-closing tag
2020-04-09 18:53:22 +02:00
Mike Jolley 55d0067426 Update previews and editor styles for cart and checkout blocks (https://github.com/woocommerce/woocommerce-blocks/pull/2160)
* Update cart block editor styles to more closely match frontend

* Checkout editor styles

* Add image assets for previews and correct totals

* Add new previews

* Cart Preview

* Checkout preview

* Remove optional chaining
2020-04-08 16:03:39 +01:00
Seghir Nadir 5160d9d794 Disable continue to checkout if Item quantity is being updated and immediately remove items. (https://github.com/woocommerce/woocommerce-blocks/pull/2106)
* disable continue to checkout if item is being removed

* rename isPending and selectors/actions to isPendingDelete

* switch itemPendingDelete params order

* change to watching quantity changes not removal

* yield RECEIVE_REMOVED_ITEM

* update types and add return to select

* update tests

* switch params back

* only delete item after response from server

* update tests

* handle errors and unrelated unmounts

* disable row if is loading
2020-04-07 12:03:22 +01:00
Mike Jolley 3ac335e1f9 Storefront compatibility for sticky proceed to checkout button on mobile (https://github.com/woocommerce/woocommerce-blocks/pull/1999)
* Storefront compatibility

* Remove storefront actions
2020-04-06 07:50:33 -04:00
Albert Juhé Lluveras 72801baf97 Switch 'Try reloading the page' from links to buttons (https://github.com/woocommerce/woocommerce-blocks/pull/2105)
* Switch 'Reload page' from links to buttons

* Rename class to wp-block-link-button

* Remove no longer needed CSS property
2020-04-03 15:22:56 +02:00
Darren Ethier 1648e651b4 Fix build issues for production builds (https://github.com/woocommerce/woocommerce-blocks/pull/2042)
* add payment-methods-demo config to sideEffects and install @wordpress/icons and @wordpress/primitives to be used directly.

* configure dependency extraction to ignore imports we want to use directly

* fix style issues for production builds

It looks like when a style is imported on the entrypoint of a component (or in a file with just exports), it get’s treeshaken from the final build _regardless of exception rules_.

* fix style imports from wordpress components

* fix loading skeleton showing on production builds

* fix block skeleton showing on production builds for cart

* import side effectful code

* add treatment for `@wordpress/warning` too

* fix typo

* exclude `settings/block` from sideEffects

* rollback `wordpress-components` update and keep sideEffects fixes

* remove unnecessary handle handling

Co-authored-by: Seghir Nadir <nadir.seghir@gmail.com>
2020-03-27 16:56:48 -04:00
Albert Juhé Lluveras 361d924c11 Fix layout issues after merges (https://github.com/woocommerce/woocommerce-blocks/pull/1968)
* Fix address form layout broken because select was occupying too much space

* Fix shipping rates appearing in the Checkout sidebar

* Center button text
2020-03-16 14:13:04 +01:00
Albert Juhé Lluveras 5d1d8f0394 Add Order Summary card to Checkout sidebar (https://github.com/woocommerce/woocommerce-blocks/pull/1959)
* Add missing props to sidebar-layout components

* Move specific CSS class to checkout block

* Add comment on top of @wordpress/components styles in webpack entry

* Make it so our styles load after vendor styles

* Remove unnecessary @todo comment

* Add Order Summary card to Checkout sidebar

* Improve responsive layout

* Increase cart.js bundlewatch size

* Remove wrong comment

* Remove unnecessary usage of useStoreCartItemQuantity

* Refactor layout so the product description can occupy more width

* Move paddings to the button so focus styles look better
2020-03-13 16:49:33 +01:00
Mike Jolley 128ac6d63d Refactor cart shipping settings and shipping calculator (https://github.com/woocommerce/woocommerce-blocks/pull/1943)
* Move cart attributes to attributes file

* Stop feedback prompt jumping around; consolodate strings

* Update option labels and descriptions

* Match checkout save function

* hasShippingRate helper

* Refactor full cart/frontend views for shipping calc

* Add hasShippingAddress to useShippingRates hook

* Initial shipping calculator in totals row implementation

* Create cart context

* Update preview data to match API response

* Use context provider for cart

* Provide default cart item for placeholder with correct shape

* Remove outdated shape validation from cartlineitemrow

* Use preview data in editor context

* Tidy up components

* Tests/lint

* Update assets/js/base/components/totals/totals-shipping-item/has-shipping-rate.js

Co-Authored-By: Seghir Nadir <nadir.seghir@gmail.com>

* No need to camel case previewdata

* Use isValidElement

* Implement EditorContext

* Use select if no post is given

Co-authored-by: Seghir Nadir <nadir.seghir@gmail.com>
2020-03-13 13:41:59 +00:00
Albert Juhé Lluveras 2147e8a22a Add checkout sidebar (https://github.com/woocommerce/woocommerce-blocks/pull/1921) 2020-03-12 10:41:35 +01:00
Rua Haszard 14a593a4bb Make checkout button sticky footer on mobile (https://github.com/woocommerce/woocommerce-blocks/pull/1917)
* sticky footer checkout submit button on mobile

* fix storefront footer icons overlaying sticky checkout CTA footer:
- bump z-index of sticky CTA container
- storefront icons have weird z-index due to css opacity

* hide storefront footer on woo cart page only

* remove storefront specific bug fix for sticky cart footer:
- will log this issue separately
2020-03-11 11:27:52 +13:00
Rua Haszard 12f942948e mobile layout fixes for cart totals (https://github.com/woocommerce/woocommerce-blocks/pull/1898)
* tidy cart totals layout on mobile:
- totals column is full width
- reset container (card) borders and padding

* increase specificity of mobile cart styles to ensure skeleton hides after load

* use "not loading" && "not skeleton" approach for more readable mobile style selector
2020-03-10 10:16:03 +13:00
Albert Juhé Lluveras b7da7ad198 Make Shipping packages collapsible in Cart page (https://github.com/woocommerce/woocommerce-blocks/pull/1867)
* Make Shipping packages collapsible in Cart page

* Fix Cart block radio controls not looking properly in the editor

* Simplify CSS
2020-03-09 12:28:26 +01:00
Albert Juhé Lluveras 427a229591 Split Full Cart sidebar totals into several components (https://github.com/woocommerce/woocommerce-blocks/pull/1885) 2020-03-06 12:27:54 +00:00
Mike Jolley 52feba4f85 Add skeleton markup to the cart block (https://github.com/woocommerce/woocommerce-blocks/pull/1866)
* Add skeleton markup

* Add shipping title to skeleton and match styling/spacing

* Combine skeleton and loading styles
2020-03-05 14:15:28 +00:00
Mike Jolley 401f50a607 Tidy cart items mobile layout (https://github.com/woocommerce/woocommerce-blocks/pull/1875)
* add a smaller min-width for cart column on smaller screens

* ensure full price is inline on mobile (when visible)

* ensure line item totals are bottom aligned even if quantity cell is huge

* revert price vertical alignment - in design they are aligned with quantity digit
2020-03-05 13:05:42 +00:00
Mike Jolley c4c31bd926 make product name display block to push stock badge on to its own line (https://github.com/woocommerce/woocommerce-blocks/pull/1874) 2020-03-05 12:56:57 +00:00
Mike Jolley 5fcf9b0fca Correctly handle store tax options in cart block (https://github.com/woocommerce/woocommerce-blocks/pull/1846)
* Correctly show prices with incl or excl taxes

* Move taxes below shipping

* TaxAmount case
2020-03-03 10:12:18 +00:00
Albert Juhé Lluveras 185149f2bd Persist previous shipping rates while loading and show its package name (https://github.com/woocommerce/woocommerce-blocks/pull/1806)
* Persist previous shipping rates while loading

* Refactor ShippingRatesControl LoadingMask

* Show package name

* Simplify CSS to avoid using the adjacent selector

* Add comment to explain why 'selected' is hardcoded in the editor

* Rename package 'index' to 'key'
2020-02-27 19:28:36 +01:00
Mike Jolley 6ac5b8288f Add chip component for coupons in the cart (https://github.com/woocommerce/woocommerce-blocks/pull/1807)
* Chip componet and styling

* Tests

* Move coupon code for API requests to body - fixes issues with coupon codes containing special characters

* Implement chip component in cart page

* Revert "Move coupon code for API requests to body - fixes issues with coupon codes containing special characters"

This reverts commit ac5a72f55d51d939bb989f3936e28cf993af19a6.

* Update comment

* prevent overflow

* Add screen reader text for coupon name

* Adjust icon alignment and padding/hit box

* update string
2020-02-26 17:09:18 +00:00
Mike Jolley eee2d342ae Add loading placeholder for cart block (inital load) (https://github.com/woocommerce/woocommerce-blocks/pull/1819)
* Tidied up source code for line item row and fixed image placeholder support

* Return null if not rendering

* Add is loading state and className to cart block

* Hide title if there are no items

* Add placeholder rows when there are not items and cart is loading

* Pass though isLoading to cart

* Set defaults for cart item rows

* Style the placeholder elements

* Move placeholderRows

* Remove getPriceNumber

* Move decodeEntities

* Split up utils
2020-02-26 15:49:07 +00:00
Rua Haszard 0f57b6fdef show discount badge in line items in cart (https://github.com/woocommerce/woocommerce-blocks/pull/1784)
* calculate regular price for line item and return in API `line_subtotal`

* restore `line_subtotal` api field to previous behaviour

* correctly handle discounts on cart line items:
- return product `prices` in cart items endpoint
- calculate full price and discount on client using product
regular_price * quantity in cart

* add product prices to preview cart API data

* show product sale price discount in "save" badge:
- previously we were displaying any effective discount, e.g. from coupons which apply to whole cart
- now this badge will only display discount due to product on sale - much simpler

* rename sale badge class (discount => sale)

* clarify docs for line_subtotal - includes sale prices, not coupons

* clarify line_total docs

* add prices to schema (fix unit test)

* fix schema unit test - return `prices` as object, consistent with `totals`

* Further line total rewording

Co-authored-by: Mike Jolley <mike.jolley@me.com>
2020-02-25 12:17:13 +00:00
Albert Juhé Lluveras 4a5ad79823 Add style to radio control (https://github.com/woocommerce/woocommerce-blocks/pull/1789) 2020-02-24 13:30:09 +00:00
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