@designcrowd/fe-shared-lib 1.4.8-promocardv0 → 1.4.8-promocardv1

package/.storybook/main.ts

@@ -2,6 +2,7 @@ import { mergeConfig } from 'vite';
 
 module.exports = {
   stories: ['../src/**/components/**/*.stories.@(js|jsx|ts|tsx)'],
+
   addons: [
     '@storybook/addon-a11y',
     '@storybook/addon-links',
@@ -12,14 +13,14 @@ module.exports = {
       },
     },
   ],
+
   framework: {
     name: '@storybook/vue3-vite',
     options: {},
   },
+
   staticDirs: ['../public'],
-  docs: {
-    autodocs: true,
-  },
+
   async viteFinal(config, options) {
     const configExtension = {
       optimizeDeps: {
@@ -32,5 +33,5 @@ module.exports = {
       },
     };
     return mergeConfig(config, configExtension);
-  },
+  }
 };

package/.storybook/preview.js

@@ -51,3 +51,4 @@ export const decorators = [
 ];
 
 export const loaders = [globalLocaleLoader];
+export const tags = ['autodocs'];

package/package.json

@@ -1,10 +1,10 @@
 {
   "name": "@designcrowd/fe-shared-lib",
-  "version": "1.4.8-promocardv0",
+  "version": "1.4.8-promocardv1",
   "scripts": {
     "start": "run-p storybook watch:translation",
     "build": "npm run build:css --production",
-    "storybook": "export NODE_ENV=development && npm run storybook:css && npm run storybook:themes && storybook dev -p 6006 public",
+    "storybook": "export NODE_ENV=development && npm run storybook:css && npm run storybook:themes && storybook dev",
     "build:css": "node ./tailwind.build.js",
     "build:storybook": "mkdir -p public && mkdir -p public/css && npm run storybook:css && storybook build -c .storybook -o .storybook-static && cp -R ./public/css .storybook-static/",
     "bundle-translation": "node ./src/bundleTranslation.js",
@@ -20,7 +20,7 @@
   },
   "dependencies": {
     "@nuxtjs/i18n": "9.5.4",
-    "@storybook/react": "^9.0.4",
+    "@storybook/react": "^10.0.1",
     "autoprefixer": "10.4.17",
     "axios": "1.6.7",
     "click-outside-vue3": "4.0.1",
@@ -44,11 +44,10 @@
     "yargs": "17.7.2"
   },
   "devDependencies": {
-    "@storybook/addon-a11y": "9.0.4",
-    "@storybook/addon-links": "9.0.4",
-    "@storybook/addon-themes": "9.0.4",
-    "@storybook/vue3": "9.0.4",
-    "@storybook/vue3-vite": "9.0.4",
+    "@storybook/addon-a11y": "10.0.1",
+    "@storybook/addon-links": "10.0.1",
+    "@storybook/addon-themes": "10.0.1",
+    "@storybook/vue3-vite": "10.0.1",
     "@vitejs/plugin-vue": "5.2.4",
     "@vue/cli-plugin-eslint": "5.0.8",
     "@vue/cli-service": "5.0.8",
@@ -61,7 +60,7 @@
     "cssnano": "6.0.3",
     "eslint": "8.56.0",
     "eslint-plugin-prettier": "5.1.3",
-    "eslint-plugin-storybook": "0.8.0",
+    "eslint-plugin-storybook": "10.0.1",
     "eslint-plugin-vue": "9.21.1",
     "husky": "9.0.10",
     "lint-staged": "15.2.1",
@@ -72,7 +71,7 @@
     "postcss-import": "16.0.0",
     "postcss-nested": "6.0.1",
     "prettier": "3.2.4",
-    "storybook": "9.0.4",
+    "storybook": "10.0.1",
     "stylelint": "16.2.1",
     "stylelint-config-standard": "36.0.0",
     "tailwindcss": "3.4.1",
@@ -113,4 +112,4 @@
   "overrides": {
     "storybook": "$storybook"
   }
-}
+}

package/public/css/tailwind-brandCrowd.css

