@kompasid/lit-web-components 0.8.16 → 0.8.17

package/src/components/kompasid-metered-wall-register/KompasMeteredWallRegister.ts

@@ -8,6 +8,7 @@ import {
   meteredRegisterResponse,
   meteredRegisterContent,
 } from './types.js'
+import { ellipsisText } from '../../utils/ellipsisText.js'
 
 @customElement('kompasid-metered-wall-register')
 export class KompasMeteredWallRegister extends LitElement {
@@ -17,6 +18,10 @@ export class KompasMeteredWallRegister extends LitElement {
         font-family: 'PT Sans', sans-serif;
       }
 
+      .font-lora {
+        font-family: 'Lora', 'Georgia', 'serif';
+      }
+
       .body {
         position: sticky;
         top: 0;
@@ -24,8 +29,10 @@ export class KompasMeteredWallRegister extends LitElement {
         width: 100%;
       }
 
-      .banner-content {
-        gap: 55px;
+      @media (min-width: 768px) {
+        .md\:max-w-\[737px\] {
+          max-width: 737px;
+        }
       }
     `,
     TWStyles,
@@ -168,17 +175,17 @@ export class KompasMeteredWallRegister extends LitElement {
       <div class="flex flex-col space-y-4">
         <div class="flex justify-between items-center h-full">
           <div class="w-9 h-9 hidden lg:block"></div>
-          <div class="banner-content flex flex-row items-center">
+          <div class="flex flex-row items-center gap-6">
             <div
-              class="text-base md:text-lg font-lora"
-              .innerHTML=${this.setTemplate('title')}
+              class="text-base md:text-lg font-lora md:max-w-[737px] text-grey-600"
+              .innerHTML=${ellipsisText(this.setTemplate('title'), 76)}
             ></div>
             <div class="hidden md:block">${this.registerButtonTemplate()}</div>
           </div>
           <div>
             <button
               @click="${this.triggerExpandBanner}"
-              class="h-9 w-9 flex ml-2 items-center justify-center text-blue-500 rounded bg-blue-200"
+              class="h-9 w-9 flex ml-auto items-center justify-center text-blue-500 rounded bg-blue-200"
             >
               <div
                 class="icon icon-blue-600 ${this.isExpandBanner
@@ -198,13 +205,13 @@ export class KompasMeteredWallRegister extends LitElement {
   private expandedBannerContent() {
     return html`
       <div
-        class="flex flex-col-reverse justify-between md:flex-row gap-4 md:gap-8"
+        class="flex flex-col-reverse justify-between md:flex-row gap-4 md:gap-8 text-grey-600"
       >
         <div
           class="flex flex-col justify-evenly md:text-left md:w-5/12 gap-4 ml-auto"
         >
           <p
-            class="text-lg md:text-2xl font-lora"
+            class="text-2xl md:text-2xl font-lora"
             .innerHTML=${this.setTemplate('title', 'expand')}
           ></p>
           <p
@@ -223,7 +230,7 @@ export class KompasMeteredWallRegister extends LitElement {
         </div>
         <button
           @click="${this.triggerExpandBanner}"
-          class="h-9 w-9 flex items-center justify-center text-blue-500 rounded bg-blue-200"
+          class="h-9 w-9 flex items-center justify-center text-blue-500 rounded bg-blue-200 ml-auto"
         >
           <div
             class="icon icon-blue-600 ${this.isExpandBanner
@@ -246,15 +253,15 @@ export class KompasMeteredWallRegister extends LitElement {
         ${!this.textTemplate.expand.ctaUrl
           ? html`<button
               @click=${this.redirectToRegister}
-              class="bg-green-500 p-1.5 w-full whitespace-nowrap rounded-md font-bold text-grey-100 text-sm md:text-base"
+              class="bg-green-500 p-3 w-full whitespace-nowrap rounded-md font-bold text-grey-100 text-sm md:text-base"
             >
               Daftar Akun
             </button>`
           : html`<button
               @click=${this.redirectToCTAUrl}
-              class="bg-green-500 p-1.5 w-full whitespace-nowrap rounded-md font-bold text-grey-100 px-5 text-sm md:text-base md:w-auto"
+              class="bg-green-500 p-3 w-full whitespace-nowrap rounded-md font-bold text-grey-100 px-5 text-sm md:text-base md:w-auto md:mr-6"
             >
-              ${this.textTemplate.expand.ctaText}
+              ${ellipsisText(this.textTemplate.expand.ctaText, 24)}
             </button>`}
       </div>
     `

package/src/utils/ellipsisText.ts

@@ -0,0 +1,26 @@
+/**
+ * Shorten a string to a given length, appending an ellipsis if necessary.
+ * @param {string} string The string to be shortened.
+ * @param {number} [length=255] The desired length of the output string.
+ * @return {string}
+ */
+const ellipsisText = (string: string, length: number = 255): string => {
+  const parser = new DOMParser()
+  const doc = parser.parseFromString(string, 'text/html')
+
+  let fullText = doc.body.textContent || ''
+
+  if (fullText.length <= length) {
+    return fullText
+  }
+  fullText = fullText.substring(0, length - 1)
+
+  const lastSpace = fullText.lastIndexOf(' ')
+
+  return `${fullText.substring(
+    0,
+    Math.sign(lastSpace) > 0 ? lastSpace : length
+  )}...`
+}
+
+export { ellipsisText }

package/tailwind/tailwind.css

@@ -713,10 +713,6 @@ video {
   margin-left: 0.75rem;
 }
 
-.ml-4 {
-  margin-left: 1rem;
-}
-
 .ml-8 {
   margin-left: 2rem;
 }
@@ -745,6 +741,14 @@ video {
   margin-right: 1.5rem;
 }
 
+.mt-0 {
+  margin-top: 0px;
+}
+
+.mt-0\.5 {
+  margin-top: 0.125rem;
+}
+
 .mt-1 {
   margin-top: 0.25rem;
 }
@@ -801,6 +805,10 @@ video {
   height: 3rem;
 }
 
+.h-14 {
+  height: 3.5rem;
+}
+
 .h-16 {
   height: 4rem;
 }
@@ -845,6 +853,10 @@ video {
   height: 17px;
 }
 
+.h-\[300px\] {
+  height: 300px;
+}
+
 .h-\[68px\] {
   height: 68px;
 }
@@ -874,6 +886,10 @@ video {
   width: 33.333333%;
 }
 
+.w-1\/4 {
+  width: 25%;
+}
+
 .w-1\/5 {
   width: 20%;
 }
@@ -886,6 +902,10 @@ video {
   width: 91.666667%;
 }
 
+.w-14 {
+  width: 3.5rem;
+}
+
 .w-16 {
   width: 4rem;
 }
@@ -1029,6 +1049,16 @@ video {
   animation: pulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite;
 }
 
+@keyframes spin {
+  to {
+    transform: rotate(360deg);
+  }
+}
+
+.animate-spin {
+  animation: spin 1s linear infinite;
+}
+
 .cursor-pointer {
   cursor: pointer;
 }
@@ -1173,6 +1203,10 @@ video {
   overflow: hidden;
 }
 
+.overflow-y-scroll {
+  overflow-y: scroll;
+}
+
 .truncate {
   overflow: hidden;
   text-overflow: ellipsis;
@@ -1183,6 +1217,10 @@ video {
   white-space: nowrap;
 }
 
+.break-words {
+  overflow-wrap: break-word;
+}
+
 .rounded {
   border-radius: 0.25rem;
 }
@@ -1351,6 +1389,11 @@ video {
   background-color: rgb(46 46 46 / var(--tw-bg-opacity));
 }
 
+.bg-green-100 {
+  --tw-bg-opacity: 1;
+  background-color: rgb(238 252 210 / var(--tw-bg-opacity));
+}
+
 .bg-green-300 {
   --tw-bg-opacity: 1;
   background-color: rgb(151 219 83 / var(--tw-bg-opacity));
@@ -1391,6 +1434,11 @@ video {
   background-color: rgb(255 238 204 / var(--tw-bg-opacity));
 }
 
+.bg-red-100 {
+  --tw-bg-opacity: 1;
+  background-color: rgb(254 225 207 / var(--tw-bg-opacity));
+}
+
 .bg-white {
   --tw-bg-opacity: 1;
   background-color: rgb(255 255 255 / var(--tw-bg-opacity));
@@ -1443,6 +1491,11 @@ video {
   padding: 1.5rem;
 }
 
+.px-0 {
+  padding-left: 0px;
+  padding-right: 0px;
+}
+
 .px-2 {
   padding-left: 0.5rem;
   padding-right: 0.5rem;
@@ -1488,6 +1541,11 @@ video {
   padding-bottom: 0.125rem;
 }
 
+.py-1 {
+  padding-top: 0.25rem;
+  padding-bottom: 0.25rem;
+}
+
 .py-2 {
   padding-top: 0.5rem;
   padding-bottom: 0.5rem;
@@ -1573,8 +1631,8 @@ video {
   padding-left: 1px;
 }
 
-.pr-14 {
-  padding-right: 3.5rem;
+.pr-1 {
+  padding-right: 0.25rem;
 }
 
 .pr-2 {
@@ -1822,6 +1880,11 @@ video {
   color: rgb(51 51 51 / var(--tw-text-opacity));
 }
 
+.text-grey-700 {
+  --tw-text-opacity: 1;
+  color: rgb(0 0 0 / var(--tw-text-opacity));
+}
+
 .text-orange-400 {
   --tw-text-opacity: 1;
   color: rgb(255 122 0 / var(--tw-text-opacity));
@@ -1832,6 +1895,11 @@ video {
   color: rgb(219 93 0 / var(--tw-text-opacity));
 }
 
+.text-red-600 {
+  --tw-text-opacity: 1;
+  color: rgb(174 9 27 / var(--tw-text-opacity));
+}
+
 .text-white {
   --tw-text-opacity: 1;
   color: rgb(255 255 255 / var(--tw-text-opacity));
@@ -1930,8 +1998,8 @@ video {
     margin-right: 1.25rem;
   }
 
-  .md\:mt-0 {
-    margin-top: 0px;
+  .md\:mr-6 {
+    margin-right: 1.5rem;
   }
 
   .md\:mt-2 {
@@ -2011,10 +2079,6 @@ video {
     width: 13rem;
   }
 
-  .md\:w-\[165px\] {
-    width: 165px;
-  }
-
   .md\:w-\[350px\] {
     width: 350px;
   }
@@ -2055,6 +2119,10 @@ video {
     max-width: 464px;
   }
 
+  .md\:max-w-\[737px\] {
+    max-width: 737px;
+  }
+
   .md\:max-w-full {
     max-width: 100%;
   }
@@ -2091,10 +2159,6 @@ video {
     justify-content: center;
   }
 
-  .md\:gap-2 {
-    gap: 0.5rem;
-  }
-
   .md\:gap-8 {
     gap: 2rem;
   }
@@ -2149,10 +2213,6 @@ video {
     align-self: flex-end;
   }
 
-  .md\:self-center {
-    align-self: center;
-  }
-
   .md\:rounded {
     border-radius: 0.25rem;
   }