Skip to content

Commit

Permalink
VACMS-16952 VAMC System web components
Browse files Browse the repository at this point in the history
  • Loading branch information
@randimays
randimays committed May 22, 2024
1 parent c3f94f6 commit 0837660
Show file tree
Hide file tree
Showing 3 changed files with 153 additions and 132 deletions.
95 changes: 46 additions & 49 deletions src/site/components/fullwidth_banner_alerts.drupal.liquid
View file
Original file line number Diff line number Diff line change
Expand Up @@ -22,56 +22,53 @@
{% endif %}
{% endfor %}
{% if outputStatus == true %}
<div data-template="components/fullwidth_banner_alerts" data-entity-id="{{ entity.entityId }}"
aria-labelledby="usa-alert-header-text-{{ entity.entityId }}"
class="usa-alert-full-width dismissable-option-header usa-alert-full-width-{{ alertType }}"
id="usa-alert-full-width-{{ entity.entityId }}" role="region">
<div class="usa-alert usa-alert-{{ alertType }}" role="alert">
{% if entity.fieldAlertDismissable == true %}
<button id="usa-alert-dismiss-{{ entity.entityId }}"
class="va-alert-close usa-alert-dismiss"
data-parentwrap="usa-alert-full-width-{{ entity.entityId }}"
data-frequency="once" aria-label="Close notification">
<i aria-hidden="true" class="fas fa-times-circle"></i>
</button>
<div
data-template="components/fullwidth_banner_alerts"
data-entity-id="{{ entity.entityId }}"
aria-labelledby="{{ entity.title }}"
>
<va-banner
type="{{ alertType }}"
{% if entity.fieldAlertDismissable == "dismiss" %}
show-close
{% endif %}
headline="{{ entity.title }}"
>
<div>
{% capture eventData %}
{
"event": "nav-alert-box-link-click",
"alert-box-status": "{{ alertType }}",
"alert-box-headline": "{{ entity.title | escape }}",
"alert-box-headline-level": "3",
"alert-box-background-only": "false",
"alert-box-closeable": "false"
}
{% endcapture %}
{{ entity.fieldBody.processed | trackLinks: eventData }}
{% if entity.fieldAlertOperatingStatusCta == true and statusUrl.length %}
<p>
<va-link
disable-analytics
href="{{ statusUrl }}"
onclick="recordEvent({
'event':'nav-warning-alert-box-content-link-click',
'alertBoxHeading': '{{ entity.title }}'
});"
text="Get updates on affected services and facilities"
></va-link>
</p>
{% endif %}
{% if entity.fieldAlertEmailUpdatesButton == true and emailUpdates.length %}
<p>
<va-link href="{{ emailUpdates }}" text="Subscribe to email updates"></va-link>
</p>
{% endif %}
{% if entity.fieldAlertFindFacilitiesCta == true %}
<p>
<va-link href="/find-locations" text="Find other VA facilities near you"></va-link>
</p>
{% endif %}
<div class="usa-alert-body">
<h3 class="usa-alert-heading" id="usa-alert-header-text-{{ entity.entityId }}">
{{ entity.title }}
</h3>
<div class="additional-info-content usa-alert-text">
{% capture eventData %}
{
"event": "nav-alert-box-link-click",
"alert-box-status": "{{ alertType }}",
"alert-box-headline": "{{ entity.title | escape }}",
"alert-box-headline-level": "3",
"alert-box-background-only": "false",
"alert-box-closeable": "false"
}
{% endcapture %}
{{ entity.fieldBody.processed | trackLinks: eventData }}
{% if entity.fieldAlertOperatingStatusCta == true and statusUrl.length %}
<p>
<a href="{{ statusUrl }}" onclick="recordEvent({
'event':'nav-warning-alert-box-content-link-click',
'alertBoxHeading': '{{ entity.title }}'
});">Get updates on affected services and facilities</a>
</p>
{% endif %}
{% if entity.fieldAlertEmailUpdatesButton == true and emailUpdates.length %}
<p>
<a href="{{ emailUpdates }}">Subscribe
to email updates</a>
</p>
{% endif %}
{% if entity.fieldAlertFindFacilitiesCta == true %}
<p>
<a href="/find-locations">Find other VA facilities near you</a>
</p>
{% endif %}
</div>
</div>
</div>
</div>
{% endif %}
Expand Down
186 changes: 104 additions & 82 deletions src/site/layouts/health_care_region_page.drupal.liquid
View file
Original file line number Diff line number Diff line change
Expand Up @@ -41,13 +41,15 @@
entity = main
fieldVaHealthConnectPhone = fieldVaHealthConnectPhone
%}
{% endfor %} <a
{% endfor %} <va-link
active
disable-analytics
onClick="recordEvent({ event: 'nav-secondary-button-click' });"
class="usa-button usa-button-secondary vads-facility-hub-button vads-u-width--full medium-screen:vads-u-width--auto vads-u-font-size--md"
href="{{ entityUrl.path }}/locations">
See all locations <i
class="fa fa-chevron-right va-l-font-size--12px">&nbsp;</i>
</a>
class="vads-u-font-size--md vads-u-display--block vads-u-width--full"
href="{{ entityUrl.path }}/locations"
text="See all locations"
>
</va-link>
</section>

