refactor: break up xblock status component

openedx · Jan 26, 2024 · 9269a61 · 9269a61
1 parent fce6d3a
commit 9269a61
Show file tree

Hide file tree

Showing 6 changed files with 329 additions and 188 deletions.
diff --git a/src/course-outline/section-card/SectionCard.jsx b/src/course-outline/section-card/SectionCard.jsx
@@ -179,16 +179,18 @@ const SectionCard = ({
             <XBlockStatus
               isSelfPaced={isSelfPaced}
               isCustomRelativeDatesActive={isCustomRelativeDatesActive}
-              item={section}
+              blockData={section}
             />
             <div className="outline-section__status">
               <Button
-                className="section-card__highlights"
+                className="p-0 bg-transparent"
                 data-destid="section-card-highlights-button"
                 variant="tertiary"
                 onClick={handleOpenHighlightsModal}
               >
-                <Badge className="highlights-badge">{highlights.length}</Badge>
+                <Badge className="mr-1 d-flex justify-content-center align-items-center highlights-badge">
+                  {highlights.length}
+                </Badge>
                 <p className="m-0 text-black">{messages.sectionHighlightsBadge.defaultMessage}</p>
               </Button>
             </div>

diff --git a/src/course-outline/section-card/SectionCard.scss b/src/course-outline/section-card/SectionCard.scss
@@ -13,28 +13,12 @@
     color: $headings-color;
   }
 
-  .section-card__highlights {
-    display: flex;
-    align-items: center;
-    gap: .5rem;
-    padding: 0;
-    background: transparent;
-    font-size: 1rem;
-
-    &::before {
-      display: none;
-    }
 
-    .highlights-badge {
-      display: flex;
-      justify-content: center;
-      align-items: center;
-      width: 1.5rem;
-      height: 1.5rem;
-      border-radius: 1.375rem;
-      font-size: 1rem;
-      font-weight: 700;
-    }
+  .highlights-badge {
+    width: 1.5rem;
+    height: 1.5rem;
+    border-radius: 1.375rem;
+    font-size: 1rem;
   }
 
   .section-card__content {

diff --git a/src/course-outline/subsection-card/SubsectionCard.jsx b/src/course-outline/subsection-card/SubsectionCard.jsx
@@ -164,7 +164,7 @@ const SubsectionCard = ({
               <XBlockStatus
                 isSelfPaced={isSelfPaced}
                 isCustomRelativeDatesActive={isCustomRelativeDatesActive}
-                item={subsection}
+                blockData={subsection}
               />
             </div>
           </>

diff --git a/src/course-outline/unit-card/UnitCard.jsx b/src/course-outline/unit-card/UnitCard.jsx
@@ -153,7 +153,7 @@ const UnitCard = ({
           <XBlockStatus
             isSelfPaced={isSelfPaced}
             isCustomRelativeDatesActive={isCustomRelativeDatesActive}
-            item={unit}
+            blockData={unit}
           />
         </div>
       </div>