VACMS-18765 Cross-repository style cleanup

department-of-veterans-affairs · Sep 9, 2024 · 98c722a · 98c722a
1 parent 9abb220
commit 98c722a
Show file tree

Hide file tree

Showing 13 changed files with 224 additions and 55 deletions.
diff --git a/package.json b/package.json
@@ -207,6 +207,7 @@
   },
   "private": true,
   "dependencies": {
+    "@department-of-veterans-affairs/css-library": "^0.9.8",
     "@department-of-veterans-affairs/vagov-platform": "^0.0.1",
     "aws-sdk": "^2.1441.0",
     "blob-polyfill": "^4.0.20200601",
@@ -272,4 +273,4 @@
     "**/ansi-regex": "^4.1.1",
     "**/@babel/core": "^7.23.2"
   }
-}
+}
diff --git a/src/site/assets/sass/style.scss b/src/site/assets/sass/style.scss
@@ -1,6 +1,8 @@
+@import "~@department-of-veterans-affairs/css-library/dist/stylesheets/mixins";
+
 // Add CSS and imports here.
 .feedback-button {
-  background-color: var(color-primary);
+  background-color: var(--vads-color-primary);
   font-size: 1rem;
   font-weight: 700;
   line-height: 1;
@@ -263,6 +265,7 @@
     }
   }
 }
+
 // fix for sidenav btn
 .va-sidenav-btn-close {
   background-size: 0.625rem 0.625rem;
@@ -282,4 +285,170 @@
   }
 }
 
-// END: Styles for mobile app promo banner  
+// END: Styles for mobile app promo banner
+
+.bio-paragraph-image {
+  border-radius: 50%;
+  position: relative;
+  height: 110px;
+  width: 110px;
+}
+
+.va-facility-page {
+  .va-address-block {
+    margin-left: 0.625rem;
+    border-left: none;
+  }
+}
+
+// The below styles are still used in home.html, which is the legacy home page
+// so technically these are "unused" but the template still exists so the styles will until it goes away
+.homepage-hub {
+  @include linear-gradient-background(var(--vads-color-primary), var(--vads-color-primary-darker));
+  padding-top: 1.5em;
+
+  @include media(var(--medium-screen)) {
+    padding-top: 3em;
+  }
+}
+
+.homepage-hub-container {
+  max-width: 62.5rem;
+
+  @include media(var(--medium-screen)) {
+    margin: auto;
+    width: 85%;
+  }
+
+  @include media(var(--large-screen)) {
+    margin: auto;
+    width: 64%;
+  }
+}
+
+.homepage-image-wrapper {
+  width: 100%;
+  height: 0;
+  padding-bottom: 65%;
+  /* You define this doing height / width * 100% */
+  position: relative;
+
+  > .lazy {
+    width: 100%;
+    position: absolute;
+  }
+}
+
+.homepage-news-story-title {
+  margin-top: 1em;
+  margin-bottom: 0;
+
+  @include media(var(--medium-screen)) {
+    margin-top: 1.5em;
+    margin-bottom: inherit;
+  }
+}
+
+.homepage-news-story-desc {
+  margin-top: 0.5em;
+  margin-bottom: 0;
+
+  @include media(var(--medium-screen)) {
+    margin-bottom: inherit;
+  }
+}
+
+.homepage-news-story {
+  margin-bottom: 2em;
+
+  @include media(var(--medium-screen)) {
+    margin-bottom: 0em;
+  }
+}
+
+.homepage-button {
+  width: 100%;
+  height: 85px;
+  padding: 0;
+  margin: 0 0 16px;
+  display: inline-block;
+  color: var(--vads-color-white);
+  background-color: var(--vads-color-primary);
+  text-decoration: none;
+  border-radius: 5px;
+  font-weight: 700;
+  line-height: 16px;
+  text-align: center;
+  -moz-osx-font-smoothing: grayscale;
+  -webkit-font-smoothing: antialiased;
+
+  transition-duration: 0.3s;
+  transition-timing-function: ease-in-out;
+  transition-property: background-color;
+
+  &:hover,
+  &:active {
+    background-color: var(--vads-color-primary-dark);
+    outline-offset: 2px;
+
+    .icon-wrapper {
+      background-color: var(--vads-color-primary-darker);
+    }
+  }
+
+  &:hover,
+  &:focus,
+  &:visited {
+    color: var(--vads-color-white);
+    text-decoration: none;
+    outline-offset: 2px;
+  }
+
+  &.vcl {
+    background-color: var(--vads-color-secondary-dark);
+
+    &:hover,
+    &:active {
+      background-color: var(--vads-color-secondary-darkest);
+      outline-offset: 2px;
+
+      .icon-wrapper {
+        background-color: var(--vads-color-secondary-dark);
+        outline-offset: 2px;
+      }
+    }
+  }
+
+  .icon-wrapper {
+    width: 55px;
+    height: 100%;
+    float: left;
+    background-color: var(--vads-color-primary-dark);
+    border-top-left-radius: 6px;
+    border-bottom-left-radius: 6px;
+
+    transition-duration: 0.3s;
+    transition-timing-function: ease-in-out;
+    transition-property: background-color;
+
+    &.vcl {
+      content: "";
+      background: url(../img/VCL-icon-white.svg) no-repeat;
+      background-size: 2em auto;
+      background-position: center;
+      background-color: var(--vads-color-secondary-darkest);
+    }
+  }
+
+  .button-inner {
+    margin-left: 55px;
+    height: 100%;
+    padding: 1em;
+    text-align: left;
+    display: flex;
+    flex-direction: column;
+    justify-content: center;
+  }
+}
+
+// end home.html styles
diff --git a/src/site/facilities/facility_social_links.drupal.liquid b/src/site/facilities/facility_social_links.drupal.liquid
@@ -1,6 +1,6 @@
 <section data-template="facilities/facility_social_links" class="feature vads-u-background-color--gray-lightest vads-u-margin-top--4 small-screen:vads-u-margin-top--6 vads-u-padding-x--3 vads-u-padding-y--2p5">
     <h2 class="vads-u-margin-bottom--2">Get updates from {{ regionNickname }}</h2>
