fix: allow setting href on footer logo (#2132)

* fix: allow setting href on footer logo * docs: document new props
telekom · Sep 22, 2023 · 502f9ae · 502f9ae
1 parent df45405
commit 502f9ae
Show file tree

Hide file tree

Showing 5 changed files with 33 additions and 2 deletions.
diff --git 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
@@ -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
@@ -9,14 +9,21 @@
  * 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',
   styleUrl: 'telekom-footer-content.css',
   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
@@ -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
@@ -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' },