From ce107bfc04675b5a492b421930b6d8e6838b5f3f Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?R=C3=B4mulo=20Penido?= Date: Wed, 18 Sep 2024 18:54:02 -0300 Subject: [PATCH] feat: expose containerProps in StudioHeader --- package-lock.json | 22 +++++++--------------- package.json | 5 +++-- src/studio-header/HeaderBody.jsx | 12 +++++++++++- src/studio-header/NavDropdownMenu.jsx | 2 +- src/studio-header/StudioHeader.jsx | 4 +++- 5 files changed, 25 insertions(+), 20 deletions(-) diff --git a/package-lock.json b/package-lock.json index c69c3b834..f32731b5f 100644 --- a/package-lock.json +++ b/package-lock.json @@ -26,7 +26,7 @@ "@edx/frontend-platform": "8.1.1", "@edx/reactifex": "^2.1.1", "@openedx/frontend-build": "14.1.2", - "@openedx/paragon": "22.7.0", + "@openedx/paragon": "22.8.0", "@testing-library/dom": "10.4.0", "@testing-library/jest-dom": "5.17.0", "@testing-library/react": "10.4.9", @@ -44,7 +44,8 @@ }, "peerDependencies": { "@edx/frontend-platform": "^7.0.0 || ^8.0.0", - "@openedx/paragon": ">= 21.5.7 < 23.0.0", + "@openedx/paragon": "^22.8.0", + "classnames": "^2.5.1", "prop-types": "^15.5.10", "react": "^16.9.0 || ^17.0.0", "react-dom": "^16.9.0 || ^17.0.0" @@ -3798,18 +3799,10 @@ } }, "node_modules/@openedx/paragon": { - "version": "22.7.0", - "resolved": "https://registry.npmjs.org/@openedx/paragon/-/paragon-22.7.0.tgz", - "integrity": "sha512-BWj4vYXUmLS0BinJckxbhNp0o1UPfwURinaSgTxxBkF0L2VUtAO+SldVWvKDqlltzoR062yjcBA5QSGq8Jxgeg==", + "version": "22.8.0", + "resolved": "https://registry.npmjs.org/@openedx/paragon/-/paragon-22.8.0.tgz", + "integrity": "sha512-WNPLdOOxXwF8h1zBJfCFdUsz6OuuBiVjT6E0Hg9ftq8+qDjION//QOaRm5v13+5bUgjP5/LLGjnIAdD0rwcO8g==", "dev": true, - "license": "Apache-2.0", - "workspaces": [ - "example", - "component-generator", - "www", - "icons", - "dependent-usage-analyzer" - ], "dependencies": { "@fortawesome/fontawesome-svg-core": "^6.1.1", "@fortawesome/react-fontawesome": "^0.1.18", @@ -6876,8 +6869,7 @@ "node_modules/classnames": { "version": "2.5.1", "resolved": "https://registry.npmjs.org/classnames/-/classnames-2.5.1.tgz", - "integrity": "sha512-saHYOzhIQs6wy2sVxTM6bUDsQO4F50V9RQ22qBpEdCW+I+/Wmke2HOl6lS6dTpdxVhb88/I6+Hs+438c3lfUow==", - "dev": true + "integrity": "sha512-saHYOzhIQs6wy2sVxTM6bUDsQO4F50V9RQ22qBpEdCW+I+/Wmke2HOl6lS6dTpdxVhb88/I6+Hs+438c3lfUow==" }, "node_modules/clean-css": { "version": "5.3.3", diff --git a/package.json b/package.json index 522594a5e..83093cf4f 100644 --- a/package.json +++ b/package.json @@ -38,7 +38,7 @@ "@edx/frontend-platform": "8.1.1", "@edx/reactifex": "^2.1.1", "@openedx/frontend-build": "14.1.2", - "@openedx/paragon": "22.7.0", + "@openedx/paragon": "22.8.0", "@testing-library/dom": "10.4.0", "@testing-library/jest-dom": "5.17.0", "@testing-library/react": "10.4.9", @@ -68,7 +68,8 @@ }, "peerDependencies": { "@edx/frontend-platform": "^7.0.0 || ^8.0.0", - "@openedx/paragon": ">= 21.5.7 < 23.0.0", + "@openedx/paragon": "^22.8.0", + "classnames": "^2.5.1", "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..3f736d38f 100644 --- a/src/studio-header/HeaderBody.jsx +++ b/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 ( - + {isHiddenMainMenu ? ( @@ -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'])} /> )} @@ -155,6 +164,7 @@ HeaderBody.propTypes = { })), outlineLink: PropTypes.string, searchButtonAction: PropTypes.func, + containerProps: Container.propTypes, }; HeaderBody.defaultProps = { diff --git a/src/studio-header/NavDropdownMenu.jsx b/src/studio-header/NavDropdownMenu.jsx index d8d9dd47a..413755f3c 100644 --- a/src/studio-header/NavDropdownMenu.jsx +++ b/src/studio-header/NavDropdownMenu.jsx @@ -30,7 +30,7 @@ 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, diff --git a/src/studio-header/StudioHeader.jsx b/src/studio-header/StudioHeader.jsx index 886ad8411..4d55792ec 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, 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,6 +54,7 @@ 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,