[TECH] Ajouter un addon storybook pour afficher des tags informatifs

#830
1024pix · Feb 28, 2025 · 19c6aca · 19c6aca
2 parents aa7f8e7 + b2261c4
commit 19c6aca
Show file tree

Hide file tree

Showing 7 changed files with 30 additions and 3 deletions.
diff --git a/.storybook/main.js b/.storybook/main.js
@@ -3,6 +3,7 @@ const config = {
     '@storybook/addon-essentials',
     '@storybook/addon-a11y',
     '@storybook/addon-webpack5-compiler-babel',
+    'storybook-addon-tag-badges',
   ],
 
   stories: ['../docs/**/*.@(mdx|stories.@(mdx))', '../app/*/*.@(mdx|stories.@(js|jsx|ts|tsx))'],

diff --git a/.storybook/manager.js b/.storybook/manager.js
@@ -1,10 +1,12 @@
 import { addons } from '@storybook/manager-api';
+import { renderLabel } from 'storybook-addon-tag-badges';
 
 import storybookCustomTheme from './storybook-custom-theme';
 
 addons.setConfig({
   theme: storybookCustomTheme,
   sidebar: {
     showRoots: true,
+    renderLabel,
   },
 });
diff --git a/app/stories/pix-table.stories.js b/app/stories/pix-table.stories.js
@@ -2,6 +2,7 @@ import { hbs } from 'ember-cli-htmlbars';
 
 export default {
   title: 'Data display/Table',
+  tags: ['new'],
   // select attribute data type from https://storybook.js.org/docs/react/essentials/controls
   argTypes: {
     data: {

diff --git a/blueprints/pix-component/files/app/stories/pix-__name__.stories.js b/blueprints/pix-component/files/app/stories/pix-__name__.stories.js
@@ -2,6 +2,7 @@ import { hbs } from 'ember-cli-htmlbars';
 
 export default {
   title: '<%= classifiedModuleName %>',
+  tags: ['new'], // You can find preconfigured tags list here https://github.com/Sidnioulz/storybook-addon-tag-badges#preconfigured-badges
   // TODO: add component attributes information
   // select attribute data type from https://storybook.js.org/docs/react/essentials/controls
   argTypes: {

diff --git a/docs/create-component.mdx b/docs/create-component.mdx
@@ -55,6 +55,8 @@ import { hbs } from 'ember-cli-htmlbars'; // import nécessaire pour 'canvasCont
 
 export default {
   title: 'Docs/Notification Alert',
+  // On peut ajouter un tag qui affichera un badge donnant une information sur le statut du composant (ex: 'new', 'deprecated', ...)
+  tags: ['new'],
   // Ici on définit et on documente les arguments du composant
   argTypes: {
     type: {

diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -130,6 +130,7 @@
     "qunit-dom": "^3.4.0",
     "sass": "^1.83.1",
     "storybook": "^8.4.7",
+    "storybook-addon-tag-badges": "^1.4.0",
     "stylelint": "^16.13.2",
     "svg-sprite": "^2.0.4",
     "svgo": "^3.3.2",