@designcrowd/fe-shared-lib 1.0.1-2.eng2594 → 1.0.1-6.eng2594

package/package.json

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

package/src/atoms/components/Modal/Modal.vue

@@ -2,10 +2,11 @@
   <div
     v-show="visible"
     :aria-hidden="visible ? 'false' : 'true'"
-    class="tw-bg-black tw-bg-opacity-75 tw-flex tw-items-center tw-justify-center tw-fixed tw-w-full tw-h-full tw-top-0 tw-left-0 tw-z-50"
+    class="tw-bg-black tw-flex tw-items-center tw-justify-center tw-fixed tw-w-full tw-h-full tw-top-0 tw-left-0 tw-z-50"
     :class="{
       'tw-px-4': fullScreenBreakpoint === undefined && !isImageMode,
       'sm:tw-px-4': fullScreenBreakpoint === 'sm' && !isImageMode,
+      'tw-bg-opacity-75': !darkOverlay,
     }"
     @mousedown.self="close"
   >
@@ -23,6 +24,7 @@
           'tw-rounded-md': fullScreenBreakpoint !== 'sm',
           'modal-bg': !simple && !isImageMode && showModalBackgroundImage,
           'modal-image': isImageMode,
+          'tw-bg-transparent': transparentModal,
         },
         classes,
       ]"
@@ -144,6 +146,16 @@ export default {
       required: false,
       default: false,
     },
+    darkOverlay: {
+      type: Boolean,
+      required: false,
+      default: false,
+    },
+    transparentModal: {
+      type: Boolean,
+      required: false,
+      default: false,
+    },
   },
   computed: {
     isImageMode() {

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

@@ -38,3 +38,21 @@ export const SampleExternallyInvoked = () => {
     `,
   };
 };
+
+export const SampleSearchbar = () => {
+  window.addEventListener(Events.BeginUploadLogoExperience, (e) => {
+    console.log('BEGIN_UPLOAD_LOGO_EXPERIENCE', e);
+  });
+
+  return {
+    components: {
+      UploadYourLogoDropzone,
+    },
+    template: `
+      <div>
+        <UploadYourLogoDropzone
+          :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-4 md: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,6 +66,7 @@
           :class="{
             'tw-mb-0': !isDesignCom,
             'tw-mb-3': isDesignCom,
+            'md:tw-hidden': shouldUseCompactLayout
           }"
         >
           Drop your file here or
@@ -66,7 +74,7 @@
         </p>
 
         <p
-          v-if="!smallLayout"
+          v-if="!smallLayout && !shouldUseCompactLayout"
           class="tw-text-sm"
           :class="{
             'tw-text-secondary-600': !isDesignCom,
@@ -125,6 +133,10 @@ export default {
       required: false,
       default: false,
     },
+    shouldUseCompactLayout: {
+      type: Boolean,
+      default: false,
+    },
     isDesignCom: {
       type: Boolean,
       required: false,