From 142550767b8b9a5b25cfff04cac7d49ff58cc101 Mon Sep 17 00:00:00 2001
From: Joe Tower <joetower@gmail.com>
Date: Fri, 2 Feb 2024 12:50:23 -0600
Subject: [PATCH 01/15] feat(YALB-1697): wip - margins on spotlight components

---
 .../_yds-content-spotlight-portrait.scss      |  8 +------
 .../text-with-image/_yds-text-with-image.scss |  8 +------
 .../standard-page-spotlights.twig             | 24 +++++++++++++++++++
 3 files changed, 26 insertions(+), 14 deletions(-)

diff --git a/components/02-molecules/content-spotlight-portrait/_yds-content-spotlight-portrait.scss b/components/02-molecules/content-spotlight-portrait/_yds-content-spotlight-portrait.scss
index 45658707a..dad593e83 100644
--- a/components/02-molecules/content-spotlight-portrait/_yds-content-spotlight-portrait.scss
+++ b/components/02-molecules/content-spotlight-portrait/_yds-content-spotlight-portrait.scss
@@ -19,8 +19,6 @@ $component-content-spotlight-port-themes: map.deep-get(
 
   &[data-component-theme='default'] {
     @include tokens.spacing-page-section;
-
-    margin-block-start: var(--spacing-page-section);
   }
 
   // if we're using a component theme, add padding and set background-color and color;
@@ -29,11 +27,7 @@ $component-content-spotlight-port-themes: map.deep-get(
     padding-block-end: var(--size-spacing-10);
     background-color: var(--color-background);
     color: var(--color-text);
-    margin-block-start: var(--spacing-page-section);
-
-    + .content-spotlight-portrait:not([data-component-theme='default']) {
-      margin-block-start: 0;
-    }
+    margin: 0;
   }
 
   // Component themes defaults: iterate over each component theme to establish
diff --git a/components/02-molecules/text-with-image/_yds-text-with-image.scss b/components/02-molecules/text-with-image/_yds-text-with-image.scss
index f2c47aa82..81d3f5fc1 100644
--- a/components/02-molecules/text-with-image/_yds-text-with-image.scss
+++ b/components/02-molecules/text-with-image/_yds-text-with-image.scss
@@ -15,8 +15,6 @@ $component-content-spotlight-themes: map.deep-get(
 
   &[data-component-theme='default'] {
     @include tokens.spacing-page-section;
-
-    margin-block-start: var(--spacing-page-section);
   }
 
   // if we're using a component theme, add padding and set background-color and color;
@@ -25,11 +23,7 @@ $component-content-spotlight-themes: map.deep-get(
     padding-block-end: var(--size-spacing-10);
     background-color: var(--color-background);
     color: var(--color-text);
-    margin-block-start: var(--spacing-page-section);
-
-    + .content-spotlight-portrait:not([data-component-theme='default']) {
-      margin-block-start: 0;
-    }
+    margin: 0;
   }
 
   // Component themes defaults: iterate over each component theme to establish
diff --git a/components/05-page-examples/standard-pages/standard-page-spotlights.twig b/components/05-page-examples/standard-pages/standard-page-spotlights.twig
index c0e2ff227..80dc47c77 100644
--- a/components/05-page-examples/standard-pages/standard-page-spotlights.twig
+++ b/components/05-page-examples/standard-pages/standard-page-spotlights.twig
@@ -62,6 +62,30 @@
         content_spotlight_portrait__theme: 'default',
     }%}
 
