@tacc/core-styles 2.43.1 → 2.44.0

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: ':';
   }
 }
 

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");

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");

package/src/lib/_imports/core-styles.docs.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 */

package/src/lib/_imports/core-styles.header.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 */
 /* To get these, client should load `./base.css` first */
 
 /* GENERICS */
 /* Mostly from Bootstrap */
-/* https://confluence.tacc.utexas.edu/x/b53tDg */
+/* https://tacc-main.atlassian.net/wiki/x/khJv */
 
 /* ELEMENTS */
 /* To override Bootstrap */

package/src/lib/_imports/core-styles.portal.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--portal.css");
@@ -26,6 +26,7 @@
 @import url("./components/bootstrap.form.css");
 @import url("./components/cortal.icon.css");
 @import url("./components/mui.tabs.css");
+@import url("./components/c-feed-list.css");
 @import url("./components/c-form--portal.css");
 @import url("./components/c-message.css");
 @import url("./components/c-message--compact.css");

package/src/lib/_imports/core-styles.wysiwyg.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("./core-styles.settings.css");

package/src/lib/_imports/generics/README.md

@@ -6,4 +6,4 @@ This directory is here to show and document all [ITCSS] directories.
 
 [^1]: Bootstrap also provides its own objects, components, elements, and trumps.
 
-[itcss]: https://confluence.tacc.utexas.edu/x/IAA9Cw
+[itcss]: https://tacc-main.atlassian.net/wiki/x/QQhv

package/src/lib/_imports/generics/fonts.css

