refactor: badge component

CHANGELOG.md

@@ -1,5 +1,14 @@
 # CHANGELOG
 
+## v2.0.21
+
+- Refactor the `Badge` component's interface and implementation
+
+### Breaking Changes
+
+- The `Badge` interface has changed and does not contain as many variants in favor of utilizing `variant` and `color`
+- The `Badge` component is no longer available globally, it must be imported directly
+
 ## v2.0.20
 
 - Begin adding type definitions

package.json

@@ -1,6 +1,6 @@
 {
   "name": "@lob/ui-components",
-  "version": "2.0.20",
+  "version": "2.0.21",
   "engines": {
     "node": ">=20.2.0",
     "npm": ">=10.2.0"
@@ -81,7 +81,7 @@
     "storybook": "^7.6.12",
     "stylelint": "^13.13.1",
     "stylelint-config-standard": "^22.0.0",
-    "tailwind-plugin-lob": "^1.0.5",
+    "tailwind-plugin-lob": "^1.0.9",
     "tailwindcss": "^3.0.24",
     "typescript": "^5.1.6",
     "vite": "^3.1.4",

src/components/Badge/Badge.mdx

@@ -1,34 +1,14 @@
 import { Canvas, ArgTypes, PRIMARY_STORY } from '@storybook/addon-docs';
-import { Primary } from './Badge.stories';
+import { AllBadges } from './Badge.stories';
+import { BadgeVariant } from './constants';
 
 # Badge
 
-Badges are a flexible component used to display small nuggets of text prominently.
-
-<Canvas of={Primary} />
-
-## How to Use
-
-There are 6 variants of badges: `default`, `secondary`, `info`, `success`, `warning`, and `error`.
-
-You can change the variant of the badge by adding the `variant` prop to the component.
+<Canvas of={AllBadges} />
 
-There are 2 sizes of badges: `default` and `small`.
+## Usage
 
-To change the size of the badge add the `size` prop to the component.
-
-Please note: though you can only insert text in the Storybook demo, the badge component will accept any valid HTML or Vue component.
-
-Example of using this component as a default badge in a template
-
-```html
-<Badge>
-  <p>
-    You are in <span class="bold">LIVE</span> mode, all verifications will be
-    charged according to your <a href="#">chosen plan</a>.
-  </p>
-</Badge>
-```
+Badges are a flexible component used to display small nuggets of text prominently.
 
 ## Props
 

src/components/Badge/Badge.stories.js

@@ -1,5 +1,7 @@
+import { IconName } from '../Icon/types';
 import Badge from './Badge.vue';
 import mdx from './Badge.mdx';
+import { BadgeColor, BadgeSize, BadgeVariant } from './constants';
 
 export default {
   title: 'Components/Badge',
@@ -10,37 +12,59 @@ export default {
     }
   },
   argTypes: {
+    color: {
+      options: Object.values(BadgeColor),
+      control: {
+        type: 'select'
+      },
+      table: {
+        type: {
+          summary: Object.values(BadgeColor).join(' | ')
+        }
+      }
+    },
     content: {
       control: {
         type: 'text'
       },
-      description: 'Content to display inside of the card',
+      description: 'Slot content',
       table: {
-        defaultValue: 'I am a card.',
         type: {
-          summary: 'html or component'
+          summary: 'string | Vue.Component'
+        }
+      }
+    },
+    icon: {
+      options: Object.values(IconName),
+      control: {
+        type: 'select'
+      },
+      table: {
+        type: {
+          summary: Object.values(IconName).join(' | ')
         }
       }
     },
     variant: {
-      options: [
-        'default',
-        'secondary',
-        'info',
-        'success',
-        'warning',
-        'error',
-        'gradient-primary',
-        'gradient-secondary'
-      ],
+      options: Object.values(BadgeVariant),
       control: {
         type: 'select'
+      },
+      table: {
+        type: {
+          summary: Object.values(BadgeVariant).join(' | ')
+        }
       }
     },
     size: {
-      options: ['default', 'small'],
+      options: Object.values(BadgeSize),
       control: {
         type: 'select'
+      },
+      table: {
+        type: {
+          summary: Object.values(BadgeSize).join(' | ')
+        }
       }
     }
   }
@@ -50,10 +74,41 @@ const Template = (args, { argTypes }) => ({
   props: Object.keys(argTypes),
   components: { Badge },
   setup: () => ({ args }),
-  template: '<badge v-slot v-bind="args">{{ args.content }}</badge>'
+  template: '<Badge v-slot v-bind="args">{{ args.content }}</Badge>'
 });
 
 export const Primary = Template.bind({});
 Primary.args = {
+  content: 'Badge'
+};
+
+const AllBadgesTemplate = (args) => ({
+  components: { Badge },
+  setup: () => ({ args }),
+  template: `<div class="flex flex-col gap-4 items-center">
+    ${Object.values(BadgeVariant)
+      .map(
+        (variant) =>
+          `<div class="flex gap-2">
+        ${Object.values(BadgeColor)
+          .map(
+            (color) =>
+              `<div class="flex flex-col gap-2 items-center">
+            ${Object.values(BadgeSize)
+              .map(
+                (size) =>
+                  `<Badge variant="${variant}" color="${color}" size="${size}">Badge</Badge>`
+              )
+              .join('')}
+          </div>`
+          )
+          .join('')}
+      </div>`
+      )
+      .join('')}
+  </div>`
+});
+export const AllBadges = AllBadgesTemplate.bind({});
+AllBadges.args = {
   content: 'Badge text.'
 };