feat: fp-1726 c-tag-list automatic tag styling

Author: wesleyboar

dist/components/bootstrap.pagination.css

@@ -17,7 +17,8 @@
 
 /* Tags */
 
-.c-tag-list/* ← to overwrite via specificity */.c-pub-item__tags {
+.c-publication-preview ul.c-tag-list,
+.c-publication-preview ol.c-tag-list {
   margin-block-end: var(--buffer);
 }
 

dist/components/c-page.css

@@ -5,9 +5,9 @@
 {{#each items}}
   <article class="c-publication-preview">
     {{#if tags}}
-      <ul class="c-pub-item__tags  c-tag-list">
+      <ul class="c-tag-list c-tag-list--auto-text">
       {{#each tags}}
-        <li><a class="c-tag" href="#">{{this}}</a></li>
+        <li><a href="#">{{this}}</a></li>
       {{/each}}
       </ul>
     {{/if}}

dist/components/c-publication-preview.css

@@ -12,14 +12,20 @@
   font-size: var(--global-font-size--small);
 }
 
-/* To let nav lists not require `c-tag` on every child */
+/* To let lists not require `c-tag` on every child */
+ul.c-tag-list--auto-item > li,
+ul.c-tag-list--auto-text > li > *,
+ul.c-tag-list--auto-link > li > a, /* alias for `c-tag-list--auto-text` */
+ol.c-tag-list--auto-item > li,
+ol.c-tag-list--auto-text > li > *,
+ol.c-tag-list--auto-link > li > a, /* alias for `c-tag-list--auto-text` */
 nav.c-tag-list > a {
   @extend .c-tag;
 }
 
 /* To overwrite browser styles */
-ol.c-tag-list,
-ul.c-tag-list {
+ul.c-tag-list,
+ol.c-tag-list {
   list-style: none;
 
   padding-inline-start: 0;

dist/components/c-tag-list.css

@@ -1,5 +1,5 @@
 <dl>
-  <dt>Link</dt>
+  <dt>Link <small>(<code>c-tag</code> class not necessary)</small></dt>
   <dd>
     <nav class="c-tag-list">
       {{#each tags}}
@@ -19,13 +19,5 @@
         {{/each}}
       </nav>
     </dd>
-    <dt>Nav with Explicit Tag Elements</dt>
-    <dd>
-      <nav class="c-tag-list">
-        {{#each tags}}
-          <a class="c-tag" href="#">{{this}}</a>
-        {{/each}}
-      </nav>
-    </dd>
   </dl>
 {{/ @misuse }}

src/lib/_imports/components/c-publication-preview.css

@@ -1,13 +1,14 @@
+<h2>Manual Tags <small>(add <code>c-tag</code> class to each tag)</small></h2>
 <dl>
-  <dt>Default <small>(each list item is a tag)</small></dt>
+  <dt>Item <small>(no child)</small></dt>
   <dd>
     <ol class="c-tag-list">
       {{#each tags}}
         <li class="c-tag">{{this}}</li>
       {{/each}}
     </ol>
   </dd>
-  <dt>Default <small>(each list item child is a tag)</small></dt>
+  <dt>Text <small>within Item</small></dt>
   <dd>
     <ol class="c-tag-list">
       {{#each tags}}
@@ -17,7 +18,7 @@
       {{/each}}
     </ol>
   </dd>
-  <dt>Link</dt>
+  <dt>Link <small>within Item</small></dt>
   <dd>
     <ol class="c-tag-list">
       {{#each tags}}
@@ -29,9 +30,41 @@
   </dd>
 </dl>
 
-{{#> @misuse }}
+<h2>Automatic Tags <small>(add matching <code>auto</code> class to list)</small></h2>
 <dl>
-    <dt>No Explicit Tag Elements</dt>
+  <dt>Item <small>(no child)</small></dt>
+  <dd>
+    <ol class="c-tag-list c-tag-list--auto-item">
+      {{#each tags}}
+        <li>{{this}}</li>
+      {{/each}}
+    </ol>
+  </dd>
+  <dt>Text <small>within Item</small></dt>
+  <dd>
+    <ol class="c-tag-list c-tag-list--auto-text">
+      {{#each tags}}
+        <li>
+          <span>{{this}}</span>
+        </li>
+      {{/each}}
+    </ol>
+  </dd>
+  <dt>Link <small>within Item</small></dt>
+  <dd>
+    <ol class="c-tag-list c-tag-list--auto-link">
+      {{#each tags}}
+        <li>
+          <a class="c-tag" href="#">{{this}}</a>
+        </li>
+      {{/each}}
+    </ol>
+  </dd>
+</dl>
+
+{{#> @misuse }}
+  <dl>
+    <dt>No Explicit Tag Elements & No Auto Class</dt>
     <dd>
       <ol class="c-tag-list">
         {{#each tags}}

src/lib/_imports/components/c-publication-preview/c-publication-preview.hbs

@@ -1,13 +1,14 @@
+<h2>Manual Tags <small>(add <code>c-tag</code> class to each tag)</small></h2>
 <dl>
-  <dt>Default <small>(each list item is a tag)</small></dt>
+  <dt>Item <small>(no child)</small></dt>
   <dd>
     <ul class="c-tag-list">
       {{#each tags}}
         <li class="c-tag">{{this}}</li>
       {{/each}}
     </ul>
   </dd>
-  <dt>Default <small>(each list item child is a tag)</small></dt>
+  <dt>Text <small>within Item</small></dt>
   <dd>
     <ul class="c-tag-list">
       {{#each tags}}
@@ -17,7 +18,7 @@
       {{/each}}
     </ul>
   </dd>
-  <dt>Link</dt>
+  <dt>Link <small>within Item</small></dt>
   <dd>
     <ul class="c-tag-list">
       {{#each tags}}
@@ -29,9 +30,41 @@
   </dd>
 </dl>
 
+<h2>Automatic Tags <small>(add matching <code>auto</code> class to list)</small></h2>
+<dl>
+  <dt>Item <small>(no child)</small></dt>
+  <dd>
+    <ul class="c-tag-list c-tag-list--auto-item">
+      {{#each tags}}
+        <li>{{this}}</li>
+      {{/each}}
+    </ul>
+  </dd>
+  <dt>Text <small>within Item</small></dt>
+  <dd>
+    <ul class="c-tag-list c-tag-list--auto-text">
+      {{#each tags}}
+        <li>
+          <span>{{this}}</span>
+        </li>
+      {{/each}}
+    </ul>
+  </dd>
+  <dt>Link <small>within Item</small></dt>
+  <dd>
+    <ul class="c-tag-list c-tag-list--auto-link">
+      {{#each tags}}
+        <li>
+          <a class="c-tag" href="#">{{this}}</a>
+        </li>
+      {{/each}}
+    </ul>
+  </dd>
+</dl>
+
 {{#> @misuse }}
   <dl>
-    <dt>No Explicit Tag Elements</dt>
+    <dt>No Explicit Tag Elements & No Auto Class</dt>
     <dd>
       <ul class="c-tag-list">
         {{#each tags}}