fix(telekom-header): allow link for logo (#1762)

telekom · May 3, 2023 · 5dd544a · 5dd544a
1 parent 9d7f5b3
commit 5dd544a
Show file tree

Hide file tree

Showing 10 changed files with 69 additions and 34 deletions.
diff --git a/packages/components/src/components/telekom/logo/logo-svg.tsx b/packages/components/src/components/telekom/logo/logo-svg.tsx
@@ -41,7 +41,7 @@ export class LogoSvg {
   @Prop() color?: string = 'magenta';
   @Prop() innerRole?: 'link' | 'img' = 'img';
   @Prop() focusable: boolean = true;
-  /** (optional) When using the icon standalone, make it meaningful for accessibility */
+  /** @deprecated (optional) When using the icon standalone, make it meaningful for accessibility */
   @Prop() accessibilityTitle?: string;
   /** (optional) When using the icon standalone, make it meaningful for accessibility */
   @Prop() logoTitle?: string;

diff --git a/packages/components/src/components/telekom/logo/logo.tsx b/packages/components/src/components/telekom/logo/logo.tsx
@@ -51,7 +51,9 @@ export class Logo {
   @Prop() logoTitle?: string = 'Telekom Logo';
   /** (optional) Hide all logo related titles */
   @Prop() logoHideTitle?: boolean;
+  /** FIXME is this actually working? probably not because of shadow DOM? */
   @Prop() logoAriaDescribedBy?: string;
+  /** FIXME this is also probably not working properly, see below (it needs a string value) */
   @Prop() logoAriaHidden?: boolean = false;
 
   componentDidRender() {

diff --git a/packages/components/src/components/telekom/logo/readme.md b/packages/components/src/components/telekom/logo/readme.md
@@ -7,15 +7,15 @@
 
 ## Properties
 
-| Property             | Attribute             | Description                                                                     | Type              | Default     |
-| -------------------- | --------------------- | ------------------------------------------------------------------------------- | ----------------- | ----------- |
-| `accessibilityTitle` | `accessibility-title` | (optional) When using the icon standalone, make it meaningful for accessibility | `string`          | `undefined` |
-| `color`              | `color`               | (optional) Sets the icon color via the `fill` attribute                         | `string`          | `'magenta'` |
-| `focusable`          | `focusable`           |                                                                                 | `boolean`         | `true`      |
-| `innerRole`          | `inner-role`          |                                                                                 | `"img" \| "link"` | `'img'`     |
-| `language`           | `language`            | (optional) The languages for the Text behind the Logo                           | `string`          | `'en'`      |
-| `logoHideTitle`      | `logo-hide-title`     | (optional) Hide all logo related titles                                         | `boolean`         | `undefined` |
-| `logoTitle`          | `logo-title`          | (optional) When using the icon standalone, make it meaningful for accessibility | `string`          | `undefined` |
+| Property             | Attribute             | Description                                                                                                                               | Type              | Default     |
+| -------------------- | --------------------- | ----------------------------------------------------------------------------------------------------------------------------------------- | ----------------- | ----------- |
+| `accessibilityTitle` | `accessibility-title` | <span style="color:red">**[DEPRECATED]**</span> (optional) When using the icon standalone, make it meaningful for accessibility<br/><br/> | `string`          | `undefined` |
+| `color`              | `color`               | (optional) Sets the icon color via the `fill` attribute                                                                                   | `string`          | `'magenta'` |
+| `focusable`          | `focusable`           |                                                                                                                                           | `boolean`         | `true`      |
+| `innerRole`          | `inner-role`          |                                                                                                                                           | `"img" \| "link"` | `'img'`     |
+| `language`           | `language`            | (optional) The languages for the Text behind the Logo                                                                                     | `string`          | `'en'`      |
+| `logoHideTitle`      | `logo-hide-title`     | (optional) Hide all logo related titles                                                                                                   | `boolean`         | `undefined` |
+| `logoTitle`          | `logo-title`          | (optional) When using the icon standalone, make it meaningful for accessibility                                                           | `string`          | `undefined` |
 
 
 ## Shadow Parts

diff --git a/.../components/src/components/telekom/telekom-footer-extended-navigation/readme.md b/.../components/src/components/telekom/telekom-footer-extended-navigation/readme.md
@@ -16,11 +16,12 @@
 
 ## Shadow Parts
 
-| Part                  | Description |
-| --------------------- | ----------- |
-| `"heading"`           |             |
-| `"heading-button"`    |             |
-| `"heading-container"` |             |
+| Part                    | Description |
+| ----------------------- | ----------- |
+| `"heading"`             |             |
+| `"heading-button"`      |             |
+| `"heading-container"`   |             |
+| `"heading-with-button"` |             |
 
 
 ## Dependencies

diff --git a/packages/components/src/components/telekom/telekom-header/readme.md b/packages/components/src/components/telekom/telekom-header/readme.md
@@ -7,16 +7,19 @@
 
 ## Properties
 
-| Property                   | Attribute                      | Description | Type     | Default                      |
-| -------------------------- | ------------------------------ | ----------- | -------- | ---------------------------- |
-| `appName`                  | `app-name`                     |             | `string` | `undefined`                  |
-| `appNameClick`             | `app-name-click`               |             | `any`    | `undefined`                  |
-| `appNameLink`              | `app-name-link`                |             | `string` | `undefined`                  |
-| `langSwitcherAriaLabel`    | `lang-switcher-aria-label`     |             | `string` | `'Language switcher'`        |
-| `mainNavAriaLabel`         | `main-nav-aria-label`          |             | `string` | `'Main navigation'`          |
-| `metaNavAriaLabel`         | `meta-nav-aria-label`          |             | `string` | `'Meta navigation'`          |
-| `metaNavExternalAriaLabel` | `meta-nav-external-aria-label` |             | `string` | `'External meta navigation'` |
-| `type`                     | `type`                         |             | `string` | `'default'`                  |
+| Property                   | Attribute                      | Description | Type      | Default                      |
+| -------------------------- | ------------------------------ | ----------- | --------- | ---------------------------- |
+| `appName`                  | `app-name`                     |             | `string`  | `undefined`                  |
+| `appNameClick`             | `app-name-click`               |             | `any`     | `undefined`                  |
+| `appNameLink`              | `app-name-link`                |             | `string`  | `undefined`                  |
+| `langSwitcherAriaLabel`    | `lang-switcher-aria-label`     |             | `string`  | `'Language switcher'`        |
+| `logoHideTitle`            | `logo-hide-title`              |             | `boolean` | `undefined`                  |
+| `logoHref`                 | `logo-href`                    |             | `string`  | `undefined`                  |
+| `logoTitle`                | `logo-title`                   |             | `string`  | `undefined`                  |
+| `mainNavAriaLabel`         | `main-nav-aria-label`          |             | `string`  | `'Main navigation'`          |
+| `metaNavAriaLabel`         | `meta-nav-aria-label`          |             | `string`  | `'Meta navigation'`          |
+| `metaNavExternalAriaLabel` | `meta-nav-external-aria-label` |             | `string`  | `'External meta navigation'` |
+| `type`                     | `type`                         |             | `string`  | `'default'`                  |
 
 
 ## Shadow Parts

diff --git a/packages/components/src/components/telekom/telekom-header/telekom-header.tsx b/packages/components/src/components/telekom/telekom-header/telekom-header.tsx
@@ -32,6 +32,9 @@ export class TelekomHeader {
   @Prop({ reflect: true }) appName?: string;
   @Prop() appNameLink?: string;
   @Prop() appNameClick?: any;
+  @Prop() logoHref?: string;
+  @Prop() logoTitle?: string;
+  @Prop() logoHideTitle?: boolean;
   @Prop() type: string = 'default';
   @Prop() metaNavAriaLabel?: string = 'Meta navigation';
   @Prop() metaNavExternalAriaLabel?: string = 'External meta navigation';
@@ -65,7 +68,13 @@ export class TelekomHeader {
           <div part="fixed-wrapper">
             <div part="container">
               <slot name="logo">
-                <scale-logo part="app-logo" variant="white"></scale-logo>
+                <scale-logo
+                  part="app-logo"
+                  variant="white"
+                  href={this.logoHref}
+                  logoTitle={this.logoTitle}
+                  logoHideTitle={this.logoHideTitle}
+                ></scale-logo>
               </slot>
 
               <div part="body">

diff --git a/packages/components/src/components/telekom/telekom-nav-item/readme.md b/packages/components/src/components/telekom/telekom-nav-item/readme.md
@@ -7,12 +7,11 @@
 
 ## Properties
 
-| Property       | Attribute        | Description | Type      | Default     |
-| -------------- | ---------------- | ----------- | --------- | ----------- |
-| `active`       | `active`         |             | `boolean` | `false`     |
-| `navItemTitle` | `nav-item-title` |             | `string`  | `undefined` |
-| `role`         | `role`           |             | `string`  | `'none'`    |
-| `variant`      | `variant`        |             | `string`  | `undefined` |
+| Property  | Attribute | Description | Type      | Default     |
+| --------- | --------- | ----------- | --------- | ----------- |
+| `active`  | `active`  |             | `boolean` | `false`     |
+| `role`    | `role`    |             | `string`  | `'none'`    |
+| `variant` | `variant` |             | `string`  | `undefined` |
 
 
 ## Dependencies

diff --git a/...ook-vue/stories/components/beta-brand-header-navigation/BrandHeader.stories.mdx b/...ook-vue/stories/components/beta-brand-header-navigation/BrandHeader.stories.mdx
@@ -55,6 +55,7 @@ export const Template = (args, { argTypes }) => ({
   props: {
     ...TelekomHeaderTemplate.props,
     storyName: String,
+    // TODO remove these from here since they're included already in TelekomHeaderTemplate
     mainNavAriaLabel: 'Main Navigation',
     metaNavAriaLabel: 'Meta Navigation',
     metaNavExternalAriaLabel: 'External Meta Navigation',
@@ -65,10 +66,13 @@ export const Template = (args, { argTypes }) => ({
       :story-name="storyName"
       :app-name="appName"
       :app-name-link="appNameLink"
+      :logo-href="logoHref"
+      :logo-title="logoTitle"
+      :logo-hide-title="logoHideTitle"
       :meta-nav-aria-label="metaNavAriaLabel" 
       :meta-nav-external-aria-label="metaNavExternalAriaLabel"
       :lang-switcher-aria-label="langSwitcherAriaLabel"
-      :main-nav-aria-label="mainNavAriaLabel"      
+      :main-nav-aria-label="mainNavAriaLabel"
     />
   `,
 });

diff --git a/packages/storybook-vue/stories/components/beta-brand-header-navigation/TelekomHeader.vue b/packages/storybook-vue/stories/components/beta-brand-header-navigation/TelekomHeader.vue
@@ -3,6 +3,9 @@
     :app-name="appName"
     :app-name-link="appNameLink"
     :app-name-click="appNameClick"
+    :logo-ref="logoHref"
+    :logo-title="logoTitle"
+    :logo-hide-title="logoHideTitle"
     :meta-nav-aria-label="metaNavAriaLabel" 
     :meta-nav-external-aria-label="metaNavExternalAriaLabel"
     :lang-switcher-aria-label="langSwitcherAriaLabel"
@@ -23,6 +26,9 @@ export default {
     appName: String,
     appNameLink: String,
     appNameClick: Function,
+    logoHref: String,
+    logoTitle: String,
+    logoHideTitle: String,
     metaNavAriaLabel: String,
     metaNavExternalAriaLabel: String,
     langSwitcherAriaLabel: String,

diff --git a/...s/storybook-vue/stories/components/beta-brand-header-navigation/TelekomHeaderTemplate.vue b/...s/storybook-vue/stories/components/beta-brand-header-navigation/TelekomHeaderTemplate.vue
@@ -1,7 +1,15 @@
 <template>
   <div class="wrapper">
     <scale-telekom-app-shell>
-      <component slot="header" :is="storyName" :app-name="appName" :app-name-link="appNameLink"></component>
+      <component
+        slot="header"
+        :is="storyName"
+        :app-name="appName"
+        :app-name-link="appNameLink"
+        :logo-href="logoHref"
+        :logo-title="logoTitle"
+        :logo-hide-title="logoHideTitle"
+      ></component>
       <!-- content goes here -->
     </scale-telekom-app-shell>
   </div>
@@ -26,6 +34,9 @@ export default {
     appName: String,
     appNameLink: String,
     appNameClick: Function,
+    logoHref: String,
+    logoTitle: String,
+    logoHideTitle: String,
     storyName: String,
   },
 };