Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

YALB-1505 - Controls: Disable animation per block #286

Merged
merged 6 commits into from
Sep 8, 2023
Merged

YALB-1505 - Controls: Disable animation per block #286

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
6 commits
Select commit Hold shift + click to select a range
e621e19
fix(yalb-feat-motion): add motion var to card collection, enable/disable
joetower Sep 5, 2023
76fcc28
fix(yalb-feat-motion): update default value for
joetower Sep 5, 2023
4274a5b
Merge branch 'develop' into feat-motion
joetower Sep 6, 2023
33970a1
fix(yalb-feat-motion): make custom post grid work with site-animation
joetower Sep 6, 2023
a734a79
Merge branch 'feat-motion' of github.com:yalesites-org/component-libr…
joetower Sep 6, 2023
7634bfc
Merge branch 'develop' into feat-motion
nJim Sep 8, 2023
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
4 changes: 2 additions & 2 deletions components/00-tokens/effects/yds-animate.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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
Expand Down Expand Up @@ -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');
});
}
},
Expand Down
2 changes: 1 addition & 1 deletion components/01-atoms/divider/_yds-divider.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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)
Expand Down
8 changes: 3 additions & 5 deletions components/01-atoms/divider/yds-divider.twig
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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),
Expand Down
12 changes: 6 additions & 6 deletions components/02-molecules/cards/reference-card/_yds-reference-card.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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;
Expand Down Expand Up @@ -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 {
Expand Down
2 changes: 1 addition & 1 deletion components/02-molecules/pull-quote/_yds-pull-quote.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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)
Expand Down
8 changes: 3 additions & 5 deletions components/02-molecules/pull-quote/yds-pull-quote.twig
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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({
Expand Down
4 changes: 4 additions & 0 deletions components/03-organisms/card-collection/yds-card-collection.twig
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -27,6 +27,10 @@
}) %}
{% endif %}

{% set card_collection__attributes = card_collection__attributes|merge({
'data-animate-item': animate__item|default('enabled'),
}) %}

