From b4d1cf5172e8b31b908a68184aca335115e411c7 Mon Sep 17 00:00:00 2001 From: gchaps Date: Mon, 5 Feb 2018 17:05:05 -0800 Subject: [PATCH 01/12] work in progress --- package-lock.json | 1139 +++++++++++++--------- src-docs/src/routes.js | 10 +- src-docs/src/views/guidelines/button.js | 676 +++++++++++++ src-docs/src/views/guidelines/writing.js | 172 ++++ 4 files changed, 1525 insertions(+), 472 deletions(-) create mode 100644 src-docs/src/views/guidelines/button.js diff --git a/package-lock.json b/package-lock.json index 27f0239fe11..cf939426b25 100644 --- a/package-lock.json +++ b/package-lock.json @@ -4,10 +4,21 @@ "lockfileVersion": 1, "requires": true, "dependencies": { + "@babel/code-frame": { + "version": "7.0.0-beta.38", + "resolved": "https://registry.npmjs.org/@babel/code-frame/-/code-frame-7.0.0-beta.38.tgz", + "integrity": "sha512-JNHofQND7Iiuy3f6RXSillN1uBe87DAp+1ktsBfSxfL3xWeGFyJC9jH5zu2zs7eqVGp2qXWvJZFiJIwOYnaCQw==", + "dev": true, + "requires": { + "chalk": "2.1.0", + "esutils": "2.0.2", + "js-tokens": "3.0.2" + } + }, "@elastic/eslint-config-kibana": { - "version": "0.13.0", - "resolved": "https://registry.npmjs.org/@elastic/eslint-config-kibana/-/eslint-config-kibana-0.13.0.tgz", - "integrity": "sha1-TGrZlnImzwGHK4mTlPtlhw1mBQw=", + "version": "0.15.0", + "resolved": "https://registry.npmjs.org/@elastic/eslint-config-kibana/-/eslint-config-kibana-0.15.0.tgz", + "integrity": "sha1-pVJ5NJfN/Bgpwvm3zXAY6wCPFgY=", "dev": true }, "@types/node": { @@ -16,6 +27,12 @@ "integrity": "sha512-54Dm6NwYeiSQmRB1BLXKr5GELi0wFapR1npi8bnZhEcu84d/yQKqnwwXQ56hZ0RUbTG6L5nqDZaN3dgByQXQRQ==", "dev": true }, + "@types/react": { + "version": "16.0.35", + "resolved": "https://registry.npmjs.org/@types/react/-/react-16.0.35.tgz", + "integrity": "sha512-8MP/F4EHnNaJGJO0ExCkO2RVAkpOTIO/ByE8dbZ2LMShYZ6rGRvxKk6hVHYop54tM/BocXGVxpw+G6b8AQwy7g==", + "dev": true + }, "abab": { "version": "1.0.4", "resolved": "https://registry.npmjs.org/abab/-/abab-1.0.4.tgz", @@ -61,20 +78,12 @@ } }, "acorn-globals": { - "version": "3.1.0", - "resolved": "https://registry.npmjs.org/acorn-globals/-/acorn-globals-3.1.0.tgz", - "integrity": "sha1-/YJw9x+7SZawBPqIDuXUZXOnMb8=", + "version": "4.1.0", + "resolved": "https://registry.npmjs.org/acorn-globals/-/acorn-globals-4.1.0.tgz", + "integrity": "sha512-KjZwU26uG3u6eZcfGbTULzFcsoz6pegNKtHPksZPOUsiKo5bUmiBPa38FuHZ/Eun+XYh/JCCkS9AS3Lu4McQOQ==", "dev": true, "requires": { - "acorn": "4.0.13" - }, - "dependencies": { - "acorn": { - "version": "4.0.13", - "resolved": "https://registry.npmjs.org/acorn/-/acorn-4.0.13.tgz", - "integrity": "sha1-EFSVrlNh1pe9GVyCUZLhrX8lN4c=", - "dev": true - } + "acorn": "5.2.1" } }, "acorn-jsx": { @@ -414,6 +423,12 @@ "integrity": "sha1-NhIfhFwFeBct5Bmpfb6x0W7DRUI=", "dev": true }, + "async-limiter": { + "version": "1.0.0", + "resolved": "https://registry.npmjs.org/async-limiter/-/async-limiter-1.0.0.tgz", + "integrity": "sha512-jp/uFnooOiO+L211eZOoSyzpOITMXx1rBITauYykG3BRYPu8h0UcxsPNB04RR5vo4Tyz3+ay17tR6JVf9qzYWg==", + "dev": true + }, "asynckit": { "version": "0.4.0", "resolved": "https://registry.npmjs.org/asynckit/-/asynckit-0.4.0.tgz", @@ -986,13 +1001,13 @@ } }, "babel-jest": { - "version": "21.0.0", - "resolved": "https://registry.npmjs.org/babel-jest/-/babel-jest-21.0.0.tgz", - "integrity": "sha512-MfZq0KK4tB7V3bCSHrzBa/F8lkhAjnG40asnaBHXdeOiFSOH7eTcVlU4pNz2jsdqclqhc0kO2mkGajKlZRqBKQ==", + "version": "22.1.0", + "resolved": "https://registry.npmjs.org/babel-jest/-/babel-jest-22.1.0.tgz", + "integrity": "sha512-5pKRFTlDr+x1JESNRd5leqvxEJk3dRwVvIXikB6Lr4BWZbBppk1Wp+BLUzxWL8tM+EYGLCWgfqkD35Sft8r8Lw==", "dev": true, "requires": { "babel-plugin-istanbul": "4.1.5", - "babel-preset-jest": "21.2.0" + "babel-preset-jest": "22.1.0" } }, "babel-loader": { @@ -1064,11 +1079,22 @@ } }, "babel-plugin-jest-hoist": { - "version": "21.2.0", - "resolved": "https://registry.npmjs.org/babel-plugin-jest-hoist/-/babel-plugin-jest-hoist-21.2.0.tgz", - "integrity": "sha512-yi5QuiVyyvhBUDLP4ButAnhYzkdrUwWDtvUJv71hjH3fclhnZg4HkDeqaitcR2dZZx/E67kGkRcPVjtVu+SJfQ==", + "version": "22.1.0", + "resolved": "https://registry.npmjs.org/babel-plugin-jest-hoist/-/babel-plugin-jest-hoist-22.1.0.tgz", + "integrity": "sha512-Og5sjbOZc4XUI3njqwYhS6WLTlHQUJ/y5+dOqmst8eHrozYZgT4OMzAaYaxhk75c2fBVYwn7+mNEN97XDO7cOw==", "dev": true }, + "babel-plugin-react-docgen": { + "version": "1.8.2", + "resolved": "https://registry.npmjs.org/babel-plugin-react-docgen/-/babel-plugin-react-docgen-1.8.2.tgz", + "integrity": "sha512-201wzLbDeeZri6p+KREqspsFA8rNV6SiVx65jiPC6lhM7TUTNcbEoacFHbB6ou8ONsQT3phTqLpd5Nl02mZaqw==", + "dev": true, + "requires": { + "babel-types": "6.26.0", + "lodash": "4.17.4", + "react-docgen": "2.20.0" + } + }, "babel-plugin-syntax-async-functions": { "version": "6.13.0", "resolved": "https://registry.npmjs.org/babel-plugin-syntax-async-functions/-/babel-plugin-syntax-async-functions-6.13.0.tgz", @@ -1629,12 +1655,12 @@ } }, "babel-preset-jest": { - "version": "21.2.0", - "resolved": "https://registry.npmjs.org/babel-preset-jest/-/babel-preset-jest-21.2.0.tgz", - "integrity": "sha512-hm9cBnr2h3J7yXoTtAVV0zg+3vg0Q/gT2GYuzlreTU0EPkJRtlNgKJJ3tBKEn0+VjAi3JykV6xCJkuUYttEEfA==", + "version": "22.1.0", + "resolved": "https://registry.npmjs.org/babel-preset-jest/-/babel-preset-jest-22.1.0.tgz", + "integrity": "sha512-ps2UYz7IQpP2IgZ41tJjUuUDTxJioprHXD8fi9DoycKDGNqB3nAX/ggy1S3plaQd43ktBvMS1FkkyGNoBujFpg==", "dev": true, "requires": { - "babel-plugin-jest-hoist": "21.2.0", + "babel-plugin-jest-hoist": "22.1.0", "babel-plugin-syntax-object-rest-spread": "6.13.0" } }, @@ -1930,6 +1956,12 @@ "integrity": "sha1-EsJe/kCkXjwyPrhnWgoM5XsiNx8=", "dev": true }, + "browser-process-hrtime": { + "version": "0.1.2", + "resolved": "https://registry.npmjs.org/browser-process-hrtime/-/browser-process-hrtime-0.1.2.tgz", + "integrity": "sha1-Ql1opY00R/AqBKqJQYf86K+Le44=", + "dev": true + }, "browser-resolve": { "version": "1.11.2", "resolved": "https://registry.npmjs.org/browser-resolve/-/browser-resolve-1.11.2.tgz", @@ -2243,6 +2275,12 @@ "safe-buffer": "5.1.1" } }, + "circular-dependency-plugin": { + "version": "4.4.0", + "resolved": "https://registry.npmjs.org/circular-dependency-plugin/-/circular-dependency-plugin-4.4.0.tgz", + "integrity": "sha512-yEFtUNUYT4jBykEX5ZOHw+5goA3glGZr9wAXIQqoyakjz5H5TeUmScnWRc52douAhb9eYzK3s7V6bXfNnjFdzg==", + "dev": true + }, "circular-json": { "version": "0.3.3", "resolved": "https://registry.npmjs.org/circular-json/-/circular-json-0.3.3.tgz", @@ -2772,6 +2810,7 @@ "version": "15.6.2", "resolved": "https://registry.npmjs.org/create-react-class/-/create-react-class-15.6.2.tgz", "integrity": "sha1-zx7RXxKq1/FO9fLf4F5sQvke8Co=", + "dev": true, "requires": { "fbjs": "0.8.16", "loose-envify": "1.3.1", @@ -3365,6 +3404,12 @@ "repeating": "2.0.1" } }, + "detect-newline": { + "version": "2.1.0", + "resolved": "https://registry.npmjs.org/detect-newline/-/detect-newline-2.1.0.tgz", + "integrity": "sha1-9B8cEL5LAOh7XxPaaAdZ8sW/0+I=", + "dev": true + }, "detect-node": { "version": "2.0.3", "resolved": "https://registry.npmjs.org/detect-node/-/detect-node-2.0.3.tgz", @@ -3485,6 +3530,15 @@ "integrity": "sha1-sXrtguirWeUt2cGbF1bg/BhyBMI=", "dev": true }, + "domexception": { + "version": "1.0.1", + "resolved": "https://registry.npmjs.org/domexception/-/domexception-1.0.1.tgz", + "integrity": "sha512-raigMkn7CJNNo6Ihro1fzG7wr3fHuYVytzquZKX5n0yizGsTcYgzdIUwj1X9pK0VvjeihV+XiclP+DjwbsSKug==", + "dev": true, + "requires": { + "webidl-conversions": "4.0.2" + } + }, "domhandler": { "version": "2.4.1", "resolved": "https://registry.npmjs.org/domhandler/-/domhandler-2.4.1.tgz", @@ -3674,7 +3728,7 @@ "object.assign": "4.0.4", "object.values": "1.0.4", "prop-types": "15.6.0", - "react-test-renderer": "16.0.0" + "react-test-renderer": "16.2.0" } }, "enzyme-adapter-utils": { @@ -4218,6 +4272,12 @@ } } }, + "eslint-plugin-jest": { + "version": "21.7.0", + "resolved": "https://registry.npmjs.org/eslint-plugin-jest/-/eslint-plugin-jest-21.7.0.tgz", + "integrity": "sha512-ccXTDOiHe2c7e0riu9UIh3l9INIJaK1aZckwtl7luX9TymtKL0htAE+epNo/4w6uvj0vFc2hRvasHoLOCXVdtQ==", + "dev": true + }, "eslint-plugin-jsx-a11y": { "version": "6.0.2", "resolved": "https://registry.npmjs.org/eslint-plugin-jsx-a11y/-/eslint-plugin-jsx-a11y-6.0.2.tgz", @@ -4406,6 +4466,12 @@ "clone-regexp": "1.0.0" } }, + "exit": { + "version": "0.1.2", + "resolved": "https://registry.npmjs.org/exit/-/exit-0.1.2.tgz", + "integrity": "sha1-BjJjj42HfMghB9MKD/8aF8uhzQw=", + "dev": true + }, "exit-hook": { "version": "1.1.1", "resolved": "https://registry.npmjs.org/exit-hook/-/exit-hook-1.1.1.tgz", @@ -4431,17 +4497,17 @@ } }, "expect": { - "version": "21.2.1", - "resolved": "https://registry.npmjs.org/expect/-/expect-21.2.1.tgz", - "integrity": "sha512-orfQQqFRTX0jH7znRIGi8ZMR8kTNpXklTTz8+HGTpmTKZo3Occ6JNB5FXMb8cRuiiC/GyDqsr30zUa66ACYlYw==", + "version": "22.1.0", + "resolved": "https://registry.npmjs.org/expect/-/expect-22.1.0.tgz", + "integrity": "sha512-8K+8TjNnZq73KYtqNWKWTbYbN8z4loeL+Pn2bqpmtTdBtLNXJtpz9vkUcQlFsgKMDRA3VM8GXRA6qbV/oBF7Bw==", "dev": true, "requires": { "ansi-styles": "3.2.0", - "jest-diff": "21.2.1", - "jest-get-type": "21.2.0", - "jest-matcher-utils": "21.2.1", - "jest-message-util": "21.2.1", - "jest-regex-util": "21.2.0" + "jest-diff": "22.1.0", + "jest-get-type": "22.1.0", + "jest-matcher-utils": "22.1.0", + "jest-message-util": "22.1.0", + "jest-regex-util": "22.1.0" } }, "express": { @@ -6213,6 +6279,7 @@ "version": "3.3.0", "resolved": "https://registry.npmjs.org/history/-/history-3.3.0.tgz", "integrity": "sha1-/O3M6PEpdTcVRdc1RhAzV5ptrpw=", + "dev": true, "requires": { "invariant": "2.2.2", "loose-envify": "1.3.1", @@ -6240,7 +6307,8 @@ "hoist-non-react-statics": { "version": "1.2.0", "resolved": "https://registry.npmjs.org/hoist-non-react-statics/-/hoist-non-react-statics-1.2.0.tgz", - "integrity": "sha1-qkSM8JhtVcxAdzsXF0t90GbLfPs=" + "integrity": "sha1-qkSM8JhtVcxAdzsXF0t90GbLfPs=", + "dev": true }, "home-or-tmp": { "version": "2.0.0", @@ -6476,11 +6544,6 @@ "decamelize": "1.2.0" } }, - "hyperform": { - "version": "0.9.9", - "resolved": "https://registry.npmjs.org/hyperform/-/hyperform-0.9.9.tgz", - "integrity": "sha1-oyzKFAsfZYqmpR4SAKTzH23EojA=" - }, "iconv-lite": { "version": "0.4.19", "resolved": "https://registry.npmjs.org/iconv-lite/-/iconv-lite-0.4.19.tgz", @@ -6518,6 +6581,16 @@ "resolved": "https://registry.npmjs.org/import-lazy/-/import-lazy-2.1.0.tgz", "integrity": "sha1-BWmOPUXIjo1+nZLLBYTnfwlvPkM=" }, + "import-local": { + "version": "1.0.0", + "resolved": "https://registry.npmjs.org/import-local/-/import-local-1.0.0.tgz", + "integrity": "sha512-vAaZHieK9qjGo58agRBg+bhHX3hoTZU/Oa3GESWLz7t1U62fk63aHuDJJEteXoDeTCcPmUT+z38gkHPZkkmpmQ==", + "dev": true, + "requires": { + "pkg-dir": "2.0.0", + "resolve-cwd": "2.0.0" + } + }, "imurmurhash": { "version": "0.1.4", "resolved": "https://registry.npmjs.org/imurmurhash/-/imurmurhash-0.1.4.tgz", @@ -6803,6 +6876,7 @@ "version": "2.2.2", "resolved": "https://registry.npmjs.org/invariant/-/invariant-2.2.2.tgz", "integrity": "sha1-nh9WrArNtr8wMwbzOL47IErmA2A=", + "dev": true, "requires": { "loose-envify": "1.3.1" } @@ -6876,9 +6950,9 @@ "dev": true }, "is-ci": { - "version": "1.0.10", - "resolved": "https://registry.npmjs.org/is-ci/-/is-ci-1.0.10.tgz", - "integrity": "sha1-9zkzayYyNlBhqdSCcM1WrjNpMY4=", + "version": "1.1.0", + "resolved": "https://registry.npmjs.org/is-ci/-/is-ci-1.1.0.tgz", + "integrity": "sha512-c7TnwxLePuqIlxHgr7xtxzycJPegNHFuIrBkwbf8hc58//+Op1CqFkyS+xnIMkwn9UsJIwc174BIjkyBmSpjKg==", "dev": true, "requires": { "ci-info": "1.1.2" @@ -6943,6 +7017,12 @@ "resolved": "https://registry.npmjs.org/is-fullwidth-code-point/-/is-fullwidth-code-point-2.0.0.tgz", "integrity": "sha1-o7MKXE8ZkYMWeqq5O+764937ZU8=" }, + "is-generator-fn": { + "version": "1.0.0", + "resolved": "https://registry.npmjs.org/is-generator-fn/-/is-generator-fn-1.0.0.tgz", + "integrity": "sha1-lp1J4bszKfa7fwkIm+JleLLd1Go=", + "dev": true + }, "is-glob": { "version": "2.0.1", "resolved": "https://registry.npmjs.org/is-glob/-/is-glob-2.0.1.tgz", @@ -7356,490 +7436,348 @@ } }, "jest": { - "version": "21.2.1", - "resolved": "https://registry.npmjs.org/jest/-/jest-21.2.1.tgz", - "integrity": "sha512-mXN0ppPvWYoIcC+R+ctKxAJ28xkt/Z5Js875padm4GbgUn6baeR5N4Ng6LjatIRpUQDZVJABT7Y4gucFjPryfw==", + "version": "22.1.4", + "resolved": "https://registry.npmjs.org/jest/-/jest-22.1.4.tgz", + "integrity": "sha512-cIPkn+OFGabazPesbhnYkadPftoO2Fo3w84QjeIP+A8eZ5qj7Zs4PuTemAW8StNMxySJr0KPk/LhYG2GUHLexQ==", "dev": true, "requires": { - "jest-cli": "21.2.1" + "jest-cli": "22.1.4" } }, "jest-changed-files": { - "version": "21.2.0", - "resolved": "https://registry.npmjs.org/jest-changed-files/-/jest-changed-files-21.2.0.tgz", - "integrity": "sha512-+lCNP1IZLwN1NOIvBcV5zEL6GENK6TXrDj4UxWIeLvIsIDa+gf6J7hkqsW2qVVt/wvH65rVvcPwqXdps5eclTQ==", + "version": "22.1.4", + "resolved": "https://registry.npmjs.org/jest-changed-files/-/jest-changed-files-22.1.4.tgz", + "integrity": "sha512-EpqJhwt+N/wEHRT+5KrjagVrunduOfMgAb7fjjHkXHFCPRZoVZwl896S7krx7txf5hrMNUkpECnOnO2wBgzJCw==", "dev": true, "requires": { "throat": "4.1.0" } }, "jest-cli": { - "version": "21.2.1", - "resolved": "https://registry.npmjs.org/jest-cli/-/jest-cli-21.2.1.tgz", - "integrity": "sha512-T1BzrbFxDIW/LLYQqVfo94y/hhaj1NzVQkZgBumAC+sxbjMROI7VkihOdxNR758iYbQykL2ZOWUBurFgkQrzdg==", + "version": "22.1.4", + "resolved": "https://registry.npmjs.org/jest-cli/-/jest-cli-22.1.4.tgz", + "integrity": "sha512-p7yOu0Q5uuXb3Q93qEg3LE6eNGgAGueakifxXNEqQx4b0lOl2YlC9t6BLQWNOJ+z42VWK/BIdFjf6lxKcTkjFA==", "dev": true, "requires": { "ansi-escapes": "3.0.0", "chalk": "2.1.0", + "exit": "0.1.2", "glob": "7.1.2", "graceful-fs": "4.1.11", - "is-ci": "1.0.10", + "import-local": "1.0.0", + "is-ci": "1.1.0", "istanbul-api": "1.2.1", "istanbul-lib-coverage": "1.1.1", "istanbul-lib-instrument": "1.9.1", "istanbul-lib-source-maps": "1.2.2", - "jest-changed-files": "21.2.0", - "jest-config": "21.2.1", - "jest-environment-jsdom": "21.2.1", - "jest-haste-map": "21.2.0", - "jest-message-util": "21.2.1", - "jest-regex-util": "21.2.0", - "jest-resolve-dependencies": "21.2.0", - "jest-runner": "21.2.1", - "jest-runtime": "21.2.1", - "jest-snapshot": "21.2.1", - "jest-util": "21.2.1", + "jest-changed-files": "22.1.4", + "jest-config": "22.1.4", + "jest-environment-jsdom": "22.1.4", + "jest-get-type": "22.1.0", + "jest-haste-map": "22.1.0", + "jest-message-util": "22.1.0", + "jest-regex-util": "22.1.0", + "jest-resolve-dependencies": "22.1.0", + "jest-runner": "22.1.4", + "jest-runtime": "22.1.4", + "jest-snapshot": "22.1.2", + "jest-util": "22.1.4", + "jest-worker": "22.1.0", "micromatch": "2.3.11", - "node-notifier": "5.1.2", - "pify": "3.0.0", + "node-notifier": "5.2.1", + "realpath-native": "1.0.0", + "rimraf": "2.6.2", "slash": "1.0.0", "string-length": "2.0.0", "strip-ansi": "4.0.0", "which": "1.3.0", - "worker-farm": "1.5.2", - "yargs": "9.0.1" + "yargs": "10.1.2" }, "dependencies": { - "ansi-regex": { - "version": "2.1.1", - "resolved": "https://registry.npmjs.org/ansi-regex/-/ansi-regex-2.1.1.tgz", - "integrity": "sha1-w7M6te42DYbg5ijwRorn7yfWVN8=", - "dev": true - }, "cliui": { - "version": "3.2.0", - "resolved": "https://registry.npmjs.org/cliui/-/cliui-3.2.0.tgz", - "integrity": "sha1-EgYBU3qRbSmUD5NNo7SNWFo5IT0=", + "version": "4.0.0", + "resolved": "https://registry.npmjs.org/cliui/-/cliui-4.0.0.tgz", + "integrity": "sha512-nY3W5Gu2racvdDk//ELReY+dHjb9PlIcVDFXP72nVIhq2Gy3LuVXYwJoPVudwQnv1shtohpgkdCKT2YaKY0CKw==", "dev": true, "requires": { - "string-width": "1.0.2", - "strip-ansi": "3.0.1", + "string-width": "2.1.1", + "strip-ansi": "4.0.0", "wrap-ansi": "2.1.0" - }, - "dependencies": { - "string-width": { - "version": "1.0.2", - "resolved": "https://registry.npmjs.org/string-width/-/string-width-1.0.2.tgz", - "integrity": "sha1-EYvfW4zcUaKn5w0hHgfisLmxB9M=", - "dev": true, - "requires": { - "code-point-at": "1.1.0", - "is-fullwidth-code-point": "1.0.0", - "strip-ansi": "3.0.1" - } - }, - "strip-ansi": { - "version": "3.0.1", - "resolved": "https://registry.npmjs.org/strip-ansi/-/strip-ansi-3.0.1.tgz", - "integrity": "sha1-ajhfuIU9lS1f8F0Oiq+UJ43GPc8=", - "dev": true, - "requires": { - "ansi-regex": "2.1.1" - } - } - } - }, - "is-fullwidth-code-point": { - "version": "1.0.0", - "resolved": "https://registry.npmjs.org/is-fullwidth-code-point/-/is-fullwidth-code-point-1.0.0.tgz", - "integrity": "sha1-754xOG8DGn8NZDr4L95QxFfvAMs=", - "dev": true, - "requires": { - "number-is-nan": "1.0.1" - } - }, - "load-json-file": { - "version": "2.0.0", - "resolved": "https://registry.npmjs.org/load-json-file/-/load-json-file-2.0.0.tgz", - "integrity": "sha1-eUfkIUmvgNaWy/eXvKq8/h/inKg=", - "dev": true, - "requires": { - "graceful-fs": "4.1.11", - "parse-json": "2.2.0", - "pify": "2.3.0", - "strip-bom": "3.0.0" - }, - "dependencies": { - "pify": { - "version": "2.3.0", - "resolved": "https://registry.npmjs.org/pify/-/pify-2.3.0.tgz", - "integrity": "sha1-7RQaasBDqEnqWISY59yosVMw6Qw=", - "dev": true - } - } - }, - "path-type": { - "version": "2.0.0", - "resolved": "https://registry.npmjs.org/path-type/-/path-type-2.0.0.tgz", - "integrity": "sha1-8BLMuEFbcJb8LaoQVMPXI4lZTHM=", - "dev": true, - "requires": { - "pify": "2.3.0" - }, - "dependencies": { - "pify": { - "version": "2.3.0", - "resolved": "https://registry.npmjs.org/pify/-/pify-2.3.0.tgz", - "integrity": "sha1-7RQaasBDqEnqWISY59yosVMw6Qw=", - "dev": true - } - } - }, - "read-pkg": { - "version": "2.0.0", - "resolved": "https://registry.npmjs.org/read-pkg/-/read-pkg-2.0.0.tgz", - "integrity": "sha1-jvHAYjxqbbDcZxPEv6xGMysjaPg=", - "dev": true, - "requires": { - "load-json-file": "2.0.0", - "normalize-package-data": "2.4.0", - "path-type": "2.0.0" } }, - "read-pkg-up": { - "version": "2.0.0", - "resolved": "https://registry.npmjs.org/read-pkg-up/-/read-pkg-up-2.0.0.tgz", - "integrity": "sha1-a3KoBImE4MQeeVEP1en6mbO1Sb4=", - "dev": true, - "requires": { - "find-up": "2.1.0", - "read-pkg": "2.0.0" - } - }, - "strip-bom": { - "version": "3.0.0", - "resolved": "https://registry.npmjs.org/strip-bom/-/strip-bom-3.0.0.tgz", - "integrity": "sha1-IzTBjpx1n3vdVv3vfprj1YjmjtM=", - "dev": true - }, "yargs": { - "version": "9.0.1", - "resolved": "https://registry.npmjs.org/yargs/-/yargs-9.0.1.tgz", - "integrity": "sha1-UqzCP+7Kw0BCB47njAwAf1CF20w=", + "version": "10.1.2", + "resolved": "https://registry.npmjs.org/yargs/-/yargs-10.1.2.tgz", + "integrity": "sha512-ivSoxqBGYOqQVruxD35+EyCFDYNEFL/Uo6FcOnz+9xZdZzK0Zzw4r4KhbrME1Oo2gOggwJod2MnsdamSG7H9ig==", "dev": true, "requires": { - "camelcase": "4.1.0", - "cliui": "3.2.0", + "cliui": "4.0.0", "decamelize": "1.2.0", + "find-up": "2.1.0", "get-caller-file": "1.0.2", "os-locale": "2.1.0", - "read-pkg-up": "2.0.0", "require-directory": "2.1.1", "require-main-filename": "1.0.1", "set-blocking": "2.0.0", "string-width": "2.1.1", "which-module": "2.0.0", "y18n": "3.2.1", - "yargs-parser": "7.0.0" + "yargs-parser": "8.1.0" + } + }, + "yargs-parser": { + "version": "8.1.0", + "resolved": "https://registry.npmjs.org/yargs-parser/-/yargs-parser-8.1.0.tgz", + "integrity": "sha512-yP+6QqN8BmrgW2ggLtTbdrOyBNSI7zBa4IykmiV5R1wl1JWNxQvWhMfMdmzIYtKU7oP3OOInY/tl2ov3BDjnJQ==", + "dev": true, + "requires": { + "camelcase": "4.1.0" } } } }, "jest-config": { - "version": "21.2.1", - "resolved": "https://registry.npmjs.org/jest-config/-/jest-config-21.2.1.tgz", - "integrity": "sha512-fJru5HtlD/5l2o25eY9xT0doK3t2dlglrqoGpbktduyoI0T5CwuB++2YfoNZCrgZipTwPuAGonYv0q7+8yDc/A==", + "version": "22.1.4", + "resolved": "https://registry.npmjs.org/jest-config/-/jest-config-22.1.4.tgz", + "integrity": "sha512-ZImFp7STrUDOgQLW5I5UloCiCRMh6HmMIYIoWqaQkxnR5ws7MuZFG/Ns9sZFyfrnyWCvcW91e+XcEfNeoa4Jew==", "dev": true, "requires": { "chalk": "2.1.0", "glob": "7.1.2", - "jest-environment-jsdom": "21.2.1", - "jest-environment-node": "21.2.1", - "jest-get-type": "21.2.0", - "jest-jasmine2": "21.2.1", - "jest-regex-util": "21.2.0", - "jest-resolve": "21.2.0", - "jest-util": "21.2.1", - "jest-validate": "21.2.1", - "pretty-format": "21.2.1" + "jest-environment-jsdom": "22.1.4", + "jest-environment-node": "22.1.4", + "jest-get-type": "22.1.0", + "jest-jasmine2": "22.1.4", + "jest-regex-util": "22.1.0", + "jest-resolve": "22.1.4", + "jest-util": "22.1.4", + "jest-validate": "22.1.2", + "pretty-format": "22.1.0" } }, "jest-diff": { - "version": "21.2.1", - "resolved": "https://registry.npmjs.org/jest-diff/-/jest-diff-21.2.1.tgz", - "integrity": "sha512-E5fu6r7PvvPr5qAWE1RaUwIh/k6Zx/3OOkZ4rk5dBJkEWRrUuSgbMt2EO8IUTPTd6DOqU3LW6uTIwX5FRvXoFA==", + "version": "22.1.0", + "resolved": "https://registry.npmjs.org/jest-diff/-/jest-diff-22.1.0.tgz", + "integrity": "sha512-lowdbU/dzXh+2/MR5QcvU5KPNkO4JdAEYw0PkQCbIQIuy5+g3QZBuVhWh8179Fmpg4CQrz1WgoK/yQHDCHbqqw==", "dev": true, "requires": { "chalk": "2.1.0", "diff": "3.4.0", - "jest-get-type": "21.2.0", - "pretty-format": "21.2.1" + "jest-get-type": "22.1.0", + "pretty-format": "22.1.0" } }, "jest-docblock": { - "version": "21.2.0", - "resolved": "https://registry.npmjs.org/jest-docblock/-/jest-docblock-21.2.0.tgz", - "integrity": "sha512-5IZ7sY9dBAYSV+YjQ0Ovb540Ku7AO9Z5o2Cg789xj167iQuZ2cG+z0f3Uct6WeYLbU6aQiM2pCs7sZ+4dotydw==", - "dev": true + "version": "22.1.0", + "resolved": "https://registry.npmjs.org/jest-docblock/-/jest-docblock-22.1.0.tgz", + "integrity": "sha512-/+OGgBVRJb5wCbXrB1LQvibQBz2SdrvDdKRNzY1gL+OISQJZCR9MOewbygdT5rVzbbkfhC4AR2x+qWmNUdJfjw==", + "dev": true, + "requires": { + "detect-newline": "2.1.0" + } }, "jest-environment-jsdom": { - "version": "21.2.1", - "resolved": "https://registry.npmjs.org/jest-environment-jsdom/-/jest-environment-jsdom-21.2.1.tgz", - "integrity": "sha512-mecaeNh0eWmzNrUNMWARysc0E9R96UPBamNiOCYL28k7mksb1d0q6DD38WKP7ABffjnXyUWJPVaWRgUOivwXwg==", + "version": "22.1.4", + "resolved": "https://registry.npmjs.org/jest-environment-jsdom/-/jest-environment-jsdom-22.1.4.tgz", + "integrity": "sha512-YGqFJzei/kq5BgQ8su7igLoCl34ytUffr5ZoqwLrDzCmXUKyIiuwBFbWe3xFMG/crlDb1emhBXdzWM1yDEDw5Q==", "dev": true, "requires": { - "jest-mock": "21.2.0", - "jest-util": "21.2.1", - "jsdom": "9.12.0" + "jest-mock": "22.1.0", + "jest-util": "22.1.4", + "jsdom": "11.6.1" } }, "jest-environment-node": { - "version": "21.2.1", - "resolved": "https://registry.npmjs.org/jest-environment-node/-/jest-environment-node-21.2.1.tgz", - "integrity": "sha512-R211867wx9mVBVHzrjGRGTy5cd05K7eqzQl/WyZixR/VkJ4FayS8qkKXZyYnwZi6Rxo6WEV81cDbiUx/GfuLNw==", + "version": "22.1.4", + "resolved": "https://registry.npmjs.org/jest-environment-node/-/jest-environment-node-22.1.4.tgz", + "integrity": "sha512-rQmtzgZVdyCzeXsE8i7Alw2483KSd2PYjssZWZYeNzonN/lBeUjjaOCgLWp6FspBzSTnYF7x6cN4umGZxYAhow==", "dev": true, "requires": { - "jest-mock": "21.2.0", - "jest-util": "21.2.1" + "jest-mock": "22.1.0", + "jest-util": "22.1.4" } }, "jest-get-type": { - "version": "21.2.0", - "resolved": "https://registry.npmjs.org/jest-get-type/-/jest-get-type-21.2.0.tgz", - "integrity": "sha512-y2fFw3C+D0yjNSDp7ab1kcd6NUYfy3waPTlD8yWkAtiocJdBRQqNoRqVfMNxgj+IjT0V5cBIHJO0z9vuSSZ43Q==", + "version": "22.1.0", + "resolved": "https://registry.npmjs.org/jest-get-type/-/jest-get-type-22.1.0.tgz", + "integrity": "sha512-nD97IVOlNP6fjIN5i7j5XRH+hFsHL7VlauBbzRvueaaUe70uohrkz7pL/N8lx/IAwZRTJ//wOdVgh85OgM7g3w==", "dev": true }, "jest-haste-map": { - "version": "21.2.0", - "resolved": "https://registry.npmjs.org/jest-haste-map/-/jest-haste-map-21.2.0.tgz", - "integrity": "sha512-5LhsY/loPH7wwOFRMs+PT4aIAORJ2qwgbpMFlbWbxfN0bk3ZCwxJ530vrbSiTstMkYLao6JwBkLhCJ5XbY7ZHw==", + "version": "22.1.0", + "resolved": "https://registry.npmjs.org/jest-haste-map/-/jest-haste-map-22.1.0.tgz", + "integrity": "sha512-vETdC6GboGlZX6+9SMZkXtYRQSKBbQ47sFF7NGglbMN4eyIZBODply8rlcO01KwBiAeiNCKdjUyfonZzJ93JEg==", "dev": true, "requires": { "fb-watchman": "2.0.0", "graceful-fs": "4.1.11", - "jest-docblock": "21.2.0", + "jest-docblock": "22.1.0", + "jest-worker": "22.1.0", "micromatch": "2.3.11", - "sane": "2.2.0", - "worker-farm": "1.5.2" + "sane": "2.3.0" } }, "jest-jasmine2": { - "version": "21.2.1", - "resolved": "https://registry.npmjs.org/jest-jasmine2/-/jest-jasmine2-21.2.1.tgz", - "integrity": "sha512-lw8FXXIEekD+jYNlStfgNsUHpfMWhWWCgHV7n0B7mA/vendH7vBFs8xybjQsDzJSduptBZJHqQX9SMssya9+3A==", + "version": "22.1.4", + "resolved": "https://registry.npmjs.org/jest-jasmine2/-/jest-jasmine2-22.1.4.tgz", + "integrity": "sha512-+KoRiG4PUwURB7UXei2jzxvbCebhXgTYS+xWl3FsSYUn3flcxdcOgAsFolx31Dkk/B1bVf1HIKt/B6Ubucp9aQ==", "dev": true, "requires": { + "callsites": "2.0.0", "chalk": "2.1.0", - "expect": "21.2.1", + "co": "4.6.0", + "expect": "22.1.0", "graceful-fs": "4.1.11", - "jest-diff": "21.2.1", - "jest-matcher-utils": "21.2.1", - "jest-message-util": "21.2.1", - "jest-snapshot": "21.2.1", - "p-cancelable": "0.3.0" + "is-generator-fn": "1.0.0", + "jest-diff": "22.1.0", + "jest-matcher-utils": "22.1.0", + "jest-message-util": "22.1.0", + "jest-snapshot": "22.1.2", + "source-map-support": "0.5.3" + }, + "dependencies": { + "callsites": { + "version": "2.0.0", + "resolved": "https://registry.npmjs.org/callsites/-/callsites-2.0.0.tgz", + "integrity": "sha1-BuuE8A7qQT2oav/vrL/7Ngk7PFA=", + "dev": true + }, + "source-map": { + "version": "0.6.1", + "resolved": "https://registry.npmjs.org/source-map/-/source-map-0.6.1.tgz", + "integrity": "sha512-UjgapumWlbMhkBgzT7Ykc5YXUT46F0iKu8SGXq0bcwP5dz/h0Plj6enJqjz1Zbq2l5WaqYnrVbwWOWMyF3F47g==", + "dev": true + }, + "source-map-support": { + "version": "0.5.3", + "resolved": "https://registry.npmjs.org/source-map-support/-/source-map-support-0.5.3.tgz", + "integrity": "sha512-eKkTgWYeBOQqFGXRfKabMFdnWepo51vWqEdoeikaEPFiJC7MCU5j2h4+6Q8npkZTeLGbSyecZvRxiSoWl3rh+w==", + "dev": true, + "requires": { + "source-map": "0.6.1" + } + } + } + }, + "jest-leak-detector": { + "version": "22.1.0", + "resolved": "https://registry.npmjs.org/jest-leak-detector/-/jest-leak-detector-22.1.0.tgz", + "integrity": "sha512-8QsCWkncWAqdvrXN4yXQp9vgWF6CT3RkRey+d06SIHX913uXzAJhJdZyo6eE+uHVYMxUbxqW93npbUFhAR0YxA==", + "dev": true, + "requires": { + "pretty-format": "22.1.0" } }, "jest-matcher-utils": { - "version": "21.2.1", - "resolved": "https://registry.npmjs.org/jest-matcher-utils/-/jest-matcher-utils-21.2.1.tgz", - "integrity": "sha512-kn56My+sekD43dwQPrXBl9Zn9tAqwoy25xxe7/iY4u+mG8P3ALj5IK7MLHZ4Mi3xW7uWVCjGY8cm4PqgbsqMCg==", + "version": "22.1.0", + "resolved": "https://registry.npmjs.org/jest-matcher-utils/-/jest-matcher-utils-22.1.0.tgz", + "integrity": "sha512-Zn1OD9wVjILOdvRxgAnqiCN36OX6KJx+P2FHN+3lzQ0omG2N2OAguxE1QXuJJneG2yndlkXjekXFP254c0cSpw==", "dev": true, "requires": { "chalk": "2.1.0", - "jest-get-type": "21.2.0", - "pretty-format": "21.2.1" + "jest-get-type": "22.1.0", + "pretty-format": "22.1.0" } }, "jest-message-util": { - "version": "21.2.1", - "resolved": "https://registry.npmjs.org/jest-message-util/-/jest-message-util-21.2.1.tgz", - "integrity": "sha512-EbC1X2n0t9IdeMECJn2BOg7buOGivCvVNjqKMXTzQOu7uIfLml+keUfCALDh8o4rbtndIeyGU8/BKfoTr/LVDQ==", + "version": "22.1.0", + "resolved": "https://registry.npmjs.org/jest-message-util/-/jest-message-util-22.1.0.tgz", + "integrity": "sha512-kftcoawOeOVUGuGWmMupJt7FGLK1pqOrh02FlJwtImmPGZ2yTWCTx2D+N/g95qD2jCbQ/ntH1goBixhAIIxL+g==", "dev": true, "requires": { + "@babel/code-frame": "7.0.0-beta.38", "chalk": "2.1.0", "micromatch": "2.3.11", - "slash": "1.0.0" + "slash": "1.0.0", + "stack-utils": "1.0.1" } }, "jest-mock": { - "version": "21.2.0", - "resolved": "https://registry.npmjs.org/jest-mock/-/jest-mock-21.2.0.tgz", - "integrity": "sha512-aZDfyVf0LEoABWiY6N0d+O963dUQSyUa4qgzurHR3TBDPen0YxKCJ6l2i7lQGh1tVdsuvdrCZ4qPj+A7PievCw==", + "version": "22.1.0", + "resolved": "https://registry.npmjs.org/jest-mock/-/jest-mock-22.1.0.tgz", + "integrity": "sha512-gL3/C8ds6e1PWiOTsV7sIejPP/ECYQgDbwMzbNCc+ZFPuPH3EpwsVLGmQqPK6okgnDagimbbQnss3kPJ8HCMtA==", "dev": true }, "jest-regex-util": { - "version": "21.2.0", - "resolved": "https://registry.npmjs.org/jest-regex-util/-/jest-regex-util-21.2.0.tgz", - "integrity": "sha512-BKQ1F83EQy0d9Jen/mcVX7D+lUt2tthhK/2gDWRgLDJRNOdRgSp1iVqFxP8EN1ARuypvDflRfPzYT8fQnoBQFQ==", + "version": "22.1.0", + "resolved": "https://registry.npmjs.org/jest-regex-util/-/jest-regex-util-22.1.0.tgz", + "integrity": "sha512-on0LqVS6Xeh69sw3d1RukVnur+lVOl3zkmb0Q54FHj9wHoq6dbtWqb3TSlnVUyx36hqjJhjgs/QLqs07Bzu72Q==", "dev": true }, "jest-resolve": { - "version": "21.2.0", - "resolved": "https://registry.npmjs.org/jest-resolve/-/jest-resolve-21.2.0.tgz", - "integrity": "sha512-vefQ/Lr+VdNvHUZFQXWtOqHX3HEdOc2MtSahBO89qXywEbUxGPB9ZLP9+BHinkxb60UT2Q/tTDOS6rYc6Mwigw==", + "version": "22.1.4", + "resolved": "https://registry.npmjs.org/jest-resolve/-/jest-resolve-22.1.4.tgz", + "integrity": "sha512-/HuCMeiTD6YJ+NF15bU1mal1r7Gov0GJozA7232XiYve7cOOnU2JwXBx3EQmcIuG38uNrRPjtgpiXkBqfnk4Og==", "dev": true, "requires": { "browser-resolve": "1.11.2", - "chalk": "2.1.0", - "is-builtin-module": "1.0.0" + "chalk": "2.1.0" } }, "jest-resolve-dependencies": { - "version": "21.2.0", - "resolved": "https://registry.npmjs.org/jest-resolve-dependencies/-/jest-resolve-dependencies-21.2.0.tgz", - "integrity": "sha512-ok8ybRFU5ScaAcfufIQrCbdNJSRZ85mkxJ1EhUp8Bhav1W1/jv/rl1Q6QoVQHObNxmKnbHVKrfLZbCbOsXQ+bQ==", + "version": "22.1.0", + "resolved": "https://registry.npmjs.org/jest-resolve-dependencies/-/jest-resolve-dependencies-22.1.0.tgz", + "integrity": "sha512-76Ll61bD/Sus8wK8d+lw891EtiBJGJkWG8OuVDTEX0z3z2+jPujvQqSB2eQ+kCHyCsRwJ2PSjhn3UHqae/oEtA==", "dev": true, "requires": { - "jest-regex-util": "21.2.0" + "jest-regex-util": "22.1.0" } }, "jest-runner": { - "version": "21.2.1", - "resolved": "https://registry.npmjs.org/jest-runner/-/jest-runner-21.2.1.tgz", - "integrity": "sha512-Anb72BOQlHqF/zETqZ2K20dbYsnqW/nZO7jV8BYENl+3c44JhMrA8zd1lt52+N7ErnsQMd2HHKiVwN9GYSXmrg==", - "dev": true, - "requires": { - "jest-config": "21.2.1", - "jest-docblock": "21.2.0", - "jest-haste-map": "21.2.0", - "jest-jasmine2": "21.2.1", - "jest-message-util": "21.2.1", - "jest-runtime": "21.2.1", - "jest-util": "21.2.1", - "pify": "3.0.0", - "throat": "4.1.0", - "worker-farm": "1.5.2" + "version": "22.1.4", + "resolved": "https://registry.npmjs.org/jest-runner/-/jest-runner-22.1.4.tgz", + "integrity": "sha512-HAyZ0Q2Fyk7mlbtbSKP75hNs9IP0Md7kzPUN1uNKbvQfZkXA/e7P0ttzAIGQtEbRx656tYwkfWNW+hXvs1i4/g==", + "dev": true, + "requires": { + "exit": "0.1.2", + "jest-config": "22.1.4", + "jest-docblock": "22.1.0", + "jest-haste-map": "22.1.0", + "jest-jasmine2": "22.1.4", + "jest-leak-detector": "22.1.0", + "jest-message-util": "22.1.0", + "jest-runtime": "22.1.4", + "jest-util": "22.1.4", + "jest-worker": "22.1.0", + "throat": "4.1.0" } }, "jest-runtime": { - "version": "21.2.1", - "resolved": "https://registry.npmjs.org/jest-runtime/-/jest-runtime-21.2.1.tgz", - "integrity": "sha512-6omlpA3+NSE+rHwD0PQjNEjZeb2z+oRmuehMfM1tWQVum+E0WV3pFt26Am0DUfQkkPyTABvxITRjCUclYgSOsA==", + "version": "22.1.4", + "resolved": "https://registry.npmjs.org/jest-runtime/-/jest-runtime-22.1.4.tgz", + "integrity": "sha512-r/UjVuQppDRwbUprDlLYdd8MTYY+H8H6BCqRujGjo5/QyIt3b0hppNoOQHF+0bHNtuz/sR9chJ9HJ3A1fiv9Pw==", "dev": true, "requires": { "babel-core": "6.26.0", - "babel-jest": "21.2.0", + "babel-jest": "22.1.0", "babel-plugin-istanbul": "4.1.5", "chalk": "2.1.0", "convert-source-map": "1.5.0", + "exit": "0.1.2", "graceful-fs": "4.1.11", - "jest-config": "21.2.1", - "jest-haste-map": "21.2.0", - "jest-regex-util": "21.2.0", - "jest-resolve": "21.2.0", - "jest-util": "21.2.1", + "jest-config": "22.1.4", + "jest-haste-map": "22.1.0", + "jest-regex-util": "22.1.0", + "jest-resolve": "22.1.4", + "jest-util": "22.1.4", "json-stable-stringify": "1.0.1", "micromatch": "2.3.11", + "realpath-native": "1.0.0", "slash": "1.0.0", "strip-bom": "3.0.0", "write-file-atomic": "2.3.0", - "yargs": "9.0.1" + "yargs": "10.1.2" }, "dependencies": { - "ansi-regex": { - "version": "2.1.1", - "resolved": "https://registry.npmjs.org/ansi-regex/-/ansi-regex-2.1.1.tgz", - "integrity": "sha1-w7M6te42DYbg5ijwRorn7yfWVN8=", - "dev": true - }, - "babel-jest": { - "version": "21.2.0", - "resolved": "https://registry.npmjs.org/babel-jest/-/babel-jest-21.2.0.tgz", - "integrity": "sha512-O0W2qLoWu1QOoOGgxiR2JID4O6WSpxPiQanrkyi9SSlM0PJ60Ptzlck47lhtnr9YZO3zYOsxHwnyeWJ6AffoBQ==", - "dev": true, - "requires": { - "babel-plugin-istanbul": "4.1.5", - "babel-preset-jest": "21.2.0" - } - }, "cliui": { - "version": "3.2.0", - "resolved": "https://registry.npmjs.org/cliui/-/cliui-3.2.0.tgz", - "integrity": "sha1-EgYBU3qRbSmUD5NNo7SNWFo5IT0=", + "version": "4.0.0", + "resolved": "https://registry.npmjs.org/cliui/-/cliui-4.0.0.tgz", + "integrity": "sha512-nY3W5Gu2racvdDk//ELReY+dHjb9PlIcVDFXP72nVIhq2Gy3LuVXYwJoPVudwQnv1shtohpgkdCKT2YaKY0CKw==", "dev": true, "requires": { - "string-width": "1.0.2", - "strip-ansi": "3.0.1", + "string-width": "2.1.1", + "strip-ansi": "4.0.0", "wrap-ansi": "2.1.0" - }, - "dependencies": { - "string-width": { - "version": "1.0.2", - "resolved": "https://registry.npmjs.org/string-width/-/string-width-1.0.2.tgz", - "integrity": "sha1-EYvfW4zcUaKn5w0hHgfisLmxB9M=", - "dev": true, - "requires": { - "code-point-at": "1.1.0", - "is-fullwidth-code-point": "1.0.0", - "strip-ansi": "3.0.1" - } - } - } - }, - "is-fullwidth-code-point": { - "version": "1.0.0", - "resolved": "https://registry.npmjs.org/is-fullwidth-code-point/-/is-fullwidth-code-point-1.0.0.tgz", - "integrity": "sha1-754xOG8DGn8NZDr4L95QxFfvAMs=", - "dev": true, - "requires": { - "number-is-nan": "1.0.1" - } - }, - "load-json-file": { - "version": "2.0.0", - "resolved": "https://registry.npmjs.org/load-json-file/-/load-json-file-2.0.0.tgz", - "integrity": "sha1-eUfkIUmvgNaWy/eXvKq8/h/inKg=", - "dev": true, - "requires": { - "graceful-fs": "4.1.11", - "parse-json": "2.2.0", - "pify": "2.3.0", - "strip-bom": "3.0.0" - } - }, - "path-type": { - "version": "2.0.0", - "resolved": "https://registry.npmjs.org/path-type/-/path-type-2.0.0.tgz", - "integrity": "sha1-8BLMuEFbcJb8LaoQVMPXI4lZTHM=", - "dev": true, - "requires": { - "pify": "2.3.0" - } - }, - "pify": { - "version": "2.3.0", - "resolved": "https://registry.npmjs.org/pify/-/pify-2.3.0.tgz", - "integrity": "sha1-7RQaasBDqEnqWISY59yosVMw6Qw=", - "dev": true - }, - "read-pkg": { - "version": "2.0.0", - "resolved": "https://registry.npmjs.org/read-pkg/-/read-pkg-2.0.0.tgz", - "integrity": "sha1-jvHAYjxqbbDcZxPEv6xGMysjaPg=", - "dev": true, - "requires": { - "load-json-file": "2.0.0", - "normalize-package-data": "2.4.0", - "path-type": "2.0.0" - } - }, - "read-pkg-up": { - "version": "2.0.0", - "resolved": "https://registry.npmjs.org/read-pkg-up/-/read-pkg-up-2.0.0.tgz", - "integrity": "sha1-a3KoBImE4MQeeVEP1en6mbO1Sb4=", - "dev": true, - "requires": { - "find-up": "2.1.0", - "read-pkg": "2.0.0" - } - }, - "strip-ansi": { - "version": "3.0.1", - "resolved": "https://registry.npmjs.org/strip-ansi/-/strip-ansi-3.0.1.tgz", - "integrity": "sha1-ajhfuIU9lS1f8F0Oiq+UJ43GPc8=", - "dev": true, - "requires": { - "ansi-regex": "2.1.1" } }, "strip-bom": { @@ -7849,54 +7787,62 @@ "dev": true }, "yargs": { - "version": "9.0.1", - "resolved": "https://registry.npmjs.org/yargs/-/yargs-9.0.1.tgz", - "integrity": "sha1-UqzCP+7Kw0BCB47njAwAf1CF20w=", + "version": "10.1.2", + "resolved": "https://registry.npmjs.org/yargs/-/yargs-10.1.2.tgz", + "integrity": "sha512-ivSoxqBGYOqQVruxD35+EyCFDYNEFL/Uo6FcOnz+9xZdZzK0Zzw4r4KhbrME1Oo2gOggwJod2MnsdamSG7H9ig==", "dev": true, "requires": { - "camelcase": "4.1.0", - "cliui": "3.2.0", + "cliui": "4.0.0", "decamelize": "1.2.0", + "find-up": "2.1.0", "get-caller-file": "1.0.2", "os-locale": "2.1.0", - "read-pkg-up": "2.0.0", "require-directory": "2.1.1", "require-main-filename": "1.0.1", "set-blocking": "2.0.0", "string-width": "2.1.1", "which-module": "2.0.0", "y18n": "3.2.1", - "yargs-parser": "7.0.0" + "yargs-parser": "8.1.0" + } + }, + "yargs-parser": { + "version": "8.1.0", + "resolved": "https://registry.npmjs.org/yargs-parser/-/yargs-parser-8.1.0.tgz", + "integrity": "sha512-yP+6QqN8BmrgW2ggLtTbdrOyBNSI7zBa4IykmiV5R1wl1JWNxQvWhMfMdmzIYtKU7oP3OOInY/tl2ov3BDjnJQ==", + "dev": true, + "requires": { + "camelcase": "4.1.0" } } } }, "jest-snapshot": { - "version": "21.2.1", - "resolved": "https://registry.npmjs.org/jest-snapshot/-/jest-snapshot-21.2.1.tgz", - "integrity": "sha512-bpaeBnDpdqaRTzN8tWg0DqOTo2DvD3StOemxn67CUd1p1Po+BUpvePAp44jdJ7Pxcjfg+42o4NHw1SxdCA2rvg==", + "version": "22.1.2", + "resolved": "https://registry.npmjs.org/jest-snapshot/-/jest-snapshot-22.1.2.tgz", + "integrity": "sha512-45co/M0gTe6Y6yHaJLydEZKHOFpFHESLah40jW35DWd3pd7q188bsi0oUY4Kls7PDXUamvTWuTKTZXCtzwSvCw==", "dev": true, "requires": { "chalk": "2.1.0", - "jest-diff": "21.2.1", - "jest-matcher-utils": "21.2.1", + "jest-diff": "22.1.0", + "jest-matcher-utils": "22.1.0", "mkdirp": "0.5.1", "natural-compare": "1.4.0", - "pretty-format": "21.2.1" + "pretty-format": "22.1.0" } }, "jest-util": { - "version": "21.2.1", - "resolved": "https://registry.npmjs.org/jest-util/-/jest-util-21.2.1.tgz", - "integrity": "sha512-r20W91rmHY3fnCoO7aOAlyfC51x2yeV3xF+prGsJAUsYhKeV670ZB8NO88Lwm7ASu8SdH0S+U+eFf498kjhA4g==", + "version": "22.1.4", + "resolved": "https://registry.npmjs.org/jest-util/-/jest-util-22.1.4.tgz", + "integrity": "sha512-zM29idoVBPvmpsGubS7YmywVyPe4/m1wE2YhmKp0vVmrQmuby7ObuMqabp82EYlM0Rdp4GNEtaDamW9jg8lgTg==", "dev": true, "requires": { "callsites": "2.0.0", "chalk": "2.1.0", "graceful-fs": "4.1.11", - "jest-message-util": "21.2.1", - "jest-mock": "21.2.0", - "jest-validate": "21.2.1", + "is-ci": "1.1.0", + "jest-message-util": "22.1.0", + "jest-validate": "22.1.2", "mkdirp": "0.5.1" }, "dependencies": { @@ -7909,15 +7855,24 @@ } }, "jest-validate": { - "version": "21.2.1", - "resolved": "https://registry.npmjs.org/jest-validate/-/jest-validate-21.2.1.tgz", - "integrity": "sha512-k4HLI1rZQjlU+EC682RlQ6oZvLrE5SCh3brseQc24vbZTxzT/k/3urar5QMCVgjadmSO7lECeGdc6YxnM3yEGg==", + "version": "22.1.2", + "resolved": "https://registry.npmjs.org/jest-validate/-/jest-validate-22.1.2.tgz", + "integrity": "sha512-IjvMsV7GW5ghg5PTQvU23zJqTBmnq10eY+4n47awUeXYEGH27N+JajFPOg6tsN+OYvEPsohPquKoqQ5XBVs/ow==", "dev": true, "requires": { "chalk": "2.1.0", - "jest-get-type": "21.2.0", + "jest-get-type": "22.1.0", "leven": "2.1.0", - "pretty-format": "21.2.1" + "pretty-format": "22.1.0" + } + }, + "jest-worker": { + "version": "22.1.0", + "resolved": "https://registry.npmjs.org/jest-worker/-/jest-worker-22.1.0.tgz", + "integrity": "sha512-ezLueYAQowk5N6g2J7bNZfq4NWZvMNB5Qd24EmOZLcM5SXTdiFvxykZIoNiMj9C98cCbPaojX8tfR7b1LJwNig==", + "dev": true, + "requires": { + "merge-stream": "1.0.1" } }, "jquery": { @@ -7954,42 +7909,49 @@ "optional": true }, "jsdom": { - "version": "9.12.0", - "resolved": "https://registry.npmjs.org/jsdom/-/jsdom-9.12.0.tgz", - "integrity": "sha1-6MVG//ywbADUgzyoRBD+1/igl9Q=", + "version": "11.6.1", + "resolved": "https://registry.npmjs.org/jsdom/-/jsdom-11.6.1.tgz", + "integrity": "sha512-x1vDo5CQuwsuP0w3kuU04vQdem9Q8apRV2PXp8GeSFQpgtYvSwbcypIbNgRrXu82O4TMroGYSAbu9wyVZHcehw==", "dev": true, "requires": { "abab": "1.0.4", - "acorn": "4.0.13", - "acorn-globals": "3.1.0", + "acorn": "5.3.0", + "acorn-globals": "4.1.0", "array-equal": "1.0.0", + "browser-process-hrtime": "0.1.2", "content-type-parser": "1.0.2", "cssom": "0.3.2", "cssstyle": "0.2.37", + "domexception": "1.0.1", "escodegen": "1.9.0", "html-encoding-sniffer": "1.0.2", + "left-pad": "1.2.0", "nwmatcher": "1.4.3", - "parse5": "1.5.1", + "parse5": "4.0.0", + "pn": "1.1.0", "request": "2.83.0", + "request-promise-native": "1.0.5", "sax": "1.2.4", "symbol-tree": "3.2.2", "tough-cookie": "2.3.3", + "w3c-hr-time": "1.0.1", "webidl-conversions": "4.0.2", "whatwg-encoding": "1.0.3", - "whatwg-url": "4.8.0", - "xml-name-validator": "2.0.1" + "whatwg-url": "6.4.0", + "ws": "4.0.0", + "xml-name-validator": "3.0.0" }, "dependencies": { "acorn": { - "version": "4.0.13", - "resolved": "https://registry.npmjs.org/acorn/-/acorn-4.0.13.tgz", - "integrity": "sha1-EFSVrlNh1pe9GVyCUZLhrX8lN4c=", + "version": "5.3.0", + "resolved": "https://registry.npmjs.org/acorn/-/acorn-5.3.0.tgz", + "integrity": "sha512-Yej+zOJ1Dm/IMZzzj78OntP/r3zHEaKcyNoU2lAaxPtrseM6rF0xwqoz5Q5ysAiED9hTjI2hgtvLXitlCN1/Ug==", "dev": true }, "parse5": { - "version": "1.5.1", - "resolved": "https://registry.npmjs.org/parse5/-/parse5-1.5.1.tgz", - "integrity": "sha1-m387DeMr543CQBsXVzzK8Pb1nZQ=", + "version": "4.0.0", + "resolved": "https://registry.npmjs.org/parse5/-/parse5-4.0.0.tgz", + "integrity": "sha512-VrZ7eOd3T1Fk4XWNXMgiGBK/z0MG48BWG2uQNU4I72fkQuKUTZpl+u9k+CxEG0twMVzSmXEEz12z5Fnw1jIQFA==", "dev": true } } @@ -8118,6 +8080,12 @@ "invert-kv": "1.0.0" } }, + "left-pad": { + "version": "1.2.0", + "resolved": "https://registry.npmjs.org/left-pad/-/left-pad-1.2.0.tgz", + "integrity": "sha1-0wpzxrggHY99jnlWupYWCHpo4O4=", + "dev": true + }, "leven": { "version": "2.1.0", "resolved": "https://registry.npmjs.org/leven/-/leven-2.1.0.tgz", @@ -8305,6 +8273,12 @@ "integrity": "sha1-0uPuv/DZ05rVD1y9G1KnvOa7YRs=", "dev": true }, + "lodash.sortby": { + "version": "4.7.0", + "resolved": "https://registry.npmjs.org/lodash.sortby/-/lodash.sortby-4.7.0.tgz", + "integrity": "sha1-7dFMgk4sycHgsKG0K7UhBRakJDg=", + "dev": true + }, "lodash.tail": { "version": "4.1.1", "resolved": "https://registry.npmjs.org/lodash.tail/-/lodash.tail-4.1.1.tgz", @@ -8452,6 +8426,12 @@ "integrity": "sha1-2TPOuSBdgr3PSIb2dCvcK03qFG0=", "dev": true }, + "material-colors": { + "version": "1.2.5", + "resolved": "https://registry.npmjs.org/material-colors/-/material-colors-1.2.5.tgz", + "integrity": "sha1-UpJZPmdUyxvMK5gDDk4Najr8nqE=", + "dev": true + }, "math-expression-evaluator": { "version": "1.2.17", "resolved": "https://registry.npmjs.org/math-expression-evaluator/-/math-expression-evaluator-1.2.17.tgz", @@ -8617,6 +8597,15 @@ "integrity": "sha1-sAqqVW3YtEVoFQ7J0blT8/kMu2E=", "dev": true }, + "merge-stream": { + "version": "1.0.1", + "resolved": "https://registry.npmjs.org/merge-stream/-/merge-stream-1.0.1.tgz", + "integrity": "sha1-QEEgLVCKNCugAXQAjfDCUbjBNeE=", + "dev": true, + "requires": { + "readable-stream": "2.3.3" + } + }, "methods": { "version": "1.1.2", "resolved": "https://registry.npmjs.org/methods/-/methods-1.1.2.tgz", @@ -8881,6 +8870,15 @@ "lower-case": "1.1.4" } }, + "node-dir": { + "version": "0.1.17", + "resolved": "https://registry.npmjs.org/node-dir/-/node-dir-0.1.17.tgz", + "integrity": "sha1-X1Zl2TNRM1yqvvjxxVRRbPXx5OU=", + "dev": true, + "requires": { + "minimatch": "3.0.4" + } + }, "node-fetch": { "version": "1.7.3", "resolved": "https://registry.npmjs.org/node-fetch/-/node-fetch-1.7.3.tgz", @@ -8963,9 +8961,9 @@ } }, "node-notifier": { - "version": "5.1.2", - "resolved": "https://registry.npmjs.org/node-notifier/-/node-notifier-5.1.2.tgz", - "integrity": "sha1-L6nhJgX6EACdRFSdb82KY93g5P8=", + "version": "5.2.1", + "resolved": "https://registry.npmjs.org/node-notifier/-/node-notifier-5.2.1.tgz", + "integrity": "sha512-MIBs+AAd6dJ2SklbbE8RUDRlIVhU8MaNLh1A9SUZDUHPiZkWLFde6UNwG41yQHZEToHgJMXqyVZ9UcS/ReOVTg==", "dev": true, "requires": { "growly": "1.3.0", @@ -9318,6 +9316,16 @@ "has": "1.0.1" } }, + "object.getownpropertydescriptors": { + "version": "2.0.3", + "resolved": "https://registry.npmjs.org/object.getownpropertydescriptors/-/object.getownpropertydescriptors-2.0.3.tgz", + "integrity": "sha1-h1jIRvW0B62rDyNuCYbxSwUcqhY=", + "dev": true, + "requires": { + "define-properties": "1.1.2", + "es-abstract": "1.9.0" + } + }, "object.omit": { "version": "2.0.1", "resolved": "https://registry.npmjs.org/object.omit/-/object.omit-2.0.1.tgz", @@ -9899,6 +9907,12 @@ "integrity": "sha512-ARhBOdzS3e41FbkW/XWrTEtukqqLoK5+Z/4UeDaLuSW+39JPeFgs4gCGqsrJHVZX0fUrx//4OF0K1CUGwlIFow==", "dev": true }, + "pn": { + "version": "1.1.0", + "resolved": "https://registry.npmjs.org/pn/-/pn-1.1.0.tgz", + "integrity": "sha512-2qHaIQr2VLRFoxe2nASzsV6ef4yOOH+Fi9FBOVH6cqeSgUnoyySPZkxzLuzd+RYOQTRpROA0ztTMqxROKSb/nA==", + "dev": true + }, "portfinder": { "version": "1.0.13", "resolved": "https://registry.npmjs.org/portfinder/-/portfinder-1.0.13.tgz", @@ -12499,9 +12513,9 @@ } }, "pretty-format": { - "version": "21.2.1", - "resolved": "https://registry.npmjs.org/pretty-format/-/pretty-format-21.2.1.tgz", - "integrity": "sha512-ZdWPGYAnYfcVP8yKA3zFjCn8s4/17TeYH28MXuC8vTp0o21eXjbFGcOAXZEaDaOFJjc3h2qa7HQNHNshhvoh2A==", + "version": "22.1.0", + "resolved": "https://registry.npmjs.org/pretty-format/-/pretty-format-22.1.0.tgz", + "integrity": "sha512-0HHR5hCmjDGU4sez3w5zRDAAwn7V0vT4SgPiYPZ1XDm5sT3Icb+Bh+fsOP3+Y3UwPjMr7TbRj+L7eQyMkPAxAw==", "dev": true, "requires": { "ansi-regex": "3.0.0", @@ -12617,6 +12631,7 @@ "version": "4.3.4", "resolved": "https://registry.npmjs.org/query-string/-/query-string-4.3.4.tgz", "integrity": "sha1-u7aTucqRXCMlFbIosaArYJBD2+s=", + "dev": true, "requires": { "object-assign": "4.1.1", "strict-uri-encode": "1.1.0" @@ -12772,9 +12787,10 @@ } }, "react": { - "version": "16.0.0", - "resolved": "https://registry.npmjs.org/react/-/react-16.0.0.tgz", - "integrity": "sha1-zn348ZQbA28Cssyp29DLHw6FXi0=", + "version": "16.2.0", + "resolved": "https://registry.npmjs.org/react/-/react-16.2.0.tgz", + "integrity": "sha512-ZmIomM7EE1DvPEnSFAHZn9Vs9zJl5A9H7el0EGTE6ZbW9FKe/14IYAlPbC8iH25YarEQxZL+E8VW7Mi7kfQrDQ==", + "dev": true, "requires": { "fbjs": "0.8.16", "loose-envify": "1.3.1", @@ -12793,10 +12809,86 @@ "prop-types": "15.6.0" } }, + "react-color": { + "version": "2.13.8", + "resolved": "https://registry.npmjs.org/react-color/-/react-color-2.13.8.tgz", + "integrity": "sha1-vMWPeaciub/DfEAuaM0Y8mlwruQ=", + "dev": true, + "requires": { + "lodash": "4.17.4", + "material-colors": "1.2.5", + "prop-types": "15.6.0", + "reactcss": "1.2.3", + "tinycolor2": "1.4.1" + } + }, + "react-docgen": { + "version": "2.20.0", + "resolved": "https://registry.npmjs.org/react-docgen/-/react-docgen-2.20.0.tgz", + "integrity": "sha512-+fW1dthCr/cqrAreHTMk2Luzdb3I7xJishC/g4k+vIWiPj4/jM6Ij67WvUjXqio0/TRh7AQtRDYRwqNyinN0LA==", + "dev": true, + "requires": { + "async": "2.6.0", + "babel-runtime": "6.26.0", + "babylon": "5.8.38", + "commander": "2.11.0", + "doctrine": "2.0.0", + "node-dir": "0.1.17", + "recast": "0.12.9" + }, + "dependencies": { + "ast-types": { + "version": "0.10.1", + "resolved": "https://registry.npmjs.org/ast-types/-/ast-types-0.10.1.tgz", + "integrity": "sha512-UY7+9DPzlJ9VM8eY0b2TUZcZvF+1pO0hzMtAyjBYKhOmnvRlqYNYnWdtsMj0V16CGaMlpL0G1jnLbLo4AyotuQ==", + "dev": true + }, + "async": { + "version": "2.6.0", + "resolved": "https://registry.npmjs.org/async/-/async-2.6.0.tgz", + "integrity": "sha512-xAfGg1/NTLBBKlHFmnd7PlmUW9KhVQIUuSrYem9xzFUZy13ScvtyGGejaae9iAVRiRq9+Cx7DPFaAAhCpyxyPw==", + "dev": true, + "requires": { + "lodash": "4.17.4" + } + }, + "babylon": { + "version": "5.8.38", + "resolved": "https://registry.npmjs.org/babylon/-/babylon-5.8.38.tgz", + "integrity": "sha1-7JsSCxG/bM1Bc6GL8hfmC3mFn/0=", + "dev": true + }, + "esprima": { + "version": "4.0.0", + "resolved": "https://registry.npmjs.org/esprima/-/esprima-4.0.0.tgz", + "integrity": "sha512-oftTcaMu/EGrEIu904mWteKIv8vMuOgGYo7EhVJJN00R/EED9DCua/xxHRdYnKtcECzVg7xOWhflvJMnqcFZjw==", + "dev": true + }, + "recast": { + "version": "0.12.9", + "resolved": "https://registry.npmjs.org/recast/-/recast-0.12.9.tgz", + "integrity": "sha512-y7ANxCWmMW8xLOaiopiRDlyjQ9ajKRENBH+2wjntIbk3A6ZR1+BLQttkmSHMY7Arl+AAZFwJ10grg2T6f1WI8A==", + "dev": true, + "requires": { + "ast-types": "0.10.1", + "core-js": "2.5.1", + "esprima": "4.0.0", + "private": "0.1.8", + "source-map": "0.6.1" + } + }, + "source-map": { + "version": "0.6.1", + "resolved": "https://registry.npmjs.org/source-map/-/source-map-0.6.1.tgz", + "integrity": "sha512-UjgapumWlbMhkBgzT7Ykc5YXUT46F0iKu8SGXq0bcwP5dz/h0Plj6enJqjz1Zbq2l5WaqYnrVbwWOWMyF3F47g==", + "dev": true + } + } + }, "react-dom": { - "version": "16.0.0", - "resolved": "https://registry.npmjs.org/react-dom/-/react-dom-16.0.0.tgz", - "integrity": "sha1-nMMHnD3NcNTG4BuEqrKn40wwP1g=", + "version": "16.2.0", + "resolved": "https://registry.npmjs.org/react-dom/-/react-dom-16.2.0.tgz", + "integrity": "sha512-zpGAdwHVn9K0091d+hr+R0qrjoJ84cIBFL2uU60KvWBPfZ7LPSrfqviTxGHWN0sjPZb2hxWzMexwrvJdKePvjg==", "dev": true, "requires": { "fbjs": "0.8.16", @@ -12831,6 +12923,7 @@ "version": "3.2.0", "resolved": "https://registry.npmjs.org/react-router/-/react-router-3.2.0.tgz", "integrity": "sha512-sXlLOg0TRCqnjCVskqBHGjzNjcJKUqXEKnDSuxMYJSPJNq9hROE9VsiIW2kfIq7Ev+20Iz0nxayekXyv0XNmsg==", + "dev": true, "requires": { "create-react-class": "15.6.2", "history": "3.3.0", @@ -12848,13 +12941,23 @@ "dev": true }, "react-test-renderer": { - "version": "16.0.0", - "resolved": "https://registry.npmjs.org/react-test-renderer/-/react-test-renderer-16.0.0.tgz", - "integrity": "sha1-n+e4MI8vcfKfw1bUECCG8THJyxU=", + "version": "16.2.0", + "resolved": "https://registry.npmjs.org/react-test-renderer/-/react-test-renderer-16.2.0.tgz", + "integrity": "sha512-Kd4gJFtpNziR9ElOE/C23LeflKLZPRpNQYWP3nQBY43SJ5a+xyEGSeMrm2zxNKXcnCbBS/q1UpD9gqd5Dv+rew==", "dev": true, "requires": { "fbjs": "0.8.16", - "object-assign": "4.1.1" + "object-assign": "4.1.1", + "prop-types": "15.6.0" + } + }, + "reactcss": { + "version": "1.2.3", + "resolved": "https://registry.npmjs.org/reactcss/-/reactcss-1.2.3.tgz", + "integrity": "sha512-KiwVUcFu1RErkI97ywr8nvx8dNOpT03rbnma0SSalTYjkrPYaEajR4a/MRt6DZ46K6arDRbWMNHF+xH7G7n/8A==", + "dev": true, + "requires": { + "lodash": "4.17.4" } }, "read-all-stream": { @@ -13009,6 +13112,15 @@ } } }, + "realpath-native": { + "version": "1.0.0", + "resolved": "https://registry.npmjs.org/realpath-native/-/realpath-native-1.0.0.tgz", + "integrity": "sha512-XJtlRJ9jf0E1H1SLeJyQ9PGzQD7S65h1pRXEcAeK48doKOnKxcgPeNohJvD5u/2sI9J1oke6E8bZHS/fmW1UiQ==", + "dev": true, + "requires": { + "util.promisify": "1.0.0" + } + }, "recast": { "version": "0.11.23", "resolved": "https://registry.npmjs.org/recast/-/recast-0.11.23.tgz", @@ -13349,6 +13461,26 @@ "uuid": "3.1.0" } }, + "request-promise-core": { + "version": "1.1.1", + "resolved": "https://registry.npmjs.org/request-promise-core/-/request-promise-core-1.1.1.tgz", + "integrity": "sha1-Pu4AssWqgyOc+wTFcA2jb4HNCLY=", + "dev": true, + "requires": { + "lodash": "4.17.4" + } + }, + "request-promise-native": { + "version": "1.0.5", + "resolved": "https://registry.npmjs.org/request-promise-native/-/request-promise-native-1.0.5.tgz", + "integrity": "sha1-UoF3D2jgyXGeUWP9P6tIIhX0/aU=", + "dev": true, + "requires": { + "request-promise-core": "1.1.1", + "stealthy-require": "1.1.1", + "tough-cookie": "2.3.3" + } + }, "require-directory": { "version": "2.1.1", "resolved": "https://registry.npmjs.org/require-directory/-/require-directory-2.1.1.tgz", @@ -13392,6 +13524,23 @@ "path-parse": "1.0.5" } }, + "resolve-cwd": { + "version": "2.0.0", + "resolved": "https://registry.npmjs.org/resolve-cwd/-/resolve-cwd-2.0.0.tgz", + "integrity": "sha1-AKn3OHVW4nA46uIyyqNypqWbZlo=", + "dev": true, + "requires": { + "resolve-from": "3.0.0" + }, + "dependencies": { + "resolve-from": { + "version": "3.0.0", + "resolved": "https://registry.npmjs.org/resolve-from/-/resolve-from-3.0.0.tgz", + "integrity": "sha1-six699nWiBvItuZTM17rywoYh0g=", + "dev": true + } + } + }, "resolve-from": { "version": "1.0.1", "resolved": "https://registry.npmjs.org/resolve-from/-/resolve-from-1.0.1.tgz", @@ -13503,9 +13652,9 @@ "dev": true }, "sane": { - "version": "2.2.0", - "resolved": "https://registry.npmjs.org/sane/-/sane-2.2.0.tgz", - "integrity": "sha512-OSJxhHO0CgPUw3lUm3GhfREAfza45smvEI9ozuFrxKG10GHVo0ryW9FK5VYlLvxj0SV7HVKHW0voYJIRu27GWg==", + "version": "2.3.0", + "resolved": "https://registry.npmjs.org/sane/-/sane-2.3.0.tgz", + "integrity": "sha512-6GB9zPCsqJqQPAGcvEkUPijM1ZUFI+A/DrscL++dXO3Ltt5q5mPDayGxZtr3cBRkrbb4akbwszVVkTIFefEkcg==", "dev": true, "requires": { "anymatch": "1.3.2", @@ -14145,6 +14294,12 @@ "tweetnacl": "0.14.5" } }, + "stack-utils": { + "version": "1.0.1", + "resolved": "https://registry.npmjs.org/stack-utils/-/stack-utils-1.0.1.tgz", + "integrity": "sha1-1PM6tU6OOHeLDKXP07OvsS22hiA=", + "dev": true + }, "statuses": { "version": "1.4.0", "resolved": "https://registry.npmjs.org/statuses/-/statuses-1.4.0.tgz", @@ -14159,6 +14314,12 @@ "readable-stream": "2.3.3" } }, + "stealthy-require": { + "version": "1.1.1", + "resolved": "https://registry.npmjs.org/stealthy-require/-/stealthy-require-1.1.1.tgz", + "integrity": "sha1-NbCYdbT/SfJqd35QmzCQoyJr8ks=", + "dev": true + }, "stream-browserify": { "version": "2.0.1", "resolved": "https://registry.npmjs.org/stream-browserify/-/stream-browserify-2.0.1.tgz", @@ -14185,7 +14346,8 @@ "strict-uri-encode": { "version": "1.1.0", "resolved": "https://registry.npmjs.org/strict-uri-encode/-/strict-uri-encode-1.1.0.tgz", - "integrity": "sha1-J5siXfHVgrH1TmWt3UNS4Y+qBxM=" + "integrity": "sha1-J5siXfHVgrH1TmWt3UNS4Y+qBxM=", + "dev": true }, "string-length": { "version": "2.0.0", @@ -14720,6 +14882,12 @@ "setimmediate": "1.0.5" } }, + "tinycolor2": { + "version": "1.4.1", + "resolved": "https://registry.npmjs.org/tinycolor2/-/tinycolor2-1.4.1.tgz", + "integrity": "sha1-9PrTM0R7wLB9TcjpIJ2POaisd+g=", + "dev": true + }, "titleize": { "version": "1.0.0", "resolved": "https://registry.npmjs.org/titleize/-/titleize-1.0.0.tgz", @@ -14769,10 +14937,21 @@ } }, "tr46": { - "version": "0.0.3", - "resolved": "https://registry.npmjs.org/tr46/-/tr46-0.0.3.tgz", - "integrity": "sha1-gYT9NH2snNwYWZLzpmIuFLnZq2o=", - "dev": true + "version": "1.0.1", + "resolved": "https://registry.npmjs.org/tr46/-/tr46-1.0.1.tgz", + "integrity": "sha1-qLE/1r/SSJUZZ0zN5VujaTtwbQk=", + "dev": true, + "requires": { + "punycode": "2.1.0" + }, + "dependencies": { + "punycode": { + "version": "2.1.0", + "resolved": "https://registry.npmjs.org/punycode/-/punycode-2.1.0.tgz", + "integrity": "sha1-X4Y+3Im5bbCQdLrXlHvwkFbKTn0=", + "dev": true + } + } }, "trim-newlines": { "version": "1.0.0", @@ -14901,6 +15080,12 @@ } } }, + "ultron": { + "version": "1.1.1", + "resolved": "https://registry.npmjs.org/ultron/-/ultron-1.1.1.tgz", + "integrity": "sha512-UIEXBNeYmKptWH6z8ZnqTeS8fV74zG0/eRU9VGkpzz+LIJNs8W/zM/L+7ctCkRrgbNnnR0xxw4bKOr0cW0N0Og==", + "dev": true + }, "unc-path-regex": { "version": "0.1.2", "resolved": "https://registry.npmjs.org/unc-path-regex/-/unc-path-regex-0.1.2.tgz", @@ -15063,6 +15248,16 @@ "resolved": "https://registry.npmjs.org/util-deprecate/-/util-deprecate-1.0.2.tgz", "integrity": "sha1-RQ1Nyfpw3nMnYvvS1KKJgUGaDM8=" }, + "util.promisify": { + "version": "1.0.0", + "resolved": "https://registry.npmjs.org/util.promisify/-/util.promisify-1.0.0.tgz", + "integrity": "sha512-i+6qA2MPhvoKLuxnJNpXAGhg7HphQOSUq2LKMZD0m15EiskXUkMvKdF4Uui0WYeCUGea+o2cw/ZuwehtfsrNkA==", + "dev": true, + "requires": { + "define-properties": "1.1.2", + "object.getownpropertydescriptors": "2.0.3" + } + }, "utila": { "version": "0.4.0", "resolved": "https://registry.npmjs.org/utila/-/utila-0.4.0.tgz", @@ -15202,6 +15397,15 @@ "resolved": "https://registry.npmjs.org/w3c-blob/-/w3c-blob-0.0.1.tgz", "integrity": "sha1-sM01KhpQ9RVWNCD/1YYflQ8dhbg=" }, + "w3c-hr-time": { + "version": "1.0.1", + "resolved": "https://registry.npmjs.org/w3c-hr-time/-/w3c-hr-time-1.0.1.tgz", + "integrity": "sha1-gqwr/2PZUOqeMYmlimViX+3xkEU=", + "dev": true, + "requires": { + "browser-process-hrtime": "0.1.2" + } + }, "walk": { "version": "2.3.9", "resolved": "https://registry.npmjs.org/walk/-/walk-2.3.9.tgz", @@ -15224,6 +15428,7 @@ "version": "3.0.0", "resolved": "https://registry.npmjs.org/warning/-/warning-3.0.0.tgz", "integrity": "sha1-MuU3fLVy3kqwR1O9+IIcAe1gW3w=", + "dev": true, "requires": { "loose-envify": "1.3.1" } @@ -15681,21 +15886,14 @@ "integrity": "sha1-nITsLc9oGH/wC8ZOEnS0QhduHIQ=" }, "whatwg-url": { - "version": "4.8.0", - "resolved": "https://registry.npmjs.org/whatwg-url/-/whatwg-url-4.8.0.tgz", - "integrity": "sha1-0pgaqRSMHgCkHFphMRZqtGg7vMA=", + "version": "6.4.0", + "resolved": "https://registry.npmjs.org/whatwg-url/-/whatwg-url-6.4.0.tgz", + "integrity": "sha512-Z0CVh/YE217Foyb488eo+iBv+r7eAQ0wSTyApi9n06jhcA3z6Nidg/EGvl0UFkg7kMdKxfBzzr+o9JF+cevgMg==", "dev": true, "requires": { - "tr46": "0.0.3", - "webidl-conversions": "3.0.1" - }, - "dependencies": { - "webidl-conversions": { - "version": "3.0.1", - "resolved": "https://registry.npmjs.org/webidl-conversions/-/webidl-conversions-3.0.1.tgz", - "integrity": "sha1-JFNCdeKnvGvnvIZhHMFq4KVlSHE=", - "dev": true - } + "lodash.sortby": "4.7.0", + "tr46": "1.0.1", + "webidl-conversions": "4.0.2" } }, "whet.extend": { @@ -15824,16 +16022,6 @@ "resolved": "https://registry.npmjs.org/wordwrap/-/wordwrap-0.0.3.tgz", "integrity": "sha1-o9XabNXAvAAI03I0u68b7WMFkQc=" }, - "worker-farm": { - "version": "1.5.2", - "resolved": "https://registry.npmjs.org/worker-farm/-/worker-farm-1.5.2.tgz", - "integrity": "sha512-XxiQ9kZN5n6mmnW+mFJ+wXjNNI/Nx4DIdaAKLX1Bn6LYBWlN/zaBhu34DQYPZ1AJobQuu67S2OfDdNSVULvXkQ==", - "dev": true, - "requires": { - "errno": "0.1.4", - "xtend": "4.0.1" - } - }, "wrap-ansi": { "version": "2.1.0", "resolved": "https://registry.npmjs.org/wrap-ansi/-/wrap-ansi-2.1.0.tgz", @@ -15906,6 +16094,17 @@ "signal-exit": "3.0.2" } }, + "ws": { + "version": "4.0.0", + "resolved": "https://registry.npmjs.org/ws/-/ws-4.0.0.tgz", + "integrity": "sha512-QYslsH44bH8O7/W2815u5DpnCpXWpEK44FmaHffNwgJI4JMaSZONgPBTOfrxJ29mXKbXak+LsJ2uAkDTYq2ptQ==", + "dev": true, + "requires": { + "async-limiter": "1.0.0", + "safe-buffer": "5.1.1", + "ultron": "1.1.1" + } + }, "xdg-basedir": { "version": "3.0.0", "resolved": "https://registry.npmjs.org/xdg-basedir/-/xdg-basedir-3.0.0.tgz", @@ -15918,9 +16117,9 @@ "dev": true }, "xml-name-validator": { - "version": "2.0.1", - "resolved": "https://registry.npmjs.org/xml-name-validator/-/xml-name-validator-2.0.1.tgz", - "integrity": "sha1-TYuPHszTQZqjYgYb7O9RXh5VljU=", + "version": "3.0.0", + "resolved": "https://registry.npmjs.org/xml-name-validator/-/xml-name-validator-3.0.0.tgz", + "integrity": "sha512-A5CUptxDsvxKJEU3yO6DuWBSJz/qizqzJKOMIfUJHETbBw/sFaDxgd6fxm1ewUaM0jZ444Fc5vC5ROYurg/4Pw==", "dev": true }, "xtend": { diff --git a/src-docs/src/routes.js b/src-docs/src/routes.js index c37a4170d96..2272f825ffa 100644 --- a/src-docs/src/routes.js +++ b/src-docs/src/routes.js @@ -16,12 +16,15 @@ import { // Guidelines -import WritingGuidelines - from './views/guidelines/writing'; +import ButtonGuidelines + from './views/guidelines/button'; import TextScales from './views/text_scaling/text_scaling_sandbox'; +import WritingGuidelines + from './views/guidelines/writing'; + // Services import { IsColorDarkExample } @@ -211,6 +214,9 @@ const createExample = ({ title, intro, sections }) => { const navigation = [{ name: 'Guidelines', + items: [{ + name: 'Buttons', + component: ButtonGuidelines, items: [{ name: 'Writing', component: WritingGuidelines, diff --git a/src-docs/src/views/guidelines/button.js b/src-docs/src/views/guidelines/button.js new file mode 100644 index 00000000000..3e620877945 --- /dev/null +++ b/src-docs/src/views/guidelines/button.js @@ -0,0 +1,676 @@ +import React from 'react'; +import classNames from 'classnames'; + +import { + GuidePage, + GuideRule, + GuideRuleExample, + GuideRuleTitle, +} from '../../components'; + +import { + EuiText, + EuiTitle, + EuiButton, + EuiButtonIcon, + EuiSpacer, + EuiFlexGroup, + EuiFlexItem, + EuiPanel, + EuiFieldSearch, + EuiFieldText, + EuiButtonEmpty, + EuiFieldPassword, + EuiCheckbox, + EuiFormRow, + EuiConfirmModal, + EuiModal, + EuiModalBody, + EuiModalFooter, + EuiModalHeader, + EuiModalHeaderTitle, + EuiIcon, + EuiImage, + EuiFieldNumber, + EuiLink, + EuiTable, + EuiTableHeader, + EuiTableHeaderCell, + EuiTableBody, + EuiTableRow, + EuiTableRowCell +} from '../../../../src/components'; + +import makeId from '../../../../src/components/form/form_row/make_id'; + +const GuideRuleWriting = ({ + children, + className, + ...rest, +}) => { + const classes = classNames(className); + + return ( + +

{children}

+ + ); +}; + +export default () => ( + + +

Button

+

+ Choosing a button style and type depends on the prominence of the action it performs and the context in which the button appears. +

+ + Go to code example + + + + + +

Button types

+ + + + + +
+ + Filled + +
+ + + + +

Filled buttons are for the primary action

+

This button has the heavist visual weight to draw users' attention. +

+ + + + + + + + +
+ + Standard + +
+ + + + +

Standard buttons are for secondary actions

+

Such actions include Add and Save. This button type works well for multiple actions of equal weight. +

+ + + + + + + + + +
+ + + Empty + +
+ + + + + +

Empty buttons are for UI-specific actions

+

Close, cancel, filter, refresh, and other actions that reconfigure the UI are appropriate for empty buttons. +

+ + + + + + + + + +
+ + window.alert('Button clicked')} + iconType="trash" + aria-label="Next" + /> +
+ + + + + +

