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

.bundlewatch.config.json

@@ -6,7 +6,7 @@
     },
     {
       "path": "./dist/css/boosted-grid.min.css",
-      "maxSize": "9.5 kB"
+      "maxSize": "9.75 kB"
     },
     {
       "path": "./dist/css/boosted-reboot.css",
@@ -26,31 +26,31 @@
     },
     {
       "path": "./dist/css/boosted.css",
-      "maxSize": "36.5 kB"
+      "maxSize": "38.0 kB"
     },
     {
       "path": "./dist/css/boosted.min.css",
-      "maxSize": "33.5 kB"
+      "maxSize": "35.0 kB"
     },
     {
       "path": "./dist/js/boosted.bundle.js",
       "maxSize": "48.25 kB"
     },
     {
       "path": "./dist/js/boosted.bundle.min.js",
-      "maxSize": "24.5 kB"
+      "maxSize": "24.75 kB"
     },
     {
       "path": "./dist/js/boosted.esm.js",
-      "maxSize": "33 kB"
+      "maxSize": "33.25 kB"
     },
     {
       "path": "./dist/js/boosted.esm.min.js",
       "maxSize": "20.25 kB"
     },
     {
       "path": "./dist/js/boosted.js",
-      "maxSize": "33.75 kB"
+      "maxSize": "34.0 kB"
     },
     {
       "path": "./dist/js/boosted.min.js",

.cspell.json

@@ -85,12 +85,12 @@
     "offcanvas",
     "offcanvases",
     "opensource",
+    "paginations",
     "Packagist",
     "pinterest",
     "popperjs",
     "Poupard",
     "prebuild",
-    "precompiled",
     "preconnect",
     "preconnecting",
     "prefersreducedmotion",
@@ -132,6 +132,7 @@
     "Uppercased",
     "urlize",
     "vbtn",
+    "Versión",
     "viewports",
     "Vite",
     "vstack",

.eslintignore

@@ -3,4 +3,8 @@
 **/vendor/
 /_site/
 /js/coverage/
+/js/tests/integration/
 /site/static/sw.js
+/site/layouts/
+/site/storybook/
+/stories/auto/

.github/PULL_REQUEST_TEMPLATE.md

@@ -0,0 +1,146 @@
+### Related issues
+
+<!-- Please link any related issues here. -->
+
+### Description
+
+<!-- Describe your changes in detail -->
+
+### Motivation & Context
+
+<!-- Why is this change required? What problem does it solve? -->
+
+### Types of change
+
+<!-- What types of changes does you code introduce? -->
+<!-- Please remove the unused items in the list -->
+
+- Bug fix (non-breaking which fixes an issues)
+- New feature (non-breaking change which adds functionality)
+- Refactoring (non-breaking change)
+- Breaking change (fix or feature that would change existing functionality)
+
+### Live previews
+
+<!-- Please add direct links where your modifications can be seen in the documentation -->
+
+* https://deploy-preview-{your pr number}--boosted.netlify.app/
+
+### Checklist
+
+<!-- Go over all the following points, and put an `x` in all the boxes that apply. -->
+<!-- If you're unsure about any of these, don't hesitate to ask. We're here to help! -->
+
+- [ ] I have read the [contributing guidelines](https://github.com/Orange-OpenSource/Orange-Boosted-Bootstrap/blob/main/.github/CONTRIBUTING.md)
+- [ ] My code follows the code style of the project _(using `npm run lint`)_
+- [ ] My change introduces changes to the documentation
+- [ ] My change introduces changes to the migration guide
+- [ ] I have updated the documentation accordingly
+- [ ] I have added tests to cover my changes
+- [ ] All new and existing tests passed
+
+<!------------------------->
+<!-- /!\ Core Team Only -->
+<!------------------------->
+
+<!-- Uncomment the following for a feature DoD -->
+
+<!--
+### Development
+
+- [ ] Should match specs (eg. either the Web UI Kit or any pattern from the WAI — or both…)
+- [ ] Docs added:
+  - including the "Sass" part using `scss-docs` shortcode
+  - in /about/overview/#custom-components if it is a new Orange custom component
+  - in /getting-started/introduction/#components if it is a new Orange custom component that requires JavaScript (and Popper)
+  - in /customize/overview#csps-and-embedded-svgs if it is a new Orange custom component that includes embedded SVGs in our CSS
+  - in /forms/validation/?#supported-elements if it is a new Orange custom component that is a form control
+  - in /forms/overview/ if it is a new Orange custom component that is a form control
+- [ ] (Optional) If this feature is a new component, it probably must appear in Storybook
+- [ ] Check (and fix) RTL version
+- [ ] Run linters
+- [ ] Run compilers
+- [ ] Tests added for JS-side
+- [ ] Run tests
+- [ ] Manually run BrowserStack test
+- [ ] Manually run Percy test
+- [ ] Cross-browser test:
+  - [ ] Chrome
+  - [ ] Firefox (including ESR)
+  - [ ] Edge
+  - [ ] Safari
+  - [ ] iOS Safari
+  - [ ] Chrome & Firefox on Android
+- [ ] Responsive tests: desktop and small screens
+- [ ] Clean up the branch using `rebase -i`
+- [ ] Commited with `feat(…): …` message
+- [ ] Mention it in Migration Guide (if `back-from-v4`): renamed variables, changes in markup requirement,  etc.
+
+### Reviews
+
+- [ ] Code review
+- [ ] A11y review
+- [ ] Design review
+-->
+
+
+
+<!-- Uncomment the following for a release DoD -->
+
+<!--
+- [ ] Run linters;
+- [ ] Run compilers;
+- [ ] Run tests;
+- [ ] Check documentation site: examples and contents;
+- [ ] Test cross-browser compatibility locally and with [BrowserStack](https://www.browserstack.com/):
+  - Firefox ESR
+  - IE11 (v4 only)
+  - Latest Edge, Chrome, Firefox, Safari
+  - iOS Safari
+  - Chrome & Firefox on Android
+- [ ] Including RTL mode;
+- [ ] Ask for reviews and accessibility testing;
+- [ ] [sync with Bootstrap](https://github.com/Orange-OpenSource/Orange-Boosted-Bootstrap/wiki/Syncing-with-Bootstrap)'s release and probably wait for it;
+- [ ] `npm run release-version $current_version $next_version` to bump version number
+  - then, if bumping a minor or major version:
+    - [ ] Manually change `version_short` in `package.json`
+    - [ ] Add docs version to `site/data/docs-versions.yml`
+    - [ ] Manually change `docs_version` in `config.yml` and other references to the previous version
+    - [ ] Update redirects in docs frontmatter (`site/content/docs/_index.html`?)
+    - [ ] Move `site/content/docs/5.x` to `site/content/docs/5.x+1`
+    - [ ] Increment `site/static/docs/{version}` version
+    - [ ] Increment version in `nuget/boosted.nuspec`
+    - [ ] (Major version) Manually update the version in `nuget/boosted.nuspec` and `nuget/boosted.sass.nuspec`
+  - check wrong matches in `CHANGELOG.md`, and maybe `site/content/docs/<version>/migration.md`
+  - :warning: check the `package-lock.json` and `package.json` content, only "boosted" should have its version changed!
+  - :warning: `site/content/docs/5.1/**/*.md` should not always be modified
+- [ ] if year changed recently, happy new year :tada: but please change © year in `.scss` main files (reboot, grid, utilities and main file) as well as in `NOTICE.txt`.
+- [ ] `npm run release` to compile dist, build Storybook, update SRI hashes in doc and package the release
+- [ ] Prepare changelog:
+  - install [Conventionnal Changelog](https://github.com/conventional-changelog/conventional-changelog) and `conventional-changelog-cli` globally
+  - run `conventional-changelog -p angular -i CHANGELOG.md -s`
+  - and probably maintain [a ship list (eg for v4.4.0)](https://github.com/Orange-OpenSource/Orange-Boosted-Bootstrap/issues/226)
+- [ ] commit and push `dist` with a `chore(release)` commit message
+- [ ] Manually run BrowserStack test
+- [ ] Manually run Percy test
+- [ ] merge (on `v4-dev` or `main`)
+- [ ] tag your version, and push your tag
+- [ ] [create a GitHub release](https://github.com/Orange-OpenSource/Orange-Boosted-Bootstrap/releases/new):
+  - attach zip file
+  - paste CHANGELOG / Ship list in the release's description
+- [ ] Pack and publish
+  - `npm pack`
+  - if you are already logged in NPM (with a personnal account, for example), [you'd better use a repository scoped `.npmrc` file](https://stackoverflow.com/questions/30114166/how-to-have-multiple-npm-users-set-up-locally)
+  - Publish:
+    - if you're releasing a pre-release, use `--tag`, eg for v5-alpha1 `npm publish boosted-5.0.0-alpha1.tgz --tag next`
+    - (v4 only) `npm publish --tag v4.x.y` (if you forgot and v4 becomes the latest version on NPM, you can run `npm dist-tag add boosted@5.x.y latest to fix it)
+    - (v5 only) `npm publish`
+- [ ] [publish on Nuget](https://github.com/Orange-OpenSource/Orange-Boosted-Bootstrap/wiki/Generate-NuGet-packages)
+- [ ] check release on [NPM](https://www.npmjs.com/package/boosted), [Nuget](https://www.nuget.org/packages/boosted/), [Packagist](https://packagist.org/packages/orange-opensource/orange-boosted-bootstrap)…
+- [ ] publish documentation on `gh-pages`:
+  - [ ] copy `../_site` to the `gh-pages` branch (don't forget to update Storybook as well)
+  - [ ] check every `index.html` used as redirections to be redirecting to the new release
+  - [ ] when bumping minor version: ensure `dist` URLs in examples' HTML has changed
+  - [ ] double-check everything before pushing, starting by searching for forgotten old version number occurences
+- [ ] make an announcement in Plazza :tada:
+-->

.github/workflows/browserstack.yml

@@ -1,6 +1,7 @@
 name: BrowserStack
 on:
-  push:
+  # BrowserStack is for now deactivated when triggered by a push action because always failing
+  # push:
   workflow_dispatch:
 
 env:

.github/workflows/pa11y.yml

@@ -43,7 +43,7 @@ jobs:
         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: Set up npm cache
-        uses: actions/cache@v3.0.5
+        uses: actions/cache@v3.0.11
         with:
           path: ~/.npm
           key: ${{ runner.os }}-node-${{ env.NODE }}-${{ hashFiles('package.json') }}-${{ hashFiles('package-lock.json') }}

.github/workflows/percy.yml

@@ -24,12 +24,12 @@ jobs:
         uses: actions/checkout@v3
 
       - name: Set up Node.js
-        uses: actions/setup-node@v1
+        uses: actions/setup-node@v3
         with:
           node-version: "${{ env.NODE }}"
 
       - name: Set up npm cache
-        uses: actions/cache@v3.0.5
+        uses: actions/cache@v3.0.11
         with:
           path: ~/.npm
           key: ${{ runner.os }}-node-${{ env.NODE }}-${{ hashFiles('package.json') }}-${{ hashFiles('package-lock.json') }}
@@ -46,10 +46,6 @@ jobs:
         run: npm run docs-build
 
       - name: Percy Test
-        uses: percy/snapshot-action@v0.1.2
-        with:
-          build-directory: "_site/"
-          flags: "--snapshot-files ./docs/**/components/**/*.html,./docs/**/forms/**/*.html"
-          verbose: true
+        run: npx percy snapshot _site/ --include '/docs/**/components/**/*.html' --include '/docs/**/forms/**/*.html'
         env:
           PERCY_TOKEN: "${{ secrets.PERCY_TOKEN }}"

.gitignore

@@ -48,3 +48,7 @@ Thumbs.db
 /.pa11y/
 /pa11y-ci-results.json
 /.github/release-drafter.yml
+
+# Storybook
+/stories/auto
+/site/storybook

.storybook/main.js

@@ -0,0 +1,18 @@
+// Note: addon-measure is forced to false in order to avoid it enabled in ZeroHeight
+module.exports = {
+  "stories": [
+    "../stories/**/*.stories.mdx",
+    "../stories/**/*.stories.@(js|jsx|ts|tsx)"
+  ],
+  "addons": [
+    "@storybook/addon-a11y",
+    {
+      name: "@storybook/addon-essentials",
+      options: {
+        measure: false
+      }
+    },
+    "@storybook/preset-scss"
+  ],
+  "framework": "@storybook/html"
+}

.storybook/manager.js

@@ -0,0 +1,6 @@
+import { addons } from '@storybook/addons';
+import OrangeTheme from 'ods-storybook-theme/OrangeTheme.js';
+
+addons.setConfig({
+  theme: OrangeTheme,
+});

.storybook/preview-head.html

@@ -0,0 +1,18 @@
+<!-- Preconnect to CDN: remove if not needed -->
+<link href="https://cdn.jsdelivr.net" rel="preconnect" crossorigin="anonymous">
+
+<!--
+  Neue Helvetica is a trademark of Monotype Imaging Inc. registered in the U.S.
+  Patent and Trademark Office and may be registered in certain other jurisdictions.
+  Copyright © 2014 Monotype Imaging Inc. All rights reserved.
+  Orange has purchased the right to use Helvetica in its websites and mobile applications.
+  If you are not autorized to used it, don't include the orangeHelvetica.css
+  See NOTICE.txt for more informations.
+-->
+<link href="https://cdn.jsdelivr.net/npm/boosted/dist/fonts/HelvNeue55_W1G.woff2" rel="preload" as="font" type="font/woff2" crossorigin="anonymous">
+<link href="https://cdn.jsdelivr.net/npm/boosted/dist/fonts/HelvNeue75_W1G.woff2" rel="preload" as="font" type="font/woff2" crossorigin="anonymous">
+<!-- Copyright © 2014 Monotype Imaging Inc. All rights reserved -->
+<link href="https://cdn.jsdelivr.net/npm/boosted/dist/css/orange-helvetica.min.css" rel="stylesheet" crossorigin="anonymous">
+
+<!-- Boosted CSS -->
+<link href="https://cdn.jsdelivr.net/npm/boosted/dist/css/boosted.min.css" rel="stylesheet" crossorigin="anonymous">

.storybook/preview.js

@@ -0,0 +1,24 @@
+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 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;
+    }
+  }
+}

.storybook/storybook.scss

@@ -0,0 +1,15 @@
+pre.prismjs {
+  color: #fff;
+  font-size: .875rem;
+}
+
+// Bypass https://github.com/storybookjs/storybook/issues/15598
+.token.tag {
+  display: initial;
+  padding: initial;
+  font-size: .875rem;
+  font-weight: initial;
+  line-height: initial;
+  background-color: initial;
+  border: initial;
+}

.stylelintrc

@@ -26,7 +26,6 @@
         "ignore": "local"
       }
     ],
-    "scss/selector-no-union-class-name": true,
-    "scss/selector-no-redundant-nesting-selector": null
+    "scss/selector-no-union-class-name": true
   }
 }