@kompasid/lit-web-components 0.9.25 → 0.9.27

package/src/components/kompasid-paywall-body/KompasPaywallBody.ts

@@ -679,7 +679,7 @@ export class KompasIdPaywallBody extends LitElement {
                   ${unsafeSVG(getFontAwesomeIcon('fas', 'check', 12, 12))}
                 </div>
                 <h6
-                  class="text-xs md:text-base ml-0.5 md:ml-1 ${buttonTextColorClass}"
+                  class="text-sm md:text-base ml-0.5 md:ml-1 ${buttonTextColorClass}"
                 >
                   ${item}
                 </h6>
@@ -736,25 +736,35 @@ export class KompasIdPaywallBody extends LitElement {
   private regulerRegistrationSection() {
     const textColorClass = this.isDark ? 'text-blue-300' : 'text-blue-600'
     const buttonTextColorClass = this.isDark ? 'text-white' : 'text-grey-600'
+    const isPro =
+      this.type === 'proMiningArticle' || this.type === 'proMiningOutlook'
 
     return html`
-      <div class="flex flex-col items-center justify-center">
-        <div>
-          <button
-            @click=${() => redirectToRegister('hard_paywall')}
-            class="text-sm md:text-base font-bold underline ${textColorClass}"
-          >
-            Daftar
-          </button>
-          <span class="${buttonTextColorClass}"
-            >untuk kuota artikel gratis</span
-          >
-        </div>
+      <div
+        class="flex flex-col items-center justify-center text-sm md:text-base"
+      >
+        ${!isPro
+          ? html`
+              <div>
+                <button
+                  @click=${() => redirectToRegister('hard_paywall')}
+                  class="font-bold underline ${textColorClass}"
+                >
+                  Daftar
+                </button>
+                <span class="${buttonTextColorClass}"
+                  >untuk kuota artikel gratis</span
+                >
+              </div>
+            `
+          : nothing}
         <div>
-          <span class="${buttonTextColorClass}">atau</span>
+          ${!isPro
+            ? html` <span class="${buttonTextColorClass}">atau</span>`
+            : nothing}
           <button
             @click=${() => redirectToLogin({ loc: 'hard_paywall' })}
-            class="text-sm md:text-base font-bold underline ${textColorClass}"
+            class="font-bold underline ${textColorClass}"
           >
             Masuk
           </button>

package/tailwind/tailwind.css

@@ -671,6 +671,11 @@ video {
   margin-right: auto;
 }
 
+.my-1 {
+  margin-top: 0.25rem;
+  margin-bottom: 0.25rem;
+}
+
 .my-4 {
   margin-top: 1rem;
   margin-bottom: 1rem;
@@ -850,6 +855,10 @@ video {
   height: 4rem;
 }
 
+.h-2 {
+  height: 0.5rem;
+}
+
 .h-20 {
   height: 5rem;
 }
@@ -943,6 +952,10 @@ video {
   width: 4rem;
 }
 
+.w-2 {
+  width: 0.5rem;
+}
+
 .w-2\/3 {
   width: 66.666667%;
 }
@@ -1417,6 +1430,10 @@ video {
   border-color: rgb(255 204 0 / var(--tw-border-opacity, 1));
 }
 
+.bg-\[\#00000066\] {
+  background-color: #00000066;
+}
+
 .bg-\[\#2C2C2C\] {
   --tw-bg-opacity: 1;
   background-color: rgb(44 44 44 / var(--tw-bg-opacity, 1));
@@ -1708,6 +1725,10 @@ video {
   padding-left: 0.25rem;
 }
 
+.pl-14 {
+  padding-left: 3.5rem;
+}
+
 .pl-2 {
   padding-left: 0.5rem;
 }
@@ -1744,6 +1765,10 @@ video {
   padding-top: 0.125rem;
 }
 
+.pt-1 {
+  padding-top: 0.25rem;
+}
+
 .pt-10 {
   padding-top: 2.5rem;
 }

package/tailwind/tailwind.ts

@@ -678,6 +678,11 @@ Constrain images and videos to the parent width and preserve their intrinsic asp
     margin-right: auto;
   }
 
+  .my-1 {
+    margin-top: 0.25rem;
+    margin-bottom: 0.25rem;
+  }
+
   .my-4 {
     margin-top: 1rem;
     margin-bottom: 1rem;
@@ -857,6 +862,10 @@ Constrain images and videos to the parent width and preserve their intrinsic asp
     height: 4rem;
   }
 
+  .h-2 {
+    height: 0.5rem;
+  }
+
   .h-20 {
     height: 5rem;
   }
@@ -950,6 +959,10 @@ Constrain images and videos to the parent width and preserve their intrinsic asp
     width: 4rem;
   }
 
+  .w-2 {
+    width: 0.5rem;
+  }
+
   .w-2\\/3 {
     width: 66.666667%;
   }
@@ -1428,6 +1441,10 @@ Constrain images and videos to the parent width and preserve their intrinsic asp
     border-color: rgb(255 204 0 / var(--tw-border-opacity, 1));
   }
 
+  .bg-\\[\\#00000066\\] {
+    background-color: #00000066;
+  }
+
   .bg-\\[\\#2C2C2C\\] {
     --tw-bg-opacity: 1;
     background-color: rgb(44 44 44 / var(--tw-bg-opacity, 1));
@@ -1719,6 +1736,10 @@ Constrain images and videos to the parent width and preserve their intrinsic asp
     padding-left: 0.25rem;
   }
 
+  .pl-14 {
+    padding-left: 3.5rem;
+  }
+
   .pl-2 {
     padding-left: 0.5rem;
   }
@@ -1755,6 +1776,10 @@ Constrain images and videos to the parent width and preserve their intrinsic asp
     padding-top: 0.125rem;
   }
 
+  .pt-1 {
+    padding-top: 0.25rem;
+  }
+
   .pt-10 {
     padding-top: 2.5rem;
   }