qpp-style 9.20.0 → 9.20.2

package/coverage/lcov-report/react/components/NotificationBanner/index.js.html

@@ -23,30 +23,30 @@
         <div class='clearfix'>
             
             <div class='fl pad1y space-right2'>
-                <span class="strong">60% </span>
+                <span class="strong">29.82% </span>
                 <span class="quiet">Statements</span>
-                <span class='fraction'>36/60</span>
+                <span class='fraction'>17/57</span>
             </div>
         
             
             <div class='fl pad1y space-right2'>
-                <span class="strong">32.14% </span>
+                <span class="strong">10% </span>
                 <span class="quiet">Branches</span>
-                <span class='fraction'>9/28</span>
+                <span class='fraction'>4/40</span>
             </div>
         
             
             <div class='fl pad1y space-right2'>
-                <span class="strong">57.14% </span>
+                <span class="strong">26.66% </span>
                 <span class="quiet">Functions</span>
-                <span class='fraction'>8/14</span>
+                <span class='fraction'>4/15</span>
             </div>
         
             
             <div class='fl pad1y space-right2'>
-                <span class="strong">60% </span>
+                <span class="strong">29.82% </span>
                 <span class="quiet">Lines</span>
-                <span class='fraction'>36/60</span>
+                <span class='fraction'>17/57</span>
             </div>
         
             
@@ -61,7 +61,7 @@
             </div>
         </template>
     </div>
-    <div class='status-line medium'></div>
+    <div class='status-line low'></div>
     <pre><table class="coverage">
 <tr><td class="line-count quiet"><a name='L1'></a><a href='#L1'>1</a>
 <a name='L2'></a><a href='#L2'>2</a>
@@ -284,7 +284,52 @@
 <a name='L219'></a><a href='#L219'>219</a>
 <a name='L220'></a><a href='#L220'>220</a>
 <a name='L221'></a><a href='#L221'>221</a>
-<a name='L222'></a><a href='#L222'>222</a></td><td class="line-coverage quiet"><span class="cline-any cline-neutral">&nbsp;</span>
+<a name='L222'></a><a href='#L222'>222</a>
+<a name='L223'></a><a href='#L223'>223</a>
+<a name='L224'></a><a href='#L224'>224</a>
+<a name='L225'></a><a href='#L225'>225</a>
+<a name='L226'></a><a href='#L226'>226</a>
+<a name='L227'></a><a href='#L227'>227</a>
+<a name='L228'></a><a href='#L228'>228</a>
+<a name='L229'></a><a href='#L229'>229</a>
+<a name='L230'></a><a href='#L230'>230</a>
+<a name='L231'></a><a href='#L231'>231</a>
+<a name='L232'></a><a href='#L232'>232</a>
+<a name='L233'></a><a href='#L233'>233</a>
+<a name='L234'></a><a href='#L234'>234</a>
+<a name='L235'></a><a href='#L235'>235</a>
+<a name='L236'></a><a href='#L236'>236</a>
+<a name='L237'></a><a href='#L237'>237</a>
+<a name='L238'></a><a href='#L238'>238</a>
+<a name='L239'></a><a href='#L239'>239</a>
+<a name='L240'></a><a href='#L240'>240</a>
+<a name='L241'></a><a href='#L241'>241</a>
+<a name='L242'></a><a href='#L242'>242</a>
+<a name='L243'></a><a href='#L243'>243</a>
+<a name='L244'></a><a href='#L244'>244</a>
+<a name='L245'></a><a href='#L245'>245</a>
+<a name='L246'></a><a href='#L246'>246</a>
+<a name='L247'></a><a href='#L247'>247</a>
+<a name='L248'></a><a href='#L248'>248</a>
+<a name='L249'></a><a href='#L249'>249</a>
+<a name='L250'></a><a href='#L250'>250</a>
+<a name='L251'></a><a href='#L251'>251</a>
+<a name='L252'></a><a href='#L252'>252</a>
+<a name='L253'></a><a href='#L253'>253</a>
+<a name='L254'></a><a href='#L254'>254</a>
+<a name='L255'></a><a href='#L255'>255</a>
+<a name='L256'></a><a href='#L256'>256</a>
+<a name='L257'></a><a href='#L257'>257</a>
+<a name='L258'></a><a href='#L258'>258</a>
+<a name='L259'></a><a href='#L259'>259</a>
+<a name='L260'></a><a href='#L260'>260</a>
+<a name='L261'></a><a href='#L261'>261</a>
+<a name='L262'></a><a href='#L262'>262</a>
+<a name='L263'></a><a href='#L263'>263</a>
+<a name='L264'></a><a href='#L264'>264</a>
+<a name='L265'></a><a href='#L265'>265</a>
+<a name='L266'></a><a href='#L266'>266</a></td><td class="line-coverage quiet"><span class="cline-any cline-neutral">&nbsp;</span>
+<span class="cline-any cline-neutral">&nbsp;</span>
 <span class="cline-any cline-neutral">&nbsp;</span>
 <span class="cline-any cline-neutral">&nbsp;</span>
 <span class="cline-any cline-neutral">&nbsp;</span>