Icon buttons are for saving space

+

The icon must be immediately understood, for example, a trash can for delete. Use these buttons sparingly, and never for the primary action. +

+ + + + + + + + + + + + +

Placement and order

+

Button placement and order should follow the users path through the content.

+ + + + + + {}}> + + + Save dashboard + + + + + + + + + + + {}} + id={makeId()} + label="Save as new dashboard" + /> + + + + Cancel + + + + Save + + + + + + + + + + + {}} + style={{ width: '350px' }} + > +

You cannot recover a deleted report.

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +

Primary button: One per container

+

The primary action should not have to compete for attention. Use only one primary button per page, form, or modal.

+ + + + + + + + + + + + + + + + + + + +

Icons: Must be recognized at a glance

+

Icon buttons can save space. Limit icon buttons to groups of two—otherwise they lose meaning. See the  + +   icon respository + + + for icons with common meanings. +

+ + + + + + +      + + + + + +      + + + + + + + + + + + +  Create +     + + + +  Delete +     + + + +  Save and close +     + + + + + +    + + Create   + +    + + + Delete   + +    + + + Save and close   + +    + + + + + + + +

Color: Use sparingly

+

The button color defaults to blue. Limit color changes to well-established use cases—green for final save actions and red for delete.

+ + + + + + + + Cancel +    + + Save and close + + + + + + Cancel + + + Save +    + + Delete + + + + + + +

