@tacc/core-styles 2.43.2 → 2.45.0

package/src/lib/_imports/components/bootstrap/config.yml

@@ -33,3 +33,21 @@ variants:
     context:
       supportStyles:
         - ../../assets/components/bootstrap.pagination.css
+  - name: dropdown
+    view: 'bootstrap--dropdown.hbs'
+    status: ready
+    context:
+      supportStyles:
+        - ../../assets/components/bootstrap.dropdown.css
+  - name: dropdown-cms
+    label: (CMS) Dropdown
+    view: 'bootstrap--dropdown-cms.hbs'
+    status: ready
+    context:
+      shouldLoadCMS: true
+  - name: dropdown-portal
+    label: (Portal) Dropdown
+    view: 'bootstrap--dropdown-portal.hbs'
+    status: ready
+    context:
+      shouldLoadPortal: true

package/src/lib/_imports/components/bootstrap.dropdown.css

@@ -0,0 +1,50 @@
+/* STRUCTURE */
+
+.dropdown-menu {
+  font-size: inherit;
+
+  padding-block: 5px;
+}
+
+.dropdown-item {
+  padding-block: 2.5px;
+  padding-inline: 15px;
+}
+
+hr.dropdown-divider {
+  margin-block: revert-layer; /* to undo core-styles.cms.css */
+}
+
+
+/* SKIN */
+
+@design-tokens url('../../tokens/v2.json') format('style-dictionary3');
+
+.dropdown-item {
+  color: #212529;
+}
+.dropdown-item:focus,
+.dropdown-item:hover {
+  color: #16181b;
+  text-decoration: none;
+  background-color: rgb( from design-token('color.gray.light') r g b / 0.3 );
+}
+.dropdown-item.active,
+.dropdown-item:active {
+  color: #fff;
+  text-decoration: none;
+}
+.dropdown-item:active {
+  background-color: var(--global-color-accent--normal);
+}
+.dropdown-item.active {
+  background-color: var(--global-color-accent--light);
+}
+
+.dropdown-item.disabled {
+  opacity: 0.5;
+}
+
+.dropdown-divider {
+  border-top-color: var(--global-color-primary--light);
+}

package/src/lib/_imports/components/c-button/c-button.hbs

