Merge pull request #25 from VictorCazanave/dev-1.3.0

v1.2.0 to v1.3.0

.eslintignore

@@ -1 +1,2 @@
 README.md
+jest.config.js

.gitignore

@@ -1,6 +1,6 @@
 .DS_Store
+.vscode
 node_modules
 lib
 dist
 coverage
-.vscode

CHANGELOG.md

@@ -3,6 +3,15 @@ All notable changes to this project will be documented in this file.
 
 The format is based on [Keep a Changelog](http://keepachangelog.com/en/1.0.0/) and this project adheres to [Semantic Versioning](http://semver.org/spec/v2.0.0.html).
 
+## [1.3.0]
+### Added
+- Allow function locationClassName prop of SVGMap, CheckboxSVGMap and RadioSVGMap components
+
+### Changed
+- Update examples
+- Externalize Jest config
+- Update Jest config
+
 ## [1.2.0]
 ### Added
 - Create CheckboxSVGMap and RadioSVGMap components

README.md

@@ -122,8 +122,8 @@ ReactDOM.render(
 | map | object | **required** | Describe SVG map to display. See [maps section](#maps) for more details. |
 | className | string | `'svg-map'` | CSS class of `<svg>`. |
 | role | string | `'none'` | ARIA role of `<svg>`. |
-| locationClassName | string or function | `'svg-map__location'` | CSS class of each `<path>`. |
-| locationTabIndex | string or function | `'0'` | Tabindex each `<path>`. |
+| locationClassName | string or function | `'svg-map__location'` | CSS class of each `<path>`. The function parameters are the location object and the location index. |
+| locationTabIndex | string or function | `'0'` | Tabindex each `<path>`. The function parameters are the location object and the location index. |
 | locationRole | string | `'none'` | ARIA role of each `<path>`. |
 | onLocationMouseOver | function |  | Invoked when the user puts the mouse over a location. |
 | onLocationMouseOut | function |  | Invoked when the user puts the mouse out of a location. |
@@ -136,14 +136,13 @@ ReactDOM.render(
 | tabIndex | string | `'0'` | **DEPRECATED:** Although this property still works, it has been replaced by `locationTabIndex` and will be removed in next major version. |
 | type | string | `'none'` | **DEPRECATED:** Although this property still works, it has been replaced by `locationRole` and will be removed in next major version. |
 
-
 ### CheckboxSVGMap
 
 | Prop | Type | Default | Description |
 | ---- | ---- | ------- | ----------- |
 | map | object | **required** | Describe SVG map to display. See [maps section](#maps) for more details. |
 | className | string | `'svg-map'` | CSS class of `<svg>`. |
-| locationClassName | string | `'svg-map__location'` | CSS class of each `<path>`. |
+| locationClassName | string or function | `'svg-map__location'` | CSS class of each `<path>`. The function parameters are the location object and the location index. |
 | onChange | function |  | Invoked when the user selects/deselects a location. The list of selected locations is passed as parameter. |
 | onLocationMouseOver | function |  | Invoked when the user puts the mouse over a location. |
 | onLocationMouseOut | function |  | Invoked when the user puts the mouse out of a location. |
@@ -157,7 +156,7 @@ ReactDOM.render(
 | ---- | ---- | ------- | ----------- |
 | map | object | **required** | Describe SVG map to display. See [maps section](#maps) for more details. |
 | className | string | `'svg-map'` | CSS class of `<svg>`. |
-| locationClassName | string | `'svg-map__location'` | CSS class of each `<path>`. |
+| locationClassName | string or function | `'svg-map__location'` | CSS class of each `<path>`. The function parameters are the location object and the location index. |
 | onChange | function |  | Invoked when the user selects a location. The selected location is passed as parameter. |
 | onLocationMouseOver | function |  | Invoked when the user puts the mouse over a location. |
 | onLocationMouseOut | function |  | Invoked when the user puts the mouse out of a location. |
@@ -327,8 +326,8 @@ You can modify existing maps or create your own.
 #### Modify a map
 
 1. Import the map to modify.
-2. Create a new object from this map.
-3. Pass this new object as `map` prop of `<SVGMap />` component.
+1. Create a new object from this map.
+1. Pass this new object as `map` prop of `<SVGMap />` component.
 
 ```javascript
 import React from 'react';

__tests__/__snapshots__/svg-map.test.js.snap

@@ -2248,7 +2248,52 @@ exports[`SVGMap component Maps displays map of Utah 1`] = `
 </svg>
 `;
 
-exports[`SVGMap component Properties displays heat map with custom location css 1`] = `
+exports[`SVGMap component Properties displays map with custom function location props 1`] = `
+<svg
+  aria-label="label"
+  className="svg-map"
+  role="none"
+  viewBox="viewBox"
+  xmlns="http://www.w3.org/2000/svg"
+>
+  <path
+    aria-checked={undefined}
+    aria-label="name0"
+    className="locationClassName-0"
+    d="path0"
+    id="id0"
+    name="name0"
+    onBlur={undefined}
+    onClick={undefined}
+    onFocus={undefined}
+    onKeyDown={undefined}
+    onMouseMove={undefined}
+    onMouseOut={undefined}
+    onMouseOver={undefined}
+    role="none"
+    tabIndex="locationTabIndex-0"
+  />
+  <path
+    aria-checked={undefined}
+    aria-label="name1"
+    className="locationClassName-1"
+    d="path1"
+    id="id1"
+    name="name1"
+    onBlur={undefined}
+    onClick={undefined}
+    onFocus={undefined}
+    onKeyDown={undefined}
+    onMouseMove={undefined}
+    onMouseOut={undefined}
+    onMouseOver={undefined}
+    role="none"
+    tabIndex="locationTabIndex-1"
+  />
+</svg>
+`;
+
+exports[`SVGMap component Properties displays map with custom props 1`] = `
 <svg
   aria-label="label"
   className="className"
@@ -2258,11 +2303,11 @@ exports[`SVGMap component Properties displays heat map with custom location css
 >
   <path
     aria-checked="isLocationSelected"
-    aria-label="name"
-    className="svg-map__location heat0"
-    d="path"
-    id="id"
-    name="name"
+    aria-label="name0"
+    className="locationClassName"
+    d="path0"
+    id="id0"
+    name="name0"
     onBlur={[Function]}
     onClick={[Function]}
     onFocus={[Function]}
@@ -2273,24 +2318,13 @@ exports[`SVGMap component Properties displays heat map with custom location css
     role="locationRole"
     tabIndex="locationTabIndex"
   />
-</svg>
-`;
-
-exports[`SVGMap component Properties displays map with custom props 1`] = `
-<svg
-  aria-label="label"
-  className="className"
-  role="role"
-  viewBox="viewBox"
-  xmlns="http://www.w3.org/2000/svg"
->
   <path
     aria-checked="isLocationSelected"
-    aria-label="name"
+    aria-label="name1"
     className="locationClassName"
-    d="path"
-    id="id"
-    name="name"
+    d="path1"
+    id="id1"
+    name="name1"
     onBlur={[Function]}
     onClick={[Function]}
     onFocus={[Function]}
@@ -2314,11 +2348,28 @@ exports[`SVGMap component Properties displays map with default props 1`] = `
 >
   <path
     aria-checked={undefined}
-    aria-label="name"
+    aria-label="name0"
     className="svg-map__location"
-    d="path"
-    id="id"
-    name="name"
+    d="path0"
+    id="id0"
+    name="name0"
+    onBlur={undefined}
+    onClick={undefined}
+    onFocus={undefined}
+    onKeyDown={undefined}
+    onMouseMove={undefined}
+    onMouseOut={undefined}
+    onMouseOver={undefined}
+    role="none"
+    tabIndex="0"
+  />
+  <path
+    aria-checked={undefined}
+    aria-label="name1"
+    className="svg-map__location"
+    d="path1"
+    id="id1"
+    name="name1"
     onBlur={undefined}
     onClick={undefined}
     onFocus={undefined}

__tests__/checkbox-svg-map.test.js

@@ -11,6 +11,7 @@ describe('CheckboxSVGMap component', () => {
 	let location = null;
 
 	beforeEach(() => {
+		// TODO: Use fake map to simplify tests?
 		wrapper = mount(<CheckboxSVGMap map={Australia} onChange={handleOnChange} />);
 		location = wrapper.find(locationSelector);
 	});

__tests__/radio-svg-map.test.js

@@ -21,6 +21,7 @@ describe('RadioSVGMap component', () => {
 	let nextLocation = null;
 
 	beforeEach(() => {
+		// TODO: Use fake map to simplify tests?
 		wrapper = mount(<RadioSVGMap map={Australia} onChange={handleOnChange} />);
 		location = wrapper.find(locationSelector);
 		previousLocation = wrapper.find(previousLocationSelector);
@@ -84,7 +85,6 @@ describe('RadioSVGMap component', () => {
 		});
 	});
 
-	// TODO: Add tests for first/last location and right/left arrow
 	describe('Keyboard navigation', () => {
 		test('selects focused unselected location when hitting spacebar', () => {
 			expect(location.props()['aria-checked']).toBeFalsy();

__tests__/svg-map.test.js

@@ -8,9 +8,14 @@ describe('SVGMap component', () => {
 			label: 'label',
 			viewBox: 'viewBox',
 			locations: [{
-				name: 'name',
-				id: 'id',
-				path: 'path'
+				name: 'name0',
+				id: 'id0',
+				path: 'path0'
+			},
+			{
+				name: 'name1',
+				id: 'id1',
+				path: 'path1'
 			}]
 		};
 
@@ -46,25 +51,13 @@ describe('SVGMap component', () => {
 			expect(tree).toMatchSnapshot();
 		});
 
-		test('displays heat map with custom location css', () => {
-			const eventHandler = () => 'eventHandler';
-			const isLocationSelected = () => 'isLocationSelected';
-			const generateHeat = () => 'svg-map__location heat0';
+		test('displays map with custom function location props', () => {
+			const locationClassName = (location, index) => `locationClassName-${index}`;
+			const locationTabIndex = (location, index) => `locationTabIndex-${index}`;
 			const component = renderer.create(
 				<SVGMap map={map}
-					className="className"
-					role="role"
-					locationTabIndex="locationTabIndex"
-					locationRole="locationRole"
-					onLocationMouseOver={eventHandler}
-					onLocationMouseOut={eventHandler}
-					onLocationMouseMove={eventHandler}
-					onLocationClick={eventHandler}
-					onLocationKeyDown={eventHandler}
-					onLocationFocus={eventHandler}
-					onLocationBlur={eventHandler}
-					isLocationSelected={isLocationSelected}
-					locationClassName={generateHeat}
+					locationClassName={locationClassName}
+					locationTabIndex={locationTabIndex}
 				/>
 			);
 			const tree = component.toJSON();
@@ -73,7 +66,6 @@ describe('SVGMap component', () => {
 		});
 	});
 
-
 	describe('Maps', () => {
 		test('displays map of Australia', () => {
 			const component = renderer.create(<SVGMap map={Australia} />);

examples/src/components/examples-app.jsx

@@ -2,8 +2,7 @@ import React from 'react';
 import CheckboxMap from './checkbox-map';
 import RadioMap from './radio-map';
 import LinkMap from './link-map';
-import TooltipMap from './tooltip-map';
-import HeatMap from './heat-map';
+import TooltipHeatMap from './tooltip-heat-map';
 import './examples-app.scss';
 
 class ExamplesApp extends React.Component {
@@ -20,8 +19,7 @@ class ExamplesApp extends React.Component {
 				<RadioMap />
 				<CheckboxMap />
 				<LinkMap />
-				<TooltipMap />
-				<HeatMap />
+				<TooltipHeatMap />
 			</section>
 		);
 	}

examples/src/components/examples-app.scss

@@ -51,17 +51,27 @@
 
 			&--usa {
 				width: 800px; // USA needs more space	for tooltip
-				.svg-map{
-					&__location {
-						&.heat1{
-							opacity:0.8;
-						}
-						&.heat2{
-							opacity:0.6;
-						}
-						&.heat3{
-							opacity:0.4;
-						}
+
+				.svg-map__location {
+					&--heat0 {
+						fill: blue;
+					}
+
+					&--heat1 {
+						fill: lightblue;
+					}
+
+					&--heat2 {
+						fill: orange;
+					}
+
+					&--heat3 {
+						fill: red;
+					}
+
+					&:focus,
+					&:hover {
+						opacity: 0.75;
 					}
 				}
 			}

examples/src/components/tooltip-map.jsx → examples/src/components/tooltip-heat-map.jsx

@@ -1,9 +1,9 @@
 import React from 'react';
-import { SVGMap, USA } from '../../../src/';
+import { SVGMap, USA } from '../../../src';
 import { getLocationName } from '../utils';
 import '../../../src/svg-map.scss';
 
-class TooltipMap extends React.Component {
+class TooltipHeatMap extends React.Component {
 	constructor(props) {
 		super(props);
 
@@ -37,15 +37,21 @@ class TooltipMap extends React.Component {
 		this.setState({ tooltipStyle });
 	}
 
+	getLocationClassName(location, index) {
+		// Generate random heat map
+		return `svg-map__location svg-map__location--heat${index % 4}`;
+	}
+
 	render() {
 		return (
 			<article className="examples__block">
 				<h2 className="examples__block__title">
-					USA SVG map with tooltips
+					USA SVG heat map with tooltips
 				</h2>
 				<div className="examples__block__map examples__block__map--usa">
 					<SVGMap
 						map={USA}
+						locationClassName={this.getLocationClassName}
 						onLocationMouseOver={this.handleLocationMouseOver}
 						onLocationMouseOut={this.handleLocationMouseOut}
 						onLocationMouseMove={this.handleLocationMouseMove} />
@@ -58,4 +64,4 @@ class TooltipMap extends React.Component {
 	}
 }
 
-export default TooltipMap;
+export default TooltipHeatMap;