@k-int/stripes-kint-components 2.8.1 → 2.8.3

package/src/artifacts/coverage-jest/lcov-report/CustomProperties/View/CustomPropertiesViewCtx.js.html

@@ -23,30 +23,30 @@
         <div class='clearfix'>
             
             <div class='fl pad1y space-right2'>
-                <span class="strong">54.54% </span>
+                <span class="strong">80.95% </span>
                 <span class="quiet">Statements</span>
-                <span class='fraction'>12/22</span>
+                <span class='fraction'>17/21</span>
             </div>
         
             
             <div class='fl pad1y space-right2'>
-                <span class="strong">32% </span>
+                <span class="strong">50% </span>
                 <span class="quiet">Branches</span>
-                <span class='fraction'>8/25</span>
+                <span class='fraction'>9/18</span>
             </div>
         
             
             <div class='fl pad1y space-right2'>
-                <span class="strong">50% </span>
+                <span class="strong">100% </span>
                 <span class="quiet">Functions</span>
-                <span class='fraction'>3/6</span>
+                <span class='fraction'>6/6</span>
             </div>
         
             
             <div class='fl pad1y space-right2'>
-                <span class="strong">57.14% </span>
+                <span class="strong">80% </span>
                 <span class="quiet">Lines</span>
-                <span class='fraction'>12/21</span>
+                <span class='fraction'>16/20</span>
             </div>
         
             
@@ -61,7 +61,7 @@
             </div>
         </template>
     </div>
-    <div class='status-line medium'></div>
+    <div class='status-line high'></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>
@@ -180,8 +180,10 @@
 <a name='L115'></a><a href='#L115'>115</a>
 <a name='L116'></a><a href='#L116'>116</a>
 <a name='L117'></a><a href='#L117'>117</a>
-<a name='L118'></a><a href='#L118'>118</a></td><td class="line-coverage quiet"><span class="cline-any cline-neutral">&nbsp;</span>
-<span class="cline-any cline-neutral">&nbsp;</span>
+<a name='L118'></a><a href='#L118'>118</a>
+<a name='L119'></a><a href='#L119'>119</a>
+<a name='L120'></a><a href='#L120'>120</a>
+<a name='L121'></a><a href='#L121'>121</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>
@@ -196,18 +198,19 @@
 <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-no">&nbsp;</span>
-<span class="cline-any cline-no">&nbsp;</span>
 <span class="cline-any cline-neutral">&nbsp;</span>
+<span class="cline-any cline-yes">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-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>
@@ -216,9 +219,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-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>
@@ -237,6 +240,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-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>
@@ -261,7 +265,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">1x</span>
+<span class="cline-any cline-yes">12x</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>
@@ -275,7 +279,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">12x</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>
@@ -297,11 +301,12 @@
 <span class="cline-any cline-neutral">&nbsp;</span>
 <span class="cline-any cline-neutral">&nbsp;</span>
 <span class="cline-any cline-neutral">&nbsp;</span>
+<span class="cline-any cline-neutral">&nbsp;</span>
+<span class="cline-any cline-neutral">&nbsp;</span>
 <span class="cline-any cline-neutral">&nbsp;</span></td><td class="text"><pre class="prettyprint lang-js">import PropTypes from 'prop-types';
-import { FormattedMessage } from 'react-intl';
 import { Accordion, Badge, Spinner } from '@folio/stripes/components';
 &nbsp;
-import { useCustomProperties } from '../../hooks';
+import { useCustomProperties, useKintIntl } from '../../hooks';
 &nbsp;
 import CustomPropertyCard from './CustomPropertyCard';
 &nbsp;
