@designcrowd/fe-shared-lib 1.0.12 → 1.0.13-ast-modal

package/package.json

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

package/public/css/tailwind-brandCrowd.css

@@ -679,9 +679,6 @@ video {
 .theme-brandCrowd .tw-mb-1 {
   margin-bottom: 0.25rem;
 }
-.theme-brandCrowd .tw-mb-10 {
-  margin-bottom: 2.5rem;
-}
 .theme-brandCrowd .tw-mb-2 {
   margin-bottom: 0.5rem;
 }
@@ -838,9 +835,6 @@ video {
 .theme-brandCrowd .tw-max-h-screen {
   max-height: 100vh;
 }
-.theme-brandCrowd .tw-w-1\/3 {
-  width: 33.333333%;
-}
 .theme-brandCrowd .tw-w-10 {
   width: 2.5rem;
 }
@@ -1721,9 +1715,6 @@ video {
 .theme-brandCrowd .tw-text-center {
   text-align: center;
 }
-.theme-brandCrowd .tw-align-top {
-  vertical-align: top;
-}
 .theme-brandCrowd .tw-align-middle {
   vertical-align: middle;
 }
@@ -2218,21 +2209,12 @@ video {
 .theme-brandCrowd .md\:tw-w-10 {
     width: 2.5rem;
   }
-.theme-brandCrowd .md\:tw-w-24 {
-    width: 6rem;
-  }
 .theme-brandCrowd .md\:tw-w-auto {
     width: auto;
   }
 .theme-brandCrowd .md\:tw-w-full {
     width: 100%;
   }
-.theme-brandCrowd .md\:tw-max-w-full {
-    max-width: 100%;
-  }
-.theme-brandCrowd .md\:tw-grow {
-    flex-grow: 1;
-  }
 .theme-brandCrowd .md\:tw-grid-cols-2 {
     grid-template-columns: repeat(2, minmax(0, 1fr));
   }
@@ -2254,9 +2236,6 @@ video {
 .theme-brandCrowd .md\:tw-justify-start {
     justify-content: flex-start;
   }
-.theme-brandCrowd .md\:tw-justify-end {
-    justify-content: flex-end;
-  }
 .theme-brandCrowd .md\:tw-justify-center {
     justify-content: center;
   }
@@ -2299,9 +2278,6 @@ video {
     padding-top: 0.5rem;
     padding-bottom: 0.5rem;
   }
-.theme-brandCrowd .md\:tw-pl-4 {
-    padding-left: 1rem;
-  }
 .theme-brandCrowd .md\:tw-pr-2 {
     padding-right: 0.5rem;
   }

package/public/css/tailwind-brandPage.css

@@ -679,9 +679,6 @@ video {
 .theme-brandPage .tw-mb-1 {
   margin-bottom: 0.25rem;
 }
-.theme-brandPage .tw-mb-10 {
-  margin-bottom: 2.5rem;
-}
 .theme-brandPage .tw-mb-2 {
   margin-bottom: 0.5rem;
 }
@@ -838,9 +835,6 @@ video {
 .theme-brandPage .tw-max-h-screen {
   max-height: 100vh;
 }
-.theme-brandPage .tw-w-1\/3 {
-  width: 33.333333%;
-}
 .theme-brandPage .tw-w-10 {
   width: 2.5rem;
 }
@@ -1569,9 +1563,6 @@ video {
 .theme-brandPage .tw-text-center {
   text-align: center;
 }
-.theme-brandPage .tw-align-top {
-  vertical-align: top;
-}
 .theme-brandPage .tw-align-middle {
   vertical-align: middle;
 }
@@ -1906,21 +1897,12 @@ video {
 .theme-brandPage .md\:tw-w-10 {
     width: 2.5rem;
   }
-.theme-brandPage .md\:tw-w-24 {
-    width: 6rem;
-  }
 .theme-brandPage .md\:tw-w-auto {
     width: auto;
   }
 .theme-brandPage .md\:tw-w-full {
     width: 100%;
   }
-.theme-brandPage .md\:tw-max-w-full {
-    max-width: 100%;
-  }
-.theme-brandPage .md\:tw-grow {
-    flex-grow: 1;
-  }
 .theme-brandPage .md\:tw-grid-cols-2 {
     grid-template-columns: repeat(2, minmax(0, 1fr));
   }
@@ -1942,9 +1924,6 @@ video {
 .theme-brandPage .md\:tw-justify-start {
     justify-content: flex-start;
   }
-.theme-brandPage .md\:tw-justify-end {
-    justify-content: flex-end;
-  }
 .theme-brandPage .md\:tw-justify-center {
     justify-content: center;
   }
@@ -1987,9 +1966,6 @@ video {
     padding-top: 0.5rem;
     padding-bottom: 0.5rem;
   }
-.theme-brandPage .md\:tw-pl-4 {
-    padding-left: 1rem;
-  }
 .theme-brandPage .md\:tw-pr-2 {
     padding-right: 0.5rem;
   }

package/public/css/tailwind-crazyDomains.css

@@ -679,9 +679,6 @@ video {
 .theme-crazyDomains .tw-mb-1 {
   margin-bottom: 0.25rem;
 }
-.theme-crazyDomains .tw-mb-10 {
-  margin-bottom: 2.5rem;
-}
 .theme-crazyDomains .tw-mb-2 {
   margin-bottom: 0.5rem;
 }
@@ -838,9 +835,6 @@ video {
 .theme-crazyDomains .tw-max-h-screen {
   max-height: 100vh;
 }
-.theme-crazyDomains .tw-w-1\/3 {
-  width: 33.333333%;
-}
 .theme-crazyDomains .tw-w-10 {
   width: 2.5rem;
 }
@@ -1721,9 +1715,6 @@ video {
 .theme-crazyDomains .tw-text-center {
   text-align: center;
 }
-.theme-crazyDomains .tw-align-top {
-  vertical-align: top;
-}
 .theme-crazyDomains .tw-align-middle {
   vertical-align: middle;
 }
@@ -2218,21 +2209,12 @@ video {
 .theme-crazyDomains .md\:tw-w-10 {
     width: 2.5rem;
   }
-.theme-crazyDomains .md\:tw-w-24 {
-    width: 6rem;
-  }
 .theme-crazyDomains .md\:tw-w-auto {
     width: auto;
   }
 .theme-crazyDomains .md\:tw-w-full {
     width: 100%;
   }
-.theme-crazyDomains .md\:tw-max-w-full {
-    max-width: 100%;
-  }
-.theme-crazyDomains .md\:tw-grow {
-    flex-grow: 1;
-  }
 .theme-crazyDomains .md\:tw-grid-cols-2 {
     grid-template-columns: repeat(2, minmax(0, 1fr));
   }
@@ -2254,9 +2236,6 @@ video {
 .theme-crazyDomains .md\:tw-justify-start {
     justify-content: flex-start;
   }
-.theme-crazyDomains .md\:tw-justify-end {
-    justify-content: flex-end;
-  }
 .theme-crazyDomains .md\:tw-justify-center {
     justify-content: center;
   }
@@ -2299,9 +2278,6 @@ video {
     padding-top: 0.5rem;
     padding-bottom: 0.5rem;
   }
-.theme-crazyDomains .md\:tw-pl-4 {
-    padding-left: 1rem;
-  }
 .theme-crazyDomains .md\:tw-pr-2 {
     padding-right: 0.5rem;
   }

package/public/css/tailwind-designCom.css

@@ -679,9 +679,6 @@ video {
 .theme-designCom .tw-mb-1 {
   margin-bottom: 0.25rem;
 }
-.theme-designCom .tw-mb-10 {
-  margin-bottom: 2.5rem;
-}
 .theme-designCom .tw-mb-2 {
   margin-bottom: 0.5rem;
 }
@@ -838,9 +835,6 @@ video {
 .theme-designCom .tw-max-h-screen {
   max-height: 100vh;
 }
-.theme-designCom .tw-w-1\/3 {
-  width: 33.333333%;
-}
 .theme-designCom .tw-w-10 {
   width: 2.5rem;
 }
@@ -1721,9 +1715,6 @@ video {
 .theme-designCom .tw-text-center {
   text-align: center;
 }
-.theme-designCom .tw-align-top {
-  vertical-align: top;
-}
 .theme-designCom .tw-align-middle {
   vertical-align: middle;
 }
@@ -2218,21 +2209,12 @@ video {
 .theme-designCom .md\:tw-w-10 {
     width: 2.5rem;
   }
-.theme-designCom .md\:tw-w-24 {
-    width: 6rem;
-  }
 .theme-designCom .md\:tw-w-auto {
     width: auto;
   }
 .theme-designCom .md\:tw-w-full {
     width: 100%;
   }
-.theme-designCom .md\:tw-max-w-full {
-    max-width: 100%;
-  }
-.theme-designCom .md\:tw-grow {
-    flex-grow: 1;
-  }
 .theme-designCom .md\:tw-grid-cols-2 {
     grid-template-columns: repeat(2, minmax(0, 1fr));
   }
@@ -2254,9 +2236,6 @@ video {
 .theme-designCom .md\:tw-justify-start {
     justify-content: flex-start;
   }
-.theme-designCom .md\:tw-justify-end {
-    justify-content: flex-end;
-  }
 .theme-designCom .md\:tw-justify-center {
     justify-content: center;
   }
@@ -2299,9 +2278,6 @@ video {
     padding-top: 0.5rem;
     padding-bottom: 0.5rem;
   }
-.theme-designCom .md\:tw-pl-4 {
-    padding-left: 1rem;
-  }
 .theme-designCom .md\:tw-pr-2 {
     padding-right: 0.5rem;
   }

package/public/css/tailwind-designCrowd.css

@@ -679,9 +679,6 @@ video {
 .theme-designCrowd .tw-mb-1 {
   margin-bottom: 0.25rem;
 }
-.theme-designCrowd .tw-mb-10 {
-  margin-bottom: 2.5rem;
-}
 .theme-designCrowd .tw-mb-2 {
   margin-bottom: 0.5rem;
 }
@@ -838,9 +835,6 @@ video {
 .theme-designCrowd .tw-max-h-screen {
   max-height: 100vh;
 }
-.theme-designCrowd .tw-w-1\/3 {
-  width: 33.333333%;
-}
 .theme-designCrowd .tw-w-10 {
   width: 2.5rem;
 }
@@ -1721,9 +1715,6 @@ video {
 .theme-designCrowd .tw-text-center {
   text-align: center;
 }
-.theme-designCrowd .tw-align-top {
-  vertical-align: top;
-}
 .theme-designCrowd .tw-align-middle {
   vertical-align: middle;
 }
@@ -2218,21 +2209,12 @@ video {
 .theme-designCrowd .md\:tw-w-10 {
     width: 2.5rem;
   }
-.theme-designCrowd .md\:tw-w-24 {
-    width: 6rem;
-  }
 .theme-designCrowd .md\:tw-w-auto {
     width: auto;
   }
 .theme-designCrowd .md\:tw-w-full {
     width: 100%;
   }
-.theme-designCrowd .md\:tw-max-w-full {
-    max-width: 100%;
-  }
-.theme-designCrowd .md\:tw-grow {
-    flex-grow: 1;
-  }
 .theme-designCrowd .md\:tw-grid-cols-2 {
     grid-template-columns: repeat(2, minmax(0, 1fr));
   }
@@ -2254,9 +2236,6 @@ video {
 .theme-designCrowd .md\:tw-justify-start {
     justify-content: flex-start;
   }
-.theme-designCrowd .md\:tw-justify-end {
-    justify-content: flex-end;
-  }
 .theme-designCrowd .md\:tw-justify-center {
     justify-content: center;
   }
@@ -2299,9 +2278,6 @@ video {
     padding-top: 0.5rem;
     padding-bottom: 0.5rem;
   }
-.theme-designCrowd .md\:tw-pl-4 {
-    padding-left: 1rem;
-  }
 .theme-designCrowd .md\:tw-pr-2 {
     padding-right: 0.5rem;
   }

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
+          :small-layout="true" :use-landscape-tile="true" :should-show-description-on-mobile-only="true" />
+      </div>
+    `,
+  };
+};

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

@@ -59,6 +59,7 @@
           :class="{
             'tw-mb-0': !isDesignCom,
             'tw-mb-3': isDesignCom,
+            'md:tw-hidden': shouldShowDescriptionOnMobileOnly
           }"
         >
           Drop your file here or
@@ -125,6 +126,10 @@ export default {
       required: false,
       default: false,
     },
+    shouldShowDescriptionOnMobileOnly: {
+      type: Boolean,
+      default: false,
+    },
     isDesignCom: {
       type: Boolean,
       required: false,