Use CSS Modules for page-list component

src/components/__tests__/page-list.test.jsx

@@ -1,6 +1,6 @@
 /* eslint-env jest */
 
-import PageList from '../page-list';
+import PageList from '../page-list/page-list';
 import React from 'react';
 import {shallow} from 'enzyme';
 import simplePages from '../../__mocks__/simple-pages.json';
@@ -27,7 +27,7 @@ describe('page-list', () => {
         pages={simplePages}
       />
     );
-    expect(pageList.find('.page-list tbody tr').first().childAt(1).text())
+    expect(pageList.find('tbody tr').first().childAt(1).text())
       .toBe('NOAA - ncei.noaa.gov, EPA - www3.epa.gov');
   });
 });

src/components/page-list/page-list.css

@@ -0,0 +1,33 @@
+/* ===== List View ===== */
+.page-list {
+  table-layout: fixed;
+}
+
+.page-list>tbody>tr {
+  cursor: pointer;
+}
+
+.page-list>tbody>tr:hover {
+  background-color: #eee;
+}
+
+.page-list>td {
+  overflow-wrap: break-word;
+  word-wrap: break-word;
+}
+
+.page-list>th[data-name="capture-date"] {
+  width: 12%;
+}
+
+.page-list>th[data-name="site"] {
+  width: 15%;
+}
+
+.page-list>th[data-name="page-name"] {
+  width: 33%;
+}
+
+.page-list>th[data-name="url"] {
+  width: 40%;
+}

src/components/page-list.jsx → src/components/page-list/page-list.jsx

@@ -1,8 +1,8 @@
-import {dateFormatter, formatSites} from '../scripts/formatters';
-import Loading from './loading';
+import {dateFormatter, formatSites} from '../../scripts/formatters';
+import Loading from '../loading';
 import React from 'react';
-import SearchBar from './search-bar/search-bar';
-
+import SearchBar from '../search-bar/search-bar';
+import './page-list.css';
 /**
  * These props also inherit from React Router's RouteComponent props
  * @typedef {Object} PageListProps
@@ -47,7 +47,7 @@ export default class PageList extends React.Component {
     return (
       <div className="row">
         <div className="col-md-12">
-          <table className="page-list table">
+          <table className="table" styleName="page-list" >
             <thead>
               {this.renderHeader()}
             </thead>
@@ -75,7 +75,7 @@ export default class PageList extends React.Component {
     const onClick = this.didClickRow.bind(this, record);
 
     return (
-      <tr key={record.uuid} onClick={onClick}>
+      <tr styleName="page-list" key={record.uuid} onClick={onClick}>
         <td>{record.latest ? dateFormatter.format(record.latest.capture_time) : 'No saved versions'}</td>
         <td>{formatSites(record.tags)}</td>
         <td>{record.title}</td>

src/components/web-monitoring-ui.jsx

@@ -9,7 +9,7 @@ import Loading from './loading';
 import LoginForm from './login-form';
 import NavBar from './nav-bar';
 import PageDetails from './page-details';
-import PageList from './page-list';
+import PageList from './page-list/page-list';
 import VersionRedirect from './version-redirect';
 
 const configuration = window.webMonitoringConfig;

src/css/styles.css

@@ -126,40 +126,6 @@ body {
   padding: 0;
 }
 
-/* ===== List View ===== */
-.page-list {
-  table-layout: fixed;
-}
-
-.page-list tbody tr {
-  cursor: pointer;
-}
-
-.page-list tbody tr:hover {
-  background-color: #eee;
-}
-
-.page-list td {
-  overflow-wrap: break-word;
-  word-wrap: break-word;
-}
-
-.page-list th[data-name="capture-date"] {
-  width: 12%;
-}
-
-.page-list th[data-name="site"] {
-  width: 15%;
-}
-
-.page-list th[data-name="page-name"] {
-  width: 33%;
-}
-
-.page-list th[data-name="url"] {
-  width: 40%;
-}
-
 /* ===== Page Detail View ===== */
 .page-title {
   font-size: 1.5em;