From 484aa8ee76d5306c8e87d06c85eb8917c85ebec4 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?R=C3=B4mulo=20Penido?= <romulo.penido@gmail.com>
Date: Thu, 5 Sep 2024 14:30:40 -0300
Subject: [PATCH] feat: allow full width header

---
 package-lock.json                  | 2 +-
 package.json                       | 2 +-
 src/studio-header/HeaderBody.jsx   | 5 ++++-
 src/studio-header/StudioHeader.jsx | 5 ++++-
 4 files changed, 10 insertions(+), 4 deletions(-)

diff --git a/package-lock.json b/package-lock.json
index 6ebbd9fe6..ae419a4fa 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -44,7 +44,7 @@
       },
       "peerDependencies": {
         "@edx/frontend-platform": "^7.0.0 || ^8.0.0",
-        "@openedx/paragon": ">= 21.5.7 < 23.0.0",
+        "@openedx/paragon": "git+ssh://github.com/open-craft/paragon#rpenido/dist/fal-3820-add-full-width-container-option",
         "prop-types": "^15.5.10",
         "react": "^16.9.0 || ^17.0.0",
         "react-dom": "^16.9.0 || ^17.0.0"
diff --git a/package.json b/package.json
index 9097dcfd8..78adb127e 100644
--- a/package.json
+++ b/package.json
@@ -68,7 +68,7 @@
   },
   "peerDependencies": {
     "@edx/frontend-platform": "^7.0.0 || ^8.0.0",
-    "@openedx/paragon": ">= 21.5.7 < 23.0.0",
+    "@openedx/paragon": "git+ssh://github.com/open-craft/paragon#rpenido/dist/fal-3820-add-full-width-container-option",
     "prop-types": "^15.5.10",
     "react": "^16.9.0 || ^17.0.0",
     "react-dom": "^16.9.0 || ^17.0.0"
diff --git a/src/studio-header/HeaderBody.jsx b/src/studio-header/HeaderBody.jsx
index 7a4426d4b..365f85a4d 100644
--- a/src/studio-header/HeaderBody.jsx
+++ b/src/studio-header/HeaderBody.jsx
@@ -37,6 +37,7 @@ const HeaderBody = ({
   mainMenuDropdowns,
   outlineLink,
   searchButtonAction,
+  full,
 }) => {
   const intl = useIntl();
 
@@ -51,7 +52,7 @@ const HeaderBody = ({
   );
 
   return (
-    <Container size="xl" className="px-2.5">
+    <Container size={full ? undefined : 'xl'} className="px-2.5">
       <ActionRow as="header">
         {isHiddenMainMenu ? (
           <Row className="flex-nowrap ml-4">
@@ -155,6 +156,7 @@ HeaderBody.propTypes = {
   })),
   outlineLink: PropTypes.string,
   searchButtonAction: PropTypes.func,
+  full: PropTypes.bool,
 };
 
 HeaderBody.defaultProps = {
@@ -174,6 +176,7 @@ HeaderBody.defaultProps = {
   mainMenuDropdowns: [],
   outlineLink: null,
   searchButtonAction: null,
+  full: false,
 };
 
 export default HeaderBody;
diff --git a/src/studio-header/StudioHeader.jsx b/src/studio-header/StudioHeader.jsx
index 886ad8411..9f3a0d120 100644
--- a/src/studio-header/StudioHeader.jsx
+++ b/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, full, isHiddenMainMenu, mainMenuDropdowns, outlineLink, searchButtonAction,
 }) => {
   const { authenticatedUser, config } = useContext(AppContext);
   const props = {
@@ -25,6 +25,7 @@ const StudioHeader = ({
     number,
     org,
     title,
+    full,
     username: authenticatedUser?.username,
     isAdmin: authenticatedUser?.administrator,
     authenticatedUserAvatar: authenticatedUser?.avatar,
@@ -53,6 +54,7 @@ StudioHeader.propTypes = {
   number: PropTypes.string,
   org: PropTypes.string,
   title: PropTypes.string.isRequired,
+  full: PropTypes.bool,
   isHiddenMainMenu: PropTypes.bool,
   mainMenuDropdowns: PropTypes.arrayOf(PropTypes.shape({
     id: PropTypes.string,
@@ -69,6 +71,7 @@ StudioHeader.propTypes = {
 StudioHeader.defaultProps = {
   number: '',
   org: '',
+  full: false,
   isHiddenMainMenu: false,
   mainMenuDropdowns: [],
   outlineLink: null,