@@ -684,6 +684,9 @@ video {
 .theme-brandCrowd .tw-mb-0 {
   margin-bottom: 0px;
 }
+.theme-brandCrowd .tw-mb-0\.5 {
+  margin-bottom: 0.125rem;
+}
 .theme-brandCrowd .tw-mb-1 {
   margin-bottom: 0.25rem;
 }
@@ -1668,10 +1671,6 @@ video {
   padding-left: 0.125rem;
   padding-right: 0.125rem;
 }
-.theme-brandCrowd .tw-px-10 {
-  padding-left: 2.5rem;
-  padding-right: 2.5rem;
-}
 .theme-brandCrowd .tw-px-2 {
   padding-left: 0.5rem;
   padding-right: 0.5rem;
@@ -2429,18 +2428,12 @@ video {
 .theme-brandCrowd .lg\:tw-mr-8 {
     margin-right: 2rem;
   }
-.theme-brandCrowd .lg\:tw-mt-0 {
-    margin-top: 0px;
-  }
 .theme-brandCrowd .lg\:tw-flex {
     display: flex;
   }
 .theme-brandCrowd .lg\:tw-h-auto {
     height: auto;
   }
-.theme-brandCrowd .lg\:tw-w-auto {
-    width: auto;
-  }
 .theme-brandCrowd .lg\:tw-max-w-xl {
     max-width: 36rem;
   }

package/public/css/tailwind-brandPage.css

@@ -684,6 +684,9 @@ video {
 .theme-brandPage .tw-mb-0 {
   margin-bottom: 0px;
 }
+.theme-brandPage .tw-mb-0\.5 {
+  margin-bottom: 0.125rem;
+}
 .theme-brandPage .tw-mb-1 {
   margin-bottom: 0.25rem;
 }
@@ -1516,10 +1519,6 @@ video {
   padding-left: 0.125rem;
   padding-right: 0.125rem;
 }
-.theme-brandPage .tw-px-10 {
-  padding-left: 2.5rem;
-  padding-right: 2.5rem;
-}
 .theme-brandPage .tw-px-2 {
   padding-left: 0.5rem;
   padding-right: 0.5rem;
@@ -2113,18 +2112,12 @@ video {
 .theme-brandPage .lg\:tw-mr-8 {
     margin-right: 2rem;
   }
-.theme-brandPage .lg\:tw-mt-0 {
-    margin-top: 0px;
-  }
 .theme-brandPage .lg\:tw-flex {
     display: flex;
   }
 .theme-brandPage .lg\:tw-h-auto {
     height: auto;
   }
-.theme-brandPage .lg\:tw-w-auto {
-    width: auto;
-  }
 .theme-brandPage .lg\:tw-max-w-xl {
     max-width: 36rem;
   }

package/public/css/tailwind-crazyDomains.css

@@ -684,6 +684,9 @@ video {
 .theme-crazyDomains .tw-mb-0 {
   margin-bottom: 0px;
 }
+.theme-crazyDomains .tw-mb-0\.5 {
+  margin-bottom: 0.125rem;
+}
 .theme-crazyDomains .tw-mb-1 {
   margin-bottom: 0.25rem;
 }
@@ -1668,10 +1671,6 @@ video {
   padding-left: 0.125rem;
   padding-right: 0.125rem;
 }
-.theme-crazyDomains .tw-px-10 {
-  padding-left: 2.5rem;
-  padding-right: 2.5rem;
-}
 .theme-crazyDomains .tw-px-2 {
   padding-left: 0.5rem;
   padding-right: 0.5rem;
@@ -2429,18 +2428,12 @@ video {
 .theme-crazyDomains .lg\:tw-mr-8 {
     margin-right: 2rem;
   }
-.theme-crazyDomains .lg\:tw-mt-0 {
-    margin-top: 0px;
-  }
 .theme-crazyDomains .lg\:tw-flex {
     display: flex;
   }
 .theme-crazyDomains .lg\:tw-h-auto {
     height: auto;
   }
-.theme-crazyDomains .lg\:tw-w-auto {
-    width: auto;
-  }
 .theme-crazyDomains .lg\:tw-max-w-xl {
     max-width: 36rem;
   }

package/public/css/tailwind-designCom.css

@@ -684,6 +684,9 @@ video {
 .theme-designCom .tw-mb-0 {
   margin-bottom: 0px;
 }
+.theme-designCom .tw-mb-0\.5 {
+  margin-bottom: 0.125rem;
+}
 .theme-designCom .tw-mb-1 {
   margin-bottom: 0.25rem;
 }
@@ -1668,10 +1671,6 @@ video {
   padding-left: 0.125rem;
   padding-right: 0.125rem;
 }
-.theme-designCom .tw-px-10 {
-  padding-left: 2.5rem;
-  padding-right: 2.5rem;
-}
 .theme-designCom .tw-px-2 {
   padding-left: 0.5rem;
   padding-right: 0.5rem;
@@ -2429,18 +2428,12 @@ video {
 .theme-designCom .lg\:tw-mr-8 {
     margin-right: 2rem;
   }
-.theme-designCom .lg\:tw-mt-0 {
-    margin-top: 0px;
-  }
 .theme-designCom .lg\:tw-flex {
     display: flex;
   }
 .theme-designCom .lg\:tw-h-auto {
     height: auto;
   }
-.theme-designCom .lg\:tw-w-auto {
-    width: auto;
-  }
 .theme-designCom .lg\:tw-max-w-xl {
     max-width: 36rem;
   }

package/public/css/tailwind-designCrowd.css

@@ -684,6 +684,9 @@ video {
 .theme-designCrowd .tw-mb-0 {
   margin-bottom: 0px;
 }
+.theme-designCrowd .tw-mb-0\.5 {
+  margin-bottom: 0.125rem;
+}
 .theme-designCrowd .tw-mb-1 {
   margin-bottom: 0.25rem;
 }
@@ -1668,10 +1671,6 @@ video {
   padding-left: 0.125rem;
   padding-right: 0.125rem;
 }
-.theme-designCrowd .tw-px-10 {
-  padding-left: 2.5rem;
-  padding-right: 2.5rem;
-}
 .theme-designCrowd .tw-px-2 {
   padding-left: 0.5rem;
   padding-right: 0.5rem;
@@ -2429,18 +2428,12 @@ video {
 .theme-designCrowd .lg\:tw-mr-8 {
     margin-right: 2rem;
   }
-.theme-designCrowd .lg\:tw-mt-0 {
-    margin-top: 0px;
-  }
 .theme-designCrowd .lg\:tw-flex {
     display: flex;
   }
 .theme-designCrowd .lg\:tw-h-auto {
     height: auto;
   }
-.theme-designCrowd .lg\:tw-w-auto {
-    width: auto;
-  }
 .theme-designCrowd .lg\:tw-max-w-xl {
     max-width: 36rem;
   }

package/src/atoms/components/PromoCard/PromoCard.stories.ts

@@ -30,7 +30,7 @@ export const Standard = {
   args: {
     title: 'Special Offer',
     description: 'Get 20% off your next purchase. Limited time offer!',
-    imageUrl: 'https://bcassetcdn.com/assets/images/promo/brandpage-design-support.png',
+    imageUrl: 'https://bcassetcdn.com/assets/images/promo/legalzoom-symbol.svg',
     altText: 'Promotional image',
     buttonLabel: 'Learn More',
     horizontalLayout: false,

package/src/atoms/components/PromoCard/PromoCard.vue

@@ -7,7 +7,7 @@
         'tw-px-4': !shouldShowImageOnTop,
       }"
     >
-      <img :src="imageUrl" :alt="altText" />
+      <img class="tw-w-full" :src="imageUrl" :alt="altText" />
     </div>
     <div
       class="tw-flex tw-bg-white tw-w-full tw-p-4 tw-grow dcom-rounded-tr dcom-rounded-br tw-flex-col tw-justify-between"
@@ -15,7 +15,7 @@
         'lg:tw-flex-row lg:tw-items-center lg:tw-justify-normal': horizontalLayout,
       }"
     >
-      <div class="tw-text-left tw-overflow-hidden tw-text-ellipsis" :class="lineClampStyle">
+      <div class="tw-text-left tw-overflow-hidden tw-text-ellipsis tw-text-base" :class="lineClampStyle">
         <div class="tw-font-bold tw-text-black tw-mb-0.5">
           {{ title }}
         </div>