YALB-1319 - Bug: Image Gallery - caption cut off | YALB-1473 - Bug: Image Gallery issues with pagination on different browsers and devices

components/00-tokens/effects/_effects.scss

@@ -24,14 +24,17 @@
     // Start visible at 0% to avoid an occasional "flash" when closing.
     0% {
       visibility: visible;
+      z-index: 0;
     }
 
     99% {
       visibility: visible;
+      z-index: 0;
     }
 
     100% {
       visibility: hidden;
+      z-index: -1;
     }
   }
 }

components/00-tokens/typography/_typography.scss

@@ -150,3 +150,13 @@ code {
 @mixin body-xs {
   font: var(--font-style-body-xs);
 }
+
+@mixin truncate-text($lines: 1) {
+  max-width: 100%;
+  text-overflow: ellipsis;
+  width: fit-content;
+  white-space: nowrap;
+  line-clamp: $lines;
+  -webkit-line-clamp: $lines;
+  overflow: hidden;
+}

components/02-molecules/text/yds-text-field.twig

@@ -8,7 +8,7 @@
 {% set text_field__attributes = {
   'data-component-width': text_field__width|default('site'),
   'data-component-alignment': text_field__alignment|default('center'),
-  class: bem(text_field__base_class, text_field__modifiers),
+  class: bem(text_field__base_class, text_field__modifiers, text_field__blockname, text_field__extra_classes),
 } %}
 
 <div {{ add_attributes(text_field__attributes) }}>

components/03-organisms/galleries/media-grid/_yds-media-grid-modal-item--content.twig

@@ -8,24 +8,37 @@
 {% set modal_item__content = modal_item__content|default(item.media_grid__modal__text) %}
 {% set media_grid__modal__base_class = 'media-grid-modal' %}
 
-  {% if modal_item__heading is not empty or modal_item__content is not empty %}
-    {% set media_grid__item__content %}
-      {# Content Heading #}
-      {% if modal_item__heading is not empty %}
-        {% include "@atoms/typography/headings/yds-heading.twig" with {
+{% set modal_item__content__attributes = [{}] %}
+
+
+{% if modal_item__heading is not empty or modal_item__content is not empty %}
+	{% set media_grid__item__content %}
+	{# Content Heading #}
+	{% if modal_item__heading is not empty %}
+		{% include "@atoms/typography/headings/yds-heading.twig" with {
           heading__level: '2',
           heading: modal_item__heading,
           heading__blockname: media_grid__modal__base_class,
         } %}
-      {% endif %}
-      {# Content Text #}
-      {% if modal_item__content %}
-        <div {{ bem('text', [], media_grid__modal__base_class) }}>
-          {{ modal_item__content }}
-        </div>
-      {% endif %}
-    {% endset %}
-    {% include "@molecules/text/yds-text-field.twig" with {
+	{% endif %}
+	{# Content Text #}
+	{% if modal_item__content %}
+		<div {{ bem('text', [], media_grid__modal__base_class) }}>
+			{{ modal_item__content }}
+		</div>
+    <button {{ bem('toggle-caption', ['expand-content'], media_grid__modal__base_class) }}>
+      <span {{ bem('visually-hidden') }}>{{ 'Expand the Content'|t }}</span>
+      {% include "@atoms/images/icons/_yds-icon.twig" with {
+        icon__name: 'arrow-up',
+        icon__decorative: true,
+        icon__blockname: media_grid__modal__base_class,
+        icon__modifiers: ['arrow-up'],
+      } %}
+    </button>
+	{% endif %}
+	{% endset %}
+	{% include "@molecules/text/yds-text-field.twig" with {
       text_field__content: media_grid__item__content,
+      text_field__extra_classes: ['no-page-spacing'],
     } %}
-  {% endif %}
+{% endif %}

components/03-organisms/galleries/media-grid/_yds-media-grid-modal.scss

@@ -1,12 +1,22 @@
 @use '../../../00-tokens/tokens';
 @use '../../../01-atoms/atoms';
+@use '../../../00-tokens/typography/typography';
 
 $modal-speed: var(--animation-speed-slow);
 
 @mixin media-grid-modal-transition {
   @include tokens.animate(opacity, $modal-speed);
 }
 
+.media-grid__inner {
+  position: relative;
+  z-index: 1;
+
+  [data-media-grid-modal-state='active'] & {
+    z-index: 0;
+  }
+}
+
 .media-grid__modal {
   position: fixed;
   top: 0;
@@ -67,6 +77,7 @@ $modal-speed: var(--animation-speed-slow);
 
 .media-grid-modal__inner {
   display: grid;
+  position: relative;
 
   // Stylelint is mis-interpreting the `/` below as a division operator, rather
   // than as a part of the grid-template sizing stuff. So, we need to disable
@@ -76,10 +87,12 @@ $modal-speed: var(--animation-speed-slow);
     '. . control-close' var(--size-click-target-minimum)
     'media media media' minmax(auto, 50vh)
     'control-previous pager control-next' var(--size-click-target-minimum)
-    'content content content' minmax(var(--size-click-target-minimum), 1fr)
-    / var(--size-click-target-minimum) minmax(0, 1fr) var(--size-click-target-minimum);
+    'content content content' minmax(auto, 1fr) / var(
+      --size-click-target-minimum
+    )
+    minmax(0, 1fr) var(--size-click-target-minimum);
   /* stylelint-enable scss/operator-no-newline-before */
-  gap: var(--spacing-component-gutter-secondary);
+  gap: var(--size-spacing-5);
   max-height: 100%;
 
   @media (min-width: tokens.$break-s) {
@@ -92,13 +105,26 @@ $modal-speed: var(--animation-speed-slow);
       )
       minmax(0, 1fr)
       var(--size-click-target-minimum);
+    gap: var(--spacing-component-gutter-secondary);
+  }
+
+  @media (orientation: landscape) and (max-height: 400px) {
+    grid-template:
+      '. media control-close' var(--size-click-target-minimum)
+      'control-previous media control-next' minmax(auto, 4fr)
+      '. content .' minmax(var(--size-click-target-minimum), 2fr) / var(
+        --size-click-target-minimum
+      )
+      minmax(0, 1fr)
+      var(--size-click-target-minimum);
+    gap: var(--size-spacing-2);
   }
 }
 
 .media-grid-modal__media {
   grid-area: media;
-  height: 100%;
   width: 100%;
+  max-height: 100%;
 
   img {
     height: 100%;
@@ -112,7 +138,11 @@ $modal-speed: var(--animation-speed-slow);
   display: flex;
   gap: var(--size-spacing-1);
   justify-content: center;
-  overflow: auto;
+
+  // hide pager for very small screens
+  @media (orientation: landscape) and (max-height: 400px) {
+    display: none;
+  }
 }
 
 .media-grid-modal__pager-item {
@@ -135,10 +165,11 @@ $modal-speed: var(--animation-speed-slow);
   }
 
   @media (max-width: tokens.$break-s - 0.05) {
-    &:not(.media-grid-modal__pager-item--total):not([data-media-grid-modal-item-active='true']) {
+    &:not(.media-grid-modal__pager-item--total):not([data-media-grid-modal-item-active='true']):not([aria-current='true']) {
       display: none;
     }
 
+    &[aria-current='true'],
     &[data-media-grid-modal-item-active='true'] {
       position: relative;
 
@@ -166,14 +197,34 @@ $modal-speed: var(--animation-speed-slow);
 }
 
 .media-grid-modal__content {
+  overflow: hidden;
   grid-area: content;
-  overflow: auto;
-  max-height: 100%;
+  position: relative;
+  width: 100%;
+  padding-block-start: var(--size-spacing-5);
+  padding-block-end: var(--size-spacing-5);
 
   .text {
     display: flex;
     flex-direction: column;
     gap: var(--size-spacing-3);
+    padding-inline-end: var(--size-spacing-9);
+  }
+
+  &[aria-expanded='true'] {
+    @include tokens.animate(all, var(--animation-speed-slow));
+
+    background-color: rgb(0 0 0 / 90%);
+    overflow: auto;
+    position: absolute;
+    bottom: 0;
+    z-index: 1;
+  }
+
+  &[aria-expanded='false'] {
+    @include tokens.animate(all, var(--animation-speed-slow));
+
+    max-height: var(--modal-content-item-height);
   }
 
   a {
@@ -187,10 +238,44 @@ $modal-speed: var(--animation-speed-slow);
 
 .media-grid-modal__heading {
   @include tokens.body-l;
+
+  // if the toggle is present, truncate the heading to 1 line
+  [aria-expanded='false'] & {
+    @include typography.truncate-text;
+  }
+
+  @media (max-width: tokens.$break-s - 0.05) {
+    @include tokens.body-default;
+  }
+
+  @media (orientation: landscape) and (max-height: 400px) {
+    @include tokens.body-default;
+  }
 }
 
 .media-grid-modal__text {
   @include tokens.body-default-condensed;
+
+  > * {
+    margin-top: 0;
+  }
+
+  [aria-expanded='false'] & {
+    @include typography.truncate-text;
+  }
+
+  @media (max-width: tokens.$break-s - 0.05) {
+    @include tokens.body-s;
+
+    max-height: 60vh;
+  }
+
+  // small height and landscape
+  @media (orientation: landscape) and (max-height: 400px) {
+    @include tokens.body-s;
+
+    max-height: 20vh;
+  }
 }
 
 .media-grid-modal__control {
@@ -244,3 +329,29 @@ $modal-speed: var(--animation-speed-slow);
 
   opacity: 1;
 }
+
+.media-grid-modal__toggle-caption {
+  position: absolute;
+  top: var(--size-spacing-4);
+  right: var(--size-spacing-4);
+  padding: 0;
+  cursor: pointer;
+  background-color: transparent;
+  border: none;
+  height: var(--size-click-target-minimum);
+  width: var(--size-click-target-minimum);
+  display: none;
+
+  svg {
+    @include tokens.animate($property: 'transform', $duration: 400ms);
+
+    transform: rotate3d(0, 0, 0);
+    fill: var(--color-basic-white);
+  }
+
+  [aria-expanded='true'] & {
+    svg {
+      transform: rotate3d(0, 0, 1, -180deg);
+    }
+  }
+}

components/03-organisms/galleries/media-grid/yds-media-grid-interactive.js

@@ -124,6 +124,76 @@
         indicateActivePager(activeIndex);
       };
 
+      /**
+       * toggleCaptions
+       * @description toggleCaptions truncates long captions visible in the modal.
+       */
+      // Get all modal content.
+      const imageCaptions = document.querySelectorAll(
+        '.media-grid-modal__content',
+      );
+
+      // Set variables for each modal content/caption.
+      imageCaptions.forEach((imageCaption) => {
+        const captionContent = imageCaption.querySelector(
+          '.media-grid-modal__text',
+        );
+
+        const toggleCaption = imageCaption.querySelector(
+          '.media-grid-modal__toggle-caption',
+        );
+
+        // Check if captionContent exists.
+        if (captionContent) {
+          // Store the full caption text.
+          // if a captionHeading is present, shorten the amount of characters
+          // for the caption text.
+          const maxLength = 100;
+
+          const fullCaption = captionContent.textContent.trim();
+          const visuallyHidden =
+            toggleCaption.querySelector('.visually-hidden');
+
+          // Check the length of the caption and truncate if necessary
+          if (toggleCaption && fullCaption.length > maxLength) {
+            const truncatedCaption = fullCaption.slice(0, maxLength);
+
+            // set truncated content.
+            captionContent.textContent = `${truncatedCaption}...`;
+
+            imageCaption.setAttribute('aria-expanded', 'false');
+            imageCaption.style.setProperty(
+              '--modal-content-item-height',
+              `${imageCaption.scrollHeight}px`,
+            );
+            toggleCaption.style.setProperty('display', 'inline');
+
+            // Toggle the full caption when the "up arrow" toggle is clicked
+            toggleCaption.addEventListener('click', function (e) {
+              e.preventDefault();
+
+              if (captionContent.textContent === `${truncatedCaption}...`) {
+                captionContent.textContent = fullCaption;
+                visuallyHidden.textContent = 'Collapse the Content';
+                imageCaption.setAttribute('aria-expanded', 'true');
+                imageCaption.style.setProperty(
+                  '--modal-content-item-height',
+                  `${imageCaption.scrollHeight}px`,
+                );
+              } else {
+                captionContent.textContent = `${truncatedCaption}...`;
+                visuallyHidden.textContent = 'Expand the Content';
+                imageCaption.setAttribute('aria-expanded', 'false');
+                imageCaption.style.setProperty(
+                  '--modal-content-item-height',
+                  `${imageCaption.scrollHeight}px`,
+                );
+              }
+            });
+          }
+        }
+      });
+
       /**
        * handlePagerClick
        * @description Supports pager navigation.