Merge branch 'main' into main-jd-add-paragraph-about-icons-rendering

.eslintignore

@@ -5,4 +5,4 @@
 /js/coverage/
 /site/static/sw.js
 /site/layouts/partials/
-/stories/auto/
+/stories/

.eslintrc.json

@@ -51,6 +51,7 @@
         "SwitchCase": 1
       }
     ],
+    "logical-assignment-operators": "off",
     "max-params": [
       "warn",
       5
@@ -75,6 +76,7 @@
       "error",
       "after"
     ],
+    "prefer-object-has-own": "off",
     "prefer-template": "error",
     "semi": [
       "error",
@@ -195,26 +197,6 @@
         "unicorn/no-array-for-each": "off"
       }
     },
-    {
-      "files": [
-        "stories/**"
-      ],
-      "env": {
-        "browser": false,
-        "node": true
-      },
-      "parserOptions": {
-        "sourceType": "script"
-      },
-      "rules": {
-        "no-await-in-loop": "off",
-        "no-console": "off",
-        "no-multi-str": "off",
-        "strict": "error",
-        "unicorn/prefer-top-level-await": "off"
-      },
-      "extends": ["plugin:storybook/recommended"]
-    },
     {
       "files": [
         "**/*.md"

.github/PULL_REQUEST_TEMPLATE.md

@@ -43,7 +43,7 @@ _Note: Please transform `- [ ]` into `- (NA)` in the description when things are
 
 #### Design
 
-- [ ] My change respects the design guidelines defined in [Orange Design System](https://system.design.orange.com/0c1af118d/p/8118d1-web)
+- [ ] My change respects the design guidelines defined in [Orange Design System](https://oran.ge/dsweb)
 - [ ] My change is compatible with a responsive display
 
 #### Development

.github/workflows/js.yml

@@ -49,6 +49,7 @@ jobs:
 
       - name: Run Coveralls
         uses: coverallsapp/github-action@v2
+        if: ${{ !github.event.repository.fork }}
         with:
           github-token: "${{ secrets.GITHUB_TOKEN }}"
           path-to-lcov: "./js/coverage/lcov.info"

.github/workflows/pa11y.yml

@@ -32,7 +32,7 @@ jobs:
           node-version: "${{ env.NODE }}"
 
       - name: Set up npm cache
-        uses: actions/cache@v3.3.2
+        uses: actions/cache@v4.0.0
         with:
           path: ~/.npm
           key: ${{ runner.os }}-node-${{ env.NODE }}-${{ hashFiles('package.json') }}-${{ hashFiles('package-lock.json') }}

.github/workflows/percy.yml

@@ -30,7 +30,7 @@ jobs:
           node-version: "${{ env.NODE }}"
 
       - name: Set up npm cache
-        uses: actions/cache@v3.3.2
+        uses: actions/cache@v4.0.0
         with:
           path: ~/.npm
           key: ${{ runner.os }}-node-${{ env.NODE }}-${{ hashFiles('package.json') }}-${{ hashFiles('package-lock.json') }}

hugo.yml

@@ -73,7 +73,7 @@ params:
   icons:                            "https://oran.ge/icons"
   bootstrap:                        "https://getbootstrap.com"
   ods:
-    web:                            "https://system.design.orange.com/0c1af118d/n/76065f"
+    web:                            "https://oran.ge/dsweb"
 
   download:
     source:                         "https://github.com/Orange-OpenSource/Orange-Boosted-Bootstrap/archive/v5.3.2.zip"

js/src/dom/selector-engine.js

@@ -26,10 +26,10 @@ const getSelector = element => {
       hrefAttribute = `#${hrefAttribute.split('#')[1]}`
     }
 
-    selector = hrefAttribute && hrefAttribute !== '#' ? parseSelector(hrefAttribute.trim()) : null
+    selector = hrefAttribute && hrefAttribute !== '#' ? hrefAttribute.trim() : null
   }
 
-  return selector
+  return selector ? selector.split(',').map(sel => parseSelector(sel)).join(',') : null
 }
 
 const SelectorEngine = {

js/src/modal.js

@@ -11,7 +11,9 @@ import SelectorEngine from './dom/selector-engine.js'
 import Backdrop from './util/backdrop.js'
 import { enableDismissTrigger } from './util/component-functions.js'
 import FocusTrap from './util/focustrap.js'
-import { defineJQueryPlugin, isRTL, isVisible, reflow } from './util/index.js'
+import {
+  defineJQueryPlugin, isRTL, isVisible, reflow
+} from './util/index.js'
 import ScrollBarHelper from './util/scrollbar.js'
 
 /**

js/src/scrollspy.js

@@ -8,7 +8,9 @@
 import BaseComponent from './base-component.js'
 import EventHandler from './dom/event-handler.js'
 import SelectorEngine from './dom/selector-engine.js'
-import { defineJQueryPlugin, getElement, isDisabled, isVisible } from './util/index.js'
+import {
+  defineJQueryPlugin, getElement, isDisabled, isVisible
+} from './util/index.js'
 
 /**
  * Constants

js/src/tooltip.js

@@ -9,7 +9,9 @@ import * as Popper from '@popperjs/core'
 import BaseComponent from './base-component.js'
 import EventHandler from './dom/event-handler.js'
 import Manipulator from './dom/manipulator.js'
-import { defineJQueryPlugin, execute, findShadowRoot, getElement, getUID, isRTL, noop } from './util/index.js'
+import {
+  defineJQueryPlugin, execute, findShadowRoot, getElement, getUID, isRTL, noop
+} from './util/index.js'
 import { DefaultAllowlist } from './util/sanitizer.js'
 import TemplateFactory from './util/template-factory.js'
 

js/src/util/backdrop.js

@@ -7,7 +7,9 @@
 
 import EventHandler from '../dom/event-handler.js'
 import Config from './config.js'
-import { execute, executeAfterTransition, getElement, reflow } from './index.js'
+import {
+  execute, executeAfterTransition, getElement, reflow
+} from './index.js'
 
 /**
  * Constants

js/tests/unit/carousel.spec.js

@@ -2,7 +2,9 @@ import Carousel from '../../src/carousel.js'
 import EventHandler from '../../src/dom/event-handler.js'
 import { isRTL, noop } from '../../src/util/index.js'
 import Swipe from '../../src/util/swipe.js'
-import { clearFixture, createEvent, getFixture, jQueryMock } from '../helpers/fixture.js'
+import {
+  clearFixture, createEvent, getFixture, jQueryMock
+} from '../helpers/fixture.js'
 
 describe('Carousel', () => {
   const { Simulator, PointerEvent } = window

js/tests/unit/dom/selector-engine.spec.js

@@ -371,6 +371,18 @@ describe('SelectorEngine', () => {
       expect(SelectorEngine.getMultipleElementsFromSelector(testEl)).toEqual(Array.from(fixtureEl.querySelectorAll('.target')))
     })
 
+    it('should get elements if several ids with special chars are given', () => {
+      fixtureEl.innerHTML = [
+        '<div id="test" data-bs-target="#j_id11:exampleModal,#j_id22:exampleModal"></div>',
+        '<div class="target" id="j_id11:exampleModal"></div>',
+        '<div class="target" id="j_id22:exampleModal"></div>'
+      ].join('')
+
+      const testEl = fixtureEl.querySelector('#test')
+
+      expect(SelectorEngine.getMultipleElementsFromSelector(testEl)).toEqual(Array.from(fixtureEl.querySelectorAll('.target')))
+    })
+
     it('should get elements in array, from href if no data-bs-target set', () => {
       fixtureEl.innerHTML = [
         '<a id="test" href=".target"></a>',

js/tests/unit/dropdown.spec.js

@@ -1,7 +1,9 @@
 import EventHandler from '../../src/dom/event-handler.js'
 import Dropdown from '../../src/dropdown.js'
 import { noop } from '../../src/util/index.js'
-import { clearFixture, createEvent, getFixture, jQueryMock } from '../helpers/fixture.js'
+import {
+  clearFixture, createEvent, getFixture, jQueryMock
+} from '../helpers/fixture.js'
 
 describe('Dropdown', () => {
   let fixtureEl

js/tests/unit/modal.spec.js

@@ -1,7 +1,9 @@
 import EventHandler from '../../src/dom/event-handler.js'
 import Modal from '../../src/modal.js'
 import ScrollBarHelper from '../../src/util/scrollbar.js'
-import { clearBodyAndDocument, clearFixture, createEvent, getFixture, jQueryMock } from '../helpers/fixture.js'
+import {
+  clearBodyAndDocument, clearFixture, createEvent, getFixture, jQueryMock
+} from '../helpers/fixture.js'
 
 describe('Modal', () => {
   let fixtureEl
@@ -989,6 +991,35 @@ describe('Modal', () => {
         trigger.click()
       })
     })
+
+    it('should open modal, having special characters in its id', () => {
+      return new Promise(resolve => {
+        fixtureEl.innerHTML = [
+          '<button class="btn btn-primary" data-bs-toggle="modal" data-bs-target="#j_id22:exampleModal">',
+          '   Launch demo modal',
+          '</button>',
+          '<div class="modal fade" id="j_id22:exampleModal" aria-labelledby="exampleModalLabel" aria-hidden="true">',
+          '  <div class="modal-dialog">',
+          '    <div class="modal-content">',
+          '      <div class="modal-body">',
+          '        <p>modal body</p>',
+          '      </div>',
+          '    </div>',
+          '  </div>',
+          '</div>'
+        ].join('')
+
+        const modalEl = fixtureEl.querySelector('.modal')
+        const trigger = fixtureEl.querySelector('[data-bs-toggle="modal"]')
+
+        modalEl.addEventListener('shown.bs.modal', () => {
+          resolve()
+        })
+
+        trigger.click()
+      })
+    })
+
     it('should not prevent default when a click occurred on data-bs-dismiss="modal" where tagName is DIFFERENT than <a> or <area>', () => {
       return new Promise(resolve => {
         fixtureEl.innerHTML = [

js/tests/unit/offcanvas.spec.js

@@ -2,7 +2,9 @@ import EventHandler from '../../src/dom/event-handler.js'
 import Offcanvas from '../../src/offcanvas.js'
 import { isVisible } from '../../src/util/index.js'
 import ScrollBarHelper from '../../src/util/scrollbar.js'
-import { clearBodyAndDocument, clearFixture, createEvent, getFixture, jQueryMock } from '../helpers/fixture.js'
+import {
+  clearBodyAndDocument, clearFixture, createEvent, getFixture, jQueryMock
+} from '../helpers/fixture.js'
 
 describe('Offcanvas', () => {
   let fixtureEl

js/tests/unit/orange-navbar.spec.js

@@ -1,5 +1,7 @@
 import OrangeNavbar from '../../src/orange-navbar.js'
-import { clearFixture, getFixture, createEvent, jQueryMock } from '../helpers/fixture.js'
+import {
+  clearFixture, getFixture, createEvent, jQueryMock
+} from '../helpers/fixture.js'
 
 describe('OrangeNavbar', () => {
   let fixtureEl

js/tests/unit/quantity-selector.spec.js

@@ -1,5 +1,7 @@
 import QuantitySelector from '../../src/quantity-selector.js'
-import { clearFixture, getFixture, createEvent, jQueryMock } from '../helpers/fixture.js'
+import {
+  clearFixture, getFixture, createEvent, jQueryMock
+} from '../helpers/fixture.js'
 
 describe('QuantitySelector', () => {
   let fixtureEl

js/tests/unit/scrollspy.spec.js

@@ -1,6 +1,8 @@
 import EventHandler from '../../src/dom/event-handler.js'
 import ScrollSpy from '../../src/scrollspy.js'
-import { clearFixture, createEvent, getFixture, jQueryMock } from '../helpers/fixture.js'
+import {
+  clearFixture, createEvent, getFixture, jQueryMock
+} from '../helpers/fixture.js'
 
 describe('ScrollSpy', () => {
   let fixtureEl

js/tests/unit/tab.spec.js

@@ -1,5 +1,7 @@
 import Tab from '../../src/tab.js'
-import { clearFixture, createEvent, getFixture, jQueryMock } from '../helpers/fixture.js'
+import {
+  clearFixture, createEvent, getFixture, jQueryMock
+} from '../helpers/fixture.js'
 
 describe('Tab', () => {
   let fixtureEl

js/tests/unit/toast.spec.js

@@ -1,5 +1,7 @@
 import Toast from '../../src/toast.js'
-import { clearFixture, createEvent, getFixture, jQueryMock } from '../helpers/fixture.js'
+import {
+  clearFixture, createEvent, getFixture, jQueryMock
+} from '../helpers/fixture.js'
 
 describe('Toast', () => {
   let fixtureEl

js/tests/unit/tooltip.spec.js

@@ -1,7 +1,9 @@
 import EventHandler from '../../src/dom/event-handler.js'
 import Tooltip from '../../src/tooltip.js'
 import { noop } from '../../src/util/index.js'
-import { clearFixture, createEvent, getFixture, jQueryMock } from '../helpers/fixture.js'
+import {
+  clearFixture, createEvent, getFixture, jQueryMock
+} from '../helpers/fixture.js'
 
 describe('Tooltip', () => {
   let fixtureEl