Merge pull request #338 from yalesites-org/develop

Release
yalesites-org · Feb 26, 2024 · 5fc95e6 · 5fc95e6
2 parents c421736 + 82e2c89
commit 5fc95e6
Show file tree

Hide file tree

Showing 13 changed files with 133 additions and 56 deletions.
diff --git a/components/01-atoms/controls/text-link/_yds-text-link.scss b/components/01-atoms/controls/text-link/_yds-text-link.scss
@@ -264,6 +264,12 @@ $global-link-themes: map.deep-get(tokens.$tokens, 'global-themes');
     align-items: center;
     width: fit-content;
     background-size: calc(100% - var(--size-spacing-3)) var(--thickness);
+
+    // Footer elements with a dark background can't have white shadows
+    // so this overrides it to match the current background color of the footer.
+    .site-footer__secondary & {
+      --color-text-shadow: var(--color-site-footer-background-color);
+    }
   }
 
   &[data-link-style='no-underline'] {

diff --git a/components/01-atoms/forms/select/_yds-select.scss b/components/01-atoms/forms/select/_yds-select.scss
@@ -19,11 +19,11 @@
     right: 1em;
     height: 1rem;
     width: 1rem;
-    z-index: 2;
     background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 384 512' fill='%239C9C9C'%3E%3C!--! Font Awesome Pro 6.1.1 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license (Commercial License) Copyright 2022 Fonticons, Inc. --%3E%3Cpath d='M360.5 217.5l-152 143.1C203.9 365.8 197.9 368 192 368s-11.88-2.188-16.5-6.562L23.5 217.5C13.87 208.3 13.47 193.1 22.56 183.5C31.69 173.8 46.94 173.5 56.5 182.6L192 310.9l135.5-128.4c9.562-9.094 24.75-8.75 33.94 .9375C370.5 193.1 370.1 208.3 360.5 217.5z'/%3E%3C/svg%3E");
     background-repeat: no-repeat;
     background-position: center;
     background-size: 1rem;
+    z-index: 0;
 
     /* These hacks make the select behind the arrow clickable in some browsers */
     pointer-events: none;

diff --git a/components/02-molecules/cards/custom-card/_yds-custom-card.scss b/components/02-molecules/cards/custom-card/_yds-custom-card.scss
@@ -23,12 +23,12 @@ $global-card-themes: map.deep-get(tokens.$tokens, 'global-themes');
   column-gap: var(--size-spacing-6);
   grid-template-areas: 'image content';
 
-  [data-collection-featured='false'] &,
   &[data-with-image='false'] {
     grid-template-areas:
       'image'
       'content';
     grid-template-columns: 1fr;
+    border: var(--card-border);
   }
 
   &:hover {
@@ -58,10 +58,6 @@ $global-card-themes: map.deep-get(tokens.$tokens, 'global-themes');
     }
   }
 
-  &[data-with-image='false'] {
-    border: var(--card-border);
-  }
-
   // Global themes: set color slots for each theme
   // This establishes `--color-slot-` variables name-spaced to the selector
   // in which it is used. We can map component-level variables to global-level
@@ -85,8 +81,7 @@ $global-card-themes: map.deep-get(tokens.$tokens, 'global-themes');
   padding: var(--size-spacing-5) 0;
   grid-area: content;
 
