Fixes from code review

samvera-labs · Oct 30, 2024 · 35dbecd · 35dbecd
1 parent 03350f3
commit 35dbecd
Show file tree

Hide file tree

Showing 4 changed files with 16 additions and 7 deletions.
diff --git a/src/components/StructuredNavigation/NavUtils/List.test.js b/src/components/StructuredNavigation/NavUtils/List.test.js
@@ -174,7 +174,7 @@ describe('List component', () => {
       expect(screen.queryAllByTestId('list')).toHaveLength(1);
       expect(screen.queryAllByTestId('list-item').length).toEqual(1);
       expect(screen.queryAllByTestId('list-item')[0])
-        .toHaveTextContent('1. Beginning Responsibility: Lunchroom Manners (09:32)');
+        .toHaveTextContent('1.Beginning Responsibility: Lunchroom Manners (09:32)');
       // Has tracker UI element attached 
       expect(screen.queryAllByTestId('list-item')[0].children[0]).toHaveClass('tracker');
     });

diff --git a/src/components/StructuredNavigation/NavUtils/ListItem.js b/src/components/StructuredNavigation/NavUtils/ListItem.js
@@ -109,13 +109,13 @@ const ListItem = ({
                   <div className="tracker"></div>
                   {isClickable ? (
                     <>
-                      {isEmpty && <LockedSVGIcon />}
                       <a role='link'
                         className='ramp--structured-nav__item-link'
                         href={homepage && homepage != '' ? homepage : id}
                         onClick={handleClick}>
-                        {`${itemIndex}. `}
-                        <span aria-label={label}>
+                        {isEmpty && <LockedSVGIcon />}
+                        {`${itemIndex}.`}
+                        <span className='structured-nav__item-label' aria-label={label}>
                           {label} {duration.length > 0 ? ` (${duration})` : ''}
                         </span>
                       </a>

diff --git a/src/components/StructuredNavigation/StructuredNavigation.scss b/src/components/StructuredNavigation/StructuredNavigation.scss
@@ -112,6 +112,10 @@
   ul.ramp--structured-nav__list>li:last-child {
     padding: 0
   }
+  // Change display to align locked-icon with label in playlists
+  a {
+    display: inline-block;
+  }
 }
 
 // Border box
@@ -181,6 +185,10 @@ ul.ramp--structured-nav__list {
     // Set line-height to create clickable space around link
     .ramp--structured-nav__item-link {
       line-height: 1.65em;
+
+      .structured-nav__item-label {
+        margin-left: 0.2em;
+      }
     }
 
     ul {
@@ -289,10 +297,11 @@ ul.ramp--structured-nav__list {
 
   .ramp--structured-nav__section-title {
     display: flex;
-    gap: 0.1em;
+    gap: 0.2em;
 
     span.ramp--structured-nav__section-label {
       overflow-wrap: anywhere;
+      margin-left: 0.2em;
     }
 
     span.ramp--structured-nav__section-duration {
@@ -304,7 +313,7 @@ ul.ramp--structured-nav__list {
       line-height: 1.6;
       padding: 0 0.5rem;
       margin-left: 0.5rem;
-      height: fit-content;
+      text-wrap: nowrap;
     }
   }
 }
diff --git a/src/components/StructuredNavigation/StructuredNavigation.test.js b/src/components/StructuredNavigation/StructuredNavigation.test.js
@@ -122,7 +122,7 @@ describe('StructuredNavigation component', () => {
         const firstItem = screen.getAllByTestId('list-item')[0];
         expect(firstItem).toHaveAttribute('data-label', 'Track 1. I. Kraftig');
         expect(firstItem).toHaveTextContent(
-          '1. Track 1. I. Kraftig (06:14)'
+          '1.Track 1. I. Kraftig (06:14)'
         );
         expect(firstItem).toHaveClass(
           'ramp--structured-nav__list-item'