Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

VACMS-16952 VAMC System pages web components #2092

Merged
merged 1 commit into from
May 23, 2024
Merged

VACMS-16952 VAMC System pages web components #2092

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
95 changes: 46 additions & 49 deletions src/site/components/fullwidth_banner_alerts.drupal.liquid
View file
Open in desktop
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
Open in desktop
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
Open in desktop
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
Loading