docs: improve the image example for course card slot

openedx · Sep 27, 2024 · c9aadd5 · c9aadd5
1 parent 22b7f9d
commit c9aadd5
Show file tree

Hide file tree

Showing 2 changed files with 25 additions and 5 deletions.
diff --git a/src/plugin-slots/CourseCardActionSlot/README.md b/src/plugin-slots/CourseCardActionSlot/README.md
@@ -16,29 +16,49 @@ The following `env.config.jsx` will render the `cardId` of the course as `<p>` e
 
 ```js
 import { DIRECT_PLUGIN, PLUGIN_OPERATIONS } from '@openedx/frontend-plugin-framework';
+import ActionButton from 'containers/CourseCard/components/CourseCardActions/ActionButton';
 
 const config = {
   pluginSlots: {
     course_card_action_slot: {
       keepDefault: false,
       plugins: [
         {
-          // Insert custom content after course card buttons
+          // Insert Custom Button in Course Card
           op: PLUGIN_OPERATIONS.Insert,
           widget: {
             id: 'custom_course_card_action',
+            priority: 60,
             type: DIRECT_PLUGIN,
             RenderWidget: ({cardId}) => (
-              <div>
-                <p>📚: {cardId}</p>
-              </div>
+              <ActionButton
+                variant="outline-primary"
+              >
+                Custom Button
+              </ ActionButton>
             ),
           },
         },
+          {
+            // Insert Another Button in Course Card
+            op: PLUGIN_OPERATIONS.Insert,
+            widget: {
+              id: 'another_custom_course_card_action',
+              priority: 70,
+              type: DIRECT_PLUGIN,
+              RenderWidget: ({cardId}) => (
+                <ActionButton
+                  variant="outline-primary"
+                >
+                  📚: {cardId}
+                </ ActionButton>
+              ),
+            },
+        },
       ]
     }
   },
 }
 
 export default config;
-```
+```
diff --git a/src/plugin-slots/CourseCardActionSlot/images/post_course_card_action.png b/src/plugin-slots/CourseCardActionSlot/images/post_course_card_action.png