feat: update UnitTitleSlot to wrap unit title

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;