@@ -293,79 +338,72 @@
 <span class="cline-any cline-neutral">&nbsp;</span>
 <span class="cline-any cline-neutral">&nbsp;</span>
 <span class="cline-any cline-yes">2x</span>
-<span class="cline-any cline-no">&nbsp;</span>
-<span class="cline-any cline-no">&nbsp;</span>
-<span class="cline-any cline-no">&nbsp;</span>
-<span class="cline-any cline-no">&nbsp;</span>
+<span class="cline-any cline-neutral">&nbsp;</span>
+<span class="cline-any cline-yes">2x</span>
 <span class="cline-any cline-neutral">&nbsp;</span>
 <span class="cline-any cline-neutral">&nbsp;</span>
 <span class="cline-any cline-neutral">&nbsp;</span>
 <span class="cline-any cline-neutral">&nbsp;</span>
 <span class="cline-any cline-yes">2x</span>
+<span class="cline-any cline-yes">2x</span>
+<span class="cline-any cline-yes">2x</span>
+<span class="cline-any cline-yes">2x</span>
 <span class="cline-any cline-neutral">&nbsp;</span>
 <span class="cline-any cline-neutral">&nbsp;</span>
 <span class="cline-any cline-neutral">&nbsp;</span>
+<span class="cline-any cline-yes">2x</span>
+<span class="cline-any cline-no">&nbsp;</span>
 <span class="cline-any cline-neutral">&nbsp;</span>
 <span class="cline-any cline-neutral">&nbsp;</span>
 <span class="cline-any cline-neutral">&nbsp;</span>
-<span class="cline-any cline-yes">4x</span>
 <span class="cline-any cline-neutral">&nbsp;</span>
-<span class="cline-any cline-yes">4x</span>
-<span class="cline-any cline-yes">4x</span>
-<span class="cline-any cline-yes">4x</span>
-<span class="cline-any cline-yes">4x</span>
-<span class="cline-any cline-yes">4x</span>
-<span class="cline-any cline-yes">4x</span>
-<span class="cline-any cline-yes">4x</span>
-<span class="cline-any cline-yes">4x</span>
+<span class="cline-any cline-yes">2x</span>
+<span class="cline-any cline-yes">2x</span>
 <span class="cline-any cline-neutral">&nbsp;</span>
-<span class="cline-any cline-yes">4x</span>
 <span class="cline-any cline-neutral">&nbsp;</span>
-<span class="cline-any cline-yes">2x</span>
 <span class="cline-any cline-neutral">&nbsp;</span>
-<span class="cline-any cline-yes">2x</span>
+<span class="cline-any cline-neutral">&nbsp;</span>
+<span class="cline-any cline-no">&nbsp;</span>
+<span class="cline-any cline-no">&nbsp;</span>
+<span class="cline-any cline-no">&nbsp;</span>
 <span class="cline-any cline-no">&nbsp;</span>
 <span class="cline-any cline-neutral">&nbsp;</span>
 <span class="cline-any cline-neutral">&nbsp;</span>
-<span class="cline-any cline-yes">2x</span>
-<span class="cline-any cline-no">&nbsp;</span>
 <span class="cline-any cline-neutral">&nbsp;</span>
 <span class="cline-any cline-neutral">&nbsp;</span>
-<span class="cline-any cline-yes">2x</span>
 <span class="cline-any cline-neutral">&nbsp;</span>
-<span class="cline-any cline-yes">2x</span>
-<span class="cline-any cline-yes">2x</span>
 <span class="cline-any cline-neutral">&nbsp;</span>
 <span class="cline-any cline-neutral">&nbsp;</span>
 <span class="cline-any cline-neutral">&nbsp;</span>
-<span class="cline-any cline-yes">4x</span>
 <span class="cline-any cline-neutral">&nbsp;</span>
-<span class="cline-any cline-yes">2x</span>
-<span class="cline-any cline-yes">2x</span>
 <span class="cline-any cline-neutral">&nbsp;</span>
 <span class="cline-any cline-neutral">&nbsp;</span>
+<span class="cline-any cline-yes">1x</span>
+<span class="cline-any cline-yes">1x</span>
+<span class="cline-any cline-no">&nbsp;</span>
+<span class="cline-any cline-neutral">&nbsp;</span>
+<span class="cline-any cline-no">&nbsp;</span>
+<span class="cline-any cline-neutral">&nbsp;</span>
+<span class="cline-any cline-neutral">&nbsp;</span>
+<span class="cline-any cline-neutral">&nbsp;</span>
+<span class="cline-any cline-no">&nbsp;</span>
+<span class="cline-any cline-neutral">&nbsp;</span>
 <span class="cline-any cline-neutral">&nbsp;</span>
