@vettvangur/design-system 2.0.10 → 2.0.12

package/dist/index.js

@@ -2087,7 +2087,7 @@ function renderButtonsCshtml(buttons, projectName) {
 	<div class="ds__left">
 		<partial name="${projectName}/DesignSystem/DSNavigation" />
 	</div>
-  <div class="ds__right"
+  <div class="ds__right">
         <vv-headline
             identifier="ds-title"
             modifier="headline-2"
@@ -2138,7 +2138,7 @@ function renderColorsCshtml(colors, projectName) {
                 </div>
             </div>`;
     }).join('\n');
-    return `        <section class="ds-color-group ds-spacing">
+    return `        <section class="ds-color-group">
             <vv-headline text="${categoryTitle}" size="2" modifier="headline-2" />
             <div class="ds-color-grid">
 ${items}
@@ -2179,8 +2179,8 @@ async function generateColors(colors, config, outpath, projectName) {
   message('finished generating colors');
 }
 
-/* ---------------------------------------------
- * helpers
+/* ---------------------------------------------
+ * helpers
  * ------------------------------------------- */
 
 function titleCase(str) {
@@ -2197,8 +2197,8 @@ function isHeadline(id) {
   return id.startsWith('headline-');
 }
 
-/* ---------------------------------------------
- * normalize typography into semantic entries
+/* ---------------------------------------------
+ * normalize typography into semantic entries
  * ------------------------------------------- */
 
 function buildEntries({
@@ -2228,18 +2228,22 @@ function buildEntries({
   return map;
 }
 
-/* ---------------------------------------------
- * category resolution
+/* ---------------------------------------------
+ * category resolution
  * ------------------------------------------- */
 
 function resolveCategory(id) {
-  if (id.startsWith('headline')) return 'Headlines';
-  if (id.startsWith('body') || id === 'blockquote') return 'Bodies';
+  if (id.startsWith('headline')) {
+    return 'Headlines';
+  }
+  if (id.startsWith('body') || id === 'blockquote') {
+    return 'Bodies';
+  }
   return null;
 }
 
-/* ---------------------------------------------
- * preview render
+/* ---------------------------------------------
+ * preview render
  * ------------------------------------------- */
 
 function renderPreview(id, title) {
@@ -2258,8 +2262,8 @@ function renderPreview(id, title) {
             </p>`;
 }
 
-/* ---------------------------------------------
- * entry render
+/* ---------------------------------------------
+ * entry render
  * ------------------------------------------- */
 
 function renderEntry(id, entry) {
@@ -2296,8 +2300,8 @@ ${renderPreview(id, title)}
         </div>`;
 }
 
-/* ---------------------------------------------
- * category render
+/* ---------------------------------------------
+ * category render
  * ------------------------------------------- */
 
 function renderCategory(title, entries) {
@@ -2311,8 +2315,8 @@ ${entries.join('\n')}
     </section>`;
 }
 
-/* ---------------------------------------------
- * main render
+/* ---------------------------------------------
+ * main render
  * ------------------------------------------- */
 
 function renderTypographyCshtml(data, projectName) {
@@ -2320,7 +2324,9 @@ function renderTypographyCshtml(data, projectName) {
   const categories = {};
   for (const [id, entry] of Object.entries(entries)) {
     const cat = resolveCategory(id);
-    if (!cat || !entry.size || !entry.lineHeight || !entry.family) continue;
+    if (!cat || !entry.size || !entry.lineHeight || !entry.family) {
+      continue;
+    }
     categories[cat] ??= [];
     categories[cat].push(renderEntry(id, entry));
   }
@@ -2350,8 +2356,8 @@ ${sections}
 </section>`;
 }
 
-/* ---------------------------------------------
- * public API
+/* ---------------------------------------------
+ * public API
  * ------------------------------------------- */
 
 async function generateTypography(typography, config, outpath, projectName) {
@@ -2431,7 +2437,7 @@ function renderRichtextCshtml(projectName) {
     <div class="ds__left">
       <partial name="${projectName}/DesignSystem/DSNavigation" />
     </div>
-    <div class="ds__right"
+    <div class="ds__right">
         <vv-headline
             identifier="ds__headline"
             modifier="headline-2"
@@ -2511,13 +2517,26 @@ function escapeAttr(v) {
 function renderAttrs(attrs) {
   return Object.entries(attrs || {}).filter(([, v]) => v != null).map(([k, v]) => `            ${k}="${escapeAttr(v)}"`).join('\n');
 }
+const voidHtmlTags = new Set(['area', 'base', 'br', 'col', 'embed', 'hr', 'img', 'input', 'link', 'meta', 'param', 'source', 'track', 'wbr']);
 function renderVoidComponent({
   tag,
   attrs
 }) {
-  return `          <${tag}
+  if (voidHtmlTags.has(tag)) {
+    return `          <${tag}
 ${renderAttrs(attrs)}
           />`;
+  }
+
+  // Our Razor TagHelpers are self-closing.
+  if (tag.startsWith('vv-')) {
+    return `          <${tag}
+${renderAttrs(attrs)}
+           />`;
+  }
+  return `          <${tag}
+${renderAttrs(attrs)}
+           ></${tag}>`;
 }
 function renderSection({
   title,

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@vettvangur/design-system",
-  "version": "2.0.10",
+  "version": "2.0.12",
   "description": "",
   "access": "public",
   "type": "module",