TACC · wesleyboar · Jul 20, 2022 · Jul 20, 2022 · Jul 20, 2022 · Jul 20, 2022
diff --git a/libs/core-styles/src/lib/_imports/_misuse.hbs b/libs/core-styles/src/lib/_imports/_misuse.hbs
@@ -0,0 +1,6 @@
+<dl>
+  <dt>How <strong>Not</strong> to Use</dt>
+  <dd>
+    {{> @partial-block }}
+  </dd>
+</dl>
diff --git a/libs/core-styles/src/lib/_imports/components/c-publication-preview.css b/libs/core-styles/src/lib/_imports/components/c-publication-preview.css
@@ -0,0 +1,64 @@
+/* Base */
+
+.c-publication-preview {
+  --buffer: 15px;
+
+  padding-block: var(--buffer);
+
+  border-bottom: var(--global-border-width--normal) solid var(--global-color-primary--dark);
+}
+.c-publication-preview:first-child {
+  border-top: var(--global-border-width--normal) solid var(--global-color-primary--dark);
+}
+
+
+
+/* Elements */
+
+/* Tags */
+
+.c-tag-list/* ← to overwrite via specificity */.c-pub-item__tags {
+  margin-block-end: var(--buffer);
+}
+
+/* Title */
+
+.c-publication-preview h3 {
+  margin-block: 0;
+
+  font-size: var(--global-font-size--large);
+}
+
+.c-publication-preview h3,
+.c-publication-preview h3 a {
+  color: var(--global-color-primary--xx-dark);
+}
+.o-section--style-dark .c-publication-preview h3,
+.o-section--style-dark .c-publication-preview h3 a {
+  color: var(--global-color-primary--xx-light);
+}
+
+/* Citation */
+
+.c-publication-preview p {
+  margin-block: 0.25em 0.5em;
+
+  color: var(--global-color-accent--dark);
+  font-size: var(--global-font-size--medium);
+}
+
+/* Status */
+
+.c-pub-item__status {
+  /* To collapse sibling margin, do not use `inline-block` */
+  display: block;
+  width: fit-content;
+
+  padding-inline: var(--buffer);
+  padding-block: 0.25em;
+  margin-block-start: var(--buffer);
+
+  border: var(--global-border-width--normal) solid var(--global-color-accent--dark);
+
+  font-size: var(--global-font-size--small);
+}
diff --git a/...styles/src/lib/_imports/components/c-publication-preview/c-publication-preview.config.yml b/...styles/src/lib/_imports/components/c-publication-preview/c-publication-preview.config.yml
@@ -0,0 +1,29 @@
+notes: A publication within a list of publications.
+context:
+  items:
+    - tags:
+        - test-tag
+        - test-tag-very-long
+        - test-tag-long
+      url: '#'
+      title: |
+        (Has Link) Migrating the TeraGrid User Portal and Website to Liferay
+      citation: |
+        M. Dahan, R. Dooley, M. Hanlon, et al. Second International Conference on Parallel, Distributed, Grid and Cloud Computing. Ajaccio, Corsica, France. 2011.
+      status: Good Status
+    - tags:
+        - test-tag
+        - test-tag-long
+      url: '#'
+      title: |
+        (is Link) Recent Advances in Computational Methods for the Solution of the Time-Dependent Schrödinger Equation for the Interaction of Short, Intense Radiation with One and Two-Electron Systems: Application to He and H+2
+      citation: |
+        B. Schneider, J. Feist, S. Nagele, et al., Springer Science+Business Media, LLC, 233 Spring Street, NY 10013.Springer. 2011.
+      status: Bad Status
+    - tags:
+        - test-tag-very-long
+      title: |
+        (No Link) Migrating the TeraGrid User Portal and [...]
+      citation: |
+        M. Dahan, R. Dooley, M. Hanlon, et al. Second International Conference on Parallel, Distributed, Grid and Cloud Computing. Ajaccio, Corsica, France. 2011.
+      status: Ugly Status
diff --git a/libs/core-styles/src/lib/_imports/components/c-publication-preview/c-publication-preview.hbs b/libs/core-styles/src/lib/_imports/components/c-publication-preview/c-publication-preview.hbs
@@ -0,0 +1,24 @@
+<style>
+  @import url('{{ path "/components/c-tag-list.css" }}');
+</style>
+
+{{#each items}}
+  <article class="c-publication-preview">
+    {{#if tags}}
+      <ul class="c-pub-item__tags  c-tag-list">
+      {{#each tags}}
+        <li><a class="c-tag" href="#">{{this}}</a></li>
+      {{/each}}
+      </ul>
+    {{/if}}
+    <h3>
+      {{#if url}}
+        <a href="{{url}}">{{title}}</a>
+      {{else}}
+        {{title}}
+      {{/if}}
+    </h3>
+    <p><strong>Authors:</strong> {{citation}}</p>
+    <span class="c-pub-item__status">{{status}}</span>
+  </article>
+{{/each}}
diff --git a/libs/core-styles/src/lib/_imports/components/c-tag-list.css b/libs/core-styles/src/lib/_imports/components/c-tag-list.css
@@ -0,0 +1,27 @@
+@import url("./c-tag.css");
+
+/* Base */
+
+.c-tag-list {
+  display: flex;
+  flex-wrap: wrap;
+  flex-direction: row;
+  gap: 0.75em;
+  align-items: center;
+
+  font-size: var(--global-font-size--small);
+}
+
+/* To let nav lists not require `c-tag` on every child */
+nav.c-tag-list > a {
+  @extend .c-tag;
+}
+
+/* To overwrite browser styles */
+ol.c-tag-list,
+ul.c-tag-list {
+  list-style: none;
+
+  padding-inline-start: 0;
+  margin-block: 0;
+}
diff --git a/libs/core-styles/src/lib/_imports/components/c-tag-list/c-tag-list--nav.hbs b/libs/core-styles/src/lib/_imports/components/c-tag-list/c-tag-list--nav.hbs
@@ -0,0 +1,31 @@
+<dl>
+  <dt>Link</dt>
+  <dd>
+    <nav class="c-tag-list">
+      {{#each tags}}
+        <a href="#">{{this}}</a>
+      {{/each}}
+    </nav>
+  </dd>
+</dl>
+
+{{#> @misuse }}
+  <dl>
+    <dt>Nav without Links</dt>
+    <dd>
+      <nav class="c-tag-list">
+        {{#each tags}}
+          <span>{{this}}</span>
+        {{/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 }}
diff --git a/libs/core-styles/src/lib/_imports/components/c-tag-list/c-tag-list--ol.hbs b/libs/core-styles/src/lib/_imports/components/c-tag-list/c-tag-list--ol.hbs
@@ -0,0 +1,43 @@
+<dl>
+  <dt>Default <small>(each list item is a tag)</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>
+  <dd>
+    <ol class="c-tag-list">
+      {{#each tags}}
+        <li>
+          <span class="c-tag">{{this}}</span>
+        </li>
+      {{/each}}
+    </ol>
+  </dd>
+  <dt>Link</dt>
+  <dd>
+    <ol class="c-tag-list">
+      {{#each tags}}
+        <li>
+          <a class="c-tag" href="#">{{this}}</a>
+        </li>
+      {{/each}}
+    </ol>
+  </dd>
+</dl>
+
+{{#> @misuse }}
+<dl>
+    <dt>No Explicit Tag Elements</dt>
+    <dd>
+      <ol class="c-tag-list">
+        {{#each tags}}
+          <li>{{this}}</li>
+        {{/each}}
+      </ol>
+    </dd>
+  </dl>
+{{/ @misuse }}
diff --git a/libs/core-styles/src/lib/_imports/components/c-tag-list/c-tag-list--ul.hbs b/libs/core-styles/src/lib/_imports/components/c-tag-list/c-tag-list--ul.hbs
@@ -0,0 +1,43 @@
+<dl>
+  <dt>Default <small>(each list item is a tag)</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>
+  <dd>
+    <ul class="c-tag-list">
+      {{#each tags}}
+        <li>
+          <span class="c-tag">{{this}}</span>
+        </li>
+      {{/each}}
+    </ul>
+  </dd>
+  <dt>Link</dt>
+  <dd>
+    <ul class="c-tag-list">
+      {{#each tags}}
+        <li>
+          <a class="c-tag" href="#">{{this}}</a>
+        </li>
+      {{/each}}
+    </ul>
+  </dd>
+</dl>
+
+{{#> @misuse }}
+  <dl>
+    <dt>No Explicit Tag Elements</dt>
+    <dd>
+      <ul class="c-tag-list">
+        {{#each tags}}
+          <li>{{this}}</li>
+        {{/each}}
+      </ul>
+    </dd>
+  </dl>
+{{/ @misuse }}
diff --git a/libs/core-styles/src/lib/_imports/components/c-tag-list/c-tag-list.config.yml b/libs/core-styles/src/lib/_imports/components/c-tag-list/c-tag-list.config.yml
@@ -0,0 +1,34 @@
+context:
+  tags:
+    - test-tag
+    - test-tag-long
+    - test-tag-very-long
+variants:
+  - name: default
+    hidden: true
+    notes: A placeholder to render the component at all
+  - name: nav
+    label: '&lt;nav&gt;'
+    notes: |
+      A list of tags for navigation. The `<a>` does __not__ need `.c-tag` class.
+
+      Use Cases:
+      - manage layout via parent (e.g. using flex or grid)
+      - write fewer classnames in manual markup
+      - semantic use of `<nav>`
+  - name: ul
+    label: 'Unordered &lt;ul&gt;'
+    notes: |
+      An _unordered_ list of tags. Each tag must have the `.c-tag` class.
+
+      Use Cases:
+      - manage layout via parent (e.g. using flex or grid)
+      - semantic use of `<ul>`
+  - name: ol
+    label: 'Ordered &lt;ol&gt;'
+    notes: |
+      An _ordered_ list of tags. Each tag must have the `.c-tag` class.
+
+      Use Cases:
+      - manage layout via parent (e.g. using flex or grid)
+      - semantic use of `<ol>`