-<span class="cline-any cline-yes">4x</span>
-<span class="cline-any cline-yes">2x</span>
-<span class="cline-any cline-yes">2x</span>
 <span class="cline-any cline-neutral">&nbsp;</span>
-<span class="cline-any cline-yes">2x</span>
 <span class="cline-any cline-neutral">&nbsp;</span>
 <span class="cline-any cline-neutral">&nbsp;</span>
 <span class="cline-any cline-neutral">&nbsp;</span>
-<span class="cline-any cline-yes">2x</span>
 <span class="cline-any cline-neutral">&nbsp;</span>
 <span class="cline-any cline-neutral">&nbsp;</span>
-<span class="cline-any cline-yes">4x</span>
-<span class="cline-any cline-yes">2x</span>
 <span class="cline-any cline-no">&nbsp;</span>
 <span class="cline-any cline-no">&nbsp;</span>
 <span class="cline-any cline-neutral">&nbsp;</span>
+<span class="cline-any cline-no">&nbsp;</span>
 <span class="cline-any cline-neutral">&nbsp;</span>
 <span class="cline-any cline-neutral">&nbsp;</span>
-<span class="cline-any cline-no">&nbsp;</span>
 <span class="cline-any cline-neutral">&nbsp;</span>
 <span class="cline-any cline-neutral">&nbsp;</span>
+<span class="cline-any cline-no">&nbsp;</span>
 <span class="cline-any cline-neutral">&nbsp;</span>
 <span class="cline-any cline-neutral">&nbsp;</span>
 <span class="cline-any cline-neutral">&nbsp;</span>
@@ -375,9 +413,8 @@
 <span class="cline-any cline-neutral">&nbsp;</span>
 <span class="cline-any cline-neutral">&nbsp;</span>
 <span class="cline-any cline-neutral">&nbsp;</span>
+<span class="cline-any cline-no">&nbsp;</span>
 <span class="cline-any cline-neutral">&nbsp;</span>
-<span class="cline-any cline-yes">4x</span>
-<span class="cline-any cline-yes">4x</span>
 <span class="cline-any cline-neutral">&nbsp;</span>
 <span class="cline-any cline-neutral">&nbsp;</span>
 <span class="cline-any cline-neutral">&nbsp;</span>
@@ -385,7 +422,7 @@
 <span class="cline-any cline-neutral">&nbsp;</span>
 <span class="cline-any cline-neutral">&nbsp;</span>
 <span class="cline-any cline-neutral">&nbsp;</span>
-<span class="cline-any cline-yes">4x</span>
+<span class="cline-any cline-no">&nbsp;</span>
 <span class="cline-any cline-no">&nbsp;</span>
 <span class="cline-any cline-no">&nbsp;</span>
 <span class="cline-any cline-neutral">&nbsp;</span>
@@ -420,17 +457,17 @@
 <span class="cline-any cline-neutral">&nbsp;</span>
 <span class="cline-any cline-neutral">&nbsp;</span>
 <span class="cline-any cline-neutral">&nbsp;</span>
-<span class="cline-any cline-yes">4x</span>
-<span class="cline-any cline-no">&nbsp;</span>
 <span class="cline-any cline-no">&nbsp;</span>
 <span class="cline-any cline-no">&nbsp;</span>
 <span class="cline-any cline-no">&nbsp;</span>
-<span class="cline-any cline-neutral">&nbsp;</span>
 <span class="cline-any cline-no">&nbsp;</span>
 <span class="cline-any cline-no">&nbsp;</span>
 <span class="cline-any cline-neutral">&nbsp;</span>
 <span class="cline-any cline-neutral">&nbsp;</span>
-<span class="cline-any cline-yes">4x</span>
+<span class="cline-any cline-neutral">&nbsp;</span>
+<span class="cline-any cline-neutral">&nbsp;</span>
+<span class="cline-any cline-neutral">&nbsp;</span>
+<span class="cline-any cline-neutral">&nbsp;</span>
 <span class="cline-any cline-no">&nbsp;</span>
 <span class="cline-any cline-no">&nbsp;</span>
 <span class="cline-any cline-no">&nbsp;</span>
@@ -443,7 +480,6 @@
 <span class="cline-any cline-neutral">&nbsp;</span>
 <span class="cline-any cline-neutral">&nbsp;</span>
 <span class="cline-any cline-neutral">&nbsp;</span>
