PADV 888 - Sidebar styling fixes

src/features/outline/CourseOutline.jsx

@@ -1,7 +1,7 @@
 import React, { useState, useEffect } from 'react';
 import { useSelector, useDispatch } from 'react-redux';
 import { useParams } from 'react-router';
-import { Button } from '@edx/paragon';
+import { Button, Spinner } from '@edx/paragon';
 
 import { fetchCourseOutline } from 'features/outline/data';
 import messages from 'features/outline/messages';
@@ -34,27 +34,29 @@ function CourseOutline() {
 
   if (courseStatus === LOADING) {
     return (
-      <h3>{messages.loading.defaultMessage}</h3>
+      <div className="w-100 d-flex justify-content-center h-100 mt-3" data-testid="spinner-wrapper">
+        <Spinner animation="border" variant="primary" screenReaderText={messages.loading.defaultMessage} />
+      </div>
     );
   }
 
   if (courseStatus === FAILED) {
     return (
-      <h3>{messages.failed.defaultMessage}</h3>
+      <p className="text-danger m-3 text-center">{messages.failed.defaultMessage}</p>
     );
   }
 
   return (
-    <aside className="sidebar">
-      <nav className="p-3" aria-label="Sidebar Navigation">
+    <aside className="sidebar-outline-wrapper">
+      <nav className="sidebar-outline p-3" aria-label="Sidebar Navigation">
         <Button
           id="expandButton"
           variant="outline-primary w-100 mb-3"
           onClick={() => { setExpandAll(!expandAll); }}
         >
           {expandAll ? messages.collapseAll.defaultMessage : messages.expandAll.defaultMessage}
         </Button>
-        <ol id="sidebar-outline" className="list-unstyled">
+        <ol className="sidebar-section-wrapper list-unstyled">
           {course.sectionIds.map((sectionId) => (
             <Section
               key={sectionId}

src/features/outline/CourseOutline.test.jsx

@@ -57,22 +57,22 @@ describe('CourseOutline', () => {
     });
 
     test('content is rendered correctly when courseStatus is loaded', async () => {
-      const asideSidebar = document.querySelector('aside.sidebar');
+      const asideSidebar = document.querySelector('.sidebar-section-wrapper');
 
       expect(document.body).toContainElement(asideSidebar);
     });
 
     test('section map the correct number of sections', async () => {
-      const sectionList = document.querySelectorAll('li.section-wrapper');
+      const sectionList = document.querySelectorAll('li.sidebar-section');
 
       expect(sectionList).toHaveLength(1);
     });
   });
 
   test('when courseStatus is loading', () => {
-    render(component);
+    const { getByTestId } = render(component);
 
-    expect(document.body).toHaveTextContent(messages.loading.defaultMessage);
+    expect(document.body).toContainElement(getByTestId('spinner-wrapper'));
   });
 
   test('when courseStatus is failed', async () => {

src/features/outline/Section.jsx

@@ -68,7 +68,7 @@ function Section({
   );
 
   return (
-    <li className="section-wrapper">
+    <li className="sidebar-section">
       <Collapsible
         className="mb-2"
         styling="card-lg"
@@ -92,7 +92,7 @@ function Section({
           />
         )}
       >
-        <ol className="list-unstyled subsection-list">
+        <ol className="list-unstyled sidebar-sequence-wrapper">
           {sequenceIds.map((sequenceId, index) => (
             <SequenceLink
               key={sequenceId}

src/features/outline/Section.test.jsx

@@ -94,7 +94,7 @@ describe('Section', () => {
       defaultOpen: true,
     });
 
-    const subsectionList = document.querySelector('.section-wrapper div:first-child');
+    const subsectionList = document.querySelector('.sidebar-section div:first-child');
 
     expect(subsectionList).toHaveAttribute('open');
   });
@@ -106,7 +106,7 @@ describe('Section', () => {
       defaultOpen: false,
     });
 
-    const subsectionList = document.querySelector('.section-wrapper div:first-child');
+    const subsectionList = document.querySelector('.sidebar-section div:first-child');
 
     expect(subsectionList).not.toHaveAttribute('open');
   });

src/features/outline/SequenceLink.jsx

@@ -18,7 +18,12 @@ function SequenceLink({
   } = sequence;
 
   return (
-    <li className={`w-100 m-0 pl-3 d-flex align-items-center ${!first && 'mt-2 pt-2 border-top border-light'}`}>
+    <li
+      className={
+        `sidebar-sequence w-100 m-0 pl-3 d-flex align-items-center
+        ${!first && ' mt-2 pt-2 border-top border-light'}`
+      }
+    >
       {complete ? (
         <FontAwesomeIcon
           icon={fasCheckCircle}

src/features/outline/SequenceLink.test.jsx

@@ -74,9 +74,9 @@ describe('Section', () => {
       sequence,
     });
 
-    const sequenceWrapper = document.querySelector('li.w-100.m-0.pl-3.d-flex.align-items-center');
+    const sidebarSequence = document.querySelector('.sidebar-sequence');
 
-    expect(sequenceWrapper).not.toHaveClass('mt-2 pt-2 border-top border-light');
+    expect(sidebarSequence).not.toHaveClass('mt-2 pt-2 border-top border-light');
   });
 
   test('sequence is styled correctly when is not first', () => {
@@ -90,8 +90,8 @@ describe('Section', () => {
       first: false,
     });
 
-    const sequenceWrapper = document.querySelector('li.w-100.m-0.pl-3.d-flex.align-items-center');
+    const sidebarSequence = document.querySelector('.sidebar-sequence');
 
-    expect(sequenceWrapper).toHaveClass('mt-2 pt-2 border-top border-light');
+    expect(sidebarSequence).toHaveClass('mt-2 pt-2 border-top border-light');
   });
 });

src/index.scss

@@ -9,12 +9,21 @@
   flex-direction: column;
   min-height: 100vh;
 
-  main {
-    flex-grow: 1;
-  }
-
-  aside,
-  nav {
+  aside.sidebar-outline-wrapper nav.sidebar-outline {
     box-sizing: border-box;
+
+    ol.sidebar-section-wrapper {
+      li.sidebar-section {
+        .collapsible-card-lg .collapsible-trigger > div {
+          flex-flow: row;
+        }
+
+        ol.sidebar-sequence-wrapper {
+          li.sidebar-sequence button.btn-link {
+            text-align: left;
+          }
+        }
+      }
+    }
   }
 }