ETT-386: update SERP label styles for resource sharing, add stories

src/js/designs/ResultsItem/ResultsItem.stories.js

@@ -21,6 +21,9 @@ const parameters = {
 
 export const FullView = {
   parameters: parameters,
+  args: {
+    visited: false,
+  }
 };
 export const MultipleItems = {
   parameters: parameters,
@@ -33,11 +36,20 @@ export const SearchOnly = {
   parameters: parameters,
   args: {
     access: 'limited-search-only',
+    visited: false,
+  },
+};
+export const RegisteredAccess = {
+  parameters: parameters,
+  args: {
+    access: 'registered-access',
+    visited: false,
   },
 };
 export const AccessPermitted = {
   parameters: parameters,
   args: {
     access: 'limited-access-permitted',
+    visited: false,
   },
 };

src/js/designs/ResultsItem/index.svelte

@@ -7,6 +7,7 @@
   export let publicationDate = 1827;
   export let author = 'Nicolas, Nicholas Harris, Sir, 1799-1848.';
   export let supportsSelection = true;
+  export let visited = false;
 
   let coverUrl = `https://babel.hathitrust.org/cgi/imgsrv/cover?id=${htid}&width=250`;
   let blankImage = `data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAQAAAC1HAwCAAAAC0lEQVR42mNkYAAAAAYAAjCB0C8AAAAASUVORK5CYII=`;
@@ -43,7 +44,10 @@
         <a
           class="list-group-item list-group-item-action w-sm-50"
           href="http://catalog.hathitrust.org/Record/{catalogId}"
-          ><i class="fa-solid fa-circle-info" aria-hidden="true" /> <span>Catalog Record</span></a
+          ><i class="fa-solid fa-circle-info" aria-hidden="true" /> <span>Catalog Record</span>{#if visited}<i
+              aria-hidden="true"
+              class="visited-link fa-solid fa-check-double"
+            ></i>{/if}</a
         >
         {#if access == 'multiple-items'}
           <a
@@ -54,20 +58,39 @@
           <!-- <span class="list-group-item w-sm-50 border-0 bg-transparent fs-7">Use the Catalog Record to view multiple volumes</span> -->
         {:else if access == 'limited-search-only'}
           <a class="list-group-item list-group-item-action w-sm-50" href="https://babel.hathitrust.org/cgi/pt?id={htid}"
-            ><i aria-hidden="true" class="fa-solid fa-lock" /> <span>Limited (search-only)</span></a
+            ><i aria-hidden="true" class="fa-solid fa-lock" /> <span>Limited (search-only)</span>{#if visited}<i
+                aria-hidden="true"
+                class="visited-link fa-solid fa-check-double"
+              ></i>{/if}</a
+          >
+        {:else if access == 'registered-access'}
+          <a
+            data-activated-role="superuser"
+            class="list-group-item list-group-item-action w-sm-50"
+            href="https://babel.hathitrust.org/cgi/pt?id={htid}"
+            ><i aria-hidden="true" class="fa-solid fa-lock-open" /> <span>Registered Access</span>{#if visited}<i
+                aria-hidden="true"
+                class="visited-link fa-solid fa-check-double"
+              ></i>{/if}</a
           >
         {:else if access == 'limited-access-permitted'}
           <a
-            data-access-role="superuser"
+            data-activated-role="superuser"
             class="list-group-item list-group-item-action w-sm-50"
             href="https://babel.hathitrust.org/cgi/pt?id={htid}"
-            ><i aria-hidden="true" class="fa-solid fa-unlock-keyhole" /> <span>Limited (access permitted)</span></a
+            ><i aria-hidden="true" class="fa-solid fa-unlock" /> <span>Limited (access permitted)</span>{#if visited}<i
+                aria-hidden="true"
+                class="visited-link fa-solid fa-check-double"
+              ></i>{/if}</a
           >
         {:else}
           <a
             class="list-group-item list-group-item-action active active w-sm-50"
             href="https://babel.hathitrust.org/cgi/pt?id={htid}"
-            ><i class="fa-regular fa-file-lines" aria-hidden="true" /> <span>Full View</span></a
+            ><i class="fa-regular fa-file-lines" aria-hidden="true" /> <span>Full View</span>{#if visited}<i
+                aria-hidden="true"
+                class="visited-link fa-solid fa-check-double"
+              ></i>{/if}</a
           >
         {/if}
       </div>
@@ -106,23 +129,67 @@
     text-decoration: none;
   }
 
-  a[data-access-role] {
-    background: #924a0b;
-    // border-radius: 4px;
-    color: white;
+  .list-group {
+    a {
+      white-space: nowrap;
 
-    &:hover {
-      background: white;
-      color: #924a0b;
+      &:has(+ span) {
+        border-top-right-radius: var(--bs-list-group-border-radius) !important;
+        border-bottom-right-radius: var(--bs-list-group-border-radius) !important;
+      }
+      .visited-link {
+        color: var(--bs-list-group-color);
+        margin-left: auto;
+      }
+      &:hover .visited-link,
+      &:focus .visited-link {
+        color: var(--bs-list-group-action-hover-color);
+      }
+
+      &:active .visited-link {
+        color: var(--bs-list-group-action-active-bg);
+      }
+
+      .visited-link {
+        color: var(--bs-list-group-color);
+      }
+
+      // &.active .visited-link {
+      //   color: var(--bs-list-group-active-bg);
+      // }
+
+      &.active .visited-link {
+        color: var(--bs-list-group-active-color);
+      }
+    }
+    .list-group-item {
+      display: flex;
+      align-items: center;
+      gap: 0.5rem;
     }
   }
+  a[data-activated-role] {
+    background: var(--color-primary-800);
+    color: white;
 
-  .list-group a {
-    white-space: nowrap;
-
-    &:has(+ span) {
-      border-top-right-radius: var(--bs-list-group-border-radius) !important;
-      border-bottom-right-radius: var(--bs-list-group-border-radius) !important;
+    &:hover,
+    &:focus {
+      background: white;
+      color: var(--color-primary-800);
+    }
+    .visited-link {
+      color: var(--color-shades-0);
+    }
+    &:hover .visited-link,
+    &:focus .visited-link {
+      color: var(--color-primary-800);
+    }
+    &:active {
+      background-color: var(--color-primary-900);
+      color: var(--color-shades-0);
+    }
+    &:active .visited-link {
+      color: var(--color-shades-0);
     }
   }
 </style>

src/js/designs/ResultsList/index.svelte

@@ -20,6 +20,14 @@
       publicationDate: 1979,
       access: 'limited-search-only',
     },
+    {
+      htid: 'coo.31924057934600',
+      catalogId: '000552872',
+      title: 'Contributions from the Dominion Observatory, Ottawa, Ontario v.6:6',
+      author: 'Dominion Observatory (Canada)',
+      publicationDate: 1979,
+      access: 'registered-access',
+    },
     {
       htid: 'hvd.32044019639822',
       catalogId: '009720544',

src/scss/apps.scss

@@ -180,37 +180,40 @@ body {
     text-decoration: none;
   }
 
-  a[data-access-role] {
-    background: #924a0b;
-    // border-radius: 4px;
-    color: white;
-
-    &:hover {
-      background: white;
-      color: #924a0b;
-    }
-  }
-
   .list-group a {
     white-space: nowrap;
     display: inline-flex;
     align-items: center;
     gap: 0.5rem;
 
+    font-size: 1rem;
+    font-weight: 500;
+    line-height: 1.3125rem;
+    letter-spacing: -0.01rem;
+
     &:has(+ span) {
       border-top-right-radius: var(--bs-list-group-border-radius) !important;
       border-bottom-right-radius: var(--bs-list-group-border-radius) !important;
+
     }
 
+    // label colors
+    --bs-list-group-color: var(--color-neutral-900);
+    --bs-list-group-bg: var(--color-shades-0);
+    --bs-list-group-active-color: var(--color-shades-0);
+    --bs-list-group-active-bg: var(--color-primary-600);
+    --bs-list-group-action-active-color: var(--color-neutral-900);
+    --bs-list-group-action-active-bg: var(--color-neutral-100);
+
     .visited-link {
       color: var(--bs-list-group-bg);
       margin-left: auto;
     }
 
-    &:hover .visited-link,&:focus .visited-link {
+    &:hover .visited-link, &:focus .visited-link {
       color: var(--bs-list-group-action-hover-bg);
     }
-
+    
     &:active .visited-link {
       color: var(--bs-list-group-action-active-bg);
     }
@@ -219,14 +222,50 @@ body {
       color: var(--bs-list-group-color);
     }
 
-    &.active .visited-link { 
-      color: var(--bs-list-group-active-bg);
-    }
-
     &.active:visited .visited-link {
       color: var(--bs-list-group-active-color);
     }
 
+    &.active .visited-link {
+      color: var(--bs-list-group-active-bg);
+    }   
+
+    &[data-activated-role] {
+      background: var(--color-primary-800);
+      color: var(--color-shades-0);
+
+      &:hover, &:focus {
+        background: var(--color-shades-0);
+        color: var(--color-primary-800);
+      }
+
+      .visited-link {
+        color: var(--color-primary-800);
+      }
+
+      &:visited .visited-link {
+        color: var(--color-shades-0);
+      }
+
+      &:hover .visited-link, &:focus .visited-link {
+        color: var(--color-shades-0);
+      }
+
+      &:active .visited-link {
+        color: var(--color-shades-0);
+      }
+
+      &:visited:hover .visited-link, &:visited:focus .visited-link {
+        color: var(--color-primary-800);
+      }
+
+    }
+  }
+  .list-group-horizontal-sm>.list-group-item {
+    &:focus-visible {
+      border-top-right-radius: 6px;
+      border-bottom-left-radius: 6px;
+    }
   }
 
   // by default, hide the 10+nth facets