@@ -85,13 +85,13 @@
       <dd>
         <button class="c-button c-button--{{this._self.name}}
         {{#if type}}{{type}}{{/if}}" {{#if disabled}}disabled{{/if}}>
-          <i class="c-button__icon--before" aria-description="validate input">…</i>
+          <i class="c-button__icon--before icon icon-push-right" aria-description="validate input">…</i>
           <span class="c-button__text">__icon--before</span>
         </button>
         <button class="c-button c-button--{{this._self.name}}
         {{#if type}}{{type}}{{/if}}" {{#if disabled}}disabled{{/if}}>
           <span class="c-button__text">__icon--after</span>
-          <i class="c-button__icon--after" aria-description="exit page">X</i>
+          <i class="c-button__icon--after icon icon-new-browser" aria-description="exit page">X</i>
       </dd>
 
       {{#if supports.link-tag}}
@@ -99,13 +99,13 @@
       <dd>
         <a href="#" class="c-button c-button--{{this._self.name}}
         {{#if type}}{{type}}{{/if}}" {{#if disabled}}disabled tabindex="-1" {{/if}}>
-          <i class="c-button__icon--before" aria-description="validate input">…</i>
+          <i class="c-button__icon--before icon icon-push-right" aria-description="validate input">…</i>
           <span class="c-button__text">__icon--before</span>
         </a>
         <a href="#" class="c-button c-button--{{this._self.name}}
         {{#if type}}{{type}}{{/if}}" {{#if disabled}}disabled tabindex="-1" {{/if}}>
           <span class="c-button__text">__icon--after</span>
-          <i class="c-button__icon--after" aria-description="exit page">X</i>
+          <i class="c-button__icon--after icon icon-new-browser" aria-description="exit page">X</i>
         </a>
       </dd>
       {{/if}}

package/src/lib/_imports/components/c-button/config.yml

@@ -6,6 +6,8 @@ context:
     size: true
     size-small: true
     link-tag: true
+  supportStyles:
+    - ../../assets/components/cortal-icon.css
 variants:
   # type
   - name: default

package/src/lib/_imports/components/c-button--cms.css

@@ -11,6 +11,11 @@
     padding: 10px 20px;
 
     font-size: var(--global-font-size--small);
+    & .icon {
+      font-size: calc(
+        1.2 * var(--global-font-size--medium)
+      ); /* to retain standard action icon size */
+    }
 
     font-weight: var(--bold);
     letter-spacing: 0.05em;

package/src/lib/_imports/components/c-button.css

@@ -20,7 +20,7 @@
   --max-width: 130px;
 
   display: inline-flex;
-  align-items: baseline;
+  align-items: center;
   justify-content: center;
 
   /* To ensure identical <button> and <a> instances have same width */
@@ -32,6 +32,9 @@
 :--c-button:where(:not(:--disabled)) {
   cursor: pointer; /* WARNING: Opinionated */
 }
+:--c-button:has(:--c-button__icon) {
+  vertical-align: middle;
+}
 
 a:--c-button {
   text-decoration: none;
@@ -328,10 +331,6 @@ a:--c-button--is-busy {
 
 /* Elements */
 
-:--c-button > * {
-  vertical-align: middle;
-}
-
 :--c-button__icon--before {
   margin-right: 0.5em;
 }

package/src/lib/_imports/components/c-card/_c-card--many-variable.hbs

@@ -27,7 +27,7 @@
 
     <a href="#" class="c-button c-button--primary">Action</a>
     <a href="#" class="c-button c-button--primary">
-        <i class="icon icon-user">&gt;</i>
+        <i class="c-button__icon--before icon icon-push-right">&gt;</i>
         Action + Icon
     </a>
 </article>

package/src/lib/_imports/components/c-card.css

@@ -1,7 +1,7 @@
 @import url("../objects/o-section.selectors.css");
 @import url("../tools/selectors.css");
 @import url("../tools/x-link.css");
-
+@import url("../tools/x-action.css");
 @import url("./c-button.selectors.css");
 @import url("./c-card.selectors.css");
 
@@ -9,16 +9,6 @@
 
 
 
-/* Settings */
-
-:root {
-    --global-space--pattern-pad: 30px;
-    --global-space--unnamed: 50px;
-}
-
-
-
-
 
 /* Skin */
 /* NOTE: Design text color discrepency… text color should match that of body */
@@ -117,14 +107,6 @@
 
 /* Elements */
 
-:--c-card > a:not(:--c-button),
-:--c-card > p > a:not(:--c-button) {
-    /* XXX: Prevents text around it from wrapping if link spans two lines */
-    /* FAQ: To fix on client, `class="d-inline"` or `style="display: inline"` */
-    /* ???: Why does this use `inline-flex`? */
-    display: inline-flex;
-    align-items: baseline;
-}
 /* I.e. one of multiple icon links within a p tag */
 :--c-card > p > a:not(:--c-button):has(.icon):not(:last-child) {
     margin-right: 1rem;
@@ -135,7 +117,16 @@
     margin-bottom: 2rem; /* mimic <p> `margin-bottom` */
     margin-right: var(--global-space--pattern-pad);
 }
-/* So text of card links does not all look link a link */
+/* To style actions that have an icon */
+:--c-card > a:not(:--c-button):has(.icon),
+:--c-card > p > a:not(:--c-button):has(.icon) {
+    @mixin action--with-icon;
+}
+:--c-card > a:not(:--c-button) > .icon,
+:--c-card > p > a:not(:--c-button) > .icon {
+    @mixin action__icon;
+}
+/* So text of card links does not all look like a link */
 a:--c-card {
     color: inherit;
     text-decoration: none;

package/src/lib/_imports/components/c-data-list/table/config.yml

@@ -1,6 +1,9 @@
 collated: true
 name: c-data-list--table
 label: '<table> Table'
+context:
+  key-class: c-data-list__key
+  value-class: c-data-list__value
 # NOTE: Variant config is mirrored on `../list/config` and `../table/config`
 # NOTE: Can `../list/config` and `../table/config` have source of truth?
 variants:
@@ -66,3 +69,9 @@ variants:
         c-data-list--is-vert
         c-data-list--is-narrow
         c-data-list--should-truncate-values
+  - name: multi-row
+    label: Multi-Row Items
+    view: table--multi-row.hbs
+    context:
+      class: |-
+        c-data-list

package/src/lib/_imports/components/c-data-list/table/table--multi-row.hbs

@@ -0,0 +1,33 @@
+<dl>
+  <dt>Multi-Row Data List Items</dt>
+  <dd>
+    <table class="{{ class }}">
+      <tbody>
+        <tr>
+          <th class="c-data-list__key">Segmented</th>
+          <td class="c-data-list__value">No</td>
+        </tr>
+        <tr>
+          <th class="c-data-list__key">Voxel length (x, y, z)</th>
+          <td class="c-data-list__value">1.66, 1.66, 1.66 μm</td>
+        </tr>
+        <tr class="c-data-list__row--start-final">
+          <th class="c-data-list__key">Analysis of this Data</th>
+          <td class="c-data-list__value">Bentheimer Cycle 1 Filtered</td>
+        </tr>
+        <tr>
+          <td></td>
+          <td class="c-data-list__value">Bentheimer Pore Cycle 1</td>
+        </tr>
+        <tr>
+          <td></td>
+          <td class="c-data-list__value">Bentheimer Segmented Pores</td>
+        </tr>
+        <tr>
+          <td></td>
+          <td class="c-data-list__value">Bentheimer Cycle 1 scCO2 Binary</td>
+        </tr>
+      </tbody>
+    </table>
+  </dd>
+</dl>

package/src/lib/_imports/components/c-data-list.css

@@ -139,7 +139,7 @@ table:--data-list {
 }
 @supports(text-overflow: ':') {
   :--data-list__non-table-key {
-    --text-overflow: ':';
+    text-overflow: ':';
   }
 }
 
@@ -299,3 +299,19 @@ table:--data-list--is-horz tr { align-items: baseline; }
 /* NOTE: This assumes key and value are inline display, not flex items */
 table:--data-list--is-vert :--table-key,
 table:--data-list--is-vert :--table-value { vertical-align: baseline; }
+
+
+
+
+/* Multi-Row Items */
+/* FAQ: For data list items that span multiple rows (start-final pattern) */
+
+/* To use one background color for all final rows */
+tr.c-data-list__row--start-final:nth-child(odd) :is(th, td),
+tr.c-data-list__row--start-final:nth-child(odd) ~ tr :is(th, td) {
+  background: var(--global-color-background--app);
+}
+tr.c-data-list__row--start-final:nth-child(even) :is(th, td),
+tr.c-data-list__row--start-final:nth-child(even) ~ tr :is(th, td) {
+  background: var(--global-color-primary--x-light);
+}

package/src/lib/_imports/components/c-feed-list/c-feed-list.hbs

@@ -0,0 +1,72 @@
+<h2>Table of Contents</h2>
+<nav class="c-nav">
+    <ul>
+        <li><a href="#minimal">Minimal Example</a></li>
+        <li><a href="#complex">Complex Example</a></li>
+    </ul>
+</nav>
+
+<div class="demo-grid demo-grid--plain">
+    <section>
+        <h2 id="minimal">Minimal Example</h2>
+        <div class="c-feed-list">
+            <h3>Upcoming Events</h3>
+
+            <article>
+                <time>May 15, 2024</time>
+                <h4>
+                    <a href="#">Workshop: Advanced Data Analysis</a>
+                </h4>
+                <p>Join us for an in-depth workshop on advanced data analysis techniques and best practices.</p>
+            </article>
+
+            <article>
+                <time>May 20–22, 2024</time>
+                <h4>
+                    <a href="#">Annual Conference</a>
+                </h4>
+                <p>Our flagship event featuring keynote speakers, technical sessions, and networking opportunities.</p>
+            </article>
+
+            <p>
+                <a href="#">
+                    <i class="icon icon-push-right">&gt;</i>
+                    See All Events
+                </a>
+            </p>
+        </div>
+    </section>
+
+    <section>
+        <h2 id="complex">Complex Example</h2>
+        <div class="c-feed-list">
+            <h3>User Updates</h3>
+
+            <article>
+                <time data-prefix="Published:" datetime="2024-04-29">
+                    <span>April 29, 2024</span>
+                </time>
+                <h4><a href="#" target="_blank">New Feature Release</a></h4>
+                <p>We're excited to announce the release of new features to enhance your experience. These updates include improved performance and additional customization options.</p>
+                <p><a href="#" class="c-button c-button--primary" target="_blank">Learn More</a></p>
+            </article>
+
+            <article class="has-update">
+                <time data-prefix="Published:" datetime="2024-04-28">
+                    <span>April 28, 2024</span>
+                    <span class="c-pill c-pill--is-updated">Update</span>
+                </time>
+                <h4><a href="#" target="_blank">System Maintenance</a></h4>
+                <p>Planned maintenance will occur this weekend. The system will be unavailable from 10 PM to 2 AM.</p>
+                <p><a href="#" class="c-button c-button--primary" target="_blank">View Details</a></p>
+            </article>
+
+            <p>
+                <a href="#">
+                    <i class="icon icon-push-right">&gt;</i>
+                    See All Updates
+                </a>
+            </p>
+        </div>
+    </section>
+</div>

package/src/lib/_imports/components/c-feed-list/config.yml

@@ -0,0 +1,14 @@
+status: ready
+variants:
+  - name: default
+    label: Default
+    context:
+      shouldSkipPattern: false
+  - name: cms
+    label: CMS
+    context:
+      shouldLoadCMS: true
+  - name: portal
+    label: Portal
+    context:
+      shouldLoadPortal: true

package/src/lib/_imports/components/c-feed-list.css

@@ -0,0 +1,82 @@
+@import url('../tools/x-feed-list.css');
+
+@import url('../tools/selectors.common.css');
+@import url("./c-feed-list.selectors.css");
+
+
+
+
+/* BASE */
+
+.c-feed-list {
+  @mixin feed-list;
+}
+
+
+
+
+/* ELEMENTS */
+
+
+/* Title */
+
+.c-feed-list > :--heading {
+  @mixin feed-list__title;
+}
+
+
+/* Item */
+
+:--c-feed-list__item {
+  @mixin feed-list__item;
+}
+
+/* Item: Elements */
+
+/* IDEA: Share time styles between c-news and c-feed-list */
+:--c-feed-list__item > time,
+:--c-feed-list__item > p:has(time) {
+  @mixin feed-list__item-time;
+}
+:--c-feed-list__item > p:has(time) {
+  margin-bottom: unset;
+}
+
+:--c-feed-list__item > :--heading {
+  @mixin feed-list__item-name;
+}
+
+:--c-feed-list__item > p:not(:has(time, a:only-child)) {
+  @mixin feed-list__item-desc;
+}
+
+:--c-feed-list__item > p:has(a:only-child) {
+  @mixin feed-list__item-link;
+}
+
+
+
+
+/* "(See) More" Link */
+
+.c-feed-list > a:last-child,
+.c-feed-list > p:has(a:only-child) {
+  @mixin feed-list__more;
+}
+.c-feed-list > a:last-child,
+.c-feed-list > p > a:only-child {
+  @mixin feed-list__more-link;
+
+  & .icon {
+    @mixin feed-list__more-icon;
+  }
+}
+
+
+
+
+/* PATTERNS */
+
+.c-feed-list .c-pill {
+  @mixin feed-list__pill;
+}

package/src/lib/_imports/components/c-feed-list.selectors.css

@@ -0,0 +1,3 @@
+@custom-selector :--c-feed-list__item
+  .c-feed-list > div,
+  .c-feed-list > article;

package/src/lib/_imports/components/c-image-map.css

@@ -21,6 +21,6 @@ Styleguide Components.ImageMap
 */
 
 /* Styles are organized by OOCSS methodology */
-/* SEE: https://confluence.tacc.utexas.edu/x/VwALBg */
+/* SEE: https://tacc-main.atlassian.net/wiki/x/6Atv */
 @import url("./c-image-map.structure.css");
 @import url("./c-image-map.skin.css");

package/src/lib/_imports/components/c-pill/readme.md

@@ -8,6 +8,6 @@ To label the status of something.
 | `.c-pill--is-success`      | `.pill--success`         | for a "success" status
 | `.c-pill--is-...`          | `.pill--...`             | for a "..." status
 
-<small>* Requires client styles, because [truncation can be context-dependent](https://confluence.tacc.utexas.edu/x/sAoFDg).</small>
+<small>* Requires client styles, because [truncation can be context-dependent](https://tacc-main.atlassian.net/wiki/x/6hpv).</small>
 
 <script src="{{path '/assets/_utils/js/open-ext-links-in-new-window.js'}}" />

package/src/lib/_imports/components/c-pill.css

@@ -24,7 +24,7 @@
 /* Modifiers - Structure */
 
 /* CAVEAT: This alone may not trigger truncation */
-/* SEE: https://confluence.tacc.utexas.edu/x/sAoFDg */
+/* SEE: https://tacc-main.atlassian.net/wiki/x/6hpv */
 :--c-pill--should-truncate {
   max-width: 100%;
 

package/src/lib/_imports/components/cortal-icon/demo.css

@@ -1,7 +1,6 @@
 /* This CSS is ONLY for the pattern library. It is NOT part of the pattern. */
 
 .demo-grid {
-  display: grid;
   grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
   gap: 1em;
 }

package/src/lib/_imports/components/cortal-icon-font.md

@@ -1,3 +1,3 @@
 # Cortal Icon Font
 
-The file `cortal-icon-font.css` comes from raw CSS provided by latest version of [TACC's "Cortal" icon font](https://confluence.tacc.utexas.edu/x/MCAFDg).
+The file `cortal-icon-font.css` comes from raw CSS provided by latest version of [TACC's "Cortal" icon font](https://tacc-main.atlassian.net/wiki/x/Bg5v).

package/src/lib/_imports/components/cortal-icon.css

@@ -1,4 +1,5 @@
 @import url('./cortal-icon-font.css');
+@import url("../tools/x-action.css");
 
 
 
@@ -55,16 +56,10 @@
 
 
 
-/* Cross-Pattern */
+/* Icon within an Action */
 
-/* To tweak action icon appearance and layout */
-:--c-card > :is(:--action) > .icon:first-child,
-p > :is(:--action) > .icon:first-child {
-    margin-right: 10px;
-    font-size: 1.2em;
-
-    position: relative;
-    top: 0.2em;
+:--action > .icon {
+    @mixin action__icon;
 }
 
 
@@ -72,7 +67,7 @@ p > :is(:--action) > .icon:first-child {
 /* Overrides */
 
 /* To overwrite `cortal.icon.fonts.css` icon sizes */
-/* SEE: https://confluence.tacc.utexas.edu/x/dgB_CQ */
+/* SEE: https://tacc-main.atlassian.net/wiki/x/Bg5v */
 /* CAVEAT: Assumes 1rem = 10px */
 /* relative units */
 .icon-sm {

package/src/lib/_imports/components/demo.css

@@ -2,12 +2,27 @@
 
 .demo-grid {
   display: grid;
-  gap: 10px;
+  gap: var(--global-space--grid-gap);
 }
 .demo-grid > figure {
   margin: unset; /* undo browser & Bootstrap */
 }
 
+/* Grid: Plain */
+
+.demo-grid--plain {
+  --min-width: 400px;
+
+  grid-template-columns: repeat(
+    auto-fit,
+    minmax(
+      min(100%, var(--min-width)),
+      1fr
+    )
+  );
+}
+
+
 /* Grid: Boxes */
 
 .demo-grid--boxes > * {

package/src/lib/_imports/core-styles.base.css

@@ -2,14 +2,14 @@
 /* DO NOT ADD STYLES HERE; ONLY IMPORT OTHER STYLESHEETS */
 
 /* Organize via ITCSS */
-/* https://confluence.tacc.utexas.edu/x/IAA9Cw */
+/* https://tacc-main.atlassian.net/wiki/x/QQhv */
 
 /* SETTINGS */
 @import url("./core-styles.settings.css");
 
 /* GENERICS */
 /* Mostly from Bootstrap */
-/* https://confluence.tacc.utexas.edu/x/b53tDg */
+/* https://tacc-main.atlassian.net/wiki/x/khJv */
 @import url("./generics/fonts.css");
 @import url("./generics/pseudo-elements.css");
 @import url("./generics/attributes.css");
@@ -31,6 +31,7 @@
 
 /* COMPONENTS */
 @import url("./components/bootstrap.container.css");
+@import url("./components/bootstrap.dropdown.css");
 @import url("./components/bootstrap.figure.css");
 @import url("./components/bootstrap.modal.css");
 @import url("./components/bootstrap.nav-tabs.css");
@@ -52,5 +53,6 @@
 @import url("./trumps/s-breadcrumbs.css");
 @import url("./trumps/u-empty.css");
 @import url("./trumps/s-irregular-links.css");
+@import url("./trumps/u-highlight.css");
 @import url("./trumps/u-mailto-text-replace.css");
-@import url("./trumps/u-highlight.css")
+@import url("./trumps/u-summary.css");

package/src/lib/_imports/core-styles.cms.css

@@ -2,7 +2,7 @@
 /* DO NOT ADD STYLES HERE; ONLY IMPORT OTHER STYLESHEETS */
 
 /* Organize via ITCSS */
-/* https://confluence.tacc.utexas.edu/x/IAA9Cw */
+/* https://tacc-main.atlassian.net/wiki/x/QQhv */
 
 /* SETTINGS */
 /* To get most settings, client should load `./base.css` first */
@@ -11,7 +11,7 @@
 
 /* GENERICS */
 /* Mostly from Bootstrap */
-/* https://confluence.tacc.utexas.edu/x/b53tDg */
+/* https://tacc-main.atlassian.net/wiki/x/khJv */
 
 /* ELEMENTS */
 @import url("./elements/root--cms.css");
@@ -39,6 +39,7 @@
 @import url("./components/c-button--cms.css");
 @import url("./components/c-card.css");
 @import url("./components/c-card-list.css");
+@import url("./components/c-feed-list.css");
 @import url("./components/c-form--cms.css");
 @import url("./components/c-message.css");
 @import url("./components/c-message--expanded.css");

package/src/lib/_imports/core-styles.demo.css

@@ -2,7 +2,7 @@
 /* DO NOT ADD STYLES HERE; ONLY IMPORT OTHER STYLESHEETS */
 
 /* Organize via ITCSS */
-/* https://confluence.tacc.utexas.edu/x/IAA9Cw */
+/* https://tacc-main.atlassian.net/wiki/x/QQhv */
 
 /* SETTINGS */
 @import url("./settings/demo.css");