<!-- "Manage your health online" section -->
Expand All @@ -59,77 +61,87 @@
{% else %}
<h3>Manage your health online</h3>
{% endif %}
<div
class="vads-u-display--flex medium-screen:vads-u-flex-direction--row vads-u-flex-direction--column">
<div
class="vads-u-margin-right--0 medium-screen:vads-u-margin-right--3">
<div class="vads-facility-hub-cta">
<a onClick="recordEvent({ event: 'cta-hub-link-click' });"
<div class="vads-u-display--flex medium-screen:vads-u-flex-direction--row vads-u-flex-direction--column">
<div class="vads-u-margin-right--0 medium-screen:vads-u-margin-right--3">
<div class="vads-facility-hub-cta vads-u-display--flex vads-u-align-items--center">
<va-icon
class="vads-u-color--link-default vads-facility-hub-cta-circle vads-u-margin-right--1"
size="3"
icon="medication"
></va-icon>
<va-link
disable-analytics
onClick="recordEvent({ event: 'cta-hub-link-click' });"
href="{{ fieldVamcEhrSystem | topTaskUrl: "refill-track-prescriptions/", buildtype }}"
class="top-task-link vads-u-height--full vads-u-width--full">
<i
class=" fa fa-prescription-bottle vads-facility-hub-cta-circle">&nbsp;</i>
<span class="vads-facility-hub-cta-label">Refill and track
your prescriptions<i
class="fa fa-chevron-right vads-facility-hub-cta-arrow">&nbsp;</i></span>
</a>
text="Refill and track your prescriptions"
></va-link>
</div>
<div class="vads-facility-hub-cta">
<a onClick="recordEvent({ event: 'cta-hub-link-click' });"
<div class="vads-facility-hub-cta vads-u-display--flex vads-u-align-items--center">
<va-icon
class="vads-u-color--link-default vads-facility-hub-cta-circle vads-u-margin-right--1"
size="3"
icon="chat"
></va-icon>
<va-link
disable-analytics
onClick="recordEvent({ event: 'cta-hub-link-click' });"
href="{{ fieldVamcEhrSystem | topTaskUrl: "secure-messaging/", buildtype }}"
class="top-task-link vads-u-height--full vads-u-width--full">
<i
class="far fa-comments vads-facility-hub-cta-circle">&nbsp;</i>
<span class="vads-facility-hub-cta-label">Send a secure
message to your health care team<i
class="fa fa-chevron-right vads-facility-hub-cta-arrow">&nbsp;</i></span>
</a>
text="Send a secure message to your health care team"
></va-link>
</div>
<div
class="vads-facility-hub-cta vads-u-border-color--primary-alt-light medium-screen:vads-u-border-bottom--1px">
<a onClick="recordEvent({ event: 'cta-hub-link-click' });"
<div class="vads-facility-hub-cta vads-u-border-color--primary-alt-light medium-screen:vads-u-border-bottom--1px vads-u-display--flex vads-u-align-items--center">
<va-icon
class="vads-u-color--link-default vads-facility-hub-cta-circle vads-u-margin-right--1"
size="3"
icon="event_available"
></va-icon>
<va-link
disable-analytics
onClick="recordEvent({ event: 'cta-hub-link-click' });"
href="{{ fieldVamcEhrSystem | topTaskUrl: "schedule-view-va-appointments/", buildtype }}"
class="top-task-link vads-u-height--full vads-u-width--full">
<i
class="far fa-calendar-check vads-facility-hub-cta-circle">&nbsp;</i>
<span class="vads-facility-hub-cta-label">Schedule and manage
health appointments<i
class="fa fa-chevron-right vads-facility-hub-cta-arrow">&nbsp;</i></span>
</a>
text="Schedule and manage health appointments"
></va-link>
</div>
</div>
<div>
<div class="vads-facility-hub-cta">
<a onClick="recordEvent({ event: 'cta-hub-link-click' });"
<div class="vads-facility-hub-cta vads-u-display--flex vads-u-align-items--center">
<va-icon
class="vads-u-color--link-default vads-facility-hub-cta-circle vads-u-margin-right--1"
size="3"
icon="note_add"
></va-icon>
<va-link
disable-analytics
onClick="recordEvent({ event: 'cta-hub-link-click' });"
href="{{ fieldVamcEhrSystem | topTaskUrl: "get-medical-records/", buildtype }}"
class="top-task-link vads-u-height--full vads-u-width--full">
<i
class="fa fa-file-medical vads-facility-hub-cta-circle">&nbsp;</i>
<span class="vads-facility-hub-cta-label">Download your VA
medical records (Blue Button)<i
class="fa fa-chevron-right vads-facility-hub-cta-arrow">&nbsp;</i></span>
</a>
text="Download your VA medical records (Blue Button)"
></va-link>
</div>
<div class="vads-facility-hub-cta">
<a onClick="recordEvent({ event: 'cta-hub-link-click' });"
<div class="vads-facility-hub-cta vads-u-display--flex vads-u-align-items--center">
<va-icon
class="vads-u-color--link-default vads-facility-hub-cta-circle vads-u-margin-right--1"
size="3"
icon="assignment"
></va-icon>
<va-link
disable-analytics
onClick="recordEvent({ event: 'cta-hub-link-click' });"
href="{{ fieldVamcEhrSystem | topTaskUrl: "view-test-and-lab-results/", buildtype }}"
class="top-task-link vads-u-height--full vads-u-width--full">
<i
class="fa fa-clipboard-list vads-facility-hub-cta-circle">&nbsp;</i>
<span class="vads-facility-hub-cta-label">View your lab and
test results<i
class="fa fa-chevron-right vads-facility-hub-cta-arrow">&nbsp;</i></span>
</a>
text="View your lab and test results"
></va-link>
</div>
<div
class="vads-facility-hub-cta vads-facility-hub-cta-last-line vads-u-border-top--1px vads-u-border-color--primary-alt-light">
<a onClick="recordEvent({ event: 'cta-hub-link-click' });"
<div class="vads-facility-hub-cta vads-facility-hub-cta-last-line vads-u-border-top--1px vads-u-border-color--primary-alt-light vads-u-display--flex vads-u-align-items--center">
<va-icon
class="vads-u-color--link-default vads-facility-hub-cta-circle vads-u-margin-right--1"
size="3"
icon="hearing_disabled"
></va-icon>
<va-link
disable-analytics
onClick="recordEvent({ event: 'cta-hub-link-click' });"
href="/health-care/order-hearing-aid-batteries-and-accessories/"
class="vads-u-height--full vads-u-width--full">
<i
class="fa fa-deaf vads-facility-hub-cta-circle">&nbsp;</i>
<span class="vads-facility-hub-cta-label">Order hearing aid batteries <br/> and accessories<i class="fa fa-chevron-right vads-facility-hub-cta-arrow">&nbsp;</i></span>
</a>
text="Order hearing aid batteries and accessories"
></va-link>
</div>
</div>
</div>
Expand Down Expand Up @@ -158,12 +170,15 @@
{% assign node = story %}
{% include "src/site/teasers/news_story.drupal.liquid" with node = story %}
{% endfor %}
<a onClick="recordEvent({ event: 'nav-secondary-button-click' });"
class="usa-button usa-button-secondary vads-facility-hub-button vads-u-width--full medium-screen:vads-u-width--auto vads-u-font-size--md vads-u-margin--0"
href="{{ entityUrl.path }}/stories">
See all stories <i
class="fa fa-chevron-right va-l-font-size--12px"></i>
</a>
<va-link
active
disable-analytics
onClick="recordEvent({ event: 'nav-secondary-button-click' });"
class="vads-u-font-size--md vads-u-display--block vads-u-width--full"
href="{{ entityUrl.path }}/stories"
text="See all stories"
>
</va-link>
</section>
{% endif %}

