Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

feat: configure style via MFE config api #311

Closed
wants to merge 1 commit into from
Closed

feat: configure style via MFE config api #311

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
1 change: 1 addition & 0 deletions .env.development
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -17,3 +17,4 @@ LOGO_URL=https://edx-cdn.org/v3/default/logo.svg
LOGO_TRADEMARK_URL=https://edx-cdn.org/v3/default/logo-trademark.svg
LOGO_WHITE_URL=https://edx-cdn.org/v3/default/logo-white.svg
FAVICON_URL=https://edx-cdn.org/v3/default/favicon.ico
MFE_CONFIG_API_URL=http://localhost:18000/api/mfe_config/v1
56 changes: 46 additions & 10 deletions README.rst
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -51,22 +51,58 @@ This library has the following exports:
language from its dropdown.
* supportedLanguages: An array of objects representing available languages. See example below for object shape.

Customization via MFE config API
Copy link

@dcoa dcoa Aug 11, 2023 •
edited
Loading

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I think this description should mention all the possible ways to modify the configuration, I mean, could include the JavaScript File https://github.com/openedx/frontend-platform/blob/master/docs/decisions/0007-javascript-file-configuration.rst

================================

Other than the environment variables listed above, it is also possible to customize the footer via `MFE config API <https://github.com/openedx/edx-platform/blob/master/lms/djangoapps/mfe_config_api/docs/decisions/0001-mfe-config-api.rst>`_. Below is the possible list of settings

.. code-block:: python

MFE_CONFIG = {
# Update footer container styling
"FOOTER_CUSTOM_STYLE": {
"backgroundImage": "url(http://<some-image-url>)",
# to change opacity of background image
# "backgroundImage": "linear-gradient( rgba(255, 255, 255, 0.85), rgba(255, 255, 255, 0.85) ) , url(http://<some-image-url>)",
},
# Update footer container styling via bootstrap classes
"FOOTER_CUSTOM_CLASSNAMES": "py-5 px-4 text-center flex-column justify-content-center flex-wrap text-dark",
# Update footer logo styling
"FOOTER_LOGO_STYLE": {
"marginBottom": "2rem",
},
# Override environment variable
"LOGO_TRADEMARK_URL": "https://<logo url>",
# Add links to footer
"FOOTER_LINKS": [
{"url": "https://openedx.org/terms-of-use/", "text": "Terms of service"},
{"url": "https://openedx.org/code-of-conduct/", "text": "Code of conduct"},
{"url": "https://openedx.org/privacy-policy/", "text": "Privacy Policy"},
],
# Update link container classes
"FOOTER_LINKS_CONTAINER_CLASSNAMES": "flex-wrap",
# Update link styling
"FOOTER_LINKS_CLASSNAMES": "text-dark font-weight-bold",
}

Examples
========

Component Usage Example::
Component Usage Example

.. code-block:: javascript

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

...
...

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

* `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>`_
Expand Down
57 changes: 35 additions & 22 deletions src/components/Footer.jsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -42,32 +42,45 @@ class SiteFooter extends React.Component {
} = this.props;
const showLanguageSelector = supportedLanguages.length > 0 && onLanguageSelected;
const { config } = this.context;

return (
<footer
role="contentinfo"
className="footer d-flex border-top py-3 px-4"
className={`footer d-flex border-top py-3 px-4 ${config.FOOTER_CUSTOM_CLASSNAMES || ''}`}
style={config.FOOTER_CUSTOM_STYLE}
>
<div className="container-fluid d-flex">
<a
className="d-block"
href={config.LMS_BASE_URL}
aria-label={intl.formatMessage(messages['footer.logo.ariaLabel'])}
>
<img
style={{ maxHeight: 45 }}
src={logo || config.LOGO_TRADEMARK_URL}
alt={intl.formatMessage(messages['footer.logo.altText'])}
/>
</a>
<div className="flex-grow-1" />
{showLanguageSelector && (
<LanguageSelector
options={supportedLanguages}
onSubmit={onLanguageSelected}
/>
)}
</div>
<a
className="d-block"
href={config.LMS_BASE_URL}
aria-label={intl.formatMessage(messages['footer.logo.ariaLabel'])}
>
<img
style={{ maxHeight: 45, ...config.FOOTER_LOGO_STYLE }}
src={logo || config.LOGO_TRADEMARK_URL}
alt={intl.formatMessage(messages['footer.logo.altText'])}
/>
</a>
<div className="flex-grow-1" />
{Array.isArray(config.FOOTER_LINKS) && (
<div className={`d-flex align-items-center justify-content-center ${config.FOOTER_LINKS_CONTAINER_CLASSNAMES || ''}`}>
{config.FOOTER_LINKS.map(element => (
<a
key={element.url}
className={`px-3 ${config.FOOTER_LINKS_CLASSNAMES}`}
href={element.url}
target={element.target || 'blank'}
>
{element.text}
Copy link

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

This wouldn't get internationalized.

Copy link

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

AFAIK, the links in the branding API and translated, so if this PR is switched to using that API, the API should return appropriate results.

However, I don't think it's possible to do the same with the MFE config API. For that you'd need the API to return the translation context for each link and then provide a custom translation mapping. I think it's easier to handle this is edx-platform.

</a>
)).reduce((prev, curr) => [prev, '|', curr])}
</div>
)}
{showLanguageSelector && (
<LanguageSelector
options={supportedLanguages}
onSubmit={onLanguageSelected}
/>
)}

</footer>
);
}
Expand Down
10 changes: 10 additions & 0 deletions src/components/Footer.test.jsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -13,6 +13,16 @@ const FooterWithContext = ({ locale = 'es' }) => {
config: {
LOGO_TRADEMARK_URL: process.env.LOGO_TRADEMARK_URL,
LMS_BASE_URL: process.env.LMS_BASE_URL,
FOOTER_CUSTOM_STYLE: { color: 'black' },
FOOTER_CUSTOM_CLASSNAMES: 'text-center',
FOOTER_LOGO_STYLE: { color: 'white' },
FOOTER_LINKS: [
{ url: 'https://openedx.org/terms-of-use/', text: 'Terms of service' },
{ url: 'https://openedx.org/code-of-conduct/', text: 'Code of conduct' },
{ url: 'https://openedx.org/privacy-policy/', text: 'Privacy Policy' },
],
FOOTER_LINKS_CONTAINER_CLASSNAMES: 'flex-wrap',
FOOTER_LINKS_CLASSNAMES: 'text-dark font-weight-bold',
},
}), []);

Expand Down
2 changes: 1 addition & 1 deletion src/components/LanguageSelector.jsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -13,7 +13,7 @@ const LanguageSelector = ({

return (
<form
className="form-inline"
className="form-inline justify-content-center"
onSubmit={handleSubmit}
{...props}
>
Expand Down
Loading