VACMS-17057 Events web component upgrades

department-of-veterans-affairs · Mar 18, 2024 · 6f4d026 · 6f4d026
1 parent b337f83
commit 6f4d026
Show file tree

Hide file tree

Showing 3 changed files with 79 additions and 82 deletions.
diff --git a/src/site/includes/social-share.drupal.liquid b/src/site/includes/social-share.drupal.liquid
@@ -4,31 +4,35 @@
       <!-- Derive most recent date -->
       {% assign now = '' | currentTime %}
       {% assign mostRecentDate = mostRecentDate | deriveMostRecentDate: now %}
-
-      <a
+      <va-link
+        calendar
         data-description="{{ fieldDescription }}"
         data-end="{{ mostRecentDate.endValue }}"
         data-location="{{ fieldAddress.addressLine1 }} {{ fieldAddress.locality }}, {{ fieldAddress.administrativeArea }}"
         data-start="{{ mostRecentDate.value }}"
         data-subject="{{ title }}"
         href="{{ entityUrl.path }}"
         id="add-to-calendar-link"
-      >
-        <i class="va-c-social-icon fas fa-calendar-check vads-u-margin-right--0p5" aria-hidden="true" role="presentation"></i>
-        Add to Calendar
-      </a>
+        text="Add to Calendar"
+      />
     </li>
 
     <li class="vads-u-margin-bottom--2p5">
-      <a class="va-js-share-link" href="https://www.facebook.com/sharer/sharer.php?href={{ hostUrl }}{{ entityUrl.path }}">
+      <va-link
+        class="va-js-share-link"
+        href="https://www.facebook.com/sharer/sharer.php?href={{ hostUrl }}{{ entityUrl.path }}"
+      >
         <i aria-hidden="true" class="va-c-social-icon fab fa-facebook vads-u-margin-right--0p5" role="presentation"></i>Share on Facebook
-      </a>
+      </va-link>
     </li>
 
     <li>
-      <a class="va-js-share-link" href="https://twitter.com/intent/tweet?text={{ title }}&url={{ hostUrl }}{{ entityUrl.path }}">
+      <va-link
+        class="va-js-share-link"
+        href="https://twitter.com/intent/tweet?text={{ title }}&url={{ hostUrl }}{{ entityUrl.path }}"
+      >
         <i aria-hidden="true" class="va-c-social-icon fab fa-twitter vads-u-margin-right--0p5" role="presentation"></i>Share on Twitter
-      </a>
+      </va-link>
     </li>
   </ul>
 </div>
diff --git a/src/site/layouts/event.drupal.liquid b/src/site/layouts/event.drupal.liquid
@@ -73,9 +73,10 @@
                   {% assign fieldFacilityAddress = fieldFacilityLocation.entity.fieldAddress %}
                   <div class="vads-u-display--flex vads-u-flex-direction--column">
                     <p class="vads-u-margin--0">
-                      <a href="{{ fieldFacilityLocation.entity.entityUrl.path }}">
-                        {{ fieldFacilityLocation.entity.title }}
-                      </a>
+                      <va-link
+                        href="{{ fieldFacilityLocation.entity.entityUrl.path }}"
+                        text="{{ fieldFacilityLocation.entity.title }}"
+                      />
                     </p>
                     <p class="vads-u-margin--0">{{ fieldLocationHumanreadable }}</p>
                     {% if fieldFacilityAddress.addressLine1 != empty %}
@@ -109,11 +110,9 @@
                 {% elsif fieldLocationType == "online" %}
                   <p class="vads-u-margin--0 vads-u-margin-bottom--2">
                     {% if fieldUrlOfAnOnlineEvent %}
-                      <a href="{{ fieldUrlOfAnOnlineEvent.uri }}">
-                      {% endif %}
+                      <va-link href="{{ fieldUrlOfAnOnlineEvent.uri }}" text="This is an online event." />
+                    {% else %}
                       This is an online event.
