@designcrowd/fe-shared-lib 1.5.2 → 1.5.3-CarouselUpdatev0

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;
 }
@@ -762,6 +765,48 @@ video {
 .theme-crazyDomains .tw-box-content {
   box-sizing: content-box;
 }
+.theme-crazyDomains .tw-line-clamp-1 {
+  overflow: hidden;
+  display: -webkit-box;
+  -webkit-box-orient: vertical;
+  -webkit-line-clamp: 1;
+}
+.theme-crazyDomains .tw-line-clamp-2 {
+  overflow: hidden;
+  display: -webkit-box;
+  -webkit-box-orient: vertical;
+  -webkit-line-clamp: 2;
+}
+.theme-crazyDomains .tw-line-clamp-3 {
+  overflow: hidden;
+  display: -webkit-box;
+  -webkit-box-orient: vertical;
+  -webkit-line-clamp: 3;
+}
+.theme-crazyDomains .tw-line-clamp-4 {
+  overflow: hidden;
+  display: -webkit-box;
+  -webkit-box-orient: vertical;
+  -webkit-line-clamp: 4;
+}
+.theme-crazyDomains .tw-line-clamp-5 {
+  overflow: hidden;
+  display: -webkit-box;
+  -webkit-box-orient: vertical;
+  -webkit-line-clamp: 5;
+}
+.theme-crazyDomains .tw-line-clamp-6 {
+  overflow: hidden;
+  display: -webkit-box;
+  -webkit-box-orient: vertical;
+  -webkit-line-clamp: 6;
+}
+.theme-crazyDomains .tw-line-clamp-none {
+  overflow: visible;
+  display: block;
+  -webkit-box-orient: horizontal;
+  -webkit-line-clamp: none;
+}
 .theme-crazyDomains .tw-block {
   display: block;
 }
@@ -1144,6 +1189,9 @@ video {
   text-overflow: ellipsis;
   white-space: nowrap;
 }
+.theme-crazyDomains .tw-text-ellipsis {
+  text-overflow: ellipsis;
+}
 .theme-crazyDomains .tw-whitespace-nowrap {
   white-space: nowrap;
 }
@@ -1744,9 +1792,6 @@ video {
 .theme-crazyDomains .tw-pt-2 {
   padding-top: 0.5rem;
 }
-.theme-crazyDomains .tw-pt-4 {
-  padding-top: 1rem;
-}
 .theme-crazyDomains .tw-pt-6 {
   padding-top: 1.5rem;
 }
@@ -2174,6 +2219,9 @@ video {
 .theme-crazyDomains .sm\:tw-mb-4 {
     margin-bottom: 1rem;
   }
+.theme-crazyDomains .sm\:tw-ml-2 {
+    margin-left: 0.5rem;
+  }
 .theme-crazyDomains .sm\:tw-ml-4 {
     margin-left: 1rem;
   }
@@ -2210,6 +2258,9 @@ video {
 .theme-crazyDomains .sm\:tw-flex-row {
     flex-direction: row;
   }
+.theme-crazyDomains .sm\:tw-items-center {
+    align-items: center;
+  }
 .theme-crazyDomains .sm\:tw-rounded-md {
     border-radius: 0.375rem;
   }
@@ -2336,6 +2387,10 @@ video {
 .theme-crazyDomains .md\:tw-p-8 {
     padding: 2rem;
   }
+.theme-crazyDomains .md\:tw-px-12 {
+    padding-left: 3rem;
+    padding-right: 3rem;
+  }
 .theme-crazyDomains .md\:tw-px-4 {
     padding-left: 1rem;
     padding-right: 1rem;

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;
 }
@@ -762,6 +765,48 @@ video {
 .theme-designCom .tw-box-content {
   box-sizing: content-box;
 }
+.theme-designCom .tw-line-clamp-1 {
+  overflow: hidden;
+  display: -webkit-box;
+  -webkit-box-orient: vertical;
+  -webkit-line-clamp: 1;
+}
+.theme-designCom .tw-line-clamp-2 {
+  overflow: hidden;
+  display: -webkit-box;
+  -webkit-box-orient: vertical;
+  -webkit-line-clamp: 2;
+}
+.theme-designCom .tw-line-clamp-3 {
+  overflow: hidden;
+  display: -webkit-box;
+  -webkit-box-orient: vertical;
+  -webkit-line-clamp: 3;
+}
+.theme-designCom .tw-line-clamp-4 {
+  overflow: hidden;
+  display: -webkit-box;
+  -webkit-box-orient: vertical;
+  -webkit-line-clamp: 4;
+}
+.theme-designCom .tw-line-clamp-5 {
+  overflow: hidden;
+  display: -webkit-box;
+  -webkit-box-orient: vertical;
+  -webkit-line-clamp: 5;
+}
+.theme-designCom .tw-line-clamp-6 {
+  overflow: hidden;
+  display: -webkit-box;
+  -webkit-box-orient: vertical;
+  -webkit-line-clamp: 6;
+}
+.theme-designCom .tw-line-clamp-none {
+  overflow: visible;
+  display: block;
+  -webkit-box-orient: horizontal;
+  -webkit-line-clamp: none;
+}
 .theme-designCom .tw-block {
   display: block;
 }
@@ -1144,6 +1189,9 @@ video {
   text-overflow: ellipsis;
   white-space: nowrap;
 }
+.theme-designCom .tw-text-ellipsis {
+  text-overflow: ellipsis;
+}
 .theme-designCom .tw-whitespace-nowrap {
   white-space: nowrap;
 }
@@ -1744,9 +1792,6 @@ video {
 .theme-designCom .tw-pt-2 {
   padding-top: 0.5rem;
 }
-.theme-designCom .tw-pt-4 {
-  padding-top: 1rem;
-}
 .theme-designCom .tw-pt-6 {
   padding-top: 1.5rem;
 }
@@ -2174,6 +2219,9 @@ video {
 .theme-designCom .sm\:tw-mb-4 {
     margin-bottom: 1rem;
   }
+.theme-designCom .sm\:tw-ml-2 {
+    margin-left: 0.5rem;
+  }
 .theme-designCom .sm\:tw-ml-4 {
     margin-left: 1rem;
   }
@@ -2210,6 +2258,9 @@ video {
 .theme-designCom .sm\:tw-flex-row {
     flex-direction: row;
   }
+.theme-designCom .sm\:tw-items-center {
+    align-items: center;
+  }
 .theme-designCom .sm\:tw-rounded-md {
     border-radius: 0.375rem;
   }
@@ -2336,6 +2387,10 @@ video {
 .theme-designCom .md\:tw-p-8 {
     padding: 2rem;
   }
+.theme-designCom .md\:tw-px-12 {
+    padding-left: 3rem;
+    padding-right: 3rem;
+  }
 .theme-designCom .md\:tw-px-4 {
     padding-left: 1rem;
     padding-right: 1rem;

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;
 }
@@ -762,6 +765,48 @@ video {
 .theme-designCrowd .tw-box-content {
   box-sizing: content-box;
 }
+.theme-designCrowd .tw-line-clamp-1 {
+  overflow: hidden;
+  display: -webkit-box;
+  -webkit-box-orient: vertical;
+  -webkit-line-clamp: 1;
+}
+.theme-designCrowd .tw-line-clamp-2 {
+  overflow: hidden;
+  display: -webkit-box;
+  -webkit-box-orient: vertical;
+  -webkit-line-clamp: 2;
+}
+.theme-designCrowd .tw-line-clamp-3 {
+  overflow: hidden;
+  display: -webkit-box;
+  -webkit-box-orient: vertical;
+  -webkit-line-clamp: 3;
+}
+.theme-designCrowd .tw-line-clamp-4 {
+  overflow: hidden;
+  display: -webkit-box;
+  -webkit-box-orient: vertical;
+  -webkit-line-clamp: 4;
+}
+.theme-designCrowd .tw-line-clamp-5 {
+  overflow: hidden;
+  display: -webkit-box;
+  -webkit-box-orient: vertical;
+  -webkit-line-clamp: 5;
+}
+.theme-designCrowd .tw-line-clamp-6 {
+  overflow: hidden;
+  display: -webkit-box;
+  -webkit-box-orient: vertical;
+  -webkit-line-clamp: 6;
+}
+.theme-designCrowd .tw-line-clamp-none {
+  overflow: visible;
+  display: block;
+  -webkit-box-orient: horizontal;
+  -webkit-line-clamp: none;
+}
 .theme-designCrowd .tw-block {
   display: block;
 }
@@ -1144,6 +1189,9 @@ video {
   text-overflow: ellipsis;
   white-space: nowrap;
 }
+.theme-designCrowd .tw-text-ellipsis {
+  text-overflow: ellipsis;
+}
 .theme-designCrowd .tw-whitespace-nowrap {
   white-space: nowrap;
 }
@@ -1744,9 +1792,6 @@ video {
 .theme-designCrowd .tw-pt-2 {
   padding-top: 0.5rem;
 }
-.theme-designCrowd .tw-pt-4 {
-  padding-top: 1rem;
-}
 .theme-designCrowd .tw-pt-6 {
   padding-top: 1.5rem;
 }
@@ -2174,6 +2219,9 @@ video {
 .theme-designCrowd .sm\:tw-mb-4 {
     margin-bottom: 1rem;
   }
+.theme-designCrowd .sm\:tw-ml-2 {
+    margin-left: 0.5rem;
+  }
 .theme-designCrowd .sm\:tw-ml-4 {
     margin-left: 1rem;
   }
@@ -2210,6 +2258,9 @@ video {
 .theme-designCrowd .sm\:tw-flex-row {
     flex-direction: row;
   }
+.theme-designCrowd .sm\:tw-items-center {
+    align-items: center;
+  }
 .theme-designCrowd .sm\:tw-rounded-md {
     border-radius: 0.375rem;
   }
@@ -2336,6 +2387,10 @@ video {
 .theme-designCrowd .md\:tw-p-8 {
     padding: 2rem;
   }
+.theme-designCrowd .md\:tw-px-12 {
+    padding-left: 3rem;
+    padding-right: 3rem;
+  }
 .theme-designCrowd .md\:tw-px-4 {
     padding-left: 1rem;
     padding-right: 1rem;

package/src/atoms/components/Carousel/Carousel.fixtures.js

@@ -32,4 +32,22 @@ export const cards = [
     name: 'Facebook cover',
     pluralName: 'Facebook Covers',
   },
+  {
+    editorUrl: '#',
+    imageUrl: 'https://bcassetcdn.com/assets/images/carousel/carousel-logo.png',
+    name: 'Logo design',
+    pluralName: 'Logo Designs',
+  },
+  {
+    editorUrl: '#',
+    imageUrl: 'https://bcassetcdn.com/assets/images/carousel/carousel-business-card.png',
+    name: 'Business card',
+    pluralName: 'Business Cards',
+  },
+  {
+    editorUrl: '#',
+    imageUrl: 'https://bcassetcdn.com/assets/images/carousel/carousel-facebook-cover.png',
+    name: 'Facebook cover',
+    pluralName: 'Facebook Covers',
+  },
 ];

package/src/atoms/components/Carousel/Carousel.vue

@@ -4,7 +4,7 @@
       <slot v-if="showControls" name="arrow-left">
         <div id="btn_carousel_prev" class="carousel__button-nav" :class="navigationPrevClass">
           <div
-            class="tw-hidden sm:tw-block tw-cursor-pointer tw-absolute tw-z-10 tw--left-16 tw-top-1/2 tw-transform tw--translate-y-1/2 tw-h-10 tw-w-10 tw-rounded-full tw-shadow tw-border tw-border-solid tw-border-grayscale-300 tw-bg-white"
+            class="tw-block tw-cursor-pointer tw-absolute tw-z-10 tw-left-0 tw-top-1/2 tw--translate-y-1/2 tw-h-10 tw-w-10 tw-rounded-full tw-shadow tw-border tw-border-solid tw-border-grayscale-300 tw-bg-white"
             :class="{
               'nav-carousel__button-prev-pointer': navCarousel,
             }"
@@ -15,18 +15,6 @@
               size="sm"
             />
           </div>
-          <div
-            class="sm:tw-hidden tw-cursor-pointer tw-mr-2 tw-h-6 tw-w-6 tw-rounded-full tw-shadow tw-border tw-border-solid tw-border-grayscale-300 tw-bg-white"
-            :class="{
-              'nav-carousel__button-prev-pointer': navCarousel,
-            }"
-          >
-            <Icon
-              classes="tw--mb-1 tw-absolute tw-left-0 tw-right-2 tw-m-auto tw-flex tw-justify-center tw-top-1/2 tw-transform tw--translate-y-1/2"
-              name="chevron-left"
-              size="xs"
-            />
-          </div>
         </div>
       </slot>
       <swiper
@@ -57,7 +45,7 @@
       <slot v-if="showControls" name="arrow-right">
         <div id="btn_carousel_next" class="carousel__button-nav" :class="navigationNextClass">
           <div
-            class="tw-hidden sm:tw-block tw-cursor-pointer tw-absolute tw-z-10 tw--right-16 tw-top-1/2 tw-transform tw--translate-y-1/2 tw-h-10 tw-w-10 tw-rounded-full tw-shadow tw-border tw-border-solid tw-border-grayscale-300 tw-bg-white"
+            class="tw-block tw-cursor-pointer tw-absolute tw-z-10 tw-right-0 tw-top-1/2 tw--translate-y-1/2 tw-h-10 tw-w-10 tw-rounded-full tw-shadow tw-border tw-border-solid tw-border-grayscale-300 tw-bg-white"
             :class="{
               'nav-carousel__button-next-pointer': navCarousel,
             }"
@@ -68,18 +56,6 @@
               size="sm"
             />
           </div>
-          <div
-            class="sm:tw-hidden tw-cursor-pointer tw-ml-2 tw-h-6 tw-w-6 tw-rounded-full tw-shadow tw-border tw-border-solid tw-border-grayscale-300 tw-bg-white"
-            :class="{
-              'nav-carousel__button-next-pointer': navCarousel,
-            }"
-          >
-            <Icon
-              classes="tw--mb-1 tw-absolute tw-left-2 tw-right-0 tw-m-auto tw-flex tw-justify-center tw-top-1/2 tw-transform tw--translate-y-1/2"
-              name="chevron-right"
-              size="xs"
-            />
-          </div>
         </div>
       </slot>
     </div>
@@ -99,13 +75,13 @@
 
 <script>
 /* eslint-disable import/no-unresolved */
-import { Swiper, SwiperSlide } from 'swiper/vue';
 import 'swiper/css';
-import 'swiper/css/navigation';
 import 'swiper/css/free-mode';
+import 'swiper/css/navigation';
+import { Swiper, SwiperSlide } from 'swiper/vue';
 /* eslint-enable import/no-unresolved */
 import merge from 'deepmerge';
-import { Navigation, Pagination, Autoplay, Keyboard, FreeMode } from 'swiper/modules';
+import { Autoplay, FreeMode, Keyboard, Navigation, Pagination } from 'swiper/modules';
 import Icon from '../Icon/Icon.vue';
 
 export default {