Task/fp 1499 ui pattern demo - fp 1726 publications list

src/lib/_imports/_misuse.hbs

@@ -0,0 +1,6 @@
+<dl>
+  <dt><strong>Not</strong> Supported</dt>
+  <dd>
+    {{> @partial-block }}
+  </dd>
+</dl>

src/lib/_imports/components/c-page.css

@@ -82,7 +82,11 @@ ul.c-page-list {
 
 /* Pagination: End */
 
-.c-page-end { padding: 4px 12px }
+/* FAQ: Selectors are extra specific to overwrite .c-button--as-link */
+.c-page-end:not(.c-button--as-link),
+.c-page-end.c-button--as-link {
+  padding: 4px 12px;
+}
 
 
 

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

@@ -0,0 +1,73 @@
+/* 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-of-type {
+  border-top: var(--global-border-width--normal) solid var(--global-color-primary--dark);
+}
+
+
+
+/* Elements */
+
+/* Tags */
+
+.c-publication-preview ul.c-tag-list,
+.c-publication-preview ol.c-tag-list {
+  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:first-of-type {
+  margin-block: 0.25em 0.5em;
+
+  color: var(--global-color-accent--dark);
+  font-size: var(--global-font-size--medium);
+}
+
+/* Status */
+
+.c-publication-preview p:last-of-type:not(:first-of-type) {
+  /* 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);
+  margin-block-end: 0; /* overwrite html-elements.css */
+
+  border: var(--global-border-width--normal) solid var(--global-color-primary--dark);
+
+  font-size: var(--global-font-size--small);
+  color: var(--global-color-primary--xx-dark);
+}
+
+/* any random extra paragraph */
+
+.c-publication-preview p:not(:last-of-type, :first-of-type) {
+  margin-block: 0.25em 0.5em;
+}

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: |
+        (is 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 Schrö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

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-tag-list c-tag-list--auto-text">
+      {{#each tags}}
+        <li><a 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>
+    <p>{{status}}</p>
+  </article>
+{{/each}}

src/lib/_imports/components/c-tag-list.css

@@ -0,0 +1,33 @@
+@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 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 */
+ul.c-tag-list,
+ol.c-tag-list {
+  list-style: none;
+
+  padding-inline-start: 0;
+  margin-block: 0;
+}

src/lib/_imports/components/c-tag-list/c-tag-list--nav.hbs

@@ -0,0 +1,23 @@
+<dl>
+  <dt>Link <small>(<code>c-tag</code> class not necessary)</small></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>
+  </dl>
+{{/ @misuse }}

src/lib/_imports/components/c-tag-list/c-tag-list--ol.hbs

@@ -0,0 +1,76 @@
+<h2>Manual Tags <small>(add <code>c-tag</code> class to each tag)</small></h2>
+<dl>
+  <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>Text <small>within Item</small></dt>
+  <dd>
+    <ol class="c-tag-list">
+      {{#each tags}}
+        <li>
+          <span class="c-tag">{{this}}</span>
+        </li>
+      {{/each}}
+    </ol>
+  </dd>
+  <dt>Link <small>within Item</small></dt>
+  <dd>
+    <ol class="c-tag-list">
+      {{#each tags}}
+        <li>
+          <a class="c-tag" href="#">{{this}}</a>
+        </li>
+      {{/each}}
+    </ol>
+  </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>
+    <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}}
+          <li>{{this}}</li>
+        {{/each}}
+      </ol>
+    </dd>
+  </dl>
+{{/ @misuse }}

src/lib/_imports/components/c-tag-list/c-tag-list--ul.hbs

@@ -0,0 +1,76 @@
+<h2>Manual Tags <small>(add <code>c-tag</code> class to each tag)</small></h2>
+<dl>
+  <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>Text <small>within Item</small></dt>
+  <dd>
+    <ul class="c-tag-list">
+      {{#each tags}}
+        <li>
+          <span class="c-tag">{{this}}</span>
+        </li>
+      {{/each}}
+    </ul>
+  </dd>
+  <dt>Link <small>within Item</small></dt>
+  <dd>
+    <ul class="c-tag-list">
+      {{#each tags}}
+        <li>
+          <a class="c-tag" href="#">{{this}}</a>
+        </li>
+      {{/each}}
+    </ul>
+  </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 & No Auto Class</dt>
+    <dd>
+      <ul class="c-tag-list">
+        {{#each tags}}
+          <li>{{this}}</li>
+        {{/each}}
+      </ul>
+    </dd>
+  </dl>
+{{/ @misuse }}