@npm_leadtech/legal-lib-components 1.18.0 → 1.18.2

package/coverage/lcov-report/index.html

@@ -23,30 +23,30 @@
         <div class='clearfix'>
             
             <div class='fl pad1y space-right2'>
-                <span class="strong">92.25% </span>
+                <span class="strong">94.16% </span>
                 <span class="quiet">Statements</span>
-                <span class='fraction'>524/568</span>
+                <span class='fraction'>452/480</span>
             </div>
         
             
             <div class='fl pad1y space-right2'>
-                <span class="strong">79.95% </span>
+                <span class="strong">82.4% </span>
                 <span class="quiet">Branches</span>
-                <span class='fraction'>351/439</span>
+                <span class='fraction'>309/375</span>
             </div>
         
             
             <div class='fl pad1y space-right2'>
-                <span class="strong">87.4% </span>
+                <span class="strong">90.35% </span>
                 <span class="quiet">Functions</span>
-                <span class='fraction'>118/135</span>
+                <span class='fraction'>103/114</span>
             </div>
         
             
             <div class='fl pad1y space-right2'>
-                <span class="strong">92.76% </span>
+                <span class="strong">94.68% </span>
                 <span class="quiet">Lines</span>
-                <span class='fraction'>513/553</span>
+                <span class='fraction'>445/470</span>
             </div>
         
             
@@ -153,21 +153,6 @@
 	<td data-value="19" class="abs high">18/19</td>
 	</tr>
 
-<tr>
-	<td class="file high" data-value="src/components/atoms/ButtonIcon"><a href="src/components/atoms/ButtonIcon/index.html">src/components/atoms/ButtonIcon</a></td>
-	<td data-value="91.66" class="pic high">
-	<div class="chart"><div class="cover-fill" style="width: 91%"></div><div class="cover-empty" style="width: 9%"></div></div>
-	</td>
-	<td data-value="91.66" class="pct high">91.66%</td>
-	<td data-value="12" class="abs high">11/12</td>
-	<td data-value="75" class="pct medium">75%</td>
-	<td data-value="12" class="abs medium">9/12</td>
-	<td data-value="100" class="pct high">100%</td>
-	<td data-value="2" class="abs high">2/2</td>
-	<td data-value="91.66" class="pct high">91.66%</td>
-	<td data-value="12" class="abs high">11/12</td>
-	</tr>
-
 <tr>
 	<td class="file high" data-value="src/components/atoms/CardPane"><a href="src/components/atoms/CardPane/index.html">src/components/atoms/CardPane</a></td>
 	<td data-value="92.3" class="pic high">
@@ -213,21 +198,6 @@
 	<td data-value="37" class="abs high">35/37</td>
 	</tr>
 
-<tr>
-	<td class="file medium" data-value="src/components/atoms/DialogMenuIcon"><a href="src/components/atoms/DialogMenuIcon/index.html">src/components/atoms/DialogMenuIcon</a></td>
-	<td data-value="57.14" class="pic medium">
-	<div class="chart"><div class="cover-fill" style="width: 57%"></div><div class="cover-empty" style="width: 43%"></div></div>
-	</td>
-	<td data-value="57.14" class="pct medium">57.14%</td>
-	<td data-value="28" class="abs medium">16/28</td>
-	<td data-value="5.55" class="pct low">5.55%</td>
-	<td data-value="18" class="abs low">1/18</td>
-	<td data-value="37.5" class="pct low">37.5%</td>
-	<td data-value="8" class="abs low">3/8</td>
-	<td data-value="59.25" class="pct medium">59.25%</td>
-	<td data-value="27" class="abs medium">16/27</td>
-	</tr>
-
 <tr>
 	<td class="file high" data-value="src/components/atoms/Disclaimer"><a href="src/components/atoms/Disclaimer/index.html">src/components/atoms/Disclaimer</a></td>
 	<td data-value="100" class="pic high">
@@ -680,17 +650,17 @@
 
 <tr>
 	<td class="file high" data-value="src/components/molecules/Pagination"><a href="src/components/molecules/Pagination/index.html">src/components/molecules/Pagination</a></td>
-	<td data-value="94.82" class="pic high">
-	<div class="chart"><div class="cover-fill" style="width: 94%"></div><div class="cover-empty" style="width: 6%"></div></div>
+	<td data-value="100" class="pic high">
+	<div class="chart"><div class="cover-fill cover-full" style="width: 100%"></div><div class="cover-empty" style="width: 0%"></div></div>
 	</td>