-<span class="cline-any cline-yes">4x</span>
 <span class="cline-any cline-neutral">&nbsp;</span>
 <span class="cline-any cline-neutral">&nbsp;</span>
 <span class="cline-any cline-neutral">&nbsp;</span>
@@ -452,6 +488,10 @@
 <span class="cline-any cline-neutral">&nbsp;</span>
 <span class="cline-any cline-neutral">&nbsp;</span>
 <span class="cline-any cline-neutral">&nbsp;</span>
+<span class="cline-any cline-no">&nbsp;</span>
+<span class="cline-any cline-no">&nbsp;</span>
+<span class="cline-any cline-no">&nbsp;</span>
+<span class="cline-any cline-neutral">&nbsp;</span>
 <span class="cline-any cline-neutral">&nbsp;</span>
 <span class="cline-any cline-neutral">&nbsp;</span>
 <span class="cline-any cline-neutral">&nbsp;</span>
@@ -463,6 +503,7 @@
 <span class="cline-any cline-neutral">&nbsp;</span>
 <span class="cline-any cline-neutral">&nbsp;</span>
 <span class="cline-any cline-neutral">&nbsp;</span>
+<span class="cline-any cline-no">&nbsp;</span>
 <span class="cline-any cline-neutral">&nbsp;</span>
 <span class="cline-any cline-neutral">&nbsp;</span>
 <span class="cline-any cline-neutral">&nbsp;</span>
@@ -473,6 +514,43 @@
 <span class="cline-any cline-neutral">&nbsp;</span>
 <span class="cline-any cline-neutral">&nbsp;</span>
 <span class="cline-any cline-yes">2x</span>
+<span class="cline-any cline-yes">2x</span>
+<span class="cline-any cline-yes">2x</span>
+<span class="cline-any cline-yes">2x</span>
+<span class="cline-any cline-neutral">&nbsp;</span>
+<span class="cline-any cline-no">&nbsp;</span>
+<span class="cline-any cline-no">&nbsp;</span>
+<span class="cline-any cline-no">&nbsp;</span>
+<span class="cline-any cline-neutral">&nbsp;</span>
+<span class="cline-any cline-no">&nbsp;</span>
+<span class="cline-any cline-neutral">&nbsp;</span>
+<span class="cline-any cline-neutral">&nbsp;</span>
+<span class="cline-any cline-no">&nbsp;</span>
+<span class="cline-any cline-neutral">&nbsp;</span>
+<span class="cline-any cline-neutral">&nbsp;</span>
+<span class="cline-any cline-neutral">&nbsp;</span>
+<span class="cline-any cline-no">&nbsp;</span>
+<span class="cline-any cline-neutral">&nbsp;</span>
+<span class="cline-any cline-neutral">&nbsp;</span>
+<span class="cline-any cline-neutral">&nbsp;</span>
+<span class="cline-any cline-neutral">&nbsp;</span>
+<span class="cline-any cline-neutral">&nbsp;</span>
+<span class="cline-any cline-neutral">&nbsp;</span>
+<span class="cline-any cline-neutral">&nbsp;</span>
+<span class="cline-any cline-neutral">&nbsp;</span>
+<span class="cline-any cline-neutral">&nbsp;</span>
+<span class="cline-any cline-neutral">&nbsp;</span>
+<span class="cline-any cline-neutral">&nbsp;</span>
+<span class="cline-any cline-neutral">&nbsp;</span>
+<span class="cline-any cline-no">&nbsp;</span>
+<span class="cline-any cline-neutral">&nbsp;</span>
+<span class="cline-any cline-neutral">&nbsp;</span>
+<span class="cline-any cline-neutral">&nbsp;</span>
+<span class="cline-any cline-neutral">&nbsp;</span>
+<span class="cline-any cline-no">&nbsp;</span>
+<span class="cline-any cline-neutral">&nbsp;</span>
+<span class="cline-any cline-neutral">&nbsp;</span>
+<span class="cline-any cline-neutral">&nbsp;</span>
 <span class="cline-any cline-neutral">&nbsp;</span>
 <span class="cline-any cline-neutral">&nbsp;</span>
 <span class="cline-any cline-neutral">&nbsp;</span>
@@ -497,6 +575,9 @@
 <span class="cline-any cline-neutral">&nbsp;</span>
 <span class="cline-any cline-neutral">&nbsp;</span>
 <span class="cline-any cline-neutral">&nbsp;</span>
+<span class="cline-any cline-yes">2x</span>
+<span class="cline-any cline-neutral">&nbsp;</span>
+<span class="cline-any cline-neutral">&nbsp;</span>
 <span class="cline-any cline-neutral">&nbsp;</span>
 <span class="cline-any cline-neutral">&nbsp;</span>
 <span class="cline-any cline-neutral">&nbsp;</span>
