diff --git a/.travis.yml b/.travis.yml new file mode 100644 index 0000000..7ef0c07 --- /dev/null +++ b/.travis.yml @@ -0,0 +1,14 @@ +language: node_js +cache: + directories: + - 'node_modules' +node_js: + - '10' +before_install: + - cd react +install: + - yarn install +script: + - yarn test +after_success: + - yarn gen:coveralls diff --git a/README.md b/README.md index 612c231..d8ebc65 100644 --- a/README.md +++ b/README.md @@ -1,8 +1,8 @@ # VTEX Slider ## Description -The VTEX Slider is a slider that aims a good support for SSR and can display one or more slides per page. +The VTEX Slider is a slider that aims a good support for SSR and can display one or more slides per page. :loudspeaker: **Disclaimer:** Don't fork this project; use, contribute, or open issue with your feature request @@ -17,8 +17,8 @@ The VTEX Slider is a slider that aims a good support for SSR and can display one - [CSS namespaces](#css-namespaces) - [Tests](#tests) - ## Usage + To import it you can add to you `manifest.json` the following: ```json @@ -30,6 +30,7 @@ To import it you can add to you `manifest.json` the following: ``` And then in your component you can import the components exported from the slider: + ```javascript import { Slider, Slide } from 'vtex.slider' ``` @@ -70,7 +71,7 @@ render() { // The keys of the object represent the size of the window in px. // In this case if the window is 1300px large or bigger it will show 5 items, - // If it has 900px or any size until 1299px it will show 4 items + // If it has 900px or any size until 1299px it will show 4 items const perPage = { 1300: 5, 900: 4, @@ -95,6 +96,7 @@ render() { ``` Bellow is an example with all the components together: + ```javascript arrowRender = ({ orientation, onClick }) => { return ( @@ -169,6 +171,7 @@ render() { ### Configuration #### Slider + | Prop name | Type | isRequired | defaultValue | Description | | --- | --- | --- | --- | -- | | `arrowRender` | `func` | :no_entry_sign: | :no_entry_sign: | A render function that will receive as props an orientation prop and an onClick callback | @@ -189,6 +192,7 @@ render() { | `threshold` | `number` | :no_entry_sign: | `50` | Minimum of pixels to drag until the slider change the `currentSlide` | #### Slide + | Prop name | Type | isRequired | defaultValue | Description | | --- | --- | --- | --- | --- | | `children` | `node` | :heavy_check_mark: | :no_entry_sign: | Node to render | @@ -200,6 +204,7 @@ render() { | `sliderTransitionDuration` | `number` | :no_entry_sign: | `250` | Duration of transition passed to Slider (must be the same), if nothing is passed to any of the components it will apply the same default value | #### SliderContainer + | Prop name | Type | isRequired | defaultValue | Description | | --- | --- | --- | --- | --- | | `autoplay` | `bool` | :no_entry_sign: | `false` | If the slider should be passing automatically | @@ -211,6 +216,7 @@ render() { | `tag` | `string` | :no_entry_sign: | `'div'` | Tag to render the component | #### Dots + | Prop name | Type | isRequired | defaultValue | Description | | --- | --- | --- | --- | --- | | `classes` | `object` | :no_entry_sign: | No extra classes applied to any element | Classes to style the elements of the component | @@ -226,13 +232,17 @@ render() { | `showDotsPerPage` | `bool` | :no_entry_sign: | `false` | If this frag is true, then every dot represent a page of slides (e.g. if `perPage = 2` and you have 4 elements, then you have 2 dots), if false, then it will render one dot to each slide | ## Styles API + You can style this app by using the props `classeName` and `classes` of the components. But if you want to style every slider of your app you need to use the [CSS namespaces](#css-namespaces) to do it. ### CSS namespaces + :construction: :construction: :construction: ## Tests -:construction: :construction: :construction: + +[![Coverage Status](https://coveralls.io/repos/github/vtex-apps/slider/badge.svg?branch=master)](https://coveralls.io/github/vtex-apps/slider?branch=master) ## Travis CI -:construction: :construction: :construction: + +[![Build Status](https://travis-ci.org/vtex-apps/slider.svg?branch=master)](https://travis-ci.org/vtex-apps/slider) diff --git a/react/package.json b/react/package.json index 5582661..f457731 100644 --- a/react/package.json +++ b/react/package.json @@ -6,8 +6,11 @@ "react" ], "scripts": { + "pretest": "yarn", "test": "vtex-test-tools test", - "test:watch": "vtex-test-tools test --watch" + "test:watch": "vtex-test-tools test --watch", + "test:coverage": "vtex-test-tools test --collectCoverage", + "gen:coveralls": "yarn test:coverage && cat ./coverage/lcov.info | coveralls" }, "dependencies": { "classnames": "^2.2.6", @@ -19,6 +22,7 @@ }, "devDependencies": { "@vtex/test-tools": "^0.2.0", + "coveralls": "^3.0.3", "eslint": "^5.15.3", "eslint-config-vtex-react": "^4.0.0", "jsdom": "^14.0.0", diff --git a/react/yarn.lock b/react/yarn.lock index b8ba089..ef5e9ad 100644 --- a/react/yarn.lock +++ b/react/yarn.lock @@ -1667,6 +1667,18 @@ core-util-is@1.0.2, core-util-is@~1.0.0: resolved "https://registry.yarnpkg.com/core-util-is/-/core-util-is-1.0.2.tgz#b5fd54220aa2bc5ab57aab7140c940754503c1a7" integrity sha1-tf1UIgqivFq1eqtxQMlAdUUDwac= +coveralls@^3.0.3: + version "3.0.3" + resolved "https://registry.yarnpkg.com/coveralls/-/coveralls-3.0.3.tgz#83b1c64aea1c6afa69beaf50b55ac1bc4d13e2b8" + integrity sha512-viNfeGlda2zJr8Gj1zqXpDMRjw9uM54p7wzZdvLRyOgnAfCe974Dq4veZkjJdxQXbmdppu6flEajFYseHYaUhg== + dependencies: + growl "~> 1.10.0" + js-yaml "^3.11.0" + lcov-parse "^0.0.10" + log-driver "^1.2.7" + minimist "^1.2.0" + request "^2.86.0" + cross-spawn@^6.0.0, cross-spawn@^6.0.5: version "6.0.5" resolved "https://registry.yarnpkg.com/cross-spawn/-/cross-spawn-6.0.5.tgz#4a5ec7c64dfae22c3a14124dbacdee846d80cbc4" @@ -2432,6 +2444,11 @@ graphql@~0.13.2: dependencies: iterall "^1.2.1" +"growl@~> 1.10.0": + version "1.10.5" + resolved "https://registry.yarnpkg.com/growl/-/growl-1.10.5.tgz#f2735dc2283674fa67478b10181059355c369e5e" + integrity sha512-qBr4OuELkhPenW6goKVXiv47US3clb3/IbuWF9KNKEijAy9oeHxU9IgzjvJhHkUzhaj7rOUD7+YGWqUjLp5oSA== + growly@^1.3.0: version "1.3.0" resolved "https://registry.yarnpkg.com/growly/-/growly-1.3.0.tgz#f10748cbe76af964b7c96c93c6bcc28af120c081" @@ -3321,6 +3338,14 @@ js-levenshtein@^1.1.3: resolved "https://registry.yarnpkg.com/js-tokens/-/js-tokens-4.0.0.tgz#19203fb59991df98e3a287050d4647cdeaf32499" integrity sha512-RdJUflcE3cUzKiMqQgsCu06FPu9UdIJO0beYbPhHN4k6apgJtifcoCtT9bcxOpYBtpD2kCM6Sbzg4CausW/PKQ== +js-yaml@^3.11.0: + version "3.13.1" + resolved "https://registry.yarnpkg.com/js-yaml/-/js-yaml-3.13.1.tgz#aff151b30bfdfa8e49e05da22e7415e9dfa37847" + integrity sha512-YfbcO7jXDdyj0DGxYVSlSeQNHbD7XPWvrVWeVUujrQEoZzWJIRrCPoyk6kL6IAjAG2IolMK4T0hNUe0HOUs5Jw== + dependencies: + argparse "^1.0.7" + esprima "^4.0.0" + js-yaml@^3.12.0: version "3.13.0" resolved "https://registry.yarnpkg.com/js-yaml/-/js-yaml-3.13.0.tgz#38ee7178ac0eea2c97ff6d96fff4b18c7d8cf98e" @@ -3500,6 +3525,11 @@ lcid@^2.0.0: dependencies: invert-kv "^2.0.0" +lcov-parse@^0.0.10: + version "0.0.10" + resolved "https://registry.yarnpkg.com/lcov-parse/-/lcov-parse-0.0.10.tgz#1b0b8ff9ac9c7889250582b70b71315d9da6d9a3" + integrity sha1-GwuP+ayceIklBYK3C3ExXZ2m2aM= + left-pad@^1.3.0: version "1.3.0" resolved "https://registry.yarnpkg.com/left-pad/-/left-pad-1.3.0.tgz#5b8a3a7765dfe001261dde915589e782f8c94d1e" @@ -3556,6 +3586,11 @@ lodash@4.17.11, lodash@^4.17.11: resolved "https://registry.yarnpkg.com/lodash/-/lodash-4.17.11.tgz#b39ea6229ef607ecd89e2c8df12536891cac9b8d" integrity sha512-cQKh8igo5QUhZ7lg38DYWAxMvjSAKG0A8wGSVimP07SIUEK2UO+arSRKbRZWtelMtN5V0Hkwh5ryOto/SshYIg== +log-driver@^1.2.7: + version "1.2.7" + resolved "https://registry.yarnpkg.com/log-driver/-/log-driver-1.2.7.tgz#63b95021f0702fedfa2c9bb0a24e7797d71871d8" + integrity sha512-U7KCmLdqsGHBLeWqYlFA0V0Sl6P08EE1ZrmA9cxjUE0WVqT9qnyVDPz1kzpFEP0jdJuFnasWIfSd7fsaNXkpbg== + loose-envify@^1.0.0, loose-envify@^1.1.0, loose-envify@^1.4.0: version "1.4.0" resolved "https://registry.yarnpkg.com/loose-envify/-/loose-envify-1.4.0.tgz#71ee51fa7be4caec1a63839f7e682d8132d30caf" @@ -4465,7 +4500,7 @@ request-promise-native@^1.0.5: stealthy-require "^1.1.1" tough-cookie "^2.3.3" -request@^2.87.0, request@^2.88.0: +request@^2.86.0, request@^2.87.0, request@^2.88.0: version "2.88.0" resolved "https://registry.yarnpkg.com/request/-/request-2.88.0.tgz#9c2fca4f7d35b592efe57c7f0a55e81052124fef" integrity sha512-NAqBSrijGLZdM0WZNsInLJpkJokL72XYjUpnB0iwsRgxh7dB6COrHnTBNwN0E+lHDAJzu7kLAkDeY08z2/A0hg==