-    <div class="va-c-list-link-teasers usa-grid usa-grid-full">
+    <div class="usa-grid usa-grid-full">
 
         {% if fieldGovdeliveryIdEmerg != empty or if fieldGovdeliveryIdNews != empty %}
             <div class="usa-width-one-half">

diff --git a/src/site/facilities/vba_social_links.drupal.liquid b/src/site/facilities/vba_social_links.drupal.liquid
@@ -1,6 +1,6 @@
 <section data-template="facilities/facility_social_links" class="feature vads-u-background-color--gray-lightest vads-u-margin-top--4 small-screen:vads-u-margin-top--6 vads-u-padding-x--3 vads-u-padding-y--2p5">
   <h2 class="vads-u-margin-bottom--2">Get updates from {{ regionNickname }}</h2>
-  <div class="va-c-list-link-teasers usa-grid usa-grid-full">
+  <div class="usa-grid usa-grid-full">
     {% if fieldGovdeliveryIdEmerg != empty or fieldNews != empty %}
       <div class="usa-width-one-half">
         {% if fieldNews != empty %}

diff --git a/src/site/layouts/event_listing.drupal.liquid b/src/site/layouts/event_listing.drupal.liquid
@@ -17,7 +17,7 @@
 				<h1 id="article-heading">{{ title }}</h1>
 				<div class="va-introtext">
 					{% if fieldIntroText %}
-						<p class="events-show" id="office-events-description">
+						<p id="office-events-description">
 							{{ fieldIntroText }}
 						</p>
 					{% endif %}

