@1024pix/pix-ui 38.0.0 → 38.2.0

package/docs/{create-component.stories.mdx → create-component.mdx}

@@ -1,4 +1,4 @@
-import { Meta } from '@storybook/addon-docs';
+import { Meta } from '@storybook/blocks';
 
 <Meta title="Développement/Créer un composant" />
 
@@ -21,7 +21,7 @@ La commande crée et pré-remplit les fichiers suivant :
 
 - `addon/templates/components/pix-<component-name>.hbs`: template du composant.
 - `addon/components/pix-<component-name>.js`: controller du composant.
-- `addon/stories/pix-<component-name>.stories.mdx`: documentation du composant.
+- `addon/stories/pix-<component-name>.mdx`: documentation du composant.
 - `addon/stories/pix-<component-name>.stories.js`: arguments et code de l'aperçu du composant dans la documentation.
 - `addon/styles/_pix-<component-name>.scss`: style du composant.
 - `app/components/pix-<component-name>.js`, sert uniquement à ember pour retrouver les composants existants dans le dossier `addon`. **On ne modifiera pas ce fichier là.**
@@ -35,13 +35,13 @@ De plus la commande met à jour les imports scss dans le fichier :
 
 Une story, c'est deux fichiers :
 
-- un dont l'extension est `.stories.mdx`
+- un dont l'extension est `.mdx`
 - un dont l'extension est `.stories.js`
 
 Ils permettent de visualiser et documenter le composant.
 
 Lorsqu'on lance Storybook ce dernier va dans `.storybook/main.js` afin de trouver l'emplacement des fichiers `.stories.js`
-et `stories.mdx`.
+et `.mdx`.
 
 Ces derniers permettent ainsi d'afficher un aperçu des composants ainsi que leur documentation.
 
@@ -53,6 +53,21 @@ Voici par exemple la story du composant PixMessage :
 // pix-message.stories.js
 import { hbs } from 'ember-cli-htmlbars'; // import nécessaire pour 'canvasContent'
 
