feat: add upsell components

CHANGELOG.md

@@ -1,5 +1,10 @@
 # CHANGELOG
 
+## v2.0.2
+
+- Adds button variant `Upgrade`.
+- Adds a `Lightning` icon.
+
 ## v2.0.1
 
 - Adds a `CircleEmpty` icon.

package.json

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

src/components/Button/Button.stories.js

@@ -26,6 +26,7 @@ export default {
     variant: {
       options: [
         'primary',
+        'upgrade',
         'secondary',
         'danger',
         'danger-secondary',
@@ -58,6 +59,12 @@ Primary.args = {
   content: 'Primary button'
 };
 
+export const Upgrade = Template.bind({});
+Upgrade.args = {
+  content: 'Upgrade button',
+  variant: 'upgrade'
+};
+
 export const Secondary = Template.bind({});
 Secondary.args = {
   content: 'Secondary button',

src/components/Button/Button.vue

@@ -14,6 +14,10 @@
         'bg-black text-white hover:bg-gray-700 active:bg-gray-800 focus:bg-gray-800':
           primary
       },
+      {
+        'bg-[#483AC5] text-white hover:bg-[#6C61D1] active:bg-[#483AC5] focus:bg-[#483AC5]':
+          upgrade
+      },
       {
         'bg-white text-gray-800 border border-gray-800 hover:bg-gray-50 active:bg-gray-100 focus:bg-gray-100 disabled:border-gray-200 disabled:text-gray-400 disabled:hover:bg-white':
           secondary
@@ -62,6 +66,7 @@ export default {
       validator: function (value) {
         return [
           'primary',
+          'upgrade',
           'secondary',
           'danger',
           'danger-secondary',
@@ -104,6 +109,9 @@ export default {
     primary() {
       return this.variant === 'primary';
     },
+    upgrade() {
+      return this.variant === 'upgrade';
+    },
     secondary() {
       return this.variant === 'secondary';
     },

src/components/Icons/Lightning.vue

@@ -0,0 +1,42 @@
+<template>
+  <svg
+    :width="currentSize"
+    :height="currentSize"
+    viewBox="0 0 20 20"
+    fill="none"
+    xmlns="http://www.w3.org/2000/svg"
+  >
+    <path
+      d="M16.575 7.95833C16.5058 7.8209 16.3998 7.70534 16.2689 7.62444C16.138 7.54354 15.9872 7.50047 15.8333 7.5H11.6667V2.5C11.6756 2.31724 11.6242 2.13661 11.5202 1.986C11.4163 1.83539 11.2657 1.72317 11.0917 1.66667C10.9244 1.61162 10.7439 1.611 10.5762 1.6649C10.4085 1.7188 10.2622 1.82444 10.1583 1.96667L3.49167 11.1333C3.40814 11.2541 3.35799 11.3947 3.34628 11.541C3.33458 11.6874 3.36173 11.8342 3.42501 11.9667C3.48327 12.1181 3.5845 12.2493 3.71625 12.344C3.848 12.4388 4.00455 12.493 4.16667 12.5H8.33334V17.5C8.33347 17.6757 8.38915 17.8469 8.49242 17.9891C8.59569 18.1313 8.74127 18.2372 8.90834 18.2917C8.99207 18.3176 9.07903 18.3316 9.16667 18.3333C9.29816 18.3337 9.42786 18.3029 9.54518 18.2435C9.6625 18.1841 9.7641 18.0978 9.84167 17.9917L16.5083 8.825C16.5981 8.70066 16.6519 8.55396 16.6636 8.40105C16.6754 8.24813 16.6447 8.09494 16.575 7.95833V7.95833ZM10 14.9333V11.6667C10 11.4457 9.91221 11.2337 9.75593 11.0774C9.59965 10.9211 9.38769 10.8333 9.16667 10.8333H5.83334L10 5.06667V8.33333C10 8.55435 10.0878 8.76631 10.2441 8.92259C10.4004 9.07887 10.6123 9.16667 10.8333 9.16667H14.1667L10 14.9333Z"
+      fill="currentColor"
+    />
+  </svg>
+</template>
+
+<script>
+const iconInfo = {
+  xxl: { size: 24 },
+  xl: { size: 20 },
+  l: { size: 18 },
+  m: { size: 16 },
+  s: { size: 14 }
+};
+
+export default {
+  name: 'Lightning',
+  props: {
+    size: {
+      type: String,
+      default: 'm',
+      validator: function (value) {
+        return ['xxl', 'xl', 'l', 'm', 's'].includes(value);
+      }
+    }
+  },
+  computed: {
+    currentSize() {
+      return iconInfo[this.size].size;
+    }
+  }
+};
+</script>

src/components/Icons/index.js

@@ -67,6 +67,7 @@ export { default as Globe } from './Globe';
 export { default as HouseChimney } from './HouseChimney';
 export { default as Info } from './Info';
 export { default as LayerGroup } from './LayerGroup';
+export { default as Lightning } from './Lightning';
 export { default as List } from './List';
 export { default as LocationDot } from './LocationDot';
 export { default as LocationPin } from './LocationPin';