+    {% include "@molecules/content-spotlight-portrait/yds-content-spotlight-portrait.twig" with {
+        content_spotlight_portrait__style: 'inline',
+        content_spotlight_portrait__position: 'image-left',
+        content_spotlight_portrait__theme: 'one',
+    }%}
+
+    {% include "@molecules/text/yds-text-field.twig" with {
+      text_field__alignment: 'left',
+      text_field__content: '<h2>New Text Block</h2>
+        <p>People will want to chunk out text content by sections, often kicking off with a heading, to make it easier to maintain. E.g. rearranging sections of the page, dropping in CTAs, etc. The spacing isn’t the same using this approach, though.</p>
+        '
+    }%}
+
+    {% include "@molecules/wrapped-image/yds-wrapped-image.twig" with {
+      wrapped_image__width: 'site',
+      wrapped_image__alignment: 'right',
+      wrapped_image__content: '<h3>Heading 3</h3><p>Dr. Davis’s research group at the Kline Chemistry Laboratory uses experiments at multiple scales – in vitro, single cell, and whole organism – to study fundamental and applied problems at the intersection of chemistry, physics, and biology. They develop new quantitative spectroscopic imaging techniques to elucidate the relationship between function and dynamics of proteins and RNA inside living cells. </p><p>Caitlin Davis obtained her Ph.D. from Emory University in 2015, where she studied protein folding in the laboratory of Dr. Brian Dyer in the Chemistry Department. She completed her postdoctoral training with Dr. Martin Gruebele at the Center for the Physics of Living Cells at the University of Illinois at Urbana-Champaign, where she developed a method for studying protein thermodynamics and kinetics in differentiated tissues of living zebrafish and she developed a mimic of cytoplasm that can be used to reproduce protein behaviors in vitro. She came to Yale as a faculty member in 2020.</p>',
+    } %}
+
+    {% include "@atoms/divider/yds-divider.twig" with {
+      divider__component_width: 'site',
+      animate__item: 'enabled',
+    } %}
+
     {% include "@molecules/text/yds-text-field.twig" with {
       text_field__alignment: 'left',
       text_field__content: '<h2>New Text Block</h2>

From 4c0113e84d0ac4a9d5b42eea79921cd031cc3975 Mon Sep 17 00:00:00 2001
From: Joe Tower <joetower@gmail.com>
Date: Tue, 6 Feb 2024 11:28:46 -0600
Subject: [PATCH 02/15] feat(YALB-1697): wip - spotlight margins

---
 components/00-tokens/layout/yds-layout.js     | 37 ++++++++++++++++++-
 .../_yds-content-spotlight-portrait.scss      |  8 ++++
 .../standard-page-spotlights.twig             | 12 ++++++
 3 files changed, 55 insertions(+), 2 deletions(-)

diff --git a/components/00-tokens/layout/yds-layout.js b/components/00-tokens/layout/yds-layout.js
index 2382ac080..14a08d328 100644
--- a/components/00-tokens/layout/yds-layout.js
+++ b/components/00-tokens/layout/yds-layout.js
@@ -3,13 +3,23 @@ Drupal.behaviors.layout = {
     // Classes.
     // This array of classes should not have the preceding `.` so that we can
     // check for them in `classList.contains` below.
-    const classesToCheck = ['text-field', 'wrapped-image'];
+    const classesToCheck = [
+      'text-field',
+      'wrapped-image',
+      'text-with-image',
+      'content-spotlight-portrait',
+    ];
+    const spotlightClasses = ['text-with-image', 'content-spotlight-portrait'];
     // Generate a string of the above classes with preceding `.` for the
     // querySelectorAll below.
     const bodyCopyClasses = classesToCheck.map((i) => `.${i}`);
+    const spotlightClassesString = spotlightClasses.map((i) => `.${i}`);
     // Selectors.
     const bodyCopyComponents = context.querySelectorAll(bodyCopyClasses);
-
+    const spotlightComponents = context.querySelectorAll(
+      spotlightClassesString,
+    );
+    // Add the `no-page-spacing` class to the component if the next element
     bodyCopyComponents.forEach((component) => {
       const nextElement = component.nextElementSibling;
 
@@ -25,5 +35,28 @@ Drupal.behaviors.layout = {
         component.classList.add('no-page-spacing');
       }
     });
+
+    // Check spotlightComponent classes and add first and last classes
+    spotlightComponents.forEach((component, index) => {
+      const nextSibling = component.nextElementSibling;
+      const isLastItem = index === spotlightComponents.length - 1;
+      const isFirstItem = index === 0;
+
+      if (nextSibling) {
+        const containsClass = spotlightClasses.some((className) =>
+          nextSibling.classList.contains(className),
+        );
+
+        // First item = If the next sibling does contain one of the spotlight classes
+        if (containsClass && isFirstItem) {
+          component.classList.add('spotlight-item--first');
+        }
+
+        // Last item = If the next sibling does not contain one of the spotlight classes
+        if (!containsClass && isLastItem) {
+          component.classList.add('spotlight-item--last');
+        }
+      }
+    });
   },
 };
diff --git a/components/02-molecules/content-spotlight-portrait/_yds-content-spotlight-portrait.scss b/components/02-molecules/content-spotlight-portrait/_yds-content-spotlight-portrait.scss
index dad593e83..c7a4d192c 100644
--- a/components/02-molecules/content-spotlight-portrait/_yds-content-spotlight-portrait.scss
+++ b/components/02-molecules/content-spotlight-portrait/_yds-content-spotlight-portrait.scss
@@ -28,6 +28,14 @@ $component-content-spotlight-port-themes: map.deep-get(
     background-color: var(--color-background);
     color: var(--color-text);
     margin: 0;
+
+    &.spotlight-item--first {
+      margin-top: var(--size-spacing-10);
+    }
+
+    &.spotlight-item--last {
+      margin-bottom: var(--size-spacing-10);
+    }
   }
 
   // Component themes defaults: iterate over each component theme to establish
diff --git a/components/05-page-examples/standard-pages/standard-page-spotlights.twig b/components/05-page-examples/standard-pages/standard-page-spotlights.twig
index 80dc47c77..57be86a9b 100644
--- a/components/05-page-examples/standard-pages/standard-page-spotlights.twig
+++ b/components/05-page-examples/standard-pages/standard-page-spotlights.twig
@@ -118,6 +118,18 @@
       text_field__content: '<h2>Program Information</h2><h3>The Undergraduate Handbook</h3><p>A comprehensive guide for prospective and current Chemistry Majors, with a complete description of requirements and opportunities.</p><p><a href="#">View the handbook online</a></p><h3>Course List</h3><p>A list of courses and a description of the Chemistry undergraduate program, including information on placement exams, laboratory registration, premedical students, and major requirements</p><p><a href="#">Yale College programs of study</a></p>',
     } %}
 
