diff --git a/src/lib/_imports/_misuse.hbs b/src/lib/_imports/_misuse.hbs new file mode 100644 index 000000000..4db9bf1d9 --- /dev/null +++ b/src/lib/_imports/_misuse.hbs @@ -0,0 +1,6 @@ +
+
Not Supported
+
+ {{> @partial-block }} +
+
diff --git a/src/lib/_imports/components/c-page.css b/src/lib/_imports/components/c-page.css index e73704629..1fce6e142 100644 --- a/src/lib/_imports/components/c-page.css +++ b/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; +} diff --git a/src/lib/_imports/components/c-publication-preview.css b/src/lib/_imports/components/c-publication-preview.css new file mode 100644 index 000000000..491ef10b6 --- /dev/null +++ b/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; +} diff --git a/src/lib/_imports/components/c-publication-preview/c-publication-preview.config.yml b/src/lib/_imports/components/c-publication-preview/c-publication-preview.config.yml new file mode 100644 index 000000000..29861abdc --- /dev/null +++ b/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 diff --git a/src/lib/_imports/components/c-publication-preview/c-publication-preview.hbs b/src/lib/_imports/components/c-publication-preview/c-publication-preview.hbs new file mode 100644 index 000000000..07b76fec5 --- /dev/null +++ b/src/lib/_imports/components/c-publication-preview/c-publication-preview.hbs @@ -0,0 +1,24 @@ + + +{{#each items}} +
+ {{#if tags}} + + {{/if}} +

+ {{#if url}} + {{title}} + {{else}} + {{title}} + {{/if}} +

+

Authors: {{citation}}

+

{{status}}

+
+{{/each}} diff --git a/src/lib/_imports/components/c-tag-list.css b/src/lib/_imports/components/c-tag-list.css new file mode 100644 index 000000000..82b694292 --- /dev/null +++ b/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; +} diff --git a/src/lib/_imports/components/c-tag-list/c-tag-list--nav.hbs b/src/lib/_imports/components/c-tag-list/c-tag-list--nav.hbs new file mode 100644 index 000000000..a5d234212 --- /dev/null +++ b/src/lib/_imports/components/c-tag-list/c-tag-list--nav.hbs @@ -0,0 +1,23 @@ +
+
Link (c-tag class not necessary)
+
+ +
+
+ +{{#> @misuse }} +
+
Nav without Links
+
+ +
+
+{{/ @misuse }} diff --git a/src/lib/_imports/components/c-tag-list/c-tag-list--ol.hbs b/src/lib/_imports/components/c-tag-list/c-tag-list--ol.hbs new file mode 100644 index 000000000..2fc536c5e --- /dev/null +++ b/src/lib/_imports/components/c-tag-list/c-tag-list--ol.hbs @@ -0,0 +1,76 @@ +

Manual Tags (add c-tag class to each tag)

+
+
Item (no child)
+
+
    + {{#each tags}} +
  1. {{this}}
    2. + {{/each}} +
+
+
Text within Item
+
+
    + {{#each tags}} +
  1. + {{this}} +
    2. + {{/each}} +
+
+
Link within Item
+
+
    + {{#each tags}} +
  1. + {{this}} +
    2. + {{/each}} +
+
+
+ +

Automatic Tags (add matching auto class to list)

+
+
Item (no child)
+
+
    + {{#each tags}} +
  1. {{this}}
    2. + {{/each}} +
+
+
Text within Item
+
+
    + {{#each tags}} +
  1. + {{this}} +
    2. + {{/each}} +
+
+
Link within Item
+
+
    + {{#each tags}} +
  1. + {{this}} +
    2. + {{/each}} +
+
+
+ +{{#> @misuse }} +
+
No Explicit Tag Elements & No Auto Class
+
+
    + {{#each tags}} +
  1. {{this}}
    2. + {{/each}} +
+
+
+{{/ @misuse }} diff --git a/src/lib/_imports/components/c-tag-list/c-tag-list--ul.hbs b/src/lib/_imports/components/c-tag-list/c-tag-list--ul.hbs new file mode 100644 index 000000000..7392bb738 --- /dev/null +++ b/src/lib/_imports/components/c-tag-list/c-tag-list--ul.hbs @@ -0,0 +1,76 @@ +

Manual Tags (add c-tag class to each tag)

+
+
Item (no child)
+
+ +
+
Text within Item
+
+ +
+
Link within Item
+
+ +
+
+ +

Automatic Tags (add matching auto class to list)

+
+
Item (no child)
+
+ +
+
Text within Item
+
+ +
+
Link within Item
+
+ +
+
+ +{{#> @misuse }} +
+
No Explicit Tag Elements & No Auto Class
+
+ +
+
+{{/ @misuse }} diff --git a/src/lib/_imports/components/c-tag-list/c-tag-list.config.yml b/src/lib/_imports/components/c-tag-list/c-tag-list.config.yml new file mode 100644 index 000000000..b9621a855 --- /dev/null +++ b/src/lib/_imports/components/c-tag-list/c-tag-list.config.yml @@ -0,0 +1,48 @@ +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: '<nav>' + notes: | + A list of tags for navigation. The `` does __not__ need the `.c-tag` class. + + Use Cases: + - manage layout via parent (e.g. using flex or grid) + - write fewer classnames in manual markup + - semantic use of `