feat(markdown-converter): js docs and defaults corrections

Author: emerson-pereira

package.json

@@ -43,7 +43,6 @@
     "axios": "^0.19.0",
     "babel-eslint": "^10.0.2",
     "browserslist-config-carbon": "^10.3.0",
-    "carbon-components": "^10.7.4",
     "cross-env": "^5.2.0",
     "doctoc": "^1.4.0",
     "enzyme-to-json": "^3.3.5",

packages/utilities/package.json

@@ -56,6 +56,7 @@
     "babel-plugin-transform-inline-environment-variables": "^0.4.0",
     "babel-polyfill": "^6.26.0",
     "browserslist-config-carbon": "10.3.0",
+    "carbon-components": "^10.7.4",
     "chalk": "^2.3.0",
     "cli-table": "^0.3.0",
     "core-js": "^3.1.3",

packages/utilities/src/utilities/markdownToHtml/__tests__/markdownToHtml.js

@@ -1,27 +1,33 @@
+import { settings } from 'carbon-components';
 import { markdownToHtml } from '../';
 
+const { prefix } = settings;
+
 describe('Markdown converter utility', () => {
   const str =
-    'This <p>is</p> <input value="something" /> _italic_ and *italic*. <span>This</span> is **bold** and __bold__.';
+    'This <p>is</p> <input value="something" /> _italic_ and **bold**.';
 
   it('return the converted string with italic and bold', () => {
     const output = markdownToHtml(str);
-    const expected =
-      'This is <em>italic</em> and <em>italic</em>. This is <strong>bold</strong> and <strong>bold</strong>.';
+    const expected = `This is <em class="${prefix}--type-light">italic</em> and <strong class="${prefix}--type-semibold">bold</strong>.`;
     expect(output).toBe(expected);
   });
 
   it('return the converted string with italic', () => {
     const output = markdownToHtml(str, { italic: true });
-    const expected =
-      'This is <em>italic</em> and <em>italic</em>. This is **bold** and __bold__.';
+    const expected = `This is <em class="${prefix}--type-light">italic</em> and **bold**.`;
     expect(output).toBe(expected);
   });
 
   it('return the converted string with bold', () => {
     const output = markdownToHtml(str, { bold: true });
-    const expected =
-      'This is _italic_ and *italic*. This is <strong>bold</strong> and <strong>bold</strong>.';
+    const expected = `This is _italic_ and <strong class="${prefix}--type-semibold">bold</strong>.`;
+    expect(output).toBe(expected);
+  });
+
+  it('return the converted string without carbon classes', () => {
+    const output = markdownToHtml(str, { useCarbonClasses: false });
+    const expected = 'This is <em>italic</em> and <strong>bold</strong>.';
     expect(output).toBe(expected);
   });
 });

packages/utilities/src/utilities/markdownToHtml/markdownToHtml.js

@@ -11,6 +11,7 @@ const _boldRegex = /[_*]{2}(.*?)[_*]{2}/g;
  *
  * @param {string} str String to be checked for html tags
  * @returns {string} String with html tags stripped out
+ * @private
  */
 const _removeHtmlTags = str => str.replace(_htmlTagRegex, '');
 
@@ -19,31 +20,38 @@ const _removeHtmlTags = str => str.replace(_htmlTagRegex, '');
  *
  * @param {string} str String to be checked for double spaces
  * @returns {string} String with html double spaces fixed
+ * @private
  */
 const _fixDoubleSpaces = str => str.replace(_doubleSpaceRegex, ' ');
 
 /**
  * Converts some markdown syntaxes into html
- * It's not a full markdown-to-html converter
- * It currently supports two syntaxes: Bold and Italic
- * Bold: Double asterisk (**) or double underscore (__).
- * Bold examples: **Lorem ipsum** __dolor__
- * Italic: Single asterisk (*) or single underscore (_)
- * Italic examples: _Lorem ipsum_ *dolor*
+ * <p>It's not a full markdown-to-html converter</p>
+ * <p>It currently supports two syntaxes: <strong>Bold</strong> and <em>Italic</em></p>
+ * <ul>
+ * <li>Bold: Double asterisk (**) or double underscore (__).</li>
+ * <li>Bold examples: **Lorem ipsum** __dolor__</li>
+ * <li>Italic: Single asterisk (*) or single underscore (_)</li>
+ * <li>Italic examples: _Lorem ipsum_ *dolor*</li>
+ * </ul>
+ *
  *
  * @param {string} str String to convert to html
- * @param {object} options Object with options for the conversion
- * @param {boolean} options.italic Defines if should convert italic
- * @param {boolean} options.bold Defines if should convert bold
- * @param {boolean} options.useCarbonClasses If true uses carbon typography classes
+ * @param {object} [options={}] Object with options for the conversion
+ * @param {boolean} [options.italic=false] Defines if should convert italic
+ * @param {boolean} [options.bold=false] Defines if should convert bold
+ * @param {boolean} [options.useCarbonClasses=true] Defines if should use carbon typography classes
  * @returns {string} String converted to html
  * @example
  * import { markdownToHtml } from '@carbon/ibmdotcom-utilities';
  *
  * markdownToHtml('Lorem _ipsum_ __dolor__ *sit* **amet**.')
  * // 'Lorem <em>ipsum</em> <strong>dolor</strong> <em>sit</em> <strong>amet</strong>.'
  */
-function markdownToHtml(str, { italic, bold, useCarbonClasses } = {}) {
+function markdownToHtml(
+  str,
+  { italic = false, bold = false, useCarbonClasses = true } = {}
+) {
   const isAllStyles = !italic && !bold;
   let converted = _removeHtmlTags(str);