Merge branch 'develop' into yalb-bugs-1311-1383-1480

yalesites-org · Sep 8, 2023 · 3a7fe16 · 3a7fe16
2 parents 24c59f5 + 0cbb9f0
commit 3a7fe16
Show file tree

Hide file tree

Showing 36 changed files with 665 additions and 203 deletions.
diff --git 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
@@ -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
@@ -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/banner/action/yds-action-banner.twig b/components/02-molecules/banner/action/yds-action-banner.twig
@@ -40,7 +40,7 @@
         <div {{ bem('wrap', [], banner__base_class) }}>
           <div {{ bem('text', [], banner__base_class) }}>
             {% 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
@@ -57,7 +57,7 @@
           <div {{ bem('content-inner', [], grand_hero__base_class) }}>
             {% 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,
               } %}

diff --git 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/link-group/_yds-link-group--links.twig b/components/02-molecules/link-group/_yds-link-group--links.twig
@@ -0,0 +1,10 @@
+{% set link_group__base_class = 'link-group' %}
+
+<li {{ bem('list-item', [], link_group__base_class) }}>
+  {% 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',
+  }%}
+</li>
diff --git a/components/02-molecules/link-group/_yds-link-group.scss 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
@@ -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
@@ -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
@@ -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 %}
+    <ul {{ bem('links-column', ['one'], link_group__base_class) }}>
+      {% for link in link_group__links_one %}
+        {% include "@molecules/link-group/_yds-link-group--links.twig" %}
+      {% endfor %}
+    </ul>
+  {% endif %}
+  {% if link_group__links_two %}
+    <ul {{ bem('links-column', ['two'], link_group__base_class) }}>
+      {% for link in link_group__links_two %}
+        {% include "@molecules/link-group/_yds-link-group--links.twig" %}
+      {% endfor %}
+    </ul>
+  {% endif %}
+{% endset %}
+
+<div {{ add_attributes(link_group__attributes) }}>
+  <div {{ bem('inner', [], link_group__base_class) }}>
+    {% 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 %}
+  </div>
+</div>
diff --git 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/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
@@ -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
@@ -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 %}

diff --git a/components/03-organisms/site-footer/_site-footer--examples.twig b/components/03-organisms/site-footer/_site-footer--examples.twig
@@ -6,4 +6,4 @@
       } %}
     </section><br />
   {% endfor %}
-</div>
+</div>