Merge 78bfcc4 into d719b4e

vtex-apps · Jan 21, 2020 · 01d7dc3 · 01d7dc3
2 parents d719b4e + 78bfcc4
commit 01d7dc3
Show file tree

Hide file tree

Showing 13 changed files with 270 additions and 182 deletions.
diff --git a/CHANGELOG.md b/CHANGELOG.md
@@ -6,6 +6,8 @@ The format is based on [Keep a Changelog](http://keepachangelog.com/en/1.0.0/)
 and this project adheres to [Semantic Versioning](http://semver.org/spec/v2.0.0.html).
 
 ## [Unreleased]
+### Added
+- `arrows`, `autoplay`, `nativationStep`, `titleText`, `showTitle`, `itemsPerPage`, `minItemsPerPage` and `gap` props to the schema of the Shelf.
 
 ## [1.34.1] - 2020-01-14
 ### Fixed

diff --git a/docs/README.md b/docs/README.md
@@ -79,6 +79,7 @@ The Shelf is a theme block responsible for showing a **collection of products**
 | `hideUnavailableItems`     | `Boolean`                        | Hides items that are unavailable.                                                                                                                                                                                                                      | `false`           |
 | `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"` |
 | `paginationDotsVisibility` | `Enum`                           | Controls if pagination dots below the Shelf should be rendered or not. Possible values: `visible` (always show), `hidden` (never show), `desktopOnly`, `mobileOnly`                                                                                    | `visible`         |
+| `navigationStep` | `number` &#124; `'page'` | How many elements should pass when you click in the arrows to navigate | `'page'` |
 | `productList`              | `ProductListSchema`              | Product list schema. For its configuration, you can check the `ProductListSchema` table below.                                                                                                                                                                                                           | -                 |
 
 - For `SkusFilterEnum`:

diff --git a/messages/context.json b/messages/context.json
@@ -57,5 +57,19 @@
   "admin/editor.tabbed-shelf.buttonUrl": "Button URL (absolute)",
   "admin/editor.tabbed-shelf.tabs.items": "Category Item",
   "admin/editor.tabbed-shelf.tabs.items.id": "Category Id",
-  "admin/editor.tabbed-shelf.shelf.title": "Shelf properties"
+  "admin/editor.tabbed-shelf.shelf.title": "Shelf properties",
+  "admin/editor.shelf-properties.title.title": "Title",
+  "admin/editor.shelf-properties.title.description": "Title of the shelf",
+  "admin/editor.shelf-properties.show-title.title": "Show title",
+  "admin/editor.shelf-properties.show-title.description": "If it should show the title of the shelf",
+  "admin/editor.shelf-properties.min-items-per-page.title": "Minimum items per page",
+  "admin/editor.shelf-properties.min-items-per-page.description": "The minimum amount of items that should be on the screen at the same time",
+  "admin/editor.shelf-properties.items-per-page.title": "Items per slide window",
+  "admin/editor.shelf-properties.items-per-page.description": "The amount of items that should be on the screen at the same time",
+  "admin/editor.shelf-properties.arrows.title": "Show arrows",
+  "admin/editor.shelf-properties.arrows.description": "If it should display the arrows to control the shelf",
+  "admin/editor.shelf-properties.autoplay.title": "Autoplay",
+  "admin/editor.shelf-properties.autoplay.description": "If it should be passing the slides automatically",
+  "admin/editor.shelf-properties.navigation-step.title": "Navigation step",
+  "admin/editor.shelf-properties.navigation-step.description": "How many items it should pass when the arrows are clicked. You can pass a number or you can pass \"page\" (without the quotes) to pass all the items of the window"
 }
diff --git a/messages/en.json b/messages/en.json
@@ -57,5 +57,18 @@
   "admin/editor.tabbed-shelf.tabs.items": "Category Item",
   "admin/editor.tabbed-shelf.tabs.items.id": "Category Id",
   "admin/editor.tabbed-shelf.tabs": "Tabs",
-  "admin/editor.tabbed-shelf.shelf.title": "Shelf"
+  "admin/editor.shelf-properties.title.title": "Title",
+  "admin/editor.shelf-properties.title.description": "Title of the shelf",
+  "admin/editor.shelf-properties.show-title.title": "Show title",
+  "admin/editor.shelf-properties.show-title.description": "If it should show the title of the shelf",
+  "admin/editor.shelf-properties.min-items-per-page.title": "Minimum items per page",
+  "admin/editor.shelf-properties.min-items-per-page.description": "The minimum amount of items that should be on the screen at the same time",
+  "admin/editor.shelf-properties.items-per-page.title": "Items per slide window",
+  "admin/editor.shelf-properties.items-per-page.description": "The amount of items that should be on the screen at the same time",
+  "admin/editor.shelf-properties.arrows.title": "Show arrows",
+  "admin/editor.shelf-properties.arrows.description": "If it should display the arrows to control the shelf",
+  "admin/editor.shelf-properties.autoplay.title": "Autoplay",
+  "admin/editor.shelf-properties.autoplay.description": "If it should be passing the slides automatically",
+  "admin/editor.shelf-properties.navigation-step.title": "Navigation step",
+  "admin/editor.shelf-properties.navigation-step.description": "How many items it should pass when the arrows are clicked. You can pass a number or you can pass \"page\" (without the quotes) to pass all the items of the window"
 }
