docs: (backport) adding comprehensive readme documentation for plugin slots (#2340)

src/plugin-slots/AdditionalCourseContentPluginSlot/README.md

@@ -3,4 +3,4 @@
 ### Slot ID: `org.openedx.frontend.authoring.additional_course_content_plugin.v1`
 
 ### Slot ID Aliases
-* `additional_course_content_plugin`
+* `additional_course_content_plugin`

src/plugin-slots/AdditionalCoursePluginSlot/README.md

@@ -1,6 +1,64 @@
-# AdditionalCoursePluginSlot
+# Additional Course Plugin Slot
 
 ### Slot ID: `org.openedx.frontend.authoring.additional_course_plugin.v1`
 
 ### Slot ID Aliases
 * `additional_course_plugin`
+
+## Description
+
+This slot is used to add a custom card on the the page & resources page.
+
+## Example
+
+The following `env.config.jsx` will add a custom card at the end of the page & resources section.
+
+![Screenshot of the unit sidebar surrounded by border](./images/additional-course-plugin-slot-example.png)
+
+```jsx
+import { DIRECT_PLUGIN, PLUGIN_OPERATIONS } from '@openedx/frontend-plugin-framework';
+import { Badge, Card } from '@openedx/paragon';
+import { Settings } from '@openedx/paragon/icons';
+
+const config = {
+  pluginSlots: {
+    'org.openedx.frontend.authoring.additional_course_plugin.v1': {
+      plugins: [
+        {
+          op: PLUGIN_OPERATIONS.Hide,
+          widgetId: 'default_contents',
+        },
+        {
+          op: PLUGIN_OPERATIONS.Insert,
+          widget: {
+            id: 'custom_additional_course',
+            type: DIRECT_PLUGIN,
+            RenderWidget: () => (
+                <Card className={'shadow justify-content-between'} >
+                    <Card.Header
+                        title={'Additional Course'}
+                        subtitle={(
+                        <Badge variant="success" className="mt-1">
+                          slot props course
+                        </Badge>
+                        )}
+                        actions={<Settings />}
+                        size="sm"
+                    />
+                    <Card.Body>
+                        <Card.Section>
+                          Additional course from slot props description. 
+                          Or anything else.
+                        </Card.Section>
+                    </Card.Body>
+                </Card>
+            ),
+          },
+        },
+      ]
+    }
+  },
+}
+
+export default config;
+```

src/plugin-slots/AdditionalTranslationsComponentSlot/README.md

@@ -13,3 +13,54 @@
 * `additionalProps` - Object
   * `transcriptType` - String
   * `isAiTranslationsEnabled` - Boolean
+
+ 
+## Description
+
+This slot is used to add a custom block in the **Video Transcription Settings** drawer.
+
+## Example
+
+The following `env.config.jsx` will add a custom transcript option in the Transcript Settings drawer.
+
+![Screenshot of the unit sidebar surrounded by border](./images/additional-translation-example.png)
+
+```jsx
+import { DIRECT_PLUGIN, PLUGIN_OPERATIONS } from '@openedx/frontend-plugin-framework';
+import { Collapsible, Icon } from '@openedx/paragon';
+import { ChevronRight } from '@openedx/paragon/icons';
+
+const TranslationsBlock = ({ setIsAiTranslations, courseId }) => (
+  <div key="transcript-type-selection" className="mt-3">
+    <Collapsible.Advanced
+      onOpen={() => setIsAiTranslations(courseId === 'anyId')}
+    >
+      <Collapsible.Trigger
+        className="row m-0 justify-content-between align-items-center"
+      >
+        Custom transcript 💬
+        <Icon src={ChevronRight} />
+      </Collapsible.Trigger>
+    </Collapsible.Advanced>
+  </div>
+);
+
+const config = {
+  pluginSlots: {
+    'org.openedx.frontend.authoring.video_transcript_additional_translations_component.v1': {
+      plugins: [
+        {
+          op: PLUGIN_OPERATIONS.Insert,
+          widget: {
+            id: 'custom_additional_translation_id',
+            type: DIRECT_PLUGIN,
+            RenderWidget: TranslationsBlock,
+          },
+        },
+      ],
+    },
+  },
+}
+
+export default config;
+```