feat(description) - Remove extra span in description, extra and state…

…ment (#27)

* chore(jsf) - remove span description field

* chore(jsf) - remove span statements

* Release 0.5.0-dev.20230705093926

* docs(helpers) - remove statement wrap

* Release 0.5.0-dev.20230705114115

* fix tests

* make ci pass

* Release 0.5.0-dev.20230810172154

* Release 0.7.0-dev.20230928101050

* remove yarn

---------

Co-authored-by: Gabriel <gabriel.garcia@remote.com>

.gitignore

@@ -27,4 +27,6 @@ coverage
 dist
 *.tgz
 # from unzipping .tgz
-package
+package
+
+yarn.lock

src/helpers.js

@@ -9,7 +9,7 @@ import { checkIfConditionMatchesProperties } from './checkIfConditionMatches';
 import { supportedTypes, getInputType } from './internals/fields';
 import { pickXKey } from './internals/helpers';
 import { processJSONLogicNode } from './jsonLogic';
-import { containsHTML, hasProperty, wrapWithSpan } from './utils';
+import { hasProperty } from './utils';
 import { buildCompleteYupSchema, buildYupSchema } from './yupSchema';
 
 /**
@@ -490,9 +490,7 @@ export function extractParametersFromNode(schemaNode) {
   const node = omit(schemaNode, ['x-jsf-presentation', 'presentation']);
 
   const description = presentation?.description || node.description;
-  const statementDescription = containsHTML(presentation.statement?.description)
-    ? wrapWithSpan(presentation.statement.description, { class: 'jsf-statement' })
-    : presentation.statement?.description;
+  const statementDescription = presentation.statement?.description;
 
   const value =
     typeof node.const !== 'undefined' && typeof node.default !== 'undefined'
@@ -540,14 +538,8 @@ export function extractParametersFromNode(schemaNode) {
       ...presentation,
       jsonLogicValidations,
       computedAttributes: decoratedComputedAttributes,
-      description: containsHTML(description)
-        ? wrapWithSpan(description, {
-            class: 'jsf-description',
-          })
-        : description,
-      extra: containsHTML(presentation.extra)
-        ? wrapWithSpan(presentation.extra, { class: 'jsf-extra' })
-        : presentation.extra,
+      description,
+      extra: presentation.extra,
       statement: presentation.statement && {
         ...presentation.statement,
         description: statementDescription,

src/tests/createHeadlessForm.test.js

@@ -2040,10 +2040,7 @@ describe('createHeadlessForm', () => {
       });
 
       expect(result).toMatchObject({
-        fields: [
-          { description: 'I am regular' },
-          { description: '<span class="jsf-description">I am <b>bold</b>.</span>' },
-        ],
+        fields: [{ description: 'I am regular' }, { description: 'I am <b>bold</b>.' }],
       });
     });
 
@@ -2502,17 +2499,15 @@ describe('createHeadlessForm', () => {
   });
 
   describe('when a field has conditional presentation properties', () => {
-    it('adds .jsf-statement to nested statement markup when visible', () => {
+    it('returns the nested properties when the conditional matches', () => {
       const { fields } = createHeadlessForm(schemaWithConditionalPresentationProperties, {
         initialValues: {
           // show the hidden statement
           mock_radio: 'no',
         },
       });
 
-      expect(fields[0].statement.description).toBe(
-        `<span class="jsf-statement"><a href="">conditional statement markup</a></span>`
-      );
+      expect(fields[0].statement.description).toBe(`<a href="">conditional statement markup</a>`);
     });
   });
 
@@ -3710,7 +3705,7 @@ describe('createHeadlessForm', () => {
       expect(fields).toMatchObject([
         {
           name: 'time',
-          description: '<span class="jsf-description">Write in <b>hh:ss</b> format</span>', // from presentation
+          description: 'Write in <b>hh:ss</b> format', // from presentation
           inputType: 'clock', // arbitrary type from presentation
           deprecated: {
             description: 'In favor of X', // from presentation

src/utils.js

@@ -22,28 +22,6 @@ export function convertDiskSizeFromTo(from, to) {
   };
 }
 
-/**
- * Check if a string contains HTML tags
- * @param {string} str
- * @returns {boolean}
- */
-export function containsHTML(str = '') {
-  return /<[a-z][\s\S]*>/i.test(str);
-}
-
-/**
- * Wraps a string with a span with attributes, if any.
- * @param {string} html Content to be wrapped
- * @param {Object.<string, string>} properties Object to be converted to HTML attributes
- * @returns {string}
- */
-export function wrapWithSpan(html, properties = {}) {
-  const attributes = Object.entries(properties)
-    .reduce((acc, [key, value]) => `${acc}${key}="${value}" `, '')
-    .trim();
-  return `<span ${attributes}>${html}</span>`;
-}
-
 /**
  * Checks if an object contains a property with a given name.
  * This util is needed because sometimes a condition coming from the schema could be something like