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 @@ +## 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 ( @@ -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} >
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 @@ + 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';