From e56817f94f1847d34193a5c6602a149c2e957f59 Mon Sep 17 00:00:00 2001 From: Gery Hirschfeld Date: Fri, 24 Jan 2025 10:11:12 +0100 Subject: [PATCH] =?UTF-8?q?=F0=9F=90=9B=20fix(segment):=20color=20and=20na?= =?UTF-8?q?vbar=20brand=20logo=20clickable=20(#1582)?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit * fix(segment): adjust disabled icon color * feat(navbar): add a11y label and clickable logo --- .changeset/forty-rats-watch.md | 5 +++ .changeset/friendly-moose-camp.md | 5 +++ packages/core/src/components.d.ts | 25 ++++++++++++ .../core/src/components/bal-icon/bal-icon.tsx | 1 + .../components/bal-icon/bal-icon.vars.sass | 2 +- .../bal-navbar-brand/bal-navbar-brand.i18n.ts | 38 ++++++++++++++++++ .../bal-navbar-brand/bal-navbar-brand.tsx | 40 +++++++++++++++++-- 7 files changed, 112 insertions(+), 4 deletions(-) create mode 100644 .changeset/forty-rats-watch.md create mode 100644 .changeset/friendly-moose-camp.md create mode 100644 packages/core/src/components/bal-navbar/bal-navbar-brand/bal-navbar-brand.i18n.ts diff --git a/.changeset/forty-rats-watch.md b/.changeset/forty-rats-watch.md new file mode 100644 index 0000000000..19a2479676 --- /dev/null +++ b/.changeset/forty-rats-watch.md @@ -0,0 +1,5 @@ +--- +'@baloise/ds-core': minor +--- + +**navbar**: add a11y label for logo and make it clickable diff --git a/.changeset/friendly-moose-camp.md b/.changeset/friendly-moose-camp.md new file mode 100644 index 0000000000..a572401b7c --- /dev/null +++ b/.changeset/friendly-moose-camp.md @@ -0,0 +1,5 @@ +--- +'@baloise/ds-core': patch +--- + +**segment**: adjust icon color in disable mode to dark grey diff --git a/packages/core/src/components.d.ts b/packages/core/src/components.d.ts index f4011538b8..e212e5c733 100644 --- a/packages/core/src/components.d.ts +++ b/packages/core/src/components.d.ts @@ -160,6 +160,10 @@ export namespace Components { * A11y attributes for the native button element. */ "aria"?: BalProps.BalButtonAria; + /** + * If `true` the button is a popup. + */ + "balPopup": any; /** * The color to use from your application's color palette. */ @@ -2025,6 +2029,7 @@ export namespace Components { * Defines if the logo animation should be active */ "animated": boolean; + "configChanged": (state: BalConfigState) => Promise; /** * Link of the logo / title. */ @@ -2034,6 +2039,14 @@ export namespace Components { * Src to display a logo -> replaces the default Baloise Logo */ "logo"?: string; + /** + * If `true` the logo is rendered as a button + */ + "logoClickable": boolean; + /** + * Defines the label of the logo + */ + "logoLabel"?: string; /** * Size of the logo SVG */ @@ -5226,6 +5239,10 @@ declare namespace LocalJSX { * A11y attributes for the native button element. */ "aria"?: BalProps.BalButtonAria; + /** + * If `true` the button is a popup. + */ + "balPopup"?: any; /** * The color to use from your application's color palette. */ @@ -7178,6 +7195,14 @@ declare namespace LocalJSX { * Src to display a logo -> replaces the default Baloise Logo */ "logo"?: string; + /** + * If `true` the logo is rendered as a button + */ + "logoClickable"?: boolean; + /** + * Defines the label of the logo + */ + "logoLabel"?: string; /** * Size of the logo SVG */ diff --git a/packages/core/src/components/bal-icon/bal-icon.tsx b/packages/core/src/components/bal-icon/bal-icon.tsx index 7bfa69d13e..c3f71cee4e 100644 --- a/packages/core/src/components/bal-icon/bal-icon.tsx +++ b/packages/core/src/components/bal-icon/bal-icon.tsx @@ -144,6 +144,7 @@ export class Icon implements BalConfigObserver, BalElementStateInfo { 'blue', 'grey', 'grey-light', + 'grey-dark', 'danger', 'danger-dark', 'danger-darker', diff --git a/packages/core/src/components/bal-icon/bal-icon.vars.sass b/packages/core/src/components/bal-icon/bal-icon.vars.sass index 3403e7465f..1760b19619 100644 --- a/packages/core/src/components/bal-icon/bal-icon.vars.sass +++ b/packages/core/src/components/bal-icon/bal-icon.vars.sass @@ -25,7 +25,7 @@ // icon colors --bal-icon-color-grey: var(--bal-color-grey-5) --bal-icon-color-grey-light: var(--bal-color-border-grey-dark) - --bal-icon-color-grey-dark: var(--bal-color-grey-dark) + --bal-icon-color-grey-dark: var(--bal-color-grey-6) --bal-icon-color-success: var(--bal-color-success) --bal-icon-color-success-dark: var(--bal-color-success-5) --bal-icon-color-success-darker: var(--bal-color-success-6) diff --git a/packages/core/src/components/bal-navbar/bal-navbar-brand/bal-navbar-brand.i18n.ts b/packages/core/src/components/bal-navbar/bal-navbar-brand/bal-navbar-brand.i18n.ts new file mode 100644 index 0000000000..e974da9f6a --- /dev/null +++ b/packages/core/src/components/bal-navbar/bal-navbar-brand/bal-navbar-brand.i18n.ts @@ -0,0 +1,38 @@ +import { I18n } from '../../../interfaces' + +export interface I18nBalNavbarBrand { + logoButtonLabel: string +} + +export const i18nBalNavbarBrand: I18n = { + en: { + logoButtonLabel: 'To Homepage', + }, + fr: { + logoButtonLabel: 'Vers la page d’accueil', + }, + it: { + logoButtonLabel: 'Alla pagina principale', + }, + nl: { + logoButtonLabel: 'Naar de startpagina', + }, + es: { + logoButtonLabel: 'A la página principal', + }, + pt: { + logoButtonLabel: 'Para a página inicial', + }, + sv: { + logoButtonLabel: 'Till startsidan', + }, + fi: { + logoButtonLabel: 'Etusivulle', + }, + de: { + logoButtonLabel: 'Zur Startseite', + }, + pl: { + logoButtonLabel: 'Na stronę główną', + }, +} diff --git a/packages/core/src/components/bal-navbar/bal-navbar-brand/bal-navbar-brand.tsx b/packages/core/src/components/bal-navbar/bal-navbar-brand/bal-navbar-brand.tsx index aef2c0c7b5..4bf1352e68 100644 --- a/packages/core/src/components/bal-navbar/bal-navbar-brand/bal-navbar-brand.tsx +++ b/packages/core/src/components/bal-navbar/bal-navbar-brand/bal-navbar-brand.tsx @@ -1,8 +1,10 @@ -import { Component, Element, h, Host, Prop, State, Event, EventEmitter } from '@stencil/core' +import { Component, Element, h, Host, Prop, State, Event, EventEmitter, Method } from '@stencil/core' import { BEM } from '../../../utils/bem' import { BalScrollHandler } from '../../../utils/scroll' import { balBrowser } from '../../../utils/browser' -import { wait, waitAfterFramePaint, waitForRequestIdleCallback } from '../../../utils/helpers' +import { wait } from '../../../utils/helpers' +import { i18nBalNavbarBrand } from './bal-navbar-brand.i18n' +import { BalConfigState, BalLanguage, defaultConfig, ListenToConfig } from '../../../utils/config' @Component({ tag: 'bal-navbar-brand', @@ -12,6 +14,7 @@ export class NavbarBrand { @Element() el!: HTMLElement + @State() language: BalLanguage = defaultConfig.language @State() isMenuActive = false /** @@ -19,6 +22,16 @@ export class NavbarBrand { */ @Prop() href?: string = '' + /** + * If `true` the logo is rendered as a button + */ + @Prop() logoClickable = false + + /** + * Defines the label of the logo + */ + @Prop() logoLabel?: string + /** * Specifies where to display the linked URL. * Only applies when an `href` is provided. @@ -83,6 +96,15 @@ export class NavbarBrand { this.bodyScrollHandler.disconnect() } + /** + * @internal define config for the component + */ + @Method() + @ListenToConfig() + async configChanged(state: BalConfigState): Promise { + this.language = state.language + } + async resetIsMenuActive(ev: MediaQueryListEvent) { if (ev.matches && !this.simple) { this.toggle(false) @@ -131,6 +153,8 @@ export class NavbarBrand { ) + const logoLabel = this.logoLabel ? this.logoLabel : i18nBalNavbarBrand[this.language].logoButtonLabel + return ( {this.href ? ( - this.balNavigate.emit(ev)}> + this.balNavigate.emit(ev)} + > {logoTemplate} + ) : this.logoClickable ? ( + ) : ( logoTemplate )}