Skip to content

Dicey-Tech/frontend-component-footer-diceytech

This branch is 7 commits ahead of, 295 commits behind openedx/frontend-component-footer:master.

Folders and files

NameName
Last commit message
Last commit date
Oct 7, 2021
Apr 4, 2019
Jan 8, 2019
Nov 30, 2020
Sep 30, 2019
Jan 6, 2021
Nov 30, 2020
Nov 30, 2020
Dec 3, 2019
Nov 30, 2020
Jan 8, 2019
Jan 8, 2019
Jan 2, 2019
Sep 30, 2019
May 14, 2021
Oct 2, 2019
Sep 30, 2019
Sep 30, 2019
May 29, 2023
May 29, 2023
Jun 8, 2021
Nov 30, 2020

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.

  • 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.

Topics

Resources

License

Stars

Watchers

Forks

Packages

No packages published

Languages

  • JavaScript 86.9%
  • Makefile 10.5%
  • SCSS 1.4%
  • HTML 1.2%