This is the small version of the footer. This footer belongs to the very bottom of the webpage.
Add this boolean attribute if you want to have control over what happens if a user clicks one of the language- or disclaimer-items.
Add a callback method that should run as soon as a language link gets clicked.
Add a callback method that should run as soon as a disclaimer link gets clicked.
import React, { createElement, useState } from 'react';
import createAXAFooterSmallReact from '@axa-ch-webhub-cloud/footer-small/lib/index.react';
const AXAFooterSmallReact = createAXAFooterSmallReact(createElement);
const DemoFooterSmall = () => {
const [activeLanguage, setActiveLanguageIndex] = useState('-');
const [disclaimerChange, setDisclaimerIndex] = useState('-');
const handleAXAFooterLanguageClicked = (language) => {
setActiveLanguageIndex(language);
};
const handleAXAFooterDisclaimerClicked = (disclaimer) => {
setDisclaimerIndex(disclaimer);
};
return (
<div>
<p>Language - Index Clicked: {activeLanguage}</p>
<p>Disclaimer - Index Clicked: {disclaimerChange}</p>
<AXAFooterSmallReact
onLanguageClick={handleAXAFooterLanguageClicked}
onDisclaimerClick={handleAXAFooterDisclaimerClicked}
dynamic
>
<a
slot="language-item"
className="m-footer-small__link--active"
href="https://axa.ch/de/privatkunden.html"
>
DE
</a>
<a slot="language-item" href="https://axa.ch/fr/particuliers.html">
FR
</a>
<a slot="language-item" href="https://axa.ch/it/clienti-privati.html">
IT
</a>
<a slot="language-item" href="https://axa.ch/en/private-customers.html">
EN
</a>
<a
slot="disclaimer-item"
href="https://axa.ch/en/information/terms-of-use.html"
>
Terms of use
</a>
<a
slot="disclaimer-item"
href="https://axa.ch/en/information/data-protection.html"
>
Data protection
</a>
<span slot="copyright">© 2019 AXA Insurance Ltd.</span>
</AXAFooterSmallReact>
</div>
);
};If you want a footer with static links, that will automatically route to wherever the href attributes are pointing:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta http-equiv="X-UA-Compatible" content="ie=edge" />
<title>Your awesome title</title>
</head>
<body>
<axa-footer-small>
<a
slot="language-item"
href="https://axa.ch/de/privatkunden.html"
class="m-footer-small__link--active"
>
DE
</a>
<a slot="language-item" href="https://axa.ch/fr/particuliers.html">
FR
</a>
<a slot="language-item" href="https://axa.ch/it/clienti-privati.html">
IT
</a>
<a slot="language-item" href="https://axa.ch/en/private-customers.html">
EN
</a>
<a
slot="disclaimer-item"
href="https://axa.ch/en/information/terms-of-use.html"
>
Terms of use
</a>
<a
slot="disclaimer-item"
href="https://axa.ch/en/information/data-protection.html"
>
Data protection
</a>
<span slot="copyright">© 2019 AXA Insurance Ltd.</span>
</axa-footer-small>
<script src="node_modules/@axa-ch-webhub-cloud/footer-small/dist/index.js"></script>
</body>
</html>This approach will not redirect the user automatically, if he/she clicks on a link, but instead fire an event. If you want to listen for such events, pass in the additional dynamic boolean attribute and set your listeners like this:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta http-equiv="X-UA-Compatible" content="ie=edge" />
<title>Your awesome title</title>
</head>
<body>
<script>
const wrapper = document.createElement('div');
const activeLanguage = document.createElement('p');
activeLanguage.id = 'active-language';
activeLanguage.innerText = `Language - Index Clicked: ${selectedLanguageKey}`;
const clickedDisclaimer = document.createElement('p');
clickedDisclaimer.id = 'clicked-disclaimer';
clickedDisclaimer.innerText = `Disclaimer - Index Clicked: -`;
const footerSmall = document.createElement('axa-footer-small');
footerSmall.dynamic = true;
const deLanguageLink = document.createElement('a');
deLanguageLink.slot = 'language-item';
deLanguageLink.href = 'https://axa.ch/de/privatkunden.html';
deLanguageLink.classList.add('m-footer-small__link--active');
deLanguageLink.textContent = 'DE';
const frLanguageLink = document.createElement('a');
frLanguageLink.slot = 'language-item';
frLanguageLink.href = 'https://axa.ch/de/privatkunden.html';
frLanguageLink.textContent = 'FR';
const itLanguageLink = document.createElement('a');
itLanguageLink.slot = 'language-item';
itLanguageLink.href = 'https://axa.ch/de/privatkunden.html';
itLanguageLink.textContent = 'IT';
const enLanguageLink = document.createElement('a');
enLanguageLink.slot = 'language-item';
enLanguageLink.href = 'https://axa.ch/de/privatkunden.html';
enLanguageLink.textContent = 'EN';
const termsOfUseLink = document.createElement('a');
termsOfUseLink.slot = 'disclaimer-item';
termsOfUseLink.href = 'https://axa.ch/en/information/terms-of-use.html';
termsOfUseLink.textContent = 'Terms of use';
const dataProtectionLink = document.createElement('a');
dataProtectionLink.slot = 'disclaimer-item';
dataProtectionLink.href =
'https://axa.ch/en/information/data-protection.html';
dataProtectionLink.textContent = 'Data protection';
const copyRightText = document.createElement('span');
copyRightText.slot = 'copyright';
copyRightText.textContent = '© 2019 AXA Insurance Ltd.';
footerSmall.appendChild(deLanguageLink);
footerSmall.appendChild(frLanguageLink);
footerSmall.appendChild(itLanguageLink);
footerSmall.appendChild(enLanguageLink);
footerSmall.appendChild(termsOfUseLink);
footerSmall.appendChild(dataProtectionLink);
footerSmall.appendChild(copyRightText);
wrapper.appendChild(activeLanguage);
wrapper.appendChild(clickedDisclaimer);
wrapper.appendChild(footerSmall);
footerSmall.addEventListener('axa-language-click', (languageEvent) => {
const languageResult = document.getElementById('active-language');
languageResult.innerText = `Language - Index Clicked: ${languageEvent.detail}`;
});
footerSmall.addEventListener(
'axa-disclaimer-click',
(disclaimerEvent) => {
const clickedDisclaimers =
document.getElementById('clicked-disclaimer');
clickedDisclaimers.innerText = `Disclaimer - Index Clicked: ${disclaimerEvent.detail}`;
}
);
document.querySelector('body').appendChild(wrapper);
</script>
<script src="node_modules/@axa-ch-webhub-cloud/footer-small/dist/index.js"></script>
</body>
</html>Highlight a language (mark it as active)?
Set the class .m-footer-small__link--active to the language item children, that you want to highlight. Example:
<a slot="language-item" href="https://axa.ch/de/privatkunden.html" class="m-footer-small__link--active">