OCW Stories & Quotes New Design Implementation (#1460)

* Refactor layout: Adjust flex properties for responsiveness

* Improve homepage

* Add View All Stories Button

* Add line-wise truncation for consistent layout

* Remove pre-existing bootstrap col-X properties and use flex instead

* Revamp OCW Stories mobile responsiveness

* Add OCW Stories Banner

* Single Story Page and Stories List

* Work on homepage and single story page

* Add quotesUI

* Reusable Dialog Component

* Dynamically load Modal via Webpack

* Adjust everything

* Add Eslint disable next line

* Work on homepage margins and paddings for all screen sizes

* Single page layout, image alignment, other adjustments

* Work on overall adjustments

* Stories single page paddings

* Add mobile-sm breakpoint

* Fix more stories padding in single page

* Use correct heading tags for accessibility

* Fix line-height of share-stories-banner

* Work on minor fixes

* Add Share your story link

* Make card compact

* Fix left border height inside Modal

* Use leadquote

base-theme/assets/css/_breakpoints.scss

@@ -15,6 +15,10 @@
     @media (max-width: 800px) {
       @content;
     }
+  } @else if $name == mobile-sm {
+    @media (max-width: 767px) {
+      @content;
+    }
   } @else if $name == phone {
     @media (max-width: 580px) {
       @content;

base-theme/assets/css/variables.scss

@@ -29,14 +29,14 @@ $dark-gray: #3d3d3d;
 
 // home page
 $max-home-width: 1280px;
-
 $search-gray: rgba(0, 0, 0, 0.85);
 $featured-facet-blue: #385d70;
 $transparency-gray: rgba(246, 247, 249, 0.77);
 $transparency-gray-light: rgba(246, 246, 246, 0.71);
 $mobile-menu-btn-color: #115f83;
 $course-info-btn-color: #e4e4e4;
 $course-info-btn-hover-color: #c0c0c0;
+$border-gray-testimonial: #dfe5ec;
 
 // course pages
 $course-content-link-unclicked: #115f83;

base-theme/assets/index.ts

@@ -9,6 +9,7 @@ import PDFObject from "pdfobject"
 import "./js/polyfill"
 import "video.js/dist/video-js.css"
 import { initExternalLinkModal } from "./js/external_link_modal"
+import { initQuotesModalHandler } from "./quote_card_modal_handler"
 import { initVideoDownloadPopup } from "./js/video_download_popup"
 
 export interface OCWWindow extends Window {
@@ -18,6 +19,7 @@ export interface OCWWindow extends Window {
   Sentry: typeof Sentry
   PDFObject: typeof PDFObject
   initVideoJS: () => void
+  initModalHandler: () => void
 }
 
 declare let window: OCWWindow
@@ -41,4 +43,5 @@ window.initVideoJS = () => {
 $(function() {
   window.Sentry = initSentry()
   initExternalLinkModal()
+  initQuotesModalHandler()
 })

base-theme/assets/quote_card_modal_handler.ts

@@ -0,0 +1,20 @@
+export function initQuotesModalHandler() {
+  const modalElement = $(".js-quote-modal")
+  $(".js-modal-trigger").on("click", event => {
+    event.preventDefault()
+
+    const target = $(event.currentTarget)
+    const modalContentId = target.data("modal-content-id")
+    const contentDiv = $(`#${modalContentId}`)
+
+    if (contentDiv.length) {
+      const content = contentDiv.html()
+      modalElement.find(".modal-body.quote-modal-body").html(content)
+      // eslint-disable-next-line @typescript-eslint/ban-ts-comment
+      // @ts-ignore
+      modalElement.modal("show")
+    } else {
+      console.error("Modal content not found for ID:", modalContentId)
+    }
+  })
+}

www/assets/css/carousel.scss

@@ -19,7 +19,9 @@
   }
 
   .carousel-header {
-    max-width: $max-home-width;
+    &:not(.stories-carousel-header) {
+      max-width: $max-home-width;
+    }
     margin: 0;
     align-items: center;
 
@@ -64,8 +66,7 @@
   }
 
   .item-wrapper {
-    padding: 0 10px;
-
+    padding: 0 8px;
     &:first-child {
       padding-left: 0;
     }
@@ -74,4 +75,132 @@
       padding-right: 0;
     }
   }
+  .item-wrapper.testimonial-link {
+    border-radius: 10px;
+    border: 1px solid $border-gray-testimonial;
+    background: #fff;
+    box-shadow: 0px 2px 10px 0px rgba(120, 169, 197, 0.15);
+
+    // 801px - 991px (tablet)
+    @include breakpoint(tablet) {
+      max-width: 470.5px;
+    }
+    // 768px - 800px (mobile)
+    @include breakpoint(mobile) {
+      max-width: 335px;
+    }
+    // <= 767px (mobile-sm)
+    @include breakpoint(mobile-sm) {
+      max-width: 650px;
+    }
+  }
+}
+.item-wrapper.testimonial-link:hover {
+  border: 1px solid #a31f34 !important;
+}
+.item-wrapper.testimonial-link {
+  padding: 0 10px;
+  border-radius: 10px;
+  border: 1px solid $border-gray-testimonial;
+  background: #fff;
+  box-shadow: 0px 2px 10px 0px rgba(120, 169, 197, 0.15);
+
+  &:first-child {
+    padding-left: 0;
+  }
+
+  &:last-child {
+    padding-right: 0;
+  }
+}
+
+.carousel-control-prev,
+.carousel-control-next {
+  width: auto;
+  background: none;
+  opacity: 1;
+}
+
+.carousel-control-prev .material-icons,
+.carousel-control-next .material-icons {
+  font-size: 3.75rem;
+  color: inherit;
+}
+
+.carousel-control-prev-icon,
+.carousel-control-next-icon {
+  display: none;
+}
+
+.carousel-control-prev {
+  left: auto;
+}
+
+.carousel-control-next {
+  right: auto;
+}
+
+.carousel-control-prev,
+.carousel-control-next {
+  top: 50%;
+  transform: translateY(-50%);
+}
+
+.hidden-modal-content {
+  display: none;
+}
+
+.modal-dialog {
+  max-width: 600px;
+  margin: 1rem auto;
+}
+
+.modal-body {
+  padding: 10px;
+}
+
+.home-testimonials {
+  .carousel {
+    &.slide {
+      max-width: 1447px !important;
+    }
+
+    .carousel-header {
+      margin-bottom: 40px;
+      @include media-breakpoint-down(xs) {
+        margin-bottom: 20px;
+      }
+      h2 {
+        text-align: center;
+        font-size: 32px;
+        font-weight: 700;
+        line-height: 25px;
+        margin-bottom: 20px;
+        @include media-breakpoint-down(xs) {
+          line-height: 40px;
+        }
+      }
+      p {
+        font-size: 18px;
+        font-weight: 400;
+        line-height: 25px;
+        margin: 0;
+      }
+
+      p {
+        text-align: center;
+      }
+    }
+
+    .carousel-section {
+      .prev,
+      .next {
+        font-size: 3.75rem !important;
+      }
+    }
+
+    .carousel-inner {
+      padding: 0;
+    }
+  }
 }

www/assets/css/home.scss

@@ -362,40 +362,6 @@ $searchbox-height: 50px;
   }
 }
 
-.home-testimonials {
-  a.testimonial-link {
-    text-decoration: none;
-  }
-
-  .testimonial {
-    height: 280px;
-    width: 280px;
-    color: white;
-    background-size: cover;
-
-    .name {
-      font-size: $font-lg;
-    }
-
-    .on-hover {
-      display: none;
-    }
-
-    .name-occ {
-      .occupation-location {
-        font-size: $font-sm;
-        text-overflow: ellipsis;
-        overflow: hidden;
-      }
-
-      .name,
-      .occupation-location {
-        white-space: nowrap;
-      }
-    }
-  }
-}
-
 .ocw-news {
   .item {
     width: 100%;