Icon component 2nd attempt

.gitignore

@@ -59,3 +59,6 @@ typings/
 
 # IDEA
 .idea/
+
+# Miscellaneous cache files
+.DS_Store

components.json

@@ -43,6 +43,8 @@
   {
     "name": "Design System Icons",
     "components": [
+      "IconSprite",
+      "Icon",
       "VideoPlayIcon"
     ]
   },

jest.config.js

@@ -1,6 +1,7 @@
 module.exports = {
   moduleNameMapper: {
     '\\.(s?css)$': 'identity-obj-proxy',
+    '\\.svg$': 'identity-obj-proxy',
   },
   testURL: 'http://localhost',
   setupTestFrameworkScriptFile: '<rootDir>/jest.setup.js',

src/components/BannerNotification/README.md

@@ -1,9 +1,11 @@
 By default its rendered without close button:
 ```js
+<IconSprite />{ /* add sprite so we can see icons in this example */ }
 <BannerNotification type={'message'} text={'lorem ipsum - messge'} />
 ```
 
 But it can be rendered with close buttton:
 ```js
+<IconSprite />{ /* add sprite so we can see icons in this example */ }
 <BannerNotification type={'alert'} text={'lorem ipsum - alert'} onClose={() => alert('Click')} />
 ```

src/components/BannerNotification/__snapshots__/index.spec.js.snap

@@ -12,7 +12,6 @@ exports[`BannerNotification renders correctly 1`] = `
     >
       <use
         xlinkHref="#wds-icons-flag-small"
-        xmlnsXlink="http://www.w3.org/1999/xlink"
       />
     </svg>
   </div>
@@ -22,12 +21,11 @@ exports[`BannerNotification renders correctly 1`] = `
     lorem ipsum - messge
   </span>
   <svg
-    className="wds-icon wds-icon-tiny wds-banner-notification__close"
+    className="wds-icon wds-banner-notification__close wds-icon-tiny"
     onClick={[Function]}
   >
     <use
       xlinkHref="#wds-icons-cross-tiny"
-      xmlnsXlink="http://www.w3.org/1999/xlink"
     />
   </svg>
 </div>
@@ -45,7 +43,6 @@ exports[`BannerNotification renders correctly 2`] = `
     >
       <use
         xlinkHref="#wds-icons-checkmark-circle-small"
-        xmlnsXlink="http://www.w3.org/1999/xlink"
       />
     </svg>
   </div>
@@ -55,12 +52,11 @@ exports[`BannerNotification renders correctly 2`] = `
     lorem ipsum - success
   </span>
   <svg
-    className="wds-icon wds-icon-tiny wds-banner-notification__close"
+    className="wds-icon wds-banner-notification__close wds-icon-tiny"
     onClick={[Function]}
   >
     <use
       xlinkHref="#wds-icons-cross-tiny"
-      xmlnsXlink="http://www.w3.org/1999/xlink"
     />
   </svg>
 </div>
@@ -78,7 +74,6 @@ exports[`BannerNotification renders correctly 3`] = `
     >
       <use
         xlinkHref="#wds-icons-alert-small"
-        xmlnsXlink="http://www.w3.org/1999/xlink"
       />
     </svg>
   </div>
@@ -88,12 +83,11 @@ exports[`BannerNotification renders correctly 3`] = `
     lorem ipsum - warning
   </span>
   <svg
-    className="wds-icon wds-icon-tiny wds-banner-notification__close"
+    className="wds-icon wds-banner-notification__close wds-icon-tiny"
     onClick={[Function]}
   >
     <use
       xlinkHref="#wds-icons-cross-tiny"
-      xmlnsXlink="http://www.w3.org/1999/xlink"
     />
   </svg>
 </div>
@@ -111,7 +105,6 @@ exports[`BannerNotification renders correctly 4`] = `
     >
       <use
         xlinkHref="#wds-icons-error-small"
-        xmlnsXlink="http://www.w3.org/1999/xlink"
       />
     </svg>
   </div>
@@ -121,12 +114,11 @@ exports[`BannerNotification renders correctly 4`] = `
     lorem ipsum - alert
   </span>
   <svg
-    className="wds-icon wds-icon-tiny wds-banner-notification__close"
+    className="wds-icon wds-banner-notification__close wds-icon-tiny"
     onClick={[Function]}
   >
     <use
       xlinkHref="#wds-icons-cross-tiny"
-      xmlnsXlink="http://www.w3.org/1999/xlink"
     />
   </svg>
 </div>
@@ -144,7 +136,6 @@ exports[`BannerNotification renders correctly without action 1`] = `
     >
       <use
         xlinkHref="#wds-icons-flag-small"
-        xmlnsXlink="http://www.w3.org/1999/xlink"
       />
     </svg>
   </div>
@@ -168,7 +159,6 @@ exports[`BannerNotification renders correctly without action 2`] = `
     >
       <use
         xlinkHref="#wds-icons-checkmark-circle-small"
-        xmlnsXlink="http://www.w3.org/1999/xlink"
       />
     </svg>
   </div>
@@ -192,7 +182,6 @@ exports[`BannerNotification renders correctly without action 3`] = `
     >
       <use
         xlinkHref="#wds-icons-alert-small"
-        xmlnsXlink="http://www.w3.org/1999/xlink"
       />
     </svg>
   </div>
@@ -216,7 +205,6 @@ exports[`BannerNotification renders correctly without action 4`] = `
     >
       <use
         xlinkHref="#wds-icons-error-small"
-        xmlnsXlink="http://www.w3.org/1999/xlink"
       />
     </svg>
   </div>

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}) => (
   <div className={`wds-banner-notification ${getClassName(type)} ${className}`}>
     <div className="wds-banner-notification__icon">
-      <svg className="wds-icon wds-icon-small">
-        <use xmlnsXlink="http://www.w3.org/1999/xlink" xlinkHref={getIcon(type)} />
-      </svg>
+      <Icon name={getIconName(type)} />
     </div>
     <span className="wds-banner-notification__text">{text}</span>
-    {onClose && (
-      <svg className="wds-icon wds-icon-tiny wds-banner-notification__close" onClick={onClose}>
-        <use xmlnsXlink="http://www.w3.org/1999/xlink" xlinkHref="#wds-icons-cross-tiny" />
-      </svg>
-    )}
+    {onClose && <Icon name="cross-tiny" className="wds-banner-notification__close" onClick={onClose} />}
   </div>
 );
 

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(
     <BannerNotification type={'message'} text={'lorem ipsum - messge'} onClose={mockOnClick} />
   );
 
