further tests and react controlled modals

__tests__/test-example-work-modal.js

@@ -0,0 +1,38 @@
+import React from 'react';
+import { shallow } from 'enzyme';
+import ExampleWorkModal from '../js/example-work-modal';
+import Enzyme from 'enzyme';
+import Adapter from 'enzyme-adapter-react-16';
+
+Enzyme.configure({adapter: new Adapter()});
+
+const MYWORK = {
+  title:"The Legal Assistant, SAAS Legal Case Management",
+  href:"www.thelegalassistant.com",
+  desc:"Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.",
+  image: {
+      desc:"The Legal Assistant, SAAS Legal Case Management developed with Grails, Groovy Java and lot's of love.",
+      src:"images/saas-legal-software-tla.png",
+      comment:""
+  }
+}
+
+describe("Example work modal component", () => {
+  let component = shallow(<ExampleWorkModal example={MYWORK} open={false} />);
+  let openComponent = shallow(<ExampleWorkModal example={MYWORK} open={true} />);
+
+  let anchors = component.find("a");
+
+  it("should contain a single a tag", () => {
+    expect(anchors.length).toEqual(1);
+  });
+
+  it("Should link to our project", () => {
+    expect(anchors.prop('href')).toEqual(MYWORK.href);
+  });
+
+  it("Should have modal class set correctly", () => {
+    expect(component.find(".background--skyBlue").hasClass('modal--closed')).toBe(true);
+    expect(openComponent.find('.background--skyBlue').hasClass('modal--open')).toBe(true);
+  });
+});

__tests__/test-example-work.js

@@ -20,7 +20,15 @@ const MYWORK = [
 describe ("Example work component", () => {
   let component = shallow(<ExampleWork work={MYWORK} />);
 
-  it("should be a section element", () => {
-      expect(component.type()).toEqual('section');
+  it("should be a span element", () => {
+      expect(component.type()).toEqual('span');
+  })
+
+  it("Should allow modal to open", () => {
+    component.instance().openModal();
+    expect(component.instance().state.modalOpen).toBe(true);
+
+    component.instance().closeModal();
+    expect(component.instance().state.modalOpen).toBe(false);
   })
 });

index.html

@@ -73,27 +73,8 @@ <h2 class="color--cloud margin--none section__text--centered">
         I am learning to code in the cloud! I like to work hard and learn new things.
         I want to work for a company that will pay me to code in the cloud!
       </p>
+    </section>
 
-    <div class="background--skyBlue modal--closed">
-      <span class="color--cloud modal__closeButton">
-        <i class="fa fa-window-close-o"></i>
-      </span>
-      <img alt="example screenshot of a project involving code"
-           class="modal__image"
-           src="images/example1.png"/>
-      <div class="color--cloud modal__text">
-        <h2 class="modal__title">
-          Work Example Name
-        </h2>
-        <a class="color--skyBlue modal__link"
-           href="#">
-          Check it out
-        </a>
-        <p class="modal__description">
-          A long description of the work in question.
-        </p>
-      </div>
-    </div>
 
   </body>
   <script type="text/javascript" src='/dist/bundle.js'></script>

js/example-work-modal.js

@@ -0,0 +1,34 @@
+import React from 'react';
+
+class ExampleWorkModal extends React.Component {
+  render() {
+
+    let example = this.props.example;
+    let modalClass = this.props.open ? 'modal--open' : 'modal--closed';
+
+    return (
+      <div className={"background--skyBlue " + modalClass }>
+        <span className="color--cloud modal__closeButton" onClick={ this.props.closeModal }>
+          <i className="fa fa-window-close-o"></i>
+        </span>
+        <img alt={ example.image.desc }
+             className="modal__image"
+             src={ example.image.src }/>
+        <div className="color--cloud modal__text">
+          <h2 className="modal__title">
+            { example.title }
+          </h2>
+          <a className="color--skyBlue modal__link"
+             href={ example.href }>
+            Check it out
+          </a>
+          <p className="modal__description">
+            { example.desc }
+          </p>
+        </div>
+      </div>
+    )
+  };
+};
+
+export default ExampleWorkModal;

js/example_work.js

@@ -1,32 +1,64 @@
 import React from 'react';
+import ExampleWorkModal from '../js/example-work-modal';
 
 export default class ExampleWork extends React.Component {
+  constructor(props) {
+      super(props);
+
+      this.state = {
+        'modalOpen': false,
+        'selectedExample': this.props.work[0]
+      };
+
+      this.openModal = this.openModal.bind(this);
+      this.closeModal = this.closeModal.bind(this);
+  }
+
+  openModal(evt, example) {
+    this.setState({
+      modalOpen:true,
+      selectedExample: example
+    });
+  }
+
+  closeModal(evt) {
+    this.setState({
+      modalOpen:false
+    });
+  }
+
   render() {
     return(
-      <section className="section section--alignCentered section--description">
-        {
-          this.props.work.map( (example, idx) => {
-            return (
-              <ExampleWorkBubble example={example} key={idx}/>
-            )
-          })
-        }
-      </section>
+      <span>
+        <section className="section section--alignCentered section--description">
+          {
+            this.props.work.map( (example, idx) => {
+              return (
+                <ExampleWorkBubble example={example} key={idx} openModal={this.openModal}/>
+              )
+            })
+          }
+        </section>
+
+        <ExampleWorkModal example={ this.state.selectedExample }
+            open={ this.state.modalOpen } closeModal={ this.closeModal }/>
+      </span>
     )
   }
 }
 
 export class ExampleWorkBubble extends React.Component {
   render() {
+    let example = this.props.example;
     return(
-      <div className="section__exampleWrapper">
+      <div className="section__exampleWrapper" onClick={ (evt) => this.props.openModal(evt, example)}>
         <div className="section__example">
-          <img alt={this.props.example.image.desc}
+          <img alt={ example.image.desc }
                className="section__exampleImage"
-               src={this.props.example.image.src}/>
+               src={ example.image.src }/>
           <dl className="color--cloud">
             <dt className="section__exampleTitle section__text--centered">
-              {this.props.example.title}
+              { example.title }
             </dt>
             <dd></dd>
           </dl>

js/main.js

@@ -5,6 +5,8 @@ import ExampleWork from './example_work.js';
 const MYWORK = [
   {
     title:"The Legal Assistant, SAAS Legal Case Management",
+    href:"www.thelegalassistant.com",
+    desc:"Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.",
     image: {
         desc:"The Legal Assistant, SAAS Legal Case Management developed with Grails, Groovy Java and lot's of love.",
         src:"images/saas-legal-software-tla.png",
@@ -13,6 +15,8 @@ const MYWORK = [
   },
   {
     title:"NFC",
+    href:"google.com",
+    desc:"Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.",
     image: {
         desc:"New field work.",
         src:"images/saas-legal-software-tla.png",