Update Storybook utils to support self-closing tag (#411)

* Pull out the utils updates for self-closing tag support

* moving the duplicated selfClosing variables to a constant at the top of the file

Author: castastrophe

.storybook/utils.js

@@ -7,6 +7,9 @@ const loremIpsum = require("lorem-ipsum");
 // https://www.npmjs.com/package/clean-html
 const cleaner = require("clean-html");
 
+// Most common self-closing tags = br, hr, img, input, link
+const selfClosing = ["br", "hr", "img", "input", "link"];
+
 // Escape HTML to display markup as content
 export function escapeHTML(html) {
   const div = document.createElement("div");
@@ -74,20 +77,17 @@ export function customTag(obj) {
   // If a tag is defined, or it has slots or attributes to apply
   // render an open and close tag
   if (obj.tag || obj.slot || obj.attributes) {
-    start += "<";
-    end += "</";
     // If a tag is defined, use that, else use a div
     if (obj.tag) {
-      start += obj.tag;
-      end += obj.tag;
+      start += `<${obj.tag}`;
+      end   += !selfClosing.includes(obj.tag) ? `</${obj.tag}>` : "";
     } else {
-      start += "div";
-      end += "div";
+      start += "<div";
+      end += "</div>";
     }
     start += obj.slot ? ` slot="${obj.slot}"` : "";
     start += obj.attributes ? listProperties(obj.attributes || {}) : "";
-    start += ">";
-    end += ">";
+    start += !selfClosing.includes(obj.tag) ? ">" : "/>";
   }
   return `${start}${obj.content}${end}`;
 }
@@ -108,9 +108,9 @@ const parseMarkup = string => {
     // If results remain in the array, get the attributes
     if (result.length > 1 && typeof result[2] === "string") {
       // Break the attributes apart using the spaces
-      let attr = result[2].trim().split(" ");
+      let attr = result[2].trim().match(/[\w|-]+="[^"]+"/g);
       // If any attributes exist, break them down further
-      if (attr.length > 0) {
+      if (attr !== null) {
         attr.forEach(set => {
           // Break the attributes apart using the equal sign
           let items = set.trim().split("=");
@@ -150,9 +150,10 @@ const renderSlots = (slots = []) =>
         typeof slot.attributes !== "undefined" &&
         Object.keys(slot.attributes).length > 0;
       if (!has_tag && (has_slot || has_attr)) {
-        Object.assign(slot, parseMarkup(slot.content));
+        let parsed = parseMarkup(slot.content);
+        Object.assign(slot, parsed);
       }
-      return slot.content
+      return slot.content || slot.tag && selfClosing.includes(slot.tag)
         ? customTag({
             tag: slot.tag,
             slot: slot.slot,