feat: c-feed-list (#508)

Author: wesleyboar

dist/components/c-feed-list.css

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

dist/components/c-feed-list.selectors.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;
+}

dist/components/demo.css

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

dist/core-styles.cms.css

@@ -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>