Add classnames

vtex-apps · May 24, 2019 · 57cbd90 · 57cbd90
1 parent 0f3c9bb
commit 57cbd90
Show file tree

Hide file tree

Showing 8 changed files with 51 additions and 40 deletions.
diff --git a/react/next/components/Arrow.tsx b/react/next/components/Arrow.tsx
@@ -1,4 +1,5 @@
 import React, { memo, FC, ComponentType } from 'react'
+import csx from 'classnames'
 import { IconCaret } from 'vtex.store-icons'
 
 import Clickable from './Clickable'
@@ -16,9 +17,7 @@ const Arrow: FC<Props> = props => {
   const { custom, orientation, action, className, controls, disabled } = props
   return (
     <Clickable
-      className={`${className} ${
-        orientation === 'left' ? 'left-1' : 'right-1'
-      }`}
+      className={csx(className, orientation === 'left' ? 'left-1' : 'right-1')}
       onClick={() => action()}
       aria-controls={controls}
       aria-label={`${orientation === 'left' ? 'Previous' : 'Next'} Slide`}

diff --git a/react/next/components/Clickable.tsx b/react/next/components/Clickable.tsx
@@ -1,4 +1,5 @@
 import React, { FC } from 'react'
+import csx from 'classnames'
 import { Button } from '../typings/global'
 
 /**
@@ -10,7 +11,10 @@ const Clickable: FC<Button> = props => {
 
   return (
     <button
-      className={`${className} absolute ma2 transparent flex items-center justify-center bn outline-0 pointer`}
+      className={csx(
+        className,
+        'absolute ma2 transparent flex items-center justify-center bn outline-0 pointer'
+      )}
       style={{
         background: 'transparent',
         ...style,

diff --git a/react/next/components/Dots.tsx b/react/next/components/Dots.tsx
@@ -1,4 +1,5 @@
 import React, { memo, FC } from 'react'
+import csx from 'classnames'
 
 const DOTS_DEFAULT_SIZE = 0.625
 
@@ -98,12 +99,14 @@ const Dots: FC<Props> = props => {
         index === getSelectedDot(passVisibleSlides, currentSlide, slidesToShow)
       return (
         <div
-          className={`${classNames!.dot} ${
-            isActive ? 'bg-emphasis' : 'bg-muted-3'
-          } grow dib br-100 pa2 mr2 ml2 bw0 pointer outline-0`}
+          className={csx(
+            classNames!.dot,
+            isActive ? 'bg-emphasis' : 'bg-muted-3',
+            'grow dib br-100 pa2 mr2 ml2 bw0 pointer outline-0'
+          )}
           style={{
             height: `${DOTS_DEFAULT_SIZE}rem`,
-            width: `${DOTS_DEFAULT_SIZE}rem`
+            width: `${DOTS_DEFAULT_SIZE}rem`,
           }}
           key={index}
           tabIndex={index}

diff --git a/react/next/components/Slide.tsx b/react/next/components/Slide.tsx
@@ -1,4 +1,5 @@
 import React, { FC } from 'react'
+import csx from 'classnames'
 import { Div } from '../typings/global'
 
 interface Props extends Div {
@@ -12,7 +13,7 @@ const Slide: FC<Props> = props => {
   const { width, style, className, children, ...rest } = props
   return (
     <div
-      className={`${className} flex relative`}
+      className={csx(className, 'flex relative')}
       style={{
         width: `${width}px`,
         ...style,

diff --git a/react/next/components/SliderTrack.tsx b/react/next/components/SliderTrack.tsx
@@ -1,4 +1,5 @@
 import React, { FC } from 'react'
+import csx from 'classnames'
 import { transitionType, Div } from '../typings/global'
 
 interface Props extends Div {
@@ -15,7 +16,7 @@ const SliderTrack: FC<Props> = ({
   ...rest
 }) => (
   <div
-    className={`${className} flex relative pa0 ma0`}
+    className={csx(className, 'flex relative pa0 ma0')}
     style={{
       willChange: 'transform',
       transition: `transform ${transition.speed}ms ${transition.timing}`,

diff --git a/react/next/components/Thumbnails.tsx b/react/next/components/Thumbnails.tsx
@@ -1,4 +1,5 @@
 import React, { memo, FC } from 'react'
+import csx from 'classnames'
 
 interface Props {
   currentSlide: number
@@ -24,38 +25,39 @@ interface Props {
 const Thumbnails: FC<Props> = props => {
   const { goToSlide, thumbnails, currentSlide, controls, classNames } = props
 
-  const getThumbClass = (index: number) =>
-    `${classNames!.thumbnail} ${
-      currentSlide === index
-        ? `${classNames!.selectedThumbnail} ba bw1 b--emphasis `
-        : ''
-    } pointer ma2 h-auto w-90`
+  const selectedThumbClass = csx(
+    classNames!.selectedThumbnail,
+    'ba bw1 b--emphasis'
+  )
 
-  const renderTumbnails = () => {
-    const { items } = thumbnails!
-    return items.map((item, i) => (
-      <img
-        src={item.url}
-        key={item.forSlide}
-        className={getThumbClass(item.forSlide)}
-        onClick={() => goToSlide(item.forSlide)}
-        role="button"
-        ria-controls={controls}
-        aria-label={`Thumbnail ${i + 1} of ${items!.length}`}
-      />
-    ))
-  }
+  const getThumbClass = (index: number) =>
+    csx(
+      classNames!.thumbnail,
+      'pointer ma2 h-auto w-90',
+      currentSlide === index && selectedThumbClass
+    )
 
   return (
     <div
-      className={`${classNames!.thumbnails} flex flex-column justify-start`}
+      className={csx(classNames!.thumbnails, 'flex flex-column justify-start')}
       style={{
         width: thumbnails!.width,
       }}
       role="group"
       aria-label="Carousel Tumbnails"
     >
-      {renderTumbnails()}
+      {thumbnails &&
+        thumbnails.items.map((item, i) => (
+          <img
+            src={item.url}
+            key={item.forSlide}
+            className={getThumbClass(item.forSlide)}
+            onClick={() => goToSlide(item.forSlide)}
+            role="button"
+            ria-controls={controls}
+            aria-label={`Thumbnail ${i + 1} of ${thumbnails.items!.length}`}
+          />
+        ))}
     </div>
   )
 }

diff --git a/react/next/index.tsx b/react/next/index.tsx
@@ -1,4 +1,5 @@
 import React, { FC, useReducer, useRef, useEffect } from 'react'
+import csx from 'classnames'
 
 import { SliderProps } from './typings/global'
 import { getItemClientSideWidth, populateSlides } from './utils/index'
@@ -189,7 +190,7 @@ const SliderNext: FC<SliderProps> = props => {
     )
   }
 
-  const renderTumbnails = (): React.ReactNode => {
+  const renderThumbnails = (): React.ReactNode => {
     return (
       <Thumbnails
         {...state}
@@ -213,11 +214,13 @@ const SliderNext: FC<SliderProps> = props => {
 
   const hasThumbsleft = props.thumbnails && props.thumbnails.position === 'left'
 
-  const containerClasses = `${props.classNames!.sliderContainer} flex w-100`
+  const containerClasses = csx(props.classNames!.sliderContainer, 'flex w-100')
 
-  const sliderContainerClasses = `${
-    props.classNames!.sliderContainer
-  } ${hasThumbsleft && 'order-1'} flex items-center relative overflow-hidden`
+  const sliderContainerClasses = csx(
+    props.classNames!.sliderContainer,
+    hasThumbsleft && 'order-1',
+    'flex items-center relative overflow-hidden'
+  )
 
   return (
     <section
@@ -247,7 +250,7 @@ const SliderNext: FC<SliderProps> = props => {
         {shouldShowArrows && renderRightArrow()}
         {props.showDots && renderDotsList()}
       </div>
-      {props.thumbnails && renderTumbnails()}
+      {props.thumbnails && renderThumbnails()}
     </section>
   )
 }

diff --git a/react/next/typings/global.d.ts b/react/next/typings/global.d.ts
@@ -69,8 +69,6 @@ interface SliderProps {
   showDots?: boolean
   /** Custom transition */
   transition?: transitionType
-  /** If should show tumbnails or not */
-  showTumbnails?: boolean
   /** Thumbnails props */
   thumbnails?: {
     /** Array of thumbnails */