Basic test fixed, add actual SideNav files, force rem replaced with px

Author: likethemammal

example/index.js

@@ -1,10 +1,38 @@
 import React from 'react'
 import ReactDOM from 'react-dom'
 
+import SVG_MATERIAL_FAVORITE from 'svg-icon/dist/svg/material/favorite.svg'
+import SVG_MATERIAL_REFRESH from 'svg-icon/dist/svg/material/refresh.svg'
+
+import _ from 'underscore'
+
+
+const items = [
+    {
+        label: 'Some Label',
+        id: 'some',
+        icon: SVG_MATERIAL_FAVORITE,
+        Component: <div>SOme label</div>,
+    },
+    {
+        label: 'The Fuck',
+        id: 'the_fuck',
+        icon: SVG_MATERIAL_REFRESH,
+        Component: <div>The fuck</div>,
+    },
+]
+
+const ids = _.pluck(items, 'id')
+
 import OverwatchSideNav from '../lib'
 
 
 ReactDOM.render(
-    <OverwatchSideNav />,
+    <div>
+        <OverwatchSideNav
+            items={items}
+            ids={ids}
+        />
+    </div>,
     document.getElementById('app')
 )

example/package.json

@@ -7,6 +7,7 @@
   "devDependencies": {
     "babel-core": "^6.24.1",
     "babel-loader": "^7.0.0",
+    "raw-loader": "^0.5.1",
     "react": "16.2.0",
     "react-dom": "16.2.0",
     "source-map-loader": "^0.2.3",
@@ -16,5 +17,9 @@
   "peerDependencies": {
     "react": ">=15.4.2",
     "react-dom": ">=15.4.2"
+  },
+  "dependencies": {
+    "svg-icon": "^0.8.2",
+    "underscore": "^1.8.3"
   }
 }

example/webpack.config.js

@@ -29,6 +29,11 @@ const config = {
                     'source-map-loader',
                 ],
             },
+            {
+                test: /\.(svg)$/,
+                use: ['raw-loader'],
+                // exclude: /(node_modules)/,
+            }
         ]
 
     },

package.json

@@ -28,6 +28,7 @@
     "README.md"
   ],
   "dependencies": {
+    "@likethemammal/general-components": "^0.1.12",
     "underscore": "^1.8.3"
   },
   "devDependencies": {

src/__tests__/components/CheckboxWithLabel.test.js

@@ -0,0 +1,41 @@
+import React from 'react';
+import {shallow} from 'enzyme';
+
+import general from '@likethemammal/general-components'
+
+const shared = general.__tests__._shared.tests
+
+import SideNav from '../../components/'
+import _ from 'underscore'
+
+const items = [
+    {
+        label: 'Label',
+        id: 'some_id',
+        icon: [],
+        Component: <div>test</div>,
+    },
+    {
+        label: 'Test',
+        id: 'slug',
+        icon: [],
+        Component: <div>The fuck</div>,
+    },
+]
+
+const ids = _.pluck(items, 'id')
+
+describe('SideNav', () => {
+    // Render a checkbox with label in the document
+    const component = shallow(
+        <SideNav
+            items={items}
+            id={ids}
+        />
+    )
+
+    shared.SNAPSHOTS_SHOULD_MATCH([
+        component
+    ])
+
+})

src/__tests__/components/SideNav.js

@@ -1,3 +1,3 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
-exports[`CheckboxWithLabel Snapshot 0 should match 1`] = `undefined`;
+exports[`SideNav Snapshot 0 should match 1`] = `undefined`;

src/__tests__/components/__snapshots__/CheckboxWithLabel.test.js.snap

@@ -0,0 +1,92 @@
+import React, { Component } from 'react'
+
+import css from './Item.less'
+
+import general from '../../../../general-components/'
+
+const { SVG } = general.components
+
+class Item extends Component {
+    static defaultProps = {
+        className: css.container,
+        defaultColor: '#323c50',
+        textColor: 'white',
+        activeColor: '#00c3ff'
+    }
+
+    state = {
+        hovered: false,
+    }
+
+    onClick = () => {
+        const { id, onHashChange } = this.props
+
+        onHashChange(`#${id}`)
+    }
+
+    onMouseEnter = () => {
+        this.setState({
+            hovered: true,
+        })
+    }
+
+    onMouseLeave = () => {
+        this.setState({
+            hovered: false,
+        })
+    }
+
+    render() {
+
+        const {
+            className,
+            id,
+            label,
+            icon,
+            hash,
+            defaultColor,
+            textColor,
+            activeColor,
+        } = this.props
+
+        const {
+            hovered
+        } = this.state
+
+        const active = hash === `#${id}`
+        const colorStyle = {
+            backgroundColor: active || hovered ? activeColor : defaultColor,
+            color: textColor,
+        }
+
+        const iconStyle = {
+            fill: textColor,
+        }
+
+        return <a
+            href={`/#${id}`}
+            className={className}
+            onClick={this.onClick}
+        >
+            <div
+                style={colorStyle}
+                className={css.inner}
+                onMouseEnter={this.onMouseEnter}
+                onMouseLeave={this.onMouseLeave}
+            >
+                <div className={css.icon_container}>
+                    <SVG
+                        raw={icon}
+                        className={css.icon}
+                        style={iconStyle}
+                    />
+                </div>
+                <div className={css.label}>
+                    {label}
+                </div>
+            </div>
+        </a>
+    }
+}
+
+export default Item

src/actions/example.js

@@ -0,0 +1,59 @@
+@import "../colors.less";
+
+@item_height: 4.0rem;
+@icon_width: 4.3rem;
+@hover_padding_size: 1rem;
+
+.container {
+    composes: cf from '../../../../general-components/bin/general.css';
+    position: relative;
+    right: -100%;
+    display: block;
+    margin-left: -@icon_width - @hover_padding_size;
+    padding-left: @hover_padding_size;
+    padding-bottom: @hover_padding_size - 0.7rem;
+    color: inherit;
+
+    transition: right 275ms ease;
+
+    &:hover {
+        right: 0;
+    }
+
+    box-sizing: border-box;
+}
+
+.container * {
+    box-sizing: border-box;
+}
+
+.inner {
+    text-align: center;
+    border-radius: 5px 0 0 5px;
+
+    transition: 100ms linear;
+}
+
+.icon_container {
+    float: left;
+}
+
+.icon {
+    height: @item_height;
+    width: @icon_width;
+    padding: 0 0.8rem;
+    background: rgba(0,0,0,0.1);
+    border-radius: 3px 0 0 3px;
+    composes: container from '../../../../general-components/bin/components/SVG.css';
+}
+
+.label {
+    display: inline-block;
+    line-height: @item_height;
+    padding-right: 13px;
+    padding-left: 13px;
+    font-size: 2rem;
+    text-transform: uppercase;
+    text-align: center;
+    composes: _font_general from '../../../../general-components/bin/general.css';
+}