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>
-      <ul className={styles.performerList}>
+
-        <li>Rauhatäti</li>
+      <button
-        <li>Otso Helasvuo</li>
+        className={styles.programPerformersTitleToggle}
-        <li>Katariina Vuorinen</li>
+        onClick={() => toggleDayDesc('thu')}
-        <li>Rosanna Fellman</li>
+      >
-      </ul>
+        <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>
-      <ul className={styles.performerList}>
+
-        <li>Ilmi Lupiini</li>
+      <button
-        <li>Kasper Salonen</li>
+        className={styles.programPerformersTitleToggle}
-        <li>Juha Kulmala + Positroninen runo-orkesteri</li>
+        onClick={() => toggleDayDesc('fri')}
-      </ul>
+      >
+        <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,65 +135,91 @@ const Program = () => {
         Sinervon talo, Sauniementie 5, Teersalo
       </span>
       <h3 className={styles.timeSpan}>14:00 - 20:00</h3>
-      <ul className={styles.performerList}>
+
-        <li className={styles.performerWithTime}>
+      <button
-          <span className={styles.programTime}>14:00</span>
+        className={styles.programPerformersTitleToggle}
-          <span className={styles.programPerformer}>Kinnunen&Kinnunen</span>
+        onClick={() => toggleDayDesc('sat')}
-        </li>
+      >
-        <li className={styles.performerWithTime}>
+        <span className={styles.programPerformersTitle}>Esiintyjät</span>
-          <span className={styles.programTime}>14:30</span>
+        <span className={shared.openingChevron}>
-          <span className={styles.programPerformer}>Katja Meriluoto</span>
+          {dayToggles.sat ? (
-        </li>
+            <BiChevronDown size='2.5rem' />
-        <li className={styles.performerWithTime}>
+          ) : (
-          <span className={styles.programTime}>14:50</span>
+            <BiChevronLeft size='2.5rem' />
-          <span className={styles.programPerformer}>Marianna Kurtto</span>
+          )}
-        </li>
+        </span>
-        <li className={styles.performerWithTime}>
+      </button>
-          <span className={styles.programTime}>15:10</span>
+
-          <span className={styles.programPerformer}>
+      <CSSTransition
-            Esa Hirvonen & Masi Hukari
+        in={dayToggles.thu}
-          </span>
+        timeout={1000}
-        </li>
+        classNames='fadeTransition'
-        <li className={styles.programBreak}>Tauko</li>
+      >
-        <li className={styles.performerWithTime}>
+        {dayToggles.sat ? (
-          <span className={styles.programTime}>16:00</span>
+          <ul className={styles.performerList}>
-          <span className={styles.programPerformer}>Veera Sylvius</span>
+            <li className={styles.performerWithTime}>
-        </li>
+              <span className={styles.programTime}>14:00</span>
-        <li className={styles.performerWithTime}>
+              <span className={styles.programPerformer}>Kinnunen&Kinnunen</span>
-          <span className={styles.programTime}>16:20</span>
+            </li>
-          <span className={styles.programPerformer}>Suvi Valli</span>
+            <li className={styles.performerWithTime}>
-        </li>
+              <span className={styles.programTime}>14:30</span>
-        <li className={styles.performerWithTime}>
+              <span className={styles.programPerformer}>Katja Meriluoto</span>
-          <span className={styles.programTime}>16:40</span>
+            </li>
-          <span className={styles.programPerformer}>
+            <li className={styles.performerWithTime}>
-            Sergio Augusto Sánchez
+              <span className={styles.programTime}>14:50</span>
-          </span>
+              <span className={styles.programPerformer}>Marianna Kurtto</span>
-        </li>
+            </li>
-        <li className={styles.performerWithTime}>
+            <li className={styles.performerWithTime}>
-          <span className={styles.programTime}>17:00</span>
+              <span className={styles.programTime}>15:10</span>
-          <span className={styles.programPerformer}>Blues Ones</span>
+              <span className={styles.programPerformer}>
-        </li>
+                Esa Hirvonen & Masi Hukari
-        <li className={styles.programBreak}>Tauko</li>
+              </span>
-        <li className={styles.performerWithTime}>
+            </li>
-          <span className={styles.programTime}>18:00</span>
+            <li className={styles.programBreak}>Tauko</li>
-          <span className={styles.programPerformer}>Sirpa Kyyrönen</span>
+            <li className={styles.performerWithTime}>
-        </li>
+              <span className={styles.programTime}>16:00</span>
-        <li className={styles.performerWithTime}>
+              <span className={styles.programPerformer}>Veera Sylvius</span>
-          <span className={styles.programTime}>18:20</span>
+            </li>
-          <span className={styles.programPerformer}>Tomi Kontio</span>
+            <li className={styles.performerWithTime}>
-        </li>
+              <span className={styles.programTime}>16:20</span>
-        <li className={styles.performerWithTime}>
+              <span className={styles.programPerformer}>Suvi Valli</span>
-          <span className={styles.programTime}>18:40</span>
+            </li>
-          <span className={styles.programPerformer}>
+            <li className={styles.performerWithTime}>
-            Katariina Vuorinen & Kaisa Mäensivu
+              <span className={styles.programTime}>16:40</span>
-          </span>
+              <span className={styles.programPerformer}>
-        </li>
+                Sergio Augusto Sánchez
-        <li className={styles.programBreak}>Tauko</li>
+              </span>
-        <li className={styles.performerWithTime}>
+            </li>
-          <span className={styles.programTime}>19:30</span>
+            <li className={styles.performerWithTime}>
-          <span className={styles.programPerformer}>Signe</span>
+              <span className={styles.programTime}>17:00</span>
-        </li>
+              <span className={styles.programPerformer}>Blues Ones</span>
-      </ul>
+            </li>
+            <li className={styles.programBreak}>Tauko</li>
+            <li className={styles.performerWithTime}>
+              <span className={styles.programTime}>18:00</span>
+              <span className={styles.programPerformer}>Sirpa Kyyrönen</span>
+            </li>
+            <li className={styles.performerWithTime}>
+              <span className={styles.programTime}>18:20</span>
+              <span className={styles.programPerformer}>Tomi Kontio</span>
+            </li>
+            <li className={styles.performerWithTime}>
+              <span className={styles.programTime}>18:40</span>
+              <span className={styles.programPerformer}>
+                Katariina Vuorinen & Kaisa Mäensivu
+              </span>
+            </li>
+            <li className={styles.programBreak}>Tauko</li>
+            <li className={styles.performerWithTime}>
+              <span className={styles.programTime}>19:30</span>
+              <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%;
+}