@vettvangur/design-system 2.0.9 → 2.0.11

package/dist/index.js

@@ -2062,37 +2062,38 @@ 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 text="${title}" size="2" modifier="headline-2"></vv-headline>
                 <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');
+
+  // @{
+  //   Layout = "Master.cshtml";
+  // }
   return `@* AUTO-GENERATED - DO NOT EDIT BY HAND *@
-@{
-    Layout = "Master.cshtml";
-}
 <section class="ds-buttons">
 	<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"
             size="2"
             text="Buttons"
-        />
+        ></vv-headline>
 
         <div class="ds-section-grid">
 
@@ -2137,17 +2138,18 @@ function renderColorsCshtml(colors, projectName) {
                 </div>
             </div>`;
     }).join('\n');
-    return `        <section class="ds-color-group ds-spacing">
-            <vv-headline text="${categoryTitle}" size="2" modifier="headline-2" />
+    return `        <section class="ds-color-group">
+            <vv-headline text="${categoryTitle}" size="2" modifier="headline-2"></vv-headline>
             <div class="ds-color-grid">
 ${items}
             </div>
         </section>`;
   }).join('\n\n');
+
+  // @{
+  //   Layout = "Master.cshtml";
+  // }
   return `@* AUTO-GENERATED - DO NOT EDIT BY HAND *@
-@{
-    Layout = "Master.cshtml";
-}
 <section class="ds-colors">
 	<div class="ds__left">
 		<partial name="${projectName}/DesignSystem/DSNavigation" />
@@ -2158,7 +2160,7 @@ ${items}
         modifier="headline-2"
         size="2"
         text="Colors"
-    />
+    ></vv-headline>
 
 ${sections}
 
@@ -2177,8 +2179,8 @@ async function generateColors(colors, config, outpath, projectName) {
   message('finished generating colors');
 }
 