Multiple buttons

+

When using multiple buttons, two is optimal, three is rare. For more buttons, use a dropdown or context menu.

+ + + + + + + + + + + + + + + + + + + + + +

Label: Say what it does

+

Labels should provide a clear indication of what happens when the user clicks the button. Prefer action words and use in a consistent manner.

+ + + + + + + + Label + + + + Description + + + + + + + + Add + + + + + Adds an object to a list or database. Always followed by a noun, for example, Add visualization. Do not use "Add new." Remove is the correct opposite. + + + + + + + Cancel + + + + Stops an action without saving pending changes. Never make Cancel red—it's not a destructive action. + + + + + + + Create +    + + Create + + + + + Creates a new object from scratch. Always followed by a noun, for example, “Create pipeline.” Do not use "Create new." Exception: “Add user” is more intuitive that “Create user.” Delete is the correct opposite + + + + + + + Delete +    + + Delete +    + + + + + Removes data so users can longer retrieve it. Create is the correct opposite. Do not confuse with Remove. + + + + + +   Discard + + + + Avoid. Use Remove or Delete. + + + + + + + Learn more + + + + + Takes the user to additional content + + + + + + +   New + + + + Avoid. Prefer the action words Add or Create. + + + + + +   OK + + + + Avoid. Use words that explain the action. + + + + + + + Remove + + + + Remove an item not related to a database, such as a row from a table. Do not confuse with Delete, which permanenty removes data from a database. + + + + + + + Save +    + + + Carry out pending changes, for example, Save edits. Do not confuse with Add. Can use green for the final save action. + + + + + + +   Yes/No + + + + Avoid. Use action words instead. + + + + + + + + + + + + + + + + + + + + + +); diff --git a/src-docs/src/views/guidelines/writing.js b/src-docs/src/views/guidelines/writing.js index 5f016e2ad8c..964c11920d3 100644 --- a/src-docs/src/views/guidelines/writing.js +++ b/src-docs/src/views/guidelines/writing.js @@ -562,6 +562,10 @@ export default () => ( + + + + Verifying your text @@ -596,5 +600,173 @@ export default () => ( + + + + + Delete this report? + + + Cancel + Delete + + + In a modal, the user path is left to right, top to bottom. + The primary action goes on the bottom right. This pattern is reversed for right-to-left languages. + + + + + + + + + + + In a form, content is concentrated on the top and left. + The primary action goes on the bottom left. + + + + + + + New user + When to center a button + + + If a data table has an action for creating an object, the button is in the upper right. + + + + + + + Create index + + + + Delete + + + + Save and close + + + + + Cancel + + + Create index + + Use more than one primary button per page. + + + + + + Cancel   + Create index + Cancel   + Delete + Cancel   + Save and close + + + Add alert   Remove alert + Add userDelete user + In an unconstrained container, such as a form, the primary action is on the bottom left. + + + New user + In a page with a list of things, the primary action is in the upper right + + + + + + + Create index + + + Delete + + Save and close + + + + Bad example + + + + + + + + Create watch   + Delete watch + Use Create for creating an object from scratch. + Often used in a create-then-add scenario. Delete is the correct opposite. + + + + Add alert   Remove alert + Add userDelete user + Use Add for creating a new relationship. Remove is the correct opposite. Prefer “Add user” over “Create user” because it is more intuitive. + + + New user + Avoid. Prefer the action words Create and Add. Exception: New Password. + + + + + + + + + + ); From 4e8cab4e1e35127684400f871139d83b2c333f06 Mon Sep 17 00:00:00 2001 From: gchaps Date: Tue, 6 Feb 2018 17:39:52 -0800 Subject: [PATCH 02/12] fixed problem with images --- src-docs/src/views/guidelines/button.js | 206 ++++++++++++----------- src-docs/src/views/guidelines/writing.js | 159 ----------------- 2 files changed, 106 insertions(+), 259 deletions(-) diff --git a/src-docs/src/views/guidelines/button.js b/src-docs/src/views/guidelines/button.js index 3e620877945..d6bb4617214 100644 --- a/src-docs/src/views/guidelines/button.js +++ b/src-docs/src/views/guidelines/button.js @@ -5,33 +5,18 @@ import { GuidePage, GuideRule, GuideRuleExample, - GuideRuleTitle, } from '../../components'; import { EuiText, - EuiTitle, EuiButton, EuiButtonIcon, EuiSpacer, EuiFlexGroup, EuiFlexItem, - EuiPanel, - EuiFieldSearch, - EuiFieldText, EuiButtonEmpty, - EuiFieldPassword, - EuiCheckbox, - EuiFormRow, - EuiConfirmModal, - EuiModal, - EuiModalBody, - EuiModalFooter, - EuiModalHeader, - EuiModalHeaderTitle, EuiIcon, EuiImage, - EuiFieldNumber, EuiLink, EuiTable, EuiTableHeader, @@ -82,7 +67,7 @@ export default () => ( - +
Filled @@ -102,7 +87,7 @@ export default () => ( - +
Standard @@ -123,7 +108,7 @@ export default () => ( - +
@@ -146,7 +131,7 @@ export default () => ( - +
(

Icon buttons are for saving space

-

The icon must be immediately understood, for example, a trash can for delete. Use these buttons sparingly, and never for the primary action. +

The icon must be immediately understood, for example, a trash can for delete. Use these buttons sparingly, + and never for the primary action.

@@ -183,69 +169,53 @@ export default () => ( - - {}}> - - - Save dashboard - - - - - - - - - - - {}} - id={makeId()} - label="Save as new dashboard" - /> - - - - Cancel - - - - Save - - - - - - + + - - {}} - style={{ width: '350px' }} - > -

You cannot recover a deleted report.

- + + - - + + ( - + ( - + ( url="https://imgur.com/5diUfSX.jpg" /> - + (

Icons: Must be recognized at a glance

-

Icon buttons can save space. Limit icon buttons to groups of two—otherwise they lose meaning. See the  +

Icon buttons can save space. Limit icon buttons to groups of two—otherwise they lose meaning. See the   icon respository - +   for icons with common meanings.

@@ -377,7 +360,8 @@ export default () => ( @@ -435,7 +419,9 @@ export default () => (

Color: Use sparingly

-

The button color defaults to blue. Limit color changes to well-established use cases—green for final save actions and red for delete.

+

The button color defaults to blue. Limit color changes to well-established use cases—green for final + save actions and red for delete. +

@@ -482,28 +468,45 @@ export default () => ( - - - - - - - - - - + + + + + + + + Close index +   + + Refresh index +   + + Clear index cache +   + + Delete index + + + +

Label: Say what it does

-

Labels should provide a clear indication of what happens when the user clicks the button. Prefer action words and use in a consistent manner.

+

Labels should provide a clear indication of what happens when the user clicks the button. + Prefer action words and use in a consistent manner. +

+

Button text should be three words or less. If your label has more words, consider a text link instead.

 @@ -528,7 +531,8 @@ export default () => ( - Adds an object to a list or database. Always followed by a noun, for example, Add visualization. Do not use "Add new." Remove is the correct opposite. + Adds an object to a list or database. Always followed by a noun, for example, Add visualization. + Do not use "Add new." Remove is the correct opposite. @@ -539,7 +543,7 @@ export default () => ( - Stops an action without saving pending changes. Never make Cancel red—it's not a destructive action. + Stops an action without saving pending changes. Never make Cancel red—it's not a destructive action. @@ -554,7 +558,8 @@ export default () => ( - Creates a new object from scratch. Always followed by a noun, for example, “Create pipeline.” Do not use "Create new." Exception: “Add user” is more intuitive that “Create user.” Delete is the correct opposite + Creates a new object from scratch. Always followed by a noun, for example, “Create pipeline.” Do not use "Create new." + Exception: “Add user” is more intuitive that “Create user.” Delete is the correct opposite @@ -629,7 +634,8 @@ export default () => ( - Remove an item not related to a database, such as a row from a table. Do not confuse with Delete, which permanenty removes data from a database. + Remove an item not related to a database, such as a row from a table. + Do not confuse with Delete, which permanenty removes data from a database. diff --git a/src-docs/src/views/guidelines/writing.js b/src-docs/src/views/guidelines/writing.js index 964c11920d3..34d2a26fdef 100644 --- a/src-docs/src/views/guidelines/writing.js +++ b/src-docs/src/views/guidelines/writing.js @@ -601,165 +601,6 @@ export default () => ( - - - - Delete this report? - - - Cancel - Delete - - - In a modal, the user path is left to right, top to bottom. - The primary action goes on the bottom right. This pattern is reversed for right-to-left languages. - - - - - - - - - - - In a form, content is concentrated on the top and left. - The primary action goes on the bottom left. - - - - - - - New user - When to center a button - - - If a data table has an action for creating an object, the button is in the upper right. - - - - - - - Create index - - - - Delete - - - - Save and close - - - - - Cancel - - - Create index - - Use more than one primary button per page. - - - - - - Cancel   - Create index - Cancel   - Delete - Cancel   - Save and close - - - Add alert   Remove alert - Add userDelete user - In an unconstrained container, such as a form, the primary action is on the bottom left. - - - New user - In a page with a list of things, the primary action is in the upper right - - - - - - + Create index - - - Delete - - Save and close - - - - Bad example - - - - - - - - Create watch   - Delete watch - Use Create for creating an object from scratch. - Often used in a create-then-add scenario. Delete is the correct opposite. - - - - Add alert   Remove alert - Add userDelete user - Use Add for creating a new relationship. Remove is the correct opposite. Prefer “Add user” over “Create user” because it is more intuitive. - - - New user - Avoid. Prefer the action words Create and Add. Exception: New Password. - - From 30c8106ebbf354723b61a82a158298e76fb174e6 Mon Sep 17 00:00:00 2001 From: gchaps Date: Wed, 7 Feb 2018 14:23:47 -0800 Subject: [PATCH 03/12] fixed errors in code --- src-docs/src/views/guidelines/button.js | 36 +++++-------------------- 1 file changed, 6 insertions(+), 30 deletions(-) diff --git a/src-docs/src/views/guidelines/button.js b/src-docs/src/views/guidelines/button.js index d6bb4617214..8f0a33234d3 100644 --- a/src-docs/src/views/guidelines/button.js +++ b/src-docs/src/views/guidelines/button.js @@ -26,31 +26,12 @@ import { EuiTableRowCell } from '../../../../src/components'; -import makeId from '../../../../src/components/form/form_row/make_id'; - -const GuideRuleWriting = ({ - children, - className, - ...rest, -}) => { - const classes = classNames(className); - - return ( - -

{children}

- - ); -}; - export default () => (

Button

- Choosing a button style and type depends on the prominence of the action it performs and the context in which the button appears. + Determining a button type, style, and placement depends on the prominence of the action it performs and the context in which the button appears.

( > @@ -195,17 +174,12 @@ export default () => ( > - - @@ -232,6 +205,7 @@ export default () => ( size="l" hasShadow allowFullScreen + fullScreenIconColor="dark" alt="page without primary button" url="https://imgur.com/aiPlqks.jpg" /> @@ -262,6 +236,7 @@ export default () => ( size="l" hasShadow allowFullScreen + fullScreenIconColor="dark" alt="page without primary button" url="https://imgur.com/eVIWhUN.jpg" /> @@ -287,6 +262,7 @@ export default () => ( size="l" hasShadow allowFullScreen + fullScreenIconColor="dark" alt="page without primary button" url="https://imgur.com/5diUfSX.jpg" /> @@ -301,6 +277,7 @@ export default () => ( size="l" hasShadow allowFullScreen + fullScreenIconColor="dark" alt="page without primary button" url="https://imgur.com/Vkrj67k.jpg" /> @@ -474,7 +451,6 @@ export default () => ( From 94c6f9e583dd8ad10f0e854c18c805581ed90412 Mon Sep 17 00:00:00 2001 From: gchaps Date: Thu, 15 Feb 2018 14:03:00 -0800 Subject: [PATCH 04/12] incorporate review comments --- src-docs/src/views/guidelines/button.js | 392 ++++++++++++++---------- 1 file changed, 237 insertions(+), 155 deletions(-) diff --git a/src-docs/src/views/guidelines/button.js b/src-docs/src/views/guidelines/button.js index 8f0a33234d3..ec6bc151b37 100644 --- a/src-docs/src/views/guidelines/button.js +++ b/src-docs/src/views/guidelines/button.js @@ -1,5 +1,4 @@ import React from 'react'; -import classNames from 'classnames'; import { GuidePage, @@ -31,7 +30,7 @@ export default () => (

Button

- Determining a button type, style, and placement depends on the prominence of the action it performs and the context in which the button appears. + Choosing a button type, style, and placement depends on the prominence of its action and the context in which the button appears.

( -
+
Filled @@ -69,7 +68,7 @@ export default () => ( -
+
Standard @@ -90,8 +89,7 @@ export default () => ( -
- +
Empty @@ -113,7 +111,7 @@ export default () => ( -
+
(

Placement and order

-

Button placement and order should follow the users path through the content.

 + + - +
+ +
- +
+ +
@@ -186,101 +194,133 @@ export default () => ( in an F-shaped pattern. A primary action on the bottom left is easiest for users to reach." > - +
+ +
- - + +
+ +
- - + +
+ +
- - + +
+ +
-

Primary button: One per container

-

The primary action should not have to compete for attention. Use only one primary button per page, form, or modal.

+

One primary button per container

 - - + - +
+ +
- +
+ +
@@ -290,26 +330,15 @@ export default () => ( -

Icons: Must be recognized at a glance

-

Icon buttons can save space. Limit icon buttons to groups of two—otherwise they lose meaning. See the - -   icon respository -   - - for icons with common meanings. -

+

Easily recognized icons

 - - + ( description="Icons can serve as a scanning aid in a text label, but keep to a minimum. Icons work best on labels for binary actions (for example, Create and Delete) and final actions (Save)." > - + (     - +    @@ -395,16 +424,15 @@ export default () => ( -

Color: Use sparingly

-

The button color defaults to blue. Limit color changes to well-established use cases—green for final - save actions and red for delete. -

+

Minimal color changes

 - - - + + @@ -417,7 +445,7 @@ export default () => ( - + Cancel @@ -437,23 +465,27 @@ export default () => ( -

Multiple buttons

-

When using multiple buttons, two is optimal, three is rare. For more buttons, use a dropdown or context menu.

+

Using multiple buttons

 - - - - - - + + +
+ +
@@ -461,13 +493,24 @@ export default () => ( size="s" > Close index -   +    + + Force merge index +    Refresh index -   +    + Clear index cache -   +    + + Flush index +    Delete index @@ -478,19 +521,32 @@ export default () => ( -

Label: Say what it does

-

Labels should provide a clear indication of what happens when the user clicks the button. - Prefer action words and use in a consistent manner. -

-

Button text should be three words or less. If your label has more words, consider a text link instead.

+

Action labels

+ + + + + + +

Text for buttons

+ - + - Label + Text @@ -507,7 +563,7 @@ export default () => ( - Adds an object to a list or database. Always followed by a noun, for example, Add visualization. + Adds an object to a list or database. Always followed by an object, for example, Add visualization. Do not use "Add new." Remove is the correct opposite. @@ -520,6 +576,7 @@ export default () => ( Stops an action without saving pending changes. Never make Cancel red—it's not a destructive action. + Cancel is always an empty button. @@ -534,8 +591,8 @@ export default () => ( - Creates a new object from scratch. Always followed by a noun, for example, “Create pipeline.” Do not use "Create new." - Exception: “Add user” is more intuitive that “Create user.” Delete is the correct opposite + Creates a new object from scratch. Always followed by an object, for example, “Create pipeline.” Do not use "Create new." + Exception: “Add user” is more intuitive than “Create user.” Delete is the correct opposite @@ -562,78 +619,103 @@ export default () => ( -   Discard + + Learn more + - Avoid. Use Remove or Delete. + Takes the user to additional content - - Learn more - + + Remove + - - Takes the user to additional content + Removes an item not related to a database, such as a row from a table. + Do not confuse with Delete, which permanenty removes data from a database. - -   New + + Save +    + + Save +    - - Avoid. Prefer the action words Add or Create. + Carries out pending changes, for example, Save edits. + Do not confuse with Add. Can use green if this button is the final save action. + + + + + + +

Words to Avoid

+ + + + + + + + Text + + + + Use this instead + + + -   OK + Discard - Avoid. Use words that explain the action. + Remove or Delete + - - Remove - +   New + - Remove an item not related to a database, such as a row from a table. - Do not confuse with Delete, which permanenty removes data from a database. + Add or Create - - Save -    +   OK + - Carry out pending changes, for example, Save edits. Do not confuse with Add. Can use green for the final save action. + Words that explain the action - -   Yes/No +   Yes/No - Avoid. Use action words instead. + Action words From bcaa9640be967646d67caa63e26565a6fada7dc0 Mon Sep 17 00:00:00 2001 From: gchaps Date: Thu, 22 Feb 2018 15:36:17 -0800 Subject: [PATCH 05/12] buttons, modals, and toasts --- src-docs/src/routes.js | 18 +- src-docs/src/views/guidelines/button.js | 72 ++-- src-docs/src/views/guidelines/modals.js | 418 ++++++++++++++++++++++++ src-docs/src/views/guidelines/toasts.js | 376 +++++++++++++++++++++ 4 files changed, 832 insertions(+), 52 deletions(-) create mode 100644 src-docs/src/views/guidelines/modals.js create mode 100644 src-docs/src/views/guidelines/toasts.js diff --git a/src-docs/src/routes.js b/src-docs/src/routes.js index 2272f825ffa..f5c8b93a6e5 100644 --- a/src-docs/src/routes.js +++ b/src-docs/src/routes.js @@ -19,9 +19,15 @@ import { import ButtonGuidelines from './views/guidelines/button'; +import ModalGuidelines + from './views/guidelines/modals'; + import TextScales from './views/text_scaling/text_scaling_sandbox'; +import ToastGuidelines + from './views/guidelines/toasts'; + import WritingGuidelines from './views/guidelines/writing'; @@ -217,12 +223,18 @@ const navigation = [{ items: [{ name: 'Buttons', component: ButtonGuidelines, - items: [{ - name: 'Writing', - component: WritingGuidelines, + }, { + name: 'Modals', + component: ModalGuidelines, }, { name: 'Text scales', component: TextScales, + }, { + name: 'Toasts', + component: ToastGuidelines, + }, { + name: 'Writing', + component: WritingGuidelines, }], }, { name: 'Layout', diff --git a/src-docs/src/views/guidelines/button.js b/src-docs/src/views/guidelines/button.js index ec6bc151b37..c3ce75a9508 100644 --- a/src-docs/src/views/guidelines/button.js +++ b/src-docs/src/views/guidelines/button.js @@ -3,6 +3,7 @@ import React from 'react'; import { GuidePage, GuideRule, + GuideRuleTitle, GuideRuleExample, } from '../../components'; @@ -33,18 +34,17 @@ export default () => ( Choosing a button type, style, and placement depends on the prominence of its action and the context in which the button appears.

- Go to code example + Go to code - - -

Button types

- - + + Button types + + @@ -135,16 +135,12 @@ export default () => ( + + Placement and order - - - -

Placement and order

- - @@ -158,7 +154,7 @@ export default () => (
( - - -

One primary button per container

- - + One primary button per container - + Easily recognized icons - -

Easily recognized icons

- - ( - - - -

Minimal color changes

- - + Minimal color changes - -

Using multiple buttons

+ Using multiple buttons - ( - - -

Action labels

+ Action labels - - + for example, Add dashboard. Keep labels to three words or less. + If your label requries more words, consider a text link instead." + /> - +

Text for buttons

@@ -658,7 +632,7 @@ export default () => ( - +

Words to Avoid

diff --git a/src-docs/src/views/guidelines/modals.js b/src-docs/src/views/guidelines/modals.js new file mode 100644 index 00000000000..c14bb7758cd --- /dev/null +++ b/src-docs/src/views/guidelines/modals.js @@ -0,0 +1,418 @@ +import React from 'react'; + +import { + GuidePage, + GuideRule, + GuideRuleExample, + GuideRuleTitle, +} from '../../components'; + +import { + EuiText, + EuiSpacer, + EuiFlexGroup, + EuiFlexItem, + EuiImage, + EuiLink, + EuiPanel +} from '../../../../src/components'; + +export default () => ( + + + +

Modals

+

+A modal says “pay attention to me and nothing else.” Modals work best for focusing users' attention on a short +amount of content and getting them to make a decision. +

+ + + + Go to code + + + + + + Anatomy + + + + + + +
+ +
+ + + + + + +

The header sets the context for the user

+

Short and sentence-case, it lets the user know the task that needs to get done.

+

The body supports a single task

+

This task should be critical to continuing the current process.

+

Buttons are right-aligned

+

The primary action is a filled button, and the secondary action is a link button. +

+

An overlay is optional

+

It lets the user know that the content behind the modal isn't active.

+ + + + + + + + + + + Usage + + + + + + + +

Use modals sparingly

+

Modals pull users out of their current context. + They are well-suited for asking users to confirm an action and for short, focused input. + Otherwise, it's better to show the content within the page. +

+ + + + + + + + +

Keep content clean & simple

+

A modal should be a short, direct conversation with the user. + If you’re trying to stuff a lot of content into your modal, then you should probably consider + a different solution, such as a  + + form + . +

+ + + + + + + +

Open on a user action

+

Don't just pop open a modal. Let a user action, such as clicking a button, trigger a modal.

+ + + + + + Content + + + + +
+ + +
+ + + +
+ + +
+ + + + Confirmation modal + + + + + +
+ + +
+ + + + + + + +
+ + +
+ + + + + + + + +
+ + +
+ + + +
+ + +
+ + + + + +
+ + +
+ + + +
+ + +
+ + + + + + + + + + Simple input modal + + + + + + +
+ + +
+ + + + + + + + + + + + + +
+ + +
+ + + + + + + Things to avoid + + + + + + + +

Scrolling

+

Modal content should fit in a single screen. + If your modal has numerous options or a long list of items, use scrolling only + if it's better than other design solutions, + such as keeping the content on the page. +

+ + + + + + + + +

Launching a modal from a modal

+

Using a modal on top of a modal typically means your workflow is too complex—users shouldn't have + to remember which modal they are in. Instead, use a component that supports multiple steps, such as a  + + form + +  or  + + steps + + . +

+ + + + + + + +

Opening a modal from a toolbar

+

Users don't expect a toolbar button to open a modal.

+ + + + + + + + + + + + + + + + + + + + +); diff --git a/src-docs/src/views/guidelines/toasts.js b/src-docs/src/views/guidelines/toasts.js new file mode 100644 index 00000000000..7e3f0694b13 --- /dev/null +++ b/src-docs/src/views/guidelines/toasts.js @@ -0,0 +1,376 @@ +import React from 'react'; + +import { + GuidePage, + GuideRule, + GuideRuleExample, + GuideRuleTitle, +} from '../../components'; + +import { + EuiText, + EuiButton, + EuiSpacer, + EuiFlexGroup, + EuiFlexItem, + EuiToast, + EuiPanel +} from '../../../../src/components'; + +export default () => ( + + + +

Toasts

+

+A toast is a short, timely message related to a user action. It appears on the bottom right and times out after a few seconds. + +

+ + + + + Use for brief feedback + + + + + + + + + + + + +
+ +
+ + + + + + + + + + + + + + +
+ +
+ + + + + + + + + + + + + + + + Most often, its just a title + + + + +
+ + +
+ + + + +
+ + +

+ Username is a required field. +

+

+ Password must be at least 6 characters long. +

+

+ Email is a required field. +

+ +
+ + + + + + + At most, one action + + + + + + View + + + + + + + + + Learn more + + + + + + + Minimal text + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + Things to avoid + + + + + + + + +

Too much detail

+

If you are trying to cram a lot of detail into your toast, + then its probably not right design solution. +

+ + + + + + +

Too often

+

Toasts are a popular design choice because they need not + fit in a layout and they don't disrupt the user. As such, they + are also commonly misued. Don't use toasts + for historical actions or show a toast when the user opens a page. + A toast message should not be a required read before leaving a page. +

+ + + + + + + + +

Stacking toasts

+

Open one toast at a time so users can take + in all the details before the next toast arrives. +

+ + + + + + + + + + + + + + + + + +); From c52a0c9ec0f65cff4325699b062a6a544573b530 Mon Sep 17 00:00:00 2001 From: Dave Snider Date: Fri, 23 Feb 2018 16:52:03 -0800 Subject: [PATCH 06/12] Cleanup of button guidelines --- .../guide_rule/_guide_rule_example.scss | 10 + .../guide_rule/guide_rule_example.js | 4 + src-docs/src/views/guidelines/button.js | 703 ++++++++---------- src-docs/src/views/guidelines/modals.js | 117 +-- src-docs/src/views/guidelines/toasts.js | 124 ++- 5 files changed, 422 insertions(+), 536 deletions(-) diff --git a/src-docs/src/components/guide_rule/_guide_rule_example.scss b/src-docs/src/components/guide_rule/_guide_rule_example.scss index 8a0646224a0..48bc72c13b4 100644 --- a/src-docs/src/components/guide_rule/_guide_rule_example.scss +++ b/src-docs/src/components/guide_rule/_guide_rule_example.scss @@ -40,4 +40,14 @@ color: $euiColorDanger; } } + + &.guideRule__example--frame { + .guideRule__example__panel { + padding: $euiSizeL; + background-color: $euiColorLightestShade; + display: flex; + align-items: center; + justify-content: space-around; + } + } } diff --git a/src-docs/src/components/guide_rule/guide_rule_example.js b/src-docs/src/components/guide_rule/guide_rule_example.js index 6b603153037..2d35d5a30b0 100644 --- a/src-docs/src/components/guide_rule/guide_rule_example.js +++ b/src-docs/src/components/guide_rule/guide_rule_example.js @@ -22,12 +22,16 @@ export const GuideRuleExample = ({ type, text, panel, + frame, ...rest, }) => { const classes = classNames( 'guideRule__example', typeToClassNameMap[type], + { + 'guideRule__example--frame': frame, + }, className ); diff --git a/src-docs/src/views/guidelines/button.js b/src-docs/src/views/guidelines/button.js index c3ce75a9508..215feb2c3c0 100644 --- a/src-docs/src/views/guidelines/button.js +++ b/src-docs/src/views/guidelines/button.js @@ -4,7 +4,7 @@ import { GuidePage, GuideRule, GuideRuleTitle, - GuideRuleExample, + GuideRuleExample } from '../../components'; import { @@ -23,96 +23,102 @@ import { EuiTableHeaderCell, EuiTableBody, EuiTableRow, - EuiTableRowCell + EuiTableRowCell, + EuiHorizontalRule, } from '../../../../src/components'; -export default () => ( +import ContextMenu from '../context_menu/context_menu'; + +export default() => ( -

Button

+

Button guidelines

- Choosing a button type, style, and placement depends on the prominence of its action and the context in which the button appears. + Choosing a button type, style, and placement depends on the prominence + of its action and the context in which the button appears.

- - Go to code + + Go to code - + + Button types - + - - -
- + + + Filled - -
+ - + -

Filled buttons are for the primary action

-

This button has the heavist visual weight to draw users' attention. +

+ Filled buttons are for the primary action +

+

+ This button has the heavist visual weight to draw users' attention.

- + - - -
- - Standard - -
+ + + + Standard + - + -

Standard buttons are for secondary actions

-

Such actions include Add and Save. This button type works well for multiple actions of equal weight. +

+ Standard buttons are for secondary actions +

+

+ Such actions include Add and Apply. This button type works well for + multiple actions of equal weight.

- + - - - -
- + + + Empty - -
- + - + -

Empty buttons are for UI-specific actions

-

Close, cancel, filter, refresh, and other actions that reconfigure the UI are appropriate for empty buttons. +

+ Empty buttons are for complimentary, UI-specific actions +

+

+ Close, cancel, filter, refresh, and other actions that reconfigure the + UI are appropriate for empty buttons.

- - + - - + +
- ( aria-label="Next" />
- - + -

Icon buttons are for saving space

-

The icon must be immediately understood, for example, a trash can for delete. Use these buttons sparingly, - and never for the primary action. +

+ Icon buttons are for saving space +

+

+ The icon must be immediately understood, for example, a trash can + for delete. Use these buttons sparingly, and never + for the primary action.

- - - + Placement and order - -
- +
-
-
- -
+ -
- -
+ - - -
- -
+ -
- -
+ - One primary button per container -
- -
+ -
- -
- + + - - Easily recognized icons - + Icons in buttons either stand on their own or add context - -      - + +
+ +      + +
- - - -      - - - + +
+ + + +      + + + +
- - - - -  Create -     + - - -  Delete -     + + Continue + - - -  Save and close -     + + Save and complete + - - - -    - - Create   - -    - - - Delete   - -    - - - Save and close   - -    - + + + Create index pattern + - Minimal color changes + Minimize mixing color, size, and type - - - - Cancel -    - - Save and close - - + +
+ + + + Save + + + + + Cancel + + + +
- - - Cancel - - - Save -    - - Delete - + +
+ + + + Save + + + + + Cancel + + + + + Delete + + + +
- Using multiple buttons - - + Stack action sets into one button -
- -
+ - - - Close index -    - - Force merge index -    - - Refresh index -    - - - Clear index cache -    - - Flush index -    - - Delete index - + +
+ + + + Show fullscreen + + + + + Display options + + + + + Edit / add panels + + + +
- - Action labels - -

Text for buttons

- - +

Preffered words in buttons

+ - - Text + Text - Description + Description - - Add + + Add noun - Adds an object to a list or database. Always followed by an object, for example, Add visualization. - Do not use "Add new." Remove is the correct opposite. + Adds an object to a list or database. Always followed by an object, + for example, Add visualization. Do not use "Add new." Remove is the correct opposite. - Cancel + Cancel - Stops an action without saving pending changes. Never make Cancel red—it's not a destructive action. - Cancel is always an empty button. + Stops an action without saving pending changes. Never make Cancel + red—it's not a destructive action. Cancel is always an empty button. - - Create -    - - Create + + Create noun - Creates a new object from scratch. Always followed by an object, for example, “Create pipeline.” Do not use "Create new." - Exception: “Add user” is more intuitive than “Create user.” Delete is the correct opposite + Creates a new object from scratch. Always followed by an object, + for example, “Create pipeline.” Do not use "Create new." + Exception: “Add user” is more intuitive than “Create user.” Delete is the correct opposite - - Delete + + Delete    - - Delete + + Delete 6 nouns    - - - - - Removes data so users can longer retrieve it. Create is the correct opposite. Do not confuse with Remove. - - - - - - - Learn more - + - Takes the user to additional content + Deletes data so users can longer retrieve it. Create is the correct + opposite. Do not confuse with Remove. - - Remove - + + Remove +    + - Removes an item not related to a database, such as a row from a table. - Do not confuse with Delete, which permanenty removes data from a database. + Removes an item not related to a database, such as a row from a table. + Do not confuse with Delete, which permanenty removes data from a database. - - Save -    - - Save + + Save    + + Save and complete + - Carries out pending changes, for example, Save edits. - Do not confuse with Add. Can use green if this button is the final save action. + Carries out pending changes, for example, Save edits. Do not confuse + with Add. Can use green if this button is the final save action. @@ -635,10 +572,9 @@ export default () => ( -

Words to Avoid

+

Avoid these words in buttons

 - - + @@ -654,42 +590,52 @@ export default () => ( + Discard + - Remove or Delete + Remove or Delete - -   New + + New + - Add or Create + Add or Create -   OK + + OK + - Words that explain the action + Words that explain the action -   Yes/No + + Yes? +    + + No? + - Action words + Action words @@ -697,18 +643,5 @@ export default () => ( - - - - - - - - - - - - - ); diff --git a/src-docs/src/views/guidelines/modals.js b/src-docs/src/views/guidelines/modals.js index c14bb7758cd..8a484be135c 100644 --- a/src-docs/src/views/guidelines/modals.js +++ b/src-docs/src/views/guidelines/modals.js @@ -23,11 +23,10 @@ export default () => (

Modals

-A modal says “pay attention to me and nothing else.” Modals work best for focusing users' attention on a short -amount of content and getting them to make a decision. + A modal says “pay attention to me and nothing else.” Modals work best for focusing users' attention on a short + amount of content and getting them to make a decision.

- -

The header sets the context for the user

Short and sentence-case, it lets the user know the task that needs to get done.

@@ -69,12 +67,8 @@ amount of content and getting them to make a decision.

It lets the user know that the content behind the modal isn't active.

 - - - - Usage @@ -86,9 +80,10 @@ amount of content and getting them to make a decision.

Use modals sparingly

-

Modals pull users out of their current context. +

+ Modals pull users out of their current context. They are well-suited for asking users to confirm an action and for short, focused input. - Otherwise, it's better to show the content within the page. + Otherwise, it's better to show the content within the page.

@@ -99,14 +94,10 @@ amount of content and getting them to make a decision.

Keep content clean & simple

-

A modal should be a short, direct conversation with the user. +

+ A modal should be a short, direct conversation with the user. If you’re trying to stuff a lot of content into your modal, then you should probably consider - a different solution, such as a  - - form - . + a different solution, such as form.

@@ -116,7 +107,10 @@ amount of content and getting them to make a decision.

Open on a user action

-

Don't just pop open a modal. Let a user action, such as clicking a button, trigger a modal.

+

+ Don't just pop open a modal. Let a user action, + such as clicking a button, trigger a modal. +

@@ -126,18 +120,22 @@ amount of content and getting them to make a decision.
- - - -
@@ -211,8 +202,6 @@ amount of content and getting them to make a decision. - -
-
-
-
- - - - - - - Simple input modal @@ -357,10 +333,11 @@ amount of content and getting them to make a decision.

Scrolling

-

Modal content should fit in a single screen. - If your modal has numerous options or a long list of items, use scrolling only - if it's better than other design solutions, - such as keeping the content on the page. +

+ Modal content should fit in a single screen. + If your modal has numerous options or a long list of items, use scrolling only + if it's better than other design solutions, + such as keeping the content on the page.

@@ -371,20 +348,13 @@ amount of content and getting them to make a decision.

Launching a modal from a modal

-

Using a modal on top of a modal typically means your workflow is too complex—users shouldn't have - to remember which modal they are in. Instead, use a component that supports multiple steps, such as a  - - form - -  or  - - steps - - . +

+ Using a modal on top of a modal typically means your workflow is + too complex—users shouldn't have + to remember which modal they are in. Instead, use a component + that supports multiple steps, + such as a form{' '} + or steps .

@@ -399,20 +369,5 @@ amount of content and getting them to make a decision. - - - - - - - - - - - - - - - ); diff --git a/src-docs/src/views/guidelines/toasts.js b/src-docs/src/views/guidelines/toasts.js index 7e3f0694b13..01f8103756a 100644 --- a/src-docs/src/views/guidelines/toasts.js +++ b/src-docs/src/views/guidelines/toasts.js @@ -24,12 +24,9 @@ export default () => (

Toasts

A toast is a short, timely message related to a user action. It appears on the bottom right and times out after a few seconds. -

- - Use for brief feedback @@ -39,10 +36,10 @@ A toast is a short, timely message related to a user action. It appears on the Toasts are short-lived—users can't retrieve the messages by refreshing the page." > - - -
- - - - @@ -85,28 +75,26 @@ A toast is a short, timely message related to a user action. It appears on the - -
- - @@ -120,13 +108,7 @@ A toast is a short, timely message related to a user action. It appears on the - - - - - - Most often, its just a title - + Most often, it is just a title @@ -142,7 +125,7 @@ A toast is a short, timely message related to a user action. It appears on the
@@ -151,6 +134,7 @@ A toast is a short, timely message related to a user action. It appears on the @@ -162,23 +146,25 @@ A toast is a short, timely message related to a user action. It appears on the title="Your form has errors" color="danger" > -

- Username is a required field. -

-

- Password must be at least 6 characters long. -

-

- Email is a required field. -

+ +
    +
  • + Username is a required field. +
    • +
  • + Password must be at least 6 characters long. +
    • +
  • + Email is a required field. +
    • +
+
- - At most, one action - View + Download @@ -204,11 +192,13 @@ A toast is a short, timely message related to a user action. It appears on the Learn more @@ -217,7 +207,6 @@ A toast is a short, timely message related to a user action. It appears on the - Minimal text +
+ + - - - - - - + +
@@ -262,62 +255,63 @@ A toast is a short, timely message related to a user action. It appears on the > - - - - - - - Things to avoid @@ -360,17 +354,7 @@ A toast is a short, timely message related to a user action. It appears on the - - - - - - - - - - ); From e3ed9bdabb45c6aa0db1804b9b4eb5e16e4a95d8 Mon Sep 17 00:00:00 2001 From: Dave Snider Date: Fri, 23 Feb 2018 17:01:43 -0800 Subject: [PATCH 07/12] make sidenav allow hidden items --- src-docs/src/components/guide_page/guide_page_chrome.js | 2 +- src-docs/src/routes.js | 2 ++ src-docs/src/views/guidelines/button.js | 4 ++-- 3 files changed, 5 insertions(+), 3 deletions(-) diff --git a/src-docs/src/components/guide_page/guide_page_chrome.js b/src-docs/src/components/guide_page/guide_page_chrome.js index 78fa2b683f6..c1a92fec25f 100644 --- a/src-docs/src/components/guide_page/guide_page_chrome.js +++ b/src-docs/src/components/guide_page/guide_page_chrome.js @@ -97,7 +97,7 @@ export class GuidePageChrome extends Component { sideNav.forEach(section => { const matchingItems = section.items.filter(item => ( - item.name.toLowerCase().indexOf(this.state.search.toLowerCase()) !== -1 + item.name.toLowerCase().indexOf(this.state.search.toLowerCase()) !== -1 && item.hidden !== true )); const items = matchingItems.map(item => { diff --git a/src-docs/src/routes.js b/src-docs/src/routes.js index f5c8b93a6e5..1fe616fa232 100644 --- a/src-docs/src/routes.js +++ b/src-docs/src/routes.js @@ -226,12 +226,14 @@ const navigation = [{ }, { name: 'Modals', component: ModalGuidelines, + hidden: true, }, { name: 'Text scales', component: TextScales, }, { name: 'Toasts', component: ToastGuidelines, + hidden: true, }, { name: 'Writing', component: WritingGuidelines, diff --git a/src-docs/src/views/guidelines/button.js b/src-docs/src/views/guidelines/button.js index 215feb2c3c0..baffd8777a6 100644 --- a/src-docs/src/views/guidelines/button.js +++ b/src-docs/src/views/guidelines/button.js @@ -486,7 +486,7 @@ export default() => ( - Add noun + Add thing @@ -511,7 +511,7 @@ export default() => ( - Create noun + Create thing From 85e48d503f5ce574b388d5604b4f3a3c1fc61c23 Mon Sep 17 00:00:00 2001 From: Dave Snider Date: Fri, 23 Feb 2018 17:25:02 -0800 Subject: [PATCH 08/12] more cleanup --- src-docs/src/views/guidelines/button.js | 22 +++++++++++++++------- 1 file changed, 15 insertions(+), 7 deletions(-) diff --git a/src-docs/src/views/guidelines/button.js b/src-docs/src/views/guidelines/button.js index baffd8777a6..44fb4a47a04 100644 --- a/src-docs/src/views/guidelines/button.js +++ b/src-docs/src/views/guidelines/button.js @@ -17,7 +17,6 @@ import { EuiButtonEmpty, EuiIcon, EuiImage, - EuiLink, EuiTable, EuiTableHeader, EuiTableHeaderCell, @@ -34,12 +33,11 @@ export default() => (

Button guidelines

- Choosing a button type, style, and placement depends on the prominence - of its action and the context in which the button appears. + This page documents patterns for button usage only. It does not give code examples

- - Go to code - + + Go to component code instead + @@ -143,7 +141,7 @@ export default() => ( - + Placement and order @@ -251,6 +249,8 @@ export default() => ( + + One primary button per container ( + + Icons in buttons either stand on their own or add context ( + + Minimize mixing color, size, and type Go to component code instead From 4f1807be9194a7a8c803be0b819bb6ec34af60f9 Mon Sep 17 00:00:00 2001 From: gchaps Date: Thu, 8 Mar 2018 11:19:34 -0800 Subject: [PATCH 10/12] Updates to buttons and toasts to reflect our new style --- src-docs/src/views/guidelines/button.js | 81 ++--- src-docs/src/views/guidelines/toasts.js | 394 ++++++++++++++++-------- 2 files changed, 305 insertions(+), 170 deletions(-) diff --git a/src-docs/src/views/guidelines/button.js b/src-docs/src/views/guidelines/button.js index e32c2e8e64f..ef6a3c6d708 100644 --- a/src-docs/src/views/guidelines/button.js +++ b/src-docs/src/views/guidelines/button.js @@ -33,10 +33,10 @@ export default() => (

Button guidelines

- This page documents patterns for button usage only. It does not give code examples. + This page documents patterns for button design, including types, placement, color, and size.

- Go to component code instead + View component code @@ -146,19 +146,19 @@ export default() => ( Placement and order @@ -183,16 +183,17 @@ export default() => ( ( ( type="do" text="Do. Empty states are unique because they focus first on information and then try to sell - you on creation. In these special cases when both the container is constrained - and the content is fairly short you should center align the title and the button." + the user on creation. In these special cases, where the container is constrained + and the content is fairly short, the title and the button should be center aligned." > ( - One primary button per container + One primary button per layout @@ -291,7 +292,7 @@ export default() => ( > @@ -321,13 +322,13 @@ export default() => ( ( Continue - Save and complete @@ -347,7 +347,7 @@ export default() => ( frame="frame" type="dont" text="Don't. Icons often distract from the text. - This is especially true when it is positioned to the right + This is especially true when the icon is positioned on the right, with a hard to grok icon." > ( - Minimize mixing color, size, and type + Minimize the mixing of color, size, and type - @@ -391,7 +391,7 @@ export default() => ( @@ -422,7 +422,8 @@ export default() => ( Stack action sets into one button ( - Action labels + Labels that say what the button does -

Preffered words in buttons

+

Preferred words in buttons

 @@ -536,7 +537,7 @@ export default() => ( Delete    - Delete 6 nouns + Delete 6 things    @@ -643,7 +644,7 @@ export default() => ( - Action words + Words that explain the action diff --git a/src-docs/src/views/guidelines/toasts.js b/src-docs/src/views/guidelines/toasts.js index 01f8103756a..bbf56ac6ff6 100644 --- a/src-docs/src/views/guidelines/toasts.js +++ b/src-docs/src/views/guidelines/toasts.js @@ -10,116 +10,185 @@ import { import { EuiText, EuiButton, + EuiHorizontalRule, EuiSpacer, EuiFlexGroup, EuiFlexItem, - EuiToast, - EuiPanel + EuiToast } from '../../../../src/components'; export default () => ( - - + -

Toasts

+

Toast guidelines

-A toast is a short, timely message related to a user action. It appears on the bottom right and times out after a few seconds. + This page documents patterns for using toasts, short messages that + appears on the lower right corner and time out after a few seconds. + They are a popular design choice because they don't need to + fit in a layout and don't disrupt the user.

+ + View component code + - Use for brief feedback + + + Toast types + + + + + + + + + + +

+ Success toasts indicate that everything worked out +

+

+ They are the most-commonly used toasts. +

+ + + + + + + + + + + + + +

+ Warning toasts direct user attention to a potential problem +

+

+ These toasts work well in monitoring apps when something + significant requires action. +

+ + + + + + + + + + + + + +

+ Error toasts report a problem +

+

+ An error toast might let users know an action didn't complete or that a form has errors. +

+ + + + + + + + +
+ +
+ + + + +

+ Info toasts relay neutral information +

+

+ The default toast, an info toast might notify users about an ongoing action. +

+ + + + + + + + + Use a toast for a timely message
- + - - -
- -
- - - - - - - - - Most often, it is just a title + Most often, it's a single line of text
@@ -135,8 +204,9 @@ A toast is a short, timely message related to a user action. It appears on the type="dont" panel={false} frame - text="Don't list the actual errors in the toast. - The error messages persist in callouts and valdiations on the form itself." + text="Don't cram a lot of detail into a toast. + These errors should persist in callouts and valdiations on the form. + They don't need to be spelled out in the toast." >
@@ -165,17 +235,20 @@ A toast is a short, timely message related to a user action. It appears on the - At most, one action + + + Toasts can have one action - Learn more + Cancel +    + + Delete - Minimal text + + + Icons should emphasize actions
+ + + + +
+ + + + + + + + + + + + + + Display one toast at a time + + + + + + + +
+ + + Learn more + + + +
+ + + + + + + Writing minimal messages + + + +
@@ -240,18 +414,18 @@ A toast is a short, timely message related to a user action. It appears on the type="dont" panel={false} frame - text="Dont use a generic object name or the verbiage "has been."" + text="Dont use the generic "Your object."" > @@ -276,13 +450,13 @@ A toast is a short, timely message related to a user action. It appears on the - + - Things to avoid - - - - - - - -

Too much detail

-

If you are trying to cram a lot of detail into your toast, - then its probably not right design solution. -

- - - - - - -

Too often

-

Toasts are a popular design choice because they need not - fit in a layout and they don't disrupt the user. As such, they - are also commonly misued. Don't use toasts - for historical actions or show a toast when the user opens a page. - A toast message should not be a required read before leaving a page. -

- - - - - - -

Stacking toasts

-

Open one toast at a time so users can take - in all the details before the next toast arrives. -

- - - - - ); From 5ff8b48f836a421d4e2e33c6721e20e1c8a5ee7f Mon Sep 17 00:00:00 2001 From: Dave Snider Date: Thu, 8 Mar 2018 15:44:28 -0800 Subject: [PATCH 11/12] guidelines cleanup, make toasts active --- .../guide_page/guide_page_chrome.js | 2 +- src-docs/src/routes.js | 1 - src-docs/src/views/guidelines/button.js | 4 +- src-docs/src/views/guidelines/toasts.js | 49 ++++++++++++------- src-docs/src/views/toast/success.js | 12 +++-- 5 files changed, 43 insertions(+), 25 deletions(-) diff --git a/src-docs/src/components/guide_page/guide_page_chrome.js b/src-docs/src/components/guide_page/guide_page_chrome.js index c1a92fec25f..0483d04b94c 100644 --- a/src-docs/src/components/guide_page/guide_page_chrome.js +++ b/src-docs/src/components/guide_page/guide_page_chrome.js @@ -159,7 +159,7 @@ export class GuidePageChrome extends Component { diff --git a/src-docs/src/routes.js b/src-docs/src/routes.js index 1fe616fa232..62837d86aa4 100644 --- a/src-docs/src/routes.js +++ b/src-docs/src/routes.js @@ -233,7 +233,6 @@ const navigation = [{ }, { name: 'Toasts', component: ToastGuidelines, - hidden: true, }, { name: 'Writing', component: WritingGuidelines, diff --git a/src-docs/src/views/guidelines/button.js b/src-docs/src/views/guidelines/button.js index ef6a3c6d708..b5c5a44b99d 100644 --- a/src-docs/src/views/guidelines/button.js +++ b/src-docs/src/views/guidelines/button.js @@ -197,7 +197,7 @@ export default() => ( > @@ -209,7 +209,7 @@ export default() => ( > diff --git a/src-docs/src/views/guidelines/toasts.js b/src-docs/src/views/guidelines/toasts.js index bbf56ac6ff6..b63ed44d997 100644 --- a/src-docs/src/views/guidelines/toasts.js +++ b/src-docs/src/views/guidelines/toasts.js @@ -237,7 +237,7 @@ export default () => ( - Toasts can have one action + Toasts should only contain a single action - - Download - +
+ + Download + +
@@ -266,19 +270,26 @@ export default () => ( type="dont" panel={false} frame - text="Dont use multiple actions. This message is better in a confirmation modal." + text="Don't use multiple actions. Don't align buttons in toasts to the left. + This message is better in a confirmation modal." > - - Cancel -    - - Delete - + + + + Cancel + + + + + Delete + + + @@ -368,9 +379,11 @@ export default () => ( color="danger" title="There was a problem with your node" > - - Learn more - +
+ + Learn more + +
@@ -386,7 +399,7 @@ export default () => ( - Writing minimal messages + Keep messages as short as possible ( type="dont" panel={false} frame - text="Dont include "successfully."" + text="Don't include "successfully."" > ( @@ -22,8 +24,12 @@ export default () => ( And some other stuff on another line, just for kicks. And here’s a link.

- - Download report - + + + + Download report + + + ); From aeb49d7f007f84054df15a75a230209981a9f991 Mon Sep 17 00:00:00 2001 From: Dave Snider Date: Thu, 8 Mar 2018 15:53:11 -0800 Subject: [PATCH 12/12] changelog --- CHANGELOG.md | 1 + 1 file changed, 1 insertion(+) diff --git a/CHANGELOG.md b/CHANGELOG.md index a825a4cb7b0..ba1b869048d 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -2,6 +2,7 @@ - Added `search.onChange` callback to `EuiInMemoryTable` ([#469](https://github.com/elastic/eui/pull/469)) - Added `initialPageSize` option to `EuiInMemoryTable` ([#477](https://github.com/elastic/eui/pull/477)) +- Added design guidelines for button and toast usage ([#371](https://github.com/elastic/eui/pull/371)) # [`0.0.24`](https://github.com/elastic/eui/tree/v0.0.24)