Better press page

common/styles/globalStyles.css

@@ -28,6 +28,7 @@ body {
   line-height: 1.5;
   hyphens: none;
   margin: 0;
+  min-width: 300px;
 }
 
 h1,

components/Press/CivicXBadge/CivicXBadge.js

@@ -11,10 +11,11 @@ CivicXBadge.defaultProps = {
   sourceUrl: 'http://cvcx.org/veterans-solutions-lab/',
 };
 
-function CivicXBadge({ sourceUrl = 'http://cvcx.org/veterans-solutions-lab/' }) {
+function CivicXBadge({ sourceUrl }) {
   return (
     <div>
       <OutboundLink
+        hasIcon={false}
         href={sourceUrl}
         analyticsEventLabel={`[CivicX Accelerator Badge] ${sourceUrl}`}
       >

components/Press/CivicXBadge/__tests__/__snapshots__/CivicXBadge.test.js.snap

@@ -5,7 +5,7 @@ exports[`CivicXBadge it should render properly no props 1`] = `
   <OutboundLink
     analyticsEventLabel="[CivicX Accelerator Badge] http://cvcx.org/veterans-solutions-lab/"
     className=""
-    hasIcon={true}
+    hasIcon={false}
     href="http://cvcx.org/veterans-solutions-lab/"
   >
     <img

components/Press/PressLinks/LinkGroup.js

@@ -0,0 +1,61 @@
+import React, { Component } from 'react';
+import PropTypes from 'prop-types';
+import styles from './PressLinks.css';
+import OutboundLink from '../../_common_/OutboundLink/OutboundLink';
+import Button from '../../_common_/Button/Button';
+
+class LinkGroup extends Component {
+  static propTypes = {
+    title: PropTypes.string.isRequired,
+    links: PropTypes.arrayOf(
+      PropTypes.shape({
+        url: PropTypes.string.isRequired,
+        title: PropTypes.string.isRequired,
+      }),
+    ).isRequired,
+    MaxLinks: PropTypes.number.isRequired,
+  };
+
+  state = {
+    ShowAll: false,
+  };
+
+  clickHandler = () => {
+    const { ShowAll } = this.state;
+    this.setState({ ShowAll: !ShowAll });
+  };
+
+  render() {
+    const { ShowAll } = this.state;
+    const { title, links, MaxLinks } = this.props;
+    return (
+      <div className={styles.articlesGroup}>
+        <h2>{title}</h2>
+        <ul>
+          {links.map((link, index) => {
+            if (index >= MaxLinks && !ShowAll) {
+              return null;
+            }
+            return (
+              <li key={`GroupLink_${link.url}`}>
+                <OutboundLink href={link.url}>{link.title}</OutboundLink>
+              </li>
+            );
+          })}
+        </ul>
+        {links.length > MaxLinks && (
+          <Button
+            aria-pressed={ShowAll} // this needs to be passed and accepted by the button component
+            className={styles.ShowAllButton}
+            theme={ShowAll ? 'slate' : 'primary'}
+            onClick={this.clickHandler}
+          >
+            {ShowAll ? 'Show Less' : 'Show All'}
+          </Button>
+        )}
+      </div>
+    );
+  }
+}
+
+export default LinkGroup;

components/Press/PressLinks/Links.js

@@ -0,0 +1,211 @@
+const Boston = [
+  {
+    url: 'https://insights.dice.com/2017/01/11/tech-pros-volunteer-fun-ways/',
+    title: 'How Tech Pros Can Volunteer in Fun Ways',
+  },
+  {
+    url:
+      'https://www.necn.com/news/business/MassChallenge-Finnest_-Operation-Code_-Sunrise-Health_NECN-441063423.html',
+    title: 'MassChallenge Finalists: Finnest, Operation Code, Sunrise Health',
+  },
+  {
+    url: 'http://www.wickedbandwidth.com/02072017-techbreakfast-microsoft-nerd/',
+    title: 'TechBreakfast at Microsoft NERD',
+  },
+  {
+    url: 'https://www.youtube.com/watch?v=YGaG_HL3oEQ',
+    title: 'Operation Code - #BNT80 Boston New Technology Startup Demo',
+  },
+  {
+    url: 'https://www.youtube.com/watch?v=GcvVsVsH-Gg',
+    title: 'MassChallenge Finalist | Operation Code | Conrad Hollomon',
+  },
+  {
+    url:
+      'https://venturefizz.com/stories/boston/operation-code-creating-coding-community-veterans-and-citizens',
+    title: 'Operation Code – Creating a Coding Community with Veterans and Citizens',
+  },
+  {
+    url: 'https://www.deepcoredata.com/innovation-spotlight-veterans-mission-operation-code/',
+    title: 'Innovation Spotlight: Operation Code',
+  },
+  {
+    url: 'https://blogs.microsoft.com/newengland/2017/11/10/tech4vets-masschallenge-veterans/',
+    title: 'tech4vets Masschallenge Veterans',
+  },
+];
+
+const General = [
+  {
+    url:
+      'https://blog.opportunityatwork.org/techhire-educator-spotlight-operation-code-debd0a796f9d',
+    title: 'TechHire Educator Spotlight: Operation Code',
+  },
+  {
+    url: 'https://www.switchup.org/blog/why-veterans-will-make-excellent-programmers',
+    title: 'Why Veterans Will Make Excellent Programmers',
+  },
+  {
+    url: 'https://www.wired.com/story/thousands-of-veterans-want-to-learn-to-code-but-cant/',
+    title: 'THOUSANDS OF VETERANS WANT TO LEARN TO CODE — BUT CAN’T',
+  },
+  {
+    url:
+      'https://medium.com/the-hum/hacking-entrepreneurship-an-interview-with-david-molina-of-operation-code-12a7e199e4e0',
+    title: 'Hacking Entrepreneurship — An Interview with David Molina of Operation Code',
+  },
+  {
+    url:
+      'https://medium.com/operation-code/a-marine-vets-path-into-coding-brings-him-back-home-4fcf5645d740',
+    title: 'A Marine Vet’s Path into Coding Brings Him Back Home',
+  },
+  {
+    url: 'http://blog.teamtreehouse.com/operation-code-connecting-veterans-with-code',
+    title: 'Operation Code: Connecting Veterans with Code Skills',
+  },
+  {
+    url: 'https://blog.github.com/2016-11-11-operation-code-connecting-tech-and-veterans/',
+    title: 'Operation Code: connecting tech and veterans',
+  },
+  {
+    url:
+      'https://www.geekwire.com/2016/call-duty-technology-veterans-rally-support-operation-code/',
+    title:
+      'When the call of duty is technology, veterans rally to support each other through Operation Code', // eslint-disable-line
+  },
+  {
+    url: 'https://www.youtube.com/watch?v=qoy7scC2SHk',
+    title: 'Get Coding Now with Operation Code Army Veteran and Founder David Molina',
+  },
+  {
+    url: 'https://www.youtube.com/watch?v=xN7yMoe38xc',
+    title: 'The New Developer - Operation Code - GitHub Universe 2016',
+  },
+  {
+    url: 'https://www.youtube.com/watch?v=-wSwlLeKFdE',
+    title: 'What happens when military veterans learn to code - CodeConf 2016',
+  },
+  {
+    url: 'https://opensource.com/article/17/4/operation-code-mentors-veterans',
+    title: 'How Operation Code helps veterans learn programming skills',
+  },
+  {
+    url:
+      'https://softwareengineeringdaily.com/2016/03/20/helping-veterans-learn-code-david-molina/',
+    title: 'Helping Veterans Learn to Code with David Molina',
+  },
+  {
+    url: 'https://developingstory.netlify.com/tds-66-david-molina-from-operation-code',
+    title: 'Podcast: a developing story as told by developers',
+  },
+  {
+    url: 'https://www.instagram.com/p/21p5bFxUjd/?taken-by=davidcmolina',
+    title: 'Instagram: David Molina',
+  },
+  {
+    url:
+      'http://blog.teamtreehouse.com/from-aviation-electrician-to-back-end-engineering-bret-funk-operation-code-story',
+    title: 'From Aviation Electrician to Back End Engineering: Bret Funk’s Operation Code story',
+  },
+  {
+    url:
+      'http://blog.teamtreehouse.com/navy-veteran-to-software-developer-geno-guerreros-operation-code-story',
+    title: 'Navy Veteran to Software Developer: Geno Guerrero’s Operation Code Story',
+  },
+  {
+    url: 'http://blog.teamtreehouse.com/marine-corps-veteran-front-end-developer-billy-le',
+    title: 'From Marine Corps Veteran to Front End Developer: Billy Le’s Operation Code Story',
+  },
+  {
+    url: 'https://techcrunch.com/2015/11/11/few-options-for-veterans-looking-to-enter-tech/',
+    title: 'Few Options For Veterans Looking To Enter Tech',
+  },
+  {
+    url:
+      'https://www.ibtimes.com/coding-boot-camps-go-after-veterans-take-silicon-valleys-vacant-tech-jobs-2174421',
+    title: "Coding Boot Camps Go After Veterans To Take Silicon Valley's Vacant Tech Jobs",
+  },
+  {
+    url: 'https://www.makeschool.com/blog/20-diversity-and-inclusion-leaders-to-follow-in-2018',
+    title: '20 Diversity and Inclusion Leaders to Follow in 2018',
+  },
+  {
+    url:
+      'http://bitshare.cm/news/tech-innovation-meets-military-service-geekwires-memorial-day-remembrance-and-update/',
+    title: 'Tech innovation meets military service: GeekWire’s Memorial Day remembrance and update',
+  },
+  {
+    url: 'https://www.millennialaction.org/press-archives/vetstechpr',
+    title: "MAP HOSTS CONGRESSIONAL BRIEFING ON VETERANS' READINESS IN TECH CAREERS",
+  },
+  {
+    url:
+      'https://www.advfn.com/news_Analytics-Pros-Inc-Hosts-Training-for-Veterans-a_72657464.html',
+    title: "Analytics Pros, Inc. Hosts Training for Veterans and Veterans' Spouses",
+  },
+  {
+    url:
+      'http://mentoringdevelopers.com/episode-36-how-to-pick-a-programming-language-to-learn-for-new-developers-part-2/',
+    title: 'Episode 36 – How to pick a programming language to learn for new developers – Part 2',
+  },
+  {
+    url: 'https://www.blogs.va.gov/VAntage/33028/upskill-veterans-training-technology-jobs/',
+    title: 'How to “upskill” Veterans’ training for technology jobs',
+  },
+  {
+    url: 'https://www.instagram.com/p/BbZT3Q-BBDC/',
+    title: 'Instagram: Operation Code made the front cover of Oregon Veterans News Magazine',
+  },
+  {
+    url: 'https://blog.sabio.la/jameel-from-jarhead-to-softwareengineer-9130702da5c1',
+    title: 'Jameel: From Marines to SoftwareEngineer',
+  },
+  {
+    url:
+      'https://www.seattletimes.com/business/technology/seattles-code-fellows-wins-approval-under-gi-bill/',
+    title: 'Seattle coding-school tuition to be covered by GI Bill',
+  },
+  {
+    url:
+      'https://www.koin.com/news/veteran-gi-bill-should-cover-code-school_20180208085618706/960235415',
+    title: 'Veteran: GI Bill should cover code school',
+  },
+  {
+    url: 'http://patriotbootcamp.org/blog/operation-code',
+    title:
+      'Patriot Boot Camp And Operation Code Join Forces To Help Military Veterans Become Technology Entrepreneurs', // eslint-disable-line
+  },
+  {
+    url: 'http://www.maswired.com/operation-code-wants-veterans-to-work-in-tech/',
+    title: 'Operation Code wants veterans to work in tech',
+  },
+  {
+    url: 'http://diversemilitary.net/2017/06/27/coding-bootcamps-accepts-gi-bill/',
+    title: 'Coding Bootcamps Accepts GI Bill',
+  },
+  {
+    url:
+      'https://news.clearancejobs.com/2017/07/17/operation-code-looks-help-veterans-land-careers/',
+    title: 'Operation Code Looks to Help Veterans Land IT Careers',
+  },
+];
+
+const NYC = [
+  {
+    url:
+      'https://wtkr.com/2018/05/16/new-program-aims-to-help-veterans-land-jobs-in-tech-industry/',
+    title: 'New program aims to help veterans land jobs in tech industry',
+  },
+  {
+    url:
+      'http://www.wdtv.com/content/news/Veterans-in-Residence-program-helping-veterans-grow-businesses-482707221.html',
+    title: 'Veterans in Residence',
+  },
+  {
+    url:
+      'https://www.wework.com/blog/posts/after-flying-solo-veterans-find-others-who-have-their-back',
+    title: 'After Flying Solo, Veterans Find Others Who Have Their Backs',
+  },
+];
+
+export { NYC, Boston, General };

components/Press/PressLinks/PressLinks.css

@@ -0,0 +1,34 @@
+.logos a {
+  color: #249cbc;
+  text-decoration: none;
+}
+
+.logos .articlesGroup > h2 {
+  text-align: center;
+}
+
+.logos .articlesGroup {
+  width: 375px;
+  padding-top: 15px;
+}
+
+@media screen and (max-width: 414px) {
+  .logos .articlesGroup {
+    width: 275px;
+  }
+}
+
+.flexContainer {
+  width: 100%;
+  display: flex;
+  flex-flow: row wrap;
+  justify-content: space-around;
+  padding: 15px 0 0 0;
+}
+
+button.ShowAllButton {
+  min-width: 100px;
+  line-height: 0.5;
+  font-size: 0.9rem;
+  margin: auto;
+}

components/Press/PressLinks/PressLinks.js

@@ -0,0 +1,32 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import styles from './PressLinks.css';
+import * as Links from './Links';
+import LinkGroup from './LinkGroup';
+
+PressLinks.propTypes = {
+  MaxLinks: PropTypes.number,
+};
+
+PressLinks.defaultProps = {
+  MaxLinks: 5,
+};
+
+function PressLinks({ MaxLinks }) {
+  return (
+    <div className={styles.logos}>
+      <div className={styles.flexContainer}>
+        {Object.keys(Links).map(group => (
+          <LinkGroup
+            key={`LinkGroup_${group}`}
+            title={group}
+            links={Links[group]}
+            MaxLinks={MaxLinks}
+          />
+        ))}
+      </div>
+    </div>
+  );
+}
+
+export default PressLinks;