Expand All @@ -177,12 +192,15 @@
{% assign node = event %}
{% include "src/site/teasers/event.drupal.liquid" %}
{% endfor %}
<a onClick="recordEvent({ event: 'nav-secondary-button-click' });"
class="usa-button usa-button-secondary vads-facility-hub-button vads-u-width--full medium-screen:vads-u-width--auto vads-u-font-size--md vads-u-margin--0"
href="{{ entityUrl.path }}/events">
See all events <i
class="fa fa-chevron-right va-l-font-size--12px"></i>
</a>
<va-link
active
disable-analytics
onClick="recordEvent({ event: 'nav-secondary-button-click' });"
class="vads-u-font-size--md vads-u-display--block vads-u-width--full"
href="{{ entityUrl.path }}/events"
text="See all events"
>
</va-link>
</section>
{% elsif eventTeasersAll.entities.0.reverseFieldListingNode.entities.length %}
{% assign upcomingEvents = eventTeasersAll.entities.0.reverseFieldListingNode.entities %}
Expand All @@ -195,15 +213,19 @@
{% assign node = event %}
{% include "src/site/teasers/event.drupal.liquid" %}
{% endfor %}
<a onClick="recordEvent({ event: 'nav-secondary-button-click' });"
class="usa-button usa-button-secondary vads-facility-hub-button vads-u-width--full medium-screen:vads-u-width--auto vads-u-font-size--md vads-u-margin--0"
href="{{ entityUrl.path }}/events">
See all events <i class="fa fa-chevron-right va-l-font-size--12px" aria-hidden="true"></i>
</a>
<va-link
active
disable-analytics
onClick="recordEvent({ event: 'nav-secondary-button-click' });"
class="vads-u-font-size--md vads-u-display--block vads-u-width--full"
href="{{ entityUrl.path }}/events"
text="See all events"
>
</va-link>
</section>
{% endif %}
{% include "src/site/facilities/facility_social_links.drupal.liquid" with regionNickname = title %}

