-
Notifications
You must be signed in to change notification settings - Fork 94
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.
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
feat: configure style via MFE config api #311
Changes from all commits
File filter
Filter by extension
Conversations
Jump to
Diff view
Diff view
There are no files selected for viewing
Original file line number | Diff line number | Diff line change |
---|---|---|
|
@@ -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} | ||
There was a problem hiding this comment. Choose a reason for hiding this commentThe reason will be displayed to describe this comment to others. Learn more. This wouldn't get internationalized. There was a problem hiding this comment. Choose a reason for hiding this commentThe 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> | ||
); | ||
} | ||
|
There was a problem hiding this comment.
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