Merge 55fe83e into 4206c17

.gitignore

@@ -48,9 +48,6 @@ build/Release
 node_modules/
 jspm_packages/
 
-# TypeScript v1 declaration files
-typings/
-
 # Optional npm cache directory
 .npm
 

CHANGELOG.md

@@ -7,6 +7,10 @@ and this project adheres to [Semantic Versioning](http://semver.org/spec/v2.0.0.
 
 ## [Unreleased]
 
+### Added
+
+- First version of `SliderNext`.
+
 ## [0.5.3] - 2019-04-12
 
 ### Changed

manifest.json

@@ -10,5 +10,8 @@
   },
   "builders": {
     "react": "3.x"
+  },
+  "dependencies": {
+    "vtex.store-icons": "0.x"
   }
 }

react/SliderNext.js

@@ -0,0 +1,3 @@
+import SliderNext from './next/index'
+
+export default SliderNext

react/next/README.md

@@ -0,0 +1,169 @@
+# Slider Next
+
+## Description
+
+The SliderNext is the upcoming version of VTEX Slider. The main difference is that dots, arrows and slide transitions are now handled by Slider instead of its parent component.
+
+## Table of Contents
+
+- [Usage](#usage)
+  - [Basic](#basic)
+  - [SSR](#ssr)
+  - [Configuration](#configuration)
+- [Upcoming](#upcoming)
+
+## Usage
+
+To import it you can add to you `manifest.json` the following:
+
+```json
+{
+  "dependencies": {
+    "vtex.slider": "0.x"
+  }
+}
+```
+
+And then in your component you can import the components exported from the slider:
+
+```javascript
+import { SliderNext } from 'vtex.slider'
+```
+
+### Basic
+
+The simplistic way of using `SlidexNext` is:
+
+```javascript
+import Product from './Product'
+
+const products = [{ name: 'name', price: 50 }, ... ]
+
+<SliderNext>
+  { products.map(product => <Product {...product} />) }
+</SliderNext>
+```
+
+Check [configuration](#configuration) to see every prop that `SliderNext` can receive.
+
+### Resposive
+
+The `elements` prop will specify how many items will be presented on each breakpoint (`visible`) and how many elements will be passed each type (`toPass`). The `elements` object has the type:
+
+```typescript
+interface responsiveType {
+  /** key is the type name such as mobile, desktop, tablet, ... */
+  [key: string]: {
+    breakpoint: { max: number; min: number }
+    items: number
+  }
+}
+
+interface SliderProps {
+  /** Element props */
+  elements: {
+    /** Number of visible elements per breakpoint */
+    visible: responsiveType
+    /** Number of elements that are passed each time 1 to visible */
+    toPass?: number | 'visible'
+  }
+}
+```
+
+So, on your component you will use it like:
+
+```javascript
+import Product from './Product'
+
+const visibleElements = {
+  desktop: {
+    breakpoint: { max: 3000, min: 1024 },
+    items: 4,
+  },
+  tablet: {
+    // ...
+  },
+  mobile: {
+    // ...
+  },
+}
+
+const products = [
+  { name: 'name', price: 50 },
+  // ...
+]
+
+<SliderNext
+  elements={{
+    visible: visibleElements,
+    toPass: 'visible' // will pass every visible element each arrow click
+  }}
+>
+  { products.map(product => <Product {...product} />) }
+</SliderNext>  
+```
+
+### Configuration
+
+| Prop name | Type | isRequired | defaultValue | Description |
+| --- | --- | --- | --- | --- |
+| `label` | `String` | 🚫 | 'VTEX Slider' | Aria label of slider
+| `deviceType` | `String`  | 🚫 | 🚫 | The device type |
+| `elements` | `SliderElements`  | ✅ | - | Elements props |
+| `children` | `Array<Node!>` | ✅ | 🚫 | Elements to render |
+| `showArrows`  | `Boolean` | 🚫 | true | If should show arrows |
+| `showDots` | `Boolean` | 🚫 | true | If should show dots |
+| `removeArrowOnDeviceType` | `Array<String!>`  | 🚫 | 🚫 | Which device types that arrows should be hidden |
+| `customLeftArrow` | `ComponentType<any>!` | 🚫 | 🚫 | Custom arrow on left |
+| `customRightArrow` | `ComponentType<any>!` | 🚫 | 🚫 | Custom arrow on right |
+| `customDot` | `ComponentType<any>!` | 🚫 | 🚫 | Custom dots |
+| `infinite` | `Boolean` | 🚫 | true | Whatever is infinite mode or not |
+| `classNames` | `ClassNames` | 🚫 | - | Custom classes |
+| `thumbnails` | `Thumbnails` | 🚫 | - | Props for thumbnails |
+
+
+**SliderElements Type**
+
+| Prop name | Type | isRequired | defaultValue | Description |
+| --- | --- | --- | --- | --- |
+| `visible` | `responsiveType` | ✅ | `every: { breakpoint: { max: 3840, min: 0 }, items: 1}` | Number of visible elements per breakpoint |
+| `toPass` | `Number | 'visible'` | 🚫 | 1 | Number of elements that are passed each time 1 to visible |
+
+**ClassNames Type**
+
+| Prop name | Type | isRequired | defaultValue | Description |
+| --- | --- | --- | --- | --- |
+| `slider` | `String` | 🚫 | `''` | Custom classes for slider |
+| `container` | `String` | 🚫 | `''` | Custom classes for container | 
+| `item` | `String` | 🚫 | `''` | Custom classes for item | 
+| `leftArrow` | `String` | 🚫 | `''` | Custom classes for left arrow | 
+| `rightArrow` | `String` | 🚫 | `''` | Custom classes for right arrow | 
+| `dotList` | `String` | 🚫 | `''` | Custom classes for the dot list |
+| `dot` | `String` | 🚫 | `''` | Custom classes for a single dot |
+| `thumbnails` | `String` | 🚫 | `''` | Custom classes for the thumb container |
+| `thumbnail` | `String` | 🚫 | `''` | Custom classes for all single thumbs |
+| `selectedThumbnail` | `String` | 🚫 | `''` | Custom classes for the selected single thumb |
+
+**Thumbnails Props**
+
+| Prop name | Type | isRequired | defaultValue | Description |
+| --- | --- | --- | --- | --- |
+| `items` | `Array<Thumbnail>` | ✅ | 🚫 | Array of thumbnails |
+| `position` | `'left' | 'right'` | ✅ | 🚫 | Thumbs position relative to slider container |
+| `width` | `String` | ✅ | 🚫 | Thumbs width measure can be `rem`, `px`, `%`, etc. |
+
+**Thumbnail Type**
+
+| Prop name | Type | isRequired | defaultValue | Description |
+| --- | --- | --- | --- | --- |
+| `url` | `String` | ✅ | 🚫 | Url of the thumbnail |
+| `forSlide` | `Number` | ✅ | 🚫 | Slide index that it refers to |
+
+## Upcoming
+
+Features that will be added soon:
+
+- Autoplay to support `carousel`
+- Content Loader (Skeleton)
+- Drag and Swipe
+- Create an infinite loop impression (Circular Queue).

react/next/components/Arrow.tsx

@@ -0,0 +1,31 @@
+import React, { memo, FC, ComponentType } from 'react'
+import csx from 'classnames'
+import { IconCaret } from 'vtex.store-icons'
+
+import Clickable from './Clickable'
+
+interface Props {
+  custom?: ComponentType<any>
+  className?: string
+  orientation: 'left' | 'right'
+  action: () => void
+  controls: string
+  disabled: boolean
+}
+
+const Arrow: FC<Props> = props => {
+  const { custom, orientation, action, className, controls, disabled } = props
+  return (
+    <Clickable
+      className={csx(className, orientation === 'left' ? 'left-1' : 'right-1')}
+      onClick={() => action()}
+      aria-controls={controls}
+      aria-label={`${orientation === 'left' ? 'Previous' : 'Next'} Slide`}
+      disabled={disabled}
+    >
+      {custom || <IconCaret size={25} orientation={orientation} thin />}
+    </Clickable>
+  )
+}
+
+export default memo(Arrow)

react/next/components/Clickable.tsx

@@ -0,0 +1,29 @@
+import React, { FC } from 'react'
+import csx from 'classnames'
+import { Button } from '../typings/global'
+
+/**
+ * Defines a clickable area
+ * @param props : Same props of button
+ */
+const Clickable: FC<Button> = props => {
+  const { children, style, className, ...rest } = props
+
+  return (
+    <button
+      className={csx(
+        className,
+        'absolute ma2 transparent flex items-center justify-center bn outline-0 pointer'
+      )}
+      style={{
+        background: 'transparent',
+        ...style,
+      }}
+      {...rest}
+    >
+      {children}
+    </button>
+  )
+}
+
+export default Clickable