From 8cd442df082a75adcee7c5a09d8340f28eda617f Mon Sep 17 00:00:00 2001
From: Diana Olarte <diana.olarte@edunext.co>
Date: Mon, 13 Jan 2025 12:47:56 +1100
Subject: [PATCH] docs: update usage example and readme

---
 README.rst            | 25 +++++++++++++------------
 env.config.js         |  7 +++++++
 example/index.jsx     |  8 +-------
 webpack.dev.config.js |  4 +++-
 4 files changed, 24 insertions(+), 20 deletions(-)
 create mode 100644 env.config.js

diff --git a/README.rst b/README.rst
index 66dcc6dc5..677ebb843 100644
--- a/README.rst
+++ b/README.rst
@@ -86,12 +86,19 @@ This library has the following exports:
 * ``messages``: Internationalization messages suitable for use with `@edx/frontend-platform/i18n <https://edx.github.io/frontend-platform/module-Internationalization.html>`_
 * ``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
-==========================
+Language Selector
+-----------------
 
-* 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.
+The language selector dropdown is optional and can be enabled by setting the MFE configuration variable ``ENABLE_FOOTER_LANG_SELECTOR`` to ``true``.
+Secondly, configue the languages that should be displayed in the dropdown by setting the MFE configuration variable ``SITE_SUPPORTED_LANGUAGES`` to an array of locale languages.
+Example:
+
+.. code-block:: python 
+
+  MFE_CONFIG["EDX_FRONTEND_APP_CONFIG"] = {
+    "ENABLE_FOOTER_LANG_SELECTOR": True,
+    "SITE_SUPPORTED_LANGUAGES": ['en', 'es', 'fr', 'pt-br'],
+  }
 
 Plugin
 ======
@@ -108,13 +115,7 @@ Component Usage Example::
 
   ...
 
-  <Footer
-    onLanguageSelected={(languageCode) => {/* set language */}}
-    supportedLanguages={[
-      { label: 'English', value: 'en'},
-      { label: 'Español', value: 'es' },
-    ]}
-  />
+  <Footer />
 
 * `An example of minimal component and messages usage. <https://github.com/openedx/frontend-template-application/blob/3355bb3a96232390e9056f35b06ffa8f105ed7ca/src/index.jsx#L23>`_
 * `An example of SCSS file usage. <https://github.com/openedx/frontend-template-application/blob/3cd5485bf387b8c479baf6b02bf59e3061dc3465/src/index.scss#L9>`_
diff --git a/env.config.js b/env.config.js
new file mode 100644
index 000000000..1db4a1781
--- /dev/null
+++ b/env.config.js
@@ -0,0 +1,7 @@
+// This file is used only for the example application.
+const config = {
+    ENABLE_FOOTER_LANG_SELECTOR: true,
+    SITE_SUPPORTED_LANGUAGES: ['es', 'en'],  
+};
+  
+  export default config;
\ No newline at end of file
diff --git a/example/index.jsx b/example/index.jsx
index 580fccc1b..dd0258a78 100644
--- a/example/index.jsx
+++ b/example/index.jsx
@@ -15,13 +15,7 @@ subscribe(APP_READY, () => {
         authenticatedUser: null,
         config: getConfig(),
       }}>
-        <Footer
-          onLanguageSelected={() => {}}
-          supportedLanguages={[
-            { label: 'English', value: 'en' },
-            { label: 'Español', value: 'es' },
-          ]}
-        />
+        <Footer />
       </AppContext.Provider>
     </AppProvider>,
     document.getElementById('root'),
diff --git a/webpack.dev.config.js b/webpack.dev.config.js
index 04534c610..d14bf3385 100644
--- a/webpack.dev.config.js
+++ b/webpack.dev.config.js
@@ -2,7 +2,9 @@ const path = require('path');
 const { createConfig } = require('@openedx/frontend-build');
 
 module.exports = createConfig('webpack-dev', {
-  entry: path.resolve(__dirname, 'example'),
+  entry: {
+    app: path.resolve(__dirname, 'example'),
+  },
   output: {
     path: path.resolve(__dirname, 'example/dist'),
     publicPath: '/',