From 2bc5a2c9ae1487bc4cc35a429eec8a4ea372c255 Mon Sep 17 00:00:00 2001
From: Mark Frisbey <5108740+mfrisbey@users.noreply.github.com>
Date: Thu, 30 Nov 2023 08:13:10 -0700
Subject: [PATCH] fix: resolve all css lint errors. (#258)

---
 .github/pull_request_template.md              |  2 +-
 .github/workflows/run-tests.yaml              |  2 +-
 .../adp-add-to-collection-modal.css           | 14 ++---
 blocks/adp-header/adp-header.css              | 51 ++++++++-----------
 .../adp-infinite-results-instantsearch.css    |  1 +
 .../adp-infinite-results-linkshare.css        |  7 ++-
 blocks/adp-metrics/adp-metrics.css            |  6 +--
 .../adp-refinement-date-range.css             |  1 +
 blocks/adp-search-field/adp-search-field.css  |  8 +--
 blocks/adp-share-modal/adp-share-modal.css    | 12 ++---
 styles/styles.css                             |  1 +
 11 files changed, 48 insertions(+), 57 deletions(-)

diff --git a/.github/pull_request_template.md b/.github/pull_request_template.md
index 6bee6b65..1a2cba4f 100644
--- a/.github/pull_request_template.md
+++ b/.github/pull_request_template.md
@@ -1,4 +1,4 @@
-Please always provide the [JIRA issue(s)]([../issues](https://jira.corp.adobe.com/)) your PR is for, as well as a description of your changes:
+Please always provide the [JIRA issue(s)](https://jira.corp.adobe.com/) your PR is for, as well as a description of your changes:
 
 JIRA: ASSETS-00000
 
diff --git a/.github/workflows/run-tests.yaml b/.github/workflows/run-tests.yaml
index 281adeed..27b3c3d7 100644
--- a/.github/workflows/run-tests.yaml
+++ b/.github/workflows/run-tests.yaml
@@ -12,6 +12,6 @@ jobs:
       with:
         node-version: '16' #required for npm 8 or later.
     - run: npm install
-    - run: npm run lint:js
+    - run: npm run lint
       env:
         CI: true
diff --git a/blocks/adp-add-to-collection-modal/adp-add-to-collection-modal.css b/blocks/adp-add-to-collection-modal/adp-add-to-collection-modal.css
index 10b296b1..16b03aeb 100644
--- a/blocks/adp-add-to-collection-modal/adp-add-to-collection-modal.css
+++ b/blocks/adp-add-to-collection-modal/adp-add-to-collection-modal.css
@@ -16,10 +16,10 @@
 
 .adp-add-to-collection-modal-container .dialog-header {
   display: grid;
-  grid-template-columns: 1fr 1fr;
-  grid-template-rows: 1fr;
   padding: 28px 34px 0 35px;
-  grid-template-areas: 'dialog-header-left dialog-header-right';
+  grid-template:
+    'dialog-header-left dialog-header-right' 1fr
+    / 1fr 1fr;
 }
 
 .adp-add-to-collection-modal-container .dialog-header span.icon {
@@ -45,9 +45,9 @@
 
 .adp-add-to-collection-modal-container .dialog-body {
   display: grid;
-  grid-template-columns: auto auto;
-  grid-template-rows: 1fr;
-  grid-template-areas: 'dialog-body-left dialog-body-right';
+  grid-template:
+    'dialog-body-left dialog-body-right' 1fr
+    / auto auto;
   column-gap: 40px;
   font-size: 14px;
   font-family: var(--body-font-family);
@@ -180,7 +180,7 @@
   margin-bottom: 10px;
   text-indent: 11px;
   appearance: none;
-  background-image: url(../../icons/chevronDown.svg);
+  background-image: url("../../icons/chevronDown.svg");
   background-repeat: no-repeat;
   background-position: center right 7px;
 }
diff --git a/blocks/adp-header/adp-header.css b/blocks/adp-header/adp-header.css
index 333cf006..84f6e0ca 100644
--- a/blocks/adp-header/adp-header.css
+++ b/blocks/adp-header/adp-header.css
@@ -4,7 +4,7 @@ header .nav-wrapper {
   position: fixed;
   width: 100%;
   border-bottom: #d5d5d5 0.2px solid;
-  box-shadow: 0 0 4px rgba(0, 0, 0, 0.05);
+  box-shadow: 0 0 4px rgba(0 0 0 / 5%);
 }
 
 header nav .nav-top{
@@ -18,6 +18,7 @@ header nav .nav-top{
   color: var(--header-text-color);
   background-color: var(--header-background-color);
   width: 100%;
+  grid-area: nav-top;
 }
 
 header nav a.user-switcher {
@@ -31,7 +32,7 @@ header nav dialog.user-profile {
   margin-right: 24px;
   width: 200px;
   border: 1px solid #d5d5d5;
-  box-shadow: 0 0 4px rgba(0, 0, 0, 0.05);
+  box-shadow: 0 0 4px rgba(0 0 0 / 5%);
   padding: 0;
   border-radius: 6px;
 }
@@ -62,6 +63,14 @@ header nav dialog .user-container .user-email {
   border-bottom: 2px solid #d5d5d5;
 }
 
+header nav a:any-link {
+  color: currentcolor;
+}
+
+header nav .nav-tools a {
+  margin-right: 10px;
+}
+
 header nav dialog .user-container a {
   width: 100%;
   padding-top: 10px;
@@ -71,7 +80,6 @@ header nav dialog .user-container a:hover{
   text-decoration: none;
 }
 
-
 header nav[aria-expanded="true"] .nav-top {
   overflow-y: auto;
   min-height: 100vh;
@@ -140,6 +148,11 @@ header .nav-wrapper .banner .banner-right .icon svg {
   fill: white;
 }
 
+header nav .icon {
+  fill: var(--header-text-color);
+  color: var(--header-text-color);
+}
+
 header .nav-wrapper .banner .icon {
   width: 32px;
   height: 32px;
@@ -187,16 +200,13 @@ header nav p {
   line-height: 1;
 }
 
-header nav a:any-link {
-  color: currentcolor;
-}
-
 /* hamburger */
 header nav .nav-hamburger {
   grid-area: hamburger;
   height: 22px;
-  display: flex;
+  width: 22px;
   align-items: center;
+
   /* disable hamburger since there is no use currently */
   display: none;
   visibility: hidden;
@@ -212,11 +222,7 @@ header nav .nav-hamburger button {
   overflow: initial;
   text-overflow: initial;
   white-space: initial;
-}
-
-header nav .icon {
-  fill: var(--header-text-color);
-  color: var(--header-text-color);
+  background: transparent !important;
 }
 
 header nav .nav-search {
@@ -224,14 +230,6 @@ header nav .nav-search {
   width: 550px;
 }
 
-header nav .nav-hamburger {
-  width: 22px;
-}
-
-header nav .nav-hamburger button {
-  background: transparent !important;
-}
-
 header nav .nav-hamburger-icon,
 header nav .nav-hamburger-icon::before,
 header nav .nav-hamburger-icon::after {
@@ -245,7 +243,6 @@ header nav .nav-hamburger-icon::before,
 header nav .nav-hamburger-icon::after {
   content: '';
   position: absolute;
-  /*background: currentcolor;*/
 }
 
 header nav[aria-expanded="false"] .nav-hamburger-icon,
@@ -460,10 +457,6 @@ header nav .nav-tools div {
   font-size: 0.8em;
 }
 
-header nav .nav-tools a {
-  margin-right: 10px;
-}
-
 header nav .quick-links {
   display: flex;
   flex-flow: row nowrap;
@@ -475,7 +468,7 @@ header nav .quick-links .item {
   padding-bottom: 11px;
   text-align: left;
   font: normal normal normal 16px/20px var(--body-font-family);
-  letter-spacing: 0px;
+  letter-spacing: 0;
   color: var(--label-color);
   opacity: 1;
   margin: 10px;
@@ -493,10 +486,6 @@ header nav .quick-links .item[aria-selected="true"] {
   text-underline-offset: 24px;
 }
 
-header nav .nav-top {
-  grid-area: nav-top;
-}
-
 header nav .nav-bottom {
   grid-area: nav-bottom;
   padding: 0 1rem;
diff --git a/blocks/adp-infinite-results-instantsearch/adp-infinite-results-instantsearch.css b/blocks/adp-infinite-results-instantsearch/adp-infinite-results-instantsearch.css
index e69de29b..a05a0c40 100644
--- a/blocks/adp-infinite-results-instantsearch/adp-infinite-results-instantsearch.css
+++ b/blocks/adp-infinite-results-instantsearch/adp-infinite-results-instantsearch.css
@@ -0,0 +1 @@
+/* styles here */
\ No newline at end of file
diff --git a/blocks/adp-infinite-results-linkshare/adp-infinite-results-linkshare.css b/blocks/adp-infinite-results-linkshare/adp-infinite-results-linkshare.css
index 801c51ff..27139d33 100644
--- a/blocks/adp-infinite-results-linkshare/adp-infinite-results-linkshare.css
+++ b/blocks/adp-infinite-results-linkshare/adp-infinite-results-linkshare.css
@@ -1,10 +1,9 @@
 .section.adp-infinite-results-linkshare-container {
     padding-top: 24px;
     display: grid;
-    grid-template-columns: auto min-content;
-    grid-template-rows: auto auto;
-    grid-template-areas:
-        "infinite-results asset-details";
+    grid-template:
+        "infinite-results asset-details" auto
+        / auto min-content;
     align-items: start;
     background-color: var(--assets-browser-background-color);
     border-top: solid #F1F1F1 2px;
diff --git a/blocks/adp-metrics/adp-metrics.css b/blocks/adp-metrics/adp-metrics.css
index 3249d4f0..e7c31d80 100644
--- a/blocks/adp-metrics/adp-metrics.css
+++ b/blocks/adp-metrics/adp-metrics.css
@@ -34,9 +34,9 @@
 }
 
 .adp-metrics .graph-container > div.metric-placeholder {
-  height: 0px;
-  padding-top: 0px;
-  padding-bottom: 0px;
+  height: 0;
+  padding-top: 0;
+  padding-bottom: 0;
   visibility: hidden;
   border: unset;
 }
diff --git a/blocks/adp-refinement-date-range/adp-refinement-date-range.css b/blocks/adp-refinement-date-range/adp-refinement-date-range.css
index e69de29b..a05a0c40 100644
--- a/blocks/adp-refinement-date-range/adp-refinement-date-range.css
+++ b/blocks/adp-refinement-date-range/adp-refinement-date-range.css
@@ -0,0 +1 @@
+/* styles here */
\ No newline at end of file
diff --git a/blocks/adp-search-field/adp-search-field.css b/blocks/adp-search-field/adp-search-field.css
index 9324dd4b..f5d283e4 100644
--- a/blocks/adp-search-field/adp-search-field.css
+++ b/blocks/adp-search-field/adp-search-field.css
@@ -103,14 +103,14 @@ svg.aa-ClearIcon {
     text-decoration: none;
  }
 
- .aa-Item:hover {
-    background-color: var(--overlay-background-color);
- }
-
  .aa-Item {
     min-height: 32px;
  }
 
+ .aa-Item:hover {
+    background-color: var(--overlay-background-color);
+ }
+
  .aa-ItemIcon {
     margin-top: 1px;
  }
diff --git a/blocks/adp-share-modal/adp-share-modal.css b/blocks/adp-share-modal/adp-share-modal.css
index def8432a..db302b89 100644
--- a/blocks/adp-share-modal/adp-share-modal.css
+++ b/blocks/adp-share-modal/adp-share-modal.css
@@ -15,10 +15,10 @@
 
 .adp-share-modal.block .dialog-header {
   display: grid;
-  grid-template-columns: 1fr 1fr;
-  grid-template-rows: 1fr;
   padding: 28px 34px 0 35px;
-  grid-template-areas: 'dialog-header-left dialog-header-right';
+  grid-template:
+    'dialog-header-left dialog-header-right' 1fr
+    / 1fr 1fr;
 }
 
 .adp-share-modal.block .dialog-header span.icon {
@@ -44,9 +44,9 @@
 
 .adp-share-modal.block .dialog-body {
   display: grid;
-  grid-template-columns: auto auto;
-  grid-template-rows: 1fr;
-  grid-template-areas: 'share-link-body-left share-link-body-right';
+  grid-template:
+    'share-link-body-left share-link-body-right' 1fr
+    / auto auto;
   column-gap: 40px;
   font-size: 14px;
   font-family: var(--body-font-family);
diff --git a/styles/styles.css b/styles/styles.css
index f926a8a5..6b7d1150 100644
--- a/styles/styles.css
+++ b/styles/styles.css
@@ -575,6 +575,7 @@ button.action {
   from {top: 0; opacity: 0;}
   to {top: 20px; opacity: 1;}
 }
+
 @keyframes adp-toast-fadeout {
   from {top: 20px; opacity: 1;}
   to {top: 0; opacity: 0;}