@@ -16,7 +16,7 @@ Usage:
 Reference:
 - [Keep Font CSS Simple](https://www.456bereastreet.com/archive/201012/font-face_tip_define_font-weight_and_font-style_to_keep_your_css_simple/)
 - [font-weight](https://developer.mozilla.org/en-US/docs/Web/CSS/font-weight)
-- [Shared UI - Constants - Font](https://confluence.tacc.utexas.edu/x/cYAZCg)
+- [Shared UI - Constants - Font](https://tacc-main.atlassian.net/wiki/x/XRtv)
 
 Styleguide Generics.Fonts
 */

package/src/lib/_imports/settings/font--cms.css

@@ -4,7 +4,7 @@
   --sans: var(--global-font-family--sans);
 
   /* Size */
-  /* https://confluence.tacc.utexas.edu/x/nh4FDg */
+  /* https://tacc-main.atlassian.net/wiki/x/8Bdv */
   /* CAVEAT: These font sizes assume root font is 10px or an equivalent value */
   /* Known Clients: TACC/Core-CMS@3.10, TACC/tup-ui:/apps/tup-cms */
   --global-font-size--x-small: 1.0rem;

package/src/lib/_imports/settings/font--docs.css

@@ -4,7 +4,7 @@
   --sans: var(--global-font-family--sans);
 
   /* Size */
-  /* https://confluence.tacc.utexas.edu/x/nh4FDg */
+  /* https://tacc-main.atlassian.net/wiki/x/8Bdv */
   /* CAVEAT: These font sizes assume root font is 10px or an equivalent value */
   /* Known Clients: TACC/TACC-Docs */
   --global-font-size--x-small: 1.2rem;

package/src/lib/_imports/settings/font--portal.css

@@ -4,7 +4,7 @@
   --sans: var(--global-font-family--sans);
 
   /* Size */
-  /* https://confluence.tacc.utexas.edu/x/nh4FDg */
+  /* https://tacc-main.atlassian.net/wiki/x/8Bdv */
   /* CAVEAT: These font sizes assume root font is 10px or an equivalent value */
   /* Known Clients: TACC/tup-ui:/apps/tup-ui */
   --global-font-size--x-small: 1.0rem;

package/src/lib/_imports/settings/font.css

@@ -14,7 +14,7 @@ Usage:
 
 Reference:
 - https://developer.mozilla.org/en-US/docs/Web/CSS/Using_CSS_custom_properties
-- [Shared UI - Constants - Font](https://confluence.tacc.utexas.edu/x/cYAZCg)
+- [Shared UI - Constants - Font](https://tacc-main.atlassian.net/wiki/x/XRtv)
 
 Styleguide Settings.CustomProperties.Font
 */

package/src/lib/_imports/settings/space.css

@@ -10,7 +10,7 @@ _Notice_: We will use Bootstrap values until Design defines values.
 Usage: `var(--global-space--normal)`
 
 Reference:
-- https://confluence.tacc.utexas.edu/x/dYAZCg
+- https://tacc-main.atlassian.net/wiki/x/zgJv
 - https://developer.mozilla.org/en-US/docs/Web/CSS/Using_CSS_custom_properties
 - https://getbootstrap.com/docs/4.0/utilities/spacing/
 - https://getbootstrap.com/docs/4.0/getting-started/theming/#sass-options
@@ -41,6 +41,8 @@ Styleguide Settings.CustomProperties.Space
   --global-space--grid-gap: var(--global-space--bootstrap-gap);
   --global-space--above-breadcrumbs: 45px;
   --global-space--under-breadcrumbs: 40px;
+  --global-space--pattern-pad: 30px;
+  --global-space--unnamed: 50px;
 
   /* Applications */
   --global-space--section-top: 12px;

package/src/lib/_imports/tools/media-queries.css

@@ -11,7 +11,7 @@ Notice: These must be Tools (imported as needed) until native browser support, a
 
 Reference:
 - https://drafts.csswg.org/mediaqueries-5/#at-ruledef-custom-media
-- https://confluence.tacc.utexas.edu/x/b4AZCg
+- https://tacc-main.atlassian.net/wiki/x/ahNv
 
 Styleguide Tools.CustomMediaQueries.Breakpoints
 */

package/src/lib/_imports/tools/x-action/config.yml

@@ -0,0 +1,5 @@
+status: prototype
+context:
+  shouldSkipPattern: false
+  supportStyles:
+    - ../../assets/components/cortal-icon.css

package/src/lib/_imports/tools/x-action/readme.md

@@ -0,0 +1,4 @@
+For use at the end of an incomplete list as a link to see more e.g.
+
+- "See All Training"
+- "See All News"

package/src/lib/_imports/tools/x-action/x-action.hbs

@@ -0,0 +1,40 @@
+<dl>
+    <dt>Links</dt>
+    <dd>
+        <a href="#" class="x-action--with-icon">
+            <i class="
+                x-action__icon-at-start
+                icon icon-push-right
+            ">&gt;</i>
+            Link with Icon
+        </a>
+    </dd>
+    <dd>
+        <button type="button" class="x-action--with-icon c-button c-button--as-link">
+            <i class="
+                x-action__icon-at-start
+                icon icon-push-right
+            ">&gt;</i>
+            Button as Link with Icon
+        </button>
+    </dd>
+    <dt>Buttons</dt>
+    <dd>
+        <button type="button" class="x-action--with-icon c-button c-button--primary">
+            <i class="
+                x-action__icon-at-start
+                icon icon-push-right
+            ">&gt;</i>
+            Button with Icon
+        </button>
+    </dd>
+    <dd>
+        <a href="#" class="x-action--with-icon c-button c-button--primary" target="_blank">
+            <i class="
+                x-action__icon-at-start
+                icon icon-push-right
+            ">&gt;</i>
+            Link as Button with Icon
+        </a>
+    </dd>
+</dl>

package/src/lib/_imports/tools/x-action.css

@@ -0,0 +1,15 @@
+@define-mixin action--with-icon {
+    display: inline-flex; /* for simple alignment code */
+    align-items: center;
+    gap: 0.5em;
+}
+@define-mixin action__icon {
+    font-size: 1.2em;
+}
+/* DEMO-USE ONLY */
+.x-action--with-icon {
+    @mixin action--with-icon;
+}
+.x-action__icon {
+    @mixin action__icon;
+}

package/src/lib/_imports/tools/x-feed-list/config.yml

@@ -0,0 +1,5 @@
+status: ready
+context:
+  shouldSkipPattern: false
+  supportStyles:
+    - ../../assets/components/cortal-icon.css

package/src/lib/_imports/tools/x-feed-list/readme.md

@@ -0,0 +1 @@
+A list of preview content for articles, documents, or pages.

package/src/lib/_imports/tools/x-feed-list/x-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="x-feed-list">
+            <h3 class="x-feed-list__title">Upcoming Events</h3>
+            
+            <article class="x-feed-list__item">
+                <time class="x-feed-list__item-time">May 15, 2024</time>
+                <h4 class="x-feed-list__item-name">
+                    <a href="#">Workshop: Advanced Data Analysis</a>
+                </h4>
+                <p class="x-feed-list__item-desc">Join us for an in-depth workshop on advanced data analysis techniques and best practices.</p>
+            </article>
+
+            <article class="x-feed-list__item">
+                <time class="x-feed-list__item-time">May 20–22, 2024</time>
+                <h4 class="x-feed-list__item-name">
+                    <a href="#">Annual Conference</a>
+                </h4>
+                <p class="x-feed-list__item-desc">Our flagship event featuring keynote speakers, technical sessions, and networking opportunities.</p>
+            </article>
+
+            <p class="x-feed-list__more">
+                <a href="#" class="x-feed-list__more-link">
+                    <i class="x-feed-list__more-icon icon icon-push-right">&gt;</i>
+                    See All Events
+                </a>
+            </p>
+        </div>
+    </section>
+
+    <section>
+        <h2 id="complex">Complex Example</h2>
+        <div class="x-feed-list">
+            <h3 class="x-feed-list__title">User Updates</h3>
+            
+            <article class="x-feed-list__item">
+                <time class="x-feed-list__item-time" data-prefix="Published:" datetime="2024-04-29">
+                    <span>April 29, 2024</span>
+                </time>
+                <h4 class="x-feed-list__item-name"><a href="#" target="_blank">New Feature Release</a></h4>
+                <p class="x-feed-list__item-desc">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 class="x-feed-list__item-link"><a href="#" class="c-button c-button--primary" target="_blank">Learn More</a></p>
+            </article>
+
+            <article class="x-feed-list__item has-update">
+                <time class="x-feed-list__item-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 class="x-feed-list__item-name"><a href="#" target="_blank">System Maintenance</a></h4>
+                <p class="x-feed-list__item-desc">Planned maintenance will occur this weekend. The system will be unavailable from 10 PM to 2 AM.</p>
+                <p class="x-feed-list__item-link"><a href="#" class="c-button c-button--primary" target="_blank">View Details</a></p>
+            </article>
+
+            <p class="x-feed-list__more">
+                <a href="#" class="x-feed-list__more-link">
+                    <i class="x-feed-list__more-icon  icon icon-push-right">&gt;</i>
+                    See All Updates
+                </a>
+            </p>
+        </div>
+    </section>
+</div>