Merge bae9669 into a8ee7ee

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
+- A few new css class handles and changed them to use the `cssHandles` app
 
 ## [1.31.3] - 2019-10-17
 ### Fixed

docs/README.md

@@ -234,14 +234,30 @@ To use this CSS API, you must add the `styles` builder and create an app styling
 
 #### CSS namespaces
 
-Below, we describe the namespaces that are defined in the `Shelf` and `RelatedProducts`.
-
-| Class name        | Description                             | Component Source                |
-| ----------------- | --------------------------------------- | ------------------------------- |
-| `container`       | The main container of `Shelf`           | [index](/react/Shelf.js)        |
-| `title`           | Shelf title label                       | [index](/react/ProductList.js)  |
-| `relatedProducts` | The main container of `RelatedProducts` | [index](/react/index.js)        |
-| `slide`           | Slider in Shelf                         | [Popup](/react/ShelfContent.js) |
+Below, we describe the namespaces that are defined in the `Shelf`, `RelatedProducts` and  `TabbedShelf`.
+
+| Class name        | 
+| ----------------- | 
+| `container`       | 
+| `title`           | 
+| `relatedProducts` | 
+| `arrow`           |
+| `dot`           |
+| `slide`           |
+| `blockContainer`           |
+| `blockText`           |
+| `buttonContainer`           |
+| `arrowLeft`           |
+| `arrowRight`           |
+| `shelfContentContainer`           |
+| `sliderContainer`           |
+| `headline`           |
+| `itemContainer`           |
+| `itemContainerSelected`           |
+| `itemContainerUnselected`           |
+| `tabsContainer`           |
+| `tabsNamesContainer`           |
+| `shelfContainer`           |
 
 ## Troubleshooting
 

manifest.json

@@ -25,7 +25,8 @@
     "vtex.pixel-manager": "1.x",
     "vtex.device-detector": "0.x",
     "vtex.search-graphql": "0.x",
-    "vtex.product-context": "0.x"
+    "vtex.product-context": "0.x",
+    "vtex.css-handles": "0.x"
   },
   "$schema": "https://raw.githubusercontent.com/vtex/node-vtex-api/master/gen/manifest.schema"
 }

react/RelatedProducts.js

@@ -5,11 +5,13 @@ import { Query } from 'react-apollo'
 import { useDevice } from 'vtex.device-detector'
 
 import { useProduct } from 'vtex.product-context'
+import { useCssHandles } from 'vtex.css-handles'
 import productRecommendations from './queries/productRecommendations.gql'
 
 import ProductList from './components/ProductList'
 import { productListSchemaPropTypes } from './utils/propTypes'
