fix: fixing code formatting

Pearson-Advance · Dec 4, 2023 · 62afb47 · 62afb47
1 parent d5a2ee6
commit 62afb47
Show file tree

Hide file tree

Showing 7 changed files with 24 additions and 26 deletions.
diff --git a/src/features/outline/CourseOutline.jsx b/src/features/outline/CourseOutline.jsx
@@ -47,16 +47,16 @@ function CourseOutline() {
   }
 
   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}

diff --git a/src/features/outline/CourseOutline.test.jsx b/src/features/outline/CourseOutline.test.jsx
@@ -57,13 +57,13 @@ 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);
     });

diff --git a/src/features/outline/Section.jsx b/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}

diff --git a/src/features/outline/Section.test.jsx b/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');
   });

diff --git a/src/features/outline/SequenceLink.jsx b/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}

diff --git a/src/features/outline/SequenceLink.test.jsx b/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');
   });
 });
diff --git a/src/index.scss b/src/index.scss
@@ -9,24 +9,17 @@
   flex-direction: column;
   min-height: 100vh;
 
-  main {
-    flex-grow: 1;
-  }
-
-  aside,
-  nav {
+  aside.sidebar-outline-wrapper nav.sidebar-outline {
     box-sizing: border-box;
-  }
 
-  aside nav {
-    ol {
-      li.section-wrapper {
+    ol.sidebar-section-wrapper {
+      li.sidebar-section {
         .collapsible-card-lg .collapsible-trigger > div {
           flex-flow: row;
         }
 
-        ol.subsection-list {
-          li button.btn-link {
+        ol.sidebar-sequence-wrapper {
+          li.sidebar-sequence button.btn-link {
             text-align: left;
           }
         }