@madie/madie-design-system 1.0.2 → 1.0.3

package/coverage/lcov-report/react/components/Accordion/index.jsx.html

@@ -156,7 +156,9 @@
 <a name='L91'></a><a href='#L91'>91</a>
 <a name='L92'></a><a href='#L92'>92</a>
 <a name='L93'></a><a href='#L93'>93</a>
-<a name='L94'></a><a href='#L94'>94</a></td><td class="line-coverage quiet"><span class="cline-any cline-neutral">&nbsp;</span>
+<a name='L94'></a><a href='#L94'>94</a>
+<a name='L95'></a><a href='#L95'>95</a>
+<a name='L96'></a><a href='#L96'>96</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>
@@ -234,6 +236,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">3x</span>
 <span class="cline-any cline-neutral">&nbsp;</span>
 <span class="cline-any cline-neutral">&nbsp;</span>
@@ -249,96 +253,98 @@
 <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, useRef, useEffect } from 'react';
-import PropTypes from 'prop-types';
-import { Chevron } from '../../lib/Chevron.jsx';
+<span class="cline-any cline-neutral">&nbsp;</span></td><td class="text"><pre class="prettyprint lang-js">import React, { useState, useRef, useEffect } from "react";
+import PropTypes from "prop-types";
+import { Chevron } from "../../lib/Chevron.jsx";
 &nbsp;
 const Accordion = (props) =&gt; {
-  const content = useRef(null);
-  const [setActive, setActiveState] = useState(props.isOpen ? <span class="branch-0 cbranch-no" title="branch not covered" >'active' </span>: '');
-  const ariaPressed = setActive ? <span class="branch-0 cbranch-no" title="branch not covered" >'true' </span>: 'false';
-  const getHeight = <span class="fstat-no" title="function not covered" >(n</span>ode) =&gt; {
-<span class="cstat-no" title="statement not covered" >    if (node) {</span>
-<span class="cstat-no" title="statement not covered" >      return `${node.scrollHeight}px`;</span>
-    }
-<span class="cstat-no" title="statement not covered" >    return 'auto';</span>
-  };
-  const height = setActive ? <span class="branch-0 cbranch-no" title="branch not covered" >getHeight(content.current) </span>: '0px';
-  const rotate = setActive ? <span class="branch-0 cbranch-no" title="branch not covered" >'accordion-icon rotate' </span>: 'accordion-icon';
-&nbsp;
-  function <span class="fstat-no" title="function not covered" >toggleAccordion(</span>) {
-<span class="cstat-no" title="statement not covered" >    setActiveState(setActive === '' ? 'active' : '');</span>
-  }
+    const content = useRef(null);
+    const [setActive, setActiveState] = useState(props.isOpen ? <span class="branch-0 cbranch-no" title="branch not covered" >"active" </span>: "");
+    const ariaPressed = setActive ? <span class="branch-0 cbranch-no" title="branch not covered" >"true" </span>: "false";
+    const getHeight = <span class="fstat-no" title="function not covered" >(n</span>ode) =&gt; {
+<span class="cstat-no" title="statement not covered" >        if (node) {</span>
+<span class="cstat-no" title="statement not covered" >            return `${node.scrollHeight}px`;</span>
+        }
+<span class="cstat-no" title="statement not covered" >        return "auto";</span>
+    };
+    const height = setActive ? <span class="branch-0 cbranch-no" title="branch not covered" >getHeight(content.current) </span>: "0px";
+    const rotate = setActive ? <span class="branch-0 cbranch-no" title="branch not covered" >"accordion-icon rotate" </span>: "accordion-icon";
 &nbsp;
-  function <span class="fstat-no" title="function not covered" >openAccordion(</span>) {
-<span class="cstat-no" title="statement not covered" >    setActiveState('active');</span>
-  }
+    function <span class="fstat-no" title="function not covered" >toggleAccordion(</span>) {
+<span class="cstat-no" title="statement not covered" >        setActiveState(setActive === "" ? "active" : "");</span>
+    }
 &nbsp;
-  function closeAccordion() {
-    setActiveState('');
-  }
+    function <span class="fstat-no" title="function not covered" >openAccordion(</span>) {
+<span class="cstat-no" title="statement not covered" >        setActiveState("active");</span>
+    }
 &nbsp;
-  useEffect(() =&gt; {
-    <span class="missing-if-branch" title="if path not taken" >I</span>if (props.isOpen) {
-<span class="cstat-no" title="statement not covered" >      openAccordion();</span>
-    } else {
-      closeAccordion();
+    function closeAccordion() {
+        setActiveState("");
     }
-  }, [props.isOpen]);
 &nbsp;
-  return (
-    &lt;div className="accordion-section" data-testid="accordion"&gt;
-      &lt;button
-        className={`accordion ${setActive}`}
-        aria-label={props.title}
-        aria-pressed={ariaPressed}
-        aria-expanded={ariaPressed}
-        tabIndex="0"
-        onClick={toggleAccordion}
-      &gt;
-        &lt;div className="accordion-left-title"&gt;
-          &lt;p className="accordion-title"&gt;{props.title}&lt;/p&gt;
-          {props.subTitle &amp;&amp; (
-<span class="branch-1 cbranch-no" title="branch not covered" >            &lt;p className="accordion-subtitle"&gt;{props.subTitle}&lt;/p&gt;</span>
-          )}
-        &lt;/div&gt;
-        {props.centerItem &amp;&amp; (
-<span class="branch-1 cbranch-no" title="branch not covered" >          &lt;div className="accordion-center"&gt;</span>
-            &lt;p&gt;{props.centerItem}&lt;/p&gt;
-          &lt;/div&gt;
-        )}
-        {props.rightItem &amp;&amp; (
-<span class="branch-1 cbranch-no" title="branch not covered" >          &lt;div className="accordion-right"&gt;</span>
-            &lt;p&gt;{props.rightItem}&lt;/p&gt;
-          &lt;/div&gt;
-        )}
-        &lt;div className="chevron-container"&gt;
-          &lt;Chevron className={rotate} /&gt;
+    useEffect(() =&gt; {
+        <span class="missing-if-branch" title="if path not taken" >I</span>if (props.isOpen) {
+<span class="cstat-no" title="statement not covered" >            openAccordion();</span>
+        } else {
+            closeAccordion();
+        }
+    }, [props.isOpen]);
+&nbsp;
+    return (
+        &lt;div className="accordion-section" data-testid="accordion"&gt;
+            &lt;button
+                className={`accordion ${setActive}`}
+                aria-label={props.title}
+                aria-pressed={ariaPressed}
+                aria-expanded={ariaPressed}
+                tabIndex="0"
+                onClick={toggleAccordion}
+            &gt;
+                &lt;div className="accordion-left-title"&gt;
+                    &lt;p className="accordion-title"&gt;{props.title}&lt;/p&gt;
+                    {props.subTitle &amp;&amp; (
+<span class="branch-1 cbranch-no" title="branch not covered" >                        &lt;p className="accordion-subtitle"&gt;{props.subTitle}&lt;/p&gt;</span>
+                    )}
+                &lt;/div&gt;
+                {props.centerItem &amp;&amp; (
+<span class="branch-1 cbranch-no" title="branch not covered" >                    &lt;div className="accordion-center"&gt;</span>
+                        &lt;p&gt;{props.centerItem}&lt;/p&gt;
+                    &lt;/div&gt;
+                )}
+                {props.rightItem &amp;&amp; (
+<span class="branch-1 cbranch-no" title="branch not covered" >                    &lt;div className="accordion-right"&gt;</span>
+                        &lt;p&gt;{props.rightItem}&lt;/p&gt;
+                    &lt;/div&gt;
+                )}
+                &lt;div className="chevron-container"&gt;
+                    &lt;Chevron className={rotate} /&gt;
+                &lt;/div&gt;
+            &lt;/button&gt;
+            &lt;div
+                ref={content}
+                style={{ maxHeight: height }}
+                className="accordion-content"
+            &gt;
+                &lt;div className="accordion-text dashed-border"&gt;
+                    {props.children}
+                &lt;/div&gt;
+            &lt;/div&gt;
         &lt;/div&gt;
-      &lt;/button&gt;
-      &lt;div
-        ref={content}
-        style={{ maxHeight: height }}
-        className="accordion-content"
-      &gt;
-        &lt;div className="accordion-text dashed-border"&gt;{props.children}&lt;/div&gt;
-      &lt;/div&gt;
-    &lt;/div&gt;
-  );
+    );
 };
 &nbsp;
 Accordion.propTypes = {
-  title: PropTypes.string.isRequired,
-  subTitle: PropTypes.string,
-  children: PropTypes.any.isRequired,
-  centerItem: PropTypes.string,
-  rightItem: PropTypes.string,
-  isOpen: PropTypes.bool,
+    title: PropTypes.string.isRequired,
+    subTitle: PropTypes.string,
+    children: PropTypes.any.isRequired,
+    centerItem: PropTypes.string,
+    rightItem: PropTypes.string,
+    isOpen: PropTypes.bool,
 };
 &nbsp;
 Accordion.defaultProps = {
-  title: '',
-  isOpen: false,
+    title: "",
+    isOpen: false,
 };
 &nbsp;
 export default Accordion;
@@ -349,7 +355,7 @@ export default Accordion;
             <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/Button/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>

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

@@ -243,93 +243,93 @@
 <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 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 from "react";
+import PropTypes from "prop-types";
 &nbsp;
-const VARIANTS = ['secondary', 'outline', 'danger', 'white'];
-const SIZES = ['big'];
+const VARIANTS = ["secondary", "outline", "danger", "white"];
+const SIZES = ["big"];
 &nbsp;
 const Button = <span class="fstat-no" title="function not covered" >({</span>
-  children,
-  className,
-  href,
-  loading,
-  onClick,
-  size,
-  variant,
-  type,
-  ...rest
+    children,
+    className,
+    href,
+    loading,
+    onClick,
+    size,
+    variant,
+    type,
+    ...rest
 }) =&gt; {
-  let btnClass = <span class="cstat-no" title="statement not covered" >'qpp-c-button';</span>
+    let btnClass = <span class="cstat-no" title="statement not covered" >"qpp-c-button";</span>
 &nbsp;
-<span class="cstat-no" title="statement not covered" >  if (VARIANTS.includes(variant)) {</span>
-<span class="cstat-no" title="statement not covered" >    btnClass = btnClass.concat(' ', `qpp-c-button--${variant}`);</span>
-  }
-<span class="cstat-no" title="statement not covered" >  if (SIZES.includes(size)) {</span>
-<span class="cstat-no" title="statement not covered" >    btnClass = btnClass.concat(' ', `qpp-c-button--${size}`);</span>
-  }
-<span class="cstat-no" title="statement not covered" >  if (className) {</span>
-<span class="cstat-no" title="statement not covered" >    btnClass = btnClass.concat(' ', className);</span>
-  }
+<span class="cstat-no" title="statement not covered" >    if (VARIANTS.includes(variant)) {</span>
+<span class="cstat-no" title="statement not covered" >        btnClass = btnClass.concat(" ", `qpp-c-button--${variant}`);</span>
+    }
+<span class="cstat-no" title="statement not covered" >    if (SIZES.includes(size)) {</span>
+<span class="cstat-no" title="statement not covered" >        btnClass = btnClass.concat(" ", `qpp-c-button--${size}`);</span>
+    }
+<span class="cstat-no" title="statement not covered" >    if (className) {</span>
+<span class="cstat-no" title="statement not covered" >        btnClass = btnClass.concat(" ", className);</span>
+    }
 &nbsp;
-<span class="cstat-no" title="statement not covered" >  if (href) {</span>
+<span class="cstat-no" title="statement not covered" >    if (href) {</span>
+<span class="cstat-no" title="statement not covered" >        return (</span>
+            &lt;a
+                href={href}
+                data-testid="ds-btn"
+                className={btnClass || ""}
+                onClick={onClick}
+            &gt;
+                {children}
+            &lt;/a&gt;
+        );
+    }
 <span class="cstat-no" title="statement not covered" >    return (</span>
-      &lt;a
-        href={href}
-        data-testid="ds-btn"
-        className={btnClass || ''}
-        onClick={onClick}
-      &gt;
-        {children}
-      &lt;/a&gt;
+        &lt;button
+            data-testid="ds-btn"
+            className={btnClass || ""}
+            onClick={onClick}
+            disabled={loading}
+            type={type}
+            {...rest}
+        &gt;
+            {children}
+        &lt;/button&gt;
     );
-  }
-<span class="cstat-no" title="statement not covered" >  return (</span>
-    &lt;button
-      data-testid="ds-btn"
-      className={btnClass || ''}
-      onClick={onClick}
-      disabled={loading}
-      type={type}
-      {...rest}
-    &gt;
-      {children}
-    &lt;/button&gt;
-  );
 };
 &nbsp;
 Button.propTypes = {
-  children: PropTypes.node,
-  className: PropTypes.string,
-  href: PropTypes.string,
-  loading: PropTypes.bool,
-  onClick: PropTypes.func,
-  size: PropTypes.oneOf(SIZES),
-  type: PropTypes.string,
-  variant: PropTypes.oneOf(VARIANTS),
+    children: PropTypes.node,
+    className: PropTypes.string,
+    href: PropTypes.string,
+    loading: PropTypes.bool,
+    onClick: PropTypes.func,
+    size: PropTypes.oneOf(SIZES),
+    type: PropTypes.string,
+    variant: PropTypes.oneOf(VARIANTS),
 };
 &nbsp;
 Button.defaultProps = {
-  children: false,
-  className: '',
-  href: '',
-  loading: false,
-  onClick: <span class="fstat-no" title="function not covered" >()</span> =&gt; <span class="cstat-no" title="statement not covered" >null,</span>
-  size: null,
-  type: 'button',
-  variant: null,
+    children: false,
+    className: "",
+    href: "",
+    loading: false,
+    onClick: <span class="fstat-no" title="function not covered" >()</span> =&gt; <span class="cstat-no" title="statement not covered" >null,</span>
+    size: null,
+    type: "button",
+    variant: null,
 };
 &nbsp;
-export const TextButton = <span class="fstat-no" title="function not covered" >({</span> className = <span class="branch-0 cbranch-no" title="branch not covered" >'',</span> ...props }) =&gt; (
-<span class="cstat-no" title="statement not covered" >  &lt;Button className={`qpp-c-button--text ${className}`} {...props} /&gt;</span>
+export const TextButton = <span class="fstat-no" title="function not covered" >({</span> className = <span class="branch-0 cbranch-no" title="branch not covered" >"",</span> ...props }) =&gt; (
+<span class="cstat-no" title="statement not covered" >    &lt;Button className={`qpp-c-button--text ${className}`} {...props} /&gt;</span>
 );
 &nbsp;
 TextButton.propTypes = {
-  className: PropTypes.string,
+    className: PropTypes.string,
 };
 &nbsp;
 TextButton.defaultProps = {
-  className: '',
+    className: "",
 };
 &nbsp;
 export default Button;
@@ -340,7 +340,7 @@ export default Button;
             <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/Error/Collapsible.jsx.html

@@ -151,7 +151,12 @@
 <a name='L86'></a><a href='#L86'>86</a>
 <a name='L87'></a><a href='#L87'>87</a>
 <a name='L88'></a><a href='#L88'>88</a>
-<a name='L89'></a><a href='#L89'>89</a></td><td class="line-coverage quiet"><span class="cline-any cline-neutral">&nbsp;</span>
+<a name='L89'></a><a href='#L89'>89</a>
+<a name='L90'></a><a href='#L90'>90</a>
+<a name='L91'></a><a href='#L91'>91</a>
+<a name='L92'></a><a href='#L92'>92</a>
+<a name='L93'></a><a href='#L93'>93</a>
+<a name='L94'></a><a href='#L94'>94</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>
@@ -180,11 +185,15 @@
 <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-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>
 <span class="cline-any cline-no">&nbsp;</span>
 <span class="cline-any cline-neutral">&nbsp;</span>
 <span class="cline-any cline-neutral">&nbsp;</span>
@@ -239,91 +248,97 @@
 <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>
+<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;
 class Collapsible extends Component {
-  constructor(props) {
-    super(props);
+    constructor(props) {
+        super(props);
 &nbsp;
-    this.state = {
-      isExpanded: false,
-    };
+        this.state = {
+            isExpanded: false,
+        };
 &nbsp;
-    this._toggleExpanded = this.toggleExpanded.bind(this);
-    this._renderShowButton = this.renderShowButton.bind(this);
-    this._renderHideButton = this.renderHideButton.bind(this);
-  }
+        this._toggleExpanded = this.toggleExpanded.bind(this);
+        this._renderShowButton = this.renderShowButton.bind(this);
+        this._renderHideButton = this.renderHideButton.bind(this);
+    }
 &nbsp;
-<span class="fstat-no" title="function not covered" >  to</span>ggleExpanded() {
-<span class="cstat-no" title="statement not covered" >    this.setState({</span>
-      isExpanded: !this.state.isExpanded,
-    });
-  }
+<span class="fstat-no" title="function not covered" >    to</span>ggleExpanded() {
+<span class="cstat-no" title="statement not covered" >        this.setState({</span>
+            isExpanded: !this.state.isExpanded,
+        });
+    }
 &nbsp;
-  renderShowButton() {
-    return (
-      &lt;span className="collapsible-show-label"&gt;{this.props.showLabel}&lt;/span&gt;
-    );
-  }
+    renderShowButton() {
+        return (
+            &lt;span className="collapsible-show-label"&gt;
+                {this.props.showLabel}
+            &lt;/span&gt;
+        );
+    }
 &nbsp;
-  renderHideButton() {
-    if (this.props.hideLabel) {
-      return (
-        &lt;span className="collapsible-hide-label"&gt;{this.props.hideLabel}&lt;/span&gt;
-      );
-    } else <span class="missing-if-branch" title="else path not taken" >E</span>{
-<span class="cstat-no" title="statement not covered" >      return '';</span>
+    renderHideButton() {
+        if (this.props.hideLabel) {
+            return (
+                &lt;span className="collapsible-hide-label"&gt;
+                    {this.props.hideLabel}
+                &lt;/span&gt;
+            );
+        } else <span class="missing-if-branch" title="else path not taken" >E</span>{
+<span class="cstat-no" title="statement not covered" >            return "";</span>
+        }
     }
-  }
 &nbsp;
-  render() {
-    const isArray = Array.isArray(this.props.content);
-    const isHidden = this.state.isExpanded ? <span class="branch-0 cbranch-no" title="branch not covered" >undefined </span>: true;
+    render() {
+        const isArray = Array.isArray(this.props.content);
+        const isHidden = this.state.isExpanded ? <span class="branch-0 cbranch-no" title="branch not covered" >undefined </span>: true;
 &nbsp;
-    return (
-      &lt;div className="collapsible-container"&gt;
-        &lt;button
-          onClick={this._toggleExpanded}
-          className="collapsible-summary"
-          type="button"
-          aria-expanded={this.state.isExpanded ? <span class="branch-0 cbranch-no" title="branch not covered" >true </span>: false}
-        &gt;
-          {this._renderShowButton()}
-          {this._renderHideButton()}
-        &lt;/button&gt;
+        return (
+            &lt;div className="collapsible-container"&gt;
+                &lt;button
+                    onClick={this._toggleExpanded}
+                    className="collapsible-summary"
+                    type="button"
+                    aria-expanded={this.state.isExpanded ? <span class="branch-0 cbranch-no" title="branch not covered" >true </span>: false}
+                &gt;
+                    {this._renderShowButton()}
+                    {this._renderHideButton()}
+                &lt;/button&gt;
 &nbsp;
-        &lt;div className="collapsible-details" hidden={isHidden}&gt;
-          {isArray ? (
-            &lt;ul className="items"&gt;
-              {this.props.content.map((c) =&gt; (
-                &lt;li key={c.contentTitle}&gt;
-                  &lt;p&gt;
-                    &lt;b&gt;{c.contentTitle}&lt;/b&gt;
-                  &lt;/p&gt;
-                  &lt;p&gt;{c.content}&lt;/p&gt;
-                &lt;/li&gt;
-              ))}
-            &lt;/ul&gt;
-          ) : (
-            &lt;div&gt;
-              &lt;p&gt;
-                &lt;b&gt;{this.props.contentTitle}&lt;/b&gt;
-              &lt;/p&gt;
-              &lt;p&gt;{this.props.content}&lt;/p&gt;
+                &lt;div className="collapsible-details" hidden={isHidden}&gt;
+                    {isArray ? (
+                        &lt;ul className="items"&gt;
+                            {this.props.content.map((c) =&gt; (
+                                &lt;li key={c.contentTitle}&gt;
+                                    &lt;p&gt;
+                                        &lt;b&gt;{c.contentTitle}&lt;/b&gt;
+                                    &lt;/p&gt;
+                                    &lt;p&gt;{c.content}&lt;/p&gt;
+                                &lt;/li&gt;
+                            ))}
+                        &lt;/ul&gt;
+                    ) : (
+                        &lt;div&gt;
+                            &lt;p&gt;
+                                &lt;b&gt;{this.props.contentTitle}&lt;/b&gt;
+                            &lt;/p&gt;
+                            &lt;p&gt;{this.props.content}&lt;/p&gt;
+                        &lt;/div&gt;
+                    )}
+                &lt;/div&gt;
             &lt;/div&gt;
-          )}
-        &lt;/div&gt;
-      &lt;/div&gt;
-    );
-  }
+        );
+    }
 }
 &nbsp;
 Collapsible.propTypes = {
-  showLabel: PropTypes.string.isRequired,
-  hideLabel: PropTypes.string.isRequired,
-  content: PropTypes.oneOfType([PropTypes.array, PropTypes.string]).isRequired,
-  contentTitle: PropTypes.string,
+    showLabel: PropTypes.string.isRequired,
+    hideLabel: PropTypes.string.isRequired,
+    content: PropTypes.oneOfType([PropTypes.array, PropTypes.string])
+        .isRequired,
+    contentTitle: PropTypes.string,
 };
 &nbsp;
 export default Collapsible;
@@ -334,7 +349,7 @@ export default Collapsible;
             <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>