@@ -310,15 +315,21 @@ const CustomPropertiesViewCtx = ({
   customProperties = <span class="branch-0 cbranch-no" title="branch not covered" >[],</span>
   customPropertiesEndpoint,
   id,
-  labelOverrides
+  intlKey: passedIntlKey,
+  intlNS: passedIntlNS,
+  labelOverrides = <span class="branch-0 cbranch-no" title="branch not covered" >{}</span>
 }) =&gt; {
+  const kintIntl = useKintIntl(passedIntlKey, passedIntlNS);
+&nbsp;
   // Deal with all the possible label override options
-  const getAccordionLabel = <span class="fstat-no" title="function not covered" >()</span> =&gt; {
+  const getAccordionLabel = () =&gt; {
     // Special case for null context
-<span class="cstat-no" title="statement not covered" >    if (ctx === 'isNull') {</span>
-<span class="cstat-no" title="statement not covered" >      return (</span>
-        labelOverrides.noContext ??
-        &lt;FormattedMessage id="stripes-kint-components.customProperties" /&gt;
+    <span class="missing-if-branch" title="else path not taken" >E</span>if (ctx === 'isNull') {
+      return (
+        kintIntl.formatKintMessage({
+          id: 'customProperties',
+          overrideValue: labelOverrides.noContext
+        })
       );
     }
 &nbsp;
@@ -326,18 +337,13 @@ const CustomPropertiesViewCtx = ({
 <span class="cstat-no" title="statement not covered" >    if (labelOverrides[ctx]) {</span>
 <span class="cstat-no" title="statement not covered" >      return labelOverrides[ctx];</span>
     }
-&nbsp;
-    // Label override for default title, taking ctx into account
-<span class="cstat-no" title="statement not covered" >    if (labelOverrides.defaultTitle &amp;&amp; typeof labelOverrides.defaultTitle === 'function') {</span>
-<span class="cstat-no" title="statement not covered" >      return (</span>
-        labelOverrides.defaultTitle(ctx)
-      );
-    }
 &nbsp;
     // Label override for default title or finally built in default
 <span class="cstat-no" title="statement not covered" >    return (</span>
-      labelOverrides.defaultTitle ??
-      &lt;FormattedMessage id="stripes-kint-components.customProperties.ctx.title" values={{ ctx }} /&gt;
+      kintIntl.formatKintMessage({
+        id: 'customProperties.defaultTitle',
+        overrideValue: labelOverrides.defaultTitle
+      }, { ctx })
     );
   };
 &nbsp;
@@ -349,7 +355,8 @@ const CustomPropertiesViewCtx = ({
       sort: [
         { path: 'retired' }, // Place retired custprops at the end
         { path: 'primary', direction: 'desc' }, // Primary properties should display before optional
-        { path: 'label' } // Within those groups, sort by label
+        { path: 'weight' }, // Within those groups, sort by weight
+        { path: 'label' } // For those with the same weight, sort by label
       ]
     }
   });
@@ -378,21 +385,21 @@ const CustomPropertiesViewCtx = ({
   );
 &nbsp;
   // We need to display any set properties, along with any non-set primary properties
-  const primaryCount = custprops?.filter(<span class="fstat-no" title="function not covered" >cp</span> =&gt; <span class="cstat-no" title="statement not covered" >cp.primary === true)</span>?.length ?? 0;
+  const primaryCount = custprops?.filter(cp =&gt; cp.primary === true)?.length ?? <span class="branch-1 cbranch-no" title="branch not covered" >0;</span>
   const optionalCount = countSetProperties(false);
   const setPrimaryCount = countSetProperties(true);
 &nbsp;
   return (
     (primaryCount + optionalCount) &gt; 0 &amp;&amp;
-<span class="branch-1 cbranch-no" title="branch not covered" >    &lt;Accordion</span>
+    &lt;Accordion
       closedByDefault
       displayWhenClosed={&lt;Badge&gt;{setPrimaryCount + optionalCount}&lt;/Badge&gt;}
       displayWhenOpen={&lt;Badge&gt;{setPrimaryCount + optionalCount}&lt;/Badge&gt;}
       id={`${id}-accordion-${ctx}`}
       label={getAccordionLabel()}
     &gt;
-      {custprops.map(<span class="fstat-no" title="function not covered" >(c</span>p, index) =&gt; (
-<span class="cstat-no" title="statement not covered" >        &lt;CustomPropertyCard</span>
+      {custprops.map((cp, index) =&gt; (
+        &lt;CustomPropertyCard
           key={`custom-property-card-${ctx}[${index}]`}
           ctx={ctx}
           customProperty={customProperties?.[cp.name]?.[0]}
@@ -410,6 +417,8 @@ CustomPropertiesViewCtx.propTypes = {
   customProperties: PropTypes.object,
   customPropertiesEndpoint: PropTypes.string,
   id: PropTypes.string,
+  intlKey: PropTypes.string,
+  intlNS: PropTypes.string,
   labelOverrides: PropTypes.object,
 };
 &nbsp;
@@ -421,7 +430,7 @@ export default CustomPropertiesViewCtx;
             <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 Thu Jun 16 2022 14:59:18 GMT+0100 (British Summer Time)
+                at 2022-09-16T13:23:25.290Z
             </div>
         <script src="../../prettify.js"></script>
         <script>

package/src/artifacts/coverage-jest/lcov-report/CustomProperties/View/CustomPropertyCard.js.html

@@ -25,28 +25,28 @@
             <div class='fl pad1y space-right2'>
                 <span class="strong">0% </span>
                 <span class="quiet">Statements</span>
-                <span class='fraction'>0/25</span>
+                <span class='fraction'>0/18</span>
             </div>
         
             
             <div class='fl pad1y space-right2'>
                 <span class="strong">0% </span>
                 <span class="quiet">Branches</span>
-                <span class='fraction'>0/53</span>
+                <span class='fraction'>0/32</span>
             </div>
         
             
             <div class='fl pad1y space-right2'>
                 <span class="strong">0% </span>
                 <span class="quiet">Functions</span>
-                <span class='fraction'>0/5</span>
+                <span class='fraction'>0/3</span>
             </div>
         
             
             <div class='fl pad1y space-right2'>
                 <span class="strong">0% </span>
                 <span class="quiet">Lines</span>
-                <span class='fraction'>0/25</span>
+                <span class='fraction'>0/18</span>
             </div>
         
             
@@ -241,14 +241,8 @@
 <a name='L176'></a><a href='#L176'>176</a>
 <a name='L177'></a><a href='#L177'>177</a>
 <a name='L178'></a><a href='#L178'>178</a>
-<a name='L179'></a><a href='#L179'>179</a>
-<a name='L180'></a><a href='#L180'>180</a>
-<a name='L181'></a><a href='#L181'>181</a>
-<a name='L182'></a><a href='#L182'>182</a>
-<a name='L183'></a><a href='#L183'>183</a>
-<a name='L184'></a><a href='#L184'>184</a>
-<a name='L185'></a><a href='#L185'>185</a>
-<a name='L186'></a><a href='#L186'>186</a></td><td class="line-coverage quiet"><span class="cline-any cline-neutral">&nbsp;</span>
+<a name='L179'></a><a href='#L179'>179</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>
@@ -272,18 +266,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-no">&nbsp;</span>
 <span class="cline-any cline-neutral">&nbsp;</span>
 <span class="cline-any cline-no">&nbsp;</span>
-<span class="cline-any cline-no">&nbsp;</span>
 <span class="cline-any cline-neutral">&nbsp;</span>
 <span class="cline-any cline-neutral">&nbsp;</span>
 <span class="cline-any cline-no">&nbsp;</span>
 <span class="cline-any cline-neutral">&nbsp;</span>
+<span class="cline-any cline-no">&nbsp;</span>
+<span class="cline-any cline-no">&nbsp;</span>
 <span class="cline-any cline-neutral">&nbsp;</span>
 <span class="cline-any cline-neutral">&nbsp;</span>
 <span class="cline-any cline-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-no">&nbsp;</span>
 <span class="cline-any cline-no">&nbsp;</span>
 <span class="cline-any cline-neutral">&nbsp;</span>
@@ -291,16 +287,13 @@
 <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-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-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>
@@ -308,39 +301,30 @@
 <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-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-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-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-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>
@@ -433,8 +417,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></td><td class="text"><pre class="prettyprint lang-js">import PropTypes from 'prop-types';
-import { FormattedMessage, FormattedNumber } from 'react-intl';
+import { FormattedNumber } from 'react-intl';
 &nbsp;
 import {
   Card,
@@ -448,14 +434,19 @@ import {
 } from '@folio/stripes/components';
 &nbsp;
 import * as CUSTPROP_TYPES from '../../constants/customProperties';
+import { useKintIntl } from '../../hooks';
 &nbsp;
 const CustomPropertyCard = <span class="cstat-no" title="statement not covered" ><span class="fstat-no" title="function not covered" >({</span></span>
   ctx,
   customProperty,
   customPropertyDefinition = <span class="branch-0 cbranch-no" title="branch not covered" >{},</span>
   index,
-  labelOverrides
+  intlKey: passedIntlKey,
+  intlNS: passedIntlNS,
+  labelOverrides = <span class="branch-0 cbranch-no" title="branch not covered" >{}</span>
 }) =&gt; {
+  const kintIntl = <span class="cstat-no" title="statement not covered" >useKintIntl(passedIntlKey, passedIntlNS);</span>
+&nbsp;
   // We only need to display primary and set properties
   const toDisplay = <span class="cstat-no" title="statement not covered" >!!(customPropertyDefinition.primary || customProperty);</span>
 &nbsp;
@@ -465,42 +456,14 @@ const CustomPropertyCard = <span class="cstat-no" title="statement not covered"
 &nbsp;
   const internalFalse = <span class="cstat-no" title="statement not covered" >customProperty?.internal === false ||</span>
                         (customProperty?.internal === undefined &amp;&amp; customPropertyDefinition.defaultInternal === false);
-&nbsp;
-  // Deal with all the possible label override options
-  const getRetiredCardTitle = <span class="cstat-no" title="statement not covered" ><span class="fstat-no" title="function not covered" >()</span> =&gt; {</span>
-    // Label override for default card title,
-<span class="cstat-no" title="statement not covered" >    if (labelOverrides.retiredName &amp;&amp; typeof labelOverrides.retiredName === 'function') {</span>
-<span class="cstat-no" title="statement not covered" >      return (</span>
-        labelOverrides.retiredName(customPropertyDefinition.name)
-      );
-    }
-&nbsp;
-    // Label override for default title or finally built in default
-<span class="cstat-no" title="statement not covered" >    return (</span>
-      labelOverrides.retiredName ??
-      &lt;FormattedMessage id="stripes-kint-components.customProperty.retiredName" values={{ name: customPropertyDefinition.label }} /&gt;
-    );
-  };
-&nbsp;
-  const getInternalLabel = <span class="cstat-no" title="statement not covered" ><span class="fstat-no" title="function not covered" >()</span> =&gt; {</span>
-<span class="cstat-no" title="statement not covered" >    if (internalFalse) {</span>
-<span class="cstat-no" title="statement not covered" >      return (</span>
-        labelOverrides.internalFalse ??
-        &lt;FormattedMessage id="stripes-kint-components.customProperty.internalFalse" /&gt;
-      );
-    }
-&nbsp;
-<span class="cstat-no" title="statement not covered" >    return (</span>
-      labelOverrides.internalTrue ??
-      &lt;FormattedMessage id="stripes-kint-components.customProperty.internalTrue" /&gt;
-    );
-  };
 &nbsp;
   const renderValue = <span class="cstat-no" title="statement not covered" ><span class="fstat-no" title="function not covered" >()</span> =&gt; {</span>
 <span class="cstat-no" title="statement not covered" >    if (!customProperty) {</span>
 <span class="cstat-no" title="statement not covered" >      return (</span>
-        labelOverrides.notSet ??
-        &lt;FormattedMessage id="stripes-kint-components.customProperty.notSet" /&gt;
+        kintIntl.formatKintMessage({
+          id: 'notSet',
+          overrideValue: labelOverrides.notSet
+        })
       );
     }
 &nbsp;
@@ -532,7 +495,10 @@ const CustomPropertyCard = <span class="cstat-no" title="statement not covered"
         &lt;&gt;
           &lt;strong&gt;
             {customPropertyDefinition.retired ?
-              getRetiredCardTitle() :
+              (kintIntl.formatKintMessage({
+                id: 'customProperty.retiredName',
+                overrideValue: labelOverrides.retiredName
+              }, { name: customPropertyDefinition.label })) :
               customPropertyDefinition.label
             }
           &lt;/strong&gt;
@@ -549,8 +515,10 @@ const CustomPropertyCard = <span class="cstat-no" title="statement not covered"
         &lt;Col xs={6}&gt;
           &lt;KeyValue
             label={
-              labelOverrides.value ??
-              &lt;FormattedMessage id="stripes-kint-components.customProperty.value" /&gt;
+              kintIntl.formatKintMessage({
+                id: 'valueOrValues',
+                overrideValue: labelOverrides.valueOrValues
+              })
             }
           &gt;
             {renderValue()}
@@ -560,8 +528,10 @@ const CustomPropertyCard = <span class="cstat-no" title="statement not covered"
           &lt;Col xs={6}&gt;
             &lt;KeyValue
               label={
-                labelOverrides.internalNote ??
-                &lt;FormattedMessage id="stripes-kint-components.customProperty.internalNote" /&gt;
+                kintIntl.formatKintMessage({
+                  id: 'customProperties.internalNote',
+                  overrideValue: labelOverrides.internalNote
+                })
               }
             &gt;
               &lt;span
@@ -577,19 +547,26 @@ const CustomPropertyCard = <span class="cstat-no" title="statement not covered"
         &lt;Col xs={6}&gt;
           &lt;KeyValue
             label={
-              labelOverrides.visibility ??
-              &lt;FormattedMessage id="stripes-kint-components.customProperty.visibility" /&gt;
+              kintIntl.formatKintMessage({
+                id: 'customProperties.visibility',
+                overrideValue: labelOverrides.visibility
+              })
             }
           &gt;
-            {getInternalLabel()}
+            {kintIntl.formatKintMessage({
+              id: 'customProperties.internalFalse',
+              overrideValue: labelOverrides.internalFalse
+            })}
           &lt;/KeyValue&gt;
         &lt;/Col&gt;
         {internalFalse &amp;&amp;
           &lt;Col xs={6}&gt;
             &lt;KeyValue
               label={
-                labelOverrides.publicNote ??
-                &lt;FormattedMessage id="stripes-kint-components.customProperty.publicNote" /&gt;
+                kintIntl.formatKintMessage({
+                  id: 'customProperties.publicNote',
+                  overrideValue: labelOverrides.publicNote
+                })
               }
             &gt;
               {customProperty?.publicNote ? (
@@ -614,6 +591,8 @@ const CustomPropertyCard = <span class="cstat-no" title="statement not covered"
   customProperty: PropTypes.object,
   customPropertyDefinition: PropTypes.object,
   index: PropTypes.number,
+  intlKey: PropTypes.string,
+  intlNS: PropTypes.string,
   labelOverrides: PropTypes.object,
 };
 &nbsp;
@@ -625,7 +604,7 @@ export default CustomPropertyCard;
             <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 Thu Jun 16 2022 14:59:18 GMT+0100 (British Summer Time)
+                at 2022-09-16T13:23:25.290Z
             </div>
         <script src="../../prettify.js"></script>
         <script>

package/src/artifacts/coverage-jest/lcov-report/CustomProperties/View/index.html

@@ -23,30 +23,30 @@
         <div class='clearfix'>
             
             <div class='fl pad1y space-right2'>
-                <span class="strong">36.36% </span>
+                <span class="strong">53.19% </span>
                 <span class="quiet">Statements</span>
-                <span class='fraction'>20/55</span>
+                <span class='fraction'>25/47</span>
             </div>
         
             
             <div class='fl pad1y space-right2'>
-                <span class="strong">10% </span>
+                <span class="strong">17.3% </span>
                 <span class="quiet">Branches</span>
-                <span class='fraction'>8/80</span>
+                <span class='fraction'>9/52</span>
             </div>
         
             
             <div class='fl pad1y space-right2'>
-                <span class="strong">38.46% </span>
+                <span class="strong">72.72% </span>
                 <span class="quiet">Functions</span>
-                <span class='fraction'>5/13</span>
+                <span class='fraction'>8/11</span>
             </div>
         
             
             <div class='fl pad1y space-right2'>
-                <span class="strong">37.03% </span>
+                <span class="strong">52.17% </span>
                 <span class="quiet">Lines</span>
-                <span class='fraction'>20/54</span>
+                <span class='fraction'>24/46</span>
             </div>
         
             
@@ -61,7 +61,7 @@
             </div>
         </template>
     </div>
-    <div class='status-line low'></div>
+    <div class='status-line medium'></div>
     <div class="pad1">
 <table class="coverage-summary">
 <thead>
@@ -94,18 +94,18 @@
 	</tr>
 
 <tr>
-	<td class="file medium" data-value="CustomPropertiesViewCtx.js"><a href="CustomPropertiesViewCtx.js.html">CustomPropertiesViewCtx.js</a></td>
-	<td data-value="54.54" class="pic medium">
-	<div class="chart"><div class="cover-fill" style="width: 54%"></div><div class="cover-empty" style="width: 46%"></div></div>
+	<td class="file high" data-value="CustomPropertiesViewCtx.js"><a href="CustomPropertiesViewCtx.js.html">CustomPropertiesViewCtx.js</a></td>
+	<td data-value="80.95" class="pic high">
+	<div class="chart"><div class="cover-fill" style="width: 80%"></div><div class="cover-empty" style="width: 20%"></div></div>
 	</td>
-	<td data-value="54.54" class="pct medium">54.54%</td>
-	<td data-value="22" class="abs medium">12/22</td>
-	<td data-value="32" class="pct low">32%</td>
-	<td data-value="25" class="abs low">8/25</td>
+	<td data-value="80.95" class="pct high">80.95%</td>
+	<td data-value="21" class="abs high">17/21</td>
 	<td data-value="50" class="pct medium">50%</td>
-	<td data-value="6" class="abs medium">3/6</td>
-	<td data-value="57.14" class="pct medium">57.14%</td>
-	<td data-value="21" class="abs medium">12/21</td>
+	<td data-value="18" class="abs medium">9/18</td>
+	<td data-value="100" class="pct high">100%</td>
+	<td data-value="6" class="abs high">6/6</td>
+	<td data-value="80" class="pct high">80%</td>
+	<td data-value="20" class="abs high">16/20</td>
 	</tr>
 
 <tr>
@@ -114,13 +114,13 @@
 	<div class="chart"><div class="cover-fill" style="width: 0%"></div><div class="cover-empty" style="width: 100%"></div></div>
 	</td>
 	<td data-value="0" class="pct low">0%</td>
-	<td data-value="25" class="abs low">0/25</td>
+	<td data-value="18" class="abs low">0/18</td>
 	<td data-value="0" class="pct low">0%</td>
-	<td data-value="53" class="abs low">0/53</td>
+	<td data-value="32" class="abs low">0/32</td>
 	<td data-value="0" class="pct low">0%</td>
-	<td data-value="5" class="abs low">0/5</td>
+	<td data-value="3" class="abs low">0/3</td>
 	<td data-value="0" class="pct low">0%</td>
-	<td data-value="25" class="abs low">0/25</td>
+	<td data-value="18" class="abs low">0/18</td>
 	</tr>
 
 <tr>
@@ -161,7 +161,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 Thu Jun 16 2022 14:59:18 GMT+0100 (British Summer Time)
+                at 2022-09-16T13:23:25.290Z
             </div>
         <script src="../../prettify.js"></script>
         <script>