fix(tup-components, tup-ui): tup-519 UserNews component UI (#248)

* fix: UserNews CSS+HTML & supporting global styles * fix: UserNews max items from 12 to 5 * chore: npx nx format:write * fix: pill to say "Update" not "Updated" (to match CMS) * fix: move status pill back into "Posted" * chore: set indent to match .editorconfig * chore: set indent to match .editorconfig * fix: change "Posted" to "Published" --------- Co-authored-by: Jake Rosenberg <[email protected]>
TACC · Jul 6, 2023 · 62fca8f · 62fca8f
1 parent 15061d4
commit 62fca8f
Show file tree

Hide file tree

Showing 4 changed files with 73 additions and 38 deletions.
diff --git a/apps/tup-ui/src/main.global.css b/apps/tup-ui/src/main.global.css
@@ -45,6 +45,10 @@ h2 {
   font-size: var(--global-font-size--large);
   font-weight: var(--bold);
 }
+h3 {
+  font-size: var(--global-font-size--medium);
+  font-weight: var(--bold);
+}
 
 /* Tables */
 table {

diff --git a/apps/tup-ui/src/main.global.for-core-styles.css b/apps/tup-ui/src/main.global.for-core-styles.css
@@ -31,3 +31,13 @@ hr {
   width: 16px;
   height: 16px;
 }
+
+/* TODO: Remove this after:
+         0. attributes.css is migrated to Core-Styles
+         1. attributes.css is loaded by Portal */
+[data-prefix]::before {
+  display: inline-block;
+  content: attr(data-prefix);
+  margin-right: 0.25ch;
+  text-transform: none;
+}
diff --git a/libs/tup-components/src/news/UserNews.module.css b/libs/tup-components/src/news/UserNews.module.css
@@ -1,44 +1,50 @@
 .news-list {
-    padding: 0px;
+  font-size: var(--global-font-size--small);
 }
 
 .news-list-item {
-    list-style: none;
-    border-top: 1px solid #707070;
-    padding-top: 10px;
-    padding-bottom: 10px;
+  padding-block: 10px;
+  border-top: var(--global-border-width--normal) solid var(--global-color-primary--dark);
 }
 
 .body {
-    display: -webkit-box;
-    font-size: 1rem;
-    -webkit-line-clamp: 3;
-    -webkit-box-orient: vertical;
-    overflow: hidden;
+  composes: x-truncate--many-lines from '@tacc/core-styles/dist/tools/x-truncate.css';
+
+  margin-bottom: 1.15rem;
 }
 
 .posted-date {
-    font-size: 1rem;
-    display: flex;
-    flex-direction: row;
-    align-items: center;
+  color: var(--global-color-accent--secondary);
+  font-weight: var(--medium);
+  text-transform: uppercase;
+}
+.posted-date .status-pill {
+  text-transform: none;
+
+  vertical-align: middle;
+  transform: translateY(-0.125em);
 }
 
 .status-pill {
-    padding-bottom: 0px;
-    padding-top: 0px;
-    margin-left: 1rem;
+  margin-left: 0.5ch;
+  vertical-align: middle;
+
+  /* Mimics .c-pill font-size */
+  /* TODO: Update <Pill> to use .c-pill, then remove this */
+  font-size: var(--global-font-size--x-small);
 }
 
 .title {
-    font-size: 1.25rem;
-    font-weight: bolder;
+  composes: x-truncate--many-lines from '@tacc/core-styles/dist/tools/x-truncate.css';
+
+  margin-top: 10px;
+  margin-bottom: 5px;
 }
 
 .news-error {
-    display: flex;
-    justify-content: center;
-    align-items: center;
-    color: var(--global-color-accent--normal);
-    padding: 30px;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  color: var(--global-color-accent--normal);
+  padding: 30px;
 }
diff --git a/libs/tup-components/src/news/UserNews.tsx b/libs/tup-components/src/news/UserNews.tsx
@@ -9,8 +9,17 @@ import styles from './UserNews.module.css';
 
 const formatDate = (datestring: string): string => {
   const date = new Date(datestring);
-  return `${date.getMonth() + 1}/${date.getDate()}/${date.getFullYear()}`;
+  return date.toLocaleDateString('en-US', {
+    year: 'numeric',
+    month: 'long',
+    day: 'numeric',
+  });
 };
+const formatDateTime = (datestring: string): string => {
+  const date = new Date(datestring);
+  return date.toISOString();
+};
+
 const ViewAllUpdates = () => (
   <a
     href={`/news/user-updates/`}
@@ -24,38 +33,44 @@ const ViewAllUpdates = () => (
 
 const UserNews: React.FC = () => {
   const { data, isLoading } = useUserNews();
+  const maxItems = 5;
+
   if (isLoading) return <LoadingSpinner />;
   return (
     <SectionTableWrapper
       header="User Updates"
       headerActions={<ViewAllUpdates />}
       contentShouldScroll
     >
-      <ul className={styles['news-list']}>
+      <div className={styles['news-list']}>
         {data &&
-          data.slice(0, 12).map((newsItem) => (
-            <li className={styles['news-list-item']} key={newsItem.ID}>
-              <div className={styles['posted-date']}>
-                <span>Posted {formatDate(newsItem.PostedDate)} </span>
+          data.slice(0, maxItems).map((newsItem) => (
+            <article className={styles['news-list-item']} key={newsItem.ID}>
+              <time
+                className={styles['posted-date']}
+                data-prefix="Published:"
+                dateTime={formatDateTime(newsItem.PostedDate)}
+              >
+                {formatDate(newsItem.PostedDate)}
                 {newsItem.Updates && (
                   <Pill type="updated" className={styles['status-pill']}>
-                    Updated
+                    Update
                   </Pill>
                 )}
-              </div>
-              <div className={styles['title']}>
+              </time>
+              <h3 className={styles['title']}>
                 <a
                   href={`/news/user-updates/${newsItem.ID}`}
                   target="_blank"
                   rel="noopener noreferrer"
                 >
-                  {newsItem.WebTitle}
+                  {newsItem.WebTitle.trim()}
                 </a>
-              </div>
-              <div className={styles['body']}>{newsItem.Content}</div>
-            </li>
+              </h3>
+              <p className={styles['body']}>{newsItem.Content}</p>
+            </article>
           ))}
-      </ul>
+      </div>
     </SectionTableWrapper>
   );
 };