-	<td data-value="94.82" class="pct high">94.82%</td>
-	<td data-value="58" class="abs high">55/58</td>
-	<td data-value="84.37" class="pct high">84.37%</td>
-	<td data-value="32" class="abs high">27/32</td>
-	<td data-value="91.66" class="pct high">91.66%</td>
-	<td data-value="12" class="abs high">11/12</td>
-	<td data-value="94.73" class="pct high">94.73%</td>
-	<td data-value="57" class="abs high">54/57</td>
+	<td data-value="100" class="pct high">100%</td>
+	<td data-value="57" class="abs high">57/57</td>
+	<td data-value="90.32" class="pct high">90.32%</td>
+	<td data-value="31" class="abs high">28/31</td>
+	<td data-value="100" class="pct high">100%</td>
+	<td data-value="12" class="abs high">12/12</td>
+	<td data-value="100" class="pct high">100%</td>
+	<td data-value="57" class="abs high">57/57</td>
 	</tr>
 
 <tr>
@@ -723,21 +693,6 @@
 	<td data-value="26" class="abs high">26/26</td>
 	</tr>
 
-<tr>
-	<td class="file high" data-value="src/components/molecules/TextInput"><a href="src/components/molecules/TextInput/index.html">src/components/molecules/TextInput</a></td>
-	<td data-value="100" class="pic high">
-	<div class="chart"><div class="cover-fill cover-full" style="width: 100%"></div><div class="cover-empty" style="width: 0%"></div></div>
-	</td>
-	<td data-value="100" class="pct high">100%</td>
-	<td data-value="47" class="abs high">47/47</td>
-	<td data-value="100" class="pct high">100%</td>
-	<td data-value="33" class="abs high">33/33</td>
-	<td data-value="100" class="pct high">100%</td>
-	<td data-value="11" class="abs high">11/11</td>
-	<td data-value="100" class="pct high">100%</td>
-	<td data-value="44" class="abs high">44/44</td>
-	</tr>
-
 <tr>
 	<td class="file high" data-value="src/components/molecules/TooltipMenu"><a href="src/components/molecules/TooltipMenu/index.html">src/components/molecules/TooltipMenu</a></td>
 	<td data-value="100" class="pic high">
@@ -791,7 +746,7 @@
             <div class='footer quiet pad2 space-top1 center small'>
                 Code coverage generated by
                 <a href="https://istanbul.js.org/" target="_blank" rel="noopener">istanbul</a>
-                at Mon Apr 25 2022 12:28:27 GMT+0200 (GMT+02:00)
+                at Fri Apr 08 2022 14:53:37 GMT+0200 (GMT+02:00)
             </div>
         <script src="prettify.js"></script>
         <script>

package/coverage/lcov-report/{src/components/molecules/TextInput/TextInput.js.html → molecules/PricingCard/PricingCard.js.html}

@@ -3,15 +3,15 @@
 <html lang="en">
 
 <head>
-    <title>Code coverage report for src/components/molecules/TextInput/TextInput.js</title>
+    <title>Code coverage report for molecules/PricingCard/PricingCard.js</title>
     <meta charset="utf-8" />
-    <link rel="stylesheet" href="../../../../prettify.css" />
-    <link rel="stylesheet" href="../../../../base.css" />
-    <link rel="shortcut icon" type="image/x-icon" href="../../../../favicon.png" />
+    <link rel="stylesheet" href="../../prettify.css" />
+    <link rel="stylesheet" href="../../base.css" />
+    <link rel="shortcut icon" type="image/x-icon" href="../../favicon.png" />
     <meta name="viewport" content="width=device-width, initial-scale=1" />
     <style type='text/css'>
         .coverage-summary .sorter {
-            background-image: url(../../../../sort-arrow-sprite.png);
+            background-image: url(../../sort-arrow-sprite.png);
         }
     </style>
 </head>
@@ -19,34 +19,34 @@
 <body>
 <div class='wrapper'>
     <div class='pad1'>
-        <h1><a href="../../../../index.html">All files</a> / <a href="index.html">src/components/molecules/TextInput</a> TextInput.js</h1>
+        <h1><a href="../../index.html">All files</a> / <a href="index.html">molecules/PricingCard</a> PricingCard.js</h1>
         <div class='clearfix'>
             
             <div class='fl pad1y space-right2'>
