Add release notes for Sumac Header frontend plugin slots

source/community/release_notes/sumac/customizing_header.rst

@@ -1,8 +1,73 @@
-Customizing Site Header and Learner Dashboard
-#############################################
+Customizing Site Header Using Frontend "Slots"
+##############################################
 
-Coming soon in Sumac: leverage *frontend plugin slots* to quickly and easily
-modify visual elements on the site header and on the Learner Dashboard. Be sure
-to watch this page for more detail!
+Utilizing *frontend plugin slots*, site operators now have the ability to
+customize various portions of the site header.
 
-The Open edX Sumac release comes out in December 2024.
+A “frontend plugin slot” refers to an area of a web page - comprising one or
+more visual elements - that can be “swapped out” with other visual elements. For
+example, one new plugin slot allows you to remove the "Help" button in the header.
+
+Overhead and hassle is minimized using the plugin slot system. Site operators
+can leverage a plugin slot using a configuration file; the codebase does not
+need to be copied (“forked”) nor are extensive changes needed. A snippet of code
+is all that is needed to use a plugin slot. A site operator places that code
+within a configuration file. Site operators should refer to the src/plugin-slots
+directory within each MFE's codebase to view documentation for that MFE's plugin
+slot(s).
+
+In these release notes, we'll cover three example use cases for the header. Full
+documentation is available `within the frontend-component-header codebase
+<https://github.com/openedx/frontend-component-header/tree/master/src/plugin-slots>`_.
+
+.. contents::
+  :local:
+  :depth: 1
+
+.. simple-example-start
+
+Simple example: Removing help button
+************************************
+
+In the default learner dashboard header, the content contains a "Help" button
+to the left of the logged in user's username:
+
+   .. image:: /_images/release_notes/sumac/sumac-header-easy-before.png
+
+With frontend plugin slots, you can now hide the "Help" button:
+
+   .. image:: /_images/release_notes/sumac/sumac-header-easy-after.png
+
+.. simple-example-end
+
+For site operators, see :ref:`simple_header_plugin_code` for this example.
+
+.. medium-example-start
+
+Medium-effort example: Replacing "Course Info" with a custom component
+**********************************************************************
+
+In the default learner dashboard header, the content contains information about
+the current course's organization and title in the top left corner:
+
+   .. image:: /_images/release_notes/sumac/sumac-header-medium-before.png
+
+With frontend plugin slots, you can now create your own custom component (in
+this case, an icon of a book) in place of the course info component:
+
+   .. image:: /_images/release_notes/sumac/sumac-header-medium-after.png
+
+.. medium-example-end
+
+For site operators, see :ref:`medium_header_plugin_code` for this example.
+
+.. advanced-example-start
+
+Advanced example: Replacing the entire header
+*********************************************
+
+TBD
+
+.. advanced-example-end
+
+For site operators, see :ref:`advanced_header_plugin_code` for this example.

source/community/release_notes/sumac/feature_release_notes.rst

@@ -13,3 +13,8 @@ Open edX Sumac Release - Product Release Notes
 Information for site operators and developers, including information on how to
 enable and/or configure new features that require additional work, can be found
 in the :doc:`dev_op_release_notes`.
+
+.. toctree::
+   :hidden:
+
+   header_plugin_example_code

source/community/release_notes/sumac/header_plugin_example_code.rst

@@ -0,0 +1,120 @@
+.. include:: customizing_header.rst
+    :start-after: simple-example-start
+    :end-before: simple-example-end
+
+.. _simple_header_plugin_code:
+
+Sample ``env.config.jsx`` code.
+
+.. code-block:: jsx
+
+    import { PLUGIN_OPERATIONS } from '@openedx/frontend-plugin-framework';
+
+    const config = {
+        pluginSlots: {
+        learning_help_slot: {
+            plugins: [
+            {
+                op: PLUGIN_OPERATIONS.Hide,
+            },
+            ]
+        },
+        },
+    }
+
+    export default config;
+
+.. include:: customizing_header.rst
+    :start-after: medium-example-start
+    :end-before: medium-example-end
+
+.. _medium_header_plugin_code:
+
+Sample ``env.config.jsx`` code.
+
+.. code-block:: jsx
+
+    import { DIRECT_PLUGIN, PLUGIN_OPERATIONS } from '@openedx/frontend-plugin-framework';
+    import {Helmet} from "react-helmet";
+
+    const config = {
+    pluginSlots: {
+        course_info_slot: {
+        keepDefault: false,
+        plugins: [
+            {
+            op: PLUGIN_OPERATIONS.Insert,
+            widget: {
+                id: 'custom_course_info_component',
+                type: DIRECT_PLUGIN,
+                RenderWidget: ({ courseTitle }) => (
+                <>
+                    <Helmet>
+                    <style>
+                    {/*
+                        styles adapted from https://codepen.io/mina-mounir/pen/gOPppdv
+                        by Mina Mounir https://codepen.io/mina-mounir under MIT as per
+                        CodePen public pen licensing https://blog.codepen.io/documentation/licensing/
+                    */}
+                    {`
+                        .book {
+                        margin-left: 20px;
+                        width: 80px;
+                        height: 120px;
+                        padding: 6px;
+                        background: #f3efe1;
+                        border-left: 6px solid #929292;
+                        transform: rotate(-45deg) skewX(10deg) scale(.8);
+                        box-shadow: -10px 10px 10px rgba(0, 0, 0, 0.5);
+                        }
+                        .bookHeader {
+                        margin: 0 0 4px 0;
+                        padding: 0;
+                        text-align: center;
+                        font-size: 18px !important;
+                        color: #716f6f;
+                        }
+                        .book:before {
+                        content: "";
+                        width: 6px;
+                        height: 100%;
+                        background: #848484;
+                        position: absolute;
+                        top: 0;
+                        left: 0;
+                        transform: skewY(-45deg) translate(-11.4px, -8.6px);
+                        }
+                        .book:after {
+                        content: "";
+                        width: 106%;
+                        height: 6px;
+                        background: #CCC;
+                        position: absolute;
+                        bottom: 0;
+                        left: 0;
+                        transform: skewX(-45deg) translate(-2.2px, 6px)
+                        }
+                    `}
+                    </style>
+                    </Helmet>
+                    <div class="book">
+                    <div class="bookHeader">{courseTitle}</div>
+                    </div>
+                </>
+                ),
+            },
+            },
+        ]
+        }
+    },
+    }
+
+    export default config;
+    
+.. include:: customizing_header.rst
+    :start-after: advanced-example-start
+    :end-before: advanced-example-end
+
+.. _advanced_header_plugin_code:
+
+Sample ``env.config.jsx`` code.