Add/update data product disclaimer (#481)

* Add/update data product disclaimer Moves the data product disclaimer above the date filter and adds it to the chart as well. Addresses DATAP-1225 * Update Jest test snapshots * Fix product disclaimer punctuation
cfpb · Nov 7, 2023 · d4f0f0a · d4f0f0a
1 parent ff24a6c
commit d4f0f0a
Show file tree

Hide file tree

Showing 8 changed files with 74 additions and 67 deletions.
diff --git a/dist/ccdb5.css b/dist/ccdb5.css
diff --git a/dist/ccdb5.css.map b/dist/ccdb5.css.map
diff --git a/dist/ccdb5.js b/dist/ccdb5.js
diff --git a/dist/ccdb5.js.map b/dist/ccdb5.js.map
diff --git a/src/components/Filters/DateFilter.js b/src/components/Filters/DateFilter.js
@@ -22,7 +22,7 @@ dayjs.extend(dayjsIsBetween);
 dayjs.extend(dayjsUtc);
 
 const WARN_SERIES_BREAK =
-  'CFPB updated product and issue options in April 2017 and August 2023';
+  'CFPB updated product and issue options in April 2017 and August 2023.';
 
 const LEARN_SERIES_BREAK =
   'https://www.consumerfinance.gov/data-research/consumer-complaints/#past-changes';
@@ -132,6 +132,19 @@ export const DateFilter = () => {
   return (
     <CollapsibleFilter title={title} className="aggregation date-filter">
       <div>
+        <p className="u-mt15">
+          {' '}
+          {WARN_SERIES_BREAK}{' '}
+          <a
+            href={LEARN_SERIES_BREAK}
+            target="_blank"
+            rel="noopener noreferrer"
+            aria-label="Learn more about Product and
+                  Issue changes (opens in new window)"
+          >
+            Learn More
+          </a>
+        </p>
         <ul className="date-inputs">
           <li>
             <label
@@ -207,20 +220,6 @@ export const DateFilter = () => {
             </span>
           </>
         ) : null}
-        <p className="u-mt15">
-          {' '}
-          {WARN_SERIES_BREAK}
-          <a
-            href={LEARN_SERIES_BREAK}
-            target="_blank"
-            rel="noopener noreferrer"
-            aria-label="Learn more about Product and
-                  Issue changes (opens in new window)"
-          >
-            {' '}
-            Learn More
-          </a>
-        </p>
       </div>
     </CollapsibleFilter>
   );

diff --git a/src/components/Filters/__tests__/__snapshots__/DateFilter.spec.js.snap b/src/components/Filters/__tests__/__snapshots__/DateFilter.spec.js.snap
@@ -36,6 +36,21 @@ exports[`component::DateFilter snapshot shows a warning for April 2017 1`] = `
   >
     <p />
     <div>
+      <p
+        className="u-mt15"
+      >
+         
+        CFPB updated product and issue options in April 2017 and August 2023.
+         
+        <a
+          aria-label="Learn more about Product and Issue changes (opens in new window)"
+          href="https://www.consumerfinance.gov/data-research/consumer-complaints/#past-changes"
+          rel="noopener noreferrer"
+          target="_blank"
+        >
+          Learn More
+        </a>
+      </p>
       <ul
         className="date-inputs"
       >
@@ -151,21 +166,6 @@ exports[`component::DateFilter snapshot shows a warning for April 2017 1`] = `
           All
         </button>
       </section>
-      <p
-        className="u-mt15"
-      >
-         
-        CFPB updated product and issue options in April 2017 and August 2023
-        <a
-          aria-label="Learn more about Product and Issue changes (opens in new window)"
-          href="https://www.consumerfinance.gov/data-research/consumer-complaints/#past-changes"
-          rel="noopener noreferrer"
-          target="_blank"
-        >
-           
-          Learn More
-        </a>
-      </p>
     </div>
   </div>
 </section>
@@ -207,6 +207,21 @@ exports[`component::DateFilter snapshot shows errors 1`] = `
   >
     <p />
     <div>
+      <p
+        className="u-mt15"
+      >
+         
+        CFPB updated product and issue options in April 2017 and August 2023.
+         
+        <a
+          aria-label="Learn more about Product and Issue changes (opens in new window)"
+          href="https://www.consumerfinance.gov/data-research/consumer-complaints/#past-changes"
+          rel="noopener noreferrer"
+          target="_blank"
+        >
+          Learn More
+        </a>
+      </p>
       <ul
         className="date-inputs"
       >
@@ -332,21 +347,6 @@ exports[`component::DateFilter snapshot shows errors 1`] = `
           error-round.svg
         </svg>
       </span>
-      <p
-        className="u-mt15"
-      >
-         
-        CFPB updated product and issue options in April 2017 and August 2023
-        <a
-          aria-label="Learn more about Product and Issue changes (opens in new window)"
-          href="https://www.consumerfinance.gov/data-research/consumer-complaints/#past-changes"
-          rel="noopener noreferrer"
-          target="_blank"
-        >
-           
-          Learn More
-        </a>
-      </p>
     </div>
   </div>
 </section>
@@ -388,6 +388,21 @@ exports[`component::DateFilter snapshot supports no dates in the Redux Store 1`]
   >
     <p />
     <div>
+      <p
+        className="u-mt15"
+      >
+         
+        CFPB updated product and issue options in April 2017 and August 2023.
+         
+        <a
+          aria-label="Learn more about Product and Issue changes (opens in new window)"
+          href="https://www.consumerfinance.gov/data-research/consumer-complaints/#past-changes"
+          rel="noopener noreferrer"
+          target="_blank"
+        >
+          Learn More
+        </a>
+      </p>
       <ul
         className="date-inputs"
       >
@@ -503,21 +518,6 @@ exports[`component::DateFilter snapshot supports no dates in the Redux Store 1`]
           All
         </button>
       </section>
-      <p
-        className="u-mt15"
-      >
-         
-        CFPB updated product and issue options in April 2017 and August 2023
-        <a
-          aria-label="Learn more about Product and Issue changes (opens in new window)"
-          href="https://www.consumerfinance.gov/data-research/consumer-complaints/#past-changes"
-          rel="noopener noreferrer"
-          target="_blank"
-        >
-           
-          Learn More
-        </a>
-      </p>
     </div>
   </div>
 </section>

diff --git a/src/components/Trends/ExternalTooltip.js b/src/components/Trends/ExternalTooltip.js
@@ -102,6 +102,9 @@ export class ExternalTooltip extends React.Component {
               </ul>
             )}
           </div>
+          <p className="a-micro-copy warn">
+            CFPB updated product and issue options in April 2017 and August 2023
+          </p>
         </section>
       );
     }

diff --git a/src/components/Trends/TrendsPanel.less b/src/components/Trends/TrendsPanel.less
@@ -79,6 +79,11 @@
               float: right;
             }
           }
+
+          &.warn {
+            border-bottom: 0;
+            padding-top: 15px;
+          }
         }
 
         ul.tooltip-ul {
-Original file line number
+Diff line change
@@ Expand Up / @@ -102,6 +102,9 @@ export class ExternalTooltip extends React.Component { @@
                   </ul>
                 )}
               </div>
+              <p className="a-micro-copy warn">
+                CFPB updated product and issue options in April 2017 and August 2023
+              </p>
             </section>
           );
         }
@@ Expand Down @@