feat(headers): Global Headers components (squashed)

author LE DIOURON Kevin <[email protected]> 1626946275 +0200 committer LE DIOURON Kevin <[email protected]> 1644573012 +0100 parent c27e1e1 author LE DIOURON Kevin <[email protected]> 1626946275 +0200 committer LE DIOURON Kevin <[email protected]> 1644572436 +0100 feat(navbars): add Global Headers components chore(review): fix bad URLs, JS formatting and SCSS errors chore(review): remove .global class reference in migration page fix(misc): WIP reviews from Louis-Maxime fix(misc): WIP reviews from Louis-Maxime fix(logo): correct scss for imgs & svgs fix(headers): align on the bottom of the text Fix(Examples) : in large viewport, orange bar below active item located to high + extra border in Exampes/NavBar (OBS) Signed-off-by: Isabelle Chanclou <[email protected]> Fix(Examples) : in small viewport, orange bar below active item located to high Signed-off-by: Isabelle Chanclou <[email protected]> Fix(global header) : add collapse for viewport 768-1023px Signed-off-by: Isabelle Chanclou <[email protected]> fix(navbar): spacing between last-child fix(minimized): [wip] spacing between icons, remove important later fix(style): [wip] clean navbar css review: add navbar static and fixed examples fix(scss) : [WIP] clean css fix(scss): [WIP] clean orange-navbar fix(scss): change comment to disable important check Fix(orange-navbar): height of global header and all its variants have a correct height in small and larger breakpoints Signed-off-by: Isabelle Chanclou <[email protected]> Fix(orange-navbar): height of global header and all its variants have a correct height in small and larger breakpoints Signed-off-by: Isabelle Chanclou <[email protected]> fix(html): Revamp of the html for examples. Some checks to do (height of elements, ...) fix(html): shortcode template for orange-navbar examples fix(menus): Ellipsis for when a text is wider than 8rem Fix for responsive part to fit to others atm Amend the large viewport container misalignment Sticky header example (#1089) * Add(Examples): add a sticky global header + supra bar example Signed-off-by: Isabelle Chanclou <[email protected]> * fix(misc): Shenanigans to fix css-side * Backport some changes * Minor fixes * fix(fixed): Have the supra + global properly fixed and sticky at the top. Todo : top 40px (into rem) Co-authored-by: Isabelle Chanclou <[email protected]> Co-authored-by: LE DIOURON Kevin <[email protected]> fix(sticky): Allocate some height to display both supra + global navbars with stickiness fix(nav-link): Show anew the active selector fix(nav-link): revert to the "original" padding as in the main branch Can't even remember why the padding in line 203 has been changed... Icons spacing + icons alignment fix(supra): Change the padding-bottom variable to fix the missing pixel Revert navbar-fixed and navbar-static examples fix(sticky): Fix the example to have both navbars into the header markup Add fake navbar-sticky images to fix 'npm run docs' Minimized fixed + burger Fix example fix(sticky): remove grey container and banner role fix(overflow): Revert the overflowing of content since it doesn't suit us atm Small changes in md- breakpoints fix(breakpoint): menu for doc navbar compatible with md breakpoint md breakpoint . Minor fix on supra + .active fix(docs): Use shortcodes for examples, add a condition to hide basket icon. TODO (or not ?): fix wrapping in docs Minor fixes chore(merge main) patched commit → c1222d6 (#1063) feat(spinners): reintegrate growing spinners from v4 (#1041) Signed-off-by: louismaximepiton <[email protected]> Co-authored-by: Julien Déramond <[email protected]> chore(dev-deps): drop `delay-cli` and add `sirv-cli` (#1005) chore(merge main) patched commit → 76802e2 (#1071) fix(#1072): vertically align labels for switches (#1081) fix(forms): black outline for focused switches (#1082) chore(merge main) patched commit → dc09509 (#1080) fix(accordion): remove active text color on focus (#1087) chore(merge main) patched commit → a805330 (#1090) chore(merge main) patched commit → 8f11c52 (#1092)
Orange-OpenSource · Feb 11, 2022 · f48b703 · f48b703
1 parent c27e1e1
commit f48b703
Show file tree

Hide file tree

Showing 102 changed files with 11,285 additions and 12,750 deletions.
diff --git a/.bundlewatch.config.json b/.bundlewatch.config.json
@@ -30,7 +30,7 @@
     },
     {
       "path": "./dist/css/boosted.min.css",
-      "maxSize": "26.4 kB"
+      "maxSize": "26.5 kB"
     },
     {
       "path": "./dist/js/boosted.bundle.js",

diff --git a/.cspell.json b/.cspell.json
@@ -12,6 +12,7 @@
     "Blockquotes",
     "Bootstrappers",
     "borderless",
+    "Brotli",
     "browserslist",
     "browserslistrc",
     "btncheck",
@@ -49,6 +50,7 @@
     "française",
     "fullscreen",
     "getbootstrap",
+    "Gaël",
     "Grayscale",
     "Helv",
     "Hoverable",
@@ -76,8 +78,10 @@
     "offcanvas",
     "offcanvases",
     "opensource",
+    "Packagist",
     "pinterest",
     "popperjs",
+    "Poupard",
     "prebuild",
     "precompiled",
     "preconnect",
@@ -127,13 +131,17 @@
     "بالعالم",
     "مرحبًا"
   ],
