@designcrowd/fe-shared-lib 1.5.26 → 1.5.27

package/dist/css/tailwind-designCrowd.css

@@ -617,6 +617,9 @@ video {
 .tw-m-3 {
   margin: 0.75rem;
 }
+.tw-m-4 {
+  margin: 1rem;
+}
 .tw-m-5 {
   margin: 1.25rem;
 }
@@ -684,6 +687,9 @@ video {
 .tw-mb-0 {
   margin-bottom: 0px;
 }
+.tw-mb-0\.5 {
+  margin-bottom: 0.125rem;
+}
 .tw-mb-1 {
   margin-bottom: 0.25rem;
 }
@@ -750,6 +756,9 @@ video {
 .tw-mt-4 {
   margin-top: 1rem;
 }
+.tw-mt-6 {
+  margin-top: 1.5rem;
+}
 .tw-mt-8 {
   margin-top: 2rem;
 }
@@ -759,6 +768,48 @@ video {
 .tw-box-content {
   box-sizing: content-box;
 }
+.tw-line-clamp-1 {
+  overflow: hidden;
+  display: -webkit-box;
+  -webkit-box-orient: vertical;
+  -webkit-line-clamp: 1;
+}
+.tw-line-clamp-2 {
+  overflow: hidden;
+  display: -webkit-box;
+  -webkit-box-orient: vertical;
+  -webkit-line-clamp: 2;
+}
+.tw-line-clamp-3 {
+  overflow: hidden;
+  display: -webkit-box;
+  -webkit-box-orient: vertical;
+  -webkit-line-clamp: 3;
+}
+.tw-line-clamp-4 {
+  overflow: hidden;
+  display: -webkit-box;
+  -webkit-box-orient: vertical;
+  -webkit-line-clamp: 4;
+}
+.tw-line-clamp-5 {
+  overflow: hidden;
+  display: -webkit-box;
+  -webkit-box-orient: vertical;
+  -webkit-line-clamp: 5;
+}
+.tw-line-clamp-6 {
+  overflow: hidden;
+  display: -webkit-box;
+  -webkit-box-orient: vertical;
+  -webkit-line-clamp: 6;
+}
+.tw-line-clamp-none {
+  overflow: visible;
+  display: block;
+  -webkit-box-orient: horizontal;
+  -webkit-line-clamp: none;
+}
 .tw-block {
   display: block;
 }
@@ -908,6 +959,9 @@ video {
 .tw-max-w-2xl {
   max-width: 42rem;
 }
+.tw-max-w-3xl {
+  max-width: 48rem;
+}
 .tw-max-w-full {
   max-width: 100%;
 }
@@ -923,6 +977,9 @@ video {
 .tw-flex-none {
   flex: none;
 }
+.tw-flex-shrink-0 {
+  flex-shrink: 0;
+}
 .tw-grow {
   flex-grow: 1;
 }
@@ -1138,6 +1195,9 @@ video {
   text-overflow: ellipsis;
   white-space: nowrap;
 }
+.tw-text-ellipsis {
+  text-overflow: ellipsis;
+}
 .tw-whitespace-nowrap {
   white-space: nowrap;
 }
@@ -1246,10 +1306,6 @@ video {
   --tw-border-opacity: 1;
   border-color: rgb(195 50 48 / var(--tw-border-opacity));
 }
-.tw-border-grayscale-100 {
-  --tw-border-opacity: 1;
-  border-color: rgb(255 255 255 / var(--tw-border-opacity));
-}
 .tw-border-grayscale-300 {
   --tw-border-opacity: 1;
   border-color: rgb(239 239 239 / var(--tw-border-opacity));
@@ -1266,6 +1322,10 @@ video {
   --tw-border-opacity: 1;
   border-color: rgb(125 130 132 / var(--tw-border-opacity));
 }
+.tw-border-grayscale-700 {
+  --tw-border-opacity: 1;
+  border-color: rgb(82 93 96 / var(--tw-border-opacity));
+}
 .tw-border-info-300 {
   --tw-border-opacity: 1;
   border-color: rgb(112 193 243 / var(--tw-border-opacity));
@@ -1738,9 +1798,6 @@ video {
 .tw-pt-2 {
   padding-top: 0.5rem;
 }
-.tw-pt-4 {
-  padding-top: 1rem;
-}
 .tw-pt-6 {
   padding-top: 1.5rem;
 }
@@ -1763,6 +1820,10 @@ video {
   font-size: 1.5rem;
   line-height: 2rem;
 }
+.tw-text-3xl {
+  font-size: 1.875rem;
+  line-height: 2.25rem;
+}
 .tw-text-4xl {
   font-size: 2.25rem;
   line-height: 2.5rem;
@@ -2033,6 +2094,10 @@ video {
   --tw-bg-opacity: 1;
   background-color: rgb(230 230 230 / var(--tw-bg-opacity));
 }
+.hover\:tw-bg-grayscale-500:hover {
+  --tw-bg-opacity: 1;
+  background-color: rgb(204 204 204 / var(--tw-bg-opacity));
+}
 .hover\:tw-bg-info-100:hover {
   --tw-bg-opacity: 1;
   background-color: rgb(207 234 251 / var(--tw-bg-opacity));
@@ -2089,6 +2154,10 @@ video {
   --tw-text-opacity: 1;
   color: rgb(39 52 56 / var(--tw-text-opacity));
 }
+.hover\:tw-text-primary-600:hover {
+  --tw-text-opacity: 1;
+  color: rgb(14 121 188 / var(--tw-text-opacity));
+}
 .hover\:tw-text-secondary-500:hover {
   --tw-text-opacity: 1;
   color: rgb(93 109 129 / var(--tw-text-opacity));
@@ -2176,6 +2245,10 @@ video {
     margin-bottom: 1rem;
   }
 
+  .sm\:tw-ml-2 {
+    margin-left: 0.5rem;
+  }
+
   .sm\:tw-ml-4 {
     margin-left: 1rem;
   }
@@ -2224,6 +2297,10 @@ video {
     flex-direction: row;
   }
 
+  .sm\:tw-items-center {
+    align-items: center;
+  }
+
   .sm\:tw-rounded-md {
     border-radius: 0.375rem;
   }
@@ -2235,10 +2312,18 @@ video {
 }
 @media (min-width: 768px) {
 
+  .md\:tw-relative {
+    position: relative;
+  }
+
   .md\:tw-right-6 {
     right: 1.5rem;
   }
 
+  .md\:tw-order-first {
+    order: -9999;
+  }
+
   .md\:tw-mb-0 {
     margin-bottom: 0px;
   }
@@ -2303,6 +2388,10 @@ video {
     width: 6rem;
   }
 
+  .md\:tw-w-3\/4 {
+    width: 75%;
+  }
+
   .md\:tw-w-auto {
     width: auto;
   }
@@ -2315,6 +2404,10 @@ video {
     max-width: 100%;
   }
 
+  .md\:tw-flex-1 {
+    flex: 1 1 0%;
+  }
+
   .md\:tw-grow {
     flex-grow: 1;
   }
@@ -2374,6 +2467,10 @@ video {
        object-fit: contain;
   }
 
+  .md\:tw-p-0 {
+    padding: 0px;
+  }
+
   .md\:tw-p-2 {
     padding: 0.5rem;
   }
@@ -2390,6 +2487,11 @@ video {
     padding: 2rem;
   }
 
+  .md\:tw-px-12 {
+    padding-left: 3rem;
+    padding-right: 3rem;
+  }
+
   .md\:tw-px-4 {
     padding-left: 1rem;
     padding-right: 1rem;
@@ -2405,6 +2507,10 @@ video {
     padding-bottom: 0.5rem;
   }
 
+  .md\:tw-pb-0 {
+    padding-bottom: 0px;
+  }
+
   .md\:tw-pl-4 {
     padding-left: 1rem;
   }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@designcrowd/fe-shared-lib",
-  "version": "1.5.26",
+  "version": "1.5.27",
   "scripts": {
     "start": "run-p storybook watch:translation",
     "build": "npm run build:css --production",

package/src/atoms/components/Price/Price.stories.js

@@ -1,9 +1,7 @@
-import Price from './Price.vue';
+import { defineComponent } from 'vue';
+import { setSharedLibLocaleAsync } from '../../../useSharedLibTranslate';
 import { currencies, locales } from './Price.fixtures';
-import { setSharedLibLocaleAsync } from "../../../useSharedLibTranslate";
-import { defineComponent } from "vue";
-
-await setSharedLibLocaleAsync();
+import Price from './Price.vue';
 
 // noinspection JSUnusedGlobalSymbols
 export default {
@@ -11,7 +9,7 @@ export default {
   component: Price,
   args: {
     currencyName: currencies[0].name,
-    locale: locales[0]
+    locale: locales[0],
   },
   argTypes: {
     amount: {
@@ -44,6 +42,9 @@ export const Sample = {
           return locales.find((x) => x === this.args.locale);
         },
       },
+      async mounted() {
+        await setSharedLibLocaleAsync();
+      },
       template: `
       <span>
         <price 
@@ -76,6 +77,9 @@ export const WithFraction = {
           return locales.find((x) => x === this.args.locale);
         },
       },
+      async mounted() {
+        await setSharedLibLocaleAsync();
+      },
       template: `
       <span>
         <price
@@ -109,6 +113,9 @@ export const AlwaysShowFractionOn = {
           return locales.find((x) => x === this.args.locale);
         },
       },
+      async mounted() {
+        await setSharedLibLocaleAsync();
+      },
       template: `
       <span>
         <price
@@ -140,6 +147,9 @@ export const AlwaysShowFractionOff = {
           return currencies.find((x) => x.name === this.args.currencyName);
         },
       },
+      async mounted() {
+        await setSharedLibLocaleAsync();
+      },
       template: `
       <span>
         <price
@@ -174,6 +184,9 @@ export const WithSuffix = {
           return locales.find((x) => x === this.args.locale);
         },
       },
+      async mounted() {
+        await setSharedLibLocaleAsync();
+      },
       template: `
       <span>
         <price
@@ -210,6 +223,9 @@ export const WithLocale = {
           return locales.find((x) => x === this.args.locale);
         },
       },
+      async mounted() {
+        await setSharedLibLocaleAsync();
+      },
       template: `
       <span>
         <price
@@ -235,12 +251,17 @@ export const AllLocalesAndCurrencies = (args, { argTypes }) => {
     data() {
       const combos = new Array(locales.length).fill(0);
       combos.forEach((item, index) => {
-        combos[index] = new Array(currencies.length).fill(0).map((item2, index2) => ({"locale": locales[index], "currency": currencies[index2]}));
-      })
+        combos[index] = new Array(currencies.length)
+          .fill(0)
+          .map((item2, index2) => ({ locale: locales[index], currency: currencies[index2] }));
+      });
       return {
         variants: combos,
       };
     },
+    async mounted() {
+      await setSharedLibLocaleAsync();
+    },
     template: `
       <StorybookPriceComponent
           :variants="variants"/>
@@ -253,20 +274,20 @@ export const AllLocalesAndCurrencies = (args, { argTypes }) => {
 };
 
 const StorybookPriceComponent = defineComponent({
-    components: {
-      Price,
+  components: {
+    Price,
+  },
+  props: {
+    variants: {
+      type: Array,
+      required: true,
     },
-    props: {
-      variants: {
-        type: Array,
-        required: true,
-      },
-      showAbbreviation: {
-        type: Boolean,
-        default: false,
-      },
+    showAbbreviation: {
+      type: Boolean,
+      default: false,
     },
-    template: `
+  },
+  template: `
     <table class="tw-w-full">
       <thead>
         <tr>
@@ -289,4 +310,4 @@ const StorybookPriceComponent = defineComponent({
       </tbody>
     </table>
   `,
-});
+});

package/src/experiences/components/WebsitesContextualUpgradeModal/WebsiteContextualUpgradeModal.vue

@@ -36,9 +36,9 @@
           </div>
         </div>
       </div>
-      <div class="bottom-bar tw-mt-2 tw-border-grayscale-300">
+      <div class="bottom-bar tw-mt-2">
         <div
-          class="bottom-bar tw-mt-6 tw-border-grayscale-300 tw-bg-grayscale-200 tw-flex tw-flex-col md:tw-flex-row md:tw-items-center md:tw-gap-2"
+          class="bottom-bar tw-mt-6 tw-bg-grayscale-200 tw-flex tw-flex-col md:tw-flex-row md:tw-items-center md:tw-gap-2"
         >
           <div class="button-size md:tw-flex-1">
             <Button
@@ -69,9 +69,9 @@
 </template>
 <script setup lang="ts">
 import { Ref, ref } from 'vue';
+import Modal from '../../../atoms/components/Modal/Modal.vue';
 import Button from '../../../atoms/components/Button/Button.vue';
 import Icon from '../../../atoms/components/Icon/Icon.vue';
-import Modal from '../../../atoms/components/Modal/Modal.vue';
 import { websiteContextualUpgradeModalTr } from '../../../useSharedLibTranslate';
 import { WEBSITE_UPGRADE_CONTEXT_TYPES, type WebsiteContextUpgradeType } from '../../models/websiteContextualModel';
 
@@ -190,8 +190,7 @@ const onUpgradeClick = () => {
 </script>
 <style scoped>
 .bottom-bar {
-  @apply tw-absolute tw-p-4 tw-bottom-0 tw-left-0 tw-w-full tw-border-t md:tw-p-0 md:tw-relative md:tw-border-none;
-  @apply tw-absolute tw-p-4 tw-bottom-0 tw-left-0 tw-w-full tw-border-t tw-border-gray-300 md:tw-p-0 md:tw-relative md:tw-border-none;
+  @apply tw-absolute tw-p-4 tw-bottom-0 tw-left-0 tw-w-full tw-border-t tw-border-grayscale-300 md:tw-p-0 md:tw-relative md:tw-border-none;
 }
 .button-size {
   @apply tw-w-full md:tw-max-w-40;

package/tailwind.config.js

@@ -16,7 +16,7 @@ const designSystemConfig = {
   viewports,
 };
 
-const theme = designSystemConfig.themes[process.env.tailwindTheme]; // use the environment theme from functions/tailwind.js
+const theme = designSystemConfig.themes[process.env.tailwindTheme] || dcomTheme; // use the environment theme from functions/tailwind.js, default to designCom
 module.exports = {
   prefix: 'tw-',
   content: ['./src/**/components/**/*.vue'],