♻️ refactor(navigation): main (#940)

* Create PR for #784 * ♻️ refactor(navigation): meta bar (#931) * Create PR for #907 * chore(): add from to the import of markers and styles in maps documen… (#932) chore(): add from to the import of markers and styles in maps documentation * chore(): update base images * feat: add new component bal-meta-bar * chore(): update base images * chore: change timeout * chore(): update base images * test: adjust visual tests * test: adjust visual tests 2 * test: adjust visual tests 3 * test: adjust visual tests 4 * chore: adjust test * chore(): update base images * chore: trigger build --------- Co-authored-by: hirsch88 <[email protected]> Co-authored-by: Mladen Planinicic <[email protected]> Co-authored-by: Gery Hirschfeld <[email protected]> * ♻️ refactor(navigation): popover (#921) * Create PR for #908 * feat(popup): add new component * chore: format files * test(popup): add visual test * chore: adjust visual ci * chore: add test selectors * chore: improve popover variant * chore: format files * chore: is able to use 100% of width * chore: adjust visual * chore(): update base images * chore: trigger build * chore(): update base images * chore(): update base images * chore: trigger build * feat(popup): trigger can define variant * feat(popup): trigger can define placement * chore: format files --------- Co-authored-by: hirsch88 <[email protected]> Co-authored-by: Gery Hirschfeld <[email protected]> * ♻️ refactor(navigation): link (#919) * Create PR for #903 * feat(nav-link): add new component * chore(): format * chore: implement PR feedback * chore: format files * chore(): update base images * chore: trigger build --------- Co-authored-by: mladenplaninicic <[email protected]> Co-authored-by: mladenplaninicic <[email protected]> Co-authored-by: Gery Hirschfeld <[email protected]> Co-authored-by: hirsch88 <[email protected]> * ♻️ refactor(navigation): main + flyout (#935) * Create PR for #906 * chore: update lock file * chore: update tags * chore: update tags * feat: add new component bal-nav-menu-bar * chore: add shadow * fix: transform when scroll * feat: add component flyout * chore: add flyout border when active * chore(): update base images * chore(): update base images * chore: trigger build * chore(): update base images * chore: trigger build --------- Co-authored-by: hirsch88 <[email protected]> Co-authored-by: Gery Hirschfeld <[email protected]> * Create PR for #911 * chore: update * Z-index (#951) * 📝 docs(): improve cdn documentation (#942) * chore(): improve cdn documentation * chore(): format * feat: Create z-index design tokens and adjust the components. --------- Co-authored-by: Mladen Planinicic <[email protected]> * chore: update z-index * Navigation link grid (#941) * chore(): add grid components * feat(bal-nav): add new components bal-nav-link-grid, bal-nav-link-grid-col and bal-nav-link-group * chore(): refactor * chore(): update base images * chore: remove console logs * chore: merge branch 'refactor/issue-911' into navigation-link-grid --------- Co-authored-by: mladenplaninicic <[email protected]> Co-authored-by: Gery Hirschfeld <[email protected]> * chore: add desktop links * chore: add link list * chore: add aria attributes * chore: add active path * chore: support one meta link option * chore: add logo links * chore: create docs * Navigation refactor desktop improvements (#963) * chore(): improve focus * chore(): add overview link * chore(): add overview link * chore(): format --------- Co-authored-by: Gery Hirschfeld <[email protected]> * docs: create story * chore: adjust spacing and overview link * chore: fix z-index and popup with * chore: did popup alignment * chore: adjust z-index * chore: active popup and close menu * chore: render opt * chore: add click event for link items * Navigation refactor desktop improvements (#966) * chore(): improve focus * chore(): add overview link * chore(): add overview link * chore(): format * chore(): disable body scroll when flyout is scrollable * chore(): remove containerSize prop * chore(): fix line width * chore(): fix duplicated mobile list * chore(): open meta and menu if they are active * chore(): add underline offset for links * chore(): format * ♻️ refactor(navigation): use buttons for a tab when there is no href (#954) * 📝 docs(): improve cdn documentation (#942) * chore(): improve cdn documentation * chore(): format * Create PR for #953 * fix(bal-tabs): render button in nav if no href * fix(bal-tabs): use div instead of nav * fix(bal-tabs): add aria attributes * fix(bal-tabs): background color fix * fix(bal-tabs): format * fix(bal-tabs): adjust line height * fix(bal-tabs): unset border * fix(bal-tabs): add aria hidden and rename id * fix(bal-tabs): remove color attr from button * fix/(bal-tabs): format --------- Co-authored-by: Mladen Planinicic <[email protected]> Co-authored-by: mladenplaninicic <[email protected]> Co-authored-by: Gina Biondo <[email protected]> Co-authored-by: Gery Hirschfeld <[email protected]> * chore(): don't animate tabs line if tab target is blank --------- Co-authored-by: github-actions[bot] <41898282+github-actions[bot]@users.noreply.github.com> Co-authored-by: mladenplaninicic <[email protected]> Co-authored-by: Gina Biondo <[email protected]> Co-authored-by: Gery Hirschfeld <[email protected]> * chore: remove console logs * chore: fix meta bar pos * fix(nav): disable scroll with popups * fix(nav): chevron and mobile title link is not active * fix(nav): keep flyout open when changing meta * fix(nav): adjust animation glitches * chore: focus first element of popup * fix: backdrop click * chore: fix app height ios issue * chore: fix react and angular build * chore(): improve example (#970) * chore(): fix navigation line (#968) * chore: improve a11y * chore: update props * docs: popup * test: update visual test for popup * test: update visual test for popup * test: update visual test for popup * test: update visual test for popup * chore(): update base images * test: update visual test for popup * test: update popup tests * chore(): update base images * test: update popup tests * test: update popup tests * chore(): update base images * test: update popup tests * chore(): update base images * chore: trigger build * test: improve visual * test: improve visual * test: improve visual * chore: trigger build * chore: fix lint issues * chore(): add visual tests (#973) * chore(): add visual tests * chore(): update base images * chore(): trigger build --------- Co-authored-by: mladenplaninicic <[email protected]> * chore: merge branch 'main' into refactor/issue-911 * chore: build file * chore: format files * fix(pagination): adjust disabled look of small controls * Nav docs (#989) * chore(): add documentation * chore(): add documentation * chore(): add documentation * chore(): format * chore(): add documentation * chore: remove unused files * chore: format files * chore: adjust hint min width * fix: typings * chore(): update base images * chore: format files * chore(): update base images * chore(): improve docs * chore(): improve docs * chore: add controls back * chore(): update base images * chore: trigger build * chore: add google console * chore: trigger build * chore: add data prop to be more flexible like for data tracking * fix(bal-nav): make main tabs icon rotates, improve scrolling on mobile * chore: Merge branch 'main' into refactor/issue-911 * chore: create menu with native elements * chore: update mobile view * chore: fix component tests * chore: fix build * chore: fix popup tests * chore: fix list height * chore(): update base images * chore: trigger build * chore: remove unused package * chore(): add overview link to the example * chore: fix line-height and long texts * fix:(accordion): adjust min-heights * chore: scroll to selected link item * chore: format files * chore: add link option for accordion button * chore: adjust large button height * chore: adjust border colors in visual test * chore: waitAfterIdleCallback before taking screenshot * chore: adjust changesets * chore(): update base images * chore: trigger build * chore: adjust visual tests * chore(): update base images * chore: trigger build * chore: adjust visual test * chore(): update base images * chore: trigger build * chore: update visual test * chore: adjust visual test --------- Co-authored-by: hirsch88 <[email protected]> Co-authored-by: Gery Hirschfeld <[email protected]> Co-authored-by: github-actions[bot] <41898282+github-actions[bot]@users.noreply.github.com> Co-authored-by: Mladen Planinicic <[email protected]> Co-authored-by: mladenplaninicic <[email protected]> Co-authored-by: Gina Biondo <[email protected]>
baloise · Sep 28, 2023 · 01cfd56 · 01cfd56
1 parent 28fff55
commit 01cfd56
Show file tree

Hide file tree

Showing 362 changed files with 9,279 additions and 498 deletions.
diff --git a/.build/data/tags.json b/.build/data/tags.json
@@ -1 +1 @@
-["bal-accordion","bal-app","bal-badge","bal-button","bal-card","bal-carousel","bal-checkbox","bal-close","bal-content","bal-data","bal-date","bal-divider","bal-field","bal-file-upload","bal-footer","bal-form","bal-heading","bal-hint","bal-icon","bal-input","bal-label","bal-list","bal-logo","bal-modal","bal-navbar","bal-notification","bal-number-input","bal-pagination","bal-popover","bal-progress-bar","bal-radio","bal-select","bal-shape","bal-sheet","bal-snackbar","bal-spinner","bal-stack","bal-stage","bal-step-item","bal-steps","bal-table","bal-tabs","bal-tag","bal-text","bal-time-input","bal-toast","bal-tooltip"]
+["bal-accordion","bal-app","bal-badge","bal-button","bal-card","bal-carousel","bal-checkbox","bal-close","bal-content","bal-data","bal-date","bal-divider","bal-field","bal-file-upload","bal-footer","bal-form","bal-heading","bal-hint","bal-icon","bal-input","bal-label","bal-list","bal-logo","bal-modal","bal-nav","bal-notification","bal-number-input","bal-pagination","bal-popover","bal-popup","bal-progress-bar","bal-radio","bal-select","bal-shape","bal-sheet","bal-snackbar","bal-spinner","bal-stack","bal-stage","bal-step-item","bal-steps","bal-table","bal-tabs","bal-tag","bal-text","bal-time-input","bal-toast","bal-tooltip"]
diff --git a/.build/generate-css-utils.js b/.build/generate-css-utils.js
@@ -19,6 +19,7 @@ async function main() {
   generateRadius()
   generateShadow()
   generateTypography()
+  generateZIndex()
   generateCompactOverride()
 }
 
@@ -154,9 +155,19 @@ async function generateShadow() {
   await file.write(path.join(SASS_PATH, 'shadow.helpers.sass'), [...lines, ''].join('\n'))
 }
 
+async function generateZIndex() {
+  const zIndex = BaloiseDesignToken.zIndex
+  const lines = []
+  for (const r in zIndex) {
+    lines.push(`.has-z-index-${r}`)
+    lines.push(`  z-index: var(--bal-z-index-${r}) !important`)
+    lines.push(``)
+  }
+  await file.write(path.join(SASS_PATH, 'z-index.helpers.sass'), [...lines, ''].join('\n'))
+}
+
 async function generateTypography() {
   const sizes = BaloiseDesignToken.typography.sizes
-  const spacing = BaloiseDesignToken.spacing
   const lines = []
   const legacyLines = []
 

diff --git a/.build/tokens-generator.js b/.build/tokens-generator.js
@@ -36,6 +36,7 @@ async function main() {
   generateSpacings()
   generateAnimation()
   generateBorder()
+  generateZIndex()
 
   await file.save(path.join(SRC_PATH, 'tokens.ts'), toTs())
   await file.save(path.join(DIST_PATH, 'tokens.docs.json'), JSON.stringify(BaloiseDesignToken))
@@ -297,4 +298,11 @@ function generateBorder() {
   addToken(`border-width-normal`, `border-width-normal`, border.width)
 }
 
+function generateZIndex() {
+  const zIndex = BaloiseDesignToken.zIndex
+  for (const r in zIndex) {
+    addToken(`z-index-${r}`, `z-index-${r}`, zIndex[r].value)
+  }
+}
+
 main()
diff --git a/.changeset/afraid-elephants-grow.md b/.changeset/afraid-elephants-grow.md
@@ -0,0 +1,6 @@
+---
+'@baloise/design-system-components': minor
+---
+
+Introducing the new and optimized `bal-nav` component. Designed for enhanced SEO and performance, 
+it will replace the `bar-navigation` component in the upcoming breaking version release.
diff --git a/.changeset/honest-radios-teach.md b/.changeset/honest-radios-teach.md
@@ -0,0 +1,5 @@
+---
+'@baloise/design-system-components': minor
+---
+
+add new component popup
diff --git a/.changeset/hot-queens-learn.md b/.changeset/hot-queens-learn.md
@@ -0,0 +1,7 @@
+---
+'@baloise/design-system-components': major
+'@baloise/design-system-tokens': major
+'@baloise/design-system-css': major
+---
+
+Create z-index design tokens and adjust the components.
diff --git a/.changeset/two-badgers-scream.md b/.changeset/two-badgers-scream.md
@@ -0,0 +1,5 @@
+---
+'@baloise/design-system-components': patch
+---
+
+Refine the appearance of disabled small controls on the pagination.
diff --git a/.gitignore b/.gitignore
@@ -7,6 +7,8 @@ yarn-error.log*
 package-lock.json-e
 report.html
 reg.json
+demo/
+hydrate/
 
 # Diagnostic reports (https://nodejs.org/api/report.html)
 report.[0-9]*.[0-9]*.[0-9]*.[0-9]*.json

diff --git a/CHANGELOG_NEXT.md b/CHANGELOG_NEXT.md
@@ -120,8 +120,6 @@ See [Conventional Commits](https://conventionalcommits.org) for commit guideline
 
 
 
-
-
 ## [10.24.2](https://github.com/baloise/design-system/compare/v10.24.1...v10.24.2) (2022-10-03)
 
 ### Bug Fixes
@@ -131,7 +129,6 @@ See [Conventional Commits](https://conventionalcommits.org) for commit guideline
 
 ## [10.24.1](https://github.com/baloise/design-system/compare/v10.24.0...v10.24.1) (2022-10-03)
 
-
 ### Bug Fixes
 
 * bind balBlur to onTouch in angular, fixes [#453](https://github.com/baloise/design-system/issues/453),[#623](https://github.com/baloise/design-system/issues/623) ([a02e597](https://github.com/baloise/design-system/commit/a02e597f69ee3102920b85d9b1d9736aac98f0c3))
@@ -180,7 +177,6 @@ See [Conventional Commits](https://conventionalcommits.org) for commit guideline
 
 ## [10.23.1](https://github.com/baloise/design-system/compare/v10.23.0...v10.23.1) (2022-09-27)
 
-
 ### Bug Fixes
 
 * **angular:** provide missing component modules ([774696f](https://github.com/baloise/design-system/commit/774696f7accc842abc13b0f379cf6641664b92c5))
@@ -191,7 +187,6 @@ See [Conventional Commits](https://conventionalcommits.org) for commit guideline
 * **stage:** stage position ([2839688](https://github.com/baloise/design-system/commit/28396884d9dab96aa2a459a4d4bb5fe28b97d173))
 * **tabs:** add scroll overflow ([4b0024c](https://github.com/baloise/design-system/commit/4b0024cbae08d08b30b2afd296601ae990c5e004))
 
-
 ## [10.23.0](https://github.com/baloise/design-system/compare/v10.22.2...v10.23.0) (2022-09-26)
 
 ### Features
@@ -260,7 +255,6 @@ See [Conventional Commits](https://conventionalcommits.org) for commit guideline
 * **stage:** add shadow to text, title, back-link, button and icon. Closes [#472](https://github.com/baloise/design-system/issues/472) ([d64edba](https://github.com/baloise/design-system/commit/d64edba5142ba41a333243a15e504796a705df0a))
 * **toast:** adjust width for tablet and desktop ([d04f3a5](https://github.com/baloise/design-system/commit/d04f3a557c43a2e2d17f5a5c2a2a14a67d530612))
 
-
 ## [10.22.0](https://github.com/baloise/design-system/compare/v10.21.2...v10.22.0) (2022-09-19)
 
 ### Features
@@ -356,7 +350,6 @@ See [Conventional Commits](https://conventionalcommits.org) for commit guideline
 
 ## [10.20.2](https://github.com/baloise/design-system/compare/v10.20.0...v10.20.2) (2022-09-02)
 
-
 ### Bug Fixes
 
 * **closable-popover:** fix the click outside on popover ([f44dfe0](https://github.com/baloise/design-system/commit/f44dfe0bea15bcbe42e43f8eb0d1b7dc9e4c4b7a))
@@ -770,7 +763,6 @@ See [Conventional Commits](https://conventionalcommits.org) for commit guideline
 * **tabs:** add hidden, spaceless and float ([bed5b37](https://github.com/baloise/design-system/commit/bed5b37cd398f6fe842d3756ab2b23243daa462b))
 * **tabs:** add hidden, spaceless and float ([1111288](https://github.com/baloise/design-system/commit/1111288f66f137e6ad68d2aeb8afce8e66d4dc75))
 
-
 ### Bug Fixes
 
 * **button:** adjust start height to 48px ([1b11e1b](https://github.com/baloise/design-system/commit/1b11e1b18bdccf2f73231fd32921b98b2ef8f395))

diff --git a/CHANGELOG_v12.md b/CHANGELOG_v12.md
@@ -199,7 +199,6 @@ Follow the migration guide [Migration from 11.x to 12.x](https://baloise-design-
 ## 10.24.5 (2022-10-05)
 
 
-
 ## [11.0.18](https://github.com/baloise/design-system/compare/v11.0.17...v11.0.18) (2022-12-05)
 
 
@@ -354,7 +353,6 @@ Follow the migration guide [Migration from 11.x to 12.x](https://baloise-design-
 * **radio:** group elements sends focus and blur event. Closes [#623](https://github.com/baloise/design-system/issues/623) ([d044693](https://github.com/baloise/design-system/commit/d0446935804b88b765d2c1c0879519b2e909fbb7))
 * **select:** typeahead + remote accept initial value. Closes [#603](https://github.com/baloise/design-system/issues/603), [#819](https://github.com/baloise/design-system/issues/819) ([5f11bb9](https://github.com/baloise/design-system/commit/5f11bb9dd8a9d93b09f48bba5fed4280ee7d3078))
 
-
 ### Performance Improvements
 
 * **logo:** add lazy loading ([d4d7820](https://github.com/baloise/design-system/commit/d4d78201bdb85464b5f7450d8feb590ab3224d62))

diff --git a/cspell.json b/cspell.json
@@ -12,6 +12,7 @@
     "adipisicing",
     "aliqua",
     "amet",
+    "Anlegen",
     "asterix",
     "autocorrect",
     "baloise",
@@ -56,6 +57,7 @@
     "filesize",
     "filesize.js",
     "fileupload",
+    "Finanzierung",
     "firstname",
     "flexbox",
     "footmobile",
@@ -80,6 +82,9 @@
     "isnil",
     "isstring",
     "Jasmin",
+    "Karten",
+    "Kontakt",
+    "Konten",
     "labore",
     "Lastname",
     "Laurent",
@@ -108,6 +113,7 @@
     "Schliessen",
     "sed",
     "selopt",
+    "Servcies",
     "sit",
     "Sluiten",
     "snackbars",
@@ -126,11 +132,25 @@
     "ut",
     "vcentered",
     "Versichern",
+    "Versorgen",
     "verticaly",
     "Viewports",
     "vite",
     "vue",
     "WCAG",
+    "Kundenservice",
+    "Sprache",
+    "wählen",
+    "privatkunden",
+    "Privatkunden",
+    "Wohnen",
+    "Recht",
+    "Hausratversicherung",
+    "Schaden",
+    "melden",
+    "Versicherungslösungen",
+    "Suchen",
+    "Deutsch",
     "xsmall",
     "Versichern",
     "xsmall",

diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -179,5 +179,8 @@
     "vue": "~3.3.4",
     "workbox-build": "~4.3.1",
     "zone.js": "~0.11.4"
+  },
+  "dependencies": {
+    "immer": "^10.0.2"
   }
 }
diff --git a/packages/components/.storybook/main.js b/packages/components/.storybook/main.js
@@ -16,6 +16,7 @@ module.exports = {
   previewHead: head => `
     ${head}
     <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />
+    <meta name="google-site-verification" content="V-xdh42LRf35hk9zTuOMYVMciysyMM3MoUTljpUMn4Q" />
     <link rel="stylesheet" type="text/css" href="assets/css/font.css" />
     <link rel="stylesheet" type="text/css" href="assets/css/preview.css" />
     <link rel="stylesheet" type="text/css" href="assets/css/swot.css" />

diff --git a/packages/components/.storybook/manager-head.html b/packages/components/.storybook/manager-head.html
@@ -6,3 +6,4 @@
 <link rel="stylesheet" type="text/css" href="assets/css/framework.css" />
  <link rel="stylesheet" type="text/css" href="assets/css/font.css" />
 <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />
+<meta name="google-site-verification" content="V-xdh42LRf35hk9zTuOMYVMciysyMM3MoUTljpUMn4Q" />
diff --git a/packages/components/config/doc.components.ts b/packages/components/config/doc.components.ts
@@ -24,6 +24,7 @@ export const docComponents = [
   'bal-doc-tokens-text-shadow',
   'bal-doc-tokens-shadow',
   'bal-doc-tokens-spacing',
+  'bal-doc-tokens-z-index',
   'bal-doc-code-sandbox',
   'bal-doc-preview',
   'bal-doc-usage',

diff --git a/packages/components/config/stencil.basic.config.ts b/packages/components/config/stencil.basic.config.ts
@@ -111,6 +111,18 @@ export const StencilBaseConfig: Config = {
     { components: ['bal-table'] },
     { components: ['bal-tabs', 'bal-tab-item'] },
     { components: ['bal-tag', 'bal-tag-group'] },
+    {
+      components: [
+        'bal-nav',
+        'bal-nav-link',
+        'bal-nav-link-grid',
+        'bal-nav-link-grid-col',
+        'bal-nav-link-group',
+        'bal-nav-menu-bar',
+        'bal-nav-menu-flyout',
+        'bal-nav-meta-bar',
+      ],
+    },
     //
     // form components
     { components: ['bal-checkbox', 'bal-checkbox-group'] },

diff --git a/packages/components/public/assets/code/angular/src/styles.scss b/packages/components/public/assets/code/angular/src/styles.scss
@@ -19,3 +19,4 @@
 @import '@baloise/design-system-css/css/shadow';
 @import '@baloise/design-system-css/css/spacing';
 @import '@baloise/design-system-css/css/typography';
+@import '@baloise/design-system-css/css/z-index';
diff --git a/packages/components/public/assets/code/html/index.ts b/packages/components/public/assets/code/html/index.ts
@@ -19,6 +19,7 @@ import "@baloise/design-system-css/css/radius.css";
 import "@baloise/design-system-css/css/shadow.css";
 import "@baloise/design-system-css/css/spacing.css";
 import "@baloise/design-system-css/css/typography.css";
+import "@baloise/design-system-css/css/z-index.css";
 
 import { defineCustomElements } from "@baloise/design-system-components/loader";
 import { balSnackbarController, BalToastController } from "@baloise/design-system-components";

diff --git a/packages/components/public/assets/code/react/src/index.tsx b/packages/components/public/assets/code/react/src/index.tsx
@@ -22,6 +22,7 @@ import "@baloise/design-system-css/css/radius.css";
 import "@baloise/design-system-css/css/shadow.css";
 import "@baloise/design-system-css/css/spacing.css";
 import "@baloise/design-system-css/css/typography.css";
+import "@baloise/design-system-css/css/z-index.css";
 
 import App from "./App";
 

diff --git a/packages/components/public/assets/images/navigation/navigation.png b/packages/components/public/assets/images/navigation/navigation.png