|
| 1 | +######################### |
1 | 2 | frontend-component-header
|
2 |
| -========================= |
| 3 | +######################### |
3 | 4 |
|
4 | 5 | |Build Status| |Codecov| |npm_version| |npm_downloads| |license| |semantic-release|
|
5 | 6 |
|
6 |
| -This is the standard Open edX header for use in React applications. It has two exports: |
7 |
| - - **default**: The Header Component |
8 |
| - - **messages**: for i18n in the form of ``{ locale: { key: translatedString } }`` |
| 7 | +******** |
| 8 | +Overview |
| 9 | +******** |
| 10 | + |
| 11 | +A generic header for Open edX micro-frontend applications. |
| 12 | + |
| 13 | +************ |
| 14 | +Requirements |
| 15 | +************ |
| 16 | + |
| 17 | +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>`_ |
| 18 | + |
| 19 | +Environment Variables |
| 20 | +===================== |
| 21 | + |
| 22 | +* ``LMS_BASE_URL`` - The URL of the LMS of your Open edX instance. |
| 23 | +* ``LOGOUT_URL`` - The URL of the API endpoint which performs a user logout. |
| 24 | +* ``LOGIN_URL`` - The URL of the login page where a user can sign into their account. |
| 25 | +* ``SITE_NAME`` - The user-facing name of the site, used as `alt` text on the logo in the header. |
| 26 | + Defaults to "localhost" in development. |
| 27 | +* ``LOGO_URL`` - The URL of the site's logo. This logo is displayed in the header. |
| 28 | +* ``ORDER_HISTORY_URL`` - The URL of the order history page. |
| 29 | +* ``AUTHN_MINIMAL_HEADER`` - A boolean flag which hides the main menu, user menu, and logged-out |
| 30 | + menu items when truthy. This is intended to be used in micro-frontends like |
| 31 | + frontend-app-authentication in which these menus are considered distractions from the user's task. |
| 32 | + |
| 33 | +************ |
| 34 | +Installation |
| 35 | +************ |
| 36 | + |
| 37 | +To install this header into your Open edX micro-frontend, run the following command in your MFE: |
| 38 | + |
| 39 | +``npm i --save @edx/frontend-component-header`` |
| 40 | + |
| 41 | +This will make the component available to be imported into your application. |
| 42 | + |
| 43 | +***** |
| 44 | +Usage |
| 45 | +***** |
| 46 | + |
| 47 | +This library has the following exports: |
| 48 | + |
| 49 | +* ``(default)``: The header as a React component. |
| 50 | +* ``messages``: Internationalization messages suitable for use with `@edx/frontend-platform/i18n <https://edx.github.io/frontend-platform/module-Internationalization.html>`_ |
| 51 | +* ``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. |
| 52 | + |
| 53 | +Examples |
| 54 | +======== |
| 55 | + |
| 56 | +* `An example of component and messages usage. <https://github.com/edx/frontend-template-application/blob/3355bb3a96232390e9056f35b06ffa8f105ed7ca/src/index.jsx#L21>`_ |
| 57 | +* `An example of SCSS file usage. <https://github.com/edx/frontend-template-application/blob/3cd5485bf387b8c479baf6b02bf59e3061dc3465/src/index.scss#L8>`_ |
| 58 | + |
| 59 | +*********** |
| 60 | +Development |
| 61 | +*********** |
| 62 | + |
| 63 | +Install dependencies:: |
| 64 | + |
| 65 | + npm i |
| 66 | + |
| 67 | +Start the development server:: |
| 68 | + |
| 69 | + npm start |
| 70 | + |
| 71 | +Build a production distribution:: |
| 72 | + |
| 73 | + npm run build |
9 | 74 |
|
10 | 75 | .. |Build Status| image:: https://api.travis-ci.com/edx/frontend-component-header.svg?branch=master
|
11 | 76 | :target: https://travis-ci.com/edx/frontend-component-header
|
|
0 commit comments