-                      {% if fieldUrlOfAnOnlineEvent %}
-                      </a>
                     {% endif %}
                   </p>
                 {% else %}
@@ -219,68 +218,54 @@
 
         <!-- Repeating event instances -->
         {% if fieldDatetimeRangeTimezone.length > 1 %}
-          <button
-            class="vads-u-background-color--gray-lightest vads-u-color--primary-darkest vads-u-font-weight--bold vads-u-display--flex vads-u-align-items--center vads-u-justify-content--space-between vads-u-height--full vads-u-padding--2 vads-u-margin--0 vads-u-margin-top--1"
-            id="expand-recurring-events"
-            style="z-index: 1;"
-            type="button">
-            View other times for this event
-            <i
-              aria-hidden="true"
-              class="fa fa-plus"
-              id="expand-recurring-events-icon"></i>
-          </button>
-          <div class="vads-u-display--none vads-u-flex-direction--column vads-u-background-color--white vads-u-border--2px vads-u-border-color--gray-lightest vads-u-padding--2" id="recurring-events">
-            <!-- Recurring events list. -->
-            {% for recurringEventDatetimeRangeTimezone in fieldDatetimeRangeTimezone %}
-              <div class="recurring-event {% if forloop.index > 6 %}vads-u-display--none{% endif %} vads-u-margin-bottom--2">
-                <p class="vads-u-margin--0">
-                  {{ recurringEventDatetimeRangeTimezone | deriveFormattedTimestamp }}
-                </p>
-                <a
-                  class="recurring-event "
-                  data-description="{{ fieldDescription }}"
-                  data-end="{{ recurringEventDatetimeRangeTimezone.endValue }}"
-                  data-location="{{ fieldAddress.addressLine1 }} {{ fieldAddress.locality }}, {{ fieldAddress.administrativeArea }}"
-                  data-start="{{ recurringEventDatetimeRangeTimezone.value }}"
-                  data-subject="{{ title }}"
-                  href="{{ entityUrl.path }}"
-                  rel="noreferrer noopener"
-                  style="max-width: 140px;">
-                  <i
-                    aria-hidden="true"
-                    class="va-c-social-icon fas fa-calendar-check vads-u-margin-right--0p5"
-                    role="presentation"></i>
-                  Add to Calendar
-                </a>
-              </div>
-            {% endfor %}
-
-            <!-- Show all recurring events. -->
-            {% if fieldDatetimeRangeTimezone.length > 6 %}
-              <div class="vads-u-display--flex vads-u-flex-direction--row vads-u-justify-content--flex-end vads-u-width--full medium-screen:vads-u-width--auto">
-                <button
-                  class="usa-button-secondary vads-u-width--full medium-screen:vads-u-width--auto"
-                  id="show-all-recurring-events"
-                  type="button">
-                  Show all times
-                </button>
-              </div>
-            {% endif %}
-          </div>
+          <va-accordion id="expand-recurring-events">
+            <va-accordion-item
+              header="View other times for this event"
+              bordered
+            >
+              <!-- Recurring events list. -->
+              {% for recurringEventDatetimeRangeTimezone in fieldDatetimeRangeTimezone %}
+                <div class="recurring-event {% if forloop.index > 6 %}vads-u-display--none{% endif %} vads-u-margin-bottom--2">
+                  <p class="vads-u-margin--0">
+                    {{ recurringEventDatetimeRangeTimezone | deriveFormattedTimestamp }}
+                  </p>
+                  <va-link
+                    calendar
+                    class="recurrent-event "
+                    data-description="{{ fieldDescription }}"
+                    data-end="{{ recurringEventDatetimeRangeTimezone.endValue }}"
+                    data-location="{{ fieldAddress.addressLine1 }} {{ fieldAddress.locality }}, {{ fieldAddress.administrativeArea }}"
+                    data-start="{{ recurringEventDatetimeRangeTimezone.value }}"
+                    data-subject="{{ title }}"
+                    href="{{ entityUrl.path }}"
+                    text="Add to Calendar"
+                  />
+                </div>
+              {% endfor %}
+
+              <!-- Show all recurring events. -->
+              {% if fieldDatetimeRangeTimezone.length > 6 %}
+                <div class="vads-u-display--flex vads-u-flex-direction--row vads-u-justify-content--flex-end vads-u-width--full medium-screen:vads-u-width--auto">
+                  <va-button
+                    id="show-all-recurring-events"
+                    secondary
+                    text="Show all times"
+                  />
+                </div>
+              {% endif %}
+            </va-accordion-item>
+          </va-accordion>
         {% endif %}
 
         <!-- See more events. -->