diff --git a/messages/es.json b/messages/es.json
@@ -46,5 +46,19 @@
   "admin/editor.relatedProducts.accessories": "Productos de accesorios",
   "admin/editor.relatedProducts.viewAndBought": "Quien vio esto, también compró ...",
   "admin/editor.relatedProducts.suggestions": "Sugerencias",
-  "store/shelf.title": "Mejores Productos"
+  "store/shelf.title": "Mejores Productos",
+  "admin/editor.shelf-properties.title.title": "Título",
+  "admin/editor.shelf-properties.title.description": "Título del estante",
+  "admin/editor.shelf-properties.show-title.title": "Mostrar título",
+  "admin/editor.shelf-properties.show-title.description": "Si debe mostrar el título del vitrina",
+  "admin/editor.shelf-properties.min-items-per-page.title": "Artículos mínimos por página",
+  "admin/editor.shelf-properties.min-items-per-page.description": "La cantidad mínima de elementos que deben estar en la pantalla al mismo tiempo",
+  "admin/editor.shelf-properties.items-per-page.title": "Artículos por ventana de diapositivas",
+  "admin/editor.shelf-properties.items-per-page.description": "La cantidad de elementos que deberían estar en la pantalla al mismo tiempo",
+  "admin/editor.shelf-properties.arrows.title": "Mostrar flechas",
+  "admin/editor.shelf-properties.arrows.description": "Si debe mostrar las flechas para controlar el vitrina",
+  "admin/editor.shelf-properties.autoplay.title": "Reproducción automática",
+  "admin/editor.shelf-properties.autoplay.description": "Si pasar diapositivas automáticamente",
+  "admin/editor.shelf-properties.navigation-step.title": "Paso de navegación",
+  "admin/editor.shelf-properties.navigation-step.description": "Cuántos elementos debe pasar cuando se hace clic en las flechas. Puede pasar un número o puede passar \"page\" 9sin las comillas) para pasar todos los elementos de la ventana"
 }
diff --git a/messages/pt.json b/messages/pt.json
@@ -46,5 +46,19 @@
   "admin/editor.relatedProducts.accessories": "Produtos de acessórios",
   "admin/editor.relatedProducts.viewAndBought": "Quem viu isto, comprou também...",
   "admin/editor.relatedProducts.suggestions": "Sugestões",
-  "store/shelf.title": "Melhores Produtos"
+  "store/shelf.title": "Melhores Produtos",
+  "admin/editor.shelf-properties.title.title": "Título",
+  "admin/editor.shelf-properties.title.description": "Título da vitrine",
+  "admin/editor.shelf-properties.show-title.title": "Mostrar título",
+  "admin/editor.shelf-properties.show-title.description": "Se deveria mostrar o título da vitrine",
+  "admin/editor.shelf-properties.min-items-per-page.title": "Mínimo de itens por janela de slide",
+  "admin/editor.shelf-properties.min-items-per-page.description": "A quantidade mínima de itens que devem estar na tela ao mesmo tempo",
+  "admin/editor.shelf-properties.items-per-page.title": "Itens por janela do slide",
+  "admin/editor.shelf-properties.items-per-page.description": "A quantidade de itens que devem estar na tela ao mesmo tempo",
+  "admin/editor.shelf-properties.arrows.title": "Mostrar setas",
+  "admin/editor.shelf-properties.arrows.description": "Se deve exibir as setas para controlar a vitrine",
+  "admin/editor.shelf-properties.autoplay.title": "Reprodução automática",
+  "admin/editor.shelf-properties.autoplay.description": "Se deveria passar os slides automaticamente",
+  "admin/editor.shelf-properties.navigation-step.title": "Passo de navegação",
+  "admin/editor.shelf-properties.navigation-step.description": "Quantos itens ele deve passar quando as setas são clicadas. Você pode passar um número ou \"page\" (sem as aspas) para passar todos os itens da janela"
 }
