From 66741eafe15e894c7802169335916c2616c19c4b Mon Sep 17 00:00:00 2001 From: mklucsarits Date: Wed, 8 Aug 2018 19:09:16 -0500 Subject: [PATCH 1/9] Add icon component --- .gitignore | 3 ++ components.json | 1 + src/components/Icon/README.md | 23 ++++++++++++ src/components/Icon/index.js | 58 +++++++++++++++++++++++++++++++ src/components/Icon/index.spec.js | 34 ++++++++++++++++++ src/components/Icon/styles.scss | 2 ++ 6 files changed, 121 insertions(+) create mode 100644 src/components/Icon/README.md create mode 100644 src/components/Icon/index.js create mode 100644 src/components/Icon/index.spec.js create mode 100644 src/components/Icon/styles.scss diff --git a/.gitignore b/.gitignore index 91f6691..91bbd2f 100644 --- a/.gitignore +++ b/.gitignore @@ -59,3 +59,6 @@ typings/ # IDEA .idea/ + +# Miscellaneous cache files +.DS_Store diff --git a/components.json b/components.json index 9301dbe..38d6140 100644 --- a/components.json +++ b/components.json @@ -43,6 +43,7 @@ { "name": "Design System Icons", "components": [ + "Icon", "VideoPlayIcon" ] }, diff --git a/src/components/Icon/README.md b/src/components/Icon/README.md new file mode 100644 index 0000000..39e1b92 --- /dev/null +++ b/src/components/Icon/README.md @@ -0,0 +1,23 @@ +This component uses the Design System icons listed at [https://fandomdesignsystem.com/#/components/assets]() + +The `name` attribute of the component refers to the icon's DS name. + +## Example usage + +Standard icon: + +``` + +``` + +Small or tiny icon: + +``` + +``` + +Add your own CSS class for styling: + +``` + +``` \ No newline at end of file diff --git a/src/components/Icon/index.js b/src/components/Icon/index.js new file mode 100644 index 0000000..a3587f0 --- /dev/null +++ b/src/components/Icon/index.js @@ -0,0 +1,58 @@ +import React from 'react'; +import PropTypes from 'prop-types'; + +// Requires svg-sprite-loader +import 'design-system/dist/svg/sprite.svg'; + +import './styles.scss'; + +class Icon extends React.Component { + constructor(props) { + super(props); + this.getCssClass = this.getCssClass.bind(this); + } + + getCssClass() { + const {className, name} = this.props; + let cssClass = 'wds-icon'; + + if (/-small$/.test(name)) { + cssClass += ' wds-icon-small'; + } else if (/-tiny$/.test(name)) { + cssClass += ' wds-icon-tiny'; + } + + if (className) { + cssClass += ` ${className}`; + } + + return cssClass; + } + + render() { + const {name} = this.props; + return ( + + + + ); + } +} + +Icon.propTypes = { + /** + * Icon name + */ + name: PropTypes.string.isRequired, + /** + * Additional class name + */ + className: PropTypes.string, +}; + +Icon.defaultProps = { + className: '', +}; + +export default Icon; + diff --git a/src/components/Icon/index.spec.js b/src/components/Icon/index.spec.js new file mode 100644 index 0000000..43dd782 --- /dev/null +++ b/src/components/Icon/index.spec.js @@ -0,0 +1,34 @@ +import React from 'react'; +import renderer from 'react-test-renderer'; +import {shallow} from 'enzyme'; +import sinon from 'sinon'; + +import Icon from './index'; + +test('Icon component renders', () => { + const component = renderer.create( + + ); + expect(component.toJSON()).toMatchSnapshot(); +}); + +test('Icon component renders with small icon', () => { + const component = renderer.create( + + ); + expect(component.toJSON()).toMatchSnapshot(); +}); + +test('Icon component renders with a tiny icon', () => { + const component = renderer.create( + + ); + expect(component.toJSON()).toMatchSnapshot(); +}); + +test('Icon component renders with an additional CSS class', () => { + const component = renderer.create( + + ); + expect(component.toJSON()).toMatchSnapshot(); +}); diff --git a/src/components/Icon/styles.scss b/src/components/Icon/styles.scss new file mode 100644 index 0000000..3675eb6 --- /dev/null +++ b/src/components/Icon/styles.scss @@ -0,0 +1,2 @@ +@import "~design-system/dist/scss/wds-mixins/index.scss"; +@import "~design-system/dist/scss/wds-components/_icons.scss"; From c68057d6723d9fa66ebd1c227c7adb85a57ad276 Mon Sep 17 00:00:00 2001 From: "Bartosz V. Bentkowski" Date: Wed, 8 Aug 2018 17:30:31 -0700 Subject: [PATCH 2/9] Add react-svg-loader and fix jest config --- jest.config.js | 1 + package.json | 3 +- .../Icon/__snapshots__/index.spec.js.snap | 41 +++++++++++++++++++ styleguide/webpackConfig.js | 4 ++ yarn.lock | 31 +++++++++++++- 5 files changed, 77 insertions(+), 3 deletions(-) create mode 100644 src/components/Icon/__snapshots__/index.spec.js.snap diff --git a/jest.config.js b/jest.config.js index 48b62ed..12b479d 100644 --- a/jest.config.js +++ b/jest.config.js @@ -1,6 +1,7 @@ module.exports = { moduleNameMapper: { '\\.(s?css)$': 'identity-obj-proxy', + '\\.svg$': 'identity-obj-proxy', }, testURL: 'http://localhost', setupTestFrameworkScriptFile: '/jest.setup.js', diff --git a/package.json b/package.json index 333520e..2654d19 100644 --- a/package.json +++ b/package.json @@ -11,7 +11,8 @@ "lodash.uniqueid": "^4.0.1", "prop-types": "^15.6.1", "react": "^16.2.0", - "react-dom": "^16.2.0" + "react-dom": "^16.2.0", + "react-svg-loader": "^2.1.0" }, "scripts": { "build:watch": "styleguidist server", diff --git a/src/components/Icon/__snapshots__/index.spec.js.snap b/src/components/Icon/__snapshots__/index.spec.js.snap new file mode 100644 index 0000000..e095e33 --- /dev/null +++ b/src/components/Icon/__snapshots__/index.spec.js.snap @@ -0,0 +1,41 @@ +// Jest Snapshot v1, https://goo.gl/fbAQLP + +exports[`Icon component renders 1`] = ` + + + +`; + +exports[`Icon component renders with a tiny icon 1`] = ` + + + +`; + +exports[`Icon component renders with an additional CSS class 1`] = ` + + + +`; + +exports[`Icon component renders with small icon 1`] = ` + + + +`; diff --git a/styleguide/webpackConfig.js b/styleguide/webpackConfig.js index c076fd1..42889ae 100644 --- a/styleguide/webpackConfig.js +++ b/styleguide/webpackConfig.js @@ -26,6 +26,10 @@ module.exports = { test: /\.s?css$/, loader: 'style-loader!css-loader!sass-loader', }, + { + test: /\.svg$/, + loader: 'react-svg-loader', + }, ], }, }; diff --git a/yarn.lock b/yarn.lock index 05a44a4..80547cc 100644 --- a/yarn.lock +++ b/yarn.lock @@ -702,6 +702,10 @@ babel-plugin-jest-hoist@^22.4.1: version "22.4.1" resolved "https://registry.yarnpkg.com/babel-plugin-jest-hoist/-/babel-plugin-jest-hoist-22.4.1.tgz#d712fe5da8b6965f3191dacddbefdbdf4fb66d63" +babel-plugin-react-svg@^2.1.0: + version "2.1.0" + resolved "https://registry.yarnpkg.com/babel-plugin-react-svg/-/babel-plugin-react-svg-2.1.0.tgz#169eeba1a20fa2dee3a71ff38eedd63d08e69487" + babel-plugin-syntax-async-functions@^6.8.0: version "6.13.0" resolved "https://registry.yarnpkg.com/babel-plugin-syntax-async-functions/-/babel-plugin-syntax-async-functions-6.13.0.tgz#cad9cad1191b5ad634bf30ae0872391e0647be95" @@ -714,7 +718,7 @@ babel-plugin-syntax-flow@^6.18.0: version "6.18.0" resolved "https://registry.yarnpkg.com/babel-plugin-syntax-flow/-/babel-plugin-syntax-flow-6.18.0.tgz#4c3ab20a2af26aa20cd25995c398c4eb70310c8d" -babel-plugin-syntax-jsx@^6.3.13, babel-plugin-syntax-jsx@^6.8.0: +babel-plugin-syntax-jsx@^6.18.0, babel-plugin-syntax-jsx@^6.3.13, babel-plugin-syntax-jsx@^6.8.0: version "6.18.0" resolved "https://registry.yarnpkg.com/babel-plugin-syntax-jsx/-/babel-plugin-syntax-jsx-6.18.0.tgz#0af32a9a6e13ca7a3fd5069e62d7b0f58d0d8946" @@ -5024,6 +5028,10 @@ lodash.get@^4.4.2: version "4.4.2" resolved "https://registry.yarnpkg.com/lodash.get/-/lodash.get-4.4.2.tgz#2d177f652fa31e939b4438d5341499dfa3825e99" +lodash.isplainobject@^4.0.6: + version "4.0.6" + resolved "https://registry.yarnpkg.com/lodash.isplainobject/-/lodash.isplainobject-4.0.6.tgz#7c526a52d89b45c45cc690b88163be0497f550cb" + lodash.memoize@^4.1.2: version "4.1.2" resolved "https://registry.yarnpkg.com/lodash.memoize/-/lodash.memoize-4.1.2.tgz#bcc6c49a42a2840ed997f323eada5ecd182e0bfe" @@ -6835,6 +6843,25 @@ react-styleguidist@^6.5.1: webpack-dev-server "^2.9.7" webpack-merge "^4.1.2" +react-svg-core@^2.1.0: + version "2.1.0" + resolved "https://registry.yarnpkg.com/react-svg-core/-/react-svg-core-2.1.0.tgz#3700322af70117c91f83f18febb481128de3cfbb" + dependencies: + babel-core "^6.26.0" + babel-plugin-react-svg "^2.1.0" + babel-plugin-syntax-jsx "^6.18.0" + babel-plugin-transform-object-rest-spread "^6.26.0" + babel-preset-react "^6.24.1" + lodash.isplainobject "^4.0.6" + svgo "^0.7.2" + +react-svg-loader@^2.1.0: + version "2.1.0" + resolved "https://registry.yarnpkg.com/react-svg-loader/-/react-svg-loader-2.1.0.tgz#ba15019413b9b11e2012e86580aea1eecc93677e" + dependencies: + loader-utils "^1.1.0" + react-svg-core "^2.1.0" + react-test-renderer@^16.0.0-0, react-test-renderer@^16.2.0: version "16.2.0" resolved "https://registry.yarnpkg.com/react-test-renderer/-/react-test-renderer-16.2.0.tgz#bddf259a6b8fcd8555f012afc8eacc238872a211" @@ -8179,7 +8206,7 @@ svg-tags@^1.0.0: version "1.0.0" resolved "https://registry.yarnpkg.com/svg-tags/-/svg-tags-1.0.0.tgz#58f71cee3bd519b59d4b2a843b6c7de64ac04764" -svgo@^0.7.0: +svgo@^0.7.0, svgo@^0.7.2: version "0.7.2" resolved "https://registry.yarnpkg.com/svgo/-/svgo-0.7.2.tgz#9f5772413952135c6fefbf40afe6a4faa88b4bb5" dependencies: From 701b2ead23ba62971b1035da2fe9b458694ced4d Mon Sep 17 00:00:00 2001 From: mklucsarits Date: Thu, 9 Aug 2018 10:24:04 -0500 Subject: [PATCH 3/9] Import DS variables --- src/components/Icon/styles.scss | 1 + 1 file changed, 1 insertion(+) diff --git a/src/components/Icon/styles.scss b/src/components/Icon/styles.scss index 3675eb6..86ba19b 100644 --- a/src/components/Icon/styles.scss +++ b/src/components/Icon/styles.scss @@ -1,2 +1,3 @@ +@import "~design-system/dist/scss/wds-variables/index.scss"; @import "~design-system/dist/scss/wds-mixins/index.scss"; @import "~design-system/dist/scss/wds-components/_icons.scss"; From 72c8d775f5909d49a2a72298e2e7870c365bb394 Mon Sep 17 00:00:00 2001 From: mklucsarits Date: Thu, 9 Aug 2018 12:44:05 -0500 Subject: [PATCH 4/9] Add Icon to index exports --- src/index.js | 1 + 1 file changed, 1 insertion(+) diff --git a/src/index.js b/src/index.js index bb0d1d3..3909203 100644 --- a/src/index.js +++ b/src/index.js @@ -11,6 +11,7 @@ export {default as BannerNotification} from './components/BannerNotification'; export {default as BannerNotifications} from './components/BannerNotifications'; // Icons +export {default as Icon} from './components/Icon'; export {default as VideoPlayIcon} from './components/VideoPlayIcon'; // Usefull flow components export {default as ContentWell} from './components/ContentWell'; From 5225108919a17b8fff925fe4f12c9c9c1f37fc64 Mon Sep 17 00:00:00 2001 From: "Bartosz V. Bentkowski" Date: Sun, 12 Aug 2018 12:06:31 -0700 Subject: [PATCH 5/9] Add IconSprite --- components.json | 1 + package.json | 3 +- src/components/BannerNotifications/README.md | 5 +- src/components/Icon/README.md | 7 ++- src/components/Icon/index.js | 54 +++++++------------- src/components/IconSprite/README.md | 1 + src/components/IconSprite/index.js | 11 ++++ src/index.js | 1 + styleguide/index.html | 2 - styleguide/webpackConfig.js | 5 ++ yarn.lock | 7 +++ 11 files changed, 56 insertions(+), 41 deletions(-) create mode 100644 src/components/IconSprite/README.md create mode 100644 src/components/IconSprite/index.js diff --git a/components.json b/components.json index 38d6140..c39839b 100644 --- a/components.json +++ b/components.json @@ -43,6 +43,7 @@ { "name": "Design System Icons", "components": [ + "IconSprite", "Icon", "VideoPlayIcon" ] diff --git a/package.json b/package.json index 2654d19..cf4b51e 100644 --- a/package.json +++ b/package.json @@ -8,8 +8,10 @@ "private": true, "dependencies": { "design-system": "git://github.com/Wikia/design-system.git#12.0.0", + "file-loader": "^1.1.11", "lodash.uniqueid": "^4.0.1", "prop-types": "^15.6.1", + "raw-loader": "^0.5.1", "react": "^16.2.0", "react-dom": "^16.2.0", "react-svg-loader": "^2.1.0" @@ -55,7 +57,6 @@ "identity-obj-proxy": "^3.0.0", "jest": "^22.4.2", "node-sass": "^4.5.3", - "raw-loader": "^0.5.1", "react-styleguidist": "^6.5.1", "react-test-renderer": "^16.2.0", "sass-loader": "^6.0.7", diff --git a/src/components/BannerNotifications/README.md b/src/components/BannerNotifications/README.md index 213c500..d0fe175 100644 --- a/src/components/BannerNotifications/README.md +++ b/src/components/BannerNotifications/README.md @@ -1,6 +1,9 @@ By default it renders nothing: ```js - {}} /> +
+ + {}} /> +
``` But with proper data it can display all the messages: diff --git a/src/components/Icon/README.md b/src/components/Icon/README.md index 39e1b92..32198e4 100644 --- a/src/components/Icon/README.md +++ b/src/components/Icon/README.md @@ -7,7 +7,10 @@ The `name` attribute of the component refers to the icon's DS name. Standard icon: ``` - +
+ + +
``` Small or tiny icon: @@ -20,4 +23,4 @@ Add your own CSS class for styling: ``` -``` \ No newline at end of file +``` diff --git a/src/components/Icon/index.js b/src/components/Icon/index.js index a3587f0..4239b87 100644 --- a/src/components/Icon/index.js +++ b/src/components/Icon/index.js @@ -1,43 +1,27 @@ import React from 'react'; import PropTypes from 'prop-types'; -// Requires svg-sprite-loader -import 'design-system/dist/svg/sprite.svg'; - import './styles.scss'; -class Icon extends React.Component { - constructor(props) { - super(props); - this.getCssClass = this.getCssClass.bind(this); - } - - getCssClass() { - const {className, name} = this.props; - let cssClass = 'wds-icon'; - - if (/-small$/.test(name)) { - cssClass += ' wds-icon-small'; - } else if (/-tiny$/.test(name)) { - cssClass += ' wds-icon-tiny'; - } - - if (className) { - cssClass += ` ${className}`; - } - - return cssClass; - } - - render() { - const {name} = this.props; - return ( - - - - ); - } -} +/** + * A single WDS icon. + * + * **NOTE**: This icon is using `IconSprite` component. + */ +const Icon = ({name, className}) => { + const classes = [ + 'wds-icon', + className, + /-small$/.test(name) ? 'wds-icon-small' : '', + /-tiny$/.test(name) ? 'wds-icon-tiny' : '', + ].filter(c => c).join(' '); + + return ( + + + + ); +}; Icon.propTypes = { /** diff --git a/src/components/IconSprite/README.md b/src/components/IconSprite/README.md new file mode 100644 index 0000000..e649d69 --- /dev/null +++ b/src/components/IconSprite/README.md @@ -0,0 +1 @@ +This component needs to be included once in the app in order to use `` component if there's no other way that the icons are included. diff --git a/src/components/IconSprite/index.js b/src/components/IconSprite/index.js new file mode 100644 index 0000000..36d345e --- /dev/null +++ b/src/components/IconSprite/index.js @@ -0,0 +1,11 @@ +import React from 'react'; +import PropTypes from 'prop-types'; + +import * as sprite from 'design-system/dist/svg/sprite.svg'; + +const IconSprite = () => ( + // eslint-disable-next-line react/no-danger +
+); + +export default IconSprite; diff --git a/src/index.js b/src/index.js index 3909203..2460dce 100644 --- a/src/index.js +++ b/src/index.js @@ -11,6 +11,7 @@ export {default as BannerNotification} from './components/BannerNotification'; export {default as BannerNotifications} from './components/BannerNotifications'; // Icons +export {default as IconSprite} from './components/IconSprite'; export {default as Icon} from './components/Icon'; export {default as VideoPlayIcon} from './components/VideoPlayIcon'; // Usefull flow components diff --git a/styleguide/index.html b/styleguide/index.html index be7dab6..4fca85e 100644 --- a/styleguide/index.html +++ b/styleguide/index.html @@ -8,7 +8,5 @@
- - diff --git a/styleguide/webpackConfig.js b/styleguide/webpackConfig.js index 42889ae..4e885bd 100644 --- a/styleguide/webpackConfig.js +++ b/styleguide/webpackConfig.js @@ -28,8 +28,13 @@ module.exports = { }, { test: /\.svg$/, + exclude: /node_modules/, loader: 'react-svg-loader', }, + { + test: /node_modules\/design-system\/dist\/svg\/sprite\.svg$/, + loader: 'raw-loader', + }, ], }, }; diff --git a/yarn.lock b/yarn.lock index 80547cc..f31a3c3 100644 --- a/yarn.lock +++ b/yarn.lock @@ -3123,6 +3123,13 @@ file-entry-cache@^2.0.0: flat-cache "^1.2.1" object-assign "^4.0.1" +file-loader@^1.1.11: + version "1.1.11" + resolved "https://registry.yarnpkg.com/file-loader/-/file-loader-1.1.11.tgz#6fe886449b0f2a936e43cabaac0cdbfb369506f8" + dependencies: + loader-utils "^1.0.2" + schema-utils "^0.4.5" + filename-regex@^2.0.0: version "2.0.1" resolved "https://registry.yarnpkg.com/filename-regex/-/filename-regex-2.0.1.tgz#c1c4b9bee3e09725ddb106b75c1e301fe2f18b26" From 42ad047741a13185f1090de08b8fccd2f9fbb42c Mon Sep 17 00:00:00 2001 From: "Bartosz V. Bentkowski" Date: Sun, 12 Aug 2018 12:33:37 -0700 Subject: [PATCH 6/9] BannerNotification is using Icon now --- src/components/BannerNotification/index.js | 23 ++++++++++------------ src/components/Icon/README.md | 6 ++++++ src/components/Icon/index.js | 4 ++-- 3 files changed, 18 insertions(+), 15 deletions(-) diff --git a/src/components/BannerNotification/index.js b/src/components/BannerNotification/index.js index f1c5f06..2254370 100644 --- a/src/components/BannerNotification/index.js +++ b/src/components/BannerNotification/index.js @@ -1,17 +1,20 @@ import React from 'react'; import PropTypes from 'prop-types'; + +import Icon from '../Icon'; + import './styles.scss'; -function getIcon(type) { +function getIconName(type) { switch (type) { case ('alert'): - return '#wds-icons-error-small'; + return 'error-small'; case ('warning'): - return '#wds-icons-alert-small'; + return 'alert-small'; case ('success'): - return '#wds-icons-checkmark-circle-small'; + return 'checkmark-circle-small'; default: - return '#wds-icons-flag-small'; + return 'flag-small'; } } @@ -34,16 +37,10 @@ function getClassName(type) { const BannerNotification = ({className, type, text, onClose}) => (
- - - +
{text} - {onClose && ( - - - - )} + {onClose && }
); diff --git a/src/components/Icon/README.md b/src/components/Icon/README.md index 32198e4..0b048d6 100644 --- a/src/components/Icon/README.md +++ b/src/components/Icon/README.md @@ -24,3 +24,9 @@ Add your own CSS class for styling: ``` ``` + +Other props are just passed to the SVG: + +``` + alert('click!')} style={{cursor: 'pointer'}}/> +``` diff --git a/src/components/Icon/index.js b/src/components/Icon/index.js index 4239b87..5d71171 100644 --- a/src/components/Icon/index.js +++ b/src/components/Icon/index.js @@ -8,7 +8,7 @@ import './styles.scss'; * * **NOTE**: This icon is using `IconSprite` component. */ -const Icon = ({name, className}) => { +const Icon = ({name, className, ...props}) => { const classes = [ 'wds-icon', className, @@ -17,7 +17,7 @@ const Icon = ({name, className}) => { ].filter(c => c).join(' '); return ( - + ); From 63defa87b773cedce005eb819dd9153b95c2ec8b Mon Sep 17 00:00:00 2001 From: "Bartosz V. Bentkowski" Date: Sun, 12 Aug 2018 12:44:12 -0700 Subject: [PATCH 7/9] Tests --- .../__snapshots__/index.spec.js.snap | 20 ++++--------------- .../BannerNotification/index.spec.js | 9 ++++++--- .../__snapshots__/index.spec.js.snap | 17 ++++------------ .../BannerNotifications/index.spec.js | 2 +- 4 files changed, 15 insertions(+), 33 deletions(-) diff --git a/src/components/BannerNotification/__snapshots__/index.spec.js.snap b/src/components/BannerNotification/__snapshots__/index.spec.js.snap index be601bb..dc76d30 100644 --- a/src/components/BannerNotification/__snapshots__/index.spec.js.snap +++ b/src/components/BannerNotification/__snapshots__/index.spec.js.snap @@ -12,7 +12,6 @@ exports[`BannerNotification renders correctly 1`] = ` >
@@ -22,12 +21,11 @@ exports[`BannerNotification renders correctly 1`] = ` lorem ipsum - messge @@ -45,7 +43,6 @@ exports[`BannerNotification renders correctly 2`] = ` > @@ -55,12 +52,11 @@ exports[`BannerNotification renders correctly 2`] = ` lorem ipsum - success @@ -78,7 +74,6 @@ exports[`BannerNotification renders correctly 3`] = ` > @@ -88,12 +83,11 @@ exports[`BannerNotification renders correctly 3`] = ` lorem ipsum - warning @@ -111,7 +105,6 @@ exports[`BannerNotification renders correctly 4`] = ` > @@ -121,12 +114,11 @@ exports[`BannerNotification renders correctly 4`] = ` lorem ipsum - alert @@ -144,7 +136,6 @@ exports[`BannerNotification renders correctly without action 1`] = ` > @@ -168,7 +159,6 @@ exports[`BannerNotification renders correctly without action 2`] = ` > @@ -192,7 +182,6 @@ exports[`BannerNotification renders correctly without action 3`] = ` > @@ -216,7 +205,6 @@ exports[`BannerNotification renders correctly without action 4`] = ` > diff --git a/src/components/BannerNotification/index.spec.js b/src/components/BannerNotification/index.spec.js index d85951e..0b917e9 100644 --- a/src/components/BannerNotification/index.spec.js +++ b/src/components/BannerNotification/index.spec.js @@ -1,6 +1,9 @@ import React from 'react'; import renderer from 'react-test-renderer'; -import {shallow} from 'enzyme'; +import { + shallow, + mount +} from 'enzyme'; import sinon from 'sinon'; import BannerNotification from './index'; @@ -54,11 +57,11 @@ test('BannerNotification renders correctly without action', () => { test('BannerNotification onClose hander is invoked', () => { const mockOnClick = sinon.spy(); - const wrapper = shallow( + const wrapper = mount( ); - wrapper.find('.wds-banner-notification__close').simulate('click'); + wrapper.find('.wds-banner-notification__close').at(0).simulate('click'); expect(mockOnClick.calledOnce).toBe(true); }); diff --git a/src/components/BannerNotifications/__snapshots__/index.spec.js.snap b/src/components/BannerNotifications/__snapshots__/index.spec.js.snap index 6ddb13c..1578b77 100644 --- a/src/components/BannerNotifications/__snapshots__/index.spec.js.snap +++ b/src/components/BannerNotifications/__snapshots__/index.spec.js.snap @@ -17,7 +17,6 @@ exports[`BannerNotifications renders correctly 2`] = ` > @@ -27,12 +26,11 @@ exports[`BannerNotifications renders correctly 2`] = ` this is a single message @@ -54,7 +52,6 @@ exports[`BannerNotifications renders correctly 3`] = ` > @@ -64,12 +61,11 @@ exports[`BannerNotifications renders correctly 3`] = ` this is a message @@ -84,7 +80,6 @@ exports[`BannerNotifications renders correctly 3`] = ` > @@ -94,12 +89,11 @@ exports[`BannerNotifications renders correctly 3`] = ` this is a success @@ -114,7 +108,6 @@ exports[`BannerNotifications renders correctly 3`] = ` > @@ -124,12 +117,11 @@ exports[`BannerNotifications renders correctly 3`] = ` this is a warning @@ -144,7 +136,6 @@ exports[`BannerNotifications renders correctly 3`] = ` > diff --git a/src/components/BannerNotifications/index.spec.js b/src/components/BannerNotifications/index.spec.js index e4c8d70..bdc1a3c 100644 --- a/src/components/BannerNotifications/index.spec.js +++ b/src/components/BannerNotifications/index.spec.js @@ -61,6 +61,6 @@ test('BannerNotifications onClose hander is invoked', () => { ); - wrapper.find('.wds-banner-notification__close').simulate('click'); + wrapper.find('.wds-banner-notification__close').at(0).simulate('click'); expect(mockOnClick.withArgs('1').calledOnce).toBe(true); }); From 2f3de1c071a3e89048c0a6e3d751162b28594be9 Mon Sep 17 00:00:00 2001 From: "Bartosz V. Bentkowski" Date: Sun, 12 Aug 2018 12:48:15 -0700 Subject: [PATCH 8/9] Cleanup --- package.json | 6 +-- .../__snapshots__/index.spec.js.snap | 11 ++++++ src/components/IconSprite/index.spec.js | 9 +++++ styleguide/webpackConfig.js | 5 --- yarn.lock | 38 +------------------ 5 files changed, 24 insertions(+), 45 deletions(-) create mode 100644 src/components/IconSprite/__snapshots__/index.spec.js.snap create mode 100644 src/components/IconSprite/index.spec.js diff --git a/package.json b/package.json index cf4b51e..333520e 100644 --- a/package.json +++ b/package.json @@ -8,13 +8,10 @@ "private": true, "dependencies": { "design-system": "git://github.com/Wikia/design-system.git#12.0.0", - "file-loader": "^1.1.11", "lodash.uniqueid": "^4.0.1", "prop-types": "^15.6.1", - "raw-loader": "^0.5.1", "react": "^16.2.0", - "react-dom": "^16.2.0", - "react-svg-loader": "^2.1.0" + "react-dom": "^16.2.0" }, "scripts": { "build:watch": "styleguidist server", @@ -57,6 +54,7 @@ "identity-obj-proxy": "^3.0.0", "jest": "^22.4.2", "node-sass": "^4.5.3", + "raw-loader": "^0.5.1", "react-styleguidist": "^6.5.1", "react-test-renderer": "^16.2.0", "sass-loader": "^6.0.7", diff --git a/src/components/IconSprite/__snapshots__/index.spec.js.snap b/src/components/IconSprite/__snapshots__/index.spec.js.snap new file mode 100644 index 0000000..e1bec1a --- /dev/null +++ b/src/components/IconSprite/__snapshots__/index.spec.js.snap @@ -0,0 +1,11 @@ +// Jest Snapshot v1, https://goo.gl/fbAQLP + +exports[`IconSprite component renders 1`] = ` +
+`; diff --git a/src/components/IconSprite/index.spec.js b/src/components/IconSprite/index.spec.js new file mode 100644 index 0000000..bd9cb88 --- /dev/null +++ b/src/components/IconSprite/index.spec.js @@ -0,0 +1,9 @@ +import React from 'react'; +import renderer from 'react-test-renderer'; + +import IconSprite from './index'; + +test('IconSprite component renders', () => { + const component = renderer.create(); + expect(component.toJSON()).toMatchSnapshot(); +}); diff --git a/styleguide/webpackConfig.js b/styleguide/webpackConfig.js index 4e885bd..fb3c159 100644 --- a/styleguide/webpackConfig.js +++ b/styleguide/webpackConfig.js @@ -26,11 +26,6 @@ module.exports = { test: /\.s?css$/, loader: 'style-loader!css-loader!sass-loader', }, - { - test: /\.svg$/, - exclude: /node_modules/, - loader: 'react-svg-loader', - }, { test: /node_modules\/design-system\/dist\/svg\/sprite\.svg$/, loader: 'raw-loader', diff --git a/yarn.lock b/yarn.lock index f31a3c3..05a44a4 100644 --- a/yarn.lock +++ b/yarn.lock @@ -702,10 +702,6 @@ babel-plugin-jest-hoist@^22.4.1: version "22.4.1" resolved "https://registry.yarnpkg.com/babel-plugin-jest-hoist/-/babel-plugin-jest-hoist-22.4.1.tgz#d712fe5da8b6965f3191dacddbefdbdf4fb66d63" -babel-plugin-react-svg@^2.1.0: - version "2.1.0" - resolved "https://registry.yarnpkg.com/babel-plugin-react-svg/-/babel-plugin-react-svg-2.1.0.tgz#169eeba1a20fa2dee3a71ff38eedd63d08e69487" - babel-plugin-syntax-async-functions@^6.8.0: version "6.13.0" resolved "https://registry.yarnpkg.com/babel-plugin-syntax-async-functions/-/babel-plugin-syntax-async-functions-6.13.0.tgz#cad9cad1191b5ad634bf30ae0872391e0647be95" @@ -718,7 +714,7 @@ babel-plugin-syntax-flow@^6.18.0: version "6.18.0" resolved "https://registry.yarnpkg.com/babel-plugin-syntax-flow/-/babel-plugin-syntax-flow-6.18.0.tgz#4c3ab20a2af26aa20cd25995c398c4eb70310c8d" -babel-plugin-syntax-jsx@^6.18.0, babel-plugin-syntax-jsx@^6.3.13, babel-plugin-syntax-jsx@^6.8.0: +babel-plugin-syntax-jsx@^6.3.13, babel-plugin-syntax-jsx@^6.8.0: version "6.18.0" resolved "https://registry.yarnpkg.com/babel-plugin-syntax-jsx/-/babel-plugin-syntax-jsx-6.18.0.tgz#0af32a9a6e13ca7a3fd5069e62d7b0f58d0d8946" @@ -3123,13 +3119,6 @@ file-entry-cache@^2.0.0: flat-cache "^1.2.1" object-assign "^4.0.1" -file-loader@^1.1.11: - version "1.1.11" - resolved "https://registry.yarnpkg.com/file-loader/-/file-loader-1.1.11.tgz#6fe886449b0f2a936e43cabaac0cdbfb369506f8" - dependencies: - loader-utils "^1.0.2" - schema-utils "^0.4.5" - filename-regex@^2.0.0: version "2.0.1" resolved "https://registry.yarnpkg.com/filename-regex/-/filename-regex-2.0.1.tgz#c1c4b9bee3e09725ddb106b75c1e301fe2f18b26" @@ -5035,10 +5024,6 @@ lodash.get@^4.4.2: version "4.4.2" resolved "https://registry.yarnpkg.com/lodash.get/-/lodash.get-4.4.2.tgz#2d177f652fa31e939b4438d5341499dfa3825e99" -lodash.isplainobject@^4.0.6: - version "4.0.6" - resolved "https://registry.yarnpkg.com/lodash.isplainobject/-/lodash.isplainobject-4.0.6.tgz#7c526a52d89b45c45cc690b88163be0497f550cb" - lodash.memoize@^4.1.2: version "4.1.2" resolved "https://registry.yarnpkg.com/lodash.memoize/-/lodash.memoize-4.1.2.tgz#bcc6c49a42a2840ed997f323eada5ecd182e0bfe" @@ -6850,25 +6835,6 @@ react-styleguidist@^6.5.1: webpack-dev-server "^2.9.7" webpack-merge "^4.1.2" -react-svg-core@^2.1.0: - version "2.1.0" - resolved "https://registry.yarnpkg.com/react-svg-core/-/react-svg-core-2.1.0.tgz#3700322af70117c91f83f18febb481128de3cfbb" - dependencies: - babel-core "^6.26.0" - babel-plugin-react-svg "^2.1.0" - babel-plugin-syntax-jsx "^6.18.0" - babel-plugin-transform-object-rest-spread "^6.26.0" - babel-preset-react "^6.24.1" - lodash.isplainobject "^4.0.6" - svgo "^0.7.2" - -react-svg-loader@^2.1.0: - version "2.1.0" - resolved "https://registry.yarnpkg.com/react-svg-loader/-/react-svg-loader-2.1.0.tgz#ba15019413b9b11e2012e86580aea1eecc93677e" - dependencies: - loader-utils "^1.1.0" - react-svg-core "^2.1.0" - react-test-renderer@^16.0.0-0, react-test-renderer@^16.2.0: version "16.2.0" resolved "https://registry.yarnpkg.com/react-test-renderer/-/react-test-renderer-16.2.0.tgz#bddf259a6b8fcd8555f012afc8eacc238872a211" @@ -8213,7 +8179,7 @@ svg-tags@^1.0.0: version "1.0.0" resolved "https://registry.yarnpkg.com/svg-tags/-/svg-tags-1.0.0.tgz#58f71cee3bd519b59d4b2a843b6c7de64ac04764" -svgo@^0.7.0, svgo@^0.7.2: +svgo@^0.7.0: version "0.7.2" resolved "https://registry.yarnpkg.com/svgo/-/svgo-0.7.2.tgz#9f5772413952135c6fefbf40afe6a4faa88b4bb5" dependencies: From d7189ee2d2bd6289b9193df37cc644b14aaaa912 Mon Sep 17 00:00:00 2001 From: "Bartosz V. Bentkowski" Date: Mon, 13 Aug 2018 11:19:51 -0700 Subject: [PATCH 9/9] Fix --- src/components/BannerNotification/README.md | 12 ++++-------- src/components/BannerNotifications/README.md | 8 +++----- 2 files changed, 7 insertions(+), 13 deletions(-) diff --git a/src/components/BannerNotification/README.md b/src/components/BannerNotification/README.md index 87387ac..2a48310 100644 --- a/src/components/BannerNotification/README.md +++ b/src/components/BannerNotification/README.md @@ -1,15 +1,11 @@ By default its rendered without close button: ```js -
- - -
+{ /* add sprite so we can see icons in this example */ } + ``` But it can be rendered with close buttton: ```js -
- - alert('Click')} /> -
+{ /* add sprite so we can see icons in this example */ } + alert('Click')} /> ``` diff --git a/src/components/BannerNotifications/README.md b/src/components/BannerNotifications/README.md index b28a3e7..4151c19 100644 --- a/src/components/BannerNotifications/README.md +++ b/src/components/BannerNotifications/README.md @@ -1,9 +1,7 @@ By default it renders nothing: ```js -
- - {}} /> -
+{ /* add sprite so we can see icons in this example */ } + {}} /> ``` But with proper data it can display all the messages: @@ -31,7 +29,7 @@ const messages4 = [ id: '4', }, ];
- + { /* add sprite so we can see icons in this example */ } {}} />
```