Merge cf39c4f into b2b192a

client/__mocks__/react-sortable-hoc.js

@@ -0,0 +1,30 @@
+export const SortableContainer = component => component;
+export const SortableElement = component => component;
+export const SortableHandle = component => component;
+
+export const arrayMove = () => [
+	{
+		title: 'Item 2',
+		content: 'Item number two'
+	},
+	{
+		title: 'Item 3',
+		content: 'Item number three'
+	},
+	{
+		title: 'Item 1',
+		content: 'Item number one'
+	},
+	{
+		title: 'Item 4',
+		content: 'Item number four'
+	},
+	{
+		title: 'Item 5',
+		content: 'Item number five'
+	},
+	{
+		title: 'Item 6',
+		content: 'Item number six'
+	}
+];

client/components/card/Card.jsx

@@ -0,0 +1,33 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+
+import DragHandle from '../sortable/sortable-list/drag-handle';
+import styles from './card.scss';
+
+const Card = props => (
+	<div className={styles.card}>
+		{props.enableDragHandle && (
+			<div className={styles.handleContainer}>
+				<DragHandle />
+			</div>
+		)}
+		<div className={styles.cardInfo}>
+			<h4>{props.title}</h4>
+			<p>{props.content}</p>
+		</div>
+	</div>
+);
+
+Card.propTypes = {
+	content: PropTypes.string,
+	title: PropTypes.string,
+	enableDragHandle: PropTypes.bool
+};
+
+Card.defaultProps = {
+	content: 'Card content',
+	title: 'Card title',
+	enableDragHandle: false
+};
+
+export default Card;

client/components/card/Card.spec.js

@@ -0,0 +1,27 @@
+import React from 'react';
+import renderer from 'react-test-renderer';
+
+
+import Card from './Card';
+
+describe('<Card />', () => {
+	it('snapshot - default props', () => {
+		const tree = renderer.create(<Card />).toJSON();
+		expect(tree).toMatchSnapshot();
+	});
+
+	it('snapshot - with content', () => {
+		const tree = renderer.create(<Card content="TEXT" />).toJSON();
+		expect(tree).toMatchSnapshot();
+	});
+
+	it('snapshot - with title', () => {
+		const tree = renderer.create(<Card title="TEXT" />).toJSON();
+		expect(tree).toMatchSnapshot();
+	});
+
+	it('snapshot - with title and content', () => {
+		const tree = renderer.create(<Card content="CONTENT" title="TITLE"/>).toJSON();
+		expect(tree).toMatchSnapshot();
+	});
+});

client/components/card/__snapshots__/Card.spec.js.snap

@@ -0,0 +1,69 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`<Card /> snapshot - default props 1`] = `
+<div
+  className="card"
+>
+  <div
+    className="cardInfo"
+  >
+    <h4>
+      Card title
+    </h4>
+    <p>
+      Card content
+    </p>
+  </div>
+</div>
+`;
+
+exports[`<Card /> snapshot - with content 1`] = `
+<div
+  className="card"
+>
+  <div
+    className="cardInfo"
+  >
+    <h4>
+      Card title
+    </h4>
+    <p>
+      TEXT
+    </p>
+  </div>
+</div>
+`;
+
+exports[`<Card /> snapshot - with title 1`] = `
+<div
+  className="card"
+>
+  <div
+    className="cardInfo"
+  >
+    <h4>
+      TEXT
+    </h4>
+    <p>
+      Card content
+    </p>
+  </div>
+</div>
+`;
+
+exports[`<Card /> snapshot - with title and content 1`] = `
+<div
+  className="card"
+>
+  <div
+    className="cardInfo"
+  >
+    <h4>
+      TITLE
+    </h4>
+    <p>
+      CONTENT
+    </p>
+  </div>
+</div>
+`;

client/components/card/card.scss

@@ -0,0 +1,37 @@
+@import '~styles/_palette';
+@import '~styles/_mixins';
+
+.card {
+	display: flex;
+	flex-direction: row;
+
+	align-items: center;
+	vertical-align: middle;
+	text-align: left;
+
+	font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
+	background-color: $white;
+	box-shadow: -1px 3px 5px 0px $black-05;
+
+	margin: 1%;
+	transition: all 0.4s;
+	@include unselectable();
+
+	&:hover {
+		transform: scale(1.01, 1.01);
+	}
+
+	h4 {
+		color: $black-2;
+	}
+}
+
+.handleContainer {
+	padding-left: 10px;
+}
+
+.cardInfo {
+	padding-left: 10px;
+	flex-grow: 1;
+}
+

