@designcrowd/fe-shared-lib 1.0.13 → 1.0.14

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@designcrowd/fe-shared-lib",
-  "version": "1.0.13",
+  "version": "1.0.14",
   "scripts": {
     "start": "npm run storybook",
     "build": "npm run build:css --production",

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

@@ -51,7 +51,7 @@ export const SampleSearchbar = () => {
     template: `
       <div>
         <UploadYourLogoDropzone
-          :small-layout="true" :use-landscape-tile="true" :should-show-description-on-mobile-only="true" />
+          :should-use-compact-layout="true" />
       </div>
     `,
   };

package/src/experiences/components/UploadYourLogoDropzone/UploadYourLogoDropzone.vue

@@ -2,11 +2,13 @@
   <dropzone
     :id="`upload-your-logo-dropzone-${_uid}`"
     ref="dropzone"
-    class="c-upload-your-logo tw-group tw-transition-colors tw-duration-200 tw-flex tw-items-center tw-justify-center tw-flex-col tw-py-8 tw-cursor-pointer"
+    class="c-upload-your-logo tw-group tw-transition-colors tw-duration-200 tw-flex tw-justify-center tw-flex-col tw-cursor-pointer"
     :class="{
+      'tw-items-center tw-py-8': !shouldUseCompactLayout,
       'tw-w-full tw-bg-grayscale-400 tw-flex tw-items-center tw-justify-center tw-flex-col tw-cursor-pointer': isModal,
       'hover:tw-bg-grayscale-200 tw-bg-white tw-border tw-border-dashed tw-border-secondary-300 tw-rounded': !isModal,
       'md:tw-py-2 md:tw-pr-2 md:tw-items-start': useLandscapeTile,
+      'tw-py-2 tw-pr-2 tw-items-start': shouldUseCompactLayout,
     }"
     :options="options"
     :include-styling="false"
@@ -15,19 +17,23 @@
     @vdropzone-success="onUploadSuccess"
   >
     <div
-      class="tw-text-center tw-px-2"
+      class="tw-px-2"
       :class="{
+        'tw-text-center': !shouldUseCompactLayout,
         'md:tw-flex md:tw-flex-row md:tw-items-center md:tw-text-left md:tw-text-xs md:tw-px-4': useLandscapeTile,
         'md:tw-px-8': smallLayout && !useLandscapeTile,
+        'tw-flex tw-flex-row tw-items-center tw-text-left tw-text-xs tw-px-4': shouldUseCompactLayout,
       }"
     >
       <div
-        class="group-hover:tw-text-info-500 tw-flex tw-items-center tw-justify-center tw-w-full tw-mx-auto tw-mb-2"
+        class="group-hover:tw-text-info-500 tw-flex tw-items-center tw-justify-center tw-mx-auto"
         :class="{
+          'tw-w-full tw-mb-2': !shouldUseCompactLayout,
           'tw-text-secondary-500': !isDesignCom,
           'tw-text-secondary-400': isDesignCom,
           'md:tw-mb-0': useLandscapeTile,
           'md:tw-w-10 md:tw-h-10': smallLayout,
+          'tw-w-8 tw-h-8': shouldUseCompactLayout,
         }"
       >
         <svg
@@ -44,12 +50,13 @@
       <div
         :class="{
           'md:tw-flex md:tw-flex-col md:tw-ml-2': useLandscapeTile,
+          'tw-flex tw-flex-col tw-ml-4 md:tw-ml-2': shouldUseCompactLayout,
         }"
       >
         <p
           v-if="!isModal"
-          class="tw-font-bold tw-text-black tw-text-lg tw-mb-2"
-          :class="{ 'md:tw-text-sm md:tw-mb-0': smallLayout }"
+          class="tw-font-bold tw-text-black tw-text-lg"
+          :class="{ 'tw-mb-2': !shouldUseCompactLayout, 'md:tw-text-sm md:tw-mb-0': smallLayout, 'tw-text-sm tw-mb-0': shouldUseCompactLayout }"
         >
           Upload your logo
         </p>
@@ -59,7 +66,7 @@
           :class="{
             'tw-mb-0': !isDesignCom,
             'tw-mb-3': isDesignCom,
-            'md:tw-hidden': shouldShowDescriptionOnMobileOnly
+            'md:tw-hidden': shouldUseCompactLayout
           }"
         >
           Drop your file here or
@@ -67,7 +74,7 @@
         </p>
 
         <p
-          v-if="!smallLayout"
+          v-if="!smallLayout && !shouldUseCompactLayout"
           class="tw-text-sm"
           :class="{
             'tw-text-secondary-600': !isDesignCom,
@@ -126,7 +133,7 @@ export default {
       required: false,
       default: false,
     },
-    shouldShowDescriptionOnMobileOnly: {
+    shouldUseCompactLayout: {
       type: Boolean,
       default: false,
     },