Commit Graph

15 Commits

Author SHA1 Message Date
Tung Du c10e91e7e1 Fix: navigate through Mini Cart contents with keyboard (https://github.com/woocommerce/woocommerce-blocks/pull/6731)
Co-authored-by: Albert Juhé Lluveras <contact@albertjuhe.com>
2022-07-25 12:39:47 +07:00
Saad Tarhi d53551d4a7 Fix/cart button focus hover states (https://github.com/woocommerce/woocommerce-blocks/pull/5712)
* Add hover & focus styles for component buttons

We are using an old version of the "@wordpress/component" package,
that's why we are not getting the latest style fixes from Gutenberg.

The reason to not using the latest version is that we had some issues
with the bundle size.

The current solution is to set our own focus & hover styles

* Replace raw value with Sass variable

* Fix hover style for the mini cart block

We don't have the outlined button yet. This styles is unique for the
mini cart button.

To refactor this code, maybe we should create a reusable outlined button

* Add variant to the Woo Block Button component

To refactor our code, adding a "variant" prop looks logical since we are
have already "contained" & "outlined" buttons. So, for future need for an
outlined button, no need to manually apply the same style again.

The "contained" variant is set by default for legacy reasons. Our Button
component was first built as a contained one.

* Fix height difference: oulined & contained buttons

The outlined buttons have more height because of the added border value.

To fix it we can replace the border with the inner shadow.

Co-authored-by: Saad Tarhi <saad.tarhi@automattic.com>
2022-02-09 18:32:05 +01:00
Daniel Dudzic 0b28bdf0dd Add stories for Button component woocommerce/woocommerce-blocks#5250 (https://github.com/woocommerce/woocommerce-blocks/pull/5706)
* Add stories for Button component woocommerce/woocommerce-blocks#5250

Add stories for Button component
Co-authored-by: gigitux <gigitux@gmail.com>

* Button: Change With Spinner story title to Loading
2022-02-03 13:29:06 +01:00
Mike Jolley 3fc597775c Trigger validation on change (https://github.com/woocommerce/woocommerce-blocks/pull/5373) 2021-12-13 16:44:28 +00:00
Thomas Roberts 589f6923d6 Export `Button` and `Label` from `wc-blocks-checkout` package (https://github.com/woocommerce/woocommerce-blocks/pull/4406)
* Remove snackbar filtering

* Revert "Move Button and Label components to `@woocommerce/blocks-checkout` package (https://github.com/woocommerce/woocommerce-blocks/pull/4222)"

This reverts commit 983ce48cad.

* Export Label and Button from the wc-blocks-checkout package

* Reorder exports

This is so the diff is smaller in the PR

* Revert "Remove snackbar filtering"

This reverts commit 8e598436e871aa56f89740fbe6fbe522fd02db1d.
2021-07-02 10:24:07 +01:00
Thomas Roberts 983ce48cad Move Button and Label components to `@woocommerce/blocks-checkout` package (https://github.com/woocommerce/woocommerce-blocks/pull/4222)
* Move Button to checkout package

* Move Label to Components Package
2021-05-18 09:10:31 +01:00
Thomas Roberts 5871d86d7f Update `Button` component to ts (https://github.com/woocommerce/woocommerce-blocks/pull/4091)
* Convert Button to TypeScript

* Add alias of @types/wordpress__components

* Make ButtonProps extend the wp/components button's base props

* Update package-lock.json

* Extend Button.ButtonProps instead of only BaseProps

* Add return type to Button component
2021-04-26 10:49:57 +01:00
Albert Juhé Lluveras 10ceda5851 Use @wordpress/base-styles and @automattic/color-studio as a base for our styles (https://github.com/woocommerce/woocommerce-blocks/pull/3300)
* Use colors variables instead of hardcoded values when possible

* Update WC colors from @automattic/color-studio

* Decrease specificity of price-slider CSS selectors

* Update colors to WC purple

* Update bright colors

* Update grays

* Update blacks and whites

* Add @todo comment

* Remove unnecessary blank line

* Remove purple color from price slider handle

* Fix colors not shown in SVG background

* Remove unnecessary box-shadow declaration

* Add theming docs

* Refactor/remove SCSS variables

* Add @todo comment to breakpoints

* Update package-lock.json
2020-10-22 12:40:32 +02:00
Darren Ethier 9115160c2f Enable and fix all jsdoc rule violations (https://github.com/woocommerce/woocommerce-blocks/pull/3168)
* add param jsdocs to satisfy jsdoc require-param rule

* Fix jsdoc-checktypes rule violations

* fix jsdoc/require-param-type rule violations

* fix jsdoc/check-param-names violations

* fix jsdoc/require-property-description rule violations

* fix rule violations for jsdoc/valid-types rule

* fix rule violations for jsdoc/require-property rule

* fix jsdoc/no-undefined-types rule violations

* fix jsdoc/check-types rule violations

* fix jsdoc/require-returns-description rule violation

* enable jsdoc/require-returns-type rule

* fix jsdoc/newline-after-description rule violations
2020-09-20 19:54:08 -04:00
Mike Jolley d25d233f27 Replace usage of `cart-checkout/button` with `@woocommerce/base-components/button` (https://github.com/woocommerce/woocommerce-blocks/pull/2781)
* Change to base component

* Remove todo
2020-06-25 16:50:48 +01:00
Mike Jolley 09aa20d0d3 Introduce Atomic Add to Cart Block (https://github.com/woocommerce/woocommerce-blocks/pull/2705)
* Form/button stucture

* Use registerBlockComponent

* Context for add to cart form

* Working cart button

* Tidy up button component

* Add todos

* Revert reg block

* Hide stock indicator if not purchasable

* Hide terms if empty

* Add url and type to API

* Skip default category from term response

* Rename form element

* Form for product types

* Tidy up context provider and expand todos

* No longer using qty icon

* Update todos

* Correct text domain

* registerExperimentalBlockType

* Duplicate method

* Remove prevent default

* Update docblock

* Description for button code
2020-06-17 10:52:03 +01:00
Albert Juhé Lluveras 1c81066bc4 CSS editor fixes for Cart and Checkout blocks (https://github.com/woocommerce/woocommerce-blocks/pull/1949)
* Set min-height to 0 for Country & State hidden inputs

* Fix button styles broken in the Cart block in editor

* Avoid having editor.scss specific stylesheets for button and totals

* Move Button inside cart-checkout subfolder
2020-03-13 12:02:08 +00:00
Rua Haszard 7f44458418 Basic storybook implementation (https://github.com/woocommerce/woocommerce-blocks/pull/1636)
* install & configure storybook (via magic npx script)

* fix indentation in storybook generated files

* eslint ignore generated storybook files (for now at least)

* unhide storybook folder, consistent with Gutenberg project

* demo story for one of our components (with no css/styles)

* hack in scss webpack config & add story for button:
- fixes scss imports breaking storybook build
- note scss / styling doesn't work yet
+ organise our component stories into folder

* git ignore storybook-static build folder

* pin dependencies for storybook

* piggy-back off main webpack config for storybook module.rules (for scss)

* use gutenberg (wp-components) styles in storybook

* use system font for storybook, consistent with wp-admin/gberg and reasonable default for components in front end

* add --ci flag to prevent storybook opening new browser tab…
- see also https://github.com/storybookjs/storybook/issues/6201

* rename default stories to Default (following Gutenberg pattern)

* add story for ErrorPlaceholder

* failing ProductPreview story (committing to PR as an example for discussion)

* storybook for components/icons

* fix aliased dependencies in components for storybook:
append our webpack aliases to storybook webpack config

* basic story for PriceSlider (looks right but interaction broken)

* fix PriceSlider user interaction:
- PriceSlider expects client to handle onChange and pass in new min/max

* add comment about priceslider max/min (todoish)

* remove default stories from storybook scaffolding

* organise stories by module (aka folder in codebase)

* package-lock update after rebase

* remove unnecessary ignores (default stories are gone)

* delete experimental/risky/broken stories:
- icons components are changing in woocommerce/woocommerce-blocks#1644
- we need to refactor/do more work to get ProductPreview working (settings globals)

* remove unnecessary import

* clarify PriceSlider component intended usage comment in story

* remove redundant wrapper divs from stories

* add common storybook addons (used by Gutenberg storybook)

* rebuild package.lock after rebase

* remove unnecessary wrapper div

* package fixes after rebase

* add configuration for storybook source loader

* add decorators for a11y and knobs plugins

* remove unnecessary react import & import useState from WP

Co-authored-by: Darren Ethier <darren@roughsmootheng.in>
2020-01-31 09:59:14 +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
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