-import shelf from './components/shelf.css'
+
+const CSS_HANDLES = ['relatedProducts']
 
 // Previous values were in a wrong format with the message string in the enum value.
 const fixRecommendation = recommendation => {
@@ -27,6 +29,7 @@ const RelatedProducts = ({
   productList,
   recommendation: cmsRecommendation,
 }) => {
+  const handles = useCssHandles(CSS_HANDLES)
   const { isMobile } = useDevice()
 
   const productContext = useProduct()
@@ -71,7 +74,7 @@ const RelatedProducts = ({
           ...productList,
         }
         return (
-          <div className={shelf.relatedProducts}>
+          <div className={handles.relatedProducts}>
             <ProductList {...productListProps} />
           </div>
         )

react/Shelf.js

@@ -4,6 +4,7 @@ import { graphql } from 'react-apollo'
 import { Loading } from 'vtex.render-runtime'
 import { useDevice } from 'vtex.device-detector'
 import { usePixel } from 'vtex.pixel-manager/PixelContext'
+import { useCssHandles } from 'vtex.css-handles'
 import { useInView } from 'react-intersection-observer'
 
 import OrdenationTypes, {
@@ -15,9 +16,10 @@ import { productListSchemaPropTypes } from './utils/propTypes'
 import productsQuery from './queries/productsQuery.gql'
 import ShelfContent from './components/ShelfContent'
 
-import shelf from './components/shelf.css'
 import { parseToProductImpression, normalizeBuyable } from './utils/normalize'
 
+const CSS_HANDLES = ['container']
+
 const useProductImpression = (products, inView) => {
   const viewed = useRef(false)
   const { push } = usePixel()
@@ -48,6 +50,7 @@ const useProductImpression = (products, inView) => {
  * Shelf Component. Queries a list of products and shows them.
  */
 const Shelf = ({ data, productList = ProductList.defaultProps, paginationDotsVisibility = 'visible' }) => {
+  const handles = useCssHandles(CSS_HANDLES)
   const { isMobile }  = useDevice()
   const { loading, error, products } = data || {}
 
@@ -77,7 +80,7 @@ const Shelf = ({ data, productList = ProductList.defaultProps, paginationDotsVis
   }
 
   return (
-    <div ref={ref} className={`${shelf.container} pv4 pb9`}>
+    <div ref={ref} className={`${handles.container} pv4 pb9`}>
       <ProductList {...productListProps} />
     </div>
   )

react/__mocks__/vtex.css-handles.js

@@ -0,0 +1,31 @@
+import React from 'react'
+
+export const useCssHandles = cssHandles => {
+  const handles = {}
+  cssHandles.forEach(handle => {
+    handles[handle] = handle
+  })
+
+  return handles
+}
+
+export function applyModifiers(baseClass, modifier) {
+  return `${baseClass}--${modifier}`
+}
+
+export const withCssHandles = (
+  handles
+) => (
+  Component
+) => {
+  const EnhancedComponent = props => {
+    const cssHandles = useCssHandles(handles)
+
+    return <Component cssHandles={cssHandles} {...props} />
+  }
+
+  const displayName = Component.displayName || Component.name || 'Component'
+  EnhancedComponent.displayName = `withCssHandles(${displayName})`
+  EnhancedComponent.propTypes = Component.propTypes
+  return EnhancedComponent
+}

react/__test__/__snapshots__/Shelf.test.js.snap

@@ -11,7 +11,7 @@ exports[`Shelf component should match the snapshot 1`] = `
   </div>
   <div>
     <div
-      class="flex justify-center"
+      class="shelfContentContainer flex justify-center"
     >
       <div
         class="slider-container-mock"

react/components/ProductList.js

@@ -2,6 +2,7 @@ import PropTypes from 'prop-types'
 import React, { Fragment } from 'react'
 import ReactResizeDetector from 'react-resize-detector'
 import { IOMessage } from 'vtex.native-types'
+import { useCssHandles } from 'vtex.css-handles'
 
 import { productListSchemaPropTypes, shelfItemPropTypes } from '../utils/propTypes'
 import ScrollTypes, { getScrollNames, getScrollValues } from '../utils/ScrollTypes'
@@ -11,7 +12,7 @@ import GapPaddingTypes, {
 } from '../utils/paddingEnum'
 import ShelfContent from './ShelfContent'
 
-import shelf from './shelf.css'
+const CSS_HANDLES = ['title']
 
 const DEFAULT_MAX_ITEMS = 10
 const DEFAULT_ITEMS_PER_PAGE = 5
@@ -34,12 +35,13 @@ const ProductList = ({
   showTitle,
   paginationDotsVisibility,
 }) => {
+  const handles = useCssHandles(CSS_HANDLES)
   return products && !products.length ? null : (
     <Fragment>
       {showTitle && (
         <div
           className={`${
-            shelf.title
+            handles.title
           } t-heading-2 fw3 w-100 flex justify-center pt7 pb6 c-muted-1`}
         >
           <IOMessage id={titleText} />

react/components/ShelfContent.js

@@ -5,15 +5,15 @@ import { IconCaret } from 'vtex.store-icons'
 import classNames from 'classnames'
 import { NoSSR } from 'vtex.render-runtime'
 import { Slider, Slide, Dots, SliderContainer } from 'vtex.slider'
-
+import { withCssHandles } from 'vtex.css-handles'
 import { getGapPaddingValues } from '../utils/paddingEnum'
 import { resolvePaginationDotsVisibility } from '../utils/resolvePaginationDots'
 import ScrollTypes from '../utils/ScrollTypes'
 import ShelfItem from './ShelfItem'
 import { shelfItemPropTypes } from '../utils/propTypes'
-
 import shelf from './shelf.css'
 
+const CSS_HANDLES = ['arrow', 'arrowLeft', 'arrowRight', 'shelfContentContainer', 'sliderContainer', 'slide']
 const SLIDER_WIDTH_ONE_ELEMENT = 320
 const SLIDER_WIDTH_TWO_ELEMENTS = 500
 const SLIDER_WIDTH_THREE_ELEMENTS = 750
@@ -60,13 +60,13 @@ class ShelfContent extends Component {
   }
 
   arrowRender = ({ orientation, onClick }) => {
-    const { gap } = this.props
+    const { gap, cssHandles } = this.props
     const containerClasses = classNames(
       shelf.arrow,
       'pointer z-1 flex absolute',
       {
-        [`${shelf.arrowLeft} left-0 ${gap}`]: orientation === 'left',
-        [`${shelf.arrowRight} right-0 ${gap}`]: orientation === 'right',
+        [`${cssHandles.arrowLeft} left-0 ${gap}`]: orientation === 'left',
+        [`${cssHandles.arrowRight} right-0 ${gap}`]: orientation === 'right',
       }
     )
     return (
@@ -90,6 +90,7 @@ class ShelfContent extends Component {
       minItemsPerPage,
       paginationDotsVisibility,
       isMobile,
+      cssHandles
     } = this.props
 
     const { currentSlide } = this.state
@@ -107,8 +108,8 @@ class ShelfContent extends Component {
     const customPerPage = !isMobile && itemsPerPage
 
     return (
-      <div className="flex justify-center">
-        <SliderContainer className="w-100 mw9">
+      <div className={`${cssHandles.shelfContentContainer} flex justify-center`}>
+        <SliderContainer className={`${cssHandles.sliderContainer} w-100 mw9`}>
           <Slider
             minPerPage={roundedMinItems}
             perPage={customPerPage || this.perPage}
@@ -123,7 +124,7 @@ class ShelfContent extends Component {
             {productList.slice(0, maxItems).map((item, index) => (
               <Slide
                 sliderTransitionDuration={500}
-                className={classNames('justify-center h-100', gap)}
+                className={classNames('justify-center h-100', gap, cssHandles.slide)}
                 key={path(['productId'], item) || index}
                 defaultWidth={DEFAULT_SHELF_ITEM_WIDTH}
               >
@@ -192,4 +193,4 @@ ShelfContent.propTypes = {
   gap: PropTypes.oneOf(getGapPaddingValues()),
 }
 
-export default ShelfContent
+export default withCssHandles(CSS_HANDLES)(ShelfContent)

react/components/TabbedShelf/Tabs.js

@@ -1,8 +1,11 @@
 import React, { Component } from 'react'
 import classNames from 'classnames'
+import { withCssHandles } from 'vtex.css-handles'
 
 import tabbedShelf from './tabbedShelf.css'
 
+const CSS_HANDLES = ['itemContainer', 'itemContainerSelected', 'itemContainerUnselected', 'tabsContainer', 'tabsNamesContainer', 'shelfContainer']
+
 class Tabs extends Component {
 
   state = {
@@ -12,22 +15,22 @@ class Tabs extends Component {
   handleClick = (index) => this.setState({ selectedIndex: index })
 
   render() {
-    const { panes } = this.props
+    const { panes, cssHandles } = this.props
     const { selectedIndex } = this.state
     if (!panes || panes.length === 0) {
       return null
     }
 
     return (
       <div className="flex justify-center items-center">
-      <div className={`${tabbedShelf.tabsContainer} flex-ns pa6-ns justify-between-ns w-100-s`}>
-        <div className={`${tabbedShelf.tabsNamesContainer} flex flex-column mh6`}>
+      <div className={`${cssHandles.tabsContainer} flex-ns pa6-ns justify-between-ns w-100-s`}>
+        <div className={`${cssHandles.tabsNamesContainer} flex flex-column mh6`}>
           {panes.map((pane, index) => {
             const isSelected = index === selectedIndex
             const isLast = index === panes.length - 1
-            const itemContainer = classNames(`t-body pa4 tl bb b--muted-4 ${tabbedShelf.itemContainer}`, {
-              [`bg-base--inverted c-on-muted-1 ${tabbedShelf.itemContainerSelected}`]: isSelected,
-              [tabbedShelf.itemContainerUnselected]: !isSelected,
+            const itemContainer = classNames(`t-body pa4 tl bb b--muted-4 ${cssHandles.itemContainer}`, {
+              [`bg-base--inverted c-on-muted-1 ${cssHandles.itemContainerSelected}`]: isSelected,
+              [cssHandles.itemContainerUnselected]: !isSelected,
               'bw0': isLast,
             })
             return (
@@ -41,7 +44,7 @@ class Tabs extends Component {
             )
           })}
         </div>
-        <div className={`${tabbedShelf.shelfContainer} mh6-s mw-100 overflow-hidden`}>
+        <div className={`${cssHandles.shelfContainer} mh6-s mw-100 overflow-hidden`}>
           {panes[selectedIndex].render()}
         </div>
       </div>
@@ -50,4 +53,4 @@ class Tabs extends Component {
   }
 }
 
-export default Tabs
+export default withCssHandles(CSS_HANDLES)(Tabs)

react/components/TabbedShelf/index.js

@@ -5,10 +5,11 @@ import { Button } from 'vtex.styleguide'
 import { withRuntimeContext } from 'vtex.render-runtime'
 import Tabs from './Tabs'
 import Shelf from '../../Shelf'
+import { withCssHandles } from 'vtex.css-handles'
+import tabbedShelf from './tabbedShelf.css'
 
 const MAX_NUMBER_OF_MENUS = 6
-
-import tabbedShelf from './tabbedShelf.css'
+const CSS_HANDLES = ['headline'] 
 
 /**
  * Tabbed Shelf Module
@@ -62,7 +63,8 @@ class TabbedShelf extends Component {
             bottomText,
             buttunUrl,
             buttonText,
-            tabs
+            tabs,
+            cssHandles
         } = this.props
 
         const panes = (tabs.length > 0 ? tabs.map(tab => (
@@ -79,7 +81,7 @@ class TabbedShelf extends Component {
             <Fragment>
                 {isEnabled ? (
                     <div className={`${tabbedShelf.container}`}>
-                        <h3 className={`${tabbedShelf.headline}`}>{headline}</h3>
+                        <h3 className={`${cssHandles.headline}`}>{headline}</h3>
                           <Tabs panes={panes} />
                         <div className={`${tabbedShelf.blockContainer}`}>
                             <p className={`${tabbedShelf.blockText}`}>{bottomText}</p>
@@ -153,4 +155,4 @@ TabbedShelf.getSchema = props => ({
     },
 });
 
-export default withRuntimeContext(injectIntl(TabbedShelf))
+export default withRuntimeContext(injectIntl(withCssHandles(CSS_HANDLES)(TabbedShelf)))

react/components/TabbedShelf/tabbedShelf.css

@@ -2,8 +2,6 @@
   display:block;
 }
 
-.headline {}
-
 .container .mh7-ns,
 .container .pv4,
 .container .pb7 {
@@ -68,10 +66,3 @@
       position: relative;
   }
 }
-
-.itemContainer {}
-.itemContainerSelected {}
-.itemContainerUnselected {}
-.tabsContainer {}
-.tabsNamesContainer {}
-.shelfContainer {}