Skip to content

Commit

Permalink
feat(yalb-1505): add motion var to card collection, enable/disable
Browse files Browse the repository at this point in the history
  • Loading branch information
@joetower
joetower authored Sep 8, 2023
1 parent 9b811f5 commit 4fd3e16
Show file tree
Hide file tree
Showing 17 changed files with 107 additions and 90 deletions.
4 changes: 2 additions & 2 deletions components/00-tokens/effects/yds-animate.js
View file
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
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
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
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
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
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
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
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
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
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
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
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
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
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
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

0 comments on commit 4fd3e16

Please sign in to comment.