Add react scroll to code schools - change imagecard back to space-around. Fixes #111

Author: alexspence

package.json

@@ -19,6 +19,7 @@
     "react-modal": "^1.7.7",
     "react-router": "^4.1.1",
     "react-router-dom": "^4.1.1",
+    "react-scroll": "^1.5.2",
     "react-table": "^6.0.5",
     "sinon": "^2.3.2",
     "universal-cookie": "^2.0.7"

src/scenes/home/codeSchools/codeSchools.js

@@ -50,24 +50,28 @@ class CodeSchools extends Component {
 
           <div className={styles.filterButtonDiv}>
             <LinkButton
-              link="#approvedSchools"
+              link="approvedSchools"
               text="Code Schools with VA Approval"
               theme="blue"
+              scrollLink
             />
             <LinkButton
-              link="#partnerSchools"
+              link="partnerSchools"
               text="Partner Schools with Scholarships"
               theme="blue"
+              scrollLink
             />
             <LinkButton
-              link="#onlineSchools"
+              link="onlineSchools"
               text="Online Schools"
               theme="blue"
+              scrollLink
             />
             <LinkButton
-              link="#schoolsByState"
+              link="schoolsByState"
               text="Search by State"
               theme="blue"
+              scrollLink
             />
           </div>
         </Section>

src/shared/components/imageCard/imageCard.css

@@ -28,7 +28,7 @@
   min-height: 200px;
   display: flex;
   flex-direction: column;
-  justify-content: center;
+  justify-content: space-around;
   align-items: center;
 }
 

src/shared/components/linkButton/linkButton.js

@@ -1,16 +1,31 @@
 import React from 'react';
 import PropTypes from 'prop-types';
 import { Link } from 'react-router-dom';
+import { Link as ScrollLink } from 'react-scroll';
 import styles from './linkButton.css';
 
 const LinkButton = (props) => {
   const {
     link,
     text,
     theme,
+    scrollLink,
     ...otherProps
   } = props;
 
+  if (scrollLink) {
+    return (
+      <ScrollLink
+        className={`${styles.linkButton} ${styles[theme]}`}
+        to={link}
+        smooth duration={400}
+        {...otherProps}
+      >
+        {text}
+      </ScrollLink>
+    );
+  }
+
   return (
     <Link
       className={`${styles.linkButton} ${styles[theme]}`}
@@ -25,11 +40,13 @@ const LinkButton = (props) => {
 LinkButton.propTypes = {
   link: PropTypes.string.isRequired,
   text: PropTypes.string.isRequired,
-  theme: PropTypes.string
+  theme: PropTypes.string,
+  scrollLink: PropTypes.bool
 };
 
 LinkButton.defaultProps = {
-  theme: 'blue'
+  theme: 'blue',
+  scrollLink: false
 };
 
 export default LinkButton;

src/shared/components/section/section.js

@@ -23,7 +23,7 @@ const Section = (props) => {
   });
 
   return (
-    <div className={classes} {...otherProps} >
+    <div name={id} className={classes} {...otherProps} >
       {title && <Heading text={title} id={id} headingLines={headingLines} theme={headingTheme} />}
       {children}
     </div>

yarn.lock

@@ -5186,12 +5186,6 @@ postcss-filter-plugins@^2.0.0:
     postcss "^5.0.4"
     uniqid "^4.0.0"
 
-postcss-flexbugs-fixes@^3.0.0:
-  version "3.0.0"
-  resolved "https://registry.yarnpkg.com/postcss-flexbugs-fixes/-/postcss-flexbugs-fixes-3.0.0.tgz#7b31cb6c27d0417a35a67914c295f83c403c7ed4"
-  dependencies:
-    postcss "^6.0.1"
-
 postcss-load-config@^1.0.0, postcss-load-config@^1.x:
   version "1.2.0"
   resolved "https://registry.yarnpkg.com/postcss-load-config/-/postcss-load-config-1.2.0.tgz#539e9afc9ddc8620121ebf9d8c3673e0ce50d28a"
@@ -5755,6 +5749,13 @@ react-router@^4.1.1:
     prop-types "^15.5.4"
     warning "^3.0.0"
 
+react-scroll@^1.5.2:
+  version "1.5.2"
+  resolved "https://registry.yarnpkg.com/react-scroll/-/react-scroll-1.5.2.tgz#f10f14840d3138a121d2c0f04933bbfee4193975"
+  dependencies:
+    object-assign "^4.1.1"
+    prop-types "^15.5.8"
+
 react-simple-di@^1.2.0:
   version "1.2.0"
   resolved "https://registry.yarnpkg.com/react-simple-di/-/react-simple-di-1.2.0.tgz#dde0e5bf689f391ef2ab02c9043b213fe239c6d0"