Merge pull request #282 from yalesites-org/develop

Release
yalesites-org · Aug 18, 2023 · a0dbe21 · a0dbe21
2 parents 905812d + 63b2104
commit a0dbe21
Show file tree

Hide file tree

Showing 37 changed files with 602 additions and 122 deletions.
diff --git a/components/00-tokens/effects/_effects.scss b/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;
     }
   }
 }
@@ -97,3 +100,49 @@
 
   background-size: 0 var(--thickness);
 }
+
+// Animate upward on hover: cards
+@mixin rise-effect($amount: -0.25em) {
+  @media (prefers-reduced-motion: no-preference) {
+    transform: translateY(0);
+
+    &:hover {
+      transform: translateY($amount);
+      color: var(--color-cta-text);
+      background-color: var(--color-cta-bg);
+    }
+  }
+}
+
+// Animate center outwards: divider
+@mixin expand-out {
+  // only set scale to 0 if animation can run
+  @media (prefers-reduced-motion: no-preference) {
+    transform: scaleX(0);
+
+    &.animate {
+      transform: scaleX(1);
+    }
+  }
+}
+
+// Animate and fade-in upwards: pull quote
+@mixin fade-in-up {
+  // only run animation if animation can run
+  @media (prefers-reduced-motion: no-preference) {
+    opacity: 0;
+    transform: translate3d(0, 100%, 0);
+
+    &.animate {
+      opacity: 1;
+      transform: translate3d(0, 0, 0);
+    }
+  }
+}
+
+@mixin expand-height($height: 100%) {
+  // only run animation if animation can run
+  @media (prefers-reduced-motion: no-preference) {
+    height: $height;
+  }
+}
diff --git a/components/00-tokens/effects/yds-animate.js b/components/00-tokens/effects/yds-animate.js
@@ -0,0 +1,50 @@
+Drupal.behaviors.animateItems = {
+  attach(context) {
+    // Check if animation is active in site settings.
+    const siteAnimationTheme = context.querySelector('[data-site-animation]');
+
+    // Set variable to check that the animation theme isn't the default.
+    const siteAnimationEnabled =
+      siteAnimationTheme.getAttribute('data-site-animation') !== 'default';
+
+    // Select all elements with [data-animate-item] attribute
+    const elementsToAnimate = context.querySelectorAll(
+      '[data-animate-item="true"]',
+    );
+
+    // Check if the user prefers reduced motion
+    const prefersReducedMotionNoPref = window.matchMedia(
+      '(prefers-reduced-motion: no-preference)',
+    ).matches;
+
+    // Create a new Intersection Observer
+    const observer = new IntersectionObserver((entries) => {
+      entries.forEach((entry) => {
+        const animatedElement = entry.target;
+
+        if (entry.isIntersecting) {
+          // If the element is in the viewport, add the 'animate' class
+          animatedElement.classList.add('animate');
+        }
+      });
+    });
+    // Only add observer if siteAnimationEnabled, there are elements to animate,
+    // and if user hasn't enabled reduced motion.
+    if (
+      elementsToAnimate &&
+      siteAnimationEnabled &&
+      prefersReducedMotionNoPref
+    ) {
+      // Observe each .divider element
+      elementsToAnimate.forEach((animatedElement) => {
+        observer.observe(animatedElement);
+      });
+    }
+    // Set each component to data-animate-item false if prefers reduced motion.
+    if (!prefersReducedMotionNoPref) {
+      elementsToAnimate.forEach((reducedMotionElement) => {
+        reducedMotionElement.setAttribute('data-animate-item', 'false');
+      });
+    }
+  },
+};
diff --git a/components/00-tokens/typography/_typography.scss b/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;
+}
diff --git a/components/01-atoms/divider/_yds-divider.scss b/components/01-atoms/divider/_yds-divider.scss
@@ -29,4 +29,15 @@ $divider-positions: left, center;
   background: var(--color-divider);
   width: var(--width-divider);
   height: var(--thickness-divider);