-  wrapper.find('.wds-banner-notification__close').simulate('click');
+  wrapper.find('.wds-banner-notification__close').at(0).simulate('click');
 
   expect(mockOnClick.calledOnce).toBe(true);
 });

src/components/BannerNotifications/README.md

@@ -1,5 +1,6 @@
 By default it renders nothing:
 ```js
+<IconSprite />{ /* add sprite so we can see icons in this example */ }
 <BannerNotifications messages={[]} onClick={() => {}} />
 ```
 
@@ -27,5 +28,8 @@ const messages4 = [
     text: 'this is an alert',
     id: '4',
   },
-];<BannerNotifications messages={messages4} onClose={() => {}} />
+];<div>
+	<IconSprite />{ /* add sprite so we can see icons in this example */ }
+	<BannerNotifications messages={messages4} onClose={() => {}} />
+</div>
 ```

src/components/BannerNotifications/__snapshots__/index.spec.js.snap

@@ -17,7 +17,6 @@ exports[`BannerNotifications renders correctly 2`] = `
       >
         <use
           xlinkHref="#wds-icons-flag-small"
-          xmlnsXlink="http://www.w3.org/1999/xlink"
         />
       </svg>
     </div>
@@ -27,12 +26,11 @@ exports[`BannerNotifications renders correctly 2`] = `
       this is a single message
     </span>
     <svg
-      className="wds-icon wds-icon-tiny wds-banner-notification__close"
+      className="wds-icon wds-banner-notification__close wds-icon-tiny"
       onClick={[Function]}
     >
       <use
         xlinkHref="#wds-icons-cross-tiny"
-        xmlnsXlink="http://www.w3.org/1999/xlink"
       />
     </svg>
   </div>
@@ -54,7 +52,6 @@ exports[`BannerNotifications renders correctly 3`] = `
       >
         <use
           xlinkHref="#wds-icons-flag-small"
