Move Testimonial to separate content type and add carousel (#83)

* Move Testimonial to separate content type and add carousel

* Fix check

* Rebuild

* Finish carousel

* Testing new option

* Add guide

* Fix observer

* Remove unused css

* Remove unused icons

* Fix some css

* Remove unused import

* Fix transitions

* Guide fixed height from bottom

* Fix button transforms

* Don't show 2 testimonials at once

* Remove unncessary state var

* Simply hasnext and hasprev logic

* Make some changes to styles and create dialog component

* Fix build

* Fix button positions

* Re-center guide

* Simplify CSS a lot

* Unused import

* Reposition a few things

* Make carousel prev/next buttons place better

* Add new icons with iconify

* Fix icon fills

* Remove unused export

* Simplify testimonial and dialog

* Remove unncessary section color

* Bump padding on nonprofits page testimonial

* Close Dialog on outside click and make carousel more blue

* Reorder styles

Author: AndrewLester

src/lib/components/Dialog.svelte

@@ -0,0 +1,86 @@
+<script lang="ts">
+  let dialog: HTMLDialogElement;
+
+  export function close() {
+    dialog.close();
+  }
+
+  export function open() {
+    dialog.showModal();
+  }
+</script>
+
+<!-- svelte-ignore a11y-click-events-have-key-events -->
+<dialog bind:this={dialog} on:click={close}>
+  <div class="content" on:click|stopPropagation>
+    <button class="close" on:click={close}>✕</button>
+    <slot />
+  </div>
+</dialog>
+
+<style>
+  dialog {
+    width: 70ch;
+    max-width: 95vw;
+    max-height: 85vh;
+    font-size: 1rem;
+    border: 1px solid black;
+    border-radius: 10px;
+    padding: 0;
+    opacity: 0;
+    transform: translateY(10%);
+    overscroll-behavior: contain;
+    box-sizing: border-box;
+  }
+
+  dialog[open] {
+    animation: fade-in 0.4s both;
+  }
+
+  @media (prefers-reduced-motion: no-preference) {
+    dialog[open] {
+      animation: slide-in 0.4s both, fade-in 0.4s both;
+    }
+  }
+
+  @keyframes slide-in {
+    to {
+      transform: translateY(0);
+    }
+  }
+
+  dialog::backdrop {
+    background-color: rgba(0, 0, 0, 0.75);
+    opacity: 0;
+    animation: fade-in 0.4s both;
+  }
+
+  @keyframes fade-in {
+    to {
+      opacity: 1;
+    }
+  }
+
+  .content {
+    padding: 2em;
+    padding-top: 4em;
+  }
+
+  .content > .close {
+    position: absolute;
+    top: 0.5em;
+    right: 0.5em;
+    font-size: 1.5em;
+    width: 2em;
+    appearance: none;
+    cursor: pointer;
+    background-color: white;
+    border-radius: 50%;
+    border: none;
+    aspect-ratio: 1;
+  }
+
+  .content > .close:hover {
+    background-color: var(--gray-lighter);
+  }
+</style>

src/lib/components/Icon.svelte

@@ -7,6 +7,8 @@
   import searchFill from "@iconify-icons/bx/search";
   import transfer_altFill from "@iconify-icons/bx/transfer-alt";
   import unlinkFill from "@iconify-icons/bx/unlink";
+  import left_arrow_altFill from "@iconify-icons/bx/left-arrow-alt";
+  import right_arrow_altFill from "@iconify-icons/bx/right-arrow-alt";
   import badge_dollarFill from "@iconify-icons/bxs/badge-dollar";
   import bookFill from "@iconify-icons/bxs/book";
   import bulbFill from "@iconify-icons/bxs/bulb";
@@ -62,6 +64,8 @@
     tree: { name: "tree", fill: treeFill },
     vector: { name: "vector", fill: vectorFill },
     volunteering: { name: "home-heart", fill: home_heartFill },
+    "left-arrow": { name: "left-arrow-alt", fill: left_arrow_altFill },
+    "right-arrow": { name: "right-arrow-alt", fill: right_arrow_altFill },
   } as const;
 
   for (const { name, fill } of Object.values(iconMap)) {

src/lib/components/Testimonial.svelte

@@ -1,14 +1,19 @@
 <script lang="ts">
   import { setImageHeight } from "$lib/utils/schema";
-  import Button from "./Button.svelte";
+  import Dialog from "./Dialog.svelte";
   import Row from "./Row.svelte";
 
   // title, content, and route (for button)
   export let quote: string;
   export let imageSrc: string | undefined = undefined;
   export let name: string;
   export let desc: string;
-  export let meetTheTeam = false;
+
+  let dialog: Dialog;
+
+  $: firstParagraph = quote.slice(0, quote.indexOf("</p>")) + "</p>";
+  $: needsReadMore = quote.length > firstParagraph.length;
+  $: text = firstParagraph.replace(/<\/?p>/gi, "");
 </script>
 
 <div class="wrap">
@@ -17,29 +22,46 @@
       <Row>
         <div class="left">
           <figure>
-            <blockquote>{quote}</blockquote>
+            <blockquote>
+              {@html text}{needsReadMore ? ".." : ""}
+
+              {#if needsReadMore}
+                <button class="readmore" on:click={dialog.open}>
+                  Read more
+                </button>
+              {/if}
+            </blockquote>
             <figcaption>
               {name}<br />
               <span class="desc">{desc}</span>
             </figcaption>
           </figure>
-          {#if meetTheTeam}
-            <Button type="primary" href="/about/team">Meet The Team</Button>
-          {/if}
         </div>
         <div class="right">
           <img src={setImageHeight(imageSrc, 400)} alt={name} />
         </div>
       </Row>
     {:else}
       <figure class="center">
-        <blockquote>{quote}</blockquote>
+        <blockquote>
+          {@html text}
+
+          {#if needsReadMore}
+            <button class="readmore" on:click={dialog.open}>Read more</button>
+          {/if}
+        </blockquote>
         <figcaption>
           {name}<br />
           <span class="desc">{desc}</span>
         </figcaption>
       </figure>
     {/if}
+
+    <Dialog bind:this={dialog}>
+      {@html quote}
+
+      <button class="readmore" on:click={dialog.close}>Read less</button>
+    </Dialog>
   </div>
 </div>
 
@@ -49,7 +71,7 @@
     display: flex;
     justify-content: center;
     align-items: center;
-    padding: 80px 0;
+    padding-block: 30px;
   }
 
   .testimonial {
@@ -103,6 +125,7 @@
     flex: auto !important;
     max-width: 12rem;
     overflow: hidden;
+    align-self: flex-start;
   }
 
   .right > img {
@@ -112,6 +135,17 @@
     border-radius: 50%;
   }
 
+  .readmore {
+    cursor: pointer;
+    color: var(--blue-light);
+    padding: 0;
+    font-size: 1rem;
+    background-color: transparent;
+    appearance: none;
+    border: none;
+    margin-left: auto;
+  }
+
   @media screen and (max-width: 900px) {
     .right {
       display: none;
@@ -126,7 +160,8 @@
     }
 
     .wrap {
-      padding: 40px 0;
+      padding-block: 0;
+      padding-bottom: 10px;
     }
   }
 </style>