diff --git a/src/site/layouts/health_care_region_page.drupal.liquid b/src/site/layouts/health_care_region_page.drupal.liquid
@@ -17,7 +17,7 @@
 
           <div
             class="duotone darken lighten medium-screen:vads-u-margin-bottom--0p5">
-            <img class="system-img" src="{{ image.derivative.url }}" aria-hidden="true" role="presentation" alt="" width="100%">
+            <img src="{{ image.derivative.url }}" aria-hidden="true" role="presentation" alt="" width="100%">
           </div>
 
           <div

diff --git a/src/site/layouts/health_services_listing.drupal.liquid b/src/site/layouts/health_services_listing.drupal.liquid
@@ -15,7 +15,7 @@
             {{title}}</h1>
           <div class="va-introtext">
             {% if fieldIntroText %}
-              <p class="events-show" id="office-events-description">
+              <p id="office-events-description">
                 {{ fieldIntroText }}
               </p>
             {% endif %}
@@ -31,7 +31,7 @@
           <va-on-this-page></va-on-this-page>
 
           {% if fieldFeaturedContentHealthser %}
-          <section class="featured-services" id="featured-services">
+          <section>
             <h2>In the spotlight</h2>
             <div class="vads-u-display--flex vads-u-flex-direction--column vads-u-justify-content--space-between medium-screen:vads-u-flex-direction--row vads-u-margin-bottom--4">
               {% for featuredService in fieldFeaturedContentHealthser %}

diff --git a/src/site/layouts/home.html b/src/site/layouts/home.html
@@ -9,7 +9,7 @@
       <h1 class="heading-level-2 homepage-heading">{{ heading }}</h1>
 
       <!-- top row -->
