Feat/606 storybook badges (#930)

* feature(ui-library): added storybook badges addon and customized it
deven-org · Feb 19, 2024 · 690072e · 690072e
1 parent cf63caa
commit 690072e
Show file tree

Hide file tree

Showing 31 changed files with 147 additions and 30 deletions.
diff --git a/package.json b/package.json
@@ -102,6 +102,7 @@
     "webpack-cli": "^5.0.1"
   },
   "dependencies": {
+    "@geometricpanda/storybook-addon-badges": "^2.0.2",
     "@lit-labs/react": "^1.1.1",
     "http-server": "^14.1.1",
     "lit": "^2.7.4",

diff --git a/packages/ui-library/.storybook/badges.ts b/packages/ui-library/.storybook/badges.ts
@@ -0,0 +1,7 @@
+export enum BADGE {
+  DRAFT = 'Draft',
+  NEW = 'New',
+  STABLE = 'Stable',
+  DEPRECATED = 'Deprecated',
+  UPDATED = 'Updated',
+}
diff --git a/packages/ui-library/.storybook/main.ts b/packages/ui-library/.storybook/main.ts
@@ -3,7 +3,12 @@ import { resolve } from 'path';
 
 const config: StorybookConfig = {
   stories: ['../src/**/*.stories.@(js|jsx|ts|tsx)'],
-  addons: ['@storybook/addon-essentials', '@storybook/addon-a11y', '@storybook/addon-designs'],
+  addons: [
+    '@storybook/addon-essentials',
+    '@storybook/addon-a11y',
+    '@storybook/addon-designs',
+    '@geometricpanda/storybook-addon-badges',
+  ],
   framework: '@storybook/web-components-webpack5',
   docs: {
     autodocs: true,

diff --git a/packages/ui-library/.storybook/preview.js b/packages/ui-library/.storybook/preview.js
@@ -1,5 +1,6 @@
 import '../../assets/iconGallery/iconGallery.css';
 import '../../assets/fonts/fonts.css';
+import { BADGE } from './badges';
 
 export default {
   parameters: {
@@ -32,5 +33,87 @@ export default {
         },
       ],
     },
+    badgesConfig: {
+      [BADGE.DRAFT]: {
+        styles: {
+          fontSize: '0.75rem',
+          fontWeight: '600',
+          lineHeight: '1rem',
+          backgroundColor: '#707070',
+          borderRadius: '32px',
+          borderStyle: '#707070 solid 32px',
+          color: '#FFFFFF',
+          textTransform: 'capitalize',
+        },
+        title: 'Draft',
+        tooltip: {
+          desc: 'Design, Code and/or Documentation are not finished. Components labeled as "Draft" are not yet ready for broader use.',
+        },
+      },
+      [BADGE.NEW]: {
+        styles: {
+          fontSize: '0.75rem',
+          fontWeight: '600',
+          lineHeight: '1rem',
+          backgroundColor: '#FFD614',
+          borderRadius: '32px',
+          borderColor: '#FFD614',
+          color: '#414347',
+          textTransform: 'capitalize',
+        },
+        title: 'New',
+        tooltip: {
+          desc: 'Newly introduced component, which has been tested and approved by the core team. Updates to Design, Code and/or Documentation are still possible.',
+        },
+      },
+      [BADGE.STABLE]: {
+        styles: {
+          fontSize: '0.75rem',
+          fontWeight: '600',
+          lineHeight: '1rem',
+          backgroundColor: '#50A824',
+          borderColor: '#50A824',
+          borderRadius: '32px',
+          color: '#FFFFFF',
+          textTransform: 'capitalize',
+        },
+        title: 'Stable',
+        tooltip: {
+          desc: 'Proven stable over multiple releases, the component has reached a mature and reliable state, suitable for widespread use.',
+        },
+      },
+      [BADGE.DEPRECATED]: {
+        styles: {
+          fontSize: '0.75rem',
+          fontWeight: '600',
+          lineHeight: '1rem',
+          backgroundColor: '#D22D48',
+          borderRadius: '32px',
+          borderColor: '#D22D48',
+          color: '#FFFFFF',
+          textTransform: 'capitalize',
+        },
+        title: 'Deprecated',
+        tooltip: {
+          desc: 'No longer receives active support and is not recommended for new implementations. Might be made unavailable soon. Transition to alternatives is advised.',
+        },
+      },
+      [BADGE.UPDATED]: {
+        styles: {
+          fontSize: '0.75rem',
+          fontWeight: '600',
+          lineHeight: '1rem',
+          backgroundColor: '#FFD614',
+          borderColor: '#FFD614',
+          borderRadius: '32px',
+          color: '#414347',
+          textTransform: 'capitalize',
+        },
+        title: 'Updated',
+        tooltip: {
+          desc: 'A previously stable component with new functionalities, which could still receive updates and has not yet reached a mature and reliable state.',
+        },
+      },
+    },
   },
 };
diff --git a/packages/ui-library/src/components/button-group/index.stories.ts b/packages/ui-library/src/components/button-group/index.stories.ts
@@ -52,6 +52,7 @@ export default {
     },
   },
   parameters: {
+    badges: ['New'],
     layout: 'centered',
     docs: {
       description: {

diff --git a/packages/ui-library/src/components/checkbox/index.stories.ts b/packages/ui-library/src/components/checkbox/index.stories.ts
@@ -207,6 +207,7 @@ export default {
     },
   },
   parameters: {
+    badges: ['Draft'],
     design: {
       type: 'figma',
       url: 'https://www.figma.com/file/C4vgEKz8mKyulJ4gm3Qdql/%F0%9F%AB%A7-%5BBLR%5D-The-B01LER?node-id=3618%3A125200&mode=dev',

diff --git a/packages/ui-library/src/components/counter/index.stories.ts b/packages/ui-library/src/components/counter/index.stories.ts
@@ -68,6 +68,7 @@ export default {
     },
   },
   parameters: {
+    badges: ['Draft'],
     design: {
       type: 'figma',
       url: 'https://www.figma.com/file/C4vgEKz8mKyulJ4gm3Qdql/%F0%9F%AB%A7-%5BBLR%5D-The-B01LER?node-id=3618%3A126743&mode=dev',

diff --git a/packages/ui-library/src/components/divider/index.stories.ts b/packages/ui-library/src/components/divider/index.stories.ts
@@ -42,6 +42,7 @@ export default {
     },
   },
   parameters: {
+    badges: ['New'],
     design: {
       type: 'figma',
       url: 'https://www.figma.com/file/C4vgEKz8mKyulJ4gm3Qdql/%F0%9F%AB%A7-%5BBLR%5D-The-B01LER?node-id=3618%3A127845&mode=dev',

diff --git a/packages/ui-library/src/components/form-caption-group/index.stories.ts b/packages/ui-library/src/components/form-caption-group/index.stories.ts
@@ -19,6 +19,7 @@ export default {
     },
   },
   parameters: {
+    badges: ['New'],
     design: {
       type: 'figma',
       url: 'https://www.figma.com/file/C4vgEKz8mKyulJ4gm3Qdql/%F0%9F%AB%A7-%5BBLR%5D-The-B01LER?node-id=8273%3A7564&mode=dev',

diff --git a/packages/ui-library/src/components/form-caption/index.stories.ts b/packages/ui-library/src/components/form-caption/index.stories.ts
@@ -61,6 +61,7 @@ export default {
     },
   },
   parameters: {
+    badges: ['Draft'],
     design: {
       type: 'figma',
       url: 'https://www.figma.com/file/C4vgEKz8mKyulJ4gm3Qdql/%F0%9F%AB%A7-%5BBLR%5D-The-B01LER?node-id=3618%3A125223&mode=dev',

diff --git a/packages/ui-library/src/components/form-label/index.stories.ts b/packages/ui-library/src/components/form-label/index.stories.ts
@@ -75,6 +75,7 @@ export default {
     },
   },
   parameters: {
+    badges: ['New'],
     design: {
       type: 'figma',
       url: 'https://www.figma.com/file/C4vgEKz8mKyulJ4gm3Qdql/%F0%9F%AB%A7-%5BBLR%5D-The-B01LER?node-id=3618%3A125225&mode=dev',

diff --git a/packages/ui-library/src/components/icon-button/index.stories.ts b/packages/ui-library/src/components/icon-button/index.stories.ts
@@ -46,7 +46,6 @@ const argTypesToDisable = [
 const generateDisabledArgTypes = (argTypes: string[]) => {
   const disabledArgTypes = {};
   argTypes.forEach((argType: string) => {
-    // @ts-expect-error todo
     disabledArgTypes[argType] = {
       table: {
         disable: true,
@@ -89,7 +88,6 @@ export default {
     },
     // Content / Settings
     icon: {
-      name: 'icon',
       description: 'Select the icon of the component.',
       options: [undefined, ...PureIconKeys],
       control: { type: 'select' },
@@ -99,7 +97,6 @@ export default {
     },
     //States
     disabled: {
-      name: 'disabled',
       description: 'Choose if component is disabled. Prevents the user to click or focus the component.',
       table: {
         category: 'States',
@@ -123,7 +120,6 @@ export default {
     },
     //Technical attributes
     buttonId: {
-      name: 'buttonId',
       description: 'Unique identifier for this component.',
       table: {
         category: 'Technical Attributes',
@@ -132,23 +128,20 @@ export default {
 
     // Events
     onChange: {
-      name: 'onChange',
       description: 'Fires when the value changes.',
       action: 'onChange',
       table: {
         disable: true,
       },
     },
     onFocus: {
-      name: 'onFocus',
       description: 'Fires when the component is focused.',
       action: 'onFocus',
       table: {
         disable: true,
       },
     },
     onBlur: {
-      name: 'onBlur',
       description: 'Fires when the component lost focus.',
       action: 'onBlur',
       table: {
@@ -157,6 +150,7 @@ export default {
     },
   },
   parameters: {
+    badges: ['New'],
     design: {
       type: 'figma',
       url: 'https://www.figma.com/file/C4vgEKz8mKyulJ4gm3Qdql/%F0%9F%AB%A7-%5BBLR%5D-The-B01LER?node-id=3618%3A106388&mode=dev',

diff --git a/packages/ui-library/src/components/icon-link/index.stories.ts b/packages/ui-library/src/components/icon-link/index.stories.ts
@@ -28,6 +28,7 @@ export default {
     },
   },
   parameters: {
+    badges: ['Draft'],
     design: {
       type: 'figma',
       url: 'https://www.figma.com/file/C4vgEKz8mKyulJ4gm3Qdql/%F0%9F%AB%A7-%5BBLR%5D-The-B01LER?node-id=3618%3A106388&mode=dev',

diff --git a/packages/ui-library/src/components/icon/index.stories.ts b/packages/ui-library/src/components/icon/index.stories.ts
@@ -61,6 +61,7 @@ export default {
     },
   },
   parameters: {
+    badges: ['New'],
     layout: 'centered',
     docs: {
       description: {

diff --git a/packages/ui-library/src/components/loader/index.stories.ts b/packages/ui-library/src/components/loader/index.stories.ts
@@ -55,6 +55,7 @@ export default {
     },
   },
   parameters: {
+    badges: ['New'],
     design: {
       type: 'figma',
       url: 'https://www.figma.com/file/C4vgEKz8mKyulJ4gm3Qdql/%F0%9F%AB%A7-%5BBLR%5D-The-B01LER?node-id=3618%3A126742&mode=dev',

diff --git a/packages/ui-library/src/components/number-input/index.stories.ts b/packages/ui-library/src/components/number-input/index.stories.ts
@@ -341,6 +341,7 @@ export default {
     },
   },
   parameters: {
+    badges: ['Draft'],
     design: {
       type: 'figma',
       url: 'https://www.figma.com/file/C4vgEKz8mKyulJ4gm3Qdql/%F0%9F%AB%A7-%5BBLR%5D-The-B01LER?node-id=7155%3A108301&mode=dev',
@@ -349,7 +350,7 @@ export default {
     docs: {
       description: {
         component: `<markdown>
-      Number Input allows users to enter enter numbers into a designated area. Users can interact with the Number Input component by clicking or tapping on it, which activates it for text entry. It often displays a blinking cursor to indicate the current number insertion point.
+      Number Input allows users to  enter numbers into a designated area. Users can interact with the Number Input component by clicking or tapping on it, which activates it for text entry. It often displays a blinking cursor to indicate the current number insertion point.
       - [**Appearance**](#appearance)
         - [**Size Variant**](#size-variant)
         - [**Stepper Variant**](#stepper-variant)

diff --git a/packages/ui-library/src/components/radio-group/index.stories.ts b/packages/ui-library/src/components/radio-group/index.stories.ts
@@ -194,6 +194,7 @@ export default {
     },
   },
   parameters: {
+    badges: ['Draft'],
     design: {
       type: 'figma',
       url: 'https://www.figma.com/file/C4vgEKz8mKyulJ4gm3Qdql/%F0%9F%AB%A7-%5BBLR%5D-The-B01LER?node-id=3618%3A125199&mode=dev',

diff --git a/packages/ui-library/src/components/radio/index.stories.ts b/packages/ui-library/src/components/radio/index.stories.ts
@@ -189,6 +189,7 @@ export default {
     },
   },
   parameters: {
+    badges: ['Draft'],
     design: {
       type: 'figma',
       url: 'https://www.figma.com/file/C4vgEKz8mKyulJ4gm3Qdql/%F0%9F%AB%A7-%5BBLR%5D-The-B01LER?node-id=3618%3A125199&mode=dev',

diff --git a/packages/ui-library/src/components/select/index.stories.ts b/packages/ui-library/src/components/select/index.stories.ts
@@ -217,6 +217,7 @@ export default {
     },
   },
   parameters: {
+    badges: ['Draft'],
     design: {
       type: 'figma',
       url: 'https://www.figma.com/file/C4vgEKz8mKyulJ4gm3Qdql/%F0%9F%AB%A7-%5BBLR%5D-The-B01LER?node-id=3618%3A125198&mode=dev',

diff --git a/packages/ui-library/src/components/slider-single-value/range-legend-slider/index.stories.ts b/packages/ui-library/src/components/slider-single-value/range-legend-slider/index.stories.ts
@@ -35,6 +35,7 @@ export default {
     },
   },
   parameters: {
+    badges: ['Draft'],
     previewTabs: {
       canvas: { hidden: true },
     },

diff --git a/packages/ui-library/src/components/slider-single-value/range-slider/index.stories.ts b/packages/ui-library/src/components/slider-single-value/range-slider/index.stories.ts
@@ -36,6 +36,7 @@ export default {
     },
   },
   parameters: {
+    badges: ['Draft'],
     viewMode: 'docs',
   },
 };

diff --git a/.../ui-library/src/components/slider-two-values/range-legend-min-max-slider/index.stories.ts b/.../ui-library/src/components/slider-two-values/range-legend-min-max-slider/index.stories.ts
@@ -35,6 +35,7 @@ export default {
     },
   },
   parameters: {
+    badges: ['Draft'],
     previewTabs: {
       canvas: { hidden: true },
     },

diff --git a/packages/ui-library/src/components/slider-two-values/range-min-max-slider/index.stories.ts b/packages/ui-library/src/components/slider-two-values/range-min-max-slider/index.stories.ts
@@ -35,6 +35,7 @@ export default {
     },
   },
   parameters: {
+    badges: ['Draft'],
     previewTabs: {
       canvas: { hidden: true },
     },

diff --git a/packages/ui-library/src/components/tab-bar/index.stories.ts b/packages/ui-library/src/components/tab-bar/index.stories.ts
@@ -55,6 +55,7 @@ export default {
     },
   },
   parameters: {
+    badges: ['Draft'],
     design: {
       type: 'figma',
       url: 'https://www.figma.com/file/C4vgEKz8mKyulJ4gm3Qdql/%F0%9F%AB%A7-%5BBLR%5D-The-B01LER?node-id=3231%3A94377&mode=dev',

diff --git a/packages/ui-library/src/components/text-button/index.stories.ts b/packages/ui-library/src/components/text-button/index.stories.ts
@@ -179,6 +179,7 @@ export default {
     },
   },
   parameters: {
+    badges: ['Draft'],
     design: {
       type: 'figma',
       url: 'https://www.figma.com/file/C4vgEKz8mKyulJ4gm3Qdql/%F0%9F%AB%A7-%5BBLR%5D-The-B01LER?node-id=705%3A1815&mode=dev',

diff --git a/packages/ui-library/src/components/text-input/index.stories.ts b/packages/ui-library/src/components/text-input/index.stories.ts
@@ -283,6 +283,7 @@ export default {
   },
 
   parameters: {
+    badges: ['Draft'],
     design: {
       type: 'figma',
       url: 'https://www.figma.com/file/C4vgEKz8mKyulJ4gm3Qdql/%F0%9F%AB%A7-%5BBLR%5D-The-B01LER?node-id=3618%3A125196&mode=dev',