@@ -505,90 +586,90 @@
 <span class="cline-any cline-neutral">&nbsp;</span>
 <span class="cline-any cline-neutral">&nbsp;</span>
 <span class="cline-any cline-neutral">&nbsp;</span>
-<span class="cline-any cline-neutral">&nbsp;</span></td><td class="text"><pre class="prettyprint lang-js">import React, { useState, useEffect, useRef } from 'react';
+<span class="cline-any cline-neutral">&nbsp;</span>
+<span class="cline-any cline-neutral">&nbsp;</span>
+<span class="cline-any cline-neutral">&nbsp;</span>
+<span class="cline-any cline-neutral">&nbsp;</span>
+<span class="cline-any cline-neutral">&nbsp;</span>
+<span class="cline-any cline-neutral">&nbsp;</span>
+<span class="cline-any cline-neutral">&nbsp;</span>
+<span class="cline-any cline-neutral">&nbsp;</span></td><td class="text"><pre class="prettyprint lang-js">import React, { Component } from 'react';
 import PropTypes from 'prop-types';
-import ExpandedView from './ExpandedView';
-import CollapsedView from './CollapsedView';
-import { withGetConfig } from '../hooks/useGetConfig';
 &nbsp;
-function debounce(fn, ms) {
-  let timer;
-  return <span class="fstat-no" title="function not covered" >()</span> =&gt; {
-<span class="cstat-no" title="statement not covered" >    clearTimeout(timer);</span>
-<span class="cstat-no" title="statement not covered" >    timer = setTimeout(<span class="fstat-no" title="function not covered" >()</span> =&gt; {</span>
-<span class="cstat-no" title="statement not covered" >      timer = null;</span>
-<span class="cstat-no" title="statement not covered" >      fn.apply(this, arguments);</span>
-    }, ms);
-  };
-}
+import SanitizedContent from '../SanitizedContent';
+import { CloseXIcon, BellOutline } from '../../lib/SvgComponents.jsx';
+import { withGetConfig } from '../hooks/useGetConfig';
 &nbsp;