+    {% include "@molecules/content-spotlight-portrait/yds-content-spotlight-portrait.twig" with {
+        content_spotlight_portrait__style: 'inline',
+        content_spotlight_portrait__position: 'image-right',
+        content_spotlight_portrait__theme: 'default',
+    }%}
+
+    {% include "@molecules/content-spotlight-portrait/yds-content-spotlight-portrait.twig" with {
+        content_spotlight_portrait__style: 'inline',
+        content_spotlight_portrait__position: 'image-left',
+        content_spotlight_portrait__theme: 'one',
+    }%}
+
     {% include "@molecules/callout/yds-callout.twig" with {
       callout__alignment: 'left',
       callouts: [

From 8ce14c4292b13dde6f446b58aa2dc81db811cf0a Mon Sep 17 00:00:00 2001
From: Joe Tower <joetower@gmail.com>
Date: Thu, 8 Feb 2024 14:59:23 -0600
Subject: [PATCH 03/15] feat(YALB-1697): reset layout

---
 components/00-tokens/layout/yds-layout.js | 37 ++---------------------
 1 file changed, 2 insertions(+), 35 deletions(-)

diff --git a/components/00-tokens/layout/yds-layout.js b/components/00-tokens/layout/yds-layout.js
index 14a08d328..2382ac080 100644
--- a/components/00-tokens/layout/yds-layout.js
+++ b/components/00-tokens/layout/yds-layout.js
@@ -3,23 +3,13 @@ Drupal.behaviors.layout = {
     // Classes.
     // This array of classes should not have the preceding `.` so that we can
     // check for them in `classList.contains` below.
-    const classesToCheck = [
-      'text-field',
-      'wrapped-image',
-      'text-with-image',
-      'content-spotlight-portrait',
-    ];
-    const spotlightClasses = ['text-with-image', 'content-spotlight-portrait'];
+    const classesToCheck = ['text-field', 'wrapped-image'];
     // Generate a string of the above classes with preceding `.` for the
     // querySelectorAll below.
     const bodyCopyClasses = classesToCheck.map((i) => `.${i}`);
-    const spotlightClassesString = spotlightClasses.map((i) => `.${i}`);
     // Selectors.
     const bodyCopyComponents = context.querySelectorAll(bodyCopyClasses);
-    const spotlightComponents = context.querySelectorAll(
-      spotlightClassesString,
-    );
-    // Add the `no-page-spacing` class to the component if the next element
+
     bodyCopyComponents.forEach((component) => {
       const nextElement = component.nextElementSibling;
 
@@ -35,28 +25,5 @@ Drupal.behaviors.layout = {
         component.classList.add('no-page-spacing');
       }
     });
-
-    // Check spotlightComponent classes and add first and last classes
-    spotlightComponents.forEach((component, index) => {
-      const nextSibling = component.nextElementSibling;
-      const isLastItem = index === spotlightComponents.length - 1;
-      const isFirstItem = index === 0;
-
-      if (nextSibling) {
-        const containsClass = spotlightClasses.some((className) =>
-          nextSibling.classList.contains(className),
-        );
-
-        // First item = If the next sibling does contain one of the spotlight classes
-        if (containsClass && isFirstItem) {
-          component.classList.add('spotlight-item--first');
-        }
-
-        // Last item = If the next sibling does not contain one of the spotlight classes
-        if (!containsClass && isLastItem) {
-          component.classList.add('spotlight-item--last');
-        }
-      }
-    });
   },
 };

From 35757fa86575123210addcfd6b1c38afdb79cf6e Mon Sep 17 00:00:00 2001
From: Joe Tower <joetower@gmail.com>
Date: Thu, 8 Feb 2024 15:20:39 -0600
Subject: [PATCH 04/15] feat(YALB-1697): add example dial to remove bottom
 space on spotlights

---
 .../_yds-content-spotlight-portrait.scss          | 15 ++++-----------
 .../yds-content-spotlight-portrait.twig           |  1 +
 .../text-with-image/_yds-text-with-image.scss     |  7 ++++---
 .../text-with-image/yds-text-with-image.twig      |  1 +
 .../standard-pages/standard-page-spotlights.twig  |  3 +++
 5 files changed, 13 insertions(+), 14 deletions(-)

diff --git a/components/02-molecules/content-spotlight-portrait/_yds-content-spotlight-portrait.scss b/components/02-molecules/content-spotlight-portrait/_yds-content-spotlight-portrait.scss
index c7a4d192c..99024e21d 100644
--- a/components/02-molecules/content-spotlight-portrait/_yds-content-spotlight-portrait.scss
+++ b/components/02-molecules/content-spotlight-portrait/_yds-content-spotlight-portrait.scss
@@ -17,8 +17,10 @@ $component-content-spotlight-port-themes: map.deep-get(
   // used by a element for animated hover underline
   --color-text-shadow: var(--color-basic-white);
 
-  &[data-component-theme='default'] {
-    @include tokens.spacing-page-section;
+  margin-bottom: var(--size-spacing-10);
+
+  &[data-remove-bottom-space='true'] {
+    margin-bottom: 0;
   }
 
   // if we're using a component theme, add padding and set background-color and color;
@@ -27,15 +29,6 @@ $component-content-spotlight-port-themes: map.deep-get(
     padding-block-end: var(--size-spacing-10);
     background-color: var(--color-background);
     color: var(--color-text);
-    margin: 0;
-
-    &.spotlight-item--first {
-      margin-top: var(--size-spacing-10);
-    }
-
-    &.spotlight-item--last {
-      margin-bottom: var(--size-spacing-10);
-    }
   }
 
   // Component themes defaults: iterate over each component theme to establish
diff --git a/components/02-molecules/content-spotlight-portrait/yds-content-spotlight-portrait.twig b/components/02-molecules/content-spotlight-portrait/yds-content-spotlight-portrait.twig
index 90ac4b97e..0ce68b9df 100644
--- a/components/02-molecules/content-spotlight-portrait/yds-content-spotlight-portrait.twig
+++ b/components/02-molecules/content-spotlight-portrait/yds-content-spotlight-portrait.twig
@@ -23,6 +23,7 @@
   'data-component-width': content_spotlight_portrait__width|default('site'),
   'data-component-theme': content_spotlight_portrait__theme|default('default'),
   'data-image-style': content_spotlight_portrait__style|default('inline'),
+  'data-remove-bottom-space': component__remove_bottom_space|default('false'),
   class: bem(content_spotlight_portrait__base_class)
 } %}
 
diff --git a/components/02-molecules/text-with-image/_yds-text-with-image.scss b/components/02-molecules/text-with-image/_yds-text-with-image.scss
index 81d3f5fc1..3652fbaf9 100644
--- a/components/02-molecules/text-with-image/_yds-text-with-image.scss
+++ b/components/02-molecules/text-with-image/_yds-text-with-image.scss
@@ -13,8 +13,10 @@ $component-content-spotlight-themes: map.deep-get(
   // used by a element for animated hover underline
   --color-text-shadow: var(--color-basic-white);
 
-  &[data-component-theme='default'] {
-    @include tokens.spacing-page-section;
+  margin-bottom: var(--size-spacing-10);
+
+  &[data-remove-bottom-space='true'] {
+    margin-bottom: 0;
   }
 
   // if we're using a component theme, add padding and set background-color and color;
@@ -23,7 +25,6 @@ $component-content-spotlight-themes: map.deep-get(
     padding-block-end: var(--size-spacing-10);
     background-color: var(--color-background);
     color: var(--color-text);
-    margin: 0;
   }
 
   // Component themes defaults: iterate over each component theme to establish
diff --git a/components/02-molecules/text-with-image/yds-text-with-image.twig b/components/02-molecules/text-with-image/yds-text-with-image.twig
index cfcfa84ba..813f85eb4 100644
--- a/components/02-molecules/text-with-image/yds-text-with-image.twig
+++ b/components/02-molecules/text-with-image/yds-text-with-image.twig
@@ -23,6 +23,7 @@
   'data-image-position': text_with_image__position|default('image-left'),
   'data-component-width': text_with_image__width|default('site'),
   'data-component-theme': text_with_image__theme|default('default'),
+  'data-remove-bottom-space': component__remove_bottom_space|default('false'),
   class: bem(text_with_image__base_class)
 } %}
 
diff --git a/components/05-page-examples/standard-pages/standard-page-spotlights.twig b/components/05-page-examples/standard-pages/standard-page-spotlights.twig
index 57be86a9b..60b886235 100644
--- a/components/05-page-examples/standard-pages/standard-page-spotlights.twig
+++ b/components/05-page-examples/standard-pages/standard-page-spotlights.twig
@@ -19,17 +19,20 @@
     {% include "@molecules/content-spotlight-portrait/yds-content-spotlight-portrait.twig" with {
       content_spotlight_portrait__style: 'inline',
       content_spotlight_portrait__theme: 'one',
+      component__remove_bottom_space: 'true',
     }%}
 
     {% include "@molecules/content-spotlight-portrait/yds-content-spotlight-portrait.twig" with {
         content_spotlight_portrait__style: 'inline',
         content_spotlight_portrait__position: 'image-right',
         content_spotlight_portrait__theme: 'two',
+        component__remove_bottom_space: 'true',
       }%}
 
     {% include "@molecules/content-spotlight-portrait/yds-content-spotlight-portrait.twig" with {
         content_spotlight_portrait__style: 'offset',
         content_spotlight_portrait__theme: 'one',
+        component__remove_bottom_space: 'true',
       }%}
 
     {% include "@molecules/content-spotlight-portrait/yds-content-spotlight-portrait.twig" with {

From e1de728beaa6b0b09763314df938248a8fd9caa5 Mon Sep 17 00:00:00 2001
From: Joe Tower <joetower@gmail.com>
Date: Fri, 9 Feb 2024 17:04:49 -0600
Subject: [PATCH 05/15] feat(YALB-1697): working first/last JS matching content
 spotlights

---
 components/00-tokens/layout/yds-layout.js | 33 +++++++++++++++++++++++
 1 file changed, 33 insertions(+)

diff --git a/components/00-tokens/layout/yds-layout.js b/components/00-tokens/layout/yds-layout.js
index 2382ac080..b85596091 100644
--- a/components/00-tokens/layout/yds-layout.js
+++ b/components/00-tokens/layout/yds-layout.js
@@ -25,5 +25,38 @@ Drupal.behaviors.layout = {
         component.classList.add('no-page-spacing');
       }
     });
+
+    // Find the first and last spotlights in a group and add classes to them.
+    const contentSpotlights = document.querySelectorAll(
+      '.text-with-image, .content-spotlight-portrait',
+    );
+    let currentGroup = [];
+
+    // Add classes to the first and last spotlights in a group.
+    function markFirstAndLast(group) {
+      if (group.length > 0) {
+        group[0].classList.add('spotlights--first');
+        group[group.length - 1].classList.add('spotlights--last');
+      }
+    }
+
+    // Loop through the spotlights and group them.
+    contentSpotlights.forEach((element, index) => {
+      const prevSibling = element.previousElementSibling;
+
+      if (
+        prevSibling &&
+        prevSibling.matches('.text-with-image, .content-spotlight-portrait')
+      ) {
+        currentGroup.push(element);
+      } else {
+        markFirstAndLast(currentGroup);
+        currentGroup = [element];
+      }
+
+      if (index === contentSpotlights.length - 1) {
+        markFirstAndLast(currentGroup);
+      }
+    });
   },
 };

