Commit Graph

201 Commits

Author SHA1 Message Date
Mike Jolley b569f53083 Add and/or labelling to active filters block (https://github.com/woocommerce/woocommerce-blocks/pull/1630)
* Add And/or labelling

* Revised design

* Update assets/js/blocks/active-filters/utils.js

Co-Authored-By: Albert Juhé Lluveras <aljullu@gmail.com>

* Add prefix so name is not changed - fixes duplicate items

* Update BEM css classes

* Update styling to handle nested lists

* Remove extra padding within chips

Co-authored-by: Albert Juhé Lluveras <aljullu@gmail.com>
2020-01-31 10:15:22 +00:00
Albert Juhé Lluveras c8f297a700 All Products & filters accessibility improvements (https://github.com/woocommerce/woocommerce-blocks/pull/1656)
* Add aria-label to All Products ratings

* Add specific screen reader text to some buttons

* Increase All Products regular price color constrast

* Remove invalid CSS declaration

* Make styleint-disable comment more specific

* Attributes Filter: make input non-focusable if we display the 'change filter' button

* Improve translator documentation

* Hide price slider from screen readers if price inputs are enabled

* Linting fixes

* Price slider: make it non-focusable if input fields are displayed

* All Products: announce how many products were found

* All Products: announce when a filter is removed

* Revert "All Products: announce when a filter is removed"

This reverts commit 2c861bf1b988155313ad44bafbcaf3f4f1549296.

* Pagination component: improve screen reader texts

* Filter submit button: improve screen reader texts

* Remove unnecessary text

* Improve comment

* Use %d for numeric values

* Add label and screenReaderLabel props to FilterSubmitButton component
2020-01-30 11:04:39 +01:00
Albert Juhé Lluveras aa4bc302a5 Replace three dots with an ellipsis in Product Search placeholder (https://github.com/woocommerce/woocommerce-blocks/pull/1672) 2020-01-30 10:28:17 +01:00
Albert Juhé Lluveras 069b42dc39 Make 'Add order notes?' string localizable (https://github.com/woocommerce/woocommerce-blocks/pull/1629) 2020-01-22 21:35:29 +01:00
Mike Jolley d1737e76c2 Change default rows for product grid blocks to 3 (https://github.com/woocommerce/woocommerce-blocks/pull/1613)
* Change default rows to 3

* Handle all products rows change via deprecation

* Prevent errors if object is undefined

* HOC to set default attribute values

* Separate default attributes from attribute definitions

* Filters to set defaults

* Fix deprecation so attributes are not reordered

* Move flters to index file and limit which blocks are affected

* Fix object assign

* Use typeof for undefined checks

* Move hoc to filter file so it has context

* Fix up comment

* Avoid mutating props

* Prevent multiple `attributes` by cloning props

* Force attributes to be saved to HTML in a specific order, and handle migration

* useEffect to set attributes and avoid prop mutation

* Switch to class component
2020-01-22 16:58:25 +00: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
Mike Jolley 8b28a77f01 Consistent HTML entities in Store API (https://github.com/woocommerce/woocommerce-blocks/pull/1597)
* Wrap HTML responses with helper method

* Remove unused get_attribute_taxonomy_name method

* Create prepare_html_response method

* Decode product and attribute names

* Check is_scalar to leave objects alone
2020-01-19 19:19:59 -05:00
Rua Haszard d7be99b520 fix issue when user re-selects same attr when setting up filter block: (https://github.com/woocommerce/woocommerce-blocks/pull/1596)
- exit early if there's no selected attr passed in
2020-01-20 07:58:26 +13:00
Albert Juhé Lluveras cad3e72769 Create CountryInput component (https://github.com/woocommerce/woocommerce-blocks/pull/1585)
* Create initial CountryInput component

* Create ShippingCountryInput

* Create BillingCountryInput

* Make backgrounds white

* Correctly align options

* Add CSS resets for 20xy themes

* Fix wrong defaults in countries constants

* Make CountryInput respect 'prefers-reduced-motion'

* Reverse prefers-reduced-motion check

* Set max-width to CountryInput dropdown

* Use decodeEntities to print country names

* Avoid unnecessary JSON enconding and later parsing

* Make sure country name is also encoded when selected

* Fix countries default value
2020-01-17 17:58:08 +01: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
Seghir Nadir 4a8c57fbe1 Focus on Full Cart mode after inserting (https://github.com/woocommerce/woocommerce-blocks/pull/1582)
* focus on the cart main block
2020-01-17 13:23:33 +01:00
Mike Jolley 0e752e9e0d Introduce view switcher component for the cart block (https://github.com/woocommerce/woocommerce-blocks/pull/1576)
* View switcher on cart block

* Dedicated component and styling

* Views and selected should be required

* Rename to ViewSwitcher

* Implement views via render prop

* Remove defaults for required props
2020-01-16 14:50:48 +00:00
Albert Juhé Lluveras 3f0368e63b Checkout: Fix city input field showing country value (II) (https://github.com/woocommerce/woocommerce-blocks/pull/1580) 2020-01-16 12:31:00 +01: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
Albert Juhé Lluveras 1dfcb18a90 Make TextInput id optional (https://github.com/woocommerce/woocommerce-blocks/pull/1560) 2020-01-14 20:10:50 +01: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
Mike Jolley 5926a56602 Add Empty Placeholder for the on-sale product block (https://github.com/woocommerce/woocommerce-blocks/pull/1519)
* Add EmptyResponsePlaceholder for on sale block

* Linting

* Address feedback
2020-01-10 14:40:15 +00: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
Albert Juhé Lluveras 016b6b97ec Rename wc-blocks to wc-block classname prefix (https://github.com/woocommerce/woocommerce-blocks/pull/1541) 2020-01-10 10:42:53 +01:00
Albert Juhé Lluveras aa1d8e3e56 Fix Attribute Filter not reacting to query changes (https://github.com/woocommerce/woocommerce-blocks/pull/1540) 2020-01-10 10:42:37 +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 4be59b5ad1 Add ESLint radix rule (https://github.com/woocommerce/woocommerce-blocks/pull/1512) 2020-01-08 10:48:43 +00:00
Darren Ethier 8627b81c16 Add payment method api and components to checkout steps (https://github.com/woocommerce/woocommerce-blocks/pull/1349)
This adds a payment methods api to the checkout block that allows for extension to register payment methods with the block.
2020-01-06 17:28:09 -05:00
Albert Juhé Lluveras e082a14e3b Rename checkout classes from 'wc-blocks-xyz' to 'wc-block-xyz' (https://github.com/woocommerce/woocommerce-blocks/pull/1449)
* Rename checkout classes from 'wc-blocks-checkout' to 'wc-block-checkout'

* Rename form components classes from 'wc-blocks-checkout' to 'wc-block-checkout'

* Rename 'wc-components' class names to 'wc-block'
2020-01-03 15:23:49 +01:00
Albert Juhé Lluveras 892a56364c Fix empty cart inner blocks disabled (https://github.com/woocommerce/woocommerce-blocks/pull/1447) 2020-01-03 15:22:50 +01:00
Albert Juhé Lluveras 0a78174d25 Checkout: Fix city input field showing country value (https://github.com/woocommerce/woocommerce-blocks/pull/1467) 2020-01-02 17:36:56 +01:00
Albert Juhé Lluveras 5701f7d6c9 Price filter: allow any numeric input (https://github.com/woocommerce/woocommerce-blocks/pull/1457)
* Price filter: allow any numeric input in inputs

* Price filter: allow negative numbers in input fields (https://github.com/woocommerce/woocommerce-blocks/pull/1458)

* Price filter: allow negative numbers in input fields

* Always update input fields based on minPrice and maxPrice

* Don't default values to 0
2020-01-02 14:07:59 +01:00
Garrett Hyder 21f1d03199 Fix double 'yet yet' (https://github.com/woocommerce/woocommerce-blocks/pull/1421)
Found during translation of WooCommerce 
Permalink - https://translate.wordpress.org/projects/wp-plugins/woocommerce/dev/en-ca/default/?filters%5Bstatus%5D=either&filters%5Boriginal_id%5D=8771164&filters%5Btranslation_id%5D=68202906
2019-12-20 10:35:08 +01:00
Seghir Nadir aaddf13494 Add type to checkout input fields (https://github.com/woocommerce/woocommerce-blocks/pull/1401)
* add input type

* fix css issues with types and better change default position
2019-12-19 13:59:34 +01:00
Seghir Nadir cf495a775e Fix Price Filter constraints by rounding up and down (https://github.com/woocommerce/woocommerce-blocks/pull/1419)
* fix problem with price not rounding up right

* add test
2019-12-19 13:52:49 +01:00
Albert Juhé Lluveras 548b2b80a9 Update filter blocks descriptions to explain they only work with the All Products block (https://github.com/woocommerce/woocommerce-blocks/pull/1420) 2019-12-19 13:46:30 +01:00
Mike Jolley cfe55418b1 Translator string feedback (https://github.com/woocommerce/woocommerce-blocks/pull/1412)
* Translator comments need to immedietely precede strings

* Add some extra context to "chips"
2019-12-18 12:59:22 +00:00
Mike Jolley 6a47b2232a More API price formatting and currency handling (https://github.com/woocommerce/woocommerce-blocks/pull/1394)
* Consistent currency data and formatting for product prices

* Consistent get_store_currency_properties usage

* Update tests with schema changes

* min_price and max_price to subunit format

* Product query of min and max prices using subunit

* Cart item totals

* Collection data schema object and currency data inclusion

* Handle subunits and new API in product prices

* Update price slider to format numbers using library and new API responses for subunits

* Product query of min and max prices using subunit

* Fix indents in readme

* Add todo for currency formatting

* Handle step for subunits, fixes min/max constraints

* Handle subunit conversion on display, using consistent currency object and wrapped NumberFormat component.

* Prettier ran

* Update usePriceConstraints tests so rounding doesn't make all values be 0

* Rename to minorUnitValue

* Move currencyToNumberFormat to index file

* siteCurrencySettings to constant rather than function

* remove cents term

* cents->minor unit

* typo in todo note

* Switch to FormattedMonetaryAmount

* Formatting

* wrong case
2019-12-18 11:29:20 +00:00
Mike Jolley 9470caed80 Remove extra colon in active filter widget (https://github.com/woocommerce/woocommerce-blocks/pull/1399) 2019-12-17 18:32:32 +01:00
Darren Ethier b38c45787a fix incorrect property name for price format (https://github.com/woocommerce/woocommerce-blocks/pull/1397) 2019-12-17 10:25:37 +00:00
Albert Juhé Lluveras 506f964463 Update several blocks so they don't support HTML edition (https://github.com/woocommerce/woocommerce-blocks/pull/1395) 2019-12-17 09:38:31 +01:00
Seghir Nadir d58712ee2b Add Checkout Form components (https://github.com/woocommerce/woocommerce-blocks/pull/1351)
* initial commit at fields

* add radio control

* change input to be uncotrolled

* tweak styles

* populate block with boilerplate

* update aria in radio

* remove comment

* fix typo

* add missing colors

* put reminder to put Disabled back

* wrap text in i18n __

* reorder styles

* rename wc-components to wc-blocks

* use value instead of index for keys

* add no shipping placeholder

* change isEditor default to false

* fix problem with responsive
2019-12-16 23:13:41 +01:00
Albert Juhé Lluveras af5af78266 Price filter: preserve previous constraints while loading (https://github.com/woocommerce/woocommerce-blocks/pull/1386)
* Typo

* Save previous constraint while loading

* Add tests for formatPrice

* Small code refactor

* Refactor usePriceConstraints to DRY and add tests

* Add base-hooks to jest config
2019-12-16 17:48:02 +01:00
Albert Juhé Lluveras 77bb23bf32 Add Feedback Prompt in Cart & Checkout blocks sidebar (https://github.com/woocommerce/woocommerce-blocks/pull/1356)
* Add Feedback Prompt in Cart & Checkout blocks sidebar

* Add border

* Move getInspectorControls out of the component function

* Move feedback prompt to a HOC

* Add @todo comment to feedback link

* Use filter for withFeedbackPrompt

* Export withFeedbackPrompt from hocs index.js

* Typo

* Try moving the feedback texts to context

* Revert "Try moving the feedback texts to context"

This reverts commit 21f889b021ceea6fef722efab9663799829bc769.

* Revert "Use filter for withFeedbackPrompt"

This reverts commit 96bba029d61a383eafa2c0a1c08f7988e319b50d.

* Set feedback text in the HOC function

* Use arrow-function to simplify code

* Refactor
2019-12-16 15:59:16 +01:00
Albert Juhé Lluveras 6d383bee73 Fix Attribute Fiter count misalignment (https://github.com/woocommerce/woocommerce-blocks/pull/1391) 2019-12-16 14:58:29 +01:00
Darren Ethier 25c32dff45 make sure we only allow one cart/checkout block per page/post (https://github.com/woocommerce/woocommerce-blocks/pull/1384) 2019-12-16 08:27:17 -05:00
Albert Juhé Lluveras a4be92ec15 Always filter attribute filters based on price filter (https://github.com/woocommerce/woocommerce-blocks/pull/1390) 2019-12-16 14:04:19 +01:00
Darren Ethier 10c27e928d Only allow one instance of the All Products block per page/post. (https://github.com/woocommerce/woocommerce-blocks/pull/1383)
* only allow one instance of the all products block per page.

* limit filter blocks to one instance per page/post
2019-12-16 07:31:38 -05:00
Darren Ethier 762caa5aae Fix messaging when there are no attributes (https://github.com/woocommerce/woocommerce-blocks/pull/1382) 2019-12-16 07:28:03 -05:00
Albert Juhé Lluveras 5485e4c51c Use wc_review_ratings_enabled() API function to check if review ratings are enabled (https://github.com/woocommerce/woocommerce-blocks/pull/1374) 2019-12-13 18:13:11 +01: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
Albert Juhé Lluveras b5791d9c53 Rename SubmitButton to FilterSubmitButton (https://github.com/woocommerce/woocommerce-blocks/pull/1369) 2019-12-12 20:16:39 +01:00