-const NotificationBanner = ({ result }) =&gt; {
-  const {
-    color = <span class="branch-0 cbranch-no" title="branch not covered" >'blue',</span>
-    content,
-    dismissable,
-    enabled,
-    label = <span class="branch-0 cbranch-no" title="branch not covered" >'Update',</span>
-  } = result.content;
+class NotificationBanner extends Component {
+  constructor(props) {
+    super(props);
 &nbsp;
-  const bannerContainerRef = useRef(null);
-  const collapsedWrapperRef = useRef(null);
-  const collapsedBannerRef = useRef(null);
-  const VIEW_BREAKPOINT = 767;
-  const [height, setHeight] = useState('100%');
-  const [expanded, setExpanded] = useState();
-  const [windowWidth, setWindowWidth] = useState(window.innerWidth);
-  const cssDeterminesBannerView = expanded ? 'expanded' : 'collapsed';
+    this.state = {
+      height: '100%',
+      expanded: true,
+    };
 &nbsp;
-  useEffect(() =&gt; {
-    //setBannerHeight on Load &amp; Resize
-    setBannerHeight();
+    this._renderCloseButton = this.renderCloseButton.bind(this);
+    this._collapseNotification = this.collapseNotification.bind(this);
+    this._expandNotification = this.expandNotification.bind(this);
+    this._setBannerHeight = this.setBannerHeight.bind(this);
+  }
 &nbsp;
-    <span class="missing-if-branch" title="if path not taken" >I</span>if (window.innerWidth &lt;= VIEW_BREAKPOINT) {
-<span class="cstat-no" title="statement not covered" >      setExpanded(false);</span>
+  componentDidMount() {
+    <span class="missing-if-branch" title="if path not taken" >I</span>if (window.innerWidth &lt;= 767) {
+<span class="cstat-no" title="statement not covered" >      this.setState({</span>
+        expanded: false,
+      });
     }
 &nbsp;
-    const debounceBrowserResizeHandler = debounce(<span class="fstat-no" title="function not covered" >()</span> =&gt; {
-<span class="cstat-no" title="statement not covered" >      return setWindowWidth(window.innerWidth);</span>
-    }, 600);
+    window.addEventListener('load', this._setBannerHeight);
+    window.addEventListener('resize', this._setBannerHeight);
+  }
 &nbsp;
-    window.addEventListener('resize', debounceBrowserResizeHandler);
+  // Populate state with notification from localStorage
+<span class="fstat-no" title="function not covered" >  co</span>mponentDidUpdate(prevProps) {
+<span class="cstat-no" title="statement not covered" >    if (prevProps.result !== this.props?.result) {</span>
+      const { result: notifications } = <span class="cstat-no" title="statement not covered" >this.props;</span>
+<span class="cstat-no" title="statement not covered" >      if (Object.keys(notifications).length &gt; 0) {</span>
+<span class="cstat-no" title="statement not covered" >        this.setState({</span>
+          expanded: this.isNotificationExpanded(notifications.content),
+        });
+      }
+    }
+  }
 &nbsp;
-    return () =&gt; {
-      window.removeEventListener('resize', debounceBrowserResizeHandler);
-    };
-  }, [windowWidth]);
+  setBannerHeight() {
+    const {
+      result: {
+        content: { content },
+      },
+    } = this.props;
+    <span class="missing-if-branch" title="if path not taken" >I</span>if (content) {
+<span class="cstat-no" title="statement not covered" >      this.bannerContainer.style.transition = 'none';</span>
+&nbsp;
+<span class="cstat-no" title="statement not covered" >      this.state.expanded</span>
+        ? this.collapsedBanner.setAttribute('tabIndex', '-1')
+        : this.collapsedBanner.setAttribute('tabIndex', ' ');
 &nbsp;
-  useEffect(() =&gt; {
-    //  setExpanded =&gt; updates cssDeterminesBannerView
-    <span class="missing-if-branch" title="else path not taken" >E</span>if (Object.keys(result).length &gt; 0) {
-      setExpanded(isNotificationExpanded());
+<span class="cstat-no" title="statement not covered" >      this.setState({</span>
+        height: this.state.expanded
+          ? '100%'
+          : this.collapsedWrapper.offsetHeight + 'px',
+      });
     }
-  }, [result]);
+  }
 &nbsp;
-  const isNotificationExpanded = () =&gt; {
-    const dateDismissed = new Date(result.content.dateDismissed);
-    const dateUpdated = new Date(result.content.dateUpdated);
+<span class="fstat-no" title="function not covered" >  is</span>NotificationExpanded(notification) {
+    const dateDismissed = <span class="cstat-no" title="statement not covered" >new Date(notification.dateDismissed);</span>
+    const dateUpdated = <span class="cstat-no" title="statement not covered" >new Date(notification.dateUpdated);</span>
     const notDismissed =
-      (isDateValid(dateUpdated) &amp;&amp;
-<span class="branch-1 cbranch-no" title="branch not covered" >        isDateValid(dateDismissed) </span>&amp;&amp;
-<span class="branch-2 cbranch-no" title="branch not covered" >        dateUpdated &gt;= dateDismissed)</span> ||
-      !isDateValid(dateDismissed);
-    return notDismissed;
-  };
+<span class="cstat-no" title="statement not covered" >      (this.isDateValid(dateUpdated) &amp;&amp;</span>
+        this.isDateValid(dateDismissed) &amp;&amp;
+        dateUpdated &gt;= dateDismissed) ||
+      !this.isDateValid(dateDismissed);
 &nbsp;
-  const setBannerHeight = () =&gt; {
-    <span class="missing-if-branch" title="if path not taken" >I</span>if (content) {
-<span class="cstat-no" title="statement not covered" >      bannerContainerRef.current.style.transition = 'none';</span>
-<span class="cstat-no" title="statement not covered" >      expanded</span>
-        ? collapsedBannerRef.current.setAttribute('tabIndex', '-1')
-        : collapsedBannerRef.current.setAttribute('tabIndex', ' ');
-&nbsp;
-<span class="cstat-no" title="statement not covered" >      setHeight(</span>
-        expanded ? '100%' : `${collapsedWrapperRef.current.offsetHeight}px`
-      );
-    }
-  };
+<span class="cstat-no" title="statement not covered" >    return notDismissed;</span>
+  }
 &nbsp;
   /**
    * Whether the date is valid, i.e. not null
@@ -596,17 +677,17 @@ const NotificationBanner = ({ result }) =&gt; {
    * @param {Date} date
    * @return {Boolean}
    */
+<span class="fstat-no" title="function not covered" >  is</span>DateValid(date) {
+<span class="cstat-no" title="statement not covered" >    return !isNaN(Date.parse(date));</span>
+  }
 &nbsp;
-  const isDateValid = (date) =&gt; {
-    return !isNaN(Date.parse(date));
-  };
   /**
    * Try to find this NotificationBanner instance in localStorage, or else add
    * a minimal version of it, and mark it with a dateDismissed, then update
    * localStorage.
    */
-&nbsp;
-  const markNotificationClosed = <span class="fstat-no" title="function not covered" >()</span> =&gt; {
+<span class="fstat-no" title="function not covered" >  ma</span>rkNotificationClosed() {
+    const { result } = <span class="cstat-no" title="statement not covered" >this.props;</span>
     const dateDismissed = <span class="cstat-no" title="statement not covered" >new Date().toISOString();</span>
     const storageNotification = <span class="cstat-no" title="statement not covered" >result || {};</span>
 &nbsp;
@@ -633,76 +714,128 @@ const NotificationBanner = ({ result }) =&gt; {
         })
       );
     }
-  };
+  }
 &nbsp;
   /**
    * Callback when the user dimisses a notification. Mark it as dismissed in
    * localStorage, empty the contents, and dispatch a custom event to notify
    * any observers that it has been dismissed.
    */
-&nbsp;
-  const collapseNotification = <span class="fstat-no" title="function not covered" >(e</span>) =&gt; {
+<span class="fstat-no" title="function not covered" >  co</span>llapseNotification(e) {
 <span class="cstat-no" title="statement not covered" >    e.stopPropagation();</span>
-<span class="cstat-no" title="statement not covered" >    markNotificationClosed();</span>
-<span class="cstat-no" title="statement not covered" >    collapsedBannerRef.current.setAttribute('tabIndex', ' ');</span>
-<span class="cstat-no" title="statement not covered" >    bannerContainerRef.current.style.transition = 'height .2s ease-out';</span>
+<span class="cstat-no" title="statement not covered" >    this.markNotificationClosed();</span>
+<span class="cstat-no" title="statement not covered" >    this.collapsedBanner.setAttribute('tabIndex', ' ');</span>
+<span class="cstat-no" title="statement not covered" >    this.bannerContainer.style.transition = 'height .2s ease-out';</span>
+<span class="cstat-no" title="statement not covered" >    this.setState({</span>
+      expanded: false,
+      height: this.collapsedWrapper.offsetHeight + 'px',
+    });
+  }
 &nbsp;
-<span class="cstat-no" title="statement not covered" >    setExpanded(false);</span>
-<span class="cstat-no" title="statement not covered" >    setHeight(`${collapsedWrapperRef.current.offsetHeight}px`);</span>
-  };
+<span class="fstat-no" title="function not covered" >  ex</span>pandNotification() {
+<span class="cstat-no" title="statement not covered" >    if (!this.state.expanded) {</span>
+<span class="cstat-no" title="statement not covered" >      this.collapsedBanner.setAttribute('tabIndex', '-1');</span>
+<span class="cstat-no" title="statement not covered" >      this.bannerContainer.style.transition = 'height .2s ease-out';</span>
+<span class="cstat-no" title="statement not covered" >      this.setState({</span>
+        expanded: true,
+        height: '100%',
+      });
+    }
+  }
 &nbsp;
-  const expandNotification = <span class="fstat-no" title="function not covered" >()</span> =&gt; {
-<span class="cstat-no" title="statement not covered" >    collapsedBannerRef.current.setAttribute('tabIndex', '-1');</span>
-<span class="cstat-no" title="statement not covered" >    bannerContainerRef.current.style.transition = 'height .2s ease-out';</span>
-<span class="cstat-no" title="statement not covered" >    setExpanded(true);</span>
-<span class="cstat-no" title="statement not covered" >    setHeight('100%');</span>
-  };
+  /**
+   * Renders the close button if the notification instance is dismissable.
+   *
+   * @return {String} HTML content
+   */
+<span class="fstat-no" title="function not covered" >  re</span>nderCloseButton() {
+    const {
+      result: {
+        content: { dismissable },
+      },
+    } = <span class="cstat-no" title="statement not covered" >this.props;</span>
+<span class="cstat-no" title="statement not covered" >    if (dismissable) {</span>
+<span class="cstat-no" title="statement not covered" >      return (</span>
+        &lt;button
+          onClick={this._collapseNotification}
+          type="button"
+          className="notification-banner-close"
+        &gt;
+          &lt;svg className="close-icon" aria-hidden="true" focusable="false"&gt;
+            &lt;CloseXIcon /&gt;
+          &lt;/svg&gt;
+          &lt;span className="sr-only"&gt;Close&lt;/span&gt;
+        &lt;/button&gt;
+      );
+    } else {
+<span class="cstat-no" title="statement not covered" >      return '';</span>
+    }
+  }
 &nbsp;
   /**
    * Render the notification if it has any contents.
    *
    * @return {String} HTML content
    */
+  render() {
+    const { expanded, height } = this.state;
+    const { result: { content: { enabled, content } = <span class="branch-0 cbranch-no" title="branch not covered" >{} </span>} = <span class="branch-0 cbranch-no" title="branch not covered" >{} </span>} = this.props;
+    if (!content || <span class="branch-1 cbranch-no" title="branch not covered" >!enabled)</span> {
+      return &lt;div id="notification-banner" /&gt;;
+    } else <span class="missing-if-branch" title="else path not taken" >E</span>{
+      const notificationStatus = <span class="cstat-no" title="statement not covered" >expanded ? 'expanded' : 'collapsed';</span>
+      const { color = <span class="branch-0 cbranch-no" title="branch not covered" >'blue',</span> label = <span class="branch-0 cbranch-no" title="branch not covered" >'Update' </span>} = <span class="cstat-no" title="statement not covered" >content;</span>
+      const className = <span class="cstat-no" title="statement not covered" >`notification-banner  notification-banner-${color} ${notificationStatus}`;</span>
 &nbsp;
-  return (
-    &lt;&gt;
-      {!content || <span class="branch-1 cbranch-no" title="branch not covered" >!enabled </span>? (
-        &lt;div id="notification-banner" /&gt;
-      ) : (
-<span class="branch-1 cbranch-no" title="branch not covered" >        &lt;div</span>
-          ref={bannerContainerRef}
+<span class="cstat-no" title="statement not covered" >      return (</span>
+        &lt;div
           style={{ height }}
-          className={`notification-banner notification-banner-${color} ${cssDeterminesBannerView}`}
+          ref={<span class="fstat-no" title="function not covered" >(e</span>lem) =&gt; (<span class="cstat-no" title="statement not covered" >this.bannerContainer = elem)</span>}
+          className={className}
         &gt;
-          &lt;ExpandedView
-            label={label}
-            expanded={expanded}
-            content={content}
-            dismissable={dismissable}
-            collapseNotification={collapseNotification}
-          /&gt;
+          &lt;div
+            ref={<span class="fstat-no" title="function not covered" >(e</span>lem) =&gt; (<span class="cstat-no" title="statement not covered" >this.expandedWrapper = elem)</span>}
+            className={`notification-banner-wrapper expanded-view`}
+          &gt;
+            &lt;div className="notification-banner-label"&gt;{label}&lt;/div&gt;
+            &lt;div className="notification-banner-content"&gt;
+              &lt;SanitizedContent
+                html={expanded ? content : '&lt;p&gt;Nothing to see here&lt;/p&gt;'}
+              /&gt;
+            &lt;/div&gt;
+            {expanded &amp;&amp; this._renderCloseButton()}
+          &lt;/div&gt;
 &nbsp;
-          &lt;CollapsedView
-            expandNotification={expandNotification}
-            label={label}
-            ref={{ collapsedWrapperRef, collapsedBannerRef }}
-          /&gt;
+          &lt;div
+            ref={<span class="fstat-no" title="function not covered" >(e</span>lem) =&gt; (<span class="cstat-no" title="statement not covered" >this.collapsedWrapper = elem)</span>}
+            className={`notification-banner-wrapper collapsed-view`}
+            onClick={this._expandNotification}
+          &gt;
+            &lt;button
+              ref={<span class="fstat-no" title="function not covered" >(e</span>lem) =&gt; (<span class="cstat-no" title="statement not covered" >this.collapsedBanner = elem)</span>}
+              className={`notification-banner-label`}
+            &gt;
+              {label}
+              &lt;span className="bell-icon"&gt;
+                &lt;svg aria-hidden="true" focusable="false"&gt;
+                  &lt;BellOutline /&gt;
+                &lt;/svg&gt;
+              &lt;/span&gt;
+            &lt;/button&gt;
+          &lt;/div&gt;
         &lt;/div&gt;
-      )}
-    &lt;/&gt;
-  );
-};
+      );
+    }
+  }
+}
 &nbsp;
 NotificationBanner.propTypes = {
   result: PropTypes.shape({
     content: PropTypes.shape({
-      color: PropTypes.string,
       content: PropTypes.string,
-      dateDismissed: PropTypes.string,
-      dateUpdated: PropTypes.string,
-      dismissable: PropTypes.bool,
-      enabled: PropTypes.bool,
       label: PropTypes.string,
+      color: PropTypes.string,
+      dismissable: PropTypes.bool,
     }),
   }),
 };
@@ -710,11 +843,10 @@ NotificationBanner.propTypes = {
 NotificationBanner.defaultProps = {
   result: {
     content: {
-      color: 'blue',
       content: null,
-      dismissable: true,
-      enabled: true,
       label: 'Update',
+      color: 'blue',
+      dismissable: true,
     },
   },
 };
@@ -733,7 +865,7 @@ export default withGetConfig(NotificationBanner, {
             <div class='footer quiet pad2 space-top1 center small'>
                 Code coverage generated by
                 <a href="https://istanbul.js.org/" target="_blank" rel="noopener noreferrer">istanbul</a>
-                at Tue Sep 13 2022 18:25:01 GMT-0700 (Pacific Daylight Time)
+                at Tue Aug 30 2022 10:59:35 GMT-0400 (Eastern Daylight Time)
             </div>
         <script src="../../../prettify.js"></script>
         <script>