-      <div class="hub-links-row">
+      <div>
         {% for card in cards %}
         <div class="hub-links-container" data-e2e="bucket">
           <h2 class="heading-level-3 vads-u-margin-top--0">{{
@@ -26,7 +26,7 @@ <h2 class="heading-level-3 vads-u-margin-top--0">{{
         </div>
         {% if card.end_row == true and forloop.last != true %}
       </div>
-      <div class="hub-links-row">
+      <div>
         {% endif %}
         {% endfor %}
       </div>
@@ -42,7 +42,8 @@ <h2 class="heading-level-3 vads-u-margin-top--0">{{
       <div class="usa-grid usa-grid-full homepage-benefits-row">
         {% for hub in hubs %}
         <div class="usa-width-one-third" data-e2e="hub">
-          <h3 class="heading-level-4"><a href="{{ hub.url }}" onclick="recordEvent({ event: 'nav-linkslist' });">{{hub.heading}}</a>
+          <h3 class="heading-level-4"><a href="{{ hub.url }}"
+              onclick="recordEvent({ event: 'nav-linkslist' });">{{hub.heading}}</a>
             </h4>
             <p class="vads-u-margin-top--0">{{hub.description}}</p>
         </div>

diff --git a/src/site/layouts/press_releases_listing.drupal.liquid b/src/site/layouts/press_releases_listing.drupal.liquid
@@ -66,7 +66,7 @@ larger space in the Fayette Plaza at 627 Pittsburgh Road, Suite 2, Uniontown,
           <div class="vads-l-grid-container--full">
             <div class="va-introtext">
               {% if fieldIntroText %}
-              <p class="events-show" id="office-events-description">
+              <p id="office-events-description">
                 {{ fieldIntroText }}
               </p>
               {% endif %}

diff --git a/src/site/layouts/story_listing.drupal.liquid b/src/site/layouts/story_listing.drupal.liquid
@@ -16,7 +16,7 @@
             <div class="vads-l-grid-container--full">
               <div class="va-introtext">
                 {% if fieldIntroText %}
-                <p class="events-show" id="office-events-description">
+                <p id="office-events-description">
                   {{ fieldIntroText }}
                 </p>
                 {% endif %}

diff --git a/src/site/paragraphs/facilities/list_of_link_teasers_facility.drupal.liquid b/src/site/paragraphs/facilities/list_of_link_teasers_facility.drupal.liquid
@@ -15,45 +15,43 @@
         {% endif %}
     </h2>
 
-    <div class="va-c-list-link-teasers">
-      <div class="usa-grid usa-grid-full">
-        {% assign linkTeasers = paragraph.fieldVaParagraphs %}
-        {% comment %}
-            Max number of links allowed = 8
-        {% endcomment %}
-        {% if linkTeasers.length > 8 %}
-          {% assign linkTeasers = linkTeasers | sliceArray: 0, 8 %}
-        {% endif %}
-
-        {% comment %}
-            If there are less than or exactly 6 links, 3 items per column
-            If there are more than 6 links, 4 items per column
-        {% endcomment %}
-        {% if linkTeasers.length > 6 %}
-          {% assign linkWrapperStartIndex = 5 %}
-          {% assign linkWrapperEndIndex = 4 %}
-        {%  else %}
-          {% assign linkWrapperStartIndex = 4 %}
-          {% assign linkWrapperEndIndex = 3 %}
+    <div class="usa-grid usa-grid-full">
+      {% assign linkTeasers = paragraph.fieldVaParagraphs %}
+      {% comment %}
+          Max number of links allowed = 8
+      {% endcomment %}
+      {% if linkTeasers.length > 8 %}
+        {% assign linkTeasers = linkTeasers | sliceArray: 0, 8 %}
+      {% endif %}
+
+      {% comment %}
+          If there are less than or exactly 6 links, 3 items per column
+          If there are more than 6 links, 4 items per column
+      {% endcomment %}
+      {% if linkTeasers.length > 6 %}
+        {% assign linkWrapperStartIndex = 5 %}
+        {% assign linkWrapperEndIndex = 4 %}
+      {%  else %}
+        {% assign linkWrapperStartIndex = 4 %}
+        {% assign linkWrapperEndIndex = 3 %}
+      {% endif %}
+      {% for linkTeaser in linkTeasers %}
+        {% assign link = linkTeaser.entity.fieldLink %}
+        {% if forloop.last == true %}
+          {% assign spacing = "" %}
+        {% else %}
+          {% assign spacing = " vads-u-margin-bottom--2" %}
         {% endif %}
-        {% for linkTeaser in linkTeasers %}
-          {% assign link = linkTeaser.entity.fieldLink %}
-          {% if forloop.last == true %}
-            {% assign spacing = "" %}
-          {% else %}
-            {% assign spacing = " vads-u-margin-bottom--2" %}
-          {% endif %}
 
-          <va-link
-            disable-analytics
-            onclick="recordEvent({ event: 'nav-featured-content-link-click', 'featured-content-header': '{{ paragraph.fieldTitle }}', 'featured-content-click-label': '{{ link.title }}' });" 
-            class="other-services-links vads-u-display--block{{ spacing }}"
-            href="{{ link.url.path }}"
-            text="{{ link.title }}"
-          >
-          </va-link>
-        {% endfor %}
-      </div>
+        <va-link
+          disable-analytics
+          onclick="recordEvent({ event: 'nav-featured-content-link-click', 'featured-content-header': '{{ paragraph.fieldTitle }}', 'featured-content-click-label': '{{ link.title }}' });" 
+          class="other-services-links vads-u-display--block{{ spacing }}"
+          href="{{ link.url.path }}"
+          text="{{ link.title }}"
+        >
+        </va-link>
+      {% endfor %}
     </div>
 
   </section>
-Original file line number
+Diff line change
@@ Expand Up / @@ -17,7 +17,7 @@ @@
               <div
                 class="duotone darken lighten medium-screen:vads-u-margin-bottom--0p5">
-                <img class="system-img" src="{{ image.derivative.url }}" aria-hidden="true" role="presentation" alt="" width="100%">
+                <img src="{{ image.derivative.url }}" aria-hidden="true" role="presentation" alt="" width="100%">
               </div>
               <div
@@ Expand Down @@