chore(): sync repositories (#33)

* chore(): sync repositories

* chore(): fix imports

* chore(): format

* chore(): add invisible mixin

* chore(): add missing style

* chore(): format

* chore(): fix import

* update nav

* add test-ui executor

* update nav visual

* update base images

---------

Co-authored-by: Mladen Planinicic <mladen.planinicic@baloise.ch>
Co-authored-by: Gery Hirschfeld <gerhard.hirschfeld@baloise.ch>
Co-authored-by: hirsch88 <hirsch88@users.noreply.github.com>

.changeset/late-baboons-compete.md

@@ -2,4 +2,4 @@
 '@baloise/ds-core': patch
 ---
 
-**devkit**: update 
+**devkit**: update

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.
 
 </AngularFramework>
 
-## 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).

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()
+      })
+    })
+  })
+})

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()
+      })
+    })
+  })
+})

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()
+      })
+    })
+  })
+})

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()
+      })
+    })
+  })
+})

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()
+      })
+    })
+  })
+})

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()
+      })
+    })
+  })
+})

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()
+      })
+    })
+  })
+})

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()
+      })
+    })
+  })
+})

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()
+      })
+    })
+  })
+})

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'],
     })

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) => {

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'

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"
+    }
+  }
+}

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"
     }
   }
 }

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}"],

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 }
+}

libs/nx/src/executors/test-ui/schema.d.ts

@@ -0,0 +1,3 @@
+export interface TestUiExecutorSchema {
+  projectRoot: string
+} // eslint-disable-line

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": []
+}

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"]

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"]

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"]