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 3 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
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
12 changes: 7 additions & 5 deletions components/05-page-examples/standard-pages/standard-page-with-banner.twig
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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.',
Expand All @@ -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',
Expand All @@ -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:[
{},
{},
Expand All @@ -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',
Expand Down Expand Up @@ -162,7 +164,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
2 changes: 1 addition & 1 deletion components/05-page-examples/standard-pages/standard-page.twig
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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',
Expand Down
Loading