feat: add upsell components

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="M13.2609 6.36751C13.2055 6.25757 13.1207 6.16511 13.016 6.10039C12.9113 6.03567 12.7907 6.00122 12.6676 6.00084H9.33422V2.00084C9.34137 1.85463 9.3002 1.71013 9.21707 1.58964C9.13393 1.46916 9.01345 1.37938 8.87422 1.33418C8.74037 1.29014 8.59601 1.28964 8.46186 1.33276C8.32771 1.37588 8.21067 1.4604 8.12755 1.57418L2.79422 8.90751C2.72739 9.00409 2.68727 9.1166 2.6779 9.23367C2.66854 9.35074 2.69027 9.4682 2.74088 9.57418C2.7875 9.69534 2.86848 9.80026 2.97388 9.87605C3.07928 9.95185 3.20452 9.99522 3.33422 10.0008H6.66755V14.0008C6.66765 14.1414 6.7122 14.2784 6.79481 14.3921C6.87743 14.5059 6.99389 14.5906 7.12755 14.6342C7.19453 14.6549 7.26411 14.6662 7.33422 14.6675C7.43941 14.6678 7.54317 14.6432 7.63702 14.5957C7.73088 14.5481 7.81216 14.4791 7.87422 14.3942L13.2076 7.06084C13.2794 6.96137 13.3224 6.84401 13.3318 6.72168C13.3412 6.59935 13.3167 6.47679 13.2609 6.36751ZM8.00088 11.9475V9.33418C8.00088 9.15736 7.93065 8.9878 7.80562 8.86277C7.6806 8.73775 7.51103 8.66751 7.33422 8.66751H4.66755L8.00088 4.05418V6.66751C8.00088 6.84432 8.07112 7.01389 8.19615 7.13891C8.32117 7.26394 8.49074 7.33418 8.66755 7.33418H11.3342L8.00088 11.9475Z"
+      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';

tailwind.config.js

@@ -15,6 +15,12 @@ module.exports = {
   theme: {
     fontFamily: {
       messina: ['Messina', 'sans-serif']
+    },
+    extend: {
+      colors: {
+        'line-purple': '#483AC5',
+        'light-purple': '#F7F5FA'
+      }
     }
   },
   plugins: [