diff --git a/packages/learn/src/components/Map/components/Block.js b/packages/learn/src/components/Map/components/Block.js
index 4e2259fd3b..b5405ea8b6 100644
--- a/packages/learn/src/components/Map/components/Block.js
+++ b/packages/learn/src/components/Map/components/Block.js
@@ -6,6 +6,7 @@ import { createSelector } from 'reselect';
import Link, { navigateTo } from 'gatsby-link';
import { makeExpandedBlockSelector, toggleBlock } from '../redux';
+import { toggleMapModal } from '../../../redux/app';
import Caret from '../../icons/Caret';
const mapStateToProps = (state, ownProps) => {
@@ -17,13 +18,14 @@ const mapStateToProps = (state, ownProps) => {
};
const mapDispatchToProps = dispatch =>
- bindActionCreators({ toggleBlock }, dispatch);
+ bindActionCreators({ toggleBlock, toggleMapModal }, dispatch);
const propTypes = {
blockDashedName: PropTypes.string,
challenges: PropTypes.array,
isExpanded: PropTypes.bool,
- toggleBlock: PropTypes.func.isRequired
+ toggleBlock: PropTypes.func.isRequired,
+ toggleMapModal: PropTypes.func.isRequired
};
export class Block extends PureComponent {
@@ -31,6 +33,7 @@ export class Block extends PureComponent {
super(...props);
this.handleBlockClick = this.handleBlockClick.bind(this);
+ this.handleChallengeClick = this.handleChallengeClick.bind(this);
this.renderChallenges = this.renderChallenges.bind(this);
}
@@ -44,11 +47,17 @@ export class Block extends PureComponent {
return navigateTo(blockPath);
}
+ handleChallengeClick() {
+ this.props.toggleMapModal();
+ }
+
renderChallenges(challenges) {
// TODO: Split this into a Challenge Component and add tests
return challenges.map(challenge => (
- {challenge.title}
+
+ {challenge.title}
+
));
}
diff --git a/packages/learn/src/components/Map/components/Block.test.js b/packages/learn/src/components/Map/components/Block.test.js
index ebc62957b2..4ce6f1034c 100644
--- a/packages/learn/src/components/Map/components/Block.test.js
+++ b/packages/learn/src/components/Map/components/Block.test.js
@@ -14,12 +14,14 @@ const renderer = new ShallowRenderer();
test(' not expanded snapshot', () => {
const toggleSpy = sinon.spy();
+ const toggleMapSpy = sinon.spy();
const componentToRender = (
node.block === 'block-a')}
isExpanded={false}
toggleBlock={toggleSpy}
+ toggleMapModal={toggleMapSpy}
/>
);
const component = renderer.render(componentToRender);
@@ -29,12 +31,14 @@ test(' not expanded snapshot', () => {
test(' {
const toggleSpy = sinon.spy();
+ const toggleMapSpy = sinon.spy();
const componentToRender = (
node.block === 'block-a')}
isExpanded={true}
toggleBlock={toggleSpy}
+ toggleMapModal={toggleMapSpy}
/>
);
@@ -45,11 +49,13 @@ test(' {
test(' should handle toggle clicks correctly', () => {
const toggleSpy = sinon.spy();
+ const toggleMapSpy = sinon.spy();
const props = {
blockDashedName: 'block-a',
challenges: mockNodes.filter(node => node.block === 'block-a'),
isExpanded: false,
- toggleBlock: toggleSpy
+ toggleBlock: toggleSpy,
+ toggleMapModal: toggleMapSpy
};
const componentToRender = ;
diff --git a/packages/learn/src/components/Map/components/__snapshots__/Block.test.js.snap b/packages/learn/src/components/Map/components/__snapshots__/Block.test.js.snap
index 877dce846f..9fc90a0c03 100644
--- a/packages/learn/src/components/Map/components/__snapshots__/Block.test.js.snap
+++ b/packages/learn/src/components/Map/components/__snapshots__/Block.test.js.snap
@@ -35,6 +35,7 @@ exports[`
Challenge One
@@ -44,6 +45,7 @@ exports[`
Challenge Two
@@ -53,6 +55,7 @@ exports[`
Challenge One
@@ -62,6 +65,7 @@ exports[`
Challenge Two
diff --git a/packages/learn/src/components/MapModal/index.js b/packages/learn/src/components/MapModal/index.js
index c1a8982a5d..625b2d981d 100644
--- a/packages/learn/src/components/MapModal/index.js
+++ b/packages/learn/src/components/MapModal/index.js
@@ -11,6 +11,8 @@ import { toggleMapModal, isMapModalOpenSelector } from '../../redux/app';
import Spacer from '../util/Spacer';
+import './map-modal.css';
+
const mapStateToProps = createSelector(isMapModalOpenSelector, show => ({
show
}));
diff --git a/packages/learn/src/templates/Introduction/SuperBlockIntro.js b/packages/learn/src/templates/Introduction/SuperBlockIntro.js
index 182247ddc5..12155502e7 100644
--- a/packages/learn/src/templates/Introduction/SuperBlockIntro.js
+++ b/packages/learn/src/templates/Introduction/SuperBlockIntro.js
@@ -12,9 +12,7 @@ const propTypes = {
})
};
-function SuperBlockIntroductionPage(
- { data: { markdownRemark } }
-) {
+function SuperBlockIntroductionPage({ data: { markdownRemark } }) {
const { html, frontmatter: { superBlock } } = markdownRemark;
return (