SELF-217: Update Alert and Badge Styles

CHANGELOG.md

@@ -1,5 +1,16 @@
 # CHANGELOG
 
+## v2.0.25
+
+- Refactor the `Badge` component's interface and implementation
+- Update styles of the `Alert` component
+
+### Breaking Changes
+
+- The `Badge` interface has changed and does not contain as many variants in favor of utilizing `variant` and `color`
+- Removes some `Badge` variants
+- The `Badge` component is no longer available globally, it must be imported directly
+
 ## v2.0.24
 
 - Adds an alternative to props for the Modal component through the use of slots

package.json

@@ -1,6 +1,6 @@
 {
   "name": "@lob/ui-components",
-  "version": "2.0.24",
+  "version": "2.0.25",
   "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/Alert/Alert.vue

@@ -1,19 +1,19 @@
 <template>
   <div
-    :class="`w-full rounded-lg shadow-XLarge py-4 px-6 ${variantDetails.color} ${variantDetails.bgColor}`"
+    :class="`w-full rounded-xl py-2 px-4 ${variantDetails.color} ${variantDetails.bgColor}`"
     data-testid="alert"
   >
     <div v-if="hasHeading" class="flex justify-between items-center">
       <div class="flex items-center">
         <component
           :is="variantDetails.icon"
           v-if="showIcon"
-          size="xl"
+          size="l"
           class="mr-2"
           :class="variantDetails.color"
           data-testid="alertIcon"
         />
-        <div class="type-large-700">
+        <div class="type-base-700">
           <slot name="heading" />
         </div>
       </div>
@@ -35,12 +35,12 @@
         <component
           :is="variantDetails.icon"
           v-if="showIcon && !hasHeading"
-          size="xl"
+          size="l"
           class="mr-4"
           :class="variantDetails.color"
           data-testid="alertIcon"
         />
-        <div :class="['type-small-500', { 'mt-2': hasHeading && hasContent }]">
+        <div :class="['type-small-600', { 'mt-1': hasHeading && hasContent }]">
           <slot />
           <!-- text/any content goes in the default slot -->
         </div>
@@ -67,9 +67,9 @@ import {
   CircleCheck,
   CircleExclamation,
   TriangleExclamation,
-  ArrowsRotate,
-  XmarkLarge
+  ArrowsRotate
 } from '@/components/Icons';
+import { Icon } from '../Icon';
 import LobLink from '../Link/Link';
 import ArrowUpRight from '../Icons/ArrowUpRight.vue';
 
@@ -98,12 +98,12 @@ const CloseButton = {
     data-testid="closeButton"
     @click="closeAlert"
   >
-    <XmarkLarge size="s" class="text-gray-500"/>
+    <Icon icon="Close" size="xl" class="text-gray-800"/>
   </button>`,
   props: {
     closeButtonAriaLabel: { type: String, default: 'Close alert' }
   },
-  components: { XmarkLarge },
+  components: { Icon },
   methods: {
     closeAlert() {
       this.$emit('close');
@@ -160,20 +160,20 @@ export default {
         {
           variant: 'info',
           icon: 'CircleInfo',
-          color: 'text-blue-700',
-          bgColor: 'bg-blue-50'
+          color: 'text-info-dark',
+          bgColor: 'bg-info-light'
         },
         {
           variant: 'success',
           icon: 'CircleCheck',
-          color: 'text-green-700',
-          bgColor: 'bg-green-50'
+          color: 'text-success-dark',
+          bgColor: 'bg-success-light'
         },
         {
           variant: 'warning',
           icon: 'TriangleExclamation',
-          color: 'text-orange-600',
-          bgColor: 'bg-orange-50'
+          color: 'text-warning-dark',
+          bgColor: 'bg-warning-light'
         },
         {
           variant: 'refresh',
@@ -184,8 +184,8 @@ export default {
         {
           variant: 'error',
           icon: 'CircleExclamation',
-          color: 'text-red-600',
-          bgColor: 'bg-red-50'
+          color: 'text-error-dark',
+          bgColor: 'bg-error-light'
         }
       ]
     };

src/components/Alert/__tests__/Alert.spec.js → src/components/Alert/__tests__/Alert.spec.ts

@@ -1,9 +1,10 @@
 import '@testing-library/jest-dom';
-import { render } from '@testing-library/vue';
+import { RenderOptions, render } from '@testing-library/vue';
 import Alert from '../Alert.vue';
 import userEvent from '@testing-library/user-event';
 
-const renderComponent = (options) => render(Alert, { ...options });
+const renderComponent = (options: RenderOptions) =>
+  render(Alert, { ...options });
 
 describe('Alert', () => {
   describe('alert content', () => {
@@ -13,7 +14,8 @@ describe('Alert', () => {
       const { getByText } = renderComponent({ slots });
 
       const alertContent = getByText(content);
-      expect(alertContent).toBeInTheDocument().toHaveClass('type-small-500');
+      expect(alertContent).toBeInTheDocument();
+      expect(alertContent).toHaveClass('type-small-600');
     });
 
     it('renders only the heading content', () => {
@@ -22,7 +24,8 @@ describe('Alert', () => {
       const { getByText } = renderComponent({ slots });
 
       const alertHeading = getByText(heading);
-      expect(alertHeading).toBeInTheDocument().toHaveClass('type-large-700');
+      expect(alertHeading).toBeInTheDocument();
+      expect(alertHeading).toHaveClass('type-base-700');
     });
 
     it('renders both the heading and default content', () => {
@@ -32,9 +35,11 @@ describe('Alert', () => {
       const { getByText } = renderComponent({ slots });
 
       const alertHeading = getByText(heading);
-      expect(alertHeading).toBeInTheDocument().toHaveClass('type-large-700');
+      expect(alertHeading).toBeInTheDocument();
+      expect(alertHeading).toHaveClass('type-base-700');
       const alertContent = getByText(content);
-      expect(alertContent).toBeInTheDocument().toHaveClass('type-small-500');
+      expect(alertContent).toBeInTheDocument();
+      expect(alertContent).toHaveClass('type-small-600');
     });
   });
 
@@ -44,9 +49,8 @@ describe('Alert', () => {
       const { getByTestId } = renderComponent({ slots });
 
       const alertContent = getByTestId('alert');
-      expect(alertContent)
-        .toBeInTheDocument()
-        .toHaveClass('text-blue-700 bg-blue-50');
+      expect(alertContent).toBeInTheDocument();
+      expect(alertContent).toHaveClass('text-info-dark bg-info-light');
     });
 
     it('renders the error colors with the error variant prop', () => {
@@ -57,9 +61,8 @@ describe('Alert', () => {
       });
 
       const alertContent = getByTestId('alert');
-      expect(alertContent)
-        .toBeInTheDocument()
-        .toHaveClass('text-red-600 bg-red-50');
+      expect(alertContent).toBeInTheDocument();
+      expect(alertContent).toHaveClass('text-error-dark bg-error-light');
     });
 
     it('renders the success colors with the success variant prop', () => {
@@ -70,9 +73,8 @@ describe('Alert', () => {
       });
 
       const alertContent = getByTestId('alert');
-      expect(alertContent)
-        .toBeInTheDocument()
-        .toHaveClass('text-green-700 bg-green-50');
+      expect(alertContent).toBeInTheDocument();
+      expect(alertContent).toHaveClass('text-success-dark bg-success-light');
     });
 
     it('renders the warning colors with the warning variant prop', () => {
@@ -83,9 +85,8 @@ describe('Alert', () => {
       });
 
       const alertContent = getByTestId('alert');
-      expect(alertContent)
-        .toBeInTheDocument()
-        .toHaveClass('text-orange-600 bg-orange-50');
+      expect(alertContent).toBeInTheDocument();
+      expect(alertContent).toHaveClass('text-warning-dark bg-warning-light');
     });
 
     it('renders the refresh colors with the refresh variant prop', () => {
@@ -96,9 +97,8 @@ describe('Alert', () => {
       });
 
       const alertContent = getByTestId('alert');
-      expect(alertContent)
-        .toBeInTheDocument()
-        .toHaveClass('text-purple-600 bg-purple-50');
+      expect(alertContent).toBeInTheDocument();
+      expect(alertContent).toHaveClass('text-purple-600 bg-purple-50');
     });
   });
 
@@ -108,7 +108,8 @@ describe('Alert', () => {
       const { getByTestId } = renderComponent({ slots });
 
       const alertIcon = getByTestId('alertIcon');
-      expect(alertIcon).toBeInTheDocument().toHaveClass('text-blue-700');
+      expect(alertIcon).toBeInTheDocument();
+      expect(alertIcon).toHaveClass('text-info-dark');
     });
 
     it('does not render the icon if the showIcon prop is false', () => {

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