From 83fc784137d2751a72c698df282ffe445819163c Mon Sep 17 00:00:00 2001
From: Joe Tower <joetower@gmail.com>
Date: Fri, 9 Feb 2024 17:23:11 -0600
Subject: [PATCH 06/15] feat(YALB-1697): move spotlights JS to its own file

---
 components/00-tokens/layout/yds-layout.js     | 33 --------------
 .../_yds-content-spotlight-portrait.scss      | 14 ++++--
 .../content-spotlight-portrait.stories.js     |  2 +
 .../content-spotlights.js                     | 44 +++++++++++++++++++
 .../yds-content-spotlight-portrait.twig       |  1 -
 .../text-with-image/_yds-text-with-image.scss | 14 ++++--
 .../text-with-image.stories.js                |  3 +-
 .../text-with-image/yds-text-with-image.twig  |  1 -
 .../standard-page-spotlights.twig             |  3 --
 9 files changed, 70 insertions(+), 45 deletions(-)
 create mode 100644 components/02-molecules/content-spotlight-portrait/content-spotlights.js

diff --git a/components/00-tokens/layout/yds-layout.js b/components/00-tokens/layout/yds-layout.js
index b85596091..2382ac080 100644
--- a/components/00-tokens/layout/yds-layout.js
+++ b/components/00-tokens/layout/yds-layout.js
@@ -25,38 +25,5 @@ Drupal.behaviors.layout = {
         component.classList.add('no-page-spacing');
       }
     });
-
-    // Find the first and last spotlights in a group and add classes to them.
-    const contentSpotlights = document.querySelectorAll(
-      '.text-with-image, .content-spotlight-portrait',
-    );
-    let currentGroup = [];
-
-    // Add classes to the first and last spotlights in a group.
-    function markFirstAndLast(group) {
-      if (group.length > 0) {
-        group[0].classList.add('spotlights--first');
-        group[group.length - 1].classList.add('spotlights--last');
-      }
-    }
-
-    // Loop through the spotlights and group them.
-    contentSpotlights.forEach((element, index) => {
-      const prevSibling = element.previousElementSibling;
-
-      if (
-        prevSibling &&
-        prevSibling.matches('.text-with-image, .content-spotlight-portrait')
-      ) {
-        currentGroup.push(element);
-      } else {
-        markFirstAndLast(currentGroup);
-        currentGroup = [element];
-      }
-
-      if (index === contentSpotlights.length - 1) {
-        markFirstAndLast(currentGroup);
-      }
-    });
   },
 };