diff --git a/react/Shelf.js b/react/Shelf.js
@@ -25,11 +25,12 @@ const { ProductListProvider } = ProductListContext
 /**
  * Shelf Component. Queries a list of products and shows them.
  */
-const Shelf = ({
-  data,
-  productList = ProductList.defaultProps,
-  paginationDotsVisibility = 'visible',
-}) => {
+const Shelf = props => {
+  const {
+    data,
+    paginationDotsVisibility = 'visible',
+    productList = ProductList.defaultProps,
+  } = props
   const handles = useCssHandles(CSS_HANDLES)
   const { isMobile } = useDevice()
   const { loading, error, products } = data || {}
@@ -38,16 +39,13 @@ const Shelf = ({
     return products && products.map(normalizeBuyable).filter(Boolean)
   }, [products])
 
-  const productListProps = useMemo(
-    () => ({
-      products: filteredProducts,
-      loading: loading,
-      isMobile,
-      paginationDotsVisibility,
-      ...productList,
-    }),
-    [filteredProducts, loading, isMobile, paginationDotsVisibility, productList]
-  )
+  const productListProps = {
+    ...productList,
+    isMobile,
+    loading: loading,
+    paginationDotsVisibility,
+    products: filteredProducts,
+  }
 
   if (loading) {
     return <Loading />
@@ -120,70 +118,8 @@ const options = {
 
 const EnhancedShelf = graphql(productsQuery, options)(Shelf)
 
-EnhancedShelf.getSchema = props => {
-  return {
-    title: 'admin/editor.shelf.title',
-    description: 'admin/editor.shelf.description',
-    type: 'object',
-    properties: {
-      category: {
-        title: 'admin/editor.shelf.category.title',
-        description: 'admin/editor.shelf.category.description',
-        type: 'string',
-        isLayout: false,
-      },
-      specificationFilters: {
-        title: 'admin/editor.shelf.specificationFilters.title',
-        type: 'array',
-        items: {
-          title: 'admin/editor.shelf.specificationFilters.item.title',
-          type: 'object',
-          properties: {
-            id: {
-              type: 'string',
-              title: 'admin/editor.shelf.specificationFilters.item.id.title',
-            },
-            value: {
-              type: 'string',
-              title: 'admin/editor.shelf.specificationFilters.item.value.title',
-            },
-          },
-        },
-      },
-      collection: {
-        title: 'admin/editor.shelf.collection.title',
-        type: 'string',
-        isLayout: false,
-      },
-      orderBy: {
-        title: 'admin/editor.shelf.orderBy.title',
-        type: 'string',
-        enum: getOrdenationValues(),
-        enumNames: getOrdenationNames(),
-        default: OrdenationTypes.ORDER_BY_RELEVANCE.value,
-        isLayout: false,
-      },
-      productList: ProductList.getSchema(props),
-      hideUnavailableItems: {
-        title: 'admin/editor.shelf.hideUnavailableItems',
-        type: 'boolean',
-        default: false,
-        isLayout: false,
-      },
-      skusFilter: {
-        title: 'admin/editor.shelf.skusFilter',
-        description: 'admin/editor.shelf.skusFilter.description',
-        type: 'string',
-        default: 'ALL_AVAILABLE',
-        enum: ['ALL_AVAILABLE', 'ALL', 'FIRST_AVAILABLE'],
-        enumNames: [
-          'admin/editor.shelf.skusFilter.all-available',
-          'admin/editor.shelf.skusFilter.none',
-          'admin/editor.shelf.skusFilter.first-available',
-        ],
-      },
-    },
-  }
+EnhancedShelf.schema = {
+  title: 'admin/editor.shelf.title',
 }
 
 export default EnhancedShelf
diff --git a/react/__test__/Shelf.test.js b/react/__test__/Shelf.test.js
@@ -16,12 +16,8 @@ describe('Shelf component', () => {
       showTitle: true,
     }
 
-    // TODO: Remove this later when we have a better way to resolve contentSchemas.json at test-tools
-    const rawData = fs.readFileSync('../store/contentSchemas.json')
-    const contentSchema = JSON.parse(rawData)
-    const titleTextId = contentSchema.definitions.ProductList.properties.titleText.default
-
-    const wrapper = render(<ProductList titleText={titleTextId} {...props} {...customProps} />)
+    const titleText = 'store/shelf.title'
+    const wrapper = render(<ProductList titleText={titleText} {...props} {...customProps} />)
     return wrapper
   }
 
@@ -42,7 +38,7 @@ describe('Shelf component', () => {
   })
 
   it('should show in Site Editor', () => {
-    const schema = Shelf.schema || Shelf.getSchema({})
+    const { schema } = Shelf
     expect(schema).toBeDefined()
     expect(typeof schema.title).toBe('string')
   })

diff --git a/react/components/ProductList.js b/react/components/ProductList.js
@@ -8,14 +8,8 @@ import {
   productListSchemaPropTypes,
   shelfItemPropTypes,
 } from '../utils/propTypes'
-import ScrollTypes, {
-  getScrollNames,
-  getScrollValues,
-} from '../utils/ScrollTypes'
-import GapPaddingTypes, {
-  getGapPaddingNames,
-  getGapPaddingValues,
-} from '../utils/paddingEnum'
+import ScrollTypes from '../utils/ScrollTypes'
+import GapPaddingTypes from '../utils/paddingEnum'
 import ShelfContent from './ShelfContent'
 import ProductListEventCaller from './ProductListEventCaller'
 
@@ -29,20 +23,24 @@ const DEFAULT_MIN_ITEMS_PER_PAGE = 1
  * Product List Component. Shows a collection of products.
  */
 const ProductList = ({
-  products,
-  maxItems,
-  titleText,
+  gap,
   arrows,
   scroll,
-  minItemsPerPage,
-  itemsPerPage,
   summary,
+  maxItems,
+  products,
   isMobile,
-  gap,
+  autoplay,
   showTitle,
+  titleText,
+  itemsPerPage,
+  minItemsPerPage,
   paginationDotsVisibility,
+  navigationStep: navigationStepProp,
 }) => {
   const handles = useCssHandles(CSS_HANDLES)
+  const navigationStep = isNaN(parseInt(navigationStepProp)) ? navigationStepProp : parseInt(navigationStepProp)
+
   return products && !products.length ? null : (
     <Fragment>
       {showTitle && (
@@ -55,17 +53,19 @@ const ProductList = ({
       <ReactResizeDetector handleWidth>
         {width => (
           <ShelfContent
-            products={products}
-            maxItems={maxItems}
+            gap={gap}
+            width={width}
             arrows={arrows}
             scroll={scroll}
-            paginationDotsVisibility={paginationDotsVisibility}
-            minItemsPerPage={minItemsPerPage}
-            itemsPerPage={itemsPerPage}
             summary={summary}
+            products={products}
+            maxItems={maxItems}
             isMobile={isMobile}
-            width={width}
-            gap={gap}
+            autoplay={autoplay}
+            itemsPerPage={itemsPerPage}
+            navigationStep={navigationStep}
+            minItemsPerPage={minItemsPerPage}
+            paginationDotsVisibility={paginationDotsVisibility}
           />
         )}
       </ReactResizeDetector>
@@ -74,57 +74,6 @@ const ProductList = ({
   )
 }
 
-ProductList.getSchema = () => {
-  return {
-    title: 'admin/editor.shelf.title',
-    description: 'admin/editor.shelf.description',
-    type: 'object',
-    properties: {
-      maxItems: {
-        title: 'admin/editor.shelf.maxItems.title',
-        type: 'number',
-        default: ProductList.defaultProps.maxItems,
-        isLayout: true,
-      },
-      gap: {
-        title: 'admin/editor.shelf.gap.title',
-        type: 'string',
-        enum: getGapPaddingValues(),
-        enumNames: getGapPaddingNames(),
-        default: GapPaddingTypes.SMALL.value,
-        isLayout: true,
-      },
-      itemsPerPage: {
-        title: 'admin/editor.shelf.itemsPerPage.title',
-        type: 'number',
-        enum: [3, 4, 5],
-        default: ProductList.defaultProps.itemsPerPage,
-        isLayout: true,
-      },
-      scroll: {
-        title: 'admin/editor.shelf.scrollType.title',
-        type: 'string',
-        enum: getScrollValues(),
-        enumNames: getScrollNames(),
-        default: ScrollTypes.BY_PAGE.value,
-        isLayout: true,
-      },
-      arrows: {
-        title: 'admin/editor.shelf.arrows.title',
-        type: 'boolean',
-        default: ProductList.defaultProps.arrows,
-        isLayout: true,
-      },
-      showTitle: {
-        title: 'admin/editor.shelf.titleText.showTitle',
-        type: 'boolean',
-        default: ProductList.defaultProps.showTitle,
-        isLayout: true,
-      },
-    },
-  }
-}
-
 ProductList.defaultProps = {
   maxItems: DEFAULT_MAX_ITEMS,
   minItemsPerPage: DEFAULT_MIN_ITEMS_PER_PAGE,
@@ -154,4 +103,8 @@ ProductList.propTypes = {
   ...productListSchemaPropTypes,
 }
 
+ProductList.schema = {
+  title: 'admin/editor.shelf.title',
+}
+
 export default ProductList