From 58a4d9822bd19c08548fee50d7309aeda3c3c7a1 Mon Sep 17 00:00:00 2001 From: Pavlo LIAHUSHYN Date: Tue, 15 Jan 2019 23:31:40 +0100 Subject: [PATCH 1/2] feat(tabs) : typescript migration --- README.md | 4 +- examples/demo/package-lock.json | 30 +-- package-lock.json | 181 +++++++++--------- .../footer-client/src/footer-client.scss | 25 ++- packages/tabs/package-lock.json | 2 +- packages/tabs/package.json | 3 - packages/tabs/src/Pane.js | 23 --- packages/tabs/src/Pane.spec.tsx | 15 ++ packages/tabs/src/Pane.tsx | 26 +++ packages/tabs/src/Tab.js | 87 --------- packages/tabs/src/Tab.tsx | 29 +++ packages/tabs/src/Tabs.Title.js | 47 ----- packages/tabs/src/Tabs.js | 47 ----- packages/tabs/src/Tabs.spec.js | 17 -- packages/tabs/src/Tabs.tsx | 14 ++ packages/tabs/src/TabsCore.tsx | 47 +++++ packages/tabs/src/TabsStateless.js | 69 ------- packages/tabs/src/TabsStateless.spec.tsx | 29 +++ packages/tabs/src/TabsStateless.tsx | 63 ++++++ packages/tabs/src/Title.spec.tsx | 28 +++ packages/tabs/src/Title.tsx | 59 ++++++ .../tabs/src/__snapshots__/Pane.spec.tsx.snap | 11 ++ .../__snapshots__/TabsStateless.spec.tsx.snap | 56 ++++++ .../src/__snapshots__/Title.spec.tsx.snap | 14 ++ packages/tabs/src/{index.js => index.ts} | 2 +- packages/tabs/tsconfig.json | 4 + 26 files changed, 521 insertions(+), 411 deletions(-) delete mode 100644 packages/tabs/src/Pane.js create mode 100644 packages/tabs/src/Pane.spec.tsx create mode 100644 packages/tabs/src/Pane.tsx delete mode 100644 packages/tabs/src/Tab.js create mode 100644 packages/tabs/src/Tab.tsx delete mode 100644 packages/tabs/src/Tabs.Title.js delete mode 100644 packages/tabs/src/Tabs.js delete mode 100644 packages/tabs/src/Tabs.spec.js create mode 100644 packages/tabs/src/Tabs.tsx create mode 100644 packages/tabs/src/TabsCore.tsx delete mode 100644 packages/tabs/src/TabsStateless.js create mode 100644 packages/tabs/src/TabsStateless.spec.tsx create mode 100644 packages/tabs/src/TabsStateless.tsx create mode 100644 packages/tabs/src/Title.spec.tsx create mode 100644 packages/tabs/src/Title.tsx create mode 100644 packages/tabs/src/__snapshots__/Pane.spec.tsx.snap create mode 100644 packages/tabs/src/__snapshots__/TabsStateless.spec.tsx.snap create mode 100644 packages/tabs/src/__snapshots__/Title.spec.tsx.snap rename packages/tabs/src/{index.js => index.ts} (57%) create mode 100644 packages/tabs/tsconfig.json diff --git a/README.md b/README.md index e06c7ec03..47a435ae6 100644 --- a/README.md +++ b/README.md @@ -17,7 +17,7 @@ A set of independent components. Awesome library based on HTML and CSS using BEM convention with the JavaScript ReactJS implementation. Each components are autonomous and extensible. Pick and use only what you need! -**How *React-toolkit* does CSS isolation?** +**How _React-toolkit_ does CSS isolation?** Only by using [BEM (Block Element Modifier)](http://getbem.com) CSS convention. No need of the intricate technologies, just pragatism. @@ -25,7 +25,6 @@ Components are simple to use (just drag and drog it), simple to customize (by us You can easily build a new app from scratch or integrate some component into existing application. - [html+css documentation website](https://axaguildev.github.io?target=react_toolkit_storybook) [react storybook website](https://axaguildev.github.io?target=react_toolkit_design) @@ -110,7 +109,6 @@ Each component should be autonomous (HTML + CSS + JS) and extensible. - [HTML/CSS Documentation](https://axaguildev.github.io?target=react_toolkit_storybook) - React : - - Components are stateless by default - Some Higher Order Components (HOC) are stateful but feel free to use the stateless one if it fits your use case - [React documentation](https://axaguildev.github.io?target=react_toolkit_design) diff --git a/examples/demo/package-lock.json b/examples/demo/package-lock.json index 354c589b5..f37339c80 100644 --- a/examples/demo/package-lock.json +++ b/examples/demo/package-lock.json @@ -1,6 +1,6 @@ { "name": "sample-app", - "version": "1.0.5", + "version": "1.1.0", "lockfileVersion": 1, "requires": true, "dependencies": { @@ -7148,13 +7148,11 @@ }, "balanced-match": { "version": "1.0.0", - "bundled": true, - "optional": true + "bundled": true }, "brace-expansion": { "version": "1.1.11", "bundled": true, - "optional": true, "requires": { "balanced-match": "^1.0.0", "concat-map": "0.0.1" @@ -7167,18 +7165,15 @@ }, "code-point-at": { "version": "1.1.0", - "bundled": true, - "optional": true + "bundled": true }, "concat-map": { "version": "0.0.1", - "bundled": true, - "optional": true + "bundled": true }, "console-control-strings": { "version": "1.1.0", - "bundled": true, - "optional": true + "bundled": true }, "core-util-is": { "version": "1.0.2", @@ -7281,8 +7276,7 @@ }, "inherits": { "version": "2.0.3", - "bundled": true, - "optional": true + "bundled": true }, "ini": { "version": "1.3.5", @@ -7292,7 +7286,6 @@ "is-fullwidth-code-point": { "version": "1.0.0", "bundled": true, - "optional": true, "requires": { "number-is-nan": "^1.0.0" } @@ -7305,20 +7298,17 @@ "minimatch": { "version": "3.0.4", "bundled": true, - "optional": true, "requires": { "brace-expansion": "^1.1.7" } }, "minimist": { "version": "0.0.8", - "bundled": true, - "optional": true + "bundled": true }, "minipass": { "version": "2.2.4", "bundled": true, - "optional": true, "requires": { "safe-buffer": "^5.1.1", "yallist": "^3.0.0" @@ -7335,7 +7325,6 @@ "mkdirp": { "version": "0.5.1", "bundled": true, - "optional": true, "requires": { "minimist": "0.0.8" } @@ -7408,8 +7397,7 @@ }, "number-is-nan": { "version": "1.0.1", - "bundled": true, - "optional": true + "bundled": true }, "object-assign": { "version": "4.1.1", @@ -7419,7 +7407,6 @@ "once": { "version": "1.4.0", "bundled": true, - "optional": true, "requires": { "wrappy": "1" } @@ -7526,7 +7513,6 @@ "string-width": { "version": "1.0.2", "bundled": true, - "optional": true, "requires": { "code-point-at": "^1.0.0", "is-fullwidth-code-point": "^1.0.0", diff --git a/package-lock.json b/package-lock.json index 46381af74..c71719754 100644 --- a/package-lock.json +++ b/package-lock.json @@ -4784,7 +4784,7 @@ }, "util": { "version": "0.10.3", - "resolved": "https://registry.npmjs.org/util/-/util-0.10.3.tgz", + "resolved": "http://registry.npmjs.org/util/-/util-0.10.3.tgz", "integrity": "sha1-evsa/lCAUkZInj23/g7TeTNqwPk=", "dev": true, "requires": { @@ -5055,13 +5055,15 @@ "version": "1.0.0", "resolved": "https://registry.npmjs.org/is-extglob/-/is-extglob-1.0.0.tgz", "integrity": "sha1-rEaBd8SUNAWgkvyPKXYMb/xiBsA=", - "dev": true + "dev": true, + "optional": true }, "is-glob": { "version": "2.0.1", "resolved": "https://registry.npmjs.org/is-glob/-/is-glob-2.0.1.tgz", "integrity": "sha1-0Jb5JqPe1WAPP9/ZEZjLCIjC2GM=", "dev": true, + "optional": true, "requires": { "is-extglob": "^1.0.0" } @@ -8872,7 +8874,7 @@ }, "minimist": { "version": "1.2.0", - "resolved": "https://registry.npmjs.org/minimist/-/minimist-1.2.0.tgz", + "resolved": "http://registry.npmjs.org/minimist/-/minimist-1.2.0.tgz", "integrity": "sha1-o1AIsg9BOD7sH7kU9M1d95omQoQ=", "dev": true }, @@ -9026,7 +9028,7 @@ }, "minimist": { "version": "1.2.0", - "resolved": "https://registry.npmjs.org/minimist/-/minimist-1.2.0.tgz", + "resolved": "http://registry.npmjs.org/minimist/-/minimist-1.2.0.tgz", "integrity": "sha1-o1AIsg9BOD7sH7kU9M1d95omQoQ=", "dev": true }, @@ -9171,7 +9173,7 @@ }, "minimist": { "version": "1.2.0", - "resolved": "https://registry.npmjs.org/minimist/-/minimist-1.2.0.tgz", + "resolved": "http://registry.npmjs.org/minimist/-/minimist-1.2.0.tgz", "integrity": "sha1-o1AIsg9BOD7sH7kU9M1d95omQoQ=", "dev": true }, @@ -9930,7 +9932,7 @@ "dependencies": { "supports-color": { "version": "2.0.0", - "resolved": "https://registry.npmjs.org/supports-color/-/supports-color-2.0.0.tgz", + "resolved": "http://registry.npmjs.org/supports-color/-/supports-color-2.0.0.tgz", "integrity": "sha1-U10EXOa2Nj+kARcIRimZXp3zJMc=", "dev": true } @@ -12670,7 +12672,7 @@ "dependencies": { "fs-extra": { "version": "0.30.0", - "resolved": "http://registry.npmjs.org/fs-extra/-/fs-extra-0.30.0.tgz", + "resolved": "https://registry.npmjs.org/fs-extra/-/fs-extra-0.30.0.tgz", "integrity": "sha1-8jP/zAjU2n1DLapEl3aYnbHfk/A=", "dev": true, "requires": { @@ -13345,7 +13347,8 @@ "ansi-regex": { "version": "2.1.1", "bundled": true, - "dev": true + "dev": true, + "optional": true }, "aproba": { "version": "1.2.0", @@ -13760,7 +13763,8 @@ "safe-buffer": { "version": "5.1.1", "bundled": true, - "dev": true + "dev": true, + "optional": true }, "safer-buffer": { "version": "2.1.2", @@ -13816,6 +13820,7 @@ "version": "3.0.1", "bundled": true, "dev": true, + "optional": true, "requires": { "ansi-regex": "^2.0.0" } @@ -13859,12 +13864,14 @@ "wrappy": { "version": "1.0.2", "bundled": true, - "dev": true + "dev": true, + "optional": true }, "yallist": { "version": "3.0.2", "bundled": true, - "dev": true + "dev": true, + "optional": true } } }, @@ -14346,7 +14353,7 @@ }, "minimist": { "version": "1.2.0", - "resolved": "https://registry.npmjs.org/minimist/-/minimist-1.2.0.tgz", + "resolved": "http://registry.npmjs.org/minimist/-/minimist-1.2.0.tgz", "integrity": "sha1-o1AIsg9BOD7sH7kU9M1d95omQoQ=", "dev": true }, @@ -14420,7 +14427,7 @@ "dependencies": { "pify": { "version": "2.3.0", - "resolved": "https://registry.npmjs.org/pify/-/pify-2.3.0.tgz", + "resolved": "http://registry.npmjs.org/pify/-/pify-2.3.0.tgz", "integrity": "sha1-7RQaasBDqEnqWISY59yosVMw6Qw=", "dev": true } @@ -14503,7 +14510,7 @@ }, "minimist": { "version": "1.2.0", - "resolved": "https://registry.npmjs.org/minimist/-/minimist-1.2.0.tgz", + "resolved": "http://registry.npmjs.org/minimist/-/minimist-1.2.0.tgz", "integrity": "sha1-o1AIsg9BOD7sH7kU9M1d95omQoQ=", "dev": true }, @@ -16147,13 +16154,13 @@ }, "lodash": { "version": "3.10.1", - "resolved": "https://registry.npmjs.org/lodash/-/lodash-3.10.1.tgz", + "resolved": "http://registry.npmjs.org/lodash/-/lodash-3.10.1.tgz", "integrity": "sha1-W/Rejkm6QYnhfUgnid/RW9FAt7Y=", "dev": true }, "readable-stream": { "version": "1.1.14", - "resolved": "https://registry.npmjs.org/readable-stream/-/readable-stream-1.1.14.tgz", + "resolved": "http://registry.npmjs.org/readable-stream/-/readable-stream-1.1.14.tgz", "integrity": "sha1-fPTFTvZI44EwhMY23SB54WbAgdk=", "dev": true, "requires": { @@ -16165,7 +16172,7 @@ }, "string_decoder": { "version": "0.10.31", - "resolved": "https://registry.npmjs.org/string_decoder/-/string_decoder-0.10.31.tgz", + "resolved": "http://registry.npmjs.org/string_decoder/-/string_decoder-0.10.31.tgz", "integrity": "sha1-YuIDvEF2bGwoyfyEMB2rHFMQ+pQ=", "dev": true } @@ -20898,7 +20905,7 @@ }, "media-typer": { "version": "0.3.0", - "resolved": "https://registry.npmjs.org/media-typer/-/media-typer-0.3.0.tgz", + "resolved": "http://registry.npmjs.org/media-typer/-/media-typer-0.3.0.tgz", "integrity": "sha1-hxDXrwqmJvj/+hzgAWhUUmMlV0g=", "dev": true }, @@ -21537,7 +21544,7 @@ }, "multimatch": { "version": "2.1.0", - "resolved": "https://registry.npmjs.org/multimatch/-/multimatch-2.1.0.tgz", + "resolved": "http://registry.npmjs.org/multimatch/-/multimatch-2.1.0.tgz", "integrity": "sha1-nHkGoi+0wCkZ4vX3UWG0zb1LKis=", "dev": true, "requires": { @@ -21599,7 +21606,7 @@ }, "mute-stream": { "version": "0.0.7", - "resolved": "https://registry.npmjs.org/mute-stream/-/mute-stream-0.0.7.tgz", + "resolved": "http://registry.npmjs.org/mute-stream/-/mute-stream-0.0.7.tgz", "integrity": "sha1-MHXOk7whuPq0PhvE2n6BFe0ee6s=", "dev": true }, @@ -22011,7 +22018,7 @@ }, "readable-stream": { "version": "1.0.34", - "resolved": "https://registry.npmjs.org/readable-stream/-/readable-stream-1.0.34.tgz", + "resolved": "http://registry.npmjs.org/readable-stream/-/readable-stream-1.0.34.tgz", "integrity": "sha1-Elgg40vIQtLyqq+v5MKRbuMsFXw=", "dev": true, "requires": { @@ -22023,7 +22030,7 @@ }, "string_decoder": { "version": "0.10.31", - "resolved": "https://registry.npmjs.org/string_decoder/-/string_decoder-0.10.31.tgz", + "resolved": "http://registry.npmjs.org/string_decoder/-/string_decoder-0.10.31.tgz", "integrity": "sha1-YuIDvEF2bGwoyfyEMB2rHFMQ+pQ=", "dev": true } @@ -22888,7 +22895,7 @@ }, "parse-asn1": { "version": "5.1.1", - "resolved": "https://registry.npmjs.org/parse-asn1/-/parse-asn1-5.1.1.tgz", + "resolved": "http://registry.npmjs.org/parse-asn1/-/parse-asn1-5.1.1.tgz", "integrity": "sha512-KPx7flKXg775zZpnp9SxJlz00gTd4BmJ2yJufSc44gMCRrRQ7NSzAcSJQfifuOLgW6bEi+ftrALtsgALeB2Adw==", "dev": true, "requires": { @@ -23043,7 +23050,7 @@ }, "path-browserify": { "version": "0.0.0", - "resolved": "https://registry.npmjs.org/path-browserify/-/path-browserify-0.0.0.tgz", + "resolved": "http://registry.npmjs.org/path-browserify/-/path-browserify-0.0.0.tgz", "integrity": "sha1-oLhwcpquIUAFt9UDLsLLuw+0RRo=", "dev": true }, @@ -23432,7 +23439,7 @@ }, "postcss-calc": { "version": "5.3.1", - "resolved": "https://registry.npmjs.org/postcss-calc/-/postcss-calc-5.3.1.tgz", + "resolved": "http://registry.npmjs.org/postcss-calc/-/postcss-calc-5.3.1.tgz", "integrity": "sha1-d7rnypKK2FcW4v2kLyYb98HWW14=", "dev": true, "requires": { @@ -23462,7 +23469,7 @@ "dependencies": { "supports-color": { "version": "2.0.0", - "resolved": "https://registry.npmjs.org/supports-color/-/supports-color-2.0.0.tgz", + "resolved": "http://registry.npmjs.org/supports-color/-/supports-color-2.0.0.tgz", "integrity": "sha1-U10EXOa2Nj+kARcIRimZXp3zJMc=", "dev": true } @@ -23529,7 +23536,7 @@ "dependencies": { "supports-color": { "version": "2.0.0", - "resolved": "https://registry.npmjs.org/supports-color/-/supports-color-2.0.0.tgz", + "resolved": "http://registry.npmjs.org/supports-color/-/supports-color-2.0.0.tgz", "integrity": "sha1-U10EXOa2Nj+kARcIRimZXp3zJMc=", "dev": true } @@ -23595,7 +23602,7 @@ "dependencies": { "supports-color": { "version": "2.0.0", - "resolved": "https://registry.npmjs.org/supports-color/-/supports-color-2.0.0.tgz", + "resolved": "http://registry.npmjs.org/supports-color/-/supports-color-2.0.0.tgz", "integrity": "sha1-U10EXOa2Nj+kARcIRimZXp3zJMc=", "dev": true } @@ -23632,7 +23639,7 @@ }, "postcss-discard-comments": { "version": "2.0.4", - "resolved": "https://registry.npmjs.org/postcss-discard-comments/-/postcss-discard-comments-2.0.4.tgz", + "resolved": "http://registry.npmjs.org/postcss-discard-comments/-/postcss-discard-comments-2.0.4.tgz", "integrity": "sha1-vv6J+v1bPazlzM5Rt2uBUUvgDj0=", "dev": true, "requires": { @@ -23660,7 +23667,7 @@ "dependencies": { "supports-color": { "version": "2.0.0", - "resolved": "https://registry.npmjs.org/supports-color/-/supports-color-2.0.0.tgz", + "resolved": "http://registry.npmjs.org/supports-color/-/supports-color-2.0.0.tgz", "integrity": "sha1-U10EXOa2Nj+kARcIRimZXp3zJMc=", "dev": true } @@ -23725,7 +23732,7 @@ "dependencies": { "supports-color": { "version": "2.0.0", - "resolved": "https://registry.npmjs.org/supports-color/-/supports-color-2.0.0.tgz", + "resolved": "http://registry.npmjs.org/supports-color/-/supports-color-2.0.0.tgz", "integrity": "sha1-U10EXOa2Nj+kARcIRimZXp3zJMc=", "dev": true } @@ -23762,7 +23769,7 @@ }, "postcss-discard-empty": { "version": "2.1.0", - "resolved": "https://registry.npmjs.org/postcss-discard-empty/-/postcss-discard-empty-2.1.0.tgz", + "resolved": "http://registry.npmjs.org/postcss-discard-empty/-/postcss-discard-empty-2.1.0.tgz", "integrity": "sha1-0rS9nVztXr2Nyt52QMfXzX9PkrU=", "dev": true, "requires": { @@ -23790,7 +23797,7 @@ "dependencies": { "supports-color": { "version": "2.0.0", - "resolved": "https://registry.npmjs.org/supports-color/-/supports-color-2.0.0.tgz", + "resolved": "http://registry.npmjs.org/supports-color/-/supports-color-2.0.0.tgz", "integrity": "sha1-U10EXOa2Nj+kARcIRimZXp3zJMc=", "dev": true } @@ -23827,7 +23834,7 @@ }, "postcss-discard-overridden": { "version": "0.1.1", - "resolved": "https://registry.npmjs.org/postcss-discard-overridden/-/postcss-discard-overridden-0.1.1.tgz", + "resolved": "http://registry.npmjs.org/postcss-discard-overridden/-/postcss-discard-overridden-0.1.1.tgz", "integrity": "sha1-ix6vVU9ob7KIzYdMVWZ7CqNmjVg=", "dev": true, "requires": { @@ -23855,7 +23862,7 @@ "dependencies": { "supports-color": { "version": "2.0.0", - "resolved": "https://registry.npmjs.org/supports-color/-/supports-color-2.0.0.tgz", + "resolved": "http://registry.npmjs.org/supports-color/-/supports-color-2.0.0.tgz", "integrity": "sha1-U10EXOa2Nj+kARcIRimZXp3zJMc=", "dev": true } @@ -23892,7 +23899,7 @@ }, "postcss-discard-unused": { "version": "2.2.3", - "resolved": "https://registry.npmjs.org/postcss-discard-unused/-/postcss-discard-unused-2.2.3.tgz", + "resolved": "http://registry.npmjs.org/postcss-discard-unused/-/postcss-discard-unused-2.2.3.tgz", "integrity": "sha1-vOMLLMWR/8Y0Mitfs0ZLbZNPRDM=", "dev": true, "requires": { @@ -23921,7 +23928,7 @@ "dependencies": { "supports-color": { "version": "2.0.0", - "resolved": "https://registry.npmjs.org/supports-color/-/supports-color-2.0.0.tgz", + "resolved": "http://registry.npmjs.org/supports-color/-/supports-color-2.0.0.tgz", "integrity": "sha1-U10EXOa2Nj+kARcIRimZXp3zJMc=", "dev": true } @@ -23986,7 +23993,7 @@ "dependencies": { "supports-color": { "version": "2.0.0", - "resolved": "https://registry.npmjs.org/supports-color/-/supports-color-2.0.0.tgz", + "resolved": "http://registry.npmjs.org/supports-color/-/supports-color-2.0.0.tgz", "integrity": "sha1-U10EXOa2Nj+kARcIRimZXp3zJMc=", "dev": true } @@ -24395,7 +24402,7 @@ }, "postcss-merge-idents": { "version": "2.1.7", - "resolved": "https://registry.npmjs.org/postcss-merge-idents/-/postcss-merge-idents-2.1.7.tgz", + "resolved": "http://registry.npmjs.org/postcss-merge-idents/-/postcss-merge-idents-2.1.7.tgz", "integrity": "sha1-TFUwMTwI4dWzu/PSu8dH4njuonA=", "dev": true, "requires": { @@ -24425,7 +24432,7 @@ "dependencies": { "supports-color": { "version": "2.0.0", - "resolved": "https://registry.npmjs.org/supports-color/-/supports-color-2.0.0.tgz", + "resolved": "http://registry.npmjs.org/supports-color/-/supports-color-2.0.0.tgz", "integrity": "sha1-U10EXOa2Nj+kARcIRimZXp3zJMc=", "dev": true } @@ -24490,7 +24497,7 @@ "dependencies": { "supports-color": { "version": "2.0.0", - "resolved": "https://registry.npmjs.org/supports-color/-/supports-color-2.0.0.tgz", + "resolved": "http://registry.npmjs.org/supports-color/-/supports-color-2.0.0.tgz", "integrity": "sha1-U10EXOa2Nj+kARcIRimZXp3zJMc=", "dev": true } @@ -24569,7 +24576,7 @@ "dependencies": { "supports-color": { "version": "2.0.0", - "resolved": "https://registry.npmjs.org/supports-color/-/supports-color-2.0.0.tgz", + "resolved": "http://registry.npmjs.org/supports-color/-/supports-color-2.0.0.tgz", "integrity": "sha1-U10EXOa2Nj+kARcIRimZXp3zJMc=", "dev": true } @@ -24612,7 +24619,7 @@ }, "postcss-minify-font-values": { "version": "1.0.5", - "resolved": "https://registry.npmjs.org/postcss-minify-font-values/-/postcss-minify-font-values-1.0.5.tgz", + "resolved": "http://registry.npmjs.org/postcss-minify-font-values/-/postcss-minify-font-values-1.0.5.tgz", "integrity": "sha1-S1jttWZB66fIR0qzUmyv17vey2k=", "dev": true, "requires": { @@ -24642,7 +24649,7 @@ "dependencies": { "supports-color": { "version": "2.0.0", - "resolved": "https://registry.npmjs.org/supports-color/-/supports-color-2.0.0.tgz", + "resolved": "http://registry.npmjs.org/supports-color/-/supports-color-2.0.0.tgz", "integrity": "sha1-U10EXOa2Nj+kARcIRimZXp3zJMc=", "dev": true } @@ -24679,7 +24686,7 @@ }, "postcss-minify-gradients": { "version": "1.0.5", - "resolved": "https://registry.npmjs.org/postcss-minify-gradients/-/postcss-minify-gradients-1.0.5.tgz", + "resolved": "http://registry.npmjs.org/postcss-minify-gradients/-/postcss-minify-gradients-1.0.5.tgz", "integrity": "sha1-Xb2hE3NwP4PPtKPqOIHY11/15uE=", "dev": true, "requires": { @@ -24708,7 +24715,7 @@ "dependencies": { "supports-color": { "version": "2.0.0", - "resolved": "https://registry.npmjs.org/supports-color/-/supports-color-2.0.0.tgz", + "resolved": "http://registry.npmjs.org/supports-color/-/supports-color-2.0.0.tgz", "integrity": "sha1-U10EXOa2Nj+kARcIRimZXp3zJMc=", "dev": true } @@ -24745,7 +24752,7 @@ }, "postcss-minify-params": { "version": "1.2.2", - "resolved": "https://registry.npmjs.org/postcss-minify-params/-/postcss-minify-params-1.2.2.tgz", + "resolved": "http://registry.npmjs.org/postcss-minify-params/-/postcss-minify-params-1.2.2.tgz", "integrity": "sha1-rSzgcTc7lDs9kwo/pZo1jCjW8fM=", "dev": true, "requires": { @@ -24776,7 +24783,7 @@ "dependencies": { "supports-color": { "version": "2.0.0", - "resolved": "https://registry.npmjs.org/supports-color/-/supports-color-2.0.0.tgz", + "resolved": "http://registry.npmjs.org/supports-color/-/supports-color-2.0.0.tgz", "integrity": "sha1-U10EXOa2Nj+kARcIRimZXp3zJMc=", "dev": true } @@ -24813,7 +24820,7 @@ }, "postcss-minify-selectors": { "version": "2.1.1", - "resolved": "https://registry.npmjs.org/postcss-minify-selectors/-/postcss-minify-selectors-2.1.1.tgz", + "resolved": "http://registry.npmjs.org/postcss-minify-selectors/-/postcss-minify-selectors-2.1.1.tgz", "integrity": "sha1-ssapjAByz5G5MtGkllCBFDEXNb8=", "dev": true, "requires": { @@ -24844,7 +24851,7 @@ "dependencies": { "supports-color": { "version": "2.0.0", - "resolved": "https://registry.npmjs.org/supports-color/-/supports-color-2.0.0.tgz", + "resolved": "http://registry.npmjs.org/supports-color/-/supports-color-2.0.0.tgz", "integrity": "sha1-U10EXOa2Nj+kARcIRimZXp3zJMc=", "dev": true } @@ -24996,7 +25003,7 @@ }, "postcss-normalize-charset": { "version": "1.1.1", - "resolved": "https://registry.npmjs.org/postcss-normalize-charset/-/postcss-normalize-charset-1.1.1.tgz", + "resolved": "http://registry.npmjs.org/postcss-normalize-charset/-/postcss-normalize-charset-1.1.1.tgz", "integrity": "sha1-757nEhLX/nWceO0WL2HtYrXLk/E=", "dev": true, "requires": { @@ -25024,7 +25031,7 @@ "dependencies": { "supports-color": { "version": "2.0.0", - "resolved": "https://registry.npmjs.org/supports-color/-/supports-color-2.0.0.tgz", + "resolved": "http://registry.npmjs.org/supports-color/-/supports-color-2.0.0.tgz", "integrity": "sha1-U10EXOa2Nj+kARcIRimZXp3zJMc=", "dev": true } @@ -25061,7 +25068,7 @@ }, "postcss-normalize-url": { "version": "3.0.8", - "resolved": "https://registry.npmjs.org/postcss-normalize-url/-/postcss-normalize-url-3.0.8.tgz", + "resolved": "http://registry.npmjs.org/postcss-normalize-url/-/postcss-normalize-url-3.0.8.tgz", "integrity": "sha1-EI90s/L82viRov+j6kWSJ5/HgiI=", "dev": true, "requires": { @@ -25092,7 +25099,7 @@ "dependencies": { "supports-color": { "version": "2.0.0", - "resolved": "https://registry.npmjs.org/supports-color/-/supports-color-2.0.0.tgz", + "resolved": "http://registry.npmjs.org/supports-color/-/supports-color-2.0.0.tgz", "integrity": "sha1-U10EXOa2Nj+kARcIRimZXp3zJMc=", "dev": true } @@ -25158,7 +25165,7 @@ "dependencies": { "supports-color": { "version": "2.0.0", - "resolved": "https://registry.npmjs.org/supports-color/-/supports-color-2.0.0.tgz", + "resolved": "http://registry.npmjs.org/supports-color/-/supports-color-2.0.0.tgz", "integrity": "sha1-U10EXOa2Nj+kARcIRimZXp3zJMc=", "dev": true } @@ -25195,7 +25202,7 @@ }, "postcss-reduce-idents": { "version": "2.4.0", - "resolved": "https://registry.npmjs.org/postcss-reduce-idents/-/postcss-reduce-idents-2.4.0.tgz", + "resolved": "http://registry.npmjs.org/postcss-reduce-idents/-/postcss-reduce-idents-2.4.0.tgz", "integrity": "sha1-wsbSDMlYKE9qv75j92Cb9AkFmtM=", "dev": true, "requires": { @@ -25224,7 +25231,7 @@ "dependencies": { "supports-color": { "version": "2.0.0", - "resolved": "https://registry.npmjs.org/supports-color/-/supports-color-2.0.0.tgz", + "resolved": "http://registry.npmjs.org/supports-color/-/supports-color-2.0.0.tgz", "integrity": "sha1-U10EXOa2Nj+kARcIRimZXp3zJMc=", "dev": true } @@ -25261,7 +25268,7 @@ }, "postcss-reduce-initial": { "version": "1.0.1", - "resolved": "https://registry.npmjs.org/postcss-reduce-initial/-/postcss-reduce-initial-1.0.1.tgz", + "resolved": "http://registry.npmjs.org/postcss-reduce-initial/-/postcss-reduce-initial-1.0.1.tgz", "integrity": "sha1-aPgGlfBF0IJjqHmtJA343WT2ROo=", "dev": true, "requires": { @@ -25289,7 +25296,7 @@ "dependencies": { "supports-color": { "version": "2.0.0", - "resolved": "https://registry.npmjs.org/supports-color/-/supports-color-2.0.0.tgz", + "resolved": "http://registry.npmjs.org/supports-color/-/supports-color-2.0.0.tgz", "integrity": "sha1-U10EXOa2Nj+kARcIRimZXp3zJMc=", "dev": true } @@ -25326,7 +25333,7 @@ }, "postcss-reduce-transforms": { "version": "1.0.4", - "resolved": "https://registry.npmjs.org/postcss-reduce-transforms/-/postcss-reduce-transforms-1.0.4.tgz", + "resolved": "http://registry.npmjs.org/postcss-reduce-transforms/-/postcss-reduce-transforms-1.0.4.tgz", "integrity": "sha1-/3b02CEkN7McKYpC0uFEQCV3GuE=", "dev": true, "requires": { @@ -25356,7 +25363,7 @@ "dependencies": { "supports-color": { "version": "2.0.0", - "resolved": "https://registry.npmjs.org/supports-color/-/supports-color-2.0.0.tgz", + "resolved": "http://registry.npmjs.org/supports-color/-/supports-color-2.0.0.tgz", "integrity": "sha1-U10EXOa2Nj+kARcIRimZXp3zJMc=", "dev": true } @@ -25507,7 +25514,7 @@ }, "postcss-svgo": { "version": "2.1.6", - "resolved": "https://registry.npmjs.org/postcss-svgo/-/postcss-svgo-2.1.6.tgz", + "resolved": "http://registry.npmjs.org/postcss-svgo/-/postcss-svgo-2.1.6.tgz", "integrity": "sha1-tt8YqmE7Zm4TPwittSGcJoSsEI0=", "dev": true, "requires": { @@ -25538,7 +25545,7 @@ "dependencies": { "supports-color": { "version": "2.0.0", - "resolved": "https://registry.npmjs.org/supports-color/-/supports-color-2.0.0.tgz", + "resolved": "http://registry.npmjs.org/supports-color/-/supports-color-2.0.0.tgz", "integrity": "sha1-U10EXOa2Nj+kARcIRimZXp3zJMc=", "dev": true } @@ -25625,7 +25632,7 @@ }, "postcss-unique-selectors": { "version": "2.0.2", - "resolved": "https://registry.npmjs.org/postcss-unique-selectors/-/postcss-unique-selectors-2.0.2.tgz", + "resolved": "http://registry.npmjs.org/postcss-unique-selectors/-/postcss-unique-selectors-2.0.2.tgz", "integrity": "sha1-mB1X0p3csz57Hf4f1DuGSfkzyh0=", "dev": true, "requires": { @@ -25655,7 +25662,7 @@ "dependencies": { "supports-color": { "version": "2.0.0", - "resolved": "https://registry.npmjs.org/supports-color/-/supports-color-2.0.0.tgz", + "resolved": "http://registry.npmjs.org/supports-color/-/supports-color-2.0.0.tgz", "integrity": "sha1-U10EXOa2Nj+kARcIRimZXp3zJMc=", "dev": true } @@ -25698,7 +25705,7 @@ }, "postcss-zindex": { "version": "2.2.0", - "resolved": "https://registry.npmjs.org/postcss-zindex/-/postcss-zindex-2.2.0.tgz", + "resolved": "http://registry.npmjs.org/postcss-zindex/-/postcss-zindex-2.2.0.tgz", "integrity": "sha1-0hCd3AVbka9n/EyzsCWUZjnSryI=", "dev": true, "requires": { @@ -25728,7 +25735,7 @@ "dependencies": { "supports-color": { "version": "2.0.0", - "resolved": "https://registry.npmjs.org/supports-color/-/supports-color-2.0.0.tgz", + "resolved": "http://registry.npmjs.org/supports-color/-/supports-color-2.0.0.tgz", "integrity": "sha1-U10EXOa2Nj+kARcIRimZXp3zJMc=", "dev": true } @@ -25820,7 +25827,7 @@ }, "pretty-bytes": { "version": "4.0.2", - "resolved": "https://registry.npmjs.org/pretty-bytes/-/pretty-bytes-4.0.2.tgz", + "resolved": "http://registry.npmjs.org/pretty-bytes/-/pretty-bytes-4.0.2.tgz", "integrity": "sha1-sr+C5zUNZcbDOqlaqlpPYyf2HNk=", "dev": true }, @@ -28107,7 +28114,7 @@ }, "load-json-file": { "version": "2.0.0", - "resolved": "https://registry.npmjs.org/load-json-file/-/load-json-file-2.0.0.tgz", + "resolved": "http://registry.npmjs.org/load-json-file/-/load-json-file-2.0.0.tgz", "integrity": "sha1-eUfkIUmvgNaWy/eXvKq8/h/inKg=", "dev": true, "requires": { @@ -28129,7 +28136,7 @@ }, "minimist": { "version": "1.2.0", - "resolved": "https://registry.npmjs.org/minimist/-/minimist-1.2.0.tgz", + "resolved": "http://registry.npmjs.org/minimist/-/minimist-1.2.0.tgz", "integrity": "sha1-o1AIsg9BOD7sH7kU9M1d95omQoQ=", "dev": true }, @@ -28198,7 +28205,7 @@ }, "pify": { "version": "2.3.0", - "resolved": "https://registry.npmjs.org/pify/-/pify-2.3.0.tgz", + "resolved": "http://registry.npmjs.org/pify/-/pify-2.3.0.tgz", "integrity": "sha1-7RQaasBDqEnqWISY59yosVMw6Qw=", "dev": true }, @@ -28385,7 +28392,7 @@ }, "resolve": { "version": "1.6.0", - "resolved": "https://registry.npmjs.org/resolve/-/resolve-1.6.0.tgz", + "resolved": "http://registry.npmjs.org/resolve/-/resolve-1.6.0.tgz", "integrity": "sha512-mw7JQNu5ExIkcw4LPih0owX/TZXjD/ZUF/ZQ/pDnkw3ZKhDcZZw5klmBlj6gVMwjQ3Pz5Jgu7F3d0jcDVuEWdw==", "dev": true, "requires": { @@ -28778,7 +28785,7 @@ }, "load-json-file": { "version": "1.1.0", - "resolved": "https://registry.npmjs.org/load-json-file/-/load-json-file-1.1.0.tgz", + "resolved": "http://registry.npmjs.org/load-json-file/-/load-json-file-1.1.0.tgz", "integrity": "sha1-lWkFcI1YtLq0wiYbBPWfMcmTdMA=", "dev": true, "requires": { @@ -28838,7 +28845,7 @@ }, "string-width": { "version": "1.0.2", - "resolved": "https://registry.npmjs.org/string-width/-/string-width-1.0.2.tgz", + "resolved": "http://registry.npmjs.org/string-width/-/string-width-1.0.2.tgz", "integrity": "sha1-EYvfW4zcUaKn5w0hHgfisLmxB9M=", "dev": true, "requires": { @@ -28858,7 +28865,7 @@ }, "yargs": { "version": "6.6.0", - "resolved": "https://registry.npmjs.org/yargs/-/yargs-6.6.0.tgz", + "resolved": "http://registry.npmjs.org/yargs/-/yargs-6.6.0.tgz", "integrity": "sha1-eC7CHvQDNF+DCoCMo9UTr1YGUgg=", "dev": true, "requires": { @@ -28879,7 +28886,7 @@ }, "yargs-parser": { "version": "4.2.1", - "resolved": "https://registry.npmjs.org/yargs-parser/-/yargs-parser-4.2.1.tgz", + "resolved": "http://registry.npmjs.org/yargs-parser/-/yargs-parser-4.2.1.tgz", "integrity": "sha1-KczqwNxPA8bIe0qfIX3RjJ90hxw=", "dev": true, "requires": { @@ -28966,7 +28973,7 @@ }, "load-json-file": { "version": "1.1.0", - "resolved": "https://registry.npmjs.org/load-json-file/-/load-json-file-1.1.0.tgz", + "resolved": "http://registry.npmjs.org/load-json-file/-/load-json-file-1.1.0.tgz", "integrity": "sha1-lWkFcI1YtLq0wiYbBPWfMcmTdMA=", "dev": true, "requires": { @@ -29020,7 +29027,7 @@ }, "string-width": { "version": "1.0.2", - "resolved": "https://registry.npmjs.org/string-width/-/string-width-1.0.2.tgz", + "resolved": "http://registry.npmjs.org/string-width/-/string-width-1.0.2.tgz", "integrity": "sha1-EYvfW4zcUaKn5w0hHgfisLmxB9M=", "dev": true, "requires": { @@ -29658,7 +29665,7 @@ }, "reduce-css-calc": { "version": "1.3.0", - "resolved": "https://registry.npmjs.org/reduce-css-calc/-/reduce-css-calc-1.3.0.tgz", + "resolved": "http://registry.npmjs.org/reduce-css-calc/-/reduce-css-calc-1.3.0.tgz", "integrity": "sha1-dHyRTgSWFKTJz7umKYca0dKSdxY=", "dev": true, "requires": { @@ -30236,7 +30243,7 @@ }, "require-uncached": { "version": "1.0.3", - "resolved": "https://registry.npmjs.org/require-uncached/-/require-uncached-1.0.3.tgz", + "resolved": "http://registry.npmjs.org/require-uncached/-/require-uncached-1.0.3.tgz", "integrity": "sha1-Tg1W1slmL9MeQwEcS5WqSZVUIdM=", "dev": true, "requires": { @@ -31290,7 +31297,7 @@ }, "sha.js": { "version": "2.4.11", - "resolved": "https://registry.npmjs.org/sha.js/-/sha.js-2.4.11.tgz", + "resolved": "http://registry.npmjs.org/sha.js/-/sha.js-2.4.11.tgz", "integrity": "sha512-QMEp5B7cftE7APOjk5Y6xgrbWu+WkLVQwk8JNjZ8nKRciZaByEW6MubieAiToS7+dwvrjGhH8jRXz3MVd0AYqQ==", "dev": true, "requires": { @@ -32182,7 +32189,7 @@ }, "stream-browserify": { "version": "2.0.1", - "resolved": "https://registry.npmjs.org/stream-browserify/-/stream-browserify-2.0.1.tgz", + "resolved": "http://registry.npmjs.org/stream-browserify/-/stream-browserify-2.0.1.tgz", "integrity": "sha1-ZiZu5fm9uZQKTkUUyvtDu3Hlyds=", "dev": true, "requires": { @@ -33161,7 +33168,7 @@ }, "file-loader": { "version": "1.1.11", - "resolved": "http://registry.npmjs.org/file-loader/-/file-loader-1.1.11.tgz", + "resolved": "https://registry.npmjs.org/file-loader/-/file-loader-1.1.11.tgz", "integrity": "sha512-TGR4HU7HUsGg6GCOPJnFk06RhWgEWFLAGWiT6rcD+GRC2keU3s9RGJ+b3Z6/U73jwwNb2gKLJ7YCrp+jvU4ALg==", "dev": true, "requires": { @@ -33372,7 +33379,7 @@ }, "pify": { "version": "2.3.0", - "resolved": "https://registry.npmjs.org/pify/-/pify-2.3.0.tgz", + "resolved": "http://registry.npmjs.org/pify/-/pify-2.3.0.tgz", "integrity": "sha1-7RQaasBDqEnqWISY59yosVMw6Qw=", "dev": true } @@ -34434,7 +34441,7 @@ }, "tty-browserify": { "version": "0.0.0", - "resolved": "https://registry.npmjs.org/tty-browserify/-/tty-browserify-0.0.0.tgz", + "resolved": "http://registry.npmjs.org/tty-browserify/-/tty-browserify-0.0.0.tgz", "integrity": "sha1-oVe6QC2iTpv5V/mqadUk7tQpAaY=", "dev": true }, @@ -35450,7 +35457,7 @@ }, "vm-browserify": { "version": "0.0.4", - "resolved": "https://registry.npmjs.org/vm-browserify/-/vm-browserify-0.0.4.tgz", + "resolved": "http://registry.npmjs.org/vm-browserify/-/vm-browserify-0.0.4.tgz", "integrity": "sha1-XX6kW7755Kb/ZflUOOCofDV9WnM=", "dev": true, "requires": { @@ -36287,7 +36294,7 @@ }, "http-proxy-middleware": { "version": "0.18.0", - "resolved": "http://registry.npmjs.org/http-proxy-middleware/-/http-proxy-middleware-0.18.0.tgz", + "resolved": "https://registry.npmjs.org/http-proxy-middleware/-/http-proxy-middleware-0.18.0.tgz", "integrity": "sha512-Fs25KVMPAIIcgjMZkVHJoKg9VcXcC1C8yb9JUgeDvVXY0S/zgVIhMb+qVswDIgtJe2DfckMSY2d6TuTEutlk6Q==", "dev": true, "requires": { diff --git a/packages/Layout/footer-client/src/footer-client.scss b/packages/Layout/footer-client/src/footer-client.scss index 547e8c252..5e7271868 100644 --- a/packages/Layout/footer-client/src/footer-client.scss +++ b/packages/Layout/footer-client/src/footer-client.scss @@ -1,9 +1,26 @@ @import '@axa-fr/react-toolkit-core/src/common/scss/core.scss'; -@import '_footer-client-item.scss'; -@import '_footer-client-list.scss'; -@import '_language-selection.scss'; -@import '_social-network.scss'; +@import '_footer-client-item'; +@import '_footer-client-list'; +@import '_language-selection'; + +.social-network__list { + list-style: none; + display: flex; + padding: 0; +} + +.social-network__item { + flex-grow: 1; +} + +.social-network__link { + color: $color-white; +} + +.social-network__icon { + font-size: 25px; +} .af-footer-client { border-top: none; diff --git a/packages/tabs/package-lock.json b/packages/tabs/package-lock.json index 2fb591066..142b0fb7a 100644 --- a/packages/tabs/package-lock.json +++ b/packages/tabs/package-lock.json @@ -1,6 +1,6 @@ { "name": "@axa-fr/react-toolkit-tabs", - "version": "1.0.5", + "version": "1.1.0", "lockfileVersion": 1, "requires": true, "dependencies": { diff --git a/packages/tabs/package.json b/packages/tabs/package.json index 9bc0a370e..8c3416760 100644 --- a/packages/tabs/package.json +++ b/packages/tabs/package.json @@ -7,9 +7,6 @@ "scripts": { "prepare": "node ../../scripts/prepare.js" }, - "files": [ - "dist/" - ], "peerDependencies": { "react": "^16.4.1", "react-dom": "^16.4.1" diff --git a/packages/tabs/src/Pane.js b/packages/tabs/src/Pane.js deleted file mode 100644 index 59ae944db..000000000 --- a/packages/tabs/src/Pane.js +++ /dev/null @@ -1,23 +0,0 @@ -import React from 'react'; -import PropTypes from 'prop-types'; - -import { Constants } from '@axa-fr/react-toolkit-core'; - -const propTypes = { - ...Constants.propTypes, - children: PropTypes.any.isRequired, -}; - -const defaultProps = { - ...Constants.defaultProps, - children: null, -}; - -const Pane = ({ children }) => ( -
 {children}
-); - -Pane.propTypes = propTypes; -Pane.defaultProps = defaultProps; - -export default Pane; diff --git a/packages/tabs/src/Pane.spec.tsx b/packages/tabs/src/Pane.spec.tsx new file mode 100644 index 000000000..c7498b4d8 --- /dev/null +++ b/packages/tabs/src/Pane.spec.tsx @@ -0,0 +1,15 @@ +import * as React from 'react'; +import Pane from './Pane'; +import { create } from 'react-test-renderer'; + +describe('', () => { + it('should render component', () => { + const component = create( + +
Content
+ + ); + const json = component.toJSON(); + expect(json).toMatchSnapshot(); + }); +}); diff --git a/packages/tabs/src/Pane.tsx b/packages/tabs/src/Pane.tsx new file mode 100644 index 000000000..8795854b4 --- /dev/null +++ b/packages/tabs/src/Pane.tsx @@ -0,0 +1,26 @@ +import * as React from 'react'; +import { withClassDefault } from '@axa-fr/react-toolkit-core'; +import { compose, branch, renderNothing } from 'recompose'; + +const DEFAULT_CLASSNAME = 'af-tabs__pane'; + +export type DivProps = React.DetailedHTMLProps< + React.HTMLAttributes, + HTMLDivElement +>; + +interface PaneComponentProps extends DivProps { + active: boolean; + className?: string; + children?: React.ReactNode; +} +const Pane: React.SFC = ({ children, className }) => ( +
{children}
+); + +const enchance = compose( + branch((props: PaneComponentProps) => props.active === false, renderNothing), + withClassDefault(DEFAULT_CLASSNAME) +)(Pane); + +export default enchance; diff --git a/packages/tabs/src/Tab.js b/packages/tabs/src/Tab.js deleted file mode 100644 index e9906bd6e..000000000 --- a/packages/tabs/src/Tab.js +++ /dev/null @@ -1,87 +0,0 @@ -import React from 'react'; -import PropTypes from 'prop-types'; -import classNames from 'classnames'; - -import { Constants, ClassManager } from '@axa-fr/react-toolkit-core'; - -const propTypes = { - ...Constants.propTypes, - classModifier: PropTypes.string, - className: PropTypes.string, - children: PropTypes.any.isRequired, - title: PropTypes.any.isRequired, - active: PropTypes.bool.isRequired, - setActiveIndex: PropTypes.func, - index: PropTypes.number, - disabled: PropTypes.bool, -}; - -const defaultClassName = 'af-tabs__item'; - -const defaultProps = { - ...Constants.defaultProps, - className: defaultClassName, - children: null, - title: null, - active: false, - role: 'TITLE', - onChange: () => {}, - index: 0, - disabled: false, -}; - -class Tab extends React.Component { - /* eslint-disable no-unused-expressions */ - onChange = () => { - const { disabled, index, onChange } = this.props; - disabled - ? e => { - e.preventDefault(); - } - : onChange(index); - }; - - render() { - const { - role, - active, - disabled, - children, - title, - className, - classModifier, - } = this.props; - const componentClassName = ClassManager.getComponentClassName( - className, - classModifier, - defaultClassName - ); - switch (role) { - case 'TITLE': - return ( -
  • - -
    • - ); - case 'PANE': - return active ?
    {children}
    : null; - default: - return null; - } - } -} - -Tab.propTypes = propTypes; -Tab.defaultProps = defaultProps; -Tab.displayName = 'Tabs.Tab'; - -export default Tab; diff --git a/packages/tabs/src/Tab.tsx b/packages/tabs/src/Tab.tsx new file mode 100644 index 000000000..f077e584b --- /dev/null +++ b/packages/tabs/src/Tab.tsx @@ -0,0 +1,29 @@ +import * as React from 'react'; +import { + withClassDefault, + withClassModifier, + WithClassModifierOptions, +} from '@axa-fr/react-toolkit-core'; +import { compose } from 'recompose'; + +interface TabComponentProps { + className?: string; + title: string; + children?: React.ReactNode; + classModifier?: string; +} + +const Tab: React.SFC = () => ; + +const DEFAULT_CLASSNAME = 'af-tabs__pane'; + +export type TabProps = TabComponentProps & WithClassModifierOptions; + +const enhance = compose( + withClassDefault(DEFAULT_CLASSNAME), + withClassModifier +); + +const Enhanced = enhance(Tab); +Enhanced.displayName = 'TabCore'; +export default Enhanced; diff --git a/packages/tabs/src/Tabs.Title.js b/packages/tabs/src/Tabs.Title.js deleted file mode 100644 index 877b68599..000000000 --- a/packages/tabs/src/Tabs.Title.js +++ /dev/null @@ -1,47 +0,0 @@ -import React from 'react'; -import PropTypes from 'prop-types'; -import classNames from 'classnames'; - -import { Constants, ClassManager } from '@axa-fr/react-toolkit-core'; - -const propTypes = { - ...Constants.propTypes, - children: PropTypes.any.isRequired, - active: PropTypes.bool.isRequired, - className: PropTypes.string, - classModifier: PropTypes.string, -}; - -const defaultClassName = 'af-tabs__item'; - -const defaultProps = { - ...Constants.defaultProps, - children: null, - active: false, - className: defaultClassName, -}; - -const Title = props => { - const { active, className, classModifier } = props; - const componentClassName = ClassManager.getComponentClassName( - className, - classModifier, - defaultClassName - ); - return ( -
  • - -
    • - ); -}; - -Title.propTypes = propTypes; -Title.defaultProps = defaultProps; -Title.displayName = 'Tabs.Title'; - -export default Title; diff --git a/packages/tabs/src/Tabs.js b/packages/tabs/src/Tabs.js deleted file mode 100644 index a688178e8..000000000 --- a/packages/tabs/src/Tabs.js +++ /dev/null @@ -1,47 +0,0 @@ -import React from 'react'; -import PropTypes from 'prop-types'; -import TabsStateless from './TabsStateless'; -import Title from './Tabs.Title'; -import Tab from './Tab'; - -const propTypes = { - onChange: PropTypes.func, -}; - -const defaultProps = { - onChange: null, -}; - -class Tabs extends React.Component { - constructor(props) { - super(props); - this.state = { - activeIndex: 0, - }; - } - - onchange = index => { - this.setState({ activeIndex: index }); - const { onChange } = this.props; - if (onChange) { - onChange(index); - } - }; - - render() { - const { activeIndex } = this.state; - const { children } = this.props; - return ( - - {children.map(tab => tab)} - - ); - } -} - -Tabs.Tab = Tab; -Tabs.Title = Title; -Tabs.defaultProps = defaultProps; -Tabs.propTypes = propTypes; - -export default Tabs; diff --git a/packages/tabs/src/Tabs.spec.js b/packages/tabs/src/Tabs.spec.js deleted file mode 100644 index 5ec120aa9..000000000 --- a/packages/tabs/src/Tabs.spec.js +++ /dev/null @@ -1,17 +0,0 @@ -import React from 'react'; -import { mount } from 'enzyme'; - -import Tabs from './Tabs'; - -const wrapper = mount( - - Content of my first tab - Content of my second tab - -); - -describe(' With children', () => { - it('renders structure', () => { - expect(wrapper.find('.af-tabs').exists()).toBe(true); - }); -}); diff --git a/packages/tabs/src/Tabs.tsx b/packages/tabs/src/Tabs.tsx new file mode 100644 index 000000000..7b0434df1 --- /dev/null +++ b/packages/tabs/src/Tabs.tsx @@ -0,0 +1,14 @@ +import * as React from 'react'; + +import TabsCore, { TabsCoreProps } from './TabsCore'; +import Tab from './Tab'; + +class Tabs extends React.PureComponent { + public render() { + return ; + } + + public static readonly Tab = Tab; +} + +export default Tabs; diff --git a/packages/tabs/src/TabsCore.tsx b/packages/tabs/src/TabsCore.tsx new file mode 100644 index 000000000..15208ef4a --- /dev/null +++ b/packages/tabs/src/TabsCore.tsx @@ -0,0 +1,47 @@ +import TabsStateless, { + TabsStatelessHandlers, + TabsStatelessProps, +} from './TabsStateless'; + +import { + StateHandlerMap, + StateHandler, + StateUpdaters, + withStateHandlers, + compose, +} from 'recompose'; +import { TabProps } from './Tab'; + +export interface TabsContainerState { + activeIndex: string; +} + +export interface TabsCoreProps { + children: React.ReactElement[]; + onChange: React.MouseEventHandler; +} + +interface TabsUpdaters extends StateHandlerMap { + onChange: StateHandler; +} + +export const defaultState = { activeIndex: '0' }; + +export const stateUpdaters: StateUpdaters< + TabsCoreProps, + TabsContainerState, + TabsUpdaters +> = { + onChange: () => e => { + return { + activeIndex: e.id, + }; + }, +}; + +const enchancer = compose< + TabsStatelessHandlers & TabsStatelessProps, + TabsCoreProps +>(withStateHandlers(defaultState, stateUpdaters)); + +export default enchancer(TabsStateless); diff --git a/packages/tabs/src/TabsStateless.js b/packages/tabs/src/TabsStateless.js deleted file mode 100644 index f54ff8f92..000000000 --- a/packages/tabs/src/TabsStateless.js +++ /dev/null @@ -1,69 +0,0 @@ -import React from 'react'; -import PropTypes from 'prop-types'; - -import { Constants, ClassManager } from '@axa-fr/react-toolkit-core'; - -const defaultClassName = 'af-tabs'; - -const noop = () => {}; - -const propTypes = { - ...Constants.propTypes, - className: PropTypes.string, - children: PropTypes.array.isRequired, - activeIndex: PropTypes.number.isRequired, - onChange: PropTypes.func.isRequired, -}; - -const defaultProps = { - ...Constants.defaultProps, - className: defaultClassName, - children: [], - activeIndex: 0, - onChange: noop, -}; - -const TabsStateless = ({ - activeIndex, - className, - classModifier, - children, - onChange, -}) => { - const componentClassName = ClassManager.getComponentClassName( - className, - classModifier, - defaultClassName - ); - return ( -
    -
      - {React.Children.map(children, (tab, index) => - React.cloneElement(tab, { - active: activeIndex === index, - onChange, - role: 'TITLE', - // index as a key is ok here, no better candidate - key: index, // eslint-disable-line - index, - }) - )} -
    -
    - {React.Children.map(children, (tab, index) => - React.cloneElement(tab, { - active: activeIndex === index, - role: 'PANE', - // index as a key is ok here, no better candidate - key: index, // eslint-disable-line - }) - )} -
    -
    - ); -}; - -TabsStateless.defaultProps = defaultProps; -TabsStateless.propTypes = propTypes; - -export default TabsStateless; diff --git a/packages/tabs/src/TabsStateless.spec.tsx b/packages/tabs/src/TabsStateless.spec.tsx new file mode 100644 index 000000000..105e51779 --- /dev/null +++ b/packages/tabs/src/TabsStateless.spec.tsx @@ -0,0 +1,29 @@ +import * as React from 'react'; +import TabStateless from './TabsStateless'; +import Tab from './Tab'; +import { create } from 'react-test-renderer'; + +const noop = () => {}; +describe('', () => { + it('should render component', () => { + const component = create( + + + Content + + + Content + + + Content + + + ); + const json = component.toJSON(); + expect(json).toMatchSnapshot(); + }); +}); diff --git a/packages/tabs/src/TabsStateless.tsx b/packages/tabs/src/TabsStateless.tsx new file mode 100644 index 000000000..04267f55a --- /dev/null +++ b/packages/tabs/src/TabsStateless.tsx @@ -0,0 +1,63 @@ +import * as React from 'react'; +import { Constants, ClassManager } from '@axa-fr/react-toolkit-core'; +import { TabProps } from './Tab'; +import Title from './Title'; +import Pane from './Pane'; + +const defaultClassName = 'af-tabs'; + +export interface TabsStatelessProps { + className: string; + children: React.ReactElement[]; + activeIndex: string; + classModifier?: string; +} + +export interface TabsStatelessHandlers { + onChange: React.MouseEventHandler; +} + +const defaultProps = { + ...Constants.defaultProps, + className: defaultClassName, +}; + +const TabsStateless: React.SFC = ({ + activeIndex, + className, + classModifier, + children, + onChange, +}) => { + const componentClassName = ClassManager.getComponentClassName( + className, + classModifier, + defaultClassName + ); + return ( +
    +
      + {children.map((item, index) => ( + + {item.props.title} + + ))} +
    +
    + {children.map((item, index) => ( + + {item.props.children} + + ))} +
    +
    + ); +}; + +TabsStateless.defaultProps = defaultProps; + +export default TabsStateless; diff --git a/packages/tabs/src/Title.spec.tsx b/packages/tabs/src/Title.spec.tsx new file mode 100644 index 000000000..184b2ce11 --- /dev/null +++ b/packages/tabs/src/Title.spec.tsx @@ -0,0 +1,28 @@ +import * as React from 'react'; +import Title from './Title'; +import { mount } from 'enzyme'; +import { create } from 'react-test-renderer'; + +const noop = () => {}; +describe('', () => { + it('should render component', () => { + const component = create( + + Title displayed + + ); + const json = component.toJSON(); + expect(json).toMatchSnapshot(); + }); + + it('should render id click onCancel', () => { + const onChange = jest.fn(); + const wrapper = mount( + + header + + ); + wrapper.find('button').simulate('click', {}); + expect(onChange).toHaveBeenCalledWith({ id: '' }); + }); +}); diff --git a/packages/tabs/src/Title.tsx b/packages/tabs/src/Title.tsx new file mode 100644 index 000000000..d8dee75ee --- /dev/null +++ b/packages/tabs/src/Title.tsx @@ -0,0 +1,59 @@ +import * as React from 'react'; +import { + withClassDefault, + withClickId, + WithClassModifierOptions, + withClassModifier +} from '@axa-fr/react-toolkit-core'; +import { compose, withProps } from 'recompose'; + +const onChangeEvent = 'onChange'; + +export interface TitleComponentProps { + enable?: boolean | null; + active: boolean; + className?: string; + classModifier?: string; + id?: string; +} + +export interface TitleHandlerProps { + onChange: React.MouseEventHandler; +} + +const Title: React.SFC = ({ + className, + onChange, + children, + id, +}) => ( +
  • + +
    • +); + +const DEFAULT_CLASSNAME = 'af-tabs__item'; + +export type TitleProps = TitleComponentProps & + TitleHandlerProps & + WithClassModifierOptions; + +const setWithProps = (props: TitleComponentProps) => ({ + ...props, + classModifier: (props.classModifier || '').concat( + (props.enable === false ? ' disabled' : '').concat( + props.active ? ' active' : '' + ) + ), +}); + +const enchance = compose( + withProps(setWithProps), + withClickId({ event: [onChangeEvent] }), + withClassDefault(DEFAULT_CLASSNAME), + withClassModifier +)(Title); + +export default enchance; diff --git a/packages/tabs/src/__snapshots__/Pane.spec.tsx.snap b/packages/tabs/src/__snapshots__/Pane.spec.tsx.snap new file mode 100644 index 000000000..b21747b57 --- /dev/null +++ b/packages/tabs/src/__snapshots__/Pane.spec.tsx.snap @@ -0,0 +1,11 @@ +// Jest Snapshot v1, https://goo.gl/fbAQLP + +exports[` should render component 1`] = ` +
    +
    + Content +
    +
    +`; diff --git a/packages/tabs/src/__snapshots__/TabsStateless.spec.tsx.snap b/packages/tabs/src/__snapshots__/TabsStateless.spec.tsx.snap new file mode 100644 index 000000000..c4c867bbf --- /dev/null +++ b/packages/tabs/src/__snapshots__/TabsStateless.spec.tsx.snap @@ -0,0 +1,56 @@ +// Jest Snapshot v1, https://goo.gl/fbAQLP + +exports[` should render component 1`] = ` +
    +
      +
    • + +
      • +
    • + +
      • +
    • + +
      • +
    +
    +
    + + Content + +
    +
    +
    +`; diff --git a/packages/tabs/src/__snapshots__/Title.spec.tsx.snap b/packages/tabs/src/__snapshots__/Title.spec.tsx.snap new file mode 100644 index 000000000..b9a57a779 --- /dev/null +++ b/packages/tabs/src/__snapshots__/Title.spec.tsx.snap @@ -0,0 +1,14 @@ +// Jest Snapshot v1, https://goo.gl/fbAQLP + +exports[` should render component 1`] = ` +
  • + +
    • +`; diff --git a/packages/tabs/src/index.js b/packages/tabs/src/index.ts similarity index 57% rename from packages/tabs/src/index.js rename to packages/tabs/src/index.ts index 4b674c987..e0629d984 100644 --- a/packages/tabs/src/index.js +++ b/packages/tabs/src/index.ts @@ -1,3 +1,3 @@ import Tabs from './Tabs'; -export default Tabs; +export default Tabs; \ No newline at end of file diff --git a/packages/tabs/tsconfig.json b/packages/tabs/tsconfig.json new file mode 100644 index 000000000..9dfdd3ce8 --- /dev/null +++ b/packages/tabs/tsconfig.json @@ -0,0 +1,4 @@ +{ + "extends": "../../tsconfig.dev.json", + "include": ["./src/index.ts"], +} From dbff619ff2817bed6bdda1a9dc07326dab20496b Mon Sep 17 00:00:00 2001 From: Olivier YOUF Date: Mon, 18 Feb 2019 15:50:18 +0100 Subject: [PATCH 2/2] fix add eof --- packages/tabs/src/index.ts | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/tabs/src/index.ts b/packages/tabs/src/index.ts index e0629d984..4b674c987 100644 --- a/packages/tabs/src/index.ts +++ b/packages/tabs/src/index.ts @@ -1,3 +1,3 @@ import Tabs from './Tabs'; -export default Tabs; \ No newline at end of file +export default Tabs;