Add closable performer lists

pages/program.tsx

@@ -2,6 +2,8 @@ import React, { useState } from 'react';
 import { FiExternalLink } from 'react-icons/fi';
 import shared from '../styles/Shared.module.scss';
 import styles from '../styles/Program.module.scss';
+import { CSSTransition } from 'react-transition-group';
+import { BiChevronDown, BiChevronLeft } from 'react-icons/bi';
 
 interface DayToggles {
   wed: boolean;
@@ -43,12 +45,37 @@ const Program = () => {
         Café Laituri, Voiponlahdentie 37, Palva
       </span>
       <h3 className={styles.timeSpan}>17:00 - 19:00</h3>
+
+      <button
+        className={styles.programPerformersTitleToggle}
+        onClick={() => toggleDayDesc('thu')}
+      >
+        <span className={styles.programPerformersTitle}>Esiintyjät</span>
+        <span className={shared.openingChevron}>
+          {dayToggles.thu ? (
+            <BiChevronDown size='2.5rem' />
+          ) : (
+            <BiChevronLeft size='2.5rem' />
+          )}
+        </span>
+      </button>
+      <CSSTransition
+        in={dayToggles.thu}
+        timeout={1000}
+        classNames='fadeTransition'
+      >
+        {dayToggles.thu ? (
           <ul className={styles.performerList}>
             <li>Rauhatäti</li>
             <li>Otso Helasvuo</li>
             <li>Katariina Vuorinen</li>
             <li>Rosanna Fellman</li>
           </ul>
+        ) : (
+          <span />
+        )}
+      </CSSTransition>
+      <hr className={styles.programHr} />
 
       {/* Perjantai */}
       <h2 className={styles.programTitle}>
@@ -63,11 +90,37 @@ const Program = () => {
         Saaristohotelli Vaihela, Velkuanmaantie 168, Velkuanmaa
       </span>
       <h3 className={styles.timeSpan}>18:00 - 21:00</h3>
+
+      <button
+        className={styles.programPerformersTitleToggle}
+        onClick={() => toggleDayDesc('fri')}
+      >
+        <span className={styles.programPerformersTitle}>Esiintyjät</span>
+        <span className={shared.openingChevron}>
+          {dayToggles.fri ? (
+            <BiChevronDown size='2.5rem' />
+          ) : (
+            <BiChevronLeft size='2.5rem' />
+          )}
+        </span>
+      </button>
+
+      <CSSTransition
+        in={dayToggles.thu}
+        timeout={1000}
+        classNames='fadeTransition'
+      >
+        {dayToggles.fri ? (
           <ul className={styles.performerList}>
             <li>Ilmi Lupiini</li>
             <li>Kasper Salonen</li>
             <li>Juha Kulmala + Positroninen runo-orkesteri</li>
           </ul>
+        ) : (
+          <span />
+        )}
+      </CSSTransition>
+      <hr className={styles.programHr} />
 
       {/* Lauantai */}
       <h2 className={styles.programTitle}>
@@ -82,6 +135,27 @@ const Program = () => {
         Sinervon talo, Sauniementie 5, Teersalo
       </span>
       <h3 className={styles.timeSpan}>14:00 - 20:00</h3>
+
+      <button
+        className={styles.programPerformersTitleToggle}
+        onClick={() => toggleDayDesc('sat')}
+      >
+        <span className={styles.programPerformersTitle}>Esiintyjät</span>
+        <span className={shared.openingChevron}>
+          {dayToggles.sat ? (
+            <BiChevronDown size='2.5rem' />
+          ) : (
+            <BiChevronLeft size='2.5rem' />
+          )}
+        </span>
+      </button>
+
+      <CSSTransition
+        in={dayToggles.thu}
+        timeout={1000}
+        classNames='fadeTransition'
+      >
+        {dayToggles.sat ? (
           <ul className={styles.performerList}>
             <li className={styles.performerWithTime}>
               <span className={styles.programTime}>14:00</span>
@@ -141,6 +215,11 @@ const Program = () => {
               <span className={styles.programPerformer}>Signe</span>
             </li>
           </ul>
+        ) : (
+          <span />
+        )}
+      </CSSTransition>
+      <hr className={styles.programHr} />
     </section>
   );
 };

styles/Program.module.scss

@@ -58,6 +58,7 @@
   line-height: 1.5rem;
   max-width: 20rem;
   padding-left: 0;
+  margin-top: 0;
 
   li {
     margin-top: 1em;
@@ -79,6 +80,7 @@
   justify-content: center !important;
   margin-top: 1rem;
   margin-bottom: 1rem;
+  text-decoration: underline;
 }
 
 .programTime {
@@ -89,3 +91,33 @@
   margin-top: 1rem;
   margin-bottom: 1rem;
 }
+
+.programPerformersTitleToggle {
+  display: flex;
+  cursor: pointer;
+  background: none;
+  border: none;
+  font-family: 'Crimson Text', sans-serif;
+  color: #2f273e;
+  font-weight: bold;
+}
+
+.programPerformersTitleToggle:hover {
+  svg {
+    color: rgb(117, 117, 117);
+    transition: color 0.3s;
+  }
+
+  color: rgb(117, 117, 117);
+  transition: color 0.3s;
+}
+
+.programPerformersTitle {
+  font-size: 2rem;
+  padding-left: 1rem;
+}
+
+.programHr {
+  border: 0.1rem solid #d5caf29d;
+  width: 43%;
+}