Merge 777ee3a into 12e933c

CHANGELOG.md

@@ -7,7 +7,13 @@ and this project adheres to [Semantic Versioning](http://semver.org/spec/v2.0.0.
 
 ## [Unreleased]
 
+### Changed
+
+- Use `vtex.css-handles`.
+- Transform `Carousel` component in a functional component.
+
 ## [2.11.3] - 2019-10-25
+
 ### Chore
 - New release to trigger a rebuild enabling lazy evaluation of carousel entrypoints
 

manifest.json

@@ -20,7 +20,8 @@
     "vtex.store-components": "3.x",
     "vtex.slider": "0.x",
     "vtex.store-icons": "0.x",
-    "vtex.device-detector": "0.x"
+    "vtex.device-detector": "0.x",
+    "vtex.css-handles": "0.x"
   },
   "$schema": "https://raw.githubusercontent.com/vtex/node-vtex-api/master/gen/manifest.schema"
 }

react/Banner.tsx

@@ -1,22 +1,21 @@
-import PropTypes from 'prop-types'
 import React from 'react'
 import { Link } from 'vtex.render-runtime'
 import { useDevice } from 'vtex.device-detector'
-import styles from './styles.css'
 import classnames from 'classnames'
+import { useCssHandles } from 'vtex.css-handles'
+import styles from './styles.css'
 
-interface DefaultProps {
-  /** Max height size of the banner */
-  height: number
-}
+const CSS_HANDLES = ['imgRegular', 'img', 'bannerLink'] as const
 
-export interface Props extends DefaultProps {
+export interface Props {
   /** The image of the banner */
   image: string
   /** Link for the mobile image of the banner */
   mobileImage: string
   /** The description of the image */
   description: string
+  /** Max height size of the banner */
+  height: number
   /** The url where the image is pointing to, in case of external route */
   url: string
   /** The page where the image is pointing to */
@@ -44,35 +43,33 @@ function getParams(params: string) {
   return null
 }
 
-/**
- * Banner component. Shows an image with a description and one link.
- */
 const Banner = (props: Props) => {
   const {
-    height,
-    image,
-    mobileImage,
-    description,
-    page,
     url,
+    page,
+    image,
     params,
+    mobileImage,
+    height = 420,
     externalRoute,
+    description = '',
     customInternalURL,
   } = props
 
   const { isMobile } = useDevice()
+  const handles = useCssHandles(CSS_HANDLES)
 
   const content = (
     <div className={classnames(styles.containerImg, 'w-100')}>
       <div
         className={classnames(
-          styles.imgRegular,
+          handles.imgRegular,
           'flex items-center justify-center'
         )}
         style={{ maxHeight: height }}
       >
         <img
-          className={classnames(styles.img, 'w-100 h-100')}
+          className={classnames(handles.img, 'w-100 h-100')}
           src={isMobile && mobileImage ? mobileImage : image}
           alt={description}
         />
@@ -83,7 +80,7 @@ const Banner = (props: Props) => {
   if (!externalRoute) {
     return page || customInternalURL ? (
       <Link
-        className={classnames(styles.bannerLink, 'w-100')}
+        className={classnames(handles.bannerLink, 'w-100')}
         page={customInternalURL ? undefined : page}
         params={getParams(params)}
         to={customInternalURL || undefined}
@@ -97,7 +94,7 @@ const Banner = (props: Props) => {
 
   return (
     <a
-      className={classnames(styles.bannerLink, 'w-100')}
+      className={classnames(handles.bannerLink, 'w-100')}
       href={url}
       target="_blank"
     >
@@ -106,30 +103,4 @@ const Banner = (props: Props) => {
   )
 }
 
-Banner.propTypes = {
-  /** The description of the image */
-  description: PropTypes.string.isRequired,
-  /** Indicates if the route is external or not */
-  externalRoute: PropTypes.bool,
-  /** Max height size of the banner */
-  height: PropTypes.number.isRequired,
-  /** The image of the banner */
-  image: PropTypes.string.isRequired,
-  /** The mobile image of the banner */
-  mobileImage: PropTypes.string,
-  /** The page where the image is pointing to */
-  page: PropTypes.string,
-  /** Params of the url */
-  params: PropTypes.string,
-  /** The url where the image is pointing to, in case of external route */
-  url: PropTypes.string,
-  /** The url where the image is pointing to, in case of internal route */
-  customInternalURL: PropTypes.string,
-}
-
-Banner.defaultProps = {
-  height: 420,
-  description: '',
-}
-
 export default Banner