-  "language": "en, en-US",
+  "language": "en-US",
   "files": [
-    "site/**/*.md"
+    "**/*.md"
   ],
   "ignorePaths": [
     ".cspell.json",
-    "*.min.*"
+    "dist/",
+    "*.min.*",
+    "**/*rtl*",
+    "**/tests/**",
+    "CHANGELOG.md"
   ],
   "useGitignore": true
 }
diff --git a/.github/workflows/cspell.yml b/.github/workflows/cspell.yml
@@ -0,0 +1,34 @@
+name: cspell
+
+on:
+  push:
+    branches-ignore:
+      - "dependabot/**"
+  pull_request:
+  workflow_dispatch:
+
+env:
+  FORCE_COLOR: 2
+  NODE: 16
+
+jobs:
+  cspell:
+    runs-on: ubuntu-latest
+
+    steps:
+      - name: Bail early
+        if: github.event_name == 'pull_request' && contains(github.event.pull_request.labels.*.name, 'skip:ci')
+        run: exit 0
+
+      - name: Clone repository
+        uses: actions/checkout@v2
+        if: github.event_name == 'push' || (github.event_name == 'pull_request' && !contains(github.event.pull_request.labels.*.name, 'skip:ci'))
+
+      - name: Run cspell
+        uses: streetsidesoftware/cspell-action@v1
+        with:
+          config: ".cspell.json"
+          files: "**/*.md"
+          inline: error
+          incremental_files_only: false
+        if: github.event_name == 'push' || (github.event_name == 'pull_request' && !contains(github.event.pull_request.labels.*.name, 'skip:ci'))
diff --git a/.github/workflows/docs.yml b/.github/workflows/docs.yml
@@ -50,6 +50,19 @@ jobs:
         run: npm ci
         if: github.event_name == 'push' || (github.event_name == 'pull_request' && !contains(github.event.pull_request.labels.*.name, 'skip:ci'))
 
-      - name: Test docs
-        run: npm run docs
+      - name: Build docs
+        run: npm run docs-build
+        if: github.event_name == 'push' || (github.event_name == 'pull_request' && !contains(github.event.pull_request.labels.*.name, 'skip:ci'))
+
+      - name: Validate HTML
+        run: npm run docs-vnu
+        if: github.event_name == 'push' || (github.event_name == 'pull_request' && !contains(github.event.pull_request.labels.*.name, 'skip:ci'))
+
+      - name: Run linkinator
+        uses: JustinBeckwith/linkinator-action@v1
+        with:
+          paths: _site
+          recurse: true
+          verbosity: error
+          skip: "^(?!http://localhost)"
         if: github.event_name == 'push' || (github.event_name == 'pull_request' && !contains(github.event.pull_request.labels.*.name, 'skip:ci'))
diff --git a/.github/workflows/pa11y.yml b/.github/workflows/pa11y.yml
@@ -62,7 +62,7 @@ jobs:
       - name: Update sri
         run: npm run release-sri
         if: github.event_name == 'push' || (github.event_name == 'pull_request' && !contains(github.event.pull_request.labels.*.name, 'skip:ci') && !contains(github.event.pull_request.labels.*.name, 'skip:pa11y'))
-       
+
       - name: Test docs
         run: npm run docs-build
         if: github.event_name == 'push' || (github.event_name == 'pull_request' && !contains(github.event.pull_request.labels.*.name, 'skip:ci') && !contains(github.event.pull_request.labels.*.name, 'skip:pa11y'))

