VACMS-18765 Cross-repository style cleanup

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

Hide file tree

Showing 15 changed files with 247 additions and 63 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,185 @@
   }
 }
 
-// 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;
+  }
+}
+
+.media-list-images {
+  @media (min-width: var(--small-screen)) {
+    max-width: 50%;
+  }
+}
+
+.va-c-position-top-right-corner {
+  right: 0;
+  top: 0;
+}
+
+.va-c-margin-top--auto {
+  margin-top: auto;
+}
+
+// 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/media_list_images.drupal.liquid b/src/site/layouts/media_list_images.drupal.liquid
@@ -59,19 +59,19 @@
                         </{{ image_title_tag }}>
                       </dt>
 
-                      <dd class="va-c-position--relative">
+                      <dd class="vads-u-position--relative">
                         <picture>
                           {% if mediaImage.entity.image.url == empty %}
                             <img
                               alt="{{ alt }}"
-                              class="alt-text-container vads-u-background-color--gray-lightest vads-u-display--block vads-u-border--1px vads-u-border-color--gray-light"
+                              class="vads-u-background-color--gray-lightest vads-u-display--block vads-u-border--1px vads-u-border-color--gray-light"
                               height="{{ mediaImage.entity.image.height }}"
                               width="{{ mediaImage.entity.image.width }}"
                             />
                           {% else %}
                             <a
                               aria-label="Open image in new tab"
-                              class="vads-u-margin-right--1p5 vads-u-margin-top--1p5 vads-u-text-decoration--none vads-u-display--flex vads-u-align-items--center expand-image-button va-c-position--absolute va-c-position-top-right-corner vads-u-justify-content--center"
+                              class="vads-u-margin-right--1p5 vads-u-margin-top--1p5 vads-u-text-decoration--none vads-u-display--flex vads-u-align-items--center expand-image-button vads-u-position--absolute va-c-position-top-right-corner vads-u-justify-content--center"
                               href="{{ mediaImage.entity.image.url }}"
                               target="_blank"
                             >
@@ -110,19 +110,19 @@
                               <{{image_title_tag}} class="{{image_title_classes }} medium-screen:vads-u-margin-top--0">{{ remainingImage.entity.entityLabel }}</{{image_title_tag}}>
                             </dt>
 
-                            <dd class="va-c-position--relative">
+                            <dd class="vads-u-position--relative">
                               <picture>
                                 {% if remainingImage.entity.image.url == empty %}
                                   <img
                                     alt="{{ alt }}"
-                                    class="alt-text-container vads-u-background-color--gray-lightest vads-u-display--block vads-u-border--1px vads-u-border-color--gray-light"
+                                    class="vads-u-background-color--gray-lightest vads-u-display--block vads-u-border--1px vads-u-border-color--gray-light"
                                     height="{{ remainingImage.entity.image.height }}"
                                     width="{{ remainingImage.entity.image.width }}"
                                   />
                                 {% else %}
                                   <a
                                     aria-label="Open image in new tab"
-                                    class="vads-u-margin-right--1p5 vads-u-margin-top--1p5 vads-u-text-decoration--none vads-u-display--flex vads-u-align-items--center expand-image-button va-c-position--absolute va-c-position-top-right-corner vads-u-justify-content--center"
+                                    class="vads-u-margin-right--1p5 vads-u-margin-top--1p5 vads-u-text-decoration--none vads-u-display--flex vads-u-align-items--center expand-image-button vads-u-position--absolute va-c-position-top-right-corner vads-u-justify-content--center"
                                     href="{{ remainingImage.entity.image.url }}"
                                     target="_blank"
                                   >

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 %}