-          xmlnsXlink="http://www.w3.org/1999/xlink"
         />
       </svg>
     </div>
@@ -64,12 +61,11 @@ exports[`BannerNotifications renders correctly 3`] = `
       this is a message
     </span>
     <svg
-      className="wds-icon wds-icon-tiny wds-banner-notification__close"
+      className="wds-icon wds-banner-notification__close wds-icon-tiny"
       onClick={[Function]}
     >
       <use
         xlinkHref="#wds-icons-cross-tiny"
-        xmlnsXlink="http://www.w3.org/1999/xlink"
       />
     </svg>
   </div>
@@ -84,7 +80,6 @@ exports[`BannerNotifications renders correctly 3`] = `
       >
         <use
           xlinkHref="#wds-icons-checkmark-circle-small"
-          xmlnsXlink="http://www.w3.org/1999/xlink"
         />
       </svg>
     </div>
@@ -94,12 +89,11 @@ exports[`BannerNotifications renders correctly 3`] = `
       this is a success
     </span>
     <svg
-      className="wds-icon wds-icon-tiny wds-banner-notification__close"
+      className="wds-icon wds-banner-notification__close wds-icon-tiny"
       onClick={[Function]}
     >
       <use
         xlinkHref="#wds-icons-cross-tiny"
-        xmlnsXlink="http://www.w3.org/1999/xlink"
       />
     </svg>
   </div>
@@ -114,7 +108,6 @@ exports[`BannerNotifications renders correctly 3`] = `
       >
         <use
           xlinkHref="#wds-icons-alert-small"
-          xmlnsXlink="http://www.w3.org/1999/xlink"
         />
       </svg>
     </div>
@@ -124,12 +117,11 @@ exports[`BannerNotifications renders correctly 3`] = `
       this is a warning
     </span>
     <svg
-      className="wds-icon wds-icon-tiny wds-banner-notification__close"
+      className="wds-icon wds-banner-notification__close wds-icon-tiny"
       onClick={[Function]}
     >
       <use
         xlinkHref="#wds-icons-cross-tiny"
-        xmlnsXlink="http://www.w3.org/1999/xlink"
       />
     </svg>
   </div>
@@ -144,7 +136,6 @@ exports[`BannerNotifications renders correctly 3`] = `
       >
         <use
           xlinkHref="#wds-icons-error-small"
-          xmlnsXlink="http://www.w3.org/1999/xlink"
         />
       </svg>
     </div>

src/components/BannerNotifications/index.spec.js

@@ -61,6 +61,6 @@ test('BannerNotifications onClose hander is invoked', () => {
     <BannerNotifications messages={messages1} onClose={mockOnClick} />
   );
 
-  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);
 });

src/components/Icon/README.md

@@ -0,0 +1,32 @@
+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:
+
+```
+<div>
+	<IconSprite />
+	<Icon name="menu" />
+</div>
+```
+
+Small or tiny icon:
+
+```
+<Icon name="cross-tiny" />
+```
+
+Add your own CSS class for styling:
+
+```
+<Icon name="magnifying-glass" className="search-icon" />
+```
+
+Other props are just passed to the SVG:
+
+```
+<Icon name="error" onClick={() => alert('click!')} style={{cursor: 'pointer'}}/>
+```