✨ feat(bal-footer): make footer links customizable

.changeset/popular-carpets-hunt.md

@@ -0,0 +1,5 @@
+---
+'@baloise/ds-core': minor
+---
+
+**footer**: Introduce overrideLinks property to enable consumers to change the legal links in the footer

e2e/cypress/component/bal-footer.cy.ts

@@ -0,0 +1,13 @@
+import { Components } from '../../generated'
+
+describe('bal-footer', () => {
+  it('should contain custom links', () => {
+    cy.mount<Components.BalFooter, HTMLBalFooterElement>(`<bal-footer></bal-footer>`, {
+      props: {
+        overrideLinks: [{ label: 'Test Link', link: 'https://www.baloise.ch' }],
+      },
+    })
+    cy.get('bal-footer').contains('Test Link')
+    cy.get('bal-footer').should('not.contain', 'Datenschutz')
+  })
+})

packages/core/src/components.d.ts

@@ -11,6 +11,7 @@ import { BalCarouselItemData, BalSlide } from "./components/bal-carousel/bal-car
 import { BalCheckboxOption } from "./components/bal-checkbox/bal-checkbox.type";
 import { BalAriaForm } from "./utils/form";
 import { BalOption } from "./utils/dropdown";
+import { FooterLink } from "@baloise/web-app-utils";
 import { OverlayEventDetail } from "./components/bal-modal/bal-modal.type";
 import { PopoverPresentOptions } from "./components/bal-popover/bal-popover";
 import { BalRadioOption } from "./components/bal-radio/bal-radio.type";
@@ -23,6 +24,7 @@ export { BalCarouselItemData, BalSlide } from "./components/bal-carousel/bal-car
 export { BalCheckboxOption } from "./components/bal-checkbox/bal-checkbox.type";
 export { BalAriaForm } from "./utils/form";
 export { BalOption } from "./utils/dropdown";
+export { FooterLink } from "@baloise/web-app-utils";
 export { OverlayEventDetail } from "./components/bal-modal/bal-modal.type";
 export { PopoverPresentOptions } from "./components/bal-popover/bal-popover";
 export { BalRadioOption } from "./components/bal-radio/bal-radio.type";
@@ -106,6 +108,10 @@ export namespace Components {
           * The color to use from your application's color palette.
          */
         "color": BalProps.BalButtonColor;
+        /**
+          * If `true` the button is aligned over the whole width
+         */
+        "expanded": boolean;
         /**
           * BalIcon of the open trigger button
          */
@@ -1203,6 +1209,10 @@ export namespace Components {
           * If `true` the legal Baloise links will be hidden.
          */
         "hideLinks": boolean;
+        /**
+          * If provided, the footer links will be overridden.
+         */
+        "overrideLinks": FooterLink[] | undefined;
         /**
           * If `true` the social media links will be shown.
          */
@@ -5128,6 +5138,10 @@ declare namespace LocalJSX {
           * The color to use from your application's color palette.
          */
         "color"?: BalProps.BalButtonColor;
+        /**
+          * If `true` the button is aligned over the whole width
+         */
+        "expanded"?: boolean;
         /**
           * BalIcon of the open trigger button
          */
@@ -6275,6 +6289,10 @@ declare namespace LocalJSX {
           * If `true` the legal Baloise links will be hidden.
          */
         "hideLinks"?: boolean;
+        /**
+          * If provided, the footer links will be overridden.
+         */
+        "overrideLinks"?: FooterLink[] | undefined;
         /**
           * If `true` the social media links will be shown.
          */

packages/core/src/components/bal-footer/bal-footer.tsx

@@ -44,6 +44,11 @@ export class Footer implements BalConfigObserver, Loggable {
    */
   @Prop() hideLinks = false
 
+  /**
+   * If provided, the footer links will be overridden.
+   */
+  @Prop() overrideLinks: FooterLink[] | undefined = undefined
+
   /**
    * If `true` the social media links will be shown.
    */
@@ -94,7 +99,9 @@ export class Footer implements BalConfigObserver, Loggable {
   }
 
   private updateFooterLinks() {
-    if (!this.hideLinks && (this.region === 'CH' || this.region === 'DE')) {
+    if (this.overrideLinks) {
+      this.links = this.overrideLinks
+    } else if (!this.hideLinks && (this.region === 'CH' || this.region === 'DE')) {
       // The following footer links only apply to swiss and german applications
       const region = this.region
       rIC(() => {

packages/core/src/components/bal-footer/test/bal-footer.cy.html

@@ -23,6 +23,18 @@ <h2 class="title text-xx-large">All variations</h2>
           <div class="container">Footer</div>
         </bal-footer>
       </section>
+
+      <h2 class="title text-xx-large">Override links</h2>
+      <section>
+        <bal-footer id="override-links-footer"></bal-footer>
+      </section>
     </div>
   </body>
+  <script>
+    const overrideLinksFooter = document.getElementById('override-links-footer')
+    overrideLinksFooter.overrideLinks = [
+      { label: 'Test Link', link: 'https://baloise.com' },
+      { label: 'Second Test Link', link: 'https://baloise.ch' },
+    ]
+  </script>
 </html>