client/components/card/index.js

@@ -0,0 +1,3 @@
+import Card from './Card';
+
+export default Card;

client/components/nav/Nav.jsx

@@ -10,6 +10,11 @@ const Nav = () => (
 				Home
 			</NavLink>
 		</li>
+		<li>
+			<NavLink to={links.sortableList} className={styles.link} activeClassName={styles.active} exact>
+				Sortable List
+			</NavLink>
+		</li>
 		<li>
 			<NavLink to={links.about} className={styles.link} activeClassName={styles.active} exact>
 				About

client/components/nav/__snapshots__/Nav.spec.js.snap

@@ -15,6 +15,17 @@ exports[`<Nav/> snapshot 1`] = `
       Home
     </NavLink>
   </li>
+  <li>
+    <NavLink
+      activeClassName="active"
+      ariaCurrent="true"
+      className="link"
+      exact={true}
+      to="/sortable-list"
+    >
+      Sortable List
+    </NavLink>
+  </li>
   <li>
     <NavLink
       activeClassName="active"

client/components/nav/nav.scss

@@ -2,7 +2,7 @@
 @import '~styles/_mixins';
 
 ul.nav {
-	width: 150px;
+	width: 270px;
 	margin: 0 auto;
 	border-bottom: 1px dashed $black-2;
 	border-width: 1px 0;

client/components/sortable/Sortable.jsx

@@ -0,0 +1,104 @@
+import React from 'react';
+import SortableList from './sortable-list';
+import styles from './sortable.scss';
+
+class Sortable extends React.Component {
+	constructor(props) {
+		super(props);
+
+		this.handleChange = this.handleChange.bind(this);
+		this.handleChangeLockAxis = this.handleChangeChecked.bind(this, 'lockAxis');
+		this.handleChangeDragHandle = this.handleChangeChecked.bind(this, 'enableDragHandle');
+		this.handleChangeNumber = this.handleChangeNumber.bind(this);
+
+		this.state = {
+			lockAxis: '',
+			enableDragHandle: false,
+			transitionDuration: 400,
+			pressDelay: 0,
+			distance: 0
+		};
+	}
+
+	handleChangeChecked(param, e) {
+		let value = e.target.checked
+		if (param === 'lockAxis'){
+			value = e.target.checked ? 'y' : '';
+		}
+		this.handleChange(param, value);
+	}
+	handleChangeNumber(e) {
+		const value = Number.parseInt(e.target.value) || 0;
+		this.handleChange(e.target.name, value);
+	}
+
+	handleChange(param, value) {
+		this.setState({
+			[param]: value
+		});
+	}
+
+	render() {
+		const { lockAxis, transitionDuration, pressDelay, distance, enableDragHandle } = this.state;
+		return (
+			<div className={styles.sortable}>
+				<label>
+					<span>Lock Axis</span>
+					<input
+						type="checkbox"
+						name="lockAxis"
+						checked={lockAxis}
+						onChange={this.handleChangeLockAxis}
+					/>
+				</label>
+				<label>
+					<span>Drag Handle</span>
+					<input
+						type="checkbox"
+						name="useDragHandle"
+						checked={enableDragHandle}
+						onChange={this.handleChangeDragHandle}
+					/>
+				</label>
+				<label>
+					<span>Transition duration</span>
+					<input
+						type="Number"
+						name="transitionDuration"
+						onChange={this.handleChangeNumber}
+						value={transitionDuration}
+					/>
+				</label>
+				<label>
+					<span>Press Delay</span>
+					<input
+						type="Number"
+						name="pressDelay"
+						onChange={this.handleChangeNumber}
+						value={pressDelay}
+					/>
+				</label>
+				<label>
+					<span>Distance</span>
+					<input
+						type="Number"
+						name="distance"
+						onChange={this.handleChangeNumber}
+						value={distance}
+					/>
+				</label>
+				<div className={styles.list}>
+					<SortableList
+						lockAxis={lockAxis}
+						transitionDuration={transitionDuration}
+						pressDelay={pressDelay}
+						distance={distance}
+						enableDragHandle={enableDragHandle}
+					/>
+				</div>
+			</div>
+		);
+	}
+}
+
+export default Sortable;

client/components/sortable/Sortable.spec.js

@@ -0,0 +1,12 @@
+import React from 'react';
+import renderer from 'react-test-renderer';
+
+import Sortable from './Sortable';
+
+describe('<Sortable />', () => {
+	it('snapshot', () => {
+		const tree = renderer.create(<Sortable />).toJSON();
+		expect(tree).toMatchSnapshot();
+	});
+});
+