diff --git a/.changeset/late-baboons-compete.md b/.changeset/late-baboons-compete.md index 19a375ce..cf9a3dd9 100644 --- a/.changeset/late-baboons-compete.md +++ b/.changeset/late-baboons-compete.md @@ -2,4 +2,4 @@ '@baloise/ds-core': patch --- -**devkit**: update +**devkit**: update diff --git a/docs/stories/development/02-upgrade/upgrade-guide.v16.stories.mdx b/docs/stories/development/02-upgrade/upgrade-guide.v16.stories.mdx index 3eb947f5..8c6d37b2 100644 --- a/docs/stories/development/02-upgrade/upgrade-guide.v16.stories.mdx +++ b/docs/stories/development/02-upgrade/upgrade-guide.v16.stories.mdx @@ -34,8 +34,13 @@ Updating from v15 to v16 Here is an overview of the breaking changes of the newly introduced version 16: - [Simplifying Our Package Names](#simplifying-our-package-name) -- [Standardizing Design Tokens](#standardizing-design-tokens) - [Components](#components) + - Button + - Navigation + +This change is recommended but can be done in a later stage: + +- [Standardizing Design Tokens](#standardizing-design-tokens) ## Simplifying Our Package Names @@ -121,6 +126,18 @@ ng generate @baloise/ds-devkit:up16 4. **Test Thoroughly:** After making these updates, thoroughly test your application to ensure that all functionalities work as expected. The manual process might be more prone to human error, so a comprehensive testing phase is crucial. +## Components + +Moreover, there are two breaking changes in the components section: + +### Button + +Properties `topRounded` and `bottomRounded` has been removed, due to not match the design criteria. + +### Navigation + +Component `bal-navigation` has been removed and replaced with `bal-nav` to improve performance and SEO. + ## Standardizing Design Tokens ### Why the Change? @@ -567,18 +584,6 @@ The spacing helpers have not been renamed only the responsive markers. -## Components - -Moreover, there are two breaking changes in the components section: - -### Button - -Properties `topRounded` and `bottomRounded` has been removed, due to not match the design criteria. - -### Navigation - -Component `bal-navigation` has been removed and replaced with `bal-nav` to improve performance and SEO. - ## Need Help Upgrading?​ If you need help upgrading, please create a [GitHub Upgrade Issue](https://github.com/baloise/design-system/issues/new/choose). diff --git a/e2e/cypress/e2e/a11y/bal-card.a11y.cy.ts b/e2e/cypress/e2e/a11y/bal-card.a11y.cy.ts new file mode 100644 index 00000000..fdd9979b --- /dev/null +++ b/e2e/cypress/e2e/a11y/bal-card.a11y.cy.ts @@ -0,0 +1,11 @@ +describe('bal-card', () => { + context('a11y', () => { + beforeEach(() => cy.platform('desktop').pageA11y('/components/bal-card/test/bal-card.a11y.html')) + + describe('have the AA standard', () => { + it('basic', () => { + cy.getByTestId('basic').testA11y() + }) + }) + }) +}) diff --git a/e2e/cypress/e2e/a11y/bal-content.a11y.cy.ts b/e2e/cypress/e2e/a11y/bal-content.a11y.cy.ts new file mode 100644 index 00000000..688a77b9 --- /dev/null +++ b/e2e/cypress/e2e/a11y/bal-content.a11y.cy.ts @@ -0,0 +1,11 @@ +describe('bal-content', () => { + context('a11y', () => { + beforeEach(() => cy.pageA11y('/components/bal-content/test/bal-content.a11y.html')) + + describe('have the AA standard', () => { + it('basic', () => { + cy.getByTestId('basic').testA11y() + }) + }) + }) +}) diff --git a/e2e/cypress/e2e/a11y/bal-field.a11y.cy.ts b/e2e/cypress/e2e/a11y/bal-field.a11y.cy.ts new file mode 100644 index 00000000..112dac60 --- /dev/null +++ b/e2e/cypress/e2e/a11y/bal-field.a11y.cy.ts @@ -0,0 +1,20 @@ +describe('bal-field', () => { + context('a11y', () => { + beforeEach(() => cy.platform('desktop').pageA11y('/components/bal-field/test/bal-field.a11y.html')) + + describe('have the AA standard', () => { + it('basic', () => { + cy.getByTestId('basic').testA11y() + }) + + it('states', () => { + cy.getByTestId('disabled').testA11y() + cy.getByTestId('invalid').testA11y() + }) + + it('horizontal', () => { + cy.getByTestId('horizontal').testA11y() + }) + }) + }) +}) diff --git a/e2e/cypress/e2e/a11y/bal-pagination.a11y.cy.ts b/e2e/cypress/e2e/a11y/bal-pagination.a11y.cy.ts new file mode 100644 index 00000000..0391c72e --- /dev/null +++ b/e2e/cypress/e2e/a11y/bal-pagination.a11y.cy.ts @@ -0,0 +1,19 @@ +describe('bal-pagination', () => { + context('a11y', () => { + beforeEach(() => cy.platform('desktop').pageA11y('/components/bal-pagination/test/bal-pagination.a11y.html')) + + describe('have the AA standard', () => { + it('pagination basic', () => { + cy.getByTestId('basic').testA11y() + }) + + it('pagination small', () => { + cy.getByTestId('small').testA11y() + }) + + it('pagination small with dots', () => { + cy.getByTestId('small-with-dots').testA11y() + }) + }) + }) +}) diff --git a/e2e/cypress/e2e/a11y/bal-progress-bar.a11y.cy.ts b/e2e/cypress/e2e/a11y/bal-progress-bar.a11y.cy.ts new file mode 100644 index 00000000..7c881e8e --- /dev/null +++ b/e2e/cypress/e2e/a11y/bal-progress-bar.a11y.cy.ts @@ -0,0 +1,11 @@ +describe('bal-progress-bar', () => { + context('a11y', () => { + beforeEach(() => cy.platform('desktop').pageA11y('/components/bal-progress-bar/test/bal-progress-bar.a11y.html')) + + describe('have the AA standard', () => { + it('basic', () => { + cy.getByTestId('basic').testA11y() + }) + }) + }) +}) diff --git a/e2e/cypress/e2e/a11y/bal-radio.a11y.cy.ts b/e2e/cypress/e2e/a11y/bal-radio.a11y.cy.ts new file mode 100644 index 00000000..773df06c --- /dev/null +++ b/e2e/cypress/e2e/a11y/bal-radio.a11y.cy.ts @@ -0,0 +1,20 @@ +describe('bal-radio', () => { + context('a11y', () => { + beforeEach(() => cy.platform('desktop').pageA11y('/components/bal-radio/test/bal-radio.a11y.html')) + + describe('have the AA standard', () => { + it('radio basic', () => { + cy.getByTestId('radio-basic').testA11y() + cy.getByTestId('basic-label-hidden').testA11y() + cy.getByTestId('disabled').testA11y() + cy.getByTestId('invalid').testA11y() + }) + + it('select button', () => { + cy.getByTestId('select-button-basic').testA11y() + cy.getByTestId('select-button-invalid').testA11y() + cy.getByTestId('select-button-disabled').testA11y() + }) + }) + }) +}) diff --git a/e2e/cypress/e2e/a11y/bal-spinner.a11y.cy.ts b/e2e/cypress/e2e/a11y/bal-spinner.a11y.cy.ts new file mode 100644 index 00000000..d860cb42 --- /dev/null +++ b/e2e/cypress/e2e/a11y/bal-spinner.a11y.cy.ts @@ -0,0 +1,11 @@ +describe('bal-spinner', () => { + context('a11y', () => { + beforeEach(() => cy.pageA11y('/components/bal-spinner/test/bal-spinner.a11y.html')) + + describe('have the AA standard', () => { + it('basic', () => { + cy.getByTestId('basic').testA11y() + }) + }) + }) +}) diff --git a/e2e/cypress/e2e/a11y/bal-steps.a11y.cy.ts b/e2e/cypress/e2e/a11y/bal-steps.a11y.cy.ts new file mode 100644 index 00000000..81e77822 --- /dev/null +++ b/e2e/cypress/e2e/a11y/bal-steps.a11y.cy.ts @@ -0,0 +1,11 @@ +describe('bal-steps', () => { + context('a11y', () => { + beforeEach(() => cy.platform('desktop').pageA11y('/components/bal-steps/test/bal-steps.a11y.html')) + + describe('have the AA standard', () => { + it('steps basic', () => { + cy.getByTestId('basic').testA11y() + }) + }) + }) +}) diff --git a/e2e/cypress/e2e/a11y/bal-tabs.a11y.cy.ts b/e2e/cypress/e2e/a11y/bal-tabs.a11y.cy.ts new file mode 100644 index 00000000..d48c221c --- /dev/null +++ b/e2e/cypress/e2e/a11y/bal-tabs.a11y.cy.ts @@ -0,0 +1,15 @@ +describe('bal-tabs', () => { + context('a11y', () => { + beforeEach(() => cy.platform('desktop').pageA11y('/components/bal-tabs/test/bal-tabs.a11y.html')) + + describe('have the AA standard', () => { + it('tabs basic', () => { + cy.getByTestId('basic').testA11y() + }) + + it('tabs vertical', () => { + cy.getByTestId('vertical').testA11y() + }) + }) + }) +}) diff --git a/e2e/cypress/e2e/visual/bal-nav-menu-flyout.visual.cy.ts b/e2e/cypress/e2e/visual/bal-nav-menu-flyout.visual.cy.ts index 17dd5695..a7cd112a 100644 --- a/e2e/cypress/e2e/visual/bal-nav-menu-flyout.visual.cy.ts +++ b/e2e/cypress/e2e/visual/bal-nav-menu-flyout.visual.cy.ts @@ -7,28 +7,28 @@ describe('bal-nav-menu-flyout', () => { .waitForDesignSystem() cy.testVisual('menu-flyout-fullhd', { - errorThreshold: 0.2, + errorThreshold: 0.3, capture: 'viewport', clip: balViewport['fullhd'], }) cy.platform('highDefinition') cy.testVisual('menu-flyout-highDefinition', { - errorThreshold: 0.2, + errorThreshold: 0.3, capture: 'viewport', clip: balViewport['highDefinition'], }) cy.platform('widescreen') cy.testVisual('menu-flyout-widescreen', { - errorThreshold: 0.2, + errorThreshold: 0.3, capture: 'viewport', clip: balViewport['widescreen'], }) cy.platform('desktop') cy.testVisual('menu-flyout-desktop', { - errorThreshold: 0.2, + errorThreshold: 0.3, capture: 'viewport', clip: balViewport['desktop'], }) @@ -40,14 +40,14 @@ describe('bal-nav-menu-flyout', () => { .waitForDesignSystem() cy.testVisual('menu-flyout-tablet', { - errorThreshold: 0.2, + errorThreshold: 0.3, capture: 'viewport', clip: balViewport['tablet'], }) cy.platform('mobile') cy.testVisual('menu-flyout-mobile', { - errorThreshold: 0.25, + errorThreshold: 0.3, capture: 'viewport', clip: balViewport['mobile'], }) diff --git a/e2e/cypress/snapshots/base/visual/bal-nav-part-2.visual.cy.ts/nav-touch-mobile-closed-bottom.png b/e2e/cypress/snapshots/base/visual/bal-nav-part-2.visual.cy.ts/nav-touch-mobile-closed-bottom.png index e5a64451..f09eaa75 100644 Binary files a/e2e/cypress/snapshots/base/visual/bal-nav-part-2.visual.cy.ts/nav-touch-mobile-closed-bottom.png and b/e2e/cypress/snapshots/base/visual/bal-nav-part-2.visual.cy.ts/nav-touch-mobile-closed-bottom.png differ diff --git a/e2e/cypress/support/commands.ts b/e2e/cypress/support/commands.ts index 7add6404..072dda72 100644 --- a/e2e/cypress/support/commands.ts +++ b/e2e/cypress/support/commands.ts @@ -79,8 +79,9 @@ declare global { } Cypress.Commands.add('pageA11y', (url: string) => { - cy.visit(url).platform('desktop').waitForDesignSystem() + cy.visit(url) cy.injectAxe() + cy.platform('desktop').waitForDesignSystem() }) Cypress.Commands.add('testA11y', { prevSubject: 'element' }, (subject, options = null) => { diff --git a/e2e/cypress/support/e2e.ts b/e2e/cypress/support/e2e.ts index 638194d5..2c0c3e0d 100644 --- a/e2e/cypress/support/e2e.ts +++ b/e2e/cypress/support/e2e.ts @@ -14,7 +14,7 @@ // *********************************************************** // Import commands.js using ES2015 syntax: -import './commands' +import 'cypress-axe' import 'cypress-file-upload' import { addCompareSnapshotCommand } from './lib/visuals' @@ -36,3 +36,5 @@ Cypress.Screenshot.defaults({ } }, }) + +import './commands' diff --git a/executors.json b/executors.json new file mode 100644 index 00000000..a34a5714 --- /dev/null +++ b/executors.json @@ -0,0 +1,9 @@ +{ + "executors": { + "test-ui": { + "implementation": "./lib/nx/src/executors/test-ui/executor", + "schema": "./lib/nx/src/executors/test-ui/schema.json", + "description": "test-ui executor" + } + } +} diff --git a/libs/nx/executors.json b/libs/nx/executors.json index 179492f6..e60983e0 100644 --- a/libs/nx/executors.json +++ b/libs/nx/executors.json @@ -44,6 +44,11 @@ "implementation": "./src/executors/create-angular/executor", "schema": "./src/executors/create-angular/schema.json", "description": "create-angular executor" + }, + "test-ui": { + "implementation": "./src/executors/test-ui/executor", + "schema": "./src/executors/test-ui/schema.json", + "description": "test-ui executor" } } } diff --git a/libs/nx/project.json b/libs/nx/project.json index 100004f0..bd196cf8 100644 --- a/libs/nx/project.json +++ b/libs/nx/project.json @@ -11,6 +11,12 @@ "reportsDirectory": "../../coverage/libs/nx" } }, + "test-ui": { + "executor": "@baloise/ds-nx:test-ui", + "options": { + "projectRoot": "{projectRoot}" + } + }, "build": { "executor": "@nx/js:tsc", "outputs": ["{options.outputPath}"], diff --git a/libs/nx/src/executors/test-ui/executor.ts b/libs/nx/src/executors/test-ui/executor.ts new file mode 100644 index 00000000..de4232d2 --- /dev/null +++ b/libs/nx/src/executors/test-ui/executor.ts @@ -0,0 +1,14 @@ +import { join } from 'path' +import { runCommand } from '../utils' +import { TestUiExecutorSchema } from './schema' + +export default async function runExecutor(options: TestUiExecutorSchema) { + try { + await runCommand('npx vitest --ui', join(process.cwd(), options.projectRoot)) + } catch (error) { + console.error(error) + return { success: false } + } + + return { success: true } +} diff --git a/libs/nx/src/executors/test-ui/schema.d.ts b/libs/nx/src/executors/test-ui/schema.d.ts new file mode 100644 index 00000000..233877a7 --- /dev/null +++ b/libs/nx/src/executors/test-ui/schema.d.ts @@ -0,0 +1,3 @@ +export interface TestUiExecutorSchema { + projectRoot: string +} // eslint-disable-line diff --git a/libs/nx/src/executors/test-ui/schema.json b/libs/nx/src/executors/test-ui/schema.json new file mode 100644 index 00000000..fca68be8 --- /dev/null +++ b/libs/nx/src/executors/test-ui/schema.json @@ -0,0 +1,9 @@ +{ + "$schema": "https://json-schema.org/schema", + "version": 2, + "title": "TestUi executor", + "description": "", + "type": "object", + "properties": {}, + "required": [] +} diff --git a/libs/output-target-angular/project.json b/libs/output-target-angular/project.json index be86d861..308a5f90 100644 --- a/libs/output-target-angular/project.json +++ b/libs/output-target-angular/project.json @@ -20,6 +20,12 @@ "options": { "reportsDirectory": "../../coverage/libs/output-target-angular" } + }, + "test-ui": { + "executor": "@baloise/ds-nx:test-ui", + "options": { + "projectRoot": "{projectRoot}" + } } }, "tags": ["scope:release", "type:lib"] diff --git a/libs/output-target-react/project.json b/libs/output-target-react/project.json index 538b944c..21a3af09 100644 --- a/libs/output-target-react/project.json +++ b/libs/output-target-react/project.json @@ -20,6 +20,12 @@ "options": { "reportsDirectory": "../../coverage/libs/output-target-react" } + }, + "test-ui": { + "executor": "@baloise/ds-nx:test-ui", + "options": { + "projectRoot": "{projectRoot}" + } } }, "tags": ["scope:release", "type:lib"] diff --git a/libs/output-target-vue/project.json b/libs/output-target-vue/project.json index 84f5e977..d71f749c 100644 --- a/libs/output-target-vue/project.json +++ b/libs/output-target-vue/project.json @@ -20,6 +20,12 @@ "options": { "reportsDirectory": "../../coverage/libs/output-target-vue" } + }, + "test-ui": { + "executor": "@baloise/ds-nx:test-ui", + "options": { + "projectRoot": "{projectRoot}" + } } }, "tags": ["scope:release", "type:lib"] diff --git a/package-lock.json b/package-lock.json index 6b4d4943..ba6ab9ad 100644 --- a/package-lock.json +++ b/package-lock.json @@ -69,6 +69,7 @@ "@typescript-eslint/utils": "~6.13.2", "@vitejs/plugin-react-swc": "~3.5.0", "@vitejs/plugin-vue": "~5.0.3", + "@vitest/ui": "^1.3.1", "@vue/eslint-config-prettier": "7.1.0", "@vue/eslint-config-typescript": "~11.0.3", "@vue/test-utils": "~2.4.1", @@ -10853,6 +10854,12 @@ "node": ">=14" } }, + "node_modules/@polka/url": { + "version": "1.0.0-next.25", + "resolved": "https://registry.npmjs.org/@polka/url/-/url-1.0.0-next.25.tgz", + "integrity": "sha512-j7P6Rgr3mmtdkeDGTe0E/aYyWEWVtc5yFXtHCRHs28/jptDEWfaVOc5T7cblqy1XKPPfCxJc/8DwQ5YgLOZOVQ==", + "devOptional": true + }, "node_modules/@popperjs/core": { "version": "2.11.8", "resolved": "https://registry.npmjs.org/@popperjs/core/-/core-2.11.8.tgz", @@ -17765,6 +17772,43 @@ "url": "https://opencollective.com/vitest" } }, + "node_modules/@vitest/ui": { + "version": "1.3.1", + "resolved": "https://registry.npmjs.org/@vitest/ui/-/ui-1.3.1.tgz", + "integrity": "sha512-2UrFLJ62c/eJGPHcclstMKlAR7E1WB1ITe1isuowEPJJHi3HfqofvsUqQ1cGrEF7kitG1DJuwURUA3HLDtQkXA==", + "devOptional": true, + "dependencies": { + "@vitest/utils": "1.3.1", + "fast-glob": "^3.3.2", + "fflate": "^0.8.1", + "flatted": "^3.2.9", + "pathe": "^1.1.1", + "picocolors": "^1.0.0", + "sirv": "^2.0.4" + }, + "funding": { + "url": "https://opencollective.com/vitest" + }, + "peerDependencies": { + "vitest": "1.3.1" + } + }, + "node_modules/@vitest/ui/node_modules/fast-glob": { + "version": "3.3.2", + "resolved": "https://registry.npmjs.org/fast-glob/-/fast-glob-3.3.2.tgz", + "integrity": "sha512-oX2ruAFQwf/Orj8m737Y5adxDQO0LAB7/S5MnxCdTNDd4p6BsyIVsv9JQsATbTSq8KHRpLwIHbVlUNatxd+1Ow==", + "devOptional": true, + "dependencies": { + "@nodelib/fs.stat": "^2.0.2", + "@nodelib/fs.walk": "^1.2.3", + "glob-parent": "^5.1.2", + "merge2": "^1.3.0", + "micromatch": "^4.0.4" + }, + "engines": { + "node": ">=8.6.0" + } + }, "node_modules/@vitest/utils": { "version": "1.3.1", "resolved": "https://registry.npmjs.org/@vitest/utils/-/utils-1.3.1.tgz", @@ -27507,6 +27551,12 @@ "resolved": "https://registry.npmjs.org/fetch-retry/-/fetch-retry-5.0.6.tgz", "integrity": "sha512-3yurQZ2hD9VISAhJJP9bpYFNQrHHBXE2JxxjY5aLEcDi46RmAzJE2OC9FAde0yis5ElW0jTTzs0zfg/Cca4XqQ==" }, + "node_modules/fflate": { + "version": "0.8.2", + "resolved": "https://registry.npmjs.org/fflate/-/fflate-0.8.2.tgz", + "integrity": "sha512-cPJU47OaAoCbg0pBvzsgpTPhmhqI5eJjh/JIu8tPj5q+T7iLvW/JAYUqmE7KOB4R1ZyEhzBaIQpQpardBF5z8A==", + "devOptional": true + }, "node_modules/figures": { "version": "3.2.0", "resolved": "https://registry.npmjs.org/figures/-/figures-3.2.0.tgz", @@ -27928,7 +27978,7 @@ "version": "3.3.1", "resolved": "https://registry.npmjs.org/flatted/-/flatted-3.3.1.tgz", "integrity": "sha512-X8cqMLLie7KsNUDSdzeN8FYK9rEt4Dt67OsG/DNGnYTSDBG4uFAJFBnUeiV+zCVAvwFy56IjM9sH51jVaEhNxw==", - "dev": true + "devOptional": true }, "node_modules/flow-parser": { "version": "0.229.2", @@ -35647,6 +35697,15 @@ "rimraf": "bin.js" } }, + "node_modules/mrmime": { + "version": "2.0.0", + "resolved": "https://registry.npmjs.org/mrmime/-/mrmime-2.0.0.tgz", + "integrity": "sha512-eu38+hdgojoyq63s+yTpN4XMBdt5l8HhMhc4VKLO9KM5caLIBvUm4thi7fFaxyTmCKeNnXZ5pAlBwCUnhA09uw==", + "devOptional": true, + "engines": { + "node": ">=10" + } + }, "node_modules/ms": { "version": "2.1.2", "resolved": "https://registry.npmjs.org/ms/-/ms-2.1.2.tgz", @@ -43267,6 +43326,20 @@ "resolved": "https://registry.npmjs.org/is-arrayish/-/is-arrayish-0.3.2.tgz", "integrity": "sha512-eVRqCvVlZbuw3GrM63ovNSNAeA1K16kaR/LRY/92w0zxQ5/1YzwblUX652i4Xs9RwAGjW9d9y6X88t8OaAJfWQ==" }, + "node_modules/sirv": { + "version": "2.0.4", + "resolved": "https://registry.npmjs.org/sirv/-/sirv-2.0.4.tgz", + "integrity": "sha512-94Bdh3cC2PKrbgSOUqTiGPWVZeSiXfKOVZNJniWoqrWrRkB1CJzBU3NEbiTsPcYy1lDsANA/THzS+9WBiy5nfQ==", + "devOptional": true, + "dependencies": { + "@polka/url": "^1.0.0-next.24", + "mrmime": "^2.0.0", + "totalist": "^3.0.0" + }, + "engines": { + "node": ">= 10" + } + }, "node_modules/sisteransi": { "version": "1.0.5", "resolved": "https://registry.npmjs.org/sisteransi/-/sisteransi-1.0.5.tgz", @@ -45370,6 +45443,15 @@ "url": "https://github.com/sponsors/Borewit" } }, + "node_modules/totalist": { + "version": "3.0.1", + "resolved": "https://registry.npmjs.org/totalist/-/totalist-3.0.1.tgz", + "integrity": "sha512-sf4i37nQ2LBx4m3wB74y+ubopq6W/dIzXg0FDGjsYnZHVa1Da8FH853wlL2gtUhg+xJXjfk3kUZS3BRoQeoQBQ==", + "devOptional": true, + "engines": { + "node": ">=6" + } + }, "node_modules/tough-cookie": { "version": "4.1.3", "resolved": "https://registry.npmjs.org/tough-cookie/-/tough-cookie-4.1.3.tgz", @@ -48943,7 +49025,7 @@ "typescript": "~4.8.2" }, "bin": { - "ds-migrate-to-styles": "bin/index.mjs" + "ds-styles-migrate": "bin/index.mjs" } }, "packages/styles/node_modules/@phenomnomnominal/tsquery": { diff --git a/package.json b/package.json index d24c2c4c..e91d2360 100644 --- a/package.json +++ b/package.json @@ -85,6 +85,7 @@ "@typescript-eslint/utils": "~6.13.2", "@vitejs/plugin-react-swc": "~3.5.0", "@vitejs/plugin-vue": "~5.0.3", + "@vitest/ui": "^1.3.1", "@vue/eslint-config-prettier": "7.1.0", "@vue/eslint-config-typescript": "~11.0.3", "@vue/test-utils": "~2.4.1", @@ -138,5 +139,9 @@ "vue": "~3.4.15", "vue-tsc": "~1.8.8", "zone.js": "~0.11.4" + }, + "executors": "./executors.json", + "dependencies": { + "@nx/devkit": "18.0.5" } } diff --git a/packages/angular-common/src/index.ts b/packages/angular-common/src/index.ts index 3e3c72bd..b60731c9 100644 --- a/packages/angular-common/src/index.ts +++ b/packages/angular-common/src/index.ts @@ -1,6 +1,7 @@ export type { BaloiseDesignSystemAngularConfig } from './utils/config' export type { ProxyComponent } from './utils/utils' +export { OverlayBaseController } from './providers/overlay' export { AngularDelegate } from './providers/angular-delegate' export { BalBreakpointsService } from './providers/breakpoints.service' export { BalConfigService } from './providers/config.service' diff --git a/packages/angular-common/src/providers/modal.service.ts b/packages/angular-common/src/providers/modal.service.ts index 2c9fe5f9..98ffd79f 100644 --- a/packages/angular-common/src/providers/modal.service.ts +++ b/packages/angular-common/src/providers/modal.service.ts @@ -6,7 +6,7 @@ import { AngularDelegate } from './angular-delegate' import { OverlayBaseController } from './overlay' import { BalTokenModal } from '../utils/token' -@Injectable() +@Injectable({ providedIn: 'root' }) export class BalModalService extends OverlayBaseController { constructor( private angularDelegate: AngularDelegate, diff --git a/packages/angular/src/index.ts b/packages/angular/src/index.ts index 7071f85e..0c594622 100644 --- a/packages/angular/src/index.ts +++ b/packages/angular/src/index.ts @@ -4,24 +4,25 @@ export { AngularDelegate, BalBreakpointsService, BalConfigService, - BalModalService, BalOrientationService, - BalSnackbarService, - BalToastService, raf, parseCustomEvent, element, BalTokenUserConfig, BalTokenConfig, - BalTokenToast, - BalTokenSnackbar, BalTokenModal, BalTokenBreakpoints, BalTokenBreakpointSubject, BalTokenDevice, + BalTokenToast, + BalTokenSnackbar, BalTokenOrientationSubject, } from '@baloise/ds-angular-common' +export { BalModalService } from './providers/modal.service' +export { BalToastService } from './providers/toast.service' +export { BalSnackbarService } from './providers/snackbar.service' + export * from './generated/proxies' export * from './components' export * from './bundles' diff --git a/packages/angular/src/providers/modal.service.ts b/packages/angular/src/providers/modal.service.ts new file mode 100644 index 00000000..099455f9 --- /dev/null +++ b/packages/angular/src/providers/modal.service.ts @@ -0,0 +1,28 @@ +import { ComponentFactoryResolver, Inject, Injectable, Injector } from '@angular/core' + +import type { BalModalController, ModalOptions } from '@baloise/ds-core/components' +import { defineCustomElement } from '@baloise/ds-core/components/bal-modal' + +import { AngularDelegate, OverlayBaseController, BalTokenModal } from '@baloise/ds-angular-common' + +@Injectable({ + providedIn: 'root', +}) +export class BalModalService extends OverlayBaseController { + constructor( + private angularDelegate: AngularDelegate, + private resolver: ComponentFactoryResolver, + private injector: Injector, + @Inject(BalTokenModal) ctrl: BalModalController, + ) { + super(ctrl) + defineCustomElement() + } + + override create(opts: ModalOptions): Promise { + return super.create({ + ...opts, + delegate: this.angularDelegate.create(this.resolver, this.injector), + }) + } +} diff --git a/packages/angular/src/providers/snackbar.service.ts b/packages/angular/src/providers/snackbar.service.ts new file mode 100644 index 00000000..ffb5f5c4 --- /dev/null +++ b/packages/angular/src/providers/snackbar.service.ts @@ -0,0 +1,23 @@ +import { Inject, Injectable } from '@angular/core' + +import type { BalSnackbarController, BalSnackbarOptions, Components } from '@baloise/ds-core/components' + +import { defineCustomElement } from '@baloise/ds-core/components/bal-snackbar' +import { BalTokenSnackbar } from '@baloise/ds-angular-common' + +@Injectable({ + providedIn: 'root', +}) +export class BalSnackbarService { + constructor(@Inject(BalTokenSnackbar) private ctrl: BalSnackbarController) { + defineCustomElement() + } + + create(options: BalSnackbarOptions): Components.BalSnackbar { + return this.ctrl.create(options) + } + + async dismissAll(): Promise { + return this.ctrl.dismissAll() + } +} diff --git a/packages/angular/src/providers/toast.service.ts b/packages/angular/src/providers/toast.service.ts new file mode 100644 index 00000000..645b9756 --- /dev/null +++ b/packages/angular/src/providers/toast.service.ts @@ -0,0 +1,23 @@ +import { Inject, Injectable } from '@angular/core' + +import type { BalToastController, BalToastOptions, Components } from '@baloise/ds-core/components' + +import { defineCustomElement } from '@baloise/ds-core/components/bal-toast' +import { BalTokenToast } from '@baloise/ds-angular-common' + +@Injectable({ + providedIn: 'root', +}) +export class BalToastService { + constructor(@Inject(BalTokenToast) private ctrl: BalToastController) { + defineCustomElement() + } + + create(options: BalToastOptions): Components.BalToast { + return this.ctrl.create(options) + } + + async dismissAll(): Promise { + return this.ctrl.dismissAll() + } +} diff --git a/packages/core/package.json b/packages/core/package.json index 91cfba78..d31bc4ba 100644 --- a/packages/core/package.json +++ b/packages/core/package.json @@ -25,7 +25,7 @@ "loader/" ], "scripts": { - "dev": "BAL_DOCUMENTATION=true stencil build --watch" + "bubu": "vitest --ui" }, "dependencies": { "@baloise/ds-styles": "0.0.6", diff --git a/packages/core/project.json b/packages/core/project.json index 70013084..00e0d7da 100644 --- a/packages/core/project.json +++ b/packages/core/project.json @@ -19,6 +19,12 @@ "command": "set BAL_DEVELOPMENT=true & stencil build --serve --watch --port=3333" } }, + "test-ui": { + "executor": "@baloise/ds-nx:test-ui", + "options": { + "projectRoot": "{projectRoot}" + } + }, "build": { "executor": "@baloise/ds-nx:build-core", "outputs": [ diff --git a/packages/core/src/components/bal-card/test/bal-card.a11y.html b/packages/core/src/components/bal-card/test/bal-card.a11y.html new file mode 100644 index 00000000..3b00eb33 --- /dev/null +++ b/packages/core/src/components/bal-card/test/bal-card.a11y.html @@ -0,0 +1,37 @@ + + + + + + + + + + + + + +
+
+ + Your Product + BaloiseCombi + Police number 70/2.937.458 + + Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et + dolore magna aliqua. + + + Secondary Action + Main Action + + +
+
+ + + diff --git a/packages/core/src/components/bal-content/test/bal-content.a11y.html b/packages/core/src/components/bal-content/test/bal-content.a11y.html new file mode 100644 index 00000000..d5890baf --- /dev/null +++ b/packages/core/src/components/bal-content/test/bal-content.a11y.html @@ -0,0 +1,32 @@ + + + + + + + + + + + + + +
+
+ + Label + Lorem, ipsum dolor sit amet consectetur adipisicing elit. Quam ipsum, hic iste officiis doloribus, + accusamus quibusdam accusantium ducimus reprehenderit fugiat laudantium ut inventore. Reprehenderit + necessitatibus architecto a, consequuntur aliquid distinctio. + +
+
+ + + diff --git a/packages/core/src/components/bal-field/test/bal-field.a11y.html b/packages/core/src/components/bal-field/test/bal-field.a11y.html index de0bf104..e7ad1e43 100644 --- a/packages/core/src/components/bal-field/test/bal-field.a11y.html +++ b/packages/core/src/components/bal-field/test/bal-field.a11y.html @@ -4,175 +4,62 @@ - + a11y + - - -
-
- - Input Label without a message - - - - - - - Input Label - - - - Please enter a valid text input - - - - Textarea Label - - - - Please enter a valid text textarea - - - - Number Label - - - - Please enter a valid number - - - - Time Label - - - - Please enter a valid time - - - - Stepper Label - - - - Please enter a valid step - - - - Datepicker Label - - - - Please enter a valid date - - - - File Upload Label - - - - Please add a valid files - - - - Slider Label - - - - Please add a valid slide value - + + +
+

a11y

+
- Select Label + Firstname - - 1995 - 1996 - 1997 - 1998 - 1999 - 2000 - + - Please chose a valid option + Field Message - - - Checkbox Label +
+
+ + Firstname - My checkbox + - Please check checkbox + Field Message - - - Checkbox Group Label +
+
+ + Firstname - - One - Two - Three - + - Please check checkboxes + Field Message - +
+
- Checkbox Button Group Label + Firstname - - - - - - One - - - - - - - - - Two - - - - - - - - - Three - - - - - + - Please check checkboxes + Field Message - - - Radio Label +
+
+ + Firstname - - One - Two - Three - + - Please check radios + Field Message
-
- + + diff --git a/packages/core/src/components/bal-nav/bal-nav-link-grid-col/bal-nav-link-grid-col.sass b/packages/core/src/components/bal-nav/bal-nav-link-grid-col/bal-nav-link-grid-col.sass index 72d0d045..89a00cc2 100644 --- a/packages/core/src/components/bal-nav/bal-nav-link-grid-col/bal-nav-link-grid-col.sass +++ b/packages/core/src/components/bal-nav/bal-nav-link-grid-col/bal-nav-link-grid-col.sass @@ -4,13 +4,25 @@ // -------------------------------------------------- .bal-nav-link-grid-col + display: block + padding: 0 + flex: none + width: 100% + + &:not(:last-child) + margin-bottom: var(--bal-space-normal) +desktop + flex: none + width: 50% padding-top: 0 padding-bottom: 0 padding-left: var(--bal-space-large) padding-right: var(--bal-space-large) + &:not(:last-child) + margin-bottom: 0 + // // Link group .bal-nav-link-group @@ -21,9 +33,17 @@ // Non static columns &.bal-nav-link-grid-col--is-static padding-left: 0 + + +widescreen + flex: none + width: 33.3333% // // Non static columns &:not(.bal-nav-link-grid-col--is-static) + +widescreen + flex: none + width: 66.6666% + .bal-nav-link-grid-col__inner +widescreen display: flex diff --git a/packages/core/src/components/bal-nav/bal-nav-link-grid-col/bal-nav-link-grid-col.tsx b/packages/core/src/components/bal-nav/bal-nav-link-grid-col/bal-nav-link-grid-col.tsx index 1a7b2e03..9169564e 100644 --- a/packages/core/src/components/bal-nav/bal-nav-link-grid-col/bal-nav-link-grid-col.tsx +++ b/packages/core/src/components/bal-nav/bal-nav-link-grid-col/bal-nav-link-grid-col.tsx @@ -32,15 +32,12 @@ export class NavigationLinkGridCol implements ComponentInterface, Loggable { render() { const block = BEM.block('nav-link-grid-col') const innerEl = block.element('inner') - const widescreenPositionClass = this.staticCol ? 'widescreen:is-one-third' : 'widescreen:is-two-thirds' return (
diff --git a/packages/core/src/components/bal-nav/bal-nav-link-group/bal-nav-link-group.vars.sass b/packages/core/src/components/bal-nav/bal-nav-link-group/bal-nav-link-group.vars.sass index 922c5bf9..4893efd4 100644 --- a/packages/core/src/components/bal-nav/bal-nav-link-group/bal-nav-link-group.vars.sass +++ b/packages/core/src/components/bal-nav/bal-nav-link-group/bal-nav-link-group.vars.sass @@ -5,7 +5,7 @@ * @prop --bal-nav-link-group-background-red: TBD * @prop --bal-nav-link-group-background-yellow: TBD * @prop --bal-nav-link-group-background-green: TBD - * + * * @prop --bal-nav-link-group-radius: TBD */ diff --git a/packages/core/src/components/bal-nav/bal-nav.sass b/packages/core/src/components/bal-nav/bal-nav.sass index d36839a7..c640d70a 100644 --- a/packages/core/src/components/bal-nav/bal-nav.sass +++ b/packages/core/src/components/bal-nav/bal-nav.sass @@ -1,16 +1,6 @@ @import '@baloise/ds-styles/sass/mixins' @import './bal-nav.vars' -=visually-hidden - position: absolute !important - height: 0.01em !important - width: 0.01em !important - padding: 0 !important - overflow: hidden !important - clip: rect(1px, 1px, 1px, 1px) !important - border: none !important - white-space: nowrap !important - // Navigation // -------------------------------------------------- @@ -58,7 +48,7 @@ max-width: var(--bal-container-size-normal) .bal-nav__flyout:not(.bal-nav__flyout--visible) - +visually-hidden + +invisible .bal-nav .bal-nav-meta-bar, .bal-nav .bal-nav-menu-bar @@ -93,8 +83,8 @@ gap: var(--bal-space-normal) background: transparent font-family: var(--bal-font-family-title) - font-weight: var(--bal-font-weight-bold) - font-size: var(--bal-text-size-x-large) + font-weight: var(--bal-weight-bold) + font-size: var(--bal-size-x-large) line-height: var(--bal-line-heigh-x-large) cursor: pointer @@ -111,8 +101,8 @@ gap: var(--bal-space-normal) background: transparent font-family: var(--bal-font-family-title) - font-weight: var(--bal-font-weight-bold) - font-size: var(--bal-text-size-large) + font-weight: var(--bal-weight-bold) + font-size: var(--bal-size-large) line-height: var(--bal-line-heigh-large) cursor: pointer @@ -130,8 +120,8 @@ gap: var(--bal-space-normal) background: transparent font-family: var(--bal-font-family-title) - font-weight: var(--bal-font-weight-bold) - font-size: var(--bal-text-size-normal) + font-weight: var(--bal-weight-bold) + font-size: var(--bal-size-normal) line-height: var(--bal-line-heigh-normal) .bal-nav__mobile-links @@ -147,7 +137,7 @@ gap: var(--bal-space-normal) background: transparent font-family: var(--bal-font-family-text) - font-size: var(--bal-text-size-normal) + font-size: var(--bal-size-normal) line-height: var(--bal-line-heigh-normal) .bal-nav__mobile-meta-list, @@ -191,17 +181,24 @@ padding-top: 1rem padding-bottom: 1rem +.bal-nav__mobile-section-list--invisible, +.bal-nav__mobile-service-list--invisible + +invisible + .bal-nav__mobile-overview-link font-family: var(--bal-font-family-text) - font-weight: var(--bal-font-weight-bold) - font-size: var(--bal-text-size-x-small) + font-weight: var(--bal-weight-bold) + font-size: var(--bal-size-x-small) line-height: var(--bal-line-height-x-small) +.bal-nav__mobile-overview-link--invisible + +invisible + .bal-nav__mobile-overview-link--menu padding: 0 0 0 1rem .bal-nav__line - background-color: var(--bal-color-border-divider) + background-color: var(--bal-color-border-grey-light) height: var(--bal-border-width-normal) border: none display: block diff --git a/packages/core/src/components/bal-nav/bal-nav.tsx b/packages/core/src/components/bal-nav/bal-nav.tsx index dccb8e05..2d2ac76e 100644 --- a/packages/core/src/components/bal-nav/bal-nav.tsx +++ b/packages/core/src/components/bal-nav/bal-nav.tsx @@ -102,7 +102,7 @@ export class NavMetaBar @Watch('buttons') protected async buttonChanged() { - this.onOptionChange() + this.onMetaButtonChange() } /** @@ -122,6 +122,7 @@ export class NavMetaBar componentWillLoad() { this.onOptionChange() + this.onMetaButtonChange() this.updateTabs() } @@ -176,9 +177,9 @@ export class NavMetaBar mutationObserverActive = true - @ListenToMutation({ tags: ['bal-popup'] }) + @ListenToMutation({ tags: ['bal-popup'], waitAfterFramePrint: true }) mutationListener(): void { - this.onOptionChange() + this.onMetaButtonChange() } @ListenToBreakpoints() @@ -305,7 +306,12 @@ export class NavMetaBar */ private onOptionChange = async () => { + this.activeMetaLinkValue = undefined + this.activeMenuLinkValue = undefined this.linkItems = this.options.map(option => new NavMetaLinkItem(option, this)) + } + + private onMetaButtonChange = async () => { this.metaButtons = this.buttons.map(button => new NavMetaButton(button, this)) } diff --git a/packages/core/src/components/bal-nav/components/overview-link.tsx b/packages/core/src/components/bal-nav/components/overview-link.tsx index 06fdb706..296bdfb0 100644 --- a/packages/core/src/components/bal-nav/components/overview-link.tsx +++ b/packages/core/src/components/bal-nav/components/overview-link.tsx @@ -5,10 +5,11 @@ import { NavLinkItem } from '../models/bal-nav-link-item' export interface OverviewLinkProps { item: NavLinkItem | undefined isMenu?: boolean + isVisible?: boolean onClick: (ev: MouseEvent) => void } -export const OverviewLink: FunctionalComponent = ({ item, isMenu, onClick }) => { +export const OverviewLink: FunctionalComponent = ({ item, isMenu, onClick, isVisible }) => { const block = BEM.block('nav') if (!item) { @@ -20,6 +21,10 @@ export const OverviewLink: FunctionalComponent = ({ item, isM class={{ ...block.element('mobile-overview-link').class(), ...block.element('mobile-overview-link').modifier('menu').class(!!isMenu), + ...block + .element('mobile-overview-link') + .modifier('invisible') + .class(isVisible === false), }} href={item.href} target={item.target} diff --git a/packages/core/src/components/bal-nav/models/bal-nav-menu-link-item.tsx b/packages/core/src/components/bal-nav/models/bal-nav-menu-link-item.tsx index e3778746..64584078 100644 --- a/packages/core/src/components/bal-nav/models/bal-nav-menu-link-item.tsx +++ b/packages/core/src/components/bal-nav/models/bal-nav-menu-link-item.tsx @@ -46,15 +46,20 @@ export class NavMenuLinkItem extends NavLinkItem implements BalProps.BalNavMenuL open={isSelected} onClick={ev => this.onAccordionClick(ev)} > - {isSelected ? ( - this.onClick(ev)} isMenu> - ) : ( - '' - )} - {isSelected && hasSectionLinkItems ? ( + this.onClick(ev)} + isMenu + isVisible={isSelected} + > + {hasSectionLinkItems ? (
    {this.sectionLinkItems.map(item => item.renderTouch())} @@ -62,10 +67,14 @@ export class NavMenuLinkItem extends NavLinkItem implements BalProps.BalNavMenuL ) : ( '' )} - {isSelected && hasServiceLinkItems ? ( + {hasServiceLinkItems ? (
      {this.serviceLinkItems.map(item => item.renderTouch())} diff --git a/packages/core/src/components/bal-nav/test/bal-nav.visual.html b/packages/core/src/components/bal-nav/test/bal-nav.visual.html index 1bbd852d..fe1171d4 100644 --- a/packages/core/src/components/bal-nav/test/bal-nav.visual.html +++ b/packages/core/src/components/bal-nav/test/bal-nav.visual.html @@ -110,7 +110,7 @@

      Heading

      - +

      Heading

      @@ -224,7 +224,6 @@

      Heading

      } const mainLinkItem = label => ({ - value: `v${label}`, label: label, sectionLinkItems: [sectionLinkItem, sectionLinkItem, sectionLinkItem], serviceLinkItems: [serviceLinkItem], @@ -272,159 +271,126 @@

      Heading

      nav.options = [ { - value: 'privatkunden', label: 'Privatkunden', href: 'http://localhost:3333/components/bal-nav/test/bal-nav.visual.html', active: true, overviewLink: { - value: 'Privatkunden', label: 'Privatkunden', href: 'http://localhost:3333/components/bal-nav/test/bal-nav.visual.html', }, mainLinkItems: [ { - value: 'Versichern', label: 'Versichern', - active: true, href: 'http://localhost:3333/components/bal-nav/test/bal-nav.visual.html', + active: true, sectionLinkItems: [ { - value: 'Wohnen & Recht', label: 'Wohnen & Recht', href: 'http://localhost:3333/components/bal-nav/test/bal-nav.visual.html', active: true, linkItems: [ { - value: 'Hausratversicherung', label: 'Hausratversicherung', - clickable: true, active: true, + clickable: true, }, { - value: 'Haushaltversicherung für alle unter 30', label: 'Haushaltversicherung für alle unter 30', href: 'http://localhost:3333/components/bal-nav/test/bal-nav.visual.html', }, { - value: 'Haftpflichtversicherung', label: 'Haftpflichtversicherung', href: 'http://localhost:3333/components/bal-nav/test/bal-nav.visual.html', }, { - value: 'Rechtsschutzversicherung', label: 'Rechtsschutzversicherung', href: 'http://localhost:3333/components/bal-nav/test/bal-nav.visual.html', }, { - value: 'Cyber-Versicherung', label: 'Cyber-Versicherung', href: 'http://localhost:3333/components/bal-nav/test/bal-nav.visual.html', }, { - value: 'Wertsachen- & Elektronikversicherungen', label: 'Wertsachen- & Elektronikversicherungen', href: 'http://localhost:3333/components/bal-nav/test/bal-nav.visual.html', }, ], }, { - value: 'Fahrzeuge', label: 'Fahrzeuge', linkItems: [ { - value: 'Autoversicherung', label: 'Autoversicherung', href: 'http://localhost:3333/components/bal-nav/test/bal-nav.visual.html', }, { - value: 'Elektroauto-Versicherung', label: 'Elektroauto-Versicherung', href: 'http://localhost:3333/components/bal-nav/test/bal-nav.visual.html', }, { - value: 'Motorrad- & Rollerversicherung', label: 'Motorrad- & Rollerversicherung', }, { - value: 'Motorrad- & Rollerversicherung für alle unter 30', label: 'Motorrad- & Rollerversicherung für alle unter 30', }, { - value: 'Veloversicherung', label: 'Veloversicherung', }, { - value: 'Bootsversicherung', label: 'Bootsversicherung', }, ], }, { - value: 'Personen', label: 'Personen', linkItems: [ { - value: 'Lebensversicherungen', label: 'Lebensversicherungen', }, { - value: 'Einzel-Unfallversicherung', label: 'Einzel-Unfallversicherung', }, { - value: 'Todesfallrisikoversicherung', label: 'Todesfallrisikoversicherung', }, { - value: 'Einzel-Krankentaggeldversicherung', label: 'Einzel-Krankentaggeldversicherung', }, { - value: 'Erwerbsunfähigkeitsversicherung', label: 'Erwerbsunfähigkeitsversicherung', }, { - value: 'Hausangestellten-Versicherung', label: 'Hausangestellten-Versicherung', }, ], }, { - value: 'Ferien & Reisen', label: 'Ferien & Reisen', linkItems: [ { - value: 'Reiseversicherung (für das ganze Jahr)', label: 'Reiseversicherung (für das ganze Jahr)', }, { - value: 'Ferienversicherung (2 bis 92 Tage)', label: 'Ferienversicherung (2 bis 92 Tage)', }, { - value: 'Reisegepäckversicherung', label: 'Reisegepäckversicherung', }, { - value: 'Annullierungskosten', label: 'Annullierungskosten', }, { - value: 'Mietfahrzeug-Versicherung', label: 'Mietfahrzeug-Versicherung', }, ], }, { - value: 'Wohneneigentum', label: 'Wohneneigentum', linkItems: [ { - value: 'Bauversicherung', label: 'Bauversicherung', }, { - value: 'Gebäudeversicherung', label: 'Gebäudeversicherung', }, ], @@ -432,31 +398,24 @@

      Heading

      ], serviceLinkItems: [ { - value: 'Services', label: 'Services', linkItems: [ { - value: 'Schaden melden', label: 'Schaden melden', }, { - value: 'Pannenhilfe', label: 'Pannenhilfe', }, { - value: 'Partnerbetriebe', label: 'Partnerbetriebe', }, { - value: 'Versicherungsnachweis', label: 'Versicherungsnachweis', }, { - value: 'Internationale Versicherungskarte', label: 'Internationale Versicherungskarte', }, { - value: 'Wiederinkraftsetzung', label: 'Wiederinkraftsetzung', href: 'http://localhost:3333/components/bal-nav/test/bal-nav.visual.html', }, @@ -464,153 +423,118 @@

      Heading

      }, ], overviewLink: { - value: 'Alle Versicherungslösungen', label: 'Alle Versicherungslösungen', href: 'http://localhost:3333/components/bal-nav/test/bal-nav.visual.html', }, }, { - value: 'Anlegen & Vorsorg', label: 'Anlegen & Vorsorg', sectionLinkItems: [ { - value: 'Anlegen', label: 'Anlegen', linkItems: [ { - value: 'Zielbasiertes Anlegen', label: 'Zielbasiertes Anlegen', }, { - value: 'Fondskonto', label: 'Fondskonto', }, { - value: 'Anlagefonds', label: 'Anlagefonds', }, { - value: 'Anlegen mit Berater', label: 'Anlegen mit Berater', }, { - value: 'Anlegen ohne Berater', label: 'Anlegen ohne Berater', }, { - value: 'Vermögensverwaltung', label: 'Vermögensverwaltung', }, { - value: 'Kassenobligationen', label: 'Kassenobligationen', }, { - value: 'Festgeld', label: 'Festgeld', }, ], }, { - value: 'Altersvorsorge', label: 'Altersvorsorge', linkItems: [ { - value: 'Pensionsplanung', label: 'Pensionsplanung', }, { - value: 'Vorsorgelösungen', label: 'Vorsorgelösungen', }, { - value: 'Renten- und Auszahlungspläne', label: 'Renten- und Auszahlungspläne', }, { - value: 'Invest Sparen 3 - Säule 3a', label: 'Invest Sparen 3 - Säule 3a', }, { - value: 'Freizügigkeitskonto', label: 'Freizügigkeitskonto', }, { - value: 'Lebensversicherungen', label: 'Lebensversicherungen', }, { - value: 'Finanzplanung', label: 'Finanzplanung', }, ], }, { - value: 'Finanzwissen', label: 'Finanzwissen', linkItems: [ { - value: 'Persönliche Anlagestrategie', label: 'Persönliche Anlagestrategie', }, { - value: '5 Tipps für eine erfolgreiche Vorsorge', label: '5 Tipps für eine erfolgreiche Vorsorge', }, { - value: 'Fondswissen', label: 'Fondswissen', }, { - value: 'Warum Anlagefonds?', label: 'Warum Anlagefonds?', }, { - value: 'Zeitpunkt der Vorsorge', label: 'Zeitpunkt der Vorsorge', }, { - value: 'Das Schweizer Vorsorgesystem einfach erklärt', label: 'Das Schweizer Vorsorgesystem einfach erklärt', }, ], }, { - value: 'Ihre Ziele', label: 'Ihre Ziele', linkItems: [ { - value: 'Pensionierung planen', label: 'Pensionierung planen', }, { - value: 'Als Frau vorsorgen', label: 'Als Frau vorsorgen', }, { - value: 'Vermögen aufbauen, Lebenstraum erfüllen', label: 'Vermögen aufbauen, Lebenstraum erfüllen', }, { - value: 'Familie richtig absichern', label: 'Familie richtig absichern', }, { - value: 'Risiken absichern, Familie schützen', label: 'Risiken absichern, Familie schützen', }, { - value: 'Nachlass frühzeitig regeln', label: 'Nachlass frühzeitig regeln', }, ], }, { - value: 'Nachhaltig investieren', label: 'Nachhaltig investieren', linkItems: [ { - value: 'Allgemeine Informationen', label: 'Allgemeine Informationen', }, ], @@ -618,113 +542,88 @@

      Heading

      ], serviceLinkItems: [ { - value: 'Services', label: 'Services', linkItems: [ { - value: 'Vorsorgeausweis', label: 'Vorsorgeausweis', }, { - value: 'Aktuelle Kurse', label: 'Aktuelle Kurse', }, { - value: 'Börse & Anlageempfehlungen', label: 'Börse & Anlageempfehlungen', }, { - value: 'Bankkonditionen', label: 'Bankkonditionen', }, { - value: 'Downloads', label: 'Downloads', }, ], }, { - value: 'Finance4Women', label: 'Finance4Women', color: 'purple', linkItems: [ { - value: 'Was macht eine gute Pensionskasse aus?', label: 'Was macht eine gute Pensionskasse aus?', }, { - value: 'Impact-Investing: Geldanlage mit Sinn', label: 'Impact-Investing: Geldanlage mit Sinn', }, { - value: 'Inflation - Was ist das?', label: 'Inflation - Was ist das?', }, { - value: 'Lohnverhandlungen erfolgreich führen. Tipps und Checkliste', label: 'Lohnverhandlungen erfolgreich führen. Tipps und Checkliste', }, ], }, ], overviewLink: { - value: 'Alle Anlage- und Vorsorgelösungen', label: 'Alle Anlage- und Vorsorgelösungen', href: 'http://localhost:3333/components/bal-nav/test/bal-nav.visual.html', }, }, { - value: 'Konten, Karten & Finanzierung', label: 'Konten, Karten & Finanzierung', sectionLinkItems: [ { - value: 'Zahlen und Sparen', label: 'Zahlen und Sparen', linkItems: [ { - value: 'Konten', label: 'Konten', }, { - value: 'Bankpakete der Baloise Bank', label: 'Bankpakete der Baloise Bank', }, { - value: 'Karten', label: 'Karten', }, { - value: 'Reisezahlungsmittel', label: 'Reisezahlungsmittel', }, ], }, { - value: 'Finanzieren', label: 'Finanzieren', linkItems: [ { - value: 'Alle Hypotheken', label: 'Alle Hypotheken', }, { - value: 'Zinsrabatte mit Hypobonus', label: 'Zinsrabatte mit Hypobonus', }, { - value: 'Online-Hypothek', label: 'Online-Hypothek', }, { - value: 'Festhypothek', label: 'Festhypothek', }, { - value: 'Baukredit', label: 'Baukredit', }, { - value: 'Privatkredit', label: 'Privatkredit', }, ], @@ -732,46 +631,37 @@

      Heading

      ], serviceLinkItems: [ { - value: 'Services', label: 'Services', linkItems: [ { - value: 'Karte sperren', label: 'Karte sperren', }, { - value: 'E-Banking', label: 'E-Banking', }, { - value: 'Bankkonditionen', label: 'Bankkonditionen', }, { - value: 'Mobile Payment', label: 'Mobile Payment', }, { - value: 'Nutzungsbestimmungen Online-Hypothek', label: 'Nutzungsbestimmungen Online-Hypothek', }, ], }, ], overviewLink: { - value: 'Alle Bankprodukte', label: 'Alle Bankprodukte', href: 'http://localhost:3333/components/bal-nav/test/bal-nav.visual.html', }, }, { - value: 'Kontakt & Services', label: 'Kontakt & Services', href: 'https://www.baloise.ch/de/privatkunden/kontakt-services/berater-standorte.html', target: '_blank', }, { - value: 'Blog', label: 'Blog', href: 'https://www.baloise.ch/de/privatkunden/kontakt-services/berater-standorte.html', target: '_blank', @@ -779,9 +669,8 @@

      Heading

      ], }, { - value: 'unternehmenskunden', label: 'Unternehmenskunden', - active: false, + href: 'http://localhost:3333/components/bal-nav/test/bal-nav.visual.html', mainLinkItems: [ mainLinkItem('Versichern'), mainLinkItem('Firma gründen'), @@ -792,8 +681,8 @@

      Heading

      ], }, { - value: 'institutionelle-anleger', label: 'Institutionelle Anleger', + href: 'http://localhost:3333/components/bal-nav/test/bal-nav.visual.html', mainLinkItems: [ mainLinkItem('Anlegen'), mainLinkItem('Diestleistungsangebog'), @@ -802,8 +691,8 @@

      Heading

      ], }, { - value: 'ueber-uns', label: 'Über uns', + href: 'http://localhost:3333/components/bal-nav/test/bal-nav.visual.html', mainLinkItems: [ mainLinkItem('Engagement'), mainLinkItem('Organisation'), diff --git a/packages/core/src/components/bal-pagination/test/bal-pagination.a11y.html b/packages/core/src/components/bal-pagination/test/bal-pagination.a11y.html new file mode 100644 index 00000000..7d40ecdd --- /dev/null +++ b/packages/core/src/components/bal-pagination/test/bal-pagination.a11y.html @@ -0,0 +1,31 @@ + + + + + + + + + + + + +
      +
      + +
      +
      +
      +
      + +
      +
      +
      +
      + +
      +
      +       + + + diff --git a/packages/core/src/components/bal-progress-bar/bal-progress-bar.tsx b/packages/core/src/components/bal-progress-bar/bal-progress-bar.tsx index 89ac8160..71c00375 100644 --- a/packages/core/src/components/bal-progress-bar/bal-progress-bar.tsx +++ b/packages/core/src/components/bal-progress-bar/bal-progress-bar.tsx @@ -84,6 +84,7 @@ export class ProgressBar implements ComponentInterface, BalConfigObserver, BalBr return (