From 96d9eaa4b37b866b213849399b2bc5502acbd658 Mon Sep 17 00:00:00 2001 From: Joe Tower Date: Tue, 29 Aug 2023 15:39:43 -0500 Subject: [PATCH 1/3] fix(yalb-1215): create heading_level variables to pass to Drupal --- components/02-molecules/banner/action/yds-action-banner.twig | 2 +- components/02-molecules/banner/grand-hero/yds-grand-hero.twig | 2 +- 2 files changed, 2 insertions(+), 2 deletions(-) diff --git a/components/02-molecules/banner/action/yds-action-banner.twig b/components/02-molecules/banner/action/yds-action-banner.twig index 013bd49cf..56f780e45 100644 --- a/components/02-molecules/banner/action/yds-action-banner.twig +++ b/components/02-molecules/banner/action/yds-action-banner.twig @@ -40,7 +40,7 @@
{% include "@atoms/typography/headings/yds-heading.twig" with { - heading__level: '2', + heading__level: banner__heading__level|default('2'), heading__blockname: banner__base_class, heading: banner__heading, } %} diff --git a/components/02-molecules/banner/grand-hero/yds-grand-hero.twig b/components/02-molecules/banner/grand-hero/yds-grand-hero.twig index cf7770bc8..e24834313 100644 --- a/components/02-molecules/banner/grand-hero/yds-grand-hero.twig +++ b/components/02-molecules/banner/grand-hero/yds-grand-hero.twig @@ -57,7 +57,7 @@
{% if grand_hero__heading is not empty %} {% include "@atoms/typography/headings/yds-heading.twig" with { - heading__level: '2', + heading__level: grand_hero__heading__level|default('2'), heading__blockname: grand_hero__base_class, heading: grand_hero__heading, } %} From 9b811f5d216640442a17da4492765abb293f9bd0 Mon Sep 17 00:00:00 2001 From: Joe Tower Date: Thu, 7 Sep 2023 22:33:22 -0500 Subject: [PATCH 2/3] fix(YALB-1486): add basic and mega footer variations --- .../link-group/_yds-link-group--links.twig | 10 ++ .../link-group/_yds-link-group.scss | 101 +++++++++++++++ .../link-group/link-group.stories.js | 23 ++++ .../02-molecules/link-group/link-group.yml | 20 +++ .../link-group/yds-link-group.twig | 53 ++++++++ components/02-molecules/molecules.scss | 1 + .../site-footer/_site-footer--examples.twig | 2 +- .../site-footer/_site-footer-basic.twig | 52 ++++++++ .../site-footer/_site-footer-mega.twig | 89 +++++++++++++ .../site-footer/_yds-site-footer.scss | 121 +++++++++++++++++- .../site-footer/site-footer.stories.js | 19 ++- .../site-footer/yds-site-footer.twig | 59 ++------- .../05-page-examples/events/events.stories.js | 12 ++ .../miscellaneous-page.stories.js | 8 ++ .../05-page-examples/post/post.stories.js | 4 + .../profiles/profiles.stories.js | 4 + .../standard-pages/standard-page.stories.js | 79 ++++-------- components/_settings/config.stories.js | 10 ++ 18 files changed, 556 insertions(+), 111 deletions(-) create mode 100644 components/02-molecules/link-group/_yds-link-group--links.twig create mode 100644 components/02-molecules/link-group/_yds-link-group.scss create mode 100644 components/02-molecules/link-group/link-group.stories.js create mode 100644 components/02-molecules/link-group/link-group.yml create mode 100644 components/02-molecules/link-group/yds-link-group.twig create mode 100644 components/03-organisms/site-footer/_site-footer-basic.twig create mode 100644 components/03-organisms/site-footer/_site-footer-mega.twig diff --git a/components/02-molecules/link-group/_yds-link-group--links.twig b/components/02-molecules/link-group/_yds-link-group--links.twig new file mode 100644 index 000000000..5195a4ec8 --- /dev/null +++ b/components/02-molecules/link-group/_yds-link-group--links.twig @@ -0,0 +1,10 @@ +{% set link_group__base_class = 'link-group' %} + +
  • + {% include "@atoms/controls/text-link/yds-text-link.twig" with { + link__content:link_group__link__content|default(link.link_group__link__content), + link__url: link_group__link__url|default(link.link_group__link__url), + link__blockname: link_group__base_class, + link__style: 'no-underline', + }%} +
    • diff --git a/components/02-molecules/link-group/_yds-link-group.scss b/components/02-molecules/link-group/_yds-link-group.scss new file mode 100644 index 000000000..94a4a99f5 --- /dev/null +++ b/components/02-molecules/link-group/_yds-link-group.scss @@ -0,0 +1,101 @@ +@use '../../00-tokens/tokens'; +@use '../../01-atoms/atoms'; + +$break-link-group: tokens.$break-m; +$break-link-group-max: $break-link-group - 0.05; + +.link-group { + .site-footer__columns-inner & { + @media (max-width: $break-link-group-max) { + grid-area: top; + } + } +} + +.link-group__inner { + --color-link-group-border: var(--color-gray-700); + + display: flex; + flex-wrap: wrap; + width: 100%; + + @media (max-width: $break-link-group-max) { + display: grid; + grid-template: + 'header-one' + 'links-one' + 'header-two' + 'links-two' + / 1fr; + } + + // if used in the footer, set border color to site-footer theme color + .site-footer & { + --color-link-group-border: var(--color-site-footer-border-color); + } +} + +.link-group__text { + grid-area: header; +} + +.link-group__heading { + @include tokens.h6-mallory-compact-medium; + + border-left: var(--thickness-divider) solid var(--color-link-group-border); + padding: 0 var(--size-spacing-6) var(--size-spacing-3); + color: var(--color-site-footer-text-color); + + &--one { + @media (max-width: $break-link-group-max) { + grid-area: header-one; + } + + // Needed if only one heading is present. Pushes down the second column. + flex: 1 0 100%; + } + + &--two { + @media (max-width: $break-link-group-max) { + grid-area: header-two; + } + } + + // If two headings, set basis to 50%; + &--two-headings { + flex: 1 0 50%; + } +} + +.link-group__links-column { + @include atoms.list-reset; + + width: 100%; + border-left: var(--thickness-divider) solid var(--color-link-group-border); + margin-bottom: var(--size-spacing-7); + + &--one { + @media (max-width: $break-link-group-max) { + grid-area: links-one; + } + } + + &--two { + @media (max-width: $break-link-group-max) { + grid-area: links-two; + } + } + + @media (min-width: $break-link-group) { + flex: 0 0 50%; + } +} + +.link-group__link { + @include atoms.cta; + + display: block; + text-align: left; + line-height: 1.2; + font-weight: var(--font-weights-mallory-book); +} diff --git a/components/02-molecules/link-group/link-group.stories.js b/components/02-molecules/link-group/link-group.stories.js new file mode 100644 index 000000000..523335cab --- /dev/null +++ b/components/02-molecules/link-group/link-group.stories.js @@ -0,0 +1,23 @@ +import linkGroupTwig from './yds-link-group.twig'; + +import linkGroupData from './link-group.yml'; + +/** + * Storybook Definition. + */ +export default { + title: 'Molecules/Link group', + argTypes: { + heading: { + name: 'Heading', + type: 'string', + defaultValue: linkGroupData.link_group__heading, + }, + }, +}; + +export const linkGroup = ({ heading }) => + linkGroupTwig({ + ...linkGroupData, + link_group__heading: heading, + }); diff --git a/components/02-molecules/link-group/link-group.yml b/components/02-molecules/link-group/link-group.yml new file mode 100644 index 000000000..7e01e790a --- /dev/null +++ b/components/02-molecules/link-group/link-group.yml @@ -0,0 +1,20 @@ +link_group__heading_one: 'Heading for Link Group One' +link_group__heading_two: 'Heading for Link Group Two' +link_group__links_one: + - link_group__link__url: '#' + link_group__link__content: 'This is a link' + - link_group__link__url: '#' + link_group__link__content: 'This is another link' + - link_group__link__url: '#' + link_group__link__content: 'This is a very long link that will wrap lines' + - link_group__link__url: '#' + link_group__link__content: 'Link #4' +link_group__links_two: + - link_group__link__url: '#' + link_group__link__content: 'This is a link' + - link_group__link__url: '#' + link_group__link__content: 'This is another link' + - link_group__link__url: '#' + link_group__link__content: 'This is a very long link that will wrap lines' + - link_group__link__url: '#' + link_group__link__content: 'Link #4' diff --git a/components/02-molecules/link-group/yds-link-group.twig b/components/02-molecules/link-group/yds-link-group.twig new file mode 100644 index 000000000..883780286 --- /dev/null +++ b/components/02-molecules/link-group/yds-link-group.twig @@ -0,0 +1,53 @@ +{% set link_group__base_class = 'link-group' %} + +{% set link_column_modifiers = [] %} + +{% set link_group__attributes = { + 'class': bem(link_group__base_class), +} %} + +{% if link_group__heading_one and link_group__heading_two %} + {% set link_column_modifiers = link_column_modifiers|merge(['two-headings']) %} +{% endif %} + +{# Set variable for all the links #} +{% set link_group_columns %} + {% if link_group__links_one %} +
      + {% for link in link_group__links_one %} + {% include "@molecules/link-group/_yds-link-group--links.twig" %} + {% endfor %} +
    + {% endif %} + {% if link_group__links_two %} +
      + {% for link in link_group__links_two %} + {% include "@molecules/link-group/_yds-link-group--links.twig" %} + {% endfor %} +
    + {% endif %} +{% endset %} + +
    +
    + {% if link_group__heading_one %} + {% include "@atoms/typography/headings/yds-heading.twig" with { + heading__level: '2', + heading__blockname: link_group__base_class, + heading: link_group__heading_one, + heading__modifiers: link_column_modifiers|merge(['one']), + } %} + {% endif %} + {% if link_group__heading_two %} + {% include "@atoms/typography/headings/yds-heading.twig" with { + heading__level: '2', + heading__blockname: link_group__base_class, + heading: link_group__heading_two, + heading__modifiers: link_column_modifiers|merge(['two']), + } %} + {% endif %} + {% block link_group__links %} + {{link_group_columns}} + {% endblock %} +
    +
    diff --git a/components/02-molecules/molecules.scss b/components/02-molecules/molecules.scss index 3d476ee95..57ad0a253 100644 --- a/components/02-molecules/molecules.scss +++ b/components/02-molecules/molecules.scss @@ -7,6 +7,7 @@ @forward './cards/custom-card/yds-custom-card'; @forward './embed/yds-embed'; @forward './image/yds-content-image'; +@forward './link-group/yds-link-group'; @forward './menu/yds-menu'; @forward './menu/menu-toggle/yds-menu-toggle'; @forward './meta/basic-meta/yds-basic-meta'; diff --git a/components/03-organisms/site-footer/_site-footer--examples.twig b/components/03-organisms/site-footer/_site-footer--examples.twig index a43dc414b..9756e567b 100644 --- a/components/03-organisms/site-footer/_site-footer--examples.twig +++ b/components/03-organisms/site-footer/_site-footer--examples.twig @@ -6,4 +6,4 @@ } %}
    {% endfor %} -
    \ No newline at end of file +
    diff --git a/components/03-organisms/site-footer/_site-footer-basic.twig b/components/03-organisms/site-footer/_site-footer-basic.twig new file mode 100644 index 000000000..1fdb6fecd --- /dev/null +++ b/components/03-organisms/site-footer/_site-footer-basic.twig @@ -0,0 +1,52 @@ +{# Default Footer #} +{# Primary #} +
    + {# Branding #} +
    +
    + +
    + {% block site_footer__text %} + {% include "@page-layouts/placeholder/yds-placeholder.twig" with { + placeholder: 'Text', + placeholder__type: 'element', + } %} + {% endblock %} +
    + {# Columns #} +
    + {% block site_footer__columns %} + {% include "@page-layouts/placeholder/yds-placeholder.twig" with { + placeholder: 'Columns', + placeholder__type: 'element', + } %} + {% endblock %} +
    +
    +{# Secondary #} +
    + {# Social #} +
    + {% block site_footer__social %} + {% include "@molecules/social-links/yds-social-links.twig" %} + {% endblock %} +
    + {# Meta #} +
    + {% include "@atoms/controls/text-link/yds-text-link.twig" with { + link__content: 'Accessibility at Yale', + link__url: "https://usability.yale.edu/web-accessibility/accessibility-yale", + link__style: 'no-underline', + link__modifiers: ['footer-link'], + } %} + | + {% include "@atoms/controls/text-link/yds-text-link.twig" with { + link__content: 'Privacy Policy', + link__url: "https://privacy.yale.edu/resources/privacy-statement", + link__style: 'no-underline', + link__modifiers: ['footer-link'], + } %} + | + Copyright © {{ 'now'|date('Y') }} Yale University. All rights reserved. +
    +
    diff --git a/components/03-organisms/site-footer/_site-footer-mega.twig b/components/03-organisms/site-footer/_site-footer-mega.twig new file mode 100644 index 000000000..97814a346 --- /dev/null +++ b/components/03-organisms/site-footer/_site-footer-mega.twig @@ -0,0 +1,89 @@ +{# Mega Footer #} + +{# Primary #} +
    + {# Branding #} +
    +
    + {% block site_footer__logos %} + {% include "@page-layouts/placeholder/yds-placeholder.twig" with { + placeholder: 'logo', + placeholder__type: 'element', + } %} + {% include "@page-layouts/placeholder/yds-placeholder.twig" with { + placeholder: 'logo', + placeholder__type: 'element', + } %} + {% include "@page-layouts/placeholder/yds-placeholder.twig" with { + placeholder: 'logo', + placeholder__type: 'element', + } %} + {% include "@page-layouts/placeholder/yds-placeholder.twig" with { + placeholder: 'logo', + placeholder__type: 'element', + } %} + {% endblock %} +
    + +
    + {% block site_footer__yale_logo %} + {% include "@page-layouts/placeholder/yds-placeholder.twig" with { + placeholder: 'Yale logo', + placeholder__type: 'element', + } %} + {% endblock %} +
    +
    + {# WYSIWYG #} +
    + {% block site_footer__content %} + {% include "@page-layouts/placeholder/yds-placeholder.twig" with { + placeholder: 'Content', + placeholder__type: 'element', + } %} + {% endblock %} +
    + {# Columns #} +
    +
    + {% block site_footer__two_columns %} + {% include "@molecules/link-group/yds-link-group.twig" with { + link_group__heading_one: 'Links Column One', + link_group__links_one: [{link_group__link__url: '#', link_group__link__content: 'Link one'}, {link_group__link__url: '#', link_group__link__content: 'Link two'}, {link_group__link__url: '#', link_group__link__content: 'Link three'}, {link_group__link__url: '#', link_group__link__content: 'Link four'}], + link_group__links_two: [{link_group__link__url: '#', link_group__link__content: 'Link one in column two'}, {link_group__link__url: '#', link_group__link__content: 'Link two in column two'}, {link_group__link__url: '#', link_group__link__content: 'Link three in column two'}, {link_group__link__url: '#', link_group__link__content: 'Link four in column two with a very, very, very long title'}], + } %} + {% endblock %} +
    + {# Social #} +
    + {% block site_footer__social_links %} + {% include "@molecules/social-links/yds-social-links.twig" %} + {% endblock %} +
    +
    +
    +{# Secondary #} +
    + {# YALE Logo #} +
    + +
    + {# Meta #} +
    + {% include "@atoms/controls/text-link/yds-text-link.twig" with { + link__content: 'Accessibility at Yale', + link__url: "https://usability.yale.edu/web-accessibility/accessibility-yale", + link__style: 'no-underline', + link__modifiers: ['footer-link'], + } %} + | + {% include "@atoms/controls/text-link/yds-text-link.twig" with { + link__content: 'Privacy Policy', + link__url: "https://privacy.yale.edu/resources/privacy-statement", + link__style: 'no-underline', + link__modifiers: ['footer-link'], + } %} + | + Copyright © {{ 'now'|date('Y') }} Yale University. All rights reserved. +
    +
    diff --git a/components/03-organisms/site-footer/_yds-site-footer.scss b/components/03-organisms/site-footer/_yds-site-footer.scss index e70f73609..b1539db8e 100644 --- a/components/03-organisms/site-footer/_yds-site-footer.scss +++ b/components/03-organisms/site-footer/_yds-site-footer.scss @@ -133,9 +133,17 @@ $global-footer-themes: map.deep-get(tokens.$tokens, 'global-themes'); gap: var(--size-spacing-6); justify-content: space-between; - @media (min-width: $break-site-footer) { + @media (min-width: tokens.$break-l) { flex-direction: row; } + + [data-footer-variation='mega'] & { + @media (min-width: tokens.$break-l) { + display: grid; + grid-template-areas: 'logos content columns'; + grid-template-columns: 23.5rem 1fr 1fr; + } + } } .site-footer__secondary { @@ -147,6 +155,16 @@ $global-footer-themes: map.deep-get(tokens.$tokens, 'global-themes'); @media (min-width: $break-site-footer) { flex-direction: row-reverse; } + + [data-footer-variation='mega'] & { + border-top: var(--thickness-divider) solid + var(--color-site-footer-border-color); + padding-top: var(--size-spacing-6); + + @media (min-width: $break-site-footer) { + flex-direction: row; + } + } } // add social icon svg hover colors based on theme. @@ -155,6 +173,10 @@ $global-footer-themes: map.deep-get(tokens.$tokens, 'global-themes'); display: flex; flex-direction: column; gap: var(--size-spacing-3); + + [data-footer-variation='mega'] & { + flex: 1 1 30%; + } } .site-footer__logo { @@ -175,7 +197,6 @@ $global-footer-themes: map.deep-get(tokens.$tokens, 'global-themes'); .site-footer__meta { @include typography.body-xs; - margin-right: auto; display: flex; flex-flow: column wrap; align-items: flex-start; @@ -185,6 +206,16 @@ $global-footer-themes: map.deep-get(tokens.$tokens, 'global-themes'); flex-direction: row; align-items: flex-end; } + + [data-footer-variation='mega'] & { + @media (min-width: tokens.$break-m) { + margin-left: auto; + } + } + + [data-footer-variation='basic'] & { + margin-right: auto; + } } .site-footer__divider { @@ -192,3 +223,89 @@ $global-footer-themes: map.deep-get(tokens.$tokens, 'global-themes'); display: none; } } + +/* +// mega footer styles only +*/ +.site-footer__logo-group { + display: grid; + gap: var(--size-spacing-3); + grid-template-columns: 1fr 1fr; + + @media (min-width: $break-site-footer) { + grid-template-columns: 1fr 1fr 1fr 1fr; + } + + @media (min-width: tokens.$break-l) { + grid-template-columns: 1fr 1fr; + } +} + +// Yale school logo +.site-footer__yale-logo { + [data-footer-variation='mega'] & { + gap: var(--size-spacing-6); + } +} + +// WYSIWYG +.site-footer__content { + [data-footer-variation='mega'] & { + @include typography.body-s-condensed; + + flex: 1 1 30%; + + > p { + margin-top: 0; + } + + @media (min-width: tokens.$break-l) { + grid-area: content; + padding-inline-start: var(--size-spacing-8); + padding-inline-end: var(--size-spacing-8); + } + } +} + +// Link Columns +.site-footer__columns { + [data-footer-variation='mega'] & { + flex: 1 1 30%; + display: flex; + flex-direction: column; + gap: var(--size-spacing-6); + } +} + +.site-footer__columns-inner { + @media (min-width: tokens.$break-l) { + display: grid; + grid-template-areas: 'top' 'bottom'; + grid-template-columns: 1fr 1fr; + } + + [data-footer-variation='mega'] & { + display: flex; + flex: 1 auto; + flex-direction: column; + gap: var(--size-spacing-3); + + @media (min-width: tokens.$break-l) { + display: grid; + grid-template: + 'top' + 'bottom' + / 1fr; + } + } +} + +// Social +.site-footer__social { + [data-footer-variation='mega'] & { + @media (min-width: tokens.$break-l) { + flex: 0 auto; + align-self: flex-end; + } + } +} diff --git a/components/03-organisms/site-footer/site-footer.stories.js b/components/03-organisms/site-footer/site-footer.stories.js index a63efdb57..e4d910eb0 100644 --- a/components/03-organisms/site-footer/site-footer.stories.js +++ b/components/03-organisms/site-footer/site-footer.stories.js @@ -29,11 +29,16 @@ export default { }, }; -export const Footer = ({ borderThickness, siteFooterTheme }) => +export const Footer = ({ + borderThickness, + siteFooterTheme, + siteFooterVariation, +}) => siteFooterTwig({ ...socialLinksData, site_footer__border_thickness: borderThickness, site_footer__theme: siteFooterTheme, + site_footer__variation: siteFooterVariation, }); Footer.argTypes = { @@ -42,15 +47,25 @@ Footer.argTypes = { type: 'select', defaultValue: 'one', }, + siteFooterVariation: { + options: ['basic', 'mega'], + type: 'select', + defaultValue: 'basic', + }, }; -export const FooterExamples = ({ borderThickness, globalTheme }) => +export const FooterExamples = ({ + borderThickness, + globalTheme, + siteFooterVariation, +}) => siteFooterExamples({ ...socialLinksData, ...siteFooterThemes, ...siteGlobalThemes, site_global__theme: globalTheme, site_footer__border_thickness: borderThickness, + site_footer__variation: siteFooterVariation, }); FooterExamples.argTypes = { diff --git a/components/03-organisms/site-footer/yds-site-footer.twig b/components/03-organisms/site-footer/yds-site-footer.twig index ad9929a2d..b3d2c59b5 100644 --- a/components/03-organisms/site-footer/yds-site-footer.twig +++ b/components/03-organisms/site-footer/yds-site-footer.twig @@ -16,61 +16,18 @@ 'data-component-width': 'site', 'data-site-footer-border-thickness': site_footer__border_thickness|default('0'), 'data-footer-theme': site_footer__theme|default('one'), + 'data-footer-variation': site_footer__variation|default('basic'), class: bem(site_footer__base_class), } %}
    - {# Primary #} -
    - {# Branding #} -
    -
    - -
    - {% block site_footer__text %} - {% include "@page-layouts/placeholder/yds-placeholder.twig" with { - placeholder: 'Text', - placeholder__type: 'element', - } %} - {% endblock %} -
    - {# Columns #} -
    - {% block site_footer__columns %} - {% include "@page-layouts/placeholder/yds-placeholder.twig" with { - placeholder: 'Columns', - placeholder__type: 'element', - } %} - {% endblock %} -
    -
    - {# Secondary #} -
    - {# Social #} -
    - {% block site_footer__social %} - {% include "@molecules/social-links/yds-social-links.twig" %} - {% endblock %} -
    - {# Meta #} -
    - {% include "@atoms/controls/text-link/yds-text-link.twig" with { - link__content: 'Accessibility at Yale', - link__url: "https://usability.yale.edu/web-accessibility/accessibility-yale", - link__style: 'no-underline', - link__modifiers: ['footer-link'], - } %} - | - {% include "@atoms/controls/text-link/yds-text-link.twig" with { - link__content: 'Privacy Policy', - link__url: "https://privacy.yale.edu/resources/privacy-statement", - link__style: 'no-underline', - link__modifiers: ['footer-link'], - } %} - | - Copyright © {{ 'now'|date('Y') }} Yale University. All rights reserved. -
    -
    + {% block footer__inner %} + {% if site_footer__variation == 'mega' %} + {% include "@organisms/site-footer/_site-footer-mega.twig" %} + {% else %} + {% include "@organisms/site-footer/_site-footer-basic.twig" %} + {% endif %} + {% endblock %}
    diff --git a/components/05-page-examples/events/events.stories.js b/components/05-page-examples/events/events.stories.js index 0e17d3792..39b264a07 100644 --- a/components/05-page-examples/events/events.stories.js +++ b/components/05-page-examples/events/events.stories.js @@ -60,6 +60,9 @@ export const EventPage = ({ siteHeaderTheme = localStorage.getItem('yds-cl-twig-site-header-theme'), utilityNavLinkContent, utilityNavSearch, + siteFooterVariation = localStorage.getItem( + 'yds-cl-twig-site-footer-variation', + ), siteFooterTheme = localStorage.getItem('yds-cl-twig-site-footer-theme'), footerBorderThickness = localStorage.getItem( 'yds-cl-twig-footer-border-thickness', @@ -80,6 +83,7 @@ export const EventPage = ({ site_header__nav_position: primaryNavPosition, site_header__theme: siteHeaderTheme, site_footer__border_thickness: footerBorderThickness, + site_footer__variation: siteFooterVariation, site_footer__theme: siteFooterTheme, utility_nav__items: utilityNavData.items, primary_nav__items: primaryNavData.items, @@ -126,6 +130,9 @@ export const EventGrid = ({ siteHeaderTheme = localStorage.getItem('yds-cl-twig-site-header-theme'), utilityNavLinkContent, utilityNavSearch, + siteFooterVariation = localStorage.getItem( + 'yds-cl-twig-site-footer-variation', + ), siteFooterTheme = localStorage.getItem('yds-cl-twig-site-footer-theme'), footerBorderThickness = localStorage.getItem( 'yds-cl-twig-footer-border-thickness', @@ -140,6 +147,7 @@ export const EventGrid = ({ site_header__border_thickness: headerBorderThickness, site_header__nav_position: primaryNavPosition, site_header__theme: siteHeaderTheme, + site_footer__variation: siteFooterVariation, site_footer__border_thickness: footerBorderThickness, site_footer__theme: siteFooterTheme, utility_nav__items: utilityNavData.items, @@ -180,6 +188,9 @@ export const EventList = ({ siteHeaderTheme = localStorage.getItem('yds-cl-twig-site-header-theme'), utilityNavLinkContent, utilityNavSearch, + siteFooterVariation = localStorage.getItem( + 'yds-cl-twig-site-footer-variation', + ), siteFooterTheme = localStorage.getItem('yds-cl-twig-site-footer-theme'), footerBorderThickness = localStorage.getItem( 'yds-cl-twig-footer-border-thickness', @@ -194,6 +205,7 @@ export const EventList = ({ site_header__border_thickness: headerBorderThickness, site_header__nav_position: primaryNavPosition, site_header__theme: siteHeaderTheme, + site_footer__variation: siteFooterVariation, site_footer__border_thickness: footerBorderThickness, site_footer__theme: siteFooterTheme, utility_nav__items: utilityNavData.items, diff --git a/components/05-page-examples/miscellaneous/miscellaneous-page.stories.js b/components/05-page-examples/miscellaneous/miscellaneous-page.stories.js index f36040fcf..051dfaa25 100644 --- a/components/05-page-examples/miscellaneous/miscellaneous-page.stories.js +++ b/components/05-page-examples/miscellaneous/miscellaneous-page.stories.js @@ -42,6 +42,9 @@ export const AccordionPage = ({ siteHeaderTheme = localStorage.getItem('yds-cl-twig-site-header-theme'), utilityNavLinkContent, utilityNavSearch, + siteFooterVariation = localStorage.getItem( + 'yds-cl-twig-site-footer-variation', + ), siteFooterTheme = localStorage.getItem('yds-cl-twig-site-footer-theme'), footerBorderThickness = localStorage.getItem( 'yds-cl-twig-footer-border-thickness', @@ -56,6 +59,7 @@ export const AccordionPage = ({ site_header__border_thickness: headerBorderThickness, site_header__nav_position: primaryNavPosition, site_header__theme: siteHeaderTheme, + site_footer__variation: siteFooterVariation, site_footer__border_thickness: footerBorderThickness, site_footer__theme: siteFooterTheme, utility_nav__items: utilityNavData.items, @@ -84,6 +88,9 @@ export const QualtricsPage = ({ siteHeaderTheme = localStorage.getItem('yds-cl-twig-site-header-theme'), utilityNavLinkContent, utilityNavSearch, + siteFooterVariation = localStorage.getItem( + 'yds-cl-twig-site-footer-variation', + ), siteFooterTheme = localStorage.getItem('yds-cl-twig-site-footer-theme'), footerBorderThickness = localStorage.getItem( 'yds-cl-twig-footer-border-thickness', @@ -98,6 +105,7 @@ export const QualtricsPage = ({ site_header__border_thickness: headerBorderThickness, site_header__nav_position: primaryNavPosition, site_header__theme: siteHeaderTheme, + site_footer__variation: siteFooterVariation, site_footer__border_thickness: footerBorderThickness, site_footer__theme: siteFooterTheme, utility_nav__items: utilityNavData.items, diff --git a/components/05-page-examples/post/post.stories.js b/components/05-page-examples/post/post.stories.js index 55f4f0941..5b4e8785b 100644 --- a/components/05-page-examples/post/post.stories.js +++ b/components/05-page-examples/post/post.stories.js @@ -41,6 +41,9 @@ export const PostArticle = ({ siteHeaderTheme = localStorage.getItem('yds-cl-twig-site-header-theme'), utilityNavLinkContent, utilityNavSearch, + siteFooterVariation = localStorage.getItem( + 'yds-cl-twig-site-footer-variation', + ), siteFooterTheme = localStorage.getItem('yds-cl-twig-site-footer-theme'), footerBorderThickness = localStorage.getItem( 'yds-cl-twig-footer-border-thickness', @@ -55,6 +58,7 @@ export const PostArticle = ({ site_header__border_thickness: headerBorderThickness, site_header__nav_position: primaryNavPosition, site_header__theme: siteHeaderTheme, + site_footer__variation: siteFooterVariation, site_footer__border_thickness: footerBorderThickness, site_footer__theme: siteFooterTheme, utility_nav__items: utilityNavData.items, diff --git a/components/05-page-examples/profiles/profiles.stories.js b/components/05-page-examples/profiles/profiles.stories.js index 0d7605f57..3311cd6a6 100644 --- a/components/05-page-examples/profiles/profiles.stories.js +++ b/components/05-page-examples/profiles/profiles.stories.js @@ -43,6 +43,9 @@ export const ProfilePage = ({ utilityNavLinkContent, utilityNavSearch, allowAnimatedItems = localStorage.getItem('yds-cl-twig-animate-items'), + siteFooterVariation = localStorage.getItem( + 'yds-cl-twig-site-footer-variation', + ), siteFooterTheme = localStorage.getItem('yds-cl-twig-site-footer-theme'), footerBorderThickness = localStorage.getItem( 'yds-cl-twig-footer-border-thickness', @@ -55,6 +58,7 @@ export const ProfilePage = ({ site_header__border_thickness: headerBorderThickness, site_header__nav_position: primaryNavPosition, site_header__theme: siteHeaderTheme, + site_footer__variation: siteFooterVariation, site_footer__border_thickness: footerBorderThickness, site_footer__theme: siteFooterTheme, utility_nav__items: utilityNavData.items, diff --git a/components/05-page-examples/standard-pages/standard-page.stories.js b/components/05-page-examples/standard-pages/standard-page.stories.js index 3311f0a68..377b0dedb 100644 --- a/components/05-page-examples/standard-pages/standard-page.stories.js +++ b/components/05-page-examples/standard-pages/standard-page.stories.js @@ -80,6 +80,9 @@ export const Basic = ({ siteHeaderTheme = localStorage.getItem('yds-cl-twig-site-header-theme'), utilityNavLinkContent, utilityNavSearch, + siteFooterVariation = localStorage.getItem( + 'yds-cl-twig-site-footer-variation', + ), siteFooterTheme = localStorage.getItem('yds-cl-twig-site-footer-theme'), footerBorderThickness = localStorage.getItem( 'yds-cl-twig-footer-border-thickness', @@ -96,6 +99,7 @@ export const Basic = ({ site_header__border_thickness: headerBorderThickness, site_header__nav_position: primaryNavPosition, site_header__theme: siteHeaderTheme, + site_footer__variation: siteFooterVariation, site_footer__border_thickness: footerBorderThickness, site_footer__theme: siteFooterTheme, utility_nav__items: utilityNavData.items, @@ -126,6 +130,9 @@ export const BasicShort = ({ siteHeaderTheme = localStorage.getItem('yds-cl-twig-site-header-theme'), utilityNavLinkContent, utilityNavSearch, + siteFooterVariation = localStorage.getItem( + 'yds-cl-twig-site-footer-variation', + ), siteFooterTheme = localStorage.getItem('yds-cl-twig-site-footer-theme'), footerBorderThickness = localStorage.getItem( 'yds-cl-twig-footer-border-thickness', @@ -142,6 +149,7 @@ export const BasicShort = ({ site_header__border_thickness: headerBorderThickness, site_header__nav_position: primaryNavPosition, site_header__theme: siteHeaderTheme, + site_footer__variation: siteFooterVariation, site_footer__border_thickness: footerBorderThickness, site_footer__theme: siteFooterTheme, utility_nav__items: utilityNavData.items, @@ -171,6 +179,9 @@ export const WithBanner = ({ siteHeaderTheme = localStorage.getItem('yds-cl-twig-site-header-theme'), utilityNavLinkContent, utilityNavSearch, + siteFooterVariation = localStorage.getItem( + 'yds-cl-twig-site-footer-variation', + ), siteFooterTheme = localStorage.getItem('yds-cl-twig-site-footer-theme'), footerBorderThickness = localStorage.getItem( 'yds-cl-twig-footer-border-thickness', @@ -200,6 +211,7 @@ export const WithBanner = ({ site_header__border_thickness: headerBorderThickness, site_header__nav_position: primaryNavPosition, site_header__theme: siteHeaderTheme, + site_footer__variation: siteFooterVariation, site_footer__border_thickness: footerBorderThickness, site_footer__theme: siteFooterTheme, utility_nav__items: utilityNavData.items, @@ -322,6 +334,9 @@ export const WithBannerLeftAlign = ({ siteHeaderTheme = localStorage.getItem('yds-cl-twig-site-header-theme'), utilityNavLinkContent, utilityNavSearch, + siteFooterVariation = localStorage.getItem( + 'yds-cl-twig-site-footer-variation', + ), siteFooterTheme = localStorage.getItem('yds-cl-twig-site-footer-theme'), footerBorderThickness = localStorage.getItem( 'yds-cl-twig-footer-border-thickness', @@ -354,6 +369,7 @@ export const WithBannerLeftAlign = ({ site_header__border_thickness: headerBorderThickness, site_header__nav_position: primaryNavPosition, site_header__theme: siteHeaderTheme, + site_footer__variation: siteFooterVariation, site_footer__border_thickness: footerBorderThickness, site_footer__theme: siteFooterTheme, utility_nav__items: utilityNavData.items, @@ -501,6 +517,9 @@ export const WithSidebar = ({ siteHeaderTheme = localStorage.getItem('yds-cl-twig-site-header-theme'), utilityNavLinkContent, utilityNavSearch, + siteFooterVariation = localStorage.getItem( + 'yds-cl-twig-site-footer-variation', + ), siteFooterTheme = localStorage.getItem('yds-cl-twig-site-footer-theme'), footerBorderThickness = localStorage.getItem( 'yds-cl-twig-footer-border-thickness', @@ -517,6 +536,7 @@ export const WithSidebar = ({ site_header__border_thickness: headerBorderThickness, site_header__nav_position: primaryNavPosition, site_header__theme: siteHeaderTheme, + site_footer__variation: siteFooterVariation, site_footer__border_thickness: footerBorderThickness, site_footer__theme: siteFooterTheme, utility_nav__items: utilityNavData.items, @@ -547,6 +567,9 @@ export const WithQuickLinks = ({ siteHeaderTheme = localStorage.getItem('yds-cl-twig-site-header-theme'), utilityNavLinkContent, utilityNavSearch, + siteFooterVariation = localStorage.getItem( + 'yds-cl-twig-site-footer-variation', + ), siteFooterTheme = localStorage.getItem('yds-cl-twig-site-footer-theme'), footerBorderThickness = localStorage.getItem( 'yds-cl-twig-footer-border-thickness', @@ -565,6 +588,7 @@ export const WithQuickLinks = ({ site_header__border_thickness: headerBorderThickness, site_header__nav_position: primaryNavPosition, site_header__theme: siteHeaderTheme, + site_footer__variation: siteFooterVariation, site_footer__border_thickness: footerBorderThickness, site_footer__theme: siteFooterTheme, utility_nav__items: utilityNavData.items, @@ -606,58 +630,3 @@ WithQuickLinks.argTypes = { defaultValue: 'promotional', }, }; - -// commenting out video page for now. -// export const withVideo = ({ -// siteName, -// pageTitle, -// globalTheme = localStorage.getItem( -// 'yds-cl-twig-global-theme', -// ), -// headerBorderThickness, -// primaryNavPosition, -// siteHeaderTheme, -// utilityNavLinkContent, -// utilityNavSearch, -// siteFooterTheme, -// footerBorderThickness, -// videoHeading, -// videoCaption, -// menuVariation = localStorage.getItem('yds-cl-twig-menu-variation'), -// }) => -// standardPageVideoTwig({ -// site_name: siteName, -// page_title__heading: pageTitle, -// page_title__meta: null, -// site_global__theme: globalTheme, -// site_header__border_thickness: headerBorderThickness, -// site_header__nav_position: primaryNavPosition, -// site_header__theme: siteHeaderTheme, -// site_footer__border_thickness: footerBorderThickness, -// site_footer__theme: siteFooterTheme, -// utility_nav__items: utilityNavData.items, -// primary_nav__items: primaryNavData.items, -// menu__variation: menuVariation, -// utility_nav__link__content: utilityNavLinkContent, -// utility_nav__link__url: '#', -// utility_nav__search: utilityNavSearch, -// breadcrumbs__items: breadcrumbData.items, -// ...imageData.responsive_images['16x9'], -// ...referenceCardData, -// ...socialLinksData, -// ...videoData, -// video__heading: videoHeading, -// video__text: videoCaption, -// }); -// withVideo.argTypes = { -// videoHeading: { -// name: 'Video Heading', -// type: 'string', -// defaultValue: videoData.video__heading, -// }, -// videoCaption: { -// name: 'Video Caption', -// type: 'string', -// defaultValue: videoData.video__text, -// }, -// }; diff --git a/components/_settings/config.stories.js b/components/_settings/config.stories.js index b572db539..e1af620e3 100644 --- a/components/_settings/config.stories.js +++ b/components/_settings/config.stories.js @@ -18,6 +18,7 @@ const siteHeaderThemeOptions = Object.keys(tokens['site-header-themes']); const siteFooterThemeOptions = Object.keys(tokens['site-footer-themes']); const siteGlobalThemeOptions = getGlobalThemes(tokens['global-themes']); const siteAnimationOptions = ['artistic', 'default']; +const siteFooterVariations = ['basic', 'mega']; export default { title: 'Config', @@ -91,6 +92,12 @@ export default { type: 'select', defaultValue: localStorage.getItem('yds-cl-twig-header-border-thickness'), }, + siteFooterVariation: { + name: 'Footer: Variation', + options: siteFooterVariations, + type: 'select', + defaultValue: localStorage.getItem('yds-cl-twig-site-footer-variation'), + }, siteFooterTheme: { name: 'Footer: Theme', options: siteFooterThemeOptions, @@ -129,6 +136,7 @@ export const GlobalConfig = ({ menuVariation, globalTheme, allowAnimatedItems, + siteFooterVariation, }) => { const root = document.documentElement; const customProperties = { @@ -147,6 +155,7 @@ export const GlobalConfig = ({ 'yds-cl-twig-site-footer-theme': siteFooterTheme, 'yds-cl-twig-footer-border-thickness': footerBorderThickness, 'yds-cl-twig-animate-items': allowAnimatedItems, + 'yds-cl-twig-site-footer-variation': siteFooterVariation, }; // Set properties that are stored as custom properties to the root element. @@ -184,6 +193,7 @@ export const GlobalConfig = ({ site_header__border_thickness: headerBorderThickness, site_header__nav_position: primaryNavPosition, site_header__theme: siteHeaderTheme, + site_footer__variation: siteFooterVariation, site_footer__border_thickness: footerBorderThickness, site_footer__theme: siteFooterTheme, ...tabsData, From 4fd3e1611187984c938993d98a9a45b4a6783602 Mon Sep 17 00:00:00 2001 From: Joe Tower Date: Thu, 7 Sep 2023 22:36:54 -0500 Subject: [PATCH 3/3] feat(yalb-1505): add motion var to card collection, enable/disable --- components/00-tokens/effects/yds-animate.js | 4 +- components/01-atoms/divider/_yds-divider.scss | 2 +- components/01-atoms/divider/yds-divider.twig | 8 +- .../reference-card/_yds-reference-card.scss | 12 +- .../pull-quote/_yds-pull-quote.scss | 2 +- .../pull-quote/yds-pull-quote.twig | 8 +- .../card-collection/yds-card-collection.twig | 4 + .../_intro-content-examples.twig | 2 + .../events/_event-collection--example.twig | 3 + .../05-page-examples/events/event-page.twig | 2 +- .../05-page-examples/post/post-article.twig | 3 +- .../05-page-examples/post/post-grid.twig | 114 +++++++++--------- .../05-page-examples/post/post.stories.js | 7 +- .../05-page-examples/profiles/profile.twig | 6 +- .../standard-page-with-banner-left-align.twig | 6 +- .../standard-page-with-banner.twig | 12 +- .../standard-pages/standard-page.twig | 2 +- 17 files changed, 107 insertions(+), 90 deletions(-) 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',