diff --git a/packages/components/src/components/telekom/logo/logo-svg.tsx b/packages/components/src/components/telekom/logo/logo-svg.tsx index a4f8581a63..acae19d8d9 100644 --- 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 index c409c8c76c..1f4c1c840c 100644 --- 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 index 69295f7f28..3c9e5d1d75 100644 --- 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` | **[DEPRECATED]** (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` | ## Shadow Parts diff --git a/packages/components/src/components/telekom/telekom-footer-extended-navigation/readme.md b/packages/components/src/components/telekom/telekom-footer-extended-navigation/readme.md index ad0d612b1d..138035adb5 100644 --- a/packages/components/src/components/telekom/telekom-footer-extended-navigation/readme.md +++ b/packages/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 index dba34361ae..c5fc6bd724 100644 --- 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 index d6eba50334..708b40341d 100644 --- 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 {
- +
diff --git a/packages/components/src/components/telekom/telekom-nav-item/readme.md b/packages/components/src/components/telekom/telekom-nav-item/readme.md index 20aee066eb..37a83a5320 100644 --- 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/packages/storybook-vue/stories/components/beta-brand-header-navigation/BrandHeader.stories.mdx b/packages/storybook-vue/stories/components/beta-brand-header-navigation/BrandHeader.stories.mdx index 41a9e51b31..3acbd23872 100644 --- a/packages/storybook-vue/stories/components/beta-brand-header-navigation/BrandHeader.stories.mdx +++ b/packages/storybook-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 index 4dcd9af55c..cfc737b6bc 100644 --- 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/packages/storybook-vue/stories/components/beta-brand-header-navigation/TelekomHeaderTemplate.vue b/packages/storybook-vue/stories/components/beta-brand-header-navigation/TelekomHeaderTemplate.vue index 61facfcc6c..a0032257ff 100644 --- a/packages/storybook-vue/stories/components/beta-brand-header-navigation/TelekomHeaderTemplate.vue +++ b/packages/storybook-vue/stories/components/beta-brand-header-navigation/TelekomHeaderTemplate.vue @@ -1,7 +1,15 @@