Merge branch 'main' into main-lmp-focus-fix

# Conflicts:
#	site/content/docs/5.3/migration.md

.bundlewatch.config.json

@@ -42,11 +42,11 @@
     },
     {
       "path": "./dist/js/boosted.esm.js",
-      "maxSize": "33.0 kB"
+      "maxSize": "33.25 kB"
     },
     {
       "path": "./dist/js/boosted.esm.min.js",
-      "maxSize": "20.25 kB"
+      "maxSize": "20.5 kB"
     },
     {
       "path": "./dist/js/boosted.js",

.eslintrc.json

@@ -85,6 +85,7 @@
     "strict": "error",
     "unicorn/explicit-length-check": "off",
     "unicorn/filename-case": "off",
+    "unicorn/no-anonymous-default-export": "off",
     "unicorn/no-array-callback-reference": "off",
     "unicorn/no-array-method-this-argument": "off",
     "unicorn/no-null": "off",
@@ -197,6 +198,15 @@
         "unicorn/no-array-for-each": "off"
       }
     },
+    {
+      "files": [
+        "site/assets/js/**"
+      ],
+      "parserOptions": {
+        "sourceType": "module",
+        "ecmaVersion": 2020
+      }
+    },
     {
       "files": [
         "**/*.md"
@@ -208,9 +218,10 @@
     },
     {
       "files": [
-        "**/*.md/*.js"
+        "**/*.md/*.js",
+        "**/*.md/*.mjs"
       ],
-      "extends": "plugin:markdown/recommended",
+      "extends": "plugin:markdown/recommended-legacy",
       "parserOptions": {
         "sourceType": "module"
       },

.github/SUPPORT.md

@@ -14,7 +14,7 @@ For general Bootstrap troubleshooting or help getting started:
 - Follow [@getbootstrap on Twitter](https://twitter.com/getbootstrap).
 - Read and subscribe to [The Official Bootstrap Blog](https://blog.getbootstrap.com/).
 - Ask questions and explore [Bootstrap GitHub Discussions](https://github.com/twbs/bootstrap/discussions).
-- Discuss, ask questions, and more on [the community Discord](https://discord.gg/bZUvakRU3M) or [Bootstrap subreddit](https://reddit.com/r/bootstrap).
+- Discuss, ask questions, and more on [the community Discord](https://discord.gg/bZUvakRU3M) or [Bootstrap subreddit](https://www.reddit.com/r/bootstrap/).
 - Chat with fellow Bootstrappers in IRC. On the `irc.libera.chat` server, in the `#bootstrap` channel.
 - Implementation help may be found at Stack Overflow (tagged [`bootstrap-5`](https://stackoverflow.com/questions/tagged/bootstrap-5)).
 - Developers should use the keyword `bootstrap` on packages which modify or add to the functionality of Bootstrap when distributing through [npm](https://www.npmjs.com/browse/keyword/bootstrap) or similar delivery mechanisms for maximum discoverability.

.github/dependabot.yml

@@ -14,6 +14,11 @@ updates:
     labels:
       - dependencies
       - v5
+    groups:
+      storybook-deps:
+        patterns:
+          - "storybook"
+          - "@storybook/*"
     schedule:
       interval: weekly
       day: tuesday

.github/workflows/cspell.yml

@@ -30,7 +30,7 @@ jobs:
           persist-credentials: false
 
       - name: Run cspell
-        uses: streetsidesoftware/cspell-action@v5
+        uses: streetsidesoftware/cspell-action@v6
         with:
           config: ".cspell.json"
           files: "**/*.md"

.github/workflows/notify.yml

@@ -13,7 +13,7 @@ jobs:
         run: |
           echo "{\"text\": \"## Boosted ${{ github.event.release.tag_name }} :tada:\n[![${{ github.actor }}](https://github.com/${{ github.actor }}.png =10) **${{ github.actor }}**](https://github.com/${{ github.actor }}/) just released ${{ github.event.release.tag_name }}\n***\n[Changelog](${{ github.event.release.html_url }}) — [Download (zip)](${{ github.event.release.zipball_url }})\"}" > mattermost.json
 
-      - uses: mattermost/action-mattermost-notify@1.1.0
+      - uses: mattermost/action-mattermost-notify@2.0.0
         env:
           MATTERMOST_WEBHOOK_URL: ${{ secrets.MATTERMOST_WEBHOOK_URL }}
           MATTERMOST_USERNAME: "Boosted Release"

.github/workflows/pa11y.yml

@@ -32,7 +32,7 @@ jobs:
           node-version: "${{ env.NODE }}"
 
       - name: Set up npm cache
-        uses: actions/cache@v4.0.1
+        uses: actions/cache@v4.0.2
         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@v4.0.1
+        uses: actions/cache@v4.0.2
         with:
           path: ~/.npm
           key: ${{ runner.os }}-node-${{ env.NODE }}-${{ hashFiles('package.json') }}-${{ hashFiles('package-lock.json') }}

.gitignore

@@ -48,3 +48,4 @@ Thumbs.db
 
 # Storybook
 /stories/auto
+*storybook.log

.nvmrc

@@ -0,0 +1 @@
+20.12.2

.storybook/main.js

@@ -1,15 +1,25 @@
-// Note: addon-measure is forced to false in order to avoid it enabled in ZeroHeight
+/** @type { import('@storybook/html-vite').StorybookConfig } */
 const config = {
-  "stories": ["../stories/**/*.stories.@(js|jsx|ts|tsx)"],
-  "addons": ["@storybook/addon-a11y", {
-    name: "@storybook/addon-essentials",
-    options: {
-      measure: false
-    }
-  }, "@storybook/addon-themes", "@storybook/preset-scss"],
-  "framework": "@storybook/html-webpack5",
+  stories: [
+    "../stories/**/*.stories.@(js|jsx|mjs|ts|tsx)",
+  ],
+  addons: [
+    "@storybook/addon-a11y",
+    {
+      name: "@storybook/addon-essentials",
+      options: {
+        measure: false, // Note: addon-measure is forced to false in order to avoid it enabled in ZeroHeight
+      }
+    },
+    "@storybook/addon-themes",
+  ],
+  framework: {
+    name: "@storybook/html-vite",
+    options: {},
+  },
   docs: {
-    autodocs: true
+    autodocs: true,
+    defaultName: 'Docs',
   }
 };
 export default config;

.storybook/manager.js

@@ -1,4 +1,4 @@
-import { addons } from '@storybook/addons';
+import { addons } from '@storybook/manager-api';
 import OrangeTheme from 'ods-storybook-theme/OrangeTheme.js';
 
 addons.setConfig({

.storybook/preview.js

@@ -1,29 +1,9 @@
-import { INITIAL_VIEWPORTS } from '@storybook/addon-viewport';
 import { withThemeByDataAttribute } from '@storybook/addon-themes';
+import { INITIAL_VIEWPORTS } from '@storybook/addon-viewport';
 import './storybook.scss';
-import prettier from 'prettier/esm/standalone';
-import htmlParser from 'prettier/esm/parser-html';
 
-export const preview = {
-  parameters: {
-    actions: { argTypesRegex: "^on[A-Z].*" },
-    controls: {
-      matchers: {
-        color: /(background|color)$/i,
-        date: /Date$/,
-      },
-      expanded: true
-    },
-    viewport: { viewports: INITIAL_VIEWPORTS },
-    docs: {
-      transformSource: (src) => {
-        // Remove `() => `` from stories
-        const match = /^\(\) => [`'"](.*)['`"]$/sm.exec(src);
-        // Pretty print the Docs code source
-        return match ? prettier.format(match[1].trim(), {printWidth: 120, parser: "html", plugins: [htmlParser]}) : src;
-      }
-    },
-  },
+/** @type { import('@storybook/html').Preview } */
+const preview = {
   decorators: [
     withThemeByDataAttribute({
       themes: {
@@ -33,6 +13,16 @@ export const preview = {
       defaultTheme: 'light',
       attributeName: 'data-bs-theme',
     }),
-  ]
-}
+  ],
+  parameters: {
+    controls: {
+      matchers: {
+        color: /(background|color)$/i,
+        date: /Date$/i,
+      },
+    },
+    viewport: { viewports: INITIAL_VIEWPORTS },
+  },
+};
+
 export default preview;

README.md

@@ -112,7 +112,7 @@ Within the download you'll find the following directories and files, logically g
   ```
 </details>
 
-We provide compiled CSS and JS (`boosted.*`), as well as compiled and minified CSS and JS (`boosted.min.*`). [Source maps](https://developers.google.com/web/tools/chrome-devtools/javascript/source-maps) (`boosted.*.map`) are available for use with certain browsers' developer tools. Bundled JS files (`boosted.bundle.js` and minified `boosted.bundle.min.js`) include [Popper](https://popper.js.org/).
+We provide compiled CSS and JS (`boosted.*`), as well as compiled and minified CSS and JS (`boosted.min.*`). [Source maps](https://web.dev/articles/source-maps) (`boosted.*.map`) are available for use with certain browsers' developer tools. Bundled JS files (`boosted.bundle.js` and minified `boosted.bundle.min.js`) include [Popper](https://popper.js.org/docs/v2/).
 
 
 ## Bugs and feature requests

build/build-plugins.mjs

@@ -9,15 +9,15 @@
 import path from 'node:path'
 import { fileURLToPath } from 'node:url'
 import { babel } from '@rollup/plugin-babel'
-import globby from 'globby'
+import { globby } from 'globby'
 import { rollup } from 'rollup'
 import banner from './banner.mjs'
 
 const __filename = fileURLToPath(import.meta.url)
 const __dirname = path.dirname(fileURLToPath(import.meta.url))
 
 const sourcePath = path.resolve(__dirname, '../js/src/').replace(/\\/g, '/')
-const jsFiles = globby.sync(`${sourcePath}/**/*.js`)
+const jsFiles = await globby(`${sourcePath}/**/*.js`)
 
 // Array which holds the resolved plugins
 const resolvedPlugins = []
@@ -37,6 +37,9 @@ for (const file of jsFiles) {
 }
 
 const build = async plugin => {
+  /**
+   * @type {import('rollup').GlobalsOption}
+   */
   const globals = {}
 
   const bundle = await rollup({

hugo.yml

@@ -8,8 +8,6 @@ security:
     getenv:
       - ^HUGO_
       - NETLIFY
-  gotemplates:
-    allowActionJSTmpl: true
 
 markup:
   goldmark:
@@ -21,6 +19,9 @@ markup:
     startLevel:                     2
     endLevel:                       6
 
+build:
+  noJSConfigInAssets:               true
+
 buildDrafts:                        true
 buildFuture:                        true
 
@@ -44,14 +45,16 @@ module:
       target:                       layouts
     - source:                       site/static
       target:                       static
+    - source:                       node_modules/@docsearch/css
+      target:                       assets/scss/@docsearch/css
     - source:                       site/static/docs/5.3/assets/img/favicons/apple-touch-icon.png
       target:                       static/apple-touch-icon.png
     - source:                       site/static/docs/5.3/assets/img/favicons/favicon.ico
       target:                       static/favicon.ico
 
       # Boosted mod
-    - source:                       node_modules/tarteaucitronjs/tarteaucitron.js
-      target:                       assets/js/vendor/tarteaucitron.js
+    - source:                       node_modules/tarteaucitronjs/tarteaucitron.min.js
+      target:                       static/docs/5.3/assets/js/tarteaucitron.min.js
     - source:                       node_modules/tarteaucitronjs/lang
       target:                       static/docs/5.3/assets/js/lang
     - source:                       site/storybook
@@ -78,6 +81,11 @@ params:
   ods:
     web:                            "https://oran.ge/dsweb"
 
+  algolia:
+    appId:                          "F4PKENW3TB"
+    apiKey:                         "d04e794979727856a09d53f12ead9069"
+    indexName:                      "boosted-orange"
+
   download:
     source:                         "https://github.com/Orange-OpenSource/Orange-Boosted-Bootstrap/archive/v5.3.3.zip"
     dist:                           "https://github.com/Orange-OpenSource/Orange-Boosted-Bootstrap/releases/download/v5.3.3/boosted-5.3.3-dist.zip"

js/src/carousel.js

@@ -55,6 +55,8 @@ const CLASS_NAME_NEXT = 'carousel-item-next'
 const CLASS_NAME_PREV = 'carousel-item-prev'
 const CLASS_NAME_PAUSED = 'is-paused' // Boosted mod: used for progress indicators
 const CLASS_NAME_DONE = 'is-done' // Boosted mod: used for progress indicators
+const CLASS_NAME_PAUSE = 'pause' // Boosted mod: used for pause button
+const CLASS_NAME_PLAY = 'play' // Boosted mod: used for play button
 
 const SELECTOR_ACTIVE = '.active'
 const SELECTOR_ITEM = '.carousel-item'
@@ -164,9 +166,9 @@ class Carousel extends BaseComponent {
     // End mod
 
     // Boosted mod: if a play-pause button is present, set the button to play
-    if (this._playPauseButton !== null && this._playPauseButton.classList.contains('pause')) {
-      this._playPauseButton.classList.remove('pause')
-      this._playPauseButton.classList.add('play')
+    if (this._playPauseButton !== null && this._playPauseButton.classList.contains(CLASS_NAME_PAUSE)) {
+      this._playPauseButton.classList.remove(CLASS_NAME_PAUSE)
+      this._playPauseButton.classList.add(CLASS_NAME_PLAY)
 
       if (this._playPauseButton.getAttribute(SELECTOR_CAROUSEL_PLAY_TEXT)) {
         this._playPauseButton.setAttribute('title', this._playPauseButton.getAttribute(SELECTOR_CAROUSEL_PLAY_TEXT))
@@ -195,9 +197,9 @@ class Carousel extends BaseComponent {
     // End mod
 
     // Boosted mod: if a play-pause button is present, reset the button to pause
-    if (this._playPauseButton !== null && this._playPauseButton.classList.contains('play')) {
-      this._playPauseButton.classList.remove('play')
-      this._playPauseButton.classList.add('pause')
+    if (this._playPauseButton !== null && this._playPauseButton.classList.contains(CLASS_NAME_PLAY)) {
+      this._playPauseButton.classList.remove(CLASS_NAME_PLAY)
+      this._playPauseButton.classList.add(CLASS_NAME_PAUSE)
 
       if (this._playPauseButton.getAttribute(SELECTOR_CAROUSEL_PAUSE_TEXT)) {
         this._playPauseButton.setAttribute('title', this._playPauseButton.getAttribute(SELECTOR_CAROUSEL_PAUSE_TEXT))
@@ -548,7 +550,7 @@ class Carousel extends BaseComponent {
     const pauseButton = event.target
     const pauseButtonAttribute = pauseButton.getAttribute(SELECTOR_CAROUSEL_TO_PAUSE)
     const carouselToPause = Carousel.getOrCreateInstance(document.querySelector(pauseButtonAttribute))
-    if (pauseButton.classList.contains('pause')) {
+    if (pauseButton.classList.contains(CLASS_NAME_PAUSE)) {
       carouselToPause.pause()
     } else {
       carouselToPause.cycle()

js/src/dropdown.js

@@ -224,7 +224,7 @@ class Dropdown extends BaseComponent {
 
   _createPopper() {
     if (typeof Popper === 'undefined') {
-      throw new TypeError('Bootstrap\'s dropdowns require Popper (https://popper.js.org)')
+      throw new TypeError('Bootstrap\'s dropdowns require Popper (https://popper.js.org/docs/v2/)')
     }
 
     let referenceElement = this._element

js/src/tooltip.js

@@ -105,7 +105,7 @@ const DefaultType = {
 class Tooltip extends BaseComponent {
   constructor(element, config) {
     if (typeof Popper === 'undefined') {
-      throw new TypeError('Bootstrap\'s tooltips require Popper (https://popper.js.org)')
+      throw new TypeError('Bootstrap\'s tooltips require Popper (https://popper.js.org/docs/v2/)')
     }
 
     super(element, config)

js/src/util/index.js

@@ -170,7 +170,7 @@ const noop = () => {}
  * @param {HTMLElement} element
  * @return void
  *
- * @see https://www.charistheo.io/blog/2021/02/restart-a-css-animation-with-javascript/#restarting-a-css-animation
+ * @see https://www.harrytheo.com/blog/2021/02/restart-a-css-animation-with-javascript/#restarting-a-css-animation
  */
 const reflow = element => {
   element.offsetHeight // eslint-disable-line no-unused-expressions