Commit Graph

25 Commits

Author SHA1 Message Date
Gabriel Manussakis c9aa65a22f
[Accessibility] Fix focus order on checkout block page (#49649)
* Render total blocks before fields on checkout

* Reverse checkout total blocks position on desktop

* Add changelog file

* Add conditional styles to reverse checkout blocks order

---------

Co-authored-by: Seghir Nadir <nadir.seghir@gmail.com>
2024-08-20 15:42:38 +02:00
Tarun Vijwani 4e6476a996
Adjust spacing in/between elements on the Cart and Checkout block pages (#44160)
* Add spacing in Checkout block page

* Add spacing in Order summary block

* Update responsive styles for order summary panel

* Update styles for cart and cart line items table

* Update styles for order summary and cross-sells products

* Remove unnecessary CSS styles from cart line items table and cart block

* Remove unused CSS class from cart line items table

* Fix linting errors

* Add changelog

* Fix changelog lint

* Update quantity selector style

* Increase the line-height of the set description and remove margin top from email field

* Add margin-top to order summary image and express payment margin adjustment

* Update styles for cart and checkout components

* Fix linting error

* Fix margin units in cart-cross-sells-products

* Replace em with px

* Add margin-top to payment method container

* Update styles for Cart block for mobile screen

* Update padding in cart style.scss
2024-02-17 01:50:11 +04:00
Dennis Jonda 1add6a146e Fix alignment issue with 'Add Coupon Code' button in WooCommerce Blocks checkout page (https://github.com/woocommerce/woocommerce-blocks/pull/9392)
Co-authored-by: Niels Lange <info@nielslange.de>
2023-05-12 12:28:08 +07:00
Tarun Vijwani e39a27bd74 Add theme-level global styles to Cart and Checkout block (https://github.com/woocommerce/woocommerce-blocks/pull/8809)
* Dummy commit to open a PR

* Revert the last change

* Ensure Checkout block supports the theme-level global styles for `Colors » Buttons` (https://github.com/woocommerce/woocommerce-blocks/pull/8844)

* Add GS support for button colors in Checkout block

* Sync button hover effect with GB

* Fix link margin/padding (https://github.com/woocommerce/woocommerce-blocks/pull/8908)

* Replace <AddToCartButton /> with <ProductButton /> (https://github.com/woocommerce/woocommerce-blocks/pull/8914)

* Add GS support for button typography in Checkout block (https://github.com/woocommerce/woocommerce-blocks/pull/8918)

* Ensure Checkout block supports the theme-level global styles for Typography » Buttons (https://github.com/woocommerce/woocommerce-blocks/pull/8892)

* Remove classname from cart image to avoid conflicts (https://github.com/woocommerce/woocommerce-blocks/pull/8898)

Co-authored-by: Niels Lange <info@nielslange.de>

* Use consistent and semantically correct HTML elements in the Cart and Checkout blocks (https://github.com/woocommerce/woocommerce-blocks/pull/9065)

* Allow button height to adjust

* Ensure to display full width heading background

* Inherit font style and font weight for headings

* Inherit font style and font weight for textarea

* Inherit font family and font weight for buttons

---------

Co-authored-by: Niels Lange <info@nielslange.de>
Co-authored-by: Mike Jolley <mike.jolley@me.com>
2023-04-22 00:11:10 +04:00
Tarun Vijwani 93441e2e52 Add coupon link instead of dropdown in Cart and Checkout blocks (https://github.com/woocommerce/woocommerce-blocks/pull/7993)
* Add coupon link instead of dropdown in Cart and Checkout blocks

* Fix state names used for displaying the link and coupon form

* Fix storybook for coupon block

* Fix unit test for coupon block

* Fix css and accessibility

* Fix coupon block position on Checkout

* Update e2e test cases for coupon block (https://github.com/woocommerce/woocommerce-blocks/pull/8022)

* Update e2e test cases for coupon block

* Fix perfomance test for coupon block

* Fix double await typo

* Fix perfomance test for coupon block

* Remove CSS

* Use classnames to add and remove classes

Improved the code to use classnames to add and remove classes. Also, moved the logic to handle click and submit to separate functions.
2023-01-17 13:10:50 +04:00
Niels Lange 7dfced254a Respect core settings for showing the Checkout block (https://github.com/woocommerce/woocommerce-blocks/pull/7883)
* Respect core settings for showing the Checkout block

* Add account creation option from core to checkout context provider

* Fix TS errors

* Adjust display logic of <LoginPrompt />

* Update assets/js/blocks/checkout/block.tsx

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

* Rename <LoginPrompt> to <MustLoginPrompt>

* Show space between login text and login link

* Fix TS error

Co-authored-by: Mike Jolley <mike.jolley@me.com>
2022-12-19 21:19:52 +07:00
Tomasz Tunik f7f1b89dc5 Upgrade @wordpress/scripts and /env packages (https://github.com/woocommerce/woocommerce-blocks/pull/6114)
* upgrade wordpress/scripts to 22.3

* update jest config/setup

* add explicit-exports-references plugin

to handle payment-method-config.tsx spying on external methods
the way code is output now changed and tests like this would not
work anymore as transpilet files were no longer using exports but
local references to methods.

* missing snapshot

* make cart-products E2E test more stable

* surppress eslint error in test file

* fix css stylelint issues

* update eslint-plugin-woocommerce eslint package

* remove temp test:e2e:start script

* re-run

* add stylelint as recommended extension

* remove redundant types (provided by packages now)

* patch update @testing-library/jest-dom
2022-03-28 15:00:20 +02:00
Niels Lange 9428e791c9 Replace deprecated divisions with math.div($size, $base) (https://github.com/woocommerce/woocommerce-blocks/pull/4550)
* Replace deprecated SASS divisions

* Load '@use "sass:math"' before any other rules
2021-08-24 13:37:43 +02:00
Thomas Roberts 15fdc41e8f Add styles to stop totals items being padded inside panels (https://github.com/woocommerce/woocommerce-blocks/pull/4435)
* Add styles to stop totals items being padded inside panels

* Remove extra linebreak

* Use padding shorthand

* Move style into already established sidebar selector
2021-07-07 13:20:26 +01:00
Thomas Roberts 57c5b0c532 Update design of cart and checkout sidebars (https://github.com/woocommerce/woocommerce-blocks/pull/4180)
* Update cart/coupon/shipping design

* Add order summary heading

* Move and style discounts on checkout sidebar

* Add rate to tax lines

* Ensure the option to display taxes itemised is available to Cart block

* Output individual tax items below the total & add styles for this

* Add success notice under coupon input on successful coupon addition

* Add border to bottom of Totals footer

* Show success message when adding coupon

* Add padding to cart item rows

* Add preview data to cart for when taxes are enabled

* Add rate to cart response type

* Add showRateAfterTaxName attribute to Cart block

* Add control to cart block to show rate percentage after rate name

* Add rate % in cart totals only if option is toggled on

* Pass showRateAfterTaxName attribute down to TotalsTaxes

* Add showRateAfterTaxName to Checkout block

* Add control to block editor for showRateAfterTaxName on Checkout

* Pass showRateAfterTaxName down to TotalsTaxes in Checkout

* Change label for showing tax rates in cart and checkout blocks

* Add test to ensure Taxes section shows in Cart block

* Add tests for cart sidebar and rate percentages

* Remove order summary title from checkout sidebar

* Check if taxes are enabled before rendering the option to show rate %s

* Add ShippingVia component to show the selected rate in sidebar

* Remove value from individual tax rates

* Remove bold from Shipping via label

* Remove coupon added successfully message

* Ensure panel headings that are h2s are the same colour as others

* Clean up eslint warnings

* Show rate %s by default

* Update snapshots following design changes

Co-authored-by: Mike Jolley <mike.jolley@me.com>
2021-05-17 15:00:57 +01:00
Albert Juhé Lluveras b2339bda5d Update Panel component class names to follow guidelines (https://github.com/woocommerce/woocommerce-blocks/pull/3860)
* Rename panel class names to follow correct guidelines

* Remove unused CSS

* Add docs page link
2021-02-17 14:48:53 +01:00
Albert Juhé Lluveras 77119d9a7e Update Cart and Checkout sidebar design (https://github.com/woocommerce/woocommerce-blocks/pull/3797)
* Fix ShippingRatesControl not honoring renderOption prop

* Update order summary design

* Updates TotalsCoupon design

* Update Cart block sidebar title design

* Make values bold and labels regular in Cart and Checkout sidebar

* Update styles of shipping rates selector and radio control

* Remove unnecessary overflow rule in Panel content

* Fix shipping options in Checkout block

* Add some Twenty Twenty One fixes

* Fix saved payment methods display

* Remove top spacing no longer necessary in order summary quantity badge

* turn Totals title to bold

* Move right padding from product name to item description

* Take left margin off list items in product details

This is because in themes where a left margin is applied to li elements, the product detail/addon gets indented and it does not sit flush with the edge of the product details container. Adding this rule to the main wc-block-components-product-details  rule will stop other themes indenting <li>s

Co-authored-by: Seghir Nadir <nadir.seghir@gmail.com>
Co-authored-by: Thomas Roberts <thomas.roberts@automattic.com>
2021-02-09 09:10:45 +01:00
Albert Juhé Lluveras fa593359bf Fix Cart&Checkout layout broken in some themes (https://github.com/woocommerce/woocommerce-blocks/pull/3111) 2020-09-07 17:39:53 +02: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 f46bc68f6e Fix Cart and Checkout sidebar styling issues (https://github.com/woocommerce/woocommerce-blocks/pull/2694)
* Order summary: Add spacing between product name and price name

* Remove border from shipping options in the side bar

* Add a hasBorder prop to Panel

* Checkout Order summary: remove margin product description

* Fix padding when there are multiple packages and remove old code

* Simplify selector

* Add margin botton to no shipping options notice

* Make sure Checkout titles are aligned when there are no express payment methods

* Update step heading margins according to new designs
2020-06-12 14:07:02 +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 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 11981947c5 Add CSS resets for better theme compatibility (https://github.com/woocommerce/woocommerce-blocks/pull/2478) 2020-05-14 11:07:21 +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
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 923eef90ee Fix build styles incosistencies (https://github.com/woocommerce/woocommerce-blocks/pull/2208)
* Prevent select label/value breaking in two lines

* Make sure frontend and base styles are loaded in the same order

* Use link-button mixin for address button

* Refactor shipping rates control CSS to decrease specificity and overwrites

* Refactor sidebar panel CSS to decrease specificity and overwrites

* Fix link-button vertical-align
2020-04-14 13:43:10 +02:00
Albert Juhé Lluveras 8a78371703 Checkout: fix skeleton and responsive styles (https://github.com/woocommerce/woocommerce-blocks/pull/2109) 2020-04-03 14:17:09 +01:00
Albert Juhé Lluveras e6f6dc9915 Cart and Checkout accessibility fixes (https://github.com/woocommerce/woocommerce-blocks/pull/2041)
* Make Product Price component accessible

* Render checkout form step number before the content instead of after

* Announce changes in the Shipping Rates Control results

* Render product name before product price in the Checkout sidebar

* Verify error element id exists before using it in describedBy

* Avoid reading 'Choose a shipping method' if no shipping methods are available

* Hide product image from screen readers if there is no alt text and make link not focusable

* Move Checkout block buttons below the sidebar

* Simplify selector

* Remove ternary to make code easier to understand

* Fix rebase issue

* Fix step number not visible for payment methods
2020-03-30 14:43:42 +02: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
Albert Juhé Lluveras 2147e8a22a Add checkout sidebar (https://github.com/woocommerce/woocommerce-blocks/pull/1921) 2020-03-12 10:41:35 +01:00