qpp-style 9.20.2 → 9.20.4

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">29.82% </span>
+                <span class="strong">60% </span>
                 <span class="quiet">Statements</span>
-                <span class='fraction'>17/57</span>
+                <span class='fraction'>36/60</span>
             </div>
         
             
             <div class='fl pad1y space-right2'>
-                <span class="strong">10% </span>
+                <span class="strong">32.14% </span>
                 <span class="quiet">Branches</span>
-                <span class='fraction'>4/40</span>
+                <span class='fraction'>9/28</span>
             </div>
         
             
             <div class='fl pad1y space-right2'>
-                <span class="strong">26.66% </span>
+                <span class="strong">57.14% </span>
                 <span class="quiet">Functions</span>
-                <span class='fraction'>4/15</span>
+                <span class='fraction'>8/14</span>
             </div>
         
             
             <div class='fl pad1y space-right2'>
-                <span class="strong">29.82% </span>
+                <span class="strong">60% </span>
                 <span class="quiet">Lines</span>
-                <span class='fraction'>17/57</span>
+                <span class='fraction'>36/60</span>
             </div>
         
             
@@ -61,7 +61,7 @@
             </div>
         </template>
     </div>
-    <div class='status-line low'></div>
+    <div class='status-line medium'></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,51 +284,7 @@
 <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>
-<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>
+<a name='L222'></a><a href='#L222'>222</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>
@@ -336,74 +292,80 @@
 <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-neutral">&nbsp;</span>
-<span class="cline-any cline-yes">2x</span>
+<span class="cline-any cline-yes">1x</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-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">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-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-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-yes">1x</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-yes">1x</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">1x</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">1x</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-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-yes">2x</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">2x</span>
+<span class="cline-any cline-yes">1x</span>
+<span class="cline-any cline-yes">1x</span>
 <span class="cline-any cline-neutral">&nbsp;</span>
+<span class="cline-any cline-yes">1x</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">1x</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">1x</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>
@@ -413,8 +375,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-no">&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-neutral">&nbsp;</span>
 <span class="cline-any cline-neutral">&nbsp;</span>
 <span class="cline-any cline-neutral">&nbsp;</span>
@@ -422,7 +385,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-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>
@@ -457,52 +420,20 @@
 <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-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-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>
-<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-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-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>
-<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>
@@ -512,24 +443,14 @@
 <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-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>
@@ -542,15 +463,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-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>
@@ -560,12 +472,11 @@
 <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-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>
@@ -593,83 +504,91 @@
 <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';
+<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';
 import PropTypes from 'prop-types';
-&nbsp;
-import SanitizedContent from '../SanitizedContent';
-import { CloseXIcon, BellOutline } from '../../lib/SvgComponents.jsx';
+import ExpandedView from './ExpandedView';
+import CollapsedView from './CollapsedView';
 import { withGetConfig } from '../hooks/useGetConfig';
 &nbsp;
-class NotificationBanner extends Component {
-  constructor(props) {
-    super(props);
-&nbsp;
-    this.state = {
-      height: '100%',
-      expanded: true,
-    };
+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);
+  };
+}
 &nbsp;
-    this._renderCloseButton = this.renderCloseButton.bind(this);
-    this._collapseNotification = this.collapseNotification.bind(this);
-    this._expandNotification = this.expandNotification.bind(this);
-    this._setBannerHeight = this.setBannerHeight.bind(this);
-  }
+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;
 &nbsp;
-  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,
-      });
-    }
+  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';
 &nbsp;
-    window.addEventListener('load', this._setBannerHeight);
-    window.addEventListener('resize', this._setBannerHeight);
-  }
+  useEffect(() =&gt; {
+    //setBannerHeight on Load &amp; Resize
+    setBannerHeight();
 &nbsp;
-  // 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),
-        });
-      }
+    <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>
     }
-  }
 &nbsp;
-  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>
+    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);
 &nbsp;