<div {{ add_attributes(card_collection__attributes) }}>
<div {{ bem('inner', [], card_collection__base_class) }}>
{% if card_collection__heading is not empty %}
Expand Down
2 changes: 2 additions & 0 deletions components/05-page-examples/_intro-content-examples.twig
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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 {
Expand All @@ -51,5 +52,6 @@
card_collection__featured: 'false',
card_collection__with_images: 'true',
card_collection__cards: [1, 2, 3, 4],
animate__item: 'enabled',
} %}
{% endif %}
3 changes: 3 additions & 0 deletions components/05-page-examples/events/_event-collection--example.twig
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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: [
{},
{},
Expand All @@ -16,6 +17,7 @@
card_collection__source_type: 'event',
card_collection__type: 'grid',
card_collection__featured: 'false',
animate__item: 'enabled',
card_collection__cards: [
{},
{},
Expand All @@ -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: [
{},
{},
Expand Down
2 changes: 1 addition & 1 deletion components/05-page-examples/events/event-page.twig
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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',
Expand Down
3 changes: 2 additions & 1 deletion components/05-page-examples/post/post-article.twig
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -34,7 +34,7 @@
text_field__content: '<p>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, <em>“</em><em>Structure-Function of Enzyme Filaments: Regulators of Cell Metabolism in Space and Time.”</em></p>',
} %}
{% 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 {
Expand All @@ -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',
Expand Down
114 changes: 58 additions & 56 deletions components/05-page-examples/post/post-grid.twig
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,62 +1,64 @@
<div class="card-collection" data-component-width="max" data-collection-type="grid" data-collection-featured="true">
<div class="card-collection__inner">
<h2 class="card-collection__heading">Post Card Grid Heading - Static HTML grid of cards</h2>
<ul class="card-collection__cards">
<li class="reference-card" style="cursor: pointer;">
<div class="reference-card__content">
<div class="reference-card__overline">
<time class="date-time" datetime="2022-03-30T13:00:00-05:00">March 30, 2022</time>
<div class="layout-container" data-global-theme="three" data-site-animation="{{site_animate_components}}">
<div class="card-collection" data-component-width="max" data-collection-type="grid" data-collection-featured="true" data-animate-item="enabled">
<div class="card-collection__inner">
<h2 class="card-collection__heading">Post Card Grid Heading - Static HTML grid of cards</h2>
<ul class="card-collection__cards">
<li class="reference-card" style="cursor: pointer;">
<div class="reference-card__content">
<div class="reference-card__overline">
<time class="date-time" datetime="2022-03-30T13:00:00-05:00">March 30, 2022</time>
</div>
<h3 class="reference-card__heading">
<a data-link-style="underline" data-link-type="normal" class="reference-card__heading-link" href="#">
Tincidunt augue interdum velit euismod in pellentesque do eiusmod tempor incididunt ut labore et dolore magna aliqua.
</a>
</h3>
<div class="reference-card__snippet">
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Eu ultrices vitae auctor eu augue. Gravida arcu ac tortor dignissim convallis. Sapien pellentesque habitant morbi tristique senectus et. Tincidunt augue interdum velit euismod in pellentesque. Et netus et malesuada fames ac turpis. Purus gravida quis blandit turpis cursus in hac habitasse. Amet tellus cras adipiscing enim eu turpis egestas.
</div>
</div>
<h3 class="reference-card__heading">
<a data-link-style="underline" data-link-type="normal" class="reference-card__heading-link" href="#">
Tincidunt augue interdum velit euismod in pellentesque do eiusmod tempor incididunt ut labore et dolore magna aliqua.
</a>
</h3>
<div class="reference-card__snippet">
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Eu ultrices vitae auctor eu augue. Gravida arcu ac tortor dignissim convallis. Sapien pellentesque habitant morbi tristique senectus et. Tincidunt augue interdum velit euismod in pellentesque. Et netus et malesuada fames ac turpis. Purus gravida quis blandit turpis cursus in hac habitasse. Amet tellus cras adipiscing enim eu turpis egestas.
<div class="reference-card__image">
<img class="image" srcset="https://picsum.photos/320/213 320w, https://picsum.photos/480/320 480w, https://picsum.photos/640/427 640w, https://picsum.photos/800/533 800w, https://picsum.photos/960/640 960w, https://picsum.photos/1120/747 1120w, https://picsum.photos/1280/853 1280w, https://picsum.photos/1440/960 1440w, https://picsum.photos/1600/1067 1600w, https://picsum.photos/1760/1173 1760w, https://picsum.photos/1920/1280 1920w, https://picsum.photos/2080/1387 2080w, https://picsum.photos/2240/1493 2240w, https://picsum.photos/2400/1600 2400w" sizes="100vw" alt="A 3 by 2 image" src="https://picsum.photos/320/213">
</div>
</div>
<div class="reference-card__image">
<img class="image" srcset="https://picsum.photos/320/213 320w, https://picsum.photos/480/320 480w, https://picsum.photos/640/427 640w, https://picsum.photos/800/533 800w, https://picsum.photos/960/640 960w, https://picsum.photos/1120/747 1120w, https://picsum.photos/1280/853 1280w, https://picsum.photos/1440/960 1440w, https://picsum.photos/1600/1067 1600w, https://picsum.photos/1760/1173 1760w, https://picsum.photos/1920/1280 1920w, https://picsum.photos/2080/1387 2080w, https://picsum.photos/2240/1493 2240w, https://picsum.photos/2400/1600 2400w" sizes="100vw" alt="A 3 by 2 image" src="https://picsum.photos/320/213">
</div>
</li>
<li class="reference-card" style="cursor: pointer;">
<div class="reference-card__content">
<div class="reference-card__overline">
<time class="date-time" datetime="2022-03-30T13:00:00-05:00">March 30, 2022</time>
</div>
<h3 class="reference-card__heading">
<a data-link-style="underline" data-link-type="normal" class="reference-card__heading-link" href="#">
Elit sed vulputate mi sit amet mauris commodo. Sed sed risus pretium quam vulputate.
</a>
</h3>
</li>
<li class="reference-card" style="cursor: pointer;">
<div class="reference-card__content">
<div class="reference-card__overline">
<time class="date-time" datetime="2022-03-30T13:00:00-05:00">March 30, 2022</time>
</div>
<h3 class="reference-card__heading">
<a data-link-style="underline" data-link-type="normal" class="reference-card__heading-link" href="#">
Elit sed vulputate mi sit amet mauris commodo. Sed sed risus pretium quam vulputate.
</a>
</h3>

<div class="reference-card__snippet">
Et malesuada fames ac turpis egestas. Velit ut tortor pretium viverra suspendisse potenti nullam. Quis ipsum suspendisse ultrices gravida dictum fusce ut placerat orci.
</div>
</div>
<div class="reference-card__image">
<img class="image" srcset="https://picsum.photos/320/213 320w, https://picsum.photos/480/320 480w, https://picsum.photos/640/427 640w, https://picsum.photos/800/533 800w, https://picsum.photos/960/640 960w, https://picsum.photos/1120/747 1120w, https://picsum.photos/1280/853 1280w, https://picsum.photos/1440/960 1440w, https://picsum.photos/1600/1067 1600w, https://picsum.photos/1760/1173 1760w, https://picsum.photos/1920/1280 1920w, https://picsum.photos/2080/1387 2080w, https://picsum.photos/2240/1493 2240w, https://picsum.photos/2400/1600 2400w" sizes="100vw" alt="A 3 by 2 image" src="https://picsum.photos/320/213">
</div>
</li>
<li class="reference-card" style="cursor: pointer;">
<div class="reference-card__content">
<div class="reference-card__overline">
<time class="date-time" datetime="2022-03-30T13:00:00-05:00">March 30, 2022</time>
<div class="reference-card__snippet">
Et malesuada fames ac turpis egestas. Velit ut tortor pretium viverra suspendisse potenti nullam. Quis ipsum suspendisse ultrices gravida dictum fusce ut placerat orci.
</div>
</div>
<div class="reference-card__image">
<img class="image" srcset="https://picsum.photos/320/213 320w, https://picsum.photos/480/320 480w, https://picsum.photos/640/427 640w, https://picsum.photos/800/533 800w, https://picsum.photos/960/640 960w, https://picsum.photos/1120/747 1120w, https://picsum.photos/1280/853 1280w, https://picsum.photos/1440/960 1440w, https://picsum.photos/1600/1067 1600w, https://picsum.photos/1760/1173 1760w, https://picsum.photos/1920/1280 1920w, https://picsum.photos/2080/1387 2080w, https://picsum.photos/2240/1493 2240w, https://picsum.photos/2400/1600 2400w" sizes="100vw" alt="A 3 by 2 image" src="https://picsum.photos/320/213">
</div>
</li>
<li class="reference-card" style="cursor: pointer;">
<div class="reference-card__content">
<div class="reference-card__overline">
<time class="date-time" datetime="2022-03-30T13:00:00-05:00">March 30, 2022</time>
</div>
<h3 class="reference-card__heading">
<a data-link-style="underline" data-link-type="normal" class="reference-card__heading-link" href="#">
Volutpat odio facilisis mauris sit amet massa vitae tortor.
</a>
</h3>
<div class="reference-card__snippet">
Purus in mollis nunc sed id semper. Neque laoreet suspendisse interdum consectetur libero. Nibh venenatis cras sed felis. Volutpat diam ut venenatis tellus in metus vulputate eu scelerisque. Neque viverra justo nec ultrices dui sapien eget mi. Tempor orci dapibus ultrices in. Volutpat odio facilisis mauris sit amet massa vitae tortor.
</div>
</div>
<div class="reference-card__image">
<img class="image" srcset="https://picsum.photos/320/213 320w, https://picsum.photos/480/320 480w, https://picsum.photos/640/427 640w, https://picsum.photos/800/533 800w, https://picsum.photos/960/640 960w, https://picsum.photos/1120/747 1120w, https://picsum.photos/1280/853 1280w, https://picsum.photos/1440/960 1440w, https://picsum.photos/1600/1067 1600w, https://picsum.photos/1760/1173 1760w, https://picsum.photos/1920/1280 1920w, https://picsum.photos/2080/1387 2080w, https://picsum.photos/2240/1493 2240w, https://picsum.photos/2400/1600 2400w" sizes="100vw" alt="A 3 by 2 image" src="https://picsum.photos/320/213">
</div>
<h3 class="reference-card__heading">
<a data-link-style="underline" data-link-type="normal" class="reference-card__heading-link" href="#">
Volutpat odio facilisis mauris sit amet massa vitae tortor.
</a>
</h3>
<div class="reference-card__snippet">
Purus in mollis nunc sed id semper. Neque laoreet suspendisse interdum consectetur libero. Nibh venenatis cras sed felis. Volutpat diam ut venenatis tellus in metus vulputate eu scelerisque. Neque viverra justo nec ultrices dui sapien eget mi. Tempor orci dapibus ultrices in. Volutpat odio facilisis mauris sit amet massa vitae tortor.
</div>
</div>
<div class="reference-card__image">
<img class="image" srcset="https://picsum.photos/320/213 320w, https://picsum.photos/480/320 480w, https://picsum.photos/640/427 640w, https://picsum.photos/800/533 800w, https://picsum.photos/960/640 960w, https://picsum.photos/1120/747 1120w, https://picsum.photos/1280/853 1280w, https://picsum.photos/1440/960 1440w, https://picsum.photos/1600/1067 1600w, https://picsum.photos/1760/1173 1760w, https://picsum.photos/1920/1280 1920w, https://picsum.photos/2080/1387 2080w, https://picsum.photos/2240/1493 2240w, https://picsum.photos/2400/1600 2400w" sizes="100vw" alt="A 3 by 2 image" src="https://picsum.photos/320/213">
</div>
</li>
</ul>
</li>
</ul>
</div>
</div>
</div>
7 changes: 6 additions & 1 deletion components/05-page-examples/post/post.stories.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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,
});
6 changes: 3 additions & 3 deletions components/05-page-examples/profiles/profile.twig
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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 {
Expand All @@ -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 {
Expand Down
6 changes: 4 additions & 2 deletions components/05-page-examples/standard-pages/standard-page-with-banner-left-align.twig
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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:[
{},
{},
Expand All @@ -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',
Expand All @@ -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" %}
Expand Down Expand Up @@ -186,7 +188,7 @@
<textarea id="textarea" required="required" aria-required="true" class="form-item__textfield form-item__textarea form-item__textfield--required" rows="8" cols="48" placeholder="Enter your message here"></textarea>
</div>
<div class="form-item form-actions">
<input class="webform-button--submit button button--primary js-form-submit form-submit form-item__textfield" data-drupal-selector="edit-actions-submit" type="submit" id="edit-actions-submit" name="op" value="Send Message">
<input class="webform-button--submit button cta button--primary js-form-submit form-submit form-item__textfield" data-drupal-selector="edit-actions-submit" type="submit" id="edit-actions-submit" name="op" value="Send Message" data-cta-radius="none" data-cta-theme="one" data-cta-outline-weight="2" data-cta-hover-style="fade">
</div>
</form>
{% endblock %}
Expand Down
Loading
Loading