-/* ---------------------------------------------
- * helpers
+/* ---------------------------------------------
+ * helpers
  * ------------------------------------------- */
 
 function titleCase(str) {
@@ -2195,8 +2197,8 @@ function isHeadline(id) {
   return id.startsWith('headline-');
 }
 
-/* ---------------------------------------------
- * normalize typography into semantic entries
+/* ---------------------------------------------
+ * normalize typography into semantic entries
  * ------------------------------------------- */
 
 function buildEntries({
@@ -2226,8 +2228,8 @@ function buildEntries({
   return map;
 }
 
-/* ---------------------------------------------
- * category resolution
+/* ---------------------------------------------
+ * category resolution
  * ------------------------------------------- */
 
 function resolveCategory(id) {
@@ -2236,8 +2238,8 @@ function resolveCategory(id) {
   return null;
 }
 
-/* ---------------------------------------------
- * preview render
+/* ---------------------------------------------
+ * preview render
  * ------------------------------------------- */
 
 function renderPreview(id, title) {
@@ -2248,7 +2250,7 @@ function renderPreview(id, title) {
                 text="${title}"
                 size="2"
                 modifier="${id}"
-            />`;
+            ></vv-headline>`;
   }
   return `
             <p class="${id}">
@@ -2256,8 +2258,8 @@ function renderPreview(id, title) {
             </p>`;
 }
 
-/* ---------------------------------------------
- * entry render
+/* ---------------------------------------------
+ * entry render
  * ------------------------------------------- */
 
 function renderEntry(id, entry) {
@@ -2294,14 +2296,14 @@ ${renderPreview(id, title)}
         </div>`;
 }
 
-/* ---------------------------------------------
- * category render
+/* ---------------------------------------------
+ * category render
  * ------------------------------------------- */
 
 function renderCategory(title, entries) {
   return `
     <section class="ds-type-category">
-        <vv-headline text="${title}" size="3" modifier="headline-2" />
+        <vv-headline text="${title}" size="3" modifier="headline-2"></vv-headline>
 
         <div class="ds-type-grid">
 ${entries.join('\n')}
@@ -2309,8 +2311,8 @@ ${entries.join('\n')}
     </section>`;
 }
 
-/* ---------------------------------------------
- * main render
+/* ---------------------------------------------
+ * main render
  * ------------------------------------------- */
 
 function renderTypographyCshtml(data, projectName) {
@@ -2323,10 +2325,11 @@ function renderTypographyCshtml(data, projectName) {
     categories[cat].push(renderEntry(id, entry));
   }
   const sections = Object.entries(categories).map(([title, items]) => renderCategory(title, items)).join('\n');
+
+  // @{
+  //   Layout = "Master.cshtml";
+  // }
   return `@* AUTO-GENERATED - DO NOT EDIT BY HAND *@
-@{
-    Layout = "Master.cshtml";
-}
 
 <section class="ds-typography">
     <div class="ds__left">
@@ -2339,7 +2342,7 @@ function renderTypographyCshtml(data, projectName) {
             modifier="headline-1"
             size="2"
             text="Typography"
-        />
+        ></vv-headline>
 
 ${sections}
 
@@ -2347,8 +2350,8 @@ ${sections}
 </section>`;
 }
 
-/* ---------------------------------------------
- * public API
+/* ---------------------------------------------
+ * public API
  * ------------------------------------------- */
 
 async function generateTypography(typography, config, outpath, projectName) {
@@ -2361,10 +2364,10 @@ async function generateTypography(typography, config, outpath, projectName) {
 }
 
 function renderTablesCshtml(projectName) {
+  // @{
+  //   Layout = "Master.cshtml";
+  // }
   return `@* AUTO-GENERATED - DO NOT EDIT BY HAND *@
-@{
-    Layout = "Master.cshtml";
-}
 
 <section class="ds-tables">
     <div class="ds__left">
@@ -2377,7 +2380,7 @@ function renderTablesCshtml(projectName) {
         modifier="headline-2"
         size="2"
         text="Tables"
-    />
+    ></vv-headline>
 
     <div class="table">
         <table class="table__element">
@@ -2419,21 +2422,21 @@ async function generateTables(config, outpath, projectName) {
 }
 
 function renderRichtextCshtml(projectName) {
+  // @{
+  //   Layout = "Master.cshtml";
+  // }
   return `@* AUTO-GENERATED - DO NOT EDIT BY HAND *@
-@{
-    Layout = "Master.cshtml";
-}
 
 <section class="ds-richtext">
     <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"
             text="Richtext"
-        />
+        ></vv-headline>
 
         <div class="richtext">
             <h1>h1</h1>
@@ -2508,13 +2511,21 @@ 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)}
           />`;
+  }
+
+  // Razor TagHelpers generally must not be self-closing.
+  return `          <${tag}
+${renderAttrs(attrs)}
+          ></${tag}>`;
 }
 function renderSection({
   title,
@@ -2526,7 +2537,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');
@@ -2802,10 +2813,11 @@ function renderInputsCshtml(projectName) {
     sections
   } = buildSpec();
   const renderedSections = sections.map(renderSection).join('\n\n');
+
+  // @{
+  //   Layout = "Master.cshtml";
+  // }
   return `@* AUTO-GENERATED - DO NOT EDIT BY HAND *@
-@{
-    Layout = "Master.cshtml";
-}
 
 ${razorPrelude}
 
@@ -2819,7 +2831,7 @@ ${razorPrelude}
       identifier="ds__headline"
       modifier="headline-2"
       text="Inputs"
-    />
+    ></vv-headline>
 
     <div class="ds-section-grid">
 ${renderedSections}
@@ -2885,14 +2897,20 @@ function renderDesignSystemViewCshtml(projectName) {
   return `@* AUTO-GENERATED - DO NOT EDIT BY HAND *@
 @{
     Layout = "Master.cshtml";
+    // This template will used later, right now users are redirected to /design-system/colors
 }
 <section class="ds">
 	<div class="ds__left">
 		<partial name="${projectName}/DesignSystem/DSNavigation" />
 	</div>
-	<div class="ds__right">
-		<partial name="${projectName}/DesignSystem/DSColors" />
-	</div>
+  <div class="ds__right">
+    <partial name="${projectName}/DesignSystem/DSColors" />
+    <partial name="${projectName}/DesignSystem/DSTypography" />
+    <partial name="${projectName}/DesignSystem/DSButtons" />
+    <partial name="${projectName}/DesignSystem/DSInputs" />
+    <partial name="${projectName}/DesignSystem/DSRichtext" />
+    <partial name="${projectName}/DesignSystem/DSTables" />
+  </div>
 </section>
 `;
 }

package/package.json

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