Merge pull request #7 from vtex-apps/feature/shelf-with-title

Create shelf component with title

CHANGELOG.md

@@ -7,6 +7,10 @@ and this project adheres to [Semantic Versioning](http://semver.org/spec/v2.0.0.
 
 ## [Unreleased]
 
+### Added
+
+- Shelf with title.
+
 ## [0.3.2] - 2020-08-19
 
 ## [0.3.1] - 2020-08-18

docs/RefreshShelf.md

@@ -98,21 +98,3 @@ In order to apply CSS customizations in this and other blocks, follow the instru
 | `refreshProductSummary`           |
 | `refreshProductTitleContainer`    |
 | `suggestedProductsTitleContainer` |
-
-<!-- DOCS-IGNORE:start -->
-
-## Contributors ✨
-
-Thanks goes to these wonderful people:
-
-<!-- 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 are welcome!
-
-<!-- DOCS-IGNORE:end -->

docs/Shelf.md

@@ -1,25 +1,33 @@
 # Shelf
 
-<!-- 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 -->
-
 The Shelf allows users to display a list of products in your store.
 
 ## Configuration
 
-The Shelf block is configured using the [Product Summary List](https://vtex.io/docs/components/all/vtex.product-summary/), the [Product Summary Shelf](https://vtex.io/docs/components/all/vtex.product-summary/) and the [Slider Layout](https://vtex.io/docs/components/all/vtex.slider-layout/) blocks.
+The Shelf block is configured using the [Product Summary List](https://vtex.io/docs/components/all/vtex.product-summary/) and the [Slider Layout](https://vtex.io/docs/components/all/vtex.slider-layout/) blocks.
 
-1. Add the `ProductSummary` and `Slider-Layout` apps to your theme's dependencies on the `manifest.json`:
+1. Add the `Shelf-components` app to your theme's dependencies on the `manifest.json`:
 
 ```diff
   "dependencies": {
-+   "vtex.product-summary": "2.x",
-+   "vtex.slider-layout": "0.x"
++   "vtex.shelf-components": "0.x"
   }
 ```
 
-2. Add the `list-context.product-list` into your theme passing the `product-summary.shelf` and `slider-layout` as in the example below:
+2. Add the `default-shelf` into your theme. 
+
+```json
+  "store.home": {
+    "blocks": [
+      "flex-layout.row#shelf",
+    ]
+  },
+  "flex-layout.row#shelf": {
+    "children": ["default-shelf"]
+  },
+```
+
+If you want to further customize your list, you can pass your own `list-context.product-list` as in the example below:
 
 ```json
   "store.home": {
@@ -53,7 +61,10 @@ The Shelf block is configured using the [Product Summary List](https://vtex.io/d
     "children": ["slider-layout#demo-products"]
   },
   "flex-layout.row#shelf": {
-    "children": ["list-context.product-list"]
+    "children": ["default-shelf"]
+  },
+  "default-shelf": {
+    "blocks": ["list-context.product-list"]
   }
 ```
 
@@ -88,20 +99,11 @@ Possible values for `installmentCriteria`:
 
 If you want to use the Shelf by sending products from another API, such as a recommendation API, you can simply use the `list-context.product-list-static` block instead of` list-context.product-list` , sending through the props only the array of products you want to display.
 
-<!-- DOCS-IGNORE:start -->
-
-## Contributors ✨
-
-Thanks goes to these wonderful people:
-
-<!-- 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 -->
+## Customization
 
-This project follows the [all-contributors](https://github.com/all-contributors/all-contributors) specification. Contributions of any kind are welcome!
+In order to apply CSS customizations in this and other blocks, follow the instructions given in the recipe on [Using CSS Handles for store customization](https://vtex.io/docs/recipes/style/using-css-handles-for-store-customization).
 
-<!-- DOCS-IGNORE:end -->
+| CSS Handles           |
+| --------------------- |
+| `shelfTitleContainer` |
+| `shelfTitle`          |

messages/context.json

@@ -3,7 +3,7 @@
   "admin/editor.shelf.description": "Shelf description",
   "admin/editor.buy-together.title": "Buy Together editor title",
   "store/shelf.buy-together.title": "Buy together title",
-  "admin/editor.buy-together.title.label": "Buy Together title label",
+  "admin/editor.title.label": "Title label",
   "store/shelf.buy-together.change.label": "Change label",
   "store/shelf.buy-together.remove.label": "Remove label",
   "store/shelf.buy-together.add.label": "Add label",

messages/en.json

@@ -3,7 +3,7 @@
   "admin/editor.shelf.description": "Description",
   "admin/editor.buy-together.title": "Buy Together",
   "store/shelf.buy-together.title": "Buy Together",
-  "admin/editor.buy-together.title.label": "Title",
+  "admin/editor.title.label": "Title",
   "store/shelf.buy-together.change.label": "Change",
   "store/shelf.buy-together.remove.label": "Remove",
   "store/shelf.buy-together.add.label": "Add",

messages/es.json

@@ -3,7 +3,7 @@
   "admin/editor.shelf.description": "Description",
   "admin/editor.buy-together.title": "Comprar juntos",
   "store/shelf.buy-together.title": "Comprar juntos",
-  "admin/editor.buy-together.title.label": "Título",
+  "admin/editor.title.label": "Título",
   "store/shelf.buy-together.change.label": "Cambiar",
   "store/shelf.buy-together.remove.label": "Eliminar",
   "store/shelf.buy-together.add.label": "Agregar",

messages/pt.json

@@ -3,7 +3,7 @@
   "admin/editor.shelf.description": "Description",
   "admin/editor.buy-together.title": "Compre junto",
   "store/shelf.buy-together.title": "Compre junto",
-  "admin/editor.buy-together.title.label": "Título",
+  "admin/editor.title.label": "Título",
   "store/shelf.buy-together.change.label": "Mudar",
   "store/shelf.buy-together.remove.label": "Remover",
   "store/shelf.buy-together.add.label": "Adicionar",

react/Shelf.tsx

@@ -0,0 +1 @@
+export { default } from './components/Shelf'

react/components/BuyTogether/index.tsx

@@ -123,7 +123,11 @@ const BuyTogether: StorefrontFunctionComponent<Props> = ({
     <div className={`flex-none tc ${handles.buyTogetherContainer}`}>
       <div className={`mv4 v-mid ${handles.buyTogetherTitleContainer}`}>
         <span className={handles.buyTogetherTitle}>
-          {title ?? <FormattedMessage {...messages.title} />}
+          {title && title !== '' ? (
+            title
+          ) : (
+            <FormattedMessage {...messages.title} />
+          )}
         </span>
       </div>
       <div className="flex flex-column flex-row-l">

react/components/RefreshShelf/RefreshProductSummary.tsx

@@ -7,6 +7,7 @@ import { useCssHandles } from 'vtex.css-handles'
 
 import IconRefresh from '../../icons/IconRefresh'
 import ProductSummaryLoader from './ProductSummaryLoader'
+import styles from './styles.css'
 
 interface RefreshProductSummaryProps {
   products: any[]
@@ -55,8 +56,10 @@ const RefreshProductSummary: StorefrontFunctionComponent<RefreshProductSummaryPr
 
   return (
     <div className={`tc w-70 w-40-ns w-20-l ${handles.refreshProductSummary}`}>
-      <div className={`nowrap f4 ${handles.refreshProductTitleContainer}`}>
-        <span className="v-mid">
+      <div
+        className={`nowrap mv4 f4 v-mid ${handles.refreshProductTitleContainer}`}
+      >
+        <span className={styles.refreshProductTitle}>
           {title && title !== '' ? title : intl.formatMessage(messages.title)}
         </span>
         {products?.length > 1 && (

react/components/RefreshShelf/styles.css

@@ -17,6 +17,7 @@
   margin: 0.75rem;
   text-transform: uppercase;
   font-weight: 600;
+  height: 40px;
 }
 
 .suggestedProductsContainer {
@@ -28,6 +29,10 @@
   vertical-align: -webkit-baseline-middle;
 }
 
+.refreshProductTitle {
+  vertical-align: -webkit-baseline-middle;
+}
+
 @media screen and (min-width: 64.125em) {
   .suggestedProductsContainer {
     width: 75%;

react/components/Shelf/index.tsx

@@ -0,0 +1,43 @@
+import React from 'react'
+import { ExtensionPoint } from 'vtex.render-runtime'
+import { useCssHandles } from 'vtex.css-handles'
+
+import styles from './styles.css'
+
+interface Props {
+  title?: string
+  products?: Product[]
+}
+
+const CSS_HANDLES = ['shelfTitleContainer', 'shelfTitle']
+
+const Shelf: StorefrontFunctionComponent<Props> = ({ title, products }) => {
+  const handles = useCssHandles(CSS_HANDLES)
+
+  return (
+    <div className="flex-none tc">
+      {title && (
+        <div className={`mv4 v-mid ${handles.shelfTitleContainer}`}>
+          <span className={`${styles.shelfTitle} ${handles.shelfTitle}`}>
+            {title}
+          </span>
+        </div>
+      )}
+      {(!products || products.length === 0) && (
+        <ExtensionPoint id="list-context.product-list" />
+      )}
+      {products && products.length > 0 && (
+        <ExtensionPoint
+          id="list-context.product-list-static"
+          products={products}
+        />
+      )}
+    </div>
+  )
+}
+
+Shelf.schema = {
+  title: 'admin/editor.shelf.title',
+}
+
+export default Shelf

react/components/Shelf/styles.css

@@ -0,0 +1,5 @@
+.shelfTitle {
+  text-transform: uppercase;
+  font-weight: 600;
+  font-size: 1.25rem;
+}

store/blocks.json

@@ -130,6 +130,29 @@
     ]
   },
 
+  "slider-layout#shelf": {
+    "props": {
+      "itemsPerPage": {
+        "desktop": 5,
+        "tablet": 3,
+        "phone": 1
+      },
+      "infinite": true,
+      "fullWidth": false,
+      "blockClass": "shelf"
+    }
+  },
+
+  "list-context.product-list": {
+    "blocks": ["product-summary.shelf"],
+    "children": ["slider-layout#shelf"]
+  },
+
+  "list-context.product-list-static": {
+    "blocks": ["product-summary.shelf"],
+    "children": ["slider-layout#shelf"]
+  },
+
   "buy-together": {
     "blocks": ["product-summary.shelf#buy-together"],
     "props": {
@@ -139,5 +162,9 @@
 
   "refresh-shelf": {
     "blocks": ["product-summary.shelf"]
+  },
+
+  "default-shelf": {
+    "blocks": ["list-context.product-list", "list-context.product-list-static"]
   }
 }

store/contentSchemas.json

@@ -1,10 +1,19 @@
 {
   "definitions": {
+    "Shelf": {
+      "type": "object",
+      "properties": {
+        "title": {
+          "title": "admin/editor.title.label",
+          "type": "string"
+        }
+      }
+    },
     "BuyTogether": {
       "type": "object",
       "properties": {
         "title": {
-          "title": "admin/editor.buy-together.title.label",
+          "title": "admin/editor.title.label",
           "type": "string"
         }
       }

store/interfaces.json

@@ -14,5 +14,15 @@
     "content": {
       "$ref": "#/definitions/RefreshShelf"
     }
+  },
+  "default-shelf": {
+    "required": [
+      "list-context.product-list",
+      "list-context.product-list-static"
+    ],
+    "component": "Shelf",
+    "content": {
+      "$ref": "#/definitions/Shelf"
+    }
   }
 }

styles/css/vtex.slider-layout.css

@@ -0,0 +1,11 @@
+.slide--shelf {
+  margin-bottom: 25px;
+  padding-left: .5rem;
+  padding-right: .5rem;
+}
+
+.layoutContainer--shelf {
+  margin-top: 20px;
+  margin-bottom: 20px;
+  max-width: 96rem;
+}