diff --git a/components/00-tokens/effects/yds-animate.js b/components/00-tokens/effects/yds-animate.js index 99395ef97..616ce0fb0 100644 --- a/components/00-tokens/effects/yds-animate.js +++ b/components/00-tokens/effects/yds-animate.js @@ -9,7 +9,7 @@ Drupal.behaviors.animateItems = { // Select all elements with [data-animate-item] attribute const elementsToAnimate = context.querySelectorAll( - '[data-animate-item="true"]', + '[data-animate-item="enabled"]', ); // Check if the user prefers reduced motion @@ -43,7 +43,7 @@ Drupal.behaviors.animateItems = { // Set each component to data-animate-item false if prefers reduced motion. if (!prefersReducedMotionNoPref) { elementsToAnimate.forEach((reducedMotionElement) => { - reducedMotionElement.setAttribute('data-animate-item', 'false'); + reducedMotionElement.setAttribute('data-animate-item', 'disabled'); }); } }, diff --git a/components/01-atoms/divider/_yds-divider.scss b/components/01-atoms/divider/_yds-divider.scss index 0e7391c7f..01937cfe2 100644 --- a/components/01-atoms/divider/_yds-divider.scss +++ b/components/01-atoms/divider/_yds-divider.scss @@ -32,7 +32,7 @@ $divider-positions: left, center; // if animation is active [data-site-animation='artistic'] & { - &[data-animate-item='true'] { + &[data-animate-item='enabled'] { @include tokens.animate( $property: 'transform', $duration: var(--animation-speed-slow) diff --git a/components/01-atoms/divider/yds-divider.twig b/components/01-atoms/divider/yds-divider.twig index e9db221dd..1e12f1ad2 100644 --- a/components/01-atoms/divider/yds-divider.twig +++ b/components/01-atoms/divider/yds-divider.twig @@ -21,11 +21,9 @@ class: bem('inner', [], divider__base_class), } %} -{% if animate__item == true %} - {% set divider__attributes = divider__attributes|merge({ - 'data-animate-item': animate__item, - }) %} -{% endif %} +{% set divider__attributes = divider__attributes|merge({ + 'data-animate-item': animate__item|default('enabled'), +}) %} {% set divider__attributes = divider__attributes|merge({ class: bem(divider__base_class), diff --git a/components/02-molecules/cards/reference-card/_yds-reference-card.scss b/components/02-molecules/cards/reference-card/_yds-reference-card.scss index 604e9e7c2..57c251401 100644 --- a/components/02-molecules/cards/reference-card/_yds-reference-card.scss +++ b/components/02-molecules/cards/reference-card/_yds-reference-card.scss @@ -8,12 +8,6 @@ $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; @@ -47,6 +41,12 @@ $break-card-collection-list-image-max: tokens.$break-s - 0.05; box-shadow: var(--drop-shadow-level-1-bottom-shadow-only); } } + + // only animate if animation is enabled in site configuration. + [data-site-animation='artistic'] [data-animate-item='enabled'] & { + @include tokens.animate($property: 'transform'); + @include tokens.rise-effect; + } } .reference-card__image { diff --git a/components/02-molecules/pull-quote/_yds-pull-quote.scss b/components/02-molecules/pull-quote/_yds-pull-quote.scss index 55d715418..18d0d8b8d 100644 --- a/components/02-molecules/pull-quote/_yds-pull-quote.scss +++ b/components/02-molecules/pull-quote/_yds-pull-quote.scss @@ -16,7 +16,7 @@ blockquote { // if animation is active [data-site-animation='artistic'] & { - &[data-animate-item='true'] { + &[data-animate-item='enabled'] { @include tokens.animate( $property: 'transform', $duration: var(--animation-speed-slow) diff --git a/components/02-molecules/pull-quote/yds-pull-quote.twig b/components/02-molecules/pull-quote/yds-pull-quote.twig index 98d20e532..8e074884a 100644 --- a/components/02-molecules/pull-quote/yds-pull-quote.twig +++ b/components/02-molecules/pull-quote/yds-pull-quote.twig @@ -13,11 +13,9 @@ {# If pull_quote__attributes is not defined, set it to an empty object by default #} {% set pull_quote__attributes = pull_quote__attributes|default({}) %} -{% if animate__item == true %} - {% set pull_quote__attributes = pull_quote__attributes|merge({ - 'data-animate-item': animate__item, - }) %} -{% endif %} +{% set pull_quote__attributes = pull_quote__attributes|merge({ + 'data-animate-item': animate__item|default('enabled'), +}) %} {% set pull_quote__attributes = pull_quote__attributes|merge({ diff --git a/components/03-organisms/card-collection/yds-card-collection.twig b/components/03-organisms/card-collection/yds-card-collection.twig index a7106eadd..e802cd39a 100644 --- a/components/03-organisms/card-collection/yds-card-collection.twig +++ b/components/03-organisms/card-collection/yds-card-collection.twig @@ -27,6 +27,10 @@ }) %} {% endif %} +{% set card_collection__attributes = card_collection__attributes|merge({ + 'data-animate-item': animate__item|default('enabled'), +}) %} +
{% if card_collection__heading is not empty %} diff --git a/components/05-page-examples/_intro-content-examples.twig b/components/05-page-examples/_intro-content-examples.twig index 62d3db8b9..f9ea3e6b9 100644 --- a/components/05-page-examples/_intro-content-examples.twig +++ b/components/05-page-examples/_intro-content-examples.twig @@ -43,6 +43,7 @@ card_collection__featured: 'true', card_collection__with_images: 'true', card_collection__cards: [1, 2, 3], + animate__item: 'enabled', } %} {% elseif intro_content == 'collection-secondary' %} {% include "@organisms/card-collection/yds-card-collection.twig" with { @@ -51,5 +52,6 @@ card_collection__featured: 'false', card_collection__with_images: 'true', card_collection__cards: [1, 2, 3, 4], + animate__item: 'enabled', } %} {% endif %} diff --git a/components/05-page-examples/events/_event-collection--example.twig b/components/05-page-examples/events/_event-collection--example.twig index 817984572..62c83e19b 100644 --- a/components/05-page-examples/events/_event-collection--example.twig +++ b/components/05-page-examples/events/_event-collection--example.twig @@ -2,6 +2,7 @@ {% include "@organisms/card-collection/yds-card-collection.twig" with { card_collection__source_type: 'event', card_collection__type: 'grid', + animate__item: 'enabled', card_collection__cards: [ {}, {}, @@ -16,6 +17,7 @@ card_collection__source_type: 'event', card_collection__type: 'grid', card_collection__featured: 'false', + animate__item: 'enabled', card_collection__cards: [ {}, {}, @@ -27,6 +29,7 @@ {% include "@organisms/card-collection/yds-card-collection.twig" with { card_collection__source_type: 'event', card_collection__type: 'list', + animate__item: 'enabled', card_collection__cards: [ {}, {}, diff --git a/components/05-page-examples/events/event-page.twig b/components/05-page-examples/events/event-page.twig index 12577b03b..7a80706e3 100644 --- a/components/05-page-examples/events/event-page.twig +++ b/components/05-page-examples/events/event-page.twig @@ -28,7 +28,7 @@ } %} {% include "@atoms/divider/yds-divider.twig" with { divider__component_width: 'content', - animate__item: [true], + animate__item: 'enabled', }%} {% include "@molecules/text/yds-text-field.twig" with { text_field__width: 'content', diff --git a/components/05-page-examples/post/post-article.twig b/components/05-page-examples/post/post-article.twig index 822f27b34..ecf02484f 100644 --- a/components/05-page-examples/post/post-article.twig +++ b/components/05-page-examples/post/post-article.twig @@ -34,7 +34,7 @@ text_field__content: '

Davis and her teammate Lars Plate, assistant professor of chemistry and biological sciences at Vanderbilt University, were two of 21 researchers to receive the award. They will work together on their project, “Structure-Function of Enzyme Filaments: Regulators of Cell Metabolism in Space and Time.”

', } %} {% include "@molecules/pull-quote/yds-pull-quote.twig" with { - animate__item: [true], + animate__item: 'enabled', pull_quote__quote: 'Our platform will transform our ability to study metabolic filaments and, coupled with biochemical and biophysical tools, manipulate enzyme structures and metabolic activity in cells.', } %} {% include "@molecules/text/yds-text-field.twig" with { @@ -61,6 +61,7 @@ card_collection__source_type: 'events', card_collection__type: 'grid', card_collection__width: 'content', + animate__item: 'enabled', card_collection__cards:[ { reference_card__date: '2022-03-30 13:00', diff --git a/components/05-page-examples/post/post-grid.twig b/components/05-page-examples/post/post-grid.twig index 9d18a9e96..1335c60ad 100644 --- a/components/05-page-examples/post/post-grid.twig +++ b/components/05-page-examples/post/post-grid.twig @@ -1,62 +1,64 @@ -
-
-

Post Card Grid Heading - Static HTML grid of cards

-
    -
  • -
    -
    - +
    +
    +
    +

    Post Card Grid Heading - Static HTML grid of cards

    +
    -
    - A 3 by 2 image -
    -
    • -
+ + +
diff --git a/components/05-page-examples/post/post.stories.js b/components/05-page-examples/post/post.stories.js index 5b4e8785b..9af787936 100644 --- a/components/05-page-examples/post/post.stories.js +++ b/components/05-page-examples/post/post.stories.js @@ -81,4 +81,9 @@ export const PostArticle = ({ ...referenceCardData, }); -export const postGridCustom = () => postGridTwig(); +export const postGridCustom = ({ + allowAnimatedItems = localStorage.getItem('yds-cl-twig-animate-items'), +}) => + postGridTwig({ + site_animate_components: allowAnimatedItems, + }); diff --git a/components/05-page-examples/profiles/profile.twig b/components/05-page-examples/profiles/profile.twig index 9224d1dc2..0fc898f24 100644 --- a/components/05-page-examples/profiles/profile.twig +++ b/components/05-page-examples/profiles/profile.twig @@ -21,7 +21,7 @@ } %} {% include "@atoms/divider/yds-divider.twig" with { - animate__item: [true], + animate__item: 'enabled', }%} {% include "@molecules/text/yds-text-field.twig" with { @@ -36,14 +36,14 @@ } %} {% include "@molecules/pull-quote/yds-pull-quote.twig" with { - animate__item: [true], + animate__item: 'enabled', pull_quote__alignment: 'left', pull_quote__width: 'site', pull_quote__quote: 'Our platform will transform our ability to study metabolic filaments and, coupled with biochemical and biophysical tools, manipulate enzyme structures and metabolic activity in cells.', } %} {% include "@atoms/divider/yds-divider.twig" with { - animate__item: [true], + animate__item: 'enabled', }%} {% include "@molecules/text/yds-text-field.twig" with { diff --git a/components/05-page-examples/standard-pages/standard-page-with-banner-left-align.twig b/components/05-page-examples/standard-pages/standard-page-with-banner-left-align.twig index f5ebfde28..5eff96752 100644 --- a/components/05-page-examples/standard-pages/standard-page-with-banner-left-align.twig +++ b/components/05-page-examples/standard-pages/standard-page-with-banner-left-align.twig @@ -92,6 +92,7 @@ {% include "@organisms/custom-card-collection/yds-custom-card-collection.twig" with { custom_card_collection__heading: 'Custom Cards', custom_card_collection__featured: false, + animate__item: 'enabled', custom_card_collection__cards:[ {}, {}, @@ -104,6 +105,7 @@ {% include "@organisms/card-collection/yds-card-collection.twig" with { card_collection__source_type: 'post', + animate__item: 'enabled', card_collection__cards:[ { reference_card__date: '2022-03-30 13:00', @@ -127,7 +129,7 @@ }%} {% include "@atoms/divider/yds-divider.twig" with { - animate__item: [true], + animate__item: 'enabled', }%} {% include "@molecules/quick-links/yds-quick-links.twig" %} @@ -186,7 +188,7 @@
- +
{% endblock %} diff --git a/components/05-page-examples/standard-pages/standard-page-with-banner.twig b/components/05-page-examples/standard-pages/standard-page-with-banner.twig index 40c16f65e..a2df95114 100644 --- a/components/05-page-examples/standard-pages/standard-page-with-banner.twig +++ b/components/05-page-examples/standard-pages/standard-page-with-banner.twig @@ -30,7 +30,7 @@ } %} {% include "@molecules/pull-quote/yds-pull-quote.twig" with { - animate__item: [true], + animate__item: 'enabled', pull_quote__width: 'site', pull_quote__alignment: 'left', pull_quote__quote: 'Our platform will transform our ability to study metabolic filaments and, coupled with biochemical and biophysical tools, manipulate enzyme structures and metabolic activity in cells.', @@ -46,7 +46,7 @@ {% endembed %} {% include "@molecules/pull-quote/yds-pull-quote.twig" with { - animate__item: [true], + animate__item: 'enabled', pull_quote__width: 'site', pull_quote__alignment: 'left', pull_quote__style: 'bar-right', @@ -68,12 +68,13 @@ }%} {% include "@atoms/divider/yds-divider.twig" with { - animate__item: [true], + animate__item: 'enabled', }%} {% include "@organisms/custom-card-collection/yds-custom-card-collection.twig" with { custom_card_collection__heading: 'Custom Cards', custom_card_collection__featured: false, + animate__item: 'enabled', custom_card_collection__cards:[ {}, {}, @@ -83,11 +84,12 @@ }%} {% include "@atoms/divider/yds-divider.twig" with { - animate__item: [true], + animate__item: 'enabled', }%} {% include "@organisms/card-collection/yds-card-collection.twig" with { card_collection__source_type: 'post', + animate__item: 'enabled', card_collection__cards:[ { reference_card__date: '2022-03-30 13:00', @@ -162,7 +164,7 @@
- +
{% endblock %} diff --git a/components/05-page-examples/standard-pages/standard-page.twig b/components/05-page-examples/standard-pages/standard-page.twig index f3b086e6f..80e047183 100644 --- a/components/05-page-examples/standard-pages/standard-page.twig +++ b/components/05-page-examples/standard-pages/standard-page.twig @@ -18,7 +18,7 @@ } %} {% include "@atoms/divider/yds-divider.twig" with { divider__component_width: 'site', - animate__item: [true], + animate__item: 'enabled', } %} {% include "@molecules/text/yds-text-field.twig" with { text_field__alignment: 'left',