Better press page

common/styles/globalStyles.css

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

common/utils/__tests__/prop-utils.test.js

@@ -0,0 +1,52 @@
+/* eslint-env jest */
+import { getPropsStartingWith, getDataAttributes, getAriaAttributes } from '../prop-utils';
+
+describe('getPropsStartingWith', () => {
+  test('should return the props that start with the given string', () => {
+    const props = {
+      'test-1': 'test',
+      'test-2': 'test 2',
+      'another-prop': 'test 3',
+    };
+
+    const result = getPropsStartingWith('test-', props);
+    expect(result).toEqual({
+      'test-1': 'test',
+      'test-2': 'test 2',
+    });
+  });
+});
+
+describe('getDataAttributes', () => {
+  test('should return only the props that start with `data-`', () => {
+    const props = {
+      'data-ci': 'ci',
+      'data-gtm': 'gtm',
+      children: 'test children',
+    };
+
+    const result = getDataAttributes(props);
+
+    expect(result).toEqual({
+      'data-ci': 'ci',
+      'data-gtm': 'gtm',
+    });
+  });
+});
+
+describe('getAriaAttributes', () => {
+  test('should return only the props that start with `aria-`', () => {
+    const props = {
+      'aria-label': 'a11y rocks!',
+      'aria-checked': 'true',
+      children: 'test children',
+    };
+
+    const result = getAriaAttributes(props);
+
+    expect(result).toEqual({
+      'aria-label': 'a11y rocks!',
+      'aria-checked': 'true',
+    });
+  });
+});

common/utils/prop-utils.js

@@ -0,0 +1,14 @@
+// General utilities for dealing with component prop types
+import pickBy from 'lodash/pickBy';
+
+export function getPropsStartingWith(string, props) {
+  return pickBy(props, (value, key) => key.startsWith(string));
+}
+
+export function getDataAttributes(props) {
+  return getPropsStartingWith('data-', props);
+}
+
+export function getAriaAttributes(props) {
+  return getPropsStartingWith('aria-', props);
+}

components/Cards/ImageCard/__tests__/__snapshots__/ImageCard.test.js.snap

