Compare commits
8 Commits
| Author | SHA1 | Date | |
|---|---|---|---|
|
46d464d515 | ||
|
|
85ed8fbff4 | ||
|
|
d6adfec189 | ||
|
|
8b1943356e | ||
|
|
5aae6e8336 | ||
|
|
ae18ad45b9 | ||
|
|
0e15bb7e55 | ||
|
|
ff664b9d3b |
@@ -56,6 +56,7 @@ const socialLinks = [
|
||||
},
|
||||
];
|
||||
|
||||
|
||||
const App = () => (
|
||||
<IntlProvider locale="en">
|
||||
<SiteFooter
|
||||
@@ -71,6 +72,21 @@ const App = () => (
|
||||
googlePlayUrl="https://play.google.com"
|
||||
handleAllTrackEvents={() => {}}
|
||||
socialLinks={socialLinks}
|
||||
supportedLanguages={[
|
||||
{
|
||||
label: 'English',
|
||||
value: 'en',
|
||||
}, {
|
||||
label: 'español',
|
||||
value: 'es-419',
|
||||
},
|
||||
]}
|
||||
languageForm={{
|
||||
activeLanguage: 'en',
|
||||
screenReaderLabel: 'Choose Language',
|
||||
submitLabel: 'Apply',
|
||||
onLanguageSelected: () => {},
|
||||
}}
|
||||
/>
|
||||
</IntlProvider>
|
||||
);
|
||||
|
||||
@@ -56,6 +56,23 @@ const socialLinks = [
|
||||
},
|
||||
];
|
||||
|
||||
const supportedLanguages = [
|
||||
{
|
||||
label: 'English',
|
||||
value: 'en',
|
||||
}, {
|
||||
label: 'español',
|
||||
value: 'es-419',
|
||||
},
|
||||
];
|
||||
|
||||
const languageForm = {
|
||||
activeLanguage: 'en',
|
||||
screenReaderLabel: 'Choose Language',
|
||||
submitLabel: 'Apply',
|
||||
onLanguageSelected: () => {},
|
||||
};
|
||||
|
||||
const completeSiteFooterComponent = mockHandleAllTrackEvents =>
|
||||
(
|
||||
<IntlProvider locale="en">
|
||||
@@ -72,6 +89,8 @@ const completeSiteFooterComponent = mockHandleAllTrackEvents =>
|
||||
appleAppStoreUrl="https://store.apple.com"
|
||||
googlePlayUrl="https://play.google.com"
|
||||
handleAllTrackEvents={mockHandleAllTrackEvents}
|
||||
supportedLanguages={supportedLanguages}
|
||||
languageForm={languageForm}
|
||||
/>
|
||||
</IntlProvider>
|
||||
);
|
||||
@@ -101,6 +120,8 @@ describe('<SiteFooter />', () => {
|
||||
privacyPolicyUrl="https://www.example.com/privacy-policy"
|
||||
appleAppStoreUrl="https://store.apple.com"
|
||||
googlePlayUrl="https://play.google.com"
|
||||
supportedLanguages={supportedLanguages}
|
||||
languageForm={languageForm}
|
||||
handleAllTrackEvents={jest.fn()}
|
||||
/>
|
||||
</IntlProvider>
|
||||
@@ -124,6 +145,8 @@ describe('<SiteFooter />', () => {
|
||||
socialLinks={socialLinks}
|
||||
appleAppStoreUrl="https://store.apple.com"
|
||||
googlePlayUrl="https://play.google.com"
|
||||
supportedLanguages={supportedLanguages}
|
||||
languageForm={languageForm}
|
||||
handleAllTrackEvents={jest.fn()}
|
||||
showMobileLinks={false}
|
||||
/>
|
||||
@@ -131,6 +154,28 @@ describe('<SiteFooter />', () => {
|
||||
)).toJSON();
|
||||
expect(tree).toMatchSnapshot();
|
||||
});
|
||||
|
||||
it('does not render language selector', () => {
|
||||
const tree = renderer
|
||||
.create((
|
||||
<IntlProvider locale="en">
|
||||
<SiteFooter
|
||||
siteName="example"
|
||||
siteLogo={FooterLogo}
|
||||
marketingSiteBaseUrl="https://www.example.com"
|
||||
supportUrl="https://www.example.com/support"
|
||||
contactUrl="https://www.example.com/contact"
|
||||
openSourceUrl="https://www.example.com/open"
|
||||
termsOfServiceUrl="https://www.example.com/terms-of-service"
|
||||
privacyPolicyUrl="https://www.example.com/privacy-policy"
|
||||
appleAppStoreUrl="https://store.apple.com"
|
||||
googlePlayUrl="https://play.google.com"
|
||||
handleAllTrackEvents={jest.fn()}
|
||||
/>
|
||||
</IntlProvider>
|
||||
)).toJSON();
|
||||
expect(tree).toMatchSnapshot();
|
||||
});
|
||||
});
|
||||
|
||||
describe('handles analytics', () => {
|
||||
|
||||
@@ -1,5 +1,259 @@
|
||||
// Jest Snapshot v1, https://goo.gl/fbAQLP
|
||||
|
||||
exports[`<SiteFooter /> renders correctly does not render language selector 1`] = `
|
||||
<footer
|
||||
aria-label="Page Footer"
|
||||
className="footer d-flex justify-content-center border-top py-3 px-4"
|
||||
role="contentinfo"
|
||||
>
|
||||
<div
|
||||
className="max-width-1180 d-grid"
|
||||
>
|
||||
<div
|
||||
className="area-1"
|
||||
>
|
||||
<a
|
||||
aria-label="example Home"
|
||||
href="https://www.example.com/"
|
||||
onClick={[Function]}
|
||||
target="_self"
|
||||
>
|
||||
<img
|
||||
alt="example logo"
|
||||
src="test-file-stub"
|
||||
/>
|
||||
</a>
|
||||
</div>
|
||||
<div
|
||||
className="area-2"
|
||||
>
|
||||
<h2>
|
||||
example
|
||||
</h2>
|
||||
<ul
|
||||
className="list-unstyled p-0 m-0"
|
||||
>
|
||||
<li>
|
||||
<a
|
||||
href="https://www.example.com/about-us"
|
||||
>
|
||||
<span>
|
||||
About
|
||||
</span>
|
||||
</a>
|
||||
</li>
|
||||
<li>
|
||||
<a
|
||||
href="https://www.example.com/enterprise"
|
||||
>
|
||||
<span>
|
||||
example for Business
|
||||
</span>
|
||||
</a>
|
||||
</li>
|
||||
<li>
|
||||
<a
|
||||
href="https://www.example.com/affiliate-program"
|
||||
>
|
||||
<span>
|
||||
Affiliates
|
||||
</span>
|
||||
</a>
|
||||
</li>
|
||||
<li>
|
||||
<a
|
||||
href="https://www.example.com/open"
|
||||
>
|
||||
<span>
|
||||
Open example
|
||||
</span>
|
||||
</a>
|
||||
</li>
|
||||
<li>
|
||||
<a
|
||||
href="https://www.example.com/careers"
|
||||
>
|
||||
<span>
|
||||
Careers
|
||||
</span>
|
||||
</a>
|
||||
</li>
|
||||
<li>
|
||||
<a
|
||||
href="https://www.example.com/news-announcements"
|
||||
>
|
||||
<span>
|
||||
News
|
||||
</span>
|
||||
</a>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
<div
|
||||
className="area-3"
|
||||
>
|
||||
<h2>
|
||||
<span>
|
||||
Legal
|
||||
</span>
|
||||
</h2>
|
||||
<ul
|
||||
className="list-unstyled p-0 m-0"
|
||||
>
|
||||
<li>
|
||||
<a
|
||||
href="https://www.example.com/terms-of-service"
|
||||
>
|
||||
<span>
|
||||
Terms of Service & Honor Code
|
||||
</span>
|
||||
</a>
|
||||
</li>
|
||||
<li>
|
||||
<a
|
||||
href="https://www.example.com/privacy-policy"
|
||||
>
|
||||
<span>
|
||||
Privacy Policy
|
||||
</span>
|
||||
</a>
|
||||
</li>
|
||||
<li>
|
||||
<a
|
||||
href="https://www.example.com/accessibility"
|
||||
>
|
||||
<span>
|
||||
Accessibility Policy
|
||||
</span>
|
||||
</a>
|
||||
</li>
|
||||
<li>
|
||||
<a
|
||||
href="https://www.example.com/trademarks"
|
||||
>
|
||||
<span>
|
||||
Trademark Policy
|
||||
</span>
|
||||
</a>
|
||||
</li>
|
||||
<li>
|
||||
<a
|
||||
href="https://www.example.com/sitemap"
|
||||
>
|
||||
<span>
|
||||
Sitemap
|
||||
</span>
|
||||
</a>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
<div
|
||||
className="area-4"
|
||||
>
|
||||
<h2>
|
||||
<span>
|
||||
Connect
|
||||
</span>
|
||||
</h2>
|
||||
<ul
|
||||
className="list-unstyled p-0 m-0"
|
||||
>
|
||||
<li>
|
||||
<a
|
||||
href="https://www.example.com/blog"
|
||||
>
|
||||
<span>
|
||||
Blog
|
||||
</span>
|
||||
</a>
|
||||
</li>
|
||||
<li>
|
||||
<a
|
||||
href="https://www.example.com/contact"
|
||||
>
|
||||
<span>
|
||||
Contact Us
|
||||
</span>
|
||||
</a>
|
||||
</li>
|
||||
<li>
|
||||
<a
|
||||
href="https://www.example.com/support"
|
||||
>
|
||||
<span>
|
||||
Help Center
|
||||
</span>
|
||||
</a>
|
||||
</li>
|
||||
<li>
|
||||
<a
|
||||
href="https://www.example.com/media-kit"
|
||||
>
|
||||
<span>
|
||||
Media Kit
|
||||
</span>
|
||||
</a>
|
||||
</li>
|
||||
<li>
|
||||
<a
|
||||
href="https://www.example.com/donate"
|
||||
>
|
||||
<span>
|
||||
Donate
|
||||
</span>
|
||||
</a>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
<div
|
||||
className="area-5"
|
||||
>
|
||||
<ul
|
||||
className="d-flex flex-row justify-content-between list-unstyled max-width-264 p-0 mb-5"
|
||||
>
|
||||
<li>
|
||||
<a
|
||||
href="https://store.apple.com"
|
||||
onClick={[Function]}
|
||||
rel="noopener noreferrer"
|
||||
target="_blank"
|
||||
>
|
||||
<img
|
||||
alt="Download the example mobile app from the Apple App Store"
|
||||
className="max-height-39"
|
||||
src="https://prod-edxapp.edx-cdn.org/static/images/app/app_store_badge_135x40.d0558d910630.svg"
|
||||
/>
|
||||
</a>
|
||||
</li>
|
||||
<li>
|
||||
<a
|
||||
href="https://play.google.com"
|
||||
onClick={[Function]}
|
||||
rel="noopener noreferrer"
|
||||
target="_blank"
|
||||
>
|
||||
<img
|
||||
alt="Download the example mobile app from Google Play"
|
||||
className="max-height-39"
|
||||
src="https://prod-edxapp.edx-cdn.org/static/images/app/google_play_badge_45.6ea466e328da.png"
|
||||
/>
|
||||
</a>
|
||||
</li>
|
||||
</ul>
|
||||
<p>
|
||||
<span>
|
||||
© 2012–2019 example Inc.
|
||||
</span>
|
||||
<br />
|
||||
<span>
|
||||
EdX, Open edX, and MicroMasters are registered trademarks of edX Inc. | 粤ICP备17044299号-2
|
||||
</span>
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</footer>
|
||||
`;
|
||||
|
||||
exports[`<SiteFooter /> renders correctly does not render mobile links 1`] = `
|
||||
<footer
|
||||
aria-label="Page Footer"
|
||||
@@ -23,6 +277,64 @@ exports[`<SiteFooter /> renders correctly does not render mobile links 1`] = `
|
||||
src="test-file-stub"
|
||||
/>
|
||||
</a>
|
||||
<div
|
||||
className="i18n d-flex mt-2"
|
||||
>
|
||||
<form
|
||||
className="d-flex align-items-start"
|
||||
onSubmit={[Function]}
|
||||
>
|
||||
<label
|
||||
htmlFor="site-footer-language-select"
|
||||
>
|
||||
<svg
|
||||
aria-hidden="true"
|
||||
className="svg-inline--fa fa-language fa-w-20 fa-2x text-primary"
|
||||
data-icon="language"
|
||||
data-prefix="fas"
|
||||
focusable="false"
|
||||
role="img"
|
||||
style={Object {}}
|
||||
viewBox="0 0 640 512"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
>
|
||||
<path
|
||||
d="M152.1 236.2c-3.5-12.1-7.8-33.2-7.8-33.2h-.5s-4.3 21.1-7.8 33.2l-11.1 37.5H163zM616 96H336v320h280c13.3 0 24-10.7 24-24V120c0-13.3-10.7-24-24-24zm-24 120c0 6.6-5.4 12-12 12h-11.4c-6.9 23.6-21.7 47.4-42.7 69.9 8.4 6.4 17.1 12.5 26.1 18 5.5 3.4 7.3 10.5 4.1 16.2l-7.9 13.9c-3.4 5.9-10.9 7.8-16.7 4.3-12.6-7.8-24.5-16.1-35.4-24.9-10.9 8.7-22.7 17.1-35.4 24.9-5.8 3.5-13.3 1.6-16.7-4.3l-7.9-13.9c-3.2-5.6-1.4-12.8 4.2-16.2 9.3-5.7 18-11.7 26.1-18-7.9-8.4-14.9-17-21-25.7-4-5.7-2.2-13.6 3.7-17.1l6.5-3.9 7.3-4.3c5.4-3.2 12.4-1.7 16 3.4 5 7 10.8 14 17.4 20.9 13.5-14.2 23.8-28.9 30-43.2H412c-6.6 0-12-5.4-12-12v-16c0-6.6 5.4-12 12-12h64v-16c0-6.6 5.4-12 12-12h16c6.6 0 12 5.4 12 12v16h64c6.6 0 12 5.4 12 12zM0 120v272c0 13.3 10.7 24 24 24h280V96H24c-13.3 0-24 10.7-24 24zm58.9 216.1L116.4 167c1.7-4.9 6.2-8.1 11.4-8.1h32.5c5.1 0 9.7 3.3 11.4 8.1l57.5 169.1c2.6 7.8-3.1 15.9-11.4 15.9h-22.9a12 12 0 0 1-11.5-8.6l-9.4-31.9h-60.2l-9.1 31.8c-1.5 5.1-6.2 8.7-11.5 8.7H70.3c-8.2 0-14-8.1-11.4-15.9z"
|
||||
fill="currentColor"
|
||||
style={Object {}}
|
||||
/>
|
||||
</svg>
|
||||
<div
|
||||
className="sr-only"
|
||||
>
|
||||
Choose Language
|
||||
</div>
|
||||
</label>
|
||||
<select
|
||||
className="mx-2 mt-1"
|
||||
defaultValue="en"
|
||||
id="site-footer-language-select"
|
||||
name="site-footer-language-select"
|
||||
>
|
||||
<option
|
||||
value="en"
|
||||
>
|
||||
English
|
||||
</option>
|
||||
<option
|
||||
value="es-419"
|
||||
>
|
||||
español
|
||||
</option>
|
||||
</select>
|
||||
<button
|
||||
className="mt-1"
|
||||
type="submit"
|
||||
>
|
||||
Apply
|
||||
</button>
|
||||
</form>
|
||||
</div>
|
||||
</div>
|
||||
<div
|
||||
className="area-2"
|
||||
@@ -441,6 +753,64 @@ exports[`<SiteFooter /> renders correctly does not render social links 1`] = `
|
||||
src="test-file-stub"
|
||||
/>
|
||||
</a>
|
||||
<div
|
||||
className="i18n d-flex mt-2"
|
||||
>
|
||||
<form
|
||||
className="d-flex align-items-start"
|
||||
onSubmit={[Function]}
|
||||
>
|
||||
<label
|
||||
htmlFor="site-footer-language-select"
|
||||
>
|
||||
<svg
|
||||
aria-hidden="true"
|
||||
className="svg-inline--fa fa-language fa-w-20 fa-2x text-primary"
|
||||
data-icon="language"
|
||||
data-prefix="fas"
|
||||
focusable="false"
|
||||
role="img"
|
||||
style={Object {}}
|
||||
viewBox="0 0 640 512"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
>
|
||||
<path
|
||||
d="M152.1 236.2c-3.5-12.1-7.8-33.2-7.8-33.2h-.5s-4.3 21.1-7.8 33.2l-11.1 37.5H163zM616 96H336v320h280c13.3 0 24-10.7 24-24V120c0-13.3-10.7-24-24-24zm-24 120c0 6.6-5.4 12-12 12h-11.4c-6.9 23.6-21.7 47.4-42.7 69.9 8.4 6.4 17.1 12.5 26.1 18 5.5 3.4 7.3 10.5 4.1 16.2l-7.9 13.9c-3.4 5.9-10.9 7.8-16.7 4.3-12.6-7.8-24.5-16.1-35.4-24.9-10.9 8.7-22.7 17.1-35.4 24.9-5.8 3.5-13.3 1.6-16.7-4.3l-7.9-13.9c-3.2-5.6-1.4-12.8 4.2-16.2 9.3-5.7 18-11.7 26.1-18-7.9-8.4-14.9-17-21-25.7-4-5.7-2.2-13.6 3.7-17.1l6.5-3.9 7.3-4.3c5.4-3.2 12.4-1.7 16 3.4 5 7 10.8 14 17.4 20.9 13.5-14.2 23.8-28.9 30-43.2H412c-6.6 0-12-5.4-12-12v-16c0-6.6 5.4-12 12-12h64v-16c0-6.6 5.4-12 12-12h16c6.6 0 12 5.4 12 12v16h64c6.6 0 12 5.4 12 12zM0 120v272c0 13.3 10.7 24 24 24h280V96H24c-13.3 0-24 10.7-24 24zm58.9 216.1L116.4 167c1.7-4.9 6.2-8.1 11.4-8.1h32.5c5.1 0 9.7 3.3 11.4 8.1l57.5 169.1c2.6 7.8-3.1 15.9-11.4 15.9h-22.9a12 12 0 0 1-11.5-8.6l-9.4-31.9h-60.2l-9.1 31.8c-1.5 5.1-6.2 8.7-11.5 8.7H70.3c-8.2 0-14-8.1-11.4-15.9z"
|
||||
fill="currentColor"
|
||||
style={Object {}}
|
||||
/>
|
||||
</svg>
|
||||
<div
|
||||
className="sr-only"
|
||||
>
|
||||
Choose Language
|
||||
</div>
|
||||
</label>
|
||||
<select
|
||||
className="mx-2 mt-1"
|
||||
defaultValue="en"
|
||||
id="site-footer-language-select"
|
||||
name="site-footer-language-select"
|
||||
>
|
||||
<option
|
||||
value="en"
|
||||
>
|
||||
English
|
||||
</option>
|
||||
<option
|
||||
value="es-419"
|
||||
>
|
||||
español
|
||||
</option>
|
||||
</select>
|
||||
<button
|
||||
className="mt-1"
|
||||
type="submit"
|
||||
>
|
||||
Apply
|
||||
</button>
|
||||
</form>
|
||||
</div>
|
||||
</div>
|
||||
<div
|
||||
className="area-2"
|
||||
@@ -695,6 +1065,64 @@ exports[`<SiteFooter /> renders correctly renders with social and mobile links 1
|
||||
src="test-file-stub"
|
||||
/>
|
||||
</a>
|
||||
<div
|
||||
className="i18n d-flex mt-2"
|
||||
>
|
||||
<form
|
||||
className="d-flex align-items-start"
|
||||
onSubmit={[Function]}
|
||||
>
|
||||
<label
|
||||
htmlFor="site-footer-language-select"
|
||||
>
|
||||
<svg
|
||||
aria-hidden="true"
|
||||
className="svg-inline--fa fa-language fa-w-20 fa-2x text-primary"
|
||||
data-icon="language"
|
||||
data-prefix="fas"
|
||||
focusable="false"
|
||||
role="img"
|
||||
style={Object {}}
|
||||
viewBox="0 0 640 512"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
>
|
||||
<path
|
||||
d="M152.1 236.2c-3.5-12.1-7.8-33.2-7.8-33.2h-.5s-4.3 21.1-7.8 33.2l-11.1 37.5H163zM616 96H336v320h280c13.3 0 24-10.7 24-24V120c0-13.3-10.7-24-24-24zm-24 120c0 6.6-5.4 12-12 12h-11.4c-6.9 23.6-21.7 47.4-42.7 69.9 8.4 6.4 17.1 12.5 26.1 18 5.5 3.4 7.3 10.5 4.1 16.2l-7.9 13.9c-3.4 5.9-10.9 7.8-16.7 4.3-12.6-7.8-24.5-16.1-35.4-24.9-10.9 8.7-22.7 17.1-35.4 24.9-5.8 3.5-13.3 1.6-16.7-4.3l-7.9-13.9c-3.2-5.6-1.4-12.8 4.2-16.2 9.3-5.7 18-11.7 26.1-18-7.9-8.4-14.9-17-21-25.7-4-5.7-2.2-13.6 3.7-17.1l6.5-3.9 7.3-4.3c5.4-3.2 12.4-1.7 16 3.4 5 7 10.8 14 17.4 20.9 13.5-14.2 23.8-28.9 30-43.2H412c-6.6 0-12-5.4-12-12v-16c0-6.6 5.4-12 12-12h64v-16c0-6.6 5.4-12 12-12h16c6.6 0 12 5.4 12 12v16h64c6.6 0 12 5.4 12 12zM0 120v272c0 13.3 10.7 24 24 24h280V96H24c-13.3 0-24 10.7-24 24zm58.9 216.1L116.4 167c1.7-4.9 6.2-8.1 11.4-8.1h32.5c5.1 0 9.7 3.3 11.4 8.1l57.5 169.1c2.6 7.8-3.1 15.9-11.4 15.9h-22.9a12 12 0 0 1-11.5-8.6l-9.4-31.9h-60.2l-9.1 31.8c-1.5 5.1-6.2 8.7-11.5 8.7H70.3c-8.2 0-14-8.1-11.4-15.9z"
|
||||
fill="currentColor"
|
||||
style={Object {}}
|
||||
/>
|
||||
</svg>
|
||||
<div
|
||||
className="sr-only"
|
||||
>
|
||||
Choose Language
|
||||
</div>
|
||||
</label>
|
||||
<select
|
||||
className="mx-2 mt-1"
|
||||
defaultValue="en"
|
||||
id="site-footer-language-select"
|
||||
name="site-footer-language-select"
|
||||
>
|
||||
<option
|
||||
value="en"
|
||||
>
|
||||
English
|
||||
</option>
|
||||
<option
|
||||
value="es-419"
|
||||
>
|
||||
español
|
||||
</option>
|
||||
</select>
|
||||
<button
|
||||
className="mt-1"
|
||||
type="submit"
|
||||
>
|
||||
Apply
|
||||
</button>
|
||||
</form>
|
||||
</div>
|
||||
</div>
|
||||
<div
|
||||
className="area-2"
|
||||
|
||||
@@ -2,16 +2,29 @@ import React from 'react';
|
||||
import PropTypes from 'prop-types';
|
||||
import { FormattedMessage, injectIntl, intlShape } from 'react-intl';
|
||||
import { Hyperlink } from '@edx/paragon';
|
||||
|
||||
import { faLanguage } from '@fortawesome/free-solid-svg-icons';
|
||||
import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
|
||||
|
||||
import messages from './SiteFooter.messages';
|
||||
|
||||
const EVENT_NAMES = {
|
||||
FOOTER_LINK: 'edx.bi.footer.link',
|
||||
};
|
||||
|
||||
|
||||
class SiteFooter extends React.Component {
|
||||
constructor(props) {
|
||||
super(props);
|
||||
this.externalLinkClickHandler = this.externalLinkClickHandler.bind(this);
|
||||
this.applyLanguageSelection = this.applyLanguageSelection.bind(this);
|
||||
}
|
||||
|
||||
applyLanguageSelection(event) {
|
||||
event.preventDefault();
|
||||
const languageCode = event.target.elements['site-footer-language-select'].value;
|
||||
const { languageForm: { onLanguageSelected } } = this.props;
|
||||
onLanguageSelected(languageCode);
|
||||
}
|
||||
|
||||
externalLinkClickHandler(event) {
|
||||
@@ -92,7 +105,11 @@ class SiteFooter extends React.Component {
|
||||
contactUrl,
|
||||
supportUrl,
|
||||
socialLinks,
|
||||
supportedLanguages,
|
||||
languageForm,
|
||||
} = this.props;
|
||||
const showLanguageSelector = supportedLanguages.length > 0 &&
|
||||
languageForm;
|
||||
return (
|
||||
<footer
|
||||
role="contentinfo"
|
||||
@@ -109,6 +126,30 @@ class SiteFooter extends React.Component {
|
||||
{ siteName },
|
||||
)}
|
||||
/>
|
||||
{showLanguageSelector &&
|
||||
<div className="i18n d-flex mt-2">
|
||||
<form
|
||||
className="d-flex align-items-start"
|
||||
onSubmit={this.applyLanguageSelection}
|
||||
>
|
||||
{/* eslint-disable-next-line jsx-a11y/label-has-for */}
|
||||
<label htmlFor="site-footer-language-select">
|
||||
<FontAwesomeIcon icon={faLanguage} size="2x" className="text-primary" />
|
||||
<div className="sr-only">{languageForm.screenReaderLabel}</div>
|
||||
</label>
|
||||
<select
|
||||
id="site-footer-language-select"
|
||||
className="mx-2 mt-1"
|
||||
name="site-footer-language-select"
|
||||
defaultValue={languageForm.activeLanguage}
|
||||
>
|
||||
{supportedLanguages.map(({ value, label }) =>
|
||||
<option key={value} value={value}>{label}</option>)}
|
||||
</select>
|
||||
<button className="mt-1" type="submit">{languageForm.submitLabel}</button>
|
||||
</form>
|
||||
</div>
|
||||
}
|
||||
</div>
|
||||
<div className="area-2">
|
||||
<h2>{siteName}</h2>
|
||||
@@ -333,6 +374,16 @@ SiteFooter.propTypes = {
|
||||
showMobileLinks: PropTypes.bool,
|
||||
appleAppStoreUrl: PropTypes.string,
|
||||
googlePlayUrl: PropTypes.string,
|
||||
supportedLanguages: PropTypes.arrayOf(PropTypes.shape({
|
||||
label: PropTypes.string.isRequired,
|
||||
value: PropTypes.string.isRequired,
|
||||
})),
|
||||
languageForm: PropTypes.shape({
|
||||
screenReaderLabel: PropTypes.string.isRequired,
|
||||
submitLabel: PropTypes.string.isRequired,
|
||||
onLanguageSelected: PropTypes.func.isRequired,
|
||||
activeLanguage: PropTypes.string,
|
||||
}),
|
||||
handleAllTrackEvents: PropTypes.func.isRequired,
|
||||
intl: intlShape.isRequired,
|
||||
};
|
||||
@@ -350,6 +401,8 @@ SiteFooter.defaultProps = {
|
||||
showMobileLinks: true,
|
||||
appleAppStoreUrl: null,
|
||||
googlePlayUrl: null,
|
||||
supportedLanguages: [],
|
||||
languageForm: null,
|
||||
};
|
||||
|
||||
export default injectIntl(SiteFooter);
|
||||
|
||||
Reference in New Issue
Block a user