<va-back-to-top></va-back-to-top>
</article>
<!-- Last updated & feedback button-->
{% include "src/site/includes/above-footer-elements.drupal.liquid" %}
Expand Down
4 changes: 3 additions & 1 deletion src/site/teasers/news_story.drupal.liquid
View file
Original file line number Diff line number Diff line change
Expand Up @@ -29,7 +29,9 @@ Example data:
{% assign isStoriesPage = entityUrl.path | isPage: "stories" %}
<div data-template="teasers/news_story" class="featured-story region-list usa-grid usa-grid-full vads-u-margin-bottom--3 medium-screen:vads-u-margin-bottom--4 vads-u-display--flex vads-u-flex-direction--column small-screen:vads-u-flex-direction--row">
<div class="region-grid vads-u-margin-right--2 {% if isStoriesPage %}stories-list{% endif %}">
<{{ header }} class="vads-u-font-size--md medium-screen:vads-u-font-size--lg vads-u-margin-top--0 medium-screen:vads-u-margin-bottom--0p5"><a href="{{ node.entityUrl.path }}">{{ node.title }}</a></{{ header }}>
<{{ header }} class="vads-u-font-size--md medium-screen:vads-u-font-size--lg vads-u-margin-top--0 medium-screen:vads-u-margin-bottom--0p5">
<va-link href="{{ node.entityUrl.path }}" text="{{ node.title }}"></va-link>
</{{ header }}>
<p class="vads-u-margin-y--0">{{ node.fieldIntroText | truncatewords: 60, "..." }}</p>
</div>
<div class="region-grid {% if isStoriesPage %}stories-list{% endif %} vads-u-order--first small-screen:vads-u-order--initial vads-u-margin-bottom--2 medium-screen:vads-u-margin-bottom--0">
Expand Down

0 comments on commit 0837660

Please sign in to comment.