-<span class="cstat-no" title="statement not covered" >      this.state.expanded</span>
-        ? this.collapsedBanner.setAttribute('tabIndex', '-1')
-        : this.collapsedBanner.setAttribute('tabIndex', ' ');
+    window.addEventListener('resize', debounceBrowserResizeHandler);
+&nbsp;
+    return () =&gt; {
+      window.removeEventListener('resize', debounceBrowserResizeHandler);
+    };
+  }, [windowWidth]);
 &nbsp;
-<span class="cstat-no" title="statement not covered" >      this.setState({</span>
-        height: this.state.expanded
-          ? '100%'
-          : this.collapsedWrapper.offsetHeight + 'px',
-      });
+  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());
     }
-  }
+  }, [result]);
 &nbsp;
-<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 isNotificationExpanded = () =&gt; {
+    const dateDismissed = new Date(result.content.dateDismissed);
+    const dateUpdated = new Date(result.content.dateUpdated);
     const 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);
+      (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;
+  };
 &nbsp;
-<span class="cstat-no" title="statement not covered" >    return notDismissed;</span>
-  }
+  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`
+      );
+    }
+  };
 &nbsp;
   /**
    * Whether the date is valid, i.e. not null
@@ -677,17 +596,17 @@ class NotificationBanner extends Component {
    * @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.
    */
-<span class="fstat-no" title="function not covered" >  ma</span>rkNotificationClosed() {
-    const { result } = <span class="cstat-no" title="statement not covered" >this.props;</span>
+&nbsp;
+  const markNotificationClosed = <span class="fstat-no" title="function not covered" >()</span> =&gt; {
     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;
@@ -714,128 +633,76 @@ class NotificationBanner extends Component {
         })
       );
     }
-  }
+  };
 &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.
    */
-<span class="fstat-no" title="function not covered" >  co</span>llapseNotification(e) {
+&nbsp;
+  const collapseNotification = <span class="fstat-no" title="function not covered" >(e</span>) =&gt; {
 <span class="cstat-no" title="statement not covered" >    e.stopPropagation();</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',
-    });
-  }
+<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>
 &nbsp;
-<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%',
-      });
-    }
-  }
+<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>
+  };
 &nbsp;
-  /**
-   * 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>
-    }
-  }
+  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>
+  };
 &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;
-<span class="cstat-no" title="statement not covered" >      return (</span>
-        &lt;div
+  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}
           style={{ height }}
-          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}
+          className={`notification-banner notification-banner-${color} ${cssDeterminesBannerView}`}
         &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;
+          &lt;ExpandedView
+            label={label}
+            expanded={expanded}
+            content={content}
+            dismissable={dismissable}
+            collapseNotification={collapseNotification}
+          /&gt;
 &nbsp;
-          &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;CollapsedView
+            expandNotification={expandNotification}
+            label={label}
+            ref={{ collapsedWrapperRef, collapsedBannerRef }}
+          /&gt;
         &lt;/div&gt;
-      );
-    }
-  }
-}
+      )}
+    &lt;/&gt;
+  );
+};
 &nbsp;
 NotificationBanner.propTypes = {
   result: PropTypes.shape({
     content: PropTypes.shape({
-      content: PropTypes.string,
-      label: PropTypes.string,
       color: PropTypes.string,
+      content: PropTypes.string,
+      dateDismissed: PropTypes.string,
+      dateUpdated: PropTypes.string,
       dismissable: PropTypes.bool,
+      enabled: PropTypes.bool,
+      label: PropTypes.string,
     }),
   }),
 };
@@ -843,10 +710,11 @@ NotificationBanner.propTypes = {
 NotificationBanner.defaultProps = {
   result: {
     content: {
-      content: null,
-      label: 'Update',
       color: 'blue',
+      content: null,
       dismissable: true,
+      enabled: true,
+      label: 'Update',
     },
   },
 };
@@ -865,7 +733,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 Aug 30 2022 10:59:35 GMT-0400 (Eastern Daylight Time)
+                at Wed Oct 19 2022 10:43:33 GMT-0400 (Eastern Daylight Time)
             </div>
         <script src="../../../prettify.js"></script>
         <script>