@madie/madie-design-system 1.0.2 → 1.0.3

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

@@ -328,7 +328,21 @@
 <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='L266'></a><a href='#L266'>266</a>
+<a name='L267'></a><a href='#L267'>267</a>
+<a name='L268'></a><a href='#L268'>268</a>
+<a name='L269'></a><a href='#L269'>269</a>
+<a name='L270'></a><a href='#L270'>270</a>
+<a name='L271'></a><a href='#L271'>271</a>
+<a name='L272'></a><a href='#L272'>272</a>
+<a name='L273'></a><a href='#L273'>273</a>
+<a name='L274'></a><a href='#L274'>274</a>
+<a name='L275'></a><a href='#L275'>275</a>
+<a name='L276'></a><a href='#L276'>276</a>
+<a name='L277'></a><a href='#L277'>277</a>
+<a name='L278'></a><a href='#L278'>278</a>
+<a name='L279'></a><a href='#L279'>279</a>
+<a name='L280'></a><a href='#L280'>280</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>
@@ -378,6 +392,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-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>
@@ -427,6 +443,9 @@
 <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>
@@ -503,6 +522,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-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>
@@ -514,6 +537,7 @@
 <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>
@@ -542,6 +566,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-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>
@@ -593,270 +621,284 @@
 <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';
+<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";
 &nbsp;
-import SanitizedContent from '../SanitizedContent';
-import { CloseXIcon, BellOutline } from '../../lib/SvgComponents.jsx';
-import { withGetConfig } from '../hooks/useGetConfig';
+import SanitizedContent from "../SanitizedContent";
+import { CloseXIcon, BellOutline } from "../../lib/SvgComponents.jsx";
+import { withGetConfig } from "../hooks/useGetConfig";
 &nbsp;
 class NotificationBanner extends Component {
-  constructor(props) {
-    super(props);
+    constructor(props) {
+        super(props);
 &nbsp;
-    this.state = {
-      height: '100%',
-      expanded: true,
-    };
+        this.state = {
+            height: "100%",
+            expanded: true,
+        };
 &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);
-  }
-&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,
-      });
+        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;
-    window.addEventListener('load', this._setBannerHeight);
-    window.addEventListener('resize', this._setBannerHeight);
-  }
+    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;
-  // 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),
-        });
-      }
+        window.addEventListener("load", this._setBannerHeight);
+        window.addEventListener("resize", this._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
+                    ),
+                });
+            }
+        }
     }
-  }
 &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>
+    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', ' ');
+<span class="cstat-no" title="statement not covered" >            this.state.expanded</span>
+                ? this.collapsedBanner.setAttribute("tabIndex", "-1")
+                : this.collapsedBanner.setAttribute("tabIndex", " ");
 &nbsp;
-<span class="cstat-no" title="statement not covered" >      this.setState({</span>
-        height: this.state.expanded
-          ? '100%'
-          : this.collapsedWrapper.offsetHeight + 'px',
-      });
+<span class="cstat-no" title="statement not covered" >            this.setState({</span>
+                height: this.state.expanded
+                    ? "100%"
+                    : this.collapsedWrapper.offsetHeight + "px",
+            });
+        }
     }
-  }
 &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 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);
+<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 =
+<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;
-<span class="cstat-no" title="statement not covered" >    return notDismissed;</span>
-  }
+<span class="cstat-no" title="statement not covered" >        return notDismissed;</span>
+    }
 &nbsp;
-  /**
-   * Whether the date is valid, i.e. not null
-   *
-   * @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>
-  }
+    /**
+     * Whether the date is valid, i.e. not null
+     *
+     * @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;
-  /**
-   * 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>
-    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>
+    /**
+     * 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>
+        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;
-<span class="cstat-no" title="statement not covered" >    if (storageNotification &amp;&amp; Object.keys(storageNotification).length &gt; 0) {</span>
-<span class="cstat-no" title="statement not covered" >      window.localStorage.setItem(</span>
-        'notifications',
-        JSON.stringify({
-          ...storageNotification,
-          content: {
-            ...storageNotification.content,
-            dateDismissed,
-          },
-        })
-      );
-    } else {
-<span class="cstat-no" title="statement not covered" >      window.localStorage.setItem(</span>
-        'notifications',
-        JSON.stringify({
-          ...storageNotification,
-          content: {
-            name: 'header-notification',
-            dateDismissed,
-          },
-        })
-      );
+<span class="cstat-no" title="statement not covered" >        if (</span>
+            storageNotification &amp;&amp;
+            Object.keys(storageNotification).length &gt; 0
+        ) {
+<span class="cstat-no" title="statement not covered" >            window.localStorage.setItem(</span>
+                "notifications",
+                JSON.stringify({
+                    ...storageNotification,
+                    content: {
+                        ...storageNotification.content,
+                        dateDismissed,
+                    },
+                })
+            );
+        } else {
+<span class="cstat-no" title="statement not covered" >            window.localStorage.setItem(</span>
+                "notifications",
+                JSON.stringify({
+                    ...storageNotification,
+                    content: {
+                        name: "header-notification",
+                        dateDismissed,
+                    },
+                })
+            );
+        }
     }
-  }
 &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) {
-<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',
-    });
-  }
+    /**
+     * 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) {
+<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",
+        });
+    }
 &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="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;
-  /**
-   * 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>
+    /**
+     * 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>
+    /**
+     * 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
-          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}
-        &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;
+<span class="cstat-no" title="statement not covered" >            return (</span>
+                &lt;div
+                    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}
+                &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;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;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;
+            );
+        }
     }
-  }
 }
 &nbsp;
 NotificationBanner.propTypes = {
-  result: PropTypes.shape({
-    content: PropTypes.shape({
-      content: PropTypes.string,
-      label: PropTypes.string,
-      color: PropTypes.string,
-      dismissable: PropTypes.bool,
+    result: PropTypes.shape({
+        content: PropTypes.shape({
+            content: PropTypes.string,
+            label: PropTypes.string,
+            color: PropTypes.string,
+            dismissable: PropTypes.bool,
+        }),
     }),
-  }),
 };
 &nbsp;
 NotificationBanner.defaultProps = {
-  result: {
-    content: {
-      content: null,
-      label: 'Update',
-      color: 'blue',
-      dismissable: true,
+    result: {
+        content: {
+            content: null,
+            label: "Update",
+            color: "blue",
+            dismissable: true,
+        },
     },
-  },
 };
 &nbsp;
 export default withGetConfig(NotificationBanner, {
-  timeout: 5,
-  url: '/config/notification',
-  localStorageName: 'active_notification',
-  equalityCheckExclude: ['dateDismissed', 'dateUpdated'],
-  defaultContent: {},
+    timeout: 5,
+    url: "/config/notification",
+    localStorageName: "active_notification",
+    equalityCheckExclude: ["dateDismissed", "dateUpdated"],
+    defaultContent: {},
 });
 &nbsp;</pre></td></tr></table></pre>
 
@@ -865,7 +907,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 Mon Mar 14 2022 14:52:06 GMT-0700 (Pacific Daylight Time)
+                at Thu Mar 24 2022 11:31:04 GMT-0700 (Pacific Daylight Time)
             </div>
         <script src="../../../prettify.js"></script>
         <script>

package/coverage/lcov-report/react/components/Pagination/index.html

@@ -101,7 +101,7 @@
             <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 Mon Mar 14 2022 14:52:06 GMT-0700 (Pacific Daylight Time)
+                at Thu Mar 24 2022 11:31:04 GMT-0700 (Pacific Daylight Time)
             </div>
         <script src="../../../prettify.js"></script>
         <script>