feat: expose containerProps in StudioHeader [FC-0062] (#529)

package-lock.json

@@ -17,6 +17,7 @@
         "@openedx/frontend-plugin-framework": "^1.3.0",
         "axios-mock-adapter": "1.22.0",
         "babel-polyfill": "6.26.0",
+        "classnames": "^2.5.1",
         "jest-environment-jsdom": "^29.7.0",
         "react-responsive": "8.2.0",
         "react-transition-group": "4.4.5"

package.json

@@ -63,6 +63,7 @@
     "@openedx/frontend-plugin-framework": "^1.3.0",
     "axios-mock-adapter": "1.22.0",
     "babel-polyfill": "6.26.0",
+    "classnames": "^2.5.1",
     "jest-environment-jsdom": "^29.7.0",
     "react-responsive": "8.2.0",
     "react-transition-group": "4.4.5"

src/studio-header/HeaderBody.jsx

@@ -1,6 +1,7 @@
 import React from 'react';
 import PropTypes from 'prop-types';
 import { useIntl } from '@edx/frontend-platform/i18n';
+import classNames from 'classnames';
 import {
   ActionRow,
   Button,
@@ -37,6 +38,7 @@ const HeaderBody = ({
   mainMenuDropdowns,
   outlineLink,
   searchButtonAction,
+  containerProps,
 }) => {
   const intl = useIntl();
 
@@ -50,8 +52,14 @@ const HeaderBody = ({
     />
   );
 
+  const { className: containerClassName, ...restContainerProps } = containerProps || {};
+
   return (
-    <Container size="xl" className="px-2.5">
+    <Container
+      size="xl"
+      className={classNames('px-2.5', containerClassName)}
+      {...restContainerProps}
+    >
       <ActionRow as="header">
         {isHiddenMainMenu ? (
           <Row className="flex-nowrap ml-4">
@@ -110,6 +118,7 @@ const HeaderBody = ({
               iconAs={Icon}
               onClick={searchButtonAction}
               aria-label={intl.formatMessage(messages['header.label.search.nav'])}
+              alt={intl.formatMessage(messages['header.label.search.nav'])}
             />
           </Nav>
         )}
@@ -147,14 +156,15 @@ HeaderBody.propTypes = {
   isHiddenMainMenu: PropTypes.bool,
   mainMenuDropdowns: PropTypes.arrayOf(PropTypes.shape({
     id: PropTypes.string,
-    buttonTitle: PropTypes.string,
+    buttonTitle: PropTypes.node,
     items: PropTypes.arrayOf(PropTypes.shape({
       href: PropTypes.string,
-      title: PropTypes.string,
+      title: PropTypes.node,
     })),
   })),
   outlineLink: PropTypes.string,
   searchButtonAction: PropTypes.func,
+  containerProps: PropTypes.shape(Container.propTypes),
 };
 
 HeaderBody.defaultProps = {
@@ -174,6 +184,7 @@ HeaderBody.defaultProps = {
   mainMenuDropdowns: [],
   outlineLink: null,
   searchButtonAction: null,
+  containerProps: {},
 };
 
 export default HeaderBody;

src/studio-header/MobileHeader.jsx

@@ -48,10 +48,10 @@ MobileHeader.propTypes = {
   isAdmin: PropTypes.bool,
   mainMenuDropdowns: PropTypes.arrayOf(PropTypes.shape({
     id: PropTypes.string,
-    buttonTitle: PropTypes.string,
+    buttonTitle: PropTypes.node,
     items: PropTypes.arrayOf(PropTypes.shape({
       href: PropTypes.string,
-      title: PropTypes.string,
+      title: PropTypes.node,
     })),
   })),
   outlineLink: PropTypes.string,

src/studio-header/MobileMenu.jsx

@@ -37,10 +37,10 @@ const MobileMenu = ({
 MobileMenu.propTypes = {
   mainMenuDropdowns: PropTypes.arrayOf(PropTypes.shape({
     id: PropTypes.string,
-    buttonTitle: PropTypes.string,
+    buttonTitle: PropTypes.node,
     items: PropTypes.arrayOf(PropTypes.shape({
       href: PropTypes.string,
-      title: PropTypes.string,
+      title: PropTypes.node,
     })),
   })),
 };

src/studio-header/NavDropdownMenu.jsx

@@ -30,10 +30,10 @@ const NavDropdownMenu = ({
 
 NavDropdownMenu.propTypes = {
   id: PropTypes.string.isRequired,
-  buttonTitle: PropTypes.string.isRequired,
+  buttonTitle: PropTypes.node.isRequired,
   items: PropTypes.arrayOf(PropTypes.shape({
     href: PropTypes.string,
-    title: PropTypes.string,
+    title: PropTypes.node,
   })).isRequired,
 };
 

src/studio-header/StudioHeader.jsx

@@ -16,7 +16,7 @@ ensureConfig([
 ], 'Studio Header component');
 
 const StudioHeader = ({
-  number, org, title, isHiddenMainMenu, mainMenuDropdowns, outlineLink, searchButtonAction,
+  number, org, title, containerProps, isHiddenMainMenu, mainMenuDropdowns, outlineLink, searchButtonAction,
 }) => {
   const { authenticatedUser, config } = useContext(AppContext);
   const props = {
@@ -25,6 +25,7 @@ const StudioHeader = ({
     number,
     org,
     title,
+    containerProps,
     username: authenticatedUser?.username,
     isAdmin: authenticatedUser?.administrator,
     authenticatedUserAvatar: authenticatedUser?.avatar,
@@ -53,13 +54,14 @@ StudioHeader.propTypes = {
   number: PropTypes.string,
   org: PropTypes.string,
   title: PropTypes.string.isRequired,
+  containerProps: HeaderBody.propTypes.containerProps,
   isHiddenMainMenu: PropTypes.bool,
   mainMenuDropdowns: PropTypes.arrayOf(PropTypes.shape({
     id: PropTypes.string,
-    buttonTitle: PropTypes.string,
+    buttonTitle: PropTypes.node,
     items: PropTypes.arrayOf(PropTypes.shape({
       href: PropTypes.string,
-      title: PropTypes.string,
+      title: PropTypes.node,
     })),
   })),
   outlineLink: PropTypes.string,
@@ -69,6 +71,7 @@ StudioHeader.propTypes = {
 StudioHeader.defaultProps = {
   number: '',
   org: '',
+  containerProps: {},
   isHiddenMainMenu: false,
   mainMenuDropdowns: [],
   outlineLink: null,