22 refactor cards (#27)

* card refactor and styles

* topic bug and cleanup

* typescript

* typo

* new logo tweaks

__tests__/index.test.js

@@ -22,10 +22,12 @@ describe('Layout component', () => {
 
 // Mock the fetchInterviews function from your data fetching module
 jest.mock('../src/data/fetchInterviewData', () => ({
-  fetchInterviews: jest.fn(() => Promise.resolve({
-    interviewsByTopic: {
-      'Topic1': [{ id: 1, name: 'Interview 1' }],
-      'Topic2': [{ id: 2, name: 'Interview 2' }]
-    }
-  }))
+  fetchInterviews: jest.fn(() =>
+    Promise.resolve({
+      interviewsByTopic: {
+        Topic1: [{ id: 1, name: 'Interview 1' }],
+        Topic2: [{ id: 2, name: 'Interview 2' }],
+      },
+    })
+  ),
 }));

src/app/components/NavigationBar.tsx

@@ -10,12 +10,10 @@ export default function NavigationBar() {
     >
       <div className="container">
         <Link href="/" className="navbar-brand d-flex align-items-center">
-          <img
-            src="/lit_logo_light.png"
-            alt="Logo"
-            className="logo-image me-2"
-          />
-          <span className="logo-text">Court Forms Online</span>
+          <img src="/logo-short.png" alt="Logo" className="logo-image me-2" />
+          <span id="nav-header-text" className="logo-text">
+            Court Forms Online
+          </span>
         </Link>
         <button
           className="navbar-toggler"

src/app/components/ShowAllToggle.tsx

@@ -0,0 +1,31 @@
+'use client';
+
+import { useState } from 'react';
+
+const ShowAllToggle = () => {
+  const [showAll, setShowAll] = useState(false);
+
+  const handleToggle = () => {
+    const topics = document.querySelectorAll(
+      '.topic-card-parent'
+    ) as NodeListOf<HTMLElement>;
+    setShowAll(!showAll);
+    topics.forEach((topic, index) => {
+      if (index > 8) {
+        if (topic.style.display === 'none' || !topic.style.display) {
+          topic.style.display = 'block';
+        } else {
+          topic.style.display = 'none';
+        }
+      }
+    });
+  };
+
+  return (
+    <button className={'show-all-toggle'} onClick={handleToggle}>
+      {showAll ? 'Hide extra categories' : 'Show all categories'}
+    </button>
+  );
+};
+
+export default ShowAllToggle;

src/app/components/TopicCard.tsx

@@ -1,12 +1,17 @@
+'use client';
 import Link from 'next/link';
+import { useState } from 'react';
 
 interface TopicCardProps {
   topic: {
     name: string;
     long_name: string;
     icon: string;
+    codes: any[];
   };
   interviews: any[];
+  index: number;
+  serverUrl: string;
 }
 
 interface IconProps {
@@ -15,22 +20,47 @@ interface IconProps {
   style?: React.CSSProperties;
 }
 
-const FontAwesomeIcon = ({ iconName, className = '' }: IconProps) => {
-  return <i className={`fas fa-${iconName} ${className}`}></i>;
+const FontAwesomeIcon = ({
+  iconName,
+  className = '',
+  style = {},
+}: IconProps) => {
+  return <i className={`fas fa-${iconName} ${className}`} style={style}></i>;
 };
 
-const TopicCard = ({ topic, interviews }: TopicCardProps) => {
-  // Display the first 3 interviews, and show a final tag with how many remaining interviews are not shown
-  const displayInterviews = interviews.slice(0, 3);
-  const extraCount = interviews.length > 3 ? interviews.length - 3 : 0;
+const TopicCard = ({ topic, interviews, index, serverUrl }: TopicCardProps) => {
+  const [isExpanded, setIsExpanded] = useState(false);
+  const visibilityClass = index > 8 ? 'hidden' : '';
+
+  const displayInterviews = isExpanded
+    ? interviews.slice(0, Math.min(10, interviews.length))
+    : interviews.slice(0, 3);
+  const remainingCount = interviews.length > 10 ? interviews.length - 10 : 0;
+
+  const toggleExpand = (
+    event: React.MouseEvent<HTMLDivElement, MouseEvent>
+  ) => {
+    event.preventDefault();
+    setIsExpanded(!isExpanded);
+  };
+
+  const handleNavigation = (url) => {
+    window.location.href = url;
+  };
 
   return (
-    <div className="col-lg-4">
+    <div
+      className={`col-lg-4 topic-card-parent ${visibilityClass}`}
+      key={topic.codes[0]}
+    >
       <Link
         href={`/${topic.name.toLowerCase()}`}
         className="text-decoration-none text-dark"
       >
-        <div className="card m-1 topic-card h-100">
+        <div
+          className="card topic-card m-1 h-100"
+          onClick={(e) => e.preventDefault()}
+        >
           <div className="card-header d-flex align-items-center">
             <div
               style={{ minWidth: '40px', minHeight: '40px' }}
@@ -41,12 +71,33 @@ const TopicCard = ({ topic, interviews }: TopicCardProps) => {
             <h5 className="card-title ms-3">{topic.long_name}</h5>
           </div>
           <div className="card-body">
-            {displayInterviews.map((interview, index) => (
-              <span key={index} className="form-tag">
-                {interview.metadata.title}
-              </span>
-            ))}
-            {extraCount > 0 && <span className="form-tag">+{extraCount}</span>}
+            <div
+              className="tag-container"
+              style={{ maxHeight: isExpanded ? '800px' : '200px' }}
+            >
+              {displayInterviews.map((interview, index) => (
+                <span
+                  key={index}
+                  className="form-tag text-decoration-none"
+                  onClick={(e) => {
+                    e.preventDefault();
+                    handleNavigation(serverUrl + interview.link);
+                  }}
+                >
+                  {interview.metadata.title}
+                </span>
+              ))}
+            </div>
+            {interviews.length > 3 && (
+              <div className="show-container">
+                <div className="show-more" onClick={toggleExpand}>
+                  {isExpanded ? 'Show Less' : 'Show More'}
+                  <i
+                    className={`fas fa-chevron-${isExpanded ? 'up' : 'down'}`}
+                  ></i>
+                </div>
+              </div>
+            )}
           </div>
         </div>
       </Link>

src/app/globals.css

@@ -1,9 +1,9 @@
 /*********************** Suffolk-added styles **********************/
 
 #hero-section {
-  background-color: #c3ecf3;
-  padding-top: 10em;
-  padding-bottom: 10em;
+  background-color: #fbfafe;
+  padding-top: 7em;
+  padding-bottom: 7em;
 }
 
 #hero-section h1 {
@@ -16,48 +16,66 @@
 
 #how-it-works-section {
   padding: 5em 0 5em 0;
+  background-color: #3e7d9a54;
 }
 
-/*footer {
-  background-color: #3e7d9a;
-}*/
+footer {
+  background-color: #fbfafe;
+}
+
+.card-container {
+  margin-bottom: 1.5em;
+  padding-top: 1.5em;
+}
 
 #topics {
-  background-color: #c3ecf3;
+  background-color: #fbfafe;
   padding: 1em;
   padding-top: 5em;
   padding-bottom: 2em;
 }
 
 #topics .card-header {
   background-color: #fff;
+  margin-bottom: 0;
 }
 
 #topics .card-body {
   background-color: #fff;
+  display: flex;
+  flex-wrap: wrap;
+  align-items: flex-start;
+  gap: 10px;
+  padding: 1em;
 }
 
 #topics .card-header {
+  padding: 1em;
   border-bottom: none;
 }
 
+.tag-container {
+  overflow: hidden;
+  transition: max-height 0.4s ease-in-out;
+}
+
 .form-tag {
   transition: all 0.05s ease-in-out;
   padding: 10px 10px;
-  border-radius: 5px;
-  background-color: #c3ecf3;
+  border-radius: 7px;
+  background-color: #3e7d9a2d;
   color: black;
   display: inline-block;
   margin-right: 10px;
   font-size: 14px;
   margin-bottom: 10px;
   border-style: solid;
-  border-width: 1px;
-  border-color: #c3ecf3;
+  border-color: #cbcdd4;
+  box-shadow: rgba(119, 119, 119, 0.16) 0px 1px 4px;
 }
 
 .form-tag:hover {
-  border-color: rgba(1, 65, 255, 0.3);
+  border-color: rgb(62, 125, 154);
 }
 
 .topic-card {
@@ -70,21 +88,73 @@
 }
 
 .topic-card .fa-icon {
-  color: #c69931;
+  font-size: 1.3em;
+  color: #fdb714;
 }
 
 .topic-card .icon-container {
-  background-color: #2e4d82;
+  background-color: #162a47;
   padding: 0.2em;
 }
 
 .topic-card .card-title {
-  font-size: 1em;
+  font-size: 1.3em;
+  color: #002e60;
+  margin-bottom: 0px;
+}
+
+.hidden {
+  display: none;
+}
+
+.visible {
+  display: block;
+}
+
+.show-more {
+  cursor: pointer;
+  color: #162a47;
+  font-size: 0.8em;
+  display: flex;
+  align-items: center;
+  border: none;
+  margin-top: 10px;
+  align-self: flex-end;
+  padding: 0.5em;
+}
+
+.show-all-toggle {
+  cursor: pointer;
+  font-size: 1.2em;
+  border: none;
+  background: none;
+  margin-top: 10px;
+}
+
+.show-more i {
+  margin-left: 5px;
+}
+
+#nav-header-text {
   color: #002e60;
+  align-self: end;
+  margin-bottom: -5px;
+}
+
+.show-container {
+  display: flex;
+  flex-direction: row;
+  margin-left: auto;
 }
 
 .courtformsonline-navbar {
-  background-color: #002e60;
+  background: rgb(2, 0, 36);
+  background: linear-gradient(
+    90deg,
+    #fbfafe 30%,
+    rgba(0, 28, 96, 1) 30%,
+    rgba(0, 46, 96, 1) 30%
+  );
   height: 70px;
 }
 
@@ -101,6 +171,10 @@
   max-height: 70px;
 }
 
+.show-all-categories {
+  margin-top: 10em;
+}
+
 @font-face {
   font-family: 'Inter';
   src: url('/fonts/Inter-Bold.ttf') format('truetype');
@@ -129,3 +203,15 @@ h5 {
 body {
   font-family: 'Inter';
 }
+
+@media (max-width: 990px) {
+  .courtformsonline-navbar {
+    background: rgb(2, 0, 36);
+    background: linear-gradient(
+      90deg,
+      #fbfafe 75%,
+      rgba(0, 28, 96, 1) 75%,
+      rgba(0, 46, 96, 1) 75%
+    );
+  }
+}