feat: update UnitTitleSlot to wrap unit title

src/courseware/course/sequence/Unit/__snapshots__/index.test.jsx.snap

@@ -23,16 +23,17 @@ exports[`Unit component output snapshot: not bookmarked, do not show content 1`]
   <div
     className="mb-0"
   >
-    <h3
-      className="h3"
-    >
-      unit-title
-    </h3>
     <UnitTitleSlot
       courseId="test-course-id"
       unitId="test-props-id"
       unitTitle="unit-title"
-    />
+    >
+      <h3
+        className="h3"
+      >
+        unit-title
+      </h3>
+    </UnitTitleSlot>
   </div>
   <h2
     className="sr-only"

src/courseware/course/sequence/Unit/index.jsx

@@ -42,8 +42,9 @@ const Unit = ({
   return (
     <div className="unit">
       <div className="mb-0">
-        <h3 className="h3">{unit.title}</h3>
-        <UnitTitleSlot courseId={courseId} unitId={id} unitTitle={unit.title} />
+        <UnitTitleSlot courseId={courseId} unitId={id} unitTitle={unit.title}>
+          <h3 className="h3">{unit.title}</h3>
+        </UnitTitleSlot>
       </div>
       <h2 className="sr-only">{formatMessage(messages.headerPlaceholder)}</h2>
       <BookmarkButton

src/plugin-slots/UnitTitleSlot/README.md

@@ -8,7 +8,7 @@
 
 ## Description
 
-This slot is used for adding content after the Unit title.
+This slot is used for adding content around the Unit title.
 
 ## Example
 
@@ -22,6 +22,7 @@ import { DIRECT_PLUGIN, PLUGIN_OPERATIONS } from '@openedx/frontend-plugin-frame
 const config = {
   pluginSlots: {
     unit_title_slot: {
+      keepDefault: true,
       plugins: [
         {
           // Insert custom content after unit title
@@ -33,7 +34,7 @@ const config = {
               <>
                 <p>📚: {courseId}</p>
                 <p>📙: {unitId}</p>
-                <p>📙: {unitTitle}</p>
+                <p>🎩: {unitTitle}</p>
               </>
             ),
           },

src/plugin-slots/UnitTitleSlot/index.jsx

@@ -1,21 +1,26 @@
 import PropTypes from 'prop-types';
 import { PluginSlot } from '@openedx/frontend-plugin-framework';
 
-const UnitTitleSlot = ({ courseId, unitId, unitTitle }) => (
+const UnitTitleSlot = ({
+  courseId, unitId, unitTitle, children,
+}) => (
   <PluginSlot
     id="unit_title_slot"
     pluginProps={{
       courseId,
       unitId,
       unitTitle,
     }}
-  />
+  >
+    {children}
+  </PluginSlot>
 );
 
 UnitTitleSlot.propTypes = {
   courseId: PropTypes.string.isRequired,
   unitId: PropTypes.string.isRequired,
   unitTitle: PropTypes.string.isRequired,
+  children: PropTypes.element.isRequired,
 };
 
 export default UnitTitleSlot;