-        <a
-          class="vads-u-padding-bottom--3 vads-u-margin-top--1 vads-u-font-weight--bold"
+        <va-link
+          active
+          class="vads-u-padding-bottom--3 vads-u-margin-top--1"
+          disable-analytics
           href="{{ fieldListing.entity.entityUrl.path }}"
-          onclick="recordEvent({ event: 'nav-secondary-button-click' });">
-          See more events
-          <i
-            aria-hidden="true"
-            class='vads-u-font-size--sm vads-u-margin-left--1 fa fa-chevron-right'
-            role="presentation"></i>
-        </a>
+          onclick="recordEvent({ event: 'nav-secondary-button-click' });"
+          text="See more events"
+        />
         <!-- Last updated & feedback button-->
         {% include "src/site/includes/above-footer-elements.drupal.liquid" %}
       </div>

diff --git a/src/site/teasers/event.drupal.liquid b/src/site/teasers/event.drupal.liquid
@@ -6,7 +6,12 @@
   {% endif %}
   {% assign isEventsPage = entityUrl.path | isPage: "events" %}
   <div data-template="teasers/event" class="vads-u-margin-bottom--3 medium-screen:vads-u-margin-bottom--4">
-      <{{ header }} class="vads-u-margin-top--0 vad-u-margin-bottom-1 vads-u-font-size--md medium-screen:vads-u-font-size--lg"><a href="{{ node.entityUrl.path }}">{{ node.title }}</a></{{ header }}>
+      <{{ header }} class="vads-u-margin-top--0 vad-u-margin-bottom-1 vads-u-font-size--md medium-screen:vads-u-font-size--lg">
+        <va-link
+          text="{{ node.title }}"
+          href="{{ node.entityUrl.path }}"
+        />
+      </{{ header }}>
       <p class="vads-u-margin-bottom--1p5 vads-u-margin-top--0">{{ node.fieldDescription | truncatewords: 60, "..." }}</p>
       <div class="usa-grid usa-grid-full vads-u-display--flex vads-u-flex-direction--row vads-u-margin-bottom--1">
         <div class="vads-u-margin-right--2 when-where-width">
@@ -34,12 +39,15 @@
           <strong>Where</strong>
         </div>
         <div class="usa-width-five-sixths">
-              <p class="vads-u-margin-top--0 vads-u-margin-bottom--1">
-                  <a href="{{ node.fieldFacilityLocation.entity.entityUrl.path }}">{{ node.fieldFacilityLocation.entity.title }}</a>
-              </p>
-            {% if node.fieldLocationHumanreadable != empty %}
-                <span>{{ node.fieldLocationHumanreadable }}</span>
-            {% endif %}
+          <p class="vads-u-margin-top--0 vads-u-margin-bottom--1">
+            <va-link
+              href="{{ node.fieldFacilityLocation.entity.entityUrl.path }}"
+              text="{{ node.fieldFacilityLocation.entity.title }}"
+            />
+          </p>
+          {% if node.fieldLocationHumanreadable != empty %}
+            <span>{{ node.fieldLocationHumanreadable }}</span>
+          {% endif %}
         </div>
       </div>
       {% endif %}