Commit Graph

81 Commits

Author SHA1 Message Date
Daniel Dudzic 0a23aca517 Mini Cart: Add an alternative icon setting (https://github.com/woocommerce/woocommerce-blocks/pull/9570)
* Mini Cart: Add an icon setting with 3 alternative icon options. Closes woocommerce/woocommerce-blocks#8556.

* Mini Cart: Fix Mini-cart icons in the toggle setting.

* Minor type fixes.

* Clean up type definitions.

* Move alt icon logic to a separate function.

* Fix cart icons sizes

* Add a negative margin to the mini cart icon
2023-06-12 22:23:52 +02:00
Albert Juhé Lluveras a89a229b37 Prevent Mini-Cart table to show horizontal scrollbar (https://github.com/woocommerce/woocommerce-blocks/pull/9676) 2023-06-09 10:48:23 +02:00
Roy Ho 8e94500136 Use correct SVG for RTL display (https://github.com/woocommerce/woocommerce-blocks/pull/9756) 2023-06-08 11:29:34 -07:00
Roy Ho 5a5d5d315a Make mini cart icon RTL on RTL sites in editor (https://github.com/woocommerce/woocommerce-blocks/pull/9707)
* Make mini cart icon RTL on RTL sites in editor

* Use BEM convention
2023-06-05 06:36:57 -07:00
Roy Ho a67948d7e1 Ensure aria-label is showing correct value based on setting (https://github.com/woocommerce/woocommerce-blocks/pull/9672)
* Ensure aria-label is showing correct value based on setting

* Reuse same format code
2023-06-01 05:41:43 -07:00
Albert Juhé Lluveras 73ffb371d2 Fix colors not being applied to Mini-Cart Proceed to Checkout Button in the editor (https://github.com/woocommerce/woocommerce-blocks/pull/9661) 2023-05-31 13:58:20 +02:00
Roy Ho 5f5a0d4b54 Stack cart and checkout buttons on smaller screens (https://github.com/woocommerce/woocommerce-blocks/pull/9603) 2023-05-30 13:07:30 -07:00
Albert Juhé Lluveras bc34d9faaf Prevent horizontal shift when opening the Mini-Cart drawer if scrollbars are visible (https://github.com/woocommerce/woocommerce-blocks/pull/9648)
* Fix wrong TS name

* Prevent page horizontal shift when opening the Mini-Cart drawer when scrollbars are visible
2023-05-30 17:09:11 +02:00
Albert Juhé Lluveras c267504bd6 Use a portal to render the Drawer close button to fix the alignment with the Mini-Cart Contents block (https://github.com/woocommerce/woocommerce-blocks/pull/9507) 2023-05-30 15:39:19 +02:00
Albert Juhé Lluveras 27e3a9a3cc Fix invisible Mini-Cart badge in themes without <body> background (https://github.com/woocommerce/woocommerce-blocks/pull/9601) 2023-05-30 10:36:29 +02:00
Albert Juhé Lluveras a04c00a79f Make Mini-Cart block work well with caching plugins (https://github.com/woocommerce/woocommerce-blocks/pull/9493)
* Make Mini-Cart block work well with caching plugins

* Add tests

* Add back aria-label to Mini-Cart menu

* Fetch Mini-Cart data before page finishes loading

* Store and retrieve Mini-Cart values from localStorage for better performance

* Update styles as early as possible

* Reorder code

* Remove overrideTotals param from updateTotals() function

* Update tests

* Initialize local storage inside a function and add act to filter tests

* Replace void with undefined types in several funtions

* Fix 0 quantity badge appearing on page load
2023-05-23 09:28:40 +02:00
Albert Juhé Lluveras b0af5ac12e Update Mini-Cart block logic to use isSiteEditorPage util (https://github.com/woocommerce/woocommerce-blocks/pull/9501)
* Revert "Mini-Cart: prevent 'Mini-Cart in cart and checkout pages' toggle from showing up in the post/page editor (https://github.com/woocommerce/woocommerce-blocks/pull/9442)"

This reverts commit 0bfc1b341e.

* Update Mini-Cart block logic to use isSiteEditorPage util
2023-05-18 15:53:01 +02:00
Albert Juhé Lluveras 3b28b74777 Mini Cart: stop using Modal component (https://github.com/woocommerce/woocommerce-blocks/pull/9345)
* Remove unused styles

* Replace usage of Modal component with custom Drawer

* Update MiniCart.php class structure

* Update tests

* Prevent focus styles to appear unnecessarily when opening the Mini Cart drawer

* Work-around issue with disabled buttons causing lose of focus inside the Mini-Cart drawer

* Revert "Work-around issue with disabled buttons causing lose of focus inside the Mini-Cart drawer"

This reverts commit 4360f77384ad1f1d90a3ba8a0385ad79da2449f2.

* QuantitySelector: focus text input field after decrease or increase button become disabled

* Move focus to the input field also when the body has focus, that fixes the issue in Chrome

* Add explanatory comment
2023-05-16 10:41:26 +02:00
Mike Jolley 43eaed7620 Experiment: Replace style hooks coming from `@wordpress/block-editor` (https://github.com/woocommerce/woocommerce-blocks/pull/9251)
* Replace all style hooks with useStyleProps hook

* Remove border/color/spacing hooks

* Style Props Hook

* Make use of `change-case` package

* Tidy up block wrappers

* Attribute filter does not use frontend.ts nor styles within block

* Remove frontend from filter blocks and unused styleprops usage

* Tidy up variable names so its clearer attributes are not required specifically from blocks

* Update assets/js/blocks/mini-cart/mini-cart-contents/inner-blocks/mini-cart-title-label-block/block.tsx

Co-authored-by: Albert Juhé Lluveras <contact@albertjuhe.com>

* Update assets/js/blocks/attribute-filter/block-wrapper.tsx

Co-authored-by: Albert Juhé Lluveras <contact@albertjuhe.com>

* Update assets/js/blocks/active-filters/block-wrapper.tsx

Co-authored-by: Albert Juhé Lluveras <contact@albertjuhe.com>

* Update assets/js/blocks/mini-cart/mini-cart-contents/inner-blocks/mini-cart-checkout-button-block/block.tsx

Co-authored-by: Tom Cafferkey <tjcafferkey@gmail.com>

* Update assets/js/blocks/rating-filter/block-wrapper.tsx

Co-authored-by: Tom Cafferkey <tjcafferkey@gmail.com>

* Update assets/js/blocks/stock-filter/block-wrapper.tsx

Co-authored-by: Tom Cafferkey <tjcafferkey@gmail.com>

* Update assets/js/blocks/price-filter/block-wrapper.tsx

Co-authored-by: Tom Cafferkey <tjcafferkey@gmail.com>

* Update assets/js/blocks/mini-cart/mini-cart-contents/inner-blocks/mini-cart-cart-button-block/block.tsx

Co-authored-by: Tom Cafferkey <tjcafferkey@gmail.com>

* Simplify styleprop

* Styleprops simplify

* Fix withFeaturedItem styles

* Like the original hook, flatten props and combine with parsed styles

---------

Co-authored-by: Albert Juhé Lluveras <contact@albertjuhe.com>
Co-authored-by: Tom Cafferkey <tjcafferkey@gmail.com>
2023-05-12 13:42:16 +01:00
Albert Juhé Lluveras 0bfc1b341e Mini-Cart: prevent 'Mini-Cart in cart and checkout pages' toggle from showing up in the post/page editor (https://github.com/woocommerce/woocommerce-blocks/pull/9442) 2023-05-12 10:26:03 +02:00
Albert Juhé Lluveras d236af2a8c Only show the Mini Cart count badge when there are items in the cart (https://github.com/woocommerce/woocommerce-blocks/pull/9259)
* Only show the Mini Cart count badge when there are items in the cart

* Update badge to new design

* Add tests

* Make sure colors don't break existing themes

* Update Mini Cart e2e test
2023-05-11 17:23:36 +02:00
Albert Juhé Lluveras 2b6eef516b Update Mini-Cart block editor sidebar (https://github.com/woocommerce/woocommerce-blocks/pull/9420)
* Update Mini-Cart block editor sidebar

* Rename Mini Cart block to Mini-Cart

* Update Mini-Cart block editor sidebar (II)

* Update two instances of mini-cart to uppercase
2023-05-11 14:52:03 +02:00
Danilo Parra Jr 4c204ab578 Add color and typography styles on the mini cart title block (https://github.com/woocommerce/woocommerce-blocks/pull/9382)
* feat: added color and typography supports on the mini cart title block

* refactor: remove background support for mini cart title block
2023-05-08 13:52:25 +02:00
Albert Juhé Lluveras 349ae658bb Mini Cart drawer: print width in PHP (https://github.com/woocommerce/woocommerce-blocks/pull/9329)
* Mini Cart drawer: print width in PHP

* Remove unnecessary timeout

* Make sure classic themes have a Mini Cart contents width value set up
2023-05-05 11:44:41 +02:00
Albert Juhé Lluveras 4534beaa91 Fix Mini Cart block not respecting Add-to-Cart behaviour attribute when adding the first product (https://github.com/woocommerce/woocommerce-blocks/pull/9257) 2023-05-03 09:49:43 +02:00
Mike Jolley 2d506f9f57 Fix/you do not need lodash (https://github.com/woocommerce/woocommerce-blocks/pull/9161)
* Remove lodash `without` usage

* isNumber

* Remove lodash `difference`

* Replace lodash isEmpty with type guard

* Replace isObject with type guard

* remove lodash noop

* Replace lodash clamp

* replace lodash uniqueId

* Remove uniqueId import

* Add eslint rule to restrict lodash import

* Replace lodash range

* Replace lodash has() function

Replace lodash has

* replace omitby

* Replace lodash isEqual with fastDeepEqual

* Replace kebabCase with change-case package

* Replace lodash camelCase

Replace lodash mapKeys with function

Move mapkeys to utility

Create camelCaseKeys which replaces usage of mapKeys

* Replace lodash debounce with custom utiity

* replace lodash keyby

* Replace lodash pick with native function

* Replace lodash cloneDeep with klona

* Replace snake case keys package with change case

* Replace sortBy with fast sort package

* replace isEmpty with type guard

* Replace pickBy usage in validation reducer

* Replace groupBy usage in search list control

* Replace flatten, uniqBy usage in getProducts()

* Remove setWith and clone from updateState

* Replace custom useThrottle with useThrottledCallback from use-debounce package

* onSelectRate can use-debounce

* Fix missing flatten

* Update assets/js/data/cart/test/push-changes.ts

Co-authored-by: Paulo Arromba <17236129+wavvves@users.noreply.github.com>

---------

Co-authored-by: Paulo Arromba <17236129+wavvves@users.noreply.github.com>
2023-04-28 11:29:45 +01:00
Albert Juhé Lluveras 0dae33e4b9 Use currentColor for Mini Cart footer border (https://github.com/woocommerce/woocommerce-blocks/pull/9245) 2023-04-26 16:59:35 +02:00
Albert Juhé Lluveras cb8040f7b0 Mini Cart Contents block: fix wide width not being applied in the editor (https://github.com/woocommerce/woocommerce-blocks/pull/9201) 2023-04-26 12:16:43 +02:00
Albert Juhé Lluveras 96bd0432cd Mini Cart Contents block: set minimum width (https://github.com/woocommerce/woocommerce-blocks/pull/9196)
* Mini Cart Contents block: set minimum width

* Mini Cart Contents block: allow changing the width only in the feature plugin

* Allow resetting the Mini Cart Contents width to the default

* Update assets/js/blocks/mini-cart/mini-cart-contents/edit.tsx

Co-authored-by: Karol Manijak <karol.manijak@automattic.com>

---------

Co-authored-by: Karol Manijak <karol.manijak@automattic.com>
2023-04-25 18:54:35 +02:00
Siddharth Thevaril 50f08e6143 fix/8946: replace ToggleGroupControl with ToggleControl (https://github.com/woocommerce/woocommerce-blocks/pull/9098)
* replace ToggleGroupControl with ToggleControl

* eslint fix

* Fix linting in assets/js/mini-cart/edit.tsx file

---------

Co-authored-by: Niels Lange <info@nielslange.de>
Co-authored-by: Karol Manijak <karol.manijak@automattic.com>
2023-04-19 17:45:48 +02:00
Albert Juhé Lluveras 779e13af15 Fix JS error visible in the editor caused by Mini Cart Contents buttons (https://github.com/woocommerce/woocommerce-blocks/pull/9039) 2023-04-14 16:53:39 +02:00
Albert Juhé Lluveras c63923e2fb Display Mini Cart overlay in template part editor (https://github.com/woocommerce/woocommerce-blocks/pull/9014) 2023-04-14 10:44:09 +02:00
Alba Rincón b6039d1d74 Mini cart: allow changing the drawer width (https://github.com/woocommerce/woocommerce-blocks/pull/8930)
* WIP

* Add width control to the settings sidebar

* Fix linting errors

* Remove comments

* Inline function

* Fix issue with smaller viewports

* Remove unnecessary code
2023-04-14 09:48:55 +02:00
Alba Rincón 709a7a9add [Mini cart] Make the title customizable (https://github.com/woocommerce/woocommerce-blocks/pull/8905)
* Create the counter block and the header pattern

* Change the pattern to an inner block

* Allow customizing item counter block

* Rename block

* Allow removing the items counter block

* Add padding controls

* Preload new blocks

* Add title block back from the inserter

* Move h2 tag to the parent title

* Align items at the bottom

* Unify styles

* Add title class in the editor

* Prevent removing title blocks

* Disallow unlocking and inserter

* Disallowing moving blocks
2023-04-14 09:21:21 +02:00
Alexandre Lara 0ad16b2686 Add $schema property to block.json files (https://github.com/woocommerce/woocommerce-blocks/pull/8877)
This adds the $schema property to all block.json files. This is required for the block.json files to be valid according to the JSON schema. I noticed that this property was not set for some of the block.json files.
2023-03-27 17:26:46 -03:00
Alba Rincón 91eb482e17 Mini-cart buttons: add explanation regarding why we need to check for children (https://github.com/woocommerce/woocommerce-blocks/pull/8847)
* Add comment explanation regarding the children buttons

* Update comment

Co-authored-by: Albert Juhé Lluveras <contact@albertjuhe.com>

---------

Co-authored-by: Albert Juhé Lluveras <contact@albertjuhe.com>
2023-03-24 16:25:09 +01:00
Alba Rincón aa601fe102 Mini-cart: add the option to change the style between 'Outline' and 'Fill' in all the buttons (https://github.com/woocommerce/woocommerce-blocks/pull/8835)
* Render inner buttons on the frontend

* Add deprecation to the buttons

* Fix lint and inline save

* Remove commented out code and fix condition

* Change migrate condition

* Add styles outline and fill styles to cart and checkout buttons

* Add fill and outline styles to the start shopping button

* Refactor variants

* Remove imports

* Add classname default value

---------

Co-authored-by: Manish Menaria <the.manish.menaria@gmail.com>
2023-03-24 10:14:06 +01:00
Alba Rincón 2d9519b3ba Add style to the `Mini Cart` buttons (https://github.com/woocommerce/woocommerce-blocks/pull/8776)
* Create new car button inner block

* Create new checkout button inner block

* Render inner buttons on the frontend

* Fix buttons size

* Add outline to the cart button

* Add color props

* Add urls

* Fix button classes

* Add classes to edit

* Start using editable button

* Add buttons to mini cart tempalte

* Reorder buttons in template

* Add cart & checkout buttons scripts

* Remove unnecessary divs

* Change checkout button block name

* Change cart button block name

* Add deprecation to the buttons

* Fix lint and inline save

* Remove commented out code and fix condition

* Render buttons if no children

* Change migrate condition

* Simplify condition

Co-authored-by: Albert Juhé Lluveras <contact@albertjuhe.com>

* Make props optional

* Add missing import

---------

Co-authored-by: Albert Juhé Lluveras <contact@albertjuhe.com>
2023-03-23 16:55:53 +01:00
Albert Juhé Lluveras 5235f6c392 Allow themes to remove the Mini Cart title on overridden template parts (https://github.com/woocommerce/woocommerce-blocks/pull/8779)
* Allow themes to remove the Mini Cart title on overridden template parts

* Remove unused file
2023-03-22 08:23:52 +01:00
Albert Juhé Lluveras ec19838355 Fix issue that prevented spaces being added to Mini Cart, Cart and Checkout buttons (https://github.com/woocommerce/woocommerce-blocks/pull/8777)
* Fix issue that prevented spaces being added to Mini Cart, Cart and Checkout buttons

* Fix a couple of comments
2023-03-17 13:26:34 +01:00
Alba Rincón dca03c3323 Add styles to the `Start shopping` button (https://github.com/woocommerce/woocommerce-blocks/pull/8766) 2023-03-16 14:57:54 +01:00
Alba Rincón d4fe2a5b5d Mini-cart: add setting to not render the block on the cart & checkout pages (https://github.com/woocommerce/woocommerce-blocks/pull/8700)
* Add `renderInCartAndCheckout` attribute and toggle

* Show setting only when inserted in a template

* Don't render the mini-cart if the setting is disabled

* Stop rendering the mini-cart if the setting is false

* method to snakecase

* Make the attribute a string

In the future we may want to add more rendering styles, so a boolean wasn't the
best option, a string will allowed us more than two options

* Change toggle copy
2023-03-14 15:59:46 +01:00
Albert Juhé Lluveras b64a6b8a5e Add spacing below Mini Cart title (https://github.com/woocommerce/woocommerce-blocks/pull/8676) 2023-03-14 09:42:53 +01:00
Albert Juhé Lluveras 705c0937a2 Remove wc-settings from Mini Cart block dependencies (https://github.com/woocommerce/woocommerce-blocks/pull/8703) 2023-03-10 13:36:20 +01:00
Alba Rincón 98f5f67ed1 Add border support to mini cart contents (https://github.com/woocommerce/woocommerce-blocks/pull/8654)
* Add border support to mini cart contents

* Fix buttons in firefox when logged out

* Fix mini cart in all browsers

* Fix border not visible on mobile because of the admin bar

* Add feature flag to the experimental border

---------

Co-authored-by: Albert Juhé Lluveras <contact@albertjuhe.com>
2023-03-10 09:25:24 +01:00
Albert Juhé Lluveras f65a1afe15 Mini Cart drawer close button: inherit text color and improve alignment (https://github.com/woocommerce/woocommerce-blocks/pull/8605)
* Make Mini Cart drawer close button inherit the color

* Fix Mini Cart drawer close button alignment

* Increase opacity when Mini Cart drawer close icon is hover, focused or active
2023-03-09 09:28:55 +01:00
Albert Juhé Lluveras 6d821202ee Move CartLineItemsTable from the Cart block directory to base-components (https://github.com/woocommerce/woocommerce-blocks/pull/8644) 2023-03-08 10:14:20 +01:00
Alba Rincón 7245ca519e Make the start shopping button show the theme style (https://github.com/woocommerce/woocommerce-blocks/pull/8567)
* Make the start shopping button show the theme style

* Center the button

* Fix test
2023-03-03 10:55:28 +01:00
Albert Juhé Lluveras 1d0adeed28 Replace react imports with wordpress/element (https://github.com/woocommerce/woocommerce-blocks/pull/8520)
* Replace react imports with wordpress/element

* Fix TS errors

* Update a couple of React type imports
2023-03-02 15:26:00 +01:00
Alba Rincón 363fe84039 Switch Select by Toggle for the 'Add-to-Cart behaviour' (https://github.com/woocommerce/woocommerce-blocks/pull/8558) 2023-03-02 15:09:37 +01:00
Alba Rincón 8ff958a0e2 Remove colorClassName and style from QuantityBadge (https://github.com/woocommerce/woocommerce-blocks/pull/8557) 2023-03-02 15:08:09 +01:00
Albert Juhé Lluveras 4b82793b33 Fix Mini Cart missing translations (https://github.com/woocommerce/woocommerce-blocks/pull/8591) 2023-03-02 11:16:32 +01:00
Roy Ho b9044a72df Add explicit CSS styling to mini-cart block amount in inserter preview (https://github.com/woocommerce/woocommerce-blocks/pull/8516)
* Add explicit CSS styling to mini-cart block amount in inserter preview

* Add preview specific class name

* Fix formatting
2023-02-28 09:40:06 -08:00
Albert Juhé Lluveras b67eed1ace Add minimum height to Mini Cart Contents block in the Style Book (https://github.com/woocommerce/woocommerce-blocks/pull/8458) 2023-02-17 11:45:42 +01:00
Daniel W. Robert 376bbc8993 Mini Cart block - Fix the drawer content height to allow checkout button to show. (https://github.com/woocommerce/woocommerce-blocks/pull/8351)
* Add max-height to Mini Cart drawer.

By giving the Mini Cart contents a max height with the
-webkit-fill-available property, we can ensure that the browser chrome
is accounted for on mobile devices.

* Add `dvh` and keep `vh` as a fallback for height.

By adding `dvh`, we also account for non-webkit mobile browsers that
have the same hidden button issue.

See
https://github.com/woocommerce/woocommerce-blocks/pull/8351#pullrequestreview-1278867767

Keeping `vh` as a fallback, along with `-webkit-fill-available` gives us
the widest range of support.
2023-02-01 11:48:37 -05:00