Add aspectRatio to ProductSummaryImage

.all-contributorsrc

@@ -0,0 +1,14 @@
+{
+  "projectName": "product-summary",
+  "projectOwner": "vtex-apps",
+  "repoType": "github",
+  "repoHost": "https://github.com",
+  "files": [
+    "docs/README.md"
+  ],
+  "imageSize": 100,
+  "commit": true,
+  "commitConvention": "none",
+  "contributors": [],
+  "contributorsPerLine": 7
+}

.github/CODEOWNERS

@@ -0,0 +1,2 @@
+* @vtex-apps/store-framework-devs
+docs/ @vtex-apps/technical-writers

.github/ISSUE_TEMPLATE/bug_report.md

@@ -0,0 +1,42 @@
+---
+name: Bug report
+about: Create a report to help us improve
+labels: bug
+---
+
+**Describe the bug**
+A clear and concise description of what the bug is.
+
+**To Reproduce**
+Steps to reproduce the behavior:
+
+1. Go to '...'
+2. Click on '....'
+3. Scroll down to '....'
+4. See error
+
+**Expected behavior**
+A clear and concise description of what you expected to happen.
+
+**Screenshots**
+If applicable, add screenshots to help explain your problem.
+
+**Desktop environment:**
+
+<!--
+Please paste the ouput of the following command in your issue. It helps us identify your environment and act more quickly to solve your problem.
+
+$ npx envinfo --system --binaries --browsers
+
+If the problem happens in a specific browser, please state which browser.
+--->
+
+**Smartphone environment:**
+
+- Device: [e.g. iPhone6]
+- OS: [e.g. iOS8.1]
+- Browser [e.g. stock browser, safari]
+- Version [e.g. 22]
+
+**Additional context**
+Add any other context about the problem here.

.github/ISSUE_TEMPLATE/feature_request.md

@@ -0,0 +1,19 @@
+---
+name: Feature request
+about: Suggest an idea for this project
+title: ''
+labels: 'New Feature'
+assignees: ''
+---
+
+**Is your feature request related to a problem? Please describe.**
+A clear and concise description of what the problem is. For example: I'm always frustrated when [...]
+
+**Describe the solution you'd like**
+A clear and concise description of what you want to happen.
+
+**Describe alternatives you've considered**
+A clear and concise description of any alternative solutions or features you've considered.
+
+**Additional context**
+Add any other context or screenshots about the feature request here.

.github/ISSUE_TEMPLATE/questions-and-help.md

@@ -0,0 +1,18 @@
+---
+name: Question
+about: Ask a question you had while building a store
+labels: question
+---
+
+**What are you trying to accomplish? Please describe.**
+A clear and concise description of what is your question and what you're trying to accomplish in the end is.
+
+**What have you tried so far?**
+A clear and concise description of what you tried to do already.
+
+**Additional info**
+Add extra content here (code samples, screenshots,...)
+
+| Account        | Workspace        |
+| -------------- | ---------------- |
+| `your account` | `your workspace` |

CHANGELOG.md

