@designcrowd/fe-shared-lib 1.0.17-kp-3 → 1.0.17-update-vue

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@designcrowd/fe-shared-lib",
-  "version": "1.0.17-kp-3",
+  "version": "1.0.17-update-vue",
   "scripts": {
     "start": "npm run storybook",
     "build": "npm run build:css --production",
@@ -28,10 +28,10 @@
     "postcss-loader": "8.1.0",
     "swiper": "11.0.6",
     "tailwindcss": "3.4.1",
-    "vite": "5.2.3",
+    "vite": "6.2.3",
     "vite-plugin-eslint": "1.8.1",
     "vite-plugin-vue-devtools": "7.7.0",
-    "vue": "3.5.3",
+    "vue": "3.5.13",
     "vue-color": "2.8.1",
     "vue-cropperjs": "5.0.0",
     "vue-observe-visibility": "1.0.0",
@@ -39,15 +39,15 @@
     "yargs": "17.7.2"
   },
   "devDependencies": {
-    "@storybook/addon-a11y": "8.0.4",
-    "@storybook/addon-actions": "8.0.4",
-    "@storybook/addon-controls": "8.0.4",
-    "@storybook/addon-essentials": "8.0.4",
-    "@storybook/addon-links": "8.0.4",
-    "@storybook/addon-themes": "8.0.4",
-    "@storybook/vue3": "8.0.4",
-    "@storybook/vue3-vite": "8.0.4",
-    "@vitejs/plugin-vue": "5.0.4",
+    "@storybook/addon-a11y": "8.6.11",
+    "@storybook/addon-actions": "8.6.11",
+    "@storybook/addon-controls": "8.6.11",
+    "@storybook/addon-essentials": "8.6.11",
+    "@storybook/addon-links": "8.6.11",
+    "@storybook/addon-themes": "8.6.11",
+    "@storybook/vue3": "8.6.11",
+    "@storybook/vue3-vite": "8.6.11",
+    "@vitejs/plugin-vue": "5.2.3",
     "@vue/cli-plugin-eslint": "5.0.8",
     "@vue/cli-service": "5.0.8",
     "@vue/eslint-config-airbnb": "8.0.0",
@@ -68,7 +68,7 @@
     "postcss-import": "16.0.0",
     "postcss-nested": "6.0.1",
     "prettier": "3.2.4",
-    "storybook": "8.0.4",
+    "storybook": "8.6.11",
     "stylelint": "16.2.1",
     "stylelint-config-standard": "36.0.0",
     "tailwindcss": "3.4.1",

package/public/css/tailwind-brandCrowd.css

@@ -651,10 +651,6 @@ video {
   margin-top: 1rem;
   margin-bottom: 1rem;
 }
-.theme-brandCrowd .tw-my-5 {
-  margin-top: 1.25rem;
-  margin-bottom: 1.25rem;
-}
 .theme-brandCrowd .tw-my-auto {
   margin-top: auto;
   margin-bottom: auto;
@@ -1194,9 +1190,6 @@ video {
 .theme-brandCrowd .tw-border-b-0 {
   border-bottom-width: 0px;
 }
-.theme-brandCrowd .tw-border-b-2 {
-  border-bottom-width: 2px;
-}
 .theme-brandCrowd .tw-border-b-4 {
   border-bottom-width: 4px;
 }

package/public/css/tailwind-brandPage.css

@@ -651,10 +651,6 @@ video {
   margin-top: 1rem;
   margin-bottom: 1rem;
 }
-.theme-brandPage .tw-my-5 {
-  margin-top: 1.25rem;
-  margin-bottom: 1.25rem;
-}
 .theme-brandPage .tw-my-auto {
   margin-top: auto;
   margin-bottom: auto;
@@ -1194,9 +1190,6 @@ video {
 .theme-brandPage .tw-border-b-0 {
   border-bottom-width: 0px;
 }
-.theme-brandPage .tw-border-b-2 {
-  border-bottom-width: 2px;
-}
 .theme-brandPage .tw-border-b-4 {
   border-bottom-width: 4px;
 }

package/public/css/tailwind-crazyDomains.css

@@ -651,10 +651,6 @@ video {
   margin-top: 1rem;
   margin-bottom: 1rem;
 }
-.theme-crazyDomains .tw-my-5 {
-  margin-top: 1.25rem;
-  margin-bottom: 1.25rem;
-}
 .theme-crazyDomains .tw-my-auto {
   margin-top: auto;
   margin-bottom: auto;
@@ -1194,9 +1190,6 @@ video {
 .theme-crazyDomains .tw-border-b-0 {
   border-bottom-width: 0px;
 }
-.theme-crazyDomains .tw-border-b-2 {
-  border-bottom-width: 2px;
-}
 .theme-crazyDomains .tw-border-b-4 {
   border-bottom-width: 4px;
 }

package/public/css/tailwind-designCom.css

@@ -651,10 +651,6 @@ video {
   margin-top: 1rem;
   margin-bottom: 1rem;
 }
-.theme-designCom .tw-my-5 {
-  margin-top: 1.25rem;
-  margin-bottom: 1.25rem;
-}
 .theme-designCom .tw-my-auto {
   margin-top: auto;
   margin-bottom: auto;
@@ -1194,9 +1190,6 @@ video {
 .theme-designCom .tw-border-b-0 {
   border-bottom-width: 0px;
 }
-.theme-designCom .tw-border-b-2 {
-  border-bottom-width: 2px;
-}
 .theme-designCom .tw-border-b-4 {
   border-bottom-width: 4px;
 }

package/public/css/tailwind-designCrowd.css

@@ -651,10 +651,6 @@ video {
   margin-top: 1rem;
   margin-bottom: 1rem;
 }
-.theme-designCrowd .tw-my-5 {
-  margin-top: 1.25rem;
-  margin-bottom: 1.25rem;
-}
 .theme-designCrowd .tw-my-auto {
   margin-top: auto;
   margin-bottom: auto;
@@ -1194,9 +1190,6 @@ video {
 .theme-designCrowd .tw-border-b-0 {
   border-bottom-width: 0px;
 }
-.theme-designCrowd .tw-border-b-2 {
-  border-bottom-width: 2px;
-}
 .theme-designCrowd .tw-border-b-4 {
   border-bottom-width: 4px;
 }

package/src/experiences/components/PaymentConfigList/PaymentConfigDropdown.vue

@@ -12,15 +12,12 @@
     ></Button>
     <Dropdown v-if="!isLoading && !isAddPaymentProviderButtonVisible" ref="dropdown">
       <template #title>
-        <div
-          v-if="selectedPaymentConfig"
-          class="tw-flex tw-items-center tw-px-2 tw-py-2 drop-down-item tw-cursor-pointer"
-        >
-          <span class="tw-text-sm tw-grow tw-select-none tw-flex tw-flex-col">
-            <span>{{ selectedPaymentConfig.name }}</span>
-            <small class="stripe-acct">({{ selectedPaymentConfig.paymentProviderExternalId }})</small>
-          </span>
-          <Pill class="tw-text-white" :class="getPaymentConfigStatusDisplayClasses(selectedPaymentConfig.status)">
+        <div v-if="selectedPaymentConfig" class="tw-flex">
+          <span class="tw-text-sm tw-grow tw-select-none">{{ selectedPaymentConfig.name }}</span>
+          <Pill
+            class="tw-text-white tw-mr-2"
+            :class="getPaymentConfigStatusDisplayClasses(selectedPaymentConfig.status)"
+          >
             {{ getPaymentConfigStatusDisplayText(selectedPaymentConfig.status) }}
           </Pill>
         </div>
@@ -31,10 +28,7 @@
         :key="`payment-config-${paymentConfig.id}`"
         @click="onPaymentConfigClick(paymentConfig)"
       >
-        <span class="tw-text-sm tw-grow tw-select-none tw-flex tw-flex-col">
-          <span>{{ paymentConfig.name }}</span>
-          <small class="stripe-acct">({{ paymentConfig.paymentProviderExternalId }})</small>
-        </span>
+        <span class="tw-text-sm tw-grow tw-select-none">{{ paymentConfig.name }}</span>
         <Pill class="tw-text-white" :class="getPaymentConfigStatusDisplayClasses(paymentConfig.status)">
           {{ getPaymentConfigStatusDisplayText(paymentConfig.status) }}
         </Pill>
@@ -125,10 +119,3 @@ export default {
   },
 };
 </script>
-
-<style>
-.stripe-acct {
-  font-size: 0.7rem;
-  opacity: 0.5;
-}
-</style>

package/src/experiences/components/PaymentConfigList/PaymentConfigList.stories.js

@@ -14,7 +14,7 @@ const PAYMENT_CONFIGS_RESPONSE = [
   {
     id: '32e1c01c-6276-4edb-821d-16f9d8a5e16b',
     name: 'Stripe AUD',
-    paymentProviderExternalId: 'acct_123456789abcdefg', // Intentionally undefined
+    paymentProviderExternalId: undefined, // Intentionally undefined
     paymentProviderImageUrl:
       'https://staging.bcassetcdn.com/assets/brand-page/payment-providers/stripe_wordmark_purple.svg',
     paymentProviderName: 'Stripe',

package/src/experiences/components/PaymentConfigList/PaymentConfigList.vue

@@ -17,7 +17,6 @@
           <img class="tw-h-6" :src="paymentConfig.paymentProviderImageUrl" alt="Payment provider's logo" />
           {{ paymentConfig.paymentProviderName }}
           {{ paymentConfig.defaultCurrency }}
-          <small>({{ paymentConfig.paymentProviderExternalId }})</small>
           <p
             class="tw-ml-auto tw-text-xs tw-rounded-full tw-py-0.5 tw-my-0 tw-text-white tw-px-4 tw-outline-none tw-uppercase"
             :class="getPaymentConfigStatusDisplayClasses(paymentConfig.status)"