Add release notes for Sumac Header frontend plugin slots

source/community/release_notes/sumac/customizing_header.rst

@@ -1,8 +1,162 @@
-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: 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
+
+For site operators, here is a sample of the ``env.config.jsx`` file used to hide
+the the content:
+
+.. toggle::
+
+    .. code-block:: javascript
+
+        import { PLUGIN_OPERATIONS } from '@openedx/frontend-plugin-framework';
+
+        const config = {
+          pluginSlots: {
+            learning_help_slot: {
+              plugins: [
+                {
+                  op: PLUGIN_OPERATIONS.Hide,
+                },
+              ]
+            },
+          },
+        }
+
+        export default config;
+
+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
+
+For site operators, here is a sample of the ``env.config.jsx`` file used to
+render the custom component:
+
+.. toggle::
+
+    .. code-block:: javascript
+
+        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;
+
+Advanced example: Replacing the entire header
+*********************************************
+
+TBD