@vettvangur/design-system 2.0.11 → 2.0.12

package/dist/index.js

@@ -2062,20 +2062,20 @@ function renderButtonsCshtml(buttons, projectName) {
     const key = b.key;
     const title = titleizeButton(key);
     return `            <div class="ds-button-wrap">
-                <vv-headline text="${title}" size="2" modifier="headline-2"></vv-headline>
+                <vv-headline text="${title}" size="2" modifier="headline-2" />
                 <vv-button
                     identifier="ds__button"
                     modifier="${key}"
                     type="@ButtonType.Button"
                     text="${title}"
-                ></vv-button>
+                />
                 <vv-button
                     identifier="ds__button"
                     modifier="${key}"
                     type="@ButtonType.Button"
                     text="${title} disabled"
                     disabled="true"
-                ></vv-button>
+                />
             </div>`;
   }).join('\n\n');
 
@@ -2093,7 +2093,7 @@ function renderButtonsCshtml(buttons, projectName) {
             modifier="headline-2"
             size="2"
             text="Buttons"
-        ></vv-headline>
+        />
 
         <div class="ds-section-grid">
 
@@ -2139,7 +2139,7 @@ function renderColorsCshtml(colors, projectName) {
             </div>`;
     }).join('\n');
     return `        <section class="ds-color-group">
-            <vv-headline text="${categoryTitle}" size="2" modifier="headline-2"></vv-headline>
+            <vv-headline text="${categoryTitle}" size="2" modifier="headline-2" />
             <div class="ds-color-grid">
 ${items}
             </div>
@@ -2160,7 +2160,7 @@ ${items}
         modifier="headline-2"
         size="2"
         text="Colors"
-    ></vv-headline>
+    />
 
 ${sections}
 
@@ -2233,8 +2233,12 @@ function buildEntries({
  * ------------------------------------------- */
 
 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;
 }
 
@@ -2250,7 +2254,7 @@ function renderPreview(id, title) {
                 text="${title}"
                 size="2"
                 modifier="${id}"
-            ></vv-headline>`;
+            />`;
   }
   return `
             <p class="${id}">
@@ -2303,7 +2307,7 @@ ${renderPreview(id, title)}
 function renderCategory(title, entries) {
   return `
     <section class="ds-type-category">
-        <vv-headline text="${title}" size="3" modifier="headline-2"></vv-headline>
+        <vv-headline text="${title}" size="3" modifier="headline-2" />
 
         <div class="ds-type-grid">
 ${entries.join('\n')}
@@ -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));
   }
@@ -2342,7 +2348,7 @@ function renderTypographyCshtml(data, projectName) {
             modifier="headline-1"
             size="2"
             text="Typography"
-        ></vv-headline>
+        />
 
 ${sections}
 
@@ -2380,7 +2386,7 @@ function renderTablesCshtml(projectName) {
         modifier="headline-2"
         size="2"
         text="Tables"
-    ></vv-headline>
+    />
 
     <div class="table">
         <table class="table__element">
@@ -2436,7 +2442,7 @@ function renderRichtextCshtml(projectName) {
             identifier="ds__headline"
             modifier="headline-2"
             text="Richtext"
-        ></vv-headline>
+        />
 
         <div class="richtext">
             <h1>h1</h1>
@@ -2522,10 +2528,15 @@ ${renderAttrs(attrs)}
           />`;
   }
 
-  // Razor TagHelpers generally must not be self-closing.
+  // Our Razor TagHelpers are self-closing.
+  if (tag.startsWith('vv-')) {
+    return `          <${tag}
+${renderAttrs(attrs)}
+           />`;
+  }
   return `          <${tag}
 ${renderAttrs(attrs)}
-          ></${tag}>`;
+           ></${tag}>`;
 }
 function renderSection({
   title,
@@ -2537,7 +2548,7 @@ function renderSection({
           identifier="ds__headline"
           modifier="headline-2"
           text="${escapeAttr(title)}"
-        ></vv-headline>
+        />
 `;
   if (layout === 'stack') {
     const rows = (items || []).map(it => `        <div class="ds-inputs__row">\n${renderVoidComponent(it)}\n        </div>`).join('\n\n');
@@ -2831,7 +2842,7 @@ ${razorPrelude}
       identifier="ds__headline"
       modifier="headline-2"
       text="Inputs"
-    ></vv-headline>
+    />
 
     <div class="ds-section-grid">
 ${renderedSections}

package/package.json

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