@mgdis/mg-components 5.13.1 → 5.15.0

package/dist/mg-components/styles/global.scss

@@ -30,13 +30,6 @@
 // Utilities
 @import './utilities.scss';
 
-/**
- * Components style
- * molecules
- */
-
-@import './components.scss';
-
 /* Atoms */
 
 // <mg-badge>

package/dist/types/components/molecules/inputs/mg-input-checkbox/mg-input-checkbox-paginated/mg-input-checkbox-paginated.d.ts

@@ -53,7 +53,7 @@ export declare class MgInputCheckboxPaginated implements IMgInputCheckboxBase {
   /**
    * Is checked items values expanded
    */
-  itemsExpanded: boolean;
+  expanded: boolean;
   /***********
    * Methods *
    ***********/

package/dist/types/components/molecules/mg-modal/mg-modal.d.ts

@@ -5,8 +5,8 @@ export declare class MgModal {
    * Internal *
    ************/
   private modalFocusableElements;
+  private closeButtonElement;
   private readonly classHide;
-  private closeButtonId;
   private titleId;
   private messages;
   private bodyOverflow;
@@ -61,6 +61,21 @@ export declare class MgModal {
    * @param event - keydown event
    */
   handleKeyDown(event: KeyboardEvent): void;
+  /**
+   * Handle last focusable element
+   * @param event - keyboard event
+   */
+  private handleLastFocusableElement;
+  /**
+   * Handle first focusable element
+   * @param event - keyboard event
+   */
+  private handleFirstFocusableElement;
+  /**
+   * Get last focusablmeElement
+   * @returns last modal focusable element
+   */
+  private getLastFocusableElement;
   /**
    * Method to manage focus on modal focusable elements
    */

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@mgdis/mg-components",
-  "version": "5.13.1",
+  "version": "5.15.0",
   "description": "MG Components",
   "main": "dist/index.cjs.js",
   "module": "dist/index.js",
@@ -26,7 +26,7 @@
     "@popperjs/core": "^2.11.7",
     "@stencil/core": "^2.22.1",
     "normalize.css": "^8.0.1",
-    "@mgdis/img": "1.0.0"
+    "@mgdis/img": "1.1.0"
   },
   "devDependencies": {
     "@babel/core": "^7.20.12",
@@ -38,14 +38,14 @@
     "@playwright/test": "^1.34.3",
     "@pxtrn/storybook-addon-docs-stencil": "^6.4.1",
     "@stencil/sass": "^1.5.2",
-    "@storybook/addon-a11y": "^7.0.23",
-    "@storybook/addon-actions": "^7.0.23",
-    "@storybook/addon-essentials": "^7.0.23",
-    "@storybook/addon-links": "^7.0.23",
-    "@storybook/addon-mdx-gfm": "^7.0.23",
-    "@storybook/blocks": "^7.0.23",
-    "@storybook/html": "^7.0.23",
-    "@storybook/html-webpack5": "^7.0.23",
+    "@storybook/addon-a11y": "^7.2.0",
+    "@storybook/addon-actions": "^7.2.0",
+    "@storybook/addon-essentials": "^7.2.0",
+    "@storybook/addon-links": "^7.2.0",
+    "@storybook/addon-mdx-gfm": "^7.2.0",
+    "@storybook/blocks": "^7.2.0",
+    "@storybook/html": "^7.2.0",
+    "@storybook/html-webpack5": "^7.2.0",
     "@storybook/preset-scss": "^1.0.3",
     "@types/jest": "npm:@types/jest@^26",
     "@types/jest-image-snapshot": "^4.3.2",
@@ -54,8 +54,8 @@
     "babel-plugin-jsx-pragmatic": "^1.0.2",
     "chromatic": "^6.15.0",
     "css-loader": "^5.2.7",
-    "eslint": "^8.45.0",
-    "eslint-plugin-storybook": "^0.6.12",
+    "eslint": "^8.x",
+    "eslint-plugin-storybook": "^0.6.13",
     "jest": "npm:jest@^26",
     "jest-cli": "npm:jest-cli@^26",
     "jest-image-snapshot": "^4.5.1",
@@ -70,12 +70,12 @@
     "react-textarea-autosize": "^8.5.0",
     "sass": "^1.58.0",
     "sass-loader": "^10.4.1",
-    "storybook": "^7.0.23",
+    "storybook": "^7.2.0",
     "style-loader": "^2.0.0",
     "ts-node": "^10.9.1",
     "typescript": "^4.9.5",
-    "playwright-config": "1.0.0",
     "@mgdis/linting-stencil": "1.1.0",
+    "playwright-config": "1.0.0",
     "eslint-config-stencil": "1.1.1",
     "tsconfig": "1.0.0"
   },

package/readme.md

@@ -1,27 +1,22 @@
-![Built With Stencil](https://img.shields.io/badge/-Built%20With%20Stencil-16161d.svg?logo=data%3Aimage%2Fsvg%2Bxml%3Bbase64%2CPD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4KPCEtLSBHZW5lcmF0b3I6IEFkb2JlIElsbHVzdHJhdG9yIDE5LjIuMSwgU1ZHIEV4cG9ydCBQbHVnLUluIC4gU1ZHIFZlcnNpb246IDYuMDAgQnVpbGQgMCkgIC0tPgo8c3ZnIHZlcnNpb249IjEuMSIgaWQ9IkxheWVyXzEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiIHg9IjBweCIgeT0iMHB4IgoJIHZpZXdCb3g9IjAgMCA1MTIgNTEyIiBzdHlsZT0iZW5hYmxlLWJhY2tncm91bmQ6bmV3IDAgMCA1MTIgNTEyOyIgeG1sOnNwYWNlPSJwcmVzZXJ2ZSI%2BCjxzdHlsZSB0eXBlPSJ0ZXh0L2NzcyI%2BCgkuc3Qwe2ZpbGw6I0ZGRkZGRjt9Cjwvc3R5bGU%2BCjxwYXRoIGNsYXNzPSJzdDAiIGQ9Ik00MjQuNywzNzMuOWMwLDM3LjYtNTUuMSw2OC42LTkyLjcsNjguNkgxODAuNGMtMzcuOSwwLTkyLjctMzAuNy05Mi43LTY4LjZ2LTMuNmgzMzYuOVYzNzMuOXoiLz4KPHBhdGggY2xhc3M9InN0MCIgZD0iTTQyNC43LDI5Mi4xSDE4MC40Yy0zNy42LDAtOTIuNy0zMS05Mi43LTY4LjZ2LTMuNkgzMzJjMzcuNiwwLDkyLjcsMzEsOTIuNyw2OC42VjI5Mi4xeiIvPgo8cGF0aCBjbGFzcz0ic3QwIiBkPSJNNDI0LjcsMTQxLjdIODcuN3YtMy42YzAtMzcuNiw1NC44LTY4LjYsOTIuNy02OC42SDMzMmMzNy45LDAsOTIuNywzMC43LDkyLjcsNjguNlYxNDEuN3oiLz4KPC9zdmc%2BCg%3D%3D&colorA=16161d&style=flat-square)
-
 # MG Components
 
-This project centralize MGDIS standalone Web Components using [Stencil](https://stenciljs.com/).
+## Introduction
 
-## Stencil
+MG Components is a reusable component library that aims to help MGDIS developers build UIs faster. It provides a collection of UI components that are designed to be productive, framework-agnostic, and satisfying to use. The library follows the principles of the Atomic Design methodology, which divides UI components into small, reusable parts.
 
-Stencil is a compiler for building fast web apps using Web Components.
+Components in MG Components are written using [StencilJS](https://stenciljs.com/), a compiler for building fast web apps using Web Components. The library utilizes [StorybookJS](https://storybook.js.org/) for component development and documentation.
 
-Stencil combines the best concepts of the most popular frontend frameworks into a compile-time rather than run-time tool. Stencil takes TypeScript, JSX, a tiny virtual DOM layer, efficient one-way data binding, an asynchronous rendering pipeline (similar to React Fiber), and lazy-loading out of the box, and generates 100% standards-based Web Components that run in any browser supporting the Custom Elements v1 spec.
+### Atomic Design
 
-Stencil components are just Web Components, so they work in any major framework or with no framework at all.
+Atomic Design is an interface design method that takes into account the constraints of development. It emphasizes the need to consider technical design constraints when creating web designs. You can learn more about Atomic Design in this [introduction to Atomic Design](https://openclassrooms.com/fr/courses/5249021-initiez-vous-a-la-methode-atomic-design/5630171-decouvrez-l-atomic-design) (in French).
 
-## Getting Started
+### Stencil
 
-To run MG Components, clone this repository, go to your new directory and run:
+MG Components is built using Stencil, a compiler for building fast web apps using Web Components. Stencil combines the best concepts from popular frontend frameworks and generates 100% standards-based Web Components that can run in any modern browser. Stencil components can be used with any major framework or even without a framework.
 
-```bash
-# This repository uses pnpm as package manager
-corepack enable
-pnpm i
-pnpm start
-```
+## Developer
+
+### Scripts
 
 To build for production, run:
 
@@ -49,7 +44,7 @@ pnpm test:unit -- mg-icon
 
 To regenerate snapshot you must add the `--updateSnapshot` parameter.
 
-For E2E tests you **must** use [WSL](https://docs.microsoft.com/fr-fr/windows/wsl/install) or a Linux OS to get the same screenshots as the GitLab CI.
+For e2e tests you **must** use [WSL](https://docs.microsoft.com/fr-fr/windows/wsl/install) or a Linux OS to get the same screenshots as the GitLab CI.
 
 To add a component, run:
 
@@ -63,21 +58,21 @@ pnpm generate atoms/mg-icon
 pnpm generate molecules/mg-message
 ```
 
-## Naming Components
+### Naming Components
 
 All of the MGDIS generated web components must use the prefix `mg`.
 
-## Using this library
+### Using this library
 
-You will find how to use the library instructions in the [Getting Started section](src/stories/1-getting-started.stories.mdx).
+You will find how to use the library instructions in the [Getting Started section](./getting-started.md).
 
-## Style
+### Style
 
-### Naming methodology
+#### Naming methodology
 
 MG Components is using [BEM](https://en.bem.info/) (Block, Element, Modifier) methodology with the [two dashes style](https://en.bem.info/methodology/naming-convention/#two-dashes-style) naming scheme.
 
-### Declaration organisation
+#### Declaration organisation
 
 When a selector contains too many declaration it is recommended to organize them by theme : Display, Decoration, Font, Others.
 
@@ -102,18 +97,18 @@ When a selector contains too many declaration it is recommended to organize them
 }
 ```
 
-## Storybook
+### Storybook
 
 The plugin [storybook-addon-docs-stencil
 ](https://github.com/pixtron/storybook-addon-docs-stencil) is used to generate the doc. **To be up to date on local it needs a fresh build**.
 
-### run
+#### run
 
 ```bash
 pnpm storybook
 ```
 
-### Notes
+#### Notes
 
 To display components in our `stories`, we use the `filterArgs` method to only show the necessary arguments in the code example. It takes in the first parameter an object containing the arguments to be used, and in the second parameter, an object containing the component default values.
 

package/dist/collection/styles/components.scss

@@ -1,3 +0,0 @@
-[hide] {
-  display: none;
-}