Reorganize and rename components

src/index.html

@@ -460,7 +460,7 @@ <h1 class="text-subtitle text-white">JPL Design System Assets</h1>
       </h2>
       <section
         aria-label="Feature"
-        class="HeroFeature ThemeDark relative flex items-center overflow-hidden"
+        class="HeroMedium ThemeDark relative flex items-center overflow-hidden"
       >
         <div class="absolute inset-0 z-10 overflow-hidden bg-black">
           <picture>
@@ -531,7 +531,7 @@ <h1 class="text-subtitle text-white">JPL Design System Assets</h1>
                 href="#"
                 class="group text-subtitle text-theme-red can-hover:hover:text-theme-red-hover cursor-pointer inline-block"
               >
-                <span class="AnimationCaret py-3">
+                <span class="MixinAnimationCaret py-3">
                   <span>View</span>
                   <span
                     aria-hidden="true"
@@ -658,7 +658,7 @@ <h3 class="text-h4 lg:mt-2 mt-3 tracking-normal">Perseverance</h3>
       </h2>
 
       <nav
-        class="BaseCarouselCards w-full overflow-x-hidden -tiles"
+        class="MixinCarousel w-full overflow-x-hidden -tiles"
         aria-label="Base Carousel Cards"
       >
         <div class="BaseGrid container overflow-x-visible mx-auto">

src/js/vendors/_swiper.js

@@ -6,10 +6,16 @@
 import Swiper, { Navigation, Pagination, Lazy, A11y } from 'swiper'
 import swiperOptions from './_swiperOptions.js'
 