diff --git a/README.md b/README.md
@@ -58,7 +58,7 @@ Read the [Getting started page](https://boosted.orange.com/docs/5.1/getting-star
 [![JS gzip size](https://img.badgesize.io/Orange-OpenSource/Orange-Boosted-Bootstrap/main/dist/js/boosted.min.js?compression=gzip&label=JS%20gzip%20size)](https://github.com/Orange-OpenSource/Orange-Boosted-Bootstrap/blob/main/dist/js/boosted.min.js)
 [![JS Brotli size](https://img.badgesize.io/Orange-OpenSource/Orange-Boosted-Bootstrap/main/dist/js/boosted.min.js?compression=brotli&label=JS%20Brotli%20size)](https://github.com/Orange-OpenSource/Orange-Boosted-Bootstrap/blob/main/dist/js/boosted.min.js)
 [![BrowserStack Status](https://automate.browserstack.com/badge.svg?badge_key=ZGR2VnBvQ1F6ajhoNDIwWEF3Wm1RcjJlak1rdFZpRXJSdFZjTjJxQU9udz0tLU5wS2lrODNRTkswdzZZVUxjSHFpTHc9PQ==--714e60c953cf25bd52082a2b494eb881db1736c0)](https://automate.browserstack.com/public-build/ZGR2VnBvQ1F6ajhoNDIwWEF3Wm1RcjJlak1rdFZpRXJSdFZjTjJxQU9udz0tLU5wS2lrODNRTkswdzZZVUxjSHFpTHc9PQ==--714e60c953cf25bd52082a2b494eb881db1736c0)
-[![JS Delivr](https://data.jsdelivr.com/v1/package/npm/boosted/badge)](https://www.jsdelivr.com/package/npm/boosted)
+[![JSDelivr](https://data.jsdelivr.com/v1/package/npm/boosted/badge)](https://www.jsdelivr.com/package/npm/boosted)
 
 ## What's included
 

diff --git a/build/build-plugins.js b/build/build-plugins.js
@@ -15,8 +15,8 @@ const globby = require('globby')
 const { babel } = require('@rollup/plugin-babel')
 const banner = require('./banner.js')
 
-const srcPath = path.resolve(__dirname, '../js/src/').replace(/\\/g, '/')
-const jsFiles = globby.sync(srcPath + '/**/*.js')
+const sourcePath = path.resolve(__dirname, '../js/src/').replace(/\\/g, '/')
+const jsFiles = globby.sync(sourcePath + '/**/*.js')
 
 // Array which holds the resolved plugins
 const resolvedPlugins = []
@@ -31,7 +31,7 @@ for (const file of jsFiles) {
     dist: file.replace('src', 'dist'),
     fileName: path.basename(file),
     className: filenameToEntity(path.basename(file))
-    // safeClassName: filenameToEntity(path.relative(srcPath, file))
+    // safeClassName: filenameToEntity(path.relative(sourcePath, file))
   })
 }
 

diff --git a/build/generate-sri.js b/build/generate-sri.js
@@ -60,9 +60,9 @@ const files = [
 ]
 
 for (const file of files) {
-  fs.readFile(file.file, 'utf8', (err, data) => {
-    if (err) {
-      throw err
+  fs.readFile(file.file, 'utf8', (error, data) => {
+    if (error) {
+      throw error
     }
 
     const algo = 'sha384'

diff --git a/build/rollup.config.js b/build/rollup.config.js
@@ -9,7 +9,7 @@ const banner = require('./banner.js')
 const BUNDLE = process.env.BUNDLE === 'true'
 const ESM = process.env.ESM === 'true'
 
-let fileDest = `boosted${ESM ? '.esm' : ''}`
+let fileDestination = `boosted${ESM ? '.esm' : ''}`
 const external = ['@popperjs/core']
 const plugins = [
   babel({
@@ -24,7 +24,7 @@ const globals = {
 }
 
 if (BUNDLE) {
-  fileDest += '.bundle'
+  fileDestination += '.bundle'
   // Remove last entry in external array to bundle Popper
   external.pop()
   delete globals['@popperjs/core']
@@ -41,7 +41,7 @@ const rollupConfig = {
   input: path.resolve(__dirname, `../js/index.${ESM ? 'esm' : 'umd'}.js`),
   output: {
     banner,
-    file: path.resolve(__dirname, `../dist/js/${fileDest}.js`),
+    file: path.resolve(__dirname, `../dist/js/${fileDestination}.js`),
     format: ESM ? 'esm' : 'umd',
     globals,
     generatedCode: 'es2015'

diff --git a/js/index.esm.js b/js/index.esm.js
@@ -14,6 +14,7 @@ export { default as Collapse } from './src/collapse'
 export { default as Dropdown } from './src/dropdown'
 export { default as Modal } from './src/modal'
 export { default as Offcanvas } from './src/offcanvas'
+export { default as OrangeNavbar } from './src/orange-navbar'
 export { default as Popover } from './src/popover'
 export { default as ScrollSpy } from './src/scrollspy'
 export { default as Tab } from './src/tab'

diff --git a/js/index.umd.js b/js/index.umd.js
@@ -12,6 +12,7 @@ import Collapse from './src/collapse'
 import Dropdown from './src/dropdown'
 import Modal from './src/modal'
 import Offcanvas from './src/offcanvas'
+import OrangeNavbar from './src/orange-navbar'
 import Popover from './src/popover'
 import ScrollSpy from './src/scrollspy'
 import Tab from './src/tab'
@@ -27,6 +28,7 @@ export default {
   Dropdown,
   Modal,
   Offcanvas,
+  OrangeNavbar,
   Popover,
   ScrollSpy,
   Tab,

diff --git a/js/src/carousel.js b/js/src/carousel.js
@@ -245,27 +245,29 @@ class Carousel extends BaseComponent {
   }
 
   _addTouchEventListeners() {
-    for (const itemImg of SelectorEngine.find(SELECTOR_ITEM_IMG, this._element)) {
-      EventHandler.on(itemImg, EVENT_DRAG_START, event => event.preventDefault())
+    for (const img of SelectorEngine.find(SELECTOR_ITEM_IMG, this._element)) {
+      EventHandler.on(img, EVENT_DRAG_START, event => event.preventDefault())
     }
 
     const endCallBack = () => {
-      if (this._config.pause === 'hover') {
-        // If it's a touch-enabled device, mouseenter/leave are fired as
-        // part of the mouse compatibility events on first tap - the carousel
-        // would stop cycling until user tapped out of it;
-        // here, we listen for touchend, explicitly pause the carousel
-        // (as if it's the second time we tap on it, mouseenter compat event
-        // is NOT fired) and after a timeout (to allow for mouse compatibility
-        // events to fire) we explicitly restart cycling
-
-        this.pause()
-        if (this.touchTimeout) {
-          clearTimeout(this.touchTimeout)
-        }
+      if (this._config.pause !== 'hover') {
+        return
+      }
+
+      // If it's a touch-enabled device, mouseenter/leave are fired as
+      // part of the mouse compatibility events on first tap - the carousel
+      // would stop cycling until user tapped out of it;
+      // here, we listen for touchend, explicitly pause the carousel
+      // (as if it's the second time we tap on it, mouseenter compat event
+      // is NOT fired) and after a timeout (to allow for mouse compatibility
+      // events to fire) we explicitly restart cycling
 
-        this.touchTimeout = setTimeout(event => this.cycle(event), TOUCHEVENT_COMPAT_WAIT + this._config.interval)
+      this.pause()
+      if (this.touchTimeout) {
+        clearTimeout(this.touchTimeout)
       }
+
+      this.touchTimeout = setTimeout(event => this.cycle(event), TOUCHEVENT_COMPAT_WAIT + this._config.interval)
     }
 
     const swipeConfig = {

diff --git a/js/src/collapse.js b/js/src/collapse.js
@@ -70,7 +70,7 @@ class Collapse extends BaseComponent {
     for (const elem of toggleList) {
       const selector = getSelectorFromElement(elem)
       const filterElement = SelectorEngine.find(selector)
-        .filter(foundElem => foundElem === this._element)
+        .filter(foundElement => foundElement === this._element)
 
       if (selector !== null && filterElement.length) {
         this._triggerArray.push(elem)
@@ -185,9 +185,9 @@ class Collapse extends BaseComponent {
     this._element.classList.remove(CLASS_NAME_COLLAPSE, CLASS_NAME_SHOW)
 
     for (const trigger of this._triggerArray) {
-      const elem = getElementFromSelector(trigger)
+      const element = getElementFromSelector(trigger)
 
-      if (elem && !this._isShown(elem)) {
+      if (element && !this._isShown(element)) {
         this._addAriaAndCollapsedClass([trigger], false)
       }
     }
@@ -240,33 +240,28 @@ class Collapse extends BaseComponent {
   _getFirstLevelChildren(selector) {
     const children = SelectorEngine.find(CLASS_NAME_DEEPER_CHILDREN, this._config.parent)
     // remove children if greater depth
-    return SelectorEngine.find(selector, this._config.parent).filter(elem => !children.includes(elem))
+    return SelectorEngine.find(selector, this._config.parent).filter(element => !children.includes(element))
   }
 
   _addAriaAndCollapsedClass(triggerArray, isOpen) {
     if (!triggerArray.length) {
       return
     }
 
-    for (const elem of triggerArray) {
-      if (isOpen) {
-        elem.classList.remove(CLASS_NAME_COLLAPSED)
-      } else {
-        elem.classList.add(CLASS_NAME_COLLAPSED)
-      }
-
-      elem.setAttribute('aria-expanded', isOpen)
+    for (const element of triggerArray) {
+      element.classList.toggle(CLASS_NAME_COLLAPSED, !isOpen)
+      element.setAttribute('aria-expanded', isOpen)
     }
   }
 
   // Static
   static jQueryInterface(config) {
-    return this.each(function () {
-      const _config = {}
-      if (typeof config === 'string' && /show|hide/.test(config)) {
-        _config.toggle = false
-      }
+    const _config = {}
+    if (typeof config === 'string' && /show|hide/.test(config)) {
+      _config.toggle = false
+    }
 
+    return this.each(function () {
       const data = Collapse.getOrCreateInstance(this, _config)
 
       if (typeof config === 'string') {