Support multiple product variant attributes

[orzechdev]

Fixed and added functionalities:

• Fixes Product page crashes with more than two variant attributes #514
• Fixes Storefront doesn't show product details for a new Paint product without variant #555
• Reusable new ProductVariantPicker functional component build with atomic design
• ProductVariantPicker accepts just product variants list, each with possible attributes values to select and render appropriate attribute select inputs
• Selection of arbitrary value of one attribute automatically disables impossible selection of other values (impossible -> there is no more available variant for them)
• Clearing selection of attribute value by "x" button
• Price is shown as range when not all variant attributes are selected or as value if appropriate - everything locally formatted by toLocaleString() function.
• Two selection methods: dropdown menu and sidebar menu
• Replaced SizeOverlay component with more generic SelectSidebar component
• Implementation of picker in Product Page
• Basic tests of component are included as well as examples in storybook

Screenshots

For given possible variants:

• 1l / cotton / yellow
• 2l / wool / red
• 500ml / wool / turquoise

By default no selection is applied:

After cotton selection, red and turquoise has been disabled as not available variants left for them:

Also, there is an option to use right sidebar as a selection menu:

Selection of all attributes and valid quantity enables add to basket possibility:

Pull Request Checklist

1. All visible strings are translated with proper context.
2. All data-formatting is locale-aware (dates, numbers, and so on).
3. The changes are tested.
4. The code is documented (docstrings, project documentation).
5. Changes are mentioned in the changelog.

[tboulogne]

hello are you ready to berge this ? it could help.

Thanks for all.

[tboulogne]

@maarcingebala i'm desesperate :-(, and you are the one that could help with merging this. Thanks for help. regards

[netlify]

Deploy preview for saleor-storefront-stage processing.

Building with commit 0d6a6e5

https://app.netlify.com/sites/saleor-storefront-stage/deploys/5e1c813fbcfa1100080803b1

[tboulogne]

@maarcingebala thaannnnnnks :-)