feat: add upgrade button link (#436)

CHANGELOG.md

@@ -1,5 +1,9 @@
 # CHANGELOG
 
+## v2.0.3
+
+- Adds link variant `upgrade-button`.
+
 ## v2.0.2
 
 - Adds button variant `Upgrade`.

package.json

@@ -1,6 +1,6 @@
 {
   "name": "@lob/ui-components",
-  "version": "2.0.2",
+  "version": "2.0.3",
   "engines": {
     "node": ">=20.2.0",
     "npm": ">=10.2.0"

src/components/Link/Link.stories.js

@@ -41,6 +41,7 @@ export default {
       options: [
         'link',
         'primary-button',
+        'upgrade-button',
         'secondary-button',
         'quiet-button',
         'ghost-button',
@@ -92,6 +93,11 @@ StyledAsPrimaryButton.args = {
   variant: 'primary-button',
   content: 'I look like a button'
 };
+export const StyledAsUpgradeButton = Template.bind({});
+StyledAsUpgradeButton.args = {
+  variant: 'upgrade-button',
+  content: 'I look like an upgrade button'
+};
 
 export const StyledAsSecondaryButton = Template.bind({});
 StyledAsSecondaryButton.args = {

src/components/Link/Link.vue

@@ -27,6 +27,10 @@
           'bg-black text-white hover:bg-gray-700 hover:text-white active:bg-gray-800 focus:bg-gray-800':
             primaryButton
         },
+        {
+          'bg-[#483AC5] text-white hover:bg-[#6C61D1] active:bg-[#483AC5] focus:bg-[#483AC5]':
+            upgradeButton
+        },
         {
           'bg-white text-gray-800 border border-gray-800 hover:bg-gray-50 hover:text-gray-800 focus:border-gray-800 active:bg-gray-100 focus:bg-gray-100':
             secondaryButton
@@ -80,6 +84,7 @@ export default {
         return [
           'link',
           'primary-button',
+          'upgrade-button',
           'secondary-button',
           'quiet-button',
           'ghost-button',
@@ -142,6 +147,9 @@ export default {
     primaryButton() {
       return this.variant === 'primary-button';
     },
+    upgradeButton() {
+      return this.variant === 'upgrade-button';
+    },
     secondaryButton() {
       return this.variant === 'secondary-button';
     },