@@ -43,9 +43,11 @@ exports[`ImageCard should render properly with some props assigned 1`] = `
           }
         }
         className=""
+        datum=""
         disabled={false}
         fullWidth={false}
         href="https://www.testlink.com"
+        onClick={[Function]}
         tabIndex={0}
         theme="primary"
         type="button"

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/ArticleGroup/ArticleGroup.css

@@ -0,0 +1,15 @@
+.articlesGroup > h2 {
+  text-align: center;
+}
+
+.articlesGroup {
+  max-width: 375px;
+  padding-top: 15px;
+}
+
+.articlesGroup .areAllLinksVisibleButton {
+  min-width: 100px;
+  line-height: 0.5;
+  font-size: 0.9rem;
+  margin: auto;
+}

components/Press/PressLinks/ArticleGroup/ArticleGroup.js

@@ -0,0 +1,64 @@
+import React, { Component } from 'react';
+import PropTypes from 'prop-types';
+import OutboundLink from 'components/_common_/OutboundLink/OutboundLink';
+import Button from 'components/_common_/Button/Button';
+import styles from './ArticleGroup.css';
+
+class ArticleGroup extends Component {
+  static propTypes = {
+    articles: PropTypes.arrayOf(
+      PropTypes.shape({
+        title: PropTypes.string.isRequired,
+        url: PropTypes.string.isRequired,
+      }),
+    ).isRequired,
+    numberOfInitiallyVisibleLinks: PropTypes.number.isRequired,
+    region: PropTypes.string.isRequired,
+  };
+
+  state = {
+    areAllLinksVisible: false,
+  };
+
+  clickHandler = () => {
+    this.setState(prevState => ({ areAllLinksVisible: !prevState.areAllLinksVisible }));
+  };
+
+  render() {
+    const { areAllLinksVisible } = this.state;
+    const { articles, region, numberOfInitiallyVisibleLinks } = this.props;
+    return (
+      <div className={styles.articlesGroup}>
+        <h2>{region}</h2>
+        <ul>
+          {articles.map((link, index) => {
+            const isArticleVisible = areAllLinksVisible || index < numberOfInitiallyVisibleLinks;
+
+            return isArticleVisible ? (
+              <li key={`GroupLink_${link.url}`}>
+                <OutboundLink
+                  href={link.url}
+                  analyticsEventLabel="Press Article"
+                >
+                  {link.title}
+                </OutboundLink>
+              </li>
+            ) : null;
+          })}
+        </ul>
+        {articles.length > numberOfInitiallyVisibleLinks && (
+          <Button
+            aria-pressed={areAllLinksVisible}
+            className={styles.areAllLinksVisibleButton}
+            theme={areAllLinksVisible ? 'slate' : 'primary'}
+            onClick={this.clickHandler}
+          >
+            {areAllLinksVisible ? 'Show Less' : 'Show All'}
+          </Button>
+        )}
+      </div>
+    );
+  }
+}
+
+export default ArticleGroup;

components/Press/PressLinks/ArticleGroup/__tests__/ArticleGroup.test.js

@@ -0,0 +1,75 @@
+import React from 'react';
+import createShallowSnapshotTest from 'test-utils/createShallowSnapshotTest';
+import { mount, shallow } from 'enzyme';
+
+import ArticleGroup from '../ArticleGroup';
+
+describe('ArticleGroup', () => {
+  test('should render properly with required props', () =>
+    createShallowSnapshotTest(
+      <ArticleGroup
+        region="test"
+        articles={[{ title: 'Example', url: 'https://example.com' }]}
+        numberOfInitiallyVisibleLinks={1}
+      />,
+    ));
+
+  test('should render properly with required props and 3 links and a button', () =>
+    createShallowSnapshotTest(
+      <ArticleGroup
+        region="test"
+        articles={[
+          { title: 'Example', url: 'https://example.com' },
+          { title: 'Example', url: 'https://example.com' },
+          { title: 'Example', url: 'https://example.com' },
+        ]}
+        numberOfInitiallyVisibleLinks={1}
+      />,
+    ));
+
+  test('should setState when clicking Show All button', () => {
+    const ArticleGroupShallowInstance = shallow(
+      <ArticleGroup
+        region="test"
+        articles={[
+          { title: 'Example', url: 'https://example.com' },
+          { title: 'Example', url: 'https://example.com' },
+          { title: 'Example', url: 'https://example.com' },
+        ]}
+        numberOfInitiallyVisibleLinks={1}
+      />,
+    );
+
+    ArticleGroupShallowInstance.instance().clickHandler();
+
+    expect(ArticleGroupShallowInstance.state().areAllLinksVisible).toEqual(true);
+  });
+
+  test('should not create a button if not enough links', () => {
+    const wrap = mount(
+      <ArticleGroup
+        region="test"
+        articles={[{ title: 'Example', url: 'https://example.com' }]}
+        numberOfInitiallyVisibleLinks={5}
+      />,
+    );
+
+    expect(wrap.find('button').exists()).toEqual(false);
+  });
+
+  test('should create a button if enough links are available', () => {
+    const wrap = mount(
+      <ArticleGroup
+        region="test"
+        articles={[
+          { title: 'Example', url: 'https://example.com' },
+          { title: 'Example', url: 'https://example.com' },
+          { title: 'Example', url: 'https://example.com' },
+        ]}
+        numberOfInitiallyVisibleLinks={1}
+      />,
+    );
+
+    expect(wrap.find('button').exists()).toEqual(true);
+  });
+});

components/Press/PressLinks/ArticleGroup/__tests__/__snapshots__/ArticleGroup.test.js.snap

@@ -0,0 +1,64 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`ArticleGroup should render properly with required props 1`] = `
+<div
+  className="articlesGroup"
+>
+  <h2>
+    test
+  </h2>
+  <ul>
+    <li>
+      <OutboundLink
+        analyticsEventLabel="Press Article"
+        className=""
+        hasIcon={true}
+        href="https://example.com"
+      >
+        Example
+      </OutboundLink>
+    </li>
+  </ul>
+</div>
+`;
+
+exports[`ArticleGroup should render properly with required props and 3 links and a button 1`] = `
+<div
+  className="articlesGroup"
+>
+  <h2>
+    test
+  </h2>
+  <ul>
+    <li>
+      <OutboundLink
+        analyticsEventLabel="Press Article"
+        className=""
+        hasIcon={true}
+        href="https://example.com"
+      >
+        Example
+      </OutboundLink>
+    </li>
+  </ul>
+  <Button
+    analyticsObject={
+      Object {
+        "action": "Button Selected",
+        "category": "Interactions",
+      }
+    }
+    aria-pressed={false}
+    className="areAllLinksVisibleButton"
+    datum=""
+    disabled={false}
+    fullWidth={false}
+    onClick={[Function]}
+    tabIndex={0}
+    theme="primary"
+    type="button"
+  >
+    Show All
+  </Button>
+</div>
+`;