@prometheus-platform/frontend-component-header v4.0.22
######################### 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/openedx/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 asalt
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.ACCOUNT_PROFILE_URL
- The URL of the account profile page.ACCOUNT_SETTINGS_URL
- The URL of the account settings 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/openedx/frontend-template-application/blob/3355bb3a96232390e9056f35b06ffa8f105ed7ca/src/index.jsx#L21>
_An example of SCSS file usage. <https://github.com/openedx/frontend-template-application/blob/3cd5485bf387b8c479baf6b02bf59e3061dc3465/src/index.scss#L8>
_
Development
Install dependencies::
npm ci
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
11 months ago
11 months ago
11 months ago
11 months ago
11 months ago
11 months ago
12 months ago
12 months ago
12 months ago
12 months ago
12 months ago
12 months ago
12 months ago
12 months ago
12 months ago
12 months ago
12 months ago