-  [data-with-image='false'] &,
-  [data-collection-featured='false'] [data-with-image='true'] & {
+  [data-with-image='false'] & {
     padding: var(--size-spacing-5);
 
     @media (min-width: tokens.$break-m) {
@@ -98,10 +93,6 @@ $global-card-themes: map.deep-get(tokens.$tokens, 'global-themes');
   @media (min-width: tokens.$break-m) {
     padding: var(--size-spacing-5) var(--size-spacing-6);
 
-    [data-collection-featured='false'] {
-      padding: var(--size-spacing-5);
-    }
-
     [data-with-image='true'] & {
       border-top: 0;
       border-left: var(--card-border);
@@ -182,13 +173,3 @@ $global-card-themes: map.deep-get(tokens.$tokens, 'global-themes');
     }
   }
 }
-
-.custom-card__image img {
-  [data-collection-featured='false'] & {
-    display: none;
-
-    @media (min-width: tokens.$break-s) {
-      display: block;
-    }
-  }
-}
diff --git a/components/02-molecules/cards/directory-listing-card/_yds-directory-listing-card.scss b/components/02-molecules/cards/directory-listing-card/_yds-directory-listing-card.scss
@@ -1,5 +1,6 @@
 @use '../../../00-tokens/tokens';
 @use '../../../01-atoms/atoms';
+@use '../../../01-atoms/controls/text-link/yds-text-link' as link;
 
 $break-directory-card-collection-max: tokens.$break-m - 0.05;
 $break-directory-card-collection-list-image-max: tokens.$break-s - 0.05;
@@ -127,6 +128,10 @@ $break-directory-card-collection-list-image-max: tokens.$break-s - 0.05;
   }
 }
 
+.directory-listing-card__link {
+  @include link.plain-link;
+}
+
 .directory-listing-card__email {
   @include tokens.body-default-condensed;
 

diff --git a/components/02-molecules/cards/directory-listing-card/yds-directory-listing-card.twig b/components/02-molecules/cards/directory-listing-card/yds-directory-listing-card.twig
@@ -46,11 +46,11 @@
         } %}
       {% endif %}
       {% if directory_listing_card__email %}
-        {% include "@atoms/typography/text/yds-text.twig" with {
-          text__base_class: 'email',
-          text__blockname: directory_listing_card__base_class,
-          text__content: directory_listing_card__email,
-        } %}
+        {% include "@atoms/controls/text-link/yds-text-link.twig" with {
+          link__url: directory_listing_card_link__url|default('mailto:' ~ directory_listing_card__email),
+          link__content: directory_listing_card_link__content|default('Email'),
+          link__blockname: directory_listing_card__base_class,
+        }%}
       {% endif %}
       {% if directory_listing_card__phone %}
         {% include "@atoms/typography/text/yds-text.twig" with {

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
@@ -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%;
     }
   }
 }

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
@@ -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
@@ -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');
+      }
+    });
+  },
+};
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
@@ -41,11 +41,13 @@
         } %}
       {% endif %}
       {# Heading #}
-      {% include "@atoms/typography/headings/yds-heading.twig" with {
-        heading: content_spotlight_portrait__heading,
-        heading__level: '2',
-        heading__blockname: content_spotlight_portrait__base_class,
-      } %}
+      {% if content_spotlight_portrait__heading %}
+        {% include "@atoms/typography/headings/yds-heading.twig" with {
+          heading: content_spotlight_portrait__heading,
+          heading__level: '2',
+          heading__blockname: content_spotlight_portrait__base_class,
+        } %}
+      {% endif %}
       {# Subheading #}
       {% if content_spotlight_portrait__subheading %}
         {% include "@atoms/typography/text/yds-text.twig" with {

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
@@ -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

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
@@ -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
@@ -41,11 +41,13 @@
         } %}
       {% endif %}
       {# Heading #}
-      {% include "@atoms/typography/headings/yds-heading.twig" with {
-        heading: text_with_image__heading,
-        heading__level: '2',
-        heading__blockname: text_with_image__base_class,
-      } %}
+      {% if text_with_image__heading %}
+        {% include "@atoms/typography/headings/yds-heading.twig" with {
+          heading: text_with_image__heading,
+          heading__level: '2',
+          heading__blockname: text_with_image__base_class,
+        } %}
+      {% endif %}
       {# Subheading #}
       {% if text_with_image__subheading %}
         {% include "@atoms/typography/text/yds-text.twig" with {

diff --git 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>
@@ -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: [