Skip to content

Yagnesh1998/frontend-component-footer

 
 

Repository files navigation

frontend-component-footer

Build Status Codecov npm_version npm_downloads license semantic-release

Overview

A generic footer for Open edX micro-frontend applications. It includes a logo and an optional language selector dropdown.

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.

Environment Variables

This component requires that the following environment variable be set by the consuming micro-frontend.

  • LMS_BASE_URL - The URL of the LMS of your Open edX instance.
  • LOGO_TRADEMARK_URL - This is a URL to a logo for use in the footer. This is a different environment variable than LOGO_URL (used in frontend-component-header) to accommodate sites that would like to have additional trademark information on a logo in the footer, such as a (tm) or (r) symbol.

Installation

To install this footer into your Open edX micro-frontend, run the following command in your MFE:

npm i --save @edx/frontend-component-footer

This will make the component available to be imported into your application.

Usage

This library has the following exports:

  • (default): The footer as a React component.
  • messages: Internationalization messages suitable for use with @edx/frontend-platform/i18n
  • dist/footer.scss: A SASS file which contains style information for the component. It should be imported into the micro-frontend's own SCSS file.

<Footer /> component props

  • onLanguageSelected: Provides the footer with an event handler for when the user selects a language from its dropdown.
  • supportedLanguages: An array of objects representing available languages. See example below for object shape.

Examples

Component Usage Example:

import Footer, { messages } from '@edx/frontend-component-footer';

...

<Footer
  onLanguageSelected={(languageCode) => {/* set language */}}
  supportedLanguages={[
    { label: 'English', value: 'en'},
    { label: 'Español', value: 'es' },
  ]}
/>

Development

Install dependencies:

npm i

Start the development server:

npm start

Build a production distribution:

npm run build

About

Site footer component for edX frontend apps.

Resources

License

Stars

Watchers

Forks

Packages

No packages published

Languages

  • JavaScript 87.2%
  • Makefile 10.1%
  • SCSS 1.4%
  • HTML 1.3%