-                <span class="strong">100% </span>
+                <span class="strong">84.21% </span>
                 <span class="quiet">Statements</span>
-                <span class='fraction'>10/10</span>
+                <span class='fraction'>16/19</span>
             </div>
         
             
             <div class='fl pad1y space-right2'>
-                <span class="strong">100% </span>
+                <span class="strong">93.54% </span>
                 <span class="quiet">Branches</span>
-                <span class='fraction'>2/2</span>
+                <span class='fraction'>29/31</span>
             </div>
         
             
             <div class='fl pad1y space-right2'>
-                <span class="strong">100% </span>
+                <span class="strong">50% </span>
                 <span class="quiet">Functions</span>
-                <span class='fraction'>2/2</span>
+                <span class='fraction'>2/4</span>
             </div>
         
             
             <div class='fl pad1y space-right2'>
-                <span class="strong">100% </span>
+                <span class="strong">84.21% </span>
                 <span class="quiet">Lines</span>
-                <span class='fraction'>10/10</span>
+                <span class='fraction'>16/19</span>
             </div>
         
             
@@ -186,18 +186,28 @@
 <a name='L121'></a><a href='#L121'>121</a>
 <a name='L122'></a><a href='#L122'>122</a>
 <a name='L123'></a><a href='#L123'>123</a>
-<a name='L124'></a><a href='#L124'>124</a></td><td class="line-coverage quiet"><span class="cline-any cline-neutral">&nbsp;</span>
+<a name='L124'></a><a href='#L124'>124</a>
+<a name='L125'></a><a href='#L125'>125</a>
+<a name='L126'></a><a href='#L126'>126</a>
+<a name='L127'></a><a href='#L127'>127</a>
+<a name='L128'></a><a href='#L128'>128</a>
+<a name='L129'></a><a href='#L129'>129</a>
+<a name='L130'></a><a href='#L130'>130</a>
+<a name='L131'></a><a href='#L131'>131</a>
+<a name='L132'></a><a href='#L132'>132</a>
+<a name='L133'></a><a href='#L133'>133</a>
+<a name='L134'></a><a href='#L134'>134</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>
 <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-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-neutral">&nbsp;</span>
@@ -207,35 +217,46 @@
 <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">13x</span>
+<span class="cline-any cline-yes">5x</span>
 <span class="cline-any cline-neutral">&nbsp;</span>
+<span class="cline-any cline-yes">8x</span>
+<span class="cline-any cline-yes">8x</span>
+<span class="cline-any cline-yes">8x</span>
+<span class="cline-any cline-yes">8x</span>
+<span class="cline-any cline-yes">8x</span>
 <span class="cline-any cline-neutral">&nbsp;</span>
+<span class="cline-any cline-yes">8x</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">8x</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">8x</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">6x</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">8x</span>
 <span class="cline-any cline-neutral">&nbsp;</span>
 <span class="cline-any cline-neutral">&nbsp;</span>
-<span class="cline-any cline-yes">6x</span>
-<span class="cline-any cline-yes">6x</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">8x</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>
@@ -247,9 +268,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">21x</span>
 <span class="cline-any cline-neutral">&nbsp;</span>
 <span class="cline-any cline-neutral">&nbsp;</span>
-<span class="cline-any cline-yes">5x</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>
@@ -261,6 +282,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">8x</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>
@@ -268,7 +290,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">6x</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>
@@ -279,7 +300,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">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>
@@ -295,143 +315,153 @@
 <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-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-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">1x</span>
-<span class="cline-any cline-neutral">&nbsp;</span></td><td class="text"><pre class="prettyprint lang-js">import React 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 } from 'react';
+import { Button } from '../../atoms/Button/Button';
+import { Message } from '../../atoms/Message/Message';
+&nbsp;
 import PropTypes from 'prop-types';
-import classNames from 'classnames';
-import NumberFormat from 'react-number-format';
-import { Input } from './Input';
-import { TextInputMessage } from './TextInputMessage';
-import { TextInputLabel } from './TextInputLabel';
-import { TextInputTooltip } from './TextInputTooltip';
+import './PricingCard.scss';
 &nbsp;