+export default {
+  title: 'Docs/Message',
+  // Ici on définit et on documente les arguments du composant
+  argTypes: {
+    type: {
+      name: 'type',
+      description: 'Type du message',
+      type: { name: 'string', required: false },
+      table: { defaultValue: { summary: 'info' } },
+      control: { type: 'select' },
+      options: ['info', 'success', 'warning', 'alert'],
+    },
+  }
+}
+
 // Ici on instancie l'aperçu du composant dans la doc
 export const message = (args) => {
   return {
@@ -64,32 +79,16 @@ export const message = (args) => {
     context: args,
   };
 };
-
-// Ici on définit et on documente les arguments du composant
-export const argTypes = {
-  type: {
-    name: 'type',
-    description: 'Type du message',
-    type: { name: 'string', required: false },
-    table: { defaultValue: { summary: 'info' } },
-    control: { type: 'select' },
-    options: ['info', 'success', 'warning', 'alert'],
-  },
-};
 ```
 
 `````markdown
 {/_ pix-message.stories.mdx _/}
-import { Meta, Story, Canvas, ArgsTable } from '@storybook/addon-docs';
-import \* as stories from './pix-message.stories.js';
+import { Meta, Story, ArgTypes } from '@storybook/blocks';
+import * as ComponentStories from './pix-message.stories';
 
 {/_ Titre de la section affichée dans le menu de storybook _/}
 
-<Meta
-  title='Notification/Message'
-  component='PixMessage'
-  argTypes={stories.argTypes}
-/>
+<Meta of={ComponentStories} />
 
 # Pix Message
 
@@ -97,9 +96,7 @@ Un bandeau d'information, par défaut de type info, avec une icône facultative.
 
 {/_ Affiche la prévisualisation du composant telle que définie dans pix-message.stories.js _/}
 
-<Canvas isColumn>
-  <Story name="Message" story={stories.message} height={140} />
-</Canvas>
+<Story of={ComponentStories.message} height={140} />
 
 ## Usage
 
@@ -108,11 +105,8 @@ Un bandeau d'information, par défaut de type info, avec une icône facultative.
 \``` ## Arguments {/* Affiche le tableau des arguments tels que définis dans pix-message.stories.js
 */}
 
-<ArgsTable story="Message" />
+<ArgTypes />
 ````
 `````
 
-```
-
 Plus d'information sur le [guide d'ember de Storybook ici](https://storybook.js.org/docs/guides/guide-ember/).
-```

package/docs/{design-system.stories.mdx → design-system.mdx}

@@ -1,4 +1,4 @@
-import { Meta } from '@storybook/addon-docs';
+import { Meta } from '@storybook/blocks';
 
 <Meta title="Développement/Design System" />
 

package/docs/{design-tokens.stories.mdx → design-tokens.mdx}

@@ -1,4 +1,4 @@
-import { Meta } from '@storybook/addon-docs';
+import { Meta } from '@storybook/blocks';
 
 <Meta title="Utiliser Pix UI/Design Tokens/ Utilisation" />
 

package/docs/{good-practices-a11y.stories.mdx → good-practices-a11y.mdx}

@@ -1,4 +1,4 @@
-import { Meta } from '@storybook/addon-docs';
+import { Meta } from '@storybook/blocks';
 import accessibilityImage from './assets/accessibility-storybook.png';
 
 <Meta title="Développement/Bonnes pratiques/Accessibilité" />

package/docs/{good-practices-design.stories.mdx → good-practices-design.mdx}

@@ -1,4 +1,4 @@
-import { Meta } from '@storybook/addon-docs';
+import { Meta } from '@storybook/blocks';
 
 <Meta title="Développement/Bonnes pratiques/Design" />
 

package/docs/{good-practices-responsive.stories.mdx → good-practices-responsive.mdx}

@@ -1,4 +1,4 @@
-import { Meta } from '@storybook/addon-docs';
+import { Meta } from '@storybook/blocks';
 
 <Meta title="Développement/Bonnes pratiques/Responsive" />
 

package/docs/{good-practices-style-css.stories.mdx → good-practices-style-css.mdx}

@@ -1,4 +1,4 @@
-import { Meta } from '@storybook/addon-docs';
+import { Meta } from '@storybook/blocks';
 
 <Meta title="Développement/Bonnes pratiques/Style CSS" />
 

package/docs/{good-practices-tests.stories.mdx → good-practices-tests.mdx}

@@ -1,4 +1,4 @@
-import { Meta } from '@storybook/addon-docs';
+import { Meta } from '@storybook/blocks';
 
 <Meta title="Développement/Bonnes pratiques/Tests" />
 

package/docs/{make-a-release.stories.mdx → make-a-release.mdx}

@@ -1,4 +1,4 @@
-import { Meta } from '@storybook/addon-docs';
+import { Meta } from '@storybook/blocks';
 
 <Meta title="Développement/Faire une release" />
 

package/docs/{pix-design-tokens-dev.stories.mdx → pix-design-tokens-dev.mdx}

@@ -1,4 +1,4 @@
-import { Meta } from '@storybook/addon-docs';
+import { Meta } from '@storybook/blocks';
 
 <Meta title="Développement/Pix Design Tokens" />
 

package/docs/{shadow.stories.mdx → shadow.mdx}

@@ -1,4 +1,4 @@
-import { Meta } from '@storybook/addon-docs';
+import { Meta } from '@storybook/blocks';
 
 <Meta title="Utiliser Pix UI/Design Tokens/Ombres" />
 

package/docs/{spacing.stories.mdx → spacing.mdx}

@@ -1,4 +1,4 @@
-import { Meta, Canvas, Story } from '@storybook/addon-docs';
+import { Meta } from '@storybook/blocks';
 
 <Meta title="Utiliser Pix UI/Design Tokens/Espacements" />
 

package/docs/{storybook.stories.mdx → storybook.mdx}

@@ -1,4 +1,4 @@
-import { Meta } from '@storybook/addon-docs';
+import { Meta } from '@storybook/blocks';
 
 <Meta title="Développement/Storybook" />
 

package/docs/{test-component-without-release.stories.mdx → test-component-without-release.mdx}

@@ -1,4 +1,4 @@
-import { Meta } from '@storybook/addon-docs';
+import { Meta } from '@storybook/blocks';
 
 <Meta title="Développement/Tester un composant en developpement dans une app" />
 

package/docs/{typography.stories.mdx → typography.mdx}

@@ -1,6 +1,4 @@
-<!-- Typography.stories.mdx -->
-
-import { Meta, Typeset, Markdown } from '@storybook/addon-docs';
+import { Meta, Typeset, Markdown } from '@storybook/blocks';
 
 <Meta title="Utiliser Pix UI/Design Tokens/Typographie" />
 

package/docs/{use-component.stories.mdx → use-component.mdx}

@@ -1,4 +1,4 @@
-import { Meta } from '@storybook/addon-docs';
+import { Meta } from '@storybook/blocks';
 
 <Meta title="Utiliser Pix UI/Utiliser un composant" />
 

package/docs/{use-install.stories.mdx → use-install.mdx}

@@ -1,4 +1,4 @@
-import { Meta } from '@storybook/addon-docs';
+import { Meta } from '@storybook/blocks';
 
 <Meta title="Utiliser Pix UI/Installation" />
 

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@1024pix/pix-ui",
-  "version": "38.0.0",
+  "version": "38.2.0",
   "description": "Pix-UI is the implementation of Pix design principles and guidelines for its products.",
   "keywords": [
     "ember-addon"
@@ -8,7 +8,8 @@
   "license": "MIT",
   "author": "GIP Pix",
   "engines": {
-    "node": "^16.17"
+    "node": "16 || 18",
+    "npm": "8 || 9"
   },
   "ember": {
     "edition": "octane"
@@ -25,8 +26,8 @@
     "build": "./scripts/build.sh",
     "build-ember": "ember build --environment=production",
     "serve-ember": "ember serve",
-    "build-storybook": "ember build && cp -v CNAME dist && build-storybook",
-    "serve-storybook": "start-storybook --port 9001",
+    "build-storybook": "ember build && cp -v CNAME dist && storybook build",
+    "serve-storybook": "storybook dev --port 9001",
     "clean": "rm -rf dist node_modules",
     "deploy-storybook": "storybook-to-ghpages",
     "lint": "npm-run-all --aggregate-output --parallel --continue-on-error 'lint:!(fix)'",
@@ -58,14 +59,15 @@
     "lodash.debounce": "^4.0.8"
   },
   "devDependencies": {
-    "@1024pix/ember-testing-library": "^0.6.0",
+    "@1024pix/ember-testing-library": "^0.7.0",
+    "@1024pix/storybook-ember": "^7.1.1",
     "@1024pix/stylelint-config": "^3.0.0",
     "@babel/eslint-parser": "^7.19.1",
     "@babel/plugin-proposal-decorators": "^7.20.5",
     "@ember/optional-features": "^2.0.0",
     "@ember/render-modifiers": "^2.0.5",
     "@ember/string": "^3.0.1",
-    "@ember/test-helpers": "^2.8.1",
+    "@ember/test-helpers": "^3.0.0",
     "@embroider/macros": "^1.11.0",
     "@embroider/test-setup": "^3.0.0",
     "@fortawesome/ember-fontawesome": "^1.0.0",
@@ -73,17 +75,17 @@
     "@fortawesome/free-solid-svg-icons": "^6.2.1",
     "@glimmer/component": "^1.1.2",
     "@glimmer/tracking": "^1.1.2",
-    "@storybook/addon-a11y": "^6.5.13",
-    "@storybook/addon-controls": "^6.5.13",
-    "@storybook/addon-docs": "^6.5.13",
-    "@storybook/addon-essentials": "^6.5.13",
-    "@storybook/addons": "^6.5.13",
-    "@storybook/builder-webpack5": "^6.5.13",
-    "@storybook/ember": "^6.5.13",
+    "@storybook/addon-a11y": "^7.1.0",
+    "@storybook/addon-controls": "^7.1.0",
+    "@storybook/addon-docs": "^7.1.0",
+    "@storybook/addon-essentials": "^7.1.0",
+    "@storybook/addon-mdx-gfm": "^7.1.0",
+    "@storybook/addons": "^7.1.0",
+    "@storybook/blocks": "^7.1.0",
+    "@storybook/builder-webpack5": "^7.1.0",
     "@storybook/ember-cli-storybook": "^0.6.0",
-    "@storybook/manager-webpack5": "^6.5.13",
     "@storybook/storybook-deployer": "^2.8.16",
-    "@storybook/theming": "^6.5.13",
+    "@storybook/theming": "^7.1.0",
     "@testing-library/dom": "^8.20.0",
     "@testing-library/user-event": "^14.4.3",
     "chromatic": "^6.17.3",
@@ -97,7 +99,7 @@
     "ember-export-application-global": "^2.0.1",
     "ember-load-initializers": "^2.1.2",
     "ember-page-title": "^7.0.0",
-    "ember-qunit": "^6.0.0",
+    "ember-qunit": "^7.0.0",
     "ember-resolver": "^8.0.3",
     "ember-sinon": "^5.0.0",
     "ember-source": "^4.0.1",
@@ -120,15 +122,11 @@
     "qunit": "^2.19.3",
     "qunit-dom": "^2.0.0",
     "sass": "^1.56.1",
+    "storybook": "^7.1.0",
     "stylelint": "^15.0.0",
     "stylelint-config-standard-scss": "^9.0.0",
     "webpack": "^5.75.0"
   },
-  "overrides": {
-    "@storybook/ember": {
-      "ember-source": "^4.0.1"
-    }
-  },
   "bugs": {
     "url": "https://github.com/1024pix/pix-ui/issues"
   },

package/app/stories/pix-checkbox.stories.mdx

@@ -1,73 +0,0 @@
-import { Meta, Story, Canvas, ArgsTable } from '@storybook/addon-docs';
-
-import * as stories from './pix-checkbox.stories.js';
-
-<Meta title="Form/Checkbox" component="PixCheckbox" argTypes={stories.argTypes} />
-
-# PixCheckbox
-
-La PixCheckbox permet de créer des checkbox basiques ou des checkbox mixées (checkbox servant d'indicateur lors d'une sélection multiple).
-
-<Canvas>
-  <Story name="Default" story={stories.Default} height={60} />
-</Canvas>
-
-### Liste de checkboxes
-
-Il n'est pas rare d'avoir plusieurs champs checkbox qui se suivent.<br/>
-En ce sens, nous avons déjà prévu un espace vertical pour séparer 2 composants qui se suivent.
-
-<Canvas>
-  <Story name="Multiple" story={stories.multiple} height={140} />
-</Canvas>
-
-## États de la Checkbox
-
-<br />
-
-### Checkbox interminée
-
-<Canvas>
-  <Story name="Indeterminate" story={stories.indeterminateCheckbox} height={60} />
-</Canvas>
-
-### Checkbox désactivée
-
-<Canvas>
-  <Story name="Disabled" story={stories.checkboxDisabled} height={60} />
-  <Story name="CheckedDisabled" story={stories.checkboxCheckedDisabled} height={60} />
-  <Story name="InterminateDisabled" story={stories.checkboxInterminateDisabled} height={60} />
-</Canvas>
-
-## Autres tailles de police du label
-
-<br />
-
-### Small
-
-<Canvas>
-  <Story name="SmallLabel" story={stories.checkboxWithSmallLabel} height={60} />
-</Canvas>
-
-### Large
-
-<Canvas>
-  <Story name="LargeLabel" story={stories.checkboxWithLargeLabel} height={60} />
-</Canvas>
-
-## Usage
-
-```html
-<PixCheckbox
-  @screenReaderOnly="{{false}}"
-  @isIndeterminate="{{false}}"
-  @labelSize="small"
-  disabled
->
-  Recevoir la newsletter
-</PixCheckbox>
-```
-
-## Arguments
-
-<ArgsTable story="Default" />

package/app/stories/pix-collapsible.stories.mdx

@@ -1,36 +0,0 @@
-import { Meta, Story, Canvas, ArgsTable } from '@storybook/addon-docs';
-
-import * as stories from './pix-collapsible.stories.js';
-
-<Meta title="Others/Collapsible" component="PixCollapsible" argTypes={stories.argTypes} />
-
-# PixCollapsible
-
-Un `PixCollapsible` est un élément comprenant un libellé et un contenu.
-Par défaut le contenu est masqué et cliquer sur le libellé permet de montrer le contenu du `PixCollapsible`.
-
-> Il est possible de cumuler les `PixCollapsible` de sorte à former un accordéon, il suffit de les mettre dans une même div parente.
-
-<Canvas>
-  <Story name="PixCollapsible" story={stories.collapsible} height={150} />
-</Canvas>
-
-<Canvas>
-  <Story name="With block title" story={stories.collapsibleWithBlockTitle} height={150} />
-</Canvas>
-
-<Canvas>
-  <Story name="MultiplePixCollapsible" story={stories.multipleCollapsible} height={260} />
-</Canvas>
-
-## Usage
-
-```html
-<PixCollapsible @title="Titre du contenu à dérouler en cliquant" @iconTitle="user">
-  <p>Contenu du PixCollapsible</p>
-</PixCollapsible>
-```
-
-## Arguments
-
-<ArgsTable story="PixCollapsible" />

package/app/stories/pix-message.stories.mdx

@@ -1,64 +0,0 @@
-import { Meta, Story, Canvas, ArgsTable } from '@storybook/addon-docs';
-import * as stories from './pix-message.stories.js';
-
-<Meta title="Notification/Message" component="PixMessage" argTypes={stories.argTypes} />
-
-# Pix Message
-
-Un bandeau d'information avec une icône facultative.
-
-## Default / Info
-
-Le bandeau est de type informatif sans icône (par défaut).
-
-<Canvas>
-  <Story name="Default" story={stories.Default} height={110} />
-</Canvas>
-
-## With icon
-
-Le bandeau avec une icône.
-
-<Canvas>
-  <Story name="With icon" story={stories.withIcon} height={110} />
-</Canvas>
-
-## Warning
-
-Le bandeau en cas d'alerte.
-
-<Canvas>
-  <Story name="Warning" story={stories.warning} height={110} />
-</Canvas>
-
-## Success
-
-Le bandeau en cas de validation.
-
-<Canvas>
-  <Story name="Success" story={stories.success} height={110} />
-</Canvas>
-
-## Error
-
-Le bandeau en cas de d'erreur.
-
-<Canvas>
-  <Story name="Error" story={stories.error} height={110} />
-</Canvas>
-
-## Alert
-
-⚠️ Ce type est déprécié, utilisez le type `error` à la place.
-
-## Usage
-
-Par défaut
-
-```html
-<PixMessage> Ceci est un message à caractère informatif. </PixMessage>
-```
-
-## Arguments
-
-<ArgsTable story="Default" />

package/app/stories/pix-return-to.stories.mdx

@@ -1,33 +0,0 @@
-import { Meta, Story, Canvas, ArgsTable } from '@storybook/addon-docs';
-import * as stories from './pix-return-to.stories.js';
-
-<Meta title="Basics/Return To" component="PixReturnTo" argTypes={stories.argTypes} />
-
-# Pix Return To
-
-Le `ReturnTo` est un lien de retour vers uneOpixRe page précédente.
-
-> Il est nécessaire de passer une @route au composant.
-
-> Il est possible d'afficher uniquement l'icone flèche en omettant de mettre du contenu enfant dans la balise.
-
-<Canvas isColumn>
-  Lien sans texte
-  <Story name="Return To" story={stories.returnTo} height={60} />
-  Lien avec texte
-  <Story name="Return To With Text" story={stories.returnToWithText} height={60} />
-</Canvas>
-
-## Usage
-
-```html
-Liens avec texte
-<PixReturnTo @route="profile"> Un lien de retour </PixReturnTo>
-
-Liens sans texte
-<PixReturnTo @route="profile" />
-```
-
-## Arguments
-
-<ArgsTable story="Return To With Text" />

package/app/stories/pix-selectable-tag.stories.mdx

@@ -1,43 +0,0 @@
-import { Meta, Story, Canvas, ArgsTable } from '@storybook/addon-docs';
-
-import * as stories from './pix-selectable-tag.stories.js';
-
-<Meta title="basics/Tag/Selectable Tag" component="PixSelectableTag" argTypes={stories.argTypes} />
-
-# Pix Selectable Tag
-
-Un tag permettant de sélectionner ou non la valeur.
-
-## Default
-
-<Canvas>
-  <Story name="Selectable Tag default" story={stories.selectableTagDefault} height={60} />
-</Canvas>
-
-## Selected
-
-<Canvas>
-  <Story name="Selectable Tag checked" story={stories.selectableTagSelected} height={60} />
-</Canvas>
-
-## Multiple tags
-
-<Canvas>
-  <Story name="Selectable Tag multiple" story={stories.selectableTagMultiple} height={60} />
-</Canvas>
-
-## Usage
-
-```html
-Par défaut :
-<PixSelectableTag> @label={{label}} @id={{id}} @onChange={{onChange}} </PixSelectableTag>
-
-Tag Sélectionné :
-<PixSelectableTag>
-  @label={{label}} @id={{id}} @onChange={{onChange}} @checked={{true}}
-</PixSelectableTag>
-```
-
-## Arguments
-
-<ArgsTable story="Selectable Tag default" />

package/app/stories/pix-toggle.stories.mdx

@@ -1,36 +0,0 @@
-import { Meta, Story, Canvas, ArgsTable } from '@storybook/addon-docs';
-import * as stories from './pix-toggle.stories.js';
-
-<Meta title="Form/Toggle" component="PixToggle" argTypes={stories.argTypes} />
-
-# Pix Toggle
-
-Affiche un bouton à deux états.
-
-## Default
-
-<Canvas>
-  <Story name="Default" story={stories.Default} height={200} />
-</Canvas>
-
-## Inline
-
-<Canvas>
-  <Story name="Inline" story={stories.Inline} height={200} />
-</Canvas>
-
-## ScreenReaderOnly
-
-<Canvas>
-  <Story name="ScreenReaderOnly" story={stories.ScreenReaderOnly} height={200} />
-</Canvas>
-
-## WithYields
-
-<Canvas>
-  <Story name="WithYields" story={stories.WithYields} height={200} />
-</Canvas>
-
-## Arguments
-
-<ArgsTable story="Default" />

package/docs/changelog.stories.mdx

@@ -1,6 +0,0 @@
-import Changelog from '../CHANGELOG.md';
-import { Meta, Description } from '@storybook/addon-docs';
-
-<Meta title="CHANGELOG" />
-
-<Description>{Changelog}</Description>