-const BaseCarouselCards = new Swiper('.BaseCarouselCards .swiper', {
-  modules: [Navigation, Lazy, A11y, Pagination],
-  ...swiperOptions.BaseCarouselCards,
-})
+/* Deprecation warning:
+ * .BaseCarouselCards is deprecated and will be removed in the next major release. Use .MixinCarousel instead.
+ */
+const MixinCarousel = new Swiper(
+  '.MixinCarousel .swiper, .BaseCarouselCards .swiper',
+  {
+    modules: [Navigation, Lazy, A11y, Pagination],
+    ...swiperOptions.MixinCarousel,
+  }
+)
 
 const BlockImageCarousel = new Swiper('.BlockImageCarousel .swiper', {
   modules: [Navigation, Lazy, A11y, Pagination],

src/js/vendors/_swiperOptions.js

@@ -3,7 +3,7 @@
  */
 
 const swiperOptions = {
-  BaseCarouselCards: {
+  MixinCarousel: {
     slidesPerView: 1.25,
     speed: 500,
     threshold: 20, // swipe threshold in px
@@ -69,4 +69,9 @@ const swiperOptions = {
   },
 }
 
+/* Deprecation warning:
+ * BaseCarouselCards is deprecated and will be removed in the next major release. Use MixinCarousel instead.
+ */
+Object.assign(swiperOptions, { BaseCarouselCards: swiperOptions.MixinCarousel })
+
 export default swiperOptions

src/scss/_animations.scss

@@ -1,6 +1,6 @@
 // re-used keyframe animations go here
 
-// Prev/next buttons in carousels. See BaseCarouselCards or HomepageMissionsCarousel for usage example
+// Prev/next buttons in carousels. See MixinCarousel or HomepageMissionsCarousel for usage example
 @keyframes arrow-carousel-next-anim {
   0% {
     transform: translateX(0);

src/scss/_components.scss

@@ -1,6 +1,4 @@
-@import 'components/AnimationCaret';
 @import 'components/BaseButton';
-@import 'components/BaseCarouselCards';
 @import 'components/BaseIframe';
 @import 'components/BaseImage';
 @import 'components/BaseImageCaption';
@@ -16,9 +14,9 @@
 @import 'components/BlockTeaser';
 @import 'components/BlockText';
 @import 'components/BlockVideoEmbed';
-@import 'components/HeroFeature';
-@import 'components/HeroFocalPoint';
 @import 'components/HeroMedia';
+@import 'components/HeroMedium';
+@import 'components/HeroLarge';
 @import 'components/Icon360';
 @import 'components/IconArrow';
 @import 'components/IconArrows';
@@ -55,3 +53,5 @@
 @import 'components/IconStop';
 @import 'components/IconTime';
 @import 'components/IconVolume';
+@import 'components/MixinAnimationCaret';
+@import 'components/MixinCarousel';

src/scss/components/_AnimationCaret.scss

@@ -1,65 +1,5 @@
-.AnimationCaret {
-  @apply flex items-center;
+/* Deprecation warning:
+ * _AnimationCaret.scss is deprecated and will be removed in the next major release. Use _MixinAnimationCaret.scss instead.
+ */
 
-  > .arrow-wrapper {
-    @apply block relative w-6 h-6;
-
-    > .arrow,
-    > .arrow-fixed {
-      @apply absolute top-1/2 transform -translate-y-1/2 left-0 block text-sm;
-    }
-  }
-
-  @include hover {
-    > .arrow-wrapper > .arrow {
-      animation: arrow-anim 0.25s ease-in normal;
-    }
-
-    > .arrow-wrapper > .arrow-fixed {
-      animation: arrow-fixed-anim 0.25s ease-in normal;
-    }
-  }
-
-  &.caret-inline {
-    @apply inline-block;
-
-    > .arrow-wrapper {
-      @apply inline-block w-px;
-
-      > .arrow,
-      > .arrow-fixed {
-        // ems to adjust for different font sizes
-        margin-top: 0.45em;
-      }
-    }
-  }
-
-  @keyframes arrow-anim {
-    0% {
-      opacity: 1;
-      transform: translate(0, -50%);
-    }
-
-    50% {
-      transform: translate(1rem, -50%);
-      opacity: 0;
-    }
-
-    100% {
-      transform: translate(1rem, -50%);
-      opacity: 0;
-    }
-  }
-
-  @keyframes arrow-fixed-anim {
-    0% {
-      opacity: 0;
-      transform: translate(-0.5rem, -50%);
-    }
-
-    100% {
-      opacity: 1;
-      transform: translate(0, -50%);
-    }
-  }
-}
+@import 'MixinAnimationCaret';

src/scss/components/_BaseCarouselCards.scss

@@ -1,116 +1,5 @@
-.BaseCarouselCards {
-  .swiper {
-    @apply overflow-visible #{!important};
+/* Deprecation warning:
+ * _BaseCarouselCards.scss is deprecated and will be removed in the next major release. Use _MixinCarousel.scss instead.
+ */
 
-    .swiper-prev,
-    .swiper-next {
-      @apply -mt-1 w-auto h-auto;
-
-      &.swiper-button-disabled {
-        @apply invisible;
-      }
-      // shared styles for the arrow animation
-      &.BaseButton {
-        @apply transition-none #{!important};
-      }
-
-      &.BaseButton > .label {
-        @apply flex overflow-hidden;
-
-        > .arrow-wrapper {
-          @apply block relative w-full h-full overflow-hidden;
-
-          > .arrow {
-            @apply block;
-          }
-
-          > .arrow-fixed {
-            @apply absolute top-0 left-0 block;
-          }
-        }
-
-        @include hover {
-          > .arrow-wrapper > .arrow,
-          > .arrow-wrapper > .arrow-fixed {
-            animation-delay: 50ms !important; // hover intent
-          }
-        }
-      }
-    }
-
-    @screen lg {
-      // specific directional animation
-      .swiper-next.BaseButton > .label {
-        @include hover {
-          > .arrow-wrapper > .arrow {
-            animation: arrow-carousel-next-anim 0.1s linear normal;
-          }
-
-          > .arrow-wrapper > .arrow-fixed {
-            animation: arrow-carousel-next-fixed-anim 0.1s linear normal;
-          }
-        }
-      }
-
-      .swiper-prev.BaseButton > .label {
-        @include hover {
-          > .arrow-wrapper > .arrow {
-            animation: arrow-carousel-prev-anim 0.1s linear normal;
-          }
-
-          > .arrow-wrapper > .arrow-fixed {
-            animation: arrow-carousel-prev-fixed-anim 0.1s linear normal;
-          }
-        }
-      }
-    }
-  }
-
-  .swiper-wrapper {
-    @apply overflow-visible #{!important};
-
-    .swiper-slide {
-      @apply opacity-50 transition-opacity duration-500 ease-in-out h-auto;
-
-      &.swiper-slide-visible,
-      &:focus,
-      &:focus-within {
-        @apply opacity-100;
-      }
-    }
-  }
-
-  &.-cards {
-    .swiper {
-      .swiper-navigation {
-        // center arrows with image
-        padding-top: 28.125%; // half of the image's aspect ratio
-        .swiper-prev,
-        .swiper-next {
-          @apply transform -translate-y-1/2;
-        }
-      }
-    }
-  }
-
-  &.-tiles {
-    .swiper {
-      .swiper-navigation {
-        top: 50%;
-
-        .swiper-prev,
-        .swiper-next {
-          @apply transform -translate-y-1/2;
-        }
-      }
-    }
-  }
-
-  .swiper-lazy {
-    @apply opacity-0;
-
-    &.swiper-lazy-loaded {
-      @apply opacity-100;
-    }
-  }
-}
+@import 'MixinCarousel';

src/scss/components/_HeroFeature.scss

@@ -1,12 +1,5 @@
-.HeroFeature,
-.HeroFeature.swiper-slide {
-  // somewhat arbitrary heights
-  // portrait on small screens
-  //height: 500px;
-  min-height: 400px;
-  // landscape on larger screens
-  @screen lg {
-    height: 600px;
-    min-height: 600px;
-  }
-}
+/* Deprecation warning:
+ * _HeroFeature.scss is deprecated and will be removed in the next major release. Use _HeroMedium.scss instead.
+ */
+
+@import 'HeroMedium';

src/scss/components/_HeroFocalPoint.scss

@@ -1,19 +1,5 @@
-.HeroFocalPoint {
-  .content-wrapper {
-    @screen lg {
-      min-height: 548px; // maintains 1440x770 aspect ratio
-    }
+/* Deprecation warning:
+ * _HeroFocalPoint.scss is deprecated and will be removed in the next major release. Use _HeroLarge.scss instead.
+ */
 
-    @screen xl {
-      min-height: 684px; // maintains 1440x770 aspect ratio
-    }
-
-    @screen 2xl {
-      min-height: 770px; // 1440x770
-    }
-
-    @screen 3xl {
-      min-height: 963px; // maintains 1440x770 aspect ratio
-    }
-  }
-}
+@import 'HeroLarge';

src/scss/components/_HeroLarge.scss

@@ -0,0 +1,24 @@
+/* Deprecation warning:
+ * Usage of the .HeroFocalPoint class is deprecated and will be removed in the next major release. Use .HeroLarge instead.
+ */
+
+.HeroLarge,
+.HeroFocalPoint {
+  .content-wrapper {
+    @screen lg {
+      min-height: 548px; // maintains 1440x770 aspect ratio
+    }
+
+    @screen xl {
+      min-height: 684px; // maintains 1440x770 aspect ratio
+    }
+
+    @screen 2xl {
+      min-height: 770px; // 1440x770
+    }
+
+    @screen 3xl {
+      min-height: 963px; // maintains 1440x770 aspect ratio
+    }
+  }
+}

src/scss/components/_HeroMedium.scss

@@ -0,0 +1,18 @@
+/* Deprecation warning:
+ * Usage of the .HeroFeature class is deprecated and will be removed in the next major release. Use .HeroMedium instead.
+ */
+
+.HeroMedium,
+.HeroMedium.swiper-slide,
+.HeroFeature,
+.HeroFeature.swiper-slide {
+  // somewhat arbitrary heights
+  // portrait on small screens
+  //height: 500px;
+  min-height: 400px;
+  // landscape on larger screens
+  @screen lg {
+    height: 600px;
+    min-height: 600px;
+  }
+}