-import './textInput.scss';
+export const PricingCard = ({
+  order,
+  subscriptionId,
+  onChangeRadio,
+  isChecked,
+  planName,
+  price,
+  currency,
+  featuresList,
+  children,
+  disclaimer,
+  message,
+  cardButton,
+}) =&gt; {
+  if (!planName || (onChangeRadio &amp;&amp; !subscriptionId) || (!featuresList?.length &amp;&amp; !children)) {
+    return null;
+  }
+  const isSelectableCard = !!onChangeRadio;
+  const selectableCardClass = isSelectableCard ? '--selectable' : '';
+  const selectedCardClass = isSelectableCard &amp;&amp; isChecked ? '--selected' : '';
+  const [cardState, setCardState] = useState({ expanded: false });
+  const expandedContentClass = cardState.expanded ? <span class="branch-0 cbranch-no" title="branch not covered" >'--expanded' </span>: '';
 &nbsp;
-export const TextInput = React.forwardRef(
-  (
-    {
-      label,
-      value,
-      validate,
-      isValidGroup,
-      mask,
-      format,
-      name,
-      placeholder,
-      onChange,
-      onClick,
-      onBlur,
-      disabled,
-      type,
-      maxLength,
-      errorMessage,
-      notes,
-      dialogMenuTip,
-      tooltip,
-      givenClass,
-    },
-    ref
-  ) =&gt; {
-    const classnames = classNames('e-text', {
-      [givenClass]: givenClass,
-      'e-text--is-invalid': !validate,
-      'e-text--group-invalid': !isValidGroup,
+  const style = {
+    order: order ?? 0,
+  };
+&nbsp;
+  const toggleCardContent = <span class="fstat-no" title="function not covered" >()</span> =&gt; {
+<span class="cstat-no" title="statement not covered" >    setCardState(<span class="fstat-no" title="function not covered" >(p</span>revState) =&gt; {</span>
+<span class="cstat-no" title="statement not covered" >      prevState = { expanded: !prevState.expanded };</span>
+<span class="cstat-no" title="statement not covered" >      return { ...prevState };</span>
     });
+  };
 &nbsp;
-    const renderInput = () =&gt; {
-      if (format) {
-        return (
-          &lt;NumberFormat
-            name={name}
-            id={name}
-            placeholder={placeholder}
-            className='e-text-input'
-            mask={mask}
-            format={format}
-            onChange={onChange}
-            onClick={onClick}
-            maskChar={null}
-            value={value}
-            data-qa={name}
-            disabled={disabled}
-            maxLength={maxLength}
-            onBlur={onBlur}
-          /&gt;
-        );
-      }
-      return (
-        &lt;Input
-          name={name}
-          id={name}
-          type={type}
-          placeholder={placeholder}
-          className='e-text-input'
-          onChange={onChange}
-          onClick={onClick}
-          value={value}
-          data-qa={name}
-          disabled={disabled}
-          maxLength={maxLength}
-          onBlur={onBlur}
-          ref={ref}
-        /&gt;
-      );
-    };
+  const seeMoreMobileButton = (
+    &lt;Button
+      givenClass='see-more-button'
+      tertiary
+      label={cardState.expanded ? <span class="branch-0 cbranch-no" title="branch not covered" >'See less' </span>: 'See more'}
+      noLink
+      onClick={toggleCardContent}
+    /&gt;
+  );
 &nbsp;
-    return (
-      &lt;div className={classnames}&gt;
-        &lt;TextInputTooltip tooltip={tooltip} /&gt;
-        &lt;TextInputMessage errorMessage={errorMessage} validate={validate} /&gt;
-        {renderInput()}
-        &lt;TextInputLabel label={label} notes={notes} dialogMenuTip={dialogMenuTip} /&gt;
-      &lt;/div&gt;
-    );
-  }
-);
+  const headerContent = (
+    &lt;div className='pricing-card__header'&gt;
+      &lt;h4 className={`sans-serif --big pricing-card__header__text`}&gt;
+        &lt;strong&gt;{planName}&lt;/strong&gt;
+      &lt;/h4&gt;
+    &lt;/div&gt;
+  );
 &nbsp;
-TextInput.propTypes = {
-  label: PropTypes.string,
-  name: PropTypes.string,
-  placeholder: PropTypes.string,
-  errorMessage: PropTypes.string,
-  givenClass: PropTypes.string,
-  tooltip: PropTypes.string,
-  dialogMenuTip: PropTypes.string,
-  mask: PropTypes.string,
-  format: PropTypes.string,
-  notes: PropTypes.string,
-  maxLength: PropTypes.any,
-  value: PropTypes.any,
-  type: PropTypes.oneOf(['password', 'text']),
-  validate: PropTypes.bool,
-  isValidGroup: PropTypes.bool,
-  disabled: PropTypes.bool,
-  onChange: PropTypes.func,
-  onClick: PropTypes.func,
-  onBlur: PropTypes.func,
-};
+  const bodyContent = (
+    &lt;div className='pricing-card__body'&gt;
+      {price &amp;&amp; (
+        &lt;div className={`sans-serif pricing-card__body__price`}&gt;
+          &lt;strong&gt;{price}&lt;/strong&gt;
+          &lt;span&gt;{currency}&lt;/span&gt;
+        &lt;/div&gt;
+      )}
+      {featuresList?.length &amp;&amp; (
+        &lt;div className={`pricing-card__body__features-list ${expandedContentClass}`}&gt;
+          &lt;hr /&gt;
+          &lt;ul&gt;
+            {featuresList.map((feature, index) =&gt; (
+              &lt;li key={'feature-item-' + index} className='pricing-card__body__features-list__item'&gt;
+                {feature}
+              &lt;/li&gt;
+            ))}
+          &lt;/ul&gt;
+        &lt;/div&gt;
+      )}
+      {children}
+      {isSelectableCard &amp;&amp; seeMoreMobileButton}
+      {cardButton}
+      {message &amp;&amp; &lt;Message {...message} /&gt;}
+    &lt;/div&gt;
+  );
 &nbsp;
-TextInput.defaultProps = {
-  type: 'text',
-  isValidGroup: true,
-  validate: true,
-  mask: ' ',
+  return (
+    &lt;li style={style} className={`pricing-card grid__column ${selectableCardClass} ${selectedCardClass}`}&gt;
+      &lt;div className={`pricing-card__wrapper`}&gt;
+        {isSelectableCard ? (
+          &lt;label className='pricing-card__radio-label'&gt;
+            &lt;input
+              className='radio-input'
+              type='radio'
+              value={subscriptionId}
+              onChange={onChangeRadio}
+              name='pricing'
+              checked={isChecked}
+            /&gt;
+            &lt;span className='radiobtn' data-qa={planName}&gt;&lt;/span&gt;
+            {headerContent}
+            {bodyContent}
+          &lt;/label&gt;
+        ) : (
+          &lt;&gt;
+            {headerContent}
+            {bodyContent}
+          &lt;/&gt;
+        )}
+      &lt;/div&gt;
+      {disclaimer &amp;&amp; (
+        &lt;div className='pricing-card__disclaimer'&gt;
+          &lt;small&gt;{disclaimer}&lt;/small&gt;
+        &lt;/div&gt;
+      )}
+    &lt;/li&gt;
+  );
 };
 &nbsp;
-TextInput.displayName = 'TextInput';
+PricingCard.propTypes = {
+  order: PropTypes.number,
+  subscriptionId: PropTypes.string,
+  onChangeRadio: PropTypes.func,
+  isChecked: PropTypes.bool,
+  planName: PropTypes.string,
+  price: PropTypes.string,
+  currency: PropTypes.string,
+  featuresList: PropTypes.array,
+  children: PropTypes.node,
+  disclaimer: PropTypes.string,
+  message: PropTypes.object,
+  cardButton: PropTypes.object,
+};
 &nbsp;</pre></td></tr></table></pre>
 
                 <div class='push'></div><!-- for sticky footer -->
@@ -439,16 +469,16 @@ TextInput.displayName = 'TextInput';
             <div class='footer quiet pad2 space-top1 center small'>
                 Code coverage generated by
                 <a href="https://istanbul.js.org/" target="_blank" rel="noopener">istanbul</a>
-                at Mon Apr 25 2022 12:28:27 GMT+0200 (GMT+02:00)
+                at Fri Apr 08 2022 14:53:02 GMT+0200 (GMT+02:00)
             </div>
-        <script src="../../../../prettify.js"></script>
+        <script src="../../prettify.js"></script>
         <script>
             window.onload = function () {
                 prettyPrint();
             };
         </script>
-        <script src="../../../../sorter.js"></script>
-        <script src="../../../../block-navigation.js"></script>
+        <script src="../../sorter.js"></script>
+        <script src="../../block-navigation.js"></script>
     </body>
 </html>