c35df7ef60
* feat: Add StudioHeader with optional AppMenu StudioHeader is a graft of Header with an additional optional AppMenu. Some Frontend Apps use Menus in their custom headers to provide more functionality in their apps. By adding this functionality in StudioHeader, it will be easier for frontend apps in Studio to adopt this component without it affecting the main Header component. * test: Add tests for StudioHeader and AppMenu * fix: Remove orderHistory * fix: Remove Responsive components * fix: Redefine User Menu for Studio The userMenu in StudioHeader will be used more for Studio related items such as Studio Home and Studio Maintenance. This requires new messages and reestablishing the url destinations of these menu items. * fix: Remove loggedOutItems * fix: Remove AUTHN_MINIMAL_HEADER items * fix: Remove unnecessary tests Anonymous sessions do not exist in the Studio. And Studio is not Mobile Ready. Tests of these kind are superfluous and have been removed. * feat: Turn mainMenu into an optional prop * test: Add test for optional mainMenu prop * feat: Update snapshots * fix: Remove ResponsiveContext * fix: Remove href and update appMenu prop Dropping the href because having a link that also works as a dropdown can be mildly confusing. Changing menu (type, href, content ) triplet to stick to the pattern; so we removed "menu". Also adding brackets around the triplet. Lastly, updating test and snapshot. Co-authored-by: Carlos Muniz <cmuniz@trcil.org>
######################### frontend-component-header ######################### |Build Status| |Codecov| |npm_version| |npm_downloads| |license| |semantic-release| ******** Overview ******** A generic header for Open edX micro-frontend applications. ************ Requirements ************ This component uses ``@edx/frontend-platform`` services such as i18n, analytics, configuration, and the ``AppContext`` React component, and expects that it has been loaded into a micro-frontend that has been properly initialized via ``@edx/frontend-platform``'s ``initialize`` function. `Please visit the frontend template application to see an example. <https://github.com/edx/frontend-template-application/blob/master/src/index.jsx>`_ Environment Variables ===================== * ``LMS_BASE_URL`` - The URL of the LMS of your Open edX instance. * ``LOGOUT_URL`` - The URL of the API endpoint which performs a user logout. * ``LOGIN_URL`` - The URL of the login page where a user can sign into their account. * ``SITE_NAME`` - The user-facing name of the site, used as `alt` text on the logo in the header. Defaults to "localhost" in development. * ``LOGO_URL`` - The URL of the site's logo. This logo is displayed in the header. * ``ORDER_HISTORY_URL`` - The URL of the order history page. * ``AUTHN_MINIMAL_HEADER`` - A boolean flag which hides the main menu, user menu, and logged-out menu items when truthy. This is intended to be used in micro-frontends like frontend-app-authentication in which these menus are considered distractions from the user's task. ************ Installation ************ To install this header into your Open edX micro-frontend, run the following command in your MFE: ``npm i --save @edx/frontend-component-header`` This will make the component available to be imported into your application. ***** Usage ***** This library has the following exports: * ``(default)``: The header as a React component. * ``messages``: Internationalization messages suitable for use with `@edx/frontend-platform/i18n <https://edx.github.io/frontend-platform/module-Internationalization.html>`_ * ``dist/index.scss``: A SASS file which contains style information for the component. It should be imported into the micro-frontend's own SCSS file. Examples ======== * `An example of component and messages usage. <https://github.com/edx/frontend-template-application/blob/3355bb3a96232390e9056f35b06ffa8f105ed7ca/src/index.jsx#L21>`_ * `An example of SCSS file usage. <https://github.com/edx/frontend-template-application/blob/3cd5485bf387b8c479baf6b02bf59e3061dc3465/src/index.scss#L8>`_ *********** Development *********** Install dependencies:: npm i Start the development server:: npm start Build a production distribution:: npm run build .. |Build Status| image:: https://api.travis-ci.com/edx/frontend-component-header.svg?branch=master :target: https://travis-ci.com/edx/frontend-component-header .. |Codecov| image:: https://img.shields.io/codecov/c/github/edx/frontend-component-header :target: @edx/frontend-component-header .. |npm_version| image:: https://img.shields.io/npm/v/@edx/frontend-component-header.svg :target: @edx/frontend-component-header .. |npm_downloads| image:: https://img.shields.io/npm/dt/@edx/frontend-component-header.svg :target: @edx/frontend-component-header .. |license| image:: https://img.shields.io/npm/l/@edx/frontend-component-header.svg :target: @edx/frontend-component-header .. |semantic-release| image:: https://img.shields.io/badge/%20%20%F0%9F%93%A6%F0%9F%9A%80-semantic--release-e10079.svg :target: https://github.com/semantic-release/semantic-release