From 502f9ae7eb69ef7e1a049d34fb9d95da2f739f24 Mon Sep 17 00:00:00 2001
From: felix-ico <97440128+felix-ico@users.noreply.github.com>
Date: Fri, 22 Sep 2023 10:45:38 +0200
Subject: [PATCH] fix: allow setting href on footer logo (#2132)

* fix: allow setting href on footer logo

* docs: document new props
---
 .../components/src/components/telekom/logo/logo.tsx  |  2 +-
 .../src/components/telekom/telekom-footer/readme.md  |  9 +++++++++
 .../telekom-footer/telekom-footer-content.tsx        | 12 +++++++++++-
 .../components/telekom-footer/FooterContent.vue      | 10 ++++++++++
 .../telekom-footer/TelekomFooter.stories.mdx         |  2 ++
 5 files changed, 33 insertions(+), 2 deletions(-)
 create mode 100644 packages/storybook-vue/stories/components/telekom-footer/FooterContent.vue

diff --git a/packages/components/src/components/telekom/logo/logo.tsx b/packages/components/src/components/telekom/logo/logo.tsx
index 8c2f19385a..5e9abea1b8 100644
--- a/packages/components/src/components/telekom/logo/logo.tsx
+++ b/packages/components/src/components/telekom/logo/logo.tsx
@@ -93,7 +93,7 @@ export class Logo {
               window.scrollTo({ top: 0 });
             }
           }}
-          title={this.logoHideTitle ? '' : this.logoTitle}
+          title={this.logoHideTitle ? undefined : this.logoTitle}
           aria-describedby={this.logoAriaDescribedBy}
           aria-hidden={this.logoAriaHidden}
           tabindex={this.logoAriaHidden ? -1 : 0}
diff --git a/packages/components/src/components/telekom/telekom-footer/readme.md b/packages/components/src/components/telekom/telekom-footer/readme.md
index 0d382143df..239844318f 100644
--- a/packages/components/src/components/telekom/telekom-footer/readme.md
+++ b/packages/components/src/components/telekom/telekom-footer/readme.md
@@ -5,6 +5,15 @@
 <!-- Auto Generated Below -->
 
 
+## Properties
+
+| Property        | Attribute         | Description                        | Type      | Default                 |
+| --------------- | ----------------- | ---------------------------------- | --------- | ----------------------- |
+| `logoHideTitle` | `logo-hide-title` | (optional) set logo specific title | `boolean` | `false`                 |
+| `logoHref`      | `logo-href`       | (optional) Logo link               | `string`  | `'javascript:void(0);'` |
+| `logoTitle`     | `logo-title`      | (optional) set logo specific title | `string`  | `'Telekom Logo'`        |
+
+
 ## Shadow Parts
 
 | Part           | Description |
diff --git a/packages/components/src/components/telekom/telekom-footer/telekom-footer-content.tsx b/packages/components/src/components/telekom/telekom-footer/telekom-footer-content.tsx
index f67682f5f0..77661d8114 100644
--- a/packages/components/src/components/telekom/telekom-footer/telekom-footer-content.tsx
+++ b/packages/components/src/components/telekom/telekom-footer/telekom-footer-content.tsx
@@ -9,7 +9,7 @@
  * file, You can obtain one at https://mozilla.org/MPL/2.0/.
  */
 
-import { Component, h, Host } from '@stencil/core';
+import { Component, h, Host, Prop } from '@stencil/core';
 
 @Component({
   tag: 'scale-telekom-footer-content',
@@ -17,6 +17,13 @@ import { Component, h, Host } from '@stencil/core';
   shadow: true,
 })
 export class TelekomFooterContent {
+  /** (optional) Logo link */
+  @Prop() logoHref?: string = 'javascript:void(0);';
+  /** (optional) set logo specific title */
+  @Prop() logoTitle?: string = 'Telekom Logo';
+  /** (optional) set logo specific title */
+  @Prop() logoHideTitle?: boolean = false;
+
   render() {
     return (
       <Host>
@@ -32,6 +39,9 @@ export class TelekomFooterContent {
                     'var(--telekom-line-weight-highlight) solid var(--telekom-color-functional-focus-on-dark-background)',
                 }}
                 transparent
+                href={this.logoHref}
+                logoHideTitle={this.logoHideTitle}
+                logoTitle={this.logoHideTitle ? undefined : this.logoTitle}
               ></scale-logo>
             </div>
             <div part="body">
diff --git a/packages/storybook-vue/stories/components/telekom-footer/FooterContent.vue b/packages/storybook-vue/stories/components/telekom-footer/FooterContent.vue
new file mode 100644
index 0000000000..1233b0c04e
--- /dev/null
+++ b/packages/storybook-vue/stories/components/telekom-footer/FooterContent.vue
@@ -0,0 +1,10 @@
+<script>
+  export default {
+    name: 'FooterContent',
+    props: {
+        logoHref: { type: String, default: 'javascript:void(0);' },
+        logoTitle: { type: String, default: 'Telekom Logo' },
+        logoHideTitle: { type: Boolean, default: false }
+    }
+  };
+</script>
diff --git a/packages/storybook-vue/stories/components/telekom-footer/TelekomFooter.stories.mdx b/packages/storybook-vue/stories/components/telekom-footer/TelekomFooter.stories.mdx
index 0f4ddce5de..00e16a707a 100644
--- a/packages/storybook-vue/stories/components/telekom-footer/TelekomFooter.stories.mdx
+++ b/packages/storybook-vue/stories/components/telekom-footer/TelekomFooter.stories.mdx
@@ -2,10 +2,12 @@ import { Meta, ArgsTable, Story, Canvas } from '@storybook/addon-docs';
 import TelekomFooter from './Footer.vue';
 import TelekomFooterDataBackCompat from './TelekomFooterDataBackCompat.vue';
 import { footerNavigation } from './fixtures';
+import FooterContent from './FooterContent.vue';
 
 <Meta
   title="Components/Telekom Footer"
   component={TelekomFooter}
+  subcomponents={{'Telekom Footer Content': FooterContent}}
   argTypes={{
     type: {
       control: { type: 'select' },