feat: c-feed-list

dist/components/c-feed-list.selectors.css

@@ -0,0 +1 @@
+/*! @tacc/core-styles 2.43.2+ | MIT | github.com/TACC/Core-Styles */

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;
+}

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;

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>

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

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 > * {

src/lib/_imports/core-styles.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");

src/lib/_imports/core-styles.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");