@@ -7,6 +7,57 @@ and this project adheres to [Semantic Versioning](http://semver.org/spec/v2.0.0.
 
 ## [Unreleased]
 
+## [2.52.2] - 2020-03-11
+### Removed
+- graphql-tag removed from deps since `parse`, from graphql-js already does the job. It is not ideal to use gql from 'graphql-tag' since our current webpack config only strips away the gql when explicitly importing, and not using gql in the code. 
+
+## [2.52.1] - 2020-03-04
+### Fixed
+- Error caused by wrong hooks order on ProductSummaryList
+
+## [2.52.0] - 2020-03-03
+### Added
+- `ProductSummaryList`: `installmentCriteria` prop to use in `products` query.
+- `ProductSummaryList`: Messages and translations to be able to edit `skusFilter` and `installmentCriteria` in site editor.
+
+### Fixed
+- Props passed to `ProductSummaryList`
+
+## [2.51.7] - 2020-03-02
+### Changed
+- `ProductSummaryList`: Consume new products query.
+
+## [2.51.6] - 2020-02-28
+### Fixed
+- Prevent image DPI from changing.
+
+## [2.51.5] - 2020-02-21
+### Changed
+- import product search query directly.
+- Improve performance of ProductSummaryList by memoing data.
+
+## [2.51.4] - 2020-02-13
+### Fixed
+- Remove `skuId` from query string if no SKU is selected.
+
+## [2.51.3] - 2020-02-11
+### Changed
+- Only display `mainImageLabel` image if no image variant sku is selected.
+
+## [2.51.2] - 2020-02-10
+### Removed
+-  `containerRef` from `ProductSummary` since it doesn't need it anymore.
+
+## [2.51.1] - 2020-02-07
+### Fixed
+- Missing error handling logic for productSearch query.
+
+## [2.51.0] - 2020-02-06
+### Added
+- `ProductSummaryList` component.
+
+## [2.50.2] - 2020-02-05
+
 ## [2.50.1] - 2020-01-23
 
 ## [2.50.0] - 2020-01-23

docs/ProductSummaryList.md

@@ -0,0 +1,54 @@
+# ProductSummaryList
+
+The `list-context.product-list` interface is a instance of the `list-context` interfaces, which means its part of a set of special interfaces that enables you to create lists of content that can be edited via Site Editor.
+
+In order to create a list of products, you need to use the `list-context.product-list` block and a `product-summary.shelf`.
+
+## product-list-block
+
+This block is used to specify what variation of `product-summary` to be used to create the list of products, and the `list-context.product-list` you want as follows:
+
+```json
+  "product-summary.shelf#demo1": {
+    "children": [
+      "stack-layout#prodsum",
+      "product-summary-name",
+      "product-rating-inline",
+      "product-summary-space",
+      "product-summary-price",
+      "product-summary-buy-button"
+    ]
+  },
+  "list-context.product-list#demo1": {
+    "blocks": ["product-summary.shelf#demo1"],
+    "children": ["slider-layout#demo-products"]
+  },
+```
+
+`list-context.product-list` is also responsible for performing the GraphQL query that fetches the list of products, so it can receive the following props:
+
+| Prop name              | Type                                   | Description                                                                                                                                                                                                                               | Default value |
+| ---------------------- | -------------------------------------- | ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ------------- |
+| `category`             | `String`                               | Category ID of the listed items. For sub-categories, use "/" (e.g. "1/2/3")                                                                                                                                                               | -             |
+| `specificationFilters` | `Array({ id: String, value: String })` | Specification Filters of the listed items.                                                                                                                                                                                                | []            |
+| `collection`           | `String`                               | Filter by collection.                                                                                                                                                                                                                     | -             |
+| `orderBy`              | `Enum`                                 | Ordination type of the items. Possible values: `OrderByTopSaleDESC`, `OrderByReleaseDateDESC`, `OrderByBestDiscountDESC`, `OrderByPriceDESC`, `OrderByPriceASC`, `OrderByNameASC`, `OrderByNameDESC` | `OrderByTopSaleDESC`          |
+| `hideUnavailableItems` | `Boolean`                              | Hides items that are unavailable.                                                                                                                                                                                                         | `false`       |
+| `maxItems` | `Number`                              | Maximum items to be fetched.                                                                                                                                                                                                         | `10`       |
+| `skusFilter`               | `SkusFilterEnum`                 | Control SKUs returned for each product in the query. The less SKUs needed to be returned, the more performant your shelf query will be.                                                                                                    | `"ALL_AVAILABLE"` |
+| `installmentCriteria`               | `InstallmentCriteriaEnum`                 | ControlControl what price to be shown when price has different installments options.                                                                                                    | `"MAX_WITHOUT_INTEREST"` |
+
+For `SkusFilterEnum`:
+
+| Name | Value | Description |
+| ---- | ----- | ----------- |
+| First Available | `FIRST_AVAILABLE` | Most performant, ideal if you do not have a SKU selector in your shelf. Will return only the first available SKU for that product in your shelf query. |
+| All Available | `ALL_AVAILABLE` | A bit better performace, will only return SKUs that are available, ideal if you have a SKU selector but still want a better performance. |
+| All | `ALL` | Returns all SKUs related to that product, least performant option. |
+
+For `InstallmentCriteriaEnum`:
+
+| Name | Value | Description |
+| ---- | ----- | ----------- |
+| Maximum without interest | `MAX_WITHOUT_INTEREST` | Will display the maximum installment option with no interest. |
+| Maximum | `MAX_WITH_INTEREST` | Will display the maximum installment option having interest or not. |

docs/README.md

@@ -1,60 +1,73 @@
-📢 Don't fork this project. Use, [contribute](https://github.com/vtex-apps/awesome-io#contributing), or open issues through [Store Discussion](https://github.com/vtex-apps/store-discussion).
+📢 Use this project, [contribute](https://github.com/vtex-apps/product-summary) to it or open issues to help evolve it using [Store Discussion](https://github.com/vtex-apps/store-discussion).
+<!-- ALL-CONTRIBUTORS-BADGE:START - Do not remove or modify this section -->
+[![All Contributors](https://img.shields.io/badge/all_contributors-0-orange.svg?style=flat-square)](#contributors-)
+<!-- ALL-CONTRIBUTORS-BADGE:END -->
 
 # Product Summary
 
-Product Summary summarises the product informations such as name, price and picture.
-This is a VTEX app that is used by store theme.
+Product Summary is an app responsible for summarizing product information (such as name, price and image) in other store blocks, such as the [Shelf](https://vtex.io/docs/components/all/vtex.shelf/) and the [Minicart](https://vtex.io/docs/components/all/vtex.minicart/).
 
 ![image](https://user-images.githubusercontent.com/284515/70235170-1a503a80-1741-11ea-952d-07b178995f92.png)
 
 ## Configuration
 
-1. Import the vtex.store-component's app to your theme's dependencies in the manifest.json, for example:
+1. Import the `vtex.product-summary` app to your theme's dependencies in the `manifest.json`:
 
 ```json
-  dependencies: {
+  "dependencies": {
     "vtex.product-summary": "2.x"
   }
 ```
-2. Add the `product-summary` block. For example:
+
+Now, you are able to use all blocks exported by the `product-summary` app. Check out the full list below:
+
+| Block name     | Description | 
+| -------------- | ----------- | 
+| `product-summary.shelf` | ![https://img.shields.io/badge/-Mandatory-red](https://img.shields.io/badge/-Mandatory-red)   The [entity](https://help.vtex.com/tutorial/creating-data-entity--tutorials_1265) Provides product summary data to other blocks. As a parent block, it also provides the needed structure and context for its children (listed below) to be rendered. 
+| `product-summary-attachment-list` | Renders a list for the product's [attachments](https://help.vtex.com/tutorial/adding-an-attachment--7zHMUpuoQE4cAskqEUWScU) | 
+| `product-summary-brand`         | Renders the product's brand | 
+| `product-summary-buy-button` | Renders the Buy Button | 
+| `product-summary-description` | Renders the product's description | 
+| `product-summary-image` | Renders the product's image | 
+| `list-context.product-list` | Renders a list of products in the Product Summary | 
+| `product-summary-name` | Renders the product's name | 
+| `product-summary-price` | Renders the product's price | 
+| `product-summary-sku-selector` | Renders the SKU Selector block | 
+| `product-specification-badges` | Renders badges based on the product's specifications |
+
+
+2. Add the `product-summary.shelf` block to the block that will host the product information, such as the Shelf. Notice that although the block's name refers to the Shelf block, it can and should be used in any block that is able to render product information, such as the Minicart and those found on the [Search Results](https://vtex.io/docs/components/all/vtex.search-result/) page.
+
+```json
+    "shelf#home": {
+    "blocks": [
+      "product-summary.shelf"
+    ],
+    }
+```
+
+3. Then, based on the product information you desire to have rendered, choose which blocks from the exported list above will be sent as the `product-summary.shelf` children. In a scenario in which we want to display the product name, description, image, price, a SKU selector and then a Buy Button, it would go as follows:
 
 ```json
-"product-summary": {
-  "props": {
-    "isOneClickBuy": false,
-    "showBadge": true,
-    "badgeText": "OFF",
-    "displayBuyButton": "displayButtonHover",
-    "showCollections": false,
-    "showListPrice": true,
-    "showLabels": false,
-    "showInstallments": true,
-    "showSavings": true
+   {
+  "shelf#home": {
+    "blocks": ["product-summary.shelf"]
+  },
+
+  "product-summary.shelf": {
+    "children": [
+      "product-summary-name",
+      "product-summary-description",
+      "product-summary-image",
+      "product-summary-price",
+      "product-summary-sku-selector",
+      "product-summary-buy-button"
+    ]
   }
 }
 ```
 
-| Prop name           | Type      | Description                                                                                 |
-| ------------------- | --------- | ------------------------------------------------------------------------------------------- |
-| `showListPrice`     | `Boolean` | Shows the product list price                                                                |
-| `isOneClickBuy`     | `Boolean` | Should redirect to checkout after clicking on buy                                           |
-| `showLabels`        | `Boolean` | Set pricing labels' visibility                                                              |
-| `showInstallments`  | `Boolean` | Set installments' visibility                                                                |
-| `showBorders`       | `Boolean` | Set product's borders visibility                                                            |
-| `showBadge`         | `Boolean` | Set the discount badge's visibility                                                         |
-| `showDescription`   | `Boolean` | Set product's description visibility                                                        |
-| `labelSellingPrice` | `String`  | Text of selling price's label                                                               |
-| `labelListPrice`    | `String`  | Text of list price's label                                                                  |
-| `badgeText`         | `String`  | Text shown on badge                                                                         |
-| `buyButtonText`     | `String`  | Custom buy button text                                                                      |
-| `displayBuyButton`  | `Enum`    | Set display mode of buy button (displayButtonAlways, displayButtonHover, displayButtonNone) |
-| `hideBuyButton`     | `Boolean` | Hides the buybutton completely                                                              |
-| `showCollections`   | `Boolean` | Set collection badges' visibility                                                           |
-| `displayMode`       | `Enum`    | Set display mode of product summary (normal, small, inline or inlinePrice)                               |
-| `showQuantitySelector`       | `Boolean`    | Set the quantity selector visibility              
-|
-| `priceAlignLeft`       | `Boolean`    | Set the price to be left aligned              
-|
+In order to configure and better understand each of the Product Summary exported blocks, go through their respective documentation in the [Docs](https://github.com/vtex-apps/product-summary/tree/master/docs) folder.
 
 #### Customization
 
@@ -82,3 +95,16 @@ In order to apply CSS customizations in this and other blocks, follow the instru
 | `imagePlaceholder`         |
 | `column`                   |
 | `spacer`                   |
+
+## Contributors ✨
+
+Thanks goes to these wonderful people ([emoji key](https://allcontributors.org/docs/en/emoji-key)):
+
+<!-- ALL-CONTRIBUTORS-LIST:START - Do not remove or modify this section -->
+<!-- prettier-ignore-start -->
+<!-- markdownlint-disable -->
+<!-- markdownlint-enable -->
+<!-- prettier-ignore-end -->
+<!-- ALL-CONTRIBUTORS-LIST:END -->
+
+This project follows the [all-contributors](https://github.com/all-contributors/all-contributors) specification. Contributions of any kind welcome!