Adding components.

web/modules/custom/dc_components/components/ping-pong/ping-pong.component.yml

@@ -0,0 +1,35 @@
+name: Ping Pong
+props:
+  type: object
+  properties:
+    mediaAlign:
+      type: string
+      title: Media Alignment
+      description: 'Which side to put media on.'
+    layout:
+      type: string
+      title: Layout
+      description: 'The layout widths'
+      enum: ['50-50', '33-66', '66-33', '25-75', '75-25']
+    bgColor:
+      type: string
+      title: Color
+      description: 'The background color.'
+slots:
+  headline:
+    title: Headline
+    description: This is the headline for the text block.
+  body:
+    title: Body
+    description: This is the body for the text block.
+  cta:
+    title: CTA
+    description: The CTA link.
+  media:
+    title: Media
+    description: The media item(s).
+
+libraryOverrides:
+  dependencies:
+    - core/drupal
+    - core/once

web/modules/custom/dc_components/components/ping-pong/ping-pong.css

@@ -0,0 +1,95 @@
+.ping-pong-wrapper {
+  max-height: 600px;
+  display: flex;
+  width: 100%;
+}
+
+.ping-pong {
+  display: flex;
+  flex-wrap: wrap;
+}
+
+.ping-pong__info {
+  justify-content: center;
+  align-items: center;
+  display: flex;
+  flex-wrap: wrap;
+  flex-direction: row;
+}
+
+.ping-pong__info-inner {
+  width: 65%;
+  margin: auto;
+}
+
+@media screen and (max-width: 767px) {
+  .ping-pong__info-inner {
+    width: 100%;
+    padding: 30px;
+  }
+}
+
+.ping-pong__info h2 {
+  margin: 0;
+}
+
+.ping-pong.right {
+  flex-direction: row-reverse;
+}
+
+.ping-pong > div {
+  flex: 1;
+}
+
+@media screen and (max-width: 767px) {
+  .ping-pong > div {
+    flex: 1 0 100%;
+  }
+}
+
+.field--name-field-ping-pong-cta a {
+  background: rgba(255, 255, 255, 0.66);
+  padding: 10px 20px;
+  border-radius: 10px;
+  transition: background .5s ease;
+  cursor: pointer;
+}
+
+.field--name-field-ping-pong-cta a:hover {
+  background: white;
+}
+
+/** slider styles */
+.ping-pong .slide img {
+  width: 100%;
+  object-fit: cover;
+  display: block;
+  height: 400px;
+}
+
+.ping-pong .slide.active img {
+  display: block;
+  opacity: 1;
+  visibility: visible;
+  transition: all .5s ease-in-out;
+}
+
+.ping-pong .slide.hide img {
+  opacity: 0;
+  visibility: hidden;
+  transition: all .5s ease-in-out;
+}
+
+.ping-pong .slide img {
+  display: none;
+  visibility: hidden;
+  opacity: 0;
+  transition: all .5s ease-in-out;
+}
+
+.ping-pong ul.slides {
+  list-style-type: none;
+  padding: 0;
+  margin: 0;
+  max-height: 100%;
+}

web/modules/custom/dc_components/components/ping-pong/ping-pong.js

@@ -0,0 +1,38 @@
+(function (Drupal, once) {
+  Drupal.behaviors.pingPongSlider = {
+
+    attach: function (context, settings) {
+      let sliders = once('pingPongSlider', '.slider', context);
+      sliders.forEach((slider) =>  {
+        // get the slides
+        let slides = slider.querySelectorAll('.slide');
+        slides[0].classList.add("active");
+        if (slides.length <= 1) {
+          return;
+        }
+        changeSlide(slider);
+      });
+
+      function changeSlide(sliderDiv, loop = 1) {
+        setTimeout(() => {
+          let slideCount = sliderDiv.querySelectorAll('.slide').length;
+          let activeSlide = sliderDiv.querySelector('.slide.active');
+          let nextSlide = activeSlide.nextElementSibling;
+          if (loop == slideCount) {
+            nextSlide = sliderDiv.querySelectorAll('.slide')[0];
+            return;
+            // get the first slide
+          }
+          else {
+            loop++;
+            activeSlide.classList.toggle('active');
+            nextSlide.classList.toggle('active');
+            changeSlide(sliderDiv, loop);
+          }
+        }, 10000);
+      }
+    }
+
+  };
+})(Drupal, once);
+

web/modules/custom/dc_components/components/ping-pong/ping-pong.twig

@@ -0,0 +1,40 @@
+{#
+ * Component variables
+ *
+ * props:
+ *  layout
+ *  media_alignment
+ *  background_color
+ *
+ * slots
+ *  headline
+ *  body
+ *  cta
+ *  media
+ *
+ #}
+{% set classes = [
+  'ping-pong',
+  mediaAlign|clean_class
+] %}
+<div {{ attributes.addClass(classes) }} style="background-color: {{ bgColor }}">
+  {{ title_prefix }}
+  {{ title_suffix }}
+  <div class="ping-pong__media">
+    {% block media %}{% endblock %}
+  </div>
+  <div class="ping-pong__info">
+    <div class="ping-pong__info-inner">
+      <div class="ping-pong__info-headline">
+        {% block headline %}{% endblock %}
+      </div>
+      <div class="ping-pong__info-text">
+        {% block body %}{% endblock %}
+      </div>
+      <div class="ping-pong__info-cta">
+        {% block cta %}{% endblock %}
+      </div>
+    </div>
+  </div>
+</div>
+