+
+  // if animation is active
+  [data-site-animation='artistic'] & {
+    &[data-animate-item='true'] {
+      @include tokens.animate(
+        $property: 'transform',
+        $duration: var(--animation-speed-slow)
+      );
+      @include tokens.expand-out;
+    }
+  }
 }
diff --git a/components/01-atoms/divider/divider.stories.js b/components/01-atoms/divider/divider.stories.js
@@ -3,6 +3,7 @@ import tokens from '@yalesites-org/tokens/build/json/tokens.json';
 import dividerTwig from './yds-divider.twig';
 
 import './cl-dividers.scss';
+import '../../00-tokens/effects/yds-animate';
 
 const layoutOptions = ['left', 'center'];
 const thicknessOptions = Object.keys(tokens.border.thickness);

diff --git a/components/01-atoms/divider/yds-divider.twig b/components/01-atoms/divider/yds-divider.twig
@@ -9,6 +9,7 @@
 {% set divider__position = divider__position|default('center')|lower %}
 {% set divider__width = divider__width|default('100') %}
 {% set divider__component_width = divider__component_width|default('site') %}
+{% set divider__attributes = divider__attributes|default({}) %}
 
 {% set divider__wrapper__attributes = {
   'data-component-width': divider__component_width,
@@ -20,15 +21,19 @@
   class: bem('inner', [], divider__base_class),
 } %}
 
-{% set divider__attributes = {
+{% if animate__item == true %}
+	{% set divider__attributes = divider__attributes|merge({
+    'data-animate-item': animate__item,
+  }) %}
+{% endif %}
+
+{% set divider__attributes = divider__attributes|merge({
   class: bem(divider__base_class),
   'data-divider-width': divider__width,
-} %}
+}) %}
 
-<div {{ add_attributes(divider__wrapper__attributes) }}>
-  {% block prefix_suffix %}
-  {% endblock %}
-  <div {{ add_attributes(divider__inner__attributes) }}>
-    <div {{ add_attributes(divider__attributes) }}></div>
-  </div>
+<div {{ add_attributes(divider__wrapper__attributes) }}> {% block prefix_suffix %}{% endblock %}
+	<div {{ add_attributes(divider__inner__attributes) }}>
+		<div {{ add_attributes(divider__attributes) }}></div>
+	</div>
 </div>
