YALB-1697: Bug: Margin for spotlights

components/02-molecules/content-spotlight-portrait/_yds-content-spotlight-portrait.scss

@@ -17,23 +17,28 @@ $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'] {
+  // 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='first-and-last'] {
     @include tokens.spacing-page-section;
+  }
+
+  // We're using JavaScript to evaluate the last and first spotlights in a group of spotlights
+  &[data-spotlights-position='first'] {
+    margin-top: var(--size-spacing-10);
+  }
 
-    margin-block-start: var(--spacing-page-section);
+  &[data-spotlights-position='last'] {
+    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);
     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;
-    }
   }
 
   // Component themes defaults: iterate over each component theme to establish
@@ -123,13 +128,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%;
     }
   }
 }

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']);
 
 /**

components/02-molecules/content-spotlight-portrait/content-spotlights.js

@@ -0,0 +1,34 @@
+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(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(selectorsToCheck);
+      // Check if the current element is the last element in a group
+      const isLast =
+        !element.nextElementSibling ||
+        !element.nextElementSibling.matches(selectorsToCheck);
+
+      // Sets data-spotlights-position to "first" if the current element is the first element in a group
+      if (isFirst) {
+        element.setAttribute('data-spotlights-position', 'first');
+      }
+
+      // 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');
+      }
+
+      if (isFirst && isLast) {
+        element.setAttribute('data-spotlights-position', 'first-and-last');
+      }
+    });
+  },
+};

components/02-molecules/text-with-image/_yds-text-with-image.scss

@@ -13,10 +13,20 @@ $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'] {
+  // 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='first-and-last'] {
     @include tokens.spacing-page-section;
+  }
+
+  // We're using JavaScript to evaluate the last and first spotlights in a group of spotlights
+  &[data-spotlights-position='first'] {
+    margin-top: var(--size-spacing-10);
+  }
 
-    margin-block-start: var(--spacing-page-section);
+  &[data-spotlights-position='last'] {
+    margin-bottom: var(--size-spacing-10);
   }
 
   // if we're using a component theme, add padding and set background-color and color;
@@ -25,11 +35,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-block-start: var(--spacing-page-section);
-
-    + .content-spotlight-portrait:not([data-component-theme='default']) {
-      margin-block-start: 0;
-    }
   }
 
   // Component themes defaults: iterate over each component theme to establish

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.
  */

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>
@@ -94,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: [