a bit of clean up

assets/src/scripts/monitoring-location/components/hydrograph/parameters.js

@@ -128,10 +128,10 @@ const drawTopPeriodOfRecordRow = function(container, parameter) {
     gridRowInnerTopPeriodOfRecord.append('div')
         .attr('class', 'grid-row-period-of-record-text')
         .text(`${parameter.periodOfRecord.begin_date} to ${parameter.periodOfRecord.end_date}`);
-    const TopPeriodOfRecordRowExpansionControlDiv = gridRowInnerTopPeriodOfRecord.append('div')
+    const topPeriodOfRecordRowExpansionControlDiv = gridRowInnerTopPeriodOfRecord.append('div')
         .attr('class', 'toggle-for-top-period-of-record');
 
-    drawRowExpansionControl(TopPeriodOfRecordRowExpansionControlDiv, parameter, 'mobile');
+    drawRowExpansionControl(topPeriodOfRecordRowExpansionControlDiv, parameter, 'mobile');
 };
 
 /*
@@ -146,7 +146,7 @@ const drawRadioButtonRow = function(container, parameter, store) {
     const radioButtonDiv = gridRowInnerWithRadioButton.append('div')
         .attr('class', 'grid-col-1 radio-button__param-select')
         .append('div')
-        .attr('class', 'usa-radio');
+            .attr('class', 'usa-radio');
     radioButtonDiv.append('input')
         .attr('class', 'usa-radio__input')
         .attr('id', `radio-${parameter.parameterCode}`)

assets/src/scripts/monitoring-location/components/hydrograph/parameters.test.js

@@ -105,7 +105,7 @@ describe('monitoring-location/components/hydrograph/parameters module', () => {
         });
     });
 
-    it('Expects clicking on a row will expand and contact the correct rows', function() {
+    it('Expects clicking on a row will expand and contract the correct rows', function() {
         store = configureStore(TEST_STATE);
         drawSelectionList(div, store, '11112222');
 
@@ -113,9 +113,11 @@ describe('monitoring-location/components/hydrograph/parameters module', () => {
         const secondTargetRow = div.select('#container-row-72019');
         expect(select('#expansion-container-row-00010').attr('hidden')).toBe('true');
         expect(select('#expansion-container-row-72019').attr('hidden')).toBe('true');
+
         firstTargetRow.dispatch('click');
         expect(select('#expansion-container-row-00010').attr('hidden')).toBe(null);
         expect(select('#expansion-container-row-72019').attr('hidden')).toBe('true');
+
         secondTargetRow.dispatch('click');
         expect(select('#expansion-container-row-00010').attr('hidden')).toBe('true');
         expect(select('#expansion-container-row-72019').attr('hidden')).toBe(null);
@@ -130,14 +132,17 @@ describe('monitoring-location/components/hydrograph/parameters module', () => {
         expect(firstToggleTarget.attr('aria-expanded')).toBe('false');
         expect(select('#expansion-container-row-00010').attr('hidden')).toBe('true');
         expect(select('#expansion-container-row-72019').attr('hidden')).toBe('true');
+
         firstToggleTarget.dispatch('click');
         expect(firstToggleTarget.attr('aria-expanded')).toBe('true');
         expect(select('#expansion-container-row-00010').attr('hidden')).toBe(null);
         expect(select('#expansion-container-row-72019').attr('hidden')).toBe('true');
+
         secondToggleTarget.dispatch('click');
         expect(secondToggleTarget.attr('aria-expanded')).toBe('true');
         expect(select('#expansion-container-row-00010').attr('hidden')).toBe('true');
         expect(select('#expansion-container-row-72019').attr('hidden')).toBe(null);
+
         secondToggleTarget.dispatch('click'); // click same target a second time
         expect(secondToggleTarget.attr('aria-expanded')).toBe('false');
         expect(select('#expansion-container-row-00010').attr('hidden')).toBe('true');

assets/src/styles/partials/_parameter-list.scss

@@ -48,6 +48,14 @@ $row-border-color: 'black';
     }
 
     .grid-row-inner {
+      @include u-padding-right(0);
+      @include u-padding-left(0);
+
+      .wateralert-row {
+        @include grid-col;
+        @include grid-offset(1);
+      }
+
       .usa-radio__label {
         @include u-margin-top(0);
         @include u-margin-bottom(0);
@@ -63,16 +71,6 @@ $row-border-color: 'black';
       }
     }
 
-    .grid-row-inner {
-      @include u-padding-right(0);
-      @include u-padding-left(0);
-
-      .wateralert-row {
-        @include grid-col;
-        @include grid-offset(1);
-      }
-    }
-
     .period-of-record__param-select {
       @include grid-col;
       display: none;
@@ -84,7 +82,7 @@ $row-border-color: 'black';
     #period-of-record-and-toggle-container {
       display: none;
       @include at-media('tablet') {
-        display: flex;
+        @include u-flex;
         justify-content: space-between;
       }
     }