diff --git a/components/02-molecules/content-spotlight-portrait/_yds-content-spotlight-portrait.scss b/components/02-molecules/content-spotlight-portrait/_yds-content-spotlight-portrait.scss
index 99024e21d..50e31586e 100644
--- a/components/02-molecules/content-spotlight-portrait/_yds-content-spotlight-portrait.scss
+++ b/components/02-molecules/content-spotlight-portrait/_yds-content-spotlight-portrait.scss
@@ -17,10 +17,18 @@ $component-content-spotlight-port-themes: map.deep-get(
   // used by a element for animated hover underline
   --color-text-shadow: var(--color-basic-white);
 
-  margin-bottom: var(--size-spacing-10);
+  // if we're not using a component theme, add top and bottom margin
+  &[data-component-theme='default'] {
+    @include tokens.spacing-page-section;
+  }
 
-  &[data-remove-bottom-space='true'] {
-    margin-bottom: 0;
+  // We're using JavaScript to evaluate the last and first spotlights in a group of spotlights
+  &.spotlights--first {
+    margin-top: var(--size-spacing-10);
+  }
+
+  &.spotlights--last {
+    margin-bottom: var(--size-spacing-10);
   }
 
   // if we're using a component theme, add padding and set background-color and color;
diff --git a/components/02-molecules/content-spotlight-portrait/content-spotlight-portrait.stories.js b/components/02-molecules/content-spotlight-portrait/content-spotlight-portrait.stories.js
index 1247d5edc..1b961142f 100644
--- a/components/02-molecules/content-spotlight-portrait/content-spotlight-portrait.stories.js
+++ b/components/02-molecules/content-spotlight-portrait/content-spotlight-portrait.stories.js
@@ -7,6 +7,8 @@ import contentSpotlightPortraitTwig from './yds-content-spotlight-portrait.twig'
 import imageData from '../../01-atoms/images/image/image.yml';
 import contentSpotlightPortraitData from './content-spotlight-portrait.yml';
 
+import './content-spotlights';
+
 const colorPairingsData = Object.keys(tokens['component-themes']);
 
 /**
diff --git a/components/02-molecules/content-spotlight-portrait/content-spotlights.js b/components/02-molecules/content-spotlight-portrait/content-spotlights.js
new file mode 100644
index 000000000..ce25533dc
--- /dev/null
+++ b/components/02-molecules/content-spotlight-portrait/content-spotlights.js
@@ -0,0 +1,44 @@
+Drupal.behaviors.contentSpotlights = {
+  attach(context) {
+    // Find the first and last spotlights in a group.
+    const contentSpotlights = context.querySelectorAll(
+      '.text-with-image, .content-spotlight-portrait',
+    );
+
+    // Set an empty array to hold the current group of spotlights.
+    let currentGroup = [];
+
+    // Add classes to the first and last spotlights in a group.
+    function markFirstAndLast(group) {
+      if (group.length > 0) {
+        // Add classes to the first and last spotlights in a group.
+        group[0].classList.add('spotlights--first');
+        group[group.length - 1].classList.add('spotlights--last');
+      }
+    }
+
+    // Loop through the spotlights and group them.
+    contentSpotlights.forEach((element, index) => {
+      // Get the previous sibling of the current element.
+      const prevSibling = element.previousElementSibling;
+
+      if (
+        // If the previous sibling exists and is a spotlight.
+        prevSibling &&
+        prevSibling.matches('.text-with-image, .content-spotlight-portrait')
+      ) {
+        // If the previous sibling is a spotlight, add the current element to the group.
+        currentGroup.push(element);
+      } else {
+        // start a new group.
+        markFirstAndLast(currentGroup);
+        currentGroup = [element];
+      }
+
+      // If this is the last spotlight group, add classes to the first and last spotlights in the group.
+      if (index === contentSpotlights.length - 1) {
+        markFirstAndLast(currentGroup);
+      }
+    });
+  },
+};
diff --git a/components/02-molecules/content-spotlight-portrait/yds-content-spotlight-portrait.twig b/components/02-molecules/content-spotlight-portrait/yds-content-spotlight-portrait.twig
index 0ce68b9df..90ac4b97e 100644
--- a/components/02-molecules/content-spotlight-portrait/yds-content-spotlight-portrait.twig
+++ b/components/02-molecules/content-spotlight-portrait/yds-content-spotlight-portrait.twig
@@ -23,7 +23,6 @@
   'data-component-width': content_spotlight_portrait__width|default('site'),
   'data-component-theme': content_spotlight_portrait__theme|default('default'),
   'data-image-style': content_spotlight_portrait__style|default('inline'),
-  'data-remove-bottom-space': component__remove_bottom_space|default('false'),
   class: bem(content_spotlight_portrait__base_class)
 } %}
 
diff --git a/components/02-molecules/text-with-image/_yds-text-with-image.scss b/components/02-molecules/text-with-image/_yds-text-with-image.scss
index 3652fbaf9..97aebf005 100644
--- a/components/02-molecules/text-with-image/_yds-text-with-image.scss
+++ b/components/02-molecules/text-with-image/_yds-text-with-image.scss
@@ -13,10 +13,18 @@ $component-content-spotlight-themes: map.deep-get(
   // used by a element for animated hover underline
   --color-text-shadow: var(--color-basic-white);
 
-  margin-bottom: var(--size-spacing-10);
+  // if we're not using a component theme, add top and bottom margin
+  &[data-component-theme='default'] {
+    @include tokens.spacing-page-section;
+  }
 
-  &[data-remove-bottom-space='true'] {
-    margin-bottom: 0;
+  // We're using JavaScript to evaluate the last and first spotlights in a group of spotlights
+  &.spotlights--first {
+    margin-top: var(--size-spacing-10);
+  }
+
+  &.spotlights--last {
+    margin-bottom: var(--size-spacing-10);
   }
 
   // if we're using a component theme, add padding and set background-color and color;
diff --git a/components/02-molecules/text-with-image/text-with-image.stories.js b/components/02-molecules/text-with-image/text-with-image.stories.js
index db0ac5006..fcc8571e1 100644
--- a/components/02-molecules/text-with-image/text-with-image.stories.js
+++ b/components/02-molecules/text-with-image/text-with-image.stories.js
@@ -7,8 +7,9 @@ import textWithImageTwig from './yds-text-with-image.twig';
 import imageData from '../../01-atoms/images/image/image.yml';
 import textWithImageData from './text-with-image.yml';
 
-const colorPairingsData = Object.keys(tokens['component-themes']);
+import '../content-spotlight-portrait/content-spotlights';
 
+const colorPairingsData = Object.keys(tokens['component-themes']);
 /**
  * Storybook Definition.
  */
diff --git a/components/02-molecules/text-with-image/yds-text-with-image.twig b/components/02-molecules/text-with-image/yds-text-with-image.twig
index 813f85eb4..cfcfa84ba 100644
--- a/components/02-molecules/text-with-image/yds-text-with-image.twig
+++ b/components/02-molecules/text-with-image/yds-text-with-image.twig
@@ -23,7 +23,6 @@
   'data-image-position': text_with_image__position|default('image-left'),
   'data-component-width': text_with_image__width|default('site'),
   'data-component-theme': text_with_image__theme|default('default'),
-  'data-remove-bottom-space': component__remove_bottom_space|default('false'),
   class: bem(text_with_image__base_class)
 } %}
 
diff --git a/components/05-page-examples/standard-pages/standard-page-spotlights.twig b/components/05-page-examples/standard-pages/standard-page-spotlights.twig
index 60b886235..57be86a9b 100644
--- a/components/05-page-examples/standard-pages/standard-page-spotlights.twig
+++ b/components/05-page-examples/standard-pages/standard-page-spotlights.twig
@@ -19,20 +19,17 @@
     {% include "@molecules/content-spotlight-portrait/yds-content-spotlight-portrait.twig" with {
       content_spotlight_portrait__style: 'inline',
       content_spotlight_portrait__theme: 'one',
-      component__remove_bottom_space: 'true',
     }%}
 
     {% include "@molecules/content-spotlight-portrait/yds-content-spotlight-portrait.twig" with {
         content_spotlight_portrait__style: 'inline',
         content_spotlight_portrait__position: 'image-right',
         content_spotlight_portrait__theme: 'two',
-        component__remove_bottom_space: 'true',
       }%}
 
     {% include "@molecules/content-spotlight-portrait/yds-content-spotlight-portrait.twig" with {
         content_spotlight_portrait__style: 'offset',
         content_spotlight_portrait__theme: 'one',
-        component__remove_bottom_space: 'true',
       }%}
 
     {% include "@molecules/content-spotlight-portrait/yds-content-spotlight-portrait.twig" with {

From 819333f1633549fbed49e1607408f891591d09d8 Mon Sep 17 00:00:00 2001
From: Joe Tower <joetower@gmail.com>
Date: Fri, 9 Feb 2024 17:30:34 -0600
Subject: [PATCH 07/15] feat(YALB-1697): refine code comments

---
 .../content-spotlight-portrait/content-spotlights.js  | 11 ++++++-----
 1 file changed, 6 insertions(+), 5 deletions(-)

diff --git a/components/02-molecules/content-spotlight-portrait/content-spotlights.js b/components/02-molecules/content-spotlight-portrait/content-spotlights.js
index ce25533dc..fc7a137b2 100644
--- a/components/02-molecules/content-spotlight-portrait/content-spotlights.js
+++ b/components/02-molecules/content-spotlight-portrait/content-spotlights.js
@@ -8,7 +8,7 @@ Drupal.behaviors.contentSpotlights = {
     // Set an empty array to hold the current group of spotlights.
     let currentGroup = [];
 
-    // Add classes to the first and last spotlights in a group.
+    // Check if the group contains any elements
     function markFirstAndLast(group) {
       if (group.length > 0) {
         // Add classes to the first and last spotlights in a group.
@@ -22,20 +22,21 @@ Drupal.behaviors.contentSpotlights = {
       // Get the previous sibling of the current element.
       const prevSibling = element.previousElementSibling;
 
+      // Check if the previous sibling of the current element matches one of the target classes
       if (
-        // If the previous sibling exists and is a spotlight.
         prevSibling &&
         prevSibling.matches('.text-with-image, .content-spotlight-portrait')
       ) {
-        // If the previous sibling is a spotlight, add the current element to the group.
+        // Add the current element to the current group
         currentGroup.push(element);
       } else {
-        // start a new group.
+        // If the previous sibling does not match, mark the first and last elements of the previous group
         markFirstAndLast(currentGroup);
+        // Start a new group with the current element
         currentGroup = [element];
       }
 
-      // If this is the last spotlight group, add classes to the first and last spotlights in the group.
+      // If this is the last element, mark the first and last elements of the last group
       if (index === contentSpotlights.length - 1) {
         markFirstAndLast(currentGroup);
       }

From 428d40c42f82e1f004769267a8d6eac05d9e2f6f Mon Sep 17 00:00:00 2001
From: Joe Tower <joetower@gmail.com>
Date: Fri, 9 Feb 2024 17:32:47 -0600
Subject: [PATCH 08/15] feat(YALB-1697): refine code comments

---
 .../content-spotlight-portrait/content-spotlights.js           | 3 ++-
 1 file changed, 2 insertions(+), 1 deletion(-)

diff --git a/components/02-molecules/content-spotlight-portrait/content-spotlights.js b/components/02-molecules/content-spotlight-portrait/content-spotlights.js
index fc7a137b2..b5f6e30fb 100644
--- a/components/02-molecules/content-spotlight-portrait/content-spotlights.js
+++ b/components/02-molecules/content-spotlight-portrait/content-spotlights.js
@@ -1,6 +1,7 @@
 Drupal.behaviors.contentSpotlights = {
   attach(context) {
-    // Find the first and last spotlights in a group.
+    // Select all spotlight components
+    // those with the classes '.text-with-image' and '.content-spotlight-portrait'
     const contentSpotlights = context.querySelectorAll(
       '.text-with-image, .content-spotlight-portrait',
     );

From a6b582a6699a75fc679c1c506378e0201ed0ac01 Mon Sep 17 00:00:00 2001
From: Joe Tower <joetower@gmail.com>
Date: Fri, 9 Feb 2024 17:44:45 -0600
Subject: [PATCH 09/15] feat(YALB-1697): simplify using es6

---
 .../content-spotlights.js                     | 54 ++++++++-----------
 1 file changed, 21 insertions(+), 33 deletions(-)

diff --git a/components/02-molecules/content-spotlight-portrait/content-spotlights.js b/components/02-molecules/content-spotlight-portrait/content-spotlights.js
index b5f6e30fb..730f2b239 100644
--- a/components/02-molecules/content-spotlight-portrait/content-spotlights.js
+++ b/components/02-molecules/content-spotlight-portrait/content-spotlights.js
@@ -1,45 +1,33 @@
 Drupal.behaviors.contentSpotlights = {
   attach(context) {
-    // Select all spotlight components
-    // those with the classes '.text-with-image' and '.content-spotlight-portrait'
+    // Select all elements with class "text-with-image" or "content-spotlight-portrait"
     const contentSpotlights = context.querySelectorAll(
       '.text-with-image, .content-spotlight-portrait',
     );
 
-    // Set an empty array to hold the current group of spotlights.
-    let currentGroup = [];
+    // Iterate over each element
+    contentSpotlights.forEach((element) => {
+      // Check if the current element is the first element in a group
+      const isFirst =
+        !element.previousElementSibling ||
+        !element.previousElementSibling.matches(
+          '.text-with-image, .content-spotlight-portrait',
+        );
+      // Check if the current element is the last element in a group
+      const isLast =
+        !element.nextElementSibling ||
+        !element.nextElementSibling.matches(
+          '.text-with-image, .content-spotlight-portrait',
+        );
 
-    // Check if the group contains any elements
-    function markFirstAndLast(group) {
-      if (group.length > 0) {
-        // Add classes to the first and last spotlights in a group.
-        group[0].classList.add('spotlights--first');
-        group[group.length - 1].classList.add('spotlights--last');
+      // Add "spotlights--first" class if the current element is the first element in a group
+      if (isFirst) {
+        element.classList.add('spotlights--first');
       }
-    }
 
-    // Loop through the spotlights and group them.
-    contentSpotlights.forEach((element, index) => {
-      // Get the previous sibling of the current element.
-      const prevSibling = element.previousElementSibling;
-
-      // Check if the previous sibling of the current element matches one of the target classes
-      if (
-        prevSibling &&
-        prevSibling.matches('.text-with-image, .content-spotlight-portrait')
-      ) {
-        // Add the current element to the current group
-        currentGroup.push(element);
-      } else {
-        // If the previous sibling does not match, mark the first and last elements of the previous group
-        markFirstAndLast(currentGroup);
-        // Start a new group with the current element
-        currentGroup = [element];
-      }
-
-      // If this is the last element, mark the first and last elements of the last group
-      if (index === contentSpotlights.length - 1) {
-        markFirstAndLast(currentGroup);
+      // Add "spotlights--last" class if the current element is the last element in a group
+      if (isLast) {
+        element.classList.add('spotlights--last');
       }
     });
   },

From 82696cadb09e3c91a7089af37a90d557a9e29428 Mon Sep 17 00:00:00 2001
From: Joe Tower <joetower@gmail.com>
Date: Fri, 9 Feb 2024 17:56:04 -0600
Subject: [PATCH 10/15] feat(YALB-1697): store classes to evaluate in a
 variable to keep it DRY

---
 .../content-spotlights.js                          | 14 +++++---------
 1 file changed, 5 insertions(+), 9 deletions(-)

diff --git a/components/02-molecules/content-spotlight-portrait/content-spotlights.js b/components/02-molecules/content-spotlight-portrait/content-spotlights.js
index 730f2b239..4a867c6e8 100644
--- a/components/02-molecules/content-spotlight-portrait/content-spotlights.js
+++ b/components/02-molecules/content-spotlight-portrait/content-spotlights.js
@@ -1,24 +1,20 @@
 Drupal.behaviors.contentSpotlights = {
   attach(context) {
+    // Define the selectors to check and store them in a variable
+    const selectorsToCheck = '.text-with-image, .content-spotlight-portrait';
     // Select all elements with class "text-with-image" or "content-spotlight-portrait"
-    const contentSpotlights = context.querySelectorAll(
-      '.text-with-image, .content-spotlight-portrait',
-    );
+    const contentSpotlights = context.querySelectorAll(selectorsToCheck);
 
     // Iterate over each element
     contentSpotlights.forEach((element) => {
       // Check if the current element is the first element in a group
       const isFirst =
         !element.previousElementSibling ||
-        !element.previousElementSibling.matches(
-          '.text-with-image, .content-spotlight-portrait',
-        );
+        !element.previousElementSibling.matches(selectorsToCheck);
       // Check if the current element is the last element in a group
       const isLast =
         !element.nextElementSibling ||
-        !element.nextElementSibling.matches(
-          '.text-with-image, .content-spotlight-portrait',
-        );
+        !element.nextElementSibling.matches(selectorsToCheck);
 
       // Add "spotlights--first" class if the current element is the first element in a group
       if (isFirst) {

From 0dc68e0f3befe4a48760263dbb85c8381071c55b Mon Sep 17 00:00:00 2001
From: Joe Tower <joetower@gmail.com>
Date: Mon, 12 Feb 2024 11:48:37 -0600
Subject: [PATCH 11/15] feat(YALB-1697): fix width on offset portrait spotlight

---
 .../_yds-content-spotlight-portrait.scss                      | 4 +---
 1 file changed, 1 insertion(+), 3 deletions(-)

diff --git a/components/02-molecules/content-spotlight-portrait/_yds-content-spotlight-portrait.scss b/components/02-molecules/content-spotlight-portrait/_yds-content-spotlight-portrait.scss
index 50e31586e..83353c0bc 100644
--- a/components/02-molecules/content-spotlight-portrait/_yds-content-spotlight-portrait.scss
+++ b/components/02-molecules/content-spotlight-portrait/_yds-content-spotlight-portrait.scss
@@ -126,13 +126,11 @@ $component-content-spotlight-port-themes: map.deep-get(
     gap: var(--size-spacing-8);
     align-items: center;
 
-    // When offset, vertically center the content with the image
+    // When offset, increase the
     [data-image-style='offset'] & {
       --component-width: calc(
         var(--size-component-layout-width-site) + var(--size-spacing-10)
       );
-
-      max-width: 100%;
     }
   }
 }

From a3512dc249af52df3d5fecd11a69aef419163363 Mon Sep 17 00:00:00 2001
From: Joe Tower <joetower@gmail.com>
Date: Mon, 12 Feb 2024 13:38:24 -0600
Subject: [PATCH 12/15] feat(YALB-1697): change classes for data-attributes

---
 .../_yds-content-spotlight-portrait.scss                    | 4 ++--
 .../content-spotlight-portrait/content-spotlights.js        | 6 +++---
 .../02-molecules/text-with-image/_yds-text-with-image.scss  | 4 ++--
 3 files changed, 7 insertions(+), 7 deletions(-)

diff --git a/components/02-molecules/content-spotlight-portrait/_yds-content-spotlight-portrait.scss b/components/02-molecules/content-spotlight-portrait/_yds-content-spotlight-portrait.scss
index 83353c0bc..5d95aa644 100644
--- a/components/02-molecules/content-spotlight-portrait/_yds-content-spotlight-portrait.scss
+++ b/components/02-molecules/content-spotlight-portrait/_yds-content-spotlight-portrait.scss
@@ -23,11 +23,11 @@ $component-content-spotlight-port-themes: map.deep-get(
   }
 
   // We're using JavaScript to evaluate the last and first spotlights in a group of spotlights
-  &.spotlights--first {
+  &[data-spotlights-position='first'] {
     margin-top: var(--size-spacing-10);
   }
 
-  &.spotlights--last {
+  &[data-spotlights-position='last'] {
     margin-bottom: var(--size-spacing-10);
   }
 
diff --git a/components/02-molecules/content-spotlight-portrait/content-spotlights.js b/components/02-molecules/content-spotlight-portrait/content-spotlights.js
index 4a867c6e8..64d396498 100644
--- a/components/02-molecules/content-spotlight-portrait/content-spotlights.js
+++ b/components/02-molecules/content-spotlight-portrait/content-spotlights.js
@@ -16,14 +16,14 @@ Drupal.behaviors.contentSpotlights = {
         !element.nextElementSibling ||
         !element.nextElementSibling.matches(selectorsToCheck);
 
-      // Add "spotlights--first" class if the current element is the first element in a group
+      // Sets data-spotlights-position to "first" if the current element is the first element in a group
       if (isFirst) {
-        element.classList.add('spotlights--first');
+        element.setAttribute('data-spotlights-position', 'first');
       }
 
       // Add "spotlights--last" class if the current element is the last element in a group
       if (isLast) {
-        element.classList.add('spotlights--last');
+        element.setAttribute('data-spotlights-position', 'last');
       }
     });
   },
diff --git a/components/02-molecules/text-with-image/_yds-text-with-image.scss b/components/02-molecules/text-with-image/_yds-text-with-image.scss
index 97aebf005..03730a179 100644
--- a/components/02-molecules/text-with-image/_yds-text-with-image.scss
+++ b/components/02-molecules/text-with-image/_yds-text-with-image.scss
@@ -19,11 +19,11 @@ $component-content-spotlight-themes: map.deep-get(
   }
 
   // We're using JavaScript to evaluate the last and first spotlights in a group of spotlights
-  &.spotlights--first {
+  &[data-spotlights-position='first'] {
     margin-top: var(--size-spacing-10);
   }
 
-  &.spotlights--last {
+  &[data-spotlights-position='last'] {
     margin-bottom: var(--size-spacing-10);
   }
 

From 57eb0900c85acd704ad87a7c9c3830a40adb1315 Mon Sep 17 00:00:00 2001
From: Joe Tower <joetower@gmail.com>
Date: Mon, 12 Feb 2024 13:38:59 -0600
Subject: [PATCH 13/15] feat(YALB-1697): update comment

---
 .../content-spotlight-portrait/content-spotlights.js            | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/components/02-molecules/content-spotlight-portrait/content-spotlights.js b/components/02-molecules/content-spotlight-portrait/content-spotlights.js
index 64d396498..0555ffec6 100644
--- a/components/02-molecules/content-spotlight-portrait/content-spotlights.js
+++ b/components/02-molecules/content-spotlight-portrait/content-spotlights.js
@@ -21,7 +21,7 @@ Drupal.behaviors.contentSpotlights = {
         element.setAttribute('data-spotlights-position', 'first');
       }
 
-      // Add "spotlights--last" class if the current element is the last element in a group
+      // Sets data-spotlights-position to "last" if the current element is the first element in a group
       if (isLast) {
         element.setAttribute('data-spotlights-position', 'last');
       }

From f91c8a14397a2386e5bb4bb25d453fc9fb174b9b Mon Sep 17 00:00:00 2001
From: Joe Tower <joetower@gmail.com>
Date: Mon, 12 Feb 2024 17:00:02 -0600
Subject: [PATCH 14/15] feat(YALB-1697): add condition if a spotlight is the
 only spotlight, add top & bottom margin

---
 .../_yds-content-spotlight-portrait.scss                      | 3 ++-
 .../content-spotlight-portrait/content-spotlights.js          | 4 ++++
 .../02-molecules/text-with-image/_yds-text-with-image.scss    | 3 ++-
 3 files changed, 8 insertions(+), 2 deletions(-)

diff --git a/components/02-molecules/content-spotlight-portrait/_yds-content-spotlight-portrait.scss b/components/02-molecules/content-spotlight-portrait/_yds-content-spotlight-portrait.scss
index 5d95aa644..f826e4120 100644
--- a/components/02-molecules/content-spotlight-portrait/_yds-content-spotlight-portrait.scss
+++ b/components/02-molecules/content-spotlight-portrait/_yds-content-spotlight-portrait.scss
@@ -18,7 +18,8 @@ $component-content-spotlight-port-themes: map.deep-get(
   --color-text-shadow: var(--color-basic-white);
 
   // if we're not using a component theme, add top and bottom margin
-  &[data-component-theme='default'] {
+  &[data-component-theme='default'],
+  &[data-spotlights-position='single'] {
     @include tokens.spacing-page-section;
   }
 
diff --git a/components/02-molecules/content-spotlight-portrait/content-spotlights.js b/components/02-molecules/content-spotlight-portrait/content-spotlights.js
index 0555ffec6..8807b3d5c 100644
--- a/components/02-molecules/content-spotlight-portrait/content-spotlights.js
+++ b/components/02-molecules/content-spotlight-portrait/content-spotlights.js
@@ -25,6 +25,10 @@ Drupal.behaviors.contentSpotlights = {
       if (isLast) {
         element.setAttribute('data-spotlights-position', 'last');
       }
+
+      if (isFirst && isLast) {
+        element.setAttribute('data-spotlights-position', 'single');
+      }
     });
   },
 };
diff --git a/components/02-molecules/text-with-image/_yds-text-with-image.scss b/components/02-molecules/text-with-image/_yds-text-with-image.scss
index 03730a179..a5df2a263 100644
--- a/components/02-molecules/text-with-image/_yds-text-with-image.scss
+++ b/components/02-molecules/text-with-image/_yds-text-with-image.scss
@@ -14,7 +14,8 @@ $component-content-spotlight-themes: map.deep-get(
   --color-text-shadow: var(--color-basic-white);
 
   // if we're not using a component theme, add top and bottom margin
-  &[data-component-theme='default'] {
+  &[data-component-theme='default'],
+  &[data-spotlights-position='single'] {
     @include tokens.spacing-page-section;
   }
 

From 314da8b269854b7864f9c64557c3f20f009632ca Mon Sep 17 00:00:00 2001
From: Joe Tower <joetower@gmail.com>
Date: Tue, 13 Feb 2024 08:53:06 -0600
Subject: [PATCH 15/15] feat(YALB-1697): change the name of the
 data-spotlights-position to first-and-last

---
 .../_yds-content-spotlight-portrait.scss                     | 5 +++--
 .../content-spotlight-portrait/content-spotlights.js         | 2 +-
 .../02-molecules/text-with-image/_yds-text-with-image.scss   | 3 ++-
 3 files changed, 6 insertions(+), 4 deletions(-)

diff --git a/components/02-molecules/content-spotlight-portrait/_yds-content-spotlight-portrait.scss b/components/02-molecules/content-spotlight-portrait/_yds-content-spotlight-portrait.scss
index f826e4120..4c7529ce7 100644
--- a/components/02-molecules/content-spotlight-portrait/_yds-content-spotlight-portrait.scss
+++ b/components/02-molecules/content-spotlight-portrait/_yds-content-spotlight-portrait.scss
@@ -18,8 +18,9 @@ $component-content-spotlight-port-themes: map.deep-get(
   --color-text-shadow: var(--color-basic-white);
 
   // if we're not using a component theme, add top and bottom margin
+  // Or if the spotlight is the only spotlight on the page
   &[data-component-theme='default'],
-  &[data-spotlights-position='single'] {
+  &[data-spotlights-position='first-and-last'] {
     @include tokens.spacing-page-section;
   }
 
@@ -32,7 +33,7 @@ $component-content-spotlight-port-themes: map.deep-get(
     margin-bottom: var(--size-spacing-10);
   }
 
-  // if we're using a component theme, add padding and set background-color and color;
+  // If we're using a component theme, add padding and set background-color and color;
   &:not([data-component-theme='default']) {
     padding-block-start: var(--size-spacing-10);
     padding-block-end: var(--size-spacing-10);
diff --git a/components/02-molecules/content-spotlight-portrait/content-spotlights.js b/components/02-molecules/content-spotlight-portrait/content-spotlights.js
index 8807b3d5c..ffc72b00b 100644
--- a/components/02-molecules/content-spotlight-portrait/content-spotlights.js
+++ b/components/02-molecules/content-spotlight-portrait/content-spotlights.js
@@ -27,7 +27,7 @@ Drupal.behaviors.contentSpotlights = {
       }
 
       if (isFirst && isLast) {
-        element.setAttribute('data-spotlights-position', 'single');
+        element.setAttribute('data-spotlights-position', 'first-and-last');
       }
     });
   },
diff --git a/components/02-molecules/text-with-image/_yds-text-with-image.scss b/components/02-molecules/text-with-image/_yds-text-with-image.scss
index a5df2a263..3d5613305 100644
--- a/components/02-molecules/text-with-image/_yds-text-with-image.scss
+++ b/components/02-molecules/text-with-image/_yds-text-with-image.scss
@@ -14,8 +14,9 @@ $component-content-spotlight-themes: map.deep-get(
   --color-text-shadow: var(--color-basic-white);
 
   // if we're not using a component theme, add top and bottom margin
+  // Or if the spotlight is the only spotlight on the page
   &[data-component-theme='default'],
-  &[data-spotlights-position='single'] {
+  &[data-spotlights-position='first-and-last'] {
     @include tokens.spacing-page-section;
   }