diff --git a/components/02-molecules/cards/custom-card/_yds-custom-card.scss b/components/02-molecules/cards/custom-card/_yds-custom-card.scss
@@ -7,6 +7,12 @@ $global-card-themes: map.deep-get(tokens.$tokens, 'global-themes');
 .custom-card {
   @include atoms.clickable-component-heading-link;
 
+  // only animate if animation is enabled in site configuration.
+  [data-site-animation='artistic'] & {
+    @include tokens.animate($property: 'transform');
+    @include tokens.rise-effect;
+  }
+
   --card-border: 1px solid var(--color-gray-200);
   --color-text-shadow: var(--color-basic-white);
   --color-card-bar-long: var(--color-blue-light);

diff --git a/components/02-molecules/cards/directory-listing-card/directory-listing-card.stories.js b/components/02-molecules/cards/directory-listing-card/directory-listing-card.stories.js
@@ -64,7 +64,7 @@ export const ProfileCardDirectoryListing = ({
   <div class='card-collection__inner'>
     <ul class='card-collection__cards'>
       ${directoryCardTwig({
-        card_example_type: 'profile',
+        card_collection__source_type: 'profile',
         card_collection__type: collectionType,
         ...imageData.responsive_images['1x1'],
         directory_listing_card__overline: overline,

diff --git a/components/02-molecules/cards/reference-card/_yds-reference-card.scss b/components/02-molecules/cards/reference-card/_yds-reference-card.scss
@@ -8,6 +8,12 @@ $break-card-collection-list-image-max: tokens.$break-s - 0.05;
   @include atoms.clickable-component-heading-link;
   @include atoms.clickable-component-image;
 
+  // only animate if animation is enabled in site configuration.
+  [data-site-animation='artistic'] & {
+    @include tokens.animate($property: 'transform');
+    @include tokens.rise-effect;
+  }
+
   --color-text-shadow: var(--color-basic-white);
 
   display: flex;
@@ -33,9 +39,13 @@ $break-card-collection-list-image-max: tokens.$break-s - 0.05;
   }
 
   [data-collection-type='condensed'] & {
-    padding-bottom: var(--size-spacing-5);
+    padding-bottom: var(--size-spacing-6);
     border-bottom: var(--border-thickness-1) solid var(--color-divider);
     margin-bottom: var(--size-spacing-5);
+
+    &:hover {
+      box-shadow: var(--drop-shadow-level-1-bottom-shadow-only);
+    }
   }
 }
 
@@ -186,7 +196,7 @@ $break-card-collection-list-image-max: tokens.$break-s - 0.05;
   }
 
   [data-collection-type='condensed'][data-collection-featured='true'] & {
-    @include tokens.h5-yale-new;
+    @include tokens.h4-yale-new;
 
     font-weight: var(--font-weights-yalenew-bold);
   }

diff --git a/components/02-molecules/cards/reference-card/examples/_card--examples.twig b/components/02-molecules/cards/reference-card/examples/_card--examples.twig
@@ -1,5 +1,5 @@
 {% set reference_card__date__formatted %}
-  {% set date_time__format = card_example_type == 'post' ? 'date' %}
+  {% set date_time__format = card_collection__source_type == 'post' ? 'date' %}
   {% include "@atoms/date-time/yds-date-time.twig" with {
     date_time__start: reference_card__date,
   } %}
@@ -13,7 +13,7 @@
 {% endset %}
 
 {# Post Card #}
-{% if card_example_type == 'post' %}
+{% if card_collection__source_type == 'post' %}
   {% set reference_card__overline = reference_card__date__formatted %}
   {# If post, list, and not freatured, hide snippet. #}
   {% if card_collection__type == 'list' and card_collection__featured == 'false' %}
@@ -27,7 +27,7 @@
   {% endif %}
 
 {# Profile Card #}
-{% elseif card_example_type == 'profile' %}
+{% elseif card_collection__source_type == 'profile' %}
   {# If post, list, and not freatured, hide snippet. #}
   {% if card_collection__type == 'list' and card_collection__featured == 'false' %}
     {% set reference_card__subheading = null %}
@@ -40,7 +40,7 @@
   {% endif %}
 
 {# Event Card #}
-{% elseif card_example_type == 'event' %}
+{% elseif card_collection__source_type == 'event' %}
   {# If a format is provided, put it in the overline #}
   {% if format %}
     {% set reference_card__overline %}
@@ -71,7 +71,7 @@
   {% endif %}
 {% endif %}
 
-{% if card_example_type == 'directory-listing' %}
+{% if card_collection__source_type == 'directory-listing' %}
   {% include "@molecules/cards/directory-listing-card/yds-directory-listing-card.twig" %}
 {% else %}
   {% include "@molecules/cards/reference-card/yds-reference-card.twig" %}

diff --git a/components/02-molecules/cards/reference-card/reference-card.stories.js b/components/02-molecules/cards/reference-card/reference-card.stories.js
@@ -56,7 +56,7 @@ export const PostCard = ({
   <div class='card-collection__inner'>
     <ul class='card-collection__cards'>
       ${referenceCardTwig({
-        card_example_type: 'post',
+        card_collection__source_type: 'post',
         card_collection__type: collectionType,
         ...imageData.responsive_images['3x2'],
         reference_card__date: date,
@@ -90,7 +90,7 @@ export const EventCard = ({
   <div class='card-collection__inner'>
     <ul class='card-collection__cards'>
       ${referenceCardTwig({
-        card_example_type: 'event',
+        card_collection__source_type: 'event',
         card_collection__type: collectionType,
         ...imageData.responsive_images['3x2'],
         format,
@@ -118,7 +118,7 @@ export const ProfileCard = ({ collectionType, featured }) => `
   <div class='card-collection__inner'>
     <ul class='card-collection__cards'>
       ${referenceCardTwig({
-        card_example_type: 'profile',
+        card_collection__source_type: 'profile',
         card_collection__type: collectionType,
         ...imageData.responsive_images['1x1'],
         reference_card__heading: